/* Shared layout contract. Loaded last: viewport width is owned here, not by page skins. */
.portal-ui {
  --layout-content-width: 85%;
  --layout-gap: clamp(1rem, 1.2vw, 2rem);
  --layout-table-height: min(60vh, 31rem);
}
/* The id deliberately outranks the legacy per-page .shell selectors. */
.portal-ui #main.shell {
  width: var(--layout-content-width);
  max-width: none;
  min-width: 0;
  margin-inline: auto;
}
.portal-ui:not(.codex-page):not(.terminal-page) #main.shell {
  padding-block: var(--layout-gap) calc(var(--layout-gap) * 2);
}
.portal-ui #main :where(.page-heading, .section-heading, .tracker-actions, .room-actions) {
  min-width: 0;
  flex-wrap: wrap;
}
.portal-ui #main :where(.section-heading, .page-heading) > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.portal-ui #main :where(input, select, textarea, fieldset) {
  min-width: 0;
  max-width: 100%;
}
.portal-ui #main > .card.wide {
  width: 100%;
  max-width: none;
}
/* Authentication and prose keep readable line lengths inside the shared shell. */
.portal-ui #main :where(.guide-section > p, .guide-section > ol, .guide-section > ul) {
  max-width: 85ch;
}
.portal-ui #main .game-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}
/* Keep paired lobby rows on one desktop column contract. */
.lobby-page #main :where(.lobby-overview-grid, .lobby-people-grid) {
  grid-template-columns: minmax(0, 1.9fr) minmax(20rem, .9fr);
  align-items: stretch;
  gap: var(--layout-gap);
}
.lobby-page #main .lobby-action-grid {
  align-items: start;
  gap: var(--layout-gap);
}
.lobby-page #main .lobby-slots-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: .85rem;
}
.lobby-page #main .lobby-slots-panel > :not(.slot-card) {
  grid-column: 1 / -1;
}
.lobby-page #main .lobby-slots-panel > .slot-card {
  height: auto;
  margin: 0;
  min-width: 0;
}
.lobby-page #main .lobby-players-panel {
  min-height: 0;
  height: 100%;
}
.lobby-page #main .lobby-overview-grid > :only-child {
  grid-column: 1 / -1;
}
.lobby-page #main .job-list {
  position: relative;
  max-height: 24rem;
  overflow: auto;
}
/* Room cards share the available width; the live activity transport is unchanged. */
.room-page #main [aria-label="Spielserverfortschritt"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 1rem;
  align-items: start;
}
.room-page #main [aria-label="Spielserverfortschritt"] > :not(.tracker-slot) {
  grid-column: 1 / -1;
}
.room-page #main [aria-label="Spielserverfortschritt"] > .tracker-slot {
  margin: 0;
}
.tracker-page #main .tracker-grid {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: var(--layout-gap);
}
.tracker-page #main .tracker-panel {
  min-width: 0;
}
/* Slot detail panels are now stacked full-width. */
.tracker-page #main :is(.tracker-slot-items, .tracker-slot-locations) .tracker-table {
  min-width: 0;
  table-layout: fixed;
}
.tracker-page #main :is(.tracker-slot-items, .tracker-slot-locations) :is(th, td) {
  overflow-wrap: anywhere;
}
.tracker-page #main .tracker-slot-items th:first-child {
  width: 64%;
}
.tracker-page #main .tracker-slot-items th:nth-child(2) {
  width: 14%;
}
.tracker-page #main #slot-locations th:first-child {
  width: 82%;
}
.tracker-page #main .tracker-hints-panel .tracker-table-wrap,
.tracker-page #main > .tracker-panel:last-of-type .tracker-table-wrap,
.tracker-page #main .tracker-scroll-table {
  max-height: var(--layout-table-height);
}
/* A single empty-state sentence must not occupy the fixed timestamp column. */
.tracker-page #main .tracker-event-list > li:not(:has(time)) {
  display: block;
}
.tracker-page #main .tracker-event-list > li:has(time) {
  grid-template-columns: minmax(6rem, .8fr) minmax(0, 1fr);
}
.tracker-page #main .tracker-event-list :is(time, span) {
  overflow-wrap: anywhere;
}
/* Native progress values work with the existing strict style-src CSP. */
.tracker-page #main progress.tracker-progress {
  appearance: none;
  display: inline-block;
  width: 6.5rem;
  max-width: 65%;
  height: .5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  accent-color: var(--accent);
  vertical-align: middle;
}
.tracker-page #main progress.tracker-progress::-webkit-progress-bar {
  background: var(--line);
  border-radius: inherit;
}
.tracker-page #main progress.tracker-progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: inherit;
}
.tracker-page #main progress.tracker-progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: inherit;
}
/* Intermediate windows get smaller gutters, never a desktop-sized minimum width. */
@media (max-width: 1599px) {
  .portal-ui {
    --layout-content-width: calc(100% - clamp(2rem, 6vw, 4rem));
  }
}
@media (max-width: 1180px) {
  .lobby-page #main :where(.lobby-overview-grid, .lobby-people-grid),
  .tracker-page #main .tracker-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lobby-page #main :where(.lobby-overview-grid, .lobby-people-grid) > * {
    height: auto;
  }
}
@media (max-width: 720px) {
  .portal-ui {
    --layout-content-width: calc(100% - 2rem);
    --layout-gap: .85rem;
    --layout-table-height: min(60vh, 30rem);
  }
  /* Preserve the terminal/console's established edge-to-edge mobile workspace. */
  .portal-ui:is(.codex-page, .terminal-page) {
    --layout-content-width: 100%;
  }
  .tracker-page #main #slot-locations th:first-child {
    width: 78%;
  }
}
@media (pointer: coarse) {
  .portal-ui #main :where(.button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) {
    min-height: 44px;
  }
}