/* ==========================================================================
   HALO BENTO — LAYER 2: CORE COMPONENTS
   Surfaces · Bento tiles · Buttons · Inputs · Filters · Tabs · Data · Status
   Requires halo-tokens.css.
   ========================================================================== */

.halo, .halo-scope {
    font-family: var(--halo-font);
    font-size: var(--halo-text-body);
    color: var(--halo-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   1. SURFACES
   Rule: data lives on SOLID surfaces. Glass is reserved for the summary layer.
   ========================================================================== */

.halo-card {
    background: var(--halo-surface);
    border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-xl);
    box-shadow: none;
    padding: var(--halo-5);
}

.halo-card--flush { padding: 0; }
.halo-card:has(> .halo-card__body) { padding: 0; }
.halo-card--sunken { background: var(--halo-surface-sunken); box-shadow: none; }
.halo-card--structured { padding: 0; overflow: hidden; }
.halo-card__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--halo-4); padding: 18px var(--halo-5) 0;
}
.halo-card__heading { display: grid; gap: var(--halo-1); min-width: 0; }
.halo-card__actions { display: flex; align-items: center; gap: var(--halo-2); flex: none; }
.halo-card__body { padding: var(--halo-4) var(--halo-5) var(--halo-5); }
.halo-card__header + .halo-card__body { padding-top: var(--halo-4); }

/* Navigational card (the "Voice Infrastructure" pattern): whole card is a hit
   target, so it needs a real hover and a real focus ring. */
.halo-card--nav {
    display: flex;
    align-items: center;
    gap: var(--halo-4);
    padding: var(--halo-4) var(--halo-5);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color var(--halo-duration-1) var(--halo-ease-out),
                box-shadow var(--halo-duration-4) var(--halo-ease-spring),
                transform var(--halo-duration-4) var(--halo-ease-spring);
}
.halo-card--nav:hover {
    border-color: var(--halo-hairline-strong);
    box-shadow: var(--halo-shadow-lift);
    transform: translateY(-3px);
}
.halo-card--nav:active { transform: scale(.98); }
.halo-card--nav:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-card--nav[aria-current="true"] {
    border-color: transparent;
    background: var(--halo-soft-navy);
}

.halo-card__title { font-family: var(--halo-font-display); font-size: var(--halo-text-title); font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.halo-card__subtitle { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); margin: 2px 0 0; }

/* Section header — replaces ad-hoc <h2> styling across pages. */
.halo-section { margin-block: var(--halo-8) var(--halo-4); }
.halo-section__title { font-family: var(--halo-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.halo-section__hint { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); margin: 2px 0 0; }

.halo-overline {
    font-size: var(--halo-text-caption);
    font-weight: 600;
    letter-spacing: var(--halo-tracking-wide);
    text-transform: uppercase;
    color: var(--halo-text-tertiary);
}

/* ==========================================================================
   2. BENTO TILE — the metric widget (HaloMetricCard)
   --------------------------------------------------------------------------
   A solid brand-colour block: label, a big Bricolage number, one line of
   context. Colour is meaning (navy volume, blue communication, green won,
   yellow today/waiting, red urgent). Neutral and zero values become a plain
   white tile so a screen never shows more than a few loud blocks.
   Doubled class selectors keep the recipe above feature styles.
   ========================================================================== */

.halo-metric {
    --metric-bg: var(--halo-fill-navy);
    --metric-fg: var(--halo-on-fill);
    --metric-soft: rgb(255 255 255 / .2);
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--halo-2);
    min-width: 0; min-height: 136px;
    padding: 18px 20px;
    border: 1px solid transparent;
    border-radius: var(--halo-radius-2xl);
}
.halo-metric.halo-metric {
    --metric-ink: var(--metric-fg);
    --ink: var(--metric-fg);
    background: var(--metric-bg);
    color: var(--metric-fg);
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: transform var(--halo-duration-4) var(--halo-ease-spring),
                box-shadow var(--halo-duration-4) var(--halo-ease-spring),
                background-color var(--halo-duration-3) var(--halo-ease-out);
}
/* A soft disc in the corner gives the block depth without a gradient. */
.halo-metric::after {
    content: ""; position: absolute; z-index: -1; right: -70px; bottom: -90px;
    width: 200px; height: 200px; border-radius: 50%;
    background: currentColor; opacity: .08; pointer-events: none;
}

.halo-metric--brand,
.halo-metric--pipeline { --metric-bg: var(--halo-fill-navy); }
.halo-metric--info,
.halo-metric--campaign { --metric-bg: var(--halo-fill-blue); }
.halo-metric--success  { --metric-bg: var(--halo-fill-green); }
.halo-metric--critical { --metric-bg: var(--halo-fill-red); }
.halo-metric--warning  { --metric-bg: var(--halo-fill-yellow); --metric-fg: var(--halo-on-fill-yellow); --metric-soft: rgb(14 46 74 / .1); }
.halo-metric--neutral,
.halo-metric--context  { --metric-bg: var(--halo-surface); --metric-fg: var(--halo-text); --metric-soft: var(--halo-surface-sunken); }
.halo-metric.halo-metric--neutral,
.halo-metric.halo-metric--context { border-color: var(--halo-hairline); }
.halo-metric--neutral::after, .halo-metric--context::after { display: none; }

/* Satellite tiles sit next to a solid identity tile (or after the fourth solid
   tile) and keep their meaning as a soft pair, so a screen stays at four loud blocks. */
.halo-satellites > .halo-metric.halo-metric { --metric-bg: var(--halo-soft-navy); --metric-fg: var(--halo-soft-navy-ink); --metric-soft: rgb(var(--halo-navy) / .08); border-color: transparent; }
.halo-satellites > .halo-metric--info.halo-metric, .halo-satellites > .halo-metric--campaign.halo-metric { --metric-bg: var(--halo-soft-blue); --metric-fg: var(--halo-soft-blue-ink); }
.halo-satellites > .halo-metric--success.halo-metric { --metric-bg: var(--halo-soft-green); --metric-fg: var(--halo-soft-green-ink); }
.halo-satellites > .halo-metric--warning.halo-metric { --metric-bg: var(--halo-soft-yellow); --metric-fg: var(--halo-soft-yellow-ink); }
.halo-satellites > .halo-metric--critical.halo-metric { --metric-bg: var(--halo-soft-red); --metric-fg: var(--halo-soft-red-ink); }
.halo-satellites > :is(.halo-metric--neutral, .halo-metric--context).halo-metric { --metric-bg: var(--halo-surface); --metric-fg: var(--halo-text); border-color: var(--halo-hairline); }

/* Workboard and Analytics identities stay coloured even at zero. */
.workboard-metric--leads { --metric-bg: var(--halo-fill-navy); --metric-fg: var(--halo-on-fill); --metric-soft: rgb(255 255 255 / .2); }
.workboard-metric--activity { --metric-bg: var(--halo-fill-blue); --metric-fg: var(--halo-on-fill); --metric-soft: rgb(255 255 255 / .2); }
.workboard-metric--sales { --metric-bg: var(--halo-fill-green); --metric-fg: var(--halo-on-fill); --metric-soft: rgb(255 255 255 / .2); }
.workboard-metric--pending { --metric-bg: var(--halo-fill-yellow); --metric-fg: var(--halo-on-fill-yellow); --metric-soft: rgb(14 46 74 / .1); }
.workboard-metric--underwriting { --metric-bg: var(--halo-surface); --metric-fg: var(--halo-text); --metric-soft: var(--halo-soft-navy); }
.halo-metric.workboard-metric--underwriting { border-color: var(--halo-hairline); }
.workboard-metric--underwriting::after { display: none; }
.workboard-metric--leads.halo-metric, .workboard-metric--activity.halo-metric, .workboard-metric--sales.halo-metric,
.workboard-metric--pending.halo-metric { border-color: transparent; }
.halo-metric.studio-dataset--leads { --metric-bg: var(--halo-fill-blue); }
.halo-metric.studio-dataset--sales { --metric-bg: var(--halo-fill-green); }
.halo-metric.studio-dataset--receipts { --metric-bg: var(--halo-fill-navy); }
.halo-metric.studio-dataset--calls { --metric-bg: var(--halo-fill-yellow); --metric-fg: var(--halo-on-fill-yellow); --metric-soft: rgb(14 46 74 / .1); }
.halo-metric.studio-dataset--forms { --metric-bg: var(--halo-fill-red); }
.halo-metric.studio-dataset--neutral { --metric-bg: var(--halo-surface); --metric-fg: var(--halo-text); --metric-soft: var(--halo-surface-sunken); }

.halo-metric--action { cursor: pointer; text-align: left; width: 100%; font: inherit; }
.halo-metric.halo-metric--action:hover,
.halo-metric.halo-metric[role="button"]:hover { transform: translateY(-4px); box-shadow: var(--halo-shadow-lift); }
.halo-metric.halo-metric--action:active,
.halo-metric.halo-metric[role="button"]:active { transform: scale(.98); }
.halo-metric.halo-metric:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-metric.halo-metric:is(.is-selected, [aria-pressed="true"]) { box-shadow: 0 0 0 3px var(--halo-canvas), 0 0 0 5px var(--metric-bg); }
.halo-metric.halo-metric--neutral:is(.is-selected, [aria-pressed="true"]) { box-shadow: 0 0 0 3px var(--halo-canvas), 0 0 0 5px var(--halo-ink-brand); }

