/* ==========================================================================
   Beautiful UI primitives for FudliHub
   Ported from https://www.beautifului.dev/ (MIT License, © 2026 Shane Levine).
   The originals are React + Tailwind; FudliHub is server-rendered Jinja without
   a build step, so each primitive is re-expressed as plain CSS on top of the
   shadcn token set in styles.css, with a little progressive JS in ui.js.

   Primitives in use:
     .bui-loading     Loading State  – pixel-grid loader, shimmer label, elapsed time
     .bui-task-rows   Task Rows      – live status rows: done / running / failed / waiting
     .bui-filter      Filter Table   – status chips with live counts that filter rows
     .bui-search      Search         – inline search that narrows the same rows
     .bui-approval    Approval Card  – human-in-the-loop decision with a footer
   ========================================================================== */

:root {
  --bui-ink: var(--foreground);
  --bui-ink-2: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  --bui-ink-3: var(--muted-foreground);
  --bui-line: var(--border);
  --bui-line-strong: color-mix(in oklch, var(--foreground) 16%, transparent);
  --bui-surface: var(--card);
  --bui-inset: color-mix(in oklch, var(--card) 94%, var(--secondary));
  --bui-hover: color-mix(in oklch, var(--foreground) 4%, transparent);
  --bui-field: var(--secondary);
  --bui-green: var(--success);
  --bui-green-tint: color-mix(in oklch, var(--success) 14%, transparent);
  --bui-orange: var(--warning);
  --bui-orange-tint: color-mix(in oklch, var(--warning) 14%, transparent);
  --bui-red: var(--destructive);
  --bui-red-tint: color-mix(in oklch, var(--destructive) 12%, transparent);
  --bui-blue: var(--info);
  --bui-blue-tint: color-mix(in oklch, var(--info) 14%, transparent);
  --bui-shadow-hairline: 0 0 0 1px var(--bui-line);
  --bui-shadow-btn: 0 0 0 1px var(--bui-line-strong), 0 1px 2px oklch(0 0 0 / .06);
  --bui-shadow-card: 0 0 0 1px var(--bui-line), 0 1px 2px oklch(0 0 0 / .06), 0 2px 6px oklch(0 0 0 / .05);
  --bui-ease: cubic-bezier(.23, 1, .32, 1);
  --bui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dark, :root.dark {
  --bui-shadow-btn: 0 0 0 1px oklch(100% 0 0 / .1), 0 1px 2px oklch(0% 0 0 / .3);
  --bui-shadow-card: 0 0 0 1px oklch(100% 0 0 / .11), 0 1px 2px oklch(0% 0 0 / .2), 0 2px 6px oklch(0% 0 0 / .2);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bui-shadow-btn: 0 0 0 1px oklch(100% 0 0 / .1), 0 1px 2px oklch(0% 0 0 / .3);
    --bui-shadow-card: 0 0 0 1px oklch(100% 0 0 / .11), 0 1px 2px oklch(0% 0 0 / .2), 0 2px 6px oklch(0% 0 0 / .2);
  }
}

@keyframes bui-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bui-pop-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes bui-shimmer { from { background-position: 150%; } to { background-position: -50%; } }
@keyframes bui-pixel-on { 0%, 100% { opacity: .15; } 18%, 42% { opacity: 1; } }
@keyframes bui-spin { to { transform: rotate(1turn); } }

.bui-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Loading State — 3×3 pixel grid, shimmering label, elapsed seconds.
   ui.js injects this into a submit button while its form is in flight.
   -------------------------------------------------------------------------- */
