/* ─────────────────────────────────────────────────────────────────────────
   ui.css — Bahamus UI kit

   The small set of primitives every page is built from. Each one has a PHP
   component in components/ui/ that renders the right markup — prefer
   <?php component('ui/button', [...]) ?> over hand-writing the classes.

     · .ui-btn         buttons (+ the signature icon tile)
     · .ui-icon-btn    round icon-only buttons
     · .ui-pill        status / label capsules, .ui-dot live indicator
     · .ui-eyebrow     mono micro-labels  ([ ACCRA, GH ]  // About)
     · .ui-display     editorial display type with a serif-italic accent
     · .ui-surface     floating white panel     .ui-glass  panel on dark
     · .ui-card        interactive content card
     · .ui-rule-x/y    hairlines
     · .ui-progress    segmented autoplay progress (drives carousels)
     · .motion-*       shared Alpine x-transition classes
     · .ui-rise-in     on-mount entrance

   Principles: one press response (scale .97 on :active), one focus ring,
   motion from the --ease-* / --dur-* tokens only, everything respects
   prefers-reduced-motion. Colours come from tokens — no hex in this file
   except pure white/black.
───────────────────────────────────────────────────────────────────────── */

/* ══ Accent ════════════════════════════════════════════════════════
   Every brand-coloured touch in the kit reads --ui-accent, so a sub-brand
   page re-points one variable instead of overriding each component. The
   colours themselves come from THEME_COLORS (config.php ← .env). */
:root {
    --ui-accent: var(--color-primary);
    --ui-accent-rgb: var(--color-primary-rgb);
    --ui-accent-on-dark: var(--color-primary);
}
.hc-theme {
    --ui-accent: var(--color-hashcom);
    --ui-accent-rgb: var(--color-hashcom-rgb);
    --ui-accent-on-dark: var(--color-hashcom-light);
}
.bno-theme {
    --ui-accent: var(--color-bno);
    --ui-accent-rgb: var(--color-bno-rgb);
    --ui-accent-on-dark: var(--color-bno-light);
}


