/* ═══════════════════════════════════════════════════════
   Learning Hive SMS — Main Stylesheet
   Honey/Amber + Warm Navy Design System
   ═══════════════════════════════════════════════════════ */

/* ── Alpine.js ───────────────────────────────────────── */

/* Hide elements until Alpine initialises — prevents flash */
[x-cloak] { display: none !important; }

/* ── Colour Tokens ───────────────────────────────────── */

:root {
  /* Brand — Honey/Amber. Channel triplets (space-separated R G B) so the
     Tailwind `honey` utilities resolve to rgb(var(--honey-N) / <alpha>) and a
     tenant can re-skin the accent by overriding these vars (see branding). */
  --honey-50:  255 251 235;
  --honey-100: 254 243 199;
  --honey-200: 253 230 138;
  --honey-300: 252 211 77;
  --honey-400: 251 191 36;
  --honey-500: 245 158 11;
  --honey-600: 217 119 6;
  --honey-700: 180 83 9;
  --honey-800: 146 64 14;
  --honey-900: 120 53 15;

  /* Navy — Deep dark tones */
  --color-navy-700: #1e2a45;
  --color-navy-800: #152035;
  --color-navy-900: #0f172a;
  --color-navy-950: #080d19;

  /* Semantic — Light mode */
  --color-bg-page:       #faf9f7;
  --color-bg-surface:    #ffffff;
  --color-bg-subtle:     #f5f4f1;
  --color-bg-inverse:    #0f172a;

  --color-text-primary:  #1a1a2e;
  --color-text-secondary:#52525b;
  --color-text-tertiary: #a1a1aa;
  --color-text-inverse:  #f1f5f9;

  --color-border:        #e4e4e7;
  --color-border-strong: #d4d4d8;

  /* Accent — derived from the honey palette so a tenant accent re-skins it */
  --color-accent:        rgb(var(--honey-500));
  --color-accent-hover:  rgb(var(--honey-600));
  --color-accent-light:  rgb(var(--honey-50));
  --color-accent-text:   rgb(var(--honey-800));

  /* Status colours */
  --color-success:       #16a34a;
  --color-success-bg:    #f0fdf4;
  --color-warning:       #d97706;
  --color-warning-bg:    #fffbeb;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fef2f2;
  --color-info:          #2563eb;
  --color-info-bg:       #eff6ff;
  --color-neutral:       #52525b;
  --color-neutral-bg:    #f4f4f5;
}

/* Dark mode overrides */
.dark {
  /* Native controls -- checkboxes, radios, date pickers, selects, scrollbars --
     are drawn by the browser, not by our tokens, and default to their light
     appearance whatever the page around them looks like. `accent-color` only
     reaches the *checked* state, so a ticked box came out honey and correct
     while every unticked one stayed a white square on a navy table. This is the
     one property that tells the browser which way round the page is. */
  color-scheme: dark;

  --color-bg-page:       #0c0f1a;
  --color-bg-surface:    #161b2e;
  --color-bg-subtle:     #1c2237;
  --color-bg-inverse:    #0c0f1a;

  --color-text-primary:  #f1f5f9;
  --color-text-secondary:#94a3b8;
  --color-text-tertiary: #475569;
  --color-text-inverse:  #0f172a;

  --color-border:        #2a3040;
  --color-border-strong: #3a4155;

  --color-accent:        rgb(var(--honey-400));
  --color-accent-hover:  rgb(var(--honey-500));
  --color-accent-light:  rgb(var(--honey-900));
  --color-accent-text:   rgb(var(--honey-200));

  --color-success-bg:    #052e16;
  --color-warning-bg:    #422006;
  --color-danger-bg:     #450a0a;
  --color-info-bg:       #0c1a3a;
  --color-neutral-bg:    #1c2237;
}

/* ── Typography ──────────────────────────────────────── */

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Navigation (Admin Sidebar) ─────────────────────── */

/* Mobile nav drawer. Off-canvas below lg (1024px), static from lg up — the
   breakpoint here must stay in step with the `lg:hidden` on the hamburger and
   the backdrop in admin_panel/base.html.

   Deliberately plain CSS rather than Tailwind's `-translate-x-full` +
   `max-lg:translate-x-0`: the open state has to beat the closed state, and
   stacking two conflicting translate utilities leaves the winner up to
   Tailwind's emit order. `.is-open` outranks the base rule on specificity here,
   so the drawer cannot get stuck closed. Keeping the closed transform in a
   stylesheet rather than an Alpine binding also means the drawer is already
   off-screen on first paint — Alpine is deferred, so binding the closed state
   would flash the full menu open on every mobile page load. */
