/* tools/assets/tools.css
 *
 * Shared styles for the generated tool pages under /tools/.
 *
 * Loaded after /styles.css. The Tailwind build styles the nav, footer and skip
 * link; this file styles the tool body only, in plain CSS, so generated markup
 * does not depend on utility classes surviving a purge.
 *
 * Every colour, shadow and radius below is restated from DESIGN.md and matches
 * tailwind.config.js. This file does not fork tokens. If a value here ever
 * disagrees with tailwind.config.js, this file is the one that is wrong.
 */

/* ---------------------------------------------------------------------------
   TOKENS
   Scoped to .tool-page rather than :root, so nothing here can leak into the
   chrome or into a page that does not opt in.
--------------------------------------------------------------------------- */

.tool-page {
  --t-page: #F9F9F8;
  --t-section: #EEEEEC;
  --t-card: #FFFFFF;
  --t-ink: #1A1814;
  --t-body: #44403C;
  --t-muted: #6B6760;
  --t-border: #D6D3CD;
  --t-navy: #1D4ED8;
  --t-navy-hover: #1E40AF;

  --t-success-ink: #166534;
  --t-success-tint: #F0FDF4;
  --t-success-border: #BBF7D0;
  --t-warning-ink: #92400E;
  --t-warning-tint: #FFFBEB;
  --t-warning-border: #FDE68A;
  --t-danger-ink: #991B1B;
  --t-danger-tint: #FEF2F2;
  --t-danger-border: #FECACA;

  --t-radius-card: 8px;
  --t-radius-control: 4px;

  --t-shadow-card: 0 1px 3px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --t-shadow-card-hover: 0 4px 16px rgba(26, 24, 20, 0.08), 0 2px 6px rgba(26, 24, 20, 0.04);

  --t-sans: 'Work Sans', system-ui, sans-serif;
  --t-serif: 'Newsreader', Georgia, serif;

  --t-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  color: var(--t-body);
  font-family: var(--t-sans);
}

/* ---------------------------------------------------------------------------
   LAYOUT
--------------------------------------------------------------------------- */

.tool-main {
  background: var(--t-page);
}

.tool-container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .tool-container { padding-inline: 1.5rem; }
}

/* Editorial passages drop to a narrow measure inside the frame, and are
   centred within it. Without the auto margins the narrow block sits hard left
   inside the 80rem container, which at 1440px leaves most of the right-hand
   side empty. */
.tool-measure {
  max-width: 48rem;
  margin-inline: auto;
}

/* Wider centred measure for content that needs room but must still align with
   the prose column rather than running to the full 80rem frame: the reference
   table and the card rows. */
.tool-measure--wide {
  max-width: 64rem;
  margin-inline: auto;
}

/* Section rhythm for generated tool pages: py-12 md:py-16, below the
   py-12 md:py-20 in DESIGN.md section 4. Recorded as Revision 15 in DESIGN.md
   rather than overridden silently.

   Reason: a tool page carries many short sections, and at md:py-20 each one
   occupies most of a screen, so the page reads as a sparse scroll rather than
   a dense reference. compliance-checker.html already runs its tightest content
   section at py-12 md:py-16, which is the precedent followed here. */
.tool-section {
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .tool-section { padding-block: 4rem; }
}

/* Consecutive sections on the same ground are separated by a rule, never by
   extra padding. */
.tool-section + .tool-section {
  border-top: 1px solid var(--t-border);
}

.tool-section--tint {
  background: var(--t-section);
}

/* A rule separates two sections that share a ground. Where the ground changes,
   the change is the separation and a rule on top of it reads as a seam. */
.tool-section + .tool-section--tint,
.tool-section--tint + .tool-section {
  border-top: 0;
}

/* ---------------------------------------------------------------------------
   TYPE
--------------------------------------------------------------------------- */

.tool-page h1,
.tool-page h2,
.tool-page h3 {
  font-family: var(--t-serif);
  font-weight: 400;
  color: var(--t-ink);
  margin: 0;
}

