/* Ticket 315: shared responsive guardrails.
   Feature styles still own their visual identity; this layer owns viewport safety,
   fluid composition, touch sizing and the common mobile reflow. */
:root {
  --responsive-gutter: clamp(14px, 3.5vw, 56px);
  --responsive-rail: 1560px;
  --touch-target: 44px;
  --mobile-nav-height: 64px;
}

html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overscroll-behavior-x: none; }
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { max-width: 100%; }
#app, .workspace, .workspace-main, .workspace-view { min-width: 0; max-width: 100%; }

/* Search and filter controls use the same readable scale across tabs. */
.collection-tools input, .collection-tools select,
.discovery-controls input, .discovery-controls select, .discovery-controls button,
.live-controls input, .live-controls select, .live-controls button,
.market-toolbar button, .discovery-type-filter button {
  font-size: 11px;
  letter-spacing: .04em;
}

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* Bookmarks and playback speed remain available in the compact player. */
@media (max-width: 950px) {
  .audio-transport-actions { display: flex; grid-column: 1 / -1; justify-content: center; }
  .audio-transport-actions button { min-height: var(--touch-target); font-size: 10px; }
}

/* Full-page surfaces use the available workspace width, including wide monitors. */
.command-home, .archive-browser, .discovery-command, .live-command,
.market-command, .audiobook-library, .season-activity, .inventory-vault, .quest-page {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

/* Media roles retain intentional ratios rather than inheriting fixed heights. */
.feature-card { height: auto; min-height: clamp(280px, 42vw, 460px); aspect-ratio: 16 / 9; }
.entity-card, .roster-card { height: auto; aspect-ratio: 3 / 4; }
.feature-card img, .entity-card img, .roster-card img, .sheet-portrait > img,
.profile-art > img, .archive-card img { object-position: center top; }
.activity-frame, .live-scene-frame { aspect-ratio: 21 / 9; }
.season-cover-art, .audiobook-cover, .deck-market-cover > span { aspect-ratio: 3 / 4; }

/* Dialogs can never escape a short or narrow viewport. */
dialog, .entity-dialog, .card-creator-dialog, .contribution-dialog, .currency-dialog {
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--responsive-gutter));
  max-height: calc(100dvh - 2 * var(--responsive-gutter));
  overflow: auto;
  overscroll-behavior: contain;
}
.entity-modal { padding: var(--responsive-gutter); }
.deck-viewer-dialog {
  width: calc(100vw - 2 * var(--responsive-gutter));
}

/* Home is the highest-density surface and gets its own progressive composition.
   The portrait is a supporting stage, never a fixed wall that crushes the dashboard. */
