/* 2026-03-13 Pass - quieter desktop story runtime rail and storyboard shelf (late load) */ @media (min-width: 1180px) { .layout.is-story-focused .story-run-rail { gap: 7px; padding: 13px 14px 12px; border-radius: 18px; } .layout.is-story-focused .story-run-rail .story-head-grid { gap: 0 10px; } .layout.is-story-focused .story-run-rail .story-stat-card, .layout.is-story-focused .story-run-rail .story-stat-card-title, .layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title { gap: 2px; padding: 7px 0 8px; border: 0; border-top: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent); border-radius: 0; background: transparent; box-shadow: none; } .layout.is-story-focused .story-run-rail .story-stat-card-title { padding-top: 0; border-top: 0; } .layout.is-story-focused .story-run-rail.is-error .story-stat-card, .layout.is-story-focused .story-run-rail.is-error .story-stat-card-title, .layout.is-story-focused .story-run-rail.is-error:not(.is-idle) .story-stat-card-title { border-top-color: color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft)); } .layout.is-story-focused .story-run-rail .story-stat-card:not(.story-stat-card-state) .story-stat-note { display: none; } .layout.is-story-focused .story-run-rail .story-stat-value { font-size: 0.94rem; line-height: 1.2; } .layout.is-story-focused .story-run-rail .story-status-row-summary { gap: 4px; } .layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill { min-height: 20px; padding: 2px 7px; font-size: 0.66rem; } .layout.is-story-focused .story-run-rail .story-guidance { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 5px 10px; padding: 8px 0 0; border: 0; border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent); border-radius: 0; background: transparent; box-shadow: none; } .layout.is-story-focused .story-run-rail.is-error .story-guidance { border-top-color: color-mix(in oklch, oklch(0.68 0.1 28) 20%, var(--border-soft)); } .layout.is-story-focused .story-run-rail .story-guidance-copy { gap: 2px; } .layout.is-story-focused .story-run-rail .story-guidance-title { font-size: 0.76rem; line-height: 1.22; } .layout.is-story-focused .story-run-rail .story-guidance-hint { max-width: 26ch; font-size: 0.68rem; line-height: 1.34; } .layout.is-story-focused .story-run-rail .story-guidance-actions { gap: 5px; align-items: center; } .layout.is-story-focused .story-run-rail #storyTimelineGuideTemplateBtn { display: inline-flex; min-width: 0; min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: 0.7rem; } .layout.is-story-focused .story-run-rail.is-ready #storyTimelineGuideTemplateBtn { display: none; } .layout.is-story-focused .story-run-rail #storyTimelineGuideOpenLiveBtn { min-height: 28px; padding: 0 8px; border-radius: 999px; font-size: 0.68rem; } .layout.is-story-focused .story-controls-hint { padding: 7px 0 0; border: 0; border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent); border-radius: 0; background: transparent; font-size: 0.68rem; line-height: 1.36; } .layout.is-story-focused .story-scenes-shell { gap: 7px; } .layout.is-story-focused .story-scenes-shell .story-list-head { padding-bottom: 8px; } .layout.is-story-focused .story-scenes-shell .story-list-head-summary { max-width: 34ch; font-size: 0.72rem; line-height: 1.34; } .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list, .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list { gap: 7px; } .layout.is-story-focused .story-segment-card { flex: 0 0 clamp(198px, 15.6vw, 214px); min-height: 150px; gap: 5px; padding: 10px 11px 9px; border-radius: 18px; } .layout.is-story-focused .story-segment-card.is-selected { flex-basis: clamp(216px, 16.8vw, 236px); min-height: 156px; } .layout.is-story-focused .story-segment-head { gap: 6px; align-items: start; } .layout.is-story-focused .story-segment-index, .layout.is-story-focused .story-segment-state { min-height: 22px; padding: 3px 8px; font-size: 0.66rem; } .layout.is-story-focused .story-segment-title { font-size: 0.82rem; line-height: 1.12; min-height: calc(2 * 1.12em); } .layout.is-story-focused .story-segment-text { -webkit-line-clamp: 2; font-size: 0.72rem; line-height: 1.4; } .layout.is-story-focused .story-segment-cues { gap: 4px; } .layout.is-story-focused .story-segment-cue:nth-child(n + 2) { display: none; } .layout.is-story-focused .story-segment-cue { min-height: 20px; padding: 3px 7px; font-size: 0.64rem; } .layout.is-story-focused .story-segment-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding-top: 7px; } .layout.is-story-focused .story-segment-meta { max-width: 14ch; overflow: hidden; font-size: 0.66rem; line-height: 1.32; white-space: nowrap; text-align: right; text-overflow: ellipsis; } } /* 2026-03-15 Pass - desktop storyteller postrun action and microcopy clarity authority */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head, .layout.is-story-focused .story-list-head { align-items: start !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head p, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p, .layout.is-story-focused .story-list-head-summary, .layout.is-story-focused #storyTimelineControlsHint { max-width: none !important; font-size: 0.71875rem !important; line-height: 1.56 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta { max-width: 72ch !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p { max-width: 40ch !important; } .layout.is-story-focused .story-list-head-summary { max-width: 60ch !important; } .layout.is-story-focused #storyTimelineControlsHint { max-width: 34ch !important; padding-top: 8px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: 76ch !important; font-size: 0.78125rem !important; line-height: 1.54 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-body-text, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.78125rem !important; line-height: 1.56 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { line-height: 1.5 !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab { border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 93%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab:hover, .layout.is-story-focused #storyAtlasRail .story-atlas-tab:focus-visible { border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 10px 22px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab.is-active { border-color: color-mix(in oklch, var(--primary) 38%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 14px 28px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab-label { font-size: 0.71875rem !important; line-height: 1.12 !important; letter-spacing: 0.02em !important; } .layout.is-story-focused .story-atlas-card { gap: 8px !important; padding: 13px 14px 14px !important; border-radius: 18px !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important; } .layout.is-story-focused .story-atlas-card.is-active { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused .story-atlas-head p, .layout.is-story-focused .story-atlas-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; font-size: 0.71875rem !important; line-height: 1.48 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyTimelineList .story-segment-card { justify-content: flex-start !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyTimelineList .story-segment-card:hover, .layout.is-story-focused #storyTimelineList .story-segment-card:focus-visible { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 12px 28px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-card.is-selected { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-head { gap: 8px !important; align-items: center !important; } .layout.is-story-focused #storyTimelineList .story-segment-state, .layout.is-story-focused #storyTimelineList .story-segment-index { white-space: nowrap !important; } .layout.is-story-focused #storyTimelineList .story-segment-state { min-height: 26px !important; padding-inline: 10px !important; } .layout.is-story-focused #storyTimelineList .story-segment-title { -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyTimelineList .story-segment-text { -webkit-line-clamp: 4 !important; line-height: 1.52 !important; } .layout.is-story-focused #storyTimelineList .story-segment-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; line-height: 1.48 !important; text-wrap: pretty !important; } } /* 2026-03-18: timeline-panel exact-token authority */ @media (min-width: 1180px) { .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr) !important; gap: 14px !important; } /* 2026-03-14 Pass - desktop storyteller collapsed-tray shelf continuity */ /* 2026-03-14 Pass - desktop storyteller hero/title foreground continuity */ /* 2026-03-14 Pass - desktop storyteller hero lockup and ledger clarity */ /* 2026-03-14 Pass - desktop storyteller top microcopy rhythm */ /* 2026-03-15 Pass - desktop storyteller brief status utility rail */ /* 2026-03-15 Pass - desktop storyteller 95% foreground readability overlay */ /* 2026-03-15 Pass - desktop storyteller postrun reading lane continuity */ .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { width: max-content !important; max-width: none !important; } .layout.is-story-focused .hero-headline::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: 1px !important; } .layout.is-story-focused .hero::before { content: "" !important; position: absolute !important; inset: -14px 0 6px !important; } .layout.is-story-focused .panel-story-studio { position: relative !important; margin-top: -6px !important; padding: 18px 22px 18px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:has(#workspaceGlanceThreeValue:empty) { display: none !important; } .layout.is-story-focused .panel-story-studio > h2 { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { width: min(100%, 52ch) !important; max-width: 52ch !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) fit-content(24ch) !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { max-width: 24ch !important; font-size: 0.6875rem !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { max-width: 24ch !important; font-size: 0.6875rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { min-height: 116px !important; padding: 24px 34px 22px !important; } .layout.is-story-focused .panel-story-studio { margin-top: -4px !important; padding: 18px 22px 20px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel-2) 95%, transparent) 100% ) !important; } .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.56fr) minmax(290px, 0.44fr) !important; } .layout.is-story-focused #storyAtlasRail.story-atlas-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .layout.is-story-focused #storyTimelineList.story-timeline-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn::after { content: "" !important; position: absolute !important; inset: 0 !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { content: "" !important; position: absolute !important; top: 4px !important; bottom: 4px !important; left: 0 !important; width: 1px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head::before, .layout.is-story-focused .story-shell-top .story-compose-head::before { content: "" !important; position: absolute !important; top: 2px !important; bottom: 10px !important; left: 0 !important; width: 1px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { align-self: end !important; justify-self: end !important; display: grid !important; } .layout.is-story-focused .panel-story-studio { position: relative !important; gap: 12px !important; padding: 15px 20px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { position: relative !important; gap: 8px !important; padding: 16px 18px 17px !important; } .layout.is-story-focused .story-intro { max-width: 58ch !important; margin-top: -2px !important; overflow: hidden !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; max-width: 728px !important; gap: 12px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-width: 0 !important; min-height: 58px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; font-size: 0.78125rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { gap: 18px !important; padding-top: 9px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { display: inline-flex !important; width: 36px !important; min-height: 22px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; width: min(840px, calc(100% - 84px)) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-width: 0 !important; min-height: 60px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { width: 100% !important; max-width: none !important; min-height: 108px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active { min-width: 304px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip { display: flex !important; align-items: baseline !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 194px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { min-height: 0 !important; padding: 0 !important; border: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions, .layout.is-story-focused .story-shell-top .story-compose-actions { width: 100% !important; grid-template-columns: max-content minmax(0, 1fr) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid { gap: 7px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { min-height: 106px !important; gap: 7px !important; padding: 13px 42px 12px 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-title { width: 100% !important; overflow: hidden !important; white-space: nowrap !important; } } @media (min-width: 1180px) { /* 2026-03-13 Pass - desktop storyteller one-line and honest-wrap cleanup (late load) */ .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card { gap: 3px; max-width: none; min-width: 0; margin-right: 10px; padding-right: 14px; border-right: 1px solid color-mix(in oklch, var(--border-soft) 34%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { flex: 1 1 19ch; min-width: 12ch; max-width: none; display: block; overflow: visible; font-size: 0.75rem; line-height: 1.46; white-space: normal; text-overflow: clip; } .story-flow-strip[hidden] .story-flow-step::after { content: none !important; } /* 2026-03-13 Pass - desktop storyteller tray chrome and aligned summary stack */ .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2.15rem, auto) auto; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr); align-items: start; gap: 12px; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active { grid-template-columns: max-content minmax(0, 1fr) !important; align-items: start !important; gap: 1px 8px !important; padding: 7px 10px !important; border-radius: 11px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-kicker { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; min-height: 20px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint { grid-column: 2 !important; max-width: 21ch !important; font-size: 0.625rem !important; line-height: 1.18 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title { font-size: 0.65625rem !important; letter-spacing: 0.018em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value { max-width: 11ch !important; font-size: 0.625rem !important; line-height: 1.16 !important; } .layout.is-story-focused .story-run-rail .story-guidance { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .layout.is-story-focused .story-run-rail #storyTimelineGuideTemplateBtn { display: inline-flex; } .layout.is-story-focused .story-segment-cue:nth-child(n + 2) { display: none; } .layout.is-story-focused .story-segment-card { flex: 0 0 clamp(198px, 15.6vw, 214px); } .layout.is-story-focused .story-latest-output-shell.is-ready .story-section-head p, .layout.is-story-focused .story-preview-shell.is-ready .story-section-head p, .layout.is-story-focused .story-results-secondary .story-section-head p { display: none; } .layout.is-story-focused .story-output-cue-pill:nth-child(n + 3) { display: none; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow { display: none; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head .story-section-eyebrow, .layout.is-story-focused .story-results-secondary .story-atlas-shell-head p { display: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tab-hint { display: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.58fr) minmax(184px, 0.42fr) !important; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.48fr) minmax(224px, 0.52fr) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.72fr) minmax(160px, 0.28fr) !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-strip { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(208px, 0.74fr) !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-support-strip { grid-template-columns: minmax(0, 1fr) minmax(188px, 0.72fr) !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-asset-pill { min-height: 20px !important; padding: 3px 7px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-strip { grid-template-columns: minmax(0, 1fr) minmax(164px, 0.54fr) !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item p { display: none !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-asset-pill { min-height: 18px !important; padding: 2px 6px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-more { margin: 0 !important; padding-top: 4px !important; } .layout.is-story-focused .story-segment-card { min-height: 138px !important; gap: 4px !important; } .layout.is-story-focused .story-segment-meta { max-width: 14ch !important; font-size: 0.6875rem !important; } .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list, .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 2026-03-14 Pass - quieter desktop storyteller tray shelf ledger */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell #storyMediaTray[open] .story-tray-body { grid-template-columns: minmax(0, 780px) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section-grid { grid-template-columns: minmax(0, 1fr) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary { gap: 6px !important; min-height: 88px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field:has(select)::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .field:has(select)::after { content: ""; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-summary { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-shell, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-shell { display: block !important; width: 100% !important; min-width: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-menu, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-menu { left: 0 !important; right: auto !important; width: 100% !important; min-width: 100% !important; } #storyDirectionTray[open] .story-tray-body { grid-template-columns: minmax(0, 1fr); } #storyDirectionTray[open] .story-tray-note-card { display: grid; grid-template-columns: auto minmax(0, 1fr); } } /* 2026-03-18 Pass - desktop storyteller compose brief handoff quiet authority */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { max-width: 20ch !important; font-size: clamp(1.36rem, 1.22rem + 0.34vw, 1.62rem) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { max-width: 272px !important; gap: 5px !important; padding: 10px 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { min-width: 0 !important; max-width: 13ch !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 0.625rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions { width: max-content !important; max-width: 100% !important; grid-template-columns: max-content max-content !important; justify-content: start !important; gap: 7px 10px !important; padding-top: 6px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions { display: inline-flex !important; width: max-content !important; flex-wrap: nowrap !important; align-items: center !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { display: inline-grid !important; width: max-content !important; min-width: 0 !important; max-width: 214px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta, .layout.is-story-focused .story-shell-top .story-compose-meta { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { justify-self: end !important; min-height: 24px !important; padding: 0 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 182px !important; padding: 15px 18px 17px !important; border-radius: 16px !important; } } /* 2026-03-18 Pass - storyteller desktop runtime quiet rail utility shell */ @media (min-width: 1180px) { .layout.is-story-focused .story-run-rail.is-ready .story-run-rail-head p, .layout.is-story-focused .story-run-rail.is-ready .story-guidance-chip, .layout.is-story-focused .story-run-rail.is-ready .story-guidance-hint, .layout.is-story-focused .story-controls.is-ready .story-section-head p, .layout.is-story-focused .story-controls.is-ready .story-controls-hint { display: none; } .layout.is-story-focused .story-output-dossier-section { display: grid; grid-template-columns: max-content minmax(0, 1fr); } .layout.is-story-focused .story-output-dossier-note { grid-area: note; display: -webkit-box; } .layout.is-story-focused .story-controls.is-ready .field :is(input, select, .select-trigger), .layout.is-story-focused .story-controls.is-ready .meta-box { min-height: 34px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] { grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.84fr) max-content; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:first-child { grid-column: auto; display: grid; grid-template-columns: max-content minmax(0, 1fr); } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(2) { display: grid; grid-template-columns: max-content minmax(0, 1fr); } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(3) { display: grid; grid-column: auto; grid-template-columns: max-content auto; } .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-note { display: none !important; } .layout.is-story-focused .story-run-rail.is-ready .story-head-grid { grid-template-columns: minmax(0, 1.24fr) minmax(112px, 0.44fr) minmax(112px, 0.44fr) !important; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-card-title { grid-column: auto !important; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance { grid-template-columns: minmax(0, 1fr) max-content !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.640625rem !important; -webkit-line-clamp: 1 !important; } } /* 2026-03-18 Pass - storyteller desktop tray editor drawer quiet authority */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] { grid-column: 1 / -1; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { position: relative; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-height: 88px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary { grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body { grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-body { grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select, textarea) { width: 100%; min-width: 0; box-sizing: border-box; } .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { grid-template-columns: minmax(116px, max-content) minmax(0, 1fr); } .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-hint { display: none; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-summary { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-shell, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-shell { display: block !important; width: 100% !important; min-width: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-menu, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-menu { left: 0 !important; right: auto !important; width: 100% !important; min-width: 100% !important; } #storyDirectionTray[open] .story-tray-body { grid-template-columns: minmax(0, 1fr); } #storyDirectionTray[open] .story-tray-note-card { display: grid; grid-template-columns: auto minmax(0, 1fr); } } /* 2026-03-18 Pass - quieter desktop storyteller tray shelf ledger */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary { gap: 6px !important; min-height: 88px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field:has(select)::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .field:has(select)::after { content: ""; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-summary { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-shell, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-shell { display: block !important; width: 100% !important; min-width: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-menu, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-menu { left: 0 !important; right: auto !important; width: 100% !important; min-width: 100% !important; } } /* 2026-03-15 Pass - desktop storyteller header and left-rail air refinement final authority */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 18px !important; padding: 14px 0 28px !important; } .layout.is-story-focused .hero-headline { align-items: center !important; gap: 22px !important; padding-bottom: 20px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1fr) fit-content(23.75rem) !important; gap: 22px 36px !important; min-height: 124px !important; padding: 24px 30px 22px !important; border-radius: 26px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, black 5%) 0%, color-mix(in oklch, var(--surface-panel) 94%, black 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 22px 46px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; backdrop-filter: blur(32px) saturate(1.08) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { top: 14px !important; bottom: 14px !important; left: 16px !important; opacity: 0.82 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 18px !important; align-items: start !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 8px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow { display: inline-flex !important; align-items: center !important; width: max-content !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: color-mix(in oklch, var(--primary) 68%, var(--foreground)) !important; opacity: 0.88 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { width: min(100%, 40ch) !important; font-size: 1.40625rem !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 60ch) !important; max-width: none !important; overflow: hidden !important; font-size: 0.8125rem !important; line-height: 1.58 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { width: min(100%, 23.75rem) !important; justify-self: end !important; align-self: center !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: unset !important; gap: 12px !important; padding: 2px 0 2px 24px !important; border-top: 0 !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { display: grid !important; align-content: center !important; min-height: 50px !important; padding: 9px 12px !important; gap: 4px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: 16px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]) + .dashboard-glance-card:not([hidden]) { padding-left: 12px !important; border-left: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.17em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: none !important; overflow: hidden !important; font-size: 1rem !important; line-height: 1.14 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint { display: none !important; } .dashboard-sidebar.is-story-focused { flex: 0 0 228px !important; min-width: 228px !important; max-width: 228px !important; width: 228px !important; padding: 14px 12px 18px !important; border-radius: 26px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, black 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, black 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 20px 40px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .dashboard-sidebar.is-story-focused::before { inset: 0 8px 0 0 !important; border-radius: 22px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; opacity: 0.96 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { grid-template-columns: 48px minmax(0, 1fr) !important; min-height: 60px !important; padding: 10px 14px !important; border-radius: 20px !important; border-color: color-mix(in oklch, var(--border-soft) 20%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 95%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 8px 18px color-mix(in oklch, var(--shadow-color) 9%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 98%, var(--primary) 2%) 0%, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 4%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 10px 20px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 98%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 14px 24px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 44px !important; min-height: 24px !important; border-radius: 999px !important; font-size: 0.71875rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; background: color-mix(in oklch, var(--primary) 8%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: grid !important; gap: 2px !important; align-content: center !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { overflow: hidden !important; font-size: 0.875rem !important; line-height: 1.16 !important; font-weight: 650 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-hint { display: none !important; } } /* 2026-03-15 Pass - desktop storyteller header and left-rail air refinement */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 18px !important; padding: 14px 0 28px !important; } .layout.is-story-focused .hero-headline { align-items: center !important; gap: 22px !important; padding-bottom: 20px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1fr) fit-content(23.75rem) !important; gap: 22px 36px !important; min-height: 124px !important; padding: 24px 30px 22px !important; border-radius: 26px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, black 5%) 0%, color-mix(in oklch, var(--surface-panel) 94%, black 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 22px 46px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { top: 14px !important; bottom: 14px !important; left: 16px !important; opacity: 0.82 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 18px !important; align-items: start !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 8px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow { display: inline-flex !important; align-items: center !important; width: max-content !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: color-mix(in oklch, var(--primary) 68%, var(--foreground)) !important; opacity: 0.88 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { width: min(100%, 40ch) !important; font-size: 1.40625rem !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 60ch) !important; max-width: none !important; overflow: hidden !important; font-size: 0.8125rem !important; line-height: 1.58 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { width: min(100%, 23.75rem) !important; justify-self: end !important; align-self: center !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: unset !important; gap: 12px !important; padding: 2px 0 2px 24px !important; border-top: 0 !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { display: grid !important; align-content: center !important; min-height: 50px !important; padding: 9px 12px !important; gap: 4px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: 16px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]) + .dashboard-glance-card:not([hidden]) { padding-left: 12px !important; border-left: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.17em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: none !important; overflow: hidden !important; font-size: 1rem !important; line-height: 1.14 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint { display: none !important; } .dashboard-sidebar.is-story-focused { flex: 0 0 228px !important; min-width: 228px !important; max-width: 228px !important; width: 228px !important; padding: 14px 12px 18px !important; border-radius: 26px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, black 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, black 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 20px 40px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .dashboard-sidebar.is-story-focused::before { inset: 0 8px 0 0 !important; border-radius: 22px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; opacity: 0.96 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { grid-template-columns: 48px minmax(0, 1fr) !important; min-height: 60px !important; padding: 10px 14px !important; border-radius: 20px !important; border-color: color-mix(in oklch, var(--border-soft) 20%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 95%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 8px 18px color-mix(in oklch, var(--shadow-color) 9%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 98%, var(--primary) 2%) 0%, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 4%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 10px 20px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 98%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 14px 24px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 44px !important; min-height: 24px !important; border-radius: 999px !important; font-size: 0.71875rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; background: color-mix(in oklch, var(--primary) 8%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: grid !important; gap: 2px !important; align-content: center !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { overflow: hidden !important; font-size: 0.875rem !important; line-height: 1.16 !important; font-weight: 650 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-hint { display: none !important; } } /* 2026-03-15 Pass - desktop storyteller header and left-rail refinement */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-body { gap: 16px !important; align-items: start !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1.14fr) auto !important; gap: 14px 24px !important; min-height: 96px !important; padding: 18px 26px 17px !important; border-radius: 24px !important; background: linear-gradient( 90deg, color-mix(in oklch, var(--surface-panel) 97%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 95%, transparent) 62%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 18px 34px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { top: 16px !important; bottom: 16px !important; left: 15px !important; opacity: 0.7 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 10px !important; align-items: start !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 6px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow { display: inline-flex !important; align-items: center !important; width: max-content !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: color-mix(in oklch, var(--primary) 66%, var(--foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { width: min(100%, 34ch) !important; font-size: 1.25rem !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 52ch) !important; max-width: none !important; font-size: 0.78125rem !important; line-height: 1.52 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { justify-self: end !important; align-self: stretch !important; display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(146px, auto) !important; gap: 10px !important; padding: 4px 0 4px 20px !important; border-top: 0 !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { min-width: 0 !important; padding-left: 0 !important; gap: 3px !important; align-content: center !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after { display: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]) + .dashboard-glance-card:not([hidden]) { padding-left: 14px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.16em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: none !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; font-size: 0.90625rem !important; line-height: 1.18 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint { display: none !important; } .dashboard-sidebar.is-story-focused { flex: 0 0 198px !important; padding: 12px 10px 12px !important; border-radius: 24px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 95%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 20px 38px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .dashboard-sidebar.is-story-focused::before { inset: 10px 8px !important; border-radius: 20px !important; opacity: 0.52 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 6px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; align-items: center !important; min-height: 54px !important; padding: 8px 12px !important; border-radius: 18px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 10px 20px color-mix(in oklch, var(--shadow-color) 8%, transparent) !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 2%) 0%, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 5%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 12px 22px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 5%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 9%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 14px 26px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 40px !important; min-height: 22px !important; border-radius: 999px !important; font-size: 0.6875rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; justify-content: center !important; background: color-mix(in oklch, var(--primary) 6%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: grid !important; gap: 1px !important; align-content: center !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { font-size: 0.8125rem !important; line-height: 1.18 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } } /* 2026-03-15 Pass - desktop storyteller postrun action and microcopy clarity */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head, .layout.is-story-focused .story-list-head { align-items: start !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head p, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p, .layout.is-story-focused .story-list-head-summary, .layout.is-story-focused #storyTimelineControlsHint { max-width: none !important; font-size: 0.71875rem !important; line-height: 1.56 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta { max-width: 72ch !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p { max-width: 40ch !important; } .layout.is-story-focused .story-list-head-summary { max-width: 60ch !important; } .layout.is-story-focused #storyTimelineControlsHint { max-width: 34ch !important; padding-top: 8px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: 76ch !important; font-size: 0.78125rem !important; line-height: 1.54 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-body-text, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.78125rem !important; line-height: 1.56 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { line-height: 1.5 !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab { border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 93%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab:hover, .layout.is-story-focused #storyAtlasRail .story-atlas-tab:focus-visible { border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 10px 22px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab.is-active { border-color: color-mix(in oklch, var(--primary) 38%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 14px 28px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab-label { font-size: 0.71875rem !important; line-height: 1.12 !important; letter-spacing: 0.02em !important; } .layout.is-story-focused .story-atlas-card { gap: 8px !important; padding: 13px 14px 14px !important; border-radius: 18px !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important; } .layout.is-story-focused .story-atlas-card.is-active { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused .story-atlas-head p, .layout.is-story-focused .story-atlas-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; font-size: 0.71875rem !important; line-height: 1.48 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyTimelineList .story-segment-card { justify-content: flex-start !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyTimelineList .story-segment-card:hover, .layout.is-story-focused #storyTimelineList .story-segment-card:focus-visible { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 12px 28px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-card.is-selected { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-head { gap: 8px !important; align-items: center !important; } .layout.is-story-focused #storyTimelineList .story-segment-state, .layout.is-story-focused #storyTimelineList .story-segment-index { white-space: nowrap !important; } .layout.is-story-focused #storyTimelineList .story-segment-state { min-height: 26px !important; padding-inline: 10px !important; } .layout.is-story-focused #storyTimelineList .story-segment-title { -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyTimelineList .story-segment-text { -webkit-line-clamp: 4 !important; line-height: 1.52 !important; } .layout.is-story-focused #storyTimelineList .story-segment-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; line-height: 1.48 !important; text-wrap: pretty !important; } } /* 2026-03-14 Pass - desktop storyteller hero/nav readability framing */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 14px !important; padding: 12px 0 24px !important; } .layout.is-story-focused .hero-headline { align-items: start !important; gap: 30px !important; padding-bottom: 18px !important; } .layout.is-story-focused .hero h1 { font-size: 0.84375rem !important; line-height: 1 !important; letter-spacing: 0.24em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; max-width: 728px !important; gap: 12px !important; padding: 14px 18px 13px 20px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; border-radius: 18px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 90%, black 10%), color-mix(in oklch, var(--surface-panel) 84%, black 16%) ) !important; backdrop-filter: blur(18px) saturate(112%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 18px 40px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { top: 10px !important; bottom: 10px !important; left: 11px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 16px !important; align-items: center !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { display: grid !important; min-width: 0 !important; gap: 3px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.09375rem !important; line-height: 1.02 !important; letter-spacing: -0.022em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { display: block !important; overflow: hidden !important; margin: 0 !important; max-width: 34ch !important; font-size: 0.71875rem !important; line-height: 1.34 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; opacity: 0.96 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 16px !important; padding-top: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { display: flex !important; min-width: 0 !important; align-items: baseline !important; gap: 6px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.59375rem !important; letter-spacing: 0.16em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: 21ch !important; overflow: hidden !important; font-size: 0.828125rem !important; line-height: 1.12 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint, .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow, .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .status-pill { display: none !important; } .dashboard-sidebar.is-story-focused { position: relative !important; flex: 0 0 214px !important; min-width: 214px !important; max-width: 214px !important; width: 214px !important; padding: 10px 10px 18px !important; } .dashboard-sidebar.is-story-focused::before { content: "" !important; position: absolute !important; inset: 0 8px 0 0 !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: 20px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 84%, black 16%), color-mix(in oklch, var(--surface-panel) 72%, black 28%) ) !important; backdrop-filter: blur(16px) saturate(108%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 36px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; pointer-events: none !important; } .dashboard-sidebar.is-story-focused > * { position: relative !important; z-index: 1 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-width: 0 !important; min-height: 58px !important; padding: 0 12px 0 14px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; align-items: center !important; gap: 0 8px !important; border-radius: 14px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 28%, transparent), color-mix(in oklch, var(--surface-panel) 18%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 34%, transparent), color-mix(in oklch, var(--surface-panel) 22%, transparent) ) !important; border-color: color-mix(in oklch, var(--border-soft) 28%, transparent) !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 18%, var(--surface-control)), color-mix(in oklch, var(--surface-panel) 84%, black 16%) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 34px !important; margin: 0 !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; justify-self: start !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: flex !important; min-width: 0 !important; align-items: center !important; gap: 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; font-size: 0.78125rem !important; line-height: 1.12 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-hint { display: none !important; } } /* 2026-03-14 Pass - desktop storyteller final eof authority */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) minmax(228px, 0.32fr) !important; gap: 8px 18px !important; align-items: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 4px !important; align-content: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { width: max-content !important; max-width: none !important; font-size: clamp(1.5rem, 1.34rem + 0.2vw, 1.68rem) !important; line-height: 1.02 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { width: max-content !important; max-width: none !important; font-size: 0.71875rem !important; line-height: 1.5 !important; white-space: nowrap !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { grid-template-columns: minmax(0, 1fr) !important; min-height: 112px !important; gap: 9px !important; padding: 14px 48px 14px 18px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 8px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text { display: block !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-box-orient: initial !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr) !important; gap: 14px !important; } .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage { grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr) !important; gap: 16px !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-title { white-space: nowrap !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-note { display: -webkit-box !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyResultsSecondary.story-results-secondary { padding: 12px 14px 14px !important; } .layout.is-story-focused #storyResultsSecondary .story-atlas-head p, .layout.is-story-focused #storyResultsSecondary .story-atlas-meta { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused #storyBottomGrid.story-bottom-grid { grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr) !important; gap: 10px !important; } } /* 2026-03-14 Pass - storyteller revision ledger type floor eof */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-note, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-more { font-size: 11px !important; } } /* 2026-03-14 Pass - quieter desktop storyteller revision ledger and filmstrip */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants { gap: 4px !important; padding-top: 4px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 30%, transparent) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-head { min-height: 0 !important; padding: 0 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-head .story-output-body-label { font-size: 0.54rem !important; line-height: 1.08 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-grid { gap: 0 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "title meta" "note note" !important; gap: 2px 8px !important; align-items: start !important; padding: 7px 0 0 !important; border: 0 !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 36%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-kicker { display: none !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-title { grid-area: title !important; font-size: 0.72rem !important; line-height: 1.16 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-meta { grid-area: meta !important; align-self: start !important; justify-self: end !important; font-size: 11px !important; line-height: 1.16 !important; white-space: nowrap !important; color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground)) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-note { grid-area: note !important; display: -webkit-box !important; overflow: hidden !important; font-size: 11px !important; line-height: 1.34 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-more { margin: 0 !important; padding-top: 4px !important; font-size: 11px !important; line-height: 1.3 !important; color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-scenes-shell { gap: 6px !important; } .layout.is-story-focused .story-scenes-shell .story-list-head { padding-bottom: 6px !important; } .layout.is-story-focused .story-scenes-shell .story-list-head-summary { max-width: 44ch !important; font-size: 0.67rem !important; line-height: 1.3 !important; } .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list, .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list { gap: 6px !important; } .layout.is-story-focused .story-segment-card { min-height: 138px !important; gap: 4px !important; padding: 8px 9px 8px !important; border-radius: 16px !important; } .layout.is-story-focused .story-segment-card.is-selected { min-height: 144px !important; } .layout.is-story-focused .story-segment-head { gap: 4px !important; align-items: center !important; } .layout.is-story-focused .story-segment-index, .layout.is-story-focused .story-segment-state { min-height: 20px !important; padding: 2px 7px !important; font-size: 0.6875rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-segment-title { font-size: 0.76rem !important; line-height: 1.12 !important; min-height: calc(2 * 1.12em) !important; } .layout.is-story-focused .story-segment-text { font-size: 0.6875rem !important; line-height: 1.36 !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-segment-cues { gap: 3px !important; } .layout.is-story-focused .story-segment-cue { min-height: 18px !important; padding: 2px 6px !important; font-size: 0.6875rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-segment-footer { gap: 4px 6px !important; padding-top: 6px !important; } .layout.is-story-focused .story-segment-meta { max-width: 14ch !important; font-size: 0.6875rem !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* 2026-03-14 Pass - calmer desktop storyteller output and current-scene rails */ @media (min-width: 1180px) { .layout.is-story-focused #storyResultsPrimary.story-results-primary { gap: 10px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell, .layout.is-story-focused #storyPreviewShell.story-preview-shell { gap: 5px !important; padding: 11px 12px 13px !important; border-radius: 22px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head, .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-section-head { gap: 4px !important; align-items: start !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-eyebrow, .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-section-eyebrow { display: none !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head h3, .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-section-head h3 { font-size: 0.84rem !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; font-family: inherit !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta { font-size: 0.62rem !important; line-height: 1.32 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.58fr) minmax(184px, 0.42fr) !important; gap: 12px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-main { gap: 6px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-title { max-width: 24ch !important; font-size: clamp(1.04rem, 0.98rem + 0.14vw, 1.16rem) !important; line-height: 1.04 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: 52ch !important; font-size: 0.73rem !important; line-height: 1.4 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-main { padding: 10px 12px !important; border-radius: 16px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-compact { max-width: none !important; padding-top: 0 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.72rem !important; line-height: 1.5 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-side { gap: 5px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-section { gap: 3px !important; padding: 7px 0 7px 10px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 36%, transparent) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-section:first-child { padding-top: 0 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-label { font-size: 0.56rem !important; line-height: 1.08 !important; letter-spacing: 0.08em !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-title { font-size: 0.74rem !important; line-height: 1.16 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { font-size: 0.64rem !important; line-height: 1.34 !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-section .story-output-card-tags { gap: 3px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-card-tag { min-height: 18px !important; padding: 2px 6px !important; font-size: 0.58rem !important; line-height: 1.08 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-side .story-output-metrics.is-compact { gap: 4px !important; padding-top: 7px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-metric { gap: 1px !important; padding: 4px 6px !important; border-radius: 10px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-metric span { font-size: 0.5rem !important; line-height: 1.06 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-metric strong { font-size: 0.72rem !important; line-height: 1.08 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants { gap: 6px !important; padding-top: 2px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-grid { gap: 6px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-card { gap: 4px !important; padding: 8px 10px !important; border-radius: 14px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-kicker { font-size: 0.56rem !important; line-height: 1.08 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-title { font-size: 0.76rem !important; line-height: 1.14 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-note { font-size: 0.64rem !important; line-height: 1.34 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready { gap: 5px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-stage { gap: 8px !important; padding-top: 6px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-copy { gap: 6px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-head { gap: 5px !important; align-items: center !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready :is(.story-preview-index, .story-preview-status) { min-height: 20px !important; padding: 2px 7px !important; font-size: 0.62rem !important; line-height: 1.1 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-title { max-width: 36ch !important; font-size: clamp(0.98rem, 0.94rem + 0.12vw, 1.08rem) !important; line-height: 1.08 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { max-width: 54ch !important; font-size: 0.71rem !important; line-height: 1.38 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-copy-card-main { padding: 10px 12px !important; border-radius: 16px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-text { display: -webkit-box !important; overflow: hidden !important; max-width: 78ch !important; font-size: 0.73rem !important; line-height: 1.5 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 5 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-strip { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(208px, 0.74fr) !important; gap: 6px !important; align-items: start !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-card { gap: 6px !important; padding: 9px 10px !important; border-radius: 14px !important; border-color: color-mix(in oklch, var(--border-soft) 48%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 56%, transparent), color-mix(in oklch, var(--surface-panel) 92%, transparent) ) !important; box-shadow: none !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item { gap: 2px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item span, .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-card-assets > span { font-size: 0.54rem !important; line-height: 1.08 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item strong { font-size: 0.74rem !important; line-height: 1.14 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item p { display: -webkit-box !important; overflow: hidden !important; font-size: 0.63rem !important; line-height: 1.32 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-assets { gap: 4px !important; align-content: start !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-asset-pill { min-height: 18px !important; padding: 2px 6px !important; font-size: 0.6rem !important; line-height: 1.08 !important; } } /* 2026-03-14 Pass - desktop storyteller readable chrome shelf and runtime balance authority */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio > h2 { display: flex !important; align-items: baseline !important; flex-wrap: nowrap !important; gap: 12px !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child, .layout.is-story-focused .panel-story-studio .story-intro, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p { max-width: none !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) { border-color: color-mix(in oklch, var(--border-soft) 36%, transparent) !important; border-radius: 18px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 26%, transparent), color-mix(in oklch, var(--surface-panel) 86%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 18%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { position: relative !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start !important; align-items: start !important; min-height: 112px !important; gap: 9px !important; padding: 14px 48px 14px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after { top: 50% !important; right: 18px !important; width: 12px !important; height: 12px !important; border-right-width: 1px !important; border-bottom-width: 1px !important; transform: translateY(-52%) rotate(45deg) !important; opacity: 0.82 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy { align-self: start !important; gap: 4px !important; min-width: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title { overflow: hidden !important; font-size: 0.90625rem !important; line-height: 1.1 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: block !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.5 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; justify-items: stretch !important; align-items: start !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; padding-right: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.46 !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-box-orient: initial !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { width: max-content !important; min-height: 24px !important; justify-content: flex-start !important; align-items: center !important; gap: 6px !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 24px !important; padding: 4px 10px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 38%, transparent) !important; background: color-mix(in oklch, var(--surface-control) 62%, transparent) !important; font-size: 0.6875rem !important; line-height: 1.18 !important; white-space: nowrap !important; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.52fr) minmax(332px, 0.48fr) !important; align-items: start !important; gap: 16px !important; } .layout.is-story-focused .story-results-secondary { gap: 8px !important; padding: 12px 14px 14px !important; border-radius: 26px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card { gap: 6px !important; padding-top: 10px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { font-size: 0.96875rem !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p, .layout.is-story-focused .story-results-secondary .story-atlas-meta { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; white-space: normal !important; text-overflow: clip !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { font-size: 0.75rem !important; line-height: 1.5 !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { font-size: 0.71875rem !important; line-height: 1.5 !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.08fr) minmax(356px, 0.92fr) !important; gap: 18px !important; align-items: start !important; } .layout.is-story-focused .story-output-main { gap: 12px !important; } .layout.is-story-focused .story-output-title { max-width: 30ch !important; font-size: clamp(1.24rem, 1.08rem + 0.3vw, 1.46rem) !important; line-height: 1.04 !important; } .layout.is-story-focused .story-output-summary { max-width: 64ch !important; font-size: 0.84375rem !important; line-height: 1.52 !important; } .layout.is-story-focused .story-output-dossier-section { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "label" "title" "note" "tags" "metrics" !important; gap: 6px !important; padding: 12px 0 12px 14px !important; } .layout.is-story-focused .story-output-dossier-title { display: block !important; font-size: 0.9375rem !important; line-height: 1.16 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-output-dossier-note { display: -webkit-box !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.58 !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused .story-output-metrics.is-compact { grid-template-columns: repeat(4, max-content) !important; gap: 6px 12px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title { max-width: none !important; font-size: clamp(1.18rem, 1.06rem + 0.24vw, 1.34rem) !important; line-height: 1.08 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { font-size: 0.78125rem !important; line-height: 1.52 !important; white-space: normal !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-text { font-size: 0.8125rem !important; line-height: 1.62 !important; } .layout.is-story-focused .story-bottom-grid { grid-template-columns: minmax(246px, 0.3fr) minmax(0, 1.7fr) !important; align-items: start !important; gap: 12px !important; padding: 14px 16px 16px !important; } .layout.is-story-focused .story-controls-grid { grid-template-columns: minmax(0, 1fr) 112px !important; gap: 8px 10px !important; } .layout.is-story-focused .story-segment-card, .layout.is-story-focused .story-segment-card.is-selected { min-height: 194px !important; } } /* 2026-03-14 Pass - desktop storyteller id-specific authority cleanup */ @media (min-width: 1180px) { .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { min-height: 112px !important; padding: 14px 48px 14px 18px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 8px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text { display: block !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-box-orient: initial !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr) !important; gap: 14px !important; } .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage { grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr) !important; gap: 16px !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-title { white-space: nowrap !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-note { display: -webkit-box !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyResultsSecondary.story-results-secondary { padding: 12px 14px 14px !important; } .layout.is-story-focused #storyResultsSecondary .story-atlas-head p, .layout.is-story-focused #storyResultsSecondary .story-atlas-meta { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused #storyBottomGrid.story-bottom-grid { grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr) !important; gap: 10px !important; } } /* 2026-03-14 Pass - desktop storyteller balanced tray shelf and readable runtime lanes */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio > h2 { gap: 14px; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { letter-spacing: -0.02em; white-space: nowrap; } .layout.is-story-focused .panel-story-studio .story-intro { font-size: 0.71875rem; line-height: 1.52; white-space: nowrap; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head { gap: 6px 18px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy { gap: 3px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 { max-width: none; font-size: clamp(1.66rem, 1.5rem + 0.28vw, 1.92rem); line-height: 1.01; white-space: nowrap; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p { max-width: none; font-size: 0.71875rem; line-height: 1.52; white-space: nowrap; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid { gap: 10px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { min-height: 108px; padding: 13px 46px 13px 16px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy { gap: 5px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.875rem; line-height: 1.1; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { font-size: 0.71875rem; line-height: 1.46; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { width: 100%; justify-items: stretch; align-items: start; gap: 7px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { width: 100%; min-width: 0; min-height: 0; justify-self: stretch; font-size: 0.71875rem; line-height: 1.44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { width: max-content; min-height: 24px; justify-content: flex-start; gap: 6px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { grid-template-columns: minmax(136px, max-content) minmax(0, 1fr); align-items: start; min-height: 76px; gap: 8px 12px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-copy { padding-top: 1px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary { grid-template-rows: auto auto; justify-items: start; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text { min-height: 0; font-size: 0.6875rem; line-height: 1.38; white-space: nowrap; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.58fr) minmax(304px, 0.42fr); gap: 14px; } .layout.is-story-focused .story-results-secondary { gap: 8px; padding: 12px 14px 14px; border-radius: 24px; } .layout.is-story-focused .story-atlas-rail { gap: 8px; } .layout.is-story-focused .story-atlas-tab { min-width: 0; padding: 10px 14px; } .layout.is-story-focused .story-atlas-tab-label { font-size: 0.75rem; line-height: 1.14; } .layout.is-story-focused .story-atlas-card { gap: 8px; padding: 13px 14px 14px; } .layout.is-story-focused .story-results-secondary .story-atlas-head { gap: 5px; } .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { font-size: 1rem; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { font-size: 0.71875rem; line-height: 1.5; -webkit-line-clamp: 2; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { display: block; font-size: 0.6875rem; line-height: 1.44; white-space: normal; } .layout.is-story-focused .story-results-secondary .story-atlas-tags { gap: 6px; } .layout.is-story-focused .story-results-secondary .story-atlas-tag { min-height: 24px; font-size: 0.6875rem; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 16px; align-items: start; } .layout.is-story-focused .story-output-main { gap: 11px; } .layout.is-story-focused .story-output-title { max-width: 28ch; font-size: clamp(1.2rem, 1.05rem + 0.3vw, 1.42rem); line-height: 1.05; } .layout.is-story-focused .story-output-summary { max-width: 58ch; font-size: 0.8125rem; line-height: 1.5; } .layout.is-story-focused .story-output-body-text { font-size: 0.75rem; line-height: 1.56; overflow-wrap: anywhere; } .layout.is-story-focused .story-output-cue-strip { gap: 6px; } .layout.is-story-focused .story-output-cue-pill { min-height: 24px; font-size: 0.6875rem; } .layout.is-story-focused .story-output-side { gap: 8px; } .layout.is-story-focused .story-output-side-card-dossier { gap: 0; } .layout.is-story-focused .story-output-dossier-section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "note" "tags" "metrics"; gap: 4px; padding: 8px 0; } .layout.is-story-focused .story-output-dossier-label { margin-top: 0; font-size: 0.6875rem; line-height: 1.24; } .layout.is-story-focused .story-output-dossier-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; line-height: 1.12; } .layout.is-story-focused .story-output-dossier-note { -webkit-line-clamp: 2; font-size: 0.71875rem; line-height: 1.48; } .layout.is-story-focused .story-output-dossier-section .story-output-card-tags { gap: 6px; } .layout.is-story-focused .story-output-card-tag { min-height: 24px; padding: 4px 10px; font-size: 0.6875rem; } .layout.is-story-focused .story-output-side .story-output-metrics.is-compact { gap: 6px 12px; padding-top: 7px; } .layout.is-story-focused .story-output-metric span { font-size: 0.6875rem; line-height: 1.18; } .layout.is-story-focused .story-output-metric strong { font-size: 0.875rem; line-height: 1.12; } .layout.is-story-focused .story-preview-shell.is-ready { gap: 10px; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title { max-width: 46ch; font-size: clamp(1.16rem, 1.04rem + 0.24vw, 1.32rem); line-height: 1.08; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { font-size: 0.75rem; line-height: 1.48; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-text { font-size: 0.78125rem; line-height: 1.58; } .layout.is-story-focused .story-preview-assets { gap: 8px; } .layout.is-story-focused .story-asset-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .layout.is-story-focused .story-bottom-grid { grid-template-columns: 208px minmax(0, 1fr); gap: 10px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] { grid-template-columns: minmax(0, 1fr); gap: 8px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:first-child, .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(3) { grid-template-columns: max-content minmax(0, 1fr); } .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list { gap: 8px; } .layout.is-story-focused .story-segment-card { flex: 1 1 0; min-width: 0; } .layout.is-story-focused .story-segment-title { font-size: 0.875rem; line-height: 1.22; } .layout.is-story-focused .story-segment-text { font-size: 0.71875rem; line-height: 1.5; } .layout.is-story-focused .story-segment-meta { font-size: 0.6875rem; line-height: 1.4; } } /* 2026-03-13 Pass - desktop storyteller one-line and honest-wrap cleanup (late load) */ @media (min-width: 1180px) { .layout.is-story-focused .story-compose-shell .story-tray > summary { list-style: none; } .layout.is-story-focused .story-compose-shell .story-tray > summary::-webkit-details-marker { display: none; } .layout.is-story-focused .story-compose-shell .story-tray > summary::marker { content: ""; font-size: 0; } .layout.is-story-focused .panel-story-studio > h2 { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 12px; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child, .layout.is-story-focused .panel-story-studio .story-intro, .layout.is-story-focused #storyComposeHeading, .layout.is-story-focused #storyComposeIntro { max-width: none; overflow: visible; white-space: nowrap; text-overflow: clip; } .layout.is-story-focused .panel-story-studio .story-intro { font-size: 0.75rem; line-height: 1.46; } .layout.is-story-focused #storyComposeHeading { font-size: clamp(1.88rem, 1.75vw, 2.18rem); line-height: 1.02; } .layout.is-story-focused #storyComposeIntro { font-size: 0.76rem; line-height: 1.46; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active { gap: 3px 10px; padding: 10px 12px 9px; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title, .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint { max-width: none; overflow: visible; white-space: nowrap; text-overflow: clip; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title { font-size: 0.9rem; line-height: 1.06; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint { font-size: 0.6875rem; line-height: 1.34; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)); } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip { gap: 0; padding: 3px 0 0 10px; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card { gap: 3px; max-width: none; min-width: 0; margin-right: 10px; padding-right: 14px; border-right: 1px solid color-mix(in oklch, var(--border-soft) 34%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card:last-child { margin-right: 0; padding-right: 0; border-right: 0; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value { max-width: none; overflow: visible; font-size: 0.6875rem; line-height: 1.36; white-space: nowrap; text-overflow: clip; } .layout.is-story-focused .story-compose-shell .story-tray-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { position: relative; grid-template-columns: minmax(146px, max-content) minmax(0, 1fr); align-items: center; align-content: center; gap: 6px 11px; min-height: 60px; padding: 9px 36px 9px 14px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after { top: 50%; right: 13px; width: 10px; height: 10px; border-right: 1.5px solid color-mix(in oklch, var(--foreground) 72%, transparent); border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 72%, transparent); border-radius: 1px; opacity: 0.76; transform: translateY(-58%) rotate(45deg); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy { min-width: 0; gap: 3px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { max-width: none; overflow: visible; white-space: nowrap; text-overflow: clip; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.84rem; line-height: 1.1; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { font-size: 0.6875rem; line-height: 1.42; color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground)); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; min-width: 0; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { flex: 1 1 19ch; min-width: 12ch; max-width: none; display: block; overflow: visible; font-size: 0.75rem; line-height: 1.46; white-space: normal; text-overflow: clip; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { flex: 0 0 auto; flex-wrap: nowrap; align-items: baseline; gap: 4px 6px; min-width: max-content; padding-left: 10px; border-left: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 23px; padding: 4px 9px; font-size: 0.6875rem; line-height: 1.18; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr); align-items: start; gap: 12px; } .layout.is-story-focused .story-results-secondary { gap: 6px; padding: 11px 12px 13px; } .layout.is-story-focused .story-atlas-tab-label, .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { overflow: visible; white-space: nowrap; text-overflow: clip; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p, .layout.is-story-focused .story-output-dossier-note, .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title, .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { overflow: visible; white-space: normal; text-overflow: clip; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: block; font-size: 0.6875rem; line-height: 1.46; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.58fr) minmax(284px, 0.42fr); gap: 18px; } .layout.is-story-focused .story-output-dossier-section { gap: 7px; padding: 10px 0 10px 14px; } .layout.is-story-focused .story-output-dossier-note { display: block; font-size: 0.75rem; line-height: 1.54; } .layout.is-story-focused .story-output-metrics.is-compact { gap: 6px 14px; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { line-height: 1.52; } .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) { overflow: visible; text-overflow: clip; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) { gap: 10px; align-items: start; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { grid-template-columns: minmax(116px, max-content) minmax(0, 1fr); align-content: center; gap: 4px 10px; min-height: 56px; padding: 8px 34px 8px 12px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-copy { gap: 1px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-title { font-size: 0.77rem; line-height: 1.08; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-hint { display: none; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text { flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; font-size: 0.68rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-meta { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; min-width: max-content; padding-left: 8px; border-left: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 20px; padding: 3px 8px; font-size: 0.625rem; line-height: 1.16; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary { padding: 12px 14px 10px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-copy { gap: 2px; max-width: 60ch; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-title { font-size: 0.94rem; line-height: 1.08; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-hint { font-size: 0.72rem; line-height: 1.42; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-body { gap: 12px; padding: 12px 14px 14px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body { grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section { gap: 10px; padding: 12px 14px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-head { gap: 4px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-copy { font-size: 0.76rem; line-height: 1.42; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field > span { font-size: 0.71rem; line-height: 1.3; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select, textarea) { padding: 10px 12px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-body { grid-template-columns: minmax(0, 1fr); gap: 10px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-note-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 10px 12px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-note-card .story-tray-section-eyebrow { margin: 0; white-space: nowrap; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-note-card .story-tray-section-copy { max-width: none; font-size: 0.74rem; line-height: 1.42; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .field { width: 100%; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] textarea { min-height: 156px; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.74fr) minmax(240px, 0.26fr); gap: 10px; } .layout.is-story-focused .story-latest-output-shell, .layout.is-story-focused .story-preview-shell, .layout.is-story-focused .story-results-secondary { gap: 6px; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-section-head, .layout.is-story-focused .story-preview-shell.is-ready .story-section-head, .layout.is-story-focused .story-results-secondary .story-section-head { gap: 4px; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-section-head p, .layout.is-story-focused .story-preview-shell.is-ready .story-section-head p, .layout.is-story-focused .story-results-secondary .story-section-head p { display: none; } .layout.is-story-focused .story-latest-output-meta { font-size: 0.66rem; line-height: 1.34; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.42fr) minmax(216px, 0.58fr); gap: 10px; } .layout.is-story-focused .story-output-main { gap: 7px; } .layout.is-story-focused .story-output-kicker-row { gap: 6px; } .layout.is-story-focused .story-output-kicker { min-height: 18px; padding: 2px 6px; font-size: 0.62rem; } .layout.is-story-focused .story-output-summary.is-display-meta { font-size: 0.72rem; line-height: 1.34; } .layout.is-story-focused .story-output-cue-strip { gap: 4px; max-width: none; } .layout.is-story-focused .story-output-cue-pill { min-height: 20px; padding: 3px 7px; font-size: 0.63rem; } .layout.is-story-focused .story-output-cue-pill:nth-child(n + 3) { display: none; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact { max-width: 72ch; gap: 0; padding-top: 8px; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact .story-output-body-text, .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-text { font-size: 0.75rem; line-height: 1.48; } .layout.is-story-focused .story-output-side { gap: 7px; } .layout.is-story-focused .story-output-side-card-dossier { gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .layout.is-story-focused .story-output-dossier-section { gap: 4px; padding: 8px 0 8px 10px; } .layout.is-story-focused .story-output-dossier-section:first-child { padding-top: 0; } .layout.is-story-focused .story-output-dossier-label { font-size: 0.62rem; line-height: 1.18; } .layout.is-story-focused .story-output-dossier-title { display: block; font-size: 0.78rem; line-height: 1.22; } .layout.is-story-focused .story-output-dossier-note { display: block; font-size: 0.69rem; line-height: 1.42; } .layout.is-story-focused .story-output-dossier-section .story-output-card-tags { gap: 4px; } .layout.is-story-focused .story-output-dossier-section .story-output-card-tag { min-height: 20px; padding: 3px 7px; font-size: 0.625rem; } .layout.is-story-focused .story-output-side .story-output-metrics.is-compact { padding-top: 8px; border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent); } .layout.is-story-focused .story-results-secondary { gap: 5px; padding: 10px 10px 11px; } .layout.is-story-focused .story-atlas-rail { gap: 4px; } .layout.is-story-focused .story-atlas-tab { min-height: 28px; padding: 6px 8px; } .layout.is-story-focused .story-atlas-tab-label { font-size: 0.68rem; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow { display: none; } .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active { gap: 5px; padding-top: 6px; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head { gap: 4px; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: -webkit-box; overflow: hidden; font-size: 0.72rem; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { padding-top: 5px; font-size: 0.66rem; line-height: 1.34; } .layout.is-story-focused .story-results-secondary .story-atlas-tag { min-height: 20px; padding: 3px 7px; font-size: 0.63rem; } .layout.is-story-focused .story-results-primary .story-preview-stage { gap: 6px; padding: 10px 0 0; } .layout.is-story-focused .story-preview-copy { gap: 7px; } .layout.is-story-focused .story-preview-kicker-row { gap: 6px; } .layout.is-story-focused .story-preview-title { font-size: clamp(1rem, 0.9rem + 0.16vw, 1.12rem); line-height: 1.08; } .layout.is-story-focused .story-preview-text { max-width: 76ch; font-size: 0.76rem; line-height: 1.48; } .layout.is-story-focused .story-preview-support-card-assets { padding-top: 7px; } .layout.is-story-focused .story-bottom-grid { grid-template-columns: minmax(174px, 0.3fr) minmax(0, 1.7fr); gap: 7px; } .layout.is-story-focused .story-scenes-shell .story-list-head { padding-bottom: 6px; } .layout.is-story-focused .story-scenes-shell .story-list-head-summary { max-width: none; font-size: 0.68rem; line-height: 1.34; } .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list, .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .layout.is-story-focused .story-segment-card, .layout.is-story-focused .story-segment-card.is-selected { min-height: 170px; } .layout.is-story-focused .story-segment-card { padding: 10px 10px 9px; } .layout.is-story-focused .story-segment-head { gap: 5px; } .layout.is-story-focused .story-segment-index, .layout.is-story-focused .story-segment-state { min-height: 20px; padding: 2px 7px; font-size: 0.62rem; } .layout.is-story-focused .story-segment-title { font-size: 0.8rem; line-height: 1.14; } .layout.is-story-focused .story-segment-text { display: -webkit-box; overflow: hidden; font-size: 0.72rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .layout.is-story-focused .story-segment-footer { gap: 4px 6px; padding-top: 6px; } .layout.is-story-focused .story-segment-meta { font-size: 0.64rem; } } /* 2026-03-13 Pass - hidden storyteller helper stepper should not leak pseudo arrows into accessibility scans */ .story-flow-strip[hidden] .story-flow-step::after { content: none !important; } /* 2026-03-13 Pass - desktop storyteller tray chrome and aligned summary stack */ @media (min-width: 1100px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) { overflow: hidden; border-color: color-mix(in oklch, var(--border-soft) 72%, transparent); background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 70%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent) ), linear-gradient( 112deg, color-mix(in oklch, oklch(0.76 0.05 75) 14%, transparent) 0%, transparent 34%, color-mix(in oklch, var(--primary) 14%, transparent) 74%, transparent 100% ); box-shadow: inset 0 1px 0 color-mix(in oklch, white 14%, transparent), 0 16px 34px color-mix(in oklch, black 18%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: center; gap: 8px; min-height: 104px; padding: 12px 44px 12px 16px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::before { content: ""; position: absolute; top: 50%; right: 10px; width: 24px; height: 24px; border: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent); border-radius: 999px; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 72%, transparent), color-mix(in oklch, var(--surface-panel) 94%, transparent) ); box-shadow: inset 0 1px 0 color-mix(in oklch, white 12%, transparent), 0 6px 18px color-mix(in oklch, black 12%, transparent); opacity: 0.96; transform: translateY(-50%); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after { top: 50%; right: 18px; width: 8px; height: 8px; border-right: 1.5px solid color-mix(in oklch, var(--foreground) 78%, transparent); border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 78%, transparent); opacity: 0.86; transform: translateY(-60%) rotate(45deg); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy { align-content: start; gap: 4px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.8125rem; line-height: 1.12; letter-spacing: -0.01em; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { font-size: 0.6875rem; line-height: 1.34; color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground)); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2.15rem, auto) auto; align-content: start; justify-items: start; gap: 6px; min-width: 0; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { min-height: 2.15rem; font-size: 0.71875rem; line-height: 1.48; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { min-height: 24px; justify-content: flex-start; align-items: center; gap: 6px; padding-left: 0; border-left: 0; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta:empty { visibility: hidden; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 24px; padding: 4px 10px; border-color: color-mix(in oklch, var(--border-soft) 56%, transparent); background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 74%, transparent), color-mix(in oklch, var(--surface-panel) 94%, transparent) ); box-shadow: inset 0 1px 0 color-mix(in oklch, white 12%, transparent); } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { grid-template-columns: 144px minmax(0, 1fr); min-height: 72px; gap: 6px 12px; padding: 10px 42px 10px 14px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary { grid-template-rows: minmax(1.9rem, auto) auto; gap: 5px; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text { min-height: 1.9rem; overflow: visible; font-size: 0.6875rem; line-height: 1.38; white-space: normal; text-overflow: clip; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-meta { min-height: 22px; padding-left: 0; border-left: 0; } } /* 2026-03-13 Pass - quieter desktop runtime utility shells after first storyteller run */ @media (min-width: 1180px) { .layout.is-story-focused .story-run-rail.is-ready { gap: 5px; padding: 11px 14px 10px; } .layout.is-story-focused .story-run-rail.is-ready .story-run-rail-head { gap: 3px; padding-bottom: 1px; } .layout.is-story-focused .story-run-rail.is-ready .story-run-rail-head p, .layout.is-story-focused .story-run-rail.is-ready .story-guidance-chip, .layout.is-story-focused .story-run-rail.is-ready .story-guidance-hint, .layout.is-story-focused .story-controls.is-ready .story-section-head p, .layout.is-story-focused .story-controls.is-ready .story-controls-hint { display: none; } .layout.is-story-focused .story-run-rail.is-ready .story-run-rail-head .story-section-eyebrow { display: none; } .layout.is-story-focused .story-run-rail.is-ready .story-run-rail-head h3 { font-size: 0.78rem; line-height: 1.14; } .layout.is-story-focused .story-run-rail.is-ready .story-head-grid { gap: 0 8px; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-card, .layout.is-story-focused .story-run-rail.is-ready .story-stat-card-title, .layout.is-story-focused .story-run-rail.is-ready:not(.is-idle) .story-stat-card-title { gap: 1px; padding: 6px 0 7px; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-label { font-size: 0.62rem; line-height: 1.1; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-value { overflow: hidden; font-size: 0.88rem; line-height: 1.16; white-space: nowrap; text-overflow: ellipsis; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric { gap: 4px; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric-label { font-size: 0.6rem; line-height: 1.08; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric-value { font-size: 0.72rem; line-height: 1.14; } .layout.is-story-focused .story-run-rail.is-ready .story-status-row-summary { gap: 3px; padding-top: 1px; } .layout.is-story-focused .story-run-rail.is-ready .story-status-row-summary .status-pill { min-height: 19px; padding: 2px 6px; font-size: 0.62rem; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance { align-items: center; gap: 6px 8px; padding-top: 6px; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-copy { min-width: 0; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-title { overflow: hidden; font-size: 0.72rem; line-height: 1.16; white-space: nowrap; text-overflow: ellipsis; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-actions { gap: 4px; } .layout.is-story-focused .story-run-rail.is-ready #storyTimelineGuideOpenLiveBtn { min-height: 26px; padding: 0 9px; font-size: 0.64rem; } .layout.is-story-focused .story-controls.is-ready { gap: 5px; } .layout.is-story-focused .story-controls.is-ready .story-section-head { gap: 3px; } .layout.is-story-focused .story-controls.is-ready .story-controls-grid { gap: 6px 8px; } .layout.is-story-focused .story-controls.is-ready .field { gap: 4px; padding: 6px 8px; } .layout.is-story-focused .story-controls.is-ready .field > span { font-size: 0.62rem; line-height: 1.12; } .layout.is-story-focused .story-controls.is-ready .field :is(input, select, .select-trigger), .layout.is-story-focused .story-controls.is-ready .meta-box { min-height: 34px; font-size: 0.72rem; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.52fr) minmax(188px, 0.48fr); gap: 8px; } .layout.is-story-focused .story-output-side { gap: 5px; } .layout.is-story-focused .story-output-side-card-dossier { gap: 2px; } .layout.is-story-focused .story-output-dossier-section { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "label title" ". note" ". tags" ". metrics"; align-items: start; gap: 2px 8px; padding: 7px 0 7px 8px; } .layout.is-story-focused .story-output-dossier-label { grid-area: label; margin-top: 1px; font-size: 0.58rem; line-height: 1.1; } .layout.is-story-focused .story-output-dossier-title { grid-area: title; min-width: 0; font-size: 0.72rem; line-height: 1.16; } .layout.is-story-focused .story-output-dossier-note { grid-area: note; display: -webkit-box; min-width: 0; overflow: hidden; font-size: 0.64rem; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .layout.is-story-focused .story-output-dossier-section .story-output-card-tags { grid-area: tags; gap: 3px; } .layout.is-story-focused .story-output-dossier-section .story-output-card-tag { min-height: 18px; padding: 2px 6px; font-size: 0.58rem; } .layout.is-story-focused .story-output-side .story-output-metrics.is-compact { grid-area: metrics; gap: 4px 10px; padding-top: 6px; } } /* 2026-03-14 Pass - calmer desktop storyteller scene-controls utility shelf */ @media (min-width: 1180px) { .layout.is-story-focused .story-controls[data-story-control-density="utility"] { gap: 4px; } .layout.is-story-focused .story-controls[data-story-control-density="utility"] .story-section-head { gap: 3px 8px; padding-bottom: 5px; align-items: center; } .layout.is-story-focused .story-controls[data-story-control-density="utility"] .story-section-head .story-section-eyebrow { display: none; } .layout.is-story-focused .story-controls[data-story-control-density="utility"] .story-section-head h3 { font-size: 0.78rem; line-height: 1.08; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] { grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.84fr) max-content; align-items: end; gap: 6px 8px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field { gap: 4px; min-width: 0; padding: 6px 8px; border-radius: 12px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field > span { font-size: 0.58rem; line-height: 1.08; letter-spacing: 0.14em; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:first-child { grid-column: auto; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px 10px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(2) { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px 10px; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:first-child input[type="range"] { width: 100%; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field :is(input, select, .select-trigger) { min-height: 34px; padding: 7px 30px 7px 10px; font-size: 0.71rem; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(3) { display: grid; grid-column: auto; grid-template-columns: max-content auto; align-items: center; gap: 6px 8px; padding: 6px 8px; border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent); border-radius: 12px; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent) ); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent); } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] .field:nth-child(3) > span { overflow: visible; text-overflow: clip; white-space: nowrap; } .layout.is-story-focused .story-controls-grid[data-story-control-density="utility"] #storyTimelinePosition.meta-box { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0.74rem; line-height: 1.22; } } /* 2026-03-14 Pass - desktop storyteller final readable shelf and runtime authority override */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio > h2 { gap: 14px !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { letter-spacing: -0.02em !important; white-space: nowrap !important; } .layout.is-story-focused .panel-story-studio .story-intro { font-size: 0.71875rem !important; line-height: 1.52 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 { max-width: none !important; font-size: clamp(1.66rem, 1.5rem + 0.28vw, 1.92rem) !important; line-height: 1.01 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p { max-width: none !important; font-size: 0.71875rem !important; line-height: 1.52 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid { gap: 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; align-content: center !important; min-height: 108px !important; gap: 8px !important; padding: 13px 46px 13px 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy { gap: 5px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.875rem !important; line-height: 1.1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: block !important; font-size: 0.71875rem !important; line-height: 1.46 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; width: 100% !important; min-width: 0 !important; justify-items: stretch !important; align-items: start !important; gap: 7px !important; padding-right: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; justify-self: stretch !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.44 !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { width: max-content !important; min-height: 24px !important; justify-content: flex-start !important; align-items: center !important; gap: 6px !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { grid-template-columns: minmax(136px, max-content) minmax(0, 1fr) !important; align-items: start !important; align-content: start !important; min-height: 76px !important; gap: 8px 12px !important; padding: 10px 42px 10px 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; justify-items: stretch !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text { min-height: 0 !important; font-size: 0.6875rem !important; line-height: 1.38 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-results-grid { grid-template-columns: minmax(0, 1.58fr) minmax(304px, 0.42fr) !important; gap: 14px !important; } .layout.is-story-focused .story-results-secondary { gap: 8px !important; padding: 12px 14px 14px !important; border-radius: 24px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head { gap: 5px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { font-size: 1rem !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: -webkit-box !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.5 !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { display: block !important; font-size: 0.6875rem !important; line-height: 1.44 !important; white-space: normal !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tag { min-height: 24px !important; font-size: 0.6875rem !important; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr) !important; gap: 16px !important; align-items: start !important; } .layout.is-story-focused .story-output-main { gap: 11px !important; } .layout.is-story-focused .story-output-title { max-width: 28ch !important; font-size: clamp(1.2rem, 1.05rem + 0.3vw, 1.42rem) !important; line-height: 1.05 !important; } .layout.is-story-focused .story-output-summary { max-width: 58ch !important; font-size: 0.8125rem !important; line-height: 1.5 !important; } .layout.is-story-focused .story-output-body-text { font-size: 0.75rem !important; line-height: 1.56 !important; overflow-wrap: anywhere !important; } .layout.is-story-focused .story-output-cue-pill { min-height: 24px !important; font-size: 0.6875rem !important; } .layout.is-story-focused .story-output-dossier-section { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "label" "title" "note" "tags" "metrics" !important; gap: 4px !important; padding: 8px 0 !important; } .layout.is-story-focused .story-output-dossier-label { margin-top: 0 !important; font-size: 0.6875rem !important; line-height: 1.24 !important; } .layout.is-story-focused .story-output-dossier-title { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.875rem !important; line-height: 1.12 !important; } .layout.is-story-focused .story-output-dossier-note { display: -webkit-box !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.48 !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-output-card-tag { min-height: 24px !important; padding: 4px 10px !important; font-size: 0.6875rem !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title { max-width: 46ch !important; font-size: clamp(1.16rem, 1.04rem + 0.24vw, 1.32rem) !important; line-height: 1.08 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { font-size: 0.75rem !important; line-height: 1.48 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-text { font-size: 0.78125rem !important; line-height: 1.58 !important; } .layout.is-story-focused .story-bottom-grid { grid-template-columns: 208px minmax(0, 1fr) !important; gap: 10px !important; } } /* 2026-03-14 Pass - calmer storyteller desktop heading hierarchy and stacked tray forms */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio > h2 { gap: 16px !important; align-items: end !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { font-size: clamp(2.34rem, 2.12rem + 0.74vw, 2.9rem) !important; line-height: 0.96 !important; letter-spacing: -0.028em !important; white-space: nowrap !important; } .layout.is-story-focused .panel-story-studio .story-intro { max-width: 48ch !important; font-size: 0.8rem !important; line-height: 1.58 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { gap: 18px !important; padding: 22px 22px 20px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) minmax(238px, 0.34fr) !important; gap: 12px 18px !important; align-items: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 6px !important; align-content: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { max-width: 20ch !important; font-size: clamp(1.36rem, 1.22rem + 0.34vw, 1.62rem) !important; line-height: 1.08 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { max-width: 56ch !important; font-size: 0.76rem !important; line-height: 1.58 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { max-width: 272px !important; gap: 5px !important; padding: 10px 12px !important; border-radius: 16px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 68%, transparent), color-mix(in oklch, var(--surface-panel) 94%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 8%, transparent), 0 12px 28px color-mix(in oklch, black 10%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status .status-pill, .layout.is-story-focused .story-shell-top .story-compose-status .status-pill { min-height: 22px !important; padding: 3px 8px !important; font-size: 0.64rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status p, .layout.is-story-focused .story-shell-top .story-compose-status p { max-width: 24ch !important; font-size: 0.71rem !important; line-height: 1.42 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; align-items: start !important; padding-top: 2px !important; border-top: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray:not([open]), .layout.is-story-focused .story-shell-top .story-compose-shell #storyDirectionTray:not([open]) { grid-column: auto !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]), .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) { overflow: hidden !important; border-radius: 18px !important; border-color: color-mix(in oklch, var(--border-soft) 54%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 70%, transparent), color-mix(in oklch, var(--surface-panel) 95%, transparent) ), linear-gradient( 112deg, color-mix(in oklch, oklch(0.76 0.05 75) 10%, transparent) 0%, transparent 36%, color-mix(in oklch, var(--primary) 10%, transparent) 78%, transparent 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 10%, transparent), 0 14px 30px color-mix(in oklch, black 14%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary { position: relative !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; align-content: start !important; gap: 7px !important; min-height: 102px !important; padding: 14px 48px 14px 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-copy { gap: 4px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.92rem !important; line-height: 1.12 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: block !important; font-size: 0.74rem !important; line-height: 1.46 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary { display: grid !important; justify-items: start !important; gap: 6px !important; padding-right: 0 !important; text-align: left !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { display: -webkit-box !important; max-width: none !important; min-height: 0 !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.48 !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { justify-content: flex-start !important; gap: 4px !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 22px !important; padding: 3px 8px !important; font-size: 0.64rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) > summary { min-height: 74px !important; gap: 5px !important; padding: 10px 42px 10px 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-title { font-size: 0.82rem !important; line-height: 1.08 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-hint { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-text { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; font-size: 0.68rem !important; line-height: 1.35 !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-meta, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid:has(.story-tray[open]) .story-tray:not([open]) .story-tray-summary-meta { min-width: max-content !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open], .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] { grid-column: 1 / -1 !important; border-radius: 22px !important; border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft)) !important; background: radial-gradient(420px 180px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%), linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 62%, transparent), color-mix(in oklch, var(--surface-panel) 95%, transparent) ) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] > summary { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; padding: 15px 18px 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] > summary::after { top: 22px !important; right: 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-copy { max-width: 62ch !important; gap: 4px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-title { font-size: 0.98rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-hint { max-width: 54ch !important; font-size: 0.76rem !important; line-height: 1.48 !important; white-space: normal !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell #storyMediaTray[open] .story-tray-body { grid-template-columns: minmax(0, 780px) !important; justify-content: start !important; gap: 12px !important; padding: 12px 18px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell #storyDirectionTray[open] .story-tray-body { grid-template-columns: minmax(0, 880px) !important; justify-content: start !important; gap: 12px !important; padding: 12px 18px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-note-card, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-note-card { gap: 10px !important; padding: 15px 16px !important; border-radius: 18px !important; border-color: color-mix(in oklch, var(--border-soft) 54%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 52%, transparent), color-mix(in oklch, var(--surface-panel) 88%, transparent) ) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-head, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section-head { gap: 5px !important; padding-bottom: 0 !important; border-bottom: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section-copy { max-width: 46ch !important; font-size: 0.76rem !important; line-height: 1.52 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .field { position: relative !important; width: 100% !important; min-width: 0 !important; gap: 7px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field > span, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .field > span { font-size: 0.75rem !important; line-height: 1.34 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select, textarea), .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] :is(input, select, textarea) { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; min-height: 50px !important; padding: 12px 14px !important; border-radius: 16px !important; line-height: 1.45 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] select, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] select { padding-right: 42px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 70%, transparent), color-mix(in oklch, var(--surface-panel) 94%, transparent) ) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field:has(select)::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .field:has(select)::after { content: ""; position: absolute; right: 16px; bottom: 19px; width: 9px; height: 9px; border-right: 1.5px solid color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground)); border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground)); transform: rotate(45deg); pointer-events: none; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-note-card, .layout.is-story-focused .story-shell-top .story-compose-shell #storyDirectionTray[open] .story-tray-note-card { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] textarea, .layout.is-story-focused .story-shell-top .story-compose-shell #storyDirectionTray[open] textarea { min-height: 176px !important; padding: 16px 18px !important; } } /* 2026-03-14 Pass - quieter desktop storyteller atlas note rail */ @media (min-width: 1180px) { .layout.is-story-focused .story-results-secondary { gap: 6px !important; padding: 10px 12px 12px !important; border-radius: 22px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head { gap: 4px !important; padding-bottom: 2px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head .story-section-eyebrow, .layout.is-story-focused .story-results-secondary .story-atlas-shell-head p { display: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head h3 { font-size: 0.84rem !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; font-family: inherit !important; } .layout.is-story-focused .story-results-secondary .story-atlas-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; align-items: stretch !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tab { flex: 1 1 auto !important; min-height: 34px !important; padding: 7px 10px !important; border-radius: 12px !important; gap: 0 !important; justify-items: center !important; align-content: center !important; background: color-mix(in oklch, var(--surface-control) 56%, transparent) !important; box-shadow: none !important; transform: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tab-hint { display: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tab-label { font-size: 0.67rem !important; line-height: 1.08 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tab.is-active { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 78%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 8%, transparent), 0 8px 18px color-mix(in oklch, black 8%, transparent) !important; } .layout.is-story-focused .story-results-secondary .story-atlas-panels { padding-top: 2px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card { gap: 6px !important; padding: 11px 12px 12px !important; border-radius: 18px !important; border-color: color-mix(in oklch, var(--border-soft) 54%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 60%, transparent), color-mix(in oklch, var(--surface-panel) 94%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 6%, transparent), 0 10px 24px color-mix(in oklch, black 8%, transparent) !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow { display: none !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head { gap: 4px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { font-size: 0.86rem !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: -webkit-box !important; overflow: hidden !important; font-size: 0.7rem !important; line-height: 1.42 !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { padding-top: 0 !important; font-size: 0.66rem !important; line-height: 1.38 !important; display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tags { gap: 4px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tag { min-height: 20px !important; padding: 2px 7px !important; font-size: 0.6rem !important; line-height: 1.12 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding-top: 4px !important; border-top: 1px dashed color-mix(in oklch, var(--border-soft) 36%, transparent) !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metric { gap: 1px !important; padding: 6px 8px !important; border-radius: 12px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 62%, transparent), color-mix(in oklch, var(--surface-panel) 90%, transparent) ) !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metric span { font-size: 0.56rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metric strong { font-size: 0.82rem !important; line-height: 1.1 !important; } } /* 2026-03-14 Pass - desktop storyteller real eof authority */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) minmax(228px, 0.32fr) !important; gap: 8px 18px !important; align-items: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 4px !important; align-content: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { width: max-content !important; max-width: none !important; font-size: clamp(1.5rem, 1.34rem + 0.2vw, 1.68rem) !important; line-height: 1.02 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { width: max-content !important; max-width: none !important; font-size: 0.71875rem !important; line-height: 1.5 !important; white-space: nowrap !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { grid-template-columns: minmax(0, 1fr) !important; min-height: 112px !important; gap: 9px !important; padding: 14px 48px 14px 18px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 8px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text { display: block !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; -webkit-box-orient: initial !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr) !important; gap: 14px !important; } .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage { grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr) !important; gap: 16px !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-title { white-space: nowrap !important; } .layout.is-story-focused #storyLatestOutput .story-output-dossier-note { display: -webkit-box !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyResultsSecondary.story-results-secondary { padding: 12px 14px 14px !important; } .layout.is-story-focused #storyResultsSecondary .story-atlas-head p, .layout.is-story-focused #storyResultsSecondary .story-atlas-meta { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused #storyBottomGrid.story-bottom-grid { grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr) !important; gap: 10px !important; } } /* 2026-03-14 Pass - desktop storyteller hero and rail editorial polish */ @media (min-width: 1180px) { .layout.is-story-focused .hero { overflow: visible !important; gap: 12px !important; padding: 10px 0 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; backdrop-filter: none !important; box-shadow: none !important; } .layout.is-story-focused .hero::before { top: -86px !important; left: -84px !important; width: 420px !important; height: 196px !important; opacity: 0.18 !important; } .layout.is-story-focused .hero::after { top: -96px !important; right: -136px !important; width: 456px !important; height: 210px !important; opacity: 0.14 !important; } .layout.is-story-focused .hero-headline { align-items: center !important; gap: 18px !important; padding-bottom: 10px !important; border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 34%, transparent) !important; } .layout.is-story-focused .hero h1 { font-size: 0.78125rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground)) !important; } .layout.is-story-focused .hero-toolbar { gap: 8px !important; } .layout.is-story-focused .hero-language-control { min-height: 34px !important; padding: 0 6px 0 10px !important; border-color: color-mix(in oklch, var(--border-soft) 44%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 28%, transparent), color-mix(in oklch, var(--surface-panel) 16%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused .hero-language-select { min-height: 28px !important; padding: 4px 10px !important; border-color: color-mix(in oklch, var(--border-soft) 54%, transparent) !important; background: color-mix(in oklch, var(--surface-control) 40%, transparent) !important; } .layout.is-story-focused #themeToggleBtn { min-height: 34px !important; padding: 6px 13px !important; border-color: color-mix(in oklch, var(--border-soft) 44%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 24%, transparent), color-mix(in oklch, var(--surface-panel) 14%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused #themeToggleBtn:hover { border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control-hover) 28%, transparent), color-mix(in oklch, var(--surface-panel) 18%, transparent) ) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { gap: 8px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 5px 10px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 0.96875rem !important; line-height: 1.08 !important; letter-spacing: -0.018em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { gap: 0 !important; padding-top: 2px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { gap: 6px !important; padding: 0 12px 0 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after { height: 13px !important; margin-left: 2px !important; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--border-soft) 72%, transparent), transparent ) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.53125rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.78125rem !important; } .dashboard-body.is-story-focused { grid-template-columns: minmax(128px, 138px) minmax(0, 1fr) !important; gap: 18px !important; } .dashboard-sidebar.is-story-focused { padding-top: 2px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { position: relative !important; gap: 8px !important; padding: 8px 0 0 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav::before { content: "" !important; position: absolute !important; top: 12px !important; bottom: 10px !important; left: 0 !important; width: 1px !important; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--border-soft) 76%, transparent), transparent ) !important; opacity: 0.42 !important; pointer-events: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { position: relative !important; min-height: 60px !important; padding: 10px 10px 10px 18px !important; border: 0 !important; border-radius: 16px !important; background: transparent !important; box-shadow: none !important; opacity: 0.72 !important; gap: 5px !important; isolation: isolate !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn::before { content: "" !important; position: absolute !important; top: 10px !important; bottom: 10px !important; left: 0 !important; width: 2px !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 82%, white), color-mix(in oklch, var(--primary) 36%, transparent) ) !important; opacity: 0 !important; transform: scaleY(0.52) !important; transform-origin: center !important; transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { opacity: 0.94 !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 22%, transparent), transparent ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover::before, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible::before { opacity: 0.38 !important; transform: scaleY(1) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { opacity: 1 !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 32%, transparent), color-mix(in oklch, var(--surface-panel) 10%, transparent) ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active::before { opacity: 1 !important; transform: scaleY(1) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { gap: 3px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { font-size: 0.84375rem !important; line-height: 1.1 !important; color: color-mix(in oklch, var(--foreground) 92%, white) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { font-size: 0.6875rem !important; letter-spacing: 0.18em !important; color: color-mix(in oklch, var(--primary) 84%, white) !important; } } /* 2026-03-14 Pass - desktop storyteller hero/nav atmospheric refinement */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 10px !important; padding: 8px 0 18px !important; } .layout.is-story-focused .hero-headline { position: relative !important; gap: 20px !important; padding-bottom: 12px !important; border-bottom: 0 !important; } .layout.is-story-focused .hero-headline::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: 1px !important; background: linear-gradient( 90deg, color-mix(in oklch, var(--border-soft) 70%, transparent), color-mix(in oklch, var(--border-soft) 24%, transparent) 58%, transparent 88% ) !important; opacity: 0.92 !important; } .layout.is-story-focused .hero h1 { text-shadow: 0 0 18px color-mix(in oklch, var(--primary) 14%, transparent) !important; } .layout.is-story-focused .hero-toolbar { align-items: center !important; gap: 10px !important; } .layout.is-story-focused .hero-language-control, .layout.is-story-focused #themeToggleBtn { border-radius: 999px !important; } .layout.is-story-focused .hero-language-control:hover, .layout.is-story-focused .hero-language-control:focus-within, .layout.is-story-focused #themeToggleBtn:hover { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 0 0 1px color-mix(in oklch, var(--primary) 8%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { gap: 10px !important; padding-left: 2px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; gap: 12px !important; align-items: end !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 4px 10px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow { font-size: 0.53125rem !important; letter-spacing: 0.18em !important; opacity: 0.74 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1rem !important; line-height: 1.06 !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { max-width: 58ch !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.4 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { align-items: center !important; gap: 0 !important; padding-top: 1px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { align-items: baseline !important; gap: 5px !important; padding: 0 14px 0 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint { display: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { letter-spacing: 0.16em !important; opacity: 0.7 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { white-space: nowrap !important; } .dashboard-body.is-story-focused { grid-template-columns: minmax(132px, 146px) minmax(0, 1fr) !important; gap: 20px !important; } .dashboard-sidebar.is-story-focused { padding-top: 4px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 10px !important; padding-top: 10px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav::before { opacity: 0.34 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { min-height: 58px !important; padding: 11px 12px 11px 18px !important; border-radius: 18px !important; background: transparent !important; opacity: 0.78 !important; gap: 6px !important; transition: background 160ms ease, opacity 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn::after { content: "" !important; position: absolute !important; inset: 0 !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: inherit !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 16%, transparent), color-mix(in oklch, var(--surface-panel) 8%, transparent) ) !important; opacity: 0 !important; transition: opacity 160ms ease, border-color 160ms ease !important; z-index: -1 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { background: transparent !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover::after, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible::after { opacity: 0.72 !important; border-color: color-mix(in oklch, var(--border-soft) 32%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active::after { opacity: 1 !important; border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 28%, transparent), color-mix(in oklch, var(--surface-panel) 12%, transparent) ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { gap: 4px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { margin-bottom: 1px !important; font-size: 0.65625rem !important; letter-spacing: 0.2em !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { font-size: 0.875rem !important; line-height: 1.08 !important; } } /* 2026-03-14 Pass - desktop storyteller hero lockup refinement */ @media (min-width: 1180px) { .layout.is-story-focused .hero { position: relative !important; padding: 10px 0 22px !important; } .layout.is-story-focused .hero::before { top: -88px !important; left: -68px !important; width: 392px !important; height: 188px !important; opacity: 0.21 !important; } .layout.is-story-focused .hero::after { top: -104px !important; right: -128px !important; width: 492px !important; height: 226px !important; opacity: 0.17 !important; } .layout.is-story-focused .hero-headline { align-items: end !important; gap: 24px !important; padding-bottom: 14px !important; } .layout.is-story-focused .hero h1 { font-size: 0.8125rem !important; letter-spacing: 0.22em !important; color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; gap: 11px !important; padding-left: 16px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { content: "" !important; position: absolute !important; top: 4px !important; bottom: 4px !important; left: 0 !important; width: 1px !important; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--primary) 62%, white) 28%, color-mix(in oklch, var(--border-soft) 72%, transparent) 74%, transparent ) !important; opacity: 0.9 !important; pointer-events: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 14px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 5px 10px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.0625rem !important; font-weight: 700 !important; line-height: 1.04 !important; letter-spacing: -0.024em !important; text-shadow: 0 0 20px color-mix(in oklch, var(--primary) 10%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { gap: 0 !important; padding-top: 2px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after { height: 14px !important; opacity: 0.92 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.546875rem !important; opacity: 0.66 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.8125rem !important; line-height: 1.14 !important; } } /* 2026-03-14 Pass - desktop storyteller title-band editorial continuation */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { position: relative !important; grid-template-columns: minmax(0, 1fr) max-content !important; gap: 8px 20px !important; align-items: end !important; padding: 0 0 9px 16px !important; border-bottom-color: color-mix(in oklch, var(--border-soft) 34%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head::before, .layout.is-story-focused .story-shell-top .story-compose-head::before { content: "" !important; position: absolute !important; top: 2px !important; bottom: 10px !important; left: 0 !important; width: 1px !important; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--primary) 58%, white) 26%, color-mix(in oklch, var(--border-soft) 68%, transparent) 76%, transparent ) !important; opacity: 0.82 !important; pointer-events: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 5px !important; align-content: end !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy .story-overview-chip, .layout.is-story-focused .story-shell-top .story-compose-copy .story-overview-chip { min-height: 27px !important; padding: 5px 11px 4px !important; border-color: color-mix(in oklch, var(--border-soft) 30%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 26%, transparent), color-mix(in oklch, var(--surface-panel) 16%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { font-size: clamp(1.56rem, 1.4rem + 0.24vw, 1.74rem) !important; line-height: 0.98 !important; letter-spacing: -0.034em !important; text-shadow: 0 0 20px color-mix(in oklch, var(--primary) 8%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { font-size: 0.765625rem !important; line-height: 1.42 !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; opacity: 0.96 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { align-self: end !important; justify-self: end !important; display: grid !important; gap: 5px !important; min-width: 238px !important; padding: 0 0 2px 18px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 30%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeModeBadge, .layout.is-story-focused .story-shell-top #storyComposeModeBadge { justify-self: start !important; min-height: 28px !important; padding: 5px 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { margin: 0 !important; max-width: 30ch !important; font-size: 0.734375rem !important; line-height: 1.4 !important; white-space: nowrap !important; color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground)) !important; } } /* 2026-03-14 Pass - storyteller revision ledger type floor real eof */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variant-note, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-variants-more { font-size: 11px !important; } } /* 2026-03-14 Pass - storyteller runtime atlas and run-rail microcopy real eof */ @media (min-width: 1180px) { .layout.is-story-focused .story-run-rail .story-head-grid { grid-template-columns: minmax(0, 1.06fr) repeat(2, minmax(0, 0.97fr)) !important; gap: 0 10px !important; } .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-note { display: none !important; } .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-value { max-width: 20ch !important; } .layout.is-story-focused .story-run-rail .story-inline-metric-label { letter-spacing: 0.06em !important; text-transform: uppercase !important; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head { gap: 3px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-shell-head h3 { font-size: 0.8rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-panels { padding-top: 0 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card { gap: 5px !important; padding: 10px 11px 11px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head { gap: 3px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-head h3 { font-size: 0.82rem !important; } .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-meta { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.640625rem !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-results-secondary .story-atlas-tags { padding-top: 1px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metrics { padding-top: 3px !important; } .layout.is-story-focused .story-results-secondary .story-atlas-metric { padding: 5px 7px !important; } } /* 2026-03-14 Pass - storyteller atlas single-line authority real eof */ @media (min-width: 1180px) { .layout.is-story-focused #storyResultsSecondary.story-results-secondary :is(#storyWorldSummary, #storyCharacterSummary, #storyMediaSummary) { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; line-height: 1.34 !important; } .layout.is-story-focused #storyResultsSecondary.story-results-secondary :is(#storyWorldMeta, #storyCharacterMeta) { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.640625rem !important; line-height: 1.34 !important; } } /* 2026-03-14 Pass - desktop storyteller outer frame softening */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio { position: relative !important; gap: 12px !important; padding: 15px 20px 18px !important; border-color: color-mix(in oklch, var(--border-soft) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 60%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 28%, transparent) 32%, color-mix(in oklch, var(--surface-panel) 14%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 22px 56px color-mix(in oklch, var(--shadow-color) 18%, transparent) !important; overflow: clip !important; } .layout.is-story-focused .panel-story-studio::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient( 128% 76% at 14% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 58% ), linear-gradient( 180deg, color-mix(in oklch, var(--foreground) 2%, transparent), transparent 34% ) !important; opacity: 0.92 !important; pointer-events: none !important; } .layout.is-story-focused .panel-story-studio > * { position: relative !important; z-index: 1 !important; } .layout.is-story-focused .story-shell-top, .layout.is-story-focused .story-shell-top.is-prerun { gap: 10px !important; padding-top: 2px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { position: relative !important; gap: 8px !important; padding: 16px 18px 17px !important; border-radius: 22px !important; border-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-elevated) 26%, transparent), color-mix(in oklch, var(--surface-panel) 10%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent), 0 14px 30px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell::before, .layout.is-story-focused .story-shell-top .story-compose-shell::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 5%, transparent), transparent 28% ) !important; opacity: 0.8 !important; pointer-events: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell > *, .layout.is-story-focused .story-shell-top .story-compose-shell > * { position: relative !important; z-index: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas, .layout.is-story-focused .story-shell-top .story-compose-canvas { gap: 9px !important; padding: 15px 16px 14px !important; border-radius: 18px !important; border-color: color-mix(in oklch, var(--border-soft) 18%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 16%, transparent), color-mix(in oklch, var(--surface-panel) 6%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent) !important; } } /* 2026-03-14 Pass - desktop storyteller top-shell hierarchy calming */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 8px !important; padding: 6px 0 16px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { gap: 8px !important; padding-left: 14px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 0.96875rem !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.765625rem !important; } .layout.is-story-focused .panel-story-studio { gap: 10px !important; padding-top: 14px !important; } .layout.is-story-focused .panel-story-studio > h2 { gap: 10px !important; align-items: end !important; } .layout.is-story-focused .panel-story-studio > h2 .section-badge { min-height: 26px !important; padding: 0 10px !important; font-size: 0.6875rem !important; line-height: 1 !important; letter-spacing: 0.16em !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { font-size: clamp(2.34rem, 2.1rem + 0.32vw, 2.62rem) !important; line-height: 0.98 !important; letter-spacing: -0.034em !important; } .layout.is-story-focused .story-intro { max-width: 58ch !important; margin-top: -2px !important; overflow: hidden !important; font-size: 0.72rem !important; line-height: 1.34 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top, .layout.is-story-focused .story-shell-top.is-prerun { gap: 8px !important; padding-top: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { gap: 7px !important; padding: 14px 16px 15px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) minmax(214px, 0.28fr) !important; gap: 7px 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 3px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { font-size: clamp(1.36rem, 1.22rem + 0.18vw, 1.5rem) !important; line-height: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { width: auto !important; max-width: 38ch !important; overflow: hidden !important; font-size: 0.6875rem !important; line-height: 1.4 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { align-self: center !important; min-width: 0 !important; max-width: 320px !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 0 10px !important; padding: 0 0 0 14px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status .status-pill, .layout.is-story-focused .story-shell-top .story-compose-status .status-pill { min-height: 22px !important; padding: 0 9px !important; font-size: 0.625rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status p, .layout.is-story-focused .story-shell-top .story-compose-status p { max-width: none !important; overflow: hidden !important; font-size: 0.69rem !important; line-height: 1.32 !important; text-overflow: ellipsis !important; } } /* 2026-03-14 Pass - quieter desktop storyteller tray shelf ledger */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid { gap: 9px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]), .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) { border-radius: 16px !important; border-color: color-mix(in oklch, var(--border-soft) 42%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 52%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 7%, transparent), 0 10px 24px color-mix(in oklch, black 10%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary { gap: 6px !important; min-height: 88px !important; padding: 12px 42px 11px 15px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::before, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary::before { width: 20px !important; height: 20px !important; right: 9px !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 10%, transparent), 0 4px 12px color-mix(in oklch, black 9%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary::after { right: 16px !important; width: 7px !important; height: 7px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-copy { gap: 2px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-title { font-size: 0.88rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-hint { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary { gap: 5px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { min-height: 0 !important; font-size: 0.695rem !important; line-height: 1.34 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { min-height: 20px !important; gap: 5px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 20px !important; padding: 2px 8px !important; font-size: 0.6rem !important; } } /* 2026-03-14 Pass - desktop storyteller hero/nav readability authority real eof */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 14px !important; padding: 12px 0 24px !important; } .layout.is-story-focused .hero-headline { align-items: start !important; gap: 30px !important; padding-bottom: 18px !important; } .layout.is-story-focused .hero h1 { font-size: 0.84375rem !important; line-height: 1 !important; letter-spacing: 0.24em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; max-width: 728px !important; gap: 12px !important; padding: 14px 18px 13px 20px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; border-radius: 18px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 90%, black 10%), color-mix(in oklch, var(--surface-panel) 84%, black 16%) ) !important; backdrop-filter: blur(18px) saturate(112%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 18px 40px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { top: 10px !important; bottom: 10px !important; left: 11px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 16px !important; align-items: center !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { display: grid !important; min-width: 0 !important; gap: 3px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.09375rem !important; line-height: 1.02 !important; letter-spacing: -0.022em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { display: block !important; overflow: hidden !important; margin: 0 !important; max-width: 34ch !important; font-size: 0.71875rem !important; line-height: 1.34 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; opacity: 0.96 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 16px !important; padding-top: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { display: flex !important; min-width: 0 !important; align-items: baseline !important; gap: 6px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.59375rem !important; letter-spacing: 0.16em !important; white-space: nowrap !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: 21ch !important; overflow: hidden !important; font-size: 0.828125rem !important; line-height: 1.12 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint, .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow, .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .status-pill { display: none !important; } .dashboard-sidebar.is-story-focused { position: relative !important; flex: 0 0 214px !important; min-width: 214px !important; max-width: 214px !important; width: 214px !important; padding: 10px 10px 18px !important; } .dashboard-sidebar.is-story-focused::before { content: "" !important; position: absolute !important; inset: 0 8px 0 0 !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: 20px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 84%, black 16%), color-mix(in oklch, var(--surface-panel) 72%, black 28%) ) !important; backdrop-filter: blur(16px) saturate(108%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 36px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; pointer-events: none !important; } .dashboard-sidebar.is-story-focused > * { position: relative !important; z-index: 1 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-width: 0 !important; min-height: 58px !important; padding: 0 12px 0 14px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; align-items: center !important; gap: 0 8px !important; border-radius: 14px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 28%, transparent), color-mix(in oklch, var(--surface-panel) 18%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible { background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 34%, transparent), color-mix(in oklch, var(--surface-panel) 22%, transparent) ) !important; border-color: color-mix(in oklch, var(--border-soft) 28%, transparent) !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 18%, var(--surface-control)), color-mix(in oklch, var(--surface-panel) 84%, black 16%) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 34px !important; margin: 0 !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.18em !important; justify-self: start !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: flex !important; min-width: 0 !important; align-items: center !important; gap: 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; font-size: 0.78125rem !important; line-height: 1.12 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-hint { display: none !important; } } /* 2026-03-14 Pass - desktop storyteller hero/nav structure refinement */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { gap: 13px !important; padding: 16px 19px 14px 21px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 92%, black 8%), color-mix(in oklch, var(--surface-panel) 88%, black 12%) ) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 18px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 5px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.125rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { max-width: 32ch !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { gap: 18px !important; padding-top: 9px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 0 10px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { display: inline-flex !important; width: 36px !important; min-height: 22px !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 34%, transparent), color-mix(in oklch, var(--surface-panel) 18%, transparent) ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active .dashboard-nav-icon { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 22%, var(--surface-control)), color-mix(in oklch, var(--surface-panel) 20%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 8%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { padding-left: 1px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { font-size: 0.796875rem !important; } } /* 2026-03-14 Pass - quieter desktop storyteller mode marker */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { display: inline-grid !important; width: max-content !important; min-width: 0 !important; max-width: 214px !important; justify-self: end !important; grid-template-columns: max-content max-content !important; justify-items: start !important; gap: 0 8px !important; padding: 0 0 0 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { min-width: 0 !important; max-width: 13ch !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 0.625rem !important; line-height: 1.18 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status .status-pill, .layout.is-story-focused .story-shell-top .story-compose-status .status-pill { min-height: 20px !important; padding: 0 7px !important; font-size: 0.59375rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions { width: max-content !important; max-width: 100% !important; grid-template-columns: max-content max-content !important; justify-content: start !important; gap: 7px 10px !important; padding-top: 6px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn { min-width: 176px !important; min-height: 38px !important; padding: 0 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions { display: inline-flex !important; width: max-content !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 4px 8px !important; padding-left: 10px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn { min-height: 28px !important; padding: 0 9px !important; font-size: 0.66rem !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn { font-size: 0.66rem !important; line-height: 1.1 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail { gap: 5px 8px !important; padding: 3px 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active { grid-template-columns: max-content minmax(0, 1fr) !important; align-items: start !important; gap: 1px 8px !important; padding: 7px 10px !important; border-radius: 11px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-kicker { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; min-height: 20px !important; padding: 0 7px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; border-radius: 999px !important; background: color-mix(in oklch, var(--surface-control) 18%, transparent) !important; color: color-mix(in oklch, var(--foreground) 34%, var(--muted-foreground)) !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.11em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title { grid-column: 2 !important; font-size: 0.82rem !important; line-height: 1.02 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint { grid-column: 2 !important; max-width: 21ch !important; font-size: 0.625rem !important; line-height: 1.18 !important; color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title { font-size: 0.65625rem !important; letter-spacing: 0.018em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip { padding: 2px 0 0 8px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card { gap: 2px !important; margin-right: 8px !important; padding-right: 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-label { font-size: 0.6rem !important; letter-spacing: 0.12em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value { max-width: 11ch !important; font-size: 0.625rem !important; line-height: 1.16 !important; } } /* 2026-03-14 Pass - desktop storyteller hero/nav depth and alignment final */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 14px !important; padding: 12px 0 24px !important; } .layout.is-story-focused .hero-headline { gap: 28px !important; padding-bottom: 16px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; width: min(840px, calc(100% - 84px)) !important; max-width: min(840px, calc(100% - 84px)) !important; min-height: 102px !important; gap: 12px !important; padding: 18px 24px 18px 26px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; border-radius: 22px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 94%, black 6%), color-mix(in oklch, var(--surface-panel) 86%, black 14%) ) !important; backdrop-filter: blur(24px) saturate(118%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 20px 46px color-mix(in oklch, var(--shadow-color) 16%, transparent) !important; overflow: clip !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient( 112% 100% at 0% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 58% ), linear-gradient( 180deg, color-mix(in oklch, var(--foreground) 3%, transparent), transparent 42% ) !important; opacity: 0.92 !important; pointer-events: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal > * { position: relative !important; z-index: 1 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { gap: 16px !important; align-items: start !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { gap: 6px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.09375rem !important; line-height: 1.04 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { max-width: 68ch !important; font-size: 0.78125rem !important; line-height: 1.44 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { gap: 0 !important; padding-top: 8px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { gap: 6px !important; padding: 0 16px 0 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.5625rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.8125rem !important; } .dashboard-body.is-story-focused { grid-template-columns: 224px minmax(0, 1fr) !important; gap: 22px !important; } .dashboard-sidebar.is-story-focused { flex: 0 0 224px !important; min-width: 224px !important; max-width: 224px !important; width: 224px !important; padding: 8px 10px 20px !important; } .dashboard-sidebar.is-story-focused::before { inset: 0 4px 0 0 !important; border-color: color-mix(in oklch, var(--border-soft) 28%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 92%, black 8%), color-mix(in oklch, var(--surface-panel) 80%, black 20%) ) !important; backdrop-filter: blur(20px) saturate(112%) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 22px 52px color-mix(in oklch, var(--shadow-color) 16%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 9px !important; padding: 10px 4px 0 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-width: 0 !important; min-height: 60px !important; padding: 12px 14px 12px 16px !important; box-sizing: border-box !important; grid-template-columns: 40px minmax(0, 1fr) !important; gap: 0 12px !important; border-radius: 16px !important; transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn::after { opacity: 0.88 !important; border-color: color-mix(in oklch, var(--border-soft) 24%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 26%, transparent), color-mix(in oklch, var(--surface-panel) 16%, transparent) ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover::after, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible::after { opacity: 1 !important; border-color: color-mix(in oklch, var(--border-soft) 36%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active::after { opacity: 1 !important; border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--primary) 18%, var(--surface-control)), color-mix(in oklch, var(--surface-panel) 18%, transparent) ) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { min-width: 0 !important; align-items: center !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 40px !important; min-height: 24px !important; margin-bottom: 0 !important; font-size: 0.625rem !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.8125rem !important; line-height: 1.08 !important; } } /* 2026-03-14 Pass - desktop storyteller full-width header continuity */ @media (min-width: 1180px) { .layout.is-story-focused .hero { gap: 16px !important; padding-bottom: 26px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { width: 100% !important; max-width: none !important; min-height: 108px !important; padding: 20px 28px 18px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { grid-template-columns: minmax(0, 1fr) max-content !important; gap: 18px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { font-size: 1.125rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { max-width: 84ch !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { justify-content: flex-start !important; gap: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { padding-right: 22px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after { margin-left: 6px !important; opacity: 0.82 !important; } .layout.is-story-focused .panel-story-studio { margin-top: 4px !important; } .layout.is-story-focused .story-intro { width: min(100%, 62ch) !important; max-width: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr) !important; gap: 10px 28px !important; padding: 0 0 11px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { min-width: 290px !important; max-width: none !important; width: 100% !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { max-width: 30ch !important; } } /* 2026-03-14 Pass - quieter desktop storyteller prompt editor */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas, .layout.is-story-focused .story-shell-top .story-compose-canvas { gap: 10px !important; padding: 14px 16px 15px !important; border-radius: 16px !important; border-color: color-mix(in oklch, var(--border-soft) 14%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 10%, transparent), color-mix(in oklch, var(--surface-panel) 4%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field, .layout.is-story-focused .story-shell-top .story-compose-field { gap: 8px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading { grid-template-columns: max-content minmax(0, 1fr) !important; align-items: baseline !important; gap: 3px 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading > span:first-child, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading > span:first-child { font-size: 0.78125rem !important; line-height: 1.04 !important; letter-spacing: 0.01em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-inline-hint, .layout.is-story-focused .story-shell-top .story-compose-field .field-inline-hint { max-width: none !important; font-size: 0.625rem !important; line-height: 1.28 !important; color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 182px !important; padding: 15px 18px 17px !important; border-radius: 16px !important; border-color: color-mix(in oklch, var(--border-soft) 18%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 12%, transparent), color-mix(in oklch, var(--surface-panel) 3%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--foreground) 2%, transparent) !important; font-size: 0.96875rem !important; line-height: 1.68 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea::placeholder, .layout.is-story-focused .story-shell-top .story-compose-field textarea::placeholder { color: color-mix(in oklch, var(--foreground) 42%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta, .layout.is-story-focused .story-shell-top .story-compose-meta { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px 12px !important; padding-top: 7px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview, .layout.is-story-focused .story-shell-top .story-compose-preview { min-width: 0 !important; max-width: none !important; padding-left: 10px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; font-size: 0.65625rem !important; line-height: 1.32 !important; color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground)) !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview[hidden], .layout.is-story-focused .story-shell-top .story-compose-preview[hidden] { display: none !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { justify-self: end !important; min-height: 24px !important; padding: 0 10px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 18%, transparent), color-mix(in oklch, var(--surface-panel) 12%, transparent) ) !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.01em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions, .layout.is-story-focused .story-shell-top .story-compose-actions { padding-top: 9px !important; border-top-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } } /* 2026-03-14 Pass - final desktop storyteller tray editor contract */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] > summary { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; min-height: 0 !important; padding-bottom: 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-copy { max-width: 56ch !important; gap: 3px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-title { font-size: 0.828125rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-hint, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-hint { max-width: 48ch !important; font-size: 0.671875rem !important; line-height: 1.32 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-summary { display: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-body, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-body { gap: 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-note-card, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-section, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .story-tray-note-card { padding: 16px 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-shell, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-shell { display: block !important; width: 100% !important; min-width: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-trigger, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-trigger { width: 100% !important; min-width: 0 !important; min-height: 50px !important; padding: 12px 40px 12px 14px !important; white-space: normal !important; line-height: 1.3 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-menu, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-menu { left: 0 !important; right: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; top: calc(100% + 6px) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-option, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-option { padding: 9px 30px 9px 10px !important; font-size: 0.8125rem !important; line-height: 1.28 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-option .select-option-label, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-option .select-option-label, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .select-option small, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray[open] .select-option small { white-space: normal !important; } } /* 2026-03-14 Pass - desktop storyteller brief-header mode and cue continuity */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail { align-items: start !important; gap: 8px 10px !important; padding: 4px 0 6px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active { min-width: 304px !important; gap: 2px 10px !important; padding: 8px 12px 9px !important; border-radius: 13px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 24%, transparent), color-mix(in oklch, var(--surface-panel) 12%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-kicker { min-height: 21px !important; padding: 0 8px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title { font-size: 0.84375rem !important; line-height: 1.04 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint { max-width: 24ch !important; font-size: 0.65625rem !important; line-height: 1.2 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) { min-height: 34px !important; padding: 8px 12px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 18%, transparent), color-mix(in oklch, var(--surface-panel) 10%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title { font-size: 0.6875rem !important; line-height: 1 !important; letter-spacing: 0.01em !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip { display: flex !important; align-items: baseline !important; gap: 0 !important; padding: 6px 0 0 12px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card { position: relative !important; display: inline-flex !important; align-items: baseline !important; gap: 4px !important; min-width: 0 !important; margin-right: 0 !important; padding: 0 16px 0 0 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card:not(:last-child)::after { content: "" !important; width: 1px !important; height: 12px !important; margin-left: 10px !important; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--border-soft) 68%, transparent), transparent ) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-label { font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.11em !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value { max-width: 16ch !important; overflow: hidden !important; font-size: 0.6875rem !important; line-height: 1.18 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } } /* 2026-03-14 Pass - desktop storyteller writing-surface and CTA continuity */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field, .layout.is-story-focused .story-shell-top .story-compose-field { gap: 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading { align-items: end !important; gap: 4px 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading > span:first-child, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading > span:first-child { font-size: 0.8125rem !important; line-height: 1.04 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-inline-hint, .layout.is-story-focused .story-shell-top .story-compose-field .field-inline-hint { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; line-height: 1.34 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 194px !important; padding: 16px 20px 18px !important; border-radius: 18px !important; border-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 14%, transparent), color-mix(in oklch, var(--surface-panel) 5%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--foreground) 2%, transparent), 0 12px 26px color-mix(in oklch, var(--shadow-color) 8%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta, .layout.is-story-focused .story-shell-top .story-compose-meta { gap: 8px 14px !important; padding-top: 8px !important; border-top-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview, .layout.is-story-focused .story-shell-top .story-compose-preview { font-size: 0.6875rem !important; line-height: 1.36 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; justify-self: end !important; font-size: 0.6875rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground)) !important; box-shadow: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions, .layout.is-story-focused .story-shell-top .story-compose-actions { width: 100% !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: center !important; gap: 9px 14px !important; padding-top: 11px !important; border-top-color: color-mix(in oklch, var(--border-soft) 26%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn, .layout.is-story-focused .story-shell-top .story-compose-actions > #storyComposerSubmitBtn { min-width: 188px !important; min-height: 40px !important; padding: 0 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions, .layout.is-story-focused .story-shell-top .story-compose-secondary-actions { justify-self: end !important; width: auto !important; padding-left: 14px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; gap: 6px 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn, .layout.is-story-focused .story-shell-top .story-compose-secondary-actions > #storyComposerTemplateBtn, .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn, .layout.is-story-focused .story-shell-top .story-compose-secondary-actions > #storyComposerOpenLiveBtn { font-size: 0.6875rem !important; } } /* 2026-03-14 Pass - final desktop storyteller prompt editor contract */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas, .layout.is-story-focused .story-shell-top .story-compose-canvas { gap: 10px !important; padding: 14px 16px 15px !important; border-radius: 16px !important; border-color: color-mix(in oklch, var(--border-soft) 14%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 10%, transparent), color-mix(in oklch, var(--surface-panel) 4%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field, .layout.is-story-focused .story-shell-top .story-compose-field { gap: 8px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading { grid-template-columns: max-content minmax(0, 1fr) !important; align-items: baseline !important; gap: 3px 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading > span:first-child, .layout.is-story-focused .story-shell-top .story-compose-field .field-heading > span:first-child { font-size: 0.78125rem !important; line-height: 1.04 !important; letter-spacing: 0.01em !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-inline-hint, .layout.is-story-focused .story-shell-top .story-compose-field .field-inline-hint { max-width: none !important; font-size: 0.625rem !important; line-height: 1.28 !important; color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 182px !important; padding: 15px 18px 17px !important; border-radius: 16px !important; border-color: color-mix(in oklch, var(--border-soft) 18%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 12%, transparent), color-mix(in oklch, var(--surface-panel) 3%, transparent) ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--foreground) 2%, transparent) !important; font-size: 0.96875rem !important; line-height: 1.68 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea::placeholder, .layout.is-story-focused .story-shell-top .story-compose-field textarea::placeholder { color: color-mix(in oklch, var(--foreground) 42%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta, .layout.is-story-focused .story-shell-top .story-compose-meta { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px 12px !important; padding-top: 7px !important; border-top: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview, .layout.is-story-focused .story-shell-top .story-compose-preview { min-width: 0 !important; max-width: none !important; padding-left: 10px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; font-size: 0.65625rem !important; line-height: 1.32 !important; color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground)) !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview[hidden], .layout.is-story-focused .story-shell-top .story-compose-preview[hidden] { display: none !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: end !important; width: max-content !important; min-height: 24px !important; padding: 0 10px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 18%, transparent), color-mix(in oklch, var(--surface-panel) 12%, transparent) ) !important; font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.01em !important; color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground)) !important; box-shadow: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions, .layout.is-story-focused .story-shell-top .story-compose-actions { padding-top: 9px !important; border-top-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } } /* 2026-03-14 Pass - desktop storyteller collapsed-tray shelf continuity */ @media (min-width: 1180px) { .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { min-height: 106px !important; gap: 7px !important; padding: 13px 42px 12px 16px !important; } .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after { right: 14px !important; opacity: 0.72 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray-grid { gap: 7px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary { min-height: 106px !important; gap: 7px !important; padding: 13px 42px 12px 16px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary::after { right: 14px !important; opacity: 0.72 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-copy { gap: 4px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-title { width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.8125rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary { gap: 4px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-text { font-size: 0.6875rem !important; line-height: 1.3 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { min-height: 20px !important; gap: 4px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag { min-height: 20px !important; padding: 2px 8px !important; border-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; background: color-mix(in oklch, var(--surface-control) 18%, transparent) !important; font-size: 0.625rem !important; line-height: 1.1 !important; } } /* 2026-03-14 Pass - desktop storyteller hero/title foreground continuity */ @media (min-width: 1180px) { .layout.is-story-focused .hero { position: relative !important; gap: 18px !important; padding-bottom: 18px !important; isolation: isolate !important; } .layout.is-story-focused .hero::before { content: "" !important; position: absolute !important; inset: -14px 0 6px !important; border-radius: 32px !important; background: radial-gradient( 108% 140% at 8% 0%, color-mix(in oklch, var(--surface-control) 38%, transparent), transparent 58% ), linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 82%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 62%, transparent) 54%, color-mix(in oklch, var(--surface-panel) 16%, transparent) 100% ) !important; border: 1px solid color-mix(in oklch, var(--border-soft) 16%, transparent) !important; box-shadow: 0 22px 46px color-mix(in oklch, var(--shadow-color) 16%, transparent), inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; pointer-events: none !important; z-index: -1 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { position: relative !important; overflow: hidden !important; min-height: 114px !important; padding: 22px 30px 20px !important; border-color: color-mix(in oklch, var(--border-soft) 24%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 92%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 82%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; backdrop-filter: blur(28px) saturate(1.14) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, color-mix(in oklch, var(--surface-control) 26%, transparent) 0%, transparent 42% ), linear-gradient( 180deg, color-mix(in oklch, var(--foreground) 4%, transparent) 0%, transparent 46% ) !important; pointer-events: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { position: relative !important; align-items: end !important; gap: 22px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { max-width: 78ch !important; line-height: 1.5 !important; } .layout.is-story-focused .panel-story-studio { position: relative !important; margin-top: -6px !important; padding: 18px 22px 18px !important; border-color: color-mix(in oklch, var(--border-soft) 20%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 80%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 44%, transparent) 24%, color-mix(in oklch, var(--surface-panel) 18%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent), 0 20px 42px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; overflow: visible !important; } .layout.is-story-focused .panel-story-studio::before { content: "" !important; position: absolute !important; top: -16px !important; right: 28px !important; left: 28px !important; height: 30px !important; border-radius: 26px 26px 0 0 !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 56%, transparent), color-mix(in oklch, var(--surface-panel) 0%, transparent) ) !important; border: 1px solid color-mix(in oklch, var(--border-soft) 16%, transparent) !important; border-bottom: 0 !important; pointer-events: none !important; z-index: -1 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { position: relative !important; gap: 12px 30px !important; padding: 3px 0 14px 20px !important; border-bottom-color: color-mix(in oklch, var(--border-soft) 24%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head::after, .layout.is-story-focused .story-shell-top .story-compose-head::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: -1px !important; left: 0 !important; height: 1px !important; background: linear-gradient( 90deg, color-mix(in oklch, var(--surface-control) 42%, transparent), color-mix(in oklch, var(--border-soft) 18%, transparent) 42%, transparent 100% ) !important; pointer-events: none !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-intro, .layout.is-story-focused .story-shell-top .story-intro { width: min(100%, 58ch) !important; line-height: 1.46 !important; } } /* 2026-03-14 Pass - desktop storyteller hero lockup and ledger clarity */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 16px 28px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 7px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { display: grid !important; gap: 7px !important; min-width: 0 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { width: min(100%, 31ch) !important; font-size: 1.21875rem !important; line-height: 1.02 !important; letter-spacing: -0.028em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 54ch) !important; max-width: none !important; font-size: 0.84375rem !important; line-height: 1.58 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: end !important; display: grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; width: max-content !important; max-width: 100% !important; align-items: stretch !important; gap: 0 !important; padding-left: 18px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { position: relative !important; display: grid !important; grid-template-rows: auto auto auto !important; align-content: start !important; gap: 3px !important; min-width: 0 !important; padding-right: 18px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:has(#workspaceGlanceThreeValue:empty) { display: none !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.625rem !important; line-height: 1 !important; letter-spacing: 0.14em !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { max-width: 24ch !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.90625rem !important; line-height: 1.12 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint { max-width: 24ch !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; line-height: 1.28 !important; color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground)) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after { margin-left: 10px !important; opacity: 0.68 !important; } } /* 2026-03-14 Pass - final desktop storyteller ready-state runtime rail contract */ @media (min-width: 1180px) { .layout.is-story-focused .story-run-rail.is-ready { gap: 4px !important; padding: 10px 12px 9px !important; } .layout.is-story-focused .story-run-rail.is-ready .story-head-grid { grid-template-columns: minmax(0, 1.24fr) minmax(112px, 0.44fr) minmax(112px, 0.44fr) !important; align-items: start !important; gap: 0 9px !important; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-card-title { grid-column: auto !important; min-width: 0 !important; padding-right: 10px !important; } .layout.is-story-focused .story-run-rail.is-ready .story-stat-card, .layout.is-story-focused .story-run-rail.is-ready .story-stat-card-title { min-height: 0 !important; gap: 1px !important; padding: 6px 0 7px !important; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric { gap: 3px !important; flex-wrap: nowrap !important; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric-label { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 0.59375rem !important; letter-spacing: 0.12em !important; } .layout.is-story-focused .story-run-rail.is-ready .story-inline-metric-value, .layout.is-story-focused .story-run-rail.is-ready .story-stat-note { font-size: 0.67rem !important; line-height: 1.16 !important; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance { grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: 6px 8px !important; padding: 5px 0 0 !important; border: 0 !important; border-top: 1px dashed color-mix(in oklch, var(--border-soft) 52%, transparent) !important; border-radius: 0 !important; background: transparent !important; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-copy { min-width: 0 !important; gap: 2px !important; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-title { font-size: 0.6875rem !important; line-height: 1.16 !important; } .layout.is-story-focused .story-run-rail.is-ready .story-guidance-actions { justify-self: end !important; gap: 4px !important; } .layout.is-story-focused .story-run-rail.is-ready #storyTimelineGuideOpenLiveBtn { min-height: 0 !important; font-size: 0.625rem !important; } } /* 2026-03-15 Pass - desktop storyteller brief status utility rail */ @media (min-width: 1180px) { .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head, .layout.is-story-focused .story-shell-top .story-compose-head { grid-template-columns: minmax(0, 1fr) fit-content(24ch) !important; gap: 10px 24px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { justify-self: end !important; align-self: start !important; display: grid !important; justify-items: start !important; align-content: start !important; width: min(100%, 24ch) !important; min-width: 0 !important; gap: 5px !important; padding: 2px 0 0 14px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeModeBadge, .layout.is-story-focused .story-shell-top #storyComposeModeBadge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; max-width: 100% !important; min-height: 22px !important; padding: 4px 10px !important; font-size: 0.6875rem !important; line-height: 1 !important; white-space: nowrap !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposeStatus, .layout.is-story-focused .story-shell-top #storyComposeStatus { max-width: 24ch !important; font-size: 0.6875rem !important; line-height: 1.34 !important; color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground)) !important; text-wrap: pretty !important; } } /* 2026-03-14 Pass - final desktop storyteller output and preview vertical rhythm */ @media (min-width: 1180px) { .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.48fr) minmax(224px, 0.52fr) !important; gap: 10px !important; } .layout.is-story-focused .story-output-main { gap: 6px !important; } .layout.is-story-focused .story-output-title { max-width: 32ch !important; font-size: clamp(1.08rem, 0.98rem + 0.2vw, 1.22rem) !important; line-height: 1.04 !important; } .layout.is-story-focused .story-output-summary { max-width: 64ch !important; font-size: 0.78125rem !important; line-height: 1.42 !important; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact { gap: 0 !important; padding-top: 6px !important; } .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact .story-output-body-text, .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-text { font-size: 0.734375rem !important; line-height: 1.44 !important; } .layout.is-story-focused .story-output-side { gap: 5px !important; } .layout.is-story-focused .story-output-dossier-section { gap: 3px !important; padding: 6px 0 6px 8px !important; } .layout.is-story-focused .story-output-dossier-note { font-size: 0.65625rem !important; line-height: 1.34 !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-copy { gap: 6px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-head { gap: 6px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title { max-width: 52ch !important; font-size: clamp(1.08rem, 0.98rem + 0.2vw, 1.2rem) !important; line-height: 1.06 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { font-size: 0.71875rem !important; line-height: 1.42 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-copy-card-main { padding: 10px 12px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-text { font-size: 0.75rem !important; line-height: 1.5 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-support-strip { grid-template-columns: minmax(0, 1fr) minmax(188px, 0.72fr) !important; gap: 8px !important; padding-top: 8px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-support-card { gap: 6px !important; padding: 8px 10px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary-grid { gap: 6px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary-item p { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1 !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-preview-assets { gap: 4px !important; } .layout.is-story-focused .story-preview-shell.is-ready .story-asset-pill { min-height: 20px !important; padding: 3px 7px !important; font-size: 0.625rem !important; } } /* 2026-03-14 Pass - final desktop storyteller output/preview eof authority */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.72fr) minmax(160px, 0.28fr) !important; gap: 9px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-title { max-width: none !important; font-size: clamp(1.02rem, 0.96rem + 0.16vw, 1.14rem) !important; line-height: 1.03 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: none !important; font-size: 0.75rem !important; line-height: 1.38 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-main { padding: 10px 12px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-compact { padding-top: 4px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-compact .story-output-body-text, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.71875rem !important; line-height: 1.4 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-side { gap: 4px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-section { gap: 2px !important; padding: 5px 0 5px 6px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { font-size: 0.625rem !important; line-height: 1.3 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-copy { gap: 5px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-title { max-width: none !important; font-size: clamp(1.04rem, 0.96rem + 0.16vw, 1.14rem) !important; line-height: 1.05 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta { font-size: 0.6875rem !important; line-height: 1.38 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-copy-card-main { padding: 9px 11px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-text { font-size: 0.734375rem !important; line-height: 1.44 !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-strip { grid-template-columns: minmax(0, 1fr) minmax(164px, 0.54fr) !important; gap: 7px !important; padding-top: 7px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-support-card { gap: 5px !important; padding: 7px 9px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-summary-item p { display: none !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-preview-assets { gap: 4px !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell.is-ready .story-asset-pill { min-height: 18px !important; padding: 2px 6px !important; font-size: 0.59375rem !important; } } /* 2026-03-14 Pass - desktop storyteller top microcopy rhythm */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio > h2 { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: end !important; gap: 4px 14px !important; margin-bottom: 8px !important; } .layout.is-story-focused .panel-story-studio > h2 > .section-badge { align-self: start !important; margin-top: 4px !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { letter-spacing: -0.036em !important; font-size: clamp(2.2rem, 2.06rem + 0.24vw, 2.46rem) !important; line-height: 0.98 !important; } .layout.is-story-focused .story-intro { width: min(100%, 48ch) !important; margin: 0 0 0 64px !important; font-size: 0.8125rem !important; line-height: 1.52 !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy, .layout.is-story-focused .story-shell-top .story-compose-copy { gap: 5px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3, .layout.is-story-focused .story-shell-top .story-compose-copy h3 { font-size: clamp(1.42rem, 1.34rem + 0.14vw, 1.54rem) !important; letter-spacing: -0.028em !important; line-height: 1.01 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p, .layout.is-story-focused .story-shell-top .story-compose-copy p { width: min(100%, 52ch) !important; max-width: 52ch !important; font-size: 0.78125rem !important; line-height: 1.5 !important; white-space: normal !important; color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground)) !important; } } /* 2026-03-15 Pass - desktop storyteller 95% foreground readability overlay */ @media (min-width: 1180px) { .layout.is-story-focused .hero::before { inset: -12px 0 8px !important; background: radial-gradient( 108% 140% at 8% 0%, color-mix(in oklch, var(--surface-control) 34%, transparent), transparent 56% ), linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 56%, color-mix(in oklch, var(--surface-panel) 91%, transparent) 100% ) !important; border: 1px solid color-mix(in oklch, var(--border-soft) 22%, transparent) !important; box-shadow: 0 24px 52px color-mix(in oklch, var(--shadow-color) 18%, transparent), inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { min-height: 116px !important; padding: 24px 34px 22px !important; gap: 18px 30px !important; border-color: color-mix(in oklch, var(--border-soft) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 95%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 20px 42px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; backdrop-filter: blur(30px) saturate(1.08) !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::after { background: linear-gradient( 90deg, color-mix(in oklch, var(--surface-control) 18%, transparent) 0%, transparent 38% ), linear-gradient( 180deg, color-mix(in oklch, var(--foreground) 3%, transparent) 0%, transparent 46% ) !important; } .layout.is-story-focused .panel-story-studio { margin-top: -4px !important; padding: 18px 22px 20px !important; border-color: color-mix(in oklch, var(--border-soft) 24%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 24px 52px color-mix(in oklch, var(--shadow-color) 14%, transparent) !important; } .layout.is-story-focused .panel-story-studio::before { top: -14px !important; height: 26px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel) 16%, transparent) ) !important; border-color: color-mix(in oklch, var(--border-soft) 20%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; border-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 14px 30px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } } /* 2026-03-15 Pass - desktop storyteller postrun reading lane continuity */ @media (min-width: 1180px) { .layout.is-story-focused #storyResultsGrid.story-results-grid { grid-template-columns: minmax(0, 1.56fr) minmax(290px, 0.44fr) !important; gap: 12px !important; align-items: start !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell, .layout.is-story-focused #storyPreviewShell.story-preview-shell, .layout.is-story-focused #storyResultsSecondary.story-results-secondary, .layout.is-story-focused #storyBottomGrid.story-bottom-grid { background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; border-color: color-mix(in oklch, var(--border-soft) 22%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 18px 38px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head { gap: 6px 12px !important; align-items: end !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p, .layout.is-story-focused .story-list-head-summary, .layout.is-story-focused #storyTimelineControlsHint { font-size: 0.6875rem !important; line-height: 1.5 !important; color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground)) !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-ready .story-output-stage, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-stage { grid-template-columns: minmax(0, 1.84fr) minmax(188px, 0.26fr) !important; gap: 12px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-main { gap: 7px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-title { max-width: none !important; width: min(100%, 26ch) !important; font-size: clamp(1.08rem, 1rem + 0.16vw, 1.2rem) !important; line-height: 1.04 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: 72ch !important; font-size: 0.75rem !important; line-height: 1.46 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-card-main { padding: 12px 14px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.75rem !important; line-height: 1.52 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-side { gap: 6px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-section { gap: 4px !important; padding: 7px 0 7px 8px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-title { font-size: 0.75rem !important; line-height: 1.18 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { display: -webkit-box !important; overflow: hidden !important; font-size: 0.6875rem !important; line-height: 1.42 !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .layout.is-story-focused #storyResultsSecondary.story-results-secondary { gap: 10px !important; padding: 14px 14px 15px !important; } .layout.is-story-focused #storyAtlasRail.story-atlas-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab { min-width: 0 !important; min-height: 38px !important; padding: 0 12px !important; justify-content: center !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab-label { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.75rem !important; line-height: 1.08 !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab-hint { display: none !important; } .layout.is-story-focused .story-atlas-panels { gap: 8px !important; } .layout.is-story-focused .story-atlas-card { gap: 7px !important; padding: 12px 14px !important; } .layout.is-story-focused .story-atlas-head { gap: 6px !important; } .layout.is-story-focused .story-atlas-head h3 { width: min(100%, 24ch) !important; font-size: 0.984375rem !important; line-height: 1.08 !important; } .layout.is-story-focused .story-atlas-head p, .layout.is-story-focused .story-atlas-meta { font-size: 0.6875rem !important; line-height: 1.46 !important; } .layout.is-story-focused .story-atlas-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .layout.is-story-focused .story-atlas-metric { gap: 2px !important; padding: 8px 8px 7px !important; } .layout.is-story-focused .story-atlas-metric span { font-size: 0.625rem !important; line-height: 1.14 !important; } .layout.is-story-focused .story-atlas-metric strong { font-size: 0.875rem !important; line-height: 1.08 !important; } .layout.is-story-focused #storyBottomGrid.story-bottom-grid { grid-template-columns: minmax(236px, 0.34fr) minmax(0, 1.66fr) !important; gap: 12px !important; padding: 14px 14px 15px !important; } .layout.is-story-focused #storyTimelineControls.story-controls { gap: 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .layout.is-story-focused #storyTimelineControlsGrid.story-controls-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } .layout.is-story-focused #storyTimelineControlsGrid.story-controls-grid .field { gap: 5px !important; } .layout.is-story-focused .story-list-head { grid-template-columns: minmax(0, 1fr) max-content !important; gap: 8px !important; align-items: end !important; } .layout.is-story-focused .story-list-head-copy { gap: 4px !important; } .layout.is-story-focused .story-list-head-summary { max-width: 72ch !important; } .layout.is-story-focused #storyTimelineList.story-timeline-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .layout.is-story-focused #storyTimelineList .story-segment-card { min-height: 244px !important; gap: 10px !important; padding: 13px 14px 12px !important; border-radius: 18px !important; } .layout.is-story-focused #storyTimelineList .story-segment-title { display: -webkit-box !important; overflow: hidden !important; font-size: 0.984375rem !important; line-height: 1.14 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; } .layout.is-story-focused #storyTimelineList .story-segment-text { display: -webkit-box !important; overflow: hidden !important; font-size: 0.75rem !important; line-height: 1.48 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyTimelineList .story-segment-footer { gap: 6px !important; margin-top: auto !important; } .layout.is-story-focused #storyTimelineList .story-segment-meta { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.6875rem !important; line-height: 1.36 !important; } } /* 2026-03-15 Pass - desktop storyteller postrun action and microcopy clarity late authority */ @media (min-width: 1180px) { .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head, .layout.is-story-focused .story-list-head { align-items: start !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-section-head p, .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p, .layout.is-story-focused .story-list-head-summary, .layout.is-story-focused #storyTimelineControlsHint { max-width: none !important; font-size: 0.71875rem !important; line-height: 1.56 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-latest-output-meta { max-width: 72ch !important; } .layout.is-story-focused #storyPreviewShell.story-preview-shell .story-section-head p, .layout.is-story-focused #storyResultsSecondary.story-results-secondary .story-section-head p { max-width: 40ch !important; } .layout.is-story-focused .story-list-head-summary { max-width: 60ch !important; } .layout.is-story-focused #storyTimelineControlsHint { max-width: 34ch !important; padding-top: 8px !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-summary { max-width: 76ch !important; font-size: 0.78125rem !important; line-height: 1.54 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell.is-error .story-output-body-text, .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-body-text { font-size: 0.78125rem !important; line-height: 1.56 !important; } .layout.is-story-focused #storyLatestOutputShell.story-latest-output-shell .story-output-dossier-note { line-height: 1.5 !important; -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab { border: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 93%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent) !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab:hover, .layout.is-story-focused #storyAtlasRail .story-atlas-tab:focus-visible { border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 10px 22px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab.is-active { border-color: color-mix(in oklch, var(--primary) 38%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 14px 28px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyAtlasRail .story-atlas-tab-label { font-size: 0.71875rem !important; line-height: 1.12 !important; letter-spacing: 0.02em !important; } .layout.is-story-focused .story-atlas-card { gap: 8px !important; padding: 13px 14px 14px !important; border-radius: 18px !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important; } .layout.is-story-focused .story-atlas-card.is-active { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 10%, transparent) !important; } .layout.is-story-focused .story-atlas-head p, .layout.is-story-focused .story-atlas-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; font-size: 0.71875rem !important; line-height: 1.48 !important; text-wrap: pretty !important; } .layout.is-story-focused #storyTimelineList .story-segment-card { justify-content: flex-start !important; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .layout.is-story-focused #storyTimelineList .story-segment-card:hover, .layout.is-story-focused #storyTimelineList .story-segment-card:focus-visible { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 96%, var(--primary) 3%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 12px 28px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-card.is-selected { border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 97%, var(--primary) 4%) 0%, color-mix(in oklch, var(--surface-panel) 94%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 16px 34px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused #storyTimelineList .story-segment-head { gap: 8px !important; align-items: center !important; } .layout.is-story-focused #storyTimelineList .story-segment-state, .layout.is-story-focused #storyTimelineList .story-segment-index { white-space: nowrap !important; } .layout.is-story-focused #storyTimelineList .story-segment-state { min-height: 26px !important; padding-inline: 10px !important; } .layout.is-story-focused #storyTimelineList .story-segment-title { -webkit-line-clamp: 3 !important; } .layout.is-story-focused #storyTimelineList .story-segment-text { -webkit-line-clamp: 4 !important; line-height: 1.52 !important; } .layout.is-story-focused #storyTimelineList .story-segment-meta { display: block !important; overflow: visible !important; min-height: 2.96em !important; white-space: normal !important; text-overflow: clip !important; line-height: 1.48 !important; text-wrap: pretty !important; } }