/* StarNet FIELD MANUAL — visual-first, game-guide styling.
   Rule for this area: the SCHEMATIC carries the explanation, the words are the caption.
   Belts actually march and crates actually ride, so the page demonstrates the mechanic
   instead of describing it. Everything degrades to a still frame under reduced-motion. */
@import url('../docs.css?v=20260913-brand-nav');

/* Guides and reference pages share the docs grid; diagrams adapt inside the article. */
.buildsteps > li{ grid-template-columns:minmax(0,1fr) minmax(300px,44%); }

/* ================= HERO ================= */
.fm-hero{
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  padding:18px 20px 14px; margin:0 0 32px; position:relative; overflow:hidden;
}
.fm-hero .fh-kicker{ font-size:15px; letter-spacing:3px; color:var(--amber-d); margin-bottom:2px; }
.fm-hero h1{ margin:0 0 16px; }
.fm-hero .fh-sub{ margin:0 0 14px; font-size:18px; color:rgba(236,224,207,.5); letter-spacing:.5px; }
.fm-hero svg{ display:block; width:100%; height:auto; }

/* ================= QUEST BOARD (hub) ================= */
.quest-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:16px 0 8px; }
@media (max-width:820px){ .quest-grid{ grid-template-columns:1fr; } }

.quest{
  display:block; text-decoration:none; color:inherit; position:relative;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.quest:hover{ border-color:var(--amber); box-shadow:0 0 26px rgba(255,140,30,.16); transform:translateY(-2px); }
.quest{ display:flex; flex-direction:column; }
.quest .q-thumb{
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.42);
  padding:14px 16px; height:158px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.quest .q-thumb svg{ max-height:130px; width:auto; max-width:100%; }
.quest .q-body{ padding:13px 16px 15px; flex:1; }
.quest .q-title{ font-size:22px; letter-spacing:1.5px; color:var(--amber-b); display:block; margin-bottom:5px; }
a.quest:hover .q-title{ text-shadow:0 0 12px rgba(255,157,47,.45); }
.quest .q-blurb{ font-size:16.5px; line-height:1.5; color:var(--ink-d); margin:0 0 11px; }

.q-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tag{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  padding:2px 8px; font-size:14.5px; letter-spacing:1.5px; color:var(--amber-d);
}
.tag.hot{ border-color:var(--amber-d); color:var(--amber-b); }
.pips{ letter-spacing:2px; font-size:15px; color:var(--amber); }
.pips i{ font-style:normal; color:rgba(236,224,207,.22); }

.quest.locked{ opacity:.5; }
.quest.locked .q-title{ color:var(--ink-d); }
.quest.locked .q-thumb{ filter:saturate(.25); }
.q-stamp{
  position:absolute; top:10px; right:10px; z-index:2;
  border:1px solid var(--line); background:rgba(0,0,0,.7);
  padding:2px 8px; font-size:14px; letter-spacing:2px; color:var(--ink-d);
}

/* ================= MACHINE ROSTER ================= */
.parts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
@media (max-width:900px){ .parts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .parts{ grid-template-columns:1fr; } }
.part{ border:1px solid var(--line); background:var(--panel); padding:12px 13px 13px; text-align:center; }
.part svg{ display:block; width:100%; max-width:124px; margin:0 auto 8px; height:auto; }
.part .p-name{ font-size:18px; letter-spacing:1.5px; color:var(--amber-b); }
.part .p-size{ font-size:14px; letter-spacing:1.5px; color:var(--amber-d); margin-bottom:5px; }
.part .p-role{ font-size:15.5px; line-height:1.45; color:var(--ink-d); }

/* ================= BUILD STEPS (a schematic per step) ================= */
.buildsteps{ list-style:none; padding:0; margin:20px 0; counter-reset:bstep; }
.buildsteps > li{
  counter-increment:bstep; position:relative;
  display:grid; grid-template-columns:1fr 340px;
  border:1px solid var(--line); background:var(--panel); margin-bottom:14px;
}
@media (max-width:820px){ .buildsteps > li{ grid-template-columns:1fr; } }
.buildsteps .b-text{ padding:16px 18px 18px 58px; }
.buildsteps > li::before{
  content:counter(bstep,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:40px; height:40px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:var(--amber); color:#120a02; font-size:19px; letter-spacing:1px;
}
.buildsteps .b-title{ display:block; font-size:20px; letter-spacing:1.2px; color:var(--amber-b); margin:0 0 7px; }
.buildsteps p{ margin:0 0 8px; font-size:16.5px; line-height:1.55; }
.buildsteps .b-shot{
  border-left:1px solid var(--line); background:rgba(0,0,0,.42);
  padding:14px 14px 10px; display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:820px){ .buildsteps .b-shot{ border-left:none; border-top:1px solid var(--line); } }
.buildsteps .b-shot svg{ display:block; width:100%; height:auto; }
.buildsteps .b-cap{ margin-top:7px; font-size:14.5px; letter-spacing:.5px; color:var(--amber-d); text-align:center; }

/* a keycap for tool number shortcuts */
.key{
  display:inline-block; min-width:22px; text-align:center;
  font-family:'VT323',monospace; font-size:17px; line-height:1.3;
  color:#120a02; background:var(--amber);
  border:1px solid var(--amber); border-bottom:3px solid #a35b12;
  padding:0 6px; margin:0 3px;
}

/* ================= SIDE-BY-SIDE COMPARE ================= */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
.cmp{ border:1px solid var(--line); background:rgba(0,0,0,.32); padding:14px 14px 12px; }
.cmp.good{ border-left:3px solid var(--amber); }
.cmp.bad{ border-left:3px solid rgba(236,224,207,.25); }
.cmp svg{ display:block; width:100%; height:auto; margin-bottom:9px; }
.cmp .c-verdict{ font-size:19px; letter-spacing:2px; margin-bottom:3px; }
.cmp.good .c-verdict{ color:var(--amber-b); }
.cmp.bad .c-verdict{ color:rgba(236,224,207,.42); }
.cmp p{ margin:0; font-size:16px; line-height:1.5; }

/* ================= PATTERN / RECIPE CARDS ================= */
.recipes{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0; }
@media (max-width:760px){ .recipes{ grid-template-columns:1fr; } }
.recipe{ border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; }
.recipe .r-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.3);
}
.recipe .r-name{ font-size:19px; letter-spacing:1.5px; color:var(--amber-b); }
.recipe .r-kind{ font-size:14px; letter-spacing:2px; color:var(--amber-d); white-space:nowrap; }
.recipe .r-art{
  padding:16px 14px; background:rgba(0,0,0,.42); flex:1;
  display:flex; align-items:center; justify-content:center; min-height:210px;
}
.recipe .r-art svg{ max-height:230px; width:auto; max-width:100%; }
.recipe p{ margin:0; padding:11px 14px 13px; font-size:16px; line-height:1.5; }

