.story-nav__button:active,
.mobile-entry__open:active,
.mobile-site-menu a:active,
.mobile-site-menu button:active,
.map-button:active,
.start-choice:active,
.detail-toggle:active,
.deck-close:active,
.choice:active,
.back-button:active,
.continue-button:active,
.handoff-button:active {
  transform: scale(0.97);
}

.transaction-marker-shell {
  border: 0 !important;
  background: transparent !important;
}

.transaction-marker {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(242, 238, 231, 0.92);
  border-radius: 50%;
  background: rgba(18, 17, 15, 0.94);
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.3);
  transition: transform 180ms var(--story-ease-out), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.transaction-marker > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--story-accent);
  box-shadow: inset 0 0 0 1px rgba(24, 11, 7, 0.35);
}

.transaction-marker-shell.is-active .transaction-marker {
  border-color: var(--story-paper);
  background: var(--story-accent);
  box-shadow: 0 0 0 6px rgba(200, 148, 104, 0.2), 0 8px 8px rgba(0, 0, 0, 0.34);
  transform: scale(1.16);
}

.transaction-marker-shell.is-active .transaction-marker > span {
  background: var(--story-ink);
  box-shadow: none;
}

.transaction-cluster {
  display: grid;
  width: 44px;
  height: 44px;
  place-content: center;
  border: 1px solid var(--story-paper);
  border-radius: 50%;
  background: var(--story-accent);
  color: #1e1913;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 180ms var(--story-ease-out), background-color 180ms ease;
}

.transaction-cluster b,
.transaction-cluster small {
  display: block;
  line-height: 1;
}

.transaction-cluster b { font-family: var(--serif); font-size: 17px; font-weight: 650; }
.transaction-cluster small { margin-top: 2px; font-size: 6px; font-weight: 800; text-transform: uppercase; }

.parcel-marker {
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  border: 1px solid var(--story-paper);
  border-radius: 50%;
  background: rgba(18, 17, 15, 0.94);
  color: var(--story-paper);
  box-shadow: 0 0 0 4px rgba(200, 148, 104, 0.18), 0 10px 24px rgba(0, 0, 0, 0.34);
  text-align: center;
  transition: transform 180ms var(--story-ease-out), background-color 180ms ease, color 180ms ease;
}

