/* ============================================================
   base.css — reset, typography, app shell, ambient background
   PERF CONTRACT (do not break):
     • backdrop-filter appears on EXACTLY two persistent surfaces
       (.rail, .topbar) which never overlap each other, plus
       overlays (.sheet) which are alone on screen when open.
       Panels and cards are translucent but NEVER blurred.
     • Only transform/opacity/fill are ever animated.
     • ZERO persistent infinite animations — the sunset/moonrise is
       one-shot, fired by a [data-theme] change.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-soft); color:var(--ink); }

/* thin scrollbars, themed */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* The lit backdrop lives in sky.css and is injected by js/sky.js.
   Nothing ambient is animated forever any more — the only motion is
   the one-shot sunset/moonrise when the theme changes. */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- app shell ---------- */
.app{ position:relative; z-index:1; display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; }

.rail{
  position:sticky; top:0; align-self:start;
  height:100vh; display:flex; flex-direction:column;
  /* bottom padding clears the fixed presenter handle (bottom:14px, ~30px
     tall) — .nav is flex:1 and pushes .railfoot flush to this edge, so
     without the room the footer note sits directly under the handle */
  padding:20px 14px 62px;
  background:var(--panel-2);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);   /* blur layer #1 */
  border-right:1px solid var(--line-2);
}

.shellmain{ min-width:0; display:flex; flex-direction:column; }

.topbar{
  position:sticky; top:0; z-index:40;
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 26px;
  background:var(--panel-2);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);   /* blur layer #2 */
  border-bottom:1px solid var(--line-2);
}

.canvas{ padding:26px 26px 90px; max-width:var(--maxw); width:100%; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; }
.display{ font-family:var(--font-display); font-weight:500; letter-spacing:.002em; line-height:1.12; }
h1.display{ font-size:40px; }
h2.display{ font-size:27px; }
h3.display{ font-size:20px; }

.eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3);
}
.lede{ color:var(--ink-2); font-size:14.5px; max-width:74ch; }
.muted{ color:var(--ink-2); }
.dim{ color:var(--ink-3); }
.mono{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:-.01em; }
.num{ font-variant-numeric:tabular-nums; }
.tiny{ font-size:11.5px; }
.sm{ font-size:12.5px; }
.strong{ font-weight:650; }

/* ---------- layout primitives ---------- */
.row{ display:flex; align-items:center; gap:10px; }
.row-t{ display:flex; align-items:flex-start; gap:10px; }
.wrap{ flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.col{ display:flex; flex-direction:column; }
.spacer{ flex:1 1 auto; }
.stack > * + *{ margin-top:var(--gap); }
.stack-s > * + *{ margin-top:10px; }
.stack-xs > * + *{ margin-top:6px; }

.grid{ display:grid; gap:var(--gap); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-side{ grid-template-columns:minmax(0,1fr) 352px; align-items:start; }

/* The side column sticks. Without this, a panel 160px tall sitting beside a
   main column 600px tall leaves 440px of nothing — all of the scrolling,
   none of the information — and the side panel scrolls out of reach exactly
   when the reader gets to the part it was explaining. */
.app .g-side > :last-child{ position:sticky; top:76px; }
.portal .g-side > :last-child{ position:sticky; top:26px; }
@media (max-width:1180px){
  .app .g-side > :last-child, .portal .g-side > :last-child{ position:static; }
}

.divider{ height:1px; background:var(--line-2); border:0; margin:0; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }

/* anchor offset so #hash targets clear the sticky topbar */
[id]{ scroll-margin-top:calc(var(--topbar-h) + 18px); }

.hidden{ display:none !important; }

@media (max-width:1180px){
  .g-side,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  :root{ --rail-w:66px; }
  .rail .railtext{ display:none; }
  .g2,.g3,.g4,.g-side{ grid-template-columns:minmax(0,1fr); }
  .canvas{ padding:18px 16px 70px; }
}


/* ---------- rail foot note ----------
   The sidebar used to end with a link into the other portal and a demo
   launcher. What belongs at the bottom of a lending desk is the promise
   the desk is being measured against. */
.railnote{
  padding:11px 12px; margin-top:8px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--panel-3);
}
.railnote .rnk{ font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.railnote .rnv{ font-size:11.5px; font-weight:650; margin-top:3px; line-height:1.4; }