/* Composition Review: authored work left, read-only context right. */
.studio-workspace { background: var(--white); font-size: 15px; }
.studio-workspace .app-header {
  height: 56px; min-height: 56px; padding: 0 28px; gap: 26px;
  background: #e5f3fc; color: var(--ink); border-bottom: 1px solid #d6e8f4;
}
.studio-workspace .brand { font-size: 20px; letter-spacing: -.6px; gap: 4px; white-space: nowrap; }
.studio-workspace .brand span { color: #176b9f; }
.app-navigation { display: flex; align-items: stretch; align-self: stretch; gap: 25px; margin: 0 auto; }
.app-navigation a { display: flex; align-items: center; color: #444b54; font-size: 14px; text-decoration: none; border-bottom: 3px solid transparent; padding: 3px 0 0; }
.app-navigation a[aria-current=page] { color: #176b9f; border-bottom-color: var(--blue); font-weight: 650; }
.workspace-skip { position: fixed; top: -100px; left: 12px; z-index: 100; background: white; padding: 12px; }
.workspace-skip:focus { top: 8px; }
.account-menu { position: relative; font-size: 13px; }
.account-menu summary { cursor: pointer; padding: 10px 5px; }
.account-menu[open] { z-index: 30; }
.account-popover { position: absolute; right: 0; top: 38px; width: 270px; max-width: 85vw; max-height: 65dvh; overflow-y: auto; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px #1f212318; }
.account-menu .account-controls { padding: 0 0 14px; margin-bottom: 12px; display: flex; align-items: stretch; flex-direction: column; gap: 12px; font-size: 13px; }
.account-menu:not([open]) .account-popover { display: none; }
.account-popover > a { display: block; }
.project-bar { flex-shrink: 0; display: flex; align-items: center; gap: 18px; min-height: 74px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: white; }
.project-identity { flex: 1; min-width: 180px; }
.project-bar h1 { margin: 0; }
.project-state { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.project-bar #projectTitle { font-size: 21px; line-height: 1.35; letter-spacing: -.45px; font-weight: 650; width: 100%; max-width: none; border: 1px solid transparent; padding: 4px 0; background: transparent; }
.project-bar #projectTitle:hover { border-bottom-color: #b6cddb; }
.project-bar .header-actions { gap: 12px; flex-shrink: 0; }
.workspace-view { display: flex; gap: 0; border: 1px solid #d2d6dc; border-radius: 6px; padding: 2px; }
.workspace-view button { border: 0; border-radius: 4px; background: transparent; min-width: 52px; min-height: 32px; padding: 6px 10px; font-size: 13px; }
.workspace-view button[aria-pressed=true] { background: var(--pale-blue); color: #175b84; font-weight: 650; }
.command-menu { position: relative; }
.command-menu > summary { cursor: pointer; list-style-position: inside; min-height: 38px; padding: 8px 12px; border: 1px solid #d2d6dc; border-radius: 6px; background: white; font-size: 13px; }
.command-menu[open] { z-index: 20; }
.menu-content { position: absolute; top: calc(100% + 5px); right: 0; width: 230px; max-height: 65dvh; overflow-y: auto; padding: 6px; display: grid; gap: 2px; background: white; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 8px 24px #1f212318; }
.menu-content button { width: 100%; justify-content: flex-start; text-align: left; border: 0; min-height: 40px; padding: 9px 12px; font-size: 13px; background: white; }
.menu-content button:hover { background: var(--pale-blue); }
.studio-workspace .workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); width: 100%; max-width: none; min-height: 0; height: auto; flex: 1; }
.studio-workspace .work-column { padding: 22px 32px 28px; background: white; min-width: 0; }
.studio-workspace .sources-column { background: #fafbfc; border-left: 1px solid var(--line); min-width: 0; }
.work-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-heading .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
.composition-outline { margin-bottom: 20px; color: var(--muted); font-size: 12px; }
.composition-outline > summary { cursor: pointer; padding: 4px 0; width: fit-content; }
.history-controls { display: flex; gap: 4px; }
.history-controls button { font-size: 12px; min-height: 30px; border-color: transparent; background: transparent; padding: 5px 7px; }
.studio-workspace .block-navigation { gap: 0; margin: 8px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.block-navigation button { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 12px; min-height: 40px; max-width: 260px; flex-shrink: 0; font-size: 13px; }
.block-navigation button[aria-current=true] { color: #176b9f; background: transparent; border-bottom-color: var(--blue); }
.composition-block { min-width: 0; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 24px; margin: 0 0 24px; background: transparent; border-radius: 0; }
.composition-block.is-selected { border-left: 3px solid var(--blue); padding-left: 18px; }
.composition-block.is-selected:has(.block-editor:not([hidden])) { padding: 16px 18px 20px; background: #f5faff; border: 1px solid #c6e3f7; border-left: 3px solid var(--blue); border-radius: 5px; }
.composition-block-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; background: transparent; border: 0; }
.composition-block-kind { font-size: 11px; color: var(--muted); font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
.composition-block-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.composition-block-actions button { font-size: 12px; border: 0; min-height: 32px; padding: 6px 8px; color: #176b9f; background: transparent; }
.composition-block-actions button[aria-pressed=true] { background: var(--pale-blue); }
.composition-pending { color: var(--amber); background: #fff4da; border-radius: 12px; padding: 4px 8px; font-size: 11px; }
.composition-block-body { font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 78ch; }
.composition-block-body h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.6px; margin: 0 0 16px; }
.composition-block-body h3 { font-size: 18px; margin: 0 0 14px; }
.composition-block-body p { margin: 10px 0; }
.composition-block-body video { display: block; width: 100%; max-height: 320px; background: #1f2123; margin: 12px 0; }
.composition-block-body button { margin: 6px 0 12px; font-size: 12px; }
.composition-clip { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf0f3; padding: 10px 0; white-space: normal; }
.composition-clip strong { display: block; font-size: 14px; font-weight: 600; }
.composition-clip small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.composition-clip button { flex-shrink: 0; margin: 0; }
.composition-clip-transcript { font-size: 12px; color: var(--muted); margin-top: 12px; white-space: normal; }
.composition-clip-transcript summary { cursor: pointer; }
.composition-clip-transcript p { font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.composition-media { max-width: none; white-space: normal; border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.composition-media.has-output { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(180px,1fr); gap: 0 14px; }
.composition-media.has-output > h3, .composition-media.has-output > details { grid-column: 1 / -1; }
.composition-media.has-output > video { grid-column: 1; grid-row: 2; margin: 0; aspect-ratio: 16 / 9; max-height: 220px; object-fit: contain; }
.composition-media.has-output > .composition-playlist { grid-column: 2; grid-row: 2; min-width: 0; }
.composition-playlist .composition-clip { gap: 8px; padding: 8px 0; }
.composition-playlist .composition-clip:first-child { padding-top: 0; }
.composition-playlist .composition-clip button { padding: 6px; font-size: 11px; }
.block-editor { min-width: 0; }
.block-options { margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.block-options > summary { cursor: pointer; width: fit-content; padding: 5px 0; }
.block-options[open] { border: 1px solid var(--line); padding: 10px; border-radius: 6px; }
.block-options .selected-block-heading { border: 0; padding-top: 6px; }
.studio-workspace .context-controls { margin: 8px 0 0; }
.studio-workspace #textFormat { font-size: 12px; color: var(--muted); line-height: 1.6; }
.studio-workspace #authoredText { min-height: 180px; padding: 16px; margin: 8px 0 10px; font-size: 15px; line-height: 1.75; resize: vertical; border-color: #d2d9df; }
.studio-workspace #acceptedText { background: #fafbfc; border-color: #e6e9ed; padding: 16px; font-size: 15px; line-height: 1.75; }
.studio-workspace #textPane > h3 { color: var(--muted); font-size: 12px; font-weight: 550; }
.studio-workspace #textPane > div:not(#acceptedText):not(#imageTools) { display: flex; gap: 8px; flex-wrap: wrap; }
.add-block-menu { display: inline-block; margin: 0 0 22px; }
.add-block-menu > summary { background: var(--pale-blue); color: #176b9f; border-color: #cae3f4; }
.add-block-menu .menu-content { left: 0; right: auto; top: auto; bottom: calc(100% + 5px); }
.studio-workspace .draft-status { font-size: 12px; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--line); gap: 12px; }
.studio-workspace .work-footer { margin-top: 16px; font-size: 11px; padding: 0; gap: 8px 16px; flex-wrap: wrap; }
.work-footer #saveState { color: #4b626f; }
.work-footer .connection { display: block; font-size: 11px; color: var(--muted); max-width: none; }
.work-footer .footer-tag { flex-basis: 100%; max-width: none; color: var(--muted); font-size: 10px; }
.studio-workspace .source-header { padding: 24px 24px 12px; align-items: center; }
.source-header .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
.source-header h2 { font-size: 22px; }
.source-header button { font-size: 13px; }
.studio-workspace .source-kinds { padding: 0 24px; gap: 18px; margin: 0; border-bottom: 1px solid var(--line); }
.source-kinds button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 10px 0; font-size: 13px; }
.source-kinds button[aria-pressed=true] { background: transparent; color: #176b9f; border-bottom-color: var(--blue); }
.studio-workspace .source-nav { padding: 10px 24px; font-size: 12px; background: transparent; }
.source-nav select { font-size: 12px; max-width: 240px; padding: 7px; }
.studio-workspace .source-detail, .studio-workspace .dashboard, .studio-workspace .browser-panel { padding: 20px 24px; }
.studio-workspace .browser-panel { background: transparent; }
.source-title h3 { font-size: 21px; line-height: 1.35; }
.studio-workspace #sourceVideo { max-height: 285px; background: #1f2123; border-radius: 5px; }
.studio-workspace .selection-toolbar { padding: 12px 0; background: transparent; border: 0; gap: 12px; }
.selection-toolbar strong { font-size: 13px; }
.selection-toolbar small { font-size: 12px; line-height: 1.5; }
.transcript-heading { flex-wrap: wrap; gap: 8px; }
.transcript-heading h4 { margin-right: auto; font-size: 15px; }
.transcript-heading input { min-width: 120px; }
.studio-workspace .transcript { max-height: 60dvh; border: 0; border-top: 1px solid var(--line); background: white; }
.studio-workspace .paragraph { padding: 14px 8px; grid-template-columns: 18px 64px minmax(0,1fr); border-bottom: 1px solid #edf0f3; }
.paragraph p { font-size: 14px; line-height: 1.7; }
.paragraph time { font-size: 12px; color: #5e6d7c; }
.paragraph:hover { background: #f4f9fc; }
.paragraph.selected { background: #e4f2fb; border-left-color: var(--blue); }
.paragraph.playing { background: #fff7e7; border-left-color: #af7d2c; }
.studio-workspace .word-paragraph { border-color: #edf0f3; }
.transcript-word.selected, .transcript-word[aria-pressed=true] { background: #d8edfc; color: var(--ink); }
.studio-workspace .word-data-controls { margin-top: 8px; }
.word-data-controls button { font-size: 11px; min-height: 30px; }
.studio-workspace .preview-wrap { border-radius: 5px; }
.studio-workspace .preview-empty { background: #f2f7fb; color: var(--ink); min-height: 180px; }
.preview-empty .play-symbol { display: none; }
.preview-empty h2 { font-size: 20px; }
.studio-workspace .sequence-bar { padding: 12px 0; background: transparent; border: 0; font-size: 13px; }
.studio-workspace .clip-card { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; background: white; }
.studio-workspace .clip-label { font-size: 15px; min-height: 38px; border-color: #d7dee5; }
.clip-number { color: #176b9f; background: var(--pale-blue); }
.studio-workspace .clip-source { color: var(--muted); font-size: 12px; margin: 8px 0; }
.studio-workspace .clip-quote { font-size: 13px; line-height: 1.65; color: #4a535e; margin-bottom: 12px; }
.studio-workspace .clip-boundaries { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.clip-inspector { font-size: 12px; }
.clip-inspector > summary { cursor: pointer; color: #176b9f; padding: 6px 0 12px; }
.studio-workspace .clip-actions { flex-wrap: wrap; justify-content: flex-end; }
.clip-boundaries input { font-size: 13px; min-height: 38px; }
.studio-workspace .clip-bottom { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.clip-bottom button, .clip-actions button { font-size: 12px; min-height: 32px; }
.studio-workspace .render-panel { background: var(--pale-blue); border: 1px solid #d1e5f3; border-radius: 6px; padding: 16px; margin-top: 20px; }
.studio-workspace .drafting-pane { margin: 0; padding: 0; background: transparent; border: 0; }
.studio-workspace #billText { min-height: 150px; font-size: 16px; line-height: 1.7; margin: 8px 0; }
.accepted-copy { margin-top: 16px; color: var(--muted); font-size: 12px; }
.accepted-copy > summary { cursor: pointer; padding: 4px 0; }
.studio-workspace .captured-reading { font-size: 16px; line-height: 1.8; }
.studio-workspace .direct-reading { background: white; border-color: #d9e0e7; font-size: 16px; line-height: 1.8; }
.studio-workspace .reference-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; background: transparent; }
.studio-workspace .reference-card h4 { font-size: 15px; }
.studio-workspace .studio-sharing[data-visibility=private]:not(:has([data-blog-link])) { display: none; }
.studio-workspace .studio-sharing[data-visibility=private] { background: #f4f8fc; color: var(--muted); padding: 8px 28px; font-size: 12px; }
.studio-workspace .startup-stages:not(:has([data-state=loading])):not(:has([data-state=error])):not(:has([data-state=cancelled])) { display: none; }
.studio-workspace .operation-status[data-state=complete] { display: none; }
.studio-workspace .operation-status { flex-shrink: 0; }
.studio-workspace .result-identity { font-size: 11px; }
.studio-workspace .collection-banner { padding: 12px 28px; }
.collection-banner h2 { font-size: 18px; margin: 3px 0; }
.collection-banner p { margin: 2px 0; font-size: 12px; }
@media (max-width: 1100px) {
  .composition-media.has-output { display: block; }
  .composition-media.has-output > video { margin-bottom: 12px; }
  .studio-workspace .app-header { padding: 0 18px; gap: 16px; }
  .app-navigation { gap: 18px; }
  .project-bar { padding: 12px 18px; flex-wrap: wrap; gap: 10px; }
  .project-bar #projectTitle { font-size: 19px; }
  .project-bar .header-actions { gap: 8px; }
  .studio-workspace .work-column { padding: 20px; }
  .studio-workspace .workspace { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .studio-workspace .source-header, .studio-workspace .source-detail, .studio-workspace .dashboard, .studio-workspace .browser-panel { padding-left: 18px; padding-right: 18px; }
  .studio-workspace .selection-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 790px) {
  .studio-workspace .app-header { height: auto; min-height: 56px; padding: 10px 16px; flex-wrap: wrap; gap: 8px 16px; }
  .studio-workspace .brand { font-size: 18px; }
  .app-navigation { order: 3; width: 100%; gap: 24px; min-height: 40px; }
  .account-menu { margin-left: auto; }
  .project-bar { padding: 12px 16px; }
  .project-identity { flex-basis: 100%; }
  .project-bar .header-actions { margin: 0; width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .project-bar #projectTitle { font-size: 21px; }
  .project-bar button { min-height: 40px; }
  .project-bar #previewComposition { font-size: 12px; padding: 8px 10px; }
  .workspace-view button { min-width: 45px; font-size: 12px; padding: 6px; }
  .studio-workspace .workspace { display: block; overflow: hidden; }
  .studio-workspace .work-column, .studio-workspace .sources-column { padding-top: 16px; height: 100%; min-height: 0; overflow-y: auto; }
  .studio-workspace .work-column { padding-left: 16px; padding-right: 16px; }
  .studio-workspace .sources-column { display: none; border: 0; }
  .studio-workspace .workspace.show-sources .work-column { display: none; }
  .studio-workspace .workspace.show-sources .sources-column { display: block; }
  .studio-workspace .mobile-tabs { display: flex; flex-shrink: 0; padding: 6px 16px; background: #f6f9fc; }
  .mobile-tabs button { min-height: 38px; border-color: transparent; color: var(--muted); background: transparent; }
  .mobile-tabs button.active { background: #dfeffc; color: #154f73; border-color: #badcf3; }
  .composition-block-header { gap: 6px; }
  .composition-block.is-selected { padding-left: 12px; }
  .composition-block-actions button { min-height: 38px; }
  .account-menu > a { position: static; transform: none; }
  .studio-workspace .paragraph { grid-template-columns: 18px 48px minmax(0,1fr); gap: 6px; }
  .studio-workspace .block-navigation { margin-bottom: 18px; }
}

.studio-workspace .brand.studio-brand { gap: 9px; }
@media (max-width: 420px) { .studio-workspace .brand.studio-brand { gap: 7px; } }

#studioRoot{display:contents}.controller-host{display:contents}