/* ══ Buttons ═════════════════════════════════════════════════════════ */
.ui-btn {
    --btn-h: 44px;          /* Apple's minimum comfortable hit target */
    --btn-px: 1.125rem;
    --btn-radius: var(--radius-control);
    --btn-bg: transparent;
    --btn-bg-hover: var(--btn-bg);
    --btn-fg: inherit;
    --btn-border: transparent;
    --tile-bg: var(--color-dark);
    --tile-fg: #fff;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: var(--btn-h);
    padding: 0 var(--btn-px);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-press) var(--ease-standard),
        background-color var(--dur-quick) var(--ease-standard),
        border-color var(--dur-quick) var(--ease-standard),
        color var(--dur-quick) var(--ease-standard),
        box-shadow var(--dur-quick) var(--ease-standard);
}
/* Doubled selectors beat base.css `a` / `a:hover` colour rules */
.ui-btn, .ui-btn:hover, .ui-btn:focus { color: var(--btn-fg); }
.ui-btn:hover { background: var(--btn-bg-hover); }
.ui-btn:active { transform: scale(0.97); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn[disabled],
.ui-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.ui-btn--sm { --btn-h: 36px; --btn-px: 0.875rem; font-size: 0.875rem; --btn-radius: 10px; }
.ui-btn--lg { --btn-h: 52px; --btn-px: 1.375rem; font-size: 1rem; --btn-radius: 14px; }
.ui-btn--block { display: flex; width: 100%; }

/* Variants */
.ui-btn--primary {
    --btn-bg: var(--ui-accent);
    --btn-bg-hover: color-mix(in srgb, var(--ui-accent) 86%, #000);
    --btn-fg: #fff;
    --tile-bg: rgba(255, 255, 255, 0.18);
}
.ui-btn--light {
    --btn-bg: #fff;
    --btn-bg-hover: rgba(255, 255, 255, 0.9);
    --btn-fg: var(--color-ink);
}
.ui-btn--dark {
    --btn-bg: var(--color-dark);
    --btn-bg-hover: color-mix(in srgb, var(--color-dark) 88%, #fff);
    --btn-fg: #fff;
    --tile-bg: rgba(255, 255, 255, 0.12);
}
.ui-btn--glass {
    --btn-bg: var(--glass-bg);
    --btn-bg-hover: var(--glass-bg-hover);
    --btn-fg: #fff;
    --btn-border: var(--glass-border);
    --tile-bg: #fff;
    --tile-fg: var(--color-ink);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}
.ui-btn--outline {
    --btn-bg: #fff;
    --btn-bg-hover: var(--gray-50);
    --btn-fg: var(--gray-900);
    --btn-border: var(--gray-200);
}
.ui-btn--outline:hover { --btn-border: var(--gray-300); }
.ui-btn--ghost {
    --btn-bg-hover: rgb(0 0 0 / 0.04);
    --btn-fg: currentColor;
}

/* Loading: replaces the icon while a form submits (ui/button 'loading') */
.ui-btn__spinner {
    width: 1rem;
    height: 1rem;
    margin: 0 calc((var(--btn-h) - 10px - 1rem) / 2 * var(--has-tile, 0));
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.8;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.ui-btn--tile .ui-btn__spinner { --has-tile: 1; }
.ui-btn[aria-busy="true"] { pointer-events: none; }

/* Plain trailing icon — nudges forward on hover */
.ui-btn__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-spring);
}
.ui-btn:hover .ui-btn__icon--trail { transform: translateX(2px); }

/* Signature icon tile — the square inset at the button's end. On hover the
   glyph slides out to the right while its twin slides in from the left. */
.ui-btn--tile { padding-right: 4px; gap: 0.875rem; }
.ui-btn--tile.ui-btn--icon-first { padding-right: var(--btn-px); padding-left: 4px; }
.ui-btn__tile {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--btn-h) - 10px);
    height: calc(var(--btn-h) - 10px);
    border-radius: calc(var(--btn-radius) - 4px);
    background: var(--tile-bg);
    color: var(--tile-fg);
    overflow: hidden;
    flex-shrink: 0;
}
.ui-btn__glyph {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-base) var(--ease-out-quint);
}
.ui-btn__glyph:last-child { transform: translateX(-200%); }
.ui-btn:hover .ui-btn__glyph:first-child { transform: translateX(200%); }
.ui-btn:hover .ui-btn__glyph:last-child { transform: none; }


/* ══ Icon buttons ════════════════════════════════════════════════════ */
.ui-icon-btn {
    --ib-size: 44px;
    display: inline-grid;
    place-items: center;
    width: var(--ib-size);
    height: var(--ib-size);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-press) var(--ease-standard),
        background-color var(--dur-quick) var(--ease-standard),
        border-color var(--dur-quick) var(--ease-standard),
        color var(--dur-quick) var(--ease-standard),
        opacity var(--dur-quick) var(--ease-standard);
}
.ui-icon-btn:active { transform: scale(0.92); }
.ui-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-icon-btn > svg, .ui-icon-btn > i { width: 1.125rem; height: 1.125rem; }
.ui-icon-btn--sm { --ib-size: 36px; }
.ui-icon-btn--square { border-radius: var(--radius-control); }