.halo-metric__head { display: flex; align-items: center; gap: var(--halo-2); }
.halo-metric__icon {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: var(--halo-radius-sm);
    color: var(--metric-fg); background: var(--metric-soft);
}
.halo-metric__icon :is(svg, .mud-icon-root) { width: 16px; height: 16px; font-size: 16px; }
.halo-metric__label { font-size: var(--halo-text-sm); font-weight: 600; color: var(--metric-fg); overflow-wrap: anywhere; }
.halo-metric__reading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--halo-3); margin-top: auto; }
.halo-metric__value {
    font-family: var(--halo-font-display); font-size: 2.75rem; font-weight: 700;
    line-height: .95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
    color: var(--metric-fg);
}
.halo-metric__sparkline { width: 72px; height: 28px; flex: none; overflow: visible; }
.halo-metric__sparkline polygon { fill: var(--metric-soft); }
.halo-metric__sparkline polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.halo-metric__sparkline circle { fill: currentColor; }
.halo-metric__footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--halo-2); font-size: var(--halo-text-caption); color: var(--metric-fg); opacity: .92; }
.halo-metric__delta {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--halo-radius-pill);
    font-size: var(--halo-text-caption); font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--metric-soft); color: var(--metric-fg);
}
.halo-metric__selected {
    position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: var(--halo-radius-pill); background: var(--metric-fg); color: var(--metric-bg);
    font-size: var(--halo-text-caption); font-weight: 700;
}
.halo-metric--neutral .halo-metric__selected { background: var(--halo-ink-brand); color: var(--halo-surface); }
.halo-metric[aria-pressed="true"] .halo-metric__head { padding-inline-end: var(--halo-6); }
/* Attention: a small pulsing beacon, never a coloured stripe. */
.halo-metric--attention .halo-metric__head::after {
    content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; flex: none;
    background: var(--metric-fg); animation: halo-beacon 2s var(--halo-ease-out) infinite;
}
@keyframes halo-beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--metric-fg) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

.halo-metric--compact { min-height: 104px; padding: 14px 16px; }
.halo-metric--compact .halo-metric__value { font-size: 2rem; }

.halo-multi-picker__label { color: var(--halo-text-secondary); flex-shrink: 0; }

/* Bento grid: tiles wrap, never scroll off-screen. */
.halo-metric-grid { display: grid; gap: var(--halo-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }

.halo-metric--loading { pointer-events: none; --metric-bg: var(--halo-surface-sunken); --metric-fg: var(--halo-text-tertiary); }
.halo-metric.halo-metric--loading :is(.halo-metric__value, .halo-metric__label) {
    color: transparent; border-radius: var(--halo-radius-xs);
    background: linear-gradient(90deg, var(--halo-surface-pressed), var(--halo-surface-hover), var(--halo-surface-pressed));
    background-size: 200% 100%; animation: halo-shimmer 1.4s linear infinite;
}
.halo-metric--loading .halo-metric__icon { visibility: hidden; }
@keyframes halo-shimmer { to { background-position: -200% 0; } }

/* Analytics Studio KPI cards share the recipe. */
.halo-metric.studio-kpi :is(.studio-kpi-value, .studio-kpi-unit),
.halo-metric.studio-kpi > .studio-caption,
.halo-metric.studio-kpi > header > .halo-metric__label,
.halo-metric.studio-kpi > header > .halo-metric__icon,
.halo-metric.studio-kpi > header > .studio-menu > summary,
.halo-metric.studio-kpi > footer > .halo-btn { color: var(--metric-fg); }
.halo-metric.studio-kpi > footer > .halo-btn:hover { background: var(--metric-soft); }
.halo-metric.studio-kpi .studio-spark { stroke: var(--metric-fg); }
.halo-metric.studio-kpi[aria-busy="true"] .studio-kpi-value { background: var(--metric-soft); }
.studio-block--kpi:has(.halo-metric) > .halo-dashboard-widget__header .halo-btn,
.studio-block--kpi:has(.halo-metric) > .studio-resize { color: var(--halo-text-secondary); }

/* Marketing summary strips predate HaloMetricCard: same tile, campaign blue. */
.marketing-workspace :is(.marketing-metrics, .report-kpis, .heatmap-kpi-strip, .studio-summary) > article {
    background: var(--halo-fill-blue); color: var(--halo-on-fill); border-color: transparent; border-radius: var(--halo-radius-2xl); box-shadow: none;
}
.marketing-workspace :is(.marketing-metrics, .report-kpis, .heatmap-kpi-strip, .studio-summary) > article :is(span, strong, small) { color: var(--halo-on-fill); }

@media (prefers-reduced-motion: reduce) {
    .halo-metric, .halo-metric * { animation: none !important; }
    .halo-metric.halo-metric--action:hover, .halo-metric.halo-metric[role="button"]:hover { transform: none; }
}
@media (forced-colors: active) {
    .halo-metric.halo-metric { background: Canvas; color: CanvasText; border-color: CanvasText; }
    .halo-metric.halo-metric:is(.is-selected, [aria-pressed="true"], :focus-visible) { outline: 2px solid Highlight; }
    .halo-metric__value, .halo-metric__label { color: CanvasText; }
}

/* ==========================================================================
   3. BUTTONS — pills. Red is the one primary action per view.
   ========================================================================== */

.halo-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--halo-2);
    height: var(--halo-control-md);
    padding-inline: 16px;
    border-radius: var(--halo-radius-pill);
    border: 1px solid transparent;
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--halo-duration-1) var(--halo-ease-out),
                border-color var(--halo-duration-1) var(--halo-ease-out),
                box-shadow var(--halo-duration-3) var(--halo-ease-out),
                opacity var(--halo-duration-1) var(--halo-ease-out),
                transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.96); }
.halo-btn:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-btn:disabled, .halo-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.halo-btn.halo-btn--primary { background: var(--halo-action-brand); color: var(--halo-on-action); }
.halo-btn.halo-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 12px 24px -12px rgb(var(--halo-red) / .75); }
/* Mud's disabled foreground is important; retain white on the brand surface. */
.mud-button-root.halo-btn.halo-btn--primary:disabled { color: var(--halo-on-action) !important; }
.halo-btn--primary { --mud-ripple-color: var(--halo-on-action); }
.halo-btn--primary :is(.mud-button-label, .mud-button-icon, .mud-icon-root, .halo-btn__spinner) { color: inherit; }

.halo-btn--secondary { background: var(--halo-surface); color: var(--halo-text); border-color: var(--halo-input-border); }
.halo-btn--secondary:hover:not(:disabled) { background: var(--halo-surface-hover); }

.halo-btn--ghost { background: transparent; color: var(--halo-text-secondary); }
.halo-btn--ghost:hover:not(:disabled) { background: var(--halo-surface-hover); color: var(--halo-text); }

.halo-btn--danger { background: var(--halo-action-critical); color: var(--halo-on-action); }
.halo-btn--danger:hover:not(:disabled) { box-shadow: 0 12px 24px -12px rgb(var(--halo-red) / .75); }

.halo-btn--sm { height: var(--halo-control-sm); padding-inline: var(--halo-3); font-size: var(--halo-text-caption); }
.halo-btn--lg { height: var(--halo-control-lg); padding-inline: 20px; font-size: var(--halo-text-body); }
.halo-btn--icon { width: var(--halo-control-md); padding: 0; }
.halo-btn--icon.halo-btn--sm { width: var(--halo-control-sm); }
.mud-button-root.halo-btn { min-width: 0; text-transform: none; line-height: 1; }
.mud-button-root.halo-btn .mud-button-label { gap: var(--halo-2); }
.mud-button-root.halo-btn .mud-button-icon { margin: 0; }
.mud-button-root.halo-btn .mud-button-icon :is(svg, .mud-icon-root) { width: 16px; height: 16px; font-size: 16px; }
.halo-btn__spinner { margin-right: var(--halo-1); }

/* ==========================================================================
   4. INPUTS
   One border style, one height, one focus ring, label always above.
   ========================================================================== */

.halo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.halo-field__label { font-size: var(--halo-text-sm); font-weight: 600; color: var(--halo-text); }
.halo-field__label .halo-req { color: var(--halo-ink-critical); margin-left: 2px; }
.halo-field__hint { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); }
.halo-field__error { font-size: var(--halo-text-sm); color: var(--halo-ink-critical); font-weight: 500; }

.halo-input,
.halo-select,
.halo-textarea {
    width: 100%;
    min-width: 0;
    height: var(--halo-control-lg);
    padding: 0 var(--halo-3);
    font: 400 var(--halo-text-body)/1 var(--halo-font);
    color: var(--halo-text);
    background: var(--halo-surface);
    border: 1px solid var(--halo-input-border);
    border-radius: var(--halo-radius-pill);
    box-shadow: none;
    transition: border-color var(--halo-duration-1) var(--halo-ease-out),
                box-shadow var(--halo-duration-3) var(--halo-ease-spring),
                background-color var(--halo-duration-1) var(--halo-ease-out);
    appearance: none;
}
.halo-input, .halo-select { padding: 0 var(--halo-4); }
.halo-textarea { height: auto; min-height: 96px; padding: var(--halo-3) var(--halo-4); line-height: 1.5; resize: vertical; border-radius: var(--halo-radius-lg); }

