/* site.css — the theme, the base, the shared components and the chrome of every
 * page. A page's own <style> holds only what that page alone draws.
 */

/* ---------- tokens ---------- */
:root{
  /* surfaces, darkest to lightest */
  --stage:#0a0c0a;   /* the ground behind the world */
  --bg:#0d0f0e;      /* the page */
  --bg-2:#12150f;    /* bars and sidebars */
  --well:#0f120e;    /* inset: an input, the log */
  --sheet:#141813;   /* a dialog */
  --card:#171b18;
  --card-2:#1f2521;  /* a row under the pointer */
  --glass:rgba(18,21,15,.92);   /* a control floating over the map */
  --line:#2a302a;
  /* ink */
  --ink:#e7e2d4;--ink-2:#c2bcab;--muted:#9aa093;--faint:#6b7065;--bright:#fff;
  /* accents */
  --gold:#c9a15a;--gold-ink:#0d0f0e;--gold-dim:#241d10;
  --ok:#6faf68;--off:#a85757;--unknown:#8a8577;--portal:#6fd8e6;
  /* shape */
  --r-sm:.35rem;--r:.5rem;--r-lg:.7rem;--pill:999px;
  --shadow:0 2px 8px rgba(0,0,0,.55);--shadow-lg:0 20px 60px rgba(0,0,0,.6);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Code",Consolas,monospace;
  --nav:52px;--side:320px;--ctl:36px;   /* --ctl: a button floating over the map */
}

