/* DRAFT E — THE KNEEBOARD.
   Chart-paper ground, cool neutrals, one accent (chart blue). The signature
   objects are three real instrument faces reading real page state, and a
   checklist that ticks itself off as you scroll. Glass appears only where it
   has something genuine to refract: the sticky brief card with the checklist
   running past it, the inspector floating over the logbook, the fixed clip
   readout, and the sign-off card laid on the paper. */

:root{
  --paper:#EFEEE9;
  --card:#FBFBF8;
  --ink:#191C1F; --ink2:#4C535A; --ink3:#848C94;
  --rule:#D6D4CB;

  --acc:#14508C; --acc-d:#0E3A66; --acc-cast:rgba(20,80,140,.55);
  --wash:rgba(25,28,31,.06);

  --glass-line:#C6C9C4;
  --glass-under:rgba(45,60,75,.20);
  --glass-pool:rgba(45,60,75,.26);
  --glass-cast1:rgba(30,45,60,.07);
  --glass-cast2:rgba(30,45,60,.44);

  /* the instrument panel is the one dark object */
  --panel:#171A1E; --panel2:#20252B; --panel-ink:#E7E9E6; --panel-dim:#79828B;
  --sky:#3E6E92; --gnd:#6B4A2E; --needle:#E9E6DE;

  /* two seasoning colours, one appearance each (relayfi rule 5): the sectional
     magenta on the heading card, the amber aircraft symbol on the attitude */
  --mag:#B0207A;
  --amber:#E2A93B;
}

.wrap{width:min(1140px,92vw);margin-inline:auto;position:relative;z-index:1}

/* ── masthead ─────────────────────────────────────────────────────────────*/
.mast{padding:clamp(26px,3.4vw,44px) 0 clamp(22px,2.6vw,34px)}
.mast-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center}
.mark{display:flex;align-items:center;gap:.75rem;font:900 1rem/1 var(--display);letter-spacing:-.04em}
.mark i{width:26px;height:26px;border-radius:7px;background:var(--acc);display:grid;place-items:center;
  color:#fff;font:900 .72rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}
.mast .lbl{margin-left:auto;text-align:right}

.sec{padding-block:clamp(44px,5.4vw,90px)}
.slabel{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(24px,3vw,40px)}
.slabel .n{color:var(--acc);font-weight:500}
.slabel .l{flex:0 0 clamp(28px,5vw,80px);height:1px;background:var(--rule)}

/* ── HERO: the kneeboard sheet beside the instrument panel ────────────────*/
.kb{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(16px,1.8vw,26px);align-items:start}
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 1px 1px var(--glass-cast1),0 26px 52px -32px var(--glass-cast2)}
.sheet-hd{display:grid;grid-template-columns:minmax(var(--labelw),max-content) minmax(0,1fr) auto;
  gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(24px,2.8vw,40px);border-bottom:1px solid var(--rule)}
.sheet-hd .a{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc)}
.sheet-hd .b{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-hd .c{font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.pane{padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,44px)}
/* the sheet is a column, not a full page width — the shared d1 max overflows it */
.pane .d1{margin-bottom:clamp(22px,2.4vw,32px);font-size:clamp(2.15rem,4.3vw,3.8rem)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,42px)}

/* the sheet's clipped-in meta, as a kneeboard card would carry it */
.meta{display:grid;border-top:1px solid var(--rule)}
.meta div{display:grid;grid-template-columns:minmax(var(--labelw),11rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;padding:var(--padb) clamp(26px,3vw,44px);
  border-bottom:1px solid var(--rule)}
.meta div:last-child{border-bottom:0}
.meta dt{font:500 .62rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.meta dd{font:400 .84rem/var(--lh-b) var(--display);color:var(--ink2)}

/* ── INSTRUMENT PANEL ─────────────────────────────────────────────────────*/
/* sticky: the instruments read scroll state, so they stay in view while the
   sheet runs past them. Sticky is free; the pin budget stays unspent. */
.panel{position:sticky;top:clamp(18px,3vw,40px);
  background:var(--panel);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 56px -32px rgba(20,30,40,.62)}
.panel-hd{display:flex;align-items:center;gap:.7rem;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border-bottom:1px solid rgba(231,233,230,.12);
  font:500 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--panel-dim)}
.panel-hd .dot{background:var(--acc)}
.insts{display:grid;gap:1px;background:rgba(231,233,230,.1)}
.inst{background:var(--panel);padding:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,2.2vw,2rem);align-items:center}
.inst svg{width:clamp(84px,9vw,108px);height:auto;flex:none}
/* these are spans and a <b>; without display:block the margins do nothing and
   all three run together on one line */
