/* ============================================================================
   Section 02 · Discovery. Loaded after site.css, on the five directory pages.
   ============================================================================

   The directory is the marketing site's third surface: light like the pages,
   but app chrome rather than a document — a fixed header, a results region
   that fills what is left, and no footer. Everything here reads the same
   tokens, so a band that sets .theme-dark inside it still resolves.

   The Property Card is site.css's .property unchanged. Only what section 02
   adds is in this file.
   ========================================================================== */

/* base.css paints <html> with --bg, and on <html> that resolves to the dark
   value — the mode class is on <body>. Any page whose content is shorter than
   the viewport therefore shows a dark band beneath it, and the directory's
   loading state and a two-column comparison are both that short. Giving the
   body the full viewport puts its own light fill behind them. */
body { min-height: 100vh; }

/* ------------------------------------------------------------------ header */

.dir {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--stroke);
}

.dir__top {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-2xl) 0;
}

.dir__brand {
  flex: 0 0 auto;
  font-size: var(--text-heading-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* The Search Field's note: filled must expose a clear affordance, because on
   touch there is otherwise no way back to the full list but selecting text. */
.dir__search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.dir__search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}

.dir__search-input {
  width: 100%;
  height: var(--control-md);
  padding: 0 44px 0 42px;
  font-family: inherit;
  font-size: var(--text-body-md);
  color: var(--ink);
  background: var(--control);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
}
.dir__search-input::placeholder { color: var(--ink-faint); }
.dir__search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.dir__search-input::-webkit-search-cancel-button { display: none; }

.dir__search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.dir__search-clear:hover { color: var(--ink); background: var(--control-hover); }

.dir__avatar { flex: 0 0 auto; text-decoration: none; }

/* ---------------------------------------------------------------- chip bar */

.dirbar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-2xl);
  flex-wrap: wrap;
}

.dirbar__chips { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.dirbar__applied { display: contents; }

.dirbar__count {
  margin: 0 0 0 auto;
  padding-right: var(--space-md);
  font-size: var(--text-body-sm);
  color: var(--ink-mute);
  white-space: nowrap;
}

/* A chip that is also a link (the cross-page ones on D6 and D7). */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }

/* The applied-filter chip: solid, and carrying its own remove. */
.chip--applied {
  gap: var(--space-xs);
  color: var(--ink-inverse);
  background: var(--ink);
  border-color: transparent;
}
.chip--applied span { font-size: var(--text-label-lg); line-height: 1; }

/* The Gridi / Orodha / Ramani switch. */
.views {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--control-subtle);
  border-radius: var(--radius-pill);
}
.views__btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.views__btn[aria-pressed="true"] { color: var(--ink-inverse); background: var(--ink); }
.views__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ layout */

/* D4 puts the panel beside the results and the grid reflows from three
   columns to two inside what is left. Same grid, one column fewer. */
/* The toggle sits beside the avatar on the app chrome, which has no nav bar
   to carry it. */
.dir__lang { flex: 0 0 auto; margin-left: var(--space-2xs); }

.dir-body { display: grid; grid-template-columns: 1fr; }

/* A grid item starts out refusing to be narrower than its own content, so
   anything wide inside one — the room rail's three 140px plates, the compare
   table's columns — stops being an overflow the item scrolls and becomes a
   width the page has to find. On a 375px screen that pushed the property
   page out to 468px and the comparison to 521px, and an element that has
   already been widened to fit has nothing left to scroll. Letting the items
   be as narrow as the track hands the overflow back to whoever styled it. */
.dir-body > * { min-width: 0; }
.dir-body.is-filtering { grid-template-columns: 340px 1fr; }

.results {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-2xl) 64px;
}
.dir-body.is-filtering .results { margin-inline: 0; padding-inline: var(--space-xl); }
.results--narrow { width: min(880px, 100%); }

.results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--text-body-md);
  color: var(--ink-dim);
}
.results__head p { margin: 0; }

.sortbox { display: flex; align-items: center; gap: var(--space-xs); }
.sortbox .field__label { white-space: nowrap; }
.field__input--sm { height: var(--control-sm); padding: 0 var(--space-sm); }

.results__more { display: flex; justify-content: center; margin-top: var(--space-lg); }

.pagehead { margin-bottom: var(--space-lg); }
.pagehead__title { margin: 0; font-size: clamp(26px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.pagehead__sub { margin: 4px 0 0; font-size: var(--text-body-md); color: var(--ink-mute); }

/* ------------------------------------------------------------ filter panel */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--panel);
  border-right: 1px solid var(--stroke);
}