.ui-icon-btn--glass {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: #fff;
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}
.ui-icon-btn--glass:hover { background: var(--glass-bg-hover); color: #fff; }
.ui-icon-btn--light { background: #fff; color: var(--color-ink); border-color: var(--gray-200); }
.ui-icon-btn--light:hover { background: var(--gray-50); color: var(--color-ink); }
.ui-icon-btn--dark { background: var(--color-dark); color: #fff; }
.ui-icon-btn--dark:hover { background: color-mix(in srgb, var(--color-dark) 85%, #fff); color: #fff; }


/* ══ Pills & live dot ════════════════════════════════════════════════ */
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.875rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.ui-pill > svg, .ui-pill > i { width: 0.875rem; height: 0.875rem; }
.ui-pill--glass {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}
.ui-pill--light { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-700); }
.ui-pill--brand {
    background: rgb(var(--ui-accent-rgb) / 0.08);
    border-color: rgb(var(--ui-accent-rgb) / 0.16);
    color: var(--ui-accent);
}

.ui-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot-color, var(--color-success));
    flex-shrink: 0;
}
.ui-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: ui-dot-pulse 2.6s var(--ease-out-quint) infinite;
}
@keyframes ui-dot-pulse {
    0%   { transform: scale(0.4); opacity: 0.45; }
    80%, 100% { transform: scale(1.4); opacity: 0; }
}


/* ══ Eyebrows (mono micro-labels) ════════════════════════════════════ */
.ui-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.ui-eyebrow--on-dark { color: rgba(255, 255, 255, 0.5); }
.ui-eyebrow--brand { color: var(--ui-accent); }
.ui-ledger--on-dark .ui-eyebrow--brand,
.ui-eyebrow--on-dark.ui-eyebrow--brand { color: var(--ui-accent-on-dark); }
.ui-eyebrow--bracket::before { content: '[\00a0'; }
.ui-eyebrow--bracket::after  { content: '\00a0]'; }
.ui-eyebrow--slash::before   { content: '//\00a0'; }


/* ══ Ledger (label · rule · meta) ═══════════════════════════════════ */
.ui-ledger { display: flex; align-items: center; gap: 1rem; }
.ui-ledger > .ui-eyebrow { white-space: nowrap; }   /* labels never wrap; the rule flexes */
.ui-ledger__rule { height: 1px; flex: 1; background: var(--hairline-light); }
.ui-ledger--on-dark .ui-ledger__rule { background: rgba(255, 255, 255, 0.14); }
.ui-ledger--short .ui-ledger__rule { flex: 0 0 4rem; }
.ui-ledger__icon { width: 14px; height: 14px; margin-right: -0.4rem; color: var(--ui-accent); flex-shrink: 0; }
.ui-ledger--on-dark .ui-ledger__icon { color: var(--ui-accent-on-dark); }
.ui-ledger__link { white-space: nowrap; transition: color var(--dur-quick) var(--ease-standard); }
.ui-ledger__link:hover { color: var(--ui-accent); }


/* ══ Arrow link ══════════════════════════════════════════════════════ */
.ui-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-quick) var(--ease-standard), transform var(--dur-press) var(--ease-standard);
}
.ui-arrow-link, .ui-arrow-link:hover { color: var(--gray-900); }
.ui-arrow-link:active { transform: scale(0.97); }
.ui-arrow-link:focus-visible { outline: none; border-radius: 999px; box-shadow: var(--focus-ring); }
.ui-arrow-link__dot {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    transition: background-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
}
.ui-arrow-link__dot > svg, .ui-arrow-link__dot > i {
    width: 15px;
    height: 15px;
    transition: transform var(--dur-base) var(--ease-spring);
}
/* Own hover, or the hover of the card it sits in (passive <span> mode) */
.ui-arrow-link:hover .ui-arrow-link__dot,
.group:hover .ui-arrow-link .ui-arrow-link__dot { background: var(--ui-accent); color: #fff; }
.ui-arrow-link:hover .ui-arrow-link__dot > svg,
.group:hover .ui-arrow-link .ui-arrow-link__dot > svg { transform: translateX(2px); }
.ui-arrow-link--on-dark, .ui-arrow-link--on-dark:hover { color: #fff; }
.ui-arrow-link--on-dark .ui-arrow-link__dot { background: var(--glass-bg); color: rgba(255, 255, 255, 0.8); }


/* ══ Display type ════════════════════════════════════════════════════ */
/* Big, light, tightly tracked. Wrap one word in <em> for the serif-italic
   accent:  Find your <em>balance</em> through mindful care. */
.ui-display {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.6rem, 6.2vw, 6.25rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    margin: 0;
    color: inherit;
    text-wrap: balance;
}
.ui-display--lg { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 1; letter-spacing: -0.04em; }
.ui-display--md { font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.ui-display--sm { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; }

.ui-display em,
.ui-serif {
    font-family: var(--font-display-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    /* Optical: the serif runs smaller than the grotesk at the same size */
    font-size: 1.06em;
}
/* The quieter second phrase:  Telecoms, broadcast, <span class="ui-dim">and more.</span> */
.ui-display .ui-dim { opacity: 0.32; }

.ui-lead {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -0.005em;
    margin: 0;
}


/* ══ Item type ═══════════════════════════════════════════════════════
   The two text roles under a section heading, used by every card, row and
   cell: .ui-title (17px, medium) and .ui-body (15px, relaxed). Colour comes
   from the context; on dark add .ui-on-dark. */
.ui-title {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0;
}
.ui-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gray-500);
    margin: 0;
}
.ui-on-dark .ui-title, .ui-title.ui-on-dark { color: #fff; }
.ui-on-dark .ui-body,  .ui-body.ui-on-dark  { color: rgba(255, 255, 255, 0.55); }

/* Small pill / micro eyebrow variants (status chips, panel captions) */
.ui-pill--sm { height: 28px; padding: 0 0.75rem; font-size: 11px; }
.ui-eyebrow--xs { font-size: 10px; }


/* ══ Surfaces ════════════════════════════════════════════════════════ */
.ui-surface {
    background: #fff;
    color: var(--gray-900);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
}
.ui-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}

.ui-card {
    display: block;
    background: #fff;
    color: inherit;
    border: 1px solid var(--hairline-light);
    border-radius: var(--radius-card);
    transition:
        transform var(--dur-base) var(--ease-out-quint),
        border-color var(--dur-quick) var(--ease-standard),
        box-shadow var(--dur-base) var(--ease-standard);
}
a.ui-card:hover,
.ui-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
    color: inherit;
}
a.ui-card:active,
.ui-card--interactive:active { transform: translateY(0) scale(0.995); transition-duration: var(--dur-press); }

/* Row inside a surface/list: icon tile + two lines + chevron */
.ui-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem;
    border-radius: 14px;
    color: var(--gray-900);
    text-decoration: none;
    transition: background-color var(--dur-quick) var(--ease-standard),
                transform var(--dur-press) var(--ease-standard);
}
.ui-row:hover { background: var(--gray-50); color: var(--gray-900); }
.ui-row:active { transform: scale(0.98); }
.ui-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-row__tile {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--gray-700);
    flex-shrink: 0;
    transition: background-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
}
.ui-row__tile > svg, .ui-row__tile > i { width: 1.125rem; height: 1.125rem; }
.ui-row:hover .ui-row__tile { background: rgb(var(--ui-accent-rgb) / 0.1); color: var(--ui-accent); }
.ui-row__body { flex: 1; min-width: 0; }
.ui-row__title { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.ui-row__meta  { display: block; font-size: 0.78rem; color: var(--gray-500); line-height: 1.35; margin-top: 1px; }
.ui-row__chev {
    width: 1rem; height: 1rem;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-spring), color var(--dur-quick) var(--ease-standard);
}
.ui-row:hover .ui-row__chev { transform: translateX(2px); color: var(--gray-700); }


