/* Material Symbols Outlined, self-hosted.
   The .woff2 is a ~17KB subset built from the full variable font kept in
   Tools/fonts/. To add an icon: add its ligature name to Tools/fonts/icons.txt
   and re-run `python Tools/fonts/subset_icons.py`. The script fails loudly if a
   name is not a real icon or if its ligature does not survive subsetting.

   Icons are referenced by ligature (<span class="ms">search</span>), which is
   why the rules below are fussier than they look - see the comments. */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    /* Matches the wght axis range left variable by the subsetter. */
    font-weight: 100 700;
    /* `block`, not `swap`: with swap the fallback font paints the literal word
       "account_balance_wallet" for up to 3s before the icon arrives. The file
       is same-origin and tiny, so the block period is imperceptible. */
    font-display: block;
    src: url('/fonts/material-symbols-outlined.woff2?v=20260816-1') format('woff2');
}

.ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: var(--am-icon-size, 18px);
    line-height: 1;
    display: inline-block;
    flex: 0 0 auto;
    direction: ltr;
    white-space: nowrap;
    word-wrap: normal;
    /* All three of these are load-bearing for ligature matching. An inherited
       `text-transform: uppercase` from a label class turns "search" into
       "SEARCH", which has no ligature and renders as literal text; the same
       goes for inherited letter-spacing splitting the sequence. */
    text-transform: none;
    letter-spacing: normal;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' var(--ms-fill, 0), 'wght' var(--ms-wght, 400);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* Variants. FILL and wght are the two axes left variable in the subset. */
.ms-fill { --ms-fill: 1; }
.ms-bold { --ms-wght: 600; }
.ms-light { --ms-wght: 300; }

/* Sizes. Prefer these over ad-hoc font-size so icons stay on the scale. */
.ms-sm { --am-icon-size: 15px; }
.ms-lg { --am-icon-size: 22px; }
.ms-xl { --am-icon-size: 28px; }