.halo-input::placeholder, .halo-textarea::placeholder { color: var(--halo-text-tertiary); }
.halo-input:hover, .halo-select:hover, .halo-textarea:hover { border-color: var(--halo-input-border-hover); }
:root[data-theme="dark"] .halo-input:hover, .halo-dark .halo-input:hover { border-color: var(--halo-input-border-hover); }

.halo-input:focus, .halo-select:focus, .halo-textarea:focus {
    outline: none;
    border-color: var(--halo-focus-color);
    box-shadow: var(--halo-focus-ring-field);
}
.halo-input:disabled, .halo-select:disabled, .halo-textarea:disabled {
    background: var(--halo-surface-sunken);
    color: var(--halo-text-tertiary);
    cursor: not-allowed;
}
.halo-input[aria-invalid="true"], .halo-select[aria-invalid="true"], .halo-textarea[aria-invalid="true"] {
    border-color: var(--halo-ink-critical);
    animation: halo-field-shake var(--halo-duration-3) var(--halo-ease-out);
}
.halo-input[aria-invalid="true"]:focus, .halo-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(var(--halo-red) / .14); }
@keyframes halo-field-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* MudBlazor is the behavior layer for complex controls. These selectors make
   its generated DOM obey Halo geometry without depending on legacy Bop CSS. */
.halo-field .mud-input-control { margin: 0; }
.halo-field .mud-input-control > .mud-input-control-input-container > .mud-input-label { display: none; }
.halo-field .mud-input-root {
    min-height: var(--halo-control-lg);
    color: var(--halo-text);
    background: var(--halo-surface);
    border-radius: var(--halo-radius-pill);
    font: 400 var(--halo-text-body)/1.35 var(--halo-font);
}
.halo-field .mud-input-outlined-border {
    border: 1px solid var(--halo-input-border);
    border-radius: var(--halo-radius-pill);
}
.halo-field .mud-input-root:hover .mud-input-outlined-border { border-color: var(--halo-input-border-hover); }
.halo-field .mud-input-control:focus-within .mud-input-outlined-border { border-color: var(--halo-focus-color); }
.halo-field .mud-input-control:focus-within .mud-input-root { box-shadow: var(--halo-focus-ring-field); }
.halo-field .mud-input-error .mud-input-outlined-border { border-color: var(--halo-ink-critical); }
.halo-field .mud-input-helper-text { margin: var(--halo-1) 0 0; color: var(--halo-text-tertiary); font-size: var(--halo-text-sm); }
.halo-select-popover {
    border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-lg);
    background: var(--halo-surface-raised);
    box-shadow: var(--halo-shadow-3);
}
.halo-select-list { padding: 6px; }
.halo-select-list .mud-list-item { border-radius: 12px; color: var(--halo-text); }
.halo-select-list .mud-list-item:hover { background: var(--halo-surface-hover); }

/* Native HALO controls. Workboard uses these directly so MudBlazor's input
   chrome, split adornments and popover geometry cannot leak into the UI. */
.halo-native-select-wrap,
.halo-search-field__control { position: relative; min-width: 0; }
.halo-native-select { padding-right: var(--halo-10); cursor: pointer; }
.halo-native-select__chevron,
.halo-multi-picker__chevron {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    color: var(--halo-text-tertiary); pointer-events: none;
}
.halo-native-select__chevron {
    position: absolute; right: var(--halo-3); top: 50%; transform: translateY(-50%);
}
.halo-search-field__control > svg {
    position: absolute; z-index: 1; left: var(--halo-3); top: 50%;
    width: 19px; height: 19px; transform: translateY(-50%);
    fill: none; stroke: var(--halo-text-tertiary); stroke-width: 1.8;
    stroke-linecap: round; pointer-events: none;
}
.halo-search-field__input { padding-left: 42px; padding-right: var(--halo-4); }
.halo-search-field__input::-webkit-search-cancel-button { opacity: .55; cursor: pointer; }

.halo-multi-picker { position: relative; min-width: 0; }
.halo-multi-picker__summary {
    display: flex; align-items: center; gap: var(--halo-2); cursor: pointer;
    user-select: none; text-align: left;
}
.halo-multi-picker__summary .halo-multi-picker__value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.halo-multi-picker__summary .is-placeholder { color: var(--halo-text-tertiary); }
.halo-multi-picker__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; margin-left: auto; padding-inline: 6px;
    border-radius: var(--halo-radius-pill); color: var(--halo-soft-navy-ink);
    background: var(--halo-soft-navy); font-size: var(--halo-text-caption); font-weight: 700;
}
.halo-multi-picker__chevron { margin-left: auto; transition: transform var(--halo-duration-1) var(--halo-ease); }
.halo-multi-picker__summary[aria-expanded="true"] {
    border-color: var(--halo-focus-color); box-shadow: var(--halo-focus-ring-field);
}
.halo-multi-picker__summary[aria-expanded="true"] .halo-multi-picker__chevron { transform: rotate(180deg); }
.halo-multi-picker__backdrop {
    position: fixed; z-index: 110; inset: 0; padding: 0; border: 0;
    background: transparent; cursor: default;
}
.halo-multi-picker__menu {
    position: absolute; z-index: 120; top: calc(100% + var(--halo-2)); left: 0;
    width: max(100%, 240px); max-height: 340px; overflow: hidden;
    border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-lg);
    color: var(--halo-text); background: var(--halo-surface-raised);
    box-shadow: var(--halo-shadow-3);
    transform-origin: top left;
    animation: halo-popover-in var(--halo-duration-3) var(--halo-ease-spring), halo-fade-in var(--halo-duration-1) var(--halo-ease-out);
}
@keyframes halo-popover-in { from { transform: translateY(-4px) scale(.96); } }
@keyframes halo-fade-in { from { opacity: 0; } }
.halo-multi-picker__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--halo-3) var(--halo-3) var(--halo-2);
    border-bottom: 1px solid var(--halo-hairline); font-size: var(--halo-text-sm);
}
.halo-multi-picker__header button {
    border: 0; background: transparent; color: var(--halo-ink-info);
    font: 700 var(--halo-text-caption)/1 var(--halo-font); cursor: pointer;
}
.halo-multi-picker__options { max-height: 286px; overflow-y: auto; padding: var(--halo-2); }
.halo-multi-picker__option {
    position: relative; display: grid; grid-template-columns: 18px 1fr; align-items: center;
    gap: var(--halo-3); padding: 9px var(--halo-2); border-radius: 12px; cursor: pointer;
}
.halo-multi-picker__option:hover { background: var(--halo-surface-hover); }
.halo-multi-picker__option input { position: absolute; opacity: 0; pointer-events: none; }
.halo-multi-picker__check {
    width: 18px; height: 18px; display: grid; place-items: center;
    border: 1.5px solid var(--halo-input-border); border-radius: var(--halo-radius-xs); background: var(--halo-surface);
}
.halo-multi-picker__option input:checked + .halo-multi-picker__check {
    border-color: var(--halo-fill-navy); background: var(--halo-fill-navy);
}
.halo-multi-picker__option input:checked + .halo-multi-picker__check::after {
    content: ""; width: 8px; height: 4px; border: 2px solid var(--halo-on-action);
    border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg);
}
.halo-multi-picker__option strong { display: block; font-size: var(--halo-text-sm); font-weight: 600; }
.halo-multi-picker__option small { display: block; margin-top: 2px; color: var(--halo-text-tertiary); font-size: var(--halo-text-caption); }

.halo-field--compact { gap: 0; }
.halo-field--compact .halo-input { height: 30px; padding-block: 0; border-radius: var(--halo-radius-pill); }

/* Native select chevron, drawn in CSS so it matches in both themes. */
.halo-select {
    padding-right: var(--halo-8);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--halo-text);
    cursor: pointer;
}

/* Input with leading/trailing adornment (search, currency, units). */
.halo-input-group { position: relative; display: flex; align-items: center; }
.halo-input-group__icon {
    position: absolute; left: var(--halo-3);
    display: grid; place-items: center;
    color: var(--halo-text-tertiary);
    pointer-events: none;
}
.halo-input-group__icon ~ .halo-input { padding-left: var(--halo-10); }
.halo-input-group__suffix { position: absolute; right: var(--halo-2); display: flex; gap: var(--halo-1); }

