:root,
[data-theme="graphite-amber"] {
  --navy: #12141a;
  --blue: #0f766e;
  --accent: #f5a524;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #15171c;
  --muted: #5c6570;
  --line: #e2e5ea;
  --surface-soft: #eef1f4;
  --evidence: #0d9488;
  --chip-bg: #eef1f4;
  --chip-ink: #1e4f4a;
  --score-bg: #fff6e5;
  --score-ink: #8a5a00;
  --hero-end: #1a2e2b;
  --bg-glow: rgba(245, 165, 36, 0.10);
  --bg-top: #f7f8fa;
  --bg-bottom: #eceff3;
  --drawer-brand: #1a2220;
  --col-header: #0f766e;
  --shadow: rgba(18, 20, 26, 0.08);
}

[data-theme="cold-steel"] {
  --navy: #0b1220;
  --blue: #0284c7;
  --accent: #38bdf8;
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface-soft: #f1f5f9;
  --evidence: #0284c7;
  --chip-bg: #e2e8f0;
  --chip-ink: #0f172a;
  --score-bg: #e0f2fe;
  --score-ink: #075985;
  --hero-end: #1e293b;
  --bg-glow: rgba(56, 189, 248, 0.12);
  --bg-top: #f8fafc;
  --bg-bottom: #eef2f7;
  --drawer-brand: #0f172a;
  --col-header: #0369a1;
  --shadow: rgba(15, 23, 42, 0.08);
}

[data-theme="forest"] {
  --navy: #0f1f17;
  --blue: #166534;
  --accent: #84cc16;
  --bg: #f3f4f2;
  --card: #ffffff;
  --ink: #14201a;
  --muted: #5b6b61;
  --line: #dde3de;
  --surface-soft: #e9eee9;
  --evidence: #15803d;
  --chip-bg: #ecfdf3;
  --chip-ink: #14532d;
  --score-bg: #f7fee7;
  --score-ink: #3f6212;
  --hero-end: #1a3d2b;
  --bg-glow: rgba(132, 204, 22, 0.12);
  --bg-top: #f6f7f4;
  --bg-bottom: #e8ebe6;
  --drawer-brand: #143024;
  --col-header: #166534;
  --shadow: rgba(15, 31, 23, 0.08);
}

[data-theme="classic"] {
  --navy: #1a1a2e;
  --blue: #1e90ff;
  --accent: #5b9bd5;
  --bg: #f3f5f8;
  --card: #ffffff;
  --ink: #1c2434;
  --muted: #667085;
  --line: #e6eaf0;
  --surface-soft: #f7f9fc;
  --evidence: #3498db;
  --chip-bg: #f0f4ff;
  --chip-ink: #1a1a2e;
  --score-bg: #eef5ff;
  --score-ink: #1e4f9a;
  --hero-end: #2c3e6b;
  --bg-glow: rgba(91, 155, 213, 0.18);
  --bg-top: #eef3f9;
  --bg-bottom: #e8edf5;
  --drawer-brand: #2c3e6b;
  --col-header: #1e90ff;
  --shadow: rgba(26, 26, 46, 0.08);
}

