/* Hallmark · shape: Stat-Led · genre: modern-minimal · theme: Wayfind palette, restyled (Manrope, rounded surfaces) · job: try · draw: fe8437
 * hero: Counter (the calculator is the product and the action) · nav: edge-aligned, wordmark left, account right · footer: statement · imagery: the product (the calculator, live) and our own council marks · signature: the levy figure in amber on an ink plate, with its working · wayfind: platform
 * scope: the hero is a working calculator, an app screen inside a page; linted with --scope app · redesign: restyle
 * axes: light/sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, many states across the form and sign-in; every control built from one recipe in eight states */
/* Hallmark · dismissed 23 · the amber levy and price figures sit on ink plates, where Wayfind turns figures amber */
/* Hallmark · dismissed F4 · the result tools are outlined pills and the form submit shows only with scripting off, so one filled primary per screen holds */
/* Hallmark · waive 49b · board__table link West Dunbartonshire wraps to two lines at 320px · a council’s own name, which can’t be shortened */
/* Hallmark · dismissed F5 · dashboard KPI cards set their icon on a tinted circle · the owner asked for this, from reference dashboards; the dashboard is an app screen, not the marketing page */
/* Hallmark · dismissed 49 · quick actions are two-line buttons by design: a name, then what it does */
/* Hallmark · dismissed F7 · the pill radius sits on nav links, the account button, the result tools and the skip link, all of them controls */
/* Hallmark · waive 72 · details.assume measured while closed, its hidden list counts past the box · the levy assumptions open on a click and are padded when shown */
/* Hallmark · redesign: full, app scope · the bookings ledger (category chips with counts, sortable sticky heads, grouping, paging, URL state) and pricing (the real To do list beside the price, the pick named in a word, reassurance at the button) · no invented social proof */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

/* Laws of UX, applied (see docs/UX.md):
 * Jakob: wordmark left, account right, familiar sign-in buttons · Fitts: 48px targets, big council cards
 * Hick + progressive disclosure: questions appear only when the booking needs them
 * Miller + common region: the form in four labelled groups · Doherty: results under 100ms, live
 * Von Restorff: amber is used for the levy alone · Peak-end: the result ends on clear next steps */
:root {
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-outlier: var(--font-display);
  --tracking-display: -0.035em;
  --radius-card: 24px;
  --radius-inner: 14px;
  --radius-input: 12px;
  --radius-pill: 999px;
  --control-h: 48px;
  --mast-h: 72px;
  --shadow-soft: 0 1px 2px oklch(20% 0.02 262 / 0.06), 0 12px 32px -16px oklch(20% 0.02 262 / 0.22);
  --color-field-edge: oklch(56% 0.016 258);
  --color-google-ink: oklch(30% 0.01 262);
  --shadow-lift: 0 40px 80px -30px oklch(0% 0 0 / 0.6);
  --shadow-shot: 0 40px 80px -40px oklch(16% 0.014 262 / 0.45);
  --shadow-tile: 0 20px 40px -30px oklch(16% 0.014 262 / 0.35);
  --color-scrim: oklch(16% 0.014 262 / 0.45);
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; line-height: 1.6; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { font-weight: 800; line-height: 1.04; }
h1 { font-size: min(var(--text-display-s), 4.5rem); max-width: 20ch; }
h3 { line-height: 1.25; letter-spacing: -0.015em; }
small, th, figcaption, caption { font-weight: 600; }
strong { font-weight: 800; }

.icon { flex-shrink: 0; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- masthead ---------- */
.mast { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklch, var(--color-paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--color-rule); }
.mast__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--mast-h); }
.mast__mark { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; border-radius: var(--radius-input); }
.mast__seal { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--color-ink); color: var(--color-accent-2); font-size: var(--text-md); font-weight: 800; }
.mast__nav { display: flex; gap: var(--space-2xs); margin-left: auto; }
.mast__nav a, .acct { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.mast__nav a:hover { background: var(--color-paper-2); }
.mast__nav a[aria-current="page"] { background: var(--color-paper-2); color: var(--color-ink); }
.acct { border: 1px solid var(--color-rule); background: var(--color-paper-3); padding: 0 var(--space-md) 0 var(--space-sm); }
.acct:hover { border-color: var(--color-ink); }
.acct[data-signed-in] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.mast__mark:focus-visible, .mast__nav a:focus-visible, .acct:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) {
  .mast__nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mast__nav a { padding: 0 var(--space-sm); }
  .mast__nav a:not(:has(svg)) span { position: static; width: auto; height: auto; clip-path: none; }
  .acct__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .acct { padding: 0; width: 44px; justify-content: center; }
  .mast__inner { gap: var(--space-xs); }
  .mast__nav { gap: 0; }
  .mast__nav a { padding: 0 var(--space-xs); min-width: 44px; justify-content: center; }
}
@media (max-width: 30rem) {
  .mast__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- hero: the calculator ---------- */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-lg); }
.hero__head .lead { color: var(--color-ink-2); }
@media (max-width: 60rem) { .hero__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }

.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
@media (max-width: 60rem) { .calc { grid-template-columns: minmax(0, 1fr); } }

.calc__form { border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); padding: var(--space-lg); box-shadow: var(--shadow-soft); }
.group { min-width: 0; margin: 0; padding: var(--space-md) 0 0; border: 0; border-top: 1px solid var(--color-rule); }
.group:first-child { padding-top: 0; border-top: 0; }
.group + .group { margin-top: var(--space-md); }
.group > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-sm); font-weight: 800; font-size: var(--text-sm); color: var(--color-ink); }
.group > legend + * { clear: both; }
.calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-md); }
@media (max-width: 30rem) { .calc__grid { grid-template-columns: minmax(0, 1fr); } .calc__form { padding: var(--space-md); } }
.field, .seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label, .seg legend, .nightly__title { display: block; margin-bottom: var(--space-2xs); padding: 0; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); }
.field__help { min-height: 1lh; margin-top: var(--space-3xs); font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.field__err { display: block; color: var(--color-error); font-weight: 600; }

.field input:not([type="checkbox"]), .money input, .signup input, .signup__form input[type="email"], .auth__email input {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-md);
  border: 1px solid var(--color-field-edge); border-radius: var(--radius-input);
  background: var(--color-paper-3); color: var(--color-ink); font-weight: 400;
  outline: 2px solid transparent; outline-offset: -1px;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.field input:hover, .money input:hover, .signup input:hover, .signup__form input[type="email"]:hover, .auth__email input:hover { border-color: var(--color-muted); }
.field input:focus-visible, .money input:focus-visible, .signup input:focus-visible, .signup__form input[type="email"]:focus-visible, .auth__email input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.field input:disabled, .money input:disabled { opacity: 0.55; cursor: not-allowed; }
.field [aria-invalid], .money [aria-invalid], .signup [aria-invalid], .auth__email [aria-invalid] { border-color: var(--color-error); }
.money { position: relative; }
.money > span { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--color-muted); pointer-events: none; }
.field .money input, .money input { padding-left: var(--space-xl); }

.check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* council cards: two big targets, one per council (Hick, Fitts) */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.places input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.place { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-sm); align-items: center; min-height: 72px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-inner); background: var(--color-paper-3); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.place__icon { grid-row: 1 / 3; color: var(--color-ink-2); }
.place__name { font-weight: 800; }
.place__meta { font-size: var(--text-xs); color: var(--color-muted); }
.place:hover { border-color: var(--color-ink); }
.places input:checked + .place { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.places input:checked + .place .place__icon { color: var(--color-accent-2); }
.places input:checked + .place .place__meta { color: var(--color-rule); }
.places input:focus-visible + .place { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.places input:disabled + .place { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 22rem) { .places { grid-template-columns: minmax(0, 1fr); } }

/* yes / no as a rounded segmented control */
.seg { margin-bottom: var(--space-sm); }
.seg__cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-input); background: var(--color-paper-2); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: 10px; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }

.nightly__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: var(--space-xs); margin-bottom: var(--space-sm); }
.nightly__cell label { display: block; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- buttons, all states ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn--line:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--quiet { border-color: var(--color-rule); }
.calc__submit { margin-top: var(--space-md); width: 100%; }
.js .calc__submit { display: none; }

/* ---------- the result plate ---------- */
.result-wrap { position: sticky; top: calc(var(--mast-h) + var(--space-md)); display: grid; gap: var(--space-sm); }
.plate { border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); }
.result { padding: var(--space-lg); box-shadow: var(--shadow-card); }
.result:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.result__label { font-weight: 600; font-size: var(--text-sm); color: var(--color-rule); }
.result__figure { margin-top: var(--space-2xs); font-weight: 800; font-size: var(--text-display); line-height: 1; letter-spacing: -0.045em; color: var(--color-accent-2); overflow-wrap: break-word; min-width: 0; }
.result__sums { display: grid; gap: var(--space-2xs); margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-ink-2); }
.result__sums div { display: flex; justify-content: space-between; gap: var(--space-md); }
.result__sums dt { font-weight: 400; }
.result__sums dd { margin: 0; font-weight: 800; }
.working { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font-size: var(--text-sm); }
.working caption { text-align: left; padding-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-rule); }
.working th, .working td { padding: var(--space-xs) 0; border-top: 1px solid var(--color-ink-rule); vertical-align: top; }
.working th { text-align: left; font-weight: 400; padding-right: var(--space-md); }
.working td { text-align: right; white-space: nowrap; }
.working .is-total th, .working .is-total td { font-weight: 600; }
.working .is-result th, .working .is-result td { font-weight: 800; color: var(--color-accent-2); }
.mark { margin-left: var(--space-3xs); color: var(--color-accent-2); }
.result__notes { margin: var(--space-md) 0 0; padding-left: var(--space-md); font-size: var(--text-sm); display: grid; gap: var(--space-2xs); color: var(--color-paper-2); }
.result__errors { margin: var(--space-md) 0 0; padding-left: var(--space-md); }
.result__figure--blank { color: var(--color-paper); }
.assume { margin-top: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-inner); background: var(--color-accent-2); color: var(--color-ink); font-size: var(--text-sm); }
.assume summary { display: flex; align-items: center; min-height: 40px; font-weight: 800; cursor: pointer; list-style: none; }
.assume summary::-webkit-details-marker { display: none; }
.assume summary::after { content: "+"; margin-left: auto; padding-left: var(--space-md); font-size: var(--text-lg); }
.assume[open] summary::after { content: "\2212"; }
.assume summary:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: 8px; }
.assume ul { margin: 0 0 var(--space-xs); padding-left: var(--space-md); }
.plate a { color: inherit; }

