@layer interface {
  .example-selector { display: flex; gap: 4px; margin: 8px 0; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 6px; background: #f5f5edcc; }
  .example-selector button { min-height: 36px; padding: 10px 18px; border-radius: 3px; font: inherit; font-size: 14px; background: transparent; color: var(--muted); }
  .example-selector button[aria-pressed="true"] { color: white; background: var(--accent); }
  .financial-title { font-size: 24px; font-weight: 400; line-height: 1.3; margin: 28px 0 0; }
  .has-workbench .story-flow, .has-workbench .story-ending, .has-workbench .panel-copy, .has-workbench .financial-title { display: none; }
  .immersive .has-workbench h2 { font-size: 28px; }
  .example-workbench { margin-top: 10px; color: var(--text); }
  .example-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .example-toolbar > span { font-size: 10px; letter-spacing: .08em; color: var(--muted); }
  .example-playback { background: transparent; border-bottom: 1px solid var(--line); min-height: 32px; padding: 4px 0 4px 10px; color: var(--accent); font-size: 13px; white-space: nowrap; }
  .example-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 12px 0 18px; }
  .example-track li { padding-top: 8px; border-top: 2px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.4; }
  .example-track li[data-state="active"] { border-color: #aa7635; color: var(--text); }
  .example-track li[data-state="done"] { border-color: var(--accent); color: var(--accent); }
  .example-step-number { display: block; font-size: 10px; margin-bottom: 4px; }
  .example-track li[data-state="done"] .example-step-number::after { content: ' ✓'; }
  .example-body { padding: 14px; background: #fffef8e8; border: 1px solid var(--line); border-radius: 6px; min-height: 215px; }
  .example-headline { font-size: 20px; line-height: 1.25; font-weight: 400; letter-spacing: -.035em; margin-bottom: 8px; }
  .example-operation-copy, .example-result-copy, .example-draft-preview { font-size: 16px; line-height: 1.6; color: var(--muted); }
  .example-draft-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
  .example-facts { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 16px 0 12px; }
  .example-facts li { padding: 6px 9px; background: #14685b0c; border: 1px solid #14685b26; border-radius: 3px; color: var(--accent); font-size: 13px; line-height: 1.4; }
  .example-source-caption { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 12px; }
  .example-changes { margin: 0 0 10px; }
  .example-changes > div { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
  .example-proposal .example-changes > div { padding-block: 4px; }
  .example-changes dt { font-size: 12px; color: var(--muted); }
  .example-changes dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .example-before, .example-after { display: block; }
  .example-before { color: var(--muted); font-size: 12px; }
  .example-before::before { content: 'Före: '; }
  .example-after { color: var(--accent); }
  .example-approve { width: 100%; min-height: 48px; padding: 12px; margin-top: 10px; border-radius: 3px; background: var(--accent); color: white; font-size: 15px; }
  /* The proposal scrolls in its own row; the decision never overlaps it. */
  .immersive .app[data-view="story"] .panels.has-decision { display: flex; flex-direction: column; overflow: hidden; }
  .immersive .has-decision #story-content { min-height: 0; overflow: auto; scrollbar-width: thin; padding: 6px; }
  .immersive .has-decision .sheet-toggle { flex-shrink: 0; position: static; }
  .example-actions { flex-shrink: 0; max-width: 460px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fffef8; }
  .example-actions .example-approve { margin: 0; }
  .immersive[data-sheet="scene"] .example-actions { display: none; }
  .example-approve:disabled { background: #dfe5dc; color: #52635b; cursor: not-allowed; }
  .example-editor summary, .example-receipt summary, .example-sources summary { cursor: pointer; color: var(--accent); font-size: 14px; line-height: 1.5; padding: 12px 0; min-height: 44px; }
  .example-editor { margin-top: 6px; }
  .draft-label { display: block; font-size: 13px; margin-bottom: 8px; }
  .example-draft { width: 100%; min-height: 155px; padding: 12px; resize: vertical; color: var(--text); background: #fffef8; border: 1px solid var(--line); border-radius: 3px; font: 400 16px/1.6 Space, Arial, sans-serif; }
  .example-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 10px; }
  .example-sources { border-bottom: 1px solid var(--line); margin-top: 8px; }
  .example-source { margin: 0 0 10px; padding: 0 12px; background: #fffef8; border: 1px solid var(--line); border-radius: 3px; }
  .source-paper { padding: 4px 0 16px; }
  .source-paper p { font-size: 15px; line-height: 1.7; margin-top: 12px; }
  .source-paper .source-type { font-size: 11px; color: var(--muted); margin: 0; }
  .source-paper mark { background: #e7d7a770; color: inherit; padding: 2px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .example-receipt { margin-top: 10px; }
  .example-receipt blockquote { margin: 12px 0; padding-left: 12px; border-left: 2px solid var(--line); }
  .example-task { font-size: 14px; line-height: 1.6; margin-top: 12px; }
  .example-body .text-action { margin-top: 8px; background: transparent; color: var(--accent); font-size: 14px; text-align: left; }
  .example-contact-copy { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 16px; }
  @media (max-width: 700px) {
    .immersive .has-workbench h2 { font-size: 25px; }
    .immersive .has-workbench h2 br { display: none; }
    .immersive .has-workbench .eyebrow { margin-bottom: 8px; }
    .example-selector { margin: 10px 0; }
    .example-selector button { padding: 8px 15px; font-size: 13px; }
    .example-workbench { margin-top: 8px; }
    .example-toolbar > span { font-size: 8px; }
    .example-track { gap: 8px; margin: 6px 0 12px; }
    .example-track li { font-size: 10px; }
    .example-step-number { display: none; }
    .example-body { padding: 14px; min-height: 190px; }
    .example-headline { font-size: 18px; }
    .example-operation-copy, .example-result-copy, .example-draft-preview { font-size: 14px; }
    .example-facts { margin-top: 12px; }
    .example-facts li { font-size: 11px; }
    .example-changes dd { font-size: 14px; }
    .example-approve { font-size: 14px; }
    .example-note { font-size: 10px; }
    .immersive:not([data-sheet="expanded"]):not([data-sheet="scene"]) .app[data-view="story"] .panels:has(.has-workbench:not([hidden])) { max-height: 52svh; }
    .immersive[data-sheet="expanded"] .app[data-view="story"] .panels:has(.has-workbench:not([hidden])) { max-height: 60svh; }
  }
}