/* ==========================================================================
   HALO DESIGN SYSTEM — LAYER 2: CORE COMPONENTS
   Surfaces · Metric glass · 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-lg);
    box-shadow: var(--halo-shadow-1);
    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: var(--halo-4) var(--halo-4) 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); }
.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),
                box-shadow var(--halo-duration-1) var(--halo-ease),
                transform var(--halo-duration-1) var(--halo-ease);
}
.halo-card--nav:hover {
    border-color: var(--halo-hairline-strong);
    box-shadow: var(--halo-shadow-2);
    transform: translateY(-1px);
}
.halo-card--nav:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-card--nav[aria-current="true"] {
    border-color: rgb(var(--halo-tone-brand) / .38);
    background: rgb(var(--halo-tone-brand) / .05);
}

.halo-card__title { font-family: var(--halo-font-display); font-size: var(--halo-text-title); font-weight: 700; letter-spacing: var(--halo-tracking-tight); margin: 0; }
.halo-card__subtitle { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); 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: var(--halo-text-title); font-weight: 700; letter-spacing: var(--halo-tracking-tight); 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. COLOUR GLASS — the metric widget
   --------------------------------------------------------------------------
   Flat glass. One tone mixed into the frost at a fixed percentage, one
   hairline in the same tone, and the backdrop blur doing the actual work.
   A restrained inner highlight defines the edge; depth stays in summary groups.

   Numbers use theme-specific semantic ink, never the raw surface tone.
   ========================================================================== */

.halo-metric {
    --t1: var(--halo-tone-brand);
    --metric-ink: var(--halo-ink-brand);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--halo-3);
    min-width: 0;
    padding: var(--halo-4) var(--halo-5);
    border-radius: var(--halo-radius-lg);
    border: 1px solid rgb(var(--t1) / var(--halo-glass-edge));
    color: var(--halo-text-on-tint);

    background-color: color-mix(in srgb,
        rgb(var(--t1)) var(--halo-glass-tint), var(--halo-glass-base));

    -webkit-backdrop-filter: var(--halo-glass-blur);
    backdrop-filter: var(--halo-glass-blur);
    box-shadow: inset 0 1px 0 var(--halo-glass-highlight), var(--halo-shadow-1);

    transition: transform var(--halo-duration-3) var(--halo-ease-spring),
                box-shadow var(--halo-duration-2) var(--halo-ease-out),
                border-color var(--halo-duration-1) var(--halo-ease-out);
}

/* Engines without color-mix keep the frost and let the hairline carry the
   tone, rather than falling back to an untinted white box with no identity. */
@supports not (background-color: color-mix(in srgb, red 10%, blue)) {
    .halo-metric { background-color: var(--halo-glass-base); border-width: 2px; }
}

/* Interactive metrics (click-to-filter, as in Workboard) */
.halo-metric--action { cursor: pointer; text-align: left; width: 100%; font: inherit; }
.halo-metric--action:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgb(var(--t1) / calc(var(--halo-glass-edge) + .12));
    box-shadow: inset 0 1px 0 var(--halo-glass-highlight), var(--halo-shadow-2);
}
.halo-metric--action:active { transform: translateY(0) scale(.99); }
.halo-metric--action:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-metric[aria-pressed="true"], .halo-metric.is-selected {
    outline: 2px solid rgb(var(--halo-tone-brand));
    outline-offset: 2px;
    box-shadow: inset 0 1px 0 var(--halo-glass-highlight), var(--halo-shadow-1);
}

.halo-metric__head { display: flex; align-items: center; gap: var(--halo-2); }

/* Icon chip carries the tone at full strength — this is where colour is
   allowed to be loud, because nothing has to be read through it. */
.halo-metric__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px; height: 22px;
    border-radius: 7px;
    color: var(--metric-ink);
    background: rgb(var(--t1) / .18);
}
.halo-metric__icon :is(svg, .mud-icon-root) { width:13px; height:13px; font-size:13px; }

