/* FFT curriculum - shared module styles
   Tokens from Brand System. Signal is rationed: numbers, payoff words,
   active state only. Breach is never decorative. */

:root{
  --void:#0A0C0F; --panel:#11151A; --panel2:#161C23;
  --rule:#222A33; --rule-hi:#2E3945;
  --bone:#E9E7E2; --muted:#78838F; --dim:#4A555F;
  --signal:#F5B301; --breach:#E5484D;
  --display:'Barlow Condensed',Impact,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --measure:34rem;
  /* UI-SPEC.md section 1: the seven-step vertical spacing scale */
  --s1: 6px;    /* inside a line: label to value, marker offsets */
  --s2: 10px;   /* tight pairs: caption to image, cite to quote */
  --s3: 16px;   /* within a block: paragraph to paragraph */
  --s4: 24px;   /* block padding, list indent */
  --s5: 40px;   /* between related blocks */
  --s6: 64px;   /* between sections. h2 gets this above */
  --s7: 96px;   /* between major regions only. Use sparingly */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--body); font-size:17.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}
img{max-width:100%; height:auto; display:block}

/* progress hairline */
#prog{position:fixed; top:0; left:0; height:2px; width:0; background:var(--signal); z-index:60}

/* nav */
.nav{border-bottom:1px solid var(--rule); position:sticky; top:0; background:rgba(10,12,15,.93); backdrop-filter:blur(8px); z-index:50}
.nav .bar{max-width:74rem; margin:0 auto; padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between}
.mark{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:18px; text-decoration:none}
.mark span{color:var(--signal)}
.nav .up{font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.nav .up:hover{color:var(--bone)}

/* shell: ladder spine + column */
.shell{max-width:74rem; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:190px minmax(0,1fr); gap:56px}
.spine{position:sticky; top:96px; align-self:start; padding-top:var(--s6); height:max-content}
.spine ol{list-style:none; margin:0; padding:0 0 0 22px; border-left:1px solid var(--rule-hi)}
.spine li{position:relative; margin:0 0 var(--s3); font-family:var(--mono); font-size:11px; letter-spacing:.09em; color:var(--dim); line-height:1.4}
.spine li::before{content:""; position:absolute; left:-23px; top:8px; width:9px; height:1px; background:var(--rule-hi)}
.spine li b{display:inline-block; width:22px; font-weight:600}
.spine li.on{color:var(--signal)}
.spine li.on::before{background:var(--signal); width:15px; left:-23px}
.spine li.done{color:var(--muted)}
.spine .cap{font-family:var(--mono); font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--dim); margin:0 0 var(--s3)}

/* article */
article{padding:var(--s6) 0 var(--s5); max-width:var(--measure)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--signal); margin:0}
h1{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(36px,6.5vw,60px); line-height:.96; letter-spacing:.01em; margin:var(--s3) 0 0}
.deps{margin:var(--s4) 0 0; padding:var(--s3) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:12px; line-height:1.85; color:var(--muted); letter-spacing:.02em}
.deps b{color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:11px}
.src{margin:var(--s3) 0 0; font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.7}

article h2{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(24px,3.6vw,32px); line-height:1.04; letter-spacing:.015em; margin:var(--s6) 0 0}
article h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:20px; letter-spacing:.03em; margin:var(--s5) 0 0}
article p{margin:var(--s3) 0 0}
article strong{font-weight:500; color:#fff}
article em{font-style:italic; color:var(--muted)}
article ul{margin:var(--s3) 0 0; padding-left:20px}
article li{margin:var(--s2) 0}
article ul li::marker{color:var(--dim)}
hr{border:0; border-top:1px solid var(--rule); margin:var(--s6) 0 0}

blockquote{margin:var(--s4) 0 0; padding:2px 0 2px 22px; /* optical: 2px balances quote text against the left rule, below scale floor */ border-left:2px solid var(--signal)}
blockquote p{margin:0; font-size:19px; line-height:1.6}
blockquote cite{display:block; margin-top:var(--s2); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-style:normal}

figure{margin:var(--s5) 0 0}
figure .frame{
  position:relative; background:var(--panel); border:1px solid var(--rule);
  min-height:120px; padding:0; display:block; cursor:zoom-in;
}
figure .frame::after{
  content:'OPEN'; position:absolute; right:9px; bottom:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.19em; color:var(--dim);
  background:var(--void); border:1px solid var(--rule);
  padding:3px 7px; /* optical: chip vertical padding, below scale floor */
  opacity:0; transition:opacity .16s ease;
}
figure .frame:hover::after, figure .frame:focus-visible::after{opacity:1}
figure img{display:block; width:100%; height:auto}

/* lightbox */
#lb{
  position:fixed; inset:0; z-index:90; background:rgba(10,12,15,.94);
  display:none; align-items:center; justify-content:center; padding:5vh 4vw;
  cursor:zoom-out;
}
#lb.on{display:flex}
#lb img{max-width:100%; max-height:90vh; border:1px solid var(--rule-hi)}
#lb .esc{
  position:fixed; top:18px; right:20px; font-family:var(--mono); font-size:10px;
  letter-spacing:.19em; color:var(--muted); border:1px solid var(--rule);
  padding:var(--s1) 10px; background:var(--void)
}
figcaption{margin-top:var(--s2); font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em}

