/* header.css — styling for the ONE shared site header (js/header.js).
 * Loaded on EVERY page after the page's own stylesheet. Self-sufficient:
 * it defines its own local tokens (warm handoff palette) and uses var(...)
 * fallbacks for the dropdown surfaces, so it renders identically no matter
 * which page CSS it sits next to (style.css / landing.css / guides.css).
 *
 * Structure ("1a Bright & friendly" handoff, v2.1 unified account UI):
 *   .utility-bar  — slim muted strip: account area (Log in / points badge
 *                   + account dropdown) + language selector, right-aligned
 *   .header-main  — sticky translucent bar, IDENTICAL on every page:
 *                   animated logo + wordmark, nav (How it works / Pricing /
 *                   Printers / Guides) + "Start free" CTA
 * Light default + dark via prefers-color-scheme; burger below 900 px
 * (.nav-toggle / .menu-open, wired by header.js). */

:root {
  --hdr-bg: rgba(255, 251, 246, 0.86);
  --hdr-solid: #FFFBF6;
  --hdr-border: #F0EBE2;
  --hdr-ink: #211F1D;
  --hdr-text: #6C665B;
  --hdr-strong: #3B362E;
  --hdr-utility-bg: #F6F4EF;
  --hdr-accent: #EF4E23;
  --hdr-accent-hover: #C23D18;
  --hdr-cta-shadow: 0 6px 16px rgba(239, 78, 35, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root {
    --hdr-bg: rgba(23, 20, 15, 0.86);
    --hdr-solid: #17140F;
    --hdr-border: #332D22;
    --hdr-ink: #F5F1E8;
    --hdr-text: #A69C8C;
    --hdr-strong: #E9E4DA;
    --hdr-utility-bg: #100E0A;
    --hdr-accent: #FF7A45;
    --hdr-accent-hover: #FF9868;
    --hdr-cta-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 0;
  /* identical header height on every page regardless of the page CSS's
   * body line-height (style.css 1.55 vs landing/guides 1.6) */
  line-height: 1.5;
}

/* guides.css/landing.css don't define a global .hidden — the header needs
 * one for its dropdowns on every page. */
.site-header .hidden { display: none !important; }

/* ---------- utility top-bar (language selector, discreet) ---------- */

.utility-bar {
  background: var(--hdr-utility-bg);
  border-bottom: 1px solid var(--hdr-border);
}

.utility-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.18rem 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

/* ---------- main bar ---------- */

.header-main {
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hdr-border);
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- brand: animated hex-nut logo + wordmark ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--hdr-ink);
  text-decoration: none;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
}

.logo svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Load-once entrance (handoff "Logo Animation (load once)", header variant):
 * nut rolls in from the left and settles with a small bounce while the
 * check strokes on. Plays once per page load, then rests. */
