/**
 * Homepage. Reads only from tokens.css.
 */

/**
 * ── Hero ──────────────────────────────────────────────────────────────────
 *
 * One line of type, one box, one row of ways in.
 *
 * WHAT THIS REPLACED
 *
 * A two-column block holding four selects, a teal band advertising the
 * assistant, four counters and a row of area chips — 395px on a desktop and
 * 603px on a phone before a single property appeared, to ask questions that a
 * sentence answers faster.
 */
.v2-hero { background: var(--surface-warm); border-block-end: 1px solid var(--rule); }
.v2-hero-in {
  padding-block: var(--s-5) var(--s-6);
  display: grid; gap: var(--s-4); justify-items: stretch;
}
@media (min-width: 900px) { .v2-hero-in { padding-block: var(--s-8) var(--s-8); gap: var(--s-5); } }

/**
 * The headline, one line, still the page's h1.
 *
 * A page needs a heading and a search engine reads it; what it does not need is
 * a poster. It sits above the box at reading size and introduces it.
 */
.v2-hero-eyebrow {
  font-family: var(--font-display); font-size: var(--t-lg);
  font-weight: 600; line-height: 1.35; color: var(--ink);
  max-width: 46ch; margin: 0 auto; text-align: center;
}
@media (min-width: 900px) { .v2-hero-eyebrow { font-size: var(--t-xl); } }

/* ── The one box ──
   Wide, quiet, and the only thing on the page that takes a sentence. */
.v2-askbar {
  display: flex; align-items: center; gap: var(--s-2);
  inline-size: min(100%, 760px); margin-inline: auto;
  background: var(--surface-card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-pill);
  box-shadow: var(--lift-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.v2-askbar:focus-within { border-color: var(--accent); box-shadow: var(--lift-3); }
/* The assistant's mark, because this box is the assistant's way in. */
.v2-askbar-mark { color: var(--live); font-size: var(--t-md); line-height: 1; flex: none; padding-inline-start: var(--s-2); }
.v2-askbar-q {
  flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent;
  color: var(--ink); font-size: var(--t-md); min-block-size: 46px;
  padding-inline: var(--s-2);
}
.v2-askbar-q:focus { outline: none; }
.v2-askbar-q::placeholder { color: var(--ink-faint); }
/* Safari draws its own clear button inside a search input; it lands on top of
   the submit and looks like two controls fighting. */
.v2-askbar-q::-webkit-search-decoration,
.v2-askbar-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.v2-askbar-go { flex: none; border-radius: var(--radius-pill); min-block-size: 42px; padding-inline: var(--s-5); }
@media (max-width: 479px) {
  /* On the narrowest screens the word is dropped for the arrow the keyboard
     already offers: a 46px input beside a 96px button is not an input. */
  .v2-askbar-go { padding-inline: var(--s-4); font-size: var(--t-sm); }
}

/* ── The answer ──
   Empty until something is asked, and then it is the most important thing on
   the page — so it sits directly under the box and pushes the rest down. */
.v2-answer { inline-size: min(100%, 1000px); margin-inline: auto; }
.v2-answer:empty { display: none; }
.v2-answer-in {
  display: grid; gap: var(--s-3);
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-4);
}
.v2-answer-head {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-dim);
}
.v2-answer-head b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); }
/* What the sentence was understood to mean, said back. */
.v2-answer-chip {
  font-size: var(--t-xs); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-pill); padding: 2px var(--s-2);
}
.v2-answer-note { font-size: var(--t-xs); color: var(--ink-dim); }
.v2-answer-all { justify-self: start; }
.v2-answer-projects { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v2-answer-proj {
  display: grid; gap: 2px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.v2-answer-proj:hover { border-color: var(--accent); text-decoration: none; }
.v2-answer-proj strong { font-size: var(--t-sm); }
.v2-answer-proj span { font-size: var(--t-xs); color: var(--ink-dim); }

/* Nothing published matched. Not an error state — a different answer. */
.v2-answer-none { display: grid; gap: var(--s-2); }
.v2-answer-none h3 { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); }
.v2-answer-none p { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.6; max-width: 68ch; }
.v2-answer-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-1); }
.v2-answer-acts .v2-btn { min-block-size: 40px; font-size: var(--t-sm); }