.halo-metric__label {
    font-size: var(--halo-text-sm);
    font-weight: 600;
    color: var(--halo-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.halo-metric__value {
    font-family: var(--halo-font-display);
    font-size: var(--halo-text-display);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--metric-ink);
}
.halo-metric__footer { display: flex; align-items: center; gap: var(--halo-2); font-size: var(--halo-text-sm); color: var(--halo-text-secondary); }

/* Delta is a small pill: tint of the direction plus its ink. */
.halo-metric__delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 6px;
    font-size: var(--halo-text-caption); font-weight: 700; font-variant-numeric: tabular-nums;
    background: rgb(var(--halo-tone-neutral) / .14); color: var(--halo-ink-neutral);
}
.halo-metric__delta--up { background: rgb(var(--halo-tone-success) / .16); color: var(--halo-ink-success); }
.halo-metric__delta--down { background: rgb(var(--halo-tone-critical) / .16); color: var(--halo-ink-critical); }
:root[data-theme="dark"] .halo-metric__delta--up, .halo-dark .halo-metric__delta--up { color: var(--halo-ink-success); }
:root[data-theme="dark"] .halo-metric__delta--down, .halo-dark .halo-metric__delta--down { color: var(--halo-ink-critical); }

.halo-metric--compact { padding: var(--halo-3) var(--halo-4); gap: var(--halo-2); }
.halo-metric--compact .halo-metric__value { font-size: 1.375rem; }
.halo-metric--compact .halo-metric__icon { width: 22px; height: 22px; }

/* Tone modifiers — the only sanctioned way to colour a metric. */
.halo-metric--brand    { --t1: var(--halo-tone-brand); --metric-ink: var(--halo-ink-brand); }
.halo-metric--info     { --t1: var(--halo-tone-info); --metric-ink: var(--halo-ink-info); }
.halo-metric--success  { --t1: var(--halo-tone-success); --metric-ink: var(--halo-ink-success); }
.halo-metric--warning  { --t1: var(--halo-tone-warning); --metric-ink: var(--halo-ink-warning); }
.halo-metric--critical { --t1: var(--halo-tone-critical); --metric-ink: var(--halo-ink-critical); }
.halo-metric--pipeline { --t1: var(--halo-tone-pipeline); --metric-ink: var(--halo-ink-pipeline); }
.halo-metric--campaign { --t1: var(--halo-tone-campaign); --metric-ink: var(--halo-ink-campaign); }
.halo-metric--neutral  { --t1: var(--halo-tone-neutral); --metric-ink: var(--halo-ink-neutral); }

/* Metric row: a GRID that wraps, never a flex row that scrolls off-screen. */
.halo-metric-grid {
    display: grid;
    gap: var(--halo-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr));
}

/* Skeleton for the loading state — same geometry, no tone, no motion abuse. */
.halo-metric--loading { --t1: var(--halo-tone-neutral); pointer-events: none; }
.halo-metric--loading .halo-metric__value,
.halo-metric--loading .halo-metric__label {
    color: transparent;
    background: rgb(22 21 31 / .09);
    border-radius: var(--halo-radius-xs);
    animation: halo-pulse-soft 1.4s var(--halo-ease) infinite;
}
@keyframes halo-pulse-soft { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .halo-metric--loading * { animation: none !important; } }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.halo-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--halo-2);
    height: var(--halo-control-md);
    padding-inline: var(--halo-4);
    border-radius: var(--halo-radius-md);
    border: 1px solid transparent;
    font: 600 var(--halo-text-body)/1 var(--halo-font);
    letter-spacing: -0.005em;
    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-2) var(--halo-ease-out),
                opacity var(--halo-duration-1) var(--halo-ease-out),
                transform var(--halo-duration-2) var(--halo-ease-spring);
}
.halo-btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.halo-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.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);
    box-shadow: 0 6px 16px rgb(var(--halo-tone-brand) / .28), inset 0 1px 0 rgb(255 255 255 / .18);
}
.halo-btn.halo-btn--primary:is(:hover, :active, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--halo-action-brand) 88%, #fff);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .halo-btn.halo-btn--primary:is(:hover, :active, :focus-visible):not(:disabled):not([aria-disabled="true"]) { background: rgb(var(--halo-tone-brand)); }
}
/* Mud's disabled foreground is important; retain white on the brand surface.
   The shared disabled opacity still indicates that the action is unavailable. */
