/* ============================================================
   app.extra.css — application composition layer.
   Loads AFTER app.css; reuses its design tokens (with fallbacks)
   to lay out screen-specific compositions.
   ============================================================ */

:root {
  --x-gap: var(--space-4, 1rem);
  --x-surface: var(--bg-elevated, #12161d);
  --x-muted: var(--text-muted, #9aa4b2);
  --x-hair: var(--border-hair, rgba(255, 255, 255, .09));
  --x-accent: var(--accent, #e6bb56);
  --x-radius: var(--radius-lg, 14px);
  --x-pill: var(--radius-pill, 999px);
}

/* The HTML [hidden] attribute must win over component display rules. */
[hidden] { display: none !important; }

/* ---- Flash stack ---- */
.flashes { display: grid; gap: .6rem; margin-block: .75rem 1rem; }
.flash { display: flex; align-items: center; gap: .75rem; }
.flash__close {
  margin-inline-start: auto; background: none; border: 0; cursor: pointer;
  color: inherit; font-size: 1.25rem; line-height: 1; opacity: .6; padding: 0 .25rem;
}
.flash__close:hover { opacity: 1; }

/* ---- Topbar bits ---- */
.logout-form { display: inline-flex; margin-inline-start: .35rem; }
.brand__logo { max-height: 44px; max-width: 160px; width: auto; height: auto; object-fit: contain; display: block; }
@media (min-width: 720px) { .brand__logo { max-height: 66px; max-width: 210px; } }

/* ---- Larger avatar (user history) ---- */
.avatar--lg { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar--lg img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---- Logo upload preview (admin) ---- */
.logo-preview {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1rem; border: 1px dashed var(--x-hair); border-radius: var(--x-radius);
  background: var(--x-surface); min-height: 64px; margin-block-end: .6rem;
}
.logo-preview img { max-height: 56px; max-width: 220px; object-fit: contain; }

/* ---- Design variant chooser ---- */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.variant-card {
  position: relative; border: 2px solid var(--x-hair); border-radius: var(--x-radius);
  padding: 1rem; cursor: pointer; transition: border-color .18s ease, transform .18s ease;
  display: flex; gap: .7rem; align-items: flex-start;
}
.variant-card:hover { transform: translateY(-2px); }
.variant-card input { margin-block-start: .2rem; }
.variant-card.is-selected, .variant-card:has(input:checked) { border-color: var(--x-accent); }
.variant-swatch { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.variant-swatch--midnight { background: linear-gradient(135deg, #0c1119, #05070b 60%); position: relative; }
.variant-swatch--midnight::after { content: ""; position: absolute; inset: 30% 26%; border-radius: 4px; background: linear-gradient(135deg,#f4d488,#d9a441); }
.variant-swatch--aurora { background: linear-gradient(135deg, #6366f1, #a855f7); }
.variant-card__title { font-weight: 700; }
.variant-card__desc { font-size: .85rem; color: var(--x-muted); }

/* ---- Week grid ---- */
.week-grid { display: grid; gap: var(--x-gap); grid-template-columns: 1fr; align-items: stretch; }
.day__weekday { font-weight: 700; }
.slot__room { font-weight: 500; font-size: .72em; color: var(--x-muted); margin-inline-start: .15rem; opacity: .85; }
.day__closed { margin-inline-start: .4rem; font-size: .68rem; font-weight: 600; vertical-align: middle; }
/* Force cards in a row to align tops and share equal height (no bottom-align/margin drift). */
.week-grid > .day { align-self: stretch; height: 100%; margin-block: 0; }
@media (min-width: 780px) {
  .week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Forms composition ---- */
.form-inline { display: flex; flex-wrap: wrap; gap: var(--x-gap); align-items: end; }
.form-inline .field { margin: 0; flex: 1 1 200px; }
.grid-2 { display: grid; gap: var(--x-gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-actions { display: flex; justify-content: flex-start; gap: .6rem; margin-block-start: .5rem; }
.rename-form { display: flex; gap: .4rem; align-items: center; }
.move-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.move-form .select.input-sm { max-width: 150px; }
.move-form__fields { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.move-form__actions { display: flex; gap: .4rem; align-items: center; margin-inline-start: auto; }
.input-sm { padding-block: .4rem; padding-inline: .6rem; max-width: 220px; }
/* Native date inputs render too wide on mobile — cap them */
input.input[type="date"] { max-inline-size: 200px; }
.form-inline .field:has(input[type="date"]) { flex: 0 1 auto; }

/* ---- Switch row (toggle + label) ---- */
.switch-row { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; font-weight: 600; }

/* ---- Station cards + day toggles ---- */
.station-card__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block-end: .3rem; }
.station-card__badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.days-form { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.days-form__label { font-weight: 600; }
.day-toggles { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-toggles.is-disabled { opacity: .4; pointer-events: none; }
.chip-check {
  display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .6rem;
  border: 1px solid var(--x-hair); border-radius: var(--x-pill); cursor: pointer;
  font-size: .85rem; user-select: none; transition: border-color .15s ease, background .15s ease;
}
.chip-check input { accent-color: var(--x-accent); margin: 0; }
.chip-check:has(input:checked) { border-color: var(--x-accent); background: color-mix(in oklab, var(--x-accent) 12%, transparent); }

/* ---- Per-station closed dates ---- */
.station-closures { display: flex; flex-direction: column; gap: .5rem; }
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip--date { display: inline-flex; align-items: center; gap: .25rem; }
.chip--date form { display: inline; margin: 0; }
.chip__x { background: none; border: 0; cursor: pointer; color: inherit; opacity: .55; font-size: 1.05rem; line-height: 1; padding: 0 .1rem; display: inline-flex; }
.chip__x:hover { opacity: 1; color: var(--x-accent); }
.closure-inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* ---- Row actions (admin tables) ---- */
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-actions form { display: inline-flex; margin: 0; }

/* ---- Users list (cards, no horizontal scroll) ---- */
.user-list { display: flex; flex-direction: column; }
.user-card {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding-block: .9rem; border-block-end: 1px solid var(--x-hair);
}
.user-card:last-child { border-block-end: 0; }
.user-card__main { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 220px; min-inline-size: 0; }
.user-card__name { font-weight: 700; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.user-card__email { font-size: .85rem; word-break: break-word; }
.user-card__badges { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-block-start: .2rem; }
.user-card__actions { flex: 0 0 auto; }

/* ---- Admin sub-nav ---- */
.subnav {
  display: flex; gap: .4rem; margin-block: .25rem 1.25rem;
  overflow-x: auto; padding-block-end: .25rem; -webkit-overflow-scrolling: touch;
}
.subnav__link {
  flex: 0 0 auto; padding: .5rem .95rem; border-radius: var(--x-pill);
  color: var(--x-muted); text-decoration: none; font-weight: 600; font-size: .92rem;
  border: 1px solid var(--x-hair); white-space: nowrap; transition: all .18s ease;
}
.subnav__link:hover { color: inherit; border-color: color-mix(in oklab, var(--x-accent) 40%, transparent); }
.subnav__link.is-active {
  color: #0b0f16; background: var(--x-accent); border-color: transparent;
}
:root[data-theme="light"] .subnav__link.is-active { color: #fff; }

/* Top-level admin nav: 4 equal tabs, never scrolls (even at 320px) */
.subnav--top { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; overflow: visible; }
.subnav--top .subnav__link { text-align: center; justify-content: center; padding-inline: .4rem; }

.breadcrumb { display: flex; align-items: center; gap: .4rem; margin-block: .1rem 1.1rem; font-size: .88rem; color: var(--x-muted); }
.breadcrumb a { color: var(--x-accent); text-decoration: none; font-weight: 600; }

/* Management hub cards */
.hub-head { margin-block-end: 1.4rem; }
.hub-head .section-title { margin-block-end: .15rem; }
.hub-group { margin-block-end: 1.6rem; }
.hub-group__title { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--x-muted); margin-block-end: .55rem; padding-inline-start: .15rem; }
.manage-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 720px) { .manage-hub { grid-template-columns: repeat(3, 1fr); } }
.manage-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem; border: 1px solid var(--x-hair); border-radius: var(--x-radius); background: var(--x-surface); text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; }
.manage-card:hover { border-color: color-mix(in oklab, var(--x-accent) 40%, transparent); transform: translateY(-2px); }
.manage-card__icon { color: var(--x-accent); margin-block-end: .2rem; }
.manage-card__title { font-weight: 700; }
.manage-card__desc { font-size: .84rem; color: var(--x-muted); }

/* ---- My bookings rows ---- */
.booking-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.booking-row__main { display: flex; flex-direction: column; gap: .2rem; }
.booking-row__side { display: flex; align-items: center; gap: .6rem; }
.booking-row + .hairline:last-child { display: none; }

/* ---- Booking modal summary ---- */
.book-summary { font-size: 1.05rem; margin-block-end: 1rem; line-height: 1.6; }

/* ---- Or divider (login) ---- */
.or-divider { display: flex; align-items: center; gap: .75rem; margin-block: 1rem; color: var(--x-muted); font-size: .85rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--x-hair); }

/* ---- Auth ---- */
.auth__title { font-size: 1.6rem; font-weight: 800; text-align: center; margin-block: .5rem .25rem; }
.dev-login summary { cursor: pointer; user-select: none; padding: .35rem 0; }
.dev-login[open] summary { margin-block-end: .35rem; }

/* ---- Prose (rules page) ---- */
.prose { line-height: 1.75; }
.prose h2 { font-size: 1.15rem; margin-block: 1.1rem .5rem; }
.prose h3 { font-size: 1rem; margin-block: .9rem .4rem; }
.prose ul { margin-block: .4rem; padding-inline-start: 1.4rem; }
.prose li { margin-block: .3rem; }
.prose p { margin-block: .5rem; }

/* ============================================================
   Admin utilization dashboard
   ============================================================ */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem; }

/* Reports: period pills + pager */
.period-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.period-pills .chip-check { text-decoration: none; color: inherit; }
.chip-check.is-on { border-color: var(--x-accent); background: color-mix(in oklab, var(--x-accent) 14%, transparent); font-weight: 700; }
.pager { display: flex; gap: .3rem; flex-wrap: wrap; }
.pager .btn.is-active { background: var(--x-accent); color: #fff; border-color: transparent; }
.dash-range { display: flex; align-items: center; gap: .5rem; }
.dash-range .select { max-width: 150px; }

/* KPI tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .9rem; margin-block-end: 1.4rem; }
.stat {
  background: var(--x-surface); border: 1px solid var(--x-hair); border-radius: var(--x-radius);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem;
}
.stat__value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.stat__unit { font-size: 1rem; font-weight: 700; margin-inline-start: .1rem; opacity: .7; }
.stat__label { font-size: .82rem; color: var(--x-muted); }
.stat--accent {
  border-color: color-mix(in oklab, var(--x-accent) 45%, transparent);
  background: color-mix(in oklab, var(--x-accent) 10%, var(--x-surface));
}
.stat--accent .stat__value { color: var(--x-accent); }
.stat__bar { margin-block-start: .55rem; block-size: 6px; border-radius: var(--x-pill); background: var(--x-hair); overflow: hidden; }
.stat__bar span { display: block; block-size: 100%; border-radius: var(--x-pill); background: linear-gradient(90deg, color-mix(in oklab, var(--x-accent) 70%, transparent), var(--x-accent)); transition: inline-size .5s ease; }

/* Chart cards grid */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: var(--x-gap); }
@media (min-width: 820px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }

/* Horizontal bars */
.bar-row { display: grid; grid-template-columns: minmax(78px, 128px) 1fr 2.2rem; align-items: center; gap: .6rem; margin-block: .55rem; }
.bar-label { font-size: .88rem; color: var(--text-body, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { block-size: 9px; border-radius: var(--x-pill); background: var(--x-hair); overflow: hidden; }
.bar-fill { display: block; block-size: 100%; min-inline-size: 2px; border-radius: var(--x-pill); background: linear-gradient(90deg, color-mix(in oklab, var(--x-accent) 55%, transparent), var(--x-accent)); transition: inline-size .5s ease; }
.bar-value { font-weight: 700; text-align: start; font-variant-numeric: tabular-nums; }

/* Vertical columns (over time) */
.cols { display: flex; align-items: flex-end; gap: .5rem; block-size: 150px; padding-block-start: .5rem; overflow-x: auto; }
.col { flex: 1 1 0; min-inline-size: 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; block-size: 100%; gap: .25rem; }
.col__bar { inline-size: 62%; max-inline-size: 34px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--x-accent), color-mix(in oklab, var(--x-accent) 45%, transparent)); transition: block-size .5s ease; }
.col__val { font-size: .72rem; font-weight: 700; color: var(--x-muted); }
.col__label { font-size: .68rem; color: var(--x-muted); white-space: nowrap; }

/* ---- Health self-check ---- */
.health-row { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center; padding-block: .65rem; border-block-end: 1px solid var(--x-hair); }
.health-row:last-child { border-block-end: 0; }
.health-status { inline-size: 26px; block-size: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; grid-row: span 2; }
.health-status--ok { background: color-mix(in oklab, #22c55e 22%, transparent); color: #16a34a; }
.health-status--warn { background: color-mix(in oklab, #f59e0b 24%, transparent); color: #d97706; }
.health-status--bad { background: color-mix(in oklab, #ef4444 22%, transparent); color: #dc2626; }
.health-label { font-weight: 600; }
.health-detail { grid-column: 2; font-size: .85rem; color: var(--x-muted); }

/* ---- Today (who's in) ---- */
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.today-tile { border: 1px solid var(--x-hair); border-radius: var(--x-radius); padding: .9rem 1rem; background: var(--x-surface); }
.today-tile--free { opacity: .7; }
.today-tile__station { font-weight: 700; }
.today-tile__who { margin-block-start: .3rem; }
.today-tile--taken .today-tile__who { color: var(--x-accent); font-weight: 600; }

/* ---- Rebook suggestion ---- */
.rebook { display: flex; align-items: center; gap: .75rem; margin-block-end: 1rem; padding: .7rem .9rem; border-radius: var(--x-radius); border: 1px solid color-mix(in oklab, var(--x-accent) 40%, transparent); background: color-mix(in oklab, var(--x-accent) 9%, transparent); }
.rebook__icon { display: grid; place-content: center; inline-size: 2.1rem; block-size: 2.1rem; flex: 0 0 auto; border-radius: 50%; color: var(--x-accent); background: color-mix(in oklab, var(--x-accent) 15%, transparent); }
.rebook__info { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; flex: 1 1 auto; }
.rebook__title { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.rebook__detail { font-size: .82rem; color: var(--x-muted); }
.rebook .btn { flex: 0 0 auto; }

/* ---- Stations: accordion list ---- */
.stations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-block-end: 1rem; }
.stations-toolbar .input { max-inline-size: 260px; }
.station-list { display: flex; flex-direction: column; gap: .55rem; }
.st-acc { border: 1px solid var(--x-hair); border-radius: var(--x-radius); background: var(--x-surface); overflow: hidden; }
.st-acc[open] { border-color: color-mix(in oklab, var(--x-accent) 32%, var(--x-hair)); }
.st-acc__head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.st-acc__head::-webkit-details-marker { display: none; }
.st-acc__head:hover { background: color-mix(in oklab, var(--x-accent) 5%, transparent); }
.st-acc__chev { inline-size: .5rem; block-size: .5rem; flex: 0 0 auto; border-inline-end: 2px solid var(--x-muted); border-block-end: 2px solid var(--x-muted); transform: rotate(-45deg); transition: transform .18s ease; }
.st-acc[open] .st-acc__chev { transform: rotate(45deg); }
.st-acc__title { font-weight: 700; }
.st-acc__badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.st-acc__meta { margin-inline-start: auto; font-size: .8rem; color: var(--x-muted); white-space: nowrap; }
.st-body { padding: 0 1rem .9rem; }
.st-sec { padding-block: .85rem; border-block-start: 1px solid var(--x-hair); }
.st-sec__h { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--x-muted); margin-block-end: .55rem; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.st-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.st-sub-label { font-size: .85rem; font-weight: 600; margin-block-end: .45rem; }
.st-sub { margin-block-start: .75rem; border: 1px solid var(--x-hair); border-radius: 10px; overflow: hidden; }
.st-sub > summary { list-style: none; cursor: pointer; padding: .55rem .8rem; font-size: .85rem; font-weight: 600; color: var(--x-muted); display: flex; align-items: center; gap: .45rem; }
.st-sub > summary::-webkit-details-marker { display: none; }
.st-sub > summary::before { content: ""; inline-size: .42rem; block-size: .42rem; flex: 0 0 auto; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); transition: transform .18s ease; }
.st-sub[open] > summary::before { transform: rotate(45deg); }
.st-sub[open] > summary { border-block-end: 1px solid var(--x-hair); }
.st-sub .holiday-overrides { padding: .6rem .7rem; margin: 0; }

/* ---- Per-station holiday overrides ---- */
.holiday-overrides { display: flex; flex-direction: column; gap: .4rem; margin-block-start: .35rem; }
.holiday-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .35rem .55rem; border: 1px solid var(--x-hair); border-radius: var(--x-radius); background: var(--x-surface); }
.holiday-row__name { font-size: .88rem; font-weight: 600; margin-inline-end: auto; }
.holiday-row form { margin: 0; }

/* ---- App footer (copyright) ---- */
.app-footer { margin-block-start: 2.5rem; padding-block: 1.1rem; text-align: center; font-size: .8rem; color: var(--x-muted); border-block-start: 1px solid var(--x-hair); }
.app-footer strong { font-weight: 700; color: var(--x-strong, inherit); }

/* ---- Per-station waitlist indicator ---- */
.slot__wait { font-size: .74rem; font-weight: 700; color: var(--x-accent); background: color-mix(in oklab, var(--x-accent) 15%, transparent); padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }

/* ---- Booking grid: fixed-stations group header ---- */
.slot-group { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; inline-size: 100%; margin-block: .5rem .15rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--x-muted); }
.slot-group::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--x-hair); }

/* ---- Waitlist (full-day queue) ---- */
.day__waitlist { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-block-start: .7rem; padding: .6rem .8rem; border-radius: var(--x-radius); border: 1px dashed color-mix(in oklab, var(--x-accent) 45%, transparent); background: color-mix(in oklab, var(--x-accent) 7%, transparent); }
.day__waitlist--on { border-style: solid; border-color: color-mix(in oklab, var(--x-ok, #16a34a) 55%, transparent); background: color-mix(in oklab, var(--x-ok, #16a34a) 10%, transparent); }
.day__waitlist-text { font-size: .86rem; font-weight: 600; color: var(--x-strong, inherit); }
.day__waitlist form { margin: 0; }

/* ---- Pull-to-refresh (native-app feel) ---- */
html { overscroll-behavior-y: contain; }
.ptr { position: fixed; inset-block-start: -54px; inset-inline: 0; display: flex; justify-content: center;
  pointer-events: none; z-index: 200; transition: opacity .2s ease, transform .22s cubic-bezier(.22,1,.36,1); will-change: transform; }
.ptr__ring { inline-size: 40px; block-size: 40px; display: grid; place-content: center; border-radius: 50%;
  color: var(--x-accent, #e6bb56); background: var(--x-surface, #151b26);
  border: 1px solid var(--x-hair, rgba(255,255,255,.12)); box-shadow: 0 10px 24px -10px rgba(0,0,0,.55); }
.ptr__ring svg { inline-size: 21px; block-size: 21px; display: block; }
.ptr.is-ready .ptr__ring { color: #fff; background: var(--x-accent, #e6bb56); border-color: transparent; }
.ptr.is-refreshing .ptr__ring { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.is-refreshing .ptr__ring { animation: none; } }

/* ---- Audit details ---- */
.details { font-size: .8rem; word-break: break-word; white-space: pre-wrap; color: var(--x-muted); }

/* ---- Spacing utilities (supplemental) ---- */
.u-mb-4 { margin-block-end: 1.25rem; }
.u-mb-3 { margin-block-end: 1rem; }
.u-mt-4 { margin-block-start: 1.25rem; }
.u-mt-3 { margin-block-start: 1rem; }
.u-mt-2 { margin-block-start: .5rem; }
.u-text-center { text-align: center; }