/* ── The ways in ──
   Eight tiles, each a page that exists, each count a counted fact. Four across
   a phone so the row never becomes a second scrolling thing to discover. */
.v2-quick {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  inline-size: min(100%, 900px); margin-inline: auto;
}
@media (min-width: 700px) { .v2-quick { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-3); } }
.v2-quick-tile {
  display: grid; justify-items: center; gap: 2px;
  padding: var(--s-3) var(--s-1);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink-body);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.v2-quick-tile:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--surface-warm); text-decoration: none;
}
.v2-quick-icon { color: var(--accent); line-height: 0; }
.v2-quick-tile:hover .v2-quick-icon { color: var(--accent-lit); }
.v2-quick-label { font-size: var(--t-xs); font-weight: 600; text-align: center; line-height: 1.25; }
.v2-quick-n { font-size: var(--t-xs); color: var(--ink-faint); }

.v2-hero-note {
  font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.6;
  text-align: center; max-width: 72ch; margin-inline: auto;
}
/* ── Sections ──
   Tighter rhythm: 32px between sections rather than 48, and 12px under a
   heading rather than 20. The direction sets its section titles at 17px; 22
   keeps a hierarchy over an 18px card price without becoming a banner. */
.v2-section { padding-block: var(--s-8) 0; }
.v2-sec-head {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-block-end: var(--s-3);
}
.v2-sec-head h2 { font-family: var(--font-display); font-size: var(--t-xl); }
.v2-sec-note { font-size: var(--t-sm); color: var(--ink-dim); flex: 1 1 240px; }
.v2-sec-more { font-size: var(--t-sm); font-weight: 600; margin-inline-start: auto; white-space: nowrap; }
[dir="rtl"] .v2-sec-more { transform: scaleX(1); }

/* A short row must not stretch its cards to full width. Sized to the denser
   card: four across a 1240px page is roughly 300, so a lone card is 220. */
.v2-grid.is-short { grid-template-columns: repeat(auto-fill, minmax(0, 220px)); }

/* ── Areas ── */
.v2-areas { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v2-area {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--ink-body); font-size: var(--t-sm);
}
.v2-area:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.v2-area b { color: var(--ink-dim); font-size: var(--t-xs); }

.v2-home { padding-block-end: var(--s-12); }

/* ══ THE SHELF ═══════════════════════════════════════════════════════════
   Three orderings of one catalogue, on one scrolling rail.
   ════════════════════════════════════════════════════════════════════════ */

/**
 * Tabs.
 *
 * They are anchors, because ?shelf=fast is a real address the server renders —
 * so they work with no script and a chosen shelf can be sent to somebody. The
 * script upgrades them to swap panels without a reload.
 */
.v2-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.v2-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-body);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--surface-card);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.v2-tab:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.v2-tab .num { font-size: var(--t-xs); color: var(--ink-faint); font-weight: 500; }
.v2-tab[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
.v2-tab[aria-selected="true"] .num { color: color-mix(in srgb, var(--accent-on) 72%, transparent); }

/**
 * The rail.
 *
 * A 9:16 card is tall, and eight of them wrapped into a grid is 1,250px of one
 * section. Eight on a rail is one row and a push. Snap points so a push lands
 * on a card rather than between two.
 *
 * The scrollbar used to be left visible here, on the reasoning that a rail
 * nobody can tell scrolls is a rail nobody scrolls. That was the right problem
 * and the wrong answer: on a desktop it made a horizontal scrollbar the only
 * way through eight cards, and most pointing devices cannot push one sideways.
 * The two buttons below do that job, and where they are drawn the scrollbar is
 * taken away — two answers to the same question is worse than either.
 */
.v2-shelf-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%;
  gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-2);
  scrollbar-width: thin;
}
@media (min-width: 560px) { .v2-shelf-rail { grid-auto-columns: 30%; } }
@media (min-width: 900px) { .v2-shelf-rail { grid-auto-columns: 22%; } }
@media (min-width: 1100px) { .v2-shelf-rail { grid-auto-columns: 18.4%; } }
.v2-shelf-rail > * { scroll-snap-align: start; }
.v2-shelf-panel[hidden] { display: none; }