.bui-loading { display: inline-flex; align-items: center; gap: .6rem; }
.bui-pixels { display: grid; grid-template-columns: repeat(3, 4px); gap: 1.5px; flex: 0 0 auto; }
.bui-pixels span { width: 4px; height: 4px; border-radius: 1px; background: currentColor; opacity: .15; animation: bui-pixel-on 650ms ease-in-out infinite; }
.bui-pixels span:nth-child(1), .bui-pixels span:nth-child(5), .bui-pixels span:nth-child(7) { animation-delay: 90ms; }
.bui-pixels span:nth-child(2), .bui-pixels span:nth-child(6), .bui-pixels span:nth-child(8) { animation-delay: 180ms; }
.bui-pixels span:nth-child(3), .bui-pixels span:nth-child(9) { animation-delay: 270ms; }
.bui-shimmer {
  --bui-shimmer-dim: var(--bui-ink-3);
  --bui-shimmer-bright: var(--bui-ink);
  font-weight: 500;
  color: transparent;
  background-image: linear-gradient(90deg, var(--bui-shimmer-dim) 35%, var(--bui-shimmer-bright) 50%, var(--bui-shimmer-dim) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bui-shimmer 1.4s linear infinite;
}
.button.primary .bui-shimmer { --bui-shimmer-dim: color-mix(in oklch, var(--primary-foreground) 55%, transparent); --bui-shimmer-bright: var(--primary-foreground); }
.bui-elapsed { font-family: var(--bui-mono); font-size: .76rem; color: currentColor; opacity: .65; font-variant-numeric: tabular-nums; }
.button[aria-busy="true"] { pointer-events: none; }

/* --------------------------------------------------------------------------
   Task Rows — pill-shaped rows with a state glyph, title, meta, status pill and
   an expandable detail list. <details> keeps them usable without JavaScript.
   -------------------------------------------------------------------------- */
.bui-task-rows { display: flex; flex-direction: column; gap: .5rem; }
.bui-task-row {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
  color: var(--bui-ink);
  transition: background-color 300ms var(--bui-ease), border-radius 300ms var(--bui-ease);
  animation: bui-fade-up 450ms var(--bui-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.bui-task-row:hover { background: var(--bui-inset); }
.bui-task-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: .35rem .65rem;
  cursor: pointer;
  list-style: none;
  text-align: left;
}
.bui-task-head::-webkit-details-marker { display: none; }
a.bui-task-row .bui-task-head { cursor: pointer; }
.bui-task-state { display: flex; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; align-items: center; justify-content: center; }
.bui-task-state > span {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bui-task-state svg { width: .8rem; height: .8rem; }
.bui-task-row.is-done .bui-task-state > span { background: var(--bui-green); color: #fff; animation: bui-pop-in 300ms var(--bui-ease) both; }
.bui-task-row.is-failed .bui-task-state > span { background: var(--bui-red); color: #fff; animation: bui-pop-in 300ms var(--bui-ease) both; }
.bui-task-row.is-waiting .bui-task-state > span { box-shadow: inset 0 0 0 1.5px var(--bui-line-strong); color: var(--bui-ink); }
.bui-task-row.is-warning .bui-task-state > span { box-shadow: inset 0 0 0 1.5px var(--bui-orange); color: var(--bui-orange); }
.bui-task-row.is-running .bui-task-state > span {
  position: relative;
  color: var(--bui-ink);
  box-shadow: inset 0 0 0 1.5px var(--bui-line);
}
.bui-task-row.is-running .bui-task-state > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  border-top-color: var(--bui-ink);
  animation: bui-spin 900ms linear infinite;
}
.bui-task-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 600; }
.bui-task-meta { flex: 0 0 auto; color: var(--bui-ink-2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bui-task-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--bui-field);
  color: var(--bui-ink-2);
}
.bui-task-row.is-done .bui-task-pill { background: var(--bui-green-tint); color: var(--bui-green); }
.bui-task-row.is-failed .bui-task-pill { background: var(--bui-red-tint); color: var(--bui-red); }
.bui-task-row.is-warning .bui-task-pill { background: var(--bui-orange-tint); color: var(--bui-orange); }
.bui-task-row.is-running .bui-task-pill { background: var(--bui-blue-tint); color: var(--bui-blue); }
.bui-task-chevron { display: flex; width: 1.75rem; height: 1.75rem; margin-left: -.35rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 999px; color: var(--bui-ink-3); transition: transform 250ms var(--bui-ease); }
.bui-task-chevron svg { width: .85rem; height: .85rem; }
details.bui-task-row[open] .bui-task-chevron { transform: rotate(180deg); }
a.bui-task-row .bui-task-chevron { transform: rotate(-90deg); }
.bui-task-body { display: grid; grid-template-columns: 24px 1fr; gap: .65rem; padding: 0 .65rem .65rem; animation: bui-fade-up 300ms var(--bui-ease) both; }
.bui-task-rail { display: block; width: 1px; height: 100%; margin: 0 auto; background: var(--bui-line); }
.bui-task-lines { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bui-task-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--bui-ink-2); }
.bui-task-lines > div > span:last-child { flex: 0 0 auto; font-family: var(--bui-mono); font-size: .74rem; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.bui-task-lines > div > span:last-child:empty { display: none; }
.bui-task-lines p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--bui-ink-2); overflow-wrap: anywhere; }
.bui-task-lines .retry-note { margin-top: .15rem; }
@media (max-width: 700px) {
  /* Two-line head: state · title · chevron, then meta and pill underneath. */
  .bui-task-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: .3rem; padding: .6rem .75rem; }
  .bui-task-title { grid-column: 2; white-space: normal; line-height: 1.3; }
  .bui-task-chevron { grid-column: 3; margin-left: 0; }
  .bui-task-meta { grid-column: 2; }
  .bui-task-pill { grid-column: 3; justify-self: end; }
  .bui-task-body { padding-inline: .75rem; }
}

