/* ==========================================================================
   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; }
}

.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: .2rem; }
.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.
   ========================================================================== */

/* ---------- mode switch ---------- */
.modes { margin-bottom: 1.2rem; }

/* ---------- the composer ---------- */
.composer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem var(--gutter) 1.2rem;
}
.composer-label {
  display: block; margin: 0 0 .45rem;
  font-size: .88rem; font-weight: 600; color: var(--fg);
}
.composer-box {
  display: block; width: 100%;
  font: inherit; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.5;
  padding: .75rem .85rem;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  resize: vertical; min-height: 3.4rem;
}
.composer-box:focus { border-color: var(--cyan-deep); }
.composer-box::placeholder { color: var(--fg-faint); }

.composer-foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem;
  align-items: center; justify-content: space-between; margin-top: .7rem;
}
.counts { margin: 0; font-size: .9rem; color: var(--fg-soft); }
.counts b { color: var(--fg); font-variant-numeric: tabular-nums; }
.composer-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* A dot that is drawn rather than typed, so no character sits in the text. */
.sep-dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-faint); vertical-align: middle; margin: 0 .5rem;
}

.count-note, .issues {
  margin: .9rem 0 0; padding: .65rem .8rem;
  font-size: .86rem; border-radius: var(--radius-sm);
}
.count-note {
  background: var(--cyan-glow); color: var(--fg-soft);
  border: 1px solid rgba(34, 211, 238, .25);
}
.count-note b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.issues {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(247, 185, 85, .3);
}

/* ---------- the marketplace boards ---------- */
.boards {
  display: grid; gap: 1rem; margin-top: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .boards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .boards { grid-template-columns: repeat(3, 1fr); } }

.board {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--cyan));
  border-radius: var(--radius);
  padding: 1rem 1.05rem 1.1rem;
  display: flex; flex-direction: column;
}
/* Over the limit, the card's outline warms up but the left edge keeps the
   marketplace's own colour, because that stripe is how you find the card you
   are looking for. The pill in the header carries the warning. */
.board.over {
  border-top-color: rgba(247, 185, 85, .45);
  border-right-color: rgba(247, 185, 85, .45);
  border-bottom-color: rgba(247, 185, 85, .45);
  background:
    linear-gradient(180deg, rgba(247, 185, 85, .05), transparent 120px),
    var(--panel);
}

.board-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .35rem;
}
.board-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.board-blurb {
  margin: 0 0 .9rem; font-size: .83rem; color: var(--fg-faint);
}

/* ---------- a field inside a board ---------- */
.field-row { padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.field-row:first-of-type { border-top: 0; padding-top: 0; }
.field-row.is-empty { opacity: .72; }

.field-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap;
}
.field-label { font-size: .88rem; font-weight: 600; }
.status-chip { font-size: .7rem; font-weight: 600; }

.gauge {
  position: relative; height: 7px; border-radius: 99px;
  background: var(--line); overflow: visible; margin-bottom: .35rem;
}
.gauge > span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--ok); transition: width .12s linear;
}
.gauge.close > span { background: var(--cyan); }
.gauge.over > span { background: var(--warn); }
.gauge.no-limit > span { background: var(--fg-faint); }
@media (prefers-reduced-motion: reduce) { .gauge > span { transition: none; } }

/* The marks for "recommended" and "where it truncates on screen". */
.gauge .mark {
  position: absolute; top: -3px; width: 2px; height: 13px; border-radius: 1px;
}
.gauge .mark.rec { background: var(--fg-soft); }
.gauge .mark.vis { background: var(--cyan-deep); }

.field-count { margin: 0; font-size: .84rem; color: var(--fg-soft); }
.field-count b { color: var(--fg); font-variant-numeric: tabular-nums; }
.field-count b.bad, .bad { color: var(--warn); }
.field-note { margin: .3rem 0 0; font-size: .78rem; color: var(--fg-faint); }
.field-empty { margin: 0; font-size: .82rem; color: var(--fg-faint); }
.muted { color: var(--fg-faint); font-weight: 400; }

.trim {
  margin-top: .5rem; padding: .5rem .6rem;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  display: grid; gap: .35rem;
}
.trim-label { font-size: .74rem; color: var(--fg-faint); }
.trim-text {
  font-family: var(--mono); font-size: .78rem; color: var(--fg);
  overflow-wrap: anywhere;
}
.trim .ghost { justify-self: start; }