/* keep the result: copy, share, CSV, print (the peak-end: every result ends on a next step) */
.tools { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.tool { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.tool:hover { border-color: var(--color-ink); }
.tool:active { transform: translateY(1px); }
.tool:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tool:disabled { opacity: 0.55; cursor: not-allowed; }
.tools__status { flex-basis: 100%; min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

.disclaimer { margin-top: var(--space-lg); max-width: 75ch; font-size: var(--text-sm); color: var(--color-ink-2); }
.disclaimer a:hover, .questions a:hover, .foot a:hover, .auth a:hover { color: var(--color-accent); }

/* phone: keep the figure in view while the form is filled in */
.peek { position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: var(--z-sticky); display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-card); }
.peek__figure { font-weight: 800; color: var(--color-accent-2); }
.peek:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (min-width: 60.01rem) { .peek { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap-s); }
.section h2 { margin-bottom: var(--space-2xl); }
.with-mark { display: flex; align-items: center; gap: var(--space-md); }
.mark-icon { color: var(--color-ink-2); }

.compare__head { margin-bottom: var(--space-2xl); }
.compare__head h2 { margin-bottom: var(--space-md); }
.compare__head .lead { color: var(--color-ink-2); }
.compare__cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--space-md); }
.compare__cell { padding: var(--space-lg); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); color: inherit; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.compare__cell:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.compare__cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.compare__cell p:last-child { font-size: var(--text-sm); color: var(--color-ink-2); }
.compare__name { display: flex; align-items: center; gap: var(--space-sm); font-weight: 800; font-size: var(--text-lg); }
.compare__figure { font-weight: 800; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.045em; }
@media (prefers-reduced-motion: reduce) { .compare__cell { transition: none; } .compare__cell:hover { transform: none; } }

.band--ink { background: var(--color-ink); color: var(--color-paper); }
.board { padding-block: var(--section-gap-s); }
.board__wrap { overflow-x: auto; }
.board__table { width: 100%; min-width: 44rem; border-collapse: collapse; }
.board__table th, .board__table td { padding: var(--space-md) var(--space-md) var(--space-md) 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-ink-rule); }
.board__table thead th { font-size: var(--text-sm); color: var(--color-rule); }
.board__table tbody th { font-weight: 800; font-size: var(--text-title); }
.board__rate { font-weight: 800; font-size: var(--text-title); color: var(--color-accent-2); }
.board__status { text-align: right; white-space: nowrap; }
.board__table thead th:last-child { text-align: right; padding-right: 0; }
.board__table td:last-child { padding-right: 0; }
.board__status.is-live { font-weight: 800; }
.board__status.is-live::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-xs); border-radius: 50%; background: var(--color-accent-2); }
.board__status.is-soon { font-weight: 600; }
.board__note { max-width: 75ch; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-rule); }
@media (max-width: 40rem) {
  .board__table { min-width: 0; }
  .board__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .board__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-ink-rule); }
  .board__table th, .board__table td { padding: 0; border: 0; }
}

.figures { padding-block: var(--section-gap) var(--section-gap-s); }
.figures__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.figures__row > div { padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.figures__figure { font-weight: 800; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.04em; overflow-wrap: break-word; min-width: 0; }
.figures__row dd { margin: var(--space-md) 0 0; max-width: 28ch; color: var(--color-ink-2); }
@media (max-width: 60rem) { .figures__row { grid-template-columns: minmax(0, 1fr); } }

.strip { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.strip__nights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.night { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 200px; padding: var(--space-lg) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.night.is-levied { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.night__n { font-weight: 600; font-size: var(--text-sm); }
.night__p { font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.03em; }
.night.is-levied .night__p { color: var(--color-accent-2); }
.night__s { margin-top: auto; font-size: var(--text-sm); }
.strip__line { margin-top: var(--space-lg); max-width: 60ch; font-size: var(--text-lead); }
@media (max-width: 60rem) { .strip__nights { grid-template-columns: repeat(4, minmax(0, 1fr)); } .night { min-height: 130px; } }
@media (max-width: 30rem) { .strip__nights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .night:last-child:nth-child(odd) { grid-column: 1 / -1; } }

.questions { padding-block: var(--section-gap) var(--section-gap-s); }
.questions__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.questions__rows { display: grid; gap: var(--space-xs); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding: var(--space-lg); border-radius: var(--radius-inner); background: var(--color-paper-3); border: 1px solid var(--color-rule); }
.row h3 { font-size: var(--text-lg); }
.row p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .questions__inner, .row { grid-template-columns: minmax(0, 1fr); } .row { gap: var(--space-xs); padding: var(--space-md); } }

.band--paper2 { background: var(--color-paper-2); }
.signup__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.signup__head h2 { margin-bottom: var(--space-md); }
.signup__head .lead { color: var(--color-ink-2); }
.signup__form { max-width: 34rem; width: 100%; margin-top: var(--space-xl); }
.signup__form > label { display: block; margin-bottom: var(--space-xs); font-weight: 600; }
.signup__row { display: flex; gap: var(--space-xs); }
.signup__row input { flex: 1; min-width: 0; }
.signup__help { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.offer { padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-md); box-shadow: var(--shadow-card); }
.offer h3 { font-size: var(--text-title); }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.offer__figure { font-weight: 800; font-size: var(--text-display); line-height: 1; letter-spacing: -0.045em; color: var(--color-accent-2); }
.offer__list { margin: 0; padding: var(--space-md) 0 0; list-style: none; display: grid; gap: var(--space-xs); border-top: 1px solid var(--color-ink-rule); }
.offer__list li { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-ink-rule); }
.offer__buy { width: 100%; }
.offer__closed, .offer__terms { font-size: var(--text-sm); color: var(--color-paper-2); }
@media (max-width: 60rem) { .signup__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .signup__row { flex-direction: column; } }

.foot { padding-block: var(--section-gap-s) var(--space-2xl); border-top: 1px solid var(--color-rule); }
.foot__statement { font-weight: 800; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.03em; max-width: 30ch; text-wrap: balance; }
.foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.foot__links nav { display: grid; gap: var(--space-xs); justify-items: start; }
.foot__links a { padding-block: var(--space-2xs); border-radius: 6px; }
.foot__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foot__legal { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .foot__links { grid-template-columns: minmax(0, 1fr); } }

/* spam trap: off-screen, out of the tab order, hidden from assistive tech */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- sign-in and account ---------- */
.auth { padding-block: var(--space-2xl) var(--section-gap-s); }
.auth__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.auth__card { display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.auth__card h1 { font-size: var(--text-section); }
.auth__card .lead { color: var(--color-ink-2); font-size: var(--text-md); }
.auth__notice { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); font-weight: 600; }
.auth__notice[data-tone="error"] { background: color-mix(in srgb, var(--color-error) 12%, var(--color-paper-3)); color: var(--color-ink); }
.auth__sso { display: grid; gap: var(--space-xs); }
.sso { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.sso:active { transform: translateY(1px); }
.sso:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sso[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.sso--google { border: 1px solid var(--color-field-edge); background: var(--color-paper-3); color: var(--color-google-ink); }
.sso--google:hover { background: var(--color-paper); border-color: var(--color-muted); }
.sso--apple { border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper-3); }
.sso--apple:hover { background: var(--color-ink-2); }
.auth__or { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
.auth__email { display: grid; gap: var(--space-xs); }
.auth__email > label { font-weight: 600; font-size: var(--text-sm); }
.auth__email .btn { width: 100%; }
.auth__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.auth__skip { width: 100%; }
.auth__safety { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); }
.auth__safety h2 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--text-title); }
.auth__safety h2 .icon { color: currentColor; }
.auth__safety ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-sm); }
.auth__host { color: var(--color-accent-2); }
@media (max-width: 60rem) { .auth__inner { grid-template-columns: minmax(0, 1fr); } .auth__card, .auth__safety { padding: var(--space-lg); } }

.account { display: grid; gap: var(--space-xl); max-width: 52rem; }
.account__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.account__facts > div { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.account__facts dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.account__facts dd { margin: var(--space-2xs) 0 0; font-weight: 800; font-size: var(--text-title); overflow-wrap: anywhere; }
.account__body { display: grid; gap: var(--space-xl); }
.account__recent h2 { font-size: var(--text-title); margin-bottom: var(--space-2xs); }
.account__hint { color: var(--color-ink-2); margin-bottom: var(--space-md); }
.account__recent ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.account__recent li { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-3); border: 1px solid var(--color-rule); }
.account__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 40rem) { .account__facts { grid-template-columns: minmax(0, 1fr); } }

.signin, .thanks { padding-block: var(--section-gap-s); display: grid; gap: var(--space-lg); justify-items: start; }

/* ---------- print: the breakdown only ---------- */
@media print {
  .mast, .peek, .tools, .calc__form, .section, .foot, .disclaimer + *, .skip { display: none !important; }
  body { background: var(--color-paper-3); }
  .calc { display: block; }
  .result-wrap { position: static; }
  .plate { background: var(--color-paper-3); color: var(--color-ink); border: 1px solid var(--color-ink); box-shadow: none; }
  .result__figure, .working .is-result th, .working .is-result td, .mark { color: var(--color-ink); }
  .result__sums { background: var(--color-paper-2); }
  .result__label, .working caption, .result__notes { color: var(--color-ink-2); }
  .assume { border: 1px solid var(--color-ink); }
  .assume ul { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .seg label, .mast__nav a, .acct, .place, .tool, .sso, .field input, .money input { transition: none; }
  .btn:active, .tool:active, .sso:active { transform: none; }
}

/* ---------- dashboard (an app screen: denser, controls 40 to 48px) ---------- */
.dash { padding-block: var(--space-xl) var(--section-gap-s); }
.dash > .container { display: grid; gap: var(--space-xl); }
.dash__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); }
.dash__bar h1 { font-size: var(--text-section); }
.dash__sub { margin-top: var(--space-2xs); color: var(--color-ink-2); overflow-wrap: anywhere; }
.dash__controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.icon--up { transform: rotate(180deg); }
.select { min-height: var(--control-h); padding: 0 var(--space-xl) 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.select:hover { border-color: var(--color-ink); }
.select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.select:disabled { opacity: 0.55; cursor: not-allowed; }
.dash__message, .dash__empty { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.dash__message h2, .dash__empty h2 { font-size: var(--text-title); margin: 0; }
.dash__empty { border-style: dashed; border-color: var(--color-field-edge); }
.dash__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* loading skeleton, in the shape of what is coming */
.skel { border-radius: var(--radius-card); background: var(--color-paper-2); }
.skel--stats { height: 132px; margin-bottom: var(--space-md); }
.skel--table { height: 320px; }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel 1.2s var(--ease-in-out) infinite alternate; }
  @keyframes skel { from { opacity: 1; } to { opacity: 0.55; } }
}

