/* VHX · Layouts library foundation
   Shared scaffolding for every page in /layouts/.
   Imports type, declares neutral theme, adds print rules and primitives.
*/
@import url('/assets/type.css');

:root{
  --paper:#fafaf7; --ink:#0a0a0a;
  --rule:#0a0a0a; --hair:rgba(10,10,10,0.16);
  --dim:#6b6b6b; --tint:#f0eee8;
  --accent:#d83a00;     /* phosphor in ink-on-paper context */
  --signal:#0033cc;
  --paper-2:#f4f1ea;
  --f:'JB', ui-monospace, Menlo, Consolas, monospace;
  --gut:24px; --pad:28px; --hair-w:1px;
}

:root[data-mode="dark"]{
  --paper:#0a0a0a; --ink:#f2f2ef;
  --rule:#f2f2ef; --hair:rgba(242,242,239,0.18);
  --dim:#8a8a85; --tint:#161614;
  --accent:#32ffa0; --signal:#ff5d62;
  --paper-2:#141412;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-weight:400;font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-feature-settings:"calt" off;font-variant-ligatures:none;
}
::selection{background:var(--accent);color:var(--paper);}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
hr{border:0;border-top:var(--hair-w) solid var(--rule);margin:0}
.dim{color:var(--dim)}
.accent{color:var(--accent)}
.signal{color:var(--signal)}
.mono{font-family:var(--f)}
.up{text-transform:uppercase;letter-spacing:0.14em}
.tn{font-variant-numeric:tabular-nums}

/* ───── SHEET ───── */
.sheet{max-width:1440px;margin:0 auto;border-left:var(--hair-w) solid var(--rule);border-right:var(--hair-w) solid var(--rule);background:var(--paper)}

/* ───── TOPBAR (shared chrome) ───── */
.bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:14px var(--pad);border-bottom:var(--hair-w) solid var(--rule);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.bar a.crumb{color:var(--dim)}
.bar a.crumb{color:var(--dim);white-space:nowrap}
.bar a.crumb.now{color:var(--ink)}
.bar nav{display:flex;gap:18px;justify-self:end;flex-wrap:nowrap;min-width:0}
.bar nav a{white-space:nowrap}
.bar .bar-r{display:flex;align-items:center;gap:14px;white-space:nowrap;justify-self:end}
.bar .bar-r .dim{color:var(--dim);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* Topbar children — keep crumb/brand text on one line per topbar.
   Each topbar has its own structural CSS; this only handles the simple
   single-text-node case via white-space:nowrap. Pages that have flex
   children in their first column (mkt-bar, etc.) bring their own rules. */
.bar > a.crumb,
.bar > a,
.mob-bar > div,
.art-bar > div,
.os-bar > div:first-child,
.inv-bar > div:first-child,
.dp-bar > div:first-child,
.nl-bar > div:first-child,
.cs-bar > div:first-child,
.doc-bar > a,
.doc-bar > span,
.doc-bar > div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.deck-bar > div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.deck-bar > div:nth-child(2){
  text-overflow:ellipsis;
  font-size:9px;
}

/* ───── COMMON PRIMITIVES ───── */
.rule{border-top:var(--hair-w) solid var(--rule)}
.hair{border-top:var(--hair-w) solid var(--hair)}
.k{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim)}
.lbl{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);
  border-bottom:var(--hair-w) solid var(--hair);padding-bottom:6px;margin-bottom:14px}
.num{font-variant-numeric:tabular-nums}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border:var(--hair-w) solid var(--rule);
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
}
.pill.live{color:var(--accent);border-color:var(--accent)}
.pill.live::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ───── FIGURE ───── */
.figure{border:var(--hair-w) solid var(--rule);background:var(--tint);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--dim);letter-spacing:0.14em;text-transform:uppercase}

/* ───── FOOTER ───── */
.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:18px var(--pad);border-top:var(--hair-w) solid var(--rule);
  font-size:11px;color:var(--dim);letter-spacing:0.14em;text-transform:uppercase;
}

/* ───── PAGE / PRINT ───── */
@media print{
  @page{margin:18mm 16mm;size:Letter}
  body{background:#fff;color:#000;font-size:10pt;line-height:1.45}
  .sheet{max-width:none;border:0}
  .no-print, nav, .bar nav, .pill.live{display:none !important}
  .page-break{break-after:page;page-break-after:always}
  .keep{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
  table,figure,pre{break-inside:avoid;page-break-inside:avoid}
  a{color:#000;text-decoration:none}
  .ink-paper{--paper:#fff;--ink:#000;--rule:#000;--hair:rgba(0,0,0,0.16);--dim:#555;--tint:#f4f1ea;--accent:#cc3300;--signal:#0033cc}
}

/* Page-shaped on screen (for documents/decks) */
.paper-letter{
  width:8.5in;min-height:11in;
  margin:24px auto;background:var(--paper);
  border:var(--hair-w) solid var(--rule);
  padding:0.9in 0.85in;
  box-shadow:0 1px 0 var(--hair), 0 18px 60px -30px rgba(0,0,0,0.18);
}
.paper-a4{width:210mm;min-height:297mm;margin:24px auto;background:var(--paper);
  border:var(--hair-w) solid var(--rule);padding:22mm 18mm;
  box-shadow:0 1px 0 var(--hair), 0 18px 60px -30px rgba(0,0,0,0.18);}
.slide-16x9{
  width:13.33in;height:7.5in;margin:24px auto;background:var(--paper);
  border:var(--hair-w) solid var(--rule);
  padding:0.6in 0.7in;overflow:hidden;position:relative;
  box-shadow:0 1px 0 var(--hair), 0 18px 60px -30px rgba(0,0,0,0.18);
}
@media print{
  .paper-letter,.paper-a4{margin:0;border:0;box-shadow:none;padding:0}
  .slide-16x9{
    width:100%;height:auto;min-height:0;
    border:0;box-shadow:none;margin:0;padding:0;
    break-after:page;page-break-after:always;
  }
  .slide-16x9:last-of-type{break-after:auto;page-break-after:auto}
}

/* ───── HALFTONE / FIELD PATTERNS for editorial backgrounds ───── */
.halftone{
  background-image:radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size:6px 6px;
}
.halftone.lg{background-size:10px 10px}
.halftone.xl{background-size:18px 18px}
.scan{background-image:repeating-linear-gradient(0deg,var(--hair) 0 1px,transparent 1px 4px)}
.grid-bg{background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:24px 24px}

/* ───── CHIP / TAG ───── */
.tag{display:inline-block;padding:3px 8px;border:var(--hair-w) solid var(--rule);
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase}

/* ───── DISPLAY TYPE (for editorial / marketing) ───── */
.display{font-weight:800;letter-spacing:-0.04em;line-height:0.9}
.giant{font-size:clamp(60px,12vw,200px);font-weight:800;letter-spacing:-0.055em;line-height:0.88}
.hairline{font-weight:200;letter-spacing:-0.02em}
.ultra{font-weight:900;letter-spacing:-0.055em}

/* small utility */
.row{display:flex;gap:12px;align-items:center}
.col{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.between{justify-content:space-between}
.center{align-items:center}
.right{text-align:right}