/* Shared interface skin. Load after page and module CSS; keep layout and artwork local. */
body .visitor-data-admin .vd-section-tabs .vd-button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding-inline: 8px; color: var(--ds-muted); }
body .visitor-data-admin .vd-section-tabs .vd-button[aria-pressed="true"] { background: transparent; border-bottom-color: var(--ds-ink); color: var(--ds-ink); font-weight: 750; }
:root {
  color-scheme: light;
  --ds-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ds-page: #fffaf4;
  --ds-surface: #fffefd;
  --ds-raised: #ffffff;
  --ds-soft: #f2f6ef;
  --ds-ink: #233c36;
  --ds-muted: #53685f;
  --ds-faint: #62736a;
  --ds-line: #dae4db;
  --ds-line-strong: #74897d;
  --ds-mint: #b9efd7;
  --ds-mint-hover: #a6e4c9;
  --ds-mint-ink: #233c36;
  --ds-mint-soft: #e7f7ee;
  --ds-link: #256b50;
  --ds-link-hover: #1d563e;
  --ds-peach: #ffe0cc;
  --ds-peach-ink: #834626;
  --ds-lilac: #e9dcff;
  --ds-lilac-ink: #63458b;
  --ds-yellow: #fff0ae;
  --ds-yellow-ink: #725616;
  --ds-sky: #dbefff;
  --ds-sky-ink: #345979;
  --ds-success: #296d50;
  --ds-success-soft: #e5f5eb;
  --ds-warning: #805600;
  --ds-warning-soft: #fff1ca;
  --ds-danger: #a82c34;
  --ds-danger-fill: #ad303e;
  --ds-danger-ink: #ffffff;
  --ds-danger-soft: #ffe5e6;
  --ds-overlay: rgb(29 49 41 / 38%);
  --ds-shadow: 0 6px 22px rgb(51 72 53 / 6%);
  --ds-shadow-small: 0 2px 8px rgb(51 72 53 / 4%);
  --ds-modal-shadow: 0 16px 48px rgb(29 49 41 / 16%);
  --ds-radius: 20px;
  --ds-radius-inner: 16px;
  --ds-touch: 44px;
}