.dash__quarter { font-size: var(--text-title); margin: 0 0 var(--space-md); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; }
.stat { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.stat dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.stat dd { margin: var(--space-xs) 0 0; font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.03em; white-space: nowrap; }
.stat--due { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.stat--due dt { color: var(--color-rule); }
.stat--due dd { color: var(--color-accent-2); }
@media (max-width: 60rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash__file { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }
.dash__file a, .dash__keep a { color: inherit; }
.dash__file a:hover, .dash__keep a:hover { color: var(--color-accent); }

.dash__tablebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.search { flex: 1 1 18rem; max-width: 26rem; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -1px; }
.search:hover { border-color: var(--color-muted); }
.search:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.tool--danger:hover { border-color: var(--color-error); color: var(--color-error); }
.tool[data-armed] { border-color: var(--color-error); background: var(--color-error); color: var(--color-paper-3); }
.tool--small { min-height: 36px; padding: 0 var(--space-sm); }

.table-wrap { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.table thead th { background: var(--color-paper-2); font-weight: 600; color: var(--color-ink-2); }
.table tbody th { font-weight: 600; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-paper); }
.table .num { text-align: right; }
.table .strong { font-weight: 800; }
.table .actions { text-align: right; }
.tag { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 600; }
.tag--zero { background: color-mix(in srgb, var(--color-accent-2) 30%, var(--color-paper-3)); }
.dash__none { padding: var(--space-lg); color: var(--color-ink-2); }
.dash__keep { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* upload: three steps in one panel */
.dash__upload { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.dash__upload-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.dash__upload-head h2 { font-size: var(--text-title); margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); counter-reset: step; }
.step { counter-increment: step; display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.step:first-child { padding-top: 0; border-top: 0; }
.step h3 { font-size: var(--text-lg); }
.step h3::before { content: counter(step) ". "; color: var(--color-muted); }
.step__note { color: var(--color-ink-2); font-size: var(--text-sm); }
.drop { position: relative; display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-xl) var(--space-lg); border: 1.5px dashed var(--color-field-edge); border-radius: var(--radius-inner); text-align: center; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.drop:hover, .drop[data-over] { border-color: var(--color-accent); background: var(--color-paper); }
.drop:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__main { font-weight: 800; }
.drop__sub { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 56ch; }
.drop__private { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.upload__settings { display: grid; gap: var(--space-sm); }
.mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-sm) var(--space-md); }
.mapping__row { display: grid; gap: var(--space-2xs); }
.mapping__row label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.mapping .select { width: 100%; border-radius: var(--radius-input); }
.warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.warn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: color-mix(in srgb, var(--color-accent-2) 28%, var(--color-paper-3)); font-size: var(--text-sm); }
.warn--block { background: color-mix(in srgb, var(--color-error) 12%, var(--color-paper-3)); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .select, .drop, .search { transition: none; } }
.dash__upload:not([hidden]) ~ .dash__empty { display: none; }

/* founding-member plans: the switch shows one price at a time, with no script needed */
.offer__form { display: grid; gap: var(--space-md); }
.offer__plans { margin: 0; }
.offer__plans .seg__cells { background: var(--color-ink-2); }
.offer__plans label { color: var(--color-paper-2); }
.offer__plans label:hover { background: var(--color-ink-rule); }
.offer__plans input:checked + label { background: var(--color-paper-3); color: var(--color-ink); }
.offer__plan { display: grid; gap: var(--space-2xs); }
.offer__note { font-size: var(--text-sm); color: var(--color-paper-2); }


/* the council's own words behind each result */
.cites { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-ink-rule); border-radius: var(--radius-inner); font-size: var(--text-sm); }
.cites summary { display: flex; align-items: center; min-height: 40px; font-weight: 600; cursor: pointer; list-style: none; }
.cites summary::-webkit-details-marker { display: none; }
.cites summary::after { content: "+"; margin-left: auto; padding-left: var(--space-md); }
.cites[open] summary::after { content: "\2212"; }
.cites summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 8px; }
.cites ul { margin: 0 0 var(--space-xs); padding-left: var(--space-md); display: grid; gap: var(--space-xs); color: var(--color-paper-2); }
.cites p { margin-bottom: var(--space-xs); color: var(--color-rule); }
.cites a:hover { color: var(--color-accent-2); }


@media (max-width: 48rem) { .mast__extra { display: none !important; } }
.board__table a { color: inherit; text-decoration-color: var(--color-ink-rule); }
.board__table a:hover { color: var(--color-accent-2); }
.board__status.is-now { color: var(--color-accent-2); font-weight: 800; }
.councils-hero { padding-block: var(--space-2xl) var(--space-xl); }
.councils-hero .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.places { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.board__table .board__status { text-align: right; }

/* ---------- dashboard: deadlines, tabs, returns, checks, properties, receipts ---------- */
.deadlines ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.deadline { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-3); font-size: var(--text-sm); }
.deadline.is-urgent { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.deadline.is-urgent strong { color: var(--color-accent-2); }
.dash__readonly { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); font-weight: 600; }

.tabs { display: flex; gap: var(--space-3xs); margin-top: var(--space-xl); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-2); width: max-content; max-width: 100%; overflow-x: auto; }
.tab { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tab:hover { background: var(--color-paper-3); color: var(--color-ink); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tab:disabled { opacity: 0.55; cursor: not-allowed; }
.panel { margin-top: var(--space-lg); display: grid; gap: var(--space-lg); }
.panel__intro { color: var(--color-ink-2); max-width: 70ch; }

.return-card { display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.return-card + .return-card { margin-top: var(--space-md); }
.return-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.return-card__head h3 { font-size: var(--text-title); }
.return-card__council { color: var(--color-muted); font-weight: 600; }
.chip { margin-left: auto; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 800; }
.chip.is-filed { background: var(--color-ink); color: var(--color-paper); }
.chip.is-changed { background: var(--color-accent-2); color: var(--color-ink); }
.table--return th[scope="row"] { white-space: normal; min-width: 16rem; }
.onrequest summary { display: flex; align-items: center; min-height: 40px; font-weight: 600; cursor: pointer; }
.onrequest summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
.return-card__avail { display: grid; gap: var(--space-xs); max-width: 36rem; }
.reason { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); font: inherit; resize: vertical; outline: 2px solid transparent; outline-offset: -1px; }
.reason:focus-visible { outline-color: var(--color-focus); }
.reason:disabled { opacity: 0.55; cursor: not-allowed; }

.tag--check { background: color-mix(in srgb, var(--color-accent-2) 45%, var(--color-paper-3)); }
.table td.is-over { color: var(--color-error); font-weight: 600; }
.table td.is-under { color: var(--color-error); font-weight: 600; }
.nightly-editor { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper-3); }
.nightly-editor h3 { font-size: var(--text-lg); }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-md); }
.check-card { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.check-card h3 { font-size: var(--text-lg); }
.check-card ul { margin: 0; padding-left: var(--space-md); }
.check-card progress { width: 100%; height: 10px; accent-color: var(--color-accent); }
.meter--watch strong, .meter--high strong { color: var(--color-error); }

.property-form { display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.property-form + .property-form { margin-top: var(--space-md); }
.property-form h3 { font-size: var(--text-title); }
.select--field { width: 100%; border-radius: var(--radius-input); }
.ranges { display: grid; gap: var(--space-xs); }
.range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-xs); align-items: center; }
.range input { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-field-edge); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); font: inherit; outline: 2px solid transparent; outline-offset: -1px; }
.range input:focus-visible { outline-color: var(--color-focus); }
.range input:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 40rem) { .range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
label.tool { cursor: pointer; }
label.tool:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.receipt { display: grid; gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper-3); }
.receipt__tools p { color: var(--color-ink-2); }
.receipt__paper { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); max-width: 44rem; }
.receipt__paper h2 { font-size: var(--text-title); margin: var(--space-lg) 0 var(--space-md); }
.receipt__biz { font-weight: 800; font-size: var(--text-lg); }
.receipt__addr { color: var(--color-ink-2); }
.receipt__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-lg); margin: 0 0 var(--space-md); }
.receipt__facts div { display: contents; }
.receipt__facts dt { color: var(--color-muted); }
.receipt__facts dd { margin: 0; font-weight: 600; }
.receipt__lines { width: 100%; border-collapse: collapse; }
.receipt__lines th, .receipt__lines td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; }
.receipt__lines td { text-align: right; }
.receipt__lines .is-total th, .receipt__lines .is-total td { font-weight: 800; border-bottom: 0; }
.receipt__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
@media print {
  body.printing-receipt > *:not(main), body.printing-receipt .dash > .container > *:not(.receipt), body.printing-receipt .receipt__tools { display: none !important; }
  body.printing-receipt .receipt { display: block !important; border: 0; padding: 0; }
  body.printing-receipt .receipt__paper { border: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }

/* plan type cells on the dark offer */
.offer__types { margin: 0; padding: 0; border: 0; }
.offer__types legend { margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-paper-2); }
.offer__type-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.offer__type-cells input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.offer__type-cells label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-ink-rule); border-radius: var(--radius-input); font-weight: 600; font-size: var(--text-sm); cursor: pointer; text-align: center; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.offer__type-cells label:hover { border-color: var(--color-paper-2); }
.offer__type-cells input:checked + label { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-paper-3); }
.offer__type-cells input:focus-visible + label { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.offer__qty { display: grid; gap: var(--space-2xs); }
.offer__qty label { font-size: var(--text-sm); color: var(--color-paper-2); }
.offer__qty input { width: 8rem; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-ink-2); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); outline: 2px solid transparent; }
.offer__qty input:focus-visible { outline-color: var(--color-accent-2); }
@media (prefers-reduced-motion: reduce) { .offer__type-cells label { transition: none; } }

.account__section { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.account__section h2 { font-size: var(--text-title); }
.account__inline { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: end; }
.account__inline label { flex-basis: 100%; font-size: var(--text-sm); font-weight: 600; }
.account__inline input { flex: 1 1 16rem; min-height: var(--control-h); padding: 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); font: inherit; outline: 2px solid transparent; outline-offset: -1px; }
.account__inline input:focus-visible { outline-color: var(--color-focus); }
.account__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.account__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); overflow-wrap: anywhere; }
.account__prefs { display: grid; gap: var(--space-2xs); }

/* price helper, Wales steps, embed */
.tool-page__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.tool-page h1 { margin-bottom: var(--space-md); }
.tool-page .lead { margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.tool-result { padding: var(--space-lg); box-shadow: var(--shadow-card); }
.tool-result .working thead th { font-weight: 600; color: var(--color-rule); text-align: right; padding: var(--space-xs) 0; }
.tool-result .working thead th:first-child { text-align: left; }
@media (max-width: 60rem) { .tool-page__inner { grid-template-columns: minmax(0, 1fr); } }
.steps-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-md); counter-reset: s; }
.steps-list li { counter-increment: s; display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.steps-list h3::before { content: counter(s) ". "; color: var(--color-muted); }
.steps-list p { color: var(--color-ink-2); }
.snippet { margin: var(--space-md) 0 0; padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-ink); color: var(--color-paper); overflow-x: auto; font-size: var(--text-sm); }
.embed { padding: var(--space-md); }
.embed__credit { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

.offer__plans input:focus-visible + label { outline-color: var(--color-accent-2); }
.source-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- plans: level picker and comparison ---------- */
.offer__agency { font-size: var(--text-sm); color: var(--color-paper-2); }
.plans__wrap { position: relative; overflow-x: auto; border-radius: var(--radius-card, 16px); }
.plans__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-sm); }
.plans__table th, .plans__table td { padding: var(--space-sm) var(--space-sm); border-top: 1px solid var(--color-rule); vertical-align: top; }
.plans__table thead th { border-top: 0; font-weight: 700; font-size: var(--text-md); text-align: center; }
.plans__table tbody th { text-align: left; font-weight: 600; }
.plans__table td { text-align: center; }
.plans__note { display: block; font-weight: 400; color: var(--color-ink-3, inherit); opacity: 0.8; margin-top: var(--space-2xs); }
.plans__from { display: block; font-weight: 400; font-size: var(--text-sm); }
.plans__table .is-pick { background: var(--color-paper-2); }
.plans__table thead .is-pick { border-radius: 12px 12px 0 0; }
.plans__yes { font-weight: 800; color: var(--color-accent); }
.plans__no { opacity: 0.5; }
.plans__no::before { content: ""; display: inline-block; width: 12px; vertical-align: middle; border-top: 1.5px solid var(--color-ink); }
.plans__foot { margin-top: var(--space-md); font-size: var(--text-sm); max-width: 60ch; }

