/* Sailient pilot surfaces — shared design-system layer.
 *
 * Additive to assets/site-chrome.css, never a replacement: the colour and type
 * tokens come from .s-dark there.
 *
 * The organising idea is that typography carries the hierarchy and the page
 * breathes, rather than every group of facts being put in its own box. A rule
 * of thumb that shaped most of what follows: a border has to earn its place.
 * Where a heading and some space can separate two things, they do it instead. */

:root{
  /* Spacing runs on a wide scale on purpose -- the jumps between section-level
     values are what produce the vertical rhythm. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:40px; --s7:64px; --s8:96px; --s9:128px;
  --r1:3px; --r2:6px; --r3:12px;
  /* Two weights of hairline. Anything heavier reads as a dashboard. */
  --rule:rgba(255,255,255,.09);
  --rule-2:rgba(255,255,255,.16);
  --dim:#8c8c8c; --dimmer:#6a6a6a;
  --dur-1:140ms; --dur-2:260ms; --dur-3:420ms; --ease:cubic-bezier(.2,.6,.2,1);
  /* Semantic only. The accent for everything else stays white. */
  --ok:#7fb069; --warn:#d6a24a; --crit:#c9524b; --info:#6f92b8;
  --measure:64ch;
}

body.pilot{ background:#000; color:#fff }

/* site-chrome.css styles the bare <header> element as the site's fixed nav bar
   (position:fixed; top:0; left:0). A <header> used semantically inside a pilot
   page would inherit that and land in the viewport corner over the content.
   Reset positioning only; spacing and rules stay with the classes. */
/* Reset every property that rule sets, not just the positioning: its
   border-bottom was drawing a stray hairline under each pilot page heading. */
.pilot-page header{ position:static; inset:auto; z-index:auto;
  background:transparent; border-bottom:0 }

/* ---------- Top bar --------------------------------------------------------
 * One line, three zones, no chrome. It names where you are and gets out of the
 * way; everything else is contextual and lives below it. */
.top{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s6); height:56px; background:rgba(0,0,0,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule) }
.top-id{ display:flex; align-items:baseline; gap:10px; white-space:nowrap }
/* Padded so the hit area clears the 44px guidance; the bar is 56px tall, so the
   padding costs no layout and the link stops being a 17px-high target. */
.top-id a{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dimmer); padding:14px 2px; margin:-14px 0 }
.top-id a:hover{ color:#fff }
.top-id span{ color:var(--dimmer); font-size:11px }
.top-id strong{ font-family:var(--f-head); font-size:14.5px; letter-spacing:-.01em; font-weight:700 }
.top-sp{ flex:1 }
.top-meta{ display:flex; align-items:center; gap:var(--s5); font-size:12.5px; color:var(--dim); white-space:nowrap }
.top-meta .env{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--rule-2); border-radius:99px; padding:4px 11px; color:var(--dim) }
.top-meta .who{ width:26px; height:26px; border-radius:50%; border:1px solid var(--rule-2);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:10px; color:var(--dim) }