.filters__head { display: flex; align-items: center; justify-content: space-between; }
.filters__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.filters__clear {
  font-family: inherit;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-mute);
  background: none;
  border: 0;
  cursor: pointer;
}
.filters__clear:hover { color: var(--ink); }

.filters__group { display: flex; flex-direction: column; gap: var(--space-sm); }
.filters__group + .filters__group { padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); }

.filters__label {
  margin: 0;
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.filters__apply { width: 100%; }
.filters .field { margin-bottom: 0; }

.range { display: flex; flex-direction: column; gap: 2px; }
.range__bounds {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-label-md);
  font-weight: 500;
  color: var(--ink-dim);
}
.range input[type="range"] { width: 100%; accent-color: var(--ink); }

.check, .switch {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-md);   /* the box is 20px; the row is the target */
  font-size: var(--text-body-md);
  cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--ink); }

/* Toggle — immediate effect, no Save button, as the component's note says. */
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  background: var(--control-subtle);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}
.switch__track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--ink-inverse);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  transition: left 0.15s ease;
}
.switch input:checked + .switch__track { background: var(--ink); border-color: transparent; }
.switch input:checked + .switch__track::after { left: 23px; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch.is-disabled { opacity: 0.45; cursor: default; }

/* ------------------------------------------------------------------- cards */

.property-cell { position: relative; }
.property-cell .property { height: 100%; }

/* The compare tick. Hidden until it is wanted — a checkbox on every card at
   rest turns a browsing grid into a form — and the body keeps a gap for it so
   it never lands on top of the price. */
.property-cell--pick .property__body { padding-bottom: 52px; }
.property__pick {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  opacity: 0;
  cursor: pointer;
}
.property-cell:hover .property__pick,
.property__pick:focus-within,
.property-cell.is-picked .property__pick { opacity: 1; }
.property-cell.is-picked .property { border-color: var(--ink); }

/* -------------------------------------------------------------------- rows */

.rows { display: flex; flex-direction: column; gap: var(--space-sm); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
}
.row:hover { border-color: var(--stroke-strong); box-shadow: var(--shadow-2); }
.row.is-current { background: var(--bg-deep); }

.row__thumb {
  position: relative;
  flex: 0 0 180px;
  height: 128px;
  background: var(--sky-tint) center/cover no-repeat;
  border-radius: var(--radius-md);
}
.row__thumb .property__tag { top: 8px; left: 8px; }

.row__body { flex: 1 1 auto; min-width: 0; }
.row__name { margin: 0; font-size: var(--text-heading-sm); font-weight: 700; letter-spacing: -0.01em; }
.row__name a { color: inherit; text-decoration: none; }
.row__name a:hover { text-decoration: underline; }
.row__where { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--ink-mute); }
.row__facts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 8px 0 0; font-size: var(--text-body-sm); color: var(--ink-dim); }
.row__note { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--ink-faint); }

.row__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.row__price { margin: 0; font-size: var(--text-heading-sm); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

/* -------------------------------------------------------------- icon button */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink-dim);
  background: var(--control);
  border: 1px solid var(--stroke);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--stroke-strong); }
.icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Toggled on is an accent surface, per the component's note — the filled
   heart is what says "saved", not the colour alone. */
.icon-btn[aria-pressed="true"], .icon-btn.is-on {
  color: var(--status-danger-fg);
  background: var(--accent-subtle);
  border-color: transparent;
}
.icon-btn[aria-pressed="true"] path { fill: currentColor; stroke: none; }

.icon-btn--solid {
  color: var(--ink-inverse);
  background: var(--ink);
  border-color: transparent;
  border-radius: var(--radius-md);
}
.icon-btn--solid:hover { color: var(--ink-inverse); background: var(--ink-hover); }

/* --------------------------------------------------------------- map view */

.mapview { display: grid; grid-template-columns: 620px 1fr; gap: 0; }
.maprail { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; }
.maprail .row__thumb { flex-basis: 150px; }

/* A drawn map, not an embedded one. Loading a tile provider would reach a
   third party and set cookies before the consent bar has been answered —
   exactly what that bar promises will not happen. D3 draws an abstract grid
   with price pins on it, so that is what this is. */
.mapcanvas {
  position: relative;
  min-height: 600px;
  background:
    repeating-linear-gradient(to right,  var(--bg) 0 2px, transparent 2px 105px),
    repeating-linear-gradient(to bottom, var(--bg) 0 2px, transparent 2px 82px),
    var(--sky-tint);
}

