/* v107 accessibility and layout audit.
   Loaded last so legacy page styles cannot reintroduce light surfaces in the
   dark cloud control plane. Local eventserver green styling remains intact. */

:root {
  --control-height: 46px;
  --cloud-bg: #080b11;
  --cloud-panel: #141922;
  --cloud-panel-raised: #19202c;
  --cloud-panel-soft: #0f141d;
  --cloud-border: #303a4d;
  --cloud-border-strong: #46536b;
  --cloud-text: #f4f7fb;
  --cloud-muted: #a7b2c4;
  --cloud-blue: #5d83ff;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: auto;
}

.view,
.band,
.global-main-nav .nav-button {
  animation: none !important;
}

button,
.action-link,
input,
select,
textarea {
  font-size: max(14px, 1em);
}

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

.theme-dark.is-cloud-context {
  color-scheme: dark;
  --cloud-bg: #080b11;
  --cloud-panel: #141922;
  --cloud-panel-raised: #19202c;
  --cloud-panel-soft: #0f141d;
  --cloud-border: #303a4d;
  --cloud-border-strong: #46536b;
  --cloud-text: #f4f7fb;
  --cloud-muted: #a7b2c4;
  --cloud-blue: #5d83ff;
  background: var(--cloud-bg);
  color: var(--cloud-text);
}

/* Pages that receive the global sidebar at runtime contain no sidebar in their
   original app-shell. Prevent the legacy two-column shell from reserving a
   second, empty 276px column and collapsing the actual page. */
body.has-global-sidebar > .app-shell {
  display: block;
  width: 100%;
  min-width: 0;
}

body.has-global-sidebar > .app-shell > .main {
  width: 100%;
  max-width: 1600px;
}

.theme-dark.is-cloud-context h1,
.theme-dark.is-cloud-context h2,
.theme-dark.is-cloud-context h3,
.theme-dark.is-cloud-context h4,
.theme-dark.is-cloud-context strong,
.theme-dark.is-cloud-context legend,
.theme-dark.is-cloud-context label {
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context p,
.theme-dark.is-cloud-context small,
.theme-dark.is-cloud-context .media-meta,
.theme-dark.is-cloud-context .page-intro,
.theme-dark.is-cloud-context .field > span {
  color: var(--cloud-muted);
}

.theme-dark.is-cloud-context input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.theme-dark.is-cloud-context select,
.theme-dark.is-cloud-context textarea {
  border-color: var(--cloud-border-strong);
  background: #0b1018;
  color: var(--cloud-text);
  caret-color: #fff;
  color-scheme: dark;
}

.theme-dark.is-cloud-context select option {
  background: #101620;
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context input::placeholder,
.theme-dark.is-cloud-context textarea::placeholder {
  color: #818da2;
  opacity: 1;
}.is-cloud-context input:-webkit-autofill,
.is-cloud-context input:-webkit-autofill:hover,
.is-cloud-context input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cloud-text);
}

.theme-dark.is-cloud-context input:-webkit-autofill,
.theme-dark.is-cloud-context input:-webkit-autofill:hover,
.theme-dark.is-cloud-context input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #0b1018 inset;
}

.theme-dark.is-cloud-context input:focus,
.theme-dark.is-cloud-context select:focus,
.theme-dark.is-cloud-context textarea:focus {
  border-color: #7393ff;
  outline: 3px solid rgba(93, 131, 255, .28);
  outline-offset: 1px;
  box-shadow: none;
}

.theme-dark.is-cloud-context input[type="checkbox"],
.theme-dark.is-cloud-context input[type="radio"] {
  accent-color: var(--cloud-blue);
}

