/* salishsee.life — site chrome over the tokens in theme.css.

   The type discipline is inherited from the Atlas and is load-bearing here
   too: anything the MACHINE emitted is mono, anything a HUMAN wrote is
   Inter, anything that NAMES a thing is Fraunces. On this site that rule is
   what lets a visitor tell a curated sentence from a retrieved one without
   being told.

   The header and the coverage line are deliberately the same 48px / 26px
   bands as the Atlas (--header-h, --scope-h), so crossing from the home page
   into the Atlas does not feel like leaving for another product. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Both bands of fixed chrome are subtracted from where a scroll lands.
     Without the top value, following /#ask from the nav parked the section's
     heading behind the fixed header and the affiliation band; without the
     bottom value, scrolling an element into view at the foot of the page left
     it under the coverage line — which is how the phone-width review found an
     input and its button sitting behind the footer. This is the fix for that
     class of problem: reserve the space, rather than raise the content over
     the chrome with z-index and leave it unreachable. */
  scroll-padding-top: calc(var(--header-h) + var(--affil-h) + var(--s3));
  scroll-padding-bottom: calc(var(--scope-h) + var(--s4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--wt-regular) var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  /* Room for the fixed header, the affiliation band under it, and the fixed
     coverage line at the foot. */
  padding: calc(var(--header-h) + var(--affil-h)) 0
           calc(var(--scope-h) + env(safe-area-inset-bottom)) 0;
}

:where(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm);
}
:where(button, a, input, select):focus:not(:focus-visible) { outline: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: color-mix(in srgb, var(--focus) 28%, transparent); }
img, svg, canvas { max-width: 100%; }

.display {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--ink-3); }
.u-dim   { color: var(--ink-2); }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--rule-strong);
}
.site-brand {
  display: flex; align-items: baseline; gap: var(--s2);
  min-width: 0; text-decoration: none; color: inherit;
}
.site-brand__name {
  font-family: var(--font-display); font-size: var(--fs-hero);
  font-weight: var(--wt-semi); line-height: 1; letter-spacing: -0.015em;
  white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
/* The domain is a small pun and the wordmark carries it: "see" is set in the
   accent so the second reading is available without being explained. */
.site-brand__see { color: var(--ink-accent); }
.site-brand__sub {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 860px) { .site-brand__sub { display: none; } }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.site-nav a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--s3);
  border-radius: var(--r-pill); text-decoration: none;
  color: var(--ink-2); font: var(--wt-medium) var(--fs-ui)/1 var(--font-ui);
  transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.site-nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.site-nav a[aria-current="page"] {
  background: var(--surface-sunk); color: var(--ink); font-weight: var(--wt-semi);
}
@media (max-width: 700px) {
  .site-nav a { padding: 0 var(--s2); font-size: var(--fs-fine); }
  /* Four items fit a phone header; five did not. See NAV in shell.js. */
  .site-nav a.nav-desk { display: none; }
}
/* The desktop-only entries are also the last to arrive and the longest:
   "Knowledge Garden" is ~70px wider than "Garden" and between 700px, where
   the entry reappears, and 900px the row has no such room. So those entries
   alone fall back to their short label there — the same trade the 560px
   rule makes for the rest of the nav, on the two links that need it. */
@media (max-width: 900px) {
  .site-nav a.nav-desk .nav-long { display: none; }
  .site-nav a.nav-desk .nav-short { display: inline; }
}

.theme-toggle {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out);
}
.theme-toggle:hover { background: var(--surface-sunk); color: var(--ink); }

/* ── who made this ────────────────────────────────────────────────────────
   Fixed under the header, on every page, never dismissible. It is the one
   piece of chrome that answers "whose is this?", and its absence was the
   single worst finding of the collection's adversarial read: a site that
   quotes an organisation at length in an institutional voice, and never says
   it is not that organisation, is claiming something it has not earned. */

.byline {
  margin: var(--s5, 2rem) auto 0;
  padding: var(--s3, 1rem) var(--gutter, 1.25rem) var(--s4, 1.5rem);
  max-width: var(--measure-wide, 72rem);
  font-family: var(--font-ui);
  font-size: var(--fs-fine);
  color: var(--ink-3);
  text-align: center;
}
.byline a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }

/* --affil-h is the height the affiliation band used to occupy under the
   header. The band is gone (see mountByline in shell.js) and the token is
   zero so the header padding and scroll-padding that were computed from it
   still resolve; deleting the token would silently break both. */
:root { --affil-h: 0px; }

/* ── the coverage line ──────────────────────────────────────────────────────
   The Atlas's scope line, promoted to a property of the whole site. It is
   the one piece of chrome that is never allowed to be absent, because it is
   the only thing on the page that states what the collection does NOT hold.
   Its numbers come from the published corpus at runtime, so the line cannot
   disagree with the artifact about its own scope. */

.coverage {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  height: calc(var(--scope-h) + env(safe-area-inset-bottom));
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--surface); border-top: 1px solid var(--rule-strong);
  font: var(--wt-regular) var(--fs-fine)/1 var(--font-mono); color: var(--ink-2);
}
.coverage > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The eye should land on the losses, not on the totals. Same device, same
   colour and same dotted rule as the Atlas scope line. */