/* ---------- dashboard: plan levels, to do, saved figures ---------- */
.dash__upgrade { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.dash__stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); border-radius: var(--radius-input); background: color-mix(in srgb, var(--color-accent-2) 25%, var(--color-paper-3)); font-size: var(--text-sm); }
.check-card--locked { border-style: dashed; }
.todo__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.todo__item { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.todo__item--act .todo__flag { background: var(--color-accent); color: var(--color-paper); }
.todo__item--check .todo__flag { background: var(--color-accent-2); color: var(--color-ink); }
.todo__title { max-width: 70ch; }
.todo__title { font-weight: 600; }
.todo__flag { display: inline-block; padding: 0 var(--space-xs); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; background: var(--color-paper-2); }
.todo__detail { font-size: var(--text-sm); max-width: 70ch; }
.todo__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.todo__clear { font-weight: 600; }

/* ---------- free booking check ---------- */
.check__result { display: grid; gap: var(--space-md); align-content: start; }
.check__result:focus { outline: none; }
.check__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check__result .check__h { font-size: var(--text-lg); margin: 0; }
.check__result .stat { background: var(--color-ink-2); border-color: var(--color-ink-rule); box-shadow: none; }
.check__result .stat dt { color: var(--color-paper-2); }
.check__result .stat dd { color: var(--color-paper); }
.check__result .stat--due dd { color: var(--color-accent-2); }
.check__found { margin: 0; padding-left: var(--space-md); display: grid; gap: var(--space-2xs); }
.check__span { font-size: var(--text-sm); }
.check__next { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-ink-rule); }
.signup__try { margin-top: var(--space-sm); }

/* ---------- the bookings ledger: filter bar, category chips, sortable sticky table ----------
 * Hick: categories answer the host's own questions, each with its count before it is chosen.
 * Jakob: column heads sort, as in a spreadsheet; filters sit on the screen, not in a menu.
 * Miller + common region: search and filters in one bar, the result summary right under it.
 * Tesler: the totals follow the filter, so nobody adds up a column by hand. */
.ledger-bar { display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.ledger-bar__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ledger-bar .search { flex: 1 1 16rem; max-width: none; }
.ledger-bar__property { flex: 0 1 16rem; }
.seg--small { margin: 0; padding: 0; border: 0; }
.seg--small .seg__cells { grid-auto-columns: auto; }
.seg--small label { min-height: 36px; padding: 0 var(--space-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fchip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm) 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.fchip:hover { border-color: var(--color-ink); }
.fchip__count { min-width: 1.75rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); text-align: center; font-variant-numeric: tabular-nums; }
.fchip--check .fchip__count { background: color-mix(in srgb, var(--color-accent-2) 45%, var(--color-paper-3)); }
.chips input:checked + .fchip { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chips input:checked + .fchip .fchip__count { background: var(--color-ink-2); color: var(--color-paper); }
.chips input:focus-visible + .fchip { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chips input:disabled + .fchip { opacity: 0.55; cursor: not-allowed; }
.ledger-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.ledger-sum__text { font-size: var(--text-sm); }
.ledger-sum__text strong { font-size: var(--text-md); }
.ledger-sum__tools { margin-left: auto; }
.ledger { overflow: visible; }
.ledger .table thead th { position: sticky; top: var(--mast-h); z-index: 1; }
.ledger .table td, .ledger .table tbody th { vertical-align: middle; }
.ledger[data-density="compact"] .table td, .ledger[data-density="compact"] .table tbody th { padding-block: var(--space-2xs); }
.ledger[data-density="compact"] .tool--small { min-height: 28px; }
.ledger .table td.num, .ledger .table th.num { font-variant-numeric: tabular-nums; }
.ledger .table td.is-off { color: var(--color-error); font-weight: 600; }
.ledger .table tr.is-muted > * { color: var(--color-muted); }
.ledger .tag--zero { background: var(--color-paper-2); }
.ledger .tag--check { background: color-mix(in srgb, var(--color-accent-2) 45%, var(--color-paper-3)); }
.sort { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 6px; }
.sort:hover { color: var(--color-ink); }
.sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sort::after { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.25; }
th[aria-sort="ascending"] .sort::after { border-top: 0; border-bottom: 5px solid currentColor; opacity: 1; }
th[aria-sort="descending"] .sort::after { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--color-ink); }
.ledger__group th { padding-top: var(--space-md); background: var(--color-paper-2); }
.ledger__group-name { font-weight: 800; font-size: var(--text-md); margin-right: var(--space-sm); }
.ledger__group-sum { font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2); }
.rowmenu { position: relative; display: inline-block; }
.rowmenu summary { list-style: none; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu__list { position: absolute; right: 0; top: calc(100% + var(--space-2xs)); z-index: 2; display: grid; min-width: 9rem; padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.rowmenu__item { min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: 8px; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.rowmenu__item:hover { background: var(--color-paper-2); }
.rowmenu__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rowmenu__item--danger { color: var(--color-error); }
.rowmenu__item[data-armed] { background: var(--color-error); color: var(--color-paper-3); }
.ledger-more { display: flex; justify-content: center; margin-top: var(--space-md); }
.ledger-danger { margin-top: var(--space-xl); }
.ledger td.actions { text-align: right; white-space: nowrap; }
.ledger td.actions > * + * { margin-left: var(--space-2xs); }
.ledger .table thead th:first-child { border-top-left-radius: var(--radius-inner); }
.ledger .table thead th:last-child { border-top-right-radius: var(--radius-inner); }
@media (prefers-reduced-motion: reduce) { .fchip, .rowmenu__item { transition: none; } }
/* Phone: each booking becomes a labelled block; the reference and its actions stay together. */
@media (max-width: 60rem) {
  .ledger .table thead { display: none; }
  .ledger .table, .ledger .table tbody { display: block; }
  .ledger .table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .ledger .table tr > * { padding: 0; border: 0; white-space: normal; text-align: left; }
  .ledger .table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
  .ledger .table tbody th[scope="row"] { grid-column: 1 / -1; font-size: var(--text-md); }
  .ledger .table td.actions { grid-column: 1 / -1; display: flex; gap: var(--space-2xs); justify-content: flex-start; }
  .ledger td.actions > * + * { margin-left: 0; }
  .ledger .table tr.ledger__group { display: block; }
  .ledger-sum__tools { margin-left: 0; }
  .seg--small { flex: 1 1 100%; }
}

/* ---------- pricing: show the product, name the pick in words, reassure at the button ----------
 * Imagination gap: a real capture of the To do list beside the price, not a description of it.
 * Von Restorff by a word ("Recommended"), not by a different colour.
 * Loss aversion, answered where it happens: cancel any time, records stay readable. */
.signup__shot { margin: var(--space-lg) 0 var(--space-md); }
.signup__shot img { display: block; width: 100%; max-width: 34rem; height: auto; border-radius: var(--radius-inner); box-shadow: var(--shadow-tile); }
.signup__shot figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.offer__pick { gap: var(--space-xs); }
.offer__rec { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-2); }
.offer__levels input:checked + label .offer__rec { color: var(--color-ink-2); }
.offer__hint { min-height: 1lh; font-size: var(--text-sm); color: var(--color-paper-2); }
.offer__month { min-height: 1lh; font-size: var(--text-sm); color: var(--color-paper-2); }
.offer__sure { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-paper-2); }
.offer__sure li { display: flex; gap: var(--space-xs); align-items: baseline; }
.offer__sure li::before { content: ""; flex: none; width: 0.55em; height: 0.3em; border-left: 2px solid var(--color-accent-2); border-bottom: 2px solid var(--color-accent-2); transform: translateY(-0.2em) rotate(-45deg); }
.plans__rec { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); }
.plans__table .is-pick { background: none; }
.plans__table tfoot td { padding-top: var(--space-md); border-top: 0; }
.plans__table tfoot .btn { width: 100%; max-width: 11rem; }
.trust { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.trust li { display: grid; align-content: start; gap: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.trust strong { font-size: var(--text-md); }
@media (max-width: 60rem) { .trust { grid-template-columns: minmax(0, 1fr); } }
/* The dashboard grid sizes its column to the screen, never to its widest table (Hallmark 50). */
.app__main, .dash__state, .panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.app__main > *, .dash__state > *, .panel > * { min-width: 0; }

/* ---------- figures: every digit the same width, everywhere ----------
 * Manrope's tabular figures ("tnum"), so amounts, dates and counts line up in columns and
 * don't jitter as they change. The body sets them, but the `font` shorthand on form controls
 * resets them, so they are set again here, after every control's own rule. */
:root :is(input, select, option, textarea, button) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1; }

/* ---------- adding by hand: a booking, a property ---------- */
.add-form { display: grid; gap: var(--space-md); }
.add-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-sm) var(--space-md); }
.add-form__grid .field--wide { grid-column: 1 / -1; max-width: 32rem; }
.add-form__checks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.add-form__preview { padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.add-form__sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-sm) var(--space-lg); margin: 0; }
.add-form__sums dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.add-form__sums dd { margin: 0; font-weight: 800; font-size: var(--text-lg); }
.add-prop { margin-bottom: var(--space-lg); }
.add-prop summary { list-style: none; cursor: pointer; width: max-content; }
.add-prop summary::-webkit-details-marker { display: none; }
.add-prop__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-sm) var(--space-md); align-items: end; margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.add-prop__form .dash__actions, .add-prop__form .tools__status { grid-column: 1 / -1; }

/* ---------- clients (accountant and agent view) ---------- */
#portfolio .stats { margin-bottom: var(--space-lg); }
.pf-sum { margin: var(--space-md) 0; }
.pf-you { font-weight: 400; color: var(--color-ink-2); }
.ledger .tag--late { background: var(--color-error); color: var(--color-paper-3); }
.ledger .tag--ok { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-paper-3)); }
#pf-table tbody th[scope="row"] { white-space: normal; overflow-wrap: anywhere; min-width: 12rem; }
#pf-table td[data-label="Return"], #pf-table td[data-label="Submit by"] { white-space: normal; min-width: 8rem; }