/* ---------- base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:#2f362f transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2f362f;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- type ---------- */
.title{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
/* the small tracking label over a block: a section's name, a figure's caption */
.eyebrow{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.eyebrow small{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:.66rem;opacity:.75;margin-top:.15rem}
.sub{color:var(--muted);font-size:.8rem;margin-top:.25rem}
.sub b{color:var(--ink);font-weight:600}
.note{color:var(--muted);font-size:.72rem;line-height:1.4;margin-top:.35rem}
.note b{color:var(--ink);font-weight:600}
.note.bad{color:var(--off)}
.note:empty{display:none}
.empty{color:var(--muted);font-size:.82rem;padding:.8rem 0}
/* a section is a ruled-off block of a column; the foot its last and quietest */
.section{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
.foot{color:var(--muted);font-size:.72rem;margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:.75rem .85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}   /* a hair of light along the top edge */
a.card{display:block;color:var(--ink)}
.card.link:hover{border-color:var(--gold);text-decoration:none}
.card.on{border-color:#2f4b2e}
.well{background:var(--well);border:1px solid var(--line);border-radius:var(--r)}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(4px)}
/* a figure with its caption under it */
.stat .k{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .v{font-size:1.25rem;font-weight:700;line-height:1.25;margin-top:.1rem;color:var(--bright);font-variant-numeric:tabular-nums}
.stat .v small{font-size:.8rem;font-weight:400;color:var(--muted)}
/* a status light; ok/warn/bad on it or on the thing it sits in */
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--unknown);flex:0 0 auto}
.dot.ok,.ok .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.warn,.warn .dot{background:var(--gold)}
.dot.bad,.bad .dot{background:var(--off)}

/* ---------- controls ---------- */
/* a state change eases in rather than snaps; one line, so every control agrees */
.btn,.chip,.card.link,.navlinks a,.sidebtn,.legend [data-layer]{transition:border-color .15s ease,color .15s ease,background-color .15s ease,opacity .15s ease}
.btn{height:34px;min-width:34px;padding:0 .6rem;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  font-size:.78rem;line-height:1;white-space:nowrap;cursor:pointer;user-select:none}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.on{border-color:var(--gold);background:var(--gold-dim);color:var(--gold)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn svg{width:18px;height:18px;overflow:visible;pointer-events:none;flex:0 0 auto}
.btn.sq{width:34px;padding:0}
.btn.quiet{background:transparent;color:var(--muted)}
/* floating over the map: a size of its own, glassed, lifted off the ground */
.btn.map{width:var(--ctl);height:var(--ctl);padding:0;background:var(--glass);font-size:1rem;box-shadow:var(--shadow)}
.chip{padding:.2rem .6rem;border-radius:var(--pill);border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--muted);font-size:.68rem;line-height:1.4;white-space:nowrap;cursor:pointer;user-select:none}
.chip:hover{color:var(--ink);border-color:var(--gold)}
.chip.on{color:var(--gold-ink);background:var(--gold);border-color:var(--gold);font-weight:600}
.field{width:100%;background:var(--well);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  font-size:.85rem;padding:.45rem .55rem}
.field:focus{outline:none;border-color:var(--gold)}
textarea.field{resize:vertical;min-height:74px;font-size:.8rem;line-height:1.45}
.btnrow{display:flex;gap:.4rem;flex-wrap:wrap}
.btnrow .btn{flex:1 1 auto}

/* ---------- the map's furniture ---------- */
.stage{flex:1;position:relative;overflow:hidden;background:var(--stage);cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none}
.stage.dragging{cursor:grabbing}
.stage:fullscreen,.stage:-webkit-full-screen{width:100vw;height:100vh}
.mapctl{position:absolute;right:.7rem;bottom:.7rem;z-index:10;display:flex;flex-direction:column;gap:.35rem}
.mapctl.top{top:.7rem;bottom:auto}
/* the legend: a swatch or an icon, then the name; a row is the switch for what it depicts */
.legend{display:grid;gap:.4rem .6rem;grid-template-columns:auto 1fr;align-items:center;font-size:.74rem;color:var(--muted)}
.legend .sw{width:26px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.7)}
/* one swatch for both ends of the same scale: dense woods through to bare ground */
.legend .sw2{background:linear-gradient(90deg,#2f4a2a 0%,#3f5a37 45%,#8fae5c 100%)}
.legend .ic{width:26px;height:22px;display:flex;align-items:center;justify-content:center}
.legend .ic svg{width:18px;height:18px;overflow:visible;pointer-events:none}
.legend [data-layer]{cursor:pointer;user-select:none}
.legend span[data-layer]:not(.sw):not(.ic):hover{color:var(--ink)}
.legend [data-layer].off{opacity:.32;text-decoration:line-through}
@media (max-width:760px){ :root{--ctl:40px} }

/* ---------- nav ---------- */
.nav{height:var(--nav);flex:0 0 auto;display:flex;align-items:center;gap:.75rem;padding:0 .9rem;
  background:var(--bg-2);border-bottom:1px solid var(--line);position:relative;z-index:30}
.brand{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;font-size:.95rem}
.navlinks{margin-left:auto;display:flex;gap:1.1rem;font-size:.88rem;align-items:center;align-self:stretch;
  overflow-x:auto;scrollbar-width:none}
/* seven links overflow a narrow phone; the bar swipes, but a scrollbar inside a
   52px row eats the links it is there to reveal */
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{color:var(--ink);white-space:nowrap;display:flex;align-items:center;position:relative;height:100%}
.navlinks a:hover{color:var(--gold);text-decoration:none}
/* the pages of this site, then a rule, then the links that leave it */
.navlinks .ext{display:flex;gap:1.1rem;padding-left:1.1rem;border-left:1px solid var(--line);align-self:stretch}
.navlinks .ext a{color:var(--muted)}
.navlinks .ext a::after{content:"\2197";font-size:.7em;margin-left:.25em;opacity:.7}
.navlinks a.here{color:var(--gold)}
.navlinks a.here::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
/* on a phone the bar swipes; a fade at the edge says so, over blank padding so the
   last link is never under it */
@media (max-width:760px){
  .brand{font-size:.8rem}
  .navlinks{gap:.9rem;padding-right:2.2rem}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2.2rem;pointer-events:none;
    background:linear-gradient(90deg,rgba(18,21,15,0),#12150f 70%)}
}

/* ---------- app shell ---------- */
/* A page with a sidebar: the bar, then the sidebar beside a stage that fills the
   rest. The ☰ in the bar folds the sidebar away, one choice for the whole site
   (MapCore.toggleSide). On a phone the sidebar is a drawer over the stage, shut
   on arrival, with its own ×. */
.sidebtn{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer}
.sidebtn:hover{border-color:var(--gold);color:var(--gold)}
.app{display:flex;height:calc(100dvh - var(--nav));position:relative}
.sidebar{width:var(--side);flex:0 0 var(--side);background:var(--bg-2);border-right:1px solid var(--line);
  overflow-y:auto;padding:1rem}
body:not(.side-open) .sidebar{display:none}
.sideclose{display:none}
@media (max-width:760px){
  .sidebar{position:absolute;left:0;top:0;bottom:0;z-index:20;width:min(100%,360px);
    box-shadow:0 0 30px rgba(0,0,0,.6)}
  .sideclose{display:flex;position:sticky;top:0;float:right;width:34px;height:34px;align-items:center;
    justify-content:center;margin:-.3rem -.3rem 0 .5rem;border:1px solid var(--line);border-radius:var(--r);
    background:var(--card);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;z-index:1}
}