/* ============================================================================
   ICONS
   Source: design-system/ASSETS.md

   §1 resolution rule — the Figma layer name IS the file path:
       e/icon/media/notification_line  →  assets/icons/e/icon/media/notification_line.svg
   Paths below are resolved from the PROJECT ROOT, four levels up from this file.

   §6 rule 1 — reference the file, never inline SVG markup. So the glyph is
   applied as a CSS mask and §4 rule 1 ("icons inherit colour, never hard-code
   a hex on an icon") holds: the paint is always `currentColor`, which the
   parent sets from a semantic token.

   §3 — `_line` is the default; `_fill` is the active/selected weight. The
   pairing is a state channel, so prefer swapping the weight over changing
   colour alone.
   ========================================================================== */

.icon {
  display: inline-block;
  flex: none;
  /* TODO(tokens): size is not built — DESIGN.md §12.4. Literal px until it is. */
  inline-size: 20px;
  block-size: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon-src) center / contain no-repeat;
  mask: var(--icon-src) center / contain no-repeat;
}

/* TODO(tokens): icon size steps — literal until a size scale exists. */
.icon--12 {
  inline-size: 12px;
  block-size: 12px;
}
.icon--16 {
  inline-size: 16px;
  block-size: 16px;
}
.icon--20 {
  inline-size: 20px;
  block-size: 20px;
}

/* --- The glyphs this app uses --------------------------------------------
   Left column is the Figma layer name, verified by matching the exported
   Figma asset path data byte-for-byte against the file on disk. */

/* e/icon/file/search_2_line — search lives in file/, not system/ (ASSETS.md §2) */
.icon--search {
  --icon-src: url("../../../../assets/icons/e/icon/file/search_2_line.svg");
}
/* e/icon/media/notification_line | _fill */
.icon--notifications {
  --icon-src: url("../../../../assets/icons/e/icon/media/notification_line.svg");
}
.icon--notifications-active {
  --icon-src: url("../../../../assets/icons/e/icon/media/notification_fill.svg");
}
/* e/icon/contact/comment_line | _fill */
.icon--messages {
  --icon-src: url("../../../../assets/icons/e/icon/contact/comment_line.svg");
}
.icon--messages-active {
  --icon-src: url("../../../../assets/icons/e/icon/contact/comment_fill.svg");
}
/* e/icon/arrows/down_line — the account dropdown caret.
   NOTE: ASSETS.md §2 says chevrons live "nowhere under that name" and points to
   arrows/arrow_{up,down,…}. Those are full arrows; arrows/down_line is the
   chevron, and it is what the Figma navbar actually references. Doc gap — see
   README "Feedback for the DS". */
.icon--caret-down {
  --icon-src: url("../../../../assets/icons/e/icon/arrows/down_line.svg");
}
/* e/icon/system/close_line */
.icon--close {
  --icon-src: url("../../../../assets/icons/e/icon/system/close_line.svg");
}
/* e/icon/user/user_1_line */
.icon--user {
  --icon-src: url("../../../../assets/icons/e/icon/user/user_1_line.svg");
}
/* e/icon/system/settings_1_line */
.icon--settings {
  --icon-src: url("../../../../assets/icons/e/icon/system/settings_1_line.svg");
}
/* e/icon/system/exit_line */
.icon--sign-out {
  --icon-src: url("../../../../assets/icons/e/icon/system/exit_line.svg");
}
/* e/icon/system/check_line */
.icon--check {
  --icon-src: url("../../../../assets/icons/e/icon/system/check_line.svg");
}

/* --- Left navigation glyphs ----------------------------------------------
   These were matched from a SCREENSHOT, not from a layer name, so the §1 rule
   could not be applied — ASSETS.md §2 warns explicitly against taking the
   category from intuition. Home and Communities have since been CONFIRMED by
   the designer. Two remain best-guesses and are marked ⚠️ below. Correct one by
   editing one line here — nothing else references a path.
   `prototype/icon-sheet.html` renders the candidates side by side.

   The `_fill` weight is the Selected state (ASSETS.md §3: the pairing is a
   state channel). Every pair below was verified present on disk. */
