/* Draft Record.
 *
 * The subject is a manuscript and the marks an editor leaves on it, so the page
 * is built like one: warm paper, warm-black ink, and a single saturated
 * vermilion that appears only where something is being marked or measured. It
 * is the colour of a correcting pencil, and it is the only colour on the page
 * that is allowed to shout.
 *
 * Personality comes from scale contrast and one job per face -- a display serif
 * running to 4rem over a 1.0625rem body, mono reserved strictly for anything
 * measured -- because there is no web font here and there is not going to be
 * one: this tool has to open on a phone in under two seconds.
 *
 * The signature device is three rules of decreasing length. It is the mark, it
 * is the section divider, and in the result it becomes the thing the whole site
 * exists to draw: a mosaic of the sessions a document was written across.
 */

:root {
  --ink: #1b1714;
  --ink-soft: #4f463f;
  --ink-faint: #857a70;
  --paper: #f7f3ec;
  --paper-deep: #efe8dd;
  --card: #fffdf9;
  --rule: #ddd2c2;
  --mark: #c0392b;
  --mark-soft: #f7e6e2;
  --measure-ink: #1f5d55;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --measure: 33rem;

  /* One hue per session, cycled. Chosen for separation at small sizes and for
     surviving both themes, because the mosaic is the one place colour carries
     information rather than mood. */
  --s0: #c0392b; --s1: #1f5d55; --s2: #b9770e; --s3: #5b4b8a;
  --s4: #2c6e9b; --s5: #7d5a3c; --s6: #8a2f5e; --s7: #3f6b2b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #efe7db;
    --ink-soft: #bcb0a1;
    --ink-faint: #8d8375;
    --paper: #15130f;
    --paper-deep: #1d1a15;
    --card: #211d17;
    --rule: #38312a;
    --mark: #e8705f;
    --mark-soft: #2c1d1a;
    --measure-ink: #6fbfb1;
    --s0: #e8705f; --s1: #6fbfb1; --s2: #e0a63f; --s3: #a08fd4;
    --s4: #6aaede; --s5: #c39a74; --s6: #d97fae; --s7: #8fc470;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serif); line-height: 1.08; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 9vw, 4rem); letter-spacing: -0.025em; margin: 0 0 0.75rem; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); margin: 2.6rem 0 0.7rem; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; margin: 1.9rem 0 0.5rem; }
p { margin: 0 0 1rem; }
code { font-family: var(--mono); font-size: 0.88em; color: var(--measure-ink); }

a { color: var(--ink); text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--mark); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mark); outline-offset: 3px; border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 10;
  background: var(--card); padding: 0.75rem 1rem; border: 2px solid var(--mark); border-radius: 0.3rem;
}
.skip-link:focus { top: 0.5rem; }

/* ------------------------------------------------------------------- shell */

.site-header {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  align-items: center; justify-content: space-between;
  max-width: 64rem; margin: 0 auto; padding: 1rem 1.25rem 0.85rem;
  border-bottom: 2px solid var(--ink);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; text-decoration: none; color: inherit;
}
.brand__mark { fill: var(--mark); flex: none; }
.brand__name {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
/* Three destinations by construction: past four, a phone header grows a second
   row. The test enforces the ceiling so nobody has to remember it. */
.site-nav a {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 0.92rem; letter-spacing: 0.01em; text-decoration: none;
  border-bottom: 2px solid transparent; color: var(--ink-soft);
}
.site-nav a:hover { color: var(--mark); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--mark); }

main { max-width: 64rem; margin: 0 auto; padding: 1.75rem 1.25rem 3.5rem; }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.45rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.75rem;
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-faint); }
.crumbs a:hover { color: var(--mark); }

.site-footer {
  border-top: 2px solid var(--ink);
  max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  color: var(--ink-soft); font-size: 0.92rem;
}
.site-footer__claim {
  font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--ink); max-width: var(--measure);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-soft); }
.site-footer nav a:hover { color: var(--mark); }

/* -------------------------------------------------------------------- hero */

/* Compact by construction. The commonest tool-site mistake is a hero that
   pushes the tool below the fold on a phone; time-to-tool is the metric. */
