/* Tools — hub + five calculators. Page layer on top of atlas.css.
   Reads like an instrument: inputs on the left, the result (big number first) on
   the right. Tokens and shared components come from atlas.css; nothing here
   re-declares them. Classes toggled by src/js/tools.mjs / address.mjs
   (is-stale, is-negative, status-badge status-*, aria-pressed, [hidden]) are
   styled below. */
@layer pages {

  .tools-body { padding-bottom: var(--section); }
  .tools-body > .callout { margin-bottom: 1.75rem; max-width: 52rem; }

  /* ───────────── hub: five cards ───────────── */
  .tool-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .tool-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem 1.4rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, transform 0.2s var(--ease-out);
  }
  .tool-card:nth-child(n + 4) { grid-column: span 3; }
  .tool-card:hover { border-top-color: var(--open); transform: translateY(-2px); }
  .tool-card-index { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-3); }
  .tool-card h2 { font-size: var(--step-2); line-height: 1.02; }
  .tool-card h2 a { text-decoration: none; }
  .tool-card h2 a::after { content: ""; position: absolute; inset: 0; }
  .tool-card h2 a:focus-visible { outline: none; }
  .tool-card:has(h2 a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
  .tool-card:hover h2 a { color: var(--open-ink); }
  .tool-card-short { color: var(--ink-2); line-height: 1.45; }
  .tool-card-meta {
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--ink-3);
  }
  @media (max-width: 62rem) {
    .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-card, .tool-card:nth-child(n + 4) { grid-column: auto; }
    .tool-card:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 36rem) {
    .tool-cards { grid-template-columns: minmax(0, 1fr); }
  }

  /* hub: how to read — compact, two columns */
  .tool-reading { margin-top: var(--section); max-width: 60rem; }
  .tool-reading h2, .tool-notes h2, .tool-section h2 { font-size: var(--step-2); margin-bottom: 1.1rem; }
  .tool-reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
  .tool-reading-grid p { padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
  .tool-reading-grid strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 48rem) { .tool-reading-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

  .tool-note-after { margin-top: 1.4rem; max-width: 46rem; color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
  .tool-note-after a, .tool-note a { text-decoration-color: var(--open); }

  /* ───────────── tool: two columns ───────────── */
  .tool { display: grid; gap: var(--section); }
  .tool-columns { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 62rem) {
    .tool-columns { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
    .tool-output {
      position: sticky;
      top: calc(var(--masthead-h) + 1rem);
      max-height: calc(100vh - var(--masthead-h) - 2rem);
      overflow-y: auto;
    }
    .tool-compare .tool-output { position: static; max-height: none; overflow: visible; }
  }

  .tool-pane-title {
    font-family: var(--font-mono);
    font-stretch: 100%;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--ink-3);
  }

  /* inputs */
  .tool-form { display: grid; gap: 1.15rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--ink); min-width: 0; }
  .form-field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
  .form-field .field { width: 100%; font-family: var(--font-mono); font-size: 0.95rem; }
  .field[aria-invalid="true"] { border-color: var(--open-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--open) 22%, transparent); }
  .field-hint { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }
  .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
  .field-row > .form-field { grid-template-rows: 1fr auto auto; }
  .field-row > .form-field > .field-label { align-self: end; }
  .form-group { display: grid; gap: 1.15rem; }
  .tool-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; min-width: 0; }
  .tool-fieldset legend { padding: 0; margin-bottom: 0.55rem; }
  .tool-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tool-actions .btn { height: 2.5rem; }

  .error-message {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--open-ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--open) 9%, var(--surface));
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* segmented controls: kangaroo targets (buttons), EV scenario (radios) */
  .seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .seg--stack { grid-auto-flow: row; }
  .tool-target {
    min-height: 2.5rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
  }
  .tool-target:hover { background: var(--paper-2); color: var(--ink); }
  .tool-target[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 500; }
  .tool-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem 0.55rem 2.15rem;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.35;
    cursor: pointer;
  }
  .tool-radio::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
  }
  .tool-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .tool-radio:hover { background: var(--paper-2); color: var(--ink); }
  .tool-radio:has(input:checked) { background: var(--ink); color: var(--paper); }
  .tool-radio:has(input:checked)::before { background: radial-gradient(circle, currentColor 38%, transparent 42%); }
  .tool-radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .tool-target:focus-visible { outline-offset: 1px; }

  /* ───────────── results ───────────── */
  .tool-output {
    container-type: inline-size;
    display: grid;
    gap: 1.25rem;
    align-content: start;
    min-width: 0;
    padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    transition: opacity 0.12s;
  }
  .tool-output.is-stale { opacity: 0.55; outline: 1px dashed var(--rule-strong); outline-offset: 4px; }
  .tool-stale { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--open-ink); }

  /* the headline number */
  .result-hero { display: grid; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); min-width: 0; }
  .result-hero-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .result-hero-value {
    font-family: var(--font-display);
    font-stretch: 38%;
    font-weight: 790;
    font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--ink);
  }
  .result-hero-value--text { font-stretch: 55%; font-weight: 740; font-size: var(--step-2); line-height: 1.1; }
  .result-hero--key .result-hero-value { color: var(--key-ink); font-size: clamp(2.2rem, 1rem + 3.2vw, 3.6rem); }
  .result-hero-value.is-negative { color: var(--open-ink); }
  .result-hero-sub { max-width: 42rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

  /* rows: label left, value right (stack in a narrow panel) */
  .result-rows { display: block; border-top: 0; min-width: 0; }
  .result-rows > .result-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .result-rows > .result-row:first-child { padding-top: 0; }
  .result-rows > .result-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .result-row dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .result-row dd { margin: 0; font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .result-row dd.mono { font-size: 0.88rem; }
  @container (max-width: 30rem) {
    .result-rows > .result-row { grid-template-columns: minmax(0, 1fr); }
  }

  .result-detail { display: grid; gap: 0.9rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .result-pair { display: grid; gap: 1.25rem; }
  .result-pair > .result-rows + .result-rows { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .tool-note { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
  .tool-output > .tool-note:last-child { padding-top: 0.25rem; }

  /* address page: two panes, each input + result */
  .tool-columns--pair { gap: 1.5rem; }
  @media (min-width: 62rem) {
    .tool-columns--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
  }
  .tool-pane { padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--ink); border-radius: var(--radius-sm); }
  .tool-result { display: grid; gap: 1rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); container-type: inline-size; }
  .result-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; margin: 0; font-size: 0.85rem; color: var(--ink-2); }
  .addr-value { flex: 1 1 100%; font-size: 0.82rem; word-break: break-all; color: var(--ink); }
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--ink-3);
    color: var(--ink);
    background: var(--paper-2);
  }
  .status-badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
  .status-badge.status-invalid { border-style: dashed; border-color: var(--open-ink); color: var(--open-ink); background: color-mix(in srgb, var(--open) 10%, var(--surface)); }
  .status-badge.status-invalid::before { border-radius: 0; transform: rotate(45deg); }
  .status-badge.status-unsupported { border-style: dashed; color: var(--ink-2); }
  .status-badge.status-unsupported::before { background: transparent; outline: 1.5px solid currentColor; outline-offset: -1.5px; }
  .tool-examples { border-bottom: 1px solid var(--rule); }
  .tool-examples .table-scroll { margin-bottom: 1rem; }
  .example-value { overflow-wrap: anywhere; word-break: break-all; min-width: 14rem; }

  /* ───────────── notes: one disclosure each ───────────── */
  .tool-notes { max-width: 52rem; }
  .tool-notes .disclosure:last-of-type { border-bottom: 1px solid var(--rule); }
  .tool-notes .disclosure > summary { font-size: 1rem; line-height: 1.35; }
  .tool-notes .disclosure > summary:focus-visible { outline-offset: -2px; }
  .tool-note-item > p { max-width: 44rem; margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; }
  .tool-note-item strong { color: var(--ink); }
  .tool-note-plain { margin-top: 1.1rem; max-width: 44rem; line-height: 1.6; }
  .tool-notes code, .tool-note-item .mono, .tool-reading .mono { font-family: var(--font-mono); font-size: 0.9em; }

  /* ───────────── compare: charts ───────────── */
  .tool-section { min-width: 0; }
  .chart { display: grid; gap: 1rem; max-width: 56rem; margin-bottom: 2rem; }
  .chart-plot { display: grid; gap: 0.3rem; padding: 1.1rem 1.25rem 0.8rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
  .bar-row { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 4rem; align-items: center; gap: 0.75rem; min-height: 1.55rem; }
  .bar-label, .bar-value { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }
  .bar-value { color: var(--ink); }
  .bar-track { display: block; width: 100%; height: 1.45rem; overflow: visible; }
  .bar-grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .bar-base { stroke: var(--ink-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .bar--found { fill: var(--found); }
  .bar--scan { fill: var(--open); }
  .bar--key { fill: var(--key); }
  .bar-row--axis { min-height: 0; margin-top: 0.15rem; }
  .bar-ticks { position: relative; display: block; height: 1.3rem; border-top: 1px solid var(--rule-strong); }
  .tick { position: absolute; top: 0.3rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
  .bar-value sup, .tick sup { font-size: 0.78em; vertical-align: 0.4em; }
  .tick--0 { left: 0; transform: none; }
  .tick--1 { left: 25%; }
  .tick--2 { left: 50%; }
  .tick--3 { left: 75%; }
  .tick--4 { left: 100%; transform: translateX(-100%); }
  .chart-legend { margin: 0; padding: 0; }
  .chart figcaption { max-width: 46rem; font-size: 0.85rem; line-height: 1.55; color: var(--ink-2); }
  @media (max-width: 36rem) {
    .chart-plot { padding: 0.9rem 0.8rem 0.6rem; }
    .bar-row { grid-template-columns: 2.5rem minmax(0, 1fr) 3.3rem; gap: 0.5rem; }
  }

  /* The shared sticky header assumes the page scrolls; inside .table-scroll it would
     sit over the first row, so tables here keep a static header. */
  .tool-section .table-scroll, .tool-examples .table-scroll { border-top: 0; margin-bottom: 1.5rem; }
  .tool-section .data-table th, .tool-examples .data-table th { position: static; background: transparent; border-top: 1px solid var(--ink); }
  .data-table caption { caption-side: top; text-align: left; padding: 0 0 0.6rem; font-size: 0.82rem; color: var(--ink-2); }
  .data-table td, .data-table th { padding-right: 1.25rem; }
  .data-table th.num { text-align: right; }

  @media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-output { transition: none; }
    .tool-card:hover { transform: none; }
  }
}