[data-theme="crimson-black"] {
  --navy: #0a0a0a;
  --blue: #b91c1c;
  --accent: #e11d48;
  --bg: #f6f4f4;
  --card: #ffffff;
  --ink: #141010;
  --muted: #6b5f5f;
  --line: #e8e0e0;
  --surface-soft: #f3ecec;
  --evidence: #be123c;
  --chip-bg: #ffe4e6;
  --chip-ink: #9f1239;
  --score-bg: #fff1f2;
  --score-ink: #9f1239;
  --hero-end: #3f0a14;
  --bg-glow: rgba(225, 29, 72, 0.12);
  --bg-top: #faf7f7;
  --bg-bottom: #eee8e8;
  --drawer-brand: #14080a;
  --col-header: #b91c1c;
  --shadow: rgba(10, 10, 10, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, var(--bg-glow), transparent 42%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 50%, var(--bg-bottom) 100%);
  color: var(--ink);
  min-height: 100vh;
}
.topnav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: white;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: nowrap;
  border-top: 3px solid var(--accent);
  min-height: 56px;
}
.nav-start {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.topnav a { color: #ccc; text-decoration: none; margin-left: 12px; font-size: 14px; white-space: nowrap; }
.topnav a:hover { color: white; }
.topnav a.nav-active {
  color: white;
  font-weight: 700;
  padding: 6px 12px;
  margin-left: 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, white);
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.topnav a.nav-active:hover {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}
.brand { display: flex; align-items: center; gap: 10px; color: white !important; font-weight: 700; margin-left: 0 !important; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

.nav-menu { position: relative; display: inline-block; }
.nav-menu summary { color: #ccc; cursor: pointer; font-size: 14px; margin-left: 12px; white-space: nowrap; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " ▾"; font-size: 11px; }
.nav-menu[open] summary, .nav-menu summary:hover { color: white; }
/* Marks the group containing the current page without forcing its panel open. Highlighting the
   section and expanding the menu are separate concerns; conflating them is what left several
   menus visibly open at once on admin pages. */
.nav-menu.nav-group-active > summary { color: white; font-weight: 600; }
.nav-menu-panel { background: #1d2433; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,.3); min-width: 180px; padding: 6px; position: absolute; right: 0; top: 26px; z-index: 20; }
.nav-menu-panel a, .nav-logout-form button { box-sizing: border-box; color: #e8edf7; display: block; font: inherit; margin: 0; padding: 8px 10px; text-align: left; text-decoration: none; width: 100%; }
.nav-menu-panel a:hover, .nav-logout-form button:hover { background: rgba(255,255,255,.12); color: white; }
.nav-logout-form { margin: 0; }
.nav-logout-form button { background: transparent; border: 0; cursor: pointer; }

.user-info { font-size: 13px; color: #aaa; margin: 0 8px 0 12px; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* Shared page branding (login, dashboard, library) */
.page-brand-hero {
  margin: 0 0 12px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--drawer-brand) 88%, black) 0%, var(--drawer-brand) 55%, color-mix(in srgb, var(--drawer-brand) 82%, white) 100%);
  border: 1px solid color-mix(in srgb, white 12%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.page-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
}
.page-brand-logo {
  height: 88px;
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.page-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  color: white;
  line-height: 1.15;
}
.page-brand-name {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page-brand-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, white 88%, transparent);
}
.page-brand-page {
  margin: 0 0 0 auto;
  padding: 8px 14px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  line-height: 1;
  border-radius: 999px;
  background: color-mix(in srgb, white 14%, transparent);
  border: 1px solid color-mix(in srgb, white 18%, transparent);
}

.login-page {
  width: 100%;
  max-width: 520px;
  margin: 32px auto 48px;
  position: relative;
  z-index: 1;
}
.login-brand-hero {
  margin-bottom: 16px;
}
.login-card {
  margin-bottom: 0;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
  background: #eef0f3;
  border-color: color-mix(in srgb, var(--line) 70%, #c5cad3);
  color: var(--ink);
}
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="email"]:focus {
  background: #f5f6f8;
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.login-lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.login-submit {
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
}

/* Full-bleed court backdrop on login */
body.login-body {
  min-height: 100dvh;
  background-color: #1a1612;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--drawer-brand) 72%, transparent) 0%,
      color-mix(in srgb, #0a0a0a 55%, transparent) 45%,
      color-mix(in srgb, #0a0a0a 70%, transparent) 100%
    ),
    url("/img/login-court-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.login-body .topnav {
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.login-body .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .login-page {
    margin: 16px auto 32px;
  }
  .page-brand {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }
  .page-brand-logo {
    height: 64px;
  }
  .page-brand-page {
    margin-left: 0;
  }
  body.login-body {
    background-attachment: scroll;
  }
}

h1, h2 { color: var(--navy); margin-bottom: 16px; }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px;
  text-decoration: none; font-size: 14px; cursor: pointer; border: none;
}
.btn-primary { background: var(--navy); color: white; }
.btn-secondary { background: var(--blue); color: white; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-wide { padding-left: 36px; padding-right: 36px; white-space: nowrap; }
/* Every backward navigation action uses the same compact icon-only control: a solid circle in
   the active theme's brand color, so "back" reads as one consistent, themed control everywhere
   rather than blending into whatever button style happened to be nearby. The visually hidden
   label remains available to screen readers while the fixed touch target works on phones. */
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.back-link:hover, .back-link:focus-visible {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px var(--surface-soft);
}
.back-link span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.back-icon { flex: 0 0 auto; display: block; height: 22px; width: 22px; }
.page-back-row { height: 44px; margin: -10px 0 6px; }
.card {
  background: var(--card);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow);
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.flash-success { background: #d4edda; color: #155724; }
.flash-error { background: #f8d7da; color: #721c24; }
/* Between success and error: the possible-duplicate prompt is not a failure — nothing was refused,
   the person was asked a question only they can answer. */
.flash-warn { background: #fff3cd; color: #664d03; }
.flash-warn a { color: inherit; }

/* ---------------------------------------------------------------------------------------------
   Components the admin views have always used and that were never styled.
   `.muted`, `.alert`, `.fs-card`, `.fs-panel` and `.fs-row-current` appear across the admin
   pages; none of them had a rule, so explanatory text rendered at the same weight as the data
   it explains and a warning saying "AI calls will fail" looked like ordinary body copy. Colours
   come from the theme tokens, so these follow every theme rather than pinning one.
   --------------------------------------------------------------------------------------------- */

/* Secondary prose: present, subordinate, skippable. The admin pages carry a lot of rationale
   and this is what keeps it from competing with the numbers. */
.muted { color: var(--muted); font-size: 14px; }
td .muted, th .muted, .muted .muted { font-size: 13px; }

/* Standing notices, as opposed to .flash which reports what a submit just did. The left rule
   carries the severity so the box stays quiet when it is only informational. */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: var(--surface-soft);
  color: var(--ink);
}
.alert-success { background: #d4edda; color: #155724; border-color: #b7dfc2; border-left-color: #1e7e34; }
.alert-danger { background: #f8d7da; color: #721c24; border-color: #efc2c7; border-left-color: #a71d2a; }
.alert-warning { background: #fff3cd; color: #664d03; border-color: #efe0ae; border-left-color: #b8860b; }
.alert a { color: inherit; }

/* Card grid used by the landing pages to make sibling choices scannable. */
.fs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.fs-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 20px 22px;
}
.fs-card > h2, .fs-card > h3 { margin-top: 0; }
.fs-card > :last-child { margin-bottom: 0; }

details.fs-panel { padding: 0; }
details.fs-panel > summary {
  cursor: pointer;
  padding: 12px 20px;
  list-style-position: inside;
  border-radius: 10px;
}
details.fs-panel[open] > summary { border-bottom: 1px solid var(--line); }
details.fs-panel > :not(summary) { padding: 0 20px; }
details.fs-panel[open] > ul { padding: 12px 20px 16px 40px; }

/* A quieter box than a card: supporting notes that belong beside content, not above it. */
.fs-panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.fs-panel > :first-child { margin-top: 0; }
.fs-panel > :last-child { margin-bottom: 0; }

/* Tables wide enough to need scrolling on a phone rather than squeezing columns to nothing. */
.fs-table { display: table; }
.fs-table-wrap { overflow-x: auto; }
.fs-table thead th { background: var(--surface-soft); white-space: nowrap; }

/* The row describing the thing currently in effect. */
.fs-row-current > td { background: var(--score-bg); color: var(--score-ink); }
.fs-row-current > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Lets one control or note run the full width of an .admin-create-grid. */
.fs-span-2 { grid-column: 1 / -1; }

/* A bare button is a grid item, so it stretches to its whole column and reads as a banner
   rather than a control. Scoped to cards so the other 25 create-grids keep their layout. */
.fs-card .admin-create-grid > button { justify-self: start; }

/* Primary and destructive side by side, with the quiet one clearly subordinate. */
.fs-form-actions { display: flex; gap: 10px; align-items: center; }
.btn-quiet {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.btn-quiet:hover { color: #a71d2a; border-color: #a71d2a; }

/* Money is compared down a column, so it aligns right on the decimal, in tabular figures so
   the digits line up between rows. Left-aligned currency is the single thing that made the
   cost table hard to read. */
.fs-table td.num, .fs-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fs-table td.nowrap, .fs-table th.nowrap { white-space: nowrap; }

/* Meter for a consumed-against-a-ceiling figure, which a table row communicates poorly. */
.fs-meter {
  max-width: 320px;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 8px 0 4px;
}
.fs-meter > span { display: block; height: 100%; min-width: 3px; background: var(--evidence); border-radius: 999px; }
.fs-meter-warn > span { background: var(--accent); }
.fs-meter-over > span { background: #a71d2a; }
.fs-figure { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.fs-figure-sub { color: var(--muted); font-size: 13px; }

/* Dashboard-card furniture: an eyebrow label instead of a competing heading, a divider between
   the reading half and the acting half, and a footnote pinned to the bottom so sibling cards in
   a row keep their footers aligned regardless of content height. */
.fs-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fs-card-divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; width: 100%; }
.fs-card-foot { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 13px; }
.fs-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* A model that was withdrawn rather than never offered. Collapsed by default so the reason is
   available without competing with the choice the administrator is actually making. */
.fs-withheld { margin-top: 12px; font-size: 13px; }
.fs-withheld > summary { color: var(--muted); cursor: pointer; }
.fs-withheld > summary:hover { color: inherit; }
.fs-withheld > p { margin: 8px 0 0; line-height: 1.5; }
.fs-card-head > h3 { margin: 0; }

/* A control and its submit on one line, the control taking the room. */
.fs-input-row { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.fs-input-row > input, .fs-input-row > select { flex: 1; min-width: 0; margin-bottom: 0; }
.fs-input-row > .btn { flex: 0 0 auto; white-space: nowrap; }

/* Status pills. Same palette as the flash messages so state and feedback speak one language. */
.fs-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.fs-badge-ok { background: #d4edda; color: #155724; }
.fs-badge-warn { background: #fff3cd; color: #664d03; }
.fs-badge-muted { background: var(--chip-bg); color: var(--chip-ink); }

/* The key-status list in the overview card. */
.fs-key-rows { display: flex; flex-direction: column; gap: 8px; }
.fs-key-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Admin data tables. One shared shape for search terms, model selection, and API keys. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 10px 0 6px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.data-table tr.is-muted td { opacity: 0.55; }
/* The row currently in effect: readable at a glance without scanning the buttons column. */
.data-table tr.is-current td { background: color-mix(in srgb, #155724 6%, transparent); }
.data-table td form { margin: 0; display: inline; }

/* Sortable headers: real buttons for keyboard use, with the active direction shown. */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable[aria-sort="ascending"]::after { content: " ▲"; }
.data-table th.sortable[aria-sort="descending"]::after { content: " ▼"; }

/* A card that is mostly a table: the table runs edge to edge, with the card's padding carried
   by the first and last columns, and the footnotes live in a bordered footer. */
.fs-table-card { padding: 0; overflow: hidden; }
.fs-table-card th:first-child, .fs-table-card td:first-child { padding-left: 22px; }
.fs-table-card th:last-child, .fs-table-card td:last-child { padding-right: 22px; }
.fs-table-card-foot { padding: 12px 22px 16px; border-top: 1px solid var(--line); }
.fs-table-card-foot > p { margin-top: 0; }
.fs-table-card-foot details.fs-panel { margin: 8px 0 0; }
.fs-table tbody tr:hover > td { background: var(--surface-soft); }
.fs-table tbody tr.fs-row-current:hover > td { background: var(--score-bg); }

/* AI settings is a decision page for business administrators. Restore the vertical rhythm removed
   by the global reset, keep actions comfortably clickable, and separate status from detail without
   changing the shared admin components used by other screens. */
.ai-settings-page {
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1180px;
}
.ai-settings-header { margin-bottom: 24px; }
.ai-settings-eyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ai-settings-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.ai-settings-header p { font-size: 15px; margin: 0; max-width: 720px; }
.ai-settings-page > h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  line-height: 1.25;
  margin: 36px 0 8px;
}
.ai-settings-page > h2 + .muted {
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 860px;
}
.ai-settings-page .alert { line-height: 1.5; margin-bottom: 20px; }
.ai-settings-page .fs-card-grid { gap: 20px; margin-bottom: 24px; }
.ai-settings-page .fs-card { line-height: 1.45; padding: 24px; }
.ai-settings-page .fs-card-divider { margin: 20px 0 16px; }
.ai-settings-page .fs-card-foot { line-height: 1.5; padding-top: 16px; }
.ai-settings-page .fs-input-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.ai-settings-page .fs-input-row > input,
.ai-settings-page .fs-input-row > select {
  width: 100%;
}
.ai-settings-page .fs-input-row > input,
.ai-settings-page .fs-input-row > select,
.ai-settings-page .fs-input-row > .btn {
  min-height: 44px;
}
.ai-settings-page #modelWhy { line-height: 1.5; margin: 12px 0 0; }
.ai-settings-page .fs-key-rows { gap: 0; }
.ai-settings-page .fs-key-row { border-bottom: 1px solid var(--line); padding: 10px 0; }
.ai-settings-page .fs-key-row:first-child { padding-top: 2px; }
.ai-settings-page .fs-key-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.ai-settings-page .fs-panel { line-height: 1.55; }
.ai-settings-page details.fs-panel li + li { margin-top: 10px; }
.ai-shared-costs {
  align-items: center;
  display: grid;
  gap: 18px 28px;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 1.5fr);
}
.ai-shared-costs h3 { font-size: 16px; margin: 0 0 4px; }
.ai-shared-costs dl {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  margin: 0;
}
.ai-shared-costs dl > div { border-left: 1px solid var(--line); padding-left: 14px; }
.ai-shared-costs dt { color: var(--muted); font-size: 12px; }
.ai-shared-costs dd { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 700; margin: 3px 0 0; }
.ai-shared-costs .ai-shared-cost-total { border-left-color: var(--accent); }
.ai-settings-page .fs-card-head { margin-bottom: 14px; }
.ai-settings-page .fs-card-head + .muted { margin: -4px 0 18px; }
.ai-settings-page .admin-create-grid { gap: 16px; }
.ai-settings-page .admin-create-grid label { margin-bottom: 0; }
.ai-settings-page .admin-create-grid input { margin-bottom: 0; min-height: 44px; }
.ai-settings-page .fs-form-actions { flex-wrap: wrap; padding-top: 2px; }
.ai-settings-page .fs-form-actions .btn { min-height: 44px; }
.ai-settings-page .fs-table-card { padding: 0; }
.ai-settings-page .fs-table-card-foot { line-height: 1.55; padding-bottom: 20px; padding-top: 16px; }

@media (max-width: 640px) {
  .ai-settings-page .fs-card-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-settings-page .fs-card { padding: 20px; }
  .ai-settings-page .fs-input-row > .btn,
  .ai-settings-page .fs-form-actions .btn { text-align: center; width: 100%; }
  .ai-settings-page .fs-key-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .ai-settings-page .fs-table-card th:first-child,
  .ai-settings-page .fs-table-card td:first-child { padding-left: 16px; }
  .ai-settings-page .fs-table-card th:last-child,
  .ai-settings-page .fs-table-card td:last-child { padding-right: 16px; }
  .ai-settings-page .fs-table-card-foot { padding-left: 16px; padding-right: 16px; }
  .ai-shared-costs { align-items: stretch; grid-template-columns: 1fr; }
  .ai-shared-costs dl { grid-template-columns: 1fr; }
  .ai-shared-costs dl > div { padding-bottom: 4px; }
}
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
input, select, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; margin-bottom: 14px; font-family: inherit; background: var(--card); color: var(--ink);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

.meta { color: var(--muted); font-size: 13px; margin-top: 4px; }

.profile-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  background: linear-gradient(135deg, var(--navy), var(--hero-end));
  color: white; border-radius: 16px; padding: 28px; margin-bottom: 20px;
}
.profile-hero-with-avatar { align-items: start; }
.profile-hero-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  font-size: 32px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.profile-identity { min-width: 0; }
.profile-identity h1 { color: white; margin-bottom: 8px; overflow-wrap: anywhere; }
.profile-secondary-meta { opacity: .85; }
.profile-primary-meta, .profile-secondary-meta { overflow-wrap: anywhere; }
.profile-secondary-meta { margin-top: 6px; }
.scouting-report-card { margin-bottom: 20px; }
.scouting-report-head { margin-bottom: 12px; }
.scouting-report-head h2 { margin-bottom: 4px; }
.scouting-report-count {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
  font-size: 0.72em;
  font-weight: 600;
  white-space: nowrap;
}
.scouting-report-navigation {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin: -4px 0 20px;
}
.scouting-report-navigation .meta { margin: 0 4px; }
.scouting-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.scouting-characteristics {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 16px 0 22px;
  padding: 16px;
}
.scouting-characteristics-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.scouting-characteristics-heading h3 {
  color: var(--navy);
  font-size: 17px;
  margin: 0;
}
.scouting-characteristics-heading p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.scouting-characteristic-groups {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.scouting-characteristic-group h4 {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .07em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.scouting-characteristic-group ul { list-style: none; margin: 0; padding: 0; }
.scouting-characteristic-group li { margin: 0 0 10px; }
.scouting-characteristic-group li:last-child { margin-bottom: 0; }
.scouting-characteristic-label {
  align-items: baseline;
  display: flex;
  font-size: 13px;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 3px;
}
.scouting-characteristic-label strong { color: var(--ink); font-size: 14px; white-space: nowrap; }
.scouting-characteristic-label small { color: var(--muted); font-size: 11px; font-weight: 500; }
.scouting-characteristic-group progress {
  appearance: none;
  background: color-mix(in srgb, var(--line) 72%, transparent);
  border: 0;
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
  width: 100%;
}
.scouting-characteristic-group progress::-webkit-progress-bar {
  background: color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
}
.scouting-characteristic-group progress::-webkit-progress-value {
  background: var(--evidence);
  border-radius: 999px;
}
.scouting-characteristic-group progress::-moz-progress-bar { background: var(--evidence); border-radius: 999px; }
.scouting-report-card .report-section {
  margin-top: 16px;
  padding-top: 4px;
}
.scouting-report-card .report-section h3 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 8px;
}
.scouting-report-card .report-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 10px;
}
.scouting-report-card .report-section p:last-child { margin-bottom: 0; }
.doc-link-list { list-style: none; padding: 0; margin: 0; }
.doc-link-list li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc-link-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.profile-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  min-width: 240px;
}
.profile-actions .btn { text-align: center; width: 100%; }
.profile-actions a, .profile-actions button { color: white; }
.profile-actions #btnSaveAthlete { background: var(--card); color: var(--ink); }
.profile-actions .profile-contract-button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.contract-athlete-dialog { width: min(520px, calc(100vw - 24px)); }
.contract-dialog-fields { gap: 14px; padding-top: 6px; }
.contract-dialog-field label { color: var(--ink); display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.contract-dialog-field input, .contract-dialog-field select { margin: 0; min-height: 44px; width: 100%; }
.contract-dialog-fields .flash { margin: 0; }

@media (max-width: 720px) {
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero-main { align-items: flex-start; }
  .profile-avatar { width: 72px; height: 72px; font-size: 26px; }
  .scouting-report-navigation .btn { flex: 1 1 150px; text-align: center; }
  .scouting-report-navigation .meta { flex: 1 0 100%; text-align: center; }
  .scouting-characteristic-groups { grid-template-columns: 1fr; }
  .profile-actions { min-width: 0; width: 100%; }
  .topnav {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .nav-links {
    width: 100%;
    justify-content: flex-end;
  }
  .topnav a { margin-left: 10px; }
}

/* Settings theme picker */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 12px 0 20px;
}
.theme-option {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  background: var(--card);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}
.theme-option:hover { border-color: var(--accent); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option.selected,
.theme-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.theme-swatches { display: flex; gap: 6px; margin: 10px 0 8px; }
.theme-swatches span {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08);
}
.theme-option h3 { font-size: 15px; margin: 0; color: var(--ink); }
.theme-option p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.4; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.admin-stat { margin-bottom: 0; padding: 16px 18px; }
.admin-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.admin-stat-value { font-size: 28px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.admin-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.admin-create-grid .admin-create-actions { display: flex; align-items: end; padding-bottom: 14px; }
.admin-table-wrap { overflow-x: auto; }
.ai-provider-picker .theme-option p { margin-top: 4px; }
.ai-provider-picker .theme-option .meta { margin-top: 2px; }
.admin-inline-form select,
.admin-inline-form input { margin-bottom: 0; min-width: 120px; }
.admin-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
}
.admin-kv-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.admin-kv-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}
.admin-section-subhead {
  margin: 8px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.admin-action-row .btn {
  min-height: 44px;
}
.admin-agency-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-agency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
}
.admin-agency-name {
  font-weight: 600;
  color: var(--navy);
}
.admin-agency-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.admin-agency-add select,
.admin-agency-add input {
  width: 100%;
  min-height: 44px;
}
.admin-agency-add-actions {
  display: flex;
  align-items: end;
  min-height: 44px;
}
@media (max-width: 640px) {
  .admin-agency-add-actions .btn,
  .admin-action-row .btn {
    width: 100%;
  }
}
.admin-row-locked { opacity: 0.72; background: color-mix(in srgb, #b42318 6%, transparent); }
/* Highlights the one evaluation revision users and RAG search currently see. */
.admin-row-active { background: color-mix(in srgb, #067647 8%, transparent); }
/* Lets a long field (narrative, notes) span the whole responsive create grid. */
.admin-create-grid .admin-create-full { grid-column: 1 / -1; }
/* :not(.evaluation-entry-columns) keeps this generic section-header rule off the ratings/narrative
   panel titles below — they carry their own `.evaluation-entry-panel-title` styling and need to
   line up with each other exactly, which this rule's margin/border/padding would throw off. */
.admin-create-grid .admin-create-full:not(.evaluation-entry-columns) h3 { margin: 8px 0 0; font-size: 15px; color: var(--muted, #666); border-top: 1px solid var(--border, #e2e2e2); padding-top: 12px; }
.admin-create-grid .admin-create-full:not(.evaluation-entry-columns):first-child h3 { border-top: none; padding-top: 0; }
.admin-create-grid textarea { width: 100%; resize: vertical; }
.admin-athlete-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.admin-athlete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-athletes-bulk {
  justify-content: flex-end;
}
.admin-athletes-bulk .ribbon-meta {
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}
.admin-athletes-bulk .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-athletes-bulk .btn.toolbar-action--ready:not([disabled]) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--navy) 25%, transparent);
}
.admin-athletes-table .admin-col-check {
  width: 48px;
  text-align: center;
  vertical-align: middle;
}
.admin-athletes-table .admin-col-photo {
  width: 56px;
  text-align: center;
  vertical-align: middle;
}
.admin-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.admin-check-label input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.admin-athlete-photo,
.admin-athlete-photo-fallback {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
}
.admin-athlete-photo-fallback {
  background: linear-gradient(145deg, var(--navy), var(--blue));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.admin-filter-row th {
  padding-top: 6px;
  padding-bottom: 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.admin-filter-row .msd-trigger {
  width: 100%;
  min-height: 40px;
  max-width: 100%;
}
@media (max-width: 720px) {
  .admin-athletes-bulk {
    width: 100%;
    justify-content: stretch;
  }
  .admin-athletes-bulk .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
  .admin-athletes-bulk .ribbon-meta {
    width: 100%;
  }
}
.admin-athlete-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-athlete-section-head h2 { margin: 0; }
/* Preserves report line breaks without letting a long line widen the page. */
.admin-narrative {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  margin: 0;
}
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
/* Keeps a long quarantined import row from stretching the operations table. */
.metric-raw-row { display: inline-block; max-width: 40ch; overflow-wrap: anywhere; font-size: 13px; }

/* Evaluation progression timeline on the athlete profile. Rows stack on narrow screens so the
   summary text never has to compete with the date column for width. */
.evaluation-timeline-list { list-style: none; margin: 0; padding: 0; }
.evaluation-timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.evaluation-timeline-item:last-child { border-bottom: 0; }
.evaluation-timeline-date { font-weight: 600; }
.evaluation-timeline-date .meta { display: block; font-weight: 400; }
.evaluation-timeline-summary { margin: 0 0 4px; }
.evaluation-rating-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.evaluation-rating-chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
  background: var(--surface-soft);
}
.evaluation-rating-name { color: var(--muted); }
.evaluation-rating-value { font-weight: 600; }
.evaluation-compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.evaluation-compare-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.delta-up { color: #067647; font-weight: 600; }
.delta-down { color: #b42318; font-weight: 600; }
.delta-flat { color: var(--muted); }

@media (min-width: 720px) {
  .evaluation-timeline-item { grid-template-columns: 160px 1fr auto; align-items: start; }
  .evaluation-compare-grid { grid-template-columns: 1fr 1fr; }
}

/* Athlete comparison report (Views/Athletes/Compare.cshtml): a fixed, Amazon-style attribute
   matrix for up to five athletes, opened from the Search dashboard's "Compare report" action. */
.compare-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.compare-report-notice { border-color: var(--accent); }
.compare-report-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.compare-report-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.compare-report-header-card:hover, .compare-report-header-card:focus-visible {
  border-color: var(--accent);
}
.compare-report-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}
.compare-report-name { font-weight: 700; }
/* Keeps the row-label column readable while a wide comparison table scrolls horizontally on phones. */
.compare-report-table th:first-child,
.compare-report-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  min-width: 160px;
  text-align: left;
}
.compare-report-row-description { margin-top: 2px; font-size: 12px; }
.compare-report-evidence {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
/* Scout ratings rank banner. Gold/silver/bronze are real medal colors, so they are fixed hex
   values rather than theme tokens — a gold medal reads as gold in every color preference the same
   way it would on a physical podium. Rank 4+ uses the theme's own chip colors instead, so a ranked
   cell without a medal still reads as "ranked" without competing against the three fixed hues. */
.compare-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.compare-rank-gold { background: #fdecc8; color: #7a4e00; }
.compare-rank-silver { background: #e6e8eb; color: #454c52; }
.compare-rank-bronze { background: #f3ddc8; color: #7a4419; }
.compare-rank-other { background: var(--chip-bg); color: var(--chip-ink); }

@media print {
  .topnav, .profile-actions, .no-print { display: none !important; }
  body { background: white; }
  .container { max-width: none; padding: 0; }
  .card, .profile-hero { box-shadow: none; border: 1px solid #ccc; }
  /* "More season averages" stays collapsed on screen but should always show up on a printed report. */
  details:not([open]) summary { display: none; }
  details > *:not(summary) { display: block !important; }
}

/* A row of toggle chips backed by real checkboxes — used for the school directory's school-type
   and sport filters, on the settings page and above the directory table. The input stays in the
   DOM (and focusable) rather than being replaced by a styled div, so the keyboard and screen
   readers get a plain checkbox and the label does the visual work. */
.fs-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fs-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.fs-check:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.fs-check:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: var(--accent);
  color: var(--text);
}
/* Focus has to land on the label, because the checkbox itself is visually inside it. */
.fs-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-check input[type="checkbox"] { accent-color: var(--accent); margin: 0; }

/* The school directory's Sports cell. Filtering lives in the column header like every other
   column; this is just the display. */
.fs-sport-cellinfo { white-space: normal; }
/* "Not on file" is a coverage statement, not a value, so it reads as muted rather than as data —
   and it is the queue our coaching staff works through. */
.fs-sport-unknown { font-style: italic; }

/* One team on a school's detail page. Read-only, so it is a tag rather than the toggle chip
   .fs-check renders — same shape, no hover or checked state to imply it can be clicked. */
.fs-sport-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}
.fs-sport-tag .meta { font-size: 12px; }

/* The school detail page's sport checklist. A table rather than a chip row because it is a grid:
   one row per sport, one column per team, and a coach reads down a column to check off a school. */
.fs-sport-grid {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
}
.fs-sport-grid th,
.fs-sport-grid td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}
.fs-sport-grid thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-width: 2px;
}
.fs-sport-grid thead th:not(:first-child),
.fs-sport-grid tbody td { text-align: center; }
.fs-sport-grid tbody td:last-child { text-align: left; }
.fs-sport-grid tbody th { font-weight: 600; }
.fs-sport-grid tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* A generous hit area, so checking off fifteen sports is not fifteen precise clicks. */
.fs-sport-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  cursor: pointer;
}
.fs-sport-cell input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Marks a sport the federal survey already reports, so a coach can tell a confirmed program from
   one they are establishing themselves. */
.fs-sport-evidence {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
/* Reachable by a screen reader, invisible on screen — for a column header that would be noise as
   a visible label but that a table still needs so its columns are all named. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A read-only facts list: label above value, wrapping into as many columns as fit. Used by the
   athlete profile's Profile and Contact tabs, which display what the admin pages edit. */
.fs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 20px;
  margin: 0 0 18px;
}
/* For values that are sentences rather than fields — awards, injury history — where wrapping into
   narrow columns would make them unreadable. */
.fs-facts-wide { grid-template-columns: 1fr; }
.fs-fact dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fs-fact dd {
  margin: 2px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* A field nobody has filled in still shows, so the reader can see what could be known about an
   athlete rather than only what happens to be recorded. Muted and italic so it never reads as
   data — "Not on file" is a statement about the record, not about the athlete. */
.fs-fact-placeholder {
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}
.fs-fact-empty dt { opacity: 0.75; }
/* A record locator: tabular figures so the digits line up when read aloud or transcribed, and
   select-all so one click grabs the whole value, since being copied is the point of it. */
.fs-fact-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.03em;
  user-select: all;
  cursor: text;
}

/* A heading with a record locator pushed to its far edge. Baseline alignment sits the number on
   the heading's baseline rather than floating it against the cap height; wrapping keeps it below
   the heading on a narrow screen instead of squeezing both. */
.fs-heading-with-id {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}
/* Small and quiet on purpose: agents read a profile for the athlete, and admins and engineers are
   the ones who occasionally need to quote the number. Tabular figures so the digits line up when
   read aloud, and select-all so one click grabs it, because being copied is the point of it. */
.fs-heading-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
  user-select: all;
  cursor: text;
}
/* The label is not part of the value, so it stays out of the select-all copy target. */
.fs-heading-id-label {
  margin-right: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  user-select: none;
}

/* Add-athletes page: the duplicate warning, the CSV box, and the per-row import report. */
.fs-duplicate-list { margin: 8px 0; padding-left: 18px; }
.fs-duplicate-list li { margin-bottom: 4px; }
.fs-import-textarea,
.fs-import-template {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.fs-import-template {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  overflow-x: auto;
  white-space: pre;
}
.fs-import-report { width: 100%; border-collapse: collapse; font-size: 13px; }
.fs-import-report th, .fs-import-report td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
/* The outcome is the column a reader scans, so it carries the colour rather than the whole row —
   a table of forty tinted rows is harder to read than one with forty tinted words. */
.fs-import-outcome {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.fs-import-ok   { background: color-mix(in srgb, #16a34a 22%, transparent); color: var(--text); }
.fs-import-skip { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--muted); }
.fs-import-warn { background: color-mix(in srgb, #f59e0b 26%, transparent); color: var(--text); }
.fs-import-bad  { background: color-mix(in srgb, #dc2626 24%, transparent); color: var(--text); }

/* The delete control on an athlete's Status tab. Visually separated because it is the one action on
   the page that cannot be undone — everything else on this screen is reversible. */
.fs-danger-zone {
  border: 1px solid color-mix(in srgb, #dc2626 45%, var(--line));
  background: color-mix(in srgb, #dc2626 5%, var(--card));
}
.fs-danger-zone h2 { color: #dc2626; }
.fs-danger-list { margin: 6px 0 14px; padding-left: 20px; font-size: 14px; }
.fs-danger-list li { margin-bottom: 3px; }
.btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* "Archive a graduating class" on the athletes list. Collapsed by default: it is a once-a-year
   action that would otherwise sit permanently next to the everyday controls. */
.fs-archive-class { margin: 0 0 14px; }
.fs-archive-class summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.fs-archive-class form { margin-top: 10px; }

/* The one shared dialog wwwroot/js/dialog.js uses for every alert()/confirm()/prompt() the app
   needs, so nothing falls back to unstyleable browser chrome. Sizing/backdrop/animation mirror
   .filter-conflict-dialog; `margin: auto` re-centers the dialog against the global `* { margin:
   0 }` reset the same way that one does. */
.fs-dialog {
  margin: auto;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 28px 70px rgba(10, 14, 22, .32);
  overflow: auto;
  overscroll-behavior: contain;
}
.fs-dialog[open] { animation: fsDialogIn .18s ease-out both; }
@keyframes fsDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.fs-dialog::backdrop {
  background: rgba(10, 14, 22, .52);
  backdrop-filter: blur(2px);
}
.fs-dialog-form { padding: clamp(18px, 4vw, 24px); }
.fs-dialog-message { margin: 0; line-height: 1.55; }
.fs-dialog-field { margin-top: 14px; }
.fs-dialog-field input {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
.fs-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.fs-dialog-actions button { min-height: 44px; min-width: 92px; }