/* worthit? — written as an appraisal note, not a dashboard.
 *
 * The other apps in this portfolio are all the same building: brand top-left,
 * a banner strip, one centred column of cards, a settings block at the bottom,
 * four legal links in the footer. Recolouring that does not make it a different
 * building. So this one is not a dashboard at all: an index of one-line
 * entries, and a full page per item that reads like a written appraisal —
 * serif, wide measure, the figures set inside sentences rather than boxed into
 * a stat grid.
 *
 * script-src 'none' and style-src 'self'. No client JavaScript, no inline style
 * attribute. The scale is inline SVG coloured by class.
 */

:root {
  --paper: #fcfcfa;
  --ink: #1a1a19;
  --soft: #55534e;
  --faint: #8b8880;
  --rule: #ddd9d0;
  --mark: #7a1f12;

  --under: #2f6b4f;   /* below the usual range */
  --within: #6b6250;  /* inside it */
  --over: #97331f;    /* above it */

  --serif: ui-serif, "Sitka Text", Charter, "Bitstream Charter", Cambria,
           "Palatino Linotype", Palatino, serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 var(--serif);
}

p { margin: 0 0 1em; }
a { color: var(--mark); text-underline-offset: 2px; }

/* Everything sits on one narrow measure, like a page rather than a screen. */
.sheet { max-width: 34rem; margin: 0 auto; padding: 0 1.5rem 5rem; }

/* ------------------------------------------------------------- masthead */

/* No brand bar across the top. The name sits in the text block, small, the way
   a letterhead does — there is no product chrome to hang a logo on. */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.6rem 0 0.9rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}
.wordmark {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.masthead nav { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.masthead nav a { color: var(--faint); text-decoration: none; margin-left: 1rem; }
.masthead nav a:hover { color: var(--ink); }
/* The way in has to be findable at a glance, letterhead or not. */
.masthead nav a.enter { color: var(--mark); border-bottom: 1px solid var(--mark); padding-bottom: 1px; }
.masthead nav a.enter:hover { color: var(--mark); }

/* Sits above the sample note, not below it. */
.enter-line { margin: 1.6rem 0 2rem; }
.enter-line .go { font-size: 1rem; }
.enter-line .aside { font-family: var(--sans); font-size: 0.78rem; color: var(--faint); }

.said { margin: 0 0 1.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
        font-family: var(--sans); font-size: 0.82rem; color: var(--soft); }
.said.wrong { color: var(--over); }
.said.right { color: var(--under); }

/* ------------------------------------------------------------- the report */

.report-head { margin-bottom: 1.4rem; }
.report-head h1 { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.25; }
.asked {
  display: block; margin-top: 0.35rem;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}

/* The finding, in a sentence. This is the whole design decision: no stat tiles,
   the numbers live in prose where they can be qualified. */
.finding { font-size: 1.12rem; line-height: 1.6; }
.finding strong { font-weight: 600; }
.u-under strong { color: var(--under); }
.u-within strong { color: var(--within); }
.u-over strong { color: var(--over); }

/* The scale, drawn like a printed ruler rather than a UI control. */
.scale { display: block; width: 100%; height: 46px; margin: 1.6rem 0 0.4rem; overflow: visible; }
.scale .axis { stroke: var(--ink); stroke-width: 0.35; }
.scale .tick { stroke: var(--rule); stroke-width: 0.35; }
.scale .middle { fill: #efece4; }
.scale .mid { stroke: var(--soft); stroke-width: 0.4; }
.scale .asked-line { stroke: var(--ink); stroke-width: 0.9; }
.u-under .scale .asked-line { stroke: var(--under); }
.u-within .scale .asked-line { stroke: var(--within); }
.u-over .scale .asked-line { stroke: var(--over); }
.scale text { font-family: var(--sans); font-size: 3.4px; fill: var(--faint); }
.scale .lbl-asked { fill: var(--ink); font-weight: 600; }

.aside { font-family: var(--sans); font-size: 0.78rem; color: var(--faint); margin-bottom: 2.2rem; }

.actions { margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
           display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap; }

/* --------------------------------------------------------------- the index */

.entries { margin: 0 0 2rem; padding: 0; list-style: none; }
.entry { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.entry a { display: flex; gap: 0.8rem; align-items: baseline; justify-content: space-between;
           text-decoration: none; color: var(--ink); }
.entry a:hover .name { text-decoration: underline; }
.entry .name { font-size: 1.02rem; }
.entry .call { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.07em;
               text-transform: uppercase; white-space: nowrap; }
.e-under .call { color: var(--under); }
.e-within .call { color: var(--within); }
.e-over .call { color: var(--over); }
.entry .num { font-variant-numeric: tabular-nums; color: var(--faint); font-size: 0.9rem; }

/* ---------------------------------------------------------------- the form */

.ask { margin: 0 0 2.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule); background: #fff; }
.ask legend, .ask .cap {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 0.7rem; display: block;
}
.ask label { display: block; margin-bottom: 0.7rem; font-family: var(--sans); font-size: 0.78rem; color: var(--soft); }
.ask input {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0;
}
.ask input:focus-visible { outline: none; border-color: var(--mark); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* Buttons are set as text, not as pills — nothing here should read as an app. */
.go, .link {
  font-family: var(--sans); font-size: 0.8rem; background: none; border: 0; padding: 0;
  color: var(--mark); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.go { font-weight: 600; }
.link.quiet { color: var(--faint); }
.inline { display: inline; margin: 0; }

/* -------------------------------------------------------------- documents */

.doc h1 { font-size: 1.55rem; font-weight: 600; margin: 0 0 1.2rem; }
/* Questions as headings, not category labels — a different document shape from
   the "What is collected / What is not collected" structure used elsewhere. */
.doc h2 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 0.6rem; }
.doc p, .doc li { color: var(--soft); }
.doc li { margin-bottom: 0.5em; }
.doc strong { color: var(--ink); }
.doc .stamp { font-family: var(--sans); font-size: 0.74rem; color: var(--faint); margin-bottom: 2rem; }
.doc code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; }

.colophon {
  margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--ink);
  font-family: var(--sans); font-size: 0.72rem; color: var(--faint);
}
.colophon a { color: var(--faint); text-decoration: none; margin-right: 1rem; }
.colophon a:hover { color: var(--ink); }
.colophon p { margin: 0.7rem 0 0; max-width: 46rem; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .report-head h1 { font-size: 1.35rem; }
}