/* Shared components. All appearance comes from the registered --pf-* theme tokens. */
:root { --studio-border: var(--pf-line); --studio-soft: var(--pf-soft); }
body { background: var(--pf-stage); color: var(--pf-ink); font-family: var(--pf-font-body); }
button, select, input, textarea { border-color: var(--pf-line); border-radius: var(--pf-control-radius); background: var(--pf-surface); color: var(--pf-ink); }
button:hover, select:hover { background: var(--pf-soft); }
input:hover, textarea:hover, select:hover { border-color: var(--pf-action); }
button:active:not(:disabled) { transform: translateY(1px); }
label, .hint, .section-label, .eyebrow, .brand-caption, #save-status,
.sidebar-foot, .sidebar-foot small, .workspace-footer, .page-heading, .canvas-caption,
.page-card small, .project-card small, .character-card small, .asset-card small,
.chosen-character small, .library-section-heading span, .empty-state p,
.dialog-footer small, .dialog-footer > span, .guide-step p, .guide-progress,
.help-intro p, .help-steps p, .text-tools small, .export-options small,
.reader-option p, .reader-option-icon, #reader-position, .reader-settings-note,
.layout-editor-toolbar > span, .page-management > summary { color: var(--pf-muted); }
.button--primary, .button--primary:hover {
  background: var(--pf-primary); color: var(--pf-primary-ink);
  border: var(--pf-frame-width) solid var(--pf-primary-border); box-shadow: var(--pf-button-shadow);
}
.button--primary:hover { filter: brightness(.97); }
.button--danger { color: var(--pf-danger); }
.app-header, .library-sidebar, .inspector, .inspector-heading, .quick-tools,
.modal-top, .dialog-footer, dialog, .player-controls, .header-more > summary,
.header-more > div, .project-actions summary, .project-actions details > div {
  background: var(--pf-surface); border-color: var(--pf-line); color: var(--pf-ink);
}
.app-header { border-bottom: var(--pf-frame-width) solid var(--pf-frame-color); height: var(--studio-header); gap: 18px; }
.brand { font-family: var(--pf-font-display); font-weight: var(--pf-heading-weight); text-transform: var(--pf-heading-case); letter-spacing: -.5px; font-size: 26px; line-height: 1.1; }
.brand-caption { font-family: var(--pf-font-body); font-size: 8px; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; line-height: 1.5; margin-top: 5px; }
.brand-mark i, .brand-mark i:first-child { background: var(--pf-primary); border: var(--pf-brand-mark-border); }
.brand-mark i:last-child { background: var(--pf-action); }
.project-heading { border-color: var(--pf-line); }
.project-heading input { background: transparent; }
.library-heading h2, .inspector-heading h1, .selection-heading h2,
.modal-top strong, .settings-section h2, .help-intro h2, .character-editor h2,
.layout-panel-properties h2, .workspace-toolbar strong {
  font-family: var(--pf-font-display); font-weight: var(--pf-heading-weight);
  text-transform: var(--pf-heading-case); letter-spacing: .1px;
}
.library-heading h2 { font-size: 22px; }
.library-heading .button--compact { flex-shrink: 0; white-space: nowrap; padding-inline: 7px; }
.inspector-heading h1, .selection-heading h2 { font-size: 21px; }
.modal-top strong { font-size: 21px; }
.app-shell { grid-template-columns: 68px 264px minmax(0,1fr) 286px; }
.studio-rail { display: flex; flex-direction: column; gap: 12px; padding: 19px 6px 12px; background: var(--pf-rail); color: var(--pf-rail-ink); border-right: var(--pf-frame-width) solid var(--pf-frame-color); overflow: auto; }
.studio-rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; color: inherit; border: 1px solid transparent; font-size: 10px; min-height: 59px; padding: 8px 2px; font-weight: 500; }
.studio-rail button > span { font-size: 23px; line-height: 1; }
.studio-rail button:hover { background: color-mix(in srgb, var(--pf-rail-ink) 12%, transparent); }
.studio-rail button.is-current { background: var(--pf-rail-active); color: var(--pf-rail-selected); font-weight: 700; }
.studio-rail button:last-child { margin-top: auto; }
.library-sidebar { border-right: var(--pf-frame-width) solid var(--pf-frame-color); }
.inspector { border-left: var(--pf-frame-width) solid var(--pf-frame-color); }
#sidebar-content { padding: 19px 16px; }
.workflow-bar { display: none; }
.workspace { background: var(--pf-stage); overflow: hidden; }
.workspace-toolbar, .layout-state, .workspace-footer { background: var(--pf-stage); border-color: var(--pf-line); }
.workspace-toolbar { min-height: 70px; padding: 13px 20px; flex-wrap: wrap; }
.workspace-toolbar strong { font-size: 22px; }
.quick-tools { padding: 8px 20px; }
.quick-tools > span { color: var(--pf-ink); }
.quick-tools button { background: var(--pf-surface); border-color: var(--pf-card-border); }
.quick-tools [data-action=browse-category], .quick-tools [data-action=bubble], .quick-tools [data-action=text] { display: none; }
/* Insert tools stay in the library; contextual actions stay in the inspector. */
.quick-tools, .quick-guide { display: none; }
.quick-guide, .insert-destination, .pill, .shortcut-strip { background: var(--pf-tint); color: var(--pf-action); border-color: var(--pf-line); }
.quick-guide > summary, .insert-destination small, .guide-progress { color: var(--pf-action); }
.canvas-surround { flex: 1 1 0; min-height: 0; overflow: auto; background-color: var(--pf-stage); background-image: var(--pf-canvas-pattern); background-size: 7px 7px; padding: 22px 24px; }
.comic-page { max-width: 480px; box-shadow: var(--pf-page-shadow); font-family: system-ui, sans-serif; }
body:not(.is-preview) .comic-page { width: clamp(170px,calc((100dvh - var(--studio-header) - 300px) / var(--page-height-ratio,1.4)),480px); max-width: 100%; }
.comic-panel.is-selected, .comic-layer.is-selected, .selection-tools { outline-color: var(--pf-action); }
.selection-tools .resize-handle, .resize-handle, .draft-grip { background: var(--pf-action); }
.selection-delete { color: var(--pf-danger); background: var(--pf-surface); border-color: var(--pf-action); }
.page-strip { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 15px; background: var(--pf-surface); border-top: 1px solid var(--pf-line); flex-shrink: 0; overflow: auto; }
.page-strip-item { display: flex; align-items: center; gap: 7px; padding: 5px 9px; min-width: max-content; font-size: 11px; }
.page-strip-item img { width: 23px; height: 32px; object-fit: cover; border-radius: 2px; }
.page-strip-item.is-selected { background: var(--pf-tint); border-color: var(--pf-action); color: var(--pf-action); }
.page-strip-add { flex-shrink: 0; min-width: 35px; }
.is-preview .page-strip-add { display: none; }
.pages-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.page-card { min-width: 0; max-width: 100%; }
.page-mini { width: 100%; max-width: 86px; height: auto; aspect-ratio: 5 / 7; }
.page-card, .asset-card, .character-card, .project-card, .pose-option, .variant-editor-card,
.layout-choice, .layout-save-choices, .layout-panel-properties, .reader-option,
.voice-library-card, .text-tools button, .empty-state {
  background: var(--pf-surface); border-color: var(--pf-card-border); border-radius: var(--pf-card-radius); box-shadow: var(--pf-card-shadow);
}
.asset-card, .character-card { border-width: var(--pf-frame-width); }
.asset-card:hover { background: var(--pf-soft); border-color: var(--pf-action); }
.asset-card img, .asset-card .asset-icon, .character-card img, .character-placeholder,
.selection-image, .asset-preview, .chosen-character > div:first-child, .character-portrait,
.variant-editor-card > img, .draw-canvas { background: var(--pf-soft); color: var(--pf-muted); }
.character-card .character-edit { color: var(--pf-action); background: var(--pf-soft); border-color: var(--pf-line); }
.tile-edit { color: var(--pf-ink); background: var(--pf-surface); border-color: var(--pf-card-border); }
.character-card.is-selected, .page-card.is-selected, .project-card.is-selected, .pose-option.is-selected,
.category-tabs .is-current, .layer-row.is-selected, .layout-choices input:checked + .layout-choice {
  background: var(--pf-tint); border-color: var(--pf-action); color: var(--pf-action);
}
.category-tabs button { background: var(--pf-soft); border-color: var(--pf-line); font-size: 11px; gap: 4px; padding: 7px 6px; min-width: 0; }
.category-tabs .is-current { background: var(--pf-primary); color: var(--pf-primary-ink); border-color: var(--pf-primary-border); box-shadow: var(--pf-button-shadow); }
.category-tabs button span { font-size: 14px; flex-shrink: 0; }
.library-filter input { background: var(--pf-surface); }
.library-filter select { color: var(--pf-muted); background: transparent; }
.back-link, .text-tools button > span { color: var(--pf-action); }
.text-tools button small, .empty-state > span { color: var(--pf-muted); }
.selection-heading, .layer-row, .starter-background, .layout-panel-properties, #new-page-preview,
.variant-editor-card, .layout-save-choices { background: var(--pf-soft); border-color: var(--pf-line); }
.inspector-section, .inspector-heading, .settings-section, .sidebar-foot, .page-management,
.modal-top, .dialog-footer, .dialog-tabs, .technical-details, .danger-zone { border-color: var(--pf-line); }
.dialog-tabs .is-current { color: var(--pf-action); border-color: var(--pf-action); }
dialog { border: var(--pf-frame-width) solid var(--pf-frame-color); border-radius: var(--pf-card-radius); box-shadow: 0 25px 80px var(--pf-shadow-color); }
dialog::backdrop { background: var(--pf-overlay); }
.header-more > div, .project-actions details > div { box-shadow: 0 10px 28px var(--pf-shadow-color); border-color: var(--pf-card-border); }
.modal-top { border-bottom-width: var(--pf-frame-width); border-bottom-color: var(--pf-frame-color); }
.dialog-footer { box-shadow: none; }
.form-error { color: var(--pf-danger); background: var(--pf-danger-soft); border-color: var(--pf-danger); }
.toast { background: var(--pf-ink); color: var(--pf-on-dark); }
.toast.is-error { background: var(--pf-danger); }
.local-dot { background: var(--pf-success); }
.layout-state { color: var(--pf-muted); }
.layout-status-label.is-modified { color: var(--pf-action); }
.layout-status-label.is-modified i { background: var(--pf-action); }
.layout-save-link { color: var(--pf-action); }
.layout-box, .layout-miniature > span, .layout-mini i { background: var(--pf-tint); border-color: var(--pf-action); color: var(--pf-action); }
.layout-box.is-selected { background: var(--pf-tint); border-color: var(--pf-action); outline-color: var(--pf-action); }
.layout-box > span { background: var(--pf-surface); color: var(--pf-action); }
.layout-empty-hint { color: var(--pf-muted); }
.player-controls { border-bottom: 1px solid var(--pf-line); box-shadow: none; }
.playback-buttons #play-toggle { box-shadow: var(--pf-button-shadow); }
#reader-settings-toggle { color: var(--pf-ink); background: var(--pf-soft); border-color: var(--pf-line); }
#reader-settings-toggle[aria-expanded=true], .reader-option:has(.reader-switch input:checked) { background: var(--pf-tint); color: var(--pf-action); border-color: var(--pf-action); }
.reader-settings { border-color: var(--pf-line); }
.player-controls .reader-switch { color: var(--pf-ink); }
.reader-switch i { background: var(--pf-line); }
.reader-progress-track { background: var(--pf-line); }
.voice-list, .voice-tuning, .character-profile, .character-references { border-color: var(--pf-line); }
.voice-list-item, .voice-reference { background: var(--pf-soft); border-color: var(--pf-line); border-radius: var(--pf-card-radius); }
.voice-list-item.is-current, .voice-test, .voice-avatar { background: var(--pf-tint); color: var(--pf-action); border-color: var(--pf-action); }
.voice-list-item small, .voice-reference > small, .voice-tuning > summary, .voice-library-card small { color: var(--pf-muted); }
.voice-editor-title h2 { font-family: var(--pf-font-display); font-weight: var(--pf-heading-weight); text-transform: var(--pf-heading-case); }
.is-preview .canvas-surround { background-color: var(--pf-stage); }
.is-preview .comic-page { width: 100%; max-width: 620px; }
.modal--settings.settings-show-appearance #modal-content, .modal--settings.settings-show-size #modal-content { display: block; }
.modal--settings:not(.settings-show-appearance):not(.settings-show-size) [data-settings-tab=speech] { grid-column: auto; grid-row: auto; }
.theme-choices { border: 0; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 20px; }
.theme-choices legend { font-size: 13px; font-weight: 650; margin-bottom: 12px; }
.theme-choice { position: relative; border: 2px solid var(--pf-line); border-radius: var(--pf-card-radius); padding: 12px; cursor: pointer; min-width: 0; background: var(--pf-surface); }
.theme-choice:has(input:checked) { border-color: var(--pf-action); outline: 2px solid var(--pf-action); outline-offset: 3px; }
.theme-choice:has(input:focus-visible) { outline: 3px solid var(--pf-action); outline-offset: 5px; }
.theme-choice input { position: absolute; top: 17px; right: 17px; margin: 0; z-index: 1; width: 18px; height: 18px; }
.theme-choice > strong { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--pf-ink); font-size: 15px; margin-top: 13px; }
.theme-choice > strong small { background: var(--pf-soft); color: var(--pf-muted); padding: 3px 6px; border-radius: 4px; font-size: 10px; }
.theme-choice > span:last-child { display: block; margin-top: 7px; color: var(--pf-muted); font-size: 12px; }
.theme-sample { display: block; overflow: hidden; border: 1px solid var(--sample-line); border-radius: var(--sample-radius); background: var(--sample-paper); color: var(--sample-ink); }
.theme-sample-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 36px 10px 12px; border-bottom: 1px solid var(--sample-line); font-family: var(--sample-font); font-size: 17px; }
.theme-sample-header i { width: 36px; height: 14px; border-radius: 3px; background: var(--sample-primary); }
.theme-sample-body { display: grid; grid-template-columns: 26px 65px 1fr; min-height: 120px; }
.theme-sample-rail { background: var(--sample-nav); }
.theme-sample-library { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 13px 7px; align-content: start; }
.theme-sample-library i { height: 35px; background: var(--sample-stage); border: 1px solid var(--sample-line); border-radius: 3px; }
.theme-sample-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 15px 22px; background: var(--sample-stage); }
.theme-sample-canvas i { background: var(--sample-paper); border: 2px solid var(--sample-ink); }
.theme-sample-canvas i:first-child { grid-column: 1/-1; }
@media (min-width:1600px) { .app-shell { grid-template-columns: 72px 284px minmax(0,1fr) 310px; } }
@media (min-width:1200px) and (max-width:1399px) { .app-shell { grid-template-columns: 62px 235px minmax(0,1fr) 260px; } }
@media (max-width:1199px) {
  .app-shell { grid-template-columns: 62px 248px minmax(0,1fr); }
  .inspector { border-left: var(--pf-frame-width) solid var(--pf-frame-color); box-shadow: -8px 0 35px var(--pf-shadow-color); }
  .inspector-backdrop:not([hidden]) { background: var(--pf-overlay); }
}
@media (max-width:900px) {
  :root { --studio-header: 124px; }
  .brand { font-size: 22px; gap: 8px; }
  .app-shell { grid-template-columns: 58px 220px minmax(0,1fr); }
  .studio-rail { padding-inline: 4px; }
  .workspace-toolbar { padding: 12px; }
}
@media (max-width:600px) {
  .app-shell { display: flex; flex-direction: column; overflow: auto; height: calc(100dvh - var(--studio-header)); }
  .studio-rail { flex-direction: row; flex-shrink: 0; padding: 6px; gap: 4px; border-right: 0; border-bottom: var(--pf-frame-width) solid var(--pf-frame-color); }
  .studio-rail button { flex: 1; min-height: 49px; font-size: 10px; gap: 3px; padding: 4px; }
  .studio-rail button:last-child { margin-top: 0; }
  .studio-rail button > span { font-size: 20px; }
  .library-sidebar { flex-shrink: 0; border-right: 0; border-bottom: var(--pf-frame-width) solid var(--pf-frame-color); }
  #sidebar-content { padding: 14px; max-height: 260px; }
  .pages-list .page-card { flex: 0 0 105px; width: 105px; }
  .workspace { overflow: visible; min-height: 650px; flex-shrink: 0; }
  .canvas-surround { overflow: visible; flex: 1 0 auto; padding: 20px; }
  body:not(.is-preview) .comic-page { width: 100%; max-width: 340px; }
  .inspector { top: var(--studio-header); border-left: var(--pf-frame-width) solid var(--pf-frame-color); }
  .page-strip { justify-content: flex-start; }
  .dialog-tabs { gap: 16px; }
  .dialog-tabs button { font-size: 12px; }
  .theme-choices { grid-template-columns: 1fr; }
  .is-preview .studio-rail { display: none; }
  .is-preview .workspace { flex: 1; min-height: 0; overflow: hidden; }
  .is-preview .page-strip { padding: 6px 10px; }
  .is-preview .page-strip-item img { height: 24px; }
}
@media (pointer:coarse) {
  body button:not(.resize-handle):not(.draft-grip):not(.selection-delete), body select:not(.dimension-unit) { min-height: 44px; }
}
.reader-toolbar { flex-wrap: wrap; }
#prepare-speech-button { font-size: 12px; min-height: 40px; white-space: nowrap; }
/* Speech preparation and explicit audio start share the active studio theme. */
.speech-activity {
  width: min(460px, calc(100vw - 40px));
  margin: auto;
  padding: 32px;
  text-align: center;
  color: var(--pf-ink);
  background: var(--pf-surface);
  border: var(--pf-frame-width) solid var(--pf-frame-color);
  border-radius: var(--pf-card-radius);
  box-shadow: var(--pf-button-shadow), 0 24px 80px #0003;
}
.speech-activity::backdrop { background: var(--pf-overlay); backdrop-filter: blur(5px); }
.speech-activity h2 { margin: 8px 0 12px; font-size: 1.55rem; }
.speech-activity [data-activity-message] { line-height: 1.6; color: var(--pf-muted); min-height: 4.8em; }
.speech-activity-icon {
  display: grid; place-items: center; position: relative;
  width: 64px; height: 64px; margin: 0 auto 22px;
  color: var(--pf-action); background: var(--pf-tint); border-radius: 50%; font-size: 28px;
}
.speech-activity-icon::after {
  content: ''; position: absolute; inset: -5px; border: 3px solid transparent;
  border-top-color: var(--pf-action); border-right-color: var(--pf-action);
  border-radius: 50%; animation: speech-spin 1.2s linear infinite;
}
.speech-activity.is-waiting-for-click .speech-activity-icon::after { animation: none; border-color: var(--pf-action); }
.speech-activity-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.speech-activity-actions button { min-height: 44px; }
.reader-notice {
  display: grid; flex-shrink: 0; grid-template-columns: 1fr auto; gap: 6px 16px;
  padding: 14px 20px; margin: 0 16px 12px; border: 1px solid var(--pf-primary);
  border-radius: var(--pf-control-radius); background: var(--pf-tint); color: var(--pf-ink);
}
.reader-notice[data-kind="error"] { background: var(--pf-danger-soft); border-color: var(--pf-danger); }
.reader-notice small { grid-column: 1; color: var(--pf-muted); }
.reader-notice small:empty { display: none; }
.reader-notice button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.reader-notice[hidden], .speech-activity [hidden] { display: none; }
@keyframes speech-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .speech-activity-icon::after { animation: none; } }
@media (max-width: 700px) {
  #prepare-speech-button { order: 4; width: 100%; }
  .speech-activity { padding: 24px; }
}
/* PFlow: a playable frame, shared by Studio and the standalone reader. */
.brand { text-transform:none; }
.brand-mark {
  display:inline-block; flex-shrink:0; position:relative; width:32px; height:32px;
  border:2px solid var(--pf-ink); border-radius:5px; background:var(--pf-primary);
  box-shadow:3px 3px 0 var(--pf-ink); transform:rotate(-4deg);
}
.brand-mark i { display:none; }
.brand-mark::after {
  content:''; position:absolute; top:7px; left:10px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:11px solid var(--pf-action);
}