/* ==========================================================================
   PDF Form Data Extractor
   Apex Automation Team

   Brand: the dark navy and cyan of apexautomationteam.com, with the layered
   mark as the recurring device. No webfonts and no external assets of any kind,
   so the page makes zero network requests and keeps working offline.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:         #070d17;
  --bg-2:       #0b1421;
  --panel:      #0e1826;
  --panel-2:    #121e2f;
  --field:      #10283a;   /* the highlight of a fillable PDF field, in brand */
  --line:       #1b2a40;
  --line-soft:  #152338;

  /* ink */
  --fg:         #e7f0f8;
  --fg-soft:    #9db0c8;
  --fg-faint:   #8b9bb4;   /* lightened to clear 4.5:1 on the panel background */

  /* accent */
  --cyan:       #22d3ee;
  --cyan-mid:   #18a5c2;
  --cyan-deep:  #10768e;
  --cyan-glow:  rgba(34, 211, 238, .14);

  /* states */
  --ok:         #34d8a4;
  --ok-bg:      rgba(52, 216, 164, .12);
  --warn:       #f7b955;
  --warn-bg:    rgba(247, 185, 85, .13);
  --focus:      #4ee2f8;

  /* scrollbars */
  --bar:        #243348;
  --bar-hover:  #31597a;
  --bar-track:  #0a111d;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --measure: 68ch;
  --radius: 10px;
  --radius-sm: 7px;
  --gutter: 1.25rem;
}

* { box-sizing: border-box; }
::selection { background: var(--cyan); color: #04121a; }

/* ---------- scrollbars ----------
   The browser's default bar is a pale grey slab, which on a dark page reads as
   a strip of someone else's interface stuck to the edge. Styled in two ways
   because the standard properties and the WebKit pseudo-elements are supported
   by different browsers: Firefox honours the first, Chrome and Safari the
   second, and neither complains about the other.

   The thumb is a quiet slate rather than the brand cyan: at full page height it
   is a large block of colour, and cyan there competes with the accent on the
   things that matter. It brightens on hover, so it still responds. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bar) var(--bar-track);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bar-track); }
::-webkit-scrollbar-thumb {
  background: var(--bar);
  border-radius: 99px;
  /* A transparent border with background-clip gives the thumb breathing room
     inside the track without a second element. */
  border: 3px solid var(--bar-track);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bar-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--cyan-deep); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: var(--bar-track); }

/* Inside a panel the track sits on the panel's own surface, not the page's. */
.table-scroll::-webkit-scrollbar-track,
.columns-list::-webkit-scrollbar-track { background: var(--bg-2); }
.table-scroll::-webkit-scrollbar-thumb,
.columns-list::-webkit-scrollbar-thumb {
  border-color: var(--bg-2);
}
.table-scroll, .columns-list { scrollbar-color: var(--bar) var(--bg-2); }

/* A horizontal bar on a table is thinner, so it does not eat the last row. */
.table-scroll::-webkit-scrollbar { height: 10px; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -220px, rgba(34, 211, 238, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cyan); color: #04121a;
  padding: .7rem 1.1rem; z-index: 60; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 13, 23, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px;
  color: var(--fg); text-decoration: none;
  font-size: 1.08rem; letter-spacing: -0.015em; white-space: nowrap;
}
.brand-mark { display: block; flex: 0 0 auto; }
.brand-text { font-weight: 300; }
.brand-text b { font-weight: 700; }

.masthead-nav { display: flex; align-items: center; gap: .3rem; }
.masthead-nav a {
  color: var(--fg-soft); text-decoration: none;
  font-size: .9rem; padding: .45rem .7rem; border-radius: var(--radius-sm);
}
.masthead-nav a:hover { color: var(--fg); background: var(--panel); }
.masthead-nav .cta {
  color: var(--cyan); border: 1px solid rgba(34, 211, 238, .35);
  background: var(--cyan-glow);
}
.masthead-nav .cta:hover { color: #04121a; background: var(--cyan); border-color: var(--cyan); }

/* The masthead is sticky, so anything an in-page link jumps to needs room to
   clear it or the heading lands underneath the bar. */
[id] { scroll-margin-top: 84px; }

/* ---------- hero, centred ---------- */
.hero { padding-block: clamp(2.2rem, 7vw, 4.4rem) clamp(1.3rem, 3vw, 2rem); }
.hero-in { text-align: center; }

.kicker {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .3rem .85rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--cyan);
  background: var(--cyan-glow);
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 99px;
}

.hero-mark {
  display: block; margin: 0 auto 1rem;
  width: clamp(72px, 13vw, 104px); height: auto;
}