/* ---------- booking presets ---------- */
.presets { margin: var(--space-md) 0; }
.presets__label { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.presets__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.presets__list li { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.preset { display: grid; gap: var(--space-3xs); min-height: 44px; padding: var(--space-2xs) var(--space-sm); border: 0; border-radius: calc(var(--radius-inner) - 4px); background: var(--color-paper-3); color: var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.preset:hover { background: var(--color-paper); }
.preset:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.preset__name { font-weight: 700; font-size: var(--text-sm); }
.preset__meta { font-size: var(--text-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.preset__remove { min-height: 32px; border-color: transparent; background: transparent; }
.preset-save { margin-top: var(--space-md); }
.preset-save summary { list-style: none; width: max-content; cursor: pointer; }
.preset-save summary::-webkit-details-marker { display: none; }
.preset-save__form { display: grid; grid-template-columns: minmax(0, 20rem) auto; gap: var(--space-xs) var(--space-sm); align-items: end; margin-top: var(--space-sm); }
.preset-save__form .step__note, .preset-save__form .tools__status { grid-column: 1 / -1; }
@media (max-width: 40rem) { .preset-save__form { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .preset { transition: none; } }

/* ---------- dashboard app shell: sidebar, city hero, KPI cards, overview ----------
 * Jakob: a sidebar of sections, as in the admin tools hosts already use (Airbnb, Xero, Stripe).
 * Von Restorff: the one dark card is what to pay the council; amber marks only what needs you.
 * Common region: each overview card is one question (what's due, what's wrong, which property).
 * The hero photo is a real, credited photograph of the account's own council area. */
.dash--app { padding-block: 0 var(--section-gap-s); }
.app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 104rem; margin-inline: auto; }
.app__side { display: none; }
.app__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-md) var(--gutter) 0; min-width: 0; }
@media (min-width: 60rem) {
  .app { grid-template-columns: 16rem minmax(0, 1fr); }
  .app__side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); position: sticky; top: var(--mast-h); align-self: start; height: calc(100dvh - var(--mast-h)); padding: var(--space-lg) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
  .app__main { padding: var(--space-lg) var(--space-xl) 0; }
  .dash--app .tabs { display: none; }
}
.side { display: grid; gap: var(--space-3xs); }
.side__link { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-input); color: var(--color-paper-2); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.side__link:hover { background: var(--color-ink-2); color: var(--color-paper); }
.side__link:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
.side__link[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.side__count { margin-left: auto; min-width: 1.6rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-ink); font-size: var(--text-xs); text-align: center; }
.side__plan { display: grid; gap: var(--space-2xs); padding: var(--space-md); border: 1px solid var(--color-ink-2); border-radius: var(--radius-inner); background: var(--color-ink-2); }
.side__plan-name { font-weight: 700; }
.side__plan-text { font-size: var(--text-sm); color: var(--color-paper-2); }
.side__plan-link { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); }
.side__plan-link:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .side__link { transition: none; } }

.hero-dash { position: relative; display: grid; align-content: end; min-height: 13rem; padding: var(--space-xl) var(--space-lg) var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); overflow: hidden; isolation: isolate; }
.hero-dash__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-dash.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklch, var(--color-ink) 88%, transparent) 0%, color-mix(in oklch, var(--color-ink) 55%, transparent) 55%, color-mix(in oklch, var(--color-ink) 20%, transparent) 100%); }
.hero-dash__inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); }
.hero-dash h1 { font-size: var(--text-section); color: var(--color-paper); overflow-wrap: break-word; min-width: 0; }
.hero-dash .dash__sub { color: var(--color-paper-2); max-width: 40ch; }
.hero-dash .select { background: var(--color-paper-3); }
.hero-dash .btn--line { border-color: var(--color-paper-3); color: var(--color-paper); background: color-mix(in oklch, var(--color-ink) 50%, transparent); }
.hero-dash .btn--line:hover { background: var(--color-paper-3); color: var(--color-ink); }
.hero-dash__credit { position: absolute; right: var(--space-sm); bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-paper-2); }
.hero-dash__credit a { color: inherit; }
.dash__credits { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-sm); margin: 0; }
.kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon dt" "icon dd" "icon note"; column-gap: var(--space-md); align-items: center; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.kpi__icon { grid-area: icon; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 14%, var(--color-paper-3)); color: var(--color-accent); align-self: start; }
.kpi__icon--blue { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-paper-3)); color: var(--color-accent); }
.kpi__icon--green { background: color-mix(in srgb, var(--color-success) 16%, var(--color-paper-3)); color: var(--color-success); }
.kpi__icon--amber { background: color-mix(in srgb, var(--color-accent-2) 35%, var(--color-paper-3)); color: var(--color-ink); }
.kpi .kpi__dt { grid-area: dt; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.kpi .kpi__dd { grid-area: dd; margin: var(--space-3xs) 0 0; font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.03em; white-space: nowrap; }
.kpi__note { grid-area: note; margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); min-height: 1lh; }
.kpi--due { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.kpi--due .kpi__dt, .kpi--due .kpi__note { color: var(--color-paper-2); }
.kpi--due .kpi__dd { color: var(--color-accent-2); }
.kpi--due .kpi__icon { background: var(--color-ink-2); color: var(--color-accent-2); }
.kpi--attn { background: color-mix(in srgb, var(--color-accent-2) 12%, var(--color-paper-3)); }
.kpi--attn.is-clear { background: var(--color-paper-3); }
.kpi__note a { font-weight: 600; color: inherit; }

.ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); }
.card { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); min-width: 0; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.card__head h3 { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); }
.card__head h3 .icon { color: inherit; }
.card__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.ov__trend { grid-column: span 8; }
.ov__action { grid-column: span 4; }
.ov__props { grid-column: span 4; }
.ov__deadlines { grid-column: span 4; }
.ov__quick { grid-column: span 4; }
.ov__rules { grid-column: span 4; }
.ov__recent { grid-column: span 8; }
@media (max-width: 75rem) { .ov__trend, .ov__recent { grid-column: span 12; } .ov__action, .ov__props, .ov__deadlines, .ov__quick, .ov__rules { grid-column: span 6; } }
@media (max-width: 45rem) { .ov > * { grid-column: span 12 !important; } }
.ov__total { font-size: var(--text-sm); color: var(--color-ink-2); }
.ov__total strong { font-size: var(--text-lg); color: var(--color-ink); }

.chart { position: relative; }
.chart__svg { display: block; width: 100%; height: 14rem; overflow: visible; }
.chart__grid { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.chart__base { stroke: var(--color-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__tick { fill: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart__bar { fill: var(--color-accent); }
.chart__bar.is-now { fill: color-mix(in srgb, var(--color-accent) 55%, var(--color-paper-3)); }
.chart__hit { fill: transparent; cursor: default; outline: none; }
.chart__hit:hover, .chart__hit:focus-visible { fill: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.chart__tip { position: absolute; z-index: 2; display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-3); box-shadow: var(--shadow-soft); font-size: var(--text-sm); transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; white-space: nowrap; }
.chart__tip span { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.chart__table summary { list-style: none; width: max-content; cursor: pointer; }
.chart__table summary::-webkit-details-marker { display: none; }
.chart__table table { margin-top: var(--space-sm); }

.ov__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.ov__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-inner); color: inherit; text-decoration: none; }
.ov__item--link:hover { background: var(--color-paper); }
.ov__item--link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ov__title { font-weight: 600; font-size: var(--text-sm); }
.ov__meta { font-size: var(--text-xs); color: var(--color-muted); }
.ov__dot { width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--color-accent-2); }
.ov__dot--act { background: var(--color-error); }
.ov__dot--ok { background: var(--color-success); }
.ov__cal { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-input); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-paper-3)); color: var(--color-accent); line-height: 1; }
.ov__cal b { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.ov__cal small { font-size: var(--text-xs); }
.chipday { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chipday.is-soon { background: color-mix(in srgb, var(--color-error) 14%, var(--color-paper-3)); color: var(--color-error); }
.ov__props-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); }
.ov__prop { display: grid; gap: var(--space-2xs); }
.ov__prop-head { display: flex; justify-content: space-between; gap: var(--space-sm); }
.ov__prop-levy { font-weight: 800; }
.ov__bar { height: 6px; border-radius: 999px; background: var(--color-paper-2); overflow: hidden; }
.ov__bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
.quick { display: grid; gap: var(--space-xs); }
.quick__item { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.quick__item .icon { flex: none; color: var(--color-accent); }
.quick__item small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.quick__item:hover { border-color: var(--color-ink); }
.quick__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .quick__item { transition: none; } }
.ov__rules-img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-inner); }
.ov__rules-facts { display: grid; gap: var(--space-2xs); margin: 0; }
.ov__rules-facts div { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.ov__rules-facts dt { color: var(--color-muted); }
.ov__rules-facts dd { margin: 0; font-weight: 600; text-align: right; }
.linkish { padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.linkish:hover { text-decoration-thickness: 2px; }
.linkish:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ledger .tag--ok { background: color-mix(in srgb, var(--color-success) 16%, var(--color-paper-3)); }

.drawer { position: fixed; top: var(--mast-h); right: 0; bottom: 0; z-index: var(--z-sticky); width: min(100%, 26rem); display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid var(--color-rule); background: var(--color-paper-3); box-shadow: var(--shadow-card); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.drawer__head h2 { font-size: var(--text-lg); margin: 0; }
.drawer__body { overflow-y: auto; padding: var(--space-md) var(--space-lg) var(--space-xl); display: grid; align-content: start; gap: var(--space-sm); }
.drawer__body h3 { margin-top: var(--space-sm); font-size: var(--text-md); }
.drawer__facts { display: grid; gap: var(--space-2xs); margin: 0; }
.drawer__facts div { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.drawer__facts dt { color: var(--color-muted); }
.drawer__facts dd { margin: 0; font-weight: 600; text-align: right; }
.drawer__actions { flex-wrap: wrap; }
/* Without a photograph, the council's own line mark, large and quiet, on the right of the hero. */
.hero-dash__mark { position: absolute; right: var(--space-xl); bottom: calc(-1 * var(--space-lg)); z-index: -1; color: var(--color-ink-2); }
.hero-dash__mark span { display: none; }
.hero-dash__mark .icon { width: 15rem; height: 15rem; stroke-width: 1; }
.hero-dash[data-council="edinburgh"] [data-mark="edinburgh"], .hero-dash[data-council="glasgow"] [data-mark="glasgow"], .hero-dash[data-council="aberdeen"] [data-mark="aberdeen"], .hero-dash[data-council="stirling"] [data-mark="stirling"], .hero-dash[data-council="west-dunbartonshire"] [data-mark="west-dunbartonshire"] { display: block; }
.hero-dash.has-photo .hero-dash__mark { display: none; }
@media (max-width: 45rem) { .hero-dash__mark { right: calc(-1 * var(--space-xl)); opacity: 0.6; } }
/* The bookings table beside the sidebar: tighter cells, and a sideways scroll inside its box on
 * narrower screens rather than columns cut off at the edge (the sticky head is kept on wide ones). */
@media (min-width: 60rem) { .ledger .table th, .ledger .table td { padding-inline: var(--space-sm); } }
@media (min-width: 60rem) and (max-width: 100rem) {
  .ledger { overflow-x: auto; }
  .ledger .table thead th { position: static; }
}

/* ---------- clients (accountant view): quiet, dense, keyboard-first ----------
 * No photograph and no big cards: one strip of figures, a compact list, and the selected client's
 * detail beside it, so a list of thirty clients can be worked through without leaving the page. */
.pf { padding-block: var(--space-lg) var(--section-gap-s); }
.pf__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.pf__bar h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.pf__sub { font-size: var(--text-sm); color: var(--color-ink-2); }
.pf__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pf__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.pf__metric { padding: var(--space-sm) var(--space-md); border-left: 1px solid var(--color-rule); }
.pf__metric:first-child { border-left: 0; }
.pf__metric dt { font-size: var(--text-xs); color: var(--color-muted); }
.pf__metric dd { margin: 0; font-weight: 800; font-size: var(--text-lg); }
.pf__metric--late dd { color: var(--color-error); }
.pf__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.pf__tools .search { flex: 0 1 20rem; }
.pf__sum { font-size: var(--text-sm); }
.pf__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: start; }
@media (min-width: 75rem) { .pf__split { grid-template-columns: minmax(0, 1fr) 24rem; } .pf__detail { position: sticky; top: calc(var(--mast-h) + var(--space-md)); } }
.pf__table .pf__row { cursor: pointer; }
.pf__table .pf__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pf__table .pf__row[aria-selected="true"] > * { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-paper-3)); }
.pf__table .pf__row[aria-selected="true"] > :first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.pf__client { font-weight: 700; overflow-wrap: anywhere; }
.pf__plan { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.pf__keys { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.pf__detail { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.pf__detail h3 { font-size: var(--text-md); margin-top: var(--space-xs); }
.pf__detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.pf__detail-head h2 { font-size: var(--text-lg); overflow-wrap: anywhere; min-width: 0; }
.pf__hint { font-size: var(--text-sm); color: var(--color-muted); }
.pf__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; }
.pf__figs div { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper); }
.pf__figs dt { font-size: var(--text-xs); color: var(--color-muted); }
.pf__figs dd { margin: 0; font-weight: 800; }
.pf__returns { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.pf__returns li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.pf__detail-actions { flex-wrap: wrap; }
#pf-table tbody th[scope="row"] { white-space: normal; min-width: 12rem; }
.pf .dash__state[data-show="full"] { display: grid; gap: var(--space-md); }

/* ---------- pricing page ----------
 * The common shape of software pricing pages, in this site's own system: a switch for who it's
 * for, the billing period, cards side by side whose rows line up (subgrid), one action each, then
 * what's included. The pick is named in a word and its button, never by a different colour. */
.pricing__top { padding-block: var(--section-gap-s) var(--space-lg); text-align: center; }
.pricing__top .lead { margin-inline: auto; max-width: 46ch; }
.pricing__switch { display: inline-flex; gap: var(--space-3xs); margin-top: var(--space-xl); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.pricing__tab { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pricing__tab[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--shadow-soft); }
.pricing__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pricing__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: var(--space-md); margin-top: var(--space-lg); }
.pricing__unit, .pricing__qty { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); text-align: left; }
.pricing__qty input { width: 7rem; min-height: var(--control-h); padding: 0 var(--space-sm); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); outline: 2px solid transparent; }
.pricing__qty input:focus-visible { outline-color: var(--color-focus); }
.pricing__period { margin: 0; }
.pricing__period label { min-height: var(--control-h); }
.pricing__save { margin-left: var(--space-2xs); font-weight: 700; color: var(--color-success); }
.pricing__period input:checked + label .pricing__save { color: var(--color-accent-2); }
.pricing__plans { padding-bottom: var(--section-gap-s); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); grid-template-rows: auto auto auto 1fr; gap: 0 var(--space-md); }
.plans-grid--two { max-width: 52rem; margin-inline: auto; }
.plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); margin-bottom: var(--space-md); }
.plan--pick { border-color: var(--color-ink); }
.plan__head { display: grid; gap: var(--space-2xs); align-content: start; }
.plan__icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-xs); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); }
.plan__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.plan__name { font-size: var(--text-title); }
.plan__pick { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; }
.plan__for { color: var(--color-ink-2); }
.plan__money { display: grid; gap: var(--space-3xs); align-content: start; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.plan__figure { font-weight: 800; font-size: var(--text-display); line-height: 1; letter-spacing: -0.045em; }
.plan__per { font-size: var(--text-sm); color: var(--color-ink-2); }
.plan__billed { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.plan__action { display: grid; gap: var(--space-2xs); align-content: start; margin: 0; }
.plan__action .btn { width: 100%; }
.plan__total { font-size: var(--text-sm); color: var(--color-ink-2); min-height: 1lh; text-align: center; }
.plan__inc { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.plan__lead { font-weight: 700; font-size: var(--text-sm); }
.plan__list, .pricing__sure { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.plan__list li, .pricing__sure li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: start; font-size: var(--text-sm); }
.plan__list .icon, .pricing__sure .icon { color: var(--color-success); margin-top: 1px; }
.pricing__sure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-lg); color: var(--color-ink-2); }
.plans__more { margin-top: var(--space-md); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pricing__tab { transition: none; } }
.pricing__top h1 { margin-inline: auto; margin-bottom: var(--space-sm); }

/* ---------- dashboard: getting started, account in the sidebar ---------- */
.setup { display: grid; gap: var(--space-md); }
.setup__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.setup__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-soft); }
.setup__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--color-ink); color: var(--color-paper); font-weight: 800; }
.setup__step.is-done .setup__n { background: var(--color-success); color: var(--color-accent-ink); font-size: 0; }
.setup__step.is-done .setup__n::after { content: ""; width: 0.75rem; height: 0.4rem; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.setup__step.is-done h3::after { content: " Done"; font-size: var(--text-sm); font-weight: 600; color: var(--color-success); }
.setup__body { display: grid; gap: var(--space-xs); align-content: start; }
.setup__body h3 { font-size: var(--text-lg); }
.setup__body p { color: var(--color-ink-2); max-width: 60ch; }
.side__who { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; padding-bottom: var(--space-xs); margin-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-ink); }