.terms{margin:var(--s4) 0 0; border:1px solid var(--rule); background:var(--panel)}
.terms dl{margin:0; padding:var(--s3) 22px}
.terms dt{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--signal); margin-top:var(--s3)}
.terms dt:first-child{margin-top:0}
.terms dd{margin:var(--s1) 0 0; font-size:15.5px; color:var(--muted); line-height:1.6}

.callout{margin:var(--s5) 0 0; border:1px solid var(--rule-hi); background:var(--panel); padding:var(--s3) 22px}
.callout .lab{font-family:var(--mono); font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin:0}
.callout p{font-size:16px}
.callout p:first-of-type{margin-top:var(--s2)}

/* self-check */
.check{margin:var(--s6) 0 0; border-top:2px solid var(--signal); padding-top:var(--s4)}
.q{margin:var(--s4) 0 0; padding-left:20px; border-left:1px solid var(--rule-hi)}
.q .qt{font-weight:500; color:#fff; margin:0}
.q .qa{margin:var(--s2) 0 0; font-size:15.5px; color:var(--muted)}
.q .qa b{color:var(--bone); font-weight:500}
.fail{margin:var(--s4) 0 0; padding:var(--s3) 20px; border:1px solid var(--breach); background:rgba(229,72,77,.05)}
.fail p{margin:0; font-size:15.5px}
.fail .lab{font-family:var(--mono); font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--breach); margin:0 0 var(--s1)}

/* the rep */
.rep{margin:var(--s5) 0 0; border:1px solid var(--signal); padding:var(--s4) 24px var(--s4)}
.rep .lab{font-family:var(--mono); font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--signal); margin:0}
.rep h2{margin:var(--s2) 0 0; font-size:26px}
.rep p{font-size:16px}

/* gate */
.gate{margin:var(--s6) 0 0; border-top:1px solid var(--rule); padding-top:var(--s5)}
.gate h2{margin:0}
.gate .why{color:var(--muted); font-size:16px}
form{margin:var(--s4) 0 0}
label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin:var(--s3) 0 var(--s1)}
input[type=email],input[type=text],textarea,select{
  width:100%; background:var(--panel); border:1px solid var(--rule); color:var(--bone);
  font-family:var(--body); font-size:16px;
  padding:14px 13px; /* controls are exempt from the spacing scale: sized for a thumb, not a rhythm. See UI-SPEC.md section 1 */
  border-radius:0;
}
textarea{min-height:104px; resize:vertical; line-height:1.6}
input:focus,textarea:focus,select:focus{background:var(--panel2); border-color:var(--rule-hi); outline:none}
input::placeholder,textarea::placeholder{color:var(--dim)}
select{appearance:none; font-family:var(--mono); font-size:14px}
/* scoped to form button, not bare `button`: the chart-open toggle in
   figure .frame is also a <button> and must not inherit CTA padding */
form button{
  margin-top:var(--s4); background:var(--signal); color:var(--void); border:1px solid var(--signal);
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:18px;
  padding:14px 28px; /* controls are exempt from the spacing scale: sized for a thumb, not a rhythm. See UI-SPEC.md section 1 */
  cursor:pointer;
}
form button:hover{background:transparent; color:var(--signal)}
.hp{position:absolute; left:-9999px}
.fine{margin-top:var(--s3); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.8}