.hero h1 {
  margin: 0 auto .5rem;
  max-width: 20ch;
  font-size: clamp(1.9rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

.tagline {
  margin: 0 auto 1rem;
  /* Wide enough that the line breaks where the sense does rather than between
     "PDF" and "forms", which a non-breaking space also guards against. */
  max-width: 34ch;
  text-wrap: balance;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.standfirst {
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--fg-soft);
  text-wrap: pretty;
}

.hero-points {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.hero-points li {
  font-size: .84rem; color: var(--fg-soft);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 99px; padding: .25rem .85rem;
}
.hero-points li::before {
  content: "";
  display: inline-block; width: 5px; height: 5px; margin-right: .5rem;
  border-radius: 50%; background: var(--cyan); vertical-align: middle;
}

/* ---------- drop zone ---------- */
.tool { padding-bottom: 3rem; }

.dropzone {
  position: relative;
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(34, 211, 238, .10), transparent 70%),
    var(--field);
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4.5vw, 2.5rem) var(--gutter) clamp(1.7rem, 4vw, 2.4rem);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone::after {
  content: "";
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem;
  border-bottom: 1px dashed rgba(34, 211, 238, .28);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--cyan);
  background-color: #123044;
}
.dropzone.is-over { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .dropzone { transition: none; } }

.dropzone-icon { opacity: .92; margin-bottom: .5rem; }
.dropzone-lead {
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.dropzone-help, .dropzone-sample { margin: .2rem 0 0; color: var(--fg-soft); font-size: .95rem; }
.dropzone-sample { margin-top: .85rem; font-size: .88rem; }
.sep {
  display: inline-block; width: 1px; height: .85em;
  background: rgba(34, 211, 238, .4); margin: 0 .6rem;
  vertical-align: -.1em;
}

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--cyan);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(34, 211, 238, .45);
  cursor: pointer;
}
.linkish:hover { text-decoration-color: var(--cyan); }

/* ---------- progress ---------- */
.progress { margin-top: 1.1rem; }
.progress-bar {
  height: 4px; background: var(--line); border-radius: 99px; overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  transition: width .18s linear;
}
@media (prefers-reduced-motion: reduce) { .progress-bar span { transition: none; } }
.progress-text { margin: .5rem 0 0; font-size: .88rem; color: var(--fg-soft); }

/* ---------- counters ---------- */
.counters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.7rem 0 0; font-size: .88rem; color: var(--fg-soft);
}
.counters .chip {
  border: 1px solid var(--line); border-radius: 99px;
  padding: .25rem .8rem; background: var(--panel);
}
.counters .chip b { color: var(--fg); font-weight: 700; }
.counters .chip.warn { border-color: rgba(247, 185, 85, .45); color: var(--warn); }
.counters .chip.warn b { color: var(--warn); }