.coverage .loss {
  border-bottom: 1px dotted var(--ink-loss); color: var(--ink-loss); cursor: help;
}
@media (max-width: 700px) { .coverage__right { display: none; } }

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--prose { max-width: var(--measure); }
.band { padding-block: var(--s8); }
.band + .band { border-top: 1px solid var(--rule); }
.band--sunk { background: var(--surface-sunk); }

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--wt-semi);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32; margin: 0; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lede); line-height: 1.3; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink-2); }

a { color: var(--ink-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink-accent-hi); }

.eyebrow {
  font: var(--wt-medium) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s3);
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4); border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); font: var(--wt-medium) var(--fs-ui)/1 var(--font-ui);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-tap) var(--ease-out);
}
.btn:hover { background: var(--surface-sunk); border-color: var(--ink-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--ink-accent); border-color: var(--ink-accent); color: var(--surface);
}
.btn--primary:hover {
  background: var(--ink-accent-hi); border-color: var(--ink-accent-hi); color: var(--surface);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
:root[data-theme="dark"] .btn--primary,
:root:not([data-theme="light"]) .btn--primary { color: var(--ground); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--primary { color: var(--surface); }
}

/* ── cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg); padding: var(--s5);
}
.card__title { font-family: var(--font-display); font-size: var(--fs-title);
  font-weight: var(--wt-semi); line-height: var(--lh-title); margin: 0 0 var(--s2);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32; }

/* A provenance strip. Reuses the Atlas node card's "why is this here"
   treatment: sunk ground, mono label, so a source can never be mistaken for
   a sentence somebody wrote. */
.prov {
  background: var(--surface-sunk); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); margin-top: var(--s4);
  font-size: var(--fs-fine); color: var(--ink-2);
}
.prov__label {
  font: var(--wt-medium) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin-bottom: var(--s2);
}

/* A claim about what is NOT known or NOT established. Same colour as the
   coverage line's losses — one visual language for a limit. */
.limit {
  border-left: 2px solid var(--ink-loss); padding-left: var(--s4);
  color: var(--ink-2); font-size: var(--fs-ui);
}

/* ── the door row ───────────────────────────────────────────────────────── */

.doors { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }

.door {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.door:hover {
  border-color: var(--ink-3); box-shadow: var(--elev-1); transform: translateY(-1px);
  color: inherit;
}
.door__n {
  font: var(--wt-regular) var(--fs-micro)/1 var(--font-mono); color: var(--ink-3);
}
.door__name {
  font-family: var(--font-display); font-size: var(--fs-title);
  font-weight: var(--wt-semi); line-height: var(--lh-title);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.door__what { color: var(--ink-2); font-size: var(--fs-ui); margin: 0; }
.door__state {
  margin-top: auto; padding-top: var(--s3);
  font: var(--wt-regular) var(--fs-micro)/1.4 var(--font-mono); color: var(--ink-3);
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; margin-bottom: var(--s5); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: var(--wt-medium) var(--fs-micro)/1.3 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  border-bottom-color: var(--rule-strong); white-space: nowrap; }

code, kbd {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--surface-sunk); padding: 1px 5px; border-radius: var(--r-sm);
}
pre {
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s4); overflow-x: auto;
  font-size: var(--fs-fine); line-height: 1.5;
}
pre code { background: none; padding: 0; }

/* Narrow-screen nav. At 390px "Ask Octo" wrapped to two lines and pushed the
   wordmark into the links. The label is not the destination, so below 560px
   the shorter one is used and the wordmark gives up a little size. */
.nav-short { display: none; }
@media (max-width: 560px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .site-header { gap: var(--s2); }
  .site-brand__name { font-size: 17px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 7px; font-size: var(--fs-fine); }
  .theme-toggle { width: 26px; height: 26px; margin-left: 2px; }
  /* Bands at phone width. --s8 is 72px of empty room above and below every
     section; four of those is most of a 844px screen spent on nothing, and it
     is what put the home page's only control below the fold. */
  .band { padding-block: var(--s5); }
}

/* Overflow remains reachable on phones and compact laptop windows. */
.nav-more{position:relative}.nav-more summary{cursor:pointer;list-style:none;font-size:.82rem;padding:8px}.nav-more>div{position:absolute;right:0;top:38px;min-width:210px;padding:12px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 28px #0002;z-index:100}.site-nav .nav-more a{display:block;padding:10px}.nav-more{display:none}@media(max-width:1350px){.site-nav>.nav-desk{display:none}.nav-more{display:block}}@media(max-width:600px){.site-brand__sub{display:none}.site-nav{gap:2px}.site-nav>a{font-size:.76rem}.site-brand__name{font-size:1.1rem}.site-header{padding-left:14px;padding-right:10px}.site-nav>a[href="/organizing.html"]{display:none}.nav-more>div{max-height:70vh;overflow:auto}}