/* Canonical color tokens. Component styles contain no theme-specific colors. */
:root {
  --desktop: #dce3df;
  --paper: #fffef9;
  --chrome: #edf0e9;
  --ink: #283930;
  --muted: #59665f;
  --line: #c6cec4;
  --blue: #2458c5;
  --yellow: #f5d777;
  --wash: #edf2ff;
  --amber: #f2bc53;
  --selection: #e8eef9;
  --text-selection: #fbe5aa;
  --quiet-hover: #00000007;
  --window-border: #aebbad;
  --window-shadow: #354c3c13;
  --window-shadow-edge: #354c3c12;
  --bevel: #fff;
  --document-icon: #71806f;
  --control-ink: #52614f;
  --control-hover: #fff8;
  --margin-paper: #fafbf6;
  --input-border: #9faa99;
  --composer-shadow: #31443319;
  --composer-shadow-edge: #31443312;
  --input-focus: #7391c5;
  --focus-wash: #2458c510;
  --chrome-line: #d7ddd3;
  --placeholder: #788379;
  --action-border: #b58328;
  --action-edge: #c99b46;
  --action-ink: #302b1d;
  --action-hover: #f7c86b;
  --dialog-shadow: #21392b26;
  --backdrop: #253c2d33;
  --error: #a42716;
  --error-surface: #fff1ec;
  --error-line: #e8b8ae;
  --login-hover: #104bc1;
  --filter-hover: #edf1e8;
  --filter-active: #edf2fc;
  --popover-shadow: #28393019;
  --reference: #f7f8f0;
  --picker-shadow: #28393028;
  --picker-backdrop: #28393012;
  --library-border: #acbaac;
  --library-shadow: #2839300e;
  --library-shadow-edge: #2839300c;
  --toolbar: #f8f9f2;
  --separator: #9ca69c;
  --row-line: #c6cec450;
  --row-hover: #f1f3eb;
  --selection-border: #bfd0ed;
  --link-hover-wash: #2458c512;
  --link-hover: #214991;
  --mobile-backdrop: #28393040;
  --field-border: #c9d0c2;
  --field: #f5f6ef;
  --disabled: #eeeade;
  --disabled-ink: #777b70;
  --disabled-border: #d9d4c7;
  --reference-edge: #95ad8d;
  --book-stroke: #778575;
  --book-page: #fffef9;
  --folder-back: #e4c270;
  --folder-stroke: #8c815e;
  --folder-front: #f5db91;
  --page-fill: #f2f4e9;
  --page-stroke: #8d9b87;
  --attention-marker: #ffd21f;
  --statement-marker: #1762d6;
  --canvas: var(--desktop);
  --accent: var(--blue);
  --on-accent: #ffffff;
  --mark-ink: #283930;
  --marker-opacity: .42;
  --attention-opacity: .42;
  --attention-ink: var(--ink);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --desktop: #181e1b;
  --paper: #242c27;
  --chrome: #2d3630;
  --ink: #eee9dd;
  --muted: #b2bdb2;
  --line: #4d5b51;
  --blue: #9bbcff;
  --yellow: #dbc174;
  --wash: #303f50;
  --amber: #e8b954;
  --selection: #35495b;
  --text-selection: #615630;
  --quiet-hover: #ffffff0b;
  --window-border: #637568;
  --window-shadow: #00000040;
  --window-shadow-edge: #00000030;
  --bevel: #ffffff0d;
  --document-icon: #b1bdae;
  --control-ink: #bac7ba;
  --control-hover: #ffffff0d;
  --margin-paper: #262f29;
  --input-border: #718276;
  --composer-shadow: #00000040;
  --composer-shadow-edge: #00000030;
  --input-focus: #9bbcff;
  --focus-wash: #9bbcff20;
  --chrome-line: #4d5b51;
  --placeholder: #aab6ab;
  --action-border: #bb913e;
  --action-edge: #a17b32;
  --action-ink: #29251a;
  --action-hover: #f3c66d;
  --dialog-shadow: #00000060;
  --backdrop: #080d0ab3;
  --error: #ffaaa0;
  --error-surface: #442e2b;
  --error-line: #bb8178;
  --login-hover: #aac6ff;
  --filter-hover: #354137;
  --filter-active: #303f50;
  --popover-shadow: #00000050;
  --reference: #303b32;
  --picker-shadow: #00000050;
  --picker-backdrop: #080d0a70;
  --library-border: #637568;
  --library-shadow: #00000030;
  --library-shadow-edge: #ffffff0b;
  --toolbar: #29332c;
  --separator: #8d9d90;
  --row-line: #4d5b5150;
  --row-hover: #303c33;
  --selection-border: #829dc6;
  --link-hover-wash: #9bbcff18;
  --link-hover: #b8ceff;
  --mobile-backdrop: #080d0ab3;
  --field-border: #718276;
  --field: #1d251f;
  --disabled: #353b34;
  --disabled-ink: #97a192;
  --disabled-border: #4d5b51;
  --reference-edge: #91ae86;
  --book-stroke: #554e31;
  --book-page: #d6ceac;
  --folder-back: #a88f51;
  --folder-stroke: #514b35;
  --folder-front: #c3aa66;
  --page-fill: #38463b;
  --page-stroke: #a8b69e;
  --attention-marker: #ffe34a;
  --statement-marker: #245fa8;
  --on-accent: #1e2923;
  --mark-ink: #342e1c;
  --marker-opacity: .8;
  --attention-opacity: .95;
  --attention-ink: #28281e;
  color-scheme: dark;
}

.appearance { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--muted); font: 11px var(--mono); cursor: pointer; }
.appearance input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.appearance-track { width: 32px; height: 20px; flex-shrink: 0; padding: 3px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--chrome); pointer-events: none; }
.appearance-track::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 120ms ease; }
.appearance input:checked + .appearance-track { background: var(--amber); border-color: var(--action-border); }
.appearance input:checked + .appearance-track::after { transform: translateX(12px); background: var(--action-ink); }
.appearance input:focus-visible + .appearance-track { outline: 2px solid var(--blue); outline-offset: 4px; }
select:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
input { color: var(--ink); }
input::placeholder { color: var(--placeholder); opacity: 1; }
::selection { color: var(--ink); }
.wordmark svg, .wordmark svg path:last-child { stroke: var(--mark-ink); }
.mobile-brand svg { color: var(--mark-ink); }
@media (max-width: 800px), (max-width: 1024px) and (max-height: 650px) {
  #mobile-panel .appearance { justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--line); font: 16px var(--sans); color: var(--ink); }
  .appearance { min-height: 44px; }
  .login-page .masthead { gap: 16px; flex-wrap: wrap; }
  .login-page .appearance { font: 12px var(--sans); }
}
@media (forced-colors: active) {
  .filter-plane canvas, .filter-legend i { display: none; }
  .filter-plane .attention-mark { color: CanvasText; }
  #filter-description { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; overflow: visible; }
  .document-window, .composer, .library-window { border-color: CanvasText; }
  .appearance-track { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
  .appearance-track::after { background: ButtonText; }
  .appearance input:checked + .appearance-track { background: Highlight; border-color: Highlight; }
  .appearance input:checked + .appearance-track::after { background: HighlightText; }
}

@media (prefers-reduced-motion: reduce) {
  .appearance-track::after { transition: none; }
}

/* One question highlight color in each theme. */
:root { --inquiry-highlight:#ffe89b; }
:root[data-theme=dark] { --inquiry-highlight:#776414; }