/* Forge screen guide — detail-page components only.
   The shared shell (../site.css + ../interactive.css + nav.js) owns the topbar, sidebar,
   layout and design tokens; this styles just the screen-detail content that lives inside
   main#content. Accents use the wiki's shared palette (violet/cyan). */
.kicker{color:var(--cyan);letter-spacing:.15em;font-weight:800;font-size:12px;text-transform:uppercase}
.back{display:inline-block;margin-bottom:14px;color:var(--muted);text-decoration:none}
.back:hover{color:#fff}
.content>p{font-size:18px;color:#bac4d4;max-width:840px}
.screen{margin:30px 0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#05070b}
.screen img{display:block;width:100%;max-height:720px;object-fit:contain}
.caption{padding:12px 16px;color:var(--muted);border-top:1px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.detail-grid article,.note{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:18px}
.detail-grid h3{margin:0 0 7px}.detail-grid p,.detail-grid li{color:var(--muted)}
.note{border-left:3px solid var(--violet);margin:22px 0}
@media(max-width:800px){.detail-grid{grid-template-columns:1fr}}
/* Prev/Next walker across the screen guide */
.screen-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.screen-nav a{color:var(--muted);text-decoration:none;font-size:13.5px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);transition:border-color .16s ease,color .16s ease}
.screen-nav a:hover{color:#fff;border-color:var(--violet)}
.screen-nav .sn-idx{border:none;background:none;font-size:12.5px;color:var(--muted)}
@media(max-width:800px){.screen-nav .sn-idx{display:none}}