/* ============================================================================
   Slab icon system — Material Symbols Outlined, wght 500.
   SELF-HOSTED SUBSET: /fonts/material-symbols-outlined-subset.woff2 ships from
   Slab, so it cannot fail independently of the app. Do NOT swap this for the
   Google Fonts CDN — when that stylesheet fails there is no @font-face and every
   ligature renders as the literal word in a serif.
   Regenerate the subset with tools/build-icon-font.sh after adding an icon name.
   ========================================================================== */
@font-face{
  font-family:'Material Symbols Outlined';
  font-style:normal;
  font-weight:500;
  font-display:block;
  /* VERSIONED BY CONTENT HASH. A woff2 is a static asset, so the service worker serves it
     stale-while-revalidate — which is right for a font whose glyphs never change, and wrong
     for a SUBSET that gains one. When `dark_mode` was added, browsers kept the older file and
     the ligature fell back to its literal text: the theme toggle read "dark_" instead of a
     moon. The hash changes when the file does, so a new subset is a new URL and cannot be
     shadowed. Re-run tools/build-icon-font.sh, then update this hash with it. */
  src:url('/fonts/material-symbols-outlined-subset.woff2?v=ac62cb94') format('woff2');
}

/* Size scale — derived from 348 icon font-size declarations across public/.
   xs 14 · sm 16 · md 18 · lg 22 · xl 26 · 2xl 32
   RAISED 2026-08-29 with the type floor (Adrienne: text no smaller than 14px, then "raise the
   icons to now match the new text scale"). Each tier moved +2 so a glyph keeps its size
   relationship to the label beside it — an icon that stays put while its label grows reads as
   undersized. 2xl is display scale and stays, like the >=19px text the remap left alone. */
:root{
  --ico-xs:14px;
  --ico-sm:16px;
  --ico-md:18px;
  --ico-lg:22px;
  --ico-xl:26px;
  --ico-2xl:32px;
}

.mi{
  font-family:'Material Symbols Outlined';
  font-weight:500;
  font-style:normal;
  font-size:var(--ico-md);
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  display:inline-block;
  vertical-align:-.14em;
  font-variation-settings:'FILL' 0,'GRAD' 0,'opsz' 24;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none;
  user-select:none;
  flex-shrink:0;
}
.mi-xs{font-size:var(--ico-xs);}
.mi-sm{font-size:var(--ico-sm);}
.mi-md{font-size:var(--ico-md);}
.mi-lg{font-size:var(--ico-lg);}
.mi-xl{font-size:var(--ico-xl);}
.mi-2xl{font-size:var(--ico-2xl);}
/* Filled variant — for legend swatches and solid status dots. */
.mi-fill{font-variation-settings:'FILL' 1,'GRAD' 0,'opsz' 24;}
/* Rotation modifier. -45° (counter-clockwise) turns the horizontal `straighten`
   ruler back to the diagonal the Tabler `ruler-2` had, which is the orientation
   Slab's Takeoff tile has always used (Adrienne, 2026-08-19). Works because .mi
   is already inline-block. */
.mi-rot-45{transform:rotate(-45deg);}