/* e/icon/buildings/home_4 — confirmed. */
.icon--nav-home {
  --icon-src: url("../../../../assets/icons/e/icon/buildings/home_4_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/buildings/home_4_fill.svg");
}
.icon--nav-calendar {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/business/calendar_fill.svg");
}
.icon--nav-channels {
  --icon-src: url("../../../../assets/icons/e/icon/map/compass_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/map/compass_fill.svg");
}
.icon--nav-giving {
  /* ~ other/hand_heart — inferred from the glyph shape and from "Giving"
     itself. Verify. */
  --icon-src: url("../../../../assets/icons/e/icon/other/hand_heart_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/other/hand_heart_fill.svg");
}
.icon--nav-bookmarks {
  --icon-src: url("../../../../assets/icons/e/icon/education/bookmark_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/education/bookmark_fill.svg");
}
/* e/icon/system/classify_2 — confirmed. */
.icon--nav-communities {
  --icon-src: url("../../../../assets/icons/e/icon/system/classify_2_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/system/classify_2_fill.svg");
}
.icon--nav-journal {
  /* ~ education/notebook_2 — 11 book/notebook/diary glyphs are plausible at
     20px. Best match. */
  --icon-src: url("../../../../assets/icons/e/icon/education/notebook_2_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/education/notebook_2_fill.svg");
}
.icon--nav-organizations {
  --icon-src: url("../../../../assets/icons/e/icon/buildings/bank_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/buildings/bank_fill.svg");
}
.icon--nav-programs {
  --icon-src: url("../../../../assets/icons/e/icon/education/mortarboard_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/education/mortarboard_fill.svg");
}
.icon--nav-videos {
  --icon-src: url("../../../../assets/icons/e/icon/media/video_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/media/video_fill.svg");
}
/* e/icon/file/package_2_line | _fill — the Bundle object.
   ⚠️ NOT resolved from a layer name, because there is no Bundle layer in either
   Figma file. Chosen against ASSETS.md §1 instead: a closed box is the one
   glyph in the library that reads as "several things sold as one" without
   borrowing a meaning another object already owns. Cart and bag were the
   alternatives; both say "checkout", which is the ACTION on a bundle rather
   than the object itself. */
.icon--nav-bundles {
  --icon-src: url("../../../../assets/icons/e/icon/file/package_2_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/file/package_2_fill.svg");
}

/* --- To-Do rail glyphs ---------------------------------------------------
   Every `Row / To-Do / Category` icon carries its real layer name in the Figma
   frame, so ASSETS.md §1 resolves all twelve directly — no guessing here.
   The four that were named only `icon-left` / `L` were identified by matching
   the exported path data against the export (max coordinate error 0.01), the
   same method used for the navbar; `contact/invite_line` was matched blind as a
   control and came back at 0.00 against its own known layer name. */

/* Category — e/icon/... , 12px slot */
.icon--todo-invitation {
  --icon-src: url("../../../../assets/icons/e/icon/contact/invite_line.svg");
}
.icon--todo-event {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_line.svg");
}
.icon--todo-activity {
  --icon-src: url("../../../../assets/icons/e/icon/system/heartbeat_line.svg");
}
.icon--todo-poll {
  --icon-src: url("../../../../assets/icons/e/icon/editor/list_check_3_line.svg");
}
.icon--todo-post {
  --icon-src: url("../../../../assets/icons/e/icon/file/bill_line.svg");
}
.icon--todo-device {
  --icon-src: url("../../../../assets/icons/e/icon/device/game_1_line.svg");
}
.icon--todo-onboarding {
  --icon-src: url("../../../../assets/icons/e/icon/device/light_line.svg");
}
.icon--todo-forms {
  --icon-src: url("../../../../assets/icons/e/icon/file/document_3_line.svg");
}
.icon--todo-call {
  --icon-src: url("../../../../assets/icons/e/icon/contact/phone_line.svg");
}
.icon--todo-transition {
  --icon-src: url("../../../../assets/icons/e/icon/design/components_line.svg");
}
.icon--todo-schedule {
  --icon-src: url("../../../../assets/icons/e/icon/business/schedule_line.svg");
}
/* TODO(assets): `e/icon/custom/telehealth_line` is one of the 22 icons that
   exist in Figma and were never exported — ASSETS.md §3.3 names it explicitly
   and says an EHR-domain telehealth icon has no alternative in the 26 exported
   categories. The `Join Telehealth Visit` category therefore has no glyph.
   Deliberately left unresolved rather than substituted (§1, §6 rule 2).
   .icon--todo-telehealth { --icon-src: url(".../custom/telehealth_line.svg"); } */