.tool-h1 {
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.tool-h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
}

.tool-h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Bare element selectors under .tool-page outrank a single utility class,
   because a class plus a type is more specific than a class alone. Any site
   markup pasted into a tool page, a dark band or the trust strip, would
   therefore have its own recipe overridden by these rules and silently render
   as an approximation of the real treatment.

   The paragraph rule is excluded from anything carrying a Tailwind text
   utility, which is exactly the markup copied from a live page. Tool prose
   carries no such class, so it is unaffected. */
/* Wrapped in :where(), which contributes zero specificity, so this behaves as
   a base layer that any component class can override.

   Unwrapped it was (0,2,1), a class plus the attribute selector inside :not()
   plus the type, which outranked every single-class paragraph component in this
   file: the answer sentence, the call to action lead line, the reviewed line,
   the disclaimer, the table note, the FAQ answer. All of them were silently
   rendering at base size with zero margin, whatever their own rule said. That
   is the same specificity trap that once painted navy text onto a navy button,
   reintroduced by the fix for it. A base layer should carry no specificity at
   all, which is what :where() is for. */
:where(.tool-page p:not([class*="text-"])) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.625;
  max-width: 70ch;
}

:where(.tool-page p:not([class*="text-"]) + p:not([class*="text-"])) {
  margin-top: 1rem;
}

.tool-lead {
  font-size: 1.125rem;
  line-height: 1.6;
}

.tool-eyebrow {
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin: 0 0 0.75rem;
}

/* Links are styled where links actually run as prose: inside a paragraph or a
   list item. A blanket .tool-page a rule is specificity (0,1,1) and beat every
   button recipe at (0,1,0), which painted navy text onto a navy button and made
   the label invisible. Scoping to prose containers removes that whole class of
   collision rather than patching the one button it happened to hit. */
.tool-page p a,
.tool-page li a {
  color: var(--t-navy);
  text-decoration: none;
}

.tool-page p a:hover,
.tool-page li a:hover {
  color: var(--t-navy-hover);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   FOCUS
   Every interactive element, no exceptions. The one variation is the affix
   wrapper below, which takes the ring on behalf of the input it contains so
   the symbol and the field are ringed as a single control.
--------------------------------------------------------------------------- */

.tool-page a:focus-visible,
.tool-page button:focus-visible,
.tool-page input:focus-visible,
.tool-page select:focus-visible,
.tool-page summary:focus-visible {
  outline: 2px solid var(--t-navy);
  outline-offset: 2px;
  border-radius: var(--t-radius-control);
}

/* ---------------------------------------------------------------------------
   BREADCRUMB
--------------------------------------------------------------------------- */

.tool-breadcrumb {
  padding-block: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-muted);
}

.tool-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-breadcrumb li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--t-border);
}

.tool-breadcrumb [aria-current='page'] {
  color: var(--t-body);
}

/* ---------------------------------------------------------------------------
   ANSWER SENTENCE
   Present in static HTML before any interaction. This is the extractable
   sentence, so it is set as prose rather than as a decorated callout.
--------------------------------------------------------------------------- */

/* The headline runs to 68px, so 24px beneath it read as crowded. */
.tool-answer {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--t-body);
  max-width: 65ch;
}

/* ---------------------------------------------------------------------------
   CALCULATOR
--------------------------------------------------------------------------- */

/* D3. Concentric shell. Outer radius 12px is one step up the 4 and 8 scale in
   DESIGN.md section 4; the 4px padding makes the inner 8px card exactly
   concentric, since 12 minus 4 is 8. Calculator only. */
.tool-calc-shell {
  padding: 4px;
  background: var(--t-section);
  border: 1px solid var(--t-border);
  border-radius: 12px;
}

/* Separation between the page's opening statement and its primary control.
   Held here rather than as an inline style on the template, so the header
   stack's spacing lives in one place. */
.tool-calc-shell {
  margin-top: 4rem;
}

