/* Final typography and control pass. This file intentionally loads last so the
   legacy layouts and the glass shell share one readable type scale. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --type-display: clamp(1.9rem, 4vw, 3rem);
  --type-title: clamp(1.4rem, 2.4vw, 2rem);
  --type-body: 1rem;
  --type-control: .875rem;
  --type-label: .875rem;
  --type-caption: .8125rem;
  --type-kicker: .75rem;
}

body.glass-ui,
.glass-sheet,
.glass-dock,
.flow-navigator,
dialog {
  font-family: var(--ui-font) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Tank chrome */
body.glass-ui .top-actions button,
body.glass-ui .day-chip,
body.glass-ui .network-badge {
  font-family: var(--ui-font) !important;
  font-size: .75rem;
  line-height: 1.25;
}

body.glass-ui .specimen,
body.glass-ui .vitals,
body.glass-ui .hint,
body.glass-ui .leave-ambient {
  font-family: var(--ui-font) !important;
  font-size: .75rem;
  line-height: 1.4;
}

.glass-dock {
  gap: 4px;
  padding: 6px;
  border-radius: 20px;
}

.glass-dock button {
  min-width: 68px;
  min-height: 50px;
  padding: 6px 10px;
  border-radius: 15px;
  font-family: var(--ui-font) !important;
  font-size: .75rem;
  line-height: 1.2;
}

.glass-dock button span {
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: 3px;
}

/* Glass surfaces stay soft without swallowing their content. */
.glass-sheet {
  border-radius: 26px;
}

.glass-sheet-header {
  padding: 14px 18px;
}

.glass-sheet-header h2 {
  font-family: var(--ui-font) !important;
  font-size: var(--type-title);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.glass-sheet-header p {
  max-width: 70ch;
  font-size: var(--type-caption);
  line-height: 1.4;
}

.glass-sheet-body {
  padding: 14px;
}

.glass-panel-grid {
  gap: 12px;
  padding-top: 10px;
}

.glass-card {
  padding: 20px !important;
  border-radius: 20px !important;
}

.glass-sheet .tool-shelves article,
.glass-sheet .station-grid article,
.glass-sheet .advanced-grid article,
.glass-sheet .utility-grid article,
.today-card,
.glass-subcard {
  border-radius: 16px !important;
}

/* A restrained, predictable hierarchy in every relocated section. */
.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card h4,
.glass-card p,
.glass-card li,
.glass-card label,
.glass-card legend,
.glass-card small,
.glass-card summary,
.glass-card dt,
.glass-card dd,
.glass-card button,
.glass-card input,
.glass-card select,
.glass-card textarea,
.glass-card output {
  font-family: var(--ui-font) !important;
}

.glass-card h2,
.glass-card h3 {
  font-size: var(--type-title) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}

.glass-card .section-heading h2,
.glass-card.family > div > h2 {
  font-size: var(--type-display) !important;
  line-height: 1.04 !important;
}

.glass-card h4 {
  font-size: 1.125rem;
  line-height: 1.25;
}

.glass-card p,
.glass-card li,
.glass-card dd,
.glass-card textarea {
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}

.glass-card label,
.glass-card legend,
.glass-card summary,
.glass-card dt,
.glass-card output {
  font-size: var(--type-label) !important;
  line-height: 1.45 !important;
}

.glass-card small,
.glass-card .date,
.glass-card .layer-count,
.glass-card .garden-count,
.glass-card .source-status,
.glass-card .atlas-result-line {
  font-size: var(--type-caption) !important;
  line-height: 1.45 !important;
}

.glass-card .kicker,
.glass-card .specimen {
  font-size: var(--type-kicker) !important;
  line-height: 1.4 !important;
  letter-spacing: .065em;
}

.glass-card .status-strip > div,
.glass-card .chemistry,
.glass-card .focus-readout,
.glass-card .system-readout,
.glass-card .history-tools label,
.glass-card .entry .date {
  font-family: var(--ui-font) !important;
  font-size: var(--type-label) !important;
  line-height: 1.4;
}

.glass-card .growth-stat span,
.glass-card .genome-bars span,
.glass-card .journal-search span,
.glass-card .production-health span,
.glass-card .breathing-orb span,
.glass-card.status-strip > div > span {
  font-family: var(--ui-font) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.4;
}

/* Controls: readable copy, compact glass, and full-size tap targets. */
.glass-sheet button,
.glass-sheet .file-label,
.glass-sheet input,
.glass-sheet select,
.glass-sheet textarea,
.flow-navigator button,
.flow-navigator input,
dialog button,
dialog input,
dialog select,
dialog textarea,
dialog label {
  font-family: var(--ui-font) !important;
  font-size: var(--type-control) !important;
  line-height: 1.35;
}

.glass-sheet button,
.glass-sheet .file-label {
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  white-space: normal;
  text-align: center;
}

.flow-card-expand {
  min-height: 48px !important;
  padding: 6px 10px !important;
  border-radius: 11px !important;
  font-size: var(--type-caption) !important;
}

.flow-rail-buttons button {
  min-height: 48px !important;
  padding: 8px 12px !important;
  font-size: var(--type-caption) !important;
  line-height: 1.25;
}

.glass-sheet .flow-filter {
  min-height: 44px !important;
  padding: 9px 12px !important;
  font-size: 1rem !important;
}

.glass-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.glass-card select,
.glass-card textarea {
  min-height: 44px;
  font-size: 1rem !important;
  line-height: 1.35;
}

.glass-card input[type="checkbox"],
.glass-card input[type="radio"],
.atlas-saved-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-inline-size: 1.125rem;
  min-height: 1.125rem !important;
  margin: 0;
  accent-color: #0878ed;
}