.board-issues {
  margin-top: .7rem; padding: .6rem .7rem;
  background: var(--warn-bg); border: 1px solid rgba(247, 185, 85, .3);
  border-radius: var(--radius-sm);
}
.board-issues p { margin: .15rem 0; font-size: .82rem; color: var(--warn); }

/* ---------- source detail ---------- */
.board-sources { margin-top: auto; padding-top: .7rem; }
.src { border-top: 1px solid var(--line-soft); }
.src summary {
  cursor: pointer; padding: .4rem 0; min-height: 34px;
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--fg-faint); list-style: none;
}
.src summary::-webkit-details-marker { display: none; }
.src summary::before {
  content: ""; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid var(--cyan-deep);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.src[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .src summary::before { transition: none; } }
.src summary:hover { color: var(--fg-soft); }

.src-body { padding: .2rem 0 .7rem; font-size: .82rem; color: var(--fg-soft); }
.src-body p { margin: .4rem 0; }
.src-body a { color: var(--cyan); overflow-wrap: anywhere; }
.src-line { font-size: .79rem; }
.quote {
  margin: .5rem 0; padding: .4rem .7rem;
  border-left: 2px solid var(--cyan-deep);
  color: var(--fg); font-style: italic;
}
.alts { margin: .3rem 0 .5rem; padding-left: 1.1rem; }
.alts li { margin-bottom: .25rem; font-size: .8rem; }
.alts b { font-variant-numeric: tabular-nums; }
.unknowns li { color: var(--fg-faint); }

/* ---------- the extra field inputs ---------- */
.more-fields {
  margin-top: 1.4rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem var(--gutter) 1rem;
}
.more-fields > summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; list-style: none;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > 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;
}
.more-fields[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .more-fields > summary::before { transition: none; } }
.more-help { font-size: .85rem; color: var(--fg-soft); max-width: var(--measure); }

.field-inputs { display: grid; gap: .9rem; margin-top: .9rem; }
@media (min-width: 760px) { .field-inputs { grid-template-columns: 1fr 1fr; } }
.field-input label {
  display: block; margin-bottom: .3rem; font-size: .83rem; color: var(--fg-soft);
}
.field-input textarea {
  width: 100%; font: inherit; font-size: .88rem;
  padding: .5rem .6rem; resize: vertical;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.field-input textarea:focus { border-color: var(--cyan-deep); }

/* ---------- variation and bulk ---------- */
.select {
  font: inherit; font-size: .86rem; padding: .45rem .6rem; min-height: 40px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-width: 100%;
}
.bulk-opts { align-items: center; }

.var-summary { margin: 1rem 0; }
.verdict { margin: 0 0 .6rem; font-size: 1rem; font-weight: 600; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--warn); }
.var-summary p { font-size: .9rem; color: var(--fg-soft); }

.placeholder { color: var(--fg-faint); font-size: .9rem; margin: 1rem 0 0; }

.bulk-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .8rem; }
.bulk-summary .chip {
  border: 1px solid var(--line); border-radius: 99px;
  padding: .25rem .8rem; background: var(--panel);
  font-size: .86rem; color: var(--fg-soft);
}
.bulk-summary .chip b { color: var(--fg); }
.bulk-summary .chip.warn { border-color: rgba(247, 185, 85, .45); color: var(--warn); }
.bulk-summary .chip.warn b { color: var(--warn); }
.bulk-scroll { max-height: min(60vh, 620px); }
.bulk-parse { margin: .6rem 0 0; font-size: .84rem; color: var(--fg-soft); }

/* ---------- the sources table ---------- */
.sources-wrap { margin-top: 1.4rem; text-align: left; }
#sources-table td, #sources-table th { font-size: .85rem; }
.src-cell { max-width: 34ch; overflow-wrap: anywhere; }
.src-cell a { color: var(--cyan); }

.compare td, .compare th { font-size: .86rem; }
.compare .num.bad { color: var(--warn); font-weight: 700; }

/* The sources and comparison tables sit inside centred prose but read as data. */
.sources-wrap table, .col-block table { text-align: left; }

