/* ===================================================================
   ManasikOS — Showcase chrome
   Gallery backgrounds, page nav, device frames, swatch & spec grids.
   Used by all documentation + screen pages.
   =================================================================== */

body.doc { background: var(--green-950); color: var(--ivory-100); min-height: 100vh; }

/* ---- Top page navigation --------------------------------------- */
.pagenav { position: sticky; top: 0; z-index: 50; display:flex; align-items:center; gap:16px;
  padding: 14px 28px; background: rgba(4,42,33,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--green-800); }
.pagenav .logo { display:flex; align-items:center; gap:12px; }
.pagenav .links { display:flex; gap:6px; margin-inline-start:auto; flex-wrap:wrap; }
.pagenav .links a { padding:8px 14px; border-radius: var(--radius-pill); font-size:14px; font-weight:700; color: var(--text-on-dark-muted); }
.pagenav .links a:hover { background: rgba(255,255,255,0.06); color: var(--ivory-100); }
.pagenav .links a.is-active { background: var(--gold-500); color: var(--ink-950); }

/* ---- Logo mark -------------------------------------------------- */
.brandmark { display:block; width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden;
  border:1.5px solid var(--gold-500);
  background: var(--green-800) url("../img/logo-mark.png") center/cover no-repeat; }
.brandmark svg { display:none; } /* ponytail: legacy inline mark, superseded by the logo image */
.brandmark--lg { width:64px; height:64px; border-radius:18px; }
.wordmark { font-family: var(--font-display); font-weight:800; font-size:20px; color: var(--ivory-100); letter-spacing:-0.3px; }
.wordmark b { color: var(--gold-400); }

/* ---- Doc layout ------------------------------------------------- */
.doc-wrap { max-width: 1280px; margin: 0 auto; padding: 48px 28px 96px; }
.doc-head { margin-bottom: 40px; }
.doc-kicker { color: var(--gold-400); font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
.doc-title { font-family: var(--font-display); font-weight:900; font-size:46px; line-height:1.1; }
.doc-sub { color: var(--text-on-dark-muted); font-size:18px; max-width:680px; margin-top:14px; line-height:1.6; }

.section { margin-top: 56px; }
.section-label { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.section-label .n { width:34px; height:34px; border-radius:10px; background: var(--green-800); color: var(--gold-400);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:16px; border:1px solid var(--green-700); }
.section-label h2 { font-family: var(--font-display); font-weight:800; font-size:26px; }
.section-note { color: var(--text-on-dark-muted); font-size:15px; margin-top:-12px; margin-bottom:20px; max-width:720px; }

/* ---- Panels on dark -------------------------------------------- */
.panel { background: var(--green-900); border:1px solid var(--green-800); border-radius: var(--radius-lg); padding:28px; }
.panel--light { background: var(--ivory-100); color: var(--text-primary); border:none; }
.grid { display:grid; gap:20px; }
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} .g6{grid-template-columns:repeat(6,1fr)}
@media (max-width: 900px){ .g3,.g4,.g5,.g6{grid-template-columns:repeat(2,1fr)} }

/* ---- Color swatches -------------------------------------------- */
.swatch { border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--green-800); background: var(--green-900); }
.swatch .chip-color { height: 92px; }
.swatch .meta { padding:12px 14px; }
.swatch .meta .nm { font-weight:800; font-size:15px; }
.swatch .meta .hx { color: var(--text-on-dark-muted); font-size:13px; font-family: var(--font-latin); letter-spacing:0.5px; }

/* ---- Spec rows (type / spacing / radius) ----------------------- */
.spec { display:flex; align-items:center; gap:20px; padding:16px 0; border-bottom:1px solid var(--green-800); }
.spec:last-child { border-bottom:none; }
.spec .spec-name { width:150px; flex:none; color: var(--gold-300); font-weight:700; font-family: var(--font-latin); font-size:14px; }
.spec .spec-val  { width:130px; flex:none; color: var(--text-on-dark-muted); font-size:13px; font-family: var(--font-latin); }
.spec .spec-demo { flex:1; }
.bar { height: 16px; background: var(--gold-500); border-radius: 6px; }
.radius-demo { width: 84px; height: 64px; background: var(--green-800); border:2px solid var(--gold-500); }
.shadow-demo { width: 120px; height: 76px; background: var(--ivory-100); border-radius: var(--radius-md); }