/* ══ Brand lockup ════════════════════════════════════════════════════ */
.ui-brand {
    --brand-h: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}
.ui-brand:hover { color: inherit; }
.ui-brand--sm { --brand-h: 28px; }
.ui-brand--lg { --brand-h: 42px; }
/* Window onto logo.png showing only the coloured mark (it ends at ~23% of
   the image width; the lettering starts at ~30%). */
.ui-brand__mark {
    display: block;
    width: calc(var(--brand-h) * 0.58);
    height: var(--brand-h);
    overflow: hidden;
    flex-shrink: 0;
}
.ui-brand__mark img { height: 100%; width: auto; max-width: none; display: block; }
.ui-brand__word { display: flex; flex-direction: column; line-height: 1; }
.ui-brand__name {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: calc(var(--brand-h) * 0.56);
    letter-spacing: -0.03em;
}
.ui-brand__sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 4px;
}


/* ══ Drafting hairlines (x-hairlines) ═══════════════════════════════
   Segments measured from real elements, overshooting their crossings like
   construction lines. They stroke in once from their start point. */
.ui-hairlines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ui-hairline {
    position: absolute;
    background: var(--hairline-strong, rgba(255, 255, 255, 0.11));
    transform-origin: left top;
    transition: transform 1.2s var(--ease-out-quint) calc(var(--i, 0) * 70ms + 150ms);
}
.ui-hairline--h { height: 1px; transform: scaleX(0); }
.ui-hairline--v { width: 1px; transform: scaleY(0); }
.ui-hairlines.is-drawn .ui-hairline { transform: none; }