/* ---------- your plan (account page): cancel in two clicks ---------- */
.plan-box__now { font-weight: 700; font-size: var(--text-lead); }
.plan-box__terms { color: var(--color-ink-2); }
.plan-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin: 0; }
.plan-box__actions form { margin: 0; }
.plan-box__confirm { display: grid; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); }
.plan-box__q { font-weight: 800; }

/* ---------- dashboard, second pass: one navigation, a compact header, one To do count ---------- */
/* The app bar: logo, search, account. The sidebar is the only menu. */
body:has(.mast--app) { --mast-h: 60px; }
.mast--app .mast__inner { max-width: none; padding-inline: var(--space-lg); }
.appsearch { position: relative; flex: 1 1 auto; max-width: 30rem; margin-left: var(--space-xl); }
.appsearch .icon { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.appsearch input { width: 100%; min-height: 40px; padding: 0 var(--space-md) 0 var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); outline: 2px solid transparent; outline-offset: 1px; }
.appsearch input:focus-visible { outline-color: var(--color-focus); }
body:has(.is-empty) .appsearch { visibility: hidden; }
@media (max-width: 45rem) { .appsearch { display: none; } }

/* The header says where and when, in one band. */
.hero-dash { min-height: 0; padding: var(--space-lg); }
.hero-dash h1 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.hero-dash .dash__sub { margin-top: var(--space-3xs); font-weight: 600; }
.hero-dash__inner { align-items: center; }
.hero-dash__mark { bottom: auto; top: 50%; transform: translateY(-50%); }
.hero-dash__mark .icon { width: 7rem; height: 7rem; }
.is-empty #dash-add-open, .is-empty #dash-upload-open { display: none; }

/* Figures only on the overview; other sections start with their own content. */
#dashboard[data-tab]:not([data-tab="tab-overview"]) .kpis { display: none; }
@media (min-width: 75rem) { .kpis { grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); } }
.kpi--due.is-soon { box-shadow: 0 0 0 3px var(--color-accent-2); }
.kpi--due.is-soon .kpi__note { color: var(--color-accent-2); font-weight: 600; }

/* To do, grouped */
.ov__count { margin-left: auto; align-self: center; min-width: 2rem; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-weight: 700; font-size: var(--text-sm); text-align: center; }

/* Chart: the chosen quarter strong, the months around it quiet */
.chart__bar.is-out { fill: color-mix(in srgb, var(--color-accent) 28%, var(--color-paper-3)); }
.chart__bar.is-now { fill: var(--color-accent); stroke: var(--color-paper-3); stroke-width: 2; stroke-dasharray: 4 3; }
.chart__bar.is-out.is-now { fill: color-mix(in srgb, var(--color-accent) 28%, var(--color-paper-3)); }

/* Properties: the bar says what it measures */
.ov__share { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); }
.ov__share-text { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }

/* Drawer: the reason for a tag, and Delete kept apart from everyday actions */
.drawer__why { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.drawer__danger { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }

/* Sidebar: a long address shortened, not wrapped mid-word */
.side__who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }

/* Status messages: a short note that fades, wherever you are on the page */
#dash-status { position: fixed; left: 50%; bottom: var(--space-lg); z-index: 30; transform: translateX(-50%); max-width: min(36rem, calc(100vw - 2 * var(--space-md))); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-weight: 600; box-shadow: var(--shadow-card); }
#dash-status:empty { display: none; }

/* New account: steps on the left, what you'll get on the right; the box takes a dropped file */
.setup { position: relative; }
@media (min-width: 64rem) { .setup { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: var(--space-xl); } }
.setup__main { display: grid; gap: var(--space-md); }
.setup__preview { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.setup__preview h3 { font-size: var(--text-md); }
.setup__see { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); }
.setup__see li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.setup__see .icon { color: var(--color-accent); margin-top: var(--space-3xs); }
.setup__see strong { display: block; color: var(--color-ink); }
.setup__drop { position: absolute; inset: 0; display: none; place-items: center; border: 2px dashed var(--color-accent); border-radius: inherit; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-paper-3)); font-weight: 800; font-size: var(--text-lg); color: var(--color-accent); }
.setup.is-drag .setup__drop { display: grid; }

/* ---------- pricing, second pass ---------- */
.pricing__top h1 { max-width: none; text-align: center; }
.pricing__plans { padding-bottom: var(--space-2xl); }
.btn--small { min-height: 36px; padding: 0 var(--space-md); font-size: var(--text-xs); }

/* The share you keep, against the plan's cost */
.pricing__keep { padding-block: var(--space-xl); }
.keep { display: grid; gap: var(--space-lg); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
@media (min-width: 60rem) { .keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.keep__text h2 { font-size: var(--text-title); margin-bottom: var(--space-xs); }
.keep__text p { color: var(--color-ink-2); max-width: 52ch; }
.keep__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-md); align-items: end; }
.keep__field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.keep__field .select { width: 100%; }
.keep__out { grid-column: 1 / -1; padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.keep__out strong { font-weight: 800; }

/* The comparison table: grouped rows, and a header that stays while you scroll it */
.plans--pricing { padding-top: var(--space-xl); }
.plans__group th { padding-top: var(--space-lg); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--color-muted); text-align: left; border-top: 0; }
.plans__cta { display: block; margin-top: var(--space-sm); }
@media (min-width: 48rem) {
  .plans--pricing .plans__wrap { overflow: visible; }
  .plans--pricing .plans__table thead th { position: sticky; top: var(--mast-h); z-index: 2; background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }
}
.pricing__min { flex-basis: 100%; order: 9; margin: 0; font-size: var(--text-xs); color: var(--color-muted); min-height: 1lh; }

/* ---------- home: equal boxes, an empty result, why an account ---------- */
/* Every council card the same height, whether its name takes one line or two. */
.places { grid-auto-rows: 1fr; }
.compare__cells { grid-auto-rows: 1fr; }
.compare__cell { display: grid; grid-template-rows: minmax(2lh, auto) 1fr auto; align-items: start; }
.compare__name { align-self: start; line-height: 1.2; }
.compare__figure { align-self: end; }
.result__empty { margin-top: var(--space-md); color: var(--color-paper-2); max-width: 36ch; }