/* Timing prefix — e/icon/system/time_line, 12px */
.icon--todo-time {
  --icon-src: url("../../../../assets/icons/e/icon/system/time_line.svg");
}
/* LIVE chip — e/icon/device/radar_line, 12px */
.icon--todo-live {
  --icon-src: url("../../../../assets/icons/e/icon/device/radar_line.svg");
}

/* Actions — 16px slot */
.icon--going {
  --icon-src: url("../../../../assets/icons/e/icon/system/check_circle_fill.svg");
}
.icon--not-going {
  --icon-src: url("../../../../assets/icons/e/icon/system/close_circle_fill.svg");
}
.icon--video {
  --icon-src: url("../../../../assets/icons/e/icon/media/camcorder_line.svg");
}
.icon--phone {
  --icon-src: url("../../../../assets/icons/e/icon/contact/phone_line.svg");
}

/* TODO(tokens): the 12px step. Size is not built — DESIGN.md §12.4. */
.icon--12 {
  inline-size: 12px;
  block-size: 12px;
}

/* --- Newsfeed glyphs ------------------------------------------------------
   Every icon in `Body / Newsfeed` carries its real layer name in the Figma
   frame, so ASSETS.md §1 resolved all fifteen directly. All verified on disk. */

/* Create Post — attachment actions, 16px */
.icon--poll {
  --icon-src: url("../../../../assets/icons/e/icon/editor/list_check_3_line.svg");
}
.icon--kudos {
  --icon-src: url("../../../../assets/icons/e/icon/business/medal_line.svg");
}
.icon--attachment {
  --icon-src: url("../../../../assets/icons/e/icon/file/attachment_line.svg");
}
.icon--media {
  --icon-src: url("../../../../assets/icons/e/icon/design/paint_brush_line.svg");
}

/* Pinned posts */
.icon--pin {
  --icon-src: url("../../../../assets/icons/e/icon/file/pin_2_fill.svg");
}
.icon--crowdfunding {
  --icon-src: url("../../../../assets/icons/e/icon/other/hand_heart_line.svg");
}
.icon--group {
  --icon-src: url("../../../../assets/icons/e/icon/user/group_line.svg");
}
.icon--calendar-month {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_month_line.svg");
}

/* Post header */
.icon--bookmark {
  --icon-src: url("../../../../assets/icons/e/icon/education/bookmark_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/education/bookmark_fill.svg");
}
.icon--more {
  --icon-src: url("../../../../assets/icons/e/icon/system/more_2_line.svg");
}

/* Post actions + reactions */
.icon--like {
  --icon-src: url("../../../../assets/icons/e/icon/shape/heart_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/shape/heart_fill.svg");
}
.icon--comment {
  --icon-src: url("../../../../assets/icons/e/icon/contact/chat_3_line.svg");
}
.icon--repost {
  --icon-src: url("../../../../assets/icons/e/icon/media/repeat_line.svg");
}
.icon--share {
  --icon-src: url("../../../../assets/icons/e/icon/system/share_forward_line.svg");
}

/* --- Telehealth request flow (Redmine #82407) ---------------------------
   Toast status glyphs. Status is carried by colour AND glyph so it never rests
   on hue alone (DESIGN.md §9.2), and never on wording alone — root CLAUDE.md
   lists "~54 variants convey status by wording alone" as a known gap.
   Same two files as the Going / Not going pair above, under names that say
   what they mean here. */
.icon--toast-success {
  --icon-src: url("../../../../assets/icons/e/icon/system/check_circle_fill.svg");
}
.icon--toast-error {
  --icon-src: url("../../../../assets/icons/e/icon/system/close_circle_fill.svg");
}
/* e/icon/system/warning_line — Step 1's "Important notice" mark.
   TODO(assets): the Figma frame for this flow was unreachable in this session
   (no Desktop Bridge / CDP connection), so this glyph is chosen by meaning,
   not resolved from a layer name per ASSETS.md §1. Verify against
   node 37877-178422 of the FE Client file. */