/* The synchronous preference bootstrap normalizes legacy night/day to dark/light. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ds-page: #172b28;
  --ds-surface: #203b35;
  --ds-raised: #27443c;
  --ds-soft: #294940;
  --ds-ink: #f7f7ef;
  --ds-muted: #c0d0c5;
  --ds-faint: #adc2b4;
  --ds-line: #476457;
  --ds-line-strong: #789789;
  --ds-mint: #c0eed6;
  --ds-mint-hover: #d3f6e2;
  --ds-mint-ink: #233c36;
  --ds-mint-soft: #2d5142;
  --ds-link: #b9efd7;
  --ds-link-hover: #d3f6e2;
  --ds-peach: #594438;
  --ds-peach-ink: #ffdbc1;
  --ds-lilac: #443e59;
  --ds-lilac-ink: #e5d5ff;
  --ds-yellow: #50472c;
  --ds-yellow-ink: #fff0ae;
  --ds-sky: #304e5a;
  --ds-sky-ink: #dbefff;
  --ds-success: #b9efd7;
  --ds-success-soft: #2d5142;
  --ds-warning: #fff0ae;
  --ds-warning-soft: #50472c;
  --ds-danger: #ffa4ae;
  --ds-danger-soft: #542f38;
  --ds-overlay: rgb(9 24 19 / 58%);
  --ds-shadow: 0 6px 22px rgb(5 19 14 / 13%);
  --ds-shadow-small: 0 2px 8px rgb(5 19 14 / 10%);
  --ds-modal-shadow: 0 16px 48px rgb(5 19 14 / 28%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="day"]):not([data-theme="night"]) {
    color-scheme: dark;
    --ds-page: #172b28;
    --ds-surface: #203b35;
    --ds-raised: #27443c;
    --ds-soft: #294940;
    --ds-ink: #f7f7ef;
    --ds-muted: #c0d0c5;
    --ds-faint: #adc2b4;
    --ds-line: #476457;
    --ds-line-strong: #789789;
    --ds-mint: #c0eed6;
    --ds-mint-hover: #d3f6e2;
    --ds-mint-ink: #233c36;
    --ds-mint-soft: #2d5142;
    --ds-link: #b9efd7;
    --ds-link-hover: #d3f6e2;
    --ds-peach: #594438;
    --ds-peach-ink: #ffdbc1;
    --ds-lilac: #443e59;
    --ds-lilac-ink: #e5d5ff;
    --ds-yellow: #50472c;
    --ds-yellow-ink: #fff0ae;
    --ds-sky: #304e5a;
    --ds-sky-ink: #dbefff;
    --ds-success: #b9efd7;
    --ds-success-soft: #2d5142;
    --ds-warning: #fff0ae;
    --ds-warning-soft: #50472c;
    --ds-danger: #ffa4ae;
    --ds-danger-soft: #542f38;
    --ds-overlay: rgb(9 24 19 / 58%);
    --ds-shadow: 0 6px 22px rgb(5 19 14 / 13%);
    --ds-shadow-small: 0 2px 8px rgb(5 19 14 / 10%);
    --ds-modal-shadow: 0 16px 48px rgb(5 19 14 / 28%);
  }
}

/* The old names remain usable by independently loaded controllers and templates. */
:root:root,
html[data-theme],
html[data-brand],
.eg3-root,
.fd3-root,
.htg-root,
.route-reward,
.sprint-shell,
.lens-admin {
  --page: var(--ds-page);
  --bg: var(--ds-page);
  --card: var(--ds-surface);
  --surface: var(--ds-surface);
  --surface-raised: var(--ds-raised);
  --surface-soft: var(--ds-soft);
  --surface-muted: var(--ds-soft);
  --surface-subtle: var(--ds-soft);
  --surface-strong: var(--ds-ink);
  --soft: var(--ds-soft);
  --text: var(--ds-ink);
  --ink: var(--ds-ink);
  --text-soft: var(--ds-muted);
  --text-faint: var(--ds-faint);
  --text-muted: var(--ds-muted);
  --muted: var(--ds-muted);
  --quiet: var(--ds-muted);
  --line: var(--ds-line);
  --line-strong: var(--ds-line-strong);
  --border-color: var(--ds-line);
  --accent: var(--ds-link);
  --accent-hover: var(--ds-link-hover);
  --accent-text: var(--ds-link);
  --accent-ink: var(--ds-surface);
  --accent-soft: var(--ds-mint-soft);
  --deep: var(--ds-link);
  --primary: var(--ds-link);
  --secondary: var(--ds-sky-ink);
  --lime: var(--ds-mint);
  --green: var(--ds-success);
  --green-soft: var(--ds-success-soft);
  --success: var(--ds-success);
  --success-soft: var(--ds-success-soft);
  --amber: var(--ds-warning);
  --amber-soft: var(--ds-warning-soft);
  --warning: var(--ds-warning);
  --warning-soft: var(--ds-warning-soft);
  --red: var(--ds-danger);
  --red-soft: var(--ds-danger-soft);
  --danger: var(--ds-danger);
  --danger-soft: var(--ds-danger-soft);
  --blue: var(--ds-sky-ink);
  --blue-soft: var(--ds-sky);
  --purple: var(--ds-lilac-ink);
  --purple-soft: var(--ds-lilac);
  --focus: var(--ds-link);
  --shadow: var(--ds-shadow);
  --shadow-small: var(--ds-shadow-small);
  --radius-xl: var(--ds-radius);
  --radius-lg: var(--ds-radius-inner);
  --radius-md: var(--ds-radius-inner);
  --radius-sm: 12px;
  --sidebar: var(--ds-surface);
  --topbar: var(--ds-surface);
  --gate-brand-bg: var(--ds-mint-soft);
  --gate-brand-text: var(--ds-ink);
  --hub-ink: var(--ds-ink);
  --hub-teal: var(--ds-link);
  --hub-mint: var(--ds-mint-soft);
  --hub-paper: var(--ds-page);
  --hub-white: var(--ds-surface);
  --hub-line: var(--ds-line);
  --hub-muted: var(--ds-muted);
  --hub-radius: var(--ds-radius);
  --lottery-bg: var(--ds-page);
  --lottery-surface: var(--ds-surface);
  --lottery-soft: var(--ds-soft);
  --lottery-text: var(--ds-ink);
  --lottery-muted: var(--ds-muted);
  --lottery-line: var(--ds-line);
  --lottery-accent: var(--ds-link);
  --lottery-accent-strong: var(--ds-link-hover);
  --lottery-accent-ink: var(--ds-surface);
  --lottery-green: var(--ds-success);
  --lottery-green-soft: var(--ds-success-soft);
  --lottery-amber: var(--ds-warning);
  --lottery-amber-soft: var(--ds-warning-soft);
  --lottery-red: var(--ds-danger);
  --lottery-red-soft: var(--ds-danger-soft);
  --lottery-shadow: var(--ds-shadow);
  --route-ink: var(--ds-ink);
  --route-teal: var(--ds-link);
  --route-line: var(--ds-line);
  --sprint-ink: var(--ds-ink);
  --sprint-teal: var(--ds-link);
  --lens-line: var(--ds-line);
  --lens-muted: var(--ds-muted);
  --htg-ink: var(--ds-ink);
  --htg-green: var(--ds-link);
  --htg-line: var(--ds-line);
  --htg-muted: var(--ds-muted);
  --eg3-bg: var(--ds-surface);
  --eg3-soft: var(--ds-soft);
  --eg3-ink: var(--ds-ink);
  --eg3-muted: var(--ds-muted);
  --eg3-line: var(--ds-line);
  --eg3-accent: var(--ds-link);
  --eg3-accent-ink: var(--ds-surface);
  --fd3-card: var(--ds-surface);
  --fd3-soft: var(--ds-soft);
  --fd3-ink: var(--ds-ink);
  --fd3-muted: var(--ds-muted);
  --fd3-line: var(--ds-line);
  --fd3-accent: var(--ds-link);
  --fd3-accent-ink: var(--ds-surface);
}

