/* Shared by every page, loaded AFTER the page's own <style> (2026-10-10).
   1. a lighter desk: the page background and its grid. The tan and white
      boxes on it (title banner, cards) are deliberately untouched.
   2. the site bar from site.js: Home / Progression / Resources + profile. */

body{background-color:#f8f5ee}
#paper-bg .grid{opacity:.18}
#paper-bg .grid-fine{opacity:.32}
#paper-bg .vignette{background:radial-gradient(ellipse at 45% 32%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 50%),
  radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 60%,rgba(120,100,60,.07) 100%)}

.sitebar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sitenav{display:flex;gap:8px;flex-wrap:wrap}
.sitenav a{font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--glass-2,#fff);border:1.5px solid var(--line-hard);border-radius:999px;padding:8px 18px;
  box-shadow:0 1px 0 rgba(45,69,101,.12),0 3px 10px rgba(45,69,101,.08)}
.sitenav a:hover{border-color:var(--rust);color:var(--rust)}
.sitenav a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

.sitme{position:relative;margin-left:auto}
.mebtn{display:flex;align-items:center;gap:9px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;
  background:var(--glass-2,#fff);border:1.5px solid var(--rust);border-radius:999px;padding:5px 16px 5px 5px;
  box-shadow:0 1px 0 rgba(45,69,101,.12),0 3px 10px rgba(45,69,101,.08)}
.mebtn:hover{background:#fffaf2}
.mebtn .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--font-mono);font-size:14px;color:#fff;background:var(--rust)}
.mebtn .av.none{background:var(--paper-2);color:var(--rust);font-size:17px;border:1.5px dashed var(--rust)}
.mebtn .t{display:flex;flex-direction:column;line-height:1.1}
.mebtn b{font-family:var(--font-mono);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.mebtn small{font-size:14px;font-weight:600;color:var(--ink)}

.mepanel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 26px);
  background:var(--glass-2,#fff);border:1.5px solid var(--line-hard);border-radius:var(--r,10px);padding:14px 16px;
  box-shadow:0 2px 0 rgba(45,69,101,.12),0 14px 34px rgba(45,69,101,.16)}
.mepanel[hidden]{display:none}
.mepanel .mh{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.mepanel .mname{font-family:var(--font-sketch);font-weight:700;font-size:30px;line-height:1.05;margin:4px 0 10px}
.mepanel input{font:inherit;font-size:16px;width:100%;box-sizing:border-box;margin-top:8px;padding:9px 12px;
  border:1.5px solid var(--line-hard);border-radius:7px;background:var(--glass,#f3eee2);color:var(--ink)}
.mepanel .names{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:190px;overflow:auto}
.mepanel .names button{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;background:var(--paper-2);
  border:1px solid var(--line-hard);border-radius:6px;padding:4px 9px;cursor:pointer;color:var(--ink)}
.mepanel .names button:hover{border-color:var(--rust)}
.mepanel .names button.new{border-style:dashed;color:var(--rust)}
.mepanel .mhint{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.4}
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mstats div{background:var(--paper-2);border-radius:7px;padding:7px 8px;text-align:center}
.mstats b{display:block;font-family:var(--font-mono);font-weight:400;font-size:17px}
.mstats span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.mgo{display:block;text-align:center;text-decoration:none;font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--rust);border-radius:8px;padding:9px 12px}
.mgo:hover{filter:brightness(1.08)}
.mrow{display:flex;justify-content:space-between;margin-top:10px}
.mlink{font:inherit;font-size:14px;background:none;border:0;padding:4px 0;cursor:pointer;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px}
.mlink:hover{color:var(--rust)}

@media (max-width:600px){
  .sitenav a{padding:7px 12px;font-size:12.5px;letter-spacing:.1em}
  .mebtn .t small{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:600px){ .sitme{order:-1;flex-basis:100%;display:flex;justify-content:flex-end} .mepanel{right:0} }
/* the tier beside your name (button + profile panel) */
.mebtn em.tier{font-style:normal;font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.08em;
  color:#fff;background:var(--ink);border-radius:4px;padding:1px 6px;margin-left:5px;vertical-align:1px}
.mepanel .mtier{font-family:var(--font-mono);font-weight:400;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--ink);border-radius:5px;padding:2px 8px;vertical-align:6px}

/* profile email (2026-10-15 night) */
.memail{margin:10px 0 12px;font-size:14px}
.memail .mh2{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:6px}
.memail input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line-hard);border-radius:7px;padding:8px 10px;margin-bottom:4px}
.memail .mhint b{color:var(--ink);font-weight:600}
.memail .mlink.inline{display:inline;padding:0;font-size:14px;color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.memail .mlink.strong{color:var(--ink);font-weight:600}

/* ===========================================================================
   DARK SCHEME (2026-10-18). theme.js resolves light/auto/dark and sets
   <html data-theme="light|dark"> before first paint; the light values are the
   pages' own :root blocks, so this is the only dark block there is.
   Same idea in the dark: the grid is the desk, the boxes on it are the
   "paper" you read - only now the desk is a night-blue drafting table and
   the boxes are a step lighter than it, not darker.
   =========================================================================== */
:root{color-scheme:light}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#141a24;
  --paper-2:#2a3444;
  --ink:#e2e8f1;
  --ink-soft:#a3b2c6;
  --graphite:#2b313b;
  --rust:#e8865c;
  --amber:#d9ab45;
  --green:#5fbd7d;
  --green-soft:#78c892;
  --sky:#6fb3e3;
  --violet:#ab9ae8;
  --gold:#f0b53a;
  --silver:#98aabc;
  --bronze:#d4934f;
  --line:rgba(200,214,232,.17);
  --line-hard:rgba(200,214,232,.36);
  --glass:#1b2331;
  --glass-2:#222c3b;
  --shadow:0 1px 0 rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.35);
}
[data-theme=dark] body{background-color:var(--paper)}
[data-theme=dark] #paper-bg .grid-fine{background-image:linear-gradient(rgba(200,214,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(200,214,232,.07) 1px,transparent 1px)}
[data-theme=dark] #paper-bg .vignette{background:radial-gradient(ellipse at 45% 32%,rgba(120,150,200,.07) 0%,rgba(120,150,200,0) 50%),
  radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}