.glass-card input[type="range"] {
  min-height: 28px !important;
}

.layer-toggles label,
.wild-plant-grid label,
.preference-list label,
.signal-settings label,
.ownership-actions label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 9px;
  font-size: var(--type-label) !important;
  line-height: 1.35 !important;
  border: 1px solid rgba(45, 77, 81, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
}

.signal-settings {
  gap: 6px 12px;
  padding: 14px;
}

.signal-settings legend {
  padding-inline: 7px;
}

/* Give dense cards a steady vertical rhythm. Related labels and headings stay
   close; forms, action rows, and new subsections get a visible pause. */
.today-card > .kicker,
.growth-card > .kicker,
.advanced-grid article > .kicker {
  margin: 0 0 4px !important;
}

.today-card > h3,
.growth-card > h3,
.advanced-grid article > h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.today-card > h4,
.growth-card > h4,
.advanced-grid article > h4 {
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

.today-card > p,
.growth-card > p,
.advanced-grid article > p {
  margin-block: 10px 14px;
}

.today-card > details + details {
  margin-top: 12px;
}

.today-card details[open] > summary {
  margin-bottom: 10px;
}

.today-actions,
.growth-actions,
.event-actions,
.scene-grid,
.mode-buttons,
.biome-picker,
.wildlife-grid,
.aesthetic-presets,
.layer-toggles,
.landmark-grid,
.spectacle-layers,
.house-styles,
.amenity-grid,
.flower-grid,
.background-plant-grid,
.tank-slots,
.ownership-actions {
  gap: 10px !important;
}

.today-form,
.blend-maker,
.house-controls {
  gap: 10px !important;
}

.today-card > textarea + .today-actions,
.today-card > .now-playing + .today-actions,
.today-card > .preference-list + .time-grid,
.today-card > .time-grid + .today-actions,
.today-card > .connection-health + .today-actions,
.assistant-journal-archive > .growth-heading + .today-actions,
.aesthetic-presets + .aesthetic-density,
.landmark-grid + .spectacle-density,
.scene-grid + .event-actions,
.house-levels + .house-controls,
.house-controls + .house-styles,
.house-styles + .growth-actions,
.amenity-grid + h4,
.wildlife-grid + .wildlife-sliders,
.background-plant-grid + .plant-growth,
.plant-growth + .garden-count {
  margin-top: 14px !important;
}

.today-card > .today-actions + input,
.today-card > .today-actions + label,
.today-card > input + .today-list,
.today-card > textarea + button,
.advanced-grid article > .tank-slots + input,
.advanced-grid article > input + button,
.advanced-grid article > button + button,
.growth-card > label:has(input[type="checkbox"]) + button,
.aesthetic-density + .layer-count,
.spectacle-density + .spectacle-layers,
.layer-count + .layer-toggles,
.spectacle-layers + .growth-actions,
.layer-toggles + .growth-actions {
  margin-top: 10px !important;
}

.today-card > label,
.time-grid label,
.tool-shelves article > label,
.station-grid article > label,
.field-note label {
  gap: 7px !important;
}

.preference-list,
.connection-health {
  gap: 10px !important;
}

.signal-settings {
  gap: 10px 12px;
  padding: 16px;
}

.growth-heading {
  gap: 16px;
  margin-bottom: 4px;
}

.event-card {
  margin-bottom: 18px;
}

.mastery-grid,
.genome-bars {
  row-gap: 10px !important;
}

.advanced-grid article > #chapterStatus,
.advanced-grid article > #captureStatus {
  margin-top: 14px !important;
}