@media (max-width: 1023.98px) {
  .nav-drawer { transform: translateX(-100%); }
  .nav-drawer.is-open { transform: translateX(0); }
}

/* Collapsible sidebar, tablet-landscape (1024px) and up — the width the static
   sidebar takes is 25% of a 1024px screen, so hiding it is what lets a wide
   table or a three-column grid actually use the display.

   Below the breakpoint this is deliberately inert: there the sidebar is already
   off-canvas and `navOpen` owns it, so a collapsed desktop state must not also
   jam the drawer shut on a phone.

   `.nav-collapsed` lands on <html> from the inline bootstrap in base.html, for
   the same first-paint reason as the mobile rules above. Specificity is doing
   real work here: `html.nav-collapsed .nav-main` (0,2,1) beats Tailwind's
   `lg:ml-64` (0,1,0) whichever order the Play CDN injects its styles in, so the
   expanded default can stay a utility in the template. */
@media (min-width: 1024px) {
  /* Kept in CSS rather than as `transition-[margin]` on the element: §8 rules
     out arbitrary Tailwind values, and the property list belongs next to the
     rule that changes it. */
  .nav-main { transition: margin-left 200ms ease-out; }

  html.nav-collapsed .nav-drawer {
    transform: translateX(-100%);
    /* Hiding is delayed one transition so the panel finishes sliding before it
       leaves the a11y tree; an off-screen sidebar without this keeps every one
       of its ~60 links as a tab stop ahead of the page content. Showing has no
       delay — the rule simply stops applying. */
    visibility: hidden;
    transition: transform 200ms ease-out, visibility 0s linear 200ms;
  }
  html.nav-collapsed .nav-main { margin-left: 0; }
}

/* Which way the toggle's arrow points. Driven off the same <html> class rather
   than `x-show` so the button is right on first paint — see the comment on the
   button in admin_panel/base.html. Outside the media query on purpose: the
   button is `hidden lg:inline-flex`, so below the breakpoint there is nothing
   to get wrong. */
html.nav-collapsed .nav-toggle-collapse,
html:not(.nav-collapsed) .nav-toggle-expand { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  transition: all 150ms ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.nav-item-active {
  background-color: rgb(var(--honey-500) / 0.12);
  color: rgb(var(--honey-400));
}

.nav-item-active svg {
  color: rgb(var(--honey-400));
}

/* Portal tabs */
.portal-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 150ms ease;
  white-space: nowrap;
}

.portal-tab:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.portal-tab-active {
  background-color: var(--color-accent-light);
  color: var(--color-accent-text);
}

.dark .portal-tab-active {
  background-color: rgb(var(--honey-400) / 0.12);
  color: rgb(var(--honey-400));
}

/* ── Buttons ─────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — honey amber */
.btn-primary {
  background-color: var(--color-accent);
  color: rgb(var(--honey-900));
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
}
.dark .btn-primary {
  background-color: rgb(var(--honey-400));
  color: #422006;
}
.dark .btn-primary:hover {
  background-color: rgb(var(--honey-500));
}

/* Dark — navy/dark for secondary actions */
.btn-dark {
  background-color: #0f172a;
  color: #ffffff;
}
.btn-dark:hover {
  background-color: #1e293b;
}
.dark .btn-dark {
  background-color: #1e293b;
  color: #f1f5f9;
}
.dark .btn-dark:hover {
  background-color: #334155;
}

.btn-secondary {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}
.btn-danger:hover {
  background-color: #b91c1c;
}

.btn-ghost {
  color: var(--color-text-secondary);
  background: transparent;
}
.btn-ghost:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.btn-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.625rem;
}

.btn-icon {
  padding: 0.375rem;
}

/* ── Form Inputs ─────────────────────────────────────── */

.form-input {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--honey-500) / 0.2);
  border-color: var(--color-accent);
}

.form-input:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
}

.form-input.error {
  border-color: #f87171;
}
.form-input.error:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
  border-color: #f87171;
}

/* Carries the surface, border and text colours itself rather than leaning on
   .form-input being present too. The design doc defines this class as
   `@apply form-input cursor-pointer appearance-none pr-8 …`, and 356 of the 365
   usages in the app spell it `class="form-select"` alone — so the composition
   has to live here.

   Without them a select was unreadable in dark mode, and not by inheriting the
   wrong token: `appearance: none` takes the control out of the browser's hands,
   so the `color-scheme: dark` above stops painting it, while Preflight's
   `color: inherit` still hands it the page's light text. A white UA field with
   near-white text on it — the one field on a dark form whose value could not be
   read.

   No `font-size` on purpose. 57 of these usages carry a Tailwind text-xs/text-sm
   utility, and adding one here would fight them on stylesheet order for no gain
   (see the iOS zoom note below, which is where select font-size is handled). */