/* ---------- Pilot disclosure — honest, but not shouting -------------------- */
.pilot-chip{ border-bottom:1px solid var(--rule); background:#050505 }
.pilot-chip details{ max-width:1240px; margin:0 auto; padding:0 var(--s6) }
.pilot-chip summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:9px 0; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer) }
.pilot-chip summary::-webkit-details-marker{ display:none }
.pilot-chip summary b{ color:#cfcfcf; font-weight:500 }
.pilot-chip summary .sep{ color:#333 }
.pilot-chip summary .more{ letter-spacing:.06em; text-transform:none; font-family:var(--f-body);
  font-size:11.5px; color:var(--dimmer); text-decoration:underline; text-underline-offset:3px }
.pilot-chip summary:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.pilot-chip .body{ padding:0 0 var(--s5); max-width:var(--measure); font-size:13px; color:var(--dim); line-height:1.65 }
.pilot-chip[open] summary .more::after{ content:"" }

/* ---------- Contextual navigation — a light row, not a rail ---------------- */
.ctx{ border-bottom:1px solid var(--rule); position:sticky; top:56px; z-index:55;
  background:rgba(0,0,0,.86); backdrop-filter:blur(14px) }
.ctx-in{ max-width:1240px; margin:0 auto; padding:0 var(--s6); display:flex; gap:var(--s6); overflow-x:auto }
.ctx button{ appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:13px 0; color:var(--dimmer); font-family:var(--f-body); font-size:13.5px;
  border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease) }
.ctx button:hover{ color:#fff }
.ctx button[aria-current="true"]{ color:#fff; border-bottom-color:#fff }
.ctx button:focus-visible{ outline:2px solid #fff; outline-offset:-3px }

/* ---------- Page canvas ----------------------------------------------------- */
.canvas{ max-width:1240px; margin:0 auto; padding:var(--s8) var(--s6) var(--s9); min-width:0 }
/* Switching a view moves focus to the new heading so screen-reader and keyboard
   users land where sighted users are already looking. The heading is an announce
   target, not a control, so it must not then draw a focus ring -- the same
   treatment site-chrome.css already gives main#main for the skip link. */
[data-view-id] h1[tabindex="-1"]:focus{ outline:none }
.view{ scroll-margin-top:120px }
.narrow{ max-width:var(--measure) }

/* Editorial opening. The number is the point of the screen, not a card. */
.lede{ margin-bottom:var(--s7) }
.lede .eyebrow{ display:block; margin-bottom:var(--s5) }
.lede h1{ font-family:var(--f-head); font-weight:700; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(34px,5vw,58px); max-width:18ch }
.lede p{ margin-top:var(--s5); font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--dim); max-width:52ch }
.lede .acts{ margin-top:var(--s6); display:flex; gap:var(--s3); flex-wrap:wrap }

/* Section: an eyebrow, a rule, and air. No box. */
.sec{ padding-top:var(--s6); margin-top:var(--s6); border-top:1px solid var(--rule) }
.sec:first-of-type{ border-top:0; margin-top:0 }
.sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5);
  flex-wrap:wrap; margin-bottom:var(--s6) }
.sec-h h2{ font-family:var(--f-head); font-size:19px; font-weight:600; letter-spacing:-.015em }
/* Named sec-note, not note: site-chrome.css defines .note as a bordered callout
   (border-left 3px, padding 16px 20px) and it would box this label. Likewise
   .stat-sub rather than .sub, which site-chrome.css uses in five rules. */
.sec-h .sec-note{ font-size:12.5px; color:var(--dimmer) }
.sec > p.intro{ margin:calc(var(--s6) * -1 + 4px) 0 var(--s6); font-size:14.5px; color:var(--dim);
  max-width:var(--measure); line-height:1.6 }

/* ---------- Inline statistics — a row of facts, not four boxes ------------- */
.stats{ display:flex; flex-wrap:wrap; gap:var(--s7) var(--s8); margin:0 }
.stats > div{ min-width:0 }
.stats dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer) }
.stats dd{ font-family:var(--f-head); font-size:clamp(26px,3vw,36px); letter-spacing:-.035em;
  margin-top:12px; font-variant-numeric:tabular-nums; line-height:1 }
.stats .stat-sub{ display:block; margin-top:10px; font-size:12.5px; color:var(--dimmer) }

/* ---------- Data list — rows with air, replaces most tables ---------------- */
.dl{ border-top:1px solid var(--rule) }
.dl-row{ display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s5); align-items:baseline;
  padding:var(--s5) 0; border-bottom:1px solid var(--rule) }