.today-mood > label {
  margin-block: 10px !important;
}

.today-mood > textarea,
.today-mood > textarea + button,
.wildlife-sliders + h4,
.wild-plant-grid + .growth-actions {
  margin-top: 12px !important;
}

.growth-card > p:empty {
  display: none;
}

/* Small metadata in the atlas and navigator was previously 9–11px. */
.atlas-total span,
.atlas-stats span,
.atlas-toolbar label > span,
.atlas-number,
.atlas-status,
.atlas-category,
.flow-key {
  font-family: var(--ui-font) !important;
  font-size: .75rem !important;
  line-height: 1.35;
}

.atlas-item p,
.flow-nav-results button small {
  font-size: var(--type-control) !important;
  line-height: 1.45;
}

.flow-nav-results button b {
  font-size: .9375rem;
  line-height: 1.3;
}

dialog {
  max-height: calc(100svh - 24px);
  overflow: auto;
  font-size: var(--type-body);
  line-height: 1.5;
}

dialog h2 {
  font-family: var(--ui-font);
  font-size: var(--type-display);
  line-height: 1.08;
}

dialog .kicker {
  font-family: var(--ui-font) !important;
  font-size: var(--type-kicker) !important;
  line-height: 1.4;
}

dialog button,
dialog .primary-button {
  min-height: 44px;
}

/* First-run content uses the same voice and scale as the rest of the app. */
dialog.onboarding {
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(241, 248, 246, .97), rgba(215, 233, 230, .94));
  box-shadow: 0 36px 100px rgba(1, 17, 23, .5), inset 0 1px white;
}