.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-hairline-strong);
    box-shadow: var(--halo-shadow-1);
}
.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) { background: rgb(var(--halo-tone-critical) / .88); }

.halo-btn--sm { height: var(--halo-control-sm); padding-inline: var(--halo-3); font-size: var(--halo-text-sm); }
.halo-btn--lg { height: var(--halo-control-lg); padding-inline: var(--halo-5); }
.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:15px; height:15px; font-size:15px; }
.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: 500; color: var(--halo-text-secondary); }
.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-md);
    box-shadow: var(--halo-shadow-flat);
    transition: border-color var(--halo-duration-1) var(--halo-ease-out),
                box-shadow var(--halo-duration-2) var(--halo-ease-out),
                background-color var(--halo-duration-1) var(--halo-ease-out),
                transform var(--halo-duration-2) var(--halo-ease-spring);
    appearance: none;
}
.halo-textarea { height: auto; min-height: 96px; padding: var(--halo-3); line-height: 1.5; resize: vertical; }

.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: rgb(var(--halo-tone-brand) / .70);
    box-shadow: var(--halo-focus-ring-field);
    transform: scale(1.005);
}
.halo-select:focus { transform: none; }
.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: rgb(var(--halo-tone-critical) / .72);
    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-tone-critical) / .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-md);
    font: 400 var(--halo-text-body)/1.35 var(--halo-font);
}
.halo-field .mud-input-outlined-border {
    border: 1px solid var(--halo-hairline-strong);
    border-radius: var(--halo-radius-md);
}
.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: rgb(var(--halo-tone-brand) / .70); }
.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: rgb(var(--halo-tone-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-md);
    background: var(--halo-surface);
    box-shadow: var(--halo-shadow-3);
}
.halo-select-list { padding: var(--halo-2); }
.halo-select-list .mud-list-item { border-radius: var(--halo-radius-sm); 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 > span:first-child {
    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-ink-brand);
    background: rgb(var(--halo-tone-brand) / .10); 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: rgb(var(--halo-tone-brand) / .70); 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-strong); border-radius: var(--halo-radius-lg);
    color: var(--halo-text); background: rgb(255 255 255 / .92);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    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-brand);
    font: 600 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: var(--halo-radius-sm); 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-hairline-strong); border-radius: 6px; background: var(--halo-surface);
}
.halo-multi-picker__option input:checked + .halo-multi-picker__check {
    border-color: rgb(var(--halo-tone-brand)); background: rgb(var(--halo-tone-brand));
}
.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); }
:root[data-theme="dark"] .halo-multi-picker__menu,
.halo-dark .halo-multi-picker__menu { background: rgb(23 22 31 / .92); }

.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: rgb(21 20 29 / .16);
    transition: background-color var(--halo-duration-2) var(--halo-ease-out);
}
:root[data-theme="dark"] .halo-switch__track, .halo-dark .halo-switch__track { background: rgb(255 255 255 / .18); }
.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-action-brand); }
.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-hairline-strong);
    border-radius: 6px;
    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-action-brand); border-color: var(--halo-action-brand); }
.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-lg);
}
.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 var(--halo-hairline-strong);
    background: var(--halo-surface);
    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: rgb(var(--halo-tone-brand) / .12);
    border-color: rgb(var(--halo-tone-brand) / .40);
    color: var(--halo-ink-brand);
}
:root[data-theme="dark"] .halo-chip[aria-pressed="true"], .halo-dark .halo-chip.is-active { color: var(--halo-ink-brand); }
.halo-chip__count {
    font-family: var(--halo-font-mono);
    font-variant-numeric: tabular-nums;
    padding: 1px 5px; border-radius: 5px;
    background: rgb(21 20 29 / .07); font-size: 0.65rem; font-weight: 500;
}
:root[data-theme="dark"] .halo-chip__count, .halo-dark .halo-chip__count { background: rgb(255 255 255 / .10); }