html, body {
  font-family: var(--ds-font);
  background-color: var(--ds-page);
  color: var(--ds-ink);
}
html body :is(button, input, select, textarea) { font-family: var(--ds-font); }
html body :is(.page-heading h1, .profile-name, .hub-hero h1, .card h1, .lottery-card h1) {
  letter-spacing: -.025em;
  line-height: 1.25;
  font-weight: 760;
}
html body :is(.page-heading p, .hub-subtitle, .section-intro, .section-kicker, .fine-print,
  .privacy-note, .privacy-copy, .hub-page-note, .hub-policy-note, .hub-provenance,
  .form-guidance, .field-help, .field-note, .meta, .reference, .muted) { color: var(--ds-muted); }
html body :is(.lead, .privacy, .hub-lens-caption, .hub-lens-subtitle,
  .hub-lens-game-note, .hub-lens-privacy, .hub-english, .hub-sharing-note,
  .route-reward-note, .route-reward-dates, .route-reward-intro,
  .route-reward-message, .pfm-help, .pfm-empty, .pfm-preview > p,
  .htg-diagram-caption, .htg-route-hint, .htg-status) { color: var(--ds-muted); }
html body .hub-lens-copy :is(.hub-lens-subtitle, .hub-lens-state),
html body .hub-menu-lens :is(strong, small),
html body .hub-menu-heading > p:last-child,
html body .hub-lens-conditions summary { color: var(--ds-ink); }
html body :is(.pfm, .pfm-field, .pfm-status) { color: var(--ds-ink); }
html body .pfm-kicker { color: var(--ds-link); }
html body .data-preferences-dialog .dp-hint,
html body .visitor-offer .visitor-offer-status { color: var(--ds-muted); }
html body .visitor-offer .visitor-offer-note { color: var(--ds-sky-ink); }

