/* ============================================================================
   Primitives. Reusable, domain-free building blocks: buttons, cards, chips,
   badges, fields, alerts, grids and the small layout/text utilities.
   ========================================================================== */
@layer primitives {
    /* ---- Text utilities ----------------------------------------------------- */
    .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .text-dim { color: var(--text-secondary); }
    .text-mute { color: var(--text-tertiary); }
    .text-ok { color: var(--status-ok-fg); }
    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    /* ---- Buttons ------------------------------------------------------------
       Primary is crimson and there is one per view. Secondary is the inverse
       surface (white on dark, black on light) for the second most important
       action; outline and ghost for everything quieter. ------------------- */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
        height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius);
        font-size: var(--text-sm); font-weight: 550; line-height: 1; letter-spacing: -0.005em;
        border: 1px solid transparent; white-space: nowrap; text-decoration: none;
        transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
                    color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
    }
    .btn:active:not(:disabled) { transform: translateY(0.5px); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn svg { width: 16px; height: 16px; flex: none; }
    .btn-sm svg { width: 14px; height: 14px; }

    .btn-primary {
        background: var(--action-primary-bg); color: var(--action-primary-fg);
        box-shadow: inset 0 1px 0 var(--overlay-line);
    }
    .btn-primary:hover:not(:disabled) { background: var(--action-primary-hover); }
    .btn-primary:active:not(:disabled) { background: var(--action-primary-active); }

    .btn-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); }
    .btn-secondary:hover:not(:disabled) { background: var(--action-secondary-hover); }

    .btn-outline { border-color: var(--border-strong); color: var(--text-primary); background: transparent; }
    .btn-outline:hover:not(:disabled) { border-color: var(--border-hover); background: var(--overlay-firm); }

    .btn-ghost { color: var(--text-secondary); background: transparent; }
    .btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--overlay-firm); }

    .btn-danger { color: var(--status-error-fg); background: var(--status-error-bg); border-color: var(--status-error-border); }
    .btn-danger:hover:not(:disabled) { background: var(--action-primary-soft); border-color: var(--status-error-fg); }

    .btn-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 0.8125rem; border-radius: var(--radius-sm); }
    .btn-lg { height: var(--control-h-lg); padding: 0 var(--space-5); font-size: 0.9375rem; border-radius: var(--radius); }
    .btn-block { width: 100%; }
    .btn-icon { width: var(--control-h); padding: 0; }
    .btn-sm.btn-icon { width: var(--control-h-sm); }

    /* A button that reads as a text link: secondary actions in a toolbar or sentence. */
    .link-btn {
        display: inline-flex; align-items: center; gap: var(--space-1);
        background: none; border: 0; padding: 0; cursor: pointer;
        font: inherit; font-size: var(--text-sm); font-weight: 550; color: var(--accent-text);
        text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
        transition: text-decoration-color 0.15s var(--ease);
    }
    .link-btn:hover { text-decoration-color: currentColor; }

    /* ---- Chips (toggle filters) --------------------------------------------- */
    .chip {
        display: inline-flex; align-items: center; gap: var(--space-2);
        height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-full);
        background: var(--surface-1); border: 1px solid var(--border-default);
        color: var(--text-secondary); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
        transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
    }
    .chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
    .chip[aria-pressed="true"] { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
    .chip-count { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
    .chip[aria-pressed="true"] .chip-count { color: inherit; opacity: 0.6; }

    /* ---- Cards -------------------------------------------------------------- */
    .card {
        background: var(--surface-1);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-1);
        transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
    }
    .card-pad { padding: var(--space-6); }

    /* ---- Empty states ------------------------------------------------------- */
    .empty, .empty-state {
        display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
        padding: var(--space-12) var(--space-6);
        background: var(--surface-sunken);
        border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    }
    .empty p { color: var(--text-secondary); }
    .empty-state-title { font-weight: 600; color: var(--text-primary); }
    .empty-state-text { color: var(--text-secondary); font-size: var(--text-sm); max-width: 44ch; }
    .empty-state-action { margin-top: var(--space-3); }

    /* ---- Badges / tags ------------------------------------------------------ */
    .badge {
        display: inline-flex; align-items: center; gap: 0.35rem;
        height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full);
        font-size: var(--text-xs); font-weight: 550; line-height: 1; white-space: nowrap;
        border: 1px solid var(--border-default); color: var(--text-secondary); background: var(--surface-2);
    }
    .badge.has-dot::before {
        content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor;
    }
    .badge-accent { color: var(--accent-text); border-color: var(--action-primary-line); background: var(--action-primary-soft); }
    .badge-ok    { color: var(--status-ok-fg);    border-color: var(--status-ok-border);    background: var(--status-ok-bg); }
    .badge-warn  { color: var(--status-warn-fg);  border-color: var(--status-warn-border);  background: var(--status-warn-bg); }
    .badge-error { color: var(--status-error-fg); border-color: var(--status-error-border); background: var(--status-error-bg); }
    .badge-info  { color: var(--status-info-fg);  border-color: var(--status-info-border);  background: var(--status-info-bg); }
    .tag {
        display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2);
        font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary);
        border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-default);
    }

    /* ---- Form fields -------------------------------------------------------- */
    .field, .form-row { display: flex; flex-direction: column; gap: var(--space-2); }
    .field label, .form-row label, .form-label { font-size: 0.8125rem; font-weight: 550; color: var(--text-primary); }
    .form-row-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
    .form-row-error { font-size: var(--text-xs); color: var(--status-error-fg); }
    .input, .textarea, .select {
        width: 100%; min-height: var(--control-h); padding: 0.375rem 0.75rem;
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong); border-radius: var(--radius);
        color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
        box-shadow: inset 0 1px 2px var(--overlay-soft);
        transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease);
    }
    .textarea { min-height: 110px; resize: vertical; }
    /* Single-line controls are exactly one control height, so they line up with buttons. */
    :is(input.input, select.select, select.input) { height: var(--control-h); padding-block: 0; }
    :is(input.input, select.select, select.input).input-sm { height: var(--control-h-sm); padding-inline: 0.625rem; font-size: 0.8125rem; }
    select.input-sm, select.select:has(~ .btn-sm), .btn-sm ~ select.select { padding-right: 1.75rem; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
    .select { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
    .input:hover, .textarea:hover, .select:hover { border-color: var(--border-hover); }
    .input:focus, .textarea:focus, .select:focus {
        outline: none; background-color: var(--surface-1);
        border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--action-primary-soft);
    }
    .input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
    .form-row.has-error .input, .form-row.has-error .textarea, .form-row.has-error .select { border-color: var(--status-error-border); }

    /* ---- Alerts ------------------------------------------------------------- */
    .alert {
        display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
        border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.5;
        border: 1px solid var(--border-default); background: var(--surface-2); color: var(--text-secondary);
    }
    .alert-error { color: var(--status-error-fg); border-color: var(--status-error-border); background: var(--status-error-bg); }
    .alert-ok    { color: var(--status-ok-fg);    border-color: var(--status-ok-border);    background: var(--status-ok-bg); }
    .alert-warn  { color: var(--status-warn-fg);  border-color: var(--status-warn-border);  background: var(--status-warn-bg); }
    .alert-info  { color: var(--status-info-fg);  border-color: var(--status-info-border);  background: var(--status-info-bg); }

    /* ---- Grid & flex helpers ------------------------------------------------ */
    .grid { display: grid; gap: var(--space-5); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* A grid child that takes the whole row (a long text field in a two-column form). */
    .grid > .span-all { grid-column: 1 / -1; }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

    .divider { height: 1px; background: var(--border-subtle); border: none; margin: 0; }
    .stack { display: flex; flex-direction: column; }
    .row { display: flex; align-items: center; }
    .gap-sm { gap: var(--space-2); } .gap { gap: var(--space-4); }
    .spread { justify-content: space-between; }
    .wrap { flex-wrap: wrap; }

    /* ---- Page header (PageHeader.razor) ------------------------------------- */
    .page-header {
        display: flex; align-items: flex-end; justify-content: space-between;
        gap: var(--space-6); flex-wrap: wrap;
        padding-bottom: var(--space-8); margin-bottom: var(--space-8);
        border-bottom: 1px solid var(--border-subtle);
    }
    .page-header-text { max-width: 720px; }
    .page-header h1 { font-size: clamp(2rem, 4vw, var(--text-3xl)); margin-bottom: var(--space-3); }
    .page-header p { color: var(--text-secondary); font-size: var(--text-lg); line-height: 1.55; max-width: 60ch; }
    .page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

    /* ---- Panel -------------------------------------------------------------- */
    .panel {
        background: var(--surface-1);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-1);
    }
    .panel-head {
        display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
        padding: var(--space-4) var(--space-6);
        border-bottom: 1px solid var(--border-subtle);
    }
    .panel-head h2 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; }
    .panel-head p { color: var(--text-tertiary); font-size: var(--text-sm); margin-top: 2px; }
    .panel-actions { display: flex; gap: var(--space-2); }
    .panel-body { padding: var(--space-6); }
    .panel-body.is-flush { padding: 0; }

    /* ---- Toolbar ------------------------------------------------------------ */
    .toolbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5);
    }
    .toolbar-main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
    .toolbar-trailing { display: flex; align-items: center; gap: var(--space-2); }

    /* ---- Breadcrumb --------------------------------------------------------- */
    .breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
    .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--text-tertiary); }
    .breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border-hover); }
    .breadcrumb a { color: var(--text-secondary); transition: color 0.15s var(--ease); }
    .breadcrumb a:hover { color: var(--text-primary); }
    .breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

    /* ---- Tabs: segmented underline ------------------------------------------ */
    .tablist { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
    .tab {
        position: relative; background: none; border: 0;
        padding: var(--space-3) var(--space-3); margin-bottom: -1px;
        font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--text-tertiary); white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
    }
    .tab:hover { color: var(--text-primary); }
    .tab.is-active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
    .tabpanel { padding-top: var(--space-6); }

    /* ---- Menu --------------------------------------------------------------- */
    .menu { position: relative; }
    .menu-trigger { background: none; border: 0; padding: 0; color: inherit; }
    .menu-panel {
        position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 160;
        min-width: 220px; max-width: calc(100vw - 16px); padding: var(--space-1);
        background: var(--surface-2); border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
        animation: pop-in 0.14s var(--ease);
    }
    .menu-item {
        display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
        height: 34px; padding: 0 var(--space-3); white-space: nowrap; flex: none; border: 0; background: none; border-radius: var(--radius-sm);
        font: inherit; font-size: var(--text-sm); color: var(--text-secondary);
    }
    .menu-item:hover { background: var(--overlay-firm); color: var(--text-primary); }
    .menu-separator { height: 1px; background: var(--border-subtle); border: 0; margin: var(--space-1) 0; }
    @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

    /* ---- Dialog ------------------------------------------------------------- */
    .dialog-backdrop {
        position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
        background: var(--overlay); backdrop-filter: blur(6px); padding: var(--space-6);
    }
    .dialog {
        width: 100%; max-width: 440px; background: var(--surface-1);
        border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
        box-shadow: var(--shadow-3); overflow: hidden; animation: pop-in 0.16s var(--ease);
    }
    .dialog-head { padding: var(--space-6) var(--space-6) 0; }
    .dialog-head h2 { font-size: var(--text-lg); }
    .dialog-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
    .dialog-body p { color: var(--text-secondary); font-size: var(--text-sm); }
    .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

    /* ---- Data list: one bordered block, rows separated by hairlines ---------- */
    .data-list {
        list-style: none; margin: 0; padding: 0;
        background: var(--surface-1); border: 1px solid var(--border-default);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden;
    }
    .data-list-row {
        display: flex; align-items: center; gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        transition: background-color 0.15s var(--ease);
    }
    .data-list-row + .data-list-row { border-top: 1px solid var(--border-subtle); }
    .data-list-row:hover { background: var(--surface-hover); }

    /* ---- Stat tile ---------------------------------------------------------- */
    .stat-tile {
        padding: var(--space-5); background: var(--surface-1);
        border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
    }
    .stat-tile-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
    .stat-tile-value {
        margin-top: var(--space-2);
        font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1;
        font-variant-numeric: tabular-nums; color: var(--text-primary);
    }
    .stat-tile-hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
    .stat-tile { display: flex; flex-direction: column; }
    .stat-tile-value { order: 2; }
    .stat-tile-label { order: 1; }
    .stat-tile-hint { order: 3; }

    /* ---- Avatar ------------------------------------------------------------- */
    .avatar {
        width: 28px; height: 28px; flex: none; border-radius: var(--radius-full); display: grid; place-items: center;
        background: var(--action-primary-soft); color: var(--accent-text);
        box-shadow: inset 0 0 0 1px var(--action-primary-line);
        font-weight: 650; font-size: var(--text-xs);
    }

    /* ---- Tables ------------------------------------------------------------- */
    .table, .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    :is(.table, .data-table) th {
        text-align: left; font-weight: 500; font-size: var(--text-xs); color: var(--text-tertiary);
        padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); background: var(--surface-2);
    }
    :is(.table, .data-table) td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
    :is(.table, .data-table) tr:last-child td { border-bottom: 0; }
    :is(.table, .data-table) tbody tr:hover td { background: var(--surface-hover); }
    .data-table { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
    .data-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
    :is(.table, .data-table) .num { text-align: right; }
    .table td { vertical-align: middle; }
    .cell-strong { display: block; color: var(--text-primary); font-weight: 600; }
    .cell-sub { display: block; margin-top: 2px; font-size: var(--text-2xs); color: var(--text-tertiary); }
    /* Wide tables scroll sideways only on small screens, so row menus can open over the table on desktop. */
    .table-scroll { overflow: visible; position: relative; }
    @media (max-width: 900px) { .table-scroll { overflow-x: auto; } }
}

