@layer utilities {
  /* A closed set. This is the ONLY file permitted to carry !important, and it
     currently needs none — with Bootstrap and MDB gone there is nothing to
     override. Add a utility only when the same declaration is needed in three
     or more places; anything else belongs in a component. */

  /* ---- Block spacing, on the token scale ---- */
  .fh-mt-2 { margin-block-start: 0.75rem; }
  .fh-mt-3 { margin-block-start: 1rem; }
  .fh-mt-4 { margin-block-start: 1.5rem; }
  .fh-mt-8 { margin-block-start: var(--l-space-12); }
  .fh-mt-10 { margin-block-start: var(--l-space-14); }
  .fh-mt-12 { margin-block-start: var(--l-space-20); }

  /* ---- Sizing ---- */
  .fh-w-full { width: 100%; }
  .fh-self-stretch { align-self: stretch; }

  /* ---- A framed figure: the chart's ruled illustration box ---- */
  .fh-framed {
    margin: 0;
    border: var(--l-hairline) solid var(--l-neatline);
    border-radius: var(--l-radius-md);
    overflow: hidden;
    background-color: var(--l-ground);
  }

  .fh-framed img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- A small INLINE symbol, for use beside a line of text ---- */
  .fh-symbol--sm {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    /* `inline-block`, because `fh-reset.css` sets `svg { display: block }` and a
       block child FORCES ITS OWN LINE in inline flow. This utility's whole stated
       purpose is "beside a line of text", and it could not do that.

       Fixed here rather than a fourth time locally. The same bug has now been
       found in four places and patched in three of them one at a time:
         search/index.html   the "Read more about search filters" mark
         search/filters.html the run mark inside an example chip
         search/host.html    the HTTP status mark, which split `(301` / mark /
                             `Moved Permanently)` across three lines
       DESIGN.md records it as "Mixed Inline Content Belongs In Inline Flow".

       SAFE INSIDE A FLEX ROW, which is where most of the call sites are: a flex
       item's display is blockified by the flex container, so `inline-block`
       computes to `block` there and `flex: 0 0 auto` still governs. It only
       changes behaviour where the symbol sits in real inline flow -- which is
       exactly where it was broken.

       `vertical-align: middle` sits a round glyph on the text's centre rather
       than its baseline, which is where a circular mark wants to be next to
       lowercase. */
    display: inline-block;
    vertical-align: middle;
  }
}