/* Switch — iOS geometry, brand fill. */
.halo-switch { position: relative; display: inline-flex; align-items: center; gap: var(--halo-3); cursor: pointer; }
.halo-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.halo-switch__track {
    width: 44px; height: 26px; flex: none;
    border-radius: var(--halo-radius-pill);
    background: var(--halo-input-border);
    transition: background-color var(--halo-duration-2) var(--halo-ease-out);
}
.halo-switch__track::after {
    content: ""; display: block;
    width: 22px; height: 22px; margin: 2px;
    border-radius: 50%; background: var(--halo-on-action);
    box-shadow: 0 1px 3px rgb(0 0 0 / .22);
    transition: transform var(--halo-duration-3) var(--halo-ease-spring);
}
.halo-switch input:checked + .halo-switch__track { background: var(--halo-fill-green); }
.halo-switch input:checked + .halo-switch__track::after { transform: translateX(18px); }
.halo-switch input:focus-visible + .halo-switch__track { box-shadow: var(--halo-focus-ring); }

/* Checkbox */
.halo-check { display: inline-flex; align-items: center; gap: var(--halo-2); cursor: pointer; }
.halo-check input {
    appearance: none;
    width: 18px; height: 18px; flex: none; margin: 0;
    border: 1.5px solid var(--halo-input-border);
    border-radius: var(--halo-radius-xs);
    background: var(--halo-surface);
    display: grid; place-content: center;
    transition: background-color var(--halo-duration-2) var(--halo-ease-spring),
                border-color var(--halo-duration-2) var(--halo-ease-spring),
                transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-check input:active { transform: scale(.92); }
.halo-check input::after {
    content: ""; width: 10px; height: 6px;
    border: 2px solid var(--halo-on-action); border-top: 0; border-right: 0;
    transform: rotate(-45deg) scale(0); transform-origin: center;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring);
    margin-top: -2px;
}
.halo-check input:checked { background: var(--halo-fill-navy); border-color: var(--halo-fill-navy); }
.halo-check input:checked::after { transform: rotate(-45deg) scale(1); }
.halo-check input:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }

/* Form layout — 12-col grid so fields align across a dialog. */
.halo-form-grid { display: grid; gap: var(--halo-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.halo-col-3 { grid-column: span 3; } .halo-col-4 { grid-column: span 4; }
.halo-col-6 { grid-column: span 6; } .halo-col-8 { grid-column: span 8; }
.halo-col-12 { grid-column: span 12; }
@media (max-width: 860px) { .halo-form-grid > * { grid-column: span 12; } }

/* ==========================================================================
   5. FILTERS
   The Workboard problem: three controls, three heights, three radii, plus a
   "Filters" button that opens a fourth pattern. One bar, one height instead.
   ========================================================================== */

.halo-filterbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--halo-3);
    padding: var(--halo-4);
    background: var(--halo-surface);
    border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-xl);
}
.halo-filterbar__search { flex: 1 1 280px; min-width: 220px; }
.halo-filterbar__control { flex: 0 1 200px; min-width: 160px; }
.halo-filterbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--halo-2); }

/* Saved views / quick segments. Selected state is a tint, not a hard fill. */
.halo-segment { display: inline-flex; gap: var(--halo-2); flex-wrap: wrap; }
.halo-chip {
    display: inline-flex; align-items: center; gap: var(--halo-2);
    height: var(--halo-control-sm);
    padding-inline: var(--halo-3);
    border-radius: var(--halo-radius-pill);
    border: 1px solid transparent;
    background: var(--halo-surface-sunken);
    color: var(--halo-text-secondary);
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
    cursor: pointer;
    transition: background-color var(--halo-duration-2) var(--halo-ease-out),
                border-color var(--halo-duration-2) var(--halo-ease-out),
                color var(--halo-duration-2) var(--halo-ease-out),
                transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-chip:hover { background: var(--halo-surface-hover); color: var(--halo-text); }
.halo-chip:active { transform: scale(.97); }
.halo-chip:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-chip[aria-pressed="true"], .halo-chip.is-active {
    background: var(--halo-soft-navy);
    color: var(--halo-soft-navy-ink);
}
.halo-chip__count {
    font-variant-numeric: tabular-nums;
    padding: 2px 7px; border-radius: var(--halo-radius-pill);
    background: color-mix(in srgb, currentColor 12%, transparent); font-size: var(--halo-text-caption); font-weight: 700;
}

/* Applied filter token — dismissible, always shows field: value. */
.halo-token {
    display: inline-flex; align-items: center; gap: var(--halo-2);
    height: 28px; padding: 0 var(--halo-1) 0 var(--halo-3);
    border-radius: var(--halo-radius-pill);
    background: var(--halo-soft-navy);
    color: var(--halo-soft-navy-ink);
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
}
.halo-token__key { opacity: .72; }
.halo-token__x {
    display: grid; place-items: center; width: 20px; height: 20px;
    padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.halo-token__x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.halo-token__x:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.halo-date-field__wrap { position: relative; }
.halo-date-field { padding-inline-end: 38px; }
.halo-date-field::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.halo-date-field__icon {
    position: absolute; right: 13px; top: 50%; width: 18px; height: 18px;
    transform: translateY(-50%); fill: none; stroke: var(--halo-text-tertiary);
    stroke-width: 1.5; stroke-linecap: round; pointer-events: none;
}
.halo-number-field { appearance: textfield; }
.halo-number-field::-webkit-inner-spin-button,
.halo-number-field::-webkit-outer-spin-button { opacity: .55; }

.halo-text-input-wrap { position: relative; }
.halo-text-input-wrap textarea { min-height: 92px; resize: vertical; line-height: 1.5; padding-block: 10px; border-radius: var(--halo-radius-lg); }
.halo-text-input-wrap:has(.halo-text-field__adornment) .halo-text-field { padding-inline-start: 44px; }
.halo-text-field__adornment {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--halo-text-tertiary); font-size: var(--halo-text-sm); pointer-events: none;
}
.halo-text-field__adornment--icon { width: 18px; height: 18px; fill: currentColor; }
.halo-text-field__clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 50%; color: var(--halo-text-tertiary); background: transparent; cursor: pointer;
}
.halo-text-field__clear:hover { color: var(--halo-text); background: var(--halo-surface-hover); }
.halo-field__message, .halo-field__counter { display: block; margin-top: 5px; color: var(--halo-text-tertiary); font-size: var(--halo-text-caption); }
.halo-field__message--error { color: var(--halo-ink-critical); }
.halo-field__counter { text-align: right; }
.halo-text-input-wrap.is-error .halo-input { border-color: var(--halo-ink-critical); }

