/* ============================================================================
   MOV8mm, teaching guide shared design system
   A cinematic dark theme for the 8mm restoration walkthrough.
   Used by index.html (hub) and every guide/NN-*.html step page.
   ========================================================================== */
:root {
  --bg:      #0d0f16;
  --bg-2:    #11131c;
  --fg:      #eceef3;
  --muted:   #9aa2b1;
  --faint:   #6a7180;
  --accent:  #e0b341;   /* film gold  */
  --accent-2:#57c7c7;   /* cyan       */
  --danger:  #e0685f;   /* red/warn   */
  --good:    #7fd18a;   /* green/ok   */
  --card:    #161a24;
  --card-2:  #1b2030;
  --line:    #272c3a;
  --radius:  14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
/* subtle film-grain vignette on the page background */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(224,179,65,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(87,199,199,.05), transparent 60%);
}
.wrap { position:relative; z-index:1; max-width: 1140px; margin:0 auto; padding: 0 1.6rem; }
.narrow { max-width: 960px; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.2; }
h2 { font-size:1.7rem; margin:2.6rem 0 .8rem; }
h3 { font-size:1.2rem; margin:2rem 0 .5rem; }
p { margin:.7rem 0; }
strong { color:#fff; }
code { font-family:var(--mono); font-size:.86em; background:#0a0c12;
       padding:.12rem .4rem; border-radius:5px; color:var(--accent); }
pre { background:#0a0c12; border:1px solid var(--line); border-radius:10px;
      padding:1rem 1.1rem; overflow-x:auto; font-size:.85rem; line-height:1.55; }
pre code { background:none; padding:0; color:#cfd6e4; }
.tag { color:var(--accent); font-weight:700; }
.dim { color:var(--muted); }

/* ---- top nav bar (guide pages) ------------------------------------------ */
.topbar {
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(13,15,22,.82); border-bottom:1px solid var(--line);
}
.topbar .row { max-width:1140px; margin:0 auto; padding:.7rem 1.6rem;
  display:flex; align-items:center; gap:1rem; }
.topbar .home { font-weight:700; color:var(--fg); }
.topbar .home span { color:var(--accent); }
.topbar .spacer { flex:1; }
.topbar .step-of { color:var(--faint); font-size:.85rem; font-variant-numeric:tabular-nums; }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding: 3.2rem 0 1.2rem; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.75rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin:.4rem 0 .5rem; letter-spacing:-.01em; }
.hero .lead { color:var(--muted); font-size:1.2rem; max-width:66ch; }
.stepnum { font-variant-numeric:tabular-nums; color:var(--faint); font-weight:700; }

/* ailment / idea / technique meta line on step pages */
.meta { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 0; }
.chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:.32rem .8rem; color:var(--muted); }
.chip b { color:var(--fg); font-weight:600; }
.chip .dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); }
.chip.fix .dot { background:var(--danger); }
.chip.tool .dot { background:var(--accent-2); }
.chip.file .dot { background:var(--good); }

/* ---- visualization block (the centrepiece) ------------------------------ */
.viz { background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem;
  margin:1.8rem 0; }
.viz canvas { width:100%; display:block; border-radius:10px; background:#06070b; }
.viz .cap { color:var(--faint); font-size:.82rem; margin:.7rem .2rem 0; text-align:center; }
.controls { display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:center;
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.control { display:flex; flex-direction:column; gap:.25rem; min-width:150px; flex:1; }
.control label { font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; }
.control label b { color:var(--accent); font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; appearance:none; height:5px; border-radius:99px;
  background:#2a3040; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid #0d0f16; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border:2px solid #0d0f16;
  border-radius:50%; background:var(--accent); cursor:pointer; }
.btn { background:var(--card-2); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:.45rem .9rem; font:inherit; font-size:.85rem; cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn.on { background:var(--accent); color:#0d0f16; border-color:var(--accent); font-weight:600; }
.legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--muted); margin-top:.6rem; }
.legend i { display:inline-block; width:.85rem; height:.85rem; border-radius:3px;
  vertical-align:-2px; margin-right:.35rem; }

/* ---- callouts ------------------------------------------------------------ */
.note { border-left:3px solid var(--accent); background:var(--card);
  border-radius:0 10px 10px 0; padding:.8rem 1rem; margin:1.4rem 0; color:var(--muted); }
.note b { color:var(--fg); }
.note.warn { border-color:var(--danger); }
.note.trap { border-color:var(--accent-2); }

.dials { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:.7rem 1rem; margin:1.4rem 0; font-size:.95rem; }
.dials b { color:var(--accent); }

/* ---- pipeline relay (hub) ------------------------------------------------ */
.relay { display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch; margin:1.4rem 0; }
.stepcard { position:relative; flex:1 1 150px; min-width:150px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; color:var(--fg);
  display:block; transition:transform .12s, border-color .12s, background .12s; }
.stepcard:hover { transform:translateY(-3px); border-color:var(--accent); background:var(--card-2);
  text-decoration:none; }
.stepcard .n { font-variant-numeric:tabular-nums; color:var(--accent); font-weight:800;
  font-size:.8rem; letter-spacing:.05em; }
.stepcard .t { font-weight:700; margin:.15rem 0 .2rem; }
.stepcard .d { color:var(--muted); font-size:.82rem; line-height:1.45; }
.stepcard .arrow { position:absolute; right:-.55rem; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:1rem; z-index:2; }

/* generic card grid (patient, big ideas) */
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:1.4rem 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem; }
.card h3 { margin:.1rem 0 .4rem; font-size:1.02rem; }
.card p { margin:0; color:var(--muted); font-size:.92rem; }
.card .ic { font-size:1.4rem; }

/* ---- results videos (preserved from original hub) ----------------------- */
.videos { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:1.2rem; }
.video h3 { margin:0 0 .5rem; font-size:1.05rem; }
.video .frame { position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#000; }
.video .frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- prev / next --------------------------------------------------------- */
.pager { display:flex; gap:1rem; margin:3rem 0 4rem; }
.pager a { flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.2rem; color:var(--fg); }
.pager a:hover { border-color:var(--accent); text-decoration:none; }
.pager .k { color:var(--faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.pager .v { font-weight:700; }
.pager a.next { text-align:right; }
.pager a.disabled { opacity:.35; pointer-events:none; }

footer { border-top:1px solid var(--line); margin-top:2rem; padding:2rem 0 3rem;
  color:var(--faint); font-size:.85rem; }
@media (max-width:640px){ body{font-size:16px;} .relay .arrow{display:none;} }