:root {
  --background: #f6f2ea;
  --surface: #fffdf8;
  --surface-muted: #edf5f3;
  --surface-strong: #12343b;
  --text: #172026;
  --muted-text: #526970;
  --border: #d9e5e3;
  --brand-accent: #b85f2e;
  --brand-accent-dark: #8d4525;
  --brand-wash: #f8e1cf;
  --action: #155e75;
  --action-hover: #0f4a5d;
  --selected-ward: #0f766e;
  --map-fill: #38bdf8;
  --shadow: 0 16px 40px rgb(18 52 59 / 12%);
  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --space-page: clamp(1rem, 3vw, 2rem);
  background: var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at top right, rgb(184 95 46 / 14%), transparent 26rem),
    radial-gradient(circle at top left, rgb(21 94 117 / 12%), transparent 28rem),
    var(--background);
  margin: 0;
}

a {
  color: var(--action);
}

.site-header {
  align-items: center;
  background:
    linear-gradient(135deg, rgb(18 52 59 / 96%), rgb(141 69 37 / 92%)),
    var(--surface-strong);
  color: white;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.6rem clamp(1rem, 4vw, 3rem);
}

.site-brand,
.nav-link {
  color: white;
  text-decoration: none;
}

.site-brand {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  gap: 0.65rem;
  line-height: 1;
  white-space: nowrap;
}

.brand-mark {
  align-items: center;
  background: white;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 0.65rem;
  box-shadow: 0 8px 20px rgb(18 52 59 / 22%);
  display: flex;
  height: 2.45rem;
  justify-content: center;
  overflow: hidden;
  width: 2.9rem;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  height: 4.4rem;
  transform: translateY(0.35rem);
  width: 4.4rem;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
}

