/* Glyphs come from Lucide (lucide.dev, ISC), the maintained fork of Feather.
 * Do not hand-draw one: the set is ~1500 icons at the geometry this app
 * already uses - 24x24, stroke-width 2, round caps, currentColor - so a drawn
 * glyph can only be less consistent than the one already there.
 *
 * Files keep the app's own names, so this is the mapping back to upstream. To
 * resync any of them:
 *   curl -s https://raw.githubusercontent.com/lucide-icons/lucide/main/icons/<lucide>.svg
 *
 *   arrow-left.svg     chevron-left        (it is a chevron, not an arrow)
 *   plus.svg           plus
 *   filter.svg         funnel              (lucide has no "filter" - 404s)
 *   search.svg         search
 *   chevron-right.svg  chevron-right
 *   arrow-up.svg       arrow-up
 *   arrow-down.svg     arrow-down
 *   check.svg          check
 *   download.svg       download
 *   rules.svg          folder-plus
 *   sort-asc.svg       arrow-up-narrow-wide
 *   sort-desc.svg      arrow-down-wide-narrow
 *   calendar.svg       calendar
 *   banknotes.svg      banknote
 *   eye.svg            eye
 *   eye-off.svg        eye-off
 *   square-pen.svg     square-pen        (.icon--edit)
 *   trending-down.svg  trending-down
 *   trending-up.svg    trending-up
 *   tag.svg            tag
 *   menu.svg           menu              (.icon--drag)
 *   list.svg           list
 *   share.svg          share
 *
 * Every file above is upstream with one deterministic edit: stroke-width 2
 * becomes 1.5. So resync is still mechanical -
 *
 *   curl -s .../icons/<lucide>.svg | sed 's/stroke-width="2"/stroke-width="1.5"/'
 *
 * Why: mask-image scales the whole 24px artboard, so the stroke scales with
 * the box. At Lucide's default 2 that is a 1.66px stroke on the heading
 * chevron and 3.96px on a blank-state glyph - a 2.4x spread, and the large end
 * reads as a marker pen next to the text around it. 1.5 brings the range to
 * 1.25-2.97px. Stroke width is an explicit Lucide customisation, not a
 * deviation from the set.
 *
 * The spread is not gone, only reduced, because a mask cannot take a
 * stroke-width from CSS the way an inline <svg> can. If --icon-xl still reads
 * heavy, the fix is a separate thinner file for that tier, not a CSS override:
 * there is nothing for CSS to override. */
@layer components {
  /* A glyph labels; the text is what you read. So an icon sits a step back
     from the words beside it rather than matching their weight - at full ink
     a row of icons pulls the eye before the labels do.

     --icon-color is the knob. Set it to currentColor wherever the colour
     carries meaning instead of decorating: inside a .btn, where the glyph has
     to invert with the fill, or on a check that has to read as link blue. */
  .icon {
    -webkit-touch-callout: none;
    background-color: var(--icon-color, var(--color-ink-medium));
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    user-select: none;
  }

  .icon--arrow-left {
    --svg: url("/assets/arrow-left-6d1c8729.svg");
  }

  .icon--plus {
    --svg: url("/assets/plus-b352a023.svg");
  }

  .icon--filter {
    --svg: url("/assets/filter-00d4329c.svg");
  }

  .icon--search {
    --svg: url("/assets/search-a9e70c9c.svg");
  }

  .icon--chevron-right {
    --svg: url("/assets/chevron-right-1fb2970a.svg");
  }

  .icon--arrow-up {
    --svg: url("/assets/arrow-up-2b7cc0ed.svg");
  }

  .icon--arrow-down {
    --svg: url("/assets/arrow-down-f925406b.svg");
  }

  .icon--check {
    --svg: url("/assets/check-4a6acb11.svg");
  }

  .icon--download {
    --svg: url("/assets/download-583eed20.svg");
  }

  .icon--rules {
    --svg: url("/assets/rules-70e2bffa.svg");
  }

  .icon--sort-asc {
    --svg: url("/assets/sort-asc-7ab157a3.svg");
  }

  .icon--sort-desc {
    --svg: url("/assets/sort-desc-2fd9ce5b.svg");
  }

  .icon--calendar {
    --svg: url("/assets/calendar-44568894.svg");
  }

  .icon--banknotes {
    --svg: url("/assets/banknotes-994eff05.svg");
  }

  .icon--eye {
    --svg: url("/assets/eye-eaa19b2a.svg");
  }

  .icon--eye-off {
    --svg: url("/assets/eye-off-1142ce41.svg");
  }

  .icon--edit {
    --svg: url("/assets/square-pen-4b69deab.svg");
  }

  .icon--trending-down {
    --svg: url("/assets/trending-down-c299960e.svg");
  }

  .icon--trending-up {
    --svg: url("/assets/trending-up-b5077187.svg");
  }

  .icon--tag {
    --svg: url("/assets/tag-9b1db407.svg");
  }

  .icon--drag {
    --svg: url("/assets/menu-9a76a5d4.svg");
  }

  .icon--list {
    --svg: url("/assets/list-67681fb2.svg");
  }

  .icon--share {
    --svg: url("/assets/share-a14128fa.svg");
  }

  /* A hidden icon has to stay hidden. .icon sets display, and any author rule
     beats the UA stylesheet's [hidden] no matter which layer it sits in, so
     without this an icon carrying the attribute would render anyway.
     .hidden-numbers is the same problem from the other side: it ties with
     .icon on specificity, and which one wins would otherwise come down to
     which stylesheet the page happened to load last. */
  .icon[hidden],
  .icon.hidden-numbers {
    display: none;
  }

  /* The chevron that follows a section heading linking onward.
     Two corrections over a default .icon:
     - 0.7em, not 1em. An inline-block box sits its bottom on the baseline, so
       a 1em box rises 0.3em past the cap and reads high beside capitals;
       0.7em is cap height, which lands it centred.
     - A negative inline start. The glyph's ink begins 37% into its own
       viewBox, so the word space in front of it doubles up. */
  .icon--onward {
    --icon-size: 0.7em;

    margin-inline-start: -0.3em;
  }
}