/* Tool hub, generic tool pages, and per-tool result partials. Loaded only where
   needed (tool.html / tools_hub.html / report.html) via the base head block, so
   the flagship AI funnel page carries none of it. Uses the styles.css tokens. */

/* --- tool hub --- */
.hero-hub .sub, .hero-tool .sub { max-width: 46ch; }
/* The hero is full width on desktop, so the 46ch reading measure above (kept for
   mobile, where a long sub has to wrap anyway) only forces a needless second line.
   Lift it so the sub holds one line. */
@media (min-width: 900px) {
  .hero-hub .sub, .hero-tool .sub { max-width: none; }
}
/* Tool cards carry their own border, so drop the shared .grid hairline treatment
   (gray fill + 1px gaps + clipped border): with per-category column counts and
   individually bordered cards, that gray only ever showed through as odd blocks
   behind half-empty rows. */
.tool-grid {
  gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible;
}
/* Desktop column counts per category (mobile keeps the stacked base grid). More
   specific than `.band.full .grid`, and loaded after it, so these win. */
@media (min-width: 900px) {
  .band.full .tool-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band.full .tool-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band.full .tool-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
a.tool-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface-1); padding: 16px 16px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
a.tool-card:hover { border-color: var(--line-3); box-shadow: var(--shadow-sm); }
/* 15px, not 16: at 16 the longest label ("AI Detection Checker") needed 237px in
   a 224px card and broke to a second line, which made one card in the set taller
   than its neighbours. Sized to the LONGEST label rather than to the average, so
   the row stays even; it holds its weight against the 14px blurb below it, which
   is what keeps it reading as a heading at the smaller size. */
.tool-card h3 { margin: 0; font-size: 15px; }
.tool-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.tool-card .tool-go {
  margin-top: 6px; font-size: 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
}

/* --- tool page input + live figures --- */
.live-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* writing goal + progress (local, wordcounter parity) */
.goal-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.goal-row input {
  font: inherit; font-size: 14px; width: 90px; padding: 5px 8px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-1); color: var(--ink);
}
.goal-track { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.goal-fill { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s ease; }
.goal-fill.done { background: var(--ok); }
.goal-pct { font-size: 13px; color: var(--ink-3); min-width: 34px; font-variant-numeric: tabular-nums; }

/* --- account dashboard --- */
.acct-profile { margin-bottom: 8px; }
.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-photo, .profile-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.profile-avatar { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 22px; font-weight: 700; }
.profile-meta { flex: 1; }
.profile-meta h1 { margin: 0; font-size: 20px; }
.profile-meta .sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.signin-prompt .inline-cta { margin-top: 6px; }
/* The outcome of an edit, shown once. Green for done, warn for refused; the
   subscription's own .status treatment stays reserved for the subscription. */
.acct-notice { margin: 10px 0 0; font: 500 14px/1.4 var(--mono); color: var(--ok); }
.acct-notice.bad { color: var(--warn); }
/* The profile fields reuse .settings-row (below) rather than owning a layout.
   They were briefly a 420px stacked form, then a two-column grid, and both read as
   a different page from the Currency and Sign out rows directly beneath them. One
   shape for every setting: what it is on the left, the control on the right.
   `.field` marks the rows whose control is an INPUT, which is the only thing that
   needs sizing and mobile stacking; the chip and link rows are untouched. */
.settings-row.field input[type=text],
.settings-row.field input[type=email] { width: 320px; max-width: 100%; }
.settings-row.field label { margin-top: 0; }
.field-control input[type=file] {
  display: block; width: 320px; max-width: 100%; font-size: 13.5px; color: var(--ink-2);
}
.field-control input[type=file]::file-selector-button {
  margin-right: 10px; padding: 8px 12px; font: 500 13px/1 var(--sans);
  color: var(--ink); background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
}
/* A checkbox is not a block-level label: it sits ON the line with its text. */
.field-control label.check {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer;
}
.field-control label.check input { width: auto; margin: 0; }
/* The submit belongs to the FORM, not to any one row, so it sits under them and
   aligns with the controls it saves rather than stretching the panel. */
.settings-foot { display: flex; justify-content: flex-end; padding: 14px 0 4px; }
.settings-foot button { width: auto; min-width: 180px; margin-top: 0; }
/* A label above a 320px input beats a label beside one on a phone: side by side
   the control gets squeezed to nothing. Scoped to .field so the existing chip and
   link rows keep their side-by-side reading at every width. */
@media (max-width: 620px) {
  .settings-row.field { flex-direction: column; align-items: stretch; gap: 8px; }
  .settings-foot button { width: 100%; }
}
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.settings-row strong { font-size: 15px; }
.settings-row .fine { margin: 2px 0 0; }
.currency-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.cur-chip { font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink-2); }
.cur-chip:hover { border-color: var(--line-3); text-decoration: none; }
.cur-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- auth / login --- */
.auth-wrap { display: grid; place-items: center; padding: 40px 20px 60px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 26px; margin: 0 0 6px; }
.auth-card .sub { color: var(--ink-2); font-size: 15px; margin: 0 0 22px; }
/* Chunky, generously rounded provider buttons with a small lift on hover, sized like
   the ChatGPT login sheet. The card is already capped at 380px, so the buttons carry
   that width. The label is centred and the icon is pulled out of the flow at the left
   edge, so a short "Continue with Google" and a long "Continue as ..." sit on the
   same centre line rather than starting at different points. */