.mapcanvas__search {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  height: 40px;
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-overlay);
  cursor: pointer;
}

.mapcanvas__zoom { position: absolute; right: 24px; top: 24px; display: flex; flex-direction: column; gap: var(--space-xs); }
.mapcanvas__zoom .icon-btn { background: var(--panel); font-size: 18px; font-weight: 600; }

/* Price-first marker. Visited is a real state, not decoration: on a map of
   forty listings the visitor needs to see which ones they already opened. */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  height: var(--control-sm);
  padding: 0 12px;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-inverse);
  text-decoration: none;
  background: var(--ink);
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}
.pin:hover { z-index: 2; }
.pin--active { color: var(--on-accent); background: var(--accent); }
.pin--seen {
  color: var(--ink-mute);
  background: var(--control-subtle);
  border-color: var(--stroke-strong);
}
.pin--cluster { cursor: default; }

/* -------------------------------------------------------- loading state */

.loading { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; }

/* Determinate wherever byte totals are known: on a 3G connection an
   indeterminate bar is indistinguishable from a hang. */
.progress { width: 400px; max-width: 100%; }
.progress__label { margin: 0 0 var(--space-xs); font-size: var(--text-body-sm); color: var(--ink-dim); }
.progress__track { height: 6px; background: var(--control-subtle); border-radius: 3px; overflow: hidden; }
.progress__fill { width: 32%; height: 100%; background: var(--ink); border-radius: 3px; }

.skeleton { display: flex; flex-direction: column; gap: var(--space-xs); }
.skeleton__thumb { height: 140px; border-radius: var(--radius-md); }
.skeleton__line { height: 14px; border-radius: var(--radius-xs); }
.skeleton__thumb, .skeleton__line { background: var(--control-subtle); }

@media (prefers-reduced-motion: no-preference) {
  .skeleton__thumb, .skeleton__line, .progress__fill { animation: dir-pulse 1.6s ease-in-out infinite; }
}
@keyframes dir-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ----------------------------------------------------------- empty state */

/* Every empty list needs an action, and the action has to undo whatever
   caused the emptiness — so this one clears the filters rather than
   offering a cheerful dead end. */
.empty--state {
  max-width: 380px;
  margin-inline: auto;
  background: var(--control-subtle);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 48px var(--space-lg);
}
.empty__mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  border: 2px solid var(--stroke-strong);
  border-radius: 50%;
}
.empty--state .empty__body { font-size: var(--text-body-sm); color: var(--ink-mute); }

.nearby__head { margin: 48px 0 var(--space-lg); font-size: var(--text-card-title); font-weight: 700; text-align: center; }

/* ------------------------------------------------------- selection bar */

.selbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-subtle);
  border-radius: var(--radius-md);
}
.selbar p { flex: 1 1 auto; margin: 0; font-size: var(--text-body-md); font-weight: 600; }

.timegroup + .timegroup { margin-top: var(--space-xl); }
.timegroup .filters__label { margin-bottom: var(--space-sm); }

/* --------------------------------------------------------- compare table */

.breadcrumb--left { justify-content: flex-start; }
.skip-caption { position: absolute; left: -9999px; }

.cmp-wrap { overflow-x: auto; }
.cmp {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
}
.cmp th, .cmp td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-subtle); }
.cmp tbody th {
  width: 240px;
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--control-subtle);
}
.cmp td { font-size: var(--text-body-md); border-left: 1px solid var(--border-subtle); }
.cmp__corner { background: var(--control-subtle); border-left: 0; }
.cmp__col { vertical-align: bottom; border-left: 1px solid var(--border-subtle); }
.cmp__thumb {
  display: block;
  height: 110px;
  margin-bottom: var(--space-xs);
  background: var(--sky-tint) center/cover no-repeat;
  border-radius: var(--radius-md);
}
.cmp__name { display: block; margin-bottom: var(--space-xs); font-size: var(--text-body-md); font-weight: 600; }
.cmp__lead { font-size: var(--text-heading-sm); font-weight: 700; letter-spacing: -0.01em; }
.cmp .is-best { color: var(--status-ok-fg); background: var(--status-ok-bg); }
.cmp__none { color: var(--ink-faint); }

/* --------------------------------------------------------------- alert */