/* pager */
.pager{margin:var(--s6) 0 0; border-top:1px solid var(--rule); display:flex; gap:1px; background:var(--rule)}
.pager a{flex:1 1 50%; background:var(--void); padding:var(--s4) 20px; text-decoration:none}
.pager a:hover{background:var(--panel)}
.pager .lab{font-family:var(--mono); font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--dim)}
.pager .t{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:19px; letter-spacing:.02em; margin-top:var(--s1); line-height:1.1}
.pager a.next{text-align:right}
.pager a.next .t{color:var(--signal)}

footer{margin-top:var(--s6); border-top:1px solid var(--rule); padding:var(--s4) 0 var(--s6); font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); line-height:1.9}
footer a{color:var(--muted); text-decoration:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr; gap:0}
  .spine{display:none}
  article{padding-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}

/* ==========================================================================
   Map and phase-hub styles. Merged in 31 July when the generator took over,
   because these previously lived inline in the hand-built map page and the
   generator emits one stylesheet for every page.
   Module-page rules above are scoped to `article`, so nothing collides.
   ========================================================================== */

.wrap{width:100%; max-width:68rem; margin:0 auto; padding:0 24px}
.lab{font-family:var(--mono); font-weight:500; font-size:10px; text-transform:uppercase;
     letter-spacing:.17em; color:var(--muted); margin:0}
.lab.sig{color:var(--signal)}

.hero{padding:var(--s7) 0 var(--s6); border-bottom:1px solid var(--rule)}
.hero h1{font-family:var(--display); font-weight:700; text-transform:uppercase;
         font-size:clamp(42px,8vw,84px); line-height:.94; letter-spacing:.01em;
         margin:var(--s3) 0 0; max-width:14ch}
.hero h1 em{font-style:normal; color:var(--signal)}
.lede{max-width:60ch; margin:var(--s4) 0 0; color:var(--muted); font-size:18px}
.lede strong{color:var(--bone); font-weight:500}

.strip{display:flex; flex-wrap:wrap; margin-top:var(--s5); border:1px solid var(--rule); background:var(--panel)}
.strip div{flex:1 1 130px; padding:var(--s3) 18px; border-right:1px solid var(--rule)}
.strip div:last-child{border-right:0}
.strip b{display:block; font-family:var(--display); font-weight:700; font-size:34px; line-height:1; color:var(--bone)}
.strip b.sig{color:var(--signal)}
.strip .lab{display:block; margin-top:var(--s1)}

body > section{padding:var(--s6) 0; border-bottom:1px solid var(--rule)}
body > section h2, .wrap h2{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,42px); line-height:1; letter-spacing:.015em; margin:var(--s3) 0 0}
.sub{max-width:62ch; color:var(--muted); margin:var(--s3) 0 0}
.sub strong{color:var(--bone); font-weight:500}

.layers{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
        border:1px solid var(--rule); margin-top:var(--s5)}
.layer{background:var(--panel); padding:var(--s4) 22px var(--s4)}
.layer.on{background:var(--panel2)}
.layer .n{font-family:var(--display); font-weight:700; font-size:40px; line-height:1; color:var(--dim)}
.layer.on .n{color:var(--signal)}
.layer h3{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
          font-size:20px; margin:var(--s2) 0 var(--s1)}
.layer p{margin:0; font-size:15px; color:var(--muted); line-height:1.6}
.layer .tagx{display:inline-block; margin-top:var(--s3); font-family:var(--mono); font-size:10px;
             letter-spacing:.17em; text-transform:uppercase; color:var(--signal);
             border:1px solid var(--signal);
             padding:3px 7px /* optical: chip vertical padding, below scale floor */}

.ladder{margin-top:var(--s5)}
.phase{position:relative; padding-left:76px; padding-bottom:var(--s5)}
.phase:last-child{padding-bottom:0}
.phase::before{content:""; position:absolute; left:27px; top:6px; bottom:0; width:1px; background:var(--rule-hi)}
.phase:last-child::before{bottom:auto; height:100%}
.rung{position:absolute; left:0; top:0; width:56px; text-align:right}
.rung .num{font-family:var(--display); font-weight:700; font-size:38px; line-height:.8;
           color:var(--rule-hi); display:block; padding-right:12px}
.phase.building .rung .num{color:var(--signal)}
.rung::after{content:""; position:absolute; right:-1px; top:14px; width:12px; height:1px; background:var(--rule-hi)}
.phase h3{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
          font-size:clamp(22px,3vw,30px); line-height:1; margin:0}
