/* The support site's settings (assets/settings.js): the light colour scheme, the accent colours and the text sizes,
   with the same colours as the app's own. Loaded after each page's own styles, whose dark colours and lime are the
   defaults. */

:root[data-accent="green"] { --accent: #5ebb47; }
:root[data-accent="yellow"] { --accent: #d0df4a; }
:root[data-accent="cyan"] { --accent: #38e1ff; }
:root[data-accent="orange"] { --accent: #ffb547; }
:root[data-accent="red"] { --accent: #ff6464; }
:root[data-accent="purple"] { --accent: #b98cff; }
:root[data-accent="blue"] { --accent: #6aa8ff; }
:root[data-accent="pink"] { --accent: #ff7ccb; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f7; --panel: #ecedee; --text: #151612; --muted: #5f635d;
  --line: #d5d8d9; --accent: #456d00; --accent-text: #ffffff; --chip: #e3e5e5;
  --field: #fbfbfb; --edge: #8e938e; --bad: #c4262e; --warn: #8a5a00; --note: #f6efd6;
}
:root[data-theme="light"][data-accent="green"] { --accent: #2f7d1e; }
:root[data-theme="light"][data-accent="yellow"] { --accent: #7a7400; }
:root[data-theme="light"][data-accent="cyan"] { --accent: #006c87; }
:root[data-theme="light"][data-accent="orange"] { --accent: #9a5000; }
:root[data-theme="light"][data-accent="red"] { --accent: #c4262e; }
:root[data-theme="light"][data-accent="purple"] { --accent: #6d3fd1; }
:root[data-theme="light"][data-accent="blue"] { --accent: #1f5fd6; }
:root[data-theme="light"][data-accent="pink"] { --accent: #b01b7b; }

/* Colours the pages set directly, for the light scheme. */
:root[data-theme="light"] .wordmark span { color: var(--muted); }
:root[data-theme="light"] ::placeholder { color: #6c716b; }
:root[data-theme="light"] .doc strong { color: #000000; }
:root[data-theme="light"] .doc tr:nth-child(even) td { background: #f0f1f2; }
/* The admin keeps its own light colours in admin/admin.css. */

/* Text size: the whole page grows, like the browser's zoom. The "are you human" check has a fixed width, so it keeps
   its own size. */
:root[data-size="large"] body { zoom: 1.125; }
:root[data-size="larger"] body { zoom: 1.25; }
:root[data-size="large"] #turnstile { zoom: 0.889; }
:root[data-size="larger"] #turnstile { zoom: 0.8; }

/* The header's links wrap onto a second line on a narrow screen, or with bigger text, instead of running off it. */
header nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }

/* The settings controls (settings.html and the admin's settings). */
.set-group { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; min-width: 0; }
.set-group legend { font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 17px; padding: 0 6px; margin-left: -6px; }
.set-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.set-options { display: flex; flex-wrap: wrap; gap: 8px; }
.set-option { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 15px; cursor: pointer; color: var(--text); }
.set-option:hover { border-color: var(--muted); }
.set-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.set-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.set-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.45); }
.sw-theme-system { background: linear-gradient(135deg, #f6f6f7 50%, #101112 50%); }
.sw-theme-dark { background: #101112; }
.sw-theme-light { background: #f6f6f7; }
.sw-accent-lime { background: #d2ff50; }
.sw-accent-green { background: #5ebb47; }
.sw-accent-yellow { background: #d0df4a; }
.sw-accent-cyan { background: #38e1ff; }
.sw-accent-orange { background: #ffb547; }
.sw-accent-red { background: #ff6464; }
.sw-accent-purple { background: #b98cff; }
.sw-accent-blue { background: #6aa8ff; }
.sw-accent-pink { background: #ff7ccb; }
:root[data-theme="light"] .sw-accent-lime { background: #456d00; }
:root[data-theme="light"] .sw-accent-green { background: #2f7d1e; }
:root[data-theme="light"] .sw-accent-yellow { background: #7a7400; }
:root[data-theme="light"] .sw-accent-cyan { background: #006c87; }
:root[data-theme="light"] .sw-accent-orange { background: #9a5000; }
:root[data-theme="light"] .sw-accent-red { background: #c4262e; }
:root[data-theme="light"] .sw-accent-purple { background: #6d3fd1; }
:root[data-theme="light"] .sw-accent-blue { background: #1f5fd6; }
:root[data-theme="light"] .sw-accent-pink { background: #b01b7b; }
.sw-size-normal, .sw-size-large, .sw-size-larger { display: none; }
.set-actions { margin: 4px 0 22px; }
.set-reset { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.set-reset:hover { color: var(--text); border-color: var(--muted); }
.set-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The language picker (assets/i18n.js), at the end of each help page's header menu, and the note on pages that
   aren't translated yet. */
.lang-wrap { display: inline-flex; align-items: center; }
.lang-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-pick { font: inherit; font-size: 14px; color: var(--text); background: var(--field, var(--bg)); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 6px; cursor: pointer; }
.lang-pick:hover { border-color: var(--muted); }
.lang-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-note { background: var(--chip, var(--panel)); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px;
  margin: 16px 0 0; font-size: 15px; }
:root[lang="en"] .lang-note { display: none; }