/* ============================================================
   MLMTEK Patent System — Editorial Midnight (green-gold / copper)
   Fonts localized (offline). Integer type scale. Flexible layout.
   ============================================================ */

/* ---------- Local fonts (works offline / file://) ---------- */
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal;}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal;}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal;}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-800.woff2') format('woff2');font-weight:800;font-display:swap;font-style:normal;}
@font-face{font-family:'Noto Sans TC';src:url('../assets/fonts/notosanstc-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Noto Sans TC';src:url('../assets/fonts/notosanstc-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Noto Sans TC';src:url('../assets/fonts/notosanstc-900.woff2') format('woff2');font-weight:900;font-display:swap;}

:root{
  /* palette */
  --bg:#05090d; --bg2:#0a121a; --panel:#0b141c; --panel2:#0e1a24;
  --copper:#c8823c; --copper-dim:#8a5a2c; --gold:#e0b454; --green:#86d06a; --teal:#6fc3a6;
  --text:#eef4ef; --muted:#9aada1; --faint:#6f8377;
  --line:rgba(224,180,84,.20); --line-strong:rgba(224,180,84,.46);
  --shadow:0 10px 60px rgba(200,130,60,.10);

  /* type scale (integers only) */
  --fs-micro:12px; --fs-sm:14px; --fs-base:16px; --fs-md:20px; --fs-lg:24px; --fs-xl:30px;
  --lh-tight:1.25; --lh:1.5;

  /* chrome metrics */
  --h-header:50px; --h-controls:48px;

  --font:'Inter','Noto Sans TC','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; color:var(--text); font-family:var(--font);
  background:radial-gradient(1300px 760px at 50% -12%, #12202c 0%, #0a121a 44%, #05090d 100%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.app{
  display:grid;
  grid-template-rows:var(--h-header) auto auto auto minmax(0,1fr) auto var(--h-controls);
  height:100vh; height:100dvh; width:100vw; overflow:hidden;
}

/* ---------- Contents nav (jump to AIP / any patent) ---------- */
.contents{display:flex; gap:6px; align-items:center; overflow-x:auto; padding:6px 16px;
  border-bottom:1px solid var(--line); background:rgba(5,9,13,.5); scrollbar-width:thin;}
.contents button{flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:4px 11px; font-size:var(--fs-micro); font-weight:700; cursor:pointer;
  font-family:var(--font); letter-spacing:.03em; white-space:nowrap;}
.contents button:hover{border-color:var(--gold); color:var(--gold);}
.contents button.active{background:rgba(224,180,84,.16); color:var(--gold); border-color:var(--line-strong);}
.contents button.patent{border-color:var(--gold); color:var(--gold);}
.contents button.patent:hover{background:rgba(224,180,84,.14);}
.contents button.patent.active{background:rgba(224,180,84,.22); color:var(--gold); border-color:var(--gold);}
.contents .sep{width:1px; height:18px; background:var(--line); flex:0 0 auto; margin:0 4px;}
.contents .lbl{font-size:var(--fs-micro); color:var(--faint); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:0 4px; flex:0 0 auto;}
.nav-hint{display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 16px 0; background:rgba(5,9,13,.5);
  font-size:var(--fs-micro); color:var(--copper); font-weight:600; letter-spacing:.05em;}
.nav-hint .nav-hint-ic{display:inline-block; animation:navHintPulse 1.6s ease-in-out infinite;}
@keyframes navHintPulse{0%,100%{transform:translateY(0); opacity:.8;} 50%{transform:translateY(-2px); opacity:1;}}
@media (prefers-reduced-motion: reduce){ .nav-hint .nav-hint-ic{animation:none;} }

/* ---------- Header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  border-bottom:1px solid var(--line); background:rgba(5,9,13,.62); backdrop-filter:blur(8px);
}
.brand{font-weight:800; letter-spacing:.12em; font-size:var(--fs-sm); color:var(--gold);}
.brand span{color:var(--faint); font-weight:600; letter-spacing:.06em;}
.header-right{display:flex; align-items:center; gap:18px;}
#patentLabel{font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em;}

.toggle{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.toggle button{
  background:transparent; border:0; color:var(--muted);
  padding:6px 13px; font-size:var(--fs-micro); font-weight:700; cursor:pointer; letter-spacing:.05em;
  font-family:var(--font);
}
.toggle button.active{background:rgba(224,180,84,.15); color:var(--gold);}
.toggle button:not(:last-child){border-right:1px solid var(--line);}

/* ---------- Card header ---------- */
.cardhead{padding:9px 24px 9px; border-bottom:1px solid rgba(224,180,84,.09);}
.cardhead h1{margin:0; font-size:clamp(16px,1.5vw,var(--fs-lg)); font-weight:800; letter-spacing:.005em; line-height:1.15;}
.cardhead .sub{margin:3px 0 7px; color:var(--copper); font-size:var(--fs-micro); font-weight:600; letter-spacing:.06em;}
.chips{display:none;}  /* category / status / strategic-standalone chips hidden (pre-NDA positioning) */
.chip{
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; padding:4px 11px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.02); white-space:nowrap;
}
.chip.cat{border-color:var(--copper-dim); color:var(--copper);}
.chip.stat{border-color:rgba(134,208,106,.42); color:var(--green);}
.chip.strategic{border-color:var(--gold); color:var(--gold); background:rgba(224,180,84,.09);}

/* ---------- Stage ---------- */
.stage{position:relative; overflow:hidden; min-height:0;}
.layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; padding:18px; overflow:auto; transition:opacity .4s ease;}
.audiobar{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold); box-shadow:0 0 8px var(--gold); transition:width .15s linear; z-index:15; pointer-events:none;}
.layer.show{opacity:1; pointer-events:auto;}