/* ══ Ruled index list ════════════════════════════════════════════════
   Numbered rows on hairlines: <ol class="ui-ruled [ui-ruled--2]">
     <li class="ui-ruled__item"><span class="ui-eyebrow">01</span><div>title + body</div></li>
   --2 sets them in two columns from md up. On dark add .ui-on-dark. */
.ui-ruled { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-light); }
.ui-ruled__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--hairline-light);
    list-style: none;
}
.ui-ruled__item > .ui-eyebrow { padding-top: 0.2rem; }
@media (min-width: 768px) {
    .ui-ruled--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
}
.ui-on-dark .ui-ruled, .ui-ruled.ui-on-dark,
.ui-on-dark .ui-ruled__item, .ui-ruled.ui-on-dark .ui-ruled__item { border-color: var(--hairline-dark); }


/* ══ Stats rail (ui/stats) ═══════════════════════════════════════════ */
.ui-stats {
    --stat-rule: var(--hairline-light);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.75rem;
    margin: 0;
}
.ui-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
    .ui-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-stats--on-dark { --stat-rule: var(--hairline-dark); color: #fff; }

.ui-stat {
    display: flex;
    flex-direction: column;
    /* Cells in a row share a height; pushing the label to the bottom keeps
       every label on one baseline even when a value wraps to two lines */
    justify-content: space-between;
    min-width: 0;
    padding-inline: 1.25rem;
    border-left: 1px solid var(--stat-rule);
}
.ui-stats > .ui-stat:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 1023px) {
    /* 2×2: each row starts flush, no rule on its left */
    .ui-stats--4 > .ui-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

.ui-stat__value {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.1vw, 2.15rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
/* Four share the width: a step smaller so values like "DVB-T/S + FM" hold one line */
.ui-stats--4 .ui-stat__value { font-size: clamp(1.15rem, 1.4vw, 1.5rem); }
.ui-stat__label {
    order: 2;
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ui-stats--on-dark .ui-stat__label { color: rgba(255, 255, 255, 0.5); }


/* ══ Segmented control ═══════════════════════════════════════════════
   iOS-style tabs: a soft track, the active segment a raised white pill.
   <div class="ui-segment" role="tablist"><button class="ui-segment__item is-active">… */
.ui-segment {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 4px;
    border-radius: 14px;
    background: var(--gray-100);
    overflow-x: auto;
    scrollbar-width: none;
}
.ui-segment::-webkit-scrollbar { display: none; }
.ui-segment__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-quick) var(--ease-standard),
                color var(--dur-quick) var(--ease-standard),
                box-shadow var(--dur-quick) var(--ease-standard),
                transform var(--dur-press) var(--ease-standard);
}
.ui-segment__item:hover { color: var(--gray-900); }
.ui-segment__item:active { transform: scale(0.97); }
.ui-segment__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-segment__item.is-active {
    background: #fff;
    color: var(--gray-900);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
}
.ui-segment__count { font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); }


/* ══ Framed media ════════════════════════════════════════════════════
   A rounded photo panel; .ui-drift gives the image a slow, barely-there
   drift so a still photo doesn't read as dead. */