/* ---------- panels ---------- */
.panel {
  margin-top: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem var(--gutter) 1.35rem;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.panel h2 {
  margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em;
}
.panel-sub {
  margin: -.4rem 0 .95rem; font-size: .9rem; color: var(--fg-soft);
  max-width: var(--measure);
}

/* ---------- tables ---------- */
.table-scroll {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.data-scroll { max-height: min(62vh, 640px); }

table { border-collapse: collapse; width: 100%; font-size: .87rem; }

/* The data table has as many columns as the forms have fields, which can be
   dozens. width:100% alone squeezes them all into the container, and past a
   point the browser breaks headings one character per line to make them fit.
   Letting the table take its content's width instead, with 100% as a floor,
   means it fills the panel when it is small and scrolls inside it when it is
   not. The per cell max-width still caps any single runaway column. */
.data { width: max-content; min-width: 100%; }

th, td {
  text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--fg);
  white-space: nowrap;
}
/* A field name is whatever the form's author typed, and some of them run to
   hundreds of characters. Left to nowrap, one such name stretched its column to
   1500px and pushed everything else off the screen. */
.data th.col-field {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 26ch;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Field names and stored values are identifiers lifted out of the file rather
   than prose, so they are set apart from it. */
.register td.file, .data th.col-field, td.ident {
  font-family: var(--mono); font-size: .81rem;
}
.data th.col-field { color: var(--cyan); }

.data td {
  max-width: 28ch;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.data th:first-child, .data td:first-child { min-width: 15ch; max-width: 30ch; }
.data td.empty {
  background: repeating-linear-gradient(
    135deg, transparent, transparent 5px,
    rgba(157, 176, 200, .07) 5px, rgba(157, 176, 200, .07) 10px);
}
.data th .col-meta {
  display: block; font-weight: 400; font-size: .71rem; color: var(--warn);
  font-family: var(--sans);
}

/* status pills */
.pill {
  display: inline-block; padding: .1rem .55rem; border-radius: 99px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--cyan-glow); color: var(--cyan); }

.reason {
  display: block; margin-top: .3rem;
  color: var(--fg-soft); font-size: .82rem; max-width: 54ch;
}

.pw-form { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.pw-form input {
  font: inherit; font-size: .85rem; padding: .45rem .55rem; min-height: 38px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg); width: 11rem; min-width: 0;
}
.pw-form input::placeholder { color: var(--fg-faint); }

.file-notes { margin-top: .85rem; font-size: .86rem; color: var(--fg-soft); }
.file-notes p { margin: .35rem 0; }
.file-notes strong { color: var(--fg); }
.file-notes code {
  font-family: var(--mono); font-size: .8rem; color: var(--cyan);
  background: rgba(34, 211, 238, .08); padding: .05rem .3rem; border-radius: 4px;
}

/* ---------- controls ---------- */
.seg {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden; background: var(--bg-2);
}
.seg-btn {
  font: inherit; font-size: .83rem; padding: .4rem .85rem;
  background: transparent; color: var(--fg-soft);
  border: 0; cursor: pointer; white-space: nowrap;
}
.seg-btn.is-on { background: var(--cyan); color: #04121a; font-weight: 600; }

.opts { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin: 0 0 .9rem; }
.opt {
  font-size: .86rem; color: var(--fg-soft);
  display: inline-flex; gap: .55rem; align-items: center; cursor: pointer;
  max-width: 42ch; min-height: 36px; padding-block: .15rem;
}
/* Comfortably tappable on a phone: the box itself, not just the label. */
.opt input {
  flex: 0 0 auto; accent-color: var(--cyan);
  width: 1.2rem; height: 1.2rem; margin: 0;
}

.columns {
  margin-bottom: .95rem; border-top: 1px solid var(--line-soft); padding-top: .8rem;
}
.columns summary {
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding-block: .3rem;
  list-style: none;
}
.columns summary::-webkit-details-marker { display: none; }
/* display:flex removes the browser's own disclosure triangle, so the panel
   draws its own and turns it when the panel opens. */
.columns summary::before {
  content: ""; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 6px solid var(--cyan);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .15s ease;
}
.columns[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .columns summary::before { transition: none; }
}
.columns-help { font-size: .85rem; color: var(--fg-soft); max-width: var(--measure); }
.columns-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.columns-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .35rem; max-height: 20rem; overflow: auto;
}
.columns-list li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: 42px; padding: .4rem .45rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.columns-list input[type=checkbox] {
  accent-color: var(--cyan); flex: 0 0 auto;
  width: 1.2rem; height: 1.2rem; margin: 0;
}
.ctoggle {
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; cursor: pointer; flex: 0 1 auto; min-width: 0;
}
.columns-list .cname {
  font-family: var(--mono); font-size: .77rem; color: var(--fg-soft);
  flex: 0 1 auto; max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.columns-list input[type=text] {
  flex: 1 1 7rem; min-width: 5rem; font: inherit; font-size: .82rem;
  padding: .2rem .45rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--fg);
}
.columns-list .cmeta { font-size: .73rem; color: var(--warn); flex: 0 0 auto; }
.columns-list .move {
  font: inherit; font-size: .8rem; line-height: 1;
  min-width: 2rem; min-height: 2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--fg-soft);
}
.columns-list .move:hover:not([disabled]) { color: var(--cyan); border-color: var(--cyan-deep); }

button.ghost {
  font: inherit; font-size: .82rem; padding: .35rem .7rem;
  background: var(--bg-2); color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
button.ghost:hover { color: var(--fg); border-color: var(--cyan-deep); }

button.primary, button.secondary {
  font: inherit; font-size: .93rem; font-weight: 600;
  padding: .62rem 1.15rem; border-radius: var(--radius-sm); cursor: pointer;
  min-height: 44px;
}
button.primary {
  background: var(--cyan); color: #04121a; border: 1px solid var(--cyan);
}
button.primary:hover { background: #4ee2f8; border-color: #4ee2f8; }
button.secondary {
  background: transparent; color: var(--fg); border: 1px solid var(--line);
}
button.secondary:hover { border-color: var(--cyan-deep); color: var(--cyan); }
button[disabled] { opacity: .45; cursor: not-allowed; }

.export-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.export-status { font-size: .86rem; color: var(--ok); }
.export-note {
  margin: .9rem 0 0; font-size: .85rem; color: var(--fg-soft);
  max-width: var(--measure);
}
.export-warnings {
  margin-top: .85rem; padding: .65rem .8rem; font-size: .85rem;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(247, 185, 85, .3); border-radius: var(--radius-sm);
}
.export-warnings p { margin: .15rem 0; }

.preview-note { margin: .6rem 0 0; font-size: .82rem; color: var(--fg-faint); }
.boot-error {
  margin-top: 1.2rem; padding: .85rem 1rem;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(247, 185, 85, .3);
  border-radius: var(--radius-sm); font-size: .9rem;
}

/* ---------- inline export rows ---------- */
.inline-export {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .9rem;
}
.inline-export-label { font-size: .84rem; color: var(--fg-faint); margin-right: .2rem; }

.row-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
/* Keep the three on one line where the column allows it; they only wrap when
   the table is genuinely too narrow for them. */
.register th:last-child, .register td:last-child { white-space: nowrap; min-width: 15rem; }
@media (max-width: 620px) {
  .register th:last-child, .register td:last-child { min-width: 0; white-space: normal; }
}
.row-actions button {
  font: inherit; font-size: .76rem; font-weight: 600;
  padding: .3rem .55rem; min-height: 32px;
  background: transparent; color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.row-actions button:hover { color: var(--cyan); border-color: var(--cyan-deep); }
.row-actions .none { color: var(--fg-faint); font-size: .78rem; align-self: center; }

/* ---------- prose ----------
   The written part of the page is centred as a column: headings and paragraphs
   centred outright, list items left aligned inside a centred block so they stay
   readable rather than ragged on both edges. */
.prose { padding-block: 2.6rem .4rem; text-align: center; }
.prose h2 {
  margin: 0 auto .8rem; font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance;
}
.prose h3 {
  margin: 1.4rem auto .45rem; font-size: 1.02rem; font-weight: 600; color: var(--fg);
  max-width: 44ch; text-wrap: balance;
}
.prose p {
  margin: 0 auto .8rem; max-width: 62ch; color: var(--fg-soft); text-wrap: pretty;
}
.prose .small { font-size: .88rem; }

/* The method note under the sources table. It is the one place on the page that
   says how the research was actually done, including where it came up empty, so
   it is set apart from the surrounding prose rather than reading as one more
   paragraph of it. */
.method {
  max-width: 60ch !important;
  margin: 1.6rem auto 0 !important;
  padding: 1rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--radius);
  font-size: .9rem;
  text-align: left;
}
.method b { color: var(--fg); }

.method .mail { margin-top: .45rem; }
.verify {
  display: block; max-width: 58ch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: .9rem; margin-block: 1.4rem;
}
.meter { font-size: .85rem; color: var(--ok); font-family: var(--mono); }

/* ---------- the reads / cannot read pair ----------
   Stacked rather than side by side. As two columns, one list was nine items and
   the other four, so the short one left a slab of empty card beneath it however
   the heights were matched. Stacked, each card is as tall as its own content,
   and the items flow into columns so the width is not wasted either. */
.stack-cards {
  display: grid; gap: 1rem;
  margin-top: 1.5rem;
  text-align: left;
}

.col-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem;
}
.col-block h3 {
  margin: 0 0 1rem; max-width: none; text-align: left;
}

/* The heading is a tag rather than plain text, so reads and cannot read are told
   apart at a glance instead of by reading them. */
.col-tag {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 99px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
}
.col-tag.ok { background: var(--ok-bg); color: var(--ok); }
.col-tag.warn { background: var(--warn-bg); color: var(--warn); }

.col-foot {
  margin: 1rem 0 0 !important; padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem; text-align: left !important; max-width: none !important;
}

/* Two columns of items once there is room for them.
   A grid rather than CSS columns: column-count balances by height and, with
   items that wrap to different line counts, routinely left one column 70px
   shorter than the other and a slab of empty card below it. A grid fills row by
   row, so the block always ends level. */
.cols-2 { display: grid; gap: 0 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- the numbers, as tiles ---------- */
/* A long paragraph claiming a thing was tested well is a paragraph nobody
   reads. The figures are the claim, so they are set large enough to be read
   at a glance and the words around them are kept to a label. */
.stats {
  display: grid; gap: .7rem; margin-top: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}
@media (min-width: 620px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .95rem 1rem 1rem;
  /* The tile scales with its own width rather than the viewport, so a six
     across row and a two across row both keep the number on one line. */
  container-type: inline-size;
}
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: 1.6rem; font-size: min(1.6rem, 20cqw);
  line-height: 1.1; font-weight: 700;
  color: var(--cyan);
  /* No tabular figures here. Fixed advance widths give the thousands comma a
     whole digit of space, so 1,218 was being drawn as 1 , 218. These numbers
     sit alone in a tile rather than in a column, so there is nothing to line
     them up with and nothing to gain by it. */
}
.stat span {
  display: block; margin-top: .3rem;
  font-size: .8rem; line-height: 1.35; color: var(--fg-soft);
}
.stat.zero b { color: var(--ok); }

/* ---------- what each test run covers ---------- */
.suites {
  display: grid; gap: .45rem; margin-top: 1.5rem;
  list-style: none; padding: 0;
  text-align: left;
}
@media (min-width: 760px) { .suites { grid-template-columns: 1fr 1fr; gap: .45rem 1rem; } }

.suites li {
  display: grid; grid-template-columns: 4.1rem 1fr; align-items: baseline;
  gap: .1rem .7rem;
  padding: .5rem .8rem;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: .89rem; color: var(--fg-soft);
}
.suites b {
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
/* The name of the test file, as a caption under the description rather than
   trailing it. Inline, it ran on from the sentence and read as part of it:
   "the server config that ships with it run-tests". */
.suites i {
  display: block; margin-top: .15rem;
  font-style: normal; font-family: var(--mono);
  color: var(--fg-faint); font-size: .76rem; letter-spacing: .01em;
}
.suites li > span { min-width: 0; }

/* ---------- short points, in a box each ---------- */
.notes {
  display: grid; gap: .7rem; margin-top: 1.5rem;
  text-align: left;
}
@media (min-width: 820px) { .notes { grid-template-columns: 1fr 1fr; } }

.note {
  padding: .95rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--radius-sm);
}
.note b { display: block; color: var(--fg); font-size: .92rem; margin-bottom: .25rem; }
.note span { display: block; font-size: .88rem; line-height: 1.5; color: var(--fg-soft); }

.tick, .cross { list-style: none; margin: 0; padding: 0; }
.tick li, .cross li {
  position: relative; padding-left: 1.6rem; margin-bottom: .55rem;
  color: var(--fg-soft); font-size: .92rem; text-align: left;
}
.tick li::before {
  content: ""; position: absolute; left: .2rem; top: .5em;
  width: 9px; height: 5px; border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.cross li::before {
  content: ""; position: absolute; left: .15rem; top: .72em;
  width: 10px; height: 2px; background: var(--warn); border-radius: 2px;
}

.faq { display: grid; gap: .45rem; }

/* The question is the tap target, so it has to be one: 26px of text is below
   every published minimum and was failing the size sweep on four devices. */
.faq details {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); text-align: left;
}
.faq details[open] { border-color: var(--cyan-deep); }
.faq summary {
  display: flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .6rem 1rem;
  cursor: pointer; font-weight: 600; color: var(--fg); font-size: .95rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.faq details[open] summary::before { transform: rotate(45deg); }
.faq summary:hover { color: var(--cyan); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.faq details p {
  margin: 0; padding: 0 1rem 1rem 2.2rem;
  color: var(--fg-soft); font-size: .92rem; text-align: left; max-width: none;
}
.faq h3 { margin: 1.7rem auto .4rem; }
.faq h3:first-child { margin-top: .5rem; }
.faq p { margin: 0 auto; }

/* ---------- support band ---------- */
.support { padding-block: 3rem 1rem; }
.support-inner {
  background:
    radial-gradient(760px 300px at 50% -10%, rgba(34, 211, 238, .14), transparent 70%),
    var(--panel);
  border: 1px solid rgba(34, 211, 238, .25);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.1rem, 4vw, 2.4rem);
  text-align: center;
}
.support-mark { display: block; margin: 0 auto .9rem; width: 56px; height: auto; }
.support-inner h2 {
  margin: 0 auto .6rem; font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance;
}
.support-inner > p { margin: 0 auto .9rem; color: var(--fg-soft); max-width: 64ch; }
/* The address is long enough to overflow a folded phone, so it is allowed to
   break anywhere and is padded into a proper tap target. No underline: at this
   length it draws a heavy bar across the sentence. The colour carries it, and
   the underline comes back on hover so it still reads as a link. */
/* The address never breaks. Not mid-word, not at the @, not at all.
 *
 * It is one unbreakable token 19.46em wide, so it fits on one line only while
 * the font stays under 1/19.46 of the space it has, which is 5.14% of the
 * containing block. Two earlier attempts both failed on that arithmetic:
 * overflow-wrap: anywhere kept it inside the box by snapping it through its
 * own middle, and sizing it against the viewport held only at the font size
 * the tests happened to run at, because a reader with browser text scaling on
 * grows the rem while the footer column, being a fraction of the viewport,
 * does not grow with it.
 *
 * Container query units are measured against the block the address actually
 * sits in, so they survive both. 4.8cqw leaves headroom under the 5.14% the
 * text needs. min() means the address only ever shrinks when the column is
 * genuinely too narrow, and nowrap guarantees that when it does fit, it fits
 * on one line. The three blocks below become query containers for it. */
.foot-mail, .method, .support-write { container-type: inline-size; }

.mail, .foot-mail a {
  display: inline-flex; align-items: center; min-height: 36px;
  max-width: 100%;
  white-space: nowrap;
  font-size: .88rem;                 /* fallback for anything without cqw */
  font-size: min(1em, 4.8cqw);
  color: var(--cyan); text-decoration: none; font-weight: 500;
}
.mail:hover, .foot-mail a:hover {
  text-decoration: underline; text-underline-offset: 4px;
}
.foot-mail { margin: .5rem 0 0; font-size: .88rem; }

.support-list {
  list-style: none; margin: 1.2rem auto 1.5rem; padding: 0;
  display: grid; gap: .5rem; max-width: 46ch; text-align: left;
}
.support-list li {
  position: relative; padding-left: 1.7rem;
  font-size: .92rem; color: var(--fg-soft);
}
.support-list li::before {
  content: ""; position: absolute; left: .2rem; top: .5em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

.support-cta {
  display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: center; align-items: center;
  margin: 0 auto 1rem; max-width: 100%;
}
.support-note { font-size: .88rem; color: var(--fg-faint); max-width: 54ch; margin-inline: auto; }

.primary-link, .plain-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; text-align: center; max-width: 100%;
  padding: .55rem 1.2rem; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600; font-size: .93rem;
  overflow-wrap: anywhere;
}
.primary-link { background: var(--cyan); color: #04121a; }
.primary-link:hover { background: #4ee2f8; }
.plain-link { color: var(--fg-soft); border: 1px solid var(--line); }
.plain-link:hover { color: var(--cyan); border-color: var(--cyan-deep); }

/* ---------- footer ---------- */
.foot {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.foot-in {
  display: grid; gap: 1.8rem;
  grid-template-columns: 1fr;
  padding-block: 2.2rem 1.6rem;
}
@media (min-width: 640px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .foot-in { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.4rem; } }

.foot-brand p {
  margin: .8rem 0 0; color: var(--fg-soft); font-size: .88rem; max-width: 34ch;
}
.foot-col h2 {
  margin: 0 0 .6rem; font-size: .83rem; font-weight: 700; color: var(--fg);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.foot-col li { font-size: .88rem; color: var(--fg-soft); padding-block: .25rem; }
/* Padded so each line is a comfortable tap on a phone rather than a 17px strip. */
.foot-col a {
  color: var(--fg-soft); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 34px;
}
.foot-col a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.foot-base {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-block: 1.1rem 2rem;
}
.foot-base p { margin: 0; font-size: .82rem; color: var(--fg-faint); }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .masthead-nav a:not(.cta) { display: none; }
}
@media (max-width: 620px) {
  :root { --gutter: 1rem; }
  .panel { padding-inline: .85rem; }
  .panel-head { align-items: flex-start; }
  .seg { width: 100%; }
  .seg-btn { flex: 1 1 0; padding-inline: .5rem; }
  .data td { max-width: 20ch; }
  .data th:first-child, .data td:first-child { min-width: 12ch; }
  .export-row > button { width: 100%; }
  .export-status { width: 100%; }
  .ctoggle {
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; cursor: pointer; flex: 0 1 auto; min-width: 0;
}
.columns-list .cname { max-width: 100%; flex-basis: 100%; }
  .foot-base { flex-direction: column; }
}
@media (max-width: 380px) {
  body { font-size: 15px; }
  .brand { font-size: 1rem; }
  .masthead-nav .cta { padding: .4rem .55rem; font-size: .84rem; }
  .hero-points li { font-size: .79rem; padding: .22rem .6rem; }
  .counters { font-size: .83rem; }
}

/* ---------- print ---------- */
@media print {
  .masthead, .dropzone, .support, .foot, .export, .skip, .progress,
  .inline-export, .row-actions { display: none; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; break-inside: avoid; }
  .data-scroll { max-height: none; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.1rem;
  transform: translate(-50%, 1rem);
  z-index: 70; pointer-events: none;
  max-width: min(92vw, 30rem);
  padding: .65rem 1.05rem;
  background: var(--panel-2);
  border: 1px solid rgba(34, 211, 238, .4);
  border-radius: 99px;
  color: var(--fg); font-size: .88rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .18s ease; }
  .toast.is-on { transform: translate(-50%, 0); }
}
@media print { .toast { display: none; } }

/* ---------- intake note ---------- */
.intake-note {
  margin: 1.5rem 0 0;
  padding: .6rem .85rem;
  background: var(--warn-bg);
  border: 1px solid rgba(247, 185, 85, .3);
  border-radius: var(--radius-sm);
  color: var(--warn);
  font-size: .86rem;
}

.dropzone-hint {
  margin: .35rem 0 0; font-size: .8rem; color: var(--fg-faint);
}

/* ---------- the story section ----------
   The one place on the page that is written to be read rather than scanned, so
   it gets a wider measure, more air between paragraphs, and two lines pulled out
   at the size they deserve. */
.story { padding-block: 3.2rem 1rem; }
.story p { margin-bottom: 1.15rem; }

.story-lead {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  color: var(--fg) !important;
  max-width: 54ch !important;
}

.story-turn {
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 600;
  color: var(--cyan) !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 30ch !important;
  margin-block: 2rem 1.6rem !important;
  text-wrap: balance;
}

.story-close {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--fg) !important;
  font-weight: 500;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
  margin-top: 1.9rem !important;
  max-width: 44ch !important;
}

/* While a batch is being read the drop zone stops inviting more work. */
.dropzone.is-busy {
  opacity: .65;
  pointer-events: none;
  cursor: progress;
}
.linkish[disabled] { opacity: .5; cursor: not-allowed; text-decoration: none; }

/* ==========================================================================
   Product Title Character Counter
   Built on the same tokens as the rest of the Apex tools; everything below is
   specific to counting.
   ========================================================================== */

/* ---------- the paste box ----------
   These three rules went missing when a block of styles belonging to an
   earlier tool was trimmed out of this file, and nothing noticed: the
   textarea fell back to the browser's own appearance, which is a white box
   in Courier sitting in the middle of a dark page. Every size check passed,
   because none of them had any opinion about colour. There is one now. */
.composer {
  margin: 1.1rem auto 0;
  max-width: 48rem;
  text-align: left;
}
.composer-label {
  display: block;
  margin: 0 0 .45rem;
  font-size: .92rem; font-weight: 600; color: var(--fg);
}
.composer-box {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 8.5rem; resize: vertical;
  padding: .75rem .9rem;
  font-family: var(--mono); font-size: .88rem; line-height: 1.55;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.composer-box::placeholder { color: var(--fg-faint); }
.composer-box:hover { border-color: var(--cyan-deep); }
.composer-box:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
/* The buttons under the box read as one row rather than a sentence. */
.composer + .drop-note.small,
.composer .drop-note.small {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: .8rem;
}

/* ---------- the drop zone ---------- */
.drop {
  text-align: center;
  padding: 2.4rem 1.25rem 2rem;
  background: var(--panel);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, background .15s ease;
}
.drop.over { border-color: var(--cyan); background: var(--panel-2); }
.drop-mark { opacity: .9; margin-bottom: .6rem; }
.drop h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.drop-or { margin: 0 0 .9rem; color: var(--fg-soft); }
.drop-note { margin: 0 auto .35rem; max-width: 46ch; color: var(--fg-faint); font-size: .92rem; }
.drop-note.small { font-size: .86rem; margin-top: .7rem; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--cyan); text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--focus); }

.intake { margin: 1rem auto 0; max-width: 60ch; text-align: center; color: var(--fg-soft); }
.intake.warn { color: var(--warn); }

/* ---------- password ---------- */
.password-ask { margin-top: 1.2rem; }
.pw-row { display: grid; gap: .6rem; margin-top: .8rem; }
.pw-row .pw { font-family: var(--mono); }
@media (min-width: 620px) {
  .pw-row { grid-template-columns: auto 1fr auto auto; align-items: center; }
  .pw-row .composer-label { margin: 0; }
}

/* ---------- the result sheet ---------- */
.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: left;
}
.sheet + .sheet { margin-top: 1rem; }
.sheet h3 { margin: 0 0 .2rem; font-size: 1.05rem; text-align: left; }
.sheet .sub { margin: 0 0 .9rem; color: var(--fg-soft); font-size: .9rem; }

/* The headline count, as a verdict rather than a number on its own. */
.tally {
  display: grid; gap: .55rem; margin: 0 0 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally div {
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  container-type: inline-size;
}
.tally b {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: 1.35rem; font-size: min(1.35rem, 22cqw); line-height: 1.1;
}
.tally span { display: block; margin-top: .2rem; font-size: .78rem; color: var(--fg-soft); }
.tally .ok b { color: var(--ok); }
.tally .warn b { color: var(--warn); }
.tally .plain b { color: var(--cyan); }

/* ---------- what the file was read as ---------- */
.reading {
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: .89rem; color: var(--fg-soft);
}
.reading b { color: var(--fg); }
.reading .row { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* ---------- the rows ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table.addr { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .86rem; }
table.addr th, table.addr td {
  padding: .45rem .6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
table.addr thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--fg);
  font-weight: 600; font-size: .8rem;
}
/* A max-width on a cell does nothing in a width:max-content table, so the
   long columns carry an inner block that can actually be constrained.
   Without it the "what is wrong" column stretched to its longest sentence
   and pushed the table past three thousand pixels. */
table.addr td.original, table.addr td.why { white-space: normal; }
table.addr td.original span, table.addr td.why span {
  display: block; max-width: 34ch; white-space: normal;
}
table.addr td.original { color: var(--fg-soft); }
table.addr td.original span { min-width: 16ch; }
table.addr tbody tr.flagged { background: var(--warn-bg); }
table.addr tbody tr.bad { background: rgba(247, 185, 85, .2); }
table.addr .mark { font-family: var(--mono); font-size: .78rem; }
table.addr .mark.ok { color: var(--ok); }
table.addr .mark.no { color: var(--warn); font-weight: 700; }
.why { color: var(--warn); font-size: .82rem; }
.why span { max-width: 56ch; }

/* A cell the reader can correct in place, which is the difference between
   finding a bad row and fixing it. */
table.addr td.editable { padding: 0; }
/* Each column is given a width that suits what goes in it. Left to size
   themselves, the inputs took a browser default of roughly 170px each, so
   eleven columns of mostly empty Recipient and Unit pushed Street and City
   off the right of the screen: the two columns people actually came for. */
table.addr td.editable { width: 1%; }
table.addr td.editable input { width: 15ch; }
table.addr input[data-field="houseNumber"] { width: 7ch; }
table.addr input[data-field="admin"] { width: 9ch; }
table.addr input[data-field="postcode"] { width: 11ch; }
table.addr input[data-field="unit"] { width: 10ch; }
table.addr input[data-field="street"] { width: 24ch; }
table.addr input[data-field="city"] { width: 16ch; }
table.addr input[data-field="district"] { width: 14ch; }
table.addr input[data-field="country"] { width: 13ch; }
table.addr input[data-field="recipient"] { width: 16ch; }

table.addr td.editable input {
  box-sizing: border-box;
  font: inherit; font-size: .86rem;
  padding: .45rem .6rem;
  background: transparent; color: var(--fg);
  border: 1px solid transparent; border-radius: 3px;
}
table.addr td.editable input:hover { border-color: var(--line); }
table.addr td.editable input:focus {
  outline: none; border-color: var(--cyan); background: var(--bg-2);
}

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
.filters button[aria-pressed="true"] {
  background: var(--cyan-glow); border-color: var(--cyan); color: var(--fg); font-weight: 600;
}

/* ---------- downloads ---------- */
.downloads { display: grid; gap: .7rem; }
.dl-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.dl-row label { font-size: .88rem; color: var(--fg-soft); }
select.preset {
  font: inherit; font-size: .88rem; padding: .4rem .6rem;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 40px;
}
.dl-note { margin: .2rem 0 0; font-size: .85rem; color: var(--fg-faint); }

@media (max-width: 560px) {
  .export-buttons .primary, .export-buttons .secondary { width: 100%; }
}

/* ---------- a short block of code in the prose ---------- */
pre.code {
  margin: 1.1rem auto; padding: .9rem 1rem;
  max-width: 62ch; overflow-x: auto;
  text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
pre.code code {
  font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  color: var(--fg-soft);
  /* Wrapping rather than scrolling. A horizontal scroller inside the prose
     is easy to miss on a phone, and these samples are short enough to wrap
     without losing their shape. */
  white-space: pre-wrap; word-break: break-word;
}
.inline-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; flex-wrap: wrap; max-width: 100%;
}
.inline-label.spaced { margin-left: 1rem; }
.inline-label select { max-width: 100%; }
/* On a 320px screen the country selector sat beside its label and pushed the
   paragraph past the edge. Below that width they stack instead. */
@media (max-width: 400px) {
  .inline-label { display: flex; }
  .inline-label.spaced { margin-left: 0; margin-top: .5rem; }
}
.reading-note { margin: .5rem 0 0; max-width: 100%; }
.inline-label select { margin-left: .2rem; }

/* The hidden attribute is a user-agent rule of the lowest specificity there
   is, so any class that sets display beats it and the element stays on the
   page. The progress bar sat there empty on every visit for exactly this
   reason: .splitting sets display:flex, and hidden lost. One rule covers
   every element that will ever carry the attribute. */


[hidden] { display: none !important; }

/* ---------- progress on a long file ---------- */
.splitting {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin: 1rem 0 0; padding: .8rem 1rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--fg-soft);
}
.splitting .bar {
  flex: 1 1 14rem; min-width: 10rem; height: 8px;
  background: var(--bar-track); border-radius: 99px; overflow: hidden;
}
.splitting .fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  transition: width .12s linear;
}

/* ---------- what the file says about itself ---------- */
/* The second file-level block, about where the data is going rather than
   where it came from. Marked apart so the two are not read as one list. */
.filecheck.fitness { border-left-color: var(--cyan); }

/* ---------- one file, several countries ---------- */
.filecheck.mixed {
  background: var(--panel); border-color: var(--line);
  border-left: 3px solid var(--ok);
}
.groups {
  display: grid; gap: .5rem; margin: .2rem 0 .9rem; padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .groups { grid-template-columns: 1fr 1fr 1fr; } }
.groups li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n label" "n rules" "btn btn";
  gap: .1rem .6rem; align-items: baseline;
  padding: .6rem .8rem;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.groups b {
  grid-area: n; align-self: center;
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  color: var(--ok);
}
.groups span { grid-area: label; color: var(--fg); font-size: .88rem; }
.groups i { grid-area: rules; font-style: normal; color: var(--fg-faint); font-size: .78rem; }
.groups button { grid-area: btn; justify-self: start; margin-top: .45rem; }
.filecheck code {
  font-family: var(--mono); font-size: .82rem;
  padding: .05rem .3rem; border-radius: 3px;
  background: var(--bg-2); color: var(--fg);
  word-break: break-word;
}

.filecheck {
  margin: 0 0 1rem; padding: .9rem 1.1rem;
  background: var(--warn-bg); border: 1px solid rgba(247, 185, 85, .3);
  border-radius: var(--radius-sm);
  text-align: left;
}
.filecheck h4 { margin: 0 0 .2rem; font-size: .96rem; color: var(--fg); }
.filecheck .small { margin: 0 0 .6rem; color: var(--fg-soft); font-size: .84rem; }
.filecheck ul { margin: 0; padding-left: 1.1rem; }
.filecheck li { margin-bottom: .35rem; font-size: .89rem; color: var(--fg-soft); }
.filecheck b { color: var(--fg); }