/* scout.css — Baby Rhino skin.
   Brand system carried over from LP 2152146969 / the 9-email campaign so Gap
   Scout looks like it came in the same box as the course. Mobile-first: students
   will open this on a phone mid-session, so single column is the base case and
   the desktop grid is the enhancement. */

:root{
  --bg:#0B0D0F; --panel:#15191D; --panel2:#1B2126;
  --line:#242A30; --line2:#333B42;
  --lime:#C8E94A; --ink:#1A2A04;
  --tx:#ECEFF1; --tx2:#A7AFB6; --tx3:#6E767D;
  --red:#FF6A4D; --amber:#F5B942; --green:#7BD389;
  --disp:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --r:14px;
}

*{box-sizing:border-box}
/* .fld sets display:flex, which silently beats the UA's [hidden] rule — so the
   exit-date field rendered on every horizon until this was added. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:0 16px}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#101418,var(--bg))}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 16px}
.mascot{flex:0 0 auto;border-radius:12px}
.topttl{flex:1 1 auto;min-width:0}
.topttl h1{
  font-family:var(--disp); font-weight:700; font-size:27px; line-height:1.1;
  margin:0; letter-spacing:.2px; color:var(--lime);
}
.topttl p{margin:2px 0 0;color:var(--tx2);font-size:13.5px}
.asof{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--tx2); text-align:right;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px;
}
.asof .dot{width:8px;height:8px;border-radius:50%;background:var(--tx3);flex:0 0 auto}
.asof.live .dot{background:var(--green);box-shadow:0 0 0 3px rgba(123,211,137,.15)}
.asof.old  .dot{background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,66,.15)}
.asof.dead .dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,106,77,.15)}

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 16px; margin:16px 0;
}
.sec{
  font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3); margin:0 0 14px;
}

/* ── segmented controls ─────────────────────────────────────────────────── */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.segb{
  font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:11px 6px; min-height:44px;
  background:var(--panel2); color:var(--tx2);
  border:1px solid var(--line2); border-radius:10px; cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.segb:hover{color:var(--tx);border-color:#48525b}
.segb.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.segb:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.seg4 .segb{font-size:12.5px}
.ixnote{
  margin:-6px 0 14px;padding:9px 12px;font-size:12.5px;color:var(--tx2);
  background:rgba(245,185,66,.07);border:1px solid rgba(245,185,66,.28);border-radius:9px;
}

/* ── fields ─────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.lbl{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3)}
.fld input{
  font-family:var(--body); font-size:17px; font-weight:600; color:var(--tx);
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
  padding:11px 12px; min-height:46px; width:100%;
}
.fld input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,233,74,.13)}
.fld input::placeholder{color:#5b636b;font-weight:400}
.hint{font-size:11.5px;color:var(--tx3);min-height:14px}
.hrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.fld.inline{flex:1 1 190px;max-width:260px}
.meta{flex:1 1 100%;font-size:12.5px;color:var(--tx2);padding-bottom:2px}

.more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.more summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--lime);
  list-style:none;padding:4px 0;min-height:32px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'+ ';font-weight:700}
.more[open] summary::before{content:'\2212 '}
.more summary .sub{color:var(--tx3);font-weight:400}
.more .grid{margin-top:12px}
.fine{font-size:12.5px;color:var(--tx2);margin:12px 0 0}

/* ── verdict ────────────────────────────────────────────────────────────── */
.verdict{border-radius:12px;border:1px solid var(--line2);background:var(--panel2);padding:14px;margin-bottom:14px}
.vhead{display:flex;align-items:center;gap:10px}
.vlamp{width:12px;height:12px;border-radius:50%;background:var(--tx3);flex:0 0 auto}
.vttl{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:.02em}
.vbody{margin:8px 0 0;font-size:14px;color:var(--tx2)}
.vbody b{color:var(--tx)}
.v-inside {border-color:rgba(123,211,137,.45);background:rgba(123,211,137,.07)}
.v-inside  .vlamp{background:var(--green)} .v-inside  .vttl{color:var(--green)}
.v-watch  {border-color:rgba(245,185,66,.45);background:rgba(245,185,66,.07)}
.v-watch   .vlamp{background:var(--amber)}  .v-watch  .vttl{color:var(--amber)}
.v-defense{border-color:rgba(255,106,77,.5);background:rgba(255,106,77,.08)}
.v-defense .vlamp{background:var(--red)}    .v-defense .vttl{color:var(--red)}

/* ── result cards ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.card{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:13px 12px;text-align:center}
.cv{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:.01em}
.cl{font-size:11.5px;color:var(--tx3);margin-top:4px;letter-spacing:.02em}
.c-in  .cv{color:var(--green)}
.c-dn  .cv{color:var(--red)}
.c-up  .cv{color:var(--amber)}
.c-any .cv{color:var(--tx)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.chip{
  font-size:12.5px;padding:6px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--tx2);
}
.chip b{color:var(--tx);font-weight:600}
.chip i{font-style:normal;color:var(--tx3)}
.chip.hot{border-color:rgba(255,106,77,.5);background:rgba(255,106,77,.08)}
.chip.mid{border-color:rgba(245,185,66,.4);background:rgba(245,185,66,.06)}
.chiplab{font-size:12px;color:var(--tx3)}

/* overflow-x, not hidden: at 375px the 4-column table is ~17px wider than its
   box, and `hidden` silently amputated the last column. */
.dual{margin-top:12px;border:1px solid var(--line2);border-radius:11px;overflow-x:auto}
.dual table{width:100%;min-width:320px;border-collapse:collapse;font-size:13px}
.dual th,.dual td{padding:9px 11px;text-align:right;border-bottom:1px solid var(--line)}
.dual th{background:var(--panel2);color:var(--tx3);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.dual th:first-child,.dual td:first-child{text-align:left}
.dual tr:last-child td{border-bottom:none}
.dual td b{font-family:var(--disp);font-size:15px}
.dual .lead{color:var(--tx2)}

.term{font-size:13px;color:var(--tx2);margin:12px 0 0}
.term b{color:var(--tx)}

.warn{
  margin-top:12px;font-size:12.5px;color:var(--tx3);
  border-left:2px solid var(--line2);padding:2px 0 2px 11px;
}
.warn b{color:var(--tx2)}
.warn.lvl1{border-left-color:var(--amber);color:var(--tx2)}
.warn.lvl1 b{color:var(--amber)}
.warn.lvl2{border-left-color:var(--red);color:var(--tx2)}
.warn.lvl2 b{color:var(--red)}

/* ── plays ──────────────────────────────────────────────────────────────── */
.plays{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;counter-reset:p}
.play{
  background:var(--panel2);border:1px solid var(--line2);border-radius:11px;
  padding:12px 13px;opacity:.5;transition:opacity .15s,border-color .15s,background .15s;
}
.play b{display:block;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--tx2)}
.play span{display:block;font-size:12.5px;color:var(--tx3);margin-top:3px}
.play.lit{opacity:1;border-color:var(--lime);background:rgba(200,233,74,.07)}
.play.lit b{color:var(--lime)}
.play.lit span{color:var(--tx2)}
.play .why{display:block;font-size:12px;color:var(--lime);margin-top:6px;font-weight:600}

/* ── how it works / footer ──────────────────────────────────────────────── */
.how p{font-size:13.5px;color:var(--tx2);margin:0 0 12px}
.how p:last-child{margin-bottom:0}
.how b{color:var(--tx)}
.warn-inline{
  border-left:2px solid var(--amber);padding-left:11px;
}
.warn-inline b{color:var(--amber)}
.quiet{color:var(--tx3);font-size:12.5px}
.foot{border-top:1px solid var(--line);margin-top:24px;padding:18px 0 40px}
.foot p{font-size:11.5px;line-height:1.6;color:var(--tx3);margin:0 0 10px}
.foot b{color:var(--tx2)}
.foot a{color:var(--tx2)}

/* ── desktop ────────────────────────────────────────────────────────────── */
@media (min-width:680px){
  .grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(4,1fr)}
  .plays{grid-template-columns:1fr 1fr}
  .topttl h1{font-size:31px}
  .cv{font-size:29px}
  .panel{padding:22px 20px}
}
@media (max-width:479px){
  .topbar{flex-wrap:wrap}
  .asof{flex:1 1 100%;justify-content:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}