/* C1. The calculator is what the page exists for, so it is the largest and
   loudest element on the first screen rather than the quietest. */
.tool-calc {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .tool-calc { padding: 2.25rem; }
}

.tool-fields {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .tool-fields--two { grid-template-columns: 1fr 1fr; }
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.tool-label {
  font-family: var(--t-sans);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--t-ink);
}

.tool-help {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--t-muted);
  max-width: none;
}

/* Affix wrapper. The prefix sits inside the control border so the currency
   symbol reads as part of the field rather than as a floating label. */
.tool-affix {
  display: flex;
  align-items: stretch;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-control);
  overflow: hidden;
}

.tool-affix:focus-within {
  outline: 2px solid var(--t-navy);
  outline-offset: 2px;
}

.tool-affix__symbol {
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  background: var(--t-section);
  border-right: 1px solid var(--t-border);
  font-size: 1rem;
  color: var(--t-muted);
  user-select: none;
}

.tool-affix__symbol--suffix {
  border-right: 0;
  border-left: 1px solid var(--t-border);
}

/* 44px stays the floor from DESIGN.md, not the target. These run taller and
   larger because this is the page's primary control. */
.tool-input,
.tool-select {
  width: 100%;
  min-height: 56px;
  padding: 0.875rem 1rem;
  font-family: var(--t-sans);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--t-ink);
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-control);
  transition: border-color 150ms ease;
}

/* Inside an affix wrapper the control loses its own border and radius, because
   the wrapper carries both, and suppresses its own ring, because the wrapper
   carries that too. */
.tool-affix .tool-input {
  border: 0;
  border-radius: 0;
}

.tool-affix .tool-input:focus-visible {
  outline: none;
}

.tool-input:hover,
.tool-select:hover {
  border-color: var(--t-muted);
}

.tool-input[type='number'] {
  font-variant-numeric: tabular-nums;
}

.tool-select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6760' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.tool-input[aria-invalid='true'],
.tool-select[aria-invalid='true'] {
  border-color: var(--t-danger-ink);
}

.tool-field__error {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--t-danger-ink);
  max-width: none;
}

.tool-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------------- */

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  border-radius: var(--t-radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
              transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* D2. Transform only, on the DESIGN.md curve. Nothing else moves. */
.tool-page .tool-btn--primary:active,
.tool-page .btn-primary:active {
  transform: scale(0.98);
}

.tool-page .btn-primary {
  transition: background-color 150ms ease, transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tool-page .tool-btn--primary:active,
  .tool-page .btn-primary:active { transform: none; }
}

.tool-btn--primary {
  background: var(--t-navy);
  color: #FFFFFF;
}

.tool-btn--primary:hover {
  background: var(--t-navy-hover);
  color: #FFFFFF;
  text-decoration: none;
}

.tool-btn--secondary {
  background: var(--t-card);
  border-color: var(--t-border);
  color: var(--t-ink);
}

.tool-btn--secondary:hover {
  background: var(--t-page);
  border-color: #9C9690;
  color: var(--t-ink);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   RESULT
   The region is in static HTML and hidden with the hidden attribute, so the
   script reveals rather than injects. That is what keeps the hydration free of
   layout shift.
--------------------------------------------------------------------------- */

.tool-result[hidden] {
  display: none;
}

.tool-result {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--t-border);
}

.tool-result__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .tool-result__grid--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tool-result__item {
  min-width: 0;
}

.tool-result__label {
  display: block;
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 0.25rem;
}

.tool-result__value {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--t-ink);
  font-variant-numeric: tabular-nums;
}

.tool-result__item--primary {
  grid-column: 1 / -1;
}

.tool-result__item--primary .tool-result__value {
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 1.0;
}

/* One line naming the statute and provision, compliance tools only. */
.tool-basis {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-muted);
}

/* ---------------------------------------------------------------------------
   MANDATORY ADJACENT COPY
   Reserved for genuine legal-consequence panels. The 3px left border is
   permitted here and nowhere else on a tool page.
--------------------------------------------------------------------------- */