.phase h3 a:hover{color:var(--signal)}
.job{color:var(--muted); font-size:15px; margin:var(--s2) 0 0; max-width:56ch}

.rows{margin-top:var(--s3); border-top:1px solid var(--rule)}
.row{display:flex; align-items:baseline; gap:14px; padding:var(--s2) 2px; border-bottom:1px solid var(--rule)}
/* live rows are an <a>, so the whole row is one tap target on mobile,
   not just the title text: "Read" used to be visually inviting but dead */
a.row{text-decoration:none; color:inherit; width:100%}
.row .code{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.1em;
           color:var(--dim); width:34px; flex:0 0 34px}
/* min-width:0 overrides the flex-item default of auto, which sizes to the
   longest unbreakable word: without it, a long title unpredictably drops
   to its own line below the code badge instead of just wrapping in place,
   depending on word length rather than anything a reader would notice as a rule */
.row .name{flex:1 1 0; min-width:0; font-size:15.5px; line-height:1.45; color:var(--bone)}
.row .depth{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--dim); flex:0 0 auto; white-space:nowrap}
.phase.building .row .depth{color:var(--signal)}
.row.live:hover{background:var(--panel)}
.row.live:hover .name{color:var(--signal)}
.row.live .code, .row.live .depth{color:var(--signal)}

.chip{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.17em;
      text-transform:uppercase; padding:3px 8px; /* optical: chip vertical padding, below scale floor */
      border:1px solid var(--rule-hi); color:var(--muted);
      vertical-align:3px; margin-left:12px}
.chip.now{border-color:var(--signal); color:var(--signal)}

.setups{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px;
        background:var(--rule); border:1px solid var(--rule); margin-top:var(--s5)}
.setup{background:var(--panel); padding:var(--s4) 20px var(--s4); min-height:170px; display:flex; flex-direction:column}
.setup h3{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
          font-size:19px; margin:var(--s2) 0 var(--s1)}
.setup p{margin:0 0 auto; font-size:14.5px; color:var(--muted); line-height:1.55}
.setup .st{margin-top:var(--s3)}
.setup.open{background:transparent; border:1px dashed var(--rule-hi); justify-content:center}
.setup.open p{color:var(--dim); font-size:14px}

.note{border-left:2px solid var(--signal); padding:2px 0 2px 18px; /* optical: 2px balances note text against the left rule, below scale floor */ margin-top:var(--s5); max-width:62ch}
.note p{margin:0; font-size:15.5px; color:var(--muted)}
.note p strong{color:var(--bone); font-weight:500}

.cta{padding:var(--s6) 0}
.cta h2{max-width:18ch}
.btn{display:inline-block; margin-top:var(--s4); background:var(--signal); color:var(--void);
     font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
     font-size:19px;
     padding:14px 30px; /* controls are exempt from the spacing scale: sized for a thumb, not a rhythm. See UI-SPEC.md section 1 */
     text-decoration:none; border:1px solid var(--signal)}
.btn:hover{background:transparent; color:var(--signal)}

@media (max-width:720px){
  .layers{grid-template-columns:1fr}
  .phase{padding-left:0}
  .phase::before{display:none}
  .rung{position:static; width:auto; text-align:left; margin-bottom:var(--s1)}
  .rung .num{padding-right:0; font-size:30px}
  .rung::after{display:none}
  .row{flex-wrap:wrap; gap:8px}
  .row .depth{width:100%; order:3}
  .strip div{flex:1 1 50%; border-bottom:1px solid var(--rule)}
}


/* the bell - divides teaching from assessment, per the brand system */
.bell{
  margin:var(--s6) 0 0; padding:0; border:0; border-top:1px solid var(--rule-hi);
  position:relative; height:0;
}
.bell span{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  background:var(--void); padding:0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
@media (max-width:720px){ .bell span{letter-spacing:.18em} }


/* video well - the talking-head slot. Layout is composed around this whether
   or not a file is present yet, so adding one is not a redesign. */
.vwell{margin:0 0 var(--s5); padding:0}
.vwell video{
  display:block; width:100%; height:auto; background:var(--panel);
  border:1px solid var(--rule); aspect-ratio:16/9; object-fit:cover;
}
.vwell figcaption{
  margin-top:var(--s2); font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--dim);
}