/* KLH Scorecard site: design tokens and components. BEM names, mobile first. */

:root {
  --color-ground: #f3f6f8;
  --color-surface: #ffffff;
  --color-ink: #14202a;
  --color-muted: #4a5b67;
  --color-line: #d9e1e7;
  --color-line-soft: #edf1f4;
  --color-accent: #3f738d;
  --color-accent-ink: #ffffff;
  --color-side: #14202a;
  --color-side-ink: #e6edf2;
  --color-side-muted: #9fb2bf;
  --color-side-raised: #1c2d3a;
  --color-side-border: #3a4c5a;
  --color-side-link: #c9d6df;
  --color-side-strong: #ffffff;
  --color-warn-bg: #fff4d6;
  --color-warn-line: #e5c466;
  --color-warn-ink: #5e4200;
  --color-bad-bg: #fde4e2;
  --color-bad-line: #e58a85;
  --color-bad-ink: #7a1411;
  --color-ok-bg: #e3f3e5;
  --color-ok-ink: #1f5a29;
  --color-info-bg: #eaf2f6;
  --color-info-ink: #1f4458;
  --radius: 8px;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figures: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ground: #0e161d;
    --color-surface: #16212b;
    --color-ink: #e6edf2;
    --color-muted: #a9bac5;
    --color-line: #2b3b48;
    --color-line-soft: #223039;
    --color-accent: #5b9bb8;
    --color-accent-ink: #0e161d;
    --color-side: #0a1117;
    --color-warn-bg: #3a2f10;
    --color-warn-line: #8a6d1d;
    --color-warn-ink: #f3dca0;
    --color-bad-bg: #3b1a19;
    --color-bad-line: #a3433e;
    --color-bad-ink: #f6c4c1;
    --color-ok-bg: #173320;
    --color-ok-ink: #a9dcb3;
    --color-info-bg: #162a36;
    --color-info-ink: #b6d6e6;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--color-ink);
  background: var(--color-ground);
  line-height: 1.45;
}

a { color: var(--color-accent); }
.num { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.hint { margin: 0; font-size: 0.8125rem; color: var(--color-muted); }
.subhead { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.code { margin: 0; padding: 0.5rem; background: var(--color-ground); border-radius: 6px; font-size: 0.8125rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; inset-inline-start: -999px; }
.skip-link:focus { inset-inline-start: 0.5rem; inset-block-start: 0.5rem; z-index: 10; padding: 0.5rem 1rem; background: var(--color-surface); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Shell */
.shell { display: flex; flex-direction: column; min-block-size: 100vh; }
.shell__sidebar {
  display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem;
  background: var(--color-side); color: var(--color-side-ink);
}
.shell__main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }

@media (min-width: 56rem) {
  .shell { flex-direction: row; }
  .shell__sidebar { flex: 0 0 15rem; padding: 1.5rem 1rem; }
}

.brand { display: flex; align-items: center; gap: 0.625rem; padding-inline: 0.5rem; }
.brand__mark {
  display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: 6px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700;
}
.brand__name { font-weight: 700; font-size: 1.0625rem; }

.switcher { display: flex; flex-wrap: wrap; gap: 0.375rem; padding-inline: 0.25rem; }
.switcher__label { flex-basis: 100%; padding-inline: 0.25rem; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-side-muted); }
.switcher__select {
  flex: 1; min-inline-size: 0; min-block-size: 2.75rem; padding-inline: 0.75rem; font: inherit;
  color: var(--color-side-strong); background: var(--color-side-raised);
  border: 1px solid var(--color-side-border); border-radius: 6px;
}

.nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: flex; align-items: center; gap: 0.75rem; min-block-size: 2.75rem; padding-inline: 0.75rem;
  border-radius: 6px; color: var(--color-side-link); text-decoration: none;
}
.nav__link:hover { background: var(--color-side-raised); }
.nav__link--current { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }

.user-chip { margin-block-start: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius); background: var(--color-side-raised); font-size: 0.8125rem; }
.user-chip__name { font-weight: 600; color: var(--color-side-strong); }
.user-chip__meta { color: var(--color-side-muted); }