.icon--notice {
  --icon-src: url("../../../../assets/icons/e/icon/system/warning_line.svg");
}

/* --- Theme switch --------------------------------------------------------
   Requested as `sun_light` / `moon_light`; the export's weight suffix is
   `_line`, not `_light`, so these are `weather/sun_line` and
   `weather/moon_line`. Both verified present. */
.icon--theme-light {
  --icon-src: url("../../../../assets/icons/e/icon/weather/sun_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/weather/sun_fill.svg");
}
.icon--theme-dark {
  --icon-src: url("../../../../assets/icons/e/icon/weather/moon_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/weather/moon_fill.svg");
}

/* --- To-Do actions, remaining two ---------------------------------------
   Matched from the exported path data at 0.00 error. */
.icon--form {
  --icon-src: url("../../../../assets/icons/e/icon/file/document_3_line.svg");
}
.icon--schedule {
  --icon-src: url("../../../../assets/icons/e/icon/business/schedule_line.svg");
}

/* --- Event detail glyphs -------------------------------------------------
   ASSETS.md §1: each layer name below was read off the Figma frame
   (`s/events`, FE Client file) and resolves straight to a file on disk. */

/* e/icon/business/calendar_month — the temporary "Event detail" nav shortcut.
   TODO: remove with the shortcut once Calendar → Event detail is built. */
.icon--nav-event {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_month_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/business/calendar_month_fill.svg");
}
/* e/icon/system/check_circle_line — the `Accepted (32)` section title.
   The _fill weight of the same glyph is already bound as .icon--going. */
.icon--check-circle {
  --icon-src: url("../../../../assets/icons/e/icon/system/check_circle_line.svg");
}
/* e/icon/file/document_line — the `Description` section title. */
.icon--document {
  --icon-src: url("../../../../assets/icons/e/icon/file/document_line.svg");
}
/* e/icon/map/compass_line — the `Channels` section title. Same glyph as
   .icon--nav-channels; kept under its own name because this is a section
   title, not a nav row, and the two should be able to diverge. */
.icon--compass {
  --icon-src: url("../../../../assets/icons/e/icon/map/compass_line.svg");
}
/* e/icon/shape/star — `Featured` in the Channels card. */
.icon--star {
  --icon-src: url("../../../../assets/icons/e/icon/shape/star_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/shape/star_fill.svg");
}
/* e/icon/user/user_add_line — `Invite more people`. */
.icon--user-add {
  --icon-src: url("../../../../assets/icons/e/icon/user/user_add_line.svg");
}
/* e/icon/contact/comment_2_line — the comment `Reply` action, and the
   "message this person" affordance under each invitee. Distinct from
   .icon--comment (contact/chat_3_line), which the DS uses for the count. */
.icon--reply {
  --icon-src: url("../../../../assets/icons/e/icon/contact/comment_2_line.svg");
}
/* A caret that has been turned over — the second channel on an expand/collapse
   control, paired with the label change. */
.icon--flip {
  transform: rotate(180deg);
}

/* --- Add to calendar (Redmine #81690) -------------------------------------
   e/icon/business/calendar_add_line — "a calendar glyph with a plus, not a
   download arrow" per the ticket's icon rule. */
.icon--calendar-add {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_add_line.svg");
}
/* e/icon/file/external_link_line — the deep-link hint on the Google Calendar
   and Outlook menu items. */
.icon--external-link {
  --icon-src: url("../../../../assets/icons/e/icon/file/external_link_line.svg");
}
/* e/icon/file/download_line — the .ics hint on the Apple Calendar menu item. */
.icon--download {
  --icon-src: url("../../../../assets/icons/e/icon/file/download_line.svg");
}

/* --- Collection pages (Videos, and the three that reuse the page) --------
   ASSETS.md §1: each layer name below was read off `Body / Videos / Page`
   (FE Client, node 23304:960021) and resolves straight to a file on disk. */