/**
 * The two controls that drive the rail.
 *
 * Drawn only where there is a fine pointer to use them — a phone already has a
 * swipe and does not need a button laid over the picture — and only once the
 * script that runs them has said so, because a control that looks live and does
 * nothing is worse than no control.
 *
 * Placed over the ends of the rail rather than beside it: beside it costs 88px
 * of a 1,240px page, and that is a card.
 */
.v2-railwrap { position: relative; }
.v2-railnav {
  display: none;
  position: absolute; inset-block-start: 38%; transform: translateY(-50%);
  inline-size: 38px; block-size: 38px; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--ink);
  box-shadow: var(--lift-2); cursor: pointer; place-items: center; z-index: 2;
  transition: opacity var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.v2-railnav.is-prev { inset-inline-start: -6px; }
.v2-railnav.is-next { inset-inline-end: -6px; }
.v2-railnav:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-warm); }
.v2-railnav:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
/* At an end there is nothing to go to, so the button leaves rather than sits
   there looking pressable. */
.v2-railnav[disabled] { opacity: 0; pointer-events: none; }
/* The chevrons point the way the text runs. */
[dir="rtl"] .v2-railnav svg { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
  .v2-railwrap[data-v2-rail-armed] .v2-railnav { display: grid; }
  .v2-railwrap[data-v2-rail-armed] .v2-shelf-rail { scrollbar-width: none; }
  .v2-railwrap[data-v2-rail-armed] .v2-shelf-rail::-webkit-scrollbar { display: none; }
}

/* ══ THE PROJECT MOSAIC ══════════════════════════════════════════════════
   One tile at four times the area, four beside it, and a stage in the big one
   so the project showing there can change without anything moving.
   ════════════════════════════════════════════════════════════════════════ */

/**
 * The grid.
 *
 * Two columns on a phone with the stage across both; three from 560px with the
 * stage two wide and two tall; four from 900px, which is the shape the section
 * was drawn for. The cells beside the stage are hidden rather than wrapped
 * below it at the narrow widths — a fifth tile under the mosaic is a row of
 * page nobody asked for.
 */
.v2-mosaic {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 148px;
}
.v2-mosaic-stage { position: relative; grid-column: span 2; min-width: 0; }
.v2-tile[data-slot="3"], .v2-tile[data-slot="4"] { display: none; }
@media (min-width: 560px) {
  .v2-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 152px; }
  .v2-mosaic-stage { grid-row: span 2; }
}
@media (min-width: 900px) {
  .v2-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 164px; gap: var(--s-3); }
  .v2-tile[data-slot="3"], .v2-tile[data-slot="4"] { display: block; }
}

/**
 * A tile is a photograph with the type laid over its foot.
 *
 * The scrim is a gradient rather than a flat wash so the top two thirds of the
 * picture are untouched — the part of a building anybody actually looks at.
 */
.v2-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--radius); background: var(--surface-deep);
  color: var(--brand-mint);
  transition: box-shadow var(--slow) var(--ease);
}
.v2-tile[hidden] { display: none; }
.v2-tile:hover { text-decoration: none; box-shadow: var(--lift-3); }
.v2-tile-shot {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; transition: transform 620ms var(--ease);
}
.v2-tile:hover .v2-tile-shot { transform: scale(1.045); }
.v2-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--surface-deep) 90%, transparent) 0%,
    color-mix(in srgb, var(--surface-deep) 48%, transparent) 40%,
    transparent 72%);
}
.v2-tile-in {
  position: relative; z-index: 1; block-size: 100%;
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
}
.v2-tile-code {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  background: color-mix(in srgb, var(--surface-deep) 58%, transparent);
  color: var(--brand-mint); padding: 2px var(--s-2); border-radius: var(--radius);
  backdrop-filter: blur(3px);
}
.v2-tile-copy { margin-block-start: auto; display: grid; gap: 2px; min-width: 0; }
/**
 * Two lines, and then it stops.
 *
 * Real project names run to fifty characters — "پاک تاوەر - Pak Towers تاوەرە
 * نوێیەکەی پاک سیتی" is one of them — which is three lines in a 285px tile and
 * pushes the figure out of the bottom of it. The fixture's names are short, so
 * this is a rule written from the live data rather than from what the tests
 * happened to render.
 */
