/* Authored scenes with one shared playback clock; local prototype only. */
#story-playback[hidden] { display: none; }
#demo-dialog.is-storyboard { container: storyboard / inline-size; }
#demo-dialog.is-storyboard .story-playback { margin: 24px 0 18px; border: 1px solid #cbd7d1; background: #fff; }
#demo-dialog.is-storyboard .story-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; }
#demo-dialog.is-storyboard .story-kicker { display: block; color: #557068; font: 10px/1.6 var(--mono, monospace); letter-spacing: .08em; }
#demo-dialog.is-storyboard .story-toolbar p { margin: 5px 0 0; color: #122e26; font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.03em; }
#demo-dialog.is-storyboard .story-transport { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
#demo-dialog.is-storyboard #story-clock { color: #526a63; font: 12px/1.5 var(--mono, monospace); font-variant-numeric: tabular-nums; white-space: nowrap; }
#demo-dialog.is-storyboard [data-story-play] { min-width: 124px; min-height: 46px; padding: 12px 18px; border: 1px solid #123e33; border-radius: 3px; background: #123e33; color: #fff; font-size: 14px; font-weight: 550; }
#demo-dialog.is-storyboard [data-story-play]:hover { background: #1c5b4b; }
#demo-dialog.is-storyboard [data-story-play]:disabled { background: #eef1eb; border-color: #cbd7d1; color: #53665d; cursor: default; }
#demo-dialog.is-storyboard .story-timeline { height: 3px; background: #e8ede7; }
#demo-dialog.is-storyboard #story-meter { display: block; height: 100%; width: 0; background: #009e8c; }
#demo-dialog.is-storyboard #story-scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
#demo-dialog.is-storyboard .story-scene { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; min-height: 81px; padding: 15px 17px; border: 0; border-right: 1px solid #e2e8e2; border-bottom: 2px solid transparent; background: #fff; color: #53665d; text-align: left; word-break: normal; hyphens: none; }
#demo-dialog.is-storyboard .story-scene:last-child { border-right: 0; }
#demo-dialog.is-storyboard .story-scene span { font: 11px/1.4 var(--mono, monospace); color: #58786d; }
#demo-dialog.is-storyboard .story-scene strong { font-size: 14px; line-height: 1.4; font-weight: 550; }
#demo-dialog.is-storyboard .story-scene:hover { background: #f7f8f3; }
#demo-dialog.is-storyboard .story-scene.is-current { background: #f0f6f0; color: #113c30; border-bottom-color: #009e8c; }
#demo-dialog.is-storyboard .story-scene.is-complete span { color: #007f70; }
#demo-dialog.is-storyboard .story-mobile-scene { display: none; }
#demo-dialog.is-storyboard .story-caption { margin: 0; padding: 18px 22px; border-top: 1px solid #dce5dd; color: #354e43; background: #f9faf6; font-size: 15px; line-height: 1.7; }
#demo-dialog.is-storyboard .na-rail { display: none; }
#demo-dialog.is-storyboard .na-layout { display: block; }
#demo-dialog.is-storyboard .na-motion-controls [data-na-toggle] { display: none; }
#demo-dialog.is-storyboard .demo-modal-controls > div { display: none; }
#demo-dialog.is-storyboard .demo-modal-controls { display: flex; justify-content: space-between; }
#demo-dialog.is-storyboard .na-inbox-item { padding: clamp(20px, 3vw, 34px); border: 1px solid #cddbd3; border-left: 3px solid #008f7e; border-radius: 4px; background: linear-gradient(135deg, #fafbf6, #f2f6f0); }
#demo-dialog.is-storyboard .na-inbox-item > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#demo-dialog.is-storyboard .na-inbox-item > div:first-child > small { font: 10px/1.6 var(--mono, monospace); color: #557068; letter-spacing: .06em; }
#demo-dialog.is-storyboard .na-inbox-item > strong { display: block; margin: 23px 0 5px; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; color: #213c31; }
#demo-dialog.is-storyboard .na-inbox-item > p { color: #52695e; font-size: 14px; line-height: 1.6; }
#demo-dialog.is-storyboard .na-request-amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 20px; color: #133c30; font-size: clamp(36px, 5vw, 62px); line-height: 1.1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
#demo-dialog.is-storyboard .na-request-amount span { font: 12px/1.5 var(--mono, monospace); letter-spacing: 0; color: #587368; }
#demo-dialog.is-storyboard .na-inbox-reference { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-top: 18px; border-top: 1px solid #d6e1d7; font-size: 14px; color: #52695e; }
#demo-dialog.is-storyboard .na-inbox-reference code { font: 14px/1.5 var(--mono, monospace); color: #705728; }
#demo-dialog.is-storyboard .na-approval-record > .na-facts { margin-top: 20px; }
@container storyboard (max-width: 960px) {
  #demo-dialog.is-storyboard #story-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #demo-dialog.is-storyboard .story-scene { min-height: 70px; }
  #demo-dialog.is-storyboard .story-scene:nth-child(3) { border-right: 0; }
}
@container storyboard (max-width: 570px) {
  #demo-dialog.is-storyboard .story-toolbar { display: block; padding: 14px 16px; }
  #demo-dialog.is-storyboard .story-toolbar > div:first-child { display: none; }
  #demo-dialog.is-storyboard .story-transport { justify-content: space-between; }
  #demo-dialog.is-storyboard .story-caption { padding: 14px 16px; font-size: 14px; }
  #demo-dialog.is-storyboard #story-scenes { display: none; }
  #demo-dialog.is-storyboard .story-mobile-scene { display: block; padding: 12px 16px; }
  #demo-dialog.is-storyboard .story-mobile-scene > span { display: block; margin-bottom: 7px; color: #557068; font: 10px/1.5 var(--mono, monospace); letter-spacing: .04em; }
  #demo-dialog.is-storyboard #story-scene-select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #b9d0c2; border-radius: 3px; padding: 10px; background: #f8faf5; color: #173e30; font: 14px/1.5 'Geist', Arial, sans-serif; }
  #demo-dialog.is-storyboard #story-scene-select:focus-visible { outline: 3px solid #008d7b; outline-offset: 3px; }
}