/* Sprint CR, Workstream 1 (2026-09-18) — fee hub pages: the layout-system pieces
   from planning/sprint-cr/review-2-layout/layout-system.md that styles.css
   (Workstream 4 this sprint — not editable here) does not already carry.
   Linked after styles.css, on the 8 fee-hub pages only, by
   scripts/seo/cq-build-fee-hubs.mjs. Everything else on these pages (.wrap,
   .cy-hero, section rhythm, .sec-head, .quick-answer, .swid, .final, .btn…)
   reuses styles.css unchanged. */

/* ---- one container: an 800px reading column, same responsive gutter as
   .wrap. Used for every section on these pages, and — critically — instead
   of .wrap inside .cy-hero, which sidesteps styles.css's
   `.cy-hero .wrap{grid-template-columns:1.1fr .9fr}` two-column grid (built
   for the 445 city pages' stats aside). These pages render one column, so
   .wrap-narrow's div is never a grid item and the phantom empty second
   track the old generator left behind is gone.
   .wrap-narrow and .cq-label (below) used to be defined here, plus
   verbatim in finder.css and re-city-page.css. Promoted to one source in
   styles.css (Sprint CR final pass, WS5) — confirmed identical (or, for
   re-city-page.css's .cq-label, corrected to match) before dropping the
   per-file copies. ---- */

/* "Updated <date>" line under the h1 — the old generator borrowed a finder-
   page class (.finder-updated) that finder pages only style via their own
   *inline* <style> block, never copied here, so it rendered completely
   unstyled on every fee-hub page. New class, styled here instead. */
.cy-hero .h-updated{font-size:13.5px;color:var(--text-muted);margin:2px 0 22px}

/* ---- transaction pills: moved inside the top of "What the bill is made
   of" (under the label above), no longer a standalone bordered section ---- */
.cq-pills-head{margin-bottom:34px}
.fee-hub-nav{display:flex;flex-wrap:wrap;gap:8px}
.fee-hub-nav a{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:20px;border:1px solid var(--border);color:var(--text-strong)}
.fee-hub-nav a.on{background:var(--tsl-ink);color:#fff;border-color:var(--tsl-ink)}

/* ---- bill table: label column flexible, amount column fixed width and
   right-aligned with tabular figures, grouped rows, an emphasised "Our fee"
   row — and, binding rule A, never a total row ---- */
.fee-table-wrap{overflow-x:auto;margin:8px 0 28px}
.fee-table{width:100%;border-collapse:collapse}
.fee-table td,.fee-table th{padding:13px 0;border-bottom:1px solid var(--border);vertical-align:top}
.fee-table th{font-weight:700;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;text-align:left}
.fee-table th:last-child,.fee-table td.amt{width:150px;min-width:120px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;padding-left:12px}
.fee-table td.lbl{font-size:14.5px}
.fee-table td.amt .fee-from{font-size:11px;opacity:.7;font-weight:400}
.fee-table .fee-sub{display:block;font-size:12.5px;color:var(--text-muted);margin-top:4px;font-weight:400}
.fee-table tr.fee-emphasis td{font-weight:700;border-top:2px solid var(--tsl-ink);border-bottom:2px solid var(--tsl-ink)}
.fee-table tr.fee-emphasis td.amt{font-size:16px}
.fee-table tr.fee-group td{padding:22px 0 8px;border-bottom:none}
.fee-table tr.fee-group td .cq-label{margin:0}
.fee-table tr.fee-group+tr td{border-top:none}
.fee-note{font-size:13px;color:var(--tsl-ink-soft);margin-top:4px;max-width:68ch}
@media(max-width:480px){
  .fee-table th:last-child,.fee-table td.amt{width:96px;min-width:88px}
  .fee-table .fee-sub{font-size:12px}
}

/* ---- "Land transfer tax at common prices" — replaces the old worked-
   examples table that summed fee + disbursements + tax into a Total
   column. Tax only, three prices, in/outside Toronto. ---- */
.ltt-table{width:100%;border-collapse:collapse;margin:8px 0 10px}
.ltt-table th,.ltt-table td{padding:11px 10px;border-bottom:1px solid var(--border);font-size:14px;text-align:left}
.ltt-table th{font-weight:700;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ltt-table td:last-child,.ltt-table th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;width:140px}
.ltt-table tr.tor td{background:rgba(179,32,37,.04)}

.fee-links-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}

/* ---- FAQ: a static, always-open list (h3 + p, no <details>) so the
   content is there for a JS-off reader and a crawler alike — matches
   scripts/faq-sync.py's existing "h3 style" visible-entry detection.
   .faq-list already exists in styles.css for the sitewide <details>
   accordion pattern (max-width:780px, centred); these two rules override
   just enough of it for this page family, which already sits inside
   .wrap-narrow. ---- */
.faq-list{max-width:none;margin:0;display:flex;flex-direction:column;gap:20px}
.faq-item h3{font-size:15.5px;font-weight:600;font-family:var(--font-body);margin-bottom:6px}
.faq-item p{font-size:14.5px;color:var(--text-muted);max-width:68ch}