.brand-kicker {
  color: rgb(255 255 255 / 72%);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-name {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.site-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 0.7rem;
}

.nav-link:hover,
.nav-link.is-active {
  background: rgb(248 225 207 / 18%);
  border-color: rgb(248 225 207 / 32%);
}

.account-link {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
  padding: 1rem;
}

.learn-layout {
  align-items: stretch;
  box-sizing: border-box;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  height: calc(100vh - 3.45rem);
  overflow: hidden;
  padding: 1rem;
}

.home-layout,
.practice-layout {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.home-layout {
  margin: 0 auto;
  max-width: 64rem;
}

.practice-layout {
  align-items: stretch;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(0, 1.28fr);
  min-height: calc(100vh - 3.45rem);
}

.road-grid-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  min-height: calc(100vh - 3.45rem);
  padding: 1rem;
}

.map-card,
.panel,
.fieldhouse-carousel,
.hero-card,
.mode-card,
.practice-stage,
.question-card {
  background: var(--surface);
  border: 1px solid rgb(217 229 227 / 70%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

#map {
  height: 100%;
  min-height: 0;
}

.learn-map-region {
  display: grid;
  gap: 0.75rem;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  position: relative;
}

.learn-map-card {
  min-height: 0;
  min-width: 0;
}

.learn-controls {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, max-content) minmax(12rem, 16rem) 2.4rem;
  justify-content: space-between;
  min-width: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.panel section + section {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.learn-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding-right: 0.25rem;
}

.sidebar-tabs {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.25rem;
}

.sidebar-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.86rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
}

.sidebar-tabs button:hover,
.sidebar-tabs button.is-active {
  background: var(--surface);
  box-shadow: 0 4px 14px rgb(18 52 59 / 10%);
  color: var(--action);
}

.sidebar-panel {
  min-height: 0;
  overflow: auto;
}

.sidebar-panel[hidden] {
  display: none;
}

.profile-panel {
  gap: 0.75rem;
  min-height: 0;
}

.enrichment-panel {
  gap: 0.8rem;
}

.panel-heading h2,
.enrichment-panel h2 {
  margin: 0;
}

.metric-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.metric-chip {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  text-transform: capitalize;
}

.poi-list,
.overlap-list {
  display: grid;
  gap: 0.65rem;
}

.poi-card,
.overlap-row,
.contact-card,
.ward-notes {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}

.poi-card {
  display: grid;
  gap: 0.55rem;
}

.poi-card h3 {
  margin: 0 0 0.25rem;
}

.contact-card .eyebrow,
.ward-notes .eyebrow {
  margin-bottom: 0.65rem;
}

.contact-list {
  display: grid;
  gap: 0;
}

.contact-option {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0;
}

.contact-option:first-child {
  padding-top: 0;
}

.contact-option:last-child {
  padding-bottom: 0;
}

.contact-option + .contact-option {
  border-top: 1px solid var(--border);
}

.contact-label {
  color: var(--muted-text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.poi-card p,
.contact-card p,
.ward-notes p,
.overlap-row span {
  margin: 0;
}

.poi-category {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.poi-meta {
  align-items: center;
  color: var(--muted-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.5rem;
}

.community-landmark-gallery {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
}

.community-landmark-gallery > div {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-landmark-gallery article {
  display: grid;
  gap: 0.35rem;
}

.community-landmark-gallery img {
  aspect-ratio: 4 / 3;
  border-radius: 0.65rem;
  display: block;
  object-fit: cover;
  width: 100%;
}

.community-landmark-gallery span {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.overlap-row {
  display: grid;
  gap: 0.5rem;
}

.overlap-row > div:first-child {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.overlap-row span {
  color: var(--muted-text);
  font-size: 0.85rem;
}

.overlap-bar {
  background: rgb(21 94 117 / 12%);
  border-radius: 999px;
  height: 0.55rem;
  overflow: hidden;
}

.overlap-bar span {
  background: var(--selected-ward);
  display: block;
  height: 100%;
}

.detail-list-single {
  grid-template-columns: 1fr;
}

.profile-heading h2 {
  margin: 0;
}

.profile-heading .eyebrow,
.alder-card .eyebrow {
  margin-bottom: 0.25rem;
}

.hero-card,
.fieldhouse-carousel,
.mode-card,
.practice-stage,
.question-card {
  padding: 1.25rem;
}

.fieldhouse-carousel {
  background:
    linear-gradient(135deg, rgb(248 225 207 / 62%), rgb(255 253 248 / 90%) 42%),
    var(--surface);
  display: grid;
  gap: 1rem;
}

.fieldhouse-hero-intro {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: auto minmax(0, 1fr);
}

.fieldhouse-hero-intro h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1;
  margin: 0 0 0.65rem;
}

.fieldhouse-hero-intro p:not(.eyebrow) {
  color: var(--muted-text);
  margin: 0;
  max-width: 48rem;
}

.product-logo-card {
  background: white;
  border: 1px solid rgb(184 95 46 / 18%);
  border-radius: calc(var(--radius-lg) + 0.25rem);
  box-shadow: 0 14px 30px rgb(141 69 37 / 16%);
  display: block;
  width: clamp(8rem, 18vw, 12rem);
}

.fieldhouse-viewport {
  overflow: hidden;
}

.fieldhouse-track {
  display: flex;
  gap: 0.65rem;
  width: max-content;
  will-change: transform;
}

.fieldhouse-slide {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  flex: 0 0 clamp(9rem, 15vw, 12rem);
  overflow: hidden;
}

.fieldhouse-slide img {
  display: block;
  height: 7rem;
  object-fit: cover;
  width: 100%;
}

.fieldhouse-slide div {
  padding: 0.5rem 0.65rem 0.6rem;
}

.fieldhouse-slide h3 {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.fieldhouse-slide p {
  color: var(--muted-text);
  font-size: 0.75rem;
  margin: 0;
}

.fieldhouse-source {
  color: var(--muted-text);
  font-size: 0.8rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fieldhouse-viewport {
    overflow-x: auto;
  }

  .fieldhouse-track {
    scroll-snap-type: x mandatory;
    will-change: auto;
  }

  .fieldhouse-slide {
    scroll-snap-align: start;
  }
}

.mode-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.button-link {
  background: var(--brand-accent);
  border-radius: var(--radius-md);
  color: white;
  display: inline-block;
  font-weight: 700;
  margin-top: 0.6rem;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
}

.button-link:hover {
  background: var(--brand-accent-dark);
}

.auth-layout {
  box-sizing: border-box;
  display: grid;
  margin: 0 auto;
  max-width: 42rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

.auth-card {
  background:
    linear-gradient(135deg, rgb(248 225 207 / 62%), rgb(255 253 248 / 90%) 42%),
    var(--surface);
  gap: 1.2rem;
  overflow: visible;
}

.auth-intro {
  display: grid;
  gap: 0.4rem;
}

.auth-intro h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
  margin: 0;
}

.auth-intro p:not(.eyebrow) {
  color: var(--muted-text);
  margin: 0;
}

.auth-form,
.auth-status,
.auth-dev-link,
.auth-account-summary {
  background: rgb(255 253 248 / 76%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.auth-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.auth-form label {
  color: var(--text);
  display: grid;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.3rem;
  width: 100%;
}

.auth-form input {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

.auth-form button,
.auth-button {
  align-items: center;
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: 999px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: center;
  margin: 0;
  padding: 0.6rem 1rem;
  text-decoration: none;
  width: 100%;
}

.auth-form button:hover,
.auth-button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: white;
}

.auth-status,
.auth-dev-link {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
}

.auth-status h2,
.auth-status p,
.auth-dev-link h2,
.auth-dev-link p {
  margin: 0;
}

.auth-status h2,
.auth-dev-link h2 {
  font-size: 1rem;
}

.auth-status p,
.auth-dev-link p {
  color: var(--muted-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-dev-link a {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.auth-account-summary {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.auth-account-summary span {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-account-summary strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.auth-actions {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-button-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--action);
}

.auth-button-secondary:hover {
  background: var(--brand-wash);
  border-color: rgb(184 95 46 / 38%);
  color: var(--brand-accent-dark);
}

.practice-stage {
  align-content: start;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 1rem;
  overflow: visible;
}

.road-practice-stage {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.road-question-card {
  display: grid;
  gap: 1rem;
}

.road-settings-panel {
  align-content: start;
}

.checkbox-option {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.checkbox-option input {
  margin: 0;
  width: auto;
}

.compact-score-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.compact-score-panel .eyebrow,
.compact-score-panel p {
  margin: 0;
}

.score-summary {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.score-note {
  color: var(--muted-text);
  font-size: 0.86rem;
}

.score-panel ul {
  margin: 0;
  padding-left: 1.2rem;
}

.option-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-map-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 5.45rem);
  position: relative;
}

.practice-map-heading {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem;
}

.practice-map-heading h2,
.practice-map-heading p {
  margin: 0;
}

.practice-map-heading > p {
  color: var(--muted-text);
  font-size: 0.9rem;
}

#practice-map {
  height: 100%;
  min-height: 32rem;
}

.practice-subject-control {
  border-radius: 0;
  border-width: 0 0 1px;
}

.practice-settings-panel.learn-settings-panel {
  right: 0;
  top: 3.65rem;
  z-index: 1000;
}

.settings-toggle {
  aspect-ratio: 1;
  background: var(--surface-muted);
  color: var(--action);
  display: grid;
  margin: 0;
  padding: 0;
  place-items: center;
  width: 2.4rem;
}

.settings-toggle:hover,
.settings-toggle[aria-expanded="true"] {
  background: var(--action);
  color: white;
}

.practice-settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  position: absolute;
  right: 1rem;
  top: 5.6rem;
  width: min(20rem, calc(100% - 2rem));
  z-index: 500;
}

.practice-settings-panel[hidden] {
  display: none;
}

.settings-panel-heading {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.settings-panel-heading h3,
.settings-panel-heading p {
  margin: 0;
}

.settings-option-grid,
.answer-option-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-option-grid button,
.answer-option-grid button {
  background: var(--surface-muted);
  color: var(--action);
  margin: 0;
}

.settings-option-grid button:hover,
.settings-option-grid button.is-active {
  background: var(--action);
  color: white;
}

.answer-option-grid button.is-correct {
  background: var(--selected-ward);
  color: white;
}

.answer-option-grid button.is-incorrect {
  background: #b42318;
  color: white;
}

.architecture-question-card {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.architecture-practice-layout {
  align-items: stretch;
  box-sizing: border-box;
  grid-template-areas:
    "question answers"
    "question context";
  grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
  grid-template-rows: auto auto;
  height: calc(100vh - 3.45rem);
  min-height: 0;
  overflow: hidden;
}

.architecture-practice-layout.is-ordering-mode {
  grid-template-areas:
    "question answers"
    "context answers";
  grid-template-rows: auto minmax(0, 1fr);
}

.architecture-practice-layout .practice-stage {
  grid-area: question;
  min-height: 0;
}

.architecture-answer-card {
  grid-area: answers;
}

.architecture-context-card {
  grid-area: context;
  align-self: start;
}

.architecture-practice-layout.is-ordering-mode .architecture-context-card {
  align-self: stretch;
}

.architecture-quiz-heading {
  border-bottom: 1px solid var(--border);
}

.architecture-question-area {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.architecture-question-area {
  margin-bottom: 1.25rem;
}

.architecture-practice-layout.is-ordering-mode .architecture-question-area {
  display: none;
}

.architecture-practice-layout.is-ordering-mode .architecture-context-body {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.architecture-practice-layout.is-ordering-mode #architecture-info-map {
  height: 100%;
  min-height: 10rem;
}

.architecture-settings-panel {
  max-height: min(42rem, calc(100vh - 7rem));
  overflow: auto;
  width: min(27rem, calc(100% - 2rem));
}

.architecture-settings-panel section {
  display: grid;
  gap: 0.6rem;
}

.architecture-settings-panel h3 {
  font-size: 1rem;
  margin: 0;
}

.architecture-mode-control {
  border-radius: var(--radius-md);
}

.architecture-quiz-image {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0;
  overflow: hidden;
}

.architecture-quiz-image img {
  display: block;
  max-height: clamp(12rem, 42vh, 22rem);
  object-fit: cover;
  width: 100%;
}

.answer-detail {
  color: var(--muted-text);
  font-weight: 600;
}

.checkbox-row {
  align-items: center;
  border-radius: var(--radius-md);
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
}

.checkbox-row input {
  margin: 0;
  width: auto;
}

.checkbox-row-strong {
  font-weight: 800;
}

.architecture-community-filter-list {
  border-top: 1px solid var(--border);
  display: grid;
  margin-top: 0.35rem;
  max-height: 14rem;
  overflow: auto;
  padding-top: 0.35rem;
}

.architecture-type-filters {
  display: grid;
  gap: 0.25rem;
}

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

.architecture-answer-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: 0.5rem;
  object-fit: cover;
  width: 100%;
}

.architecture-info-panel {
  display: grid;
  gap: 1.1rem;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: visible;
}

.architecture-answer-card,
.architecture-context-card {
  background: var(--surface);
  border: 1px solid rgb(217 229 227 / 70%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.9rem;
  position: relative;
}

.architecture-practice-layout.is-ordering-mode .architecture-answer-card {
  align-self: stretch;
  overflow: hidden;
}

.architecture-answer-area {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
}

.architecture-practice-layout.is-ordering-mode .architecture-answer-area {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
}

.architecture-practice-layout.is-ordering-mode .answer-option-grid {
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.architecture-practice-layout.is-ordering-mode .answer-option-grid button {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem;
}

.architecture-practice-layout.is-ordering-mode .architecture-answer-thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

.architecture-practice-layout.is-ordering-mode .road-answer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.architecture-score-badge {
  background: rgb(237 245 243 / 92%);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  position: absolute;
  right: 1rem;
  text-transform: uppercase;
  top: 1rem;
  z-index: 1;
}

.architecture-context-panel {
  overflow: hidden;
}

.architecture-context-body {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 0.95fr) minmax(16rem, 1.05fr);
  min-height: 0;
}

#architecture-info-map {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgb(237 245 243 / 86%), rgb(255 255 255 / 92%));
  height: auto;
  min-height: clamp(13rem, 32vh, 20rem);
  overflow: hidden;
  width: 100%;
}

.architecture-map-card {
  grid-template-rows: auto auto minmax(22rem, 1fr) auto;
}

.architecture-map-toolbar {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1rem;
}

#architecture-map {
  height: 100%;
  min-height: 24rem;
}

.architecture-detail-card {
  align-items: start;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  padding: 1rem;
}

.architecture-detail-card img,
.architecture-popup img {
  border-radius: var(--radius-md);
  display: block;
  object-fit: cover;
  width: 100%;
}

.architecture-detail-card img {
  aspect-ratio: 4 / 3;
}

.architecture-info-panel .architecture-detail-card,
.architecture-study-sidebar .architecture-detail-card {
  border-top: 0;
  padding: 0;
}

.architecture-info-panel .architecture-detail-card {
  display: block;
}

.architecture-context-card .architecture-detail-card {
  border-top: 0;
  display: block;
  min-width: 0;
  padding: 0.35rem;
}

.architecture-practice-detail {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
}

.architecture-meta-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.architecture-meta-list div {
  align-items: baseline;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
  padding-top: 0.35rem;
}

.architecture-meta-list dt {
  color: var(--muted-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.architecture-meta-list dd {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0;
  min-width: 0;
}

.architecture-meta-list-placeholder dd {
  color: var(--muted-text);
}

.architecture-detail-empty {
  grid-column: 1 / -1;
}

.architecture-study-controls {
  grid-template-columns: minmax(14rem, 1fr) minmax(16rem, max-content) 2.4rem;
}

.architecture-study-map-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.architecture-study-sidebar {
  grid-template-rows: minmax(0, 1fr) auto;
}

.architecture-study-sidebar .profile-panel {
  overflow: auto;
}

.architecture-study-sidebar .architecture-detail-card {
  grid-template-columns: 1fr;
}

.architecture-study-sidebar .architecture-detail-card > img {
  aspect-ratio: 16 / 10;
  max-height: clamp(14rem, 36vh, 24rem);
}

.architecture-map-info-panel {
  gap: 0.75rem;
  max-height: 15rem;
  overflow: auto;
  padding: 1rem;
}

.architecture-map-info-panel .panel-heading h2 {
  font-size: 1.05rem;
}

.architecture-map-legend {
  display: grid;
  gap: 0.55rem;
}

.architecture-legend-section {
  display: grid;
  gap: 0.35rem;
}

.architecture-legend-section p {
  color: var(--muted-text);
  font-size: 0.86rem;
  margin: 0;
}

.architecture-color-legend {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.architecture-color-legend span {
  align-items: center;
  display: flex;
  font-size: 0.84rem;
  font-weight: 700;
  gap: 0.4rem;
}

.architecture-color-legend i {
  border: 1px solid rgb(18 52 59 / 22%);
  border-radius: 999px;
  display: inline-block;
  height: 0.8rem;
  width: 0.8rem;
}

.architecture-size-legend {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-height: 1.5rem;
}

.architecture-size-legend span {
  background: var(--selected-ward);
  border: 2px solid #111827;
  border-radius: 999px;
  display: block;
}

.architecture-size-legend span:nth-child(1) {
  height: 0.5rem;
  width: 0.5rem;
}

.architecture-size-legend span:nth-child(2) {
  height: 0.85rem;
  width: 0.85rem;
}

.architecture-size-legend span:nth-child(3) {
  height: 1.25rem;
  width: 1.25rem;
}

.architecture-detail-card h3,
.architecture-detail-card p {
  margin: 0 0 0.45rem;
}

.architecture-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.architecture-image-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0;
}

.architecture-study-sidebar .architecture-image-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.architecture-image-strip img {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  height: 3.25rem;
  object-fit: cover;
  width: 3.25rem;
}

.architecture-study-sidebar .architecture-image-strip img {
  height: auto;
  width: 100%;
}

.architecture-popup {
  display: grid;
  gap: 0.35rem;
  max-width: 13rem;
}

.architecture-popup img {
  max-height: 8rem;
}

.feedback {
  font-weight: 700;
}

.road-ordering-selection-detail {
  color: var(--muted-text);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.25rem;
  text-transform: uppercase;
}

.road-answer-name {
  display: block;
}

.detail-list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-list div {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
}

.detail-list dt {
  color: var(--muted-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
}

label,
select,
button {
  display: block;
  width: 100%;
}

select,
button {
  border: 1px solid #bfd2d7;
  border-radius: var(--radius-md);
  font: inherit;
  margin-top: 0.4rem;
  padding: 0.65rem;
}

select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgb(56 189 248 / 45%);
  outline-offset: 2px;
}

button {
  background: var(--action);
  color: white;
  cursor: pointer;
  font-weight: 700;
  margin-top: 0.6rem;
}

button:hover {
  background: var(--action-hover);
}

button.secondary,
#practice-options button,
.answer-option-grid button {
  background: white;
  color: var(--action);
}

button.secondary:hover,
#practice-options button:hover,
.answer-option-grid button:hover {
  background: var(--surface-muted);
}

.segmented-control {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.25rem;
}

.segmented-control button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted-text);
  margin: 0;
  padding: 0.55rem 0.8rem;
}

.segmented-control button:hover,
.segmented-control button.is-active {
  background: var(--surface);
  color: var(--action);
  box-shadow: 0 4px 14px rgb(18 52 59 / 10%);
}

.ward-navigator {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgb(255 253 248 / 88%);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgb(18 52 59 / 18%);
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 2.4rem minmax(9rem, 1fr) 2.4rem;
  padding: 0.35rem;
  width: 100%;
}

.ward-navigator select,
.ward-navigator button {
  margin: 0;
}

.ward-navigator select {
  background: transparent;
  border: 0;
  font-weight: 700;
  padding: 0.55rem 0.35rem;
}

.icon-button {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 999px;
  color: var(--action);
  display: grid;
  font-size: 1.5rem;
  line-height: 1;
  place-items: center;
  padding: 0;
}

.icon-button:hover {
  background: var(--surface-muted);
  color: var(--action-hover);
}

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

.text-button {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--action);
  margin-top: 0;
  padding: 0;
  text-decoration: underline;
  width: auto;
}

.text-button:hover {
  background: transparent;
  color: var(--action-hover);
}

#practice-options button.is-correct,
.answer-option-grid button.is-correct {
  background: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}

#practice-options button.is-incorrect,
.answer-option-grid button.is-incorrect {
  background: #fee2e2;
  border-color: #dc2626;
  color: #7f1d1d;
}

.alder-photo {
  border-radius: var(--radius-md);
  max-width: 7rem;
}

.alder-card {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  gap: 1rem;
  padding: 0.9rem;
}

.alder-card > div {
  display: grid;
  gap: 0.2rem;
}

.alder-card h3 {
  margin: 0 0 0.25rem;
}

.alder-card p {
  margin: 0;
}

.profile-link {
  font-weight: 700;
}

.ward-label {
  font-weight: 700;
  text-align: center;
}

@media (max-width: 900px) {
  .site-header,
  .layout,
  .practice-layout,
  .road-grid-layout,
  .mode-grid,
  .option-grid,
  .practice-map-heading {
    display: block;
  }

  .site-brand,
  .site-nav {
    display: flex;
  }

  .site-nav {
    justify-content: flex-start;
    margin-top: 0.75rem;
  }

  .fieldhouse-hero-intro {
    grid-template-columns: 1fr;
  }

  .auth-actions {
    grid-template-columns: 1fr;
  }

  .product-logo-card {
    width: min(12rem, 58vw);
  }

  .learn-layout {
    height: auto;
    overflow: visible;
    padding: 1rem;
  }

  .practice-layout,
  .road-grid-layout {
    min-height: 0;
  }

  .learn-map-region,
  .learn-controls,
  .alder-card,
  .detail-list {
    display: grid;
  }

  .learn-controls {
    grid-template-columns: 1fr;
  }

  .fieldhouse-slide {
    flex-basis: min(72vw, 18rem);
  }

  #map {
    height: 60vh;
    min-height: 26rem;
  }

  #practice-map {
    height: 52vh;
    min-height: 24rem;
  }

  .practice-map-card {
    margin-top: 1rem;
    min-height: 0;
  }

  .practice-settings-panel {
    left: 1rem;
    right: 1rem;
    top: 6.6rem;
    width: auto;
  }

  .practice-settings-panel.learn-settings-panel {
    left: 0;
    margin-bottom: 0.75rem;
    position: static;
    right: auto;
    top: auto;
  }

  .settings-toggle {
    margin-top: 0.75rem;
  }

  .ward-navigator {
    width: auto;
  }

  .learn-sidebar {
    overflow: visible;
  }

  .sidebar-tabs {
    border-radius: var(--radius-lg);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout > .panel,
  .learn-sidebar {
    margin-top: 1rem;
  }

  .learn-sidebar .panel {
    margin-top: 0;
  }

  .architecture-context-body {
    grid-template-columns: 1fr;
  }

  #architecture-info-map {
    height: clamp(12rem, 36vh, 18rem);
  }

  .mode-card,
  .question-card {
    margin-top: 1rem;
  }
}