/* diagram layer — image fills the available stage */
.diagram-wrap{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:zoom-in;}
/* tight frame that shrink-wraps the image, so spotlight % maps to the image itself
   (not the letterboxed container) regardless of display size */
.diagram-frame{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.diagram-frame img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); background:#05090d;
}
/* SVG spotlight overlay — fills the frame; its viewBox+meet aligns to the contained image */
.spotsvg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
#layer-diagram{padding:10px;}
.diagram-hint{
  position:absolute; top:9px; right:11px; font-size:var(--fs-micro); color:var(--muted);
  background:rgba(5,9,13,.66); border:1px solid var(--line); padding:3px 9px; border-radius:6px; pointer-events:none;
}
.spotlight{
  position:absolute; border:1.5px solid var(--gold); border-radius:9px;
  box-shadow:0 0 0 9999px rgba(3,6,10,.72), 0 0 26px rgba(224,180,84,.42);
  pointer-events:none; opacity:0;
}
.spotcap{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  max-width:84%; text-align:center; font-size:var(--fs-base); color:var(--gold); font-weight:600; line-height:var(--lh-tight);
  background:rgba(5,9,13,.8); border:1px solid var(--line); padding:9px 16px; border-radius:9px; opacity:0;
}

/* atmospheric backdrop diagram (text / status / cta frames) */
#bgDiagram{position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(5px) brightness(.22) saturate(.8); opacity:0; transition:opacity .6s;}
#bgDiagram.show{opacity:1;}

/* text hero frame */
.textframe{max-width:820px; padding:0 5vw; text-align:left; margin:auto;}
.textframe .ftitle{font-size:var(--fs-sm); letter-spacing:.2em; text-transform:uppercase; color:var(--copper); font-weight:800; margin-bottom:16px;}
.textframe .fbody{font-size:clamp(15px, 2.6vh, 26px); line-height:1.38; color:var(--text); font-weight:500;}
.textframe .fbody em{color:var(--gold); font-style:normal; font-weight:700;}

/* status frame */
.statusgrid{display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;}
.statusgrid .sline{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.bigchip{font-size:var(--fs-base); font-weight:700; padding:9px 16px; border-radius:10px; border:1px solid var(--line-strong);
  color:var(--gold); background:rgba(224,180,84,.06); opacity:0;}
.status-note{font-size:var(--fs-sm); color:var(--muted); margin-top:6px;}

/* cta frame */
.cta-wrap{text-align:center; max-width:760px; padding:0 5vw; margin:auto;}
.cta-wrap .rq{font-size:clamp(15px, 2.5vh, 26px); line-height:1.38; color:var(--text); font-weight:600;}
.cta-wrap .rq em{color:var(--green); font-style:normal; font-weight:700;}
.cta-btn{margin-top:28px; display:inline-block; border:1px solid var(--gold); color:var(--gold);
  background:rgba(224,180,84,.1); padding:13px 28px; border-radius:11px; font-weight:800; font-size:var(--fs-base); letter-spacing:.03em; cursor:pointer;}
.cta-btn:hover{background:rgba(224,180,84,.18);}

/* map frame */
/* definite height — SVG percentage-height collapses to 0 inside a flex .layer */
#mapSvg{width:min(900px,94%); height:min(72vh,560px);}
.maplegend{position:absolute; left:22px; bottom:20px; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-micro); color:var(--muted);}
.maplegend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle;}

