/* Shared workspace reading layouts. The public landing never loads this file. */
body.app-liquid :where(.play-cards, .story-sections, .realization-directions, .play-library-grid, .story-cast, .relation-report-grid, .dashboard-layout, .agent-shell) > * { min-width: 0; }
body.app-liquid :where(.play-card, .play-story-section, .realization-direction, .play-result-head, .story-sequence-heading, .story-copy-details, .play-history-card) { min-width: 0; overflow-wrap: anywhere; }
body.app-liquid :where(.play-card, .play-story-section, .realization-direction, .story-copy-details) :is(h2, h3, h4, summary, p) { min-width: 0; overflow-wrap: anywhere; }
body.app-liquid .document-reading-section > summary h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.app-liquid .app-section-hero { min-height: 0; padding-block: 20px; margin-bottom: 16px; }
body.app-liquid .app-section-copy h1 { font-size: clamp(24px, 2.5vw, 36px); }
body.app-liquid .app-section-copy > p { max-width: 64ch; margin-block: 8px 0; }
body.app-liquid .app-section-art { max-height: 170px; }
body.app-liquid .af-profile-copy { min-width: 0; }
body.app-liquid .af-profile-copy strong { white-space: normal; overflow-wrap: anywhere; }
body.app-liquid .af-admin-launch { opacity: .65; }
body.app-liquid .af-admin-launch:hover, body.app-liquid .af-admin-launch:focus-visible { opacity: 1; }
body.app-liquid .af-phase-overview { align-items: start; }
body.app-liquid .af-phase-overview .dynamics-card { height: auto; min-height: 0; }
body.app-liquid :is(.play-stage, .document-reader, .report-section, .planet-inspector, .wv-ranked-row) { background-color: rgb(13 17 34 / .44); }
body.app-liquid .play-stage { border-radius: 22px; }
#home-menu.home-compact .home-card-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
#home-menu.home-compact .home-card { display: grid; grid-template-columns: minmax(0,1fr) 96px; grid-template-rows: auto auto; min-height: 0; gap: 4px 8px; padding: 18px; }
#home-menu.home-compact .home-card-copy { grid-column: 1; grid-row: 1; }
#home-menu.home-compact .home-eyebrow { display: none; }
#home-menu.home-compact .home-card-title { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
#home-menu.home-compact .home-description { font-size: 13px; line-height: 1.45; }
#home-menu.home-compact .home-cta { grid-row: 2; grid-column: 1; margin-top: 6px; min-height: 44px; font-size: 13px; padding: 8px 10px; }
#home-menu.home-compact .home-story-group { margin-bottom: 22px; }
.play-primary-settings { display: grid; gap: 12px; }
.play-primary-settings:empty { display: none; }
.play-mode-note, .story-first-step { padding: 12px 14px; border-left: 2px solid #b5a0f3; border-radius: 0 12px 12px 0; background: #9980d310; color: #d9d2e8; font-size: 14px; line-height: 1.55; }
.play-loading { display: flex; align-items: center; gap: 14px; min-height: 180px; }
.play-loading small { display: block; margin-top: 10px; font-weight: normal; }
.play-inline-error { padding: 24px; }
.play-profile-chip { min-height: 44px; padding: 10px 12px; }
.play-workspace.has-story { gap: 12px; }
.play-result-head { padding-bottom: 16px; }
.story-copy-details { margin-block: 12px; }
.story-copy-details > summary, .document-reading-section > summary { cursor: pointer; min-height: 44px; color: #d1baf5; }
.story-copy-details > summary { display: flex; align-items: center; gap: 10px; }
.story-copy-details > summary::after { content: '⌄'; margin-left: auto; }
.story-copy-details[open] > summary::after { transform: rotate(180deg); }
.story-copy-details > summary::-webkit-details-marker { display: none; }
.story-copy-details p { margin: 8px 0; }
body.app-liquid .story-copy-details { padding: 0; border: 1px solid var(--af-line); border-radius: 14px; background: rgb(8 12 25 / .08); }
body.app-liquid .story-copy-details > summary { min-height: 48px; padding: 12px 16px; border: 0 !important; border-radius: 14px; background: transparent !important; }
body.app-liquid .story-copy-content { padding: 0 16px 16px; }
body.app-liquid .story-copy-content > :first-child { margin-top: 0; }
body.app-liquid .story-copy-content > :last-child { margin-bottom: 0; }
.story-scene-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; text-align: center; transform: none !important; font-size: 22px; }
.story-scene[open] .story-scene-toggle, .story-role[open] .story-scene-toggle { transform: rotate(180deg) !important; }
.story-archetype-description { font-size: 15px; line-height: 1.6; font-weight: normal; }
.story-portrait-example { position: relative; min-height: 200px; }
.story-portrait-example .story-illustration { position: relative; width: 100%; height: 230px; inset: auto; }
.story-portrait-example > small { display: block; text-align: center; color: #bcb3cb; font-size: 11px; }
.story-first-step h4 { margin: 0 0 6px; }
.story-first-step p { margin: 0; }
.story-panel-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.story-panel-nav a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 6px 12px; background: #aa8bda15; border: 1px solid #ad93dd48; border-radius: 10px; color: #e8d9ff; text-decoration: none; }
[id^="story-panel-"], .document-reading-section { scroll-margin-top: calc(var(--header-h,80px) + 16px); }
.document-reading-section { padding: 16px 20px; margin: 12px 0; border: 1px solid #a995d233; border-radius: 16px; }
.document-reading-section > summary { display: flex; gap: 14px; align-items: center; list-style: none; }
.document-reading-section > summary::after { content: '⌄'; margin-left: auto; }
.document-reading-section[open] > summary::after { transform: rotate(180deg); }
.document-reading-section > summary > span, .document-section h2 > span { flex: 0 0 auto; white-space: nowrap; word-break: keep-all; }
.document-reading-section h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.document-reading-section p { line-height: 1.75; max-width: 76ch; color: #ddd5e8; }
.document-print-preview { margin-top: 24px; }
.document-print-preview > summary { min-height: 44px; cursor: pointer; }
.play-confirm-dialog { max-width: min(480px,calc(100vw - 32px)); padding: 24px; background: #171a2c; color: #efe8fa; border: 1px solid #a995d266; border-radius: 20px; }
.play-confirm-dialog::backdrop { background: #050813b8; backdrop-filter: blur(6px); }
.play-confirm-dialog p { line-height: 1.6; }
.play-item-menu { position: relative; display: inline-block; }
.play-item-menu summary { min-height: 44px; padding: 10px; cursor: pointer; color: #d2c2e7; }
.play-item-menu[open] > button { position: absolute; right: 0; z-index: 4; background: #252138; border: 1px solid #c9a3cd55; white-space: nowrap; }
.play-library-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 16px 0; }
.play-library-filters label { display: grid; gap: 6px; font-size: 13px; }
.play-library-filters :is(input,select) { min-width: 0; width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid #aa8cce55; padding: 8px 10px; background: #181c2e; color: #f1eafb; font: inherit; font-size: 16px; }
.play-active-badge { display: inline-block; font-size: 11px; color: #c6e6dd; font-weight: normal; }
.play-history-actions { display: flex; gap: 12px; align-items: center; }
.play-history-card { min-height: 0; }
.wv-leading { margin: 16px 0; }
.wv-leading h3 { font-size: 19px; }
.wv-leading-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.wv-leading-grid button { text-align: left; padding: 16px; border-radius: 14px; border: 1px solid #8dbdb14d; background: #17352a33; color: #e4eee9; font: inherit; cursor: pointer; }
.wv-leading-grid button strong { display: block; margin-bottom: 8px; }
.wv-leading-grid button span { font-size: 13px; line-height: 1.5; color: #c0cfc9; }
.wv-summary-details { margin: 12px 0 20px; }
.wv-summary-details summary, .wv-prompt-details summary { min-height: 44px; cursor: pointer; }
.wv-row-actions .wv-icon { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 8px; font-size: 12px; }
.wv-dialog-header { position: sticky; top: -28px; z-index: 3; padding: 16px 0; background: #11151df7; border-bottom: 1px solid #a1c7ba33; }
.wv-dialog-header h2 { font-size: 21px; margin-top: 4px; }
.wv-prompt-details { margin-block: 18px; }
.relation-saved-profile { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; }
.relation-saved-profile select { width: 100%; min-height: 44px; padding: 10px; color: inherit; font: inherit; background: #191b30; border: 1px solid #c9b2e544; border-radius: 10px; }
/* Story QA: keep complete action labels and collection filters readable on phones. */
@media (max-width: 600px) {
  body.play-app.app-liquid #play-result > .play-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.play-app.app-liquid #play-result > .play-result-actions:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
  body.play-app.app-liquid #play-result > .play-result-actions > .play-button { min-width: 0; padding-inline: 10px; white-space: normal; }
  body.play-app .play-library-filters { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  body.play-app .play-library-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  body.app-liquid .app-section-hero { padding: 14px 16px; margin-bottom: 12px; }
  body.app-liquid .app-section-art { max-height: 120px; }
  body.app-liquid .app-section-copy h1 { font-size: 26px; }
  body.app-liquid .app-section-copy > p { font-size: 14px; line-height: 1.5; }
  body.app-liquid .af-section-navigation { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: 6px; }
  body.app-liquid .af-section-navigation a { flex: 0 0 auto; min-height: 44px; }
  #home-menu.home-compact .home-card-list { grid-template-columns: 1fr; gap: 12px; }
  #home-menu.home-compact .home-stories { max-width: none; }
  #home-menu.home-compact .home-card { min-height: 150px; }
  body.app-liquid .play-stage { padding: 16px; }
  .play-result-head :is(.play-edit-input,h2) { font-size: 25px; line-height: 1.3; }
  .play-result-head .play-edit-input.subtitle { font-size: 15px; line-height: 1.55; }
  .story-portrait-example { min-height: 0; }
  .story-portrait-example .story-illustration { height: 160px; }
  .story-passport-traits { gap: 10px; }
  .play-library-filters { grid-template-columns: 1fr 1fr; }
  .play-library-filters > label:first-child { grid-column: 1 / -1; }
  .play-history-card { padding: 16px; }
  .play-history-card h4 { font-size: 19px; }
  .play-history-card .story-history-icon { font-size: 22px; }
  .wv-leading-grid { grid-template-columns: 1fr; gap: 8px; }
  .wv-leading-grid button { padding: 12px; }
  .wv-leading-grid button span { display: none; }
  .wv-leading-grid button strong { margin: 0; font-size: 14px; }
  .wv-dialog-header { top: -20px; }
  .document-reading-section { padding: 12px 14px; }
  .document-reading-section h3 { font-size: 17px; }
  body.app-liquid .af-compare-phases .transition-state-grid { display: flex; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; max-width: 100%; }
  body.app-liquid .af-compare-phases .transition-state-grid > [data-transition-state] { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
  body.app-liquid .relation-field:has(input[data-field="date"]) { grid-column: 1 / -1; }
  body.app-liquid .relation-field input[data-field="date"] { width: 100%; min-width: 180px; padding-right: 54px; }
  body.app-liquid .agent-conversation-header small { display: none; }
  body.app-liquid #app-main[data-app-section="agent"] { height: calc(var(--af-visual-height,100dvh) - var(--header-h,80px) - 78px) !important; min-height: 340px; padding-top: 8px; }
  body.app-liquid #app-main[data-app-section="agent"] .app-section-hero { display: none; }
  body.app-liquid #app-main[data-app-section="agent"] .af-section-navigation { margin-bottom: 6px; }
  body.app-liquid #app-main[data-app-section="agent"] .agent-messages { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .story-panel-nav, .transition-state-grid { scroll-behavior: auto; } }
body.app-liquid[data-story-ready="true"] #app-main > .app-section-hero { min-height: 72px; grid-template-columns: minmax(0, 1fr); padding: 12px 0; margin-bottom: 10px; }
body.app-liquid[data-story-ready="true"] .app-section-hero .app-section-copy { display: flex; align-items: center; gap: 16px; }
body.app-liquid[data-story-ready="true"] .app-section-hero :is(.app-section-eyebrow,.app-section-copy > p,.app-section-art) { display: none; }
body.app-liquid[data-story-ready="true"] .app-section-hero h1 { font-size: 24px; margin: 0; padding: 0; }
body.app-liquid[data-story-ready="true"] .play-result-head { margin-bottom: 12px; padding-bottom: 8px; }
body.app-liquid[data-story-ready="true"] .play-result-head .play-edit-input { font-size: 32px; }
body.app-liquid[data-story-ready="true"] .play-result-head .play-edit-input.subtitle { font-size: 16px; }
body.app-liquid[data-story-ready="true"] .play-passport-type { font-size: 32px; line-height: 1.25; }
body.app-liquid .play-result-head + .play-result-actions { margin: 0 0 24px; padding: 16px 0 0; justify-content: start; }
body.app-liquid .play-result-head + .play-result-actions button { min-height: 44px; }
body.app-liquid .agent-message-text ol { padding-left: 22px; }
body.app-liquid .agent-message-text li + li { margin-top: 10px; }
@media(max-width:980px){
  body.app-liquid[data-story-ready="true"] #app-main > .app-section-hero { min-height: 60px; padding: 10px 0; }
  body.app-liquid[data-story-ready="true"] .app-section-hero h1 { font-size: 20px; }
  body.app-liquid[data-story-ready="true"] .app-section-hero .app-section-copy { gap: 10px; flex-wrap: wrap; }
  body.app-liquid[data-story-ready="true"] .play-result-head .play-edit-input { font-size: 26px; }
  body.app-liquid[data-story-ready="true"] .play-passport-type { font-size: 26px; }
}
#home-menu .home-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media(max-width:640px){
  #home-menu .home-utility a { font-size: 12px; min-height: 36px; }
  #home-menu .home-utility { margin-block: 12px; }
}

.home-compact-art { display: none; }
#home-menu.home-compact .home-art { display: none; }
#home-menu.home-compact .home-compact-art { display: block; grid-column: 2; grid-row: 1 / 3; width: 96px; height: 116px; object-fit: contain; align-self: center; }
@media(max-width:980px){body.app-liquid #app-main[data-app-section="agent"] { height: var(--af-visual-height,100dvh) !important; }}
body.app-liquid .formula-dashboard-card:not(.af-soul-expanded) .formula-mobile-scroll { max-height: min(58dvh,520px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.app-liquid .af-soul-expanded .af-code-scroll-hint { display: none; }
body.app-liquid .formula-dashboard-card [data-action="fullscreen"] { width: auto; gap: 7px; padding-inline: 12px; font-size: 12px; }
body.app-liquid .af-code-scroll-hint { order: 3; margin: 8px 12px; font-size: 12px; line-height: 1.5; }
body.app-liquid .interior-metrics { margin-block: 12px; }
body.app-liquid .interior-metrics summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #cdbbe5; }
@media(max-width:980px){
 body.app-liquid #app-main:is([data-app-section="cosmogram"],[data-app-section="dashboard"],[data-app-section="table"],[data-app-section="dynamics"],[data-app-section="transits"],[data-app-section="reports"]) .app-section-hero { padding-block: 10px; }
 body.app-liquid #app-main:is([data-app-section="cosmogram"],[data-app-section="dashboard"]) .app-section-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
 body.app-liquid #app-main:is([data-app-section="cosmogram"],[data-app-section="dashboard"]) .app-section-hero h1 { font-size: 20px; margin: 0; }
 body.app-liquid #app-main:is([data-app-section="cosmogram"],[data-app-section="dashboard"]) .app-section-art { display: none; }
 body.app-liquid .cosmogram-panel-header { padding: 12px; gap: 8px; }
 body.app-liquid .cosmogram-header-tools { gap: 6px; }
 body.app-liquid .af-cosmo-mode { font-size: 12px; margin: 6px 12px; }
 body.app-liquid .large-cosmogram-stage { margin-block: 0; padding: 0; }
 body.app-liquid .interior-table-filters > summary { display: flex; min-height: 44px; align-items: center; }
}
body.app-liquid .af-code-open { display: block; width: calc(100% - 24px); margin: 8px 12px; min-height: 44px; color: #ebddff; background: #a585da22; border: 1px solid #b29cd255; border-radius: 12px; }
body.app-liquid .af-soul-expanded .af-code-open { display: none; }
body.app-liquid .story-sequence-heading h3 { font-size: 20px; margin: 8px 0; }
body.app-liquid .story-sequence-heading { margin-top: 20px; margin-bottom: 12px; }
@media(max-width:980px){body.app-liquid .af-cosmo-mode { font-size: 11px; line-height: 1.4; margin: 4px 12px; }}
.af-play-mobile button.active { background: #ac88df19; color: #f0e3ff; border-radius: 12px; }
.af-play-drawer nav > h2 { grid-column: 1 / -1; font-size: 17px; margin: 20px 4px 8px; }

/* Page artwork owns its column; the compact story and chat headers keep theirs. */
body.app-liquid #app-main > .app-section-hero[data-page-visual]:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); align-items: center; gap: 24px; padding: 24px; }
body.app-liquid #app-main > .app-section-hero[data-page-visual] .app-section-copy { display: block; min-width: 0; }
body.app-liquid #app-main > .app-section-hero[data-page-visual] > .app-section-art { display: block; position: relative; inset: auto; width: 100%; height: 210px; max-height: none; opacity: 1; }
body.app-liquid #app-main > .app-section-hero[data-page-visual] .app-section-art > img { mask-image: none; }
@media(max-width:980px){
 body.app-liquid #app-main > .app-section-hero[data-page-visual]:not([hidden]) { grid-template-columns: minmax(0, 1fr) 180px; gap: 18px; padding: 20px; }
 body.app-liquid #app-main > .app-section-hero[data-page-visual] > .app-section-art { height: 140px; }
}
@media(max-width:600px){
 body.app-liquid #app-main > .app-section-hero[data-page-visual]:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
 body.app-liquid #app-main > .app-section-hero[data-page-visual] > .app-section-art { grid-row: 1; width: 180px; height: 110px; justify-self: center; }
 body.app-liquid #app-main > .app-section-hero[data-page-visual] .app-section-copy { grid-row: 2; }
 body.app-liquid #app-main > .app-section-hero[data-page-visual] .app-section-copy > h1 { font-size: 24px; }
 body.app-liquid #app-main > .app-section-hero[data-page-visual] .app-section-copy > p { margin-top: 14px; }
}
@media print { body.app-liquid .story-start-art, body.app-liquid .app-section-art { display: none !important; } }