.ui-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: rgba(255, 255, 255, 0.04);
}
.ui-drift {
    transform: scale(1.04);
    animation: ui-drift 30s ease-in-out infinite alternate;
}
@keyframes ui-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
}


/* ══ Hairlines ═══════════════════════════════════════════════════════ */
.ui-rule-x, .ui-rule-y { position: absolute; pointer-events: none; background: var(--hairline, var(--hairline-dark)); }
.ui-rule-x { left: 0; right: 0; height: 1px; }
.ui-rule-y { top: 0; bottom: 0; width: 1px; }
.ui-on-light { --hairline: var(--hairline-light); }


/* ══ Segmented progress ══════════════════════════════════════════════
   Each segment's fill animates over --progress-ms. Carousels advance on
   the fill's `animationend`, so pausing the animation (.is-paused) pauses
   the slideshow at exactly the same instant — no timer drift. */
.ui-progress { display: flex; align-items: center; gap: 6px; }
.ui-progress__seg {
    position: relative;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ui-progress__seg::before,
.ui-progress__fill {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
}
.ui-progress__seg::before { background: rgba(255, 255, 255, 0.22); transition: background-color var(--dur-quick); }
.ui-progress__seg:hover::before { background: rgba(255, 255, 255, 0.4); }
.ui-progress__fill { background: #fff; transform: scaleX(0); transform-origin: left center; }
.ui-progress__fill.is-done { transform: scaleX(1); opacity: 0.55; }
.ui-progress__fill.is-active { animation: ui-progress-fill var(--progress-ms, 7000ms) linear forwards; }
.is-paused .ui-progress__fill.is-active { animation-play-state: paused; }
@keyframes ui-progress-fill { to { transform: scaleX(1); } }


/* ══ Stack (slide text without layout shift) ═════════════════════════
   Every item shares one grid cell, so the stack is always as tall as its
   tallest item — swapping the visible one never changes the page height.
   Toggle .is-current; the rest are invisible to sight, pointer and AT.
     <div class="ui-stack"><div class="ui-stack__item is-current">…</div>… */
.ui-stack { display: grid; }
.ui-stack > .ui-stack__item {
    grid-area: 1 / 1;
    align-self: start;
    min-width: 0;
    opacity: 0;
    transform: translateY(14px);
    visibility: hidden;
    pointer-events: none;
    /* Outgoing: quick fade, then drop out of the a11y tree */
    transition: opacity 200ms var(--ease-standard),
                transform 200ms var(--ease-standard),
                visibility 0s linear 200ms;
}
.ui-stack--end > .ui-stack__item { align-self: end; }
.ui-stack > .ui-stack__item.is-current {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    /* Incoming: settles in after the outgoing one has faded */
    transition: opacity var(--dur-slow) var(--ease-out-quint) 120ms,
                transform var(--dur-slow) var(--ease-out-quint) 120ms,
                visibility 0s;
}


/* ══ Motion classes (for x-transition) ═══════════════════════════════
   x-transition:enter="motion-in"   x-transition:enter-start="motion-from-pop"
   x-transition:leave="motion-out"  x-transition:leave-end="motion-from-pop" */
.motion-in       { transition: opacity var(--dur-quick) var(--ease-standard), transform var(--dur-base) var(--ease-out-quint); }
.motion-in-slow  { transition: opacity var(--dur-slow) var(--ease-out-quint), transform var(--dur-slow) var(--ease-out-quint); }
.motion-out      { transition: opacity 140ms var(--ease-standard), transform 140ms var(--ease-standard); }
.motion-fade     { transition: opacity 1s var(--ease-standard); }
.motion-from-fade { opacity: 0; }
.motion-from-pop  { opacity: 0; transform: translateY(-6px) scale(0.98); }
.motion-from-rise { opacity: 0; transform: translateY(14px); }


/* ══ Entrances ═══════════════════════════════════════════════════════ */
/* On mount. Stagger with style="--d: 120ms". For on-scroll use [data-reveal]
   (editorial.css / editorial.js). */
.ui-rise-in { animation: ui-rise var(--dur-slow) var(--ease-out-quint) var(--d, 0ms) both; }
@keyframes ui-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Slow settle for hero imagery: starts slightly zoomed, eases to rest */
.ui-kenburns { animation: ui-kenburns 9s var(--ease-out-quint) both; }
@keyframes ui-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}


/* ══ Utilities ═══════════════════════════════════════════════════════ */
/* Any tappable element that isn't a .ui-btn can opt into the press response */
.ui-press { transition: transform var(--dur-press) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.ui-press:active { transform: scale(0.98); }

html.is-locked { overflow: hidden; }


/* ══ Reduced motion ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-icon-btn, .ui-card, .ui-row, .ui-press,
    .ui-btn__glyph, .ui-btn__icon, .ui-row__chev,
    .ui-arrow-link, .ui-arrow-link__dot > svg { transition: none; }
    .ui-btn:active, .ui-icon-btn:active, .ui-row:active, .ui-press:active { transform: none; }
    .ui-dot::after { animation: none; }
    .ui-rise-in, .ui-kenburns { animation: none; }
    .ui-stack > .ui-stack__item { transform: none; transition: none; }
    .ui-hairline { transform: none; transition: none; }
    .ui-drift { animation: none; }
    /* Without the animation there's no animationend, so carousels hold still */
    .ui-progress__fill.is-active { animation: none; transform: scaleX(1); }
}

/* Ruled list without the index column (.ui-ruled--plain) */
.ui-ruled--plain .ui-ruled__item { grid-template-columns: minmax(0, 1fr); }

/* ══ Tags & wordmarks ════════════════════════════════════════════════
   .ui-tag      small capability / feature chip
   .ui-wordmark a partner/brand name standing in for a logo in a marquee */
.ui-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--hairline-light);
    font-size: 12px;
    line-height: 1.3;
    color: var(--gray-600);
    list-style: none;
}
.ui-on-dark .ui-tag { background: var(--glass-bg); border-color: var(--glass-border); color: rgba(255, 255, 255, 0.75); }
.ui-wordmark {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--gray-500);
    white-space: nowrap;
}

