/* 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 232px !important; min-width: 232px !important; max-width: 232px !important; width: 232px !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: 44px minmax(0, 1fr) !important; min-height: 60px !important; padding: 10px 12px !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: 40px !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 chevron alignment and live utility pill */ @media (min-width: 1180px) { .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::before, .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::before { top: 14px !important; right: 14px !important; width: 30px !important; height: 30px !important; border-radius: 999px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after, .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { content: "" !important; position: absolute !important; width: 7px !important; height: 7px !important; border: 0 !important; border-right: 1.5px solid color-mix(in oklch, var(--foreground) 82%, transparent) !important; border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 82%, transparent) !important; box-sizing: border-box !important; transform-origin: center !important; pointer-events: none !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after { top: 25px !important; right: 25px !important; transform: rotate(45deg) !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { top: 25px !important; right: 25px !important; transform: rotate(-135deg) !important; } .layout.is-story-focused .story-shell-top.is-prerun :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted), .layout.is-story-focused .story-shell-top :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted), .layout.is-story-focused #storyRunRail #storyTimelineGuideOpenLiveBtn.button-muted { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: start !important; width: auto !important; min-width: max-content !important; min-height: 38px !important; padding: 0 18px !important; border-radius: 999px !important; line-height: 1 !important; white-space: nowrap !important; } } /* 2026-03-16 Pass - desktop storyteller left-rail late authority (final) */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-body.is-story-focused { grid-template-columns: 272px minmax(0, 1fr) !important; column-gap: 20px !important; row-gap: 16px !important; align-items: start !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused { flex: 0 0 272px !important; min-width: 272px !important; max-width: 272px !important; width: 272px !important; align-self: start !important; justify-self: start !important; margin-top: -12px !important; padding: 12px 14px 16px !important; border-radius: 28px !important; overflow: hidden !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused::before { inset: 0 10px 0 0 !important; border-radius: 24px !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; margin-top: 0 !important; padding-top: 0 !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { display: grid !important; grid-template-columns: 54px minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; min-height: 62px !important; height: 62px !important; gap: 12px !important; padding: 11px 16px !important; align-items: center !important; border-radius: 21px !important; transform: none !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible, .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { transform: none !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] { border-color: color-mix(in oklch, var(--primary) 26%, 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) 93%, var(--primary) 7%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 5%, transparent), 0 12px 22px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] .dashboard-nav-icon { width: 42px !important; min-height: 26px !important; border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 84%, var(--primary) 16%) 0%, color-mix(in oklch, var(--surface-panel) 78%, var(--primary) 22%) 100% ) !important; color: color-mix(in oklch, white 92%, var(--primary)) !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-icon { display: inline-flex !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; min-height: 26px !important; padding: 0 6px !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: clip !important; box-sizing: border-box !important; font-size: 0.75rem !important; line-height: 1 !important; letter-spacing: 0.1em !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: grid !important; align-content: center !important; gap: 3px !important; min-width: 0 !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.90625rem !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; } } /* 2026-03-16 Pass - desktop storyteller left-rail late authority */ @media (min-width: 1180px) { .dashboard-sidebar.is-story-focused { flex: 0 0 248px !important; min-width: 248px !important; max-width: 248px !important; width: 248px !important; align-self: start !important; margin-top: -12px !important; padding: 12px 14px 16px !important; border-radius: 28px !important; } .dashboard-sidebar.is-story-focused::before { inset: 0 10px 0 0 !important; border-radius: 24px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; margin-top: 0 !important; padding-top: 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; min-height: 62px !important; height: 62px !important; gap: 12px !important; padding: 11px 16px !important; align-items: center !important; border-radius: 21px !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, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] { border-color: color-mix(in oklch, var(--primary) 26%, 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) 93%, var(--primary) 7%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 5%, transparent), 0 12px 22px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] .dashboard-nav-icon { width: 42px !important; min-height: 26px !important; border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 84%, var(--primary) 16%) 0%, color-mix(in oklch, var(--surface-panel) 78%, var(--primary) 22%) 100% ) !important; color: color-mix(in oklch, white 92%, var(--primary)) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 42px !important; min-height: 26px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: grid !important; align-content: center !important; gap: 3px !important; min-width: 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.90625rem !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; } } /* 2026-03-15 Pass - desktop storyteller mode rail and cue ledger air refinement */ @media (min-width: 1180px) { .layout.is-story-focused #storyModeRail.story-mode-rail, .layout.is-story-focused .story-shell-top #storyModeRail.story-mode-rail { gap: 10px 12px !important; padding: 6px 0 8px !important; align-items: center !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active { min-width: 332px !important; min-height: 52px !important; gap: 3px 12px !important; padding: 10px 14px 11px !important; border-radius: 15px !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active .story-mode-kicker, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active .story-mode-kicker { font-size: 0.6875rem !important; line-height: 1.1 !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active .story-mode-title, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active .story-mode-title { font-size: 0.875rem !important; line-height: 1.12 !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active .story-mode-hint, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active .story-mode-hint { font-size: 0.6875rem !important; line-height: 1.3 !important; max-width: 32ch !important; } .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active), .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) { justify-content: center !important; min-width: 116px !important; min-height: 38px !important; padding: 9px 16px !important; border-radius: 999px !important; } .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active) .story-mode-kicker, .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active) .story-mode-hint, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) .story-mode-kicker, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) .story-mode-hint { display: none !important; } .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active) .story-mode-title, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) .story-mode-title { font-size: 0.75rem !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } .layout.is-story-focused .story-signal-strip, .layout.is-story-focused .story-shell-top .story-signal-strip { gap: 2px !important; padding: 8px 0 0 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip { gap: 2px !important; padding: 8px 0 0 14px !important; } .layout.is-story-focused .story-signal-strip .story-signal-card, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card { gap: 5px !important; padding-right: 18px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card { gap: 5px !important; padding-right: 18px !important; } .layout.is-story-focused .story-signal-strip .story-signal-label, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-label { font-size: 0.6875rem !important; line-height: 1.1 !important; } .layout.is-story-focused .story-signal-strip .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-value { font-size: 0.75rem !important; line-height: 1.2 !important; } .layout.is-story-focused .story-signal-strip .story-signal-card-lead .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-lead .story-signal-value { max-width: 19ch !important; } .layout.is-story-focused .story-signal-strip .story-signal-card-world .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-world .story-signal-value { max-width: 24ch !important; } .layout.is-story-focused .story-signal-strip .story-signal-card-delivery .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-delivery .story-signal-value { max-width: 22ch !important; } .layout.is-story-focused .story-signal-strip .story-signal-card-scope .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-scope .story-signal-value { max-width: 18ch !important; } } /* 2026-03-15 Pass - desktop storyteller studio band and compose-head air refinement */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio { gap: 14px !important; padding: 22px 24px 24px !important; border-radius: 28px !important; } .layout.is-story-focused .panel-story-studio > h2 { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 6px 16px !important; align-items: end !important; padding-bottom: 2px !important; } .layout.is-story-focused .panel-story-studio > h2 > .section-badge { min-height: 24px !important; padding: 0 10px !important; font-size: 0.6875rem !important; letter-spacing: 0.18em !important; opacity: 0.84 !important; } .layout.is-story-focused .panel-story-studio > h2 > span:last-child { font-size: clamp(2.08rem, 1.96rem + 0.32vw, 2.28rem) !important; line-height: 0.98 !important; letter-spacing: -0.032em !important; } .layout.is-story-focused .panel-story-studio .story-intro { max-width: 52ch !important; margin: -4px 0 0 64px !important; overflow: hidden !important; font-size: 0.8125rem !important; line-height: 1.5 !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top, .layout.is-story-focused .story-shell-top.is-prerun { gap: 10px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { gap: 9px !important; padding: 16px 18px 17px !important; border-radius: 24px !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(16.5rem) !important; gap: 12px 28px !important; align-items: end !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; } .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.5rem, 1.42rem + 0.14vw, 1.62rem) !important; line-height: 1.02 !important; letter-spacing: -0.028em !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: 44ch !important; overflow: hidden !important; font-size: 0.78125rem !important; line-height: 1.54 !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 { width: min(100%, 16.5rem) !important; gap: 2px 12px !important; padding: 2px 0 2px 18px !important; align-self: end !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-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.65625rem !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 { overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.38 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } } /* 2026-03-15 Pass - desktop storyteller prompt lane and CTA handoff refinement */ @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: 13px !important; } .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 { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 4px 14px !important; align-items: baseline !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.1 !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: 37ch !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.45 !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 .story-shell-top.is-prerun .story-compose-field textarea, .layout.is-story-focused .story-shell-top .story-compose-field textarea { min-height: 204px !important; padding: 17px 20px 19px !important; border-radius: 18px !important; line-height: 1.58 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta, .layout.is-story-focused .story-shell-top .story-compose-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px 14px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview, .layout.is-story-focused .story-shell-top .story-compose-preview { max-width: 52ch !important; overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.45 !important; white-space: nowrap !important; text-overflow: ellipsis !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; font-size: 0.6875rem !important; line-height: 1.36 !important; letter-spacing: 0.02em !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; gap: 10px 16px !important; padding: 12px 0 0 !important; align-items: center !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: 202px !important; min-height: 44px !important; padding: 0 20px !important; font-size: 0.78125rem !important; border-radius: 999px !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 { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; padding-left: 16px !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 > button, .layout.is-story-focused .story-shell-top .story-compose-secondary-actions > button { min-height: 34px !important; padding: 0 14px !important; font-size: 0.71875rem !important; white-space: nowrap !important; } } /* 2026-03-15 Pass - desktop storyteller collapsed tray shelf rhythm refinement */ @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: 10px !important; align-items: start !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: 112px !important; grid-template-columns: minmax(0, 1fr) fit-content(10rem) !important; gap: 10px 16px !important; padding: 15px 44px 14px 18px !important; align-items: start !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: 5px !important; min-width: 0 !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.84375rem !important; line-height: 1.14 !important; letter-spacing: -0.01em !important; white-space: nowrap !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 { overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.42 !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, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary { align-self: center !important; justify-self: end !important; width: min(100%, 10rem) !important; gap: 6px !important; text-align: right !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 { overflow: hidden !important; font-size: 0.71875rem !important; line-height: 1.42 !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-meta, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta { justify-content: flex-end !important; align-items: center !important; gap: 6px !important; min-height: 0 !important; font-size: 0.71875rem !important; line-height: 1.2 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta:empty, .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta:empty { display: none !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: 24px !important; padding: 0 10px !important; font-size: 0.6875rem !important; line-height: 1 !important; } } /* 2026-03-15 Pass - desktop storyteller header and left-rail balance refinement */ @media (min-width: 1180px) { .layout.is-story-focused .hero { padding: 16px 0 30px !important; } .layout.is-story-focused .hero-headline { align-items: stretch !important; padding-bottom: 24px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1fr) fit-content(21.5rem) !important; gap: 24px 28px !important; min-height: 128px !important; padding: 26px 34px 24px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal::before { left: 18px !important; top: 16px !important; bottom: 16px !important; opacity: 0.88 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px 18px !important; align-items: start !important; min-width: 0 !important; padding-right: 8px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div { width: min(100%, 44rem) !important; gap: 10px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title { width: min(100%, 24ch) !important; font-size: 1.5rem !important; line-height: 1.01 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 58ch) !important; font-size: 0.84375rem !important; line-height: 1.62 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { width: min(100%, 21.5rem) !important; gap: 10px !important; padding: 6px 0 6px 28px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { min-height: 54px !important; padding: 10px 13px !important; gap: 5px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { font-size: 0.65625rem !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.96875rem !important; } .dashboard-sidebar.is-story-focused { padding: 16px 14px 18px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 10px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { width: 100% !important; min-height: 62px !important; height: 62px !important; padding: 11px 14px !important; align-items: center !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, .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { transform: none !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-icon { width: 42px !important; min-height: 26px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: flex !important; align-items: center !important; min-width: 0 !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { font-size: 0.890625rem !important; line-height: 1.1 !important; } } /* 2026-03-15 Pass - desktop storyteller studio shell depth and rhythm refinement */ @media (min-width: 1180px) { .layout.is-story-focused .panel-story-studio { gap: 18px !important; padding: 24px 28px 28px !important; border-radius: 30px !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 24px 48px color-mix(in oklch, var(--shadow-color) 12%, transparent) !important; } .layout.is-story-focused .panel-story-studio > h2 { gap: 8px 18px !important; padding-bottom: 6px !important; align-items: center !important; } .layout.is-story-focused .panel-story-studio .story-intro { max-width: 50ch !important; margin: -2px 0 0 68px !important; font-size: 0.84375rem !important; line-height: 1.54 !important; } .layout.is-story-focused .story-shell-top, .layout.is-story-focused .story-shell-top.is-prerun { gap: 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell, .layout.is-story-focused .story-shell-top .story-compose-shell { gap: 11px !important; padding: 18px 20px 20px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; border-radius: 26px !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 14px 30px color-mix(in oklch, var(--shadow-color) 8%, transparent) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas, .layout.is-story-focused .story-shell-top .story-compose-canvas { gap: 14px !important; padding: 16px 18px 17px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 16%, transparent) !important; border-radius: 18px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 93%, transparent) 0%, color-mix(in oklch, var(--surface-panel) 89%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent), 0 8px 18px color-mix(in oklch, var(--shadow-color) 5%, transparent) !important; } } /* 2026-03-15 Pass - desktop storyteller compose-head lockup refinement */ @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(14.75rem) !important; gap: 14px 24px !important; padding: 4px 0 16px 22px !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 { font-size: clamp(1.56rem, 1.48rem + 0.16vw, 1.68rem) !important; line-height: 1 !important; letter-spacing: -0.03em !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: 48ch !important; font-size: 0.8125rem !important; line-height: 1.58 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { width: min(100%, 14.75rem) !important; gap: 4px 10px !important; padding: 5px 0 4px 16px !important; border-left: 1px solid color-mix(in oklch, var(--border-soft) 20%, transparent) !important; align-self: start !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: 23px !important; padding: 0 10px !important; font-size: 0.6875rem !important; letter-spacing: 0.04em !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 { font-size: 0.71875rem !important; line-height: 1.44 !important; color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground)) !important; } } /* 2026-03-15 Pass - desktop storyteller mode-rail lockup refinement */ @media (min-width: 1180px) { .layout.is-story-focused #storyModeRail.story-mode-rail, .layout.is-story-focused .story-shell-top #storyModeRail.story-mode-rail { gap: 12px 14px !important; padding: 7px 0 10px !important; align-items: center !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active { min-width: 356px !important; min-height: 58px !important; gap: 4px 12px !important; padding: 11px 16px 12px !important; border-radius: 17px !important; border-color: color-mix(in oklch, var(--primary) 28%, 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) 95%, var(--primary) 6%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 12px 24px color-mix(in oklch, var(--shadow-color) 8%, transparent) !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active .story-mode-title, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active .story-mode-title { font-size: 0.90625rem !important; line-height: 1.1 !important; } .layout.is-story-focused #storyModeRail .story-mode-card.is-active .story-mode-hint, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active .story-mode-hint { max-width: 34ch !important; font-size: 0.71875rem !important; line-height: 1.34 !important; color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground)) !important; } .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active), .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) { justify-content: center !important; min-width: 126px !important; min-height: 40px !important; padding: 10px 18px !important; border-radius: 999px !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; } .layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active) .story-mode-title, .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) .story-mode-title { font-size: 0.765625rem !important; line-height: 1 !important; letter-spacing: 0.01em !important; } } /* 2026-03-15 Pass - desktop storyteller cue-ledger lockup refinement */ @media (min-width: 1180px) { .layout.is-story-focused .story-signal-strip, .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip, .layout.is-story-focused .story-shell-top .story-signal-strip { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.74fr) !important; gap: 0 8px !important; padding: 10px 0 0 16px !important; align-items: start !important; } .layout.is-story-focused .story-signal-strip .story-signal-card, .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-card, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card { min-width: 0 !important; gap: 4px !important; padding-right: 14px !important; align-items: baseline !important; } .layout.is-story-focused .story-signal-strip .story-signal-card-scope, .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-card-scope, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-scope { padding-right: 0 !important; } .layout.is-story-focused .story-signal-strip .story-signal-label, .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-label, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-label { font-size: 0.6875rem !important; line-height: 1.08 !important; letter-spacing: 0.08em !important; color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground)) !important; } .layout.is-story-focused .story-signal-strip .story-signal-value, .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-value, .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-value { display: block !important; min-width: 0 !important; max-width: none !important; font-size: 0.75rem !important; line-height: 1.24 !important; color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground)) !important; } } /* 2026-03-15 Pass - desktop storyteller prompt lockup and meta-ledger refinement */ @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: 12px !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: minmax(0, 1fr) !important; gap: 3px !important; align-items: start !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.08 !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: 56ch !important; font-size: 0.71875rem !important; line-height: 1.5 !important; color: color-mix(in oklch, var(--foreground) 70%, 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: 214px !important; padding: 18px 22px 20px !important; border-radius: 20px !important; line-height: 1.62 !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) max-content !important; gap: 8px 18px !important; align-items: start !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview, .layout.is-story-focused .story-shell-top .story-compose-preview { max-width: 60ch !important; font-size: 0.734375rem !important; line-height: 1.5 !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count, .layout.is-story-focused .story-shell-top .story-compose-count { font-size: 0.71875rem !important; line-height: 1.42 !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 { gap: 12px 18px !important; padding-top: 14px !important; border-top: 1px solid 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: 214px !important; min-height: 46px !important; padding: 0 22px !important; font-size: 0.8125rem !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 { gap: 10px !important; padding-left: 18px !important; } } /* 2026-03-15 Pass - desktop storyteller tray-open, header, and run-rail overflow resilience */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1fr) minmax(31rem, 33%) !important; gap: 24px 30px !important; align-items: center !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 62ch) !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { width: min(100%, 31rem) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding-left: 22px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { align-content: start !important; min-width: 0 !important; min-height: 62px !important; padding: 10px 12px 11px !important; gap: 4px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { display: -webkit-box !important; overflow: hidden !important; overflow-wrap: anywhere !important; word-break: break-word !important; hyphens: auto !important; font-size: 0.90625rem !important; line-height: 1.18 !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; } .layout.is-story-focused .story-compose-shell .story-tray > summary { list-style: none !important; } .layout.is-story-focused .story-compose-shell .story-tray > summary::-webkit-details-marker { display: none !important; } .layout.is-story-focused .story-compose-shell .story-tray > summary::marker { content: "" !important; font-size: 0 !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { width: 100% !important; box-sizing: border-box !important; grid-template-columns: minmax(170px, 0.86fr) minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px 16px !important; min-height: 96px !important; padding: 16px 48px 15px 18px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after { top: 50% !important; right: 18px !important; width: 11px !important; height: 11px !important; transform: translateY(-58%) rotate(45deg) !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-copy { min-width: 0 !important; max-width: 18.5ch !important; gap: 4px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary { display: grid !important; justify-items: start !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text { width: 100% !important; font-size: 0.75rem !important; line-height: 1.42 !important; text-align: left !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-meta { width: 100% !important; justify-content: flex-start !important; gap: 6px !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary { position: relative !important; display: grid !important; width: 100% !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) minmax(0, 32ch) !important; gap: 10px 22px !important; align-items: start !important; min-height: 0 !important; padding: 2px 44px 2px 4px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { top: 18px !important; right: 16px !important; width: 12px !important; height: 12px !important; transform: translateY(-50%) rotate(-135deg) !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-copy { max-width: none !important; gap: 4px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-summary { justify-self: end !important; align-self: start !important; width: min(100%, 32ch) !important; min-width: 0 !important; gap: 6px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-summary-text { width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-summary-meta { width: 100% !important; justify-content: flex-start !important; gap: 6px !important; padding-left: 0 !important; border-left: 0 !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-body { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr) !important; gap: 14px !important; align-items: stretch !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-section, .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-section { min-width: 0 !important; height: 100% !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single), .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-section-grid.story-tray-section-grid-single, .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-section-grid.story-tray-section-grid-single { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] .story-tray-body.story-tray-body-full { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] .story-tray-note-card, .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] .field, .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] textarea { width: 100% !important; max-width: none !important; } .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] textarea { min-height: 168px !important; } .layout.is-story-focused #storyRunRail.story-run-rail { gap: 10px !important; padding: 16px 16px 15px !important; } .layout.is-story-focused #storyRunRail .story-head-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; align-items: stretch !important; } .layout.is-story-focused #storyRunRail .story-stat-card-title { grid-column: 1 / -1 !important; } .layout.is-story-focused #storyRunRail .story-stat-card, .layout.is-story-focused #storyRunRail .story-stat-card-title, .layout.is-story-focused #storyRunRail:not(.is-idle) .story-stat-card-title { min-width: 0 !important; min-height: 0 !important; padding: 10px 12px 11px !important; gap: 4px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 18%, transparent) !important; border-radius: 16px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-control) 78%, 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 8px 18px color-mix(in oklch, var(--shadow-color) 6%, transparent) !important; } .layout.is-story-focused #storyRunRail .story-stat-label { white-space: nowrap !important; } .layout.is-story-focused #storyRunRail .story-stat-value, .layout.is-story-focused #storyRunRail .story-inline-metric-value { overflow-wrap: anywhere !important; white-space: normal !important; text-overflow: clip !important; word-break: break-word !important; } .layout.is-story-focused #storyRunRail .story-stat-note { display: block !important; overflow: visible !important; white-space: normal !important; line-height: 1.42 !important; } .layout.is-story-focused #storyRunRail .story-inline-metric { display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; } .layout.is-story-focused #storyRunRail .story-status-row-summary { flex-wrap: wrap !important; gap: 6px !important; } .layout.is-story-focused #storyRunRail .story-guidance { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; } .layout.is-story-focused #storyRunRail .story-guidance-hint { max-width: none !important; white-space: normal !important; } .layout.is-story-focused #storyRunRail .story-guidance-actions { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; } .layout.is-story-focused #storyTimelineControls, .layout.is-story-focused #storyTimelineControlsGrid, .layout.is-story-focused #storyTimelineControls .field, .layout.is-story-focused #storyTimelineControls .select-shell { overflow: visible !important; } .layout.is-story-focused #storyTimelineControls .select-shell.is-open { z-index: 1400 !important; } .layout.is-story-focused #storyTimelineControls .select-shell.is-open-upward .select-menu { top: auto !important; bottom: calc(100% + 8px) !important; transform-origin: bottom center !important; } .layout.is-story-focused #storyTimelineControls .select-menu { max-height: min(320px, calc(100vh - 48px)) !important; } } /* 2026-03-15 Pass - desktop storyteller tray-card clarity, title alignment, and sidebar lift */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal { grid-template-columns: minmax(0, 1fr) minmax(34rem, 40%) !important; gap: 26px 34px !important; min-height: 132px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description { width: min(100%, 68ch) !important; line-height: 1.54 !important; -webkit-line-clamp: 3; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta { width: min(100%, 35rem) !important; gap: 12px !important; padding-left: 24px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card { min-height: 68px !important; padding: 12px 13px 13px !important; gap: 6px !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label { line-height: 1.18 !important; } .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value { font-size: 0.875rem !important; line-height: 1.24 !important; -webkit-line-clamp: 3; } .dashboard-sidebar.is-story-focused { flex: 0 0 236px !important; min-width: 236px !important; max-width: 236px !important; align-self: start !important; margin-top: -6px !important; padding: 6px 14px 18px !important; border-radius: 28px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 8px !important; margin-top: -2px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { min-height: 60px !important; height: 60px !important; padding: 10px 14px !important; border-radius: 20px !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] { border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 95%, var(--primary) 5%) 0%, color-mix(in oklch, var(--surface-panel) 92%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent), 0 12px 24px color-mix(in oklch, var(--shadow-color) 7%, transparent) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] .dashboard-nav-icon { border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 88%, var(--primary) 12%) 0%, color-mix(in oklch, var(--surface-panel) 82%, var(--primary) 18%) 100% ) !important; color: color-mix(in oklch, white 92%, var(--primary)) !important; } .dashboard-sidebar.is-story-focused .dashboard-nav-title { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.08 !important; } .layout.is-story-focused .panel-story-studio > h2 { gap: 8px 18px !important; align-items: center !important; } .layout.is-story-focused .panel-story-studio > h2 .section-badge { min-width: 70px !important; justify-content: center !important; } .layout.is-story-focused .panel-story-studio .story-intro { max-width: 36ch !important; margin: 2px 0 0 86px !important; } .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status, .layout.is-story-focused .story-shell-top .story-compose-status { width: min(100%, 17rem) !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 { white-space: normal !important; overflow-wrap: anywhere !important; } .layout.is-story-focused .story-shell-top.is-prerun #storyComposerOpenLiveBtn.button-muted, .layout.is-story-focused .story-shell-top.is-prerun #storyTimelineGuideOpenLiveBtn.button-muted, .layout.is-story-focused .story-shell-top #storyComposerOpenLiveBtn.button-muted, .layout.is-story-focused .story-shell-top #storyTimelineGuideOpenLiveBtn.button-muted, .layout.is-story-focused #storyRunRail #storyTimelineGuideOpenLiveBtn.button-muted { border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft)) !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 90%, var(--primary) 10%) 0%, color-mix(in oklch, var(--surface-panel) 85%, var(--primary) 15%) 100% ) !important; color: color-mix(in oklch, white 92%, var(--primary)) !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) 7%, transparent) !important; } .layout.is-story-focused .story-tray-grid { gap: 12px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) { min-height: 0 !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; align-content: start !important; gap: 12px !important; min-height: 124px !important; padding: 18px 52px 18px 18px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::before, .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::before { content: "" !important; position: absolute !important; right: 16px !important; width: 28px !important; height: 28px !important; border: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent) !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in oklch, var(--surface-panel) 94%, var(--primary) 6%) 0%, color-mix(in oklch, var(--surface-panel) 90%, transparent) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent), 0 8px 16px color-mix(in oklch, var(--shadow-color) 6%, transparent) !important; pointer-events: none !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::before { top: 16px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after { top: 30px !important; right: 28px !important; width: 8px !important; height: 8px !important; transform: translateY(-50%) rotate(45deg) !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-copy { max-width: none !important; gap: 5px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-hint { display: -webkit-box !important; overflow: hidden !important; max-width: none !important; font-size: 0.765625rem !important; line-height: 1.44 !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary { justify-items: start !important; align-self: stretch !important; gap: 8px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text { display: -webkit-box !important; overflow: hidden !important; width: 100% !important; font-size: 0.78125rem !important; line-height: 1.42 !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr) !important; gap: 12px 24px !important; padding: 4px 52px 8px 4px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::before { top: 10px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { top: 24px !important; right: 28px !important; width: 8px !important; height: 8px !important; transform: translateY(-50%) rotate(-135deg) !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-summary { justify-self: stretch !important; width: 100% !important; gap: 7px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary .story-tray-summary-text { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-body, .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-body { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single), .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] .story-tray-body.story-tray-body-full { gap: 16px !important; } .layout.is-story-focused .story-compose-shell #storyDirectionTray[open] textarea { min-height: 182px !important; } .layout.is-story-focused #storyRunRail.story-run-rail { gap: 12px !important; } .layout.is-story-focused #storyRunRail .story-head-grid { gap: 12px !important; } .layout.is-story-focused #storyRunRail .story-stat-card-title { padding-bottom: 14px !important; } .layout.is-story-focused #storyRunRail .story-stat-card-title .story-stat-value { font-size: clamp(1.35rem, 1.16rem + 0.6vw, 1.78rem) !important; line-height: 1.02 !important; } .layout.is-story-focused #storyRunRail .story-stat-card:not(.story-stat-card-title) .story-stat-value { font-size: clamp(1.16rem, 1.04rem + 0.5vw, 1.52rem) !important; line-height: 1 !important; } .layout.is-story-focused #storyRunRail .story-inline-metric-label { white-space: nowrap !important; } .layout.is-story-focused #storyTimelineControlsGrid { overflow: visible !important; } .layout.is-story-focused #storyTimelineSelect + .select-shell { width: 100% !important; min-width: 240px !important; } .layout.is-story-focused #storyTimelineSelect + .select-shell .select-trigger { min-height: 44px !important; } .layout.is-story-focused #storyTimelineSelect + .select-shell .select-menu { left: 0 !important; right: auto !important; width: max-content !important; min-width: 100% !important; max-width: min(360px, calc(100vw - 48px)) !important; } } /* 2026-03-15 Pass - desktop storyteller chevron alignment and live utility pill (late load) */ @media (min-width: 1180px) { .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::before, .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::before { top: 14px !important; right: 14px !important; width: 30px !important; height: 30px !important; border-radius: 999px !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after, .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { content: "" !important; position: absolute !important; top: 14px !important; right: 14px !important; width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 13px 13px !important; transform: none !important; clip-path: none !important; pointer-events: none !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8f5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E") !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8f5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 14 12 9 17 14'/%3E%3C/svg%3E") !important; } .layout.is-story-focused .story-compose-shell :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open] > summary { min-height: 58px !important; gap: 12px 24px !important; padding: 12px 56px 12px 12px !important; } .layout.is-story-focused .story-shell-top.is-prerun :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted), .layout.is-story-focused .story-shell-top :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted), .layout.is-story-focused #storyRunRail #storyTimelineGuideOpenLiveBtn.button-muted { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: start !important; width: auto !important; min-width: max-content !important; min-height: 38px !important; padding: 0 18px !important; border-radius: 999px !important; line-height: 1 !important; white-space: nowrap !important; } } /* 2026-03-16 Pass - desktop storyteller left-rail and title alignment EOF authority */ @media (min-width: 1180px) { .layout.is-story-focused .dashboard-body.is-story-focused { grid-template-columns: 284px minmax(0, 1fr) !important; column-gap: 24px !important; align-items: start !important; } .layout.is-story-focused .dashboard-body.is-story-focused > *:not(.dashboard-sidebar.is-story-focused) { position: relative !important; z-index: 1 !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused { flex: 0 0 284px !important; min-width: 284px !important; max-width: 284px !important; width: 284px !important; margin-top: -16px !important; padding: 10px 16px 18px !important; border-radius: 30px !important; position: relative !important; z-index: 0 !important; overflow: hidden !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused::before { inset: 0 12px 0 0 !important; border-radius: 26px !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav { gap: 10px !important; margin-top: 0 !important; padding-top: 0 !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn { grid-template-columns: 60px minmax(0, 1fr) !important; min-height: 64px !important; height: 64px !important; gap: 14px !important; padding: 12px 16px !important; border-radius: 22px !important; justify-items: stretch !important; align-items: center !important; box-sizing: border-box !important; overflow: hidden !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover, .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible, .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active { transform: none !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] { border-color: color-mix(in oklch, var(--primary) 28%, 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) 92%, var(--primary) 8%) 100% ) !important; box-shadow: inset 0 1px 0 color-mix(in oklch, white 7%, transparent), 0 14px 24px color-mix(in oklch, var(--shadow-color) 11%, transparent) !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] .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(--surface-panel) 86%, var(--primary) 14%) 0%, color-mix(in oklch, var(--surface-panel) 79%, var(--primary) 21%) 100% ) !important; color: color-mix(in oklch, white 92%, var(--primary)) !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-icon { display: inline-flex !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; min-height: 28px !important; padding: 0 4px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: clip !important; font-size: 0.6875rem !important; line-height: 1 !important; letter-spacing: 0.08em !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-copy { display: flex !important; align-items: center !important; min-width: 0 !important; } .layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-title { min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 0.96875rem !important; line-height: 1.08 !important; letter-spacing: -0.015em !important; } .layout.is-story-focused .panel-story-studio .story-intro { margin: 2px 0 0 88px !important; padding-left: 0 !important; width: auto !important; max-width: min(58ch, calc(100% - 88px)) !important; } }