/* Available space, rather than a device name, determines the workspace layout. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-viewport-height: 100dvh;
  --app-viewport-top: 0px;
}

html { scroll-padding-block: calc(var(--app-safe-top) + 16px) calc(var(--app-safe-bottom) + 16px); }
body { min-width: 0; min-height: 100svh; }
body:not(.status-page):not(.feed-docs-page) > main {
  padding-top: var(--app-safe-top);
  padding-right: calc(var(--page-gutter) + var(--app-safe-right));
  padding-bottom: calc(90px + var(--app-safe-bottom));
  padding-left: calc(var(--page-gutter) + var(--app-safe-left));
}
main > *, .month-calendar, .day-feed, .rail-canvas, .rail-intelligence,
.playback-console > *, .playback-console-primary > *, .algorithm-fields > * { min-width: 0; }
input, select, textarea { max-width: 100%; }
input, select, textarea, button, summary { scroll-margin-block: 18px; }

.intro-splash {
  top: var(--app-viewport-top);
  bottom: auto;
  min-height: 0;
  height: var(--app-viewport-height);
  overflow: auto;
  padding: max(20px, var(--app-safe-top)) max(20px, var(--app-safe-right)) max(20px, var(--app-safe-bottom)) max(20px, var(--app-safe-left));
}
.intro-gate, .intro-dialogue { min-width: 0; max-width: 100%; }

.source-release-dialog, .relevance-explainer {
  top: calc(var(--app-viewport-top) + var(--app-safe-top) + 12px);
  right: calc(var(--app-safe-right) + 12px);
  bottom: auto;
  left: calc(var(--app-safe-left) + 12px);
  width: auto;
  max-width: 1040px;
  max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);
  margin: 0 auto;
}
.source-release-dialog { max-width: 820px; }
.relevance-explainer-close { min-height: 44px; }

.status-page > main {
  padding-right: calc(16px + var(--app-safe-right));
  padding-bottom: calc(64px + var(--app-safe-bottom));
  padding-left: calc(16px + var(--app-safe-left));
}
.status-topline {
  padding-top: calc(16px + var(--app-safe-top));
  padding-right: calc(16px + var(--app-safe-right));
  padding-left: calc(16px + var(--app-safe-left));
}
.status-page > footer {
  width: calc(100% - 32px - var(--app-safe-right) - var(--app-safe-left));
  max-width: 1500px;
  margin-left: max(calc(16px + var(--app-safe-left)), calc((100% - 1500px) / 2));
  margin-right: auto;
  padding-bottom: calc(34px + var(--app-safe-bottom));
}
.feed-docs-page > main {
  width: min(1040px, calc(100% - 32px - var(--app-safe-right) - var(--app-safe-left)));
  margin-left: max(calc(16px + var(--app-safe-left)), calc((100% - 1040px) / 2));
  margin-right: auto;
  padding-top: calc(32px + var(--app-safe-top));
  padding-bottom: calc(64px + var(--app-safe-bottom));
}
.feed-docs-page dd, .feed-docs-page code { overflow-wrap: anywhere; }
.feed-docs-page .card { min-width: 0; }
.feed-docs-page pre { max-width: 100%; }

/* An open, wide screen has room for both the calendar and selected-day feed. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 720px) {
  body:not(.status-page):not(.feed-docs-page) > main { padding-bottom: calc(64px + var(--app-safe-bottom)); }
}

@media (min-width: 760px) and (max-width: 1100px) and (orientation: landscape) {
  .calendar-feed-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
  .calendar-grid > *, .calendar-grid button { min-width: 0; padding-inline: 5px; }
  .day-feed { margin-top: 62px; }
}

@media (max-width: 1100px) {
  .heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .heading .actions { justify-self: start; }
  .playback-console, .map-toolbar.playback-console, .rail-toolbar.playback-console {
    grid-template-columns: minmax(0, 1fr);
  }
  .playback-console-lead { border-right: 0; }
}

/* Shallow windows include tabletop use, a pinned video and the on-screen keyboard. */
@media (max-height: 540px) {
  .heading { padding-block: 22px; }
  .heading h1 > span { font-size: clamp(36px, 6vw, 62px); }
  .heading-deck { margin-top: 16px; }
  .relevance-explainer-head { position: relative; padding-block: 14px; }
  .source-release-layout { padding-top: 18px; }
  .source-release-head { padding-bottom: 16px; }
  .source-release-list { margin-block: 18px; }
  .intro-gate { gap: 8px; }
  .intro-gate-mark { display: none; }
  .intro-dialogue { gap: 12px; }
  .intro-line { font-size: clamp(21px, 3.5vw, 34px); }
  .venue-map { min-height: 180px; height: min(var(--map-height, 64dvh), 72dvh); }
  .rail-canvas { min-height: 0; height: min(var(--rail-screen-height, 78dvh), 80dvh); }
}

@media (max-width: 380px) {
  :root { --page-gutter: 14px; }
  .heading h1 > span { font-size: clamp(37px, 13vw, 48px); overflow-wrap: anywhere; }
  .heading h1 > em { margin-left: 0; }
  .actions { width: 100%; gap: 10px 14px; }
  .heading-utility { gap: 10px; }
  .status { max-width: 156px; }
  .calendar-grid > *, .calendar-grid button { min-width: 0; padding-inline: 2px; }
  .calendar-day span, .calendar-day small { overflow-wrap: anywhere; }
  .algorithm-panel > summary { align-items: start; gap: 12px; }
  .algorithm-panel > summary > span:last-child { flex: 0 1 70px; }
  .algorithm-fields label { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .algorithm-action-buttons { flex-wrap: wrap; }
  .rail-timeline-event { grid-template-columns: 84px minmax(0, 1fr); }
  .rail-timeline-scale { margin-left: 92px; }
  .source-release-title-row { gap: 12px; }
  .source-release-title-row h2 { font-size: 32px; }
  .source-release-title-row > span { font-size: 42px; }
  .relevance-explainer-head { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
  .relevance-explainer-close { grid-row: 1; justify-self: end; }
  .relevance-explainer-body { padding-inline: 16px; }
  .source-release-list li { overflow-wrap: anywhere; }
  .feed-docs-page .card { padding: 16px; }
}

@media (pointer: coarse) {
  .toolbar input:not([type="checkbox"]), .toolbar select,
  .algorithm-fields input, .playback-field input, .playback-field select,
  .playback-cadence input[type="number"], .source-search input { font-size: 16px; min-height: 44px; }
  .view-tab, .store-button, .theme-toggle, .playback-transport button,
  .playback-map-actions button, .source-filter-buttons button { min-height: 44px; }
}

/* Use segment information only in browsers that actually expose a fold. */
@media (horizontal-viewport-segments: 2) and (min-width: 760px) {
  .calendar-feed-layout {
    grid-template-columns: minmax(0, calc(env(viewport-segment-right 0 0, 50vw) - var(--calendar-left-edge, 0px) - 16px)) minmax(0, 1fr);
    column-gap: max(32px, calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 32px));
  }
  .day-feed { margin-top: 62px; }
}
@media (vertical-viewport-segments: 2) {
  .venue-map { min-height: 160px; max-height: env(viewport-segment-height 0 0, 50dvh); }
  .rail-canvas { min-height: 0; max-height: env(viewport-segment-height 0 0, 50dvh); }
  .map-toolbar.playback-console, .rail-toolbar.playback-console { grid-template-columns: 1fr; }
}