/* =============================================================================
   AVAVA Homes & Estates — Real Estate HTML Template
   -----------------------------------------------------------------------------
   01. Fonts & design tokens
   02. Reset & base
   03. Utilities (labels, buttons, links, hatches, crop marks, sparklines)
   04. Header — utility bar, nav, dropdowns
   05. Hero
   06. Section shell (heads, blueprint grid, feet)
   07. Process track
   08. Featured properties — bento
   09. Categories — plan legend
   10. Cities — drawing sheets
   11. Desks
   12. Agents
   13. Market insights
   14. Alerts
   15. Footer
   16. Modals
   17. Motion preferences
   ========================================================================== */

/* ==========================================================================
   01. Fonts & design tokens
   ========================================================================== */

@font-face {
  font-family: 'BBH Bartle';
  src: url('../fonts/BBHBartle-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette. The template ships DARK only — the light theme was removed on
     the owner's decision, 9 Aug 2026. Never hardcode a colour below this block:
     add a token here instead. ------------------------------------------------ */
  --bg: #100f0c;
  --bg-alt: #0c0b09;
  --panel: rgba(24, 22, 18, 0.92);
  --panel-hover: rgba(30, 27, 22, 0.95);
  --panel-picked: rgba(34, 31, 25, 0.98);
  --panel-dim: rgba(24, 22, 18, 0.6);
  /* The ground under a callout: the panel, opaque. Introduced for the
     seller intake's four boxes — the gap, the advice, the verdict and the
     step tiles all sit on it in the drawing. */
  --panel-callout: rgba(24, 22, 18, 0.98);
  /* Tiles inside a shared-hairline grid: one step up from `--panel` so
     the 1px gaps read as gaps rather than as seams. */
  --panel-tile: rgba(24, 22, 18, 0.96);
  /* The ground under something the reader can type in or tick: a textarea, a
     document chip, a message of your own. Darker than the panel it sits on,
     so an inset reads as an inset. */
  --field: rgba(16, 15, 12, 0.5);
  --ink: #ece5d8;
  --ink-rgb: 236, 229, 216;
  --ink-body: rgba(236, 229, 216, 0.62);
  --ink-muted: rgba(236, 229, 216, 0.45);
  --line: rgba(236, 229, 216, 0.2);
  --line-faint: rgba(236, 229, 216, 0.12);
  --accent: #d9a04a;
  --accent-rgb: 217, 160, 74;
  --on-accent: #14130f;
  --on-accent-rgb: 20, 19, 15;
  --grid-line-a: rgba(236, 229, 216, 0.04);
  --grid-line-b: rgba(236, 229, 216, 0.03);

  /* Surfaces that sit over photography, and the dropdown panel */
  --plate-rgb: 20, 19, 15;
  --menu-bg: rgba(16, 15, 12, 0.98);

  /* Map pin chip — sits over basemap tiles, so it needs its own solid tone */
  --pin-bg: rgba(20, 18, 14, 0.96);
  /* The drawer and its handle sit over tiles too, and have to stay readable */
  --panel-solid: rgba(20, 18, 14, 0.98);
  --line-strong: rgba(236, 229, 216, 0.22);
  /* Calculator sheets: the donut's inner disc, the underline a field is typed
     on, the softer accent that marks a budget rather than a product. */
  --panel-inner: rgba(20, 19, 15, 0.98);
  /* The agent register's filter panel.
     drops to 50% alpha on purpose, so the paper ground reads through it. */
  --panel-sheer: rgba(24, 22, 18, 0.92);
  /* Pricing comparison bars: the kept portion of the agency bar, and the
     commission slice inside it. Both sit a shade apart between themes. */
  /* Refusal. The only non-palette hue on the recruitment page, and used in
     exactly four places there. It is NOT an error colour — `--bad` is. */
  --refused: #c4573c;
  --refused-rgb: 196, 87, 60;
  --refused-line: rgba(196, 87, 60, 0.4);
  --refused-soft: rgba(196, 87, 60, 0.05);
  --refused-hatch: rgba(196, 87, 60, 0.5);
  --bar-dim: rgba(236, 229, 216, 0.1);
  --fee-dim: rgba(236, 229, 216, 0.4);
  --line-input: rgba(236, 229, 216, 0.28);
  --accent-soft: #e0b06a;
  --ink-faint: rgba(236, 229, 216, 0.38);
  /* Two handoffs in a row (new-builds, coming-soon) specify this pair, and the
     site had been carrying a single lighter green instead. `--good` is the
     state colour — Complete, Sold, on-time at or above 90%. `--good-soft` is
     the one that only ever sits on a tinted US tag, where the darker green
     goes muddy against `rgba(126,163,106,0.14)`. */
  --good: #7ea36a;
  --good-soft: #96b585;
  /* Components of --good, for the hairlines that need it at partial alpha —
     the `Updated` tag on the v2 feed is the first. Same pattern as
     --accent-rgb and --refused-rgb; keep the two in step. */
  --good-rgb: 126, 163, 106;
  --bad: #cf6a4f;

  /* Hero scrims, modal backdrop, card shadows */
  --scrim-rgb: 16, 15, 12;
  /* Over a video poster, not over a photograph: open enough to read the
     frame through, dark enough for the play mark to hold its edge. */
  --video-scrim: rgba(16, 15, 12, 0.28);
  /* Плашки поверх фотографии на портретных карточках. `--veil` несёт метку
     сделки и обязана быть читаемой на любом снимке; `--veil-soft` — чип
     активности и спарклайн, которые появляются только на наведённой
     карточке и потому могут быть легче. */
  --veil: rgba(16, 15, 12, 0.9);
  --veil-soft: rgba(20, 17, 13, 0.72);

  /* v4's opening frame sets text over a photograph. These follow the picture,
     not the page: the four `*-bright` values and the hero ink are identical in
     both themes, only the scrim tones differ. */
  --hero-top: rgba(16, 15, 12, 0.55);
  --hero-bottom: rgba(16, 15, 12, 0.88);
  --hero-plate: rgba(16, 15, 12, 0.86);
  --hero-ink: #f7f2e8;
  /* Components of `--hero-ink`, for the two places that need it with an
     alpha: the gallery panel numbers fade to nothing as a panel opens. */
  --hero-ink-rgb: 247, 242, 232;
  --hero-ink-dim: rgba(247, 242, 232, 0.72);
  --mark-bright: rgba(247, 242, 232, 0.6);
  --accent-bright: #e0b06a;
  --ok-bright: #8fae76;
  --line-soft: rgba(236, 229, 216, 0.14);
  --ok-soft: rgba(126, 163, 106, 0.1);
  /* New builds: the gold's own hover, and the amber that marks low stock,
     a reserved unit and an on-time rate under 90%. Not `--bad` — that is an
     error colour and these are states, not faults. */
  --accent-hover: #e8b563;
  --warn: #c8763f;
  /* Components of `--warn`, for the one place it is needed at partial alpha:
     the Rural badge on a land card is the warn colour at 90%. Same pattern as
     `--good-rgb` and `--accent-rgb`; keep the two in step. */
  --warn-rgb: 200, 118, 63;

  --shadow-rgb: 0, 0, 0;
  --scrim-h: linear-gradient(90deg, rgba(16, 15, 12, 0.95) 0%, rgba(16, 15, 12, 0.9) 34%, rgba(16, 15, 12, 0.55) 52%, rgba(16, 15, 12, 0.05) 72%, rgba(16, 15, 12, 0.4) 100%);
  --scrim-v: linear-gradient(180deg, rgba(16, 15, 12, 0.9) 0%, rgba(16, 15, 12, 0.2) 18%, rgba(16, 15, 12, 0) 50%, rgba(16, 15, 12, 0.85) 100%);
  --hero-filter: none;

  /* ---- Theme-independent ------------------------------------------------- */

  /* The footer is dark on both themes — only its background moves */
  --footer-bg: #0a0908;
  --footer-accent: #d9a04a;
  --footer-ink: #f4efe3;
  --footer-ink-rgb: 244, 239, 227;
  --gold: #d9a04a;
  --gold-rgb: 217, 160, 74;

  /* Type and shades that live on top of photography — identical in both themes */
  --on-photo: #f7f2e8;
  --on-photo-rgb: 247, 242, 232;
  --on-photo-accent: #e0b06a;
  --photo-shade-rgb: 20, 17, 13;

  /* Reviews block — the inverted contrast beat of Home 3 */
  --quote-bg: #1b1913;
  --quote-panel: #14120e;
  --quote-card: rgba(30, 27, 21, 0.75);
  --quote-ink: #f2ebdd;
  --quote-ink-rgb: 242, 235, 221;

  /* Semantic */
  --green: #8fae76;
  --green-rgb: 143, 174, 118;

  /* Type */
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wordmark: 'BBH Bartle', 'Instrument Serif', serif;

  /* Metrics */
  /* Отступ контента и отступ шапки — одно и то же число. Раньше здесь
     стояло 80px, и до ширины ~1750px это не проявлялось: оба токена
     давали 3.2vw. Выше контент уезжал внутрь на 5px при 1920 и на 24px
     при 2500, а меню оставалось на 56. Владелец увидел это на широком
     мониторе. Оба токена теперь ограничены 56px — как и требует
     спецификация: `--pad: clamp(28px, 3.2vw, 56px)`. */
  --pad: clamp(28px, 3.2vw, 56px);
  --pad-hero: clamp(28px, 3.2vw, 56px);
  --min-page: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.85, 0.2, 1);
}



/* ==========================================================================
   02. Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; }

em { font-style: italic; color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--pad-hero);
  z-index: 200;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--on-accent); }

/* Motion keyframes */
@keyframes de-drift { 0% { transform: scale(1.05); } 100% { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); } }
@keyframes de-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes de-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes de-glow { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* ==========================================================================
   03. Utilities
   ========================================================================== */

.label,
.eyebrow,
.utilbar,
.figure__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.label { color: rgba(var(--ink-rgb), 0.45); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow__line {
  width: 60px;
  height: 1px;
  background: var(--accent);
}
.eyebrow__note { color: rgba(var(--ink-rgb), 0.48); }
.eyebrow--hero .eyebrow__line {
  width: 54px;
  transform-origin: left;
  animation: de-draw 0.8s 0.1s var(--ease) both;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--ink); color: var(--bg); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--accent); color: var(--on-accent); }
.btn--gold { background: var(--gold); color: var(--footer-bg); }
.btn--gold:hover { background: var(--footer-ink); color: var(--footer-bg); }
.btn--ghost {
  border: 1px solid rgba(var(--footer-ink-rgb), 0.28);
  color: var(--footer-ink);
  padding: 15px 26px;
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
/* The round account icon — the only rounded element in the header, and the
   one control there with no visible label, so it carries an accessible name.
   Its 10px and the button's 20px are different on purpose: the gap to the
   right of the icon then matches the gap to its left. */
.navbar__account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.navbar__account:hover,
.navbar__account:focus-visible {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.btn--add { margin-left: 20px; padding: 13px 18px; letter-spacing: 0.16em; }
.btn__plus { font-size: 14px; font-weight: 400; line-height: 1; }
.btn--search { padding: 0 46px; align-self: stretch; border-radius: 0 var(--radius) var(--radius) 0; letter-spacing: 0.2em; font-size: 12px; }
.btn--block { width: 100%; margin-top: 26px; padding: 15px 0; letter-spacing: 0.2em; }

.link-underline {
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.link-underline--light { color: var(--on-accent); border-bottom-color: rgba(var(--plate-rgb), 0.5); }
.link-underline--light:hover { color: var(--on-accent); border-bottom-color: var(--on-accent); }
.link-underline--muted {
  color: rgba(var(--ink-rgb), 0.6);
  border-bottom-color: rgba(var(--ink-rgb), 0.25);
  font-size: 12px;
}
.link-underline--muted:hover { color: var(--accent); border-bottom-color: var(--accent); }

.dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
}
.dot--green { background: var(--green); }
.dot--amber { background: var(--gold); }

/* Crop marks — four (or two) corner ticks drawn as one element */
.crop {
  --crop-c: rgba(var(--on-photo-rgb), 0.55);
  --crop-c2: rgba(var(--on-photo-rgb), 0.35);
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 12px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 1px 12px no-repeat;
}
.crop--top {
  --crop-c: rgba(var(--ink-rgb), 0.5);
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 1px 12px no-repeat;
}
.crop--light { --crop-c: rgba(var(--on-photo-rgb), 0.5); }

/* Blueprint grid overlay */
.blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--grid-line-a) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line-b) 1px, transparent 1px);
  background-size: 120px 120px;
}
.blueprint--h {
  background-image: linear-gradient(0deg, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px);
}
.blueprint--v {
  background-image: linear-gradient(90deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px);
}
.blueprint--dark {
  background-image:
    linear-gradient(90deg, rgba(var(--footer-ink-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--footer-ink-rgb), 0.03) 1px, transparent 1px);
}

/* Sparklines */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  padding: 5px 8px;
  background: rgba(var(--plate-rgb), 0.9);
}
.spark__bar {
  width: 4px;
  height: 40%;
  background: rgba(var(--ink-rgb), 0.32);
}
.spark__bar--last { background: var(--accent); }
.spark--sm {
  height: 26px;
  gap: 2px;
  padding: 0;
  background: none;
}

/* Readouts used in section heads */
.readout {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: right;
  white-space: nowrap;
}
.readout__value {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
}
.readout__value--lg { font-size: 40px; }
.readout__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}

/* ==========================================================================
   04. Header
   ========================================================================== */

/* The header floats over the hero on the homepages. Inner pages have no hero,
   so there `body.page-inner` puts it back into the flow and the page content
   starts below it instead of sliding underneath. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.page-inner .site-header {
  position: sticky;
  top: 0;
  background: rgba(var(--scrim-rgb), 0.96);
  backdrop-filter: blur(10px);
}

.utilbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 var(--pad-hero);
  color: rgba(var(--ink-rgb), 0.45);
}
.utilbar::after {
  content: '';
  position: absolute;
  left: var(--pad-hero);
  right: var(--pad-hero);
  bottom: 0;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.09);
}
.utilbar__group { display: flex; align-items: center; gap: 22px; }
.utilbar__live { display: flex; align-items: center; gap: 8px; }
.utilbar__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: de-glow 1.8s ease-in-out infinite alternate;
}
.utilbar__ticker { transition: opacity 0.3s ease; }
.utilbar__ticker.is-fading { opacity: 0; }
.utilbar__sep { opacity: 0.3; }

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 92px;
  padding: 0 var(--pad-hero);
}
/* Logo stays left; nav, theme toggle and the button travel together on the right. */
.nav { margin-left: auto; }
.navbar::after {
  content: '';
  position: absolute;
  left: var(--pad-hero);
  right: var(--pad-hero);
  bottom: 0;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.12);
}
.navbar__actions { display: flex; align-items: center; }

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.logo:hover { color: inherit; }
.logo__mark {
  font-family: var(--wordmark);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--accent);
}
/* The one deliberate exception to the project's 12px floor, decided by the
   owner: the wordmark subtitle is set at 11px with wide tracking. It is a
   logotype, not body copy — the letters carry the mark, not information. The
   exception covers this rule and the mobile bar below (11px/0.5em); the
   footer subtitle stays 12px. Do not "fix" these two back up to 12px. */
.logo__sub {
  font-size: 11px;
  letter-spacing: 0.70em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* Six items with longer labels than before. The page wrapper is
   `min-width: 1180px; overflow-x: hidden`, so anything past the edge is
   silently clipped rather than scrollable — these values are what make the bar
   fit, and Add Property's right edge has to be re-measured after any change. */
.nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px clamp(6px, 0.62vw, 11px);
}
.nav__caret { opacity: 0.6; flex: 0 0 auto; transition: transform 0.25s ease; }
.nav__item--has-menu:hover > .nav__link .nav__caret,
.nav__item--has-menu:focus-within > .nav__link .nav__caret { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 292px;
  padding: 12px 0;
  background: var(--menu-bg);
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-top: 1px solid rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 30px 60px -26px rgba(var(--shadow-rgb), 0.24);
  /* `display: none`, not `visibility: hidden`. A hidden box still occupies its
     place in the layout, and these panels are absolutely positioned past the
     right edge of the bar — at 1180px, the site's minimum, that gave every
     page 18px of real horizontal scroll with nothing visible to explain it.
     `scrollWidth` is a poor witness here; the proof is `window.scrollTo(200,0)`
     actually moving the page (§10 п.29). Keyboard access is unchanged: the
     panel opens on `:focus-within` of its parent row, and a display:none child
     was never tabbable anyway. */
  display: none;
  opacity: 0;
}
.nav__item--has-menu:hover > .menu,
.nav__item--has-menu:focus-within > .menu,
.menu__item--has-sub:hover > .menu,
.menu__item--has-sub:focus-within > .menu {
  display: block;
  opacity: 1;
  animation: de-rise 0.22s ease-out both;
}
/* The multi-column panels are grids when they open. */
.nav__item--has-menu:hover > .menu--wide,
.nav__item--has-menu:focus-within > .menu--wide,
.nav__item--has-menu:hover > .menu--two,
.nav__item--has-menu:focus-within > .menu--two { display: grid; }
.menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(var(--ink-rgb), 0.78);
  transition: background 0.2s ease, color 0.2s ease;
}
.menu__row:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--ink); }
.menu__tag {
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(var(--accent-rgb), 0.85);
}
.menu__caret { color: rgba(var(--accent-rgb), 0.85); flex: 0 0 auto; }

.menu--sub {
  top: -8px;
  left: auto;
  right: 100%;
  width: 240px;
  padding: 8px 0;
}
/* Every second-level flyout opens leftward. Both parents that have one —
   Pages and Dashboard — sit in the right half of the bar, and a rightward
   panel runs off the page at 1180px. This used to be true only of Dashboard;
   Pages ▸ Agents / Blog / Blog single post were measured at a right edge of
   1198 against a 1180 viewport, so the exception no longer held. */
.menu--sub-left { left: auto; right: 100%; }

.menu__item--has-sub { position: relative; }
.menu__item--has-sub > .menu__row { border-bottom: 1px solid rgba(var(--ink-rgb), 0.08); }
/* Rows that go nowhere of their own are buttons, not links — they still have to
   look and sit exactly like every other row. */
button.menu__row {
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* Wide panels are pulled back from their trigger so they stay on the page. */
/* No `display` here on purpose: the closed state is `display: none` on `.menu`,
   and a `display: grid` on the variant would out-specify it and leave the panel
   sitting open. The grid is switched on in the open rule below, per variant. */
.menu--two {
  grid-template-columns: 1fr 1fr;
  padding: 20px 0 18px;
}
/* Two columns since the navigation change of 9 Aug: `Special situations` went
   and Home detail came first. 660px, and the pull is what keeps the right edge
   inside the page at the 1180px minimum.

   The divider belongs to the LEFT column of the pair, not to a particular
   group — reorder the columns and it stays where it is.

   Contacts is a link, not a group: the only item in the bar with no chevron.
   Its padding matches the groups exactly so the rhythm is unbroken. */
.nav__link--plain { padding: 12px clamp(6px, 0.62vw, 11px); }
.menu--props { left: -300px; width: 660px; }
.menu--two .menu__col { padding: 0 24px; }
.menu--two .menu__col:first-child { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.menu--two .menu__col-title { margin-bottom: 0; }
.menu--two .menu__col-list { gap: 1px; padding-top: 10px; }
/* Label left, market tag right. Rows brighten to accent on hover — they never
   dim, which is the rule for every menu on the site. */
.menu--two .menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  color: rgba(var(--ink-rgb), 0.78);
}
.menu--two .menu__link:hover { color: var(--accent); }
.menu__market {
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.36);
}

.menu--dash { left: -50px; width: 268px; padding: 8px 0; }

.menu--wide {
  left: -90px;
  width: 700px;
  padding: 26px 30px;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 32px;
}
.menu__col-title {
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  font-family: var(--serif);
  font-size: 19px;
  text-transform: none;
  color: var(--accent);
}
.menu__col-list { display: flex; flex-direction: column; gap: 8px; }
.menu__link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(var(--ink-rgb), 0.72);
}
.menu__foot {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.menu__foot-link { color: var(--accent); }

/* ==========================================================================
   05. Hero
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; }
/* Two stacked photographs — the theme decides which one is visible. Both are in
   the markup so the switch is instant and works with JavaScript disabled. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 58%;
  filter: var(--hero-filter);
  animation: de-drift 30s ease-in-out infinite alternate;
  transition: opacity 0.3s ease;
}
.hero__scrim { position: absolute; inset: 0; }
.hero__scrim--h { background: var(--scrim-h); }
.hero__scrim--v { background: var(--scrim-v); }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px);
  background-size: 110px 110px;
}
.hero__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gx, 72%);
  width: 1px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0) 0%, rgba(var(--accent-rgb), 0.4) 24%, rgba(var(--accent-rgb), 0.4) 76%, rgba(var(--accent-rgb), 0) 100%);
}
.hero__guide-label {
  position: absolute;
  left: var(--gx, 72%);
  top: var(--gy, 40%);
  z-index: 6;
  transform: translate(14px, -50%);
  pointer-events: none;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.8);
}

.hero__body {
  position: relative;
  z-index: 10;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 1.6vh, 18px);
  padding: calc(130px + clamp(12px, 3.2vh, 68px)) var(--pad-hero) clamp(12px, 2.2vh, 32px);
}

.hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 46px;
}
.hero__lead {
  display: flex;
  gap: 30px;
  align-items: stretch;
  max-width: 980px;
  flex: 1 1 auto;
  min-width: 0;
}
.hero__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.hero__rail-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.hero__rail-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.28), rgba(var(--ink-rgb), 0));
}
.hero__lead-inner { flex: 1; min-width: 0; }

.hero__title {
  margin: clamp(8px, 2.4vh, 52px) 0 0;
  font-family: var(--serif);
  font-size: clamp(42px, 5.4vw, 112px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.hero__title-line { display: block; animation: de-rise 0.9s 0.05s var(--ease-out) both; }
.hero__title-line--indent { padding-left: 1.6em; animation-delay: 0.16s; }
.hero__title-line:last-child { animation-delay: 0.27s; }

.hero__intro {
  display: flex;
  align-items: flex-start;
  gap: 38px;
  flex-wrap: wrap;
  margin-top: clamp(14px, 2.6vh, 30px);
  animation: de-rise 0.9s 0.34s var(--ease-out) both;
}
.hero__text {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 520px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.66);
  text-wrap: pretty;
}
.hero__median {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 9px;
  padding-left: 26px;
  white-space: nowrap;
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}
.hero__median-value { font-family: var(--serif); font-size: 34px; line-height: 1; }
.hero__median-unit { font-size: 15px; color: rgba(var(--ink-rgb), 0.5); }
.hero__median-delta { font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(10px, 2.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  animation: de-rise 0.9s 0.44s var(--ease-out) both;
}
.figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.8vh, 18px) 20px clamp(9px, 1.6vh, 16px) 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
  transition: background 0.25s ease, padding 0.25s ease;
}
.figure:hover { background: rgba(var(--accent-rgb), 0.09); padding-left: 12px; color: inherit; }
.figure__num { font-family: var(--serif); font-size: 30px; line-height: 1; }
.figure__label { color: rgba(var(--ink-rgb), 0.55); }

/* Featured-now panel */
.spotlight {
  width: 420px;
  flex: 0 0 420px;
  padding: clamp(14px, 2.2vh, 24px) 26px clamp(13px, 2vh, 22px);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: var(--radius);
  background: rgba(var(--plate-rgb), 0.72);
  backdrop-filter: blur(12px);
  animation: de-rise 0.9s 0.5s var(--ease-out) both;
}
.spotlight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.spotlight__body {
  position: relative;
  margin-top: clamp(10px, 1.8vh, 18px);
  min-height: clamp(112px, 15vh, 156px);
}
.spotlight__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.spotlight__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.spotlight__kind {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.spotlight__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}
.spotlight__meta {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.6);
}
.spotlight__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
}
.spotlight__price { font-family: var(--serif); font-size: 27px; }
.spotlight__dots { display: flex; gap: 6px; margin-top: 20px; }
.spotlight__dot {
  flex: 1;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(var(--ink-rgb), 0.2);
  cursor: pointer;
  transition: background 0.25s ease;
}
.spotlight__dot.is-active { background: var(--accent); }

/* Just listed rail */
.justlisted {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  backdrop-filter: blur(10px);
  animation: de-rise 0.9s 0.56s var(--ease-out) both;
}
.justlisted__label {
  display: flex;
  align-items: center;
  padding: 0 26px 0 20px;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.justlisted__list { display: flex; flex: 1; min-width: 0; }
.justlisted__list > li { flex: 1; min-width: 0; display: flex; }
.justlisted__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(9px, 1.5vh, 15px) 22px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.12);
  transition: background 0.25s ease;
}
.justlisted__item:hover { background: rgba(var(--accent-rgb), 0.08); color: inherit; }
.justlisted__ago { font-size: 12px; letter-spacing: 0.16em; color: var(--accent); white-space: nowrap; }
.justlisted__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: rgba(var(--ink-rgb), 0.85);
}
.justlisted__price { font-family: var(--serif); font-size: 17px; white-space: nowrap; }

/* Search */
.search__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}
.search__tabs { display: flex; gap: 26px; }
.search__tab {
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.search__tab:hover { color: var(--ink); }
.search__radio:checked + .search__tab { color: var(--ink); border-bottom-color: var(--accent); }
.search__radio:focus-visible + .search__tab { outline: 2px solid var(--accent); outline-offset: 3px; }

.search__chips { display: flex; align-items: center; gap: 10px; }
.chip {
  padding: 6px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.7);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip__input:checked + .chip { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); border-color: var(--accent); }
.chip__input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.search__fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: stretch;
  margin-top: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: var(--radius);
  background: rgba(var(--plate-rgb), 0.78);
  backdrop-filter: blur(12px);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(12px, 2vh, 20px) 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.field__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.field__control {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
}
select.field__control { appearance: none; cursor: pointer; }
.field__control::placeholder { color: rgba(var(--ink-rgb), 0.42); }
.field__control:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.search__actions { display: flex; align-items: stretch; }
.search__filters {
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}
.search__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ==========================================================================
   06. Section shell
   ========================================================================== */

.section {
  width: 100%;
  background: var(--bg);
}
.section--alt { background: var(--bg-alt); }

.section__inner {
  position: relative;
  padding: clamp(56px, 8vh, 96px) var(--pad) clamp(56px, 8vh, 92px);
  overflow: hidden;
}
.section__inner--narrow { padding: clamp(48px, 7vh, 64px) clamp(28px, 3.2vw, 60px) clamp(52px, 7.5vh, 70px); }
.section__inner--lines { overflow: visible; }
.section__inner--rule::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(var(--accent-rgb), 0.16);
}

.section__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.section__head--ruled {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}
.section__headline { flex: 1 1 520px; min-width: 0; }
.section__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(50px, 4.5vw, 88px);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.012em;
}
.section__title--sm { font-size: clamp(42px, 3.8vw, 70px); }
.section__lede {
  flex: 0 1 400px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(var(--ink-rgb), 0.66);
}
.section__aside { display: flex; align-items: flex-end; gap: 34px; flex: 0 0 auto; }
.section__aside--wrap { align-items: flex-end; }

.section__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 7vh, 84px);
  padding-top: 32px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}
.section__foot-text { font-size: 16px; font-weight: 300; color: rgba(var(--ink-rgb), 0.68); }
.section__foot-actions { display: flex; align-items: center; gap: 22px; }
.section__foot--grid {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr auto;
  align-items: center;
  gap: 40px;
  margin-top: 36px;
  padding-top: 26px;
}
.section__foot--grid .section__foot-text { font-size: 14px; color: rgba(var(--ink-rgb), 0.62); }

.totals { display: flex; flex-direction: column; gap: 7px; }
.totals__value { font-family: var(--serif); font-size: 28px; line-height: 1; }
.totals__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}

/* ==========================================================================
   07. Process track
   ========================================================================== */

.trust { display: flex; gap: 44px; flex: 0 0 auto; white-space: nowrap; }
.trust__item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 24px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
}
.trust__value { font-family: var(--serif); font-size: 40px; line-height: 1; }
.trust__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}

.process { position: relative; margin-top: clamp(56px, 8vh, 92px); }
.process__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.18);
}
.process__progress {
  position: absolute;
  left: 0;
  top: 9px;
  height: 1px;
  width: 37.5%;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}
.process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: clamp(16px, 2vw, 40px);
}
.step__dot {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.step__dot > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease;
}
.step.is-filled .step__dot > span { background: var(--accent); }
.step__meta { display: flex; align-items: baseline; gap: 14px; }
.step__num,
.step__when {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.step__num { color: var(--accent); }
.step__when { color: rgba(var(--ink-rgb), 0.48); }
.step__title {
  font-family: var(--serif);
  font-size: clamp(27px, 1.9vw, 36px);
  font-weight: 400;
  line-height: 1.1;
}
.step__text { font-size: 16px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.68); }
.step__stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  opacity: 0.42;
  transition: opacity 0.35s ease;
}
.step.is-active .step__stat { opacity: 1; }
.step__stat-value { font-family: var(--serif); font-size: 26px; }
.step__stat-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}

/* ==========================================================================
   08. Featured properties — bento
   ========================================================================== */

.measure {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  padding: 0 2px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}
.measure__tick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.measure__tick > span { width: 1px; height: 7px; background: rgba(var(--ink-rgb), 0.3); }
.measure__tick--tall > span { height: 12px; }

.bento {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, clamp(250px, 30vh, 340px));
  gap: clamp(14px, 1.4vw, 24px);
  margin-top: 26px;
}

.frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: var(--radius);
  background: rgba(var(--ink-rgb), 0.06);
  transition: opacity 0.35s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.frame--wide { grid-column: span 2; }
.frame--tall { grid-row: span 2; }
.frame__media { position: absolute; inset: 0; transition: transform 0.6s var(--ease); }
.frame__media img { width: 100%; height: 100%; object-fit: cover; }
.frame__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.34) 0%, rgba(var(--photo-shade-rgb), 0) 36%, rgba(var(--photo-shade-rgb), 0.8) 100%);
}
.frame__top {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.9);
}
.frame__deal {
  padding: 6px 12px;
  background: rgba(var(--photo-shade-rgb), 0.6);
  transition: background 0.3s ease, color 0.3s ease;
}
.frame__dim { display: flex; align-items: center; gap: 8px; }
.frame__dim-tick {
  width: 26px;
  height: 1px;
  background: rgba(var(--on-photo-rgb), 0.65);
  transition: width 0.4s ease;
}
.frame__body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: block;
  pointer-events: none;
  color: var(--on-photo);
}
.frame__kind {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.frame__title {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.08;
}
.frame__title--lg { font-size: 34px; }
.frame__title--md { font-size: 30px; }
.frame__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-photo-rgb), 0.3);
}
.frame__price { font-family: var(--serif); font-size: 23px; }
.frame__meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.74);
}
.frame__specs {
  display: flex;
  gap: 16px;
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding-top: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.7);
  transition: height 0.4s var(--ease), opacity 0.35s ease, padding-top 0.4s var(--ease);
}

.bento:hover .frame { opacity: 0.62; }
.bento .frame:hover {
  opacity: 1;
  transform: translateY(-6px);
  border-color: var(--accent);
  color: inherit;
}
.frame:hover .frame__media { transform: scale(1.06); }
.frame:hover .frame__deal { background: var(--accent); color: var(--on-accent); }
.frame:hover .frame__dim-tick { width: 44px; }
.frame:hover .frame__specs { height: 22px; padding-top: 12px; opacity: 1; }

.index-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 26px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
}
.index-tile__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}
.index-tile__value { font-family: var(--serif); font-size: 52px; line-height: 0.98; }
.index-tile__text { margin-top: 12px; font-size: 12px; font-weight: 300; line-height: 1.6; opacity: 0.88; }

/* ==========================================================================
   09. Categories — plan legend
   ========================================================================== */

.legend {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.3vw, 22px);
  margin-top: clamp(30px, 4.4vh, 44px);
}
.legend__card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 26px 26px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: var(--radius);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.legend:hover .legend__card { opacity: 0.66; }
.legend .legend__card:hover {
  opacity: 1;
  transform: translateY(-5px);
  border-color: var(--accent);
  background: var(--panel-hover);
  color: inherit;
}

.hatch {
  position: relative;
  width: 86px;
  flex: 0 0 86px;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
}
.hatch__fill {
  position: absolute;
  inset: -20%;
  transition: transform 0.6s var(--ease);
}
.legend__card:hover .hatch__fill { transform: scale(1.25) rotate(4deg); }
.hatch__num {
  position: absolute;
  top: 6px;
  left: 7px;
  padding: 2px 5px;
  background: rgba(var(--scrim-rgb), 0.85);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.hatch--1 .hatch__fill { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.45) 0 1px, transparent 1px 7px); }
.hatch--2 .hatch__fill { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.45) 0 1px, transparent 1px 8px); }
.hatch--3 .hatch__fill { background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.6) 0 2px, transparent 2px 9px); }
.hatch--4 .hatch__fill {
  background-image:
    repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.36) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.36) 0 1px, transparent 1px 6px);
}
.hatch--5 .hatch__fill {
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.45) 1px, transparent 1.6px);
  background-size: 8px 8px;
}
.hatch--6 .hatch__fill { background-image: repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.6) 0 1px, transparent 1px 5px); }

.legend__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.legend__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.legend__tag {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.legend__from {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
}
.legend__name { font-family: var(--serif); font-size: 34px; line-height: 1.04; }
.legend__blurb { font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.66); }
.legend__share {
  display: block;
  height: 2px;
  margin-top: 4px;
  background: rgba(var(--ink-rgb), 0.1);
}
.legend__share-fill {
  display: block;
  height: 2px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}
.legend__share-fill--1 { width: 34%; }
.legend__share-fill--2 { width: 100%; }
.legend__share-fill--3 { width: 14%; }
.legend__share-fill--4 { width: 10%; }
.legend__share-fill--5 { width: 6%; }
.legend__share-fill--6 { width: 58%; }
.legend__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.legend__count { font-family: var(--serif); font-size: 25px; }
.legend__pct {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
}

.band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.25fr auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(30px, 4.4vh, 44px);
  padding-top: 28px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
}
.band__selected { display: flex; flex-direction: column; gap: 10px; }
.band__name { font-family: var(--serif); font-size: 36px; line-height: 1; }
.band__ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
}
.band__median { color: var(--accent); }
.band__axis {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 14px;
  background: rgba(var(--ink-rgb), 0.3);
}
.band__axis::before,
.band__axis::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(var(--ink-rgb), 0.3);
}
.band__axis::before { left: 0; }
.band__axis::after { right: 0; }
.band__marker {
  position: absolute;
  top: -5px;
  left: 38%;
  width: 11px;
  height: 11px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  transition: left 0.5s var(--ease);
}
.band__note { margin-top: 14px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }

/* ==========================================================================
   10. Cities — drawing sheets
   ========================================================================== */

.plates {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.3vw, 24px);
  margin-top: clamp(30px, 4.4vh, 44px);
}
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: var(--radius);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.plate--wide { grid-column: span 2; }
.plates:hover .plate { opacity: 0.68; }
.plates .plate:hover {
  opacity: 1;
  transform: translateY(-5px);
  border-color: var(--accent);
  color: inherit;
}

.plate__media {
  position: relative;
  height: clamp(180px, 21vh, 230px);
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.05);
}
.plate__media--tall { height: clamp(220px, 26vh, 300px); }
.plate__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}
.plate:hover .plate__media img { opacity: 1; transform: scale(1.05); }
.plate__hatch {
  position: absolute;
  inset: 0;
  background-size: 26px 26px;
  opacity: 0.5;
  transition: opacity 0.45s ease;
}
.plate:hover .plate__hatch { opacity: 0.18; }
.plate__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.3) 0 1px, transparent 1px 9px); }
.plate__hatch--2 {
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.26) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(var(--ink-rgb), 0.26) 0 1px, transparent 1px 10px);
}
.plate__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.3) 1px, transparent 1.6px); }
.plate__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.26) 0 1px, transparent 1px 8px); }
.plate__hatch--5 { background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.4) 0 2px, transparent 2px 11px); }
.plate__hatch--6 { background-image: repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.4) 0 1px, transparent 1px 6px); }

.plate__tags {
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.plate__sheet { padding: 3px 8px; background: rgba(var(--plate-rgb), 0.9); }
.plate__districts {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: rgba(var(--plate-rgb), 0.9);
}
.plate__tick {
  width: 18px;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.5);
  transition: width 0.4s ease;
}
.plate:hover .plate__tick { width: 34px; }

.plate__caption {
  position: absolute;
  bottom: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.plate__name {
  padding: 2px 12px 5px;
  background: rgba(var(--plate-rgb), 0.9);
  font-family: var(--serif);
  font-size: clamp(32px, 2.3vw, 44px);
  line-height: 0.96;
  color: var(--ink);
}
.plate__name--xl { font-size: clamp(44px, 3.2vw, 62px); }
.plate__name--lg { font-size: clamp(38px, 2.7vw, 52px); }

.plate__block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(var(--ink-rgb), 0.22);
}
.plate__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 16px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}
.plate__cell:last-child { border-right: none; }
.plate__cell-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
}
.plate__cell-value { font-family: var(--serif); font-size: 20px; line-height: 1; }

.plate__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px 17px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}
.plate__list {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.62);
}
.plate__open {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
  transition: color 0.3s ease;
}
.plate:hover .plate__open { color: var(--accent); }

.plate-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 30px 28px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  transition: background 0.28s ease;
}
.plate-cta:hover { background: var(--ink); color: var(--bg); }
.plate-cta__label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.plate-cta__value { display: block; font-family: var(--serif); font-size: 56px; line-height: 0.96; }
.plate-cta__text { display: block; margin-top: 14px; font-size: 13px; font-weight: 300; line-height: 1.6; opacity: 0.9; }
.plate-cta__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--on-accent-rgb), 0.35);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.plate-cta__count { font-family: var(--serif); font-size: 24px; letter-spacing: 0; text-transform: none; }

/* ==========================================================================
   11. Desks
   ========================================================================== */

.dial {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 33%, rgba(var(--ink-rgb), 0.14) 33% 100%);
}
.dial__inner {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--serif);
  font-size: 20px;
}

.desks {
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr;
  margin-top: 40px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}
.desks__switch { border-right: 1px solid rgba(var(--ink-rgb), 0.16); }

.desk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 24px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.desk__mark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.3s ease;
}
.desk__plate {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  transition: border-color 0.3s ease;
}
.desk__plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 10px 10px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.desk__plate--1::before { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.desk__plate--2::before { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.36) 0 1px, transparent 1px 9px); }
.desk__plate--3::before { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.desk__fig {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 24px;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.3s ease;
}
.desk__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.desk__num {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.desk__title { font-family: var(--serif); font-size: 26px; line-height: 1.04; }
.desk__count {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.desks__radio:checked + .desk { background: rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.desks__radio:checked + .desk .desk__mark { background: var(--accent); }
.desks__radio:checked + .desk .desk__plate { border-color: var(--accent); }
.desks__radio:checked + .desk .desk__plate::before { opacity: 0.55; }
.desks__radio:checked + .desk .desk__fig { color: var(--accent); }
.desks__radio:checked + .desk .desk__num,
.desks__radio:checked + .desk .desk__count { color: var(--accent); }
.desks__radio:focus-visible + .desk { outline: 2px solid var(--accent); outline-offset: -2px; }

.desks__hours { padding: 22px 24px 24px; }
.desks__hours-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.desks__open { color: var(--accent); }
.desks__hours-text { margin-top: 9px; font-size: 13px; font-weight: 300; color: rgba(var(--ink-rgb), 0.62); }
.desks__reply {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.6);
}

.deskpanel { display: none; grid-template-columns: 1fr 320px; }
.desks__panels > .deskpanel:first-child { display: grid; }
.desks:has(#desk-rent:checked) .deskpanel:first-child,
.desks:has(#desk-sell:checked) .deskpanel:first-child { display: none; }
.desks:has(#desk-rent:checked) [data-desk-panel='1'] { display: grid; }
.desks:has(#desk-sell:checked) [data-desk-panel='2'] { display: grid; }

.deskpanel__text { padding: 38px 38px 34px; }
.deskpanel__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.deskpanel__rule { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.16); }
.deskpanel__rev { letter-spacing: 0.2em; color: rgba(var(--ink-rgb), 0.42); }
.deskpanel__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.06;
}
.deskpanel__lede {
  margin-top: 14px;
  max-width: 520px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(var(--ink-rgb), 0.66);
}
.deskpanel__steps {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.deskstep {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 12px 15px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  transition: background 0.25s ease;
}
.deskstep:hover { background: rgba(var(--accent-rgb), 0.07); }
.deskstep__num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.3s ease;
}
.deskstep__tick {
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s ease;
}
.deskstep:hover .deskstep__num { color: var(--accent); }
.deskstep:hover .deskstep__tick { width: 26px; }
.deskstep__text { font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.74); }
.deskstep__meta {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.deskpanel__actions { display: flex; align-items: center; gap: 16px; margin-top: 26px; }

.deskpanel__media {
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.05);
}
.deskpanel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deskpanel__hatch { position: absolute; inset: 0; background-size: 24px 24px; opacity: 0.2; }
.deskpanel__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.deskpanel__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.36) 0 1px, transparent 1px 9px); }
.deskpanel__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.stamp {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  padding: 7px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--plate-rgb), 0.9);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.facts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(var(--plate-rgb), 0.94);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.facts__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.facts__cell:last-child { border-right: none; }
.facts__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.facts__value { font-family: var(--serif); font-size: 19px; line-height: 1; }

/* ==========================================================================
   12. Agents
   ========================================================================== */

/* Five chips need 513px; the old 420px cap pushed `Lettings` onto a second row
   on all three homepages. No cap — the row sizes to its content and still
   wraps on its own once the column genuinely runs out. */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.filters__chip {
  padding: 11px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.66);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.filters__chip:hover { border-color: var(--accent); }
.filters__radio:checked + .filters__chip { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.filters__radio:focus-visible + .filters__chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.agents {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.3vw, 24px);
  margin-top: clamp(30px, 4.6vh, 46px);
}
.agent {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.agents:hover .agent { opacity: 0.72; }
.agents .agent:hover {
  opacity: 1;
  transform: translateY(-6px);
  border-color: var(--accent);
  color: inherit;
}

/* Filtering — "All" shows the first four, each filter shows its own type */
.agent--extra { display: none; }
.section:has(#af-resale:checked) .agent,
.section:has(#af-houses:checked) .agent,
.section:has(#af-new:checked) .agent,
.section:has(#af-rent:checked) .agent { display: none; }
.section:has(#af-resale:checked) .agent[data-type='resale'],
.section:has(#af-houses:checked) .agent[data-type='houses'],
.section:has(#af-new:checked) .agent[data-type='new'],
.section:has(#af-rent:checked) .agent[data-type='rent'] { display: flex; }

.agent__media {
  position: relative;
  /* Квадрат, как и сами портреты: они сняты 1:1, и коробка держит их
     пропорцию. Раньше стояли фиксированные 650px при ширине около 590 —
     `cover` срезал бока, и головы обрезало. Высота теперь считается от
     ширины колонки и растёт вместе с ней. */
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.agent__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.agent:hover .agent__media img { transform: scale(1.05); }
.agent__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.12) 0%, rgba(var(--photo-shade-rgb), 0) 40%, rgba(var(--photo-shade-rgb), 0.78) 100%);
}
.agent__lic {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(var(--plate-rgb), 0.5);
  background: rgba(var(--plate-rgb), 0.9);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.agent__lic-no { padding: 6px 9px; border-right: 1px solid rgba(var(--ink-rgb), 0.2); color: var(--accent); }
.agent__lic-yrs { padding: 6px 9px; color: rgba(var(--ink-rgb), 0.6); }
.agent__status {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(var(--photo-shade-rgb), 0.62);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.9);
}
.agent__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: block;
  color: var(--on-photo);
}
.agent__district {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.agent__name {
  display: block;
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1.04;
}
.agent__quote {
  display: block;
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding-top: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(var(--on-photo-rgb), 0.86);
  transition: height 0.4s var(--ease), opacity 0.35s ease, padding-top 0.4s var(--ease);
}
.agent:hover .agent__quote { height: 52px; padding-top: 10px; opacity: 1; }

.agent__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 20px;
}
.agent__speciality {
  min-height: 42px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.68);
}
.agent__rating { display: flex; align-items: center; gap: 12px; }
.agent__rating-bar { flex: 1; height: 3px; background: rgba(var(--ink-rgb), 0.12); }
.agent__rating-fill {
  display: block;
  height: 3px;
  background: rgba(var(--ink-rgb), 0.35);
  transition: background 0.3s ease;
}
.agent:hover .agent__rating-fill { background: var(--accent); }
.agent__rating-value { font-family: var(--serif); font-size: 20px; }
.agent__rating-count {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.agent__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.agent__stats { display: flex; gap: 22px; }
.agent__stat { display: flex; flex-direction: column; gap: 6px; }
.agent__stat-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.agent__stat-value { font-family: var(--serif); font-size: 19px; line-height: 1; }
.agent__cta { display: flex; gap: 10px; margin-top: 4px; }
.agent__contact {
  flex: 1;
  text-align: center;
  padding: 13px 10px;
  background: rgba(var(--ink-rgb), 0.08);
  color: rgba(var(--ink-rgb), 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.28s ease, color 0.28s ease;
}
.agent:hover .agent__contact { background: var(--accent); color: var(--on-accent); }
.agent__listings {
  padding: 13px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.7);
}

/* ==========================================================================
   13. Market insights
   ========================================================================== */

.journal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.4vw, 26px);
  margin-top: clamp(30px, 4.6vh, 46px);
}
.article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  transition: border-color 0.28s ease, transform 0.28s ease;
}
.article:hover { border-color: var(--accent); transform: translateY(-5px); color: inherit; }
.article__media {
  position: relative;
  display: block;
  height: clamp(200px, 24vh, 260px);
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.article__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.1), rgba(var(--photo-shade-rgb), 0.55));
}
.article__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: rgba(var(--plate-rgb), 0.92);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.article__num {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--serif);
  font-size: 40px;
  color: rgba(var(--on-photo-rgb), 0.85);
}
.article__body { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; }
.article__title { font-family: var(--serif); font-size: 29px; line-height: 1.12; }
.article__excerpt { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.66); }
.article__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.quarter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
}
.quarter__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 30px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}
.quarter__cell:last-child { border-right: none; }
.quarter__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.quarter__value { font-family: var(--serif); font-size: 30px; line-height: 1; }
.quarter__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }

/* ==========================================================================
   14. Alerts
   ========================================================================== */

.subscribe { display: flex; gap: 12px; align-items: center; }
.subscribe__input {
  width: 300px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  outline: none;
}
.subscribe__input::placeholder { color: rgba(var(--ink-rgb), 0.42); }
.subscribe .btn { padding: 17px 30px; }

.alerts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.alert-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 32px 28px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  transition: border-color 0.28s ease, transform 0.28s ease;
}
.alert-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.alert-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.alert-card__tag {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.alert-card__num { font-family: var(--serif); font-size: 22px; color: rgba(var(--ink-rgb), 0.35); }
.alert-card__title { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.1; }
.alert-card__text { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.66); }
.alert-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.alert-card__stat { font-family: var(--serif); font-size: 24px; }
.alert-card__stat-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.site-footer a:hover { color: var(--gold); }

.footer__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: clamp(26px, 3.4vh, 34px) var(--pad);
  border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.16);
}
.footer__cta-text { display: flex; align-items: center; gap: 26px; }
.footer__cta-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer__cta-line { font-family: var(--serif); font-size: clamp(22px, 1.7vw, 30px); line-height: 1; }
.footer__cta-actions { display: flex; gap: 12px; }

.footer__body { position: relative; padding: clamp(44px, 6vh, 66px) var(--pad) 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  gap: 46px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.16);
}
.logo--footer .logo__mark { font-size: 40px; -webkit-text-stroke-color: var(--gold); }
/* Подпись в подвале остаётся 12px — решение владельца. Исключение из
   правила 12px действует только на шапку и мобильную панель, где логотип
   стоит на фоне героя; в подвале он крупнее (mark 40px) и подпись под ним
   набрана обычным кеглем. */
.logo--footer .logo__sub {
  font-size: 12px;
  letter-spacing: 0.73em;
  white-space: nowrap;
  color: rgba(var(--footer-ink-rgb), 0.5);
}
.footer__about {
  margin-top: 22px;
  max-width: 320px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--footer-ink-rgb), 0.6);
}
.footer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--footer-ink-rgb), 0.16);
}
.footer__stats li { display: flex; flex-direction: column; gap: 6px; }
.footer__stat-value { font-family: var(--serif); font-size: 24px; line-height: 1; }
.footer__stat-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--footer-ink-rgb), 0.45);
}
.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--footer-ink-rgb), 0.25);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(var(--footer-ink-rgb), 0.72);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.socials__link:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.16); }

.footer__col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer__col-num { font-family: var(--serif); font-size: 15px; letter-spacing: 0; color: rgba(var(--footer-ink-rgb), 0.3); }
.footer__links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.footer__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(var(--footer-ink-rgb), 0.72);
  transition: color 0.22s ease, padding 0.22s ease;
}
.footer__links a:hover { color: var(--footer-ink); padding-left: 6px; }
.footer__count { font-size: 12px; letter-spacing: 0.14em; color: rgba(var(--footer-ink-rgb), 0.35); }

.footer__register {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--footer-ink-rgb), 0.45);
}
.footer__register-status { letter-spacing: 0.18em; color: var(--gold); }

.offices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(var(--footer-ink-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.16);
}
.office {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 28px 26px 0;
  border-right: 1px solid rgba(var(--footer-ink-rgb), 0.14);
  opacity: 0.72;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.offices:hover .office { opacity: 0.72; }
.offices .office:hover { opacity: 1; background: rgba(var(--gold-rgb), 0.08); }
.office__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.office:hover .office__mark { width: 100%; }
.office__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-right: 24px;
}
.office__city {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--footer-ink-rgb), 0.5);
}
.office__open {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.office__open--closed { color: rgba(var(--footer-ink-rgb), 0.4); }
.office__address { font-family: var(--serif); font-size: 21px; line-height: 1.24; }
.office__phone { font-size: 13px; font-weight: 300; color: rgba(var(--footer-ink-rgb), 0.6); }
.office__hours { font-size: 12px; font-weight: 300; color: rgba(var(--footer-ink-rgb), 0.45); }
.office__lic {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 24px 0 26px;
  border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--footer-ink-rgb), 0.5);
}
.legal { display: flex; gap: 26px; flex-wrap: wrap; }
.switches { display: flex; align-items: center; gap: 18px; }
.switch { display: flex; gap: 8px; }
.switch__btn {
  padding: 8px 13px;
  border: 1px solid rgba(var(--footer-ink-rgb), 0.22);
  background: transparent;
  color: rgba(var(--footer-ink-rgb), 0.6);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease;
}
.switch__input:checked + .switch__btn { background: rgba(var(--gold-rgb), 0.16); color: var(--gold); }
.switch__input:focus-visible + .switch__btn { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer__copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-top: 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--footer-ink-rgb), 0.4);
}

.wordmark {
  position: relative;
  margin-top: 34px;
  padding-bottom: 18px;
  font-family: var(--wordmark);
  font-size: clamp(140px, 13vw, 250px);
  line-height: 0.74;
  letter-spacing: 0.02em;
  text-align: center;
  color: transparent;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(var(--gold-rgb), 0.35);
}

/* ==========================================================================
   16. Modals
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal:target,
.modal.is-open { display: flex; animation: de-rise 0.28s ease-out both; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.72);
  backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  width: 460px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 42px 44px 38px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 3px;
  background: var(--panel);
  box-shadow: 0 40px 80px -30px rgba(var(--shadow-rgb), 0.35);
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 50%;
  color: rgba(var(--ink-rgb), 0.62);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.modal__close:hover { border-color: var(--accent); color: var(--accent); }
.modal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__title { margin-top: 12px; font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1.05; }
.modal__lede { margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.62); }
.modal__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.social-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.09); color: inherit; }
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.18);
}
.modal__form { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.field--line {
  gap: 7px;
  padding: 0;
  border-right: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
}
.field--line .field__label { font-size: 12px; color: rgba(var(--ink-rgb), 0.62); }
.field--line .field__control { padding: 8px 0; font-size: 15px; }
.modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.5);
}
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox--top { align-items: flex-start; margin-top: 18px; font-size: 12px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }
.checkbox input { accent-color: var(--accent); }
.checkbox--top input { margin-top: 3px; }
.modal__link { color: var(--accent); }
.modal__link--u { border-bottom: 1px solid rgba(var(--accent-rgb), 0.45); }
.modal__foot { margin-top: 22px; font-size: 12px; color: rgba(var(--ink-rgb), 0.62); }

/* ==========================================================================
   17. Data-driven sizes
   -----------------------------------------------------------------------------
   Sparkline bar heights and agent rating bars are data, not decoration, so they
   live on the element as a data attribute and are matched here. This keeps the
   markup free of inline styles and the values readable when editing content.
   ========================================================================== */

.spark__bar[data-h='26'] { height: 26%; }
.spark__bar[data-h='30'] { height: 30%; }
.spark__bar[data-h='33'] { height: 33%; }
.spark__bar[data-h='34'] { height: 34%; }
.spark__bar[data-h='36'] { height: 36%; }
.spark__bar[data-h='38'] { height: 38%; }
.spark__bar[data-h='40'] { height: 40%; }
.spark__bar[data-h='42'] { height: 42%; }
.spark__bar[data-h='44'] { height: 44%; }
.spark__bar[data-h='45'] { height: 45%; }
.spark__bar[data-h='46'] { height: 46%; }
.spark__bar[data-h='48'] { height: 48%; }
.spark__bar[data-h='50'] { height: 50%; }
.spark__bar[data-h='52'] { height: 52%; }
.spark__bar[data-h='53'] { height: 53%; }
.spark__bar[data-h='54'] { height: 54%; }
.spark__bar[data-h='55'] { height: 55%; }
.spark__bar[data-h='56'] { height: 56%; }
.spark__bar[data-h='57'] { height: 57%; }
.spark__bar[data-h='58'] { height: 58%; }
.spark__bar[data-h='60'] { height: 60%; }
.spark__bar[data-h='61'] { height: 61%; }
.spark__bar[data-h='62'] { height: 62%; }
.spark__bar[data-h='63'] { height: 63%; }
.spark__bar[data-h='64'] { height: 64%; }
.spark__bar[data-h='66'] { height: 66%; }
.spark__bar[data-h='68'] { height: 68%; }
.spark__bar[data-h='70'] { height: 70%; }
.spark__bar[data-h='72'] { height: 72%; }
.spark__bar[data-h='74'] { height: 74%; }
.spark__bar[data-h='76'] { height: 76%; }

.agent__rating-fill[data-rating='94'] { width: 94%; }
.agent__rating-fill[data-rating='96'] { width: 96%; }
.agent__rating-fill[data-rating='98'] { width: 98%; }
.agent__rating-fill[data-rating='100'] { width: 100%; }

/* ==========================================================================
   18. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   19. Home 2 (index-1) — featured strip
   ========================================================================== */

.section__inner--flat { padding: clamp(56px, 8vh, 84px) var(--pad) clamp(56px, 8vh, 88px); }
.section__title--xs { font-size: clamp(40px, 3.4vw, 62px); line-height: 0.98; }
.readout__value--md { font-size: 30px; }
.dial--sm { width: 84px; height: 84px; }
.dial--sm .dial__inner { width: 66px; height: 66px; font-size: 22px; }
.btn--outline {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 15px 28px;
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.strip {
  display: flex;
  gap: 20px;
  margin-top: clamp(30px, 4.4vh, 48px);
}
.strip__frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(420px, 56vh, 620px);
  overflow: hidden;
  border: 1px solid var(--line-faint);
  background: rgba(var(--ink-rgb), 0.06);
  transition: flex 0.5s var(--ease), border-color 0.3s ease;
}
/* First frame is open by default; hovering any frame moves the focus. */
.strip__frame:first-child { flex: 2.2 1 0; }
.strip:hover .strip__frame:first-child { flex: 1 1 0; }
.strip .strip__frame:hover { flex: 2.2 1 0; border-color: var(--accent); color: inherit; }

.strip__media { position: absolute; inset: 0; }
.strip__media img { width: 100%; height: 100%; object-fit: cover; }
.strip__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.45) 0%, rgba(var(--photo-shade-rgb), 0) 34%, rgba(var(--photo-shade-rgb), 0.82) 100%);
}
.strip__deal {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px 14px;
  background: rgba(var(--scrim-rgb), 0.92);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.strip__body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 26px;
  display: block;
  pointer-events: none;
  color: var(--on-photo);
}
.strip__kind {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.strip__title {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.08;
}
.strip__detail { display: block; opacity: 0; transition: opacity 0.4s ease; }
.strip__frame:first-child .strip__detail { opacity: 1; }
.strip:hover .strip__frame:first-child .strip__detail { opacity: 0; }
.strip__frame:hover .strip__detail { opacity: 1; }
.strip__location {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(var(--on-photo-rgb), 0.8);
}
.strip__specs {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.7);
}
.strip__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--on-photo-rgb), 0.28);
}
.strip__price { font-family: var(--serif); font-size: 26px; }
.strip__perm {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.7);
}

/* ==========================================================================
   20. Home 2 — new developments timeline
   -----------------------------------------------------------------------------
   The axis runs 2026.0 → 2028.5. Each row's bar position is that span expressed
   as a percentage, so the numbers live in modifier classes rather than inline
   styles and stay correct without JavaScript.
   ========================================================================== */

.dev { position: relative; }
.dev__axis {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr 170px;
  gap: 26px;
  margin-top: 32px;
}
.dev__axis > * { grid-column: 2; }
.dev__bands { position: absolute; inset: 0; display: flex; grid-column: 2; }
.dev__bands > span { flex: 1; border-right: 1px solid rgba(var(--ink-rgb), 0.07); }
.dev__bands > span:nth-child(odd) { background: rgba(var(--ink-rgb), 0.028); }
.dev__ticks {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dev__tick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dev__tick > span { width: 1px; height: 7px; background: rgba(var(--ink-rgb), 0.3); }
.dev__tick--tall > span { height: 11px; }

.dev__rows { position: relative; margin-top: 4px; }
.dev__today {
  position: absolute;
  top: -2px;
  bottom: 34px;
  left: calc(300px + 26px + (100% - 300px - 170px - 52px) * 0.3);
  width: 1px;
  background: var(--accent);
  pointer-events: none;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-indent: -50%;
}

.devrow {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr 170px;
  align-items: center;
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.13);
  transition: opacity 0.3s ease, background 0.25s ease;
}
.dev__rows:hover .devrow { opacity: 0.58; }
.dev__rows .devrow:hover,
.dev__rows:not(:hover) .devrow:first-child {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.07);
  color: inherit;
}

.devrow__id { display: flex; align-items: center; gap: 16px; }
.devrow__dial {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: conic-gradient(rgba(var(--ink-rgb), 0.32) 0 var(--built, 0%), rgba(var(--ink-rgb), 0.14) var(--built, 0%) 100%);
}
.devrow:hover .devrow__dial,
.dev__rows:not(:hover) .devrow:first-child .devrow__dial {
  background: conic-gradient(var(--accent) 0 var(--built, 0%), rgba(var(--ink-rgb), 0.14) var(--built, 0%) 100%);
}
.devrow__dial-inner {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-alt);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.devrow__names { min-width: 0; }
.devrow__name { display: block; font-family: var(--serif); font-size: 29px; line-height: 1.06; }
.devrow__loc { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; color: var(--ink-body); }

.devrow__track { position: relative; display: block; height: 34px; }
.devrow__rail {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.12);
}
.devrow__bar {
  position: absolute;
  top: 10px;
  left: var(--bar-left, 0%);
  width: var(--bar-width, 40%);
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  background: rgba(var(--ink-rgb), 0.04);
}
.devrow__fill {
  display: block;
  height: 11px;
  width: var(--built, 0%);
  background: rgba(var(--ink-rgb), 0.28);
  transition: background 0.3s ease;
}
.devrow:hover .devrow__fill,
.dev__rows:not(:hover) .devrow:first-child .devrow__fill { background: var(--accent); }
.devrow__ms {
  position: absolute;
  top: 12px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.devrow__ms.is-built { background: var(--accent); }
.devrow__keys,
.devrow__stage {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.devrow__keys {
  top: -7px;
  left: var(--keys-left, 50%);
  transform: translateX(-50%);
  padding: 0 5px;
  background: var(--bg-alt);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-body);
}
.devrow__stage {
  top: 27px;
  left: var(--bar-left, 0%);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.devrow:hover .devrow__keys,
.devrow:hover .devrow__stage,
.dev__rows:not(:hover) .devrow:first-child .devrow__keys,
.dev__rows:not(:hover) .devrow:first-child .devrow__stage { opacity: 1; }

.devrow__price { text-align: right; }
.devrow__from { display: block; font-family: var(--serif); font-size: 22px; }
.devrow__units {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Per-project geometry on the 2026.0—2028.5 axis */
.devrow--1 { --bar-left: 4%; --bar-width: 60%; --keys-left: 64%; --built: 38%; }
.devrow--2 { --bar-left: 0%; --bar-width: 44%; --keys-left: 44%; --built: 62%; }
.devrow--3 { --bar-left: 20%; --bar-width: 60%; --keys-left: 80%; --built: 14%; }
.devrow--4 { --bar-left: 12%; --bar-width: 64%; --keys-left: 76%; --built: 26%; }
.devrow--5 { --bar-left: 24%; --bar-width: 72%; --keys-left: 96%; --built: 8%; }

.devrow--1 .devrow__ms--a { left: 11.2%; } .devrow--1 .devrow__ms--b { left: 24.4%; }
.devrow--1 .devrow__ms--c { left: 41.2%; } .devrow--1 .devrow__ms--d { left: 56.8%; }
.devrow--2 .devrow__ms--a { left: 5.3%; }  .devrow--2 .devrow__ms--b { left: 15%; }
.devrow--2 .devrow__ms--c { left: 27.3%; } .devrow--2 .devrow__ms--d { left: 38.7%; }
.devrow--3 .devrow__ms--a { left: 27.2%; } .devrow--3 .devrow__ms--b { left: 40.4%; }
.devrow--3 .devrow__ms--c { left: 57.2%; } .devrow--3 .devrow__ms--d { left: 72.8%; }
.devrow--4 .devrow__ms--a { left: 19.7%; } .devrow--4 .devrow__ms--b { left: 33.8%; }
.devrow--4 .devrow__ms--c { left: 51.7%; } .devrow--4 .devrow__ms--d { left: 68.3%; }
.devrow--5 .devrow__ms--a { left: 32.6%; } .devrow--5 .devrow__ms--b { left: 48.5%; }
.devrow--5 .devrow__ms--c { left: 68.6%; } .devrow--5 .devrow__ms--d { left: 87.4%; }

.dev__actions { display: flex; gap: 14px; }

/* ==========================================================================
   21. Home 2 — three routes
   ========================================================================== */

.routes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  padding: clamp(40px, 5.6vh, 48px) clamp(28px, 3.2vw, 60px) 22px;
}
.routes__totals { display: flex; align-items: flex-end; gap: 30px; }
.routes__totals .readout__value { transition: color 0.3s ease; }
.routes__rail { display: flex; gap: 3px; padding: 0 clamp(28px, 3.2vw, 60px) 18px; }
.routes__seg {
  flex: 1 1 0;
  height: 2px;
  background: rgba(var(--ink-rgb), 0.22);
  transition: flex 0.5s var(--ease), background 0.3s ease;
}
.routes__seg:first-child { flex: 1.7 1 0; background: var(--accent); }

/* Same horizontal inset as the head and the rail above, so each rail segment
   sits exactly over the card it belongs to. */
.routes {
  position: relative;
  display: flex;
  min-height: clamp(520px, 62vh, 640px);
  padding: 0 clamp(28px, 3.2vw, 60px);
}
/* The rule above the band is inset too, so it stops where the cards stop. */
.routes::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(28px, 3.2vw, 60px);
  right: clamp(28px, 3.2vw, 60px);
  height: 1px;
  background: rgba(var(--ink-rgb), 0.16);
}
.route:last-child { border-right: none; }
.route {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  color: var(--ink);
  transition: flex 0.55s var(--ease);
}
.route:first-child { flex: 1.7 1 0; }
.routes:hover .route:first-child { flex: 1 1 0; }
.routes .route:hover { flex: 1.7 1 0; color: var(--ink); }

.route__media {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.06);
  transform: scale(1);
  transition: transform 0.7s var(--ease);
}
.route__media img { width: 100%; height: 100%; object-fit: cover; }
.route:first-child .route__media { transform: scale(1.06); }
.routes:hover .route:first-child .route__media { transform: scale(1); }
.route:hover .route__media { transform: scale(1.06); }
.route__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.55) 0%, rgba(var(--scrim-rgb), 0.15) 38%, rgba(var(--scrim-rgb), 0.94) 100%);
}
.route__hatch {
  position: absolute;
  inset: 0;
  background-size: 26px 26px;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.route:first-child .route__hatch { opacity: 0.12; }
.routes:hover .route:first-child .route__hatch { opacity: 0.3; }
.route:hover .route__hatch { opacity: 0.12; }
.route__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--scrim-rgb), 0.5) 0 1px, transparent 1px 9px); }
.route__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--scrim-rgb), 0.45) 0 1px, transparent 1px 10px); }
.route__hatch--3 { background-image: radial-gradient(rgba(var(--scrim-rgb), 0.5) 1px, transparent 1.6px); }

.route__top {
  position: absolute;
  top: 24px;
  left: 26px;
  right: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.route__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.route__num { padding: 5px 11px; background: rgba(var(--scrim-rgb), 0.75); color: rgba(var(--ink-rgb), 0.8); }
.route__count {
  padding: 5px 11px;
  background: rgba(var(--scrim-rgb), 0.75);
  color: rgba(var(--ink-rgb), 0.7);
  transition: background 0.3s ease, color 0.3s ease;
}
.route:first-child .route__count { background: var(--accent); color: var(--on-accent); }
.routes:hover .route:first-child .route__count { background: rgba(var(--scrim-rgb), 0.75); color: rgba(var(--ink-rgb), 0.7); }
.route:hover .route__count { background: var(--accent); color: var(--on-accent); }
.route__fig {
  font-family: var(--serif);
  font-size: 54px;
  line-height: 0.8;
  color: rgba(var(--ink-rgb), 0.32);
  transition: font-size 0.5s var(--ease), color 0.4s ease;
}
.route:first-child .route__fig { font-size: 84px; color: var(--accent); }
.routes:hover .route:first-child .route__fig { font-size: 54px; color: rgba(var(--ink-rgb), 0.32); }
.route:hover .route__fig { font-size: 84px; color: var(--accent); }

.route__corners {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 12px;
  right: 12px;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--ink-rgb), 0.5), rgba(var(--ink-rgb), 0.5)) 0 0 / 11px 1px no-repeat,
    linear-gradient(rgba(var(--ink-rgb), 0.5), rgba(var(--ink-rgb), 0.5)) 0 0 / 1px 11px no-repeat,
    linear-gradient(rgba(var(--ink-rgb), 0.5), rgba(var(--ink-rgb), 0.5)) 100% 100% / 11px 1px no-repeat,
    linear-gradient(rgba(var(--ink-rgb), 0.5), rgba(var(--ink-rgb), 0.5)) 100% 100% / 1px 11px no-repeat;
}

.route__body { position: relative; padding: 0 30px 32px; }
.route__title { display: block; font-family: var(--serif); font-size: 44px; line-height: 1.02; }
.route__more {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.4s ease;
}
.route:first-child .route__more { max-height: 300px; opacity: 1; }
.routes:hover .route:first-child .route__more { max-height: 0; opacity: 0; }
.route:hover .route__more { max-height: 300px; opacity: 1; }
.route__text {
  display: block;
  margin-top: 13px;
  max-width: 430px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.78);
}
.route__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 160px));
  margin-top: 20px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.22);
}
.route__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 16px 13px 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
}
.route__fact-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.route__fact-value { font-family: var(--serif); font-size: 20px; line-height: 1; }
.route__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 26px;
  border: 1px solid rgba(var(--ink-rgb), 0.4);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.route:first-child .route__cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.routes:hover .route:first-child .route__cta { background: transparent; color: var(--ink); border-color: rgba(var(--ink-rgb), 0.4); }
.route:hover .route__cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ==========================================================================
   22. Home 2 — closed deals
   ========================================================================== */

.cases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 46px;
}
.case {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.cases:hover .case { opacity: 0.72; }
.cases .case:hover { opacity: 1; transform: translateY(-5px); border-color: var(--accent); }
.case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.case__deal { color: var(--accent); }
.case__body { margin: 0; padding: 34px 30px 28px; }
.case__mark { display: block; font-family: var(--serif); font-size: 46px; line-height: 1; color: rgba(var(--accent-rgb), 0.5); }
.case__quote {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 25px;
  line-height: 1.42;
}
.case__author { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.case__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--ink-rgb), 0.08);
}
.case__name { display: block; font-size: 15px; font-weight: 500; }
.case__role {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.case__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}
.case__fact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}
.case__fact:last-child { border-right: none; }
.case__fact-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.case__fact-value { font-family: var(--serif); font-size: 20px; line-height: 1; }
.case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 26px 17px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.case__rating {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  transition: color 0.3s ease;
}
.case:hover .case__rating { color: var(--accent); }

/* ==========================================================================
   23. Home 3 (index-2) — route cards with market charts
   ========================================================================== */

.section__inner--wide { padding: 88px 72px 84px; }
.section__head--deep { padding-bottom: 40px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.18); }
.section__divider { width: 1px; height: 46px; background: var(--line); }
.readout__value--accent { color: var(--accent); }
.readout__value--xl { font-size: 46px; }

.r3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.r3__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.r3:hover .r3__card { opacity: 0.68; }
.r3 .r3__card:hover { opacity: 1; transform: translateY(-5px); border-color: var(--accent); color: inherit; }

.r3__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.r3__tag { color: var(--accent); }

.r3__plot {
  position: relative;
  display: block;
  height: 210px;
  padding: 24px 26px 22px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.035);
}
.r3__hatch {
  position: absolute;
  inset: 0;
  background-size: 22px 22px;
  opacity: 0.18;
  transition: opacity 0.35s ease;
}
.r3__card:hover .r3__hatch { opacity: 0.4; }
.r3__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.r3__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.36) 0 1px, transparent 1px 9px); }
.r3__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.crop--diag {
  --crop-c: rgba(var(--ink-rgb), 0.35);
  inset: 12px;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 11px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 11px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 11px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 1px 11px no-repeat;
}
.r3__plot-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.r3__plot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.r3__plot-note { color: rgba(var(--ink-rgb), 0.45); transition: color 0.3s ease; }
.r3__card:hover .r3__plot-note { color: var(--accent); }

/* Chart: bars carry their height as data, the inactive state scales the whole set */
.chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 104px;
}
.chart__bar {
  flex: 1;
  height: 40%;
  transform: scaleY(0.82);
  transform-origin: bottom;
  background: rgba(var(--ink-rgb), 0.22);
  transition: background 0.3s ease, transform 0.45s var(--ease);
}
.chart__bar--peak { background: rgba(var(--ink-rgb), 0.45); }
.r3__card:hover .chart__bar { transform: scaleY(1); background: rgba(var(--ink-rgb), 0.34); }
.r3__card:hover .chart__bar--peak { background: var(--accent); }
.chart__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.16);
  transition: background 0.3s ease;
}
.r3__card:hover .chart__line { background: rgba(var(--accent-rgb), 0.5); }
.chart--line-26 .chart__line, .chart--line-26 .chart__marker { top: 26%; }
.chart--line-48 .chart__line, .chart--line-48 .chart__marker { top: 48%; }
.chart--line-62 .chart__line, .chart--line-62 .chart__marker { top: 62%; }
.chart__marker {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border: 1px solid rgba(var(--ink-rgb), 0.45);
  border-radius: 50%;
  background: var(--panel);
  transition: border-color 0.3s ease;
}
.r3__card:hover .chart__marker { border-color: var(--accent); }
.chart__marker--53 { left: 53%; }
.chart__marker--96 { left: 96%; }
.chart__marker--38 { left: 38%; }

.chart__bar[data-h='12'] { height: 12%; } .chart__bar[data-h='18'] { height: 18%; }
.chart__bar[data-h='20'] { height: 20%; } .chart__bar[data-h='22'] { height: 22%; }
.chart__bar[data-h='24'] { height: 24%; } .chart__bar[data-h='26'] { height: 26%; }
.chart__bar[data-h='28'] { height: 28%; } .chart__bar[data-h='30'] { height: 30%; }
.chart__bar[data-h='32'] { height: 32%; } .chart__bar[data-h='34'] { height: 34%; }
.chart__bar[data-h='36'] { height: 36%; } .chart__bar[data-h='38'] { height: 38%; }
.chart__bar[data-h='42'] { height: 42%; } .chart__bar[data-h='44'] { height: 44%; }
.chart__bar[data-h='45'] { height: 45%; } .chart__bar[data-h='46'] { height: 46%; }
.chart__bar[data-h='48'] { height: 48%; } .chart__bar[data-h='52'] { height: 52%; }
.chart__bar[data-h='56'] { height: 56%; } .chart__bar[data-h='58'] { height: 58%; }
.chart__bar[data-h='62'] { height: 62%; } .chart__bar[data-h='64'] { height: 64%; }
.chart__bar[data-h='66'] { height: 66%; } .chart__bar[data-h='70'] { height: 70%; }
.chart__bar[data-h='72'] { height: 72%; } .chart__bar[data-h='84'] { height: 84%; }
.chart__bar[data-h='88'] { height: 88%; } .chart__bar[data-h='96'] { height: 96%; }

.r3__axis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.r3__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 22px; }
.r3__title { font-family: var(--serif); font-size: 34px; line-height: 1.04; }
.r3__text { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-body); }
.r3__facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.r3__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.r3__fact:last-child { border-right: none; }
.r3__fact-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.r3__fact-value { font-family: var(--serif); font-size: 19px; line-height: 1; }
.r3__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 24px 19px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  transition: background 0.3s ease, color 0.3s ease;
}
.r3__card:hover .r3__cta { background: rgba(var(--accent-rgb), 0.09); color: var(--accent); }

/* ==========================================================================
   24. Home 3 — the four checks, read as a ledger
   ========================================================================== */

.section__title--ledger { font-size: 76px; line-height: 0.98; letter-spacing: -0.01em; }
.ledger { position: relative; margin-top: 8px; }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr 1.15fr 190px;
  align-items: start;
  gap: 40px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  transition: background 0.3s ease, padding 0.3s ease;
}
.ledger:hover .ledger__row:hover,
.ledger:not(:hover) .ledger__row:last-child {
  background: rgba(var(--accent-rgb), 0.06);
  padding: 40px 24px;
  color: inherit;
}
.ledger__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  align-self: stretch;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.55);
  transition: color 0.3s ease;
}
.ledger__row:hover .ledger__num,
.ledger:not(:hover) .ledger__row:last-child .ledger__num { color: var(--accent); }
.ledger__rule { width: 1px; flex: 1; min-height: 20px; background: rgba(var(--ink-rgb), 0.18); }
.ledger__title { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.14; }
.ledger__copy { display: block; font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.68); }
.ledger__detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: height 0.35s var(--ease), opacity 0.3s ease, margin-top 0.35s ease;
}
.ledger__row:hover .ledger__detail,
.ledger:not(:hover) .ledger__row:last-child .ledger__detail { height: 20px; margin-top: 14px; opacity: 1; }
.ledger__detail-rule { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.ledger__stat { display: block; text-align: right; }
.ledger__stat-value { display: block; font-family: var(--serif); font-size: 30px; }
.ledger__stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.ledger__bar { display: block; height: 2px; margin-top: 12px; background: rgba(var(--ink-rgb), 0.1); }
.ledger__fill { display: block; height: 2px; background: var(--accent); transition: width 0.5s var(--ease); }
.ledger__fill--100 { width: 100%; }
.ledger__fill--94 { width: 94%; }
.ledger__fill--82 { width: 82%; }
.ledger__fill--64 { width: 64%; }

/* ==========================================================================
   25. Home 3 — featured properties, split viewer
   ========================================================================== */

.viewer {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 860px;
  background: var(--bg);
}
.viewer__list {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(50px, 7vh, 84px) clamp(28px, 3vw, 60px) clamp(50px, 7vh, 80px) var(--pad);
  overflow: hidden;
}
.viewer__list > * { position: relative; }
.viewer__rows {
  display: flex;
  flex-direction: column;
  margin-top: 54px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}
.vrow {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  transition: padding 0.4s var(--ease), background 0.3s ease;
}
.viewer__rows:hover .vrow:hover,
.viewer__rows:not(:hover) .vrow:first-child {
  padding: 28px 0 28px 22px;
  background: rgba(var(--accent-rgb), 0.06);
  color: inherit;
}
.vrow__num {
  width: 30px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.3s ease;
}
.vrow:hover .vrow__num,
.viewer__rows:not(:hover) .vrow:first-child .vrow__num { color: var(--accent); }
.vrow__main { flex: 1; min-width: 0; }
.vrow__title {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.04;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.35s ease;
}
.vrow__price {
  font-family: var(--serif);
  font-size: 26px;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.35s ease;
}
.vrow:hover .vrow__title, .vrow:hover .vrow__price,
.viewer__rows:not(:hover) .vrow:first-child .vrow__title,
.viewer__rows:not(:hover) .vrow:first-child .vrow__price { color: var(--ink); }
.vrow__meta {
  display: block;
  margin-top: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.56);
  transition: height 0.35s ease, opacity 0.3s ease;
}
.vrow:hover .vrow__meta,
.viewer__rows:not(:hover) .vrow:first-child .vrow__meta { height: 20px; opacity: 1; }

.viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: auto;
  padding-top: 40px;
}
.viewer__dial-wrap { display: flex; align-items: center; gap: 12px; }
.dial--xs { width: 34px; height: 34px; }
.dial--xs .dial__inner { width: 26px; height: 26px; font-family: var(--sans); font-size: 12px; }

.viewer__frame { position: relative; overflow: hidden; background: rgba(var(--ink-rgb), 0.06); }
.viewer__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.55s ease, transform 0.7s var(--ease);
}
.viewer__slide.is-active { opacity: 1; transform: scale(1.04); }
.viewer__slide img { width: 100%; height: 100%; object-fit: cover; }
.viewer__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.15) 0%, rgba(var(--photo-shade-rgb), 0) 40%, rgba(var(--photo-shade-rgb), 0.72) 100%);
}
.viewer__top {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-photo);
}
.viewer__deal { padding: 5px 10px; background: rgba(var(--photo-shade-rgb), 0.55); }
.viewer__count {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(var(--photo-shade-rgb), 0.55);
}
.viewer__tick { width: 34px; height: 1px; background: var(--on-photo-accent); transition: width 0.4s ease; }
.viewer__caption {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  pointer-events: none;
  color: var(--on-photo);
}
.viewer__kind {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.viewer__title { display: block; margin-top: 12px; font-family: var(--serif); font-size: 46px; line-height: 1.04; }
.viewer__specs {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.75);
}
.viewer__price-block { text-align: right; white-space: nowrap; }
.viewer__price { display: block; font-family: var(--serif); font-size: 32px; }
.viewer__perm {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.75);
}

/* ==========================================================================
   26. Home 3 — reviews block
   ========================================================================== */

.quotes {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  width: 100%;
  min-height: 660px;
  overflow: hidden;
  background: var(--quote-bg);
  color: var(--quote-ink);
}
.blueprint--quote {
  background-image: linear-gradient(0deg, rgba(var(--quote-ink-rgb), 0.03) 1px, transparent 1px);
  background-size: 110px 110px;
}
.quotes__main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(50px, 7vh, 78px) clamp(28px, 3vw, 60px) clamp(44px, 6vh, 66px) var(--pad);
}
.quotes .eyebrow__note { color: rgba(var(--quote-ink-rgb), 0.45); }

.quotes__stage { position: relative; margin-top: 32px; }
.quotes__mark {
  position: absolute;
  top: -18px;
  left: -6px;
  font-family: var(--serif);
  font-size: clamp(84px, 6.5vw, 120px);
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.22);
  pointer-events: none;
}
.quote {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.quote.is-active { position: relative; opacity: 1; visibility: visible; }
.quote__text {
  position: relative;
  max-width: 880px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 2.7vw, 50px);
  line-height: 1.26;
}
.quote__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.quote__person { display: flex; align-items: center; gap: 16px; }
.quote__avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--quote-ink-rgb), 0.08);
}
.quote__name { display: block; font-size: 16px; font-weight: 500; }
.quote__role {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.5);
}
.quote__verified {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.5);
}
.quote__rating { font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.quote__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  border: 1px solid rgba(var(--quote-ink-rgb), 0.18);
}
.quote__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-right: 1px solid rgba(var(--quote-ink-rgb), 0.14);
}
.quote__cell:last-child { border-right: none; }
.quote__cell-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.45);
}
.quote__cell-value { font-family: var(--serif); font-size: 22px; line-height: 1; }

.quotes__dots { display: flex; align-items: center; gap: 14px; margin-top: 46px; }
.quotes__dot {
  position: relative;
  width: 84px;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(var(--quote-ink-rgb), 0.2);
  cursor: pointer;
}
.quotes__dot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
}
.quotes__dot.is-done .quotes__dot-fill { width: 100%; }
.quotes__dot.is-active .quotes__dot-fill { width: 100%; transition: width 6s linear; }
.quotes.is-paused .quotes__dot.is-active .quotes__dot-fill { width: 40%; transition: width 0.3s ease; }
.quotes__counter {
  margin-left: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.4);
}

.quotes__side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: clamp(50px, 7vh, 78px) var(--pad) clamp(44px, 6vh, 66px) clamp(28px, 3vw, 60px);
  border-left: 1px solid rgba(var(--quote-ink-rgb), 0.16);
  background: var(--quote-panel);
}
.quotes__count-row { display: flex; align-items: baseline; gap: 14px; }
.quotes__count-value { font-family: var(--serif); font-size: clamp(64px, 5vw, 92px); line-height: 0.94; }
.quotes__count-today {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.quotes__count-label {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.5);
}
.quotes__bars { display: flex; flex-direction: column; gap: 14px; }
.qbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.qbar__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.5);
}
.qbar__value { font-family: var(--serif); font-size: 22px; }
.qbar__track { display: block; height: 2px; margin-top: 8px; background: rgba(var(--quote-ink-rgb), 0.14); }
.qbar__fill { display: block; height: 2px; background: var(--accent); transition: width 0.8s var(--ease); }
.qbar__fill--97 { width: 97%; }
.qbar__fill--82 { width: 82%; }
.qbar__fill--78 { width: 78%; }
.qbar__fill--31 { width: 31%; }

.qfile { border: 1px solid rgba(var(--quote-ink-rgb), 0.2); background: var(--quote-card); }
.qfile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(var(--quote-ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--quote-ink-rgb), 0.5);
}
.qfile__deal { color: var(--accent); }
.qfile__body { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.qfile__img {
  width: 74px;
  height: 56px;
  flex: 0 0 74px;
  object-fit: cover;
  background: rgba(var(--quote-ink-rgb), 0.06);
}
.qfile__name { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.1; }
.qfile__meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(var(--quote-ink-rgb), 0.55);
}
.quotes__cta { align-self: flex-start; color: var(--on-accent); }
.quotes__cta:hover { background: var(--quote-ink); color: var(--quote-bg); }

/* ==========================================================================
   27. Preloader
   -----------------------------------------------------------------------------
   Shown only when scripting is available (the .js class is set by the inline
   head script). With JavaScript off the overlay never renders, so the page is
   never left covered — and the markup below stays out of the way either way.
   ========================================================================== */

.preloader { display: none; }

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.js .preloader.is-done {
  opacity: 0;
  visibility: hidden;
}
.js.is-loading,
.js.is-loading body { overflow: hidden; }

.preloader__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--grid-line-a) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line-b) 1px, transparent 1px);
  background-size: 120px 120px;
}
.crop--preloader {
  --crop-c: rgba(var(--ink-rgb), 0.28);
  --crop-c2: rgba(var(--ink-rgb), 0.28);
  inset: clamp(20px, 3vw, 44px);
}

.preloader__inner {
  position: relative;
  width: min(420px, 70vw);
  text-align: center;
  animation: de-rise 0.7s var(--ease-out) both;
}
.preloader__mark {
  font-family: var(--wordmark);
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--accent);
}
.preloader__sub {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  text-indent: 0.62em;
  color: rgba(var(--ink-rgb), 0.5);
}
.preloader__bar {
  height: 1px;
  margin-top: clamp(28px, 4vh, 44px);
  background: rgba(var(--ink-rgb), 0.18);
}
.preloader__fill {
  display: block;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.25s linear;
}
.preloader__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.preloader__count { font-family: var(--serif); font-size: 16px; letter-spacing: 0.04em; color: var(--accent); }

/* ==========================================================================
   28. Responsive
   -----------------------------------------------------------------------------
   The design was drawn desktop-first at 1180px and up. Everything below that
   is laid out here, in three steps: 1180 (relax the widest grids), 1024 (the
   navigation becomes a drawer and the hero stops being one viewport tall) and
   600 (single column throughout).

   Touch devices are handled separately from width: anything the desktop design
   only reveals on hover is shown permanently under `(hover: none)`, otherwise
   half the copy would be unreachable on a phone.
   ========================================================================== */

/* ==========================================================================
   29. Listing page — page header band
   ========================================================================== */

.pagehead { padding: clamp(8px, 1.2vh, 12px) var(--pad-hero) 0; }
.crumbs ol {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }
.crumbs [aria-current] { color: var(--accent); }

.pagehead__band {
  position: relative;
  margin-top: 8px;
  padding: 8px 0 40px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
}
.pagehead__mark {
  position: absolute;
  right: 0;
  top: -30px;
  width: 1017px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--wordmark);
  font-size: clamp(90px, 11vw, 190px);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.09);
}
.pagehead__row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.pagehead__lead { position: relative; top: 8px; }
.pagehead__title {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(38px, 3.4vw, 58px);
  font-weight: 400;
  line-height: 1;
}
.pagehead__sub { margin-top: 12px; font-size: 14px; font-weight: 300; color: var(--ink-body); }
.pagehead__stats { display: flex; gap: 26px; position: relative; top: -25px; }
.pagehead__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 26px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.18);
}
.pagehead__stats li:last-child { padding-right: 0; border-right: none; }
.pagehead__stat-value { font-family: var(--serif); font-size: 30px; line-height: 1; }
.pagehead__stat-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   30. Listing page — search panel and filter chips
   ========================================================================== */

.listing { padding: clamp(24px, 3.4vh, 40px) var(--pad-hero) clamp(40px, 6vh, 64px); }

.searchpanel {
  margin-bottom: 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.searchpanel__tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}
.searchpanel__tab {
  padding: 15px 30px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
  color: rgba(var(--ink-rgb), 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease;
}
.searchpanel__tab:hover { color: var(--accent); }
.searchpanel__radio:checked + .searchpanel__tab { background: var(--accent); color: var(--on-accent); }
.searchpanel__radio:focus-visible + .searchpanel__tab { outline: 2px solid var(--accent); outline-offset: -3px; }
.searchpanel__note {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.searchpanel__fields {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 0.9fr auto;
  /* The last cell holds Refine and the button; on the map page Refine is a
     full field and needs the room. */
  align-items: end;
  gap: 24px;
  padding: 24px 26px 26px;
}
.searchpanel__fields .field { gap: 8px; }
.searchpanel__fields .field__control { font-size: 14px; padding: 7px 0; }
.searchpanel__actions { display: flex; align-items: center; gap: 14px; }
.searchpanel__more {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.searchpanel__actions .btn { padding: 15px 32px; }

/* The Refine dropdown took the modal's place here (§0v). It is a FIELD, so it
   gets a field's width: at the 129px the old text link left it, `Nothing
   applied` sat against its own chevron. The cell grows and the trigger fills
   what it is given. */
.searchpanel__actions--refine { align-items: end; gap: 20px; }
.searchpanel__actions--refine .fsfield--refine { flex: 1 1 auto; min-width: 190px; }
.searchpanel__actions--refine .fsrefine { width: 100%; }
.searchpanel__actions--refine .searchpanel__go { margin: 0; flex: 0 0 auto; }

.chipsbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
}
.chipsbar__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gchip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  color: rgba(var(--ink-rgb), 0.66);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.gchip:hover { border-color: var(--accent); color: var(--accent); }
.gchip__input:checked + .gchip { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.gchip__input:focus-visible + .gchip { outline: 2px solid var(--accent); outline-offset: 2px; }
.chipsbar__meta {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chipsbar__sort .field__control {
  min-width: 168px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

/* ==========================================================================
   31. Listing page — card grid
   ========================================================================== */

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.gcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.25s ease, transform 0.3s var(--ease);
}
.gcard:hover,
.gcard:focus-visible { border-color: var(--accent); transform: translateY(-4px); color: inherit; }
.gcard[hidden] { display: none; }

.gcard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.gcard__deal { color: var(--accent); }
.gcard__media {
  position: relative;
  display: block;
  /* 430px по просьбе владельца, вместо прежних 210. Правило общее для
     четырёх страниц сеток — blueprint-view, grid-4, grid-sidebar-3 и -4. */
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.gcard__media img { width: 100%; height: 100%; object-fit: cover; }
.gcard__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 76px;
  height: 76px;
  background-size: 20px 20px;
  opacity: 0.35;
}
.gcard__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.gcard__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.35) 0 1px, transparent 1px 9px); }
.gcard__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.gcard__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.5) 0 1px, transparent 1px 7px); }
.gcard__crop {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 11px;
  height: 11px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.85);
  border-top: 1px solid rgba(var(--ink-rgb), 0.85);
}
.gcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 4px; }
.gcard__kind {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.gcard__title { font-family: var(--serif); font-size: 23px; line-height: 1.14; }
.gcard__location { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.58); }
.gcard__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.gcard__fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.gcard__fact:last-child { border-right: none; }
.gcard__fact-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.gcard__fact-value { font-family: var(--serif); font-size: 17px; line-height: 1; }
.gcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.gcard__price { font-family: var(--serif); font-size: 22px; }
.gcard__perm {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: clamp(56px, 9vh, 96px) 24px;
  border: 1px dashed var(--line);
  text-align: center;
}
.empty[hidden] { display: none; }
.empty__label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.empty__title { font-family: var(--serif); font-size: clamp(28px, 2.4vw, 40px); line-height: 1.1; }
.empty__text { max-width: 460px; font-size: 14px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4.6vh, 52px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}
.pager__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pager__controls { display: flex; align-items: center; gap: 8px; }
.pager__numbers { display: flex; align-items: center; gap: 8px; }
.pager__step,
.pager__num {
  height: 40px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.pager__step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pager__step:hover { border-color: var(--accent); color: var(--accent); }
.pager__step--next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager__step--next:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pager__step[disabled] {
  color: var(--ink-muted);
  cursor: default;
  background: transparent;
  border-color: rgba(var(--ink-rgb), 0.22);
}
.pager__step[disabled]:hover { border-color: rgba(var(--ink-rgb), 0.22); color: var(--ink-muted); }
.pager__num {
  width: 40px;
  font-family: var(--serif);
  font-size: 16px;
}
.pager__num:hover { border-color: var(--accent); color: var(--accent); }
.pager__num.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pager__gap { color: var(--ink-muted); padding: 0 2px; }

/* ==========================================================================
   32. Listing page — filters sheet
   ========================================================================== */

.modal--filters .modal__backdrop { background: rgba(var(--scrim-rgb), 0.82); }
.fsheet {
  position: relative;
  width: 1300px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: var(--panel);
  box-shadow: 0 60px 110px -46px rgba(var(--shadow-rgb), 0.85);
  animation: de-rise 0.32s var(--ease) both;
}
.fsheet__crop {
  --crop-c: rgba(var(--accent-rgb), 0.5);
  --crop-c2: rgba(var(--accent-rgb), 0.5);
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 13px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 1px 13px no-repeat;
}
.fsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 32px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
}
.fsheet__id { display: flex; align-items: center; gap: 24px; }
.fsheet .dial--sm { width: 62px; height: 62px; }
.fsheet .dial--sm .dial__inner { width: 48px; height: 48px; font-size: 17px; background: var(--panel); }
.fsheet__title { margin-top: 9px; font-family: var(--serif); font-size: 33px; font-weight: 400; line-height: 1.02; }

.fsheet__deals { display: flex; border-bottom: 1px solid rgba(var(--ink-rgb), 0.18); }
.fdeal {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 24px 15px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
  color: rgba(var(--ink-rgb), 0.55);
  cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease;
}
.fdeal__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.fdeal__label { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.fdeal__count { font-family: var(--serif); font-size: 19px; color: rgba(var(--ink-rgb), 0.4); }
.fdeal__input:checked + .fdeal { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.fdeal__input:checked + .fdeal .fdeal__mark { width: 100%; }
.fdeal__input:checked + .fdeal .fdeal__count { color: var(--ink); }
.fdeal__input:focus-visible + .fdeal { outline: 2px solid var(--accent); outline-offset: -3px; }

.fsheet__cols { display: grid; grid-template-columns: 1fr 1.28fr 1fr 1.1fr; }
.fcol {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 24px 24px 26px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}
.fcol:last-child { border-right: none; }
.fcol__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.fcol__num { font-family: var(--serif); font-size: 14px; letter-spacing: 0; color: rgba(var(--ink-rgb), 0.35); }
.fcol__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fcol__field { margin-top: 6px; }

.fchip { display: inline-flex; }
.fchip > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: rgba(var(--ink-rgb), 0.66);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fchip > span:hover { border-color: var(--accent); color: var(--accent); }
.fchip__count { font-size: 12px; letter-spacing: 0.08em; opacity: 0.65; }
.fchip__input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.fchip__input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.fhist { display: flex; align-items: flex-end; gap: 3px; height: 78px; }
.fhist__bar {
  flex: 1;
  height: 40%;
  background: rgba(var(--ink-rgb), 0.22);
  transition: background 0.3s ease;
}
.fhist__bar.is-in { background: var(--accent); }
.fhist__bar[data-h='12'] { height: 12%; } .fhist__bar[data-h='18'] { height: 18%; }
.fhist__bar[data-h='26'] { height: 26%; } .fhist__bar[data-h='30'] { height: 30%; }
.fhist__bar[data-h='34'] { height: 34%; } .fhist__bar[data-h='38'] { height: 38%; }
.fhist__bar[data-h='46'] { height: 46%; } .fhist__bar[data-h='52'] { height: 52%; }
.fhist__bar[data-h='58'] { height: 58%; } .fhist__bar[data-h='66'] { height: 66%; }
.fhist__bar[data-h='72'] { height: 72%; } .fhist__bar[data-h='84'] { height: 84%; }
.fhist__bar[data-h='88'] { height: 88%; } .fhist__bar[data-h='96'] { height: 96%; }
.fhist__axis { position: relative; display: block; height: 1px; background: rgba(var(--ink-rgb), 0.24); }
.fhist__span {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 9px;
  background: rgba(var(--accent-rgb), 0.35);
  transition: left 0.4s ease, right 0.4s ease;
}
.fhist__ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.5);
}
.fhist__median { color: var(--accent); }

.fbands { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.fband {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  color: rgba(var(--ink-rgb), 0.66);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.fband:hover { border-color: var(--accent); }
.fband > span:first-child { flex: 1; text-align: left; }
.fband__bar { width: 54px; height: 3px; background: rgba(var(--ink-rgb), 0.14); }
.fband__fill { display: block; height: 3px; background: rgba(var(--ink-rgb), 0.4); }
.fband__fill--100 { width: 100%; } .fband__fill--72 { width: 72%; }
.fband__fill--54 { width: 54%; } .fband__fill--38 { width: 38%; } .fband__fill--26 { width: 26%; }
.fband__count { width: 44px; text-align: right; font-size: 12px; letter-spacing: 0.1em; opacity: 0.7; }
.fband__input:checked + .fband { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.fband__input:checked + .fband .fband__fill { background: var(--accent); }
.fband__input:focus-visible + .fband { outline: 2px solid var(--accent); outline-offset: 2px; }

.fcount { display: flex; flex-direction: column; gap: 8px; }
.fcount__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fcount__row { display: flex; gap: 6px; }
.fcount__btn {
  flex: 1;
  padding: 9px 0;
  border: 1px solid var(--line);
  text-align: center;
  color: rgba(var(--ink-rgb), 0.66);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fcount__btn:hover { border-color: var(--accent); color: var(--accent); }
.fcount__input:checked + .fcount__btn { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.fcount__input:focus-visible + .fcount__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsizes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }

.fsheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 32px 22px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}
.fsheet__reset {
  border: none;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease;
}
.fsheet__reset:hover { color: var(--accent); }
.fsheet__note {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   33. Listing page — dense grid of five
   -----------------------------------------------------------------------------
   Five across leaves each card around 300px, so this card trades the photo-led
   layout of grid-4 for density: a revision strip, a fact schedule read with
   leader lines, and the listing's position inside the index price band.
   ========================================================================== */

.grid5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.g5card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.35s ease;
}
.g5card[hidden] { display: none; }
/* At this density the focused card has to separate itself from its neighbours. */
.grid5:hover .g5card { opacity: 0.66; }
.grid5 .g5card:hover,
.grid5 .g5card:focus-visible {
  opacity: 1;
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 26px 50px -26px rgba(var(--shadow-rgb), 0.8);
  color: inherit;
}

.g5card__rev {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.g5card__sheet { display: flex; align-items: center; gap: 7px; }
.g5card__tick {
  width: 9px;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.g5card:hover .g5card__tick { width: 22px; }
.g5card__deal { color: var(--accent); }

.g5card__media {
  position: relative;
  display: block;
  /* 380px по просьбе владельца, вместо прежних 210. */
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.g5card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.g5card:hover .g5card__media img { transform: scale(1.05); }
.g5card__hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 22px 22px;
  opacity: 0.16;
  transition: opacity 0.4s ease;
}
.g5card:hover .g5card__hatch { opacity: 0.06; }
.g5card__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.g5card__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.35) 0 1px, transparent 1px 9px); }
.g5card__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.crop--card {
  --crop-c: rgba(var(--on-photo-rgb), 0.7);
  --crop-c2: rgba(var(--on-photo-rgb), 0.7);
  inset: 8px;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 10px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 10px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 10px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 10px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 1px 10px no-repeat;
}
.g5card__pill {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 9px;
  pointer-events: none;
  opacity: 0;
  background: rgba(var(--photo-shade-rgb), 0.72);
  color: var(--on-photo);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.35s ease;
}
.g5card:hover .g5card__pill { opacity: 1; }

.g5card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 11px; }
.g5card__kind {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.g5card__title { font-family: var(--serif); font-size: 21px; line-height: 1.12; }
.g5card__location { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.58); }

/* Fact schedule — label, leader, value, the way a drawing schedule reads */
.g5card__rows { display: flex; flex-direction: column; }
.g5row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
}
.g5row__label {
  white-space: nowrap;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.g5row__leader {
  flex: 1;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.12);
  transition: background 0.35s ease;
}
.g5card:hover .g5row__leader { background: rgba(var(--accent-rgb), 0.4); }
.g5row__value {
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}

.g5card__foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.06);
  transition: background 0.3s ease;
}
.g5card:hover .g5card__foot { background: rgba(var(--accent-rgb), 0.13); }
.g5card__band { position: relative; display: block; height: 1px; background: rgba(var(--ink-rgb), 0.16); }
.g5card__dot {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  transition: left 0.45s var(--ease), background 0.3s ease;
}
.g5card:hover .g5card__dot { background: var(--accent); }
.g5card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.g5card__price { font-family: var(--serif); font-size: 21px; }
.g5card__perm {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.g5card__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  transition: color 0.3s ease;
}
.g5card:hover .g5card__note { color: var(--accent); }

/* Where the listing sits inside the index price band */
.g5card__dot--14 { left: 14%; }
.g5card__dot--18 { left: 18%; }
.g5card__dot--20 { left: 20%; }
.g5card__dot--22 { left: 22%; }
.g5card__dot--26 { left: 26%; }
.g5card__dot--28 { left: 28%; }
.g5card__dot--30 { left: 30%; }
.g5card__dot--34 { left: 34%; }
.g5card__dot--36 { left: 36%; }
.g5card__dot--38 { left: 38%; }
.g5card__dot--40 { left: 40%; }
.g5card__dot--42 { left: 42%; }
.g5card__dot--44 { left: 44%; }
.g5card__dot--46 { left: 46%; }
.g5card__dot--48 { left: 48%; }
.g5card__dot--54 { left: 54%; }
.g5card__dot--62 { left: 62%; }
.g5card__dot--64 { left: 64%; }
.g5card__dot--68 { left: 68%; }
.g5card__dot--72 { left: 72%; }
.g5card__dot--76 { left: 76%; }
.g5card__dot--78 { left: 78%; }
.g5card__dot--82 { left: 82%; }
.g5card__dot--88 { left: 88%; }

/* ==========================================================================
   34. Listing page — filter rail, three across
   -----------------------------------------------------------------------------
   The rail and the chip row above the results are two views of one filter
   state: ticking a type in the rail lights the matching chip and vice versa.
   ========================================================================== */

.results {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(24px, 2.4vw, 40px);
  align-items: start;
  margin-top: 24px;
}
.results__main { min-width: 0; }

.rail {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.rail__reset {
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.rail__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}
.rail__group:first-of-type { border-top: none; }
.rail__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.rail__rows { display: flex; flex-direction: column; gap: 2px; }

.railrow,
.railband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  color: rgba(var(--ink-rgb), 0.72);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.railrow:hover,
.railband:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--accent); }
.railrow__count { font-family: var(--serif); font-size: 15px; opacity: 0.7; }
/* The rail's deal rows point at the same radios as the tabs above the results.
   The radios live inside the search panel and the rail inside `.results`, so
   they are not siblings — the state has to be read from their common ancestor. */
.listing:has(#deal-buy:checked) .railrow[for='deal-buy'],
.listing:has(#deal-rent:checked) .railrow[for='deal-rent'],
.listing:has(#deal-new:checked) .railrow[for='deal-new'] { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

.railband__bar { display: block; width: 44px; height: 3px; background: rgba(var(--ink-rgb), 0.12); }
.railband__fill { display: block; height: 3px; background: rgba(var(--ink-rgb), 0.4); }
.railband__fill--100 { width: 100%; }
.railband__fill--72 { width: 72%; }
.railband__fill--54 { width: 54%; }
.railband__fill--38 { width: 38%; }
.railband__fill--26 { width: 26%; }
.railband__input:checked + .railband { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.railband__input:checked + .railband .railband__fill { background: var(--accent); }
.railband__input:focus-visible + .railband { outline: 2px solid var(--accent); outline-offset: -2px; }

.rail__checks { display: flex; flex-direction: column; gap: 9px; }
.railcheck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
}
.railcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.railcheck__box {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.35);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.railcheck input:checked + .railcheck__box {
  border-color: var(--accent);
  background: var(--accent) linear-gradient(var(--on-accent), var(--on-accent)) center / 6px 1px no-repeat;
}
.railcheck input:focus-visible + .railcheck__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.railcheck__text { flex: 1; }
.railcheck__count { font-size: 12px; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.45); }

.rail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.railbed,
.railfeat {
  padding: 8px 13px;
  border: 1px solid var(--line);
  color: rgba(var(--ink-rgb), 0.72);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.railfeat { padding: 7px 11px; font-size: 12px; }
.railbed:hover,
.railfeat:hover { border-color: var(--accent); color: var(--accent); }
.railbed__input:checked + .railbed,
.railfeat__input:checked + .railfeat {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.railbed__input:focus-visible + .railbed,
.railfeat__input:focus-visible + .railfeat { outline: 2px solid var(--accent); outline-offset: 2px; }

.rail__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--line);
}
.rail__all {
  display: block;
  padding: 13px 0;
  border: 1px solid var(--accent);
  text-align: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rail__all:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.rail__match {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.rail__apply { display: none; }

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Mobile entry point into the rail — hidden until the layout collapses */
.sheetbtn { display: none; }
.sheetbtn__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--on-accent);
  color: var(--accent);
  font-size: 12px;
}

/* ==========================================================================
   35. Listing page — full-width rows
   -----------------------------------------------------------------------------
   The reading view: one file per row, a 540px photograph on the left and the
   sheet on the right. The district price band is the point of the page — it
   answers "is this priced fairly?" without leaving the list.
   ========================================================================== */

.rows { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.lrow {
  display: grid;
  grid-template-columns: 540px 1fr;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.lrow[hidden] { display: none; }
.rows:hover .lrow { opacity: 0.62; }
.rows .lrow:hover,
.rows .lrow:focus-visible {
  opacity: 1;
  transform: translateY(-4px);
  border-color: var(--accent);
  color: inherit;
}

.lrow__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.lrow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lrow__hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 22px 22px;
  opacity: 0.3;
  transition: opacity 0.35s ease;
}
.lrow:hover .lrow__hatch { opacity: 0.1; }
.lrow__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--on-photo-rgb), 0.5) 0 1px, transparent 1px 9px); }
.lrow__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--on-photo-rgb), 0.45) 0 1px, transparent 1px 10px); }
.lrow__hatch--3 { background-image: radial-gradient(rgba(var(--on-photo-rgb), 0.5) 1px, transparent 1.6px); }
.lrow__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--on-photo-rgb), 0.4) 0 1px, transparent 1px 8px); }
.crop--row {
  --crop-c: rgba(var(--ink-rgb), 0.85);
  inset: 12px;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 100% / 1px 12px no-repeat;
}
.lrow__deal {
  position: absolute;
  top: 34px;
  left: 34px;
  padding: 6px 12px;
  background: rgba(var(--scrim-rgb), 0.85);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lrow__reveal {
  position: absolute;
  left: 34px;
  bottom: 30px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lrow:hover .lrow__reveal { opacity: 1; }
.lrow__activity {
  padding: 5px 11px;
  background: rgba(var(--photo-shade-rgb), 0.72);
  color: var(--on-photo);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spark--row { height: 30px; background: rgba(var(--photo-shade-rgb), 0.55); }

.lrow__sheet { display: flex; flex-direction: column; min-width: 0; }
.lrow__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 26px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.lrow__kindwrap { display: flex; align-items: center; gap: 10px; }
.lrow__tick { width: 16px; height: 1px; background: var(--accent); transition: width 0.4s ease; }
.lrow:hover .lrow__tick { width: 36px; }
.lrow__kind { color: var(--accent); }

.lrow__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 26px 16px;
}
.lrow__lead { min-width: 0; }
.lrow__title { display: block; font-family: var(--serif); font-size: 36px; line-height: 1.04; }
.lrow__location { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; color: rgba(var(--ink-rgb), 0.58); }
.lrow__note {
  display: block;
  margin-top: 12px;
  max-width: 540px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.5);
}
.lrow__prices { text-align: right; white-space: nowrap; }
.lrow__price { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; }
.lrow__perm {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lrow__delta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lrow__delta--down { color: rgba(var(--ink-rgb), 0.5); }

.lrow__band { display: block; margin: 0 26px 16px; }
.lrow__band-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lrow__band-median { color: var(--accent); }
.lrow__axis {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 11px;
  background: var(--line);
}
.lrow__dot {
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  transition: left 0.5s var(--ease);
}
.lrow__dot--38 { left: 38%; }
.lrow__dot--46 { left: 46%; }
.lrow__dot--58 { left: 58%; }
.lrow__dot--64 { left: 64%; }
.lrow__dot--72 { left: 72%; }
.lrow__dot--80 { left: 80%; }

.lrow__spec {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: auto;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.lrow__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.lrow__cell:last-child { border-right: none; }
.lrow__cell-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lrow__cell-value { font-family: var(--serif); font-size: 19px; line-height: 1; }

.lrow__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 26px 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.lrow__agent {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.58);
}
/* Аватар агента. Раньше это был пустой кружок-подложка: имя рядом текстом,
   а на месте лица серое пятно. С появлением портретов оно стало читаться как
   незагрузившаяся картинка, поэтому теперь здесь настоящий снимок. Кадр
   прижат к верху общим правилом секции 95 — макушка не срезается. */
.lrow__avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  object-fit: cover;
}
.lrow__open {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.3s ease;
}
.lrow:hover .lrow__open { color: var(--accent); }

/* ---- Rows, responsive ----------------------------------------------------
   Tablet narrows the photo column and drops the spec table to three cells.
   Mobile stacks the row: photograph on top, sheet below, price under the
   title, and the reveal group stays visible because there is no hover.       */

@media (max-width: 1179px) {
  .lrow { grid-template-columns: 320px 1fr; }
  .lrow__title { font-size: 30px; }
  .lrow__price { font-size: 28px; }
  .lrow__note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lrow__spec { grid-template-columns: repeat(3, 1fr); }
  .lrow__cell:nth-child(n + 4) { display: none; }
  .lrow__cell:nth-child(3) { border-right: none; }
}

@media (max-width: 767px) {
  .rows { gap: 16px; }
  .lrow { grid-template-columns: minmax(0, 1fr); }
  .lrow__media { min-height: 0; aspect-ratio: 16 / 10; }
  .lrow__reveal { opacity: 1; }
  .lrow__head { flex-direction: column; gap: 14px; padding: 18px 18px 14px; }
  .lrow__prices { text-align: left; }
  .lrow__title { font-size: 26px; }
  .lrow__price { font-size: 26px; }
  .lrow__strip { padding: 12px 18px; gap: 10px; flex-wrap: wrap; }
  .lrow__band { margin: 0 18px 14px; }
  .lrow__spec { grid-template-columns: repeat(2, 1fr); }
  .lrow__cell { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .lrow__cell:nth-child(2n) { border-right: none; }
  .lrow__foot { padding: 12px 18px 14px; flex-wrap: wrap; gap: 10px; }
}

/* ==========================================================================
   36. Listing page — masonry wall
   -----------------------------------------------------------------------------
   A CSS multi-column flow, not a grid: cards run down column one, then column
   two, and the browser balances them. No JavaScript masonry library — `columns`
   reflows on resize for free and collapses to a stack on mobile by itself.

   Note on reading order: multi-column flows down each column, so what a screen
   reader announces is the DOM order, not the left-to-right visual order. That
   is acceptable for a browsable wall of listings and must not be used for
   anything sequential.
   ========================================================================== */

.wall {
  columns: 4;
  column-gap: 20px;
  margin-top: 28px;
}
.mcard {
  display: block;
  break-inside: avoid;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s var(--ease);
}
.mcard:hover,
.mcard:focus-visible { border-color: var(--accent); transform: translateY(-4px); color: inherit; }
.mcard[hidden] { display: none; }

/* The frame keeps the height of its own drawing. In production these come
   from the photograph's aspect ratio — the three-step cycle stands in for it. */
.mcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.mcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* 450px по просьбе владельца, вместо прежних 200. */
.mcard__media--1 { height: 450px; }
.mcard__media--2 { height: 450px; }
.mcard__media--3 { height: 340px; }

@media (max-width: 1179px) {
  .wall { columns: 2; column-gap: 18px; }
  .mcard { margin-bottom: 18px; }
}

@media (max-width: 767px) {
  .wall { columns: 1; column-gap: 16px; }
  .mcard { margin-bottom: 16px; }
}

/* ---- Burger ------------------------------------------------------------- */

.burger {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.burger:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.nav-toggle:focus-visible + .burger { outline: 2px solid var(--accent); outline-offset: 3px; }
.burger__box {
  position: relative;
  width: 16px;
  height: 1px;
  background: var(--accent);
  transition: background 0.2s ease;
}
.burger__box::before,
.burger__box::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--accent);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.burger__box::before { top: -5px; }
.burger__box::after { top: 5px; }
.nav-toggle:checked ~ .navbar__actions .burger__box { background: transparent; }
.nav-toggle:checked ~ .navbar__actions .burger__box::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked ~ .navbar__actions .burger__box::after { top: 0; transform: rotate(-45deg); }

/* ---- Touch: nothing may hide behind :hover -------------------------------- */

@media (hover: none) {
  .hero__guide,
  .hero__guide-label { display: none; }

  .frame__specs { height: 22px; padding-top: 12px; opacity: 1; }
  .agent__quote { height: auto; padding-top: 10px; opacity: 1; }
  .strip__detail { opacity: 1; }
  .route__more { max-height: 300px; opacity: 1; }
  .vrow__meta { height: auto; opacity: 1; }
  .ledger__detail { height: auto; margin-top: 14px; opacity: 1; }
  .devrow__keys,
  .devrow__stage { opacity: 1; }
  .step__stat { opacity: 1; }

  /* The row reveal and the card activity plate are hover-only on the desktop */
  .lrow__reveal,
  .gcard__activity { opacity: 1; }

  /* No cursor means no focus dimming — every card stays at full strength. */
  .bento:hover .frame,
  .legend:hover .legend__card,
  .plates:hover .plate,
  .agents:hover .agent,
  .cases:hover .case,
  .r3:hover .r3__card,
  .dev__rows:hover .devrow,
  .rows:hover .lrow,
  .grid3--bp:hover .gcard,
  .offices:hover .office { opacity: 1; }

  /* Panels that grow on hover keep their open size instead */
  .strip__frame:first-child,
  .route:first-child { flex: 1 1 0; }
}

/* ---- 1180px: relax the widest grids -------------------------------------- */

@media (max-width: 1180px) {
  .section__inner--wide { padding: clamp(48px, 7vh, 72px) var(--pad) clamp(48px, 7vh, 72px); }
  .section__title--ledger { font-size: clamp(44px, 6vw, 64px); }

  .bento { grid-template-rows: repeat(3, clamp(230px, 26vh, 300px)); }
  .frame--tall { grid-row: span 2; }

  .legend,
  .plates,
  .journal,
  .alerts,
  .cases,
  .r3 { grid-template-columns: repeat(2, 1fr); }
  .plate--wide { grid-column: span 2; }
  .plate-cta { grid-column: span 2; }

  .agents { grid-template-columns: repeat(2, 1fr); }

  .band { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .band > .btn { grid-column: span 2; justify-self: start; }

  .section__foot--grid { grid-template-columns: repeat(3, auto); row-gap: 26px; }
  .section__foot--grid .section__foot-text { grid-column: 1 / -1; }

  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .offices { grid-template-columns: repeat(2, 1fr); }

  .desks { grid-template-columns: 260px 1fr; }
  .deskpanel { grid-template-columns: 1fr 240px; }

  .strip { flex-wrap: wrap; }
  .strip__frame,
  .strip__frame:first-child { flex: 1 1 calc(50% - 10px); height: clamp(360px, 44vh, 460px); }

  .viewer { grid-template-columns: 1fr 1fr; min-height: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quotes__side { border-left: none; border-top: 1px solid rgba(var(--quote-ink-rgb), 0.16); }
}

/* ---- 1024px: drawer navigation, hero stops filling the viewport ----------- */

@media (max-width: 1024px) {
  .navbar { height: 72px; }
  .burger { display: grid; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 0;
    overflow: hidden auto;
    margin: 0;
    background: var(--menu-bg);
    border-bottom: 1px solid var(--line);
    transition: max-height 0.4s var(--ease);
  }
  .nav-toggle:checked ~ .nav { max-height: calc(100vh - 110px); }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad-hero) 20px;
  }
  .nav__item { border-bottom: 1px solid var(--line-faint); }
  .nav__link { justify-content: space-between; padding: 16px 0; }

  /* Tapping a parent focuses it, which opens its panel — an accordion for free */
  .menu,
  .menu--wide,
  .menu--two,
  .menu--sub,
  .menu--sub-left {
    position: static;
    width: auto;
    max-height: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    /* In the drawer the panels are an accordion, so they stay displayed and
       `max-height` does the collapsing. The desktop rule hides them with
       `display: none` (see the note there) and that has to be undone here, or
       the accordion has nothing to open. */
    display: block;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
  }
  .nav__item--has-menu:focus-within > .menu,
  .menu__item--has-sub:focus-within > .menu {
    max-height: 1200px;
    padding: 4px 0 14px;
    animation: none;
  }
  .nav__item--has-menu:hover > .menu--wide,
  .nav__item--has-menu:focus-within > .menu--wide,
  .nav__item--has-menu:hover > .menu--two,
  .nav__item--has-menu:focus-within > .menu--two,
  .menu--wide,
  .menu--two { display: block; }
  .menu--two .menu__col { padding: 0; }
  .menu--two .menu__col:first-child { border-right: none; }
  .menu--two .menu__link { padding: 10px 0 10px 18px; }
  /* In the drawer these rows are the navigation, so they clear 44px. */
  .menu__row,
  .menu__link { padding: 12px 0 12px 18px; font-size: 13px; min-height: 44px; align-items: center; }
  .menu__row:hover { background: transparent; color: var(--accent); }
  .menu__col-title { margin-top: 12px; font-size: 16px; }
  .menu__foot { display: none; }

  .hero { height: auto; min-height: 100vh; }
  .hero__body {
    padding: calc(112px + clamp(24px, 5vh, 56px)) var(--pad-hero) clamp(28px, 4vh, 48px);
    gap: clamp(24px, 4vh, 40px);
  }
  .hero__top { flex-direction: column; gap: 32px; }
  .hero__rail { display: none; }
  .hero__lead { max-width: none; }
  .spotlight { width: 100%; flex: 1 1 auto; }

  .justlisted { overflow-x: auto; }
  .justlisted__list { min-width: 640px; }

  .search__bar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .search__fields { grid-template-columns: repeat(2, 1fr); }
  .search__actions { grid-column: span 2; }
  .btn--search { flex: 1; border-radius: var(--radius); }

  .section__head,
  .routes__head { flex-direction: column; align-items: flex-start; gap: 26px; }
  /* flex-basis is a main-axis size: once the head is a column, the desktop
     `flex: 1 1 520px` would become a 520px tall block. Reset it. */
  .section__headline,
  .section__lede,
  .hero__lead,
  .hero__text,
  .hero__median,
  .trust__item { flex: 0 0 auto; }
  .section__aside { flex-wrap: wrap; gap: 24px; }
  .section__head--ruled { padding-bottom: 20px; }

  .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .process__rail,
  .process__progress { display: none; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .frame,
  .frame--wide,
  .frame--tall { grid-column: auto; grid-row: auto; min-height: clamp(240px, 34vh, 320px); }
  .measure { display: none; }

  .desks { grid-template-columns: 1fr; }
  .desks__switch { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .deskpanel { grid-template-columns: 1fr; }
  .deskpanel__media { min-height: 280px; border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }

  .routes { flex-direction: column; padding: 0; }
  .routes::before { left: 0; right: 0; }
  .route,
  .route:first-child { flex: 1 1 auto; min-height: 420px; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .routes__rail { display: none; }

  .dev__axis { display: none; }
  .devrow { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .devrow__track { order: 3; }
  .devrow__price { text-align: left; }
  .dev__today { display: none; }
  .dev__actions { flex-wrap: wrap; }

  .ledger__row,
  .ledger:hover .ledger__row:hover,
  .ledger:not(:hover) .ledger__row:last-child {
    grid-template-columns: 56px 1fr;
    gap: 12px 20px;
    padding: 28px 0;
  }
  .ledger__title { grid-column: 2; }
  .ledger__text { grid-column: 2; }
  .ledger__stat { grid-column: 2; text-align: left; }
  .ledger__num { align-self: start; }
  .ledger__rule { display: none; }

  .viewer { grid-template-columns: 1fr; }
  .viewer__list { padding: clamp(44px, 6vh, 64px) var(--pad); }
  .viewer__frame { min-height: 420px; }

  .quarter { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .quarter__cell:nth-child(2n) { border-right: none; }

  .subscribe { flex-wrap: wrap; }
  .subscribe__input { width: 100%; }

  .footer__cta { flex-direction: column; align-items: flex-start; gap: 22px; }
  .footer__cta-text { flex-wrap: wrap; gap: 14px; }
  .footer__cta-actions { flex-wrap: wrap; gap: 10px; }
  .footer__copy { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- 600px: single column ------------------------------------------------ */

@media (max-width: 600px) {
  .utilbar { height: auto; padding: 10px var(--pad-hero); flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
  .utilbar__ticker { display: none; }
  .navbar { height: 64px; }
  .logo__mark { font-size: 28px; }
  .logo__sub { font-size: 11px; letter-spacing: 0.5em; }
  .btn--add { display: none; }
  .nav-toggle:checked ~ .nav { max-height: calc(100vh - 130px); }

  .hero__body { padding-top: calc(120px + 24px); }
  .hero__title { font-size: clamp(36px, 11vw, 52px); }
  .hero__title-line--indent { padding-left: 0; }
  .hero__intro { gap: 22px; }
  .hero__median { padding-left: 0; border-left: none; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure { padding-right: 12px; }
  .figure:nth-child(2n) { border-right: none; }
  .justlisted { display: none; }
  .search__fields { grid-template-columns: 1fr; }
  .search__actions { grid-column: auto; }
  .field { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .search__meta { flex-direction: column; gap: 6px; }
  .search__chips { flex-wrap: wrap; }

  .section__inner,
  .section__inner--narrow,
  .section__inner--wide,
  .section__inner--flat { padding: clamp(44px, 7vh, 64px) var(--pad) clamp(44px, 7vh, 64px); }
  .section__title { font-size: clamp(36px, 11vw, 52px); }
  .section__title--sm,
  .section__title--xs,
  .section__title--ledger { font-size: clamp(32px, 9.5vw, 46px); }
  .section__inner--rule::after { display: none; }

  .trust { flex-wrap: wrap; gap: 22px; }
  .process__steps { grid-template-columns: 1fr; }
  .step { padding-right: 0; }

  .bento,
  .legend,
  .plates,
  .journal,
  .alerts,
  .cases,
  .r3,
  .agents,
  .quarter { grid-template-columns: 1fr; }
  .plate--wide,
  .plate-cta { grid-column: auto; }
  .quarter__cell { padding-right: 0; border-right: none; padding-bottom: 18px; }

  .band { grid-template-columns: 1fr; }
  .band > .btn { grid-column: auto; }

  .strip { flex-direction: column; }
  .strip__frame,
  .strip__frame:first-child { flex: 1 1 auto; }

  .section__foot,
  .section__foot--grid { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; gap: 22px; }
  .section__foot-actions { flex-wrap: wrap; }

  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .offices { grid-template-columns: 1fr; }
  .office { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(var(--footer-ink-rgb), 0.14); }
  .footer__meta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .switches { flex-wrap: wrap; gap: 12px; }
  .footer__stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .quotes__main,
  .quotes__side { padding: clamp(40px, 6vh, 56px) var(--pad); }
  .quote__strip { grid-template-columns: repeat(2, 1fr); }
  .quote__cell:nth-child(2n) { border-right: none; }
  .quotes__dots { flex-wrap: wrap; }
  .quotes__dot { width: 56px; }

  .viewer__frame { min-height: 320px; }
  .vrow__title { font-size: 30px; }
  .vrow__price { font-size: 20px; }

  .modal__panel { padding: 34px 24px 30px; }
  .modal__social { grid-template-columns: 1fr; }

  .case__facts,
  .facts { grid-template-columns: 1fr 1fr; }
  .r3__facts { grid-template-columns: 1fr; }
  .route__facts { grid-template-columns: 1fr; }

  .preloader__mark { font-size: clamp(38px, 13vw, 56px); }

  .footer__cta-line { font-size: 22px; }
  .footer__cta-actions .btn { flex: 1 1 auto; justify-content: center; }
  .btn { white-space: normal; text-align: center; }
}

/* ---- Narrow screens: a grid child may never push past its track ----------- */

@media (max-width: 1180px) {
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quotes__main,
  .quotes__side { min-width: 0; }
}

@media (max-width: 1024px) {
  .desks,
  .deskpanel,
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .desks__switch,
  .desks__panels,
  .deskpanel,
  .deskpanel__text,
  .deskpanel__media,
  .viewer__list,
  .viewer__frame,
  .devrow,
  .devrow__id,
  .devrow__names,
  .ledger__row,
  .ledger__text,
  .r3__card,
  .case,
  .agent,
  .plate,
  .frame { min-width: 0; }
  .deskstep { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .deskpanel__text { padding: 30px 24px 28px; }
  .deskpanel__title { font-size: clamp(30px, 4.4vw, 40px); }
}

@media (max-width: 600px) {
  .deskstep { grid-template-columns: 38px minmax(0, 1fr); row-gap: 6px; }
  .deskstep__meta { grid-column: 2; }
  .deskpanel__actions { flex-wrap: wrap; }
  .desks__hours-head { flex-wrap: wrap; gap: 6px; }
}

/* ---- Vertical rhythm on small screens ------------------------------------
   The desktop spacing is built on vh units and reads as empty space once the
   layout is one column. These are the same steps, scaled for a phone.        */

@media (max-width: 600px) {
  .section__inner,
  .section__inner--narrow,
  .section__inner--wide,
  .section__inner--flat { padding: 44px var(--pad) 46px; }

  .section__head { gap: 20px; }
  .section__head--ruled { padding-bottom: 18px; }
  .section__title { margin-top: 16px; }

  .process { margin-top: 38px; }
  .process__steps { row-gap: 34px; }
  .step { gap: 16px; }
  .step__stat { padding-top: 14px; }

  .bento,
  .measure { margin-top: 22px; }
  .strip { margin-top: 26px; gap: 14px; }
  .legend,
  .plates,
  .agents,
  .journal,
  .alerts,
  .cases,
  .r3 { margin-top: 26px; }
  .dev__rows { margin-top: 18px; }
  .desks,
  .viewer__rows { margin-top: 28px; }
  .ledger { margin-top: 0; }
  .quotes__stage { margin-top: 24px; }
  .quotes__dots { margin-top: 30px; }

  .band,
  .quarter { margin-top: 30px; padding-top: 24px; }
  .section__foot,
  .section__foot--grid { margin-top: 34px; padding-top: 24px; }

  .hero__body { gap: 26px; padding-bottom: 34px; }
  .hero__intro { margin-top: 20px; }
  .figures { margin-top: 22px; }
  .figure { padding: 14px 12px 12px 0; }
  .search__fields { margin-top: 14px; }
  .search__meta { margin-top: 12px; }
  .spotlight { padding: 20px 22px 18px; }
  .spotlight__body { min-height: 0; }

  .footer__body { padding: 44px var(--pad) 0; }
  .footer__grid { padding-bottom: 34px; }
  .footer__cta { padding: 26px var(--pad); }
  .wordmark { margin-top: 22px; }

  .quote__foot { margin-top: 26px; }
  .quote__strip { margin-top: 26px; }
  .deskpanel__steps { margin-top: 20px; }
  .deskpanel__actions { margin-top: 22px; }
}

/* ---- Listing page, responsive --------------------------------------------
   Follows the breakdown in the handoff: two columns on tablet, one on mobile,
   the filter sheet becomes a full-height panel and the pager collapses.      */

@media (max-width: 1179px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pagehead__title { font-size: 34px; }
  .pagehead__stats { top: 0; flex-wrap: wrap; gap: 18px; }
  .pagehead__row { gap: 24px; }
  .searchpanel__fields { grid-template-columns: repeat(2, 1fr); }
  .searchpanel__actions { grid-column: span 2; }
  .searchpanel__actions .btn { flex: 1; }
  .fsheet { width: 90vw; max-height: calc(100vh - 32px); }
  .fsheet__cols { grid-template-columns: repeat(2, 1fr); }
  .fcol:nth-child(2n) { border-right: none; }
  .fcol { border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
}

@media (max-width: 1024px) {
  .searchpanel__tabs { overflow-x: auto; }
  .searchpanel__tab { white-space: nowrap; padding: 15px 22px; }
  .searchpanel__note { display: none; }
  /* Only the chip row scrolls — letting the whole bar scroll pushed the sort
     control outside the page and gave the document a horizontal scrollbar. */
  .chipsbar { flex-wrap: wrap; overflow: visible; padding-bottom: 16px; }
  .chipsbar__chips {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .gchip { white-space: nowrap; }
  .chipsbar__meta { margin-left: 0; }
  .chipsbar__meta,
  .chipsbar__sort { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  .pagehead__mark { display: none; }
  .pagehead__title { font-size: 28px; }
  .pagehead__lead { top: 0; }
  .pagehead__stats { display: none; }
  .pagehead__band { padding-bottom: 26px; }

  .grid4 { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .gcard__media { height: 200px; }

  .searchpanel__fields { grid-template-columns: 1fr; gap: 18px; padding: 20px 20px 22px; }
  .searchpanel__actions { grid-column: auto; flex-wrap: wrap; }
  .searchpanel__more { order: 2; }

  .chipsbar__meta { margin-left: 0; }

  .listing { padding: 24px var(--pad-hero) 40px; }

  /* Full-screen filter sheet with the action row pinned to the bottom */
  .modal--filters { padding: 0; }
  .fsheet {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: none;
  }
  .fsheet__crop { display: none; }
  .fsheet__head { padding: 18px 20px 16px; }
  .fsheet__title { font-size: 24px; }
  .fsheet .dial--sm { width: 48px; height: 48px; }
  .fsheet .dial--sm .dial__inner { width: 38px; height: 38px; font-size: 14px; }
  .fsheet__deals { overflow-x: auto; }
  .fdeal { flex: 0 0 auto; min-width: 130px; }
  .fsheet__cols { grid-template-columns: 1fr; }
  .fcol { border-right: none; padding: 20px; }
  .fsheet__foot {
    position: sticky;
    bottom: 0;
    padding: 16px 20px;
    background: var(--panel);
  }
  .fsheet__note { display: none; }
  .fsheet__foot .btn { flex: 1; }

  .pager { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pager__numbers { display: none; }
  /* Prev/Next are the only pagination controls left at this width, so they
     have to clear the 44px touch target on their own. */
  .pager__step { height: 44px; }
  .pager__controls { width: 100%; justify-content: space-between; }
  .pager__mobile {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}

@media (min-width: 768px) {
  .pager__mobile { display: none; }
}

/* ---- Dense grid, responsive ----------------------------------------------
   Per the handoff: three across on tablet, one on mobile, and the leader
   lines collapse into a plain three-cell row where there is no width for them. */

@media (max-width: 1179px) {
  .grid5 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (max-width: 767px) {
  .grid5 { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .g5card__media { height: 200px; }
  /* No room for a schedule — the facts become a compact three-cell row */
  .g5card__rows {
    flex-direction: row;
    border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  }
  .g5row {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 12px;
    border-top: none;
    border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  }
  .g5row:last-child { display: none; }
  .g5row:nth-child(3) { border-right: none; }
  .g5row__leader { display: none; }
}

/* ---- Filter rail, responsive ---------------------------------------------
   Tablet: the rail unsticks and sits above the results, full width.
   Mobile: it becomes a sheet behind a sticky "Filters (N)" button.          */

@media (max-width: 1179px) {
  .results { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rail__group { padding: 14px 18px; }
  .rail__rows,
  .rail__checks { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .railrow,
  .railband { flex: 1 1 200px; }
  .railcheck { flex: 1 1 200px; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .sheetbtn {
    position: sticky;
    top: 132px;
    z-index: 30;
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* The rail becomes a full-screen sheet with its own action row */
  .rail {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    overflow-y: auto;
    border: none;
  }
  .rail.is-open { display: flex; }
  .rail__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    padding: 18px;
  }
  .rail__rows,
  .rail__checks { flex-direction: column; }
  .railrow,
  .railband,
  .railcheck { flex: 0 0 auto; }
  .railrow,
  .railband { padding: 12px; }
  .rail__foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--panel);
  }
  .rail__apply { display: flex; width: 100%; }
  .rail__match { display: none; }

  .grid3 { grid-template-columns: 1fr; gap: 16px; }
  .grid3 .gcard__media { height: 200px; }
}

/* ---- Filter rail, four across --------------------------------------------
   The rail keeps its 340px, so four columns beside it leave a narrower card.
   The title is held to two lines and the location truncates rather than
   pushing the fact table out of alignment across the row.                    */

.grid3--four { grid-template-columns: repeat(4, 1fr); }
.grid3--four .gcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid3--four .gcard__location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid3--four .gcard__fact { padding: 12px 10px; }

@media (max-width: 1179px) {
  .grid3--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid3--four { grid-template-columns: 1fr; }
}

/* ==========================================================================
   37. Listing page — rows beside the filter rail
   -----------------------------------------------------------------------------
   The rail from the sidebar grids, the rows from the full-width list. The photo
   column is narrower here because the rail takes 340px, so the note clamps
   sooner and the title wraps to two lines more often.
   ========================================================================== */

.rows--rail .lrow { grid-template-columns: 380px 1fr; }
.rows--rail .lrow__media { min-height: 250px; }
.rows--rail .lrow__title { font-size: 32px; }
.rows--rail .lrow__price { font-size: 30px; }
.rows--rail .lrow__note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}
.rows--rail .lrow__deal,
.rows--rail .lrow__reveal { left: 26px; }

@media (max-width: 1179px) {
  /* The rail scrolls with the page at this width and gives back some room */
  .results--list .rail { position: static; }
  .rows--rail .lrow { grid-template-columns: 300px 1fr; }
  .rows--rail .lrow__title { font-size: 28px; }
}

@media (max-width: 767px) {
  /* Here the rail is not a sheet — it is replaced by the modal, so the markup
     is hidden rather than duplicated into a second filter surface. */
  .results--list .rail { display: none; }
  .sheetbtn--modal {
    display: block;
    text-align: center;
    text-decoration: none;
  }
  .rows--rail .lrow { grid-template-columns: minmax(0, 1fr); }
  .rows--rail .lrow__title { font-size: 26px; }
  .rows--rail .lrow__deal,
  .rows--rail .lrow__reveal { left: 18px; }
}

/* ==========================================================================
   38. Listing page — list / grid view switch
   -----------------------------------------------------------------------------
   Both renderings live in the markup; the switch only decides which one is
   shown. It owns a single piece of state — the page size and the reset to
   sheet one are derived from it, never stored separately.
   ========================================================================== */

.viewswitch {
  display: flex;
  border: 1px solid var(--line);
}
.viewswitch__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-right: 1px solid var(--line);
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease;
}
.viewswitch__btn:last-of-type { border-right: none; }
.viewswitch__btn:hover { color: var(--accent); }
.viewswitch__input:checked + .viewswitch__btn { background: var(--accent); color: var(--on-accent); }
.viewswitch__input:focus-visible + .viewswitch__btn { outline: 2px solid var(--accent); outline-offset: 2px; }

.views > [hidden] { display: none; }

@media (max-width: 767px) {
  /* Mobile is always cards — the switch is hidden and the choice ignored */
  .viewswitch { display: none; }
}

/* ==========================================================================
   39. Listing page — blueprint view (tracing paper)
   -----------------------------------------------------------------------------
   The same files as the other listing pages, drawn instead of photographed.
   Every surface here is `transparent` — panel, rail, card, frame — so the page
   background and the sheet grid read straight through, and only hairlines
   separate one object from the next. The frame is deliberately unfilled: there
   is no photograph to fade the hatch back for, so on the active file the hatch
   grows stronger rather than clearing out of the way.

   Nothing on this page is a new component; it is the rail from the sidebar
   grids and the rows from the full-width list, restated without their fills.
   ========================================================================== */

.listing--bp .searchpanel,
.listing--bp .rail,
.listing--bp .lrow,
.listing--bp .gcard,
.listing--bp .lrow__media,
.listing--bp .gcard__media { background: transparent; }

/* Снимок на этой странице — подложка чертежа, а не витрина. Обесцвечен и
   притушен, поверх него в разметке уже лежат штриховка и метки кадрирования,
   поэтому лист читается первым, а фотография отвечает только на вопрос
   «что это за объект».

   Рамку пустой не оставляем: на заглушках это выглядело замыслом, а рядом с
   настоящими фотографиями на всех соседних страницах читалось как «картинки
   не загрузились» — владелец так и спросил. */
.listing--bp .lrow__media img,
.listing--bp .gcard__media img {
  filter: grayscale(1) contrast(0.85) brightness(0.62);
  opacity: 0.42;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

/* На наведённом файле лист «проявляется»: снимок выходит вперёд, как будто
   с чертежа подняли кальку. Штриховка на активном при этом усиливается —
   это правило страницы, его не трогаем. */
.listing--bp .lrow:hover .lrow__media img,
.listing--bp .lrow:focus-visible .lrow__media img,
.listing--bp .gcard:hover .gcard__media img,
.listing--bp .gcard:focus-visible .gcard__media img {
  filter: grayscale(0.35) contrast(0.95) brightness(0.85);
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .listing--bp .lrow__media img,
  .listing--bp .gcard__media img { transition: none; }
}

/* The active deal on this page is marked with a rail, the way a drawing marks
   the sheet you are on. Every row reserves the 2px so nothing shifts. */
.listing--bp .railrow { border-left: 2px solid transparent; }
.listing--bp:has(#deal-buy:checked) .railrow[for='deal-buy'],
.listing--bp:has(#deal-rent:checked) .railrow[for='deal-rent'],
.listing--bp:has(#deal-new:checked) .railrow[for='deal-new'] { border-left-color: var(--accent); }

/* ---- Results head: counter left, Rows / Cards right ---------------------- */

.resultsbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}
.resultsbar__meta {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The switch carries its label here, so the buttons are wider than the icon */
.viewswitch--wide .viewswitch__btn {
  display: flex;
  gap: 9px;
  width: auto;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.views .rows--bp { margin-top: 0; }

/* ---- The unfilled frame -------------------------------------------------- */

/* Ink, not the on-photo cream: there is no photograph under it, so the hatch
   has to answer to the theme like the rest of the sheet. */
.rows--bp .lrow__hatch--1,
.grid3--bp .gcard__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 9px); }
.rows--bp .lrow__hatch--2,
.grid3--bp .gcard__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.45) 0 1px, transparent 1px 10px); }
.rows--bp .lrow__hatch--3,
.grid3--bp .gcard__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px); }
.rows--bp .lrow__hatch--4,
.grid3--bp .gcard__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.5) 0 1px, transparent 1px 8px); }

/* On the card pages the hatch is a corner mark over the photograph; here it is
   the whole frame, because the frame is all there is. */
.grid3--bp .gcard__hatch {
  inset: 0;
  width: auto;
  height: auto;
  background-size: 22px 22px;
  transition: opacity 0.35s ease;
}
.rows--bp .lrow__hatch,
.grid3--bp .gcard__hatch { opacity: 0.28; }
.rows--bp .lrow:hover .lrow__hatch,
.rows--bp .lrow:focus-visible .lrow__hatch,
.grid3--bp .gcard:hover .gcard__hatch,
.grid3--bp .gcard:focus-visible .gcard__hatch { opacity: 0.5; }

/* The plates over the frame sit on the page, not on a photograph */
.rows--bp .lrow__activity {
  background: rgba(var(--scrim-rgb), 0.86);
  color: var(--ink);
}
.rows--bp .spark--row { background: rgba(var(--scrim-rgb), 0.7); }

/* ---- Cards ---------------------------------------------------------------- */

.grid3--bp { gap: 20px; }
.grid3--bp .gcard__media { height: 208px; }
.grid3--bp:hover .gcard { opacity: 0.62; }
.grid3--bp .gcard:hover,
.grid3--bp .gcard:focus-visible { opacity: 1; }
.grid3--bp .gcard__activity {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(var(--scrim-rgb), 0.86);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.grid3--bp .gcard:hover .gcard__activity,
.grid3--bp .gcard:focus-visible .gcard__activity { opacity: 1; }

@media (max-width: 1179px) {
  .grid3--bp { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid3--bp { grid-template-columns: minmax(0, 1fr); }
  /* No hover to reveal with: the activity plate stays out. */
  .grid3--bp .gcard__activity { opacity: 1; }
}

/* ==========================================================================
   40. Listing page — compact rows (the register)
   -----------------------------------------------------------------------------
   The density view: fourteen files on one screen as 52px lines. This is a real
   data table — column header, `th scope`, one row per file — because that is
   what it is, and because the sticky header only works honestly that way.

   Everything here trades decoration for rows on screen. Nothing lifts, scales
   or grows on hover: at 52px a transform would make the whole table judder.
   The photograph is not in the flow at all — it is raised in the corner for the
   line under the cursor and costs the table no vertical space.

   Column widths live in one custom property so the header and the rows can
   never drift apart.
   ========================================================================== */

/* The columns are declared once, on the <col> elements, and `table-layout:
   fixed` makes both the header and every row obey them — they cannot drift
   apart the way two separate grid declarations can. Widths are the design
   width plus the 18px gap (and the 16px outer padding on the end columns);
   box-sizing is border-box site-wide, so the content lands where the drawing
   puts it. */

.register { margin-top: 26px; }
.reg {
  width: 100%;
  /* `separate` rather than `collapse`: a sticky `th` only paints its own
     background — and stays opaque over the rows — when borders are separate. */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.reg__col--sheet { width: 94px; }
.reg__col--type { width: 198px; }
.reg__col--area { width: 128px; }
.reg__col--beds { width: 118px; }
.reg__col--asking { width: 196px; }

.reg th,
.reg td { padding-right: 18px; }
.reg th:first-child,
.reg td:first-child { padding-left: 16px; }
.reg th:last-child,
.reg td:last-child { padding-right: 16px; }

.reg__th {
  position: sticky;
  /* Directly under the site header: utility bar 38 + nav 92. */
  top: 130px;
  z-index: 2;
  padding-top: 14px;
  padding-bottom: 12px;
  background: var(--bg);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(var(--ink-rgb), 0.42);
}
.reg__th--asking { text-align: right; }

.crow { position: relative; }
.crow[hidden] { display: none; }
.crow td {
  height: 52px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.11);
  vertical-align: middle;
  transition: background 0.2s ease;
}
.crow:hover td,
.crow:focus-within td { background: rgba(var(--accent-rgb), 0.07); }

.crow__sheet {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.5);
  transition: color 0.2s ease, background 0.2s ease;
}
.crow:hover .crow__sheet,
.crow:focus-within .crow__sheet { color: var(--accent); }

.crow__file {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
/* One link per row, stretched over the whole line: the row is a link in the
   design, and a table row cannot be wrapped in an anchor. */
.crow__link {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}
.crow__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.crow:hover .crow__link { color: var(--accent); }
.crow__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crow__location {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.58);
}
.crow__activity {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.crow:hover .crow__activity,
.crow:focus-within .crow__activity { opacity: 1; }

.crow__type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
/* Serif for the figures, sans for the labels — that pairing is what keeps a
   52px line readable. Do not normalise it to one family. */
.crow__area,
.crow__beds { font-family: var(--serif); font-size: 17px; }
.crow__asking { text-align: right; white-space: nowrap; }
.crow__perm {
  margin-right: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}
.crow__price {
  font-family: var(--serif);
  font-size: 20px;
}

/* ---- The corner preview -------------------------------------------------- */

.preview {
  position: fixed;
  right: var(--pad-hero);
  bottom: 40px;
  z-index: 3;
  width: 290px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.35s var(--ease);
}
.preview[hidden] { display: none; }
.preview.is-shown { opacity: 1; transform: translateY(0); }
.preview__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2; height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.preview__media img { width: 100%; height: 100%; object-fit: cover; }
.preview__hatch {
  position: absolute;
  inset: 0;
  background-size: 22px 22px;
  opacity: 0.5;
}
.preview__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--on-photo-rgb), 0.4) 0 1px, transparent 1px 8px); }
.preview__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--on-photo-rgb), 0.35) 0 1px, transparent 1px 9px); }
.preview__hatch--3 { background-image: radial-gradient(rgba(var(--on-photo-rgb), 0.4) 1px, transparent 1.6px); }
.preview__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.5) 0 1px, transparent 1px 7px); }
.preview__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 16px 15px;
}
.preview__meta {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.preview__title { font-family: var(--serif); font-size: 21px; line-height: 1.1; }
.preview__location { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.58); }

@media (max-width: 1179px) {
  /* Type is the first column to go — it is the one the title already implies,
     and the rest tighten to the narrower schedule: 50 / 1fr / 100 / 90 / 150.
     Widths still carry the 18px gap, and the end columns the 16px edge. */
  .reg__col--type,
  .reg__th--type,
  .crow__type { display: none; }
  .reg__col--sheet { width: 84px; }
  .reg__col--area { width: 118px; }
  .reg__col--beds { width: 108px; }
  .reg__col--asking { width: 166px; }
  .crow__link { font-size: 18px; }
}

@media (max-width: 767px) {
  /* Below 768 the register stops being a table of columns and becomes two lines
     per file — the name on top, the figures under it — because five columns of
     8px labels are not readable at 375. The <caption> stays in the markup so
     the block is still announced as a table; the visual column header has
     nothing left to label, so it goes.

     The row grows to 68px here. That is deliberate: the 52px desktop line
     already clears a 44px touch target, but a two-line row wants the room.

     Every cell rule below is written as `.crow > td…` so it outweighs the
     `.crow td` reset above it — a bare `.crow__area` loses to it on
     specificity and the row falls apart into six stacked lines. */
  .reg,
  .reg__body,
  .crow { display: block; }
  .reg__head { display: none; }

  .crow {
    padding: 12px 0;
    min-height: 68px;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.11);
  }
  .crow > td {
    display: inline;
    height: auto;
    padding: 0;
    border-bottom: none;
  }
  .crow:hover > td,
  .crow:focus-within > td { background: none; }
  .crow:hover,
  .crow:focus-within { background: rgba(var(--accent-rgb), 0.07); }

  /* The sheet number goes to the top corner rather than taking a line of its
     own — this is the density page, and a line per row here is 33 lines. */
  .crow > td.crow__sheet {
    position: absolute;
    top: 12px;
    right: 0;
    color: var(--accent);
  }
  .crow > td.crow__file { display: block; padding-right: 40px; }
  .crow > td.crow__type { display: none; }
  .crow__link { display: block; white-space: normal; font-size: 20px; }
  .crow__location { display: inline; white-space: normal; }
  /* No hover on touch — the plate the desktop reveals is simply shown. */
  .crow__activity { display: inline; margin-left: 10px; opacity: 1; }

  /* Second line: the figures, separated the way the sheet writes them */
  .crow > td.crow__area,
  .crow > td.crow__beds { font-size: 15px; }
  .crow > td.crow__area::after,
  .crow > td.crow__beds::after { content: ' · '; color: rgba(var(--ink-rgb), 0.3); }
  .crow > td.crow__asking { text-align: left; }
  .crow__perm { display: none; }
  .crow__price { font-size: 17px; }

  /* Tapping a row opens the property — there is nothing left for a preview to
     add, and no pointer to trigger it. */
  .preview { display: none; }
}

/* ==========================================================================
   41. Listing page — map beside the list
   -----------------------------------------------------------------------------
   The geography view. Both columns are exactly the same height and the list
   scrolls inside its own column, so the map never leaves the viewport — if the
   list grew the page instead, the page would lose its reason to exist.

   Leaflet ships in assets/vendor/leaflet/ and draws into `.mapcanvas`. Only the
   pin chips are styled here; everything else Leaflet paints is left alone
   apart from the panel colours below, which follow the theme.
   ========================================================================== */

.listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.listbar__meta {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 16px;
  height: 860px;
}
.split__list {
  height: 860px;
  overflow-y: auto;
  /* The scrollbar is inside the column, so keep the cards clear of it. */
  padding-right: 4px;
}
.split__map {
  position: relative;
  /* Leaflet stacks its own panes and controls from 400 up to 1000. Left loose
     they compete at the root level and cover the sticky header and the filters
     modal, which sit at 40 and 90. `z-index: 0` turns this frame into a
     stacking context, so the whole map — panes, controls, counter chip — is
     confined to one level and everything on the page keeps its order. */
  z-index: 0;
  height: 860px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.mapcanvas {
  width: 100%;
  height: 100%;
  background: rgba(var(--ink-rgb), 0.06);
}
/* Without JavaScript Leaflet never runs and the frame stays empty — say so,
   and point at the list, which carries every file the map would have shown. */
.mapcanvas__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-muted);
}
.js .mapcanvas__fallback { display: none; }

/* ---- The list ------------------------------------------------------------ */

.mapcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.mapcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.3s ease, transform 0.35s var(--ease);
}
.mapcard[hidden] { display: none; }
.mapcard:hover,
.mapcard:focus-visible,
.mapcard.is-active {
  border-color: var(--accent);
  transform: translateY(-3px);
  color: inherit;
}
.mapcard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.13);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.mapcard__deal { color: var(--accent); }
.mapcard__media {
  position: relative;
  display: block;
  /* 380px по просьбе владельца, вместо прежних 200. Правило общее для
     четырёх карт: half-map, map-list, map-drawer, top-map. */
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.mapcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mapcard__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  background-size: 20px 20px;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.mapcard:hover .mapcard__hatch,
.mapcard.is-active .mapcard__hatch { opacity: 0.7; }
.mapcard__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.mapcard__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.35) 0 1px, transparent 1px 9px); }
.mapcard__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.mapcard__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.5) 0 1px, transparent 1px 7px); }
.mapcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 8px;
}
.mapcard__kind {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.mapcard__title { font-family: var(--serif); font-size: 22px; line-height: 1.12; }
.mapcard__location { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.58); }
.mapcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.13);
}
.mapcard__facts {
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.58);
}
.mapcard__prices { display: flex; align-items: baseline; gap: 10px; }
.mapcard__price { font-family: var(--serif); font-size: 20px; }
.mapcard__perm {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Rows: same card, photograph moved to the left. The toggle is a pair of
   radios, so the layout changes without any script.

   The row is a fixed height and the photo column is that height in 16:9 — one
   variable drives both, so the frame fills the row edge to edge and there is
   never a strip of dead panel under it. Deriving the width from the frame
   instead (an `auto` track plus `aspect-ratio`) looks equivalent and is not:
   the track then falls back to the <img>'s own 900px whenever the row is wide
   enough to allow it, and the photograph balloons across the card. */
.listing--map:has(#mapview-rows:checked) .mapcards {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.listing--map:has(#mapview-rows:checked) .mapcard {
  --row-h: 176px;
  display: grid;
  grid-template-columns: calc(var(--row-h) * 16 / 9) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  /* Plus the hairline top and bottom, so --row-h stays the content height. */
  height: calc(var(--row-h) + 2px);
}
.listing--map:has(#mapview-rows:checked) .mapcard__media {
  grid-row: 1 / -1;
  align-self: stretch;
  height: auto;
}
/* The row is a fixed height, so a long title has to hold one line rather than
   push the sheet out of the card. */
.listing--map:has(#mapview-rows:checked) .mapcard__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing--map:has(#mapview-rows:checked) .mapcard__strip { padding: 10px 16px 10px 0; }
.listing--map:has(#mapview-rows:checked) .mapcard__body { padding: 10px 16px 8px 0; }
.listing--map:has(#mapview-rows:checked) .mapcard__foot { padding: 10px 16px 12px 0; }
.listing--map:has(#mapview-rows:checked) .mapcard__title { font-size: 20px; }

/* ---- The counter chip ---------------------------------------------------- */

.mapchip {
  position: absolute;
  top: 14px;
  left: 14px;
  /* Above every Leaflet pane, which top out at 500. */
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.62);
}
.mapchip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.mapchip__sep {
  width: 1px;
  height: 12px;
  background: rgba(var(--ink-rgb), 0.2);
}
.mapchip__price { color: var(--accent); }

/* ---- Pins ---------------------------------------------------------------- */

.pin {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  background: var(--pin-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.25);
}
.pin__label { font-size: 12px; opacity: 0.75; }
/* `--active` is the card under the pointer on a listing; `--here` is the
   subject of a detail page, which is the same thing to look at and so is the
   same rule rather than a second copy of it. */
.pin--active,
.pin--here { background: var(--accent); color: var(--on-accent); }
/* A point of interest is not a file: same component, muted, so the subject
   stays the only accent on the map. */
.pin--poi {
  padding: 4px 9px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
}
/* Leaflet anchors a marker by a pixel offset, which centres exactly one label
   width. Centring by transform instead keeps every plate on its own point
   however long the word is. */
.streetpin > .pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

/* Leaflet's own furniture, brought onto the palette */
.leaflet-container { background: rgba(var(--ink-rgb), 0.06); font-family: var(--sans); }
/* The basemap is standard OpenStreetMap — see the note on `MAP_TILES` in
   main.js. It needs no filter: `invert()` was tried on the old dark tiles and
   is exactly what makes the labels unreadable (§5c). Leaflet's own furniture
   below is brought onto the palette so the light tiles sit inside a dark frame
   rather than fighting it. */
.leaflet-bar a,
.leaflet-control-attribution {
  background: var(--panel);
  color: var(--ink-body);
}
.leaflet-bar a { border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--panel-hover); color: var(--accent); }
.leaflet-control-attribution a { color: var(--accent); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
}
.leaflet-popup-content { font-size: 12px; font-weight: 300; }
.leaflet-popup-content b { font-family: var(--serif); font-size: 17px; font-weight: 400; }

@media (max-width: 1179px) {
  /* Stack: the map sits on top and stays put while the list scrolls past it. */
  .split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 18px;
  }
  .split__list { height: auto; overflow: visible; padding-right: 0; }
  .split__map {
    position: sticky;
    /* Under the site header: utility bar 38 + nav 92. */
    top: 130px;
    z-index: 20;
    height: 420px;
    order: -1;
  }
  /* The row carries the same content at this width, so it keeps the same
     height — and with it the same 16:9 frame. Nothing to override. */
}

@media (max-width: 767px) {
  .mapcards { grid-template-columns: minmax(0, 1fr); }
  /* Пропорция, а не 180px: в одну колонку карточка во всю ширину экрана,
     и фиксированная высота даёт полосу 2:1 вместо фотографии. Правило
     листингов этого сайта — снимок держит 3:2 на любой ширине. */
  .mapcard__media { aspect-ratio: 3 / 2; height: auto; }
  .split__map { height: 320px; }
  /* One column of full-width cards is the row layout already — the toggle has
     nothing left to switch, so it goes rather than doing nothing. */
  .mapview { display: none; }
  .listing--map:has(#mapview-rows:checked) .mapcard {
    display: flex;
    flex-direction: column;
    /* The row is a stacked card again here, so the fixed row height that gives
       the desktop frame its 16:9 has to go with it. */
    height: auto;
  }
  .listing--map:has(#mapview-rows:checked) .mapcard__title { white-space: normal; }
  .listing--map:has(#mapview-rows:checked) .mapcard__media { aspect-ratio: 3 / 2; height: auto; }
  .listing--map:has(#mapview-rows:checked) .mapcard__strip { padding: 10px 14px; }
  .listing--map:has(#mapview-rows:checked) .mapcard__body { padding: 14px 16px 8px; }
  .listing--map:has(#mapview-rows:checked) .mapcard__foot { padding: 12px 16px 14px; }
}

@media (hover: none) {
  /* No pointer: the pin has to be a 44px tap target, not an 11px chip. The
     minimum is stated outright rather than inferred from padding, so it holds
     whatever the price string does to the chip's height. */
  .pin {
    min-height: 44px;
    padding: 0 16px;
    font-size: 12px;
  }
}

/* ==========================================================================
   42. Listing page — half map (map-led)
   -----------------------------------------------------------------------------
   The other way round from `map-list`: the map takes the free width and the
   files sit in a fixed 560px rail beside it. The two halves share one border
   and there is no gap between them — that is what makes the block read as one
   instrument rather than two panels, so do not add a gap or a radius.

   The card is the same `.mapcard` component the map page uses, laid on its side
   and given a marker strip: block 9d in the script finds it, its pin and its
   price by the same hooks on both pages.
   ========================================================================== */

/* Named `mapsplit`, not `frame`: `.frame` is the home page's bento tile and it
   is defined earlier in this file, so a second `.frame` here silently gave every
   tile on the home page this block's `margin-top: 24px` — twenty-four pixels
   shorter than its own grid row. Check a new block name against the sheet
   before using it. */
.mapsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  margin-top: 24px;
  border: 1px solid var(--line);
}
.mapsplit__map {
  position: relative;
  min-height: 720px;
  /* Leaflet stacks its panes and controls up to 1000; without a stacking
     context of its own the map would cover the header and the modals. */
  z-index: 0;
}
.mapsplit__map .mapcanvas {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
.mapsplit__rail {
  display: flex;
  flex-direction: column;
  /* 40px more than the map's minimum, so the rail can end mid-card — that is
     the cue that there is more to scroll. */
  max-height: 760px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}

.railhead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.railhead__price {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.railhead__rule { width: 34px; height: 1px; background: var(--accent); }

/* ---- The rail card ------------------------------------------------------- */

.mapcards--rail { display: block; }

.mapcard--rail {
  position: relative;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 15px 16px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.13);
  background: transparent;
  transition: background 0.25s ease, opacity 0.3s ease;
}
.mapcard--rail:hover,
.mapcard--rail:focus-visible,
.mapcard--rail.is-active {
  transform: none;
  background: rgba(var(--accent-rgb), 0.05);
}
/* One file at a time holds the rail: the rest step back rather than compete.
   Two triggers, because focus arrives two ways — the pointer over the rail, and
   a pin clicked on the map, which sets `.is-active` with no cursor here at all.
   The `:hover` pair also keeps the behaviour alive with the script switched off.
   The step-back is written as `:not(...)` rather than as a pair of rules, so
   the exception cannot lose to the dim on specificity. */
.mapcards--rail:hover .mapcard--rail:not(:hover),
.mapcards--rail:focus-within .mapcard--rail:not(:focus-within),
.mapcards--rail:has(.mapcard--rail.is-active) .mapcard--rail:not(.is-active) { opacity: 0.7; }

/* The rail's equivalent of a selected row */
.mapcard__marker {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.3s ease;
}
.mapcard--rail:hover .mapcard__marker,
.mapcard--rail:focus-within .mapcard__marker,
.mapcard--rail.is-active .mapcard__marker { background: var(--accent); }

.mapcard--rail .mapcard__media {
  width: 208px;
  height: 117px;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}
.mapcard--rail:hover .mapcard__media,
.mapcard--rail:focus-within .mapcard__media,
.mapcard--rail.is-active .mapcard__media { border-color: var(--accent); }
.mapcard--rail .mapcard__hatch {
  top: 0;
  right: 0;
  bottom: auto;
  width: 40px;
  height: 40px;
  background-size: 9px 9px;
}
/* The badge carries the same label as the pin on the map, so the card and its
   chip can be read as one object. */
.mapcard__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 3px 7px;
  background: rgba(var(--scrim-rgb), 0.9);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.12em;
  transition: background 0.3s ease, color 0.3s ease;
}
.mapcard--rail:hover .mapcard__badge,
.mapcard--rail:focus-within .mapcard__badge,
.mapcard--rail.is-active .mapcard__badge { background: var(--accent); color: var(--on-accent); }

.mapcard__sheet {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mapcard--rail .mapcard__strip {
  align-items: baseline;
  padding: 0;
  border-bottom: none;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.mapcard--rail .mapcard__kind { font-size: 12px; letter-spacing: 0.18em; }
.mapcard__rev { color: var(--ink-muted); }
.mapcard--rail .mapcard__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 21px;
  line-height: 1.08;
}
.mapcard__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.55);
}
.mapcard__band {
  display: block;
  height: 2px;
  margin-top: 3px;
  background: rgba(var(--ink-rgb), 0.12);
}
.mapcard__band-fill {
  display: block;
  height: 2px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}
.mapcard__band-fill--38 { width: 38%; }
.mapcard__band-fill--46 { width: 46%; }
.mapcard__band-fill--58 { width: 58%; }
.mapcard__band-fill--64 { width: 64%; }
.mapcard__band-fill--72 { width: 72%; }
.mapcard__band-fill--80 { width: 80%; }

.mapcard--rail .mapcard__foot {
  align-items: baseline;
  margin-top: auto;
  padding: 8px 0 0;
  border-top: none;
}
.mapcard--rail .mapcard__price { font-size: 19px; }
.mapcard__note { display: flex; align-items: center; gap: 8px; }
.mapcard__activity {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mapcard--rail:hover .mapcard__activity,
.mapcard--rail:focus-within .mapcard__activity,
.mapcard--rail.is-active .mapcard__activity { opacity: 1; }
.mapcard--rail .mapcard__perm { transition: color 0.3s ease; }
.mapcard--rail:hover .mapcard__perm,
.mapcard--rail:focus-within .mapcard__perm,
.mapcard--rail.is-active .mapcard__perm { color: var(--accent); }

@media (max-width: 1179px) {
  /* The rail gives up 140px and the photograph shrinks with it; the map keeps
     the rest, down to a floor of 620px. */
  .mapsplit { grid-template-columns: minmax(0, 1fr) 420px; }
  .mapsplit__map { min-height: 620px; }
  .mapsplit__rail { max-height: 660px; }
  .mapcard--rail { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
  .mapcard--rail .mapcard__media { width: 150px; height: 84px; }
  .mapcard--rail .mapcard__title { font-size: 19px; }
}

@media (max-width: 767px) {
  /* No room for two columns: the map takes a band of its own and the rail
     becomes the ordinary list underneath it, full width. */
  .mapsplit { grid-template-columns: minmax(0, 1fr); }
  .mapsplit__map { min-height: 0; height: 320px; }
  .mapsplit__rail {
    max-height: none;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .railhead { position: static; }
  .mapcard--rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .mapcard--rail .mapcard__media { width: 100%; height: 180px; }
  .mapcard--rail .mapcard__title { white-space: normal; font-size: 20px; }
  .mapcard__meta { white-space: normal; }
  /* Nothing to hover with: the note that reveals on the desktop is shown. */
  .mapcard__activity { opacity: 1; }
  .mapcards--rail:hover .mapcard--rail { opacity: 1; }
}

/* ==========================================================================
   43. Listing page — map with drawer (map-first)
   -----------------------------------------------------------------------------
   The third and last shape in the map family. `map-list` splits the width in
   two, `half-map` gives the files a fixed rail, and here the map keeps the
   whole frame and the files slide in over it in a drawer that can be dismissed.

   Two rules hold the whole thing up:
   `overflow: hidden` on the frame — that is what lets the drawer be positioned
   absolutely inside it and be genuinely gone when closed rather than hanging
   off the page; and the drawer animating on **transform only** — moving its
   width or its `right` would reflow the map and make Leaflet re-render tiles
   through the whole animation.
   ========================================================================== */

.mapframe {
  position: relative;
  /* Leaflet's panes climb to 1000; a stacking context of its own keeps the map
     and the drawer under the site header and the modals. */
  z-index: 0;
  height: 780px;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--line-strong);
}
.mapframe .mapcanvas {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
}

.mapchip--drawer {
  top: 18px;
  left: 18px;
  z-index: 600;
  gap: 12px;
  padding: 10px 16px;
  border-color: var(--line-strong);
  background: var(--panel-solid);
}

/* Rides the drawer's edge: same duration and easing as the panel, so it reads
   as a handle attached to it rather than a control that jumps on its own. */
.drawertoggle {
  position: absolute;
  top: 68px;
  right: 18px;
  z-index: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(var(--shadow-rgb), 0.45);
  transition: right 0.42s var(--ease), background 0.25s ease, color 0.25s ease;
}
.drawertoggle:hover { background: var(--accent); color: var(--on-accent); }
.drawertoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapframe:has(.drawer.is-open) .drawertoggle { right: 478px; }

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 650;
  display: flex;
  flex-direction: column;
  width: 460px;
  background: var(--panel-solid);
  border-left: 1px solid var(--line-strong);
  /* Directional, so the panel reads as floating over the map. */
  box-shadow: -20px 0 44px -26px rgba(var(--shadow-rgb), 0.5);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.drawer__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.drawer__close:hover { border-color: var(--accent); color: var(--accent); }
.drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The grip belongs to the bottom sheet — on the desktop drawer there is
   nothing to drag. */
.drawer__grip { display: none; }

.drawer__list { flex: 1; overflow-y: auto; }
.mapcards--drawer { display: block; }

/* ---- The drawer card ----------------------------------------------------- */

.mapcard--drawer {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background: transparent;
  transition: background 0.25s ease;
}
.mapcard--drawer:hover,
.mapcard--drawer:focus-visible,
.mapcard--drawer.is-active {
  transform: none;
  background: rgba(var(--accent-rgb), 0.05);
}
.mapcard--drawer .mapcard__media {
  width: 150px;
  height: 84px;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}
.mapcard--drawer:hover .mapcard__media,
.mapcard--drawer:focus-within .mapcard__media,
.mapcard--drawer.is-active .mapcard__media { border-color: var(--accent); }
.mapcard--drawer:hover .mapcard__marker,
.mapcard--drawer:focus-within .mapcard__marker,
.mapcard--drawer.is-active .mapcard__marker { background: var(--accent); }
.mapcard--drawer:hover .mapcard__badge,
.mapcard--drawer:focus-within .mapcard__badge,
.mapcard--drawer.is-active .mapcard__badge { background: var(--accent); color: var(--on-accent); }
.mapcard--drawer .mapcard__sheet { gap: 4px; }
.mapcard--drawer .mapcard__strip {
  align-items: baseline;
  padding: 0;
  border-bottom: none;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.mapcard--drawer .mapcard__kind { font-size: 12px; letter-spacing: 0.16em; }
.mapcard--drawer .mapcard__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  line-height: 1.08;
}
.mapcard--drawer .mapcard__foot {
  align-items: baseline;
  margin-top: auto;
  padding: 6px 0 0;
  border-top: none;
}
.mapcard--drawer .mapcard__price { font-size: 17px; }
.mapcard--drawer .mapcard__perm { letter-spacing: 0.12em; transition: color 0.3s ease; }
.mapcard--drawer:hover .mapcard__perm,
.mapcard--drawer:focus-within .mapcard__perm,
.mapcard--drawer.is-active .mapcard__perm { color: var(--accent); }

@media (max-width: 1179px) {
  /* The map is the point of the page, so it keeps its width and the drawer
     gives some back — and starts closed, so the map is what you see first. */
  .mapframe { height: 640px; }
  .drawer { width: 380px; }
  .mapframe:has(.drawer.is-open) .drawertoggle { right: 398px; }
  .mapcard--drawer { grid-template-columns: 130px minmax(0, 1fr); }
  .mapcard--drawer .mapcard__media { width: 130px; height: 73px; }
  .mapcard--drawer .mapcard__title { font-size: 18px; }
}

@media (max-width: 767px) {
  /* Below 768 the drawer is a bottom sheet: full width, sliding up on
     translateY through three snap points. The toggle becomes a pill centred
     at the bottom, and it no longer rides an edge — it raises the sheet. */
  .mapframe { height: 70vh; min-height: 480px; }
  .drawer {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    /* The sheet is as tall as the frame, not as tall as the viewport: the frame
       clips its overflow, and a 90vh sheet inside a 70vh frame loses its handle
       and header off the top at the full snap. Every snap below is a share of
       the sheet's own height, so none of them can overflow. */
    height: 100%;
    border-left: none;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -20px 44px -26px rgba(var(--shadow-rgb), 0.5);
    /* Closed sits just under the frame's edge; the snap points raise it. */
    transform: translateY(100%);
    transition: transform 0.42s var(--ease);
  }
  .drawer.is-open,
  .drawer.is-peek { transform: translateY(calc(100% - 120px)); }
  .drawer.is-half { transform: translateY(50%); }
  .drawer.is-full { transform: translateY(0); }

  .drawer__grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: rgba(var(--ink-rgb), 0.3);
    cursor: grab;
    /* The handle is the drag target, so it needs a real one, not a 4px line. */
    padding: 12px 0;
    background-clip: content-box;
    box-sizing: content-box;
  }
  .drawer.is-dragging { transition: none; }
  .drawer__head { padding: 4px 18px 14px; }

  .drawertoggle {
    top: auto;
    right: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    transition: background 0.25s ease, color 0.25s ease;
  }
  .mapframe:has(.drawer.is-open) .drawertoggle { right: auto; }

  .mapcard--drawer { grid-template-columns: 120px minmax(0, 1fr); }
  .mapcard--drawer .mapcard__media { width: 120px; height: 68px; }
  .mapcard--drawer .mapcard__title { font-size: 17px; }
}

/* ==========================================================================
   44. Listing page — map overhead
   -----------------------------------------------------------------------------
   The last shape in the map family, and the only one where the map and the
   cards never share a horizontal line: a shallow band across the top, then the
   search panel, then an ordinary four-column grid.

   420px is a deliberate proportion — roughly 4:1 at desktop width, so it reads
   as a plan drawing across the top of a sheet rather than a map you work
   inside. Growing it past ~480px takes the focus off the grid.

   Because the map sits above rather than beside, two things differ from the
   other three: the band is sticky (a pin highlight is wasted if the map has
   scrolled away), and pins cluster one zoom step earlier, since a 420px
   letterbox has far less vertical room before chips collide.
   ========================================================================== */

.mapband {
  position: sticky;
  /* Under the site header: utility bar 38 + nav 92. */
  top: 130px;
  /* Over the grid, under the header and the modals; also the stacking context
     that keeps Leaflet's own 400–1000 from reaching the rest of the page. */
  z-index: 5;
  height: 420px;
  margin-bottom: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.mapband .mapcanvas {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
.mapchip--band { top: 16px; left: 16px; z-index: 600; }

/* Mobile only: a 240px band is orientation, not a map you can work in. */
.mapband__full {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 600;
  display: none;
  padding: 10px 16px;
  border: 1px solid var(--accent);
  background: var(--panel-solid);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- The grid ------------------------------------------------------------ */

.mapcards--top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.mapcard--top { position: relative; }
.mapcard--top:hover,
.mapcard--top:focus-visible,
.mapcard--top.is-active { border-color: var(--accent); transform: translateY(-4px); }

/* On this card the hatch marks the top corner, clear of the pin badge below. */
.mapcard--top .mapcard__hatch {
  top: 0;
  right: 0;
  bottom: auto;
  width: 54px;
  height: 54px;
}
.mapcard--top:hover .mapcard__hatch,
.mapcard--top:focus-within .mapcard__hatch,
.mapcard--top.is-active .mapcard__hatch { opacity: 0.7; }
.mapcard--top:hover .mapcard__badge,
.mapcard--top:focus-within .mapcard__badge,
.mapcard--top.is-active .mapcard__badge { background: var(--accent); color: var(--on-accent); }

.mapcard--top .mapcard__body { padding-bottom: 12px; }
.mapcard--top .mapcard__meta { font-size: 12px; }
.mapcard--top .mapcard__band { margin-top: 8px; }
.mapcard--top .mapcard__perm { letter-spacing: 0.14em; transition: color 0.3s ease; }
.mapcard--top:hover .mapcard__perm,
.mapcard--top:focus-within .mapcard__perm,
.mapcard--top.is-active .mapcard__perm { color: var(--accent); }

@media (max-width: 1179px) {
  .mapband { height: 320px; }
  .mapcards--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapcard--top .mapcard__media { height: 180px; }
}

@media (max-width: 767px) {
  /* Not sticky here: 240px of map pinned over a single column of cards would
     eat the screen. The band becomes a glance, and `Full map` hands the
     visitor to the page that is built for working inside a map. */
  .mapband {
    position: static;
    height: 240px;
  }
  /* It only ever appears on touch, so it has to clear a 44px tap target. */
  .mapband__full {
    display: grid;
    place-items: center;
    min-height: 44px;
  }
  .mapcards--top { grid-template-columns: minmax(0, 1fr); }
  .mapcard--top .mapcard__media { height: 200px; }
  .mapcard--top .mapcard__title { font-size: 22px; }
}

/* ==========================================================================
   45. Mortgage calculator — five sheets of arithmetic
   -----------------------------------------------------------------------------
   The only page on the site whose content is entirely computation. Five
   calculators stacked down one sheet, numbered like drawings in a set.

   The rhythm is what makes it read as one document rather than five widgets:
   40px between sheets, a hairline above every sheet but the first, and the
   same horizontal padding as every other page. Numbers are always Instrument
   Serif — that is what keeps it a set of drawings instead of a web form.
   ========================================================================== */

/* The rule belongs to each sheet *after* the first, so it is written as a
   sibling selector. `:first-of-type` would not do it: the page-header band is
   a <section> too, so the first sheet is never the first section. */
.sheet { margin: 0 var(--pad-hero); }
.sheet + .sheet {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
/* The gap down to the footer. The README says 40px; the prototype sets
   clamp(48px, 6vh, 72px) on the last sheet, and the owner asked for 60 — which
   sits in the middle of what the drawing actually does. */
.sheet:last-child { margin-bottom: 60px; }

.sheet__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sheet__program { color: var(--accent); }
.sheet__rule { width: 48px; height: 1px; background: var(--accent); }
.sheet__no { color: var(--ink-muted); }
/* Affordability is a budget, not a product — it gets the lighter accent. */
.sheet--soft .sheet__program,
.sheet--soft .sheet__no { color: var(--accent-soft); }
.sheet--soft .sheet__rule { background: var(--accent-soft); }

.sheet__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.05;
}
.sheet__title em { font-style: italic; color: var(--accent); }
.sheet--soft .sheet__title em { color: var(--accent-soft); }

/* The only wayfinding on a very long page. */
.sheetindex {
  position: sticky;
  top: 130px;
  z-index: 6;
  margin: 0 var(--pad-hero) 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
  background: var(--bg);
}
.sheetindex ol {
  display: flex;
  gap: 10px;
  list-style: none;
}
.sheetindex a {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
.sheetindex a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- The sheet bodies ---------------------------------------------------- */

.mgrid { display: grid; align-items: stretch; margin-top: 24px; }
.mgrid--01 { grid-template-columns: 1.1fr 1fr; gap: 24px; }
.mgrid--02 { grid-template-columns: 1.12fr 1fr; gap: 26px; }
.mgrid--04 { grid-template-columns: 1fr 1fr 1.05fr; gap: 22px; }
.mgrid--05 { grid-template-columns: 1fr 1.25fr; gap: 24px; }

.ccard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ccard--proposal { border-color: var(--accent); }
.ccard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Both cards on a sheet end on the same line: the body takes the slack and
   spreads its fields rather than leaving a gap at the bottom. */
.ccard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 18px;
  padding: 24px 24px 28px;
}
.ccard__sub {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ccard__note,
.mnote {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}
.mnote strong { font-weight: 500; color: var(--ink); }
.ccard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ccard__foot-value { font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ccard__foot--accent .ccard__foot-value { color: var(--accent); }
.ccard__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mrow--costs { gap: 16px 18px; }

/* ---- Fields -------------------------------------------------------------- */

.mfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mfield__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mfield__control {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid var(--line-input);
  padding-bottom: 5px;
}
.mfield__affix { font-size: 12px; color: var(--ink-muted); }
.mfield__input {
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
}
.mfield__input:focus { outline: none; }
.mfield__control:focus-within { border-bottom-color: var(--accent); }
.mrow--costs .mfield__input { font-size: 20px; }
/* Derived, not editable: a dotted rule says so before anyone tries to type. */
.mfield--derived .mfield__control { border-bottom-style: dotted; }
.mfield__input--derived { color: var(--ink-muted); }
.mfield__note {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mseg { display: flex; flex-direction: column; gap: 6px; }
.mseg__row { display: flex; border: 1px solid var(--line); }
.mseg__btn {
  flex: 1;
  padding: 11px 6px;
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mseg__btn:last-of-type { border-right: none; }
.mseg__btn:hover { color: var(--accent); }
.mseg__input:checked + .mseg__btn { background: var(--accent); color: var(--on-accent); }
.mseg__input:focus-visible + .mseg__btn { outline: 2px solid var(--accent); outline-offset: -3px; }

.mslider { display: flex; flex-direction: column; gap: 8px; }
.mslider__value { color: var(--accent); letter-spacing: 0.1em; }
.mslider__input {
  width: 100%;
  height: 3px;
  accent-color: var(--accent);
}
.mslider__ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mcheck { display: flex; align-items: center; gap: 10px; }
.mcheck__input { width: 15px; height: 15px; accent-color: var(--accent); }
.mcheck__label { font-size: 12px; font-weight: 300; color: var(--ink-body); cursor: pointer; }

/* ---- The donut ----------------------------------------------------------- */

.mdonut { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; align-items: center; }
.mdonut__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  /* Replaced from the script with the live slices. */
  background: conic-gradient(var(--line) 0 100%);
}
.mdonut__hole {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--panel-inner);
  text-align: center;
}
.mdonut__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mdonut__total { font-family: var(--serif); font-size: 24px; line-height: 1; }

.mlegend { display: flex; flex-direction: column; }
.mlegend__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.mlegend__row[hidden] { display: none; }
.mlegend__row:last-child { border-bottom: none; }
.mlegend__chip { width: 10px; height: 10px; }
.mlegend__chip--pi { background: var(--accent); }
.mlegend__chip--tax { background: var(--ink-muted); }
.mlegend__chip--ins { background: var(--accent-soft); }
.mlegend__chip--hoa { background: rgba(var(--ink-rgb), 0.3); }
.mlegend__chip--pmi { background: var(--bad); }
.mlegend__chip--mip { background: var(--bad); }
.mlegend__value { font-family: var(--serif); font-size: 15px; color: var(--ink); }

/* ---- Totals, bands, comparison ------------------------------------------- */

.mtotals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.mtotals__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-right: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
.mtotals__cell:nth-child(2n) { border-right: none; }
.mtotals__cell:nth-last-child(-n + 2) { border-bottom: none; }
.mtotals__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mtotals__value { font-family: var(--serif); font-size: 21px; line-height: 1; }
.mtotals__value--good { color: var(--good); }
.mtotals__value--bad { color: var(--bad); }

.mband__head {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.mband__table { width: 100%; border-collapse: collapse; font-size: 12px; font-weight: 300; }
.mband__table th,
.mband__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-faint);
  text-align: left;
  font-weight: 400;
}
.mband__table thead th {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mband__table tbody th { font-weight: 300; color: var(--ink-body); }
.mband__table td { font-family: var(--serif); font-size: 14px; }
/* The row the current deposit lands in — and the next one worth reaching. */
.mband__table tr.is-current th,
.mband__table tr.is-current td { color: var(--accent); }

.mcompare__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mcompare__value { font-family: var(--serif); font-size: 19px; letter-spacing: 0; color: var(--ink); }
.mcompare__row:first-of-type .mcompare__value { color: var(--accent); }

/* ---- Break-even chart ---------------------------------------------------- */

/* The plot takes whatever height the card has rather than sitting at a fixed
   150px inside a taller box — that left a band of empty panel above the bars. */
.mchart { display: flex; flex-direction: column; flex: 1; }
.mchart__plot {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-height: 150px;
}
.mchart__bar { position: relative; flex: 1; }
.mchart__bar span { position: absolute; left: 0; right: 0; }
.mchart__bar--pos span { background: var(--good); }
.mchart__bar--neg span { background: var(--bad); }
.mchart__zero {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.35);
}
/* The line hangs from under its own label, not through it. */
.mchart__mark {
  position: absolute;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--accent);
}
.mchart__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Affordability ------------------------------------------------------- */

.mheadline { display: flex; flex-direction: column; gap: 6px; }
.mheadline__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mheadline__value { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent-soft); }
.mscale { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1179px) {
  .sheet__title { font-size: 38px; }
  .mgrid--01,
  .mgrid--02,
  .mgrid--05 { grid-template-columns: minmax(0, 1fr); }
  /* Old and new loan side by side, the verdict full width underneath. */
  .mgrid--04 { grid-template-columns: 1fr 1fr; }
  .mgrid--04 .ccard:last-child { grid-column: 1 / -1; }
  .mdonut { grid-template-columns: 128px minmax(0, 1fr); }
  .mdonut__ring { width: 128px; height: 128px; }
  .mdonut__hole { width: 96px; height: 96px; }
}

@media (max-width: 767px) {
  /* Same sibling selector as above, or the desktop rule wins on specificity.
     The gap to the footer stays 40px at every width — only the space between
     sheets tightens here. */
  .sheet + .sheet { margin-top: 32px; padding-top: 32px; }
  .sheet__title { font-size: 30px; }
  .sheet__eyebrow { flex-wrap: wrap; gap: 8px; }
  .sheet__rule { display: none; }

  .mgrid--04 { grid-template-columns: minmax(0, 1fr); }
  .mrow { grid-template-columns: minmax(0, 1fr); }
  /* Legend under the donut rather than beside it. */
  .mdonut { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
  .mdonut__ring { width: 120px; height: 120px; }
  .mdonut__hole { width: 90px; height: 90px; }
  .mlegend { width: 100%; }
  .mchart__plot { height: 130px; }
  .mheadline__value { font-size: 36px; }

  /* Touch targets: thumbs, cells and boxes all clear 44px. */
  .mslider__input { height: 44px; }
  .mseg__btn { padding: 15px 6px; }
  .mcheck__input { width: 22px; height: 22px; }
  /* The box and its label are one target, and together they clear 44px. */
  .mcheck { min-height: 44px; }
  .mcheck__label { padding: 12px 0; }
  .sheetindex a { min-height: 44px; min-width: 44px; }
}

/* ---- Blocks the design carries that a plain form would not --------------- */

/* The lead under a sheet heading: what this calculator answers, in a sentence. */
.sheet__lead {
  max-width: 780px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

/* Term buttons and the rate slider share a line, as on the drawing. */
.mrow--pair { grid-template-columns: 1fr 1fr; align-items: end; }
.mslider--split .mfield__label { display: flex; justify-content: space-between; gap: 10px; }
.mslider--split .mslider__input { margin-top: 9px; }

/* Every yearly cost also says what it comes to a month. */
.mfield__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mfield__side { color: var(--accent); letter-spacing: 0.1em; }
.ccard__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.mtotals--three { grid-template-columns: repeat(3, 1fr); }
.mtotals--three .mtotals__cell:nth-child(2n) { border-right: 1px solid var(--line-faint); }
.mtotals--three .mtotals__cell:nth-child(3n) { border-right: none; }
.mtotals--three .mtotals__cell { border-bottom: none; }

/* What is still owed, year by year — the mid-term bar is picked out. */
.ccard--curve .ccard__body { justify-content: flex-start; }
.mcurve {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 120px;
  flex: 1;
}
.mcurve__bar { flex: 1; background: rgba(var(--ink-rgb), 0.28); }
.mcurve__bar--mid { background: var(--accent); }
.mcurve__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Go / no-go lines: the tick is the answer, the figure is the evidence. */
.mcheckrow {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.mcheckrow:last-child { border-bottom: none; }
.mcheckrow__mark { font-size: 12px; }
.mcheckrow__mark--ok { color: var(--good); }
.mcheckrow__mark--warn { color: var(--bad); }
.mcheckrow__mark--soft { color: var(--accent); }
.mcheckrow__value { font-family: var(--serif); font-size: 14px; color: var(--ink); }

/* One bar, split by where the money goes. */
.msplit__bar { display: flex; height: 8px; overflow: hidden; }
.msplit__slice { height: 8px; }
.msplit__keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.msplit__key {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.msplit__chip { width: 9px; height: 9px; }

.mtoggles { display: flex; flex-direction: column; gap: 4px; }
.mcheck__value {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 767px) {
  .mrow--pair { grid-template-columns: minmax(0, 1fr); }
  .mtotals--three { grid-template-columns: 1fr 1fr; }
  .mtotals--three .mtotals__cell { border-bottom: 1px solid var(--line-faint); }
  .mtotals--three .mtotals__cell:nth-child(2n) { border-right: none; }
  .mtotals--three .mtotals__cell:last-child { border-bottom: none; }
}

/* The result side is a column of two cards, not two cells of the page grid:
   the payment card with its totals attached, and the balance card taking
   whatever height is left so both columns end on the same line. */
/* A grid, not a flex column: `flex: 1` on the lower card only grows when the
   container has a definite height, and a percentage height against a grid area
   does not reliably give it one — the card kept its content height and left a
   gap under it. Two rows, the second taking whatever is left, is unambiguous. */
.mcol {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.ccard__body--tight { flex: 0 0 auto; justify-content: flex-start; }
.mtotals--attached { border: none; border-top: 1px solid var(--line); }

/* The unit shares the value's line, pushed to the right, and the rule runs
   under both of them — not under the value with the unit hanging below it. */
.mfield__hint {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ccard__head-live { color: var(--accent); }
.mdonut__hole .mdonut__total { order: -1; }
.mlegend__chip--principal { background: var(--accent); }
.mlegend__chip--interest { background: var(--ink-muted); }

/* Both sides of a sheet end on the same line. The result column sets the
   height here (donut, totals and the balance card), so the input card is told
   to fill it rather than stopping where its fields happen to end. */
.mgrid--01 { align-items: stretch; }
.mgrid--01 > .mcol,
.mgrid--01 > .ccard { height: 100%; }

/* The eligibility block reports its own verdict beside the title. */
.mband__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mchecks__badge { color: var(--good); }
.mchecks__badge--warn { color: var(--bad); }

/* The one line that carries the VA argument: there is no monthly insurance. */
.minsurance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.minsurance__value { font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--good); }

/* The FHA lead sits beside its heading, set to the right. */
.sheet__lead--right { margin-left: auto; text-align: right; }
.sheet__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }

/* Four stacked cards; the eligibility one absorbs whatever height is left. */
.mcol--02 { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* A tick in a ring reads as a verdict, not as decoration. */
.mcheckrow__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  font-size: 12px;
}
.mcheckrow { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; }
.ccard__actions .btn { flex: 1; text-align: center; }

/* The funding-fee table: label, how big it is, and the number. The band the
   current deposit lands in is lit; the rest step back so the next threshold
   worth reaching is easy to find. */
.mfee__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}
.mfee__label { white-space: nowrap; }
.mfee__bar { height: 2px; background: rgba(var(--ink-rgb), 0.14); }
.mfee__fill { display: block; height: 2px; background: rgba(var(--ink-rgb), 0.3); }
.mfee__fill--2-15 { width: 65%; }
.mfee__fill--3-3 { width: 100%; }
.mfee__fill--1-5 { width: 45%; }
.mfee__fill--1-25 { width: 38%; }
.mfee__pct { font-family: var(--serif); font-size: 15px; }
.mfee__row.is-current { color: var(--ink); }
.mfee__row.is-current .mfee__fill { background: var(--accent); }
.mfee__row.is-current .mfee__pct { color: var(--accent); }

/* The line that carries the VA argument, inside the payment card. */
.minsurance__mark {
  width: 12px;
  height: 12px;
  border: 1px dashed var(--ink-muted);
}
.minsurance { align-items: center; gap: 10px; }
.minsurance > span:nth-child(2) { margin-right: auto; }

/* Verdict column: totals, the chart, then the two ways out. */
.mcol--04 { grid-template-rows: auto minmax(0, 1fr) auto; }
.mchart__plot { margin-top: 12px; }
/* The break-even marker names itself rather than leaving a bare line. */
.mchart__mark-label {
  position: absolute;
  top: -22px;
  left: 0;
  /* Sits above the line and centred on it, so the line reads as dropping from
     the word rather than standing next to it. */
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mchart__mark[hidden] { display: none; }

/* The value axis starts at zero, and the chart says so. */
.mchart { position: relative; }
.mchart__origin {
  position: absolute;
  left: 0;
  bottom: -4px;
  font-size: 12px;
  color: var(--ink-faint);
}
/* The year labels sit on the baseline rather than floating under it. */
.mchart__ends {
  margin-top: 0;
  padding-top: 6px;
  border-top: 1px solid var(--line-faint);
}

.ccard--chart .ccard__body { justify-content: flex-start; }

/* ---- Affordability: the ceiling, and the band up to it ------------------ */

.mcol--05 { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.mheadline__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mheadline__terms { font-size: 13px; font-weight: 300; color: var(--ink-body); }

/* The scale runs from comfortable to the ceiling, so it is coloured that way
   and the thumb is the price being tried. */
.mscale { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mscale__input {
  appearance: none;
  height: 2px;
  background: linear-gradient(90deg, var(--good) 0%, var(--accent) 100%);
  accent-color: var(--accent);
}
.mscale__input::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.mscale__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.mscale__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mscale__good { color: var(--good); }
.mscale__cap { color: var(--accent); }

.mverdict {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}
.mverdict__text { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-body); }
.mverdict__value { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent); white-space: nowrap; }

.mtotals--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mtotals--four .mtotals__cell { border-bottom: none; border-right: 1px solid var(--line-faint); }
.mtotals--four .mtotals__cell:last-child { border-right: none; }

/* Three points named under one slider. */
.mslider__ends--three > span:nth-child(2) { text-align: center; flex: 1; }
.mslider__ends--three > span:last-child { text-align: right; }

@media (max-width: 1179px) {
  .mtotals--four { grid-template-columns: 1fr 1fr; }
  .mtotals--four .mtotals__cell { border-bottom: 1px solid var(--line-faint); }
  .mtotals--four .mtotals__cell:nth-child(2n) { border-right: none; }
  .mtotals--four .mtotals__cell:nth-last-child(-n + 2) { border-bottom: none; }
}

@media (max-width: 767px) {
  .mverdict { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mscale__ends { font-size: 12px; }
}

/* ==========================================================================
   46. About — process, timeline, checks, portraits
   -----------------------------------------------------------------------------
   The credibility page. Its first section (the process track) is the one from
   the home page, unchanged — the handoff asks for it to be built once, so it
   reuses section 07 above and adds nothing here.

   The three sections below share one behaviour: an active index that follows
   the pointer and resets when the section is left. JS block 9g drives all
   three through the existing `onGroupHover` helper. Every hover-revealed
   figure also exists somewhere on the page as static text, so the sections
   still read with the script switched off.
   ========================================================================== */

/* The band on this page carries a struck seal instead of the three index
   figures — the same impression the stamps section repeats four times. */
/* The prototype draws this at 132px with 7px type. This template's type floor
   is 12px — readable text is a shipping requirement — so the disc grows to
   match rather than the type shrinking under it. Below about 170px the line
   "Verified register" is wider than the ring's chord and prints straight
   through the circle. */
.seal {
  position: relative;
  width: 176px;
  height: 176px;
  flex: 0 0 176px;
  top: -14px;
  transform: rotate(-8deg);
}
.seal__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 50%;
}
.seal__face {
  position: absolute;
  inset: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 50%;
  text-align: center;
}
/* Tighter tracking than the site's other micro-labels: at 0.16em the longest
   line runs past the ring. `nowrap` is load-bearing — a wrapped line breaks
   the seal's centring. */
.seal__top,
.seal__sub,
.seal__markets {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--accent-rgb), 0.7);
}
.seal__sub,
.seal__markets { color: rgba(var(--accent-rgb), 0.58); }
.seal__figure {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}
.seal__rule {
  width: 34px;
  height: 1px;
  margin: 2px 0;
  background: rgba(var(--accent-rgb), 0.4);
}

/* ---- Shared readouts: the figure a section prints top right -------------- */
.totals--right { text-align: right; }
.totals__value--lg { font-size: 42px; }
.totals__value--accent { color: var(--accent); }
.totals__value--bad { color: var(--bad); }

/* The last section on the page carries the gap down to the footer. */
.section__inner--last { padding-bottom: clamp(52px, 7vh, 78px); }

/* ---- History: one axis, fifteen years ----------------------------------- */

.tline { position: relative; margin-top: 40px; }

.tline__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.tline__tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.tline__tick-mark { width: 1px; background: rgba(var(--ink-rgb), 0.28); }
.tline__tick-mark--tall { height: 11px; }
.tline__tick-mark--short { height: 7px; }

.tline__chart {
  position: relative;
  height: 108px;
  margin-top: 4px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.24);
}
.tline__curve {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}
.tline__bar {
  flex: 1;
  background: rgba(var(--ink-rgb), 0.18);
  transition: background 0.3s ease;
}
.tline__bar.is-lit { background: var(--accent); }

/* Heights are the file count for that year against 24 128 — data, not shape.
   If the register moves, redraw these from the numbers rather than by eye. */
.tline__bar--01 { height: 1.3%; }
.tline__bar--02 { height: 3.2%; }
.tline__bar--03 { height: 5.1%; }
.tline__bar--04 { height: 7.6%; }
.tline__bar--05 { height: 12%; }
.tline__bar--06 { height: 17.1%; }
.tline__bar--07 { height: 24%; }
.tline__bar--08 { height: 30.9%; }
.tline__bar--09 { height: 38.1%; }
.tline__bar--10 { height: 43.9%; }
.tline__bar--11 { height: 51%; }
.tline__bar--12 { height: 58.9%; }
.tline__bar--13 { height: 66.7%; }
.tline__bar--14 { height: 74.2%; }
.tline__bar--15 { height: 87%; }
.tline__bar--16 { height: 100%; }

.tline__points { position: relative; height: 40px; }
/* The half-width shift belongs to the list item, not the link inside it: on the
   last milestone the untransformed item would hang 7px past the axis and widen
   the section's scroll box for nothing. */
.tline__point {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
}

/* Milestone positions: (year − 2011) / 15, clamped so the first and last dots
   keep their labels inside the section. */
.tline__point--1 { left: 3%; }
.tline__point--2 { left: 20%; }
.tline__point--3 { left: 33.333%; }
.tline__point--4 { left: 46.667%; }
.tline__point--5 { left: 66.667%; }
.tline__point--6 { left: 80%; }
.tline__point--7 { left: 97%; }

.tline__dot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tline__dot-mark {
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
.tline__dot-stem {
  width: 1px;
  height: 16px;
  background: rgba(var(--ink-rgb), 0.28);
  transition: background 0.3s ease;
}
.tline__dot-year {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.tline__dot.is-active .tline__dot-mark {
  width: 13px;
  height: 13px;
  background: var(--accent);
}
.tline__dot.is-active .tline__dot-stem { background: var(--accent); }
.tline__dot.is-active .tline__dot-year { color: var(--accent); }

.tcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.tcard {
  display: block;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.35s ease, background 0.35s ease, opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.tcard__year { font-family: var(--serif); font-size: 30px; line-height: 1; }
.tcard__tag {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.tcard__title {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.12;
}
.tcard__text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
  color: rgba(var(--ink-rgb), 0.58);
}
.tcard.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  transform: translateY(-4px);
}
/* Dimming only starts once a milestone is picked, so the default state reads
   as four equal cards rather than one card and three shadows. */
.tcards.is-picked .tcard:not(.is-active) { opacity: 0.58; }

/* ---- Four stamps: the verification standard ----------------------------- */

.stamps__rails {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.36);
}
.stamps__rail { display: flex; align-items: center; gap: 8px; }
.stamps__rail-line {
  width: 20px;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.26);
  transition: width 0.4s ease, background 0.3s ease;
}
.stamps__rail.is-active .stamps__rail-line { width: 40px; background: var(--accent); }

.stamps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 12px;
}
.checkcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.checkcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}
.checkcard__who { color: rgba(var(--ink-rgb), 0.45); transition: color 0.3s ease; }

.checkcard__impression {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0 24px;
}
/* Each check gets its own hatch so the four impressions read as four different
   instruments rather than one repeated texture. */
.checkcard__hatch {
  position: absolute;
  inset: 0;
  background-size: 10px 10px;
  opacity: 0.03;
  transition: opacity 0.4s ease;
}
.checkcard__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 9px); }
.checkcard__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.45) 0 1px, transparent 1px 10px); }
.checkcard__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px); }
.checkcard__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }

.checkcard__seal {
  position: relative;
  width: 152px;
  height: 152px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.checkcard__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 50%;
  transition: border-color 0.3s ease;
}
.checkcard__ring--dashed {
  inset: -5px;
  border: 1px dashed rgba(var(--accent-rgb), 0.18);
}
.checkcard__face {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 50%;
  text-align: center;
}
.checkcard__seal-top,
.checkcard__seal-date {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.72);
}
.checkcard__seal-date { color: rgba(var(--accent-rgb), 0.58); }
.checkcard__seal-name {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}
.checkcard__seal-rule {
  width: 32px;
  height: 1px;
  margin: 2px 0;
  background: rgba(var(--accent-rgb), 0.4);
}

.checkcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px 18px;
}
.checkcard__title { font-family: var(--serif); font-size: 27px; line-height: 1.08; }
.checkcard__text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: rgba(var(--ink-rgb), 0.6);
}
.checkcard__foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line-faint);
}
.checkcard__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.checkcard__stat-value { font-family: var(--serif); font-size: 23px; }
.checkcard__stat-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.48);
}
.checkcard__bar { display: block; height: 2px; background: rgba(var(--ink-rgb), 0.12); }
.checkcard__bar-fill {
  display: block;
  height: 2px;
  background: rgba(var(--accent-rgb), 0.5);
  transition: background 0.3s ease;
}
.checkcard__bar-fill--64 { width: 64%; }
.checkcard__bar-fill--72 { width: 72%; }
.checkcard__bar-fill--88 { width: 88%; }
.checkcard__bar-fill--100 { width: 100%; }
.checkcard__refused {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bad);
}
.checkcard__share { color: rgba(var(--ink-rgb), 0.38); }

.checkcard.is-active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  transform: translateY(-5px);
}
.checkcard.is-active .checkcard__hatch { opacity: 0.09; }
.checkcard.is-active .checkcard__who { color: var(--accent); }
.checkcard.is-active .checkcard__ring { border-color: rgba(var(--accent-rgb), 0.75); }
.checkcard.is-active .checkcard__ring--dashed { border-color: rgba(var(--accent-rgb), 0.18); }
.checkcard.is-active .checkcard__bar-fill { background: var(--accent); }
/* The impression straightens under the pointer, the way a stamp lands square
   only when you press it deliberately. */
.checkcard.is-active .checkcard__seal { transform: rotate(-8deg) scale(1.05); }
.stamps.is-picked .checkcard:not(.is-active) { opacity: 0.55; }

.stamps__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.stamps__note {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-body);
}
.stamps__actions { display: flex; gap: 12px; }
.stamps__actions .btn { white-space: nowrap; }

/* ---- Who runs it: the portrait strip ------------------------------------ */

.folks {
  display: flex;
  gap: 16px;
  margin-top: 34px;
}
.folks > li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  transition: flex 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The frame that widens is the list item, not the link: `flex` on the link
   would be read against the link's own box and never grow the column. */
/* Раскрытая карточка — квадрат, а не «в 2.4 раза шире соседей».

   Портреты сняты плотно, лицо занимает почти весь кадр. В прежней широкой
   карточке 654×480 квадратный снимок терял 27% высоты, и от лица оставались
   волосы и один глаз. Квадратная коробка показывает портрет целиком.

   Полоса при этом не растёт: раскрытая стала уже (654 → 480), и разница
   ушла четырём соседкам. */
/* Ширина задаётся той же формулой, что и высота у `.folk` ниже, — так
   карточка выходит квадратной. Через `aspect-ratio` не получится: высота
   ячейки сама зависит от содержимого, и пропорция замыкается на себя,
   схлопывая карточку в пару пикселей. */
.folks > li:has(.folk.is-active) { flex: 0 0 clamp(400px, 52vh, 480px); }

.folk {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(400px, 52vh, 480px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.06);
  transition: border-color 0.3s ease;
}
.folk.is-active { border-color: var(--accent); }
.folk__media { position: absolute; inset: 0; }
.folk__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.folk__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.4) 0%, rgba(var(--photo-shade-rgb), 0) 34%, rgba(var(--photo-shade-rgb), 0.86) 100%);
}
.folk__lic {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 11px;
  background: rgba(var(--plate-rgb), 0.8);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.folk__foot {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  color: var(--on-photo);
}
.folk__role {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.folk__name {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.06;
}
/* max-height as well as opacity: a plain fade leaves a hole under every
   inactive name instead of letting the name sit on the bottom edge. */
.folk__detail {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.folk.is-active .folk__detail { max-height: 220px; opacity: 1; }
.folk__line {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
  color: rgba(var(--on-photo-rgb), 0.78);
}
.folk__figs {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--on-photo-rgb), 0.28);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--on-photo-rgb), 0.72);
}

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* The disc keeps its size here: shrinking it pushes "Verified register"
     back through the ring. Below 768px it is hidden with the index stats. */
  .totals__value--lg { font-size: 34px; }

  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkcard__seal { width: 132px; height: 132px; }

  /* Five frames no longer fit; the strip scrolls instead of crushing them. */
  .folks {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .folks > li,
  .folks > li:has(.folk.is-active) {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  .seal { display: none; }

  .section__aside { gap: 22px; }
  .totals__value--lg { font-size: 28px; }

  /* The axis keeps its geometry — squeezing sixteen bars and seven dots into
     360px makes both unreadable — so it scrolls as one piece. */
  .tline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tline__ticks,
  .tline__chart,
  .tline__points { min-width: 560px; }
  .tline__chart { height: 84px; }
  .tcards { grid-template-columns: minmax(0, 1fr); }

  .stamps__rails { display: none; }
  .stamps { grid-template-columns: minmax(0, 1fr); }
  .checkcard__seal { width: 122px; height: 122px; }
  .checkcard__seal-name { font-size: 24px; }
  .stamps__foot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stamps__actions { flex-wrap: wrap; }
  .stamps__actions .btn { flex: 1 1 auto; text-align: center; }

  /* No hover on touch, so every portrait shows its detail block outright — and
     once it is always open the text no longer fits over a 16:9 frame, so the
     caption leaves the photograph and sits under it as ordinary copy. */
  .folks {
    flex-direction: column;
    overflow-x: visible;
  }
  .folks > li,
  .folks > li:has(.folk.is-active) { flex: 0 0 auto; }
  .folk { height: auto; }
  .folk__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .folk__scrim { display: none; }
  .folk__foot {
    position: static;
    padding: 16px 18px 18px;
    color: var(--ink);
  }
  .folk__role { color: var(--accent); }
  .folk__name { font-size: 24px; }
  .folk__detail { max-height: none; opacity: 1; }
  .folk__line { color: var(--ink-body); }
  .folk__figs {
    border-top-color: var(--line);
    color: var(--ink-muted);
  }
}

/* ==========================================================================
   47. Agent list — the register of people
   -----------------------------------------------------------------------------
   Not a "meet the team" page. Every card leads with a licence number and shows
   four figures that can be checked, and the strip under the panel states what
   it takes to be listed at all. Card type runs one step larger than the
   listing cards on purpose — these are numbers people need to read.

   Filtering, sorting and paging are JS block 9h, not the shared listing engine
   (block 9b): that engine filters property cards on deal, category, beds and
   price, and the register filters on specialisation, city, free text and four
   sort modes instead. This page carries no `[data-grid]`, which is what keeps
   9b out of it and makes the shared `.pager` markup safe to reuse here.
   ========================================================================== */

/* ---- Filter panel ------------------------------------------------------- */

.agpanel {
  margin: clamp(22px, 3vh, 32px) var(--pad-hero) 0;
  border: 1px solid var(--line);
  background: var(--panel-sheer);
}
.agpanel__tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-faint);
}
.agtab {
  border: none;
  background: transparent;
  padding: 15px 26px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.agtab:hover { color: var(--accent); }
.agtab.is-active { background: var(--accent); color: var(--on-accent); }
.agpanel__count {
  margin-left: auto;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.agpanel__fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.9fr auto;
  align-items: end;
  gap: 22px;
  padding: 22px 26px 24px;
}
.agfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.agfield__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Underline only — no boxes, no fills. */
.agfield__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 7px 0;
  transition: border-color 0.2s ease;
}
.agfield__input:hover,
.agfield__input:focus-visible { border-bottom-color: var(--accent); }
.agfield__select { position: relative; display: block; }
.agfield__select select { cursor: pointer; appearance: none; padding-right: 20px; }
.agfield__select::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 15px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-muted);
  border-bottom: 1px solid var(--ink-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.agpanel__submit { align-self: end; }

/* ---- Requirements strip ------------------------------------------------- */

.agrules {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 18px var(--pad-hero) 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.agrules__lead { color: var(--accent); }
.agrules__list { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.agrule { display: flex; align-items: center; gap: 8px; }
.agrule__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.agrules__note { margin-left: auto; color: var(--ink-faint); }

/* ---- The register ------------------------------------------------------- */

.agrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(24px, 3.4vh, 34px) var(--pad-hero) 0;
}
.agrid > li { display: flex; min-width: 0; }
.agrid__empty {
  margin: clamp(24px, 3.4vh, 34px) var(--pad-hero) 0;
  padding: 40px 0;
  border: 1px dashed var(--line);
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-body);
}

.acard {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

.acard__lic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.68);
}
.acard__status { display: flex; align-items: center; gap: 7px; color: var(--good); }
.acard__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}
/* Offline is a muted grey, not a red: the agent is listed either way. */
.acard__status--off { color: var(--ink-faint); }

.acard__media {
  position: relative;
  display: block;
  /* Квадрат, а не фиксированные 600px. Портреты агентов пересняты 1:1, и в
     коробке 435×600 `cover` срезал 27% ширины — головы обрезало по бокам.
     Пропорция коробки повторяет пропорцию снимка: кадр виден целиком, а
     высота считается от ширины колонки и растёт вместе с ней. */
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.acard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.acard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--photo-shade-rgb), 0.28) 0%, rgba(var(--photo-shade-rgb), 0) 40%, rgba(var(--photo-shade-rgb), 0.82) 100%);
}
.acard__who {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
}
.acard__role {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-photo-accent);
}
.acard__name {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.06;
  color: var(--on-photo);
}
.acard__district {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: rgba(var(--on-photo-rgb), 0.9);
}

/* Four cells, two by two. This block never collapses to a single row — all
   four numbers are the reason the card exists. */
.acard__figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line-faint);
}
.acard__fig {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.acard__fig:nth-child(2n) { border-right: none; }
.acard__fig:nth-child(n + 3) { border-bottom: none; }
.acard__fig-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}
.acard__fig-value { font-family: var(--serif); font-size: 21px; line-height: 1; }
/* The one number that says how the agent actually negotiates. */
.acard__fig-value--gap { color: var(--accent); }

.acard__foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding: 14px 16px 16px;
}
.acard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.68);
}
.acard__langs {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acard__rating { color: var(--accent); }
.acard__actions { display: flex; gap: 8px; margin-top: 2px; }
.acard__btn {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.acard__btn--cta { border-color: var(--accent); color: var(--accent); }

/* Hover: the card lifts and the other fifteen step back. The dimming class
   lives on the list, so leaving the grid clears it in one place. */
.acard:hover,
.acard:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.acard:hover .acard__btn--cta,
.acard:focus-visible .acard__btn--cta {
  background: var(--accent);
  color: var(--on-accent);
}
.agrid.is-picked .acard:not(:hover):not(:focus-visible) { opacity: 0.62; }

/* ---- Apply band --------------------------------------------------------- */

.applyband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin: clamp(34px, 5vh, 54px) var(--pad-hero) 40px;
  padding: 34px 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.applyband__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.applyband__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.applyband__text {
  max-width: 620px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.applyband__side { display: flex; align-items: center; gap: 30px; }
.applyband__side .btn { white-space: nowrap; }

/* The pager belongs to the page here, not to a listing section, so it takes
   the page padding rather than sitting inside a padded wrapper. */
.pager--agents { margin: 0 var(--pad-hero); }

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Five tabs no longer fit on one line; they scroll rather than wrap, so the
     row keeps reading as a single control. */
  .agpanel__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .agtab { flex: 0 0 auto; min-height: 44px; }
  .agpanel__count { display: none; }

  .agpanel__fields { grid-template-columns: 1fr 1fr; }
  .agpanel__submit { grid-column: 1 / -1; }
  .agpanel__submit .btn { width: 100%; }

  .agrules__note { display: none; }

  .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acard__media { height: 230px; }

  .applyband { padding: 30px 30px; }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The tab row stays reachable while the visitor is inside the results. */
  .agpanel__tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
  }

  .agpanel__fields { grid-template-columns: minmax(0, 1fr); }
  .agfield__input { min-height: 44px; padding: 10px 0; }

  .agrules {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .agrules__list { flex-wrap: nowrap; }
  .agrule { white-space: nowrap; }

  .agrid { grid-template-columns: minmax(0, 1fr); }
  .acard__media { height: 200px; }
  .acard__name { font-size: 24px; }

  /* No hover on touch, so nothing lifts, nothing dims, and Contact is filled
     from the start rather than waiting for a pointer that never arrives. */
  .acard:hover,
  .acard:focus-visible { transform: none; }
  .agrid.is-picked .acard:not(:hover):not(:focus-visible) { opacity: 1; }
  .acard__btn--cta {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }

  .applyband {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 26px 22px;
  }
  .applyband__side {
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .applyband__side .btn { flex: 1 1 auto; text-align: center; }
}

/* ==========================================================================
   48. Pricing — the rate card
   -----------------------------------------------------------------------------
   One number, then the three plans, then a worked example, then the terms.
   The order is the argument; the styles below assume it and nothing here
   depends on source order except the rules between blocks.

   `.sheet` belongs to the mortgage calculator, so nothing on this page is
   called that — everything carries a `prc` prefix instead.

   No photography anywhere by design: a pricing page leaning on stock imagery
   reads as sales material, and this one has to read as a rate card.
   ========================================================================== */

/* Every block on the page takes the page padding and is separated from the
   next by a hairline, so the whole thing reads as one continuous sheet. */
.prcone,
.prcex,
.prcterms {
  margin: clamp(26px, 3.6vh, 40px) var(--pad-hero) 0;
}
.prcex,
.prcterms {
  margin-top: clamp(34px, 5vh, 56px);
  padding-top: clamp(30px, 4.4vh, 44px);
  border-top: 1px solid var(--line);
}

/* ---- Sheet 01: the one number ------------------------------------------- */

.prcone {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  gap: clamp(30px, 3.4vw, 56px);
  padding-bottom: clamp(28px, 4vh, 40px);
  border-bottom: 1px solid var(--line);
}

.prcfig {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 20px;
  font-weight: 400;
}
.prcfig__value {
  font-family: var(--serif);
  font-size: clamp(96px, 9vw, 152px);
  line-height: 0.86;
  color: var(--accent);
}
.prcfig__unit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
}
.prcfig__pct {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}
.prcfig__of {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prcone__text {
  max-width: 560px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

.prcrep {
  border: 1px solid var(--line);
  background: var(--panel);
}
.prcrep__head,
.prcrep__foot-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prcrep__head {
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-faint);
}
.prcrep__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.prcrep__label {
  flex: 1;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.prcrep__value {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.prcrep__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 18px;
}
.prcrep__foot-value { font-family: var(--serif); font-size: 26px; }

/* ---- Three plans -------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(30px, 4.4vh, 46px) var(--pad-hero) 0;
}
.plans > li { display: flex; min-width: 0; }

.plan {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.plan__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Only the middle plan's audience is in accent — it marks the default without
   a "recommended" badge. */
.plan__tag--accent { color: var(--accent); }

.plan__body { padding: 28px 24px 24px; }
.plan__name { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.06; }
.plan__cost {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
}
.plan__price {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 0.94;
  color: var(--accent);
}
.plan__unit {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plan__blurb {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}

.plan__lines { border-top: 1px solid var(--line-faint); }
.plan__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.plan__mark {
  flex: 0 0 14px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
}
/* The free plan really does say no twice. Leave it saying no. */
.plan__line--out { color: var(--ink-faint); }
.plan__line--out .plan__mark { border-color: var(--ink-faint); color: var(--ink-faint); }

.plan__cta { margin-top: auto; padding: 20px 24px 24px; }
.plan__cta .btn { display: block; width: 100%; text-align: center; }

.plan.is-active {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.plan.is-active .btn--ghost {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* Not a hover effect: the two plans that are not chosen sit at 0.66 from the
   start, which is what makes the middle plan read as chosen on arrival. */
.plan:not(.is-active) { opacity: 0.66; }

/* ---- Sheet 02: worked example ------------------------------------------- */

.prcex__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.prcex__keep { text-align: right; }
.prcex__keep-label,
.prcex__keep-note {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prcex__keep-value {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--good);
}
.prcex__keep-note { margin-top: 6px; letter-spacing: 0.14em; }

/* Both columns end on the same line. The right one is the shorter of the two,
   so it stretches to the row and its three parts spread into the slack rather
   than any one of them being stretched out of proportion. */
.prcex__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 52px);
  margin-top: 30px;
}

.prcslider {
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.prcslider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prcslider__value { color: var(--accent); }
.prcslider__range {
  width: 100%;
  margin-top: 16px;
  accent-color: var(--accent);
}
.prcslider__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.prcbreak { margin-top: 26px; border-top: 1px solid var(--line-faint); }
.prcbreak__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.prcbreak__label { font-size: 13px; font-weight: 300; color: var(--ink-body); }
.prcbreak__value { font-family: var(--serif); font-size: 20px; }
.prcbreak__value--ours { color: var(--accent); }
.prcbreak__value--theirs { color: var(--ink-faint); }
.prcbreak__value--saving { color: var(--good); }

.prcex__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}
/* The two bars keep their designed 22px rhythm — they are the pair being
   compared. Whatever height is left over goes under them, so the accent strip
   drops to meet the bottom of the panel opposite. */
.prcbars {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 0 0 auto;
}
.prcbar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.prcbar--ours .prcbar__name { color: var(--accent); }

.prcbar__track {
  position: relative;
  height: 46px;
  margin-top: 12px;
  border: 1px solid var(--line-input);
  background: rgba(var(--ink-rgb), 0.04);
}
.prcbar__keep { position: absolute; inset: 0 auto 0 0; }
.prcbar__fee { position: absolute; inset: 0 0 0 auto; }

/* Drawn to scale. 1.4% is meant to be a sliver. */
.prcbar--ours .prcbar__keep { width: 98.6%; background: rgba(var(--accent-rgb), 0.16); }
.prcbar--ours .prcbar__fee { width: 1.4%; background: var(--accent); }
.prcbar--theirs .prcbar__keep { width: 94.8%; background: var(--bar-dim); }
.prcbar--theirs .prcbar__fee { width: 5.2%; background: var(--fee-dim); }

.prcbar__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}
.prcbar__note { font-size: 13px; font-weight: 300; color: var(--ink-body); }
.prcbar__net { font-family: var(--serif); font-size: 24px; }

.prcsave {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}
.prcsave__value {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.prcsave__text {
  flex: 1;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---- Sheet 03: the small print ------------------------------------------ */

.prcterms__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 3.4vw, 56px);
  margin-top: 24px;
}
.prcterm {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.prcterm__num {
  padding-top: 3px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.prcterm__body { flex: 1; }
.prcterm__q {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
}
.prcterm__a {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}

/* ---- Closing band ------------------------------------------------------- */

.closeband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin: clamp(34px, 5vh, 54px) var(--pad-hero) 40px;
  padding: 34px 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.closeband__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.closeband__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.closeband__text {
  max-width: 620px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.closeband__actions { display: flex; align-items: center; gap: 16px; }
.closeband__actions .btn { white-space: nowrap; }

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1179px) {
  .prcfig__value { font-size: 110px; }

  /* Two across, with Plan 03 running the full width underneath. */
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans > li:last-child { grid-column: 1 / -1; }

  .prcex__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .prcex__side { justify-content: flex-start; }
  .prcbars { flex: 0 0 auto; }
  .prcbar__track { height: 40px; }

  .prcterms__list { grid-template-columns: minmax(0, 1fr); }

  .closeband { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  .prcone { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .prcfig__value { font-size: 88px; }

  /* Lead with the plan most people need. */
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plans > li:nth-child(1) { order: 2; }
  .plans > li:nth-child(2) { order: 1; }
  .plans > li:nth-child(3) { order: 3; }

  /* No hover on touch, so Plan 02 simply stays chosen and every CTA is filled
     rather than waiting for a pointer that never arrives. */
  .plan.is-active { transform: none; }
  .plan:not(.is-active) { opacity: 1; }
  .plan__cta .btn--ghost {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }

  .prcex__head { gap: 22px; }
  .prcex__keep { text-align: left; }
  .prcex__keep-value { font-size: 34px; }
  .prcslider { padding: 22px 20px 24px; }
  /* A native range needs help to clear a 44px target. */
  .prcslider__range { height: 44px; }

  /* Label above, figure below — the two no longer fit on one line. */
  .prcbreak__row { flex-direction: column; align-items: flex-start; gap: 4px; }

  .prcbar__track { height: 36px; }
  /* At this width the 1.4% slice is barely visible, so the rate is repeated
     beside the bar rather than left to be read off the drawing. */
  .prcbar__head { font-size: 12px; }
  .prcbar__foot { flex-direction: column; align-items: flex-start; gap: 4px; }

  .prcsave { flex-direction: column; align-items: flex-start; gap: 10px; }

  .closeband { padding: 26px 22px; }
  .closeband__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .closeband__actions .btn { text-align: center; }
}

/* ==========================================================================
   49. FAQ — twenty-five answers, six subjects, one search
   -----------------------------------------------------------------------------
   A reference page, not a support-deflection page. Nothing here tries to stop
   a visitor getting in touch, and the panel in the rail actively invites it —
   which is why that panel sticks with the reader the whole way down and moves
   to the bottom rather than disappearing on small screens.

   Answers run at 14px/1.76, a step larger than body copy elsewhere: this is a
   page people actually read.
   ========================================================================== */

.faqbar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: clamp(26px, 3.6vh, 38px) var(--pad-hero) 0;
  padding: 20px 26px;
  border: 1px solid var(--line);
  background: var(--panel-sheer);
}
.faqbar__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.faqbar__input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  padding: 8px 0;
  transition: border-color 0.2s ease;
}
.faqbar__input:hover,
.faqbar__input:focus-visible { border-bottom-color: var(--accent); }
.faqbar__count {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.faqgrid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 3.2vw, 52px);
  margin: clamp(28px, 4vh, 42px) var(--pad-hero) 0;
}

/* ---- Subject rail ------------------------------------------------------- */

.faqrail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}
.faqrail__head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.faqsubj {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 15px 0;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.11);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.faqsubj__label { font-family: var(--serif); font-size: 21px; color: var(--ink); transition: color 0.2s ease; }
.faqsubj__count { font-size: 12px; letter-spacing: 0.14em; color: var(--ink-faint); transition: color 0.2s ease; }
.faqsubj:hover .faqsubj__label { color: var(--accent); }
/* Label and count go accent together — a half-lit row reads as a hover state. */
.faqsubj.is-active .faqsubj__label,
.faqsubj.is-active .faqsubj__count { color: var(--accent); }

.stuck {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.07);
}
.stuck__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.stuck__title { margin-top: 10px; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.stuck__text {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}
.stuck__cta { margin-top: 16px; }
.stuck__cta .btn { display: block; width: 100%; text-align: center; }

/* ---- Accordion ---------------------------------------------------------- */

.faqhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.faqhead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1.04;
}
.faqhead__toggle { white-space: nowrap; }

.qrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.11); }
/* The whole row is the tap target — the 26px circle on its own does not clear
   44px on touch, and shrinking the row to match it would be worse. */
.qrow__q {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.qrow__num {
  padding-top: 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.qrow__text {
  flex: 1;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.28;
  color: var(--ink);
  transition: color 0.25s ease;
}
.qrow__mark {
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, color 0.25s ease;
}
.qrow__q:hover .qrow__text { color: var(--accent); }

/* Open: the number, the question and the circle all go accent, and the plus
   turns into a cross rather than swapping glyph. */
.qrow__q[aria-expanded="true"] .qrow__num,
.qrow__q[aria-expanded="true"] .qrow__text { color: var(--accent); }
.qrow__q[aria-expanded="true"] .qrow__mark {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(135deg);
}

/* Height is set from the measured content by JS. Without the script the panel
   has no inline max-height and every answer simply stays open. */
.qrow__panel {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.qrow__q[aria-expanded="false"] + .qrow__panel { opacity: 0; }
.qrow__a {
  max-width: 720px;
  margin: 0 0 22px 46px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.76;
  color: var(--ink-body);
}
.qrow__link { margin: 0 0 24px 46px; }
.qrow__link a {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.qrow__link a:hover { border-bottom-color: var(--accent); }

.faqempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 54px 30px;
  border: 1px dashed var(--line-input);
  text-align: center;
}
.faqempty__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.faqempty__title { font-family: var(--serif); font-size: 26px; }
.faqempty__text {
  max-width: 420px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.faqempty__cta { margin-top: 6px; }

/* ---- Ask band ----------------------------------------------------------- */

.askband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin: clamp(36px, 5vh, 58px) var(--pad-hero) 40px;
  padding: 32px 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.askband__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.askband__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.06;
}
.askband__text {
  max-width: 640px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.askband__side { display: flex; align-items: center; gap: 30px; }
.askband__side .btn { white-space: nowrap; }

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1179px) {
  .faqgrid { grid-template-columns: 220px minmax(0, 1fr); }
  .faqsubj { min-height: 44px; }
  .faqsubj__label { font-size: 19px; }
  .qrow__text { font-size: 21px; }
  .askband { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  .faqbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px 20px;
  }
  /* The label becomes the placeholder's job at this width. */
  .faqbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .faqbar__input { min-height: 44px; }

  /* The rail stops being a rail: subjects become a chip row that scrolls
     sideways and sticks under the header. */
  .faqgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .faqrail {
    position: static;
    display: contents;
  }
  .faqrail__head { display: none; }
  .faqrail__list {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    background: var(--bg);
    order: 1;
  }
  .faqrail__list > li { flex: 0 0 auto; }
  .faqsubj {
    width: auto;
    min-height: 44px;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--line);
    align-items: center;
  }
  .faqsubj.is-active { border-color: var(--accent); }
  .faqsubj__label { font-size: 17px; }

  .faqmain { order: 2; }
  /* Do not lose the panel — it moves to the end of the column instead. */
  .stuck { order: 3; margin-top: 0; }

  .faqhead { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Expanding twenty-five answers on a phone is hostile. */
  .faqhead__toggle { display: none; }

  .qrow__q { gap: 14px; flex-wrap: wrap; }
  /* The number sits above the question rather than stealing width from it. */
  .qrow__num { order: 1; flex: 1 0 100%; padding-top: 0; }
  .qrow__text { order: 3; flex: 1 1 auto; font-size: 19px; }
  .qrow__mark { order: 2; margin-top: 0; }
  .qrow__a,
  .qrow__link { margin-left: 0; }
  /* A 23px inline link is not a touch target. The hit area grows to 44px and
     the rule moves onto the text itself so the underline still hugs it. */
  .qrow__link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .faqempty { padding: 40px 20px; }

  .askband { padding: 26px 22px; }
  .askband__side { justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .askband__side .btn { flex: 1 1 auto; text-align: center; }
}

/* ==========================================================================
   50. Agent profile — one register entry
   -----------------------------------------------------------------------------
   A register entry for a named agent, not a business card: the licence links to
   the national register, the deal table names the side she represented, and
   every review carries the sheet it came from.

   Two rules the layout depends on. The profile sheet and the contact rail are
   height-matched with `align-items: stretch` — the rail is deliberately NOT
   sticky, it simply ends level with the sheet. The bottom row does the same for
   the map column and the form.
   ========================================================================== */

.adgrid,
.adfiles,
.addeals,
.adrevs,
.adbottom {
  margin: clamp(26px, 3.6vh, 38px) var(--pad-hero) 0;
}
.adfiles,
.addeals,
.adrevs,
.adbottom { margin-top: clamp(34px, 4.6vh, 50px); }
.adbottom { margin-bottom: 40px; }

.adsection__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}

/* ---- Profile sheet + contact rail ---------------------------------------- */

.adgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
}

.adsheet {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 28px;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
}
/* The portrait column and the contact rail are the same 380px — they bracket
   the sheet symmetrically. */
.adsheet__portrait {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.adsheet__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.adsheet__portrait .crop--diag { --crop-c: rgba(var(--on-photo-rgb), 0.6); }

.adsheet__body {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 26px 0;
}
.adsheet__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.adsheet__rule { width: 34px; height: 1px; background: var(--accent); }
.adsheet__since { display: flex; align-items: center; gap: 7px; color: var(--good); }
.adsheet__name {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.02;
}

/* Her paragraphs run the full column width — no max-width clamp. This is the
   one place on the site where a person speaks in the first person, and the
   specifics are what make it worth reading. */
.adbio {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 14px;
}
.adbio__p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

.adchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.adchip {
  padding: 7px 13px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Pushed to the bottom of the column, which is what makes the sheet earn its
   height rather than padding it out. */
.adfacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 26px;
}
.adfacts { border-top: 1px solid var(--line-faint); }
.adfact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 18px 15px 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.adfact:nth-child(3n) { border-right: none; }
.adfact__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.adfact__value { font-family: var(--serif); font-size: 22px; line-height: 1; }
/* The only figure in accent — it is the one a seller actually cares about. */
.adfact__value--accent { color: var(--accent); }

.adrail {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.adrail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.adrail__verify { color: var(--accent); }
.adrail__verify:hover { text-decoration: underline; }
.adrail__body {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
}
.adrow {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.adrow__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.adrow__value { font-size: 14px; color: var(--ink); }
.adrow__value a { color: inherit; }
.adrow__value a:hover { color: var(--accent); }
.adrail__cta { margin-top: 9px; }
.adrail__cta:first-of-type { margin-top: 20px; }
.adrail__cta .btn { display: block; width: 100%; text-align: center; }
.adrail__reply {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ---- Live files ---------------------------------------------------------- */

.adfiles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.adtabs { display: flex; border: 1px solid var(--line-input); }
.adtab {
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  background: transparent;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.adtab:last-child { border-right: none; }
.adtab:hover { color: var(--accent); }
.adtab.is-active { background: var(--accent); color: var(--on-accent); }

.adfiles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.adfiles__item { display: flex; min-width: 0; }

.fcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.fcard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fcard__deal { color: var(--accent); }
.fcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2; height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.fcard__media img { width: 100%; height: 100%; object-fit: cover; }
.fcard__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  background-size: 14px 14px;
  opacity: 0.25;
  transition: opacity 0.35s ease;
}
.fcard__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--on-photo-rgb), 0.55) 0 1px, transparent 1px 7px); }
.fcard__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--on-photo-rgb), 0.5) 0 1px, transparent 1px 8px); }
.fcard__hatch--3 { background-image: radial-gradient(rgba(var(--on-photo-rgb), 0.55) 1px, transparent 1.6px); }
.fcard__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--on-photo-rgb), 0.45) 0 1px, transparent 1px 6px); }

.fcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 16px;
}
.fcard__kind {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.fcard__title { font-family: var(--serif); font-size: 21px; line-height: 1.12; }
.fcard__location { font-size: 12px; font-weight: 300; color: var(--ink-body); }
.fcard__facts {
  display: flex;
  gap: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 2px;
}
.fcard__price { font-family: var(--serif); font-size: 21px; }
.fcard__open {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.3s ease;
}
.fcard:hover,
.fcard:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.fcard:hover .fcard__hatch,
.fcard:focus-visible .fcard__hatch { opacity: 0.55; }
.fcard:hover .fcard__open,
.fcard:focus-visible .fcard__open { color: var(--accent); }
.adfiles__grid.is-picked .fcard:not(:hover):not(:focus-visible) { opacity: 0.62; }

/* ---- Closed deals -------------------------------------------------------- */

.addeals__all a {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* A real table: this is tabular data and it has to read as such with the
   stylesheet off and to a screen reader. */
.deals {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  table-layout: fixed;
}
.deals th,
.deals td { padding: 15px 14px; text-align: left; vertical-align: middle; }
.deals thead th {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.deals__right { text-align: right; }
.deal { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.deal__sheet { width: 72px; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-muted); }
.deal__property { min-width: 0; }
.deal__title {
  font-family: var(--serif);
  font-size: 19px;
  white-space: nowrap;
}
.deal__location {
  margin-left: 12px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.deal__side {
  width: 130px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.deal__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentcolor;
  vertical-align: middle;
}
.deal__side--seller { color: var(--accent); }
.deal__side--buyer { color: var(--good); }
/* Asking is muted, signed is full ink: the eye should land on what was paid. */
.deal__asking { width: 130px; font-family: var(--serif); font-size: 17px; color: var(--ink-muted); }
.deal__signed { width: 130px; font-family: var(--serif); font-size: 17px; }
.deal__gap { width: 100px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-body); }
.deal__gap--up { color: var(--good); }
.deal__gap--none { color: var(--ink-faint); }
.deal__days {
  width: 120px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.adbench {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.adbench__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.adbench__cell:last-child { border-right: none; }
.adbench__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.adbench__value { font-family: var(--serif); font-size: 26px; line-height: 1; }
.adbench__value--accent { color: var(--accent); }
.adbench__note { font-size: 12px; font-weight: 300; color: var(--ink-body); }

/* ---- Reviews ------------------------------------------------------------- */

.adrevs__score { display: flex; align-items: baseline; gap: 12px; }
.adrevs__value { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); }
.adrevs__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.revs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.rev {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.rev__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rev__score { color: var(--accent); }
.rev__quote {
  flex: 1;
  padding: 24px 22px 18px;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
}
.rev__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.rev__client { font-size: 13px; }
.rev__file {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Where she works + the form ------------------------------------------ */

.adbottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
}
.adwhere { display: flex; flex-direction: column; }
.adwhere > .eyebrow { padding-bottom: 16px; border-bottom: 1px solid var(--line); }

.adareas {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.adarea {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--line-input);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.adarea:hover { border-color: var(--accent); color: var(--accent); }
.adarea__count { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-faint); }

.adwhere__note {
  max-width: 520px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.admap {
  position: relative;
  height: 300px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.06);
  /* Leaflet stacks its panes up to 1000; without a context of its own the map
     would climb over the sticky header and the modals. */
  z-index: 0;
}
.admap__canvas { position: absolute; inset: 0; }
.admap__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.admap__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.admap__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.admap__sep { width: 1px; height: 11px; background: var(--line); }
.admap__office { color: var(--accent); }

/* A file pin: small on purpose. The marker box carries the tap area and the
   dot is centred inside it, so touch gets 44px without a bigger dot. */
.adpin-hit {
  display: grid;
  place-items: center;
}
.adpin {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--pin-bg);
}
/* The office plate always sits above the file pins. */
.adpin--office {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 5px 9px;
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.adoffice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.adoffice__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 17px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.adoffice__cell:last-child { border-right: none; }
.adoffice__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.adoffice__value { font-size: 14px; }
.adoffice__note { font-size: 12px; font-weight: 300; color: var(--ink-body); }

.adform {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.adform__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.adform__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.06;
}
.adform__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.adform__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.adfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adfield--wide { margin-top: 18px; }
/* The message field takes the slack so the send button sits on the bottom
   edge, level with the panel opposite. */
.adfield--grow { flex: 1; margin-top: 18px; }
.adfield__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.adfield__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 7px 0;
  transition: border-color 0.2s ease;
}
.adfield__input:hover,
.adfield__input:focus-visible { border-bottom-color: var(--accent); }
.adfield__area {
  flex: 1;
  min-height: 96px;
  padding: 11px 13px;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.adfield__area:hover,
.adfield__area:focus-visible { border-color: var(--accent); }
.adform__send { margin-top: 22px; }
.adform__send .btn { display: block; width: 100%; text-align: center; }

/* ---- Tablet -------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Once the rail drops under the sheet there is nothing left to height-match. */
  .adgrid { grid-template-columns: minmax(0, 1fr); }
  .adsheet { grid-template-columns: 280px minmax(0, 1fr); gap: 22px; }
  .adsheet__portrait { min-height: 320px; }
  .adsheet__body { padding: 22px 24px 22px 0; }
  .adfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adfact:nth-child(3n) { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
  .adfact:nth-child(2n) { border-right: none; }

  .adrail__body { display: block; }
  .adrail__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }

  /* Tablets are touch too, so the tabs clear 44px from here down. */
  .adtab { min-height: 44px; }
  .adfiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Gap is derivable from asking and signed, so it is the column to lose. */
  .deals__gap,
  .deal__gap { display: none; }
  .deal__title { white-space: normal; }

  .adbench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adbench__cell:nth-child(2n) { border-right: none; }
  .adbench__cell:nth-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .adbottom { grid-template-columns: minmax(0, 1fr); }
  .admap { height: 260px; }
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  .adsheet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .adsheet__portrait { min-height: 0; aspect-ratio: 4 / 3; }
  .adsheet__body { padding: 22px 20px 24px; }
  .adfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .adrail__rows { grid-template-columns: minmax(0, 1fr); }

  .adfiles__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .adtabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adtab { flex: 0 0 auto; min-height: 44px; }
  .adfiles__grid { grid-template-columns: minmax(0, 1fr); }

  /* No hover on touch: the cards have to be fully readable without the lift. */
  .fcard:hover,
  .fcard:focus-visible { transform: none; }
  .adfiles__grid.is-picked .fcard:not(:hover):not(:focus-visible) { opacity: 1; }

  /* One stacked row per deal: sheet and property on the first line, then
     `Seller · €720 000 → €712 000 · 19 days` on the second. Each cell is
     placed explicitly — leaving them to auto-flow puts them on four lines. */
  .deals,
  .deals tbody { display: block; width: 100%; }
  .deals thead { display: none; }
  .deal {
    display: grid;
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 8px;
    padding: 16px 0;
  }
  .deals td { padding: 0; width: auto; }
  .deal__sheet { grid-area: 1 / 1; }
  .deal__property { grid-area: 1 / 2 / 2 / -1; }
  .deal__title { font-size: 18px; white-space: normal; }
  .deal__side { grid-area: 2 / 1; }
  .deal__asking { grid-area: 2 / 2; font-size: 14px; }
  .deal__signed { grid-area: 2 / 3; font-size: 14px; }
  .deal__days { grid-area: 2 / 4; text-align: left; }
  .deal__asking::after { content: ' →'; color: var(--ink-faint); }
  .deal__signed::after { content: ' ·'; color: var(--ink-faint); }

  /* The page's primary action follows the reader instead of scrolling away. */
  .adrail__cta:first-of-type {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  body:has(.adrail) .site-footer { padding-bottom: 76px; }

  .adbench { grid-template-columns: minmax(0, 1fr); }
  .adbench__cell { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .adbench__cell:last-child { border-bottom: none; }

  .revs { grid-template-columns: minmax(0, 1fr); }
  .rev__quote { font-size: 17px; }

  .admap { height: 220px; }
  .adoffice { grid-template-columns: minmax(0, 1fr); }
  .adoffice__cell { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .adoffice__cell:last-child { border-bottom: none; }

  .adform { padding: 22px 20px 24px; }
  .adform__pair { grid-template-columns: minmax(0, 1fr); }
  .adfield__input { min-height: 44px; padding: 10px 0; }

  /* Inline links on this page are 19–21px of text; the hit area grows around
     them rather than the type. */
  .adrail__verify,
  .adrow__value a,
  .addeals__all a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   51. Create a free agent account — the recruitment page
   -----------------------------------------------------------------------------
   Written against type: a portal sells leads and exposure, this page sells a
   place on a register that cannot be bought and spends a whole block listing
   what the account will not do.

   The refusal colour appears in exactly four places — the opening figure row,
   the limits block, the notes on the review track, and the `1 in 4` beside the
   track header. It is not an error colour; do not extend it to form validation
   or use it decoratively.
   ========================================================================== */

.cahero,
.cabenefits,
.calimits,
.cacompare,
.catrack-section,
.caform {
  margin: clamp(34px, 4.6vh, 50px) var(--pad-hero) 0;
}
.cahero { margin-top: clamp(26px, 3.6vh, 38px); }
.caform { margin-bottom: 40px; }

.cahead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.casection__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}

/* ---- Offer sheet + intake counter ---------------------------------------- */

.cahero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
}

.caoffer {
  display: flex;
  flex-direction: column;
  padding: 30px 34px 32px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.caoffer__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 400;
  line-height: 1.04;
}
.caoffer__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 18px;
}
.caoffer__body p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

/* Pushed to the foot of the sheet, which is what height-matches it to the
   counter beside it. */
.castats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-faint);
}
.castat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 0 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.castat:last-child { border-right: none; }
.castat__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.castat__value { font-family: var(--serif); font-size: 24px; line-height: 1; }
.castat__value--refused { color: var(--refused); }
.castat__value--accent { color: var(--accent); }

.caintake {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}
.caintake__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.caintake__figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.caintake__value { font-family: var(--serif); font-size: 62px; line-height: 1; }
.caintake__unit {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.caintake__bar {
  display: block;
  height: 3px;
  margin-top: 20px;
  background: rgba(var(--ink-rgb), 0.14);
}
.caintake__fill { display: block; width: 72%; height: 3px; background: var(--accent); }
.caintake__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.caqueue { margin-top: 24px; }
.caqrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.caqrow__label { font-size: 13px; font-weight: 300; color: var(--ink-body); }
.caqrow__value { font-family: var(--serif); font-size: 18px; }
.caqrow__value--accent { color: var(--accent); }
.caintake__cta { margin-top: auto; padding-top: 24px; }
.caintake__cta .btn { display: block; width: 100%; text-align: center; }
.caintake__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ---- What the account gives you ------------------------------------------ */

.cabenefits__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.cabenefits__grid > li { display: flex; min-width: 0; }

/* Figure first, claim second: every benefit here leads with a number. */
.bcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.bcard__num {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.3s ease;
}
.bcard__figure {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  transition: color 0.3s ease;
}
.bcard__figlabel {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bcard__title {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}
.bcard__text {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.bcard.is-active {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.bcard.is-active .bcard__num,
.bcard.is-active .bcard__figure { color: var(--accent); }
.cabenefits__grid.is-picked .bcard:not(.is-active) { opacity: 0.6; }

/* ---- What it does not give you ------------------------------------------- */

.calimits {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 3.2vw, 46px);
  padding: 30px 34px 32px;
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
}
.calimits__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--refused);
}
.calimits__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.06;
}
.calimits__text {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.calimits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calimit {
  display: flex;
  gap: 15px;
  padding: 16px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.calimit:nth-child(2n) { border-right: none; }
.calimit:nth-child(n + 3) { border-bottom: none; }
.calimit__mark {
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--refused);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--refused);
}
.calimit__title { display: block; font-size: 14px; }
.calimit__text {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}

/* ---- Free or agency ------------------------------------------------------ */

.cacompare__rate a {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.catable {
  width: 100%;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--panel);
  table-layout: fixed;
}
.catable th,
.catable td {
  padding: 14px 24px;
  text-align: left;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}
.catable th:last-child,
.catable td:last-child { border-right: none; }
.catable thead th {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: bottom;
}
.catable thead th:first-child {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.catable__plan {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.catable__plan--accent { color: var(--accent); }
.catable__price {
  display: inline-block;
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.catable__per {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.catable tbody th {
  font-weight: 300;
  color: var(--ink-body);
}
/* The paid column is tinted the whole way down — header a shade stronger than
   the body, so the eye reads it as one column rather than eight cells. */
.catable__paid { background: rgba(var(--accent-rgb), 0.08); }
.catable__pay { background: rgba(var(--accent-rgb), 0.04); }
.catable tfoot td { padding: 20px 24px; border-bottom: none; }
.catable tfoot .btn { display: block; text-align: center; }
.catable__width-first { width: 260px; }

/* ---- How the review runs ------------------------------------------------- */

.catrack__refused { text-align: right; }
.catrack__refused-value {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--refused);
}
.catrack__refused-label {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.catrack { position: relative; margin-top: 34px; }
.catrack__rail,
.catrack__fill {
  position: absolute;
  top: 7px;
  left: 0;
  height: 1px;
}
.catrack__rail { right: 0; background: rgba(var(--ink-rgb), 0.14); }
.catrack__fill {
  width: 12%;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.catrack__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.castep {
  display: flex;
  flex-direction: column;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.castep.is-active { opacity: 1; }
.castep__dot {
  width: 15px;
  height: 15px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  transition: background 0.3s ease;
}
.castep.is-reached .castep__dot { background: var(--accent); }
.castep__when {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.3s ease;
}
.castep.is-active .castep__when { color: var(--accent); }
.castep__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.14;
}
.castep__text {
  max-width: 320px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
/* In the DOM, not injected on hover — a screen reader has to reach it, and on
   touch it is simply always visible. */
.castep__fail {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--refused);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.castep.is-active .castep__fail { opacity: 1; }

/* ---- The application form ------------------------------------------------ */

.caform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
}
.caapply {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.caapply__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.caapply__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.06;
}
.caapply__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.cafield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cafield--wide { margin-top: 22px; }
.cafield__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cafield__label--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cafield__hint { color: var(--ink-faint); }
.cafield__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 7px 0;
  transition: border-color 0.2s ease;
}
.cafield__input:hover,
.cafield__input:focus-visible { border-bottom-color: var(--accent); }
.cafield__select { position: relative; display: block; }
.cafield__select select { cursor: pointer; appearance: none; padding-right: 20px; }
.cafield__select::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 15px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-muted);
  border-bottom: 1px solid var(--ink-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.cafield__area {
  padding: 11px 13px;
  border: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.cafield__area:hover,
.cafield__area:focus-visible { border-color: var(--accent); }

/* Real checkboxes styled as chips: the state is the input's, so it survives
   with no script and reads correctly to assistive technology. */
.cachips { margin-top: 22px; }
.cachips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cachip {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cachip:hover { border-color: var(--accent); color: var(--accent); }
.cachip__input:checked + .cachip {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.cachip__input:focus-visible + .cachip { outline: 2px solid var(--accent); outline-offset: 2px; }

.caconsent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.caconsent__input { margin-top: 3px; accent-color: var(--accent); }
.caconsent__label {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  cursor: pointer;
}
.caapply__send { margin-top: 20px; }
.caapply__send .btn { display: block; width: 100%; text-align: center; }

.caside { display: flex; flex-direction: column; gap: 18px; }
/* Both panels share the column in the drawing's 2:3 proportion, so the spare
   height is split between them instead of piling up under one. The rows keep
   their own size — stretching them to fill would put a hundred pixels of air
   between three one-line questions. */
.caside .canext,
.caside .cafaq { display: flex; flex-direction: column; }
/* The top box takes the larger share and spreads it through its four rows —
   that is where the drawing puts the height. The questions below keep their
   own size, so the box under them is left with about a third of its height
   empty, the same proportion as the drawing. */
.caside .canext { flex: 2 1 0; }
.caside .cafaq { flex: 3 1 0; }
.canext__list,
.cafaq__list { flex: 1; display: flex; flex-direction: column; }
/* In "what happens next" the spare height goes into the four rows, so the
   hairlines space themselves evenly and the panel has no hole. The questions
   below keep their own height — three one-line questions stretched to fill
   would put a hundred pixels of air between them. */
.canext__row { flex: 1; }
.canext,
.cafaq {
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.canext__eyebrow,
.cafaq__head {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.cafaq__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cafaq__all {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.canext__list { margin-top: 14px; }
.canext__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.canext__when {
  width: 76px;
  flex: 0 0 76px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.canext__text {
  flex: 1;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-body);
}

.cafaq__list { margin-top: 6px; }
.cafaq__row { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
/* The whole row is the tap target, not the 22px circle. */
.cafaq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 14px 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cafaq__text {
  flex: 1;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.28;
  color: var(--ink);
  transition: color 0.25s ease;
}
.cafaq__mark {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, color 0.25s ease;
}
.cafaq__q:hover .cafaq__text { color: var(--accent); }
.cafaq__q[aria-expanded="true"] .cafaq__text { color: var(--accent); }
.cafaq__q[aria-expanded="true"] .cafaq__mark {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(135deg);
}
/* Height comes from the measured content, not the prototype's fixed 180px. */
.cafaq__panel {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.cafaq__q[aria-expanded="false"] + .cafaq__panel { opacity: 0; }
.cafaq__a {
  padding-bottom: 16px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

/* ---- Tablet -------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Tablets are touch, so the chips go back to a 44px target here. */
  .cachip { min-height: 44px; }

  .cahero { grid-template-columns: minmax(0, 1fr); }
  .castats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .castat:nth-child(2n) { border-right: none; }
  .castat:nth-child(-n + 2) { padding-bottom: 16px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .cabenefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .calimits { grid-template-columns: minmax(0, 1fr); }

  .catable__width-first { width: 200px; }

  .caform { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 979px) {
  .cabenefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The section heads stack; `Full rate card →` is nowrap and was pushing
     itself off the right edge of the screen. */
  .cahead { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Inline links here are 19–21px of text; the hit area grows, not the type. */
  .cacompare__rate a,
  .cafaq__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .caconsent__input { width: 20px; height: 20px; flex: 0 0 20px; }

  .caoffer { padding: 24px 20px 26px; }
  .caintake { padding: 24px 20px 26px; }
  .caintake__value { font-size: 48px; }
  .castats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* No hover on touch, so every card reads in full from the start. */
  .cabenefits__grid { grid-template-columns: minmax(0, 1fr); }
  .bcard.is-active { transform: none; }
  .cabenefits__grid.is-picked .bcard:not(.is-active) { opacity: 1; }

  .calimits { padding: 24px 20px 8px; }
  .calimits__grid { grid-template-columns: minmax(0, 1fr); }
  .calimit { padding: 16px 0; border-right: none; }
  .calimit:nth-child(n + 3) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .calimit:last-child { border-bottom: none; }

  /* Two stacked cards rather than a three-column table squeezed onto a phone.
     The row label comes from the cell's own data attribute. */
  .catable,
  .catable tbody,
  .catable thead,
  .catable tfoot,
  .catable tr { display: block; width: 100%; }
  .catable { border: none; background: transparent; }
  .catable thead tr,
  .catable tfoot tr { display: block; }
  .catable thead th:first-child,
  .catable tfoot td:first-child { display: none; }
  .catable thead th,
  .catable tfoot td {
    display: block;
    border-right: none;
    border-bottom: none;
  }
  .catable tbody tr { display: block; }
  .catable tbody th {
    display: block;
    padding: 14px 18px 4px;
    border-right: none;
    border-bottom: none;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .catable tbody td {
    display: block;
    padding: 0 18px 12px;
    border-right: none;
    border-bottom: none;
  }
  .catable tbody td::before {
    content: attr(data-plan) ' — ';
    color: var(--ink-faint);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 12px;
  }

  .catrack__rail,
  .catrack__fill { display: none; }
  /* Vertical stack with the line running down their left, and both refusal
     notes visible — they are the most honest content on the page. */
  .catrack__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 26px;
    border-left: 1px solid rgba(var(--ink-rgb), 0.14);
  }
  .castep {
    position: relative;
    opacity: 1;
    padding: 18px 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  }
  .castep:last-child { border-bottom: none; }
  .castep__dot { position: absolute; top: 20px; left: -34px; background: var(--accent); }
  .castep__when { margin-top: 0; color: var(--accent); }
  .castep__fail { opacity: 1; }

  .caapply { padding: 22px 20px 24px; }
  .caapply__pair { grid-template-columns: minmax(0, 1fr); }
  .cafield__input { min-height: 44px; padding: 10px 0; }
  /* The primary action follows the reader down the form. */
  .caapply__send {
    position: sticky;
    bottom: 0;
    margin: 20px -20px -24px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel-solid);
  }

  .canext,
  .cafaq { padding: 20px 18px 22px; }
  /* Stacked there is nothing to reach down to, so every box is its own size. */
  .caside .canext,
  .caside .cafaq { flex: 0 0 auto; }
  .canext__row { flex-direction: column; gap: 4px; }
  .canext__when { width: auto; flex: 0 0 auto; }
}

/* ==========================================================================
   52. Page not found — the sheet that was never issued
   -----------------------------------------------------------------------------
   A drawing sheet, not an error graphic. Three details carry that reading and
   are not decorative: the sheet grid is 60px — half the 120px used everywhere
   else, which is what makes the panel read as an empty sheet rather than a
   page background; the stamp is tilted, so it reads as an impression instead
   of a badge; and the title strip shows dashes where a sheet number belongs.

   The refusal colour appears in exactly four places: the middle zero, the
   stamp border, the stamp text, and the Sheet / Status cells. Extending it to
   the reasons list or the report band tips the page from dry into alarmed.
   ========================================================================== */

.nftop {
  display: grid;
  grid-template-columns: 1.35fr minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 44px);
  align-items: stretch;
  margin: clamp(26px, 3.6vh, 38px) var(--pad-hero) 0;
}
.nfroutes,
.nffiles { margin: clamp(30px, 4.2vh, 44px) var(--pad-hero) 0; }

/* ---- The unissued sheet --------------------------------------------------- */

/* Flex column so the title strip takes its own height out of the panel and the
   drawing area gets whatever is left. Centring the numerals and the scale on
   the whole panel puts them on top of the strip once the sheet is short. */
.nfsheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.nfsheet__area {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* 60px, deliberately half the site's 120px blueprint. */
.nfsheet__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* All four corners at the same weight — the sheet is unissued, not lit. */
.crop--sheet {
  --crop-c: rgba(var(--ink-rgb), 0.34);
  --crop-c2: rgba(var(--ink-rgb), 0.34);
  inset: 18px;
  background:
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--crop-c), var(--crop-c)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--crop-c2), var(--crop-c2)) 100% 100% / 1px 14px no-repeat;
}

/* The lift, in the same notation as the section drawings inside real
   listings. It only works if the figures look plausible. */
.nfscale {
  position: absolute;
  top: 50%;
  left: 44px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nfscale__row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
}
.nfscale__rule { height: 1px; background: rgba(var(--ink-rgb), 0.34); }
.nfscale__rule--long { width: 26px; }
.nfscale__rule--short { width: 16px; }

.nfsheet__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* The handoff asks for `clamp(150px, 15vw, 250px)`, and at that size the
   numerals do not fit: BBH Bartle sets `404` at 3.82em of ink, so 177px needs
   676px of a 613px sheet at the site's 1180px minimum. The prototype clips it
   the same way — measured, both clip 31px off each 4 — so this is a hole in
   the reference, not a porting mistake. The second term caps the size at what
   the 1.35fr column can actually hold; below 1180 the sheet is full width and
   the design figure governs unchanged. */
.nfsheet__num {
  font-family: var(--wordmark);
  font-size: min(clamp(150px, 15vw, 250px), 13.2vw);
  line-height: 0.86;
  letter-spacing: 0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), 0.16);
}
.nfsheet__zero { -webkit-text-stroke-color: var(--refused); }
/* Engines without text stroking get a flat fill at the same weight. A solid
   block of ink here would swallow the panel. */
@supports not (-webkit-text-stroke: 1.5px currentcolor) {
  .nfsheet__num { color: rgba(var(--ink-rgb), 0.16); }
  .nfsheet__zero { color: rgba(var(--refused-rgb), 0.55); }
}
/* The tilt is what makes it an impression rather than a badge. It sits under
   the numerals, never over them. */
.nfsheet__stamp {
  margin-top: 6px;
  padding: 9px 22px;
  border: 1.5px solid rgba(var(--refused-rgb), 0.55);
  transform: rotate(-3.5deg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--refused);
}

/* Dashes where a sheet number belongs — the point of the whole panel. The
   requested URL goes in the report band, not here. */
.nfstrip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-faint);
  background: rgba(var(--scrim-rgb), 0.72);
}
.nfstrip__cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.nfstrip__cell:last-child { border-right: none; }
.nfstrip__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nfstrip__value {
  margin: 0;
  font-size: 12px;
  color: var(--ink-body);
}
.nfstrip__value--refused { color: var(--refused); }

/* ---- Revision log --------------------------------------------------------- */

.nflog {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.nflog__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}
/* `flex: 1` here is what pushes the lookup field to the foot of the panel. */
.nfreasons {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 20px;
}
.nfreason {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.nfreason__num {
  flex: 0 0 26px;
  padding-top: 2px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.nfreason__body { flex: 1; min-width: 0; }
.nfreason__title { display: block; font-size: 14px; }
.nfreason__text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.nflookup {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
}
.nflookup__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nflookup__row { display: flex; gap: 9px; }
.nflookup__input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}
.nflookup__input::placeholder { color: var(--ink-faint); }
.nflookup__btn {
  padding: 12px 24px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nflookup__btn:hover { background: var(--ink); color: var(--bg); }

/* ---- Section heads shared by the two card rows ---------------------------- */

.nfhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.nfhead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.04;
}
.nfhead__link {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- Four ways back in ---------------------------------------------------- */

.nfgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
/* Two rows rather than `space-between`: the figure block is one line tall in
   every card, so an `auto` row puts all four hairlines on the same y. With
   `space-between` the rule followed the text, and the two cards whose sentence
   fits on one line carried it 19px lower than the other two. */
.nfroute {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 190px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.nfroute:hover { color: inherit; }
/* The row rests with all four cards lit. Unlike every other card row in this
   template there is no default active card: nothing on a 404 may look
   pre-selected. */
.nfgrid.is-picked .nfroute { opacity: 0.6; }
.nfgrid.is-picked .nfroute.is-active { opacity: 1; }
.nfroute.is-active {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.nfroute__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nfroute__figure {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  transition: color 0.3s ease;
}
.nfroute.is-active .nfroute__figure { color: var(--accent); }
.nfroute__flabel {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nfroute__foot {
  display: block;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.nfroute__title { display: block; font-size: 14px; }
.nfroute__text {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---- Sheets that do exist ------------------------------------------------- */

.nffiles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.nffile {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.25s ease;
}
.nffile:hover { border-color: var(--accent); color: inherit; }
.nffile:focus-visible { border-color: var(--accent); }
.nffile__media {
  position: relative;
  flex: 0 0 128px;
  width: 128px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}
.nffile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nffile__hatch {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-size: 16px 16px;
}
.nffile__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 7px); }
.nffile__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.nffile__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.nffile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
}
.nffile__strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nffile__sheet { color: var(--accent); }
.nffile__deal { color: var(--ink-faint); }
.nffile__title,
.nffile__location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nffile__title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
}
.nffile__location {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
/* `margin-top: auto` is what lines the three prices up across the row. */
.nffile__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.nffile__price { font-family: var(--serif); font-size: 19px; }
.nffile__area {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Dead-link report ----------------------------------------------------- */

.nfreport {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin: clamp(32px, 4.4vh, 46px) var(--pad-hero) 40px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.06);
}
.nfreport__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.nfreport__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.08;
}
.nfreport__text {
  margin-top: 9px;
  max-width: 620px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.nfreport__actions { display: flex; gap: 12px; }

/* ---- Tablet --------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Stacked, sheet on top. It keeps its crop marks, stamp and title strip. */
  .nftop { grid-template-columns: minmax(0, 1fr); }
  .nfsheet { min-height: 340px; }
  /* Full width now, so the design figure fits on its own — drop the cap. */
  .nfsheet__num { font-size: clamp(150px, 15vw, 250px); }

  .nfgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nffiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nffiles__grid > li:last-child { grid-column: 1 / -1; }

  .nfreport {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
}

/* ---- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
  .nfsheet { min-height: 300px; }
  /* The strip doubles to 2×2 here and eats most of a 300px panel: at 600px the
     stamp came within 2px of it. Floor the drawing area instead of the panel,
     so the numerals and the stamp always keep their clearance and the sheet
     grows by exactly what the strip took. */
  .nfsheet__area { min-height: 220px; }
  /* The scale crowds a narrow sheet; the marks, stamp and strip stay. */
  .nfscale { display: none; }
  /* The handoff's `clamp(96px, 26vw, 150px)` overruns a 319px sheet at 375px
     for the same reason as the desktop figure — 21vw is what fits the face. */
  .nfsheet__num { font-size: clamp(80px, 21vw, 150px); }
  .nfsheet__stamp { padding: 8px 16px; font-size: 12px; letter-spacing: 0.22em; }

  .nfstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nfstrip__cell { padding: 11px 14px; }
  .nfstrip__cell:nth-child(2) { border-right: none; }
  .nfstrip__cell:nth-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .nflog { padding: 22px 20px 24px; }

  /* Full-width field, full-width button under it. */
  .nflookup__row { flex-direction: column; gap: 14px; }
  .nflookup__input { flex: 0 0 auto; }
  .nflookup__btn { width: 100%; min-height: 44px; }

  .nfhead { flex-direction: column; align-items: flex-start; gap: 14px; }

  .nfgrid,
  .nffiles__grid { grid-template-columns: minmax(0, 1fr); }
  .nffiles__grid > li:last-child { grid-column: auto; }
  .nfroute { min-height: 0; }
  .nffile__media { flex: 0 0 96px; width: 96px; }

  .nfreport { padding: 22px 20px 24px; }
  .nfreport__actions { flex-direction: column; }
  .nfreport__actions .btn { width: 100%; min-height: 44px; }
}

/* ---- Touch ---------------------------------------------------------------- */

@media (hover: none) {
  /* Every card stays fully readable: the dimming is a pointer affordance and
     there is no pointer here. */
  .nfgrid.is-picked .nfroute { opacity: 1; }
  .nfroute.is-active { transform: none; }
}

/* ==========================================================================
   53. Career — hiring, written against the genre
   -----------------------------------------------------------------------------
   No office photography, no values, no "join our journey". The argument is the
   reframe in the first line and the two numbers under it, and every block after
   that leads with workload rather than perks.

   `cr*` was the obvious prefix and is deliberately not used — `.crop`, `.crow`
   and `.crumbs` already live there, and every naming collision in this project
   started exactly that way. Everything below is `job*`.

   The refusal colour appears in exactly three places: the `1 in 9` figure, the
   two notes on the hiring track, and the `What you do not get` panel.
   ========================================================================== */

.joblead,
.jobtrades,
.jobroles,
.jobhire,
.jobterms,
.jobvoices,
.jobapply { margin: clamp(32px, 4.4vh, 48px) var(--pad-hero) 0; }
.joblead { margin-top: clamp(26px, 3.6vh, 38px); }
.jobapply { margin-bottom: 40px; }

/* Shared section head — the two card rows, the roles table and the track. */
.jobhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.jobhead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
/* Rewritten on hover by block 9n; its resting text is the argument, so it is
   printed in the markup rather than assembled in script. */
.jobhead__line {
  max-width: 380px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  text-align: right;
  color: var(--ink-body);
}

/* ---- Offer sheet + intake panel ------------------------------------------ */

.joblead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
}

.joboffer {
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.joboffer__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 400;
  line-height: 1.03;
}
.joboffer__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 16px;
}
.joboffer__body p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}
/* `margin-top: auto` is the spacer that height-matches the sheet to the intake
   panel beside it. Four paragraphs is what keeps the gap from opening up. */
.jobstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-faint);
}
.jobstat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 18px 0 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobstat:last-child { border-right: none; }
.jobstat__value { font-family: var(--serif); font-size: 26px; line-height: 1; }
.jobstat__value--accent { color: var(--accent); }
.jobstat__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.jobintake {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.jobintake__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.jobintake__count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}
.jobintake__value { font-family: var(--serif); font-size: 62px; line-height: 0.9; }
.jobintake__unit {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.jobcities { margin-top: 20px; }
/* No rule under the last city: the meta block below it draws its own, and two
   hairlines 22px apart read as a doubled divider. */
.jobcity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobcity:last-child { border-bottom: none; }
.jobcity__name { flex: 1; min-width: 0; font-size: 13px; }
.jobcity__bar {
  display: block;
  width: 74px;
  height: 3px;
  background: rgba(var(--ink-rgb), 0.14);
}
.jobcity__fill { display: block; height: 3px; background: var(--accent); }
.jobcity__fill--100 { width: 100%; }
.jobcity__fill--67 { width: 67%; }
.jobcity__fill--34 { width: 34%; }
.jobcity__n {
  width: 18px;
  font-family: var(--serif);
  font-size: 17px;
  text-align: right;
}

.jobmeta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-faint);
}
.jobmeta__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.jobmeta__row dt { font-size: 12px; font-weight: 300; color: var(--ink-body); }
.jobmeta__row dd { margin: 0; font-size: 13px; }
.jobintake__cta .btn--block { margin-top: 22px; }
.jobintake__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ---- The four trades ------------------------------------------------------ */

.jobtrades__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.jobtrade {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
/* Rests with all four lit — the row has no default active card. */
.jobtrades__grid.is-picked .jobtrade { opacity: 0.6; }
.jobtrades__grid.is-picked .jobtrade.is-active { opacity: 1; }
.jobtrade.is-active { transform: translateY(-4px); border-color: var(--accent); }
.jobtrade__strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.jobtrade__open { transition: color 0.3s ease; }
.jobtrade.is-active .jobtrade__open { color: var(--accent); }
.jobtrade__figure {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  transition: color 0.3s ease;
}
.jobtrade.is-active .jobtrade__figure { color: var(--accent); }
.jobtrade__flabel {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jobtrade__title {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
}
.jobtrade__text {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
}
.jobtrade__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}
.jobtrade__tools li {
  padding: 5px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Open roles ----------------------------------------------------------- */

.jobfilter {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.jobfilter__list { display: flex; border: 1px solid var(--line-input); }
.jobfilter__label {
  display: block;
  padding: 12px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.jobfilter__list li:last-child .jobfilter__label { border-right: none; }
.jobfilter__label:hover { color: var(--accent); }
.jobfilter__input:checked + .jobfilter__label {
  background: var(--accent);
  color: var(--on-accent);
}
.jobfilter__input:focus-visible + .jobfilter__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Column widths are declared once and shared by the guide and every row, so
   the header and the values cannot drift apart. */
.jobguide,
.jobrow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 150px 130px 150px 40px;
  gap: 16px;
  align-items: center;
}
.jobguide {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.jobitem { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.jobitem__h { margin: 0; font: inherit; }
.jobrow {
  width: 100%;
  padding: 16px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}
.jobrow:hover { background: rgba(var(--accent-rgb), 0.04); }
.jobrow[aria-expanded='true'] { background: rgba(var(--accent-rgb), 0.07); }
.jobrow__ref {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.jobrow__role {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.jobrow__title {
  font-family: var(--serif);
  font-size: 20px;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.jobrow[aria-expanded='true'] .jobrow__title { color: var(--accent); }
.jobrow__team {
  overflow: hidden;
  font-size: 12px;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-body);
}
.jobrow__city { font-size: 12px; }
.jobrow__basis {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jobrow__range { font-family: var(--serif); font-size: 17px; }
/* Drawn rather than a typed `+`: a glyph rotates around its own baseline box
   and lands crooked. */
.jobrow__plus {
  position: relative;
  justify-self: end;
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
}
.jobrow__plus::before,
.jobrow__plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.jobrow__plus::before { width: 13px; height: 1px; }
.jobrow__plus::after { width: 1px; height: 13px; }
.jobrow[aria-expanded='true'] .jobrow__plus { transform: rotate(135deg); }

/* Height is measured from the content by block 9n, never pinned to a constant.
   With no script the panels stay open and the page reads as seven full role
   descriptions. */
.jobpanel {
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.jobpanel__inner {
  display: grid;
  grid-template-columns: 1.2fr minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  padding: 6px 14px 26px 66px;
}
.jobpanel__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.jobpanel__text {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.jobpanel__actions { display: flex; gap: 10px; margin-top: 18px; }
.jobpanel__actions .btn { padding: 12px 24px; letter-spacing: 0.16em; }
.jobkpis { margin-top: 8px; }
.jobkpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobkpi:last-child { border-bottom: none; }
.jobkpi dt { font-size: 12px; font-weight: 300; color: var(--ink-body); }
.jobkpi dd { margin: 0; font-family: var(--serif); font-size: 16px; }
.jobneeds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.jobneeds li {
  padding: 6px 11px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.jobpanel__closes {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* The filter is the radio group itself, so it narrows the list with the script
   off. Block 9n only keeps the count honest. */
.jobroles:has(#dept-survey:checked) .jobitem:not([data-dept='survey']),
.jobroles:has(#dept-verify:checked) .jobitem:not([data-dept='verify']),
.jobroles:has(#dept-data:checked) .jobitem:not([data-dept='data']),
.jobroles:has(#dept-reports:checked) .jobitem:not([data-dept='reports']) { display: none; }

/* ---- How hiring runs ------------------------------------------------------ */

.jobodds { text-align: right; }
.jobodds__value {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--refused);
}
.jobodds__label {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Geometry off the dot grid: dots start each 1fr cell and are 15px wide, so
   the line runs 7.5px → calc(25% - 7.5px) and the fill is 0/25/50/75%. */
.jobtrack {
  position: relative;
  margin-top: 40px;
  padding-bottom: 8px;
}
.jobtrack__line,
.jobtrack__fill {
  position: absolute;
  top: 7px;
  left: 7.5px;
  height: 1px;
}
.jobtrack__line {
  right: calc(25% - 7.5px);
  background: rgba(var(--ink-rgb), 0.24);
}
.jobtrack__fill {
  width: 0;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}
.jobtrack__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.jobstep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 30px;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.jobstep.is-active { opacity: 1; }
.jobstep__dot {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.24);
  border-radius: 50%;
  background: var(--bg);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.jobstep.is-reached .jobstep__dot {
  border-color: var(--accent);
  background: var(--accent);
}
.jobstep.is-active .jobstep__dot { transform: scale(1.25); }
.jobstep__body { display: flex; flex-direction: column; }
.jobstep__when {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.jobstep__title {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.06;
}
.jobstep__text {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
}
/* Always in the DOM, revealed by opacity only — a screen reader has to reach
   the two places where people actually get filtered out. */
.jobstep__fail {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--refused);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.jobstep.is-active .jobstep__fail { opacity: 1; }

/* ---- What you get / what you do not get ----------------------------------- */

.jobterms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.jobperks,
.jobnots { padding: 28px 30px 30px; }
.jobperks {
  border: 1px solid var(--line);
  background: var(--panel);
}
.jobperks .eyebrow__line,
.jobnots .eyebrow__line { flex: 1; width: auto; }
.jobperks .eyebrow__line { background: var(--line-faint); }
.jobperks__title,
.jobnots__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}
.jobperks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 20px;
}
/* Dividers belong to the gaps between cells, never to the edge of the grid. */
.jobperk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 15px 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobperk:nth-child(2n) { border-right: none; }
.jobperk:nth-last-child(-n + 2) { border-bottom: none; }
.jobperk__value { font-family: var(--serif); font-size: 20px; line-height: 1; }
.jobperk__label {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
}

.jobnots {
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
}
.eyebrow--refused { color: var(--refused); }
.eyebrow--refused .eyebrow__line { background: var(--refused-line); }
.jobnots__list { margin-top: 18px; }
.jobnot {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobnot:last-child { border-bottom: none; }
.jobnot__mark {
  display: flex;
  flex: 0 0 19px;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 1px solid var(--refused-line);
  border-radius: 50%;
  font-size: 12px;
  color: var(--refused);
}
.jobnot__body { flex: 1; min-width: 0; }
.jobnot__title { display: block; font-size: 14px; }
.jobnot__text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---- Three days at work --------------------------------------------------- */

.jobvoices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.jobvoice {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.jobvoice__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jobvoice__years { color: var(--accent); }
.jobvoice__quote {
  flex: 1;
  margin: 0;
  padding: 24px 22px 18px;
}
.jobvoice__quote p {
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
}
.jobvoice__quote p::before { content: '\201C'; }
.jobvoice__quote p::after { content: '\201D'; }
.jobvoice__by {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
/* Initials, not an empty photo frame: the drop-slot component cannot render
   this small. Real portraits go in at the same size. */
.jobvoice__avatar {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
  object-fit: cover;
}
.jobvoice__who { flex: 1; min-width: 0; }
.jobvoice__name { display: block; font-size: 13px; }
.jobvoice__city {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Apply ---------------------------------------------------------------- */

.jobapply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.jobform {
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.jobform .eyebrow__line { flex: 1; width: auto; background: var(--line-faint); }
.jobform__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.06;
}
.jobform__lead {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.jobform__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}
/* The only accent label on the form, and it marks the one answer that is
   scored. Do not spread it to the other four fields. */
.cafield__label--scored { color: var(--accent); }
.jobform__area {
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  line-height: 1.6;
  resize: vertical;
}
.jobform__send .btn--block { margin-top: 22px; }

.jobaside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.jobopen,
.jobafter {
  border: 1px solid var(--line);
  background: var(--panel);
}
.jobopen { padding: 24px 26px 22px; }
.jobafter { flex: 1; padding: 24px 26px; }
.jobopen__eyebrow,
.jobafter__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.jobopen__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.08;
}
.jobopen__text {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.jobopen__pick { color: var(--accent); }
.jobafter__list { margin-top: 12px; }
.jobafter__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jobafter__row:last-child { border-bottom: none; }
.jobafter__row dt {
  flex: 0 0 84px;
  padding-top: 2px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.jobafter__row dd {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-body);
}
.jobafter__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ---- Tablet --------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Stacked, so there is nothing to reach down to: drop the spacers or the
     dead gap the four paragraphs exist to prevent comes straight back. */
  .joblead { grid-template-columns: minmax(0, 1fr); }
  .jobstats,
  .jobmeta { margin-top: 26px; }
  .jobstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobstat:nth-child(2n) { border-right: none; }
  .jobstat:nth-child(-n + 2) { padding-bottom: 16px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .jobtrades__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Basis leaves the row — it is Full time on six of the seven. */
  .jobguide,
  .jobrow { grid-template-columns: 48px minmax(0, 1fr) 120px 130px 36px; }
  .jobguide span:nth-child(4),
  .jobrow__basis { display: none; }
  .jobpanel__inner { gap: 22px; padding-left: 48px; }

  .jobterms,
  .jobapply { grid-template-columns: minmax(0, 1fr); }

  .jobvoices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobvoices__grid > li:last-child { grid-column: 1 / -1; }
}

/* ---- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
  .joboffer,
  .jobintake,
  .jobperks,
  .jobnots,
  .jobform { padding: 22px 20px 24px; }
  .jobopen,
  .jobafter { padding: 20px 18px; }

  .jobstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobhead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .jobhead__line { max-width: none; text-align: left; }
  .jobodds { text-align: left; }

  .jobtrades__grid { grid-template-columns: minmax(0, 1fr); }

  /* The table becomes cards: three lines, and the plus keeps its own column. */
  .jobguide { display: none; }
  .jobfilter__list { flex-wrap: wrap; }
  .jobfilter__label { min-height: 44px; display: flex; align-items: center; }
  /* Three lines: ref and title, then city · basis, then the band. Flex rather
     than grid — `display: inline` is ignored on a grid item, so city and basis
     placed in one cell would sit on top of each other instead of running on. */
  .jobrow {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 16px 44px 16px 12px;
  }
  .jobrow__ref,
  .jobrow__role,
  .jobrow__range { flex: 0 0 100%; }
  .jobrow__role { flex-direction: column; align-items: flex-start; gap: 2px; }
  .jobrow__title { white-space: normal; }
  .jobrow__team { white-space: normal; overflow: visible; }
  /* Basis was dropped from the tablet row; on a card there is room for it. */
  .jobrow__city,
  .jobrow__basis { display: block; flex: 0 0 auto; }
  .jobrow__city::after {
    content: '·';
    margin-left: 6px;
    color: var(--ink-faint);
  }
  .jobrow__plus {
    position: absolute;
    top: 18px;
    right: 12px;
  }
  .jobpanel__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 4px 12px 22px;
  }
  .jobpanel__actions { flex-wrap: wrap; }

  /* The track turns vertical, and the one-line-across-the-row geometry cannot
     come with it: stacked, the four steps are different heights, so 0/25/50/75%
     of the track lands nowhere near the dots (measured 10, 9 and 28px out).
     Each step draws its own connector down to the next dot instead — the
     geometry comes from the layout and holds whatever the copy does.
     Both refusal notes are simply visible; there is no hover to reveal them. */
  .jobtrack { margin-top: 28px; }
  .jobtrack__line,
  .jobtrack__fill { display: none; }
  .jobtrack__steps { grid-template-columns: minmax(0, 1fr); }
  .jobstep {
    position: relative;
    padding: 0 0 26px 34px;
    opacity: 1;
  }
  .jobstep::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 7px;
    width: 1px;
    background: rgba(var(--ink-rgb), 0.24);
  }
  /* A connector is filled when the step below it has been reached. */
  .jobstep:has(+ .jobstep.is-reached)::before { background: var(--accent); }
  .jobstep:last-child { padding-bottom: 0; }
  .jobstep:last-child::before { content: none; }
  .jobstep__dot { position: absolute; top: 0; left: 0; }
  .jobstep__when { margin-top: 0; }
  .jobstep__fail { opacity: 1; }

  .jobperks__grid { grid-template-columns: minmax(0, 1fr); }
  .jobperk { padding-right: 0; border-right: none; }
  .jobperk:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .jobperk:last-child { border-bottom: none; }

  .jobvoices__grid { grid-template-columns: minmax(0, 1fr); }
  .jobvoices__grid > li:last-child { grid-column: auto; }

  .jobform__pair { grid-template-columns: minmax(0, 1fr); }
  .jobafter__row { flex-direction: column; gap: 4px; }
  .jobafter__row dt { flex: 0 0 auto; }
  /* The primary action follows the reader down a long form. */
  .jobform__send {
    position: sticky;
    bottom: 0;
    margin: 0 -20px -24px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel-solid);
  }
  .jobform__send .btn--block { margin-top: 0; min-height: 44px; }
}

/* ---- Touch ---------------------------------------------------------------- */

@media (hover: none) {
  /* Every card stays readable and every note stays visible: the dimming and
     the reveal are pointer affordances and there is no pointer here. */
  .jobtrades__grid.is-picked .jobtrade { opacity: 1; }
  .jobtrade.is-active { transform: none; }
  .jobstep { opacity: 1; }
  .jobstep__fail { opacity: 1; }
  .jobrow { min-height: 44px; }
  .jobfilter__label { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   54. Compare — four files, with the difference named
   -----------------------------------------------------------------------------
   The three devices that make this more than four listings side by side: the
   best value in every row is marked, a switch hides the rows where all four
   files agree, and the verdict at the foot says what the trade-off is.

   Real tables throughout — this is the page where screen-reader table
   semantics matter most, so `border-collapse: separate` is deliberate: with
   `collapse` a sticky row label loses its own background and the cells scroll
   through it.

   The refusal colour appears in exactly three places: the gaps figure, the ✕
   marks and their text, and the Dearest rank. A price *drop* is good news and
   reads in `--green`, never in refusal red.
   ========================================================================== */

.cmpbench,
.cmpsheet,
.cmpchecks,
.cmpcost,
.cmploc,
.cmpverdict,
.cmpempty { margin: clamp(30px, 4vh, 44px) var(--pad-hero) 0; }
.cmpbench { margin-top: clamp(24px, 3.4vh, 36px); }
.cmpverdict,
.cmpempty { margin-bottom: 40px; }

.cmphead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cmphead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}

/* ---- The bench ------------------------------------------------------------ */

.cmpbench {
  border: 1px solid var(--line);
  background: var(--panel);
}
.cmpbench__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-faint);
}
.cmpbench__tools {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cmpbench__saved { color: var(--ink-muted); }
.cmpbench__clear {
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}
.cmpbench__clear:hover { color: var(--refused); }

.cmpbench__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cmpslot {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  transition: opacity 0.25s ease;
}
.cmpslot:last-child { border-right: none; }
.cmpslot__file { display: flex; align-items: center; gap: 14px; width: 100%; }
/* An emptied slot invites a replacement rather than leaving a hole. */
.cmpslot__add {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: 1px dashed var(--line-input);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmpslot__add:hover { border-color: var(--accent); color: var(--accent); }
.cmpslot.is-gone .cmpslot__file { display: none; }
.cmpslot.is-gone .cmpslot__add { display: flex; }

/* Hatch and sheet number, not a photo frame: the drop-slot component cannot
   render at 62×46 and ships clipped letter fragments. */
.cmpslot__plate {
  position: relative;
  flex: 0 0 62px;
  width: 62px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--line-faint);
  background: rgba(var(--ink-rgb), 0.06);
}
.cmpslot__hatch {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-size: 12px 12px;
}
.cmpslot__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 7px); }
.cmpslot__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 8px); }
.cmpslot__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.4) 1px, transparent 1.6px); }
.cmpslot__hatch--4 { background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.4) 0 1px, transparent 1px 6px); }
.cmpslot__short {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.cmpslot__body { flex: 1; min-width: 0; }
.cmpslot__sheet {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmpslot__title,
.cmpslot__location {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmpslot__title {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.1;
}
.cmpslot__location {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.cmpslot__remove {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-input);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.cmpslot__remove:hover { border-color: var(--refused); color: var(--refused); }

/* ---- Controls -------------------------------------------------------------- */

.cmpcontrols { display: flex; align-items: center; gap: 22px; }
.cmpcontrols__sep { width: 1px; height: 22px; background: var(--line-faint); }
.cmpswitch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cmpswitch__track {
  position: relative;
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.16);
  transition: background 0.25s ease;
}
.cmpswitch[aria-checked='true'] .cmpswitch__track { background: var(--accent); }
.cmpswitch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transition: left 0.25s var(--ease), background 0.25s ease;
}
.cmpswitch[aria-checked='true'] .cmpswitch__knob { left: 23px; background: var(--on-accent); }
.cmpswitch__label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cmplegend {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cmplegend__swatch {
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
}

/* Two-at-a-time picker: only ever shown below 768px. */
.cmppick { display: none; }

/* ---- The tables ------------------------------------------------------------ */

.cmpscroll { overflow-x: auto; }
.cmptable {
  width: 100%;
  margin-top: 22px;
  /* `separate` is required, not stylistic: a sticky row label under
     `collapse` does not paint its own background and the cells scroll
     straight through it. */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.cmptable + .cmptable { margin-top: 26px; }
.cmptable__group,
.cmprow__label {
  width: 220px;
  text-align: left;
}
.cmptable__group,
.cmptable__col {
  padding: 0 9px 10px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cmptable__group { color: var(--accent); }
.cmptable__col { color: var(--ink-faint); }
.cmprow__label {
  padding: 12px 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
  vertical-align: middle;
}
.cmptable tbody tr:last-child .cmprow__label,
.cmptable tbody tr:last-child .cmpcell,
.cmptable tbody tr:last-child .cmpcheck { border-bottom: none; }
.cmprow__tag {
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmprow__tag--key { color: var(--accent); }
.cmprow__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}

.cmpcell {
  padding: 12px 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: middle;
}
.cmpcell__value {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
}
.cmpcell__delta {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
/* A price drop is good news — green, never the refusal colour. */
.cmpcell__delta--down { color: var(--green); }
/* The mark sits in the gutter as an inset rule so the cell does not shift by
   the width of a border. */
.cmpcell.is-best {
  background: rgba(var(--accent-rgb), 0.09);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.cmpcell.is-best .cmpcell__value { color: var(--accent); }

/* A removed file keeps its column but stops carrying figures. */
.cmpslot.is-gone,
.cmpcell.is-gone,
.cmpcheck.is-gone,
.cmptable__col.is-gone { color: var(--ink-faint); }
.cmpcell.is-gone { background: transparent; box-shadow: none; }
.cmpcell.is-gone .cmpcell__value { color: var(--ink-faint); }

/* ---- Verification ---------------------------------------------------------- */

.cmpgaps { text-align: right; }
.cmpgaps__value {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--refused);
}
.cmpgaps__label {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cmpcheck {
  padding: 12px 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: middle;
}
.cmpcheck__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentcolor;
  font-size: 12px;
}
.cmpcheck__mark--ok { color: var(--green); }
.cmpcheck__mark--no { color: var(--refused); }
/* The words are the point; the glyph alone tells the reader nothing. */
.cmpcheck__text {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
}
.cmpcheck__text--no { color: var(--refused); }

/* ---- Five-year cost -------------------------------------------------------- */

.cmpkeys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.cmpkey {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cmpkey__swatch,
.cmpline__swatch {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
}
.cmpkey__swatch--1, .cmpline__swatch--1 { background: var(--accent); }
.cmpkey__swatch--2, .cmpline__swatch--2 { background: rgba(var(--accent-rgb), 0.55); }
.cmpkey__swatch--3, .cmpline__swatch--3 { background: rgba(var(--ink-rgb), 0.42); }
.cmpkey__swatch--4, .cmpline__swatch--4 { background: rgba(var(--ink-rgb), 0.2); }

.cmpcost__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.cmpcost__col {
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.cmpcost__grid.is-picked .cmpcost__col { opacity: 0.6; }
.cmpcost__grid.is-picked .cmpcost__col.is-active { opacity: 1; }
.cmpcost__col.is-active { border-color: var(--accent); }
.cmpcost__col.is-gone { opacity: 0.45; }
.cmpcost__sheet {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmpcost__rank {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cmpcost__rank--best { color: var(--green); }
.cmpcost__rank--worst { color: var(--refused); }
.cmpcost__total {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  transition: color 0.3s ease;
}
.cmpcost__col.is-active .cmpcost__total { color: var(--accent); }
.cmpcost__col.is-gone .cmpcost__total { color: var(--ink-faint); }

/* The bar is decorative — every amount is printed underneath it. Its segment
   widths are proportions of that file's own total, so they are set at runtime;
   without scripting the bar is not drawn at all rather than drawn empty. */
.cmpbar { display: none; }
.js .cmpbar {
  display: flex;
  height: 15px;
  margin-top: 14px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.16);
}
.cmpbar__seg { flex: 0 0 auto; height: 15px; }
.cmpbar__seg--1 { background: var(--accent); }
.cmpbar__seg--2 { background: rgba(var(--accent-rgb), 0.55); }
.cmpbar__seg--3 { background: rgba(var(--ink-rgb), 0.42); }
.cmpbar__seg--4 { background: rgba(var(--ink-rgb), 0.2); }
.cmpcost__col.is-gone .cmpbar__seg { background: rgba(var(--ink-rgb), 0.16); }

.cmpcost__lines { margin-top: 16px; }
.cmpline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.cmpline:last-child { border-bottom: none; }
.cmpline dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.cmpline dd { margin: 0; font-family: var(--serif); font-size: 16px; }

/* ---- Location -------------------------------------------------------------- */

.cmploc {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
/* `z-index: 0` makes the frame its own stacking context — Leaflet lays its
   panes out between 400 and 1000 and would otherwise sit over the modal and
   the sticky header. */
.cmpmap {
  position: relative;
  z-index: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.04);
}
.cmpmap__canvas { position: absolute; inset: 0; }
/* Read without scripting, and the map's own fallback if Leaflet is missing. */
.cmpmap__files {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
/* A removed file keeps its pin so the shape of the search stays legible, but
   stops carrying a price. */
.pin--gone {
  border-color: var(--line);
  background: var(--panel-solid);
  color: var(--ink-faint);
}
/* `min-width: 0` on both grid items, not just `minmax(0, 1fr)` on the track:
   a grid item defaults to `min-width: auto` and cannot shrink below its
   content, so the scrolling table inside pushed the whole page 38px wide. */
.cmpdist {
  min-width: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.cmpmap { min-width: 0; }
.cmptable--dist { margin-top: 16px; }
.cmptable--dist .cmptable__group,
.cmptable--dist .cmprow__label { width: auto; }
.cmptable--dist .cmpcell,
.cmptable--dist .cmptable__col { width: 62px; text-align: right; }
.cmptable--dist .cmpcell__value { font-size: 15px; }

/* ---- Verdict --------------------------------------------------------------- */

.cmpverdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 28px 32px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
}
.cmpverdict__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmpverdict__title {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.08;
}
.cmpverdict__text {
  margin-top: 10px;
  max-width: 760px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}
.cmpverdict__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.cmpempty {
  padding: 46px 32px;
  border: 1px dashed var(--line-input);
  text-align: center;
}
.cmpempty__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1;
}
.cmpempty__text {
  margin: 10px 0 20px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}

/* ---- Tablet ---------------------------------------------------------------- */

@media (max-width: 1179px) {
  .cmpbench__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmpslot:nth-child(2n) { border-right: none; }
  .cmpslot:nth-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  /* The value columns scroll rather than compress — 160px of label plus four
     readable columns is wider than a tablet, and squeezing a serif figure into
     138px is how a comparison stops being one. The label column stays put so a
     row never loses its name mid-scroll. */
  .cmptable { min-width: 760px; }
  /* Distances are four 62px columns, so they need far less room than the sheet. */
  .cmptable--dist { min-width: 420px; }
  .cmptable__group,
  .cmprow__label {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 160px;
    background: var(--bg);
  }
  .cmpdist .cmptable__group,
  .cmpdist .cmprow__label { background: var(--panel); }

  .cmpcost__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cmploc { grid-template-columns: minmax(0, 1fr); }
  .cmpmap { min-height: 320px; }

  .cmpverdict { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
}

/* ---- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .cmpbench__slots { grid-template-columns: minmax(0, 1fr); }
  .cmpslot { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .cmpslot:last-child { border-bottom: none; }
  .cmpslot__remove { flex: 0 0 44px; width: 44px; height: 44px; }

  .cmphead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cmpgaps { text-align: left; }
  .cmpcontrols { flex-wrap: wrap; gap: 14px; }
  .cmpswitch { min-height: 44px; }

  /* Four columns at 375px are unreadable at any type size, so the sheet shows
     two files and a picker chooses which. The label column stays sticky. */
  .cmppick {
    display: block;
    margin: 18px 0 0;
    padding: 0;
    border: none;
  }
  .cmppick__legend {
    padding: 0;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .cmppick__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .cmppick__label {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-input);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .cmppick__input:checked + .cmppick__label {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.09);
    color: var(--accent);
  }
  .cmppick__input:focus-visible + .cmppick__label { outline: 2px solid var(--accent); outline-offset: 2px; }

  .cmptable { min-width: 0; }
  .cmptable__group,
  .cmprow__label { width: 130px; }
  .cmpcell__value { font-size: 15px; }
  /* Only the two picked files are in the sheet, the checks and the distances —
     they all follow one selection so the reader is not comparing different
     pairs in different blocks. */
  .cmpsheet [data-cmp-col].is-unpicked,
  .cmpchecks [data-cmp-col].is-unpicked,
  .cmpdist [data-cmp-col].is-unpicked { display: none; }

  .cmpcost__grid { grid-template-columns: minmax(0, 1fr); }
  .cmpmap { min-height: 240px; }
  .cmpdist { padding: 20px 18px 22px; }

  .cmpverdict { padding: 22px 20px 24px; }
  .cmpverdict__actions { flex-direction: column; }
  .cmpverdict__actions .btn { width: 100%; min-height: 44px; }
  .cmpempty { padding: 32px 20px; }
}

/* ---- Touch ----------------------------------------------------------------- */

@media (hover: none) {
  /* No pointer, so nothing is dimmed and every column stays readable. */
  .cmpcost__grid.is-picked .cmpcost__col { opacity: 1; }
  .cmpcost__col.is-gone { opacity: 0.45; }
  .cmpslot__remove { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   55. Home loan process — nine stages, and where they break
   -----------------------------------------------------------------------------
   Most lender pages sell a rate. This one sells the shape of the process, and
   the red bar under each timeline node — the share of purchases that collapse
   at that stage — is the single most useful thing on it.

   The refusal colour means one thing here: this can go wrong. It appears on the
   two header figures, the failure bars, the `Waiting on` value when it is not
   you, the `Where it breaks` panel and rising rate deltas. A falling rate is
   good news and reads green, however many minus signs it carries.
   ========================================================================== */

.hlrun,
.hlstages,
.hlpair,
.hlbreak { margin: clamp(30px, 4vh, 44px) var(--pad-hero) 0; }
.hlrun { margin-top: clamp(24px, 3.4vh, 36px); }
.hlpair--rates { margin-bottom: 40px; }

.hlhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.hlhead--tight { padding-bottom: 14px; }
.hlhead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.hlhead__line {
  max-width: 380px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  text-align: right;
  color: var(--ink-body);
}
.hlpanel__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}

/* ---- The whole run --------------------------------------------------------- */

.hlrun {
  padding: 26px 28px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.hlrun__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.hlrun__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}
.hlrun__stats { display: flex; gap: 26px; }
.hlstat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 26px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.hlstat:last-child { padding-right: 0; border-right: none; }
.hlstat__value { font-family: var(--serif); font-size: 28px; line-height: 1; }
.hlstat__value--bad { color: var(--refused); }
.hlstat__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Geometry off the node grid: 13px dots at the start of each 1fr cell, so the
   line runs 6.5px → calc(11.11% - 6.5px) and the fill is i × 100 / 9. */
.hltrack {
  position: relative;
  margin-top: 34px;
}
.hltrack__line,
.hltrack__fill {
  position: absolute;
  top: 6px;
  left: 6.5px;
  height: 1px;
}
.hltrack__line {
  right: calc(11.11% - 6.5px);
  background: rgba(var(--ink-rgb), 0.24);
}
.hltrack__fill {
  width: 0;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}
.hltrack__nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.hlnode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 14px 0 0;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.hltrack:not(.is-picked) .hlnode,
.hlnode.is-active { opacity: 1; }
/* Filled when you are the one who signs, hollow when you are waiting on
   somebody else — four of these are yours and the rest are worth chasing. */
.hlnode__dot {
  width: 13px;
  height: 13px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hlnode--waiting .hlnode__dot {
  border-color: rgba(var(--ink-rgb), 0.24);
  background: var(--bg);
}
.hlnode.is-active .hlnode__dot { transform: scale(1.3); border-color: var(--accent); }
.hlnode__num {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.hlnode__name {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.15;
  transition: color 0.25s ease;
}
.hlnode.is-active .hlnode__name { color: var(--accent); }
.hlnode__days {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* The share of purchases that collapse at this stage. Keep it. */
.hlnode__bar {
  width: 100%;
  height: 4px;
  margin-top: 10px;
  background: rgba(var(--ink-rgb), 0.12);
}
.hlnode__fill {
  display: block;
  height: 4px;
  background: rgba(var(--refused-rgb), 0.45);
  transition: background 0.3s ease;
}
.hlnode.is-active .hlnode__fill { background: var(--refused); }
/* Widths are the shares scaled against the largest — classes, not an inline
   style attribute, so they survive with no script. */
.hlbar--0 { width: 0; }
.hlbar--6 { width: 6%; }
.hlbar--12 { width: 12%; }
.hlbar--24 { width: 24%; }
.hlbar--67 { width: 67%; }
.hlbar--94 { width: 94%; }
.hlnode__share {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.hllegend {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hllegend__item { display: flex; align-items: center; gap: 9px; }
.hllegend__bar { width: 18px; height: 4px; background: rgba(var(--refused-rgb), 0.45); }
.hllegend__dot {
  width: 11px;
  height: 11px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
}
.hllegend__note {
  margin-left: auto;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* ---- Stage by stage -------------------------------------------------------- */

.hlscroll { overflow-x: auto; }
.hltable,
.hlcosttable,
.hlratetable {
  width: 100%;
  /* `separate` so a sticky row label keeps its own background once the value
     columns scroll. */
  border-collapse: separate;
  border-spacing: 0;
}
.hltable { margin-top: 20px; table-layout: fixed; }
.hltable thead th,
.hlcosttable thead th,
.hlratetable thead th {
  padding: 0 9px 10px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
}
.hltable thead th:first-child { width: 200px; }
.hltable thead th:last-child { width: 40px; }

.hlrow > * {
  padding: 14px 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: middle;
  transition: background 0.2s ease;
}
.hlgroup:last-child .hlrow > * { border-bottom: none; }
.hlrow:hover > * { background: rgba(var(--accent-rgb), 0.04); }
.hlrow.is-open > * { background: rgba(var(--accent-rgb), 0.07); }
.hlrow__stage { text-align: left; }
.hlrow__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.hlrow__name {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  transition: color 0.25s ease;
}
.hlrow.is-open .hlrow__name { color: var(--accent); }
.hlrow__who { font-size: 13px; }
.hlrow__days,
.hlrow__cost { font-family: var(--serif); font-size: 16px; }
/* A cost of nothing should not compete with a real one. */
.hlrow__free { color: var(--ink-faint); }
.hlrow__wait {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hlrow__wait--you { color: var(--green); }
.hlrow__wait--them { color: rgba(var(--refused-rgb), 0.85); }

.hlplus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hlplus__mark {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
}
.hlplus__mark::before,
.hlplus__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.hlplus__mark::before { width: 13px; height: 1px; }
.hlplus__mark::after { width: 1px; height: 13px; }
.hlplus[aria-expanded='true'] .hlplus__mark { transform: rotate(135deg); }

.hlpanelcell { padding: 0; border: none; }
/* Height is measured from the content by block 9p. With no script every panel
   stays open and the page reads as nine full stage descriptions. */
.hlpanel {
  display: block;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.hlpanel__inner {
  display: grid;
  grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  padding: 4px 9px 24px 62px;
}
.hlpanel__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.hlpanel__text {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
/* The tips are the page's value and they are specific enough to be checked. */
.hltip {
  display: block;
  margin-top: 16px;
  padding: 11px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.hltip__tag {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hltip__text {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
}
.hlbring { margin-top: 10px; }
.hlbring li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.hlbring li:last-child { border-bottom: none; }
.hlrow__loss {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--refused);
}

/* ---- The folder + the cost ------------------------------------------------- */

.hlpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.hlpair--rates { grid-template-columns: minmax(0, 1fr) 380px; }
.hlfolder,
.hlcost,
.hlrates,
.hlcta { padding: 26px 28px 28px; }
.hlfolder,
.hlcost,
.hlrates {
  border: 1px solid var(--line);
  background: var(--panel);
}
.hlfolder .eyebrow__line,
.hlcost .eyebrow__line { flex: 1; width: auto; background: var(--line-faint); }

.hldoc { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; }
.hldoc__caption {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}
.hldoc__note {
  margin-left: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
}
.hldoc__label,
.hldoc__by {
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  color: var(--ink-body);
}
.hldoc tbody tr:last-child .hldoc__label,
.hldoc tbody tr:last-child .hldoc__by { border-bottom: none; }
.hldoc__by {
  width: 84px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Four green ticks against seven dashes is the argument, not decoration. */
.hldoc__by--ours { color: var(--green); }
.hldoc__by--you { color: var(--ink-muted); }
.hldoc__mark { margin-right: 8px; }

.hlmarket { min-width: 0; margin: 20px 0 0; padding: 0; border: none; }
.hlmarket__list { display: flex; border: 1px solid var(--line-input); }
.hlmarket__label {
  display: block;
  padding: 11px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.hlmarket__list li:last-child .hlmarket__label { border-right: none; }
.hlmarket__label:hover { color: var(--accent); }
.hlmarket__input:checked + .hlmarket__label { background: var(--accent); color: var(--on-accent); }
.hlmarket__input:focus-visible + .hlmarket__label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The switch is the radio group itself, so the table swaps with no script. */
.hlcost:has(#market-eu:checked) [data-hl-market='us'],
.hlcost:has(#market-us:checked) [data-hl-market='eu'] { display: none; }

.hlcost__ref {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}
.hlcosttable { margin-top: 8px; table-layout: fixed; }
.hlcosttable thead th:nth-child(2) { width: 92px; text-align: right; }
.hlcosttable thead th:nth-child(3) { width: 110px; text-align: right; }
.hlcost__item,
.hlcost__pct,
.hlcost__amount {
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: baseline;
}
.hlcosttable tbody tr:last-child .hlcost__item,
.hlcosttable tbody tr:last-child .hlcost__pct,
.hlcosttable tbody tr:last-child .hlcost__amount { border-bottom: none; }
.hlcost__item {
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.hlcost__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}
.hlcost__pct,
.hlcost__amount { text-align: right; }
.hlcost__pct { font-size: 13px; color: var(--ink-muted); }
.hlcost__amount { font-family: var(--serif); font-size: 16px; }
.hlcosttable tfoot .hlcost__item,
.hlcosttable tfoot .hlcost__pct,
.hlcosttable tfoot .hlcost__amount {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.hlcost__pct--total { color: var(--accent); }
.hlcost__amount--total { font-size: 20px; color: var(--accent); }
.hlcost__foot {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---- Where it breaks ------------------------------------------------------- */

.hlbreak {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  padding: 28px 30px 30px;
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
}
.hlbreak .eyebrow__line { flex: 1; width: auto; background: var(--refused-line); }
.hlbreak__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.08;
}
.hlbreak__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.hlbreak__figure {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--refused-line);
}
.hlbreak__value {
  display: block;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--refused);
}
.hlbreak__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hlfail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--refused-line);
}
.hlfail:first-child { padding-top: 0; }
.hlfail:last-child { border-bottom: none; }
.hlfail__num {
  flex: 0 0 26px;
  padding-top: 3px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--refused);
}
.hlfail__body { flex: 1; min-width: 0; }
.hlfail__title { display: block; font-size: 14px; }
.hlfail__text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}
/* Every row carries a fix — that is what separates this from a disclaimer. */
.hlfail__fix {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--accent);
}
.hlfail__share {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--refused);
}

/* ---- Rates + pre-approval -------------------------------------------------- */

.hlrates { display: flex; flex-direction: column; }
.hlrates__link { white-space: nowrap; }
.hlratetable { margin-top: 18px; table-layout: fixed; }
.hlratetable thead th:not(:first-child) { text-align: right; }
.hlrate__product,
.hlrate {
  padding: 12px 0 12px 12px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: baseline;
}
.hlratetable tbody tr:last-child .hlrate__product,
.hlratetable tbody tr:last-child .hlrate { border-bottom: none; }
.hlrate__product {
  padding-left: 0;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.hlrate__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}
.hlrate { text-align: right; }
.hlrate__value { display: block; font-family: var(--serif); font-size: 18px; }
.hlrate__delta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
/* A falling rate is good news, whatever sign it carries. */
.hlrate__delta--down { color: var(--green); }
.hlrate__delta--up { color: rgba(var(--refused-rgb), 0.85); }
.hlrate__delta--flat { color: var(--ink-faint); }
.hlrates__foot,
.hlrates__example {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-faint);
}
/* Required alongside a quoted rate in all four markets — not a footnote to
   trim when the panel gets tight. */
.hlrates__example {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
}

.hlcta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.hlcta__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hlcta__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}
.hlcta__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.hlform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}
.hlform__send { margin: 0; }
.hlform__send .btn--block { margin-top: 6px; }
/* All three are commitments, not copy. */
.hlpromises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}
.hlpromises li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-muted);
}
.hlpromises .dot { margin-top: 6px; flex: 0 0 5px; }

/* ---- Tablet ---------------------------------------------------------------- */

@media (max-width: 1179px) {
  .hlrun { padding: 22px 20px 20px; }
  /* Nine nodes stay in a row; the duration label is the first thing to go. */
  .hlnode__days { display: none; }
  .hlnode__name { font-size: 14px; }
  .hlnode { padding-right: 8px; }

  /* Cost leaves the row — six of the nine stages are free anyway. */
  .hltable { min-width: 620px; }
  .hltable thead th:first-child { width: 180px; }
  .hltable thead th:nth-child(4),
  .hlrow__cost { display: none; }
  .hltable thead th,
  .hlrow__stage {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  .hlpanel__inner { gap: 22px; padding-left: 40px; }

  .hlpair,
  .hlpair--rates { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, so there is nothing to reach down to. */
  .hlrates__example,
  .hlpromises { margin-top: 18px; }

  .hlbreak { grid-template-columns: minmax(0, 1fr); }
  .hlhead__line { max-width: none; }
}

/* ---- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .hlfolder,
  .hlcost,
  .hlrates,
  .hlcta,
  .hlbreak { padding: 22px 20px 24px; }

  .hlhead,
  .hlrun__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hlhead__line { text-align: left; }
  .hlrun__stats { gap: 18px; }
  .hlstat { padding-right: 18px; }

  /* Nine nodes across 375px are illegible, so the run turns vertical and each
     node carries its own connector down to the next — the horizontal track's
     percentages cannot come along, the rows are different heights. */
  .hltrack__line,
  .hltrack__fill { display: none; }
  .hltrack__nodes { grid-template-columns: minmax(0, 1fr); }
  .hltrack__nodes > li { position: relative; }
  .hltrack__nodes > li::before {
    content: '';
    position: absolute;
    top: 13px;
    bottom: 0;
    left: 6px;
    width: 1px;
    background: rgba(var(--ink-rgb), 0.24);
  }
  .hltrack__nodes > li:last-child::before { content: none; }
  .hltrack__nodes > li:has(+ li .hlnode.is-reached)::before { background: var(--accent); }
  .hlnode {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 16px;
    min-height: 44px;
    padding: 0 0 20px 0;
    opacity: 1;
  }
  .hlnode__dot { grid-row: 1; align-self: center; }
  .hlnode__num { grid-column: 2; margin-top: 0; }
  .hlnode__days { display: block; grid-column: 3; grid-row: 1; margin-top: 0; }
  .hlnode__name { grid-column: 2 / -1; font-size: 17px; }
  .hlnode__bar { grid-column: 2 / -1; margin-top: 6px; }
  .hlnode__share { grid-column: 2 / -1; margin-top: 4px; }

  .hllegend { gap: 12px; }
  .hllegend__note { margin-left: 0; }

  /* Cards, not a table: stage and name, then decides · days · cost. */
  .hlscroll { overflow-x: visible; }
  .hltable { min-width: 0; table-layout: auto; }
  .hltable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hlrow { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
  .hlrow > * {
    position: static;
    padding: 4px 0;
    border-bottom: none;
    background: transparent;
  }
  .hlrow__stage { grid-column: 1; padding-top: 14px; }
  .hlrow__who,
  .hlrow__days,
  .hlrow__cost,
  .hlrow__wait {
    display: inline-block;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-right: 10px;
    font-size: 12px;
  }
  .hlrow__days,
  .hlrow__cost { font-family: var(--sans); }
  .hlrow__toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hlplus { min-height: 44px; }
  .hlgroup { display: block; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .hlgroup:last-child { border-bottom: none; }
  .hlgroup.is-open { background: rgba(var(--accent-rgb), 0.07); }
  .hlrow.is-open > * { background: transparent; }
  .hlpanelrow,
  .hlpanelcell { display: block; }
  .hlpanel__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 0 20px; }

  .hlmarket__list { width: 100%; }
  .hlmarket__list li { flex: 1; }
  .hlmarket__label { min-height: 44px; display: flex; align-items: center; justify-content: center; }

  .hlfail { flex-wrap: wrap; }
  .hlfail__share { margin-left: auto; }

  .hlform__send {
    position: sticky;
    bottom: 0;
    margin: 0 -20px -24px;
    padding: 12px 20px;
    border-top: 1px solid var(--accent-line, var(--line));
    background: var(--panel-solid);
  }
  .hlform__send .btn--block { margin-top: 0; min-height: 44px; }
}

/* ---- Touch ----------------------------------------------------------------- */

@media (hover: none) {
  /* No pointer: every node reads at full strength, and a tap opens its stage
     in the table below rather than revealing anything on the node itself. */
  .hltrack .hlnode { opacity: 1; }
  .hlnode { min-height: 44px; }
  .hlplus { min-height: 44px; }
  .hlmarket__label { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   56. Contacts — a register of offices and desks
   -----------------------------------------------------------------------------
   Not a form and a map: the argument is that a message reaches a named person
   inside a stated time. Every office names whoever answers the phone, every
   desk names who reads it and how fast, and one panel states what we decline.

   The refusal colour appears in exactly one place — the `what we will not do`
   panel. A closed office is `ink-faint`: being shut at eight in the evening is
   not a problem.
   ========================================================================== */

.ctoffices,
.ctdesks,
.ctpair,
.ctlegal { margin: clamp(30px, 4vh, 44px) var(--pad-hero) 0; }
.ctoffices { margin-top: clamp(24px, 3.4vh, 36px); }
.ctlegal { margin-bottom: 40px; }

.cthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cthead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.cthead__line {
  max-width: 400px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  text-align: right;
  color: var(--ink-body);
}
.ctpanel__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}

/* ---- Offices --------------------------------------------------------------- */

.ctoffices {
  display: grid;
  grid-template-columns: 1.05fr minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.ctoffices__list { display: flex; flex-direction: column; gap: 16px; }
.ctoffice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  font-style: normal;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.ctoffices__list.is-picked .ctoffice { opacity: 0.62; }
.ctoffices__list.is-picked .ctoffice.is-active { opacity: 1; }
.ctoffice.is-active { transform: translateY(-3px); border-color: var(--accent); }
.ctoffice__main { padding: 20px 22px 18px; }
.ctoffice__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ctoffice__num {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.ctoffice__city {
  flex: 1;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  transition: color 0.25s ease;
}
.ctoffice.is-active .ctoffice__city { color: var(--accent); }
/* Filled by block 9q from the office's own hours and time zone. Until then it
   shows the opening hours, which are true whatever the clock says. */
.ctoffice__status {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ctoffice__status.is-open { color: var(--green); }
.ctoffice__address {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.ctoffice__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 16px;
}
/* Dividers belong to the gaps, never to the edge of the grid. */
.ctdetail {
  padding: 12px 14px 12px 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.ctdetail:nth-child(2n) { padding-right: 0; border-right: none; }
.ctdetail:nth-last-child(-n + 2) { padding-bottom: 0; border-bottom: none; }
.ctdetail dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ctdetail dd {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.ctoffice__link { border-bottom: 1px solid transparent; }
.ctoffice__link:hover { border-bottom-color: currentcolor; }
.ctoffice__link--accent { color: var(--accent); }
.ctoffice__sat {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}

.ctoffice__side {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-left: 1px solid var(--line-faint);
}
.ctoffice__sidelabel {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ctoffice__who { margin-top: auto; }
/* Initials, not a photo frame — the drop-slot component cannot render at 34px. */
.ctoffice__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  font-family: var(--serif);
  font-size: 13px;
  color: var(--accent);
  object-fit: cover;
}
.ctoffice__name { display: block; margin-top: 10px; font-size: 14px; }
.ctoffice__role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-body);
}
.ctoffice__langs {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---- Map + clocks ---------------------------------------------------------- */

.ctmapwrap { display: flex; flex-direction: column; }
/* `z-index: 0` makes the frame its own stacking context: Leaflet lays its panes
   out between 400 and 1000 and would otherwise cover the modal and the header. */
.ctmap {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 380px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.04);
}
.ctmap__canvas { position: absolute; inset: 0; }
/* Read without scripting, and the fallback if Leaflet is missing. Every address
   is on the page as text anyway, so the map itself carries no information. */
.ctmap__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}

.ctclocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ctclock {
  padding: 14px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  transition: background 0.25s ease;
}
.ctclock:last-child { border-right: none; }
.ctclock.is-active { background: rgba(var(--accent-rgb), 0.08); }
.ctclock__city {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}
.ctclock.is-active .ctclock__city { color: var(--accent); }
.ctclock__time {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}
.ctclock__status {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}
.ctclock__status.is-open { color: var(--green); }

/* ---- The desks ------------------------------------------------------------- */

.ctscroll { overflow-x: auto; }
.cttable {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.cttable thead th {
  padding: 0 9px 10px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
}
.cttable thead th:first-child { width: 220px; }
.cttable thead th:nth-child(3) { width: 200px; }
.cttable thead th:last-child { width: 130px; }
.ctdesk > * {
  padding: 15px 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  vertical-align: top;
  transition: background 0.2s ease;
}
.cttable tbody tr:last-child > * { border-bottom: none; }
.ctdesk:hover > * { background: rgba(var(--accent-rgb), 0.06); }
.ctdesk__name { text-align: left; }
.ctdesk__num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.ctdesk__link {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
}
.ctdesk:hover .ctdesk__link { color: var(--accent); }
.ctdesk__what {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}
.ctdesk__who {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.ctdesk__email { font-size: 13px; color: var(--accent); }
.ctdesk__sla { font-family: var(--serif); font-size: 17px; }
.ctdesk__note {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}

/* ---- Form + declines ------------------------------------------------------- */

.ctpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.ctform,
.ctdeclines { padding: 26px 28px 28px; }
.ctform {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ctform .eyebrow__line { flex: 1; width: auto; background: var(--line-faint); }
.ctform__lead {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.ctform__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
  margin-top: 22px;
}
.ctform__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
/* The message grows so the panel finishes level with the declines beside it. */
.ctform__message { flex: 1; }
.ctform__area {
  flex: 1;
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  line-height: 1.6;
  resize: vertical;
}
/* The form's entire value: where the message lands, and when, before it is
   sent. Both figures are read off the selected option, never a second copy. */
.ctroute {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line-faint);
  background: rgba(var(--ink-rgb), 0.03);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}
.ctroute__to { color: var(--accent); }
.ctform__foot { display: flex; flex-direction: column; gap: 18px; }
.ctform__send { margin: 0; }
.ctform__send .btn--block { margin-top: 0; }

.ctdeclines {
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
}
.ctdeclines .eyebrow__line { flex: 1; width: auto; background: var(--refused-line); }
.ctdeclines__lead {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.ctdeclines__list { margin-top: 18px; }
.ctdecline {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--refused-line);
}
.ctdecline:last-child { border-bottom: none; }
.ctdecline__mark {
  display: flex;
  flex: 0 0 19px;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 1px solid var(--refused-line);
  border-radius: 50%;
  font-size: 12px;
  color: var(--refused);
}
.ctdecline__body { flex: 1; min-width: 0; }
.ctdecline__title { display: block; font-size: 14px; }
.ctdecline__text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}
.ctdeclines__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--refused-line);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---- Company particulars --------------------------------------------------- */

.ctlegal {
  border: 1px solid var(--line);
  background: var(--panel);
}
.ctlegal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-faint);
}
.ctlegal__heading {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.ctlegal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ctlegal__col {
  padding: 18px 24px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.ctlegal__col:last-child { border-right: none; }
.ctlegal__title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ctlegal__rows { margin-top: 10px; }
.ctfact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.ctfact:last-child { border-bottom: none; }
.ctfact dt { font-size: 12px; font-weight: 300; color: var(--ink-muted); }
.ctfact dd { margin: 0; font-size: 13px; text-align: right; }
.ctlegal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 15px 24px 17px;
  border-top: 1px solid var(--line-faint);
}
.ctlegal__note {
  max-width: 700px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}
.ctlegal__dpo { display: flex; align-items: center; gap: 12px; }
.ctlegal__dpo-name {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ctlegal__dpo-mail { font-size: 13px; color: var(--accent); }

/* ---- Tablet ---------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Offices first, then the map: the addresses are the content, the map is not. */
  .ctoffices { grid-template-columns: minmax(0, 1fr); }
  .ctmap { min-height: 320px; }

  /* `Who reads it` folds into the description line. */
  .cttable { min-width: 640px; }
  .cttable thead th:first-child { width: 180px; }
  .cttable thead th:nth-child(3) { width: 150px; }
  .cttable thead th:last-child { width: 110px; }
  .cttable thead th,
  .ctdesk__name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
  }

  .ctpair { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, so there is nothing left to stretch into. */
  .ctform__message { flex: 0 0 auto; }
  .ctform__area { flex: 0 0 auto; }

  .ctlegal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctlegal__col:nth-child(2n) { border-right: none; }
  .ctlegal__col:nth-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .cthead__line { max-width: none; }
}

/* ---- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .ctform,
  .ctdeclines { padding: 22px 20px 24px; }

  .cthead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cthead__line { text-align: left; }

  /* The side panel moves under the details rather than squeezing beside them. */
  .ctoffice { grid-template-columns: minmax(0, 1fr); }
  .ctoffice__main { padding: 18px 18px 16px; }
  .ctoffice__side {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px 16px;
    border-left: none;
    border-top: 1px solid var(--line-faint);
  }
  .ctoffice__sidelabel { flex: 0 0 100%; }
  .ctoffice__who { display: flex; align-items: center; gap: 12px; margin-top: 0; }
  .ctoffice__name { margin-top: 0; }
  .ctoffice__langs { margin-top: 0; flex: 0 0 100%; }
  /* Tap to call and tap to mail. */
  .ctoffice__link { display: inline-block; min-height: 44px; padding-top: 12px; }

  .ctclocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctclock:nth-child(2n) { border-right: none; }
  .ctclock:nth-child(-n + 2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  /* Cards, not a table: the whole card is the mailto. */
  .ctscroll { overflow-x: visible; }
  .cttable { min-width: 0; table-layout: auto; }
  .cttable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ctdesk { display: block; padding: 14px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .cttable tbody tr:last-child { border-bottom: none; }
  .ctdesk > * {
    position: static;
    display: block;
    padding: 0;
    border-bottom: none;
    background: transparent;
  }
  .ctdesk__link { min-height: 44px; }
  .ctdesk__what { margin-top: 6px; }
  .ctdesk__email,
  .ctdesk__sla { display: inline-block; margin-top: 8px; }
  .ctdesk__sla { margin-left: 14px; font-size: 15px; }
  .ctdesk__note { display: inline; margin-left: 6px; }

  .ctform__pair { grid-template-columns: minmax(0, 1fr); }
  /* The line and the button stick as one block: a button explaining itself
     from a line that has scrolled off is worse than no line. */
  .ctform__foot {
    position: sticky;
    bottom: 0;
    gap: 10px;
    margin: 0 -20px -24px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel-solid);
  }
  .ctroute { padding: 8px 10px; font-size: 12px; }
  .ctform__send .btn--block { min-height: 44px; }

  .ctlegal__grid { grid-template-columns: minmax(0, 1fr); }
  .ctlegal__col { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .ctlegal__col:last-child { border-bottom: none; }
  .ctlegal__head,
  .ctlegal__foot { padding: 14px 18px 16px; }
}

/* ---- Touch ----------------------------------------------------------------- */

@media (hover: none) {
  /* No pointer, so no office is dimmed and every card reads at full strength. */
  .ctoffices__list.is-picked .ctoffice { opacity: 1; }
  .ctoffice.is-active { transform: none; }
  .ctdesk__link { min-height: 44px; }
  .ctoffice__link { display: inline-block; min-height: 44px; padding-top: 12px; }
}

/* ==========================================================================
   57. Journal — the register, read aloud
   -----------------------------------------------------------------------------
   Not a content-marketing blog: quarterly reports with their raw figures,
   regulation kept current, and `From the files` — the write-ups of properties
   we refused, which is the section that makes the verification claim on every
   other page checkable.

   No refusal colour anywhere on this page, unusually for the site. `From the
   files` is about refusals but the tone is documentary, and the negative
   percentages in the chart are findings rather than warnings.
   ========================================================================== */

.jrissue,
.jrrail,
.jrsection,
.jrpulls,
.jrpair { margin: clamp(30px, 4vh, 44px) var(--pad-hero) 0; }
.jrissue { margin-top: clamp(24px, 3.4vh, 36px); }
.jrpair { margin-bottom: 40px; }

.jrpanel__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}

/* ---- Current issue --------------------------------------------------------- */

/* One sheet divided by a hairline, not two cards — hence no gap. */
.jrissue {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--panel);
}
.jrreport { padding: 26px 28px 24px; }
.jrreport__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 400;
  line-height: 1.04;
}
.jrreport__stand {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}
.jrfigs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-faint);
}
.jrfig {
  padding-right: 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jrfig:last-child { padding-right: 0; border-right: none; }
.jrfig dt {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.jrfig dd {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
}
.jrfig--accent dd { color: var(--accent); }
.jrreport__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.jrreport__actions .btn { padding: 13px 24px; letter-spacing: 0.16em; }
.jrreport__meta {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.jrchart {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 24px 20px;
  border-left: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), 0.5);
  /* The 44px rule grid the bars are read against. */
  background-image: repeating-linear-gradient(
    to bottom, rgba(var(--ink-rgb), 0.05) 0 1px, transparent 1px 44px);
}
.jrchart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.jrchart__label { color: var(--accent); }
.jrchart__when { color: var(--ink-faint); }

.jrbars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  flex: 1;
  margin-top: 22px;
}
.jrbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.jrbar__pct {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-muted);
}
.jrbar.is-lit .jrbar__pct { color: var(--accent); }
.jrbar__stem {
  display: block;
  width: 100%;
  background: rgba(var(--ink-rgb), 0.24);
}
.jrbar.is-lit .jrbar__stem { background: var(--accent); }
/* Heights are the values on a shared scale (v × 1.7 + 14), emitted as classes
   because an inline style attribute is a rejection factor and the chart has to
   draw itself with no script. */
.jrbar--14 { height: 38px; }
.jrbar--19 { height: 46px; }
.jrbar--28 { height: 62px; }
.jrbar--41 { height: 84px; }
.jrbar--58 { height: 113px; }
.jrbar--80 { height: 150px; }
.jrbar--100 { height: 184px; }
.jrbar__band {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-faint);
}
.jrbar.is-lit .jrbar__band { color: var(--ink-muted); }
/* The caption states the finding, so it is the chart's description. */
.jrchart__caption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---- Section rail ---------------------------------------------------------- */

.jrrail { min-width: 0; padding: 0; border: none; }
.jrrail__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.jrrail__list li { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.jrrail__list li:last-child { border-right: none; }
.jrtile {
  display: block;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.jrtile:hover { background: rgba(var(--accent-rgb), 0.04); }
.jrtile__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.jrtile__count {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-faint);
}
.jrtile__note {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
}
.jrtile__input:checked + .jrtile { background: rgba(var(--accent-rgb), 0.08); }
.jrtile__input:checked + .jrtile .jrtile__label,
.jrtile__input:checked + .jrtile .jrtile__count { color: var(--accent); }
.jrtile__input:checked + .jrtile .jrtile__note { color: var(--ink-body); }
.jrtile__input:focus-visible + .jrtile { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The rail narrows the grid on its own, so the page filters with no script.
   `:has()` has to start from an ancestor of BOTH the radio and the grid — the
   rail is a sibling of the section, not inside it, so scoping this to
   `.jrsection` matched nothing at all (§10: the same mistake as `~` across
   non-siblings, and just as silent). */
main:has(#section-market:checked) [data-jr-post]:not([data-jr-post='market']),
main:has(#section-regulation:checked) [data-jr-post]:not([data-jr-post='regulation']),
main:has(#section-financing:checked) [data-jr-post]:not([data-jr-post='financing']),
main:has(#section-renovation:checked) [data-jr-post]:not([data-jr-post='renovation']),
main:has(#section-files:checked) [data-jr-post]:not([data-jr-post='files']) { display: none; }

/* ---- The grid -------------------------------------------------------------- */

.jrhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.jrhead[hidden] { display: none; }
.jrhead__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.jrhead__blurb {
  max-width: 420px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  text-align: right;
  color: var(--ink-body);
}

.jrgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.jrcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}
.jrcard:hover { color: inherit; }
/* Rests with every card lit — nothing here is pre-selected. */
.jrgrid.is-picked .jrcard { opacity: 0.62; }
.jrgrid.is-picked .jrcard.is-active { opacity: 1; }
.jrcard.is-active { transform: translateY(-4px); border-color: var(--accent); }
.jrcard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.jrcard__plate { color: var(--ink-faint); }
.jrcard__tags { display: flex; align-items: center; gap: 10px; }
/* Revised in place when the law moves; the accessible name carries the date. */
.jrcard__updated {
  padding: 3px 8px;
  border: 1px solid rgba(var(--green-rgb), 0.5);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--green);
}
.jrcard__section { color: var(--accent); }
.jrcard__meta {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.jrcard__title {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.15;
}
.jrcard__excerpt {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
}
/* `margin-top: auto` is what lines the callouts up across a row. */
.jrcallout {
  display: block;
  margin-top: auto;
  padding: 11px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.jrcallout__value {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}
.jrcallout__note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
}
.jrcard__by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
/* Initials, not a photo frame: the drop-slot component cannot render at 30px. */
.jrcard__initials {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--accent);
  object-fit: cover;
}
.jrcard__who { flex: 1; min-width: 0; }
.jrcard__author { display: block; font-size: 13px; }
.jrcard__role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.jrcard__go {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}
.jrcard.is-active .jrcard__go { color: var(--accent); }

.jrpager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.jrpager__note {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jrpager__controls { display: flex; align-items: center; gap: 10px; }
.jrpager__numbers { display: flex; gap: 8px; }
.jrpager__step,
.jrpager__num {
  min-width: 38px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-input);
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.jrpager__step:hover:not([disabled]),
.jrpager__num:hover { border-color: var(--accent); color: var(--accent); }
.jrpager__num.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
/* Inert at the ends rather than merely dimmed. */
.jrpager__step[disabled] { color: var(--ink-faint); cursor: default; }

/* ---- Pulled figures -------------------------------------------------------- */

.jrpulls__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.jrpulls__list li { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.jrpulls__list li:last-child { border-right: none; }
.jrpull {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px 16px;
  transition: background 0.25s ease;
}
.jrpull:hover { background: rgba(var(--accent-rgb), 0.06); color: inherit; }
.jrpull__value { font-family: var(--serif); font-size: 26px; line-height: 1; }
.jrpull__label {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.jrpull__note {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
}
.jrpull__source {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ---- Archive + subscribe --------------------------------------------------- */

.jrpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: clamp(24px, 2.8vw, 40px);
}
.jrarchive,
.jrsub { padding: 26px 28px 28px; }
.jrarchive {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--panel);
}
.jrarchive .eyebrow__line { flex: 1; width: auto; background: var(--line-faint); }
.jrarchive__list { margin-top: 20px; }
.jryear {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.jryear:last-child { border-bottom: none; }
.jryear__year { font-family: var(--serif); font-size: 20px; }
.jryear__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jrchip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.jrchip:hover { border-color: var(--accent); color: var(--accent); }
.jrchip.is-current { border-color: var(--accent); color: var(--accent); }
.jryear__note {
  font-size: 12px;
  font-weight: 300;
  text-align: right;
  color: var(--ink-faint);
}
/* A policy, not a caption: it is what makes the archive usable as a source. */
.jrarchive__foot {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-faint);
}

.jrsub {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.jrsub__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.jrsub__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}
.jrsub__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}
.jrsub__form { margin-top: 20px; }
.jrsub__send { margin: 0; }
.jrsub__send .btn--block { margin-top: 16px; }
.jrpromises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.jrpromises li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-muted);
}
.jrpromises .dot { margin-top: 6px; flex: 0 0 5px; }
.jrsub__count {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jrsub__readers { font-family: var(--serif); font-size: 18px; color: var(--accent); }

/* ---- Tablet ---------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* Report above, chart below — the chart keeps its own hairline as a top rule. */
  .jrissue { grid-template-columns: minmax(0, 1fr); }
  .jrchart { border-left: none; border-top: 1px solid var(--line); min-height: 280px; }

  .jrrail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jrrail__list li:nth-child(3n) { border-right: none; }
  .jrrail__list li:nth-child(-n + 3) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .jrgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jrhead__blurb { max-width: none; }

  .jrpulls__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jrpulls__list li:nth-child(3n) { border-right: none; }
  .jrpulls__list li:nth-child(-n + 3) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .jrpair { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, so there is nothing left to reach down to. */
  .jrarchive__foot,
  .jrpromises { margin-top: 20px; }
}

/* ---- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .jrreport,
  .jrchart,
  .jrarchive,
  .jrsub { padding: 22px 20px 24px; }

  .jrfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .jrfig:nth-child(2n) { padding-right: 0; border-right: none; }
  .jrreport__actions .btn { width: 100%; min-height: 44px; }
  /* The page count joins the reveal line rather than sitting under two buttons. */
  .jrreport__meta { order: -1; width: 100%; }

  /* Seven bands do not fit at 375px, so the chart scrolls rather than shrinks
     its labels below the legible minimum. */
  .jrchart { overflow-x: auto; }
  .jrbars { min-width: 460px; }

  /* A scroll strip: label and count only, the notes do not survive 150px. */
  .jrrail__list {
    display: flex;
    overflow-x: auto;
    border-top: none;
  }
  .jrrail__list li { flex: 0 0 150px; border-bottom: none; }
  .jrrail__list li:nth-child(3n) { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
  .jrrail__list li:last-child { border-right: none; }
  .jrtile { min-height: 44px; padding: 12px 14px; }
  .jrtile__note { display: none; }

  .jrhead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .jrhead__blurb { text-align: left; }
  .jrgrid { grid-template-columns: minmax(0, 1fr); }

  .jrpulls__list { grid-template-columns: minmax(0, 1fr); }
  .jrpulls__list li { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .jrpulls__list li:last-child { border-bottom: none; }

  .jryear { grid-template-columns: 52px minmax(0, 1fr); }
  .jryear__note { grid-column: 2; text-align: left; }

  .jrpager { flex-direction: column; align-items: flex-start; }
  .jrpager__step,
  .jrpager__num { min-height: 44px; }
  .jrsub__send .btn--block { min-height: 44px; }
}

/* ---- Touch ----------------------------------------------------------------- */

@media (hover: none) {
  /* No pointer, so every card reads at full strength. */
  .jrgrid.is-picked .jrcard { opacity: 1; }
  .jrcard.is-active { transform: none; }
  .jrtile { min-height: 44px; }
  .jrpager__step,
  .jrpager__num { min-height: 44px; }
}

/* ==========================================================================
   58. Blog single — a case file, not a blog post
   -----------------------------------------------------------------------------
   The only body-copy-first page on the site, so measure is the whole thing:
   prose caps at 68ch, figures run the full column. That alternation — narrow
   prose interrupted by full-width drawings — is the drawing-sheet rhythm. A
   build that caps everything, or nothing, loses the page.

   Body copy runs at 0.70 alpha here rather than the 0.64 used elsewhere:
   long-form needs the extra contrast.
   ========================================================================== */

.bsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  /* `start`, not `stretch` — `stretch` kills the rail's stickiness. */
  align-items: start;
  gap: clamp(28px, 3.2vw, 46px);
  margin: clamp(26px, 3.6vh, 38px) var(--pad-hero) 0;
}
.bsart { min-width: 0; }

/* Prose and headings take the measure; everything else takes the column. */
.bspara,
.bshead { }
.bspara {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: rgba(var(--ink-rgb), 0.7);
  text-wrap: pretty;
}
.bshead {
  margin-top: 34px;
  font-family: var(--serif);
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.14;
  /* Clears the offset the table of contents scrolls to. */
  scroll-margin-top: 28px;
}

/* ---- File strip ---------------------------------------------------------- */

.bsfile {
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bsfile__cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bsfile__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.bsfile__cell:last-child { border-right: none; }
.bsfile__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bsfile__value { font-size: 14px; }
.bsfile__value--accent { color: var(--accent); }

/* Larger type carries a longer line, so the standfirst takes the full column. */
.bsfile__standfirst {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.34;
}

.bsbyline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-faint);
}
.bsbyline__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
}
/* Initials, not a photo slot: the image-slot component cannot render below
   ~96px and ships its empty-state hint as clipped letter fragments. */
.bsbyline__ring {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  object-fit: cover;
}
.bsbyline__name { font-size: 14px; }
.bsbyline__desk {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.bsbyline__actions { display: flex; gap: 10px; }
.bsbyline__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.bsbyline__action:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Fig. 01 — the section diagram --------------------------------------- */

.bsfig {
  margin-top: 26px;
  border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), 0.5);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
}
.bsfig__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bsfig__title { color: var(--accent); }
.bsfig__body {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding: 30px 24px 26px;
}

/* The elevation scale. Row heights come from the storey heights plus the gap,
   emitted by the builder from one list — never hand-tuned against them. */
.bslevels {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  gap: 3px;
  width: 96px;
  /* Clears the column label that now sits under each stack. */
  padding-bottom: 31px;
}
.bslevel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* The ground line carries no storey, so its row has no height — the negative
   margin cancels the 3px gap above it and puts the label exactly on the line. */
.bslevel--base { margin-top: -3px; }
.bslevel__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.bslevel--unconsented .bslevel__label { color: var(--refused); }
.bslevel__tick { height: 1px; background: rgba(var(--ink-rgb), 0.28); }
.bslevel__tick--long { width: 18px; }
.bslevel__tick--short { width: 12px; }
.bslevel--base { height: 0; }

/* The columns share whatever the elevation scale leaves — fixed-width columns
   leave most of the panel empty and the comparison stops reading. */
.bscol {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bscol__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bscol__label--unconsented { color: var(--refused); }
.bscol__floors { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.bsfloor {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-input);
  background: rgba(var(--ink-rgb), 0.06);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Dashed, hatched and named in the refusal colour — the whole finding. */
.bsfloor--unconsented {
  border: 1px dashed var(--refused-line);
  background:
    repeating-linear-gradient(45deg, var(--refused-hatch) 0 1px, transparent 1px 5px);
  color: var(--refused);
}
/* Load-bearing: the phantom box is what makes both columns meet at the ground
   line instead of floating at different heights. Deleting it breaks the
   comparison the article is built on. */
.bsfloor--phantom { border-color: transparent; background: none; }

/* Storey heights and the elevation rows derived from them (+3px gap). */
.bsfloor--h44 { height: 44px; }
.bsfloor--h52 { height: 52px; }
.bsfloor--h58 { height: 58px; }
.bslevel--h44 { height: 44px; }
.bslevel--h52 { height: 52px; }
.bslevel--h58 { height: 58px; }

.bsfig__legend {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bskey { display: flex; align-items: center; gap: 9px; }
.bskey__swatch {
  width: 16px;
  height: 10px;
  border: 1px solid var(--line-input);
  background: rgba(var(--ink-rgb), 0.06);
}
.bskey--out { color: var(--refused); }
.bskey--out .bskey__swatch {
  border: 1px dashed var(--refused-line);
  background: repeating-linear-gradient(45deg, var(--refused-hatch) 0 1px, transparent 1px 5px);
}
.bsfig__source {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 300;
  color: var(--ink-faint);
}

/* ---- Pull-quotes and the permits table ----------------------------------- */

.bspull {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.bspull__figure {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
}
.bspull__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.7);
}

.bsdoc {
  margin-top: 30px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bsdoc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.bsdoc__meta { color: var(--ink-muted); }
.bsdoc__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Widths live on the columns, not on the first row: the header row is visually
   hidden and out of flow, so a `table-layout: fixed` table reading its widths
   from it collapses to equal thirds. */
.bsdoc__col--year { width: 88px; }
.bsdoc__col--verdict { width: 180px; }
.bsdoc__table th,
.bsdoc__table td {
  padding: 13px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-weight: 400;
  vertical-align: top;
}
.bsdoc__table tr:last-child th,
.bsdoc__table tr:last-child td { border-bottom: none; }
.bsdoc__year {
  width: 88px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.bsdoc__what { font-size: 13px; font-weight: 300; color: rgba(var(--ink-rgb), 0.7); }
.bsdoc__verdict {
  width: 180px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
}
.bsdoc__verdict--out { color: var(--refused); }

/* ---- The refusal --------------------------------------------------------- */

.bsrefusal {
  margin-top: 36px;
  padding: 26px 28px 28px;
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
  scroll-margin-top: 28px;
}
.bsrefusal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--refused);
}
.bsrefusal__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.08;
}
.bsrefusal__text {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(var(--ink-rgb), 0.7);
}
.bsrefusal__figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--refused-line);
}
.bsrefusal__fig {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 20px;
  border-right: 1px solid var(--refused-line);
}
.bsrefusal__fig:last-child { border-right: none; }
.bsrefusal__value { font-family: var(--serif); font-size: 30px; line-height: 1; }
.bsrefusal__value--out { color: var(--refused); }
.bsrefusal__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bsprov {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.bsprov__text {
  flex: 1 1 420px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

/* ---- The sticky rail ----------------------------------------------------- */

.bsrail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bstoc,
.bsprop,
.bsdocs {
  border: 1px solid var(--line);
  background: var(--panel);
}
.bstoc__head,
.bsprop__head,
.bsdocs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.bstoc__meta { color: var(--ink-faint); letter-spacing: 0.1em; }

/* The whole row is the target, and the active state comes from scroll
   position — a hover highlight marks where the cursor last rested and
   mis-reports the reader the moment they scroll. */
.bstoc__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.7);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.bstoc__list > li:last-child .bstoc__row { border-bottom: none; }
.bstoc__num { font-size: 12px; letter-spacing: 0.14em; color: var(--ink-faint); }
.bstoc__row:hover { color: var(--accent); }
.bstoc__row.is-active {
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}
.bstoc__row.is-active .bstoc__num { color: var(--accent); }

.bsprop__name {
  padding: 14px 18px 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
}
.bsprop__name span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.bsprop__rows { margin-top: 12px; }
.bsprop__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.bsprop__rows > li:last-child { border-bottom: none; }
.bsprop__label { font-size: 12px; font-weight: 300; color: var(--ink-body); }
.bsprop__value { font-family: var(--serif); font-size: 17px; }
.bsprop__value--out { color: var(--refused); }
.bsprop__value--accent { color: var(--accent); }
.bsprop__status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

.bsdocs__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.7);
  transition: color 0.2s ease;
}
.bsdocs__list > li:last-child .bsdocs__row { border-bottom: none; }
.bsdocs__row:hover { color: var(--accent); }
.bsdocs__kind {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  color: var(--ink-muted);
}
.bsdocs__kind--r { border-color: var(--refused-line); color: var(--refused); }
.bsdocs__size { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); }

.bspromo {
  padding: 18px 20px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}
.bspromo__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.bspromo__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}
.bspromo__cta { margin-top: 14px; }
.bspromo__cta .btn { display: block; width: 100%; text-align: center; }

/* ---- Next in the section ------------------------------------------------- */

.bsnext { margin: clamp(34px, 4.6vh, 50px) var(--pad-hero) 40px; }
.bsnext__head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.bsnext__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  line-height: 1.04;
}
.bsnext__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.bsnext__grid > li { display: flex; min-width: 0; }

.ncard {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.ncard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ncard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
}
.ncard__title { font-family: var(--serif); font-size: 22px; line-height: 1.14; }
.ncard__excerpt {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.ncard__figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.ncard__figure-value {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--accent);
}
.ncard__figure-note { font-size: 12px; font-weight: 300; color: var(--ink-muted); }
.ncard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 13px 18px 16px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ncard__arrow { color: var(--ink-faint); transition: color 0.3s ease; }
.ncard:hover,
.ncard:focus-visible { border-color: var(--accent); transform: translateY(-4px); }
.ncard:hover .ncard__arrow,
.ncard:focus-visible .ncard__arrow { color: var(--accent); }
.bsnext__grid.is-picked .ncard:not(:hover):not(:focus-visible) { opacity: 0.62; }

/* ---- Tablet -------------------------------------------------------------- */

@media (max-width: 1179px) {
  /* The rail drops under the article and stops sticking. */
  .bsgrid { grid-template-columns: minmax(0, 1fr); }
  .bsrail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }
  /* A long-read needs its contents more on a small screen, not less. */
  .bstoc { grid-column: 1 / -1; order: -1; }

  .bslevels { width: 72px; flex-basis: 72px; }
  .bsnext__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  .bsfile { padding: 20px 18px 22px; }
  .bsfile__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .bsfile__cell:nth-child(2n) { border-right: none; }
  .bsbyline { align-items: flex-start; flex-direction: column; gap: 14px; }

  /* Both columns stay — the comparison is the article. Never stack them. */
  .bsfig__body { gap: 14px; padding: 22px 14px 20px; }
  .bslevels { width: 58px; flex-basis: 58px; }
  /* Only the unconsented level keeps its label at this width. */
  .bslevel:not(.bslevel--unconsented) .bslevel__label { display: none; }
  .bscol { flex: 1 1 0; min-width: 0; }
  .bsfig__source { margin-left: 0; flex: 1 1 100%; }

  .bspull { flex-direction: column; gap: 10px; padding: 18px 18px; }

  /* The verdict moves under the description: two lines per row. */
  .bsdoc__table,
  .bsdoc__table tbody,
  .bsdoc__table tr { display: block; }
  .bsdoc__table th,
  .bsdoc__table td { display: block; border-bottom: none; padding: 0 18px; }
  .bsdoc__table tr {
    padding: 14px 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  }
  .bsdoc__table tr:last-child { border-bottom: none; }
  .bsdoc__year { width: auto; }
  .bsdoc__what { margin-top: 4px; }
  .bsdoc__verdict { width: auto; margin-top: 6px; }

  .bsrefusal { padding: 22px 18px 24px; }
  .bsrefusal__figs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bsrefusal__fig { padding-right: 0; border-right: none; }

  .bsprov .btn { width: 100%; text-align: center; }

  .bsrail { grid-template-columns: minmax(0, 1fr); }
  .bsnext__grid { grid-template-columns: minmax(0, 1fr); }
  /* No hover on touch: every card reads in full from the start. */
  .ncard:hover,
  .ncard:focus-visible { transform: none; }
  .bsnext__grid.is-picked .ncard:not(:hover):not(:focus-visible) { opacity: 1; }
}

/* ==========================================================================
   59. Journal replies — named, or not published
   -----------------------------------------------------------------------------
   Commenting is open to registered users only, so every reply carries a name
   and what that person is; an agent shows a licence and a register tick. An
   unattributed opinion proves nothing, which is the argument the whole site
   runs on — a generic comment thread would contradict it.

   A reply from an AVAVA desk is named and set in accent, exactly as the byline
   is: an official answer must never read as one more reader's opinion.
   ========================================================================== */

.rpwrap {
  margin-top: clamp(30px, 4vh, 42px);
  padding-top: clamp(26px, 3.4vh, 34px);
  border-top: 1px solid var(--line);
}
.rphead__title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.06;
}

.rplist { margin-top: 22px; }
/* The divider belongs to the gap between replies, never to the last one. */
.rplist > li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.rplist > li:last-child { border-bottom: none; }
.rplist > li:first-child { padding-top: 0; }

.rp__who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Initials, not a photo frame — the drop-slot component cannot render at 34px,
   and the name beside it is what carries the meaning anyway. */
.rp__initials {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  font-family: var(--serif);
  font-size: 13px;
  color: var(--accent);
  object-fit: cover;
}
.rp__name { font-size: 14px; }
.rp__role,
.rp__licence {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rp__licence {
  padding: 3px 8px;
  border: 1px solid var(--line-faint);
}
/* The same tick the folder uses for documents we hold: this person is on the
   register, and that is checkable rather than claimed. */
.rp__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--green-rgb), 0.5);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.rp__when {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.rp__text {
  margin-top: 10px;
  padding-left: 44px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(var(--ink-rgb), 0.7);
}

/* One level of replies, and only the desk that wrote the piece answers here. */
.rp__answers {
  margin-top: 16px;
  padding-left: 44px;
}
.rp--desk {
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.rp--desk .rp__text { padding-left: 44px; }
.rp__desk {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- The form -------------------------------------------------------------- */

.rpform,
.rpguest {
  margin-top: 26px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.rpform__title {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Who you are posting as, stated before you write rather than after. */
.rpform__as {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-faint);
}
.rpform__asname { font-size: 14px; }
.rpform__asrole {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rpform .cafield { margin-top: 18px; }
.rpform__area {
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  line-height: 1.6;
  resize: vertical;
}
.rpform__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.rpform__note {
  flex: 1;
  min-width: 240px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}

.rpguest__text {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}
.rpguest__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ---- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .rpform,
  .rpguest { padding: 18px 16px 20px; }
  /* The date drops under the name rather than squeezing the badges. */
  .rp__when { margin-left: 0; flex: 0 0 100%; }
  .rp__text,
  .rp--desk .rp__text { padding-left: 0; }
  .rp__answers { padding-left: 16px; }
  .rpform__foot .btn { width: 100%; min-height: 44px; }
  .rpguest__actions .btn { width: 100%; min-height: 44px; }
}

@media (hover: none) {
  .rpform__foot .btn,
  .rpguest__actions .btn { min-height: 44px; }
}

/* ==========================================================================
   60. Journal v2 — the feed, read in sequence
   -----------------------------------------------------------------------------
   The second journal layout. v1 (section 57) is a card grid for someone
   looking for a piece; this is a three-column reading layout for someone
   reading the journal in order — filters left, full entries down the middle,
   context right. A buyer ships one of the two.

   `align-items: start` on the wrapper is load bearing. Both rails are
   `position: sticky`, and the grid default `stretch` makes every item as tall
   as the tallest — at which point a sticky rail has no room left to move in
   and silently stops sticking. Same trap as the article rail in section 58.

   The first entry is larger — bigger image, bigger title. That hierarchy is
   the only thing that separates a feed from a list.

   Paragraphs run the full column width on purpose. v1 caps its measure at
   66ch; here the centre column *is* the measure.

   Trailing hairlines: every list ends without its divider. The rule is
   `--last` modifiers emitted by the builder rather than `:last-child`,
   because the script hides entries when filtering and `:last-child` would
   then draw a line under whatever happens to be hidden.
   ========================================================================== */

.b2wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 268px;
  gap: clamp(22px, 2.4vw, 36px);
  align-items: start;
  /* The top gap is the prototype's own `clamp(22px, 3vh, 32px)`. Without it
     the rule under the page-header band lies straight on top of the three
     columns and reads as a border on the rails instead of the end of the
     header — the owner caught exactly that. */
  padding: clamp(22px, 3vh, 32px) var(--pad-hero) 96px;
}

/* ---------------------------------------------------------------- rails --- */

.b2rail {
  position: sticky;
  top: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The mobile `Filters` head. Hidden on desktop, where the rail is simply the
   rail; the checkbox that drives it never has any effect up here. */
.b2rail__summary { display: none; }
.b2rail__body { display: contents; }

.b2panel {
  border: 1px solid var(--line-faint);
  background: var(--panel);
  padding: 16px 16px 18px;
}

.b2panel__head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- sections --- */

.b2rows,
.b2chips,
.b2whos,
.b2pop,
.b2years { margin: 0; padding: 0; list-style: none; }

.b2row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line-faint);
  border-left: 2px solid transparent;
  color: var(--ink-body);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.b2row--last { border-bottom: none; }

.b2row__label { flex: 1; min-width: 0; font-size: 13px; }

.b2row__count {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

.b2row:hover,
.b2row:focus-visible { color: var(--ink); }

/* The active row takes the accent rule, the tint, and carries both its label
   and its count in accent — one state said three ways, because the rule alone
   is two pixels wide. */
.b2row.is-on {
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.b2row.is-on .b2row__count { color: var(--accent); }

/* ----------------------------------------------------------------- tags --- */

.b2chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.b2chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line-faint);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.b2chip__count {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
}

.b2chip:hover { border-color: var(--line); color: var(--ink); }

/* Pressed state comes off `aria-pressed`, not a class: the attribute is the
   state the assistive layer reads, so styling anything else would let the two
   drift apart. */
.b2chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.b2chip[aria-pressed="true"] .b2chip__count { color: var(--accent); }

/* -------------------------------------------------------------- authors --- */

.b2who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
}

.b2who--last { border-bottom: none; }

/* Initials, never the image-slot component — it cannot render below ~96px and
   ships clipped letter fragments at this size. A real headshot drops into the
   same box. */
.b2who__initials,
.b2foot__initials,
.b2byline__initials,
.b2comment__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-family: var(--serif);
  color: var(--accent);
  object-fit: cover;
}

.b2who__initials { width: 30px; height: 30px; font-size: 13px;
  object-fit: cover;
}

.b2who__body { flex: 1; min-width: 0; }

.b2who__name {
  display: block;
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b2who__desk {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2who__count {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- feed --- */

.b2feed { min-width: 0; }

.b2head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.b2head__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.1;
  color: var(--ink);
}

.b2head__note {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The sort control is a real radio group: it survives with no script, and the
   label is the whole hit target rather than a span inside a button. */
.b2sort {
  display: flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-faint);
}

.b2sort__opt { display: block; }
.b2sort__opt + .b2sort__opt { border-left: 1px solid var(--line-faint); }

.b2sort__label {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.b2sort__label:hover { color: var(--ink); }

.b2sort__input:checked + .b2sort__label {
  background: var(--accent);
  color: var(--on-accent);
}

.b2sort__input:focus-visible + .b2sort__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- entry --- */

.b2entry {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.b2entry--first { padding-top: 26px; }

/* Hidden by the pager, not by `display: none` on a class the script owns
   alone — `is-off` is also what the filter uses, so there is one way for an
   entry to be off the page and one place to look for it. */
.b2entry.is-off { display: none; }

.b2entries > .b2entry:last-child { border-bottom: none; }

.b2reveal {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.b2reveal__section { color: var(--accent); }

/* The 22px hairline between the section and the date. It is in the prototype
   and it is what stops the row reading as four unrelated labels. */
.b2reveal__rule {
  width: 22px;
  height: 1px;
  background: var(--line-input);
}
.b2reveal__date { color: var(--ink-muted); }
.b2reveal__read { color: var(--ink-faint); }
.b2reveal__plate { margin-left: auto; color: var(--ink-faint); }

/* `Updated` carries its review date in the accessible name. A tag with no
   review process behind it is worse than no tag at all. */
.b2tag-upd {
  padding: 3px 8px;
  border: 1px solid rgba(var(--good-rgb), 0.5);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--good);
}

/* --------------------------------------------------------------- figure --- */

.b2fig {
  position: relative;
  margin: 20px 0 0;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.b2fig__link {
  display: block;
  height: 100%;
}

.b2fig__img {
  display: block;
  width: 100%;
  height: clamp(350px, 41vh, 450px);
  object-fit: cover;
}

/* 750px по просьбе владельца, вместо прежних clamp(425px, 50vh, 538px).
   Узкие экраны это не задевает: у них своя высота ниже по файлу. */
.b2entry--first .b2fig__img,
.b2fig--hero .b2fig__img { height: 750px; }

.b2fig__hatch {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 9px);
  background-size: 22px 22px;
  opacity: 0.12;
  pointer-events: none;
}

/* Crop marks at opposing corners — the drawing convention used on every other
   figure on the site, not a frame. */
.b2fig__crop {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.b2fig__crop--tl {
  top: 14px;
  left: 14px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.5);
  border-top: 1px solid rgba(var(--ink-rgb), 0.5);
}

.b2fig__crop--br {
  right: 14px;
  bottom: 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.5);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.5);
}

/* The caption plate is a drawing figure — `Fig. NN — what it shows` — not a
   restatement of the alt text. */
.b2fig__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 14px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------- title and body --- */

.b2entry__title {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.1vw, 33px);
  line-height: 1.14;
  font-weight: 400;
}

.b2entry--first .b2entry__title { font-size: clamp(30px, 2.5vw, 40px); }

.b2entry__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}

.b2entry__title a:hover,
.b2entry__title a:focus-visible { color: var(--accent); }

.b2entry__lead,
.b2entry__second {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.76;
  color: var(--ink-body);
}

/* Every piece leads with a number, and that number is the callout. */
.b2callout {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.b2callout__value {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}

.b2callout__note {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ----------------------------------------------------------------- foot --- */

.b2foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.b2foot__by,
.b2byline__by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.b2foot__initials { width: 34px; height: 34px; font-size: 13px;
  object-fit: cover;
}

.b2foot__author,
.b2byline__name {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.b2foot__role,
.b2byline__desk {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2foot__taglist,
.b2byline__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b2tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line-faint);
  font-size: 12px;
  color: var(--ink-muted);
}

.b2foot__go {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}

.b2foot__go:hover,
.b2foot__go:focus-visible { color: var(--accent); }

/* --------------------------------------------------- empty state, pager --- */

.b2empty {
  margin: 32px 0 0;
  padding: 22px;
  border: 1px solid var(--line-faint);
  background: var(--panel);
  font-size: 14px;
  color: var(--ink-body);
}

/* Two filters compose, so a reader can strand themselves with one click. The
   way out is a control in the empty state, not a sentence describing one. */
.b2empty__clear {
  display: inline-block;
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.b2pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.b2pager__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2pager__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.b2pager__numbers {
  display: flex;
  gap: 6px;
}

.b2pager__step,
.b2pager__num {
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-input);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.b2pager__step:hover:not(:disabled),
.b2pager__num:hover:not(.is-on) { border-color: var(--accent); color: var(--accent); }

/* Inert at the ends, and disabled rather than dimmed: a control that looks
   spent but still fires is worse than one that says it is done. */
.b2pager__step:disabled {
  color: var(--ink-faint);
  border-color: var(--line-faint);
  cursor: default;
}

.b2pager__num.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ----------------------------------------------------------- right rail --- */

.b2panel--issue {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

.b2issue__title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}

.b2issue__figs { margin: 0; }

.b2issue__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
}

.b2issue__row--last { border-bottom: none; }

.b2issue__row dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2issue__row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

.b2issue__row dd.is-accent { color: var(--accent); }

.b2issue__get { margin: 16px 0 0; }

.b2pop__item { border-bottom: 1px solid var(--line-faint); }
.b2pop__item--last { border-bottom: none; }

.b2pop__link {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  text-decoration: none;
}

.b2pop__rank {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
}

.b2pop__body { flex: 1; min-width: 0; }

.b2pop__title {
  display: block;
  font-size: 13px;
  line-height: 1.42;
  color: var(--ink);
  transition: color 0.25s ease;
}

.b2pop__link:hover .b2pop__title,
.b2pop__link:focus-visible .b2pop__title { color: var(--accent); }

.b2pop__meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2sub__text {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}

.b2sub__send { margin: 12px 0 0; }

.b2sub__count {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2sub__readers { font-family: var(--serif); font-size: 15px; color: var(--ink); }

.b2year {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
}

.b2year--last { border-bottom: none; }

.b2year__year {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

.b2year__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.b2q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.b2q:hover, .b2q:focus-visible { border-color: var(--accent); color: var(--accent); }
.b2q.is-current { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- tablet --- */

@media (max-width: 1179px) {
  /* Two columns. The right rail moves below the feed and becomes a 2×2 block
     of panels — and stops being sticky, because a panel that follows the
     content it was meant to sit beside is just a panel that will not leave. */
  .b2wrap {
    grid-template-columns: 236px minmax(0, 1fr);
    padding-bottom: 72px;
  }

  .b2rail--right {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .b2fig__img { height: 320px; }
  .b2entry--first .b2fig__img { height: 400px; }
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  .b2wrap {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 56px;
  }

  /* One column, and the left rail collapses to a `Filter` accordion at the
     top. Driven by a checkbox, so the desktop layout never depends on a
     script having run. */
  .b2rail--left {
    position: static;
    gap: 0;
    border: 1px solid var(--line-faint);
    background: var(--panel);
  }

  .b2rail__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }

  .b2rail__chev {
    width: 8px;
    height: 8px;
    border-right: 1px solid currentcolor;
    border-bottom: 1px solid currentcolor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
  }

  .b2rail__body {
    display: none;
    padding: 0 12px 12px;
  }

  .b2rail__toggle:checked ~ .b2rail__body { display: block; }
  .b2rail__toggle:checked ~ .b2rail__summary .b2rail__chev {
    transform: rotate(-135deg) translate(-3px, -3px);
  }

  .b2rail__toggle:focus-visible ~ .b2rail__summary {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .b2rail--left .b2panel {
    border: none;
    background: none;
    padding: 12px 0 0;
  }

  .b2rail--right {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2fig__img { height: 220px; }
  .b2entry--first .b2fig__img { height: 260px; }

  /* One paragraph is enough at this width; the second is the first thing that
     turns the feed into a wall. */
  .b2entry__second { display: none; }

  .b2foot { gap: 12px; }
  .b2foot__taglist { order: 3; width: 100%; }
  .b2foot__go {
    order: 4;
    width: 100%;
    margin-left: 0;
    padding: 12px 0;
    border: 1px solid var(--line-input);
    text-align: center;
  }

  .b2head { align-items: flex-start; flex-direction: column; }
  .b2pager { justify-content: center; }
}

/* Everything that opens on hover has to be reachable without one, and the
   hit targets the handoff names have to hold at 44px. */
@media (hover: none) {
  .b2row,
  .b2chip,
  .b2sort__label,
  .b2pager__step,
  .b2pager__num,
  .b2q { min-height: 44px; }

  .b2chip,
  .b2q { padding-top: 10px; padding-bottom: 10px; }
}

/* ==========================================================================
   61. Journal v2 — the piece, and the only public thread on the site
   -----------------------------------------------------------------------------
   The article half of the v2 pair. It reuses section 60 entirely for the
   frame, the rails and the figure — a reader moving from the feed to a piece
   stays in the same room, and that is the reason the pair exists. Only what
   is below is specific to the article.

   The charges table is a real table with `th scope`, and the row that
   transfers to the buyer says so in words. The refusal colour agrees with the
   sentence; it never carries the fact alone.

   The refusal panel's third figure — €22, the cost of the search — is
   deliberately NOT in the refusal colour. It is not the bad news, it is the
   rebuke, and colouring it red would file it with the damage.

   Comments nest as a child `<ol>`, not as a margin, so the shape of the
   conversation survives with styles off. The author's reply takes the accent
   ring and rule: a reader should see at a glance that the desk answered.
   ========================================================================== */

.b2art { min-width: 0; }

/* ---------------------------------------------------------------- body --- */

.b2art__body { margin-top: 22px; }

.b2art__para {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--ink-body);
}

.b2art__head {
  margin: 32px 0 0;
  font-family: var(--serif);
  font-size: clamp(23px, 1.8vw, 29px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}

.b2byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-faint);
}

.b2byline__initials { width: 38px; height: 38px; font-size: 14px;
  object-fit: cover;
}

.b2byline__acts {
  display: flex;
  gap: 9px;
  margin: 0 0 0 auto;
}

.b2byline__act {
  padding: 10px 18px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.b2byline__act:hover,
.b2byline__act:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------------------- pull quote --- */

.b2pull {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px 0 0;
  padding: 16px 0 16px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.b2pull__figure {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}

.b2pull__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}

/* -------------------------------------------------------- charges table --- */

.b2charges {
  margin: 28px 0 0;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}

.b2charges__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.b2charges__meta { color: var(--ink-faint); font-weight: 400; }

/* Column widths declared once on `<col>`, so the head and the body cannot
   disagree; `table-layout: fixed` otherwise takes them off the first row. */
.b2charges__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.b2charges__c1 { width: 27%; }
.b2charges__c3 { width: 24%; }

.b2charges__table th,
.b2charges__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.b2charges__table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2charges__table tbody th {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}

.b2charges__table tbody td { color: var(--ink-body); }

.b2charges__amount {
  font-family: var(--serif);
  font-size: 15px;
  text-align: right;
  color: var(--ink);
}

.b2charges__table tbody tr:last-child th,
.b2charges__table tbody tr:last-child td { border-bottom: none; }

/* The row the buyer inherits. Its description already says "transfers to the
   buyer" — this only agrees with it. */
.b2charges__table tbody tr.is-transfers { background: var(--refused-soft); }

.b2charges__table tbody tr.is-transfers th,
.b2charges__table tbody tr.is-transfers td,
.b2charges__table tbody tr.is-transfers .b2charges__amount { color: var(--refused); }

/* -------------------------------------------------------- refusal panel --- */

.b2ref {
  margin: 34px 0 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--refused-line);
  background: var(--refused-soft);
}

.b2ref__stand {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 25px);
  line-height: 1.2;
  color: var(--ink);
}

.b2ref__text {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.b2ref__figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0 0;
}

.b2ref__fig {
  padding: 0 16px;
  border-right: 1px solid var(--refused-line);
}

.b2ref__fig:first-child { padding-left: 0; }
.b2ref__fig--last { border-right: none; padding-right: 0; }

.b2ref__value {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
}

.b2ref__value.is-refused { color: var(--refused); }

.b2ref__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- replies --- */

.b2replies { margin: 40px 0 0; }

.b2replies__rule {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.b2thread {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* Replies indent as a nested list. 44px on the desktop, less as the column
   narrows — at phone width a 44px indent leaves no measure to read. */
.b2thread--nested {
  margin: 0;
  padding-left: 44px;
}

.b2comment { padding: 18px 0; border-bottom: 1px solid var(--line-faint); }
.b2thread > .b2comment:last-child { border-bottom: none; }
.b2thread--nested > .b2comment { border-bottom: none; padding-bottom: 0; }

.b2comment__body { margin: 0; }

.b2comment__who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.b2comment__initials { width: 34px; height: 34px; font-size: 13px; }

.b2comment__id { flex: 1; min-width: 0; }

.b2comment__name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink);
}

.b2comment__badge {
  padding: 3px 8px;
  border: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.b2comment__meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2comment__when {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.b2comment__text {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

.b2comment__acts {
  display: flex;
  gap: 18px;
  margin: 10px 0 0;
}

.b2comment__act {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

.b2comment__act:hover,
.b2comment__act:focus-visible { color: var(--accent); }

/* The desk's own answer. The ring and the rule say "the author replied" at a
   glance; the badge in the accessible name says it to everyone else. */
.b2comment.is-author > .b2comment__body {
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}

.b2comment.is-author .b2comment__initials { border-color: var(--accent); }

.b2comment.is-author .b2comment__badge {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------- reply form --- */

.b2form {
  margin: 28px 0 0;
  padding: 24px;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}

.b2form__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.b2form__title {
  margin: 9px 0 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.16;
  font-weight: 400;
  color: var(--ink);
}

.b2form__text {
  margin: 9px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}

.b2form__form { margin-top: 18px; }

.b2form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* The reply's own label is the only accented label in the form — it is the
   field the page is asking for. */
.cafield__label--accent { color: var(--accent); }

.b2form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.b2form__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.b2form__send { margin: 0; }

/* --------------------------------------------------------------- tablet --- */

@media (max-width: 1179px) {
  .b2thread--nested { padding-left: 32px; }
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  /* 44px of indent on a phone leaves nothing to read in. */
  .b2thread--nested { padding-left: 16px; }

  /* Pull quotes stack: the figure above its sentence, not beside it. */
  .b2pull { flex-direction: column; gap: 8px; }

  /* The amount moves under the description — three columns of this table do
     not hold at phone width, and shrinking the type is not an answer. */
  .b2charges__table,
  .b2charges__table tbody,
  .b2charges__table tbody tr { display: block; }

  .b2charges__table thead { display: none; }

  .b2charges__table tbody tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-faint);
  }

  .b2charges__table tbody tr:last-child { border-bottom: none; }

  .b2charges__table tbody > tr > th,
  .b2charges__table tbody > tr > td {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  .b2charges__table tbody > tr > td { margin-top: 4px; }

  .b2charges__table tbody > tr > td.b2charges__amount {
    margin-top: 8px;
    text-align: left;
  }

  .b2ref { padding: 18px; }

  .b2ref__figs { grid-template-columns: minmax(0, 1fr); }

  .b2ref__fig {
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid var(--refused-line);
  }

  .b2ref__fig:first-child { padding-top: 0; }
  .b2ref__fig--last { border-bottom: none; padding-bottom: 0; }

  .b2byline__acts { margin-left: 0; }

  .b2form { padding: 18px; }
  .b2form__pair { grid-template-columns: minmax(0, 1fr); }
  .b2form__send { width: 100%; }
  .b2form__send .btn { width: 100%; }
}

@media (hover: none) {
  .b2byline__act,
  .b2comment__act { min-height: 44px; }

  .b2comment__act { display: inline-flex; align-items: center; }
}

/* ==========================================================================
   62. Homes for sale — the category landing page
   -----------------------------------------------------------------------------
   Rebuilt against the detailed handoff. Every measurement below is the
   prototype's; where this file departs it says so and why.

   Section order is the argument, not a layout preference:
   state → search → cuts → grid → stamps → cities → questions, that is
   numbers → tool → entry → product → trust → geography → objections.

   ONE DEPARTURE, STATED
   ---------------------
   The handoff specifies 9–10px uppercase micro-labels. CLAUDE.md sets a hard
   floor of 12px because Envato treats small text as a rejection factor, and
   the owner reaffirmed that floor when the logo subtitle was the one exception
   granted. Micro-labels here are 12px carrying the handoff's tracking.

   THE `flex: 1` VOID, FOURTH TIME IN THIS PROJECT
   ------------------------------------------------
   career 594 vs 453px · home-loan-process 562 vs 396px · this page 480 vs
   395px. In an `align-items: stretch` grid row the shorter column must earn
   its height with content — a `flex: 1` spacer does not distribute the
   difference, it collects the whole deficit into one dead gap. Fixed here with
   six questions and the first answer open on load; both are required.

   Refusal red appears exactly twice: the state row and the stamps section.
   ========================================================================== */

/* ------------------------------------------------------------- frame --- */

/* The page's own wrapper, and it exists because of a real mismatch: the shared
   `.section__inner` pads with `--pad` (clamp 28 · 3.2vw · **80**) while the
   header bar pads with `--pad-hero` (clamp 28 · 3.2vw · **56**). Below about
   1750px both resolve to 3.2vw and agree; above it the content steps 24px
   further in than the menu above it. The owner sees that on a wide monitor.
   This page uses the header's own token, so the two can never disagree —
   which is also what the handoff asks for: `--pad: clamp(28px, 3.2vw, 56px)`,
   every section's left and right margin. */
.fswrap {
  position: relative;
  margin: 0 var(--pad-hero);
}

/* ---------------------------------------------------------- state row --- */

.fsstate { padding-top: clamp(20px, 2.8vh, 30px); }

.fsstate__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.fsstate__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 24px 22px;
  border-right: 1px solid var(--line-faint);
}

.fsstate__cell--last { border-right: none; }

.fsstate__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fsstate__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

/* The one figure on this page that cannot be inflated. */
.fsstate__value.is-refused { color: var(--refused); }

.fsstate__note {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
}

/* ------------------------------------------------------------- search --- */

.fssearch { padding-top: clamp(20px, 2.6vh, 28px); }

.fsform {
  border: 1px solid var(--line);
  background: var(--panel);
}

.fstabrow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-faint);
}

.fstabs {
  display: flex;
  margin: 0;
  padding: 0;
  border: none;
}

.fstab { display: block; }

/* Active is a filled accent tab, not an underline — the prototype fills it. */
.fstab__label {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.fstab__label:hover { color: var(--ink); }

.fstab__input:checked + .fstab__label {
  background: var(--accent);
  color: var(--on-accent);
}

.fstab__input:focus-visible + .fstab__label {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Pushed right by the tab row, as in the prototype's `flex: 1` spacer. */
.fsform__note {
  margin: 0 0 0 auto;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fsfields {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.9fr 1.05fr auto;
  gap: 20px;
  align-items: end;
  padding: 22px 26px 24px;
}

.fsfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.fsfield__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fsfield__input {
  width: 100%;
  padding: 7px 0;
  border: none;
  border-bottom: 1px solid var(--line-input);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.fsfield__input:focus-visible { border-bottom-color: var(--accent); }

.fsfield--refine { position: relative; }

.fsrefine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 7px 0;
  border: none;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.fsrefine:hover { color: var(--accent); border-bottom-color: var(--accent); }

.fsrefine__chev {
  flex: 0 0 13px;
  transition: transform 0.25s ease;
}

/* The chevron turns over while the panel is open — the only thing on the
   control that says the panel belongs to it. */
.fsrefine[aria-expanded="true"] .fsrefine__chev { transform: rotate(180deg); }

.fsform__go {
  padding: 15px 34px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.25s ease;
}

.fsform__go:hover { background: var(--ink); }

/* -------------------------------------------------------- filter panel --- */

/* Anchored to the trigger, never a modal: a full-screen sheet hides the
   results the filters are about. */
.fsfilters {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 470px;
  max-height: 74vh;
  border: 1px solid var(--line);
  border-top: 1px solid var(--accent);
  background: var(--panel-solid);
  box-shadow: 0 30px 60px -26px rgba(var(--shadow-rgb), 0.8);
  text-align: left;
}

.fsfilters[hidden] { display: none; }

.fsfilters__head,
.fsfilters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  background: var(--panel-inner);
}

.fsfilters__head {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-faint);
}

.fsfilters__foot {
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line-faint);
}

.fsfilters__title {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.fsfilters__applied {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fsfilters__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 4px;
}

.fsfilters__reset {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

.fsfilters__reset:hover,
.fsfilters__reset:focus-visible { color: var(--accent); }

.fsfilters__show {
  padding: 13px 28px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.25s ease;
}

.fsfilters__show:hover { background: var(--ink); }
.fsfilters__show--block { width: 100%; }

.fsgroup {
  margin: 0;
  padding: 16px 22px 6px;
  border: none;
  border-top: 1px solid var(--line-faint);
}

.fsgroup--price { padding: 18px 22px 6px; border-top: none; }

.fsgroup__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin-bottom: 11px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fsgroup__note {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------- histogram --- */

/* Decorative — the scale line below carries the values. Heights are the
   handoff's `value * 0.3 + 4` px in a 36px strip. */
.fshist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-top: 12px;
}

.fshist__bar {
  flex: 1;
  background: var(--line-faint);
}

.fshist__bar.is-on { background: var(--accent); }

.fshist__bar--h6 { height: 6px; }
.fshist__bar--h10 { height: 7px; }
.fshist__bar--h11 { height: 7px; }
.fshist__bar--h18 { height: 9px; }
.fshist__bar--h19 { height: 10px; }
.fshist__bar--h27 { height: 12px; }
.fshist__bar--h31 { height: 13px; }
.fshist__bar--h38 { height: 15px; }
.fshist__bar--h44 { height: 17px; }
.fshist__bar--h52 { height: 20px; }
.fshist__bar--h58 { height: 21px; }
.fshist__bar--h66 { height: 24px; }
.fshist__bar--h72 { height: 26px; }
.fshist__bar--h80 { height: 28px; }
.fshist__bar--h86 { height: 30px; }
.fshist__bar--h92 { height: 32px; }
.fshist__bar--h96 { height: 33px; }
.fshist__bar--h100 { height: 34px; }

.fshist__scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fshist__scale .is-accent { color: var(--accent); }

/* --------------------------------------------------- chips and checks --- */

.fschips,
.fschecks {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fschips { flex-wrap: wrap; gap: 7px; }
.fschecks { flex-direction: column; }

.fschip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--line-input);
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.fschip:hover { border-color: var(--accent); color: var(--ink); }

/* The selection key is `group:label`, so identical labels in different groups
   never collide. */
.fschip__input:checked + .fschip {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.fschip__input:focus-visible + .fschip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fscheck {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-faint);
}

.fscheck--last { border-bottom: none; }

.fscheck__input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.fscheck__label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
  cursor: pointer;
}

.fscheck__count {
  font-size: 12px;
  color: var(--ink-faint);
}

.fsrange__pair {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fsrange__input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-input);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}

.fsrange__input--wide { width: 100%; }

.fsrange__input:focus-visible { outline: none; border-color: var(--accent); }

.fsrange__dash { color: var(--ink-faint); }

/* --------------------------------------------------------------- cuts --- */

.fscuts { padding-top: clamp(22px, 3vh, 32px); }

.fscuts__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fscut {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 128px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
}

.fscut__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fscut__num,
.fscut__open {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

.fscut__body { display: block; }

.fscut__count {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
  transition: color 0.25s ease;
}

.fscut__label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink);
}

.fscut__note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
}

.fscut:hover,
.fscut:focus-visible { transform: translateY(-4px); border-color: var(--accent); }
.fscut:hover .fscut__count,
.fscut:hover .fscut__open,
.fscut:focus-visible .fscut__count,
.fscut:focus-visible .fscut__open { color: var(--accent); }

/* Hover never dims the one under the cursor; the siblings step back, and the
   row at rest has every card at full strength. */
.fscuts__list:hover .fscut:not(:hover) { opacity: 0.62; }

/* --------------------------------------------------------------- grid --- */

.fsgrid { padding-top: clamp(30px, 4.2vh, 44px); }

.fsgrid__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.fsgrid__lead { min-width: 0; }

.fsgrid__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}

.fsgrid__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fsgrid__sort { margin: 0; }

.fsgrid__select {
  padding: 10px 14px;
  border: 1px solid var(--line-input);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.fsviews {
  display: flex;
  border: 1px solid var(--line-input);
}

.fsview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink-muted);
  transition: background 0.25s ease, color 0.25s ease;
}

.fsview + .fsview { border-left: 1px solid var(--line-input); }

.fsview:hover,
.fsview:focus-visible { color: var(--accent); }

.fsview.is-on { background: var(--accent); color: var(--on-accent); }

.fsview__icon { display: block; }

.fscards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: clamp(24px, 3.2vh, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.fscard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
}

.fscard:hover,
.fscard:focus-visible { transform: translateY(-4px); border-color: var(--accent); }

.fscard__reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fscard__sheet { color: var(--ink-muted); }

/* Not decoration: it ties the card to the four checks explained below. */
.fscard__stamps { color: var(--accent); }

.fscard__media {
  position: relative;
  display: block;
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.fscard__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Bottom-right corner, four patterns cycling across the twelve cards. */
.fscard__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fscard:hover .fscard__hatch { opacity: 0.5; }

.fscard__hatch--1 {
  background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px);
}

.fscard__hatch--2 {
  background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 8px);
}

.fscard__hatch--3 {
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px);
  background-size: 14px 14px;
}

.fscard__hatch--4 {
  background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 6px);
}

.fscard__plate {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.fscard__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 4px;
}

.fscard__kind {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.fscard__title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.14;
  color: var(--ink);
}

.fscard__loc {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}

/* The fact row sits at the foot of the card whatever the title wraps to. */
.fscard__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  border-top: 1px solid var(--line-faint);
}

.fscard__fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px;
  border-right: 1px solid var(--line-faint);
}

.fscard__fact--last { border-right: none; }

.fscard__fact-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fscard__fact-value {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

.fscard__money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--line-faint);
}

.fscard__price {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
}

.fscard__per {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fspager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 42px);
}

.fspager__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fspager__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.fspager__numbers { display: flex; gap: 6px; }

.fspager__step {
  padding: 11px 18px;
  border: 1px solid var(--line-input);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.fspager__step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* Inert at the ends, and disabled rather than dimmed: a control that looks
   spent but still fires is worse than one that says it is done. */
.fspager__step:disabled { color: var(--ink-faint); cursor: default; }

.fspager__num {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-input);
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.fspager__num:hover:not(.is-on) { border-color: var(--accent); color: var(--accent); }

.fspager__num.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* -------------------------------------------------------------- stamps --- */

.fsproof { padding-top: clamp(32px, 4.4vh, 48px); }

.fsproof__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 26px 30px 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.fsproof__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.14;
  font-weight: 400;
  color: var(--ink);
}

.fsproof__text {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

/* Second and last appearance of the refusal colour on this page. */
.fsproof__refused {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
}

.fsproof__refused-value {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--refused);
}

.fsproof__refused-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fsproof__more { margin: 14px 0 0; }

.fsstamps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-faint);
}

.fsstamp {
  display: flex;
  gap: 16px;
  padding: 16px 20px 18px;
  border-right: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}

.fsstamp:nth-child(2n) { border-right: none; }
.fsstamp:nth-last-child(-n+2) { border-bottom: none; }

/* The rotation is what makes these impressions rather than badges. */
.fsstamp__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--accent);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
}

.fsstamp__mark--r1 { transform: rotate(-4deg); }
.fsstamp__mark--r2 { transform: rotate(3deg); }
.fsstamp__mark--r3 { transform: rotate(-2deg); }
.fsstamp__mark--r4 { transform: rotate(5deg); }

.fsstamp__body { min-width: 0; }

.fsstamp__title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.fsstamp__text {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
}

.fsstamp__fig {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.fsstamp__figure {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
}

.fsstamp__figlabel {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- cities --- */

.fscities { padding-top: clamp(32px, 4.4vh, 48px); }

.fscities__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fscities__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.fscity {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.fscity:hover,
.fscity:focus-visible { border-color: var(--accent); }
.fscities__list:hover .fscity:not(:hover) { opacity: 0.6; }

.fscity__head,
.fscity__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fscity__name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
}

.fscity__count {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  transition: color 0.25s ease;
}

.fscity:hover .fscity__count,
.fscity:focus-visible .fscity__count { color: var(--accent); }

/* Proportional to the count beside it, never drawn to look even. */
.fscity__track {
  display: block;
  height: 3px;
  margin: 12px 0;
  background: var(--line-faint);
}

.fscity__bar { display: block; height: 100%; background: var(--accent); }

.fscity__bar--w100 { width: 100%; }
.fscity__bar--w74 { width: 74%; }
.fscity__bar--w59 { width: 59%; }
.fscity__bar--w44 { width: 44%; }
.fscity__bar--w33 { width: 33%; }
.fscity__bar--w22 { width: 22%; }
.fscity__bar--w13 { width: 13%; }
.fscity__bar--w9 { width: 9%; }

.fscity__median { font-size: 13px; color: var(--ink-body); }
.fscity__delta { font-size: 12px; color: var(--good); }

/* ------------------------------------------------- questions and save --- */

.fsbottom { padding: clamp(32px, 4.4vh, 48px) 0 40px; }

.fsbottom__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: stretch;
}

.fsqs {
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.fsqs__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.14;
  font-weight: 400;
  color: var(--ink);
}

.fsq__list { margin: 14px 0 0; padding: 0; list-style: none; }

.fsq { border-bottom: 1px solid var(--line-faint); }
.fsq--last { border-bottom: none; }

.fsq__head { margin: 0; }

.fsq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 15px 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.fsq__text {
  flex: 1;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.25s ease;
}

.fsq__button[aria-expanded="true"] .fsq__text { color: var(--accent); }
.fsq__button:hover .fsq__text { color: var(--accent); }

.fsq__plus {
  font-size: 15px;
  color: var(--accent);
  transition: transform 0.28s ease;
}

.fsq__button[aria-expanded="true"] .fsq__plus { transform: rotate(135deg); }

.fsq__panel[hidden] { display: none; }

.fsq__answer {
  margin: 0;
  padding: 0 40px 16px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-body);
}

.fsqs__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.fsqs__link {
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.fsqs__link:hover,
.fsqs__link:focus-visible { color: var(--accent); }

.fssave {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.fssave__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.fssave__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.16;
  font-weight: 400;
  color: var(--ink);
}

.fssave__text {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-body);
}

.fssave__rows { margin: 18px 0 0; }

.fssave__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
}

.fssave__row:last-child { border-bottom: none; }

.fssave__row dt { font-size: 12px; color: var(--ink-muted); }

.fssave__row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

.fssave__form { margin-top: 16px; }
.fssave__send { margin: 12px 0 0; }

.fssave__promise {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- tablet --- */

@media (max-width: 1179px) {
  .fsstate__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fsstate__cell:nth-child(3n) { border-right: none; }
  .fsstate__cell:nth-child(-n+3) { border-bottom: 1px solid var(--line-faint); }

  .fstabrow { flex-wrap: wrap; }
  .fsform__note { margin-left: 0; padding: 10px 24px; }

  .fsfields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsfield--go { grid-column: 1 / -1; }
  .fsform__go { width: 100%; }

  /* Two columns put `Refine` in the left half, and a 470px panel hung off the
     right edge of a 350px field starts at a negative x. The panel keeps its
     width and `right: 0`; what changes is what it anchors to. */
  .fsform { position: relative; }
  .fsfield--refine { position: static; }

  .fscuts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fscards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fsproof__grid { grid-template-columns: 340px minmax(0, 1fr); }
  .fscities__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Stacked, so the spacer goes — otherwise the void comes back. */
  .fsbottom__pair { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fssave__promise { margin-top: 0; }
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  /* 2 × 2 with the refused figure across the bottom — the one cell that is
     never dropped at any width. */
  .fsstate__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsstate__cell { border-bottom: 1px solid var(--line-faint); }
  .fsstate__cell:nth-child(2n) { border-right: none; }
  .fsstate__cell:nth-child(4) { grid-column: 1 / -1; border-right: none; }
  .fsstate__cell--last { border-bottom: none; }

  .fstabs { overflow-x: auto; }
  .fstab__label { white-space: nowrap; }

  .fsfields { grid-template-columns: minmax(0, 1fr); }

  /* An anchored 470px panel has nothing to anchor to here, so it becomes a
     full-screen sheet with the same sticky header and footer. */
  .fsfilters {
    position: fixed;
    inset: 0;
    z-index: 120;
    width: auto;
    max-height: none;
    border: none;
    border-top: 1px solid var(--accent);
  }

  .fscuts__list {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
  }

  .fscuts__list > li { flex: 0 0 200px; scroll-snap-align: start; }

  .fscards { grid-template-columns: minmax(0, 1fr); }

  .fsgrid__tools { width: 100%; }
  .fsgrid__sort { flex: 1; }
  .fsgrid__select { width: 100%; }
  .fsviews { flex: 1; }
  .fsview { flex: 1; }

  .fsproof__grid { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .fsstamps { grid-template-columns: minmax(0, 1fr); }
  .fsstamp { border-right: none; }
  .fsstamp:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-faint); }
  .fsstamp:last-child { border-bottom: none; }
  .fsstamp__mark { transform: scale(0.85) rotate(-4deg); }

  .fscities__list { grid-template-columns: minmax(0, 1fr); }

  .fsqs, .fssave { padding: 20px; }
  .fsq__answer { padding-right: 0; }
  .fssave__send .fsfilters__show { width: 100%; }
}

@media (hover: none) {
  .fschip,
  .fscheck,
  .fsview,
  .fscut,
  .fstab__label,
  .fspager__num,
  .fspager__step,
  .fsfilters__reset { min-height: 44px; }

  .fscheck__input { width: 18px; height: 18px; }

  /* Nothing here may depend on hover: both rows rest with every card lit. */
  .fscuts__list:hover .fscut:not(:hover),
  .fscities__list:hover .fscity:not(:hover) { opacity: 1; }
}

/* ==========================================================================
   63. Home detail v1 — where the decision is made
   -----------------------------------------------------------------------------
   Every listing layout points here, and here the register's argument has to
   hold up in detail. The page is built around one callout: −8 m², our
   measurement against the deed, with the price computed on ours. Everything
   else rests on it.

   The body grid is `1fr 380px` with `align-items: start`, because the rail is
   `position: sticky` — `stretch` makes it as tall as the body and there is
   nothing left for it to move within. This is the fourth section in the file
   to carry that comment; it is the trap this project keeps walking into.

   COLOUR IS NARROW HERE AND MEANS SOMETHING
   -----------------------------------------
   Refusal red appears only on a comparable that is dearer per m² than this
   property. Green marks the zero commission, the price reduction and the
   cheaper comparables. Accent marks the measured area, the completion cash and
   the total. Nothing else is coloured — a fifth meaning turns the palette into
   noise, and none of these is the only signal: the value itself says which is
   higher.

   ROOM HIGHLIGHTING IS NOT HOVER-ONLY
   -----------------------------------
   The table rows are focusable and carry the highlight through `:hover` and
   `:focus-within`, and the script wires tap on touch. On a phone there is no
   hover, and this is the one interaction on the page worth keeping.
   ========================================================================== */

/* -------------------------------------------------------------- gallery --- */

/* Своя обёртка вместо общей `.section__inner`: та приносит 72px сверху и
   снизу к каждой секции, и поверх собственных отступов страницы зазоры
   вырастали до 164px между галереей и цифрами. Здесь только горизонтальный
   отступ — тем же токеном, что у шапки, — а вертикальный ритм задают сами
   секции. */
.pdwrap {
  position: relative;
  margin: 0 var(--pad-hero);
}

.pdgallery { padding-top: clamp(22px, 3vh, 32px); }

.pdgallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: stretch;
}

.pdframe {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.pdframe__img {
  display: block;
  width: 100%;
  height: clamp(545px, 67vh, 720px);
  object-fit: cover;
}

.pdframe__crop {
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.pdframe__crop--tl {
  top: 16px;
  left: 16px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.5);
  border-top: 1px solid rgba(var(--ink-rgb), 0.5);
}

.pdframe__crop--br {
  right: 16px;
  bottom: 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.5);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.5);
}

/* The caption names the frame, and it changes with the view: a floor plan is
   captioned as a drawing, never as a photograph. */
.pdframe__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pdframe__index { color: var(--ink-faint); }

.pdswitch {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}

.pdswitch__btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-input);
  background: rgba(var(--plate-rgb), 0.86);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.pdswitch__btn:hover { border-color: var(--accent); color: var(--accent); }

.pdswitch__btn.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.pdthumbs {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdthumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.pdthumb:hover { opacity: 1; }
.pdthumb.is-on { opacity: 1; border-color: var(--accent); }

.pdthumb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdthumb__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--plate-rgb), 0.72);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
}

/* ---------------------------------------------------------- key figures --- */

.pdkeys { padding-top: 20px; }

.pdkeys__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}

.pdkey {
  padding: 16px 18px 18px;
  border-right: 1px solid var(--line-faint);
}

.pdkey--last { border-right: none; }

.pdkey__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdkey__value {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}

/* The measured area — the page's thesis in one cell. */
.pdkey__value.is-accent { color: var(--accent); }

/* --------------------------------------------------------- body + rail --- */

.pdbody { padding-top: 34px; }

.pdbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: start;
  /* `.section__inner` clips its blueprint decorations with `overflow: hidden`,
     and any ancestor whose overflow is not `visible` becomes the scrollport a
     sticky child sticks inside — one that never scrolls, so the rail just
     rides up with the page. There is nothing to clip in this section. */
  overflow: visible;
}

.pdmain { min-width: 0; }

.pdmain > section + section { margin-top: 44px; }

.pdfile__para {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--ink-body);
}

/* The most important element on the page. A portal writes the seller's number;
   this writes ours and shows the difference. */
.pdgap {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.pdgap__figure {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
}

.pdgap__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-body);
}

/* --------------------------------------------------------- verification --- */

.pdchecks { margin: 16px 0 0; padding: 0; list-style: none; }

.pdcheck {
  display: grid;
  grid-template-columns: 16px 150px minmax(0, 1fr) 110px 130px;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdcheck--last { border-bottom: none; }

.pdcheck__tick {
  position: relative;
  width: 13px;
  height: 13px;
  align-self: center;
}

.pdcheck__tick::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 10px;
  border-right: 1.5px solid var(--good);
  border-bottom: 1.5px solid var(--good);
  transform: rotate(45deg);
}

.pdcheck__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.pdcheck__detail {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* A check with no date is a claim; a check dated four days ago is a fact. */
.pdcheck__when {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdcheck__doc {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}

.pdcheck__doc:hover,
.pdcheck__doc:focus-visible { color: var(--accent); }

/* ---------------------------------------------------------------- spec --- */

.pdspec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 16px 0 0;
}

.pdspec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdspec__label {
  font-size: 13px;
  color: var(--ink-muted);
}

.pdspec__value {
  margin: 0;
  font-size: 14px;
  text-align: right;
  color: var(--ink);
}

.pdspec__value.is-accent { color: var(--accent); }
.pdspec__value.is-muted { color: var(--ink-body); }

/* --------------------------------------------------------------- rooms --- */

.pdrooms__grid {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  margin-top: 16px;
}

/* A drawing on a 38px grid, not an image export — and `aria-hidden`, because
   the table beside it is already its text alternative. */
/* В эталоне у плана только `min-height: 300px`: он тянется по высоте строки,
   рядом с таблицей комнат. `aspect-ratio` я добавил сам — и при колонке в
   975px коробка вырастала до 780px, оставляя под таблицей пустоту в пол-экрана.
   Высоту задаёт строка грида, а не ширина. */
.pdplan {
  position: relative;
  min-width: 0;
  min-height: 300px;
  margin: 0;
  /* Подписи комнат стоят абсолютно внутри процентных боксов; без этого длинная
     подпись вылезает за чертёж и тянет за собой ширину страницы. */
  overflow: hidden;
  border: 1px solid var(--line);
  /* Фон и сетка 38px переехали на внутренний лист `.pdplan__sheet`, чтобы
     плашка с подписью Fig. 01 легла поверх чертежа, а не рядом с ним. */
  background: rgba(var(--plate-rgb), 0.5);
}

/* Лист плана: сетка 38px и комнаты в процентах живут на нём, а подпись
   Fig. 01 — плашка внизу слева ВНУТРИ плана, как в спецификации, а не строка
   над ним. */
.pdplan__sheet {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
}

.pdplan__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdroom {
  position: absolute;
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.pdroom__tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

.pdroom.is-on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.pdroom.is-on .pdroom__tag { color: var(--accent); }

.pdroom--0 { left: 6%; top: 8%; width: 40%; height: 40%; }
.pdroom--1 { left: 48%; top: 8%; width: 30%; height: 30%; }
.pdroom--2 { left: 6%; top: 52%; width: 34%; height: 38%; }
.pdroom--3 { left: 42%; top: 52%; width: 28%; height: 38%; }
.pdroom--4 { left: 72%; top: 52%; width: 22%; height: 38%; }
.pdroom--5 { left: 80%; top: 8%; width: 14%; height: 20%; }
.pdroom--6 { left: 80%; top: 31%; width: 14%; height: 15%; }

.pdrooms__table {
  width: 100%;
  border-collapse: collapse;
}

.pdrooms__table th,
.pdrooms__table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

.pdrooms__table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdrow th { color: var(--ink); }
.pdrow td { color: var(--ink-body); }
.pdrow--last th, .pdrow--last td { border-bottom: none; }

.pdrow__area {
  font-family: var(--serif);
  font-size: 14px;
  text-align: right;
  color: var(--ink);
}

.pdrow__area.is-accent { color: var(--accent); }

.pdrooms__table tfoot th,
.pdrooms__table tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: none;
  font-weight: 600;
  color: var(--ink);
}

/* Highlight travels from the row to the plan, and it is reachable by keyboard
   as well as by pointer. */
.pdrow:hover,
.pdrow:focus-within,
.pdrow.is-on { background: rgba(var(--accent-rgb), 0.1); }

.pdrow:hover th,
.pdrow:focus-within th,
.pdrow.is-on th { color: var(--accent); }

/* ------------------------------------------------------- price history --- */

.pdhistory__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: stretch;
  margin-top: 20px;
}

.pdchart {
  min-height: 210px;
  padding: 20px 22px 34px;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}

/* Столбики тянутся по ширине колонки — так и в эталоне: четырнадцать блоков
   во всю ширину, а не узкий график. Ограничивать их ширину нельзя, владелец
   на это указал прямо. */
.pdchart__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 156px;
}

.pdbar {
  flex: 1;
  background: rgba(var(--ink-rgb), 0.16);
}

.pdbar.is-recent { background: rgba(var(--ink-rgb), 0.3); }
.pdbar.is-now { background: var(--accent); }

.pdbar--h94 { height: 80.84%; }
.pdbar--h96 { height: 82.56%; }
.pdbar--h100 { height: 86%; }

.pdchart__axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdprices { margin: 0; }

.pdprice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdprice--last { border-bottom: none; }

.pdprice__label { font-size: 13px; color: var(--ink-muted); }

.pdprice__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

.pdprice__value.is-accent { color: var(--accent); }
.pdprice__value.is-ok { color: var(--good); }
.pdprice__value.is-muted { color: var(--ink-body); }

/* --------------------------------------------------------------- costs --- */

.pdcosts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 16px 0 0;
}

.pdcost {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdcost--last { border-bottom: none; }

.pdcost__label {
  font-size: 13px;
  color: var(--ink);
}

.pdcost__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-faint);
}

.pdcost__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  text-align: right;
  color: var(--ink);
}

/* Zero commission, and who pays instead. */
.pdcost__value.is-ok { color: var(--good); }

/* The number a buyer actually needs and almost never finds on a listing. */
.pdcost__value.is-accent { color: var(--accent); }

/* -------------------------------------------------------------- street --- */

.pdstreet__grid {
  display: grid;
  grid-template-columns: 1.2fr minmax(0, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  margin-top: 16px;
}

/* `z-index: 0` makes the frame its own stacking context — Leaflet lays its
   panes out between 400 and 1000 and would otherwise sit over the filter modal
   and the sticky header. */
.pdmap {
  position: relative;
  z-index: 0;
  min-height: 280px;
  border: 1px solid var(--line);
  background-color: var(--panel);
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
}

.pdmap__canvas { position: absolute; inset: 0; }

/* The schematic: what the frame shows before Leaflet is there, and where the
   pins read their coordinates. The block hides it once the map is up. */
.pdmap__plan { position: absolute; inset: 0; }
.pdmap__plan[hidden] { display: none; }

.pdmap__road { position: absolute; background: rgba(var(--ink-rgb), 0.22); }
.pdmap__road--h { left: 0; top: 46%; width: 100%; height: 2px; }
.pdmap__road--v { left: 34%; top: 0; width: 2px; height: 100%; }
.pdmap__road--d { left: 0; top: 78%; width: 100%; height: 1px; transform: rotate(-3deg); }

.pdmap__here {
  position: absolute;
  left: 46%;
  top: 40%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  background: var(--panel-inner);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.pdmap__pin {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.pdpoi {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdpoi__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.38);
}

.pdpoi--0 { left: 20%; top: 22%; }
.pdpoi--1 { left: 72%; top: 30%; }
.pdpoi--2 { left: 24%; top: 72%; }
.pdpoi--3 { left: 76%; top: 70%; }

.pdwalks { width: 100%; border-collapse: collapse; }

.pdwalks th,
.pdwalks td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

.pdwalks thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdwalks tbody th { color: var(--ink); }
.pdwalks tbody td { color: var(--ink-body); }
.pdwalk--last th, .pdwalk--last td { border-bottom: none; }
.pdwalk__time { text-align: right; color: var(--ink); }

/* ---------------------------------------------------------------- rail --- */

.pdrail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.pdpanel {
  padding: 20px;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}

.pdpanel--price {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.1);
}

.pdpanel__head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdpanel__head--on-accent { color: var(--accent); }

.pdrail__price {
  margin: 0;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
}

.pdrail__per {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-body);
}

.pdrail__under { color: var(--good); }

.pdmonths { margin: 16px 0 0; }

.pdmonth {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdmonth--last { border-bottom: none; }

.pdmonth dt { font-size: 12px; color: var(--ink-muted); }

.pdmonth dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

.pdmonth dd.is-accent { color: var(--accent); }

.pdrail__cta { margin: 16px 0 0; }

.pdrail__minor {
  display: flex;
  gap: 18px;
  margin: 12px 0 0;
}

.pdrail__link {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.pdrail__link:hover,
.pdrail__link:focus-visible { color: var(--accent); }

.pdagent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.pdagent__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--accent);
  object-fit: cover;
}

.pdagent__who { flex: 1; min-width: 0; }

.pdagent__name { display: block; font-size: 14px; color: var(--ink); }

.pdagent__role {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdagentrows { margin: 0; }

.pdagentrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
}

.pdagentrow--last { border-bottom: none; }
.pdagentrow dt { font-size: 12px; color: var(--ink-muted); }
.pdagentrow dd { margin: 0; font-size: 13px; color: var(--ink); }

.pdagent__more { margin: 14px 0 0; }

.pdagent__reply {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}

.pddocs { margin: 0; padding: 0; list-style: none; }

.pddoc { border-bottom: 1px solid var(--line-faint); }
.pddoc--last { border-bottom: none; }

.pddoc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: none;
}

.pddoc__kind {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-input);
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
}

.pddoc__label { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.pddoc__size { font-size: 12px; color: var(--ink-faint); }

.pddoc__link:hover .pddoc__label,
.pddoc__link:focus-visible .pddoc__label { color: var(--accent); }

.pddocs__note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.pdslots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.pdslot { display: block; }

.pdslot__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line-input);
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.pdslot__label:hover { border-color: var(--accent); color: var(--ink); }

.pdslot__input:checked + .pdslot__label {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.pdslot__input:focus-visible + .pdslot__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pdbook__send { margin: 14px 0 0; }

/* ---------------------------------------------------------- comparables --- */

/* 40px below the last row, the same gap v2 and v3 leave: the comparables grid
   ended flush against the footer, and the page read as if it had been cut. */
.pdsimilar { padding: 48px 0 40px; }

.pdsims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pdsim {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line-faint);
  background: var(--panel);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.pdsim:hover,
.pdsim:focus-visible { transform: translateY(-4px); border-color: var(--accent); }

.pdsims:hover .pdsim:not(:hover) { opacity: 0.62; }

.pdsim__media { position: relative; display: block; overflow: hidden; }

.pdsim__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; height: auto;
  object-fit: cover;
}

.pdsim__status {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 10px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.pdsim__sheet {
  margin: 12px 14px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pdsim__title {
  margin: 6px 14px 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

.pdsim__meta {
  margin: 4px 14px 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.pdsim__money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: auto 14px 0;
  padding: 12px 0 14px;
}

.pdsim__price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

/* The only red on this page: a comparable dearer per m² than this one. The
   number itself says so as well — colour is never the only signal. */
.pdsim__per.is-higher { font-size: 12px; color: var(--refused); }
.pdsim__per.is-lower { font-size: 12px; color: var(--good); }

/* --------------------------------------------------------------- tablet --- */

@media (max-width: 1179px) {
  .pdgallery__grid { grid-template-columns: minmax(0, 1fr); }

  /* The thumb rail goes under the frame and runs horizontally. */
  .pdthumbs {
    grid-template-rows: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 92px;
  }

  .pdkeys__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdkey:nth-child(3n) { border-right: none; }
  .pdkey:nth-child(-n+3) { border-bottom: 1px solid var(--line-faint); }

  /* The rail drops below the body and stops being sticky — panels 2 × 2. */
  .pdbody__grid { grid-template-columns: minmax(0, 1fr); }

  .pdrail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .pdcheck { grid-template-columns: 16px 150px minmax(0, 1fr); }
  .pdcheck__when, .pdcheck__doc { grid-column: 2 / -1; }

  .pdrooms__grid,
  .pdhistory__grid,
  .pdstreet__grid { grid-template-columns: minmax(0, 1fr); }

  .pdsims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  .pdframe__img { height: 300px; }

  .pdswitch { position: static; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
  .pdframe { display: flex; flex-direction: column; }
  .pdframe__cap { position: static; order: 3; }

  /* A grid item defaults to `min-width: auto` and refuses to be narrower than
     its content, so `overflow-x` on its own does not contain the strip — it
     pushes the page instead (§10 п.29, third time). */
  .pdthumbs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    height: 76px;
  }

  .pdthumbs > li { flex: 0 0 96px; }

  .pdkeys__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdkey { border-bottom: 1px solid var(--line-faint); }
  .pdkey:nth-child(2n) { border-right: none; }
  .pdkey:nth-last-child(-n+2) { border-bottom: none; }

  .pdrail { grid-template-columns: minmax(0, 1fr); }

  .pdcheck { grid-template-columns: 16px minmax(0, 1fr); }
  .pdcheck__title { grid-column: 2; }
  .pdcheck__detail, .pdcheck__when { grid-column: 2; }
  .pdcheck__doc {
    grid-column: 1 / -1;
    padding: 12px 0;
    border: 1px solid var(--line-input);
    text-align: center;
  }

  .pdspec__grid,
  .pdcosts__grid { grid-template-columns: minmax(0, 1fr); }

  .pdchart { min-height: 160px; }
  .pdchart__bars { height: 100px; }

  .pdmap { min-height: 240px; height: 240px; }

  /* `aspect-ratio: 1.25` with `min-height: 300px` resolves to a 375px width,
     which is wider than the column it sits in — the ratio has to go, not the
     height. Same shape of bug as the map above. */
  .pdplan { min-height: 0; height: 260px; }

  .pdsims { grid-template-columns: minmax(0, 1fr); }

  .pdgap { flex-direction: column; gap: 8px; }
}

@media (hover: none) {
  .pdthumb,
  .pdswitch__btn,
  .pdslot__label,
  .pddoc__link { min-height: 44px; }

  /* No hover on a phone, and the row → plan link is the one interaction here
     worth keeping, so the script switches it to tap and the class carries it. */
  .pdsims:hover .pdsim:not(:hover) { opacity: 1; }
}

/* ---- элементы, добавленные по развёрнутой спецификации (§9—§14) --------- */

.pdrooms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Итог под таблицей: подпись акцентом в верхнем регистре, число серифом. */
.pdtotal-row th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.pdtotal-row .pdrow__area { font-size: 20px; }

/* Заметка справа от шапки истории цены. */
.pdhistory__aside {
  margin: -22px 0 0;
  font-size: 13px;
  text-align: right;
  color: var(--ink-muted);
}

/* Масштабная линейка на карте. */
.pdmap__scale {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pdmap__rule { width: 22px; height: 1px; background: var(--ink-muted); }

/* Пин стоит по центру своей точки, а не углом к ней. */
.pdmap__here { left: 46%; top: 48%; transform: translate(-50%, -50%); }

/* Верхняя строка панелей рейла: подпись слева, номер листа или лицензия справа. */
.pdpanel__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pdpanel__top .pdpanel__head { margin: 0; }

.pdpanel__sheet {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pdrail__change { margin: 12px 0 0; }

/* Главное действие страницы — сплошная акцентная кнопка во всю ширину. */
.pdrail__go {
  display: block;
  padding: 15px 0;
  background: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-accent);
  text-decoration: none;
  transition: background 0.25s ease;
}

.pdrail__go:hover, .pdrail__go:focus-visible { background: var(--ink); }

.pdrail__minor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 9px 0 0;
}

.pdrail__link {
  padding: 13px 0;
  border: 1px solid var(--line-input);
  text-align: center;
}

.pdagent__btn {
  display: block;
  padding: 12px 0;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pdagent__btn:hover, .pdagent__btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.pdagent__reply { display: flex; align-items: center; gap: 8px; }

.pdbook__lead {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-body);
}

/* Шапка сравнимых: заголовок слева, ссылка на весь район справа. */
.pdsim__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pdsim__lead { min-width: 0; }

.pdsim__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.12;
  font-weight: 400;
  color: var(--ink);
}

.pdsim__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px);
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 767px) {
  .pdhistory__aside { margin-top: 6px; text-align: left; }
  .pdrail__minor { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .pdrail__go, .pdrail__link, .pdagent__btn { min-height: 44px; }
}

/* ==========================================================================
   63b. Home detail v1 — правки по замеру против прототипа
   -----------------------------------------------------------------------------
   Каждое число ниже снято с `property-detail-v1.dc.html` в браузере на 1920,
   а не взято из головы. Слева — что было у меня, справа — что в эталоне.
   ========================================================================== */

/* Ритм секций: 30px между ними, 26px перед «The file» (было 44 у всех). */
.pdmain > section + section { margin-top: 30px; }
.pdmain > .pdfile { margin-top: 26px; }

/* Шапка секции подчёркнута линейкой у всех, кроме «The file»:
   padding-bottom 14px, border-bottom 1px var(--line). */
.pdverify > .eyebrow,
.pdspecs > .eyebrow,
.pdcosts > .eyebrow,
.pdstreet > .eyebrow,
.pdhistory > .eyebrow,
.pdrooms__head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.pdrooms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Проверки: четыре колонки, 64px строка (было пять колонок и 51px). */
.pdcheck {
  grid-template-columns: 26px 150px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
}

.pdcheck__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

/* Ключевая ячейка: 73px (было 81). */
.pdkey__label { line-height: 1.1; letter-spacing: 0.2em; }
.pdkey__value { line-height: 1; }

/* Спецификация: 41px (было 45). */
.pdspec__label { font-weight: 300; line-height: 1.4; }
.pdspec__value { font-size: 13px; line-height: 1.4; }

/* История цены: 41px (было 50). */
.pdprice__value { font-size: 16px; line-height: 1.2; }

/* Расходы: 60px (было 72). */
.pdcost { padding: 11px 0; }
.pdcost__label { font-weight: 300; line-height: 1.4; color: var(--ink-muted); }
.pdcost__note { margin-top: 2px; font-weight: 300; line-height: 1.35; }
.pdcost__value { font-size: 16px; line-height: 1.2; white-space: nowrap; }

/* Расстояния 41px, строка агента 35px. */
.pdwalks th, .pdwalks td { padding: 11px 12px 10px; }
.pdagentrow { padding: 8px 0; }

/* План: сетка и комнаты на внутреннем листе, подпись Fig. 01 — плашка внизу
   слева ВНУТРИ чертежа, а не строка над ним. */
.pdplan {
  margin: 0;
  background-color: rgba(var(--plate-rgb), 0.5);
  background-image: none;
}

.pdplan__sheet {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
}

.pdplan__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Сравнимые: карточка 333px с верхней полосой, а не с плашкой на фото. */
.pdsims { gap: 20px; }

.pdsim__reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pdsim__sheet { margin: 0; color: var(--ink-muted); }

.pdsim__status {
  position: static;
  padding: 0;
  background: none;
  color: var(--accent);
}

.pdsim__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 4px;
}

/* Имя намеренно другое, чем у заголовка секции: общее `.pdsim__title`
   перебивало карточное правило и раздувало заголовок до 34px. */
.pdsim__title { margin: 0; font-size: 19px; line-height: 1.15; }
.pdsim__meta { margin: 0; font-weight: 300; }

.pdsimhead__title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.12;
  font-weight: 400;
  color: var(--ink);
}

.pdsim__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pdsim__money {
  margin: auto 0 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line-faint);
}

.pdsim__price { line-height: 1.2; }

.pdsim__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px);
  opacity: 0.25;
  pointer-events: none;
}

/* Элементы, добавленные по развёрнутой спецификации. */
.pdhistory__aside { margin: -22px 0 0; font-size: 13px; text-align: right; color: var(--ink-muted); }

.pdmap__scale {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pdmap__rule { width: 22px; height: 1px; background: var(--ink-muted); }
.pdmap__here { left: 46%; top: 48%; transform: translate(-50%, -50%); }

.pdpanel__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pdpanel__top .pdpanel__head { margin: 0; }

.pdpanel__sheet {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pdrail__change { margin: 12px 0 0; }

.pdrail__go {
  display: block;
  padding: 15px 0;
  background: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-accent);
  text-decoration: none;
  transition: background 0.25s ease;
}

.pdrail__go:hover, .pdrail__go:focus-visible { background: var(--ink); }

.pdrail__minor { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 9px 0 0; }
.pdrail__link { padding: 13px 0; border: 1px solid var(--line-input); text-align: center; }

.pdagent__btn {
  display: block;
  padding: 12px 0;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pdagent__btn:hover, .pdagent__btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.pdagent__reply { display: flex; align-items: center; gap: 8px; }
.pdbook__lead { margin: 0 0 12px; font-size: 13px; font-weight: 300; color: var(--ink-body); }

@media (max-width: 767px) {
  .pdhistory__aside { margin-top: 6px; text-align: left; }
  .pdrail__minor { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .pdrail__go, .pdrail__link, .pdagent__btn { min-height: 44px; }
}

/* Добор до эталона по высоте строки — числа сняты замером, не на глаз:
   проверка 73→64, история цены 44→41, строка агента 38→35, цена карточки
   49→52. */
.pdcheck__when { line-height: 1.15; }
.pdcheck__doc { line-height: 1.15; }
.pdprice__label { line-height: 1.4; }
.pdagentrow dt, .pdagentrow dd { line-height: 1.4; }
.pdsim__price { line-height: 1.45; }
.pdsim__per { line-height: 1.45; }

/* ==========================================================================
   64. Home detail v2 — three columns, and a calculator that binds to the rail
   -----------------------------------------------------------------------------
   Same property as v1, different room: navigation left, the file in the centre,
   action right. Numbers below are the handoff's.

   `align-items: start` on the wrapper is load bearing — both rails are sticky,
   and `stretch` makes each as tall as the centre column, leaving nothing to
   stick within. Fifth section in this file to carry that note.

   The calculator is bound to the right rail: the live monthly total and
   `Cash needed` both recompute from the same deposit. If they can disagree,
   the page is lying to the reader.
   ========================================================================== */

.p2wrap {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  gap: clamp(20px, 2.2vw, 32px);
  align-items: start;
  margin: clamp(20px, 2.8vh, 30px) var(--pad-hero) 40px;
}

.p2rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.p2main { min-width: 0; }

.p2panel {
  border: 1px solid var(--line);
  background: var(--panel);
}

.p2panel--pad { padding: 16px 18px 18px; }

.p2panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.p2panel__aside {
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.p2panel__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ----------------------------------------------------------- contents --- */

.p2toc { margin: 0; padding: 0; list-style: none; }

.p2toc__row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 10px 18px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.p2toc__num { font-size: 12px; letter-spacing: 0.14em; color: var(--ink-faint); }
.p2toc__label { font-size: 13px; font-weight: 300; color: var(--ink-body); }

.p2toc__row.is-on {
  border-left-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.p2toc__row.is-on .p2toc__label { color: var(--accent); }
.p2toc__row:hover .p2toc__label { color: var(--ink); }

.p2checks, .p2docs { margin: 0; padding: 0; list-style: none; }

.p2check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.p2check__tick {
  position: relative;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 1px solid var(--good);
  border-radius: 50%;
}

.p2check__tick::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 3px;
  height: 7px;
  border-right: 1.5px solid var(--good);
  border-bottom: 1.5px solid var(--good);
  transform: rotate(45deg);
}

.p2check__name { flex: 1; font-size: 13px; font-weight: 300; color: var(--ink-body); }

.p2check__when {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.p2doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
}

.p2doc__kind {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  color: var(--ink-muted);
}

.p2doc__label { font-size: 13px; font-weight: 300; color: var(--ink-body); }
.p2doc:hover .p2doc__label { color: var(--accent); }

/* Ниже 768 левый рейл сворачивается в аккордеон на чекбоксе — без скрипта. */
.p2rail__summary { display: none; }
.p2rail__body { display: contents; }

/* ------------------------------------------------------------ gallery --- */

.p2frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.p2frame__img {
  display: block;
  width: 100%;
  height: clamp(560px, 68vh, 730px);
  object-fit: cover;
}

.p2frame__crop { position: absolute; width: 14px; height: 14px; pointer-events: none; }

.p2frame__crop--tl {
  top: 14px; left: 14px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.5);
  border-top: 1px solid rgba(var(--ink-rgb), 0.5);
}

.p2frame__crop--br {
  right: 14px; bottom: 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.5);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.5);
}

.p2frame__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 15px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p2frame__index { color: var(--accent); }

.p2thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.p2thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 74px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.p2thumb:hover { opacity: 1; }
.p2thumb.is-on { opacity: 1; border-color: var(--accent); }

.p2thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p2thumb__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--plate-rgb), 0.72);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* -------------------------------------------------------- key figures --- */

.p2keys { margin-top: 22px; }

.p2keys__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.p2key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 17px;
  border-right: 1px solid var(--line-faint);
}

.p2key--last { border-right: none; }

.p2key__label {
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2key__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
}

.p2key__value.is-accent { color: var(--accent); }

/* ----------------------------------------------------- section header --- */

.p2head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.p2file { margin-top: 26px; }
.p2specs, .p2rooms, .p2calc, .p2history, .p2street, .p2similar { margin-top: 28px; }

.p2para {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--ink-body);
}

/* Never soften this — everything else rests on it. */
.p2gap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding: 13px 17px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.p2gap__figure { font-family: var(--serif); font-size: 23px; line-height: 1; color: var(--accent); }
.p2gap__text { flex: 1; min-width: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-body); }

/* -------------------------------------------------------------- spec --- */

.p2spec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin: 14px 0 0;
}

.p2spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
}

.p2spec__label { font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--ink-muted); }
.p2spec__value { margin: 0; font-size: 13px; line-height: 1.4; text-align: right; color: var(--ink); }
.p2spec__value.is-accent { color: var(--accent); }
.p2spec__value.is-muted { color: var(--ink-body); }

/* ------------------------------------------------------------- rooms --- */

.p2rooms__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-top: 18px;
}

.p2plan {
  position: relative;
  min-width: 0;
  min-height: 270px;
  border: 1px solid var(--line);
  background-color: rgba(var(--plate-rgb), 0.5);
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.p2room {
  position: absolute;
  display: flex;
  align-items: flex-start;
  padding: 5px 7px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  transition: all 0.25s ease;
}

.p2room__tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2room.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.p2room.is-on .p2room__tag { color: var(--accent); }

.p2room--0 { left: 6%; top: 8%; width: 40%; height: 40%; }
.p2room--1 { left: 48%; top: 8%; width: 30%; height: 30%; }
.p2room--2 { left: 6%; top: 52%; width: 34%; height: 38%; }
.p2room--3 { left: 42%; top: 52%; width: 28%; height: 38%; }
.p2room--4 { left: 72%; top: 52%; width: 22%; height: 38%; }
.p2room--5 { left: 80%; top: 8%; width: 14%; height: 20%; }
.p2room--6 { left: 80%; top: 31%; width: 14%; height: 15%; }

.p2rooms__table { width: 100%; border-collapse: collapse; }

.p2rooms__table th,
.p2rooms__table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

.p2rooms__table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2rooms__table tbody th { color: var(--ink); }
.p2rooms__table tbody td { color: var(--ink-muted); text-align: right; }

.p2row__area { font-family: var(--serif); font-size: 15px; color: var(--ink); }

.p2row:hover, .p2row:focus-within, .p2row.is-on { background: rgba(var(--accent-rgb), 0.1); }
.p2row:hover th, .p2row.is-on th, .p2row:focus-within th { color: var(--accent); }

/* -------------------------------------------------------- calculator --- */

.p2calc { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.p2calc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-faint);
}

.p2calc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  padding: 22px 24px 24px;
}

.p2calc__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.p2field { min-width: 0; }

.p2field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.p2field__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p2field__pct { font-size: 12px; letter-spacing: 0.1em; color: var(--accent); }

.p2field__money {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-input);
}

.p2field__sign { font-family: var(--serif); font-size: 24px; color: var(--ink-muted); }

.p2field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  outline: none;
}

.p2slider { width: 100%; height: 3px; margin-top: 12px; accent-color: var(--accent); }

.p2field__hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }

.p2terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid var(--line-input);
}

.p2terms > .p2field__label { grid-column: 1 / -1; padding: 0 0 8px; }
.p2term + .p2term .p2term__label { border-left: 1px solid var(--line-input); }

.p2term__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p2term__input:checked + .p2term__label { background: var(--accent); color: var(--on-accent); }
.p2term__input:focus-visible + .p2term__label { outline: 2px solid var(--accent); outline-offset: -2px; }

.p2breaks { margin: 20px 0 0; }

.p2break {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 96px;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
}

.p2break:last-child { border-bottom: none; }

.p2break__label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 300; color: var(--ink-body); }

.p2break__swatch { width: 8px; height: 8px; flex: 0 0 8px; }
.p2break__swatch--1 { background: var(--accent); }
.p2break__swatch--2 { background: rgba(var(--accent-rgb), 0.55); }
.p2break__swatch--3 { background: rgba(var(--ink-rgb), 0.42); }
.p2break__swatch--4 { background: rgba(var(--ink-rgb), 0.2); }

.p2break__note { margin: 0; font-size: 12px; text-align: right; color: var(--ink-faint); }
.p2break__value { margin: 0; font-family: var(--serif); font-size: 17px; text-align: right; color: var(--ink); }

.p2calc__answer {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-faint);
  padding-left: 28px;
}

.p2calc__total {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  color: var(--accent);
}

.p2calc__summary { margin: 10px 0 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-body); }

/* Декоративная полоса — значения несут строки разбивки выше. */
.p2segs {
  display: flex;
  height: 12px;
  margin: 16px 0 0;
  border: 1px solid var(--line-faint);
}

.p2seg--1 { background: var(--accent); }
.p2seg--2 { background: rgba(var(--accent-rgb), 0.55); }
.p2seg--3 { background: rgba(var(--ink-rgb), 0.42); }
.p2seg--4 { background: rgba(var(--ink-rgb), 0.2); }

.p2totals { margin: 16px 0 0; }

.p2total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-faint);
}

.p2total:last-child { border-bottom: none; }
.p2total dt { font-size: 12px; color: var(--ink-muted); }
.p2total dd { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.p2total dd.is-accent { color: var(--accent); }

.p2calc__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------------------------- history and street --- */

.p2history__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; margin-top: 18px; }
.p2street__grid { display: grid; grid-template-columns: 1.15fr minmax(0, 1fr); gap: 22px; align-items: stretch; margin-top: 18px; }

.p2chart {
  position: relative;
  min-height: 180px;
  padding: 18px 20px 30px;
  border: 1px solid var(--line);
  background: rgba(var(--plate-rgb), 0.5);
}

.p2chart__bars { display: flex; align-items: flex-end; gap: 4px; height: 100px; }

.p2bar { flex: 1; background: rgba(var(--ink-rgb), 0.16); }
.p2bar.is-recent { background: rgba(var(--ink-rgb), 0.3); }
.p2bar.is-now { background: var(--accent); }
.p2bar--h94 { height: 80.84%; }
.p2bar--h96 { height: 82.56%; }
.p2bar--h100 { height: 86%; }

.p2chart__axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2chart__axis .is-accent { color: var(--accent); }

.p2prices { margin: 0; }

.p2price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
}

.p2price:last-child { border-bottom: none; }
.p2price__label { font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--ink-muted); }
.p2price__value { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.2; color: var(--ink); }
.p2price__value.is-accent { color: var(--accent); }
.p2price__value.is-ok { color: var(--good); }
.p2price__value.is-muted { color: var(--ink-body); }

/* `z-index: 0` for the same reason as `.pdmap` — Leaflet's own panes go up to
   1000 and the sticky rails on this page sit far below that. */
.p2map {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 250px;
  border: 1px solid var(--line);
  background-color: rgba(var(--plate-rgb), 0.5);
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  overflow: hidden;
}

.p2map__canvas { position: absolute; inset: 0; }

/* The schematic: the fallback, and the source of the pin coordinates. */
.p2map__plan { position: absolute; inset: 0; }
.p2map__plan[hidden] { display: none; }

.p2map__road { position: absolute; background: rgba(var(--ink-rgb), 0.22); }
.p2map__road--h { left: 0; top: 46%; width: 100%; height: 2px; }
.p2map__road--v { left: 34%; top: 0; width: 2px; height: 100%; }
.p2map__road--d { left: 0; top: 78%; width: 100%; height: 1px; transform: rotate(-3deg); }

.p2map__here {
  position: absolute;
  left: 46%;
  top: 48%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.p2map__pin { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.p2poi {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2poi__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), 0.38); }
.p2poi--0 { left: 20%; top: 22%; }
.p2poi--1 { left: 72%; top: 30%; }
.p2poi--2 { left: 24%; top: 72%; }
.p2poi--3 { left: 76%; top: 70%; }

.p2map__scale {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(var(--plate-rgb), 0.86);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p2map__rule { width: 20px; height: 1px; background: var(--ink-muted); }

.p2walks { width: 100%; border-collapse: collapse; }

.p2walks th, .p2walks td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

.p2walks thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p2walks tbody th { color: var(--ink); }
.p2walks tbody td { color: var(--ink-muted); text-align: right; }
.p2walk__time { color: var(--ink); }

/* -------------------------------------------------------- comparables --- */

.p2sim__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.p2sims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.p2sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

.p2sim:hover, .p2sim:focus-visible { transform: translateY(-4px); border-color: var(--accent); }
.p2sims:hover .p2sim:not(:hover) { opacity: 0.62; }

.p2sim__reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.p2sim__sheet { color: var(--ink-muted); }
.p2sim__status { color: var(--accent); }

.p2sim__media { position: relative; display: block; overflow: hidden; }
.p2sim__img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }

.p2sim__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  opacity: 0.25;
  pointer-events: none;
}

.p2sim__hatch--1 { background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px); }
.p2sim__hatch--2 { background-image: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 8px); }
.p2sim__hatch--3 { background-image: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px); background-size: 12px 12px; }

.p2sim__text { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 4px; }
.p2sim__title { font-family: var(--serif); font-size: 18px; line-height: 1.15; color: var(--ink); }
.p2sim__meta { font-size: 12px; font-weight: 300; color: var(--ink-muted); }

.p2sim__money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--line-faint);
}

.p2sim__price { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); }
.p2sim__per { font-size: 12px; line-height: 1.4; }
.p2sim__per.is-higher { color: var(--refused); }
.p2sim__per.is-lower { color: var(--good); }

/* --------------------------------------------------------- right rail --- */

.p2panel--price {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 20px 22px 22px;
}

.p2panel__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.p2panel__accent { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }

.p2rail__price { margin: 8px 0 0; font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }

.p2rail__per {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p2rail__vs { color: var(--good); }

.p2rail__live {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-faint);
}

.p2rail__live-label { font-size: 12px; font-weight: 300; color: var(--ink-muted); }
.p2rail__live-value { font-family: var(--serif); font-size: 20px; color: var(--accent); }

.p2rail__cta { margin: 14px 0 0; }

.p2rail__go {
  display: block;
  width: 100%;
  padding: 14px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease;
}

.p2rail__go:hover, .p2rail__go:focus-visible { background: var(--ink); }

.p2rail__minor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }

.p2rail__link {
  padding: 12px 0;
  border: 1px solid var(--line-input);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.p2rail__link:hover, .p2rail__link:focus-visible { border-color: var(--accent); color: var(--accent); }

.p2agent { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }

.p2agent__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  object-fit: cover;
}

.p2agent__who { min-width: 0; }
.p2agent__name { display: block; font-size: 13px; color: var(--ink); }
.p2agent__role { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

.p2arows { margin: 0; }

.p2arow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-faint);
}

.p2arow:last-child { border-bottom: none; }
.p2arow dt { font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.p2arow dd { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.p2arow dd.is-ok { color: var(--good); }
.p2arow dd.is-accent { font-family: var(--serif); font-size: 16px; color: var(--accent); }

.p2agent__more { margin: 12px 0 0; }

.p2agent__btn {
  display: block;
  padding: 11px 0;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.p2agent__btn:hover, .p2agent__btn:focus-visible { border-color: var(--accent); color: var(--accent); }

.p2book__lead { margin: 0 0 10px; font-size: 13px; font-weight: 300; color: var(--ink-body); }

.p2slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 0; border: none; }
.p2slot { display: block; }

.p2slot__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.p2slot__input:checked + .p2slot__label {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.p2slot__input:focus-visible + .p2slot__label { outline: 2px solid var(--accent); outline-offset: 2px; }

.p2book__send { margin: 12px 0 0; }

/* Якоря должны вставать под липкой шапкой, а не под неё. */
.p2main > section { scroll-margin-top: 28px; }

/* --------------------------------------------------------------- tablet --- */

@media (max-width: 1179px) {
  .p2wrap { grid-template-columns: 250px minmax(0, 1fr); }

  .p2rail--right {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .p2calc__body { grid-template-columns: minmax(0, 1fr); }
  .p2calc__answer { border-left: none; padding-left: 0; border-top: 1px solid var(--line-faint); padding-top: 20px; }
  .p2history__grid, .p2street__grid, .p2rooms__grid { grid-template-columns: minmax(0, 1fr); }
  .p2sims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
  .p2wrap { grid-template-columns: minmax(0, 1fr); }

  .p2rail--left { position: static; gap: 0; border: 1px solid var(--line-faint); background: var(--panel); }

  .p2rail__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }

  .p2rail__chev {
    width: 8px;
    height: 8px;
    border-right: 1px solid currentcolor;
    border-bottom: 1px solid currentcolor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
  }

  .p2rail__body { display: none; padding: 0 12px 12px; }
  .p2rail__toggle:checked ~ .p2rail__body { display: block; }
  .p2rail__toggle:checked ~ .p2rail__summary .p2rail__chev { transform: rotate(-135deg) translate(-3px, -3px); }
  .p2rail--left .p2panel { border: none; background: none; }

  .p2rail--right { grid-template-columns: minmax(0, 1fr); }

  .p2frame__img { height: 300px; }
  .p2thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p2keys__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p2key { border-bottom: 1px solid var(--line-faint); }
  .p2key:nth-child(2n) { border-right: none; }
  .p2spec__grid { grid-template-columns: minmax(0, 1fr); }
  .p2calc__pair { grid-template-columns: minmax(0, 1fr); }
  .p2break { grid-template-columns: minmax(0, 1fr) auto; }
  .p2break__note { display: none; }
  .p2sims { grid-template-columns: minmax(0, 1fr); }
  .p2gap { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (hover: none) {
  .p2toc__row, .p2thumb, .p2term__label, .p2slot__label, .p2doc, .p2rail__link, .p2agent__btn { min-height: 44px; }
  .p2sims:hover .p2sim:not(:hover) { opacity: 1; }
}

/* ==========================================================================
   65. Home detail v3 — full width, no rails, four views of the same flat
   --------------------------------------------------------------------------
   The third layout drops the side rail entirely: every block runs the full
   width between the page pads, and the column count changes down the page
   (2 → 2 → 1 → 3 → 2 → 4). Own wrapper `.p3wrap` rather than `.section__inner`
   — the sections carry their own vertical rhythm, and `.section__inner` would
   add 72px above and below each of them (project-history §0).

   Two things only this layout has: the video tour with a chapter rail, and the
   rent comparison inside the calculator.

   MICRO-LABELS ARE 12px. The handoff asks for 8–10px; CLAUDE.md puts the floor
   at 12px because Envato rejects small text. The tracking from the spec is
   kept, the size is not — the same departure `properties-for-sale` makes.
   ========================================================================== */

.p3wrap { margin: 0 var(--pad-hero); }

/* ------------------------------------------------------------- media --- */

.p3media { margin-top: clamp(18px, 2.4vh, 26px); }

.p3media__frame {
  position: relative;
  border: 1px solid var(--line);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  overflow: hidden;
}

.p3tabrow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.p3tabs { display: flex; align-items: stretch; }

.p3tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p3tab:last-child { border-right: none; }
.p3tab:hover,
.p3tab:focus-visible { color: var(--accent); }
.p3tab.is-on { background: var(--accent); color: var(--on-accent); }
.p3tab.is-on:hover { color: var(--on-accent); }
.p3tab__count { opacity: 0.62; }

/* Pushed right by the spacer, as in the prototype. */
.p3tabrow__note {
  flex: 1;
  margin: 0;
  padding: 0 20px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* EXACTLY three children: left rail, frame, right rail. An unbalanced tag once
   dropped the right rail out of this grid and added some 3000px to the page,
   so the builder asserts the count and so does the measuring pass. */
.p3stage {
  position: relative;
  display: grid;
  grid-template-columns: clamp(206px, 25vh, 272px) minmax(0, 1fr) clamp(206px, 25vh, 272px);
  height: clamp(560px, 70vh, 760px);
}

.p3rail { display: flex; flex-direction: column; min-width: 0; }
.p3rail--left { border-right: 1px solid rgba(var(--ink-rgb), 0.14); }
.p3rail--right { border-left: 1px solid rgba(var(--ink-rgb), 0.14); }

.p3thumb {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.06);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.p3rail .p3thumb:last-child { border-bottom: none; }
.p3thumb:hover,
.p3thumb:focus-visible { opacity: 1; }
.p3thumb.is-on { opacity: 1; }

.p3thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The ring is a separate layer so the active state never moves the image. */
.p3thumb__ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.p3thumb.is-on .p3thumb__ring { border-color: var(--accent); }

.p3thumb__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--scrim-rgb), 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.p3frame {
  position: relative;
  display: block;
  min-width: 0;
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.p3still { position: absolute; inset: 0; margin: 0; }
.p3still__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p3crop { position: absolute; width: 14px; height: 14px; }
.p3crop--tl {
  top: 16px;
  left: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.5);
  border-left: 1px solid rgba(var(--ink-rgb), 0.5);
}
.p3crop--br {
  right: 16px;
  bottom: 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.5);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.5);
}

.p3still__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: rgba(var(--plate-rgb), 0.9);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p3still__index { color: var(--accent); }
.p3still__index:empty { display: none; }

.p3acts {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.p3act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-input);
  background: rgba(var(--plate-rgb), 0.9);
  color: var(--ink-body);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.p3act:hover,
.p3act:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- video --- */

/* Without scripting the poster and the chapter list simply follow the frame:
   the chapters are a table of contents for the flat and are worth reading on
   their own. With scripting the layer is shown only on the video tab. */
.p3video { position: absolute; inset: 0; }
.js .p3video { display: none; }
.js .p3frame.is-video .p3video { display: block; }
.js .p3frame.is-video .p3still,
.js .p3frame.is-video .p3acts { display: none; }

.p3video__poster { display: block; width: 100%; height: 100%; object-fit: cover; }

.p3video__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--video-scrim);
}

.p3play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--pin-bg);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.25s ease;
}

.p3play:hover,
.p3play:focus-visible { transform: scale(1.06); }

.p3chapters {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--plate-rgb), 0.9);
}

.p3track {
  position: relative;
  height: 3px;
  margin: 0;
  background: rgba(var(--ink-rgb), 0.16);
}

.p3track__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width 0.3s linear;
}

/* One tick per chapter, standing at its own percentage. */
.p3tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 9px;
  background: rgba(var(--ink-rgb), 0.16);
}

.p3tick.is-reached { background: var(--accent); }
.p3tick--0 { left: 0; }
.p3tick--1 { left: 18%; }
.p3tick--2 { left: 44%; }
.p3tick--3 { left: 68%; }
.p3tick--4 { left: 88%; }

.p3chapters__list { display: flex; margin: 0; padding: 0; list-style: none; }
.p3chapters__list > li { flex: 1; display: flex; }

.p3chapter {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p3chapter--last { border-right: none; }
.p3chapter:hover,
.p3chapter:focus-visible { color: var(--accent); }
.p3chapter.is-on { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.p3chapter__time { opacity: 0.6; }

/* -------------------------------------------------------------- keys --- */

/* Welded to the media block: no top border, no gap between them. */
.p3keys__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: none;
  background: var(--panel);
}

.p3key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3key--last { border-right: none; }

.p3key__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3key__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
  color: var(--ink);
}

.p3key__value.is-accent { color: var(--accent); }

/* ------------------------------------------------- two-column blocks --- */

.p3duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 34px);
  margin-top: clamp(26px, 3.4vh, 38px);
}

.p3duo--rooms { grid-template-columns: 1.3fr minmax(0, 1fr); align-items: start; }
.p3duo--agent { grid-template-columns: 1.1fr minmax(0, 1fr); align-items: stretch; }

.p3head { margin: 0; }

.p3para {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* Never soften this callout: the price is calculated on ninety-six. */
.p3gap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding: 13px 17px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.p3gap__figure { font-family: var(--serif); font-size: 23px; color: var(--accent); }
.p3gap__text { flex: 1; min-width: 200px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-body); }

.p3checks__list { margin: 4px 0 0; padding: 0; list-style: none; }

.p3check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3check--last { border-bottom: none; }

.p3check__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--good);
  border-radius: 50%;
  color: var(--good);
}

.p3check__body { display: flex; flex-direction: column; gap: 4px; }
.p3check__title { font-size: 13px; color: var(--ink); }
.p3check__detail { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--ink-body); }

.p3check__when {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- rooms --- */

/* Both columns stretch: on the reference the plan sheet is exactly as tall as
   the room table beside it (463 × 391 against 260 × 391). `align-items: start`
   here left the sheet at its minimum and the two boxes ended on different
   lines — the owner caught it. Only the OUTER rooms/spec grid starts. */
.p3rooms__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  margin-top: 18px;
}

.p3plan { position: relative; display: flex; flex-direction: column; margin: 0; }

.p3plan__sheet {
  position: relative;
  flex: 1;
  min-height: 290px;
  border: 1px solid var(--line);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Two lines in every rectangle — the room and its area. v1 and v2 print only
   the room; this layout has the space, and the area is the number a reader is
   actually comparing. */
.p3room {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.p3room__tag,
.p3room__area {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

.p3room.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.p3room.is-on .p3room__tag,
.p3room.is-on .p3room__area { color: var(--accent); }

.p3room--0 { left: 6%; top: 8%; width: 40%; height: 40%; }
.p3room--1 { left: 48%; top: 8%; width: 30%; height: 30%; }
.p3room--2 { left: 6%; top: 52%; width: 34%; height: 38%; }
.p3room--3 { left: 42%; top: 52%; width: 28%; height: 38%; }
.p3room--4 { left: 72%; top: 52%; width: 22%; height: 38%; }
.p3room--5 { left: 80%; top: 8%; width: 14%; height: 20%; }
.p3room--6 { left: 80%; top: 31%; width: 14%; height: 15%; }

/* Inside the sheet, bottom left — a plate on the drawing, not a line under it. */
.p3plan__cap {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3roomrows { margin: 0; padding: 0; list-style: none; }

.p3roomrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.p3roomrow--last { border-bottom: none; }

/* A button, not a row with a hover handler: the highlight has to be reachable
   from the keyboard, and on a phone there is no hover at all. */
.p3roomrow__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 9px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p3roomrow__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
}

.p3roomrow__dims { font-size: 12px; color: var(--ink-faint); }
.p3roomrow__area { font-family: var(--serif); font-size: 15px; text-align: right; color: var(--ink); }

.p3roomrow__btn:hover,
.p3roomrow__btn:focus-visible,
.p3roomrow__btn.is-on { background: rgba(var(--accent-rgb), 0.1); }
.p3roomrow__btn:hover .p3roomrow__name,
.p3roomrow__btn:focus-visible .p3roomrow__name,
.p3roomrow__btn.is-on .p3roomrow__name,
.p3roomrow__btn:hover .p3roomrow__area,
.p3roomrow__btn:focus-visible .p3roomrow__area,
.p3roomrow__btn.is-on .p3roomrow__area { color: var(--accent); }

/* ------------------------------------------------------------- specs --- */

.p3specs__list { margin: 4px 0 0; }

.p3spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3spec--last { border-bottom: none; }
.p3spec__label { font-size: 13px; font-weight: 300; color: var(--ink-muted); }
.p3spec__value { margin: 0; font-size: 13px; font-weight: 500; text-align: right; color: var(--ink); }
.p3spec__value.is-accent { color: var(--accent); }
.p3spec__value.is-muted { color: var(--ink-body); }

/* -------------------------------------------------------- calculator --- */

.p3calc {
  margin-top: clamp(26px, 3.4vh, 38px);
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.p3calc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.p3calc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
  gap: 30px;
  padding: 24px 26px 26px;
}

.p3inputs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.p3field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.p3field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p3field__note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3field__note.is-accent { color: var(--accent); }

.p3field__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  border-bottom: 1px solid var(--line-input);
}

.p3field__prefix { font-family: var(--serif); font-size: 24px; color: var(--ink-muted); }

.p3field__input {
  flex: 1;
  min-width: 0;
  padding: 4px 0 8px;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
}

.p3field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The field and the slider are two controls over one value, so they are one
   labelled group and always agree. */
.p3range {
  width: 100%;
  height: 3px;
  margin-top: 14px;
  accent-color: var(--accent);
}

.p3terms { min-width: 0; margin: 0; padding: 0; border: none; }

.p3terms__legend {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p3terms__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  border: 1px solid var(--line-input);
}

.p3term {
  padding: 11px 0;
  border-right: 1px solid var(--line-input);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p3term--last { border-right: none; }
.p3term:hover { color: var(--accent); }
.p3term__input:checked + .p3term { background: var(--accent); color: var(--on-accent); }
.p3term__input:focus-visible + .p3term { outline: 2px solid var(--accent); outline-offset: 2px; }

.p3comp { display: flex; flex-direction: column; min-width: 0; }

.p3comp__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Columns, not a stacked bar: four separate amounts, compared. */
.p3bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 108px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.p3bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.p3bar__value { font-size: 12px; font-weight: 500; color: var(--ink-body); }
.p3bar__stem { width: 100%; }
.p3bar__stem--h4 { height: 4px; }
.p3bar__stem--h78 { height: 78px; }
.p3bar__stem--1 { background: var(--accent); }
.p3bar__stem--2 { background: rgba(var(--accent-rgb), 0.55); }
.p3bar__stem--3 { background: rgba(var(--ink-rgb), 0.42); }
.p3bar__stem--4 { background: rgba(var(--ink-rgb), 0.2); }

.p3bars__labels {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.p3bars__labels > li {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3totals { margin: 18px 0 0; border-top: 1px solid rgba(var(--ink-rgb), 0.1); }

.p3total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3total--last { border-bottom: none; }
.p3total__label { font-size: 13px; font-weight: 300; color: var(--ink-muted); }
.p3total__value { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.p3total__value.is-accent { color: var(--accent); }

.p3answer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 28px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3answer__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p3answer__figure {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 50px;
  line-height: 1;
  color: var(--accent);
}

.p3answer__sum {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* The comparison only v3 makes. The sign carries it — colour never alone. */
.p3rent { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(var(--ink-rgb), 0.1); }

.p3rent__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.p3rent__value { margin: 5px 0 0; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.p3rent__value.is-ok { color: var(--good); }
.p3rent__value.is-bad { color: var(--refused); }

.p3rent__note {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-faint);
}

.p3answer__cta { margin: auto 0 0; padding-top: 18px; }
.p3answer__cta .btn { width: 100%; }

/* ---------------------------------------- history · street · costs --- */

.p3trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.4vh, 38px);
  align-items: start;
}

.p3panel { min-width: 0; }

.p3hist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.04);
  list-style: none;
}

/* Heights are the index values on one shared scale, written as classes, so a
   later month cannot draw a flattering picture. */
.p3hist__bar { flex: 1; min-width: 0; }
.p3hist__bar--h100 { height: 90%; }
.p3hist__bar--h96 { height: 86.4%; }
.p3hist__bar--h94 { height: 84.6%; }
.p3hist__bar.is-now { background: var(--accent); }
.p3hist__bar.is-mid { background: rgba(var(--ink-rgb), 0.3); }
.p3hist__bar.is-was { background: rgba(var(--ink-rgb), 0.16); }

.p3prows { margin: 14px 0 0; }

.p3prow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3prow--last { border-bottom: none; }
.p3prow__label { font-size: 13px; font-weight: 300; color: var(--ink-muted); }
.p3prow__value { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.p3prow__value.is-ok { color: var(--good); }
.p3prow__value.is-muted { color: var(--ink-body); }

/* `z-index: 0` makes the frame its own stacking context — Leaflet's panes run
   from 400 to 1000 and would otherwise cover the modal and the sticky header. */
.p3map {
  position: relative;
  z-index: 0;
  height: 130px;
  margin-top: 16px;
  border: 1px solid var(--line);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.p3map__canvas { position: absolute; inset: 0; }
.p3map__plan { position: absolute; inset: 0; }
.p3map__plan[hidden] { display: none; }

.p3map__road { position: absolute; background: rgba(var(--ink-rgb), 0.22); }
.p3map__road--h { left: 0; top: 52%; width: 100%; height: 2px; }
.p3map__road--v { left: 38%; top: 0; width: 2px; height: 100%; }

.p3map__here {
  position: absolute;
  left: 46%;
  top: 48%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  background: var(--pin-bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.p3walks { width: 100%; margin-top: 14px; border-collapse: collapse; }
.p3walks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The rule sits on the row, as it does on the reference — put on the cells it
   measures as two shorter lines instead of one across the panel. */
.p3walk { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.p3walk--last { border-bottom: none; }

.p3walk > th,
.p3walk > td {
  padding: 9px 0;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  color: var(--ink-muted);
}
.p3walk__dist { width: 60px; text-align: right; font-weight: 500; color: var(--ink); }

.p3costs { margin: 16px 0 0; }

.p3cost {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3cost--last { border-bottom: none; }

.p3cost__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-muted);
}

.p3cost__note { font-size: 12px; color: var(--ink-faint); }
.p3cost__value { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.p3cost__value.is-ok { color: var(--good); }
.p3cost__value.is-accent { color: var(--accent); }

/* ---------------------------------------------------- agent + viewing --- */

.p3agent,
.p3book {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.p3book { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.p3agent__id { display: flex; align-items: center; gap: 16px; margin-top: 18px; }

.p3agent__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
  object-fit: cover;
}

.p3agent__names { display: flex; flex-direction: column; gap: 4px; }
.p3agent__name { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); }

.p3agent__role {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.p3stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3stat { padding-right: 14px; border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.p3stat--last { padding-right: 0; border-right: none; }

.p3stat__value {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink);
}

.p3stat__value.is-accent { color: var(--accent); }

.p3stat__label {
  margin: 5px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Two equal halves, not two content-width buttons: on the reference each is
   312px of a 688px panel, and their hairline is `line-field` (0.28). */
.p3agent__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 20px;
}

/* The panel already has a border, so its head takes no underline — on the
   reference only the inline hairline runs there. Same for the viewing panel. */
.p3agent .p3head { padding-bottom: 0; border-bottom: none; }
.p3agent__acts .btn { width: 100%; padding: 12px 20px; border: 1px solid var(--line-input); color: var(--ink); }
.p3agent__acts .btn:hover,
.p3agent__acts .btn:focus-visible { border-color: var(--accent); color: var(--accent); }

.p3book__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.p3book__left {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3book__title {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.14;
  color: var(--ink);
}

.p3book__title em { font-style: italic; color: var(--accent); }

.p3book__text {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.p3slots { margin: 18px 0 0; padding: 0; border: none; }

.p3slots__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.p3slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 4px;
  border: 1px solid var(--line-input);
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.p3slot__time { font-size: 12px; opacity: 0.72; }
.p3slot:hover { border-color: var(--accent); color: var(--accent); }
.p3slot__input:checked + .p3slot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.p3slot__input:focus-visible + .p3slot { outline: 2px solid var(--accent); outline-offset: 2px; }

.p3book__cta { margin: auto 0 0; padding-top: 20px; }
.p3book__cta .btn { width: 100%; }

.p3book__promise {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}

.p3book__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* ------------------------------------------------------- comparables --- */

.p3sims { margin: clamp(28px, 3.8vh, 42px) var(--pad-hero) 40px; }

.p3sims__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.p3sims__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.p3sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}

.p3sim:hover,
.p3sim:focus-visible { transform: translateY(-4px); border-color: var(--accent); }
.p3sims__grid:hover .p3sim:not(:hover) { opacity: 0.62; }

.p3sim__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p3sim__status { color: var(--accent); }

.p3sim__media { position: relative; display: block; aspect-ratio: 3 / 2; height: auto; overflow: hidden; }
.p3sim__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p3sim__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

.p3sim:hover .p3sim__hatch { opacity: 0.5; }
.p3sim__hatch--0 { background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px); }
.p3sim__hatch--1 { background: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 8px); }
.p3sim__hatch--2 { background: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px); background-size: 13px 13px; }
.p3sim__hatch--3 { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 6px); }

.p3sim__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 12px; }
.p3sim__title { font-family: var(--serif); font-size: 18px; line-height: 1.15; color: var(--ink); }
.p3sim__meta { font-size: 12px; font-weight: 300; color: var(--ink-muted); }

.p3sim__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p3sim__price { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.p3sim__per { font-size: 12px; font-weight: 500; }
.p3sim__per.is-higher { color: var(--refused); }
.p3sim__per.is-lower { color: var(--good); }

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .p3stage { grid-template-columns: 150px minmax(0, 1fr) 150px; height: clamp(420px, 56vh, 560px); }
  .p3keys__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Four then three: the cell that starts the second row loses its divider. */
  .p3key:nth-child(4) { border-right: none; }
  .p3key:nth-child(n + 5) { border-top: 1px solid rgba(var(--ink-rgb), 0.1); }
  .p3duo,
  .p3duo--rooms,
  .p3duo--agent { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the spacers have nothing left to distribute. */
  .p3agent__acts,
  .p3book__cta,
  .p3answer__cta { margin-top: 0; }
  .p3calc__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p3answer { grid-column: 1 / -1; padding-left: 0; padding-top: 22px; border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.1); }
  .p3trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p3sims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  /* A 206px rail leaves nothing for the photograph, so the thumbnails come out
     of the grid and run under the frame as a scrolling strip.

     `order` is used here and nowhere else on the site: in the source the left
     rail precedes the frame, which is the right reading order at desktop where
     it is also the left column. Stacked, the photograph has to come first —
     four thumbnails ahead of the thing they control is not a page opening. */
  .p3stage { display: flex; flex-direction: column; height: auto; }
  .p3frame { order: -1; height: clamp(260px, 52vh, 380px); }
  .p3rail {
    flex-direction: row;
    overflow-x: auto;
    border: none;
    border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  }
  .p3rail--left { border-top: none; }
  .p3thumb { flex: 0 0 118px; height: 84px; border-bottom: none; border-right: 1px solid rgba(var(--ink-rgb), 0.14); }
  .p3rail .p3thumb:last-child { border-right: none; }

  .p3tabrow { flex-direction: column; align-items: stretch; }
  .p3tabs { overflow-x: auto; }
  .p3tab { flex: 0 0 auto; padding: 14px 18px; }
  .p3tab__count { display: none; }
  .p3tabrow__note { padding: 10px 16px 12px; text-align: left; border-top: 1px solid rgba(var(--ink-rgb), 0.1); }

  /* The chapter rail stays: it is the flat's table of contents. */
  .p3chapters__list { flex-wrap: wrap; }
  .p3chapters__list > li { flex: 1 0 33%; }
  .p3chapter { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  .p3keys__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p3key { border-top: 1px solid rgba(var(--ink-rgb), 0.1); }
  .p3key:nth-child(odd) { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
  .p3key:nth-child(even) { border-right: none; }

  .p3rooms__grid { grid-template-columns: minmax(0, 1fr); }
  .p3calc__body { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 22px; }
  .p3calc__head { padding: 14px 18px; }
  .p3trio { grid-template-columns: minmax(0, 1fr); }
  .p3slots__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p3sims__grid { grid-template-columns: minmax(0, 1fr); }
  .p3agent,
  .p3book { padding: 20px 18px 22px; }
  .p3answer__figure { font-size: 42px; }
  .p3agent__acts .btn { width: 100%; }

  /* Touch sizes hang off the width, not off `hover: none`: a narrow window is
     the case people actually check, and a pointer test does not answer it. */
  .p3tab,
  .p3chapter,
  .p3term,
  .p3slot,
  .p3act,
  .p3roomrow__btn { min-height: 44px; }
  .p3range { height: 22px; }
}

/* --------------------------------------------------------- touch --- */

@media (hover: none) {
  .p3tab,
  .p3thumb,
  .p3chapter,
  .p3term,
  .p3slot,
  .p3act,
  .p3roomrow__btn { min-height: 44px; }
  .p3range { height: 22px; }
  /* No hover on a phone, so nothing may depend on it: the plan highlight moves
     to tap through the script, and the comparables all stay lit. */
  .p3sims__grid:hover .p3sim:not(:hover) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .p3sim,
  .p3play,
  .p3track__fill { transition: none; }
  .p3sim:hover,
  .p3sim:focus-visible { transform: none; }
  .p3play:hover,
  .p3play:focus-visible { transform: none; }
}

/* --------------------------------------------------- v3: label metrics --- */

/* The handoff sets its micro-labels at 8–10px; CLAUDE.md holds the floor at
   12px, so every one of them is four points taller than the prototype and the
   rows they sit in grew with them. These are single-line uppercase labels —
   `line-height: 1` gives the leading back without touching the size, and pulls
   the repeating rows to within a few pixels of the reference. */
.p3key__label,
.p3tab,
.p3chapter,
.p3tabrow__note,
.p3still__cap,
.p3field__label,
.p3field__note,
.p3terms__row,
.p3term,
.p3comp__label,
.p3bar__value,
.p3bars__labels > li,
.p3answer__label,
.p3rent__label,
.p3check__when,
.p3room__tag,
.p3room__area,
.p3plan__cap,
.p3roomrow__dims,
.p3cost__note,
.p3stat__label,
.p3agent__role,
.p3book__left,
.p3slot__time,
.p3sim__strip { line-height: 1; }

.p3roomrow__name { line-height: 1.15; }
.p3check__title { line-height: 1.15; }

/* ------------------------------------------------- v3: section heads --- */

/* Measured off the prototype, because I had left the site's short 60px accent
   rule in place and the owner caught it: on this layout a section head is a
   label, a hairline that takes the whole rest of the row, and an optional note.
   Row `gap: 13px`, line 1px on `line-soft`, tracking 0.22em.
   Widths on the reference at 1440: The file 381 · Verification 374 · Rooms 528
   · Specification 460 · Price history 318 · The street 338 · Costs 373 ·
   Who holds this file 384. */
/* TWO lines, not one: the hairline that fills the row BETWEEN label and note,
   and a full-width underline beneath the whole head. Measured on the reference
   at 1440 — the underline is `--line` (0.2) and sits 14px under the label, with
   18px of air before the block that follows. I shipped only the inline hairline
   and the owner had to point at it. */
.p3head {
  gap: 13px;
  letter-spacing: 0.22em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.p3head .eyebrow__line {
  flex: 1;
  width: auto;
  background: rgba(var(--ink-rgb), 0.14);
}

/* Two heads keep a short rule — and there it is ACCENT, exactly 30px: the
   calculator and the comparables, the two blocks that open with a claim rather
   than label a panel. */
.p3calc__head .eyebrow,
.p3sims__head .eyebrow { gap: 13px; letter-spacing: 0.22em; }

.p3calc__head .eyebrow__line,
.p3sims__head .eyebrow__line {
  flex: 0 0 30px;
  width: 30px;
  background: var(--accent);
}

/* ==========================================================================
   66. Home detail v4 — image first, then a bento grid
   --------------------------------------------------------------------------
   The fourth layout opens with a full-bleed frame and sets the headline ON the
   photograph, then drops into a bento of four unequal tiles. Own wrapper
   `.p4wrap` rather than `.section__inner`, for the reason recorded in
   project-history §0: that class adds 72px above and below.

   TEXT OVER A PHOTOGRAPH DOES NOT FOLLOW THE THEME
   ------------------------------------------------
   The `--hero-*` and `--*-bright` tokens are identical in both palettes,
   because what sits over a picture has to be readable against the picture.
   Both items in the top strip carry their own plate: 20px into an 820px frame
   the scrim has faded to roughly 0.4, and the handoff measured 2.4:1 and 1.3:1
   there over a bright photograph. The plates are the contrast fix.

   LINES
   -----
   Row dividers 0.1, frame furniture 0.14, section-head underlines `--line`
   (0.2) — the same three values the reference uses, and every head carries
   BOTH the inline hairline and the underline.

   Micro-labels are 12px (CLAUDE.md floor) with the spec's tracking and
   `line-height: 1`, so the rows still land on the reference heights.
   ========================================================================== */

.p4wrap { margin: 0 var(--pad-hero); }

/* ------------------------------------------------------ opening frame --- */

.p4hero { margin-top: clamp(18px, 2.4vh, 26px); }

.p4hero__frame {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
}

.p4stage {
  position: relative;
  display: block;
  height: clamp(600px, 74vh, 820px);
  background: rgba(var(--ink-rgb), 0.06);
}

.p4stage__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------ the photo accordion --- */
/* Eight vertical panels fill the frame. Hovering one widens it to 4.2 : 1 and
   the rest narrow and dim — at the 1180px minimum a closed panel is still
   100px wide, which is enough to read as a photograph.

   ANIMATE `flex`, NOT `width`. The row then fills the container exactly at
   every frame; animating width opens a sub-pixel gap at the right edge
   mid-transition.

   The accordion is Photographs-only and the thumbnail strip is plan/street-
   only: an accordion of one drawing means nothing, a video cannot be sliced
   into panes, and with the accordion present the strip duplicates it.

   The `:hover` rules below carry the whole behaviour with scripting off; the
   `is-on` class is what block 9aa moves, and `:not(:hover)` keeps the two from
   fighting when both apply. */

.p4panes { position: absolute; inset: 0; display: flex; }

.p4pane {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-right: 1px solid rgba(var(--scrim-rgb), 0.5);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.p4pane--last { border-right: none; }
.p4pane.is-on,
.p4pane:hover,
.p4pane:focus-visible { flex: 4.2; }
.p4panes:hover .p4pane.is-on:not(:hover) { flex: 1; }
.p4pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.p4pane__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p4pane__veil {
  position: absolute;
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.42);
  pointer-events: none;
  transition: background 0.42s ease;
}

.p4pane.is-on .p4pane__veil,
.p4pane:hover .p4pane__veil,
.p4pane:focus-visible .p4pane__veil { background: rgba(var(--scrim-rgb), 0); }
.p4panes:hover .p4pane.is-on:not(:hover) .p4pane__veil { background: rgba(var(--scrim-rgb), 0.42); }

.p4pane__num {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: rgba(var(--hero-ink-rgb), 0.55);
  pointer-events: none;
  transition: color 0.42s ease;
}

.p4pane.is-on .p4pane__num,
.p4pane:hover .p4pane__num,
.p4pane:focus-visible .p4pane__num { color: rgba(var(--hero-ink-rgb), 0); }
.p4panes:hover .p4pane.is-on:not(:hover) .p4pane__num { color: rgba(var(--hero-ink-rgb), 0.55); }

/* Which of the three stage layers is showing. Photographs is the printed
   default, so it is what a reader without scripting gets. */
.p4stage__img { display: none; }
.p4stage.is-plan .p4stage__img,
.p4stage.is-street .p4stage__img { display: block; }
.p4stage.is-plan .p4panes,
.p4stage.is-street .p4panes,
.p4stage.is-video .p4panes { display: none; }

.p4scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--hero-top) 0%, transparent 26%, transparent 52%, var(--hero-bottom) 100%);
}

/* Only the top two corners: the title occupies the bottom ones. */
.p4mark { position: absolute; width: 15px; height: 15px; }
.p4mark--tl {
  top: 18px;
  left: 18px;
  border-top: 1px solid var(--mark-bright);
  border-left: 1px solid var(--mark-bright);
}
.p4mark--tr {
  top: 18px;
  right: 18px;
  border-top: 1px solid var(--mark-bright);
  border-right: 1px solid var(--mark-bright);
}

.p4strip {
  position: absolute;
  top: 20px;
  left: 46px;
  right: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* The plate is the contrast fix, not decoration. Do not remove it. */
.p4plate {
  margin: 0;
  padding: 6px 12px;
  background: var(--hero-plate);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hero-ink-dim);
}

.p4plate--ok { display: flex; align-items: center; gap: 8px; color: var(--ok-bright); }
.p4plate__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok-bright); }


/* `pointer-events: none` is load-bearing. Without it the lower third of the
   frame stops responding to hover and the first two panels become
   unreachable — the handoff names this as the single most likely way to get
   the section wrong. */
.p4over {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 34px;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.p4over__left { min-width: 0; }

.p4over__caption {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.p4over__title {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(46px, 4.4vw, 76px);
  line-height: 0.98;
  color: var(--hero-ink);
}

.p4metrics {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 300;
  color: var(--hero-ink-dim);
}

.p4metric__value { color: var(--accent-bright); }

.p4over__right { text-align: right; }

.p4over__price {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3vw, 50px);
  line-height: 1;
  color: var(--hero-ink);
}

.p4over__per {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-ink-dim);
}

.p4over__per .is-ok { color: var(--ok-bright); }

/* ------------------------------------------------------------- video --- */

.p4video { position: absolute; inset: 0; }
.p4video { display: none; }
.p4stage.is-video .p4video { display: block; }
.p4stage.is-video .p4stage__img { display: none; }

.p4video__poster { display: block; width: 100%; height: 100%; object-fit: cover; }

.p4video__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--video-scrim);
}

.p4play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--pin-bg);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.25s ease;
}

.p4play:hover,
.p4play:focus-visible { transform: scale(1.06); }

/* -------------------------------------------------------------- tabs --- */

.p4tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.p4tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 22px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.5);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p4tab:hover,
.p4tab:focus-visible { color: var(--accent); }
.p4tab.is-on { background: var(--accent); color: var(--on-accent); }
.p4tab.is-on:hover { color: var(--on-accent); }
.p4tab__count { opacity: 0.6; }

.p4tabs__note {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 15px 22px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* -------------------------------------------------------- thumbnails --- */

.p4thumbs { border-top: 1px solid var(--line-soft); }

/* Each still mode has its OWN strip, and every cell in it stays inside its
   mode. The reference put the eight photographs under both plan and street,
   with a click that threw the reader back into Photographs — a strip belonging
   to a different mode, under a tab promising two drawings it could not reach.
   In Photographs there is no strip at all: the accordion IS the strip. */
.p4thumbs { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p4hero__frame.is-plan .p4thumbs--plan,
.p4hero__frame.is-street .p4thumbs--street { display: grid; }

.p4thumb {
  position: relative;
  height: 132px;
  padding: 0;
  border: none;
  border-right: 1px solid var(--line-soft);
  background: rgba(var(--ink-rgb), 0.06);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.p4thumb--last { border-right: none; }
.p4thumb:hover,
.p4thumb:focus-visible,
.p4thumb.is-on { opacity: 1; }

.p4thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p4thumb__ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.p4thumb.is-on .p4thumb__ring { border-color: var(--accent); }


/* The chapter rail takes the thumbnail strip's place on the video tab, and it
   stays in the markup at rest: it is a table of contents for the flat. */
.p4chapters { display: none; border-top: 1px solid var(--line-soft); background: var(--panel); }
.p4hero__frame.is-video .p4chapters { display: block; }

.p4track { position: relative; height: 3px; margin: 0; background: rgba(var(--ink-rgb), 0.16); }

.p4track__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width 0.3s linear;
}

.p4tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 9px;
  background: rgba(var(--ink-rgb), 0.16);
}

.p4tick.is-reached { background: var(--accent); }
.p4tick--0 { left: 0; }
.p4tick--1 { left: 18%; }
.p4tick--2 { left: 44%; }
.p4tick--3 { left: 68%; }
.p4tick--4 { left: 88%; }

.p4chapters__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.p4chapters__list > li { display: flex; }

.p4chapter {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p4chapter--last { border-right: none; }
.p4chapter:hover,
.p4chapter:focus-visible { color: var(--accent); }
.p4chapter.is-on { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.p4chapter__time { opacity: 0.6; }

/* ------------------------------------------------------------- bento --- */

.p4bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 16px;
  margin-top: clamp(24px, 3.2vh, 34px);
}

/* Panels, not cards: hovering accents the border and nothing lifts. */
.p4tile {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.3s ease;
}

.p4bento:hover .p4tile:hover { border-color: var(--accent); }

.p4tile--file {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
}

.p4tile--checks {
  grid-column: span 2;
  padding: 0;
}

.p4tile--cash,
.p4tile--days {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px 22px;
}

/* Permanently accent — a constant, not a hover state. */
.p4tile--cash { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.p4bento:hover .p4tile--cash:hover { border-color: var(--accent); }

.p4tile__label {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4tile--cash .p4tile__label { color: var(--accent); }

.p4tile__figure {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.3;
  color: var(--ink);
}

.p4tile__figure.is-accent { color: var(--accent); }

.p4tile__note {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.66);
}

.p4para {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.76;
  color: rgba(var(--ink-rgb), 0.66);
  text-wrap: pretty;
}

/* Safe here: the tile's height comes from the grid, not from a stretched
   sibling, so the spacer has real space to distribute. */
.p4gap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.p4gap__figure { font-family: var(--serif); font-size: 26px; line-height: 2; color: var(--accent); }
.p4gap__text {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}

.p4checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p4check { display: flex; flex-direction: column; gap: 7px; padding: 16px 20px 18px; }
.p4check--col1 { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.p4check--row1 { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

.p4check__head { display: flex; align-items: center; gap: 10px; margin: 0; }

.p4check__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--good);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--good);
}

.p4check__name { font-size: 13px; color: var(--ink); }

.p4check__when {
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p4check__detail { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.66); }

/* --------------------------------------------------- section heading --- */

/* Two lines: the hairline that fills the row between label and note, and the
   underline beneath the whole head. */
.p4head {
  gap: 13px;
  letter-spacing: 0.22em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* This page's ladder puts the head note at 0.5; the site default is 0.48. */
.p4wrap .eyebrow__note,
.p4sims .eyebrow__note { color: rgba(var(--ink-rgb), 0.5); }

.p4head .eyebrow__line {
  flex: 1;
  width: auto;
  background: var(--line-soft);
}

/* Inside a bordered tile or panel the underline would double up, so those
   heads keep only the inline hairline. */
.p4tile .p4head,
.p4agent .p4head { padding-bottom: 0; border-bottom: none; }

/* No rule under this one: the panel it heads is already accent-bordered, and a
   second gold line doubled it up. */
.p4headlink {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
}

.p4headlink:hover,
.p4headlink:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.p4calc__head .eyebrow,
.p4sims__head .eyebrow { gap: 13px; letter-spacing: 0.22em; }

.p4calc__head .eyebrow__line,
.p4sims__head .eyebrow__line { flex: 0 0 30px; width: 30px; background: var(--accent); }

/* ----------------------------------------------------- rooms + specs --- */

.p4duo {
  display: grid;
  gap: clamp(22px, 2.4vw, 34px);
  margin-top: clamp(24px, 3.2vh, 34px);
}

.p4duo--rooms { grid-template-columns: 1.25fr minmax(0, 1fr); align-items: start; }
.p4duo--agent {
  grid-template-columns: minmax(0, 1fr) 1.1fr;
  align-items: stretch;
  margin-top: clamp(26px, 3.4vh, 38px);
}

.p4rooms__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 20px;
  margin-top: 18px;
}

.p4plan { position: relative; display: flex; flex-direction: column; margin: 0; }

.p4plan__sheet {
  position: relative;
  flex: 1;
  min-height: 300px;
  border: 1px solid var(--line);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
}

.p4room {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.p4room__tag,
.p4room__area {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  transition: color 0.25s ease;
}

/* Only the room name is set in capitals; the area reads as a figure. */
.p4room__tag { text-transform: uppercase; }

.p4room.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.p4room.is-on .p4room__tag,
.p4room.is-on .p4room__area { color: var(--accent); }

.p4room--0 { left: 6%; top: 8%; width: 40%; height: 40%; }
.p4room--1 { left: 48%; top: 8%; width: 30%; height: 30%; }
.p4room--2 { left: 6%; top: 52%; width: 34%; height: 38%; }
.p4room--3 { left: 42%; top: 52%; width: 28%; height: 38%; }
.p4room--4 { left: 72%; top: 52%; width: 22%; height: 38%; }
.p4room--5 { left: 80%; top: 8%; width: 14%; height: 20%; }
.p4room--6 { left: 80%; top: 31%; width: 14%; height: 15%; }

.p4plan__cap {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p4roomrows { margin: 0; padding: 0; list-style: none; }
.p4roomrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.p4roomrow--last { border-bottom: none; }

.p4roomrow__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 9px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p4roomrow__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}

.p4roomrow__dims { font-size: 12px; font-weight: 400; line-height: 1; color: var(--ink-faint); }
.p4roomrow__area { font-family: var(--serif); font-size: 15px; text-align: right; color: var(--ink); }

.p4roomrow__btn:hover,
.p4roomrow__btn:focus-visible,
.p4roomrow__btn.is-on { background: rgba(var(--accent-rgb), 0.1); }
.p4roomrow__btn:hover .p4roomrow__name,
.p4roomrow__btn:focus-visible .p4roomrow__name,
.p4roomrow__btn.is-on .p4roomrow__name,
.p4roomrow__btn:hover .p4roomrow__area,
.p4roomrow__btn:focus-visible .p4roomrow__area,
.p4roomrow__btn.is-on .p4roomrow__area { color: var(--accent); }

.p4specs__list { margin: 4px 0 0; }

.p4spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4spec--last { border-bottom: none; }

/* 1.4 rather than the inherited 1.6: the reference row is 38px tall, and at
   1.6 the eleven rows made the specification column 41px longer than the rooms
   column beside it. On the reference the two end within 19px of each other. */
.p4spec__label { font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(var(--ink-rgb), 0.5); }
.p4spec__value { margin: 0; font-size: 13px; line-height: 1.4; text-align: right; color: var(--ink); }
.p4spec__value.is-accent { color: var(--accent); }
.p4spec__value.is-muted { color: rgba(var(--ink-rgb), 0.66); }

/* ------------------------------------------------------- own or rent --- */

.p4calc {
  margin-top: clamp(26px, 3.4vh, 38px);
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.p4calc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line-soft);
}

/* The columns are divided by a rule, not by a gap — the panel reads as one
   sheet split in three, which is the comparison the section is making. */
.p4calc__body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.p4inputs {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px 24px 24px;
  border-right: 1px solid var(--line-soft);
}

.p4field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.p4field__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* The rate verdict is accent on the reference, not a faint aside. */
.p4field__note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.p4field__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-input);
}

.p4field__prefix { font-size: 13px; color: var(--ink-faint); }

.p4field__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
}

.p4field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The reference leaves the track to the browser and gets a white 3px rail on
   a dark panel. `0.16` is this handoff's own value for a bar track, so the
   rail is stated rather than left to the user agent. */
.p4range {
  width: 100%;
  height: 3px;
  margin-top: 12px;
  background: rgba(var(--ink-rgb), 0.16);
  accent-color: var(--accent);
}

.p4terms { min-width: 0; margin: 0; padding: 0; border: none; }

.p4terms__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-input);
}

.p4term {
  padding: 11px 0;
  border-right: 1px solid var(--line-input);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.p4term--last { border-right: none; }
.p4term:hover { color: var(--accent); }
.p4term__input:checked + .p4term { background: var(--accent); color: var(--on-accent); }
.p4term__input:focus-visible + .p4term { outline: 2px solid var(--accent); outline-offset: 2px; }

.p4note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-faint);
}

.p4note__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* The same shape twice in two weights of voice: the calculator's disclaimer
   sits back at 0.38, the booking promise reads at 0.5. */
.p4note--book { color: rgba(var(--ink-rgb), 0.5); }

.p4own,
.p4rent { display: flex; flex-direction: column; min-width: 0; padding: 22px 26px 24px; }
.p4own { border-right: 1px solid var(--line-soft); }

.p4col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }

.p4col__title {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4col__title.is-accent { color: var(--accent); }

.p4col__aside {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p4own__figure,
.p4rent__figure {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1.3;
  color: var(--accent);
}

.p4rent__figure { color: var(--ink); }

.p4bar {
  display: flex;
  height: 12px;
  margin: 16px 0 0;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4seg { display: block; height: 100%; }
.p4seg--1 { background: var(--accent); }
.p4seg--2 { background: rgba(var(--accent-rgb), 0.55); }
.p4seg--3 { background: rgba(var(--ink-rgb), 0.42); }
.p4seg--4 { background: rgba(var(--ink-rgb), 0.2); }

.p4breaks { margin: 14px 0 0; }

.p4break {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4break--last { border-bottom: none; }

.p4break__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.66);
}

.p4break__swatch { flex: 0 0 auto; width: 8px; height: 8px; }
.p4break__swatch--1 { background: var(--accent); }
.p4break__swatch--2 { background: rgba(var(--accent-rgb), 0.55); }
.p4break__swatch--3 { background: rgba(var(--ink-rgb), 0.42); }
.p4break__swatch--4 { background: rgba(var(--ink-rgb), 0.2); }

.p4break__value { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }

.p4own__interest {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* The figure is not part of the uppercase label beside it. */
.p4own__interest-value {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.p4rent__note {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.66);
}

.p4comps { margin: 16px 0 0; }

.p4comp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4comp--last { border-bottom: none; }
.p4comp__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p4comp__value { margin: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.p4comp__value.is-ok { color: var(--good); }
.p4comp__value.is-muted { color: rgba(var(--ink-rgb), 0.66); }

/* The sentence and the sign carry the answer; the colour only agrees. */
.p4verdict {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding: 12px 15px;
  border-left: 2px solid var(--good);
  background: var(--ok-soft);
}

.p4verdict.is-bad { border-left-color: var(--refused); background: rgba(var(--refused-rgb), 0.1); }
.p4verdict__text { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--ink); }
.p4verdict__value { font-family: var(--serif); font-size: 22px; color: var(--good); }
.p4verdict.is-bad .p4verdict__value { color: var(--refused); }

/* ------------------------------------- history · street · documents --- */

.p4trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.4vh, 38px);
  align-items: start;
}

.p4panel { min-width: 0; }

.p4hist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.04);
  list-style: none;
}

.p4hist__bar { flex: 1; min-width: 0; }
.p4hist__bar--h100 { height: 90%; }
.p4hist__bar--h96 { height: 86.4%; }
.p4hist__bar--h94 { height: 84.6%; }
.p4hist__bar.is-now { background: var(--accent); }
.p4hist__bar.is-mid { background: rgba(var(--ink-rgb), 0.3); }
.p4hist__bar.is-was { background: rgba(var(--ink-rgb), 0.16); }

.p4prows { margin: 14px 0 0; }

.p4prow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4prow--last { border-bottom: none; }
.p4prow__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p4prow__value { margin: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.p4prow__value.is-ok { color: var(--good); }
.p4prow__value.is-muted { color: rgba(var(--ink-rgb), 0.66); }

/* `z-index: 0` — Leaflet's panes run 400—1000 and would cover the modal. */
.p4map {
  position: relative;
  z-index: 0;
  height: 130px;
  margin-top: 18px;
  border: 1px solid var(--line);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.p4map__canvas { position: absolute; inset: 0; }
.p4map__plan { position: absolute; inset: 0; }
.p4map__plan[hidden] { display: none; }
.p4map__road { position: absolute; background: rgba(var(--ink-rgb), 0.22); }
.p4map__road--h { left: 0; top: 52%; width: 100%; height: 2px; }
.p4map__road--v { left: 38%; top: 0; width: 2px; height: 100%; }

.p4map__here {
  position: absolute;
  left: 46%;
  top: 48%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  background: var(--pin-bg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.p4walks { width: 100%; margin-top: 14px; border-collapse: collapse; }
.p4walks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.p4walk { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.p4walk--last { border-bottom: none; }

.p4walk > th,
.p4walk > td {
  padding: 9px 0;
  font-size: 12px;
  font-weight: 300;
  text-align: left;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4walk > td.p4walk__dist { width: 60px; text-align: right; font-weight: 400; color: rgba(var(--ink-rgb), 0.66); }

.p4docs { margin: 18px 0 0; padding: 0; list-style: none; }

.p4doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4doc--last { border-bottom: none; }

.p4doc__kind {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4doc__label { flex: 1; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }
.p4doc__size { font-size: 12px; line-height: 1; color: var(--ink-faint); }

/* A commitment, not a caption. */
.p4docs__foot {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* --------------------------------------------------- agent + viewing --- */

.p4agent,
.p4book {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.p4book { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.p4agent__id { display: flex; align-items: center; gap: 16px; margin-top: 18px; }

.p4agent__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
  object-fit: cover;
}

.p4agent__names { display: flex; flex-direction: column; gap: 4px; }
.p4agent__name { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); }
.p4agent__role {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p4stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.p4stat { padding-right: 14px; border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
.p4stat--last { padding-right: 0; border-right: none; }
.p4stat__value { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); }
.p4stat__value.is-accent { color: var(--accent); }

.p4stat__label {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.p4agent__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 20px;
}

.p4agent__acts .btn {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--line-input);
  color: var(--ink);
}

.p4agent__acts .btn:hover,
.p4agent__acts .btn:focus-visible { border-color: var(--accent); color: var(--accent); }

.p4book__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }

.p4book__left {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4book__title {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.14;
  color: var(--ink);
}

.p4book__title em { font-style: italic; color: var(--accent); }

.p4book__text {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.66);
}

.p4slots { margin: 18px 0 0; padding: 0; border: none; }
.p4slots__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.p4slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 4px;
  border: 1px solid var(--line-input);
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.p4slot__time { font-size: 12px; line-height: 1; }
.p4slot:hover { border-color: var(--accent); color: var(--accent); }
.p4slot__input:checked + .p4slot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.p4slot__input:focus-visible + .p4slot { outline: 2px solid var(--accent); outline-offset: 2px; }

.p4book__cta { margin: auto 0 0; padding: 20px 0 12px; }
.p4book__cta .btn { width: 100%; }

/* --------------------------------------------------------- comparables --- */

.p4sims { margin: clamp(28px, 3.8vh, 42px) var(--pad-hero) 40px; }

.p4sims__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.p4sims__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.p4sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease), border-color 0.3s ease;
}

.p4sim:hover,
.p4sim:focus-visible { transform: translateY(-4px); border-color: var(--accent); }
.p4sims__grid:hover .p4sim:not(:hover) { opacity: 0.62; }

.p4sim__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p4sim__status { color: var(--accent); }
.p4sim__media { position: relative; display: block; aspect-ratio: 3 / 2; height: auto; overflow: hidden; }
.p4sim__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p4sim__hatch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

.p4sim:hover .p4sim__hatch { opacity: 0.5; }
.p4sim__hatch--0 { background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 7px); }
.p4sim__hatch--1 { background: repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 8px); }
.p4sim__hatch--2 { background: radial-gradient(rgba(var(--ink-rgb), 0.5) 1px, transparent 1.6px); background-size: 13px 13px; }
.p4sim__hatch--3 { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.5) 0 1px, transparent 1px 6px); }

.p4sim__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 12px; }
.p4sim__title { font-family: var(--serif); font-size: 18px; line-height: 1.15; color: var(--ink); }
.p4sim__meta { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }

.p4sim__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p4sim__price { font-family: var(--serif); font-size: 18px; color: var(--ink); }
/* Set in capitals on the reference — `m²` becomes `M²`, deliberately: the
   line reads as a stamped figure, not as prose. */
.p4sim__per { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; }
.p4sim__per.is-higher { color: var(--refused); }
.p4sim__per.is-lower { color: var(--good); }

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .p4stage { height: 520px; }
  .p4over__title { font-size: 44px; }
  /* Six panels at 3.6 : 1 — eight would put the closed ones under 90px, and a
     90px sliver of a photograph is a texture, not a picture. Seven and eight
     belong to the lightbox at this width. */
  .p4pane:nth-child(n + 7) { display: none; }
  .p4pane.is-on,
  .p4pane:hover,
  .p4pane:focus-visible { flex: 3.6; }
  /* 4 → 2: the file and the checks each take the row, the small tiles pair. */
  .p4bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p4tile--file { grid-column: span 2; grid-row: span 2; }
  .p4tile--checks { grid-column: span 2; }
  .p4duo--rooms,
  .p4duo--agent { grid-template-columns: minmax(0, 1fr); }
  .p4agent__acts,
  .p4book__cta { margin-top: 0; }
  /* Inputs across the top, owning and renting side by side beneath. */
  .p4calc__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p4inputs {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .p4trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p4sims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The handoff's floor for touch. `hover: none` cannot carry this on its
     own — a narrow window on a laptop is still `hover: hover`. */
  .p4term {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .p4stage { height: 380px; }
  .p4strip { left: 18px; right: 18px; top: 44px; flex-direction: column; gap: 8px; }
  .p4mark { display: none; }
  .p4over { left: 18px; right: 18px; bottom: 20px; }

  /* An eight-panel accordion at 375px gives 46px slivers and needs a hover it
     will never get. Below 768 the row becomes a snap scroller: one frame at a
     time, swiped, with every panel at full strength. */
  .p4panes {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .p4pane,
  .p4pane.is-on,
  .p4pane:hover,
  .p4pane:focus-visible { flex: 0 0 78%; scroll-snap-align: center; }
  .p4pane:nth-child(n + 7) { display: block; }
  .p4pane__veil,
  .p4panes:hover .p4pane.is-on:not(:hover) .p4pane__veil { background: rgba(var(--scrim-rgb), 0); }
  .p4pane__num,
  .p4panes:hover .p4pane.is-on:not(:hover) .p4pane__num { color: rgba(var(--hero-ink-rgb), 0.55); }
  /* The price moves under the title rather than fighting it for the row. */
  .p4over { flex-direction: column; align-items: flex-start; gap: 14px; }
  .p4over__right { text-align: left; }
  .p4over__title { font-size: 32px; }
  .p4metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }

  .p4tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .p4tab { padding: 14px 18px; }
  .p4tab__count { display: none; }
  .p4tabs__note { display: none; }

  .p4thumbs { display: flex; overflow-x: auto; }
  .p4thumb { flex: 0 0 110px; height: 84px; }
  .p4thumb:nth-child(n + 7) { display: block; }

  .p4chapters__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p4chapter { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

  /* One column, natural heights — 200px rows make no sense stacked. */
  .p4bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .p4tile--file,
  .p4tile--checks { grid-column: auto; grid-row: auto; }
  .p4gap { margin-top: 20px; }
  .p4checks { grid-template-columns: minmax(0, 1fr); }
  .p4check--col1 { border-right: none; }
  .p4check { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .p4check:last-child { border-bottom: none; }

  .p4rooms__grid { grid-template-columns: minmax(0, 1fr); }
  .p4calc__body { grid-template-columns: minmax(0, 1fr); }
  .p4own { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .p4inputs,
  .p4own,
  .p4rent { padding: 20px 18px 22px; }
  .p4calc__head { padding: 14px 18px; }
  .p4own__figure,
  .p4rent__figure { font-size: 38px; }
  .p4trio { grid-template-columns: minmax(0, 1fr); }
  .p4slots__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p4sims__grid { grid-template-columns: minmax(0, 1fr); }
  .p4agent,
  .p4book { padding: 20px 18px 22px; }
  .p4agent__acts { grid-template-columns: minmax(0, 1fr); }

  .p4tab,
  .p4chapter,
  .p4term,
  .p4slot,
  .p4pane,
  .p4roomrow__btn { min-height: 44px; }
  .p4range { height: 22px; }
}

@media (hover: none) {
  .p4tab,
  .p4thumb,
  .p4chapter,
  .p4term,
  .p4slot,
  .p4pane,
  .p4roomrow__btn { min-height: 44px; }
  .p4range { height: 22px; }
  .p4sims__grid:hover .p4sim:not(:hover) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .p4sim,
  .p4play,
  .p4track__fill { transition: none; }
  .p4sim:hover,
  .p4sim:focus-visible,
  .p4play:hover,
  .p4play:focus-visible { transform: none; }
}

/* ==========================================================================
   67. New builds — a register for property that does not exist yet
   --------------------------------------------------------------------------
   Nine numbered sections that treat a new build as a project rather than a
   listing: who is building it, what stage it is at, which units are free, when
   it hands over and how the money is staged.

   TWO MARKETS, ONE PAGE
   ---------------------
   European off-plan and US new construction. The switch in §01 swaps the
   filter vocabulary, the stage chips and the result line; §07 keeps BOTH
   panels visible and does not filter, because the comparison between the two
   systems is the point.

   EVERY NUMBER HERE IS MEASURED OFF `_design/new-builds/new-builds.dc.html`,
   not copied from the README — the two disagree in three places and the
   drawing wins (see the notes at each one).

   THE INK LADDER
   --------------
   The handoff uses fifteen steps of `rgba(var(--ink-rgb), α)` and means every
   of them: 0.09 table rows · 0.12 soft rules · 0.14 section rules · 0.16 panel
   inner · 0.20 panel outer · 0.28 outline button · 0.35 sold · 0.40 micro
   labels · 0.42 field labels · 0.45 meta · 0.50 secondary · 0.55 body small ·
   0.60 body · 0.65 inactive chip · 0.72 badge · 0.80 outline button text.
   They are written literally as `rgba(var(--ink-rgb), α)` rather than snapped
   to `--ink-body` / `--ink-muted` / `--ink-faint`: the site tokens sit 0.02
   off the spec (§0g in project-history), and on a page this dense the drift
   collapses steps that the design keeps apart — 0.72 and 0.50 both landed on
   0.45 in the first build, and the schedule of areas lost its hierarchy.

   TYPE SIZES
   ----------
   The drawing runs 8/9/10/11px on labels. CLAUDE.md floors body text at 12px
   (Envato rejects smaller), so every size BELOW 12 is raised to 12 with the
   spec's tracking kept in `em`, and every size AT OR ABOVE 12 is reproduced
   exactly. The first build raised the 12px and 13px ones too, which is what
   flattened the unit table and the developer list.
   ========================================================================== */

.nbwrap { margin: 0 var(--pad-hero); }

/* The only rule on this page separates one section from the next: it sits on
   the section itself, 0.14, with the drawing's own 45px gap above and 30.6px
   padding below (`clamp(40px,5vh,62px)` / `clamp(28px,3.4vh,40px)` at 900).
   There is no rule inside a head — I had imported that from the property
   pages and it does not belong here. */
.nbsec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

/* §01 follows the breadcrumb band, which already ends in a rule. */
.nbsec--open {
  margin-top: 0;
  padding-top: clamp(26px, 3.2vh, 36px);
  border-top: none;
}

.nbsec--guide { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

/* The number and the heading share one baseline row, 14px apart. Whatever else
   the section carries is pushed to the right edge. */
.nbhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

/* §01 and §04 hang their controls off the bottom edge instead. */
.nbhead--ends { align-items: flex-end; justify-content: space-between; gap: 32px; }
.nbhead--ends .nbhead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.nbhead__right { margin-left: auto; }

.nblabel {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Two different things sit to the right of a head and they are not the same
   size, weight or case: the sheet code is a tracked code, the note is a
   sentence. The first build gave both the code treatment. */
.nbhead__sheet {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbhead__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(var(--ink-rgb), 0.5);
}

/* §08's note sits one step fainter than §02's — measured, not assumed. */
.nbhead__meta--faint { color: rgba(var(--ink-rgb), 0.45); }

/* No resting underline: the drawing does not draw one, and these are standalone
   tracked accent links, not links inside a paragraph. */
.nbhead__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nbhead__link:hover,
.nbhead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.nbresult { margin: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.55); }

.nbtitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

/* ------------------------------------------------------------ 01 search --- */

.nbmarket__wrap { display: flex; align-items: center; gap: 12px; }

.nbmarket__legend {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.nbmarkets { display: flex; margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.nbmarket {
  padding: 8px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nbmarket__input:checked + .nbmarket { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.nbmarket__input:focus-visible + .nbmarket { outline: 2px solid var(--accent); outline-offset: 2px; }
.nbmarket:hover { color: var(--accent); }

.nbbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 170px;
  margin-top: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.nbbar[hidden] { display: none; }

.nbfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}

.nbfield__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbfield__value { margin: 0; font-size: 13px; line-height: 1.2; color: var(--ink); }

.nbsearch {
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nbsearch:hover,
.nbsearch:focus-visible { background: var(--accent-hover); }

.nbchips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nbchips[hidden] { display: none; }
.nbchips--tight { margin-top: 0; }

.nbchips__label {
  margin: 0 6px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbchip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.65);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nbchip--beds { letter-spacing: 0.12em; }
.nbchips--tight { gap: 8px; }

.nbchip:hover,
.nbchip:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.nbchip.is-on {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.nbchip__count { font-size: 12px; opacity: 0.6; }

/* ---------------------------------------------------------- 02 featured --- */

.nbfeat {
  display: grid;
  grid-template-columns: 1.35fr minmax(0, 1fr);
  min-height: 462px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

/* The sheet cell is padded 22px and the crop marks are inset 14px from ITS
   corners, so they frame the whole cell — strip included — not the image. */
.nbsheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 460px of content + 22px padding top and bottom. */
  min-height: 504px;
  margin: 0;
  padding: 22px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.nbsheet__img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; }

/* Four corner brackets, inset 14px, on the accent at 0.6. */
.nbcrop { position: absolute; z-index: 1; width: 16px; height: 16px; }
.nbcrop--tl {
  top: 14px;
  left: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.nbcrop--tr {
  top: 14px;
  right: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}
.nbcrop--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.nbcrop--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}

.nbstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* The plan sheet's strip carries no rule and sits 12px under the drawing —
   measured, and different from §02 on purpose. */
.nbstrip--plan { margin-top: 12px; padding-top: 0; border-top: none; letter-spacing: 0.2em; }

.nbstrip__tag { color: var(--accent); }

.nbfile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 32px;
}

.nbfile__dev {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbfile__name {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.02;
  color: var(--ink);
}

.nbfile__body {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.6);
}

/* Rules on the top and left of the grid, then right and bottom on every cell:
   that produces exactly one hairline per edge with no doubling. */
.nbstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.nbstat {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.nbstat__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbstat__value {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}

/* The label and the count are one tracked row, not a sentence: dropping the
   `Availability` side left the bar unexplained. */
.nbavail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbtrack { position: relative; height: 5px; margin: 9px 0 0; background: rgba(var(--ink-rgb), 0.12); }
.nbtrack__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.nbtrack__fill--w82 { width: 82%; }

.nbfile__acts { display: flex; gap: 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 26px; }

.nbbtn {
  padding: 13px 24px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
}

.nbbtn--solid { color: var(--bg); font-weight: 600; }
.nbbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.8);
  font-weight: 500;
}

/* §06's reserve button is a weight lighter than §02's — measured. */
.nbbtn--quiet { font-weight: 400; }

.nbbtn--ghost:hover,
.nbbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------- 03 register --- */

/* 1px gaps over the border colour: the cards share one hairline rather than
   doubling it where they meet.

   FIVE across, not the reference's three — owner's call, 9 Aug 2026. At 1440
   that puts a card at 268px against the drawing's 448px, so the media band and
   the type stay as drawn and only the column count changes. */
.nbcards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.nbcard { min-width: 0; }

.nbcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  text-decoration: none;
  transition: background 0.15s ease;
}

.nbcard__link:hover,
.nbcard__link:focus-visible { background: var(--panel-hover); }

/* 210px, not the drawing's 172 — owner's call, 9 Aug 2026, together with the
   move to five cards across. At 268px wide a 172px band read as a letterbox;
   210 puts the slot back near 5:4. */
.nbcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.nbcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Flush to the corner, as the handoff draws them. */
.nbcard__badges { position: absolute; top: 0; left: 0; display: flex; }

.nbbadge {
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nbbadge--eu { background: rgba(var(--accent-rgb), 0.92); color: var(--bg); }
.nbbadge--us { background: rgba(var(--good-rgb), 0.9); color: var(--bg); }
.nbbadge--region {
  padding: 6px 10px;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.72);
}

/* No `gap` on the body: every child carries the drawing's own margin, and they
   are all different (5 / 16 / 8 / 18). */
.nbcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }

.nbcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nbcard__name { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); }

.nbcard__sheet {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbcard__where { margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

/* Both halves of this row are the same tracked micro label. The colour of the
   progress belongs to the bar under it, not to the words. */
.nbcard__stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbcard__track { display: block; height: 3px; margin-top: 8px; background: rgba(var(--ink-rgb), 0.12); }
.nbcard__fill { display: block; height: 100%; background: var(--accent); }
.nbcard__fill.is-done { background: var(--good); }
.nbcard__fill--w5 { width: 5%; }
.nbcard__fill--w8 { width: 8%; }
.nbcard__fill--w41 { width: 41%; }
.nbcard__fill--w62 { width: 62%; }
.nbcard__fill--w74 { width: 74%; }
.nbcard__fill--w88 { width: 88%; }
.nbcard__fill--w100 { width: 100%; }

.nbcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.nbcard__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbcard__amount { font-family: var(--serif); font-size: 21px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink); }
.nbcard__avail { font-size: 12px; color: rgba(var(--ink-rgb), 0.55); }
.nbcard__avail.is-low { color: var(--warn); }

/* ---------------------------------------------------------- 04 unit mix --- */

.nbpanel {
  margin-top: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.nbscroll { overflow-x: auto; }

/* A real table — this is data with columns (CLAUDE.md §Semantics). The widths
   come from the drawing's own grid template, declared once on `<col>` with
   `table-layout: fixed` so the header and the rows cannot drift apart. */
.nbunits { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; }

/* 90px 1fr 90px 110px 110px 1fr 130px — the two unsized columns split what is
   left, which is what `1fr 1fr` does in the reference grid. */
.nbcol--unit { width: 90px; }
.nbcol--floor { width: 90px; }
.nbcol--area { width: 110px; }
.nbcol--price { width: 130px; }

/* The rule belongs to the row. Hung on each `th` it draws seven segments that
   meet at the column edges — one hairline in the picture, seven in the count. */
.nbunits thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.nbunits thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.nbunits thead th.nbunits__pricehead { text-align: right; }

.nbunit { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.nbunit:hover { background: rgba(var(--accent-rgb), 0.06); }
.nbunit[hidden] { display: none; }

/* 400, not 300: the README says 300 for these cells and the drawing says 400,
   and the drawing wins. At 12px the light weight went thin enough that the
   figures stopped reading as data. */
.nbunit > th,
.nbunit > td {
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

/* `.nbunit > td` is (0,1,1) and beat the plain class selectors, so the code and
   the price silently lost their own type — the same specificity rake as
   `.crow td` on compact-rows (§10 п.10). Both are qualified. */
.nbunit > th.nbunit__code { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--accent); }
.nbunit > td.nbunit__type { font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--ink); }
.nbunit > td.nbunit__price { text-align: right; font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.nbunit > td.nbunit__aspect { display: flex; align-items: center; gap: 10px; }

/* A sold unit stays on the list — the mix is the information, and a table that
   silently drops what has gone tells you less. */
.nbunit--sold { opacity: 0.45; }
.nbunit--sold > td.nbunit__price { color: rgba(var(--ink-rgb), 0.4); }

.nbpill {
  padding: 3px 9px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nbpill--avail { color: var(--accent); }
.nbpill--res { color: var(--warn); }
.nbpill--sold { color: rgba(var(--ink-rgb), 0.35); }

/* No rule above it: the last body row already carries its own 0.09. */
.nbunits__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbunits__foot .nbhead__link { letter-spacing: 0.16em; }

/* --------------------------------------------------------- 05 programme --- */

/* The rule is drawn where the dots actually are. With the 12px floor the date
   is a pixel taller than the drawing's 8px, so the dot centre lands at 30.5
   rather than 33 — moving the rule to meet it keeps the dots ON the line,
   which is the whole geometry of the section. */
.nbrun { position: relative; margin-top: 26px; }

.nbrun__rule { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(var(--ink-rgb), 0.18); }
.nbrun__done { position: absolute; left: 0; top: 30px; height: 1px; background: var(--accent); }
.nbrun__done--w52 { width: 52%; }

.nbphases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nbphase { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-right: 24px; }

.nbphase__date {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
  transition: color 0.15s ease;
}

.nbphase:hover .nbphase__date,
.nbphase.is-hot .nbphase__date { color: var(--accent); }

.nbphase__dot {
  display: block;
  width: 11px;
  height: 11px;
  margin: 13px 0 0 -1px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: var(--bg);
}

/* Filled for phases already done, hollow with a gold ring for the one running
   now, hollow and grey ahead. Which is which is data, not hover. */
.nbphase--done .nbphase__dot { border-color: var(--accent); background: var(--accent); }
.nbphase--now .nbphase__dot { border-color: var(--accent); }

.nbphase__title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.nbphase.is-ahead .nbphase__title { color: rgba(var(--ink-rgb), 0.55); }

.nbphase__note {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.5);
}

.nbphase__status {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nbphase__status--done { color: var(--good); }
.nbphase__status--now { color: var(--accent); }
.nbphase__status--next { color: rgba(var(--ink-rgb), 0.35); }

/* ---------------------------------------------------------- 06 drawings --- */

/* `box-sizing: border-box` on the grid and on all three children. The handoff
   records this as a real defect in its own first build: without it the padded
   children overflow and the panel border cuts the footnote in half. */
.nbplans,
.nbplans__list,
.nbdraw,
.nbareas { box-sizing: border-box; }

.nbplans {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  min-height: 442px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.nbplans__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
}

.nbplans__buttons { display: flex; flex-direction: column; }

/* Every button keeps its bottom rule, the last one included — measured, four
   rules for four buttons. The general "no line on the last child" habit is
   wrong here. */
.nbplan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nbplan:hover,
.nbplan:focus-visible { background: rgba(var(--accent-rgb), 0.06); }
.nbplan.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.nbplan__label { font-size: 14px; line-height: 1.35; color: var(--ink); }

.nbplan__meta {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbplans__foot {
  margin: auto 0 0;
  padding: 18px 20px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbdraw {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  overflow: hidden;
}

.nbdraw__img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: contain; }

.nbareas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
}

.nbareas__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.nbareas__set[hidden] { display: none; }
.nbrooms { margin: 16px 0 0; }

/* Name and area are two different steps of the ladder — 0.72 against 0.50.
   The first build had them the other way round, and the column read as a list
   of numbers with faint captions. */
.nbroom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.72);
}

.nbroom dd { margin: 0; color: rgba(var(--ink-rgb), 0.5); }

.nbareas__from {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.nbareas__price { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* 22px, not `margin-top: auto`. The handoff calls this out by name: pinned to
   the bottom it leaves a dead gap under the price. */
.nbareas__cta { margin: 22px 0 0; }
.nbareas__cta .nbbtn { display: flex; width: 100%; padding: 13px 20px; }

/* ------------------------------------------------------------- 07 terms --- */

.nbterms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.nbterm { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px; background: var(--panel-solid); }

/* A sentence, not a label: 13px, sentence case. */
.nbterm__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--ink);
}

/* A filled pill, not an outlined one. */
.nbtag {
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nbtag--eu { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.nbtag--us { background: rgba(var(--good-rgb), 0.14); color: var(--good-soft); }

.nbpay {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.nbpay__pct { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--accent); }

.nbpay__stage {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

.nbpay__note { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

/* Manrope 12px, not a serif display figure: these are the instalments, and the
   percentage beside them is what the row is about. */
.nbpay__amount { margin: 0; text-align: right; font-size: 12px; line-height: 1.35; color: rgba(var(--ink-rgb), 0.55); }

.nbincs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--ink-rgb), 0.12);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
}

/* 96px of content + 18px padding top and bottom. */
.nbinc { display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 18px; background: var(--panel-inner); }
.nbinc__value { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); }
.nbinc__label { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.55); }

.nbterm__foot {
  margin: 16px 0 0;
  padding-top: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.nbterm__foot .nbhead__link { font-weight: 400; }

/* -------------------------------------------------------- 08 developers --- */

.nbdevs {
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
  list-style: none;
}

.nbdev {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 150px 130px 130px 120px;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  transition: background 0.15s ease;
}

.nbdev:hover { background: rgba(var(--accent-rgb), 0.06); }

.nbdev__num { font-family: var(--serif); font-size: 15px; color: rgba(var(--ink-rgb), 0.35); }
.nbdev__who { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--ink); }

.nbdev__lic {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.nbdev__cell { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.6); }

.nbdev__ontime {
  text-align: right;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--good);
}

.nbdev__ontime.is-low { color: var(--warn); }

/* ------------------------------------------------------------- 09 guide --- */

.nbguide {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
}

.nbguide__lead { min-width: 0; }

.nbguide__title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.nbguide__intro { margin: 12px 0 18px; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }

.nbchecks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.14);
  list-style: none;
}

.nbcheck {
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* 128px of content + 22px padding top and bottom. */
  min-height: 172px;
  min-width: 0;
  padding: 22px 20px;
  background: var(--panel-solid);
}

/* `01 · EU` is one line in the tag's own colour — not a number plus a pill. */
.nbcheck__top {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nbcheck__top--eu { color: var(--accent); }
.nbcheck__top--us { color: var(--good-soft); }
.nbcheck__top--both { color: rgba(var(--ink-rgb), 0.4); }

.nbcheck__title { margin: 0; font-size: 14px; font-weight: 400; color: var(--ink); }
.nbcheck__body { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .nbhead--ends { align-items: flex-start; flex-direction: column; gap: 18px; }
  .nbbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nbfield:nth-child(even) { border-right: none; }
  .nbfield { border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .nbsearch { grid-column: 1 / -1; padding: 15px 0; }
  .nbfeat { grid-template-columns: minmax(0, 1fr); }
  .nbsheet { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); min-height: 320px; }
  .nbcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nbphases { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Stacked, the rule runs down the left edge instead of across the top. */
  .nbrun__rule { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .nbrun__done { left: 5px; top: 0; width: 1px; }
  .nbrun__done--w52 { height: 52%; }
  .nbphase { position: relative; padding: 0 0 26px 30px; }
  .nbphase__dot { position: absolute; left: 0; margin: 0; }
  .nbphase__date { margin-bottom: 8px; }
  .nbplans { grid-template-columns: minmax(0, 1fr); }
  .nbplans__list { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .nbplans__buttons { flex-direction: row; overflow-x: auto; }
  .nbplan { flex: 0 0 210px; border-left: none; border-bottom: 2px solid transparent; }
  .nbplan.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
  .nbdraw { border-right: none; }
  .nbterms { grid-template-columns: minmax(0, 1fr); }
  .nbdev { grid-template-columns: 46px minmax(0, 1fr) 120px; row-gap: 8px; }
  .nbdev__cell:nth-of-type(2),
  .nbdev__cell:nth-of-type(3) { grid-column: 2 / 3; }
  .nbguide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nbchecks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 959px) {
  .nbcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .nbhead,
  .nbhead--ends { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nbbar { grid-template-columns: minmax(0, 1fr); }
  .nbfield { border-right: none; }
  .nbchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .nbchip { flex: 0 0 auto; }
  .nbtitle { font-size: 24px; }
  .nbfile__name { font-size: 30px; }
  .nbfile { padding: 22px 18px 24px; }
  .nbfile__acts .nbbtn { flex: 1 0 100%; }
  .nbcards { grid-template-columns: minmax(0, 1fr); }
  .nbcard__media { height: 240px; }
  .nbterm { padding: 20px 18px 22px; }
  .nbincs { grid-template-columns: minmax(0, 1fr); }
  .nbchecks { grid-template-columns: minmax(0, 1fr); }
  .nbguide__title { font-size: 26px; }
  .nbareas,
  .nbdraw { padding: 18px; }

  /* Six columns cannot survive 375px: each developer becomes name plus
     on-time on the first line, the rest a wrapped label/value list. The
     on-time cell has to be placed explicitly — left to auto-placement it fell
     past the forced full-width cells and its track collapsed to zero. */
  .nbdev { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .nbdev__ontime { grid-column: 3; grid-row: 1; }
  .nbdev__cell { grid-column: 2 / -1; }

  .nbmarket,
  .nbchip,
  .nbplan,
  .nbsearch { min-height: 44px; }
  .nbchip { padding: 11px 15px; }
}

@media (hover: none) {
  .nbmarket,
  .nbchip,
  .nbplan,
  .nbsearch { min-height: 44px; }
  .nbchip { padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nbcard__link,
  .nbunit,
  .nbdev,
  .nbchip,
  .nbplan { transition: none; }
}

/* ==========================================================================
   68. Coming soon — the queue, not a listing
   --------------------------------------------------------------------------
   Every file here has passed all four checks and is NOT yet published: the
   address, the plan set and the agent's line are withheld until the owner's
   release date. Releases go out in one batch every Thursday at 09:00, and a
   watchlisted file unlocks 24 hours early.

   THAT RULE IS THE PAGE'S SPINE
   -----------------------------
   The countdown, the calendar rail and §01's batch number must all name the
   SAME Thursday, and all three are derived from `now` — never written down.
   The handoff records three review rounds lost to a section contradicting it.
   Non-Thursdays carry no releases and are not clickable. Any "N shown below"
   is the array length, never a typed number.

   THE WITHHELD HATCH is this page's signature: a diagonal barber stripe over
   every unreleased image, heavier on §02 than on the cards. It is a separate
   layer, not baked into the artwork, because removing it when a file publishes
   is the visual payoff of the whole page.

   TYPE AND INK follow the same two rules as section 67: sizes below 12px are
   raised to the 12px floor with the spec's tracking kept in `em`, sizes at or
   above 12px are reproduced exactly, and the ink ladder is written literally as
   `rgba(var(--ink-rgb), α)` rather than snapped to the site's four tokens — the
   handoff uses twenty steps and the tokens would collapse them.

   `min-height` in the reference is a CONTENT box. Ours are border-box, so the
   padding is added in: 470 → 514 (§02 sheet), 190 → 236 (§05 cell).
   ========================================================================== */

.cswrap { margin: 0 var(--pad-hero); }

.cssec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

/* §01 follows the breadcrumb band, which already ends in a rule. */
.cssec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }

/* The queue grid is the body of §03's calendar selection, not a section of its
   own — no label, no rule, and a shorter gap above. */
.cssec--queue {
  margin-top: clamp(34px, 4vh, 44px);
  padding-top: 0;
  border-top: none;
}

.cssec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.cshead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cshead--ends { align-items: flex-end; justify-content: space-between; gap: 32px; }
.cshead--ends .cshead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cshead__right { margin-left: auto; }

.cslabel {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.cshead__sheet {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cshead__meta { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

.cshead__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cshead__link:hover,
.cshead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.cstitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

/* Buttons. The page has one solid and one outline, both at the same metrics. */
.csbtn { padding: 13px 24px; border-radius: 0; font-size: 12px; letter-spacing: 0.2em; }
.csbtn--solid { color: var(--bg); font-weight: 600; }
.csbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.8);
  font-weight: 500;
}
.csbtn--ghost:hover,
.csbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------ 01 next release window --- */

.cswindow {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.cswindow__main {
  position: relative;
  min-width: 0;
  padding: 30px 34px 28px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  overflow: hidden;
}

.csgrid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.cswindow__body { position: relative; }

.cswindow__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The same pulse as the utility-bar dot: this page is a clock, and the dot is
   the only thing on it that says the clock is running. */
.csdot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: de-glow 1.8s ease-in-out infinite alternate;
}

.cstarget {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Nothing here animates. The digits re-render each second and that is all —
   a flip or a pulse turns a deadline into a gimmick. */
.csclock { display: flex; align-items: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.csunit { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 78px; }

.csunit__value {
  font-family: var(--serif);
  font-size: 58px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Seconds are the only accent digit — the unit that is actually moving. */
.csunit--now .csunit__value { color: var(--accent); }

.csunit__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csclock__sep {
  position: relative;
  top: -14px;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.22);
}

.cswindow__blurb {
  max-width: 480px;
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.6);
}

.cswindow__acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }

.csstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }

.csstat {
  min-width: 0;
  padding: 26px 26px 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}

.csstat__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csstat__value { margin: 10px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }

/* Grey at zero, accent the moment the first file is watched. The change of
   colour IS the feedback that the star did something. */
.csstat__value--live { color: var(--accent); }
.csstat__value--zero { color: rgba(var(--ink-rgb), 0.35); }

.csstat__note { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------------- 02 first out --- */

.csfeat {
  display: grid;
  grid-template-columns: 1.4fr minmax(0, 1fr);
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.cssheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 470px of drawing plus its 22px padding top and bottom. */
  min-height: 514px;
  margin: 0;
  padding: 22px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.cscrop { position: absolute; z-index: 1; width: 16px; height: 16px; }
.cscrop--tl {
  top: 14px;
  left: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.cscrop--tr {
  top: 14px;
  right: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}
.cscrop--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.cscrop--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}

.cssheet__frame { position: relative; flex: 1; min-height: 426px; overflow: hidden; }
.cssheet__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* The signature. One layer over the artwork, removed when a file publishes —
   never baked into the image, or the payoff has nowhere to happen. */
.cshatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg,
    rgba(var(--scrim-rgb), 0.55) 0, rgba(var(--scrim-rgb), 0.55) 7px,
    rgba(var(--scrim-rgb), 0.2) 7px, rgba(var(--scrim-rgb), 0.2) 14px);
}

.cshatch--card {
  background: repeating-linear-gradient(135deg,
    rgba(var(--scrim-rgb), 0.5) 0, rgba(var(--scrim-rgb), 0.5) 6px,
    rgba(var(--scrim-rgb), 0.14) 6px, rgba(var(--scrim-rgb), 0.14) 12px);
}

/* Bottom-left, not centred: the image component parks its own placeholder in
   the middle of the frame and the two collide there. The handoff calls this
   out by name and the acceptance list checks it. */
.cswithheld {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cswithheld__badge {
  padding: 7px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--scrim-rgb), 0.9);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.cswithheld__sub {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.csstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.csstrip__tag { color: var(--accent); }

.csfile { display: flex; flex-direction: column; min-width: 0; padding: 30px 32px; }

.csfile__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

.cstag {
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cstag--eu { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.cstag--us { background: rgba(var(--good-rgb), 0.14); color: var(--good-soft); }

.csfile__kicker {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.csfile__name {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.04;
  color: var(--ink);
}

.csfile__blurb { margin: 10px 0 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.6); }

.csfstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.csfstat {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.csfstat__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csfstat__value { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); }

.cschecks { margin: 22px 0 0; }

.cschecks__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cschecks__list { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }

.cscheck { display: flex; align-items: center; gap: 11px; }

.cscheck__box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  color: transparent;
}

.cscheck--done .cscheck__box { border-color: var(--accent); color: var(--accent); }

.cscheck__label { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.45); }
.cscheck--done .cscheck__label { color: rgba(var(--ink-rgb), 0.78); }

.cscheck__meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.35);
}

.csfile__acts { display: flex; gap: 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 24px; }

/* A real toggle, not a link: watched inverts the fill and relabels, and the
   §01 counter and the §06 note read the same state. */
.cswatch {
  border: 1px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cswatch[aria-pressed="true"] {
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

/* ----------------------------------------------------- 03 release calendar --- */

.cscal {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.csday {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 16px 11px 18px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
  /* The selection marker is a 2px rule on the top edge; a transparent one on
     every other cell keeps all fourteen the same height. */
  border-top: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Releases run on Thursdays only, so the other twelve cells are not controls.
   Rendering them as buttons that do nothing would be worse than not offering
   them at all — they are spans, with no handler and no pointer. */
.csday--empty { cursor: default; }

.csday.is-on { border-top-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.csday__wd {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csday.is-on .csday__wd { color: var(--accent); }

.csday__num { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }
.csday--empty .csday__num { color: rgba(var(--ink-rgb), 0.35); }

.csday__n {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.csday.is-on .csday__n { color: var(--accent); }
.csday--empty .csday__n { color: rgba(var(--ink-rgb), 0.3); }

/* ------------------------------------------------------------- 04 queue --- */

.csqueue {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.csqcard { display: flex; flex-direction: column; min-width: 0; background: var(--panel-solid); }

.csqcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.csqcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cspill {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.72);
}

/* Gold only for the files going out in the window the countdown is counting
   to. Everything else is a plain dark pill, or the batch stops meaning
   anything. */
.cspill--soon { background: rgba(var(--accent-rgb), 0.92); color: var(--bg); }

.csstar {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  background: rgba(var(--scrim-rgb), 0.82);
  font-size: 13px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.csstar:hover,
.csstar:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); }
.csstar[aria-pressed="true"] { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); }

.csqcard__sheet {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}

.csqcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 17px 18px; }

.csqcard__name { font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }
.csqcard__where { margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

/* Four bars, one per check, and the count spelled out beside them. The bars
   alone would be decoration; the sentence is what makes them readable. */
.csmeter { display: flex; align-items: center; gap: 7px; margin-top: 15px; }
.csmeter__bar { width: 16px; height: 3px; background: rgba(var(--ink-rgb), 0.16); }
.csmeter__bar.is-on { background: var(--accent); }

.csmeter__label {
  margin-left: 6px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.csqcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.csqcard__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csqcard__amount { font-family: var(--serif); font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink); }
.csqcard__due { font-size: 12px; line-height: 1.2; text-align: right; color: rgba(var(--ink-rgb), 0.5); }
.csqcard__due.is-soon { color: var(--accent); }

/* ---------------------------------------------------------- 05 pipeline --- */

.cspipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.csstage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* 190px of content plus 22px and 24px of padding. */
  min-height: 236px;
  padding: 22px 22px 24px;
  background: var(--panel-solid);
  transition: background 0.15s ease;
}

/* The drawing opens with one stage already lit (`csStage: 2`), so the row is
   never a flat wall of five — and leaving the row returns to it rather than to
   nothing, the same rule as the timeline in section 67. */
.csstage:hover,
.csstage.is-hot { background: rgba(var(--accent-rgb), 0.06); }

.csstage__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }

.csstage__num {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.15s ease;
}

.csstage__count { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); transition: color 0.15s ease; }
.csstage:hover .csstage__num,
.csstage:hover .csstage__count,
.csstage.is-hot .csstage__num,
.csstage.is-hot .csstage__count { color: var(--accent); }

.csstage__title { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.1; color: var(--ink); }
.csstage__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.csstage__dwell {
  margin: auto 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

/* ------------------------------------------------------ 06 early access --- */

.csearly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 20px;
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.csform { display: flex; flex-direction: column; min-width: 0; padding: 30px 32px; background: var(--panel-solid); }

.csform__title {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.06;
  color: var(--ink);
}

.csform__body { margin: 12px 0 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.58); }

.csform__legend {
  padding: 0;
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.csmarkets { margin: 0; padding: 0; border: none; }
.cschips { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; border: none; }

/* Real checkboxes wearing a chip. State belongs to the input, so the selection
   survives a dead script and reads correctly to assistive tech — the same
   choice as the district chips on the agent-signup page. */
.cschip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cschip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cschip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.cschip__input:checked + .cschip {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.cschip__input:focus-visible + .cschip { outline: 2px solid var(--accent); outline-offset: 2px; }

.csfields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.14);
}

.csfield { min-width: 0; padding: 14px 16px; background: var(--panel-inner); }

.csfield__label {
  display: block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* Chrome-free by design: the value sits exactly where the static text sat in
   the drawing, so the field reads as part of the sheet rather than a widget. */
.csfield__input {
  width: 100%;
  margin-top: 9px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  color: rgba(var(--ink-rgb), 0.85);
}

.csfield__input::placeholder { color: rgba(var(--ink-rgb), 0.85); opacity: 1; }
.csfield__input:focus { outline: none; color: var(--ink); }
.csfield:focus-within { background: rgba(var(--accent-rgb), 0.06); }

.csform__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 20px 0 0; }
.csform__submit .csbtn { padding: 14px 26px; }
.csnote { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.4; color: rgba(var(--ink-rgb), 0.42); }

.csrules {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 32px;
  background: var(--panel-solid);
  overflow: hidden;
}

.csrules__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.csrules__inner { position: relative; }

.csrules__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.csrules__list { margin: 8px 0 0; padding: 0; list-style: none; }

.csrule {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.csrule__tag {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.csrule__tag--eu { color: var(--accent); }
.csrule__tag--us { color: var(--good-soft); }
.csrule__tag--both { color: rgba(var(--ink-rgb), 0.4); }

.csrule__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.csrule__title { font-size: 13px; line-height: 1.3; color: var(--ink); }
.csrule__note { font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.csrules__link { margin: 18px 0 0; }

/* ------------------------------------------------------ 07 left the queue --- */

.cspanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.csscroll { overflow-x: auto; }

.cspub { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; }

.cscol--sheet { width: 100px; }
.cscol--pub { width: 120px; }
.cscol--queued { width: 130px; }
.cscol--week { width: 140px; }
.cscol--status { width: 140px; }

.cspub thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.cspub thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.cspub thead th.cspub__statushead { text-align: right; }

.cspubrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.cspubrow:hover { background: rgba(var(--accent-rgb), 0.06); }

.cspubrow > th,
.cspubrow > td {
  padding: 15px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

/* `.cspubrow > td` is (0,1,1) and out-specifies a bare class — the same rake
   that flattened the unit table in section 67 and `compact-rows` before it. */
.cspubrow > th.cspub__sheet { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--accent); }
.cspubrow > td.cspub__title { font-size: 13px; font-weight: 300; color: var(--ink); }
.cspubrow > td.cspub__status { text-align: right; }

.csstatus {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.csstatus--offer { color: var(--accent); }
.csstatus--viewing { color: rgba(var(--ink-rgb), 0.6); }
.csstatus--sold { color: var(--good); }
.csstatus--withdrawn { color: var(--warn); }

.cspub__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .cshead--ends { align-items: flex-start; flex-direction: column; gap: 18px; }
  .cswindow { grid-template-columns: minmax(0, 1fr); }
  .cswindow__main { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .csfeat { grid-template-columns: minmax(0, 1fr); }
  .cssheet { min-height: 380px; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .cssheet__frame { min-height: 300px; }
  /* Two weeks, one row each. */
  .cscal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .csday:nth-child(7n) { border-right: none; }
  .csday:nth-child(-n+7) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .csqueue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cspipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csearly { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .cshead,
  .cshead--ends { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cstitle { font-size: 24px; }
  .cswindow__main { padding: 22px 18px 24px; }
  .csunit__value { font-size: 40px; }
  .csunit { min-width: 0; flex: 1 0 40%; }
  .csclock { gap: 8px; }
  .csclock__sep { display: none; }
  .csstats { grid-template-columns: minmax(0, 1fr); }
  .csstat { border-right: none; }
  .cswindow__acts .csbtn { flex: 1 0 100%; }
  .csfile { padding: 22px 18px 24px; }
  .csfile__name { font-size: 30px; }
  .csfile__acts .csbtn { flex: 1 0 100%; }
  .cssheet { padding: 16px; }
  .cswithheld { left: 16px; bottom: 16px; }
  /* A scroller, not a squeeze: fourteen cells never fit 375px legibly. */
  .cscal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .csday { flex: 0 0 84px; min-width: 84px; scroll-snap-align: start; border-bottom: none; }
  .csqueue { grid-template-columns: minmax(0, 1fr); }
  .csqcard__media { height: 220px; }
  .csstar { width: 44px; height: 44px; }
  .cspipe { grid-template-columns: minmax(0, 1fr); }
  .csstage { min-height: 0; }
  .csform,
  .csrules { padding: 22px 18px 24px; }
  .csfields { grid-template-columns: minmax(0, 1fr); }
  .csform__title { font-size: 26px; }
  .csform__submit .csbtn { flex: 1 0 100%; }
  /* Touch targets clear 44px on the narrow layout, chips included — padding
     alone left them at 36. */
  .cschip { padding: 11px 14px; min-height: 44px; }
  .csbtn,
  .csday { min-height: 44px; }
}

@media (hover: none) {
  .cschip,
  .csday,
  .csbtn { min-height: 44px; }
  .csstar { width: 44px; height: 44px; }
  .cschip { padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .csdot { animation: none; }
  .csqcard,
  .csstage,
  .cspubrow,
  .cschip,
  .csstar,
  .csday { transition: none; }
}

/* ==========================================================================
   69. Recently sold — what buyers paid, not what sellers wanted
   --------------------------------------------------------------------------
   Every other property page on this site shows asking prices. This one shows
   signed ones, and its editorial spine is the GAP between the two: how far the
   number had to travel, how long that took, and where it travels furthest.

   THREE RULES THE DESIGN IS BUILT ON
   ----------------------------------
   1. The signed price is always the hero. Asking prices are struck through,
      dimmed, or drawn as the lighter bar — never given equal weight.
   2. A negative gap is normal, not an error. −1.8% is healthy; only −8% or
      worse takes `--warn`. Painting every minus red would say the opposite of
      what the page means.
   3. The same deed appears in §02 as part of a district median, in §03 as a
      row and in §04 as the story. The handoff lost a review round to a
      formatter that printed `€1 085` in one place and `€1 085 000` in another,
      so every figure here is built from one code path in the builder.

   TWO THRESHOLDS, ON PURPOSE
   --------------------------
   The chart flags a DISTRICT at −6% (a median that soft is news); the table
   flags a SINGLE SALE at −8% (individual deals vary more). They are not a
   rounding of each other — keep both.

   Type and ink follow sections 67 and 68: exact alphas written as
   `rgba(var(--ink-rgb), α)`, explicit `line-height` on dense rows because the
   site base of 1.6 is far off the reference's `normal`, `min-height` carrying
   its own padding because the reference measures content boxes, and the 12px
   floor applied only to what the drawing sets below 12.
   ========================================================================== */

.rswrap { margin: 0 var(--pad-hero); }

.rssec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.rssec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }
.rssec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.rshead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rshead--ends { align-items: flex-end; justify-content: space-between; gap: 32px; }
.rshead--ends .rshead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rshead__right { margin-left: auto; }

.rslabel {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.rshead__meta { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }
.rshead__deed {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.rshead__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.rshead__link:hover,
.rshead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.rstitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

/* ------------------------------------------------------ 01 signed ledger --- */

.rsledger { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.55); }

.rswindow__wrap { display: flex; align-items: center; gap: 12px; }

.rswindow__legend {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.rswindows { display: flex; margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.rswin {
  padding: 8px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rswin__input:checked + .rswin { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.rswin__input:focus-visible + .rswin { outline: 2px solid var(--accent); outline-offset: 2px; }
.rswin:hover { color: var(--accent); }

.rsstats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.rsstat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 22px 24px;
  background: var(--panel-solid);
}

.rsstat__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.rsstat__row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0; }
.rsstat__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.rsstat__delta { font-size: 12px; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.5); }
.rsstat__delta--positive { color: var(--good); }
.rsstat__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* --------------------------------------------------- 02 ask against signed --- */

.rschart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.rsplot {
  position: relative;
  min-width: 0;
  padding: 28px 30px 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  overflow: hidden;
}

/* Horizontal only, one line per row — a full blueprint grid behind a bar chart
   reads as graph paper and fights the bars. */
.rsplot__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px);
  background-size: 100% 46px;
  pointer-events: none;
}

.rsrows { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }

.rsrow {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.rsrow:hover,
.rsrow.is-on { background: rgba(var(--accent-rgb), 0.06); }

.rsrow__name { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.6); }
.rsrow:hover .rsrow__name,
.rsrow.is-on .rsrow__name { color: var(--ink); }

/* Both bars start at the same left edge and are measured against ONE shared
   scale (the largest asking figure), so districts stay comparable. Normalising
   per row would make every district look the same shape. */
.rsbars { position: relative; height: 22px; }

.rsbars__ask { position: absolute; left: 0; top: 3px; height: 6px; background: rgba(var(--ink-rgb), 0.18); }
.rsbars__signed { position: absolute; left: 0; bottom: 3px; height: 6px; background: rgba(var(--accent-rgb), 0.55); }
.rsrow:hover .rsbars__signed,
.rsrow.is-on .rsbars__signed { background: var(--accent); }

/* The tick is what makes the shortfall legible at a glance — it marks where the
   asking price ended so the eye can measure the signed bar against it. Keep it. */
.rsbars__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(var(--ink-rgb), 0.35); }

/* Bar widths as classes, whole percent, the way every other chart on this
   site does it — there is not one inline `style` attribute in the whole
   template and this page is not going to be the first. The builder asserts
   that every width it needs has a rule here, so a data change cannot
   silently produce a zero-width bar.

   All three of these read the SAME scale, so `--w72` is the same length
   whether it is an asking bar, a signed bar or a tick. */
.rsw--37 { width: 37%; }
.rsw--38 { width: 38%; }
.rsw--50 { width: 50%; }
.rsw--52 { width: 52%; }
.rsw--53 { width: 53%; }
.rsw--57 { width: 57%; }
.rsw--58 { width: 58%; }
.rsw--61 { width: 61%; }
.rsw--68 { width: 68%; }
.rsw--72 { width: 72%; }
.rsw--73 { width: 73%; }
.rsw--79 { width: 79%; }
.rsw--92 { width: 92%; }
.rsw--100 { width: 100%; }

/* Left offset for the asking tick, same scale as the bars. */
.rstick--37 { left: 37%; }
.rstick--38 { left: 38%; }
.rstick--50 { left: 50%; }
.rstick--52 { left: 52%; }
.rstick--53 { left: 53%; }
.rstick--57 { left: 57%; }
.rstick--58 { left: 58%; }
.rstick--61 { left: 61%; }
.rstick--68 { left: 68%; }
.rstick--72 { left: 72%; }
.rstick--73 { left: 73%; }
.rstick--79 { left: 79%; }
.rstick--92 { left: 92%; }
.rstick--100 { left: 100%; }

/* Day bands, scaled to the largest band rather than to 100. */
.rsb--34 { width: 34%; }
.rsb--52 { width: 52%; }
.rsb--76 { width: 76%; }
.rsb--83 { width: 83%; }
.rsb--100 { width: 100%; }

.rsrow__delta { text-align: right; font-size: 12px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.55); }
.rsrow:hover .rsrow__delta,
.rsrow.is-on .rsrow__delta { color: var(--accent); }
/* −6% on a district median is news, and it stays flagged even off-hover. */
.rsrow__delta.is-warn,
.rsrow:hover .rsrow__delta.is-warn,
.rsrow.is-on .rsrow__delta.is-warn { color: var(--warn); }

.rslegend {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.rslegend__key { display: flex; align-items: center; gap: 9px; }
.rslegend__swatch { display: block; width: 18px; height: 6px; background: rgba(var(--ink-rgb), 0.18); }
.rslegend__swatch--signed { background: var(--accent); }
.rslegend__count { margin-left: auto; }

/* One grid cell holding all seven panels, six of them `hidden`. Left as seven
   siblings they became seven rows of the two-column grid and the section grew
   by 1 217px. */
.rsdistricts { min-width: 0; }
.rsdistrict { display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 26px; }
.rsdistrict[hidden] { display: none; }

.rsdistrict__name {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.rsdistrict__price { margin: 14px 0 0; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink); }

.rsdistrict__cap {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.rsdlist { margin: 16px 0 0; padding: 0; list-style: none; }

.rsdrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.rsdrow__label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.rsdrow__value { font-size: 13px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.6); }
.rsdrow__value--ink { color: var(--ink); }
.rsdrow__value--accent { color: var(--accent); }
.rsdrow__value--warn { color: var(--warn); }

.rsdistrict__note { margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }

/* --------------------------------------------------------- 03 the register --- */

/* `min-width: 0` is load-bearing: a `<fieldset>` has an intrinsic minimum of
   its content's width and refuses to shrink past it, so at 375px the chip row
   pushed the whole page 42px sideways. `min-inline-size` is the one that
   actually applies to a fieldset in Firefox. */
.rschips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.rschips__legend {
  padding: 0;
  margin-right: 2px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.rschip {
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rschip:hover,
.rschip:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.rschip.is-on {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.rspanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.rsscroll { overflow-x: auto; }

.rstable { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: collapse; }

.rscol--deed { width: 92px; }
.rscol--type { width: 150px; }
.rscol--date { width: 120px; }
.rscol--asked { width: 130px; }
.rscol--signed { width: 130px; }
.rscol--gap { width: 92px; }
.rscol--days { width: 96px; }

.rstable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.rstable thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.rstable thead th.rsnum { text-align: right; }

.rsdeal { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.rsdeal:hover { background: rgba(var(--accent-rgb), 0.06); }

.rsdeal > th,
.rsdeal > td {
  padding: 15px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

/* Only the type column is light; the rest of the row is 400 — measured. */
.rsdeal > td.rsdeal__type { font-weight: 300; }

/* `.rsdeal > td` is (0,1,1) and beats a bare class — the rake that flattened
   the unit table in section 67 and `compact-rows` before that. */
.rsdeal > th.rsdeal__deed { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; color: var(--accent); }
.rsdeal > td.rsdeal__where { color: var(--ink); }
.rsdeal > td.rsdeal__date { color: rgba(var(--ink-rgb), 0.5); }
.rsdeal > td.rsdeal__days { text-align: right; color: rgba(var(--ink-rgb), 0.5); }
.rsdeal > td.rsdeal__gap { text-align: right; color: rgba(var(--ink-rgb), 0.6); }

.rsdeal__where { display: flex; flex-direction: column; gap: 3px; }
.rsdeal__addr { font-size: 13px; font-weight: 300; color: var(--ink); }
.rsdeal__district {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* The asking price is struck and dimmed, the signed price is a serif figure.
   That contrast is the whole argument of the page — do not level it. */
.rsdeal > td.rsdeal__asked { color: rgba(var(--ink-rgb), 0.45); text-decoration: line-through; }
.rsdeal > td.rsdeal__signed { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--ink); }

/* A single sale is flagged at −8%, not the −6% used for a district median. */
.rsdeal > td.rsdeal__gap.is-warn { color: var(--warn); }
.rsdeal > td.rsdeal__gap.is-tight { color: var(--good); }

.rstable__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ------------------------------------------------ 04 one file end to end --- */

.rsfile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25fr;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.rssheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 420px of drawing plus 22px of padding top and bottom. */
  min-height: 464px;
  margin: 0;
  padding: 22px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.rscrop { position: absolute; z-index: 1; width: 16px; height: 16px; }
.rscrop--tl {
  top: 14px;
  left: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.rscrop--tr {
  top: 14px;
  right: 14px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}
.rscrop--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-left: 1px solid rgba(var(--accent-rgb), 0.6);
}
.rscrop--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.6);
  border-right: 1px solid rgba(var(--accent-rgb), 0.6);
}

/* Absolute, so the drawing's own aspect ratio cannot set the height of the
   panel — that mistake cost 63px on the coming-soon sheet. */
.rssheet__frame { position: relative; flex: 1; min-height: 376px; overflow: hidden; }
.rssheet__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.rsstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.rsstrip__signed { color: var(--accent); }

.rsstory { display: flex; flex-direction: column; min-width: 0; padding: 30px 32px; }

.rsstory__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.rsstory__blurb { margin: 12px 0 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.6); }

.rstl { position: relative; margin-top: 26px; }
.rstl__rule { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: rgba(var(--ink-rgb), 0.18); }
.rstl__done { position: absolute; left: 0; top: 27px; height: 1px; background: var(--accent); }
.rstl__done--w0 { width: 0; }
.rstl__done--w25 { width: 25%; }
.rstl__done--w50 { width: 50%; }
.rstl__done--w75 { width: 75%; }
.rstl__done--w100 { width: 100%; }

.rssteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsstep { min-width: 0; }

.rsstep__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0 14px 0 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.rsstep__date {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.rsstep.is-on .rsstep__date { color: var(--accent); }

.rsstep__dot {
  display: block;
  width: 11px;
  height: 11px;
  margin-left: -1px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: var(--bg);
}

.rsstep.is-reached .rsstep__dot { border-color: var(--accent); background: var(--accent); }

.rsstep__title { font-size: 12px; line-height: 1.3; color: var(--ink); }
.rsstep.is-ahead .rsstep__title { color: rgba(var(--ink-rgb), 0.5); }

/* Three states, not two: the selected step is accent, everything before it is
   history at 0.70, everything after is 0.40 — a number that has not happened
   yet must not read as one that has. */
.rsstep__price { font-family: var(--serif); font-size: 17px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.7); }
.rsstep.is-on .rsstep__price { color: var(--accent); }
.rsstep.is-ahead .rsstep__price { color: rgba(var(--ink-rgb), 0.4); }

.rsnote {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}

/* The wrapper pins the block to the bottom and holds the 24px; the `<dl>`
   inside is the grid. Keeping the pairs one level shallower is not cosmetic —
   `dl > div > div > dt` is invalid, and the whole set failed the linter. */
.rsfstats { margin: auto 0 0; padding-top: 24px; }

.rsfstats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.rsfstat {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.rsfstat__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.rsfstat__value { margin: 8px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: rgba(var(--ink-rgb), 0.6); }
.rsfstat__value--accent { color: var(--accent); }
.rsfstat__value--warn { color: var(--warn); }
.rsfstat__value--ink { color: var(--ink); }

/* -------------------------------------------- 05 per m² · 06 time to sign --- */

.rspair {
  display: grid;
  grid-template-columns: 1.3fr minmax(0, 1fr);
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.rspane { display: flex; flex-direction: column; min-width: 0; padding: 28px 30px 30px; background: var(--panel-solid); }

.rspane__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.rstiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.14);
  list-style: none;
}

.rstile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* 104px of content plus 18px of padding top and bottom. */
  min-height: 140px;
  padding: 18px;
  background: var(--panel-inner);
}

.rstile__district {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.rstile__value { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }
.rstile__change { font-size: 12px; line-height: 1.2; color: var(--good); }
.rstile__change--down { color: var(--warn); }

.rsbands { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }

.rsband { display: grid; grid-template-columns: 92px minmax(0, 1fr) 54px; align-items: center; gap: 14px; }

.rsband__label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* Each fill is its band's share of the LARGEST band, not of 100 — otherwise
   the tallest band would read as "29% of everything" instead of "the most
   common outcome". */
.rsband__track { position: relative; height: 8px; background: rgba(var(--ink-rgb), 0.1); }
.rsband__fill { display: block; height: 100%; background: rgba(var(--accent-rgb), 0.45); }
.rsband--top .rsband__fill { background: var(--accent); }

.rsband__pct { text-align: right; font-size: 12px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.55); }
.rsband--top .rsband__pct { color: var(--ink); }

.rsbands__note {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.5);
}

/* ------------------------------------------------------------ 07 method --- */

.rsmethod { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
.rsmethod__lead { min-width: 0; }

.rsmethod__title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.rsmethod__intro { margin: 12px 0 18px; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }

.rscards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.14);
  list-style: none;
}

.rscard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  /* 132px of content plus 22px and 24px of padding. */
  min-height: 178px;
  padding: 22px 22px 24px;
  background: var(--panel-solid);
}

.rscard__top {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rscard__top--eu { color: var(--accent); }
.rscard__top--us { color: var(--good-soft); }
.rscard__top--both { color: rgba(var(--ink-rgb), 0.4); }

.rscard__title { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.rscard__body { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .rshead--ends { align-items: flex-start; flex-direction: column; gap: 18px; }
  .rsstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rschart { grid-template-columns: minmax(0, 1fr); }
  .rsplot { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .rsfile { grid-template-columns: minmax(0, 1fr); }
  .rssheet { min-height: 360px; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .rssheet__frame { min-height: 280px; }
  .rspair { grid-template-columns: minmax(0, 1fr); }
  .rsmethod { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .rshead,
  .rshead--ends { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rstitle { font-size: 24px; }
  .rsstats { grid-template-columns: minmax(0, 1fr); }
  .rswindow__wrap { width: 100%; }
  .rswindows { flex: 1; }
  .rswin { flex: 1; text-align: center; }
  /* The district label moves above its own bars: 132px of label and a bar in
     the same row leaves the bar too short to compare against anything. */
  .rsrow { grid-template-columns: minmax(0, 1fr) 76px; row-gap: 8px; }
  .rsrow__name { grid-column: 1 / -1; }
  .rsdistrict { padding: 22px 18px 24px; }
  .rsdistrict__price { font-size: 32px; }
  .rschips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .rschip { flex: 0 0 auto; padding: 11px 15px; min-height: 44px; }
  .rsplot { padding: 22px 18px 20px; }
  .rsstory { padding: 22px 18px 24px; }
  .rsstory__title { font-size: 26px; }
  .rssheet { padding: 16px; }
  /* Stacked, the timeline rule runs down the left edge and the dots sit on it. */
  .rssteps { grid-template-columns: minmax(0, 1fr); }
  .rsstep { position: relative; padding: 0 0 22px 30px; }
  .rsstep__dot { position: absolute; left: 0; top: 22px; margin: 0; }
  .rstl__rule { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .rstl__done { left: 5px; top: 0; width: 1px; }
  .rstl__done--w0 { height: 0; }
  .rstl__done--w25 { height: 25%; }
  .rstl__done--w50 { height: 50%; }
  .rstl__done--w75 { height: 75%; }
  .rstl__done--w100 { height: 100%; }
  .rsfstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rspane { padding: 22px 18px 24px; }
  .rstiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rscards { grid-template-columns: minmax(0, 1fr); }
  .rsmethod__title { font-size: 26px; }
  .rswin,
  .rsrow,
  .rsstep__btn { min-height: 44px; }
}

@media (hover: none) {
  .rswin,
  .rsrow,
  .rsstep__btn { min-height: 44px; }
  .rschip { padding: 11px 15px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .rsdeal,
  .rschip,
  .rswin { transition: none; }
}

/* ==========================================================================
   70. For rent — what leaves your account, not what the advert says
   --------------------------------------------------------------------------
   Most rental pages answer "what is the rent?". This one answers the two
   questions a tenant actually has: what leaves the account on day one (first
   month, deposit, agency fee, stamp duty — over four months of rent before you
   hold the keys), and what it really costs every month once the condominium
   charge, the utilities and the internet are counted in. The advertised figure
   is about 15% short of the truth.

   THREE RULES THE PAGE IS BUILT ON
   --------------------------------
   1. **The advertised rent is never shown alone.** Every card carries its
      all-in line directly beneath it.
   2. **The calculator is arithmetic, not content.** Nothing in §02 is a typed
      total — every figure comes from the selected property and let type.
   3. **A label must describe what the graphic actually plots.** The §01 bar
      encodes LISTING COUNTS, so its legend names counts. The handoff lost a
      review round to money words on this bar: under them the gold bar being
      shorter reads as all-in being cheaper, which contradicts the `+15%` card
      twenty pixels to its right.

   Type and ink follow sections 67-69: exact alphas as `rgba(var(--ink-rgb), α)`,
   explicit `line-height` on dense rows, `min-height` carrying its padding, and
   the 12px floor applied only below 12.

   The filter chips are the one place on the site where tracking drops to 0.08em
   and the case stays sentence — they carry numbers (`€1 400`, `3+`), and
   uppercase tracking makes those unreadable.
   ========================================================================== */

.frwrap { margin: 0 var(--pad-hero); }

.frsec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.frsec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }
.frsec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.frhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.frhead--ends { align-items: flex-end; justify-content: space-between; gap: 32px; }
.frhead--ends .frhead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.frhead__right { margin-left: auto; }

.frlabel {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.frhead__meta { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

.frhead__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.frhead__link:hover,
.frhead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.frtitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

/* A two- or three-way segmented switch. Used by the let type, the region and
   nothing else — one box, dividers inside, no gaps. */
.frseg__wrap { display: flex; align-items: center; gap: 12px; }

.frseg__legend {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.frseg { display: flex; margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.frseg__btn {
  padding: 8px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.frseg__input:checked + .frseg__btn { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.frseg__input:focus-visible + .frseg__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.frseg__btn:hover { color: var(--accent); }

.frseg--tight .frseg__btn { padding: 7px 15px; letter-spacing: 0.16em; }

/* -------------------------------------------------- 01 what you can afford --- */

.frafford {
  margin-top: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.frfilters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.frfilter {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding: 18px 22px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}

/* `:last-child`, not `:last-of-type`. The fourth cell is a `<div>` (a date, not
   a chip set) while the first three are `<fieldset>`s, so `:last-of-type`
   matched the THIRD cell and stripped its divider — the same rake as
   `.sheet:first-of-type` in §10 п.17. */
.frfilter:last-child { border-right: none; }

.frfilter__legend {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.frchips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Real inputs wearing a chip, so the selection belongs to the control and
   survives a dead script — the same choice as every other chip set here. */
.frchip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.frchip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.frchip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.frchip__input:checked + .frchip {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.frchip__input:focus-visible + .frchip { outline: 2px solid var(--accent); outline-offset: 2px; }

.frfilter__value { margin: 0; font-size: 13px; line-height: 1.3; color: var(--ink); }

.franswer {
  display: grid;
  grid-template-columns: 1.55fr minmax(0, 1fr) minmax(0, 1fr);
}

.frcell { min-width: 0; padding: 24px 22px 26px; border-right: 1px solid rgba(var(--ink-rgb), 0.12); }
.frcell:last-child { border-right: none; }

.frcell__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* The largest body text on the page, because it is the page's thesis. */
.frhonest { margin: 12px 0 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.75); }

.frbar { position: relative; height: 8px; margin-top: 18px; background: rgba(var(--ink-rgb), 0.1); }
.frbar__all { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba(var(--ink-rgb), 0.22); }
.frbar__real { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); }

/* Only the DEFAULT state needs a class: block 9ae recomputes this bar on every
   control and sets the width the way the rest of main.js already does
   (`fill.style.width`, `slice.style.width`). The ban in this project is on
   inline `style` ATTRIBUTES in emitted markup, not on runtime JS — and a
   thirty-six-rule table for one bar would be worse than either. */
.frbar__real--w52 { width: 52%; }

/* Speed bands: each one's share of the slowest (39 days). */
.frb--10 { width: 10%; }
.frb--18 { width: 18%; }
.frb--33 { width: 33%; }
.frb--62 { width: 62%; }
.frb--100 { width: 100%; }

.frlegend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.frlegend__key { display: flex; align-items: center; gap: 9px; }
.frlegend__swatch { display: block; width: 16px; height: 6px; background: rgba(var(--ink-rgb), 0.22); }
.frlegend__swatch--real { background: var(--accent); }

.frcell__value { margin: 12px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); }
.frcell__value--ink { color: var(--ink); }
.frcell__note { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------- 02 cost to move in --- */

.frcalc {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  min-height: 400px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.frpick {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
}

.frpick__btn {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  padding: 17px 20px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.frpick__btn:hover { background: rgba(var(--accent-rgb), 0.06); }
.frpick__btn.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.frpick__title { font-size: 13px; line-height: 1.3; color: var(--ink); }
.frpick__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.frpick__meta {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.frpick__rent { font-family: var(--serif); font-size: 16px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.7); }
.frpick__btn.is-on .frpick__rent { color: var(--accent); }

.frpick__note { margin: auto 0 0; padding: 18px 20px; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.45); }

.frupfront { display: flex; flex-direction: column; min-width: 0; padding: 26px 30px 28px; }
.frmonthly { display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 28px; border-left: 1px solid rgba(var(--ink-rgb), 0.16); }

.frpane__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.frlines { margin: 14px 0 0; padding: 0; list-style: none; }

.frline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 116px;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.frline__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frline__label { font-size: 13px; line-height: 1.3; color: var(--ink); }
.frline__note { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.45); }

.frline__basis {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.frline__value { text-align: right; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); }

/* The row stays on the page when it does not apply: a tenant should see what
   they are NOT paying, which is the difference between a short and a long let. */
.frline--off .frline__label { color: rgba(var(--ink-rgb), 0.35); }
.frline--off .frline__value { color: rgba(var(--ink-rgb), 0.45); }

.frtotal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
}

.frtotal__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.frtotal__months { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.4; color: rgba(var(--ink-rgb), 0.45); }

/* The biggest number on the page, and deliberately so: it is the answer to the
   question the page exists to ask. */
.frtotal__value { margin: 0; font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--accent); }

.frmrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.frmrow__label { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.6); }
/* The rent is the fact; the three charges under it are the surcharge, and the
   drawing keeps them a step back so the eye reads them as additions. */
.frmrow__value { font-size: 13px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.75); }
.frmrow__value--ink { color: var(--ink); }
.frmrow__value--muted { color: rgba(var(--ink-rgb), 0.45); }

.frtrue { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.2); }
.frtrue .frpane__label { color: rgba(var(--ink-rgb), 0.42); }
.frtrue__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.frtrue__value { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }

/* Green inside the ceiling, warn over it — and it names the ceiling, so the
   tenant never has to remember which chip they pressed. */
.frtrue__tag { font-size: 12px; line-height: 1.3; color: var(--good); }
.frtrue__tag.is-over { color: var(--warn); }

.frmonthly__link { margin: auto 0 0; padding-top: 18px; }

/* ------------------------------------------------------- 03 available now --- */

.frcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.frcard { min-width: 0; }

.frcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  text-decoration: none;
  transition: background 0.15s ease;
}

.frcard__link:hover,
.frcard__link:focus-visible { background: var(--panel-hover); }

.frcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.frcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fravail {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.72);
}

.fravail--now { background: rgba(var(--accent-rgb), 0.92); color: var(--bg); }

.frfurnish {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.75);
}

.frref {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}

.frcard__body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 19px; }
.frcard__name { font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }
.frcard__where { margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

.frcard__rent { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.frcard__amount { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }

.frcard__per {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Never a rent without its all-in figure. If a listing has no charges on file,
   estimate and label it — do not fall back to the advertised number alone. */
.frcard__allin { margin-top: 6px; font-size: 12px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.55); }

.frtags { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }

.frtag {
  padding: 4px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.frcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.frcard__heat { font-size: 12px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.5); }
.frcard__heat.is-hot { color: var(--warn); }
.frcard__heat.is-warm { color: var(--accent); }

.frcard__term {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ----------------------------------- 04 how fast they go · 05 before you enquire --- */

.frpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.15fr;
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.frpane { display: flex; flex-direction: column; min-width: 0; padding: 28px 30px 30px; background: var(--panel-solid); }
.frpane__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.frpane__intro { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.55); }

.frbands { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }

.frband {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.frband:hover,
.frband.is-on { background: rgba(var(--accent-rgb), 0.06); }

.frband__label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.frband:hover .frband__label,
.frband.is-on .frband__label { color: var(--ink); }

/* Fills are a share of the SLOWEST band, so the row reads as "this one goes in
   a tenth of the time", not as a percentage of nothing. */
.frband__track { position: relative; height: 8px; background: rgba(var(--ink-rgb), 0.1); }
.frband__fill { display: block; height: 100%; background: rgba(var(--accent-rgb), 0.45); }
.frband--quick .frband__fill { background: var(--accent); }

.frband__days { text-align: right; font-size: 12px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.55); }
.frband:hover .frband__days,
.frband.is-on .frband__days { color: var(--accent); }

.frnote {
  margin: 22px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}

.frdocs { margin: 18px 0 0; padding: 0; list-style: none; }
.frdocs[hidden] { display: none; }

.frdoc {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 120px;
  align-items: start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.frdoc__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
}

.frdoc__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frdoc__label { font-size: 13px; line-height: 1.3; color: var(--ink); }
.frdoc__note { font-size: 12px; font-weight: 300; line-height: 1.4; color: rgba(var(--ink-rgb), 0.45); }

.frdoc__req {
  text-align: right;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.frdoc__req--required { color: var(--accent); }
.frdoc__req--often { color: rgba(var(--ink-rgb), 0.6); }

/* --------------------------------------------------------- 06 districts --- */

.frpanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.frscroll { overflow-x: auto; }

.frtable { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; }

.frcol--one { width: 130px; }
.frcol--two { width: 130px; }
.frcol--three { width: 130px; }
.frcol--sqm { width: 150px; }
.frcol--supply { width: 120px; }

.frtable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.frtable thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.frtable thead th.frnum { text-align: right; }

.frdrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.frdrow:hover { background: rgba(var(--accent-rgb), 0.06); }

.frdrow > th,
.frdrow > td {
  padding: 15px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

/* `.frdrow > td` is (0,1,1) and beats a bare class — the rake that flattened
   the unit table in section 67 and `compact-rows` before it. */
.frdrow > th.frdrow__where { font-weight: 400; color: var(--ink); }
.frdrow > td.frdrow__two { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.frdrow > td.frdrow__supply { text-align: right; }

.frdrow__where { display: flex; flex-direction: column; gap: 3px; }
.frdrow__name { font-size: 14px; line-height: 1.3; color: var(--ink); }

.frdrow__city {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.frsupply {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--good);
}

.frsupply--tight { color: var(--accent); }
.frsupply--very { color: var(--warn); }

.frtable__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .frhead--ends { align-items: flex-start; flex-direction: column; gap: 18px; }
  .frfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frfilter:nth-child(even) { border-right: none; }
  .frfilter:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .franswer { grid-template-columns: minmax(0, 1fr); }
  .frcell { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .frcell:last-child { border-bottom: none; }
  /* The picker becomes a scroller on top, and the two panes sit side by side. */
  .frcalc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frpick { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .frpick__btn { flex: 0 0 240px; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .frpick__btn.is-on { border-left-color: transparent; border-top-color: var(--accent); }
  .frpick__note { display: none; }
  .frmonthly { border-left: 1px solid rgba(var(--ink-rgb), 0.16); }
  .frcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frpair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .frhead,
  .frhead--ends { flex-direction: column; align-items: flex-start; gap: 14px; }
  .frtitle { font-size: 24px; }
  .frfilters { grid-template-columns: minmax(0, 1fr); }
  .frfilter { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .frfilter:last-child { border-bottom: none; }
  .frseg__wrap { width: 100%; }
  .frseg { flex: 1; }
  .frseg__btn { flex: 1; text-align: center; min-height: 44px; }
  /* Premium and income sit side by side under the bar rather than stacking
     into two more full-width blocks. */
  .franswer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frcell:first-child { grid-column: 1 / -1; }
  .frcell:nth-child(2) { border-right: 1px solid rgba(var(--ink-rgb), 0.12); border-bottom: none; }
  .frcalc { grid-template-columns: minmax(0, 1fr); }
  /* Fully stacked below 768: the picker goes back to a vertical list rather
     than staying the sideways scroller it becomes on tablet. */
  .frpick { flex-direction: column; overflow-x: visible; }
  .frpick__btn { flex: 0 0 auto; border-top: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
  .frpick__btn.is-on { border-top-color: transparent; border-left-color: var(--accent); }
  .frmonthly { border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
  .frupfront,
  .frmonthly { padding: 22px 18px 24px; }
  .frcards { grid-template-columns: minmax(0, 1fr); }
  .frcard__media { height: 220px; }
  .frpane { padding: 22px 18px 24px; }
  /* The band label moves above its own bar; the days stay right-aligned. */
  .frband { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 8px; }
  .frband__label { grid-column: 1 / -1; }
  /* The requirement becomes a tag under the label rather than a third column. */
  .frdoc { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; }
  .frdoc__req { grid-column: 2; text-align: left; }
  .frchip { padding: 11px 14px; min-height: 44px; }
  .frband,
  .frpick__btn { min-height: 44px; }
}

@media (hover: none) {
  .frchip { padding: 11px 14px; min-height: 44px; }
  .frseg__btn,
  .frband,
  .frpick__btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .frcard__link,
  .frchip,
  .frseg__btn,
  .frpick__btn,
  .frdrow { transition: none; }
}

/* ==========================================================================
   71. Land & plots — a plot is not a small house
   --------------------------------------------------------------------------
   Someone buying land is not comparing kitchens. They are asking four
   questions, in this order, and the page answers them in that order:

     1. What am I allowed to build here?   (classification, index, coverage)
     2. What is missing?                   (water, power, sewer, road, fibre)
     3. What does the finished house cost? (land is maybe a fifth of it)
     4. How long until I can start?        (permit stages, in weeks)

   TWO RULES
   ---------
   1. **Never a land price alone.** Every price sits beside its price per
      BUILDABLE m², because a cheap plot at an index of 0.02 is not cheap.
   2. **One source of truth per plot.** §02, §04, §05 and §06 all describe the
      same parcel. The handoff lost three review rounds to these disagreeing —
      a reference that named two plots, service dots contradicting the service
      list, an index printed two ways inside one panel.

   THE DIAGRAM IS A DRAWING, NOT A DECORATION
   ------------------------------------------
   The hatched block is sized by the SQUARE ROOT of the coverage ratio, because
   a plan has two dimensions that must multiply back to the ratio. Linearise it
   and 30% coverage would read as 30% of the width — true only if the plot were
   a strip. The clamps stop a 2% rural parcel rendering an invisible dot and a
   55% city lot touching the outline.

   Type and ink follow sections 67-70: exact alphas as `rgba(var(--ink-rgb), α)`,
   explicit `line-height` on dense rows, `min-height` carrying its padding, the
   12px floor only below 12.
   ========================================================================== */

.lpwrap { margin: 0 var(--pad-hero); }

.lpsec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.lpsec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }
.lpsec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.lphead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lphead--ends { align-items: flex-end; justify-content: space-between; gap: 32px; }
/* `min-width: 0` on both halves of the head row: a flex item sizes to
   max-content by default, so the long register line and the chip scroller each
   pushed the page 130px sideways at 375px. */
.lphead--ends .lphead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.lpledger { min-width: 0; }
.lphead__right { margin-left: auto; }

.lplabel {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.lphead__meta { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }
.lphead__ref { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

.lphead__link {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.lphead__link:hover,
.lphead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.lptitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.lpchips__wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.lpchips__legend {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* `position: relative` is load-bearing: the visually-hidden chip inputs are
   absolutely positioned, and without a containing block here they resolve
   against the initial containing block. Inside a horizontal scroller that puts
   them at their static x — off the right of the page — and the ROOT scrolls
   44px while `body.scrollWidth` still reads 375 and every element passes an
   overflow scan. The signature of §10 п.29: only `window.scrollTo` catches it. */
.lpchips {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  min-inline-size: 0;
}

/* Real inputs wearing a chip: the state belongs to the control, so it survives
   a dead script and reads correctly to assistive tech. */
.lpchip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lpchip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lpchip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.lpchip__input:checked + .lpchip {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.lpchip__input:focus-visible + .lpchip { outline: 2px solid var(--accent); outline-offset: 2px; }
.lpchip__count { font-size: 12px; opacity: 0.6; }

.lpbtn { padding: 13px 24px; border-radius: 0; font-size: 12px; letter-spacing: 0.2em; }
.lpbtn--solid { color: var(--bg); font-weight: 600; }
.lpbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.8);
  font-weight: 500;
}
.lpbtn--ghost:hover,
.lpbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ 01 register --- */

.lpledger { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.55); }

.lpstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.lpstat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 22px 24px;
  background: var(--panel-solid);
}

.lpstat__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lpstat__value { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.lpstat__value--accent { color: var(--accent); }
.lpstat__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* -------------------------------------------------- 02 what you may build --- */

.lpbuild {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 300px;
  min-height: 460px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.lppick { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid rgba(var(--ink-rgb), 0.16); }

.lppick__btn {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lppick__btn:hover { background: rgba(var(--accent-rgb), 0.06); }
.lppick__btn.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.lppick__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lppick__name { font-size: 13px; line-height: 1.3; color: var(--ink); }

.lppick__tag {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.lppick__tag--rural { color: var(--warn); }
.lppick__tag--urbanisable { color: rgba(var(--ink-rgb), 0.5); }

.lppick__area {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.lppick__price { font-family: var(--serif); font-size: 15px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.7); }
.lppick__btn.is-on .lppick__price { color: var(--accent); }

.lppick__note { margin: auto 0 0; padding: 18px; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.45); }

/* One grid cell for the diagrams and one for the service panels, four of each
   pair hidden. Left as ten siblings they became five rows of the three-column
   grid and the section grew by 1 712px — the same mistake as the district
   panels in section 69. */
.lpdiagrams,
.lpservicecol { display: flex; flex-direction: column; min-width: 0; }
.lpdiagram[hidden],
.lpservices[hidden] { display: none; }

.lpdiagram {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px 24px;
  overflow: hidden;
}

.lpdiagram__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.lpdiagram__body { position: relative; display: flex; flex-direction: column; }

.lpdiagram__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.lpdiagram__coverage { color: var(--accent); }

/* A site plan: the footprint sits on the bottom edge of the parcel, the way it
   would be drawn against a road frontage. */
.lpplot {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 244px;
  margin: 16px 0 0;
  padding: 14px;
  border: 1px dashed rgba(var(--ink-rgb), 0.35);
}

.lpplot__corner {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.35);
}

.lpplot__corner--area { left: 14px; top: 14px; color: rgba(var(--ink-rgb), 0.45); }
.lpplot__corner--setback { right: 14px; top: 14px; }
.lpplot__corner--floors { right: 14px; bottom: 14px; }

.lpfootprint {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  background: repeating-linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.28) 0 5px, rgba(var(--accent-rgb), 0.08) 5px 10px);
}

.lpfootprint__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The footprint's two dimensions, as classes — the template carries no inline
   `style` attributes. Both come from `sqrt(coverage)`, clamped, so the block
   stays a plan and not a bar. Block 9af resizes it when the plot changes,
   the way the rest of main.js already sets live dimensions. */
.lpfp--w18 { width: 18%; }
.lpfp--w42 { width: 42%; }
.lpfp--w55 { width: 55%; }
.lpfp--w59 { width: 59%; }
.lpfp--w74 { width: 74%; }
.lpfp--h16 { height: 16%; }
.lpfp--h42 { height: 42%; }
.lpfp--h55 { height: 55%; }
.lpfp--h59 { height: 59%; }
.lpfp--h74 { height: 74%; }

/* Default widths for the comparison bars and the permit rule; the script
   recomputes both. */
.lpw--33 { width: 33%; }
.lpw--90 { width: 90%; }
.lpw--100 { width: 100%; }

.lpbstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.lpbstat {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.lpbstat__label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lpbstat__value { margin: 8px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); }
.lpbstat__value--accent { color: var(--accent); }

/* The same arithmetic in words. On a tight urban lot the permitted volume
   genuinely does not fit under the permitted height, and the buyer is told so
   rather than left with two numbers that quietly disagree. */
.lpsentence { margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.6); }

.lpservices { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 26px 26px 28px; }
.lpservicecol { border-left: 1px solid rgba(var(--ink-rgb), 0.16); }

.lppane__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lpsvcs { margin: 12px 0 0; padding: 0; list-style: none; }

.lpsvc {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) 92px;
  align-items: start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.lpsvc__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
}

.lpsvc--missing .lpsvc__box { color: var(--warn); }

.lpsvc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* The missing services are what the buyer came for, so they take full ink and
   the connected ones sit back at 0.78. */
.lpsvc__label { font-size: 12px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.78); }
.lpsvc--missing .lpsvc__label { color: var(--ink); }
.lpsvc__note { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.42); }

.lpsvc__cost { text-align: right; font-size: 12px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.7); }
.lpsvc__cost--missing { color: var(--warn); }
.lpsvc__cost--none { color: rgba(var(--ink-rgb), 0.4); }

.lpconn { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.2); }
.lpconn__value { margin: 12px 0 0; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
/* Above €20 000 the connections stop being a rounding error on the land price. */
.lpconn__value.is-heavy { color: var(--warn); }
.lpconn__note { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------------- 03 land to standing house --- */

.lpcost {
  display: grid;
  grid-template-columns: 1.45fr minmax(0, 1fr);
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.lpbill { display: flex; flex-direction: column; min-width: 0; padding: 26px 30px 28px; background: var(--panel-solid); }
.lpversus { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px 28px; background: var(--panel-solid); }

.lprows { margin: 14px 0 0; padding: 0; list-style: none; }

.lprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 132px;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.lprow__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lprow__label { font-size: 13px; line-height: 1.3; color: var(--ink); }
.lprow__note { font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.45); }

.lprow__basis {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lprow__value { text-align: right; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.75); }
.lprow__value--ink { color: var(--ink); }
.lprow__value--accent { color: var(--accent); }
.lprow__value--warn { color: var(--warn); }

.lptotal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
}

.lptotal__label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lptotal__label { display: block; color: rgba(var(--ink-rgb), 0.42); }
.lpconn .lppane__label,
.lpsum .lppane__label { color: rgba(var(--ink-rgb), 0.42); }
/* Both are inline spans inside the total row; without `display: block` the
   margin does nothing and the two run together on one line. */
.lptotal__rate { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.4; color: rgba(var(--ink-rgb), 0.45); }
.lptotal__value { margin: 0; font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--accent); }

.lpbars { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lpbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.lpbar__label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.lpbar--built .lpbar__label { color: rgba(var(--ink-rgb), 0.5); }
.lpbar__value { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); }
.lpbar--built .lpbar__value { color: rgba(var(--ink-rgb), 0.7); }

.lpbar__track { position: relative; height: 8px; margin-top: 9px; background: rgba(var(--ink-rgb), 0.1); }
.lpbar__fill { display: block; height: 100%; background: var(--accent); }
.lpbar--built .lpbar__fill { background: rgba(var(--ink-rgb), 0.22); }

.lpverdict {
  margin: 20px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.72);
}

.lpverdict.is-dear { color: var(--warn); }

.lpversus__acts { display: flex; gap: 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 20px; }

/* ------------------------------------- 04 constraints · 05 permit to first brick --- */

.lppair {
  display: grid;
  grid-template-columns: 1.1fr minmax(0, 1fr);
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.lppane { display: flex; flex-direction: column; min-width: 0; padding: 28px 30px 30px; background: var(--panel-solid); }
.lppane__intro { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.55); }

.lpcons { margin: 16px 0 0; padding: 0; list-style: none; }

.lpcon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: start;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.lpcon__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lpcon__label { font-size: 13px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.85); }
/* A restriction or a pending plan is the thing the buyer came for: full ink. */
.lpcon--loud .lpcon__label { color: var(--ink); }
.lpcon__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

.lpcon__status { display: flex; justify-content: flex-end; }

.lppill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lppill--clear { color: var(--good); }
.lppill--condition { color: var(--accent); }
.lppill--registered { color: rgba(var(--ink-rgb), 0.55); }
.lppill--restricted,
.lppill--pending { color: var(--warn); }

.lptl { position: relative; margin: 20px 0 0; }
.lptl__rule { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(var(--ink-rgb), 0.18); }
.lptl__done { position: absolute; left: 0; top: 6px; height: 1px; background: var(--accent); }

.lpsteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpstep { min-width: 0; }

.lpstep__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0 14px 0 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

/* The only curved thing on the page. */
.lpstep__dot {
  display: block;
  width: 11px;
  height: 11px;
  margin-left: -1px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: var(--bg);
}

.lpstep.is-reached .lpstep__dot { border-color: var(--accent); background: var(--accent); }

.lpstep__title { font-size: 12px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.5); }
.lpstep.is-reached .lpstep__title { color: var(--ink); }
/* Three states: a stage still ahead is 0.40, one already behind you 0.70, the
   selected one accent. Two states would read as "some weeks are important". */
.lpstep__weeks { font-family: var(--serif); font-size: 18px; line-height: 1.2; color: rgba(var(--ink-rgb), 0.4); }
.lpstep.is-reached .lpstep__weeks { color: rgba(var(--ink-rgb), 0.7); }
.lpstep.is-on .lpstep__weeks { color: var(--accent); }

.lpnote {
  margin: 20px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}

.lpsum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}

.lpsum__value { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }

/* --------------------------------------------------------------- 06 plots --- */

.lpcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.lpcard { min-width: 0; }

.lpcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  text-decoration: none;
  transition: background 0.15s ease;
}

.lpcard__link:hover,
.lpcard__link:focus-visible { background: var(--panel-hover); }

.lpcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.lpcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lpbadge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.72);
}

.lpbadge--urban { background: rgba(var(--accent-rgb), 0.92); color: var(--bg); }
.lpbadge--rural { background: rgba(var(--warn-rgb), 0.9); color: var(--bg); }

.lpindex {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.75);
}

.lpcard__ref {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}

.lpcard__body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 19px; }
.lpcard__name { font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }
.lpcard__where { margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.5); }

.lpcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lpcard__amount { font-family: var(--serif); font-size: 23px; line-height: 1; color: var(--ink); }

.lpcard__per {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Never a land price alone: the buildable line is what makes it comparable. */
.lpcard__buildable { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--accent); }

.lpsq { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

/* Per-service flags, never "the first N of five" — a card once claimed a sewer
   connection on a plot whose detail row put it 120 m away. */
.lpsq__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.3);
}

.lpsq__box.is-on { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }

.lpcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.lpcard__status { font-size: 12px; line-height: 1.2; color: var(--good); }
.lpcard__status--warn { color: var(--warn); }
.lpcard__status--review { color: var(--accent); }

.lpcard__slope {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ---------------------------------------------------- 07 municipalities --- */

.lppanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.lpscroll { overflow-x: auto; }

.lptable { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: collapse; }

.lpcol--land { width: 130px; }
.lpcol--built { width: 130px; }
.lpcol--index { width: 140px; }
.lpcol--permit { width: 150px; }
.lpcol--plots { width: 130px; }

.lptable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.lptable thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.lptable thead th.lpnum { text-align: right; }

.lpmrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.lpmrow:hover { background: rgba(var(--accent-rgb), 0.06); }

.lpmrow > th,
.lpmrow > td {
  padding: 15px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

/* `.lpmrow > td` is (0,1,1) and beats a bare class — the rake that flattened
   the unit table in section 67 and `compact-rows` before it. */
.lpmrow > th.lpmrow__where { color: var(--ink); }
.lpmrow > td.lpmrow__land { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--ink); }
.lpmrow > td.lpmrow__permit.is-slow { color: var(--warn); }
.lpmrow > td.lpmrow__plots { text-align: right; }

.lpmrow__where { display: flex; flex-direction: column; gap: 3px; }
.lpmrow__name { font-size: 14px; line-height: 1.3; color: var(--ink); }

.lpmrow__region {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.lptable__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .lphead--ends { align-items: flex-start; flex-direction: column; gap: 18px; }
  .lpstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Picker on top as a scroller; the diagram and the services side by side. */
  .lpbuild { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lppick { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .lppick__btn { flex: 0 0 240px; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .lppick__btn.is-on { border-left-color: transparent; border-top-color: var(--accent); }
  .lppick__note { display: none; }
  .lpcost { grid-template-columns: minmax(0, 1fr); }
  .lppair { grid-template-columns: minmax(0, 1fr); }
  .lpcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .lphead,
  .lphead--ends { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lptitle { font-size: 24px; }
  .lpstats { grid-template-columns: minmax(0, 1fr); }
  .lphead__left { width: 100%; }
  /* The legend goes above the scroller: side by side, the flex line is as wide
     as the chips and the `overflow-x` never gets a box to clip against. */
  .lpchips__wrap { width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lpchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; width: 100%; min-width: 0; }
  .lpchip { flex: 0 0 auto; padding: 11px 14px; min-height: 44px; }
  .lpbuild { grid-template-columns: minmax(0, 1fr); }
  .lppick { flex-direction: column; overflow-x: visible; }
  .lppick__btn { flex: 0 0 auto; border-top: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
  .lppick__btn.is-on { border-top-color: transparent; border-left-color: var(--accent); }
  .lpservicecol { border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
  .lpdiagram { padding: 22px 18px 20px; }
  /* The diagram keeps its height and its proportions — it is the graphic. */
  .lpbstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpbill,
  .lpversus,
  .lppane { padding: 22px 18px 24px; }
  /* The basis column folds into the note line rather than squeezing a third
     column into 320px. */
  .lprow { grid-template-columns: minmax(0, 1fr) 116px; }
  .lprow__basis { grid-column: 1; grid-row: 2; }
  .lprow__value { grid-column: 2; grid-row: 1 / span 2; }
  .lpcon { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .lpcon__status { justify-content: flex-start; }
  /* Stacked, the timeline rule runs down the left edge. */
  .lpsteps { grid-template-columns: minmax(0, 1fr); }
  .lpstep { position: relative; padding: 0 0 20px 30px; }
  .lpstep__dot { position: absolute; left: 0; top: 2px; margin: 0; }
  .lptl__rule { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .lptl__done { left: 5px; top: 0; width: 1px; }
  .lpcards { grid-template-columns: minmax(0, 1fr); }
  .lpcard__media { height: 200px; }
  .lpversus__acts .lpbtn { flex: 1 0 100%; }
  .lppick__btn,
  .lpstep__btn,
  .lpbtn { min-height: 44px; }
}

@media (hover: none) {
  .lpchip { padding: 11px 14px; min-height: 44px; }
  .lppick__btn,
  .lpstep__btn,
  .lpbtn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lpcard__link,
  .lpchip,
  .lppick__btn,
  .lpmrow { transition: none; }
}

/* ==========================================================================
   72. Commercial — two buyers who share nothing
   --------------------------------------------------------------------------
   An INVESTOR is buying income: net initial yield, WAULT, covenant, when the
   leases expire, what the service charge will not recover. An OCCUPIER is
   renting space to run a business: €/m²/year, service charge, fit-out, the
   total annual cost, cost per desk. One listing page serves neither.

   So the page carries a mode switch in §01, and it is not cosmetic: it changes
   the market statistics, the calculator's inputs AND outputs, the table's
   columns and rows, the chart, the checklist, and which buildings the register
   even shows. Both modes are written into the markup and toggled with
   `hidden`, so the page reads whole with scripting off.

   THREE RULES, ALL LEARNED IN REVIEW
   ----------------------------------
   1. **One record per asset.** §02's calculator and §06's cards describe the
      same buildings, and the card yields are DERIVED from the same price and
      rent. An earlier version had Baixa 44 at 5.17% in one section and 5.52%
      in the other.
   2. **A total is the sum of the rows that render.** The occupier headline
      once dropped the rent-free credit and the business rates because it was
      computed independently of the list above it.
   3. **A mode change can empty a list.** Retail with nothing available renders
      a bordered empty state with one sentence in it — never a 2px sliver of
      hairline where a grid used to be.

   THE ZERO BAR IS THE MESSAGE. In §04 a year with no expiries renders a 2px
   bar at ink 0.16. "Nothing expires in 2029" is a fact the investor needs; an
   absent bar reads as a rendering failure.

   Two departures from the prototype, both site-wide law: nothing renders below
   12px (Envato), and no literal colours appear outside the tokens. Every other
   measurement below is the prototype's own.
   ========================================================================== */

/* The site body sets `line-height: 1.6`. The prototype leaves it at `normal`
   almost everywhere and states it only where it matters — inheriting 1.6 into
   dense rows moved 265 atoms on new-builds (§0k). So this section resets to
   `normal` first, and every rule below that needs a real line-height says so.
   Source order is what makes that work: these two selectors are (0,1,0), the
   same as the class rules underneath them. */
.cmwrap,
.cmwrap * { line-height: normal; }

.cmwrap { margin: 0 var(--pad-hero); }

/* `hidden` is how the page carries both modes at once, and the UA rule behind
   it — `[hidden] { display: none }` — has zero specificity. Every class here
   that sets `display` has to opt back in by name; miss one and both modes
   render at the same time. */
.cmstats[hidden],
.cmmetrics[hidden],
.cmchart[hidden],
.cmtotal[hidden],
.cmcards[hidden],
.cmcard[hidden],
.cmempty[hidden],
.cmside__acts[hidden],
.cmcard__figure[hidden],
.cmpick__figure[hidden] { display: none; }

.cmsec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.cmsec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }
.cmsec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.cmhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cmhead--market { gap: 32px; }
.cmhead--base { align-items: baseline; }
.cmhead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }

.cmlabel {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.cmhead__meta { margin: 0; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.cmhead__link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cmhead__link:hover,
.cmhead__link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.cmtitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
}

/* --------------------------------------------------------- the mode switch --- */
/* The page's primary control: two buttons in one box, no gap between them. */

.cmmode__wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.cmmode__legend {
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.cmmode { display: flex; border: 1px solid rgba(var(--ink-rgb), 0.2); }
.cmmode > span { display: flex; }

.cmmode__btn {
  padding: 8px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cmmode__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmmode__input:checked + .cmmode__btn { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.cmmode__input:focus-visible + .cmmode__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmmode__btn:hover { color: var(--accent); }

/* ---------------------------------------------------------------- chips --- */
/* `position: relative` on the strip is load-bearing: the inputs are absolutely
   positioned, and inside a horizontal scroller with no containing block they
   resolve against the root and drag the page sideways — 44px of it on
   land-plots (§0o). */

.cmchips__wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.cmchips__legend {
  padding: 0 4px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmchips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cmchip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cmchip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cmchip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }

.cmchip__input:checked + .cmchip {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.cmchip__input:focus-visible + .cmchip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A sector with nothing to show in this mode dims but stays clickable — "there
   is no retail to occupy" is information, not a dead control. */
.cmchip.is-empty { border-color: rgba(var(--ink-rgb), 0.1); color: rgba(var(--ink-rgb), 0.3); }

.cmbtn { padding: 12px 18px; border-radius: 0; font-size: 12px; letter-spacing: 0.2em; }
.cmbtn--solid { color: var(--bg); font-weight: 600; }

.cmbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.8);
  font-weight: 500;
}

.cmbtn--ghost:hover,
.cmbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------------- 01 market --- */

.cmmarket { margin: 0; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.55); }

.cmstats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.cmstat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 22px 24px;
  background: var(--panel-solid);
}

.cmstat__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmstat__row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0; }
.cmstat__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.cmstat__value--accent { color: var(--accent); }
.cmstat__delta { font-size: 12px; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.4); }
.cmstat__delta--positive { color: var(--good); }
.cmstat__delta--warn { color: var(--warn); }
.cmstat__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------ 02 the income / occupancy cost --- */

.cmcalc {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr) 322px;
  min-height: 470px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.cmpick { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid rgba(var(--ink-rgb), 0.16); }

.cmpick__btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cmpick__btn:hover { background: rgba(var(--accent-rgb), 0.06); }
.cmpick__btn.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.cmpick__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cmpick__name { font-size: 13px; font-weight: 400; }

.cmpick__sector {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.cmpick__btn.is-on .cmpick__sector { color: rgba(var(--ink-rgb), 0.6); }

.cmpick__size {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.cmpick__figure { font-family: var(--serif); font-size: 15px; color: rgba(var(--ink-rgb), 0.7); }
.cmpick__btn.is-on .cmpick__figure { color: var(--accent); }

.cmpick__note {
  margin: auto 0 0;
  padding: 16px 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.cmledgers {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 30px 28px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
}

.cmside { display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 28px; }

.cmpane__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmpane__label--spaced { margin-top: 20px; }
.cmrows { margin: 16px 0 0; padding: 0; list-style: none; }

.cmrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 130px;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.cmrow__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmrow__label { font-size: 13px; font-weight: 400; color: var(--ink); }
.cmrow__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }

.cmrow__basis {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmrow__value { text-align: right; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.cmrow__value--accent { color: var(--accent); }
.cmrow__value--warn { color: var(--warn); }
.cmrow__value--positive { color: var(--good); }
.cmrow__value--muted { color: rgba(var(--ink-rgb), 0.75); }

.cmtotal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.2);
}

.cmtotal__head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.cmtotal__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.cmtotal__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }
.cmtotal__value { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--accent); }

.cmmetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.cmmetric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.cmmetric__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmmetric__value { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); }
.cmmetric__value--accent { color: var(--accent); }
.cmmetric__value--positive { color: var(--good); }
.cmmetric__value--warn { color: var(--warn); }

.cmrisks { margin: 12px 0 0; padding: 0; list-style: none; }

.cmrisk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.cmrisk__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.7); }

.cmpill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentcolor;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cmpill--positive { color: var(--good); }
.cmpill--accent { color: var(--accent); }
.cmpill--warn { color: var(--warn); }
.cmpill--muted { color: rgba(var(--ink-rgb), 0.6); }
.cmpill--faint { color: rgba(var(--ink-rgb), 0.45); }
.cmpill--dim { color: rgba(var(--ink-rgb), 0.55); }

.cmside__acts { display: flex; gap: 10px; flex-wrap: wrap; margin: auto 0 0; padding-top: 22px; }

/* -------------------------------- 03 tenancy schedule / floor availability --- */

.cmpanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.cmscroll { overflow-x: auto; }

.cmtable { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; }

.cmcol--unit { width: 84px; }
.cmcol--area { width: 128px; }
.cmcol--from { width: 118px; }
.cmcol--term { width: 132px; }
.cmcol--rent { width: 120px; }
.cmcol--status { width: 108px; }

.cmtable thead tr,
.cmbtable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.cmtable thead th,
.cmbtable thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.cmtable thead th.cmnum,
.cmbtable thead th.cmnum { text-align: right; }

.cmtrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.cmtrow:hover { background: rgba(var(--accent-rgb), 0.06); }

/* `.cmtrow > td` is (0,1,1) and beats a bare class — the rake that flattened
   the unit table in section 67 and `compact-rows` before it. */
.cmtrow > th,
.cmtrow > td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.6);
}

.cmtrow > th.cmtrow__unit { font-weight: 400; letter-spacing: 0.08em; color: var(--accent); }
.cmtrow > td.cmtrow__rent { font-family: var(--serif); font-size: 18px; color: var(--ink); }
/* A break or an expiry inside the horizon is the one date that matters. */
.cmtrow > td.cmtrow__expiry.is-warn { color: var(--warn); }
.cmtrow > td.cmtrow__status { text-align: right; }

.cmtrow__who { display: flex; flex-direction: column; gap: 3px; }
.cmtrow__name { font-size: 13px; font-weight: 300; color: var(--ink); }

.cmtrow__use {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmtable__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ------------------------------- 04 income at risk · 05 before you commit --- */

.cmpair {
  display: grid;
  grid-template-columns: 1.25fr minmax(0, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.cmpane { display: flex; flex-direction: column; min-width: 0; padding: 28px 30px 30px; background: var(--panel-solid); }

.cmpane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cmpane__intro { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.55); }

.cmchart {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 168px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cmbar { display: flex; min-width: 0; flex: 1; }

.cmbar__btn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  cursor: pointer;
}

/* The column is 168px and it holds the value, the bar and the year. A bar at
   100% therefore asks for the whole column and flex shrinks it back to what is
   left after the two labels — the prototype does exactly the same, and its
   tallest bar lands at 122px rather than 168px. Ours lands at 117px: the five
   pixels are the two labels being 12px instead of 11px and 10px, which is the
   site's floor. Five of the six bars match the prototype to the pixel; the
   clamp itself is the design's, not ours. */
.cmbar__value { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
.cmbar.is-on .cmbar__value { color: var(--accent); }
.cmbar__fill { display: block; width: 100%; background: rgba(var(--accent-rgb), 0.45); }
.cmbar.is-on .cmbar__fill { background: var(--accent); }

/* Bar heights as classes — the template carries no inline `style` attributes.
   Each is a share of the tallest bar in its own series, and the builder asserts
   that every class it asks for exists here. */
.cmh--40 { height: 40%; }
.cmh--48 { height: 48%; }
.cmh--54 { height: 54%; }
.cmh--56 { height: 56%; }
.cmh--91 { height: 91%; }
.cmh--94 { height: 94%; }
.cmh--97 { height: 97%; }
.cmh--100 { height: 100%; }

/* A year with nothing expiring keeps a 2px sliver. "Nothing expires in 2029"
   is the message; a missing bar reads as a rendering failure. */
.cmbar--nil .cmbar__fill,
.cmbar--nil.is-on .cmbar__fill { height: 2px; background: rgba(var(--ink-rgb), 0.16); }

.cmbar__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.cmbar.is-on .cmbar__label { color: var(--ink); }

.cmnote {
  margin: 20px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-inner);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}

.cmdils { margin: 18px 0 0; padding: 0; list-style: none; }

.cmdil {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) 108px;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.cmdil__box {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
}

.cmdil--open .cmdil__box { color: var(--warn); }
.cmdil__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmdil__label { font-size: 13px; font-weight: 400; color: rgba(var(--ink-rgb), 0.85); }
.cmdil--open .cmdil__label { color: var(--ink); }
.cmdil__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

.cmdil__state {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.cmdil--open .cmdil__state { color: var(--warn); }
.cmpane__link { margin: auto 0 0; padding-top: 20px; }

/* ------------------------------------------------------------ 06 register --- */

.cmcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.cmcard { min-width: 0; }

.cmcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.cmcard__link:hover,
.cmcard__link:focus-visible { background: var(--panel-hover); }

.cmcard__media {
  position: relative;
  display: block;
  /* 400px по просьбе владельца, вместо прежних 178. */
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-color: rgba(var(--ink-rgb), 0.04);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}

.cmcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cmbadge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
}

.cmbadge--office { background: rgba(var(--accent-rgb), 0.92); }
.cmbadge--retail { background: rgba(var(--ink-rgb), 0.88); }
.cmbadge--logistics { background: rgba(var(--good-rgb), 0.9); }
/* The only sector badge with light text: mixed use sits on the veil. */
.cmbadge--mixed { background: rgba(var(--scrim-rgb), 0.85); color: rgba(var(--ink-rgb), 0.75); }

.cmtenure {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(var(--scrim-rgb), 0.85);
  color: rgba(var(--ink-rgb), 0.75);
}

.cmcard__ref {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}

.cmcard__body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 19px; }
.cmcard__name { font-family: var(--serif); font-size: 19px; line-height: 1.14; }
.cmcard__where { margin-top: 5px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.cmcard__figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cmcard__amount { font-family: var(--serif); font-size: 23px; line-height: 1; }

.cmcard__unit {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* The line that makes a price comparable — never the price on its own. */
.cmcard__second { margin-top: 6px; font-size: 12px; color: var(--accent); }

.cmcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.cmcard__status { font-size: 12px; color: var(--good); }
.cmcard__status--warn { color: var(--warn); }
.cmcard__status--accent { color: var(--accent); }

.cmcard__epc {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* Never a collapsed grid: the panel stays and says why it is empty. */
.cmempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin-top: 18px;
  padding: 30px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
  text-align: center;
}

.cmempty__line { margin: 0; max-width: 460px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------------- 07 benchmarks --- */

.cmbtable { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: collapse; }

.cmbcol--yield { width: 140px; }
.cmbcol--rent { width: 140px; }
.cmbcol--vac { width: 130px; }
.cmbcol--takeup { width: 140px; }
.cmbcol--dir { width: 130px; }

.cmbrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.15s ease; }
.cmbrow:hover { background: rgba(var(--accent-rgb), 0.06); }

.cmbrow > th,
.cmbrow > td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.6);
}

.cmbrow > td.cmbrow__yield { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.cmbrow > td.cmbrow__vac.is-warn { color: var(--warn); }
.cmbrow > td.cmbrow__dir { text-align: right; }

.cmbrow__where { display: flex; flex-direction: column; gap: 3px; }
.cmbrow__sector { font-size: 14px; font-weight: 400; color: var(--ink); }

.cmbrow__city {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.cmdir { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
.cmdir--up { color: var(--good); }
.cmdir--down { color: var(--warn); }

/* --------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .cmstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmcalc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmpick {
    grid-column: 1 / -1;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
  }
  .cmpick__btn { flex: 0 0 240px; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .cmpick__btn.is-on { border-left-color: transparent; border-top-color: var(--accent); }
  .cmpick__note { display: none; }
  .cmledgers { border-right: 1px solid rgba(var(--ink-rgb), 0.16); }
  .cmpair { grid-template-columns: minmax(0, 1fr); }
  .cmcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .cmhead { align-items: flex-start; flex-direction: column; gap: 14px; }
  .cmtitle { font-size: 24px; }
  .cmstats { grid-template-columns: minmax(0, 1fr); }
  /* The mode switch is the page's primary control: full width, two equal
     segments, and it stays above the fold. */
  .cmmode__wrap { width: 100%; }
  .cmmode { flex: 1; }
  .cmmode > span { flex: 1; }
  .cmmode__btn { flex: 1; justify-content: center; min-height: 44px; }
  .cmchips__wrap { width: 100%; }
  .cmchips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .cmchip { flex: 0 0 auto; padding: 11px 14px; min-height: 44px; }
  .cmcalc { grid-template-columns: minmax(0, 1fr); }
  .cmpick { flex-direction: column; overflow-x: visible; }
  .cmpick__btn {
    flex: 0 0 auto;
    border-top: none;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
    border-left: 2px solid transparent;
  }
  .cmpick__btn.is-on { border-top-color: transparent; border-left-color: var(--accent); }
  .cmledgers { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .cmledgers,
  .cmside,
  .cmpane { padding: 22px 18px 24px; }
  .cmrow { grid-template-columns: minmax(0, 1fr) 116px; }
  .cmrow__basis { grid-column: 1; grid-row: 2; }
  .cmrow__value { grid-column: 2; grid-row: 1 / span 2; }
  /* The handoff's floor: no tap target under 44px. The `hover: none` block
     below cannot be relied on for this — a narrow window on a laptop is
     still `hover: hover`, and these two are the section's only CTAs. */
  .cmside__acts .cmbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 100%;
    min-height: 44px;
    text-align: center;
  }
  /* The chart scrolls rather than crushing six columns into 320px. */
  .cmchart { overflow-x: auto; }
  .cmbar { flex: 0 0 68px; }
  .cmdil { grid-template-columns: 13px minmax(0, 1fr); row-gap: 8px; }
  .cmdil__state { grid-column: 2; text-align: left; }
  .cmcards { grid-template-columns: minmax(0, 1fr); }
  .cmcard__media { height: 200px; }
  .cmempty { padding: 24px 18px; }
}

@media (hover: none) {
  .cmchip { padding: 11px 14px; min-height: 44px; }
  .cmmode__btn,
  .cmpick__btn,
  .cmbar__btn,
  .cmbtn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmcard__link,
  .cmchip,
  .cmmode__btn,
  .cmpick__btn,
  .cmtrow,
  .cmbrow { transition: none; }
}

/* ==========================================================================
   73. Home detail v5 — two sidebars, and the reviews under all three
   --------------------------------------------------------------------------
   v4 sells the apartment. **v5 sells the file and the person holding it.**

   Three columns: the evidence on the left (the four checks with their dates,
   the five documents you can download before making an offer, the price
   history), the property in the middle, the transaction on the right (the
   agent, the viewing slots, the cost of owning). Then, full width under all
   three, the reviews — of the agent AND of this file — with the form.

   THREE RULES
   -----------
   1. **The measured area beats the deed, everywhere.** 132 m² against 140 on
      the deed, and the price per m² is computed on 132. Stated in the callout,
      tinted in the specification, repeated in a review.
   2. **A review names what it is about.** Every one carries an `Agent` or
      `Property` tag and a verification line. An untagged, unverified review
      does not belong on this page.
   3. **Both sidebars are sticky, so the centre must be the tallest column.**
      When the reviews moved out of the centre to full width, the centre came
      up ~600px short and left a visible void beside the sticky sidebars —
      which is why `The building` and `The street` exist. If you remove centre
      content, replace it.

   THE SIDEBARS RUN ONE STEP SMALLER than the centre — 9px section labels
   (12px here, the floor), 12px rows, 11px notes — so a 292px column reads as
   a margin note rather than as a competing column.

   Two site-wide departures, as in sections 67-72: nothing renders below 12px
   (Envato), and no literal colours appear outside the tokens.
   ========================================================================== */

/* The site body sets `line-height: 1.6`; the reference leaves it at `normal`
   almost everywhere. Reset first, then state it where it matters — the same
   discipline as sections 67-72, and the reason section 66 needed re-aligning
   after the fact. */
.p5wrap,
.p5wrap * { line-height: normal; }

.p5wrap { margin: 0 var(--pad-hero); }

/* --------------------------------------------------------- 01 file head --- */

.p5head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vh, 28px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.p5sheet {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.p5sheet__rule { width: 26px; height: 1px; background: rgba(var(--accent-rgb), 0.5); }
.p5sheet__days { color: rgba(var(--ink-rgb), 0.5); }

.p5meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.6);
}

.p5meta > li { display: flex; align-items: baseline; gap: 7px; }
.p5meta__value { color: var(--accent); }
.p5head__right { text-align: right; }

.p5price {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 2.8vw, 46px);
  line-height: 1;
  color: var(--ink);
}

.p5persqm {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.p5persqm .is-ok { color: var(--good); }

/* ----------------------------------------------------------- 02 gallery --- */
/* The row height was raised twice in review, 168 → 232 → 302: at 168 the
   frames were far wider than tall and read as a banner strip rather than as
   photographs. If the column ratios change, change the row height with them. */

.p5gallery {
  display: grid;
  grid-template-columns: 1.62fr minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 302px;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.p5gallery > li { display: block; min-width: 0; }
.p5gallery > li.is-lead { grid-row: span 2; }
.p5frame { position: relative; display: block; height: 100%; min-width: 0; overflow: hidden; background: rgba(var(--ink-rgb), 0.06); }
.p5frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p5frame__plate {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  background: var(--hero-plate);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-ink-dim);
}

.p5frame__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--scrim-rgb), 0.72);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
}

/* ------------------------------------------------------- the three columns --- */

.p5main {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr) 340px;
  gap: clamp(18px, 1.8vw, 26px);
  align-items: start;
  margin-top: clamp(24px, 3.2vh, 34px);
}

/* 146px = the 38px utility bar + the 92px header + 16px of breathing room. */
.p5side {
  position: sticky;
  top: 146px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.p5centre { min-width: 0; }

.p5panel {
  min-width: 0;
  padding: 20px 22px 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.p5panel--flush { padding: 0; }
.p5panel--centre { padding: 24px 26px 26px; }
.p5panel--calc { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

/* The section rule: a label, a hairline that fills the row, an optional note.
   Used ten times on this page — do not vary it. Sidebars take `--sm`. */
.p5rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.p5rule--sm { gap: 11px; }
.p5rule__line { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.p5rule__note { color: rgba(var(--ink-rgb), 0.5); }

.p5rule--section {
  margin-top: clamp(22px, 2.8vh, 30px);
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

/* ------------------------------------------------- left sidebar: evidence --- */

.p5list { display: flex; flex-direction: column; margin: 14px 0 0; padding: 0; list-style: none; }
.p5list--tight { margin-top: 12px; }

.p5check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}


.p5check__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid var(--good);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--good);
}

.p5check__body { flex: 1; min-width: 0; }
.p5check__title { display: block; font-size: 12px; color: var(--ink); }
.p5check__detail { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.p5check__when {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.p5doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.p5doc:hover,
.p5doc:focus-visible { color: var(--accent); }
.p5doc:hover .p5doc__label,
.p5doc:focus-visible .p5doc__label,
.p5doc:hover .p5doc__kind,
.p5doc:focus-visible .p5doc__kind { color: var(--accent); }

.p5doc__kind {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
  transition: color 0.25s ease;
}

.p5doc__label { flex: 1; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); transition: color 0.25s ease; }
.p5doc__size { font-size: 12px; color: rgba(var(--ink-rgb), 0.38); }
.p5docs__foot { margin: 11px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.38); }

.p5hist {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 74px;
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--scrim-rgb), 0.5);
  list-style: none;
}

.p5hist__bar { flex: 1; min-width: 0; background: rgba(var(--ink-rgb), 0.22); }
.p5hist__bar.is-now { background: var(--accent); }
.p5hist__bar--h92 { height: 92%; }
.p5hist__bar--h89 { height: 89.24%; }

.p5prows { margin: 0; padding: 0; }

.p5prow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5prow__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p5prow__value { margin: 0; font-size: 12px; color: var(--ink); }
.p5prow__value.is-muted { color: rgba(var(--ink-rgb), 0.66); }
.p5prow__value.is-ok { color: var(--good); }

/* --------------------------------------------------- centre: the property --- */

.p5para {
  margin: 15px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.76;
  color: rgba(var(--ink-rgb), 0.66);
  text-wrap: pretty;
}

.p5para + .p5para { margin-top: 13px; }

.p5callout {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.p5callout__figure { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
.p5callout__text { flex: 1; min-width: 220px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink); }

.p5rooms { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 18px; margin-top: 18px; }

.p5plan {
  position: relative;
  display: block;
  min-height: 290px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background-color: rgba(var(--scrim-rgb), 0.5);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  overflow: hidden;
}

/* The plan wrapper is only ~183px wide inside the three-column grid — a third
   of what v4 had. Fixed two-line labels overflowed the small rooms and
   collided with their neighbours (`Bathrooms 8.4 m²` spilled 17px past a 27px
   box). The fix is at the source: narrow rooms take a short tag and drop the
   area line. Nothing is lost — the hovered room's full name and area are
   printed in the section note, and the accessible name carries both. */
.p5room {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 3px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  background: transparent;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.p5room__tag,
.p5room__area {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.38);
  transition: color 0.25s ease;
}

.p5room__tag { letter-spacing: 0.08em; text-transform: uppercase; }
.p5room.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.p5room.is-on .p5room__tag,
.p5room.is-on .p5room__area { color: var(--accent); }
.p5room:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.p5room--0 { left: 6%; top: 8%; width: 42%; height: 40%; }
.p5room--1 { left: 50%; top: 8%; width: 28%; height: 30%; }
.p5room--2 { left: 6%; top: 52%; width: 34%; height: 38%; }
.p5room--3 { left: 42%; top: 52%; width: 28%; height: 38%; }
.p5room--4 { left: 72%; top: 52%; width: 22%; height: 38%; }
.p5room--5 { left: 78%; top: 8%; width: 16%; height: 20%; }
.p5room--6 { left: 78%; top: 31%; width: 16%; height: 15%; }

.p5fig {
  position: absolute;
  left: 14px;
  bottom: 11px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.p5roomlist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.p5roomrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

.p5roomrow__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.p5roomrow__name { display: block; font-size: 12px; font-weight: 300; color: var(--ink); transition: color 0.2s ease; }
.p5roomrow__dims { display: block; margin-top: 2px; font-size: 12px; color: rgba(var(--ink-rgb), 0.38); }
.p5roomrow__area { text-align: right; font-family: var(--serif); font-size: 15px; color: var(--ink); transition: color 0.2s ease; }

.p5roomrow__btn:hover,
.p5roomrow__btn:focus-visible,
.p5roomrow__btn.is-on { background: rgba(var(--accent-rgb), 0.1); }
.p5roomrow__btn:hover .p5roomrow__name,
.p5roomrow__btn:focus-visible .p5roomrow__name,
.p5roomrow__btn.is-on .p5roomrow__name,
.p5roomrow__btn:hover .p5roomrow__area,
.p5roomrow__btn:focus-visible .p5roomrow__area,
.p5roomrow__btn.is-on .p5roomrow__area { color: var(--accent); }

.p5pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin: 6px 0 0; }

.p5pair {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5pair__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p5pair__value { margin: 0; text-align: right; font-size: 12px; color: var(--ink); }
.p5pair__value.is-accent { color: var(--accent); }
.p5pair__value.is-muted { color: rgba(var(--ink-rgb), 0.66); }
.p5pair__value.is-ok { color: var(--good); }

.p5street { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; margin-top: 18px; }

.p5map {
  position: relative;
  display: block;
  min-height: 210px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background-color: rgba(var(--scrim-rgb), 0.5);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.p5road { position: absolute; background: rgba(var(--ink-rgb), 0.22); }
.p5road--h { left: 0; top: 54%; width: 100%; height: 2px; }
.p5road--v { left: 34%; top: 0; width: 2px; height: 100%; }
.p5road--far { left: 68%; top: 0; width: 2px; height: 100%; background: rgba(var(--ink-rgb), 0.14); }

/* Съёмка плана улицы. Лежит поверх чертёжной сетки и трёх улиц — они
   остаются под ней как запасной вариант, если файла нет. Плашка с номером
   листа и подпись идут в разметке следом, поэтому читаются поверх. */
.p5map__shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.p5pin {
  position: absolute;
  left: 44%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 11px;
  border: 1px solid var(--accent);
  background: var(--pin-bg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}

.p5walks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.p5walk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5walk__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p5walk__dist { text-align: right; font-size: 12px; color: rgba(var(--ink-rgb), 0.66); }

/* The one thing the photographs cannot tell you. It is numbered because it is
   evidence, not a caption. */
.p5note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 20px;
  padding: 15px 18px;
  border-left: 2px solid rgba(var(--ink-rgb), 0.28);
  background: var(--panel);
}

.p5note__num { font-family: var(--serif); font-size: 22px; line-height: 1; color: rgba(var(--ink-rgb), 0.5); }
.p5note__text { flex: 1; min-width: 0; font-size: 12px; font-weight: 300; line-height: 1.62; color: rgba(var(--ink-rgb), 0.66); }

/* ------------------------------------------------ right sidebar: the deal --- */

/* Высоты нет намеренно. В хендоффе стояло 210px, и портрет резался по
   грудь; владелец поднимал его дважды и в итоге попросил показать снимок
   целиком. Теперь коробка берёт высоту от самой фотографии, `cover` не
   нужен — обрезать нечего. */
.p5portrait { position: relative; display: block; overflow: hidden; background: rgba(var(--ink-rgb), 0.06); }
.p5portrait img { display: block; width: 100%; height: auto; }

.p5portrait__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(var(--scrim-rgb), 0.9) 100%);
}

.p5portrait__id { position: absolute; left: 20px; bottom: 16px; pointer-events: none; }
.p5agent__name { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--hero-ink); }

.p5agent__role {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--hero-ink-rgb), 0.7);
}

.p5licence {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 10px;
  background: var(--hero-plate);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ok-bright);
}

.p5agent__body { display: block; padding: 18px 20px 20px; }
.p5stars { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; color: var(--accent); }
.p5stars__glyphs { letter-spacing: 0.1em; }
.p5stars__count { font-size: 12px; color: rgba(var(--ink-rgb), 0.6); }
.p5agent__blurb { margin: 11px 0 0; font-size: 12px; font-weight: 300; line-height: 1.62; color: rgba(var(--ink-rgb), 0.66); }

.p5stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.p5stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  padding-right: 12px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5stat--last { border-right: none; padding-right: 0; }
.p5stat__value { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--ink); }
.p5stat__value.is-accent { color: var(--accent); }

.p5stat__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.p5acts { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 0; }

.p5btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.p5btn--solid { border: none; background: var(--accent); color: var(--on-accent); }
.p5btn--solid:hover,
.p5btn--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.p5btn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.p5btn--ghost:hover,
.p5btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.p5reply {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.45);
}

.p5dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }

.p5slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; border: none; }
.p5slots__legend { padding: 0; }
.p5slot__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.p5slot {
  display: block;
  padding: 11px 4px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  text-align: center;
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.p5slot__time { display: block; margin-top: 3px; font-size: 12px; }
.p5slot:hover { border-color: var(--accent); color: var(--accent); }
.p5slot__input:checked + .p5slot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.p5slot__input:focus-visible + .p5slot { outline: 2px solid var(--accent); outline-offset: 2px; }
.p5book__cta { width: 100%; margin-top: 12px; }

/* ------------------------------------------------------- the calculator --- */

.p5calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.p5link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.p5link:hover,
.p5link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.p5field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.p5field + .p5field { margin-top: 14px; }

.p5field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p5field__note { color: var(--accent); }

.p5field__row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.28);
}

.p5field__fix { font-size: 12px; color: rgba(var(--ink-rgb), 0.38); }

.p5field__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
}

.p5field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The reference leaves the track to the browser and gets a white rail on a
   dark panel; `0.1` is this handoff's own value for a bar track. */
.p5range { width: 100%; height: 3px; background: rgba(var(--ink-rgb), 0.1); accent-color: var(--accent); }

.p5terms { display: flex; margin: 14px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.28); }
.p5terms__legend { padding: 0; }
.p5term__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.p5term {
  flex: 1;
  padding: 10px 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.p5term--last { border-right: none; }
.p5term:hover { color: var(--accent); }
.p5term__input:checked + .p5term { background: var(--accent); color: var(--on-accent); }
.p5term__input:focus-visible + .p5term { outline: 2px solid var(--accent); outline-offset: 2px; }

.p5total { margin: 18px 0 0; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); }

.p5total__note {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p5bar { display: flex; height: 10px; margin: 14px 0 0; border: 1px solid rgba(var(--ink-rgb), 0.1); }
.p5seg { display: block; height: 100%; }
.p5seg--1 { background: var(--accent); }
.p5seg--2 { background: rgba(var(--accent-rgb), 0.55); }
.p5seg--3 { background: rgba(var(--ink-rgb), 0.42); }
.p5seg--4 { background: rgba(var(--ink-rgb), 0.2); }

.p5breaks { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; }

.p5break {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5break--last { border-bottom: none; }
.p5break__label { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }
.p5swatch { flex: 0 0 auto; width: 7px; height: 7px; }
.p5swatch--1 { background: var(--accent); }
.p5swatch--2 { background: rgba(var(--accent-rgb), 0.55); }
.p5swatch--3 { background: rgba(var(--ink-rgb), 0.42); }
.p5swatch--4 { background: rgba(var(--ink-rgb), 0.2); }
.p5break__value { margin: 0; font-family: var(--serif); font-size: 15px; color: var(--ink); }

.p5cash {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.p5cash__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.p5cash__value { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.p5calc__foot { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------------- the reviews --- */

.p5reviews { margin-top: clamp(30px, 4vh, 46px); }

.p5reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3.4vh, 38px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.p5rule__stub { width: 28px; height: 1px; background: var(--accent); }
.p5write { padding: 11px 20px; border: 1px solid var(--accent); }

.p5summary {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.p5score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-right: 24px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
}

.p5score__value { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--accent); }
.p5score__stars { font-size: 13px; letter-spacing: 0.12em; color: var(--accent); }
.p5score__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.p5dist { display: flex; flex-direction: column; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.p5distrow { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }

.p5distrow__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p5distrow__track { display: block; height: 6px; background: rgba(var(--ink-rgb), 0.1); }

/* Scaled against the largest bucket, not the total: the 5-star bar is full
   width and the rest are read relative to it. */
.p5distrow__fill { display: block; height: 6px; background: rgba(var(--accent-rgb), 0.45); }
.p5distrow__fill.is-major { background: var(--accent); }
.p5distrow__count { text-align: right; font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }

.p5w--100 { width: 100%; }
.p5w--18 { width: 18%; }
.p5w--5 { width: 5%; }
.p5w--1 { width: 1%; }

.p5reviews__body {
  display: grid;
  grid-template-columns: 1.42fr minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 34px);
  align-items: start;
  margin-top: 4px;
}

.p5tabs { display: flex; width: fit-content; margin: 18px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }
.p5tabs__legend { padding: 0; }
.p5tab__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.p5tab {
  display: block;
  padding: 9px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.p5tab--last { border-right: none; }
.p5tab__count { opacity: 0.6; }
.p5tab:hover { color: var(--accent); }
.p5tab__input:checked + .p5tab { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.p5tab__input:focus-visible + .p5tab { outline: 2px solid var(--accent); outline-offset: 2px; }

.p5rlist { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.p5review { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.p5review[hidden] { display: none; }

.p5review__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  object-fit: cover;
}

.p5review__body { min-width: 0; }
.p5review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.p5review__who { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.p5review__name { font-size: 14px; color: var(--ink); }

.p5review__date {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.p5tag {
  padding: 3px 8px;
  border: 1px solid currentcolor;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.p5tag--property { color: rgba(var(--ink-rgb), 0.4); }
.p5review__stars { font-size: 12px; letter-spacing: 0.1em; color: var(--accent); }
.p5review__text { display: block; margin-top: 9px; font-size: 13px; font-weight: 300; line-height: 1.68; color: rgba(var(--ink-rgb), 0.66); text-wrap: pretty; }

.p5review__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 11px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.p5review__ok { color: var(--good); }

.p5seeall {
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.p5seeall:hover,
.p5seeall:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* -------------------------------------------------------------- the form --- */

.p5formcol { position: sticky; top: 146px; }

.p5form {
  margin-top: clamp(26px, 3.4vh, 38px);
  padding: 24px 26px 26px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.p5form__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.p5form__label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.p5form__aside { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.p5form__heading {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.p5form__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.p5group { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: none; }

.p5group__legend,
.p5field__name {
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p5switch { display: flex; border: 1px solid rgba(var(--ink-rgb), 0.28); }
.p5switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.p5switch__btn {
  display: block;
  padding: 10px 18px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.p5switch__btn--last { border-right: none; }
.p5switch__btn:hover { color: var(--accent); }
.p5switch__input:checked + .p5switch__btn { background: var(--accent); color: var(--on-accent); }
.p5switch__input:focus-visible + .p5switch__btn { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The rating is a radio group, not five buttons: arrow keys move it and the
   chosen value survives a hover preview. */
.p5rating { display: flex; align-items: center; gap: 6px; }
.p5star__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.p5star {
  font-size: 22px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.22);
  cursor: pointer;
  transition: color 0.15s ease;
}

.p5star.is-lit { color: var(--accent); }
.p5star__input:focus-visible + .p5star { outline: 2px solid var(--accent); outline-offset: 2px; }
.p5rating__word { margin-left: 8px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.p5fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.p5field--block { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.p5input,
.p5textarea {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}

.p5textarea { font-weight: 300; line-height: 1.6; resize: vertical; }
.p5input:focus-visible,
.p5textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.p5form__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.p5form__promise { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.p5submit { padding: 14px 26px; border: none; font-size: 12px; }

/* ------------------------------------------------------- 07 comparables --- */

.p5sims { margin-top: clamp(28px, 3.8vh, 42px); margin-bottom: 40px; }

.p5sims__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.p5sims__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 0 0; padding: 0; list-style: none; }

.p5sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.p5sims__grid:hover .p5sim { opacity: 0.62; }
.p5sims__grid:hover .p5sim:hover,
.p5sim:focus-visible { opacity: 1; border-color: var(--accent); transform: translateY(-4px); }

.p5sim__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.p5sim__status { color: var(--accent); }
/* 280px по просьбе владельца, вместо прежних 150. */
.p5sim__media { position: relative; display: block; aspect-ratio: 3 / 2; height: auto; overflow: hidden; background: rgba(var(--ink-rgb), 0.06); }
.p5sim__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p5sim__body { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 4px; }
.p5sim__title { font-family: var(--serif); font-size: 18px; line-height: 1.12; color: var(--ink); }
.p5sim__meta { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.66); }

.p5sim__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.p5sim__price { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.p5sim__per { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.p5sim__per.is-higher { color: var(--refused); }

/* The last row in each list drops its rule. Placed here on purpose: grouped
   near the top of the section it lost to the rules below it on source order
   and four hairlines came back. */
.p5check--last,
.p5doc--last,
.p5prow--last,
.p5walk--last,
.p5roomrow--last { border-bottom: none; }

/* ------------------------------------------------------------- 1279 --- */

/* The plan goes above the list from 1280 down, earlier than the handoff's own
   1180 breakpoint. Its label rule is written for 8-9px type (§5.3) and ours is
   12px — the site floor — so the same boxes need roughly a third more width.
   Beside the list at 1180 the plan is ~222px and six of the seven labels clip;
   stacked it is ~456px and none do. The thresholds stay where the handoff put
   them; only the width they get changes. */
@media (max-width: 1279px) {
  .p5rooms { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  /* A sticky column in a stacked layout traps the scroll. */
  .p5main { grid-template-columns: minmax(0, 1fr) 340px; }
  .p5side,
  .p5formcol { position: static; }
  .p5side--evidence {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .p5gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .p5frame--lead { grid-row: span 1; }
  .p5reviews__body { grid-template-columns: minmax(0, 1fr); }
  .p5sims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The plan goes above the list here. In the two-column grid it would be
     narrower than the 183px it was tuned for, and the small rooms' labels
     start to overflow again — the thresholds are set at the source, and the
     source does not know the column width. */
  .p5rooms,
  .p5street { grid-template-columns: minmax(0, 1fr); }
  /* Tablet is touch. `hover: none` cannot carry this alone — a narrow window
     on a laptop is still `hover: hover`. */
  .p5tab,
  .p5term,
  .p5slot,
  .p5btn,
  .p5submit,
  .p5write { min-height: 44px; }
  .p5tab,
  .p5term,
  .p5slot { display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .p5star { padding: 4px 3px; }
}

/* -------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .p5head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .p5head__right { text-align: left; }
  .p5gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; }
  .p5main { grid-template-columns: minmax(0, 1fr); }
  .p5side--evidence { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .p5rooms,
  .p5street { grid-template-columns: minmax(0, 1fr); }
  /* The plan is wide again down here, so the small rooms can carry both
     lines — the suppression rule is about the 183px column, not about
     mobile. */
  .p5room__area { display: block; }
  .p5pairs { grid-template-columns: minmax(0, 1fr); }
  .p5summary { grid-template-columns: minmax(0, 1fr); }
  .p5score { padding-right: 0; padding-bottom: 18px; border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }
  .p5tabs { width: 100%; flex-wrap: wrap; }
  .p5tab { flex: 1; min-height: 44px; text-align: center; }
  .p5fields { grid-template-columns: minmax(0, 1fr); }
  .p5sims__grid { grid-template-columns: minmax(0, 1fr); }
  .p5star { padding: 0 4px; font-size: 26px; }
  .p5slot,
  .p5term,
  .p5btn,
  .p5submit,
  .p5write { min-height: 44px; }
  .p5slot,
  .p5term { display: flex; align-items: center; justify-content: center; flex-direction: column; }
}

@media (hover: none) {
  .p5slot,
  .p5term,
  .p5btn,
  .p5submit,
  .p5write,
  .p5roomrow__btn { min-height: 44px; }
  .p5sims__grid:hover .p5sim { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .p5sim,
  .p5room,
  .p5roomrow__btn { transition: none; }
  .p5sims__grid:hover .p5sim:hover { transform: none; }
}

/* ==========================================================================
   74. All properties — an address index, not a listing grid
   --------------------------------------------------------------------------
   This is the page you land on from a search engine when you type your own
   street, and the page that proves the register is complete rather than
   curated. One editorial premise, and every section serves it:

       **Every address has exactly one file, whether or not it is for sale.**

   THE INDEX IS ONE DATASET READ BY FIVE SECTIONS
   ----------------------------------------------
   Three review rounds were lost to breaking that:

   1. A file reference names ONE address. An early generator built references
      by adding scaled indices, and its stride was smaller than the largest
      district's street count — four references named two properties each.
      References are positional digit groups now, and the builder asserts
      uniqueness across every city and district.
   2. The register never shows an address from another district: rows are
      GENERATED from the selected district's own streets, never authored
      beside them.
   3. §04's record is one of the rows §03 renders — not a hand-written example
      whose reference the generator would eventually emit anyway.

   TYPE, AREA AND RENT TRAVEL TOGETHER. An earlier version cycled a six-entry
   type list against a ten-entry area list and produced "Apartment · 1 bed /
   212 m²", a studio quoted above a townhouse.

   NO IMAGES, DELIBERATELY. An index is text; a photograph on a row would halve
   the addresses visible per screen.

   Two site-wide departures, as in sections 67-73: nothing renders below 12px
   (Envato), and no literal colours appear outside the tokens.
   ========================================================================== */

/* The site body sets `line-height: 1.6`; the reference leaves it at `normal`
   almost everywhere and states it only where it matters. */
.apwrap,
.apwrap * { line-height: normal; }

.apwrap { margin: 0 var(--pad-hero); }

.apsec {
  margin-top: clamp(40px, 5vh, 62px);
  padding-top: clamp(28px, 3.4vh, 40px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.apsec--open { margin-top: 0; padding-top: clamp(26px, 3.2vh, 36px); border-top: none; }
/* §02 continues §01 — no rule between them, and a tighter gap than a section
   break would take. */
.apsec--joined { margin-top: clamp(34px, 4.2vh, 46px); padding-top: 0; border-top: none; }
.apsec--last { margin-bottom: clamp(48px, 6vh, 72px); }

/* ---------------------------------------------------------- section head --- */

.aphead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.aphead--wide { gap: 32px; }
.aphead--base { align-items: baseline; }
.aphead__left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }

.aplabel {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.aptitle { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--ink); }
.apindex { margin: 0; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.55); }
/* Freshness is the credibility of an index. */
.apfresh { margin: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.aphead__note { margin: 0; min-width: 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.aplink {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.aplink:hover,
.aplink:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------- 01 the search bar --- */

.apsearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  margin-top: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.apsearch__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 17px 20px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.12);
}

.apsearch__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* Chrome-free on purpose: the bar is the chrome. */
.apsearch__input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

.apsearch__input::placeholder { color: rgba(var(--ink-rgb), 0.45); }
.apsearch__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.apsearch__btn {
  border: none;
  border-radius: 0;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.apsearch__btn:hover,
.apsearch__btn:focus-visible { background: var(--accent-hover); color: var(--bg); }

/* ----------------------------------------------------- 01 the letter rail --- */

.aprail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  margin: 14px 0 0;
  padding: 0;
  border: none;
}

.aprail__legend {
  padding: 0 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.aprail__set { position: relative; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.apletter__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.apletter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
}

/* A letter no district street starts with. It keeps its place — the alphabet
   with holes in it is information — but it is not a control. */
.apletter--off { border-color: rgba(var(--ink-rgb), 0.07); color: rgba(var(--ink-rgb), 0.22); cursor: default; }
.apletter__input:checked + .apletter {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  cursor: pointer;
}
.apletter__input:focus-visible + .apletter { outline: 2px solid var(--accent); outline-offset: 2px; }
.apletter__input:disabled + .apletter { cursor: default; }

/* ------------------------------------------------------- 02 the directory --- */

.apdir {
  display: grid;
  grid-template-columns: 220px 240px minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.apcol { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid rgba(var(--ink-rgb), 0.16); }

.apcol__head {
  margin: 0;
  padding: 15px 18px 12px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* Same type as a column head, without the rule under it. */
.apcol__head--plain { padding: 0; border-bottom: none; }

.appicks { margin: 0; padding: 0; list-style: none; }

.appick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.appick__name { font-size: 13px; font-weight: 400; color: rgba(var(--ink-rgb), 0.72); }
.appick__count { font-size: 12px; color: rgba(var(--ink-rgb), 0.35); }
.appick:hover .appick__name { color: var(--ink); }
.appick.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.appick.is-on .appick__name { color: var(--ink); }
.appick.is-on .appick__count { color: var(--accent); }
.appick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.apstreets { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px 22px; }
.apstreets__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.apstreets__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }

.apstreets__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 26px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.apstreet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.72);
  text-decoration: none;
}

.apstreet:hover,
.apstreet:focus-visible { color: var(--accent); }
.apstreet__count { font-size: 12px; color: rgba(var(--ink-rgb), 0.35); }

/* The SEO promise, stated in words on the page it is about. */
.apdir__note {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

/* -------------------------------------------------------- 03 the register --- */

.apchips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.apchips__legend {
  padding: 0 4px 0 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.apchips__set { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.apchip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.apchip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
}

.apchip__count { opacity: 0.6; }
.apchip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.apchip__input:checked + .apchip {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.apchip__input:focus-visible + .apchip { outline: 2px solid var(--accent); outline-offset: 2px; }

.appanel { margin-top: 18px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.apscroll { overflow-x: auto; }

.aptable { width: 100%; min-width: 980px; table-layout: fixed; border-collapse: collapse; }
.apcol--file { width: 96px; }
.apcol--type { width: 150px; }
.apcol--area { width: 118px; }
.apcol--figure { width: 128px; }
.apcol--updated { width: 120px; }
.apcol--status { width: 104px; }

.aptable thead tr,
.apctable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.aptable thead th,
.apctable thead th {
  padding: 12px 20px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.aptable thead th.apnum,
.apctable thead th.apnum { text-align: right; }

.aprow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.aprow:hover,
.aprow.is-on,
.aprow:focus-within { background: rgba(var(--accent-rgb), 0.06); }

/* `.aprow > td` is (0,1,1) and beats a bare class — the rake that flattened
   the unit table in section 67 and the walking distances in section 66. */
.aprow > th,
.aprow > td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.6);
}

.aprow > th.aprow__file { font-weight: 400; letter-spacing: 0.08em; color: var(--accent); }
.aprow > td.aprow__figure { font-family: var(--serif); font-size: 17px; color: var(--ink); }
/* Off market prints a dash, and the dash is dimmer than a price: it is the
   absence of a figure, not a figure of zero. */
.aprow > td.aprow__figure.is-none { color: rgba(var(--ink-rgb), 0.35); }
.aprow > td.aprow__updated { color: rgba(var(--ink-rgb), 0.5); }
.aprow > td.aprow__status { text-align: right; }

.aprow__link { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.aprow__address { font-size: 13px; font-weight: 300; color: var(--ink); }
.aprow__link:hover .aprow__address,
.aprow__link:focus-visible .aprow__address { color: var(--accent); }

.aprow__where {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.appill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentcolor;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.appill--sale { color: var(--accent); }
.appill--rent { color: var(--good); }
.appill--sold { color: rgba(var(--ink-rgb), 0.5); }
.appill--soon { color: var(--warn); }
.appill--off { color: rgba(var(--ink-rgb), 0.35); }

/* Never a collapsed table: the panel stays and names both filters. */
.apempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 30px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.apempty[hidden] { display: none; }
.apempty__line { margin: 0; max-width: 460px; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

.apfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ---------------------------------------------------------- 04 the record --- */

.aprecord {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.appane { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px 28px; background: var(--panel-solid); }

.appane__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.apdocs { margin: 16px 0 0; padding: 0; }

.apdoc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.apdoc__mark {
  display: grid;
  place-items: center;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border: 1px solid currentcolor;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.apdoc--none .apdoc__mark { color: rgba(var(--ink-rgb), 0.3); }
.apdoc__label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.78);
}
.apdoc--none .apdoc__label { color: rgba(var(--ink-rgb), 0.45); }

.apdoc__date {
  margin: 0;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.aphist { margin: 16px 0 0; padding: 0; list-style: none; }

.aphist__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 104px;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.aphist__year {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.aphist__event { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.7); }
.aphist__figure { text-align: right; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.aphist__figure.is-none { color: rgba(var(--ink-rgb), 0.35); }

.apgrowth {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}

.apgrowth__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.apgrowth__value { font-size: 12px; color: var(--good); }
.apstate { margin: 14px 0 0; font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--accent); }
.apnote { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.6); }

.apstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 1px solid rgba(var(--ink-rgb), 0.16);
}

.apstat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.apstat__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.apstat__value { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1; color: var(--ink); }
.apacts { display: flex; gap: 10px; flex-wrap: wrap; margin: auto 0 0; padding-top: 22px; }
.apbtn { padding: 12px 18px; border-radius: 0; font-size: 12px; letter-spacing: 0.2em; }
.apbtn--solid { color: var(--bg); font-weight: 600; }

.apbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: rgba(var(--ink-rgb), 0.8);
  font-weight: 500;
}

.apbtn--ghost:hover,
.apbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------- 05 the coverage --- */

.apctable { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; }
.apccol--n { width: 120px; }
.apccol--off { width: 130px; }
.apccol--total { width: 130px; }

.apcrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.apcrow:hover { background: rgba(var(--accent-rgb), 0.06); }

.apcrow > th,
.apcrow > td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.6);
}

/* Dimmer on purpose: it is the part that is not for sale. */
.apcrow > td.apcrow__off { color: rgba(var(--ink-rgb), 0.45); }
.apcrow > td.apcrow__total { text-align: right; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.apcrow__city { display: flex; flex-direction: column; gap: 3px; }
.apcrow__name { font-size: 14px; font-weight: 400; color: var(--ink); }

.apcrow__districts {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ---------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  .apdir { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .apstreets { grid-column: 1 / -1; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
  .apstreets__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apcol:nth-child(2) { border-right: none; }
  .aprecord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appane:last-child { grid-column: 1 / -1; }
  /* The handoff names these as the tightest targets on the site and says they
     must grow on touch. `hover: none` cannot carry tablet on its own — a narrow
     window on a laptop is still `hover: hover`. */
  .apletter { min-width: 44px; height: 44px; }
  .apchip,
  .appick,
  .apsearch__btn,
  .apbtn { min-height: 44px; }
}

/* ---------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .aphead,
  .aphead--wide,
  .aphead--base { align-items: flex-start; flex-direction: column; gap: 16px; }
  .aptitle { font-size: 24px; }
  .apsearch { grid-template-columns: minmax(0, 1fr); }
  .apsearch__field { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
  .apsearch__btn { min-height: 44px; padding: 14px 0; }
  /* The rail scrolls rather than wrapping into six ragged lines. */
  .aprail__set { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .apletter { flex: 0 0 auto; min-width: 44px; height: 44px; }
  .apchips { width: 100%; }
  .apchips__set { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .apchip { flex: 0 0 auto; min-height: 44px; }
  .apdir { grid-template-columns: minmax(0, 1fr); }
  .apcol { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
  .apstreets { border-top: none; }
  .apstreets__list { grid-template-columns: minmax(0, 1fr); }
  .appick { min-height: 44px; }
  .aprecord { grid-template-columns: minmax(0, 1fr); }
  .appane:last-child { grid-column: auto; }
  .apacts .apbtn { flex: 1 0 100%; text-align: center; min-height: 44px; }
}

@media (hover: none) {
  .apletter { min-width: 44px; height: 44px; }
  .apchip,
  .appick,
  .apsearch__btn,
  .apbtn { min-height: 44px; }
}

/* ==========================================================================
   75. User dashboard — the buyer's desk
   --------------------------------------------------------------------------
   Not a welcome screen. Its premise:

       **A purchase is one long process with a next action. The dashboard's job
       is to say where you are and what that next action is — before it shows
       you anything else.**

   So the page does not open on statistics. It opens on a greeting that names a
   specific property and a specific position in the process, and §02 is a
   five-step tracker with a call to action on the file the buyer has seen
   twice. Everything below is evidence for the same story: what is booked, what
   is new, what moved, what is watched, who wrote.

   THREE RULES
   -----------
   1. **Every number is a door.** All four stat tiles are links to the page
      that owns them. A figure with no route to its detail is decoration.
   2. **The agent is a person, not a support form.** She sits in the rail with
      a face, a desk, a reply time and one button.
   3. **The rail is sticky, so the main column must be the tallest.** All five
      dashboard pages share that constraint.

   THE RAIL IS SHARED BY FIVE PAGES and renders the same eight items on each,
   differing only in which is active and in its badges. Its badges and §01's
   tiles read the same counts — the rail saying 8 while the tile says 14 is the
   first bug a real user finds, and it existed in an early draft.

   THE THIRD MATCH COLOUR IS THE POINT of §04: `over your ceiling` prints in
   `--refused`. A dashboard that only shows flattering matches is a brochure.

   Two site-wide departures, as in sections 67-74: nothing renders below 12px
   (Envato), and no literal colours appear outside the tokens.
   ========================================================================== */

/* The site body sets `line-height: 1.6`; the reference leaves it at `normal`
   almost everywhere and states it where it matters. */
.dbpage,
.dbpage * { line-height: normal; }

.dbpage {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  align-items: start;
  margin: clamp(22px, 3vh, 32px) var(--pad-hero) clamp(48px, 6vh, 72px);
}

/* ------------------------------------------------------------- the rail --- */
/* 146px = the 38px utility bar + the 92px header + 16px of breathing room. */

.dbrail {
  position: sticky;
  top: 146px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dbblock { min-width: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.dbblock--agent { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }

.dbme {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  margin: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.dbmono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  object-fit: cover;
}

.dbme__name { display: block; font-size: 13px; color: var(--ink); }

.dbme__role {
  grid-column: 1 / -1;
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dbnav { display: flex; flex-direction: column; margin: 0; padding: 8px 0; list-style: none; }

.dbnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 20px;
  border-left: 2px solid transparent;
  font-size: 13px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.72);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dbnav__link:hover,
.dbnav__link:focus-visible { color: var(--accent); }
.dbnav__link.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); }

/* Accent when it needs attention, ink 0.38 when it is only a count. */
.dbnav__badge { font-size: 12px; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.38); }
.dbnav__badge--warn { color: var(--accent); }

.dbrail__foot { margin: 0; padding: 14px 20px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }

.dbbtn {
  display: block;
  width: 100%;
  padding: 11px 0;
  border-radius: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.dbbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.dbbtn--ghost:hover,
.dbbtn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.dbbtn--solid { border: none; background: var(--accent); color: var(--on-accent); }
.dbbtn--solid:hover,
.dbbtn--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

.dblabel {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.dbagent {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  margin: 12px 0 0;
}

.dbagent__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--accent);
  object-fit: cover;
}

.dbagent__name { display: block; font-family: var(--serif); font-size: 18px; line-height: 1.1; color: var(--ink); }

.dbagent__desk {
  grid-column: 1 / -1;
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.dbagent__cta { margin-top: 14px; }

.dbreply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.45);
}

.dbdot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }

/* ---------------------------------------------------------- the columns --- */

.dbmain { min-width: 0; }

.dbhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.dbhead--section { margin-top: clamp(24px, 3vh, 34px); padding-bottom: 13px; }
.dbrule { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; min-width: 0; margin: 0; }
.dbrule__stub { width: 28px; height: 1px; background: var(--accent); }
.dbrule__line { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.dbrule--stretch { flex: 1; }
.dbrule__note { color: rgba(var(--ink-rgb), 0.5); }
.dbacts { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

.dbact {
  padding: 12px 22px;
  border-radius: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.dbact--solid { border: none; background: var(--accent); color: var(--on-accent); }
.dbact--solid:hover,
.dbact--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.dbact--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); color: var(--ink); }
.dbact--ghost:hover,
.dbact--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.dblink {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.dblink:hover,
.dblink:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------- 01 the tiles --- */
/* Every one is a link: a figure with no route to its detail is decoration. */

.dbtiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.dbtile { min-width: 0; }

.dbtile__link {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 20px 20px 22px;
  background: var(--panel-solid);
  text-decoration: none;
  transition: background 0.25s ease;
}

.dbtile__link:hover,
.dbtile__link:focus-visible { background: var(--panel-hover); }

.dbtile__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dbtile__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dbtile__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
/* The only tile with a deadline attached. */
.dbtile__value--accent { color: var(--accent); }
.dbtile__delta { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
.dbtile__delta--positive { color: var(--good); }
.dbtile__delta--accent { color: var(--accent); }
.dbtile__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------- 02 the buying file --- */

.dbtrack { position: relative; margin-top: 24px; }
.dbtrack__base { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(var(--ink-rgb), 0.18); }

/* Authored, not computed. If you do compute it, use the midpoint of the
   current step — `(current + 0.5) / (steps - 1)` — so the rule stops AT the
   current dot rather than before or after it. */
.dbtrack__done { position: absolute; left: 0; top: 5px; height: 1px; width: 58%; background: var(--accent); }

.dbsteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.dbstep { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; padding-right: 22px; }

.dbstep__dot {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: var(--bg);
}

.dbstep--done .dbstep__dot { border-color: var(--accent); background: var(--accent); }
.dbstep--now .dbstep__dot { border-color: var(--accent); }

.dbstep__when {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
  transition: color 0.2s ease;
}

.dbstep.is-on .dbstep__when { color: var(--accent); }
.dbstep__title { font-family: var(--serif); font-size: 19px; line-height: 1.12; color: rgba(var(--ink-rgb), 0.55); }
.dbstep--done .dbstep__title,
.dbstep--now .dbstep__title { color: var(--ink); }
.dbstep__note { font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.dbcallout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 22px 0 0;
  padding: 15px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.dbcallout__text { flex: 1; min-width: 260px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink); }
.dbcallout__cta { padding: 11px 20px; }

/* --------------------------------------------------------- 03 this week --- */

.dbpanel {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  list-style: none;
}

.dbview {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 150px 236px;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  transition: background 0.2s ease;
}

.dbview--last { border-bottom: none; }
.dbview.is-confirmed { background: rgba(var(--accent-rgb), 0.06); }
.dbview__day { display: block; font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--accent); }

.dbview__time {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.dbview__address { display: block; font-size: 14px; color: var(--ink); }
.dbview__meta { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.dbview__agent { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.dbview__acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin: 0; }

.dbsmall {
  padding: 9px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dbsmall--confirm { border-color: var(--accent); color: var(--accent); }
.dbsmall--confirm.is-on { background: var(--accent); color: var(--on-accent); }
.dbsmall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------ 04 new for you --- */

.dbmatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.dbmatch { min-width: 0; }

.dbmatch__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  text-decoration: none;
  transition: background 0.25s ease;
}

.dbmatch__link:hover,
.dbmatch__link:focus-visible { background: var(--panel-hover); }

.dbmatch__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2; height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.dbmatch__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dbbadge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 11px;
  background: rgba(var(--ink-rgb), 0.88);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
}

.dbbadge--new { background: var(--accent); }
.dbmatch__body { display: flex; flex-direction: column; gap: 5px; padding: 15px 16px 8px; }
.dbmatch__title { font-family: var(--serif); font-size: 17px; line-height: 1.14; color: var(--ink); }
.dbmatch__meta { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.dbmatch__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.dbmatch__price { font-family: var(--serif); font-size: 19px; color: var(--ink); }

/* The third colour is the point of the section: a dashboard that only shows
   flattering matches is a brochure. */
.dbmatch__delta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.dbmatch__delta--good { color: var(--good); }
.dbmatch__delta--over { color: var(--refused); }

/* ------------------------------------------- 05 price moves · 06 searches --- */

.dbduo { display: grid; grid-template-columns: 1.25fr minmax(0, 1fr); gap: clamp(20px, 2.2vw, 30px); align-items: start; margin-top: clamp(24px, 3vh, 34px); }
.dbduo__col { min-width: 0; }
.dbhead--flat { margin-top: 0; }

.dbmove {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 108px 84px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.dbmove--last { border-bottom: none; }
.dbmove__address { display: block; font-size: 13px; color: var(--ink); }

.dbmove__when {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dbmove__was { text-align: right; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); text-decoration: line-through; }
.dbmove__now { text-align: right; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.dbmove__delta { text-align: right; font-size: 12px; color: rgba(var(--ink-rgb), 0.45); }
.dbmove__delta--cut { color: var(--good); }
.dbmove__delta--rise { color: var(--refused); }

.dbsearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 98px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.dbsearch--last { border-bottom: none; }
.dbsearch__title { display: block; font-size: 13px; color: var(--ink); }
.dbsearch__criteria { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }

.dbsearch__new {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.dbsearch__new--some { color: var(--accent); }

.dbtoggle {
  justify-self: end;
  width: 98px;
  padding: 7px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dbtoggle.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.dbtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dbnewsearch { margin: 12px 0 0; }

/* --------------------------------------------------------- 07 messages --- */

.dbmsg {
  display: grid;
  grid-template-columns: 38px 222px minmax(0, 1fr) 110px;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease;
}

.dbmsg:hover,
.dbmsg:focus-visible { background: rgba(var(--accent-rgb), 0.06); }
.dbmsg--last { border-bottom: none; }

.dbmsg__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--accent);
  object-fit: cover;
}

.dbmsg__name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(var(--ink-rgb), 0.66); }
.dbmsg--unread .dbmsg__name { color: var(--ink); }
.dbmsg__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.dbmsg--unread .dbmsg__dot { background: var(--accent); }

.dbmsg__role {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dbmsg__body { font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.6); }

.dbmsg__when {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ---------------------------------------------------------------- 1179 --- */

@media (max-width: 1179px) {
  /* A sticky column in a stacked layout traps the scroll. */
  .dbpage { grid-template-columns: minmax(0, 1fr); }
  .dbrail { position: static; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .dbblock { flex: 1 1 320px; }
  /* The eight items become a scroller under the heading. */
  .dbnav { flex-direction: row; overflow-x: auto; padding: 8px; }
  .dbnav__link { flex: 0 0 auto; min-height: 44px; border-left: none; border-bottom: 2px solid transparent; }
  .dbnav__link.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
  .dbtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .dbtrack__base,
  .dbtrack__done { display: none; }
  .dbview { grid-template-columns: 108px minmax(0, 1fr) 200px; }
  .dbview__agent { display: none; }
  .dbmatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbduo { grid-template-columns: minmax(0, 1fr); }
  .dbmsg { grid-template-columns: 38px minmax(0, 1fr); row-gap: 8px; }
  .dbmsg__body { grid-column: 2; }
  .dbmsg__when { grid-column: 2; text-align: left; }
  .dbsmall,
  .dbtoggle { min-height: 44px; }
}

/* ----------------------------------------------------------------- 767 --- */

@media (max-width: 767px) {
  .dbhead,
  .dbhead--section { align-items: flex-start; flex-direction: column; gap: 14px; }
  .dbtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbtile__value { font-size: 26px; }
  /* The rule runs down the left edge and the dots sit on it. */
  .dbsteps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .dbstep { flex-direction: row; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 0 0 20px 0; }
  .dbstep__dot { margin: 4px 0 0; }
  .dbstep__title,
  .dbstep__note { flex: 1 0 100%; margin-left: 25px; }
  .dbview { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .dbview__acts { justify-content: flex-start; }
  .dbview__acts .dbsmall { flex: 1; }
  .dbmatches { grid-template-columns: minmax(0, 1fr); }
  .dbmatch__media { height: 180px; }
  .dbmove { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .dbmove__was,
  .dbmove__now,
  .dbmove__delta { text-align: left; }
  .dbacts .dbact { flex: 1 0 100%; text-align: center; }
}

@media (hover: none) {
  .dbsmall,
  .dbtoggle,
  .dbact,
  .dbbtn,
  .dbnav__link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dbtile__link,
  .dbmatch__link,
  .dbview,
  .dbmsg,
  .dbnav__link { transition: none; }
}
/* ==========================================================================
   76. Profile & settings — the buyer's brief, prefix `pf`
   --------------------------------------------------------------------------
   The eighth dashboard screen, and the only settings page on the site. Its
   premise, from the handoff, is worth keeping in the stylesheet because it
   explains every choice below:

       A profile is not a form you fill in. It is a brief you give the people
       working for you.

   So §01 is a 27px serif sentence set at prose line-height — the one place on
   the whole site where Instrument Serif runs at 1.5 — with five of its words
   as buttons. Everything else is ordinary form furniture arranged around it.

   THE RAIL IS NOT HERE. It is section 75 (`db`), shared by all eight
   dashboard screens and emitted by `_design/_builders/_dbrail.py`. The section
   heads (`.dbhead`, `.dbrule`) are shared too. Only what is peculiar to this
   page is below.

   MICRO TYPE. The reference sets field labels at 8px and buttons at 9–10px.
   The project floor is 12px, so every one of those is 12px here with the
   tracking kept in `em`. That widens chips and buttons, and the containers
   below are sized for the 12px versions, not the reference's.
   ========================================================================== */

.pfstack { min-width: 0; }

/* ------------------------------------------------ §0 identity header ---- */

.pfhead {
  display: grid;
  grid-template-columns: 1.5fr minmax(0, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--ink-rgb), 0.16);
}

.pfid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 26px 28px 28px;
  background: var(--panel-solid);
}

.pfid__row { display: flex; align-items: center; gap: 18px; }

.pfmono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  object-fit: cover;
}

.pfid__who { min-width: 0; }

.pfid__name {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
}

.pfid__role {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.pfver {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.14);
  list-style: none;
}

.pfver__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--panel-solid);
}

/* 17px in the reference is the content box; the site is border-box, so the
   painted circle is 19. Same two pixels the dashboard avatars lost. */
.pfver__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(var(--warn-rgb), 0.5);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--warn);
}

.pfver__tick--ok { border-color: var(--good); background: var(--good); color: var(--on-accent); }
.pfver__text { min-width: 0; }
.pfver__label { display: block; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.pfver__item--ok .pfver__label { color: var(--ink); }

.pfver__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.4);
}

.pfstrength {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 26px 26px 28px;
  background: rgba(var(--accent-rgb), 0.1);
}

.pfstrength__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }

.pfstrength__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pfstrength__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); }
.pfstrength__track { display: block; height: 5px; margin-top: 14px; background: rgba(var(--ink-rgb), 0.14); }
.pfstrength__fill { display: block; height: 5px; background: var(--accent); }
.pfstrength__fill--53 { width: 53%; }
.pfstrength__fill--65 { width: 65%; }
.pfstrength__fill--73 { width: 73%; }
.pfstrength__fill--85 { width: 85%; }

.pfstrength__note {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.66);
}

.pfstrength__acts { display: flex; flex-direction: column; gap: 9px; margin: 22px 0 0; }

.pfbtn {
  padding: 13px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pfbtn:hover,
.pfbtn:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

.pfbtn--ghost {
  padding: 12px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.pfbtn--ghost:hover,
.pfbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* --------------------------------------------------------- section heads --- */
/* `.dbhead` is section 75. This page sits its sections a shade further apart
   than the Overview screen does, so only the gap is restated. */

.pfhead--rule { margin-top: clamp(26px, 3.4vh, 38px); }
.pfhead--rule.dbhead--section { padding-bottom: 13px; }
.pfhead--flat { margin-top: 0; }
.pfaside { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }

/* -------------------------------------------------------- §1 the brief ---- */

.pfbrief {
  display: grid;
  grid-template-columns: 1.5fr minmax(0, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

.pfsentence__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 30px 30px;
  background: var(--panel);
}

/* The only Instrument Serif on the site set at paragraph line-height. It reads
   as the user's own words rather than a heading, which is the whole point. */
.pfsentence {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.72);
  text-wrap: pretty;
}

.pfword {
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
  background: transparent;
  font-family: var(--serif);
  font-size: 27px;
  line-height: inherit;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pfword:hover { border-bottom-color: var(--accent); }
.pfword:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pfmusts { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }

.pflabel {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.pfchips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.pfchip {
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pfchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.pfchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pfchip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.pfmusts__note {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

.pfseen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 26px 30px;
  background: var(--panel-solid);
}

.pfseen__label {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pfcard {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--scrim-rgb), 0.5);
}

.pfcard__who { display: flex; align-items: center; gap: 12px; }

.pfcard__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.6);
  object-fit: cover;
}

.pfcard__name { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

.pfcard__ready {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
}

.pfcard__ready--accent { color: var(--accent); }
.pfcard__ready--warn { color: var(--warn); }

.pfcard__line {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.6);
}

.pfshows { margin: 18px 0 0; padding: 0; }

.pfshow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.pfshow__label { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.pfshow__value { font-size: 12px; line-height: normal; color: var(--ink); }
.pfshow__value--good { color: var(--good); }
.pfshow__value--warn { color: var(--warn); }
.pfshow__value--mute { color: rgba(var(--ink-rgb), 0.5); }
.pfshow--last { border-bottom: none; }

.pfspacer { flex: 1; }

.pfseen__foot {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------- §2 §3 and §5 §6 pairs --- */

.pfduo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.4vh, 38px);
  align-items: stretch;
}

.pfcol { display: flex; flex-direction: column; min-width: 0; }

.pfpanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  padding: 22px 24px 24px;
}

.pfpanel--flush { padding: 0; }

/* ------------------------------------------------------ §2 how you pay ---- */

.pfseg { display: flex; align-items: center; border: 1px solid rgba(var(--ink-rgb), 0.28); }

.pfseg__btn {
  flex: 1;
  padding: 11px 0;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pfseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.pfseg__btn--last { border-right: none; }
.pfseg__btn.is-on { background: var(--accent); color: var(--on-accent); }

.pffunds { display: flex; flex-direction: column; flex: 1; }
.pffund { display: flex; flex-direction: column; flex: 1; }
.pffund[hidden] { display: none; }

.pffund__note {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.6);
}

.pfrows { margin: 16px 0 0; padding: 0; list-style: none; }

.pfrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.pfrow__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

.pfrow__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.42);
}

.pfrow__value {
  font-family: var(--serif);
  font-size: 18px;
  line-height: normal;
  white-space: nowrap;
  color: var(--ink);
}

.pfrow__value--accent { color: var(--accent); }
.pfrow__value--good { color: var(--good); }
.pfrow__value--warn { color: var(--warn); }
.pfrow__value--mute { color: rgba(var(--ink-rgb), 0.66); }
.pfrow__value--faint { color: rgba(var(--ink-rgb), 0.4); }
.pfrow--last { border-bottom: none; }

.pffoot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.45);
}

.pfdot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.pfdot--warn { background: var(--warn); }
.pfdot--idle { background: rgba(var(--ink-rgb), 0.3); }

/* -------------------------------------------- §3 when we reach you -------- */

.pfmatrix { margin: 0; padding: 0; }

.pfmatrix__head,
.pfmatrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px 62px;
  gap: 10px;
  align-items: center;
}

.pfmatrix__head {
  padding: 12px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.pfmatrix__ch { text-align: center; }
.pfmatrix__row { padding: 13px 22px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.pfmatrix__label { display: block; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }

.pfmatrix__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.38);
}

.pfcell { display: flex; justify-content: center; }

/* A square knob in a square track — no pill, no radius, like every other
   switch on the site. Two sizes: the matrix cell and everything else. */
.pfswitch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 30px;
  width: 30px;
  height: 17px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pfswitch__knob { width: 11px; height: 11px; margin: 0 2px; background: rgba(var(--ink-rgb), 0.3); transition: background 0.2s ease; }
.pfswitch[aria-checked="true"] { justify-content: flex-end; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); }
.pfswitch[aria-checked="true"] .pfswitch__knob { background: var(--accent); }
.pfswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pfswitch--lg { flex: 0 0 40px; width: 40px; height: 21px; }
.pfswitch--lg .pfswitch__knob { width: 15px; height: 15px; }

.pfquiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.pfchips--tight { margin: 0; }
.pfchip--must { font-weight: 300; }
.pfchip--sm { padding: 7px 12px; letter-spacing: 0.06em; }

.pfmatrix__foot {
  margin: 0;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------- §4 the form ------ */

.pfform {
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  padding: 26px 28px 24px;
}

.pfgrid { display: grid; gap: 18px 20px; }
.pfgrid--id { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pfgrid--addr { grid-template-columns: 2fr 1fr 1fr 1fr; margin-top: 16px; }
.pffield--wide { grid-column: span 2; }

.pffield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.pffield__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.pfinput {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}

.pfinput::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.pfinput:focus { border-color: var(--accent); }

.pfblock { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }

.pfblock__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; }

.pfblock__title {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pfblock__note { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }

.pfprefs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.pfprefs__group { min-width: 0; }
.pfchips--pref { margin-top: 11px; }
.pfchip--pref { padding: 9px 15px; letter-spacing: 0.1em; }

.pfsave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.pfsave__state { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.pfsave__acts { display: flex; gap: 10px; }

.pfact {
  padding: 12px 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pfact:hover,
.pfact:focus-visible { border-color: var(--accent); color: var(--accent); }

.pfact--solid { padding: 13px 26px; border: none; background: var(--accent); letter-spacing: 0.16em; color: var(--on-accent); }
.pfact--solid:hover,
.pfact--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

/* ------------------------------------------------- §5 password and access --- */

.pffields { display: flex; flex-direction: column; gap: 16px; }
.pffields__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pfnote { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

.pfsetting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.pfsetting__text { min-width: 0; }
.pfsetting__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

.pfsetting__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.45);
}

.pfbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.pfbar__text { font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }
.pfbar__acts { display: flex; gap: 8px; }

.pfmini {
  padding: 10px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pfmini:hover,
.pfmini:focus-visible { border-color: var(--accent); color: var(--accent); }
.pfmini--solid { padding: 11px 18px; border: none; background: var(--accent); color: var(--on-accent); }
.pfmini--solid:hover,
.pfmini--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.pfmini--danger { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.pfmini--danger:hover,
.pfmini--danger:focus-visible { border-color: var(--warn); color: var(--warn); }

/* -------------------------------------------- §6 what we do with this ----- */

.pfpriv { margin: 0; padding: 0; list-style: none; }

.pfpriv__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.pfpriv__switch { display: flex; justify-content: flex-end; }

.pfbar--flush { margin: 0; padding: 16px 22px; }
.pfbar--flush .pfbar__text { color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .pfhead,
  .pfbrief { grid-template-columns: minmax(0, 1fr); }
  .pfbrief { border-top: 1px solid rgba(var(--ink-rgb), 0.2); }
  .pfduo { grid-template-columns: minmax(0, 1fr); }
  .pfgrid--id { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfgrid--addr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pffield--wide { grid-column: span 2; }
}

@media (max-width: 767px) {
  .pfhead,
  .pfver { grid-template-columns: minmax(0, 1fr); }
  .pfid,
  .pfstrength,
  .pfsentence__panel,
  .pfseen { padding-left: 20px; padding-right: 20px; }
  .pfid__row { align-items: flex-start; gap: 14px; }
  .pfid__name { font-size: 26px; }

  .pfsentence { font-size: 22px; }
  /* The reference's answer to a small screen would be a smaller word; the
     handoff's is a bigger target. Each editable word keeps its size and gains
     padding so the tap area clears 44px. */
  .pfword { padding: 10px 2px; font-size: 22px; }

  .pfgrid--id,
  .pfgrid--addr,
  .pffields__pair,
  .pfprefs { grid-template-columns: minmax(0, 1fr); }
  .pffield--wide { grid-column: auto; }

  /* iOS zooms a focused input under 16px, which moves the whole layout. */
  .pfinput { font-size: 16px; }

  .pfmatrix__head { display: none; }
  .pfmatrix__row { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 22px; row-gap: 12px; padding: 14px 18px; }
  .pfmatrix__row > span:first-child { grid-column: 1 / -1; }
  .pfcell { justify-content: flex-start; align-items: center; gap: 8px; }
  .pfcell__name { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
  .pfquiet,
  .pfmatrix__foot { padding-left: 18px; padding-right: 18px; }
  .pfpriv__row { padding: 14px 18px; }
  .pfbar--flush { padding: 14px 18px; }
  .pfform { padding: 22px 20px 20px; }
  .pfpanel { padding: 20px 20px 22px; }
  .pfpanel--flush { padding: 0; }
  .pfsave__acts,
  .pfbar__acts { flex-wrap: wrap; }
}

/* The three channel names are for a screen reader and for the mobile stack;
   on desktop the column head says it once. */
.pfcell__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 767px) {
  .pfcell__name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

@media (hover: none) {
  .pfchip,
  .pfseg__btn,
  .pfmini,
  .pfact,
  .pfbtn { min-height: 44px; }

  .pfswitch { position: relative; }
  .pfswitch::before { content: ''; position: absolute; inset: -14px -10px; }
  .pfswitch--lg::before { inset: -12px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pfword,
  .pfchip,
  .pfswitch,
  .pfswitch__knob,
  .pfseg__btn,
  .pfbtn,
  .pfact,
  .pfmini,
  .pfinput { transition: none; }
}
/* ==========================================================================
   77. Saved properties — the decision board, prefix `sp`
   --------------------------------------------------------------------------
   The second dashboard screen. Its premise, from the handoff:

       Saving is not collecting. It is the start of a decision, and the
       decision is made by comparing.

   So the page is not a bookmark folder. Every card carries a three-way list
   control, the folder tabs count from those, §02 puts the shortlist in one
   table with the best cell in each row painted green, and §04 keeps the
   rejections with their reasons so nothing gets re-saved by accident.

   THE RAIL AND THE SECTION HEADS ARE SECTION 75 (`db`). Only what is peculiar
   to this page is below.

   THE LIST CHIPS ARE A SEGMENTED CONTROL, NOT THREE LOOSE BUTTONS.
   The reference sets them at 8px, where three of them measure 130px and fit
   any card. At the project's 12px floor the same three words need 179px, and
   a card is 176px wide inside its padding at 1180. Three equal cells sharing
   their borders, `padding: 6px 0` (which is what the handoff's own component
   note specifies) and 0.04em tracking bring it to 171 — one row, at every
   width the four-column grid is used.
   ========================================================================== */

.spstack { min-width: 0; }

/* ---------------------------------------------------------- §01 controls --- */

.spacts { display: flex; gap: 10px; }

.spbtn {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.spbtn:hover,
.spbtn:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

.spbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.spbtn--ghost:hover,
.spbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

.spbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.spbar__group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.spbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.spbar__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.spbar__label--list { margin-right: 4px; }

.spfolder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.spfolder:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.spfolder:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spfolder.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.spfolder__count { font-size: 12px; opacity: 0.6; }

.spsort {
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.spsort:hover { color: var(--accent); }
.spsort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.spsort.is-on { border-bottom-color: var(--accent); color: var(--accent); }

.spall {
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.spall:hover,
.spall:focus-visible { border-color: var(--accent); color: var(--accent); }

/* The strip only exists while something is selected. It is in the markup
   because two cards are selected by default — the reference's own state. */
.sppicked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 13px 18px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.sppicked[hidden] { display: none; }
.sppicked__line { font-size: 12px; font-weight: 300; line-height: normal; color: var(--ink); }
.sppicked__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.spmini {
  padding: 9px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.spmini:hover,
.spmini:focus-visible { border-color: var(--accent); color: var(--accent); }
.spmini--solid { border: none; background: var(--accent); color: var(--on-accent); }
.spmini--solid:hover,
.spmini--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

/* --------------------------------------------------------- §01 the grid --- */

.spgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.spcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-solid);
  transition: background 0.25s ease;
}

.spcard[hidden] { display: none; }
.spcard.is-picked { background: var(--panel-picked); }

.spcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  height: auto;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.spcard__shot { position: absolute; inset: 0; display: block; }
.spcard__shot img { width: 100%; height: 100%; object-fit: cover; }

.sppick {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--hero-ink-rgb), 0.5);
  background: rgba(var(--scrim-rgb), 0.72);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sppick__tick { visibility: hidden; }
.sppick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sppick[aria-pressed="true"] .sppick__tick { visibility: visible; }
.sppick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.spstatus {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  background: rgba(var(--scrim-rgb), 0.86);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--hero-ink-rgb), 0.72);
}

.spstatus--offer { color: var(--refused); }
.spstatus--new { color: var(--accent); }

.spmove {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 12px;
  background: var(--good);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
}

.spmove--rise { background: var(--refused); }

.spcard__body { display: flex; flex-direction: column; gap: 6px; padding: 15px 17px 0; }
.spcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.spcard__title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.14;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.spcard__title:hover,
.spcard__title:focus-visible { color: var(--accent); }

.spcard__sheet {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.4);
}

.spcard__meta { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.spcard__price { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 12px 17px 0; }
.spcard__figure { font-family: var(--serif); font-size: 21px; line-height: 1; color: var(--ink); }

.spcard__perm {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Three equal cells sharing their borders — see the note at the top. */
.splists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 11px 17px 0;
}

.splist {
  position: relative;
  width: 100%;
  padding: 6px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.splist + .splist { margin-left: -1px; }
.splist:hover { color: var(--accent); }
.splist:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.splist.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.splist.is-on { z-index: 1; }

.spcard__note {
  margin: 0;
  padding: 12px 17px 0;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.5);
}

.spspacer { flex: 1; }

.spcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 17px 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.spcard__saved {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.spcard__links { display: flex; gap: 14px; }

.spcard__link {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  transition: color 0.2s ease;
}

.spcard__link--mute { color: rgba(var(--ink-rgb), 0.45); }
.spcard__link--mute:hover,
.spcard__link--mute:focus-visible { color: var(--accent); }

.spempty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 34px 18px;
  background: var(--panel-solid);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.35);
}

.spempty[hidden] { display: none; }

/* ------------------------------------------------------ §02 side by side --- */

.spside {
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.spside th,
.spside td { padding: 12px 18px; border-left: 1px solid rgba(var(--ink-rgb), 0.14); text-align: left; vertical-align: top; }
.spside thead th { padding: 14px 18px; }
.spside thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }
.spside tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.spside tbody tr:nth-last-child(2) { border-bottom-color: rgba(var(--ink-rgb), 0.2); }
.spside tbody tr:last-child { border-bottom: none; }

.spside .spside__corner,
.spside .spside__rowlabel { width: 168px; border-left: none; }

.spside__corner {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.spside__rowlabel {
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.5);
}

.spside__title { display: block; font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.1; color: var(--ink); }

.spside__sheet {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.spside__cell { font-size: 13px; line-height: normal; color: var(--ink); }
.spside__cell--win { background: rgba(var(--good-rgb), 0.06); color: var(--good); }

.spside__verdict { font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.66); }
.spside__verdict--empty { color: rgba(var(--ink-rgb), 0.35); }

/* --------------------------------------------------- §03 feed and §04 archive --- */

.spduo {
  display: grid;
  grid-template-columns: 1.2fr minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(24px, 3vh, 34px);
  align-items: stretch;
}

.spcol { display: flex; flex-direction: column; min-width: 0; }
.spcol > .sppanel { flex: 1; }

.sppanel {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  list-style: none;
}

.spfeed {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.spfeed__when {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.spfeed__event { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

.spfeed__where {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.45);
}

.spfeed__tag {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

.spfeed__tag--good { color: var(--good); }
.spfeed__tag--gone { color: var(--refused); }
.spfeed__tag--mute { color: rgba(var(--ink-rgb), 0.5); }
.spfeed--last { border-bottom: none; }

.spout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  opacity: 0.72;
}

.spout__title { display: block; font-size: 13px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.66); }

.spout__reason {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.42);
}

.spout--last { border-bottom: none; }

.sprestore {
  justify-self: end;
  width: 84px;
  padding: 7px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sprestore:hover,
.sprestore:focus-visible { border-color: var(--accent); color: var(--accent); }

.spfoot {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ------------------------------------------------------- 1359 and below --- */

@media (max-width: 1359px) {
  .spgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1179px) {
  .spgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spduo { grid-template-columns: minmax(0, 1fr); }
  .spbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .spbar__right { width: 100%; justify-content: space-between; }

  /* A four-column table does not survive a narrow screen. It keeps its shape
     here and scrolls sideways inside its own box — the page itself never
     scrolls. */
  .spside__wrap { overflow-x: auto; }
  .spside { min-width: 720px; }
}

@media (max-width: 767px) {
  .spgrid { grid-template-columns: minmax(0, 1fr); }
  .spcard__media { height: 220px; }
  .spbar__right { flex-direction: column; align-items: flex-start; gap: 12px; }
  .spacts { flex-wrap: wrap; }
  .spfeed { grid-template-columns: 74px minmax(0, 1fr); row-gap: 6px; }
  .spfeed__tag { grid-column: 2; }
  .spside { min-width: 620px; }
}

@media (hover: none) {
  .spfolder,
  .spsort,
  .spall,
  .spmini,
  .spbtn,
  .sprestore { min-height: 44px; }
  .splist { padding: 11px 0; }

  /* The selection box keeps its 22px square and grows its hit area instead —
     a 44px box would sit on the photograph like a placard. */
  .sppick::before { content: ''; position: absolute; inset: -11px; }
}

@media (prefers-reduced-motion: reduce) {
  .spcard,
  .spfolder,
  .spsort,
  .splist,
  .sppick,
  .spbtn,
  .spmini,
  .spall,
  .sprestore,
  .spcard__title,
  .spcard__link { transition: none; }
}
/* ==========================================================================
   78. Saved searches — why is this search quiet, prefix `ss`
   --------------------------------------------------------------------------
   The third dashboard screen. It is not a list of filters with a switch; it
   answers one question, and the question is the design:

       Why is this search quiet?

   So §01 says what each search found, §02 what one specific change would have
   found, §03 how much of the district's stock the search can even see, and
   §04 when we will say so. Every criticism arrives with a number and an offer.

   THE RAIL AND THE SECTION HEADS ARE SECTION 75 (`db`).

   TWO SCALES ARE DRAWN AS CLASSES, NOT INLINE STYLES
   --------------------------------------------------
   The sparkline bar heights and the reach-bar widths are data, and the site
   forbids `style` attributes in emitted markup. Both have a closed set of
   values, so the builder prints a class and asserts the matching rule exists
   here — the same arrangement the blueprint page uses for its storey heights,
   and it means a bar can never be drawn at a height nothing defines.
   ========================================================================== */

.ssstack { min-width: 0; }

/* ---------------------------------------------------------- §01 header ---- */

.ssacts { display: flex; gap: 10px; flex-wrap: wrap; }

.ssbtn {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ssbtn:hover,
.ssbtn:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.ssbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.ssbtn--ghost:hover,
.ssbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ------------------------------------------------------- §01 the rows ---- */

.sslist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.ssrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  border-left: 2px solid transparent;
  background: var(--panel-solid);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ssrow.is-open { border-left-color: var(--accent); background: var(--panel-picked); }

/* §7: the alert pill is a sibling of the disclosure button, never inside it —
   nested interactive elements are invalid and break the keyboard order. */
.ssrow__open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 220px;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ssrow__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ssrow__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.ssrow__title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
  color: rgba(var(--ink-rgb), 0.82);
}

.ssrow.is-open .ssrow__title { color: var(--ink); }

.ssstate {
  padding: 3px 8px;
  border: 1px solid rgba(var(--good-rgb), 0.5);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--good);
}

.ssstate--quiet { border-color: rgba(var(--ink-rgb), 0.2); color: rgba(var(--ink-rgb), 0.4); }

.sschips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0 0; }

.sschip {
  padding: 4px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
}

.ssnew { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
.ssnew--zero { color: rgba(var(--ink-rgb), 0.35); }

.ssmicro {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.ssmicro--spark { margin-top: 7px; }

/* Ten weekly bars. The last two are accent and an empty week is ink 0.1 —
   that is what makes a fading search legible without a legend. */
.ssspark { display: flex; align-items: flex-end; gap: 3px; height: 34px; max-width: 152px; }
.ssbar { flex: 1; background: rgba(var(--ink-rgb), 0.28); }
.ssbar--empty { background: rgba(var(--ink-rgb), 0.1); }
.ssbar--now { background: var(--accent); }

.ssbar--h3 { height: 3px; }
.ssbar--h6 { height: 6px; }
.ssbar--h11 { height: 11px; }
.ssbar--h17 { height: 17px; }
.ssbar--h23 { height: 23px; }
.ssbar--h28 { height: 28px; }
.ssbar--h34 { height: 34px; }

.ssrow__alert { display: flex; align-items: center; justify-content: flex-end; padding: 18px 20px 18px 0; }

.ssalert {
  width: 118px;
  padding: 8px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ssalert[aria-checked="true"] { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.ssalert:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------------------------------------------------- §01 the expansion ---- */

.ssexp { grid-column: 1 / -1; padding: 0 20px 20px; }
.ssexp[hidden] { display: none; }

.ssexp__rule {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.ssexp__line { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.1); }

.ssmatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ssmatch {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--scrim-rgb), 0.5);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.ssmatch:hover,
.ssmatch:focus-visible { border-color: var(--accent); }

.ssmatch__media { position: relative; display: block; aspect-ratio: 3 / 2; height: auto; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.ssmatch__media img { width: 100%; height: 100%; object-fit: cover; }

/* The badge is a recency signal, and gold is reserved for today. */
.ssbadge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background: rgba(var(--ink-rgb), 0.88);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
}

.ssbadge--today { background: var(--accent); }

.ssmatch__body { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px 12px; }
.ssmatch__title { font-size: 12px; line-height: normal; color: var(--ink); }
.ssmatch__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ssmatch__price { font-family: var(--serif); font-size: 16px; line-height: normal; color: var(--ink); }

/* Named, not coloured: a verdict that relies on colour alone is not a verdict. */
.ssfit {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--good);
}

.ssfit--miss { color: var(--refused); }

.ssexp__acts { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 0; }
.ssexp__group { display: flex; gap: 8px; flex-wrap: wrap; }

.ssmini {
  padding: 10px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ssmini:hover,
.ssmini:focus-visible { border-color: var(--accent); color: var(--accent); }
.ssmini--solid { border: none; background: var(--accent); color: var(--on-accent); }
.ssmini--solid:hover,
.ssmini--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.ssmini--mute { color: rgba(var(--ink-rgb), 0.66); }

.ssdelete {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.2s ease;
}

.ssdelete:hover,
.ssdelete:focus-visible { color: var(--refused); }

/* ------------------------------------------------- §02 tune, §03 reach ---- */

.ssduo {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(24px, 3vh, 34px);
  align-items: stretch;
}

.sscol { display: flex; flex-direction: column; min-width: 0; }

.sspanel {
  flex: 1;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  padding: 20px 22px 22px;
}

.sspanel[hidden] { display: none; }
.sstune__intro { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.66); }
.sstune { margin: 16px 0 0; padding: 0; list-style: none; }

.sstune__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 96px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.sstune__row--last { border-bottom: none; }
.sstune__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

.sstune__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.45);
}

.sstune__gain {
  text-align: right;
  font-family: var(--serif);
  font-size: 18px;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.5);
}

.sstune__gain.is-on { color: var(--good); }

.sstry {
  justify-self: end;
  width: 96px;
  padding: 8px 0;
  border: 1px solid var(--accent);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sstry[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.sstry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A simulation, not a commitment — the copy has to keep saying so. */
.sscallout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 0;
  padding: 13px 16px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.sscallout__text { font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--ink); }
.sscallout__total { font-family: var(--serif); font-size: 22px; line-height: normal; white-space: nowrap; color: var(--accent); }

.ssreach { margin: 0; padding: 0; list-style: none; }
.ssreach__row { padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.ssreach__row--last { border-bottom: none; }
.ssreach__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.ssreach__district { font-size: 12px; line-height: normal; color: var(--ink); }
.ssreach__pct { font-size: 12px; line-height: normal; color: var(--good); }
.ssreach__track { display: block; height: 6px; margin-top: 8px; background: rgba(var(--ink-rgb), 0.1); }
.ssreach__fill { display: block; height: 6px; background: var(--good); }

.ssreach__pct--mid,
.ssreach__fill--mid { color: var(--accent); }
.ssreach__fill--mid { background: var(--accent); }
.ssreach__pct--low { color: var(--refused); }
.ssreach__fill--low { background: var(--refused); }

/* Every share that appears in `reach.json`, and nothing else — the builder
   asserts the class it is about to print exists here. */
.ssreach__fill--w9 { width: 9%; }
.ssreach__fill--w12 { width: 12%; }
.ssreach__fill--w17 { width: 17%; }
.ssreach__fill--w21 { width: 21%; }
.ssreach__fill--w34 { width: 34%; }
.ssreach__fill--w39 { width: 39%; }
.ssreach__fill--w41 { width: 41%; }
.ssreach__fill--w46 { width: 46%; }
.ssreach__fill--w52 { width: 52%; }
.ssreach__fill--w58 { width: 58%; }
.ssreach__fill--w71 { width: 71%; }
.ssreach__fill--w78 { width: 78%; }

.ssreach__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.42);
}

.ssreach__foot { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------------- §04 alerts ---- */

.ssnext { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

.ssalerts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.sscard { min-width: 0; padding: 20px 22px 22px; background: var(--panel-solid); }

.sscard__label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.ssseg { display: flex; margin-top: 13px; border: 1px solid rgba(var(--ink-rgb), 0.28); }

.ssseg__btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ssseg__btn--last { border-right: none; }
.ssseg__btn.is-on { background: var(--accent); color: var(--on-accent); }
.ssseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.ssfreq__note { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }

.sschannels,
.ssevents { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; list-style: none; }

.sschannel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.sschannel--last { border-bottom: none; }
.sschannel__label { display: block; font-size: 12px; line-height: normal; color: var(--ink); }

.sschannel__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.42);
}

.sspill {
  width: 58px;
  padding: 6px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sspill[aria-checked="true"] { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.sspill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Real checkboxes (§7). The square is the input itself, restyled — no span
   standing in for a control the keyboard cannot reach. */
.ssevent { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.ssevent--last { border-bottom: none; }

.ssevent__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ssevent__box:checked { border-color: var(--accent); background: var(--accent); }
.ssevent__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ssevent__box::before {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  border: solid var(--on-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ssevent__box:checked::before { opacity: 1; }

.ssevent__label { flex: 1; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); cursor: pointer; }
.ssevent__box:checked ~ .ssevent__label { color: var(--ink); }

.ssevents__foot { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.ssdot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .ssrow { grid-template-columns: minmax(0, 1fr); }
  .ssrow__open { grid-template-columns: minmax(0, 1fr) 110px 220px; }
  .ssrow__alert { padding: 0 20px 18px; justify-content: stretch; }
  .ssalert { width: 100%; }
  .ssmatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssduo { grid-template-columns: minmax(0, 1fr); }
  .ssalerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* The row stacks, but the sparkline stays — it is the fastest read here. */
  .ssrow__open { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 16px 18px; }
  .ssrow__count { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: end; }
  .ssrow__alert { padding: 0 18px 16px; }
  .sschips { flex-wrap: nowrap; overflow-x: auto; }
  .sschip { white-space: nowrap; }
  .ssmatches { grid-template-columns: minmax(0, 1fr); }
  .ssexp { padding: 0 18px 18px; }
  .ssalerts { grid-template-columns: minmax(0, 1fr); }
  .sstune__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .sstune__gain { grid-column: 1; text-align: left; }
  .sscallout { flex-wrap: wrap; }
}

@media (hover: none) {
  .ssalert,
  .sstry,
  .sspill,
  .ssmini,
  .ssbtn,
  .ssseg__btn { min-height: 44px; }
  .ssevent { padding: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ssrow,
  .ssalert,
  .sstry,
  .sspill,
  .ssmini,
  .ssbtn,
  .ssseg__btn,
  .ssmatch,
  .ssevent__box,
  .ssdelete { transition: none; }
}
/* ==========================================================================
   79. Viewing requests — who owes whom a reply, prefix `vr`
   --------------------------------------------------------------------------
   The fourth dashboard screen. A viewing is not a calendar entry; it is a
   conversation with an agent that has not finished yet, so the organising
   question is not *when* but:

       Who owes whom a reply?

   Two of the seven rows are waiting on someone else, and the page says so in
   the heading, in the week grid, in the filter chips and in each row's own
   sentence. A status is never just a colour — the pill, the sentence and the
   agent line all carry words.

   THE RAIL AND THE SECTION HEADS ARE SECTION 75 (`db`).

   THE STAR ROW IS CSS, NOT SCRIPT
   -------------------------------
   Five radios (§7 asks for a radio group, not five buttons). The committed
   fill and the hover preview are both `:has()` rules, so the control works
   with the script off and the keyboard gets real radio behaviour. Only the
   word beside it needs JavaScript — and with none, it reads the saved rating.
   ========================================================================== */

.vrstack { min-width: 0; }
.vracts { display: flex; gap: 10px; flex-wrap: wrap; }

.vrbtn {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vrbtn:hover,
.vrbtn:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.vrbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.vrbtn--ghost:hover,
.vrbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ---------------------------------------------------------- the week ----- */

.vrweek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.vrday {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  padding: 14px 14px 16px;
  border: none;
  border-top: 2px solid transparent;
  background: var(--panel-solid);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.vrday[aria-pressed="true"] { border-top-color: var(--accent); background: var(--panel-picked); }
.vrday:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vrday__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.vrday__dow {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.vrday[aria-pressed="true"] .vrday__dow { color: var(--accent); }
.vrday__num { font-family: var(--serif); font-size: 20px; line-height: 1; color: rgba(var(--ink-rgb), 0.35); }
.vrday--busy .vrday__num { color: var(--ink); }
.vrday__slots { display: flex; flex-direction: column; gap: 6px; }

.vrslot { display: block; padding: 6px 8px; border-left: 2px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.vrslot--asked { border-left-color: var(--warn); background: rgba(var(--warn-rgb), 0.1); }
.vrslot__time { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.08em; color: var(--accent); }
.vrslot--asked .vrslot__time { color: var(--warn); }

.vrslot__where {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.6);
}

.vrspacer { flex: 1; }

.vrday__note {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* An authored note is a warning ("held for Anna"); the empty Sunday is not. */
.vrday__note--held { color: var(--warn); }
.vrday__note--none { color: rgba(var(--ink-rgb), 0.3); }

/* -------------------------------------------------------- the filters ---- */

.vrfilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.vrfilters__group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.vrfilters__label {
  margin-right: 4px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.vrtab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vrtab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vrtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vrtab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.vrtab__count { font-size: 12px; opacity: 0.6; }
.vrfilters__note { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

/* ----------------------------------------------------------- the list ---- */

.vrlist { margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); list-style: none; }

.vrrow { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.vrrow[hidden] { display: none; }
.vrrow--last { border-bottom: none; }
.vrrow--confirmed { border-left-color: var(--accent); }
.vrrow--awaiting { border-left-color: var(--warn); }
.vrrow--cancelled { background: var(--panel-dim); }

.vrrow__main {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 150px 214px;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}

.vrrow__date { display: block; font-family: var(--serif); font-size: 19px; line-height: 1; color: var(--ink); }
.vrrow--confirmed .vrrow__date { color: var(--accent); }
.vrrow--cancelled .vrrow__date { color: rgba(var(--ink-rgb), 0.35); }

.vrrow__time {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.vrrow__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.vrrow__address {
  font-size: 15px;
  line-height: normal;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vrrow__address:hover,
.vrrow__address:focus-visible { color: var(--accent); }

/* Words, never a coloured dot — at any breakpoint. */
.vrpill {
  padding: 3px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.vrpill--confirmed { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.vrpill--awaiting { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.vrpill--cancelled { color: rgba(var(--ink-rgb), 0.35); }

.vrrow__meta { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

/* The waiting row reads louder than the rest — that is the page's whole point. */
.vrrow__note { display: block; margin-top: 7px; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }
.vrrow--awaiting .vrrow__note { color: rgba(var(--ink-rgb), 0.66); }

.vrrow__agent { display: block; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }

.vrrow__did {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.vrrow__acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.vract {
  padding: 9px 15px;
  border: 1px solid var(--accent);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Solid gold only when it is our move; `Chase him` is the buyer's. */
.vract--solid { background: var(--accent); color: var(--on-accent); }
.vract--solid:hover,
.vract--solid:focus-visible { background: var(--accent-hover); }
.vract--mute { border-color: rgba(var(--ink-rgb), 0.28); color: rgba(var(--ink-rgb), 0.6); }
.vract--mute:hover,
.vract--mute:focus-visible { border-color: var(--accent); color: var(--accent); }

/* The reply is the row: the agent's proposed times are here, not behind a link. */
.vralts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px 18px; }

.vralts__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.vralt { position: relative; display: inline-flex; }
.vralt__input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.vralt__label {
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vralt__input:checked + .vralt__label { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vralt__input:focus-visible + .vralt__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.vralts__note { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.vralts__note.is-picked { color: var(--good); }

.vrempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  margin: 0;
  padding: 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.45);
}

.vrempty[hidden] { display: none; }

/* --------------------------------------------------- §02 and §03 pair ---- */

.vrduo {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(24px, 3vh, 34px);
  align-items: stretch;
}

.vrcol { display: flex; flex-direction: column; min-width: 0; }

.vrpanel {
  flex: 1;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  padding: 20px 22px 22px;
}

.vrseg { display: flex; border: 1px solid rgba(var(--ink-rgb), 0.28); }

.vrseg__btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.vrseg__btn--last { border-right: none; }
.vrseg__btn.is-on { background: var(--accent); color: var(--on-accent); }
.vrseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.vrmeta { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.vrfield { margin-top: 18px; }

.vrfield__label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* The whole control is `:has()` — committed fill, hover preview and focus
   preview, with no script and real radio-group keyboard behaviour. */
.vrstars { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.vrstar { position: relative; display: inline-flex; }
.vrstar__input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.vrstar__mark {
  font-size: 21px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.22);
  cursor: pointer;
  transition: color 0.15s ease;
}

.vrstar__input:checked + .vrstar__mark,
.vrstar:has(~ .vrstar .vrstar__input:checked) .vrstar__mark { color: var(--accent); }
.vrstar__input:focus-visible + .vrstar__mark { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hover and keyboard focus preview without committing: while the row is being
   pointed at, the committed fill steps aside and the pointed star leads. */
.vrstars:hover .vrstar__mark,
.vrstars:focus-within .vrstar__mark { color: rgba(var(--ink-rgb), 0.22); }
.vrstars:hover .vrstar:hover .vrstar__mark,
.vrstars:hover .vrstar:has(~ .vrstar:hover) .vrstar__mark,
.vrstars:focus-within .vrstar:has(.vrstar__input:focus) .vrstar__mark,
.vrstars:focus-within .vrstar:has(~ .vrstar .vrstar__input:focus) .vrstar__mark { color: var(--accent); }

.vrstars__word { margin-left: 8px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

.vrtags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

.vrtag {
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vrtag:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vrtag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vrtag.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.vrnote { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.vrnote__input {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.vrnote__input::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.vrnote__input:focus { border-color: var(--accent); }

.vrsave { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.vrsave__text { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.vrsave__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.vrsave__btn {
  padding: 11px 20px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vrsave__btn:hover,
.vrsave__btn:focus-visible { background: var(--accent-hover); }
.vrsave__btn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: rgba(var(--ink-rgb), 0.6); }
.vrsave__btn--ghost:hover,
.vrsave__btn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ------------------------------------------------------- §03 checklist --- */

.vrask__intro { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.6); }
.vrask { display: flex; flex-direction: column; margin: 14px 0 0; padding: 0; list-style: none; }
.vrask__row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.vrask__row--last { border-bottom: none; }

.vrask__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.vrask__box:checked { border-color: var(--accent); background: var(--accent); }
.vrask__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vrask__box::before {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  border: solid var(--on-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.vrask__box:checked::before { opacity: 1; }
.vrask__text { flex: 1; min-width: 0; }

/* Done means quiet, not celebrated. */
.vrask__label { display: block; font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--ink); cursor: pointer; }
.vrask__box:checked ~ .vrask__text .vrask__label { color: rgba(var(--ink-rgb), 0.45); }

.vrask__why { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.38); }

.vrask__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.vrask__state { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.vrdot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.3); }
.vrdot--done { background: var(--good); }

.vrask__send {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
}

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .vrday { min-height: 120px; padding: 12px 10px 14px; }
  .vrslot__where { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .vrrow__main { grid-template-columns: minmax(0, 1fr) 150px; row-gap: 14px; }
  .vrrow__when { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; }
  .vrrow__time { margin-top: 0; }
  .vrrow__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .vract { flex: 1; }
  .vrduo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* The one dashboard screen a buyer opens standing outside a building, so
     the checklist comes first and the week becomes a scroller — all seven
     days kept, because the week is the point. */
  .vrstack { display: flex; flex-direction: column; }
  .vrduo { display: contents; }
  .vrcol--ask { display: flex; flex-direction: column; order: -1; margin-bottom: clamp(24px, 3vh, 34px); }
  .vrcol--rate { display: flex; flex-direction: column; margin-top: clamp(24px, 3vh, 34px); }

  .vrweek { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .vrweek > li { flex: 0 0 44vw; scroll-snap-align: start; }
  .vrday { min-height: 140px; }

  .vrfilters__group { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .vrfilters__label { display: none; }
  .vrtab { white-space: nowrap; }

  .vrrow__main { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
  .vrrow__who { grid-column: 1; }
  .vract { flex: 1 1 45%; }
  .vralts { padding: 0 18px 16px; }
  .vralt,
  .vralt__label { width: 100%; text-align: center; }
  .vrpanel { padding: 18px 18px 20px; }
  .vrstar__mark { font-size: 26px; }
  .vrask__row { padding: 14px 0; }
}

@media (hover: none) {
  .vrtab,
  .vract,
  .vrbtn,
  .vrtag,
  .vrseg__btn,
  .vrsave__btn,
  .vralt__label { min-height: 44px; }
  .vralt__label { display: inline-flex; align-items: center; justify-content: center; }
  .vrtab,
  .vrtag { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vrday,
  .vrtab,
  .vrtag,
  .vract,
  .vrbtn,
  .vrseg__btn,
  .vrsave__btn,
  .vralt__label,
  .vrstar__mark,
  .vrask__box,
  .vrnote__input,
  .vrrow__address { transition: none; }
}
/* ==========================================================================
   80. Price alerts — evidence about a market, prefix `pa`
   --------------------------------------------------------------------------
   The fifth dashboard screen. An alert is not a notification: a notification
   is over once it has been read, and this page is evidence about a market the
   buyer is trying to get into. So it answers three questions in descending
   order of usefulness — what moved and by how much, where the district is
   heading, and whether the rules watching it are any good.

   TWO CONVENTIONS THAT LOOK WRONG AND ARE NOT
   -------------------------------------------
   A cut is green and a rise is red. That is the opposite of a finance chart
   and correct here: the reader is buying. And `Under offer` / `Back on
   market` are not price events — equal was/now, a `held` delta in neutral
   ink, no strike-through and (for `offer`) no left border at all. A coloured
   0.0% would be a lie about what happened.

   THE CHART SCALE IS GENERATED, NOT HAND-WRITTEN
   ----------------------------------------------
   Thirty-six bar heights and three ceiling positions, all percentages with
   one decimal, and inline `style` is forbidden in emitted markup. The block
   marked `pa-scale (generated)` below is rewritten by
   `build_dashboardalerts.py` on every run from `market.json` — edit the data,
   not the rules. The scale itself is in the builder: the ceiling is inside
   it, and the floor is 90% of the minimum rather than zero, because these
   series move 3–6% across a year and a zero baseline would erase the story
   the chart exists to tell.
   ========================================================================== */

.pastack { min-width: 0; }
.paacts { display: flex; gap: 10px; flex-wrap: wrap; }

.pabtn {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pabtn:hover,
.pabtn:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.pabtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.pabtn--ghost:hover,
.pabtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ------------------------------------------------------ §01 stat strip --- */

.pastats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.pastat { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 18px 20px 20px; background: var(--panel-solid); }

.pastat__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.pastat__row { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pastat__value { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.pastat__value--accent { color: var(--accent); }
.pastat__delta { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.pastat__delta--good { color: var(--good); }
.pastat__delta--bad { color: var(--refused); }
.pastat__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* --------------------------------------------------------- §01 filters --- */

.pafilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.pafilters__group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.pafilters__label {
  margin-right: 4px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.pachip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pachip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.pachip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pachip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.pachip__count { font-size: 12px; opacity: 0.6; }
.pachip--district { color: rgba(var(--ink-rgb), 0.6); }
.pafilters__note { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

/* ------------------------------------------------------------ §01 feed --- */

.pafeed { margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); list-style: none; }

.parow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 122px 104px minmax(212px, auto);
  gap: 16px;
  align-items: center;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
}

.parow[hidden] { display: none; }
.parow--last { border-bottom: none; }
.parow--cut { border-left-color: var(--good); }
.parow--rise { border-left-color: var(--refused); }
/* Accent, not green: a property coming back is an opportunity, not a discount. */
.parow--back { border-left-color: var(--accent); }
.parow.is-muted { background: var(--panel-dim); }

.parow__when {
  display: block;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.parow__kind {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.parow__kind--cut { color: var(--good); }
.parow__kind--rise { color: var(--refused); }
.parow__kind--back { color: var(--accent); }

.parow__address {
  font-size: 14px;
  line-height: normal;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.parow__address:hover,
.parow__address:focus-visible { color: var(--accent); }

.parow__note { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }
.parow__prices { text-align: right; }

.parow__was { display: block; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }
.parow__was--struck { text-decoration: line-through; }
.parow__now { display: block; margin-top: 3px; font-family: var(--serif); font-size: 18px; line-height: normal; color: var(--ink); }

.parow__move { text-align: right; }
.parow__delta { display: block; font-family: var(--serif); font-size: 20px; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.parow__delta--good { color: var(--good); }
.parow__delta--bad { color: var(--refused); }

.parow__since {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.parow__acts { display: flex; gap: 8px; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }

.paact {
  padding: 9px 14px;
  border: 1px solid var(--accent);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.paact:hover,
.paact:focus-visible { background: var(--accent); color: var(--on-accent); }

.pamute {
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pamute:hover,
.pamute:focus-visible { border-color: var(--accent); color: var(--accent); }
.pamute[aria-pressed="true"] { background: rgba(var(--ink-rgb), 0.06); color: rgba(var(--ink-rgb), 0.35); }

.paempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  margin: 0;
  padding: 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.45);
}

.paempty[hidden] { display: none; }

/* ----------------------------------------------------------- §02 chart --- */

.pachart { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); padding: 22px 24px 24px; }
.paplot { position: relative; height: 190px; }

.paceiling { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--accent-rgb), 0.55); }

.paceiling__label {
  position: absolute;
  right: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.pabars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pabars[hidden] { display: none; }
.pabar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }

.pabar__fill {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: rgba(var(--ink-rgb), 0.22);
  cursor: pointer;
  transition: background 0.2s ease;
}

.pabar__fill:hover,
.pabar__fill:focus-visible,
.pabar.is-on .pabar__fill { background: var(--accent); }
.pabar__fill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pamonths { display: flex; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.pamonths[hidden] { display: none; }

.pamonth {
  flex: 1;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.35);
}

.pamonth.is-on { color: var(--accent); }

.pachart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.pachart__line { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.66); }
.pachart__line[hidden] { display: none; }
.pachart__read { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.pachart__value { font-family: var(--serif); font-size: 26px; line-height: normal; color: var(--ink); }
/* A rising district is bad news for a buyer, so `+` is the red one. */
.pachart__delta { font-size: 12px; line-height: normal; color: var(--good); }
.pachart__delta--bad { color: var(--refused); }
.pachart__delta[hidden] { display: none; }

/* ----------------------------------------------------------- §03 rules --- */

.paduo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(24px, 3vh, 34px);
  align-items: stretch;
}

.pacol { display: flex; flex-direction: column; min-width: 0; }
.parules { flex: 1; margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); list-style: none; }

.parule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 74px;
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.parule--last { border-bottom: none; }
.parule__text { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.parule.is-paused .parule__text { color: rgba(var(--ink-rgb), 0.45); }
.parule__scope { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.parule__count { text-align: right; }

/* The audit: a rule that has never fired is either badly set or watching
   nothing, and the figure beside the switch is what makes that visible. */
.parule__fired { display: block; font-size: 12px; line-height: normal; color: var(--accent); }
.parule__fired--zero { color: rgba(var(--ink-rgb), 0.35); }

.parule__label {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.35);
}

.paswitch {
  justify-self: end;
  width: 74px;
  padding: 7px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.paswitch[aria-checked="true"] { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.paswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- §04 builder --- */

.pabuild { flex: 1; border: 1px solid var(--accent); border-top: none; background: rgba(var(--accent-rgb), 0.1); padding: 20px 22px 22px; }

.pabuild__label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.pabuild__label--later { margin-top: 18px; }
.paseg { display: flex; margin-top: 11px; border: 1px solid rgba(var(--ink-rgb), 0.28); }

.paseg__btn {
  flex: 1;
  padding: 10px 4px;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.paseg__btn--last { border-right: none; }
.paseg__btn.is-on { background: var(--accent); color: var(--on-accent); }
.paseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.paconds { display: flex; flex-direction: column; margin: 11px 0 0; padding: 0; list-style: none; }
.pacond { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.pacond--last { border-bottom: none; }

.pacond__input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pacond__input:checked { border-color: var(--accent); }
.pacond__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pacond__input::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pacond__input:checked::before { opacity: 1; }
.pacond__label { flex: 1; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); cursor: pointer; }
.pacond__input:checked ~ .pacond__label { color: var(--ink); }

.pathreshold { margin-top: 16px; }
.pathreshold[hidden] { display: none; }

.pathreshold__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.pathreshold__value { color: var(--accent); }
.pathreshold__input { width: 100%; margin-top: 10px; height: 3px; accent-color: var(--accent); cursor: pointer; }

.papreview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--good);
  background: rgba(var(--scrim-rgb), 0.4);
}

.papreview--warn { border-left-color: var(--warn); }
.papreview--none { border-left-color: rgba(var(--ink-rgb), 0.28); }
.papreview__text { font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.72); }
.papreview__count { font-family: var(--serif); font-size: 24px; line-height: normal; white-space: nowrap; color: var(--good); }
.papreview--warn .papreview__count { color: var(--warn); }
.papreview--none .papreview__count { color: rgba(var(--ink-rgb), 0.28); }

.pacreate {
  width: 100%;
  margin-top: 16px;
  padding: 13px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.pacreate:hover,
.pacreate:focus-visible { background: var(--accent-hover); }
.pabuild__foot { margin: 11px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .pastats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parow { grid-template-columns: 92px minmax(0, 1fr) 122px 104px; row-gap: 14px; }
  .parow__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .paplot { height: 160px; }
  .paduo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .pastats { grid-template-columns: minmax(0, 1fr); }
  .pafilters__group { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .pafilters__label { display: none; }
  .pachip { white-space: nowrap; }

  .parow { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 18px; }
  .parow__what { grid-column: 1 / -1; }
  .parow__prices { text-align: left; }
  .paact,
  .pamute { flex: 1 1 45%; text-align: center; }

  .paplot { height: 140px; }
  .pamonth:nth-child(even) { display: none; }
  .pamonth { min-width: 0; }
  /* Hover does not exist here: the ceiling caption moves out of the plot. */
  .paceiling__label { position: static; display: block; margin-top: 10px; text-align: right; }
  .paseg { flex-direction: column; }
  .paseg__btn { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.28); }
  .paseg__btn--last { border-bottom: none; }
  .pathreshold__input { padding: 20px 0; height: auto; }
}

@media (hover: none) {
  .pachip,
  .paact,
  .pamute,
  .pabtn,
  .paswitch,
  .paseg__btn { min-height: 44px; }
  .pachip { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pachip,
  .paact,
  .pamute,
  .pabtn,
  .paswitch,
  .paseg__btn,
  .pabar__fill,
  .pacond__input,
  .pacond__input::before,
  .pacreate,
  .parow__address { transition: none; }
}

/* >>> pa-scale (generated by build_dashboardalerts.py — do not hand-edit) */
.pabar__fill--h263 { height: 26.3%; }
.pabar__fill--h275 { height: 27.5%; }
.pabar__fill--h278 { height: 27.8%; }
.pabar__fill--h287 { height: 28.7%; }
.pabar__fill--h296 { height: 29.6%; }
.pabar__fill--h299 { height: 29.9%; }
.pabar__fill--h305 { height: 30.5%; }
.pabar__fill--h313 { height: 31.3%; }
.pabar__fill--h316 { height: 31.6%; }
.pabar__fill--h325 { height: 32.5%; }
.pabar__fill--h334 { height: 33.4%; }
.pabar__fill--h343 { height: 34.3%; }
.pabar__fill--h355 { height: 35.5%; }
.pabar__fill--h377 { height: 37.7%; }
.pabar__fill--h402 { height: 40.2%; }
.pabar__fill--h421 { height: 42.1%; }
.pabar__fill--h428 { height: 42.8%; }
.pabar__fill--h443 { height: 44.3%; }
.pabar__fill--h483 { height: 48.3%; }
.pabar__fill--h487 { height: 48.7%; }
.pabar__fill--h512 { height: 51.2%; }
.pabar__fill--h538 { height: 53.8%; }
.pabar__fill--h555 { height: 55.5%; }
.pabar__fill--h560 { height: 56.0%; }
.pabar__fill--h568 { height: 56.8%; }
.pabar__fill--h576 { height: 57.6%; }
.pabar__fill--h586 { height: 58.6%; }
.pabar__fill--h593 { height: 59.3%; }
.pabar__fill--h606 { height: 60.6%; }
.pabar__fill--h611 { height: 61.1%; }
.pabar__fill--h618 { height: 61.8%; }
.pabar__fill--h633 { height: 63.3%; }
.pabar__fill--h635 { height: 63.5%; }
.pabar__fill--h648 { height: 64.8%; }
.pabar__fill--h674 { height: 67.4%; }
.paceiling--t50 { top: 5.0%; }
.paceiling--t81 { top: 8.1%; }
.paceiling--t107 { top: 10.7%; }
.paceiling--t130 { top: 13.0%; }
.paceiling--t161 { top: 16.1%; }
.paceiling--t187 { top: 18.7%; }
/* <<< pa-scale */
/* ==========================================================================
   81. Messages — every thread pinned to its file, prefix `ms`
   --------------------------------------------------------------------------
   The sixth dashboard screen, and not a chat client. A chat client is a
   stream you scroll and forget; buying a home is a set of promises made in
   passing — "the owner will cut to €985 000", "the owner will be out" — that
   nobody can find three months later. So:

       Every conversation is pinned to the file it is about, and what was
       agreed is lifted out of it.

   Three things follow, and they are the page: the thread header is a
   *property card*, §02 cites the message each fact came from, and the line
   under the composer says who owes whom a reply.

   THE 2px LEFT RULE IS THE IDENTITY MARKER, NOT THE ALIGNMENT
   -----------------------------------------------------------
   Incoming and outgoing are one component with four values swapped. The gold
   edge says "someone wrote to you" at a glance; an outgoing bubble keeps its
   own ink edge so the column holds its rhythm.

   THE RAIL AND THE SECTION HEADS ARE SECTION 75 (`db`).
   ========================================================================== */

.msstack { min-width: 0; }

/* ---------------------------------------------------------- §01 filters --- */

.mstabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.mstab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mstab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mstab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mstab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mstab__count { font-size: 12px; opacity: 0.6; }

/* ------------------------------------------------------------- the pane --- */

.mspane {
  display: grid;
  grid-template-columns: 356px minmax(0, 1fr);
  gap: 1px;
  margin-top: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--ink-rgb), 0.16);
}

.mslist { display: flex; flex-direction: column; min-width: 0; background: var(--panel-solid); }

.mslist__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.mssearch {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}

.mssearch::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.mssearch:focus { border-color: var(--accent); }

.msnew {
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.msnew:hover,
.msnew:focus-visible { border-color: var(--accent); color: var(--accent); }

.msthreads { margin: 0; padding: 0; list-style: none; }

.msrow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.msrow[hidden] { display: none; }
.msrow.is-open { border-left-color: var(--accent); background: var(--panel-picked); }
.msrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.msavatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.6);
  object-fit: cover;
}

.msrow.is-open .msavatar { border-color: var(--accent); color: var(--accent); }
.msrow__body { min-width: 0; }
.msrow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msrow__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msdot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.msdot--unread { background: var(--accent); }

.msrow__name {
  font-size: 13px;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(var(--ink-rgb), 0.7);
}

.msrow--unread .msrow__name { color: var(--ink); }

.msrow__when {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.38);
}

/* The line that makes the list a register rather than an inbox. */
.msrow__file {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.msrow.is-open .msrow__file { color: var(--accent); }
.msrow__snippet { display: block; margin-top: 6px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.msflag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.msempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 0;
  padding: 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.45);
}

.msempty[hidden] { display: none; }
.msspacer { flex: 1; }

.mslist__foot {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ---------------------------------------------------------- the thread --- */

.msthread { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.msthread[hidden] { display: none; }

.msfile {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.msfile__shot { position: relative; display: block; height: 66px; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.msfile__shot img { width: 100%; height: 100%; object-fit: cover; }
.msfile__body { min-width: 0; }
.msfile__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.msfile__title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.msfile__title:hover,
.msfile__title:focus-visible { color: var(--accent); }

/* The pill always says what it means; the colour only reinforces it. */
.mspill {
  padding: 3px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.mspill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mspill--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.mspill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

.msfile__meta { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.msfile__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.msbtn {
  padding: 10px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.msbtn:hover,
.msbtn:focus-visible { border-color: var(--accent); color: var(--accent); }
.msbtn--solid { padding: 11px 17px; border: none; background: var(--accent); color: var(--on-accent); }
.msbtn--solid:hover,
.msbtn--solid:focus-visible { background: var(--accent-hover); color: var(--on-accent); }

.mslog { padding: 20px 22px 8px; max-height: 520px; overflow-y: auto; }
.mslog:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mslog__items { margin: 0; padding: 0; list-style: none; }
.mslog__items > li { margin-bottom: 18px; }

.msday { display: flex; align-items: center; gap: 13px; margin: 4px 0 18px; }
.msday__rule { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.12); }

.msday__label {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.msmsg { display: flex; justify-content: flex-start; }
.msmsg--mine { justify-content: flex-end; }
.msmsg__inner { max-width: 74%; min-width: 0; }
.msmsg__head { display: flex; align-items: baseline; gap: 10px; justify-content: flex-start; }
.msmsg--mine .msmsg__head { justify-content: flex-end; }
.msmsg__who { font-size: 12px; line-height: normal; color: var(--accent); }
.msmsg--mine .msmsg__who { color: rgba(var(--ink-rgb), 0.5); }

.msmsg__time {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.35);
}

.msbubble {
  display: block;
  margin: 7px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-left: 2px solid var(--accent);
  background: var(--panel-picked);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.msmsg--mine .msbubble {
  border-color: rgba(var(--ink-rgb), 0.14);
  border-left-color: rgba(var(--ink-rgb), 0.28);
  background: rgba(var(--scrim-rgb), 0.5);
  color: rgba(var(--ink-rgb), 0.72);
}

/* A document is part of what was said, so the chips live inside the bubble. */
.msdocs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 9px 0 0; padding: 0; list-style: none; }

.msdoc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--scrim-rgb), 0.5);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.msdoc:hover,
.msdoc:focus-visible { border-color: var(--accent); }

.mskind {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
}

.msdoc__label { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.msdoc__size { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.35); }

.msslots { display: block; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.msslots__label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.msslots__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.msslot { position: relative; display: inline-flex; }
.msslot__input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.msslot__label {
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.msslot__input:checked + .msslot__label { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.msslot__input:focus-visible + .msslot__label { outline: 2px solid var(--accent); outline-offset: 2px; }

.msslots__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; }
.msslots__note { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.msslots__note.is-picked { color: var(--good); }

.msconfirm {
  padding: 9px 16px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.msconfirm:hover,
.msconfirm:focus-visible { background: var(--accent-hover); }

/* ------------------------------------------------------- the composer --- */

.mscomposer { margin-top: auto; padding: 14px 22px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.msquicks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.msquicks__label {
  margin-right: 3px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.msquick {
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.msquick:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.msquick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msquick.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.mswrite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 12px; }

.mswrite__input {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.mswrite__input::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.mswrite__input:focus { border-color: var(--accent); }
.mswrite__acts { display: flex; flex-direction: column; gap: 8px; }

.mssend {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mssend:hover,
.mssend:focus-visible { background: var(--accent-hover); }
.mssend--ghost { padding: 10px 22px; border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; letter-spacing: 0.12em; color: rgba(var(--ink-rgb), 0.6); }
.mssend--ghost:hover,
.mssend--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* Evidence, not a setting: the sentence is read from the thread's history. */
.msstatus { display: flex; align-items: center; gap: 9px; margin: 11px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }
.msstatus[hidden] { display: none; }
.msstatus__dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.msstatus__dot--system { background: rgba(var(--ink-rgb), 0.3); }

/* ------------------------------------------------ §02 facts, §03 files --- */

.msduo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(24px, 3vh, 34px);
  align-items: stretch;
}

.mscol { display: flex; flex-direction: column; min-width: 0; }
.mspanel { flex: 1; margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.mspanel[hidden] { display: none; }
.msfacts { margin: 0; padding: 0; list-style: none; }

.msfact {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 96px;
  gap: 13px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}


.msfact__dot {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1px solid var(--good);
  border-radius: 50%;
  background: var(--good);
}

.msfact__dot--open { border-color: rgba(var(--ink-rgb), 0.3); background: transparent; }
.msfact__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

/* A row with no citation does not belong in this section. */
.msfact__source { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

.msfact__state {
  text-align: right;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good);
}

.msfact__state--open { color: var(--warn); }

.msfoot {
  margin: 0;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

.msfiles { margin: 0; padding: 0; list-style: none; }

.msfileline {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 96px 62px;
  gap: 13px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  text-decoration: none;
  transition: background 0.2s ease;
}

.msfileline:hover,
.msfileline:focus-visible { background: rgba(var(--accent-rgb), 0.06); }
.msfileline--last { border-bottom: none; }
.msfileline__label { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }

.msfileline__when,
.msfileline__size {
  text-align: right;
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.38);
}

.msfileline__when { letter-spacing: 0.12em; text-transform: uppercase; }
.msnone { margin: 0; padding: 24px 18px; font-size: 12px; font-weight: 300; line-height: 1.6; text-align: center; color: rgba(var(--ink-rgb), 0.45); }
.msnone[hidden] { display: none; }

.msbelow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.msbelow__text { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }

.msbelow__link {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
}

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .mspane { grid-template-columns: 260px minmax(0, 1fr); }
  .msfile { grid-template-columns: 92px minmax(0, 1fr); }
  .msfile__acts { grid-column: 1 / -1; }
  .msbtn { flex: 1; text-align: center; }
  .msmsg__inner { max-width: 82%; }
  .msduo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* Two screens, not two columns: the list is the screen until a thread is
     opened, and the back link brings it back. */
  .mspane { grid-template-columns: minmax(0, 1fr); }
  .mspane.is-reading .mslist { display: none; }
  .msback { display: block; }
  .msmsg__inner { max-width: 88%; }
  .msdocs { flex-direction: column; align-items: stretch; }
  .msslots__row { flex-direction: column; align-items: stretch; }
  .msslot,
  .msslot__label { width: 100%; text-align: center; }
  .msquicks { flex-wrap: nowrap; overflow-x: auto; }
  .msquick { white-space: nowrap; }
  .msquicks__label { display: none; }
  .mswrite { grid-template-columns: minmax(0, 1fr); }
  /* Anything under 16px zooms iOS on focus and moves the layout. */
  .mswrite__input { font-size: 16px; }
  .mswrite__acts { flex-direction: row; }
  .mssend { flex: 1; }
  .msfact { grid-template-columns: 15px minmax(0, 1fr); row-gap: 6px; }
  .msfact__state { grid-column: 2; text-align: left; }
  .msfileline { grid-template-columns: 19px minmax(0, 1fr); row-gap: 4px; }
  .msfileline__when,
  .msfileline__size { grid-column: 2; text-align: left; }
}

.msback { display: none; }

.msback__link {
  display: inline-block;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}

@media (hover: none) {
  .mstab,
  .msnew,
  .msbtn,
  .msquick,
  .mssend,
  .msconfirm,
  .msslot__label { min-height: 44px; }
  .msslot__label,
  .mstab { display: inline-flex; align-items: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mstab,
  .msrow,
  .msquick,
  .msslot__label,
  .msdoc,
  .msfileline,
  .msbtn,
  .mssend,
  .msconfirm,
  .msnew,
  .mssearch,
  .mswrite__input,
  .msfile__title { transition: none; }
}
/* ==========================================================================
   82. Documents — a status register, not a folder tree, prefix `dc`
   --------------------------------------------------------------------------
   The seventh dashboard screen. A locker is the obvious design and the wrong
   one: folders answer "where did I put it?", and a buyer's questions are four
   others — what is missing and whose job is it, when does what I have go
   stale, who can see my payslips, and what do I need *next*. There is not a
   folder anywhere on this page.

   FOUR RULES THE DRAWING CARRIES
   ------------------------------
   Every document has a state and an owner. "Verified" means checked against
   the source, not uploaded. Requirements are staged, one stage at a time.
   And sharing is stated before it happens — §05 names the consequence of the
   tag while the tag is being chosen.

   ONE STATE VALUE COLOURS FIVE THINGS
   -----------------------------------
   The type box, the label, the pill's border, the pill's ink and the stat
   card it counts towards. That is what the `dctype--*` / `dcpill--*` pairs
   below are for: add a sixth state and all five follow from one place.

   THE RAIL AND THE SECTION HEADS ARE SECTION 75 (`db`).
   ========================================================================== */

.dcstack { min-width: 0; }

/* ------------------------------------------------------- §0 stat strip --- */

.dcstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.dcstat { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 20px 20px 22px; background: var(--panel-solid); }

.dcstat__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dcstat__value { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.dcstat__value--accent { color: var(--accent); }
.dcstat__value--warn { color: var(--warn); }
.dcstat__value--good { color: var(--good); }
.dcstat__note { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* ---------------------------------------------------------- §01 filters --- */

.dchead--first { margin-top: clamp(26px, 3.4vh, 38px); }
.dcchips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.dcchip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dcchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.dcchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dcchip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.dcchip__count { font-size: 12px; opacity: 0.6; }

/* ------------------------------------------------------------ §01 table --- */

.dctable__wrap { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.dctable { width: 100%; border-collapse: collapse; }

.dctable th,
.dctable td { padding: 14px 20px; text-align: left; vertical-align: middle; }

.dctable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.dctable thead th {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.dctable tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.2s ease; }
.dctable tbody tr:hover { background: rgba(var(--accent-rgb), 0.06); }
.dctable tbody tr[hidden] { display: none; }

.dccol--type { width: 60px; }
.dccol--file { width: 204px; }
.dccol--from { width: 146px; }
.dccol--state { width: 132px; }
.dccol--issued { width: 106px; text-align: right; }
.dctable td.dccol--issued { text-align: right; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }

/* Two letters, not an icon: the column of these reads as a status bar down
   the left edge of the table. */
.dctype {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.35);
}

.dctype--good { border-color: rgba(var(--good-rgb), 0.4); color: var(--good); }
.dctype--warn { border-color: rgba(var(--warn-rgb), 0.45); color: var(--warn); }
.dcdoc__label { display: block; font-size: 13px; font-weight: 400; line-height: normal; color: var(--ink); }
.dcdoc__label--waiting { color: rgba(var(--ink-rgb), 0.6); }
.dcdoc__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.dcdoc__file { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.dcdoc__file--property { color: rgba(var(--ink-rgb), 0.66); }
.dcdoc__from { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

.dcpill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.dcpill--good { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.dcpill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.dcpill--warn { border-color: rgba(var(--warn-rgb), 0.55); color: var(--warn); }

.dcempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  margin: 0;
  padding: 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.45);
}

.dcempty[hidden] { display: none; }

.dctable__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.dctable__link { text-decoration: none; color: var(--accent); }

/* ---------------------------------------------------- §02 and §03 pair --- */

.dcduo {
  display: grid;
  grid-template-columns: 1.15fr minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.4vh, 38px);
  align-items: stretch;
}

.dcduo--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dccol { display: flex; flex-direction: column; min-width: 0; }

.dcpanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
}

.dcpanel[hidden] { display: none; }
.dcstage__intro { margin: 0; padding: 16px 20px 4px; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }
.dcneeds { margin: 0; padding: 0; list-style: none; }

.dcneed {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 116px 108px;
  gap: 13px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.dcneed__dot { width: 15px; height: 15px; border: 1px solid rgba(var(--accent-rgb), 0.6); border-radius: 50%; background: transparent; }
.dcneed__dot--done { border-color: var(--good); background: var(--good); }
.dcneed__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.dcneed--done .dcneed__label { color: rgba(var(--ink-rgb), 0.6); }
.dcneed__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* Naming the owner is the section's whole value: it tells the buyer the thing
   they cannot work out — that it is not their task, and how to move it. */
.dcneed__owner {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.dcneed__act { text-align: right; }

.dcact {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dcneed--done .dcact { border-color: rgba(var(--ink-rgb), 0.2); color: rgba(var(--ink-rgb), 0.5); }

.dcact:hover,
.dcact:focus-visible { border-color: var(--accent); color: var(--accent); }
.dcspacer { flex: 1; }
.dcpanel__foot { margin: 0; padding: 14px 20px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* ----------------------------------------------------------- §03 expiry --- */

.dcexpiry { padding: 20px 22px 22px; }
.dcmonths { display: flex; align-items: flex-end; gap: 4px; height: 118px; margin: 0; padding: 0; list-style: none; }
.dcmonth { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }

.dcmonth__bar {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

/* An empty month still renders its baseline: the empty months are information. */
.dcmonth__bar--h3 { height: 3px; background: rgba(var(--ink-rgb), 0.12); cursor: default; }
.dcmonth__bar--h41 { height: 41px; }
.dcmonth__bar--h82 { height: 82px; background: var(--warn); }
.dcmonth__bar--h41:hover,
.dcmonth__bar--h82:hover,
.dcmonth.is-on .dcmonth__bar { background: var(--accent-hover); }
.dcmonth__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dcmonth__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dcmonth.is-on .dcmonth__label { color: var(--accent); }

.dcnote { margin: 16px 0 0; padding: 14px 16px; border: 1px solid rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.08); }
.dcnote--accent { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); }
.dcnote--ink { border-color: rgba(var(--ink-rgb), 0.2); background: rgba(var(--ink-rgb), 0.04); }
.dcnote[hidden] { display: none; }
.dcnote__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }

.dcnote__when {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warn);
}

.dcnote__count { font-family: var(--serif); font-size: 20px; line-height: normal; color: var(--warn); }
.dcnote--accent .dcnote__when,
.dcnote--accent .dcnote__count { color: var(--accent); }
.dcnote--ink .dcnote__when,
.dcnote--ink .dcnote__count { color: rgba(var(--ink-rgb), 0.6); }
.dcnote__text { margin: 8px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.66); }

.dcsoon { margin: 14px 0 0; padding: 0; list-style: none; }
.dcsoon__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.dcsoon__row--last { border-bottom: none; }
.dcsoon__label { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }

.dcsoon__when {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--warn);
}

.dcsoon__when--accent { color: var(--accent); }
.dcsoon__when--mute { color: rgba(var(--ink-rgb), 0.5); }

/* ----------------------------------------------------------- §04 access --- */

.dcaccess { width: 100%; border-collapse: collapse; }
.dcaccess th,
.dcaccess td { padding: 13px 20px; text-align: left; vertical-align: middle; }

.dcaccess thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }

.dcaccess thead th {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.dcaccess tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.dcaccess tbody tr:last-child { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
.dcaccess__who { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.66); }
.dcaccess__col { width: 1%; text-align: center; }
.dcaccess td.dcaccess__col { text-align: center; }

.dcmark {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 50%;
  background: transparent;
}

.dcmark--on { border-color: var(--good); background: var(--good); }

/* ----------------------------------------------------------- §05 upload --- */

.dcupload { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--accent); border-top: none; background: rgba(var(--accent-rgb), 0.1); padding: 22px 24px 24px; }

.dcdrop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 132px;
  padding: 20px;
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--scrim-rgb), 0.35);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dcdrop:hover { border-color: var(--accent); }
.dcdrop__title { font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); }
.dcdrop__hint { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.dcdrop__browse { color: var(--accent); text-decoration: underline; }
.dcfile { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dcfile:focus-visible + .dcdrop { outline: 2px solid var(--accent); outline-offset: 2px; }

.dctags { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

.dctags__label {
  margin-right: 3px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.dctag { position: relative; display: inline-flex; }
.dctag__input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.dctag__label {
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dctag__input:checked + .dctag__label { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.dctag__input:focus-visible + .dctag__label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The consequence of the tag, said while the tag is being chosen. */
.dcconsequence {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.66);
}

.dcpromise { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.dcdot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }

/* ------------------------------------------------------- 1179 and below --- */

@media (max-width: 1179px) {
  .dcstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dctable__scroll { overflow-x: auto; }
  .dctable { min-width: 860px; }
  .dcduo,
  .dcduo--even { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .dcstats { grid-template-columns: minmax(0, 1fr); }
  .dcchips { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .dcchip { white-space: nowrap; }
  .dctable { min-width: 720px; }
  .dcneed { grid-template-columns: 15px minmax(0, 1fr); row-gap: 10px; }
  .dcneed__owner,
  .dcneed__act { grid-column: 2; text-align: left; }
  /* Never below 8px, so the labels thin out instead of shrinking. */
  .dcmonth:nth-child(even) .dcmonth__label { display: none; }
  .dcmonth__label { min-width: 0; }
  .dcaccess__scroll { overflow-x: auto; }
  .dcaccess th,
  .dcaccess td { padding: 12px 14px; }
  .dcupload { padding: 20px 18px 22px; }
}

@media (hover: none) {
  .dcchip,
  .dcact,
  .dctag__label { min-height: 44px; }
  .dcchip,
  .dctag__label { display: inline-flex; align-items: center; }
  .dcmonth__bar { min-height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .dcchip,
  .dcact,
  .dctag__label,
  .dcmonth__bar,
  .dcdrop,
  .dctable tbody tr { transition: none; }
}
/* ==========================================================================
   83. Sell my home — the owner's intake, prefix `sl`
   --------------------------------------------------------------------------
   The last dashboard screen, and deliberately **not** the agent desk's intake
   with different labels. A professional filling in a file and an owner
   listing their own home are two different people with two different
   anxieties, and this page is built around the owner's:

       What is this actually going to cost me, what do I have to find, and
       what will I be left with?

   FOUR THINGS THE DRAWING HAS TO CARRY
   ------------------------------------
   The route comes first, before anything about the property, because it
   decides the fee and half the page. Nothing is assumed to exist — every
   requirement says where to get it and what it costs. The page ends in a
   number the owner keeps, not one the buyer pays. And every warning is
   written to a person about to make a mistake.

   The tone rule: say the cost of the cheap option out loud. The by-yourself
   route is genuinely cheaper and the page says so — and in the same breath
   says forty enquiries in the first fortnight, most of them from agents.

   THE RAIL IS SECTION 75 (`db`); the two panels under it are here.
   ========================================================================== */

.slstack { min-width: 0; }

/* ------------------------------------------------------- the rail panels --- */

.slscore { margin: 0; padding: 18px 20px 20px; border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.slscore__label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.slscore__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.slscore__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.slscore__value { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }

/* Not decoration: a bare 22 invites the owner to read it as a percentage of
   something they already finished. */
.slscore__of {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.slscore__value--nearly { color: var(--accent); }
.slscore__value--ready { color: var(--good); }

.slscore__tag {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warn);
}

.slscore__tag--nearly { color: var(--accent); }
.slscore__tag--ready { color: var(--good); }
.slbar { display: block; height: 5px; margin-top: 13px; background: rgba(var(--ink-rgb), 0.12); }
.slbar__fill { display: block; height: 5px; background: var(--warn); }
.slbar__fill--nearly { background: var(--accent); }
.slbar__fill--ready { background: var(--good); }
/* The opening score, so the bar is right before the script runs. Every value
   after that is a live figure and the script sets the width directly — a
   hundred utility classes would be a worse answer than one runtime style. */
.slbar__fill--22 { width: 22%; }
.slscore__note { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.sltodo { margin: clamp(16px, 1.8vh, 20px) 0 0; padding: 18px 20px 20px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel-solid); }
.sltodo__list { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }

.sltodo__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}

.sltodo__link:hover { color: var(--accent); }
.sltodo__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Square, not a circle: these are boxes to tick, and the rail's circles
   already mean something else. 15px painted — 13px of box inside a hairline. */
.sltodo__dot { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid rgba(var(--warn-rgb), 0.5); background: transparent; }
.sltodo__link--done { color: rgba(var(--ink-rgb), 0.45); }
.sltodo__link--done .sltodo__dot { border-color: var(--good); background: var(--good); }

.sltodo__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ---------------------------------------------------------- the step strip --- */
/* Tiles, not a wizard: the owner can jump, and nothing is gated. */

.slsteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.slstep {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 17px 18px 19px;
  border: none;
  border-top: 2px solid transparent;
  background: var(--panel-solid);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.slstep[aria-selected="true"] { border-top-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.slstep:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.slstep__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.slstep__num {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.slstep[aria-selected="true"] .slstep__num { color: var(--accent); }

.sltick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--bg);
}

.sltick--done { border-color: var(--good); background: var(--good); }
.sltick__glyph { visibility: hidden; }
.sltick--done .sltick__glyph { visibility: visible; }
.slstep__label { font-size: 13px; line-height: normal; color: var(--ink); }
.slstep[aria-selected="true"] .slstep__label { color: var(--accent); }
.slstep__note { font-size: 12px; font-weight: 300; line-height: 1.45; color: rgba(var(--ink-rgb), 0.42); }

/* ----------------------------------------------------------- the two columns --- */

.slmain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 342px;
  gap: clamp(20px, 2.2vw, 30px);
  margin-top: clamp(26px, 3.4vh, 38px);
  align-items: start;
}

.slcol { min-width: 0; }
.slsaved { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }

.slform {
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: var(--panel);
  padding: 26px 28px 24px;
}

.slpanel[hidden] { display: none; }
.slgrid { display: grid; gap: 18px 20px; }
.slgrid--address { grid-template-columns: minmax(0, 2fr) minmax(172px, 1fr) minmax(172px, 1fr); }
.slgrid--rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.slfield__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.slfield--live .slfield__label { color: var(--accent); }

.slinput {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}

.slinput::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.slinput:focus { border-color: var(--accent); }
.slfield--live .slinput { border-color: rgba(var(--accent-rgb), 0.55); }

/* Locked until the survey is booked — and the hint says why, rather than a
   bare `disabled` leaving the owner to guess. */
.slinput:disabled { color: rgba(var(--ink-rgb), 0.35); cursor: not-allowed; }
.slhint { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.38); }


.slchips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; }

.slchip {
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.slchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.slchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slchip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

/* A <fieldset> arrives with a 2px groove border, its own padding and a 2px
   side margin. The routes are a real radio group, so it all has to go. */
.slblock { margin: 22px 0 0; min-width: 0; padding: 0; border: none; }

/* A rule above the block, where the drawing separates one decision from
   the next rather than merely stacking them. */
.slblock--rule { padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.slblock__label { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }

/* ----------------------------------------------------------------- §01 route --- */

.slroutes { margin: 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.16); background: rgba(var(--ink-rgb), 0.16); list-style: none; display: flex; flex-direction: column; gap: 1px; }

.slroute { position: relative; display: block; background: var(--panel-solid); }
.slroute__input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.slroute__label {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.slroute__input:checked + .slroute__label { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.slroute__input:focus-visible + .slroute__label { outline: 2px solid var(--accent); outline-offset: -3px; }
.slroute__dot { width: 15px; height: 15px; border: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 50%; background: transparent; }
.slroute__input:checked + .slroute__label .slroute__dot { border-color: var(--accent); background: var(--accent); }
.slroute__name { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.slroute__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* A percentage and a flat fee in the same column, deliberately: they are
   different kinds of thing and the owner should see that. Gold only on the
   route actually chosen — three gold figures would say nothing. */
.slroute__fee {
  justify-self: end;
  width: 116px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.5);
}

.slroute__input:checked + .slroute__label .slroute__fee { color: var(--accent); }

.slsays {
  margin: 13px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* -------------------------------------------------------------- §02 the gap --- */

/* Bedrooms and bathrooms are a count, not a set: one segmented control, and
   the chosen segment is filled rather than outlined. */
.slseg { display: flex; min-width: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.slseg__btn {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.slseg__btn:last-child { border-right: none; }
.slseg__btn:hover { color: var(--accent); }
.slseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.slseg__btn.is-on { background: var(--accent); color: var(--on-accent); }

.slgap { display: block; margin-top: 20px; padding: 16px 18px; border: 1px solid rgba(var(--warn-rgb), 0.5); border-left: 2px solid var(--warn); background: var(--panel-picked); }
.slgap--exact { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.slgap--smaller { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.slgap__row { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.slgap__figure { font-family: var(--serif); font-size: 26px; line-height: 1; white-space: nowrap; color: var(--warn); }
.slgap--exact .slgap__figure { color: var(--good); }
.slgap--smaller .slgap__figure { color: var(--accent); }
.slgap__text { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.72); }
.slcount { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* ----------------------------------------------------------- §03 the papers --- */
/* A bordered ledger, one row per requirement. The rows still missing are
   tinted, so what a buyer's notary would stop at is visible before reading. */

.slintro { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }
.slpapers { display: flex; flex-direction: column; margin: 18px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.16); list-style: none; }

.slpaper {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 128px 118px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--warn-rgb), 0.05);
}

.slpaper--on { background: transparent; }
.slpaper--last { border-bottom: none; }

.slpaper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(var(--warn-rgb), 0.5);
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--warn);
}

.slpaper--on .slpaper__dot { border-color: var(--good); background: var(--good); color: var(--bg); }
.slpaper__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }

/* Where to get it and what it costs — nothing is assumed to exist. */
.slpaper__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.42); }

.slpaper__req {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.slpaper__req--required { color: var(--warn); }
.slpaper__req--advised { color: var(--accent); }
.slpaper__act { text-align: right; }

/* Gold while it is missing — it is the thing to do next; quiet green once it
   is on file, because a finished row should stop asking for attention. */
.slbtn {
  padding: 8px 13px;
  border: 1px solid var(--accent);
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.slbtn:hover,
.slbtn:focus-visible { border-color: var(--accent-hover); background: var(--accent-hover); }
.slbtn[aria-pressed="true"] { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.slbtn[aria-pressed="true"]:hover,
.slbtn[aria-pressed="true"]:focus-visible { border-color: var(--good); background: transparent; color: var(--good); }

.slfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; }
.slfoot--rule { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.slfoot__text { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--good); }
.slfoot__text--warn { color: var(--warn); }

.slask {
  padding: 11px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.slask:hover,
.slask:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- §04 the frames --- */
/* Eight empty frames, four of them tagged. Tapping one marks the room as
   photographed — the point is the four a buyer looks for, not the count. */

.slframes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

.slframe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 108px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.slframe--must { border-color: rgba(var(--warn-rgb), 0.5); }
.slframe:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.slframe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slframe[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.slframe__num { font-family: var(--serif); font-size: 19px; line-height: 1; color: rgba(var(--ink-rgb), 0.28); }
.slframe[aria-pressed="true"] .slframe__num { color: var(--accent); }
.slframe__label { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.slframe[aria-pressed="true"] .slframe__label { color: var(--accent); }

.slframe__tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 7px;
  background: rgba(var(--warn-rgb), 0.9);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
}

.slframe[aria-pressed="true"] .slframe__tag { background: rgba(var(--good-rgb), 0.9); }

.sladvice { margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--ink-rgb), 0.16); background: var(--panel-callout); }
.sladvice__label { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.sladvice__text { margin: 9px 0 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.6); }

/* -------------------------------------------------------------- §05 the price --- */

.slprice { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; }
.slprice__figure { font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }
.slprice__per { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.slprice__per--over { color: var(--warn); }
.slprice__per--under { color: var(--good); }
.slprice__per--band { color: var(--accent); }

.slslider { width: 100%; margin: 18px 0 0; accent-color: var(--accent); cursor: pointer; }
.slrange { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

.slevidence { margin-top: 24px; }
.slevidence--rule { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.slevidence__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }

.slevidence__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.slreach { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.slreach--good { color: var(--good); }
.slreach--mid { color: var(--accent); }
.slreach--low { color: var(--warn); }

/* Twelve bands of twenty thousand. Lit from the asking price upwards: the
   owner sees exactly how much of the register they price themselves out of. */
.slbands { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin: 12px 0 0; padding: 0; list-style: none; }
.slband { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.slband__fill { display: block; width: 100%; background: rgba(var(--ink-rgb), 0.16); transition: background 0.2s ease; }
.slband--lit .slband__fill { background: var(--accent); }

.slband__fill--h8 { height: 8%; }
.slband__fill--h12 { height: 12%; }
.slband__fill--h21 { height: 21%; }
.slband__fill--h33 { height: 33%; }
.slband__fill--h38 { height: 38%; }
.slband__fill--h50 { height: 50%; }
.slband__fill--h58 { height: 58%; }
.slband__fill--h67 { height: 67%; }
.slband__fill--h83 { height: 83%; }
.slband__fill--h88 { height: 88%; }
.slband__fill--h100 { height: 100%; }

.slcomps { margin: 12px 0 0; padding: 0; list-style: none; }
.slcomp { display: grid; grid-template-columns: minmax(0, 1fr) 100px 116px 112px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.slcomp--last { border-bottom: none; }
.slcomp__title { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.slcomp__area { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.slcomp__price { font-family: var(--serif); font-size: 16px; line-height: normal; color: var(--ink); }
.slcomp__per { text-align: right; font-size: 12px; line-height: normal; color: var(--good); }
.slcomp__per--under { color: var(--warn); }

.slverdict { margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--ink-rgb), 0.16); border-left: 2px solid rgba(var(--ink-rgb), 0.4); background: var(--panel-callout); }
.slverdict--over { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.slverdict--under { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.slverdict--band { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }

.slverdict__title {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.slverdict--over .slverdict__title { color: var(--warn); }
.slverdict--under .slverdict__title { color: var(--good); }
.slverdict--band .slverdict__title { color: var(--accent); }
.slverdict__body { margin: 9px 0 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* ------------------------------------------------------------- the form footer --- */

.slnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.slnav__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.slnav__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.42); }

.slghost {
  padding: 12px 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.slghost--back { color: var(--ink); }
.slghost:hover,
.slghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.slnext {
  padding: 13px 26px;
  border: 1px solid var(--accent);
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.slnext:hover,
.slnext:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Not disabled — it says what is missing and stays clickable, because an owner
   who presses it deserves to be told, not ignored. */
.slnext--blocked { border-color: rgba(var(--warn-rgb), 0.5); background: transparent; color: var(--warn); }
.slnext--blocked:hover,
.slnext--blocked:focus-visible { border-color: var(--warn); background: transparent; color: var(--warn); }

/* ------------------------------------------------------- preview and proceeds --- */

.slside { display: flex; flex-direction: column; gap: clamp(20px, 2.4vh, 26px); min-width: 0; }
/* No top border on either panel — the rule above it is the top edge. */
.slcard { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.slcard__media { position: relative; display: block; aspect-ratio: 3 / 2;
  height: auto; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }

/* There is nothing to see here yet, stated rather than faked — the same hatch
   the coming-soon and foreclosure pages use, meaning the same thing. */
.slhatch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(135deg, rgba(var(--scrim-rgb), 0.5) 0 6px, rgba(var(--scrim-rgb), 0.14) 6px 12px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.slhatch[hidden] { display: none; }

.slbadge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: rgba(var(--scrim-rgb), 0.85);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.72);
}

.slbadge--ready { background: rgba(var(--good-rgb), 0.9); color: var(--bg); }
.slcard__body { padding: 17px 18px 19px; }
.slcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.slcard__title { font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }

.slcard__sheet {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.4);
}

.slcard__meta { margin: 5px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.sltags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 13px 0 0; padding: 0; list-style: none; }

.sltag {
  padding: 4px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.slcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.slcard__figure { display: flex; align-items: baseline; gap: 9px; margin: 14px 0 0; }
.slcard__price { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }
.slcard__hint { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.slcard__note { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.slcard__note--warn { color: var(--warn); }

.slkeep { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); padding: 20px 20px 22px; }
.slhead,
.slkeep__head {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.slhead__stub { flex: 1 1 24px; height: 1px; background: rgba(var(--ink-rgb), 0.14); }

.slkeep__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.slkeep__tag { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.slrows { margin: 0; padding: 0; list-style: none; }
.slrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.slrow--last { border-bottom: none; }
.slrow__label { display: block; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.slrow__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.38); }
.slrow__value { font-family: var(--serif); font-size: 16px; line-height: normal; white-space: nowrap; color: rgba(var(--ink-rgb), 0.72); }
.slrow__value--unset { color: rgba(var(--ink-rgb), 0.35); }
.slrow__value--price { color: var(--ink); }

.sltotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--ink-rgb), 0.2); }

.sltotal__label {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.sltotal__value { font-family: var(--serif); font-size: 30px; line-height: 1; white-space: nowrap; color: var(--accent); }
.slkeep__note { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------------------------ 1179 and below --- */

@media (max-width: 1179px) {
  .slmain { grid-template-columns: minmax(0, 1fr); }
  .slside { flex-direction: row; }
  .slside > * { flex: 1; min-width: 0; }
  .slgrid--address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slgrid--rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slstep__note { display: none; }
  .slpaper { grid-template-columns: 19px minmax(0, 1fr) 104px; row-gap: 8px; }
  .slpaper__req { grid-column: 2; }
  .slframes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slcomp { grid-template-columns: minmax(0, 1fr) 104px 104px; row-gap: 4px; }
  .slcomp__area { grid-column: 1; }
}

@media (max-width: 767px) {
  /* The number is why they came, so the proceeds panel goes first. */
  .slside { flex-direction: column-reverse; }
  .slsteps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .slsteps > li { flex: 0 0 58vw; scroll-snap-align: start; }
  .slgrid--address,
  .slgrid--rooms { grid-template-columns: minmax(0, 1fr); }
  /* Anything under 16px zooms iOS on focus and moves the layout. */
  .slinput { font-size: 16px; }
  .slroute__label { grid-template-columns: 13px minmax(0, 1fr); row-gap: 8px; }
  .slroute__fee { grid-column: 2; }
  .slpaper { grid-template-columns: 19px minmax(0, 1fr); }
  .slbtn { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .slframes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slframe { height: 120px; }
  .slgap__row { flex-direction: column; gap: 10px; }
  /* `Book a photographer · €180` will not fit one line at 375; it takes
     the full width and wraps rather than pushing the page sideways. */
  .slask { width: 100%; white-space: normal; }
  .slfoot { align-items: stretch; }
  .slcomp { grid-template-columns: minmax(0, 1fr) auto; }
  .slcomp__area,
  .slcomp__per { grid-column: 1; text-align: left; }
  .slform { padding: 20px 18px 20px; }
  .slnav { flex-direction: column; align-items: stretch; }
  .slnext { width: 100%; }
}

@media (hover: none) {
  .slchip,
  .slbtn,
  .slghost,
  .slnext,
  .slroute__label,
  .sltodo__link { min-height: 44px; }
  .slchip { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .slstep,
  .slchip,
  .slframe,
  .slbtn,
  .slghost,
  .slnext,
  .slroute__label,
  .slinput,
  .sltodo__link { transition: none; }
}

/* ==========================================================================
   84. Agent desk — Overview, prefix `ag`
   --------------------------------------------------------------------------
   The first of the ten agent screens, and the first page on this site written
   for someone at work rather than someone shopping.

   The buyer's dashboard opens with what they saved. This one opens with

       **Five people are waiting on you.**

   and every section obeys the same rule: it is a shift, not a report.
   Everything on the page is either a person owed an answer, a place the agent
   has to be, or money that is nearly signed.

   THREE CONSEQUENCES, ALL VISIBLE IN THE RULES BELOW
   --------------------------------------------------
   1. **Nothing here is vanity.** No portfolio total, no streak, no badge. All
      four stat tiles name a debt.
   2. **Silence is coloured.** An enquiry past 24 h, an owner past 7 days, a
      listing past 60 days and a travel gap that cannot be made are all
      `--warn`, so the agent finds their problems by scanning for orange.
   3. **The rail carries the clock, not the profile.** Where the buyer's rail
      shows their agent, this one shows the median reply time against the desk
      target — the number the job is judged on.

   THE 12px FLOOR CHANGES THIS PAGE MORE THAN MOST
   -----------------------------------------------
   The drawing leans on 8–11px micro type in about sixty places. Envato's
   floor is 12, so every one of those comes up, and the tracking in `em` comes
   up with it. Rows are a few pixels taller than the comp throughout; the
   layout absorbs it because every panel is content-height.

   Section 75 (`db`) owns the buyer's rail. This one is separate: ten items,
   a reply clock and a weekday chart, emitted by `_design/_builders/_agrail.py`.
   ========================================================================== */

.agpage {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
  align-items: start;
  margin: clamp(22px, 3vh, 32px) var(--pad-hero) clamp(48px, 6vh, 72px);
}

.agmain { min-width: 0; }

/* ----------------------------------------------------------------- the rail --- */

.agrail { position: sticky; top: 146px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.agblock { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); }
.agwho { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 20px 16px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }

.agmono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  object-fit: cover;
}

.agwho__text { flex: 1; min-width: 0; }
.agwho__name { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.agwho__role { display: block; margin-top: 3px; font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }

.agnav { display: flex; flex-direction: column; margin: 0; padding: 8px 0; list-style: none; }

.agnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 20px;
  border-left: 2px solid transparent;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  color: rgba(var(--ink-rgb), 0.72);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.agnav__link:hover { color: var(--accent); }
.agnav__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.agnav__link.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); }
.agnav__badge { font-size: 12px; line-height: normal; letter-spacing: 0.1em; color: rgba(var(--ink-rgb), 0.38); }

/* The only warn badge in the rail: enquiries are the one thing that goes
   stale on its own while the agent is elsewhere. */
.agnav__badge--warn { color: var(--warn); }
.agrail__foot { display: block; margin: 0; padding: 14px 20px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }

.agsignout {
  display: block;
  padding: 11px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--ink-rgb), 0.66);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.agsignout:hover,
.agsignout:focus-visible { border-color: var(--warn); color: var(--warn); }

/* --- the reply clock: the number the agent's job is judged on --- */

.agclock { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.aghead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }

.aglabel {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.agwindow {
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.agclock__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.agclock__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.agclock__unit { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.agclock__track { position: relative; display: block; height: 5px; margin-top: 13px; background: rgba(var(--ink-rgb), 0.12); }
.agclock__fill { position: absolute; left: 0; top: 0; height: 5px; width: 63%; background: var(--good); }

/* The desk target, drawn where it falls rather than written out: the fill
   stopping short of the tick is the whole message. */
.agclock__mark { position: absolute; left: 60%; top: -3px; width: 1px; height: 11px; background: rgba(var(--ink-rgb), 0.6); }
.agnote { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

/* --- the weekday chart --- */

.agweek { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.agweek__bars { display: flex; align-items: flex-end; gap: 5px; height: 66px; margin: 14px 0 0; padding: 0; list-style: none; }
.agweek__bars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.agdow {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 5px;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.agdow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agdow__bar { display: block; width: 100%; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }

/* The busiest day is already lit before anything is hovered — the chart has
   to say something to a reader who never touches it. */
.agdow--peak .agdow__bar { background: rgba(var(--accent-rgb), 0.7); }
.agdow.is-on .agdow__bar { background: var(--accent); }
.agdow__label { font-size: 12px; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.agdow.is-on .agdow__label { color: var(--accent); }
.agweek__note { display: block; margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.agdow__bar--h17 { height: 17%; }
.agdow__bar--h33 { height: 33%; }
.agdow__bar--h50 { height: 50%; }
.agdow__bar--h67 { height: 67%; }
.agdow__bar--h83 { height: 83%; }
.agdow__bar--h100 { height: 100%; }

/* ------------------------------------------------------------- §0 the tiles --- */
/* Shared hairline: 1px gaps over a 0.16 ground inside a matching border. */

.agstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.agstat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 20px 22px 22px;
  background: var(--panel-tile);
  text-decoration: none;
  transition: background 0.2s ease;
}

.agstat:hover { background: var(--panel-picked); }
.agstat:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.agstat__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.agstat__row { display: flex; align-items: baseline; gap: 9px; }
.agstat__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.agstat__value--accent { color: var(--accent); }
.agstat__value--warn { color: var(--warn); }
/* A tile whose figure is the good news — Performance's share of fees from
   people the agent already knew. */
.agstat__value--good { color: var(--good); }
.agstat__delta { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.agstat__delta--warn { color: var(--warn); }
.agstat__delta--good { color: var(--good); }
.agstat__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* --------------------------------------------------------- the section rules --- */

.agsec { margin-top: clamp(26px, 3.4vh, 38px); }

.aghr {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Two rules, deliberately different: a 28px accent dash where the section has
   a right-hand control, a hairline filling the row where it has only a note. */
.aghr--wide { align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 14px; }
.aghr__dash { flex: 0 0 28px; width: 28px; height: 1px; background: var(--accent); }
.aghr__fill { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.aghr__note { color: rgba(var(--ink-rgb), 0.5); }
.aghr__note--warn { color: var(--warn); }
.aghr__note--good { color: var(--good); }
/* Work outstanding but nothing late: the third state the promise list needs. */
.aghr__note--accent { color: var(--accent); }
.aghr__left { display: flex; align-items: center; gap: 13px; min-width: 0; }
/* A sentence beside the rule, not a label: the rule's own uppercase would
   turn it into shouting. */
.aghr__aside { font-size: 12px; font-weight: 300; line-height: normal; letter-spacing: normal; text-transform: none; color: rgba(var(--ink-rgb), 0.42); }

/* The panel below a rule has no top border: the rule is its top edge. */
.agbox { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.agbox--fill { display: flex; flex-direction: column; height: 100%; flex: 1; }
.agcol { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.agspacer { flex: 1; }

.aglink {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent);
}

.aglink:hover,
.aglink:focus-visible { color: var(--accent-hover); }
.agfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 14px 20px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* --------------------------------------------------------- §01 owed a reply --- */

.agsorts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.agsort {
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.agsort:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.agsort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agsort.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.agleads { margin: 0; padding: 0; list-style: none; }

.aglead {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 168px 132px minmax(212px, auto);
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  transition: background 0.2s ease;
}

/* The action column's minimum is load-bearing: at a fixed 150px `Book a
   viewing` climbed onto the wait figure at 1180. */
.aglead--last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.aglead--late { border-left-color: var(--warn); }
.aglead:hover { background: rgba(var(--accent-rgb), 0.06); }

.agavatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.6);
  transition: border-color 0.2s ease, color 0.2s ease;
  object-fit: cover;
}

.aglead:hover .agavatar { border-color: var(--accent); color: var(--accent); }
.aglead__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.aglead__name { font-size: 13px; line-height: normal; color: var(--ink); }

.agpill {
  padding: 3px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.agpill--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.agpill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.agpill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

/* What they actually asked, in their words — not a subject line. */
.aglead__asked { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }
.aglead__file { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.aglead__price { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.agwait { display: block; font-family: var(--serif); font-size: 18px; line-height: 1; color: var(--good); }
.agwait--late { color: var(--warn); }
.agwait__note { display: block; margin-top: 5px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.agacts { display: flex; gap: 8px; justify-content: flex-end; }

/* No border on the solid one: the drawing gives Reply a filled block and the
   second action an outline, so the two never look like a matched pair. */
.agbtn {
  padding: 10px 16px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agbtn:hover,
.agbtn:focus-visible { background: var(--accent-hover); }

.agbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.agbtn--ghost:hover,
.agbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ---------------------------------------------------------------- §02 today --- */

.agsplit { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: stretch; }
.agsplit--even { grid-template-columns: 1fr 1fr; align-items: start; }
.agsplit--wide { grid-template-columns: 1fr 1.25fr; }

.agday { margin: 0; padding: 0; list-style: none; }
.agday__row { display: block; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.agday__row--last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }

.agevent {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 15px 20px;
  border-left: 2px solid rgba(var(--ink-rgb), 0.28);
}

.agevent--accent { border-left-color: var(--accent); }
.agevent--positive { border-left-color: var(--good); }
.agtime { display: block; font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--ink); }
.aglen { display: block; margin-top: 5px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.agevent__title { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.agevent__who { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.agtag {
  padding: 4px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.agtag--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.agtag--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }

/* The gaps are rows too, and a gap that cannot be made is the reason this
   section is a list rather than an embedded calendar. */
.aggap { display: flex; align-items: center; gap: 13px; padding: 9px 20px; }
.aggap--warn { background: rgba(var(--warn-rgb), 0.08); }
.aggap__rule { flex: 0 0 70px; width: 70px; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.aggap__text { margin: 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }
.aggap--warn .aggap__text { color: var(--warn); }

/* ------------------------------------------------------- §03 offers in play --- */

.agoffers { margin: 0; padding: 0; list-style: none; }
.agoffer { display: block; padding: 16px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); border-left: 2px solid var(--accent); }
.agoffer--last { border-bottom: none; }
.agoffer--accent { border-left-color: var(--accent); }
.agoffer--positive { border-left-color: var(--good); }
.agoffer--warn { border-left-color: var(--warn); }
.agoffer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.agoffer__file { font-size: 13px; line-height: normal; color: var(--ink); }
.agoffer__amount { font-family: var(--serif); font-size: 18px; line-height: normal; white-space: nowrap; color: var(--ink); }
.agoffer__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; }
.agoffer__buyer { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.agoffer__vs { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--accent); }
.agoffer__vs--accent { color: var(--accent); }
.agoffer__vs--positive { color: var(--good); }
.agoffer__vs--warn { color: var(--warn); }

/* Offer made → Owner deciding → Survey booked → Deed drafted. */
.agsteps { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.agsteps__seg { flex: 1; height: 3px; background: rgba(var(--ink-rgb), 0.14); }
.agsteps__seg--on { background: var(--accent); }
.agoffer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px 0 0; }
.agstage { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.agstage--accent { color: var(--accent); }
.agstage--positive { color: var(--good); }
.agstage--warn { color: var(--warn); }
.agoffer__next { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }

.agtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 15px 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.agtotal__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.agtotal__value { font-family: var(--serif); font-size: 22px; line-height: normal; white-space: nowrap; color: var(--accent); }

/* ------------------------------------------------------------ §04 listings --- */

.aglist { margin: 0; padding: 0; list-style: none; }

.aglist__head,
.aglist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 96px 96px 130px 150px;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
}

.aglist__head {
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.aglist__row { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); text-decoration: none; transition: background 0.2s ease; }
.aglist__row--last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.aglist__row:hover { background: rgba(var(--accent-rgb), 0.06); }
.aglist__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.aglist__title { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.aglist__sheet { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.aglist__price { font-family: var(--serif); font-size: 17px; line-height: normal; color: var(--ink); }
.agdays { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.agdays--warn { color: var(--warn); }
.agdays--accent { color: var(--accent); }
.agviews { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.agneed { text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.agneed--accent { color: var(--accent); }
.agneed--positive { color: var(--good); }
.agneed--warn { color: var(--warn); }
.aglist__end { text-align: right; }

/* Eight weeks of views; only the last two bars carry the trend, because that
   is the part the agent can still do something about. */
.agspark { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin: 0; padding: 0; list-style: none; }
.agspark__bar { flex: 1; background: rgba(var(--ink-rgb), 0.22); }
.agspark__bar--up { background: var(--accent); }
.agspark__bar--down { background: var(--warn); }

.agspark__bar--h20 { height: 20%; }
.agspark__bar--h30 { height: 30%; }
.agspark__bar--h40 { height: 40%; }
.agspark__bar--h50 { height: 50%; }
.agspark__bar--h60 { height: 60%; }
.agspark__bar--h70 { height: 70%; }
.agspark__bar--h80 { height: 80%; }
.agspark__bar--h90 { height: 90%; }
.agspark__bar--h100 { height: 100%; }

/* -------------------------------------------------------------- §05 owners --- */

.agowners { margin: 0; padding: 0; list-style: none; }
.agowner { display: grid; grid-template-columns: minmax(0, 1fr) 116px 104px; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.agowner__name { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.agowner__file { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.agdue { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.agdue--warn { color: var(--warn); }
.agdue--sent { color: var(--good); }
.agowner__act { text-align: right; }

.agsend {
  padding: 9px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.agsend--due { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.agsend--sent { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.agsend:hover,
.agsend:focus-visible { border-color: var(--accent); color: var(--accent); }
.agsend--due:hover,
.agsend--due:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.agsend--sent:hover,
.agsend--sent:focus-visible { border-color: var(--good); color: var(--good); }
.agfoot--block { display: block; }

/* ------------------------------------------------------------- §06 quarter --- */

.agbox--pad { padding: 20px 22px 22px; }
.agq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.agq__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); }
.agq__note { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.agq__track { position: relative; display: block; height: 8px; margin-top: 14px; background: rgba(var(--ink-rgb), 0.12); }
.agq__signed { position: absolute; left: 0; top: 0; height: 8px; width: 68%; background: var(--accent); }
.agq__play { position: absolute; left: 68%; top: 0; height: 8px; width: 24%; background: rgba(var(--accent-rgb), 0.3); }
.agq__target { position: absolute; left: 100%; top: -4px; width: 1px; height: 16px; background: rgba(var(--ink-rgb), 0.5); }

.agkey {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 11px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
  list-style: none;
}

.agkey__item { display: flex; align-items: center; gap: 7px; }
.agkey__swatch { width: 14px; height: 6px; background: var(--accent); }
.agkey__swatch--play { background: rgba(var(--accent-rgb), 0.3); }
.agkey__swatch--muted { background: rgba(var(--ink-rgb), 0.24); }
.agkey__tick { width: 1px; height: 12px; background: rgba(var(--ink-rgb), 0.5); }
.agkey__dot { width: 11px; height: 11px; border: 1px solid var(--good); border-radius: 50%; }

.aggrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.aggrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agcell { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; background: var(--panel-callout); }
.agcell__label { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.agcell__row { display: flex; align-items: baseline; gap: 8px; }
.agcell__value { font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); }
.agcell__value--accent { color: var(--accent); }
.agcell__value--good { color: var(--good); }
.agcell__value--muted { color: rgba(var(--ink-rgb), 0.35); }
.agcell__value--warn { color: var(--warn); }
/* The week readout sits a size below the quarter grid: four figures in a
   narrower panel, and they are a reading rather than a result. */
.agcell__value--sm { font-size: 19px; }

/* More viewings per sale is worse, so its delta is warn while its sign is
   positive. Direction decides the colour, never the sign. */
.agcell__delta { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.agcell__delta--good { color: var(--good); }
.agcell__delta--warn { color: var(--warn); }
.agq__foot { display: block; margin: 18px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

/* -------------------------------------------------------------- §07 funnel --- */

.agbox--pad24 { padding: 22px 24px 24px; }
.agfunnel { margin: 0; padding: 0; list-style: none; }
.agstep { display: block; width: 100%; padding: 11px 0; border: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.agstep--last { border-bottom: none; }
.agstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agstep__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agstep__label { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.agstep.is-on .agstep__label { color: var(--ink); }
.agstep__figures { display: flex; align-items: baseline; gap: 10px; }
.agstep__count { font-family: var(--serif); font-size: 17px; line-height: normal; color: var(--ink); }
.agstep.is-on .agstep__count { color: var(--accent); }
.agstep__drop { min-width: 62px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-align: right; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.agstep__drop--none { color: rgba(var(--ink-rgb), 0.3); }
.agstep__drop--worst { color: var(--warn); }
.agstep__track { display: block; height: 10px; margin-top: 8px; background: rgba(var(--ink-rgb), 0.1); }
.agstep__bar { display: block; height: 10px; background: rgba(var(--accent-rgb), 0.45); transition: background 0.2s ease; }

/* The weak step finds itself: the largest proportional drop is what turns
   warn, so changing the numbers moves the marking. */
.agstep__bar--worst { background: rgba(var(--warn-rgb), 0.75); }
.agstep.is-on .agstep__bar { background: var(--accent); }

.agstep__bar--w100 { width: 100%; }
.agstep__bar--w88 { width: 88%; }
.agstep__bar--w36 { width: 36%; }
.agstep__bar--w15 { width: 15%; }
.agstep__bar--w7 { width: 7%; }
.agstep__bar--w4 { width: 4%; }

.agsays { display: block; margin: 16px 0 0; padding: 14px 16px; border: 1px solid rgba(var(--ink-rgb), 0.16); background: var(--panel-callout); font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.66); }
.agsays--worst { border-color: rgba(var(--warn-rgb), 0.5); }

/* --------------------------------------------------------- §08 twelve weeks --- */

.agchart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; }
.agchart__figures { display: flex; align-items: baseline; gap: 10px; }
.agchart__figure { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.agchart__unit { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.agchart__delta { font-size: 12px; font-weight: 300; line-height: normal; color: var(--good); }
.agchart__delta--warn { color: var(--warn); }
.agchart__delta--flat { color: rgba(var(--ink-rgb), 0.42); }

.agplot { position: relative; display: block; margin-top: 20px; }
.agplot__grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--ink-rgb), 0.08); }
.agplot__grid--g0 { top: 0; }
.agplot__grid--g1 { top: 56px; }
.agplot__grid--g2 { top: 112px; }
.agbars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 168px; margin: 0; padding: 0; list-style: none; }
.agbars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.agwk {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.agwk.is-on { background: rgba(var(--accent-rgb), 0.08); }
.agwk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agwk__e { display: block; width: 42%; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }
.agwk.is-on .agwk__e { background: rgba(var(--ink-rgb), 0.5); }
.agwk__v { display: block; width: 42%; background: var(--accent); transition: background 0.2s ease; }
.agwk.is-on .agwk__v { background: var(--accent-hover); }

/* A week where something signed carries a dot above its taller bar. */
.agwk__dot { position: absolute; left: 50%; margin-left: -4px; width: 11px; height: 11px; border: 1px solid var(--good); border-radius: 50%; background: var(--good); }

.agwklabels { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.agwklabel { flex: 1; min-width: 0; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.agwklabel.is-on { color: var(--accent); }
.agchart__note { display: block; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

.agwk__e--h44 { height: 44%; }
.agwk__e--h50 { height: 50%; }
.agwk__e--h56 { height: 56%; }
.agwk__e--h61 { height: 61%; }
.agwk__e--h67 { height: 67%; }
.agwk__e--h72 { height: 72%; }
.agwk__e--h78 { height: 78%; }
.agwk__e--h83 { height: 83%; }
.agwk__e--h89 { height: 89%; }
.agwk__e--h100 { height: 100%; }
.agwk__v--h17 { height: 17%; }
.agwk__v--h22 { height: 22%; }
.agwk__v--h28 { height: 28%; }
.agwk__v--h33 { height: 33%; }
.agwk__v--h39 { height: 39%; }
.agwk__v--h44 { height: 44%; }
.agwk__dot--t0 { top: 0px; }
.agwk__dot--t3 { top: 3px; }
.agwk__dot--t40 { top: 40px; }
.agwk__dot--t49 { top: 49px; }
.agwk__dot--t68 { top: 68px; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  /* The rail becomes a horizontal strip under the header, the reply clock
     leading it: the agent's headline number should not need a scroll. */
  .agpage { grid-template-columns: minmax(0, 1fr); }
  /* `overflow-y` is pinned so the row scrolls on one axis only: left to auto
     it grows a vertical scrollbar whose width the document then counts. */
  .agrail { position: static; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 12px; padding-bottom: 4px; }
  /* `min-width: auto` on a flex item is its content's width, and a rail item
     whose nav happens to measure wide then ignores the 300px basis and drags
     the whole page into a horizontal scroll. */
  .agrail > * { flex: 0 0 300px; min-width: 0; }
  .agclock { order: -1; }
  .agnav { flex-direction: row; overflow-x: auto; padding: 8px; }
  .agnav__link { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .agnav__link.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
  .agstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agsplit,
  .agsplit--even,
  .agsplit--wide { grid-template-columns: minmax(0, 1fr); }
  .aglead { grid-template-columns: 34px minmax(0, 1fr) 168px 132px; }
  .agacts { grid-column: 1 / -1; justify-content: flex-start; }
  .aglist__head,
  .aglist__row { grid-template-columns: minmax(0, 1fr) 116px 88px 130px 150px; }
  .aglist__head span:nth-child(4),
  .aglist__row .agviews { display: none; }
}

@media (max-width: 767px) {
  .agstats { grid-template-columns: minmax(0, 1fr); }
  .agrail > * { flex: 0 0 86vw; }
  .aglead { grid-template-columns: 34px minmax(0, 1fr); row-gap: 12px; }
  .aglead__col { grid-column: 2; }
  .agacts { grid-column: 1 / -1; }
  .agacts > * { flex: 1; text-align: center; }
  .aglist__head { display: none; }
  .aglist__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .aglist__row .agneed { grid-row: 1; grid-column: 2; }
  .agevent { grid-template-columns: 70px minmax(0, 1fr); row-gap: 10px; }
  .agevent .agtag { grid-column: 2; justify-self: start; }
  .agowner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .agowner__act { grid-column: 1 / -1; text-align: left; }
  .agsend { width: 100%; }
  .agbars,
  .agwklabels { overflow-x: auto; }
  .agwk,
  .agwklabel { flex: 0 0 34px; }
  /* Anything under 44px is not a tap target. */
  .agsort { padding: 11px 15px; }
  .agstep { padding: 14px 0; }
}

@media (hover: none) {
  .agdow,
  .agwk,
  .agstep { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .agnav__link,
  .agstat,
  .aglead,
  .agavatar,
  .aglist__row,
  .agsort,
  .agsend,
  .agbtn,
  .agdow__bar,
  .agwk,
  .agwk__e,
  .agwk__v,
  .agstep__bar { transition: none; }
}

/* ==========================================================================
   85. Agent desk — My listings, prefix `ml`
   --------------------------------------------------------------------------
   A listing is not a row in a table. It is a **patient**, and this page is the
   diagnosis. The premise every section obeys:

       **Traffic without viewings is a price problem. Everything else is
       noise.**

   Agents are trained to blame the photography, the description, the season or
   the portal. The page refuses all four and keeps pointing at the same
   evidence — two thousand two hundred people looked at Rosa 62 and three came
   to see it — and then does the thing an agent actually needs: it lets them
   **rehearse the price conversation with real numbers** before having it with
   the owner.

   THREE THINGS THE DRAWING HAS TO CARRY
   -------------------------------------
   1. **The simulator is the centrepiece, not a widget.** It plots the
      district's registered buyer budgets in €25 000 bands and shows how many
      more buyers a cut reaches — and what it costs the agent in commission.
      Both sides of the argument on one panel.
   2. **A cut that reaches nobody must say so.** When the next band starts
      higher than the new price, the advice reads "…and reaches nobody new".
      That branch is the most valuable sentence on the page.
   3. **Nothing may claim more history than the file has.** A listing that has
      been on for 24 days shows four weekly bars, not ten. This shipped wrong
      once; both the chart and the sparkline trim to `ceil(days / 7)`.

   THE SHELL IS SECTION 84. The rail, the stat tiles, the section rules and the
   panels come from the agent desk's Overview; only what is new lives here.

   ONE HEIGHT SCALE FOR EVERY CHART
   --------------------------------
   The weekly chart, the sparklines, the demand histogram and the rail's age
   bars all plot a percentage of their own maximum, so they share `.mlh--N`
   rather than carrying four near-identical ladders. Widths — the portfolio
   mix and the picker bars — share `.mlw--N` the same way. Both are generated
   from the data by `build_dashboardlistings.py`, which refuses to write a
   class the stylesheet does not define.
   ========================================================================== */

/* -------------------------------------------------------- the rail panels --- */

.mlmix { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.mlmix__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.mlmix__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.mlmix__bar { display: flex; height: 8px; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.mlmix__seg { display: block; background: rgba(var(--ink-rgb), 0.24); }
.mlmix__seg--ink { background: rgba(var(--ink-rgb), 0.24); }
.mlmix__seg--positive { background: var(--good); }
.mlmix__seg--accent { background: var(--accent); }
.mlmix__seg--warn { background: var(--warn); }
.mlkey { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.mlkey__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.mlkey__label { display: flex; align-items: center; gap: 7px; }
.mlkey__swatch { flex: 0 0 10px; width: 10px; height: 6px; background: rgba(var(--ink-rgb), 0.24); }
.mlkey__swatch--positive { background: var(--good); }
.mlkey__swatch--accent { background: var(--accent); }
.mlkey__swatch--warn { background: var(--warn); }
.mlkey__n { color: rgba(var(--ink-rgb), 0.5); }
.mlkey__n--positive { color: var(--good); }
.mlkey__n--accent { color: var(--accent); }
.mlkey__n--warn { color: var(--warn); }

.mlages { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.mlages__bars { display: flex; align-items: flex-end; gap: 4px; height: 58px; margin: 14px 0 0; padding: 0; list-style: none; }
.mlages__bars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.mlage {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 5px;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.mlage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mlage__bar { display: block; width: 100%; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }

/* Past ninety days is a conversation, not a statistic. */
.mlage--late .mlage__bar { background: rgba(var(--warn-rgb), 0.7); }
.mlage.is-on .mlage__bar { background: var(--accent); }
.mlages__labels { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.mlages__label { flex: 1; min-width: 0; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.35); }
.mlages__label.is-on { color: var(--accent); }

/* ---------------------------------------------------------- §01 the triptych --- */

.mltrip {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr) 330px;
  gap: 1px;
  min-height: 500px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

.mlcolumn { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
/* Five of the six evidence columns ship hidden, and a `display: flex` of
   their own would keep them on screen. */
.mlcolumn[hidden] { display: none; }
.mlcolumn--evidence { padding: 24px 26px 26px; background: var(--panel); }
.mlcolumn--sim { padding: 24px 24px 26px; }

/* --- the picker --- */

.mlpicks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mlpicks > li { display: flex; min-width: 0; }

.mlpick {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mlpick:hover { background: rgba(var(--accent-rgb), 0.06); }
.mlpick:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mlpick.is-on { border-left-color: var(--accent); background: var(--panel-picked); }
.mlpick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mlpick__title { font-size: 13px; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.mlpick__health { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--good); }
.mlpick__health--accent { color: var(--accent); }
.mlpick__health--warn { color: var(--warn); }
.mlpick__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 0; }
.mlpick__days { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.mlpick__price { font-family: var(--serif); font-size: 15px; line-height: normal; color: rgba(var(--ink-rgb), 0.7); }
.mlpick.is-on .mlpick__price { color: var(--accent); }

/* Not the price: viewings against the weeks it has been on. A short bar next
   to a long time on the market is the whole argument of this page. */
.mlpick__track { display: block; height: 3px; margin-top: 9px; background: rgba(var(--ink-rgb), 0.12); }
.mlpick__fill { display: block; height: 3px; background: var(--good); }
.mlpick__fill--positive { background: var(--good); }
.mlpick__fill--accent { background: var(--accent); }
.mlpick__fill--warn { background: var(--warn); }
.mlpicks__foot { display: block; margin: 0; padding: 14px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* --- the evidence --- */

.mlfile { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0; }
.mlfile__title { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink); }
.mlfile__sheet { display: block; margin-top: 6px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }

.mlstatus {
  padding: 5px 11px;
  border: 1px solid rgba(var(--good-rgb), 0.5);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--good);
}

.mlstatus--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mlstatus--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

.mlfunnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.mlcell { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; background: var(--panel-callout); }
.mlcell__label { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.mlcell__row { display: flex; align-items: baseline; gap: 8px; }
.mlcell__value { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); }
.mlcell__value--accent { color: var(--accent); }
.mlcell__value--good { color: var(--good); }
.mlcell__value--muted { color: rgba(var(--ink-rgb), 0.35); }
.mlcell__rate { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.mlcell__rate--good { color: var(--good); }
.mlcell__rate--warn { color: var(--warn); }
.mlcell__rate--muted { color: rgba(var(--ink-rgb), 0.35); }

.mlchart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 22px 0 0; }
.mlchart__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.mltrend { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.mltrend--warn { color: var(--warn); }
.mlweeks { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 116px; margin: 12px 0 0; padding: 0; list-style: none; }
.mlweeks > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.mlweek {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mlweek.is-on { background: rgba(var(--accent-rgb), 0.08); }
.mlweek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mlweek__bar { display: block; width: 100%; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }

/* Only the last three weeks carry the trend: further back is history the
   agent cannot act on. */
.mlweek__bar--up { background: var(--accent); }
.mlweek__bar--down { background: rgba(var(--warn-rgb), 0.75); }
.mlweek.is-on .mlweek__bar { background: var(--accent-hover); }
.mlweek__best { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(var(--warn-rgb), 0.7); }
.mlwklabels { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.mlwklabel { flex: 1; min-width: 0; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.mlwklabel.is-on { color: var(--accent); }
.mlchart__note { display: block; margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }

.mldiag { display: block; margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--good-rgb), 0.5); border-left: 2px solid var(--good); background: var(--panel-callout); }
.mldiag--accent { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.mldiag--warn { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.mldiag__title { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--good); }
.mldiag--accent .mldiag__title { color: var(--accent); }
.mldiag--warn .mldiag__title { color: var(--warn); }
.mldiag__body { margin: 9px 0 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* --- the simulator --- */

.mlsim__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.mlsim__figure { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.mlsim__cut { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.mlsim__cut--on { color: var(--accent); }
.mlslider { width: 100%; margin: 16px 0 0; accent-color: var(--accent); cursor: pointer; }
.mlrange { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

.mldemand { display: block; margin-top: 22px; }
.mldemand__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.mlreach { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.mlreach--gain { color: var(--good); }
.mlbands { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin: 12px 0 0; padding: 0; list-style: none; }

/* Gold reaches the new price, grey does not. Twelve €25 000 bands of real
   registered budgets — the single most important number on the page. */
.mlband { flex: 1; min-width: 0; background: rgba(var(--ink-rgb), 0.16); transition: background 0.2s ease; }
.mlband--on { background: var(--accent); }
.mldemand__note { display: block; margin: 9px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

.mloutcomes { display: flex; flex-direction: column; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(var(--ink-rgb), 0.16); list-style: none; }
.mloutcome { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.mloutcome--last { border-bottom: none; }
.mloutcome__label { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.mloutcome__value { font-size: 13px; line-height: normal; text-align: right; color: var(--ink); }
.mloutcome__value--good { color: var(--good); }
.mloutcome__value--accent { color: var(--accent); }

/* The page never hides what its advice costs the agent. */
.mloutcome__value--warn { color: var(--warn); }
.mladvice { display: block; margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.mladvice--warn { color: var(--warn); }
.mlacts { display: flex; gap: 9px; margin: 14px 0 0; }

.mlcta {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.mlcta:hover,
.mlcta:focus-visible { background: var(--accent-hover); }

.mlcta--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mlcta--ghost:hover,
.mlcta--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ------------------------------------------------------------- §02 the table --- */

.mltabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.mltab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mltab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mltab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mltab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mltab__n { font-size: 12px; opacity: 0.6; }

.mltable { margin: 0; padding: 0; list-style: none; }
.mltable > li { display: block; }
.mltable > li[hidden] { display: none; }

.mltable__head,
.mlrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 78px 88px 120px 96px 148px;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.mltable__head {
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.mlrow {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mlrow--last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.mlrow:hover { background: rgba(var(--accent-rgb), 0.06); }
.mlrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mlrow.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.mlrow__title { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.mlrow__sheet { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.mlrow__price { font-family: var(--serif); font-size: 17px; line-height: normal; color: var(--ink); }
.mldays { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.mldays--accent { color: var(--accent); }
.mldays--warn { color: var(--warn); }
.mlviews { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.mlviewings { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.mlviewings--warn { color: var(--warn); }
.mlneed { text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.mlneed--accent { color: var(--accent); }
.mlneed--warn { color: var(--warn); }
.mlrow__end { text-align: right; }

/* Spans, not a list: the row is a `<button>` and a `<ul>` cannot live
   inside one. The bars carry no meaning a reader needs read out. */
.mlspark { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.mlspark__bar { flex: 1; min-width: 0; background: rgba(var(--ink-rgb), 0.22); }
.mlspark__bar--up { background: var(--accent); }
.mlspark__bar--down { background: var(--warn); }

.mlempty { display: flex; align-items: center; justify-content: center; min-height: 160px; margin: 0; padding: 24px; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.45); }
.mlempty[hidden] { display: none; }

/* ---------------------------------------------------------- §03 instructions --- */

.mlexp { margin: 0; padding: 0; list-style: none; }
.mlexp__row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 108px; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.mlexp__row--soon { border-left-color: var(--warn); }
.mlexp__row--done { border-left-color: var(--good); }
.mlexp__title { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.mlexp__owner { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.mlexp__days { display: block; font-family: var(--serif); font-size: 17px; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.mlexp__days--accent { color: var(--accent); }
.mlexp__days--warn { color: var(--warn); }
.mlexp__days--done { color: var(--good); }
.mlexp__unit { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.mlexp__act { text-align: right; }

.mlrenew {
  padding: 9px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mlrenew--soon { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mlrenew--done { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.mlrenew:hover,
.mlrenew:focus-visible { border-color: var(--accent); color: var(--accent); }
.mlrenew--soon:hover,
.mlrenew--soon:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.mlrenew--done:hover,
.mlrenew--done:focus-visible { border-color: var(--good); color: var(--good); }

/* ------------------------------------------------------------- §04 quality --- */

.mlqual { margin: 0; padding: 0; list-style: none; }
.mlqual__intro { display: block; margin: 0; padding: 18px 20px 4px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.mlqual__row { display: grid; grid-template-columns: 19px minmax(0, 1fr) 120px; gap: 13px; align-items: center; padding: 12px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }

.mlqual__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(var(--warn-rgb), 0.5);
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--warn);
}

.mlqual__row--on .mlqual__dot { border-color: var(--good); background: var(--good); color: var(--bg); }
.mlqual__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.mlqual__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }
.mlqual__state { text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.mlqual__state--on { color: var(--good); }

/* ------------------------------------------------------------ the scales --- */
/* One ladder for every chart on the page. Generated from the data; the build
   refuses to emit a class that is not defined here. */

.mlh--9 { height: 9%; }
.mlh--14 { height: 14%; }
.mlh--23 { height: 23%; }
.mlh--24 { height: 24%; }
.mlh--27 { height: 27%; }
.mlh--28 { height: 28%; }
.mlh--32 { height: 32%; }
.mlh--34 { height: 34%; }
.mlh--38 { height: 38%; }
.mlh--41 { height: 41%; }
.mlh--42 { height: 42%; }
.mlh--44 { height: 44%; }
.mlh--45 { height: 45%; }
.mlh--47 { height: 47%; }
.mlh--49 { height: 49%; }
.mlh--50 { height: 50%; }
.mlh--53 { height: 53%; }
.mlh--54 { height: 54%; }
.mlh--56 { height: 56%; }
.mlh--58 { height: 58%; }
.mlh--60 { height: 60%; }
.mlh--64 { height: 64%; }
.mlh--65 { height: 65%; }
.mlh--66 { height: 66%; }
.mlh--67 { height: 67%; }
.mlh--69 { height: 69%; }
.mlh--70 { height: 70%; }
.mlh--71 { height: 71%; }
.mlh--72 { height: 72%; }
.mlh--73 { height: 73%; }
.mlh--77 { height: 77%; }
.mlh--78 { height: 78%; }
.mlh--79 { height: 79%; }
.mlh--81 { height: 81%; }
.mlh--86 { height: 86%; }
.mlh--88 { height: 88%; }
.mlh--89 { height: 89%; }
.mlh--90 { height: 90%; }
.mlh--95 { height: 95%; }
.mlh--100 { height: 100%; }

.mlw--9 { width: 9%; }
.mlw--12 { width: 12%; }
.mlw--13 { width: 13%; }
.mlw--24 { width: 24%; }
.mlw--34 { width: 34%; }
.mlw--50 { width: 50%; }
.mlw--52 { width: 52%; }
.mlw--100 { width: 100%; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  /* The picker goes on top as a scroller; the evidence and the simulator sit
     side by side under it. */
  .mltrip { grid-template-columns: minmax(0, 1fr) 330px; }
  .mlcolumn:first-child { grid-column: 1 / -1; }
  .mlpicks { flex-direction: row; overflow-x: auto; }
  .mlpicks > li { flex: 0 0 260px; }
  .mlpick { border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .mlpick.is-on { border-left-color: transparent; border-top-color: var(--accent); }
  .mlpicks__foot { border-top: none; border-left: 1px solid rgba(var(--ink-rgb), 0.14); }
  .mltable__head,
  .mlrow { grid-template-columns: minmax(0, 1fr) 110px 70px 110px 88px 130px; }
  .mltable__head span:nth-child(4),
  .mlrow .mlviews { display: none; }
}

@media (max-width: 767px) {
  .mltrip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mlcolumn--evidence,
  .mlcolumn--sim { padding: 20px 18px 22px; }
  .mlfunnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlpicks > li { flex: 0 0 78vw; }
  /* The histogram keeps its twelve bands: it is the argument. */
  .mlbands { gap: 2px; }
  .mltable__head { display: none; }
  .mlrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .mlrow .mlneed { grid-row: 1; grid-column: 2; }
  .mlrow .mlspark { grid-column: 1 / -1; }
  .mlexp__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .mlexp__act { grid-column: 1 / -1; text-align: left; }
  .mlrenew { width: 100%; }
  .mlqual__row { grid-template-columns: 19px minmax(0, 1fr); row-gap: 6px; }
  .mlqual__state { grid-column: 2; text-align: left; }
  /* The outcome rows have to stay in view while the slider is dragged. */
  .mloutcomes { order: -1; margin-top: 0; }
  .mlacts { flex-direction: column; }
}

@media (hover: none) {
  .mlage,
  .mlweek,
  .mlpick,
  .mlrow { min-height: 44px; }
  .mlslider { height: 44px; }
  .mltab { padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mlage__bar,
  .mlweek,
  .mlweek__bar,
  .mlpick,
  .mlrow,
  .mltab,
  .mlband,
  .mlcta,
  .mlrenew { transition: none; }
}

/* ==========================================================================
   86. Agent desk — Add a property, prefix `ap`
   --------------------------------------------------------------------------
   Property intake forms are the most abandoned screens in any agency product.
   This one assumes the form is filled in **over days, not minutes** — with the
   owner on the phone, then again after the surveyor has been, then once more
   when the photographs come back. The `h1` states the promise:

       **A new file, measured before it is priced.**

   THREE THINGS THE DRAWING HAS TO CARRY
   -------------------------------------
   1. **It is not a wizard.** All five cells in the strip are buttons and no
      step gates another. An agent who has the photographs but not the deed
      does the photographs first.
   2. **Nothing is validated with a red asterisk.** Incompleteness is a file
      strength score in the rail with a plain consequence, and a running list
      whose items are links to the step that fixes them.
   3. **The measured field is gated on the survey, deliberately.** Until the
      survey is on file the input is disabled and the page publishes the deed
      figure with an explanation. That is the product's editorial position,
      rendered as a `disabled` attribute.

   NOT THE OWNER'S INTAKE WITH DIFFERENT LABELS
   --------------------------------------------
   Section 83 (`sl`) is the same five steps written for the person who owns
   the flat: it opens on what the sale will cost them and ends in what they
   keep. This one is written for the agent taking the instruction, so it opens
   on the address and the term, and ends in where the file gets published. The
   two share a shape and almost no copy, and they are deliberately separate
   sections — a change to one must not move the other.

   The active step's marker is on **top**, not the left: the strip reads as a
   row of tabs above its panel, and it is the only place on the site where the
   marker sits there.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* -------------------------------------------------------- the rail panels --- */

.apscore { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.apscore__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.apscore__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.apscore__of { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.aptag { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.aptag--nearly { color: var(--accent); }
.aptag--ready { color: var(--good); }
.apbar { display: block; height: 5px; margin-top: 13px; background: rgba(var(--ink-rgb), 0.12); }
.apbar__fill { display: block; height: 5px; background: var(--warn); }
.apbar__fill--nearly { background: var(--accent); }
.apbar__fill--ready { background: var(--good); }
.apsays { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.aptodo { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.aptodo__list { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }

.aptodo__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}

.aptodo__link:hover { color: var(--accent); }
.aptodo__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Square, not a circle: these are boxes to tick, and 15px painted is 13px of
   box inside a hairline. */
.aptodo__box { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid rgba(var(--warn-rgb), 0.5); background: transparent; }
.aptodo__link--done { color: rgba(var(--ink-rgb), 0.45); }
.aptodo__link--done .aptodo__box { border-color: var(--good); background: var(--good); }
.aptodo__foot { display: block; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

/* ---------------------------------------------------------- the step strip --- */

.apsteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.apstep {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 17px 18px 19px;
  border: none;
  border-top: 2px solid transparent;
  background: var(--panel-tile);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.apstep[aria-selected="true"] { border-top-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.apstep:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.apstep__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apstep__num { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.apstep[aria-selected="true"] .apstep__num { color: var(--accent); }

.aptick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--bg);
}

.aptick--done { border-color: var(--good); background: var(--good); }
.aptick__glyph { visibility: hidden; }
.aptick--done .aptick__glyph { visibility: visible; }
.apstep__label { font-size: 13px; line-height: normal; color: var(--ink); }
.apstep[aria-selected="true"] .apstep__label { color: var(--accent); }
.apstep__note { font-size: 12px; font-weight: 300; line-height: 1.45; color: rgba(var(--ink-rgb), 0.42); }

/* ------------------------------------------------------------ the two columns --- */

.apmain { display: grid; grid-template-columns: minmax(0, 1fr) 342px; gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: start; }
.apleft { min-width: 0; }
.apsaved { font-size: 12px; font-weight: 300; line-height: normal; letter-spacing: normal; text-transform: none; color: rgba(var(--ink-rgb), 0.42); }
.apform { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); padding: 26px 28px 24px; }
.apstepbox[hidden] { display: none; }

/* ------------------------------------------------------------- the fields --- */

.apgrid { display: grid; gap: 18px 20px; }

/* Floor and Postcode are sized by what goes in them; Street takes the rest. */
.apgrid--address { grid-template-columns: minmax(0, 2fr) minmax(172px, 1fr) minmax(172px, 1fr); }
.apgrid--rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apgrid--owner { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.apfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.apfield__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.apfield--live .apfield__label { color: var(--accent); }

.apinput {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}

.apinput::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.apinput:focus { border-color: var(--accent); }
.apfield--live .apinput { border-color: rgba(var(--accent-rgb), 0.55); }

/* The deed figure comes from the registry entry. If it is wrong the fix is a
   corrected registry entry, not a typed number. */
.apinput[readonly] { color: rgba(var(--ink-rgb), 0.66); cursor: default; }
.apinput:disabled { color: rgba(var(--ink-rgb), 0.35); cursor: not-allowed; }
.aphint { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.38); }

.apblock { margin: 22px 0 0; min-width: 0; padding: 0; border: none; }
.apblock--rule { padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.apblock__label { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.apopts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; }

.apopt {
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.apopt:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.apopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apopt.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.apcount { margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* A count and a term are one choice out of a short list, not a set: one
   segmented control, and the chosen segment is filled rather than outlined. */
.apseg { display: flex; min-width: 0; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.apseg__btn {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: none;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.apseg__btn--term { letter-spacing: 0.14em; text-transform: uppercase; }
.apseg__btn:last-child { border-right: none; }
.apseg__btn:hover { color: var(--accent); }
.apseg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.apseg__btn.is-on { background: var(--accent); color: var(--on-accent); }

/* -------------------------------------------------------------- the gap --- */
/* Four states, and the fourth is the one developers drop: a home larger than
   its deed is usually an unconsented enclosure, which the notary will find. */

.apgap,
.apgap--warn { display: block; margin-top: 20px; padding: 16px 18px; border: 1px solid rgba(var(--warn-rgb), 0.5); border-left: 2px solid var(--warn); background: var(--panel-callout); }
.apgap--exact { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.apgap--smaller { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.apgap__row { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.apgap__figure { font-family: var(--serif); font-size: 26px; line-height: 1; white-space: nowrap; color: var(--warn); }
.apgap--exact .apgap__figure { color: var(--good); }
.apgap--smaller .apgap__figure { color: var(--accent); }
.apgap__text { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.72); }

/* ----------------------------------------------------------- §03 the papers --- */

.apintro { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }
.appapers { display: flex; flex-direction: column; margin: 18px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.16); list-style: none; }

.appaper {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 128px 118px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--warn-rgb), 0.05);
}

.appaper--on { background: transparent; }
.appaper--last { border-bottom: none; }

.appaper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(var(--warn-rgb), 0.5);
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--warn);
}

.appaper--on .appaper__dot { border-color: var(--good); background: var(--good); color: var(--bg); }
.appaper__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.appaper__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.42); }
.appaper__req { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.appaper__req--required { color: var(--warn); }
.appaper__req--advised { color: var(--accent); }
.appaper__act { text-align: right; }

/* Gold while it is missing — it is the thing to do next; quiet green once it
   is on file, because a finished row should stop asking for attention. */
.apupload {
  padding: 8px 13px;
  border: 1px solid var(--accent);
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.apupload:hover,
.apupload:focus-visible { border-color: var(--accent-hover); background: var(--accent-hover); }
.apupload[aria-pressed="true"] { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.apupload[aria-pressed="true"]:hover,
.apupload[aria-pressed="true"]:focus-visible { border-color: var(--good); background: transparent; color: var(--good); }

.apend { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; }
.apend--rule { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.apend__text { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--good); }
.apend__text--warn { color: var(--warn); }

.apask {
  padding: 11px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.apask:hover,
.apask:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------------------- §04 the frames --- */

.apframes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

.apframe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 108px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--scrim-rgb), 0.5);
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.apframe--must { border-color: rgba(var(--warn-rgb), 0.5); }
.apframe:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.apframe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apframe[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.apframe__num { font-family: var(--serif); font-size: 19px; line-height: 1; color: rgba(var(--ink-rgb), 0.28); }
.apframe[aria-pressed="true"] .apframe__num { color: var(--accent); }
.apframe__label { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.apframe[aria-pressed="true"] .apframe__label { color: var(--accent); }

.apframe__tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 7px;
  background: rgba(var(--warn-rgb), 0.9);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
}

.apframe[aria-pressed="true"] .apframe__tag { background: rgba(var(--good-rgb), 0.9); }


/* ------------------------------------------------------------ §05 the price --- */

.approw { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; }
.approw__figure { font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }
.approw__per { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.approw__per--over { color: var(--warn); }
.approw__per--under { color: var(--good); }
.apslider { width: 100%; margin: 18px 0 0; accent-color: var(--accent); cursor: pointer; }
.aprange { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

.apevidence { margin-top: 24px; }
.apevidence--rule { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.apevidence__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.apevidence__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.apreach { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.apreach--good { color: var(--good); }
.apreach--mid { color: var(--accent); }
.apreach--low { color: var(--warn); }

.apbands { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin: 12px 0 0; padding: 0; list-style: none; }
.apband { flex: 1; min-width: 0; background: rgba(var(--ink-rgb), 0.16); transition: background 0.2s ease; }
.apband--on { background: var(--accent); }

.apcomps { margin: 12px 0 0; padding: 0; list-style: none; }
.apcomp { display: grid; grid-template-columns: minmax(0, 1fr) 100px 116px 112px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.apcomp--last { border-bottom: none; }
.apcomp__title { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.apcomp__area { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.apcomp__price { font-family: var(--serif); font-size: 16px; line-height: normal; color: var(--ink); }

/* Green when the neighbour got more per square metre than this file asks: the
   colour answers `is this price defensible`, not `is this number big`. */
.apcomp__per { text-align: right; font-size: 12px; line-height: normal; color: var(--good); }
.apcomp__per--under { color: var(--warn); }

.apverdict { margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--ink-rgb), 0.16); border-left: 2px solid rgba(var(--ink-rgb), 0.4); background: var(--panel-callout); }
.apverdict--over { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.apverdict--under { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.apverdict--band { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }

.apverdict__title {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.apverdict--over .apverdict__title { color: var(--warn); }
.apverdict--under .apverdict__title { color: var(--good); }
.apverdict--band .apverdict__title { color: var(--accent); }
.apverdict__body { margin: 9px 0 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* -------------------------------------------------------------- the footer --- */

.apnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.apnav__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.apnav__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.42); }

.apghost {
  padding: 12px 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.apghost--back { color: var(--ink); }
.apghost:hover,
.apghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.apnext {
  padding: 13px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.apnext:hover,
.apnext:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Not disabled — it names the blocker and stays clickable, because an agent
   who presses it deserves to be told, not ignored. */
.apnext--blocked { border-color: rgba(var(--warn-rgb), 0.5); background: transparent; color: var(--warn); }
.apnext--blocked:hover,
.apnext--blocked:focus-visible { border-color: var(--warn); background: transparent; color: var(--warn); }

/* ------------------------------------------------- the preview and channels --- */

.apside { display: flex; flex-direction: column; gap: clamp(20px, 2.4vh, 26px); min-width: 0; }

.aprule,
.aprule--flat {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

/* The rail panels head their own content, so no rule under the label. */
.aprule--flat { align-items: baseline; justify-content: space-between; padding-bottom: 0; border-bottom: none; }
.aphead__stub { flex: 1 1 24px; height: 1px; background: rgba(var(--ink-rgb), 0.14); }
.aphead__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.aphead__tag { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }

/* No top border on either panel — the rule above it is the top edge. */
.apcard { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.apcard__media { position: relative; display: block; aspect-ratio: 3 / 2;
  height: auto; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }

.aphatch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.05) 0, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px, transparent 9px);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.3);
}

.aphatch[hidden] { display: none; }

.apbadge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 11px;
  background: rgba(var(--scrim-rgb), 0.85);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.72);
}

.apbadge--ready { background: rgba(var(--good-rgb), 0.9); color: var(--bg); }
.apcard__body { display: block; padding: 17px 18px 19px; }
.apcard__title { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }
.apcard__meta { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.apcard__figure { display: flex; align-items: baseline; gap: 9px; margin: 14px 0 0; }
.apcard__price { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }
.apcard__per { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.aptags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 13px 0 0; padding: 0; list-style: none; }

.aptagchip {
  padding: 4px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.apcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.apcard__note { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.apcard__note--warn { color: var(--warn); }
.apcard__sheet { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: rgba(var(--ink-rgb), 0.4); }

.apchannels { border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: var(--panel); }
.apchans { margin: 0; padding: 0; list-style: none; }
.apchan { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.apchan--last { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
.apchan__label { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.apchan__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.42); }

.apswitch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 40px;
  height: 21px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, justify-content 0.2s ease;
}

.apswitch[aria-pressed="true"] { justify-content: flex-end; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); }
.apswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apswitch__knob { width: 15px; height: 15px; margin: 0 2px; background: rgba(var(--ink-rgb), 0.3); transition: background 0.2s ease; }
.apswitch[aria-pressed="true"] .apswitch__knob { background: var(--accent); }

/* The register is not a choice. A switch the agent cannot move would invite
   them to try, so it is a word instead. */
.apswitch--locked { justify-content: flex-end; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); cursor: default; }
.apswitch--locked .apswitch__knob { background: rgba(var(--accent-rgb), 0.5); }
.apchannels__foot { display: block; margin: 0; padding: 14px 18px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* The twelve demand bands, generated from the data by the builder. */
.apband--h9 { height: 9%; }
.apband--h13 { height: 13%; }
.apband--h17 { height: 17%; }
.apband--h22 { height: 22%; }
.apband--h30 { height: 30%; }
.apband--h35 { height: 35%; }
.apband--h48 { height: 48%; }
.apband--h52 { height: 52%; }
.apband--h65 { height: 65%; }
.apband--h78 { height: 78%; }
.apband--h87 { height: 87%; }
.apband--h100 { height: 100%; }

/* The opening score, so the bar is right before the script runs. Every value
   after that is live and the script sets the width directly — a hundred
   utility classes would be a worse answer than one runtime style. */
.apbar__fill--55 { width: 55%; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  .apmain { grid-template-columns: minmax(0, 1fr); }
  .apsteps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .apsteps > li { flex: 0 0 40vw; scroll-snap-align: start; }
  .apstep__note { display: none; }
  .apgrid--address,
  .apgrid--rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apframes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .apsteps > li { flex: 0 0 62vw; }
  .apgrid--address,
  .apgrid--rooms,
  .apgrid--owner { grid-template-columns: minmax(0, 1fr); }
  /* Anything under 16px zooms iOS on focus and moves the layout. */
  .apinput { font-size: 16px; }
  .appaper { grid-template-columns: 19px minmax(0, 1fr); }
  .appaper__req { grid-column: 2; }
  .appaper__act { grid-column: 1 / -1; text-align: left; }
  .apupload { width: 100%; }
  .apframes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apframe { height: 132px; }
  .apgap__row { flex-direction: column; gap: 10px; }
  .apcomp { grid-template-columns: minmax(0, 1fr) auto; }
  .apcomp__area,
  .apcomp__per { grid-column: 1; text-align: left; }
  .apform { padding: 20px 18px 20px; }
  .apnav { flex-direction: column; align-items: stretch; }
  .apnav__side { flex-direction: column; align-items: stretch; }
  .apnext,
  .apghost,
  .apask { width: 100%; }
}

@media (hover: none) {
  .apopt,
  .apupload,
  .apghost,
  .apnext,
  .apstep,
  .apseg__btn,
  .aptodo__link,
  .apswitch { min-height: 44px; }
  .apopt { display: inline-flex; align-items: center; padding: 11px 15px; }
  .apslider { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .apstep,
  .apopt,
  .apframe,
  .apupload,
  .apghost,
  .apnext,
  .apinput,
  .apseg__btn,
  .apband,
  .apswitch,
  .apswitch__knob,
  .aptodo__link { transition: none; }
}

/* ==========================================================================
   87. Agent desk — Viewings, prefix `vw`
   --------------------------------------------------------------------------
   Not a calendar. Calendars show boxes on a grid, and the agent already has
   one on their phone. This page answers the four questions a calendar cannot:

       **Can I physically make this day? What do I take with me? Who is still
       waiting for a time? What do I owe the owners afterwards?**

   The premise every section obeys:

       A viewing is a round trip, not an appointment. The gap between two of
       them is as much a part of the day as the viewings themselves.

   THREE THINGS THE DRAWING HAS TO CARRY
   -------------------------------------
   1. **Travel time is first-class data.** The day is an alternating list of
      *stops* and *legs*, and a leg whose travel exceeds its gap turns `--warn`
      and says so in words. That row is the reason the page exists, so it gets
      its own tinted state rather than an icon.
   2. **Preparation is per-viewing and specific** — the survey that landed this
      morning, both keys because the lower lock sticks, the owner's floor price
      with a warning not to say it first.
   3. **The page closes the loop.** §02 and §03 are the two things agents
      actually forget: answering a request, and telling the owner what
      happened.

   THE LEGS ARE DERIVED, NEVER AUTHORED
   ------------------------------------
   Every leg's text, colour and tint come from `free < need` over the two
   stops around it. Move a viewing by fifteen minutes in the data and the
   warning appears or disappears on its own — which is the only reason an
   agent would trust it.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* -------------------------------------------------------- the rail panels --- */

.vwclock { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.vwclock--tight { border-color: rgba(var(--warn-rgb), 0.5); background: rgba(var(--warn-rgb), 0.08); }
.vwhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.vwlabel { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.vwtag { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); }
.vwtag--tight { color: var(--warn); }
.vwclock__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.vwclock__span { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.vwclock__rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.vwclock__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.vwclock__value { color: rgba(var(--ink-rgb), 0.72); }
.vwclock__value--warn { color: var(--warn); }
.vwclock__value--ink { color: var(--ink); }
.vwnote { display: block; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.vwowed { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.vwowed__list { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }

.vwowed__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}

.vwowed__link:hover { color: var(--accent); }
.vwowed__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwowed__box { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid rgba(var(--warn-rgb), 0.5); background: transparent; }
.vwowed__link--done { color: rgba(var(--ink-rgb), 0.45); }
.vwowed__link--done .vwowed__box { border-color: var(--good); background: var(--good); }
.vwowed__foot { display: block; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

/* ---------------------------------------------------------- the week strip --- */

.vwweek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.vwweek > li { display: flex; min-width: 0; }

.vwday {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 13px 14px 15px;
  border: none;
  border-top: 2px solid transparent;
  background: var(--panel-tile);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vwday.is-on { border-top-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.vwday:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vwday__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vwday__dow { font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.vwday.is-on .vwday__dow { color: var(--accent); }
.vwday__num { font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--ink); }
.vwday__num--free { color: rgba(var(--ink-rgb), 0.35); }
.vwday.is-on .vwday__num { color: var(--accent); }
/* Spans, not a list: the cell is a `<button>` and a `<ul>` cannot live
   inside one. The pips carry nothing a reader needs read out. */
.vwday__pips { display: flex; align-items: center; gap: 3px; min-height: 7px; }
.vwday__pip { flex: 1; height: 4px; background: rgba(var(--ink-rgb), 0.28); }
.vwday.is-on .vwday__pip { background: var(--accent); }

/* A day that cannot be made says so before it is opened. */
.vwday__pip--tight { background: var(--warn); }
.vwday.is-on .vwday__pip--tight { background: var(--warn); }
.vwday__count { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.38); }
.vwday.is-on .vwday__count { color: rgba(var(--ink-rgb), 0.6); }

/* ------------------------------------------------------------- §01 the round --- */

.vwround {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 1px;
  min-height: 520px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

.vwcol { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
/* Six of the seven rounds and all but one `who` column ship hidden; a
   `display: flex` of their own would keep them on screen. */
.vwcol[hidden] { display: none; }
.vwobjs[hidden] { display: none; }
.vwcol--who { padding: 24px 24px 26px; background: var(--panel-tile); }
.vwstops { margin: 0; padding: 0; list-style: none; }

.vwstop {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 128px;
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-top: 1px solid rgba(var(--ink-rgb), 0.09);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vwstop:hover { background: rgba(var(--accent-rgb), 0.04); }
.vwstop:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vwstop.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.vwstop__time { display: block; font-family: var(--serif); font-size: 19px; line-height: 1; color: var(--ink); }
.vwstop.is-on .vwstop__time { color: var(--accent); }
.vwstop__len { display: block; margin-top: 5px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.vwstop__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vwstop__title { font-size: 13px; line-height: normal; color: var(--ink); }
.vwstop__who { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }
.vwstop__end { text-align: right; }
.vwstop__state { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); }
.vwstop__state--accent { color: var(--accent); }
.vwstop__state--warn { color: var(--warn); }
.vwstop__district { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.38); }

.vwpill {
  padding: 3px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
}

.vwpill--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.vwpill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vwpill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

/* The leg between two stops. Two states only, and the second is the page. */
.vwleg { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: center; padding: 9px 20px; }
.vwleg--tight { background: rgba(var(--warn-rgb), 0.08); }
.vwleg__rule { display: flex; justify-content: center; }
.vwleg__line { width: 1px; height: 24px; background: rgba(var(--ink-rgb), 0.18); }
.vwleg--tight .vwleg__line { background: rgba(var(--warn-rgb), 0.7); }
.vwleg__body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.vwleg__travel { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.vwleg--tight .vwleg__travel { color: var(--warn); }
.vwleg__text { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

.vwempty { display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 0; padding: 24px; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.45); }
.vwempty[hidden] { display: none; }
.vwround__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 14px 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* ------------------------------------------------------ the selected viewing --- */

.vwwho { display: flex; align-items: center; gap: 13px; margin: 16px 0 0; }

.vwmono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.6);
}

.vwmono--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.vwmono--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vwmono--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.vwwho__name { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.05; color: var(--ink); }
.vwwho__ready { display: block; margin-top: 5px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.vwwho__ready--positive { color: var(--good); }
.vwwho__ready--accent { color: var(--accent); }
.vwwho__ready--warn { color: var(--warn); }

.vwfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.vwfact { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; background: var(--panel-callout); }
.vwfact__label { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.vwfact__value { font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--ink); }
.vwfact__value--accent { color: var(--accent); }
.vwfact__value--good { color: var(--good); }
.vwfact__value--warn { color: var(--warn); }

/* What they said when they booked, in their words. */
.vwsaid { display: block; margin: 18px 0 0; padding: 14px 16px; border: 1px solid rgba(var(--ink-rgb), 0.16); border-left: 2px solid var(--accent); background: var(--panel-callout); }
.vwsaid__label { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.vwsaid__body { margin: 8px 0 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

.vwbag { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.vwbag__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.vwbag__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.vwbag__count { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.vwbag__count--done { color: var(--good); }
.vwbag__list { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }

.vwprep {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.vwprep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vwprep__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--bg);
}

.vwprep__glyph { visibility: hidden; }
.vwprep[aria-pressed="true"] .vwprep__box { border-color: var(--good); background: var(--good); }
.vwprep[aria-pressed="true"] .vwprep__glyph { visibility: visible; }
.vwprep__label { display: block; font-size: 12px; line-height: normal; color: var(--ink); }
.vwprep[aria-pressed="true"] .vwprep__label { color: rgba(var(--ink-rgb), 0.45); }

/* The reason, not just the item: `both keys, the lower one sticks`. */
.vwprep__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: 1.45; color: rgba(var(--ink-rgb), 0.4); }

.vwacts { display: flex; gap: 9px; margin: 18px 0 0; }

.vwbtn {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-accent);
  transition: background 0.2s ease;
}

.vwbtn:hover,
.vwbtn:focus-visible { background: var(--accent-hover); }

.vwbtn--ghost {
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.vwbtn--ghost:hover,
.vwbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* --------------------------------------------------------- §02 the requests --- */

.vwreqs { margin: 0; padding: 0; list-style: none; }
.vwreq { display: block; padding: 16px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.vwreq--late { border-left-color: var(--warn); }
.vwreq--done { border-left-color: var(--good); }
.vwreq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.vwreq__who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vwreq__name { font-size: 13px; line-height: normal; color: var(--ink); }
.vwready { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.vwready--positive { color: var(--good); }
.vwready--accent { color: var(--accent); }
.vwready--warn { color: var(--warn); }
.vwreq__age { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.vwreq__age--late { color: var(--warn); }
.vwreq__age--done { color: var(--good); }
.vwreq__file { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

/* Not a calendar picker: the buyer has already said when they can come. */
.vwslots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }

.vwslot {
  padding: 8px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.72);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vwslot:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vwslot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwslot.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

.vwreq__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.vwreq__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }
.vwreq__note--late { color: var(--warn); }
.vwreq__note--done { color: var(--good); }

.vwconfirm {
  padding: 9px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.4);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vwconfirm--ready { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vwconfirm--done { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.vwconfirm--ready:hover,
.vwconfirm--ready:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); }
.vwconfirm--done:hover,
.vwconfirm--done:focus-visible { border-color: var(--good); color: var(--good); }

/* --------------------------------------------------------- §03 the feedback --- */

.vwfbs { margin: 0; padding: 0; list-style: none; }
.vwfb { display: block; padding: 16px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.vwfb--late { border-left-color: var(--warn); }
.vwfb--done { border-left-color: var(--good); }
.vwfb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.vwfb__title { font-size: 13px; line-height: normal; color: var(--ink); }
.vwfb__when { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.vwfb__who { display: block; margin: 4px 0 0; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }

/* Five words, not five stars: an owner can act on `lukewarm`. */
.vwscale { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }

.vwdot {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.4);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vwdot:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vwdot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwdot.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vwverdict { margin-left: 6px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.vwverdict--warn { color: var(--warn); }
.vwverdict--accent { color: var(--accent); }
.vwverdict--good { color: var(--good); }
.vwfb__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.vwfb__owner { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

/* -------------------------------------------------------- §04 the objections --- */

.vwobj {
  display: grid;
  grid-template-columns: 1.35fr minmax(0, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

.vwobj__left { display: block; padding: 24px 26px 26px; background: var(--panel); }
.vwobj__right { display: flex; flex-direction: column; padding: 24px 24px 26px; background: var(--panel-tile); }
.vwobjs { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }

.vwobjrow {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 5px 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vwobjrow.is-on { background: rgba(var(--accent-rgb), 0.06); }
.vwobjrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwobjrow__label { font-size: 12px; line-height: normal; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.6); }
.vwobjrow.is-on .vwobjrow__label { color: var(--accent); }
.vwobjrow__track { display: block; height: 9px; background: rgba(var(--ink-rgb), 0.1); }
.vwobjrow__bar { display: block; height: 9px; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }
.vwobjrow__bar--warn { background: rgba(var(--warn-rgb), 0.75); }
.vwobjrow__bar--w11 { width: 11%; }
.vwobjrow__bar--w22 { width: 22%; }
.vwobjrow__bar--w24 { width: 24%; }
.vwobjrow__bar--w32 { width: 32%; }
.vwobjrow__bar--w33 { width: 33%; }
.vwobjrow__bar--w41 { width: 41%; }
.vwobjrow__bar--w44 { width: 44%; }
.vwobjrow__bar--w50 { width: 50%; }
.vwobjrow__bar--w62 { width: 62%; }
.vwobjrow__bar--w67 { width: 67%; }
.vwobjrow__bar--w100 { width: 100%; }
.vwobjrow.is-on .vwobjrow__bar { background: var(--accent-hover); }
.vwobjrow__n { text-align: right; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.vwobjrow.is-on .vwobjrow__n { color: var(--accent); }
.vwobj__body { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.72); }
.vwper { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.vwper__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.vwper__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.vwper__value { font-family: var(--serif); font-size: 26px; line-height: normal; color: var(--accent); }
.vwper__note { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

.vwtabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.vwtab {
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.vwtab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.vwtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwtab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  /* The round comes first and full width; who is coming moves under it. */
  .vwround { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vwobj { grid-template-columns: minmax(0, 1fr); }
  .vwobjrow { grid-template-columns: 140px minmax(0, 1fr) 40px; }
}

@media (max-width: 767px) {
  .vwweek { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .vwweek > li { flex: 0 0 32vw; scroll-snap-align: start; }
  .vwstop { grid-template-columns: 74px minmax(0, 1fr); row-gap: 10px; }
  .vwstop__end { grid-column: 2; text-align: left; }
  /* The leg keeps its whole sentence: truncating the one that says you will
     be late defeats the page. */
  .vwleg { grid-template-columns: 40px minmax(0, 1fr); }
  .vwfacts { grid-template-columns: minmax(0, 1fr); }
  .vwslots > li { flex: 1 1 100%; }
  .vwslot { width: 100%; }
  .vwscale { flex-wrap: wrap; }
  .vwobjrow { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 8px; }
  .vwobjrow__track { grid-column: 1 / -1; }
  .vwacts { flex-direction: column; }
  .vwcol--who { padding: 20px 18px 22px; }
  .vwobj__left,
  .vwobj__right { padding: 20px 18px 22px; }
}

@media (hover: none) {
  .vwday,
  .vwstop,
  .vwprep,
  .vwslot,
  .vwdot,
  .vwconfirm,
  .vwtab,
  .vwobjrow,
  .vwowed__link { min-height: 44px; }
  .vwslot,
  .vwtab { padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .vwday,
  .vwstop,
  .vwslot,
  .vwdot,
  .vwconfirm,
  .vwtab,
  .vwobjrow,
  .vwobjrow__bar,
  .vwbtn,
  .vwowed__link { transition: none; }
}

/* ==========================================================================
   88. Agent desk — Offers, prefix `of`
   --------------------------------------------------------------------------
   An offer is not a number. It is **a promise with conditions attached**, and
   this page prices the conditions. The premise every section obeys:

       **The highest offer is not the best offer, and the page must be able to
       prove it.**

   The proof is §02: two offers on the same flat, side by side. €758 000 with
   an unapproved mortgage against €742 000 in verified cash. The higher number
   scores 59 of 100; the lower scores 90. Every row of that table is derived,
   so an agent cannot dismiss it as an opinion — and so that they can repeat
   the argument to an owner without having to remember it.

   THREE THINGS THE DRAWING HAS TO CARRY
   -------------------------------------
   1. **Strength is a scored model, not a badge.** Five factors, each with its
      evidence and its `score/max`: financing 25, no chain 25, deposit 20,
      conditions 20, speed 10. The panel shows the working.
   2. **The negotiation is a shape.** The ladder plots every round against the
      asking line, so an agent can see whether a buyer moves in twenty-six
      thousand jumps or one thousand.
   3. **The page counts what kills deals.** §04 is not a chart for management;
      it is why §02's verdict says what it says.

   THE LADDER'S FLOOR IS NOT ZERO
   ------------------------------
   `lo = min × 0.985`. A €715 000 opening against a €770 000 asking is a 7%
   difference; drawn from zero, four bars would look identical. The 1.5%
   headroom keeps the smallest bar visible and the proportions honest.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* -------------------------------------------------------- the rail panels --- */

.oftable { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.ofhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.oflabel { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.ofwindow { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.oftable__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.oftable__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
/* The commission sits under a rule of its own — gold, because it is the
   only figure on the panel that is the agent's rather than the owner's. */
.offee { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid rgba(var(--accent-rgb), 0.28); font-size: 12px; line-height: normal; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.offee__value { font-family: var(--serif); font-size: 19px; letter-spacing: normal; text-transform: none; color: var(--accent); }
.ofnote { display: block; margin: 11px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

.ofclock { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.ofclock__list { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }

.ofclock__link {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ofclock__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofclock__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ofclock__file { font-size: 12px; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.6); }
.ofclock__file--soon { color: var(--ink); }
.ofclock__due { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--good); }
.ofclock__due--warn { color: var(--warn); }
.ofclock__due--accent { color: var(--accent); }
.ofclock__track { display: block; height: 3px; margin-top: 6px; background: rgba(var(--ink-rgb), 0.12); }
.ofclock__fill { display: block; height: 3px; background: var(--good); }
.ofclock__fill--warn { background: var(--warn); }
.ofclock__fill--accent { background: var(--accent); }
.ofclock__foot { display: block; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

/* ------------------------------------------------------------- §01 the table --- */

.oftrip {
  display: grid;
  grid-template-columns: minmax(220px, 268px) minmax(300px, 1fr) minmax(260px, 324px);
  gap: 1px;
  min-height: 540px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

.ofcol { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
.ofcol[hidden] { display: none; }
.ofcol--ladder { padding: 24px 26px 26px; background: var(--panel); }
.ofcol--strength { padding: 24px 24px 26px; }

/* --- the picker: the bar is strength, not the amount --- */

.ofpicks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ofpicks > li { display: flex; min-width: 0; }

.ofpick {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ofpick:hover { background: rgba(var(--accent-rgb), 0.06); }
.ofpick:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ofpick.is-on { border-left-color: var(--accent); background: var(--panel-picked); }
.ofpick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ofpick__file { font-size: 13px; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ofstage { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--accent); }
.ofstage--positive { color: var(--good); }
.ofstage--warn { color: var(--warn); }
.ofpick__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 0; }
.ofpick__buyer { font-size: 12px; font-weight: 300; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.5); }
.ofpick__amount { font-family: var(--serif); font-size: 16px; line-height: normal; color: rgba(var(--ink-rgb), 0.7); }
.ofpick.is-on .ofpick__amount { color: var(--accent); }
.ofpick__bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.oftrack { flex: 1; display: block; height: 3px; background: rgba(var(--ink-rgb), 0.12); }
.offill { display: block; height: 3px; background: var(--warn); }
.offill--fair { background: var(--accent); }
.offill--solid { background: var(--good); }
.ofgrade { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--warn); }
.ofgrade--fair { color: var(--accent); }
.ofgrade--solid { color: var(--good); }
.ofpicks__foot { display: block; margin: 0; padding: 14px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.42); }

/* --- the ladder --- */

.offile { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0; }
.offile__title { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink); }
.offile__sheet { display: block; margin-top: 6px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }

.ofpill {
  padding: 5px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

.ofpill--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.ofpill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

.ofladder__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 24px 0 0; }
.ofladder__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.ofgap { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ofgap--good { color: var(--good); }
.ofgap--warn { color: var(--warn); }

.ofplot { position: relative; display: block; margin-top: 16px; padding-bottom: 4px; }

/* The asking line runs the width of the chart. Every bar is read against it,
   which is the only way an opening number means anything. */
.ofplot__asking { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(var(--accent-rgb), 0.35); }
.ofplot__askinglabel { position: absolute; left: 0; top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.6); }
.ofrounds { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin: 26px 0 0; padding: 0; list-style: none; }
.ofrounds > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.ofround {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ofround.is-on { background: rgba(var(--accent-rgb), 0.06); }
.ofround:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofround__amount { display: block; margin-bottom: 7px; font-family: var(--serif); font-size: 14px; line-height: normal; text-align: center; white-space: nowrap; color: rgba(var(--ink-rgb), 0.6); }
.ofround.is-on .ofround__amount { color: var(--accent); }

/* Buyer rounds gold, the agent's counters grey, the agreed round green. */
.ofround__bar { display: block; width: 100%; border-top: 2px solid rgba(var(--ink-rgb), 0.45); background: rgba(var(--ink-rgb), 0.05); transition: background 0.2s ease; }
.ofround__bar--you { border-top-color: var(--accent); }
.ofround__bar--agreed { border-top-color: var(--good); }
.ofround.is-on .ofround__bar { background: rgba(var(--accent-rgb), 0.12); }
.ofwhos { display: flex; align-items: center; gap: 10px; margin: 9px 0 0; padding: 0; list-style: none; }
.ofwho { flex: 1; min-width: 0; text-align: center; }
.ofwho__label { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.ofwho__label--you { color: var(--accent); }
.ofwho__label--agreed { color: var(--good); }
.ofwho__when { display: block; margin-top: 3px; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.35); }
.ofroundnote { display: block; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.55); }

.ofverdict { display: block; margin: 20px 0 0; padding: 16px 18px; border: 1px solid rgba(var(--accent-rgb), 0.55); border-left: 2px solid var(--accent); background: var(--panel-callout); }
.ofverdict--solid { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.ofverdict--fragile { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.ofverdict__title { display: block; margin: 0; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.ofverdict--solid .ofverdict__title { color: var(--good); }
.ofverdict--fragile .ofverdict__title { color: var(--warn); }
.ofverdict__body { margin: 9px 0 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* --- the strength panel: the working, not the badge --- */

.ofscore { display: flex; align-items: baseline; gap: 10px; margin: 13px 0 0; }
.ofscore__value { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--warn); }
.ofscore__value--fair { color: var(--accent); }
.ofscore__value--solid { color: var(--good); }
.ofscore__of { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.ofbar { display: block; height: 5px; margin-top: 12px; background: rgba(var(--ink-rgb), 0.12); }
.ofbar__fill { display: block; height: 5px; background: var(--warn); }
.ofbar__fill--fair { background: var(--accent); }
.ofbar__fill--solid { background: var(--good); }

.offactors { display: flex; flex-direction: column; margin: 20px 0 0; padding: 0; list-style: none; }
.offactor { display: grid; grid-template-columns: 15px minmax(0, 1fr) 62px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.offactor--last { border-bottom: none; }

.offactor__dot {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(var(--warn-rgb), 0.5);
  border-radius: 50%;
  background: transparent;
}

.offactor--fair .offactor__dot { border-color: rgba(var(--accent-rgb), 0.55); }
.offactor--good .offactor__dot { border-color: var(--good); background: var(--good); }
.offactor__label { display: block; font-size: 12px; line-height: normal; color: var(--ink); }

/* The evidence, not the judgement: a score without it persuades nobody. */
.offactor__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: 1.45; color: rgba(var(--ink-rgb), 0.42); }
.offactor__score { text-align: right; font-family: var(--serif); font-size: 15px; line-height: normal; color: var(--warn); }
.offactor--fair .offactor__score { color: var(--accent); }
.offactor--good .offactor__score { color: var(--good); }

.ofnet { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.ofnet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.ofnet__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.ofnet__value { font-family: var(--serif); font-size: 22px; line-height: normal; color: var(--ink); }
.ofnet__note { display: block; margin: 8px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.42); }

.ofacts { display: flex; gap: 9px; margin: 18px 0 0; }

.ofbtn {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ofbtn:hover,
.ofbtn:focus-visible { background: var(--accent-hover); }
.ofbtn[aria-pressed="true"] { border: 1px solid rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.ofbtn[aria-pressed="true"]:hover,
.ofbtn[aria-pressed="true"]:focus-visible { border-color: var(--good); background: transparent; color: var(--good); }

.ofbtn--ghost { border: 1px solid rgba(var(--ink-rgb), 0.28); background: transparent; color: var(--ink); }
.ofbtn--ghost:hover,
.ofbtn--ghost:focus-visible { border-color: var(--accent); background: transparent; color: var(--accent); }

/* --------------------------------------------------------- §02 the comparison --- */

.ofvs { margin: 0; padding: 0; list-style: none; }
.ofvs__head,
.ofvs__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ofvs__head { align-items: end; margin: 0; padding: 16px 22px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }
.ofvs__headlabel { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.ofvs__buyer { display: block; font-size: 13px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
/* The stronger offer is gold here, not green: green is reserved for the
   per-row dots, and a green name would pre-empt the reader's own reading
   of the seven rows below it. */
.ofvs__buyer--best { color: var(--accent); }
.ofvs__amount { display: block; margin-top: 6px; font-family: var(--serif); font-size: 22px; line-height: normal; color: var(--ink); }
.ofvs__amount--best { color: var(--accent); }
.ofvs__row { align-items: center; padding: 13px 22px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.ofvs__label { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.ofvs__cell { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* Green means better for the owner, not bigger — and three rows can have no
   winner at all, which is why the dot is a state and not a badge. */
.ofvs__dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.2); }
.ofvs__dot--win { background: var(--good); }
.ofvs__text { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.55); }
.ofvs__text--win { color: var(--ink); }
.oftake { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: baseline; margin: 0; padding: 16px 22px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.oftake__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.oftake__body { font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* ------------------------------------------------------------- §03 the list --- */

.oftabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.oftab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.oftab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.oftab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oftab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.oftab__n { font-size: 12px; opacity: 0.6; }

.oflist { margin: 0; padding: 0; list-style: none; }
.oflist > li { display: block; }
.oflist > li[hidden] { display: none; }

.oflist__head,
.ofrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px 104px 130px 116px 132px;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
}

.oflist__head {
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.ofrow {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ofrow--last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.ofrow:hover { background: rgba(var(--accent-rgb), 0.06); }
.ofrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ofrow.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.ofrow__file { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.ofrow__buyer { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.ofrow__amount { font-family: var(--serif); font-size: 17px; line-height: normal; color: var(--ink); }
.ofvsask { font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.ofvsask--good { color: var(--good); }
.ofvsask--warn { color: var(--warn); }
.ofrow__strength { display: flex; align-items: center; gap: 9px; }
.ofrow__n { font-size: 12px; line-height: normal; color: var(--warn); }
.ofrow__n--fair { color: var(--accent); }
.ofrow__n--solid { color: var(--good); }
.ofdue { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.ofdue--warn { color: var(--warn); }
.ofdue--accent { color: var(--accent); }
.ofrow__end { text-align: right; }
.ofempty { display: flex; align-items: center; justify-content: center; min-height: 150px; margin: 0; padding: 24px; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.45); }
.ofempty[hidden] { display: none; }

/* ------------------------------------------------------- §04 the fall-throughs --- */

.ofdeaths { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }

.ofdeath {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ofdeath:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofdeath__label { font-size: 12px; line-height: normal; letter-spacing: 0.08em; color: rgba(var(--ink-rgb), 0.5); }
.ofdeath.is-on .ofdeath__label { color: var(--accent); }
.ofdeath__track { display: block; height: 8px; background: rgba(var(--ink-rgb), 0.1); }
.ofdeath__bar { display: block; height: 8px; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }
.ofdeath__bar--top { background: rgba(var(--warn-rgb), 0.75); }
.ofdeath.is-on .ofdeath__bar { background: var(--accent); }
.ofdeath__n { text-align: right; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.ofdeath.is-on .ofdeath__n { color: var(--accent); }
.ofdeath__says { display: block; margin: 18px 0 0; padding: 14px 16px; border: 1px solid rgba(var(--ink-rgb), 0.16); background: var(--panel-callout); font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.62); }
.ofdeath__says--warn { border-color: rgba(var(--warn-rgb), 0.5); }

/* ----------------------------------------------------------- §05 the owners --- */

.ofowners { margin: 0; padding: 0; list-style: none; }
.ofowner { display: grid; grid-template-columns: minmax(0, 1fr) 116px 108px; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.ofowner--late { border-left-color: var(--warn); }
.ofowner--done { border-left-color: var(--good); }
.ofowner__name { display: block; font-size: 13px; line-height: normal; color: var(--ink); }
.ofowner__file { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: normal; color: rgba(var(--ink-rgb), 0.45); }
.ofwait { display: block; font-family: var(--serif); font-size: 16px; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.ofwait--accent { color: var(--accent); }
.ofwait--warn { color: var(--warn); }
.ofwait--done { color: var(--good); }
.ofwait__unit { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.ofowner__act { text-align: right; }

.ofnudge {
  padding: 9px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ofnudge--due { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ofnudge--done { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
.ofnudge:hover,
.ofnudge:focus-visible { border-color: var(--accent); color: var(--accent); }
.ofnudge--due:hover,
.ofnudge--due:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.ofnudge--done:hover,
.ofnudge--done:focus-visible { border-color: var(--good); color: var(--good); }

/* ------------------------------------------------------------- the scales --- */
/* Generated from the data by the builder, which refuses to emit a class this
   stylesheet does not define. */

.ofh--16 { height: 16%; }
.ofh--22 { height: 22%; }
.ofh--23 { height: 23%; }
.ofh--28 { height: 28%; }
.ofh--34 { height: 34%; }
.ofh--57 { height: 57%; }
.ofh--64 { height: 64%; }
.ofh--66 { height: 66%; }
.ofh--74 { height: 74%; }
.ofh--89 { height: 89%; }
.ofh--100 { height: 100%; }

.ofw--14 { width: 14%; }
.ofw--29 { width: 29%; }
.ofw--34 { width: 34%; }
.ofw--43 { width: 43%; }
.ofw--57 { width: 57%; }
.ofw--59 { width: 59%; }
.ofw--71 { width: 71%; }
.ofw--86 { width: 86%; }
.ofw--89 { width: 89%; }
.ofw--90 { width: 90%; }
.ofw--93 { width: 93%; }
.ofw--99 { width: 99%; }
.ofw--100 { width: 100%; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  .oftrip { grid-template-columns: minmax(0, 1fr) minmax(280px, 324px); }
  .ofcol:first-child { grid-column: 1 / -1; }
  .ofpicks { flex-direction: row; overflow-x: auto; }
  .ofpicks > li { flex: 0 0 250px; }
  .ofpick { border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .ofpick.is-on { border-left-color: transparent; border-top-color: var(--accent); }
  .ofpicks__foot { border-top: none; border-left: 1px solid rgba(var(--ink-rgb), 0.14); }
  .oflist__head,
  .ofrow { grid-template-columns: minmax(0, 1fr) 118px 124px 108px 124px; }
  .oflist__head span:nth-child(3),
  .ofrow .ofvsask { display: none; }
}

@media (max-width: 767px) {
  .oftrip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ofcol--ladder,
  .ofcol--strength { padding: 20px 18px 22px; }
  .ofpicks > li { flex: 0 0 78vw; }
  /* Never a squeezed table: each offer becomes its own card and keeps its
     dots, because the dots are the argument. */
  .ofvs__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ofvs__head .ofvs__headlabel { display: none; }
  .ofvs__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px 18px; }
  .oftake { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 16px 18px; }
  .oflist__head { display: none; }
  .ofrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .ofrow .ofrow__end { grid-row: 1; grid-column: 2; }
  .ofrow__strength { grid-column: 1 / -1; }
  .ofdeath { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 8px; }
  .ofdeath__track { grid-column: 1 / -1; }
  .ofowner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .ofowner__act { grid-column: 1 / -1; text-align: left; }
  .ofnudge { width: 100%; }
  .ofacts { flex-direction: column; }
}

@media (hover: none) {
  .ofpick,
  .ofround,
  .ofrow,
  .oftab,
  .ofdeath,
  .ofnudge,
  .ofbtn,
  .ofclock__link { min-height: 44px; }
  .oftab { padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ofpick,
  .ofround,
  .ofround__bar,
  .ofrow,
  .oftab,
  .ofdeath__bar,
  .ofnudge,
  .ofbtn { transition: none; }
}

/* ==========================================================================
   89. Agent desk — Enquiries, prefix `eq`
   --------------------------------------------------------------------------
   The queue of people who have written and have **not yet had an answer**,
   ordered by what the silence is costing. The whole screen has one goal:

       **empty.**

   THE BOUNDARY WITH MESSAGES, WHICH IS THE POINT OF THE PAGE
   ----------------------------------------------------------
   Enquiries holds *first contact, unanswered*, sorted by cost of silence, and
   owns urgency — the overdue colour, the age buckets, the warn badge. Messages
   holds conversations already under way, sorted by last activity, and is never
   empty. Answering here is a **state change, not navigation**: the enquiry
   leaves the queue and reappears at the top of §04 as `just now`. Messages must
   never grow an "unanswered" badge of its own or this page has no reason to
   exist.

   ONE ARRAY, SIX CONSUMERS
   ------------------------
   `waiting` (unanswered) and `late` (waiting ≥ 24 h) feed the rail badge, the
   `h1`, the first stat tile, the §01 header, the filter chips and the rail's
   age buckets. Six readers, one count, so sending a reply moves all six or the
   page is lying somewhere.

   SORTED BY COST, NOT BY DATE
   ---------------------------
       score = (hours ≥ 24 ? 50 : hours) + (3 − readyRank) × 14 + amount/100k

   Overdue saturates at 50 so a five-day silence does not outrank a
   pre-approved buyer who wrote this morning; readiness is worth more than
   money, which is why Marta (2 h, pre-approved) sits above Henrik (12 h, cash).

   §02 IS A CURVE, NOT A SCORE
   ---------------------------
   The eight bands are the desk's own last four hundred enquiries: 41% of those
   answered inside five minutes reach a viewing, 2% of those answered after
   three days. The headline keeps a verb in the middle — `34% · reach a viewing
   · desk · answered within 1h` — so it can never be read as an answer rate.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* -------------------------------------------------- rail panel — the ages --- */
/* Panel 2 is the shared reply clock from section 84; only the third panel is
   this page's own. */

.eqwait { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.eqwait__list { display: flex; flex-direction: column; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }
.eqbucket { display: flex; align-items: center; gap: 10px; }

.eqbucket__label {
  flex: 0 0 54px;
  width: 54px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

/* An empty band is dimmed rather than hidden: the gap in the ladder is the
   information. */
.eqbucket__label--off { color: rgba(var(--ink-rgb), 0.3); }
.eqbucket__track { flex: 1; height: 7px; background: rgba(var(--ink-rgb), 0.1); }
/* Every tone is named. A band left without one renders neutral rather than
   quietly reporting good news. */
.eqbucket__fill { display: block; height: 7px; background: rgba(var(--ink-rgb), 0.4); }
.eqbucket__fill--good { background: var(--good); }
.eqbucket__fill--accent { background: var(--accent); }
.eqbucket__fill--warn { background: var(--warn); }
.eqbucket__n { width: 18px; text-align: right; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.eqbucket__n--good { color: var(--good); }
.eqbucket__n--accent { color: var(--accent); }
.eqbucket__n--warn { color: var(--warn); }

.eqwait__foot {
  display: block;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------- §01 the filters --- */

.eqchips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.eqchip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.eqchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.eqchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eqchip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.eqchip__n { font-size: 12px; line-height: normal; opacity: 0.6; }

/* ---------------------------------------------------------- §01 the desk --- */
/* Hairline between the two columns: 1px gap over a 0.16 ground. */

.eqdesk {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
  min-height: 560px;
}

.eqqueue { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
/* A flex item's `min-width: auto` is its content's width — without this the
   tablet scroller pushes six 300px rows into the page's own width. */
.eqqueue__list { min-width: 0; margin: 0; padding: 0; list-style: none; }

.eqempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.45);
}

.eqempty[hidden] { display: none; }

.eqrow {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.eqqueue__list > li[hidden] { display: none; }
.eqrow:hover { background: rgba(var(--accent-rgb), 0.05); }
.eqrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* Overdue marks its own edge; the selected row takes the gold, so a row that
   is both reads as selected. */
.eqrow--late { border-left-color: var(--warn); }
.eqrow.is-on { border-left-color: var(--accent); background: var(--panel-picked); }

.eqrow__top { display: flex; align-items: center; gap: 12px; }

.eqmono {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.6);
  object-fit: cover;
}

.eqrow.is-on .eqmono { border-color: var(--accent); color: var(--accent); }
.eqrow__id { flex: 1; min-width: 0; }
.eqrow__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eqrow__name { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.eqrow__wait { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: rgba(var(--ink-rgb), 0.6); }
.eqrow__wait--good { color: var(--good); }
.eqrow__wait--accent { color: var(--accent); }
.eqrow__wait--warn { color: var(--warn); }
.eqrow__tags { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.eqready { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.72); }
.eqready--good { color: var(--good); }
.eqready--accent { color: var(--accent); }
.eqready--warn { color: var(--warn); }
.eqrow__dot { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.28); }
.eqrow__file { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.eqrow__asked { display: block; margin-top: 9px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

/* The heat bar is not the age: it is how much of the enquiry is left. */
.eqheat { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.eqheat__track { display: block; flex: 1; height: 3px; background: rgba(var(--ink-rgb), 0.1); }
.eqheat__fill { display: block; height: 3px; background: rgba(var(--ink-rgb), 0.4); }
.eqheat__fill--good { background: var(--good); }
.eqheat__fill--accent { background: var(--accent); }
.eqheat__fill--warn { background: var(--warn); }
.eqheat__label { font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.eqheat__label--good { color: var(--good); }
.eqheat__label--accent { color: var(--accent); }
.eqheat__label--warn { color: var(--warn); }

.eqqueue__foot {
  display: block;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* -------------------------------------------------------- §01 the answer --- */
/* Every enquiry's pane is printed and all but one hidden, so selecting one is
   a `hidden` flip and nothing can be assembled wrong. */

.eqdetail { display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 26px; background: var(--panel); }
.eqpane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.eqpane[hidden] { display: none; }
.eqpane__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eqpane__who { min-width: 0; }
.eqpane__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.eqpane__name { font-family: var(--serif); font-size: 26px; line-height: 1.1; }

.eqtag {
  padding: 4px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.72);
}

.eqtag--good { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.eqtag--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.eqtag--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.eqpane__meta { display: block; margin: 6px 0 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.eqpane__age { text-align: right; }
.eqage { display: block; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink); }
.eqage--good { color: var(--good); }
.eqage--accent { color: var(--accent); }
.eqage--warn { color: var(--warn); }
.eqage__note { display: block; margin: 5px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }

/* The one paragraph on the page that is an opinion — and it is coloured by
   the clock, so the opinion has a reason. */
.eqwhy {
  display: block;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-left: 2px solid rgba(var(--ink-rgb), 0.4);
  background: var(--panel-callout);
}

.eqwhy--good { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.eqwhy--accent { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.eqwhy--warn { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.eqwhy__title { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.eqwhy--good .eqwhy__title { color: var(--good); }
.eqwhy--accent .eqwhy__title { color: var(--accent); }
.eqwhy--warn .eqwhy__title { color: var(--warn); }
.eqwhy__body { display: block; margin-top: 9px; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

.eqfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.eqfact { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 14px 15px; background: var(--panel-callout); }
.eqfact__label { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.eqfact__value { font-size: 13px; color: rgba(var(--ink-rgb), 0.72); }
.eqfact__value--good { color: var(--good); }
.eqfact__value--accent { color: var(--accent); }
.eqfact__value--warn { color: var(--warn); }

.eqlabel { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.eqmsg { display: block; margin-top: 22px; }

/* What the buyer actually wrote — the largest body text on the page, because
   everything else here is about it. */
.eqmsg__body {
  display: block;
  margin: 11px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-left: 2px solid var(--accent);
  background: var(--panel-picked);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

.eqmsg__when { display: block; margin: 8px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }

.eqdocs { display: block; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.eqdocs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.eqdocs__note { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.4); }
.eqdocs__note--on { color: var(--good); }
.eqdocs__list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 11px 0 0; padding: 0; list-style: none; }

.eqdoc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--field);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.eqdoc:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.eqdoc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eqdoc.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.08); }

.eqdoc__box {
  display: flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: var(--on-accent);
}

.eqdoc.is-on .eqdoc__box { border-color: var(--accent); background: var(--accent); }
.eqdoc__label { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.eqdoc.is-on .eqdoc__label { color: var(--accent); }
.eqdoc__size { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.35); }

.eqopeners { display: block; margin-top: 20px; }
.eqopeners__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.eqopeners__label { margin-right: 3px; }

.eqquick {
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.eqquick:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.eqquick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eqquick.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.eqcompose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 12px; }

.eqcompose__field {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: var(--field);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  resize: vertical;
}

.eqcompose__field:focus { border-color: var(--accent); }
.eqcompose__side { display: flex; flex-direction: column; gap: 8px; }

/* Borderless, as the drawing has it: the gold ground is the button. */
.eqsend {
  padding: 13px 24px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eqsend:hover { background: var(--ink); }
.eqsend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sent is not a disabled button: it is a receipt. */
.eqsend--sent,
.eqsend--sent:hover { background: transparent; color: var(--good); cursor: default; }

.eqtime {
  padding: 11px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.eqtime:hover { border-color: var(--accent); color: var(--accent); }
.eqfoot { display: flex; align-items: center; gap: 9px; margin: 11px 0 0; font-size: 12px; font-weight: 300; color: var(--good); }
.eqfoot--warn { color: var(--warn); }
.eqfoot__dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------- §02 the decay --- */

.eqpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: stretch; }
.eqdecay { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.eqdecay__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.eqdecay__figure { display: flex; align-items: baseline; gap: 9px; }
.eqdecay__value { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.eqdecay__value--good { color: var(--good); }
.eqdecay__value--accent { color: var(--accent); }
.eqdecay__value--warn { color: var(--warn); }
.eqdecay__unit { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.eqdecay__when { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }

.eqbars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 128px; margin: 18px 0 0; padding: 0; list-style: none; }
/* The list item has to be a flex box of its own, or the button inside it
   never gets the width its `flex: 1` asks for and the chart collapses. */
.eqbars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.eqbar {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

.eqbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eqbar.is-on { background: rgba(var(--accent-rgb), 0.08); }
/* Four grounds: the fast bands green, the slow ones rust, the middle muted,
   and the agent's own band gold — the only one that is about them. */
.eqbar__fill { display: block; width: 100%; background: rgba(var(--ink-rgb), 0.24); transition: background 0.2s ease; }
.eqbar__fill--good { background: rgba(var(--good-rgb), 0.75); }
.eqbar__fill--warn { background: rgba(var(--warn-rgb), 0.75); }
.eqbar__fill--mine { background: var(--accent); }
.eqbar.is-on .eqbar__fill { background: var(--accent-hover); }
.eqbar__mine { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
.eqbands { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.eqband { flex: 1; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.eqband--on { color: var(--accent); }
.eqdecay__note { display: block; margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }

/* ------------------------------------------------------- §03 the sources --- */

.eqsrc { width: 100%; border-collapse: collapse; }

.eqsrc th,
.eqsrc td { padding: 14px 20px; text-align: left; vertical-align: middle; }

.eqsrc thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.eqsrc thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.eqsrc tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); transition: background 0.2s ease; }
.eqsrc tbody tr:hover,
.eqsrc tbody tr.is-on { background: rgba(var(--accent-rgb), 0.06); }
.eqsrc th[scope="row"] { font-weight: 400; }
.eqsrc__label { display: block; font-size: 13px; color: var(--ink); }
.eqsrc__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }
.eqcol--sent { width: 96px; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.eqcol--views { width: 108px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.eqcol--rate { width: 116px; text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.eqsrc thead .eqcol--rate { text-align: right; }
.eqcol--rate.eqrate--accent { color: var(--accent); }
.eqcol--rate.eqrate--warn { color: var(--warn); }

.eqsrc__foot {
  display: block;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ----------------------------------------------------------- §04 the log --- */

.eqlog { width: 100%; border-collapse: collapse; }

.eqlog th,
.eqlog td { padding: 14px 20px; text-align: left; vertical-align: middle; }

.eqlog thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.eqlog thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.eqlog tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
/* `hidden` alone loses to the row's own `display: table-row`. */
.eqlog tbody tr[hidden] { display: none; }
.eqlog tbody tr:last-child { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.eqlog th[scope="row"] { font-weight: 400; }
.eqlog__name { display: block; font-size: 13px; color: var(--ink); }
.eqlog__ready { display: block; margin-top: 3px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.72); }
.eqlog__ready--good { color: var(--good); }
.eqlog__ready--accent { color: var(--accent); }
.eqlog__ready--warn { color: var(--warn); }
.eqcol--about { width: 170px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.eqcol--speed { width: 136px; font-family: var(--serif); font-size: 16px; color: var(--good); }
.eqcol--speed.eqspeed--accent { color: var(--accent); }
.eqcol--speed.eqspeed--warn { color: var(--warn); }
.eqcol--from { width: 128px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.eqcol--out { width: 170px; text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.72); }
.eqsrc thead .eqcol--out,
.eqlog thead .eqcol--out { text-align: right; }
.eqcol--out.eqout--good { color: var(--good); }
.eqcol--out.eqout--accent { color: var(--accent); }
.eqcol--out.eqout--warn { color: var(--warn); }

.eqlog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------- printed lengths --- */

/* The four heat widths, and every proportion the four age buckets can reach
   once replies start leaving the queue — n/max for max in 1—6. */
.eqw--0 { width: 0; }
.eqw--16 { width: 16%; }
.eqw--17 { width: 17%; }
.eqw--20 { width: 20%; }
.eqw--25 { width: 25%; }
.eqw--33 { width: 33%; }
.eqw--40 { width: 40%; }
.eqw--50 { width: 50%; }
.eqw--60 { width: 60%; }
.eqw--67 { width: 67%; }
.eqw--68 { width: 68%; }
.eqw--75 { width: 75%; }
.eqw--80 { width: 80%; }
.eqw--83 { width: 83%; }
.eqw--92 { width: 92%; }
.eqw--100 { width: 100%; }

.eqh--5 { height: 5%; }
.eqh--12 { height: 12%; }
.eqh--22 { height: 22%; }
.eqh--37 { height: 37%; }
.eqh--51 { height: 51%; }
.eqh--66 { height: 66%; }
.eqh--83 { height: 83%; }
.eqh--100 { height: 100%; }

/* ------------------------------------------------------------- responsive --- */

/* Four fact cells in a 468px pane leave 73px of content each, and `Enquiries`
   at 0.2em wants 81. The cells keep their four columns down to the tablet
   breakpoint; the tracking gives way first. */
@media (max-width: 1339px) {
  .eqfact { padding: 14px 11px; }
  .eqfact__label { letter-spacing: 0.14em; }
}

@media (max-width: 1179px) {
  /* The queue turns into a scroller across the top: on a narrow screen the
     answer needs the width, not the list. */
  .eqdesk { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .eqqueue__list { display: flex; overflow-x: auto; }
  .eqqueue__list > li { flex: 0 0 300px; }
  .eqrow { height: 100%; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .eqrow--late { border-top-color: var(--warn); border-left-color: transparent; }
  .eqrow.is-on { border-top-color: var(--accent); border-left-color: transparent; }
  .eqfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Same breakpoint as `.agsplit` on every other agent screen: two panels
     side by side stop fitting before the tables inside them do. */
  .eqpair { grid-template-columns: minmax(0, 1fr); }
  .eqcol--about { width: 130px; }
  .eqcol--speed { width: 104px; }
  .eqcol--out { width: 140px; }
  /* Source is the one column that is only ever context. */
  .eqlog .eqcol--from { display: none; }
}

@media (max-width: 767px) {
  .eqqueue__list > li { flex: 0 0 84vw; }
  .eqdetail { padding: 20px 18px 22px; }
  .eqfacts { grid-template-columns: minmax(0, 1fr); }
  .eqcompose { grid-template-columns: minmax(0, 1fr); }
  .eqcompose__side { flex-direction: column; }
  .eqdecay { padding: 20px 18px 22px; }
  .eqband { letter-spacing: normal; }
  /* Source counts move under the label; the log drops the column that is
     only ever context. */
  .eqsrc thead { display: none; }
  .eqsrc tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .eqsrc th,
  .eqsrc td { padding: 12px 18px; }
  .eqsrc th[scope="row"] { grid-column: 1 / -1; padding-bottom: 0; }
  .eqcol--sent,
  .eqcol--views { width: auto; padding-top: 0; }
  .eqcol--rate { width: auto; padding-top: 0; }
  /* Each answered enquiry becomes a card: who and what happened on the first
     line, then the file, the speed and where it came from. */
  .eqlog thead { display: none; }
  /* Fixed columns rather than `auto`: each row is its own grid, so content
     widths would step the speeds and sources out of line card by card. */
  .eqlog tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 68px 96px; column-gap: 12px; row-gap: 6px; padding: 12px 16px; }
  /* The card's inset moves to the row: cell padding inside a fixed column is
     width taken away from the text it was meant to space. */
  .eqlog th,
  .eqlog td { padding: 0; }
  .eqlog .eqcol--speed { white-space: nowrap; }
  /* Tracking is the first thing to give when a card's first column is 123px:
     `PRE-APPROVED` at 0.12em wraps, at 0.06em it does not. */
  .eqlog__ready { letter-spacing: 0.06em; }
  .eqlog th[scope="row"] { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .eqlog .eqcol--out { grid-column: 2 / -1; grid-row: 1; width: auto; padding-bottom: 0; }
  .eqlog .eqcol--about { grid-column: 1; grid-row: 2; width: auto; padding-top: 0; }
  .eqlog .eqcol--speed { grid-column: 2; grid-row: 2; width: auto; padding-top: 0; }
  .eqlog .eqcol--from { display: block; grid-column: 3; grid-row: 2; width: auto; padding-top: 0; text-align: right; }
  .eqlog__foot { flex-wrap: wrap; }
}

@media (hover: none) {
  .eqchip,
  .eqrow,
  .eqdoc,
  .eqquick,
  .eqsend,
  .eqtime { min-height: 44px; }
  .eqdoc,
  .eqquick { padding: 11px 15px; }
  .eqlog__foot .aglink { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .eqchip,
  .eqrow,
  .eqdoc,
  .eqquick,
  .eqsend,
  .eqbar,
  .eqbar__fill,
  .eqsrc tbody tr { transition: none; }
}

/* ==========================================================================
   90. Agent desk — Messages, prefix `mg`
   --------------------------------------------------------------------------
   The inbox, organised around one question a normal inbox never answers:

       **Whose move is it?**

   Every thread carries a `court` — `you`, `them` or `none` — and that single
   field drives the rail badge, the rail bars and their caption, the `h1`, the
   `Waiting on you` chip, the tag over the conversation and the colour of the
   elapsed time in the list. Six readers, one field, no authored duplicates.
   An inbox sorted by recency tells an agent nothing; an inbox sorted by
   obligation tells them what to do next.

   THE BOUNDARY WITH ENQUIRIES, WHICH THIS PAGE MUST NOT CROSS
   ------------------------------------------------------------
   Enquiries (section 89) holds first contacts not yet answered and owns **all**
   urgency — the overdue colour, the age buckets, the reply clock. Messages
   holds everything after that and owns **none** of it. There is no reply clock
   on this page, no overdue badge and no "unanswered" count anywhere: `court` is
   its only notion of obligation, and it is about turn-taking, not lateness.

   THREADS SIT ON FILES, NOT ON PEOPLE
   -----------------------------------
   Two threads about Palma 9 — the notary and the owner — carry the same file
   header, the same price and the same stage bar. The third column is the file,
   not the person, so switching between the two conversations never loses the
   property.

   THREE FLEXIBLE COLUMNS
   ----------------------
   `minmax(244px, 268px) minmax(360px, 1fr) minmax(268px, 292px)`. At exactly
   1180px fixed side columns left the conversation at 320px and the thread
   header's buttons landed on top of its meta line; all three are `minmax` and
   the header wraps, so the buttons drop to a second row instead of colliding.

   Shell, rail and section rules come from section 84.
   ========================================================================== */

/* ------------------------------------------------- rail panel — the ball --- */

.mgball { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.mgball__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.mgball__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
/* Nothing waiting on you is the only state worth aiming for, so it is the
   only one that goes green. */
.mgball__figure--clear { color: var(--good); }
.mgball__unit { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.mgball__bars { display: flex; gap: 2px; height: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.mgball__bar { display: block; height: 7px; background: rgba(var(--ink-rgb), 0.24); }
.mgball__bar--warn { background: var(--warn); }
.mgball__bar--good { background: var(--good); }

.mgcourt { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.mgcourt__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.mgcourt__key { display: flex; align-items: center; gap: 7px; }
.mgcourt__chip { display: block; flex: 0 0 10px; width: 10px; height: 6px; background: rgba(var(--ink-rgb), 0.24); }
.mgcourt__chip--warn { background: var(--warn); }
.mgcourt__chip--good { background: var(--good); }
.mgcourt__n { color: rgba(var(--ink-rgb), 0.5); }
.mgcourt__n--warn { color: var(--warn); }
.mgcourt__n--good { color: var(--good); }

.mgball__note {
  display: block;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.3);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.5);
}

/* ----------------------------------------------- rail panel — the owners --- */

.mgowners { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.mgowners__tag { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); }
.mgowners__tag--warn { color: var(--warn); }
.mgowners__list { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }

.mgowner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mgowner:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgowner__dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.mgowner__name { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.6); }
.mgowner__days { font-size: 12px; line-height: normal; letter-spacing: 0.08em; color: rgba(var(--ink-rgb), 0.4); }
.mgowner:hover .mgowner__name { color: var(--ink); }
/* Four days is when an owner starts wondering; seven is when they ring the
   office. The row states are those two thresholds, nothing else. */
.mgowner--slow .mgowner__dot { background: var(--accent); }
.mgowner--slow .mgowner__days { color: var(--accent); }
.mgowner--late .mgowner__dot { background: var(--warn); }
.mgowner--late .mgowner__name { color: var(--ink); }
.mgowner--late .mgowner__days { color: var(--warn); }

.mgowners__foot {
  display: block;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* -------------------------------------------------------- §01 the filters --- */

.mgtabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.mgtab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mgtab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mgtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgtab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mgtab__n { font-size: 12px; line-height: normal; opacity: 0.6; }

/* ---------------------------------------------------------- §01 the desk --- */

/* The handoff's minimums are 244/360/268, which need 874px. The main column at
   1180 is 841, so the third column was cut. The maxima are untouched, so 1440
   and up are exactly as drawn; only the floor moved. */
.mgdesk {
  display: grid;
  grid-template-columns: minmax(220px, 268px) minmax(340px, 1fr) minmax(260px, 292px);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

/* --- the list --- */

.mglist { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
.mglist__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }

.mgsearch {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
}

.mgsearch::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.mgsearch:focus { border-color: var(--accent); }

.mgnew {
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mgnew:hover { border-color: var(--accent); color: var(--accent); }
.mglist__items { min-width: 0; margin: 0; padding: 0; list-style: none; }
.mglist__items > li[hidden] { display: none; }

.mgempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.45);
}

.mgempty[hidden] { display: none; }

.mgrow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mgrow:hover { background: rgba(var(--accent-rgb), 0.05); }
.mgrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mgrow.is-on { border-left-color: var(--accent); background: var(--panel-picked); }

.mgmono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.6);
  object-fit: cover;
}

.mgrow.is-on .mgmono { border-color: var(--accent); color: var(--accent); }
.mgrow__body { min-width: 0; }
.mgrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mgrow__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The dot is unread. It keeps its width when it is empty so the names line up. */
.mgdot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.mgdot--unread { background: var(--accent); }
.mgrow__name { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.7); }
.mgrow__name--unread { color: var(--ink); }
/* The colour of the time is who the thread is waiting on — the same field the
   rail bars and the tag read. */
.mgrow__when { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: rgba(var(--ink-rgb), 0.35); }
.mgrow__when--you { color: var(--warn); }
.mgrow__when--them { color: var(--good); }
.mgrow__tags { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 5px; }

.mgpill {
  flex: none;
  padding: 2px 6px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.72);
}

.mgpill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mgpill--good { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.mgpill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.mgrow__file { overflow: hidden; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: rgba(var(--ink-rgb), 0.38); }
.mgrow__snippet { display: block; margin-top: 7px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.mgflag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.mgflag--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mgflag--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }

.mglist__foot {
  display: block;
  margin: 0;
  padding: 13px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.4);
}

/* --- the conversation --- */
/* Every thread is printed in full and all but one hidden, so opening one is a
   `hidden` flip on two panes and no conversation can be assembled against the
   wrong file. */

.mgconv { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.mgpane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mgpane[hidden] { display: none; }
.mgconv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); }
.mgconv__who { flex: 1 1 190px; min-width: 0; }
.mgconv__title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0; }
.mgconv__name { font-family: var(--serif); font-size: 21px; line-height: 1.1; color: var(--ink); }

.mgtag {
  padding: 3px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.72);
}

.mgtag--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.mgtag--good { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.mgtag--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mgconv__meta { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
/* Stretch, because the outlined button carries a border and the gold one does
   not: without it the pair ends up 2px apart in height. */
.mgconv__acts { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 0; }

.mgbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mgbtn:hover { border-color: var(--accent); color: var(--accent); }
/* The gold ground is the button, as the drawing has it — no border. */
.mgbtn--go { border: none; background: var(--accent); color: var(--on-accent); }
.mgbtn--go:hover { background: var(--accent-hover); color: var(--on-accent); }

.mgthread { display: block; max-height: 470px; margin: 0; padding: 20px 22px 8px; overflow-y: auto; list-style: none; }
.mgthread:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mgthread > li { display: block; margin-bottom: 18px; }
.mgday { display: flex; align-items: center; gap: 13px; margin: 4px 0 18px; }
.mgday__rule { flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.12); }
.mgday__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }

.mgmsg { display: flex; justify-content: flex-start; }
.mgmsg--mine { justify-content: flex-end; }
.mgmsg__box { max-width: 82%; min-width: 0; }
.mgmsg__meta { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin: 0; }
.mgmsg--mine .mgmsg__meta { justify-content: flex-end; }
.mgmsg__who { font-size: 12px; line-height: normal; color: var(--accent); }
.mgmsg--mine .mgmsg__who { color: rgba(var(--ink-rgb), 0.5); }
.mgmsg__time { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

/* Theirs sits on the lighter ground with a gold edge, yours on the inset with
   an ink one — the page is readable as a conversation with the colour off. */
.mgbubble {
  display: block;
  margin: 7px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-left: 2px solid var(--accent);
  background: var(--panel-picked);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.mgbubble--mine { border-color: rgba(var(--ink-rgb), 0.14); border-left-color: rgba(var(--ink-rgb), 0.28); background: var(--field); color: rgba(var(--ink-rgb), 0.72); }

.mgpromise { display: flex; align-items: center; gap: 9px; margin: 8px 0 0; padding: 9px 12px; border: 1px solid rgba(var(--warn-rgb), 0.5); background: var(--field); }
.mgpromise__dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.mgpromise__label { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }

.mgdocs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 9px 0 0; padding: 0; list-style: none; }
.mgdoc { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--field); text-decoration: none; transition: border-color 0.2s ease; }
.mgdoc:hover { border-color: var(--accent); }

.mgdoc__kind {
  display: flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
}

.mgdoc__label { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.72); }
.mgdoc__size { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.35); }

/* --- the composer --- */

.mgcompose { display: block; margin-top: auto; padding: 14px 22px 18px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.mgcompose__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.mgcompose__label { flex: none; margin-right: 3px; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }

/* The count is how often the agent has used that line. It is the only
   personalisation on the desk and it is worth keeping. */
.mgquick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mgquick:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.mgquick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mgquick.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mgquick__n { font-size: 12px; line-height: normal; opacity: 0.55; }

.mgcompose__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 12px; }

.mgcompose__field {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: var(--field);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  resize: vertical;
}

.mgcompose__field:focus { border-color: var(--accent); }
.mgcompose__side { display: flex; flex-direction: column; gap: 8px; }

.mgsend {
  padding: 12px 22px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.mgsend:hover { background: var(--ink); }
.mgsend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mgattach {
  padding: 10px 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mgattach:hover { border-color: var(--accent); color: var(--accent); }
/* Reads the situation, not the state: "She replies within the hour. You have
   eighteen minutes of goodwill left." */
.mgstatus { display: flex; align-items: center; gap: 9px; margin: 11px 0 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }
.mgstatus__dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.3); }
.mgstatus__dot--good { background: var(--good); }
.mgstatus__dot--accent { background: var(--accent); }
.mgstatus__dot--warn { background: var(--warn); }

/* --- the file --- */

.mgfile { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
.mgfilepane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.mgfilepane[hidden] { display: none; }
.mglabel { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.mgsub { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.mgfile__top { display: block; padding: 20px 22px 18px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }
.mgshot { position: relative; display: block; height: 132px; margin-top: 14px; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.mgshot__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Every tone is named, so a badge left without one reads as a plain plate
   rather than quietly claiming the accent. */
.mgbadge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  background: rgba(var(--ink-rgb), 0.82);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
}

.mgbadge--accent { background: rgba(var(--accent-rgb), 0.92); }
.mgbadge--good { background: rgba(var(--good-rgb), 0.9); }
.mgbadge--warn { background: rgba(var(--warn-rgb), 0.9); }
.mgfile__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 13px 0 0; }
.mgfile__title { font-family: var(--serif); font-size: 17px; line-height: 1.15; color: var(--ink); }
.mgfile__price { font-family: var(--serif); font-size: 17px; white-space: nowrap; color: var(--accent); }
.mgfile__meta { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.mgwhere { display: block; padding: 18px 22px 16px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.14); }
.mgsteps { display: flex; align-items: center; gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.mgstep { flex: 1; height: 3px; background: rgba(var(--ink-rgb), 0.14); }
.mgstep--on { background: var(--accent); }
.mgwhere__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 0 0; }
.mgstage { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.mgstage--good { color: var(--good); }
.mgstage--warn { color: var(--warn); }
.mgstage__next { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }

.mgagreed { display: block; padding: 18px 22px 20px; }
.mgagreed__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.mgagreed__note { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.mgagreed__note--clear { color: var(--good); }
.mgfacts { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; list-style: none; }
.mgfact { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 11px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.mgfact:last-child { border-bottom: none; }
/* Outstanding is an empty gold ring, settled is a filled green one — the
   marker carries the state, the text does not have to. */
.mgfact__dot { width: 14px; height: 14px; margin-top: 2px; border: 1px solid rgba(var(--accent-rgb), 0.55); border-radius: 50%; background: transparent; }
.mgfact__dot--done { border-color: var(--good); background: var(--good); }
.mgfact__label { display: block; font-size: 12px; line-height: 1.45; color: var(--ink); }
.mgfact__label--done { color: rgba(var(--ink-rgb), 0.6); }
.mgfact__source { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.4); }

.mgfile__foot {
  display: block;
  margin: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------ §02 the promises --- */

.mgpair { display: grid; grid-template-columns: 1.1fr minmax(0, 1fr); gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: stretch; }
.mgrows { margin: 0; padding: 0; list-style: none; }
.mgprow { display: grid; grid-template-columns: minmax(0, 1fr) 122px 104px; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); border-left: 2px solid transparent; }
.mgprow--late { border-left-color: var(--warn); background: rgba(var(--warn-rgb), 0.05); }
.mgprow--done { border-left-color: var(--good); }
.mgprow__what { display: block; font-size: 13px; color: var(--ink); }
.mgprow--done .mgprow__what { color: rgba(var(--ink-rgb), 0.5); }
.mgprow__who { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }
.mgdue { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.mgdue--late { color: var(--warn); }
.mgdue--today { color: var(--accent); }
.mgdue--done { color: var(--good); }
.mgsaid { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.mgend { text-align: right; }

.mgact {
  padding: 9px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mgact:hover { border-color: var(--accent); color: var(--accent); }
.mgact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Only the ones that are already late get the gold fill: a page where every
   button shouts is a page where none of them does. */
.mgact--urgent { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mgact--urgent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.mgact--done,
.mgact--done:hover { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }

.mgfoot {
  display: block;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ---------------------------------------------------------- §03 the quiet --- */

.mgqrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.mgqrow__name { display: block; font-size: 13px; color: var(--ink); }
.mgqrow__why { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }
.mgdays { display: block; font-family: var(--serif); font-size: 17px; color: rgba(var(--ink-rgb), 0.6); }
.mgdays--accent { color: var(--accent); }
.mgdays--warn { color: var(--warn); }
.mgdays--done { color: var(--good); }
.mgdays__unit { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

/* ------------------------------------------------------- printed lengths --- */

.mgw--0 { width: 0; }
.mgw--13 { width: 13%; }
.mgw--25 { width: 25%; }
.mgw--38 { width: 38%; }
.mgw--50 { width: 50%; }
.mgw--63 { width: 63%; }
.mgw--75 { width: 75%; }
.mgw--88 { width: 88%; }
.mgw--100 { width: 100%; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  /* Two columns: the list and the conversation. The file drops under the
     conversation, where it still belongs to it. */
  .mgdesk { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .mgfile { grid-column: 2; }
  .mgpair { grid-template-columns: minmax(0, 1fr); }
  .mgthread { max-height: 380px; }
}

@media (max-width: 767px) {
  /* One column at a time: the list, then the thread. The conversation keeps
     its file header, which is the part that says what it is about. */
  .mgdesk { grid-template-columns: minmax(0, 1fr); }
  .mgfile { grid-column: 1; }
  .mglist__items { display: flex; overflow-x: auto; }
  .mglist__items > li { flex: 0 0 84vw; }
  .mgrow { height: 100%; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .mgrow.is-on { border-top-color: var(--accent); border-left-color: transparent; }
  .mgconv__head,
  .mgcompose { padding-left: 18px; padding-right: 18px; }
  .mgthread { padding: 18px 18px 8px; }
  .mgmsg__box { max-width: 100%; }
  .mgcompose__row { flex-wrap: nowrap; overflow-x: auto; }
  .mgquick { flex: 0 0 auto; }
  .mgcompose__grid { grid-template-columns: minmax(0, 1fr); }
  .mgcompose__side { flex-direction: column; }
  .mgfile__top,
  .mgwhere,
  .mgagreed,
  .mgfile__foot { padding-left: 18px; padding-right: 18px; }
  /* The due chip moves under the promise; Nudge takes the full width. */
  .mgprow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 14px 16px; }
  .mgprow .mgend { grid-column: 1 / -1; text-align: left; }
  .mgprow .mgact { width: 100%; }
  .mgqrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 14px 16px; }
  .mgqrow .mgend { grid-column: 1 / -1; text-align: left; }
  .mgqrow .mgact { width: 100%; }
}

@media (hover: none) {
  .mgtab,
  .mgrow,
  .mgquick,
  .mgact,
  .mgbtn,
  .mgsend,
  .mgattach,
  .mgnew,
  .mgowner { min-height: 44px; }
  .mgquick,
  .mgdoc { padding: 11px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mgtab,
  .mgrow,
  .mgquick,
  .mgact,
  .mgbtn,
  .mgsend,
  .mgattach,
  .mgnew,
  .mgdoc { transition: none; }
}

/* ==========================================================================
   91. Agent desk — Clients, prefix `cl`
   --------------------------------------------------------------------------
   Not a contact list. A contact list is a place names go to die. This is a
   **book of relationships with a temperature**, and it answers one question:

       **Who is cooling, and what do I have that they want?**

   The premise every section obeys:

       A client you have not spoken to is not a client. Silence is the only
       failure mode on this screen, and it is measured in days × money.

   THE TEMPERATURE SCALE IS THE PAGE'S VOCABULARY
   -----------------------------------------------
       hot   spoken to within 3 days
       warm  4—14 days
       cold  15 days or more

   It colours the dot in the list, the `Last spoke` cell, the tag over the
   relationship, the rail's three bars, the `Going cold` chip and the call
   list's left edge. One rule, six readers.

   THE CONTACT TIMELINE IS THE CENTREPIECE
   ---------------------------------------
   Twelve months, one dot each, sized by how many exchanges happened and hollow
   when none did. Klaus Dorn is eleven hollow circles and one filled: that row
   is the whole argument of the page. The observation under it counts the
   longest **run** of empty months, not the total of empty months — different
   numbers, and the sentence claims the former.

   MATCHES ARE COMPUTED, NEVER STORED
   ----------------------------------
   For each buyer the page filters the agent's own live files against the brief
   and shows only what has not been sent. `beds - 1` is deliberate: a buyer
   asking for three will look at a large two, and the fit label downgrades it to
   "one compromise" rather than hiding it. **Unsent matches are `--warn`** — an
   unsent match is a small failure, not an achievement.

   THREE STATES, NOT TWO, IN THE MATCHES COLUMN
   ---------------------------------------------
   `—` for owners, `none fit` when the register holds nothing for the brief,
   `all sent` when it does and everything has gone. The handoff records the
   build where those collapsed into two and the page said three contradictory
   things about Paul Brandt at once.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* --------------------------------------------------- rail panel — the cold --- */

.clcold { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.clcold__tag { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.clcold__tag--clear { color: var(--good); }
.clcold__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.clcold__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.clcold__unit { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }

.clbars { display: flex; gap: 2px; height: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.clbar { display: block; height: 6px; background: rgba(var(--ink-rgb), 0.24); }
.clbar--hot { background: var(--good); }
.clbar--warm { background: var(--accent); }
.clbar--cold { background: var(--warn); }

.clkeys { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.clkey { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.5); }
.clkey__label { display: flex; align-items: center; gap: 7px; }
.clkey__chip { display: block; flex: 0 0 10px; width: 10px; height: 6px; background: rgba(var(--ink-rgb), 0.24); }
.clkey__chip--hot { background: var(--good); }
.clkey__chip--warm { background: var(--accent); }
.clkey__chip--cold { background: var(--warn); }
.clkey__n { color: rgba(var(--ink-rgb), 0.5); }
.clkey__n--hot { color: var(--good); }
.clkey__n--warm { color: var(--accent); }
.clkey__n--cold { color: var(--warn); }

.clcold__note {
  display: block;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.25);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.5);
}

/* ------------------------------------------------ rail panel — the sources --- */

.clsources { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.clsources__list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.clsource__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.clsource__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.clwindow { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.clsource__n { font-size: 12px; line-height: normal; color: rgba(var(--ink-rgb), 0.6); }
.clsource__n--dim { color: rgba(var(--ink-rgb), 0.5); }
.clsource__n--hot { color: var(--good); }
.clsource__n--warm { color: var(--accent); }
.clsource__track { display: block; height: 4px; margin-top: 6px; background: rgba(var(--ink-rgb), 0.12); }
.clsource__fill { display: block; height: 4px; background: rgba(var(--ink-rgb), 0.3); }
.clsource__fill--hot { background: var(--good); }
.clsource__fill--warm { background: var(--accent); }
.clsource__fill--dim { background: rgba(var(--ink-rgb), 0.18); }

.clsources__foot {
  display: block;
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------------- §01 the book --- */

.clbook {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(320px, 1fr) minmax(0, 300px);
  gap: 1px;
  min-height: 520px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: none;
  background: rgba(var(--ink-rgb), 0.16);
}

/* --- the picker --- */

.clpicker { display: flex; flex-direction: column; min-width: 0; background: var(--panel-tile); }
.clpicker__list { margin: 0; padding: 0; list-style: none; }

.clpick {
  display: block;
  width: 100%;
  padding: 14px 17px;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.clpick:hover { background: rgba(var(--accent-rgb), 0.05); }
.clpick:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.clpick.is-on { border-left-color: var(--accent); background: var(--panel-picked); }
.clpick__top { display: flex; align-items: center; gap: 11px; }

.clmono {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.6);
  object-fit: cover;
}

.clpick.is-on .clmono { border-color: var(--accent); color: var(--accent); }
.clpick__id { flex: 1; min-width: 0; }
.clpick__name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* The temperature dot, in the list and again in the table. */
.cldot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.3); }
.cldot--hot { background: var(--good); }
.cldot--warm { background: var(--accent); }
.cldot--cold { background: var(--warn); }
.clpick__name { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.clpick__kind { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.clpick__foot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 9px; }
.cllast { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.cllast--hot { color: var(--good); }
.cllast--warm { color: var(--accent); }
.cllast--cold { color: var(--warn); }
.clpick__fee { font-family: var(--serif); font-size: 14px; color: rgba(var(--ink-rgb), 0.6); }
.clpick.is-on .clpick__fee { color: var(--accent); }

.clpicker__foot {
  display: block;
  margin: 0;
  padding: 14px 17px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* --- the relationship --- */
/* Every client's panel is printed and all but one hidden, so selecting one is
   a `hidden` flip and no brief can be shown against the wrong timeline. */

.clperson { display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 26px; background: var(--panel); }
.clpane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.clpane[hidden] { display: none; }
.clpane__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.clpane__who { min-width: 0; }
.clpane__name { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.clpane__meta { display: block; margin: 6px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }

.cltag {
  padding: 5px 11px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.72);
}

.cltag--hot { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.cltag--warm { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.cltag--cold { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
/* The brief is prose, not a filter summary: what this person is actually like. */
.clbrief { display: block; margin: 14px 0 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.66); text-wrap: pretty; }

.cltime { display: block; margin-top: 22px; }
.cltime__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.cllabel { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.clgap { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.clgap--hot { color: var(--good); }
.clgap--warm { color: var(--accent); }
.clgap--cold { color: var(--warn); }

/* The rule runs behind the dots so an empty month reads as a gap in a line
   rather than as a missing element. */
.clchart { position: relative; display: block; height: 46px; margin-top: 16px; }
.clchart__rule { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: rgba(var(--ink-rgb), 0.18); }
.clchart__dots { position: relative; display: flex; align-items: center; height: 46px; margin: 0; padding: 0; list-style: none; }
.clchart__dots > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.clmonth {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.clmonth:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cldotm { border: 1px solid rgba(var(--ink-rgb), 0.28); border-radius: 50%; background: transparent; transition: background 0.2s ease, border-color 0.2s ease; }
/* Older months are dimmer gold; the last three are full strength, because
   recent contact is the thing being judged. */
.cldotm--on { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.45); }
.cldotm--near { border-color: var(--accent); background: var(--accent); }
.clmonth:hover .cldotm,
.clmonth:focus-visible .cldotm { border-color: var(--accent-hover); }
.clmonth:hover .cldotm--on,
.clmonth:hover .cldotm--near { background: var(--accent-hover); }
.clmonths { display: flex; align-items: center; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; }
.clmonths > li { flex: 1; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.clmonths > li.is-on { color: var(--accent); }
.cltime__note { display: block; margin: 13px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }

.clfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.clfact { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 14px 15px; background: var(--panel-callout); }
.clfact__label { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.clfact__value { font-family: var(--serif); font-size: 19px; line-height: 1; color: var(--ink); }
.clfact__value--dim { color: rgba(var(--ink-rgb), 0.35); }
/* Where they came from is a fact, not a score: it sits below the ink the
   numbers get, and only goes green when the answer is repeat or referral. */
.clfact__value--soft { color: rgba(var(--ink-rgb), 0.72); }
.clfact__value--accent { color: var(--accent); }
.clfact__value--good { color: var(--good); }

/* The one paragraph on the page that is an instruction, coloured by the
   client's own temperature. */
.clmove {
  display: block;
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-left: 2px solid rgba(var(--ink-rgb), 0.4);
  background: var(--panel-callout);
}

.clmove--hot { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.clmove--warm { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.clmove--cold { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.clmove__title { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.clmove--hot .clmove__title { color: var(--good); }
.clmove--warm .clmove__title { color: var(--accent); }
.clmove--cold .clmove__title { color: var(--warn); }
.clmove__body { display: block; margin-top: 9px; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* --- what you have for them --- */

.clhold { display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 24px; background: var(--panel-tile); }
/* One pane per client, all printed, all but one hidden — the same doctrine as
   the relationship column beside it. */
.clholdpane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.clholdpane[hidden] { display: none; }
.clhold__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.cllabel--accent { color: var(--accent); }
.clhold__count { font-size: 12px; line-height: normal; color: var(--warn); }
.clhold__count--sent { color: var(--good); }
.clhold__count--none { color: rgba(var(--ink-rgb), 0.5); }
.clhold__count--na { color: rgba(var(--ink-rgb), 0.35); }
.clhold__intro { display: block; margin: 9px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

.clmatches {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 15px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.clmatch { display: block; padding: 13px 15px; background: var(--panel-callout); }
.clmatch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.clmatch__title { min-width: 0; font-size: 12px; color: var(--ink); }
.clmatch__price { font-family: var(--serif); font-size: 15px; white-space: nowrap; color: var(--accent); }
.clmatch__meta { display: block; margin: 4px 0 0; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.45); }
.clmatch__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; }
.clfit { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.clfit--hot { color: var(--good); }
.clfit--warm { color: var(--accent); }
.clfit--cold { color: var(--warn); }

.clnone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  margin: 15px 0 0;
  padding: 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.45);
}

.clnone[hidden],
.clmatches[hidden] { display: none; }

.clhold__foot {
  display: block;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.clacts { display: flex; gap: 9px; margin: 13px 0 0; }

.clcta {
  flex: 1;
  padding: 12px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.clcta:hover { border-color: var(--accent); color: var(--accent); }
.clcta--go { border: none; background: var(--accent); color: var(--on-accent); }
.clcta--go:hover { background: var(--accent-hover); color: var(--on-accent); }

/* -------------------------------------------------------- §02 the register --- */

.cltabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.cltab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cltab:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.cltab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cltab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.cltab__n { font-size: 12px; line-height: normal; opacity: 0.6; }

.cltable { width: 100%; border-collapse: collapse; }

.cltable th,
.cltable td { padding: 14px 20px; text-align: left; vertical-align: middle; }

.cltable thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.cltable thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.cltable tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); border-left: 2px solid transparent; transition: background 0.2s ease; }
/* The last **visible** row closes the table with a heavier hairline than the
   ones between — which is why it is a class and not `:last-child`: filtering
   hides rows, and the closing line has to move with them. */
.cltable tbody tr.is-last { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.cltable tbody tr[hidden] { display: none; }
.cltable tbody tr:hover { background: rgba(var(--accent-rgb), 0.03); }
.cltable tbody tr.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.cltable th[scope="row"] { font-weight: 400; }
.clcell { display: block; width: 100%; padding: 0; border: none; background: transparent; font-family: inherit; text-align: left; color: inherit; cursor: pointer; }
.clcell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clcell__name { display: flex; align-items: center; gap: 8px; }
.clrow__name { font-size: 13px; color: var(--ink); }
.clrow__kind { display: block; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }
.clcol--want { width: 150px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.clcol--last { width: 130px; font-size: 12px; font-weight: 300; }
.clcol--worth { width: 122px; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.clcol--matches { width: 120px; font-size: 12px; }
/* Unsent matches are rust, not green: an unsent match is a small failure. */
.clmatchcell { color: var(--warn); }
.clmatchcell--sent { color: var(--good); }
.clmatchcell--none { color: rgba(var(--ink-rgb), 0.5); }
.clmatchcell--na { color: rgba(var(--ink-rgb), 0.35); }
.clcol--move { width: 156px; text-align: right; font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.clcol--move.clmove--hotcell { color: var(--good); }
.clcol--move.clmove--warmcell { color: var(--accent); }
.clcol--move.clmove--coldcell { color: var(--warn); }
.cltable thead .clcol--move { text-align: right; }

.clempty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--ink-rgb), 0.45);
}

.clempty[hidden] { display: none; }

.cltable__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ---------------------------------------------------------- §03 the repeat --- */

.clpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: stretch; }
.clrepeat { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.clrepeat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.clrepeat__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); }
.clrepeat__unit { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.clmix { display: flex; gap: 2px; height: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.clmix__seg { display: block; height: 10px; background: rgba(var(--ink-rgb), 0.24); }
.clmix__seg--accent { background: var(--accent); }
.clmix__seg--good { background: var(--good); }
.clmixlist { display: flex; flex-direction: column; gap: 11px; margin: 16px 0 0; padding: 0; list-style: none; }
.clmixrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) 92px; gap: 11px; align-items: baseline; }
.clmixrow__chip { width: 12px; height: 7px; background: rgba(var(--ink-rgb), 0.24); }
.clmixrow__chip--accent { background: var(--accent); }
.clmixrow__chip--good { background: var(--good); }
.clmixrow__label { display: block; font-size: 12px; color: var(--ink); }
.clmixrow__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.42); }
.clmixrow__value { font-family: var(--serif); font-size: 17px; text-align: right; color: rgba(var(--ink-rgb), 0.6); }
.clmixrow__value--accent { color: var(--accent); }
.clmixrow__value--good { color: var(--good); }

.clrepeat__note {
  display: block;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ------------------------------------------------------------ §04 the calls --- */

.clcalls { margin: 0; padding: 0; list-style: none; }
.clcall { display: grid; grid-template-columns: minmax(0, 1fr) 150px 104px; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 2px solid transparent; }
.clcall--cold { border-left-color: var(--warn); }
.clcall--done { border-left-color: var(--good); }
.clcall__name { display: block; font-size: 13px; color: var(--ink); }
.clcall__why { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }
.clwhen { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.clwhen--hot { color: var(--good); }
.clwhen--warm { color: var(--accent); }
.clwhen--cold { color: var(--warn); }
.clwhen--done { color: var(--good); }
.clend { text-align: right; }

.clact {
  padding: 9px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.clact:hover { border-color: var(--accent); color: var(--accent); }
.clact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Only the cold ones are filled: a page where every button shouts says nothing. */
.clact--urgent { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.clact--urgent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.clact--done,
.clact--done:hover { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }
/* Sending a file the client has not seen is the one action on this page that
   is always worth taking, so the button is gold until it has been. */
.clact--send { padding: 7px 12px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.clact--send:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.clact--send.clact--done,
.clact--send.clact--done:hover { border-color: rgba(var(--good-rgb), 0.5); background: transparent; color: var(--good); }

.clfoot {
  display: block;
  margin: 0;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.42);
}

/* --------------------------------------------------------- printed lengths --- */
/* Six clients: every share of the book the three temperatures can reach. */

.clw--0 { width: 0; }
.clw--10 { width: 10%; }
.clw--17 { width: 17%; }
.clw--20 { width: 20%; }
.clw--27 { width: 27%; }
.clw--31 { width: 31%; }
.clw--32 { width: 32%; }
.clw--33 { width: 33%; }
.clw--39 { width: 39%; }
.clw--41 { width: 41%; }
.clw--50 { width: 50%; }
.clw--67 { width: 67%; }
.clw--83 { width: 83%; }
.clw--100 { width: 100%; }

/* Dot diameters: 5px when a month is empty, 6 + 2 per exchange to a ceiling
   of 18 — beyond that the dots collide with their neighbours. */
.cld--5 { width: 5px; height: 5px; }
.cld--8 { width: 8px; height: 8px; }
.cld--10 { width: 10px; height: 10px; }
.cld--12 { width: 12px; height: 12px; }
.cld--14 { width: 14px; height: 14px; }
.cld--16 { width: 16px; height: 16px; }
.cld--18 { width: 18px; height: 18px; }

/* ------------------------------------------------------------- responsive --- */

/* At 1180 the main column is 841px and the drawing's three minima want 910.
   The middle column keeps the width — it holds the twelve-month line, which is
   the argument — and the two side columns give way. The facts drop to two
   across, because `Viewings with you` at 0.2em needs 74px and a quarter of
   316px is 49. Above 1340 nothing here applies and the page is as drawn. */
@media (max-width: 1339px) {
  .clbook { grid-template-columns: minmax(0, 214px) minmax(368px, 1fr) minmax(0, 256px); }
  .clperson { padding: 22px 20px 22px; }
  .clhold { padding: 20px 18px 22px; }
  .clfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1179px) {
  /* The client list becomes a scroller across the top; the relationship and
     what you hold for them stay side by side. */
  .clbook { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); min-height: 0; }
  .clpicker { grid-column: 1 / -1; }
  .clpicker__list { display: flex; overflow-x: auto; }
  .clpicker__list > li { flex: 0 0 236px; }
  .clpick { height: 100%; border-bottom: none; border-left: none; border-top: 2px solid transparent; }
  .clpick.is-on { border-top-color: var(--accent); border-left-color: transparent; }
  .clpicker__foot { border-top: none; border-left: 1px solid rgba(var(--ink-rgb), 0.14); }
  .clpair { grid-template-columns: minmax(0, 1fr); }
  .clfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Drop `Looking for`: the brief above says it in full. */
  .cltable .clcol--want { display: none; }
  .clcol--last { width: 108px; }
  .clcol--worth { width: 104px; }
  .clcol--matches { width: 96px; }
  .clcol--move { width: 132px; }
}

@media (max-width: 767px) {
  .clbook { grid-template-columns: minmax(0, 1fr); }
  .clpicker__list > li { flex: 0 0 78vw; }
  .clperson { padding: 20px 18px 22px; }
  .clhold { padding: 20px 18px 22px; }
  .clfacts { grid-template-columns: minmax(0, 1fr); }
  .clacts { flex-direction: column; }
  .clrepeat { padding: 18px 18px 20px; }
  /* The twelve dots stay: they are the argument. The labels give way instead —
     tracking first, then the gaps between them. Twelve `Sep`s at 12px need
     264px and a 375px phone leaves 281. */
  .clmonths { gap: 0; }
  .clmonths > li { letter-spacing: normal; }
  .clmixrow { grid-template-columns: 14px minmax(0, 1fr); row-gap: 4px; }
  .clmixrow__value { grid-column: 2; text-align: left; }
  /* Each client becomes a card: name and next move on the first line. */
  .cltable thead { display: none; }
  .cltable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; row-gap: 6px; padding: 12px 16px; }
  .cltable th,
  .cltable td { padding: 0; }
  .cltable th[scope="row"] { grid-column: 1; grid-row: 1; }
  .cltable .clcol--move { grid-column: 2; grid-row: 1; width: auto; }
  .cltable .clcol--last { grid-column: 1; grid-row: 2; width: auto; }
  .cltable .clcol--worth { grid-column: 2; grid-row: 2; width: auto; text-align: right; }
  .cltable .clcol--matches { grid-column: 1 / -1; grid-row: 3; width: auto; }
  .cltable__foot { flex-wrap: wrap; }
  .clcall { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 14px 16px; }
  .clcall .clend { grid-column: 1 / -1; text-align: left; }
  .clcall .clact { width: 100%; }
}

@media (hover: none) {
  .cltab,
  .clpick,
  .clact,
  .clcta,
  .clcell { min-height: 44px; }
  .clmonth { min-width: 24px; }
  .cltable__foot .aglink { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cltab,
  .clpick,
  .clact,
  .clcta,
  .cldotm,
  .cltable tbody tr { transition: none; }
}

/* ==========================================================================
   92. Agent desk — Performance, prefix `pe`
   --------------------------------------------------------------------------
   Not a trophy cabinet. The premise every section obeys:

       A performance page that only flatters is a page nobody opens twice.
       This one is built to find the thing the agent is doing wrong and say it
       in a sentence they cannot argue with.

   That sentence is §06, and it is **selected, not written**: four of the
   agent's metrics are compared against the desk median, the one with the
   largest **proportional** shortfall wins, and its template is rendered with
   the agent's own live numbers. Change the data and the page picks a different
   villain. Proportional, because a metric measured in days would otherwise
   always win.

   `lower` IS PER METRIC, AND IT IS THE WHOLE TRICK
   -------------------------------------------------
   Fewer days is better; a smaller asking-to-signed gap is better as a
   *negative* number, so its `lower` is false; a smaller valuation miss is
   better; a higher renewal rate is better. Get one backwards and the page
   congratulates the agent on their worst number.

   EVERY COMPARISON IS AGAINST THE DESK, NEVER A TARGET
   -----------------------------------------------------
   Targets flatter; peers do not. The one exception is the year bar in the
   rail, where the target is the contract.

   THE UNCOMFORTABLE SECTION IS THE BIGGEST ONE
   ---------------------------------------------
   §03 puts the agent's own valuation next to the price the home actually
   signed at, file by file, with the miss in the right-hand column. Its mean
   feeds §05's third metric and §06's paragraph, so the table, the comparison
   and the verdict cannot disagree.

   CORRELATION IS SHOWN, NOT ASSERTED
   -----------------------------------
   §04 plots days on market against discount and states the slope in months,
   because agents plan in months. One decimal — anything finer implies a
   confidence eight points do not support.

   Shell, rail, stat tiles and section rules come from section 84.
   ========================================================================== */

/* --------------------------------------------------- rail panel — the year --- */

.pesigned { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.pepace { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.pesigned__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.pesigned__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }

/* Signed, then in play, then the tick where the year's pace ought to be. */
.petrack { position: relative; display: block; height: 8px; margin-top: 14px; background: rgba(var(--ink-rgb), 0.12); }
.petrack__signed { position: absolute; left: 0; top: 0; height: 8px; background: var(--accent); }
.petrack__play { position: absolute; top: 0; height: 8px; background: rgba(var(--accent-rgb), 0.3); }
.petrack__mark { position: absolute; top: -4px; width: 1px; height: 16px; background: rgba(var(--ink-rgb), 0.6); }

.pekeys { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 11px 0 0; padding: 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); list-style: none; }
.pekey { display: flex; align-items: center; gap: 6px; }
.pekey__chip { display: block; flex: 0 0 12px; width: 12px; height: 6px; background: var(--accent); }
.pekey__chip--play { background: rgba(var(--accent-rgb), 0.3); }
.pekey__tick { display: block; flex: 0 0 1px; width: 1px; height: 11px; background: rgba(var(--ink-rgb), 0.6); }
.pekey__rule { display: block; flex: 0 0 14px; width: 14px; height: 1px; background: rgba(var(--ink-rgb), 0.4); }

.pesigned__note {
  display: block;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.25);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.5);
}

/* --------------------------------------------------- rail panel — the desk --- */

.pedeskmini { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.perank { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.perank--clear { color: var(--good); }
.peminis { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }
.pemini__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pemini__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.pemini__value { font-size: 12px; line-height: normal; color: var(--warn); }
.pemini__value--ahead { color: var(--good); }
.pemini__track { position: relative; display: block; height: 4px; margin-top: 6px; background: rgba(var(--ink-rgb), 0.12); }
.pemini__fill { display: block; height: 4px; background: var(--warn); }
.pemini__fill--ahead { background: var(--good); }
/* The pale mark is the desk median — the only benchmark on the page. */
.pemini__mark { position: absolute; top: -3px; width: 1px; height: 10px; background: rgba(var(--ink-rgb), 0.55); }

.pedeskmini__foot {
  display: block;
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ------------------------------------------------------------- §01 the year --- */

.pelegend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); list-style: none; }
.peyear { display: block; padding: 24px 26px 22px; }
.pechart { position: relative; display: block; height: 176px; }
/* The target rule crosses the chart rather than sitting on its top edge —
   `chartTop = max(tallest month, monthly target × 1.15)` guarantees it. */
.pechart__target { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--ink-rgb), 0.4); }
.pebars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 176px; margin: 0; padding: 0; list-style: none; }
.pebars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.pemonth {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pemonth:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pemonth.is-on { background: rgba(var(--accent-rgb), 0.08); }
.pemonth__play { display: block; width: 100%; background: rgba(var(--accent-rgb), 0.3); }
/* A month that cleared the target is full gold; one that did not is dimmed,
   so the chart reads before the labels do. */
.pemonth__bar { display: block; width: 100%; background: transparent; transition: background 0.2s ease; }
.pemonth__bar--hit { background: var(--accent); }
.pemonth__bar--miss { background: rgba(var(--accent-rgb), 0.65); }
.pemonth.is-on .pemonth__bar--hit,
.pemonth.is-on .pemonth__bar--miss { background: var(--accent-hover); }
.pemonths { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.pemonths > li { flex: 1; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }
.pemonths > li.is-on { color: var(--accent); }

.peread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.peread__note { font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.6); }
.peread__fig { display: flex; align-items: baseline; gap: 10px; }
.peread__value { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }
.peread__value--hit { color: var(--good); }
.peread__value--miss { color: var(--warn); }
.peread__value--play { color: var(--accent); }
.peread__meta { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }

/* ---------------------------------------------------------- §02 the sources --- */

.pesources { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.pemix { display: flex; gap: 2px; height: 10px; margin: 0; padding: 0; list-style: none; }
.pemix__seg { display: block; background: rgba(var(--ink-rgb), 0.24); }
.pemix__seg--good { background: var(--good); }
.pemix__seg--accent { background: var(--accent); }
.pemix__seg--pale { background: rgba(var(--accent-rgb), 0.4); }
.pesrclist { display: flex; flex-direction: column; margin: 16px 0 0; padding: 0; list-style: none; }

.pesrc {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 92px 70px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pesrclist > li:last-child .pesrc { border-bottom: none; }
.pesrc:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pesrc.is-on { background: rgba(var(--accent-rgb), 0.06); }
.pesrc__chip { width: 10px; height: 10px; background: rgba(var(--ink-rgb), 0.24); }
.pesrc__chip--good { background: var(--good); }
.pesrc__chip--accent { background: var(--accent); }
.pesrc__chip--pale { background: rgba(var(--accent-rgb), 0.4); }
.pesrc__label { font-size: 13px; color: var(--ink); }
.pesrc__value { font-family: var(--serif); font-size: 17px; text-align: right; color: var(--ink); }
.pesrc.is-on .pesrc__value { color: var(--accent); }
.pesrc__share { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-align: right; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }

.pesources__note {
  display: block;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.55);
}

/* ------------------------------------------------------ §03 the valuations --- */

.pevaltag { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); }
.pevaltag--good { color: var(--good); }
.peval { width: 100%; border-collapse: collapse; }

.peval th,
.peval td { padding: 13px 18px; text-align: right; vertical-align: middle; }

.peval thead tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.2); }

.peval thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.peval tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.peval tbody tr:last-child { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
.peval th[scope="row"] { min-width: 0; font-weight: 400; text-align: left; }
.peval thead th:first-child { text-align: left; }
.peval__file { display: block; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.peval__days { display: block; margin-top: 3px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: rgba(var(--ink-rgb), 0.35); }
.pecol--said,
.pecol--listed { width: 94px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.pecol--signed { width: 98px; font-family: var(--serif); font-size: 16px; color: var(--ink); }
/* Out by: green inside 1.5%, gold to 4%, rust beyond. */
.pecol--off { width: 82px; font-size: 12px; line-height: normal; letter-spacing: 0.06em; color: var(--good); }
.pecol--off.peoff--accent { color: var(--accent); }
.pecol--off.peoff--warn { color: var(--warn); }

.peval__foot {
  display: block;
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.55);
}

/* --------------------------------------------------------- §04 the scatter --- */

.pescat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: stretch; padding: 24px 26px 22px; }
.peplot { position: relative; display: block; min-width: 0; }
/* Asking price, drawn: everything under this line is money given away. */
.peplot__zero { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--ink-rgb), 0.28); }
.pedots { position: relative; display: flex; align-items: stretch; gap: 8px; height: 210px; margin: 0; padding: 0; list-style: none; }
.pedots > li { display: flex; flex: 1; min-width: 0; }

.pedot {
  position: relative;
  flex: 1;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pedot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pedot.is-on { background: rgba(var(--accent-rgb), 0.06); }
/* The dot is sized by price, so a big giveaway on a big file reads as big. */
.pedot__mark { position: absolute; left: 50%; border: 1px solid transparent; border-radius: 50%; background: var(--accent); transition: background 0.2s ease, border-color 0.2s ease; }
.pedot__mark--good { background: var(--good); }
.pedot__mark--warn { background: var(--warn); }
.pedot.is-on .pedot__mark { border-color: var(--accent-hover); background: var(--accent-hover); }
.pedotlabels { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pedotlabels > li { flex: 1; text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.04em; color: rgba(var(--ink-rgb), 0.35); }
.pedotlabels > li.is-on { color: var(--accent); }
.peaxis { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.38); }

.pecallout { display: flex; flex-direction: column; padding-left: 30px; border-left: 1px solid rgba(var(--ink-rgb), 0.14); }
/* One callout per file, all printed, all but one hidden — hovering a dot is a
   `hidden` flip, so no property can be read against another's numbers. */
.pepane { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pepane[hidden] { display: none; }
.pecallout__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.pecallout__row { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; }
.pecallout__value { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent); }
.pecallout__value--good { color: var(--good); }
.pecallout__value--warn { color: var(--warn); }
.pecallout__meta { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.pefacts { display: flex; flex-direction: column; margin: 18px 0 0; padding: 0; list-style: none; }
.pefact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.pefacts > li:last-child .pefact { border-bottom: none; }
.pefact__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.pefact__value { font-size: 13px; color: var(--ink); }
.pefact__value--good { color: var(--good); }
.pefact__value--warn { color: var(--warn); }
.pecallout__note { display: block; margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }

/* ------------------------------------------------------------ §05 the desk --- */

.pepair { display: grid; grid-template-columns: 1.2fr minmax(0, 1fr); gap: clamp(20px, 2.2vw, 30px); margin-top: clamp(26px, 3.4vh, 38px); align-items: stretch; }
.pedesk { width: 100%; border-collapse: collapse; }
.pedesk th,
.pedesk td { padding: 14px 20px; text-align: right; vertical-align: middle; }
.pedesk tbody tr { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.pedesk th[scope="row"] { min-width: 0; font-weight: 400; text-align: left; }
.pedesk__label { display: block; font-size: 13px; color: var(--ink); }
.pedesk__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.4); }
.pecol--you { width: 100px; font-family: var(--serif); font-size: 17px; color: var(--warn); }
.pecol--you.peyou--ahead { color: var(--good); }
.pecol--them { width: 100px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.pecol--verdict { width: 112px; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.pecol--verdict.peverdict--ahead { color: var(--good); }

/* The column key sits at the foot, where it belongs on a table nobody has to
   scan twice. */
.pedesk__key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 20px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

/* -------------------------------------------------------- §06 the one thing --- */

.pefix { display: flex; flex: 1; flex-direction: column; border: 1px solid var(--accent); border-top: none; background: rgba(var(--accent-rgb), 0.1); padding: 22px 24px 24px; }
.pefix__title { display: block; margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.15; color: var(--ink); }
.pefix__body { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(var(--ink-rgb), 0.66); }

.pefix__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
  list-style: none;
}

.pefix__stat { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 15px 16px; background: var(--panel-callout); }
.pefix__statlabel { font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.pefix__statvalue { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--warn); }
.pefix__statnote { font-size: 12px; font-weight: 300; line-height: 1.45; color: rgba(var(--ink-rgb), 0.42); }
.pefix__foot { display: block; margin: 18px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }

.pefix__cta {
  display: block;
  margin-top: 14px;
  padding: 13px 0;
  background: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-accent);
  transition: background 0.2s ease;
}

.pefix__cta:hover { background: var(--accent-hover); }

/* --------------------------------------------------------- printed lengths --- */
/* Every one of these is asserted by the builder against the figure it draws,
   so a data edit that has no rule fails the build instead of the page. */

.pew--15 { width: 15%; }
.pew--16 { width: 16%; }
.pew--25 { width: 25%; }
.pew--26 { width: 26%; }
.pew--28 { width: 28%; }
.pew--33 { width: 33%; }
.pew--47 { width: 47%; }
.pew--56 { width: 56%; }
.pew--60 { width: 60%; }
.pew--66 { width: 66%; }
.pew--70 { width: 70%; }
.pew--80 { width: 80%; }

.pel--56 { left: 56%; }
.pel--60 { left: 60%; }
.pel--47 { left: 47%; }
.pel--80 { left: 80%; }

.peh--0 { height: 0; }
.peh--23 { height: 23%; }
.peh--27 { height: 27%; }
.peh--34 { height: 34%; }
.peh--41 { height: 41%; }
.peh--52 { height: 52%; }
.peh--59 { height: 59%; }
.peh--65 { height: 65%; }
.peh--72 { height: 72%; }
.peh--77 { height: 77%; }
.peh--80 { height: 80%; }

.peb--66 { bottom: 66%; }

.pet--15 { top: 15%; }
.pet--25 { top: 25%; }
.pet--30 { top: 30%; }
.pet--31 { top: 31%; }
.pet--43 { top: 43%; }
.pet--45 { top: 45%; }
.pet--59 { top: 59%; }
.pet--95 { top: 95%; }

.ped--18 { width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; }
.ped--19 { width: 19px; height: 19px; margin-left: -9.5px; margin-top: -9.5px; }
.ped--20 { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; }
.ped--21 { width: 21px; height: 21px; margin-left: -10.5px; margin-top: -10.5px; }
.ped--23 { width: 23px; height: 23px; margin-left: -11.5px; margin-top: -11.5px; }
.ped--24 { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1339px) {
  .pescat { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
  .pecallout { padding-left: 22px; }
}

@media (max-width: 1179px) {
  .pepair { grid-template-columns: minmax(0, 1fr); }
  /* Listed at is the one column the brief already implies. */
  .peval .pecol--listed { display: none; }
  .pecol--said { width: 84px; }
  .pecol--signed { width: 88px; }
  .pecol--off { width: 72px; }
  .pecol--you,
  .pecol--them { width: 88px; }
  .pecol--verdict { width: 96px; }
}

@media (max-width: 767px) {
  .peyear { padding: 20px 16px 18px; }
  /* Twelve bars stay — the year is the point. The gaps between them give way
     first, then every other label. */
  .pebars { gap: 3px; }
  /* The row clips the two pixels of blank ink the end labels spill. */
  .pemonths { gap: 3px; overflow: hidden; }
  /* Twelve labels want 288px and a 285px phone has 252 after the gaps. They
     shrink to their share of the row and the ink overflows into the
     neighbour's box — which is safe, because every other one is blank. */
  .pemonths > li { min-width: 0; letter-spacing: normal; }
  .pemonths > li:nth-child(even) { color: transparent; }
  .peread { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .pesources { padding: 18px 16px 20px; }
  .pesrc { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 4px; }
  .pesrc__share { grid-column: 2 / -1; text-align: left; }
  /* Each valuation becomes a card: file and miss on the first line. */
  .peval thead { display: none; }
  .peval tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 12px; row-gap: 6px; padding: 12px 16px; }
  .peval th,
  .peval td { padding: 0; }
  .peval th[scope="row"] { grid-column: 1; grid-row: 1; }
  .peval .pecol--off { grid-column: 2; grid-row: 1; width: auto; }
  .peval .pecol--said { grid-column: 1; grid-row: 2; width: auto; text-align: left; }
  .peval .pecol--signed { grid-column: 2; grid-row: 2; width: auto; }
  /* Keep the scatter: it is the argument. */
  .pescat { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 16px 18px; }
  .pecallout { padding-left: 0; padding-top: 18px; border-left: none; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
  .pedots { gap: 4px; }
  .pedotlabels { gap: 4px; }
  .pedotlabels > li:nth-child(even) { color: transparent; }
  .peaxis { letter-spacing: 0.06em; }
  /* One metric per row. */
  .pedesk tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 12px 16px; }
  .pedesk th,
  .pedesk td { padding: 0; }
  .pedesk th[scope="row"] { grid-column: 1 / -1; }
  .pecol--you { grid-column: 1; width: auto; text-align: left; }
  .pecol--them { grid-column: 1; width: auto; text-align: left; }
  .pecol--verdict { grid-column: 2; grid-row: 2 / 4; width: auto; align-self: center; }
  .pefix { padding: 20px 18px 22px; }
  .pefix__stats { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) {
  .pesrc,
  .pefix__cta { min-height: 44px; }
}

/* A twelve-bar year and an eight-point scatter cannot give every mark a
   44px target on a 285px phone without lying about the shape. Above the
   mobile breakpoint there is room, and below it the reading is the point. */
@media (hover: none) and (min-width: 768px) {
  .pemonth,
  .pedot { min-width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pemonth,
  .pemonth__bar,
  .pesrc,
  .pedot,
  .pedot__mark,
  .pefix__cta { transition: none; }
}


/* ==========================================================================
   93. Agent desk — Desk settings, prefix `ds`
   --------------------------------------------------------------------------
   A settings screen where **every setting shows what it costs**. The premise
   every section obeys:

       Nothing on this page is a preference. Each control is a commitment to
       somebody — a buyer, an owner, or the desk — and the panel beside it says
       what happens when you make it.

   THE PROMISE IS TESTED AGAINST THE AGENT'S OWN RECORD
   ------------------------------------------------------
   Move the slider and the page runs the last forty-two reply times against the
   new promise: the histogram recolours, the kept percentage follows, and the
   verdict changes its mind. Fifteen minutes turns the panel rust and says so.
   The comparison is never against a desk policy — the page's whole argument is
   that a promise is only worth what the agent's own record can support.

   THE AVAILABILITY GRID NAMES ITS OWN COST
   -----------------------------------------
   Closing blocks produces an estimate of viewing requests refused per month,
   so the agent sees the trade rather than just a grid of squares. The copy
   says it is a model; it is there to make the trade visible, not to be exact.

   §03 ARGUES WITH §01
   -------------------
   Turn every channel off for `A new enquiry` and the notification panel turns
   rust: *you have promised an answer in an hour and asked us not to tell you
   when one arrives.* It is the only place on the desk where one section judges
   another's settings, and it is the most common way an agent breaks their own
   promise.

   COMPOSITE KEYS, NEVER INDICES
   -----------------------------
   `Thu:eve`, `enq:sms`. Both grids are data-driven and will be reordered; an
   index-keyed map silently reassigns every agent's settings when a row moves.

   Shell, rail and section rules come from section 84.
   ========================================================================== */

/* ------------------------------------------------- rail panel — the promise --- */

.dspromise { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 18px 20px 20px; }
.dstag { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.dstag--kept { color: var(--good); }
.dstag--tight { color: var(--accent); }
.dstag--broken { color: var(--warn); }
.dspromise__row { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 0; }
.dspromise__figure { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); }
.dspromise__unit { font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.dsbar { display: block; height: 5px; margin-top: 13px; background: rgba(var(--ink-rgb), 0.12); }
.dsbar__fill { display: block; height: 5px; background: rgba(var(--ink-rgb), 0.4); }
.dsbar__fill--kept { background: var(--good); }
.dsbar__fill--tight { background: var(--accent); }
.dsbar__fill--broken { background: var(--warn); }
.dspromise__note { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(var(--ink-rgb), 0.5); }

/* ------------------------------------------------- rail panel — the summary --- */

.dssummary { border: 1px solid rgba(var(--ink-rgb), 0.2); background: var(--panel); padding: 18px 20px 20px; }
.dssums { display: flex; flex-direction: column; gap: 11px; margin: 13px 0 0; padding: 0; list-style: none; }
.dssum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dssum__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.dssum__value { font-size: 12px; line-height: normal; text-align: right; color: var(--ink); }
.dssum__value--accent { color: var(--accent); }
.dssum__value--good { color: var(--good); }
.dssum__value--warn { color: var(--warn); }

.dssummary__foot {
  display: block;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.42);
}

/* ---------------------------------------------------------- §01 the promise --- */

.dsdesk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1px; border: 1px solid rgba(var(--ink-rgb), 0.2); border-top: none; background: rgba(var(--ink-rgb), 0.16); }
.dsslider { display: block; padding: 26px 28px 28px; background: var(--panel); min-width: 0; }
.dsslider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; }
.dsslider__figure { font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }
.dskept { font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.dskept--kept { color: var(--good); }
.dskept--tight { color: var(--accent); }
.dskept--broken { color: var(--warn); }
.dsrange { width: 100%; margin-top: 18px; accent-color: var(--accent); cursor: pointer; }
.dsrange:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dsends { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

.dshist { display: block; margin-top: 24px; }
.dshist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.dslabel { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.dshist__count { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.dsbars { display: flex; align-items: flex-end; gap: 2px; height: 88px; margin: 12px 0 0; padding: 0; list-style: none; }
.dsbars > li { display: flex; flex: 1; min-width: 0; height: 100%; }

.dsreply {
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.dsreply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Green if the reply would have met the promise, rust if not — the whole
   chart repaints when the slider moves. */
.dsreply__bar { display: block; width: 100%; background: var(--good); transition: background 0.2s ease; }
.dsreply__bar--broke { background: var(--warn); }
.dsreply.is-on .dsreply__bar { background: var(--accent-hover); }
.dshist__axis { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-size: 12px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.35); }

.dsverdict {
  display: block;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-left: 2px solid rgba(var(--ink-rgb), 0.4);
  background: var(--panel-callout);
}

.dsverdict--good { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.dsverdict--accent { border-color: rgba(var(--accent-rgb), 0.55); border-left-color: var(--accent); }
.dsverdict--warn { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }
.dsverdict__title { display: block; font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.dsverdict--good .dsverdict__title { color: var(--good); }
.dsverdict--accent .dsverdict__title { color: var(--accent); }
.dsverdict--warn .dsverdict__title { color: var(--warn); }
.dsverdict__body { display: block; margin-top: 9px; font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(var(--ink-rgb), 0.72); }

/* ------------------------------------------------------------ §01 the route --- */

.dsroute { display: flex; flex-direction: column; padding: 24px 24px 26px; background: var(--panel-tile); min-width: 0; }
.dslabel--accent { color: var(--accent); }
.dsroutes { display: flex; flex-direction: column; gap: 1px; margin: 14px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.16); background: rgba(var(--ink-rgb), 0.16); list-style: none; }

.dsopt {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-left: 2px solid transparent;
  background: var(--panel-tile);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dsopt:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.dsopt.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.dsopt__dot { width: 13px; height: 13px; margin-top: 2px; border: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 50%; background: transparent; }
.dsopt.is-on .dsopt__dot { border-color: var(--accent); background: var(--accent); }
.dsopt__label { display: block; font-size: 13px; color: var(--ink); }
.dsopt__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }
.dsroute__note { display: block; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.dsroute__note--warn { color: var(--warn); }

.dscost { display: flex; flex-direction: column; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); list-style: none; }
.dscost__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.dscost > li:last-child .dscost__row { border-bottom: none; }
.dscost__label { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }
.dscost__value { font-size: 13px; color: var(--ink); }
.dscost__value--good { color: var(--good); }
.dscost__value--accent { color: var(--accent); }
.dscost__value--warn { color: var(--warn); }

/* ------------------------------------------------------------- §02 the hours --- */

.dshours { display: block; padding: 22px 24px 24px; }
.dsgrid { display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; margin: 0; padding: 0; list-style: none; }
.dsgrid + .dsgrid { margin-top: 6px; }
.dsgrid__corner { display: block; }
.dsday { text-align: center; font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.3); }
.dsday--open { color: var(--accent); }
.dsslot { font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }

/* An open block is washed accent with a solid edge; a closed one is an empty
   outline. The grid reads at a glance, before any label is read. */
.dscell {
  height: 38px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.2);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dscell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dscell.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35); color: var(--bg); }
.dshours__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--ink-rgb), 0.14); }
.dshours__note { font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.dskeys { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.dskey { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.dskey__chip { display: block; flex: 0 0 14px; width: 14px; height: 8px; border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.35); }
.dskey__chip--off { border-color: rgba(var(--ink-rgb), 0.2); background: transparent; }

/* ------------------------------------------------------------ §03 the matrix --- */

.dsmatrix { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.dsmhead { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px 62px; gap: 12px; align-items: center; margin: 0; padding-bottom: 11px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.16); font-size: 12px; line-height: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.dsmhead__ch { text-align: center; }
.dsevents { margin: 0; padding: 0; list-style: none; }
.dsevent { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px 62px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.dsevent__label { display: block; font-size: 13px; color: var(--ink); }
.dsevent__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }
.dscellwrap { display: flex; justify-content: center; }

/* The site's square-in-square switch, at its small size. */
.dstoggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 30px;
  height: 17px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dstoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dstoggle.is-on { justify-content: flex-end; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); }
.dstoggle__knob { width: 11px; height: 11px; margin: 0 2px; background: rgba(var(--ink-rgb), 0.3); transition: background 0.2s ease; }
.dstoggle.is-on .dstoggle__knob { background: var(--accent); }
.dsmatrix__foot { display: block; margin: 16px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--accent); }
.dsmatrix__foot--good { color: var(--good); }
.dsmatrix__foot--warn { color: var(--warn); }

/* ----------------------------------------------------------- §04 the profile --- */

.dsprofile { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.dscard { display: flex; align-items: center; gap: 14px; margin: 0; }

.dsmono {
  display: flex;
  flex: 0 0 54px;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--accent);
  object-fit: cover;
}

.dscard__name { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); }
.dscard__meta { display: block; margin-top: 5px; font-size: 12px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.45); }
.dsbadges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; list-style: none; }
.dsbadge { padding: 5px 10px; border: 1px solid rgba(var(--ink-rgb), 0.22); font-size: 12px; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.6); }
.dsbadge--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.dsbadge--good { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.dsbadge--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.dsfield { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.dsbio {
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--field);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  resize: vertical;
}

.dsbio:focus { border-color: var(--accent); }
.dscount { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }
.dscount--warn { color: var(--warn); }
.dslangs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; padding: 0; list-style: none; }

.dslang {
  padding: 7px 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dslang:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.dslang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dslang.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }

.dsprofile__foot {
  display: block;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

/* ------------------------------------------------------------- §05 the split --- */

.dssplit { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.dsmix { display: flex; gap: 2px; height: 10px; margin: 0; padding: 0; list-style: none; }
.dsmix__seg { display: block; background: rgba(var(--ink-rgb), 0.24); }
.dsmix__seg--referral { background: rgba(var(--warn-rgb), 0.7); }
.dsmix__seg--tax { background: rgba(var(--ink-rgb), 0.14); }
.dsrows { display: flex; flex-direction: column; gap: 1px; margin: 18px 0 0; padding: 0; list-style: none; }
.dsrow { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.dsrows > li:last-child .dsrow { border-bottom: none; }
.dsrow__chip { width: 10px; height: 6px; background: rgba(var(--ink-rgb), 0.24); }
.dsrow__chip--gross { background: var(--accent); }
.dsrow__chip--referral { background: rgba(var(--warn-rgb), 0.7); }
.dsrow__chip--tax { background: rgba(var(--ink-rgb), 0.14); }
.dsrow__label { display: block; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.dsrow__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.38); }
.dsrow__value { font-family: var(--serif); font-size: 17px; color: rgba(var(--ink-rgb), 0.72); }
.dsrow__value--gross { color: var(--ink); }
.dstake { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--ink-rgb), 0.2); }
.dstake__label { font-size: 12px; line-height: normal; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.42); }
.dstake__value { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--accent); }
.dssplit__foot { display: block; margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }

/* ------------------------------------------------------------ §06 the access --- */

.dsaccess { margin: 0; padding: 0; list-style: none; }
.dsperm { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; align-items: center; padding: 15px 22px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.dsperm__label { display: block; font-size: 13px; color: var(--ink); }
.dsperm__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(var(--ink-rgb), 0.45); }

.dstoggle--wide { width: 40px; height: 21px; }
.dstoggle--wide .dstoggle__knob { width: 15px; height: 15px; }
.dsaccess__foot { display: block; margin: 0; padding: 16px 22px; font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(var(--ink-rgb), 0.45); }
.dsaccess__foot--warn { color: var(--warn); }
.dssession { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; padding: 16px 22px 20px; border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
.dssession__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }
.dssession__acts { display: flex; gap: 9px; }

.dsbtn {
  padding: 11px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dsbtn:hover { border-color: var(--accent); color: var(--accent); }
.dsbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Handing the desk over is the one irreversible control on the page. */
.dsbtn--danger { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.dsbtn--danger:hover { border-color: var(--warn); color: var(--warn); }

/* -------------------------------------------------------------- the save bar --- */

.dssave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: clamp(22px, 2.8vh, 30px) 0 0;
  padding: 18px 22px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.dssave--saved { border-color: rgba(var(--good-rgb), 0.5); background: var(--panel); }
.dssave__state { display: flex; align-items: center; gap: 11px; }
.dssave__dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dssave--saved .dssave__dot { background: var(--good); }
.dssave__line { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.6); }
.dssave__acts { display: flex; gap: 10px; }

.dsdiscard {
  padding: 12px 20px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.66);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dsdiscard:hover { border-color: var(--accent); color: var(--accent); }
.dsdiscard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dsgo {
  padding: 13px 24px;
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.dsgo:hover { background: var(--accent-hover); }
.dsgo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- printed lengths --- */
/* The histogram is a log scale over the agent's own reply times; the widths
   are the kept percentage at each of the seven promise steps, plus the three
   deductions in the split. The builder asserts every one of them. */

.dsw--4 { width: 4%; }
.dsw--10 { width: 10%; }
.dsw--15 { width: 15%; }
.dsw--31 { width: 31%; }
.dsw--40 { width: 40%; }
.dsw--57 { width: 57%; }
.dsw--76 { width: 76%; }
.dsw--86 { width: 86%; }
.dsw--93 { width: 93%; }
.dsw--98 { width: 98%; }
.dsw--100 { width: 100%; }

.dsh--28 { height: 28%; }
.dsh--33 { height: 33%; }
.dsh--34 { height: 34%; }
.dsh--36 { height: 36%; }
.dsh--38 { height: 38%; }
.dsh--39 { height: 39%; }
.dsh--40 { height: 40%; }
.dsh--42 { height: 42%; }
.dsh--43 { height: 43%; }
.dsh--44 { height: 44%; }
.dsh--45 { height: 45%; }
.dsh--46 { height: 46%; }
.dsh--47 { height: 47%; }
.dsh--48 { height: 48%; }
.dsh--49 { height: 49%; }
.dsh--50 { height: 50%; }
.dsh--51 { height: 51%; }
.dsh--52 { height: 52%; }
.dsh--53 { height: 53%; }
.dsh--54 { height: 54%; }
.dsh--55 { height: 55%; }
.dsh--56 { height: 56%; }
.dsh--57 { height: 57%; }
.dsh--58 { height: 58%; }
.dsh--59 { height: 59%; }
.dsh--60 { height: 60%; }
.dsh--62 { height: 62%; }
.dsh--63 { height: 63%; }
.dsh--65 { height: 65%; }
.dsh--67 { height: 67%; }
.dsh--69 { height: 69%; }
.dsh--71 { height: 71%; }
.dsh--73 { height: 73%; }
.dsh--76 { height: 76%; }
.dsh--80 { height: 80%; }
.dsh--83 { height: 83%; }
.dsh--88 { height: 88%; }
.dsh--94 { height: 94%; }
.dsh--100 { height: 100%; }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1179px) {
  /* The slider takes the width and the routes drop under it. */
  .dsdesk { grid-template-columns: minmax(0, 1fr); }
  .dsroute { border-top: 1px solid rgba(var(--ink-rgb), 0.16); }
  .dsgrid { grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .dsgrid + .dsgrid { margin-top: 4px; }
}

@media (max-width: 767px) {
  .dsslider { padding: 20px 16px 22px; }
  .dsroute,
  .dsmatrix,
  .dsprofile,
  .dssplit,
  .dshours { padding: 20px 16px 22px; }
  /* Four rows of seven, day initials over them, and a 44px target on each. */
  .dsgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .dsslot { grid-column: 1 / -1; margin-top: 6px; }
  .dsgrid__corner { display: none; }
  .dscell { height: 44px; }
  .dsday { letter-spacing: normal; }
  /* Five stacked blocks, three labelled switches each. */
  .dsmhead { display: none; }
  .dsevent { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .dsevent .dscellwrap { justify-content: flex-start; }
  .dscells { display: flex; gap: 18px; }
  .dsperm { padding: 14px 16px; }
  .dssession { padding: 14px 16px 18px; }
  .dssession__acts { flex-direction: column; width: 100%; }
  .dsbtn { width: 100%; }
  .dssave { padding: 16px; }
  .dssave__acts { width: 100%; }
  .dsdiscard,
  .dsgo { flex: 1; }
  .dsrow { grid-template-columns: 12px minmax(0, 1fr); row-gap: 4px; }
  .dsrow__value { grid-column: 2; }
}

@media (hover: none) and (min-width: 768px) {
  .dscell { min-height: 44px; }
}

@media (hover: none) {
  .dsopt,
  .dslang,
  .dsbtn,
  .dsdiscard,
  .dsgo { min-height: 44px; }
  /* The switch keeps the site's 17px and 21px shapes and grows an invisible
     hit area around itself instead — a 44px switch is a different control. */
  .dstoggle { position: relative; }
  .dstoggle::after { content: ""; position: absolute; inset: -14px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsopt,
  .dscell,
  .dstoggle,
  .dstoggle__knob,
  .dslang,
  .dsreply__bar,
  .dsbtn,
  .dsdiscard,
  .dsgo { transition: none; }
}

/* ==========================================================================
   94. Home detail v5 — the gallery swap, prefix `p5frame`
   ==========================================================================
   Большой кадр слева — экран, четыре справа — тамбнейлы. Клик по тамбнейлу
   меняет их местами: кликнутая фотография уезжает влево, а та, что там
   стояла, занимает освободившуюся клетку. Ни одна не пропадает с экрана и
   ни одна не показывается дважды — при пяти кадрах в сетке это видно сразу.

   Подмена идёт под затухание: сначала обе гаснут, потом меняется src, потом
   проявляются. Перекладывать саму разметку нельзя — уехала бы раскладка.
   ========================================================================== */

.p5frame img { transition: opacity 0.26s ease-in-out; }
.p5frame.is-fading img { opacity: 0; }

/* Тамбнейл — кнопка, поэтому у неё сбрасывается всё кнопочное.

   `width: 100%` здесь обязателен. У кнопки `width: auto` — это ширина по
   содержимому даже при `display: block`: она форм-контрол, а не обычный
   блок. Ссылка на её месте растягивалась на клетку сама, кнопка встала на
   453px в клетке 494 и оставила щель справа у всех четырёх. */
button.p5frame {
  width: 100%;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* Рамка по наведению говорит, что кадр можно взять. На большом её нет:
   он уже на экране, брать нечего. */
button.p5frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.2s ease-in-out;
  pointer-events: none;
}

button.p5frame:hover::after { border-color: rgba(var(--ink-rgb), 0.55); }
button.p5frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .p5frame img,
  button.p5frame::after { transition: none; }
}

/* ==========================================================================
   95. Портреты агентов — кадрировать от макушки
   ==========================================================================
   Снимки агентов вертикальные (960×1200), а коробки под них почти везде
   горизонтальные или квадратные. `object-fit: cover` по умолчанию режет от
   центра и срезает макушку — на портрете это брак, который видно сразу.

   Прижимаем кадр к верху: срезается низ, то есть пиджак, а не голова.

   Только агенты. Клиенты и стол кадрируются как раньше — владелец просил
   тронуть именно портреты агентов.

   Правило по имени файла, а не по классу, намеренно: этих вставок 41 на
   восьми страницах, и почти все стилизуются родителями, своего класса у
   картинки нет. Селектор по src ловит их все разом и переживает добавление
   новых страниц. Живёт последним в файле, поэтому выигрывает у родительских
   правил той же специфичности.
   ========================================================================== */

img[src*="assets/img/agent-"] { object-position: 50% 0%; }

/* ==========================================================================
   96. Карточки объектов — кадр целиком, без обрезки
   ==========================================================================
   Фотографии объектов сняты 3:2. `object-fit: cover` всегда заполняет коробку
   и срезает лишнее, поэтому любая коробка не 3:2 что-нибудь отрезает: шире —
   верх и низ, выше — бока.

   Раньше коробки были широкими полосками (178–210px при ширине 450), и от
   кадра оставалась горизонтальная лента: дом в ней не читался. Подняли
   высоту числами — проскочили мимо и стали резать бока, на коммерции до 25%
   ширины кадра.

   Теперь коробка держит пропорцию самой фотографии. Кадр виден целиком на
   любой ширине колонки, а высота считается сама — и на 1280, и на 2560.
   ========================================================================== */

/* ==========================================================================
   97. Настройки стола — анкета агента, префикс `dswho`
   ==========================================================================
   У покупателя анкета живёт отдельным экраном, у агента её не было вовсе:
   рельс общий на десять экранов, и одиннадцатый ради неё тянул бы пересборку
   всех. Поэтому она стала первой секцией `Desk settings` — там, где страница
   и так обещает «Every buyer sees this on your profile».
   ========================================================================== */

/* Отступ от линии заголовка обязателен. У соседних разделов его нет
   намеренно: там панель с рамкой, и её верхняя граница продолжает эту
   линию. Здесь рамки нет, и без отступа фотография ложится прямо на
   черту. */
/* Анкета и вход идут друг под другом, каждый во всю ширину. В два столбца
   рядом было тесно: карточка приземистая, а форма высокая, и правый блок
   уезжал далеко ниже левого. */
.dswho {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* Карточка слева: портрет и то, что видит покупатель. */
.dswho__card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.dswho__shot { display: flex; flex-direction: column; gap: 10px; }

/* Правая колонка карточки. Правило есть даже без своих объявлений: сборщик
   проверяет, что у каждого класса в разметке оно найдётся, и молчаливый
   класс-пустышка — верный способ однажды забыть про него совсем. */
.dswho__body { min-width: 0; }

.dswho__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-faint);
}

/* Подпись к скрытому input[type=file], а не кнопка: проводник открывает
   сам браузер, скрипту остаётся только показать выбранный кадр. */
.dswho__replace {
  display: block;
  text-align: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dswho__replace:hover { border-color: var(--accent); color: var(--accent); }
.dswho__replace:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Строка под кнопкой: пока ничего не выбрано — требования к файлу, после
   выбора — его имя и вес. */
.dswho__file {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-faint);
}

.dswho__file.is-picked { color: var(--accent); }

.dswho__public { color: var(--accent); text-decoration: none; }
.dswho__public:hover { text-decoration: underline; }

.dswho__name { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--ink); }

.dswho__role {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dswho__rows { margin-top: 20px; }

.dswho__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
}

.dswho__row--last { border-bottom: 0; }
.dswho__row dt { color: var(--ink-muted); }
.dswho__row dd { color: var(--ink-body); text-align: right; }

/* Отметка о проверке лицензии — единственное зелёное на карточке, и стоит
   она рядом с тем, что действительно проверено, а не «всё хорошо». */
.dswho__ok {
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--good);
}

.dswho__foot {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (max-width: 767px) {
  .dswho__card { grid-template-columns: 1fr; gap: 18px; }
  .dswho__shot { max-width: 220px; }
  .dswho__row { flex-direction: column; gap: 2px; }
  .dswho__row dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .dswho__replace { transition: none; }
}

/* ==========================================================================
   98. Настройки стола — вход и безопасность, префикс `dssign`
   ==========================================================================
   Два блока в ряд: слева имя, под которым входят, справа смена пароля. Ниже
   строкой — второй фактор, устройства и закрытие аккаунта.

   Формы демонстрационные, сервера у шаблона нет. Поля паролей оставлены
   пустыми намеренно: подставлять в демо чей-то пароль нельзя даже как
   украшение. `autocomplete` при этом настоящий, и менеджер паролей на этой
   форме отработает как на боевой.
   ========================================================================== */

/* Блок входа: во всю ширину, но поля внутри — в две колонки. Растянутое на
   полторы тысячи пикселей поле пароля выглядит нелепо и читается хуже. */
.dssign {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  align-items: start;
}

/* Шапка «How you sign in» и первые два поля — левая колонка; шапка смены
   пароля и три поля под ней — правая. Раскладывает сетка по номерам строк,
   поэтому в разметке порядок остаётся читаемым сверху вниз. */
.dssign > .dssub:first-child { grid-column: 1; grid-row: 1; }
.dssign > .dssub--split { grid-column: 2; grid-row: 1; margin-top: 0; }
.dssign > .dsfield:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.dssign > .dsfield:nth-of-type(2) { grid-column: 1; grid-row: 3; }
.dssign > .dsfield:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.dssign > .dsfield:nth-of-type(4) { grid-column: 2; grid-row: 3; }
.dssign > .dsfield:nth-of-type(5) { grid-column: 2; grid-row: 4; }
.dssign > .dssign__cta { grid-column: 2; grid-row: 5; }
.dssign > .dsguard { grid-column: 1 / -1; }

.dssub__note {
  margin-left: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--ink-faint);
}

/* Вторая шапка внутри того же блока — отделяет смену пароля от логина. */
.dssub--split { margin-top: 26px; }

.dssub {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dsfield__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }

.dsfield__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--field);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.dsfield__input::placeholder { color: var(--ink-faint); }
.dsfield__input:focus { border-color: var(--accent); outline: none; }
.dsfield--last { margin-bottom: 4px; }

.dssign__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.dssign__cta { margin-top: 18px; }

/* Призрачная кнопка: смена пароля и выход с чужих устройств — действия
   заметные, но не главные на странице, главная тут одна и она в нижней
   полосе сохранения.

   Ховер обязан гасить и фон тоже. `.dsgo:hover` заливает кнопку акцентом, и
   если перекрасить только текст, на наведении выходит янтарь по янтарю —
   надпись пропадает. */
.dsgo--ghost { background: none; border: 1px solid var(--line); color: var(--ink); }

.dsgo--ghost:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
  color: var(--accent);
}

.dsguard { margin-top: 34px; border-top: 1px solid var(--line-faint); }

.dsguard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-faint);
}

.dsguard__row--last { border-bottom: 0; }
.dsguard__label { display: block; font-size: 14px; color: var(--ink); }

.dsguard__note {
  display: block;
  margin-top: 4px;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (max-width: 1023px) {
  /* На узком экране сетка по номерам строк только мешает — пусть всё течёт
     сверху вниз в одну колонку. */
  .dssign { grid-template-columns: 1fr; gap: 0; }
  .dssign > * { grid-column: 1 !important; grid-row: auto !important; }
  .dssign > .dssub--split { margin-top: 26px; }
}

@media (max-width: 767px) {
  .dsguard__row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsfield__input { transition: none; }
}

/* ==========================================================================
   99. Стайлгайд — живая документация системы, префикс `sg`
   ==========================================================================
   Страница показывает язык, на котором написаны все остальные. Отсюда её
   единственное жёсткое правило: образец — настоящая вещь с настоящими
   значениями, а не картинка про неё.

   Заливки плашек, ступеней лестницы и накатов акцента **генерирует
   сборщик** из `_design/system-design/data/tokens.json` — блок ниже между
   маркерами руками не трогать. Иначе образец однажды разойдётся с
   литералом, который под ним напечатан, а это ровно та беда, ради которой
   страница и существует.
   ========================================================================== */

.sgpage { padding-bottom: clamp(40px, 6vh, 70px); }

.sgwrap {
  margin: 0 var(--pad-hero);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vh, 46px);
}

/* --- линия заголовка раздела: она же образец паттерна из §10 -------------- */

.sgrule {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

.sgrule__left {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.sgrule__dash { flex: 0 0 28px; width: 28px; height: 1px; background: var(--accent); }
.sgrule__note {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.25;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Отбивку до первого блока даёт нижний отступ линии раздела, поэтому
   собственного margin-top у блока нет. Селектор с родителем — чтобы
   перебить `margin-top` самих блоков, объявленных ниже по файлу. */
.sgsec > .sgrule + * { margin-top: 0; }

/* Подпись образца: у прототипа она без подчёркивания и целиком одного тона —
   и «Filter chips», и «selectable» набраны одним прогоном. */
.sgsub {
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.sgsub__note::before { content: " — "; }
.sgsub__note--dot::before { content: " · "; }

/* Строка причины. Под каждым образцом ровно одно предложение «почему» —
   правило без причины следующий человек нарушит из лучших побуждений. */
.sgwhy {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.sgwhy--wide { max-width: 92ch; }

/* --- 01 / цвет ------------------------------------------------------------ */

/* Шесть колонок, как в прототипе: двенадцать плашек ложатся двумя ровными
   рядами. `auto-fill` давал то пять, то семь — и ряды рвались. */
.sgswatches {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

/* Общая волосяная линия: сетка красит фон, клетки перекрывают его своим, и
   в зазоре остаётся ровно один пиксель. Рамка на каждой клетке дала бы 2px
   между соседями и заметную грязь на пересечениях. */
.sgswatch {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--panel-solid);
  min-width: 0;
}

/* Цвет во всю ширину карточки и без рамки: границу рисует общая волосяная
   линия сетки, своя добавила бы вторую и приглушила бы сам образец. */
.sgswatch__chip { display: block; height: 85px; }

.sgswatch__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  min-width: 0;
}

.sgswatch__name { font-size: 13px; color: var(--ink); }

.sgswatch__value {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.sgswatch__use { font-size: 12px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.5); }

/* Три сигнальных слова внутри одной фразы: цвет несёт значение прямо там,
   где оно объясняется, и объяснение остаётся одним правилом, а не тремя. */
.sgsig--green { color: var(--good); }
.sgsig--gold { color: var(--accent); }
.sgsig--orange { color: var(--warn); }

.sgladders {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.sgladders > .sgladder {
  padding: 22px 24px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.sgladder { min-width: 0; }
.sgsteps { margin-top: 14px; }

.sgstep {
  display: grid;
  grid-template-columns: 54px 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.sgstep:last-child { border-bottom: 0; }
.sgstep__bar { display: block; height: 18px; border: 1px solid rgba(var(--ink-rgb), 0.14); }
.sgstep__alpha { font-size: 12px; color: var(--accent); }
.sgstep__use { font-size: 12px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.5); }


@media (max-width: 1179px) {
  .sgswatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sgswatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgstep { grid-template-columns: 64px 46px minmax(0, 1fr); gap: 10px; }
}

/* >>> sg-tokens (генерирует build_systemdesign.py — руками не править) */
.sgswatch__chip--0 { background: #100f0c; }
.sgswatch__chip--1 { background: #ece5d8; }
.sgswatch__chip--2 { background: #d9a04a; }
.sgswatch__chip--3 { background: #7ea36a; }
.sgswatch__chip--4 { background: #c8763f; }
.sgswatch__chip--5 { background: #0a0908; }
.sgswatch__chip--6 { background: rgba(24,22,18,0.92); }
.sgswatch__chip--7 { background: rgba(24,22,18,0.96); }
.sgswatch__chip--8 { background: rgba(34,31,25,0.98); }
.sgswatch__chip--9 { background: rgba(16,15,12,0.5); }
.sgswatch__chip--10 { background: #e8b563; }
.sgswatch__chip--11 { background: #c4573c; }
.sgstep__bar--l0 { background: rgba(236,229,216, 0.09); }
.sgstep__bar--l1 { background: rgba(236,229,216, 0.14); }
.sgstep__bar--l2 { background: rgba(236,229,216, 0.16); }
.sgstep__bar--l3 { background: rgba(236,229,216, 0.2); }
.sgstep__bar--l4 { background: rgba(236,229,216, 0.28); }
.sgstep__bar--l5 { background: rgba(236,229,216, 0.4); }
.sgstep__bar--l6 { background: rgba(236,229,216, 0.5); }
.sgstep__bar--l7 { background: rgba(236,229,216, 0.6); }
.sgstep__bar--l8 { background: rgba(236,229,216, 0.72); }
.sgstep__bar--w0 { background: rgba(217,160,74, 0.06); }
.sgstep__bar--w1 { background: rgba(217,160,74, 0.08); }
.sgstep__bar--w2 { background: rgba(217,160,74, 0.10); }
.sgstep__bar--w3 { background: rgba(217,160,74, 0.14); }
.sgstep__bar--w4 { background: rgba(217,160,74, 0.55); }
.sgstep__bar--w5 { background: rgba(217,160,74, 0.92); }
.sgspark__b--0 { height: 34%; }
.sgspark__b--1 { height: 41%; }
.sgspark__b--2 { height: 38%; }
.sgspark__b--3 { height: 52%; }
.sgspark__b--4 { height: 47%; }
.sgspark__b--5 { height: 60%; }
.sgspark__b--6 { height: 55%; }
.sgspark__b--7 { height: 68%; }
.sgspark__b--8 { height: 62%; }
.sgspark__b--9 { height: 74%; }
.sgspark__b--10 { height: 81%; }
.sgspark__b--11 { height: 88%; }
.sgdist__b--0 { height: 18%; }
.sgdist__b--1 { height: 26%; }
.sgdist__b--2 { height: 34%; }
.sgdist__b--3 { height: 52%; }
.sgdist__b--4 { height: 71%; }
.sgdist__b--5 { height: 88%; }
.sgdist__b--6 { height: 76%; }
.sgdist__b--7 { height: 58%; }
.sgdist__b--8 { height: 42%; }
.sgdist__b--9 { height: 30%; }
.sgdist__b--10 { height: 22%; }
.sgdist__b--11 { height: 15%; }
.sgspark__b--9 { background: var(--accent); }
.sgspark__b--10 { background: var(--accent); }
.sgspark__b--11 { background: var(--accent); }
.sgspark__b--0 { height: 34%; }
.sgspark__b--1 { height: 41%; }
.sgspark__b--2 { height: 38%; }
.sgspark__b--3 { height: 52%; }
.sgspark__b--4 { height: 47%; }
.sgspark__b--5 { height: 60%; }
.sgspark__b--6 { height: 55%; }
.sgspark__b--7 { height: 68%; }
.sgspark__b--8 { height: 62%; }
.sgspark__b--9 { height: 74%; }
.sgspark__b--10 { height: 81%; }
.sgspark__b--11 { height: 88%; }
.sgdist__b--0 { height: 18%; }
.sgdist__b--1 { height: 26%; }
.sgdist__b--2 { height: 34%; }
.sgdist__b--3 { height: 52%; }
.sgdist__b--4 { height: 71%; }
.sgdist__b--5 { height: 88%; }
.sgdist__b--6 { height: 76%; }
.sgdist__b--7 { height: 58%; }
.sgdist__b--8 { height: 42%; }
.sgdist__b--9 { height: 30%; }
.sgdist__b--10 { height: 22%; }
.sgdist__b--11 { height: 15%; }
.sgrow__sample--0 { font-size: clamp(38px, 3.4vw, 58px); font-family: var(--serif); line-height: 1; }
.sgrow__sample--1 { font-size: 42px; font-family: var(--serif); line-height: 1; color: var(--accent); }
.sgrow__sample--2 { font-size: 32px; font-family: var(--serif); line-height: 1; }
.sgrow__sample--3 { font-size: 30px; font-family: var(--serif); }
.sgrow__sample--4 { font-size: 19px; font-family: var(--serif); line-height: 1.14; }
.sgrow__sample--5 { font-size: 17px; font-family: var(--serif); }
.sgrow__sample--6 { font-size: 12px; font-family: var(--sans); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.sgrow__sample--7 { font-size: 12px; font-family: var(--sans); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.sgrow__sample--8 { font-size: 12px; font-family: var(--sans); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.sgrow__sample--9 { font-size: 12px; font-family: var(--sans); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.sgrow__sample--10 { font-size: 13px; font-family: var(--sans); font-weight: 300; line-height: 1.65; }
.sgrow__sample--11 { font-size: 12px; font-family: var(--sans); font-weight: 300; line-height: 1.6; }
/* <<< sg-tokens */

/* --- 02 / типографика ----------------------------------------------------- */

/* Раздел — одна панель. Верхней границы нет: её роль играет линия заголовка,
   иначе под ней встанут две линии в 1px и это читается как брак. */
.sgtypo {
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-top: 0;
}

.sgfams {
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--ink-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.16);
}

.sgfam {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
  background: var(--panel-solid);
  min-width: 0;
}

.sgfam__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

/* Имя семейства и есть образец: оно набрано тем, что называет. Отдельная
   «Aa» рядом была бы второй вещью, говорящей то же самое. */
.sgfam__name { font-size: 34px; line-height: 1; color: var(--ink); }
.sgfam__name--heading { font-family: var(--serif); }
.sgfam__name--ui { font-family: var(--sans); font-weight: 300; }

.sgfam__name--wordmark {
  font-family: var(--wordmark);
  letter-spacing: 0.08em;
  -webkit-text-stroke: 1.2px var(--accent);
  color: transparent;
}

.sgfam__use { font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.sgrows { min-width: 0; }

.sgrow {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.sgrow:last-child { border-bottom: 0; }
.sgrow__left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sgrow__role { font-size: 13px; color: var(--ink); }
.sgrow__meta { font-size: 12px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.42); }

/* Метка стоит рядом со значением, а не в сноске: читатель видит отступление
   там же, где берёт размер. */
.sgrow__lift {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.sgrow__sample { color: var(--ink); overflow-wrap: anywhere; }
.sgrow__sample em { font-style: italic; color: var(--accent); }

.sgtypo__foot {
  padding-top: 15px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

@media (max-width: 1023px) {
  .sgfams { grid-template-columns: 1fr; }
  .sgrow { grid-template-columns: 1fr; gap: 8px; }
}

/* --- 03 / геометрия и движение -------------------------------------------- */

/* Число колонок берётся у прототипа, а не подбирается `auto-fit`. Он ставит
   три там, где три, и две там, где две; автоподбор давал то пять, то шесть,
   и раздел переставал совпадать с оригиналом на любой ширине. */
.sgcols {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgcols > .sgcol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
  background: var(--panel-solid);
}

.sgcol > * { margin-top: 0; }

/* Свой зазор ячейки у каждого раздела — снято линейкой с прототипа. */
.sgcols--g10 > .sgcol { gap: 10px; }
.sgcols--g11 > .sgcol { gap: 11px; }
.sgcols--g14 > .sgcol { gap: 14px; }
.sgcols--g18 > .sgcol { gap: 18px; }

/* Дальше — по одному варианту на раздел. Ширины и зазоры сняты с прототипа
   линейкой, а не подобраны: доли вроде 1.45fr и 1.3fr выглядят странно, но
   именно они дают его 1115/769 и 1050/807 при контенте в 1888px. */

/* 07, 10, 15 — панели просторнее прочих. */
.sgcols--roomy > .sgcol { padding: 24px 26px 26px; }

/* 07 — первая колонка шире: в ней три поля со своими подписями, а справа
   переключатели, которым столько места не нужно. */
.sgcols--wide3 { grid-template-columns: 1.2fr minmax(0, 1fr) minmax(0, 1fr); }

/* 10 и 15 — две равные панели через воздух. */
.sgcols--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  border: 0;
  background: none;
}

/* 08 — карточка объекта ровно 300px, таблица забирает остаток. Пополам здесь
   нельзя: карточка растягивается до 929px, фотография тянет за собой высоту,
   и раздел вырастает вдвое против оригинала. */
.sgcols--card {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 30px;
  border: 0;
  background: none;
}

.sgcols--card > .sgcol { padding: 0; background: none; }

/* 09 — расклад и воронка, 1.3 к 1. */
.sgcols--data {
  grid-template-columns: 1.3fr minmax(0, 1fr);
  gap: 30px;
  border: 0;
  background: none;
}

.sgcols--data > .sgcol { padding: 0; background: none; }

/* 11 — «числа» и «предложения» под тремя колонками голоса. */
.sgcols--prose {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  border: 0;
  background: none;
}

.sgcols--prose > .sgcol { padding: 0; background: none; }

/* Ячейка сама себе панель: рамка на каждой, а не общая волосяная сетка.
   Так прототип разводит 08 (заметка и пустое) и 09 (лента и воронка). */
.sgcols--framed > .sgcol {
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.sgcols--panels > .sgcol { padding: 20px 22px 22px; }

/* 08 — заметка и пустое состояние: две панели в рамке, каждая со своей. */
.sgcols--boxes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  border: 0;
  background: none;
}

/* 13 — смета и сравнение, 1.45 к 1, разделены волосяной линией. */
.sgcols--money { grid-template-columns: 1.45fr minmax(0, 1fr); }
.sgcols--money > .sgcol { padding: 26px 30px 28px; }
.sgcols--money > .sgcol + .sgcol { padding: 26px 28px 28px; }

.sgcol { min-width: 0; }
.sgpairs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgpair {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  line-height: 1.25;
}

.sgpair__key { color: rgba(var(--ink-rgb), 0.5); }
.sgpair__val { text-align: right; color: var(--ink); overflow-wrap: anywhere; }


/* Образец исключения нарисован с тем самым радиусом, о котором говорит:
   кружок для человека, кружок для точки во времени, 2px для кнопки. */


/* --- 04 / чертёжные мотивы ------------------------------------------------ */

/* Радиус: два квадрата и круг. Круг ровно один и он меньше — в системе
   скругление означает «здесь человек», а не «здесь красиво». */
.sgshapes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sgshape {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.sgshape--gold { border: 1px solid var(--accent); }
.sgshape--ink { border: 1px solid rgba(var(--ink-rgb), 0.2); }

.sgshape--round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-size: 14px;
  color: var(--accent);
}

.sgmotifs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgmotif {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  background: var(--panel-solid);
  min-width: 0;
}

.sgmotif__demo {
  position: relative;
  display: block;
  height: 132px;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: var(--field);
  overflow: hidden;
}

/* Каждый образец нарисован тем же способом, что и в продукте. Картинок нет
   ни одной — иначе это иллюстрация мотива, а не мотив. */
.sgmotif__demo--grid {
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

.sgcrop { position: absolute; width: 16px; height: 16px; }
.sgcrop--tl { top: 14px; left: 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.6); border-left: 1px solid rgba(var(--accent-rgb), 0.6); }
.sgcrop--tr { top: 14px; right: 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.6); border-right: 1px solid rgba(var(--accent-rgb), 0.6); }
.sgcrop--bl { bottom: 14px; left: 14px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.6); border-left: 1px solid rgba(var(--accent-rgb), 0.6); }
.sgcrop--br { bottom: 14px; right: 14px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.6); border-right: 1px solid rgba(var(--accent-rgb), 0.6); }

.sgmotif__demo--veil {
  background-image: repeating-linear-gradient(135deg,
    rgba(var(--scrim-rgb), 0.5) 0 6px, rgba(var(--scrim-rgb), 0.14) 6px 12px);
}

/* Участок и застроенное пятно: контур — земля, золотая штриховка — дом. */
.sgplot {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
}

.sgplot::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 22%;
  width: 46%;
  height: 52%;
  border: 1px solid var(--accent);
  background-image: repeating-linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.28) 0 5px, rgba(var(--accent-rgb), 0.08) 5px 10px);
}

.sgmotif__demo--strip { display: flex; align-items: flex-start; }

.sgstrip {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.sgstrip__last { color: var(--accent); }

/* Общая волосяная линия — тот самый приём, что держит все сетки на сайте. */
.sghair {
  position: absolute;
  inset: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sghair > span { background: var(--panel-solid); }

.sgmotif__name {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.sgmotif__value { font-size: 12px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.5); overflow-wrap: anywhere; }
.sgmotif__why { font-size: 13px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.66); }

/* --- 05 / кнопки ---------------------------------------------------------- */

/* Панель раздела: верхней рамки нет — её роль играет линия раздела над ней. */
.sgpanel {
  padding: 26px 28px 28px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-top: 0;
  background: var(--panel);
}

/* Форма закрывается чуть плотнее снизу: под кнопками сохранения уже есть
   собственная отбивка. */
.sgpanel--form { padding-bottom: 24px; }

/* Свои отбивки у панелей 02, 11 и 16 — сняты с прототипа. */
.sgpanel--scale { padding: 4px 26px 22px; }
.sgpanel--prose { padding: 22px 26px 24px; }
.sgpanel--marks { padding: 26px 28px; }

/* Пояснение, стоящее под панелью, а не внутри неё. */
.sgwhy--after { margin-top: 13px; }
.sgwhy__b { font-weight: 400; color: var(--ink); }

/* Шесть кнопок в строку, каждая шириной под свою надпись. */
.sgbtns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

/* Кнопка тянется на всю ширину образца, а ширину образца задаёт самая
   длинная из трёх строк — обычно подпись под кнопкой. Отсюда и «SENT» в
   135px при слове из четырёх букв: это ширина строки «An action that has
   been taken», а не размер кнопки. Сжать кнопку по тексту (flex-start) —
   значит потерять то, ради чего эти шесть образцов стоят рядом. */
.sgbtn { display: flex; flex-direction: column; gap: 12px; }

/* Правило под образцами: линия, 22 сверху и 18 после неё. */
.sgwhy--rule {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}


.sgb {
  padding: 13px 22px;
  border: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sgb--primary { background: var(--accent); color: var(--on-accent); }
.sgb--primary:hover { background: var(--accent-hover); }

.sgb--outline { border: 1px solid rgba(var(--ink-rgb), 0.28); background: none; color: var(--ink); }
.sgb--outline:hover { border-color: var(--accent); color: var(--accent); }

.sgb--small {
  padding: 9px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  background: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(var(--ink-rgb), 0.66);
}

.sgb--small:hover { border-color: var(--accent); color: var(--accent); }

/* Разрушающая никогда не залита и никогда не первая в фокусе. */
.sgb--destructive { border: 1px solid rgba(var(--warn-rgb), 0.5); background: none; color: var(--warn); }
.sgb--destructive:hover { border-color: var(--warn); }

/* Уже сделанное — не кнопка, и курсор об этом говорит. */
.sgb--done {
  padding: 9px 14px;
  border: 1px solid rgba(var(--good-rgb), 0.5);
  background: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--good);
  cursor: default;
}

.sgb--link {
  padding: 0;
  background: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.sgb--link:hover { color: var(--accent-hover); }
.sgb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sgbtn__name {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.sgbtn__why {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgnotes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 28px; }

.sgnotes > li {
  padding-left: 14px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.5);
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.66);
}

/* --- 06 / чипы, пилюли, бейджи -------------------------------------------- */

.sgrowset { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

.sgchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sgchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.sgchip.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.sgchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sgchip__n { color: inherit; opacity: 0.7; }

/* Пилюля: рамка и текст одного цвета, заливки нет никогда. */
.sgpill {
  padding: 4px 10px;
  border: 1px solid currentcolor;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sgpill--positive { border-color: rgba(var(--good-rgb), 0.5); color: var(--good); }
.sgpill--accent { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
.sgpill--warn { border-color: rgba(var(--warn-rgb), 0.5); color: var(--warn); }
.sgpill--ink { border-color: rgba(var(--ink-rgb), 0.22); color: rgba(var(--ink-rgb), 0.55); }

/* Бейдж — единственный залитый в семействе: он лежит на фотографии. */
.sgbadge {
  padding: 6px 11px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
}

.sgbadge--0 { background: rgba(var(--accent-rgb), 0.92); }
.sgbadge--1 { background: rgba(var(--good-rgb), 0.9); }
.sgbadge--2 { background: rgba(var(--scrim-rgb), 0.85); color: rgba(var(--ink-rgb), 0.72); }

/* --- 07 / поля ------------------------------------------------------------ */

.sgfield { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sgfield__label {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.sgin {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--field);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.sgin::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.sgin:focus { border-color: var(--accent); outline: none; }
.sgin:disabled { color: rgba(var(--ink-rgb), 0.35); cursor: not-allowed; }
.sgin--bad { border-color: rgba(var(--warn-rgb), 0.6); }
.sgerr { font-size: 12px; color: var(--warn); }

/* Квадратная ручка в квадратном пазу — ни пилюли, ни радиуса. */
.sgtog {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 21px;
  padding: 2px;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  background: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sgtog__knob { display: block; width: 15px; height: 15px; background: rgba(var(--ink-rgb), 0.3); }
.sgtog.is-on { justify-content: flex-end; border-color: var(--accent); background: rgba(var(--accent-rgb), 0.2); }
.sgtog.is-on .sgtog__knob { background: var(--accent); }
.sgtog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sgseg { margin-top: 14px; display: inline-flex; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.sgseg__b {
  padding: 8px 14px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer;
}

.sgseg__b:last-child { border-right: 0; }
.sgseg__b.is-on { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.sgseg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sgrange { width: 100%; accent-color: var(--accent); }
.sgends { display: flex; justify-content: space-between; font-size: 12px; color: rgba(var(--ink-rgb), 0.42); }

.sgradios { display: flex; flex-wrap: wrap; gap: 22px; }

.sgradio { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: rgba(var(--ink-rgb), 0.66); }
.sgradio input { accent-color: var(--accent); }

/* --- 08 / панели, карточки, таблицы --------------------------------------- */



.sgcard {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel-solid);
}

.sgcard__strip {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.sgcard__stamps { color: var(--accent); }

/* Место снимка. На стайлгайде оно намеренно пустое: карточка тут образец
   конструкции, а не витрина объекта. */
.sgcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

.sgcard__badge { position: absolute; top: 0; left: 0; }
.sgcard__body { display: flex; flex-direction: column; gap: 5px; padding: 17px 18px 10px; }
.sgcard__kind { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.sgcard__title { font-family: var(--serif); font-size: 19px; line-height: 1.14; color: var(--ink); }
.sgcard__meta { font-size: 13px; color: rgba(var(--ink-rgb), 0.5); }

.sgcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 18px 17px;
}

.sgcard__price { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.sgcard__per { font-size: 12px; color: rgba(var(--ink-rgb), 0.42); }

.sgtable { width: 100%; margin-top: 14px; border-collapse: collapse; }

.sgtable th {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgtable td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.66);
}

.sgtd--num { text-align: right; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.sgtr:hover { background: rgba(var(--accent-rgb), 0.06); }

/* Строка покрашена ховером заранее: состояние должно стоять рядом с покоем,
   иначе читателю пришлось бы наводить мышь на три вещи разом. */
.sgtr.is-hover { background: rgba(var(--accent-rgb), 0.06); }

.sgtr__t { display: block; color: var(--ink); }
.sgtr__p { display: block; font-size: 12px; color: rgba(var(--ink-rgb), 0.42); }

.sgtfoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 12px;
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgtfoot__link { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.sgtfoot__link:hover { color: var(--accent-hover); }

/* Врезка: цвет несёт вердикт, а не украшает. */
.sgnote {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid;
  border-left-width: 2px;
  background: var(--panel-callout);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.66);
}

.sgnote--good { border-color: rgba(var(--good-rgb), 0.5); border-left-color: var(--good); }
.sgnote--warn { border-color: rgba(var(--warn-rgb), 0.5); border-left-color: var(--warn); }

.sgempty {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 168px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel);
}

.sgempty__line { font-size: 14px; line-height: 1.6; color: rgba(var(--ink-rgb), 0.66); }
.sgempty__line em { font-style: normal; color: var(--ink); }
.sgempty__out { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* --- 09 / отображение данных ---------------------------------------------- */

.sgdatas {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgdata {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
  background: var(--panel-solid);
  min-width: 0;
}

.sgdata__name { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sgdata__why { font-size: 12px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.sgprog { display: block; height: 8px; background: rgba(var(--ink-rgb), 0.12); }
.sgprog__f { display: block; width: 57%; height: 100%; background: var(--accent); }

.sgspark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.sgspark__b { flex: 1; background: rgba(var(--ink-rgb), 0.22); }

.sgdist { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.sgdist__b { flex: 1; background: rgba(var(--ink-rgb), 0.16); }
.sgdist__b.is-in { background: var(--accent); }

.sgmix { display: flex; gap: 2px; height: 14px; }
.sgmix__s--0 { flex: 19; background: var(--good); }
.sgmix__s--1 { flex: 12; background: var(--accent); }
.sgmix__s--2 { flex: 33; background: rgba(var(--ink-rgb), 0.22); }

.sgleg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
.sgleg__i--0 { color: var(--good); }
.sgleg__i--1 { color: var(--accent); }
.sgleg__i--2 { color: rgba(var(--ink-rgb), 0.5); }

.sgtl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 16px;
}

.sgtl::before,
.sgtl::after { content: ""; position: absolute; top: 4px; height: 1px; }
.sgtl::before { left: 0; right: 0; background: rgba(var(--ink-rgb), 0.18); }
.sgtl::after { left: 0; width: 52%; background: var(--accent); }

.sgtl__i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.5);
}
.sgtl__d {
  position: absolute;
  top: -16px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.sgtl__i--done .sgtl__d { background: var(--accent); }
.sgtl__i--now .sgtl__d { border: 1px solid var(--accent); background: var(--bg); }
.sgtl__i--now { color: var(--accent); }
.sgtl__i--ahead .sgtl__d { border: 1px solid rgba(var(--ink-rgb), 0.3); background: var(--bg); }

/* Воронка у прототипа идёт поперёк, четырьмя ячейками через волосяную
   линию: подпись сверху, под ней число и рядом с ним доля. Столбиком строк,
   как было, она читается как список, а не как воронка. */
.sgfun {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgfun__i {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 15px 16px;
  background: var(--panel-callout);
}

.sgfun__l {
  flex: 1 0 100%;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgfun__v { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }

/* Судит ставка, а не величина: цвет живёт на проценте, не на числе. */
.sgfun__r { font-size: 12px; }
.sgfun__r--good { color: var(--good); }
.sgfun__r--ink { color: rgba(var(--ink-rgb), 0.42); }

/* --- 10 / мебель страницы -------------------------------------------------- */

.sgrail { margin-top: 14px; border: 1px solid rgba(var(--ink-rgb), 0.16); }

.sgrail__i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  border-left: 2px solid transparent;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.66);
}

.sgrail__i:last-child { border-bottom: 0; }
.sgrail__i.is-on { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); }

/* Непостроенный экран сидит на 0.4 и ссылкой не является. */
.sgrail__i.is-off { color: rgba(var(--ink-rgb), 0.4); }
.sgrail__b { font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }

/* Значок краснеет только когда означает долг, а не просто количество. */
.sgrail__b--warn { color: var(--warn); }

/* --- 11 / письмо ----------------------------------------------------------- */

.sgvoices {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgvoice {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 24px 24px;
  background: var(--panel-tile);
}
.sgvoice__name {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

.sgvoice__bad {
  padding-left: 14px;
  border-left: 2px solid rgba(var(--warn-rgb), 0.5);
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.42);
  text-decoration: line-through;
}

.sgvoice__why {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.45);
}

.sgvoice__good {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.72);
}

.sgnotes--stack { flex-direction: column; gap: 10px; margin-top: 14px; }

/* --- 12 / форма целиком ---------------------------------------------------- */



.sgform__grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
}

/* Адрес прототип кладёт в четыре колонки, где улица занимает две доли:
   708 / 354 / 354 / 354 при 1830 доступных. */
.sgform__grid--addr { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }

/* Заголовок группы полей: не карточка и не трекованная подпись, а линия,
   имя группы и справа одна строка о том, кто эти данные увидит. */
.sggroup {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.sggroup__name { font-size: 13px; color: var(--ink); }
.sggroup__note { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.42); }

/* Язык и свободный ответ — последняя пара, 26px между ними. */
.sgform__last {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding-top: 22px;
}

.sgfield--span2 { grid-column: span 2; }
.sgin--area { resize: vertical; font-family: var(--sans); }

.sgform__foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.sgform__status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(var(--ink-rgb), 0.5); }
.sgdot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sgform__acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* Две кнопки в подвале сравнения делят ширину поровну. */
.sgform__acts--gap { margin-top: 18px; }
.sgform__acts--gap > .sgb { flex: 1 1 0; padding-left: 0; padding-right: 0; }

/* Ниже — правила, которых в файле не было вовсе: классы стояли в разметке,
   а стиля под ними не оказалось, и элементы ехали базовыми 16px. Заметнее
   всего это било по водяному знаку (просто строка вместо контурных букв) и
   по точке статуса, которая без размера схлопывалась в ноль. */

/* Карточка объекта, §08. */
.sgcard__money { display: flex; align-items: baseline; gap: 6px; }
.sgcard__price { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }

.sgcard__per {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgcard__allin { font-size: 12px; line-height: 1.35; color: rgba(var(--ink-rgb), 0.55); }
.sgcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.sgcard__tag {
  padding: 4px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

/* Заголовок врезки: тон наследуется от самой врезки — он и есть вердикт. */
.sgnote__t {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}

.sgnote--warn .sgnote__t { color: var(--warn); }
.sgnote--good .sgnote__t { color: var(--good); }

/* Лента этапов, §09. */
.sgtl__n { font-family: var(--serif); font-size: 18px; line-height: 1.1; color: var(--ink); }

.sgtl__s {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgtl__i--done .sgtl__s { color: var(--good); }
.sgtl__i--now .sgtl__s { color: var(--accent); }

/* Строка чеклиста, §14. */
.sgcheck__t { display: block; font-size: 13px; line-height: 1.35; color: var(--ink); }
.sgcheck__m { display: block; font-size: 12px; font-weight: 300; line-height: 1.35; color: rgba(var(--ink-rgb), 0.42); }

/* Легенда и стопка, §09. */
.sgleg__i { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; }
.sgmix__s { display: block; height: 100%; }

/* Знаки, §16: точка без размера схлопывалась, квадраты шли без рамки. */
.sgmark__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

.sgmark__sq {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
}

.sgmark__sq + .sgmark__sq { margin-left: 4px; }
.sgmark__svg { display: block; }

/* Водяной знак, §15: контурные буквы позади заголовка, и только контур. */
.sgwatermark { position: relative; display: block; }

.sgwatermark__mark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--wordmark);
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.09);
  pointer-events: none;
}

.sgwatermark__t {
  position: relative;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

.sgwatermark__t em { font-style: italic; color: var(--accent); }

/* --- 13 / денежный блок ---------------------------------------------------- */

.sgmoney { margin-top: 14px; }

.sgmoney__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 132px;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
}

.sgmoney__l { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink); }
.sgmoney__n { font-size: 12px; color: rgba(var(--ink-rgb), 0.42); }

/* Колонка основания — то, что делает цифру проверяемой. Без неё сумма это
   утверждение, а с ней — вывод. */
.sgmoney__b { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.4); }
.sgmoney__a { font-family: var(--serif); font-size: 19px; text-align: right; color: var(--ink); }

/* Тон суммы — это вердикт: приглушённая цифра проходная, золотая главная,
   оранжевая та, которую ещё предстоит уточнить на месте. */
.sgmoney__a--dim { color: rgba(var(--ink-rgb), 0.75); }
.sgmoney__a--gold { color: var(--accent); }
.sgmoney__a--warn { color: var(--warn); }

/* Итог: подпись слева, сумма справа, между ними линия сверху. */
.sgtotal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.sgtotal__left { display: flex; flex-direction: column; gap: 4px; }

.sgtotal__tl {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.sgtotal__per { font-size: 12px; font-weight: 300; line-height: 1.3; color: rgba(var(--ink-rgb), 0.45); }
.sgtotal__sum { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--accent); }

.sgbar__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }
.sgbar__l > span { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: rgba(var(--ink-rgb), 0.72); }
.sgbar__l--self { color: var(--accent); }
.sgbar__l--self > span { color: var(--ink); }
.sgbar { display: block; height: 8px; margin-top: 9px; background: rgba(var(--ink-rgb), 0.12); }
.sgbar__f { display: block; height: 100%; }
.sgbar__f--a { width: 90%; background: var(--accent); }
.sgbar__f--b { width: 100%; background: rgba(var(--ink-rgb), 0.22); }

/* --- 14 / остальные части --------------------------------------------------- */

.sgparts {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}

.sgpart { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: var(--panel-solid); min-width: 0; }
.sgpart__n { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sgpart__why { font-size: 12px; line-height: 1.5; color: rgba(var(--ink-rgb), 0.5); }

.sgstat { display: flex; flex-direction: column; gap: 4px; }
.sgstat__v { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--ink); }
.sgstat__l { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); }
.sgstat__d { font-size: 12px; color: var(--good); }

.sgperson { display: flex; align-items: center; gap: 12px; }

/* Кружок означает «человек» — единственная причина, по которой в этой
   системе вообще что-то скруглено. */
.sgperson__m {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
}

.sgperson__nm { display: block; font-size: 14px; color: var(--ink); }
.sgperson__r { display: block; font-size: 12px; color: rgba(var(--ink-rgb), 0.5); }

.sgcheck { display: flex; flex-direction: column; gap: 9px; }
.sgcheck__i {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.66);
}
.sgcheck__i--ok > span:first-child { color: var(--good); }
.sgcheck__i--no > span:first-child { color: var(--warn); }

.sgdoc {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

/* Буква в квадрате, а не иконка типа файла: тип ничего не говорит о том,
   что внутри, а буква — говорит. */
.sgdoc__t {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.66);
}

.sgdoc__nm { display: block; font-size: 13px; color: var(--ink); }
.sgdoc__m { display: block; font-size: 12px; color: rgba(var(--ink-rgb), 0.42); }

.sgbub { display: block; max-width: 92%; padding: 11px 14px; border: 1px solid; font-size: 13px; line-height: 1.5; }
.sgbub--them { border-color: rgba(var(--accent-rgb), 0.4); background: var(--panel-hover); color: rgba(var(--ink-rgb), 0.78); }
.sgbub--you { align-self: flex-end; margin-left: auto; border-color: rgba(var(--ink-rgb), 0.2); background: var(--field); color: rgba(var(--ink-rgb), 0.66); }

/* Слоты идут сеткой два на два, а не строкой: так они читаются как
   «два дня по два времени», а не как список из четырёх. */
.sgslots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sgslot {
  padding: 9px 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: rgba(var(--ink-rgb), 0.72);
}

.sgslot.is-on { border-color: transparent; background: var(--accent); color: var(--on-accent); }

.sgsteps2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.16);
}
.sgstep2 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  border-top: 2px solid transparent;
  background: var(--panel-tile);
}

.sgstep2__top { display: flex; align-items: center; justify-content: space-between; }

.sgstep2__n {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: rgba(var(--ink-rgb), 0.4);
}

.sgstep2__t { font-size: 12px; line-height: 1.4; color: var(--ink); }
.sgstep2__tick { font-size: 12px; color: var(--good); }

.sgstep2__dot {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 50%;
}

/* Текущий шаг: золотая линия сверху, лёгкий накат и имя золотом. */
.sgstep2.is-now { border-top-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.sgstep2.is-now .sgstep2__t { color: var(--accent); }

/* Вкладки в рамках, а не подчёркиванием: рядом с ними стоят чипы, и одна
   общая линия снизу склеила бы два разных семейства в одно. */
.sgtabs { display: flex; flex-wrap: wrap; gap: 8px; }

.sgtab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  font-size: 12px;
  line-height: 1.2;
  color: rgba(var(--ink-rgb), 0.65);
}

.sgtab.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.sgtab__n { font-size: 12px; opacity: 0.75; }

/* --- 15 / оболочка --------------------------------------------------------- */

/* Единственная тень на всём сайте. Глубина везде набирается волосяными
   линиями и оттенками панелей, а не размытием. */
.sgdrop {
  display: block;
  margin-top: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-top: 1px solid rgba(var(--accent-rgb), 0.7);
  background: var(--menu-bg);
  box-shadow: 0 30px 60px -26px rgba(var(--ink-rgb), 0.24);
}

.sgdrop__c { display: flex; flex-direction: column; gap: 9px; padding-top: 9px; }
.sgdrop__h {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent);
}
.sgdrop__r { font-size: 13px; color: rgba(var(--ink-rgb), 0.78); }
.sgdrop__r.is-on { color: var(--accent); }

.sgutil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
.sgutil__sep { color: rgba(var(--ink-rgb), 0.28); }

.sgutil__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: sgpulse 1.8s ease-in-out infinite alternate;
}

@keyframes sgpulse { from { opacity: 0.35; } to { opacity: 1; } }

.sgmark2 {
  display: block;
  margin-top: 14px;
  font-family: var(--wordmark);
  font-size: 62px;
  line-height: 1;
  letter-spacing: 0.08em;
  -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.14);
  color: transparent;
}

/* --- 16 / знаки ------------------------------------------------------------ */

/* Ряд знаков у прототипа без общей рамки: это словарь, а не таблица. */
.sgmarks {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.sgmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.sgmark__g {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
}

.sgmark__g--ink50 { color: rgba(var(--ink-rgb), 0.5); }
.sgmark__g--ink35 { color: rgba(var(--ink-rgb), 0.35); }
.sgmark__g--good { font-size: 22px; color: var(--good); }
.sgmark__g--warn { font-size: 22px; color: var(--warn); }
.sgmark__g--small { font-size: 16px; color: var(--ink); }
.sgmark__m {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

@media (max-width: 1023px) {
  .sgform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sgform__grid { grid-template-columns: 1fr; }
  .sgfield--span2 { grid-column: auto; }
  .sgmoney__r { grid-template-columns: minmax(0, 1fr) 104px; }
  .sgmoney__b { display: none; }
  .sgsteps2 { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .sgb, .sgchip, .sgin, .sgtog { transition: none; }
  .sgutil__dot { animation: none; }
}

/* Выведенный счётчик в линии раздела — часть паттерна: число всегда
   считается из списка под ним, а не набирается руками. */
.sgrule__count { margin-left: 13px; color: rgba(var(--ink-rgb), 0.5); }


/* ==========================================================================
   100. Портретные карточки — пятая раскладка регистра, префикс `lv`
   ==========================================================================
   Собрано по `_design/list-vertical-new/README.md` и вымерено по
   `list-vertical.dc.html`, который выигрывает везде, где они расходятся.

   ДВА ПРАВИЛА, РАДИ КОТОРЫХ РАСКЛАДКА И СУЩЕСТВУЕТ
   ------------------------------------------------
   1. Цена никогда не одна. Под ней всегда цена за м² и полоса района —
      без полосы карточке незачем быть выше сеточной.
   2. Ховер показывает, а не украшает. Чип активности и спарклайн скрыты в
      покое: «кто-то ещё смотрит?» — вопрос второго порядка, и он не должен
      спорить с ценой.

   ПОЧЕМУ КАРТОЧКА ГАСНЕТ
   ----------------------
   Ненаведённые уходят в `opacity: 0.62`. Это единственный сильный жест
   раскладки: когда на экране восемь карточек, читаемой восьмую делает то,
   что семь притушены. Курсора на телефоне нет, поэтому ниже 1180px гашение
   снимается целиком, а блок активности показывается всегда.

   Заливки штриховок, высоты столбиков и позиции маркера полосы генерирует
   `build_listvertical.py` из `data/cycles.json` — блок между маркерами
   руками не трогать. Инлайновых стилей в шаблоне нет (CLAUDE.md), поэтому
   всё, что в прототипе было атрибутом, здесь класс.

   Микроподписи здесь 12px, а не 8-10px прототипа: пол Envato. Трекинг
   оставлен в `em`, поэтому рисунок строки сохраняется.
   ========================================================================== */

.lvpage { margin: 0 var(--pad); padding-bottom: clamp(40px, 6vh, 70px); }

/* Всё в этом разделе показывается и прячется атрибутом `hidden`, а `display`
   ниже по файлу его перебивает — поэтому запрет объявляем здесь и один раз.
   Без него скрытая карточка продолжает занимать клетку сетки, а пустое
   состояние висит под листом, на котором восемь карточек. */
.lvpage [hidden] { display: none; }

/* --- панель поиска -------------------------------------------------------- */

.lvsearch {
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel);
}

.lvsearch__tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.lvtab {
  padding: 15px 30px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lvtab:hover { color: var(--ink); }
.lvtab.is-on { background: var(--accent); color: var(--on-accent); }
.lvtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.lvsearch__note {
  margin-left: auto;
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* Шесть колонок прототипа: 435 / 272 / 272 / 272 / 245 / 218 при 1714px
   свободных — это ровно 1.6 : 1 : 1 : 1 : 0.9 : 0.8. */
.lvsearch__fields {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 0.9fr 0.8fr;
  gap: 24px;
  padding: 24px 26px 26px;
}

.lvfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.lvfield__label {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.lvfield__in {
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.lvfield__in:focus { outline: none; border-bottom-color: var(--accent); }
.lvfield__in::placeholder { color: rgba(var(--ink-rgb), 0.38); }
.lvfield__in option { background: var(--menu-bg); color: var(--ink); }

.lvsearch__go { display: flex; align-items: flex-end; gap: 14px; }

.lvsearch__more {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.lvsearch__more:hover { color: var(--accent); }

.lvsearch__btn {
  flex: 1 1 auto;
  padding: 15px 32px;
  border: 0;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.lvsearch__btn:hover { background: var(--accent-hover); }

/* --- чипы и счётчик ------------------------------------------------------- */

.lvchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}

.lvchip {
  padding: 9px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.lvchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }

.lvchip.is-on {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.lvchips__count {
  margin-left: auto;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* --- сетка ---------------------------------------------------------------- */

.lvgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  margin-top: 28px;
}

/* --- карточка ------------------------------------------------------------- */

.lvcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  opacity: 0.62;
  transform: translateY(0);
  transition: opacity 0.3s ease,
              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
}

/* `is-on` ставит скрипт: при загрузке — первой карточке, дальше — той, на
   которой курсор. Уход курсора с сетки возвращает подсветку на первую, иначе
   лист остаётся равномерно тусклым и читать нечего. */
.lvcard.is-on {
  border-color: var(--accent);
  opacity: 1;
  transform: translateY(-4px);
}

.lvcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lvcard__photo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  /* Пропорция, а не высота: при 300px и карточке в 600px на 2560 снимок
     снова становится полоской 2:1. Правило то же, что у остальных
     листингов сайта. */
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}

.lvcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Штриховка — тот же чертёжный мотив, что на остальных страницах. Она же
   не даёт незаполненному слоту читаться как дыра. */
.lvcard__hatch {
  position: absolute;
  inset: 0;
  background-size: 22px 22px;
  opacity: 0.3;
  transition: opacity 0.35s ease;
}

.lvcard.is-on .lvcard__hatch { opacity: 0.1; }

.lvcrop {
  position: absolute;
  width: 13px;
  height: 13px;
}

.lvcrop--tl {
  top: 12px;
  left: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.85);
  border-left: 1px solid rgba(var(--ink-rgb), 0.85);
}

.lvcrop--br {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.85);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.85);
}

/* Слева 34px, а не 16: плашка обязана разойтись с меткой кадрирования. */
.lvcard__deal {
  position: absolute;
  top: 16px;
  left: 34px;
  padding: 5px 11px;
  background: var(--veil);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.lvcard__activity {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lvcard.is-on .lvcard__activity { opacity: 1; }

.lvchip2 {
  padding: 5px 11px;
  background: var(--veil-soft);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-ink);
}

.lvspark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  padding: 4px 8px;
  background: var(--veil-soft);
}

.lvspark__b { width: 4px; background: rgba(var(--hero-ink-rgb), 0.45); }
.lvspark__b--last { background: var(--accent); }

/* --- полоса листа --------------------------------------------------------- */

.lvcard__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 20px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.lvstrip__sheet { white-space: nowrap; }
.lvstrip__right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.lvstrip__tick {
  flex: 0 0 auto;
  width: 16px;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lvcard.is-on .lvstrip__tick { width: 36px; }

.lvstrip__type {
  overflow: hidden;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- тело ----------------------------------------------------------------- */

/* Тело обязано забрать всю свободную высоту карточки — иначе распорка
   внутри него упирается в собственную высоту тела, и у карточки с заметкой
   в две строки спек-строка уезжает на 20px ниже, чем у соседней. Ряд
   перестаёт читаться таблицей, ради чего он и выровнен по высоте. */
.lvcard__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 20px 0; }

.lvcard__title {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.08;
  color: var(--ink);
}

.lvcard__addr {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.58);
}

.lvcard__money { margin-top: 16px; }

/* `nowrap` здесь обязателен, а не украшение: разделитель тысяч на этом сайте
   пробел, и без запрета «€2 480 000» переносится на нём и читается как
   «€2 480 / 000» — другое число. По той же причине цена, цена за м² и дельта
   стоят тремя блочными строками, а не в одну строку через `space-between`:
   длина дельты меняется от карточки к карточке и раньше решала, перенесётся
   цена или нет. */
.lvcard__price {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.lvcard__per {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  white-space: nowrap;
}

.lvcard__delta {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.lvcard__delta--up { color: var(--accent); }

/* --- полоса района -------------------------------------------------------- */

.lvband { margin-top: 18px; }

.lvband__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.lvband__med { color: var(--accent); }

.lvband__track {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 11px;
  background: rgba(var(--ink-rgb), 0.2);
}

/* Маркер круглый — одно из двух скруглений на всей карточке. Позиция
   считается от реального распределения района: маркер, который спорит с
   подписанной медианой, хуже, чем отсутствие полосы. */
.lvband__mark {
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lvcard__note {
  margin: 16px 0 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.5);
}

/* Распорка держит спек-строки и подвалы карточек на одной линии, когда
   заметки разной длины. */
.lvcard__spacer { flex: 1 1 0; }

/* --- спецификация --------------------------------------------------------- */

.lvspec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}

.lvspec__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 11px 14px;
}

.lvspec__cell + .lvspec__cell { border-left: 1px solid rgba(var(--ink-rgb), 0.1); }

.lvspec__label,
.lvprov__label {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.lvspec__value {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}

/* Внизу — происхождение файла, и оно набрано мельче: сверху то, по чему
   ищут, снизу то, чем это подтверждается. */
.lvprov {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.lvprov__cell {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
}

.lvprov__cell + .lvprov__cell { border-left: 1px solid rgba(var(--ink-rgb), 0.1); }
.lvprov__value { font-size: 12px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.72); }

/* --- подвал карточки ------------------------------------------------------ */

.lvagent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 20px 13px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.lvagent__who { display: flex; align-items: center; gap: 10px; min-width: 0; }

.lvagent__disc {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  font-size: 12px;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.58);
}

.lvagent__name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(var(--ink-rgb), 0.58);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvagent__open {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  transition: color 0.3s ease;
}

.lvcard.is-on .lvagent__open { color: var(--accent); }

/* --- пустое состояние ----------------------------------------------------- */

.lvempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: clamp(56px, 9vh, 96px) 0;
  border: 1px dashed rgba(var(--ink-rgb), 0.2);
  text-align: center;
}

.lvempty__eyebrow {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.lvempty__t {
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.1;
  color: var(--ink);
}

.lvempty__p {
  max-width: 460px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.66);
}

.lvempty__btn {
  margin-top: 6px;
  padding: 14px 28px;
  border: 0;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.lvempty__btn:hover { background: var(--accent-hover); }

/* --- пагинатор ------------------------------------------------------------ */

.lvpager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: clamp(34px, 4.6vh, 52px);
  padding-top: clamp(34px, 4.6vh, 52px);
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}

.lvpager__showing {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.lvpager__rail { display: flex; align-items: center; gap: 8px; }

.lvpager__step {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.lvpager__step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* Первый лист: «Prev» гаснет, но остаётся на месте — исчезающая кнопка
   сдвигает ряд и человек промахивается по «Next». */
.lvpager__step.is-off,
.lvpager__step:disabled { color: rgba(var(--ink-rgb), 0.28); cursor: default; }

.lvpager__step--next { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.lvpager__step--next:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--on-accent); }
.lvpager__step--next.is-off { border-color: rgba(var(--ink-rgb), 0.22); background: none; }

.lvpager__step:focus-visible,
.lvpagenum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lvpagenum {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.lvpagenum:hover { border-color: var(--accent); color: var(--accent); }
.lvpagenum.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); cursor: default; }

/* >>> lv-cycles (генерирует build_listvertical.py — руками не править) */
/* Четыре штриховки: цвет светлее чернил, потому что лежат они на
   фотографии, а не на панели. */
.lvcard__hatch--0 { background-image: repeating-linear-gradient(45deg, rgba(255,252,245,0.5) 0 1px, transparent 1px 9px); }
.lvcard__hatch--1 { background-image: repeating-linear-gradient(0deg, rgba(255,252,245,0.45) 0 1px, transparent 1px 10px); }
.lvcard__hatch--2 { background-image: radial-gradient(rgba(255,252,245,0.5) 1px, transparent 1.6px); }
.lvcard__hatch--3 { background-image: repeating-linear-gradient(135deg, rgba(255,252,245,0.4) 0 1px, transparent 1px 8px); }

/* Столбики спарклайна: высота в процентах от плашки. */
.lvspark__b--h30 { height: 30%; }
.lvspark__b--h34 { height: 34%; }
.lvspark__b--h38 { height: 38%; }
.lvspark__b--h40 { height: 40%; }
.lvspark__b--h42 { height: 42%; }
.lvspark__b--h44 { height: 44%; }
.lvspark__b--h46 { height: 46%; }
.lvspark__b--h48 { height: 48%; }
.lvspark__b--h50 { height: 50%; }
.lvspark__b--h52 { height: 52%; }
.lvspark__b--h54 { height: 54%; }
.lvspark__b--h55 { height: 55%; }
.lvspark__b--h56 { height: 56%; }
.lvspark__b--h58 { height: 58%; }
.lvspark__b--h62 { height: 62%; }
.lvspark__b--h66 { height: 66%; }

/* Где стоит маркер в полосе района. */
.lvband__mark--38 { left: 38%; }
.lvband__mark--46 { left: 46%; }
.lvband__mark--58 { left: 58%; }
.lvband__mark--64 { left: 64%; }
.lvband__mark--72 { left: 72%; }
.lvband__mark--80 { left: 80%; }
/* <<< lv-cycles */

/* --- планшет и телефон ---------------------------------------------------- */

/* Курсора здесь нет, поэтому гашение снимается целиком, а блок активности
   показывается всегда: раскладка, читаемость которой зависит от мыши, на
   телефоне не работает. */
@media (max-width: 1179px) {
  .lvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvcard__photo { aspect-ratio: 4 / 3; }
  .lvcard { opacity: 1; transform: none; }
  .lvcard__activity { opacity: 1; }
  .lvcard__hatch { opacity: 0.16; }
  .lvcard__title { font-size: 23px; }
  .lvcard__price { font-size: 25px; }
  .lvsearch__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvsearch__go { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .lvgrid { grid-template-columns: minmax(0, 1fr); }
  .lvcard__photo { aspect-ratio: 4 / 3; }
  .lvcard__title { font-size: 22px; }
  .lvcard__price { font-size: 24px; }
  .lvsearch__fields { grid-template-columns: minmax(0, 1fr); }
  .lvsearch__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lvtab { padding: 14px 8px; letter-spacing: 0.08em; }
  .lvsearch__note { display: none; }
  .lvchips { flex-wrap: nowrap; overflow-x: auto; }
  .lvchips__count { flex: 0 0 auto; }
  .lvprov { grid-template-columns: minmax(0, 1fr); }
  .lvprov__cell + .lvprov__cell { border-top: 1px solid rgba(var(--ink-rgb), 0.1); border-left: 0; }
  .lvpagenum { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lvcard,
  .lvcard__hatch,
  .lvcard__activity,
  .lvstrip__tick,
  .lvband__mark { transition-duration: 0s; }
}


/* ==========================================================================
   101. Три вида — один результат, три способа его прочесть, префикс `sw`
   ==========================================================================
   Собрано по `_design/listing-switcher/README.md` и вымерено по
   `listing-switcher.dc.html`, который выигрывает при расхождениях.

   РАСКЛАДКУ ВЫБИРАЕТ ЧИТАТЕЛЬ
   ---------------------------
   Кто сравнивает цены — хочет строки. Кто просматривает — карточки. Кому
   важно «где» — карту. Файлы, фильтры и сортировка одни и те же; меняется
   только отрисовка. Отсюда единственное отличие видов друг от друга по
   существу — размер листа: 8, 5 и 6.

   ПОЛОСА РАЙОНА ТОЛЬКО В СТРОКАХ
   ------------------------------
   Ей нужна ширина. В карточке 4-в-ряд она либо нечитаема, либо тянет
   карточку вверх — что и делает раскладка Portrait cards, там ради неё
   карточка выше. Здесь мы это не повторяем.

   ВСЕ ТРИ ВИДА ЛЕЖАТ В РАЗМЕТКЕ
   -----------------------------
   Лишние скрыты `hidden`. Прототип создаёт и уничтожает карту при каждом
   переключении и городит вокруг этого четыре правила жизненного цикла;
   живая карта в скрытом контейнере проще, а единственный её вопрос — размер
   — закрывает наблюдатель в общем блоке карты.

   Штриховки и позиции маркера полосы генерирует `build_listingswitcher.py`
   в блок `sw-cycles`. Инлайновых стилей в шаблоне нет (CLAUDE.md).
   Микроподписи 12px вместо 8-10px прототипа — пол Envato, трекинг в `em`.
   ========================================================================== */

.swpage { margin: 0 var(--pad); padding: 37px 0 64px; }

/* Всё здесь показывается и прячется атрибутом, а `display` ниже по файлу его
   перебивает — поэтому запрет объявлен один раз и рядом с корнем. */
.swpage [hidden] { display: none; }

/* --- поиск и чипы --------------------------------------------------------- */

.swsearch {
  margin-bottom: 26px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--panel);
}

.swsearch__tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.swtab {
  padding: 15px 30px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.swtab:hover { color: var(--ink); }
.swtab.is-on { background: var(--accent); color: var(--on-accent); }
.swtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.swsearch__note {
  margin-left: auto;
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

/* Семь колонок: пять полей, ячейка Refine и кнопка. Доли сняты с прототипа
   (367 / 253 / 253 / 228 / 228 / 266 / 119 при 1716px свободных). */
.swsearch__fields {
  display: grid;
  grid-template-columns: 1.61fr 1.11fr 1.11fr 1fr 1fr 1.17fr 0.52fr;
  /* Панель уточнения раскрывается из своей ячейки и должна лежать поверх
     карточек, а не растягивать полосу. */
  position: relative;
  align-items: end;
  gap: 20px;
  padding: 24px 26px 26px;
}

.swfield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.swfield__label {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.swfield__in {
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.swfield__in:focus { outline: none; border-bottom-color: var(--accent); }
.swfield__in::placeholder { color: rgba(var(--ink-rgb), 0.38); }
.swfield__in option { background: var(--menu-bg); color: var(--ink); }


.swsearch__btn {
  height: 45px;
  padding: 0 20px;
  border: 0;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.swsearch__btn:hover { background: var(--accent-hover); }

/* Отбивку задаёт нижний край ряда, а не верхний: так расстояние принадлежит
   блоку, который заканчивается, и не складывается с чужим. */
.swchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.swchip {
  padding: 8px 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.swchip:hover { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }

.swchip.is-on {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

/* --- строка управления ---------------------------------------------------- */

.swctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 2px 16px;
}

/* Подпись слева знает про вид: в карточках и строках это «13 files · sheet 1
   of 2», на карте — «Pin P1 · 13 on this map». Ранняя сборка печатала
   карточную формулировку во всех трёх, и вид «карточки» объявлял номер пина,
   не показывая карты. */
.swctl__label,
.swctl__note {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.swctl__right { display: flex; align-items: center; gap: 16px; }

.swviews { display: flex; border: 1px solid rgba(var(--ink-rgb), 0.2); }

.swview {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 0;
  background: none;
  color: rgba(var(--ink-rgb), 0.45);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.swview + .swview { border-left: 1px solid rgba(var(--ink-rgb), 0.2); }
.swview:hover { color: var(--ink); }
.swview.is-on { background: var(--accent); color: var(--on-accent); }
.swview:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Родную стрелку `<select>` браузер прижимает к краю, и отступом её не
   сдвинуть — поэтому она снята, а своя стоит за 16px от края. */
.swsort { position: relative; display: block; }

.swsort__sel {
  height: 40px;
  padding: 0 40px 0 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.2s ease;
}

.swsort__sel:hover { border-color: var(--accent); }
.swsort__sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swsort__sel option { background: var(--menu-bg); color: var(--ink); }

.swsort__chev {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: rgba(var(--ink-rgb), 0.5);
  pointer-events: none;
}

/* --- общее для всех трёх видов -------------------------------------------- */

.swphoto__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.swphoto__hatch {
  position: absolute;
  inset: 0;
  background-size: 22px 22px;
  opacity: 0.28;
  transition: opacity 0.35s ease;
}

.swcard.is-on .swphoto__hatch,
.swrow.is-on .swphoto__hatch,
.swmap__card.is-on .swphoto__hatch { opacity: 0.1; }

/* Плашка пина — та же метка, что стоит на карте: на карточке она называет
   файл, на карте она же его находит. */
.swpin {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  background: var(--veil-soft);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-ink);
}

.swpin.is-on { background: var(--accent); color: var(--on-accent); }

.swstrip__sheet,
.swstrip__deal {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.42);
}

.swstrip__deal { margin-left: auto; }
.swcard.is-on .swstrip__deal,
.swrow.is-on .swstrip__deal { color: var(--accent); }

.swcard__kind {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.swcard__addr {
  display: block;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(var(--ink-rgb), 0.5);
}

/* Цена, цена за м² и дельта — три блочные строки, и первые две с `nowrap`.
   Разделитель тысяч на сайте пробел: без запрета «€2 480 000» переносится и
   читается как «€2 480 / 000», другое число. Дельта рядом с ценой стоять не
   должна — её длина тогда решает, перенесётся цена или нет. */
.swmoney__price {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.swmoney__price--row { font-size: 27px; }
.swmoney__price--map { font-size: 22px; }

.swmoney__per {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  white-space: nowrap;
}

.swmoney__delta {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

.swmoney__delta--up { color: var(--accent); }

.swspec__label {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.38);
}

.swspec__value { font-size: 12px; line-height: 1.4; color: rgba(var(--ink-rgb), 0.72); }

/* --- вид «карточки»: четыре в ряд, восемь на лист ------------------------- */

.swgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.swcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

.swcard.is-on { border-color: var(--accent); transform: translateY(-4px); }
.swcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.swcard__strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
}

.swcard__photo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  /* Не фиксированная высота, а пропорция — общее правило листингов этого
     сайта (см. `.gcard__media`): фиксируешь высоту, и на широком экране
     карточка растёт вширь, а снимок остаётся полоской. Здесь так и было:
     455×210 — это 2.17:1, объект на таком кадре не разглядеть. */
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}

.swcard__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 16px 18px 0; }

.swcard__title {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}

.swspec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.swspec__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 11px 14px;
}

.swspec__cell + .swspec__cell { border-left: 1px solid rgba(var(--ink-rgb), 0.1); }
.swmoney { display: block; padding: 15px 18px 17px; }

/* --- вид «строки»: во всю ширину, пять на лист ---------------------------- */

.swrows { display: flex; flex-direction: column; gap: 18px; }

.swrow {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.swrow.is-on { border-color: var(--accent); }
.swrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.swrow__photo {
  position: relative;
  display: block;
  min-height: 280px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06);
}

.swrow__side { display: flex; flex-direction: column; min-width: 0; }

.swrow__strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.swrow__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 26px;
  padding: 20px 22px 0;
}

.swrow__left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.swrow__right { min-width: 0; }

.swrow__title {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.08;
  color: var(--ink);
}

.swrow__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.5);
}

/* Полоса района. Заливка идёт до маркера, а не до края: это «где стоит
   именно эта цена», а не шкала. Маркер и заливка держат один процент —
   расхождение здесь читается как ошибка данных, и это хуже, чем её нет. */
.swband { display: block; margin-top: 12px; }

.swband__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.swband__med { color: var(--accent); }

.swband__track {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 9px;
  background: rgba(var(--ink-rgb), 0.16);
}

.swband__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); }

.swband__mark {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 9px;
  background: var(--ink);
}

.swrow__spec {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 20px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.swrow__spec .swspec__cell { padding: 12px 18px; }

.swrow__agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 13px 22px;
}

.swrow__who { font-size: 12px; font-weight: 300; color: rgba(var(--ink-rgb), 0.5); }

.swrow__open {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
  transition: color 0.3s ease;
}

.swrow.is-on .swrow__open { color: var(--accent); }

/* --- вид «карта»: список слева, карта справа ------------------------------ */

/* Режим карты сделан так же, как на `map-list.html` — там эта раскладка
   работает с 9 августа, и заводить ей вторую версию незачем. Оттуда взято
   всё: обе колонки одной фиксированной высоты, список скроллится внутри
   своей, карта заполняет свою.

   Нижний край списка приходится на середину карточки, и это не дефект, а
   принятый на сайте знак: у `.mapsplit__rail` про это написано прямо —
   «rail can end mid-card — that is the cue that there is more to scroll». */
.swmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  height: 860px;
}

/* Карточка не на текущем листе: из списка убрана, но для карты существует —
   её пин остаётся на месте. Прятать её `hidden` нельзя, по нему общий блок
   карты и отбирает, что пинить. */
.swmap__list .mapcard.is-off-sheet { display: none; }

/* Скроллер, и только он. Сетку карточек держит вложенный `.mapcards` —
   ровно как `.split__list` и `.mapcards` на map-list. Совместить их в одном
   элементе нельзя: сетка с фиксированной высотой сжимает свои ряды, а внутри
   карточки первой схлопывается фотография. */
.swmap__list {
  min-width: 0;
  height: 860px;
  overflow-y: auto;
  padding-right: 4px;
}



.swmap__panel {
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 860px;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: var(--panel);
}

.swmap__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.swmap__price { margin-left: auto; color: var(--accent); }
/* Фон колодца задаёт общий `.mapcanvas` — здесь только то, что холст
   забирает остаток панели: колонки обязаны кончаться на одной линии. */
.swmap__canvas { flex: 1 1 auto; height: auto; min-height: 0; }

/* --- пустое состояние и пагинатор ----------------------------------------- */

.swempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 240px;
  justify-content: center;
  padding: clamp(40px, 6vh, 72px) 0;
  border: 1px dashed rgba(var(--ink-rgb), 0.2);
  text-align: center;
}

.swempty__eyebrow {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.swempty__t {
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.1;
  color: var(--ink);
}

.swempty__p {
  max-width: 460px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.6);
}

.swempty__btn {
  margin-top: 6px;
  padding: 14px 28px;
  border: 0;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.swempty__btn:hover { background: var(--accent-hover); }

.swpager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.16);
}

.swpager__showing {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}

.swpager__rail { display: flex; align-items: center; gap: 8px; }

.swpager__step {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.swpager__step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.swpager__step.is-off,
.swpager__step:disabled { color: rgba(var(--ink-rgb), 0.28); cursor: default; }
.swpager__step--next { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.swpager__step--next:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--on-accent); }
.swpager__step--next.is-off { border-color: rgba(var(--ink-rgb), 0.22); background: none; }
.swpager__step:focus-visible,
.swpagenum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.swpagenum {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  background: none;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.swpagenum:hover { border-color: var(--accent); color: var(--accent); }
.swpagenum.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); cursor: default; }

/* >>> sw-cycles (генерирует build_listingswitcher.py — руками не править) */
/* Четыре штриховки чертёжного листа поверх фотографии. */
.swphoto__hatch--0 { background-image: repeating-linear-gradient(45deg, rgba(236,229,216,0.4) 0 1px, transparent 1px 8px); }
.swphoto__hatch--1 { background-image: repeating-linear-gradient(0deg, rgba(236,229,216,0.35) 0 1px, transparent 1px 9px); }
.swphoto__hatch--2 { background-image: radial-gradient(rgba(236,229,216,0.4) 1px, transparent 1.6px); }
.swphoto__hatch--3 { background-image: repeating-linear-gradient(135deg, rgba(217,160,74,0.5) 0 1px, transparent 1px 7px); }

/* Полоса района: заливка до маркера и сам маркер. */
.swband__fill--38 { width: 38%; }
.swband__mark--38 { left: 38%; }
.swband__fill--46 { width: 46%; }
.swband__mark--46 { left: 46%; }
.swband__fill--58 { width: 58%; }
.swband__mark--58 { left: 58%; }
.swband__fill--64 { width: 64%; }
.swband__mark--64 { left: 64%; }
.swband__fill--72 { width: 72%; }
.swband__mark--72 { left: 72%; }
.swband__fill--80 { width: 80%; }
.swband__mark--80 { left: 80%; }
/* <<< sw-cycles */

/* --- планшет и телефон ---------------------------------------------------- */

@media (max-width: 1179px) {
  .swgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swcard { transform: none; }
  .swsearch__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swsearch__btn { grid-column: 1 / -1; }

  /* Фотография строки становится полосой над текстом: 420px колонка на
     планшете съедает всё, что справа от неё. */
  .swrow { grid-template-columns: minmax(0, 1fr); }
  .swrow__photo { aspect-ratio: 16 / 9; min-height: 0; }
  .swrow__head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .swrow__spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Карта уходит наверх, список под неё: липкая колонка в половину экрана
     на планшете оставляет списку полосу, в которой ничего не читается. */
  .swmap { grid-template-columns: minmax(0, 1fr); }
  .swmap { height: auto; }
  .swmap__panel { order: -1; height: auto; }
  .swmap__list { height: auto; overflow: visible; padding-right: 0; }
  .swmap__canvas { flex: 0 0 auto; height: 380px; }
}

@media (max-width: 767px) {
  .swgrid { grid-template-columns: minmax(0, 1fr); }
  .swcard__photo { aspect-ratio: 4 / 3; }
  .swsearch__fields { grid-template-columns: minmax(0, 1fr); }
  .swsearch__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swtab { padding: 14px 8px; letter-spacing: 0.08em; }
  .swsearch__note { display: none; }
  .swchips { flex-wrap: nowrap; overflow-x: auto; }
  /* На узком экране группа справа не помещается в строку: заметка, селект и
     переключатель дают 427px при 390 доступных. Разрешаем ей переноситься и
     занимать всю ширину, а селекту — сжиматься. */
  .swctl { align-items: stretch; flex-direction: column; gap: 14px; }
  .swctl__right { flex-wrap: wrap; width: 100%; }
  .swsort { flex: 1 1 140px; min-width: 0; }
  .swsort__sel { width: 100%; }

  /* Ряд чипов — горизонтальный скроллер, и он обязан обрезать своё
     содержимое, а не растягивать страницу. */
  .swchips { min-width: 0; }
  .swrow__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swmap__list .mapcards { grid-template-columns: minmax(0, 1fr); }
  .swmap__canvas { flex: 0 0 auto; height: 320px; }
  .swpagenum { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swcard,
  .swrow,
  .swmap__card,
  .swphoto__hatch { transition-duration: 0s; }
}

/* ==========================================================================
   102. Мастерская поиска — регистр без оболочки, префикс `ws`
   ==========================================================================
   Собрано по `_design/search-workspace/README.md`, вымерено по
   `search-workspace.dc.html`.

   Страница — родной брат «Three views»: те же карточки, тот же конвейер, та
   же карта, тот же блок поведения. Поэтому здесь только то, чем она от него
   отличается, а всё общее берётся из секции 101 по классам `sw`.

   ОБОЛОЧКИ НЕТ, И ЭТО ВЕСЬ ЗАМЫСЕЛ
   --------------------------------
   Поисковая сессия — не страница, которую читают сверху вниз, а инструмент,
   в котором сидят. Каждая полоса хрома над результатами прокручивается на
   каждом запросе, а подвал обещает, что страница кончается, — чего результат
   поиска не делает. Возвращать шапку «ради навигации» нельзя: лого ведёт на
   главную, и это единственный выход по замыслу.

   ЧТО ЗАПРЕЩЕНО РАСКЛАДКОЙ КАРТЫ
   ------------------------------
   `data/layout.json` перечисляет три приёма, каждый из которых подвешивает
   высоту: `height: 100%` у ребёнка грида при `align-items: start`,
   `position: sticky` у панели карты внутри строки фиксированной высоты и
   процентные высоты над самим `#avava-map` без разрешённой высоты родителя.
   Здесь ни одного из них нет: строка задаёт высоту явно, обе колонки её
   наследуют через `stretch`, а карта внутри своей панели растёт флексом.
   ========================================================================== */

.wsbody { background: var(--bg); }

/* Отступ вместо гаттера: выравниваться не на что — оболочки нет. */
.wspage {
  margin: 0;
  padding: 24px clamp(20px, 2.4vw, 32px);
}

/* Верхняя строка выше обычной: слева в ней лого в две строки. */
.wspage .swctl { align-items: flex-end; padding: 0 2px 22px; }

/* --- вид карты: 40 / 60 во весь экран ------------------------------------- */

/* >>> ws-layout (раскладка карты — читать «forbidden» в data/layout.json) */

/* Строка задаёт высоту явно и один раз. Обе колонки берут её через
   `stretch` — не через `height: 100%`, который при `align-items: start`
   разрешать нечему, и колонка схлопывается. */
.wsmap {
  grid-template-columns: 40% 60%;
  align-items: stretch;
  gap: 20px;
  height: calc(100vh - 48px);
  min-height: 620px;
}

/* Список прокручивается внутри себя, а не вместе со страницей: карта не
   должна уезжать с экрана, пока рядом читают карточки. Этим вид карты и
   отличается от секции с картой. */
.wsmap__list {
  height: auto;
  min-height: 0;
  padding-right: 6px;
  overflow-y: auto;
}

.wsmap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Панель — обычный флекс-столбец. Липкой ей быть нельзя: внутри строки
   фиксированной высоты `sticky` не к чему прилипать, и панель выпадает из
   потока вместе с картой. */
.wsmap__panel {
  height: auto;
  min-height: 0;
  overflow: hidden;
}

/* Карта забирает остаток панели флексом. Процент здесь запрещён: над `#avava-map`
   нет разрешённой высоты, и процент разрешается в ноль. */
.wsmap__canvas { flex: 1 1 auto; height: auto; min-height: 0; }

/* <<< ws-layout */

/* --- планшет и телефон ---------------------------------------------------- */

@media (max-width: 1179px) {
  /* Экран короткий и узкий: 40/60 превращается в одну колонку, карта уходит
     наверх, а высота отпускается — фиксировать её здесь значит отдать карте
     весь экран и спрятать список. */
  .wsmap { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .wsmap__panel { order: -1; height: auto; }
  .wsmap__list { height: auto; overflow: visible; padding-right: 0; }
  .wsmap__canvas { flex: 0 0 auto; height: 380px; }
}

@media (max-width: 767px) {
  .wspage { padding: 18px 16px; }
  .wsmap__cards { grid-template-columns: minmax(0, 1fr); }
  .wsmap__canvas { height: 320px; }
  .wspage .logo__sub { letter-spacing: 0.44em; }
}