.v2-tile-name {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  line-height: 1.3; color: var(--brand-mint);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.v2-tile-where {
  font-size: var(--t-xs); color: color-mix(in srgb, var(--brand-mint) 74%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-tile-terms { font-size: var(--t-xs); color: color-mix(in srgb, var(--brand-mint) 82%, transparent); }
/* The figure in gold: it is the one number on the tile and the reason to look. */
.v2-tile-terms b { font-family: var(--font-display); font-size: var(--t-md); color: var(--live); }
/* The small tiles carry a name and a figure. Everything else is the feature's. */
.v2-tile-meta { display: none; }

/**
 * The big tile, at two sizes of its own.
 *
 * On a phone it is a 148px band across the width, and the desktop treatment —
 * a 22px name over a 28px figure with a row of detail under it — needs 172px
 * of that 148. Measured, not guessed: the name at reading size and no detail
 * row comes to 114. It grows into the desktop treatment at 560px, where the
 * tile becomes two rows tall and has the room for it.
 */
.v2-tile.is-feature .v2-tile-in { padding: var(--s-3); }
.v2-tile.is-feature .v2-tile-name { font-size: var(--t-md); }
.v2-tile.is-feature .v2-tile-terms b { font-size: var(--t-xl); }
.v2-tile.is-feature .v2-tile-meta { display: none; }

@media (min-width: 560px) {
  .v2-tile.is-feature .v2-tile-in { padding: var(--s-4); }
  .v2-tile.is-feature .v2-tile-name { font-size: var(--t-xl); }
  .v2-tile.is-feature .v2-tile-where { font-size: var(--t-sm); }
  .v2-tile.is-feature .v2-tile-terms { font-size: var(--t-sm); }
  .v2-tile.is-feature .v2-tile-terms b { font-size: var(--t-2xl); }
  .v2-tile.is-feature .v2-tile-meta {
    display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
    margin-block-start: var(--s-1); font-size: var(--t-xs);
    color: color-mix(in srgb, var(--brand-mint) 68%, transparent);
  }
}
.v2-tile-go { font-weight: 600; color: var(--live); }

/* A project with no photograph yet: a ground of its own rather than a grey box. */
.v2-tile.is-flat {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand-teal) 86%, var(--surface-deep)), var(--surface-deep));
}
.v2-tile-nomedia {
  position: absolute; inset-block-start: 38%; inset-inline-start: 0;
  inline-size: 100%; text-align: center; font-size: var(--t-xs);
  color: color-mix(in srgb, var(--brand-mint) 46%, transparent);
}

/**
 * The stage: four projects stacked, one shown.
 *
 * They are display:none rather than transparent, so a browser fetches one
 * photograph and not four, and the script gives the next one back its display
 * a turn before it is needed.
 */
.v2-mosaic-stage > .v2-tile { position: absolute; inset: 0; transition: opacity 340ms var(--ease); }
.v2-mosaic-stage > .v2-tile.is-out { opacity: 0; }

/* The dots, which exist only once the script is running them. */
.v2-mosaic-dots { display: none; gap: var(--s-1); align-items: center; margin-block-start: var(--s-2); }
.v2-mosaic-wrap[data-v2-mosaic-armed] .v2-mosaic-dots { display: flex; }
.v2-mosaic-dot {
  inline-size: 22px; block-size: 22px; padding: 0; border: 0;
  background: transparent; cursor: pointer; display: grid; place-items: center;
  border-radius: var(--radius);
}
.v2-mosaic-dot::after {
  content: ''; inline-size: 7px; block-size: 7px; border-radius: var(--radius-pill);
  background: var(--rule-strong);
  transition: background var(--fast) var(--ease), inline-size var(--fast) var(--ease);
}
.v2-mosaic-dot:hover::after { background: var(--accent); }
.v2-mosaic-dot[aria-current="true"]::after { background: var(--accent); inline-size: 18px; }
.v2-mosaic-dot:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/**
 * Somebody who has asked their system to stop animating things gets a mosaic
 * that does not move: no cross-fade, no zoom on hover. The script reads the
 * same preference and does not start the timer at all.
 */
@media (prefers-reduced-motion: reduce) {
  .v2-mosaic-stage > .v2-tile { transition: none; }
  .v2-tile-shot { transition: none; }
  .v2-tile:hover .v2-tile-shot { transform: none; }
}