/* e/icon/media/video_line — the Tag / Entity glyph on a video card. */
.icon--video {
  --icon-src: url("../../../../assets/icons/e/icon/media/video_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/media/video_fill.svg");
}
/* e/icon/media/play_fill — the mark inside the card's 40px play disc.
   The frame ships this as one flattened 40px asset with its colours baked in;
   composing the disc from the glyph instead keeps the paint on currentColor
   (ASSETS.md §4 rule 1). See content-card.css. */
.icon--play {
  --icon-src: url("../../../../assets/icons/e/icon/media/play_fill.svg");
}
/* e/icon/business/calendar_month_line — the card's date row. Same glyph as
   .icon--nav-event, kept under its own name for the same reason .icon--compass
   is kept apart from .icon--nav-channels: one is a nav row, one is content. */
.icon--calendar-month {
  --icon-src: url("../../../../assets/icons/e/icon/business/calendar_month_line.svg");
}
/* e/icon/user/group_line — the card's reach row ("200+ purchased"). */
.icon--group {
  --icon-src: url("../../../../assets/icons/e/icon/user/group_line.svg");
}

/* --- Video detail (s/videos, `Body / Videos / Detail`) -------------------
   ASSETS.md §1: each layer name below was read off node 23304:478311 and its
   flow overlays in the `Videos` section (46639:711029) and resolves straight
   to a file on disk.

   NOT here: `e/icon/custom/social/fb` and `…/linkedin`. Those are third-party
   brand marks carrying their own hex fills (#1877F2, #0077B5), and ASSETS.md
   §3.1 names them the one place where "icons inherit colour" does not hold.
   They are <img> elements in video.js, like the file-type marks in event.css
   and the logo lockups in logo.js — referenced, never inlined, never
   recoloured. */

/* e/icon/media/play_line — the `Watch` button. The outlined weight, not the
   filled .icon--play the card's disc uses. */
.icon--play-line {
  --icon-src: url("../../../../assets/icons/e/icon/media/play_line.svg");
}
/* e/icon/media/volume_fill — the player's mute control, unmuted. The comp
   draws only this state; muted is a different GLYPH rather than a weight
   swap, because a struck-through speaker is the thing that says "no sound".
   `volume_off_fill` is the same family and the same weight, so the pair reads
   as one control. */
.icon--volume {
  --icon-src: url("../../../../assets/icons/e/icon/media/volume_fill.svg");
}
.icon--volume-off {
  --icon-src: url("../../../../assets/icons/e/icon/media/volume_off_fill.svg");
}
/* e/icon/media/fullscreen_line — the player's expand control. */
.icon--fullscreen {
  --icon-src: url("../../../../assets/icons/e/icon/media/fullscreen_line.svg");
}
/* e/icon/system/share_forward_line — the `Share` section title. Distinct from
   .icon--share (system/share_2_line), which the newsfeed post uses for its
   action row; the comp uses the forward glyph here. */
.icon--share-forward {
  --icon-src: url("../../../../assets/icons/e/icon/system/share_forward_line.svg");
}
/* e/icon/file/link_line — `Copy link`. */
.icon--link {
  --icon-src: url("../../../../assets/icons/e/icon/file/link_line.svg");
}
/* e/icon/device/qrcode_line — `QR code`. */
.icon--qrcode {
  --icon-src: url("../../../../assets/icons/e/icon/device/qrcode_line.svg");
}
/* e/icon/contact/mail_send_line — `Email`. */
.icon--mail-send {
  --icon-src: url("../../../../assets/icons/e/icon/contact/mail_send_line.svg");
}
/* e/icon/system/information_line | _fill — the `Details` section title, and
   the _fill weight in the QR modal's Alert. */
.icon--information {
  --icon-src: url("../../../../assets/icons/e/icon/system/information_line.svg");
  --icon-src-fill: url("../../../../assets/icons/e/icon/system/information_fill.svg");
}
/* e/icon/editor/pencil_line — `Edit` in Dropdown / Post Actions. */
.icon--edit {
  --icon-src: url("../../../../assets/icons/e/icon/editor/pencil_line.svg");
}
/* e/icon/business/flag_1_line — `Report` in Dropdown / Post Actions. */
.icon--flag {
  --icon-src: url("../../../../assets/icons/e/icon/business/flag_1_line.svg");
}
/* e/icon/file/archive_line — `Archive` in Dropdown / Post Actions. The comp's
   third item ships as an unnamed `Icon R` layer; archive_line is the glyph it
   draws and the only one on disk that matches the label. */