/* Cards, forms and read-only records share surfaces, without altering their layout. */
html body :is(.panel, .card, .section-card, .status-card, .album-card, .public-identity-card,
  .detail-card, .branding-card, .channel-card, .profile-card, .work-card, .account-mobile-card,
  .metric-card, .feedback-item, .meal-change-card, .meal-date-card, .lottery-campaign-card,
  .lottery-campaign-panel, .lottery-inventory-card, .lottery-claim-admin-card,
  .operational-form-card, .operational-form-detail-panel, .lottery-card, .result-card,
  .claim-panel, .preview-card, .eligibility-card, .staff-card, .staff-tool,
  .hub-info-card, .hub-commercial-card, .hub-share-card, .hub-lottery, .hub-challenge,
  .material-list, .material-create, .material-summary, .material-action-panel,
  .material-approvals, .material-request-card, .material-history-card,
  .reuse-item, .reuse-history-item, .lens-admin-record, .lens-admin-capacity-form,
  .entry-existing-card, .entry-experiment-panel, .companion-study-panel,
  .companion-study-card, .companion-study-member, .commercial-list-card,
  .commercial-editor, .commercial-confirm, .album-progress-card, .vd-panel,
  .vd-metric, .ea-panel, .ea-metric, .ea-definitions, .htg-detail,
  .htg-route, .htg-stay, .htg-weather, .htg-root, .route-reward,
  .eg3-root, .fd3-root, .fd3-aside, .fd3-detail, .eg3-detail,
  .hub-lens-service, .hub-game-loader, .hub-lens-inclusions p) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-small);
}
html body :is(.empty-state, .material-empty, .commercial-empty, .album-progress-empty,
  .hub-empty, .detail-placeholder, .definition-callout, .form-context,
  .lens-admin-facts, .lens-admin-slot, .lens-admin-secret, .material-figure,
  .qr-destination, .qr-effective-state-callout, .route-admin-summary,
  .companion-study-entry, .entry-experiment-summary, .entry-existing-summary,
  .hub-admin-metric, .hub-admin-history-row, .operational-form-summary,
  .primary-work-credential-summary, .ea-note, .vd-note, .dp-choice,
  .pfm-share-fallback, .metrics .metric, .route-reward-stock,
  .route-reward-steps li, .htg-shorter) {
  background-color: var(--ds-soft);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
  box-shadow: none;
}
html body :is(.login-brand, .gate-brand, .hub-media-card, .hub-menu-primary,
  .profile-hero, .material-receipt, .creator-material-panel, .quick-action,
  .overview-todo-card, .hub-photo-frame-entry) {
  background-color: var(--ds-mint-soft);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}
html body :is(.hub-media-card, .hub-menu-primary) :is(h2, h3, strong, .hub-media-description,
  .hub-eyebrow--light, .hub-menu-media-note, .hub-external-note) { color: var(--ds-ink); }
html body .hub-media-card::after { content: none; }
html body .hub-sprint-card::after { background: none; }
html body .tile {
  background-color: var(--ds-mint-soft);
  background-image: none;
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
}
html body :is(.hub-lens-offer, .hub-menu-lens, .profile-lottery, .visitor-offer,
  .hub-companion-panel, .material-art-lock, .photo-frame-promo) {
  background-color: var(--ds-peach);
  background-image: none;
  color: var(--ds-ink);
  border-color: color-mix(in srgb, var(--ds-peach-ink) 18%, var(--ds-peach));
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-small);
}
html body :is(.hub-sprint-card, .hub-menu-challenge, .route-reward-overview,
  .profile-event-guides, .hub-experiment-prompt, .lens-admin-inventory-setup) {
  background-color: var(--ds-lilac);
  background-image: none;
  color: var(--ds-ink);
  border-color: color-mix(in srgb, var(--ds-lilac-ink) 18%, var(--ds-lilac));
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-small);
}
html body :is(.hub-sprint-card, .route-reward-overview) p,
html body :is(.hub-lens-copy, .hub-menu-lens) p { color: var(--ds-muted); }
html body :is(.hub-menu-guide-grid, .hub-menu-grid) > a,
html body .profile-event-guide {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
  box-shadow: var(--ds-shadow-small);
}
html body :is(.hub-menu-guide-grid, .hub-menu-grid) > a:nth-child(3n + 1) { background-color: var(--ds-sky); }
html body :is(.hub-menu-guide-grid, .hub-menu-grid) > a:nth-child(3n + 2) { background-color: var(--ds-yellow); }
html body :is(.hub-menu-guide-grid, .hub-menu-grid) > a:nth-child(3n) { background-color: var(--ds-lilac); }
html body :is(.hub-menu-grid, .hub-menu-guide-grid) :is(small, .hub-menu-icon) { color: var(--ds-ink); }
html body :is(.hub-lens-label, .hub-lens-city, .hub-experiment-prompt-label,
  .hub-companion-kicker, .visitor-offer-label, .htg-meta span) {
  background-color: var(--ds-peach);
  color: var(--ds-peach-ink);
  border-color: transparent;
}
html body :is(.album-icon, .quick-action__icon, .metric-icon, .hub-info-number,
  .hub-step-number, .status-icon) {
  background-color: var(--ds-sky);
  background-image: none;
  color: var(--ds-sky-ink);
  border-color: var(--ds-line);
  border-radius: 14px;
}

/* Navigation retains its fixed/sticky/mobile behavior and its permission visibility. */
html body :is(.sidebar, .studio-sidebar, .topbar, .studio-topbar, .mobile-nav-sheet,
  .profile-menu, .account-menu, .workspace-switcher, .hub-header) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  box-shadow: var(--ds-shadow-small);
}
html body :is(.sidebar, .studio-sidebar) :is(.sidebar-brand, .sidebar-foot,
  .sidebar-note, .nav-section-label) { color: var(--ds-muted); border-color: var(--ds-line); }
