/* Beyond Memories Admin: the BM theme for the vendored shell (site/vendor-shell/admin.css lays the shell out with these
   tokens; ScentDay injects its own "tool system" block, BM uses this file instead). Palette: navy #030F26, gold #DCB640,
   cream, gray #ADB0B2; type: Jost. Light only (an internal tool).
   Contrast (WCAG, checked): ink on paper 17.2:1 · ink-2 7.1:1 · ink-3 5.6:1 (5.0 on surface-2) · gold on navy 9.8:1 ·
   rail-ink-3 (gray) on navy 8.8:1 · accent-ink (dark gold) on white 6.2:1 · ok/warn/risk on their soft fills ≥ 5.1:1.
   Gold is never text on cream (1.75:1): it is a fill, a rule or text on navy. */
:root{
  color-scheme:light;
  --sd-sans:Jost,"Futura","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sd-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sd-hand:Jost,sans-serif;
  --navy:#030F26; --navy-2:#0B1D3F; --navy-3:#13284F; --gold:#DCB640; --gold-ink:#7A5C0E; --gold-soft:#F6ECCB; --cream:#F7F3EA; --gray:#ADB0B2;
  --paper:#F7F3EA; --paper-2:#F1EBDD; --surface:#FFFFFF; --surface-2:#F4EFE4;
  --ink:#030F26; --ink-2:#4B5263; --ink-3:#5B6170;
  --line:#E6DFD0; --line-2:#D3CBBA; --field:#8B8F99; --chip:#EEE7D8;
  --accent:#030F26; --accent-ink:#7A5C0E; --accent-soft:#F6ECCB; --accent-fill:#DCB640; --accent-fill-hover:#E6C55E; --on-accent:#030F26;
  --btn:#030F26; --btn-ink:#F7F3EA; --btn-hover:#13284F;
  --blush:#DCB640; --blush-ink:#030F26;
  --ok:#2F6B3A; --ok-soft:#E4EFE2; --warn:#7F5C1D; --warn-soft:#F7ECD3; --risk:#A3372A; --risk-soft:#F8E1DB;
  --s1:#DCB640; --s2:#7FA7D9; --s3:#ADB0B2; --s4:#9DC08F; --s5:#E3A6A0; --s6:#C9CED6; --s7:#7FC4BE; --s8:#F7F3EA;
  --rail:#030F26; --rail-ink:#F7F3EA; --rail-ink-2:#C9CED6; --rail-ink-3:#ADB0B2; --rail-line:rgba(247,243,234,.14);
  --rail-hover:rgba(247,243,234,.08); --rail-current:#DCB640; --rail-current-ink:#030F26;
  --scrim:rgba(3,15,38,.5);
  --radius:12px; --radius-sm:8px; --radius-lg:16px; --pill:999px;
  --shadow:0 1px 2px rgba(3,15,38,.05),0 10px 28px -18px rgba(3,15,38,.25);
}
html body{font-family:var(--sd-sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased}
html body ::selection{background:var(--gold-soft); color:var(--ink)}
/* focus: navy ring on light surfaces, gold ring on navy (rail, top bar, gate) */
html body :focus-visible{outline:2px solid var(--navy); outline-offset:2px}
html body .rail :focus-visible, html body .topbar :focus-visible{outline-color:var(--gold)}
.search:focus-visible, .field input:focus-visible, .field select:focus-visible{outline:2px solid var(--navy); outline-offset:1px}

/* ---- the lockup: the BM logo + an ADMIN sticker (like ScentDay's) ---- */
.bm-logo{display:block; height:30px; width:auto; flex:none}
.bm-tag{display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; height:20px; padding:0 9px 0 calc(9px + .07em);
  border-radius:var(--pill); background:var(--gold); color:var(--navy); font:600 10.5px/1 var(--sd-sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.bm-tag.sm{height:18px; padding:0 7px 0 calc(7px + .07em); font-size:9.5px}
.bm-tag.lg{height:24px; padding:0 11px 0 calc(11px + .07em); font-size:12px}

/* ---- rail and top bar on navy ---- */
html body .rail{background:var(--rail); color:var(--rail-ink); border-right:1px solid var(--rail-line)}
html body .rail .brand{display:flex; align-items:center; gap:10px; color:var(--rail-ink); text-decoration:none; padding:2px 8px 0; min-height:34px}
html body .rail .tab{color:var(--rail-ink-2); font-family:var(--sd-sans)}
html body .rail .tab:hover{background:var(--rail-hover); color:var(--rail-ink)}
html body .rail .tab[aria-current="page"]{background:var(--rail-current); color:var(--rail-current-ink); font-weight:600}
html body .rail .tabnum{background:var(--gold); color:var(--navy)}
html body .rail .tab[aria-current="page"] .tabnum{background:var(--navy); color:var(--gold)}
html body .crosslink{border:1px solid var(--rail-line); color:var(--rail-ink-2); background:transparent}
html body .crosslink:hover{background:var(--rail-hover); color:var(--rail-ink)}
html body .crosslink b{color:var(--rail-ink)} html body .crosslink i{color:var(--rail-ink-3)}
html body .me{border-top:1px solid var(--rail-line)}
html body .me .link{color:var(--rail-ink-2)} html body .me .link:hover{color:var(--rail-ink)}
html body .av{background:var(--gold); color:var(--navy)}
html body .topbar{background:var(--navy); color:var(--rail-ink); border-bottom:1px solid var(--rail-line)}
html body .topbar .bm-logo{height:22px}
html body .topbar .ttl{font-weight:500; font-size:15px; color:var(--rail-ink-2); margin-left:2px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:860px){
  html body .rail{border-top:1px solid var(--rail-line); border-right:0}
  html body .rail .brand, html body .rail .railfoot{display:none}
  html body .rail{left:0; right:0; width:100%; max-width:100vw; overflow:hidden}
  html body .rail .tabs{min-width:0}
  html body .rail .tab{overflow:hidden; min-width:0}
  html body .rail .tab{border-radius:0; color:var(--rail-ink-2)}
  html body .rail .tab:hover{background:none; color:var(--rail-ink)}
  html body .rail .tab[aria-current="page"]{background:none; color:var(--gold); font-weight:600; box-shadow:inset 0 3px 0 var(--gold)}
}

/* ---- the sign-in door: navy, the logo, a cream card ---- */
html body #gate{background:var(--navy); color:var(--ink)}
#gate .box{background:var(--cream); border-radius:var(--radius-lg); padding:28px 26px 24px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
html body .gatebrand{display:flex; align-items:center; gap:10px; margin:0 0 22px; justify-content:center}
#gate .gatelogo{display:flex; justify-content:center; margin:0 0 22px}
#gate .gatelogo img{height:44px; width:auto}
html body #gate h2{font:500 28px/1.15 var(--sd-sans); letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
html body #gate p{color:var(--ink-2)}
html body #gate label{font-weight:600; color:var(--ink-3); letter-spacing:.12em}
html body #gate input{color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:var(--radius)}
html body #gate input:focus{border-color:var(--navy); box-shadow:0 0 0 3px var(--gold-soft)}
html body #gate button{background:var(--btn); color:var(--btn-ink); font:600 13px/1 var(--sd-sans); letter-spacing:.1em; text-transform:uppercase; padding:16px; border-radius:var(--pill)}
html body #gate button:hover{background:var(--btn-hover)}
html body #gate .err{color:var(--risk)}
html body #gate button.glink{width:auto; background:none; color:var(--accent-ink); padding:6px 4px; font:500 13.5px/1.3 var(--sd-sans); letter-spacing:0; text-transform:none; text-decoration:underline}