.tool-adjacent {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--t-warning-tint);
  border: 1px solid var(--t-warning-border);
  border-left: 3px solid var(--t-warning-ink);
  border-radius: var(--t-radius-control);
}

.tool-adjacent ul {
  margin: 0;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.5rem;
}

.tool-adjacent li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-warning-ink);
}

/* ---------------------------------------------------------------------------
   CALL TO ACTION
--------------------------------------------------------------------------- */

.tool-cta {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  padding: 1.5rem;
  max-width: 42rem;
}

@media (min-width: 768px) {
  .tool-cta { padding: 2rem; }
}

.tool-cta__copy {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--t-ink);
  max-width: 60ch;
}

.tool-cta__actions {
  margin-top: 1.25rem;
}

.tool-cta__sub {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-muted);
}

@media (max-width: 639px) {
  .tool-cta .tool-btn--primary {
    min-height: 48px;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   REFERENCE TABLE
   Pre-rendered in static HTML. This is what retrieval crawlers read, so it is
   a real table and never a scroll-jacked widget.
--------------------------------------------------------------------------- */

.tool-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  background: var(--t-card);
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* D1. The caption shares the header ground and carries no rule of its own, so
   caption and column headers read as one header block rather than a caption
   box stacked on a header row. */
.tool-table caption {
  caption-side: top;
  padding: 0.875rem 1.25rem 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--t-muted);
  background: var(--t-section);
}

.tool-table th,
.tool-table td {
  padding: 0.75rem 1.25rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.tool-table thead th {
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-muted);
  background: var(--t-section);
  border-bottom: 1px solid var(--t-border);
}

.tool-table tbody tr + tr th,
.tool-table tbody tr + tr td {
  border-top: 1px solid var(--t-border);
}

.tool-table td {
  color: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.tool-table tbody th {
  font-family: var(--t-sans);
  font-weight: 500;
  color: var(--t-ink);
  font-variant-numeric: tabular-nums;
}

/* Prose modifier. Numeric tables stay nowrap, which is the default above and
   is what keeps a figure from breaking across lines. A table carrying a column
   of sentences, such as the conditions on a possession ground, opts in here so
   the text wraps instead of forcing the whole table into a long sideways
   scroll. Figures inside a prose table keep their own nowrap via
   .tool-table__figure. */
.tool-table--prose th,
.tool-table--prose td {
  white-space: normal;
  min-width: 8rem;
}

.tool-table--prose .tool-table__figure {
  white-space: nowrap;
}

/* The rows either side of a statutory threshold. Tinted, not navy, because
   navy marks interaction and nothing else. */
.tool-table tr[data-threshold='true'] th,
.tool-table tr[data-threshold='true'] td {
  background: var(--t-section);
}

.tool-table__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-muted);
}

/* ---------------------------------------------------------------------------
   PROSE SECTIONS
--------------------------------------------------------------------------- */

.tool-prose > * + * {
  margin-top: 1rem;
}

.tool-steps {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.625rem;
}

.tool-steps li {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--t-body);
  max-width: 65ch;
}

.tool-example {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  padding: 1.5rem;
  max-width: 48rem;
}

@media (min-width: 768px) {
  .tool-example { padding: 2rem; }
}

/* ---------------------------------------------------------------------------
   FAQS
   Plain headings and paragraphs rather than a disclosure widget, so the answer
   text is in the rendered page for both readers and retrieval.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   RELATED TOOLS
--------------------------------------------------------------------------- */

.tool-related {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .tool-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tool-related__card {
  display: block;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  padding: 1.25rem;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.tool-related__card:hover {
  box-shadow: var(--t-shadow-card-hover);
  border-color: #9C9690;
  text-decoration: none;
}

/* Both are spans, so without an explicit block they run on as one line and the
   description reads as a continuation of the title. */
.tool-related__name {
  display: block;
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--t-ink);
}

.tool-related__desc {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-muted);
}