html body :is(.nav-item, .nav-button, .nav-group-toggle, .mobile-more-button,
  .workspace-switch, .event-workspace-tabs button, .hub-quick-nav a,
  .profile-nav a, .hub-admin-subnav button, .commercial-tabs button,
  .entry-experiment-tabs button, .entry-existing-tabs button,
  .companion-study-tabs button, .lens-admin-tabs button, .vd-tabs button,
  .eg3-tabs button, .htg-filters button) {
  min-height: var(--ds-touch);
  background-color: transparent;
  background-image: none;
  color: var(--ds-muted);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
}
html body :is(.nav-item, .nav-button, .nav-group-toggle, .workspace-switch).is-active,
html body :is(.nav-item, .nav-button, .workspace-switch)[aria-current="page"],
html body :is(.event-workspace-tabs, .hub-quick-nav, .profile-nav, .hub-admin-subnav,
  .commercial-tabs, .entry-experiment-tabs, .entry-existing-tabs,
  .companion-study-tabs, .lens-admin-tabs, .vd-tabs, .eg3-tabs, .htg-filters)
  :is(.is-active, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) {
  background-color: var(--ds-mint);
  background-image: none;
  color: var(--ds-mint-ink);
  border-color: #78b49a;
  box-shadow: none;
}
html body .visitor-data-admin .vd-button[aria-pressed="true"],
html body :is(.htg-route, .eg3-node, .eg3-task, .eg3-quick-button,
  .eg3-section-button, .eg3-camera)[aria-pressed="true"],
html body .route-reward-steps li.is-current {
  background-color: var(--ds-mint);
  color: var(--ds-mint-ink);
  border-color: #78b49a;
}
html[data-theme] body :is(.nav-item, .nav-button, .workspace-switch).is-active {
  color: var(--ds-mint-ink);
}
html body :is(.nav-item, .nav-button, .nav-group-toggle):hover {
  background-color: var(--ds-soft);
  color: var(--ds-ink);
}
html body :is(.nav-badge, .nav-count, .nav-icon, .privacy-chip, .count-chip) {
  background-color: var(--ds-lilac);
  color: var(--ds-lilac-ink);
  border-color: transparent;
}

/* Existing button classes include ordinary templates, public tools and lazy modules. */
html body :is(.button, .primary, .secondary, .primary-button, .secondary-button,
  .primary-link, .secondary-link, .primary-action, .action-link, .draw-button,
  .scan-button, .close-button, .hub-button, .route-reward-button,
  .profile-lottery-action, .profile-nfc-action, .eg3-button, .eg3-quick-button,
  .fd3-button, .htg-share, .pfm button, .dp-button, .vd-button, .ea-button,
  .sprint-primary, .sprint-secondary, .sprint-pause, .sprint-sound, .sprint-close,
  .visitor-offer-link, .hub-companion-links a, .hub-companion-code-row button) {
  min-height: var(--ds-touch);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  border-radius: var(--ds-radius-inner);
  border-color: var(--ds-line-strong);
  box-shadow: none;
  text-shadow: none;
}
html body :is(.button--secondary, .button--quiet, .secondary, .secondary-button,
  .secondary-link, .hub-button--outline, .sprint-secondary, .dp-button,
  .data-preferences-dialog .dp-button, .vd-button, .ea-button,
  .eg3-button, .fd3-button, .pfm button) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
}
html body :is(.button.button--primary, .primary, .primary-button, .primary-link,
  .primary-action, .draw-button, .scan-button, .hub-button.hub-button--ink,
  .hub-button.hub-button--primary, .hub-button.hub-button--video,
  .route-reward-button, .profile-lottery-action, .profile-nfc-action,
  .eg3-button.eg3-button--primary, .fd3-button.fd3-button--primary,
  .sprint-shell .sprint-primary, .dp-button.dp-primary, .pfm .pfm-primary) {
  background-color: var(--ds-mint);
  background-image: none;
  color: var(--ds-mint-ink);
  border-color: #78b49a;
  box-shadow: var(--ds-shadow-small);
}
html body :is(.button.button--primary, .primary, .primary-button, .primary-link,
  .primary-action, .draw-button, .scan-button, .hub-button.hub-button--ink,
  .hub-button.hub-button--primary, .hub-button.hub-button--video,
  .route-reward-button, .sprint-shell .sprint-primary, .dp-button.dp-primary,
  .pfm .pfm-primary):hover:not(:disabled) {
  background-color: var(--ds-mint-hover);
  color: var(--ds-mint-ink);
}
html body :is(.button.button--danger, .danger-button) {
  background-color: var(--ds-danger-fill);
  background-image: none;
  color: var(--ds-danger-ink);
  border-color: var(--ds-danger-fill);
  box-shadow: none;
}
html body :is(.button.button--danger, .danger-button):hover:not(:disabled) {
  background-color: #922432;
  color: var(--ds-danger-ink);
  border-color: #922432;
}
html body :is(.text-button, .hub-text-button, .dp-text-button, .visitor-offer-link,
  .text-link, .hub-back, .hub-header-link, .profile-event-guide-action,
  .ea-link, .eg3-source-link) {
  min-height: var(--ds-touch);
  color: var(--ds-link);
  text-underline-offset: 3px;
}
html body :is(.visitor-offer, .hub-photo-frame-entry) :is(a, button),
html body .hub-companion-links a,
html body .hub-companion-code-row button {
  min-height: var(--ds-touch);
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-link);
  border-color: var(--ds-line-strong);
  border-radius: var(--ds-radius-inner);
}
html body :is(.icon-button, .password-visibility, .theme-button, .theme-cycle,
  .mobile-more-button, .dp-close, .pfm-close) {
  min-width: var(--ds-touch);
  min-height: var(--ds-touch);
  border-radius: var(--ds-radius-inner);
  background-color: var(--ds-soft);
  color: var(--ds-ink);
  border-color: var(--ds-line);
}

