/* Arketica visual canon (quiet serif, celestial-atlas engraving, light-only, no shadows
   or gradients) carrying the evanHEALY identity: their logo and sage green as the
   client accent, Arketica bronze for the practice's own marks. */
:root {
  color-scheme: light;
  --paper: #f7f5f0;
  --surface: #fcfbf8;
  --ink: #211f1c;
  --body: #45423c;
  --soft: #55524b;
  --muted: #8a877f;
  --bronze: #8a5a2b;
  --sage: #5b7b5c;          /* evanHEALY brand green */
  --sage-deep: #3f5a40;
  --rule: #e0dbd2;
  --line: #ddd6c8;
  --star: #c6bda9;
  --good: #2f7a3a;
  --bad: #a8402f;
  /* Categorical series, validated (CVD + normal-vision + lightness) on --surface. */
  --s1: #3a8a4e; --s2: #2f6fb3; --s3: #c8702a; --s4: #8a5bb8; --s5: #d49a1a; --s6: #b8456a;
  /* Sequential: one sage hue, light to dark. */
  --heat-0: #efece5; --heat-1: #dde8d9; --heat-2: #bcd3b6; --heat-3: #92b68c; --heat-4: #6a9764; --heat-5: #4a7a47; --heat-6: #2f5a31;
  --grid: #ebe7df;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--body); font: 16px/1.5 var(--serif); font-weight: 400; }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -0.005em; }
code { font-size: 13px; background: var(--paper); padding: 1px 5px; border: 1px solid var(--rule); border-radius: 3px; }
.label, .kpi .label, .filters label, .card-head label, th, .tabs button, .eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500;
}

/* ---------- header ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; }
.top-inner { display: flex; align-items: center; gap: 28px; padding: 14px 32px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand img { height: 22px; width: auto; display: block; }
.brand .divider { width: 1px; height: 22px; background: var(--line); }
.brand .product { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; color: var(--sage-deep); }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.tabs button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 10px 12px 8px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--bronze); }
.byline { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.byline img { width: 22px; height: 22px; }
.byline a { color: var(--muted); text-decoration: none; }
.byline a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.banner { margin: 16px 32px 0; padding: 10px 14px; border: 1px dashed var(--bronze); color: var(--bronze); font-style: italic; }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; padding: 22px 32px 0; }
.filters label, .card-head label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
select, input[type=date], input[type=password] {
  font: 15px var(--serif); padding: 7px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink);
}
.compare { font-style: italic; font-size: 14px; color: var(--muted); padding-bottom: 8px; }

/* ---------- layout ---------- */
main { padding: 20px 32px 48px; }
.panel { display: flex; flex-direction: column; gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .grid2 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 20px 22px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.note { color: var(--muted); font-size: 14px; font-style: italic; margin: -6px 0 14px; }
.chart { position: relative; height: 270px; }
.chart.tall { height: 370px; }
.empty p { color: var(--body); max-width: 68ch; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--surface); }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: 16px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: -1px; }
.kpi:nth-child(4n) { border-right: 0; }
.kpi .label { color: var(--muted); }
.kpi .value { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; color: var(--ink); margin: 6px 0 4px; font-variant-numeric: lining-nums tabular-nums; }
.kpi .delta { font-size: 14px; color: var(--muted); font-style: italic; }
.delta .up, .delta .down { font-style: normal; font-family: var(--sans); font-size: 12px; }
.delta .up { color: var(--good); } .delta .down { color: var(--bad); }

/* ---------- insights ---------- */
.insights { border-left: 2px solid var(--sage); }
.insights ul { margin: 0; padding: 0; list-style: none; }
.insights li { margin: 6px 0; padding-left: 20px; position: relative; font-size: 17px; }
.insights li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 9px; height: 9px; background: var(--bronze);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.insights b { color: var(--ink); font-weight: 400; border-bottom: 1px solid var(--star); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
td { color: var(--ink); }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 150px; }
th { color: var(--muted); position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
table.heat td, table.heat th { border: 2px solid var(--surface); text-align: center; min-width: 54px; font-size: 13px; }
table.heat td:first-child, table.heat th:first-child { text-align: left; min-width: 80px; }
table.heat td:nth-child(2), table.heat th:nth-child(2) { text-align: right; min-width: 80px; }
table.heat td.h0 { background: var(--heat-0); } table.heat td.h1 { background: var(--heat-1); }
table.heat td.h2 { background: var(--heat-2); } table.heat td.h3 { background: var(--heat-3); }
table.heat td.h4 { background: var(--heat-4); color: #fff; } table.heat td.h5 { background: var(--heat-5); color: #fff; }
table.heat td.h6 { background: var(--heat-6); color: #fff; }

/* ---------- footer ---------- */
footer { margin: 0 32px; padding: 18px 0 32px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; font-style: italic;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
footer a { color: var(--muted); }

/* ---------- login ---------- */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--rule); padding: 36px 32px 28px; text-align: center; position: relative; overflow: hidden; }
.login-card .orbit { position: absolute; top: -130px; right: -130px; width: 260px; height: 260px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.login-card .orbit.two { top: -90px; right: -90px; width: 180px; height: 180px; border-style: dashed; }
.login-card img.logo { height: 28px; margin-bottom: 6px; }
.login-card h1 { font-size: 24px; font-style: italic; font-weight: 300; color: var(--sage-deep); margin: 4px 0 24px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-card label { color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.login-card button { font: 500 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; cursor: pointer; }
.login-card button:hover { background: var(--sage-deep); }
.login-card .error { color: var(--bad); font-size: 14px; font-style: italic; margin: 0; }
.login-card .byline { justify-content: center; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }

@media (max-width: 640px) {
  .top-inner, .filters, main { padding-left: 16px; padding-right: 16px; }
  .banner { margin: 12px 16px 0; }
  footer { margin: 0 16px; }
  .byline span { display: none; }
}

/* ---------- event notes ---------- */
.events { margin: 0; padding: 0; list-style: none; columns: 2 320px; column-gap: 32px; }
.events li { break-inside: avoid; padding: 6px 0 6px 14px; border-left: 1px solid var(--star); margin-bottom: 8px; font-size: 15px; }
.events .when { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); display: block; }
.tag { font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--star); padding: 1px 5px; margin-left: 6px; border-radius: 2px; vertical-align: 1px; }