/* 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: rgb(var(--halo-tone-brand) / .10);
    color: var(--halo-ink-brand);
    font: 500 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: rgb(var(--halo-tone-brand) / .16); }

.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; }
.halo-text-input-wrap:has(.halo-text-field__adornment) .halo-text-field { padding-inline-start: 40px; }
.halo-text-field__adornment {
    position: absolute; left: 13px; 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: rgb(var(--halo-tone-critical) / .72); }

.halo-icon-button {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: var(--halo-control-lg); height: var(--halo-control-lg); padding: 0;
    border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-md);
    color: var(--halo-text-secondary); background: var(--halo-surface); 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: 19px; height: 19px; fill: currentColor; }
.halo-icon-button:hover:not(:disabled) { color: var(--halo-ink-brand); border-color: rgb(var(--halo-tone-brand) / .28); background: rgb(var(--halo-tone-brand) / .06); transform: scale(1.06); }
.halo-icon-button:active:not(:disabled) { transform: scale(.96); }
.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: 9px 13px;
    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-action);
    background: var(--halo-action-brand);
    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-secondary); font-size: .875rem !important; }
.halo-chat-bubble__timestamp { color: var(--halo-text-secondary); 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: rgb(var(--halo-tone-critical));
    color: var(--halo-text-inverse);
    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: var(--halo-5);
    border-bottom: 1px solid var(--halo-hairline);
}
.halo-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--halo-2);
    flex: 0 0 auto; min-height: var(--halo-control-lg);
    padding: var(--halo-3) 2px;
    border: 0; background: none; cursor: pointer;
    font: 500 var(--halo-text-body)/1 var(--halo-font);
    color: var(--halo-text-secondary);
    transition: color var(--halo-duration-1) var(--halo-ease);
}
.halo-tab svg { width: 18px; height: 18px; fill: currentColor; }
.halo-tab:hover { color: var(--halo-text); }
.halo-tab:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); border-radius: var(--halo-radius-xs); }
.halo-tab[aria-selected="true"], .halo-tab[aria-current="page"] { color: var(--halo-text); font-weight: 600; }
/* The ink grows from the centre with the spring when a tab becomes selected. */
.halo-tab[aria-selected="true"]::after, .halo-tab[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px;
    background: rgb(var(--halo-tone-brand));
    animation: halo-tab-ink var(--halo-duration-3) var(--halo-ease-spring);
}
@keyframes halo-tab-ink { from { transform: scaleX(.4); } }

.halo-segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--halo-surface-sunken);
    border-radius: var(--halo-radius-md);
    border: 1px solid var(--halo-hairline);
}
.halo-segmented__item {
    display: inline-flex; align-items: center; gap: var(--halo-2);
    height: 30px; padding-inline: var(--halo-4);
    border: 0; border-radius: var(--halo-radius-sm);
    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: var(--halo-shadow-1);
    animation: halo-thumb-in var(--halo-duration-3) var(--halo-ease-spring);
}
@keyframes halo-thumb-in { from { transform: scale(.92); } }

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

.halo-table-shell {
    background: var(--halo-surface);
    border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-lg);
    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);
    letter-spacing: var(--halo-tracking-wide);
    text-transform: uppercase;
    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 { opacity: 0; transform: translateY(6px); } }
.halo-table tbody tr:hover { background: var(--halo-surface-hover); }
.halo-table tbody tr[aria-selected="true"] { background: rgb(var(--halo-tone-brand) / .08); box-shadow: inset 3px 0 0 rgb(var(--halo-tone-brand)); }
.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: rgb(var(--halo-tone-brand) / .06); }
.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-weight: 600; color: var(--halo-text); }
.halo-grid-toolbar__selection {
    padding: 5px 10px; border-radius: var(--halo-radius-pill);
    color: var(--halo-ink-brand); background: rgb(var(--halo-tone-brand) / .10);
    box-shadow: inset 0 0 0 1px rgb(var(--halo-tone-brand) / .22);
    font-size: var(--halo-text-sm); font-weight: 600;
}
.halo-density { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-md); background: var(--halo-surface-sunken); }
.halo-density button {
    display: inline-flex; align-items: center; gap: var(--halo-1); height: 28px;
    padding: 0 var(--halo-2); border: 0; border-radius: var(--halo-radius-sm);
    color: var(--halo-text-secondary); 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: var(--halo-shadow-1); }