/* things the pages hard-coded as white / near-white / "ink on white" */
[data-theme=dark] .sitenav a[aria-current],
[data-theme=dark] .mebtn em.tier,[data-theme=dark] .mepanel .mtier{color:var(--paper)}
[data-theme=dark] .mebtn:hover{background:var(--paper-2)}
[data-theme=dark] .memail input,[data-theme=dark] .f input,[data-theme=dark] .f select,[data-theme=dark] .f textarea,
[data-theme=dark] .wk .ev,[data-theme=dark] #lpDone .box,[data-theme=dark] #cam .box{background:var(--glass-2)}
[data-theme=dark] #cam textarea{background:var(--glass-2);color:var(--ink)}
[data-theme=dark] .btn.primary:hover{background:#fff}
[data-theme=dark] .modes label:has(input:checked){color:var(--paper)}
[data-theme=dark] .day.is-today{background-color:rgba(95,189,125,.08)}
[data-theme=dark] .rung.mentor{background:rgba(217,171,69,.07)}
[data-theme=dark] .row.me{background:rgba(232,134,92,.10)}
[data-theme=dark] .veil{background:rgba(0,0,0,.55)}
[data-theme=dark] #lpDone{background:rgba(20,26,36,.94)}
[data-theme=dark] .pre .big.on,[data-theme=dark] .badge.checkpoint.won,[data-theme=dark] .badge.checkpoint.won .lab,
[data-theme=dark] .badge.checkpoint.won .lab .type,[data-theme=dark] .badge.checkpoint.won .lab .type::before,
[data-theme=dark] .badge.checkpoint.won .est,[data-theme=dark] .badge.checkpoint.won .more .why,
[data-theme=dark] .badge.checkpoint.won .more .why b,[data-theme=dark] .badge.checkpoint.won .approve,
[data-theme=dark] .badge.checkpoint.won .approve b,[data-theme=dark] .badge.checkpoint.won .permit,
[data-theme=dark] .badge.checkpoint.won .permit b,[data-theme=dark] .badge.checkpoint.won .permit a{color:#10231a}
[data-theme=dark] .badge.checkpoint.won .permit{border-color:#10231a;background-color:rgba(16,35,26,.14)}
[data-theme=dark] .badge.checkpoint.won .nm .st.earned{background:#10231a;color:var(--green)}
[data-theme=dark] .badge.checkpoint.won .std{color:var(--ink)}
[data-theme=dark] #map{background:#1d2628}
[data-theme=dark] .leaflet-tile-pane{filter:brightness(.82) saturate(.85)}

/* ---------- the light / auto / dark switch, in the footer ---------- */
.themeswitch{display:flex;align-items:center;gap:0;margin-left:auto;flex-wrap:wrap}
.themeswitch .tk{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-right:10px}
.themeswitch button{font:inherit;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;color:var(--ink);background:var(--glass-2);border:1.5px solid var(--line-hard);
  padding:5px 11px;margin-left:-1.5px}
.themeswitch button:first-of-type{border-radius:999px 0 0 999px;margin-left:0;padding-left:13px}
.themeswitch button:last-of-type{border-radius:0 999px 999px 0;padding-right:13px}
.themeswitch button i{font-style:normal;font-size:13px;line-height:1}
.themeswitch button:hover{color:var(--rust);border-color:var(--rust);position:relative;z-index:1}
.themeswitch button[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--paper);position:relative;z-index:1}
.themeswitch button:focus-visible{outline:2px solid var(--sky);outline-offset:2px;position:relative;z-index:2}
@media (max-width:600px){ .themeswitch{flex-basis:100%;margin-left:0;margin-top:4px} }