/* ============================================================================
   Phone Pop University — shared "Alpha Grade" design system
   Linked by index.html, scorecard.html and team-report.html.

   This is the one place to tune the house look. Ray's reference is the
   "Winning Daily Scorecard / Alpha Grade System" sheet: pure black ground,
   every panel framed in hard Toyota red with a black header strip inside the
   frame, square corners, Orbitron caps for headings and labels, green for
   good numbers and red for behind.

   TYPOGRAPHY RULE — do not break this: Orbitron draws `0` as a slashed
   rectangle that collapses into an unreadable box below about 1.4rem, so
   Orbitron is for headings, labels, wordmarks and letter grades only.
   Anything containing a NUMBER uses Inter with `font-variant-numeric:
   tabular-nums` (the .num helper below).
   ========================================================================== */

:root{
  --black:#000;
  --panel:#0B0B0C;
  --panel-2:#0E0E11;
  --panel-3:#151519;

  --frame:#EE0A24;          /* the red that frames every panel */
  --hair:rgba(255,255,255,.14);
  --hair-soft:rgba(255,255,255,.07);

  --red:#EE0A24;
  --red-soft:rgba(238,10,36,.10);
  --green:#00E676;
  --green-soft:rgba(0,230,118,.07);
  --amber:#FFB300;
  --amber-soft:rgba(255,179,0,.08);
  --blue:#38BDF8;
  --blue-soft:rgba(56,189,248,.10);
  --violet:#7C5CFF;

  --text:#F2F2F3;
  --muted:#8A8A93;
  --dim:#5C5C66;

  --r:3px;                  /* the house corner radius: nearly square */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--text);
  font-family:'Inter',system-ui,Arial,sans-serif;
  min-height:100vh;
}
a{color:var(--blue);text-decoration:none}

/* Orbitron for words; Inter tabular for anything with digits in it. */
.orb{font-family:'Orbitron',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums}

/* ---------- page chrome ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:11px 20px;
  border-bottom:2px solid var(--frame);background:var(--black);flex-wrap:wrap}
.topbar img{height:28px}
.topbar .tb-text{font-family:'Orbitron',sans-serif;font-weight:600;font-size:.62rem;
  color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.topbar .tb-nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.topbar .tb-nav a{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:2px;border-bottom:1.5px solid transparent}
.topbar .tb-nav a:hover{color:var(--text)}
.topbar .tb-nav a.on{color:#FF6B7C;border-bottom-color:var(--frame)}

.mast{padding:13px 18px;border-bottom:2px solid var(--frame);display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mast .m-t{font-family:'Orbitron',sans-serif;font-weight:800;
  font-size:clamp(.9rem,2.2vw,1.16rem);letter-spacing:.09em;text-transform:uppercase}
.mast .m-s{font-family:'Orbitron',sans-serif;font-weight:600;font-size:.56rem;
  color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin-top:5px}
.mast .m-r{display:flex;align-items:center;gap:12px}
.mast .m-r img.tsb{height:24px}
.mast .m-r img.ppu{height:32px;width:32px;border-radius:50%;object-fit:contain}

.banner{border:2px solid var(--frame);margin:13px 0;padding:14px 12px;text-align:center}
.banner b{font-family:'Orbitron',sans-serif;font-weight:900;color:var(--frame);
  font-size:clamp(1.05rem,4vw,2.05rem);letter-spacing:.16em;text-transform:uppercase;line-height:1.12}

/* ---------- the panel frame (both class vocabularies) ---------- */
.panel,.card{border:1.5px solid var(--frame);background:var(--panel);
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.panel > .head,.card > .card-head{background:var(--black);
  border-bottom:1.5px solid var(--frame);padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel > .head h3,.card > .card-head .ttl{font-family:'Orbitron',sans-serif;font-weight:800;
  font-size:.75rem;letter-spacing:.11em;text-transform:uppercase}
.panel > .head .sub,.card > .card-head .sub{font-family:'Orbitron',sans-serif;font-weight:600;
  font-size:.55rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.panel > .body,.card > .card-body{padding:14px;flex:1}

/* ---------- controls ---------- */
.mbtn,.month-quick{background:var(--panel-2);color:var(--muted);border:1px solid var(--hair);
  border-radius:var(--r);padding:8px 14px;font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.12s}
.mbtn:hover,.month-quick:hover{color:var(--text);border-color:var(--muted)}
.mbtn.active,.month-quick.active{background:var(--red-soft);border-color:var(--frame);color:#FF6B7C}

.btn-ghost{background:transparent;border:1px dashed var(--hair);color:var(--muted);
  border-radius:var(--r);padding:10px;font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:.12s}
.btn-ghost:hover{border-color:var(--frame);color:#FF6B7C}

.btn-primary{background:var(--frame);color:#fff;border:1.5px solid var(--frame);
  border-radius:var(--r);padding:15px;font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.12s}
.btn-primary:hover{background:#FF2036;border-color:#FF2036}

.btn-outline{background:transparent;color:var(--muted);border:1.5px solid var(--hair);
  border-radius:var(--r);padding:13px;font-family:'Orbitron',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.12s}
.btn-outline:hover{border-color:var(--frame);color:#FF6B7C}
.btn-outline:disabled{opacity:.6;cursor:default}

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select,textarea{
  background:var(--panel-2);color:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:9px 12px;font-family:'Inter',sans-serif;font-size:.86rem;color-scheme:dark}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--frame)}
input::placeholder,textarea::placeholder{color:var(--dim)}

/* ---------- small shared pieces ---------- */
.chip{font-family:'Orbitron',sans-serif;font-size:.53rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;border-radius:2px}
.chip.met{color:var(--green);background:var(--green-soft)}
.chip.under{color:var(--amber);background:var(--amber-soft)}
.chip.none{color:var(--red);background:var(--red-soft)}
.chip.off{color:var(--violet);background:rgba(124,92,255,.10)}

.bar{height:5px;background:var(--panel-3);overflow:hidden;border-radius:2px}
.bar > i{display:block;height:100%;transition:width .6s ease}

.sec-label{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.57rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.empty{padding:24px 14px;text-align:center;color:var(--dim);font-size:.8rem}
.empty b{display:block;font-family:'Orbitron',sans-serif;color:var(--muted);font-size:.8rem;
  letter-spacing:.12em;margin-bottom:7px;text-transform:uppercase}

.state{padding:28px 6px;font-size:.8rem;color:var(--dim);
  font-family:'Orbitron',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.state.err{color:#FF8A96;border:1.5px solid var(--frame);padding:16px;border-radius:var(--r)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:2px solid var(--frame);margin-top:13px;padding:12px 4px;
  font-family:'Orbitron',sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.foot a{font-weight:700}
.foot a + a{margin-left:16px}

/* Dense data table in the house style. */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.52rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);text-align:left;padding:7px 8px;
  border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--hair-soft);font-size:.79rem}
.tbl tr:last-child td{border-bottom:none}
.tbl .n{text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.tbl tbody tr:hover td{background:rgba(255,255,255,.025)}

@media print{
  /* These pages are designed dark and print dark. An earlier version forced
     `color:#000` here, which turned every heading and callout black-on-black the
     moment it sat on a panel that kept its own background — headings simply
     vanished from the PDF. Keep the theme; only drop the screen chrome. */
  html,body{background:var(--black) !important;color:var(--text) !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.foot,.controls,.no-print{display:none !important}
  .panel,.card{break-inside:avoid}
}