/* css/requirement.css — the requirement checks (.req).
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   Requirement checks — hours AND two-or-more categories, always together
   ========================================================================== */
.req{display:flex;gap:.55rem;align-items:flex-start;padding:15px 0}
.req + .req{border-top:1px solid var(--rule)}
.req .glyph{
  font-family:var(--data);font-size:1rem;line-height:1.3;flex:0 0 1.1rem;text-align:center;
}
.req--met .glyph{color:var(--approved)}
.req--unmet .glyph{color:var(--pending)}
.req-text{flex:1 1 auto}
.req-text b{font-weight:700}
.req-note{display:block;font-family:var(--legible);font-size:.875rem;color:var(--ink-soft);margin-top:.15rem}