/* ===========================================================================
   Ironstone Workstation — shared "gloss glass" theme
   Faithful to the arcade-2030 (rKAID) "2030" glassmorphic UI build spec:
   dark space + two neon radial glows, frosted translucent panels, neon
   cyan/violet/pink accents (emerald reserved for positive metrics only),
   density tiering (flatter high-contrast surface for data tables), and
   CSS-only motion that honours prefers-reduced-motion.
   One stylesheet drives the hub and every tool, so new tools inherit the look.
   ========================================================================= */

:root{
  /* space + ink (spec §1) */
  --space:#07080d;
  --ink:#e7ecf3;
  --head:#f2f5fa;
  --muted:#9ba3af;          /* zinc-400 */
  --faint:#5b6270;          /* zinc-500 */

  /* neon accents (spec §1) */
  --cyan:#67e8f9;
  --violet:#a855f7;
  --pink:#c026d3;
  --emerald:#34d399;        /* positive metrics only */
  --amber:#fbbf24;
  --red:#fb7185;

  /* glass surfaces */
  --glass:rgba(255,255,255,.05);
  --glass-hi:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%);
  --glass-border:rgba(255,255,255,.10);
  --glass-solid:#0d111c;            /* fallback w/o backdrop-filter */
  --dense:rgba(13,17,28,.72);       /* dense tier (tables) */
  --dense-border:rgba(255,255,255,.08);
  --shadow:0 8px 32px rgba(0,0,0,.45);
  --glow:0 12px 40px rgba(103,232,249,.12);

  /* derived accent helpers */
  --brand:#67e8f9;
  --brand-soft:rgba(103,232,249,.10);
  --accent-grad:linear-gradient(135deg,#3b82f6 0%,#a855f7 55%,#c026d3 100%);
  --good:var(--emerald); --good-soft:rgba(52,211,158,.14);
  --bad:var(--red);      --bad-soft:rgba(251,113,133,.14);
  --warn:var(--amber);   --warn-soft:rgba(251,191,36,.14);

  /* inputs */
  --input:rgba(255,255,255,.055);
  --input-border:rgba(103,232,249,.22);

  --radius:18px;            /* cards (rounded-2xl-ish) */
  --radius-lg:24px;         /* hero tiles / panels (rounded-3xl) */
  --radius-sm:10px;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);font-size:14px;line-height:1.5;min-height:100vh;
  background-color:var(--space);
  /* two neon radial glows over a faint blueprint grid (spec §0 / IMG_9242,_9245) */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(103,232,249,.08), transparent 55%),
    linear-gradient(rgba(150,170,210,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,170,210,.045) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment:fixed;
}

/* ---------- header (glass top bar) ---------- */
header{
  background:rgba(9,11,19,.7);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
  color:#fff;padding:22px 28px;position:relative;
}
header::after{ /* neon divider under header */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.5),rgba(192,38,211,.5),transparent);
}
header h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.2px;color:#fff;
  text-shadow:0 0 18px rgba(103,232,249,.25)}
header p{margin:5px 0 0;opacity:.72;font-size:13px}
header .back{display:inline-block;margin-bottom:9px;color:var(--cyan);opacity:.92;
  text-decoration:none;font-size:12.5px;font-weight:600}
header .back:hover{opacity:1;text-decoration:underline}

/* header utility rows */
.asof,.toolbar{margin-top:12px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.asof label,.toolbar label{font-size:13px;color:var(--muted)}
.asof-label{font-size:12.5px;color:var(--muted)}
.asof input,.toolbar input,.asof select,.toolbar select{
  width:auto;background:var(--input);border:1px solid var(--input-border);color:var(--ink);
  border-radius:var(--radius-sm);padding:5px 8px;font:inherit}
.asof input[type=date]{color-scheme:dark}
.asof button,.toolbar button{
  background:rgba(255,255,255,.06);border:1px solid rgba(103,232,249,.30);color:var(--ink);
  border-radius:var(--radius-sm);padding:6px 11px;font:inherit;font-weight:600;cursor:pointer;
  box-shadow:none}
.asof button:hover,.toolbar button:hover{background:rgba(103,232,249,.12);
  border-color:rgba(103,232,249,.55);filter:none}

main{max-width:1180px;margin:0 auto;padding:24px 18px 64px}

/* ---------- glass card (sparse tier) ---------- */
.card{
  position:relative;overflow:hidden;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:22px;box-shadow:var(--shadow);
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);opacity:.6}
h2{font-size:16px;margin:0 0 4px;color:var(--head);font-weight:650}
.sub{color:var(--muted);margin:0 0 14px;font-size:12.5px}
.legend{font-size:12px;color:var(--muted)}
.legend b{background:var(--brand-soft);padding:1px 6px;border-radius:5px;
  border:1px solid rgba(103,232,249,.28);color:var(--cyan);font-weight:600}