.form-select {
  display: block;
  width: 100%;
  cursor: pointer;
  appearance: none;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}

.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--honey-500) / 0.2);
  border-color: var(--color-accent);
}

.form-select:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.375rem;
}

.form-label-required::after {
  content: ' *';
  color: #ef4444;
}

.form-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.form-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #dc2626;
}
.dark .form-error {
  color: #f87171;
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Error state via wrapper — set by components/_field.html when the bound
   field has errors, so templates never need to mutate widget attrs */
.form-group.has-error .form-input,
.form-group.has-error .form-select {
  border-color: #f87171;
}
.form-group.has-error .form-input:focus,
.form-group.has-error .form-select:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
  border-color: #f87171;
}

/* Element-scoped (not bare .form-checkbox) — CheckboxSelectMultiple and
   RadioSelect widgets copy their attrs' class onto the *wrapping* <div>
   as well as each <input>. A bare class selector here would also shrink
   that wrapper to 1rem, squashing every option's text into it. */
input.form-checkbox,
input.form-radio {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}
input.form-checkbox:focus-visible,
input.form-radio:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Multi-option checkbox/radio groups (CampaignForm programs/events,
   event/lead "interested programs") — Django renders these as a bare
   <div> per option with no spacing; give each option room to breathe. */
.form-group > div:has(> div > label > input.form-checkbox),
.form-group > div:has(> div > label > input.form-radio) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group > div:has(> div > label > input.form-checkbox) > div label,
.form-group > div:has(> div > label > input.form-radio) > div label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

/* Stop iOS Safari zooming the page when a field takes focus.

   Safari scales the whole viewport in on focus of any control whose font-size
   is under 16px, and leaves it scaled — so on an iPhone every form in the app
   currently lurches sideways on the first tap and the user has to pinch back
   out. `.form-input` is 0.875rem and `.form-select` inherits whatever the
   markup gives it, so both trip it.

   Two things about the selectors are deliberate:

   Keyed on `pointer: coarse` rather than a width breakpoint, because this is a
   touch-input behaviour, not a narrow-screen one — an iPad at 800px zooms just
   as an iPhone does, while a desktop window dragged narrow should keep the
   dense sizing staff expect.

   Element-scoped (`input.form-input`, not `.form-input`) for the same reason
   the checkbox rules above are: specificity. 91 of 146 `.form-input` and 57 of
   71 `.form-select` usages also carry a Tailwind `text-xs`/`text-sm` utility,
   which is a single class and would otherwise win or lose on stylesheet order.
   Adding the element name outranks it outright.

   `select.filter-select` currently matches nothing — the class is defined but
   unused — and is listed so the trap does not reopen if anyone adopts it. */
@media (pointer: coarse) {
  input.form-input,
  select.form-input,
  textarea.form-input,
  select.form-select,
  select.filter-select {
    font-size: 1rem;
  }
}

/* ── Filter selects ──────────────────────────────────── */

.filter-select {
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  cursor: pointer;
}

/* ── Pagination ──────────────────────────────────────── */

.pagination-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  transition: all 150ms ease;
}

.pagination-btn:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* ── Progress bars ───────────────────────────────────── */

/*
 * A data-driven width is the one thing a static Tailwind class cannot express:
 * `w-[{{ pct }}%]` is never generated, because Tailwind scans source, not
 * rendered output. So the styling lives here and the template supplies only the
 * datum, as a CSS custom property:
 *
 *   <div class="progress-track">
 *     <div class="progress-fill" style="--fill: 45%"></div>
 *   </div>
 *
 * That keeps to the design system's "Tailwind classes or CSS custom properties
 * only" rule — nothing about the appearance is inline.
 */
.progress-track {
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--color-bg-subtle);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-accent);
  width: var(--fill, 0%);
}

.progress-fill-success { background-color: var(--color-success); }
.progress-fill-warning { background-color: var(--color-warning); }
.progress-fill-danger  { background-color: var(--color-danger); }