/* A group of options as toggle chips: each checkbox sits in a bordered tile that turns red
   when checked, so a row of features reads at a glance. <fieldset class="check-chips">. */
@layer primitives {
    .check-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
    .check-chips > legend { width: 100%; margin-bottom: var(--space-2); padding: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
    .check-chips > label {
        display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-2);
        font-size: var(--text-sm); color: var(--text-secondary);
        background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius);
        transition: border-color 0.12s var(--ease), background-color 0.12s var(--ease), color 0.12s var(--ease);
    }
    .check-chips > label:hover { border-color: var(--border-hover); color: var(--text-primary); }
    .check-chips > label:has(:checked) { color: var(--text-primary); background: var(--action-primary-soft); border-color: var(--action-primary-bg); }
    .check-chips > label:has(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .check-chips > label input:focus-visible { outline: none; }
    .check-chips .mono { font-size: var(--text-2xs); color: var(--text-tertiary); }
}

/* Small phones: buttons wrap their label instead of pushing past the screen edge. */
@layer primitives {
    @media (max-width: 400px) {
        .btn, .btn-lg { max-width: 100%; height: auto; min-height: 36px; padding: 0.5rem var(--space-3); white-space: normal; text-align: center; line-height: 1.25; }
    }
}

/* Fields and buttons on one line. <div class="inline-form"> holds FormRows (or .field) and
   buttons: fields share the row, buttons keep their size, and everything sits on the same
   baseline because every control is one --control-h tall. Wraps on narrow screens. */