.onboarding-copy h2 {
  font-family: var(--ui-font) !important;
  font-size: var(--type-display) !important;
  font-weight: 650 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.onboarding-copy > p:not(.kicker) {
  font-family: var(--ui-font);
  font-size: var(--type-body);
  line-height: 1.5;
}

.onboarding-actions button {
  border-radius: 13px;
  font-family: var(--ui-font) !important;
  font-size: var(--type-control) !important;
  line-height: 1.35;
}

.onboarding-actions small {
  font-family: var(--ui-font) !important;
  font-size: var(--type-caption) !important;
  line-height: 1.4;
}

.onboarding-art::before {
  font-family: var(--ui-font) !important;
  font-weight: 650 !important;
}

/* The command navigator is an index, not a stack of oversized cards. */
.flow-nav-wrap {
  padding: 16px;
}

.flow-nav-head input {
  min-height: 48px;
  padding: 10px 13px;
}

.flow-nav-results {
  gap: 6px;
  margin-top: 10px;
}

.flow-nav-results button {
  min-height: 68px;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 14px;
}

.flow-nav-results button small {
  font-size: var(--type-caption) !important;
  line-height: 1.35;
}

body.large-text {
  --type-display: clamp(2.1rem, 4.4vw, 3.25rem);
  --type-title: clamp(1.6rem, 2.7vw, 2.2rem);
  --type-body: 1.125rem;
  --type-control: 1rem;
  --type-label: 1rem;
  --type-caption: .9375rem;
  --type-kicker: .875rem;
}

@media (max-width: 800px) {
  body.glass-ui .topbar {
    padding-inline: 12px;
  }

  body.glass-ui .top-actions {
    gap: 7px;
  }

  body.glass-ui .top-actions button {
    padding: 6px 7px;
    font-size: 0 !important;
  }

  body.glass-ui .top-actions button::after {
    font-family: var(--ui-font);
    font-size: .75rem !important;
    line-height: 1.2;
  }

  .glass-sheet {
    border-radius: 20px;
  }

  .glass-sheet-header {
    gap: 10px;
    padding: 12px 14px;
  }

  .glass-sheet-header p {
    font-size: .75rem;
  }

  .glass-sheet-body {
    padding: 10px;
  }

  .glass-panel-grid {
    gap: 12px;
    padding-top: 10px;
  }

  .glass-card {
    padding: 18px !important;
    border-radius: 17px !important;
  }

  .glass-card .section-heading {
    margin-bottom: 16px;
  }

  .glass-card .section-heading h2,
  .glass-card.family > div > h2 {
    font-size: clamp(1.75rem, 9vw, 2.25rem) !important;
  }

  .glass-card .panel h2 {
    font-size: var(--type-title) !important;
    line-height: 1.16 !important;
  }

  .glass-dock {
    gap: 2px;
    padding: 5px;
    border-radius: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .glass-dock::-webkit-scrollbar {
    display: none;
  }

  .glass-dock button {
    flex: 1 0 48px;
    min-width: 48px;
    min-height: 50px;
    padding: 6px 2px;
    border-radius: 13px;
    font-size: .75rem;
  }

  .glass-dock button span {
    font-size: 1rem;
  }

  .glass-section-rail {
    gap: 7px;
    padding-block: 7px;
  }

  .today-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .today-form > * {
    grid-column: 1 !important;
    min-width: 0;
    width: 100%;
  }

  .flow-card-expand {
    display: none !important;
  }

  dialog.onboarding {
    width: calc(100% - 20px);
  }

  .onboarding-art {
    min-height: 112px;
  }

  .onboarding-art::before {
    left: 18px;
    bottom: 14px;
    font-size: 2.75rem;
  }

  .onboarding-copy {
    padding: 20px;
  }

  .onboarding-copy h2 {
    margin: 8px 0 12px;
    font-size: clamp(1.9rem, 9vw, 2.25rem) !important;
  }

  .onboarding-actions {
    gap: 7px;
  }

  .onboarding-actions button {
    padding: 10px 12px;
  }

  .flow-navigator {
    width: calc(100% - 20px);
    border-radius: 20px !important;
  }

  .flow-nav-wrap {
    padding: 12px;
  }

  .flow-nav-head {
    gap: 8px;
  }

  .flow-nav-head input {
    min-height: 46px;
    padding: 9px 11px;
  }

  .flow-nav-results button {
    min-height: 64px;
    padding: 8px 10px;
  }

  .layer-toggles,
  .wild-plant-grid {
    gap: 8px;
  }

  .layer-toggles label,
  .wild-plant-grid label {
    min-height: 44px;
    padding: 7px 9px;
  }
}

@media (max-width: 380px) {
  .glass-sheet-header p {
    max-width: 25ch;
  }
}