/* Text fields only: do not enlarge hidden inputs, checkboxes or the game's slider. */
html body :is(.field, .compact-field, .scan-field, .hub-bib-form, .route-reward-admin,
  .route-reward-registration, .material-field, .reuse-field, .lens-admin-field,
  .entry-experiment-field, .entry-existing-field, .companion-study-field,
  .commercial-field, .photo-frame-admin-field, .visitor-offer-admin-field,
  .album-progress-field, .pfm-field, .htg-field, .directory-search,
  .complaint-form, .card form, .lottery-card form, .dp-choice, .qr-background-composer,
  .hub-lens-service, .hub-share-panel, .material-pack-dialog, .vd-filters,
  .ea-filters, .ea-search, .ea-custom-range)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
  min-height: var(--ds-touch);
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line-strong);
  border-radius: var(--ds-radius-inner);
  box-shadow: none;
}
html body input::placeholder,
html body textarea::placeholder { color: var(--ds-faint); opacity: 1; }
html body :is(input, textarea)[readonly] { background-color: var(--ds-soft); }
html body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ds-link); }
html body :is(.field-check, .check-option, .checkbox-row, .reuse-delete-ack,
  .photo-frame-admin-check, .visitor-offer-admin-check, .entry-experiment-check,
  .companion-study-check, .confirm-check, .dp-choice) { min-height: var(--ds-touch); }
html body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--ds-link);
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
}

html body :is(.table-wrap, .table-panel, .hub-admin-table-wrap, .ea-table-scroll,
  .vd-table-scroll, .entry-experiment-table-wrap, .operational-form-entry-scroll,
  .lottery-redemption-records-scroll) {
  background-color: var(--ds-surface);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
}
html body :is(table, th, td) { border-color: var(--ds-line); }
html body :is(.table-wrap, .ea-table, .vd-table, .hub-admin-table-wrap,
  .operational-form-entry-table, .meal-summary-table, .meal-preference-admin-table,
  .lottery-redemption-records-table) th {
  background-color: var(--ds-soft);
  color: var(--ds-muted);
}
html body :is(.table-wrap, .ea-table, .vd-table, .hub-admin-table-wrap,
  .operational-form-entry-table, .lottery-redemption-records-table) tbody tr:hover { background-color: var(--ds-mint-soft); }
html body :is(.bar-track, .rank-track, .ea-chart-bars) { background-color: var(--ds-soft); }
html body :is(.bar-fill, .rank-fill, .ea-bar) {
  background-color: var(--ds-mint);
  background-image: none;
  color: var(--ds-mint-ink);
}

/* Guide details also inherit the shared colors, including their own nested text. */
html body .hub-entry-note { background-color: var(--ds-soft); }
html body .hub-menu-icon { background-color: var(--ds-mint-soft); }
html body .hub-menu-media-note { color: var(--ds-muted); }
html body .hub-data-notice p { color: var(--ds-sky-ink); }
html body .hub-data-notice a { color: var(--ds-link); }

