/* Weebalon — shared chrome. Hand-written; theme.css next to it is generated.
   Anything that appears on more than one page and isn't a colour lives here. */

/* Border-box everywhere. This lived in index.html's <style> and so did not
   reach the other pages, which is how map.html ended up 16px wider than the
   window. It is shared chrome, so it belongs here. */
*{box-sizing:border-box;}

/* ---------- type scale ------------------------------------------------
   Every font-size on the site is one of these. The original hardcoded value
   is the number in each calc(), so --fs-step is a single knob for the whole
   page: 0px restores the site exactly as it was, 3px is where it is now.

   Bigger type also FIXES the line length rather than hurting it. The casting
   form is a 700px column; at the old 15px that was ~78 characters per line,
   past the point where the eye reliably finds the next line. At 18px it is
   ~65, which is the range prose is supposed to live in. The page gets longer
   and easier at the same time.
   --------------------------------------------------------------------- */

:root{
  --fs-step: 3px;

  --fs-2xs:  calc(10px + var(--fs-step));   /* on-air tally               */
  --fs-xs:   calc(11px + var(--fs-step));   /* eyebrows, micro labels     */
  --fs-sm:   calc(12px + var(--fs-step));   /* buttons, captions, footer  */
  --fs-md:   calc(13px + var(--fs-step));   /* hints, rules               */
  --fs-lg:   calc(14px + var(--fs-step));   /* secondary body             */
  --fs-body: calc(15px + var(--fs-step));   /* body                       */
  --fs-mark: calc(20px + var(--fs-step));   /* the +/- disclosure glyph   */

  /* The tagline under each h1. It is uppercase and letterspaced 3px, which
     makes it read a size smaller than its number, so it gets a notch ABOVE
     body rather than matching it. Still on --fs-step, so the knob still
     moves the whole page together. */
  --fs-tagline: clamp(calc(12px + var(--fs-step)),
                      3.2vw,
                      calc(16px + var(--fs-step)));   /* 15 -> 19 */
}

/* ---------- theme toggle ----------------------------------------------
   Same visual language as the map's segmented control: square corners,
   letterspaced caps, two-pixel border. It sits in the flow at the top of
   the page rather than floating, so it can never land on top of the map
   or the form on a narrow screen.
   --------------------------------------------------------------------- */

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
}
.topbar .back{margin:0;}

.theme-toggle{
  margin-left:auto;          /* works whether or not it has a sibling */
  font-family:"Courier New",Courier,monospace;
  font-size:var(--fs-xs);
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 12px;
  border:2px solid var(--gray-sh);
  border-radius:0;
  background:var(--ink-2);
  color:var(--gray);
  cursor:pointer;
  white-space:nowrap;
}
.theme-toggle:hover{color:var(--cream);border-color:var(--stone);}
.theme-toggle:focus-visible{outline:2px solid var(--peri);outline-offset:2px;}