/* ---------------------------------------------------------------------------
   REVIEWED LINE AND DISCLAIMER
   Legal smallprint bottoms out at 12px on this audience.
--------------------------------------------------------------------------- */

.tool-reviewed {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--t-body);
}

.tool-disclaimer {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--t-muted);
  max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   HUB
--------------------------------------------------------------------------- */

.tool-hub-group + .tool-hub-group {
  margin-top: 3rem;
}

.tool-hub-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* auto-fill rather than a fixed column count. A group holding a single card
   then occupies one track of its natural width instead of stretching across
   the row, which is what stops the Compliance calculators group looking broken
   while it holds one tool. */
/* Change 14. Column count comes from the card count: two columns for a group
   of one or two, three for a group of three or more, one column below md.
   Cards are never stretched to fill a row, the title always sits above the
   description, and cards in a row share a height.

   The previous rule let a lone card fill the whole row, which produced a
   full-width banner with the description pushed beside the title. That read
   worse than the orphan card it was meant to solve. */
@media (min-width: 768px) {
  .tool-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-hub-grid[data-count="3"],
  .tool-hub-grid[data-count="4"],
  .tool-hub-grid[data-count="5"],
  .tool-hub-grid[data-count="6"],
  .tool-hub-grid[data-count="7"],
  .tool-hub-grid[data-count="8"],
  .tool-hub-grid[data-count="9"],
  .tool-hub-grid[data-count="10"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Large square cards. Same recipe family as the tool page card, scaled up:
   the title carries the serif voice and the description sits beneath it in
   smaller Work Sans. */
.tool-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 11rem;
  padding: 1.75rem;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.tool-hub-card:hover {
  box-shadow: var(--t-shadow-card-hover);
  border-color: #9C9690;
  text-decoration: none;
}

.tool-hub-card__name {
  display: block;
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--t-ink);
}

.tool-hub-card__desc {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--t-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--t-muted);
}

/* ---------------------------------------------------------------------------
   THE DARK BLOCK
   One dark moment per page. The call to action and the trust strip sit inside
   a single #0A0A0A wrapper so they read as one band rather than two, and the
   strip's own top border is dropped where it follows the call to action.
--------------------------------------------------------------------------- */

.tool-darkblock {
  background: #0A0A0A;
  color: #FFFFFF;
}

.tool-darkblock > section[aria-label='Trust'] {
  border-top: 0;
}

/* The call to action and the strip each carry their own vertical rhythm from
   the pages they were copied from. Stacked, that reads as two blocks with a
   gap. Trimming the first one's foot closes the seam without altering either
   recipe's own spacing. */
.tool-darkblock > section:first-of-type {
  padding-bottom: 2.5rem;
}

/* ---------------------------------------------------------------------------
   MOTION
   Deliberately empty. The reveal recipe is not redefined here.

   src/input.css already defines the site reveal under the triple guard
   (@media prefers-reduced-motion: no-preference, scoped to html.js), and it is
   present in the committed styles.css build. Tool pages use that existing
   .reveal class and its data-delay stagger, so the motion system has one
   definition rather than two. tools.js supplies the IntersectionObserver that
   adds the visible state, with a showAll() bail, matching the behaviour on the
   root pages.
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   COMPACTION (DESIGN.md Revision 15)
--------------------------------------------------------------------------- */

/* Two complementary explainers side by side rather than stacked down two
   screens. Stacks below md. The gap follows compliance-checker.html, which
   runs gap-3 and gap-4 throughout rather than the wider gaps used on the
   marketing pages. */
.tool-pair {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .tool-pair {
    grid-template-columns: 1fr 1fr;
    /* Change 16. The two cards sat almost touching. The vertical stacking gap
       below md is unchanged. */
    column-gap: 2.5rem;
  }
}

/* B3. Both halves take the identical card treatment and stretch to equal
   height, so the pairing reads as one unit. Previously one was naked prose and
   the other a bordered card at a different height. */
