/* One set of styles, loaded before app.css (the team, owner and admin pages) and report.css (the report).
   Either page's own rules come later and refine these. */
:root {
  /* Surfaces. A dark theme later is one block that redefines these. */
  --bg:#f6f8fa; --surface:#fff; --surface-glass:rgba(255,255,255,.92); --sunken:#f6f8fa; --hover:#f0f3f7; --row-hover:#fafbfc;
  --ink:#1a2233; --ink-2:#3c4657; --muted:#5f6b7c; --faint:#667183;
  --line:#e3e8ee; --line-2:#d0d7e0; --field:#c2cad5;
  --accent:#4f46e5; --accent-ink:#4338ca; --accent-soft:#eef0fe; --accent-line:#c7cbfa;
  --on-accent:#fff; --on-accent-quiet:#dcdafe;
  /* Results: the same result is the same colour on every page. */
  --ok:#17784a; --ok-bg:#e6f4ec; --ok-line:#a7d8bd; --ok-ink:#0f4d30;
  --bad:#c0352b; --bad-bg:#fdeeec; --bad-line:#f2b8b2; --bad-ink:#7a1d16;
  --part:#a2570b; --part-bg:#fff3e3; --part-line:#f3cf9c;
  --warn-bg:#fff8e6; --warn-line:#f0d58a; --warn-ink:#6b4e00;
  --human-bg:var(--accent-soft); --human-ink:var(--accent-ink);
  --pending-bg:#f1ecfd; --pending-ink:#5b3fb3;
  --neutral-bg:#eef1f5;
  /* Severity */
  --critical:#b42318; --high:#c4570c; --medium:#a06a00; --medium-bg:#fff8e1; --medium-line:#f1dc9b;
  --low:#36597f; --low-bg:#ecf2f8; --low-line:#c3d3e5;  /* a quiet slate blue: Low is not a pass, so it is never green */
  --r-sm:6px; --r:8px; --r-lg:12px;
  --shadow:0 1px 2px rgba(26,34,51,.06), 0 1px 1px rgba(26,34,51,.04);
  --shadow-up:0 8px 24px -6px rgba(26,34,51,.14), 0 2px 6px rgba(26,34,51,.06);
  --shadow-primary:0 1px 2px rgba(67,56,202,.3), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-field:inset 0 1px 1px rgba(26,34,51,.04);
  --shadow-mark:inset 0 -1px 0 rgba(0,0,0,.18);
  --ring:0 0 0 3px var(--accent-soft);
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Type scale, in rem so text follows the reader's browser setting (16px by default): 12, 13, 14, 15, 16, 18, 22, 24, 30. */
  --text-xs:.75rem; --text-sm:.8125rem; --text-md:.875rem; --text-base:.9375rem; --text-lg:1rem; --text-xl:1.125rem;
  --text-2xl:1.375rem; --text-3xl:1.5rem; --text-4xl:1.875rem;
  --lh-tight:1.2; --lh-head:1.3; --lh-snug:1.45; --lh-body:1.55; --lh-read:1.6;
  --track-tight:-.02em; --track-head:-.01em; --track-caps:.06em;
  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48. */
  /* Every control is at least 44px tall, at the browser's default size. */
  --control:2.75rem;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;
}

/* ---- Reset and focus ---- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:var(--text-base)/var(--lh-body) var(--font); -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent-soft); color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
a { color:var(--accent); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; display:inline-flex; align-items:center; min-height:var(--control); left:8px; top:-60px; background:var(--accent); color:var(--on-accent); padding:10px 14px; border-radius:var(--r-sm); z-index:20; }
.skip:focus { top:8px; } @media (hover:hover) { .skip:hover { color:var(--on-accent); } }
/* A test site says so at the top of every page, across the content beside the sidebar: amber for attention,
   never red (issue #71). */
.test-site { margin:0; padding:var(--s2) var(--s4); background:var(--warn-bg); border-bottom:1px solid var(--warn-line); color:var(--warn-ink);
  font-size:var(--text-md); line-height:var(--lh-snug); text-align:center; max-width:none; }