.hero { margin: 0 0 1.75rem; max-width: 42rem; }
.hero h1 { text-wrap: balance; }
.lede { font-size: 1.18rem; color: var(--ink-soft); max-width: var(--measure); }
.hero__under { color: var(--ink-faint); font-size: 0.95rem; max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.5rem; }
.muted { color: var(--ink-faint); font-size: 0.93rem; }

/* Section rule: the mark, used as punctuation. */
h2::before {
  content: ""; display: block; inline-size: 2.25rem; block-size: 3px;
  background: var(--mark); margin-bottom: 0.85rem; border-radius: 2px;
}
.outcome h2::before, .limits h2::before, .faq h2::before { margin-bottom: 0.7rem; }

/* -------------------------------------------------------------------- tool */

.drop {
  border: 2px dashed var(--rule); border-radius: 0.35rem;
  background: var(--card); padding: 2.25rem 1.25rem; text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
}
.drop--over { border-color: var(--mark); background: var(--mark-soft); }
.drop__prompt { font-family: var(--serif); font-size: 1.45rem; margin-bottom: 0.3rem; }
.drop__or { color: var(--ink-faint); margin: 0.5rem 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }
.drop__note { color: var(--ink-faint); font-size: 0.88rem; margin: 1.1rem 0 0; }

.button {
  font: inherit; font-size: 1rem; font-weight: 500;
  min-height: 44px; padding: 0.7rem 1.5rem;
  border-radius: 0.25rem; border: 2px solid var(--ink);
  background: var(--card); color: var(--ink); cursor: pointer;
}
.button:hover { border-color: var(--mark); color: var(--mark); }
.button--primary { background: var(--mark); border-color: var(--mark); color: #fffdf9; }
.button--primary:hover { background: var(--ink); border-color: var(--ink); color: #fffdf9; }
.button[disabled] { opacity: 0.5; cursor: progress; }

.progress { margin-top: 1.25rem; }
.progress__bar { height: 4px; background: var(--rule); overflow: hidden; position: relative; }
.progress__bar[data-indeterminate="true"]::after {
  content: ""; position: absolute; inset: 0; inline-size: 32%;
  background: var(--mark); animation: sweep 1.05s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .progress__bar[data-indeterminate="true"]::after { animation: none; inline-size: 100%; opacity: 0.45; }
}
.progress__label { color: var(--ink-faint); font-size: 0.88rem; margin: 0.55rem 0 0; }

/* ------------------------------------------------------------------ result */

.outcome {
  margin-top: 1.75rem; padding: 1.5rem 1.35rem;
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--mark);
  border-radius: 0.25rem;
}
.outcome h2 { margin-top: 0; }
.outcome--problem { border-top-color: var(--mark); background: var(--mark-soft); }
.note {
  border-left: 3px solid var(--mark); padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--ink-soft); font-size: 0.94rem;
}

.figures { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 34rem) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures div { border-top: 2px solid var(--ink); padding-top: 0.55rem; }
.figures dt {
  color: var(--ink-faint); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.09em; font-weight: 600;
}
.figures dd { margin: 0.3rem 0 0; font-family: var(--mono); font-size: 2rem; color: var(--measure-ink); line-height: 1; }

/* The mosaic. This is the picture the whole product is about: one block per
   paragraph, tinted by the session that wrote it. A document built up over
   weeks reads as a mosaic; one that arrived in a single action reads as a
   stripe. It is information, not decoration, so it has a text alternative and
   never relies on colour alone -- the table below it says the same thing. */
.mosaic { margin: 1.5rem 0 0.5rem; }
.mosaic__strip {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 0.75rem; background: var(--paper-deep); border-radius: 0.25rem;
}
.mosaic__cell {
  inline-size: 10px; block-size: 22px; border-radius: 1px; background: var(--rule);
}
/* One rule set for both the mosaic and the legend beside each session in the
   table. Colouring the mosaic without colouring the legend leaves the picture
   and the numbers unconnected, which is the whole point of having both. */
[data-session="0"] { background: var(--s0); }
[data-session="1"] { background: var(--s1); }
[data-session="2"] { background: var(--s2); }
[data-session="3"] { background: var(--s3); }
[data-session="4"] { background: var(--s4); }
[data-session="5"] { background: var(--s5); }
[data-session="6"] { background: var(--s6); }
[data-session="7"] { background: var(--s7); }
.mosaic__caption { color: var(--ink-faint); font-size: 0.85rem; margin: 0.6rem 0 0; }

