@charset "UTF-8";

/* ==========================================================================
   icons.css — self-contained SVG icon system (replaces Font Awesome)
   ==========================================================================

   WHY THIS EXISTS
   ---------------
   Font Awesome was referenced by markup but, on the homepage, never actually
   loaded: index.php linked only assets/theme.css, so every
   `<i class="fa fa-github">` rendered as an empty inline box. Only verify.php
   loaded the vendored font. Rather than re-introduce a webfont dependency
   (network round-trip, FOUT, licence surface, an extra ~70KB directory), the
   handful of glyphs this site actually uses are inlined as SVG.

   Each icon is a mask over a shared <svg> sprite referenced by `mask-image`,
   which means:
     * one colour, inherited from `currentColor` (theming is free),
     * scales with font-size without any SVG attribute plumbing,
     * no webfont, no `::before` codepoint hacks, no layout shift.

   Usage:  <i class="ico ico-github" aria-hidden="true"></i>
   Sprite: assets/icons.svg   (keep both files in sync; tests/test_css_classes.php
            asserts every ico-* used in markup is defined here)
   ========================================================================== */

.ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* --- header: language / theme / nav ------------------------------------- */
.ico-globe   { -webkit-mask-image: url("icons.svg#globe");   mask-image: url("icons.svg#globe"); }
.ico-moon    { -webkit-mask-image: url("icons.svg#moon");    mask-image: url("icons.svg#moon"); }
.ico-sun      { -webkit-mask-image: url("icons.svg#sun");    mask-image: url("icons.svg#sun"); }
.ico-bars    { -webkit-mask-image: url("icons.svg#bars");    mask-image: url("icons.svg#bars"); }
.ico-times   { -webkit-mask-image: url("icons.svg#close");   mask-image: url("icons.svg#close"); }

/* --- links / actions ----------------------------------------------------- */
.ico-arrow-right { -webkit-mask-image: url("icons.svg#arrow-right"); mask-image: url("icons.svg#arrow-right"); }
.ico-download     { -webkit-mask-image: url("icons.svg#download");     mask-image: url("icons.svg#download"); }
.ico-envelope     { -webkit-mask-image: url("icons.svg#envelope");     mask-image: url("icons.svg#envelope"); }
.ico-check        { -webkit-mask-image: url("icons.svg#check");        mask-image: url("icons.svg#check"); }
.ico-check-circle { -webkit-mask-image: url("icons.svg#check-circle"); mask-image: url("icons.svg#check-circle"); }
.ico-times-circle { -webkit-mask-image: url("icons.svg#times-circle"); mask-image: url("icons.svg#times-circle"); }
.ico-shield       { -webkit-mask-image: url("icons.svg#shield");       mask-image: url("icons.svg#shield"); }

/* --- brand: GitHub (geometric mark, drawn to spec) ----------------------- */
.ico-github {
    -webkit-mask-image: url("icons.svg#github");
            mask-image: url("icons.svg#github");
    width: 1.15em; /* the mark reads small next to text; nudge to optical size */
}

/* --- product glyphs (target of the legacy FA-name mapping) --------------- */
.ico-cube     { -webkit-mask-image: url("icons.svg#cube");     mask-image: url("icons.svg#cube"); }
.ico-hdd      { -webkit-mask-image: url("icons.svg#hdd");      mask-image: url("icons.svg#hdd"); }
.ico-link     { -webkit-mask-image: url("icons.svg#link");     mask-image: url("icons.svg#link"); }
.ico-share    { -webkit-mask-image: url("icons.svg#share");    mask-image: url("icons.svg#share"); }
.ico-erase    { -webkit-mask-image: url("icons.svg#erase");    mask-image: url("icons.svg#erase"); }
.ico-connect  { -webkit-mask-image: url("icons.svg#connect");  mask-image: url("icons.svg#connect"); }
.ico-exchange { -webkit-mask-image: url("icons.svg#exchange"); mask-image: url("icons.svg#exchange"); }
.ico-laptop   { -webkit-mask-image: url("icons.svg#laptop");   mask-image: url("icons.svg#laptop"); }
.ico-database { -webkit-mask-image: url("icons.svg#database"); mask-image: url("icons.svg#database"); }
.ico-code     { -webkit-mask-image: url("icons.svg#code");     mask-image: url("icons.svg#code"); }
.ico-bug      { -webkit-mask-image: url("icons.svg#bug");      mask-image: url("icons.svg#bug"); }
.ico-flask    { -webkit-mask-image: url("icons.svg#flask");    mask-image: url("icons.svg#flask"); }
.ico-cubes    { -webkit-mask-image: url("icons.svg#cubes");    mask-image: url("icons.svg#cubes"); }