.tool-pair__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
}

@media (min-width: 768px) {
  .tool-pair__card { padding: 1.75rem; }
}

.tool-pair__h {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--t-ink);
  margin: 0 0 1rem;
}

/* The statutory source is a citation, not a chapter. It sits as a compact
   bordered card beneath the questions rather than claiming a section and an
   H2 of its own. */
.tool-source-card {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
}

.tool-source-card__label {
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 0.5rem;
}

.tool-source-card p {
  font-size: 0.875rem;
  line-height: 1.6;
}

.tool-source-card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.25rem;
}

.tool-source-card li {
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   FAQ ACCORDION
   Native details and summary. There is no JavaScript on a tool page beyond the
   calculator, and the answers must stay in the document when collapsed, so the
   element that does both natively is the right one. It also keeps working with
   JavaScript disabled, which a scripted accordion would not.

   .faq-trigger and .faq-icon come from src/input.css. They were defined there
   but used by no page; this is their first use.
--------------------------------------------------------------------------- */

/* Change 17. Each question is a full width card rather than a row separated by
   a hairline rule. The divider rules the cards replace are gone. */
.tool-faqs {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  margin-top: 1.75rem;
}

.tool-faq {
  background: var(--t-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-card);
  box-shadow: var(--t-shadow-card);
}

.tool-faq > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.75rem;
  list-style: none;
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--t-ink);
  min-height: 44px;
}

.tool-faq > summary::-webkit-details-marker { display: none; }

.tool-faq .faq-icon {
  flex-shrink: 0;
  font-family: var(--t-sans);
  font-size: 1.25rem;
  color: var(--t-muted);
  transition: color 150ms ease;
}

/* U+2212 minus sign, which is the typographic pair to the plus. Not a hyphen
   and not a dash. */
.tool-faq .faq-icon::before { content: '+'; }
.tool-faq[open] .faq-icon::before { content: '\2212'; }
.tool-faq[open] .faq-icon { color: var(--t-navy); }

.tool-faq__a {
  padding: 0 1.75rem 1.5rem;
  color: var(--t-body);
  max-width: 65ch;
}

/* ---------------------------------------------------------------------------
   CALL TO ACTION LEAD LINE
--------------------------------------------------------------------------- */

/* Change 15. The call to action area was cramped. The extra space goes
   between the elements, on the DESIGN.md scale, not into the block's own top
   and bottom padding, so the block does not grow taller overall. */
.tool-cta__lead {
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #FFFFFF;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

/* The sub-lines sat almost against the button. */
.tool-darkblock .tool-cta__sublines {
  margin-top: 2rem;
  display: grid;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   CLOSING DARK BLOCK
   The page ends on dark rather than trailing into grey. Cards here take the
   dark-ground recipe from DESIGN.md section 4: transparent fill, a hairline
   white-alpha border, white title and white-alpha description. No shadow, and
   no navy, because navy on this ground would be the only decorative use of the
   accent on the page.
--------------------------------------------------------------------------- */

.tool-darkblock__group + .tool-darkblock__group {
  margin-top: 1.75rem;
}

/* B5. The reviewed line and the disclaimer head the closing block instead of
   taking a pale section of their own for two short paragraphs. */
.tool-darkblock__legal {
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.tool-darkblock__reviewed {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #FFFFFF;
}

.tool-darkblock__disclaimer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 80ch;
}

.tool-darkblock__label {
  font-family: var(--t-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1rem;
}

.tool-darkblock__grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .tool-darkblock__grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

/* C2. Larger cards in a tighter field. Previously small cards floating in a
   large black area, the inverse of the density problem elsewhere. */
.tool-darkcard {
  display: block;
  padding: 1.5rem;
  min-height: 7.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--t-radius-card);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.tool-darkcard:hover {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.tool-darkcard__name {
  display: block;
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #FFFFFF;
}

.tool-darkcard__desc {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--t-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}