.icon--archive {
  --icon-src: url("../../../../assets/icons/e/icon/file/archive_line.svg");
}
/* --- Calendar — `s/events`, node 34017:344265 -----------------------------
   Every glyph below was resolved by downloading the exported Figma asset and
   matching its path data against the file on disk, because the frame's own
   layer names are not exposed for instance-swapped slots. `grid_line` and
   `list_check_line` name themselves in the export; the other four did not. */

/* e/icon/design/layout_left_fill — the sidebar toggle in `Calendar / Header`.
   ASSETS.md §2 warns the category comes from the layer name and not from
   intuition: this is `design/`, not `system/`. */
.icon--sidebar-toggle {
  --icon-src: url("../../../../assets/icons/e/icon/design/layout_left_fill.svg");
}
/* e/icon/arrows/left_line | right_line — the previous/next day controls.
   The `arrows/{left,right}_line` pair are chevrons, matching arrows/down_line
   already bound as .icon--caret-down. The full arrows are arrow_*_line. */
.icon--cal-prev {
  --icon-src: url("../../../../assets/icons/e/icon/arrows/left_line.svg");
}
.icon--cal-next {
  --icon-src: url("../../../../assets/icons/e/icon/arrows/right_line.svg");
}
/* e/icon/system/add_line — the New button. */
.icon--add {
  --icon-src: url("../../../../assets/icons/e/icon/system/add_line.svg");
}
/* e/icon/system/grid_line | e/icon/editor/list_check_line — the LAYOUT
   segmented control. Both name themselves in the export. */
.icon--layout-grid {
  --icon-src: url("../../../../assets/icons/e/icon/system/grid_line.svg");
}
.icon--layout-list {
  --icon-src: url("../../../../assets/icons/e/icon/editor/list_check_line.svg");
}
/* The `Icons` slot inside an event's Name Wrapper — 12px, inline-end of the
   title. All four are named in the export.
   e/icon/system/check_circle_fill is already bound as .icon--going, and
   e/icon/system/time_line as .icon--todo-time; only these two are new. */
.icon--cal-repeat {
  --icon-src: url("../../../../assets/icons/e/icon/system/refresh_4_line.svg");
}
.icon--cal-reminder {
  --icon-src: url("../../../../assets/icons/e/icon/media/bell_ringing_fill.svg");
}
/* e/icon/file/clipboard_fill — the task marker in the same slot. */
.icon--cal-task {
  --icon-src: url("../../../../assets/icons/e/icon/file/clipboard_fill.svg");
}

/* --- Monetization (Videos) -----------------------------------------------
   The paid-video flow. Both are §1 resolutions — the layer name is the path —
   and both exist on disk, so neither is an §3.3 gap.

   NO LOCK GLYPH. `system/lock_line` and `system/unlock_fill` were bound here
   and have been removed: "locked" is internal vocabulary for "under a
   paywall", not product language, and a lock over a video thumbnail is wrong
   besides — every video carries a trailer and the thumbnail plays it. The
   paywall is expressed by the price and the Buy control. Don't re-add them
   for this flow.
   The `Row / Default` glyphs the checkout's `Checkout / Summary / Details`
   and `Checkout / Options / Billing` name (47890:268280 / 47890:268281). All
   three exist on disk.

   `map/location_line` is NOT `.icon--pin`, which is `file/pin_2_fill` — a
   pushpin, not a map marker. Likewise `contact/mail_line` is not
   `.icon--mail-send` (`contact/mail_send_line`, an envelope with an arrow);
   a billing row wants the plain envelope. Different glyphs, so new bindings
   rather than aliases.
   e/icon/business/exchange_dollar_line — the price row. */