/*
 * A track carrying two adjacent segments, for a figure made of two things that
 * must stay legible apart -- cash collected beside a prepayment being spent, on
 * the payment calendar. The segments lose their own radius because the track
 * already clips; rounded on both ends, they read as two separate bars that
 * happen to touch.
 *
 * Driven by the `bar` parameter of components/_kpi_card.html, never by hand:
 * a bar positioned over a card rather than under its text lands on top of the
 * card's own caption the first time somebody passes both.
 */
.progress-track-split { display: flex; }
.progress-track-split .progress-fill { border-radius: 0; }

.progress-fill-prepaid { background-color: var(--color-info); }

/* ── HTMX Indicator ──────────────────────────────────── */

.htmx-request #htmx-indicator {
  transform: scaleX(0.6) !important;
}

.htmx-settling #htmx-indicator {
  transform: scaleX(1) !important;
}

/* ── Button Loading Spinner ──────────────────────────── */

/* Hidden by default; shown while an enclosing HTMX request is in flight
   (form gets .htmx-request) or via Alpine on full-page submits */
.btn .btn-spinner {
  display: none;
}

.htmx-request .btn .btn-spinner,
.btn.htmx-request .btn-spinner,
.btn .btn-spinner.spinning {
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Toast Messages ──────────────────────────────────── */

.toast-progress {
  width: 100%;
  animation: toast-progress 5s linear forwards;
}

.toast:hover .toast-progress {
  animation-play-state: paused;
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0; }
}

/* ── Scroll Animations (Landing Page) ────────────────── */

.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-delay-1 { transition-delay: 0.1s; }
.scroll-animate-delay-2 { transition-delay: 0.2s; }
.scroll-animate-delay-3 { transition-delay: 0.3s; }
.scroll-animate-delay-4 { transition-delay: 0.4s; }

/* ── Honeycomb Pattern (Landing Page) ────────────────── */

.honeycomb-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23f59e0b' stroke-width='0.5' opacity='0.07'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23f59e0b' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── Landing Page Utilities ──────────────────────────── */

.gradient-honey {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
}

.dark .gradient-honey {
  background: linear-gradient(135deg, #1c1608 0%, #261d0a 50%, #2a1f0a 100%);
}

.gradient-navy {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* ── Rich Text ───────────────────────────────────────── */

/* The element rules for `.prose` live in templates/components/_document_prose.html,
   shared verbatim with the certificate PDF. What belongs here instead is
   everything web-only: the size modifier, colours that follow the tenant accent,
   and the chrome around the authoring editor. */

.prose-sm {
  font-size: 0.875rem;
}

/* The cursive face for {{ signer_signature }}.

   Bundled rather than named through the generic `cursive` keyword, and that is
   the whole point. `cursive` resolves to whatever the reader's machine happens to
   have — Segoe Script on Windows, Apple Chancery on macOS, often Comic Sans in
   Chrome — while WeasyPrint has only DejaVu installed and would fall back to a
   plain sans. The same agreement would look like two different documents, which
   is the one thing the shared `.prose` ruleset exists to prevent. One file, both
   surfaces: the PDF loads this same TTF through the `contract-font:` scheme.

   Dancing Script, SIL Open Font License 1.1 — licence shipped alongside it at
   static/fonts/DancingScript-OFL.txt, which the licence requires.

   A variable font with a single weight axis. WeasyPrint instantiates it at 400
   when it subsets, so there is no static instance to ship. There is no italic
   axis either, which is why nothing sets font-style on it: that would ask for a
   synthetic oblique and double-slant a face that is already cursive. */
@font-face {
  font-family: "LHive Signature";
  src: url("../fonts/DancingScript.02ed13c946ba.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.prose a,
.prose-editor .ProseMirror a {
  color: rgb(var(--honey-600));
}

.dark .prose a,
.dark .prose-editor .ProseMirror a {
  color: rgb(var(--honey-400));
}

/* django-prose-editor reads these four custom properties and falls back to
   Django-admin variables that do not exist outside the admin — which is why the
   authoring surface rendered as a white box on a dark page. Setting them is the
   supported hook; overriding the editor's own selectors is not. */
.prose-editor,
.prose-editor-dialog {
  --prose-editor-background:   var(--color-bg-surface);
  --prose-editor-foreground:   var(--color-text-primary);
  --prose-editor-border-color: var(--color-border);
  --prose-editor-active-color: rgb(var(--honey-500));
}

.prose-editor .ProseMirror {
  min-height: 16rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.prose-editor .ProseMirror:focus {
  box-shadow: 0 0 0 2px rgb(var(--honey-500) / 0.2);
}

/* ── Utilities ───────────────────────────────────────── */

.text-2xs {
  font-size: 0.625rem;
  line-height: 1rem;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}