/* ══ Liquid glass panel (on photos / dark) ═══════════════════════════
   .ui-liquid: frosted, light-catching card. Rows inside go light-on-dark. */
.ui-liquid {
    position: relative;
    border-radius: var(--radius-card);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.09) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
            backdrop-filter: blur(28px) saturate(180%);
    color: #fff;
    overflow: hidden;
}
/* Specular sheen across the top edge */
.ui-liquid::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.14), transparent 70%);
    pointer-events: none;
}
.ui-liquid > * { position: relative; }
.ui-liquid .ui-row { color: #fff; }
.ui-liquid .ui-row:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ui-liquid .ui-row__tile { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); }
.ui-liquid .ui-row:hover .ui-row__tile { background: var(--ui-accent); color: #fff; border-color: transparent; }
.ui-liquid .ui-row__chev { color: rgba(255, 255, 255, 0.4); }
.ui-liquid .ui-row:hover .ui-row__chev { color: #fff; }

/* ══ Ruled cells ═════════════════════════════════════════════════════
   A hairline grid with no outer border: 1 col → 2 (sm) → 3 (lg); add
   .ui-cells--4 for four across. nth-of-type, not nth-child, because an
   Alpine <template> can be the list's first child. On dark: .ui-on-dark. */
.ui-cells {
    --cell-rule: var(--hairline-light);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0; padding: 0; list-style: none;
    border-top: 1px solid var(--cell-rule);
}
.ui-on-dark.ui-cells, .ui-on-dark .ui-cells { --cell-rule: var(--hairline-dark); }
.ui-cell {
    list-style: none;
    padding: 2rem 1.75rem 2.25rem 0;
    border-bottom: 1px solid var(--cell-rule);
    text-align: left;
}
@media (min-width: 640px) {
    .ui-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-cell { padding: 2rem 1.75rem 2.25rem; border-left: 1px solid var(--cell-rule); }
    .ui-cell:nth-of-type(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) {
    .ui-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-cell:nth-of-type(2n+1) { border-left: 1px solid var(--cell-rule); padding-left: 1.75rem; }
    .ui-cell:nth-of-type(3n+1) { border-left: 0; padding-left: 0; }
    .ui-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ui-cells--4 .ui-cell:nth-of-type(3n+1) { border-left: 1px solid var(--cell-rule); padding-left: 1.75rem; }
    .ui-cells--4 .ui-cell:nth-of-type(4n+1) { border-left: 0; padding-left: 0; }
}

/* ══ Icon tile ═══════════════════════════════════════════════════════
   A rounded square holding one lucide icon, for cells and rows.
   Light by default; inside .ui-on-dark it turns to glass. A hovered
   .group warms it to the accent. */
.ui-icon-tile {
    display: grid; place-items: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px;
    background: #fff; border: 1px solid var(--hairline-light); color: var(--gray-700);
    transition: background-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick);
}
.ui-icon-tile > svg { width: 1.125rem; height: 1.125rem; }
.ui-on-dark .ui-icon-tile, .ui-icon-tile.ui-on-dark { background: var(--glass-bg); border-color: var(--glass-border); color: rgba(255, 255, 255, 0.85); }
.group:hover .ui-icon-tile { background: rgb(var(--ui-accent-rgb) / 0.12); color: var(--ui-accent); border-color: transparent; }
.ui-on-dark .group:hover .ui-icon-tile, .group:hover .ui-icon-tile.ui-on-dark { background: rgb(var(--ui-accent-rgb) / 0.2); color: #fff; }

/* Ledger meta yields first on narrow screens: it truncates instead of
   pushing past the gutter (the label and rule keep their space). */
.ui-ledger > .ui-eyebrow:last-child:not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A wordmark standing in for a logo inside a cell may wrap (long names) */
.ui-cell .ui-wordmark { white-space: normal; min-width: 0; line-height: 1.2; }

/* ══ Search field ════════════════════════════════════════════════════
   <label class="ui-search"><i data-lucide="search"></i><input type="search" …></label> */
.ui-search {
    display: flex; align-items: center; gap: 0.5rem;
    height: 44px; width: 14rem; max-width: 100%;
    padding: 0 0.875rem;
    border-radius: var(--radius-control);
    background: var(--gray-100);
    color: var(--gray-400);
    transition: background-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.ui-search > svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ui-search:focus-within { background: #fff; box-shadow: 0 0 0 1px var(--gray-200), var(--focus-ring); }
.ui-search input { all: unset; flex: 1; min-width: 0; font-size: 14px; color: var(--gray-900); }
.ui-search input::placeholder { color: var(--gray-400); }

/* ══ Form fields ═════════════════════════════════════════════════════
   iOS-style filled fields: <label class="ui-label"> + .ui-input (input,
   textarea or select). Add .is-invalid for errors; .ui-field-error below. */
.ui-label { display: block; margin: 0 0 0.5rem; font-size: 13px; font-weight: 500; color: var(--gray-700); }
.ui-input {
    display: block; width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid transparent; border-radius: var(--radius-control);
    background: var(--gray-100);
    font-size: 15px; line-height: 1.4; color: var(--gray-900);
    transition: background-color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.ui-input::placeholder { color: var(--gray-400); }
.ui-input:hover { background: color-mix(in srgb, var(--gray-100) 70%, var(--gray-200)); }
.ui-input:focus { outline: none; background: #fff; border-color: var(--gray-200); box-shadow: var(--focus-ring); }
.ui-input.is-invalid { background: rgb(220 38 38 / 0.05); border-color: rgb(220 38 38 / 0.45); }
.ui-input.is-invalid:focus { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.18); }
textarea.ui-input { resize: vertical; min-height: 9rem; }
.ui-field-error { margin: 0.45rem 0 0; font-size: 12.5px; color: #dc2626; }