.halo-icon-button {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 50%;
    color: var(--halo-text-secondary); background: transparent; cursor: pointer;
    transition: color var(--halo-duration-1) var(--halo-ease-out), background var(--halo-duration-1) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-icon-button svg { width: 18px; height: 18px; fill: currentColor; }
.halo-icon-button:hover:not(:disabled) { color: var(--halo-text); background: var(--halo-surface-hover); }
.halo-icon-button:active:not(:disabled) { transform: scale(.9); }
.halo-icon-button:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-icon-button:disabled { opacity: .46; cursor: not-allowed; }

/* Conversation primitives ------------------------------------------------ */
.halo-elapsed-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Bubbles pop in with the spring: 96% → 100% from 8px below. */
.halo-chat-bubble {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: min(80%, 680px);
    min-width: 0;
    gap: var(--halo-1);
    animation: halo-bubble-in var(--halo-duration-4) var(--halo-ease-spring) both,
               halo-fade-in var(--halo-duration-2) var(--halo-ease-out) both;
}
@keyframes halo-bubble-in { from { transform: translateY(8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .halo-chat-bubble { animation: none; } }
.halo-chat-bubble--outbound { align-self: flex-end; align-items: flex-end; transform-origin: bottom right; }
.halo-chat-bubble--inbound { align-self: flex-start; align-items: flex-start; transform-origin: bottom left; }
.halo-chat-bubble__content {
    max-width: 100%;
    padding: 10px 14px;
    color: var(--halo-text);
    background: var(--halo-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--halo-radius-lg) var(--halo-radius-lg) var(--halo-radius-lg) 6px;
    font-size: var(--halo-text-body);
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.halo-chat-bubble--outbound .halo-chat-bubble__content {
    color: var(--halo-on-fill);
    background: var(--halo-fill-navy);
    border-color: transparent;
    border-radius: var(--halo-radius-lg) var(--halo-radius-lg) 6px var(--halo-radius-lg);
}
.halo-chat-bubble__meta { display: flex; align-items: center; gap: 6px; padding: 0 var(--halo-1); }
.halo-chat-bubble--outbound .halo-chat-bubble__meta { flex-direction: row-reverse; }
.halo-chat-bubble__delivery { display: inline-flex; align-items: center; }
.halo-chat-bubble__delivery-icon { color: var(--halo-text-tertiary); font-size: .875rem !important; }
.halo-chat-bubble__timestamp { color: var(--halo-text-tertiary); font-size: var(--halo-text-caption); line-height: 1; white-space: nowrap; }
.halo-relative-time { color: var(--halo-text-secondary); font-size: var(--halo-text-caption); line-height: 1; white-space: nowrap; }
.halo-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border: 2px solid var(--halo-surface);
    border-radius: var(--halo-radius-pill);
    background: var(--halo-fill-red);
    color: var(--halo-on-fill);
    font: 700 var(--halo-text-caption)/1 var(--halo-font);
    pointer-events: none;
}
.halo-notification-badge.is-pulsing { animation: halo-badge-pulse var(--halo-duration-2) var(--halo-ease-out); }
@keyframes halo-badge-pulse { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .halo-notification-badge.is-pulsing { animation: none; } }

/* ==========================================================================
   6. TABS
   Two variants, one rule:
     underline  → page-level navigation (changes the URL / the workspace)
     segmented  → in-panel switching (same data, different slice)
   Never mix them in the same view.
   ========================================================================== */

.halo-tabs {
    display: flex; align-items: center; gap: 2px;
    width: fit-content; max-width: 100%;
    padding: 4px; overflow-x: auto; scrollbar-width: none;
    border: 0; border-radius: var(--halo-radius-pill);
    background: var(--halo-surface-sunken);
}
.halo-tabs::-webkit-scrollbar { display: none; }
.halo-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--halo-2);
    flex: 0 0 auto; min-height: 36px;
    padding: 0 16px;
    border: 0; border-radius: var(--halo-radius-pill);
    background: transparent; cursor: pointer;
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
    color: var(--halo-text-tertiary);
    white-space: nowrap;
    transition: background-color var(--halo-duration-3) var(--halo-ease-spring),
                color var(--halo-duration-2) var(--halo-ease-out),
                box-shadow var(--halo-duration-3) var(--halo-ease-spring);
}
.halo-tab svg { width: 16px; height: 16px; fill: currentColor; }
.halo-tab:hover { color: var(--halo-text); }
.halo-tab:active { transform: scale(.96); }
.halo-tab:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
/* The selected tab is the white indicator of the segmented control. */
.halo-tab[aria-selected="true"], .halo-tab[aria-current="page"] {
    color: var(--halo-text);
    background: var(--halo-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06);
}
.halo-tab em { font-style: normal; color: var(--halo-text-tertiary); font-variant-numeric: tabular-nums; }

.halo-segmented {
    display: inline-flex; gap: 2px; padding: 4px;
    background: var(--halo-surface-sunken);
    border-radius: var(--halo-radius-pill);
}
.halo-segmented__item {
    display: inline-flex; align-items: center; gap: var(--halo-2);
    height: 34px; padding-inline: var(--halo-4);
    border: 0; border-radius: var(--halo-radius-pill);
    background: transparent; cursor: pointer;
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
    color: var(--halo-text-secondary);
    transition: background-color var(--halo-duration-2) var(--halo-ease-out),
                color var(--halo-duration-2) var(--halo-ease-out),
                box-shadow var(--halo-duration-2) var(--halo-ease-out),
                transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-segmented__item:hover { color: var(--halo-text); }
.halo-segmented__item:active { transform: scale(.97); }
.halo-segmented__item:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-segmented__item[aria-selected="true"],
.halo-segmented__item[aria-pressed="true"] {
    background: var(--halo-surface);
    color: var(--halo-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06);
    animation: halo-thumb-in var(--halo-duration-4) var(--halo-ease-spring);
}
@keyframes halo-thumb-in { from { transform: scale(.94); opacity: .6; } }

/* ==========================================================================
   7. DATA TABLE
   ========================================================================== */

.halo-table-shell {
    background: var(--halo-surface);
    border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-2xl);
    overflow: hidden;
}
.halo-table-toolbar {
    display: flex; align-items: center; gap: var(--halo-3);
    padding: var(--halo-3) var(--halo-4);
    border-bottom: 1px solid var(--halo-hairline);
}
.halo-table-toolbar__spacer { margin-left: auto; }
.halo-table-scroll { overflow-x: auto; }

.halo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--halo-text-body); }
.halo-table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--halo-3) var(--halo-4);
    text-align: left;
    font: 600 var(--halo-text-caption)/1.2 var(--halo-font);
    color: var(--halo-text-tertiary);
    background: var(--halo-surface);
    border-bottom: 1px solid var(--halo-hairline);
    white-space: nowrap;
}
.halo-table tbody td {
    padding: var(--halo-3) var(--halo-4);
    border-bottom: 1px solid var(--halo-hairline);
    vertical-align: middle;
}
.halo-table tbody tr:last-child td { border-bottom: 0; }
/* Rows step in as a 30ms cascade after data lands; hover is immediate. */
.halo-table tbody tr {
    transition: background-color var(--halo-duration-1) var(--halo-ease-out);
    animation: halo-row-in var(--halo-duration-3) var(--halo-ease-out) both;
    animation-delay: calc(var(--halo-row, 0) * 30ms + 60ms);
}
.halo-table tbody tr:nth-child(1) { --halo-row: 0; } .halo-table tbody tr:nth-child(2) { --halo-row: 1; }
.halo-table tbody tr:nth-child(3) { --halo-row: 2; } .halo-table tbody tr:nth-child(4) { --halo-row: 3; }
.halo-table tbody tr:nth-child(5) { --halo-row: 4; } .halo-table tbody tr:nth-child(6) { --halo-row: 5; }
.halo-table tbody tr:nth-child(7) { --halo-row: 6; } .halo-table tbody tr:nth-child(8) { --halo-row: 7; }
.halo-table tbody tr:nth-child(9) { --halo-row: 8; } .halo-table tbody tr:nth-child(10) { --halo-row: 9; }
.halo-table tbody tr:nth-child(11) { --halo-row: 10; } .halo-table tbody tr:nth-child(n + 12) { --halo-row: 11; }
@keyframes halo-row-in { from { transform: translateY(6px); } }
.halo-table tbody tr:hover { background: var(--halo-surface-hover); }
.halo-table tbody tr[aria-selected="true"] { background: var(--halo-soft-blue); }
.halo-table--compact tbody td, .halo-table--compact thead th { padding-block: var(--halo-2); }
.halo-table .halo-num { text-align: right; font-variant-numeric: tabular-nums; }

.halo-grid-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; gap: var(--halo-3); padding: var(--halo-3) var(--halo-4);
    border-bottom: 1px solid var(--halo-hairline); background: var(--halo-surface);
}
.halo-grid-toolbar.is-selection { background: var(--halo-soft-navy); }
.halo-grid-toolbar__left, .halo-grid-toolbar__right {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--halo-2); min-width: 0;
}
.halo-grid-toolbar__left { flex: 1; }
.halo-grid-toolbar__right { justify-content: flex-end; }
.halo-grid-toolbar__title { font-family: var(--halo-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--halo-text); }
.halo-grid-toolbar__selection {
    padding: 6px 12px; border-radius: var(--halo-radius-pill);
    color: var(--halo-on-fill); background: var(--halo-fill-navy);
    font-size: var(--halo-text-sm); font-weight: 700;
}
.halo-density { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--halo-radius-pill); background: var(--halo-surface-sunken); }
.halo-density button {
    display: inline-flex; align-items: center; gap: var(--halo-1); height: 28px;
    padding: 0 var(--halo-3); border: 0; border-radius: var(--halo-radius-pill);
    color: var(--halo-text-tertiary); background: transparent; cursor: pointer;
    font: 600 var(--halo-text-caption)/1 var(--halo-font);
}
.halo-density button.is-active { color: var(--halo-text); background: var(--halo-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.halo-column-toggle, .halo-row-actions { position: relative; display: inline-flex; }
.halo-column-toggle__backdrop { position: fixed; inset: 0; z-index: 99; border: 0; background: transparent; }
.halo-column-toggle__menu {
    position: absolute; top: calc(100% + var(--halo-1)); right: 0; z-index: 100;
    min-width: 220px; padding: 6px; border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-lg); background: var(--halo-surface-raised); box-shadow: var(--halo-shadow-3);
}
.halo-column-toggle__item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--halo-2); padding: var(--halo-2); border-radius: var(--halo-radius-sm); cursor: pointer; }
.halo-column-toggle__item:hover { background: var(--halo-surface-hover); }
.halo-column-toggle__item.is-locked { opacity: .45; cursor: default; }
.halo-column-toggle__item input { accent-color: var(--halo-fill-navy); }
.halo-row-actions__trigger {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    color: var(--halo-text-tertiary); border: 1px solid transparent;
    border-radius: 50%; background: transparent; cursor: pointer;
}
.halo-row-actions__trigger svg { width: 18px; height: 18px; fill: currentColor; }
.halo-row-actions__trigger:hover,
.halo-row-actions__trigger[aria-expanded="true"] {
    color: var(--halo-text); border-color: transparent;
    background: var(--halo-surface-hover);
}
.mud-popover.halo-row-actions-popover {
    min-width: 200px; max-width: calc(100vw - 24px);
    border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-lg);
    color: var(--halo-text); background: var(--halo-surface-raised);
    box-shadow: var(--halo-shadow-3);
}
.halo-row-actions-list { padding: 6px; }
.halo-row-action {
    display: flex; align-items: center; gap: var(--halo-3); width: 100%; min-height: 40px;
    padding: 0 var(--halo-3); border: 0; border-radius: 12px;
    color: var(--halo-text); background: transparent; cursor: pointer;
    font: 500 var(--halo-text-sm)/1.2 var(--halo-font); text-align: left;
}
.halo-row-action:hover { background: var(--halo-surface-hover); }
.halo-row-action:disabled { opacity: .42; cursor: not-allowed; }
.halo-row-action.is-destructive { color: var(--halo-ink-critical); }
.halo-row-action.is-destructive:hover { background: var(--halo-soft-red); }