/* ---- Device frame (mobile) ------------------------------------- */
.frame-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(393px, 393px)); gap:56px 40px; justify-content:center; }
.frame { display:flex; flex-direction:column; align-items:center; gap:16px; }
.frame-caption { text-align:center; }
.frame-caption .fc-title { font-family:var(--font-display); font-weight:800; font-size:18px; }
.frame-caption .fc-note { color: var(--text-on-dark-muted); font-size:13px; margin-top:2px; }

.phone { width: calc(var(--phone-w) + 16px); background: #0a0a0a; border-radius: 52px; padding: 8px;
  box-shadow: var(--shadow-lifted), 0 0 0 2px #1c1c1c; flex:none; }
.phone-screen { position:relative; width: var(--phone-w); height: var(--phone-h); border-radius: 44px; overflow:hidden;
  background: var(--bg-app); }
.phone-screen .scroll { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; }
.phone-screen .scroll::-webkit-scrollbar { width:0; }
.notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0a0a0a; border-radius:999px; z-index:30; }
.statusbar { display:flex; align-items:center; justify-content:space-between; padding:12px 26px 4px; font-size:13px; font-weight:700; }
.statusbar .sb-right { display:flex; gap:6px; align-items:center; }

/* screen scaffolding inside phone */
.screen { display:flex; flex-direction:column; min-height: var(--phone-h); }
.screen-pad { padding: 16px 20px; }
.screen-body { flex:1; display:flex; flex-direction:column; gap:16px; padding: 8px 20px 24px; }
.screen-dark { background: var(--bg-canvas-dark); color: var(--ivory-100); }
.screen-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }

/* ---- Dashboard frame (web) ------------------------------------- */
.dash-wrap { display:flex; justify-content:center; }
.dashframe { width: 1440px; height: 1024px; background: var(--bg-app); border-radius: 18px; overflow:hidden;
  box-shadow: var(--shadow-lifted); display:flex; flex:none; }
.dash-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.dash-topbar { display:flex; align-items:center; gap:20px; padding:20px 32px; background: var(--bg-surface); border-bottom:1px solid var(--border-subtle); }
.dash-content { flex:1; padding:32px; overflow:auto; background: var(--bg-app); }
.dash-content.pattern::before { opacity: 0.03; }

/* scale wrapper so big frames fit smaller viewports */
.scale-90 { transform: scale(0.9); transform-origin: top center; }
.scale-75 { transform: scale(0.75); transform-origin: top center; }

/* ---- Diagram / flow helpers ------------------------------------ */
.node-box { background: var(--green-900); border:1.5px solid var(--green-700); border-radius: var(--radius-lg);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.node-box .nb-ico { width:48px; height:48px; border-radius:14px; background: var(--green-800); color: var(--gold-400);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--green-700); }
.node-box.is-core { background: var(--gold-500); color: var(--ink-950); border-color: var(--gold-300); }
.node-box.is-core .nb-ico { background: rgba(11,11,11,0.12); color: var(--ink-950); border:none; }
.node-title { font-family:var(--font-display); font-weight:800; font-size:18px; }
.node-desc { font-size:13px; color: var(--text-on-dark-muted); }
.node-box.is-core .node-desc { color: rgba(11,11,11,0.7); }

.flow-step { background: var(--ivory-100); color: var(--text-primary); border-radius: var(--radius-md); padding:16px 18px;
  min-width:180px; box-shadow: var(--shadow-soft); }
.flow-step .fs-k { font-size:12px; font-weight:800; color: var(--gold-700); letter-spacing:1px; text-transform:uppercase; }
.flow-step .fs-t { font-weight:700; font-size:16px; margin-top:4px; }
.flow-arrow { display:flex; align-items:center; color: var(--gold-400); }
.flow-arrow svg { width:30px; height:30px; }
.flow-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* pitch slide frame */
.slide { width: 1280px; height: 720px; border-radius: 18px; overflow:hidden; box-shadow: var(--shadow-lifted);
  display:flex; flex-direction:column; flex:none; position:relative; }
.slide-dark { background: var(--green-950); color: var(--ivory-100); }
.slide-pad { padding: 72px; flex:1; display:flex; flex-direction:column; }

/* footer */
.doc-foot { margin-top:72px; padding-top:28px; border-top:1px solid var(--green-800); color: var(--text-on-dark-muted); font-size:14px; text-align:center; }

@media (max-width: 1480px){ .dashframe{ } }