/* The film canvas keeps its own colors; interface chrome follows the common UI. */
:root[data-trail-feature="studio"] {
  color-scheme: light;
  color: var(--ui-text);
  background: var(--ui-bg);
}

:root[data-trail-feature="studio"] .studio-root {
  color: var(--ui-text);
  background: var(--ui-bg);
}

:root[data-trail-feature="studio"] .studio-header,
:root[data-trail-feature="studio"] .preview-toolbar,
:root[data-trail-feature="studio"] .timeline-panel,
:root[data-trail-feature="studio"] .studio-footer {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-line);
}

:root[data-trail-feature="studio"] .studio-header {
  gap: .375rem;
  padding-inline: .5rem;
}

:root[data-trail-feature="studio"] .brand {
  min-width: 0;
  gap: .25rem;
}

:root[data-trail-feature="studio"] .brand b {
  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: -.025em;
  white-space: nowrap;
}

:root[data-trail-feature="studio"] .brand-mark,
:root[data-trail-feature="studio"] .brand-version {
  border-color: transparent;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

:root[data-trail-feature="studio"] .brand-mark {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--ui-control-radius);
}

:root[data-trail-feature="studio"] .brand-version {
  min-height: 1.75rem;
  margin-left: .125rem;
  padding-inline: .375rem;
  font-size: .75rem;
}

:root[data-trail-feature="studio"] .header-actions {
  min-width: 0;
  gap: .25rem;
}

:root[data-trail-feature="studio"] .header-actions button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: .625rem;
  border-radius: var(--ui-control-radius);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] :is(.secondary, .icon-button, .mobile-panel-actions button) {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: transparent;
  border-radius: var(--ui-control-radius);
}

