/* Header menus and site preferences: accent palettes, the settings menu, and
   the nav's More and phone Menu. One source, internal/publicpage/prefs.css;
   sites/holmhq.com/prefs.css is a byte-identical copy (go test ./sites). Pages
   supply the neutral tokens --bg, --text, --raise, --line and --muted, and the
   page frame's header and .site-nav. */

/* Accents. Ember is the default; prefs.js sets data-accent on <html>, and each
   swatch carries its own data-accent so it paints itself. light-dark() follows
   the page's color-scheme, so one rule covers both themes. */
:root,
[data-accent="ember"] {
  --accent: light-dark(#a8400c, #ffb163);
  --accent-soft: light-dark(#f6e8de, #2a1d14);
  --mark: light-dark(#e0501f, #ff6a3d);
  --selection: light-dark(#f8c79a, #6b3412);
  --wm-0a: light-dark(#f08a3c, #ffb163);
  --wm-0b: light-dark(#e9572a, #ff6a3d);
  --wm-1a: light-dark(#cf4818, #e0501f);
  --wm-1b: light-dark(#8f3107, #9e3608);
  --plate-accent: #ffb163;
}
[data-accent="moss"] {
  --accent: light-dark(#3f6b1f, #b5dc8a);
  --accent-soft: light-dark(#e8eedd, #1a2214);
  --mark: light-dark(#5b9a2a, #8fcf5a);
  --selection: light-dark(#cfe3b0, #3a5424);
  --wm-0a: light-dark(#a3c95a, #c5e69e);
  --wm-0b: light-dark(#6fa83a, #8fcf5a);
  --wm-1a: light-dark(#4f8a2a, #5b9a2a);
  --wm-1b: light-dark(#2f5a17, #34601a);
  --plate-accent: #b5dc8a;
}
[data-accent="fjord"] {
  --accent: light-dark(#1d5f99, #9fcbfa);
  --accent-soft: light-dark(#e1eaf3, #121c27);
  --mark: light-dark(#2f7fcf, #5ea4ee);
  --selection: light-dark(#bcd6f2, #23466e);
  --wm-0a: light-dark(#74b4ee, #b4d7fc);
  --wm-0b: light-dark(#3d8ad8, #5ea4ee);
  --wm-1a: light-dark(#2a6cb5, #2f7fcf);
  --wm-1b: light-dark(#17406f, #1b4a80);
  --plate-accent: #9fcbfa;
}
[data-accent="heather"] {
  --accent: light-dark(#6a3d9a, #cfb4fa);
  --accent-soft: light-dark(#ece5f4, #1e1828);
  --mark: light-dark(#8c5bd0, #a985f0);
  --selection: light-dark(#dac8f2, #46306a);
  --wm-0a: light-dark(#c3a0ee, #dcc8fd);
  --wm-0b: light-dark(#9b6ade, #a985f0);
  --wm-1a: light-dark(#7a48c2, #8656d0);
  --wm-1b: light-dark(#4a2a7c, #4f2f86);
  --plate-accent: #cfb4fa;
}

/* Menus. prefs.js marks <html> .js and wires each menu button; its
   aria-expanded shows or hides the panel straight after it. One panel look. */
.settings-panel, .js .site-menu, .js .site-more-links {
  position: absolute; z-index: 40; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0;
  border: 1px solid var(--line); border-radius: 0.75rem; background: var(--bg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%), 0 2px 6px rgb(0 0 0 / 6%);
}
@media (prefers-reduced-motion: no-preference) {
  .settings-panel, .js .site-menu, .js .site-more-links { animation: menu-in 120ms ease-out; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
}

/* Settings: an avatar button that opens the theme switch above the accent
   swatches. The slot keeps its size before (or without) script, so headers
   never shift. */
.settings { position: relative; flex: none; width: 2.25rem; height: 2.25rem; }
.settings-button {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--raise); color: var(--muted); cursor: pointer;
}
.settings-button:hover, .settings-button[aria-expanded="true"] { color: var(--text); border-color: var(--mark); }
.settings-button svg { width: 1.25rem; height: 1.25rem; }
.settings-button[aria-expanded="false"] + .settings-panel { display: none; }
.settings-panel { display: grid; gap: 0.5rem; padding: 0.5rem; }
.settings-choices { display: flex; gap: 0.25rem; }
.settings-choices button {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.settings-choices button:hover { color: var(--text); }
.settings-segment { padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.settings-segment button { flex: 1; border-radius: 999px; }
.settings-segment button[aria-pressed="true"] { background: var(--raise); color: var(--text); }
.settings-choices svg { width: 1.125rem; height: 1.125rem; }
.settings-swatch span { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--mark); }
.settings-swatch[aria-pressed="true"] span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--mark); }

/* Nav: Docs and FAQ, the rest under More; on phones one Menu holds all five.
   Without script the wrappers drop out and the page frame's plain links show. */
.site-menu, .site-more, .site-more-links { display: contents; }
.site-nav-button { display: none; }
.js .site-nav { order: 0; flex-basis: auto; position: relative; }
.js .site-nav-button {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;
  border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer;
}
.site-nav-button::after {
  content: ""; width: 0.375em; height: 0.375em; margin-block-start: -0.25em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.site-nav-button[aria-expanded="true"]::after { margin-block: 0.25em 0; transform: rotate(-135deg); }
.site-nav-button:hover, .site-nav-button[aria-expanded="true"],
.site-more:has([aria-current="page"]) > .site-nav-button { color: var(--text); }
.js .site-menu, .js .site-more-links { flex-direction: column; min-width: 10rem; padding: 0.375rem 1rem; }
@media (width < 48rem) {
  .js .site-more-button { display: none; }
  .js .site-menu { display: flex; }
  .js .site-menu-button[aria-expanded="false"] + .site-menu { display: none; }
}
@media (min-width: 48rem) {
  .js .site-menu-button { display: none; }
  .js .site-more { display: block; position: relative; }
  .js .site-more-links { display: flex; }
  .js .site-more-button[aria-expanded="false"] + .site-more-links { display: none; }
}
@media (forced-colors: active) {
  .settings-segment button[aria-pressed="true"], .settings-swatch[aria-pressed="true"] { outline: 1px solid ButtonText; }
  .settings-swatch span { forced-color-adjust: none; }
}