@layer primitives {
    .inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
    .inline-form > :is(.form-row, .field) { flex: 1 1 12rem; min-width: 0; }
    .inline-form > :is(.form-row, .field).is-narrow { flex: 0 1 9rem; }
    .inline-form > .btn { flex: none; }

    /* An input with its button attached (newsletter, search, copy key). */
    .input-group { display: flex; align-items: stretch; min-width: 0; }
    .input-group > .input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .input-group > .btn { height: auto; min-height: var(--control-h); border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .input-group > .btn-outline { border-left: 0; }
}

/* Icons (Components/Ui/Icon.razor): one stroke family everywhere, sized by the text around them. */
@layer primitives {
    .icon { flex: none; display: inline-block; vertical-align: -0.15em; }
    /* A square tile around an icon: list rows, channels, KPI tiles. Tone modifiers match badges. */
    .icon-tile {
        flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px;
        border-radius: var(--radius); color: var(--text-secondary);
        background: var(--surface-2); border: 1px solid var(--border-default);
    }
    .icon-tile.is-lg { width: 40px; height: 40px; }
    .icon-tile.is-accent { color: var(--accent-text); background: var(--action-primary-soft); border-color: var(--action-primary-line); }
    .icon-tile.is-ok     { color: var(--status-ok-fg);   background: var(--status-ok-bg);   border-color: var(--status-ok-border); }
    .icon-tile.is-warn   { color: var(--status-warn-fg); background: var(--status-warn-bg); border-color: var(--status-warn-border); }
    .icon-tile.is-info   { color: var(--status-info-fg); background: var(--status-info-bg); border-color: var(--status-info-border); }
}

/* A small segmented switch (period pickers, view toggles): <div class="seg" role="group"> with
   buttons carrying aria-pressed. */
@layer primitives {
    .seg { display: inline-flex; gap: 2px; height: var(--control-h); padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius); }
    .seg > button { flex: none;
        height: 100%; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none;
        font: inherit; font-size: 0.8125rem; font-weight: 550; color: var(--text-tertiary); cursor: pointer;
        transition: color 0.12s var(--ease), background-color 0.12s var(--ease);
    }
    .seg > button:hover { color: var(--text-primary); }
    .seg > button[aria-pressed="true"] { color: var(--text-primary); background: var(--surface-2); box-shadow: 0 0 0 1px var(--border-default), var(--shadow-1); }
}

