/* Site-wide colour tokens. Dark is the default; [data-theme="light"] is set
   by the toggle in the nav (remembered in localStorage). */
:root {
  --bg:#07080c; --bg-rgb:7 8 12;
  --fg:#fff; --fg-rgb:255 255 255;
  --card:#0d0f16; --card-rgb:13 15 22;
  --card-2:#121521; --card-border:#232838;
  --btn2-bg:#1c1f27; --btn2-bg-hover:#262a35; --btn2-border:#333743; --btn2-border-hover:#454b5a;
  --field-bg:#161923; --field-border:#2a2f3d;
  --gold:#ffc000; --gold-text:#ffc000; --gold-fill:#ffc000;
  --navy:#0d1f4c;
  --line:rgb(var(--fg-rgb) / 0.07);
  --txt:rgb(var(--fg-rgb) / 0.72);
  --txt-dim:rgb(var(--fg-rgb) / 0.45);
  --glow:rgba(26,44,90,0.85);
  --shadow:rgba(0,0,0,0.6);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#f5f4ef; --bg-rgb:245 244 239;
  --fg:#0f1626; --fg-rgb:15 22 38;
  --card:#ffffff; --card-rgb:255 255 255;
  --card-2:#f0eee7; --card-border:#e2dfd5;
  --btn2-bg:#ffffff; --btn2-bg-hover:#f0eee7; --btn2-border:#d6d2c6; --btn2-border-hover:#bdb8aa;
  --field-bg:#ffffff; --field-border:#d6d2c6;
  --gold-text:#9a6f00;
  --line:rgb(var(--fg-rgb) / 0.09);
  --glow:rgba(255,192,0,0.10);
  --shadow:rgba(15,22,38,0.12);
  color-scheme:light;
}
/* Darker app accents so they read on a light page (app screens keep --mock-accent) */
:root[data-theme="light"] .app-fielddoc   { --accent:#2563eb; }
:root[data-theme="light"] .app-fieldstamp { --accent:#5b5bd6; }
:root[data-theme="light"] .app-fieldlink  { --accent:#0f8f80; }

/* Logo swap */
.logo-on-light { display:none !important; }
:root[data-theme="light"] .logo-on-dark { display:none !important; }
:root[data-theme="light"] .logo-on-light { display:block !important; }

/* Toggle button */
.theme-toggle {
  width:34px; height:34px; flex-shrink:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgb(var(--fg-rgb) / 0.15); color:rgb(var(--fg-rgb) / 0.75);
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background:rgb(var(--fg-rgb) / 0.06); color:var(--fg); border-color:rgb(var(--fg-rgb) / 0.3); }
.theme-toggle svg { width:16px; height:16px; }
.theme-toggle .i-moon { display:none; }
:root[data-theme="light"] .theme-toggle .i-sun { display:none; }
:root[data-theme="light"] .theme-toggle .i-moon { display:block; }

/* Light mode softening of dark-only decoration */
:root[data-theme="light"] #starfield { display:none; }
:root[data-theme="light"] .blob, :root[data-theme="light"] .blob2 { opacity:0.12 !important; }
html { transition:background-color 0.25s; }

/* ── Client login menu (in the nav on every page) ── */
.login-menu { position:relative; }
.login-btn {
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; cursor:pointer;
  font-family:inherit; font-size:0.78rem; font-weight:600; color:var(--fg);
  background:transparent; border:1px solid rgb(var(--fg-rgb) / 0.15); border-radius:999px;
  transition:background 0.15s, border-color 0.15s;
}
.login-btn:hover, .login-menu.open .login-btn { background:rgb(var(--fg-rgb) / 0.06); border-color:rgb(var(--fg-rgb) / 0.3); }
.login-btn svg { width:10px; height:10px; transition:transform 0.2s; }
.login-menu.open .login-btn svg { transform:rotate(180deg); }
.login-pop {
  position:absolute; right:0; top:calc(100% + 10px); width:290px; z-index:300;
  background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:8px;
  box-shadow:0 24px 60px var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.login-menu.open .login-pop { opacity:1; visibility:visible; transform:none; }
.login-pop-h { font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-dim); padding:8px 10px 6px; }
.login-pop a { display:flex; align-items:center; gap:12px; padding:10px; border-radius:11px; text-decoration:none; color:var(--fg); transition:background 0.15s; }
.login-pop a:hover, .login-pop a:focus-visible { background:rgb(var(--fg-rgb) / 0.06); outline:none; }
.login-pop b { display:block; font-size:0.86rem; font-weight:700; }
.login-pop small { display:block; font-size:0.72rem; color:var(--txt-dim); margin-top:1px; }
.app-ic { width:32px; height:32px; border-radius:9px; flex-shrink:0; color:#fff; font-size:0.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.app-ic.fd { background:#2563eb; } .app-ic.fs { background:#0a5bd1; } .app-ic.fl { background:#0071e3; }
.login-pop .arrow { margin-left:auto; color:var(--txt-dim); font-size:0.9rem; }

/* Phone: logins live in the burger menu on pages that have one */
.mm-h { padding:16px 24px 6px; font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-dim); border-bottom:0 !important; }
.mobile-menu a.mm-login { display:flex; align-items:center; gap:12px; }
.mobile-menu a.mm-login .app-ic { width:26px; height:26px; font-size:0.6rem; border-radius:7px; }
.mobile-menu.open { max-height:620px !important; }
@media (max-width:880px) {
  .login-menu.collapse-mobile { display:none; }
}
@media (max-width:520px) {
  .login-btn { padding:0 11px; }
}
/* Legal pages: their top links crowd the bar on phones (the page has its own doc menu) */
@media (max-width:880px) {
  nav.site-nav .nav-links { display:none; }
  nav.site-nav .nav-inner { padding:0 16px; }
  nav.site-nav .nav-cta { padding:8px 12px; font-size:0.72rem; }
}
@media (max-width:400px) { nav.site-nav .nav-cta { display:none; } }

/* Phone menu rows: client login + theme switch */
.mobile-menu .mm-row {
  display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:16px 24px; font-family:inherit; font-size:0.9rem; font-weight:600; color:rgb(var(--fg-rgb) / 0.75);
  background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; height:auto; text-decoration:none;
}
.mobile-menu .mm-row:hover { color:var(--fg); background:none; }
.mobile-menu .mm-row svg { width:17px; height:17px; flex-shrink:0; }
.mm-theme .t-dark { display:none; }
:root[data-theme="light"] .mm-theme .t-light { display:none; }
:root[data-theme="light"] .mm-theme .t-dark { display:inline; }
/* On phones, pages with a menu keep only the logo and the menu button in the top bar */
@media (max-width:880px) {
  .desk-only { display:none !important; }
  .nav-right { gap:10px; }
}

/* ── Header theme switch (slide toggle) ── */
.theme-toggle:not(.mm-theme) {
  position:relative; width:58px; height:32px; padding:0; border-radius:999px; flex-shrink:0;
  background:#15171e; border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
  transition:background 0.25s, border-color 0.25s;
}
.theme-toggle:not(.mm-theme):hover { background:#1b1e27; border-color:rgba(255,255,255,0.22); }
.theme-toggle:not(.mm-theme)::after {
  content:''; position:absolute; top:3px; left:29px; width:24px; height:24px; border-radius:50%;
  background:#f4f4f2; box-shadow:0 1px 4px rgba(0,0,0,0.45);
  transition:left 0.28s cubic-bezier(0.22,1,0.36,1);
}
.theme-toggle:not(.mm-theme) svg {
  position:absolute; top:50%; transform:translateY(-50%); width:16px; height:16px;
}
/* dark: gold moon on the left, knob right */
.theme-toggle:not(.mm-theme) .i-sun { display:none; }
.theme-toggle:not(.mm-theme) .i-moon { display:block; left:8px; color:#f5b800; fill:#f5b800; stroke:#f5b800; }
/* light: knob left, gold sun on the right */
:root[data-theme="light"] .theme-toggle:not(.mm-theme) { background:#e8e5dc; border-color:rgba(15,22,38,0.12); box-shadow:inset 0 1px 3px rgba(15,22,38,0.15); }
:root[data-theme="light"] .theme-toggle:not(.mm-theme)::after { left:3px; background:#fff; box-shadow:0 1px 4px rgba(15,22,38,0.25); }
:root[data-theme="light"] .theme-toggle:not(.mm-theme) .i-moon { display:none; }
:root[data-theme="light"] .theme-toggle:not(.mm-theme) .i-sun { display:block; left:auto; right:8px; color:#e09a00; }
.theme-toggle:not(.mm-theme):focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* Mid widths: let the nav links sit in the flow between logo and buttons so nothing overlaps */
@media (min-width:881px) and (max-width:1200px) {
  .nav-links { position:static !important; transform:none !important; gap:20px !important; margin:0 auto; }
}