/* --------------------------------------------------------------------------
   Filter Table + Search — status chips with live counts, plus a search field,
   both narrowing the same set of rows (client-side, JS in ui.js).
   -------------------------------------------------------------------------- */
.bui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .85rem; }
.bui-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0 -.25rem; padding: .25rem; }
.bui-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 1.7rem;
  padding: 0 .7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bui-ink-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms var(--bui-ease), box-shadow 200ms var(--bui-ease), color 200ms var(--bui-ease);
}
.bui-chip:hover { background: var(--bui-hover); }
.bui-chip[aria-pressed="true"] { background: var(--bui-surface); color: var(--bui-ink); box-shadow: var(--bui-shadow-btn); }
.bui-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.bui-chip-dot { width: .4rem; height: .4rem; border-radius: 999px; background: var(--dot, var(--bui-ink-3)); }
.bui-chip-count { padding: 0 .3rem; border-radius: 4px; font-size: .68rem; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }
.bui-chip[aria-pressed="true"] .bui-chip-count { background: var(--bui-field); color: var(--bui-ink-2); }
.bui-search { position: relative; display: flex; align-items: center; flex: 1 1 14rem; max-width: 22rem; margin-left: auto; }
.bui-search svg { position: absolute; left: .7rem; width: .9rem; height: .9rem; color: var(--bui-ink-3); pointer-events: none; }
.bui-search input { height: 2.1rem; padding-left: 2.1rem; border-radius: 999px; font-size: .84rem; background: var(--bui-surface); box-shadow: var(--bui-shadow-hairline); border-color: transparent; }
.bui-search input:focus { box-shadow: 0 0 0 2px var(--ring); }
.bui-search input::-webkit-search-cancel-button { cursor: pointer; }
.bui-empty { padding: 1rem; color: var(--bui-ink-3); font-size: .86rem; text-align: center; }
@media (max-width: 700px) {
  .bui-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .bui-filter::-webkit-scrollbar { display: none; }
  .bui-search { max-width: none; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Approval Card — a question the system asks before it acts. Question first,
   context, then a footer with position counter and the two decisions.
   -------------------------------------------------------------------------- */
.bui-approval {
  position: relative;
  max-width: 34rem;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
  animation: bui-fade-up 380ms var(--bui-ease) both;
}
.bui-approval-body { padding: 1rem 1.1rem .85rem; }
.bui-approval-eyebrow { margin: 0 0 .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bui-ink-3); }
.bui-approval-question { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--bui-ink); }
.bui-approval-text { margin: .5rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--bui-ink-2); }
.bui-approval-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem .6rem 1.1rem; border-top: 1px solid var(--bui-line); background: var(--bui-inset); }
.bui-approval-counter { font-size: .76rem; font-weight: 500; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }
.bui-approval-actions { display: flex; align-items: center; gap: .4rem; }
.bui-approval-actions form { margin: 0; }
.bui-approval-actions .button { height: 2rem; padding-inline: .8rem; font-size: .82rem; }
@media (max-width: 700px) {
  .bui-approval { max-width: none; }
  .bui-approval-foot { flex-direction: column; align-items: stretch; }
  .bui-approval-actions { flex-direction: column-reverse; }
  .bui-approval-actions form, .bui-approval-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bui-task-row, .bui-task-body, .bui-approval, .bui-task-state > span { animation: none !important; }
  .bui-shimmer { animation: none; color: inherit; background: none; }
}

/* --------------------------------------------------------------------------
   Owner overview (/owner) — Insight-Card language: one hero number, compact
   stat tiles, a share bar instead of three separate bars, record rows with
   avatars and status pills. Prefix: .ov-
   -------------------------------------------------------------------------- */
.ov-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 1rem;
  align-items: stretch;
}
.ov-hero-main {
  display: grid;
  align-content: center;
  gap: .35rem;
  padding: 1.5rem 1.6rem;
  border-radius: 18px;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
}
.ov-hero-main .eyebrow { margin: 0; }
.ov-hero-value { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ov-hero-sub { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .25rem 0 0; font-size: .84rem; color: var(--bui-ink-2); }
.ov-hero-sub > span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ov-hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ov-hero.has-four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ov-hero.has-four .ov-hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-tile {
  display: grid;
  align-content: space-between;
  gap: .45rem;
  min-height: 7.25rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
  color: var(--bui-ink);
  transition: background-color 200ms var(--bui-ease), transform 200ms var(--bui-ease);
}
.ov-tile:hover { background: var(--bui-inset); transform: translateY(-1px); }
.ov-tile-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bui-ink-3); }
.ov-tile-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-tile-sub { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--bui-ink-2); }
.ov-tile-sub::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: var(--bui-ink-3); flex: 0 0 auto; }
.ov-tile.is-ok .ov-tile-sub::before { background: var(--bui-green); }
.ov-tile.is-warning .ov-tile-sub::before { background: var(--bui-orange); }
.ov-tile.is-warning .ov-tile-value { color: var(--bui-orange); }
.ov-tile.is-danger .ov-tile-sub::before { background: var(--bui-red); }
.ov-tile.is-danger .ov-tile-value { color: var(--bui-red); }