.why { padding-block: var(--section-gap-s); }
.why__head { display: grid; gap: var(--space-sm); max-width: 44rem; margin-bottom: var(--space-xl); }
.why__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.why__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); grid-auto-rows: 1fr; gap: var(--space-md); }
.why__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); }
.why__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-inner); background: var(--color-paper-2); color: var(--color-ink); }
.why__item h3 { font-size: var(--text-lg); }
.why__item p { color: var(--color-ink-2); font-size: var(--text-sm); }
.why__item .why__level { padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); font-weight: 700; color: var(--color-ink); }
.why__head h2, .why__head .lead { margin: 0; }
.result__figure--blank::after { content: ""; display: inline-block; width: 0.9em; margin-left: 0.08em; vertical-align: 0.32em; border-bottom: 0.12em solid currentColor; }

/* ---------- long email addresses: shortened with "…", never broken mid-word (full address on hover) ---------- */
#account-email, .pf__detail-head h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; max-width: 100%; }
.pf__detail-head { flex-wrap: nowrap; }
.pf__detail-head .tag { flex-shrink: 0; }

/* ---------- a cleaner, neutral page: near-white background, white cards, lighter lines ---------- */
:root {
  --color-paper: oklch(98.4% 0.002 250);
  --color-paper-2: oklch(95.6% 0.003 250);
  --color-paper-3: oklch(100% 0 0);
  --color-rule: oklch(89.5% 0.004 250);
}

/* ---------- the property in booking details: photos, listing link, address, map ---------- */
.pcard { display: grid; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.pcard--empty { justify-items: start; padding: var(--space-md); background: var(--color-paper-2); border-style: dashed; }
.pcard__main { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-input); background: var(--color-paper-2); }
.pcard__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xs); }
.pcard__thumb { padding: 0; border: 2px solid transparent; border-radius: var(--radius-input); background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; }
.pcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__thumb[aria-pressed="true"] { border-color: var(--color-ink); }
.pcard__thumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pcard__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-inline: var(--space-2xs); }
.pcard__name { font-size: var(--text-lg); }
.pcard__map { display: block; width: 100%; height: 13rem; border: 0; border-radius: var(--radius-input); background: var(--color-paper-2); }
.pcard__credit { font-size: var(--text-xs); color: var(--color-muted); padding-inline: var(--space-2xs); }
.pcard__credit a { color: inherit; }
.pphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-xs); }
.pphotos:empty { display: none; }
.pphoto { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-input); overflow: hidden; background: var(--color-paper-2); }
.pphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pphoto__remove { position: absolute; right: var(--space-2xs); bottom: var(--space-2xs); min-height: 32px; padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.pphoto__remove:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pf__detail, .pf__split > * { min-width: 0; } .pf__detail-head h2 { flex: 1 1 auto; min-width: 0; }
.pf__detail > * { min-width: 0; }

/* ---------- several stays at once (busy months) ---------- */
.stays__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.stays__table input { width: 100%; min-width: 6.5rem; min-height: 40px; padding: 0 var(--space-xs); border: 1px solid var(--color-field-edge); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); font: inherit; }
.stays__table input[type="number"] { min-width: 4.5rem; }
.stays__table .money input { padding-left: var(--space-lg); }
.stays__table tr.is-clash input[type="date"] { border-color: var(--color-error); }
.stays__summary { font-weight: 600; }
.stays__timeline { margin-block: var(--space-sm); }
.stays-line { position: relative; height: 40px; border-radius: var(--radius-input); background: repeating-linear-gradient(135deg, var(--color-paper-2) 0 6px, var(--color-paper-3) 6px 12px); border: 1px solid var(--color-rule); overflow: hidden; }
.stays-line__stay { position: absolute; top: 4px; bottom: 4px; display: grid; place-items: center; border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; box-shadow: 0 0 0 2px var(--color-paper-3); }
.stays-line__stay.is-clash { background: var(--color-error); }
.stays-line__ends { display: flex; justify-content: space-between; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- your price a night, by month ---------- */
.ov__prices { grid-column: 1 / -1; }
.ov__compare { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.chart__band { fill: var(--color-paper-2); }
.chart__median { stroke: var(--color-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__value { font-size: 12px; font-weight: 700; fill: var(--color-ink); }

/* ---------- price chart, second pass: your line over the market's band ---------- */
.chart__svg--line { height: auto; aspect-ratio: 640 / 240; }
.chart__band { fill: color-mix(in srgb, var(--color-ink) 7%, transparent); stroke: none; }
.chart__mid { fill: none; stroke: color-mix(in srgb, var(--color-ink) 35%, transparent); stroke-width: 1.5; }
.chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: var(--color-accent); stroke: var(--color-paper-3); stroke-width: 2; }
.chart__end { font-size: 12px; font-weight: 700; fill: var(--color-ink); }
.chart__end--muted { fill: var(--color-muted); font-weight: 600; }
.chart__guide { stroke: var(--color-rule); stroke-width: 1; }
.chart__hit--line:hover, .chart__hit--line:focus-visible { fill: transparent; }
.chart__hit--line:focus-visible { outline: none; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-sm); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.chart__key { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.chart__key--you { height: 2px; background: var(--color-accent); border-radius: 2px; }
.chart__key--band { background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
.chart__svg--line .chart__tick { font-size: 9px; }
.chart__svg--line .chart__end { font-size: 9px; }

/* ---------- home: design D (the owner's pick), in the site's tokens ---------- */
.mast--dark { background: var(--color-ink); border-bottom-color: var(--color-ink-2); color: var(--color-paper); }
.mast--dark .mast__nav a, .mast--dark .mast__name { color: var(--color-paper); }
.mast--dark .mast__nav a:hover { background: var(--color-ink-2); }
.mast--dark .mast__seal { background: var(--color-accent-2); color: var(--color-ink); }
.mast--dark .acct { background: transparent; border-color: var(--color-ink-rule); color: var(--color-paper); }
.mast--dark .acct:hover { background: var(--color-ink-2); }
.home-d { background: var(--color-paper); }
.dbtn--amber { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-ink); }
.dbtn--amber:hover { background: var(--color-paper-3); border-color: var(--color-paper-3); }
.dbtn--line { color: var(--color-paper); border-color: var(--color-ink-rule); }
.dbtn--line:hover { background: var(--color-paper-3); border-color: var(--color-paper-3); color: var(--color-ink); }
.dbtn--solid { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); width: 100%; min-height: 52px; font-size: var(--text-md); }
.dbtn--solid:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.dbtn--amber:focus-visible, .dbtn--line:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; }
.dbtn--solid:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* 1. the black hero */
.d-hero { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl) var(--space-3xl); }
.d-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.d-hero__over { font-weight: 700; color: var(--color-accent-2); }
.d-hero h1 { margin-top: var(--space-md); font-size: var(--text-display); line-height: 0.96; letter-spacing: -0.055em; color: var(--color-paper); max-width: none; overflow-wrap: break-word; min-width: 0; }
.d-hero h1 span { color: var(--color-accent-2); }
.d-hero__sub { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-paper-2); max-width: 40ch; }
.d-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.d-facts { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin: var(--space-xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink-rule); }
.d-facts dt { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }
.d-facts dd { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.d-hero .disclaimer { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-paper-2); }
.d-hero .disclaimer a { color: inherit; }
@media (max-width: 64rem) { .d-hero__grid { grid-template-columns: minmax(0, 1fr); } .d-hero h1 { font-size: var(--text-display-s); } }

/* The calculator, as a card: the form above, the dark result inside it. */
.calc--card { display: block; background: var(--color-paper-3); color: var(--color-ink); border-radius: 28px; padding: var(--space-lg); box-shadow: var(--shadow-lift); }
.calc--card .calc__form { padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; display: grid; gap: var(--space-md); }
.calc__card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.calc__card-title { font-size: var(--text-lg); letter-spacing: -0.02em; }
.calc__free { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-success) 14%, var(--color-paper-3)); color: var(--color-success); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.calc--card .group { padding: 0; border: 0; margin: 0; }
.places--chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-3xs); border-radius: var(--radius-input); background: var(--color-paper-2); }
.places--chips .place { display: inline-flex; min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: 10px; background: transparent; grid-template-columns: none; font-weight: 700; }
.places--chips .place__icon, .places--chips .place__meta { display: none; }
.places--chips input:checked + .place { background: var(--color-ink); color: var(--color-paper); }
.calc--card .calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
.calc--card .field__help:empty { min-height: 0; margin: 0; }
.calc--card .calc__submit { display: none; }
.calc__more { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.calc__more > summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); padding-block: var(--space-2xs); border-radius: var(--radius-input); }
.calc__more > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc__more[open] > summary { margin-bottom: var(--space-sm); }
.calc--card .result-wrap { position: static; margin-top: var(--space-md); gap: var(--space-xs); }
.calc--card .plate { border-radius: 18px; padding: var(--space-lg); box-shadow: none; }
.calc--card .result__figure { font-size: var(--text-3xl); }
.calc--card .tools .tool { border-color: var(--color-rule); }
@media (max-width: 40rem) { .calc--card { padding: var(--space-md); border-radius: var(--radius-card); } .calc--card .calc__grid { grid-template-columns: minmax(0, 1fr); } }

/* 2. the product */
.d-product { padding-block: var(--section-gap-s) 0; }
.d-product__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: center; }
.home-d h2 { font-size: var(--text-section); letter-spacing: -0.045em; line-height: 1.02; overflow-wrap: break-word; min-width: 0; }
.d-lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-muted); max-width: 46ch; }
.d-list { margin: var(--space-lg) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); font-weight: 600; }
.d-list li { display: flex; gap: var(--space-xs); }
.d-list li::before { content: "✓"; color: var(--color-success); font-weight: 800; }
.d-shot { margin: 0; }
.d-shot img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--color-paper-3); box-shadow: var(--shadow-shot); }
.d-shot figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); text-align: right; }
@media (max-width: 64rem) { .d-product__grid { grid-template-columns: minmax(0, 1fr); } }

/* 3. the bento of real screens */
.d-sect { padding-block: var(--section-gap-s) 0; }
.bento { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 450px; gap: var(--space-md); }
.tile { background: var(--color-paper-2); border-radius: 24px; padding: var(--space-lg) var(--space-lg) 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-md); overflow: hidden; }
.tile--wide { grid-column: span 2; }
.tile__level { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.tile h3 { margin-top: var(--space-2xs); font-size: var(--text-xl); letter-spacing: -0.025em; line-height: 1.15; }
.tile__text p:last-child { margin-top: var(--space-xs); color: var(--color-muted); max-width: 46ch; }
.tile__pic { min-height: 0; align-self: start; max-height: 100%; border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-3); box-shadow: var(--shadow-tile); }
.tile__pic img { display: block; width: 100%; height: auto; }
.tile--pay .tile__pic { align-self: center; border: 0; border-radius: 22px; background: none; }
@media (max-width: 64rem) { .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .tile--wide { grid-column: auto; } .tile__pic { max-height: 360px; } }

