/* Reset, page ground and base typography. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg); color:var(--text-primary);
  font-family:var(--sans); font-feature-settings:var(--feat); font-weight:300;
  -webkit-font-smoothing:antialiased;
}
html{ scroll-behavior:smooth; }
::selection{ background:var(--accent-spark); color:var(--blue-01); }
a{ color:var(--tag); }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent-spark); outline-offset:2px; }

.eyebrow{ font-family:var(--mono); font-size:var(--font-size-eyebrow); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); }
/* Every .section-title on the page sits directly under a .sec-head eyebrow
   line; margin-top used to be a repeated inline style="margin-top:8px" on
   each of the six section headers in dashboard.html. */
.section-title{ font-family:var(--sans); font-weight:700; font-size:var(--font-size-h2); letter-spacing:-0.017em; color:var(--text-primary); margin-top:8px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Step 8: the standard clip-based visually-hidden pattern - content stays in
   the accessibility tree (readable by a screen reader, focusable if it
   contains a focusable element) while taking no visible space and adding no
   scrollbar. Deliberately NOT display:none/visibility:hidden, which would
   also hide it from assistive tech - that would defeat the one thing this
   class exists for.

   This class goes on a plain <div> WRAPPER, never directly on the <table>
   it contains - attachSrTable() (primitives.js) builds exactly that shape.
   A real bug shipped by putting it on the table itself: a table's specified
   `height` is only a MINIMUM per the CSS tables spec, so `height:1px` never
   actually constrained it - the browser measured a 51-row map table at its
   full natural height (14,020px in production) regardless. `clip:rect()`
   only affects paint, not layout, so that oversized box kept contributing
   to the page's real scrollable area even though nothing painted - the
   entire document grew past its own footer into thousands of pixels of
   dead scroll. Divs do not have this quirk: height/overflow reliably
   constrain a div's box in every engine, so the div wrapper collapses to
   1px and the table inside it is genuinely clipped away with it. */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
/* The sr-table itself: attachSrTable() gives it this class, not
   .visually-hidden (see above). A <table>'s <caption> is a documented CSS
   exception - its box is NOT constrained by the table's own width even
   under table-layout:fixed - so the long, single-line aria-summary caption
   needs normal wrapping (nowrap is right for a short inline label, wrong
   for a sentence) to break onto as many invisible lines as it needs rather
   than escaping its 1px wrapper. table-layout:fixed makes the *width* the
   wrapper specifies actually bind (the default "automatic" algorithm
   otherwise grows a table past any declared width to fit its content) -
   it was never the height problem above, only ever the width one. */
.sr-table{ table-layout:fixed; }
.sr-table, .sr-table *{ white-space:normal; overflow-wrap:anywhere; word-break:break-all; }
.sr-table{ border-spacing:0; }
.sr-table th, .sr-table td, .sr-table caption{ padding:0; border:0; }