/* Shared visual finish only. Layout, visibility, media, routing and interaction
   remain in their existing page styles. Account appearance remains authoritative. */
body.vl-design-system {
  --ds-bg: var(--vl-bg, #15191f);
  --ds-surface: var(--vl-surface, #202733);
  --ds-raised: var(--vl-surface-raised, #283449);
  --ds-subtle: var(--vl-surface-subtle, #1c2532);
  --ds-text: var(--vl-text, #edf1f7);
  --ds-muted: var(--vl-text-muted, #b9c6d9);
  --ds-line: var(--vl-border-subtle, #40516a);
  --ds-border: var(--vl-border, #697e9b);
  --ds-input: var(--vl-input, #171e29);
  --ds-accent: var(--vl-accent, #4166db);
  --ds-accent-hover: var(--vl-accent-hover, #3454ba);
  --ds-on-accent: var(--vl-on-accent, #fff);
  --ds-link: var(--vl-link, #b7caff);
  --ds-focus: var(--vl-focus, #c1d1ff);
  --ds-shadow: var(--vl-shadow, 0 16px 38px #00000020);
  /* Alias the independent academy, privacy and room color vocabularies. */
  --ink: var(--ds-text);
  --paper: var(--ds-bg);
  --muted: var(--ds-muted);
  --line: var(--ds-line);
  --bg: var(--ds-bg);
  --panel: var(--ds-surface);
  --raised: var(--ds-raised);
  --text: var(--ds-text);
  --room-bg: var(--ds-bg);
  --surface: var(--ds-surface);
  --surface-raised: var(--ds-raised);
  --border: var(--ds-line);
  --blue-light: var(--ds-link);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Chime's existing parent-message/query light setting remains a separate, explicit
   room choice. Do not replace its theme event handling with a second preference. */
html[data-theme=light]:not([data-vl-theme=high-contrast]):not([data-call-test-mode=active]) body.vl-design-system {
  --ds-bg: #f3f5f9;
  --ds-surface: #fff;
  --ds-raised: #e8eef8;
  --ds-subtle: #edf1f7;
  --ds-text: #182338;
  --ds-muted: #4d5c72;
  --ds-line: #c8d3e3;
  --ds-border: #72829b;
  --ds-input: #fff;
  --ds-link: #244da6;
  --ds-focus: #244da6;
  --ds-shadow: 0 12px 38px #23344d10;
}

html body.vl-design-system {
  background-color: var(--ds-bg) !important;
  color: var(--ds-text) !important;
}

html body.vl-design-system :is(.site-header, .academy-header, .application-header, .privacy-header, .support-footer, .privacy-footer),
html body.vl-design-system > footer {
  background: var(--ds-subtle) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-line) !important;
  box-shadow: none;
}

/* Preserve heading sizes and wrapping: a shared type treatment without changing
   the dimensions of busy portal headers or call controls. */
body.vl-design-system :is(h1, h2, h3, h4) {
  font-family: Manrope, 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
html body.vl-design-system :is(.eyebrow, .privacy-eyebrow, .ai-kicker) {
  color: var(--ds-link) !important;
}
html body.vl-design-system :is(.intro, .lead, .help, .muted, .privacy-lead, .privacy-date, .ai-muted, .portal-person span) {
  color: var(--ds-muted) !important;
}

/* Semantic containers only. No broad div/section/article recoloring, so media
   stages, document previews, certificates, charts and image artwork keep theirs. */
html body.vl-design-system.offline-page > main,
html body.vl-design-system :is(
  .card, .panel, .stat, .notice-card, .medical-card, .community-card,
  .customer-next, .customer-account, .member-connect, .room-sidebar,
  .portal-section, .portal-action, .portal-summary-grid > article,
  .portal-welcome, .portal-support, .portal-empty,
  .contact-form-panel, .contact-chat, .contact-promise, .contact-confirmation,
  .join-form, .join-card, .interpreter-apply-card, .interpreter-login-card,
  .member-access-options > article,
  .application-card, .service-card, .workspace-card, .workspace-empty,
  .admin-workspace, .admin-panel, .admin-card, .admin-access-card,
  .interpreter-availability, .interpreter-application-card, .interpreter-result,
  .privacy-content, .privacy-summary, .lesson-body, .ai-result,
  .join-panel, .call-control-card, .audio-stage, .chime-aid:not([data-active=true]),
  .ai-setup-card, .ai-speaker, .ai-conversation
) {
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-line) !important;
  border-radius: 24px;
  box-shadow: var(--ds-shadow);
}

html body.vl-design-system :is(
  .admin-nav, .admin-sidebar, .sidebar, .admin-form, .admin-form-panel,
  .zoom-pricing-reference, .maintenance-provider, .upload-field,
  .audio-settings, .chime-aid-log, .ai-caption-card, .customer-document-help,
  .portal-session-list article, .privacy-contents, .objectives, .terms,
  .room-controls, .call-tools, .device-settings, .translation-panel
) {
  background: var(--ds-subtle) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-line) !important;
  border-radius: 18px;
}

html body.vl-design-system :is(.hero-panel, .hero-art, .workspace-section, .cta-section, .service-hero, .medical-hero, .owner-console-hero) {
  background: linear-gradient(135deg, var(--ds-surface), var(--ds-raised)) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-line) !important;
  border-radius: 24px;
}

/* Authored decorative waveforms use the same accents as the map. Actual audio
   meters, availability signals and media retain their semantic colors. */
html body.vl-design-system .hero-panel .sound i {
  background: var(--ds-link) !important;
}
html body.vl-design-system .hero-art .wave i {
  background: linear-gradient(var(--ds-link), var(--ds-accent)) !important;
}
html body.vl-design-system :is(.hero-panel .tiny-logo, .hero-art .topline) {
  color: var(--ds-link) !important;
}

/* Public information pages also need readable ink before account appearance
   loads, and for anonymous visitors who have no saved preference. */
html body.vl-design-system .public-information :is(h1, h2, h3) {
  color: var(--ds-text) !important;
}
html body.vl-design-system .public-information p:not(.eyebrow) {
  color: var(--ds-muted) !important;
}
html body.vl-design-system .member-access :is(h1, h2, h3),
html body.vl-design-system.offline-page > main :is(h1, h2, h3) {
  color: var(--ds-text) !important;
}
html body.vl-design-system .member-access p:not(.eyebrow),
html body.vl-design-system.offline-page > main p:not(.eyebrow) {
  color: var(--ds-muted) !important;
}

/* Native control types, checked states, disabled states and target sizes stay as
   authored; only the rectangular text controls receive the shared finish. */
html body.vl-design-system :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]), select, textarea) {
  background: var(--ds-input) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border) !important;
  border-radius: 12px;
}
html body.vl-design-system :is(input, textarea)::placeholder {
  color: var(--ds-muted) !important;
}
body.vl-design-system :is(button.primary, button.quiet, a.primary, a.quiet, .button, .role-entry, .site-logout, .site-appearance, button.control, .ai-link-button, .ai-primary) {
  border-radius: 12px;
}
html body.vl-design-system :is(.quiet, .role-entry, .site-logout, .site-appearance, .workspace-return, button.control, .ai-link-button):not(.danger):not(.ai-stop):not([aria-pressed=true]):not([aria-selected=true]):not(.active) {
  background: var(--ds-raised) !important;
  color: var(--ds-link) !important;
  border-color: var(--ds-border) !important;
}
html body.vl-design-system :is(.primary, .primary-action, .ai-primary):not(.danger):not(.ai-stop) {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 5px 16px #00000016;
}
html body.vl-design-system :is(.primary, .primary-action, .ai-primary):not(:disabled):not(.danger):not(.ai-stop):hover {
  background: var(--ds-accent-hover) !important;
}
html body.vl-design-system .primary-action :is(h2, h3, p, span, strong, small) {
  color: var(--ds-on-accent) !important;
}
html body.vl-design-system :is(input, textarea, select, button, a, summary):focus-visible {
  outline-color: var(--ds-focus) !important;
}

html body.vl-design-system :is(.site-navigation a, .academy-header nav a, .vl-footer-navigation a) {
  color: var(--ds-muted) !important;
}
html body.vl-design-system :is(.site-navigation a, .academy-header nav a)[aria-current=page] {
  background: var(--ds-raised) !important;
  color: var(--ds-link) !important;
  border-radius: 12px;
}
/* Social artwork already uses currentColor; only its button surface changes. */
html body.vl-design-system .vl-social-links a {
  background: var(--ds-raised) !important;
  color: var(--ds-link) !important;
  border-color: var(--ds-border) !important;
  border-radius: 12px;
}
html body.vl-design-system .vl-social-links a:hover {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-color: var(--ds-accent) !important;
}
html body.vl-design-system :is(.table-wrap, dialog, .privacy-dialog, .incoming-call-spotlight, .interpreter-setup-guide, .compact-call-settings) {
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border) !important;
  border-radius: 24px;
  box-shadow: var(--ds-shadow);
}
html body.vl-design-system :is(td, th, hr, .panel-heading, .portal-section-heading, .section-head, .divider) {
  border-color: var(--ds-line) !important;
}

/* Do not flatten high-contrast, state badges or the verified test-mode palette. */
html[data-vl-theme=high-contrast] body.vl-design-system {
  --ds-shadow: none;
}
html[data-vl-theme=high-contrast] body.vl-design-system :is(.primary, .primary-action, .ai-primary) {
  box-shadow: none;
}

/* The standalone light room must also outrank the legacy hardcoded dark ink.
   Video labels are deliberately outside these text-only control containers. */
html[data-theme=light]:not([data-vl-theme=high-contrast]):not([data-call-test-mode=active]) body.vl-design-system .chime-room :is(.room-heading, .join-panel, .call-control-card, .audio-stage, .chime-aid, .room-footer) :is(h1, h2, h3, strong, label) {
  color: var(--ds-text) !important;
}
html[data-theme=light]:not([data-vl-theme=high-contrast]):not([data-call-test-mode=active]) body.vl-design-system .chime-room :is(.room-heading, .join-panel, .call-control-card, .audio-stage, .chime-aid, .room-footer) :is(p, small, .help) {
  color: var(--ds-muted) !important;
}

/* Keep every existing navigation control within the viewport. The legacy header
   forces nowrap after its responsive rules; restore wrapping without hiding or
   reordering any destination. Embedded finder navigation stays independently managed. */
html:not(.finder-embedded) body.vl-design-system > .site-header {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap !important;
}
html:not(.finder-embedded) body.vl-design-system > .site-header :is(.site-navigation, .site-header-utilities) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap !important;
}
html:not(.finder-embedded) body.vl-design-system > .site-header .site-navigation a {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Discovery's grid track otherwise adopts the header's min-content width. */
body.vl-design-system.discovery {
  grid-template-columns: minmax(0, 1fr);
}

/* The academy's mobile 1fr track inherited the sidebar's unwrapped intrinsic
   width. Make the existing grid items shrinkable, then wrap its visible links. */
body.vl-design-system .admin-layout > :is(.sidebar, main) {
  min-width: 0;
  max-width: 100%;
}
body.vl-design-system .academy-header > .brand {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  body.vl-design-system .admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.vl-design-system .admin-layout .sidebar nav {
    flex-wrap: wrap;
  }
  body.vl-design-system .admin-layout .sidebar nav a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Finish legacy surfaces that previously paired dark-theme ink with light boxes.
   These declarations change only colors; all status semantics and behavior stay. */
html body.vl-design-system .availability-control {
  background: var(--ds-subtle) !important;
  border-color: var(--ds-line) !important;
  color: var(--ds-text) !important;
}
html body.vl-design-system .availability-control :is(label, p, small),
html body.vl-design-system :is(.workspace-metrics .stat > span, .tool-number, .chat-actions > span, .rating-label, .customer-identity-email, .step) {
  color: var(--ds-muted) !important;
}
html body.vl-design-system :is(.required-label, .field > small) {
  background: var(--ds-raised) !important;
  color: var(--ds-text) !important;
}
html body.vl-design-system .finder-window-status {
  background: var(--ds-raised) !important;
  color: var(--ds-link) !important;
}
html body.vl-design-system :is(.tool-number, .step) {
  background: var(--ds-raised) !important;
}
/* Shared account link styles consume --vl-link. Override it at the action,
   keeping white text on solid blue instead of pale navigation-link text. */
html body.vl-design-system :is(a.button:not(.quiet):not(.danger), .customer-ai-voice-launch) {
  --vl-link: var(--ds-on-accent);
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-color: var(--ds-accent) !important;
}
html body.vl-design-system :is(a.button:not(.quiet):not(.danger), .customer-ai-voice-launch):hover {
  background: var(--ds-accent-hover) !important;
}
html body.vl-design-system a.skip {
  --vl-link: #182338;
  background: #fff !important;
  color: #182338 !important;
}