/* Appearance and accessibility rules shared by every page (see theme.js). Each page defines its own color tokens,
   light and dark; this file only switches what both have in common. */

/* The logo: dark lettering on light pages, light lettering on dark ones. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline; }
}

/* Larger text: the whole page scales, so tap targets grow with it. */
:root[data-text="large"] body { zoom: 1.15; }

/* High contrast: secondary text as strong as the main text, borders clearly visible. */
html:root[data-contrast="high"] {  /* html:root outranks the pages' own :root[data-theme] token rules */
  --muted: var(--ink);
  --line: color-mix(in srgb, var(--ink) 55%, var(--bg));
}
:root[data-contrast="high"] a { text-decoration: underline; }

/* Less motion: the person's choice, or the phone's setting while on auto. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] *, :root[data-motion="auto"] *::before, :root[data-motion="auto"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

/* The appearance controls (JobSwipeUI.controls), the same on every page. */
.ui-prefs { display: flex; flex-direction: column; gap: 14px; }
.ui-pref { display: flex; flex-direction: column; gap: 6px; }
.ui-pref > span { font-size: 14px; font-weight: 700; color: var(--ink); }
.ui-pref > small { font-size: 12px; color: var(--muted); margin-top: -4px; }
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.ui-seg button { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; }
.ui-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); font-weight: 700; }
.ui-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }