/* Gorpology styles. Sections: Tokens and themes · Base · App shell and header · Components · Map: 3D, 2D and globe · Quests · Journal · Inventory and gear · Character and profile · Atlas · Clubs · Stats, leaderboards and challenges · Trail beta and checkpoints · Mountain forecast · Mesh radios and offline maps · Sign-in · Overrides · Utilities.
   Inside each section: base rules, then larger screens, then smaller screens. */

/* ========== Tokens and themes ========== */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-wdth.woff2") format("woff2-variations"),url("../fonts/archivo-wdth.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root[data-theme="blackout"] body::after{display:none}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);--bg:#E6ECEF;--panel:#F4F7F8;--panel-2:#DCE4E8;--line:rgba(13,27,36,.14);--line-strong:rgba(13,27,36,.32);--text:#0D1B24;--muted:#4E606B;--accent:#D9500A;--accent-ink:#FFFFFF;--trent:#9A6A00;--m-collin:#D9500A;--m-ghost:#6B4FD8;--m-trent:#9A6A00;--ice:#0A7484;--warn:#B3420A;--r-green:#1E8A4C;--r-yellow:#A87A00;--r-red:#C8322B;--t-low:#8C9EA7;--t-mid:#B8C5CB;--t-snow:#FFFFFF;--t-line:#0A7484;--font:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;color-scheme:light;--globe-sea:#b7cbd6;--globe-land:#f1ece1;--globe-coast:#8d989f;--sev-info:#3E7CB1;--sev-caution:#C98A00;--sev-danger:#C62828;--r:3px;--ease:.15s ease;--shadow-1:0 1px 2px rgba(13,27,36,.06),0 6px 18px rgba(13,27,36,.08);--shadow-pop:0 12px 32px rgba(0,0,0,.2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#121417;--panel:#1B1E22;--panel-2:#262A30;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.24);--text:#ECEEF0;--muted:#A7AFB7;--accent:#FF8A4C;--accent-ink:#121417;--trent:#F2C14E;--m-collin:#FF8A4C;--m-ghost:#B9A4FF;--m-trent:#F2C14E;--ice:#67D0DF;--warn:#FFA36B;--r-green:#5FD394;--r-yellow:#F4C95A;--r-red:#FF7A7A;--t-low:#262B31;--t-mid:#4A535D;--t-snow:#E9EEF2;--t-line:#67D0DF;color-scheme:dark;--globe-sea:#1A242C;--globe-land:#39424A;--globe-coast:#65717C}
  :root:not([data-theme="light"]) #map2d .leaflet-tile-pane{filter:brightness(.72) contrast(1.05)}
}
:root[data-theme="dark"] #map2d .leaflet-tile-pane{filter:brightness(.72) contrast(1.05)}
:root[data-theme="blackout"] #map2d .leaflet-tile-pane{filter:brightness(.38) sepia(1) saturate(2.4) hue-rotate(-28deg)}
:root[data-theme="dark"]{--bg:#121417;--panel:#1B1E22;--panel-2:#262A30;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.24);--text:#ECEEF0;--muted:#A7AFB7;--accent:#FF8A4C;--accent-ink:#121417;--trent:#F2C14E;--m-collin:#FF8A4C;--m-ghost:#B9A4FF;--m-trent:#F2C14E;--ice:#67D0DF;--warn:#FFA36B;--r-green:#5FD394;--r-yellow:#F4C95A;--r-red:#FF7A7A;--t-low:#262B31;--t-mid:#4A535D;--t-snow:#E9EEF2;--t-line:#67D0DF;color-scheme:dark;--globe-sea:#1A242C;--globe-land:#39424A;--globe-coast:#65717C}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #globe2d .leaflet-tile-pane{filter:brightness(.72) contrast(1.05)}
}
:root[data-theme="dark"] #globe2d .leaflet-tile-pane{filter:brightness(.72) contrast(1.05)}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:inherit}
/* <details> passes its children through an internal wrapper that defaults to content-box */
details>*{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:100;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2{margin:0;font-stretch:75%;font-weight:750;font-size:24px;line-height:1.1}
h3{margin:0;font-stretch:87%;font-weight:700;font-size:15px}
.muted{color:var(--muted)}
.small{font-size:13px}
button.chip:hover{color:var(--text);border-color:var(--text)}
textarea,input[type=text],input[type=search],select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px;padding:10px 12px;font-size:14px;line-height:1.5}
textarea{min-height:120px;resize:vertical}
textarea:focus,input[type=text]:focus,input[type=search]:focus,select:focus{outline:none;border-color:var(--accent)}
[hidden]{display:none!important}
code{font-size:.92em;background:var(--panel-2);padding:1px 5px;border-radius:2px}
body.observer .pm.opt{border-color:var(--ice);color:var(--ice)}
textarea[readonly]{opacity:.85}
body.observer .member-only{display:none!important}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media (max-width:860px){
  body{font-size:15px}
}

/* ========== App shell and header ========== */
#app{height:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"brand tabs stats" "main main main";align-items:end;column-gap:24px;min-height:0}
.hud{display:contents}
.stats{grid-area:stats;padding-right:28px}
.brand p{margin:6px 0 0;color:var(--muted);font-size:13px;white-space:nowrap}
.tabs{grid-area:tabs;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.tab{position:relative;background:none;border:0;padding:12px 18px 16px;font-stretch:87%;font-weight:650;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.tab svg{width:18px;height:18px;flex:none}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .22s ease}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab .count{font-variant-numeric:tabular-nums;letter-spacing:0;font-stretch:100%;font-weight:600;font-size:11px;color:var(--muted);border:1px solid var(--line-strong);padding:0 5px;border-radius:2px}
.key{display:inline-grid;place-items:center;min-width:24px;height:24px;border:1px solid var(--line-strong);border-radius:3px;font-size:11px;font-weight:700;color:var(--muted);margin:0 8px 14px;user-select:none}
.stats{display:flex;justify-content:flex-end;align-items:flex-end;gap:22px;padding-bottom:14px;text-align:right}
.party{display:flex}
.party-btns{display:flex;gap:4px}
.party-lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.party-lbl b{color:var(--text);font-weight:650}
.pm{width:30px;height:30px;padding:0;border:1px solid var(--line-strong);background:transparent;font-stretch:75%;font-weight:850;font-size:15px;border-radius:2px;color:var(--muted)}
.pm:hover{border-color:var(--text);color:var(--text)}
.pm[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pm.ebc[aria-pressed="true"]{background:var(--trent);border-color:var(--trent)}
.stat b{display:block;font-stretch:75%;font-weight:750;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.stat span{white-space:nowrap;font-size:12px;color:var(--muted)}
main{grid-area:main;align-self:stretch;min-height:0;position:relative;border-top:1px solid var(--line)}
.view{position:absolute;inset:0;display:none;min-height:0}
.view.active{display:grid}
.list-col{padding:24px 28px 40px}
.detail-col{border-left:1px solid var(--line);background:var(--panel);padding:24px}
.party-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
@keyframes pulse{from{opacity:.35}to{opacity:1}}
.pm.opt svg{width:17px;height:17px}
.brand{grid-area:brand;padding:16px 0 14px 28px;display:flex;align-items:center;gap:12px}
.brand-logo{width:34px;height:34px;flex:none;display:block;border-radius:8px}
@media (max-width:860px){.brand-logo{width:28px;height:28px;border-radius:7px}.brand{gap:8px}}
.cup{flex:none;color:var(--muted)}
/* The wordmark always on one line, scaled to the screen */
.brand h1{margin:0;font-stretch:62%;font-weight:850;letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap}
.club-btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm.opt{display:grid;place-items:center;margin-left:6px;position:relative}
.tab .count:empty{display:none}
/* Profile button shows your character's head */
.pm.opt.has-face{padding:0;overflow:hidden;background:var(--panel-2)}
.pm.opt.has-face img{width:100%;height:100%;object-fit:cover;display:block}
.pm.opt.has-face[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px;background:var(--panel-2)}
.pm-badge{font-stretch:100%;position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
@media (min-width:861px){
  .tabs{min-width:0;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}
@media (min-width:861px) and (max-width:1320px){
  .brand{padding-left:20px}
}
@media (max-width:860px){
  .brand p{font-size:11.5px;margin-top:3px;white-space:normal}
  .stat span{font-size:11px}
  .stat.hide-sm{display:none}
  .pm{width:28px;height:28px;font-size:14px}
  .party-strip{gap:6px}
  .tabs{justify-content:stretch;gap:0;border-top:1px solid var(--line);background:var(--panel);padding-bottom:env(safe-area-inset-bottom,0px)}
  main{border-top:1px solid var(--line)}
  .tab::after{top:-1px;bottom:auto;left:22%;right:22%}
  .tab .count{display:none}
  .list-col{padding:18px 16px 32px}
  .detail-col.open{display:block}
  .party-lbl{display:block;font-size:11px}
}
.party-lbl{display:block}
@media (max-width:860px){
  .brand{padding:10px 0 10px 16px;min-width:0;gap:8px}
}
@media (max-width:480px){
  .brand{min-width:0;gap:6px}
  .brand .cup{margin-top:0}
}
.brand .cup{width:34px;height:34px;margin-top:-2px}
@media (max-width:860px){
  .brand .cup{width:26px;height:26px}
}
@media (max-width:480px){
  .brand .cup{width:22px;height:22px}
}
@media (max-width:420px){
  .brand p{display:none}
}
@media (max-width:480px){
  .brand p{display:none}
}
@media (max-width:360px){
  .brand .cup{display:none}
}

/* ========== Components ========== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;min-height:0}
/* Buttons: orange for the one main action, outlined for the rest, filled dark when switched on */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);padding:8px 13px;font-weight:600;font-size:13px;white-space:nowrap;border-radius:var(--r);background:var(--panel);transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--warn)}
.btn svg{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:2px;border:1px solid var(--line-strong);color:var(--muted);background:transparent}
.chip.ok{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 55%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.chip.today{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
label.field{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:16px 0 6px}
.bar{height:6px;background:var(--panel-2);border-radius:1px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .4s ease}
.flag{display:flex;gap:10px;padding:10px 12px;border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent);font-size:13px;margin-top:10px}
.sel{position:relative}
.sel.is-selected::before,.sel.is-selected::after{content:"";position:absolute;width:10px;height:10px;border:2px solid var(--accent);pointer-events:none}
.sel.is-selected::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.sel.is-selected::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
.back{display:none}
.empty{border:1px dashed var(--line-strong);padding:28px;text-align:center;color:var(--muted);border-radius:2px}
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(92vw,520px);width:max-content;pointer-events:none}
.toast{background:var(--text);color:var(--bg);padding:10px 16px;border-radius:2px;font-size:14px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:12px;max-width:min(92vw,520px);pointer-events:auto}
.toast.sticky{background:var(--r-red);color:#fff}
.toast-act,.toast-x{background:transparent;border:1px solid currentColor;color:inherit;border-radius:2px;padding:2px 9px;font:inherit;font-size:13px;cursor:pointer;flex:none}
.toast-x{border:0;font-size:20px;line-height:1;padding:0 2px}
.toggle[aria-pressed="false"]{opacity:.55;text-decoration:line-through}
.chip.dim{opacity:.55}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.d-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.filters{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.modal.open{display:grid;place-items:center}
.modal-box{width:min(1000px,100%);max-height:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);overflow:hidden}
.modal-img{background:#000;display:grid;place-items:center;min-height:300px}
.modal-side{padding:22px;overflow:auto;max-height:86vh}
.mdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.sec-actions{display:flex;align-items:center;gap:10px}
.lockmark{display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-1px;color:var(--muted)}
.lockline{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.lockline.is-locked{color:var(--text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.field-set{border:0;padding:0;margin:0}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.checks.stops{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13px}
.check{display:flex;align-items:center;gap:7px}
.row-end{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.main-pick{margin:0 0 14px}
.linkish{background:none;border:0;padding:0;font-weight:600;text-align:left;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.linkish:hover{text-decoration-color:var(--text)}
.pick-box{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:2px;padding:8px 10px;background:var(--bg)}
.checks.pick-box{display:grid;gap:5px;font-size:13px}
.gear-box{max-height:300px}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sw{width:26px;height:26px;padding:0;border-radius:2px;background:var(--c);border:1px solid var(--line-strong)}
.sw.on{outline:2px solid var(--text);outline-offset:2px}
.sw:disabled{cursor:default}
.acc{display:grid;gap:4px;padding:9px 0;border-bottom:1px solid var(--line)}
.acc .swatches{margin-top:2px}
.acc.off{opacity:.6}
.pw{position:relative}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px 10px;font-size:13px;font-weight:650;color:var(--muted)}
.pw-eye:hover{color:var(--text)}
.links .btn span{opacity:.6}
.links a.btn{color:var(--text);text-decoration:none}
.seg{display:inline-flex}
.seg .btn{border-radius:0}
.seg .btn:first-child{border-radius:2px 0 0 2px}
.seg .btn:last-child{border-radius:0 2px 2px 0;margin-left:-1px}
.acc-sec{border:1px solid var(--line);border-radius:2px;background:var(--bg);margin-top:10px}
.acc-sec>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-stretch:87%;font-weight:700;font-size:16px}
.acc-sec>summary::-webkit-details-marker{display:none}
.acc-sec>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.acc-sec[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc-sec>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acc-body{padding:0 16px 16px}
.acc-body>.field:first-child,.acc-body>.filters:first-child{margin-top:0}
/* Layering: modals and sign-in sit above the map's buttons and Leaflet panes */
.modal{position:fixed;inset:0;display:none;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);z-index:1000}
.stars i.on svg{fill:#E8A400}
.stars i.half svg{fill:#E8A400;opacity:.45}
.near-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px 6px 12px;border:1px solid var(--line-strong);background:var(--panel);border-radius:2px}
.near-chip>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place-pick{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.back-pill{padding:6px 10px;margin-bottom:12px}
.member-chips{display:flex;flex-wrap:wrap;gap:6px}
.member-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:13px}
.member-chip:hover{border-color:var(--line-strong)}
.mdot.big{width:16px;height:16px}
.playlist-frame{display:block;width:100%;border:0;border-radius:12px;margin-bottom:6px;background:var(--panel-2)}
.badge{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px;border:1px dashed var(--line-strong);border-radius:2px;color:var(--muted)}
.flag-card{border:1px solid var(--line);border-left:4px solid var(--sev);background:var(--panel);border-radius:2px;padding:10px 12px;margin:8px 0}
.flag-card.sev-info{--sev:var(--sev-info)}
.flag-card.sev-caution{--sev:var(--sev-caution)}
.flag-card.sev-danger{--sev:var(--sev-danger)}
.flag-card .chip.sev{background:var(--sev);color:#fff;border-color:var(--sev)}
.flag-card .d-actions:empty{display:none}
.flag-form{border-left:4px solid var(--sev-caution)}
.flag-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.flag-loc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn[aria-pressed="true"] .muted,.btn[aria-selected="true"] .muted{color:inherit;opacity:.7}
.filters.qpick::-webkit-scrollbar{display:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar .btn::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .2s ease}
.tabbar .btn[aria-pressed="true"]::after,.tabbar .btn[aria-selected="true"]::after{transform:scaleX(1)}
.tabbar .btn .muted{font-size:11px;font-weight:600;border:1px solid var(--line-strong);padding:0 5px;border-radius:var(--r);color:var(--muted);opacity:1}
/* "More" menus: secondary and destructive actions out of the way */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg{width:18px;height:18px}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:190px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:4px;display:flex;flex-direction:column;gap:2px}
.ext-link{display:inline-flex;align-items:baseline;gap:6px;color:var(--text);font-weight:600;font-size:14px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ext-link:hover{text-decoration-color:var(--accent)}
@media (max-width:860px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .modal{padding:0}
  .modal-box{grid-template-columns:1fr;height:100%;max-height:none;overflow:auto;border-radius:0}
}
.opts{grid-template-columns:1fr;width:min(640px,100%)}
@media (max-width:860px){
  .modal-side{max-height:none}
  .filters{overflow-x:auto;flex-wrap:nowrap}
  .two,.checks.stops{grid-template-columns:1fr}
  .filters.qpick{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tabbar .btn .muted{border:0;padding:0 0 0 2px}
}

/* ========== Map: 3D, 2D and globe ========== */
#view-map{grid-template-columns:minmax(0,1fr) 380px}
.map-wrap{position:relative;min-height:0;overflow:hidden}
#terrain{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;will-change:transform;pointer-events:auto;white-space:nowrap}
.lbl-stop{display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line-strong);border-radius:2px;padding:3px 8px 3px 3px;font-size:12px;font-weight:650;transform-origin:0 100%}
.lbl-stop .n{display:grid;place-items:center;width:20px;height:20px;background:var(--panel-2);font-size:11px;font-variant-numeric:tabular-nums}
.lbl-stop.side .n{background:transparent;border:1px dashed var(--line-strong)}
.lbl-stop.on{border-color:var(--accent);color:var(--text)}
.lbl-stop.on .n{background:var(--accent);color:var(--accent-ink)}
.lbl-stop.ebc.on{border-color:var(--trent)}
.lbl-stop.ebc.on .n{background:var(--trent)}
.lbl-stop.off{opacity:.5}
.lbl-stop.off.on{opacity:1}
.lbl-peak{pointer-events:none;z-index:-1;opacity:.85;font-stretch:75%;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.lbl-peak small{display:block;font-weight:500;font-size:11px}
.lbl-photo{width:22px;height:22px;padding:0;background:none;border:0;display:grid;place-items:center}
.lbl-photo::before{content:"";width:13px;height:13px;transform:rotate(45deg);background:var(--ice);border:2px solid var(--bg);border-radius:1px}
.lbl-photo.on::before{background:var(--accent)}
.map-tools{position:absolute;top:14px;left:14px;display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 28px)}
.map-tools .btn{background:color-mix(in srgb,var(--panel) 90%,transparent)}
.map-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.side-panel{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.side-panel>.scroll{flex:1;padding:20px}
.stop-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.stop-row{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;background:none;border:0;border-left:3px solid transparent;padding:8px 8px 8px 6px;text-align:left}
.stop-row:hover{background:var(--panel-2)}
.stop-row.on{border-left-color:var(--accent);background:var(--panel-2)}
.stop-row .n{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-strong);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.stop-row.side .n{border-style:dashed;color:var(--muted)}
.stop-row.ebc.on{border-left-color:var(--trent)}
.stop-row.off{opacity:.55}
.stop-row.off.on{opacity:1}
.stop-grp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line);font-stretch:87%;font-weight:700;font-size:13px}
.stop-grp:first-child{margin-top:4px}
.stop-grp.off{opacity:.6}
.stop-row .el{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stop-detail{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.track b{font-weight:650}
.gps-btns{display:flex;gap:8px}
.gps-btns .btn:not(.primary){background:color-mix(in srgb,var(--panel) 92%,transparent)}
.rec-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:color-mix(in srgb,var(--panel) 95%,transparent);border:1px solid var(--line-strong);padding:8px 8px 8px 12px;border-radius:2px;font-size:13px}
.rec-bar.live{border-color:var(--warn)}
.rec-actions{display:flex;gap:6px}
.rec-hint{margin:0;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--bg) 80%,transparent);padding:3px 8px;border-radius:2px;max-width:340px;text-align:right}
.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#E5484D;margin-right:6px;animation:pulse .8s infinite alternate}
.rec-dot.idle{animation:none}
.lbl-party .pi{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--pc);color:var(--accent-ink);font-stretch:75%;font-weight:850;font-size:13px;border:2px solid var(--bg);box-shadow:0 0 0 2px var(--pc)}
.lbl-party .pt{display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 90%,transparent);padding:2px 7px;border-radius:2px;font-size:12px;line-height:1.25;text-align:left}
.lbl-party .pt small{color:var(--muted);font-size:11px}
.qform input[type=text],.qform input[type=date],.qform input[type=number],.review-form input[type=date],.qform select,#mapshareForm input{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px;padding:9px 11px;font-size:14px}
.qform input:focus,#mapshareForm input:focus{outline:none;border-color:var(--accent)}
.wx{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;font-size:13.5px}
.wx-row{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.wx-where{font-weight:650}
.wx-where small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.wx-tags{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
.q-sec a,.stop-detail a{color:inherit}
.note-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.fnotes{margin-top:16px;display:grid;gap:10px}
.fnote{background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:12px 14px}
.fnote .entry-body{margin-top:8px;font-size:14px}
.fnote .d-actions{margin-top:10px}
.fnote .d-actions .btn{padding:5px 11px}
/* Map: each person's character standing at their last known position */
.lbl-party .pchar{width:36px;height:63px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.lbl-party.has-char .pi{display:none}
.lbl-party.has-char .pt{margin-bottom:4px;border-left:3px solid var(--pc)}
.map-quests{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;max-width:calc(100% - 28px);overflow-x:auto;scrollbar-width:none}
.map-quests .btn{background:color-mix(in srgb,var(--panel) 92%,transparent)}
.map-quests~.map-tools{top:62px}
.map-quests[hidden]~.map-tools{top:14px}
.map-wrap.is-2d .map-note{display:none}
.map-wrap:not(.is-2d) .m2d-only{display:none}
.m2d-tip::before{display:none}
.m2d-person{position:absolute;left:-13px;top:-13px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.m2d-person img{width:32px;height:56px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.m2d-person.has-char{left:-16px;top:-56px;align-items:flex-end}
.m2d-person.has-char .pi{display:none}
.m2d-person .pt small{color:var(--muted);font-size:11px}
.map-tools .btn.icon{padding:0;width:36px;height:36px;justify-content:center}
.map-tools .btn.icon svg{width:17px;height:17px;margin:0}
.map-more{position:absolute;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;min-width:170px;background:var(--panel);border:1px solid var(--line-strong);border-radius:2px}
.map-more[hidden]{display:none}
.map-more .seg{display:flex}
.map-more .seg .btn{flex:1;justify-content:center}
.map-wrap:not(.is-2d) .map-more .m2d-only{display:none}
.map-more .btn{background:var(--panel)}
.map-mode .btn{background:color-mix(in srgb,var(--panel) 92%,transparent)}
.map-note{position:absolute;left:14px;font-size:12px;color:var(--muted);max-width:min(420px,70%);bottom:62px}
/* 3D/2D toggle and, in 2D, Topo/Satellite side by side at the bottom-left */
.map-mode{left:14px;bottom:14px;z-index:500;position:static}
.map-bottom{position:absolute;left:14px;bottom:14px;z-index:500;display:flex;gap:8px}
.map-bottom .btn{background:color-mix(in srgb,var(--panel) 92%,transparent)}
#globeCanvas:active{cursor:grabbing}
.globe-label small{color:var(--muted);font-size:10.5px}
.map-quests .globe-btn{gap:6px}
.map-quests .globe-btn svg{width:16px;height:16px}
.map-wrap.is-globe .map-note{display:none}
.map-wrap.is-globe .map-more [data-layer]{display:none}
.m2d-flag{margin:-30px 0 0 -13px}
.sev-info.m2d-flag,.sev-info.lbl-flag{--sev:var(--sev-info)}
.sev-caution.m2d-flag,.sev-caution.lbl-flag{--sev:var(--sev-caution)}
.sev-danger.m2d-flag,.sev-danger.lbl-flag{--sev:var(--sev-danger)}
.stop-editor .se-stop{border:1px solid var(--line);border-radius:2px;padding:8px;margin-bottom:8px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
#view-atlas.route-open #atlasList{display:none}
#view-atlas.route-open .atlas-detail{display:block;position:static;inset:auto;z-index:auto;border-left:0;background:transparent;padding:20px 28px 56px;overflow:auto;min-height:0}
.route-dash{width:100%}
.route-dash>.back-pill{margin-bottom:12px}
.rd-mapwrap .map-bottom{left:10px;bottom:10px}
.rd-mapwrap .map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
/* Relief / Satellite switch: only on the 3D map */
.map-wrap.is-2d .m3d-only{display:none}
.lbl-stop.compact:hover .nm,.lbl-stop.compact.on .nm{display:inline}
.lbl-stop.compact:hover,.lbl-stop.compact.on{padding-right:8px;z-index:2}
/* Full labels sit above ones shrunk to a number */
.lbl-stop:not(.compact){z-index:1}
@media (max-width:860px){
  .side-panel{border-left:0;border-top:1px solid var(--line)}
  .side-panel>.scroll{padding:16px}
  .map-tools{top:8px;left:8px;right:8px;max-width:none;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .map-tools::-webkit-scrollbar{display:none}
  .map-tools .btn{padding:6px 9px;font-size:12px}
}
.gps-btns .btn{padding:10px 14px}
@media (max-width:860px){
  .lbl-stop .nm{display:none}
  .lbl-stop.on{padding-right:8px}
  .lbl-stop.on .nm{display:inline}
}
/* 3D labels that would cover a nearer one show just their number */
.lbl-stop.compact .nm{display:none}
@media (max-width:860px){
  .lbl-stop.side:not(.on){opacity:.7}
  .map-note{display:none}
  .rec-hint{display:none}
  .map-quests{top:8px;left:8px;right:8px;transform:none;max-width:none}
  .map-quests~.map-tools{top:52px}
}
/* Map toolbar: reset + options gear top-left, options drop below, 3D/2D bottom-left */
.map-tools,.map-wrap .map-tools{right:auto;flex-wrap:nowrap;overflow:visible;gap:6px}
@media (max-width:860px){
  .map-quests[hidden]~.map-tools{top:8px}
  .map-mode{left:8px;bottom:8px}
  .map-tools .btn.icon{width:32px;height:32px}
  .map-wrap .leaflet-top.leaflet-right{margin-top:40px}
  .map-bottom{left:8px;bottom:8px;gap:6px;flex-direction:column-reverse;align-items:flex-start}
  #view-atlas.route-open .atlas-detail{padding:14px 12px 40px}
}

/* ========== Quests ========== */
#view-quests,#view-inv{grid-template-columns:minmax(0,1fr) 420px}
.main-quest h2{font-size:30px;font-stretch:62%;text-transform:uppercase;font-weight:850}
.main-quest .bar{grid-column:1/-1;margin-top:10px}
.mq-steps{grid-column:1/-1;display:flex;gap:4px;margin-top:6px}
.mq-steps i{flex:1;height:4px;background:var(--panel-2)}
.mq-steps i.done{background:var(--accent)}
.main-quest.ebc{border-left:3px solid var(--trent)}
.main-quest.ip{border-left:3px solid var(--accent)}
.main-quest.ebc .mq-steps i.done{background:var(--trent)}
.ps:hover{border-color:var(--line-strong)}
.ps.on{border-color:var(--line-strong);background:var(--panel-2)}
.ps-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ps-top b{font-stretch:87%;font-weight:750;font-size:16px}
.ps.ebc .bar i{background:var(--trent)}
.ps.ebc.is-selected::before,.ps.ebc.is-selected::after{border-color:var(--trent)}
.group>.sec-head{margin-bottom:10px}
.q-row .t{font-weight:600}
.q-row .s{font-size:13px;color:var(--muted)}
.q-row.done .t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.tick{width:20px;height:20px;border:1.5px solid var(--line-strong);border-radius:2px;display:grid;place-items:center;margin-top:1px;background:none;padding:0}
.tick svg{width:14px;height:14px;opacity:0}
.tick.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tick.on svg{opacity:1}
.date small{display:block;font-size:11px;font-weight:600;color:var(--muted);font-stretch:100%}
.add-row{display:flex;gap:8px;margin-top:10px}
.add-row input{flex:1}
.d-head .date{font-size:20px}
.d-head h2{margin-top:6px}
.d-list{margin:14px 0 0;padding-left:18px;font-size:14px}
.d-list li{margin:4px 0}
.ready.green{--rc:var(--r-green)}
.ready.yellow{--rc:var(--r-yellow)}
.ready.red{--rc:var(--r-red)}
.ready.yellow i{border-radius:1px;transform:rotate(45deg) scale(.85)}
.ready.red i{border-radius:1px}
.ready.big i{width:11px;height:11px;align-self:center}
.ready.big b{font-stretch:75%;font-weight:750;font-size:24px;line-height:1;color:var(--text)}
.ready.big span{font-size:12px;font-weight:650}
.q-sec{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.q-sec h4{margin:14px 0 6px;font-size:13px;color:var(--muted);font-weight:650}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:14px}
.checklist li{display:flex;align-items:center;gap:9px;padding:3px 0}
.checklist .mk{width:16px;height:16px;flex:none;border:1.5px solid var(--line-strong);border-radius:2px;display:grid;place-items:center}
.checklist .mk svg{width:12px;height:12px}
.checklist li.ok .mk{background:var(--ice);border-color:var(--ice);color:var(--bg)}
.checklist li.ok .linkish{color:var(--muted)}
.ready-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.qform .gear-pick select{width:auto;padding:4px 6px;font-size:12px}
.char-panel .party-strip{margin-top:0}
.char-panel .group{margin-top:22px}
.char-panel .group>h3{margin-bottom:2px}
.mq-ready{position:absolute;top:14px;right:14px}
.main-quest>div:first-child{padding-right:150px}
.mq-right{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.recap-head{margin-bottom:6px}
.recap-day{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.recap-day blockquote{margin:6px 0;padding:8px 10px;border-left:3px solid var(--line-strong);background:var(--bg);font-size:13.5px}
.quest-tabs{margin:18px 0 4px;flex-wrap:wrap}
.rd-card>h3:first-child,.rd-card>.atlas-sec:first-child,.rd-card>.q-sec:first-child{margin-top:0}
.rd-card .atlas-sec h3,.rd-card .q-sec h3{margin-top:0}
.rd-card .q-sec{border-top:0;padding-top:0}
.quest-tabs.tabbar{margin:22px 0 6px}
/* With tabs above, the list's own heading would repeat the tab name */
.quest-tabs+.group:not(.legs-sec)>.sec-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:860px){
  .ps>.small{display:none}
  .ready.big b{font-size:20px}
  .main-quest>div:first-child{padding-right:110px}
  .mq-right{justify-content:flex-start;gap:20px}
  .mq-ready .ready.big b{font-size:18px}
  .recap-day{grid-template-columns:1fr}
  .invite .d-actions,.invite .sec-actions{flex:none;gap:6px}
}

/* ========== Journal ========== */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.thumbs button{padding:0;border:0;background:var(--panel-2);aspect-ratio:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.card .by{position:absolute;top:8px;left:8px;width:22px;height:22px;display:grid;place-items:center;background:var(--pc,var(--accent));color:var(--accent-ink);font-stretch:75%;font-weight:850;font-size:12px;border-radius:2px}
#view-journal{grid-template-columns:minmax(0,1fr) 380px}
.cgroup{margin-top:26px}
.cgroup h3{display:flex;gap:10px;align-items:baseline}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:10px}
.card{position:relative;padding:0;border:1px solid var(--line);background:var(--panel);text-align:left;border-radius:2px;overflow:hidden}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel-2)}
.card .cap{padding:9px 10px 10px}
.card .cap b{display:block;font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cap span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card .pend{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;background:var(--bg);color:var(--warn);padding:2px 5px;border-radius:2px}
.entry-head{display:flex;align-items:flex-start;gap:10px}
.entry-head>div{flex:1;display:grid;gap:2px}
.entry-head .chip svg{width:12px;height:12px}
.entry-body{margin:10px 0 0;white-space:pre-wrap;font-size:14.5px;line-height:1.55}
.entry .d-actions{margin-top:12px}
.card .pend.priv{color:var(--muted)}
.entry-photos{display:grid;gap:10px;margin-top:14px;justify-items:start}
.entry-photos .entry-thumbs{justify-self:stretch;margin-top:0}
.entry .entry-thumbs{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
@media (max-width:860px){
  #view-journal .detail-col{position:static;display:block;border-top:1px solid var(--line);padding:18px 16px 32px}
  #view-journal .list-col{overflow:visible}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  #view-journal .list-col,#view-journal .detail-col{overflow:visible;min-height:auto;z-index:auto}
}

/* ========== Inventory and gear ========== */
.inv-top{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:end}
.inv-top .bar{grid-column:1/-1}
.tile:hover{border-color:var(--line-strong)}
.tile .ic{width:34px;height:34px;color:var(--muted)}
.tile .nm{font-weight:650;font-size:14px;line-height:1.25}
.tile .ct{font-size:11px;color:var(--muted);margin-top:4px}
.tile.missing .nm{color:var(--muted)}
.tile.have .ic{color:var(--ice)}
.tile .tag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--warn)}
.tile .have-mark{position:absolute;top:10px;right:10px;width:18px;height:18px;color:var(--ice)}
.inv-detail .ic{width:56px;height:56px;color:var(--ice)}
.gear-pick-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.gear-pick-cat:first-child{margin-top:0}
.gear-pick{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px;padding:2px 0}
/* Inventory: acquired left, not acquired right; on phones acquired comes first */
.inv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
.inv-split .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.tile-wrap{position:relative}
.tile-rent{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--muted);background:var(--panel);padding:2px 6px 2px 4px;border:1px solid var(--line);border-radius:2px;cursor:pointer}
.tile-wrap .tile .ct{padding-right:64px}
/* Inventory: room between the Loadout/Quest tabs and the heading */
.inv-views{margin-bottom:18px}
.tile[style*="--cat"] .ic,.tile.have[style*="--cat"] .ic{color:var(--cat)}
.tile.missing[style*="--cat"] .ic{opacity:.55}
.cat-name{color:var(--cat);font-weight:650}
.inv-detail [style*="--cat"] .ic{color:var(--cat)}
.cat-chips{margin:14px 0 4px;flex-wrap:wrap;gap:6px}
.cat-chips .btn{gap:6px}
.gear-pick-cat.cat-name{border-left:3px solid var(--cat);padding-left:8px}
@media (max-width:860px){
  .tile .ic{width:26px;height:26px}
}
.tile-wrap .tile{width:100%}
@media (max-width:860px){
  .tile .nm{font-size:12.5px}
  .tile .ct{display:none!important}
  .inv-split{display:flex;flex-direction:column}
  .inv-split .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cat-chips .btn{flex:none}
}

/* ========== Character and profile ========== */
.opt-sec{padding:16px 0;border-top:1px solid var(--line)}
.opt-sec:first-of-type{border-top:0}
.opt-sec h3{margin-bottom:6px}
.opt-sec h4{margin:14px 0 4px;font-size:14px}
.opt-sec p{margin:6px 0}
.char-stage{position:relative;min-height:0;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 58%,var(--panel) 0%,var(--bg) 100%)}
.char-hud{position:absolute;top:18px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.char-status{position:absolute;inset:auto 20px 40%;margin:0;text-align:center;color:var(--muted);font-size:14px}
.char-panel{border-left:1px solid var(--line);background:var(--panel);padding:20px 22px 40px}
.theme-pick{display:flex;gap:6px;flex-wrap:wrap}
#view-char .char-stage{min-height:0}
#view-char .char-panel{border-left:0;border-top:1px solid var(--line);padding:18px 22px 48px;overflow:visible}
#view-char .char-panel>*{max-width:760px;margin-left:auto;margin-right:auto}
/* Profile page */
.prof{margin-bottom:6px}
.idcard{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--bg)}
.idcard p{grid-column:1/-1;margin:0}
.cust-part{padding-top:6px}
.cust-part h4{margin:16px 0 6px;font-size:14px}
.cust-part:first-of-type h4{margin-top:4px}
.char-hud .char-gear svg{width:18px;height:18px;margin:0}
.char-hud .char-gear[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.cust-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.cust-head h2{margin:0}
.prof-card{padding:16px;border:1px solid var(--line);background:var(--panel);border-radius:2px;margin-bottom:6px}
.pc-head{display:flex;align-items:center;gap:12px}
.pc-bio{margin:10px 0 0;white-space:pre-wrap}
.pc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0}
.pc-stats div{border:1px solid var(--line);background:var(--bg);padding:8px 10px;border-radius:2px}
.pc-stats dt{font-size:11.5px;color:var(--muted)}
.pc-stats dd{margin:2px 0 0;font-weight:700;font-size:15px}
.prof-sec{margin-top:20px}
.prof-sec h3{margin:0 0 8px}
.prof-list{list-style:none;margin:0;padding:0}
.prof-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.char-hud .back-pill{pointer-events:auto;margin-bottom:6px}
/* Profile on desktop: info on the left; character on the right, customization under it */
.char-custom[hidden]{display:none}
.cs-card .prof-sec{margin-top:0}
.club-body>.prof-sec:first-child,.club-body>section:first-child{margin-top:0}
@media (min-width:861px){
  #view-char.customizing{grid-template-rows:minmax(0,46%) minmax(0,54%);grid-template-areas:"panel stage" "panel custom"}
  #view-char .char-panel>*{max-width:720px;margin-left:0;margin-right:0}
  #view-char .char-stage{grid-area:stage;min-height:0}
}
@media (max-width:860px){
  .char-panel{border-left:0;border-top:1px solid var(--line);padding:16px 16px 32px}
  .char-hud{top:12px;left:16px;right:16px}
  #view-char .char-panel{padding:14px 14px 40px}
  .pc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ========== Atlas ========== */
.atlas-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.atlas-admin{display:flex;gap:8px}
.atlas-filters{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 16px;flex-wrap:wrap}
.atlas-filters .filters{margin:0}
.atlas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.atlas-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:138px;transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease)}
.atlas-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-1px)}
.atlas-card.is-selected{outline:2px solid var(--text);outline-offset:-1px}
.ac-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ac-title{font-size:16.5px;line-height:1.25;font-stretch:90%}
.ac-stats{font-size:12.5px;color:var(--muted)}
.ac-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.atlas-title{margin:4px 0 8px}
.atlas-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.atlas-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:16px 0}
.atlas-stats div{border:1px solid var(--line);background:var(--bg);padding:8px 10px;border-radius:2px}
.atlas-stats dt{font-size:11.5px;color:var(--muted)}
.atlas-stats dd{margin:2px 0 0;font-weight:700;font-size:15px}
.atlas-map{height:280px;border:1px solid var(--line);border-radius:2px;background:var(--panel-2);z-index:0}
.atlas-profile{margin:8px 0 0}
.atlas-profile .fill{fill:color-mix(in srgb,#E0561B 18%,transparent)}
.atlas-profile .line{fill:none;stroke:#E0561B;stroke-width:2;vector-effect:non-scaling-stroke}
.atlas-profile figcaption{display:flex;justify-content:space-between;margin-top:2px}
.atlas-summary{font-weight:600}
.atlas-sec{margin-top:22px}
.atlas-sec h3{margin:0 0 8px}
.atlas-sec h4{margin:12px 0 6px;font-size:13px}
.atlas-plan{margin:0;padding-left:20px}
.atlas-plan li{margin:0 0 8px}
.atlas-plan p{margin:2px 0 0;color:var(--muted)}
.atlas-stops{list-style:none;margin:0;padding:0}
.atlas-stops li{justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.gear-chips{display:flex;flex-wrap:wrap;gap:6px}
.gear-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-left:3px solid var(--cat);border-radius:2px;background:var(--bg)}
.gear-chip.own{border-color:var(--line-strong);border-left-color:var(--cat)}
.review-form{border:1px solid var(--line);background:var(--bg);padding:12px 14px;border-radius:2px;margin-bottom:14px}
.review-form h4{margin:0}
.star-pick{display:flex;gap:4px}
.star-pick button{width:34px;height:34px;padding:4px;background:none;border:0;cursor:pointer}
.star-pick button.on svg{fill:#E8A400}
.rv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review p{margin:6px 0 0;white-space:pre-wrap}
.role-list{list-style:none;margin:14px 0 0;padding:0}
.role-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.review-form .filters{flex-wrap:wrap}
#atlasSearch{color:var(--text)}
/* Atlas: where filters */
.atlas-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:8px;margin-top:10px}
.atlas-near{display:flex;gap:6px;min-width:0}
.atlas-near .btn.icon{padding:0;width:42px;justify-content:center;flex:none}
.atlas-near .btn.icon svg{width:18px;height:18px;margin:0}
.atlas-near-state:not(:empty){margin-top:8px}
.ac-away{font-size:12.5px;font-weight:650;color:var(--accent)}
.rd-date{font-weight:700;font-size:13px}
.rd-q{margin:0 0 6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rd-q.done b{text-decoration:none}
.gear-chip.miss{border-style:dashed;opacity:.85}
.as-row{display:flex;justify-content:space-between;gap:10px}
.atlas-opts{margin:4px 0 8px;flex-wrap:wrap}
.ac-opts{font-size:11px}
.se-row{display:flex;gap:6px}
.se-row input[type=text]{flex:1}
.se-day{width:70px!important}
.se-gear{display:flex;flex-wrap:wrap;gap:4px}
.se-gear .gear-chip small{color:var(--muted)}
.se-gear .linkish{margin-left:2px}
.se-add{display:flex;gap:6px;flex-wrap:wrap}
#view-atlas #atlasList{padding:24px 28px 40px}
#view-atlas .atlas-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rd-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.rd-hero-text{flex:1;min-width:260px}
.rd-hero .atlas-summary{margin:10px 0 0;font-weight:500;max-width:760px}
.rd-hero-actions{display:flex;gap:8px;max-width:340px}
.rd-stats{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:14px 0}
.rd-stats dd{font-size:18px}
.rd-beta-n{color:var(--sev-caution)}
.rd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.rd-main,.rd-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.rd-side{position:sticky;top:0}
.rd-mapcard .atlas-profile{padding:6px 14px 10px}
.rd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rd-card .review-form{background:var(--bg)}
/* Atlas route map: 3D terrain or 2D, with Map-tab style controls */
.rd-mapwrap{position:relative;height:clamp(320px,52vh,560px);background:var(--panel-2);overflow:hidden}
.rd-mapwrap .rd-map{position:absolute;inset:0;height:100%;z-index:0}
.rd-mapwrap .rd-map[hidden]{display:none}
.rd-3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.rd-3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.rd-mapwrap .rd-tools{top:10px;left:10px;z-index:500}
/* Atlas: paging through search results */
.atlas-more{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.atlas-opts.tabbar{margin:8px 0 10px}
.rd-hero-actions .small{text-align:right;flex-basis:100%}
.gear-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 0 6px}
.gear-more{margin-top:12px}
.gear-more>summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--muted);padding:4px 0}
.gear-more>summary:hover{color:var(--text)}
.gear-more[open]>summary{margin-bottom:6px}
@media (max-width:1100px){
  .atlas-where{grid-template-columns:1fr 1fr}
  .atlas-near{grid-column:1/-1}
  .rd-grid{grid-template-columns:minmax(0,1fr)}
  .rd-side{position:static}
  .rd-two{grid-template-columns:1fr}
}
@media (max-width:860px){
  .atlas-grid{grid-template-columns:1fr}
  .atlas-card{min-height:0}
  .atlas-map{height:230px}
}
.rd-map{height:clamp(320px,48vh,520px);border:0;border-radius:0}
@media (max-width:860px){
  #view-atlas #atlasList{padding:18px 16px 32px}
  .rd-hero{padding:14px}
  .rd-hero-actions{align-items:stretch;max-width:none;width:100%}
}
/* Atlas route page */
.rd-hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){
  .rd-hero-actions .small{text-align:left}
  .rd-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
  .rd-stats>div{padding:7px 9px}
  .rd-stats dt{font-size:11px}
  .rd-stats dd{font-size:15px}
  .rd-hero-actions{justify-content:stretch}
}

/* ========== Clubs ========== */
.cm-list{list-style:none;margin:6px 0 0;padding:0}
.cm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.cm-who{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cm-actions{display:flex;gap:6px;align-items:center}
.club-box input[type=email],.club-box input[type=text]{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px;padding:9px 11px;font-size:14px}
.clubs-btn{position:relative}
.cm-sub{display:block;margin-top:1px}
.club-page{max-width:900px}
.clubs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.club-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--club);border-radius:2px;min-height:150px}
.club-card:hover{border-color:var(--line-strong);border-top-color:var(--club)}
.cc-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.cc-emblem{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--club);color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;flex:none}
.cc-emblem.lg{width:64px;height:64px;font-size:22px}
.cc-name{font-size:17px;line-height:1.25}
.cc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-next{margin-top:auto}
.ch-text{flex:1;min-width:200px}
.ch-text p{margin:0 0 6px}
.club-next{padding:16px;border:1px solid var(--line);border-left:4px solid var(--club);background:var(--panel);border-radius:2px;margin-top:14px}
.club-next h3{margin:2px 0 4px;font-size:20px}
.cq-list{list-style:none;margin:0;padding:0}
.cq-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.cq-act{flex:none}
.club-form{max-width:560px}
.club-chip{gap:6px}
#view-clubs #clubsPanel{padding:22px 28px 48px}
.club-page,.club-page.wide{max-width:1440px;margin:0 auto}
.club-banner{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 26px;border-radius:2px;color:#fff;background:linear-gradient(120deg,var(--club) 0%,color-mix(in srgb,var(--club) 60%,#0b1a22) 100%);overflow:hidden}
.club-banner .ch-text{flex:1;min-width:220px}
.cb-meta{font-size:13px;color:rgba(255,255,255,.82)}
.cb-chip{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.club-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px;margin-top:16px;align-items:start}
.club-main{min-width:0}
.club-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.cs-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:14px 16px}
.cs-card h3{margin:0 0 8px}
.cs-card .sec-head{margin-bottom:6px}
.cs-card .sec-head h3{margin:0}
.club-side .club-next{margin-top:0;border-left:4px solid var(--club)}
.cn-count{margin:6px 0 4px}
.cn-count span{color:var(--muted)}
.club-tabs{margin:0 0 12px}
.club-stats{margin:0 0 14px}
.club-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.club-banner::after{content:"";position:absolute;pointer-events:none;right:-10px;bottom:0;width:380px;height:150px;opacity:.13;background:#fff;clip-path:polygon(0 100%,22% 42%,34% 62%,55% 8%,70% 40%,80% 28%,100% 70%,100% 100%)}
.club-tabs.tabbar{margin:0 0 14px}
.club-body .member-chips{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1100px){
  .club-grid{grid-template-columns:minmax(0,1fr)}
  .club-side{position:static;order:-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .club-cols{grid-template-columns:1fr}
}
@media (max-width:860px){
  .club-cards{grid-template-columns:1fr}
}
.club-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (max-width:860px){
  .cc-emblem.lg{width:48px;height:48px;font-size:17px}
  #view-clubs #clubsPanel{padding:14px 12px 36px}
  .club-banner{padding:18px 16px}
  .club-side{display:flex;order:1}
  .club-banner::after{width:220px;height:90px}
}

/* ========== Stats, leaderboards and challenges ========== */
.step-chart{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;height:96px;align-items:end;margin-top:12px}
.sc-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.sc-col small{font-size:10px;color:var(--muted)}
.steps-form{margin-top:12px;flex-wrap:wrap}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.lb-filters{margin:0 0 8px;flex-wrap:wrap}
.lb{list-style:none;margin:6px 0 0;padding:0}
.lb li{display:grid;grid-template-columns:28px 12px minmax(70px,auto) 1fr auto auto;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px solid var(--line)}
.lb li.me{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.lb-rank{font-weight:800;color:var(--muted);text-align:right}
.lb li:nth-child(1) .lb-rank{color:#C98A00}
.lb-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.lb-val{white-space:nowrap}
.ch-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
@media (max-width:860px){
  .lb li{grid-template-columns:24px 10px 1fr auto auto}
}
.lb-mini li{grid-template-columns:22px 10px minmax(60px,auto) 1fr auto;padding:7px 2px}
@media (max-width:860px){
  .lb-bar{display:none}
}

/* ========== Trail beta and checkpoints ========== */
.checkpoint{margin-top:14px}
.checkpoint h4{margin:0 0 6px}
.checkpoint.compact{margin-top:6px}
.cp-row{display:flex;gap:8px;align-items:flex-start;margin:4px 0}
.cp-stop{padding:8px 0;border-bottom:1px solid var(--line)}

/* ========== Mountain forecast ========== */
.fc-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fc-levels{margin:0;flex-wrap:wrap}
.fc-scroll{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:2px;-webkit-overflow-scrolling:touch}
.fc-table{border-collapse:collapse;font-size:12px;white-space:nowrap}
.fc-table th,.fc-table td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.fc-table tbody th{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;font-weight:600;color:var(--muted)}
.fc-table tbody th small{display:block;font-weight:400}
.fc-table thead th{background:var(--bg);font-weight:700}
.fc-day small{display:block;font-weight:400;color:var(--muted);font-size:10.5px}
.fc-day,.fc-per{border-left:1px solid var(--line)}
.fc-table td.trip,.fc-table th.trip{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fc-per{font-weight:600;font-size:11px;color:var(--muted)}
.fc-temp{display:inline-block;min-width:26px;padding:1px 4px;border-radius:2px;background:color-mix(in srgb,#2F6FDB calc((1 - var(--h)) * 45%),color-mix(in srgb,#D9480F calc(var(--h) * 45%),transparent))}
.fc-table td small{display:block;color:var(--muted);font-size:10.5px}
.fc-wind{display:inline-flex;flex-direction:column;align-items:center;padding:1px 4px;border-radius:2px;background:color-mix(in srgb,#7B4BD6 calc(var(--w) * 40%),transparent)}
.fc-arrow{display:inline-block;font-style:normal;font-weight:800;line-height:1}
.fc-rain{color:#2F6FDB;font-weight:700}
.fc-snow{color:#0E9AA7;font-weight:700}
.fc-wx{font-size:11px;white-space:normal;display:inline-block;max-width:74px;line-height:1.2}
.fc-foot{margin-top:6px}
/* Forecast: a line down the right of the pinned first column (a shadow, since collapsed borders don't stick) */
.fc-table tbody th,.fc-table thead th:first-child{box-shadow:inset -1px 0 0 var(--line-strong)}
.fc-table thead th:first-child{position:sticky;left:0;z-index:2}

/* ========== Mesh radios and offline maps ========== */
.offline .bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}

/* ========== Sign-in ========== */
.login-box{width:min(400px,100%)}
.login-box input{width:100%;background:var(--panel);border:1px solid var(--line-strong);border-radius:2px;padding:12px;font-size:16px}
.login-box input:focus{outline:none;border-color:var(--accent)}
.login-err{color:var(--warn);min-height:1.4em;font-size:14px;margin:12px 0}
.login-box .pw input{padding-right:72px}
.login-box h1{margin:0 0 10px;font-stretch:62%;font-weight:850;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.login-box h1 .cup{width:58px;height:58px;margin-top:-8px}
@media (max-width:860px){
  .login-box h1{font-size:44px}
}

/* ========== Overrides ========== */
/* Order matters here: each rule below overrides a rule in an earlier section with the same specificity,
   so these stay after everything above. Folding them into their sections is the next cleanup step. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px;font-size:14px}
.tracks{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.track{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.main-quest{padding:20px;margin-bottom:28px;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:end}
h2.big{font-size:30px;font-stretch:62%;text-transform:uppercase;font-weight:850}
.ps{display:grid;gap:6px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:10px 12px}
.group{margin-top:26px}
.q-row{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 6px}
.q-row:hover{background:var(--panel)}
.q-row.on{background:var(--panel)}
.day-row{grid-template-columns:62px 1fr auto}
.date{font-stretch:75%;font-weight:750;font-size:15px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile{position:relative;aspect-ratio:1/1.05;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.tile.missing{background:transparent;border-style:dashed}
.drop{margin-top:18px;border:1px dashed var(--line-strong);padding:20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.modal-img img{max-height:80vh;object-fit:contain}
@media (max-width:860px){
  #app{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"brand stats" "main main" "tabs tabs";column-gap:10px;align-items:center}
  .stat b{font-size:18px}
  .stats{padding:0 16px 0 0;gap:14px;align-items:center}
  .ps{padding:8px}
  .ps-top b{font-size:14px}
  h2.big{font-size:24px}
  .key{display:none}
  .tab{flex:1;flex-direction:column;gap:4px;padding:9px 4px 10px;font-size:10px;letter-spacing:.04em}
  .tab svg{width:20px;height:20px}
  #view-map{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,58%) minmax(0,42%)}
  .lbl-peak{display:none}
  .lbl-stop{padding:3px}
  .tile{padding:9px}
  #view-quests,#view-inv,#view-journal{grid-template-columns:1fr}
  .detail-col{position:fixed;inset:0;z-index:120;border-left:0;display:none;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
  .back{display:inline-flex;margin-bottom:14px}
  #view-journal{overflow:auto;align-content:start}
  .modal-img img{max-height:55vh}
}
.login{z-index:1100;position:fixed;inset:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);background:var(--bg)}
.sync{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ice)}
.sync.ok i{background:var(--ice)}
.sync.busy i{background:var(--accent);animation:pulse 1s infinite alternate}
.sync.off i{background:var(--muted)}
.sync.warn i{background:var(--warn)}
#gpsTools{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100% - 28px);z-index:2}
.lbl-party{display:flex;align-items:center;gap:6px;padding:0;background:none;border:0}
.lbl-live{width:18px;height:18px;border-radius:50%;background:#3E9BFF;border:3px solid #fff;box-shadow:0 0 0 6px rgba(62,155,255,.25)}
.sec-actions .btn{padding:5px 10px}
.lockmark svg,.lockline svg,.btn svg{width:14px;height:14px}
.check input{width:16px;height:16px;accent-color:var(--accent)}
@media (max-width:860px){
  #gpsTools{right:8px;bottom:8px}
}
.ready{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rc);white-space:nowrap}
.ready i{width:9px;height:9px;background:var(--rc);border-radius:50%;flex:none}
.ready.big{flex-direction:row;align-items:baseline;gap:7px;padding:6px 10px 6px 8px;border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);border-radius:2px}
.invite{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 12px;border-left:3px solid var(--accent);font-size:14px}
.q-sec .invite{background:var(--bg)}
.people{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.ready-pill{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:2px;padding:5px 9px;font-size:13px;font-weight:600}
.ready-pill.on{border-color:var(--line-strong);background:var(--bg)}
#charCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud-ready{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.range{display:flex;align-items:center;gap:10px}
.range input{flex:1;accent-color:var(--accent)}
.slot select{width:100%}
@media (max-width:860px){
  #view-char{grid-template-columns:1fr}
}
.wx-row b{font-variant-numeric:tabular-nums}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.entry{padding:14px 16px;margin-top:10px}
.entry-head .by{position:static;width:24px;height:24px;display:grid;place-items:center;background:var(--pc);color:var(--accent-ink);font-stretch:75%;font-weight:850;font-size:12px;border-radius:2px;flex:none}
.entry input[type=date],.entry input[type=text],.entry select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px;padding:9px 11px;font-size:14px}
.note-foot .btn{padding:6px 14px}
/* The brand title and the sign-in title */
.brand h1,.login-box h1{font-weight:400;font-stretch:normal;text-transform:uppercase;letter-spacing:.02em}
.login-box h1{font-size:62px;line-height:1}
.lbl-party.has-char{align-items:flex-end;gap:2px}
@media (max-width:860px){
  #view-journal{grid-template-rows:max-content max-content}
}
/* Blackout: true black for night use (e.g. a 2 AM summit start). Dim, red-shifted, easy on night vision and OLED batteries. */
:root[data-theme="blackout"]{--globe-sea:#050000;--globe-land:#220400;--globe-coast:#5A0C04;--bg:#000;--panel:#0A0000;--panel-2:#170300;--line:rgba(255,48,24,.18);--line-strong:rgba(255,48,24,.38);--text:#FF5A3A;--muted:#DA4029;--accent:#E0301A;--accent-ink:#000;--trent:#FF7A4A;--m-collin:#FF5A3A;--m-ghost:#D0304E;--m-trent:#FF7A4A;--ice:#FF6A50;--warn:#FF7A50;--t-low:#0A0100;--t-mid:#2A0500;--t-snow:#5A0C04;--t-line:#A0200E;--r-green:#FF9A6A;--r-yellow:#FF5A3A;--r-red:#C4220F;color-scheme:dark;--bean-ink:#F1EADC}
.tile-rent input{width:14px;height:14px;margin:0;accent-color:var(--accent)}
.tile-rent.on{color:var(--text);border-color:var(--line-strong)}
@media (max-width:860px){
  .map-quests .btn{padding:6px 10px;font-size:12px}
}
/* 2D map */
#map2d{position:absolute;inset:0;z-index:0;background:var(--panel-2)}
.map-tools,.map-quests,#gpsTools{z-index:500}
.leaflet-container{font-family:var(--font);background:var(--panel-2)}
.leaflet-control-attribution{font-size:10px}
.m2d-tip{font-family:var(--font);font-size:12px;font-weight:650;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:2px;box-shadow:none;padding:2px 7px}
.m2d-icon{background:none;border:0}
.m2d-person .pi{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--pc);color:var(--accent-ink);font-stretch:75%;font-weight:850;font-size:13px;border:2px solid #fff}
.m2d-person .pt{display:flex;flex-direction:column;background:var(--panel);padding:2px 7px;border-radius:2px;font-size:12px;line-height:1.25;border-left:3px solid var(--pc);color:var(--text)}
/* Character: the figure on top, customization in an accordion underneath (page scrolls) */
#view-char{grid-template-columns:minmax(0,1fr);grid-template-rows:min(64vh,620px) max-content;overflow:auto;align-content:start}
@media (max-width:860px){
  #view-char{grid-template-rows:min(56vh,480px) max-content}
}
/* Countdown label names the quest; let it wrap so the header never gets wider than the screen */
.stat .stat-to{display:block;white-space:normal;max-width:150px;margin-left:auto;line-height:1.25}
@media (max-width:860px){
  .stat .stat-to{max-width:110px}
}
@media (min-width:861px){
  #app{grid-template-columns:auto minmax(0,1fr) auto}
}
@media (min-width:861px) and (max-width:1320px){
  .tab{padding:12px 10px 16px;letter-spacing:.08em;gap:7px}
  .key{display:none}
  .stats{padding-right:20px;gap:16px}
}
.toasts{z-index:1200}
/* Club switcher under the title, and the Clubs window */
.club-btn{display:inline-flex;align-items:center;gap:5px;max-width:240px;margin-top:6px;padding:0;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600}
.club-btn svg{width:14px;height:14px;flex:none}
.club-btn:hover{color:var(--text)}
.club-btn .count{font-size:11px;border:1px solid var(--accent);color:var(--accent);padding:0 5px;border-radius:2px}
.club-box{width:min(720px,100%)}
.club-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cm-actions select{width:auto;padding:5px 8px;font-size:13px}
.cm-actions .btn{padding:5px 10px}
@media (max-width:480px){
  .club-btn{max-width:150px;margin-top:3px;font-size:12px}
}
/* Header: sync status sits in line with the profile and settings buttons, centered vertically */
.party{flex-direction:row;align-items:center;gap:12px}
@media (max-width:860px){
  .party{gap:6px}
}
/* Main quest card: readiness in the top-right corner */
.main-quest{position:relative}
.idcard b{display:block;font-stretch:75%;font-weight:750;font-size:24px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#btnMapOpts[aria-expanded="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
/* Profile: customize gear sits top-right of the character viewer */
.char-hud .char-gear{pointer-events:auto;flex:none;padding:0;width:38px;height:38px;justify-content:center;background:color-mix(in srgb,var(--panel) 90%,transparent)}
@media (max-width:860px){
  .map-bottom .btn{padding:6px 9px;font-size:12px}
}
/* Gear categories: each has a color (CATS[k].color) shown as --cat */
.tile[style*="--cat"]{border-top:3px solid var(--cat)}
.cat-chip i{width:9px;height:9px;border-radius:50%;background:var(--cat);flex:none}
.atlas-head .big{margin:0}
.diff{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:2px;color:#fff;background:#6B7280}
.diff.d1{background:#2E8B57}
.diff.d2{background:#3E7CB1}
.diff.d3{background:#C98A00}
.diff.d4{background:#D9480F}
.diff.d5{background:#8E1B3A}
.stars{display:inline-flex;gap:1px}
.stars i{width:14px;height:14px;display:inline-block}
.stars.lg i{width:20px;height:20px}
.stars svg{width:100%;height:100%;fill:var(--line-strong)}
.atlas-profile svg{width:100%;height:80px;display:block}
.gear-chip i{display:none}
.gear-chip svg{width:12px;height:12px;color:var(--ice)}
.star-pick svg{width:100%;height:100%;fill:var(--line-strong)}
.review{padding:12px 0;border-top:1px solid var(--line)}
.role-list select{width:auto}
@media (max-width:860px){
  #view-atlas{grid-template-columns:1fr}
}
.atlas-near input{flex:1;min-width:0}
.near-chip select{width:auto;padding:6px 8px}
.place-pick .btn{justify-content:flex-start;text-align:left;white-space:normal}
.offline .bar i{display:block;height:100%;background:var(--accent)}
.clubs-head .big{margin:0}
.club-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--club);border-radius:2px}
.ch-text .big{margin:0 0 4px}
.club-chip i{width:10px;height:10px;border-radius:50%;background:var(--club);display:inline-block}
.cm-who .linkish{color:inherit}
.pc-head .big{margin:0}
#globe{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 60% 60% at 50% 50%,var(--panel) 0%,var(--bg) 100%);overflow:hidden}
#globe[hidden]{display:none}
#globeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#globeLabels{position:absolute;inset:0;pointer-events:none;--lbl-inset:0px}
@media (max-width:400px){#globeLabels{--lbl-inset:48px}}   /* the tool rail: 32 px squares, 8 px in from the edge, and a little air */
#globe2d{position:absolute;inset:0;background:var(--panel-2)}
#globe2d[hidden],#globeCanvas[hidden],#globeLabels[hidden]{display:none}
.globe-label{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:2px;font-size:12px;white-space:nowrap;cursor:pointer;will-change:transform}
.globe-label b{font-weight:700}
.globe-label.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.globe-label:hover{border-color:var(--text)}
.globe-tip{cursor:pointer}
.sc-col i{display:block;width:100%;min-height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.sc-col i.est{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.steps-form input[type=date]{width:auto}
.steps-form input[type=number]{width:140px}
.badge svg{width:26px;height:26px}
.badge b{font-size:13px;color:var(--muted)}
.badge.on{border-style:solid;border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.badge.on b{color:var(--text)}
.badge .bar{width:100%;height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:2px}
.badge .bar i{display:block;height:100%;background:var(--muted)}
.lb-bar i{display:block;height:100%;background:var(--accent)}
.challenge{padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--club);background:var(--panel);border-radius:2px;margin-bottom:8px}
.bar.big{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin:8px 0 6px}
.bar.big i{display:block;height:100%;background:var(--club)}
.recap-head .big{margin:2px 0}
.recap-stats{margin:12px 0}
.rd-q svg{width:14px;height:14px;color:var(--ice)}
.mesh-nodes{margin-top:10px}
/* Smaller logo */
.brand h1{font-size:28px}
@media (max-width:860px){
  .brand h1{font-size:clamp(15px,4.6vw,22px)}
}
@media (max-width:480px){
  .brand h1{white-space:nowrap;line-height:1;font-size:clamp(14px,4.2vw,18px)}
}
@media (min-width:861px){
  #view-char{grid-template-columns:minmax(0,1fr) minmax(380px,46%);grid-template-rows:minmax(0,1fr);grid-template-areas:"panel stage";overflow:hidden;align-content:stretch}
  #view-char .char-panel{grid-area:panel;overflow:auto;border-top:0;border-right:1px solid var(--line);padding:22px 28px 48px}
  #view-char .char-custom{grid-area:custom;overflow:auto;border-top:1px solid var(--line);background:var(--panel);padding:16px 22px 32px}
}
/* Logo: Personal Services (Imagex, free for personal use only); Coffee Shop as the fallback */
/* The field-terminal type system (all SIL OFL, latin subsets): a slab for the wordmark (the park-sign Clarendon lineage), a tall
   sans for readout numbers, a mono for everything technical (coordinates, order numbers, status lines), a cartographic italic
   for place and range names, a stencil for tags and stamps. Archivo, condensed and letter-spaced, stays the label face. */
@font-face{font-family:"Alfa Slab One";src:url("../fonts/alfa-slab-one.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/oswald.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-italic.woff2") format("woff2");font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:"Allerta Stencil";src:url("../fonts/allerta-stencil.woff2") format("woff2");font-display:swap}
:root{--slab:"Alfa Slab One",Georgia,serif;--tall:"Oswald","Archivo Narrow",var(--font);--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--ital:"Alegreya",Georgia,serif;--stencil:"Allerta Stencil",var(--font)}
.brand h1,.login-box h1{font-family:var(--slab);font-weight:400;font-stretch:100%;letter-spacing:.04em}
.mono{font-family:var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cond{font-family:var(--font);font-stretch:75%;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tall{font-family:var(--tall);font-weight:500;letter-spacing:.02em}
.ital{font-family:var(--ital);font-style:italic}
.tag{display:inline-block;border:1px solid currentColor;padding:1px 6px;font-family:var(--stencil);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.readout>div{padding:8px 12px 7px;border-right:1px solid var(--line)}.readout>div:last-child{border-right:0}
.readout .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.readout .v{font-family:var(--tall);font-weight:500;font-size:24px;line-height:1.1;color:var(--text)}.readout .v small{font-family:var(--mono);font-size:12px;margin-left:3px;color:var(--muted)}
/* the sync note in the header reads as a status line */
.stats .sync{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* Scrollbars on a desktop follow the palette and theme: a thumb in the text colour, faint, on the surface it scrolls (the
   header's dark columns and the night panels get their own, since the tokens are re-scoped there) */
@media (pointer:fine){
  *{scrollbar-color:color-mix(in srgb,var(--text) 32%,transparent) transparent;scrollbar-width:thin}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 32%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 50%,transparent);background-clip:padding-box}
  ::-webkit-scrollbar-corner{background:transparent}
  html{scrollbar-color:color-mix(in srgb,var(--text) 32%,transparent) var(--bg)}
}
/* The sheet: a card drawn like a map sheet. A ghost of the contours (faint: text sits on paper, not on a map), a collar of
   grid ticks with coordinates in the top corners and the UTM reference and sheet id in the bottom ones, a kicker line of
   stencil tag + mono facts, and a hachure rule under it. */
.sheet{position:relative;overflow:hidden}
.sheet::before{content:"";position:absolute;inset:0;background:url(/img/topo.svg) center/700px;opacity:.11;pointer-events:none}
.sheet>*:not(.collar):not(.mq-ready){position:relative}   /* above the ghost contours; the collar and the corner controls keep their own placement */
.collar{position:absolute;inset:0;pointer-events:none;font-size:10px;color:var(--muted);letter-spacing:.04em}
.collar i{position:absolute;top:0;width:1px;height:7px;background:var(--text);opacity:.6}.collar i::after{content:"";position:absolute;bottom:-100vh;left:0;width:1px;height:7px;background:var(--text)}
.collar i.v{top:auto;left:0;width:7px;height:1px}.collar i.v::after{bottom:0;left:auto;right:-100vw;width:7px;height:1px}
.collar span{position:absolute;padding:2px 6px}.collar .tl{top:0;left:4px}.collar .tr{top:0;right:4px}.collar .bl{bottom:0;left:4px}.collar .br{bottom:0;right:4px}
.main-quest.sheet{padding-top:28px;padding-bottom:26px}.main-quest.sheet>.mq-ready{top:24px}   /* the corner controls' tops line up with the kicker line */.rd-hero{position:relative;overflow:hidden;padding-bottom:32px}.rd-hero{padding-top:28px}
.rd-hero .collar{z-index:2}
/* on a photo hero the collar is a night strip above the picture (the sheet's header line), not labels over the photo */
.mq-kicker{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}.mq-kicker .tag{color:var(--text)}
.mq-sub{margin:2px 0 4px;font-size:17px;color:var(--muted)}
.mq-readout{grid-column:1/-1;margin-top:12px}
/* Atlas front, field-terminal pass: an index line, route cards as map sheets (height tag on the picture, stencil kind tag,
   mono stat line), hachure rules between the rows */
.ad-index{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.ad-index .tag{color:var(--text)}.ad-index-n{margin-left:auto}
.atlas-card{position:relative}
.ac-hi{position:absolute;left:8px;top:8px;z-index:2;font-size:10px;letter-spacing:.06em;color:#F1EADC;background:rgba(27,27,30,.7);padding:2px 6px;border-radius:2px;pointer-events:none}
.atlas-card .ac-kind{font-family:var(--stencil);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:400;color:var(--text);border-color:currentColor}
.atlas-card .ac-stats{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.atlas-front>.ad-sec+.ad-sec{padding-top:18px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 26%,transparent) 0 1px,transparent 1px 5px) top/100% 6px no-repeat}
/* Quest loadout as a sheet (field-terminal pass): kicker, one cell per item (filled = ready), mono status line, items as
   ruled rows (■ ready / □ missing in the category colour, status on the right) */
.inv-kicker{margin:4px 0 8px}.inv-kick-q{font-family:var(--ital);font-style:italic;text-transform:none;letter-spacing:0;font-size:13px}.inv-kick-n{margin-left:auto}
.inv-sheet{border:1px solid var(--line-strong);border-radius:2px;padding:20px 22px 18px;background:var(--panel)}
.inv-sheet .inv-top h2.big{font-family:var(--tall);text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.inv-cells{display:flex;gap:3px;margin:14px 0 6px}.inv-cells i{flex:1;min-width:0;height:12px;border:1px solid var(--line-strong);border-radius:1px}.inv-cells i.on{background:var(--ice);border-color:var(--ice)}
.inv-status{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 14px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.inv-q .inv-split .grid{display:block}
.inv-q .sec-head h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.inv-q .tile-wrap{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.inv-q .tile-wrap .tile{flex:1;min-width:0;aspect-ratio:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 2px;border:0;border-radius:0;background:transparent}
.inv-q .tile[style*="--cat"]{border-top:0}
.inv-q .tile .ic{display:none}
.inv-q .inv-sq{font-family:var(--mono);font-size:13px;line-height:1;color:var(--cat,var(--muted));flex:none}
.inv-q .tile>span:last-child{flex:1;min-width:0}
.inv-q .tile .nm{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.inv-q .tile .ct{margin-top:1px;padding-right:0}
.inv-q .tile .tag{position:static;order:3;margin-left:auto;font-family:var(--mono);font-weight:500;flex:none;border:0;padding:0;background:none}.inv-q .cat-chips .btn{padding:4px 9px;font-size:12px;min-height:0}.inv-q .tile .tag.rec{color:var(--muted)}.inv-q .tile .tag.ok{color:var(--muted)}
.inv-q .tile-rent{position:static;flex:none}
.inv-q .tile.is-selected{background:color-mix(in srgb,var(--text) 6%,transparent)}
@media (max-width:640px){.inv-sheet{padding:14px 12px}.inv-kick-n{margin-left:0}}/* Profile card as a unit file: kicker, tall caps name, italic place line, readout */
.prof-card.sheet{border:1px solid var(--line-strong);border-radius:2px;padding:16px 18px}
.prof-card .pc-name{font-family:var(--tall);text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.pc-place{display:block;font-family:var(--ital);font-style:italic;font-size:15px;color:var(--muted)}
.prof-card .pc-bio{font-family:var(--ital);font-style:italic;font-size:15px}
.pc-readout{margin-top:14px}/* Club page: a kicker in the banner, a readout strip under it */
.club-banner .cb-kicker{color:rgba(255,255,255,.85);margin-bottom:6px}.club-banner .cb-kicker .tag{color:#fff;border-color:rgba(255,255,255,.8)}
.club-banner .big{font-family:var(--tall);text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.club-banner .cb-desc{font-family:var(--ital);font-style:italic;font-size:16px}
.club-readout{margin:12px 0 4px}.club-readout .cr-next .v{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:4px}.club-readout .cr-next .v small{white-space:nowrap}.club-readout .cr-next .v .linkish{font:inherit;color:inherit;text-decoration:none}.club-readout .cr-next .v .linkish:hover{text-decoration:underline}/* Quest sheet middle: elevation profile beside the loadout box */
.mq-mid{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin:14px 0 4px;align-items:stretch}.mq-mid.one{grid-template-columns:1fr}
.mq-mid .atlas-profile{margin:0}
.mq-loadout{display:flex;flex-direction:column;gap:8px;text-align:left;border:1px solid var(--line-strong);border-radius:2px;padding:12px 14px;background:transparent;color:var(--text);cursor:pointer;font:inherit}
.mq-loadout:hover{border-color:var(--text)}
.mq-loadout .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mq-loadout .inv-cells{margin:0}
.mq-lo-next{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){.mq-mid{grid-template-columns:1fr}}/* Map side list: each quest as a small order card */
.gq-kicker{margin:0 0 10px}
.globe-list{display:grid;gap:8px}
.stop-row.gq-card{display:flex;flex-direction:column;align-items:stretch;gap:3px;border:1px solid var(--line-strong);border-left:3px solid var(--line-strong);border-radius:2px;padding:9px 12px;background:var(--panel)}
.stop-row.gq-card.on{border-left-color:var(--accent)}
.stop-row.gq-card:hover{border-color:var(--text)}
.gq-top{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gq-title{font-size:15px;line-height:1.25}
.gq-place{font-family:var(--ital);font-style:italic;font-size:13px;color:var(--muted)}
.gq-st{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.gq-st:empty{display:none}.mq-notrack{grid-column:1/-1;margin:6px 0 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hach{height:10px;margin:-18px 0 24px;background:repeating-linear-gradient(90deg,var(--text) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,transparent 0 10px,var(--text) 10px 11px,transparent 11px 15px);background-size:100% 10px,100% 6px;background-repeat:no-repeat;background-position:0 0,0 4px;opacity:.45}
.rd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);gap:0}
.rd-stats>div{padding:8px 12px 7px;border-right:1px solid var(--line)}.rd-stats>div:last-child{border-right:0}
.rd-stats dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rd-stats dd{font-family:var(--tall);font-weight:500;font-size:22px;line-height:1.1;margin:0}
.atlas-profile .line{stroke:var(--text);stroke-width:1.6}
/* part 3 of the field terminal: the header's status line, the sign-off line, rubber stamps, hazard stripes, patch-shaped
   badges and trail blazes on status chips */
.status-line{display:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:14px}
@media (min-width:1100px){.status-line{display:inline-flex;gap:14px}}
.eot{margin:28px 0 8px;text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.8}
.stamp{display:inline-block;transform:rotate(-6deg);border:3px double var(--red,#E0262F);color:var(--red,#E0262F);font-family:var(--stencil);font-size:16px;letter-spacing:.14em;line-height:1;padding:4px 10px;border-radius:3px;mix-blend-mode:multiply;opacity:.9;margin:0 10px 4px 6px;vertical-align:middle;-webkit-mask:repeating-linear-gradient(115deg,#000 0 7px,rgba(0,0,0,.72) 7px 9px);mask:repeating-linear-gradient(115deg,#000 0 7px,rgba(0,0,0,.72) 7px 9px)}
.stamp.s-sm{font-size:11px;padding:2px 6px;border-width:2px;margin:0;transform:rotate(-4deg)}
:root[data-theme="dark"] .stamp,:root[data-palette][data-theme="dark"] .stamp{mix-blend-mode:screen;opacity:.95}
.sn-now .stamp,.wa-head .stamp{margin-left:8px}
.flag{border-top:6px solid;border-image:repeating-linear-gradient(135deg,var(--hl) 0 8px,var(--ink) 8px 16px) 6}   /* the hazard stripe on a quest's warnings */
.badge.patch{position:relative;border:2px solid var(--line-strong);border-radius:14px 14px 4px 4px;padding:12px 12px 10px;background:var(--panel)}
.badge.patch::before{content:"";position:absolute;inset:4px;border:1.5px dashed var(--line);border-radius:10px 10px 2px 2px;pointer-events:none}   /* the stitching */
.badge.patch svg{color:var(--cat)}.badge.patch.on{border-color:var(--cat);background:color-mix(in srgb,var(--cat) 8%,var(--panel))}.badge.patch.on::before{border-color:color-mix(in srgb,var(--cat) 60%,transparent)}
.chip.today::before,.chip.ok::before{content:"";display:inline-block;width:5px;height:9px;background:currentColor;margin-right:5px;vertical-align:-1px}   /* a painted trail blaze */
.chip.today::before{box-shadow:0 -11px 0 0 currentColor;margin-top:11px;height:9px}   /* the double blaze: a turn is coming, you're on it */
.cp-do{flex:none;width:84px;font-size:11.5px;font-weight:700;padding:3px 0;color:var(--muted)}
.cp-do.cp-wear{color:var(--accent)}
.cp-do.cp-stash{color:var(--muted);font-style:italic}
.atlas-stops li{display:block}
.fc-head svg{width:17px;height:17px;color:var(--sev);flex:none}
.flag-card p{margin:6px 0 4px;white-space:pre-wrap}
.flag-card .d-actions{margin-top:6px}
.flag-title svg{width:18px;height:18px;color:var(--sev-caution)}
.m2d-flag,.lbl-flag{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sev);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);color:#fff;cursor:pointer;padding:0}
.m2d-flag svg,.lbl-flag svg{width:14px;height:14px;transform:rotate(45deg)}
.lbl-flag{position:absolute;left:0;top:0}
.fc-bad{color:var(--sev-danger);font-weight:700}
.se-add select{width:auto;flex:1;min-width:120px}
#view-atlas{grid-template-columns:minmax(0,1fr)}
#view-atlas .atlas-detail{display:none}
.rd-hero .atlas-title{font-size:clamp(26px,3.2vw,40px);margin:4px 0 8px}
.rd-beta-n.danger{color:var(--sev-danger)}
.rd-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:16px 18px}
.rd-mapcard{padding:0;overflow:hidden}
@media (max-width:860px){
  .rd-card{padding:12px}
}
.club-banner .big{color:#fff;margin:0 0 6px;font-size:clamp(26px,3.4vw,42px)}
.club-banner p{margin:0 0 8px;max-width:760px;color:rgba(255,255,255,.92)}
.club-banner .btn{background:rgba(255,255,255,.95);color:#10202a;border-color:transparent}
.cc-emblem.xl{width:84px;height:84px;font-size:28px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.7);color:#fff}
.cn-count b{font-size:28px;font-weight:800}
.club-side .challenge{margin-bottom:6px}
@media (max-width:860px){
  .cc-emblem.xl{width:56px;height:56px;font-size:19px}
}
.rd-3d{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 55%,var(--panel) 0%,var(--bg) 100%)}
.rd-3d[hidden]{display:none}
.sat-credit{position:absolute;right:10px;top:6px;font-size:10px;color:var(--muted);pointer-events:none;z-index:2;text-shadow:0 0 4px var(--bg)}
.sat-credit[hidden]{display:none}
.btn:hover{background:var(--panel-2);border-color:var(--text)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000);border-color:color-mix(in srgb,var(--accent) 86%,#000)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.btn.danger:hover{background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.btn[aria-pressed="true"],.btn[aria-selected="true"],.filters button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip,.empty,.panel,textarea,input[type=text],input[type=search],select{border-radius:var(--r)}
/* Rows of choices never wrap onto a second line; they scroll sideways */
.filters.qpick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.filters.qpick .btn{flex:none}
/* Tabs: switch what the page below shows. Underlined, like the app's main tabs. */
.tabbar{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:18px 0 14px}
.tabbar .btn{position:relative;flex:none;background:none;border:0;border-radius:0;padding:10px 12px 12px;color:var(--muted);font-weight:650;font-size:13.5px}
.tabbar .btn:hover{background:none;color:var(--text)}
.tabbar .btn[aria-pressed="true"],.tabbar .btn[aria-selected="true"]{background:none;color:var(--text);border:0}
.menu-pop .btn{background:none;border-color:transparent;justify-content:flex-start;width:100%}
.menu-pop .btn:hover{background:var(--panel-2);border-color:transparent}
.gear-sum b{font-size:15px}
.gear-sum+.bar{margin-bottom:12px}
.lbl-stop.compact{padding-right:3px}
@media (max-width:860px){
  .rd-hero-actions .btn.primary{flex:1;justify-content:center}
  .tabbar{margin-left:-2px;margin-right:-2px}
  /* three list tabs fit on a phone without scrolling */
  .tabbar .btn{padding:10px 8px 12px;font-size:13px}
  .main-quest{grid-template-columns:1fr;padding:16px;margin-bottom:18px}
  .main-quest h2{font-size:24px}
}
/* Links in quest details: a simple list, not buttons */
.ext-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:12px 0}
.ext-link span{color:var(--muted);font-size:12px}
@media (max-width:860px){
  /* invites: text and buttons side by side, smaller */
  .invite{flex-wrap:nowrap;padding:10px 12px;font-size:14px}
  .invite .btn{padding:6px 10px}
}

/* ========== Dropdowns and page bars ========== */
.dd{position:relative;display:inline-block;min-width:0;max-width:100%}
.dd>summary{list-style:none}
.dd>summary::-webkit-details-marker{display:none}
.dd-btn{max-width:100%;gap:10px}
.dd-val{display:flex;align-items:center;gap:8px;min-width:0}
.dd-val b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.dd-chev{width:14px;height:14px;flex:none;transition:transform .15s ease}
.dd[open] .dd-chev{transform:rotate(180deg)}
.dd-ico{width:16px;height:16px;flex:none}
.dd-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:600;min-width:max(100%,240px);max-width:min(360px,calc(100vw - 24px));max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:4px}
.dd-pop.dd-right{left:auto;right:0}
.dd-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:var(--r);padding:9px 10px;font-size:14px;color:var(--text)}
.dd-opt:hover{background:var(--panel-2)}
.dd-opt[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dd-opt b{font-weight:650}
.dd-opt small{display:block;color:var(--muted);font-size:12px;font-weight:500}
.dd-side{margin-left:auto;flex:none;white-space:nowrap;padding-left:8px}
.mdd .dd-pop{min-width:300px}
.dd-new{color:var(--accent);font-weight:650;border-top:1px solid var(--line);border-radius:0;margin-top:4px}
.mdd .dd-val .ready,.mdd .dd-val .small{margin-left:2px}
.page-bar{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.pb-left,.pb-right{display:flex;align-items:center;gap:8px;min-width:0}
.pb-mid{flex:1;display:flex;justify-content:center;min-width:0}
.pb-right{justify-content:flex-end}
.page-bar .inv-views{margin:0}
@media (max-width:860px){
  .page-bar{flex-wrap:wrap}
  .pb-left{max-width:60%}
  .pb-mid{order:3;flex-basis:100%;justify-content:flex-start}
  .pb-mid:empty{display:none}
  .pb-right{margin-left:auto;max-width:60%}
}
/* Map tab: quest dropdown top-left; reset and options top-right on the same line */
#mapWrap .map-quests{left:14px;right:auto;top:14px;transform:none;overflow:visible;max-width:calc(100% - 120px)}
#mapWrap .map-tools{left:auto;right:14px;top:14px;justify-content:flex-end;overflow:visible}
#mapWrap .map-more{left:auto;right:0}
#mapWrap .leaflet-top.leaflet-right{margin-top:56px}
#mapWrap .sat-credit{top:58px}
.map-quests .dd-btn{background:color-mix(in srgb,var(--panel) 92%,transparent)}
@media (max-width:860px){
  #mapWrap .map-quests{left:8px;top:8px;max-width:calc(100% - 96px)}
  #mapWrap .map-tools{right:8px;top:8px}
  #mapWrap .leaflet-top.leaflet-right{margin-top:46px}
  #mapWrap .sat-credit{top:48px}
  .map-quests .dd-btn{padding:6px 10px;font-size:12.5px}
}
/* Atlas: one search box; region, country, type and sort behind Filters */
.atlas-searchbar{display:flex;gap:8px;align-items:stretch;margin:16px 0 0}
.as-box{flex:1;position:relative;display:flex;align-items:center;min-width:0}
.as-box input[type=search]{margin:0;padding-left:40px;padding-right:46px;height:46px;font-size:15px}
.as-ico{position:absolute;left:13px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.as-box .btn.icon{position:absolute;right:5px;width:36px;height:36px;padding:0;justify-content:center;background:transparent;border-color:transparent}
.as-box .btn.icon:hover{background:var(--panel-2)}
/* Peaks around me (AR): a row under the search bar, the explanation on the left and the button on the right */
.atlas-ar{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel)}
.atlas-ar .ar-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.atlas-ar .ar-txt b{font:600 14px/1.2 var(--font)}
.atlas-ar .ar-txt span{font-size:13px;line-height:1.35;color:var(--muted)}
.atlas-ar .btn{flex:none;height:40px;gap:7px}
.atlas-ar .btn svg{width:18px;height:18px}
@media (max-width:560px){ .atlas-ar .btn span{display:none} .atlas-ar .btn{width:40px;padding:0;justify-content:center} }
#atlasList.on-page .atlas-ar{display:none}
.atlas-searchbar>.btn{height:46px}
.fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700}
.fcount[hidden]{display:none}
.atlas-suggest{margin-top:8px}
.atlas-suggest:empty{display:none}
.as-suggest{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;font-size:14px;color:var(--text)}
.as-suggest svg{width:16px;height:16px;color:var(--accent)}
.as-suggest:hover span{text-decoration:underline;text-underline-offset:3px}
.atlas-filter-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin-top:10px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.atlas-filter-panel[hidden]{display:none}
.atlas-filter-panel .field{margin:0 0 6px}
.atlas-filter-panel .filters{margin:0}
.afp-wide,.afp-foot{grid-column:1/-1}
.afp-foot{display:flex;justify-content:flex-end}
#atlasCards{margin-top:16px}
@media (max-width:860px){
  .atlas-filter-panel{grid-template-columns:1fr}
  .atlas-searchbar>.btn{padding:8px 10px}
}

/* ========== Quests home ========== */
#view-quests.q-home{grid-template-columns:minmax(0,1fr)}
#view-quests.q-home .detail-col{display:none}
#view-quests.q-home #questList{padding:24px 28px 40px;width:100%}
#view-quests.q-home .atlas-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.q-card{min-height:150px}
.q-card .bar{width:100%;margin-top:2px}
.q-card .ac-foot{width:100%;flex-wrap:wrap;gap:10px}
/* A quest card's corner controls (readiness, download, the menu) sit over the card, above its chips */
.q-card-wrap{position:relative;display:grid;min-width:0}
.q-card-wrap>.q-card{height:100%}
.q-card-wrap>.mq-ready{position:absolute;top:16px;right:12px;z-index:2;gap:6px}
.q-card-wrap.has-ctrls>.q-card .ac-top{min-height:30px;padding-right:118px}
.q-card-wrap .mq-ready .btn.icon{width:30px;height:30px;padding:0;justify-content:center}
.q-card-wrap .mq-ready .btn.icon svg{width:18px;height:18px}
.q-people{display:inline-flex;align-items:center;gap:3px}
.q-people .mdot{margin:0}
.q-people .small{margin-left:4px}
@media (max-width:860px){#view-quests.q-home #questList{padding:18px 16px 32px}}

/* Atlas route: what the quest is made of */
.rd-qlist{list-style:none;margin:0;padding:0}
.rd-qlist li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.rd-qlist li p{margin:2px 0 0}
.rd-quests .tabbar{margin:8px 0 6px}
.rd-hero-actions .btn{flex:none}
/* ========== Weather along the route ========== */
.rwx-ctl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-bottom:6px}
.rwx-ctl label{display:flex;flex-direction:column;gap:3px;font-weight:600;color:var(--muted)}
.rwx-ctl select,.rwx-ctl input{width:auto;padding:6px 8px;font-size:13px}
/* one height for the whole row: the time field otherwise keeps the general date/time minimum and stands taller */
.rwx-ctl select,.rwx-ctl input:not([type=checkbox]){height:38px;min-height:0;box-sizing:border-box;line-height:1.2}
.rwx-sum{margin:4px 0 8px}
.rwx-plot{touch-action:none;cursor:crosshair;user-select:none}
.rwx-svg{display:block;width:100%;height:220px}
.rwx-fill{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.rwx-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.rwx-fl{fill:none;stroke:#2563eb;stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.rwx-night{fill:color-mix(in srgb,var(--text) 9%,transparent)}
.rwx-tick{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.rwx-tl{font-size:9px;fill:var(--muted);text-anchor:middle}
.rwx-bl{font-size:8px;fill:#0d1b24;opacity:.7}
.rwx-cur{stroke:var(--text);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}
.rwx-read{min-height:44px;margin:6px 0;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);font-size:13.5px}
.rwx-vals{display:block;color:var(--muted);margin-top:2px}
.rwx-alerts{margin:8px 0;padding:10px 12px 10px 28px;border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent);font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.rwx-ok{margin:8px 0;padding:8px 12px;border-left:3px solid var(--r-green);background:color-mix(in srgb,var(--r-green) 8%,transparent)}
.rwx-win{margin-top:10px}
.rwx-win-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.rwx-bars{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;height:70px}
.rwx-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;background:none;border:0;padding:0;height:100%;cursor:pointer}
.rwx-bar i{display:block;width:100%;border-radius:2px 2px 0 0;opacity:.75}
.rwx-bar i.g{background:var(--r-green)}.rwx-bar i.y{background:var(--r-yellow)}.rwx-bar i.r{background:var(--r-red)}
.rwx-bar span{font-size:10px;color:var(--muted);height:12px;line-height:12px}
.rwx-bar.on i{opacity:1;outline:2px solid var(--text);outline-offset:1px}
.rwx-bar:hover i{opacity:1}
/* ========== Dark and blackout details ========== */
/* Dark: a touch more lift on cards and controls so surfaces separate */
:root[data-theme="dark"] .btn,:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{border-color:rgba(255,255,255,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-theme="blackout"]) .btn{border-color:rgba(255,255,255,.22)}}
/* Blackout: everything red. Category, member and badge colours, photos and maps all follow. */
:root[data-theme="blackout"] [style*="--cat"]{--cat:var(--accent)!important}
:root[data-theme="blackout"] [style*="--club"]{--club:#8A1608!important}
:root[data-theme="blackout"] [style*="--pc"]{--pc:var(--text)!important}
:root[data-theme="blackout"] .diff{background:#3A0800!important;color:var(--text)!important;border:1px solid var(--line-strong)}
:root[data-theme="blackout"] .diff.d4,:root[data-theme="blackout"] .diff.d5{background:#7A1004!important;color:#000!important}
:root[data-theme="blackout"] .mdot{background:var(--accent)!important}
:root[data-theme="blackout"] img,:root[data-theme="blackout"] video,:root[data-theme="blackout"] .leaflet-tile,:root[data-theme="blackout"] .rwx-svg rect[fill],:root[data-theme="blackout"] #charCanvas{filter:grayscale(1) sepia(1) saturate(5) hue-rotate(-38deg) brightness(.55)}
:root[data-theme="blackout"] .leaflet-tile-pane{filter:none!important}
:root[data-theme="blackout"] .club-banner{background:#140200;color:var(--text)}
:root[data-theme="blackout"] .club-banner .big,:root[data-theme="blackout"] .club-banner p,:root[data-theme="blackout"] .cb-meta{color:var(--text)}
:root[data-theme="blackout"] .rwx-fl{color:var(--text);stroke:var(--text)}
:root[data-theme="blackout"] .tile svg,:root[data-theme="blackout"] .cat-chip i{color:var(--accent)}
:root[data-theme="blackout"] ::selection{background:#5A0C04;color:#FF8A6A}
@media (max-width:860px){.pb-back-l{display:none}.pb-back{padding:8px 11px}.page-bar .pb-left{max-width:70%}}
@media (max-width:860px){.page-bar:has(> .pb-mid:empty){flex-wrap:nowrap}.page-bar:has(> .pb-mid:empty) .pb-left{flex:1 1 auto;min-width:0;max-width:none}.pb-left .dd{min-width:0;flex:0 1 auto}.pb-left .dd-btn{max-width:100%}.page-bar .pb-right{flex:none;max-width:none;margin-left:0}}
/* Phones: the wider logo font needs the room; the sync dot stays (its text is in the tooltip) */
@media (max-width:480px){.sync-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.brand h1{font-size:clamp(14px,4.4vw,18px)!important;letter-spacing:0}}
/* ========== Guests (signed out) ========== */
.tab .count{display:none}
#view-guest{grid-template-columns:minmax(0,1fr)}
.guest-wrap{display:grid;place-items:center;padding:32px 16px}
.guest-card{max-width:520px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.guest-card .d-actions{justify-content:center}
.guest-head{flex-direction:row;align-items:center}
.login-box{position:relative}
.login-close{position:absolute;top:10px;right:10px;padding:6px 10px}
body.guest .tab[data-tab]:not([data-tab="atlas"]){opacity:.7}
/* ========== Atlas front page ========== */
.atlas-front{display:flex;flex-direction:column;gap:22px;margin-bottom:26px}
.ad-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.ad-head h3{font-size:18px;font-stretch:87%}
.atlas-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.atlas-row>*{scroll-snap-align:start}
.atlas-row.big{grid-auto-columns:minmax(300px,360px)}
.atlas-card{overflow:hidden}
.ac-thumb{display:block;width:calc(100% + 32px);height:86px;margin:-14px -16px 6px;background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 60%,var(--panel)));border-bottom:1px solid var(--line)}
.atlas-card.big .ac-thumb{height:130px}
.ac-thumb.empty{background:var(--panel-2)}
.ac-line{fill:none;stroke:var(--accent);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ac-sil{fill:color-mix(in srgb,var(--text) 10%,transparent)}
.ac-start{fill:var(--panel);stroke:var(--accent);stroke-width:2}
.ad-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ad-tile{border:0;border-radius:var(--r);padding:16px 10px;color:#fff;font-weight:700;text-align:left;min-height:64px;display:flex;align-items:flex-end}
.diff-tile.d1{background:#2E8B57}.diff-tile.d2{background:#3E7CB1}.diff-tile.d3{background:#C98A00}.diff-tile.d4{background:#D9480F}.diff-tile.d5{background:#8E1B3A}
.ad-tile:hover{filter:brightness(1.08)}
.ad-chips{display:flex;flex-wrap:wrap;gap:6px}
.ad-near p{margin:0}
@media (max-width:860px){.ad-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.atlas-row{grid-auto-columns:78%}.atlas-row.big{grid-auto-columns:86%}}
:root[data-theme="blackout"] .ad-tile{background:#3A0800!important;color:var(--text)}
/* ========== Atlas route dashboard ========== */
.rd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;align-items:stretch;margin:14px 0 6px}
.rd-mapcol{min-width:0}
.rd-mapcol .rd-card{height:100%}
.rd-glance{display:flex;flex-direction:column;gap:16px;min-width:0}
.rd-glance .rd-card{height:auto}
.rd-glance .rd-card:first-child{flex:1}
.rd-glance-in h3{margin-bottom:8px}
.rd-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:0 0 12px}
.rd-kv dt{font-size:11.5px;color:var(--muted)}
.rd-kv dd{margin:2px 0 0;font-weight:700;font-size:17px}
.rd-season{margin:0 0 10px}
.rd-glance-q{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-top:8px}
.rd-glance-q>span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.rd-glance-q:hover{border-color:var(--line-strong)}
.rd-glance-beta{border-left:3px solid var(--sev-caution, var(--warn))}
.rd-glance-beta.danger{border-left-color:var(--sev-danger, var(--r-red))}
.rd-tabs{margin:16px 0 14px;position:sticky;top:0;z-index:5;background:var(--bg)}
.rd-panel[hidden]{display:none}
.rd-panel>.rd-card,.rd-panel>.rd-two{margin-bottom:16px}
.rd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:16px;align-items:start}
.rd-cols .rd-main,.rd-cols .rd-side{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1100px){.rd-top{grid-template-columns:1fr}.rd-cols{grid-template-columns:1fr}}
/* Featured: one lead story and a 2 x 2 grid beside it */
.feat-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.feat-mids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.atlas-card.feat-big .ac-thumb{height:auto;flex:1;min-height:260px}
.atlas-card.feat-big{min-height:100%}
.atlas-card.feat-big .ac-title{font-size:clamp(20px,2vw,26px);font-stretch:87%}
.ac-sum{font-size:14px;line-height:1.45;color:var(--text);opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.atlas-card.feat-mid .ac-thumb{height:96px}
.atlas-card.feat-mid{min-height:0}
@media (max-width:1000px){.feat-grid{grid-template-columns:1fr}.atlas-card.feat-big .ac-thumb{min-height:200px}}
@media (max-width:560px){.feat-mids{grid-template-columns:1fr;grid-template-rows:none}}
.invite-sec{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.iv-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Installed app (iPhone home screen): the shell is pinned to the screen edges so it always reaches
   the bottom, and the page behind it is the app colour, never white. The phone tab bar pads itself
   above the home indicator. */
html{background:var(--bg)}
html{padding-top:0!important;padding-bottom:0!important}
body{position:fixed;inset:0;height:auto;width:auto;padding-top:env(safe-area-inset-top,0px)}
@media (display-mode: standalone){body{background:#000} #app{background:var(--bg)}}   /* installed on a phone: the strip above the header (the status bar's inset) is black; the app paints its own background below it */
@media (min-width:861px){body{padding-bottom:env(safe-area-inset-bottom,0px)}}
/* Pop-ups never cover the header or the phone tab bar: they fill only the space between them
   (--chrome-top/--chrome-bottom, measured from <main>). The first sign-in wall is the exception. */
.modal,body.guest .login,.detail-col.open{top:var(--chrome-top,0px)!important;bottom:var(--chrome-bottom,0px)!important}
.modal{padding-top:20px;padding-bottom:20px}
body.guest .login{padding-top:24px;padding-bottom:24px;z-index:400}
@media (max-width:860px){.detail-col{padding-top:16px!important;padding-bottom:24px!important}.modal{padding:0}}
/* ========== Admin dashboard ========== */
#view-admin{grid-template-columns:minmax(0,1fr)}
.admin-wrap{padding:24px 28px 48px}
.admin{display:flex;flex-direction:column;gap:16px}
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.adm-tile{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.adm-tile b{font-size:28px;font-stretch:87%;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.adm-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.adm-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.adm-chart svg{display:block;width:100%;height:auto}
.adm-bar .bar{fill:var(--accent)}
.adm-bar .hit{fill:transparent}
.adm-bar:hover .bar{fill:color-mix(in srgb,var(--accent) 80%,var(--text))}
.adm-base{stroke:var(--line-strong);stroke-width:1}
.adm-axis{font-size:10px;fill:var(--muted)}
.adm-tip{position:fixed;z-index:2000;transform:translate(-50%,calc(-100% - 6px));background:var(--text);color:var(--bg);font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--r);pointer-events:none;white-space:nowrap}
.adm-tip[hidden]{display:none}
.adm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.adm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.adm-table th,.adm-table td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.adm-table tbody th{color:var(--muted)}
.adm-table td{font-variant-numeric:tabular-nums}
.adm-list thead th{font-size:12px;color:var(--muted);font-weight:600}
.adm-list select{width:auto;padding:4px 6px;font-size:13px}
.adm-scroll{overflow-x:auto}
.adm-scroll:has(details.menu[open]){overflow:visible}
.adm-hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.adm-hbars li{display:grid;grid-template-columns:72px 1fr 40px;align-items:center;gap:8px;font-size:13.5px}
.adm-hbar{height:10px;background:var(--panel-2);border-radius:5px;overflow:hidden}
.adm-hbar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.adm-hbars b{text-align:right;font-variant-numeric:tabular-nums}
/* admin dashboard, Oct 2026: needs attention, trends, held routes, coverage, inbox, system, phone cards */
.adm-attn{border-left:4px solid var(--accent)}
.attn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.attn-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.attn-item:last-child{border-bottom:0}
.attn-item.attn-wide{grid-template-columns:44px minmax(0,1fr);align-items:start}
.attn-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:17px;font-variant-numeric:tabular-nums}
.attn-act{display:flex;gap:6px}
.attn-people{list-style:none;margin:8px 0 0;padding:0}
.attn-people li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px dashed var(--line)}
.attn-clear{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.attn-clear svg{width:18px;height:18px;color:var(--ok,#2E8B57)}
.adm-range-head{margin:18px 0 8px}
.adm-range-head h3{margin:0}
.adm-spark{width:100%;height:28px;margin-top:6px}
.adm-spark polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.adm-delta{font-weight:700;color:var(--muted)}
.adm-delta.up{color:var(--ok,#2E8B57)}
.adm-delta.down{color:var(--danger,#c0392b)}
.adm-totals{margin:12px 0}
.adm-funnel li{grid-template-columns:110px 1fr 48px}
.adm-pfilters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 10px}
.adm-pfilters .adm-search{flex:1 1 260px;margin:0}
.adm-f{display:flex;flex-direction:column;gap:2px}
.adm-f select{width:auto;min-width:140px}
.adm-more-cell{width:44px;text-align:right}
.adm-pmenu .menu-pop{right:0;left:auto}
.adm-invite-dlg{width:min(640px,calc(100vw - 24px))}
.adm-invite-dlg .invite-sec{margin:0}
.held-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:14px;align-items:start;margin-top:10px}
.held-list{max-height:620px;overflow:auto;padding-right:4px}
.held-list h4{margin:10px 0 4px;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--muted)}
.held-list ul{list-style:none;margin:0;padding:0}
.held-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 6px;border-bottom:1px solid var(--line)}
.held-row.on{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.held-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:none;border:0;padding:0;flex:1 1 260px;min-width:0;color:var(--text)}
.held-why{color:var(--warn,#a86b00)}
.held-side{position:sticky;top:0}
.held-map{height:320px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.cov-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:14px;align-items:start}
.cov-map{height:340px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.cov-list li{grid-template-columns:120px 1fr 52px}
.sys-list{list-style:none;margin:0;padding:0}
.sys-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.err-list{list-style:none;margin:0;padding:0}
.err-list li{border-bottom:1px solid var(--line);padding:8px 0}
.err-list summary{cursor:pointer;list-style:none}
.err-list summary::-webkit-details-marker{display:none}
.err-detail{white-space:pre-wrap;word-break:break-word;font-size:12px;background:var(--panel-2);padding:8px 10px;border-radius:var(--r);max-height:240px;overflow:auto}
.sp-inbox{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:14px;align-items:start;margin-top:10px}
.sp-ilist{max-height:640px;overflow:auto}
.sp-ilist .sp-item{margin:0 0 6px}
.sp-ilist .sp-item.open{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.sp-pane{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 14px;min-height:240px}
.sp-pane-head h4{margin:0 0 2px;font-size:17px}
.sp-pane .sp-thread{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.sp-pick{margin:40px 0;text-align:center}
@media (max-width:900px){
  .held-grid,.cov-grid,.sp-inbox{grid-template-columns:1fr}
  .held-side{position:static;order:-1}
  .held-map{height:220px}
  .cov-map{height:240px}
}
/* phones: tables become cards, each value with its column name */
@media (max-width:700px){
  .adm-cards thead{display:none}
  .adm-cards,.adm-cards tbody{display:block}
  .adm-cards tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);position:relative}
  .adm-cards td{display:flex;flex-direction:column;gap:1px;border:0;padding:0;min-width:0}
  .adm-cards td[data-l]::before{content:attr(data-l);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .adm-cards td[data-l="Name"],.adm-cards td[data-l="Route"]{grid-column:1/-1;padding-right:44px}
  .adm-cards td[data-l="Email"]{grid-column:1/-1;word-break:break-all}
  .adm-cards .adm-more-cell{position:absolute;right:0;top:8px;width:auto}
  .adm-scroll{overflow:visible}
  .attn-item{grid-template-columns:36px minmax(0,1fr)}
  .attn-item .attn-act{grid-column:2}
  .attn-n{width:34px;height:34px;font-size:15px}
}
@media (max-width:860px){.admin-wrap{padding:16px 14px 36px}}
/* Phones: text fields at 16px or more, so iOS never zooms in when you tap one (the viewport also says not to) */
@media (max-width:860px){input,select,textarea,.dd-btn{font-size:16px!important}input[type=checkbox],input[type=radio]{font-size:inherit!important}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Quest Builder: one button, two ways to start */
.qb-pop{min-width:280px}
@media (max-width:860px){.qb-menu .menu-pop{left:0;right:auto;max-width:calc(100vw - 32px)}}
.qb-pop .btn{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;text-align:left;padding:10px 12px}
.qb-pop .btn b{font-weight:650}
/* ========== Atlas: photos, collections, ranges, picks ========== */
.ac-media{position:relative;display:block;width:calc(100% + 32px);height:130px;margin:-14px -16px 6px;overflow:hidden;background:var(--panel-2)}
.ac-media img{width:100%;height:100%;object-fit:cover;display:block}
.atlas-card.feat-big .ac-media{height:auto;flex:1;min-height:260px}
.atlas-card.feat-big .ac-media img{position:absolute;inset:0}
.atlas-card.feat-mid .ac-media{height:110px}
.ac-inset{position:absolute;right:8px;bottom:8px;width:84px;height:60px;border-radius:6px;background:rgba(10,14,18,.62);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.35);overflow:hidden}
.atlas-card.feat-big .ac-inset{width:130px;height:92px}
.ac-inset svg{display:block;width:100%;height:100%}
.ac-inset .ac-line{stroke:#ffb27a;stroke-width:2.4}
.ac-inset .ac-start{fill:#0d1b24;stroke:#ffb27a}
.ac-credit{position:absolute;left:6px;bottom:5px;max-width:calc(100% - 110px);font-size:9.5px;line-height:1.2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.ad-see{margin-left:auto}
.ad-personal{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:18px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ad-pro-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.col-row{grid-auto-columns:minmax(220px,260px)}
.col-card{position:relative;height:150px;border:0;border-radius:var(--r);overflow:hidden;padding:0;background:var(--panel-2);text-align:left;color:#fff}
.col-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72))}
.col-text{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:2px}
.col-text b{font-size:17px;font-stretch:87%;line-height:1.2}
.col-text span{font-size:12.5px;opacity:.9}
.col-card:not(:has(img)) .col-shade{background:linear-gradient(135deg,var(--accent),#7a2c08)}
.atlas-page{display:flex;flex-direction:column;gap:14px}
.ap-hero{position:relative;min-height:200px;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--accent),#5a2408);color:#fff;display:flex;align-items:flex-end}
.ap-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-text{position:relative;padding:18px 20px}
.ap-text .big{color:#fff;margin:2px 0 6px}
.ap-text p{margin:0;max-width:720px;opacity:.92}
.ap-map{height:340px;border-radius:var(--r);border:1px solid var(--line)}
.ap-step{position:relative}
.ap-n{position:absolute;z-index:2;top:-8px;left:-8px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.ap-step .atlas-card{height:100%;width:100%}
.rd-cover{margin:0 0 -1px;height:clamp(180px,26vw,320px);border-radius:var(--r) var(--r) 0 0;overflow:hidden;position:relative}
.rd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rd-cover figcaption{position:absolute;right:8px;bottom:6px;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.rd-cover figcaption a{color:#fff}
.rd-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.checks.months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
#atlasList.on-page .atlas-filter-panel,#atlasList.on-page .atlas-suggest{display:none}
:root[data-theme="blackout"] .ac-media img,:root[data-theme="blackout"] .col-card img,:root[data-theme="blackout"] .ap-hero img,:root[data-theme="blackout"] .rd-cover img{filter:grayscale(1) sepia(1) saturate(5) hue-rotate(-38deg) brightness(.5)}
@media (max-width:860px){.ac-media{height:150px}.checks.months{grid-template-columns:repeat(4,minmax(0,1fr))}.ap-map{height:260px}}
/* ========== Dashboard: weather side by side, beta feed ========== */
.rd-wx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.rd-wx>.rd-card{min-width:0}
.rd-wx .rwx-svg{height:200px}
@media (max-width:1100px){.rd-wx{grid-template-columns:1fr}}
.rd-know{margin:16px 0 6px}
.bf-compose{display:flex;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.bf-guest{display:block}
.bf-fields{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.bf-fields textarea{min-height:56px}
.bf-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bf-row select{width:auto}
.bf-row .btn.primary{margin-left:auto}
.bf-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:color-mix(in srgb,var(--pc, var(--muted)) 22%,var(--panel-2));color:var(--text)}
.bf-post{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.bf-post.sev-caution{box-shadow:inset 3px 0 0 var(--sev-caution, var(--r-yellow));padding-left:10px}
.bf-post.sev-danger{box-shadow:inset 3px 0 0 var(--sev-danger, var(--r-red));padding-left:10px}
.bf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.bf-main p{margin:2px 0}
.bf-title{font-weight:650}
.bf-empty{padding:14px 0}
/* ========== Options page ========== */
#view-options{grid-template-columns:minmax(0,1fr)}
.opt-page{padding:24px 28px 48px}
.opt-wrap{max-width:900px}
.opt-wrap .opt-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 14px}
.opt-wrap .opt-sec:not(.on){display:none}   /* one tab's section at a time, on phones too (the tab bar scrolls sideways) */
@media (max-width:860px){.opt-page{padding:16px 14px 36px}.opt-tabs{margin-top:10px}}
/* ========== Character: sections; on phones the character stays put ========== */
.cust-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cust-nav-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.cust-nav-item>span:first-child{display:flex;flex-direction:column;gap:2px}
.cust-nav-item:hover{border-color:var(--line-strong)}
.cust-back{margin:4px 0 8px}
.preset-form{display:flex;gap:8px;margin-bottom:12px}
.preset-list{list-style:none;margin:0;padding:0}
.preset-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.preset-list li .d-actions{margin-left:auto}
@media (max-width:860px){
  #view-char.customizing-m{grid-template-rows:minmax(0,42%) minmax(0,1fr)!important;overflow:hidden!important}
  #view-char.customizing-m .char-panel{overflow:auto!important;min-height:0}
}
/* ========== Utilities ========== */
/* One-off spacing and layout helpers used in the markup instead of inline styles. !important on purpose:
   they stand in for style="" attributes, which beat any stylesheet rule. */
.u-m0{margin:0!important}
.u-mt4{margin-top:4px!important}
.u-mt6{margin-top:6px!important}
.u-mt8{margin-top:8px!important}
.u-mt10{margin-top:10px!important}
.u-mt12{margin-top:12px!important}
.u-mt14{margin-top:14px!important}
.u-mt16{margin-top:16px!important}
.u-mt18{margin-top:18px!important}
.u-mt20{margin-top:20px!important}
.u-mt34{margin-top:34px!important}
.u-mb6{margin-bottom:6px!important}
.u-mb12{margin-bottom:12px!important}
.u-mb18{margin-bottom:18px!important}
.u-wauto{width:auto!important}
.u-full{width:100%!important}
.u-minh70{min-height:70px!important}
.u-minh90{min-height:90px!important}
.u-minh100{min-height:100px!important}
.u-minh110{min-height:110px!important}
.u-minw180{min-width:180px!important}
.u-minw200{min-width:200px!important}
.u-grow{flex:1!important}
.u-row{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
.u-wrap{flex-wrap:wrap!important}
.u-block{display:block!important}
.u-center{justify-content:center!important}
.u-right{text-align:right!important}
.u-span{grid-column:1/-1!important}
.u-p12{padding:12px!important}
.u-p4x8{padding:4px 8px!important}
.u-p2x8{padding:2px 8px!important}
.u-warn{color:var(--warn)!important}
.u-bg-strong{background:var(--line-strong)!important}
.u-pointer{cursor:pointer!important}
/* Phones: the tab bar reaches the bottom edge and pads itself above the home indicator (padding is in .tabs).
   Wider screens keep the page clear of it instead. */
@media (min-width:861px){:root{padding-bottom:env(safe-area-inset-bottom,0px)}}

/* ========== Atlas: composers behind a button; Featured as a carousel on phones ========== */
.compose-acc{margin:4px 0 14px}
.compose-acc>summary{list-style:none;display:inline-flex;cursor:pointer}
.compose-acc>summary::-webkit-details-marker{display:none}
.compose-acc[open]>summary{margin-bottom:12px}
.compose-acc>.review-form{margin-top:0}
.atlas-card.feat-mid .ac-sum{display:none}
@media (max-width:860px){
  /* Phones: the lead story is one big card that stays put; the other four scroll sideways below it. */
  .feat-grid{display:flex;flex-direction:column;gap:12px}
  .feat-mids{display:flex;grid-template-columns:none;grid-template-rows:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .feat-mids::-webkit-scrollbar{display:none}
  .feat-grid .atlas-card{min-height:0}
  .feat-mids .atlas-card{flex:0 0 84%;scroll-snap-align:start}
  .feat-grid .atlas-card .ac-media,.feat-grid .atlas-card .ac-thumb{flex:none;height:210px;min-height:210px}
  .feat-grid .atlas-card .ac-media img{position:absolute;inset:0}
  .feat-grid .atlas-card .ac-inset{width:130px;height:92px}
  .feat-grid .atlas-card .ac-title{font-size:21px;font-stretch:87%}
  .feat-grid .atlas-card.feat-mid .ac-sum{display:-webkit-box}
}

/* Admin: people search */
.adm-search{margin:4px 0 10px;max-width:520px}
.adm-ph{margin:0 0 6px}
.adm-code{display:block;font-variant-numeric:tabular-nums}

/* ========== Atlas: mountain ranges ========== */
.ap-crumbs{margin:10px 0 2px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;color:var(--muted)}
.ap-crumbs b{color:var(--text)}
.ap-subs{margin:18px 0 6px}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.sub-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer;min-width:0}
.sub-card b{font-size:15px;overflow-wrap:anywhere}
.sub-card:hover{border-color:var(--accent)}
.ap-routes-h{margin-top:18px}
.ap-credit{margin-top:22px}
.rd-search{margin:12px 0 10px;max-width:640px}
@media (max-width:560px){.sub-grid{grid-template-columns:1fr 1fr}.sub-card{padding:10px 12px}.sub-card b{font-size:14px}}

/* ========== Atlas: traverses (up one route option, down another) ========== */
.rd-trav h3{margin-bottom:4px}
.trav-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center;margin:10px 0 8px}
.trav-pick .field{margin:0}
.trav-map{margin:4px 0 6px}
.trav-map svg{display:block;width:100%;height:auto;background:var(--panel-2);border-radius:8px}
.trav-up,.trav-down{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trav-up{stroke:#D9500A}
.trav-down{stroke:#2563eb;stroke-dasharray:6 4}
.trav-a{fill:#fff;stroke:#111;stroke-width:2}
.trav-b{fill:#111}
.trav-top{fill:#111}
.trav-map figcaption{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.trav-k{display:inline-block;width:18px;height:3px;border-radius:2px;background:#D9500A}
.trav-k.down{background:repeating-linear-gradient(90deg,#2563eb 0 6px,transparent 6px 9px)}
.trav-stats{margin:6px 0 2px}
.trav-sugs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.chip-btn{font:inherit;font-size:12.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;text-align:left}
.chip-btn.on,.chip-btn:hover{border-color:var(--accent)}
.rd-travcard{margin:16px 0 6px}
.rd-trav{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 22px}
@media (min-width:980px){.rd-trav{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:start}.trav-map{margin:0}.rd-trav .trav-col:last-child .trav-stats{margin-top:0}}
.trav-alt{margin:2px 0 6px!important;color:var(--warn-text, var(--text))}

/* ========== Atlas: round trip / multi-route, and the Custom route tab ========== */
.rd-trip{margin:8px 0 10px;display:flex;align-items:center;gap:8px}
.rd-custom{margin:6px 0 4px;max-width:560px}
.rd-custom .trav-pick{margin-top:4px}
.rd-custom-note{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px!important}
.rd-two-n{display:flex;flex-direction:column;gap:1px}
.rd-kv dd small{font-size:11.5px;font-weight:500;color:var(--muted)}
.rd-two-n>span:last-child{font-size:15px}
.rd-custom-key{display:flex;gap:16px;align-items:center;margin:8px 0 2px!important}
.rd-custom-key>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rd-custom-key .trav-k{display:inline-block}
.rd-custom-note{display:block}

/* ========== Atlas route page: map left, tabs and panels right (desktop); At a glance in the Overview block ========== */
.rd-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:14px 0 6px;align-items:start}
.rd-body .rd-mapcol .rd-card{height:auto}
.rd-info{min-width:0}
.rd-over{display:flex;flex-direction:column;gap:16px}
.rd-overcard .rd-glance-in{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.rd-overcard .rd-kv{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rd-body .rd-tabs{margin-top:0}
@media (min-width:1101px){
  .rd-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
  .rd-body .rd-two,.rd-body .rd-wx{grid-template-columns:minmax(0,1fr)}
  .rd-body .rd-mapwrap{height:clamp(360px,58vh,640px)}
}
/* A tall enough window: the map stays in view while the right side scrolls. */
@media (min-width:1101px) and (min-height:820px){.rd-body .rd-mapcol{position:sticky;top:12px}}

/* ========== Profile tabs; Atlas overview: About first, then the numbers ========== */
.prof-tabs{margin:0 0 16px}
.rd-overcard .rd-glance-in{padding-bottom:0;margin-bottom:0;border-bottom:0;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.rd-overcard .rd-glance-in:first-child{padding-top:0;margin-top:0;border-top:0}

/* ========== Atlas route page: the Overview block in parts; the itinerary inside the Quest tab ========== */
.rd-ov{display:flex;flex-direction:column}
.rd-ov-part{padding:16px 0;border-top:1px solid var(--line)}
.rd-ov-part:first-child{padding-top:0;border-top:0}
.rd-ov-part:last-child{padding-bottom:0}
.rd-ov-part>h3{margin-bottom:8px}
.rd-ov-part>.rd-know{margin:0 0 10px}
.rd-ov .rd-tags{margin:0 0 10px}
.rd-ov-part>p:last-child{margin-bottom:0}
.rd-ov .rd-glance-q{margin-top:12px}
.rd-overcard .rd-glance-in{padding:0;margin:0;border:0}
.rd-overcard .rd-kv{margin-bottom:0}
.rd-ov .rd-season{margin:10px 0 0}
.rd-ov-kv dd{display:flex;flex-direction:column;gap:2px}
.rd-months{font-weight:650}
.rd-days{list-style:none;padding:0;margin:0}
.rd-days>.rd-day{padding:12px 0;border-top:1px solid var(--line)}
.rd-days>.rd-day:first-child{border-top:0;padding-top:4px}
.rd-day>.atlas-stops{margin:8px 0 0}
.rd-days>.rd-day{border-top:0}
.rd-days>.rd-day:last-child{border-bottom:0}
.rd-day .atlas-stops li:last-child{border-bottom:0}

/* Admin: same-mountain routes */
.adm-fam{list-style:none;margin:8px 0 0;padding:0}
.adm-fam li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}

/* ========== Atlas: unverified (computer-drawn) routes ========== */
.rd-unver{margin:6px 0 10px;padding:10px 12px;border:1px solid var(--warn, #b7791f);border-left-width:4px;border-radius:var(--r, 8px);background:color-mix(in srgb, var(--warn, #b7791f) 10%, transparent);font-size:14px;line-height:1.45;max-width:760px}
.ac-unver{white-space:nowrap}

/* ========== Smaller logo; cover photo inside the route header (desktop) ========== */
.brand h1{font-size:22px}
@media (max-width:860px){.brand h1{font-size:clamp(12px,3.7vw,17px)!important}}
.rd-hero.has-cover{padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:0}
.rd-hero-main{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;flex:1;min-width:0}
.rd-hero.has-cover .rd-hero-main{padding:18px 20px;order:2}
.rd-hero.has-cover .rd-cover{margin:0;border-radius:0;height:clamp(170px,42vw,260px);order:1}
@media (min-width:1001px){
  .rd-hero.has-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rd-hero.has-cover .rd-hero-main{order:1;flex-direction:column;align-items:stretch;justify-content:space-between;padding:20px 22px}
  .rd-hero.has-cover .rd-cover{order:2;height:100%;min-height:260px}
  .rd-hero.has-cover .rd-hero-actions{max-width:none;justify-content:flex-start}
}
.adm-wide .role-list{margin-top:8px}

/* ========== Adding a quest: the invite step; review photos and the Photos tab ========== */
.inv-sec{margin-top:16px}
.inv-picked,.inv-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.inv-results{margin-top:8px}
.inv-results li{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rv-photos{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.rv-pending{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.rv-thumb{position:relative;width:72px;height:72px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-thumb button{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;width:20px;height:20px;line-height:1;text-decoration:none;font-size:11px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.rp{margin:0}
.rp img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:6px;background:var(--panel-2)}
.rp figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:4px;color:var(--muted)}
/* Inventory: the view switch on the left, the quest picker at the top right (it shrinks before it overlaps) */
#invList .page-bar{flex-wrap:nowrap!important}
#invList .page-bar .pb-left{flex:none;max-width:none!important}
#invList .page-bar .pb-mid{display:none}
#invList .page-bar .pb-right{flex:1 1 0!important;min-width:0;max-width:none!important;margin-left:0;justify-content:flex-end}
#invList .page-bar .pb-right .dd{min-width:0;max-width:100%}
#invList .page-bar .pb-right .dd-btn{max-width:100%;min-width:0}
#invList .page-bar .pb-right .dd-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Route header with a photo: the text side never runs under the photo (the route tabs scroll inside it) */
.rd-hero.has-cover .rd-hero-main{min-width:0;overflow:hidden}
.rd-hero.has-cover .rd-hero-text{min-width:0;max-width:100%}
.rd-hero.has-cover .atlas-opts{max-width:100%;overflow-x:auto}
/* Route header on desktop: the card is as tall as its text; the photo fills a narrow column at the right and never makes the card taller. */
@media (min-width:1001px){
  .rd-hero.has-cover{grid-template-columns:minmax(0,1fr) clamp(200px,26%,340px)}
  .rd-hero.has-cover .rd-cover{height:auto;min-height:0;align-self:stretch}
  .rd-hero.has-cover .rd-cover img{position:absolute;inset:0}
}

/* Route header: the description, the numbers and "good to know" sit in the header itself */
.rd-hero .rd-ov{margin-top:12px;max-width:900px}
.rd-hero .rd-ov-part{padding:12px 0}
.rd-hero .rd-ov-part:first-child{padding-top:0}
.rd-hero .rd-ov-part>p{margin:0 0 8px}
.rd-hero .rd-ov .rd-glance-in{padding:0;margin:0;border:0}
.rd-hero .rd-ov .rd-kv{margin-bottom:0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rd-hero.has-cover .rd-hero-text{width:100%}
/* Route header: the text keeps a readable width and the photo takes all the rest of the card (the card's height still comes from the text) */
@media (min-width:1001px){
  .rd-hero.has-cover{grid-template-columns:minmax(0,960px) minmax(240px,1fr)}
}

/* Route view (sim.js): the 3D walk opened over the app, and its header button (pulses while playing or live) */
.sim-overlay{position:fixed;inset:0;z-index:600;background:#11161d;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)} /* the iframe gets no safe-area insets of its own, so keep it clear of the status bar and home indicator here */
.sim-overlay iframe{display:block;width:100%;height:100%;border:0}
body.sim-open{overflow:hidden}
.sim-btn{position:relative;color:var(--accent)}
.sim-btn svg{width:16px;height:16px}
.sim-btn.running{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sim-btn.running::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--accent);animation:simPulse 1.6s ease-out infinite;pointer-events:none}
@keyframes simPulse{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.sim-btn.running::after{animation:none;opacity:.6}}
.guest-head{display:flex;align-items:center;gap:8px}
.mq-sim{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Clubs: the feed, the manage gear, the group chat; without the side column, the tabs use the full width */
.club-grid.no-side{grid-template-columns:minmax(0,1fr)!important}
.club-gear[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.club-manage-head{margin:4px 0 8px}
.club-feed{display:flex;flex-direction:column;gap:12px}
.feed-item .by-btn{border:0;background:none;padding:0;margin-right:8px;display:grid;place-items:center}
.feed-item .by-btn .mdot{width:28px;height:28px}
.feed-more summary{list-style:none;cursor:pointer}.feed-more summary::-webkit-details-marker{display:none}
.feed-more[open] summary{display:none}
.club-chat .btn{margin-top:8px}
/* club page, Oct 2026: short header, next trip first, readiness board, calendar, mixed feed */
.club-banner{padding:18px 22px;gap:16px;overflow:visible}
.club-banner::after{right:0}
.club-banner.has-cover{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.72) 100%),var(--cover) center/cover no-repeat,var(--club)}
.club-banner.has-cover::after{display:none}
.club-banner .cc-emblem.xl{width:64px;height:64px;font-size:22px}
.club-banner .big{font-size:clamp(24px,3vw,36px);margin:0 0 4px}
.cb-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cb-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.club-banner .ch-actions{display:flex;align-items:center;gap:8px;margin-left:auto;position:relative;z-index:2}
.club-banner .cb-more>summary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.club-banner .menu-pop{color:var(--text)}
.club-banner .menu-pop .btn{background:none;color:var(--text);border-color:transparent}
.club-banner .menu-pop .btn:hover{background:var(--panel-2)}
.club-banner .menu-pop .btn.danger{color:var(--danger,#c0392b)}
.club-banner .menu-pop .btn svg{width:14px;height:14px}
.av-stack{display:inline-flex;align-items:center;padding-left:6px}
.av{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:50%;background:var(--c,#4F6272);color:#fff;font-style:normal;font-size:11px;font-weight:800;border:2px solid var(--panel);letter-spacing:.02em}
.club-banner .av{border-color:rgba(0,0,0,.25)}
.av-more{background:var(--panel-2);color:var(--muted)}
.club-banner .av-more{background:rgba(255,255,255,.2);color:#fff}
.club-tabs.tabbar{margin:12px 0 14px}
.club-body>.cs-card,.club-body>.club-cols{margin-bottom:14px}
.club-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;margin-top:0;padding:18px 20px}
.club-next h3{font-size:22px;margin:2px 0 4px}
.club-next .cn-count{display:flex;flex-direction:column;align-items:flex-end;margin:0;text-align:right}
.club-next .cn-count b{font-size:40px;line-height:1;color:var(--club)}
.club-next .cn-wx{grid-column:1/-1}
.club-next.empty-next{display:block}
.cn-who{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cn-wx{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-top:10px;border-top:1px solid var(--line);margin-top:8px}
.wx-day{display:flex;flex-direction:column;gap:1px;min-width:118px;padding:8px 10px;background:var(--panel-2);border-radius:2px}
.wx-day small{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.rb-wrap{overflow-x:auto;margin:0 -4px}
.rb{border-collapse:collapse;width:100%;font-size:14px}
.rb th,.rb td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.rb th[scope=row],.rb tr>th:first-child{text-align:left;white-space:nowrap}
.rb-col{font-size:12px;font-weight:600;color:var(--muted);max-width:110px}
.rb-col span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rb-gear span::before{content:"⚙ ";opacity:.6}
.rb tr.me{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rb-ok svg{width:16px;height:16px;color:var(--ok,#2E8B57)}
.rb-no i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong)}
.rb-na{color:var(--muted)}
.cal-nav{display:inline-flex;align-items:center;gap:6px}
.cal-nav .btn.icon{width:30px;height:30px;padding:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:4px 0 6px}
.cal-h{font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.cal-d{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 7px;border-radius:2px;font-size:13px;font-variant-numeric:tabular-nums}
.cal-d.off{visibility:hidden}
.cal-d.today b{color:var(--accent)}
.cal-d.today{outline:1px solid var(--accent)}
.cal-d.has{background:color-mix(in srgb,var(--club,var(--accent)) 14%,transparent)}
.cal-d i{position:absolute;left:3px;right:3px;bottom:2px;height:3px;border-radius:2px;background:var(--c)}
.club-cal{--club:var(--accent)}
.club-feed.compact{gap:8px}
.club-feed.compact .feed-item{padding:10px 12px}
.feed-item .entry-head{display:flex;align-items:flex-start;gap:4px;margin-bottom:6px}
.feed-go{margin-top:6px}
.club-feed .feed-item{padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
.feed-kinds{margin:0 0 12px}
.feed-beta .flag-card{margin:0}
.entry-body.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0}
.cstars{color:#E8A400;letter-spacing:1px}
.cstars .muted{color:var(--line-strong)}
.club-prompt{border-style:dashed}
.club-invite{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.club-invite input[type=text],.club-invite input[type=email]{width:100%}
.club-cover-prev{height:120px;border-radius:2px;background:var(--cover) center/cover no-repeat,var(--club);margin-bottom:8px}
.club-card{position:relative;overflow:hidden;padding-top:0;border-top:1px solid var(--line)}
.club-card .cc-band{display:block;align-self:stretch;height:56px;margin:0 -16px 6px;background:linear-gradient(120deg,var(--club),color-mix(in srgb,var(--club) 60%,#0b1a22))}
.club-card.has-cover .cc-band{background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)),var(--cover) center/cover no-repeat,var(--club)}
.club-card .cc-top{margin-top:-30px}
.club-card .cc-emblem{border:2px solid var(--panel)}
.cc-chips{display:inline-flex;gap:6px;align-self:flex-end}
.cc-people{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-chip{display:inline-block;padding:1px 7px;margin-right:6px;border-radius:2px;background:color-mix(in srgb,var(--club) 16%,transparent);color:var(--text);font-weight:700;font-size:12px}
.chip.accent{border-color:var(--accent);color:var(--accent)}
.cm-sub .ready{margin-left:4px;vertical-align:middle}
.lb-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
@media (max-width:860px){
  .club-banner{padding:14px 14px;gap:10px}
  .club-banner .cc-emblem.xl{width:44px;height:44px;font-size:16px}
  .club-banner .big{font-size:22px}
  .club-banner .cb-desc{-webkit-line-clamp:1;font-size:14px;margin-bottom:4px}
  .club-banner .ch-actions{margin-left:0;width:100%}
  .club-banner .cb-plan{flex:1}
  .club-next{grid-template-columns:1fr auto;padding:14px}
  .club-next .cn-count b{font-size:30px}
  .club-next h3{font-size:19px}
}
.fn-beta{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}

/* Route view header button: grey until a route view is open; orange when open; filled and pulsing while it runs */
.sim-btn.idle{color:var(--muted)}
.sim-btn.ready{color:var(--accent);border-color:var(--accent)}
/* "World" on a 3D map: the low-poly world fills the map area */
.world-on{position:relative}
.world-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:var(--panel)}
.world-on > .map-tools, .world-on > .map-bottom, .world-on > .rd-tools{z-index:4}

/* Atlas route page: header box (title, rating, overview, actions, section tabs) and the map side by side on a wide screen;
   on a phone the map sits under the header box, then the tab's content */
.rd-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "map" "info";gap:16px;margin-top:6px;align-items:start}
.rd-layout > .rd-hero{grid-area:hero}
.rd-layout > .rd-mapcol{grid-area:map;min-width:0}
.rd-layout > .rd-info{grid-area:info;min-width:0}
.rd-layout .rd-mapcol .rd-card{height:auto}
.rd-hero > .rd-tabs{flex-basis:100%;width:100%;position:static;background:transparent;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.rd-hero{flex-direction:column;align-items:stretch}
.rd-hero .rd-hero-main{width:100%}
.rd-coverwrap{padding:0;overflow:hidden;margin-bottom:12px}
.rd-coverwrap .rd-cover{margin:0;border-radius:0;height:clamp(200px,40vw,420px)}
@media (min-width:1001px){
  .rd-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"hero map" "info map";gap:20px}
  .rd-layout > .rd-mapcol{position:sticky;top:12px;align-self:start}
  .rd-layout .rd-mapwrap{height:clamp(420px,calc(100vh - 240px),900px)}
  .rd-layout .rd-two,.rd-layout .rd-wx{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){ .rd-layout .rd-mapwrap{height:clamp(300px,62vw,460px)} }

/* profile tabs open with the same title and description */
.prof-head{margin-top:0}
.prof-head h3{margin:0 0 4px}
.prof-head p{margin:0}
/* Atlas filters on a phone: everything wraps inside the panel */
.atlas-filter-panel{max-width:100%;box-sizing:border-box}
.atlas-filter-panel > *{min-width:0}
.atlas-filter-panel .filters{flex-wrap:wrap}
.atlas-filter-panel select{max-width:100%}
@media (max-width:720px){ .atlas-filter-panel{grid-template-columns:minmax(0,1fr)} }

/* quest panel: Simulate and Live view in its bottom-right corner */
.main-quest .mq-sim{grid-column:1/-1;justify-content:flex-end;margin-top:10px}
/* Atlas route header in its half of the page: text and buttons stacked, tabs right under the rating */
.rd-layout .rd-hero-main{flex-direction:column;align-items:stretch;gap:12px}
.rd-layout .rd-hero-actions{max-width:none;justify-content:flex-start}
.rd-layout .rd-hero-text{min-width:0}
.rd-hero .rd-tabs{margin:12px 0 0;padding-top:0;border-top:0}
/* Atlas route header: its "more actions" menu opens over the page (not under the map), lined up with its button's left edge */
.rd-layout > .rd-hero{position:relative;z-index:6;overflow:visible}
.rd-layout .rd-hero .menu-pop{left:0;right:auto;z-index:30}

/* the globe has its own styles: Club (low-poly, the default) or Satellite */
.globe-only{display:none}
.map-wrap.is-globe:not(.is-2d) .globe-only{display:inline-flex}
.map-wrap.is-globe .m3d-only{display:none}

/* Atlas route page, one box: the tabs sit directly above their content (and stick to the top while scrolling) */
.rd-layout > .rd-info{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 18px 18px}
.rd-info > .rd-tabs{position:sticky;top:0;z-index:5;background:var(--panel);margin:0 -18px 16px;padding:10px 18px;border-bottom:1px solid var(--line)}
.rd-info .rd-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.rd-info .rd-panel .rd-card + .rd-card, .rd-info .rd-over > .rd-card + .rd-card, .rd-info .rd-wx > .rd-card + .rd-card{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.rd-info .rd-wx, .rd-info .rd-over{display:block}
.rd-info .rd-coverwrap{border-radius:var(--r);overflow:hidden}
@media (min-width:1001px){
  /* the header and the tabs with their content are one box: no gap, no line between the two parts' corners */
  .rd-layout{row-gap:0}
  .rd-layout > .rd-hero{border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding-bottom:6px}
  .rd-layout > .rd-info{border-top:0;border-radius:0 0 var(--r) var(--r)}
}
@media (max-width:720px){ .rd-layout > .rd-info{padding:0 12px 14px} .rd-info > .rd-tabs{margin:0 -12px 14px;padding:8px 12px} }
/* Inventory on a phone: Ready and Still needed are both full width, so their tiles are the same size */
@media (max-width:860px){ .inv-split{align-items:stretch} .inv-split > .group{width:100%} }

/* quest panel: the bottom-right row sits above the progress lines; its "more" menu opens upwards-left */
.main-quest .mq-sim{grid-column:1/-1;justify-content:flex-end;margin:10px 0 2px}
.mq-more{position:relative}
.mq-more .menu-pop{right:0;left:auto}

/* Atlas route page, narrow screens: one box (header, tabs, then the map or the tab's content); the map is a tab */
.rd-tabs [data-rd-tab="map"]{display:none}
@media (max-width:1000px){
  .rd-tabs [data-rd-tab="map"]{display:inline-flex}
  .rd-layout{display:flex;flex-direction:column;gap:0}
  .rd-layout > .rd-info{display:contents}
  .rd-layout > .rd-hero{order:1;border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding-bottom:4px}
  .rd-layout .rd-info > .rd-tabs{order:2;margin:0;padding:8px 12px;border:1px solid var(--line);border-top:0;border-bottom-color:var(--line);background:var(--panel)}
  .rd-layout > .rd-mapcol{order:3;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px}
  .rd-layout:not(.show-map) > .rd-mapcol{display:none}
  .rd-layout.show-map .rd-info > .rd-panel{display:none}
  .rd-layout .rd-info > .rd-panel{order:4;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);padding:14px 12px}
  .rd-layout .rd-info > .rd-panel[hidden]{display:none}
}
@media (max-width:1000px){ .rd-layout.show-map .rd-mapwrap{height:min(68vh,560px)} }
/* Atlas route page: when a tab's content is shorter than the map beside it, the spare height goes below the box, not between the header and the tabs */
@media (min-width:1001px){ .rd-layout{grid-template-rows:auto 1fr} .rd-layout > .rd-hero, .rd-layout > .rd-info{align-self:start} }

/* Atlas route page, narrow screens: header, tabs, the tab's content, then the map, all one box; the tabs scroll sideways inside it */
@media (max-width:1000px){
  .rd-layout:not(.show-map) > .rd-mapcol{display:block}
  .rd-layout > .rd-mapcol{order:5;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
  .rd-layout .rd-info > .rd-panel{border-radius:0;border-bottom:0}
  .rd-layout .rd-info > .rd-tabs{min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .rd-layout .rd-info > .rd-tabs::-webkit-scrollbar{display:none}
  .rd-layout .rd-info > .rd-tabs .btn{flex:none}
  .rd-layout .rd-mapwrap{height:clamp(300px,70vw,460px)}
}
@media (max-width:1000px){
  /* nothing in the box may push it wider than the screen (long route-option names, the tabs) */
  .rd-layout{align-items:stretch}
  .rd-layout > .rd-hero, .rd-layout > .rd-mapcol, .rd-layout .rd-info > *{min-width:0;max-width:100%;box-sizing:border-box}
  .rd-hero .atlas-opts{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .rd-hero .rd-hero-text, .rd-hero .rd-hero-main{min-width:0;max-width:100%}
}
/* main-quest panel: days to go and milestones in the bottom-left, Simulate / Live view in the bottom-right, both just above the progress lines */
.main-quest{grid-template-columns:minmax(0,1fr) auto}
.main-quest > div:first-child{grid-column:1/-1}
.main-quest .mq-right{grid-column:1;justify-self:start;justify-content:flex-start;align-self:end}
.main-quest .mq-sim{grid-column:2;align-self:end;margin:0}
.main-quest .mq-steps{grid-column:1/-1}
@media (max-width:860px){ .main-quest{grid-template-columns:minmax(0,1fr) auto} .main-quest .mq-right{gap:12px} }
/* quest panel: the readiness score and the "more" menu together in the top-right corner */
.mq-ready{display:flex;align-items:center;gap:8px}
.mq-ready .mq-more .menu-pop{right:0;left:auto}
/* quest panel: the title wraps clear of the readiness score and menu, with some space above days to go / milestones */
.main-quest > div:first-child{padding-right:210px;margin-bottom:12px}
.main-quest h2{overflow-wrap:anywhere}
@media (max-width:860px){ .main-quest > div:first-child{padding-right:150px} }
@media (max-width:860px){ .main-quest > div:first-child{padding-right:190px} }

/* Atlas route page: the header's overview copy is for narrow screens; wide screens use the Overview tab */
.rd-ov-m{display:none}
@media (max-width:1000px){
  .rd-ov-m{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .rd-tabs [data-rd-tab="overview"], .rd-info > .rd-panel[data-rd-panel="overview"]{display:none!important}
  /* header (with the overview), then the map, then the tabs and their content: one box */
  .rd-layout > .rd-mapcol{order:2;border-top:0;border-radius:0}
  .rd-layout .rd-info > .rd-tabs{order:3;border-top:1px solid var(--line)}
  .rd-layout .rd-info > .rd-panel{order:4;border-radius:0 0 var(--r) var(--r);border-bottom:1px solid var(--line)}
}

/* the note under the header play button when there's no route view yet */
.sim-tip{position:fixed;z-index:1200;background:var(--text);color:var(--bg);padding:9px 12px;border-radius:var(--r,6px);font-size:13px;font-weight:600;line-height:1.35;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sim-tip::before{content:"";position:absolute;top:-6px;left:calc(var(--arrow,50%) - 6px);border:6px solid transparent;border-top:0;border-bottom-color:var(--text)}
.sim-tip[hidden]{display:none}

/* Atlas route page: Add to my quests, with its two choices */
.add-menu{position:relative;display:inline-block}
.add-menu > summary{list-style:none}
.add-menu > summary::-webkit-details-marker{display:none}
.add-menu .add-pop{left:0;right:auto;min-width:250px}
.add-pop .btn > span{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
.add-pop .btn{padding:8px 10px}
/* Atlas overview: links at the foot; a long description folds on phones, with a fade */
.rd-ov-links .links{margin:0}
.rd-more{display:none}
@media (max-width:1000px){
  .rd-ov-m .rd-desc.long:not(.open){max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%, transparent);mask-image:linear-gradient(#000 55%, transparent)}
  .rd-ov-m .rd-more{display:inline-block;margin:6px 0 0;font-weight:650}
}
.rd-desc > p{margin:0 0 8px}
.rd-desc > p:last-child{margin-bottom:0}
/* a small dialog that asks for text or a password */
dialog.ask{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--text);padding:18px 20px;width:min(460px, calc(100vw - 32px));box-shadow:var(--shadow-pop)}
dialog.ask::backdrop{background:rgba(0,0,0,.45)}
dialog.ask h3{margin:0 0 6px}
dialog.ask textarea, dialog.ask input{width:100%;box-sizing:border-box}
dialog.ask .ask-err{color:var(--danger, #c0392b);margin:8px 0 0}
/* admin: tabs, dev mode, requests */
.adm-tabs{margin:14px 0}
.adm-pane[hidden]{display:none}
.adm-pane-actions{margin-bottom:12px}
.adm-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:750;margin-left:4px}
.adm-dev{max-width:640px}
.adm-devchip{align-self:center}
.adm-reqs{list-style:none;margin:0;padding:0}
.adm-req{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.adm-req:first-child{border-top:0}
.adm-req p{margin:4px 0 0}
.adm-past{margin-top:10px}
@media (max-width:640px){ .adm-req{flex-direction:column} }
/* support requests (Options > Support and the admin Support tab) */
.support-form{margin:10px 0 0}
.support-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px}
.support-row select, .support-row input, .support-form textarea{width:100%;box-sizing:border-box}
@media (max-width:560px){ .support-row{grid-template-columns:1fr} }
.sp-filters{flex-wrap:wrap;margin:4px 0 12px}
.sp-list{list-style:none;margin:0;padding:0}
.sp-item{border:1px solid var(--line);border-radius:var(--r);margin:0 0 8px;background:var(--panel)}
.sp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;background:none;border:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.sp-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-title b{overflow-wrap:anywhere}
.sp-head .chip{flex:none}
.sp-thread{padding:0 12px 12px;border-top:1px solid var(--line)}
.sp-ctx{margin:10px 0 0;overflow-wrap:anywhere}
.sp-msg{margin:10px 0 0;padding:8px 10px;border-radius:var(--r);background:var(--panel-2)}
.sp-msg.staff{border-left:3px solid var(--accent)}
.sp-msg p{margin:4px 0 0;overflow-wrap:anywhere}
.sp-reply{margin-top:10px}
.sp-reply textarea{width:100%;box-sizing:border-box}
/* the globe: the 3D map's imagery credit only with the satellite globe */
.map-wrap.is-globe:not(.globe-sat):not(.is-2d) .sat-credit{display:none}

/* sign in / sign up switch */
.login-switch{ display:flex; margin:0 0 14px; }
.login-switch .btn{ flex:1; justify-content:center; }
/* onboarding */
.onboard{ position:fixed; inset:0; z-index:1100; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(3px); display:grid; place-items:center; padding:16px; overflow:auto; }
.onboard[hidden]{ display:none; }
.ob-card{ width:min(520px, 100%); background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-pop); padding:22px 22px 18px; }
.ob-card .big{ margin:6px 0 4px; }
.ob-card .two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ob-card input, .ob-card select{ width:100%; box-sizing:border-box; }
@media (max-width:520px){ .ob-card .two{ grid-template-columns:1fr; } }
.ob-steps{ display:flex; gap:6px; }
.ob-steps i{ flex:1; height:4px; border-radius:2px; background:var(--line); }
.ob-steps i.on{ background:var(--accent); } .ob-steps i.done{ background:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ob-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:1050; width:min(640px, calc(100vw - 24px)); display:flex; gap:12px; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-pop); padding:10px 12px; }
.ob-bar > div:first-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
@media (max-width:860px){ .ob-bar{ bottom:calc(72px + env(safe-area-inset-bottom, 0px)); flex-wrap:wrap; } }
/* the guided tour */
.tour-ring{ position:fixed; z-index:1190; border:2px solid var(--accent); border-radius:var(--r); box-shadow:0 0 0 9999px rgba(0,0,0,.35); pointer-events:none; transition:all .2s; }
.tour-tip{ position:fixed; z-index:1200; background:var(--panel); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-pop); padding:12px 14px; }
.tour-tip h3{ margin:2px 0 4px; } .tour-tip p{ margin:0 0 10px; font-size:14px; line-height:1.45; }
.tour-tip[hidden], .tour-ring[hidden]{ display:none; }
.tour-tip::before{ content:""; position:absolute; left:calc(var(--arrow, 50%) - 7px); width:0; height:0; border:7px solid transparent; }
.tour-tip[data-place="below"]::before{ top:-14px; border-bottom-color:var(--line-strong); }
.tour-tip[data-place="above"]::before{ bottom:-14px; border-top-color:var(--line-strong); }
.tour-tip[data-place="over"]::before{ display:none; }
.tour-tip .tour-end{ margin-left:auto; }
.u-mb10{ margin-bottom:10px; }
/* Atlas route page on a phone: three separate boxes (header with the overview, map, tabs with their content), with space between */
@media (max-width:1000px){
  .rd-layout > .rd-hero{border:1px solid var(--line);border-radius:var(--r);padding-bottom:14px}
  .rd-layout > .rd-mapcol{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .rd-layout .rd-info > .rd-tabs{margin-top:12px;border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
  .rd-layout .rd-info > .rd-panel{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r)}
  .rd-layout .rd-hero-main > .rd-ov-m{margin-top:4px}
}
/* Atlas route page: the "Unverified route" warning is a chip; its note pops up on hover, focus or tap */
.rd-unver{position:relative;display:inline-block}
.unver-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:inherit}
.unver-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(320px,calc(100vw - 48px));padding:10px 12px;border:1px solid var(--warn, #b7791f);border-left-width:4px;border-radius:var(--r, 8px);background:var(--panel);color:var(--text);box-shadow:var(--shadow-pop);font-size:13.5px;line-height:1.45;font-weight:400;display:none}
.unver-pop::before{content:"";position:absolute;top:-7px;left:14px;border:7px solid transparent;border-top:0;border-bottom-color:var(--warn, #b7791f)}
.rd-unver:hover .unver-pop,.rd-unver:focus-within .unver-pop,.rd-unver.open .unver-pop{display:block}
@media (hover:none){ .rd-unver:hover:not(.open):not(:focus-within) .unver-pop{display:none} }

/* Atlas: where a route came from, and members validating it */
.chip.osm{ background:color-mix(in srgb, #7ebc6f 18%, transparent); border-color:#7ebc6f; color:var(--text); }
.rd-validate{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--line); }
.rd-validate > div:first-child{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 220px; }
.rd-vbtns{ display:flex; gap:8px; }
.rd-vbtns .btn.on{ background:var(--ok, #2e7d32); border-color:var(--ok, #2e7d32); color:#fff; }
.rd-vbtns .btn.on.bad{ background:var(--danger, #c0392b); border-color:var(--danger, #c0392b); }
.rd-vbtns .btn.on .muted{ color:inherit; opacity:.8; }

/* quest downloads: the header icon and the checklist */
.dl-btn{position:relative;width:38px;height:38px;padding:0;display:inline-grid;place-items:center}
.dl-btn.saved{color:var(--ok, #2e7d32);border-color:var(--ok, #2e7d32)}
.dl-btn .dl-ok{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--ok, #2e7d32);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:800}
.dl-ring{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0);-webkit-mask:radial-gradient(circle, transparent 5px, #000 6px);mask:radial-gradient(circle, transparent 5px, #000 6px)}
.dl-dialog .dl-presets{margin:6px 0 10px}
.dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dl-list li{padding:9px 0;border-bottom:1px solid var(--line)}
.dl-list .check{display:flex;gap:10px;align-items:flex-start;margin:0}
.dl-list .check > span{display:flex;flex-direction:column;gap:1px}
.dl-total{margin:10px 0 0}
dialog.ask input[type=checkbox], dialog.ask input[type=radio]{width:auto;flex:none;margin-top:3px}
.dl-list .check{justify-content:flex-start;text-align:left}
.mq-sim .dl-btn{height:auto;align-self:stretch;min-height:36px}
.dl-btn svg{width:20px;height:20px}

.sp-attach{margin:10px 0 0;flex-wrap:wrap}
/* report and block (safety.js): the report dialog's reasons, the Report link, a report in the admin inbox, blocked people */
.rp-reasons{border:0;margin:4px 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.rp-reasons .check{align-items:flex-start}
.rp-reasons legend.field{display:block;padding:0;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 6px}
.rp-btn{margin-left:auto;color:var(--muted)}
.feed-go:has(.rp-btn){display:flex;gap:12px;align-items:center}
.review .rp-btn{display:inline-block;margin-top:4px}
.sp-report{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2)}
.sp-excerpt{margin:8px 0;padding:6px 10px;border-left:3px solid var(--line-strong);white-space:normal;overflow-wrap:anywhere}
.sp-rep{vertical-align:middle}
.blk-list{margin-top:6px}
.blk-note p{margin:0 0 10px}
dialog.ask input[type=file]{width:100%;font:inherit;padding:6px 0}

/* a question with a few buttons */
.ask-opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ask-opts .btn{justify-content:flex-start;text-align:left;padding:10px 14px;flex-direction:column;align-items:flex-start;gap:2px}
.ask-opts .btn small{font-weight:400;opacity:.8}
/* the recording bar: everywhere, over the route view too */
.rec-global{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:650;width:min(560px,calc(100vw - 24px));display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px 8px 14px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-pop);font-size:14px}
.rec-global .rec-actions{display:flex;gap:6px;flex:none}
@media (max-width:860px){ .rec-global{bottom:calc(72px + env(safe-area-inset-bottom,0px))} }
body.sim-open .rec-global{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body.sim-open.rec-in-sim .rec-global{display:none}   /* the live 3D view shows it in its bottom card (Sim.tellRec) */
/* the header record button */
.sim-btn.rec-btn{color:var(--danger, #c0392b)}
.sim-btn.rec-btn.running{background:var(--danger, #c0392b);border-color:var(--danger, #c0392b);color:#fff;animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}50%{box-shadow:0 0 0 6px rgba(192,57,43,0)}}
.sim-btn.rec-btn svg{width:14px;height:14px}
/* people on a quest */
.q-club{margin:10px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.people li{display:flex;align-items:center;gap:8px}
/* recordings */
.rec-list{list-style:none;margin:0;padding:0}
.rec-item{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.rec-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 240px}

/* ---------- Phase C: readiness, first run, didn't sync ---------- */
.ready.none{--rc:var(--muted)}
.ready.big{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;max-width:240px;white-space:normal}
.ready.big .ready-why{flex-basis:100%;text-align:right;font-size:11px;font-weight:500;color:var(--muted);line-height:1.3;margin-top:1px}
.ready-sum b{font-weight:650;color:var(--text)}
.first-run{border:1px solid var(--line-strong);border-radius:2px;padding:22px;max-width:520px;margin:18px auto;background:var(--panel,transparent)}
.first-run h3{margin:4px 0 6px;font-size:22px}
.first-run p{margin:0 0 14px;color:var(--muted);font-size:14px}
.failed-list{margin-top:14px}
.failed-list h4{margin:0 0 2px}
.failed-list ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.failed-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px;font-size:14px}
.failed-list .d-actions{margin:0}
@media (max-width:860px){ .mq-ready .ready.big{max-width:120px} .mq-ready .ready-why{display:none} }
@media (min-width:861px){ .mq-ready .ready.big{max-width:180px} .main-quest>div:first-child{padding-right:250px} }

/* ---------- Atlas route page: the tag row under the title ---------- */
.rd-locline{line-height:24px}.rd-locline>.chip,.rd-locline>.rd-unver{margin-right:8px!important;vertical-align:middle}
.rd-locline .chip,.rd-locline .unver-btn{box-sizing:border-box;height:24px;display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1;padding:0 8px;margin:0;vertical-align:middle}
.rd-locline .rd-unver{margin:0;padding:0;border:0;background:none;font-size:inherit;line-height:1;display:inline-flex}
.rd-locline .chip.osm + .unver-pop{border-color:#7ebc6f}
.rd-locline .chip.osm + .unver-pop::before{border-bottom-color:#7ebc6f}
.rd-desc-links{margin:10px 0 0;padding-left:18px;font-size:14px}
.rd-desc-links{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.unver-pop::before{left:var(--arrow,14px)}

/* ---------- readiness pop-up, quest panel tabs, download list, collections ---------- */
.rd-unver{margin:0;padding:0;border:0;background:none;font-size:inherit}
button.ready{font:inherit;background:transparent;cursor:pointer;color:var(--rc)}
.ready.big{max-width:none;white-space:nowrap;flex-wrap:nowrap}
.ready-wrap .unver-pop{left:auto;right:0;border-color:var(--line-strong);border-left-width:4px;font-weight:500}
.ready-wrap .unver-pop::before{left:auto;right:14px;border-bottom-color:var(--line-strong)}
.ready-wrap:has(.ready.green) .unver-pop{border-left-color:var(--r-green)}
.ready-wrap:has(.ready.yellow) .unver-pop{border-left-color:var(--r-yellow)}
.ready-wrap:has(.ready.red) .unver-pop{border-left-color:var(--r-red)}
.qd-tabs{margin:12px 0 14px}
.qd-pane[hidden]{display:none}
.dl-list.checklist li{align-items:flex-start;padding:5px 0}
.dl-list.checklist li.out{opacity:.5}
.dl-list.checklist .mk{margin-top:2px}
.fav-btn.on{color:var(--accent);border-color:var(--accent)}
.coll-pick{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.coll-sec{margin-top:28px}
.coll{margin:14px 0 18px}
.coll-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.coll-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--r,2px);padding:8px 10px}
.coll-open{font:inherit;background:none;border:0;color:var(--text);text-align:left;cursor:pointer;display:grid;gap:2px;padding:0;min-width:0}
.coll-open b{font-weight:650}
@media (max-width:860px){ .main-quest>div:first-child{padding-right:170px} .mq-ready{gap:6px} }

/* Simulate and Start: a symbol each, the same width */
.btn.sim-pair{min-width:120px;justify-content:center;gap:7px}
.btn.sim-pair svg{flex:none}
/* the header play button while a hike is on (Start): green pulse */
.sim-btn.running.live{background:var(--r-green);border-color:var(--r-green);color:#fff}
.sim-btn.running.live::after{border-color:var(--r-green)}

/* language picker (onboarding, Options) */
.lang-pick{margin:0 0 14px;flex-wrap:wrap}
.lang-codes .btn{min-width:0;padding-inline:8px;letter-spacing:.06em}
.ob-card .lang-pick{justify-content:flex-end;margin:10px 0 12px}

/* onboarding stands on its own: nothing of the app shows behind it */
.onboard{background:var(--bg);backdrop-filter:none;align-content:start;padding-top:max(16px, env(safe-area-inset-top, 0px))}
.ob-char{width:min(820px,100%)}
.ob-stage{height:min(42vh,380px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:12px 0 8px;background:var(--panel-2)}
.ob-stage .char-stage{height:100%;min-height:0}
.ob-stage .char-hud{display:none}
.ob-cust .char-panel{border:0;padding:4px 0 0;background:transparent;max-height:none;overflow:visible}
.ob-cust .char-panel>*{max-width:none}
.ob-cust .prof-tabs,.ob-cust .prof-head{display:none}
@media (max-width:860px){ .onboard{padding:12px} .ob-stage{height:40vh} }

/* onboarding on phones: the card never grows past the screen, its contents shrink to fit */
.onboard{grid-template-columns:minmax(0,1fr)}
.ob-card{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.ob-card *{min-width:0}
.ob-cust select,.ob-cust input[type=range],.ob-cust .swatches{max-width:100%}
.ob-cust .char-panel{overflow-x:hidden}
.ob-card .check{align-items:flex-start}
.ob-card .check>span{flex:1 1 auto;min-width:0}

body.guest .login.standalone{z-index:1100;padding-top:calc(env(safe-area-inset-top,0px) + 24px)}

body.ob-standalone header,body.ob-standalone nav.tabs,body.ob-standalone #app{display:none}
body.ob-standalone .login{z-index:1100;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 24px)}
/* the terms checkbox sits beside its sentence (the card's inputs are full width, the checkbox must not be) */
.ob-card .check input[type=checkbox],.login-box .check input[type=checkbox]{width:auto;flex:none;margin:3px 8px 0 0}
.ob-card .check{display:flex;gap:0}
/* a card taller than the screen starts at the top and scrolls (centering would hide its top) */
.onboard{place-items:start center;align-content:start}
.ob-card{margin:0 auto}

/* onboarding shows the customize menu too (since beans: the first beans can buy gear, emotes or a scene) */

/* the guided tour: nothing scrolls under it; its note and ring sit above the 3D view's overlay */
body.touring .scroll,body.touring main,body.touring #atlasList,body.touring #optionsPanel,body.touring .onboard{overflow:hidden!important}
body.touring{overscroll-behavior:none}
.tour-tip,.tour-ring{z-index:1300}

.fav-menu{position:relative}
.fav-menu .menu-pop{right:0;left:auto}
.fav-menu > summary{list-style:none}
.fav-menu > summary::-webkit-details-marker{display:none}

/* quest panel actions: Complete, Show on map, then a ··· menu */
.qa-row{align-items:center}
.qa-more{position:relative;margin-left:auto}
.qa-more .menu-pop{right:0;left:auto}
.people-dialog .ask-f{max-width:560px}
.people-dialog .q-sec{border:0;padding:0;margin:0}

.rd-tripline{margin:8px 0 4px}
.rd-tripline .chip{height:24px;display:inline-flex;align-items:center;font-size:12px;padding:0 8px}
.rd-tripline .seg .btn{height:26px;min-height:0;padding:0 10px;font-size:12px}

/* member collections as boxes, with a ··· menu on the box (not on Favorites) */
.coll-row{margin:12px 0 6px}
.col-wrap{position:relative}
.col-wrap .col-card{width:100%;display:block}
.col-wrap.coll-open .col-card{outline:2px solid var(--accent);outline-offset:2px}
.col-menu{position:absolute;top:6px;right:6px}
.col-menu > summary.btn.icon{background:rgba(0,0,0,.4);color:#fff;border-color:transparent;width:30px;height:30px;padding:0}
.col-menu .menu-pop{right:0;left:auto}

/* the empty "+" boxes: same size as their neighbours, dashed */
.add-card{border:1.5px dashed var(--line-strong)!important;background:transparent!important;color:var(--muted);display:flex!important;flex-direction:column;align-items:center!important;justify-content:center;gap:6px;cursor:pointer;font-weight:600;font-size:14px}
.add-card:hover,.add-card:focus-visible{color:var(--accent);border-color:var(--accent)!important}
.col-card.add-card{height:150px;width:100%}

/* a single trip type still reads as the selected segment */
.trip-seg .btn{cursor:default;border-radius:2px!important;margin-left:0!important}

/* the quest panel actions sit under a divider */
#qActions.qa-row{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}

/* the map's quest panel in tabs */
.mp-tabs{margin:6px 0 14px;flex-wrap:wrap}
.mp-tabs .btn{white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.mp-pane[hidden]{display:none}

/* journal: one view at a time, full width */
#view-journal.j-single{grid-template-columns:minmax(0,1fr)}
#view-journal.j-single #journalSide{display:none}
.page-bar .pb-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* quests home: the Quests | Collections toggle in place of the heading */
.qh-head .inv-views{margin:0 0 6px}
.coll-sec.bare{margin-top:6px}
/* atlas route page: ··· in the header's top-right corner */
.rd-hero{position:relative}
.rd-hero-more{position:absolute;top:12px;right:12px;z-index:5}
.rd-hero-more:empty{display:none}
.rd-hero-more .menu-pop{right:0;left:auto}
.rd-hero:has(.rd-hero-more:not(:empty)) .rd-hero-text{padding-right:40px}
/* journal on phones: the toggle on its own row, the quest and person pickers on the row below */
@media (max-width:860px){
  #journalList .page-bar{flex-wrap:wrap!important}
  #journalList .page-bar .pb-left{flex:1 1 100%!important;max-width:none!important}
  #journalList .page-bar .pb-right{flex:1 1 100%;max-width:none;margin-left:0;justify-content:flex-start}
  #journalList .page-bar .pb-right .dd{flex:1 1 0;min-width:0}
  #journalList .page-bar .pb-right .dd-btn{width:100%;min-width:0}
}

/* map panel: back to the route, then the stop's name */
.mp-back{display:block;margin:0 0 6px;font-size:13px;color:var(--muted)}
.mp-title{margin:0 0 6px}
.mp-tabs{flex-wrap:nowrap;gap:2px}
.mp-tabs .btn{padding-left:9px;padding-right:9px;font-size:13.5px}

/* map panel: room between "← area" and the stop name; the panes under the tabs carry no second line */
.mp-back{margin:0 0 12px}
.mp-pane.stop-detail,.mp-pane.tracks{margin-top:0;padding-top:0;border-top:0}
/* phones: collections listed one per row like the quests, the same size as a quest card */
@media (max-width:860px){
  .coll-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;overflow:visible}
  .coll-row .col-card,.coll-row .col-card.add-card{height:auto;min-height:168px}
  #questList .q-card{min-height:168px}
}
/* reviews, beta and journal text: long words and links wrap instead of running past the box */
.review,.review p,.review-form,.beta-card,.fnote,.entry,.rd-desc{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.review-form textarea,.review-form input,.review-form select{max-width:100%;box-sizing:border-box}

/* Atlas photos: a plain grid of pictures; the pop-up over the blurred app */
button.rp{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:6px;overflow:hidden}
.rv-pics{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rv-pics:empty{display:none}
button.rv-thumb{width:64px;height:64px;padding:0;cursor:zoom-in;background:var(--panel-2)}
.lightbox{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox[hidden]{display:none}
.lb-box{position:relative;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lb-box img{display:block;max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;background:#000}
.lb-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-70%);width:40px;height:56px;border:0;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--muted)}
body.lb-open{overflow:hidden}

/* a collection's own page */
.coll-page .mp-back{margin:2px 0 10px}
.cp-head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;position:relative}
.cp-head h2{margin:0}
.cp-head .cp-menu{position:static;margin-left:auto}
.cp-head .cp-menu > summary.btn.icon{background:transparent;color:var(--text);border-color:var(--line-strong)}
.cp-item{position:relative}
.cp-item > .q-card{width:100%;height:100%}
.cp-rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.cp-rm:hover{color:var(--accent);border-color:var(--accent)}

/* quest builder: the legs list on the Main quest tab, its "+" box and the Add a leg dialog */
.legs-sec{margin-bottom:14px}
.leg-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.leg{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.leg-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--muted)}
.leg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.leg-t{font-weight:600;text-align:left;overflow-wrap:anywhere}
.leg-del{flex:none;font-size:18px;line-height:1}
.leg-add{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.leg-add:hover,.leg-add:focus-visible{color:var(--accent);border-color:var(--accent)}
.leg-ask{width:min(520px,calc(100vw - 32px))}
.leg-ask input[type=search]{width:100%;margin:4px 0 8px}
.leg-results{list-style:none;margin:0;padding:0;max-height:min(52vh,420px);overflow:auto;display:flex;flex-direction:column;gap:4px}
.leg-hit{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.leg-hit:hover,.leg-hit:focus-visible{border-color:var(--accent)}

/* quest lists: legs as blocks of subquests, grips to drag, "+" between rows (on hover; faint on touch screens) */
.qh-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.units{display:flex;flex-direction:column}
.srt{display:flex;align-items:stretch;gap:2px;min-width:0}
.srt>:not(.grip){flex:1;min-width:0}
.grip{flex:none;display:flex;align-items:center;justify-content:center;width:22px;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.grip:hover{color:var(--accent)}
.list-drag,.list-drag *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.list-drag .ins{visibility:hidden}
.dragging{opacity:.75;outline:2px dashed var(--accent);outline-offset:-2px;border-radius:var(--r);background:var(--panel)}
.leg-block{border:1px solid var(--line);border-radius:var(--r);margin:4px 0;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.leg-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 4px;border-bottom:1px solid var(--line)}
.leg-head .leg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.leg-lock svg{width:16px;height:16px}
.leg-lock[aria-pressed=false]{color:var(--accent)}
.leg-block .unit-subs{padding:0 6px 0 2px}
.leg-block.locked .unit-subs{padding-left:24px}
.ins{position:relative;display:block;width:100%;height:12px;margin:-6px 0;padding:0;border:0;background:transparent;cursor:pointer;z-index:2;opacity:0;transition:opacity .12s}
.ins::before{content:"";position:absolute;left:24px;right:0;top:50%;border-top:2px solid var(--accent)}
.ins span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;line-height:20px}
.ins:hover,.ins:focus-visible{opacity:1}
@media (hover:none){.ins{opacity:.35;height:18px;margin:-9px 0}.ins::before{border-top-style:dashed}}
.units+.leg-add,.empty+.leg-add{margin-top:8px}
.leg-hit-row{display:flex;gap:6px;align-items:stretch}
.leg-hit-row .leg-hit{flex:1;min-width:0}
.leg-rev{flex:none;font-size:12px;white-space:nowrap}
.leg-opt{padding-left:18px}
.leg-why{color:var(--accent)}
.leg-res-h{margin:2px 0 6px}
/* toasts never block a tap on what's under them (their own buttons still work); grips are finger-sized */
.toast{pointer-events:none}
.toast button{pointer-events:auto}
.grip{align-self:stretch;min-height:32px}
@media (hover:none){.grip{width:28px}}

/* transfer legs: an icon before the title, a quieter row; the transfer dialog */
.tr-ico{vertical-align:-2px;margin-right:6px;color:var(--accent)}
.tr-row .t{font-weight:500}
.tr-ask{width:min(480px,calc(100vw - 32px))}
.tr-ask select,.tr-ask input:not([type=checkbox]),.tr-ask textarea{width:100%}
.tr-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-two [hidden]{display:none}
@media (max-width:420px){.tr-two{grid-template-columns:1fr}}

/* GPX leg dialog: the matching Atlas route and what to bring in from it */
.gx-ask{width:min(520px,calc(100vw - 32px))}
.gx-ask input:not([type=checkbox]):not([type=radio]){width:100%}
.gx-match{border:1px solid var(--accent);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gx-opts{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
@media (max-width:420px){.gx-opts{grid-template-columns:1fr}}

/* a gap between two legs that don't meet, and the chains of Atlas routes that could fill it */
.gap-chip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:4px 0 4px 24px;padding:6px 10px;border:1.5px dashed var(--warn);border-radius:var(--r);color:var(--warn)}
.gap-chip .btn{font-size:13px}
.chain-ask{width:min(560px,calc(100vw - 32px))}
.chain-opt{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.chain-opt ol{margin:0;padding-left:20px}
.chain-opt .btn{align-self:flex-start}
.tr-auto{font-size:11px;padding:1px 6px;vertical-align:1px}
.leg-same{font-size:12px;padding:4px 8px;white-space:nowrap}

/* quest home: the plus sits in the top-right corner of the Quests | Collections line */
.qh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qh-plus{flex:none;width:38px;height:38px;padding:0;display:grid;place-items:center}
/* the quest's tab line ends with the pencil (edit mode: add and rearrange) */
.quest-tabs .q-edit{margin-left:auto;width:36px;height:36px;padding:0;display:grid;place-items:center;align-self:center}
.quest-tabs .q-edit[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* Atlas front page placeholders while routes load: same shapes as the cards */
.atlas-card.skel{pointer-events:none;cursor:default}
.skel .sk{display:block;background:var(--panel-2);border-radius:4px;animation:skpulse 1.4s ease-in-out infinite}
.skel .ac-media.sk{border-radius:0;min-height:120px}
.skel.feat-big .ac-media.sk{min-height:260px}
.skel .sk-chip{width:70px;height:18px}
.skel .sk-line{height:14px;margin:8px 12px 0;width:70%}
.skel .sk-line.short{width:40%;margin-bottom:12px}
@keyframes skpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel .sk{animation:none}}
.qh-head{flex-wrap:nowrap}

/* Atlas route header: the cover photo behind the title, fading to black over its lower half; the text sits on the photo */
.rd-hero-top{display:contents}
.rd-ov-m{width:100%}
/* white only for the words on the photo (place, title, route option, rating); buttons and chips keep their colours */
/* the popup menus open on a plain panel, not on the photo */

/* the date in a subquest's or prerequisite's panel */
.qd-date{margin:4px 0 12px}
.qd-date-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qd-date-row input[type=date]{width:auto;min-width:170px}

.qd-date-row input[type=time]{width:auto;min-width:120px}
.q-time{font-size:11px;padding:1px 6px;vertical-align:1px}

/* prerequisites: the due date in its own column, like a subquest's date */
.q-row.due-row{grid-template-columns:22px 62px 1fr auto}
.date.due em{display:block;font-style:normal;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-stretch:100%;margin-bottom:1px}
.date.due.none{color:var(--muted)}
.date.due.over,.date.due.over small,.date.due.over em{color:#c2410c}
@media (max-width:520px){.quest-tabs.tabbar{gap:0}.quest-tabs .btn[role=tab]{padding-left:7px;padding-right:7px;font-size:13px}.quest-tabs .q-edit{width:32px;height:32px;flex:none}}
.quest-tabs .q-edit{position:sticky;right:0;z-index:1;box-shadow:-8px 0 8px var(--bg)}

/* The photo header has exactly the plain header's size and spacing: the photo is fitted to the box, not the other way round */
.rd-hero:has(.rd-hero-more:not(:empty)) .rd-hero-text{padding-right:58px}

/* avatar menu pickers: a picture of each item */
.pick-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pick{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;padding:6px 4px 5px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--text)}
.pick.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pick.off{opacity:.45}
.pick:disabled{cursor:default}
.pick-img{width:56px;height:56px;border-radius:6px;background:var(--panel-2) center/contain no-repeat;display:grid;place-items:center;color:var(--muted);font-style:normal;font-size:22px}
.pick-label{font-size:11px;line-height:1.15;text-align:center;overflow-wrap:anywhere}
.acc-color{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.acc-color .swatches{margin-top:0}

/* GORPbot gear tiles: a small cog on a worn piece opens its colour picker */
.pick-wrap{position:relative;display:inline-flex}
.pick-cog{position:absolute;top:-6px;right:-6px;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pick-cog svg{width:14px;height:14px}
.pick-cog:hover{background:var(--panel-2)}
.colorpop{position:absolute;z-index:5;left:0;top:calc(100% + 6px);min-width:240px;max-width:min(320px, 92vw);padding:10px 12px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.colorpop .swatches{margin-top:6px}
.colorpop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.colorpop-custom{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}
.colorpop-custom input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line-strong);border-radius:2px;background:none}
.gear-groups h5{margin:12px 0 2px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* profile card: the member ID sits with the name and handle */
.pc-id{display:block;margin-top:4px}
.pc-id b{font-stretch:75%;font-weight:750;font-size:18px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--text);margin:0 4px}
.pc-id .btn{padding:2px 8px;font-size:12px;vertical-align:middle}

/* a GORP CORP field-kit piece: a small tag on its tile */
.pick-tag{position:absolute;left:4px;top:4px;padding:1px 4px;border-radius:2px;background:var(--text);color:var(--panel);font-size:9px;font-weight:700;letter-spacing:.06em;pointer-events:none}

/* the colour button on a worn gear tile: a little colour wheel */
.pick-cog .wheel{width:15px;height:15px;border-radius:50%;background:conic-gradient(#e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);box-shadow:inset 0 0 0 3px var(--panel)}

/* Clubs page: the Friends / Clubs toggle and friend rows */
.clubs-top{display:flex;margin-bottom:10px}
.fr-face{display:inline-block;width:32px;height:32px;border-radius:50%;background:var(--panel-2) center/cover no-repeat;flex:0 0 auto;margin-right:2px;vertical-align:middle}
.fr-row .cm-who{display:flex;align-items:center;gap:8px}
.fr-more .menu-pop{min-width:180px}

/* someone else's profile: friend and invite buttons under their name */
.fr-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;pointer-events:auto}

/* GORPbot collectibles not found yet: greyed tile with a lock */
.pick-wrap.locked .pick-img{filter:grayscale(1) brightness(.6);opacity:.55}
.pick-lock{position:absolute;top:4px;right:6px;font-size:12px;pointer-events:none}
.emote-picks .btn.locked{opacity:.55}

/* keep the Friends / Clubs toggle on one row (club page buttons are otherwise block-level) */
.club-page .club-side{display:inline-flex;flex-direction:row;margin:0}
.club-page .club-side .btn{width:auto;display:inline-flex;align-items:center;gap:6px}
.fr-actions .btn{min-height:0;padding:6px 10px;font-size:13px}

/* Friends / Clubs: one joined control, like Inventory / For this quest */
.club-page .club-side{gap:0}
.club-page .club-side .btn{margin:0;border-radius:0}
.club-page .club-side .btn:first-child{border-radius:2px 0 0 2px}
.club-page .club-side .btn + .btn{margin-left:-1px;border-radius:0 2px 2px 0}
/* customize tiles: a lock on items not unlocked, a 1/2/3 on picked emotes, greyed when not pickable */
.pick-lock{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);display:grid;place-items:center;font-size:0;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pick-lock svg{width:12px;height:12px}
.pick-num{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pick-wrap.dim .pick-img{filter:grayscale(1) brightness(.75);opacity:.5}
.pick-wrap.dim .pick-label{opacity:.6}

/* presets: picture tiles of saved looks, a small x in the corner deletes */
.preset-img{background-size:contain}
.pick-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);font-size:15px;line-height:1;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pick-x:hover{background:var(--panel-2)}

/* notifications: a red count on the profile button, the list on the profile */
[data-openprofile]{position:relative}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d92d20;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.notif-count{display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#d92d20;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.notif-list{list-style:none;margin:0;padding:0}
.notif{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.notif.new{background:color-mix(in srgb, var(--accent) 6%, transparent)}
.notif-ico{font-size:20px;flex:0 0 auto}
.notif-text{flex:1;min-width:0}
/* Scene picker: landscape picture tiles, the studio as its plain backdrop */
.pick-img.scene-img{width:64px;height:48px;background-size:cover}
.pick-img.scene-studio{background:linear-gradient(180deg, #eef2f4, #cfd8de)}

/* ========== Colour palettes ==========
   The base tokens above are the fallback before a palette is set. Clay (teal and clay, from the cup icon; it was called Olla), Rosa (Mexican pink and turquoise) and Summit
   (indigo and peach) each set light and dark values; Auto / Light / Dark pick between them as before. They also turn on
   the cel-shaded components: ink outlines and hard offset shadows on what you can act on. */
:root[data-palette="clay"]:not([data-theme="dark"]):not([data-theme="blackout"]){--bg:#F3ECDF;--panel:#FBF7EF;--panel-2:#E9DFCD;--line:rgba(29,23,20,.16);--line-strong:rgba(29,23,20,.42);--text:#1D1714;--muted:#5E5248;--accent:#1E5F5B;--accent-ink:#FFFFFF;--warn:#A8461F;--r-green:#3D7A2A;--ink:#1D1714;--ink-line:#1D1714;--hl:#E8B04A;--hl-ink:#1D1714;--shadow-1:3px 3px 0 #1D1714;--globe-sea:#B9D3CF;--globe-land:#F6EFE2;--globe-coast:#8C8177;color-scheme:light}
@media (prefers-color-scheme: dark){:root[data-palette="clay"]:not([data-theme="light"]):not([data-theme="blackout"]){--bg:#13201F;--panel:#1B2A29;--panel-2:#243634;--line:rgba(241,234,220,.12);--line-strong:rgba(241,234,220,.32);--text:#F1EADC;--muted:#A9B3AE;--accent:#5BBDB2;--accent-ink:#0E1A19;--warn:#E08A5C;--r-green:#5FA845;--ink:#050A0A;--ink-line:rgba(241,234,220,.5);--hl:#F0C25E;--hl-ink:#1D1714;--shadow-1:3px 3px 0 #050A0A;--globe-sea:#16302E;--globe-land:#33433F;--globe-coast:#6A7C77;color-scheme:dark;--bean-ink:#F1EADC}}
:root[data-palette="clay"][data-theme="dark"]{--bg:#13201F;--panel:#1B2A29;--panel-2:#243634;--line:rgba(241,234,220,.12);--line-strong:rgba(241,234,220,.32);--text:#F1EADC;--muted:#A9B3AE;--accent:#5BBDB2;--accent-ink:#0E1A19;--warn:#E08A5C;--r-green:#5FA845;--ink:#050A0A;--ink-line:rgba(241,234,220,.5);--hl:#F0C25E;--hl-ink:#1D1714;--shadow-1:3px 3px 0 #050A0A;--globe-sea:#16302E;--globe-land:#33433F;--globe-coast:#6A7C77;color-scheme:dark;--bean-ink:#F1EADC}
:root[data-palette="rosa"]:not([data-theme="dark"]):not([data-theme="blackout"]){--bg:#F6EEEA;--panel:#FCF8F6;--panel-2:#EDDFD9;--line:rgba(36,18,26,.15);--line-strong:rgba(36,18,26,.42);--text:#24121A;--muted:#644E57;--accent:#B0195F;--accent-ink:#FFFFFF;--warn:#C2510C;--ink:#24121A;--ink-line:#24121A;--hl:#3FB8B6;--hl-ink:#24121A;--shadow-1:3px 3px 0 #24121A;--globe-sea:#C2E2E1;--globe-land:#FBF5F2;--globe-coast:#8E7C83;color-scheme:light}
@media (prefers-color-scheme: dark){:root[data-palette="rosa"]:not([data-theme="light"]):not([data-theme="blackout"]){--bg:#1E1218;--panel:#291921;--panel-2:#35222C;--line:rgba(246,234,238,.12);--line-strong:rgba(246,234,238,.32);--text:#F6EAEE;--muted:#B9A3AC;--accent:#F27BAE;--accent-ink:#24121A;--warn:#F59E5B;--ink:#080305;--ink-line:rgba(246,234,238,.5);--hl:#5FD3D1;--hl-ink:#24121A;--shadow-1:3px 3px 0 #080305;--globe-sea:#13282A;--globe-land:#3A2A32;--globe-coast:#7E6A73;color-scheme:dark;--bean-ink:#F1EADC}}
:root[data-palette="rosa"][data-theme="dark"]{--bg:#1E1218;--panel:#291921;--panel-2:#35222C;--line:rgba(246,234,238,.12);--line-strong:rgba(246,234,238,.32);--text:#F6EAEE;--muted:#B9A3AC;--accent:#F27BAE;--accent-ink:#24121A;--warn:#F59E5B;--ink:#080305;--ink-line:rgba(246,234,238,.5);--hl:#5FD3D1;--hl-ink:#24121A;--shadow-1:3px 3px 0 #080305;--globe-sea:#13282A;--globe-land:#3A2A32;--globe-coast:#7E6A73;color-scheme:dark;--bean-ink:#F1EADC}
/* The header (brand, tabs, stats) and the phone's bottom tab bar keep each palette's dark colours in every theme: only the
   body switches between light and dark. The dark tokens are repeated here as --hd-* so the header can use them under a
   light theme; a pseudo-element paints the header row (and, on phones, the tab-bar row) behind the three areas. */
:root[data-palette="clay"]{--hd-bg:#13201F;--hd-panel:#1B2A29;--hd-text:#F1EADC;--hd-muted:#A9B3AE;--hd-line:rgba(241,234,220,.12);--hd-line-strong:rgba(241,234,220,.32);--hd-accent:#5BBDB2;--hd-accent-ink:#0E1A19;--hd-ink:#050A0A;--hd-ink-line:rgba(241,234,220,.5)}
:root[data-palette="rosa"]{--hd-bg:#1E1218;--hd-panel:#291921;--hd-text:#F6EAEE;--hd-muted:#B9A3AC;--hd-line:rgba(246,234,238,.12);--hd-line-strong:rgba(246,234,238,.32);--hd-accent:#F27BAE;--hd-accent-ink:#24121A;--hd-ink:#080305;--hd-ink-line:rgba(246,234,238,.5)}
/* Night: the faction tiles' near-black as the base. Light: neutral greys with night as the accent; dark: night itself with bone */
/* Faction palettes (generated by scratchpad faction-themes.mjs; every text pair meets WCAG AA, body text AAA) */
:root[data-palette="ember"]:not([data-theme="dark"]):not([data-theme="blackout"]){--bg:#F5ECE3;--panel:#FCF7F2;--panel-2:#EBDCCC;--line:rgba(34,20,12,.15);--line-strong:rgba(34,20,12,.42);--text:#22140C;--muted:#5E4A3C;--accent:#B4410A;--accent-ink:#FFFFFF;--warn:#9C3410;--ink:#22140C;--ink-line:#22140C;--hl:#FF6A13;--hl-ink:#22140C;--shadow-1:3px 3px 0 #22140C;--globe-sea:#EBDCCC;--globe-land:#FCF7F2;--globe-coast:#5E4A3C;color-scheme:light}
@media (prefers-color-scheme: dark){:root[data-palette="ember"]:not([data-theme="light"]):not([data-theme="blackout"]){--bg:#1C1410;--panel:#271C16;--panel-2:#33251D;--line:rgba(247,235,223,.12);--line-strong:rgba(247,235,223,.32);--text:#F7EBDF;--muted:#C2AE9E;--accent:#FF8A45;--accent-ink:#1C1410;--warn:#F59E5B;--ink:#060404;--ink-line:rgba(247,235,223,.5);--hl:#FFB37A;--hl-ink:#1C1410;--shadow-1:3px 3px 0 #060404;--globe-sea:#33251D;--globe-land:#271C16;--globe-coast:#C2AE9E;color-scheme:dark;--bean-ink:#F1EADC}}
:root[data-palette="ember"][data-theme="dark"]{--bg:#1C1410;--panel:#271C16;--panel-2:#33251D;--line:rgba(247,235,223,.12);--line-strong:rgba(247,235,223,.32);--text:#F7EBDF;--muted:#C2AE9E;--accent:#FF8A45;--accent-ink:#1C1410;--warn:#F59E5B;--ink:#060404;--ink-line:rgba(247,235,223,.5);--hl:#FFB37A;--hl-ink:#1C1410;--shadow-1:3px 3px 0 #060404;--globe-sea:#33251D;--globe-land:#271C16;--globe-coast:#C2AE9E;color-scheme:dark;--bean-ink:#F1EADC}
:root[data-palette="ember"]{--hd-bg:#1C1410;--hd-panel:#271C16;--hd-text:#F7EBDF;--hd-muted:#C2AE9E;--hd-line:rgba(247,235,223,.12);--hd-line-strong:rgba(247,235,223,.32);--hd-accent:#FF8A45;--hd-accent-ink:#1C1410;--hd-ink:#060404;--hd-ink-line:rgba(247,235,223,.5)}
:root[data-palette="slate"]:not([data-theme="dark"]):not([data-theme="blackout"]){--bg:#ECEEF1;--panel:#F8F9FA;--panel-2:#DCE0E5;--line:rgba(21,24,28,.15);--line-strong:rgba(21,24,28,.42);--text:#15181C;--muted:#4D5560;--accent:#3B3F45;--accent-ink:#FFFFFF;--warn:#A8461F;--ink:#15181C;--ink-line:#15181C;--hl:#C8202B;--hl-ink:#15181C;--shadow-1:3px 3px 0 #15181C;--globe-sea:#DCE0E5;--globe-land:#F8F9FA;--globe-coast:#4D5560;color-scheme:light}
@media (prefers-color-scheme: dark){:root[data-palette="slate"]:not([data-theme="light"]):not([data-theme="blackout"]){--bg:#14171B;--panel:#1C2026;--panel-2:#262B33;--line:rgba(233,237,242,.12);--line-strong:rgba(233,237,242,.32);--text:#E9EDF2;--muted:#A3ACB8;--accent:#B8C1CC;--accent-ink:#14171B;--warn:#E08A5C;--ink:#060404;--ink-line:rgba(233,237,242,.5);--hl:#FF4A55;--hl-ink:#14171B;--shadow-1:3px 3px 0 #060404;--globe-sea:#262B33;--globe-land:#1C2026;--globe-coast:#A3ACB8;color-scheme:dark;--bean-ink:#F1EADC}}
:root[data-palette="slate"][data-theme="dark"]{--bg:#14171B;--panel:#1C2026;--panel-2:#262B33;--line:rgba(233,237,242,.12);--line-strong:rgba(233,237,242,.32);--text:#E9EDF2;--muted:#A3ACB8;--accent:#B8C1CC;--accent-ink:#14171B;--warn:#E08A5C;--ink:#060404;--ink-line:rgba(233,237,242,.5);--hl:#FF4A55;--hl-ink:#14171B;--shadow-1:3px 3px 0 #060404;--globe-sea:#262B33;--globe-land:#1C2026;--globe-coast:#A3ACB8;color-scheme:dark;--bean-ink:#F1EADC}
:root[data-palette="slate"]{--hd-bg:#14171B;--hd-panel:#1C2026;--hd-text:#E9EDF2;--hd-muted:#A3ACB8;--hd-line:rgba(233,237,242,.12);--hd-line-strong:rgba(233,237,242,.32);--hd-accent:#B8C1CC;--hd-accent-ink:#14171B;--hd-ink:#060404;--hd-ink-line:rgba(233,237,242,.5)}
/* The route line on maps (2D, 3D): its own bright colour per palette, chosen to stand out on terrain and satellite imagery
   rather than to match the buttons (Slate's graphite accent nearly vanished on the map; Warren, 2026-10-18) */
:root{--route:#FF5A1F}
:root[data-palette="slate"]{--route:#FF4436}@media (prefers-color-scheme: dark){:root[data-palette="slate"]:not([data-theme="light"]){--route:#FF6B5E}}:root[data-palette="slate"][data-theme="dark"],:root[data-palette="slate"][data-theme="blackout"]{--route:#FF6B5E}
:root[data-palette="clay"]{--route:#F2A900}@media (prefers-color-scheme: dark){:root[data-palette="clay"]:not([data-theme="light"]){--route:#FFC233}}:root[data-palette="clay"][data-theme="dark"],:root[data-palette="clay"][data-theme="blackout"]{--route:#FFC233}
:root[data-palette="rosa"]{--route:#FF2E93}@media (prefers-color-scheme: dark){:root[data-palette="rosa"]:not([data-theme="light"]){--route:#FF5CAD}}:root[data-palette="rosa"][data-theme="dark"],:root[data-palette="rosa"][data-theme="blackout"]{--route:#FF5CAD}
:root[data-palette="ember"]{--route:#FF6A13}@media (prefers-color-scheme: dark){:root[data-palette="ember"]:not([data-theme="light"]){--route:#FF8A45}}:root[data-palette="ember"][data-theme="dark"],:root[data-palette="ember"][data-theme="blackout"]{--route:#FF8A45}
:root[data-palette] .brand,:root[data-palette] .tabs,:root[data-palette] .stats{--bg:var(--hd-bg);--panel:var(--hd-panel);--panel-2:var(--hd-panel);--text:var(--hd-text);--muted:var(--hd-muted);--line:var(--hd-line);--line-strong:var(--hd-line-strong);--accent:var(--hd-accent);--accent-ink:var(--hd-accent-ink);--ink:var(--hd-ink);--ink-line:var(--hd-ink-line);--shadow-1:3px 3px 0 var(--hd-ink);color:var(--text);color-scheme:dark;position:relative;z-index:1}
:root[data-palette] #app::before{content:"";grid-area:1/1/2/-1;align-self:stretch;justify-self:stretch;background:var(--hd-bg);z-index:0}   /* stretch: #app aligns its items to the end, which would give an empty pseudo no height */
@media (max-width:860px){ :root[data-palette] #app::after{content:"";grid-row:3;grid-column:1/-1;align-self:stretch;justify-self:stretch;background:var(--hd-bg);z-index:0} }   /* the tab bar's row at the bottom */
:root[data-palette]:not([data-theme="blackout"]) .btn:not(.tabbar .btn):not(.seg .btn):not(.menu-pop .btn){border:2px solid var(--ink-line)}
:root[data-palette]:not([data-theme="blackout"]) .btn.primary{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
:root[data-palette]:not([data-theme="blackout"]) .btn.primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
:root[data-palette]:not([data-theme="blackout"]) .card,:root[data-palette]:not([data-theme="blackout"]) .prof-card,:root[data-palette]:not([data-theme="blackout"]) .atlas-card:not(.add-card){border:2px solid var(--ink-line);border-radius:4px;box-shadow:3px 3px 0 var(--ink)}
:root[data-palette]:not([data-theme="blackout"]) .pick{border:2px solid var(--line-strong)}
:root[data-palette]:not([data-theme="blackout"]) .pick.on{border-color:var(--ink-line);background:var(--hl);box-shadow:3px 3px 0 var(--ink)}
:root[data-palette]:not([data-theme="blackout"]) .pick.on .pick-label{color:var(--hl-ink)}
:root[data-palette]:not([data-theme="blackout"]) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),:root[data-palette]:not([data-theme="blackout"]) select,:root[data-palette]:not([data-theme="blackout"]) textarea{border:2px solid var(--line-strong)}
/* the Colours picker's swatches */
.palette-pick{display:flex;gap:6px;flex-wrap:wrap}
.palette-pick .btn{gap:6px}
.pal-dots{display:inline-flex}
.pal-dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--text);margin-left:-3px}
.pal-dots i:first-child{margin-left:0}
/* Sign-in heading: the cup to the left of the name, kept on one line at every width */
.login-box h1.login-logo{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:clamp(20px,6.2vw,36px);line-height:1;margin:0 0 14px;padding-right:44px}
.login-box h1.login-logo .login-cup{width:1.5em;height:auto;flex:none;margin-top:-.12em}
/* The content area's background: faint contour lines (img/topo.svg, scripts/build-topo.mjs) in the theme's own text
   colour. Only under the header, inside <main>, behind every view (they come after it, so they paint over it); not in the
   header, the phone tab bar, or the dashed "+" tiles (they get the plain page colour). */
:root{--topo:color-mix(in srgb, var(--text) 7%, transparent)}
main::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--topo);-webkit-mask:url("../img/topo.svg") 0 0/900px 900px repeat;mask:url("../img/topo.svg") 0 0/900px 900px repeat}
@media (max-width:860px){main::before{-webkit-mask-size:640px 640px;mask-size:640px 640px}}
:root[data-theme="blackout"] main::before{display:none}
.add-card,.se-add,.leg-add{background-color:var(--bg)}
/* Card pictures without a photo: real contour lines behind the route (CardTopo in atlas.js), like the page background */
.ac-thumb .ac-topo{fill:none;stroke:color-mix(in srgb, var(--text) 16%, transparent);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* Date and time fields look like the other inputs and never overflow their box: iOS gives them a native look and its
   own minimum width (the onboarding date of birth stuck out of its card). Zero specificity, so sized ones keep their size. */
:where(input[type=date],input[type=time]){display:block;width:100%;max-width:100%;min-width:0;-webkit-appearance:none;appearance:none;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:2px;padding:10px 12px;font:inherit;min-height:44px;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
/* On the quest page the contours step back a little further (the cards and lists there are busier) */
main:has(#view-quests.active)::before{opacity:.6}
/* Base colours: the Custom tile's colour wheel, and its popup (primary and secondary) */
.custom-wrap .wheel.big{display:block;width:30px;height:30px;border-radius:50%;background:conic-gradient(#e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);box-shadow:inset 0 0 0 5px var(--panel-2)}
.base-pop .field{margin-top:10px}
.base-pop .field:first-of-type{margin-top:6px}

/* ========== Beta welcome article (the big story on the Atlas front page, and the end of onboarding) ========== */
.atlas-card.welcome-card .wc-media{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--accent) 16%, var(--panel-2));background-image:url(/img/topo.svg);background-size:420px;background-blend-mode:multiply}
.atlas-card.feat-big.welcome-card .wc-media img{position:static;inset:auto;width:min(46%,180px);height:auto;object-fit:contain;filter:drop-shadow(3px 4px 0 var(--ink))}
.welcome-page .wa{max-width:720px;line-height:1.6}
.welcome-page .wa-head{display:flex;gap:16px;align-items:flex-start;margin:6px 0 4px}
.welcome-page .wa-cup{width:72px;height:72px;flex:none}
.welcome-page .wa-head h2{margin:6px 0 4px}
.welcome-page .wa h3{margin:22px 0 6px}
.welcome-page .wa-list{padding-left:20px;margin:0}
.welcome-page .wa-list li{margin:6px 0}
/* the NDA step of onboarding: the agreement in a scrolling box, then the typed signature */
.ob-nda{max-height:38vh;overflow:auto;border:2px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2);padding:10px 14px;font-size:14px;line-height:1.55}
.ob-nda h4{margin:12px 0 4px;font-size:14px}
.ob-nda p,.ob-nda ul{margin:4px 0}
/* The Atlas | Season switch shows with gamified features on or off (off: the Season page is just its banner and Support) */
.atlas-head>div>.atlas-title{display:none}   /* only the Atlas page's own heading (the Atlas | Season switch stands in for it), never a route's title */
.game-ask-toggle{margin:10px 0 4px;align-items:flex-start}
/* onboarding slide 1: what the app is, and the Gamified features switch */
.ob-about{border:2px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2);padding:10px 14px;margin:6px 0 12px}
.ob-about p{margin:6px 0}
.ob-game{margin-top:8px;align-items:flex-start}
/* The Season page (Atlas > Season): the Season replaces the Atlas's search and cards */
#atlasList:not(.season-on) .atlas-season{display:none}
#atlasList.season-on > :not(.atlas-head):not(.atlas-season){display:none}
.season-tabs{margin:8px 0 4px}
.season-page{display:grid;gap:6px}   /* full width, like the Atlas and quest pages */
.sn-now{margin:10px 0 14px}
.sn-now h2{margin:6px 0 2px;font-size:22px}
.sn-sec .ad-head{margin-top:10px}
.sn-story{display:grid;gap:8px}
.sn-synopsis{margin:0;border-left:4px solid var(--accent);padding:8px 14px;background:var(--panel);font-size:16px;line-height:1.6}
.sn-factions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:860px){.sn-factions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.sn-factions{grid-template-columns:1fr}}
.sn-faction{border:2px solid var(--line-strong);border-top:6px solid var(--fc);border-radius:var(--r);background:var(--panel);padding:10px 12px}
.sn-faction p{margin:4px 0 6px}
.sn-faction .kv{margin:0}
.sn-faction.f-gorp_corp,.sn-chip.f-gorp_corp,.sn-bar.f-gorp_corp{--fc:#FF6A13}.sn-faction.f-decaf,.sn-chip.f-decaf,.sn-bar.f-decaf{--fc:#3B3F45}.sn-faction.f-coven,.sn-chip.f-coven,.sn-bar.f-coven{--fc:#8E3FB5}.sn-faction.f-gorpeus,.sn-chip.f-gorpeus,.sn-bar.f-gorpeus{--fc:#E0262F}
.sn-faction .ct-faction{color:var(--fc)}
.sn-todo{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sn-todo li{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:8px 12px}
.sn-todo .linkish{font-weight:700;margin-right:6px}
.sn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sn-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--fc);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:650}
.sn-chip .beans b{font-size:12px}
.sn-bars{display:grid;gap:6px}
.sn-bar{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:8px;font-size:13px;font-weight:650}
.sn-bar i{display:block;height:10px;border-radius:999px;background:var(--fc);min-width:2px;box-shadow:inset 0 0 0 1px var(--line)}
.sn-bar b{text-align:right;font-variant-numeric:tabular-nums}
.char-hud .sn-strip,.char-hud .beans-line{pointer-events:auto}   /* the HUD lets clicks through to the 3D stage, except on these */
.sn-strip{display:inline-flex;align-items:center;gap:4px;margin-top:4px;background:transparent;border:0;padding:0;font:inherit;font-size:13px;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Factions (Season > Factions): a 2 by 2 grid of logos, and a page per faction */
.fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:720px}
/* the Story tab: the story on the left, the faction flip cards in a 2 by 2 grid on the right (stacked on a phone, the grid kept) */
.sn-split{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px}
@media (min-width:1000px){.sn-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.sn-split .fx-flips{max-width:none}}
.fx-flips{max-width:none;perspective:1200px}
/* the Season's lower half: how contracts work and the collectibles, side by side on a wide screen */
.sn-split-2{margin-top:4px}@media (min-width:1000px){.sn-split-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sn-how p{max-width:62ch;line-height:1.55}
.sn-steps{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px;font-size:12px;letter-spacing:.02em}.sn-steps li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}.sn-steps b{font-family:var(--tall);font-size:20px;line-height:1;color:var(--muted);min-width:30px}
.sn-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.sn-rate{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:10px 12px;background:#1B1B1E;color:#F1EADC;border-left:5px solid var(--fc)}
.sn-rate .sn-rate-logo{grid-row:1/span 3;width:34px;height:34px}.sn-rate b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc)}.sn-rate .mono{font-size:13px}.sn-rate .muted{color:#B8B1A4;font-size:11px}
.sn-rate.f-gorp_corp{--fc:#FF6A13}.sn-rate.f-decaf{--fc:#9AA1AB}.sn-rate.f-coven{--fc:#B678D8}.sn-rate.f-gorpeus{--fc:#E0262F}
.sn-drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.sn-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 10px;background:#1B1B1E;color:#F1EADC;border-bottom:5px solid var(--fc)}
.sn-drop .ct-thumb{width:64px;height:64px;background-color:#26262B;border-color:#3C3C43;background-size:70%}.sn-drop b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc)}.sn-drop .small{color:#B8B1A4;font-size:12px}
.sn-drop.f-gorp_corp{--fc:#FF6A13}.sn-drop.f-decaf{--fc:#9AA1AB}.sn-drop.f-coven{--fc:#B678D8}.sn-drop.f-gorpeus{--fc:#E0262F}
.fx-card{position:relative;min-height:230px;cursor:pointer;outline:0}
.fx-card:focus-visible .fx-flip{box-shadow:0 0 0 3px var(--accent)}
.fx-flip{position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fx-card.flipped .fx-flip{transform:rotateY(180deg)}
.fx-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;justify-content:center}
.fx-card .fx-back{transform:rotateY(180deg);justify-content:flex-start;align-items:stretch;text-align:left;gap:8px;padding:14px 14px 12px;overflow:hidden}
.fx-card .fx-back>b{font-size:13px;letter-spacing:.1em;color:var(--fc)}
.fx-back-text{flex:1;min-height:0;margin:0;font-size:13px;line-height:1.45;overflow:hidden}
@media (max-width:1200px) and (min-width:1000px){.fx-back-text{font-size:12px;line-height:1.4}}
@media (max-width:600px){.fx-card{min-height:210px}.fx-back-text{font-size:12px}}
.fx-tile{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 12px 14px;border:2px solid var(--line-strong);border-bottom:6px solid var(--fc);border-radius:var(--r);background:var(--panel);cursor:pointer;font:inherit;color:var(--text)}
.fx-tile:hover{background:var(--panel-2)}
.fx-tile b{font-size:16px;letter-spacing:.04em}
.fx-logo{width:min(150px,60%);aspect-ratio:1;object-fit:contain}
.fx-logo.big{width:120px;flex:none}
.fx-missing{display:grid;place-items:center;border-radius:50%;background:var(--fc);color:#fff;font-size:44px;font-weight:800}
.fx-tile.f-gorp_corp,.fx-page.f-gorp_corp{--fc:#FF6A13}.fx-tile.f-decaf,.fx-page.f-decaf{--fc:#3B3F45}.fx-tile.f-coven,.fx-page.f-coven{--fc:#8E3FB5}.fx-tile.f-gorpeus,.fx-page.f-gorpeus{--fc:#E0262F}
.fx-head{display:flex;gap:16px;align-items:center;border-bottom:4px solid var(--fc);padding-bottom:12px;margin:6px 0 4px}
.fx-head h2{margin:0}
.fx-page .sn-sec p{max-width:72ch;line-height:1.6}
@media (max-width:460px){.fx-logo.big{width:84px}.fx-tile{padding:12px 8px}}
/* Contracts (a quest's Contracts tab): a card per contract, edged in its faction's colour */
.ct-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ct-card{display:grid;grid-template-columns:1fr auto;column-gap:12px;border:2px solid var(--line-strong);border-left:6px solid var(--fc);border-radius:var(--r);background:var(--panel);padding:12px 16px;position:relative;overflow:hidden}
/* the order sheet: scanlines, bracket corners, mono rule and status line (the Kojima half of the design) */
/* the brackets are absolute children of a grid: any grid-column on them would move their containing block to that grid line
   (the left pair then measures from the text column, not the edge), so they get auto placement and offsets from the padding box */
.ct-card .corner{position:absolute;width:12px;height:12px;border:2px solid #F1EADC;opacity:.9;pointer-events:none}
.ct-card .corner.tl{top:5px;left:5px;border-right:0;border-bottom:0}.ct-card .corner.tr{top:5px;right:5px;border-left:0;border-bottom:0}.ct-card .corner.bl{bottom:5px;left:5px;border-right:0;border-top:0}.ct-card .corner.br{bottom:5px;right:5px;border-left:0;border-top:0}   /* 5px in from every inner edge, so the gap beside the faction bar matches the gap beside the right border */
.ct-card .ct-no{font-size:11px;color:var(--night-muted);margin-left:4px}
.ct-card .ct-title{font-family:var(--tall);font-weight:500;font-size:20px;letter-spacing:.03em;text-transform:uppercase;line-height:1.15;margin-top:4px}
.ct-card .ct-brief{font-family:var(--ital);font-style:italic;font-size:15px}
.ct-card .ct-goal{font-size:11.5px;line-height:1.5;letter-spacing:.03em;text-transform:uppercase}.ct-card .ct-goal b{font-weight:500;color:var(--night-muted)}
.ct-status{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--night-muted)}.ct-status .ct-ok{margin-left:auto;color:#5BBDB2}
.ct-card.on{outline:2px solid var(--fc);outline-offset:2px}
/* the order sheet in the sidebar: the same night card, laid out as a page */
.ct-detail{display:block;margin-top:12px}
/* with an order open, the whole sidebar column is the night panel with the faction's bar down its edge; the sheet inside has no box of its own */
.detail-col.ct-side{background:#1B1B1E;color:#F1EADC;border-left:6px solid var(--fc,#3C3C43);--text:#F1EADC;--muted:#B8B1A4;--line:#3C3C43;--line-strong:#4A4A52;--panel:#1B1B1E;--panel-2:#26262B}
.detail-col.ct-side .ct-detail{border:0;border-left:0;background:transparent;padding:0;margin-top:8px;overflow:visible}
.detail-col.ct-side .ct-detail .corner{display:none}
.detail-col.ct-side .back{color:#F1EADC;border-color:#4A4A52}
.detail-col.ct-side.f-gorp_corp{--fc:#FF6A13}.detail-col.ct-side.f-decaf{--fc:#9AA1AB}.detail-col.ct-side.f-coven{--fc:#B678D8}.detail-col.ct-side.f-gorpeus{--fc:#E0262F}
@media (max-width:860px){.detail-col.ct-side{border-left:0;border-top:6px solid var(--fc,#3C3C43)}}
.ct-detail .ct-title{font-size:24px;display:block}
.ct-readout{margin:12px 0;border-color:#3C3C43}.ct-readout>div{border-color:#3C3C43}.ct-readout .l{color:var(--night-muted)}.ct-readout .v{color:var(--night-text);font-size:20px}.ct-readout .beans{color:var(--night-text);--bean-ink:#F1EADC}
.ct-rules{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:4px;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--night-text)}
.ct-kv{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--night-muted);margin:8px 0}.ct-kv dd{color:var(--night-text)}
.ct-reward-row{display:flex;gap:12px;align-items:flex-start;margin:10px 0 6px}.ct-reward-row .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted)}.ct-reward-row b{display:block;margin:2px 0 4px}.ct-reward-row p{margin:0;color:var(--night-muted)}
.ct-detail .ct-note{color:var(--night-muted);margin:12px 0 0}
.ct-card>:not(.ct-top):not(.ct-reward):not(.corner){grid-column:1}
.ct-top{grid-column:1/-1}
.ct-logo{width:22px;height:22px;flex:none}
.ct-reward{grid-column:2;grid-row:2/span 3;align-self:start;margin:0}
.ct-thumb{width:56px;height:56px;border:2px solid var(--line-strong);background-size:70%;cursor:help}
.ct-card.f-gorp_corp{--fc:#FF6A13}.ct-card.f-decaf{--fc:#3B3F45}.ct-card.f-coven{--fc:#8E3FB5}.ct-card.f-gorpeus{--fc:#E0262F}
/* Season surfaces are night: the Season's Atlas card, the faction tiles and the contract cards sit on a near-black
   (not pure black) panel with light text, in both themes; DECAF's graphite is lifted so its edge still shows */
.atlas-card.season-card,.fx-tile,.ct-card{--night:#1B1B1E;--night-2:#26262B;--night-line:#3C3C43;--night-text:#F1EADC;--night-muted:#B8B1A4;background:var(--night);color:var(--night-text);border-color:var(--night-line)}
.atlas-card.season-card:hover,.fx-tile:hover{background:var(--night-2)}
.atlas-card.season-card .muted,.atlas-card.season-card .ac-sum,.fx-tile .muted,.ct-card .muted,.ct-card .ct-brief{color:var(--night-muted)}
.atlas-card.season-card .chip,.ct-card .chip{color:var(--night-muted);border-color:var(--night-line)}
.atlas-card.season-card .ac-title,.ct-card .ct-title,.ct-card .beans,.fx-tile b{color:var(--night-text)}
.ct-card .beans{--bean-ink:#F1EADC}
/* the bean count under a name is a button that opens the beans pop-up */
button.beans-line{background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;border-radius:4px}
button.beans-line:hover .beans b{text-decoration:underline;text-underline-offset:3px}
/* the beans pop-up: balance, one line, Earn beans / Buy beans tabs; back from Stripe it is the receipt (beans.js, purchases.js) */
.beans-about h3{display:flex;align-items:center;gap:10px;margin:0}
.beans-about h3 .beans b{font-family:var(--tall);font-weight:500;font-size:30px;line-height:1}
.beans-about h3 .l,.beans-about .receipt .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.beans-about .lede{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.beans-about .tabbar{margin:12px 0 12px}
.beans-about .tabbar .btn{flex:1;justify-content:center}
.beans-about .d-actions .btn{flex:1;justify-content:center}
.earn-list{display:grid;border-top:1px solid var(--line)}
.earn-list>div{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.earn-list svg{width:22px;height:22px;flex:none;margin-top:2px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.earn-list b{display:block;font-size:14px}
.earn-list span{color:var(--muted)}
.beans-about .fine{margin:12px 0 0;font-size:12px;color:var(--muted)}
button.pack-hero,button.pack-card{font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:var(--r);background:var(--panel-2)}
button.pack-hero:hover,button.pack-card:hover{background:var(--panel)}
.pack-hero{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:2px solid var(--line-strong);padding:12px 14px}
.pack-hero>div{flex:1;display:grid;gap:4px}
.pack-hero .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.pack-hero .beans b{font-family:var(--tall);font-weight:500;font-size:28px;line-height:1}
/* the pack Buy pays for: the palette's highlight (each sets it for light and dark; Slate's is red, Clay's gold) as a thick
   ring, and only there; the accent where a palette has none */
button.pack-hero[aria-pressed="true"],button.pack-card[aria-pressed="true"]{outline:3px solid var(--hl, var(--accent));outline-offset:2px;border-color:var(--hl, var(--accent));background:var(--panel)}
.pack-actions{flex-direction:column}
.pack-actions .btn{width:100%;justify-content:center}
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.pack-grid:empty{display:none}
.pack-card{display:flex;flex-direction:column;gap:8px;align-items:stretch;box-sizing:border-box;border:1px solid var(--line-strong);padding:10px}
.pack-card .top{display:grid;gap:2px;min-height:38px;align-content:start}
.pack-card .beans b{font-family:var(--tall);font-weight:500;font-size:24px;line-height:1}
.bonus{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:600}
.price{display:inline-flex;justify-content:center;align-items:center;padding:6px;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--r);font-family:var(--mono);font-weight:600;font-size:13px}
.pack-hero .price{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:15px;padding:9px 12px}
dialog.ask.sheet::before{opacity:.06}   /* the content panels' contours, fainter inside the small box */
dialog.beans-about{overflow:auto}   /* .sheet hides overflow; a short screen must still scroll to the button */
.receipt{display:grid;justify-items:center;gap:8px;padding:14px 0 6px;text-align:center}
.receipt .ok{width:48px;height:48px;border-radius:50%;border:2px solid var(--r-green);display:grid;place-items:center}
.receipt .ok svg{width:26px;height:26px;fill:none;stroke:var(--r-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.receipt .beans b{font-family:var(--tall);font-weight:500;font-size:40px;line-height:1}
.receipt p{margin:0;font-size:13.5px;color:var(--muted)}
.beans-about .readout{margin-top:12px}
/* faction names are set in capitals wherever they appear */
.fx-tile b,.fx-head h2,.ct-faction,.sn-bar span,.sn-faction,.fx-page .fx-head h2{text-transform:uppercase}
.atlas-card.season-card .wc-media{background:color-mix(in srgb, var(--accent) 28%, #1B1B1E);background-image:url(/img/topo.svg);background-size:420px;background-blend-mode:soft-light}
.ct-thumb{background-color:var(--night-2);border-color:var(--night-line)}
.fx-tile.f-decaf,.ct-card.f-decaf,.fx-page.f-decaf .fx-head{--fc:#9AA1AB}
/* a faction page's header is the same night panel as its tile in the grid */
.fx-head{--night:#1B1B1E;--night-text:#F1EADC;--night-muted:#B8B1A4;background:var(--night);color:var(--night-text);border:2px solid #3C3C43;border-bottom:6px solid var(--fc);border-radius:var(--r);padding:14px 16px}
.fx-head h2,.fx-head .muted{color:var(--night-text)}
/* on a wide screen a faction page splits in two: the text on the left, the header card (logo and name) as the whole right half */
@media (min-width:1000px){
  .fx-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 28px;align-items:start}
  .fx-page>.back-pill{grid-column:1}
  .fx-page>.sn-sec{grid-column:1}
  .fx-page>.fx-head{grid-column:2;grid-row:1/span 12;position:sticky;top:12px;flex-direction:column;justify-content:center;text-align:center;gap:22px;min-height:min(70vh,640px);padding:40px 28px;border-bottom-width:8px}
  .fx-page>.fx-head .fx-logo.big{width:min(60%,300px);height:auto}
  .fx-page>.fx-head h2{font-size:34px}.fx-page>.fx-head .muted{font-family:var(--ital);font-style:italic;font-size:18px}
}
.fx-head .muted{color:var(--night-muted)}
.ct-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-faction{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fc)}
.ct-pay{margin-left:auto}
.ct-pay .beans b{font-size:16px}
.ct-title{display:block;font-size:17px;margin:4px 0 2px}
.ct-brief{margin:2px 0 6px;font-style:italic;color:var(--muted)}
.ct-goal,.ct-reward{margin:2px 0}
.ct-note{margin-top:12px}
/* Beans: the coffee-bean icon and count (profile, onboarding), and the price on a tile you don't own yet, in its tier's colour */
.beans{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;color:var(--text)}
.bean-ico{width:16px;height:16px;flex:none;color:#7A4A2A;--bean-line:var(--panel)}
.beans-line{display:inline-flex;align-items:center;gap:5px;margin-top:2px}
.beans-line .beans b{font-size:16px}
.pick-price{position:absolute;right:-4px;top:-6px;display:inline-flex;align-items:center;gap:2px;padding:1px 5px 1px 3px;border-radius:999px;font-size:11px;font-weight:750;font-variant-numeric:tabular-nums;background:var(--panel);border:1.5px solid var(--tc, var(--line-strong));color:var(--text);pointer-events:none}
.pick-price .bean-ico{width:12px;height:12px}
.pick-price.t-common{--tc:#8C8177}.pick-price.t-uncommon{--tc:#3D8B57}.pick-price.t-rare{--tc:#2F6FB0}.pick-price.t-epic{--tc:#8E3FB5}
.pick-wrap.locked .pick-img,.pick-wrap.dim .pick-img{opacity:.55}
.ob-beans{display:flex;gap:12px;align-items:center;border:2px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2);padding:8px 12px;margin:4px 0 8px}
.ob-beans .beans b{font-size:20px}
.ob-beans p{flex:1}
@media (max-width:560px){.ob-beans{flex-direction:column;align-items:flex-start;gap:4px}}
/* a quest's corner controls: the readiness badge the same height, border width and corners as the download and ... buttons */
.mq-ready .ready.big{align-items:center;height:38px;padding-top:0;padding-bottom:0;border-radius:var(--r);box-sizing:border-box}
.q-card-wrap .mq-ready .ready{height:30px;box-sizing:border-box}
:root[data-palette]:not([data-theme="blackout"]) .mq-ready .ready.big{border-width:2px;border-color:color-mix(in srgb,var(--rc) 70%,transparent)}
.ob-nda .nda-draft{border-left:4px solid var(--accent);padding:6px 10px;background:var(--panel)}
@media (max-width:560px){.welcome-page .wa-cup{width:52px;height:52px}}
/* Quest page on wide screens: the sheet takes the full width (centred), the sidebar is a drawer from the right that opens
   when something is picked (a subquest, the main quest card, a contract) and closes with Back or Esc */
@media (min-width:861px){
  #view-quests:not(.q-home){grid-template-columns:minmax(0,1fr)}
  #view-quests:not(.q-home) #questList{width:100%;max-width:1180px;margin:0 auto}
  #view-quests #questDetail{position:fixed;right:0;top:var(--chrome-top,0px);bottom:var(--chrome-bottom,0px);width:min(460px,100vw);z-index:90;overflow:auto;transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:-14px 0 36px rgba(0,0,0,.28);border-left:1px solid var(--line-strong)}
  #view-quests #questDetail.open{transform:none;visibility:visible;transition:transform .22s ease}
  #view-quests #questDetail.ct-side{border-left:6px solid var(--fc,#3C3C43)}
  #view-quests #questDetail .back{display:inline-flex;margin-bottom:14px}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){#view-quests #questDetail{transition:none}}

/* Page vs paper (field-terminal, Oct 2026, as in the mock-ups): the page is a deeper, more saturated tone of the palette's
   background with strong contour lines; every content area sits on a paler paper panel inset from the edges, whose own
   contours are only a ghost (the panel colour washed over the lines, so they scroll with the content). Cards inside keep
   the same ghost level so the lines never double up. */
:root{--topo:color-mix(in srgb, var(--text) 60%, transparent);--paper-veil:color-mix(in srgb, var(--panel) 93%, transparent);--page:var(--bg);--topo-img:url(/img/topo.svg)}
:root[data-theme="dark"],:root[data-theme="blackout"]{--topo:color-mix(in srgb, var(--text) 30%, transparent);--topo-img:url(/img/topo-light.svg)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--topo:color-mix(in srgb, var(--text) 30%, transparent);--topo-img:url(/img/topo-light.svg)}}
@supports (color:oklch(from red l c h)){:root{--page:oklch(from var(--bg) calc(l - .035) calc(c + .03) h)}}
main{background:var(--page)}
main:has(#view-quests.active)::before{opacity:1}
.view>.list-col,#view-char .char-panel,.view>.opt-page,.view>.admin-wrap{margin:14px;border:1px solid var(--line-strong);border-radius:2px;background:linear-gradient(var(--paper-veil), var(--paper-veil)) local, var(--topo-img) 0 0/700px local, var(--panel);position:relative;z-index:1}
.sheet::before{opacity:.07;background-image:var(--topo-img)}
@media (max-width:860px){.view>.list-col,#view-char .char-panel,.view>.opt-page,.view>.admin-wrap{margin:8px}}
/* Faction art (approved 2026-10-14): behind the description on each card back, under a dark wash so the text reads */
.fx-card .fx-back{position:absolute}
.fx-art{position:absolute;inset:0;background:right center/cover no-repeat;z-index:0}   /* most of the bots stand on the right of the pictures */
.fx-card .fx-back::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(20,20,23,.82) 0%, rgba(20,20,23,.66) 55%, rgba(20,20,23,.5) 100%)}
.fx-card .fx-back>b,.fx-card .fx-back>.fx-back-text{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* The Season card on the Atlas: the four faction pictures in turn, each panning slowly from its left edge to its right
   (each slide is wider than the frame so it always fills it), crossfading every 6 s */
.atlas-card.season-card .wc-media.sn-show,.sn-hero{position:relative;overflow:hidden;display:block;background:#1B1B1E;background-image:none}
.sn-slide{position:absolute;inset:0;opacity:0;animation:snFade 24s linear infinite;animation-delay:calc(var(--i) * 6s - 1s)}
.sn-slide:first-child{opacity:1}
.sn-slide i{position:absolute;top:0;bottom:0;left:0;width:135%;background:right center/cover no-repeat;animation:snPan 24s linear infinite;animation-delay:calc(var(--i) * 6s - 1s)}
@keyframes snFade{0%{opacity:0}4%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
@keyframes snPan{0%{transform:translateX(-11%)}30%{transform:translateX(-25.9%)}100%{transform:translateX(-25.9%)}}   /* from the middle to the right edge, where the bots are */
/* the slideshow keeps running even with Reduce Motion on (Warren's call: a slow pan and crossfade, nothing flashes); the global
   reduced-motion rule (animation:none!important) is beaten by the more specific rule at the end of this file */
/* The Season card's picture: the faction slides under a dark veil and a dot-matrix grid, with the Season's name huge on top,
   one word per line (sized from the frame, so it fits on a phone and on a desktop) */
.atlas-card.season-card .wc-media.sn-show,.sn-hero{container-type:size}
.sn-veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,14,16,.55) 0%, rgba(14,14,16,.42) 50%, rgba(14,14,16,.62) 100%)}
.sn-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(241,234,220,.34) 1.1px, transparent 1.6px);background-size:7px 7px;-webkit-mask:radial-gradient(ellipse 62% 70% at 50% 50%, #000 35%, transparent 100%);mask:radial-gradient(ellipse 62% 70% at 50% 50%, #000 35%, transparent 100%)}
.sn-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--tall);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:.9;color:#F1EADC;font-size:min(38cqh, 24cqw);text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 28px rgba(0,0,0,.45);pointer-events:none}
.sn-w{display:block;white-space:nowrap;line-height:.9}
/* Faction card fronts: the same dot matrix behind the logo and name, fading out at the edges */
.fx-card .fx-front{position:absolute}
.fx-card .fx-front::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb, var(--fc) 13%, transparent) 1px, transparent 1.5px);background-size:7px 7px;-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);mask:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%)}
.fx-card .fx-front>*{position:relative}
/* Atlas route cards (every list, search results and the featured block): the picture wears a dark veil and the dot matrix,
   with the route's name over it in the tall caps face; the height tag sits top left, the outline top right, the credit at the foot */
.atlas-card .ac-media,.atlas-card .ac-thumb{position:relative;overflow:hidden}
.atlas-card .ac-thumb{height:130px}.atlas-card.feat-mid .ac-thumb{height:110px}
.ac-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(14,14,16,.30) 0%, rgba(14,14,16,.42) 45%, rgba(14,14,16,.80) 100%)}
.ac-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(241,234,220,.07) 1px, transparent 1.5px);background-size:6px 6px;-webkit-mask:linear-gradient(180deg, transparent 0%, #000 55%);mask:linear-gradient(180deg, transparent 0%, #000 55%)}
.atlas-card .ac-title.ac-otitle{position:absolute;left:12px;right:12px;bottom:20px;margin:0;z-index:1;font-family:var(--tall);font-weight:700;font-stretch:normal;text-transform:uppercase;letter-spacing:.02em;line-height:.95;font-size:21px;color:#F1EADC;text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 14px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.atlas-card.feat-big .ac-title.ac-otitle{font-size:clamp(30px, 3.4vw, 50px);left:18px;right:18px;bottom:22px}
.atlas-card .ac-inset{top:8px;bottom:auto;z-index:2;width:72px;height:50px}.atlas-card.feat-big .ac-inset{width:120px;height:84px}
.atlas-card .ac-credit{left:12px;right:12px;bottom:3px;max-width:none;z-index:1;font-size:9px;opacity:.75}
.atlas-card .ac-hi{z-index:3}
/* Collection and range cards: the same dot matrix and title face */
.col-card .col-shade{background:radial-gradient(rgba(241,234,220,.07) 1px, transparent 1.5px) 0 0/6px 6px, linear-gradient(180deg, rgba(14,14,16,.25) 0%, rgba(14,14,16,.78) 100%)}
.col-card:not(:has(img)) .col-shade{background:radial-gradient(rgba(241,234,220,.07) 1px, transparent 1.5px) 0 0/6px 6px, linear-gradient(135deg, var(--accent), #7a2c08)}
.col-card .col-text b{font-family:var(--tall);font-weight:700;font-stretch:normal;text-transform:uppercase;letter-spacing:.02em;line-height:.95;font-size:21px}
/* the drawn outline (no photo) inside its own picture frame: it fills the frame, and the veil darkens only toward the foot so
   the route line stays readable */
.atlas-card .ac-media.ac-pic .ac-thumb{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0}
.atlas-card .ac-media.ac-pic .ac-veil{background:linear-gradient(180deg, transparent 30%, rgba(14,14,16,.78) 100%)}
.atlas-card .ac-media.ac-pic .ac-dots{-webkit-mask:linear-gradient(180deg, transparent 35%, #000 75%);mask:linear-gradient(180deg, transparent 35%, #000 75%)}
/* The Season post above the search bar: full width, its picture a wide banner (the card keeps its night look and title) */
.atlas-post:empty{display:none}
.atlas-post{margin:4px 0 16px}
.atlas-post .season-card{display:flex;flex-direction:column;width:100%;text-align:left}
.atlas-post .season-card .ac-media{flex:none;height:clamp(210px, 30vw, 380px);min-height:0}
/* the Season page: the welcome paragraphs read as the page's opening, and a way back when the Atlas | Season switch is hidden */
.sn-welcome p{margin:0 0 10px}.sn-welcome p:last-child{margin-bottom:0}
.season-page .back-pill{margin-bottom:10px}
/* the Season post: the big featured card on a wide screen, above the search bar on a phone (one or the other shows) */
@media (min-width:861px){.atlas-post{display:none}}
@media (max-width:860px){.feat-grid > .season-card{display:none}}
/* Pinned bars (Atlas and Inventory): the Atlas | Season switch row and the Inventory | Quest Loadout bar stay at the top of their
   panel, the Atlas search bar sticks right under its header (--ah, measured in atlas.js); what scrolls under a pinned bar fades
   out at its edge, and the foot of the panel fades too. The pinned bars cover the panel's top padding (--pt) so nothing shows above them. */
#atlasList,#invList{--pt:24px}
@media (max-width:860px){#atlasList,#invList{--pt:18px}}
#atlasList > .atlas-head,#invList > .page-bar{position:sticky;top:calc(-1 * var(--pt));z-index:19;background:var(--panel);margin-top:calc(-1 * var(--pt));padding-top:var(--pt);padding-bottom:8px}
#invList > .page-bar{z-index:20;margin-bottom:8px}
#atlasList > .atlas-searchbar{position:sticky;top:calc(var(--ah, 56px) - var(--pt));z-index:20;background:var(--panel);margin-top:8px;padding:8px 0}
#atlasList > .atlas-head::after,#atlasList > .atlas-searchbar::after,#invList > .page-bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
/* the foot fade sits at the very bottom of the panel: the panel's bottom padding moves into the fade itself (a sticky element can't enter
   its parent's padding, which left a hard edge with content scrolling on below it) */
#atlasList,#invList,#view-atlas #atlasList,#view-inv #invList{padding-bottom:0}   /* the second pair beats the phone rule #view-atlas #atlasList{padding:18px 16px 32px} */
#atlasList::after,#invList::after{content:"";display:block;position:sticky;bottom:0;height:12px;margin-top:0;pointer-events:none;z-index:18;background:linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 85%)}
/* sideways rows of Atlas cards fade at the edge the cards slide out of (classes set by RowFade in atlas.js) */
.atlas-row.fade-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2px), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 2px), transparent)}
.atlas-row.fade-l{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2px);mask-image:linear-gradient(90deg, transparent, #000 2px)}
.atlas-row.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2px, #000 calc(100% - 2px), transparent);mask-image:linear-gradient(90deg, transparent, #000 2px, #000 calc(100% - 2px), transparent)}
/* Faction cards: the 2 by 2 grid has a fixed height and fr tracks; a tap sets the tracks to 1fr 0fr (season.js), so the chosen
   card grows to fill the grid while the other three shrink to nothing, then its back fades in. No flip, no overlay. */
.fx-flips{position:relative;perspective:none;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:calc(460px + 12px);transition:grid-template-columns .4s cubic-bezier(.3,.7,.2,1), grid-template-rows .4s cubic-bezier(.3,.7,.2,1), gap .4s cubic-bezier(.3,.7,.2,1)}
.fx-flips .fx-card{min-height:0;min-width:0;overflow:hidden}
.fx-flips.has-open .fx-card:not(.open){pointer-events:none}
.fx-flip{transform:none !important;transition:none;transform-style:flat}
.fx-card .fx-back{transform:none;visibility:hidden;pointer-events:none}
.fx-card.open .fx-front{visibility:hidden}
.fx-card.open .fx-back{visibility:visible;pointer-events:auto;padding:22px 24px}
.fx-card.open .fx-back-text{min-width:28ch}
.fx-card.open .fx-back>b{font-size:16px}
.fx-card.open .fx-back-text{font-size:15px;line-height:1.55;max-width:46ch}
@media (max-width:600px){.fx-flips{height:calc(420px + 12px)}.fx-card.open .fx-back{padding:16px}.fx-card.open .fx-back-text{font-size:13.5px}}

.fx-card.f-gorp_corp{--fc:#FF6A13}.fx-card.f-decaf{--fc:#9AA1AB}.fx-card.f-coven{--fc:#B678D8}.fx-card.f-gorpeus{--fc:#E0262F}   /* each faction card's dots and name in its own colour */
/* Quest page: the page bar (back, quest picker, member picker) stays pinned at the top, the Prereqs / Main / Side / Contracts tabs
   lock just under it once they reach it (--pbh, measured in app.js), and what scrolls under them and the panel's foot fade out,
   as on the Atlas and Inventory pages */
#questList{--pt:24px}
@media (max-width:860px){#questList{--pt:18px}}
#questList,#view-quests #questList,#view-quests.q-home #questList{padding-bottom:0}
#questList > .page-bar{position:sticky;top:calc(-1 * var(--pt));z-index:20;background:var(--panel);margin-top:calc(-1 * var(--pt));padding-top:var(--pt);padding-bottom:8px;margin-bottom:8px}
#questList > .quest-tabs{position:sticky;top:calc(var(--pbh, 60px) - var(--pt));z-index:19;background:var(--panel);padding:6px 0}
#questList > .page-bar::after,#questList > .quest-tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
#questList::after{content:"";display:block;position:sticky;bottom:0;height:12px;pointer-events:none;z-index:18;background:linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 85%)}
/* Under Reduce Motion the two gentle motions still run: the Season slideshow and the faction card grow (beats the global
   *{animation:none!important;transition:none!important} by specificity) */
@media (prefers-reduced-motion:reduce){
  .sn-show .sn-slide,.sn-hero .sn-slide{animation:snFade 24s linear infinite!important;animation-delay:calc(var(--i) * 6s - 1s)!important}
  .sn-show .sn-slide i,.sn-hero .sn-slide i{animation:snPan 24s linear infinite!important;animation-delay:calc(var(--i) * 6s - 1s)!important}
  .season-page .fx-grid.fx-flips{transition:grid-template-columns .4s cubic-bezier(.3,.7,.2,1), grid-template-rows .4s cubic-bezier(.3,.7,.2,1), gap .4s cubic-bezier(.3,.7,.2,1)!important}
}
/* Season page: the title, dates, welcome and Quests sit in one night panel, like the faction cards */
.sn-intro{background:#1B1B1E;color:#F1EADC;border:1px solid #3C3C43;border-radius:2px;padding:20px 22px;--text:#F1EADC;--muted:#B8B1A4;--line:#3C3C43;--line-strong:#4A4A52}
.sn-intro .sn-now h2{color:#F1EADC}.sn-intro .muted{color:#B8B1A4}
.sn-intro .sn-story{border-color:#4A4A52}
@media (max-width:600px){.sn-intro{padding:16px}}
.fx-card .fx-tile{border-bottom-color:var(--fc)}   /* each card's foot bar in its faction's colour (the night look had turned it grey) */
.season-page{padding-top:18px}   /* clear of the pinned header's fade, so the intro panel's top edge stays crisp */
.sn-bean .bean-ico{width:20px;height:20px;vertical-align:-3px;margin-left:4px}   /* the bean beside the Beans heading */
.sn-intro + .sn-sec{margin-top:18px}
/* the Season page's header: the same picture and huge name as the Season post, across the top of the night panel */
.sn-intro{padding-top:0;overflow:hidden}
.sn-hero{height:clamp(200px, 24vw, 300px);margin:0 -22px 18px}
@media (max-width:600px){.sn-hero{margin:0 -16px 14px;height:200px}}
.sn-welcome .ital-note{font-family:var(--ital);font-style:italic;font-size:1.06em}
/* the open card: its art grows with it, and the name (with the faction's icon to its left) and description fade in once it has
   finished growing (the grid takes .45s); on closing they vanish at once. Kept under Reduce Motion (a plain fade, no movement). */
.fx-back-name{display:flex;align-items:center;gap:10px}
.fx-back-logo{width:30px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.fx-card.open .fx-back-logo{width:40px;height:40px}
.fx-card .fx-back>.fx-back-name,.fx-card .fx-back>.fx-back-text{opacity:0}
.fx-card.open .fx-back>.fx-back-name,.fx-card.open .fx-back>.fx-back-text{opacity:1;transition:opacity .35s ease .45s}
@media (prefers-reduced-motion:reduce){.season-page .fx-card.open .fx-back>.fx-back-name,.season-page .fx-card.open .fx-back>.fx-back-text{transition:opacity .35s ease .45s!important}}
/* Inventory: the category chips stick just under the pinned page bar (--pbh, measured in app.js), with the usual fade below them.
   The loadout sheet clips with overflow:clip (overflow:hidden would make it the scroll box and stop the chips sticking). */
#invList .inv-sheet.sheet{overflow:clip}
#invList .cat-chips{position:sticky;top:calc(var(--pbh, 0px) - var(--pt) + 8px);z-index:17;background:var(--panel);margin-left:-2px;margin-right:-2px;padding:8px 2px}
#invList .cat-chips::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
/* the map collar's ticks are mirrored a screen-width away; clip them to the collar so they never widen the page (the photo-less
   route hero had overflow:visible, which made the Atlas route page scroll sideways) */
.collar{overflow:clip}
/* the quest loadout sits straight on the Inventory panel: no second box around it */
.inv-sheet{border:0;padding:0;background:transparent}
/* Toggle buttons (Atlas | Season, Inventory | Quest Loadout, Friends | Clubs, the other two-way switches): the Loadout tag's look,
   stencil caps, letter-spaced, a thin outline */
.seg .btn{font-family:var(--stencil);font-weight:400;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;border-width:1px;box-shadow:none}
/* Atlas route page: its boxes (hero, map card or column, info panel) are paper like the other tabs' panels: the strong outline
   and ghost contours (the panel colour washed over the lines); the tab strip and panels inside let the contours show through */
#atlasDetail .rd-hero,#atlasDetail .rd-info,#atlasDetail .rd-mapcard,#atlasDetail .rd-mapcol{border:1px solid var(--line-strong);border-radius:2px;background:linear-gradient(var(--paper-veil), var(--paper-veil)), var(--topo-img) 0 0/700px, var(--panel)}
#atlasDetail .rd-mapcol .rd-mapcard{border:0;background:transparent}
#atlasDetail .rd-info .rd-panel{background:transparent}
#atlasDetail .rd-info .rd-tabs{background:var(--panel);z-index:5}   /* it sticks while the panel scrolls, so it needs a solid back */
#atlasDetail .rd-info .rd-tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
/* the route page's header photo wears the same faint dot matrix as the Atlas cards, densest toward the foot */
/* below 1000 px the info box dissolves (display:contents), so its paper back never draws: the tab strip and the panel under it
   carry the paper and the strong outline themselves */
@media (max-width:1000px){
  #atlasDetail .rd-layout .rd-info > .rd-panel{background:linear-gradient(var(--paper-veil), var(--paper-veil)), var(--topo-img) 0 0/700px, var(--panel);border-color:var(--line-strong)}
  #atlasDetail .rd-layout .rd-info > .rd-tabs{border-color:var(--line-strong)}
}
/* The main quest sheet (mq2): one column on phones, in reading order (kicker with the controls at its end; title; place; goal;
   Simulate / Start; one readout with every number; the Atlas match or track note; gear), two columns on wide screens (title,
   goal and buttons beside the readout). Nothing is held off to the right any more, so the title gets the full width. */
.main-quest.mq2{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.main-quest.mq2 > div:first-child{padding-right:0;margin-bottom:0}
.mq2 > .mq-head,.mq2 > .mq-notrack,.mq2 > .mq-mid,.mq2 > .mq-steps{grid-column:1/-1}
.mq2 .mq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mq2 .mq-head .mq-kicker{flex:1;min-width:0;margin:6px 0 0}
.mq2 .mq-kicker > span{white-space:nowrap}
.mq2 .mq-head .mq-ready{position:static;flex:none}
.main-quest.mq2 h2.mq-title{font-size:clamp(28px,7.6vw,40px);line-height:.98;margin:12px 0 4px;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.mq2 .mq-goal{margin:6px 0 14px;line-height:1.45}
.main-quest.mq2 .mq-sim{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;justify-content:stretch}
.mq2 .mq-sim .btn{justify-content:center;width:100%}
.main-quest.mq2 .mq-readout{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.mq2 .mq-readout > div:nth-child(3n){border-right:0}
.mq2 .mq-readout > div:nth-child(n+4){border-top:1px solid var(--line)}
.mq2 .mq-match{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mq2 .mq-match b{font-weight:600;color:var(--text)}
.mq2 .mq-match .btn{font-family:var(--stencil);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;padding:4px 10px;min-height:0}
@media (min-width:861px){
  .main-quest.mq2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:30px}
  .main-quest.mq2 .mq-readout{margin-top:14px;align-self:start}
  .main-quest.mq2 h2.mq-title{font-size:clamp(30px,3vw,44px)}
}
/* the collar sits on the card's own edge: an old rule (.main-quest > div:first-child{grid-column:1/-1}) gave it a grid area, which
   for an absolutely placed box moves it in to the content edge, so its side ticks showed as stray dashes beside the text */
.main-quest > div.collar.collar{grid-column:auto;grid-row:auto}   /* outranks .main-quest > div:first-child */
.main-quest.mq2 .mq-readout{grid-column:auto}
@media (min-width:861px){ .main-quest.mq2 > .mq-left{grid-column:1} .main-quest.mq2 > .mq-readout{grid-column:2;margin-top:12px} }
/* the open faction card: under the lore, what its contracts ask for, then its collectibles as small GORPbot thumbnails; they
   fade in with the name and lore once the card has grown, and stay hidden on the small closed card */
.fx-card .fx-back>.fx-back-style,.fx-card .fx-back>.fx-back-drops{position:relative;z-index:1;opacity:0;display:none}
.fx-card.open .fx-back>.fx-back-style,.fx-card.open .fx-back>.fx-back-drops{display:flex;opacity:1;transition:opacity .35s ease .45s}
@media (prefers-reduced-motion:reduce){.season-page .fx-card.open .fx-back>.fx-back-style,.season-page .fx-card.open .fx-back>.fx-back-drops{transition:opacity .35s ease .45s!important}}
.fx-back-style{display:block;margin:0;font-size:13px;line-height:1.45;color:#E8E1D3;text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:46ch}
.fx-card.open .fx-back>.fx-back-style{display:block}
.fx-back-style .tag,.fx-back-drops .tag{color:var(--fc);border-color:var(--fc);margin-right:6px;font-size:10px}
.fx-back-drops{align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.fx-back-drops .ct-thumb{width:44px;height:44px;border-radius:2px;border:1px solid color-mix(in srgb, var(--fc) 60%, transparent);background-color:rgba(20,20,23,.7);background-size:cover;background-position:center}
.fx-back-drops .small{color:#B8B1A4}
@media (max-width:600px){.fx-back-style{font-size:12px}.fx-back-drops .ct-thumb{width:36px;height:36px}}
/* quest sidebar: the ⋯ menu at the top right beside the title; Save then Complete at the bottom right, Show on map at the left */
.d-head{position:relative}
.d-head > .d-more{position:absolute;top:0;right:0;margin:0;z-index:3}
.d-head:has(> .d-more) > :not(.d-more){padding-right:48px}
#qActions.qa-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#qActions .qa-end{display:flex;gap:8px;margin-left:auto}
.note-foot:not(:has(button)){justify-content:flex-start}
/* the page bar's pickers (quest, person) and back buttons on Map, Quests, Journal and Inventory wear the toggles' look: stencil
   caps, letter-spaced, a thin outline, no drop shadow (the picked value stays in its own face so names read naturally) */
.page-bar .dd-btn,.page-bar .pb-back,.back-pill,.detail-col .back{font-family:var(--stencil);font-weight:400;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;border-width:1px!important;box-shadow:none!important;border-radius:2px}
.page-bar .dd-btn .dd-val b{font-weight:400}
@media (max-width:600px){.page-bar .dd-btn{font-size:11.5px;letter-spacing:.04em;padding-left:10px;padding-right:8px}.page-bar .qdd{flex:1;min-width:0}}   /* phones: room for more of the quest's name */
/* Header and footer, field-terminal pass: a status strip row above the header (mono caps: version, sync + clock, Season, unit),
   tabs as ruled cells with stencil labels (the current one a lighter cell with a corner bracket and the toggles' segmented bar),
   square tool cells, a hachure rule under the band; on phones the strip is shorter and the bottom tab bar is ruled stencil cells */
#app{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"strip strip strip" "brand tabs stats" "main main main"}
:root[data-palette] #app::before{grid-area:1/1/3/-1}
.hd-strip{grid-area:strip;position:relative;z-index:1;display:flex;align-items:center;gap:20px;height:24px;padding:0 20px;border-bottom:1px solid var(--hd-line);color:var(--hd-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;align-self:stretch}
.hd-strip:empty{display:none}
.hd-strip .sync{display:inline-flex;align-items:center;gap:6px;color:var(--hd-accent)}.hd-strip .sync i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hd-strip .sync-t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.hd-strip .hs-r{margin-left:auto}
.hud .tabs{align-self:stretch;align-items:stretch;gap:0}
.hud .tab{font-family:var(--stencil);font-weight:400;font-stretch:normal;letter-spacing:.14em;border-left:1px solid var(--hd-line);border-radius:0;padding:0 20px}
.hud .tab:last-child{border-right:1px solid var(--hd-line)}
.hud .tab[aria-selected="true"]{background:var(--hd-panel)}
.hud .tab::after{left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--hd-accent) 0 8px,transparent 8px 11px)}
.hud .tab[aria-selected="true"]::before{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-left:1px solid var(--hd-accent);border-top:1px solid var(--hd-accent)}
.hud .brand{border-right:1px solid var(--hd-line);padding-right:22px}
.hud .stats{align-self:stretch;display:flex;align-items:stretch}
.hud .party,.hud .party-btns{display:flex;align-items:stretch;gap:0;height:100%}
.hud .party-btns .pm{width:52px;height:auto;min-height:44px;border:0;border-left:1px solid var(--hd-line);border-radius:0;background:transparent;box-shadow:none}
.hud .party-btns .pm:hover{background:var(--hd-panel)}
.hud .pm-badge{border-radius:1px}
.hud .guest-head{align-items:center;padding-right:16px}
:root[data-palette] main{border-top:0;box-shadow:inset 0 6px 0 -1px transparent}
main::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;pointer-events:none;background:var(--hd-bg) repeating-linear-gradient(90deg,var(--hd-line-strong) 0 1px,transparent 1px 5px)}
@media (max-width:860px){
  #app{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"strip strip" "brand stats" "main main" "tabs tabs"}
  :root[data-palette] #app::before{grid-area:1/1/3/-1}
  :root[data-palette] #app::after{grid-row:4}
  .hd-strip{height:20px;padding:0 12px;gap:12px;font-size:9px}
  .hd-strip > span:first-child,.hd-strip .hs-season{display:none}
  .hud .tabs{border-top:1px solid var(--hd-line-strong);background:var(--hd-bg);align-items:stretch}
  .hud .tab{flex:1;flex-direction:column;justify-content:center;gap:4px;padding:9px 2px 11px;font-size:9.5px;letter-spacing:.1em;border-left:1px solid var(--hd-line);border-right:0}
  .hud .tab:first-child{border-left:0}.hud .tab:last-child{border-right:0}
  .hud .tab::after{top:-1px;bottom:auto;left:0;right:0}
  .hud .tab[aria-selected="true"]::before{display:none}
  .hud .brand{border-right:0}
  .hud .party-btns .pm{width:44px}
}
/* Faction card back (open): the dark veil goes almost opaque toward the foot so the contract types and collectibles read, with
   the dot matrix over the picture; Contract Types as a short list; one collectible slot per contract template */
.fx-card .fx-back::after{background:radial-gradient(rgba(241,234,220,.10) 1px, transparent 1.5px) 0 0/6px 6px, linear-gradient(180deg, rgba(20,20,23,.62) 0%, rgba(20,20,23,.74) 38%, rgba(20,20,23,.93) 70%, rgba(20,20,23,.98) 100%)}
.fx-card.open .fx-back{overflow-y:auto;scrollbar-width:thin}
.fx-card .fx-back>.fx-back-types{position:relative;z-index:1;display:none;opacity:0}
.fx-card.open .fx-back>.fx-back-types{display:block;opacity:1;transition:opacity .35s ease .45s}
@media (prefers-reduced-motion:reduce){.season-page .fx-card.open .fx-back>.fx-back-types{transition:opacity .35s ease .45s!important}}
.fx-back-types .tag{color:var(--fc);border-color:var(--fc);font-size:10px}
.fx-back-types ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.fx-back-types li{font-size:13px;line-height:1.4;color:#E8E1D3}
.fx-back-types li b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#F1EADC;margin-right:4px}
.fx-back-drops{margin-top:4px}
.fx-slot{display:inline-grid;place-items:center;font:500 16px var(--mono);color:color-mix(in srgb, var(--fc) 75%, #F1EADC);border-style:dashed!important;background:rgba(20,20,23,.6)!important}
@media (max-width:600px){.fx-back-types li{font-size:12px}}
/* fades: the featured row fades at its edges like the other sideways rows; the fades under pinned bars appear only once the
   panel has scrolled (at the top nothing sits under them, so the Season card's top stays crisp) */
.feat-mids.fade-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2px), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 2px), transparent)}
.feat-mids.fade-l{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2px);mask-image:linear-gradient(90deg, transparent, #000 2px)}
.feat-mids.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2px, #000 calc(100% - 2px), transparent);mask-image:linear-gradient(90deg, transparent, #000 2px, #000 calc(100% - 2px), transparent)}
#atlasList:not(.scrolled) > .atlas-head::after,#atlasList:not(.scrolled) > .atlas-searchbar::after,#invList:not(.scrolled) > .page-bar::after,#invList:not(.scrolled) .cat-chips::after,#questList:not(.scrolled) > .page-bar::after,#questList:not(.scrolled) > .quest-tabs::after{opacity:0}
/* inventory: the category chips sit flush under the bar (there was an 8 px gap where items showed through) */
#invList .cat-chips{top:calc(var(--pbh, 0px) - var(--pt) - 1px);margin-top:0}
#invList > .page-bar{margin-bottom:0}
/* club page: wide tables scroll inside their own box instead of widening the page */
.club-page,.club-body,.club-body > *,.club-body section,#clubsPanel > *{min-width:0;max-width:100%}
.rb-wrap{max-width:100%}
/* quest home: the list keeps the panel's side margins (width:100% pushed it past the screen edge) */
#view-quests.q-home #questList{width:auto}
#clubsPanel{overflow-x:hidden}   /* the readiness board scrolls sideways inside its own box; the club page itself never does */
/* the header's 6 px hachure rule sits over the top of main: the panels start below it, so the gap above them matches the gap
   below (and at the sides) */
.view>.list-col,#view-char .char-panel,.view>.opt-page,.view>.admin-wrap{margin-top:20px}
@media (max-width:860px){.view>.list-col,#view-char .char-panel,.view>.opt-page,.view>.admin-wrap{margin-top:14px}}
/* Faction card reveals (season.js reveal()): the card's texts stay hidden until it has grown, then each faction plays its own:
   DECAF lifts redaction bars, GORP CORP prints with a block cursor, the Coven rises from steam with marigold specks, Gorpeus
   decrypts with a red flicker. They run with Reduce Motion on too (Warren's call); nothing flashes. */
.fx-card.open .fx-back>.fx-back-name,.fx-card.open .fx-back>.fx-back-text,.fx-card.open .fx-back>.fx-back-types,.fx-card.open .fx-back>.fx-back-drops{opacity:0;transition:none!important}
.fx-card.open.fx-revealed .fx-back>.fx-back-name,.fx-card.open.fx-revealed .fx-back>.fx-back-text,.fx-card.open.fx-revealed .fx-back>.fx-back-types{opacity:1}
.fx-card.open.fx-revealed .fx-back>.fx-back-drops{opacity:1;transition:opacity .3s ease .25s!important}
.fx-back .rd{background:#0B0B0D;color:transparent;box-shadow:0 0 0 1px #0B0B0D;border-radius:1px;transition:background .14s ease, color .14s ease, box-shadow .14s ease}
.fx-back .rd.rd-off{background:transparent;color:inherit;box-shadow:none}
.fx-back .pr-cur{display:inline-block;width:.55em;height:1em;vertical-align:-.15em;background:var(--fc);margin-left:1px;animation:prBlink .5s steps(1) infinite!important}
@keyframes prBlink{50%{opacity:0}}
.fx-back .st{display:inline-block;opacity:0;filter:blur(4px);transform:translateY(7px);transition:opacity .45s ease, filter .45s ease, transform .45s ease!important}
.fx-back .st.st-on{opacity:1;filter:none;transform:none}
.fx-spark{position:absolute;bottom:8%;width:4px;height:4px;border-radius:50%;background:#F2B23E;box-shadow:0 0 6px #F2B23E;z-index:2;opacity:0;pointer-events:none;animation:fxSpark 1.8s ease-out forwards!important}
@keyframes fxSpark{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translate(10px,-140px)}}
.fx-card.fx-glitch .fx-back-text,.fx-card.fx-glitch .fx-back-types{animation:fxJitter 1.15s steps(14) 1!important;text-shadow:1px 0 0 rgba(224,38,47,.85), -1px 0 0 rgba(224,38,47,.45)}
@keyframes fxJitter{0%,100%{transform:none}10%{transform:translateX(2px)}22%{transform:translateX(-2px)}34%{transform:translateX(1px)}46%{transform:none}70%{transform:translateX(-1px)}}
/* Map tab: the map and its side list are panels like every other tab's: inset from the edges (below the header's tick rule),
   the strong outline, the list on paper with ghost contours */
#view-map{box-sizing:border-box;padding:20px 14px 14px;gap:14px}
#view-map > .map-wrap{border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;position:relative;min-height:0}
#view-map > .side-panel{border:1px solid var(--line-strong)!important;border-radius:2px;background:linear-gradient(var(--paper-veil), var(--paper-veil)), var(--topo-img) 0 0/700px, var(--panel);min-height:0;overflow:hidden}
@media (max-width:860px){#view-map{padding:14px 8px 8px;gap:8px}}
/* Quest home (Quests | Collections toggle, then Upcoming / Ongoing / Past / All) and the Journal: the same pinned bars and fades
   as the other tabs */
#journalList{--pt:24px}
@media (max-width:860px){#journalList{--pt:18px}}
#questList > .qh-head,#journalList > .page-bar{position:sticky;top:calc(-1 * var(--pt));z-index:20;background:var(--panel);margin-top:calc(-1 * var(--pt));padding-top:var(--pt);padding-bottom:8px}
#questList > .qh-head + .tabbar{position:sticky;top:calc(var(--qhh, 56px) - var(--pt));z-index:19;background:var(--panel);padding:6px 0;margin-top:0}
#questList > .qh-head::after,#questList > .qh-head + .tabbar::after,#journalList > .page-bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
#questList:not(.scrolled) > .qh-head::after,#questList:not(.scrolled) > .qh-head + .tabbar::after,#journalList:not(.scrolled) > .page-bar::after{opacity:0}
#journalList,#view-journal #journalList{padding-bottom:0}
#journalList::after{content:"";display:block;position:sticky;bottom:0;height:12px;pointer-events:none;z-index:18;background:linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 85%)}
/* the page bars' pickers are the toggles' height */
.page-bar .dd-btn{height:36px;min-height:0;padding-top:0;padding-bottom:0;box-sizing:border-box}
.page-bar .pb-back{height:36px;min-height:0;box-sizing:border-box}
@media (max-width:860px){#journalList > .page-bar{top:0;margin-top:0;padding-top:10px}}   /* on phones the whole Journal view scrolls: the bar sticks with a little room above it */
/* pinned bars cover the panel's side padding too: card shadows and edges in the padding no longer show beside the bars or
   through their fades (the columns never scroll sideways, so the wider paint is clipped at the panel's edge) */
#atlasList,#invList,#questList,#journalList{overflow-x:hidden}
#atlasList > .atlas-head,#atlasList > .atlas-searchbar,#invList > .page-bar,#invList .cat-chips,#questList > .page-bar,#questList > .quest-tabs,#questList > .qh-head,#questList > .qh-head + .tabbar,#journalList > .page-bar{box-shadow:-40px 0 0 var(--panel), 40px 0 0 var(--panel)}
#atlasList > .atlas-head::after,#atlasList > .atlas-searchbar::after,#invList > .page-bar::after,#invList .cat-chips::after,#questList > .page-bar::after,#questList > .quest-tabs::after,#questList > .qh-head::after,#questList > .qh-head + .tabbar::after,#journalList > .page-bar::after{left:-40px;right:-40px}
/* Map tab: its side list fades at the foot, and at the top once it has scrolled, like the other tabs' panels */
#stopPanel{padding-bottom:0;overflow-x:hidden}
#stopPanel::before{content:"";display:block;position:sticky;top:-20px;height:12px;margin:-20px -20px 8px;z-index:5;pointer-events:none;background:linear-gradient(var(--panel), color-mix(in srgb, var(--panel) 0%, transparent));opacity:0;transition:opacity .15s ease}
#stopPanel.scrolled::before{opacity:1}
#stopPanel::after{content:"";display:block;position:sticky;bottom:0;height:12px;margin:0 -20px;z-index:5;pointer-events:none;background:linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 85%)}
@media (max-width:860px){#stopPanel::before{top:-16px;margin:-16px -16px 8px}#stopPanel::after{margin:0 -16px}}
/* the current tab is clearly brighter than the band (header and phone footer alike): a tenth of the header's text colour mixed in */
.hud .tab[aria-selected="true"]{background:color-mix(in srgb, var(--hd-text) 11%, var(--hd-bg))}
.hud .tab:not([aria-selected="true"]):hover{background:color-mix(in srgb, var(--hd-text) 5%, var(--hd-bg))}
/* a tighter gap under the Atlas | Season switch (about 12 px to the search bar, the Season post or the Season page) */
#atlasList > .atlas-head{padding-bottom:4px}
#atlasList > .atlas-searchbar{margin-top:0;padding-top:4px}
#atlasList > .atlas-post{margin-top:4px}
#atlasList > .atlas-season{margin-top:0}
#atlasList .season-page{padding-top:8px}
#atlasList > .atlas-head > div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px}   /* hug the switch: as an inline box it sat on a text line with ~18 px of empty line below */
#atlasList > .atlas-head .atlas-admin:empty{display:none}
#atlasList > .atlas-head .atlas-views{margin-bottom:0}   /* the shared .inv-views 18 px bottom margin made the gap under the switch */
#questList > .quest-tabs::after,#questList > .qh-head + .tabbar::after,#invList .cat-chips::after{left:0;right:0}   /* these bars scroll sideways: a fade wider than them became 40 px of drag */
/* the Atlas's route and range count, at the right end of the Atlas | Season row; hidden on the Season page */
#atlasList > .atlas-head{align-items:center}
.atlas-head .ad-count{margin-left:auto;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.atlas-head .ad-count:empty,#atlasList.season-on .ad-count{display:none}
@media (max-width:420px){.atlas-head .ad-count{font-size:9.5px;letter-spacing:.03em}}
.fx-card.f-decaf .fx-art{background-position:center}   /* DECAF's robot stands in the middle of its picture */
:root[data-palette="slate"],:root[data-palette="ember"]{--ice:var(--accent)}   /* gear cells and ready ticks follow the palette's colour */
/* each contract type on an open faction card is a small order box with corner brackets, like the quest page's contracts */
.fx-back-types ul{gap:6px}
.fx-back-types li.fx-ct{position:relative;padding:8px 14px 8px 16px;border:1px solid rgba(241,234,220,.22);border-left:4px solid var(--fc);background:rgba(20,20,23,.55)}
.fx-ct .corner{position:absolute;width:8px;height:8px;border:1.5px solid #F1EADC;opacity:.85;pointer-events:none}
.fx-ct .corner.tl{top:3px;left:3px;border-right:0;border-bottom:0}.fx-ct .corner.tr{top:3px;right:3px;border-left:0;border-bottom:0}.fx-ct .corner.bl{bottom:3px;left:3px;border-right:0;border-top:0}.fx-ct .corner.br{bottom:3px;right:3px;border-left:0;border-top:0}
/* Atlas route page: the back button sits on the contour page, so it gets the panel's solid back */
#atlasDetail .back-pill{background:var(--panel);position:relative;z-index:2}
/* The main quest card in the dark variant of the palette (the header's tokens), in light and dark themes alike */
.main-quest.mq2{--bg:var(--hd-bg);--panel:var(--hd-bg);--panel-2:var(--hd-panel);--text:var(--hd-text);--muted:var(--hd-muted);--line:var(--hd-line);--line-strong:var(--hd-line-strong);--accent:var(--hd-accent);--accent-ink:var(--hd-accent-ink);--ink:var(--hd-ink);--ink-line:var(--hd-ink-line);--topo-img:url(/img/topo-light.svg);--ice:var(--hd-accent);background:var(--hd-bg);color:var(--text);border-color:var(--hd-line-strong);color-scheme:dark;--bean-ink:#F1EADC}
.main-quest.mq2 .btn{background:transparent;color:var(--text);border-color:var(--text)}
.main-quest.mq2 .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.main-quest.mq2 .mq-kicker .tag{color:var(--text);border-color:var(--text)}
.main-quest.mq2 .collar,.main-quest.mq2 .collar span{color:var(--muted)}.main-quest.mq2 .collar i,.main-quest.mq2 .collar i::after{background:var(--text)}
.main-quest.mq2 .mq-steps i{background:var(--hd-panel)}.main-quest.mq2 .mq-steps i.done{background:var(--accent)}
/* ===== Season page v3 (approved): full-width rows ===== */
.hud .brand{cursor:pointer}
.sn-v3 .sn-banner{position:relative;height:clamp(220px,26vw,360px);border:1px solid var(--line-strong);overflow:hidden;background:#1B1B1E}
.sn-v3 .sn-banner .sn-hero{position:absolute;inset:0;height:auto;margin:0}
.sn-v3 .sn-banner .sn-big{justify-content:center;align-items:flex-start;padding-left:4%}
.sn-v3 .sn-banner .sn-veil{background:linear-gradient(90deg,rgba(14,14,16,.82) 0%,rgba(14,14,16,.5) 45%,rgba(14,14,16,.28) 100%)}
.sn-bsub{position:absolute;right:26px;top:22px;text-align:right;z-index:3;color:#F1EADC}.sn-bsub b{display:block;font:600 clamp(20px,2.2vw,30px)/1.1 var(--tall);text-transform:uppercase;letter-spacing:.02em}.sn-bsub .mono{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#B8B1A4}
.sn-bro{position:absolute;right:26px;bottom:22px;z-index:3;display:grid;grid-auto-flow:column;border:1px solid rgba(241,234,220,.35);background:rgba(14,14,16,.6)}
.sn-bro>div{display:flex;flex-direction:column;padding:7px 16px;border-right:1px solid rgba(241,234,220,.18)}.sn-bro>div:last-child{border-right:0}
.sn-bro .l,.sn-sro .l{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#B8B1A4}.sn-bro .v{font:500 24px/1.1 var(--tall);color:#F1EADC}
.sn-introrow{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin:22px 0 4px;align-items:start}
.sn-v3 .sn-welcome p{font-size:15.5px;line-height:1.55;margin:0 0 10px}
.sn-steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sn-step3{border:1px solid var(--line-strong);background:var(--panel);padding:12px}.sn-step3 .n{font:500 26px var(--tall)}.sn-step3 b{display:block;font:12px var(--stencil);letter-spacing:.1em;text-transform:uppercase;margin:2px 0 6px}.sn-step3 p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.sn-v3 .hach{margin:22px 0 16px}
.sn-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sn-sheet{border:1px solid var(--line-strong);background:var(--panel);padding:16px 18px;box-shadow:3px 3px 0 var(--ink-line, var(--text));display:flex;flex-direction:column}
.sn-sk{display:flex;justify-content:space-between;align-items:center;gap:8px}.sn-sk .mono{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sn-sheet h4{font:600 20px var(--tall);text-transform:uppercase;margin:10px 0 6px}.sn-sheet p:not(.fx-card p){margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.sn-sro{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}.sn-sro:empty{display:none}
.sn-sro>div{display:flex;flex-direction:column;padding:5px 8px;border-right:1px solid var(--line)}.sn-sro>div:last-child{border-right:0}.sn-sro .l{color:var(--muted)}.sn-sro .v{font:500 19px var(--tall);color:var(--text)}.sn-sro .v small{font:10px var(--mono);color:var(--muted);margin-left:2px}
.sn-sech{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;flex-wrap:wrap}.sn-sech h3{margin:0;font:600 22px var(--tall);text-transform:uppercase;letter-spacing:.02em}.sn-sech .mono{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sn-v3 .fx-flips{height:280px}
@media (min-width:861px){.sn-v3 .fx-flips{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr}}   /* written out: repeat() won't animate to the 1fr 0fr 0fr 0fr list */
.fx-front-art{position:absolute;inset:0;background:right center/cover no-repeat;opacity:.45}
.fx-card.f-decaf .fx-front-art{background-position:center}
.fx-card .fx-front{justify-content:flex-end;align-items:stretch;text-align:left;padding:14px 16px}
.fx-card .fx-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,23,.3),rgba(20,20,23,.92) 72%);pointer-events:none}
.fx-front-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.fx-front-in .fx-logo{width:46px;height:46px}
.fx-front-in b{font:500 14px var(--mono);letter-spacing:.1em;color:var(--fc)}
.fx-pitch{font-size:12.5px;line-height:1.4;color:#E8E1D3}
.fx-chips{display:flex;gap:5px;flex-wrap:wrap}.fx-chips i{font:500 9.5px var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(241,234,220,.35);padding:2px 6px;color:#E8E1D3}
.fx-open{position:absolute;right:12px;top:12px;z-index:1;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#B8B1A4}
@media (min-width:861px){
  .sn-v3 .fx-card.open .fx-back{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:28px;align-content:start}
  .sn-v3 .fx-card.open .fx-back>.fx-back-name{grid-column:1}.sn-v3 .fx-card.open .fx-back>.fx-back-text{grid-column:1;grid-row:2}
  .sn-v3 .fx-card.open .fx-back>.fx-back-types{grid-column:2;grid-row:1/3}.sn-v3 .fx-card.open .fx-back>.fx-back-drops{grid-column:1/-1;grid-row:3}
}
.sn-botrow{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.sn-colls{border:1px solid var(--line-strong);background:var(--panel);padding:16px 18px}
.sn-slotgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sn-grp.f-gorp_corp{--fc:#C2500E}.sn-grp.f-decaf{--fc:#5D6570}.sn-grp.f-coven{--fc:#7A2FA0}.sn-grp.f-gorpeus{--fc:#B0161F}
.sn-grp .gh{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc);margin-bottom:6px}
.sn-grp .fx-back-drops{display:flex;opacity:1;gap:6px;flex-wrap:wrap;margin:0}.sn-grp .fx-back-drops>.tag{display:none}
.sn-grp .fx-slot{color:var(--fc)!important;border-color:var(--fc)!important;background:transparent!important;width:42px;height:42px}
.sn-sup{border:1px solid var(--line-strong);background:#1B1B1E;color:#F1EADC;padding:16px 18px}.sn-sup .tag{color:#F1EADC;border-color:#F1EADC}
.sn-sup h4{font:600 20px var(--tall);text-transform:uppercase;margin:8px 0 6px}.sn-sup p{margin:0 0 12px;font-size:13px;line-height:1.5;color:#D8D2C4}
.sn-sup .btn{background:transparent;color:#F1EADC;border-color:#F1EADC;font-family:var(--stencil);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
@media (max-width:860px){
  .sn-introrow,.sn-trio,.sn-botrow{grid-template-columns:1fr}
  .sn-steps3{grid-template-columns:1fr}
  .sn-slotgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-v3 .fx-flips{height:calc(420px + 12px)}
  .sn-bsub{right:12px;top:12px}.sn-bro{right:12px;left:12px;bottom:12px}.sn-bro>div{padding:5px 8px}.sn-bro .v{font-size:19px}
  .fx-pitch,.fx-chips{display:none}
}
.fx-card .fx-front>.fx-front-art,.fx-card .fx-front>.fx-open{position:absolute}   /* beats .fx-card .fx-front>*{position:relative} */
.sn-grp .fx-slot{width:38px;height:38px}
#view-map > .map-wrap{background:linear-gradient(var(--paper-veil), var(--paper-veil)), var(--topo-img) 0 0/700px, var(--panel)}
/* faction card fronts: logo and text centred, the logo big */
.fx-card .fx-front{justify-content:center;align-items:center;text-align:center}
.fx-front-in{align-items:center;text-align:center;gap:8px}
.fx-front-in .fx-logo{width:84px;height:84px}
.fx-chips{justify-content:center}
/* phones: the earlier 2 by 2 front (big logo and name on the dark tile, no picture or pitch) */
@media (max-width:860px){
  .fx-card .fx-front>.fx-front-art,.fx-card .fx-front>.fx-open{display:none}
  .fx-card .fx-front::after{display:none}
  .fx-front-in .fx-logo{width:96px;height:96px}
}
/* expanded on a wide screen: the big logo at the left, beside the lore and collectibles; contract types at the right */
@media (min-width:861px){
  .sn-v3 .fx-card.open .fx-back{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .sn-v3 .fx-card.open .fx-back>.fx-back-name{grid-column:2;grid-row:1}
  .sn-v3 .fx-card.open .fx-back>.fx-back-text{grid-column:2;grid-row:2}
  .sn-v3 .fx-card.open .fx-back>.fx-back-drops{grid-column:2;grid-row:3}
  .sn-v3 .fx-card.open .fx-back>.fx-back-types{grid-column:3;grid-row:1/4}
  .sn-v3 .fx-card.open .fx-back>.fx-back-name .fx-back-logo{display:none}
  .sn-v3 .fx-card.open .fx-back::before{content:"";grid-column:1;grid-row:1/4;width:150px;align-self:center;aspect-ratio:1;background:var(--fx-logo) center/contain no-repeat;position:relative;z-index:1;opacity:0;transition:opacity .35s ease .45s}
  .sn-v3 .fx-card.open.fx-revealed .fx-back::before{opacity:1}
  .fx-card.f-gorp_corp{--fx-logo:url(/img/factions/gorp_corp.svg)}.fx-card.f-decaf{--fx-logo:url(/img/factions/decaf.svg)}.fx-card.f-coven{--fx-logo:url(/img/factions/coven.svg)}.fx-card.f-gorpeus{--fx-logo:url(/img/factions/gorpeus.svg)}
}
/* sideways rows reach the panel's side edges (the panel's side padding moves inside the row) and fade there like the foot fade: 12 px */
#view-atlas #atlasList{--lx:28px}
@media (max-width:860px){#view-atlas #atlasList{--lx:16px}}
#atlasList .atlas-row{margin-inline:calc(-1 * var(--lx, 0px));padding-inline:var(--lx, 0px);scroll-padding-inline:var(--lx, 0px)}
@media (max-width:860px){#atlasList .feat-mids{margin-inline:calc(-1 * var(--lx, 0px));padding-inline:var(--lx, 0px);scroll-padding-inline:var(--lx, 0px)}}
.atlas-row.fade-r,.feat-mids.fade-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 2px))}
.atlas-row.fade-l,.feat-mids.fade-l{-webkit-mask-image:linear-gradient(90deg, transparent 2px, #000 12px);mask-image:linear-gradient(90deg, transparent 2px, #000 12px)}
.atlas-row.fade-l.fade-r,.feat-mids.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(90deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px))}
/* tab rows only scroll sideways (overflow-x:auto let them scroll up and down a few px too) */
.tabbar{overflow-y:hidden}
/* the quest tabs' edit button: no shadow */
.quest-tabs .q-edit{box-shadow:none}
/* the Season banner on phones: title and dates top left, the readout at the foot, SEASON ZERO sized to the band between them */
@media (max-width:860px){
  .sn-v3 .sn-banner{height:min(92vw, 380px)}
  .sn-v3 .sn-banner .sn-big{inset:70px 12px 84px;padding-left:0;align-items:center;container-type:size}
  .sn-bsub{left:12px;right:12px;text-align:left}
  .sn-bro{grid-auto-columns:minmax(0,1fr)}.sn-bro>div{min-width:0;padding:5px 6px}.sn-bro .l{font-size:8px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
}
/* ===== Friends, Clubs, Settings and Inventory in the field-terminal style (approved mock-ups) ===== */
/* shared: a stencil tag with a mono note, and the tick rule between sections */
.pg-kick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.pg-kick .mono{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-kick h2.tag{font-size:12px;margin:0;font-weight:400}
.tick-rule{height:8px;margin:18px 0;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 5px)}
/* the Friends / Clubs head row: the toggle, the counts and the main button at the end */
.clubs-top{align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.clubs-top .clubs-count{margin-left:auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.clubs-top .btn.primary{font-family:var(--stencil);letter-spacing:.09em;text-transform:uppercase;font-size:12px}
.clubs-head{margin:0}
/* friends: unit cards, two across */
.fr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fr-unit{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line-strong);background:var(--panel)}
.fr-unit .fr-face{width:58px;height:58px;border-radius:0;border:1px solid var(--line-strong);background-color:var(--panel-2);background-size:150%;background-position:center 30%;margin:0}
.fr-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.fr-name{font:600 18px/1.15 var(--tall);text-transform:uppercase;letter-spacing:.02em;color:var(--text);text-align:left;padding:0;text-decoration:none}
.fr-line{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fr-ital{font-family:var(--ital);font-style:italic;font-size:13.5px;color:var(--muted)}
.fr-unit .cm-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fr-add .add-row{max-width:620px}
.fr-sec .cm-list{margin-top:10px}
/* clubs: banner cards with the emblem, a readout and the next trip */
.club-cards{grid-template-columns:repeat(auto-fill,minmax(max(280px, calc((100% - 28px) / 3)),1fr));gap:14px}
.club-card.cc2{padding:0;gap:0;border:1px solid var(--line-strong);border-top:1px solid var(--line-strong);box-shadow:3px 3px 0 var(--text);min-height:0;overflow:visible}
.cc2 .cc-banner{position:relative;display:block;align-self:stretch;height:92px;background:linear-gradient(120deg,var(--club),color-mix(in srgb,var(--club) 55%,#0b1a22))}
.cc2.has-cover .cc-banner{background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)),var(--cover) center/cover no-repeat,var(--club)}
.cc2 .cc-banner::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(241,234,220,.18) 1px,transparent 1.5px);background-size:6px 6px}
.cc2 .cc-emblem,.cc-inv .cc-emblem{position:absolute;left:14px;bottom:-22px;z-index:1;width:52px;height:52px;border-radius:0;background:var(--text);color:var(--panel);border:2px solid var(--panel);font:600 18px var(--tall)}
.cc-inv .cc-emblem{position:static;background:var(--club);color:#fff;border:0;width:58px;height:58px}
.cc2 .cc-in{display:flex;flex-direction:column;gap:8px;align-self:stretch;padding:30px 14px 14px}
.cc2 .cc-title{display:flex;align-items:flex-start;gap:8px}
.cc2 .cc-name{font:600 20px/1.1 var(--tall);text-transform:uppercase;letter-spacing:.02em;flex:1}
.cc2 .cc-chips{display:flex;gap:6px;flex:none}
.cc2 .cc-desc{font-family:var(--ital);font-style:italic;font-size:14px;color:var(--muted);margin-top:-4px}
.cc2 .cc-ro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.cc2 .cc-ro>span{display:flex;flex-direction:column;padding:6px 10px;border-right:1px solid var(--line)}.cc2 .cc-ro>span:last-child{border-right:0}
.cc2 .cc-ro .l{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc2 .cc-ro .v{font:500 21px/1.1 var(--tall);color:var(--text)}.cc2 .cc-ro .v small{font:10px var(--mono);color:var(--muted);margin-left:2px}
.cc2 .cc-people{display:flex;align-items:center;gap:10px}.cc2 .cc-people .mono{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cc2 .cc-next{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.cc2 .cc-next b{font-weight:600}
.club-card.cc-start{align-items:center;justify-content:center;text-align:center;gap:8px;min-height:250px;border:1px dashed var(--line-strong);background:transparent;padding:20px}
.cc-start .cc-plus{font:600 34px/1 var(--tall)}.cc-start .ital{font-family:var(--ital);font-style:italic;color:var(--muted);font-size:14px;max-width:220px}
/* settings: a rail of the four pages beside numbered sheets */
.opt-page .opt-wrap{max-width:1180px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.opt-rail{position:sticky;top:0}
.opt-rail .sec-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.opt-rail .opt-who{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.opt-rail .opt-tabs{display:flex;flex-direction:column;gap:0;margin:0;border:1px solid var(--line-strong);background:var(--panel);overflow:visible}
.opt-rail .opt-tabs .btn{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:11px 14px;background:transparent;font-family:var(--stencil);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);box-shadow:none}
.opt-rail .opt-tabs .btn:last-child{border-bottom:0}
.opt-rail .opt-tabs .btn[aria-selected=true]{background:var(--text);color:var(--panel)}
.opt-rail .opt-tabs .btn[aria-selected=true]::after{display:none}
.opt-body{counter-reset:optsec}
.opt-wrap .opt-sec{border:1px solid var(--line-strong);border-radius:0;padding:0 16px 16px;counter-increment:optsec}
.opt-wrap .opt-sec:not(.on){counter-increment:none}
.opt-sec>h3{display:flex;align-items:center;gap:10px;margin:0 -16px 14px;padding:9px 16px;border-bottom:1px solid var(--line-strong);background:color-mix(in srgb,var(--text) 4%,transparent);font:600 16px var(--tall);text-transform:uppercase;letter-spacing:.02em}
.opt-sec>h3::before{content:counter(optsec, decimal-leading-zero);border:1px solid currentColor;padding:1px 6px;font:11px var(--stencil);letter-spacing:.08em;line-height:1.4}
.opt-sec>h3 .opt-st{margin-left:auto;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.opt-sec .kv dt{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center}
.opt-code .btn{padding:3px 8px;margin-left:6px;font-size:11px;font-family:var(--stencil);letter-spacing:.08em;text-transform:uppercase}
.opt-ro{margin:0 0 12px}
.opt-sec .field{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* the game switch: a square stencil toggle */
.opt-switch{display:inline-flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.opt-switch input{appearance:none;-webkit-appearance:none;width:40px;height:22px;margin:0;border:1px solid var(--text);background:transparent;position:relative;cursor:pointer;flex:none}
.opt-switch input::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;background:var(--text);transition:left .15s}
.opt-switch input:checked{background:var(--accent);border-color:var(--text)}
.opt-switch input:checked::after{left:21px;background:#fff}
.opt-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* devices: one card each, side by side on wide screens */
.opt-wrap[data-tab=devices] .opt-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.opt-wrap[data-tab=devices] .opt-sec{margin:0}
@media (max-width:860px){
  .opt-page .opt-wrap{display:block}
  .opt-rail{position:static}
  .opt-rail .opt-tabs{flex-direction:row;overflow-x:auto;border:0;border-bottom:1px solid var(--line);background:transparent}
  .opt-rail .opt-tabs .btn{width:auto;border:0;padding:10px 12px;flex:none}.opt-rail .opt-tabs .btn span{display:none}
  .opt-rail .opt-tabs .btn[aria-selected=true]{background:var(--text);color:var(--panel)}
  .opt-wrap .opt-sec{margin-top:12px}
  .fr-grid{grid-template-columns:1fr}
  .fr-unit{grid-template-columns:48px minmax(0,1fr);}.fr-unit .fr-face,.cc-inv .cc-emblem{width:48px;height:48px}
  .fr-unit .cm-actions{grid-column:1 / -1;justify-content:flex-start}
}
/* inventory: the readout on top, owned above not owned, an Owned stamp, why a missing item matters */
.inv-ro{margin:4px 0 12px}
.inv-body .inv-split{display:block}
.inv-body .inv-split .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.inv-split .sec-head.pg-kick{justify-content:flex-start}
.tile .tag.own-stamp{color:var(--ok, #2F7A4A);font-family:var(--stencil);font-weight:400;font-size:10px;letter-spacing:.08em;padding:0 5px;border:1px solid currentColor}
.tile .inv-why{color:var(--warn);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.tile.missing{border-style:dashed}
#invDetail .gd-ic{display:inline-block}
#invDetail .gd-kick{display:block;margin-top:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#invDetail .gd-name{font:600 26px/1.1 var(--tall);text-transform:uppercase;letter-spacing:.02em;margin:2px 0}
#invDetail .gd-sub{margin:0 0 10px;font-family:var(--ital);font-style:italic;font-size:15px;color:var(--muted)}
#invDetail .gd-ro{margin:0 0 12px}
@media (max-width:860px){.inv-body .inv-split .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.inv-ro>div{min-width:0}.inv-ro .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.clubs-top .clubs-count{font-size:9px;letter-spacing:.04em}}
.clubs-top .club-side{order:0;position:static}   /* the Friends | Clubs toggle shares a class with the club page's sidebar, whose phone rule moved it after the counts */
/* Plan / Hike / Earn stay in one row on phones, set smaller */
@media (max-width:860px){.sn-steps3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sn-step3{padding:9px 8px}.sn-step3 .n{font-size:20px}.sn-step3 b{font-size:10.5px;letter-spacing:.06em;margin:0 0 4px}.sn-step3 p{font-size:11px;line-height:1.35}}
/* the Atlas foot fade spans the whole panel width, into its side padding */
#atlasList::after{margin-left:calc(-1 * var(--lx, 0px));margin-right:calc(-1 * var(--lx, 0px))}
.sn-botrow.sn-solo{grid-template-columns:1fr}   /* Support alone (the Collectibles block is gone; the cards show each faction's collectibles) */
/* phones: the Journal and Inventory quest pickers fold into a "…" menu button at the right end of the toggle's line */
@media (max-width:860px){
  #journalList .page-bar{flex-wrap:wrap!important}
  #journalList .page-bar .pb-left{flex:1 1 auto!important;max-width:none!important}
  #journalList .page-bar .pb-right{display:contents}
  #journalList .page-bar .pb-right .qdd{order:1;flex:none}
  #journalList .page-bar .pb-right .mdd{order:2;flex:1 1 100%}
  #invList .page-bar .pb-right{flex:none!important}
  #journalList .page-bar .qdd,#invList .page-bar .qdd{flex:none;min-width:0;margin-left:auto}
  #journalList .page-bar .qdd > .dd-btn,#invList .page-bar .qdd > .dd-btn{width:36px;min-width:0;padding:0!important;justify-content:center}
  #journalList .page-bar .qdd > .dd-btn .dd-val,#journalList .page-bar .qdd > .dd-btn .dd-chev,#invList .page-bar .qdd > .dd-btn .dd-val,#invList .page-bar .qdd > .dd-btn .dd-chev{display:none}
  #journalList .page-bar .qdd > .dd-btn::before,#invList .page-bar .qdd > .dd-btn::before{content:"";width:18px;height:4px;background:radial-gradient(circle,currentColor 1.9px,transparent 2.2px) 0 50%/6px 4px repeat-x}
  #journalList .page-bar .qdd .dd-pop,#invList .page-bar .qdd .dd-pop{left:auto;right:0;min-width:min(280px, 86vw)}
}
/* phones: the Journal list doesn't clip (the whole view scrolls), so its pinned bar's side cover matches the panel's 16 px padding instead of spilling past the panel */
@media (max-width:860px){#journalList > .page-bar{box-shadow:-16px 0 0 var(--panel), 16px 0 0 var(--panel)}}
/* Inventory's category chips at the Quest Loadout size; the phone dots menu at the far right of the toggle's line */
#invList .cat-chips .btn{padding:4px 9px;font-size:12px;min-height:0}
@media (max-width:860px){#invList .page-bar .pb-right{margin-left:auto!important}}
/* ===== Customize in the field-terminal style (approved mock-up) ===== */
/* the section list: numbered ruled rows with a tall caps name and a mono summary */
#charPanel .cust-nav{counter-reset:cust;display:block;border:1px solid var(--line-strong);background:var(--panel);gap:0}
#charPanel .cust-nav-item{counter-increment:cust;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;margin:0;padding:11px 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;text-align:left;color:var(--text)}
#charPanel .cust-nav-item:last-child{border-bottom:0}
#charPanel .cust-nav-item::before{content:counter(cust, decimal-leading-zero);border:1px solid currentColor;padding:1px 6px;font:11px var(--stencil);letter-spacing:.08em;line-height:1.4}
#charPanel .cust-nav-item>span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
#charPanel .cust-nav-item b{font:600 16px/1.15 var(--tall);text-transform:uppercase;letter-spacing:.02em}
#charPanel .cust-nav-item .small{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#charPanel .cust-nav-item:hover,#charPanel .cust-nav-item:focus-visible{background:var(--text);color:var(--panel)}
#charPanel .cust-nav-item:hover .small,#charPanel .cust-nav-item:focus-visible .small{color:color-mix(in srgb, var(--panel) 70%, transparent)}
/* inside a section: the back button as a small stencil button, the section's title as a tag, group names as tags */
#charPanel .cust-back{font:12px var(--stencil);letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--text);border-radius:2px;padding:5px 10px;margin-bottom:10px}
#charPanel .cust-part>h4{display:inline-block;border:1px solid currentColor;padding:1px 8px;margin:4px 0 10px;font:12px var(--stencil);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
#charPanel .cust-part h5{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#charPanel .cust-part h5::after{content:"";flex:1;height:8px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 5px)}
/* picture tiles: square-cornered, a mono label; the worn one in a heavy frame with an offset shadow and a Worn stamp; locked ones greyed with the price in mono */
#charPanel .pick{border:1px solid var(--line-strong);border-radius:0;background:var(--panel);box-shadow:none;padding:6px}
#charPanel .pick .pick-img{border-radius:0;border:1px solid var(--line);background-color:color-mix(in srgb, var(--text) 4%, var(--panel))}
#charPanel .pick .pick-label{font:500 10.5px/1.25 var(--mono);letter-spacing:.03em;text-transform:uppercase}
#charPanel .pick.on{border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);position:relative}
#charPanel .pick.on::after{content:"Worn";position:absolute;right:6px;top:6px;padding:1px 5px;background:var(--text);color:var(--panel);font:9.5px var(--stencil);letter-spacing:.08em;text-transform:uppercase}
#charPanel .pick-wrap .pick-num ~ .pick.on::after,#charPanel .pick-wrap:has(.pick-num) .pick.on::after,#charPanel [data-bot-scene].on::after,#charPanel [data-bot-look-apply]::after,#charPanel [data-bot-custom].on::after,#charPanel [data-bot-face].on::after,#charPanel [data-bot-ears].on::after{content:"On"}
#charPanel .pick.off .pick-img{filter:grayscale(1) opacity(.55)}
#charPanel .pick-wrap.locked .pick{border-style:dashed;background:transparent}
#charPanel .pick-price{font:500 10px var(--mono);letter-spacing:.04em;border-radius:0}
#charPanel .pick-wrap.locked .pick,#charPanel .pick.off{opacity:1}#charPanel .pick.off .pick-label{color:var(--muted)}
/* the little notes beside section tags read as descriptions: the body font, small and muted (not mono capitals) */
.pg-kick .mono,.sn-sech .mono{font-family:var(--font);font-size:13px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--muted)}
/* Inventory and Quest Loadout: the space sits under the description (before the chips, or before the quest's kicker and readiness bar), not under the chips */
#invList .inv-top{margin-bottom:26px}
#invList .cat-chips{margin-bottom:0}
#invList .inv-split > .group:first-child,#invList .inv-split > .group:first-child .sec-head{margin-top:0}
#invList .inv-q .inv-kicker{margin:0 0 8px}
/* a tab's description, under its toggle and above its content */
.tab-desc{display:block;margin:0 0 26px;font-family:var(--font);font-size:13px;line-height:1.45;color:var(--muted)}
#journalList .inv-top{margin-bottom:26px}#journalList .inv-top .tab-desc{margin:0}
#journalList .jb-add{margin:0 0 14px}
/* every tab: 8 px from its toggle to its description, 26 px from the description to the content (Inventory's spacing) */
#questList .qh-head .small{margin-top:2px;margin-bottom:12px}
#questList .coll-desc{margin-top:-12px}
#journalList > .page-bar{margin-bottom:0}
.clubs-top{margin-bottom:8px}
/* edge fades for every scroller (RowFade sets data-ef and the fade-* classes): 12 px, like the foot fade */
[data-ef="h"].fade-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 2px))}
[data-ef="h"].fade-l{-webkit-mask-image:linear-gradient(90deg, transparent 2px, #000 12px);mask-image:linear-gradient(90deg, transparent 2px, #000 12px)}
[data-ef="h"].fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(90deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px))}
[data-ef="v"].fade-b{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(180deg, #000 calc(100% - 12px), transparent calc(100% - 2px))}
[data-ef="v"].fade-t{-webkit-mask-image:linear-gradient(180deg, transparent 2px, #000 12px);mask-image:linear-gradient(180deg, transparent 2px, #000 12px)}
[data-ef="v"].fade-t.fade-b{-webkit-mask-image:linear-gradient(180deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px));mask-image:linear-gradient(180deg, transparent 2px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 2px))}
.filters.qpick{-webkit-mask-image:none;mask-image:none}   /* its fixed fade gives way to the edge fade */
/* sideways rows inside a panel reach its side edges (the panel's side padding moves inside the row), so the fade sits at the edge */
#invList,#charPanel{--lx:28px}
@media (max-width:860px){#invList{--lx:16px}#charPanel{--lx:14px}
  #invList .cat-chips,#charPanel .cat-chips,#charPanel .prof-tabs{margin-left:calc(-1 * var(--lx));margin-right:calc(-1 * var(--lx));padding-left:var(--lx);padding-right:var(--lx);scroll-padding-inline:var(--lx)}}
#view-journal{overflow-x:hidden}   /* phones: nothing in the Journal scrolls it sideways */
/* the 3D preview's foot: a measuring scale (minor ticks every 5 px, a tall one every 50 px), as on the header's hachure */
#view-char .char-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:2;pointer-events:none;opacity:.7;background:repeating-linear-gradient(90deg,var(--text) 0 1px,transparent 1px 50px) var(--tk, 0px) 100%/50px 12px repeat-x,repeating-linear-gradient(90deg,var(--text) 0 1px,transparent 1px 5px) var(--tk, 0px) 100%/5px 6px repeat-x;border-bottom:1px solid var(--text)}
[data-openprofile].has-face{background-size:cover;background-position:center 60%}   /* the scene the GORPbot stands in, behind its face */
/* ===== Map in the field-terminal style (approved mock-up): a dark strip on top (quest picker + the route's numbers), the
   view tools as a square rail on the right, one ruled bar at the foot (map toggles, Simulate, Start), stops as mono tags ===== */
#mapWrap{--mstrip:58px;--mbar:58px}
#mapWrap .map-quests{left:0;right:0;top:0;transform:none;max-width:none;height:var(--mstrip);display:flex;align-items:stretch;gap:0;overflow:visible;background:var(--hd-bg, #14171B);color:var(--hd-text, #E9EDF2);border-bottom:1px solid rgba(233,237,242,.15);z-index:501}
#mapWrap .mq-pick{display:flex;align-items:center;min-width:0;flex:1 1 auto;border-right:1px solid rgba(233,237,242,.15)}
#mapWrap .map-quests .dd{width:100%;min-width:0}
#mapWrap .map-quests .dd-btn{width:100%;height:var(--mstrip);background:transparent!important;border:0!important;box-shadow:none!important;color:inherit;padding:0 14px;justify-content:flex-start;gap:8px}
#mapWrap .map-quests .dd-val{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.1}
#mapWrap .map-quests .dd-val::before{content:"Quest · Map";font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hd-muted, #A3ACB8);margin-bottom:2px}
#mapWrap .map-quests .dd-val b{font:600 19px/1.1 var(--tall);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#mapWrap .map-quests .dd-val .dd-ico{display:none}
#mapWrap .map-quests .dd-chev{color:var(--hd-muted, #A3ACB8);flex:none}
#mapWrap .map-quests .dd-pop{top:100%;left:8px;color:var(--text)}
#mapWrap .map-ro{display:flex;flex:none}
#mapWrap .map-ro>div{display:flex;flex-direction:column;justify-content:center;padding:0 14px;border-left:1px solid rgba(233,237,242,.12)}
#mapWrap .map-ro .l{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hd-muted, #A3ACB8)}
#mapWrap .map-ro .v{font:500 18px/1.1 var(--tall);color:var(--hd-text, #E9EDF2);white-space:nowrap}#mapWrap .map-ro .v small{font:10px var(--mono);color:var(--hd-muted, #A3ACB8);margin-left:2px}
/* the view tools: one square rail down the right edge, under the strip */
#mapWrap .map-tools{top:calc(var(--mstrip) + 14px);right:14px;left:auto;flex-direction:column;gap:0;border:1px solid var(--text);background:var(--panel)}
#mapWrap .map-tools > .btn.icon{width:40px;height:40px;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0;background:var(--panel)!important;box-shadow:none!important}
#mapWrap .map-tools > .btn.icon:last-of-type{border-bottom:0!important}
#mapWrap .map-more{position:absolute;right:calc(100% + 8px);top:0;left:auto}
/* the foot bar: the map toggles on the left, Simulate and Start on the right */
#mapWrap .map-bar{position:absolute;left:0;right:0;bottom:0;height:var(--mbar);background:var(--panel);border-top:1px solid var(--text);z-index:499;pointer-events:none}
#mapWrap .map-bottom{left:12px;bottom:calc((var(--mbar) - 36px) / 2);flex-direction:row;align-items:center;gap:8px}
#mapWrap .map-bottom .btn{background:var(--panel)}
#mapWrap .map-bottom .btn[aria-pressed=true]{background:var(--text);color:var(--panel)}
#mapWrap #gpsTools{right:12px;bottom:calc((var(--mbar) - 40px) / 2)}
#mapWrap .gps-btns .btn{font-family:var(--stencil);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:12px;border-radius:0}
#mapWrap .gps-btns .btn:not(.primary){background:var(--panel)}
/* over the map: corner brackets on the frame, the imagery credit small above the bar, stops as mono field tags */
#mapWrap .map-brk{position:absolute;left:10px;right:10px;top:calc(var(--mstrip) + 10px);bottom:calc(var(--mbar) + 10px);z-index:2;pointer-events:none;--c:rgba(248,249,250,.9);
  background:linear-gradient(var(--c),var(--c)) 0 0/18px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 18px,linear-gradient(var(--c),var(--c)) 100% 0/18px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 18px,
  linear-gradient(var(--c),var(--c)) 0 100%/18px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 18px,linear-gradient(var(--c),var(--c)) 100% 100%/18px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 18px;background-repeat:no-repeat}
#mapWrap .map-tools ~ .map-brk{right:10px}
#mapWrap .sat-credit{top:auto!important;left:auto!important;right:16px!important;bottom:calc(var(--mbar) + 16px)!important;font:500 8.5px var(--mono)!important;letter-spacing:.04em;text-transform:uppercase;color:rgba(248,249,250,.88)!important;text-shadow:0 1px 2px rgba(0,0,0,.7);background:none!important}
#mapWrap .map-note{bottom:calc(var(--mbar) + 14px)}
#mapWrap .leaflet-top{top:var(--mstrip)}#mapWrap .leaflet-bottom{bottom:var(--mbar)}
#mapWrap .lbl-stop{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--panel);border:1px solid var(--text);border-radius:0;box-shadow:2px 2px 0 var(--text);padding:0 8px 0 0;gap:8px}
#mapWrap .lbl-stop .n{background:var(--text);color:var(--panel);width:auto;min-width:22px;height:20px;padding:0 6px;font:600 11px var(--mono)}
#mapWrap .lbl-stop.on .n{background:var(--accent);color:var(--accent-ink)}
@media (max-width:860px){
  #mapWrap{--mstrip:92px;--mbar:100px}
  #mapWrap .map-quests{flex-wrap:wrap}
  #mapWrap .mq-pick{flex:1 1 100%;height:48px;border-right:0;border-bottom:1px solid rgba(233,237,242,.15)}
  #mapWrap .map-quests .dd-btn{height:48px}
  #mapWrap .map-quests .dd-val b{font-size:17px}
  #mapWrap .map-ro{flex:1 1 100%;height:43px}#mapWrap .map-ro>div{flex:1;padding:0 10px;border-left:0;border-right:1px solid rgba(233,237,242,.12)}#mapWrap .map-ro>div:last-child{border-right:0}
  #mapWrap .map-ro .v{font-size:16px}
  #mapWrap .map-tools{right:auto;left:10px;top:calc(var(--mstrip) + 10px)}
  #mapWrap .map-tools > .btn.icon{width:38px;height:38px}
  #mapWrap .map-more{right:auto;left:calc(100% + 8px)}
  #mapWrap .map-bottom{left:10px;right:10px;bottom:56px;flex-direction:row;align-items:center}
  #mapWrap #gpsTools{left:10px;right:10px;bottom:10px;max-width:none;align-items:stretch}
  #mapWrap .gps-btns{width:100%}#mapWrap .gps-btns .btn{flex:1;justify-content:center}
}
@media (max-width:860px){#view-map{grid-template-rows:minmax(0,55%) minmax(0,45%)}#mapWrap{--mstrip:84px;--mbar:92px}#mapWrap .mq-pick,#mapWrap .map-quests .dd-btn{height:44px}#mapWrap .map-ro{height:39px}#mapWrap .map-bottom{bottom:52px}#mapWrap #gpsTools{bottom:8px}#mapWrap .gps-btns .btn{padding:9px 12px}}
#mapWrap .map-note{display:none}   /* the strip's readout says what the note did */
/* the header's buttons (profile, clubs, settings) light up like an active tab while their page is open */
.hud .stats .opt[aria-pressed="true"]{background:color-mix(in srgb, var(--hd-text) 11%, var(--hd-bg));color:var(--hd-text)}
/* the map's foot bar in the dark header style: light outline toggles, the pressed one filled light */
#mapWrap .map-bar{background:var(--hd-bg, #14171B);border-top:1px solid rgba(233,237,242,.15)}
#mapWrap .map-bottom .btn{background:transparent!important;color:var(--hd-text, #E9EDF2);border-color:rgba(233,237,242,.45)!important}
#mapWrap .map-bottom .btn[aria-pressed=true]{background:var(--hd-text, #E9EDF2)!important;color:var(--hd-bg, #14171B);border-color:var(--hd-text, #E9EDF2)!important}
#mapWrap .gps-btns .btn:not(.primary){background:transparent!important;color:var(--hd-text, #E9EDF2);border-color:rgba(233,237,242,.6)!important}
#mapWrap .gps-btns .btn.primary{box-shadow:3px 3px 0 rgba(0,0,0,.55)}
#mapWrap .rec-bar{background:var(--hd-bg, #14171B);color:var(--hd-text, #E9EDF2)}
/* the cairn mark, transparent: it takes the text colour (light on the header band, ink on paper) */
.brand-logo{border-radius:0;color:var(--hd-text, #E9EDF2)}
.login-box h1.login-logo .login-cup{height:1.3em;width:1.3em;color:var(--text)}
.welcome-page .wa-cup{color:var(--text)}
/* the cairn on the Season card and its SEASON ZERO overlay */
.ac-title .ac-cairn{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.18em}
.sn-big .sn-cairn{display:block;flex:none;width:auto;height:13cqh;margin:0 0 3cqh;color:inherit;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
/* the trademark sign: small and raised after the wordmark, at the cairn's top right when it stands alone */
sup.tm{font-family:var(--mono, monospace);font-size:.32em;font-weight:500;letter-spacing:0;vertical-align:1.6em;line-height:0;margin-left:.12em}
.cairn-tm{display:inline-flex;align-items:flex-start;flex:none}
.cairn-tm sup.tm{font-size:9px;vertical-align:0;line-height:1;margin:0 .3em 0 -.05em}
.sn-big .cairn-tm{display:flex;margin:0 0 3cqh}.sn-big .cairn-tm .sn-cairn{margin:0}.sn-big .cairn-tm sup.tm{font-size:2.6cqh;margin-left:.2em}
.ac-title .cairn-tm .ac-cairn{margin-right:0}
.sn-welcome .cairn-tm{vertical-align:-.2em;margin-right:.2em}.sn-welcome .ac-cairn{width:1.25em;height:1.25em;display:block}
/* the Season page: the Seasons block under the opening row, the fair-play note in the Beans sheet */
.sn-v3 .sn-seasons{margin:18px 0 0}
.sn-sheet .sn-note{font-size:12.5px;color:var(--muted);font-style:italic;font-family:var(--ital);border-top:1px solid var(--line);padding-top:8px}
.sn-sheet h4 .bean-ico,.sn-sheet h4 svg{width:.9em;height:.9em;vertical-align:-.1em;margin-left:.2em}
/* the Season's story in the Seasons block, with how a Season works under a rule */
.sn-seasons .sn-story p:not(.fx-card p){font-size:15px;line-height:1.6}
.sn-seasons .sn-mech{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.sn-seasons .sn-facs{border-top:1px solid var(--line);margin-top:6px;padding-top:14px}   /* the Story sheet's muted paragraph style stays out of the cards (:not above) */.sn-seasons .sn-mech p{font-size:13px;color:var(--muted)}
/* the (i) after the Season's name: what a Season is, in a note */
/* the (i) by the Season's name: what a Season is, in the same anchored note as the OSM chip on a route (atlas.js data-unver) */
.sn-infow{vertical-align:middle;line-height:1}
.sn-info{display:inline-flex;align-items:center;margin-left:.2em;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;vertical-align:middle}.sn-info svg{display:block}.sn-info:hover,.sn-info:focus-visible{color:var(--accent)}
.sn-note-pop.unver-pop{width:min(380px,calc(100vw - 48px));border-color:var(--line-strong);font:400 13.5px/1.5 var(--font);text-transform:none;letter-spacing:0}
.sn-note-pop.unver-pop::before{border-bottom-color:var(--line-strong)}
.sn-sheet .sn-note-pop.unver-pop p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--text)}.sn-sheet .sn-note-pop.unver-pop p:last-child{margin:0}
/* contracts arrive over GORPNet: a signal line above the list, the source in each status bar */
.ct-net{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ct-net i{width:7px;height:7px;border-radius:50%;background:var(--ok, #2F7A4A);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok, #2F7A4A) 25%, transparent)}
.ct-status .ct-via{margin-left:auto;opacity:.75}
/* ===== the map on phones (approved mock-up): one-line header, number-only stop badges (the stop list stays below the map), one control bar with Start as the main action, small tools top right ===== */
#mapWrap .map-line,.map-stops-btn,.map-cycle{display:none}
@media (max-width:860px){
  #mapWrap{--mstrip:58px;--mbar:56px}
  #mapWrap .map-quests{flex-direction:column;flex-wrap:nowrap;justify-content:center;padding:4px 12px 6px;gap:2px}
  #mapWrap .mq-pick{flex:none;height:auto;border:0}
  #mapWrap .map-quests .dd{width:auto;max-width:100%}
  #mapWrap .map-quests .dd-btn{height:auto;padding:0;width:auto}
  #mapWrap .map-quests .dd-val{flex:0 1 auto}
  #mapWrap .map-quests .dd-val::before{display:none}
  #mapWrap .map-quests .dd-val b{font-size:18px}
  #mapWrap .map-ro{display:none}
  #mapWrap .map-line{display:block;margin:0;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hd-muted, #A3ACB8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* tools: two small squares top right */
  #mapWrap .map-tools{left:auto;right:8px;top:calc(var(--mstrip) + 8px)}
  #mapWrap .map-tools > .btn.icon{width:32px;height:32px}
  #mapWrap .map-more{left:auto;right:calc(100% + 8px)}
  /* stop tags: number-only badges (the selected stop keeps its name), no empty box */
  #mapWrap .lbl-stop:not(.on){padding:0;gap:0;background:none;border-color:var(--text)}
  #mapWrap .lbl-stop:not(.on) .nm{display:none}
  /* one control bar: 3D / 2D and the map-style button on the left, Simulate and Start on the right */
  #mapWrap .map-bottom{left:10px;right:auto;bottom:calc((var(--mbar) - 34px) / 2);gap:6px}
  #mapWrap .map-bottom .seg:not(.map-mode){display:none!important}
  #mapWrap .map-cycle{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;background:transparent!important;color:var(--hd-text, #E9EDF2);border:1px solid rgba(233,237,242,.45)!important}
  #mapWrap #gpsTools{left:auto;right:10px;bottom:calc((var(--mbar) - 36px) / 2);align-items:flex-end}
  #mapWrap .gps-btns{width:auto;gap:6px}#mapWrap .gps-btns .btn{flex:none;width:auto;min-width:0;padding:8px 10px;font-size:11px}
  #mapWrap .gps-btns .btn.primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:3px 3px 0 rgba(0,0,0,.55)}
  #mapWrap .sat-credit{font-size:7.5px!important;right:28px!important}
}
/* the cairn's trademark sign tucked against its top stone (the mark's top stone ends about 30% short of the box's right edge) */
.cairn-tm sup.tm{margin-left:-.5em}.sn-big .cairn-tm sup.tm{margin-left:-3.6cqh;margin-top:.3cqh}
/* the welcome under the banner, in the header's dark style, joined to it */
.sn-v3 .sn-introrow{margin:0 0 4px;padding:20px 22px 22px;background:var(--hd-bg, #14171B);color:var(--hd-text, #E9EDF2);border:1px solid var(--line-strong);border-top:0}
.sn-v3 .sn-introrow .sn-welcome p{color:var(--hd-text, #E9EDF2)}.sn-v3 .sn-introrow .ital-note{color:var(--hd-muted, #A3ACB8)}
.sn-v3 .sn-introrow .sn-step3{background:transparent;border-color:rgba(233,237,242,.28);color:var(--hd-text, #E9EDF2)}.sn-v3 .sn-introrow .sn-step3 p{color:var(--hd-muted, #A3ACB8)}
@media (max-width:860px){.sn-v3 .sn-introrow{padding:16px 14px 18px}}
.sn-v3 .sn-banner{margin-bottom:0}.sn-v3 .sn-banner + .sn-introrow{margin-top:-6px}   /* the page grid's 6 px gap: the welcome panel sits flush under the banner */
/* the header buttons fill their cells top to bottom (the stats block's bottom padding left a gap under each, and a 6 px margin beside them) */
.hud .stats{padding-bottom:0!important}
.hud .party,.hud .party-btns{height:auto;align-self:stretch}
.hud .party-btns .pm.opt{margin:0;height:auto;align-self:stretch}
.hud .party-btns .pm.opt.has-face img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
/* the header buttons fill their cells (and the picture clips to its button), so the count sits inside the corner */
.hud .party-btns .pm .pm-badge,.hud .party-btns .pm .notif-badge{top:4px;right:4px;z-index:2}
/* ===== the contract board (Atlas | Season | Contracts) ===== */
.atlas-views [data-atlas-view][hidden]{display:none}
.cb-page{padding-top:8px}
.cb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}.cb-head .ct-net{margin:0}.cb-when{margin-left:auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cb-page.cb-in .cb-card{animation:cbDeal .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes cbDeal{from{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
/* connecting to GORPnet: a little dish sending rings, blinking dots, a bar that fills, a line of handshake text */
.cb-connect{display:grid;justify-items:center;gap:10px;padding:56px 16px 64px;text-align:center}
.cb-dish{position:relative;width:64px;height:64px}
.cb-dish b{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent)}
.cb-dish i{position:absolute;inset:0;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:cbRing 1.1s ease-out infinite}
.cb-dish i:nth-child(2){animation-delay:.36s}.cb-dish i:nth-child(3){animation-delay:.72s}
@keyframes cbRing{from{transform:scale(.2);opacity:.9}to{transform:scale(1);opacity:0}}
.cb-ct{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.cb-dots i{font-style:normal;animation:cbDot 1s infinite}.cb-dots i:nth-child(2){animation-delay:.2s}.cb-dots i:nth-child(3){animation-delay:.4s}
@keyframes cbDot{0%,100%{opacity:.15}50%{opacity:1}}
.cb-bar{width:min(240px,70%);height:6px;border:1px solid var(--text);background:repeating-linear-gradient(90deg,transparent 0 5px,color-mix(in srgb,var(--text) 18%,transparent) 5px 6px)}
.cb-bar i{display:block;height:100%;width:0;background:var(--text);animation:cbFill 1s steps(12) forwards}
@keyframes cbFill{to{width:100%}}
.cb-sub{margin:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cb-page.cb-in .cb-card,.cb-dish i,.cb-dots i,.cb-bar i{animation:none}}
@media (min-width:861px){.cb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cb-list .ct-card{margin:0}}
/* the header's play / record button while a view runs: the same light highlight as the other active header buttons, filling its cell (no outline ring) */
.hud .party-btns .sim-btn.running{background:color-mix(in srgb, var(--hd-text) 11%, var(--hd-bg))!important;border-color:transparent!important;color:var(--hd-accent, var(--accent))!important;animation:none}
.hud .party-btns .sim-btn.running::after{display:none}
.hud .party-btns .sim-btn.rec-btn.running{color:var(--danger, #e5484d)!important}
.hud .party-btns .sim-btn.running.live{color:var(--r-green)!important}
/* the map's bottom buttons float on the map (no bar behind them), each with its own solid fill so it reads over the terrain */
#mapWrap .map-bar{display:none}
#mapWrap .map-bottom .btn:not([aria-pressed=true]),#mapWrap .map-cycle{background:var(--hd-bg, #14171B)!important}
#mapWrap .gps-btns .btn:not(.primary){background:var(--hd-bg, #14171B)!important}
#mapWrap .map-brk{bottom:calc(var(--mbar) + 10px)}

/* Faction skins in a piece's colour popup (bot.js colorPop): Standard and the four faction icons above the swatches */
.skin-row{display:flex;gap:6px;margin:8px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.skin-opt{position:relative;width:38px;height:38px;padding:0;display:grid;place-items:center;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2);cursor:pointer}
.skin-opt.on{border-color:var(--text);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}
.skin-opt .skin-ic{width:26px;height:26px;object-fit:contain}.skin-opt.locked .skin-ic{opacity:.55}
.skin-opt .wheel{width:20px;height:20px;border-radius:50%;background:conic-gradient(#e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);box-shadow:inset 0 0 0 4px var(--panel-2)}
.skin-lock{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:var(--panel);border:1px solid var(--line-strong);display:grid;place-items:center}.skin-lock svg{width:10px;height:10px}.skin-lock .pick-lock{position:static;display:contents}
.pick-cog.skin{background:#1B1B1E;border-color:#1B1B1E}.pick-cog .cog-ic{width:17px;height:17px;object-fit:contain}
/* The wordmark is set in normal case (Gorpology™), never forced to capitals */
.brand h1,.login-box h1,.login-logo{text-transform:none!important;letter-spacing:.01em}
/* Guests: no Contracts tab on the Atlas; the Season page ends with a Sign in button (season.js) */
body.guest [data-atlas-view="contracts"]{display:none}
.sn-signin{display:flex;justify-content:center;margin:22px 0 6px}.sn-signin .btn{min-width:200px;justify-content:center}

/* ========== Sign-in and onboarding, field-terminal design (app.js renderLogin, onboard.js frame) ========== */
#login.lg-v2{display:block;padding:0;overflow-y:auto;background:var(--bg);place-items:initial}
.lg2{min-height:100%;display:flex;flex-direction:column}
/* the hero: a dark map sheet with the mark and the name */
.lg-hero,.ob-rail{position:relative;background:#14171B;color:#E9EDF2;overflow:hidden}
.lg-hero::before,.ob-rail::before{content:"";position:absolute;inset:0;background:rgba(233,237,242,.1);-webkit-mask:url(/img/topo.svg) center/880px;mask:url(/img/topo.svg) center/880px;pointer-events:none}
.lg-hero{padding:calc(env(safe-area-inset-top,0px) + 48px) 20px 64px;text-align:center}
.lg-hero>*{position:relative}
.lg-collar{position:absolute!important;inset:calc(env(safe-area-inset-top,0px) + 12px) 12px 12px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,237,242,.55);pointer-events:none}
.lg-collar span{position:absolute}.lg-collar span:nth-child(1){left:0;top:0}.lg-collar span:nth-child(2){right:0;top:0}.lg-collar span:nth-child(3){left:0;bottom:0}.lg-collar span:nth-child(4){right:0;bottom:0}
.lg-collar span:nth-child(3),.lg-collar span:nth-child(4){display:none}
.lg-hero .login-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;color:#E9EDF2;font-family:var(--slab);font-weight:400;font-size:44px;line-height:1;letter-spacing:.01em}
.lg-hero .login-logo svg{width:104px;height:104px;margin:0}
.lg-hero .login-logo sup{font:600 13px var(--font);vertical-align:top;position:relative;top:4px;margin-left:2px}
.lg-line{margin:10px auto 0;max-width:34ch;font-family:var(--ital);font-style:italic;font-size:16px;line-height:1.35;color:rgba(233,237,242,.78)}
.lg-chips{display:none;gap:26px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,237,242,.7);margin:26px 0 0}
.lg-small .lg-hero{padding-bottom:58px}.lg-small .lg-line{display:none}.lg-small .lg-hero .login-logo{font-size:38px}.lg-small .lg-hero .login-logo svg{width:84px;height:84px}
/* the side with the form: the card overlaps the hero on phones */
.lg-side{position:relative;flex:1;padding:0 14px calc(env(safe-area-inset-bottom,0px) + 16px);margin-top:-36px}
.lg-card{position:relative;width:min(420px,100%);margin:0 auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:0;padding:20px 20px 18px;box-shadow:var(--shadow-1)}
.lg-card::before,.ob-card::before{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--text) 6%, transparent);-webkit-mask:url(/img/topo.svg) 30% 20%/760px;mask:url(/img/topo.svg) 30% 20%/760px;pointer-events:none}
.lg-card>*:not(.corner):not(.login-close),.ob-card>*:not(.corner){position:relative}
.lg-card .corner,.ob-card .corner{position:absolute;width:14px;height:14px;border:2px solid var(--text);pointer-events:none;z-index:1}
.lg-card .corner.tl,.ob-card .corner.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}.lg-card .corner.tr,.ob-card .corner.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.lg-card .corner.bl,.ob-card .corner.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}.lg-card .corner.br,.ob-card .corner.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.lg-card .login-close{position:absolute;top:8px;right:8px;z-index:2}
.lg-kick{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.lg-kick .tag{color:var(--text)}
.lg-title,.ob-v2 .ob-card h2.big{font:750 30px/1.02 var(--font);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase;margin:12px 0 4px;color:var(--text)}
.lg-sub{font-family:var(--ital);font-style:italic;font-size:16px;line-height:1.4;color:var(--muted);margin:0 0 4px}.lg-sub .mono{font-style:normal;font-size:13px;color:var(--text)}
.lg-intro{font-size:14px;line-height:1.5;color:var(--text);margin:14px 0 0}.lg-intro.lg-quiet{color:var(--muted);font-size:13px}
.lg-card .login-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin:14px 0 2px;border:1.5px solid var(--text);border-radius:0;background:none}
.lg-card .login-switch .btn{height:38px;border:0;border-radius:0;background:transparent;color:var(--text);font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;justify-content:center;box-shadow:none}
.lg-card .login-switch .btn[aria-selected="true"]{background:var(--text);color:var(--panel)}.lg-card .login-switch em{font-style:normal;opacity:.55;margin-right:6px}
.lg-card .field,.ob-v2 .ob-card .field{display:block;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.lg-card .field .muted,.ob-v2 .ob-card .field .muted{text-transform:none;letter-spacing:.04em}
.lg-card input:not([type=checkbox]),.ob-v2 .ob-card input:not([type=checkbox]):not([type=color]):not([type=range]),.ob-v2 .ob-card select{width:100%;height:46px;border:1.5px solid var(--line-strong);border-radius:0;background:color-mix(in srgb, var(--panel) 55%, var(--bg));padding:0 12px;font-size:16px;color:var(--text)}
.lg-card input:not([type=checkbox]):focus,.ob-v2 .ob-card input:focus,.ob-v2 .ob-card select:focus{outline:none;border-color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.lg-card .pw input{padding-right:78px}
.lg-card .pw-eye{right:1.5px;height:calc(100% - 3px);padding:0 12px;border-left:1px solid var(--line);border-radius:0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.lg-forgot{text-align:right;margin:8px 0 0}
.lg-card .linkish,.ob-v2 .ob-card .linkish{color:var(--ice);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lg-go,.ob-v2 .ob-card .btn.primary{min-height:48px;border-radius:0;font:750 14px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;justify-content:center;box-shadow:3px 3px 0 var(--text)}
.lg-card .lg-go{margin-top:4px}
.lg-card .small,.lg-card p.muted{font:13px/1.5 var(--font)}
.lg-card .check,.ob-v2 .ob-card .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.lg-card .check input,.ob-v2 .ob-card .check input{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;accent-color:var(--text)}
.lg-browse{width:100%;justify-content:center;margin-top:12px;border-radius:0;font:750 12.5px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase}
.lg-sent{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.lg-sent .stamp{margin-top:10px;flex:0 0 auto}
.lg-log{font-size:11px;line-height:1.9;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}.lg-log b{color:var(--text);font-weight:500}.lg-log .ok{color:var(--ice)}
.lg-status{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 0}.lg-status b{color:var(--ice);font-weight:500}
@media (min-width:900px){
  .lg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,40%);min-height:100vh}
  .lg-hero{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:80px 7vw}
  .lg-collar{inset:18px}.lg-collar span:nth-child(3),.lg-collar span:nth-child(4){display:block}
  .lg-hero .login-logo,.lg-small .lg-hero .login-logo{align-items:flex-start;font-size:76px;gap:10px}.lg-hero .login-logo svg,.lg-small .lg-hero .login-logo svg{width:170px;height:170px;margin-left:-12px}
  .lg-hero .login-logo sup{font-size:20px;top:10px}
  .lg-line,.lg-small .lg-line{display:block;margin:14px 0 0;max-width:560px;font-size:24px;line-height:1.3}
  .lg-chips{display:flex}
  .lg-side{display:flex;flex-direction:column;justify-content:center;margin:0;padding:40px 32px}
  .lg-side::before{content:"";position:absolute;inset:0;background:var(--topo, rgba(13,27,36,.4));opacity:.55;-webkit-mask:url(/img/topo.svg) center/880px;mask:url(/img/topo.svg) center/880px;pointer-events:none}
  .lg-side>*{position:relative}.lg-status{display:none}
}
/* onboarding: the rail (wide screens), the top bar (phones), the card */
#onboard.ob-v2{display:block;padding:0;background:var(--bg);backdrop-filter:none;overflow:hidden}
.ob2{display:flex;width:100%;height:100%;min-height:100%}
.ob-rail{display:none;flex:0 0 340px;padding:40px 32px}
.ob-rail>*{position:relative}
.ob-brand{display:flex;align-items:center;gap:12px}.ob-brand svg{width:46px;height:46px;color:#E9EDF2}.ob-brand b{font-family:var(--slab);font-weight:400;font-size:28px}.ob-brand sup{font:600 10px var(--font);vertical-align:top}
.ob-rn{margin:44px 0 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,237,242,.6)}
.ob-list{list-style:none;margin:0;padding:0}.ob-list li{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(233,237,242,.14);color:rgba(233,237,242,.4)}
.ob-list li .mono{font-size:11px;letter-spacing:.12em;opacity:.7}.ob-list li .g{font-size:13px;width:14px;opacity:1}.ob-list li b{font:750 17px var(--font);font-stretch:75%;letter-spacing:.08em;text-transform:uppercase}
.ob-list li.done{color:rgba(233,237,242,.75)}.ob-list li.on{color:#fff}.ob-list li.on .g{color:#FF8A4C}.ob-list li .ok{margin-left:auto;color:#67D0DF;opacity:1}
.ob-rv{position:absolute!important;left:32px;bottom:28px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,237,242,.5);margin:0}
.ob-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative;background:var(--panel)}
.ob-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;border-bottom:1px solid var(--line-strong);background:var(--panel);position:relative;z-index:2}
.ob-top svg{width:30px;height:30px}.ob-top .ob-w{font-family:var(--slab);font-weight:400;font-size:18px}.ob-top .ob-w sup{font:600 9px var(--font);vertical-align:top}
.ob-top .ob-n{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.ob-top .lang-pick,.ob-top>:last-child:not(.ob-n){margin-left:auto}
.ob-scroll{flex:1;overflow-y:auto;position:relative}
.ob-v2 .ob-card{position:relative;width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:16px 16px 0;overflow:visible}
.ob-v2 .ob-card::before{position:fixed}
.ob-v2 .ob-card .corner{display:none}
.ob-v2 .ob-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 16px}
.ob-v2 .ob-steps span{font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ob-v2 .ob-steps i{display:block;width:auto;height:8px;border:1.5px solid var(--text);border-radius:0;background:none;margin:0 0 5px}
.ob-v2 .ob-steps .done i{background:var(--text)}.ob-v2 .ob-steps .on i{background:var(--accent);border-color:var(--accent)}.ob-v2 .ob-steps .on{color:var(--text)}
.ob-v2 .ob-about p{font-size:14px;line-height:1.5;margin:10px 0 0}
.ob-v2 .ob-game{border:1.5px solid var(--line-strong);padding:10px 12px;margin-top:12px;background:color-mix(in srgb, var(--panel) 50%, var(--bg))}.ob-v2 .ob-game .small{display:block;margin-top:2px}
.ob-lead{font-size:14px;margin:0}
.ob-v2 .ob-foot{position:sticky;bottom:0;z-index:2;margin:18px -16px 0;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:var(--panel);border-top:1px solid var(--line-strong);display:flex;gap:10px}
.ob-v2 .ob-foot .btn{flex:1}.ob-v2 .ob-foot .btn.ghost{flex:0 0 96px;border:1.5px solid var(--line-strong);border-radius:0;justify-content:center;font:750 13px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase}
.ob-v2 .eot{margin:14px 0 20px}
.ob-unit{display:grid;gap:2px;border:1.5px solid var(--text);padding:10px 12px;margin:12px 0 2px;background:var(--bg)}
.ob-unit .l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.ob-unit>b{font:750 20px/1.05 var(--font);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase}
.ob-unit .h{font-size:12px;color:var(--ice)}.ob-unit .rd{display:flex;gap:18px;margin-top:4px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.ob-unit .rd b{display:block;font:500 15px var(--tall);letter-spacing:0;color:var(--text);text-transform:none}
.ob-at{display:flex;align-items:center;border:1.5px solid var(--line-strong);background:color-mix(in srgb, var(--panel) 55%, var(--bg))}.ob-at>span{padding:0 0 0 12px;color:var(--muted)}
.ob-v2 .ob-card .ob-at input{border:0;padding-left:4px;background:transparent}.ob-v2 .ob-card .ob-at:focus-within{border-color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}.ob-v2 .ob-card .ob-at input:focus{box-shadow:none}
@media (min-width:900px){
  .ob-rail{display:block}.ob-top{display:none}
  .ob-main{background:var(--bg)}
  .ob-main::before{content:"";position:absolute;inset:0;background:var(--topo, rgba(13,27,36,.4));opacity:.55;-webkit-mask:url(/img/topo.svg) center/880px;mask:url(/img/topo.svg) center/880px;pointer-events:none}
  .ob-scroll{display:grid;place-items:center;padding:40px 32px}
  .ob-v2 .ob-card{width:min(640px,100%);background:var(--panel);border:1px solid var(--line-strong);padding:28px 30px 24px;box-shadow:var(--shadow-1)}
  .ob-widepage .ob-card{width:min(1040px,100%)}
  .ob-v2 .ob-card::before{position:absolute}.ob-v2 .ob-card .corner{display:block}
  .ob-v2 .ob-steps{display:none}
  .ob-v2 .ob-foot{position:static;margin:22px 0 0;padding:0;border:0;background:none;justify-content:flex-end}.ob-v2 .ob-foot .btn{flex:0 0 auto;min-width:180px}.ob-v2 .ob-foot .btn.ghost{min-width:120px}
  .ob-v2 .ob-card h2.big{font-size:36px}
}
.lg-card .login-err:empty,.ob-v2 .ob-card .login-err:empty{min-height:0;margin:0}.lg-card .login-err{margin:8px 0}
.ob-v2 .ob-card .ob-at input:not([type=checkbox]){border:0!important;background:transparent!important;box-shadow:none!important;padding-left:4px}
.ob-v2 .ob-about{background:none;border:0;padding:0;margin:0}.lg-sent .stamp{text-transform:uppercase}.ob-top .ob-n{white-space:nowrap}
body.ob-standalone #login.lg-v2{top:0!important;bottom:0!important}
.ob-v2 .hach{margin:14px 0}
/* Sign in another way: Google, a phone code (app.js renderLogin) */
.lg-or{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.lg-alt{width:100%;min-height:44px;justify-content:center;gap:10px;margin-top:8px;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel);font:650 14px var(--font)}.lg-alt .g-logo{width:18px;height:18px}
.lg-apple{background:#000;color:#fff;border-color:#000}.lg-apple:hover{background:#1a1a1a}   /* Apple's black button: always black, both themes */

/* The first-quest card (App.firstRunCard): an order sheet with bracket corners, a little trail map, two steps */
.first-run.fr2{position:relative;max-width:560px;margin:14px auto;padding:18px 18px 16px;border:1px solid var(--line-strong);border-radius:0;background:var(--panel)}
.fr2::before{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--text) 6%, transparent);-webkit-mask:url(/img/topo.svg) 30% 20%/760px;mask:url(/img/topo.svg) 30% 20%/760px;pointer-events:none}
.fr2>*:not(.corner){position:relative}
.fr2 .corner{position:absolute;width:13px;height:13px;border:2px solid var(--text);pointer-events:none}
.fr2 .corner.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}.fr2 .corner.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}.fr2 .corner.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}.fr2 .corner.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.fr2 h3{font:750 28px/1.02 var(--font);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase;margin:10px 0 4px}
.fr2 .fr-sub{font-family:var(--ital);font-style:italic;font-size:16px;line-height:1.4;color:var(--muted);margin:0}
.fr-map{position:relative;height:150px;margin:12px 0;border:1.5px solid var(--line-strong);background:var(--bg);color:var(--text);overflow:hidden}
.fr-map::before{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--text) 26%, transparent);-webkit-mask:url(/img/topo.svg) center/520px;mask:url(/img/topo.svg) center/520px}
.fr-map svg:not(.fr-cairn){position:absolute;inset:0;width:100%;height:100%}.fr-map .fr-cairn{position:absolute;right:22px;top:4px;width:44px;height:44px}
.fr-map .mono{position:absolute;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.fr-here{left:30px;bottom:8px}.fr-top{right:12px;top:52px}
.fr-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}.fr-compact .fr-step:first-of-type{margin-top:10px}
.fr-step .n{font:500 22px var(--tall);line-height:1}.fr-step b{display:block;font:750 15px var(--font);font-stretch:75%;letter-spacing:.06em;text-transform:uppercase}.fr-step p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.fr-act{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:12px}.fr-act .btn{min-height:46px;justify-content:center;border-radius:0}
.fr-act .btn:not(.primary){border:1.5px solid var(--text);font:750 13px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase}

/* The guest gate on locked tabs (App.renderGuest): a dark map-sheet header, what the tab does, the ways in */
.guest-card.gc2{width:min(460px,100%);max-width:none;text-align:left;background:none;border:0;padding:0}
.gc-hero{position:relative;background:#14171B;color:#E9EDF2;padding:22px 18px 46px;overflow:hidden}
.gc-hero::before{content:"";position:absolute;inset:0;background:rgba(233,237,242,.1);-webkit-mask:url(/img/topo.svg) center/880px;mask:url(/img/topo.svg) center/880px;pointer-events:none}
.gc-hero>*{position:relative}.gc-hero .lg-kick{color:rgba(233,237,242,.6)}.gc-hero .lg-kick .tag{color:#fff}
.gc-hero h2.big{font:750 30px/1.02 var(--font);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase;margin:12px 0 6px;color:#fff}
.gc-hero p{margin:0;font-family:var(--ital);font-style:italic;font-size:16px;line-height:1.4;color:rgba(233,237,242,.78)}
.gc-body{position:relative;margin:-28px 10px 0;background:var(--panel);border:1px solid var(--line-strong);padding:16px 18px}
.gc-body::before{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--text) 6%, transparent);-webkit-mask:url(/img/topo.svg) 30% 20%/760px;mask:url(/img/topo.svg) 30% 20%/760px;pointer-events:none}
.gc-body>*:not(.corner){position:relative}
.gc-body .corner{position:absolute;width:13px;height:13px;border:2px solid var(--text);pointer-events:none}
.gc-body .corner.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}.gc-body .corner.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}.gc-body .corner.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}.gc-body .corner.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.gc-feat{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}.gc-feat:first-of-type{border-top:0}.gc-feat .g{font-size:12px;color:var(--ice);padding-top:1px}
.gc-act{display:grid;gap:8px;margin-top:14px}.gc-act .btn{min-height:46px;justify-content:center;border-radius:0}
.gc-act .btn:not(.primary){border:1.5px solid var(--text);background:var(--panel);font:750 13px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase}
.gc-note{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 0}.gc-note .linkish{color:var(--ice);font-weight:600;text-decoration:underline}

/* A profile, field-terminal style (character.js render, profile.js): someone else's name on a dark veil over their scene,
   mono tabs, numbers as a readout grid, badges as round patches, collectibles as faction slots */
#view-char.prof-other .char-hud::before{content:"";position:absolute;inset:-12px -16px -18px;background:linear-gradient(90deg,rgba(20,23,27,.86) 0%,rgba(20,23,27,.55) 45%,rgba(20,23,27,0) 78%);pointer-events:none;z-index:-1}
#view-char.prof-other .char-hud{z-index:2;isolation:isolate;top:12px;bottom:18px;color:#fff}
#view-char.prof-other .char-hud>div{display:flex;flex-direction:column;align-items:flex-start;height:100%}
#view-char.prof-other .char-hud .back-pill{background:rgba(20,23,27,.7);color:#fff;border:1px solid rgba(233,237,242,.4);border-radius:0;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
#view-char.prof-other .char-hud .hud-tag{margin-top:auto;color:#fff}
#view-char.prof-other .char-hud h2.big{font:750 36px/1 var(--font);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase;margin:6px 0 2px;color:#fff}
.hud-handle{font-size:12px;letter-spacing:.04em;color:#7FD4E0}
#view-char.prof-other .char-hud .fr-actions{margin-top:10px;pointer-events:auto}
#view-char.prof-other .char-hud .fr-actions .btn{background:#fff;color:#0D1B24;border-color:#fff;border-radius:0;font:750 12px var(--font);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;box-shadow:2px 2px 0 #000}
#charPanel .prof-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--text);background:none}
#charPanel .prof-tabs .btn{flex:1;border:0;border-radius:0;background:none;box-shadow:none;padding:11px 4px 9px;justify-content:center;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#charPanel .prof-tabs .btn[aria-selected="true"]{color:var(--text);box-shadow:inset 0 -3px 0 var(--text)}
#charPanel .pc-stats{gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);grid-template-columns:repeat(3,minmax(0,1fr))}
#charPanel .pc-stats>div{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:7px 9px;background:none;border-radius:0}
#charPanel .pc-stats dt{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#charPanel .pc-stats dd{font:500 21px var(--tall);margin:2px 0 0}
#charPanel .badges{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#charPanel .badge.patch{aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center;text-align:center;padding:12px;gap:2px;border:2px solid var(--line-strong);background:var(--panel-2)}
#charPanel .badge.patch::before{border-radius:50%}
#charPanel .badge.patch b{font:750 10.5px/1.15 var(--font);font-stretch:75%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#charPanel .badge.patch .small{display:none}
#charPanel .badge.patch .bar{width:56%;margin-top:4px}
#charPanel .badge.patch.on{background:var(--cat);border-color:var(--cat);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
#charPanel .badge.patch.on b,#charPanel .badge.patch.on svg{color:#fff}
.coll2 .mq-kicker{margin-bottom:6px}
.coll-fh{display:flex;align-items:center;gap:8px;margin-top:12px;padding-left:8px;border-left:5px solid var(--fc,var(--line-strong));font:750 13px var(--font);font-stretch:75%;letter-spacing:.08em;text-transform:uppercase}.coll-fh img{width:20px;height:20px}
.coll-fh.f-gorp_corp{--fc:#FF6A13}.coll-fh.f-decaf{--fc:#9AA1AB}.coll-fh.f-coven{--fc:#B678D8}.coll-fh.f-gorpeus{--fc:#E0262F}
.coll-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px}.coll-slots i{aspect-ratio:1;border:1.5px dashed var(--line-strong);display:grid;place-items:center;font:500 14px var(--tall);font-style:normal;color:var(--muted);background:var(--bg)}
@media (min-width:900px){#view-char.prof-other .char-hud::before{background:linear-gradient(90deg,rgba(20,23,27,.8) 0%,rgba(20,23,27,.35) 30%,rgba(20,23,27,0) 50%)}}
/* Five contracts per faction on a card's back: tighter lines so they fit (the back still scrolls if a brief runs long) */
.fx-back-types ul{gap:4px}.fx-back-types li.fx-ct{padding:5px 10px 5px 12px;line-height:1.32;font-size:12.5px}.fx-back-types li.fx-ct .corner{display:none}.fx-back-types li b{font-size:10.5px}
@media (max-width:600px){.fx-back-types li.fx-ct{font-size:11.5px}}
/* An open faction card on a phone: the description never shrinks to fit the contracts (it was squeezed to a line or less); the
   open card gets more room, and the back scrolls if a long description still needs it */
.fx-card.open .fx-back>*{flex-shrink:0}
/* A contract card (and its detail) wears the contract's own art under a dark veil and the dot matrix; the veil is heaviest on
   the text side (contracts.js bg) */
.ct-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:60% 40%}
.ct-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(241,234,220,.09) 1px, transparent 1.5px) 0 0/6px 6px, linear-gradient(90deg, rgba(14,14,16,.92) 0%, rgba(14,14,16,.78) 45%, rgba(14,14,16,.5) 100%)}
.ct-card>*:not(.ct-bg):not(.corner){position:relative;z-index:1}.ct-card>.corner{z-index:2}
.opt-del{margin:14px 0 0}.danger-link{color:var(--r-red,#C8322B);font-weight:600;text-decoration:underline}
/* Profile tabs as a segmented control (each a bordered cell, the open one filled), so where one ends and the next starts is clear */
#charPanel .prof-tabs{display:flex;gap:0;border:1.5px solid var(--text);border-bottom-width:1.5px;background:none}
#charPanel .prof-tabs .btn{flex:1;min-width:0;border:0;border-left:1.5px solid var(--text);border-radius:0;background:var(--panel);box-shadow:none;padding:10px 4px;justify-content:center;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
#charPanel .prof-tabs .btn:first-child{border-left:0}
#charPanel .prof-tabs .btn[aria-selected="true"]{background:var(--text);color:var(--panel);box-shadow:none}
/* the Activity tab's Contracts section */
.pc-facs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.pc-fac{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-strong);border-left:4px solid var(--fc);font-size:13px}.pc-fac img{width:18px;height:18px}.pc-fac b{margin-left:auto;font:500 18px var(--tall)}
.pc-fac.f-gorp_corp{--fc:#FF6A13}.pc-fac.f-decaf{--fc:#9AA1AB}.pc-fac.f-coven{--fc:#B678D8}.pc-fac.f-gorpeus{--fc:#E0262F}
.pc-recent li{display:flex;justify-content:space-between;gap:10px}
/* The loading screen (app.js Busy): a dark map sheet, contours drifting up, the Waystone floating, one word under it */
#busy{position:fixed;inset:0;z-index:1300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#14171B;color:#E9EDF2;overflow:hidden;transition:opacity .35s}
#busy[hidden]{display:none}#busy.out{opacity:0;pointer-events:none}
.busy-topo{position:absolute;left:0;right:0;top:0;height:calc(100% + 880px);background:rgba(233,237,242,.1);-webkit-mask:url(/img/topo.svg) 0 0/880px;mask:url(/img/topo.svg) 0 0/880px;animation:busyDrift 30s linear infinite;will-change:transform}
@keyframes busyDrift{from{transform:translateY(0)}to{transform:translateY(-880px)}}
.busy-mark{position:relative;display:block;width:min(46vw,190px);height:auto;aspect-ratio:1}
.busy-msg{position:relative;margin:0;font:500 12px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(233,237,242,.8)}
.busy-msg::after{content:"";display:inline-block;width:1.6em;text-align:left;animation:busyDots 1.4s steps(4) infinite}
@keyframes busyDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.busy-topo,.busy-msg::after{animation:none}}
/* Sign-in page: the cairn beside the wordmark at the header's proportions, and no pulling the page down past the header */
.lg-hero .login-logo,.lg-small .lg-hero .login-logo{flex-direction:row;justify-content:center;align-items:center;gap:.22em}
.lg-hero .login-logo svg,.lg-small .lg-hero .login-logo svg{width:1.5em;height:1.5em;margin:0}
#login.lg-v2{overscroll-behavior:none}
html:has(body.lg-open),body.lg-open{overscroll-behavior:none}
@media (min-width:900px){
  .lg-hero .login-logo,.lg-small .lg-hero .login-logo{justify-content:flex-start}
  .lg-hero .login-logo svg,.lg-small .lg-hero .login-logo svg{width:1.5em;height:1.5em;margin:0}
}
/* The download button while it works: the progress ring on a track you can see, inside an arc that spins from the first moment (even at 0%) */
.dl-btn.busy{color:var(--text);border-color:var(--text)}
.dl-btn.busy .dl-ring{background:conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 22%, transparent) 0)}
.dl-btn.busy::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--text);border-right-color:var(--text);animation:dlSpin .9s linear infinite;pointer-events:none}
@keyframes dlSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dl-btn.busy::after{animation-duration:3s}}
/* The Atlas with no signal: a small note when you search or reach the end of what's on the device (atlas.js offNote) */
.atlas-offline{display:flex;align-items:center;gap:8px;margin:6px 0 12px;color:var(--muted)}
.atlas-grid + .atlas-offline{justify-content:center;margin:16px 0 8px}
.ao-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn, #c77700)}
/* Profile tabs: inset from the panel's edges (the phone rule above bleeds them to the edge), and room between the badge categories and the badges */
#charPanel .prof-tabs{margin:4px 0 16px!important;padding:0!important;width:auto}
@media (max-width:420px){#charPanel .prof-tabs .btn{font-size:9.5px;letter-spacing:.05em;padding:10px 2px}}
@media (max-width:400px){#charPanel .prof-tabs .btn .notif-count{min-width:0;width:8px;height:8px;padding:0;margin-left:4px;border-radius:50%;font-size:0;line-height:0}}   /* the number stays for screen readers; the cell is too narrow to show it */
#charPanel .cat-chips + .badges{margin-top:14px}
/* Phones: the route page's actions (add, Simulate, heart, share) on one row */
@media (max-width:480px){#atlasDetail .rd-hero-actions{gap:5px}#atlasDetail .rd-hero-actions>details>summary.btn:not(.icon),#atlasDetail .rd-hero-actions>.btn:not(.icon){padding-left:8px;padding-right:8px}#atlasDetail .rd-hero-actions>details>summary.btn.icon,#atlasDetail .rd-hero-actions>.btn.icon{width:38px;padding-left:0;padding-right:0;justify-content:center}}
/* Atlas search on phones, while the box is in use: it sits at the top of the list, the title row and the Season post step aside */
@media (max-width:860px){#atlasList.as-focus > .atlas-head,#atlasList.as-focus > #atlasPost{display:none}#atlasList.as-focus > .atlas-searchbar{top:calc(-1 * var(--pt, 0px));margin-top:0}}
html,body{overscroll-behavior-y:none}
/* The route page's action buttons, one height for all (add, Simulate, heart, share) */
#atlasDetail .rd-hero-actions>.btn,#atlasDetail .rd-hero-actions>details>summary.btn{height:40px;min-height:40px;padding-top:0;padding-bottom:0;display:flex;align-items:center;box-sizing:border-box}
/* ========== Atlas route page, redesign (approved mockups, assets/mockups/route-page.mjs): the kicker and a difficulty meter in the
   header, the readout strip under it, bordered sticky tabs with counts, and on phones the map inside Overview ========== */
.rd-v3 .rd-kick span+span:not(.tag)::before{content:"· ";opacity:.6}
.rd-v3 .rd-kick .tag + span::before{content:""}
.rd-v3 .atlas-rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rd-diff{display:inline-flex;align-items:center;gap:3px}.rd-diff i{width:16px;height:6px;background:color-mix(in srgb, currentColor 22%, transparent)}
.rd-diff.d1 i.f{background:#4CAF7A}.rd-diff.d2 i.f{background:#5B9BD5}.rd-diff.d3 i.f{background:#E0A33B}.rd-diff.d4 i.f{background:#E06A3B}.rd-diff.d5 i.f{background:#C0392B}
.rd-diff b{margin-left:6px;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.rd-readout{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));background:var(--panel);color:var(--text);border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text)}
.rd-readout > div{padding:9px 10px 8px;border-left:1px solid var(--line-strong);min-width:0}.rd-readout > div:first-child{border-left:0}
.rd-readout small{display:block;font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rd-readout b{display:block;font:600 24px/1.1 var(--tall);white-space:nowrap}.rd-readout b i{font:500 11px var(--mono);font-style:normal;color:var(--muted);margin-left:3px}
.rd-readout em{display:block;font:normal 10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-ro-note{margin:8px 12px 0}
/* the tabs: bordered cells, the open one filled, counts after the names; they stick to the top while you scroll */
.rd-v3 .rd-info > .rd-tabs{display:flex;gap:0;padding:0;margin:0 -18px 16px;border:0;border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text);background:var(--panel)}
.rd-v3 .rd-info > .rd-tabs .btn{flex:1;min-width:0;border:0;border-left:1.5px solid var(--text);border-radius:0;background:transparent;box-shadow:none;padding:11px 10px;justify-content:center;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.rd-v3 .rd-info > .rd-tabs .btn:first-child{border-left:0}
.rd-v3 .rd-info > .rd-tabs .btn[aria-selected="true"]{background:var(--text);color:var(--panel)}
.rd-v3 .rd-info > .rd-tabs .btn .muted{color:inherit;opacity:.6;margin-left:4px}
/* section headings in the tabs, mono */
.rd-v3 .rd-know,.rd-v3 .rd-panel .atlas-sec > h3{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.rd-v3 .rd-ov-part + .rd-ov-part{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.rd-v3 .rd-tags .chip{border-radius:0;background:transparent;border:1px solid var(--line-strong);font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.rd-v3 .rd-tags .chip.warn{border-color:var(--warn, #c77700);color:var(--warn, #c77700)}
.rd-src{margin:10px 0 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.rd-src a{color:var(--text)}
.rd-mgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;margin-top:5px;max-width:330px}
.rd-mgrid span{font:600 9px var(--mono);text-align:center;padding:3px 0;background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--muted)}.rd-mgrid span.on{background:#2E6B4E;color:#fff}
.rd-v3 .rd-ov-kv dd > span:first-child:not(.rd-mgrid){display:block}
/* Quest: each day's stops on a line, the highest one marked */
.rd-v3 .rd-day .atlas-stops{list-style:none;margin:10px 0 4px;padding:0 0 0 24px;position:relative}
.rd-v3 .rd-day .atlas-stops::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--text)}
.rd-v3 .rd-day .atlas-stops > li{position:relative;padding:4px 0 10px;border:0}
.rd-v3 .rd-day .atlas-stops > li::before{content:"";position:absolute;left:-23px;top:8px;width:12px;height:12px;background:var(--panel);border:2px solid var(--text);box-sizing:border-box}
.rd-v3 .rd-day .atlas-stops > li.rd-top::before{background:#FF8A3D;transform:rotate(45deg)}
.rd-v3 .rd-day > b{font:600 17px/1.15 var(--tall);text-transform:uppercase;letter-spacing:.01em}
/* Gear: the count, a bar of the required items */
.rd-gearsum{margin:0 0 12px}.rd-big{font:600 40px/1 var(--tall)}.rd-big i{font:500 12px var(--mono);font-style:normal;color:var(--muted);margin-left:6px}
.rd-segbar{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;margin:8px 0 0}.rd-segbar i{height:10px;background:color-mix(in srgb, var(--text) 12%, transparent)}.rd-segbar i.f{background:var(--text)}
.rd-v3 .gear-more h4:empty{display:none}
/* Reviews: the score and the spread of stars */
.rd-score{display:flex;gap:16px;align-items:center;margin:0 0 14px}.rd-score-n{font:600 44px/1 var(--tall);min-width:84px}
.rd-score-n small{display:block;margin-top:4px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rd-score-bars{flex:1;display:grid;gap:3px}.rd-score-bars div{display:flex;align-items:center;gap:6px;font:500 10px var(--mono);color:var(--muted)}
.rd-score-bars i{flex:1;height:6px;background:color-mix(in srgb, var(--text) 12%, transparent)}.rd-score-bars b{display:block;height:100%;background:var(--text)}
.rd-v3 .rd-validate{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
/* phones: header (with the readout), the tabs, then the map (Overview only) and the tab's content */
@media (max-width:1000px){
  .rd-v3 .rd-tabs [data-rd-tab="overview"]{display:inline-flex!important}
  .rd-v3 .rd-info > .rd-panel[data-rd-panel="overview"]:not([hidden]){display:block!important}
  .rd-v3 .rd-layout > .rd-hero{order:1}
  .rd-v3 .rd-layout .rd-info > .rd-tabs{order:2;position:sticky;top:0;z-index:6;margin:0;border:1.5px solid var(--text);overflow-x:auto;scrollbar-width:none}
  .rd-v3 .rd-layout .rd-info > .rd-tabs .btn{flex:none;padding:10px 11px}
  .rd-v3 .rd-layout > .rd-mapcol{order:3;border-top:0;border-radius:0;padding:10px 12px 0}
  .rd-v3 .rd-layout:not(.rd-tab-overview) > .rd-mapcol{display:none!important}
  .rd-v3 .rd-layout .rd-info > .rd-panel{order:4;border-top:0}
  .rd-v3 .rd-layout.rd-tab-overview .rd-info > .rd-panel{border-top:0}
}
@media (min-width:1001px){ .rd-v3 .rd-info > .rd-tabs{position:sticky;top:0;z-index:5} }
/* route page redesign, fixes: no dot right after the tag; the difficulty name readable on the photo; the readout's notes wrap on phones; tab counts plain */
.rd-v3 .rd-kick span.tag + span::before{content:none}
.rd-v3 .rd-info > .rd-tabs .btn .muted{border:0;background:none;padding:0;border-radius:0;min-width:0;font:inherit}
@media (max-width:600px){.rd-readout em{white-space:normal;overflow:visible;line-height:1.25}.rd-readout b{font-size:21px}.rd-readout > div{padding:8px 7px 7px}}
/* the Quest tab's Prereqs / Main quest / Side quests switch, as a bordered strip */
.rd-v3 .rd-quests .tabbar{display:flex;gap:0;padding:0;margin:10px 0 14px;border:1.5px solid var(--text);background:none}.rd-v3 .rd-quests .tabbar .btn{flex:1;border:0;border-left:1.5px solid var(--text);border-radius:0;background:none;box-shadow:none;padding:8px 6px;justify-content:center;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}.rd-v3 .rd-quests .tabbar .btn:first-child{border-left:0}.rd-v3 .rd-quests .tabbar .btn[aria-selected="true"]{background:var(--text);color:var(--panel)}.rd-v3 .rd-quests .tabbar .btn .muted{border:0;background:none;padding:0;color:inherit;opacity:.6;margin-left:4px;font:inherit}
/* Atlas route page on phones (Warren, 2026-10-16): Overview under the header as before, then the map, then the other tabs and
   their content; no Overview tab there */
@media (max-width:1000px){
  .rd-v3 .rd-tabs [data-rd-tab="overview"],.rd-v3 .rd-info > .rd-panel[data-rd-panel="overview"],.rd-v3 .rd-info > .rd-panel[data-rd-panel="overview"]:not([hidden]){display:none!important}
  .rd-v3 .rd-ov-m{display:block;margin:0;padding:14px 12px 16px;border-top:0;background:var(--panel);color:var(--text)}
  .rd-v3 .rd-layout > .rd-mapcol,.rd-v3 .rd-layout:not(.rd-tab-overview) > .rd-mapcol{display:block!important;order:2;border-top:1px solid var(--line)}
  .rd-v3 .rd-layout .rd-info > .rd-tabs{order:3}
  .rd-v3 .rd-layout .rd-info > .rd-panel{order:4}
  /* the tabs are their own box, the same 12 px below the map as the map is below the header, and the tab buttons sit inset
     from the box's edges (Warren, 2026-10-18) */
  .rd-v3 .rd-layout .rd-info > .rd-tabs{margin-top:12px;padding:6px}
  /* the edge fade would fade the box's own border too: the box keeps a solid edge, and the fade is drawn inside it instead,
     over the tabs, by two sticky end pieces that show on the side with more tabs to scroll to (Warren, 2026-10-18) */
  .rd-v3 .rd-layout .rd-info > .rd-tabs[data-ef]{-webkit-mask-image:none;mask-image:none}
  #atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs::before,#atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs::after{content:"";position:sticky;top:auto;z-index:2;flex:0 0 22px;align-self:stretch;height:auto;pointer-events:none;opacity:0;transition:opacity .15s}
  #atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs::before{left:0;margin-right:-22px;background:linear-gradient(90deg, var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
  #atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs::after{right:0;margin-left:-22px;background:linear-gradient(270deg, var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
  #atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs.fade-l::before,#atlasDetail .rd-v3 .rd-layout .rd-info > .rd-tabs.fade-r::after{opacity:1}
  /* the stats strip's lines run edge to edge, but its text lines up with the content under it, 12 px in (Warren, 2026-10-18) */
  #atlasDetail .rd-v3 .rd-hero .rd-readout > div:first-child{padding-left:12px}
  #atlasDetail .rd-v3 .rd-hero .rd-readout > div:last-child{padding-right:12px}
  /* a header without a photo is padded 14 px all round: the strip reaches through that padding to the border, and its text
     stays on the content's line (14 + 12 px in) */
  #atlasDetail .rd-v3 .rd-hero .rd-readout{margin-left:-14px;margin-right:-14px}
  #atlasDetail .rd-v3 .rd-hero .rd-readout > div:first-child{padding-left:26px}
  #atlasDetail .rd-v3 .rd-hero .rd-readout > div:last-child{padding-right:26px}
  /* the overview under the header wears the same faint contours as the other boxes, not a plain fill (Warren, 2026-10-18) */
  #atlasDetail .rd-v3 .rd-ov-m{background:linear-gradient(var(--paper-veil), var(--paper-veil)), var(--topo-img) 0 0/700px, var(--panel)}
  /* Overview is hidden here but is still the first button, so the first visible tab would get the divider line on its left */
  .rd-v3 .rd-info > .rd-tabs [data-rd-tab="overview"] + .btn{border-left:0}
}
/* the download dialog's list: each item's name over its note, not run together */
.dl-list.checklist li > span:not(.mk){display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-list.checklist li small{display:block;line-height:1.35}
/* an open faction card's collectibles: the label and every slot on one line, the slots shrinking to fit (at most 44 px) */
.fx-card.open .fx-back>.fx-back-drops{flex-wrap:nowrap;min-width:0}
.fx-card.open .fx-back-drops>.tag{flex:none}
.fx-card.open .fx-back-drops>.ct-thumb{flex:0 1 44px;width:auto;height:auto;min-width:0;aspect-ratio:1}
/* Add to my quests (steps 1 and 2): the form on a content panel, like the route page's */
.add-sheet{margin-top:12px;max-width:760px}
/* the sign-in and sign-up forms opened from a quest invite link: what the invite is for */
.lg-invite{margin:12px 0 4px;padding:10px 12px;border:1px solid var(--accent);border-left-width:4px;background:color-mix(in srgb, var(--accent) 8%, transparent)}
.lg-invite p{margin:0;line-height:1.45}.lg-invite p + p{margin-top:4px;color:var(--muted)}
/* a quest made from an Atlas route that changed since: the note sits with the readout, Update beside Keep mine */
.mq2 .mq-update .mq-upd-btns{display:flex;gap:6px;flex-wrap:wrap}
.mq2 .mq-update .btn.ghost{font-family:var(--stencil);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;padding:4px 10px;min-height:0}
/* a review by someone who finished the route in the app */
.rv-head .rv-done{font-size:10px;padding:1px 7px;line-height:1.5}
/* the store apps: an app older than the server's minimum version covers the screen with one way out, the store */
html.kb-open nav.tabs{display:none}   /* the app: the keyboard is up (native.js) */
.app-update{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px;background:var(--bg)}
.app-update .sheet{max-width:420px;padding:22px 20px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--text)}
.app-update h2{font-family:var(--tall);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.app-update p{margin:0 0 16px;color:var(--muted)}
.app-update .btn{width:100%}
/* Phones: whatever a finger taps is at least 44 px tall (icon buttons 44 px square). Link-style buttons grow their hit area
   with padding and matching negative margins, so the text stays where it is. */
@media (pointer:coarse){
  .q-card-wrap .mq-ready .btn.icon{width:44px;height:44px}
  .q-card-wrap>.mq-ready{top:9px;right:6px}
  .q-card-wrap.has-ctrls>.q-card .ac-top{min-height:44px;padding-right:146px}
  .pc-id .btn{min-height:44px;padding:0 12px}
  .cat-chips .btn,.inv-q .cat-chips .btn,#invList .cat-chips .btn{min-height:44px}
  .linkish{padding:13px 4px;margin:-13px -4px}
}
@media (pointer:coarse) and (max-width:860px){
  #mapWrap .map-quests .dd-btn{padding:12px 0;margin:-12px 0}   /* the quest picker's line keeps its place in the strip; the hit box grows above and below */
}
/* Options on a phone: the tab row scrolls sideways, and says so the way the route page's tabs do: two sticky end pieces
   fade the tabs out on the side with more to scroll to (RowFade sets fade-l / fade-r), instead of the 12 px edge mask. */
@media (max-width:860px){
  .opt-rail .opt-tabs[data-ef]{-webkit-mask-image:none;mask-image:none}
  .opt-rail .opt-tabs::before,.opt-rail .opt-tabs::after{content:"";position:sticky;top:auto;z-index:2;flex:0 0 26px;align-self:stretch;height:auto;pointer-events:none;opacity:0;transition:opacity .15s}
  .opt-rail .opt-tabs::before{left:0;margin-right:-26px;background:linear-gradient(90deg, var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
  .opt-rail .opt-tabs::after{right:0;margin-left:-26px;background:linear-gradient(270deg, var(--panel), color-mix(in srgb, var(--panel) 0%, transparent))}
  .opt-rail .opt-tabs.fade-l::before,.opt-rail .opt-tabs.fade-r::after{opacity:1}
}