/* ============================================================
   icons.css — sizing for the sprite icons (components/icons/sprite.html)

   Its own file because it is a primitive, not a page style: an <svg> with no
   width/height falls back to the replaced-element default of 300 × 150 px.
   Any page that renders a sprite icon therefore MUST load this stylesheet.

   It used to live in styles.css, which base.html loads — so the standalone
   documents that do not extend base.html (the Save the Date editor and its
   public page) rendered every icon at 300 × 150. The editor was unusable: a
   full-screen star across the toolbar and a pencil the size of the page.

   Load it before any component stylesheet so per-component overrides win.
   ============================================================ */

/* inline-block, not block: these icons replaced inline characters (✓, ★, ⚠)
   sitting inside sentences and buttons. As display:block each one forced its
   own line — five rating stars stacked into a column. Flex containers
   blockify their children anyway, so icon rows are unaffected. */
.icon-svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

.icon-svg-lg {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.icon-svg-xl {
    width: 48px;
    height: 48px;
    display: block;
    flex-shrink: 0;
}