.note{font-size:12px;color:var(--faint);margin-top:10px}

/* ---------- tables (dense tier: minimal blur, higher contrast) ---------- */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 9px;border-bottom:1px solid var(--dense-border);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th.num,td.num{text-align:right}
thead th{background:rgba(13,17,28,.55);color:var(--muted);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid rgba(103,232,249,.22)}
tbody tr:hover{background:rgba(103,232,249,.05)}
tfoot td{font-weight:700;border-top:1px solid rgba(103,232,249,.22);background:rgba(13,17,28,.5)}
td.calc{background:rgba(13,17,28,.4);color:var(--ink)}
td.day{font-weight:600}
.dayhead td{background:rgba(103,232,249,.10);font-weight:700;color:var(--cyan);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- inputs ---------- */
input,select{
  font:inherit;text-align:right;color:var(--ink);
  border:1px solid var(--input-border);border-radius:var(--radius-sm);
  padding:5px 8px;width:100%;background:var(--input)}
input::placeholder{color:var(--faint)}
input[type=date]{text-align:left;color-scheme:dark}
input.txt,td input.txt{text-align:left}
input.num{text-align:right}
select{text-align:left;background:rgba(13,17,28,.9)}
select option{background:#0d111c;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(103,232,249,.22)}
select.typesel,select.catsel,select.statussel,select.stagesel,select.sel{width:auto;min-width:96px;padding:4px 7px}
select.typesel{min-width:118px}

/* ---------- buttons ---------- */
button{
  font:inherit;font-weight:650;cursor:pointer;color:#fff;border:none;
  border-radius:12px;padding:7px 14px;background:var(--accent-grad);
  box-shadow:0 6px 18px rgba(99,102,241,.40)}
button:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(103,232,249,.30)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.del{border:none;background:none;color:var(--bad);cursor:pointer;font-size:15px;
  line-height:1;padding:3px 7px;box-shadow:none}
.del:hover{background:var(--bad-soft);border-radius:6px;filter:none;box-shadow:none}
th.x,td.x{width:34px;text-align:center;padding-left:0;padding-right:4px}

/* ---------- stat tiles ---------- */
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px}
.stat{flex:1;min-width:150px;background:var(--glass-hi);
  border:1px solid rgba(103,232,249,.18);border-radius:var(--radius-sm);padding:13px 15px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.stat .v{font-size:22px;font-weight:600;color:var(--cyan);margin-top:3px;
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(103,232,249,.35)}
.stat.good{border-color:rgba(52,211,158,.4)}  .stat.good .v{color:var(--emerald);text-shadow:0 0 14px rgba(52,211,158,.4)}
.stat.bad{border-color:rgba(251,113,133,.4)}  .stat.bad .v{color:var(--red);text-shadow:0 0 14px rgba(251,113,133,.4)}
.stat.warn{border-color:rgba(251,191,36,.4)}  .stat.warn .v{color:var(--amber);text-shadow:0 0 14px rgba(251,191,36,.4)}

.pos{color:var(--emerald);font-weight:600}
.neg{color:var(--red);font-weight:600}
.warn{color:var(--amber)}

/* ---------- pills (categorical = cyan/violet/pink/amber/neutral; emerald=good) ---------- */
.pill{display:inline-block;padding:1px 9px;border-radius:20px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--glass-border)}
/* cyan */
.pill.cd,.pill.admin,.pill.submitted,.pill.planned,.st-Paused,.prog-TR{
  background:rgba(103,232,249,.15);color:#8ef0ff;border-color:rgba(103,232,249,.32)}
/* violet */
.pill.tr,.pill.fund,.st-Graduated,.prog-Hippo{
  background:rgba(168,85,247,.16);color:#cba6ff;border-color:rgba(168,85,247,.34)}
/* pink/magenta */
.prog-Vet{background:rgba(192,38,211,.16);color:#e879f9;border-color:rgba(192,38,211,.34)}
/* amber */
.pill.mm,.pill.progress,.st-Rest,.st-Waitlist,.prog-Adaptive{
  background:rgba(251,191,36,.15);color:#f4c970;border-color:rgba(251,191,36,.32)}
/* emerald = positive states */
.pill.prog,.pill.awarded,.pill.active,.st-Active,.st-Enrolled{
  background:rgba(52,211,158,.15);color:#5fe3bb;border-color:rgba(52,211,158,.32)}
/* red = negative */
.pill.declined{background:rgba(251,113,133,.15);color:#ff9aa8;border-color:rgba(251,113,133,.32)}
/* neutral */
.pill.research,.pill.closed,.st-Retired,.prog-Other{
  background:rgba(255,255,255,.08);color:var(--muted);border-color:var(--glass-border)}

/* ---------- bars ---------- */
.bar,.pbar,.minibar{background:rgba(255,255,255,.07);overflow:hidden}
.bar{height:10px;border-radius:6px;margin-top:5px}
.pbar{height:10px;border-radius:6px;margin-top:5px}
.minibar{height:8px;border-radius:5px;margin-top:9px}
.bar > span,.pbar > span,.minibar > span{display:block;height:100%;
  background:linear-gradient(135deg,#67e8f9,#a855f7)}
.bar.hot > span{background:linear-gradient(135deg,#fbbf24,#f97316)}
.bar.done > span,.bar.over > span,.pbar.done > span,.pbar.over > span,.minibar.done > span{
  background:linear-gradient(135deg,#34d399,#22b07d)}
.progress-cell{min-width:160px}
.flag{color:var(--amber);font-weight:600}

/* ---------- charts (neon donut + sparkline) ---------- */
.chart{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.chart .donut{position:relative;flex:0 0 auto}
.chart .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none}
.chart .donut .center .c-val{font-size:19px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(103,232,249,.3)}
.chart .donut .center .c-sub{font-size:9.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-top:1px}
.chart .legend-list{list-style:none;margin:0;padding:0;flex:1 1 170px;min-width:170px}
.chart .legend-list li{display:flex;align-items:center;gap:8px;padding:3.5px 0;font-size:12.5px}
.chart .legend-list .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;
  box-shadow:0 0 8px currentColor}
.chart .legend-list .ll{color:var(--ink)}
.chart .legend-list .lv{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.chart .legend-list li.note{color:var(--faint)}
svg.spark{display:inline-block;vertical-align:bottom}

.brow{margin:9px 0}
.brow .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.brow .lab .amt{color:var(--muted);font-variant-numeric:tabular-nums}
.breakdown,.load{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}

.due-ok{color:var(--emerald)} .due-soon{color:var(--amber);font-weight:600} .due-over{color:var(--red);font-weight:600}
.careitem{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--dense-border);font-size:13px}
.careitem:last-child{border-bottom:none}

.explain{margin-top:14px;background:rgba(103,232,249,.06);border:1px solid rgba(103,232,249,.18);
  border-left:3px solid var(--cyan);border-radius:12px;padding:12px 16px;font-size:13px;color:#c2cbe0}
.explain b{color:var(--ink)}
.explain p{margin:6px 0}
.explain ul{margin:8px 0 2px;padding-left:18px}
.explain li{margin:5px 0}

/* ===================== hub (home) ===================== */
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:#e879f9;font-weight:700;margin:10px 0 14px;
  text-shadow:0 0 14px rgba(192,38,211,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
a.tool{display:block;text-decoration:none;color:inherit;
  background:var(--glass);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
a.tool:hover{transform:translateY(-2px);border-color:rgba(103,232,249,.45);
  box-shadow:0 14px 44px rgba(103,232,249,.12),0 10px 36px rgba(0,0,0,.45)}
.tool .icon{font-size:26px;line-height:1}
.tool h3{margin:12px 0 4px;font-size:16px;color:var(--head)}
.tool p{margin:0;color:var(--muted);font-size:13px}
.tool .tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;
  background:var(--brand-soft);color:var(--cyan);padding:2px 10px;border-radius:20px;
  border:1px solid rgba(103,232,249,.28)}
.card.soon{display:block;background:rgba(255,255,255,.02);border:1px dashed var(--glass-border);
  border-radius:var(--radius);padding:20px 22px;opacity:.65;box-shadow:none}
.card.soon::before{display:none}
.card.soon h3{margin:12px 0 4px;font-size:16px;color:var(--muted)}
.card.soon .icon{font-size:26px;line-height:1;filter:grayscale(1);opacity:.6}
.card.soon p{margin:0;color:var(--muted);font-size:13px}
.card.soon .tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);color:var(--muted);padding:2px 10px;border-radius:20px}
footer{max-width:1180px;margin:0 auto;padding:0 18px 40px;color:var(--faint);font-size:12px}

/* ---------- snapshot = hero metric tiles (the marquee treatment) ---------- */
.snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:30px}
.snap-card{position:relative;overflow:hidden;isolation:isolate;display:block;text-decoration:none;color:inherit;
  background:var(--glass-hi),rgba(13,17,28,.35);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid color-mix(in srgb, var(--accent,#67e8f9) 26%, rgba(255,255,255,.10));
  border-radius:var(--radius-lg);padding:18px 20px;
  box-shadow:0 14px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 40px color-mix(in srgb, var(--accent,#67e8f9) 8%, transparent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.snap-card::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;top:-96px;right:-72px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent,#67e8f9) 60%, transparent), transparent 70%);
  filter:blur(22px);opacity:.5;pointer-events:none;animation:rk-orb 7.5s ease-in-out infinite}
a.snap-card:hover{transform:translateY(-5px) scale(1.012);
  border-color:color-mix(in srgb, var(--accent,#67e8f9) 60%, transparent);
  box-shadow:0 24px 70px color-mix(in srgb, var(--accent,#67e8f9) 24%, transparent),
    0 14px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.snap-card .h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.snap-card .big{font-size:26px;font-weight:400;margin-top:6px;font-variant-numeric:tabular-nums;
  color:var(--accent,#67e8f9);
  text-shadow:0 0 16px color-mix(in srgb, var(--accent,#67e8f9) 55%, transparent),
    0 0 36px color-mix(in srgb, var(--accent,#67e8f9) 28%, transparent)}
.snap-card .sub{font-size:12px;color:var(--muted);margin-top:4px}
.snap-card .sub.pos{color:var(--emerald);font-weight:600}
.snap-card .sub.neg{color:var(--red);font-weight:600}
.snap-card .empty{font-size:13px;color:var(--faint);margin-top:6px}
/* per-tile accents, cycled (cyan / violet / emerald / pink) */
.snap-card:nth-child(7n+1){--accent:#67e8f9}
.snap-card:nth-child(7n+2){--accent:#a855f7}
.snap-card:nth-child(7n+3){--accent:#34d399}
.snap-card:nth-child(7n+4){--accent:#c026d3}
.snap-card:nth-child(7n+5){--accent:#67e8f9}
.snap-card:nth-child(7n+6){--accent:#a855f7}
.snap-card:nth-child(7n+7){--accent:#34d399}

/* ===================== board report ===================== */
.report{position:relative;overflow:hidden;background:var(--glass);
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  border:1px solid var(--glass-border);border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow)}
.rhead{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid transparent;padding-bottom:12px;margin-bottom:18px;position:relative}
.rhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(103,232,249,.7),rgba(192,38,211,.5),transparent)}
.rhead h2{margin:0;font-size:22px;color:var(--head)}
.rhead .org{font-size:13px;color:var(--muted);margin-top:3px}
.rhead .date{font-size:12.5px;color:var(--muted);text-align:right}
.report h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan);
  margin:22px 0 10px;border-bottom:1px solid var(--dense-border);padding-bottom:5px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--glass-hi);border:1px solid rgba(103,232,249,.18);border-radius:var(--radius-sm);padding:12px 14px}
.kpi .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.kpi .v{font-size:20px;font-weight:600;color:var(--cyan);margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:3px}
.kpi.good .v{color:var(--emerald)} .kpi.bad .v{color:var(--red)} .kpi.warn .v{color:var(--amber)}
.kpi.empty .v{color:var(--faint);font-size:15px;font-weight:600}
.missing{background:var(--warn-soft);border:1px solid rgba(251,191,36,.35);border-radius:10px;
  padding:10px 14px;font-size:12.5px;color:#f4c970;margin-top:14px}
.foot{margin-top:22px;border-top:1px solid var(--dense-border);padding-top:10px;font-size:11.5px;color:var(--faint)}

/* ---------- motion ---------- */
@keyframes rk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rk-orb{0%,100%{transform:translate(0,0) scale(1);opacity:.45}
  50%{transform:translate(-10px,8px) scale(1.1);opacity:.7}}
.snap-card,.card,a.tool{animation:rk-rise .45s ease-out both}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- fallback: no backdrop-filter ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,a.tool,.snap-card,.report{background:var(--glass-solid)}
  header{background:#0a0d17}
}

/* ---------- print: switch to clean light ---------- */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none !important}
  body{background:#fff;color:#14233a}
  header{background:#0f3a6b;color:#fff;border:none;backdrop-filter:none}
  header::after,.card::before,.snap-card::before{display:none}
  header h1{text-shadow:none}
  header .back{display:none}
  main{max-width:none}
  .card,a.tool,.snap-card,.report,.stat,.kpi{
    background:#fff;border:1px solid #d5deea;box-shadow:none;backdrop-filter:none;break-inside:avoid}
  h2,.rhead h2,.stat .v,.kpi .v,.report h3,.tool h3{color:#0f3a6b;text-shadow:none}
  .snap-card .big{color:#0f3a6b;text-shadow:none}
  th,td{border-color:#dde5ef}
  thead th{color:#5d6b7a;background:#eef3f8}
  td.calc,tfoot td{background:#f7fafd}
  .explain{background:#f5f8fd;color:#33424f;border-color:#d5deea}
  .note,.sub,.snap-card .sub,.kpi .s,.snap-card .h,.stat .k,.kpi .k{color:#5d6b7a}
  .pos,.due-ok{color:#137a4b} .neg,.due-over{color:#b3261e} .warn,.due-soon{color:#9a5b00}
  .bar,.minibar,.pbar{background:#e8edf4}
  button,.asof button,.toolbar button,.del,.asof,.toolbar{display:none}
}