/* css/utilities.css: the u-* classes that replaced style="..." (Phase 3).
   Part 10 of 10 of the app's stylesheet (app.css until Phase 3). Every page loads all the parts, in the
   order of CSS in lib/views/parts.js, so a later part still wins a tie, as further down the one file did. */
/* ---------- utilities: what used to be style="..." in the pages ----------
   The CSP allows no inline styles (Phase 3 of clippantry/PLAN-scale-and-cleanup.md), so each declaration a page used
   is a class here. !important, as an inline style beat every other rule; except display, which the page scripts
   change with el.style.display (u-hide / u-flex must not win over that). */
.u-ai-base {
  align-items: baseline !important;
}
.u-ai-center {
  align-items: center !important;
}
.u-ai-end {
  align-items: flex-end !important;
}
.u-ai-start {
  align-items: flex-start !important;
}
.u-as-start {
  align-self: flex-start !important;
}
.u-bt-dashed {
  border-top: 2px dashed var(--edge) !important;
}
.u-col {
  flex-direction: column !important;
}
.u-f-700-15 {
  font: 700 15px var(--body) !important;
}
.u-f-800-17 {
  font: 800 17px var(--body) !important;
}
.u-f-900-22 {
  font: 900 22px var(--body) !important;
}
.u-f-900-26-11 {
  font: 900 26px/1.1 var(--body) !important;
}
.u-fg {
  color: var(--fg) !important;
}
.u-flex {
  display: flex;
}
.u-fs-12 {
  font-size: 12px !important;
}
.u-fs-13 {
  font-size: 13px !important;
}
.u-fs-15 {
  font-size: 15px !important;
}
.u-fs-17 {
  font-size: 17px !important;
}
.u-fs-18 {
  font-size: 18px !important;
}
.u-fs-20 {
  font-size: 20px !important;
}
.u-fw-700 {
  font-weight: 700 !important;
}
.u-fx-0-0-150 {
  flex: 0 0 150px !important;
}
.u-fx-0-1-160 {
  flex: 0 1 160px !important;
}
.u-fx-0-1-220 {
  flex: 0 1 220px !important;
}
.u-fx-1-1-200 {
  flex: 1 1 200px !important;
}
.u-fx-1-1-220 {
  flex: 1 1 220px !important;
}
.u-fx-1-1-260 {
  flex: 1 1 260px !important;
}
.u-fx-1-1-300 {
  flex: 1 1 300px !important;
}
.u-fx-1-1-320 {
  flex: 1 1 320px !important;
}
.u-gap-6 {
  gap: 6px !important;
}
.u-gap-8 {
  gap: 8px !important;
}
.u-gap-8-14 {
  gap: 8px 14px !important;
}
.u-gap-10 {
  gap: 10px !important;
}
.u-gap-12 {
  gap: 12px !important;
}
.u-gap-14 {
  gap: 14px !important;
}
.u-gap-16 {
  gap: 16px !important;
}
.u-gap-20 {
  gap: 20px !important;
}
.u-hide {
  display: none;
}
.u-jc-between {
  justify-content: space-between !important;
}
.u-ls-wide {
  letter-spacing: 0.08em !important;
}
.u-maxw-280 {
  max-width: 280px !important;
}
.u-maxw-340 {
  max-width: 340px !important;
}
.u-maxw-360 {
  max-width: 360px !important;
}
.u-maxw-420 {
  max-width: 420px !important;
}
.u-maxw-460 {
  max-width: 460px !important;
}
.u-maxw-520 {
  max-width: 520px !important;
}
.u-maxw-560 {
  max-width: 560px !important;
}
.u-minw-0 {
  min-width: 0 !important;
}
.u-minw-200 {
  min-width: 200px !important;
}
.u-minw-260 {
  min-width: 260px !important;
}
.u-ml-auto {
  margin-left: auto !important;
}
.u-mt-6 {
  margin-top: 6px !important;
}
.u-mt-8 {
  margin-top: 8px !important;
}
.u-muted {
  color: var(--muted) !important;
}
.u-p-18-20 {
  padding: 18px 20px !important;
}
.u-p-20-24 {
  padding: 20px 24px !important;
}
.u-p-28 {
  padding: 28px !important;
}
.u-pt-10 {
  padding-top: 10px !important;
}
.u-underline {
  text-decoration: underline !important;
}
.u-upper {
  text-transform: uppercase !important;
}
.u-w-60 {
  width: 60% !important;
}
.u-w-100 {
  width: 100% !important;
}
.u-wrap {
  flex-wrap: wrap !important;
}
.u-ws-normal {
  white-space: normal !important;
}