.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: var(--halo-2); border: 1px solid var(--halo-hairline);
    border-radius: var(--halo-radius-md); background: var(--halo-surface); 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: rgb(var(--halo-tone-brand)); }
.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: var(--halo-radius-sm); 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-ink-brand); border-color: rgb(var(--halo-tone-brand) / .16);
    background: rgb(var(--halo-tone-brand) / .08);
}
.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-sm);
    color: var(--halo-text); background: var(--halo-surface);
    box-shadow: var(--halo-shadow-3);
}
.halo-row-actions-list { padding: var(--halo-2); }
.halo-row-action {
    display: flex; align-items: center; gap: var(--halo-3); width: 100%; min-height: 36px;
    padding: 0 var(--halo-3); border: 0; border-radius: var(--halo-radius-sm);
    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: rgb(var(--halo-tone-critical) / .08); }


@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-ink: var(--halo-ink-neutral);
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding-inline: var(--halo-2) var(--halo-3);
    border-radius: var(--halo-radius-pill);
    background: rgb(var(--t1) / .12);
    box-shadow: inset 0 0 0 1px rgb(var(--t1) / .22);
    color: var(--badge-ink);
    font: 600 var(--halo-text-sm)/1 var(--halo-font);
    white-space: nowrap;
}
.halo-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.halo-badge--no-dot::before { display: none; }
.halo-badge--brand    { --t1: var(--halo-tone-brand); --badge-ink: var(--halo-ink-brand); }
.halo-badge--info     { --t1: var(--halo-tone-info); --badge-ink: var(--halo-ink-info); }
.halo-badge--success  { --t1: var(--halo-tone-success); --badge-ink: var(--halo-ink-success); }
.halo-badge--warning  { --t1: var(--halo-tone-warning); --badge-ink: var(--halo-ink-warning); }
.halo-badge--critical { --t1: var(--halo-tone-critical); --badge-ink: var(--halo-ink-critical); }
.halo-badge--neutral  { --t1: var(--halo-tone-neutral); --badge-ink: var(--halo-ink-neutral); }
.halo-badge--pipeline { --t1: var(--halo-tone-pipeline); --badge-ink: var(--halo-ink-pipeline); }
.halo-badge--campaign { --t1: var(--halo-tone-campaign); --badge-ink: var(--halo-ink-campaign); }
/* Dark mode lifts the label off the tint; the ring keeps the identity. */
:root[data-theme="dark"] .halo-badge, .halo-dark .halo-badge {
    background: rgb(var(--t1) / .20);
    color: var(--badge-ink);
}

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

/* Summary hierarchy shared by operational pages. */
.halo-summary {
    position: relative;
    padding: var(--halo-3);
    border-radius: var(--halo-radius-xl);
    background: radial-gradient(ellipse at 12% 0%, rgb(var(--halo-tone-brand) / .08), transparent 65%),
                radial-gradient(ellipse at 95% 100%, rgb(var(--halo-tone-info) / .06), transparent 60%);
}
.halo-metric--context { background: var(--halo-surface); box-shadow: var(--halo-shadow-flat); }
.halo-metric--context .halo-metric__value { color: var(--halo-text); }
/* Attention is a 3px stripe along the top edge in the metric's own tone. */
.halo-metric--attention::before {
    content: ""; position: absolute; z-index: 1;
    left: var(--halo-4); right: var(--halo-4); top: 0; height: 3px;
    border-radius: 0 0 4px 4px;
    background: rgb(var(--t1));
}
.halo-metric__selected {
    position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
    display: grid; place-items: center; width: 18px; height: 18px;
    border-radius: var(--halo-radius-pill); background: var(--halo-ink-brand);
    color: var(--halo-surface); font-size: var(--halo-text-caption); font-weight: 700;
}
.halo-metric[aria-pressed="true"] .halo-metric__head { padding-inline-end: var(--halo-3); }
.halo-metric--loading { --metric-ink: var(--halo-text-tertiary); }
.halo-metric--loading .halo-metric__icon { visibility: hidden; }
.halo-metric--loading .halo-metric__value,
.halo-metric--loading .halo-metric__label { background: var(--halo-hairline-strong); }
.halo-scope .halo-table td { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-transparency: reduce) {
    .halo-summary { background: var(--halo-surface-sunken); }
}
@media (forced-colors: active) {
    .halo-metric { border: 1px solid CanvasText; }
    .halo-metric[aria-pressed="true"] { outline: 2px solid Highlight; }
    .halo-metric__value { color: CanvasText; }
}

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