.icon--price {
  --icon-src: url("../../../../assets/icons/e/icon/business/exchange_dollar_line.svg");
}
/* e/icon/contact/mail_line */
.icon--mail {
  --icon-src: url("../../../../assets/icons/e/icon/contact/mail_line.svg");
}
/* e/icon/map/location_line */
.icon--location {
  --icon-src: url("../../../../assets/icons/e/icon/map/location_line.svg");
}
/* e/icon/business/bank_card_line — the Checkout in Stripe control. */
.icon--bank-card {
  --icon-src: url("../../../../assets/icons/e/icon/business/bank_card_line.svg");
}
/* e/icon/system/safety_certificate_line — "Stripe collects the card". */
.icon--secure {
  --icon-src: url("../../../../assets/icons/e/icon/system/safety_certificate_line.svg");
}
/* e/icon/file/bill_line — the order summary. */
.icon--receipt {
  --icon-src: url("../../../../assets/icons/e/icon/file/bill_line.svg");
}

/* `display: inline-block` on `.icon` outranks the UA's `[hidden] { display:
   none }` — the trap button.css documents for `.btn[hidden]`. Worse here than
   elsewhere: an icon with no `--icon-src` has no mask, so `background-color:
   currentColor` paints the whole 16px box and a hidden icon renders as a solid
   block of ink. checkout.css's primary button swaps its glyph per step and
   carries none on the first, which is exactly that case. */
.icon[hidden] {
  display: none;
}

/* --- Comments (COMPONENTS.md §32) ---------------------------------------
   The composer's RTE toolbar (§32.7) and the section's empty state (§32.2).
   Every glyph below is an exported file; none is substituted or inlined. */

/* e/icon/contact/send_line — the composer's send button (§32.7). NOT
   contact/mail_send_line, which .icon--mail-send already claims for the share
   sheet's email provider. */
.icon--send {
  --icon-src: url("../../../../assets/icons/e/icon/contact/send_line.svg");
}

/* The `Attachments (n)` collapsible's disclosure and the attach button's
   split-menu caret are both e/icon/arrows/down_line — already mapped above as
   .icon--caret-down. Reuse it; no second alias. */

/* e/icon/contact/chat_3_line at 40 — the `type=Empty` illustration. Same file
   as .icon--comment (the count glyph); named separately because the empty
   state is a different slot and may diverge. */
.icon--chat-empty {
  --icon-src: url("../../../../assets/icons/e/icon/contact/chat_3_line.svg");
}

/* e/icon/editor/* — the 14 toolbar controls, in the design's own order. The
   first two are a text label plus a caret in the frame, not glyphs, so only
   the colour swatch gets an icon here. */
.icon--rte-color {
  --icon-src: url("../../../../assets/icons/e/icon/editor/text_color_line.svg");
}
.icon--rte-bold {
  --icon-src: url("../../../../assets/icons/e/icon/editor/bold_line.svg");
}
.icon--rte-italic {
  --icon-src: url("../../../../assets/icons/e/icon/editor/italic_line.svg");
}
.icon--rte-underline {
  --icon-src: url("../../../../assets/icons/e/icon/editor/underline_line.svg");
}
.icon--rte-strike {
  --icon-src: url("../../../../assets/icons/e/icon/editor/strikethrough_line.svg");
}
.icon--rte-list-ordered {
  --icon-src: url("../../../../assets/icons/e/icon/editor/list_ordered_line.svg");
}
.icon--rte-list-bullet {
  --icon-src: url("../../../../assets/icons/e/icon/editor/list_check_line.svg");
}
.icon--rte-outdent {
  --icon-src: url("../../../../assets/icons/e/icon/editor/indent_decrease_line.svg");
}
.icon--rte-indent {
  --icon-src: url("../../../../assets/icons/e/icon/editor/indent_increase_line.svg");
}
.icon--rte-quote {
  --icon-src: url("../../../../assets/icons/e/icon/editor/quote_left_line.svg");
}

/* e/icon/file/pic_line — the toolbar's insert-image control. The section's own
   glyph is a picture mark and `pic_line` is the exported file that matches it;
   media/ has no image glyph at all. */
.icon--rte-image {
  --icon-src: url("../../../../assets/icons/e/icon/file/pic_line.svg");
}

/* e/icon/emoji/emoji_line */
.icon--rte-emoji {
  --icon-src: url("../../../../assets/icons/e/icon/emoji/emoji_line.svg");
}