/* A field sitting beside a small button takes the small height, so the pair lines up without
   per-page overrides. */
@layer primitives {
    :is(input.input, select.select, select.input):has(~ .btn-sm),
    .btn-sm ~ :is(input.input, select.select, select.input) { height: var(--control-h-sm); font-size: 0.8125rem; }
}

/* Row actions at the end of a table row: a visible next step, the rest in a menu. */
@layer primitives {
    .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
    .row-actions .menu-trigger { display: inline-flex; }
    .menu-item .icon { color: var(--text-tertiary); }
    .menu-item.is-danger, .menu-item.is-danger .icon { color: var(--status-error-fg); }
    .menu-item.is-danger:hover { background: var(--status-error-bg); }
    a.menu-item { text-decoration: none; }
}

/* A chat-style field: textarea with its actions inside one bordered box (message replies,
   forum replies). <div class="composer-box"><textarea class="composer-input"> + .composer-foot. */
@layer primitives {
    .composer-box {
        display: flex; flex-direction: column;
        background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
        transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    }
    .composer-box:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--action-primary-soft); }
    .composer-input {
        width: 100%; min-height: 3.25rem; max-height: 14rem; resize: vertical; padding: var(--space-3) var(--space-4) var(--space-1);
        background: none; border: 0; outline: none; color: var(--text-primary);
        font: inherit; font-size: var(--text-sm); line-height: 1.55;
    }
    .composer-input::placeholder { color: var(--text-tertiary); }
    .composer-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); }
    .composer-hint { margin-left: auto; font-size: var(--text-2xs); color: var(--text-tertiary); }
    .composer-hint kbd { padding: 0 4px; font-family: var(--font-mono); font-size: var(--text-2xs); border: 1px solid var(--border-default); border-radius: 4px; }
    @media (max-width: 600px) { .composer-hint { display: none; } .composer-foot .btn { margin-left: auto; } }
}

