/* Font Awesome 7 Pro, subset to the icons this app actually draws.
 *
 * ⚠️ A SUBSET RATHER THAN all.css, AND THE SIZE IS THE WHOLE ARGUMENT. The full stylesheet is 247 KB
 * and defines thousands of icons; this app draws about twenty. dashboard.html is already 1.5 MB raw and
 * 458 KB gzipped, on a route every navigation hits — adding a quarter-megabyte of class definitions
 * for icons nobody references would be a larger change to the app's weight than every icon in it.
 *
 * ⚠️ WHAT A SUBSET COSTS, and what is done about it: a class that is not defined here renders
 * NOTHING. So does a misspelled class under the full stylesheet, so the failure mode is not new —
 * but a subset makes it reachable by ordinary means (adding an icon and forgetting this file). The
 * defence is `docs/unit/test_icons.py`, which reads every `fa-` class out of the markup and fails on
 * any this file does not define. Add an icon here first, then use it.
 *
 * ⚠️ THE FONTS COME FROM cdn.meter.health, which is this project's own CDN rather than a third
 * party, and the page already loads Space Grotesk and IBM Plex Mono from Google Fonts — so an
 * external font host is established practice here, not a new dependency class.
 *
 * ⚠️ THREE WEIGHTS OF ONE FAMILY: `fa-light` is 300, `fa-regular` is 400, `fa-solid` is 900. All are
 * "Font Awesome 7 Pro" — light and regular are Pro-only, which is why `fa-regular fa-trash` and
 * `fa-light fa-ban` are available at all; neither exists in the free build. Verified against this
 * CDN's own all.css rather than assumed.
 *
 * ⚠️ EACH WEIGHT IS A SEPARATE @font-face AND A SEPARATE DOWNLOAD. Adding a weight class without its
 * @font-face renders the glyph at whatever weight IS loaded rather than failing — see the note on
 * the 300 face below. That is the one failure in this file that does not show up as a missing icon.
 */

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 400;
  /* ⚠️ `block` rather than `swap`. A swapped icon font shows the FALLBACK glyph first — which for
     these codepoints is a private-use box, or worse a real letter: fa-x is literally "X" and fa-plus
     is "+", so a swap would flash the wrong thing rather than nothing. `block` renders nothing for a
     short period and then the icon. */
  font-display: block;
  src: url("https://cdn.meter.health/fontawesome/7.3.1/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdn.meter.health/fontawesome/7.3.1/webfonts/fa-solid-900.woff2") format("woff2");
}

/* ⚠️ A THIRD FILE, NOT A THIRD CLASS. `fa-light` is weight 300 of the same family and it lives in
   its own webfont — adding `.fa-light{font-weight:300}` without this @font-face does NOT render a
   lighter icon, it renders the 400 face, because that is the only one the browser has and it
   synthesises nothing for an icon font. The failure is invisible: the glyph is correct, the weight
   is simply the old one, so "the change did not take" looks like a caching problem.
   ⚠️ +380 KB ON THE PAGES THAT USE IT, which is the cost worth knowing. `font-display:block` and a
   `<link>`ed stylesheet mean it is fetched only when an element on the page actually asks for
   weight 300 — today that is the six reminder buttons — so pages with no light icon pay nothing. */
