/* Existing native components share the same product-chrome contract.
 * Never match board canvases, chart marks, authored subtitles or template scenes. */
html body :is(.app-shell, #topNavbar, #leftSidebar, #zoomDock, #pageManagerDock,
  #paletteFlyout, #layersPanel, .pro-dialog, .pro-inspector, .viewer-settings-popover,
  .publish-copy-card, .export-panel, .polish-surface) {
  border-color: var(--line);
  color: var(--ink);
}
html body :is(.pro-dialog, .pro-inspector, .viewer-settings-popover, .publish-copy-card,
  #exportModal.export-popover .export-panel, dialog.polish-surface) {
  background: var(--glass-surface) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
html body :is(.app-shell, #topNavbar, #leftSidebar, #zoomDock, #pageManagerDock,
  #paletteFlyout, #layersPanel, .pro-dialog, .pro-inspector, .polish-surface,
  .publish-copy-card, .export-panel) :is(button, a, input, select, textarea, summary) {
  transition-property: transform, opacity !important;
  transition-duration: var(--motion-fast) !important;
  transition-timing-function: var(--motion-ease) !important;
}
/* Brightness is an immediate interaction state; only transform/opacity animate. */
html body :is(button, .ui-btn, [role="button"]):not(:disabled):hover {
  filter: brightness(var(--brightness-hover)) !important;
}
html body :is(button, .ui-btn, [role="button"]):not(:disabled):active {
  filter: brightness(var(--brightness-pressed)) !important;
}
/* Selection is a neutral state; mint is a keyboard focus signal. */
html body :is(.subtitle-preset-btn.is-selected, .publish-tab-btn.is-active,
  #exportModal.export-popover button.export-size-option.is-on) {
  background: var(--state-active-bg) !important;
  border-color: var(--state-active-border) !important;
  color: var(--state-active-fg) !important;
  box-shadow: none;
}
html body :is(.subtitle-preset-btn, .publish-tab-btn, .export-size-option):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
}
html body #exportModal.export-popover .export-aspect-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
html body #exportModal.export-popover .export-size-option {
  min-height: var(--control-height);
  padding: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}
html body #exportModal.export-popover .export-panel {
  padding: var(--space-5);
  min-width: 0;
  max-height: calc(100dvh - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body #exportModal.export-popover .export-field { margin-top: var(--space-4); min-width: 0; }
html body #exportModal :is(#subtitlePickerMount, .subtitle-picker-container, .subtitle-presets-grid, .subtitle-preview-stage) { min-width: 0; max-width: 100%; }
html body #exportModal .subtitle-preset-btn { white-space: normal; overflow-wrap: anywhere; }
html body #exportModal.export-popover .export-panel-close,
.publish-copy-close { width: var(--control-touch); height: var(--control-touch); flex: none; }
.subtitle-presets-grid { gap: var(--space-2); }
.subtitle-preset-btn { min-width: 0; min-height: var(--control-touch); }
.subtitle-preset-desc { font-size: var(--text-xs); line-height: 1.5; }
.subtitle-picker-title { font-weight: 600; }
.subtitle-preview-stage { min-height: 128px; }
.subtitle-preview-stage-bg { opacity: .18; }
/* Exactly one primary action in each open export / publication surface. */
html body #exportModal.export-popover .export-download,
html body .publish-btn-copy {
  min-height: var(--control-touch);
  background: var(--accent-mint) !important;
  border-color: var(--accent-mint) !important;
  color: var(--n-900) !important;
}
/* Nested publication dialog owns the primary action while it is open. */
body:has(.publish-copy-modal:not(.hidden)) #btnExecuteExport,
body:has(#exportModal:not(.hidden), .publish-copy-modal:not(.hidden)) #topNavbar #btnExport {
  background: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-fg) !important;
}
@media (max-width: 640px) {
  html body #exportModal.export-popover .export-panel {
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  .subtitle-presets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subtitle-preset-btn { padding: var(--space-3); }
  .publish-tab-btn, .publish-btn-apply, .publish-btn-copy { min-height: var(--control-touch); }
}
@media (prefers-reduced-transparency: reduce) {
  html body :is(.pro-dialog, .pro-inspector, .viewer-settings-popover, .publish-copy-card,
    #exportModal.export-popover .export-panel, dialog.polish-surface) {
    background: var(--surface) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.app-shell, #topNavbar, #leftSidebar, .pro-dialog, .pro-inspector,
    .polish-surface, .publish-copy-card, .export-panel) :is(button, a, input, select, textarea, summary),
  .subtitle-preview-box { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}