.theme-dark.is-cloud-context .topbar,
.theme-dark.is-cloud-context .band,
.theme-dark.is-cloud-context .framed-tool,
.theme-dark.is-cloud-context .settings-panel,
.theme-dark.is-cloud-context .user-management-card,
.theme-dark.is-cloud-context .player-editor,
.theme-dark.is-cloud-context .player-detection-panel,
.theme-dark.is-cloud-context .module-card,
.theme-dark.is-cloud-context .event-card,
.theme-dark.is-cloud-context .content-set-card,
.theme-dark.is-cloud-context .screen-profile-card,
.theme-dark.is-cloud-context .provider-card,
.theme-dark.is-cloud-context .connected-file,
.theme-dark.is-cloud-context .concept-card,
.theme-dark.is-cloud-context .command-status-card,
.theme-dark.is-cloud-context .platform-summary-card,
.theme-dark.is-cloud-context .autorun-profile-card,
.theme-dark.is-cloud-context .sponsor-share-card,
.theme-dark.is-cloud-context .sponsor-leaderboard-card,
.theme-dark.is-cloud-context .sponsor-leader,
.theme-dark.is-cloud-context .status-strip .stat-card,
.theme-dark.is-cloud-context .import-help,
.theme-dark.is-cloud-context .calendar-sidebar > *,
.theme-dark.is-cloud-context .resolution-row,
.theme-dark.is-cloud-context .variant-row {
  border-color: var(--cloud-border);
  background: var(--cloud-panel);
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .settings-panel,
.theme-dark.is-cloud-context .player-editor,
.theme-dark.is-cloud-context .player-detection-panel,
.theme-dark.is-cloud-context .user-management-card,
.theme-dark.is-cloud-context .framed-tool {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.theme-dark.is-cloud-context .settings-panel,
.theme-dark.is-cloud-context .customer-editor-basics {
  border: 1px solid var(--cloud-border);
  border-radius: 16px;
  background: var(--cloud-panel-soft);
}

.theme-dark.is-cloud-context .command-hero {
  border-color: #31405d;
  background:
    radial-gradient(circle at 86% 10%, rgba(93,131,255,.16), transparent 36%),
    linear-gradient(135deg, #111722, #141922 62%);
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
}

.theme-dark.is-cloud-context .command-hero.needs-attention {
  border-color: #735426;
  background: linear-gradient(135deg, #1e1a13, #151922 65%);
}

.theme-dark.is-cloud-context .command-hero-copy p,
.theme-dark.is-cloud-context .command-status-card dl,
.theme-dark.is-cloud-context .command-status-card dl span {
  color: var(--cloud-muted);
}

.theme-dark.is-cloud-context .command-hero .stat-card,
.theme-dark.is-cloud-context .command-status-card dl,
.theme-dark.is-cloud-context .selected-files-summary,
.theme-dark.is-cloud-context .player-readiness,
.theme-dark.is-cloud-context .upload-progress {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
}

.theme-dark.is-cloud-context .command-hero .stat-card:first-child {
  border-color: #3f5686;
  background: #172542;
}

/* Quick navigation carries its own literal palette in both themes: it is
   appended to <body>, so inheriting cloud tokens flipped its text to the
   panel colour and made the results unreadable. */
.command-palette {
  background: rgba(12, 18, 28, .5);
}

.command-palette section {
  border-color: #c2cddc;
  background: #ffffff;
  color: #17202a;
  box-shadow: 0 32px 90px rgba(16, 24, 40, .28);
}

.command-palette label,
.command-palette footer {
  border-color: #dde4ee;
  background: #f5f8fc;
  color: #5b6a80;
}

.command-palette input {
  border: 0;
  background: transparent;
  color: #17202a;
}

.command-palette input::placeholder {
  color: #7b899b;
  opacity: 1;
}

.command-palette-results {
  background: #ffffff;
}

.command-palette-results a {
  color: #1d2635;
}

.command-palette-results a:hover,
.command-palette-results a:focus {
  background: #eaf0ff;
  color: #1c3a86;
}

.command-palette-results small,
.command-palette-results p {
  color: #5b6a80;
}

.theme-dark .command-palette {
  background: rgba(2, 5, 10, .78);
}

.theme-dark .command-palette section {
  border-color: #46536b;
  background: #111722;
  color: #f4f7fb;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .62);
}

.theme-dark .command-palette label,
.theme-dark .command-palette footer {
  border-color: #303a4d;
  background: #0d121b;
  color: #a7b2c4;
}

.theme-dark .command-palette input {
  color: #ffffff;
}

.theme-dark .command-palette input::placeholder {
  color: #818da2;
}

.theme-dark .command-palette-results {
  background: #111722;
}

.theme-dark .command-palette-results a {
  color: #edf2ff;
}

.theme-dark .command-palette-results a:hover,
.theme-dark .command-palette-results a:focus {
  background: #1c2942;
  color: #ffffff;
}

.theme-dark .command-palette-results small,
.theme-dark .command-palette-results p {
  color: #a7b2c4;
}

.theme-dark.is-cloud-context .mobile-navigation-trigger {
  border-color: var(--cloud-border-strong);
  background: #151b25;
}

.theme-dark.is-cloud-context .mobile-navigation-trigger span {
  background: #e9eef8;
}

.theme-dark.is-cloud-context .nav-button.is-active {
  border-color: #334b83;
  background: #172442;
  color: #f0f4ff;
  box-shadow: inset 3px 0 0 var(--cloud-blue);
}

.theme-dark.is-cloud-context .nav-button.is-active::before {
  background: #294b9a;
  color: #fff;
}

/* Settings: larger grouped panels and unambiguous form controls. */
.settings-form {
  gap: 22px;
}

.settings-grid {
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 18px;
}

.settings-panel {
  min-width: 0;
  min-height: 170px;
  align-content: start;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
}

.settings-panel:first-child {
  grid-column: 1 / -1;
  min-height: 0;
}

.settings-panel h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.theme-dark.is-cloud-context .settings-panel h3 {
  border-color: var(--cloud-border);
}

.user-management-card {
  min-height: 120px;
  padding: 20px;
  border-radius: 14px;
}

/* Customer administration: plans are presets; modules stay prominent. */
.new-customer-button {
  min-width: 190px;
  min-height: 48px;
  padding-inline: 24px;
  font-size: 14px;
}

.customer-row {
  min-height: 112px;
  padding: 22px 24px;
}

.customer-configure-button {
  min-width: 185px;
  white-space: nowrap;
}

#editorPanel {
  border-width: 2px;
}

.theme-dark.is-cloud-context #editorPanel {
  border-color: #3f5480;
  background: linear-gradient(180deg, #161c27, #121720);
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
}

.customer-editor-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.customer-editor-layout {
  display: grid;
  grid-template-columns: minmax(320px, .7fr) minmax(600px, 1.3fr);
  gap: 22px;
  align-items: start;
}

.customer-editor-basics {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-alt);
}

.customer-editor-basics .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.editor-step-heading > span,
.step-number {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #294b9a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.editor-step-heading h3,
.editor-step-heading p {
  margin: 0;
}

.editor-step-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.module-picker {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border-radius: 16px;
}

.module-picker legend {
  padding: 0 10px;
  font-size: 16px;
}

.module-picker legend .step-number {
  margin-right: 8px;
  vertical-align: middle;
}

.module-picker-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-alt);
}

.module-picker-intro p {
  margin: 0;
  font-size: 12px;
}

.module-picker-intro strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
}

.theme-dark.is-cloud-context .module-picker,
.theme-dark.is-cloud-context .module-picker-intro {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
}

.theme-dark.is-cloud-context .module-picker-intro strong {
  color: #9db3ff;
}

.module-check-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.module-check {
  min-height: 112px;
  padding: 16px;
  border-width: 1px;
  cursor: pointer;
}

.module-check input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.module-check span {
  gap: 5px;
}

.module-check strong {
  font-size: 14px;
}

.module-check small {
  line-height: 1.4;
}

.module-check em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.module-check.is-selected {
  border-color: #6287ff;
  background: #172442;
  box-shadow: inset 3px 0 0 #6287ff;
}/* Page-specific light remnants in the cloud theme. */
.theme-dark.is-cloud-context .calendar-weekdays {
  border-color: var(--cloud-border);
  background: #101620;
}

.theme-dark.is-cloud-context .calendar-day,
.theme-dark.is-cloud-context .calendar-day.is-outside,
.theme-dark.is-cloud-context .calendar-day:hover {
  border-color: var(--cloud-border) !important;
  background: var(--cloud-panel) !important;
  color: var(--cloud-text) !important;
}