/* 4. councils */
.d-rates { margin-top: var(--space-xl); border-top: 2px solid var(--color-ink); }
.d-rate { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 7rem; align-items: baseline; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); color: inherit; text-decoration: none; }
.d-rate:hover b { text-decoration: underline; }
.d-rate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.d-rate b { font-size: var(--text-xl); letter-spacing: -0.03em; }
.d-rate span { color: var(--color-muted); }
.d-rate em { font-style: normal; font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.04em; text-align: right; }
@media (max-width: 48rem) { .d-rate { grid-template-columns: minmax(0, 1fr) auto; } .d-rate span { grid-column: 1; font-size: var(--text-sm); } .d-rate em { grid-column: 2; grid-row: 1 / span 3; } }

/* 5. start free: two plans, buttons on one line */
.dplans { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: var(--space-md); }
.dplan { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--space-sm); border: 1px solid var(--color-rule); border-radius: 24px; padding: var(--space-xl); background: var(--color-paper-3); }
.dplan h3 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.dplan__for { color: var(--color-muted); }
.dplan ul { margin: var(--space-2xs) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); align-content: start; }
.dplan li { display: flex; gap: var(--space-xs); }
.dplan li::before { content: "✓"; color: var(--color-success); font-weight: 800; }
.dplan .btn { margin-top: var(--space-sm); }
@media (max-width: 48rem) { .dplans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-md); } .dplan { grid-row: auto; grid-template-rows: none; } }
.d-signup { display: grid; gap: var(--space-xs); margin-block: var(--space-2xl) var(--section-gap-s); max-width: 40rem; }
.d-signup label { font-weight: 700; }
.home-d .calc__card-title { font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.2; }
.calc--card .group > legend.visually-hidden { float: none; width: 1px; }
.d-facts dd { color: color-mix(in srgb, var(--color-paper) 62%, var(--color-ink)); }

/* ---------- guides: one readable column, the answer first ---------- */
.guide { padding-block: var(--space-2xl) var(--section-gap-s); }
.guide__inner { max-width: calc(46rem + 2 * var(--gutter)); }
.guide__crumb { font-size: var(--text-sm); font-weight: 600; }
.guide__crumb a { color: var(--color-muted); }
.guide h1 { margin-top: var(--space-sm); font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.04em; overflow-wrap: break-word; min-width: 0; max-width: none; }
.guide__answer { margin-top: var(--space-lg); padding: 0 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); font-size: var(--text-lead); line-height: 1.45; font-weight: 600; }
.guide__body { margin-top: var(--space-xl); }
.guide__body h2, .guide__try h2, .guide__more h2 { font-size: var(--text-title); letter-spacing: -0.02em; margin: var(--space-xl) 0 var(--space-sm); }
.guide__body p, .guide__body li { color: var(--color-ink-2); line-height: 1.65; }
.guide__body p + p { margin-top: var(--space-sm); }
.guide__list { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.guide__sum, .guide__dates { width: 100%; margin-block: var(--space-md); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guide__sum th, .guide__sum td, .guide__dates th, .guide__dates td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; }
.guide__sum td { text-align: right; }
.guide__sum .is-result th, .guide__sum .is-result td { font-weight: 800; border-bottom: 2px solid var(--color-ink); }
.guide__dates thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.guide__dates tbody th { font-weight: 600; }
.guide__try { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.guide__try h2 { margin-top: 0; }
.guide__try p { color: var(--color-ink-2); }
.guide__try .btn { margin-top: var(--space-md); }
.guide__source { max-width: 70ch; margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.guide__source a { color: inherit; }
.guide__more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.guide__more a { font-weight: 600; }
.guide__index { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }
.guide__index a { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); color: inherit; text-decoration: none; }
.guide__index a:hover strong { text-decoration: underline; }
.guide__index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.guide__index strong { font-size: var(--text-lg); letter-spacing: -0.02em; }
.guide__index span { color: var(--color-ink-2); }

/* Home hero, laptop fit: start near the top bar, text aligned with the card's top, a tighter card,
   so the whole first screen (headline, actions, facts and the calculator's result) fits a MacBook. */
.d-hero { padding-block: var(--space-lg) var(--space-2xl); }
.d-hero__grid { align-items: start; gap: var(--space-xl); }
.d-hero__text { padding-top: var(--space-lg); }
.d-hero h1 { margin-top: var(--space-sm); font-size: min(var(--text-display), 4.6rem); }
.d-hero__sub { margin-top: var(--space-md); }
.d-hero__ctas { margin-top: var(--space-lg); }
.d-facts { margin-top: var(--space-lg); padding-top: var(--space-md); gap: var(--space-lg); }
.calc--card { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.calc--card .calc__form { gap: var(--space-sm); }
.calc--card .calc__grid { gap: var(--space-xs) var(--space-md); }
.calc__more { padding-top: var(--space-xs); }
.calc--card .result-wrap { margin-top: var(--space-sm); }
.calc--card .plate { padding: var(--space-md) var(--space-lg); }
.calc--card .result__figure { font-size: var(--text-2xl); }
.calc--card .result__empty { margin-top: var(--space-xs); font-size: var(--text-sm); }

/* ---------- booking filters: a Filters panel with live counts, pills for what's on ---------- */
.filters-btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.filters-btn:hover { border-color: var(--color-ink); }
.filters-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filters-btn__n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); }
.fpills-on { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.fpill-on { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-xs) 0 var(--space-sm); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.fpill-on__x { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-md); line-height: 1; }
.fpill-on:hover .fpill-on__x { background: var(--color-ink); color: var(--color-paper); }
.fpill-on:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fdialog { width: min(36rem, 100% - 2 * var(--space-md)); max-height: min(44rem, calc(100dvh - 2 * var(--space-lg))); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--shadow-lift); }
.fdialog::backdrop { background: var(--color-scrim); }
.fdialog__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.fdialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.fdialog__head h2 { font-size: var(--text-lg); }
.fdialog__body { overflow: auto; padding: var(--space-sm) var(--space-lg); }
.fgroup { margin: 0; padding: var(--space-md) 0; border: 0; border-bottom: 1px solid var(--color-rule); }
.fgroup:last-child { border-bottom: 0; }
.fgroup legend { float: left; width: 100%; margin-bottom: var(--space-sm); padding: 0; font-weight: 800; font-size: var(--text-md); }
.fpills { display: flex; flex-wrap: wrap; gap: var(--space-xs); clear: both; }
.fpills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fpill { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.fpill__n { color: var(--color-muted); font-weight: 600; }
.fpills input:checked + .fpill { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.fpills input:checked + .fpill .fpill__n { color: var(--color-paper-2); }
.fpills input:disabled + .fpill { opacity: 0.45; cursor: not-allowed; }
.fpills input:focus-visible + .fpill { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fpill:hover { border-color: var(--color-ink); }
.fdialog__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); }
.fdialog__foot .linkish { font-weight: 700; text-decoration: underline; }
.fdialog__foot .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- microinteractions: quick, physical, and only transform and opacity ---------- */
.btn, .tool, .fchip, .fpill, .fpill-on, .filters-btn, .quick__item, .places .place { transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:active, .tool:active, .fchip:active, .fpill:active, .fpill-on:active, .filters-btn:active, .quick__item:active, .places .place:active { transform: scale(0.97); }
.compare__cell { transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
@media (hover: hover) {
  .quick__item:hover { transform: translateY(-2px); }
}
.fdialog[open] { animation: fdialog-in var(--dur-short) var(--ease-out); }
@keyframes fdialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
#dash-status:not(:empty) { animation: toast-in var(--dur-short) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fpills input:checked + .fpill, .chips input:checked + .fchip { animation: pick var(--dur-short) var(--ease-out); }
@keyframes pick { 0% { transform: scale(0.94); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .tool, .fchip, .fpill, .fpill-on, .filters-btn, .quick__item, .places .place, .compare__cell { transition: none; }
  .btn:active, .tool:active, .fchip:active, .fpill:active, .fpill-on:active, .filters-btn:active, .quick__item:active, .places .place:active, .quick__item:hover { transform: none; }
  .fdialog[open], #dash-status:not(:empty), .fpills input:checked + .fpill, .chips input:checked + .fchip { animation: none; }
}

/* ---------- pricing: conversion details ---------- */
.plan--pick { box-shadow: var(--shadow-lift); }
.plan__safe { display: flex; align-items: center; justify-content: center; gap: var(--space-3xs); margin: 0; color: var(--color-ink-2); font-size: var(--text-xs); }
.plan__safe svg { flex: none; }
.pricing__value { max-width: 44rem; margin: var(--space-lg) auto 0; text-align: center; color: var(--color-ink-2); text-wrap: pretty; }
.pricing__value strong { color: var(--color-ink); }
.sticky-cta { display: none; }
@media (max-width: 40rem) {
  .sticky-cta:not([hidden]) { position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper-3); box-shadow: var(--shadow-lift); animation: cta-up 220ms ease-out; }
  .sticky-cta p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
  .sticky-cta .btn { flex: none; }
}
@keyframes cta-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta:not([hidden]) { animation: none; } }
.plan__total:empty { display: none; }

/* ---------- council pages: the owner's city photo behind the heading ---------- */
.hero__head--photo { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(10rem, 18vw, 14rem); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); }
.hero__head--photo .hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in oklch, var(--color-ink) 82%, transparent) 0%, color-mix(in oklch, var(--color-ink) 35%, transparent) 60%, color-mix(in oklch, var(--color-ink) 10%, transparent) 100%); }
.hero__head--photo h1, .hero__head--photo .lead { color: var(--color-paper); }
@media (max-width: 48rem) { .hero__head--photo { padding: var(--space-lg) var(--space-md); } }

/* ---------- legal pages and pricing terms line ---------- */
.gap-mark { padding: 0 var(--space-3xs); border-radius: 4px; background: var(--color-accent-2); color: var(--color-ink); }
.legal .guide__dates th[scope="row"] { font-weight: 500; }
.pricing__terms { margin: var(--space-sm) auto 0; text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.foot__legal a { margin-left: var(--space-xs); }

/* ---------- Astryx design rules, applied (meta/astryx docs/design, MIT) ----------
   elevation-hierarchy DR3: one edge language per surface. Cards at rest are flat with a hairline;
   surfaces that float or are raised (the recommended plan, dialogs, screenshots) use shadow only.
   control-rhythm DR4: a control may look compact and still be easy to tap on touch screens. */
.card, .kpi, .calc__form, .auth__card, .compare__cell, .plan { box-shadow: none; }
.plan--pick { border-color: transparent; box-shadow: var(--shadow-lift); }
.tile__pic { border-color: transparent; }
.mast__mark { min-height: 44px; min-width: 44px; }
@media (pointer: coarse) {
  .btn--small, .tool--small, .seg--small label, .fchip, .fpill-on { min-height: 44px; }
  .linkish { min-height: 44px; padding-block: var(--space-2xs); }
}

/* ---------- error pages ---------- */
.oops { padding-block: var(--space-2xl) var(--section-gap-s, var(--space-2xl)); }
.oops__inner { display: grid; gap: var(--space-md); max-width: 44rem; }
.oops__code { margin: 0; font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-muted); }
.oops h1 { font-size: var(--text-section); }
.oops .lead { color: var(--color-ink-2); }
.oops__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xs) 0 0; }
.oops__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.oops__more { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.oops__more h2 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.oops__more ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
#dash-detected.is-warning { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: color-mix(in srgb, var(--color-accent-2) 25%, var(--color-paper-3)); color: var(--color-ink); font-weight: 600; }