@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

/* Cornflower design tokens, generated from tokens.json.
   Light by default; dark follows the computer's setting, or force either with data-theme="light" / "dark" on <html>. */

:root, [data-theme="light"] {
  --paper: #EEF1F7;
  --card: #FFFFFF;
  --rail: #E4E9F2;
  --hover: #E5EAF3;
  --track: #DEE4EE;
  --line: #CDD5E3;
  --line-soft: #DFE5EF;
  --line-strong: #7D889C;
  --ink: #1B2433;
  --muted: #5A6577;
  --cornflower: #6495ED;
  --accent: #3A66CC;
  --accent-tint: #E6EEFC;
  --on-accent: #FFFFFF;
  --good: #2A8C5F;
  --fair: #B07A0C;
  --low: #C2412F;
  --good-ink: #1F6E4A;
  --fair-ink: #8A5D00;
  --low-ink: #A8331F;
  --good-tint: #E3F1EA;
  --fair-tint: #F8EED6;
  --low-tint: #F7E2DE;
  --shadow-card: 0 1px 2px rgba(27, 36, 51, 0.06), 0 4px 16px rgba(27, 36, 51, 0.06);
  --shadow-pop: 0 8px 32px rgba(27, 36, 51, 0.18), 0 2px 6px rgba(27, 36, 51, 0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #10141C;
  --card: #181E29;
  --rail: #0C1017;
  --hover: #1E2533;
  --track: #242B39;
  --line: #2A3242;
  --line-soft: #222A38;
  --line-strong: #6B7891;
  --ink: #E5E9F0;
  --muted: #9AA4B5;
  --cornflower: #6495ED;
  --accent: #6495ED;
  --accent-tint: #1E2B47;
  --on-accent: #0C1017;
  --good: #4CB884;
  --fair: #E3AE3C;
  --low: #E2685A;
  --good-ink: #5CC793;
  --fair-ink: #E3AE3C;
  --low-ink: #F08A7D;
  --good-tint: #1B3329;
  --fair-tint: #352C17;
  --low-tint: #3A211E;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --paper: #10141C;
  --card: #181E29;
  --rail: #0C1017;
  --hover: #1E2533;
  --track: #242B39;
  --line: #2A3242;
  --line-soft: #222A38;
  --line-strong: #6B7891;
  --ink: #E5E9F0;
  --muted: #9AA4B5;
  --cornflower: #6495ED;
  --accent: #6495ED;
  --accent-tint: #1E2B47;
  --on-accent: #0C1017;
  --good: #4CB884;
  --fair: #E3AE3C;
  --low: #E2685A;
  --good-ink: #5CC793;
  --fair-ink: #E3AE3C;
  --low-ink: #F08A7D;
  --good-tint: #1B3329;
  --fair-tint: #352C17;
  --low-tint: #3A211E;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --content-max: 1180px;
  --sidebar-width: 264px;
  --topbar-height: 60px;
  --focus-width: 3px;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Barlow", system-ui, sans-serif;
}

/* Text styles */
.page-title { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 700; }
.stat { font-family: var(--font-display); font-size: 52px; line-height: 1; font-weight: 700; }
.score-xl { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 700; }
.heading { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 700; }
.gauge-value { font-family: var(--font-display); font-size: 26px; line-height: 1; font-weight: 700; }
.item-name { font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 600; }
.section { font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 600; }
.points { font-family: var(--font-display); font-size: 18px; line-height: 1.25; font-weight: 700; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 500; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }
.meta { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.3; font-weight: 500; }

/* Components */

/* Cornflower components. Every color, size, and radius comes from tokens.css. Classes are prefixed cf-. */

body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
.cf-num, .cf-display { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: 2px; }
.cf-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cf-stack { display: grid; gap: var(--space-3); }

/* Bands: set --band and --band-ink on a wrapper */
.cf-good { --band: var(--good); --band-ink: var(--good-ink); --band-tint: var(--good-tint); }
.cf-fair { --band: var(--fair); --band-ink: var(--fair-ink); --band-tint: var(--fair-tint); }
.cf-low  { --band: var(--low);  --band-ink: var(--low-ink);  --band-tint: var(--low-tint); }

/* Card */
.cf-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }

