/* icons.css — the drawn icon set's colour grammar and sizes.

   WHY THIS IS NOT IN public.css
   It started there, next to .card, because only the marketing pages had icons.
   The auth and status pages need the same set and cannot reach that file: they
   are STANDALONE templates that never extend public/_base.html. Seven of them
   (register, verify_email, dpp_login, dpp_accept, dpp_account, dpp_forgot,
   dpp_reset) load style-unified.css; four (complete_profile, maintenance,
   forgot_password, reset_password) load no stylesheet at all and carry their
   whole design in one inline <style>. So the rules live here, and this file
   depends on brand-tokens.css and nothing else.

   THE FALLBACK IN EVERY var() IS LOAD-BEARING
   public.css defines SEMANTIC aliases in its own :root -- --ink, --accent,
   --steel -- over Optrical's raw brand tokens. The standalone pages have no
   public.css, so those aliases do not exist there. var(--ink, var(--c-navy))
   therefore reads "the page's semantic token if it has one, else the brand
   token straight from brand-tokens.css". Both surfaces stay token-driven and
   neither carries a colour literal. Do NOT collapse these to one value: drop
   the alias and a marketing re-theme stops reaching the icons; drop the brand
   token and every auth page's icons render unstyled black.

   THREE ROLES, THREE TOKENS -- a grammar, not decoration:
     .ic-k  the outline that makes the icon recognisable   navy
     .ic-a  the one detail carrying the meaning            orange
     .ic-s  supporting marks that must not compete         steel
   -f suffixes are the filled variants (dots, solid tips). An icon that needs a
   fourth colour is trying to say too much.

   ORANGE NEEDS A LIGHT GROUND. public.css sets that rule out at --accent: the
   brand orange is 3.17:1 on white and must never sit on a navy band. Every
   surface these icons appear on is light -- .card is --surface, the auth boxes
   are white -- so it holds today. Putting an icon inside .statement or .hero
   would break it.

   1.7px stroke, which is also what style-unified.css uses for .nav-ic in the
   logged-in app, so the two sets weigh the same.

   vector-effect is deliberate. Icons are sized in CSS, not by the viewBox, so a
   24-unit path scaled to 56px would carry its strokes up with it and the 1.7
   would land at 4. non-scaling-stroke keeps the weight identical at every size,
   which is the whole reason one set can serve a 30px card and a 56px status
   hero without being drawn twice. */

.ic{width:30px;height:30px;display:block;overflow:visible}
.ic-k,.ic-a,.ic-s{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
                  vector-effect:non-scaling-stroke}
.ic-k{stroke:var(--ink,var(--c-navy))}
.ic-a{stroke:var(--accent,var(--c-orange))}
.ic-s{stroke:var(--steel,var(--c-steel))}
.ic-af,.ic-sf{stroke:none}
.ic-af{fill:var(--accent,var(--c-orange))}
.ic-sf{fill:var(--steel,var(--c-steel))}

/* --steel is a SECONDARY-ON-NAVY token and is only 2.3:1 on a white card. That
   is deliberate and safe: .ic-s never carries meaning on its own -- it is the
   ruled lines on a document, the fold on a map, the hinge of a passport.
   Anything a reader must see is .ic-k or .ic-a. If an icon's ONLY mark is
   .ic-s, the icon is wrong, not the token. */

/* .ic is the size; these are only the placement, so an icon used somewhere
   else does not inherit a card's or a status box's rhythm. */
.card-icon{margin-bottom:14px}

/* The status hero on an auth page: one big glyph above the heading, in a box
   that is text-align:center. .ic is display:block, so the centring is margin
   auto and does NOT come from the parent's text-align -- that is why this rule
   exists rather than relying on the box. 56px, not the 48-52px the emoji used:
   line art reads lighter than a filled colour glyph at the same height. */
.status-icon{width:56px;height:56px;margin:0 auto 16px}
/* non-scaling-stroke pins the stroke at 1.7px whatever the box, which is what
   makes one drawing serve every size -- but it also means a 56px hero carries
   HALF the visual weight of the same icon at 30px (1.7/56 against 1.7/30), and
   it reads as spindly beside a bold heading. Matching the ratio exactly would
   need 3.2px, which is heavier than line art wants; 2.4 is where it stops
   looking thin without turning into a filled glyph. */
.status-icon .ic-k,.status-icon .ic-a,.status-icon .ic-s{stroke-width:2.4}

/* Inline with text -- in a button label, a list item, a heading. Sized in em so
   it tracks whatever type it sits in, and nudged down to sit on the baseline
   rather than the text box's top. */
.inline-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.2em;
             margin-right:.3em;flex:none}