.home-command { grid-template-columns: minmax(300px, clamp(320px, 36vw, 560px)) minmax(0, 1fr); min-height: calc(100dvh - 75px); }
.home-command > .home-portrait-stage { min-width: 0; min-height: calc(100dvh - 75px); }
.home-dashboard { min-width: 0; padding: clamp(28px, 3.5vw, 56px); }
.home-welcome > div { min-width: 0; }
.home-welcome h2 { font-size: clamp(38px, 4vw, 64px); overflow-wrap: anywhere; }
.home-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: clamp(24px, 3vw, 40px) 28px; }
.home-vitals article, .home-content-grid > *, .home-recent > div > button { min-width: 0; }
.home-vitals span { overflow-wrap: anywhere; }
.home-content-grid { grid-template-columns: minmax(0, 1.6fr) minmax(210px, .65fr); }
.home-recent > div { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.home-recent .dynamic-card { width: 100%; }
.home-command > .home-worlds > div { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (max-width: 1180px) {
  .home-command { display: block; }
  .home-command > .home-portrait-stage { position: relative; width: 100%; height: clamp(360px, 52vw, 560px); min-height: 0; }
  .home-portrait-stack figure::after { background: linear-gradient(180deg, rgba(4,7,5,.1), rgba(4,7,5,.14) 35%, #050706 100%), linear-gradient(90deg, rgba(5,7,6,.28), transparent 58%); }
  .home-portrait-stack figcaption { right: var(--responsive-gutter); bottom: var(--responsive-gutter); }
  .home-dashboard { padding-inline: var(--responsive-gutter); }
  .home-content-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr); }
  .home-command > .home-worlds { padding-inline: var(--responsive-gutter); }
}

@media (max-width: 820px) {
  .home-command > .home-portrait-stage { height: clamp(320px, 62vw, 480px); }
  .home-content-grid { grid-template-columns: minmax(0, 1fr); }
  .home-welcome { align-items: flex-start; flex-direction: column; }
  .home-welcome > button { width: 100%; margin-top: 0; }
  .home-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-vitals article { padding: 17px 14px; }
  .home-vitals strong { font-size: clamp(23px, 5vw, 30px); }
  .home-signal { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
  .home-signal > span, .home-signal h3, .home-signal p, .home-signal > div { grid-column: 1; }
  .home-signal button { grid-column: 2; grid-row: 1 / 5; width: auto; }
}

@media (max-width: 900px) {
  .world-hero, .market-heading, .discovery-heading, .live-heading,
  .season-hub > header, .inventory-hero, .holdings-overview { grid-template-columns: minmax(0, 1fr); }
  .market-grid { grid-template-columns: minmax(0, 1fr); }
  .market-card { grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr); }
  .season-hub-rosters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-vitals { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 700px) {
  :root { --responsive-gutter: 14px; }
  body { overflow-y: auto; }
  .workspace-main { padding-bottom: calc(var(--mobile-nav-height) + 8px + env(safe-area-inset-bottom)); }
  .workspace-view { padding-inline: var(--responsive-gutter); }

  /* Mobile navigation is reachable by swipe instead of silently clipping tabs. */
  .immortal-topbar {
    height: auto;
    min-height: 72px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    /* A filtered ancestor anchors fixed descendants to itself. The navigation
       must stay attached to the viewport, rather than covering this header. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .archive-tabs {
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    scroll-snap-type: inline proximity;
  }
  .archive-tabs button { flex: 0 0 76px; min-width: 76px; min-height: var(--touch-target); scroll-snap-align: center; }
  .archive-tabs button i { margin-bottom: 5px; }
  .archive-tabs button span { display: block; font-size: 9px; letter-spacing: .04em; }
  .audio-transport { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .workspace-sidebar {
    height: calc(67px + env(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .workspace-nav { justify-content: flex-start; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .workspace-nav::-webkit-scrollbar { display: none; }
  .workspace-nav button { flex: 0 0 56px; min-width: 56px; min-height: var(--touch-target); }

  .workspace-heading, .market-toolbar, .settings-heading, .recent-card-drop > header,
  .location-activities > header, .live-location > header, .inventory-category > header {
    align-items: stretch;
    flex-direction: column;
  }
  .collection-tools, .profile-actions, .market-toolbar > div:last-child,
  .season-media-actions, .admin-command footer { flex-wrap: wrap; }
  .collection-tools input { width: 100%; flex: 1 1 100%; }

  .market-card { display: block; min-height: 0; }
  .market-card-visual { min-height: 0; aspect-ratio: 3 / 4; }
  .market-card-data { min-height: 360px; }
  .market-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-vitals article:nth-child(even) { border-right: 0; }
  .season-hub-progress, .season-hub-rosters, .character-data-layers,
  .character-factors > div { grid-template-columns: minmax(0, 1fr); }
  .season-hub-progress article { border-right: 0; border-bottom: 1px solid #ffffff16; }

  .dialog-row, .contribution-fields, .card-release-fields,
  .activity-uploader, .quest-controls form { grid-template-columns: minmax(0, 1fr); }
  .dialog-row > *, .contribution-fields > *, .card-release-fields > *,
  .quest-controls form > *, .quest-controls form label { grid-column: 1 !important; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { flex: 1 1 140px; min-height: var(--touch-target); }

  .feature-card { min-height: 280px; aspect-ratio: 4 / 3; }
  .profile { height: auto; min-height: min(700px, calc(100dvh - 170px)); }
  .sheet-portrait, .dossier-visual, .character-media-plane {
    height: min(64dvh, 620px);
    min-height: 360px;
  }
  .dossier-command { min-height: 0; }
  .dossier-identity h1, .inventory-hero h1, .promo-hero h1,
  .command-home-hero h1, .discovery-heading h1, .live-heading h1,
  .market-heading h1 { overflow-wrap: anywhere; white-space: normal; letter-spacing: -.045em; }
  .dossier-subline { align-items: flex-start; flex-direction: column; }
  .profile-matrix > div { grid-template-columns: minmax(0, 1fr); }
  .dossier-media-console > header { height: auto; min-height: 54px; overflow-x: auto; }
  .media-mode-tabs button { min-width: 112px; }

  /* Phone Home becomes an editorial flow instead of a squeezed desktop split. */
  .home-command > .home-portrait-stage { height: clamp(290px, 92vw, 430px); min-height: 0; }
  .home-portrait-stack img, .home-portrait-stack figure > video { object-position: center 20%; }
  .home-portrait-stack figcaption { right: 16px; bottom: 18px; left: 16px; text-align: left; }
  .home-portrait-meter { right: 16px; bottom: 18px; left: auto; width: min(42%, 180px); }
  .home-portrait-meter span { display: none; }
  .home-dashboard { padding: 25px 14px 24px; }
  .home-welcome h2 { font-size: clamp(36px, 11vw, 50px); }
  .home-welcome p { font-size: 11px; }
  .home-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 18px; }
  .home-vitals article { padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
  .home-vitals article:last-child { border-right: 0; }
  .home-vitals small { min-height: 2.4em; }
  .home-vitals span { font-size: 5px; line-height: 1.5; }
  .home-recent { padding: 18px 14px; overflow: hidden; }
  .home-recent > header { align-items: flex-start; gap: 12px; }
  .home-recent > header button { flex: 0 0 auto; }
  .home-recent > div { display: flex; gap: 10px; margin-right: -14px; padding-right: 14px; overflow-x: auto; scroll-snap-type: inline mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .home-recent > div::-webkit-scrollbar { display: none; }
  .home-recent > div > button, .home-recent > div > button:nth-child(3) { display: block; flex: 0 0 min(62vw, 230px); scroll-snap-align: start; }
  .home-zero { flex-basis: 100% !important; min-width: 100%; }
  .home-signal { display: block; margin-top: 12px; padding: 20px 17px; }
  .home-signal button { width: 100%; }
  .home-experiences { padding-top: 24px; }
  .home-experience-stage { min-height: 0; aspect-ratio: 4 / 5; }
  .home-experience-copy { right: 18px; left: 18px; bottom: 72px; }
  .home-command > .home-worlds { padding: 22px 14px calc(88px + env(safe-area-inset-bottom)); }
  .home-command > .home-worlds > header { align-items: flex-start; gap: 6px; flex-direction: column; }
  .home-command > .home-worlds > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-worlds button { min-width: 0; min-height: 112px; padding: 13px; }
  .home-worlds button strong { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .world-copy h1, .workspace-heading h1, .roster-heading h1,
  .settings-heading h1 { font-size: clamp(34px, 12vw, 48px); letter-spacing: -.05em; }
  .command-home-hero, .inventory-hero, .card-collection-hero,
  .settings-heading, .recent-card-drop, .deck-spread { padding: 22px 16px; }
  .market-command, .discovery-command, .live-command, .season-hub { padding-inline: var(--responsive-gutter); }
  .market-vitals strong { font-size: 22px; }
  .discovery-type-filter, .quest-tabs, .chronology-versions { overflow-x: auto; overscroll-behavior-inline: contain; }
  .discovery-type-filter button, .quest-tabs button { flex: 0 0 auto; min-height: var(--touch-target); }
  .entity-dialog, .currency-dialog form, .contribution-shell { padding: 20px 16px; }
  .workspace-toast { right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 14px; text-align: center; }
  .home-vitals { grid-template-columns: minmax(0, 1fr); }
  .home-vitals article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .home-vitals small, .home-vitals span { min-height: 0; }
  .home-vitals strong { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
  .home-command > .home-worlds > div { grid-template-columns: minmax(0, 1fr); }
}

/* Short desktop and phone-landscape layouts prioritize controls over artwork. */
@media (max-height: 620px) {
  .portal-shell { min-height: 100dvh; }
  .access-panel { min-height: 100dvh; padding-block: 28px; overflow-y: auto; }
  .access-content header > p { margin-bottom: 14px; }
  .access-content footer { margin-top: 14px; }
  .sheet-portrait, .dossier-visual, .character-media-plane { min-height: 280px; height: 78dvh; }
  .season-hub { padding-block: 36px; }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .access-panel { padding: 20px max(24px, env(safe-area-inset-left)); }
  .access-content { width: min(680px, 100%); }
  .access-content header > p, .access-content footer { display: none; }
  .access-content form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .access-content .field { margin: 0; }
  .access-content .enter-button, .access-content .demo-button,
  .access-content .error-box, .access-content .forget-button { grid-column: 1 / -1; }
  .workspace-view { padding-top: 12px; }
  .sheet-portrait, .dossier-visual, .character-media-plane { height: 86dvh; min-height: 250px; }
  .home-command > .home-portrait-stage { height: max(260px, 82dvh); }
  .home-dashboard { padding-top: 20px; }
  .home-experience-stage { aspect-ratio: 16 / 9; }
}

@media (pointer: coarse) {
  #app button, #app input, #app select, #app textarea,
  .access-panel button, .access-panel input { min-height: var(--touch-target); }
  #app button:hover, #app .inventory-slot:hover, #app .market-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after,
  .access-panel *, .access-panel *::before, .access-panel *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}