/* Page header and content */
.page-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: var(--color-surface); border-block-end: 1px solid var(--color-line);
}
.page-header__text { flex: 1 1 16rem; min-inline-size: 0; }
.page-header__crumb { margin: 0; font-size: 0.8125rem; color: var(--color-muted); }
.page-header__title { margin: 0.125rem 0 0; font-size: 1.5rem; line-height: 1.2; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.content { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
@media (min-width: 56rem) { .content, .page-header { padding-inline: 2rem; } }

.messages { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

/* Cards, split layout */
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); min-inline-size: 0; }
.card__header { padding: 0.875rem 1rem; border-block-end: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; }
.card__title { margin: 0; font-size: 1.0625rem; }
.card__note { margin: 0; font-size: 0.875rem; color: var(--color-muted); }
.card__body { padding: 1rem; }
.card__footer { padding: 0.875rem 1rem; border-block-start: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 0.5rem; }

.split { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.split__main { flex: 999 1 38rem; }
.split__aside { flex: 1 1 18rem; }

/* Buttons and fields */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-block-size: 2.75rem; padding-inline: 1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 6px;
}
.btn--primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.btn--danger { color: var(--color-bad-ink); border-color: var(--color-bad-ink); }
.btn--on-dark { color: var(--color-side-strong); background: var(--color-side-raised); border-color: var(--color-side-border); }
.btn--small { min-block-size: 2.75rem; font-size: 0.8125rem; }
.btn--icon { inline-size: 2.75rem; padding-inline: 0; font-size: 1.25rem; }
.btn--wide { inline-size: 100%; justify-content: space-between; text-align: start; }
.btn[disabled] { cursor: not-allowed; opacity: 0.6; }

.field__input { min-block-size: 2.75rem; padding-inline: 0.75rem; font: inherit; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 6px; }
.field__label { font-weight: 600; }
textarea.field__input { padding-block: 0.625rem; inline-size: 100%; resize: vertical; }
.month-picker { display: flex; align-items: center; gap: 0.25rem; }

/* Pills, banners, tags, cells */
.pill { display: inline-flex; align-items: center; min-block-size: 2rem; padding-inline: 0.75rem; border-radius: 1rem; font-weight: 600; font-size: 0.875rem; }
.pill--open { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.pill--closed { background: var(--color-info-bg); color: var(--color-info-ink); }

.banner { padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--color-info-bg); color: var(--color-info-ink); }
.banner--warning { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.banner--error { background: var(--color-bad-bg); color: var(--color-bad-ink); }
.banner--success { background: var(--color-ok-bg); color: var(--color-ok-ink); }

.tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 600; background: var(--color-info-bg); color: var(--color-info-ink); }
.tag--ok { background: var(--color-ok-bg); color: var(--color-ok-ink); }
.tag--missing { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.tag--bad { background: var(--color-bad-bg); color: var(--color-bad-ink); }

.cell { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; border: 0; background: none; font: inherit; color: inherit; }
.cell--na { color: var(--color-muted); }
.cell--missing { background: var(--color-warn-bg); color: var(--color-warn-ink); border: 1px solid var(--color-warn-line); font-weight: 600; font-size: 0.8125rem; }
.cell--flagged { background: var(--color-bad-bg); color: var(--color-bad-ink); border: 1px solid var(--color-bad-line); }
.cell__link { cursor: pointer; min-block-size: 2.75rem; text-decoration: underline dotted; text-underline-offset: 4px; }
.cell--flagged.cell__link { text-decoration: none; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--color-muted); }

/* Tables */
.table__scroll { overflow-x: auto; }
.table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.table--grid { min-inline-size: 48rem; }
.table th, .table td { padding: 0.625rem 0.875rem; border-block-end: 1px solid var(--color-line-soft); text-align: start; vertical-align: top; }
.table thead th { background: var(--color-ground); font-weight: 600; border-block-end: 1px solid var(--color-line); }
.table__label { position: sticky; inset-inline-start: 0; background: var(--color-surface); min-inline-size: 12.5rem; font-weight: 400; }
thead .table__label { background: var(--color-ground); font-weight: 600; }
.table th.table__num, .table td.table__num { text-align: end; white-space: nowrap; }
.table__sub { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-muted); }
.table th.table__section { background: var(--color-line-soft); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }

/* Plain pages (sign-in) */
.plain { display: grid; place-items: center; min-block-size: 100vh; padding: 1rem; }
.plain__panel { inline-size: min(34rem, 100%); padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.plain__title { margin-block: 0 0.5rem; }
.plain__note { color: var(--color-muted); }
.plain__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.plain__meta { font-weight: 400; color: var(--color-muted); font-size: 0.8125rem; }

/* Methodology flow */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0; padding: 1rem; list-style: none; }
.flow__step { padding: 0.75rem; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.flow__step--highlight { background: var(--color-info-bg); }
.flow__number { margin: 0; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.flow__title { margin: 0.125rem 0 0.375rem; font-size: 1rem; }
.bullets { margin: 0; padding-inline-start: 2rem; display: flex; flex-direction: column; gap: 0.625rem; }

/* Gates */
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-block-end: 1px solid var(--color-line-soft); }
.gate__status { flex: 0 0 8rem; }
.gate__body { flex: 1 1 16rem; min-inline-size: 0; }
.gate__name { margin: 0; font-weight: 600; }
.gate__observed { margin: 0; font-size: 0.8125rem; }
.gate__action { padding: 1rem; background: var(--color-ground); border-block-end: 1px solid var(--color-line); }

/* Inputs */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.steps__item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.steps__num { flex: 0 0 1.75rem; display: grid; place-items: center; block-size: 1.75rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.steps__title { margin: 0; font-weight: 600; }
.upload-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.upload-form:has(#workbook:focus-visible) label[for="workbook"] { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.coverage { margin: 0; padding: 0; list-style: none; }
.coverage__item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-block-start: 1px solid var(--color-line-soft); }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.table--wide { min-inline-size: 48rem; }
.table__sub--warn { color: var(--color-warn-ink); }