@media (max-width: 767px) {
    .halo-grid-toolbar { align-items: stretch; flex-direction: column; }
    .halo-grid-toolbar__right { justify-content: flex-start; }
    .halo-density button span { display: none; }
}

.halo-cell-primary { font-weight: 600; }
.halo-cell-meta { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); }

/* ==========================================================================
   8. STATUS: badges, pills, dots
   Tinted, low-alpha, 1px ring. Never a saturated fill behind small text.
   ========================================================================== */

.halo-badge {
    --t1: var(--halo-tone-neutral);
    --badge-bg: var(--halo-soft-gray);
    --badge-ink: var(--halo-soft-gray-ink);
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding-inline: 10px 12px;
    border-radius: var(--halo-radius-pill);
    background: var(--badge-bg);
    color: var(--badge-ink);
    font: 600 var(--halo-text-caption)/1 var(--halo-font);
    white-space: nowrap;
}
.halo-badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex: none;
}
.halo-badge--no-dot::before { display: none; }
.halo-badge--brand    { --t1: var(--halo-tone-brand);    --badge-bg: var(--halo-soft-navy);   --badge-ink: var(--halo-soft-navy-ink); }
.halo-badge--info     { --t1: var(--halo-tone-info);     --badge-bg: var(--halo-soft-blue);   --badge-ink: var(--halo-soft-blue-ink); }
.halo-badge--success  { --t1: var(--halo-tone-success);  --badge-bg: var(--halo-soft-green);  --badge-ink: var(--halo-soft-green-ink); }
.halo-badge--warning  { --t1: var(--halo-tone-warning);  --badge-bg: var(--halo-soft-yellow); --badge-ink: var(--halo-soft-yellow-ink); }
.halo-badge--critical { --t1: var(--halo-tone-critical); --badge-bg: var(--halo-soft-red);    --badge-ink: var(--halo-soft-red-ink); }
.halo-badge--neutral  { --t1: var(--halo-tone-neutral);  --badge-bg: var(--halo-soft-gray);   --badge-ink: var(--halo-soft-gray-ink); }
.halo-badge--pipeline { --t1: var(--halo-tone-pipeline); --badge-bg: var(--halo-soft-navy);   --badge-ink: var(--halo-soft-navy-ink); }
.halo-badge--campaign { --t1: var(--halo-tone-campaign); --badge-bg: var(--halo-soft-blue);   --badge-ink: var(--halo-soft-blue-ink); }

.halo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.halo-dot--live { background: var(--halo-fill-green); box-shadow: 0 0 0 3px rgb(var(--halo-green) / .18); }
.halo-dot--busy { background: var(--halo-fill-red); box-shadow: 0 0 0 3px rgb(var(--halo-red) / .18); }
.halo-dot--idle { background: var(--halo-fill-gray); box-shadow: 0 0 0 3px rgb(var(--halo-gray) / .18); }

/* Summary hierarchy shared by operational pages: a plain bento container. */
.halo-summary { position: relative; display: grid; gap: var(--halo-gap); }
.halo-scope .halo-table td { font-variant-numeric: tabular-nums; }

/* Workspace views use native toggle buttons; selected view shares Halo tab emphasis. */
.halo-tab[aria-pressed="true"] { color: var(--halo-soft-navy-ink); font-weight: 600; background: var(--halo-soft-navy); border-radius: var(--halo-radius-pill); }

/* HaloDataGrid: shared header filtering, popovers and query state. */
.halo-grid-header { display:flex; align-items:center; justify-content:space-between; gap:var(--halo-2); min-width:80px; }
.halo-grid-filter-trigger { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--halo-text-secondary); cursor:pointer; }
.halo-grid-filter-trigger svg { width:16px; height:16px; }
.halo-grid-header.is-active, .halo-grid-header.is-active .halo-grid-filter-trigger { color:var(--halo-ink-brand); }
.halo-grid-filter-trigger:hover, .halo-grid-header.is-active .halo-grid-filter-trigger { background:var(--halo-soft-navy); }
.halo-grid-filter-trigger:focus-visible, .halo-grid-filter-panel :is(input,select,button):focus-visible { outline:none; box-shadow:var(--halo-focus-ring); }
.mud-popover.halo-grid-filter-popover { width:290px; max-width:calc(100vw - 24px); border:1px solid var(--halo-hairline-strong); border-radius:var(--halo-radius-lg); background:var(--halo-surface-raised); box-shadow:var(--halo-shadow-3); }
.halo-grid-filter-panel { padding:16px; display:grid; gap:12px; color:var(--halo-text); text-transform:none; letter-spacing:normal; font-weight:400; }
.halo-grid-filter-panel label { display:grid; gap:6px; font-size:12px; }
.halo-grid-filter-panel :is(select,input:not([type=checkbox])) { box-sizing:border-box; width:100%; min-height:38px; border:1px solid var(--halo-input-border); border-radius:var(--halo-radius-pill); padding:6px 14px; background:var(--halo-surface); color:var(--halo-text); font:inherit; }
.halo-grid-filter-choices { max-height:220px; overflow:auto; display:grid; gap:8px; }
.halo-grid-filter-choices label { display:flex; align-items:center; gap:8px; }
.halo-grid-filter-choices input { accent-color:var(--halo-action-brand); }
.halo-grid-filter-actions, .halo-grid-filter-sort { display:flex; justify-content:space-between; gap:8px; }
.halo-grid-filter-sort button, .halo-grid-active-filters button { border:1px solid var(--halo-input-border); border-radius:var(--halo-radius-pill); background:var(--halo-surface); color:var(--halo-text); padding:6px 10px; font:inherit; font-size:12px; cursor:pointer; }
.halo-grid-active-filters { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--halo-surface-sunken); }
.halo-grid-active-filters button { border-color:transparent; background:var(--halo-soft-navy); color: var(--halo-soft-navy-ink); }
.halo-grid-empty { padding:32px; text-align:center; color:var(--halo-text-secondary); }
.halo-grid-filter-remove { display:inline-block; margin-inline-start:8px; }
/* Keep shared grid pagination clear of the communications widget on the right. */
.halo-grid-pager { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:var(--halo-2); padding:var(--halo-3); border-top:1px solid var(--halo-hairline); color:var(--halo-text-secondary); font-size:var(--halo-text-sm); }
.halo-grid-pager .halo-field { width:112px; }
.halo-grid-pager > span { font-variant-numeric:tabular-nums; }
.mud-table-pagination .mud-table-pagination-toolbar { justify-content:flex-start; }
.mud-table-pagination .mud-table-pagination-spacer { display:none; }
.mud-table-pagination .mud-select { margin-inline-start:0; }

/* High-volume incoming activity: quiet inline indicator and opt-in detail drawer. */
.halo-activity-trigger { display:flex; align-items:center; gap:var(--halo-2); min-height:32px; max-width:100%; border:1px solid var(--halo-hairline-strong); border-radius:var(--halo-radius-pill, 999px); padding:6px 12px; color:var(--halo-text-secondary); background:var(--halo-surface); font:inherit; font-size:var(--halo-text-sm); cursor:pointer; }
.halo-activity-trigger.has-unread { background:var(--halo-soft-red); color: var(--halo-soft-red-ink); border-color:transparent; }
.halo-activity-trigger strong { font-variant-numeric:tabular-nums; }
.halo-activity-trigger:focus-visible, .halo-activity-close:focus-visible { outline:2px solid var(--halo-action-brand); outline-offset:3px; }
.mud-drawer.halo-activity-drawer { width:min(440px, calc(100vw - 24px)); max-width:100vw; margin:12px; height:calc(100% - 24px); border-radius:var(--halo-radius-2xl); background:var(--halo-surface-raised); color:var(--halo-text); border:1px solid var(--halo-hairline); box-shadow:var(--halo-shadow-4); overflow:hidden; }
.halo-activity-drawer .mud-drawer-content, .halo-activity-drawer .mud-focus-trap { height:100%; }
.halo-activity-panel { height:100%; display:flex; flex-direction:column; }
.halo-activity-panel-header { display:flex; justify-content:space-between; gap:var(--halo-3); align-items:flex-start; padding:var(--halo-5); border-bottom:1px solid var(--halo-hairline); }
.halo-activity-panel h2 { font-family:var(--halo-font-display); font-size:1.25rem; letter-spacing:-0.03em; margin:0; }
.halo-activity-panel p, .halo-activity-panel small { color:var(--halo-text-secondary); font-size:var(--halo-text-sm); margin:4px 0 0; }
.halo-activity-close { background:transparent; color:var(--halo-text-secondary); border:0; width:36px; height:36px; border-radius:50%; font-size:24px; cursor:pointer; }
.halo-activity-summary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--halo-3); padding:var(--halo-4) var(--halo-5); background:var(--halo-soft-navy); border-bottom:1px solid var(--halo-hairline); }
.halo-activity-summary strong { color: var(--halo-ink-brand); font-variant-numeric:tabular-nums; }
.halo-activity-summary small { flex-basis:100%; }
.halo-activity-list { flex:1; min-height:0; overflow:auto; padding:0 var(--halo-5); }
.halo-activity-entry { display:grid; gap:var(--halo-2); grid-template-columns:1fr auto; padding:var(--halo-4) 0; border-bottom:1px solid var(--halo-hairline); }
.halo-activity-entry > div { grid-column:1 / -1; display:grid; gap:4px; overflow-wrap:anywhere; }
.halo-activity-entry > small { grid-column:1 / -1; }
.halo-activity-entry .halo-btn { grid-column:2; grid-row:2; }
.halo-activity-count { align-self:center; font-size:var(--halo-text-sm); color:var(--halo-text-secondary); }
.halo-activity-pagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--halo-2); padding:var(--halo-3); border-top:1px solid var(--halo-hairline); font-size:var(--halo-text-sm); }
.halo-activity-pagination > span { margin-right:auto; color:var(--halo-text-secondary); }
.halo-activity-error { padding:var(--halo-3) var(--halo-5); color:var(--halo-ink-critical); font-size:var(--halo-text-sm); }

