/* Shared chrome for the board's secondary pages (allocation, q4).

   index.html is frozen and carries its own inline styles. These tokens are
   copied from it verbatim so the secondary pages read as the same product.
   If the board's palette ever changes, change it here too. */

:root{
  --bg:#0B0A10; --surface:#15131C; --surface2:#1E1B28; --line:#282438; --line2:#332D48;
  --gold:#FFB224; --gold-light:#FFD37A; --gold-deep:#C97F10;
  --ember:#FF5C2E; --cream:#FFF4DE; --muted:#C9C4D4; --dim:#7E7990;
  --on-gold:#3A2500;
  --track:#2B2640;
  --good:#5FD38A; --warn:#FF8A62;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden}
body{margin:0;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 70px;
  display:flex;flex-direction:column;gap:18px}

/* header, matched to the board */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.sun{width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%,var(--gold-light),var(--gold) 55%,var(--ember));
  box-shadow:0 0 18px rgba(255,178,36,.5);animation:sunpulse 4s ease-in-out infinite}
@keyframes sunpulse{0%,100%{box-shadow:0 0 14px rgba(255,178,36,.4)}
                    50%{box-shadow:0 0 28px rgba(255,140,46,.75)}}
h1{font-size:17px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0}
h1 span{color:var(--gold)}

/* pill groups, same idiom as the board's period switcher */
.range{display:flex;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px}
.range a,.range button{background:none;border:none;color:var(--dim);font-size:12px;
  font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:all .25s;text-decoration:none;display:inline-block;font-family:inherit}
.range a:hover,.range button:hover{color:var(--muted)}
.range a.on,.range button.on{background:linear-gradient(135deg,var(--gold),var(--ember));
  color:var(--on-gold)}
.range a:focus-visible,.range button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.lede{margin:0;color:var(--muted);font-size:14px;max-width:70ch}
.lede b{color:var(--cream);font-weight:600}
.stamp{font-size:11.5px;color:var(--dim);margin-left:auto}

h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 2px}
.sub{margin:0 0 10px;font-size:13px;color:var(--dim)}
section{display:flex;flex-direction:column}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}

/* progress rows */
.goals{display:flex;flex-direction:column;gap:10px}
.goal{display:flex;align-items:center;gap:12px}
.goal .nm{font-size:13px;color:var(--muted);width:150px;flex:none}
.goal .track{flex:1;height:7px;background:var(--track);border-radius:99px;overflow:hidden}
.goal .fill{display:block;height:100%;border-radius:99px;min-width:3px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.goal .fig{font-size:13px;font-weight:700;color:var(--gold-light);
  font-variant-numeric:tabular-nums;width:74px;text-align:right;flex:none}
.goal .pct{font-size:11px;color:var(--dim);width:42px;text-align:right;flex:none}

/* stat blocks */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.big{font-size:34px;font-weight:800;line-height:1.05;color:var(--gold);
  font-variant-numeric:tabular-nums}
.big span{font-size:14px;color:var(--dim);font-weight:600}
.note{margin:0;font-size:13px;color:var(--muted)}
.pending{border-color:var(--gold-deep)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;background:var(--surface2);border:1px solid var(--line2);
  color:var(--cream);padding:4px 11px;border-radius:999px}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:640px}
th,td{padding:10px 12px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  background:var(--surface2);font-weight:600}
tbody tr{border-top:1px solid var(--line);background:var(--surface)}
tbody tr.up{background:linear-gradient(90deg,rgba(255,178,36,.07),transparent)}
td.nm{font-weight:700;color:var(--cream)}
td.n{font-variant-numeric:tabular-nums;color:var(--muted)}
td.n b{color:var(--gold-light)}
td.zero,td.dim{color:var(--dim)}
.badge{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-deep);border-radius:4px;padding:1px 5px;margin-left:8px}
.meter{display:inline-block;height:6px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border-radius:99px;min-width:3px;vertical-align:middle}
.barcell{display:flex;align-items:center;justify-content:flex-end;gap:8px}

.notes{font-size:12.5px;color:var(--dim);line-height:1.65;max-width:76ch;
  display:flex;flex-direction:column;gap:7px}
.notes b{color:var(--muted);font-weight:600}
.notes code{font-size:12px;color:var(--gold-light);background:var(--surface2);
  border:1px solid var(--line);padding:1px 6px;border-radius:4px}
.err{border:1px solid var(--ember);color:var(--warn);background:rgba(255,92,46,.08);
  padding:12px 14px;border-radius:12px;font-size:14px}

@media(max-width:620px){
  .duo{grid-template-columns:1fr}
  .goal .nm{width:104px;font-size:12px}
  .goal .fig{width:62px;font-size:12px}
  .range a,.range button{padding:6px 9px;font-size:11px}
  header{gap:10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}