/* Pagination (Components/Ui/Pager): summary left, numbered pages right. */
@layer primitives {
    .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
    .pager-summary { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
    .pager-pages { display: flex; align-items: center; gap: 2px; }
    .pager-btn {
        display: inline-grid; place-items: center; min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-2);
        font: inherit; font-size: 0.8125rem; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text-secondary);
        background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
        transition: color 0.12s var(--ease), background-color 0.12s var(--ease), border-color 0.12s var(--ease);
    }
    .pager-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--overlay-firm); }
    .pager-btn[aria-current="page"] { color: var(--text-primary); background: var(--surface-2); border-color: var(--border-default); }
    .pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .pager-gap { min-width: 20px; text-align: center; color: var(--text-tertiary); font-size: var(--text-xs); }
    /* Under a table inside a card, the pager sits on its own hairline. */
    .admin-card-body .pager, .surface-card .pager { border-top: 1px solid var(--border-subtle); }
    .pager.is-bare { padding-inline: 0; }
}

/* Small screens (down to 200px): rows of controls wrap instead of pushing past the edge. */
@layer primitives {
    .panel-head, .admin-card-head, .toolbar, .page-header { flex-wrap: wrap; }
    .panel-actions, .pager-pages, .row-actions { flex-wrap: wrap; min-width: 0; }
    input.input, select.select, textarea.textarea { min-width: 0; max-width: 100%; }
    @media (max-width: 480px) {
        /* A plain data table scrolls sideways inside its own box rather than widening the page. */
        .data-table { display: block; overflow-x: auto; }
    }
}

/* Autocomplete (Components/Ui/Autocomplete): the field plus a floating suggestion list, styled like a menu. */
@layer primitives {
    .ac { position: relative; min-width: 0; }
    .ac > .input { width: 100%; }
    .ac-list {
        position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 170;
        max-height: min(320px, 50vh); overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none;
        background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
    }
    .ac-option {
        display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary);
    }
    .ac-option:hover, .ac-option.is-active { background: var(--overlay-firm); color: var(--text-primary); }
    .ac-option .avatar { flex: none; width: 24px; height: 24px; font-size: var(--text-2xs); }
    .ac-text { display: flex; flex-direction: column; min-width: 0; }
    .ac-label, .ac-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ac-label { color: var(--text-primary); font-weight: 500; }
    .ac-detail { font-size: var(--text-2xs); color: var(--text-tertiary); }
}