.parcel-marker b,
.parcel-marker small { display: block; line-height: 1; }
.parcel-marker b { color: var(--story-accent-soft); font-family: var(--serif); font-size: 18px; }
.parcel-marker small { margin-top: 3px; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.transaction-marker-shell.is-active .parcel-marker { background: var(--story-accent); color: #1e1913; transform: scale(1.08); }
.transaction-marker-shell.is-active .parcel-marker b { color: #1e1913; }

#home-map .leaflet-tooltip {
  padding: 7px 9px;
  border: 1px solid var(--story-line);
  border-radius: 0;
  background: rgba(18, 17, 15, 0.96);
  color: var(--story-paper);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.24);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 650;
}

#home-map .leaflet-tooltip::before { border-top-color: rgba(18, 17, 15, 0.96); }

/* Height follows the question. A fixed 790px box stretched a six-tile question
   over the whole viewport and left a dead gap above the actions. */
.intake-deck {
  width: min(1180px, calc(100% - 48px));
  /* fit-content, not auto: a dialog inherits inset:0 from the UA sheet, and an
     abspos box with height:auto and both insets resolved stretches to fill. */
  height: fit-content;
  max-width: none;
  max-height: min(860px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 238, 231, 0.26);
  border-radius: 0;
  background: var(--story-ink);
  color: var(--story-paper);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.intake-deck::backdrop {
  background: rgba(7, 6, 5, 0.9);
  backdrop-filter: blur(7px);
}

.intake-deck[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 240ms var(--story-ease-out), transform 240ms var(--story-ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete;
}

@starting-style {
  .intake-deck[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.deck-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  height: 72px;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 22px;
  border-bottom: 1px solid var(--story-line);
  background: #171613;
}

/* The deck covers the whole screen on a phone, so it carries the site header
   instead of opening on a bare file chip above a black band. */
.deck-brand { position: relative; display: block; min-width: 0; padding-right: 18px; color: var(--story-paper); white-space: nowrap; }
.deck-brand .brand__name { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.deck-brand .brand__role { display: block; margin-top: 2px; color: #989189; font-size: 8px; font-weight: 700; line-height: 1.15; letter-spacing: 0.1em; text-transform: uppercase; }
.deck-brand::after { position: absolute; top: 50%; right: 0; width: 1px; height: 30px; background: var(--story-line); content: ""; transform: translateY(-50%); }

.deck-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(221, 188, 151, 0.65);
  color: var(--story-accent-soft);
  font-size: 10px;
  font-weight: 800;
}

.deck-name { min-width: 0; }
.deck-name strong, .deck-name span { display: block; }
.deck-name strong { overflow: hidden; font-family: var(--serif); font-size: 19px; font-weight: 480; text-overflow: ellipsis; white-space: nowrap; }
.deck-name span { margin-top: 2px; color: #989189; font-size: 8px; }

.detail-toggle,
.deck-close,
.back-button,
.continue-button,
.handoff-button,
.choice {
  min-height: 44px;
  border: 1px solid var(--story-line);
  border-radius: 0;
  background: rgba(18, 17, 15, 0.84);
  color: var(--story-paper);
  cursor: pointer;
  transition: transform 140ms var(--story-ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.detail-toggle { min-width: 112px; padding: 0 13px; font-size: 11px; font-weight: 740; white-space: nowrap; }
.detail-toggle[aria-pressed="true"] { border-color: var(--story-accent); background: rgba(200, 148, 104, 0.15); }
.detail-toggle:disabled { opacity: 0.5; cursor: default; }
.deck-close { width: 44px; padding: 0; font-size: 20px; }

.deck-progress {
  position: absolute;
  z-index: 2;
  top: 72px;
  right: 0;
  left: 0;
  display: flex;
  height: 4px;
  gap: 3px;
  padding: 0 3px;
  background: #292622;
}

.deck-progress span {
  flex: 1;
  background: transparent;
  transition: background-color 180ms ease;
}

.deck-progress .is-done,
.deck-progress .is-current { background: var(--story-accent); }

.deck-grid {
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 64%);
  height: auto;
  min-height: 430px;
}

.deck-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #151412;
}

.media-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  will-change: transform, opacity;
}

.media-layer::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 15, 14, 0.12), rgba(16, 15, 14, 0.5)), linear-gradient(0deg, rgba(16, 15, 14, 0.7), transparent 50%);
  content: "";
}

.deck-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--story-ink);
  scrollbar-color: var(--story-accent) var(--story-ink);
}

.deck-screen {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3.4vw, 44px) 22px;
}

