/* ══════════════════════════════════════════════
   icons.css  —  SVG Icon System (Phase 6)
   Foundation only (6A): base .icon utility for the
   inline sprite injected in index.html
   (#app-icon-sprite). Nothing references these icons
   yet — that's 6B (static HTML chrome: nav, header,
   modal-close buttons) and 6C (JS-generated markup:
   action-btn edit/delete, checkboxes, chevrons,
   achievement lock/check).

   Deliberately kept to ONE rule. Icons size themselves
   to `1em`, so dropping one into any existing element
   (.action-btn, .modal-close-btn, .nav-icon, etc.)
   fills exactly the em-box its old emoji glyph
   occupied — no separate icon-size scale needed, no
   visual jump when 6B/6C swap the markup in.
   stroke: currentColor is what makes icons inherit
   each component's existing hover/active color rules
   for free (e.g. .action-btn:hover, .btn-danger:hover)
   without any icon-specific color CSS.
   ══════════════════════════════════════════════ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The sprite's <symbol> definitions live in an inline <svg> in
   index.html (#app-icon-sprite) rather than an external file — this
   avoids a second network request and lets sw.js keep caching just
   index.html itself. The sprite host is visually hidden but still
   present in the accessibility tree as an empty container; it carries
   no semantics of its own so this is inert either way. */
#app-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}