@keyframes fms-roll-once {
  0%   { transform: translateX(-88px) rotate(-400deg); opacity: 0; }
  55%  { opacity: 1; }
  78%  { transform: translateX(0) rotate(0deg); }
  86%  { transform: translateX(0) rotate(8deg); }
  94%  { transform: translateX(0) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes fms-check-once {
  0%, 58%   { stroke-dashoffset: 1; }
  82%, 100% { stroke-dashoffset: 0; }
}

.logo svg {
  animation: fms-roll-once 1.15s cubic-bezier(0.34, 1.32, 0.5, 1) both;
  transform-origin: 24px 24px;
}

.logo .logo-check {
  animation: fms-check-once 1.15s ease-out both;
}

/* Reduced motion: skip the entrance, show the resting logo (check drawn —
 * static stroke-dashoffset is 0). Also covers pages whose CSS lacks a
 * global reduced-motion kill switch (guides.css). */
@media (prefers-reduced-motion: reduce) {
  .logo svg, .logo .logo-check { animation: none !important; }
}

/* dark theme: mark-white variant (white hex, orange check) */
@media (prefers-color-scheme: dark) {
  .logo .logo-hex { fill: #FFFFFF; stroke: #FFFFFF; }
  .logo .logo-check { stroke: #EF4E23; }
}

.brand-text { min-width: 0; }

.wordmark {
  display: block;
  font-family: var(--font-display, "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--hdr-ink);
}

/* ---------- collapsible menu (nav + account + CTA) ---------- */

.header-menu {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.nav-link {
  color: var(--hdr-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms ease;
}

.nav-link:hover { color: var(--hdr-ink); }

.nav-link.nav-active { color: var(--hdr-accent); font-weight: 600; }

.nav-cta {
  display: inline-block;
  font-family: var(--font-display, "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif);
  /* brand orange in both themes per the handoff — via --hdr-accent so a
     scoped theme (body.theme-cal, teal calibrate flow) recolors it too */
  background: var(--hdr-accent, #EF4E23);
  color: #fff;
  border: 0;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
  box-shadow: var(--hdr-cta-shadow);
  transition: background 150ms ease;
}

.nav-cta:hover { background: var(--hdr-accent-hover, #C23D18); color: #fff; }

/* ---------- start chooser: CTA opens the two entry points (v2.24.0) ----- */

.start-wrap { position: relative; display: inline-flex; }

.start-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 340px;
  padding: 0.4rem;
  background: var(--hdr-solid, #FFFBF6);
  border: 1px solid var(--hdr-border, #F0EBE2);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 16, 12, 0.16);
  display: none;
}
.start-wrap.start-open .start-pop { display: block; }

.start-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--hdr-strong, #3B362E);
}
.start-opt:hover { background: var(--hdr-utility-bg, #F6F4EF); }
.start-opt + .start-opt { margin-top: 0.15rem; }

.start-opt-icon { flex: none; width: 34px; height: 34px; }
.start-opt-icon svg { width: 100%; height: 100%; }
.start-opt-diag .start-opt-icon { color: #EF4E23; }
.start-opt-cal .start-opt-icon { color: #1E63D6; }
.start-opt-fil .start-opt-icon { color: #1B9E4E; }
.start-opt-fil:hover .start-opt-t { color: #1B9E4E; }
.start-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.5rem;
  border-radius: 99px;
  background: #1B9E4E;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 2px;
  white-space: nowrap;
}

.start-opt-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.start-opt-t { font-weight: 700; font-size: 0.95rem; }
.start-opt-diag:hover .start-opt-t { color: #EF4E23; }
.start-opt-cal:hover .start-opt-t { color: #1E63D6; }
.start-opt-s { font-size: 0.8rem; color: var(--hdr-text, #6C665B); line-height: 1.35; }

@media (prefers-color-scheme: dark) {
  .start-opt-cal .start-opt-icon, .start-opt-cal:hover .start-opt-t { color: #5B9BFF; }
  .start-pop { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
}

/* burger menu (≤900px): the chooser renders inline under the CTA instead
 * of floating — the panel is already a vertical list. */
@media (max-width: 900px) {
  .start-wrap { flex-direction: column; width: 100%; }
  .start-wrap .nav-cta { width: 100%; text-align: center; }
  .start-pop {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.4rem;
    box-shadow: none;
  }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

/* ---------- burger (narrow widths only) ---------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--hdr-border);
  border-radius: 9px;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--hdr-ink);
}

/* ---------- language chip (utility bar, discreet) ---------- */

.lang-picker { position: relative; flex-shrink: 0; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.35rem;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--hdr-text);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: color 150ms ease;
}

.lang-btn:hover { color: var(--hdr-ink); }

.flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  overflow: hidden;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.flag svg { width: 100%; height: 100%; display: block; }

.caret { font-size: 0.6rem; opacity: 0.8; }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 240px;
  background: var(--surface, #fff);
  color: var(--text, #39342C);
  border: 1px solid var(--border, #F0EBE2);
  border-radius: 12px;
  box-shadow: var(--shadow-lift, 0 12px 32px rgba(60, 50, 35, 0.14));
  padding: 0.35rem;
  z-index: 120;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-family: inherit;
}

button.lang-item { cursor: pointer; }
button.lang-item:hover { background: var(--accent-soft, #FFF7F0); }

.lang-active { font-weight: 600; }

.lang-check { margin-left: auto; color: var(--accent, #EF4E23); font-weight: 700; }

.lang-disabled {
  color: var(--text-muted, #6C665B);
  font-size: 0.82rem;
  cursor: default;
  border-top: 1px solid var(--border, #F0EBE2);
  border-radius: 0;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}

.lang-disabled .flag { opacity: 0.75; }

/* ---------- account area (utility bar, all pages) ---------- */

.account-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.account-area:empty { display: none; }

/* Log in — quiet text link/button in the utility bar; sized to the
 * utility strip rather than the main nav. */
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hdr-strong);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 150ms ease;
  white-space: nowrap;
}

.account-btn:hover { color: var(--hdr-accent); }

a.account-btn { text-decoration: none; }

/* initial avatar (owner refinement v2.1) — the account MENU TRIGGER, on the
 * far left of the account area; a clean circular initial, no glyph. */
.account-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* rounded SQUARE avatar (owner request), in the MAIN bar right of the CTA */
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft-2, #FCE9E1);
  color: var(--hdr-accent);
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: box-shadow 150ms ease;
}

/* main-bar account slot: avatar (signed in) or "Sign up / Log in" (signed out),
 * sitting to the right of the primary CTA. */
.account-main-slot {
  display: inline-flex;
  align-items: center;
}
.account-main-slot:not(:empty) { margin-left: 0.65rem; }

.account-avatar-btn:hover .account-avatar,
.account-avatar-btn:focus-visible .account-avatar {
  box-shadow: 0 0 0 2px var(--hdr-accent);
}
.account-avatar-btn:focus { outline: none; }

/* points badge — mono pill, PLAIN display next to the avatar (not a trigger,
 * spec value styling per the handoff) */
span.points-badge {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.65rem;
  font-size: 0.74rem;
  color: var(--hdr-accent);
  background: var(--accent-soft-2, #FCE9E1);
  border-radius: 999px;
  cursor: default;
}

/* dark theme: the soft-orange surfaces need a dark fallback when the page
 * CSS doesn't define --accent-soft-2 (guides/legal) */
@media (prefers-color-scheme: dark) {
  span.points-badge,
  .account-avatar { background: var(--accent-soft-2, #3A2417); }
}

/* the ONE signed-in dropdown (rendered by header.js on every page) */

.account-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* transparent hover BRIDGE: fills the small gap between the avatar and the
 * dropdown so the pointer never leaves the hover region on the way down
 * (belt-and-suspenders with the JS close-delay). */
.account-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 220px;
  background: var(--surface, #fff);
  color: var(--text, #39342C);
  border: 1px solid var(--border, #F0EBE2);
  border-radius: 12px;
  box-shadow: var(--shadow-lift, 0 12px 32px rgba(60, 50, 35, 0.14));
  padding: 0.5rem;
  z-index: 120;
}

/* menu header: email + points, divided from the navigation below */
.account-menu-head {
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border, #F0EBE2);
}

.account-email {
  margin: 0;
  padding: 0.3rem 0.45rem 0.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.account-points-line {
  margin: 0;
  padding: 0 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted, #6C665B);
}

/* a navigation group: bold parent link + indented mono sub-links */
.account-menu-group { margin-top: 0.15rem; }

.account-menu-item {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.45rem 0.45rem;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.account-menu-item:hover { background: var(--accent-soft, #FFF7F0); }

a.account-menu-item { text-decoration: none; color: inherit; }

.account-menu-parent { font-weight: 700; }

.account-submenu {
  display: flex;
  flex-direction: column;
  margin: 0.05rem 0 0.15rem;
}

.account-menu-sub {
  display: block;
  padding: 0.3rem 0.45rem 0.3rem 1.15rem;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-muted, #6C665B);
  text-decoration: none;
  border-radius: 8px;
}

.account-menu-sub:hover {
  background: var(--accent-soft, #FFF7F0);
  color: var(--hdr-accent);
}

.account-menu-signout {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, #F0EBE2);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .header-inner { flex-wrap: wrap; row-gap: 0.4rem; }

  .header-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--hdr-border);
    margin-top: 0.6rem;
  }

  .menu-open .header-menu { display: flex; }

  .header-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav-link {
    display: block;
    text-align: center;
    padding: 0.5rem 0.8rem;
    font-size: 1rem;
  }

  .nav-cta {
    display: block;
    text-align: center;
    padding: 0.75rem 1.1rem;
    font-size: 1rem;
  }

  /* anchor the dropdowns to the utility bar rather than their chips,
   * so they can't clip off the viewport edge */
  .lang-picker { position: static; }
  .account-menu-wrap { position: static; }
  .utility-inner { position: relative; }

  .lang-menu,
  .account-menu {
    left: auto;
    right: 0.6rem;
    top: calc(100% + 0.3rem);
    max-width: calc(100vw - 1.5rem);
  }
}

@media (max-width: 560px) {
  .wordmark { font-size: 1rem; }
}

/* ---------- shared sign-in modal (js/signin.js, every page) ----------
 * Moved here from style.css so the modal renders identically on pages
 * that don't load style.css (landing, guides, legal). Self-sufficient:
 * every token has a light fallback; the page CSS's own dark tokens take
 * over in dark mode (landing/guides/style all define them). */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 13, 25, 0.55);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--surface, #FFFFFF);
  color: var(--text, #39342C);
  border: 1px solid var(--border, #F0EBE2);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-lift, 0 12px 32px rgba(60, 50, 35, 0.14));
  font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif);
}

/* the modal lives on document.body — guides/landing CSS have no global
 * .hidden, so the modal brings its own */
.modal-card .hidden { display: none !important; }

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted, #6C665B);
  background: transparent;
  border: 1px solid var(--border, #F0EBE2);
  border-radius: 50%;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--danger, #D14343);
  border-color: var(--danger, #D14343);
}

.modal-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  color: var(--ink, var(--text, #211F1D));
}

.modal-sub {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--text-muted, #6C665B);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text, #39342C);
  background: var(--bg, #FFFBF6);
  border: 1.5px solid var(--border-strong, #E6DFD2);
  border-radius: var(--radius-sm, 12px);
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent, #EF4E23);
  box-shadow: 0 0 0 3px var(--accent-soft-2, #FCE9E1);
}

.modal-error {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm, 12px);
  background: var(--danger-soft, #FBE3E3);
  color: var(--danger-text, #B23131);
  font-size: 0.8rem;
}

.modal-mail-illo {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--accent, #EF4E23);
}

.modal-done { margin-top: 0.2rem; }

.modal-hint {
  margin: -0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #6C665B);
}

.modal-links {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.modal-links-row {
  margin: 0;
  color: var(--text-muted, #6C665B);
}

.modal-alt-link {
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: var(--accent, #EF4E23);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal-alt-link:hover { color: var(--accent-strong, var(--accent, #C23D18)); }

/* modal buttons — same values as style.css's .btn/.btn-primary so pages
 * without style.css get identical buttons (scoped to the modal) */
.modal-card .btn {
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.65rem 1.4rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong, #E6DFD2);
  background: var(--surface, #FFFFFF);
  color: var(--text, #39342C);
  cursor: pointer;
  transition: all var(--speed, 150ms) ease;
}

.modal-card .btn:hover {
  border-color: var(--accent, #EF4E23);
  color: var(--accent, #EF4E23);
}

.modal-card .btn-primary {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  background: var(--accent, #EF4E23);
  border-color: var(--accent, #EF4E23);
  color: var(--accent-contrast, #ffffff);
  box-shadow: var(--shadow-cta, 0 10px 24px rgba(239, 78, 35, 0.28));
}

.modal-card .btn-primary:hover:not(:disabled) {
  background: var(--accent-strong, #C23D18);
  border-color: var(--accent-strong, #C23D18);
  color: var(--accent-contrast, #ffffff);
}

.modal-card .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Honeypot field ("website"): invisible to humans, present in the DOM for
 * bots. Off-screen rather than display:none — naive bots skip hidden
 * inputs. tabindex=-1 keeps it out of keyboard focus order. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- print: no chrome on paper ---------- */

@media print {
  .site-header { display: none !important; }
  .modal-overlay { display: none !important; }
}

/* ---------- utility-bar version tag (ADMINS ONLY, via header.js) ---------- */
.hdr-version {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--util-fg, #8b8378);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hdr-version.hidden { display: none; }

/* ---------- no-JS navigation fallback (SEO / no-script crawlers) ----------
   Only ever rendered inside <noscript> (see gen-nav-fallback.mjs): invisible
   to JS-enabled browsers, so this styling is purely for the rare no-JS
   visitor. Kept light-weight and theme-agnostic. */
.nav-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border, #e5e0d8);
  font-size: 0.95rem;
}
.nav-fallback a { color: var(--accent, #e8590c); text-decoration: none; font-weight: 600; }
.nav-fallback a:hover { text-decoration: underline; }

/* ---------- site feedback tab (v2.16.0, built by header.js) ---------- */
.fb-tab {
  position: fixed;
  right: 0;
  top: 58%;
  z-index: 900;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: var(--hdr-accent);
  color: #fff;
  border: 0;
  border-radius: 9px 0 0 9px;
  padding: 0.7rem 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.fb-tab:hover { background: var(--hdr-accent-hover); }
.fb-panel {
  position: fixed;
  right: 14px;
  top: 58%;
  transform: translateY(-50%);
  z-index: 901;
  width: min(320px, calc(100vw - 28px));
  background: var(--hdr-solid);
  border: 1px solid var(--hdr-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  padding: 1rem;
  display: none;
}
.fb-panel.fb-open { display: block; }
.fb-title { margin: 0 0 0.6rem; font-weight: 700; color: var(--hdr-ink); }
.fb-choices { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.fb-choice {
  flex: 1;
  padding: 0.55rem 0.4rem;
  border: 1.5px solid var(--hdr-border);
  border-radius: 9px;
  background: none;
  color: var(--hdr-strong);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.fb-choice.fb-sel {
  border-color: var(--hdr-accent);
  background: rgba(239, 78, 35, 0.09);
}
.fb-msg {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--hdr-border);
  border-radius: 9px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--hdr-ink);
  background: var(--hdr-utility-bg);
  margin-bottom: 0.6rem;
  box-sizing: border-box;
}
.fb-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-send { width: 100%; }
.fb-status { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--hdr-text); min-height: 1.1em; }
@media print { .fb-tab, .fb-panel { display: none !important; } }

/* ---------- points nudge (v2.31.0, built by points-nudge.js) ----------
 * A quiet fixed notice bottom-right — no overlay, never blocks anything.
 * Card <-> token FAB; the version badge stays visible below it. */
.pts-nudge {
  position: fixed;
  right: 16px;
  bottom: 34px;
  z-index: 890; /* below the feedback tab/panel (900/901) and modals (1000) */
}
.pts-nudge-card {
  position: relative;
  width: min(320px, calc(100vw - 32px));
  background: var(--hdr-solid);
  border: 1px solid var(--hdr-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  padding: 1rem 1.05rem 1.05rem;
}
.pts-nudge-title {
  margin: 0 1.4rem 0.4rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hdr-ink);
}
.pts-nudge-body {
  margin: 0 0 0.75rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--hdr-text);
}
.pts-nudge-btns { display: flex; flex-direction: column; gap: 0.45rem; }
.pts-nudge-btns .btn.pts-nudge-primary {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--hdr-accent);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.pts-nudge-btns .btn.pts-nudge-primary:hover { background: var(--hdr-accent-hover); }
.pts-nudge-secondary {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--hdr-text);
  text-decoration: underline;
  cursor: pointer;
}
.pts-nudge-secondary:hover { color: var(--hdr-ink); }
.pts-nudge-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  color: var(--hdr-text);
  cursor: pointer;
}
.pts-nudge-close:hover { color: var(--hdr-ink); }
.pts-nudge-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--hdr-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.pts-nudge-fab:hover { background: var(--hdr-accent-hover); }
@media print { .pts-nudge { display: none !important; } }



/* ---------- shared guide-search results (v2.19.0) ----------
 * Used by BOTH the guides-index field and the header "What's the problem?"
 * search below. Positioned against the nearest position:relative wrapper. */
.guide-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 950;
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  background: var(--hdr-solid, #fff);
  border: 1px solid var(--hdr-border, #e2dbd0);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  padding: 0.4rem;
}
.guide-search-count {
  margin: 0.2rem 0.6rem 0.4rem;
  font-size: 0.82rem;
  color: var(--hdr-text, #777);
}
.guide-search-hit {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hdr-ink, inherit);
}
.guide-search-hit:hover,
.guide-search-hit.guide-search-active { background: rgba(239, 78, 35, 0.08); }
.guide-search-title { display: block; font-weight: 700; }
.guide-search-title mark {
  background: rgba(239, 78, 35, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.guide-search-desc {
  display: block;
  font-size: 0.86rem;
  color: var(--hdr-text, #777);
  margin-top: 0.15rem;
}
.guide-search-diag {
  display: block;
  margin: 0.35rem 0.2rem 0.15rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--hdr-border, #e2dbd0);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--hdr-accent, #ef4e23);
  border-radius: 0 0 8px 8px;
}
.guide-search-diag:hover,
.guide-search-diag.guide-search-active { background: rgba(239, 78, 35, 0.08); }

/* the header search field itself — sits RIGHT of the logo in the main
   bar (owner layout: Logo | Search | Menu + CTA); .header-inner's
   space-between pushes the menu group to the far right */
.hdr-search {
  position: relative;
  flex: 1 1 220px;
  max-width: 400px;
  margin: 0 0.4rem;
}
#hdr-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-size: 0.88rem;
  border: 1.5px solid var(--hdr-border, #e2dbd0);
  border-radius: 999px;
  background: var(--hdr-utility-bg, #f6f4ef);
  color: var(--hdr-ink, inherit);
}
#hdr-search::placeholder { color: var(--hdr-text, #8a8375); }
#hdr-search:focus {
  outline: none;
  border-color: var(--hdr-accent, #ef4e23);
  background: var(--hdr-solid, #fff);
}
@media (max-width: 900px) {
  .hdr-search { max-width: none; flex-basis: auto; margin: 0.4rem 0; }
  .hdr-search .guide-search-results { position: static; margin-top: 0.4rem; box-shadow: none; }
}