.auth-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; margin-bottom: 10px;
  height: var(--cta-h); padding: 0 20px; gap: 10px;
  border: 1px solid var(--line-2); border-radius: var(--cta-r);
  background: var(--surface-1); color: var(--ink); text-decoration: none;
  font-size: 15.5px; font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.auth-btn:hover { border-color: var(--line-3); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
/* Primary email action: filled, chunky and rounded, matching the checkout pay button. */
.auth-submit {
  width: 100%; margin-top: 12px; height: var(--cta-h); padding: 0 16px;
  border: 1px solid var(--amber); border-radius: var(--cta-r);
  background: var(--amber); color: var(--on-amber);
  font: 700 15.5px/1 var(--sans); cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.auth-submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.auth-submit:active { transform: translateY(0); box-shadow: none; }
/* The icon travels WITH the label, both centred as one group, rather than pinned to
   the left edge. Trade-off taken knowingly: pinning it kept the icon at the same x on
   every button, so a short "Continue with Google" and a long "Continue as ..." shared
   one left edge. Centred, each mark sits wherever its own label puts it. The pairing
   reads as one control, which is worth more than that alignment. */
.auth-icon { flex: none; }
.auth-btn-text {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  line-height: 1.3; min-width: 0; max-width: 100%;
}
.auth-btn-text > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn-text small { color: var(--ink-3); font-size: 12px; font-weight: 400; }
/* The remembered-identity button carries a 32px avatar. It rides in the flow beside
   the label like the provider marks now, so it needs no side clearance of its own. */
.auth-personal { border-color: var(--line-3); }
.auth-photo, .auth-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
}
.auth-avatar { display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; margin: 14px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-email label, .auth-card form label:first-of-type { margin-top: 0; }
/* The email field wears the same chunky, generously rounded shape as the buttons
   it sits between, so the whole sheet reads as one set of controls. */
.auth-email input[type=email] {
  padding: 16px 18px; border-radius: var(--r-xl); border-color: var(--line-3);
}
/* One box per digit. They share the row evenly (flex, no fixed width) so six
   boxes fit a 320px phone as well as the 380px card, and tabular figures keep a
   landing digit from shuffling its box. */
.code-boxes { display: flex; gap: 8px; margin-top: 6px; }
.code-box {
  flex: 1 1 0; min-width: 0; padding: 12px 0; text-align: center;
  font: 700 24px/1.2 var(--sans); font-variant-numeric: tabular-nums;
}
.code-box:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
/* Resend and the way back are one centred column under the boxes. */
.auth-resend, .auth-resend + .fine { text-align: center; }
.auth-resend { margin-top: 18px; }
.auth-resend + .fine { margin-top: 10px; }
/* A POST that reads as a link: the site's <a> treatment on a real <button>, so
   the resend keeps its form semantics without wearing a slab CTA. */
.linkish {
  width: auto; margin: 0; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.linkish:hover { filter: none; text-decoration-color: var(--ink); }
.linkish:active { transform: none; }
.auth-stub { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.auth-stub input { width: 100%; margin: 6px 0 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; }
.auth-stub button { width: 100%; }
.auth-legal { margin-top: 18px; }

/* --- cross-sell loop (every result is a door to the next tool) --- */
.cross-sell { margin-top: 28px; }
.cross-sell .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 10px; }
.cross-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cross-grid { grid-template-columns: repeat(2, 1fr); } }
a.cross-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-1);
  padding: 13px 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
a.cross-card:hover { border-color: var(--line-3); box-shadow: var(--shadow-sm); }
.cross-cta { font-size: 14.5px; font-weight: 600; }
.cross-tool { font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }

/* --- shared result blocks (report + tool result) --- */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 18px;
}
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-1);
}
.stat-num { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-lab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.result-sub { margin: 22px 0 10px; font-size: 15px; }
.result-clean { color: var(--ok); font-weight: 600; }

.result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.result-table th, .result-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.result-table th { color: var(--ink-3); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.limit-list { display: flex; flex-direction: column; gap: 6px; }
.limit-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 14px;
}
.limit-row.over { border-color: var(--amber); }
.limit-row .limit-fig { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.limit-row.over .limit-fig { color: var(--ink); }

/* --- readability / score headline --- */
.grade-headline { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 16px; }
.grade-fig { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; }
.grade-unit { font-size: 18px; font-weight: 700; color: var(--ink-3); }
.grade-lab { font-size: 13px; color: var(--ink-3); }

.hemingway-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hemingway-counts .hc {
  font-size: 12.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.hemingway-counts .hc em { color: var(--ink-3); font-style: normal; }
.hc.adverb { background: #eef4ff; border-color: #cfe0ff; }
.hc.passive { background: #eafaf0; border-color: #c6ecd4; }
.hc.hard { background: #fff6e6; border-color: #f2ddb0; }
.hc.vhard { background: #fdecea; border-color: #f4c9c2; }

ol.hemingway { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
ol.hemingway li {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; font-size: 14.5px; border: 1px solid transparent;
}
ol.hemingway .seg-i { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
ol.hemingway .seg-tag { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.hl-hard { background: #fff6e6; }
.hl-very_hard { background: #fdecea; }

.complex-list { padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.complex-list code { background: #fdecea; padding: 1px 5px; border-radius: 4px; }

/* inline Hemingway word-level highlights (the signature feature) */
.hl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 12px; }
.hl-key { padding: 2px 8px; border-radius: 999px; }
.hl-key.adverb, mark.hl-word.adverb { background: #cfe0ff; color: #14315e; }
.hl-key.passive, mark.hl-word.passive { background: #c6ecd4; color: #12492c; }
.hl-key.complex, mark.hl-word.complex { background: #e7d6f7; color: #45256b; }
.hl-key.hardish { background: #fff6e6; color: var(--ink); }
mark.hl-word { border-radius: 3px; padding: 0 1px; }

/* --- issues (grammar / fact / guideline) --- */
ol.issues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
ol.issues li { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-1); }
ol.issues .issue-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.issue-span { background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.issue-sev { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-left: auto; }
.issue-msg { margin: 0; font-size: 14.5px; }
.issue-fix { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
li.sev-high { border-left: 3px solid var(--warn); }
li.sev-medium { border-left: 3px solid var(--amber); }

/* Severity counts: the grammar headline. Each chip holds one line at 320px
   ("3 style and spacing" is the longest at 19 characters), and the row wraps
   between chips, which is wrapping BETWEEN short-form items rather than inside
   one, so no chip ever breaks in half. */
.sev-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.sev-chip {
  font-size: 12.5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.sev-chip b { color: var(--ink); }
.sev-chip.sev-high { background: #fdecea; border-color: #f4c9c2; }
.sev-chip.sev-medium { background: #fff6e6; border-color: #f2ddb0; }

/* The text with its issues marked ON it. pre-wrap is load-bearing, not cosmetic:
   two of the rules find whitespace ("Double space.", "No space before
   punctuation."), and HTML collapsing runs of spaces would render the highlight
   for a double space one character wide and invisible. */
.marked-text {
  padding: 14px; white-space: pre-wrap; font-size: 15px; line-height: 1.8;
  max-height: 420px; overflow-y: auto;
}
mark.mk {
  background: #fff6e6; border-bottom: 2px solid var(--amber); border-radius: 3px;
  padding: 0 1px; cursor: pointer; color: inherit;
}
mark.mk.sev-high { background: #fdecea; border-bottom-color: var(--warn); }
mark.mk.sev-low { background: #eef4ff; border-bottom-color: #cfe0ff; }
mark.mk:hover, mark.mk.lit, mark.mk:focus-visible { filter: brightness(.94); outline: none; }
mark.mk.lit { box-shadow: 0 0 0 2px var(--ink); }
/* An applied fix stops being a finding: the flag goes, the new text stays. */
mark.mk.applied {
  background: #eafaf0; border-bottom-color: #7fc79b; cursor: default; filter: none;
}
ol.issues li.lit { border-color: var(--ink); }
ol.issues li.applied { opacity: .5; }
ol.issues li.applied .apply-one { display: none; }
.apply-one { margin-top: 8px; }

/* --- the document and its edits, side by side ---
   One column here (the rail under the text) and 75/25 from 900px up, set in the
   media query below beside every other desktop rule. The gap is the only spacing
   between the panel and the list, which previously sat flush against each other. */
.issue-split { display: grid; gap: 16px; }

/* --- the Pro gate on the tail of the rail ---
   The blur is presentation over a card whose SUGGESTION was never rendered
   (_result_issues.html): what is behind the glass is the finding, not the fix, so
   removing the filter in devtools reveals nothing that was being sold. */
ol.issues li.locked {
  filter: blur(4px); user-select: none; pointer-events: none;
}
/* The gate itself, unblurred (filter does not inherit across siblings). It sits at
   the end of the list, on the blur, and is deliberately NOT sticky: pinned to the
   foot of the rail it covered a free suggestion and washed the fade below over
   findings this reader already has. The blur is the standing signal; the pay block
   under the split is the standing CTA. */
.issue-gate {
  position: relative; text-align: center; padding: 14px 12px 12px;
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: var(--r);
}
/* The fade that ties the gate to the blur above it, so the tail reads as one
   region going out of focus rather than two cards that happen to be adjacent. */
.issue-gate::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--surface-1));
  pointer-events: none;
}
.gate-head { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.issue-gate .try { display: inline-flex; }
/* A one-shot acknowledgement when a locked mark sends the reader here, so the
   press lands somewhere visible rather than seeming to do nothing. */
.issue-gate.lit { box-shadow: 0 0 0 2px var(--lane, var(--ink)); transition: box-shadow .2s ease; }
/* A locked mark still says WHERE, and says it is not free by not lighting up or
   turning into a fix on click. Muted rather than coloured by severity: the
   severity is part of what the gate holds back. */
mark.mk.locked {
  background: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--surface-2) 5px 10px);
  border-bottom-color: var(--line-2); color: inherit;
}
.output-head .inline-cta + .inline-cta { margin-left: 8px; }
/* The marked-text panel's head carries a label and TWO controls (Apply all, Copy),
   which will not share one row at 320px: the row squeezed "Your text" to 48px and
   broke a nine-character label in half. The label takes its own row there and the
   two buttons share the next. */
@media (max-width: 380px) {
  .output-head { flex-wrap: wrap; }
  .output-head .label { flex: 1 0 100%; }
}

/* 75/25 from 900px up, the width at which the rest of the site takes its desktop
   composition (styles.css). The text keeps the reading measure it always had and
   the edits move OUT of the column and alongside it, so a finding and the place it
   refers to are on screen together instead of a scroll apart. */
@media (min-width: 900px) {
  /* ONE height for both columns, because they are two views of one document and a
     rail twice the height of the text it annotates reads as two unrelated panels
     with a hole beside one of them. Each scrolls inside that height instead: the
     workspace stays put and the content moves, which is also what keeps the marks
     and the cards that point at them on screen together. */
  .issue-split { grid-template-columns: 3fr 1fr; gap: 20px; --work-h: min(70vh, 620px); }
  .issue-split .output-panel { display: flex; flex-direction: column; height: var(--work-h); }
  .issue-split .marked-text { max-height: none; flex: 1; }
  .issue-rail {
    height: var(--work-h); overflow-y: auto; padding-right: 2px;
  }
  /* A quarter column is about 240px, where a long flagged phrase would push the
     severity label off the card. It truncates; the full span is still marked in
     the text beside it, which is the copy that matters. */
  .issue-rail .issue-head { min-width: 0; }
  .issue-rail .issue-span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .issue-rail li { padding: 10px 12px; }
  .issue-rail .issue-msg { font-size: 13.5px; }
  .issue-rail .issue-fix { font-size: 13px; }
}

/* Print gets the findings it is allowed to keep and nothing else: a blur does not
   survive a print pipeline reliably, and a page of grey smears is not a report. */
@media print {
  .issue-split { display: block; }
  ol.issues li.locked, .issue-gate { display: none; }
}

/* --- plagiarism matches --- */
.match-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.match-row { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); }
.match-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 5px; }
.match-sim { font-weight: 700; color: var(--ink); font-size: 14px; }
.match-text { margin: 0; color: var(--ink-2); font-size: 14px; }

/* --- generator output --- */
.output-panel { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.output-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.output-text { padding: 14px; white-space: pre-wrap; font-size: 15px; line-height: 1.6; }

/* --- generator mode selector --- */
.mode-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.mode-lab { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.mode-row select {
  font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--surface-1); color: var(--ink);
}

/* At 320px the specimen foot cannot fit its row without breaking the submit
   label in two: the label is the tool's nav_label, and "Grammar Checker" is 15
   characters while "Paraphrase Checker" is 18. Short-form copy holds ONE line, so
   the LAYOUT gives way rather than the label: below 380px the button takes a full
   row of its own and the example link and fine print share the row above it.
   Measured in a 320px viewport, not eyeballed. */
@media (max-width: 380px) {
  .specimen-foot #tool-btn { flex: 1 0 100%; justify-content: center; }

  /* The tool doors' H1 holds ONE line at 320px. It did not: .hero h1 bottoms out
     at 34px, where 265px of column fits about 14 characters, and every door but
     Citations is longer than that ("Paraphrase Checker" measures 321px, "Word
     Count Checker" the same).

     The size gives way, not the words. Each H1 is the exact-match keyword that
     buys the ad-relevance half of Quality Score and, now that these pages index,
     the organic title too; shortening "Grammar Checker" to fit a font size would
     be the tail wagging the dog. 27px fits the longest of them at 255px inside
     265px, measured in a 320px viewport.

     Scoped to .hero-tool so the flagship's own hero (index.html, a much shorter
     variant H1 and a Lighthouse-100 budget) is untouched. */
  .hero-tool h1 { font-size: 27px; }

  /* The report page repeats the tool's H1 in a NARROWER column than the door: 219px
     after the section padding, against the hero's 265px. So it needs its own size,
     not the hero's 27px, which fits "Grammar Checker" (229px) into 219px only by
     breaking it. 22px puts the longest of them, "Paraphrase Checker" and "Word
     Count Checker" at 258px, inside the column at 210px. */
  .report h1 { font-size: 22px; }
}

/* The pay block, newly rendered on the report page, inherits side spacing set for
   the landing page's wider column. Here it left the buys list a 159px content box
   while "Documents to 4,500 words" needs 173px, so two of the four lines broke in
   two at 320px. Short-form copy holds one line, and this copy is shared with the
   landing page where it is correct, so the CONTAINER gives way: full width of the
   report column, which is what the block should have had here anyway. Measured at
   320px, where it now leaves 180px for the longest of the four. */
.report .pay { margin-left: 0; margin-right: 0; }
@media (max-width: 380px) {
  .report .pay { padding: 12px; }
}

/* --- citation list --- */
.citation-list { display: flex; flex-direction: column; gap: 10px; }
.citation-row { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }

.sample-note {
  display: inline-block; font-size: 13px; color: var(--ink); background: #fff6e6;
  border: 1px solid #f2ddb0; border-radius: 8px; padding: 6px 10px; margin: 0 0 14px;
}