/* donow.css — C2-1 DO-NOW fold (B/Signal Rail on live data). Night-sky tokens
   only; no new paint. The rail carries rank: ordinal + #1 hero gold inset +
   one filled-gold primary action. */

.dn-head{
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
  margin-bottom:.75rem; padding-bottom:.6rem;
  border-bottom:1px solid rgba(241,234,218,.08);
}
.dn-metric-wrap{ display:inline-flex; align-items:baseline; gap:.45rem; }
.dn-metric{
  font-size:1.35rem; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.dn-metric--hot{ color:var(--gold); }
.dn-metric--warn{ color:var(--warn); }
.dn-metric-lbl{
  font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--cream-dim);
}
.dn-kinds{
  font-size:.74rem; color:var(--cream-dim);
  font-variant-numeric:tabular-nums;
}

/* the ordinal rail — rank by position, not by equal cards */
.dn-rail{ display:flex; flex-direction:column; gap:.6rem; counter-reset:dn; }
.dn-rail > .row{ position:relative; counter-increment:dn; padding-left:2.15rem; }
.dn-rail > .row::before{
  content:counter(dn);
  position:absolute; left:.75rem; top:.8rem;
  font-size:.82rem; font-weight:700; color:var(--cream-dim);
  font-variant-numeric:tabular-nums;
}
.dn-rail > .row:first-child::before{ color:var(--gold); }

/* #1 hero — the ONLY gold treatment in the rail (anchor R1) */
.dn-hero .title{ font-size:1.03rem; }
/* specificity: the linked sheet loads before index.html's inline <style>, so
   the CTA must out-specify .abtn--go (0,1,0) — two classes + hover three. */
.dn-rail .abtn.dn-cta{
  background:var(--gold); border-color:var(--gold); color:var(--night-hi);
}
.dn-rail .abtn.dn-cta:hover,
.dn-rail .abtn.dn-cta:active{
  background:var(--gold); border-color:var(--gold); color:var(--night-hi);
}

@media (max-width:760px){
  /* action-first home: the fold leads the section order on a phone */
  #sec-donow{ order:0; }
  /* the LAW's mechanism: the rail scrolls INSIDE the fold, the page never
     scrolls sideways and lower items never fall below it unreachable */
  .dn-rail{
    max-height:38vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dn-rail::-webkit-scrollbar{ display:none; }
  .dn-rail > .row::before{ top:1rem; }
}