/* A11ytek Monitor — accessible, on-brand dashboard styles.
   All brand colors are CSS variables: drop in a11ytek's exact hex here. */
:root {
  --brand:        #0b5cab;   /* primary blue */
  --brand-dark:   #08406f;
  --brand-light:  #e8f1fb;
  --accent:       #157a5c;   /* accessible green = "passing" (5.29:1 on white) */
  --ink:          #16202e;   /* body text */
  --ink-soft:     #4a5768;
  --bg:           #f4f7fb;
  --card:         #ffffff;
  --line:         #dbe3ee;
  --focus:        #ffb703;

  /* severity palette (all AA on white / on their own chips) */
  --critical:     #b3261e;
  --serious:      #b05400;   /* 5.10:1 on white, 4.75:1 on #f4f7fb */
  --moderate:     #8a6d00;
  --minor:        #5b6b7f;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(16,32,46,.08), 0 6px 20px rgba(16,32,46,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Any element given `display:flex` or `display:grid` would otherwise ignore the
   hidden attribute entirely — which left the sign-in card on screen after
   signing in. Belt and braces for every [hidden] in the app. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--bg); line-height: 1.55;
}
.wrap { width: min(1120px, 92vw); margin: 0 auto; }

/* Focus visibility — essential for an a11y product */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brand-dark); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff; padding: 1.4rem 0;
}
.header-inner { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark {
  background: #fff; color: var(--brand-dark); font-weight: 800;
  padding: .25rem .5rem; border-radius: 8px; letter-spacing: -.5px;
}
.brand-name { font-size: 1.4rem; font-weight: 500; }
.brand-name strong { font-weight: 800; }
.tagline { margin: 0; color: #dbe9f8; font-size: .95rem; }

/* Layout */
main { padding: 2rem 0 3rem; min-height: 60vh; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
h1 { font-size: 1.7rem; margin: 0; }
h2 { font-size: 1.25rem; }

/* Buttons */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
  padding: .6rem 1.1rem; border: 2px solid transparent; transition: .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-light); }
.btn-danger { background: transparent; color: var(--critical); border-color: transparent; padding: .3rem .5rem; }
.btn-danger:hover { text-decoration: underline; }
.btn-sm { padding: .35rem .7rem; font-size: .88rem; }
.btn:disabled { opacity: .55; cursor: progress; }
/* aria-disabled, not the disabled attribute: the button stays focusable, so a
   keyboard or screen-reader user can reach it and be told *why* it is
   unavailable. Muted with a real colour instead of opacity, so the label keeps
   its AA contrast. */
.btn[aria-disabled="true"] { color: var(--ink-soft); border-style: dashed; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem;
}

/* Add-site form */
.add-form { margin-bottom: 1.5rem; }
.form-title { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field .req { color: var(--critical); }
.field input {
  font: inherit; padding: .55rem .7rem; border: 1.5px solid var(--line);
  border-radius: 8px; background: #fff;
}
.hint { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.form-actions { margin-top: 1.1rem; display: flex; gap: .7rem; }
.form-error { color: var(--critical); font-weight: 600; margin-top: .8rem; }

/* Sites grid */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.site-card { display: flex; flex-direction: column; gap: .9rem; }
.site-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.site-card h3 { margin: 0; font-size: 1.15rem; }
.site-card .url { color: var(--ink-soft); font-size: .85rem; word-break: break-all; }
.site-meta { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-soft); }
.site-actions { display: flex; gap: .5rem; align-items: center; margin-top: auto; }

/* Score ring */
.score-ring { display: grid; place-items: center; position: relative; width: 84px; height: 84px; flex: none; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-num { position: absolute; font-weight: 800; font-size: 1.35rem; }
.score-ring .score-grade { position: absolute; bottom: 2px; font-size: .7rem; font-weight: 700; color: var(--ink-soft); }

.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-A, .badge-B { background: #e6f4ee; color: #0f6b4b; }
.badge-C, .badge-D { background: #fdf3e0; color: #8a5a00; }
.badge-F { background: #fbe7e6; color: var(--critical); }
.badge-none { background: #eef1f5; color: var(--ink-soft); }

/* Severity chips */
.sev-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1.5px solid;
}
.chip .dot { width: .55rem; height: .55rem; border-radius: 50%; }
.chip-critical { color: var(--critical); border-color: var(--critical); }
.chip-critical .dot { background: var(--critical); }
.chip-serious { color: var(--serious); border-color: var(--serious); }
.chip-serious .dot { background: var(--serious); }
.chip-moderate { color: var(--moderate); border-color: var(--moderate); }
.chip-moderate .dot { background: var(--moderate); }
.chip-minor { color: var(--minor); border-color: var(--minor); }
.chip-minor .dot { background: var(--minor); }

/* Detail view */
.back-btn { margin-bottom: 1rem; }
.detail-head { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.detail-head .big-score { display: flex; align-items: center; gap: 1rem; }
.detail-head h1 { font-size: 1.5rem; }
.detail-sub { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 0; }

.panel { margin-bottom: 1.6rem; }
.panel h2 { margin-top: 0; }

/* Detail actions + diff */
.detail-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.diff-counts { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.diff-badge { padding: .3rem .8rem; border-radius: 8px; font-weight: 700; font-size: .9rem; }
.diff-new { background: #fbe7e6; color: var(--critical); }
.diff-fixed { background: #e6f4ee; color: #0f6b4b; }
.diff-persist { background: #eef1f5; color: var(--ink-soft); }
.diff-h { margin: 1rem 0 .3rem; font-size: 1rem; }
.diff-list { margin: .2rem 0; padding-left: 1.1rem; }
.diff-list li { margin: .35rem 0; }

/* Trend chart */
.trend-card { padding: 1.3rem 1.3rem .8rem; }
.trend-svg { width: 100%; height: 220px; display: block; }
.trend-svg .grid-line { stroke: var(--line); stroke-width: 1; }
.trend-svg .score-line { fill: none; stroke: var(--brand); stroke-width: 2.5; }
.trend-svg .score-dot { fill: var(--brand); }
.trend-svg .axis-label { fill: var(--ink-soft); font-size: 11px; }
.trend-empty { color: var(--ink-soft); padding: 2rem 0; text-align: center; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
tbody tr:hover { background: var(--brand-light); }
.rule-id { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .82rem; color: var(--brand-dark); }
.wcag-tag {
  display: inline-block; background: var(--brand-light); color: var(--brand-dark);
  padding: .1rem .45rem; border-radius: 6px; font-size: .76rem; font-weight: 600; margin: .1rem;
}

/* Page accordion */
.page-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .7rem; overflow: hidden; background: #fff; }
.page-summary {
  cursor: pointer; padding: .8rem 1rem; display: flex; align-items: center;
  gap: .8rem; font-weight: 600; list-style: none;
}
.page-summary::-webkit-details-marker { display: none; }
.page-summary .caret { transition: transform .2s; color: var(--ink-soft); }
details[open] .page-summary .caret { transform: rotate(90deg); }
.page-summary .p-url { flex: 1; font-weight: 500; color: var(--ink-soft); font-size: .85rem; word-break: break-all; }
.page-body { padding: 0 1rem 1rem; }
.issue-item { border-top: 1px solid var(--line); padding: .8rem 0; }
.issue-item h4 { margin: 0 0 .3rem; font-size: 1rem; }
.issue-desc { margin: .2rem 0; color: var(--ink-soft); font-size: .9rem; }
.issue-code {
  background: #f2f5f9; border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .6rem; font-family: ui-monospace, Menlo, monospace; font-size: .78rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: .4rem 0;
}
.issue-meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .82rem; }
.issue-item a { color: var(--brand); }

.empty { color: var(--ink-soft); }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-note { font-size: .82rem; color: var(--accent); font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 1.4rem 0; margin-top: 2rem; }
.site-footer p { margin: 0; color: var(--ink-soft); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tabbar { background: var(--card); border-bottom: 1px solid var(--line); }
.tabbar-inner { display: flex; gap: .25rem; }
.tab {
  display: block; padding: .85rem 1.4rem; text-decoration: none; font-weight: 650;
  color: var(--ink-soft); border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--brand); background: var(--bg); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Run bar ──────────────────────────────────────────────────────────────── */
.runbar { background: var(--bg); border-bottom: 1px solid var(--line); }
.runbar-inner { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; flex-wrap: wrap; font-size: .88rem; }
.runbar-label { color: var(--ink-soft); }
.runbar select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font: inherit; }
.runbar-score { color: var(--ink-soft); }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.crumbs { font-size: .85rem; margin: 1rem 0 .4rem; color: var(--ink-soft); }
.crumbs a { color: var(--brand); }

/* ── Overview grid ────────────────────────────────────────────────────────── */
.overview-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 780px) { .overview-grid { grid-template-columns: 1fr 1fr; } }

.sev-links { list-style: none; margin: .5rem 0 0; padding: 0; }
.sev-links li { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .4rem 0; border-bottom: 1px dotted var(--line); }
.sev-links li:last-child { border-bottom: 0; }
.sev-total { font-weight: 700; padding-top: .6rem !important; }
.sev-count { font-size: 1.05rem; font-weight: 700; color: var(--brand); text-decoration: underline; }
.sev-count.sev-zero { color: var(--ink-soft); text-decoration: none; }

.bigstats { display: flex; gap: 2.5rem; margin-top: .6rem; }
.bigstat { display: block; font-size: 2.1rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.bigstat-l { font-size: .82rem; color: var(--ink-soft); }

/* ── Filters ──────────────────────────────────────────────────────────────── */
.filters { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem 1rem; margin: .8rem 0; }
.filters-label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .3rem; }
.fchips { display: flex; gap: .4rem; flex-wrap: wrap; }
.fchip { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); text-decoration: none; color: var(--ink); font-size: .85rem;
  font-weight: 600; text-transform: capitalize; }
.fchip:hover { border-color: var(--brand); }
.fchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fsel { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.fsel span { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.fsel select, .fsel input { padding: .38rem .5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); font: inherit; min-width: 11rem; }
.result-count { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 .8rem; }

/* ── Data tables ──────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .65rem .8rem; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--bg); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); position: sticky; top: 0; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
.pagecell { max-width: 22rem; word-break: break-word; }
.fixlink { font-size: .82rem; }
.picker { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin-top: .6rem; }
.sev-nums { display: flex; align-items: baseline; gap: .6rem; }
.sev-inst { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }

/* Route changes move focus to the view's <h1> so screen-reader users hear the
   new page name. The heading is not interactive, though, and a full focus box
   around it reads as a text input — so mark it with a quiet bar instead of the
   outline used for real controls. Focus still moves; only the styling differs. */
/* Gated on data-nav="keyboard" as well as :focus-visible. Script-moved focus
   still matches :focus-visible in Chrome, so without this a mouse user sees an
   amber bar appear next to a heading they never focused. */
/* :focus, not :focus-visible. Whether a browser matches :focus-visible on an
   element focused by SCRIPT is inconsistent — Chrome matched it here (showing
   the bar to mouse users) while headless Chromium did not (hiding it from
   keyboard users). Neither is what we want, so the modality flag decides it
   outright: focus always moves, and the marker appears only for the people who
   navigate by keyboard. */
:root[data-nav="keyboard"] main section > h1[tabindex="-1"]:focus,
:root[data-nav="keyboard"] main section h1[tabindex="-1"]:focus,
:root[data-nav="keyboard"] main [id$="-content"] h1[tabindex="-1"]:focus {
  outline: none;
  box-shadow: -0.75rem 0 0 -0.35rem var(--focus);
}
/* Belt and braces: never paint the default outline on a non-interactive
   heading, whatever the modality. */
main h1[tabindex="-1"]:focus { outline: none; }

/* At 18px base type the four tabs no longer fit a narrow phone, so let the bar
   scroll sideways rather than pushing the whole page wide. */
.tabbar-inner { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tabbar-inner .tab { flex: 0 0 auto; }
@media (max-width: 560px) {
  .tab { padding: .8rem 1rem; }
  .filters { gap: .7rem; }
  .fsel select, .fsel input { min-width: 0; width: 100%; }
  .fsel { flex: 1 1 12rem; }
}
/* Wide tables scroll inside their own box, never the page. */
.tablewrap { max-width: 100%; }

/* ── New-scan wizard ──────────────────────────────────────────────────────── */
.stepper { display: flex; list-style: none; margin: 1.2rem 0 1.4rem; padding: 0;
  gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.step { display: flex; flex-direction: column; align-items: center; gap: .35rem;
  flex: 1 0 auto; min-width: 6.5rem; position: relative; padding-top: .1rem; }
.step::before { content: ''; position: absolute; top: 1rem; left: -50%; width: 100%;
  height: 2px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step-done::before, .step-current::before { background: var(--brand); }
.step-dot { position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--card); border: 2px solid var(--line); color: var(--ink-soft); }
.step-done .step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.step-current .step-dot { border-color: var(--brand); color: var(--brand); border-width: 3px; }
.step-label { font-size: .76rem; text-align: center; color: var(--ink-soft); line-height: 1.25; }
.step-current .step-label { color: var(--brand); font-weight: 700; }

.wiz-card { padding: 1.4rem 1.5rem 1.1rem; }
.wiz-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: 1rem; }
.wiz-head h2 { margin: 0; }
.wiz-body .lead { color: var(--ink-soft); margin-top: 0; }
.wiz-body textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .85rem; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); resize: vertical; }
.wiz-actions-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1.2rem; }
.wiz-count { color: var(--ink-soft); font-size: .85rem; }
.wiz-card table.data th[scope="row"] { width: 12rem; color: var(--ink-soft); font-weight: 600; }
.file-btn { cursor: pointer; }
/* Keep the sr-only file input reachable: show a focus ring on its label. */
#w-file:focus-visible + .file-btn,
.file-btn:has(+ #w-file:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.bad-lines { color: var(--serious); font-weight: 600; }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-gate { min-height: 70vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(30rem, 100%); padding: 2rem; }
.auth-card h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.auth-card .lead { color: var(--ink-soft); margin: 0 0 1.4rem; }
.auth-card .field { margin-bottom: 1rem; }
.auth-card input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; background: var(--card); }
.auth-card .btn { width: 100%; justify-content: center; }
.pw-hint { font-size: .82rem; color: var(--ink-soft); margin: .3rem 0 0; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: .7rem;
  color: #dbe9f8; font-size: .88rem; }
.userbox .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.userbox .btn-ghost:hover { background: rgba(255,255,255,.12); }
.header-inner { flex-wrap: wrap; }
.role-pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--brand-light); color: var(--brand-dark); }
.role-admin { background: var(--brand); color: #fff; }

/* Coverage warning — shown when a crawl stopped at the page limit, so nobody
   reads a score as covering the whole site when it does not. Amber, not red:
   the scan succeeded, it just did not see everything. Text is #4a3600 on
   #fff8e6 (11.4:1), well clear of AA. */
.coverage-warning {
  margin: 0 0 1.25rem; padding: .8rem 1rem;
  background: #fff8e6; border: 1px solid #e0b74a; border-left: 5px solid #8a6d00;
  border-radius: 8px; color: #4a3600; line-height: 1.5;
}
.coverage-warning strong { color: #4a3600; }

/* Live scan progress. The bar is decorative reinforcement — the real value is
   carried by role="progressbar" and by the visible "42 of 247" text, so the
   information survives with images or colour off. */
.scan-progress { display: flex; flex-direction: column; gap: .4rem; }
.scan-progress-bar {
  height: .5rem; background: var(--line); border-radius: 999px; overflow: hidden;
}
.scan-progress-bar > span {
  display: block; height: 100%; background: var(--brand);
  border-radius: 999px; transition: width .4s ease;
}
.scan-progress-note {
  margin: 0; font-size: .82rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.scan-progress-note strong { color: var(--ink); font-size: .95rem; }
.scan-progress-url {
  flex: 1 1 100%; font-size: .74rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .scan-progress-bar > span { transition: none; }
}

/* A count of pages that could not be scanned. Amber, matching the coverage
   warning: the run succeeded, it just did not see everything. */
.bigstat-warn { color: #8a6d00; }

/* ── Organisations, team and staff areas ───────────────────────────────────
   Colours reuse the existing tokens so contrast stays within what has already
   been checked. --ink-soft on --card is 6.9:1; --accent on white is 5.29:1. */

.orgbox { margin-right: .75rem; }
.orgbox select {
  font: inherit;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  max-width: 14rem;
}

/* Picking an organisation at sign-in. A list of buttons rather than a select:
   it is a navigation choice, not a form field, and it must be reachable and
   announced one item at a time. */
.orgpick { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.orgpick button { width: 100%; justify-content: space-between; display: flex; align-items: center; gap: .75rem; }

/* Success counterpart to .form-error, which already exists. */
.form-ok {
  color: #0f5c46;                 /* 7.0:1 on white */
  background: #e7f4ef;
  border: 1px solid #9fd3c1;
  border-radius: 6px;
  padding: .6rem .75rem;
  margin: .5rem 0;
  line-height: 1.5;
}
.form-ok code, .breakall {
  word-break: break-all;
  font-size: .9em;
  background: rgba(16,32,46,.06);
  padding: .1rem .3rem;
  border-radius: 4px;
}

.muted { color: var(--ink-soft); }

/* ---------- Accepted findings ---------------------------------------------
   The note beside the score is the honesty mechanism: the adjusted number is
   large, but the raw one sits next to it and is never omitted. Styled to be
   read, not to be skipped over — same weight as the sub-line, not a footnote. */
.accepted-note {
  margin: 0 0 .15rem;
  font-size: .82rem;
  color: var(--muted, #5a6572);
}
.accepted-note strong { color: inherit; }

.accepted-panel { margin-top: 1.25rem; }
.accepted-panel h2 { display: flex; align-items: center; gap: .5rem; }
.count-pill {
  display: inline-block;
  min-width: 1.5rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: #eef1f5;
  color: #33404f;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Accept dialog -------------------------------------------------
   A plain centred panel. No animation: it appears where focus goes, and the
   first thing focused is the reason field, because the reason is the point. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem;
  overflow-y: auto;
  background: rgba(15, 23, 42, .55);
}
.modal {
  width: min(34rem, 100%);
  background: #fff;
  padding: 1.25rem 1.35rem 1.35rem;
}
.modal h2 { margin-top: 0; }
.modal textarea {
  width: 100%;
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid #c3ccd6;
  border-radius: 6px;
  resize: vertical;
}
.accept-what {
  padding: .6rem .7rem;
  margin: .6rem 0 1rem;
  background: #f6f8fa;
  border-left: 3px solid #c3ccd6;
  border-radius: 0 4px 4px 0;
  word-break: break-word;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modal-in .12s ease-out; }
  @keyframes modal-in { from { transform: translateY(-.4rem); opacity: .6; } }
}