/* Meaning stays consistent: gentle informational color, strong error/destructive color. */
html body :is(.notice, .notice-banner, .security-notice, .guidance-card,
  .public-data-notice, .hub-data-notice, .hub-companion-observation,
  .lens-admin-message, .material-message, .visitor-offer-note, .vd-rules,
  .dp-rules, .entry-experiment-notes, .entry-experiment-message,
  .companion-study-message, .entry-existing-summary, .hub-experiment-disclosure,
  .data-preferences-dialog .dp-rules, .data-preferences-dialog .dp-feedback) {
  background-color: var(--ds-sky);
  background-image: none;
  color: var(--ds-sky-ink);
  border-color: color-mix(in srgb, var(--ds-sky-ink) 20%, var(--ds-sky));
  border-radius: var(--ds-radius-inner);
}
html body :is(.notice--warning, .notice.notice--warning, .notice-banner--warning,
  .notice-banner.notice-banner--warning, .alert, .hub-lottery-notice,
  .lottery-edit-lock, .lottery-identity-boundary, .lottery-redeemer-warning,
  .meal-handover-notice, .schedule-alert--warning, .ea-notice, .permission-note,
  .view-preview-banner, .claim-security-notice) {
  background-color: var(--ds-warning-soft);
  background-image: none;
  color: var(--ds-warning);
  border-color: color-mix(in srgb, var(--ds-warning) 24%, var(--ds-warning-soft));
  border-radius: var(--ds-radius-inner);
}
html body :is(.notice--warning, .notice-banner--warning, .lottery-redeemer-warning,
  .meal-handover-notice, .claim-security-notice) :is(p, small) { color: var(--ds-warning); }
html body :is(.hub-state-pill.is-open, .hub-task-state.is-complete,
  .hub-verification:not(.is-pending), .material-state--printed, .reuse-badge--active,
  .lens-admin-inventory-item.is-available, .is-success.form-message,
  .schedule-alert--ok, .meal-status--confirmed, .meal-status--received,
  .commercial-status--published, .album-progress-state.is-complete) {
  background-color: var(--ds-success-soft);
  color: var(--ds-success);
  border-color: var(--ds-line);
}
html body .data-preferences-dialog .dp-feedback[data-kind="success"] {
  background-color: var(--ds-success-soft);
  color: var(--ds-success);
}
html body :is(.form-message.is-error, .form-message[data-kind="error"],
  .material-message[data-kind="error"], .lens-admin-message--error,
  .pfm-status--error, .photo-frame-admin-error, .visitor-offer-admin-error,
  .album-progress-message--error, .ea-error, .hub-status.is-error,
  .hub-info-card .is-error, .reuse-delete-disclosure,
  .route-reward-message[data-kind="error"],
  .data-preferences-dialog .dp-feedback[data-kind="error"]) {
  background-color: var(--ds-danger-soft);
  color: var(--ds-danger);
  border-color: color-mix(in srgb, var(--ds-danger) 30%, var(--ds-danger-soft));
  border-radius: var(--ds-radius-inner);
}
html body :is(.reuse-delete-summary, .reuse-badge--retired,
  .event-selector-action--archive, .commercial-field-error) { color: var(--ds-danger); }
html body :is(.pill, .status-pill, .source-pill, .type-pill, .material-state,
  .reuse-badge, .hub-state-pill, .hub-task-state, .hub-verification,
  .visitor-offer-label, .album-progress-label) { font-weight: 650; }

/* Dialog geometry, fullscreen flags, visibility and stacking are owned by each tool. */
html body :is(.modal-card, .dialog-frame, .recent-auth-dialog, .account-security-dialog,
  .recovery-dialog, .operational-form-dialog-card, .badge-wizard-dialog,
  .material-pack-dialog, .lens-admin-confirm, .data-preferences-dialog,
  .pfm-dialog, .claim-fullscreen, .qr-material-modal, .mobile-nav-sheet) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-modal-shadow);
}
html body :is(.modal-header, .modal-footer, .dialog-head, .dialog-actions,
  .pfm-header, .pfm-controls, .material-pack-header, .claim-fullscreen__header,
  .qr-material-controls, .qr-material-footer) {
  background-color: var(--ds-soft);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
}
html body :is(.pfm-backdrop, .lens-admin-confirm-overlay) { background-color: var(--ds-overlay); }
html body :is(dialog, .material-pack-dialog, .data-preferences-dialog)::backdrop { background-color: var(--ds-overlay); }
html body :is(.qr-preview, .qr-thumb, .claim-qr, .wizard-qr-image, .qr-background-preview) {
  /* Keep machine-readable QR backgrounds white in every theme. */
  background-color: #ffffff;
}
html body :is(.pfm-preview, .qr-background-composer, .png-preview) {
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
}