.dl-row .k{ font-size:14.5px; color:#fff; min-width:0 }
.dl-row .m{ font-size:12.5px; color:var(--dimmer); margin-top:6px; line-height:1.55 }
.dl-row .v{ font-size:13px; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
a.dl-row{ text-decoration:none; transition:background var(--dur-1) var(--ease) }
a.dl-row:hover{ background:rgba(255,255,255,.03) }
a.dl-row:focus-visible{ outline:2px solid #fff; outline-offset:-2px }

/* ---------- Disclosure ------------------------------------------------------ */
.disc{ border-bottom:1px solid var(--rule) }
.disc summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:var(--s4);
  padding:var(--s5) 0; font-size:14.5px; color:#fff }
.disc summary::-webkit-details-marker{ display:none }
.disc summary:focus-visible{ outline:2px solid #fff; outline-offset:-2px }
.disc summary .chev{ margin-left:auto; color:var(--dimmer); font-family:var(--f-mono); font-size:11px;
  transition:transform var(--dur-2) var(--ease) }
.disc[open] summary .chev{ transform:rotate(90deg) }
.disc .inner{ padding:0 0 var(--s6); max-width:var(--measure); font-size:13.5px; color:var(--dim); line-height:1.65 }

/* ---------- Status ---------------------------------------------------------- */
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; flex:none; background:var(--dim) }
.dot.ok{ background:var(--ok) } .dot.warn{ background:var(--warn) }
.dot.crit{ background:var(--crit) } .dot.info{ background:var(--info) }
.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); white-space:nowrap }
.tag.ok{ color:var(--ok) } .tag.warn{ color:var(--warn) }
.tag.crit{ color:var(--crit) } .tag.info{ color:var(--info) }

/* ---------- Controls -------------------------------------------------------- */
.b{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:var(--r2); border:1px solid var(--rule-2); background:transparent;
  color:#fff; font-family:var(--f-body); font-size:14px; font-weight:500;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease) }
.b:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3) }
.b:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.b.solid{ background:#fff; color:#000; border-color:#fff }
.b.solid:hover{ background:#e8e8e8 }
.b.sm{ padding:8px 15px; font-size:13px }

.f{ margin-bottom:var(--s5) }
.f label{ display:block; font-size:12.5px; color:var(--dim); margin-bottom:9px }
.f input{ appearance:none; width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule-2);
  color:#fff; font-family:var(--f-body); font-size:16px; padding:9px 0;
  transition:border-color var(--dur-1) var(--ease) }
.f input:hover{ border-bottom-color:rgba(255,255,255,.3) }
.f input:focus{ outline:none; border-bottom-color:#fff }
.f .hint{ display:block; margin-top:9px; font-size:12px; color:var(--dimmer) }

/* ---------- Conversation ---------------------------------------------------- */
.conv{ max-width:74ch }
.turn{ padding:var(--s6) 0; border-bottom:1px solid var(--rule) }
.turn .who{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dimmer); margin-bottom:var(--s4); display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap }
.turn .msg{ font-size:15.5px; line-height:1.7; color:#e4e4e4 }
.turn.you .msg{ color:#fff }
.cites{ margin-top:var(--s5); display:flex; gap:var(--s4); flex-wrap:wrap }
.cite{ font-family:var(--f-mono); font-size:11px; color:var(--dimmer); border-bottom:1px solid var(--rule-2); padding-bottom:3px }
.composer{ margin-top:var(--s6); border:1px solid var(--rule-2); border-radius:var(--r3); padding:var(--s5) }
.composer .ta{ min-height:76px; color:var(--dimmer); font-size:15px; line-height:1.6 }
.composer .bar{ display:flex; align-items:center; gap:var(--s4); margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--rule); flex-wrap:wrap }
.composer .bar .sp{ flex:1 }

/* ---------- Vertical flow / timeline ---------------------------------------- */
.vflow{ position:relative; padding-left:var(--s6) }
.vflow::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--rule-2) }
.vstep{ position:relative; padding:0 0 var(--s6) }
.vstep:last-child{ padding-bottom:0 }
.vstep::before{ content:""; position:absolute; left:calc(var(--s6) * -1 + 2px); top:6px;
  width:7px; height:7px; border-radius:50%; background:#0a0a0a; border:1px solid var(--rule-2) }
.vstep.hl::before{ background:#fff; border-color:#fff }
.vstep .t{ font-size:14.5px; color:#fff }
.vstep .d{ font-size:13px; color:var(--dim); margin-top:7px; max-width:var(--measure); line-height:1.6 }
.vstep .w{ font-family:var(--f-mono); font-size:10.5px; color:var(--dimmer); letter-spacing:.14em; margin-bottom:7px }

/* ---------- Understated chart ----------------------------------------------- */
.chart{ margin-top:var(--s5) }
.chart .cap{ font-size:12.5px; color:var(--dimmer); margin-top:var(--s4); max-width:var(--measure); line-height:1.6 }

/* ---------- Reveal ---------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(12px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease) }
.rv.in{ opacity:1; transform:none }

/* ---------- Responsive ------------------------------------------------------ */
/* Narrow screens: the disclosure summary has to stay one tidy line. "No backend"
   is dropped from the chip because the expanded text says it in full anyway --
   the claim is not weakened, only the duplicate label is. */
@media (max-width:620px){
  .pilot-chip summary{ gap:7px; font-size:9.5px; letter-spacing:.14em }
  .pilot-chip summary .drop{ display:none }
  .pilot-chip summary .more{ margin-left:auto; white-space:nowrap }
}

@media (max-width:900px){
  .top{ padding:0 var(--s5); height:52px; gap:var(--s4) }
  .top-meta .env{ display:none }
  .ctx{ top:52px } .ctx-in{ padding:0 var(--s5); gap:var(--s5) }
  .pilot-chip details{ padding:0 var(--s5) }
  .canvas{ padding:var(--s7) var(--s5) var(--s8) }
  .stats{ gap:var(--s6) var(--s7) }
  /* Rows stack rather than squeeze: the value moves under the label instead of
     fighting it for a shrinking column. */
  .dl-row{ grid-template-columns:1fr }
  .dl-row .v{ text-align:left }
  .vflow{ padding-left:var(--s5) }
  .vstep::before{ left:calc(var(--s5) * -1 + 2px) }
}
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  .disc[open] summary .chev{ transition:none }
  html{ scroll-behavior:auto }
}