/* MedRisk 2025 brand theme.
   Brand colors are the PowerPoint theme scheme, verbatim. Text-safe variants are
   darkened steps of the same hue, because the brand mint and orange sit around
   2.4:1 and 3.1:1 on white — fine for a fill, not for a number you have to read. */
:root{
  /* ---- brand, straight from the deck's "MedRisk 2025" color scheme ---- */
  --brand-deep:#0A2D33;      /* dark 2   — the dark slide background */
  --brand-dark:#0E3D45;      /* accent 3 */
  --brand-green:#015E56;     /* accent 2 */
  --brand-mint:#49B9AA;      /* accent 1 — the hero */
  --brand-mint-2:#3EA497;    /* light 2  — the logo mint on light */
  --brand-mint-hi:#5FE9D7;   /* the logo mint on dark */
  --brand-orange:#F16640;    /* accent 4 — alerts, the one warm note */
  --brand-sand:#DAD9C7;      /* accent 5 */
  --brand-cream:#F2F2ED;     /* accent 6 — the light slide background */

  /* ---- surfaces & ink ---- */
  --paper:var(--brand-cream); --panel:#FFFFFF;
  --ink:var(--brand-deep); --muted:#4F6A6F; --faint:#5A7175;
  --rule:#E2E4D9; --rule-2:#C9CEC2;

  /* ---- data roles ---- */
  --actual:var(--brand-dark);      /* solid = money already spent */
  --proj:#037A6D;                  /* forecast, as text (4.5:1 on white) */
  --proj-fill:var(--brand-mint);   /* forecast, as a fill */
  --ok:var(--brand-green); --ok-bg:#E4F1EE;
  --watch:#8A6E12; --watch-bg:#F6F0DC;
  --over:#C6421F; --over-bg:#FCEAE4; --over-fill:var(--brand-orange);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --cond:"Barlow Semi Condensed","Inter",Arial,sans-serif;
  --radius:3px;                    /* the deck is built from square corners */
  --shadow:0 1px 2px rgba(10,45,51,.05), 0 8px 24px -16px rgba(10,45,51,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
/* Inter's tabular figures do the job a mono face used to — same column alignment,
   one less font to load, and it is a typeface the brand deck already sanctions. */
.mono,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:11px;font-weight:600;color:var(--faint)}
/* The deck marks its eyebrows with a small mint square holding an arrow. Drawn as
   SVG rather than a glyph — U+2192 is not in the Inter web subset. */
.eyebrow.mark::before{content:"";display:inline-block;width:14px;height:14px;margin-right:7px;
  vertical-align:-3px;background:var(--brand-mint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h7M7.5 4.2 10.3 7l-2.8 2.8' fill='none' stroke='%230A2D33' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E") center/14px no-repeat}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 72px}

header.top{background:var(--brand-deep);color:#fff}
.top-in{max-width:1180px;margin:0 auto;padding:15px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto}
.brand svg{height:26px;width:auto;display:block;flex-shrink:0}
.brand .div{width:1px;height:26px;background:rgba(255,255,255,.22)}
.brand b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#fff;display:block}
.brand span{font-size:11.5px;color:#9FBDBE;display:block}
header.top .note{color:#9FBDBE}
header.top .note b{color:var(--brand-mint-hi);font-weight:600}
.chip{border:1px solid rgba(255,255,255,.28);background:none;color:#CFE0E0;
  border-radius:var(--radius);padding:5px 11px;font-size:11.5px;cursor:pointer;font-family:var(--sans)}
.chip:hover{border-color:var(--brand-mint);color:#fff}
.chip[aria-pressed="true"]{background:var(--brand-mint);color:var(--brand-deep);
  border-color:var(--brand-mint);font-weight:600}

.scrub{background:var(--panel);border-bottom:1px solid var(--rule)}
.scrub-in{max-width:1180px;margin:0 auto;padding:10px 20px 14px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.asof{display:flex;align-items:baseline;gap:8px}
.asof b{font-size:16px;font-weight:600}
.note{font-size:11.5px;color:var(--muted)}
.note b{color:var(--ink);font-weight:600}

nav.tabs{display:flex;gap:2px;margin:22px 0 6px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
nav.tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 14px 10px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand-mint);font-weight:600}
.subbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.subbar-primary{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;flex:1 1 100%;min-width:0;overflow-x:auto}
.subbar-break{flex-basis:100%;height:0}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.seg button{appearance:none;background:none;border:0;padding:6px 12px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--brand-deep);color:#fff;font-weight:600}
input[type=search],input.num,select{font:inherit;font-size:13px;padding:6px 10px;
  border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
input.num{width:88px;text-align:right;font-variant-numeric:tabular-nums}
label.field{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.fgroup{display:inline-flex;align-items:center;gap:10px;padding:5px 11px;
  border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--panel)}
.fgroup .fglabel{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:10.5px;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c5{grid-template-columns:repeat(5,1fr)}
.cards.c6{grid-template-columns:repeat(6,1fr)}
.cards.c7{grid-template-columns:repeat(7,1fr)}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px 15px;box-shadow:var(--shadow);border-top:3px solid var(--brand-mint)}
.card .val{font-variant-numeric:tabular-nums;
  font-size:27px;font-weight:600;letter-spacing:-.025em;margin-top:6px;line-height:1.1}
.card .sub{font-size:11.5px;color:var(--muted);margin-top:5px}
.val.proj{color:var(--proj)}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:14px}
.panel h3{margin:0 0 2px;font-size:15px;font-weight:600;letter-spacing:-.015em}
.panel .desc{font-size:12px;color:var(--muted);margin:0 0 14px}

.meter{position:relative;height:26px;background:var(--brand-cream);border-radius:2px;overflow:hidden}
.meter .bar{position:absolute;left:0;top:0;bottom:0;background:var(--actual)}
/* Forecast reads as the brand mint, hatched — texture as well as hue, so it survives
   greyscale printing and colour-blind readers. */
.meter .fc{position:absolute;top:0;bottom:0;
  background-image:repeating-linear-gradient(135deg,var(--proj-fill) 0 2px,transparent 2px 7px);
  border-right:2px solid var(--proj-fill)}
.meter .pace{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--brand-deep)}
.meter.small{height:14px}
.meter.row{height:11px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px}
.key{display:inline-flex;align-items:center;gap:6px}
.sw{width:13px;height:11px;display:inline-block}
.sw.a{background:var(--actual)}
.sw.p{background-image:repeating-linear-gradient(135deg,var(--proj-fill) 0 2px,transparent 2px 7px);border:1px solid var(--proj-fill)}
.sw.c{border-left:2px dashed var(--brand-deep);width:2px}

table{width:100%;border-collapse:collapse}
th{font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.06em;font-size:11px;font-weight:600;color:var(--faint);text-align:right;
  padding:0 10px 8px;border-bottom:1px solid var(--rule-2);white-space:nowrap;cursor:pointer;user-select:none}
th:first-child,td:first-child{text-align:left;padding-left:2px}
th.nosort{cursor:default}
th:hover:not(.nosort){color:var(--ink)}
td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:right;font-size:13px}
td.name{font-weight:500;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr:hover{background:var(--brand-cream)}
.pill{display:inline-block;padding:2px 8px;border-radius:2px;font-size:11px;font-weight:600}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.watch{background:var(--watch-bg);color:var(--watch)}
.pill.over{background:var(--over-bg);color:var(--over)} .pill.idle{background:#EDEEE7;color:var(--faint)}
.proj-t{color:var(--proj);font-weight:600}
.more{display:block;width:100%;margin-top:12px;padding:9px;background:none;border:1px dashed var(--rule-2);
  border-radius:var(--radius);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.more:hover{border-color:var(--brand-green);color:var(--brand-green)}
.back{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:var(--brand-deep);
  border:0;border-radius:var(--radius);color:#fff;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow)}
.back .arw{font-size:16px;line-height:1;transition:transform .12s ease}
.back:hover{background:var(--brand-green)}
.back:hover .arw{transform:translateX(-3px)}

.chart{width:100%;height:230px;display:block}
.grid line{stroke:#E8E9E0;stroke-width:1}
.axis text{font-family:var(--sans);font-size:10px;fill:var(--faint);font-variant-numeric:tabular-nums}
.capline{stroke:var(--over-fill);stroke-width:1.5;stroke-dasharray:5 4}
.capline-t{font-family:var(--cond);font-size:11px;fill:var(--over);
  text-transform:uppercase;letter-spacing:.06em}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* The deck's method/aside note: cream block, mint keyline. */
.callout{border-left:3px solid var(--brand-mint);background:var(--brand-cream);padding:11px 14px;
  font-size:12.5px;color:#2C4247;margin-top:14px}
.callout b{color:var(--brand-deep)}

/* summary */
.verdict{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);margin-top:14px;border-left:5px solid var(--brand-mint)}
.verdict.over{border-left-color:var(--over-fill)} .verdict.watch{border-left-color:var(--watch)}
.verdict h2{margin:8px 0 10px;font-size:29px;font-weight:600;letter-spacing:-.03em;line-height:1.14}
.verdict p{margin:0;font-size:14px;color:#3A4C50;max-width:74ch}
.findings{list-style:none;padding:0;margin:14px 0 0}
.findings li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:13.5px;align-items:baseline}
.findings li b{font-variant-numeric:tabular-nums;
  min-width:96px;text-align:right;font-weight:600;flex-shrink:0}
.findings li span{color:#3A4C50}
.tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:2px;background:#EDEEE7;color:var(--muted);flex-shrink:0}
.tag.risk{background:var(--over-bg);color:var(--over)} .tag.save{background:var(--ok-bg);color:var(--ok)}
.tag.watch{background:var(--watch-bg);color:var(--watch)}

footer.fine{margin-top:26px;font-size:11.5px;color:var(--faint);line-height:1.6}
@media (max-width:820px){.cards,.cards.c5,.cards.c6,.cards.c7{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.hide-s{display:none}}
:focus-visible{outline:2px solid var(--brand-mint-2);outline-offset:2px}