.halo-workspace-nav { display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; margin-block:var(--halo-4); padding:4px; border-radius:var(--halo-radius-pill); background:var(--halo-surface-sunken); }
.halo-workspace-nav a { padding:9px 14px; color:var(--halo-text-tertiary); text-decoration:none; border-radius:var(--halo-radius-pill); font-size:var(--halo-text-sm); font-weight:600; }
.halo-workspace-nav a[aria-current=page] { background:var(--halo-surface); color: var(--halo-text); box-shadow:0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.halo-workspace-nav a:focus-visible { outline:none; box-shadow:var(--halo-focus-ring); }
.halo-workspace-nav--secondary { background:var(--halo-surface-sunken); border:0; }
.halo-tabs .mud-tabs-toolbar { background:var(--halo-surface); color:var(--halo-text-secondary); border-radius:var(--halo-radius-md); }
.halo-tabs .mud-tab.mud-tab-active { color: var(--halo-text); background:var(--halo-surface); }
.halo-tabs .mud-tabs-slider { display:none; }

/* Task navigation and the progressive campaign editor share Halo foundations. */
.halo-workspace-nav button { border: 0; background: transparent; color: var(--halo-text-tertiary); padding: 9px 14px; border-radius: var(--halo-radius-pill); cursor: pointer; font: inherit; font-weight: 600; }
.halo-workspace-nav button[aria-current="step"] { color: var(--halo-text); background: var(--halo-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.campaign-wizard:not([data-step="0"]) .wizard-step-0,
.campaign-wizard:not([data-step="1"]) .wizard-step-1,
.campaign-wizard:not([data-step="2"]) .wizard-step-2,
.campaign-wizard:not([data-step="3"]) .wizard-step-3,
.campaign-wizard:not([data-step="4"]) .wizard-step-4 { display: none !important; }
.campaign-wizard .studio-shell { display: block; }
.campaign-wizard[data-step="4"] .studio-main { display: none; }
.campaign-wizard .wizard-field { min-width: 0; }

/* Complex select and number behavior retains the same Halo field geometry. */
.halo-field .mud-input.mud-input-outlined { margin: 0; min-height: var(--halo-control-lg); border-radius: var(--halo-radius-pill); }
.halo-field .mud-input.mud-input-outlined .mud-input-outlined-border { border: 1px solid var(--halo-input-border); border-radius: var(--halo-radius-pill); }
.halo-field .mud-input > input.mud-input-root,
.halo-field .mud-input > div.mud-input-root {
    min-height: 0; height: auto; padding: 10px var(--halo-4); background: transparent;
    color: var(--halo-text); font: 400 var(--halo-text-body)/1.35 var(--halo-font);
}
.halo-field .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--halo-focus-color); }

/* HaloTabs adapter: shared segmented navigation for composed workspaces. */
.halo-tabs.mud-tabs { display: block; border: 0; }
.halo-tabs.mud-tabs .mud-tabs-tabbar { padding: 4px; border: 0; background: var(--halo-surface-sunken); }
.halo-tabs.mud-tabs .mud-tabs-tabbar-content { justify-content: flex-start; }
.halo-tabs.mud-tabs .mud-tab { text-transform: none; min-height: 36px; padding: var(--halo-2) var(--halo-4); border-radius: var(--halo-radius-pill); font: 600 var(--halo-text-sm)/1.4 var(--halo-font); color: var(--halo-text-tertiary); transition: color var(--halo-duration-2) var(--halo-ease-out), background-color var(--halo-duration-3) var(--halo-ease-spring); }
.halo-tabs.mud-tabs .mud-tab.mud-tab-active { background: var(--halo-surface); color: var(--halo-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.halo-tabs.mud-tabs .mud-tab:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-tabs.mud-tabs .mud-tab-slider { display: none; }

/* Framework controls use one Halo outline; native input skins must not wrap a second outline. */
.halo-control__input.halo-input,
.halo-control__input.halo-select {
    height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.halo-control__input .mud-input-control { margin-top: 0; }
.halo-control__input .mud-input-outlined {
    border-radius: var(--halo-radius-pill); background: var(--halo-surface); color: var(--halo-text);
    font: 400 var(--halo-text-body)/1.4 var(--halo-font);
}
.halo-control__input .mud-input-outlined-border { border-color: var(--halo-input-border); }
.halo-control__input .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--halo-input-border-hover); }
.halo-control__input .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--halo-focus-color); }
.halo-control__input .mud-input-outlined.mud-input-focused { box-shadow: var(--halo-focus-ring-field); }
.halo-control__input .mud-input-adornment { color: var(--halo-text-secondary); }
.halo-control__input .mud-input-helper-text { color: var(--halo-text-secondary); }
.halo-tabs.mud-tabs .mud-tabs-tabbar { border-radius: var(--halo-radius-pill); }

/* Shared filter bar */

    .halo-filter-bar {
        padding: 16px;
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-xl);
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-end;
    }

    @media (max-width: 767px) {
        .halo-filter-bar {
            padding: 16px;
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Native numeric fields preserve localized editing with the shared Halo input. */
.halo-number-input { width: 100%; font-variant-numeric: tabular-nums; }
.halo-number-input.is-error { border-color: var(--halo-ink-critical); }
.halo-switch { flex-wrap: wrap; }
.halo-switch__description { flex-basis: 100%; color: var(--halo-text-secondary); font-size: var(--halo-text-sm); }
.halo-text-input-wrap--start .halo-text-field__adornment { left: var(--halo-3); right: auto; }
.halo-text-input-wrap--start .halo-text-field { padding-left: var(--halo-10); }

/* ==========================================================================
   9. AVATAR (HaloAvatar) — initials in a soft tone, optional presence dot.
   ========================================================================== */
.halo-avatar {
    --avatar-bg: var(--halo-soft-navy); --avatar-ink: var(--halo-soft-navy-ink);
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--avatar-bg); color: var(--avatar-ink);
    font: 700 var(--halo-text-caption)/1 var(--halo-font);
}
.halo-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.halo-avatar--sm { width: 24px; height: 24px; font-size: 0.625rem; }
.halo-avatar--lg { width: 48px; height: 48px; font-size: var(--halo-text-body); }
.halo-avatar--xl { width: 76px; height: 76px; font-size: 1.625rem; }
.halo-avatar--red { --avatar-bg: var(--halo-soft-red); --avatar-ink: var(--halo-soft-red-ink); }
.halo-avatar--navy { --avatar-bg: var(--halo-soft-navy); --avatar-ink: var(--halo-soft-navy-ink); }
.halo-avatar--blue { --avatar-bg: var(--halo-soft-blue); --avatar-ink: var(--halo-soft-blue-ink); }
.halo-avatar--yellow { --avatar-bg: var(--halo-soft-yellow); --avatar-ink: var(--halo-soft-yellow-ink); }
.halo-avatar--green { --avatar-bg: var(--halo-soft-green); --avatar-ink: var(--halo-soft-green-ink); }
.halo-avatar[data-presence]::after {
    content: ""; position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--halo-surface); background: var(--halo-fill-gray);
}
.halo-avatar[data-presence="available"]::after { background: var(--halo-fill-green); }
.halo-avatar[data-presence="busy"]::after { background: var(--halo-fill-red); }
.halo-avatar[data-presence="away"]::after { background: var(--halo-fill-yellow); }

/* ==========================================================================
   RECORDING PLAYER (HaloRecordingPlayer)
   A 48px navy play button, a scrubbable track and a meta row with time,
   speed and download. The browser drives --p (0..1) while audio plays.
   ========================================================================== */