/* 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:8px; 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:rgb(var(--halo-violet) / .10); }
.halo-grid-filter-trigger:focus-visible, .halo-grid-filter-panel :is(input,select,button):focus-visible { outline:2px solid var(--halo-action-brand); outline-offset:2px; }
.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, 16px); background:var(--halo-surface, #fff); 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:36px; border:1px solid var(--halo-hairline-strong); border-radius:8px; padding:6px 10px; background:var(--halo-surface, #fff); 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-hairline-strong); border-radius:8px; background:var(--halo-surface, #fff); 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:var(--halo-action-brand); color: var(--halo-ink-brand); }
.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:rgb(var(--halo-violet) / .08); color: var(--halo-ink-brand); border-color:rgb(var(--halo-violet) / .2); }
.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, 100vw); max-width:100vw; background:var(--halo-surface); color:var(--halo-text); border-left:1px solid var(--halo-hairline); box-shadow:var(--halo-shadow-3); }
.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-size:var(--halo-text-title); 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:32px; height:32px; 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:rgb(var(--halo-violet) / .06); 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:flex; align-items:center; flex-wrap:wrap; gap:var(--halo-2); margin-block:var(--halo-4); padding:var(--halo-2); border:1px solid var(--halo-hairline); border-radius:var(--halo-radius-lg); background:var(--halo-surface); }
.halo-workspace-nav a { padding:8px 12px; color:var(--halo-text-secondary); text-decoration:none; border-radius:var(--halo-radius-sm); font-size:var(--halo-text-sm); }
.halo-workspace-nav a[aria-current=page] { background:rgb(var(--halo-violet) / .10); color: var(--halo-ink-brand); font-weight:600; }
.halo-workspace-nav a:focus-visible { outline:2px solid var(--halo-action-brand); outline-offset:2px; }
.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-ink-brand); background:rgb(var(--halo-violet) / .08); }
.halo-tabs .mud-tabs-slider { background:var(--halo-action-brand); }

/* Task navigation and the progressive campaign editor share Halo foundations. */
.halo-workspace-nav button { border: 0; background: transparent; color: var(--halo-text-secondary); padding: var(--halo-3) var(--halo-4); border-radius: var(--halo-radius-md); cursor: pointer; font: inherit; }
.halo-workspace-nav button[aria-current="step"] { color: var(--halo-ink-brand); background: var(--halo-surface-hover); font-weight: 600; }
.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-md); }
.halo-field .mud-input.mud-input-outlined .mud-input-outlined-border { border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-md); }
.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-3); 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: var(--halo-1); border: 1px solid var(--halo-hairline); 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: 40px; padding: var(--halo-2) var(--halo-4); border-radius: var(--halo-radius-sm); font: 600 var(--halo-text-body)/1.4 var(--halo-font); }
.halo-tabs.mud-tabs .mud-tab.mud-tab-active { background: var(--halo-surface); color: var(--halo-ink-brand); box-shadow: 0 1px 3px var(--halo-hairline-strong); }
.halo-tabs.mud-tabs .mud-tab:focus-visible { outline: 2px solid var(--halo-ink-brand); outline-offset: -2px; }
.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-md); 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-ink-brand); }
.halo-control__input .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--halo-action-brand); }
.halo-control__input .mud-input-outlined.mud-input-focused { box-shadow: var(--halo-focus-ring); }
.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-lg); }

/* Shared filter bar */

    .halo-filter-bar {
        padding: 16px;
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-lg, 16px);
        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); }