/* ---- Pills ---- */
.pill { display:inline-flex; align-items:center; gap:5px; padding:1px var(--s2); border-radius:999px; font-size:var(--text-sm); line-height:1.6; font-weight:600; border:1px solid transparent;
  white-space:nowrap; background:var(--neutral-bg); color:var(--ink-2); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.pill.soft::before, .pill.plain::before, .pill.warn::before, .pill.draftchip::before, .pill.human::before, .pill.live::before { display:none; }
.pill.critical, .pill.band-not_ready { background:var(--bad-bg); color:var(--critical); border-color:var(--bad-line); }
.pill.high, .pill.band-partly_ready { background:var(--part-bg); color:var(--high); border-color:var(--part-line); }
.pill.medium, .pill.band-largely_ready { background:var(--medium-bg); color:var(--medium); border-color:var(--medium-line); }
.pill.low { background:var(--low-bg); color:var(--low); border-color:var(--low-line); }
.pill.band-ready { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.pill.met, .pill.ok, .pill.passed { background:var(--ok-bg); color:var(--ok); }
.pill.not_met, .pill.failed { background:var(--bad-bg); color:var(--bad); }
.pill.partly_met { background:var(--part-bg); color:var(--part); }
.pill.not_evidenced, .pill.plain { background:var(--neutral-bg); color:var(--muted); }
.pill.live { background:var(--ink); color:var(--on-accent); }
.pill.soft { background:var(--neutral-bg); color:var(--muted); font-weight:500; }
.pill.pending { background:var(--pending-bg); color:var(--pending-ink); }
.pill.human { background:var(--human-bg); color:var(--human-ink); }
.pill.warn, .pill.draftchip { background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line); }

/* Mandatory is a property of a Sub-check, not a failure: muted ink on a hairline, never red. */
.must { font-size:var(--text-xs); color:var(--muted); background:var(--surface); border:1px solid var(--line-2); border-radius:4px; padding:0 5px; margin-left:var(--s1); white-space:nowrap; font-weight:600; }

/* ---- Figures ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:var(--s3); margin:var(--s4) 0; }
.stat { padding:var(--s4) 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); }
.stat p { margin:2px 0; font-size:var(--text-sm); color:var(--muted); max-width:none; }
.stat .label { font-weight:600; color:var(--ink-2); }
.stat .big { font-size:var(--text-3xl); line-height:var(--lh-tight); font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:var(--track-tight); }

/* ---- Key-value lists ---- */
.kv { display:grid; grid-template-columns:180px 1fr; gap:var(--s2) 20px; margin:10px 0; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }

/* ---- Tables ---- */
.tw { overflow-x:auto; margin:10px 0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
th, td { text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--line); }
tr:last-child > td { border-bottom:0; }
th { font-size:var(--text-xs); color:var(--muted); font-weight:600; white-space:nowrap; background:var(--sunken); }
td.w, th.w { text-align:right; }
tr.total td { font-weight:650; border-top:1px solid var(--line-2); background:var(--sunken); }

/* ---- Buttons ---- */
button, .button { font:inherit; font-size:var(--text-md); font-weight:600; min-height:var(--control); padding:0 14px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; white-space:nowrap;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  transition:background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); }
@media (hover:hover) { button:not(:disabled):hover, .button:hover { background:var(--sunken); border-color:var(--field); text-decoration:none; color:var(--ink); } }
button:active, .button:active { transform:translateY(1px); }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-primary); }
@media (hover:hover) { button.primary:not(:disabled):hover, .button.primary:not(:disabled):hover { background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent); } }
button.quiet { font-weight:500; box-shadow:none; }
button.danger { color:var(--bad); border-color:var(--bad-line); }
@media (hover:hover) { button.danger:not(:disabled):hover { background:var(--bad-bg); border-color:var(--bad); } }
button.link { border:0; background:none; box-shadow:none; padding:0 2px; min-height:var(--control); color:var(--accent); font-weight:500; }
@media (hover:hover) { button.link:not(:disabled):hover { background:none; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; } }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; background:var(--surface); }
button.primary:disabled { background:var(--accent); }
/* A button in a dense table row stays 36px to look at; its hit area reaches 44px. */
td button { min-height:2.25rem; position:relative; }
td button::after { content:""; position:absolute; inset:-.25rem 0; }

/* ---- Fields ---- */
input[type=text], input[type=email], input[type=number], input[type=url], input[type=search], input[type=date], input:not([type]), select, textarea {
  font:inherit; font-size:var(--text-base); min-height:var(--control); padding:7px 11px; border:1px solid var(--field); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
  width:100%; max-width:560px; box-shadow:var(--shadow-field); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
@media (hover:hover) { input:hover, select:hover, textarea:hover { border-color:var(--faint); } }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
::placeholder { color:var(--faint); }
select { appearance:none; padding-right:var(--s6); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235f6b7c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 11px center; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }

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