.halo-player {
    --p: 0;
    display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--halo-3);
    min-width: 0; padding: var(--halo-3) var(--halo-4) var(--halo-3) var(--halo-3);
    border-radius: var(--halo-radius-xl);
    background: var(--halo-surface-sunken);
    color: var(--halo-text);
}
.halo-player__audio { display: none; }
.halo-player__toggle {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--halo-fill-navy); color: var(--halo-on-fill); cursor: pointer;
    transition: transform var(--halo-duration-3) var(--halo-ease-spring), box-shadow var(--halo-duration-3) var(--halo-ease-spring);
}
.halo-player__toggle:hover { box-shadow: var(--halo-shadow-lift); }
.halo-player__toggle:active { transform: scale(.94); }
.halo-player__toggle:focus-visible, .halo-player__track:focus-visible,
.halo-player__rate:focus-visible, .halo-player__download:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-player__icon { width: 22px; height: 22px; fill: currentColor; }
.halo-player__icon--pause { display: none; }
.halo-player[data-state="playing"] .halo-player__icon--play { display: none; }
.halo-player[data-state="playing"] .halo-player__icon--pause { display: block; }
.halo-player[data-state="loading"] .halo-player__toggle { animation: halo-player-wait 1s var(--halo-ease-out) infinite alternate; }
@keyframes halo-player-wait { to { box-shadow: 0 0 0 6px rgb(var(--halo-navy) / .18); } }
.halo-player__body { display: grid; gap: var(--halo-2); min-width: 0; }
.halo-player__track {
    position: relative; height: 10px; border-radius: var(--halo-radius-pill);
    background: var(--halo-surface-pressed); cursor: pointer; touch-action: none;
}
.halo-player__track::before { content: ""; position: absolute; inset: -10px 0; }
.halo-player__fill {
    position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); min-width: 10px;
    border-radius: inherit; background: var(--halo-fill-red);
}
.halo-player__fill::after {
    content: ""; position: absolute; right: -4px; top: 50%; width: 18px; height: 18px;
    border: 3px solid var(--halo-surface); border-radius: 50%;
    background: var(--halo-fill-red); transform: translateY(-50%) scale(0);
    transition: transform var(--halo-duration-3) var(--halo-ease-spring);
}
.halo-player:is([data-state="playing"], [data-state="paused"]) .halo-player__fill::after,
.halo-player__track:is(:hover, :focus-visible) .halo-player__fill::after { transform: translateY(-50%) scale(1); }
.halo-player__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--halo-3); min-width: 0; }
.halo-player__time { color: var(--halo-text-secondary); font-size: var(--halo-text-caption); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.halo-player__actions { display: inline-flex; align-items: center; gap: var(--halo-1); }
.halo-player__rate, .halo-player__download {
    display: inline-flex; align-items: center; gap: var(--halo-1); min-height: 28px; padding: 0 10px;
    border: 0; border-radius: var(--halo-radius-pill); background: var(--halo-surface);
    color: var(--halo-text-secondary); font: 600 var(--halo-text-caption)/1 var(--halo-font);
    font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
}
.halo-player__rate:hover, .halo-player__download:hover { color: var(--halo-text); background: var(--halo-surface-pressed); }
.halo-player__download svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.halo-player__status:empty { display: none; }
.halo-player__status { grid-column: 1 / -1; color: var(--halo-soft-red-ink); font-size: var(--halo-text-sm); }
.halo-player[data-state="error"] .halo-player__toggle { background: var(--halo-surface-pressed); color: var(--halo-text-tertiary); }
@media (prefers-reduced-motion: reduce) {
    .halo-player__toggle, .halo-player__fill::after { transition: none; }
    .halo-player[data-state="loading"] .halo-player__toggle { animation: none; }
}

/* ==========================================================================
   ICON, DIALOG AND SAVE BAR (HaloIcon, HaloDialog, HaloSaveBar)
   ========================================================================== */
.halo-icon { display: inline-block; flex: none; vertical-align: middle; }

.mud-dialog.halo-dialog { width: min(var(--halo-dialog-width, var(--halo-dialog-standard)), calc(100vw - 32px)); }
.mud-dialog.halo-dialog--small { --halo-dialog-width: var(--halo-dialog-compact); }
.mud-dialog.halo-dialog--large { --halo-dialog-width: var(--halo-dialog-large); }
.halo-dialog__head { display: grid; gap: 4px; }
.halo-dialog__body { display: grid; gap: var(--halo-4); padding-top: var(--halo-2); }
.halo-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--halo-2); width: 100%; }
.halo-dialog__actions > .halo-dialog__danger { margin-right: auto; }

.halo-savebar {
    position: sticky; bottom: var(--halo-5); z-index: var(--halo-z-sticky);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--halo-2);
    margin-top: var(--halo-4); padding: 10px 12px 10px 20px;
    border-radius: var(--halo-radius-pill);
    background: var(--halo-fill-navy); color: var(--halo-on-fill);
    box-shadow: var(--halo-shadow-4);
    animation: halo-savebar-in var(--halo-duration-3) var(--halo-ease-spring);
}
@keyframes halo-savebar-in { from { transform: translateY(16px); } }
.halo-savebar__count { font-weight: 700; }
.halo-savebar__summary { opacity: .88; font-size: var(--halo-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.halo-savebar__spacer { flex: 1; }
.halo-savebar__discard, .halo-savebar__save {
    min-height: var(--halo-control-md); padding: 0 18px; border-radius: var(--halo-radius-pill);
    font: 600 var(--halo-text-sm)/1 var(--halo-font); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring), background-color var(--halo-duration-1) var(--halo-ease-out);
}
.halo-savebar__discard { border: 0; background: rgb(255 255 255 / .14); color: inherit; }
.halo-savebar__discard:hover { background: rgb(255 255 255 / .24); }
.halo-savebar__save { border: 0; background: var(--halo-on-fill); color: var(--halo-fill-navy); }
.halo-savebar__discard:active, .halo-savebar__save:active { transform: scale(.96); }
.halo-savebar__discard:focus-visible, .halo-savebar__save:focus-visible { outline: 2px solid var(--halo-on-fill); outline-offset: 2px; }
.halo-savebar button:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .halo-savebar { animation: none; } }

/* ==========================================================================
   SEGMENTED, PROGRESS BAR, COPY FIELD (HaloSegmented, HaloProgressBar, HaloCopyField)
   ========================================================================== */
.halo-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; max-width: 100%; border-radius: var(--halo-radius-pill); background: var(--halo-surface-sunken); }
.halo-segmented__option {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 15px;
    border: 0; border-radius: var(--halo-radius-pill); background: transparent; color: var(--halo-text-tertiary);
    font: 600 var(--halo-text-sm)/1 var(--halo-font); white-space: nowrap; cursor: pointer;
    transition: background-color var(--halo-duration-3) var(--halo-ease-spring), color var(--halo-duration-2) var(--halo-ease-out);
}
.halo-segmented__option:hover { color: var(--halo-text); }
.halo-segmented__option[aria-checked="true"] { background: var(--halo-surface); color: var(--halo-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.halo-segmented__option:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-segmented__option:disabled { opacity: .5; cursor: not-allowed; }
.halo-segmented__option em { font-style: normal; font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); font-variant-numeric: tabular-nums; }

.halo-progressbar { --bar: var(--halo-fill-navy); display: block; height: 6px; overflow: hidden; border-radius: var(--halo-radius-pill); background: var(--halo-surface-pressed); }
.halo-progressbar > i { display: block; width: var(--halo-progress, 0%); height: 100%; border-radius: inherit; background: var(--bar); transition: width var(--halo-duration-4) var(--halo-ease-spring); }
.halo-progressbar--blue { --bar: var(--halo-fill-blue); }
.halo-progressbar--green { --bar: var(--halo-fill-green); }
.halo-progressbar--yellow { --bar: var(--halo-fill-yellow); }
.halo-progressbar--red { --bar: var(--halo-fill-red); }
.halo-progressbar--gray { --bar: var(--halo-fill-gray); }

.halo-copyfield { display: grid; gap: 6px; min-width: 0; }
.halo-copyfield__label { font-weight: 600; font-size: var(--halo-text-sm); color: var(--halo-text); }
.halo-copyfield__box { display: flex; align-items: center; gap: var(--halo-2); min-width: 0; padding: 6px 6px 6px 16px; border-radius: var(--halo-radius-pill); background: var(--halo-surface-sunken); }
.halo-copyfield--multiline .halo-copyfield__box { align-items: flex-start; padding: var(--halo-3); border-radius: var(--halo-radius-lg); }
.halo-copyfield__value { flex: 1; min-width: 0; margin: 0; overflow: auto; color: var(--halo-text); font-family: var(--halo-font-mono); font-size: var(--halo-text-sm); white-space: nowrap; }
.halo-copyfield--multiline .halo-copyfield__value { max-height: 280px; white-space: pre-wrap; word-break: break-all; }
.halo-copyfield__value:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); border-radius: var(--halo-radius-xs); }
.halo-copyfield__copy { flex: none; min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--halo-radius-pill); background: var(--halo-surface); color: var(--halo-text); font: 600 var(--halo-text-caption)/1 var(--halo-font); cursor: pointer; }
.halo-copyfield__copy:hover { background: var(--halo-surface-pressed); }
.halo-copyfield__copy:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-copyfield__help { color: var(--halo-text-tertiary); font-size: var(--halo-text-caption); }

/* Text for assistive technology only. */
.halo-visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* HaloDrawer backdrop (the drawer is a non-modal dialog so dropdowns can float above it). */
.halo-drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--halo-z-context-drawer, 1350) - 1); background: var(--halo-scrim); animation: halo-fade var(--halo-duration-2) var(--halo-ease-out); }