.alert {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid;
  border-radius: var(--radius-md);
}
.alert--info { background: var(--status-info-bg); border-color: var(--status-info-border); }
.alert__dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--status-info-fg); }
.alert__title { margin: 0; font-size: var(--text-body-md); font-weight: 600; color: var(--status-info-fg); }
.alert__body { margin: 4px 0 0; font-size: var(--text-body-sm); line-height: 1.55; color: var(--ink-dim); }

/* ------------------------------------------------------- property detail */

.ph { display: flex; gap: var(--space-xs); height: 460px; padding: var(--space-md) var(--space-2xl); }

.ph__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: linear-gradient(165deg, var(--wash-top) 0%, var(--wash-deep) 71%);
  border-radius: var(--radius-lg);
}
.ph__meta { margin: 0; font-size: var(--text-body-sm); color: rgba(255, 255, 255, 0.7); }

.ph__rail { flex: 0 0 180px; display: flex; flex-direction: column; gap: var(--space-xs); }
.plate {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xs);
  background: var(--sky-tint);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
}
a.plate:hover { border-color: var(--stroke-strong); }
.plate.is-current { border-color: var(--ink); }
.plate__label {
  padding: 3px 7px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-2xl);
  width: min(1360px, 100%);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-2xl) 64px;
  align-items: start;
}

.display--sm { margin: var(--space-xs) 0 0; font-size: clamp(27px, 3.6vw, 34px); }
.lead--plain { margin: 4px 0 0; font-size: 17px; color: var(--ink-mute); }

.facts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.fact { width: 122px; padding: var(--space-sm); background: var(--control-subtle); border-radius: var(--radius-md); }
.fact__label { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink-mute); }
.fact__value { margin: 2px 0 0; font-size: var(--text-heading-sm); font-weight: 700; letter-spacing: -0.01em; }

.detail-block { margin-top: var(--space-lg); }
.detail-block .h3 { margin-bottom: var(--space-sm); font-size: 22px; }
.detail-block .prose { font-size: 17px; }
.ticks--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); margin-top: var(--space-sm); }

.side {
  position: sticky;
  top: 140px;
  padding: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.side__price { margin: 0; font-size: clamp(27px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.side__note { margin: var(--space-md) 0 0; font-size: var(--text-body-sm); color: var(--ink-mute); }
.side__rule { margin: var(--space-md) 0; border: 0; border-top: 1px solid var(--border-subtle); }
.side__agent { display: flex; align-items: center; gap: var(--space-sm); }
.side__agent-name { margin: 0; font-size: var(--text-body-md); font-weight: 600; }
.side__agent-firm { margin: 2px 0 0; font-size: var(--text-body-sm); color: var(--ink-mute); }
.side__cta { display: flex; width: 100%; margin-top: var(--space-md); }
.side__row { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); }
.side__views { margin: 0 0 0 auto; font-size: var(--text-body-sm); color: var(--ink-faint); }

/* ---------------------------------------------------------------- narrow */

/* The panel is a column beside the results on a desktop and a sheet over
   them on a phone — at 340px wide there is no room for both. */
@media (max-width: 1100px) {
  .dir-body.is-filtering { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    max-height: 82vh;
    overflow-y: auto;
    border-right: 0;
    border-top: 1px solid var(--stroke);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-overlay);
  }
  .dir-body.is-filtering .results { margin-inline: auto; padding-inline: var(--space-2xl); }
  .mapview { grid-template-columns: 1fr; }
  .maprail { max-height: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .side { position: static; }
}

@media (max-width: 760px) {
  .dir__top, .dirbar { padding-inline: var(--space-md); }
  .dir__brand { font-size: var(--text-body-md); }
  .results, .detail-grid, .ph { padding-inline: var(--space-md); }
  .dirbar__count { order: 3; margin-left: 0; }
  .views { order: 4; margin-left: auto; }

  .row { flex-wrap: wrap; }
  .row__thumb { flex-basis: 120px; height: 96px; }
  .row__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }

  .ph { height: auto; flex-direction: column; }
  .ph__stage { min-height: 260px; }
  /* Four room names in a 390px row leaves 90px each, which "Ukumbi wa
     Kuingilia" does not fit. The rail scrolls sideways instead of shrinking
     the plates until the labels break mid-word. */
  .ph__rail { flex: 0 0 auto; flex-direction: row; height: 96px; overflow-x: auto; }
  .ph__rail .plate { flex: 0 0 140px; }
  .ticks--two { grid-template-columns: 1fr; }
  .cmp tbody th { width: 140px; }
}