/* A table is the classic cause of a page that scrolls sideways on a phone. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; inline-size: 100%; font-size: 0.93rem; }
.data-table th, .data-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); }
.data-table th {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint);
  border-bottom: 2px solid var(--ink);
}
/* Mono is reserved for measured values, so it is opted into by a class rather
   than applied to whatever happens to sit in the last column. On the detector
   table the last column is a verdict in words, and it read as a readout. */
.data-table td.measure { font-family: var(--mono); color: var(--measure-ink); }
.swatch {
  display: inline-block; inline-size: 0.7rem; block-size: 0.7rem;
  border-radius: 1px; margin-inline-end: 0.5rem; vertical-align: baseline;
}

.shelf { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ------------------------------------------------------------------ limits */

/* Never collapsed. This is the part that stops the report being read as
   something it is not. */
.limits {
  margin-top: 2.5rem; padding: 1.25rem 1.35rem;
  background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 0.25rem;
}
.limits h2 { margin-top: 0; font-size: 1.15rem; }
.limits ul { margin: 0; padding-left: 1.05rem; color: var(--ink-soft); }
.limits li { margin-bottom: 0.55rem; }

.claim { max-width: var(--measure); }
.consent-note {
  max-width: var(--measure); margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 0.88rem;
}

/* --------------------------------------------------------------------- faq */

.faq { margin-top: 2.75rem; max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  cursor: pointer; padding: 0.9rem 0; min-height: 44px;
  font-family: var(--serif); font-size: 1.1rem;
}
.faq__item summary::marker { color: var(--mark); }
.faq__answer { color: var(--ink-soft); padding-bottom: 0.6rem; }

/* ---------------------------------------------------------------- ad slots */

/* The height is reserved before anything loads: an ad that arrives and pushes
   the page is the whole layout-shift problem. Never between the file and the
   result, never inside it, never beside the limits panel. */
.sf-adslot { display: block; min-height: 280px; margin: 3rem 0 0; border: 1px dashed var(--rule); border-radius: 0.25rem; }
.sf-adslot[data-sf-adslot-state="reserved"]::before {
  content: "Advertisement";
  display: flex; align-items: center; justify-content: center; block-size: 280px;
  color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- detector */

.detector {
  margin-top: 1.5rem; padding: 1.35rem;
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--mark);
  border-radius: 0.25rem;
}
.detector__label {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 0.5rem;
}
.detector__input {
  inline-size: 100%; font: inherit; font-size: 1rem; line-height: 1.55;
  padding: 0.85rem; border: 1px solid var(--rule); border-radius: 0.25rem;
  background: var(--paper); color: var(--ink); resize: vertical;
}
.detector__count { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-faint); margin: 0.5rem 0 1rem; }
.detector__count[data-short="true"] { color: var(--mark); }
.detector__note { color: var(--ink-faint); font-size: 0.85rem; margin: 0.85rem 0 0; }
.detector__status { margin: 1.25rem 0 0; color: var(--ink-soft); }
.detector__result { margin-top: 1.5rem; }

/* Bars, not a dial. A needle swinging into a red zone reads as a verdict, and
   the whole page argues that a verdict is what this number is not. Three bars
   side by side read as a comparison, which is what it is. */
.trials { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.trial__label { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.35rem; }
.trial__bar { block-size: 14px; background: var(--paper-deep); border-radius: 2px; overflow: hidden; }
.trial__bar span { display: block; block-size: 100%; background: var(--mark); }
.trial__score { font-family: var(--mono); font-size: 0.9rem; color: var(--measure-ink); margin: 0.35rem 0 0; }

.findings { list-style: none; padding: 0; margin: 0; }
.finding { border-left: 3px solid var(--rule); padding: 0.15rem 0 0.15rem 0.9rem; margin-bottom: 0.9rem; color: var(--ink-soft); }
.finding--high { border-left-color: var(--mark); color: var(--ink); }
.finding--warning { border-left-color: var(--measure-ink); }