/* The fields nobody has filled in, named but not given a row each. */
.field-unused {
  margin: .7rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
  font-size: .79rem; color: var(--fg-faint);
}
.field-unused span { overflow-wrap: anywhere; }

/* Each card is its own height. Stretching them to match the tallest in the row
   left half a card of empty space under the short ones. */
.boards { align-items: start; }

/* A grid item defaults to min-width:auto, which means it refuses to shrink below
   its content. On a 320px screen that pushed the card 40px past the viewport
   even though the table inside it has its own scroller. */
.col-block, .board, .field-input { min-width: 0; }

/* The source links are the point of this tool: tapping one is how you check a
   claim. At their natural 16px line height they are an awkward target on a
   phone, so everywhere a source is cited the link gets the padding to make it
   a comfortable one. */
.src-cell a, .src-body a, .src-line a {
  display: inline-block;
  padding-block: .4rem;
}

/* ===================================================================
   Bank statement converter
   =================================================================== */

/* ---------- 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; }
}

/* ---------- one statement ---------- */
.results { display: grid; gap: 1rem; margin-top: 1.5rem; }

.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: left;
  min-width: 0;
}
.sheet.failed { border-left-color: var(--warn); }
.sheet-head {
  display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: baseline; justify-content: space-between;
}
.sheet-head h3 {
  margin: 0; font-size: 1.02rem; font-weight: 600;
  overflow-wrap: anywhere; min-width: 0;
}
.sheet-why { margin: .55rem 0 0; color: var(--fg-soft); }

.pill {
  flex: none;
  padding: .18rem .62rem; border-radius: 99px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.muted { background: var(--bar); color: var(--fg-soft); }

.facts {
  display: grid; gap: .5rem 1.4rem; margin: .9rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.facts div { min-width: 0; }
.facts dt { font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-faint); }
.facts dd { margin: .1rem 0 0; overflow-wrap: anywhere; }

.working, .rows { margin-top: .9rem; }
.working > summary, .rows > summary {
  cursor: pointer; color: var(--cyan); font-size: .92rem;
  padding-block: .4rem;
}
.working p, .rows p { text-align: left; }

/* ---------- the date question ---------- */
.date-ask {
  margin: .9rem 0 0; padding: .85rem 1rem;
  background: var(--warn-bg); border-radius: var(--radius-sm);
}
.date-ask p { margin: 0; color: var(--fg); }
.date-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem !important; }

/* ---------- rows ---------- */
.register.data { width: max-content; min-width: 100%; }
.register.data td, .register.data th { white-space: nowrap; }
.register.data td:nth-child(2) {
  white-space: normal; min-width: 14ch; max-width: 42ch;
}
.row-bad > td { background: var(--warn-bg); }
.row-note > td { background: var(--panel-2); white-space: normal; }
.row-note p { margin: .2rem 0; font-size: .9rem; }
.tick { color: var(--ok); font-family: var(--mono); font-size: .85rem; }
.cross { color: var(--warn); font-family: var(--mono); font-size: .85rem; }

.fix { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fix label { font-size: .85rem; color: var(--fg-faint); }
.fix-input {
  width: 11ch; padding: .35rem .5rem; font-family: var(--mono);
  background: var(--bar-track); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* ---------- across statements ---------- */
.continuity { margin-top: 1.2rem; }
.run {
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  border-left: 3px solid var(--line); margin-top: .8rem; text-align: left;
}
.run.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.run.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.run h3 { margin: 0 0 .35rem; font-size: .98rem; }
.run p, .run li { margin: .25rem 0; color: var(--fg); }
.run ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---------- downloads ---------- */
.exports { margin-top: 1.2rem; }
.switches { display: grid; gap: .55rem; margin-top: .9rem; text-align: left; }
/* The label is the tap target, not the 18px box inside it, so it carries the
   minimum height. On a wide screen the shorter options fit on one line and the
   label collapsed to 26px, which is too small a thing to hit on a phone. */
.switch {
  display: flex; gap: .6rem; align-items: center; cursor: pointer;
  min-height: 36px; padding-block: .15rem;
}
.switch input { width: 18px; height: 18px; flex: none; }
.redact-note {
  margin: .8rem 0 0; padding: .7rem .9rem; font-size: .9rem; text-align: left;
  background: var(--panel-2); border-radius: var(--radius-sm); color: var(--fg-soft);
}
.export-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

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