.theme-dark.is-cloud-context .calendar-day.is-outside {
  background: #0d121a !important;
  color: #778398 !important;
}

.theme-dark.is-cloud-context .calendar-item {
  background: #1a2b4d;
  color: #c9d8ff;
}

.theme-dark.is-cloud-context .calendar-item.is-active {
  background: #153426;
  color: #8be9b3;
}

.theme-dark.is-cloud-context .share-voice-ring {
  background: radial-gradient(circle at center,#141922 0 55%,transparent 56%),conic-gradient(#5d83ff var(--share),#303a4d 0);
  box-shadow: inset 0 0 0 1px var(--cloud-border);
}

.theme-dark.is-cloud-context .sponsor-share-card,
.theme-dark.is-cloud-context .sponsor-leaderboard-card {
  background: linear-gradient(145deg, #171d28, #111720);
}

.theme-dark.is-cloud-context .credential-result {
  border-color: #76591d;
  background: #251e10;
  color: #ffe0a3;
}

.theme-dark.is-cloud-context .operational-alert-panel {
  border-color: var(--cloud-border-strong);
  background: #151b25;
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .operational-alert-panel li {
  background: #241c12;
}

.theme-dark.is-cloud-context .segmented label:has(input:checked) {
  background: #24304a;
  color: #fff;
}

.theme-dark.is-cloud-context .case-test-result.is-pass {
  border-color:#286445;
  background:#112b20;
}

.theme-dark.is-cloud-context .case-test-result.is-warning {
  border-color:#71551d;
  background:#261f10;
}

.theme-dark.is-cloud-context .case-test-result.is-fail {
  border-color:#74383e;
  background:#2c1519;
}/* Layout library and designer controls were among the last legacy light
   surfaces. Keep the canvas itself neutral,
but keep all surrounding tools
   consistent with the cloud control room. */
.layout-editor-page.theme-dark.is-cloud-context .layout-library-view,
.layout-editor-page.theme-dark.is-cloud-context .layout-library-card,
.layout-editor-page.theme-dark.is-cloud-context .layout-empty-library,
.layout-editor-page.theme-dark.is-cloud-context .playback-presets,
.layout-editor-page.theme-dark.is-cloud-context .output-preset-row {
  border-color: var(--cloud-border);
  background: var(--cloud-panel);
  color: var(--cloud-text);
}.layout-editor-page.theme-dark.is-cloud-context .playback-presets button,
.layout-editor-page.theme-dark.is-cloud-context .output-preset-row button,
.layout-editor-page.theme-dark.is-cloud-context .panel-heading > button {
  border-color: var(--cloud-border-strong);
  background: #18202c;
  color: var(--cloud-text);
}

/* Persistent cloud light mode. Light is the default for new browsers; the
   navigation switch stores an explicit light/dark preference per device. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin-top: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: #eaf0f8;
  font-size: 12px;
  font-weight: 750;
}

.theme-toggle:hover {
  background: rgba(255,255,255,.1);
}

.theme-toggle-icon {
  font-size: 17px;
  line-height: 1;
}

/* --- Independent application scrolling and dark contrast audit (v119) -----
   The navigation stays inside the viewport. Only its link list scrolls when
   it is taller than the available space; page content keeps its own document
   scroll. The theme switch therefore remains directly below Customers. */
@media (min-width: 821px) {
  .is-cloud-context .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .is-cloud-context .global-sidebar-floating {
    position: fixed;
    inset: 0 auto 0 0;
  }

  .is-cloud-context .global-main-nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .is-cloud-context .theme-toggle {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .is-cloud-context .global-nav-status {
    flex: 0 0 auto;
    margin-top: auto;
  }
}

/* Low-specificity defaults repair legacy dark-on-dark labels without
   overruling semantic success, warning, danger and online-state colours. */
:where(.theme-dark.is-cloud-context) :where(
  address, blockquote, caption, dd, dt, figcaption, li, summary, td, th,
  .meta, .value, .section-heading, .form-help, .hint, .description,
  .customer-fact, .customer-capacity, .eventserver-endpoints,
  .player-health-meta, .storage-detail, .sync-scene-row
) {
  color: var(--cloud-text);
}

:where(.theme-dark.is-cloud-context) :where(
  .meta, .form-help, .hint, .description, figcaption,
  .customer-fact span, .customer-capacity span, .storage-detail span
) {
  color: var(--cloud-muted);
}

.theme-dark.is-cloud-context :where(
  .control-environment, .control-tools, .editor-tools,
  .quick-switch-card, .eventserver-card, .eventserver-endpoints,
  .local-item, .log-item, .media-item, .player-card, .stat-card, .mode-card,
  .player-health-card, .player-storage-card, .shell-media-row,
  .shell-player-row, .customer-editor-basics, .module-check,
  .module-picker-intro, .playlist-import-table-wrap, .table-wrap,
  .data-table-wrap, .monitor-form, .storage-card, .fleet-row,
  .empty-state, .selected-files-summary, .upload-progress,
  .player-readiness, details
) {
  border-color: var(--cloud-border);
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context :where(table, thead, tbody, tr, td, th) {
  border-color: var(--cloud-border);
}

.theme-dark.is-cloud-context :where(thead, th) {
  background: #101620;
  color: #dce4f2;
}

.theme-dark.is-cloud-context :where(tbody tr:hover) {
  background: #182131;
}

.is-local-context .theme-toggle {
  display: none;
}

.global-sidebar-collapsed .theme-toggle [data-theme-label] {
  display: none;
}

.global-sidebar-collapsed .theme-toggle {
  width: 48px;
  margin-inline: auto;
  padding: 0;
}

.global-sidebar-floating,
.has-global-sidebar {
  transition: none !important;
}

.is-cloud-context {
  color-scheme: light;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-alt: #f1f4f8;
  --ink: #17202a;
  --muted: #617085;
  --line: #d9e1eb;
  --line-strong: #b9c6d5;
  /* Cloud accent is blue in both themes; green stays reserved for local eventservers. */
  --teal: #3a63e8;
  --teal-dark: #2b4cc0;
  --focus: #3a63e8;
  --shadow-sm: 0 8px 24px rgba(35, 48, 70, .06);
  --shadow: 0 14px 35px rgba(35, 48, 70, .08);
  --cloud-bg: #f4f6f9;
  --cloud-panel: #ffffff;
  --cloud-panel-raised: #f8fafc;
  --cloud-panel-soft: #f1f4f8;
  --cloud-border: #d9e1eb;
  --cloud-border-strong: #b9c6d5;
  --cloud-text: #17202a;
  --cloud-muted: #617085;
  background: var(--surface-alt);
  color: var(--ink);
}

.is-cloud-context .main,
.is-cloud-context .app-shell,
.is-cloud-context .shell-main,
.is-cloud-context .shell-content,
.is-cloud-context .layout-library-view {
  background: var(--surface-alt);
  color: var(--ink);
}

.is-cloud-context h1,
.is-cloud-context h2,
.is-cloud-context h3,
.is-cloud-context h4,
.is-cloud-context strong,
.is-cloud-context legend,
.is-cloud-context label {
  color: var(--ink);
}

.is-cloud-context p,
.is-cloud-context small,
.is-cloud-context .media-meta,
.is-cloud-context .page-intro,
.is-cloud-context .field > span {
  color: var(--muted);
}

.is-cloud-context .topbar,
.is-cloud-context .shell-header,
.is-cloud-context .band,
.is-cloud-context .framed-tool,
.is-cloud-context .settings-panel,
.is-cloud-context .user-management-card,
.is-cloud-context .player-editor,
.is-cloud-context .player-detection-panel,
.is-cloud-context .module-card,
.is-cloud-context .media-item,
.is-cloud-context .player-card,
.is-cloud-context .event-card,
.is-cloud-context .content-set-card,
.is-cloud-context .screen-profile-card,
.is-cloud-context .provider-card,
.is-cloud-context .connected-file,
.is-cloud-context .concept-card,
.is-cloud-context .command-status-card,
.is-cloud-context .platform-summary-card,
.is-cloud-context .autorun-profile-card,
.is-cloud-context .customer-row,
.is-cloud-context .sponsor-share-card,
.is-cloud-context .sponsor-leaderboard-card,
.is-cloud-context .sponsor-leader,
.is-cloud-context .import-help,
.is-cloud-context .calendar-sidebar > *,
.is-cloud-context .resolution-row,
.is-cloud-context .variant-row,
.is-cloud-context .layout-library-card,
.is-cloud-context .layout-empty-library,
.is-cloud-context .playback-presets,
.is-cloud-context .output-preset-row {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(35,48,70,.055);
}

.is-cloud-context .sidebar {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 10px 0 30px rgba(35,48,70,.055);
}

.is-cloud-context .global-brand,
.is-cloud-context .nav-button,
.is-cloud-context .global-nav-status {
  color: #354257;
}

.is-cloud-context .global-brand small,
.is-cloud-context .global-nav-section-label {
  color: var(--muted);
}

.is-cloud-context .nav-button::before {
  background: #eef2f7;
  color: var(--muted);
}

.is-cloud-context .nav-button:hover {
  background: #f0f4fa;
  color: var(--ink);
}

.is-cloud-context .nav-button.is-active {
  border-color: #b9caff;
  background: #eaf0ff;
  color: #234997;
  box-shadow: inset 3px 0 0 #4f7cff;
}

.is-cloud-context .nav-button.is-active::before {
  background: #cfdbff;
  color: #234997;
}

.is-cloud-context .navigation-search,
.is-cloud-context .theme-toggle {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  color: var(--muted);
}

.is-cloud-context .global-nav-status {
  border-color: var(--line);
}

.is-cloud-context input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.is-cloud-context select,
.is-cloud-context textarea {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  caret-color: #17202a;
  color-scheme: light;
}

.is-cloud-context select option {
  background: var(--surface);
  color: var(--ink);
}

.is-cloud-context input::placeholder,
.is-cloud-context textarea::placeholder {
  color: var(--muted);
}

.is-cloud-context .secondary,
.is-cloud-context .action-link,
.is-cloud-context .flow-tab,
.is-cloud-context .playback-presets button,
.is-cloud-context .output-preset-row button,
.is-cloud-context .panel-heading > button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 7px rgba(35,48,70,.055);
}

.is-cloud-context .secondary:hover,
.is-cloud-context .action-link:hover,
.is-cloud-context .flow-tab:hover {
  border-color: #9fb0c5;
  background: #f1f5fa;
}

.is-cloud-context .primary,
.is-cloud-context .primary strong,
.is-cloud-context .primary small,
.is-cloud-context .sync-launch-button,
.is-cloud-context .sync-launch-button strong,
.is-cloud-context .sync-launch-button small {
  color: #fff;
}

.is-cloud-context .sync-launch-button small {
  color: #dfe7ff;
}

.is-cloud-context .shell-status,
.is-cloud-context .shell-status span {
  color: var(--muted);
}

.is-cloud-context .daily-control-tabs .flow-tab.is-featured-sync {
  border-color: #9db4f2;
  background: #edf2ff;
  color: #234997;
}

.is-cloud-context .daily-control-tabs .flow-tab.is-featured-sync strong,
.is-cloud-context .daily-control-tabs .flow-tab.is-featured-sync span {
  color: #234997;
}

.is-cloud-context .command-hero,
.is-cloud-context .sync-studio-hero,
.is-cloud-context #editorPanel {
  border-color: #ccd8e8;
  background: linear-gradient(145deg,#fff,#f4f7fc);
  color: var(--ink);
  box-shadow: 0 14px 35px rgba(35,48,70,.08);
}

.is-cloud-context .command-hero .stat-card,
.is-cloud-context .command-status-card dl,
.is-cloud-context .selected-files-summary,
.is-cloud-context .player-readiness,
.is-cloud-context .upload-progress,
.is-cloud-context .customer-editor-basics,
.is-cloud-context .module-picker,
.is-cloud-context .module-picker-intro {
  border-color: var(--line);
  background: var(--surface-alt);
  color: var(--ink);
}

.is-cloud-context .module-check {
  border-color: #d5dee9;
  background: var(--surface);
  color: var(--ink);
}

.is-cloud-context .module-check.is-selected,
.is-cloud-context .flow-tab.is-active {
  border-color: #7595ed;
  background: #eaf0ff;
  color: #173f91;
}

.is-cloud-context .calendar-weekdays,
.is-cloud-context .calendar-day,
.is-cloud-context .calendar-day:hover {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

.is-cloud-context .calendar-day.is-outside {
  background: #f2f5f8 !important;
  color: #5c6878 !important;
}

.is-cloud-context .command-palette section,
.is-cloud-context .command-palette-results,
.is-cloud-context .command-palette label,
.is-cloud-context .command-palette footer {
  border-color: #d6dfe9;
  background: #fff;
  color: #617085;
}

.is-cloud-context .command-palette input {
  background: transparent;
  color: #17202a;
}

.is-cloud-context .command-palette-results a {
  color: #26354a;
}

.is-cloud-context .command-palette-results a:hover,
.is-cloud-context .command-palette-results a:focus {
  background: #edf3ff;
  color: #173f91;
}

.is-cloud-context .environment-ribbon {
  border-color: #c9d7ea;
  background: #eef4ff;
  color: #23416f;
}

.is-cloud-context .environment-ribbon span {
  color: #5c6f8c;
}

@media (max-width: 1250px) {
  .customer-editor-layout {
    grid-template-columns: 1fr;
  }

  .module-check-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* The fixed desktop sidebar reduces the usable content width by 276px. Apply
   the compact customer layout before viewport-only legacy breakpoints fire. */
@media (max-width: 1500px) {
  body.has-global-sidebar .customer-editor-layout {
    grid-template-columns: 1fr;
  }

  body.has-global-sidebar .customer-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.has-global-sidebar .customer-fact,
  body.has-global-sidebar .customer-capacity {
    grid-column: 1 / -1;
  }

  body.has-global-sidebar .customer-toolbar {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  body.mobile-navigation-open .global-sidebar-floating,
  body.mobile-navigation-open.global-sidebar-collapsed .global-sidebar-floating {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    width: min(310px, 88vw);
    max-height: 100vh;
    padding: 22px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: none;
  }

  body.mobile-navigation-open .global-sidebar-floating .global-brand small,
  body.mobile-navigation-open .global-sidebar-floating .global-nav-status,
  body.mobile-navigation-open .global-sidebar-floating .global-nav-section-label {
    display: flex !important;
  }

  body.mobile-navigation-open .global-sidebar-floating .global-brand small,
  body.mobile-navigation-open .global-sidebar-floating .global-nav-section-label {
    display: block !important;
  }

  body.mobile-navigation-open .global-sidebar-floating .global-main-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  body.mobile-navigation-open .global-sidebar-floating .global-main-nav .nav-button {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    white-space: normal;
  }

  body.mobile-navigation-open .global-sidebar-floating .theme-toggle {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
  }

  .navigation-backdrop {
    backdrop-filter: none !important;
  }

  .settings-grid,
  .customer-editor-basics .form-grid,
  .module-check-grid {
    grid-template-columns: 1fr;
  }

  .settings-panel,
  .customer-editor-basics,
  .module-picker {
    padding: 17px;
  }

  .module-picker-intro,
  .customer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .new-customer-button,
  .customer-configure-button {
    width: 100%;
  }
}

/* --- Cloud light skin completion (v110) -------------------------------------
   The dark cloud rules are now gated behind `.theme-dark`, so light mode falls
   back to the base stylesheet. These rules replace the few remaining green
   accents with the cloud blue; green stays reserved for local eventservers. */

.login-body.is-cloud-context .login-story {
  background:
    radial-gradient(circle at 80% 15%, rgba(58, 99, 232, .16), transparent 34%),
    linear-gradient(145deg, #1b2437 0%, #26324c 58%, #3a63e8 132%);
  color: #f2f5ff;
}

/* The generic cloud heading ink is dark; the story panel is always a dark fill. */
.login-body .login-story h1 { color: inherit; }
.login-body .login-panel .brand span { color: #5b6b80; }
/* Green is the local-eventserver signal; the cloud sign-in uses the cloud accent. */
.login-body.is-cloud-context .login-form .primary { border-color: #2458cf; background: #2458cf; color: #fff; }
.login-body.is-cloud-context .login-form .primary:hover { border-color: #1946ae; background: #1946ae; }

.login-body.is-cloud-context .login-story-mark {
  background: #e6ecff;
  color: #2b4cc0;
}

.login-body.is-cloud-context .login-story > p:not(.eyebrow) {
  color: #d3dcf3;
}

.login-body.is-cloud-context .login-story .eyebrow {
  color: #aec0ff;
}

.is-cloud-context .topbar::after {
  background: linear-gradient(90deg, #3a63e8, transparent 46%);
}

.is-cloud-context .exposure-track i,
.is-cloud-context .daily-exposure-column i {
  background: linear-gradient(180deg, #6a8dff, #3a63e8);
  box-shadow: 0 6px 16px rgba(58, 99, 232, .2);
}

.is-cloud-context .share-voice-ring {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#3a63e8 var(--share), #dde4f0 0);
  box-shadow: inset 0 0 0 1px #dbe3ef;
}

.is-cloud-context .sponsor-leader > b,
.is-cloud-context .activity-icon {
  background: #3a63e8;
  color: #fff;
}

.is-cloud-context .cloud-file-icon {
  background: #eaeffc;
  color: #2b4cc0;
}

/* Customer administrator hand-over panel (v110). */
.customer-access {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--surface-alt);
}

.customer-access-existing {
  display: grid;
  gap: 8px;
}

.customer-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
}

.customer-access-row p {
  margin: 2px 0 0;
}

.customer-password-form:not([hidden]) {
  display: grid;
  gap: 10px;
  flex-basis: 100%;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.customer-password-form .field {
  max-width: 420px;
}

.customer-access-create-heading {
  margin: 4px 0 -6px;
}

.theme-dark.is-cloud-context .customer-access {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
}

.theme-dark.is-cloud-context .customer-access-row {
  border-color: var(--cloud-border);
  background: var(--cloud-panel);
  color: var(--cloud-text);
}

/* --- Content grids follow their own width (v112) ----------------------------
   These panels sit next to a 276px sidebar, but their breakpoints were written
   against the viewport. That collapsed them to one column while the panel still
   had room (and kept them wide when the sidebar left too little). Intrinsic
   sizing removes the guesswork; ui-audit.css loads last so this wins over the
   older viewport rules. */

.split-layout,
.shell-grid,
.dashboard-columns,
.update-workspace,
.customer-editor-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.settings-grid,
.player-management-grid,
.player-storage-grid,
.player-health-grid,
.command-status-grid,
.cleanup-grid,
.pixelmap-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.status-strip,
.mode-grid,
.quick-switch-grid,
.player-cards,
.platform-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* The media rows keep an asymmetric three-column layout, so they need a real
   query — scoped to the list, which holds no fixed-position elements. */
.media-list {
  container-type: inline-size;
  container-name: medialist;
}

.media-item {
  grid-template-columns: 112px minmax(0, 1fr) minmax(240px, auto);
}

@container medialist (max-width: 860px) {
  .media-item {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .media-item .row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@container medialist (max-width: 520px) {
  .media-item {
    grid-template-columns: 1fr;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    .media-item { grid-template-columns: 96px minmax(0, 1fr); }
    .media-item .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  }
}

/* --- Dark mode completion (v113) --------------------------------------------
   These components carried literal light surfaces or dark ink and had no dark
   counterpart, so in dark mode they rendered dark-on-dark or bright-on-dark.
   Status hues keep their meaning; only the lightness is adapted. */

.theme-dark.is-cloud-context .topbar h1,
.theme-dark.is-cloud-context .player-current strong,
.theme-dark.is-cloud-context .creative-module-label,
.theme-dark.is-cloud-context .range-value,
.theme-dark.is-cloud-context .layer-name small,
.theme-dark.is-cloud-context .layer-row [data-layer-rename] {
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .field span,
.theme-dark.is-cloud-context .sync-studio-hero p,
.theme-dark.is-cloud-context .sync-readiness-panel li {
  color: var(--cloud-muted);
}

.theme-dark.is-cloud-context .layer-name small,
.theme-dark.is-cloud-context .layer-row [data-layer-rename],
.theme-dark.is-cloud-context .player-current strong,
.theme-dark.is-cloud-context .operational-alert-panel a,
.theme-dark.is-cloud-context .daily-control-tabs .flow-tab.is-featured-sync strong,
.theme-dark.is-cloud-context .daily-control-tabs .flow-tab.is-featured-sync span {
  color: #9db3ff;
}

.theme-dark.is-cloud-context .live-indicator,
.theme-dark.is-cloud-context .selected-files-summary.is-ready {
  color: #7fe0a8;
}

.theme-dark.is-cloud-context .needs-attention .live-indicator {
  color: #ffd17f;
}

/* Sidebar: the light cloud skin set these, the dark skin never took them back. */
.theme-dark.is-cloud-context .global-brand,
.theme-dark.is-cloud-context .nav-button,
.theme-dark.is-cloud-context .global-nav-status {
  color: #dbe3f2;
}

.theme-dark.is-cloud-context .nav-button::before {
  background: #1b2433;
  color: #b7c4da;
}

.theme-dark.is-cloud-context .nav-button:hover {
  background: #1b2433;
  color: #ffffff;
}

/* Light-tinted panels and progress tracks. */
.theme-dark.is-cloud-context .shell-body,
.theme-dark.is-cloud-context .player-current,
.theme-dark.is-cloud-context .sync-scene-panel {
  background: var(--cloud-panel-soft);
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .storage-render-progress,
.theme-dark.is-cloud-context .editor-panel::-webkit-scrollbar-thumb {
  background: #2b3446;
}

.theme-dark.is-cloud-context .emergency-control-band,
.theme-dark.is-cloud-context .player-health-summary article.is-alert {
  border-color: #74383e;
  background: #2c1519;
  color: #ffd9d9;
}

.theme-dark.is-cloud-context .editor-upload-button:hover {
  border-color: #5d83ff;
  background: #172442;
  color: #dce6ff;
}

.theme-dark.is-cloud-context .credential-result {
  border-color: #6d5220;
  background: #241c12;
  color: #ffe0a3;
}

/* Screen commissioning steps (v116). */
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: onboarding;
}

.onboarding-steps li {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 14px 46px;
  background: var(--surface-alt);
  position: relative;
  counter-increment: onboarding;
}

.onboarding-steps li::before {
  content: counter(onboarding);
  position: absolute;
  left: 14px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
}

.onboarding-steps strong { font-size: .92rem; }
.onboarding-steps span { color: var(--muted); font-size: .82rem; line-height: 1.45; }

.theme-dark.is-cloud-context .onboarding-steps li {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
  color: var(--cloud-text);
}

/* --- Phone app install page (v120) --------------------------------------- */

.app-install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.app-install-card { display: grid; gap: 12px; min-width: 0; }
/* With explanatory cards instead of a QR code, an `auto` column takes the whole
   row and squeezes the description to nothing; share the row instead. */
.app-install-grid:has(> .app-install-steps) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
@media (max-width: 980px) { .app-install-grid:has(> .app-install-steps) { grid-template-columns: minmax(0, 1fr); } }

.app-install-url {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-alt);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.app-install-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.app-install-qr {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  /* A QR code has to stay dark-on-white to scan, so this plate keeps its own
     colours in both themes instead of following the theme tokens. */
  background: #fff;
  color: #111827;
}

.app-install-qr svg { display: block; width: 160px; height: 160px; }
/* Sits on the always-white QR plate, so it pairs its ink with that surface. */
.app-install-qr figcaption { font-size: .76rem; background: #fff; color: #4b5563; }

.app-install-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.app-install-steps article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface-alt);
  color: var(--text);
}

.app-install-steps h3 { margin: 0 0 8px; font-size: .95rem; }
.app-install-steps ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.app-install-steps li,
.app-install-steps p { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.app-install-steps strong { color: var(--text); }

.theme-dark.is-cloud-context .app-install-steps article,
.theme-dark.is-cloud-context .app-install-url {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .app-install-steps strong { color: var(--cloud-text); }

@media (max-width: 720px) {
  .app-install-grid { grid-template-columns: minmax(0, 1fr); }
  .app-install-qr { justify-self: start; }
}

/* --- Install banner (v122) ------------------------------------------------ */

.install-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-alt);
  color: var(--text);
}

.install-banner-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  font-size: 1.05rem;
}

.install-banner-text { display: grid; gap: 2px; min-width: 0; }
.install-banner-text strong { font-size: .95rem; }
.install-banner-text span { color: var(--muted); font-size: .84rem; line-height: 1.45; }

.install-banner-actions { display: flex; align-items: center; gap: 8px; }

.install-banner-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}

.install-banner-close:hover { color: var(--text); }

.install-banner-steps {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

.install-banner-steps strong { color: var(--text); }

.theme-dark.is-cloud-context .install-banner {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
  color: var(--cloud-text);
}

.theme-dark.is-cloud-context .install-banner-steps strong,
.theme-dark.is-cloud-context .install-banner-close:hover { color: var(--cloud-text); }

@media (max-width: 700px) {
  .install-banner { grid-template-columns: auto minmax(0, 1fr); }
  .install-banner-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .install-banner-actions .primary { flex: 1 1 auto; }
}

/* --- Browser player commissioning (v126) ---------------------------------- */

.browser-player-hint {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-alt);
  color: var(--text);
}

.browser-player-hint strong { font-size: .92rem; }
.browser-player-hint p { margin: 4px 0 0; }
.browser-player-hint code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(127, 127, 127, .18);
  font-size: .82em;
}

.theme-dark.is-cloud-context .browser-player-hint {
  border-color: var(--cloud-border);
  background: var(--cloud-panel-soft);
  color: var(--cloud-text);
}

/* --- Media rows: keep the three-column layout on any real screen (v143) ------

   `container-type: inline-size` makes an element's width independent of its
   contents. In a parent that sizes its children by content that collapses the
   list to almost nothing, the container query then fires at its narrowest step
   and every line of a media row stacks. An explicit width takes that risk away.

   The single-column fallback is also pulled back to a genuinely narrow width:
   at 520px a normal laptop column could still trip it, which is what put the
   title, the file name, the chips and the player list underneath each other. */

.media-list {
  width: 100%;
  min-width: 0;
}

@container medialist (max-width: 520px) {
  .media-item { grid-template-columns: 96px minmax(0, 1fr); }
  .media-item .row-actions { grid-column: 1 / -1; }
}

@container medialist (max-width: 360px) {
  .media-item { grid-template-columns: 1fr; }
}

/* The status chips read as one line of labels; they wrap only when they truly
   run out of room, never one per line. */
.media-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.media-status .chip { flex: 0 0 auto; }

/* --- No internal storage on the target screen (v144) -------------------------
   Loud on purpose: preloading to a browser player cannot work, and a transfer
   that never finishes is the most expensive way to learn that. */

.storage-warning {
  display: grid;
  gap: 4px;
  grid-column: 1 / -1;
  margin-top: 10px;
  border: 2px solid #b3701a;
  border-left-width: 6px;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff6e6;
  color: #5c3b06;
}

.storage-warning strong { font-size: .88rem; }
.storage-warning span { font-size: .82rem; line-height: 1.5; }
.storage-warning em { font-style: normal; font-weight: 800; }

.theme-dark.is-cloud-context .storage-warning {
  border-color: #8a5a14;
  background: #241a09;
  color: #f4dcb3;
}

/* The actions column is capped (v146).

   It was `minmax(240px, auto)`, and `auto` in a grid means max-content when
   there is room to spare. Above roughly 1300px there is, so the column claimed
   the width of all nine buttons on a single line and squeezed the title and the
   file details into a narrow ribbon. Capped, the buttons wrap into a tidy block
   and the text keeps the space it needs. */

.media-item {
  align-items: start;
}
@container medialist (min-width: 861px) {
  .media-item { grid-template-columns: 112px minmax(0, 1fr) minmax(210px, 300px); }
}

.media-item > .media-main { align-self: center; }
.media-item .row-actions { align-content: start; }

@container medialist (min-width: 1500px) {
  .media-item { grid-template-columns: 128px minmax(0, 1fr) minmax(210px, 340px); }
}

/* Marks the platform owner’s own row in a list that is otherwise all
   customers — the row whose modules he could never work out how to switch on. */
.owner-chip { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 2px 9px; background: #1f3d2b; color: #b9f0cf; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* Download links have the same hit area and alignment as regular buttons. */
#onboardingDownload,.autorun-profile-card > a.action-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;line-height:1.3;text-decoration:none;text-align:center;white-space:normal;align-self:start}
#onboardingDownload.primary,.autorun-profile-card > a.primary.action-link{background:#1559b7;color:#fff;border:1px solid #1559b7}
#onboardingDownload.primary:hover,.autorun-profile-card > a.primary.action-link:hover{background:#104791;color:#fff;border-color:#104791}
#onboardingDownload:focus-visible,.autorun-profile-card > a.action-link:focus-visible{outline:3px solid #6b9fe9;outline-offset:3px}
#screenOnboarding .section-heading .button-row{align-items:flex-end;flex-wrap:wrap}
#onboardingDownload{align-self:flex-end}
.onboarding-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:18px}
.onboarding-controls .field{flex:1 1 0;min-width:min(100%,290px);max-width:420px}
.onboarding-controls #onboardingProfile{width:100%;min-width:0}

/* Customer-bound player setup keeps the physical identity visible throughout pairing. */
.player-onboarding-queue{border:1px solid #a9c5e6;background:#f7fbff}
.player-onboarding-queue .section-heading{gap:16px;align-items:center}
.player-onboarding-group-title{font-size:1rem;margin:18px 0 10px}
.player-onboarding-card{grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);gap:18px;align-items:start;background:#fff;border-color:#cbd9e8;border-radius:14px;padding:20px}
.player-onboarding-card.has-conflict{border-color:#dfae78;background:#fffaf4}
.player-onboarding-device{min-width:0}
.player-onboarding-device h3{margin:10px 0 4px}
.player-onboarding-serial{margin:6px 0;color:#344861;overflow-wrap:anywhere}
.player-onboarding-serial strong{display:block;color:#102d4e;font-size:1rem;letter-spacing:.035em}
.player-onboarding-warning{border-left:3px solid #b66718;padding:8px 12px;background:#fff0da;color:#64380b;line-height:1.45}
.player-onboarding-form{display:grid;gap:12px;min-width:0}
.player-onboarding-form .field{min-width:0}
.player-onboarding-advanced{border-top:1px solid #d7e3f0;padding-top:10px}
.player-onboarding-advanced summary,.player-onboarding-linked summary{cursor:pointer;font-weight:700;color:#244c79}
.player-onboarding-advanced[open] .form-grid{margin-top:12px}
.player-onboarding-linked{margin-top:20px;border-top:1px solid #cbd9e8;padding-top:14px}
.player-onboarding-linked .claim-grid{margin-top:12px}
.player-onboarding-review{width:min(96vw,540px);max-height:min(88vh,780px);border:1px solid #bacce0;border-radius:18px;padding:0;box-shadow:0 24px 65px #15284055;background:#fff;color:#182e47}
.player-onboarding-review::backdrop{background:#07172db3}
.player-onboarding-review form{padding:24px;display:grid;gap:14px}
.player-onboarding-review h2{margin:0}
.player-onboarding-review-details{display:grid;gap:0;border:1px solid #d4e1ed;border-radius:12px;overflow:hidden}
.player-onboarding-review-details>div{display:grid;grid-template-columns:minmax(110px,.45fr) 1fr;gap:10px;padding:10px 12px;align-items:start}
.player-onboarding-review-details>div+div{border-top:1px solid #e0e8f0}
.player-onboarding-review-details span{color:#4e6379}
.player-onboarding-review-details strong{overflow-wrap:anywhere}
.player-onboarding-review .button-row{justify-content:flex-end}
.theme-dark .player-onboarding-queue,.theme-dark.is-cloud-context .player-onboarding-queue{background:#17253a;border-color:#3c587a}
.theme-dark .player-onboarding-card,.theme-dark.is-cloud-context .player-onboarding-card{background:#1e2f47;border-color:#4a6380;color:#eaf3ff}
.theme-dark .player-onboarding-card.has-conflict,.theme-dark.is-cloud-context .player-onboarding-card.has-conflict{background:#302819;border-color:#9e7537}
.theme-dark .player-onboarding-serial,.theme-dark .player-onboarding-serial strong,.theme-dark .player-onboarding-advanced summary,.theme-dark .player-onboarding-linked summary{color:#dceaff}
.theme-dark .player-onboarding-warning{background:#46331a;color:#ffdcab;border-color:#dda54e}
.theme-dark .player-onboarding-review{background:#1d2d43;color:#edf5ff;border-color:#5b7491}
.theme-dark .player-onboarding-review-details{border-color:#4a6380}
.theme-dark .player-onboarding-review-details>div+div{border-color:#4a6380}
.theme-dark .player-onboarding-review-details span{color:#cadbef}
@media(max-width:800px){.player-onboarding-card{grid-template-columns:1fr}.player-onboarding-review-details>div{grid-template-columns:1fr;gap:2px}}

/* v211: adapt to the content column, not only the browser width. */
.command-hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.command-hero .status-strip{min-width:0;width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.command-hero .stat-card:first-child{grid-row:auto;grid-column:auto}
.command-hero .stat-card:last-child:nth-child(odd){grid-column:1/-1}
.command-hero.needs-attention .stat-card:first-child{background:#fff3d6;border-color:#c5984b;color:#654600}
.command-hero.needs-attention .stat-card:first-child span,.command-hero.needs-attention .stat-card:first-child small{color:#654600}
.theme-dark.is-cloud-context .command-hero.needs-attention .stat-card:first-child{background:#322716;border-color:#aa854a;color:#ffdf9b}
.theme-dark.is-cloud-context .command-hero.needs-attention .stat-card:first-child span,.theme-dark.is-cloud-context .command-hero.needs-attention .stat-card:first-child small{color:#ffdf9b}
.media-action-guide{align-self:start}
.media-action-guide summary{cursor:pointer;font-weight:750;min-height:44px;align-content:center}
.media-action-guide[open] summary{margin-bottom:18px}
.media-action-guide summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.command-hero-copy,.topbar>div,.shell-header>.brand{min-width:0}
.topbar h1,.shell-header .brand strong{overflow-wrap:anywhere}
.skip-navigation{position:fixed;top:8px;left:12px;z-index:10050;transform:translateY(-160%);padding:12px 18px;border:2px solid var(--blue);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:700}
.skip-navigation:focus{transform:translateY(0)}
.command-palette a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
main:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media(max-width:820px){
  body.has-global-sidebar .shell-header{grid-template-columns:minmax(0,1fr);gap:12px}
  .shell-header .shell-status{min-width:0;width:100%;margin:0;flex-wrap:wrap}
  .shell-header .brand{max-width:100%}
}
@media(max-width:700px){
  .install-banner{gap:10px;padding:12px}
  .install-banner-icon{width:30px;height:30px}
  .install-banner-text span{display:none}
  .install-banner-close{min-width:44px;min-height:44px}
  .install-banner-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:6px}
  .install-banner-actions button{padding-inline:6px;min-width:0}
  .command-hero .status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .command-hero .stat-card:last-child:nth-child(odd){grid-column:1/-1}
}