@font-face {
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("https://cdn.meter.health/fontawesome/7.3.1/webfonts/fa-light-300.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- the three families */
.fa-light,
.fa-regular,
.fa-solid {
  /* ⚠️ -moz-osx-font-smoothing and -webkit-font-smoothing are what stop the glyphs rendering
     noticeably heavier than the design on macOS; without them a 14px trash can looks bold. */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Font Awesome 7 Pro";
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  /* the glyph is the content; nothing about it should be selectable or draggable */
  -webkit-user-select: none;
  user-select: none;
}

.fa-light   { font-weight: 300; }
.fa-regular { font-weight: 400; }
.fa-solid   { font-weight: 900; }

/* ⚠️ FA7 PUTS THE CODEPOINT IN A CUSTOM PROPERTY and reads it here, which is why every icon class
   below is one line. Copying that shape rather than inlining `content:` per class is what lets a
   single element carry both `fa-solid` and `fa-star` in either order. */
.fa-light::before,
.fa-regular::before,
.fa-solid::before {
  content: var(--fa);
}

/* ------------------------------------------------------------------------------- the icons used */
/* Codepoints read out of this CDN's own css/all.css — see the ⚠️ above. Keep alphabetical. */
/* the inventory row's Archive / Restore action. Codepoint read from the CDN's own all.css — which
   IS reachable with curl even though Chromium in this container cannot load it, so there was no
   excuse to guess. */
/* "Skipped", on the two dose reminders. Codepoint read from the CDN's own all.css — where the
   definition is `.fa-ban,.fa-cancel{--fa:"\f05e"}`, i.e. `fa-cancel` is an alias for the same glyph
   and NOT a second icon to add. */
/* ⚠️ THE SIX BELOW MARKED "app menu" ARE THE ONLY ICONS HERE THAT ARE NOT CONTROLS — they are the
   hamburger and its six destinations, converted from hand-drawn feather-style SVG (issue #289,
   section A). Codepoints read from the CDN's own all.css, as this file insists; two of them are
   aliased there and the alias is NOT a second icon to add — `fa-bars` also answers to `fa-navicon`,
   `fa-arrow-right-from-bracket` also to `fa-sign-out`. */
.fa-arrow-right-from-bracket { --fa: "\f08b"; }  /* app menu — Log out */
.fa-ban             { --fa: "\f05e"; }
.fa-bars            { --fa: "\f0c9"; }  /* app menu — the hamburger itself */
.fa-bolt            { --fa: "\f0e7"; }  /* landing page */
.fa-box-archive     { --fa: "\f187"; }
.fa-caret-down      { --fa: "\f0d7"; }
.fa-caret-right     { --fa: "\f0da"; }
/* app menu — Progress Photos (#434). Codepoint read from the CDN's own all.css, as this file
   insists, and here that is not a formality: grepping 7.3.1's all.css for "camera" returns
   SEVENTEEN rules — fa-camera-retro (\f083), fa-camera-viewfinder, fa-camera-polaroid,
   fa-camera-slash and more, each a different glyph. Only the exact `.fa-camera{…}` rule is \f030.
   `fa-camera-alt` is an alias of the same codepoint; the unaliased name is the one used. */
.fa-camera          { --fa: "\f030"; }
.fa-chart-line      { --fa: "\f201"; }  /* landing page */
  /* ⚠️ \f00c, ONE CHARACTER FROM fa-xmark's \f00d and nowhere near it in the font. */
.fa-check           { --fa: "\f00c"; }  /* landing page */
/* the two pager chevrons — every pager in the app draws these and nothing else, since the buttons
   stopped carrying words. Codepoints read from the CDN's own all.css (\f053 / \f054), never from
   memory — the rule this file already states for every glyph in it.
   ⚠️ THIS COMMENT USED TO SIT TWO RULES ABOVE, over `.fa-chart-line`, so the file told a reader that
   the landing page's chart icon was one of "the two pager chevrons" and left the actual chevrons
   unexplained. It was not misfiled: the file says "Keep alphabetical" and `chart-line` < `check` <
   `chevron-left`, so the comment was written for the chevrons and then sorted away from them by an
   insertion between. Any comment here that describes the rule BELOW it has the same exposure. */
.fa-chevron-left    { --fa: "\f053"; }
.fa-chevron-right   { --fa: "\f054"; }
.fa-circle-check    { --fa: "\f058"; }
.fa-circle-info     { --fa: "\f05a"; }
.fa-circle-pause    { --fa: "\f28b"; }
/* ⚠️ REPLACES .fa-circle, which was the Status column's "pending" mark and is now defined nowhere.
   A plain dot said only "not one of the other two"; a clock face says the session is still ahead of
   you, which is the actual state. Codepoint read from the CDN's own all.css, as this file insists —
   the dot's \f111 and this \f017 are one character apart in prose and nowhere near each other in
   the font. */
.fa-clock           { --fa: "\f017"; }
.fa-compass         { --fa: "\f14e"; }  /* landing page */
.fa-dumbbell        { --fa: "\f44b"; }  /* landing page */
/* the diary rows' single action button — the favourite, edit and delete trio behind one press.
   Codepoint read from this CDN's own all.css, as this file insists, AND THE NEIGHBOURS ARE THE
   REASON rather than diligence for its own sake: grepping that file for "ellipsis" returns eight
   classes at four different codepoints — `fa-ellipsis-vertical` (\f142) is the same three dots
   turned on their side, and `fa-ellipsis-stroke` (\f39b) is an outlined variant. Only the exact
   `.fa-ellipsis{…}` rule is the horizontal filled one this app draws. */
.fa-ellipsis        { --fa: "\f141"; }
/* app menu — Messages. Codepoint read from the CDN's own all.css, as this file insists.
   ⚠️ AND THE NEIGHBOURS ARE THE REASON, exactly as for fa-paper-plane below: grepping that file for
   "envelope" returns fifteen hits — fa-envelope-open, fa-envelopes, fa-envelope-circle-check and
   more, every one a different glyph at a different codepoint. Only the exact `.fa-envelope{…}` rule
   is this one. */
.fa-envelope        { --fa: "\f0e0"; }
.fa-floppy-disk     { --fa: "\f0c7"; }
.fa-gear            { --fa: "\f013"; }  /* "At a glance" title row — choose which cards show */
.fa-house           { --fa: "\f015"; }  /* app menu — Dashboard */
/* app menu — History. ⚠️ IT REPLACED fa-camera, WHICH WAS A LEFTOVER FROM WHEN THE PAGE WAS PHOTOS
   (#434). #743 turned it into a Timeline and corrected the LABEL to `nav.history`; the icon stayed
   behind, so the row went on naming one of the four kinds the page holds — events, notes, photos
   and workouts — as if it were all of them.

   ⚠️ fa-camera IS STILL DEFINED ABOVE AND MUST BE. `templates/_history_timeline_js.html` draws it on
   the photo ROWS, which is the one place it is still the right picture. Removing it here because the
   menu stopped using it would blank those rows, and a subset blanks silently.

   ⚠️ \e1d1 IS IN THE PRIVATE-USE-ADJACENT RANGE THE NEWER ICONS USE, not the \fXXX block, so it
   does not pattern-match the neighbours above and that is not a typo. Verified present in the
   Light 300 weight this app serves — the font is anonymised (glyph names are `i1`, `i2`, …), so
   presence alone could not confirm identity; it was rendered from `fa-light-300.woff2` and looked at
   before being written here. Cross-checked 2026-08-29 against the CDN's own
   `fontawesome/7.3.1/css/all.css`, which is where this file's own lint message says a codepoint must
   come from: all 41 hex definitions here agree with it, `\e1d1` included. ⚠️ THAT CHECK IS STILL A
   HAND RUN — nothing in the tree compares a `--fa` value to anything, only that the CLASS exists.
   Issue #834. */
.fa-list-timeline   { --fa: "\e1d1"; }
/* the search affordance in a table's filter field. Codepoint read from the CDN's own all.css, as
   the lint's message insists — this one IS in the private-use area, unlike plus and x below. */
.fa-magnifying-glass{ --fa: "\f002"; }
.fa-medal           { --fa: "\f5a2"; }  /* landing page */
.fa-print           { --fa: "\f02f"; }  /* app menu — Print Summary */
/* the coach composer's Send. Codepoint read from the CDN's own all.css, as this file insists —
   ⚠️ AND THE NEIGHBOURS ARE THE REASON. That file defines `.fa-paper-plane-top` and
   `.fa-paper-plane-alt` beside it, both different glyphs at different codepoints; grepping for
   "paper-plane" returns three hits and only the exact `.fa-paper-plane{…}` rule is this one.
   ⚠️ IT IS DRAWN AT WEIGHT 300, so this is the second element in the app asking for the light
   webfont — see the +380 KB note on that @font-face. The dashboard already paid it for the
   reminder buttons; /coach-chat is a page that did not, and now does. */
.fa-paper-plane     { --fa: "\f1d8"; }
.fa-pen-to-square   { --fa: "\f044"; }
/* ⚠️ NOT a \\fxxx escape: Font Awesome maps plus and x onto their ASCII codepoints, so these
   are the literal characters. Writing "\\f067" — which plus occupies in some other icon sets —
   renders a different glyph or nothing at all, silently. */
.fa-person          { --fa: "\f183"; }  /* landing page */
.fa-pills           { --fa: "\f484"; }  /* landing page; app menu — Supplements (#570) */
  /* ⚠️ \e43b IS OUTSIDE THE \fxxx RANGE the rest of this file sits in — a newer icon, in the
     Unicode private-use area all the same. Read from the CDN's all.css like every other line. */
.fa-plate-utensils  { --fa: "\e43b"; }  /* landing page */
.fa-plus            { --fa: "\+"; }
.fa-credit-card     { --fa: "\f09d"; }  /* app menu — Subscription (#755 OI-36). Codepoint read
                                            from this CDN's own all.css, not from memory. */
.fa-shield          { --fa: "\f132"; }  /* app menu — Admin. ⚠️ NOT the fa-shield-check below: that
                                            one is a shield with a tick and states an outcome. */
.fa-shield-check    { --fa: "\f2f7"; }
.fa-star            { --fa: "\f005"; }
/* ⚠️ NOT A VARIANT OF `fa-star` ABOVE — a different glyph with its own codepoint, verified against
   this CDN's own all.css rather than guessed: `curl https://cdn.meter.health/fontawesome/7.3.1/css/
   all.css` defines `.fa-star-exclamation{--fa:"\f2f3"}`, with NO alias beside it, unlike fa-ban /
   fa-cancel and the two app-menu icons this file already records. Marks a muscle group flagged as a
   priority on the weekly set-target grid, where a plain star would read as a rating or a favourite
   rather than "push this one". */
.fa-star-exclamation { --fa: "\f2f3"; }
/* ⚠️ A PRO-ONLY, e-PREFIXED CODEPOINT, verified against this CDN's own all.css rather than guessed:
   `curl https://cdn.meter.health/fontawesome/7.3.1/css/all.css` defines `.fa-swap{--fa:"\e609"}`.
   The e-range is Font Awesome's newer set, so this is not one of the classic f-range glyphs and is
   not in the free build. `fa-swap-arrows` (\e60a) is a different icon; `fa-swap-opacity` is a
   duotone modifier and not an icon at all. */
.fa-swap            { --fa: "\e609"; }  /* planned day — switch training <-> recovery */
.fa-trash           { --fa: "\f1f8"; }
.fa-user            { --fa: "\f007"; }  /* app menu — Profile */
.fa-vial            { --fa: "\f492"; }  /* landing page */
.fa-wrench          { --fa: "\f0ad"; }  /* app menu — Tools */
.fa-xmark           { --fa: "\f00d"; }

/* --------------------------------------------------------------------------- the icon-only button
 * ⚠️ AN ICON BUTTON HAS NO ACCESSIBLE NAME OF ITS OWN, and that is the single thing most easily got
 * wrong when a worded button becomes a glyph. `<button>Delete</button>` announces itself;
 * `<button><i class="fa-regular fa-trash"></i></button>` announces nothing at all. Every use of this
 * class MUST carry an `aria-label` and a `title` — the label for a screen reader, the title so a
 * sighted user can discover what an unfamiliar glyph does. `test_icons.py` fails on any that does
 * not, because the omission is invisible on screen.
 *
 * ⚠️ THE WORDS THEREFORE DO NOT GO AWAY. Replacing a text button with an icon moves its string from
 * the button's body to its label; it does not make the string unused. That is why this change
 * deletes far fewer rows than it looks like it should.
 */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ 32px is not decoration. A row-action target smaller than this is a mis-tap on a phone, and
     these replace buttons that used to be as wide as the word "Delete". */
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--panel2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

/* ⚠️ `display: inline-flex` ABOVE BREAKS THE `hidden` ATTRIBUTE, AND THIS PUTS IT BACK. The UA
   stylesheet hides `[hidden]` with a bare attribute selector, specificity (0,1,0) — the same as a
   class — but `.iconbtn` comes later in the cascade and wins the tie. So a button that was
   `<button hidden>` and became an icon button is VISIBLE, on a form that has nothing for it to do.
   It cost archive_ui, whose "the ADD form has no Delete" check is exactly the question. Nothing on
   screen says the rule is missing; the button simply appears where it should not, looking correct. */
.iconbtn[hidden] { display: none; }

.iconbtn:hover { background: var(--panel-edge); }

/* ⚠️ THE DISABLED STATE HAD NO PAINT AT ALL, WHICH IS ISSUE #319 IN ONE LINE. Three handlers on the
   dose reminder already set `btn.disabled = true` for the length of their round trip — the guard
   against a double tap is real and was verified working — and a disabled `.iconbtn` rendered
   PIXEL-IDENTICAL to a live one: same colour, same opacity, same cursor. So on a phone the tap was
   accepted, the button was locked, and the screen said nothing, which reads as "it did not register"
   and invites the second tap the guard exists to stop. State that is real and invisible is worse
   than no state, because the code looks correct while the screen lies.

   ⚠️ IT BELONGS HERE RATHER THAN BESIDE THE DOSE BUTTONS, and that is the reason it is a four-line
   rule instead of a one-screen fix. `.iconbtn` is the app's icon button everywhere — admin rows,
   coach pages, the SPA — so every disabled one in the app had the same hole. The convention already
   existed for its siblings and this class was simply never given one: `.bm-chip:disabled` in
   dashboard.html, and `.coach-quick .cq-btn:disabled` / `.coach-msg .cq-btn:disabled` in
   templates/_coach_chat_css.html (which is where they live since the chat extraction; issue #319
   cites their old dashboard.html line numbers).

   ⚠️ `not-allowed` IS THE RIGHT CURSOR ONLY WHEN THE BUTTON IS MERELY OFF. A button disabled because
   its own work is IN FLIGHT overrides both declarations — see `.iconbtn.is-busy` in dashboard.html,
   which restores full opacity so the spinner it swapped in is legible and uses `progress` instead.
   Dimming a progress indicator is the one case where this rule would hide the feedback. */
/* ⚠️ 0.5 MATCHES dashboard.html's `button:disabled` AND THE SIX STANDALONE TEMPLATES, and it was
   0.45 for one commit — an arbitrary difference of mine, aligned in #335 so the app has ONE number
   for "this control is off" rather than two that differ by an amount nobody can see and everybody
   has to wonder about. */
.iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ⚠️ `:disabled` IS A FORM-CONTROL PSEUDO-CLASS AND NEVER MATCHES AN ANCHOR OR A SPAN, which is
   exactly the trap `templates/_fwd_pager_css.html` warns about when it says "do not include this
   from an admin page to finish the job — its disabled rule is `button[disabled]`, which never
   matches an anchor". The server-rendered pagers (#694) end with a `<span aria-disabled="true">`
   rather than a disabled button, because there is nothing to disable: the anchor is simply absent
   at the ends of the list.

   Without this rule that span renders at FULL strength, identical to a live control, on the one end
   you cannot page past — which reads as a broken button rather than as a finished list. Same 0.5 as
   the line above, deliberately: the app has one number for "this control is off".

   ⚠️ `pointer-events:none` IS THE HALF `:disabled` GIVES FOR FREE AND THIS DOES NOT. A span has no
   default click behaviour, but it still takes hover and still shows a text cursor, so without it the
   dead end feels live to the pointer even while it looks dim. */
.iconbtn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ⚠️ A VISIBLE FOCUS RING, kept explicitly. The default outline is what a keyboard user navigates a
   table of unlabelled glyphs by; a `outline: none` here would make the row actions unusable without
   a mouse and look like nothing had changed. */
.iconbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ⚠️ THE PRIMARY ACTION KEEPS ITS ACCENT, AND WITHOUT THIS IT WOULD NOT HAVE. A form's Save button
   carries no class in this app — it takes `button { background: var(--accent) }` by element
   selector, specificity (0,0,1). `.iconbtn` is (0,1,0) and wins, so simply adding the class to a
   Save button repaints it as a panel-coloured secondary and leaves it visually identical to the
   Cancel beside it. Two same-looking glyphs where one commits and one discards is a worse outcome
   than the words were, and it is invisible in a diff. Save carries `primary`; Cancel does not. */
.iconbtn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.iconbtn.primary:hover { background: var(--accent); filter: brightness(1.1); }

/* Destructive actions read in the danger colour, so a trash can is distinguishable from a pencil at
   a glance rather than only by shape. */
.iconbtn.danger { color: var(--danger); }
.iconbtn.danger:hover { background: var(--danger); color: var(--on-accent); }

/* The favourite star: filled and accented when on, outline and muted when off. */
/* ⚠️ `--accent`, AND IT READ `var(--weight)` — the body-weight SERIES colour — for a favourite
   star. That is the borrowing the note twenty lines down already warns about in the other
   direction ("--warn, NOT --weight"). The property is undeclared since the metric roles retired,
   so the star drew in the inherited text colour.
   ⚠️ A LITERAL WAS TRIED FIRST AND docs/unit/test_theme_tokens.py REFUSED IT, correctly: this file
   is policed, and a hex is a colour the theme cannot reach. `--accent` is also the semantically
   right answer — a favourite is emphasis — and it pairs with `.iconbtn.unstarred`'s `--muted` the
   way `.iconbtn.danger` pairs with `--danger` four lines up.
   ⚠️ THE STAR CHANGES FROM GOLD TO THE ACCENT BLUE, and that is a real visible change rather than
   a restoration. `--warn` would have kept the gold, but the note below reserves it for warnings
   and a favourite is not one. */
.iconbtn.starred { color: var(--accent); }
.iconbtn.unstarred { color: var(--muted); }

/* The little "i" beside a field label, which used to be a letter drawn inside a hand-made circle.
 *
 * ⚠️ THE CIRCLE IS PART OF THE GLYPH NOW, so the border, the border-radius and the panel background
 * all come off — kept, they would draw a second ring around the icon's own. What stays is the SIZE
 * and the alignment: this button sits inside a <label> whose uppercase/letter-spacing rules would
 * otherwise be inherited by the glyph and push it off-centre.
 *
 * ⚠️ IT OVERRIDES .iconbtn's 32px MINIMUM DELIBERATELY, and that is the one place in this file where
 * a smaller target is the right answer. The 32px rule exists for row actions, which are the only
 * thing in the row — this one is punctuation inside a label, and at 32px it would push the field
 * label's own text out of line. Its target is the label text beside it, which is far larger.
 */
.info-btn {
  /* ⚠️ AN EXPLICIT BOX, NOT `min-*: 0` AND WHATEVER THE GLYPH MEASURES. Dropping .iconbtn's 32px
     alone left this button 9px wide by 12 tall — the advance width of one character — which is a
     SMALLER tap target than the 15px circle it replaced. The size has to be stated, or an icon
     swap silently shrinks the thing somebody is trying to hit on a phone. 18px is both bigger than
     what was here before and small enough to sit inside the label's line box without moving it. */
  min-width: 18px;
  min-height: 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 5px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  vertical-align: -1px;
  letter-spacing: 0;
  text-transform: none;
}
.info-btn:hover { color: var(--text); background: none; }

/* The workout Status column: one glyph instead of a word.
   ⚠️ `role="img"` WITH A LABEL ON THE SPAN, not on the <i>. The span is what assistive technology
   announces; the glyph inside it stays aria-hidden like every other icon here. */
.wo-status { display: inline-flex; font-size: 15px; line-height: 1; }
.wo-status .fa-circle-check { color: var(--c-good); }
/* ⚠️ --warn, NOT --weight. A paused session is a warning-coloured thing; --weight is the body-weight
   series' gold and happened to be close enough to orange to pass for one. Borrowing a chart colour
   for a status meant that restyling the weight line would have restyled this icon. */
.wo-status .fa-circle-pause { color: var(--warn); }
/* Pending. ⚠️ The plain --muted grey, deliberately the same neutral every other "nothing has
   happened yet" mark on the page uses, so the column reads as two events and one wait. */
.wo-status .fa-clock        { color: var(--muted); }