:root[data-trail-feature="studio"] .primary,
:root[data-trail-feature="studio"] .play-button {
  color: #fff;
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

:root[data-trail-feature="studio"] :is(.primary, .play-button, .confirmation-accept):hover:not(:disabled) {
  color: #fff;
  background: #294e38;
  border-color: #294e38;
}

:root[data-trail-feature="studio"] :is(.secondary, .icon-button, .mobile-panel-actions button, .confirmation-cancel):hover:not(:disabled) {
  color: var(--ui-accent);
  background: #e0e9e2;
  border-color: var(--ui-line);
}

:root[data-trail-feature="studio"] .text-button,
:root[data-trail-feature="studio"] .mobile-panel-close {
  color: var(--ui-accent);
  background: transparent;
}

:root[data-trail-feature="studio"] :is(.text-button, .mobile-panel-close):hover:not(:disabled) {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: transparent;
}

:root[data-trail-feature="studio"] .mobile-panel-actions button {
  font-size: .875rem;
  font-weight: 600;
}

:root[data-trail-feature="studio"] .mobile-panel-actions button[aria-pressed="true"] {
  color: #fff;
  background: var(--ui-accent);
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel, .confirmation-dialog, .export-card, .export-ready) {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) {
  --ui-bg: #162329;
  --ui-surface: #152329;
  --ui-text: #e4eeeb;
  --ui-secondary: #acc6be;
  --ui-accent: #9ce8ca;
  --ui-accent-soft: #29453d;
  --ui-line: #3c575c;
  --ui-shadow: 0 8px 30px rgb(0 0 0 / 20%);
  color-scheme: dark;
  font-size: .9375rem;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) h2 {
  font-size: 1.25rem;
  font-weight: 650;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) :is(label, p, small, summary, button) {
  font-family: var(--ui-font);
  line-height: 1.6;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) :is(label, p, small) {
  color: var(--ui-secondary);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) :is(input:not([type="range"]):not([type="checkbox"]), select, textarea) {
  min-height: 2.75rem;
  border-color: var(--ui-line);
  border-radius: var(--ui-control-radius);
  color: var(--ui-text);
  background-color: var(--ui-bg);
  font-size: 1rem;
}

:root[data-trail-feature="studio"] :is(.settings-disclosure, .node-card, .nodes-empty) {
  color: var(--ui-text);
  background: var(--ui-bg);
  border-color: var(--ui-line);
  border-radius: var(--ui-control-radius);
}

:root[data-trail-feature="studio"] .settings-disclosure > summary {
  color: var(--ui-text);
  font-size: .9375rem;
}

:root[data-trail-feature="studio"] .settings-disclosure > summary small,
:root[data-trail-feature="studio"] .time-code,
:root[data-trail-feature="studio"] .view-controls .text-button {
  color: var(--ui-secondary);
  font-size: .75rem;
}

:root[data-trail-feature="studio"] .import-button {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: transparent;
  border-radius: var(--ui-control-radius);
}

:root[data-trail-feature="studio"] :is(.route-stats b, .switch-line > span, .node-card b) {
  color: var(--ui-text);
}

:root[data-trail-feature="studio"] .route-stats {
  gap: 1rem;
  padding-block: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:root[data-trail-feature="studio"] .route-stats b { font-size: 1.25rem; }

:root[data-trail-feature="studio"] :is(.route-stats span, .source-name, .muted, .microcopy, .node-card small, .nodes-empty p, .nodes-empty small, .privacy-note) {
  color: var(--ui-secondary);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] :is(.add-actions button, .story-bulk-actions button, .side-tabs button, .count-badge) {
  min-height: 2.75rem;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: transparent;
  border-radius: var(--ui-control-radius);
  font-size: .875rem;
}

:root[data-trail-feature="studio"] .side-tabs button.active {
  color: #fff;
  background: var(--ui-accent);
}

:root[data-trail-feature="studio"] .side-tabs {
  padding: 4px;
  border: 0;
  border-radius: var(--ui-control-radius);
  background: var(--ui-bg);
}

:root[data-trail-feature="studio"] .side-tabs button {
  color: var(--ui-secondary);
  background: transparent;
}

:root[data-trail-feature="studio"] .side-tabs button[aria-pressed="true"] {
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: 0 2px 6px rgb(16 19 24 / 8%);
}

:root[data-trail-feature="studio"] .count-badge {
  min-height: 0;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
}

:root[data-trail-feature="studio"] :is(.peak-stop-options, .route-label-visibility, .landmark-selection) {
  color: var(--ui-text);
  background: var(--ui-bg);
  border-color: var(--ui-line);
  border-radius: var(--ui-control-radius);
}

:root[data-trail-feature="studio"] :is(.peak-stop-options, .route-label-visibility, .landmark-selection) :is(b, strong) {
  color: var(--ui-text);
  font-size: .875rem;
}

:root[data-trail-feature="studio"] .landmark-result-row {
  min-width: 0;
  border-color: var(--ui-line);
}

:root[data-trail-feature="studio"] .landmark-result-row > button {
  min-height: 44px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: transparent;
  font-size: .875rem;
}

:root[data-trail-feature="studio"] .landmark-result-row > button.selected {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
}

:root[data-trail-feature="studio"] .landmark-categories label > span {
  color: var(--ui-secondary);
  font-size: .75rem;
}

:root[data-trail-feature="studio"] .landmark-label-actions { flex-wrap: wrap; }

:root[data-trail-feature="studio"] .landmark-label-toggle {
  min-height: 44px;
  color: var(--ui-secondary);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] .landmark-label-toggle > span {
  color: var(--ui-secondary);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] .catalog-source {
  color: var(--ui-secondary);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}

:root[data-trail-feature="studio"] .catalog-source > summary {
  min-height: 44px;
  color: var(--ui-accent);
  font-size: .875rem;
  line-height: 1.6;
}

:root[data-trail-feature="studio"] .danger-button { color: #a33930; }

:root[data-trail-feature="studio"] .panel-divider { background: var(--ui-line); }

:root[data-trail-feature="studio"] .elevation-method {
  color: var(--ui-secondary);
  background: var(--ui-bg);
  border-color: var(--ui-line);
  border-radius: var(--ui-control-radius);
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] .elevation-method > summary {
  min-height: 44px;
  padding-block: .5rem;
  color: var(--ui-accent);
  font-size: .875rem;
  line-height: 1.6;
}

:root[data-trail-feature="studio"] .settings-disclosure > summary::after { color: var(--ui-accent); }

:root[data-trail-feature="studio"] .empty-scene :is(p, small, .section-kicker) {
  color: #b8cbc4;
  font-size: .8125rem;
  line-height: 1.7;
  letter-spacing: 0;
}

:root[data-trail-feature="studio"] .preview-toolbar > span {
  color: var(--ui-secondary);
  font-size: .75rem;
  line-height: 1.5;
}

:root[data-trail-feature="studio"] input.playback-time-seek::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ui-accent) var(--time-progress), #dce2de var(--time-progress));
}

:root[data-trail-feature="studio"] input.playback-time-seek::-webkit-slider-thumb {
  background: var(--ui-accent);
  border-color: #fff;
}

:root[data-trail-feature="studio"] .confirmation-dialog p,
:root[data-trail-feature="studio"] .export-card p,
:root[data-trail-feature="studio"] .export-ready :is(span, small) {
  color: var(--ui-secondary);
  font-size: .875rem;
}

:root[data-trail-feature="studio"] .confirmation-cancel {
  color: var(--ui-text);
  background: var(--ui-bg);
  border-color: var(--ui-line);
}

:root[data-trail-feature="studio"] .confirmation-accept {
  color: #fff;
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

:root[data-trail-feature="studio"] .confirmation-accept.destructive {
  color: #fff;
  background: #a33930;
  border-color: #a33930;
}

:root[data-trail-feature="studio"] .confirmation-accept.destructive:hover:not(:disabled) {
  color: #fff;
  background: #812b24;
  border-color: #812b24;
}

:root[data-trail-feature="studio"] .settings-disclosure label > span {
  color: var(--ui-text);
}

:root[data-trail-feature="studio"] .timeline-panel {
  font-variant-numeric: tabular-nums;
}

:root[data-trail-feature="studio"] .studio-footer {
  height: auto;
  min-height: calc(1.75rem + env(safe-area-inset-bottom));
  font-size: .75rem;
  color: var(--ui-secondary);
}

/* Dark settings stay local to the two panels and their mobile drawers. */
:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) .primary {
  color: #14352e;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) .primary:hover:not(:disabled) {
  color: #14352e;
  background: #b8f9df;
  border-color: #b8f9df;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) :is(.secondary, .icon-button):hover:not(:disabled) {
  color: var(--ui-text);
  background: #31464c;
  border-color: var(--ui-line);
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) .side-tabs button[aria-pressed="true"] {
  color: #e8fff5;
  background: #314d4b;
}

:root[data-trail-feature="studio"] :is(.route-panel, .story-panel) .danger-button {
  color: #ffc0b7;
}

@media (max-width: 600px) {
  :root[data-trail-feature="studio"] .studio-header {
    height: auto;
    flex-wrap: wrap;
  }
  :root[data-trail-feature="studio"] .header-actions {
    justify-content: flex-end;
    flex: 1 0 auto;
  }
  :root[data-trail-feature="studio"] .brand b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.15;
  }
  :root[data-trail-feature="studio"] .brand-version {
    min-height: 1.5rem;
    margin-left: 0;
    padding: 0;
    background: transparent;
  }
  :root[data-trail-feature="studio"] .playback-bar { flex-wrap: wrap; }
  :root[data-trail-feature="studio"] .timeline-panel.compact-playback {
    height: auto;
    min-height: 108px;
  }
}

@media (max-width: 380px) {
  :root[data-trail-feature="studio"] .brand b { font-size: .8125rem; }
  :root[data-trail-feature="studio"] .header-actions .primary { min-width: 2.75rem; }
  :root[data-trail-feature="studio"] .header-actions .primary span { display: none; }
}