:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #15171c;
  --muted: #5a6272;
  --line: #d6dae3;
  --card: #f4f6fa;
  --accent: #33499a;
  --ok: #15803d;
  --warn: #a3560a;
  --high: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f13;
    --fg: #e7eaf1;
    --muted: #9aa3b4;
    --line: #272c36;
    --card: #151922;
    --accent: #93a8ff;
    --ok: #6fd39a;
    --warn: #f0b34a;
    --high: #ff8f88;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; }

/* Header with the small inline SVG mark (a dotted route inside a shield,
   drawn in the header itself — no image file, no external request). */
.brand { display: flex; align-items: flex-start; gap: 0.7rem; }
.brandtext { min-width: 0; }
.mark { flex: none; width: 40px; height: 40px; color: var(--accent); margin-top: 0.75rem; }

h1 { font-size: 1.65rem; line-height: 1.2; margin: 0.6rem 0 0.35rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
h4 { font-size: 0.98rem; margin: 0; }

.lead { margin: 0 0 1rem; color: var(--fg); }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.9rem; }

/* The two standing notes above the findings are boxed, so they read as
   reference text rather than as part of the running commentary: #lowband
   (what the linkage bar does and does not mean) and #legend (how to read a
   finding, and to work the checklist strongest-first). */
.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

#legend { border-left-color: var(--accent); }
#lowband { border-left-color: var(--warn); margin-top: 0.95rem; margin-bottom: 1.15rem; }
#legend em { color: var(--fg); font-style: italic; }

.field { margin-bottom: 0.9rem; }

label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  resize: vertical;
}

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }

button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

button.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
  font-weight: 500;
}

button:hover { filter: brightness(1.08); }

button:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.hidden { display: none; }

.verdict { font-weight: 600; margin: 0.5rem 0 0; }
.verdict.low { color: var(--ok); }
.verdict.moderate { color: var(--warn); }
.verdict.high { color: var(--high); }
.verdict.error { color: var(--high); }

.bar {
  height: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 1.25rem;
}

.bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ok);
  transition: width 0.3s ease;
}

.bar > span.moderate { background: var(--warn); }
.bar > span.high { background: var(--high); }

.finding {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--card);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
}

.finding.high { border-left-color: var(--high); }
.finding.medium { border-left-color: var(--warn); }

.finding .level {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.finding p { margin: 0.3rem 0 0; }
.finding .fix { color: var(--muted); }

.good { color: var(--muted); margin: 0.4rem 0 0; padding-left: 1.1rem; }
.good li { margin-bottom: 0.2rem; }

.checklist { margin: 0; padding-left: 1.3rem; }
.checklist li { margin-bottom: 0.45rem; }

.meta {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.meta li {
  border-left: 3px solid var(--line);
  padding: 0.6rem 0.8rem 0.6rem 0.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.meta li + li { border-top: 1px solid var(--line); }
.meta li strong { color: var(--fg); }

.about { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 0.5rem; }
.about p { margin: 0.4rem 0; }

footer {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

a { color: var(--accent); }

#printnote {
  border-left: 3px solid var(--line);
  padding-left: 0.7rem;
  margin-top: 1rem;
}

/* Phones: the first input box has to be reachable without scrolling, so on
   narrow screens the top block is tighter — smaller page gutter, closer
   headings, a slightly smaller lead. Nothing is hidden and no wording
   changes here; this is spacing only. Chosen by reading the CSS, not by
   resizing a real phone window. */
@media (max-width: 30rem) {
  main { padding: 0.75rem 0.75rem 2rem; }
  .mark { width: 32px; height: 32px; margin-top: 0.7rem; }
  .note { font-size: 0.82rem; }
  h1 { font-size: 1.5rem; margin-top: 0.4rem; }
  h2 { margin-top: 1.2rem; }
  #input-h { margin-top: 1rem; }
  .lead { font-size: 0.95rem; margin-bottom: 0.7rem; }
  .hint { margin-bottom: 0.7rem; }
  .field { margin-bottom: 0.7rem; }
  #lowband { margin-top: 0.8rem; }
}

/* The four buttons next to the boxes now lay themselves out at any width.
   The row is a grid whose columns are never narrower than 9rem: on a small
   phone that is one column, a little wider two, a tablet three or four, and
   on a wide screen one row of four. This replaced the fixed 30rem break
   point used from 0.22 to 0.38, which was picked by reading the CSS rather
   than by resizing a real window, so it could have been wrong on exactly
   the screens it was meant to help. No button is squeezed and the tip under
   them keeps its place. */
.btnrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: stretch;
}

.btnrow button { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .bar > span { transition: none; }
}

/* Printing: put only the result on paper. The input boxes, the "what this
   page cannot check" list, the footer and the print note itself are
   on-screen context, not paper. Hints inside a finding (for example the
   line-cap warning) stay, because they are part of the result. A results
   section that is still empty keeps its .hidden rule, so an unchecked page
   prints nothing extra. The header, and with it the mark, is left off. */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --fg: #000;
    --muted: #333;
    --line: #777;
    --card: #fff;
    --accent: #000;
    --ok: #000;
    --warn: #000;
    --high: #000;
  }

  body { font-size: 12pt; }
  main { max-width: none; padding: 0; }

  header,
  section[aria-labelledby="input-h"],
  section[aria-labelledby="meta-h"],
  .about,
  footer,
  .bar,
  .row,
  #copystatus,
  #copybox,
  #printnote { display: none !important; }

  #results h2 { margin-top: 0; }

  .verdict { font-size: 13pt; }
  .note { border-color: #777; border-left-color: #000; }
  .finding { page-break-inside: avoid; break-inside: avoid; }
  .checklist { padding-left: 1.4rem; }
  .checklist li { page-break-inside: avoid; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}