.ov-section { display: grid; gap: .7rem; }
.ov-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ov-section-head h2 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.ov-section-head .muted { font-size: .8rem; }
.ov-section-head .link { font-size: .82rem; }
.bui-task-pill.is-warning { background: var(--bui-orange-tint); color: var(--bui-orange); }

.ov-grid { display: grid; gap: 1rem; align-items: start; }
.ov-grid-charts { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ov-grid-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-card {
  display: grid;
  gap: .85rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
}
.ov-card > .ov-section-head { margin: 0; }

/* Revenue share bar + legend */
.ov-mix { display: flex; height: .8rem; gap: 2px; overflow: hidden; border-radius: 999px; background: var(--bui-field); }
.ov-mix-seg { display: block; flex: 0 0 var(--w); min-width: 3px; background: var(--c); }
.ov-legend { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--bui-line); font-size: .86rem; }
.ov-legend li:first-child { border-top: 0; }
.ov-legend-dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--c); }
.ov-legend-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-legend-sub { color: var(--bui-ink-3); font-size: .78rem; }
.ov-legend-value { display: inline-flex; align-items: baseline; gap: .4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-legend-value small { color: var(--bui-ink-3); font-weight: 500; font-family: var(--bui-mono); font-size: .72rem; }

/* Signups column chart */
.ov-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; align-items: end; height: 11.5rem; }
.ov-col { display: grid; grid-template-rows: auto 1fr auto; gap: .35rem; height: 100%; justify-items: center; text-align: center; }
.ov-col-value { font-family: var(--bui-mono); font-size: .72rem; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }
.ov-col-track { display: flex; align-items: end; width: 100%; height: 100%; border-radius: 8px; background: var(--bui-inset); box-shadow: var(--bui-shadow-hairline); }
.ov-col-bar { display: block; width: 100%; min-height: 3px; border-radius: 7px; background: color-mix(in srgb, var(--chart-2) 38%, var(--bui-surface)); transition: height 400ms var(--bui-ease); }
.ov-col-bar.is-current { background: var(--chart-2); }
.ov-col small { font-size: .72rem; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }

/* Record rows */
.ov-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--bui-line); }
.ov-row:first-child { border-top: 0; }
.ov-row:has(.ov-pill) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.ov-avatar {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 999px;
  background: var(--bui-field);
  color: var(--bui-ink-2);
  font-size: .8rem; font-weight: 700;
}
.ov-avatar.is-danger { background: var(--bui-red-tint); color: var(--bui-red); }
.ov-row-main { display: grid; gap: .1rem; min-width: 0; }
.ov-row-title { font-size: .9rem; font-weight: 600; color: var(--bui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ov-row-title:hover { text-decoration: underline; }
.ov-row-sub { font-size: .78rem; color: var(--bui-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-row-value { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-empty { padding: .5rem 0; font-size: .86rem; color: var(--bui-ink-3); }
.ov-pill { display: inline-flex; align-items: center; height: 1.4rem; padding: 0 .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; background: var(--bui-field); color: var(--bui-ink-2); }
.ov-pill.success { background: var(--bui-green-tint); color: var(--bui-green); }
.ov-pill.info { background: var(--bui-blue-tint); color: var(--bui-blue); }
.ov-pill.warning { background: var(--bui-orange-tint); color: var(--bui-orange); }
.ov-pill.danger { background: var(--bui-red-tint); color: var(--bui-red); }

@media (min-width: 701px) and (max-width: 1080px) {
  .ov-hero { grid-template-columns: 1fr; }
  .ov-grid-charts, .ov-grid-lists { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ov-hero { grid-template-columns: 1fr; gap: .75rem; }
  .ov-hero-main { padding: 1.25rem; }
  .ov-hero-tiles, .ov-hero.has-four .ov-hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-tile { min-height: 6.5rem; }
  .ov-grid-charts, .ov-grid-lists { grid-template-columns: 1fr; }
  .ov-chart { height: 9.5rem; }
  .ov-row:has(.ov-pill) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ov-row .ov-pill { grid-column: 2; justify-self: start; }
}