/* One icon system, from a font this project builds itself.
 *
 * Until now this app had two icon systems that did not talk to each other: seventeen
 * hand-drawn inline SVGs in `app.js` (`ICON_PATHS`), and emoji in several hundred other
 * places. Emoji is the reason the icons were "not working as they should" -- it cannot be
 * styled, so it ignores `currentColor` and the theme; it is a different shape on every
 * platform; it carries its own weight and colour against a line-icon design; and it is
 * announced to a screen reader as a bare codepoint. It is also why there was a
 * `modernizeIcons()` shim at all: someone could see the nav looking wrong and patched it in
 * the browser rather than in the markup, which fixed ten buttons and left the other
 * several hundred, and did it once on DOMContentLoaded so anything rendered later never
 * got an icon at all.
 *
 * This replaces both. A ligature name is the markup, the icon and the accessible name:
 *
 *     <span class="ms" aria-hidden="true">payments</span>
 *
 * `direction: ltr` is not cosmetic. The app is Arabic by default, the container is `dir=rtl`,
 * and an icon in an RTL run is bidi-reordered unless it is pinned. `unicode-bidi: isolate` is
 * the other half of that: it keeps the ligature's letters together as one unit.
 *
 * `font-display: block` rather than `swap` is deliberate. The font is 156 KB, cached
 * permanently after the first visit, and bundled into the APK, so it is almost always
 * present before it is needed; `swap` would show the literal word "payments" for a frame on
 * every cold load, and `block` hides it for at most 3s instead. A missing-glyph box is worse
 * than a brief blank, and worse still than the word.
 *
 * The font itself is a subset: `scripts/build-icon-font.cjs` asks Google Fonts for exactly the
 * ligatures named in `scripts/icon-map.cjs` and nothing else. Adding a name to the map and
 * re-running that script is the whole procedure for adding an icon.
 */

@font-face {
  font-family: "Material Icons Outlined";
  /* The subset is rebuilt whenever the map changes, and the file name carries the hash of
     the ligature list, so this is safe to cache forever. */
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-outlined.woff2") format("woff2");
}

.ms {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  /* `1em` would scale with the text, which makes an icon in a 0.75rem caption smaller than
     the caption's own height; 1.25em tracks the text while staying optically even. */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Keep the ligature's letters from being reordered or split inside an RTL paragraph. */
  unicode-bidi: isolate;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  /* An icon is decoration. The accessible name belongs to the control around it, and a
     screen reader announcing "payments" twice is worse than announcing it once. */
  user-select: none;
}

/* Inside a control that has no text of its own -- an icon-only button -- the icon *is* the
   content, so it must not be hidden from the reader. `.ms-alone` is the opt-in. */
.ms-alone {
  /* no override: it stays visible to assistive technology */
}

/* Sizes, so the same icon reads the same in a table cell and in a page heading. */
.ms-sm { font-size: 1em; }
.ms-lg { font-size: 1.6em; }
.ms-xl { font-size: 2em; }

/* Where icons were emoji, the glyph sat in the text colour. These preserve that. */
.ms-ok { color: #16a34a; }
.ms-warn { color: #d97706; }
.ms-bad { color: #dc2626; }
.ms-mute { color: var(--txt-m); }
.ms-brand { color: var(--p); }

/* A brief, cheap guard rather than a layout shift: reserve the box so a late-arriving font
   cannot reflow a row of buttons. */
.ms { min-width: 1em; text-align: center; }

/* Reduced motion and high contrast are worth honouring for the tint helpers, which is all
   this file animates -- the icons themselves never move. */
@media (prefers-contrast: more) {
  .ms { -webkit-font-smoothing: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ms { transition: none !important; }
}