/* ================= FAULT CARDS ================= */
.faultgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0; }
@media (max-width:760px){ .faultgrid{ grid-template-columns:1fr; } }
.fault{
  border:1px solid var(--line); border-left:3px solid #d2452f;
  background:rgba(210,69,47,.06); padding:12px 14px;
}
.fault .f-code{ display:block; font-size:16.5px; letter-spacing:1px; color:#ff9d84; margin-bottom:5px; }
.fault .f-code::before{ content:"\2715  "; color:#d2452f; }
.fault p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink-d); }
.fault b{ color:var(--amber-b); }
.fault.blocking{ background:rgba(210,69,47,.15); }
.fault.blocking .f-code::after{
  content:"BLOCKING"; margin-left:8px; font-size:12.5px; letter-spacing:2px;
  border:1px solid #d2452f; padding:0 5px; color:#ff9d84;
}

/* ================= TIP / TRAP ================= */
.tip, .trap{
  border:1px solid var(--line); background:var(--panel);
  padding:12px 16px; margin:16px 0; font-size:16.5px; line-height:1.55; color:var(--ink-d);
}
.tip{ border-left:3px solid var(--amber); }
.trap{ border-left:3px solid #d2452f; background:rgba(210,69,47,.07); }
.tip .lbl, .trap .lbl{ display:block; font-size:14.5px; letter-spacing:2.5px; margin-bottom:4px; }
.tip .lbl{ color:var(--amber-b); }
.trap .lbl{ color:#ff8a72; }

/* ================= SECTION HEADER ================= */
.docs-main h2{ display:flex; align-items:center; gap:12px; }
.docs-main h2 .h-num{
  font-size:15px; letter-spacing:2px; color:#120a02; background:var(--amber-d); padding:1px 7px;
}

/* ================= collapsible Q&A ================= */
.qa{ border:1px solid var(--line); margin:10px 0; background:var(--panel); }
.qa > summary{ cursor:pointer; padding:10px 16px; list-style:none; font-size:18px; letter-spacing:1px; color:var(--amber-b); }
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary::before{ content:"+ "; color:var(--amber-d); }
.qa[open] > summary::before{ content:"\2013 "; }
.qa > summary:hover{ background:rgba(255,157,47,.06); }
.qa .qa-body{ padding:0 16px 12px; border-top:1px solid var(--line); }
.qa .qa-body p{ margin:10px 0 0; font-size:16px; line-height:1.55; }

/* ================= SCHEMATIC PARTS ================= */
.d-machine{ fill:rgba(255,157,47,.07); stroke:var(--amber-d); stroke-width:1.5; }
.d-machine.d-lit{ fill:rgba(255,157,47,.2); stroke:var(--amber); }
.d-belt{ fill:rgba(0,0,0,.55); }
.d-inner{ fill:rgba(0,0,0,.55); }
.d-plate{ fill:rgba(255,157,47,.3); }
.d-chute{ fill:rgba(0,0,0,.8); stroke:rgba(255,157,47,.3); stroke-width:1; }
.d-rail line{ stroke:var(--amber-d); stroke-width:1.5; }
.d-chev polyline, .d-chev line{ fill:none; stroke:var(--amber); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.d-led{ fill:var(--amber); }
.d-crate{ fill:#8a5a25; stroke:#d99a3e; stroke-width:1.2; }
.d-crate-top{ fill:#d99a3e; }
.d-shadow{ fill:rgba(0,0,0,.6); }
.d-label text{ fill:var(--amber-b); font-family:'VT323',monospace; font-size:15px; letter-spacing:1.5px; }
.d-label.d-bad text{ fill:rgba(236,224,207,.4); }
.d-sub text{ fill:var(--ink-d); font-family:'VT323',monospace; font-size:14px; letter-spacing:.5px; }
.d-note text{ fill:var(--amber-d); font-family:'VT323',monospace; font-size:13.5px; letter-spacing:.5px; }
.d-ghost{ fill:none; stroke:rgba(236,224,207,.22); stroke-width:1.5; stroke-dasharray:4 4; }
.d-ghost-text text{ fill:rgba(236,224,207,.32); font-family:'VT323',monospace; font-size:14px; letter-spacing:1.5px; }

/* --- MOTION: treads march, crates ride, the drive LED blinks --- */
@keyframes fm-march   { from { transform:translateX(0); } to { transform:translateX(30px); } }
@keyframes fm-march-s { from { transform:translateY(0); } to { transform:translateY(30px); } }
@keyframes fm-blink   { 0%,55% { opacity:1; } 56%,100% { opacity:.12; } }
@keyframes fm-ride {
  0%   { transform:translateX(0);                     opacity:0; }
  6%   { transform:translateX(20px);                  opacity:1; }
  88%  { transform:translateX(var(--ride-end,300px)); opacity:1; }
  100% { transform:translateX(var(--ride-end,300px)); opacity:0; }
}
@keyframes fm-march-w { from { transform:translateX(0); } to { transform:translateX(-30px); } }
@keyframes fm-march-n { from { transform:translateY(0); } to { transform:translateY(-30px); } }
@keyframes fm-ride-s {
  0%   { transform:translateY(0);                     opacity:0; }
  6%   { transform:translateY(20px);                  opacity:1; }
  88%  { transform:translateY(var(--ride-end,300px)); opacity:1; }
  100% { transform:translateY(var(--ride-end,300px)); opacity:0; }
}
.march   { animation:fm-march 0.9s linear infinite; }
.march-s { animation:fm-march-s 0.9s linear infinite; }
.march-w { animation:fm-march-w 0.9s linear infinite; }
.march-n { animation:fm-march-n 0.9s linear infinite; }
.ride-s  { animation:fm-ride-s 4.4s linear infinite; }
.ride-s.d2 { animation-delay:1.5s; }
/* a lane that lights only some of the time — the "this way OR that way" beat */
@keyframes fm-alt { 0%,45% { opacity:1; } 50%,95% { opacity:.18; } 100% { opacity:1; } }
.alt-a { animation:fm-alt 6s linear infinite; }
.alt-b { animation:fm-alt 6s linear infinite; animation-delay:-3s; }
/* dial pills (night shift guide) */
.d-pill{ fill:rgba(0,0,0,.5); stroke:rgba(255,157,47,.3); stroke-width:1; }
.d-pill.on{ fill:rgba(255,157,47,.22); stroke:var(--amber); }
.d-pill-t text{ fill:rgba(236,224,207,.5); font-family:'VT323',monospace; font-size:13.5px; letter-spacing:1.5px; text-anchor:middle; }
.d-pill-t.on text{ fill:var(--amber-b); }
.d-bar{ fill:rgba(0,0,0,.55); stroke:rgba(255,157,47,.3); stroke-width:1; }
.d-fill{ fill:var(--amber); }
.d-node{ fill:rgba(0,0,0,.6); stroke:var(--amber-d); stroke-width:1.5; }
.d-node.done{ fill:rgba(255,157,47,.35); stroke:var(--amber); }
.d-node.here{ fill:rgba(255,157,47,.15); stroke:var(--amber); stroke-width:2.5; }
.d-path{ fill:none; stroke:var(--amber-d); stroke-width:2; stroke-dasharray:5 5; }
.d-path.done{ stroke:var(--amber); stroke-dasharray:none; }
@keyframes fm-glow { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.glow { animation:fm-glow 1.6s ease-in-out infinite; }
.d-star{ fill:var(--amber-b); }
@keyframes fm-pop { 0%,70% { transform:translateY(0); opacity:0; } 75% { opacity:1; } 100% { transform:translateY(-26px); opacity:0; } }
.pop{ animation:fm-pop 3s ease-out infinite; }
.pop text{ fill:var(--amber-b); font-family:'VT323',monospace; font-size:16px; letter-spacing:1px; text-anchor:middle; }
.d-moon{ fill:rgba(255,157,47,.18); stroke:var(--amber-d); stroke-width:1.5; }
.d-tick{ stroke:rgba(255,157,47,.25); stroke-width:1; }
.d-beat{ fill:var(--amber); }
.d-beat.skip{ fill:none; stroke:rgba(236,224,207,.35); stroke-width:1.5; }
.d-clock text{ fill:rgba(236,224,207,.4); font-family:'VT323',monospace; font-size:12.5px; letter-spacing:1px; text-anchor:middle; }
@media (prefers-reduced-motion: reduce){ .march-w, .march-n, .ride-s, .alt-a, .alt-b, .glow, .pop{ animation:none !important; } .ride-s{ transform:translateY(var(--ride-mid,150px)); } .pop{ opacity:0; } }
.blink   { animation:fm-blink 1.1s steps(1,end) infinite; }
.ride    { animation:fm-ride 4.4s linear infinite; }
.ride.d2 { animation-delay:1.5s; }
.ride.d3 { animation-delay:3.0s; }
/* a COLD run: frozen treads, dark LED, whole group dimmed */
.cold{ opacity:.3; }
.cold .march, .cold .march-s, .cold .blink, .cold .ride{ animation:none; }
.cold .d-chev polyline{ stroke:var(--ink-d); stroke-width:1.6; }

@media (prefers-reduced-motion: reduce){
  .march, .march-s, .blink, .ride{ animation:none !important; }
  .ride{ transform:translateX(var(--ride-mid,150px)); }
  a.quest:hover{ transform:none; }
}

/* ================= PLAIN-ENGLISH LAYER =================
   The first pass opened in the product's own vocabulary. These three components carry the
   version a first-time reader needs: a one-line lede, four words defined in plain terms,
   and the reason you'd want any of this before any mechanic is explained. */
.docs-main p.lede{
  font-size:21px; line-height:1.5; color:var(--ink);
  border-left:3px solid var(--amber); padding-left:14px; margin:14px 0 16px;
}

.glossary{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
@media (max-width:820px){ .glossary{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .glossary{ grid-template-columns:1fr; } }
.gl{
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  padding:11px 13px; text-align:center;
}
.gl .gl-w{ display:block; font-size:18px; letter-spacing:2px; color:var(--amber-b); }
.gl .gl-m{ display:block; font-size:16px; line-height:1.4; color:var(--ink-d); margin-top:3px; }
.gl .gl-m::before{ content:'= '; color:var(--amber-d); }

.whys{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
@media (max-width:820px){ .whys{ grid-template-columns:1fr; } }
.why{ border:1px solid var(--line); border-top:3px solid var(--amber-d); background:var(--panel); padding:14px 16px 16px; }
.why .w-title{ font-size:19px; letter-spacing:1px; color:var(--amber-b); margin-bottom:6px; }
.why p{ margin:0; font-size:16px; line-height:1.55; }

/* a folded block of fault cards keeps its grid inside the details body */
.qa .qa-body .faultgrid{ margin:12px 0 4px; }

/* the four-beat story under "The whole idea" — one numbered sentence per beat */
.story{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
@media (max-width:900px){ .story{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .story{ grid-template-columns:1fr; } }
.st{ border:1px solid var(--line); background:var(--panel); padding:12px 13px 13px; position:relative; }
.st .st-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-bottom:8px;
  background:var(--amber); color:#120a02; font-size:16px;
}
.st p{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-d); }
.st b{ color:var(--amber-b); }

/* the phone-and-minion hero (channels guide) */
.d-phonebody{ fill:rgba(0,0,0,.5); stroke:var(--amber); stroke-width:2; }
.d-phonescreen{ fill:#0d0a06; stroke:rgba(255,157,47,.3); stroke-width:1; }
.bub-you{ fill:rgba(255,157,47,.55); }
.bub-min{ fill:rgba(255,157,47,.14); stroke:rgba(255,157,47,.35); stroke-width:1; }
.d-minion{ fill:rgba(255,157,47,.12); stroke:var(--amber); stroke-width:1.6; }
.d-eye{ fill:var(--amber-b); }
.d-signal{ fill:none; stroke:var(--amber-d); stroke-width:2; stroke-dasharray:6 6; animation:fm-sig 1.2s linear infinite; }
.d-sigarrow{ fill:var(--amber-d); }
@keyframes fm-sig { to { stroke-dashoffset:-12; } }
@media (prefers-reduced-motion: reduce){ .d-signal{ animation:none !important; } }

/* REAL PROP ART (crew guide) — PNGs rendered from the engine's own draw functions.
   Pixel art: never smooth it. */
.gearstrip{ display:flex; flex-wrap:wrap; gap:18px 26px; justify-content:center; align-items:flex-end; padding:8px 0 4px; }
.gearstrip .gs{ text-align:center; }
.gearstrip img{ image-rendering:pixelated; height:104px; width:auto; display:block; margin:0 auto 6px; filter:drop-shadow(0 0 14px rgba(255,157,47,.14)); }
.gearstrip .gs-n{ display:block; font-size:15px; letter-spacing:1.5px; color:var(--amber-b); }
.gearstrip .gs-p{ display:block; font-size:13.5px; letter-spacing:1.5px; color:var(--amber-d); }
.fm-hero .fh-cap{ margin:10px 0 2px; text-align:center; font-size:14px; letter-spacing:1px; color:rgba(236,224,207,.4); }

.gearcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
@media (max-width:900px){ .gearcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gearcards{ grid-template-columns:1fr; } }
.gc{ border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; }
.gc .gc-art{ background:rgba(0,0,0,.42); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:12px; min-height:120px; }
.gc .gc-art img{ image-rendering:pixelated; max-height:96px; width:auto; }
.gc .gc-body{ padding:10px 13px 13px; }
.gc .gc-n{ font-size:17px; letter-spacing:1.5px; color:var(--amber-b); }
.gc .gc-p{ display:block; font-size:14px; letter-spacing:1.5px; color:var(--amber-d); margin:1px 0 6px; }
.gc p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink-d); }

/* Guides share the station glass; schematic labels retain their authored scale. */
.fm-hero{border-radius:12px;padding:24px;background:var(--menu-glass);box-shadow:var(--glass-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fm-hero .fh-kicker{font:16px/1.4 'VT323',monospace;letter-spacing:1px;color:var(--amber);margin-bottom:14px}
.fm-hero .fh-sub{font:20px/1.5 'VT323',monospace;letter-spacing:0;color:var(--ink-d)}
.fm-hero .fh-cap{font:17px/1.5 'VT323',monospace;letter-spacing:0;color:var(--amber-d)}
.buildsteps>li{gap:22px}.buildsteps p,.buildsteps li,.gc p{font-size:20px;line-height:1.55}
.gc{border-radius:12px;background:var(--menu-glass);box-shadow:var(--glass-rim);overflow:hidden}
.gc .gc-n{font-size:24px;font-weight:400;letter-spacing:.4px}.gc .gc-p{font:16px/1.5 'VT323',monospace}
.docs-overview .docs-shell{max-width:1380px}
.fm-hero .d-label text{font-size:13px;letter-spacing:.5px}
@media(max-width:1000px){.buildsteps>li{grid-template-columns:minmax(0,1fr)}}