/* ---------- Narration band ---------- */
.narr{padding:11px 24px; border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,20,28,.42),rgba(5,9,13,.85)); max-height:22vh; overflow:auto;}
.narr .nlabel{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--copper); font-weight:800;}
.narr .ntitle{font-size:var(--fs-base); font-weight:700; color:var(--gold); margin:3px 0 6px;}
.narr .nbody{font-size:var(--fs-sm); line-height:var(--lh); color:var(--muted); max-width:1180px;}
.narr .nbody em{color:var(--text); font-style:normal; font-weight:600;}
.layer-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--bg);
  background:var(--copper); border-radius:5px; padding:1px 7px; margin-left:9px; vertical-align:middle;}
.layer-tag.nda{background:var(--gold);} .layer-tag.internal{background:var(--green);}

/* ---------- Controls ---------- */
.controls{display:flex; align-items:center; justify-content:center; gap:9px;
  background:rgba(5,9,13,.86); border-top:1px solid var(--line); padding:0 14px; position:relative;}
.controls button{background:#0c1822; border:1px solid var(--line); color:var(--text);
  padding:7px 14px; border-radius:8px; cursor:pointer; font-weight:700; font-size:var(--fs-sm); font-family:var(--font);}
.controls button:hover{border-color:var(--gold); color:var(--gold);}
.controls button:disabled{opacity:.38; cursor:default;}
.controls button:disabled:hover{border-color:var(--line); color:var(--text);}
.controls .primary{background:rgba(224,180,84,.15); color:var(--gold); border-color:var(--line-strong);}
.dots{display:flex; gap:8px; margin:0 10px;}
.dot{width:10px; height:10px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; cursor:pointer; padding:0; position:relative; appearance:none; -webkit-appearance:none; font:inherit;}
.dot::after{content:""; position:absolute; inset:-9px;}
.dot.active{background:var(--gold); box-shadow:0 0 11px var(--gold);}
.dot:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.ctrl-sep{display:inline-block; width:1px; height:18px; background:var(--line); margin:0 4px;}
.fname{font-size:var(--fs-micro); color:var(--muted); min-width:130px; text-align:center; letter-spacing:.04em;}
#audioStatus{position:absolute; right:16px; font-size:var(--fs-micro); color:var(--faint);}

/* lightbox (click-to-expand diagram) */
.lightbox{position:fixed; inset:0; background:rgba(2,5,9,.94); display:none; place-items:center; z-index:50; padding:3vh; cursor:zoom-out;}
.lightbox.show{display:grid;}
.lightbox img{max-width:96vw; max-height:94vh; border:1px solid var(--line-strong); border-radius:8px;}
.lightbox .lbclose{position:absolute; top:18px; right:24px; color:var(--gold); font-size:26px; font-weight:800; cursor:pointer;}

/* toast */
.toast{position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(11,20,28,.96); border:1px solid var(--line-strong); color:var(--gold);
  padding:9px 18px; border-radius:9px; font-size:var(--fs-sm); opacity:0; transition:opacity .3s; z-index:20; max-width:80%; text-align:center;}
.toast.show{opacity:1;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .layer, .audiobar, #bgDiagram, .toast{transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  :root{--fs-xl:26px; --fs-lg:22px;}
}
@media (max-width:900px){
  :root{--fs-xl:23px; --fs-lg:20px; --fs-md:18px;}
  .header-right{gap:10px;} .brand span{display:none;}
  .cardhead{padding:10px 16px 9px;}
}
@media (max-width:600px){
  .app{height:auto; min-height:100vh; grid-template-rows:repeat(7,auto); overflow:visible;}
  body{overflow:auto;}
  .stage{min-height:62vh;}
  :root{--fs-xl:20px;}
  .controls{flex-wrap:wrap; padding:8px;} #audioStatus{position:static; width:100%; text-align:center; margin-top:4px;}
  .narr{max-height:none;}
  .dots{order:5;}
}

/* short viewports (landscape phones / tiny windows): let the page scroll */
@media (max-height:600px){
  .app{height:auto; min-height:100dvh; grid-template-rows:repeat(7,auto); overflow:visible;}
  body{overflow:auto;}
  .stage{min-height:70vh;}
  .narr{max-height:none;}
  .controls{flex-wrap:wrap; padding:8px;}
}


/* language switch (EN / 繁) */
.langsw{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;margin-right:10px;}
.langsw a{padding:4px 12px;font-size:var(--fs-micro);font-weight:700;text-decoration:none;color:#e0b454;letter-spacing:.04em;line-height:1.6;transition:background .15s,color .15s;}
.langsw a:hover{background:rgba(224,180,84,.14);}
.langsw a.active{background:#e0b454;color:#05090d;cursor:default;}