/* JBNX Studio Model m/002 — Capture OS (Navy & Gold). Token values from
   static/design/m/002/tokens.json. Scoped to .m002-page; m/001 styles untouched. */
.m002-page { --m002-canvas:#070B19; --m002-surface:#0F172A; --m002-border:rgba(212,175,55,.28);
  --m002-gold:#D4AF37; --m002-champagne:#F3E5AB; --m002-text:#F8FAFC; --m002-muted:#94A3B8;
  --m002-sans:"Inter","Geist",sans-serif; --m002-mono:"JetBrains Mono",monospace;
  background:var(--m002-canvas); color:var(--m002-text); font-family:var(--m002-sans); }
.m002-page .ds-top, .m002-page .ds-footer { background:var(--m002-canvas); }
.m002-split { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px; align-items:start; }
@media (max-width:900px){ .m002-split{ grid-template-columns:1fr; } }
.m002-viewport { background:var(--m002-surface); border:1px solid var(--m002-border); border-radius:10px; padding:16px; }
.m002-frame { margin:0 auto; background:#000; border:1px solid var(--m002-border); border-radius:8px; overflow:hidden; }
.m002-frame[data-aspect="16:9"]{ aspect-ratio:16/9; width:100%; }
.m002-frame[data-aspect="9:16"]{ aspect-ratio:9/16; width:min(100%,340px); }
.m002-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.m002-frame-note { color:var(--m002-muted); font-size:13px; margin:12px 0 0; }
.m002-frame-note code { font-family:var(--m002-mono); color:var(--m002-champagne); }
.m002-toggle { display:grid; gap:8px; margin:16px 0 0; }
.m002-toggle-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.m002-toggle-label { font:600 11px var(--m002-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m002-muted); width:52px; }
.m002-chip, .m002-tab, .m002-copy { background:transparent; color:var(--m002-text); border:1px solid var(--m002-border);
  border-radius:999px; padding:8px 14px; font:600 13px var(--m002-sans); cursor:pointer; min-height:40px; }
.m002-chip.is-active, .m002-tab.is-active { background:var(--m002-gold); border-color:var(--m002-gold); color:#070B19; }
.m002-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.m002-tab strong { font-family:var(--m002-mono); font-weight:600; }
.m002-card { background:var(--m002-surface); border:1px solid var(--m002-border); border-radius:10px; margin:0 0 14px; }
.m002-card summary { display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer;
  padding:12px 16px; font-weight:600; list-style:none; }
.m002-copy { min-height:34px; padding:4px 12px; font-size:12px; color:var(--m002-champagne); }
.m002-spec { margin:0; padding:0 16px 16px; overflow:auto; font:12px/1.55 var(--m002-mono); color:var(--m002-text); white-space:pre-wrap; word-break:break-word; }
.m002-eyebrow { color:var(--m002-gold); font:600 12px var(--m002-mono); letter-spacing:.14em; text-transform:uppercase; }
.m002-status { color:var(--m002-champagne); font:600 12px var(--m002-mono); letter-spacing:.08em; }
.m002-muted { color:var(--m002-muted); }
.m002-watermark { position:fixed; left:14px; bottom:12px; z-index:50; color:var(--m002-muted);
  font:12px var(--m002-sans); background:rgba(7,11,25,.82); padding:4px 8px; border-radius:6px; }
.m002-refs { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:14px; }
.m002-refs li { display:flex; gap:12px; align-items:flex-start; }
.m002-refs li > a { flex:0 0 112px; }
body.ds .m002-refs img { display:block; width:112px; height:112px; max-width:none; object-fit:cover; object-position:center 30%; border:1px solid var(--m002-border); border-radius:8px; }
.m002-refs p { margin:0; font-size:13px; }
.m002-refs code { font-family:var(--m002-mono); color:var(--m002-champagne); font-size:12px; }
/* v0.3.0: the shared model-page sections (km-*) on the Capture OS palette. */
.m002-page { --ds-bg:#070B19; --ds-surface:#0F172A; --ds-ink:#F8FAFC; --ds-muted:#94A3B8; --ds-line:rgba(212,175,55,.28);
  --ds-accent:#D4AF37; --ds-accent-ink:#070B19; --ds-soft:#111A33; --ds-focus:#F3E5AB; }
.m002-page a { color:var(--m002-champagne); }
.m002-page .ds-btn { background:var(--m002-gold); color:#070B19; border-color:var(--m002-gold); }
.m002-page .ds-btn--outline { background:transparent; color:var(--m002-champagne); border-color:var(--m002-border); }
.m002-page .km-anchor > a, .m002-page .km-body-image { background:#0B132B; border-color:var(--m002-border); }
.m002-page .km-pending { color:var(--m002-muted); }
.m002-page .ds-table th, .m002-page .ds-table td { border-color:var(--m002-border); }
.m002-page video, .m002-page audio { max-width:100%; }
.m002-page .m002-viewport-wrap { margin-top:8px; }
.m002-page .m002-review { border-left:3px solid var(--m002-gold); padding:8px 12px; background:var(--m002-surface); }