.inst-k{display:block;font:500 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--panel-dim)}
.inst-v{display:block;margin-top:.7rem;font:500 clamp(.9rem,1.4vw,1.1rem)/var(--lh-h) var(--mono);
  letter-spacing:.04em;color:var(--panel-ink)}
.inst-n{display:block;margin-top:.6rem;font:400 .62rem/var(--lh-h) var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel-dim)}
.bez{fill:#0D1013;stroke:rgba(231,233,230,.22);stroke-width:2}
.ring{fill:none;stroke:rgba(231,233,230,.16);stroke-width:2}
.tickm{stroke:var(--needle);stroke-width:1.4;opacity:.7}
.card-t{fill:var(--needle);font:500 9px var(--mono);letter-spacing:.04em}
.lubber{fill:var(--needle);stroke:none}
.magtick{stroke:var(--mag);stroke-width:2.4}
.acsym{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round}
.dgcard{transition:transform .7s var(--e)}
.arc-bg{fill:none;stroke:rgba(231,233,230,.18);stroke-width:5;stroke-linecap:butt}
.arc-fill{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s var(--e)}
.needle{stroke:var(--needle);stroke-width:2.2;stroke-linecap:round;transition:transform .5s var(--e)}
/* the horizon is driven every frame by rAF, so it must NOT also transition */

/* ── CHECKLIST: sticky glass brief, rows running past its edge ────────────*/
.chk{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:clamp(0px,2vw,28px);align-items:start}
.brief{position:sticky;top:clamp(18px,3vw,40px);z-index:4;
  /* the negative margin is the point: the checklist runs UNDER this pane, so
     the blur has real content to refract instead of a manufactured wash */
  margin-right:clamp(-72px,-4vw,-24px);padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,30px)}
.brief-k{font:500 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.bstates{display:grid;margin-top:clamp(16px,1.8vw,22px)}
.bstate{grid-area:1/1;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s var(--e),transform .5s var(--e)}
.bstate.on{opacity:1;transform:none;pointer-events:auto}
.bstate h3{font:900 clamp(1.15rem,1.7vw,1.45rem)/var(--lh-h) var(--display);
  letter-spacing:-.02em;text-transform:uppercase}
.bstate p{margin-top:.9rem;font:400 .84rem/var(--lh-b) var(--display);color:var(--ink2)}
.brief-ct{margin-top:clamp(20px,2.2vw,28px);padding-top:var(--padb);border-top:1px solid var(--rule);
  display:flex;align-items:baseline;gap:.8rem;
  font:500 .62rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.brief-ct b{font:900 1.5rem/1 var(--display);letter-spacing:-.04em;color:var(--acc-d)}

.groups{display:grid;gap:clamp(26px,3vw,44px);
  padding-left:clamp(20px,3.4vw,60px);border-left:1px solid var(--rule)}
.grp > .lbl{display:block;margin-bottom:clamp(12px,1.4vw,18px)}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.1rem,2vw,1.7rem);
  align-items:start;padding:var(--padb) var(--padi);
  border-bottom:1px solid var(--rule);
  transition:background-color .45s var(--e)}
.crow:first-of-type{border-top:1px solid var(--rule)}
.crow.done{background-color:rgba(20,80,140,.045)}
.box{width:22px;height:22px;border:1px solid var(--rule);border-radius:4px;display:grid;
  place-items:center;flex:none;background:var(--card);
  transition:border-color .45s var(--e),background-color .45s var(--e)}
.crow.done .box{border-color:var(--acc);background-color:#fff}
.box svg{width:14px;height:14px;fill:none;stroke:var(--acc);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s var(--e)}
.crow.done .box svg{stroke-dashoffset:0}
.crow p{font:400 .92rem/var(--lh-b) var(--display);color:var(--ink3);
  transition:color .45s var(--e)}
.crow.done p{color:var(--ink)}

/* ── LOGBOOK: a surface, so hard edges; the inspector floats over it ──────*/
.logbook{border-top:1px solid var(--rule)}
.lrow{display:grid;grid-template-columns:minmax(6.5rem,7rem) minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:var(--gut);align-items:center;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--rule);
  transition:background-color var(--t-mid) var(--e),opacity var(--t-mid) var(--e)}