/* Button */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font: 500 15px/1.2 var(--font-sans); cursor: pointer;
}
.cf-btn:hover { background: var(--hover); }
.cf-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cf-btn-primary:hover { background: var(--accent); filter: brightness(0.92); }
.cf-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.cf-btn-ghost:hover { color: var(--ink); }
.cf-btn-danger { color: var(--low-ink); }
.cf-btn-confirming { background: var(--low); border-color: var(--low); color: var(--card); }
.cf-btn-sm { padding: 5px 10px; font-size: 14px; border-radius: var(--radius-sm); }
.cf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Segmented control: the active option inverts to ink */
.cf-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cf-seg button { border: 0; background: transparent; color: var(--muted); padding: 5px 12px; border-radius: 7px; font: 500 14px/1.4 var(--font-sans); cursor: pointer; }
.cf-seg button:hover { color: var(--ink); }
.cf-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Text field */
.cf-field { display: grid; gap: 6px; }
.cf-field > span { font: 500 14px/1.4 var(--font-sans); }
.cf-field .cf-hint { font-size: 13px; color: var(--muted); }
.cf-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 400 16px/1.4 var(--font-sans);
}
.cf-input::placeholder { color: var(--muted); }
.cf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cf-input[aria-invalid="true"] { border-color: var(--low); }
.cf-error { font-size: 13.5px; color: var(--low-ink); }

/* Tag */
.cf-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--track); color: var(--muted); font: 500 12.5px/1.4 var(--font-sans); }
.cf-tag-accent { background: var(--accent-tint); color: var(--accent); }
.cf-tag.cf-good, .cf-tag.cf-fair, .cf-tag.cf-low { background: var(--band-tint); color: var(--band-ink); }

/* Score chip: a dot and a number, or a tinted pill */
.cf-score { display: inline-flex; align-items: center; gap: 5px; font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--band-ink); }
.cf-score::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--band); }
.cf-score-pill { display: inline-flex; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--band-tint); color: var(--band-ink); font: 600 14px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }

/* Check button */
.cf-check {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--line-strong); background: var(--card); color: transparent; cursor: pointer;
}
.cf-check:hover { border-color: var(--good); }
.cf-check[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: var(--card); }
.cf-check svg { width: 13px; height: 13px; }

/* Gauge: vertical tube, 34 x 170, fills from the bottom */
.cf-gauge-col { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cf-gauge-col .cf-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--band-ink); }
.cf-gauge { position: relative; width: 34px; height: 170px; border-radius: 17px; background: var(--track); overflow: hidden; }
.cf-gauge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--card), var(--card)) 0 25% / 9px 1.5px no-repeat,
    linear-gradient(var(--card), var(--card)) 0 50% / 9px 1.5px no-repeat,
    linear-gradient(var(--card), var(--card)) 0 75% / 9px 1.5px no-repeat;
}
.cf-gauge > i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--pct, 0%); background: var(--band); border-radius: 17px; animation: cf-rise .9s ease-out both; }
@keyframes cf-rise { from { height: 0; } }

/* Score dial: 132px ring, 12px stroke, from 12 o'clock */
.cf-dial { position: relative; width: 132px; height: 132px; }
.cf-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cf-dial .cf-track { stroke: var(--track); }
.cf-dial .cf-arc { stroke: var(--band); }
.cf-dial .cf-val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.cf-dial .cf-val small { display: block; font: 500 12px/1.2 var(--font-sans); color: var(--muted); margin-top: 3px; }

/* Segmented bar: one segment per scored part, width = its max, fill = earned */
.cf-segbar { display: flex; gap: 3px; height: 14px; width: 100%; }
.cf-segbar > span { position: relative; height: 100%; border-radius: 4px; background: var(--track); overflow: hidden; }
.cf-segbar > span > i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--band); border-radius: 4px; }

/* Fix list */
.cf-fixes { display: grid; gap: 8px; }
.cf-fix { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--paper); }
.cf-fix .cf-pts { font: 700 18px/1.25 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.cf-fix .cf-act { font-weight: 500; line-height: 1.35; }
.cf-fix .cf-why { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.cf-all-good { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--good-tint); color: var(--good-ink); font-weight: 500; }

/* Item card: band stripe on the left, score and bar, fixes on the right */
.cf-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-5);
  padding: 18px 20px 18px 18px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--band); border-radius: var(--radius-lg);
}
.cf-item .cf-name { font: 600 21px/1.2 var(--font-display); }
.cf-item .cf-meta { font-size: 14px; color: var(--muted); }
.cf-item .cf-big { font: 700 40px/1 var(--font-display); color: var(--band-ink); font-variant-numeric: tabular-nums; }
.cf-item .cf-big small { font-size: 18px; color: var(--muted); font-weight: 600; margin-left: 2px; }
@media (max-width: 760px) { .cf-item { grid-template-columns: minmax(0, 1fr); } }

/* Toast */
.cf-toast { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-pop); font-size: 15px; }
.cf-toast button { border: 0; background: transparent; color: inherit; font: 600 15px var(--font-sans); text-decoration: underline; cursor: pointer; }
.cf-toast-error { background: var(--low-tint); color: var(--low-ink); box-shadow: inset 0 0 0 1px var(--low), var(--shadow-pop); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }