/* Free tools: every tool page (hub and children).
   Palette variables from styles.css only: build.py fails on a hex colour
   here, so a tool can never drift from the site's palette. */

  .tool-lede { max-width: 60ch; }
  .tool-body { max-width: var(--measure); }
  .tool-body > * + * { margin-top: 1.5rem; }
  .tool-body h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-sub);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin-top: 3rem;
  }
  .tool-body p { color: var(--ink-2); }

  /* Figures: every column of numbers in tabular figures (design system §3.4). */
  .tool-table-wrap { overflow-x: auto; }
  .tool-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
  .tool-table th, .tool-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
  }
  .tool-table th { color: var(--ink-2); font-weight: 500; }
  .tool-table td.num, .tool-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* Expired data (plan T11): what replaces a block's figures, from the build
     or from templates/tool-withhold.js in the browser. */
  .tool-withheld {
    background: var(--sunken);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: var(--ink);
  }

  /* The noscript note beside a calculator (plan §2.3). */
  .tool-noscript {
    border-left: 2px solid var(--sea);
    padding-left: 1rem;
    color: var(--ink-2);
  }

  /* ── PE explorer hub (/tools/private-equity-fund-returns) ──────────────
     Tables from the build; pe-explorer.js shows one at a time and draws the
     chart from it. Without JS (no .pe-js) every table shows. */
  /* Page rhythm (Juan, 2026-10-21): a compact head like the platform cost
     tool, one line of explanation above each figure, method and sources at
     the foot in small print. */
  .pe-head .pe-title { max-width: 30ch; }
  .pe-hub { padding-top: 1.5rem; padding-bottom: var(--gap-section); }
  .pe-hub > noscript .tool-noscript { margin-bottom: 1rem; max-width: var(--measure); }
  .pe-h2 {
    font-family: var(--serif); font-weight: 400; font-size: var(--t-sub);
    line-height: 1.2; letter-spacing: -0.015em; color: var(--navy);
    margin-top: 3.5rem;
  }
  .pe-h2.pe-first { margin-top: 0; }
  .pe-above { margin-top: 0.5rem; max-width: var(--measure); color: var(--ink-2); }
  .pe-below { margin-top: 0.75rem; font-size: var(--t-caption); color: var(--ink-2); }
  .pe-figures { margin-top: 1.25rem; }
  .pe-table-toggle { margin-top: 1rem; }
  .pe-table-toggle > summary {
    cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--navy);
    width: fit-content;
  }
  .pe-table-toggle > summary:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .pe-cta-box { margin-top: 3.5rem; max-width: 46rem; background: var(--navy-subtle);
    border-color: var(--navy-subtle); padding: 1.5rem 1.75rem; }
  .pe-small { margin-top: 3.5rem; max-width: var(--measure); border-top: 1px solid var(--border);
    padding-top: 1.5rem; }
  .pe-small > * + * { margin-top: 0.75rem; }
  .pe-small h3.pe-small-title { margin-top: 1.5rem; }
  .pe-small-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
  .pe-small p, .pe-small li { font-size: var(--t-caption); line-height: 1.55; color: var(--ink-3); }
  .pe-small a { color: inherit; }

  .pe-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .pe-switch[hidden] { display: none; }  /* else display:flex shows a hidden switch */
  .pe-switch + .pe-switch { margin-top: 0.75rem; }
  .pe-switch-dim .pe-btn { background: var(--sunken); }
  .pe-btn {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.2;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
  }
  .pe-btn:hover { border-color: var(--navy); }
  .pe-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ink-inv); }
  .pe-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .pe-switch-basis .pe-btn { background: var(--sunken); }
  .pe-switch-basis .pe-btn[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); }

  .pe-chart-figure {
    margin: 1.5rem 0 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  .pe-chart-title { font-weight: 500; color: var(--navy); }
  .pe-chart { margin-top: 0.75rem; width: 100%; }
  .pe-svg { display: block; max-width: 100%; height: auto; }
  .pe-svg text { font-family: var(--sans); }
  .pe-grid { stroke: var(--border); stroke-width: 1; }
  .pe-one { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 3; }
  .pe-axis { fill: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
  .pe-box { fill: var(--sea-subtle); stroke: var(--sea); stroke-width: 1; }
  .pe-median { stroke: var(--navy); stroke-width: 2.5; }
  .pe-count { fill: var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; }
  .pe-count-sm { font-size: 8px; }
  .pe-count-none { fill: var(--ink-3); }
  .pe-legend { margin-top: 0.75rem; font-size: var(--t-caption); color: var(--ink-2); }
  .pe-key { display: inline-block; vertical-align: middle; margin-right: 0.25rem; }
  .pe-key-box { width: 0.75rem; height: 0.75rem; background: var(--sea-subtle); border: 1px solid var(--sea); }
  .pe-key-median { width: 0.875rem; height: 0; border-top: 2.5px solid var(--navy); margin-left: 0.5rem; }

  .pe-tables { margin-top: 1rem; }
  .pe-strategy + .pe-strategy { margin-top: 2.5rem; }
  .pe-strategy h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-lead); color: var(--navy); }
  .pe-panel { margin-top: 1rem; }
  .pe-panel-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
  .pe-table caption { text-align: left; font-size: var(--t-caption); color: var(--ink-2); padding: 0.5rem 0; }
  .pe-table th.pe-colgroup { text-align: center; border-bottom-color: var(--border-strong); }
  .pe-table td.pe-small { color: var(--ink-3); }
  .pe-table tbody th { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
  .pe-none { color: var(--ink-2); font-size: var(--t-sm); }
  /* With JS the strategy heading is the pressed button and the basis title
     the pressed switch, so the one table on show needs neither. */
  .pe-js .pe-strategy h3, .pe-js .pe-panel-title { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pe-js .pe-panel { margin-top: 0; }

  .pe-search { margin-top: 1.5rem; max-width: 34rem; }
  .pe-search-label { display: block; font-weight: 500; color: var(--navy); }
  .pe-search input {
    margin-top: 0.5rem; width: 100%;
    font: inherit; padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-strong); border-radius: 6px;
    background: var(--surface); color: var(--ink);
  }
  .pe-search input:focus-visible { outline: 2px solid var(--sea); outline-offset: 1px; }
  .pe-search-status { margin-top: 0.5rem; font-size: var(--t-caption); color: var(--ink-2); min-height: 1.2em; }
  .pe-search-results { list-style: none; margin: 0.25rem 0 0; padding: 0; }
  .pe-search-results li { padding: 0.375rem 0; border-bottom: 1px solid var(--border); }
  .pe-result-meta { color: var(--ink-2); font-size: var(--t-caption); }

  /* Comparisons with the vintage median (E5). The range bars are spans in
     the table, placed at build time (left/width in %), so they draw with no
     JS; pe-explorer.js only switches basis. */
  .pe-rel { margin-top: 1.25rem; max-width: 52rem; }
  .pe-rel-switch { margin-bottom: 0.5rem; }
  .pe-rel .pe-panel-title { margin-top: 1.25rem; }
  /* The section's h2 says it; the caption stays for screen readers. */
  .pe-rel-table caption { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pe-rel-table tbody th { font-weight: 500; color: var(--ink); }
  .pe-rel-n { display: block; font-size: var(--t-caption); font-weight: 400; color: var(--ink-2);
    font-variant-numeric: tabular-nums; }
  .pe-rel-table td.pe-rel-mid { white-space: nowrap; color: var(--ink-2); }
  .pe-rel-table td.pe-small { color: var(--ink-3); }
  .pe-rel-table .pe-rel-bar { width: 40%; min-width: 6rem; vertical-align: middle; }
  /* Inset, so the end labels (centred on their tick) stay inside the cell. */
  .pe-rel-ticks, .pe-rel-track { position: relative; display: block; margin: 0 1rem; }
  .pe-rel-ticks { height: 1.1em; }
  .pe-rel-tick {
    position: absolute; transform: translateX(-50%);
    font-size: var(--t-caption); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .pe-rel-track { height: 0.875rem; }
  .pe-rel-one { position: absolute; top: -0.25rem; bottom: -0.25rem; border-left: 1px dashed var(--ink-3); }
  .pe-rel-range {
    position: absolute; top: 0.125rem; bottom: 0.125rem;
    background: var(--sea-subtle); border: 1px solid var(--sea); border-radius: 2px;
  }
  .pe-rel-dot {
    position: absolute; top: 50%; width: 0.625rem; height: 0.625rem;
    margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%; background: var(--navy);
  }
  .pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; }
  @media (max-width: 559px) {
    .pe-rel-table th, .pe-rel-table td { padding: 0.5rem 0.375rem; }
    /* Phones: each row is name | median | middle half, and its bar gets a
       full-width line beneath (design system 9.2: stacked rows). */
    .pe-rel-table, .pe-rel-table thead, .pe-rel-table tbody { display: block; }
    .pe-rel-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
      border-bottom: 1px solid var(--border); }
    .pe-rel-table th, .pe-rel-table td { border-bottom: 0; }
    .pe-rel-table td.pe-small { grid-column: 2 / -1; }
    .pe-rel-table .pe-rel-bar { grid-column: 1 / -1; width: auto; min-width: 0; padding-top: 0; }
    .pe-rel-table thead .pe-rel-bar { padding-top: 0.25rem; }
  }

  /* Sources: small print, two columns where there is room. */
  .pe-sources { list-style: none; margin: 0.5rem 0 0; padding: 0; columns: 2 18rem; column-gap: 2rem; }
  .pe-sources li { break-inside: avoid; padding: 0.125rem 0; }
  .pe-ogl { display: block; }
  .pe-outside { margin-top: 0.5rem; }

  /* ── Shared preset buttons (first used by /tools/platform-costs) ────────── */
  .tool-control + .tool-control { margin-top: 1.25rem; }
  .tool-control-label { font-weight: 500; color: var(--navy); margin-bottom: 0.5rem; }
  .tool-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tool-btn {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.2;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
  }
  .tool-btn:hover { border-color: var(--navy); }
  .tool-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ink-inv); }
  .tool-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .tool-btn-hint { display: block; font-size: var(--t-caption); font-weight: 400; color: var(--ink-2); margin-top: 0.125rem; }
  .tool-btn[aria-pressed="true"] .tool-btn-hint { color: var(--ink-inv); }

  /* Small print on a tool page: sources, method, disclaimer. There, legible, not loud. */
  .tool-footnote { font-size: var(--t-caption); line-height: 1.55; color: var(--ink-3); }
  .tool-footnote a { color: inherit; }

  /* ── Platform cost tool (/tools/platform-costs) ─────────────────────────
     Above the fold: the question, the buttons and the table. Controls beside
     the table from 960px, stacked below. */
  .pc-head { padding-top: clamp(1.25rem, 3vw, 2rem); }
  .pc-title {
    font-family: var(--serif); font-weight: 400; color: var(--navy);
    font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em;
    margin-top: 0.5rem; max-width: 26ch;
  }
  .pc-lede { margin-top: 0.75rem; max-width: 46rem; color: var(--ink-2); }
  .pc-tool { padding-top: 1.5rem; padding-bottom: var(--gap-section); }
  .pc-tool > noscript .tool-noscript { margin-bottom: 1rem; max-width: var(--measure); }

  .pc-figures { display: grid; gap: 1.5rem; align-items: start; }
  @media (min-width: 960px) {
    .pc-figures { grid-template-columns: 18.5rem minmax(0, 1fr); }
    .pc-controls { position: sticky; top: 5rem; }
  }
  .pc-controls {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem 1.125rem;
  }
  .pc-controls .tool-control + .tool-control { margin-top: 0.875rem; }
  .pc-controls .tool-control-label {
    font-size: var(--t-caption); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 0.375rem;
  }
  .pc-controls .tool-switch { gap: 0.375rem; }
  .pc-controls .tool-btn { padding: 0.375rem 0.625rem; }
  /* Sizes three to a row; every other choice one per row, its detail on the right. */
  .pc-controls .tool-switch { display: grid; grid-template-columns: 1fr; }
  .pc-controls .pc-switch-size { grid-template-columns: repeat(3, 1fr); }
  .pc-controls .pc-switch-size .tool-btn { justify-content: center; }
  .pc-controls .tool-btn { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .pc-controls .tool-btn-hint { margin-top: 0; white-space: nowrap; }
  .pc-table thead th { white-space: nowrap; }

  .pc-result { min-width: 0; }
  .pc-preset {
    font-weight: 500; color: var(--navy);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  }
  .pc-table { margin-top: 0.5rem; font-size: var(--t-body); }
  .pc-table caption.pc-caption {
    caption-side: top; text-align: left; padding: 0 0 0.5rem;
    font-size: var(--t-caption); color: var(--ink-3);
  }
  .pc-table thead th {
    font-size: var(--t-caption); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-3);
    border-bottom: 1px solid var(--border-strong);
  }
  .pc-table th, .pc-table td { padding: 0.7rem 0.75rem; vertical-align: middle; }
  .pc-table tbody tr:hover { background: var(--sunken); }
  .pc-table tbody th.pc-name { font-weight: 500; color: var(--ink); }
  .pc-table td.pc-total { font-size: 1.0625rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
  .pc-table td.pc-pct { color: var(--ink-2); white-space: nowrap; }
  .pc-table td.pc-note { font-size: var(--t-caption); color: var(--ink-2); }
  .pc-table tr.pc-dash td.pc-total, .pc-table tr.pc-dash td.pc-pct { color: var(--ink-3); font-weight: 400; }
  @media (max-width: 639px) {
    .pc-table th.pc-pct, .pc-table td.pc-pct { display: none; }
    .pc-table th, .pc-table td { padding: 0.6rem 0.5rem; }
  }

  /* "How UK platform charges work": collapsed, under the table, in its column. */
  .pc-explain { margin-top: 1.5rem; max-width: 52rem; }
  .pc-explain > summary {
    cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--navy);
    width: fit-content;
  }
  .pc-explain > summary:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
  .pc-explain-body { margin-top: 0.75rem; max-width: var(--measure); }
  .pc-explain-body > * + * { margin-top: 0.6rem; }
  .pc-explain-body p { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
  .pc-explain-body strong { font-weight: 600; color: var(--ink); }

  .pc-after { margin-top: 2.5rem; display: grid; gap: 2rem; max-width: 52rem; }
  @media (min-width: 960px) { .pc-after, .pc-explain { margin-left: 20rem; } }
  .pc-cta-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 1.25rem 1.5rem;
  }
  .pc-cta-text { color: var(--ink); }
  .pc-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
  .pc-small > * + * { margin-top: 0.75rem; }
  .pc-small-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
  .pc-small p { font-size: var(--t-caption); line-height: 1.55; color: var(--ink-3); }
  .pc-small a { color: inherit; }