.lrow:hover{background-color:var(--wash);opacity:.94}
.lrow .code{font:900 clamp(1.35rem,2vw,1.75rem)/1 var(--display);letter-spacing:-.03em;color:var(--acc-d)}
.lrow .nm{font:700 clamp(1rem,1.4vw,1.2rem)/var(--lh-h) var(--display);letter-spacing:-.015em}
.lrow p{font:400 .86rem/var(--lh-b) var(--display);color:var(--ink2)}
.lrow .go{font:500 .62rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc);white-space:nowrap}
.lhd{padding-block:clamp(14px,1.5vw,18px);border-bottom:1px solid var(--rule);
  font:500 .6rem/var(--lh-h) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}

/* the cursor inspector — glass over the logbook rows */
.insp{position:fixed;top:0;left:0;z-index:150;width:216px;pointer-events:none;
  padding:clamp(16px,1.8vw,20px);opacity:0;
  transition:opacity var(--t-mid) var(--e)}
.insp.on{opacity:1}
.insp .code{display:block;font:900 2rem/1 var(--display);letter-spacing:-.045em;color:var(--acc-d)}
.insp .nm{display:block;margin-top:.8rem;font:700 .88rem/var(--lh-h) var(--display);letter-spacing:-.01em}
.insp p{margin-top:.65rem;font:400 .76rem/var(--lh-b) var(--display);color:var(--ink2)}
.insp .k{display:block;margin-top:.95rem;padding-top:.8rem;border-top:1px solid var(--rule);
  font:500 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
@media (hover:none),(pointer:coarse){.insp{display:none}}

/* ── SIGN-OFF ─────────────────────────────────────────────────────────────*/
.signoff{padding:clamp(32px,3.6vw,54px) clamp(28px,3.2vw,48px)}
.sosteps{display:grid;gap:0;margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--rule)}
.sostep{display:grid;grid-template-columns:auto minmax(var(--labelw),11rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;padding:var(--padb) var(--padi);
  border-bottom:1px solid var(--rule)}
.sostep .box{align-self:center}
.sostep h3{font:500 .68rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.sostep p{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2)}
.sig-line{margin-top:clamp(28px,3vw,42px);padding-top:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:var(--gut);align-items:baseline;
  font:400 .62rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}

/* ── CLIP READOUT — fixed glass chip, refracting the page under it ────────*/
/* bottom-right, not top: at the top it lands on the masthead label */
.clip{position:fixed;bottom:clamp(12px,1.8vw,24px);right:clamp(12px,2vw,26px);z-index:140;
  padding:clamp(13px,1.4vw,17px) clamp(16px,1.8vw,22px);
  display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.6rem);
  font:400 .58rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3)}
.clip b{display:block;margin-top:.5rem;font-weight:500;font-size:.66rem;color:var(--ink);letter-spacing:.1em}
.clip .ac{color:var(--acc)}
@media (max-width:700px){.clip{display:none}}

/* ── footer ───────────────────────────────────────────────────────────────*/
.foot{padding-bottom:clamp(34px,4vw,58px)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding-top:var(--padb);border-top:1px solid var(--rule);
  font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.foot-in a{color:var(--ink2);transition:color var(--t-mid) var(--e)}
.foot-in a:hover{color:var(--acc)}
.foot-in .sp{margin-left:auto}

@media (max-width:940px){
  .kb{grid-template-columns:minmax(0,1fr)}
  .chk{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,36px)}
  .brief{position:static;margin-right:0}
  .groups{padding-left:0;border-left:0}
  .lrow{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.1rem 1.6rem}
  .lrow p{grid-column:1/-1}
  .lrow .go{grid-column:1/-1}
}
@media (max-width:600px){
  .meta div{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .sostep{grid-template-columns:auto minmax(0,1fr)}
  .sostep p{grid-column:2}
  .sheet-hd{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.1rem}
  .sheet-hd .c{display:none}
  .inst{grid-template-columns:minmax(0,1fr);justify-items:start;gap:1.1rem}
}