.screen-name {
  margin: 0 0 10px;
  color: var(--story-accent-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line-height 0.98 is tighter than the font, so descenders sit below the line
   box. Screens that carry a .screen-copy paragraph borrowed that paragraph's
   top margin for clearance; the ones that go straight to a choice grid had
   none, and "Property type" landed on the buttons. The margin lives here now so
   it holds either way, and the paragraph's own top margin is dropped so those
   screens keep the spacing they already had. */
.deck-screen h2 {
  max-width: 17ch;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.deck-screen h2 + .screen-copy { margin-top: 0; }

.deck-screen h2:focus { outline: 0; }

.screen-copy {
  max-width: 42ch;
  margin: 13px 0 20px;
  color: #b2aba3;
  font-size: 11px;
  line-height: 1.5;
  text-wrap: pretty;
}

.choice-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.choice-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One tile stranded beside an empty cell reads as a mistake. The odd one out
   takes the whole row and carries a mark so it looks chosen, not left over. */
.choice-grid[data-columns="2"] .choice:last-child:nth-child(odd),
.choice-grid[data-columns="3"] .choice:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  border-left: 2px solid var(--story-accent-soft);
  background: linear-gradient(90deg, rgba(200, 148, 104, 0.09), #1b1916 42%);
}

.choice {
  position: relative;
  min-height: 56px;
  min-width: 0;
  padding: 12px 30px 12px 13px;
  border-color: rgba(242, 238, 231, 0.2);
  background: #1b1916;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}

.choice::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 1px solid #716b64;
  border-radius: 50%;
  content: "";
}

.choice.is-selected {
  border-color: var(--story-accent-soft);
  background: rgba(200, 148, 104, 0.15);
}

.choice.is-selected::after {
  border-color: var(--story-accent-soft);
  background: var(--story-accent);
}

.review-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--story-line);
  background: var(--story-line);
}

.review-item { min-height: 76px; padding: 13px; background: #151412; }
.review-item b, .review-item span { display: block; }
.review-item b { color: #928b83; font-size: 8px; font-weight: 720; text-transform: uppercase; }
.review-item span { margin-top: 7px; color: var(--story-paper); font-family: var(--serif); font-size: 18px; line-height: 1.08; overflow-wrap: anywhere; }
.review-empty { color: var(--story-muted); }

.screen-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.screen-actions > .back-button,
.screen-actions > .continue-button,
.screen-actions > .screen-meta { width: 100%; }

.back-button,
.continue-button,
.handoff-button { padding: 0 15px; font-size: 9px; font-weight: 760; text-transform: uppercase; }
.back-button[hidden] { visibility: hidden; display: block; }
.continue-button { border-color: var(--story-fill); background: var(--story-fill); color: var(--story-fill-ink); }
.continue-button:disabled { border-color: #57534d; background: #25231f; color: #918d86; cursor: not-allowed; transform: none; }
.screen-count { color: #837c75; font-size: 8px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

.saved-screen { justify-content: center; }
.file-reference { display: grid; gap: 6px; margin: 8px 0 14px; padding: 18px; border: 1px solid var(--story-line); background: #151412; }
.file-reference span { color: var(--story-quiet); font-size: 8px; font-weight: 740; text-transform: uppercase; }
.file-reference strong { color: var(--story-accent-soft); font-family: var(--serif); font-size: clamp(28px, 4vw, 42px); font-weight: 480; letter-spacing: -0.03em; }
.saved-note { max-width: 44ch; margin: 0 0 18px; color: var(--story-muted); font-size: 10px; line-height: 1.5; }
.saved-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 88px; gap: 8px; }
.handoff-button { display: inline-flex; align-items: center; justify-content: center; border-color: var(--story-accent-soft); }
.copy-status { min-height: 18px; margin: 10px 0 0; color: var(--story-accent-soft); font-size: 9px; }

@media (hover: hover) and (pointer: fine) {
  .map-button:hover, .detail-toggle:hover, .deck-close:hover, .back-button:hover, .handoff-button:hover { border-color: rgba(221, 188, 151, 0.74); background: #24211d; }
  /* nav items are text links now: hover lifts the ink, it does not draw a box */
  .story-nav__button:hover { background: none; color: var(--story-paper); }
  .story-nav__button--accent:hover { border-color: var(--story-accent); background: var(--story-accent); color: #1e1913; }
  .continue-button:hover { border-color: var(--story-accent-soft); background: var(--story-accent-soft); color: #1e1913; }
  .choice:hover { border-color: rgba(221, 188, 151, 0.74); transform: translateY(-2px); }
  .start-choice:hover { filter: brightness(1.08); }
  .transaction-marker-shell:hover .transaction-marker { transform: scale(1.12); }
  .transaction-marker-shell:hover .transaction-cluster { background: var(--story-accent-soft); transform: scale(1.08); }
  .transaction-marker-shell:hover .parcel-marker { background: var(--story-accent); color: #1e1913; transform: scale(1.06); }
}

@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; }
}

/* The header keeps its shape without it. */
.deck-head { grid-template-columns: auto auto minmax(0, 1fr) auto; }

/* "Below-Market Rents" broke across two lines in its tile. */
.choice { text-wrap: balance; hyphens: none; }

/* Four controls in a 1fr 1fr 78px row left the third one stranded on its own
   line at an unrelated width. Two even columns, and Close takes the row. */
.saved-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.saved-actions .handoff-button { min-height: 52px; }
.saved-actions .is-primary { border-color: var(--story-fill); background: var(--story-fill); color: var(--story-fill-ink); }
.saved-actions .back-button { grid-column: 1 / -1; }

/* The saved screen says what actually happened to the file. */
.saved-note[data-delivery="sent"] { color: var(--story-accent-soft); }
.saved-note[data-delivery="unsent"] { color: var(--story-paper); }