/* Game menus and controls only; no selector here paints canvas or viewport artwork. */
html body .sprint-shell :is(.sprint-overlay, .sprint-result, .sprint-upgrade) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}
/* The legacy immersive sheets use !important on these menu paints. */
html body .sprint-shell .sprint-overlay,
html body .sprint-shell.is-finished .sprint-overlay,
html body .sprint-shell.is-upgrading .sprint-overlay {
  background: var(--ds-surface) !important;
}
html body .sprint-shell .sprint-hud > div {
  background: color-mix(in srgb, var(--ds-surface) 94%, transparent) !important;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  box-shadow: var(--ds-shadow-small);
}
html body .sprint-shell .sprint-hud :is(strong, b, span) { color: var(--ds-ink); }
html body .sprint-shell :is(.sprint-help, .sprint-note, .sprint-knowledge-disclaimer,
  .sprint-route-disclaimer, .sprint-route-description) { color: var(--ds-muted); }
html body .sprint-shell :is(.sprint-overlay, .sprint-result, .sprint-upgrade)
  :is(h2, h3, .sprint-title, .sprint-eyebrow, .sprint-feedback) { color: var(--ds-ink); }
html body .sprint-shell :is(.sprint-upgrade-choices button, .sprint-result-stats > *,
  .sprint-record, .sprint-knowledge) {
  background-color: var(--ds-lilac);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-inner);
}
html body .sprint-shell :is(.sprint-upgrade-choices button, .sprint-controls button,
  .sprint-pause, .sprint-sound, .sprint-close) { min-height: var(--ds-touch); }
html body .sprint-shell :is(.sprint-pause, .sprint-sound, .sprint-close) {
  background-color: var(--ds-surface);
  background-image: none;
  color: var(--ds-ink);
  border-color: var(--ds-line-strong);
  border-radius: var(--ds-radius-inner);
}
html body.hub-game-page.rsm-game-immersive .sprint-controls > button {
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  border-color: var(--ds-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.button, .nav-item, .nav-button, .hub-button, .album-card,
    .reuse-item, .material-card, .lens-admin-record, .visitor-offer-link) { transition: none; }
}

/* S79: multilingual layouts keep controls readable without making the whole
   page scroll sideways. These rules do not change table data or form values. */
html body :is(.page-heading, .panel-header, .hub-view-heading, .material-pack-header,
  .scene-layout-heading, .photo-frame-admin-header) > * { min-inline-size: 0; }
html body :is(.page-heading, .panel-header, .hub-view-heading) :is(h1, h2, p),
html body :is(.hub-menu-grid, .metric-card, .vd-metric, .ea-summary-card) :is(strong, span, p) {
  overflow-wrap: anywhere;
}
html:lang(en) body :is(.segmented button, .workspace-tabs button,
  .hub-admin-tabs button, .entry-experiment-tabs button, .companion-study-tabs button,
  .material-pack-controls label, .scene-layout-button) {
  white-space: normal;
  line-height: 1.4;
}
html body :is(.table-wrap, .ea-table-scroll, .vd-table-scroll,
  .entry-experiment-table-wrap, .operational-form-entry-scroll) {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-line-strong) var(--ds-soft);
}
html body :is(.material-pack-dialog, .photo-frame-admin, .scene-layout-admin) :is(label, button, summary) {
  line-height: 1.45;
}
@media (max-width: 720px) {
  html body :is(.page-heading, .panel-header) { flex-wrap: wrap; row-gap: 12px; }
  html body :is(.heading-actions, .panel-header .inline-actions) { min-inline-size: 0; flex-wrap: wrap; }
  html body :is(.material-pack-controls, .material-pack-row) { grid-template-columns: minmax(0,1fr); }
  html body :is(.material-pack-dialog, .photo-frame-admin, .scene-layout-admin) :is(button, select, summary) { min-block-size: var(--ds-touch); }
  html body :is(.metric-card, .vd-metric, .ea-summary-card) { min-inline-size: 0; }
}