/* Review scope: parent pages only; independent products retain their own themes. */
:root { color-scheme: light; }
.cm-preferences { padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.cm-preferences[hidden] { display: none; }
.cm-preferences .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cm-preferences label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.cm-preferences select { font: inherit; min-height: 44px; max-width: 100%; padding: 8px 32px 8px 10px; color: var(--ink); background: var(--cm-surface); border: 1px solid var(--muted); border-radius: 8px; }
.cm-preferences p { flex: 1 1 300px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f5; --ink-2: #243c50; --paper: #101e2b;
  --muted: #bbcbd4; --muted-dark: #bbcbd4; --line: #516979; --line-dark: #516979;
  --blue-deep: #8ccbea; --green-deep: #8adca4;
  --cm-mist: #182e3e; --cm-sage: #1b302e; --cm-surface: #182c3b; --cm-footer: #142633;
}
html[data-theme="dark"] .site-header { background: #182e3e; }
html[data-theme="dark"] :is(.hero, .page-hero, .profile-hero) {
  background: linear-gradient(180deg, var(--cm-mist), var(--paper));
}
html[data-theme="dark"] :is(.chip, .track-note, .service, .brief-form, .brief-review, .faq, .faq-item) { background: var(--cm-surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(input, textarea, select) { background: var(--cm-surface); color: var(--ink); border-color: var(--muted); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .status { background: #18382a; color: #b5ebc6; border-color: #7aa38a; }
html[data-theme="dark"] .footer-status { background: #18384b; color: #b0dff6; border-color: #7096ab; }
html[data-theme="dark"] :is(.button, .nav a.nav-cta):is(:hover, :focus-visible) { background: #0c5178; color: #fcfaf5; }
html[data-theme="dark"] :is(.button-secondary, .button-secondary:hover) { background: var(--cm-surface); color: var(--blue-deep); }
html[data-theme="dark"] .cm-hero-film-controls button { background: #243c50; color: #fcfaf5; }
html[data-theme="dark"] .footer-bottom { border-color: var(--line); }
html[data-theme="dark"] .sector-index { color: var(--blue-deep); }
@media (prefers-reduced-motion: reduce) {
  .cm-preferences, .cm-preferences * { transition: none; animation: none; }
}

/* Existing contact/profile components have light backgrounds of their own. */
html[data-theme="dark"] .brief-actions .button-dark { background: #243c50; color: #fcfaf5; }
html[data-theme="dark"] .brief-actions .button-outline { background: var(--cm-surface); color: var(--ink); border-color: var(--muted); }
html[data-theme="dark"] .brief-actions .button:hover,
html[data-theme="dark"] .brief-actions .button:focus-visible { background: #0c5178; color: #fcfaf5; }
html[data-theme="dark"] :is(.fold > summary, .area > summary)::after { background: var(--cm-surface); color: var(--blue-deep); border-color: var(--line); }
.work-status, .tl-now { font-size: 12px; }
@media print {
  .cm-preferences { display: none; }
  html[data-theme="dark"] { --ink: #183247; --muted: #4c5f68; --paper: #fff; --cm-surface: #fff; --cm-mist: #fff; --cm-sage: #fff; --cm-footer: #fff; --blue-deep: #0c5178; --green-deep: #236335; }
}


/* Fixed foreground/background pair: dark ink tokens must not meet the light skip-link surface. */
.skip-link, .skip-link:focus, .skip-link:focus-visible { color: #183247; background: #fcfaf5; }
.skip-link:focus, .skip-link:focus-visible { outline: 3px solid #0c5178; outline-offset: 3px; box-shadow: 0 0 0 3px #fcfaf5; }

/* Owner review: quiet visible controls, with 44px semantic hit areas retained. */
.cm-preferences { padding: 4px 0; }
.cm-preferences .shell { gap: 4px 16px; }
.cm-preferences label { gap: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
html .cm-preferences select {
  min-height: 44px; padding: 4px 22px 4px 4px; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink); font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
html .cm-preferences select:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.cm-preferences p { font-size: 12px; line-height: 1.4; }
.cm-hero-film-controls { gap: 4px 8px; margin-top: 6px; }
html .hero .cm-hero-film-controls button,
html .hero .cm-hero-film-controls a {
  position: relative; isolation: isolate; flex: 0 0 auto;
  min-height: 44px; min-width: 44px; padding: 8px 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink); font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
html .hero .cm-hero-film-controls button::before,
html .hero .cm-hero-film-controls a::before {
  content: ""; position: absolute; inset: 8px 0; z-index: -1; pointer-events: none;
  border: 1px solid var(--line); border-radius: 6px; background: var(--cm-surface);
}
html .hero .cm-hero-film-controls button:hover::before,
html .hero .cm-hero-film-controls a:hover::before { border-color: var(--muted); }
html .hero .cm-hero-film-controls button:focus-visible,
html .hero .cm-hero-film-controls a:focus-visible {
  outline: 2px solid var(--blue-deep); outline-offset: 2px; box-shadow: none;
}
.cm-hero-film-status { margin-top: 4px; font-size: 12px; }