:root {
  color-scheme: light;
  --page: var(--bg);
  --border: var(--line);
  --panel-soft: var(--panel-2);
  --text-soft: #5f584d;
  --brand: #a66f00;
  --accent-text: #765000;
  --focus-ring: #7d5700;
  --control-height: 44px;
  --content-gutter: clamp(14px, 2.4vw, 32px);
}

html.theme-dark-boot {
  color-scheme: dark;
  --bg: #0e0d0b;
  --panel: #181612;
  --panel-2: #211d17;
  --text: #f7f1e5;
  --muted: #c8bcaa;
  --line: #3a3327;
  --accent: #ffc840;
  --accent-dark: #f0b018;
  --accent-ink: #111111;
  --soft: #2a2417;
  --shadow: 0 10px 28px rgba(0, 0, 0, .38);
  --page: var(--bg);
  --border: var(--line);
  --panel-soft: var(--panel-2);
  --text-soft: #cfc5b5;
  --brand: #ffc840;
  --accent-text: #ffd45e;
  --focus-ring: #ffd96f;
}

html {
  min-width: 320px;
  background: var(--bg);
  scrollbar-gutter: stable;
}

body {
  overflow-x: hidden;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.dark-mode {
  color-scheme: dark;
  --page: var(--bg);
  --border: var(--line);
  --panel-soft: var(--panel-2);
  --text-soft: #cfc5b5;
  --brand: #ffc840;
  --accent-text: #ffd45e;
  --focus-ring: #ffd96f;
}

/* Bright Radio 33 yellow is a surface color. Text uses a darker semantic
   counterpart in day mode and switches back to yellow on dark surfaces. */
.eyebrow,
button.ghost,
.security-log-row code,
.ballot-counter-top strong,
.position,
.rank-number,
.video-bridge-head em,
.musicdb-connection strong,
.musicdb-track-title span,
.musicdb-clip-summary::before,
.musicdb-result-cover,
.musicdb-details summary {
  color: var(--accent-text);
}

.musicdb-clip-section-head .meta {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.musicdb-titlebar-status.is-stale,
.musicdb-titlebar-status.is-active {
  color: #2a1d00;
}

body.dark-mode[data-page="ris-programming"] .ris-programming-actions label {
  color: var(--muted);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table-wrap {
  border-color: var(--line);
  background: var(--panel);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table {
  color: var(--text);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table th,
body.dark-mode[data-page="ris-programming"] .ris-programming-table td {
  border-color: var(--line);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table td {
  background: var(--panel);
  color: var(--text);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table tr:nth-child(even) td {
  background: var(--panel-2);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-table tbody th:first-child {
  background: #2b2519;
  color: var(--accent-text);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-template + .ris-programming-template {
  border-top-color: rgba(255, 255, 255, .18);
}

body.dark-mode[data-page="ris-programming"] .ris-programming-empty-cell {
  color: var(--muted);
}

body.dark-mode[data-page="ris"] .ris-traffic-item strong {
  color: #ff9688;
}

body.dark-mode[data-page="stumo"] .stumo-visual-heading strong {
  color: var(--accent-text);
}

body.dark-mode :is(.spulbase-type) {
  border: 1px solid rgba(255, 200, 64, .22);
  background: var(--panel-2);
  color: var(--accent-text);
}

/* Spul Base has dense inventory rows and should stay readable on wide displays. */
body:is([data-page="spulbase"], [data-page="spulbase-item"]) .portal-layout.spulbase-layout {
  width: min(1320px, calc(100vw - 28px));
  max-width: 1320px;
  margin-inline: auto;
}

@media (max-width: 760px) {
  body:is([data-page="spulbase"], [data-page="spulbase-item"]) .portal-layout.spulbase-layout {
    width: min(100% - 16px, 1320px);
  }
}

::selection {
  background: rgba(255, 200, 64, .38);
  color: var(--text);
}

:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

:is(img, video, canvas, svg) {
  max-width: 100%;
}

:is(h1, h2, h3, h4, p, strong, small, label, legend, th, td) {
  overflow-wrap: anywhere;
}

h1,
.portal-hero-panel h1,
.empty-portal-panel h1,
.video-hero h1,
.musicdb-hero h1,
.studio-audio-hero h1 {
  max-width: 100%;
  font-size: 2.5rem;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  line-height: 1.18;
  letter-spacing: 0;
}

p,
li,
label,
input,
textarea,
select,
button,
.button,
.button-link {
  letter-spacing: 0;
}

:is(.portal-layout, .manage-layout, .admin-layout, .layout) {
  width: 100%;
}

:is(.portal-layout, .manage-layout, .admin-layout, .layout) > *,
:is(.panel, article, section, aside, form, fieldset, details),
:is(.section-head, .brand, .topbar, .nav-links) > * {
  min-width: 0;
}

.panel {
  border-color: var(--line);
}

.topbar {
  min-height: 76px;
  padding: 12px var(--content-gutter);
}

.brand {
  min-width: 0;
}

.brand > div {
  min-width: 0;
}

.topbar .brand strong {
  font-size: 1.15rem;
  line-height: 1.15;
}

.topbar .brand span {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
  line-height: 1.25;
}

.nav-links {
  padding-block: 2px;
}

.nav-links a,
.nav-button {
  min-height: 38px;
  white-space: nowrap;
}

.hitlist-subnav {
  padding-inline: var(--content-gutter);
}

.section-head {
  align-items: center;
}

:is(.summary-actions, .source-file-actions, .draaiboek-editor-actions, .video-auto-actions,
  .stumo-quick-links, .stumo-tec-page-actions, .musicdb-result-actions,
  .musicdb-titlebar-actions, .linked-device-actions, .spulbase-form-actions) {
  align-items: center;
  flex-wrap: wrap;
}

.draaiboek-editor-panel > .section-head {
  flex-wrap: wrap;
}

.draaiboek-editor-panel > .section-head > div:first-child {
  flex: 1 1 220px;
}

.draaiboek-editor-panel > .section-head .draaiboek-editor-actions {
  flex: 1 1 420px;
  justify-content: flex-end;
}

button,
.button,
.button-link,
input,
textarea,
select {
  min-width: 0;
}

button,
.button,
.button-link {
  min-height: 42px;
  line-height: 1.2;
}

input,
select {
  min-height: var(--control-height);
}

textarea {
  min-height: 96px;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  color: #71695e;
  opacity: 1;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #a99d8c;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-dark);
}

input[type="range"] {
  accent-color: var(--accent-dark);
}

:is(.manage-form, .portal-settings-form, .login-form, .spulbase-form) label,
fieldset label {
  color: var(--text);
  line-height: 1.35;
}

fieldset {
  max-width: 100%;
  border-color: var(--line);
}

details {
  max-width: 100%;
}

details > summary {
  min-height: 44px;
}

details > summary::marker {
  color: var(--accent-dark);
}

table {
  max-width: 100%;
  border-color: var(--line);
}

th,
td {
  vertical-align: middle;
}

thead th {
  color: var(--text);
}

.portal-hero-panel,
.empty-portal-panel {
  min-height: 190px;
  align-content: center;
}

.portal-card-grid {
  align-items: stretch;
}

.portal-card {
  height: 100%;
}

.portal-card strong {
  line-height: 1.15;
}

.ris-suggestions-panel .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.ris-suggestions-panel .ris-suggestions-mode {
  justify-self: start;
  max-width: 100%;
}

.portal-settings-layout {
  gap: 18px;
}

.portal-settings-nav,
.manage-nav {
  max-width: 100%;
  padding-bottom: 10px;
}

.portal-settings-nav a,
.manage-nav a {
  min-height: 40px;
  line-height: 1.2;
  text-align: center;
}

.portal-settings-panel,
.admin-layout .panel,
.manage-layout .panel,
.search-panel,
.ballot-panel {
  min-width: 0;
}

.ris-recognition-settings {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--line);
}

.ris-recognition-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ris-recognition-heading > div {
  min-width: 0;
  max-width: 780px;
}

.ris-recognition-heading h2 {
  margin: 3px 0 6px;
  color: var(--text);
  font-size: 20px;
  text-transform: uppercase;
}

.ris-recognition-heading p,
.ris-recognition-status p {
  margin: 0;
  color: var(--muted);
}

.ris-recognition-switch {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.ris-recognition-switch input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
}

.ris-recognition-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 14px;
}

.field-with-unit {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.field-with-unit > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.ris-recognition-status {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.ris-recognition-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ris-recognition-status-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ris-recognition-status-head strong {
  color: var(--text);
}

.ris-recognition-status-head span {
  color: var(--muted);
  font-size: 13px;
}

.ris-recognition-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}

.ris-recognition-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #f2c94c;
  transition: width 220ms ease;
}

.ris-recognition-status.is-ready .ris-recognition-progress > span {
  background: #34a853;
}

.ris-recognition-status.is-error .ris-recognition-progress > span {
  background: #d84a3a;
}

@media (min-width: 1100px) {
  .ris-settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.settings-foldout,
.mail-settings-group,
.mail-admin-card,
.linked-device-panel,
.security-log-panel {
  border-color: var(--line);
}

.settings-foldout summary > div,
.linked-device-panel > div,
.account-row-head > div {
  min-width: 0;
}

body.dark-mode :is(
  .settings-foldout,
  .mail-settings-group,
  .mail-admin-card,
  .linked-device-panel,
  .security-log-panel,
  fieldset
) {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--line);
}

body.dark-mode :is(.ris-recognition-switch, .ris-recognition-status) {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--line);
}

body.dark-mode :is(.settings-foldout summary, .mail-settings-intro, .linked-device-panel summary) {
  color: var(--text);
}

body.dark-mode :is(.portal-status-line, .form-error, .message.error) {
  color: #ff9388;
}

body.dark-mode :is(.message.success, .status-success) {
  color: #83e6a1;
}

body.dark-mode :is(.login-card, .reset-panel) {
  color: var(--text);
  border-color: var(--line);
}

body.dark-mode .login-card {
  background: var(--panel);
}

body.dark-mode .reset-panel {
  background: var(--panel-2);
}

body.dark-mode :is(.stats-layout > .panel .section-head, .section-head) {
  border-color: var(--line);
}

/* Dynamic cards are inserted after the initial page render and need their own
   dark surfaces instead of inheriting the light translucent card background. */
body.dark-mode :is(
  .tecstumo-bridge-pair-card,
  .linked-device-card,
  .linked-device-metrics,
  .linked-device-browser-agent,
  .linked-device-audio-sync,
  .ris-suggestions-mode,
  .musicdb-titlebar-form .musicdb-titlebar-check,
  .musicdb-titlebar-debug-tools
) {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--line);
}

body.dark-mode .tecstumo-bridge-pair-card.connected {
  background: #153322;
  border-color: rgba(91, 220, 130, .38);
}

body.dark-mode .linked-device-card.is-online {
  border-color: rgba(91, 220, 130, .32);
}

body.dark-mode .linked-device-card.requires-approval {
  background: #351a17;
  border-color: rgba(255, 91, 78, .42);
}

body.dark-mode .linked-device-controls {
  border-top-color: var(--line);
}

body.dark-mode :is(
  .linked-device-main label,
  .linked-device-main strong,
  .linked-device-metric strong,
  .linked-device-metrics-head strong,
  .tecstumo-bridge-pair-card strong
) {
  color: var(--text);
}

body.dark-mode :is(
  .linked-device-main .meta,
  .linked-device-metrics-head,
  .linked-device-metric-label,
  .linked-device-metrics-extra,
  .linked-device-command-status,
  .linked-device-control-panel .meta
) {
  color: var(--muted);
}

body.dark-mode .linked-device-metric-bar {
  background: #3a3327;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

@media (max-width: 900px) {
  :is(.video-hero, .musicdb-hero, .studio-audio-hero, .stumo-hero, .licht-hero) {
    grid-template-columns: 1fr;
    align-items: start;
  }

  :is(.video-status-card, .musicdb-status-card, .studio-audio-status-card) {
    width: 100%;
    margin-left: 0;
    justify-items: start;
    text-align: left;
  }

  .accounts-layout.full,
  .mail-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --content-gutter: 12px;
  }

  h1,
  .portal-hero-panel h1,
  .empty-portal-panel h1,
  .video-hero h1,
  .musicdb-hero h1,
  .studio-audio-hero h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .topbar {
    gap: 10px;
    padding-block: 10px;
  }

  .brand {
    width: 100%;
  }

  .brand img {
    width: 58px;
    height: 38px;
  }

  .topbar .brand strong {
    font-size: 1rem;
  }

  .topbar .brand span {
    font-size: .76rem;
  }

  .nav-links {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .topbar:has(.nav-links > .theme-mode-toggle:only-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .topbar:has(.nav-links > .theme-mode-toggle:only-child) .nav-links {
    width: auto;
    min-height: 38px;
    overflow: visible;
    padding: 0;
  }

  .portal-layout,
  .manage-layout,
  .admin-layout,
  .layout {
    gap: 12px;
    padding-block: 12px;
  }

  .portal-hero-panel,
  .empty-portal-panel {
    min-height: 0;
    padding: 20px;
  }

  .portal-hero-panel::after,
  .empty-portal-panel::after {
    opacity: .28;
  }

  .section-head,
  .section-head.compact {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .ris-recognition-heading,
  .ris-recognition-status-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ris-recognition-switch {
    width: 100%;
  }

  .ris-recognition-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-settings-nav,
  .manage-nav,
  .hitlist-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }

  .portal-settings-nav a,
  .manage-nav a,
  .hitlist-subnav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  :is(.summary-actions, .source-file-actions, .draaiboek-editor-actions, .video-auto-actions,
    .stumo-quick-links, .stumo-tec-page-actions, .musicdb-result-actions,
    .musicdb-titlebar-actions, .linked-device-actions, .spulbase-form-actions) {
    width: 100%;
    justify-content: flex-start;
  }

  .portal-settings-panel,
  .admin-layout .panel,
  .manage-layout .panel,
  .search-panel,
  .ballot-panel {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-page="stumo"]):not([data-page="info-screen"]) *,
  body:not([data-page="stumo"]):not([data-page="info-screen"]) *::before,
  body:not([data-page="stumo"]):not([data-page="info-screen"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}