/* Live Display Workbench: product content on the adopted FP web-app shell.
   Shared tokens, components and frame remain unmodified in fp-*.css. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Outfit:wght@400;500;700&display=swap');

:root { color-scheme: light; }
.fpds { --green: var(--fp-success); --amber: #896017; line-height: 1.5; }
.fpds .icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.fpds .icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fpds .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; min-height: 48px; padding: 11px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-control); background: var(--fp-surface); color: var(--fp-text); cursor: pointer; transition: background-color var(--fp-motion-fast), border-color var(--fp-motion-fast); }
.fpds .icon-button:hover { background: #eaf1ff; border-color: var(--fp-action-hover); color: var(--fp-action-hover); }
.fpds .icon-button:disabled { background: var(--fp-disabled-bg); border-color: var(--fp-border); color: var(--fp-disabled-text); cursor: not-allowed; }
.fpds .fpa-main .fp-button { white-space: normal; text-align: center; }
.fpds .session-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; margin-block-end: 1.5rem; background: var(--fp-surface-subtle); border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-control); }
.fpds .session-actions, .fpds .session-status { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fpds .session-status { margin-inline-start: auto; gap: 1rem; }
.fpds .session-control-hint { flex: 1 0 100%; margin: 0; color: var(--fp-text-muted); font-size: .875rem; }
.fpds .recording-toolbar { padding: 1.5rem; margin-block-end: 1.5rem; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-control); }
.fpds .recording-toolbar-heading, .fpds .recordings-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.fpds .recording-toolbar-heading h2 { margin: 0; font-size: 1.125rem; }
.fpds .recording-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.fpds .recording-indicator { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .875rem; color: var(--fp-text-muted); }
.fpds .recording-indicator[data-state="recording"] { color: #a30000; }
.fpds .recording-indicator[data-state="recording"]::before { content: ''; width: .5rem; height: .5rem; background: currentColor; border-radius: 50%; }
.fpds #recording-timer { font-family: var(--fp-font-mono); font-variant-numeric: tabular-nums; }
.fpds .recording-hint { color: var(--fp-text-muted); font-size: .875rem; margin: .5rem 0 0; }
.fpds .recording-recovery { padding: 1.5rem; margin-block-end: 1.5rem; border: 1px solid #b57272; border-inline-start: 5px solid var(--fp-error); border-radius: var(--fp-radius-control); background: #fff5f5; }
.fpds .recording-recovery h2 { font-size: 1.5rem; margin-block-start: 0; }
.fpds .recording-recovery p { overflow-wrap: anywhere; }
.fpds .recordings-heading h2, .fpds .recordings-heading p { margin: 0; }
.fpds .recordings-privacy { margin-block: 1.5rem .75rem; }
.fpds .recordings-format-note, .fpds .recording-share-note { font-size: .875rem; color: var(--fp-text-muted); }
.fpds .recordings-format-note { margin-block: 0 1.5rem; }
.fpds .recordings-empty { text-align: center; padding: 3rem 1rem; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-card); background: var(--fp-surface-subtle); }
.fpds .recordings-empty > .icon { width: 2rem; height: 2rem; color: var(--fp-text-muted); }
.fpds .recordings-empty h2 { font-size: 1.5rem; }
.fpds .recording-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; padding-block: 1.5rem; border-block-end: 1px solid var(--fp-divider); }
.fpds .recording-row:first-child { border-block-start: 1px solid var(--fp-divider); }
.fpds .recording-row > div:first-child { flex: 1 1 24rem; min-width: 0; }
.fpds .recording-row h2 { font-size: 1.125rem; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.fpds .recording-metadata { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.fpds .recording-metadata > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.fpds .recording-metadata dt { color: var(--fp-text-muted); }
.fpds .recording-metadata dd { margin: 0; font-variant-numeric: tabular-nums; }
.fpds .recording-row-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.fpds .recording-share-note { margin-block-end: 0; }
.fpds .recording-share-note a { margin-inline-start: .5rem; }
.fpds .recording-player-panel { padding: 1.5rem; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-card); margin-block: 1.5rem; scroll-margin-block-start: calc(var(--fpa-topbar-height, 64px) + 1rem); }
.fpds .recording-player-panel video { display: block; width: 100%; max-height: 65vh; margin-block-start: 1rem; background: #141c26; border-radius: var(--fp-radius-control); }
.fpds .recording-player-panel p { margin-block-end: 0; color: var(--fp-text-muted); }
.fpds #recording-player-title { overflow-wrap: anywhere; }
.fpds .connection-badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.fpds .status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fp-text-muted); }
.fpds .connection-badge[data-status="live"] .status-dot { background: var(--fp-success); }
.fpds .connection-badge[data-status="demo"] .status-dot { background: var(--fp-action); }
.fpds .connection-badge[data-status="connecting"] .status-dot { background: var(--fp-warning); animation: status-blink 1.3s infinite; }
.fpds .connection-badge[data-status="error"] { color: #b60000; }
.fpds .connection-badge[data-status="error"] .status-dot { background: currentColor; }
.fpds .session-timer { font-family: var(--fp-font-mono); font-variant-numeric: tabular-nums; }
.fpds .stop-button .icon { width: 20px; fill: currentColor; }
.fpds .notice { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border: 1px solid var(--fp-border); border-inline-start: 5px solid var(--fp-action-hover); background: #f1f6ff; border-radius: var(--fp-radius-control); margin-block-end: 1.5rem; padding: 1rem; }
.fpds .notice p { flex: 1 1 20rem; min-width: 0; margin: 0; }
.fpds .notice[data-tone="error"] { color: #9c2020; background: #fff4f4; border-inline-start-color: var(--fp-error); }
.fpds .notice .icon-button { margin-inline-start: auto; border-color: transparent; background: transparent; }
.fpds .usage-disclosure { margin: 0 0 1.5rem; color: var(--fp-text-muted); font-size: .875rem; }
.fpds .stage-grid { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 1.5rem; align-items: stretch; }
.fpds .display-frame, .fpds .flow-panel, .fpds .detail-panel { min-width: 0; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-card); background: var(--fp-surface); }
.fpds .panel-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-height: 72px; padding: .75rem 1.5rem; }
.fpds .panel-heading h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; }
.fpds .panel-heading .icon-button { margin-inline-start: auto; border-color: transparent; }
.fpds .micro-label { font: 400 .875rem/1.5 var(--fp-font-display); letter-spacing: .04em; color: var(--fp-text-muted); }
.fpds .panel-heading > .micro-label { margin-inline-start: auto; }
.fpds .display-stage { --stage-bg:#f1f4ef; --stage-fg:#203329; --stage-secondary:#4b6055; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 25rem; margin-inline: 1rem; background: var(--stage-bg); color: var(--stage-fg); border-radius: var(--fp-radius-control); padding: 1.5rem 2rem; isolation: isolate; transition: background-color 180ms, color 180ms; }
.fpds .display-stage[data-theme="mint"] { --stage-bg:#e4edda; --stage-fg:#213b24; --stage-secondary:#405b42; }
.fpds .display-stage[data-theme="blue"] { --stage-bg:#e8effc; --stage-fg:#163c71; --stage-secondary:#395b86; }
.fpds .display-stage[data-theme="dark"] { --stage-bg:#25372f; --stage-fg:#f1f5ec; --stage-secondary:#c3d2c7; }
.fpds .stage-topline { display: flex; align-items: start; justify-content: space-between; gap: 1rem; color: var(--stage-secondary); }
.fpds .stage-mode { font: 500 .875rem/1.5 var(--fp-font-display); letter-spacing: .06em; }
.fpds .stage-corner { font-size: 1.5rem; line-height: 1; }
.fpds .stage-message-wrap { padding-block: 2rem; }
.fpds .stage-message { white-space: pre-line; margin: 0 0 1rem; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.4; font-weight: 700; max-width: 100%; text-wrap: balance; }
.fpds .stage-message[data-long="true"] { font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
.fpds .stage-subtitle { white-space: pre-line; font-size: 1rem; line-height: 1.75; margin: 0; color: var(--stage-secondary); text-wrap: pretty; }
.fpds .stage-bottomline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; color: var(--stage-secondary); font-size: .875rem; }
.fpds .stage-bottomline > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.fpds .stage-bottomline i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; flex: 0 0 auto; }
.fpds .scene-number { font: 400 .875rem/1.5 var(--fp-font-mono); }
.fpds .display-caption { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.5rem; font-size: .875rem; color: var(--fp-text-muted); }
.fpds .caption-dot { flex: 0 0 auto; height: 6px; width: 6px; background: var(--fp-brand-lime); border-radius: 50%; }
.fpds .fullscreen-exit { display: none; }
.fpds .display-stage:fullscreen, .fpds .display-stage.is-expanded { margin: 0; border-radius: 0; padding: clamp(1.5rem,5vw,5rem); min-height: 100dvh; width: 100%; }
.fpds .display-stage:fullscreen .stage-message, .fpds .display-stage.is-expanded .stage-message { font-size: clamp(2.5rem,7vw,6.875rem); max-width: 1300px; }
.fpds .display-stage:fullscreen .stage-subtitle, .fpds .display-stage.is-expanded .stage-subtitle { font-size: clamp(1.125rem,2vw,1.75rem); }
.fpds .display-stage:fullscreen .fullscreen-exit, .fpds .display-stage.is-expanded .fullscreen-exit { display: inline-flex; position: absolute; right: 1.5rem; top: 1.5rem; background: var(--stage-bg); color: var(--stage-fg); border-color: currentColor; }
.fpds .display-stage:fullscreen .stage-corner, .fpds .display-stage.is-expanded .stage-corner { visibility: hidden; }
.fpds .display-stage:fullscreen .stage-topline, .fpds .display-stage.is-expanded .stage-topline { padding-inline-end: 3rem; }
.fpds .display-stage.is-expanded { position: fixed; inset: 0; overflow-y: auto; z-index: 60; }
.fpds .flow-panel { display: flex; flex-direction: column; padding: 1.5rem; }
.fpds .eyebrow { margin: 0 0 .5rem; color: var(--fp-text-muted); font: 500 .875rem/1.5 var(--fp-font-display); letter-spacing: .06em; }
.fpds .flow-heading h2 { font-size: 1.5rem; margin: 0; }
.fpds .flow-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.fpds .flow-step { --step-color:var(--fp-success); display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; position: relative; }
.fpds .flow-step:not(:last-child) { padding-block-end: 1.5rem; }
.fpds .flow-step:not(:last-child)::before { content: ''; position: absolute; width: 1px; background: var(--fp-divider); top: 2.25rem; bottom: .25rem; left: 1rem; }
.fpds .flow-step:nth-child(2) { --step-color:var(--fp-action-hover); }
.fpds .flow-step:nth-child(3) { --step-color:var(--amber); }
.fpds .flow-number { align-self: start; display: inline-flex; align-items: center; justify-content: center; font: 400 .875rem/1.5 var(--fp-font-mono); color: var(--fp-text-muted); border: 1px solid var(--fp-divider); border-radius: 50%; width: 2rem; height: 2rem; }
.fpds .flow-step[data-active="true"] .flow-number { color: white; background: var(--step-color); border-color: var(--step-color); }
.fpds .flow-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; }
.fpds .flow-indicator { height: 6px; width: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--fp-border); }
.fpds .flow-step[data-active="true"] .flow-indicator { background: var(--step-color); }
.fpds .flow-step p { margin: .25rem 0; font-size: .875rem; color: var(--fp-text-muted); }
.fpds .flow-state { font-size: .875rem; color: var(--fp-text-muted); overflow-wrap: anywhere; }
.fpds .flow-step[data-active="true"] .flow-state { color: var(--step-color); }
.fpds .flow-note { margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--fp-divider); display: flex; align-items: start; gap: .5rem; }
.fpds .little-square { flex: 0 0 auto; width: .5rem; height: .5rem; margin-top: .4rem; background: var(--fp-brand-lime); }
.fpds .flow-note p { font-size: .875rem; color: var(--fp-text-muted); margin: 0; }
.fpds .timeline-panel { margin-block-start: 2rem; container: fp-timeline / inline-size; }
.fpds .section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-end: 1rem; }
.fpds .section-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.fpds .section-heading h2 { margin: 0; font-size: 1.5rem; }
.fpds .section-meta, .fpds .timeline-window { font-size: .875rem; color: var(--fp-text-muted); }
.fpds .timeline-window b { font-weight: 700; }
.fpds .timeline { --label-width: 12rem; --timeline-progress: 0%; position: relative; min-width: 0; }
.fpds .timeline-lane { display: grid; grid-template-columns: var(--label-width) minmax(0,1fr); border: 1px solid var(--fp-divider); background: var(--fp-surface); border-radius: var(--fp-radius-control); min-height: 104px; margin-block-end: .5rem; }
.fpds .lane-label { display: grid; grid-template-columns: 6px minmax(0,1fr); align-content: center; column-gap: .5rem; row-gap: .25rem; padding: 1rem; border-inline-end: 1px solid var(--fp-divider); }
.fpds .lane-dot { width: 6px; height: 6px; margin-top: .55rem; background: var(--fp-success); border-radius: 50%; }
.fpds .lane-label strong { font: 700 1rem/1.5 var(--fp-font-display); }
.fpds .lane-label > span:last-child { grid-column: 2; font-size: .875rem; color: var(--fp-text-muted); }
.fpds .voice-lane .lane-dot { background: var(--fp-action); }
.fpds .backend-lane .lane-dot { background: var(--amber); }
.fpds .lane-plot { position: relative; min-width: 0; min-height: max(104px, 6.5rem); background-image: linear-gradient(to right, transparent calc(100% - 1px),#edf0f2 1px); background-size: calc(100% / 6) 100%; }
.fpds .lane-plot::after { content: ''; pointer-events: none; position: absolute; top: 0; bottom: 0; left: var(--timeline-progress); width: 1px; background: var(--fp-border); opacity: var(--cursor-opacity,0); }
.fpds .lane-plot canvas { position: absolute; inset: 0; height: 100%; width: 100%; border-radius: var(--fp-radius-control); }
.fpds .lane-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; font-size: .875rem; color: var(--fp-text-muted); text-align: center; }
.fpds .timeline-axis { display: grid; grid-template-columns: var(--label-width) minmax(0,1fr); }
.fpds #timeline-ticks { display: flex; justify-content: space-between; font: .875rem/1.5 var(--fp-font-mono); color: var(--fp-text-muted); padding-block-start: .25rem; }
.fpds #timeline-ticks > span { white-space: nowrap; }
.fpds .timeline-key { display: flex; justify-content: flex-end; gap: .5rem 1rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: .875rem; color: var(--fp-text-muted); }
.fpds .timeline-key > span { display: inline-flex; align-items: center; gap: .5rem; }
.fpds .timeline-key i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; }
.fpds .user-key { background: var(--fp-success); }
.fpds .voice-key { background: var(--fp-action); }
.fpds .backend-key, .fpds .display-key { background: var(--amber); }
.fpds .display-key { border-radius: 0 !important; transform: rotate(45deg); }
.fpds .detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; margin-block-start: 2rem; }
.fpds .detail-panel .panel-heading { border-block-end: 1px solid var(--fp-divider); }
.fpds .count-badge { font: 400 .875rem/1.5 var(--fp-font-mono); min-width: 1.5rem; border-radius: .25rem; color: var(--fp-text-muted); background: var(--fp-surface-subtle); text-align: center; padding: .125rem .25rem; }
.fpds .transcript-list, .fpds .event-list { height: 18rem; padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.fpds .empty-state { min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1rem 0; text-align: center; color: var(--fp-text-muted); }
.fpds .empty-state > .icon { margin-block-end: 1rem; width: 2rem; height: 2rem; }
.fpds .empty-state p { margin: 0 0 .5rem; }
.fpds .empty-state > span:last-child { font-size: .875rem; }
.fpds .empty-cross { font-size: 2rem; line-height: 1; margin-block-end: 1rem; }
.fpds .detail-footnote { border-block-start: 1px solid var(--fp-divider); margin: 0; padding: 1rem 1.5rem; color: var(--fp-text-muted); font-size: .875rem; }
.fpds .transcript-item { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; margin-block-end: 1.5rem; }
.fpds .speaker-symbol { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: #ebf4ee; color: var(--fp-success); border-radius: var(--fp-radius-control); font: 700 .875rem/1.5 var(--fp-font-display); }
.fpds .transcript-item[data-speaker="assistant"] .speaker-symbol { color: var(--fp-action-hover); background: #eaf0ff; }
.fpds .transcript-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-block-end: .25rem; }
.fpds .transcript-meta strong { font: 700 1rem/1.5 var(--fp-font-display); }
.fpds .transcript-meta time { font: .875rem/1.5 var(--fp-font-mono); color: var(--fp-text-muted); }
.fpds .transcript-text { line-height: 1.75; margin: 0; white-space: pre-wrap; }
.fpds .event-item { display: grid; grid-template-columns: 3rem .5rem minmax(0,1fr); gap: .75rem; align-items: start; margin-block-end: 1.5rem; }
.fpds .event-time { color: var(--fp-text-muted); font: .875rem/1.7 var(--fp-font-mono); }
.fpds .event-marker { width: .5rem; height: .5rem; border: 1.5px solid var(--amber); border-radius: 50%; margin-block-start: .4rem; }
.fpds .event-item[data-status="running"] .event-marker { animation: status-blink 1.1s infinite; }
.fpds .event-item[data-status="completed"] .event-marker { background: var(--amber); }
.fpds .event-item[data-status="failed"] .event-marker { border-color: var(--fp-error); background: var(--fp-error); }
.fpds .event-item[data-kind="display"] .event-marker { border-radius: 0; transform: rotate(45deg); background: var(--amber); }
.fpds .event-label { font-weight: 700; }
.fpds .event-detail { color: var(--fp-text-muted); font-size: .875rem; margin-block-start: .25rem; white-space: pre-wrap; }
.fpds .event-status { display: inline-block; font-size: .875rem; margin-inline-start: .5rem; color: var(--amber); font-weight: 400; }
.fpds .event-item[data-status="failed"] .event-status { color: #b60000; }
.fpds .settings-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-block-end: 1.5rem; }
.fpds .settings-heading h2 { margin: 0; }
.fpds #settings-description { color: var(--fp-text-muted); margin-block-end: 1.5rem; }
.fpds .settings-model-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: 1.5rem; }
.fpds .required-label { font-weight: 400; font-size: .875rem; padding: .125rem .375rem; background: #e9effa; color: var(--fp-action-hover); margin-inline-start: .25rem; border-radius: .25rem; }
.fpds .settings-note { display: flex; align-items: start; gap: .75rem; background: var(--fp-surface-subtle); padding: 1rem; border-radius: var(--fp-radius-control); color: var(--fp-text-muted); }
.fpds .settings-note p { margin: 0; }
.fpds .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.fpds .session-settings-note { background: #fff7e8; color: #82581c; border-radius: var(--fp-radius-control); padding: 1rem; }
.fpds .key-vault { margin-block-end: 1.5rem; padding: 1.5rem; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-control); background: var(--fp-surface-subtle); }
.fpds .vault-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: 1.125rem; }
.fpds .vault-heading h3 > span { font-size: 1rem; font-weight: 400; color: var(--fp-text-muted); }
.fpds .vault-heading p, .fpds .vault-description, .fpds .vault-footnote, .fpds .vault-feedback { color: var(--fp-text-muted); margin: .5rem 0 0; overflow-wrap: anywhere; }
.fpds .vault-heading p { color: var(--fp-text); }
.fpds .vault-footnote { font-size: .875rem; }
.fpds .vault-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: 1rem; }
.fpds .vault-editor { margin-block-start: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--fp-divider); }
.fpds .vault-editor-title { margin: 0 0 1rem; color: var(--fp-text); }
.fpds .vault-feedback { padding: .75rem 1rem; border: 1px solid #9db9a7; background: #eff8f1; color: var(--fp-success); border-radius: var(--fp-radius-control); }
.fpds .vault-feedback[data-tone="error"] { border-color: #b57272; background: #fff5f5; color: #9c2020; }
.fpds .key-vault[aria-busy="true"] { cursor: progress; }
.fpds .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fpds .noscript { padding: 1.5rem; background: #fff7e8; color: #543c17; }
@keyframes status-blink { 50% { opacity: .4; } }
@media (max-width: 79.99rem) {
  .fpds .stage-grid { grid-template-columns: minmax(0,1fr); }
  .fpds .flow-panel { display: block; }
  .fpds .flow-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
  .fpds .flow-step:not(:last-child) { padding-block-end: 0; }
  .fpds .flow-step::before { display: none; }
  .fpds .detail-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 59.99rem) {
  .fpds .session-toolbar { padding: 1rem; }
}
@media (max-width: 39.99rem) {
  .fpds .recording-toolbar, .fpds .recording-player-panel, .fpds .recording-recovery { padding: 1rem; }
  .fpds .recording-controls .fp-button, .fpds .recording-row-actions .fp-button { min-width: 0; }
  .fpds .fpa-main .fpa-page-heading h1 { font-size: 2rem; }
  .fpds .session-actions { flex: 1 1 100%; }
  .fpds .session-actions .fp-button { flex: 1 1 auto; }
  .fpds .session-status { margin-inline-start: 0; }
  .fpds .panel-heading { padding: .75rem 1rem; gap: .5rem; }
  .fpds .panel-heading > .micro-label { display: none; }
  .fpds .display-stage { margin-inline: .5rem; padding: 1.5rem; }
  .fpds .stage-message { font-size: 2.25rem; }
  .fpds .display-caption { padding: 1rem; }
  .fpds .flow-panel { padding: 1.5rem 1rem; }
  .fpds .flow-list { display: block; }
  .fpds .flow-step:not(:last-child) { padding-block-end: 1.5rem; }
  .fpds .flow-step:not(:last-child)::before { display: block; }
  .fpds .timeline { --label-width: 0rem; }
  .fpds .timeline-lane { grid-template-columns: minmax(0,1fr); }
  .fpds .lane-label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-inline-end: 0; border-block-end: 1px solid var(--fp-divider); padding: .75rem 1rem; }
  .fpds .lane-label > span:last-child { flex: 1 1 auto; }
  .fpds .lane-dot { margin: 0; flex: 0 0 auto; }
  .fpds .timeline-key { justify-content: flex-start; }
  .fpds .transcript-list, .fpds .event-list { padding: 1rem; height: 20rem; }
  .fpds .detail-footnote { padding: 1rem; }
  .fpds .settings-model-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .fpds .key-vault { padding: 1rem; }
  .fpds .vault-actions { gap: .75rem; }
  .fpds .vault-actions .fp-button { min-width: 0; }
}
/* Measure the usable panel, including enlarged text and the expanded sidebar. */
@container fp-timeline (max-width: 36rem) {
  .fpds .timeline { --label-width: 0rem; }
  .fpds .timeline-lane { grid-template-columns: minmax(0,1fr); }
  .fpds .lane-label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-inline-end: 0; border-block-end: 1px solid var(--fp-divider); padding: .75rem 1rem; }
  .fpds .lane-label > span:last-child { flex: 1 1 auto; }
  .fpds .lane-dot { margin: 0; flex: 0 0 auto; }
  .fpds .timeline-key { justify-content: flex-start; }
  .fpds #timeline-ticks > span:not(:nth-child(3n + 1)) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fpds .connection-badge .status-dot, .fpds .event-marker { animation: none !important; }
}
@media (forced-colors: active) {
  .fpds .status-dot, .fpds .lane-dot, .fpds .flow-indicator, .fpds .caption-dot { background: CanvasText !important; }
  .fpds .display-stage { border: 1px solid CanvasText; }
  .fpds .icon-button { border: 1px solid ButtonText; }
}