/* ============================================================================
   QuickPlay — component layer. One class family per Qp* component.
   Conventions: .qp-<block>, .qp-<block>__<element>, modifiers as data-* attributes
   (data-variant, data-size, data-tone, data-state) so Razor can splat them directly.
   ========================================================================= */

/* ---------------------------------------------------------------- Icon ---- */
.qp-icon {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    color: inherit;
}

.qp-icon--spin {
    animation: qp-spin 900ms linear infinite;
}

@keyframes qp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------- Button ---- */
.qp-btn {
    --_bg: transparent;
    --_fg: var(--qp-text);
    --_border: transparent;
    --_bg-hover: var(--qp-surface-hover);
    --_bg-active: var(--qp-surface-active);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qp-space-2);
    height: 34px;
    padding-inline: var(--qp-space-3);
    border: 1px solid var(--_border);
    border-radius: var(--qp-radius-sm);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--qp-duration-fast) var(--qp-ease),
        border-color var(--qp-duration-fast) var(--qp-ease),
        color var(--qp-duration-fast) var(--qp-ease),
        box-shadow var(--qp-duration-fast) var(--qp-ease),
        opacity var(--qp-duration-fast) var(--qp-ease);

    &:hover:not(:disabled) {
        background: var(--_bg-hover);
    }

    &:active:not(:disabled) {
        background: var(--_bg-active);
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.45;
        pointer-events: none;
    }

    /* Loading is not "unavailable" — it keeps full contrast while the spinner runs. */
    &[data-loading="true"]:disabled {
        opacity: 1;
    }

    &[data-size="sm"] {
        height: 28px;
        padding-inline: var(--qp-space-2);
        gap: var(--qp-space-1);
        font-size: var(--qp-text-xs);
        border-radius: var(--qp-radius-xs);
    }

    &[data-size="lg"] {
        height: 40px;
        padding-inline: var(--qp-space-5);
        font-size: var(--qp-text-md);
    }

    &[data-block="true"] {
        display: flex;
        width: 100%;
    }

    &[data-loading="true"] .qp-btn__content {
        visibility: hidden;
    }
}

.qp-btn[data-variant="primary"] {
    --_bg: var(--qp-accent);
    --_fg: var(--qp-text-on-accent);
    --_bg-hover: var(--qp-accent-hover);
    --_bg-active: var(--qp-accent-active);
    box-shadow: var(--qp-shadow-1);
}

.qp-btn[data-variant="secondary"] {
    --_bg: var(--qp-surface);
    --_fg: var(--qp-text);
    --_border: var(--qp-border);
    --_bg-hover: var(--qp-surface-sunken);
    --_bg-active: var(--qp-surface-active);
    box-shadow: var(--qp-shadow-1);

    &:hover:not(:disabled) {
        border-color: var(--qp-border-strong);
    }
}

.qp-btn[data-variant="ghost"] {
    --_fg: var(--qp-text-muted);

    &:hover:not(:disabled) {
        color: var(--qp-text);
    }
}

.qp-btn[data-variant="danger"] {
    --_bg: var(--qp-fail);
    --_fg: #fff;
    --_bg-hover: color-mix(in oklab, var(--qp-fail) 85%, #000);
    --_bg-active: color-mix(in oklab, var(--qp-fail) 75%, #000);
    box-shadow: var(--qp-shadow-1);
}

:root[data-theme="dark"] .qp-btn[data-variant="danger"] {
    --_fg: #1a0e0f;
    --_bg-hover: color-mix(in oklab, var(--qp-fail) 85%, #fff);
    --_bg-active: color-mix(in oklab, var(--qp-fail) 75%, #fff);
}

.qp-btn[data-variant="subtle"] {
    --_bg: var(--qp-accent-subtle);
    --_fg: var(--qp-accent-text);
    --_bg-hover: var(--qp-accent-subtle-hover);
    --_bg-active: var(--qp-accent-subtle-hover);
}

.qp-btn__content {
    display: inline-flex;
    align-items: center;
    gap: inherit;
}

.qp-btn__spinner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

/* --------------------------------------------------------- Icon button ---- */
.qp-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--qp-radius-sm);
    color: var(--qp-text-muted);
    transition: background-color var(--qp-duration-fast) var(--qp-ease),
        color var(--qp-duration-fast) var(--qp-ease),
        border-color var(--qp-duration-fast) var(--qp-ease);

    &:hover:not(:disabled) {
        background: var(--qp-surface-hover);
        color: var(--qp-text);
    }

    &:active:not(:disabled) {
        background: var(--qp-surface-active);
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: 1px;
    }

    &:disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    &[data-size="sm"] {
        width: 24px;
        height: 24px;
    }

    &[data-size="lg"] {
        width: 34px;
        height: 34px;
    }

    &[data-variant="secondary"] {
        border-color: var(--qp-border);
        background: var(--qp-surface);
        box-shadow: var(--qp-shadow-1);
    }

    &[data-variant="danger"]:hover:not(:disabled) {
        background: var(--qp-fail-bg);
        color: var(--qp-fail);
    }

    &[data-active="true"] {
        background: var(--qp-surface-selected);
        color: var(--qp-accent-text);
    }
}

/* --------------------------------------------------------------- Field ---- */
.qp-field {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-2);
    min-width: 0;
}

.qp-field__label {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text);
}

.qp-field__optional {
    color: var(--qp-text-faint);
    font-weight: var(--qp-weight-normal);
}

.qp-field__required {
    color: var(--qp-fail);
}

.qp-field__help {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    line-height: var(--qp-leading-snug);
}

.qp-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-1);
    font-size: var(--qp-text-xs);
    color: var(--qp-fail);
    line-height: var(--qp-leading-snug);
}

/* --------------------------------------------------- Input / Textarea ----- */
.qp-input,
.qp-textarea,
.qp-select {
    width: 100%;
    min-width: 0;
    background: var(--qp-field-bg);
    color: var(--qp-text);
    border: 1px solid var(--qp-border-field);
    border-radius: var(--qp-radius-sm);
    font-size: var(--qp-text-sm);
    transition: border-color var(--qp-duration-fast) var(--qp-ease),
        box-shadow var(--qp-duration-fast) var(--qp-ease),
        background-color var(--qp-duration-fast) var(--qp-ease);

    &::placeholder {
        color: var(--qp-text-faint);
    }

    &:hover:not(:disabled):not(:focus) {
        border-color: var(--qp-border-strong);
    }

    &:focus {
        outline: none;
        border-color: var(--qp-accent);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--qp-accent) 22%, transparent);
    }

    &:disabled {
        background: var(--qp-surface-sunken);
        color: var(--qp-text-faint);
        cursor: not-allowed;
    }

    &[aria-invalid="true"] {
        border-color: var(--qp-fail);

        &:focus {
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--qp-fail) 22%, transparent);
        }
    }
}

.qp-input,
.qp-select {
    height: 34px;
    padding-inline: var(--qp-space-3);
}

.qp-input[data-size="sm"],
.qp-select[data-size="sm"] {
    height: 28px;
    padding-inline: var(--qp-space-2);
    font-size: var(--qp-text-xs);
}

.qp-input[data-size="lg"] {
    height: 40px;
    font-size: var(--qp-text-md);
}

.qp-textarea {
    padding: var(--qp-space-2) var(--qp-space-3);
    min-height: 88px;
    resize: vertical;
    line-height: var(--qp-leading-normal);
}

.qp-input--mono {
    font-family: var(--qp-font-mono);
}

/* wrapper that hosts leading/trailing adornments */
.qp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;

    & > .qp-input {
        padding-inline-start: calc(var(--qp-space-3) + var(--_lead, 0px));
        padding-inline-end: calc(var(--qp-space-3) + var(--_trail, 0px));
    }

    &:has(.qp-input-wrap__lead) {
        --_lead: 20px;
    }

    &:has(.qp-input-wrap__trail) {
        --_trail: 22px;
    }
}

.qp-input-wrap__lead,
.qp-input-wrap__trail {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--qp-text-faint);
    pointer-events: none;
}

.qp-input-wrap__lead {
    inset-inline-start: var(--qp-space-3);
}

.qp-input-wrap__trail {
    inset-inline-end: var(--qp-space-3);
    pointer-events: auto;
}

.qp-select {
    appearance: none;
    padding-inline-end: var(--qp-space-8);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* ------------------------------------------------------------ Checkbox ---- */
.qp-checkbox,
.qp-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--qp-space-2);
    cursor: pointer;
    font-size: var(--qp-text-sm);
    line-height: 18px;

    &:has(input:disabled) {
        cursor: not-allowed;
        color: var(--qp-text-faint);
    }
}

.qp-checkbox__box,
.qp-radio__dot {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid var(--qp-border-strong);
    background: var(--qp-field-bg);
    transition: background-color var(--qp-duration-fast) var(--qp-ease),
        border-color var(--qp-duration-fast) var(--qp-ease);
    color: var(--qp-text-on-accent);
}

.qp-checkbox__box {
    border-radius: var(--qp-radius-xs);
}

.qp-radio__dot {
    border-radius: var(--qp-radius-full);
}

/* The native input keeps the size of the control it drives and sits invisibly on top of it.
   A zero-sized, pointer-events:none input is drawn correctly but cannot be reached: Playwright's
   .check() has to be forced or aimed at the label, and some assistive technology cannot target it
   either. Full-size and transparent leaves a real hit target without changing a pixel of what is
   drawn — and the whole row stays clickable, because every one of these controls is a <label>. */
.qp-checkbox,
.qp-radio,
.qp-switch {
    position: relative;
}

.qp-checkbox input,
.qp-radio input,
.qp-switch input {
    position: absolute;
    margin: 0;
    opacity: 0;
    cursor: inherit;
    z-index: 1;
}

.qp-checkbox input,
.qp-radio input {
    inset-block-start: 1px;
    inset-inline-start: 0;
    width: 16px;
    height: 16px;
}

.qp-switch input {
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    width: 34px;
    height: 20px;
}

.qp-checkbox:hover input:not(:disabled) + .qp-checkbox__box,
.qp-radio:hover input:not(:disabled) + .qp-radio__dot {
    border-color: var(--qp-accent);
}

.qp-checkbox input:checked + .qp-checkbox__box,
.qp-checkbox__box[data-indeterminate="true"],
.qp-radio input:checked + .qp-radio__dot {
    background: var(--qp-accent);
    border-color: var(--qp-accent);
}

.qp-radio input:checked + .qp-radio__dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-text-on-accent);
}

.qp-checkbox input:focus-visible + .qp-checkbox__box,
.qp-radio input:focus-visible + .qp-radio__dot,
.qp-switch input:focus-visible + .qp-switch__track {
    outline: 2px solid var(--qp-focus-ring);
    outline-offset: 2px;
}

/* Disabled and OFF: a flat, sunken box.
   This used to be written as `input:disabled + …` with no regard for the checked state. It has the
   same specificity as the `:checked` rule above and comes later, so it won it — a checked, disabled
   checkbox was painted with the empty background and then given a white tick on top of it, which is
   invisible. Every browser on a published suite's Execution tab read as "none selected" while the
   data underneath was correct. A disabled control still has to report its value. */
.qp-checkbox input:disabled:not(:checked) + .qp-checkbox__box:not([data-indeterminate="true"]),
.qp-radio input:disabled:not(:checked) + .qp-radio__dot {
    background: var(--qp-surface-sunken);
    border-color: var(--qp-border);
}

/* Disabled and ON: still unmistakably on, just muted enough to read as unavailable. */
.qp-checkbox input:disabled:checked + .qp-checkbox__box,
.qp-checkbox input:disabled + .qp-checkbox__box[data-indeterminate="true"],
.qp-radio input:disabled:checked + .qp-radio__dot {
    background: color-mix(in oklab, var(--qp-accent) 42%, var(--qp-surface-sunken));
    border-color: color-mix(in oklab, var(--qp-accent) 42%, var(--qp-surface-sunken));
}

.qp-checkbox__mark {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--qp-duration-fast) var(--qp-ease), transform var(--qp-duration-fast) var(--qp-ease);
}

.qp-checkbox input:checked + .qp-checkbox__box .qp-checkbox__mark,
.qp-checkbox__box[data-indeterminate="true"] .qp-checkbox__mark {
    opacity: 1;
    transform: scale(1);
}

.qp-choice__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qp-choice__desc {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

/* Carries the aria-describedby id for a QpRadioGroup DescriptionTemplate without joining the layout,
   so the caller's lines stack in the option's text column exactly as written. */
.qp-choice__slot {
    display: contents;
}

/* -------------------------------------------------------------- Switch ---- */
.qp-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-3);
    cursor: pointer;
    font-size: var(--qp-text-sm);

    &:has(input:disabled) {
        cursor: not-allowed;
        opacity: 0.6;
    }
}

.qp-switch__track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-border-strong);
    transition: background-color var(--qp-duration-base) var(--qp-ease);
}

.qp-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--qp-radius-full);
    background: #fff;
    box-shadow: var(--qp-shadow-1);
    transition: transform var(--qp-duration-base) var(--qp-ease);
}

.qp-switch input:checked + .qp-switch__track {
    background: var(--qp-accent);
}

.qp-switch input:checked + .qp-switch__track .qp-switch__thumb {
    transform: translateX(14px);
}

/* --------------------------------------------------------- Radio group ---- */
.qp-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-3);

    &[data-orientation="horizontal"] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--qp-space-5);
    }
}

/* --------------------------------------------------- Segmented control ---- */
.qp-segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--qp-surface-sunken);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-sm);
}

.qp-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 26px;
    padding-inline: var(--qp-space-3);
    border-radius: var(--qp-radius-xs);
    font-size: var(--qp-text-xs);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-muted);
    transition: background-color var(--qp-duration-fast) var(--qp-ease), color var(--qp-duration-fast) var(--qp-ease);

    &:hover:not([aria-checked="true"]) {
        color: var(--qp-text);
    }

    &[aria-checked="true"] {
        background: var(--qp-surface);
        color: var(--qp-text-strong);
        box-shadow: var(--qp-shadow-1);
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: 1px;
    }
}

/* --------------------------------------------------------------- Badge ---- */
.qp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 20px;
    padding-inline: var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    border: 1px solid var(--qp-neutral-border);
    background: var(--qp-neutral-bg);
    color: var(--qp-neutral);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-medium);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.qp-badge[data-tone="accent"] {
    border-color: var(--qp-accent-border);
    background: var(--qp-accent-subtle);
    color: var(--qp-accent-text);
}

.qp-badge[data-tone="success"] {
    border-color: var(--qp-pass-border);
    background: var(--qp-pass-bg);
    color: var(--qp-pass);
}

.qp-badge[data-tone="danger"] {
    border-color: var(--qp-fail-border);
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
}

.qp-badge[data-tone="warning"] {
    border-color: var(--qp-warn-border);
    background: var(--qp-warn-bg);
    color: var(--qp-warn);
}

.qp-badge[data-tone="info"] {
    border-color: var(--qp-info-border);
    background: var(--qp-info-bg);
    color: var(--qp-info);
}

.qp-badge[data-tone="production"] {
    border-color: var(--qp-prod-border);
    background: var(--qp-prod-bg);
    color: var(--qp-prod);
}

.qp-badge[data-size="sm"] {
    height: 16px;
    padding-inline: 5px;
    font-size: var(--qp-text-3xs);
}

/* count badge (nav, bell) */
.qp-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-accent);
    color: var(--qp-text-on-accent);
    font-size: var(--qp-text-3xs);
    font-weight: var(--qp-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.qp-count[data-tone="danger"] {
    background: var(--qp-fail);
    color: #fff;
}

.qp-count[data-tone="quiet"] {
    background: var(--qp-neutral-bg);
    color: var(--qp-text-muted);
}

/* ---------------------------------------------------------- Status pill --- */
.qp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding-inline: var(--qp-space-2) var(--qp-space-2);
    border-radius: var(--qp-radius-full);
    border: 1px solid var(--qp-neutral-border);
    background: var(--qp-neutral-bg);
    color: var(--qp-neutral);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-medium);
    white-space: nowrap;
}

.qp-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--qp-radius-full);
    background: currentColor;
    flex: none;
}

.qp-pill[data-size="sm"] {
    height: 18px;
    font-size: var(--qp-text-3xs);
    padding-inline: 6px;
    gap: 4px;
}

.qp-pill[data-tone="success"] {
    border-color: var(--qp-pass-border);
    background: var(--qp-pass-bg);
    color: var(--qp-pass);
}

.qp-pill[data-tone="danger"] {
    border-color: var(--qp-fail-border);
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
}

.qp-pill[data-tone="warning"] {
    border-color: var(--qp-warn-border);
    background: var(--qp-warn-bg);
    color: var(--qp-warn);
}

.qp-pill[data-tone="info"] {
    border-color: var(--qp-info-border);
    background: var(--qp-info-bg);
    color: var(--qp-info);
}

.qp-pill[data-tone="accent"] {
    border-color: var(--qp-accent-border);
    background: var(--qp-accent-subtle);
    color: var(--qp-accent-text);
}

.qp-pill[data-tone="production"] {
    border-color: var(--qp-prod-border);
    background: var(--qp-prod-bg);
    color: var(--qp-prod);
}

/* Running: a slow, calm pulse — never a spinner in a list. */
.qp-pill[data-live="true"] .qp-pill__dot {
    animation: qp-pulse 1.6s var(--qp-ease) infinite;
}

@keyframes qp-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 0%, transparent);
    }
}

/* ----------------------------------------------------------------- Tag ---- */
.qp-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 20px;
    padding-inline: var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    background: var(--qp-surface-sunken);
    border: 1px solid var(--qp-border-subtle);
    color: var(--qp-text-muted);
    font-size: var(--qp-text-2xs);
    font-family: var(--qp-font-mono);
    white-space: nowrap;
}

.qp-tag__swatch {
    width: 6px;
    height: 6px;
    border-radius: var(--qp-radius-full);
}

.qp-tag__remove {
    display: grid;
    place-items: center;
    margin-inline-end: -3px;
    border-radius: var(--qp-radius-xs);
    color: var(--qp-text-faint);

    &:hover {
        color: var(--qp-text);
        background: var(--qp-surface-hover);
    }
}

/* -------------------------------------------------------------- Avatar ---- */
.qp-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-accent);

    /* Not #fff. An avatar with no stored colour falls back to the accent, and the dark theme's accent is
       the *light* iris — white initials measured 2.86:1 on it and disappeared. --qp-text-on-accent is the
       ink each theme already pairs with its own accent (5.37:1 light, 6.74:1 dark); a coloured avatar
       takes the same decision at runtime in AvatarPalette.InkFor. */
    color: var(--qp-text-on-accent);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: 0.02em;
    user-select: none;
    overflow: hidden;
}

/* The small avatar's initials were 10px at semibold — two letters at that size read as a smudge even
   at full contrast, and this is the size used in tables and avatar stacks, where the initials are the
   only identifier. 11px bold, with the letter-spacing eased so the pair does not touch. */
.qp-avatar[data-size="sm"] {
    width: 22px;
    height: 22px;
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-bold);
    letter-spacing: 0;
}

.qp-avatar[data-size="lg"] {
    width: 36px;
    height: 36px;
    font-size: var(--qp-text-sm);
}

.qp-avatar[data-size="xl"] {
    width: 56px;
    height: 56px;
    font-size: var(--qp-text-lg);
}

.qp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qp-avatar-stack {
    display: inline-flex;

    & > .qp-avatar + .qp-avatar {
        margin-inline-start: -8px;
        box-shadow: 0 0 0 2px var(--qp-surface);
    }
}

/* ---------------------------------------------------------------- Tabs ---- */
.qp-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qp-tabs__list {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--qp-space-1);
    border-bottom: 1px solid var(--qp-border-subtle);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.qp-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-2);
    height: 36px;
    padding-inline: var(--qp-space-3);
    color: var(--qp-text-muted);
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    white-space: nowrap;
    border-radius: var(--qp-radius-xs) var(--qp-radius-xs) 0 0;
    transition: color var(--qp-duration-fast) var(--qp-ease), background-color var(--qp-duration-fast) var(--qp-ease);

    &::after {
        content: "";
        position: absolute;
        inset-inline: var(--qp-space-2);
        bottom: -1px;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: transparent;
        transition: background-color var(--qp-duration-base) var(--qp-ease);
    }

    &:hover:not([aria-selected="true"]):not(:disabled) {
        color: var(--qp-text);
    }

    &[aria-selected="true"] {
        color: var(--qp-text-strong);

        &::after {
            background: var(--qp-accent);
        }
    }

    &:disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: -2px;
    }
}

.qp-tabs__panel {
    padding-top: var(--qp-space-6);
    min-width: 0;
}

/* --------------------------------------------------------------- Table ---- */
.qp-table-wrap {
    position: relative;
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
    background: var(--qp-surface);
    overflow: hidden;
}

.qp-table-scroll {
    overflow: auto;
    max-height: var(--qp-table-max-height, none);

    /* A table wider than its pane scrolls sideways rather than clipping its last column. The mask fades
       the edge that has more content, so it is visible that something is off-screen — scrollbars are
       overlaid and invisible until touched on most platforms, and a hard cut reads as a layout bug.
       `scroll-timeline`-free: `animation-timeline: scroll()` drives it with no script. */
    animation: qp-table-edges linear;
    animation-timeline: scroll(self inline);
}

@keyframes qp-table-edges {
    /* Only the right edge fades while there is content to the right… */
    0% {
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
    }

    /* …both edges in the middle… */
    1%,
    99% {
        mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
    }

    /* …and only the left edge once the end is reached. */
    100% {
        mask-image: linear-gradient(to right, transparent 0, #000 2.5rem);
    }
}

/* A mask on a sticky header is a containing block, which would unstick it, and animation-timeline is
   not everywhere yet. Both degrade to an ordinary scroll, which is correct, just less legible. */
@supports not (animation-timeline: scroll(self inline)) {
    .qp-table-scroll {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qp-table-scroll {
        animation: none;
    }
}

.qp-table {
    width: 100%;
    font-size: var(--qp-text-sm);
}

.qp-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--qp-z-sticky);
    background: var(--qp-surface);
    text-align: start;
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-subtle);
    font-size: var(--qp-text-xs);
    white-space: nowrap;
    padding: 0;
    border-bottom: 1px solid var(--qp-border-subtle);
    box-shadow: inset 0 -1px 0 var(--qp-border-subtle);
}

.qp-table th[data-align="end"],
.qp-table td[data-align="end"] {
    text-align: end;
}

.qp-table th[data-align="center"],
.qp-table td[data-align="center"] {
    text-align: center;
}

.qp-table__head-inner {
    display: flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 38px;
    padding-inline: var(--qp-space-4);
}

.qp-table th[data-align="end"] .qp-table__head-inner {
    justify-content: flex-end;
}

.qp-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 38px;
    width: 100%;
    padding-inline: var(--qp-space-4);
    color: inherit;
    font: inherit;
    transition: color var(--qp-duration-fast) var(--qp-ease), background-color var(--qp-duration-fast) var(--qp-ease);

    &:hover {
        color: var(--qp-text);
        background: var(--qp-surface-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: -2px;
    }
}

.qp-table th[data-align="end"] .qp-table__sort {
    justify-content: flex-end;
}

.qp-table__sort-icon {
    opacity: 0;
    color: var(--qp-text-faint);
    transition: opacity var(--qp-duration-fast) var(--qp-ease);
}

.qp-table__sort:hover .qp-table__sort-icon {
    opacity: 0.6;
}

.qp-table th[aria-sort]:not([aria-sort="none"]) {
    color: var(--qp-text);
}

.qp-table th[aria-sort]:not([aria-sort="none"]) .qp-table__sort-icon {
    opacity: 1;
    color: var(--qp-accent);
}

.qp-table tbody td {
    padding: 0 var(--qp-space-4);
    height: 44px;
    border-bottom: 1px solid var(--qp-border-subtle);
    color: var(--qp-text);
    vertical-align: middle;
}

.qp-table tbody tr:last-child td {
    border-bottom: 0;
}

.qp-table tbody tr {
    transition: background-color var(--qp-duration-fast) var(--qp-ease);
}

.qp-table[data-interactive="true"] tbody tr {
    cursor: pointer;
}

.qp-table tbody tr:hover:not([data-empty]) {
    background: var(--qp-surface-hover);
}

.qp-table tbody tr[data-selected="true"] {
    background: var(--qp-surface-selected);
}

.qp-table tbody tr:focus-visible {
    outline: 2px solid var(--qp-focus-ring);
    outline-offset: -2px;
}

.qp-table[data-density="compact"] tbody td {
    height: 36px;
}

.qp-table__cell-primary {
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
}

.qp-table__cell-muted {
    color: var(--qp-text-muted);
}

.qp-table__empty-cell {
    padding: 0 !important;
    height: auto !important;
}

.qp-table__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--qp-space-1);
    opacity: 0;
    transition: opacity var(--qp-duration-fast) var(--qp-ease);
}

.qp-table tbody tr:hover .qp-table__actions,
.qp-table tbody tr:focus-within .qp-table__actions {
    opacity: 1;
}

/* ---------------------------------------------------------- Pagination ---- */
.qp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qp-space-4);
    padding: var(--qp-space-3) var(--qp-space-1);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    flex-wrap: wrap;
}

.qp-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--qp-space-1);
}

.qp-pagination__page {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding-inline: var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    font-size: var(--qp-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--qp-text-muted);

    &:hover:not(:disabled):not([aria-current="page"]) {
        background: var(--qp-surface-hover);
        color: var(--qp-text);
    }

    &[aria-current="page"] {
        background: var(--qp-surface-selected);
        color: var(--qp-accent-text);
        font-weight: var(--qp-weight-medium);
    }

    &:disabled {
        opacity: 0.35;
        pointer-events: none;
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: 1px;
    }
}

.qp-pagination__ellipsis {
    padding-inline: var(--qp-space-1);
    color: var(--qp-text-faint);
}

/* ---------------------------------------------------- Scrim / overlays ---- */
.qp-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--qp-z-scrim);
    background: var(--qp-scrim);
    backdrop-filter: blur(2px);
    animation: qp-fade-in var(--qp-duration-base) var(--qp-ease);
}

@keyframes qp-fade-in {
    from {
        opacity: 0;
    }
}

/* -------------------------------------------------------------- Drawer ---- */
.qp-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--qp-z-drawer);
    display: flex;
    flex-direction: column;
    width: min(var(--qp-drawer-width, 520px), 100vw);
    background: var(--qp-surface);
    border-inline-start: 1px solid var(--qp-border);
    box-shadow: var(--qp-shadow-3);
    animation: qp-slide-in var(--qp-duration-slow) var(--qp-ease-out);
}

.qp-drawer[data-side="start"] {
    inset-inline: 0 auto;
    border-inline: 0 1px solid var(--qp-border);
    animation-name: qp-slide-in-start;
}

@keyframes qp-slide-in {
    from {
        transform: translateX(16px);
        opacity: 0;
    }
}

@keyframes qp-slide-in-start {
    from {
        transform: translateX(-16px);
        opacity: 0;
    }
}

.qp-drawer__header,
.qp-dialog__header {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-4);
    padding: var(--qp-space-5) var(--qp-space-6);
    border-bottom: 1px solid var(--qp-border-subtle);
}

.qp-drawer__titles,
.qp-dialog__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.qp-drawer__title,
.qp-dialog__title {
    font-size: var(--qp-text-lg);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tight);
    color: var(--qp-text-strong);
}

.qp-drawer__subtitle,
.qp-dialog__subtitle {
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
}

.qp-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--qp-space-6);
}

/* Two actions is the common case and one line is the right shape for it, but a footer that assumes
   two clips the third: the dialog is 440px wide and hides its overflow, so a third button pushed the
   first one's label under the left edge. Wrapping costs nothing when everything fits and is the only
   honest answer when it does not — a label the user cannot read is not a choice they can make. */
.qp-drawer__footer,
.qp-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--qp-space-2);
    padding: var(--qp-space-4) var(--qp-space-6);
    border-top: 1px solid var(--qp-border-subtle);
    background: var(--qp-surface);
}

/* A tooltip wrapping a disabled action is the action, as far as the footer's layout is concerned. */
.qp-drawer__footer > .qp-tooltip-trigger,
.qp-dialog__footer > .qp-tooltip-trigger {
    display: inline-flex;
    max-width: 100%;
}

/* Narrower than this there is no row left to wrap into: three buttons and two gaps need more than a
   small phone has. A stack of full-width buttons, in the order they are written, reads better than
   three stubs and gives each one a full-width target. The spacers that push a row to the right have
   nothing to push in a column, so they stop taking up height. */
@media (max-width: 480px) {
    .qp-drawer__footer,
    .qp-dialog__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .qp-drawer__footer > .qp-spacer,
    .qp-dialog__footer > .qp-spacer {
        display: none;
    }

    .qp-drawer__footer .qp-btn,
    .qp-dialog__footer .qp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------------- Dialog ---- */
.qp-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: var(--qp-z-dialog);
    display: grid;
    place-items: center;
    padding: var(--qp-space-6);
    pointer-events: none;
}

.qp-dialog {
    pointer-events: auto;
    width: min(440px, 100%);
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-xl);
    box-shadow: var(--qp-shadow-3);
    animation: qp-pop-in var(--qp-duration-slow) var(--qp-ease-out);
    overflow: hidden;
}

@keyframes qp-pop-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
}

.qp-dialog__body {
    padding: var(--qp-space-5) var(--qp-space-6) var(--qp-space-6);
    display: flex;
    gap: var(--qp-space-4);
}

.qp-dialog__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-neutral-bg);
    color: var(--qp-neutral);
}

.qp-dialog[data-tone="danger"] .qp-dialog__icon {
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
}

.qp-dialog[data-tone="production"] .qp-dialog__icon {
    background: var(--qp-prod-bg);
    color: var(--qp-prod);
}

.qp-dialog__text {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-2);
    min-width: 0;
}

.qp-dialog__message {
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
    line-height: var(--qp-leading-normal);
}

/* --------------------------------------------------------------- Toast ---- */
.qp-toast-host {
    position: fixed;
    inset-block-end: var(--qp-space-5);
    inset-inline-end: var(--qp-space-5);
    z-index: var(--qp-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--qp-space-2);
    width: min(380px, calc(100vw - 2 * var(--qp-space-5)));
    pointer-events: none;
}

.qp-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-3);
    padding: var(--qp-space-3) var(--qp-space-3) var(--qp-space-3) var(--qp-space-4);
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-lg);
    box-shadow: var(--qp-shadow-3);
    animation: qp-toast-in var(--qp-duration-slow) var(--qp-ease-out);
}

@keyframes qp-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

.qp-toast__icon {
    margin-top: 1px;
    color: var(--qp-neutral);
}

.qp-toast[data-variant="success"] .qp-toast__icon {
    color: var(--qp-pass);
}

.qp-toast[data-variant="error"] .qp-toast__icon {
    color: var(--qp-fail);
}

.qp-toast[data-variant="warning"] .qp-toast__icon {
    color: var(--qp-warn);
}

.qp-toast[data-variant="info"] .qp-toast__icon {
    color: var(--qp-info);
}

.qp-toast__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qp-toast__title {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
}

.qp-toast__desc {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    line-height: var(--qp-leading-snug);
}

/* ------------------------------------------------------------- Tooltip ---- */
.qp-tooltip {
    position: fixed;
    z-index: var(--qp-z-tooltip);
    max-width: 260px;
    padding: 5px var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    background: var(--qp-ink-900);
    color: var(--qp-ink-50);
    font-size: var(--qp-text-xs);
    line-height: var(--qp-leading-snug);
    box-shadow: var(--qp-shadow-2);
    pointer-events: none;
    animation: qp-fade-in var(--qp-duration-fast) var(--qp-ease);
}

:root[data-theme="dark"] .qp-tooltip {
    background: var(--qp-ink-200);
    color: var(--qp-ink-950);
}

.qp-tooltip__hint {
    opacity: 0.6;
    margin-inline-start: var(--qp-space-2);
}

.qp-tooltip-trigger {
    display: inline-flex;
    min-width: 0;
}

/* ---------------------------------------------------------------- Menu ---- */
.qp-menu-root {
    display: inline-flex;
    min-width: 0;
}

.qp-menu {
    position: fixed;
    z-index: var(--qp-z-popover);
    min-width: 180px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    padding: var(--qp-space-1);
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-md);
    box-shadow: var(--qp-shadow-3);
    animation: qp-menu-in var(--qp-duration-fast) var(--qp-ease-out);
}

@keyframes qp-menu-in {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(0.985);
    }
}

.qp-menu__item {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    width: 100%;
    height: 30px;
    padding-inline: var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    color: var(--qp-text);
    font-size: var(--qp-text-sm);
    text-align: start;
    white-space: nowrap;

    &:hover:not([aria-disabled="true"]),
    &[data-active="true"] {
        background: var(--qp-surface-hover);
    }

    &[aria-disabled="true"] {
        color: var(--qp-text-faint);
        pointer-events: none;
    }

    &[data-tone="danger"] {
        color: var(--qp-fail);

        &:hover,
        &[data-active="true"] {
            background: var(--qp-fail-bg);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--qp-focus-ring);
        outline-offset: -2px;
    }
}

.qp-menu__icon {
    color: var(--qp-text-faint);
}

.qp-menu__item:hover .qp-menu__icon,
.qp-menu__item[data-active="true"] .qp-menu__icon {
    color: inherit;
}

.qp-menu__shortcut {
    margin-inline-start: auto;
    color: var(--qp-text-faint);
    font-size: var(--qp-text-2xs);
    font-family: var(--qp-font-mono);
}

/* ── QpColumn HideBelow ───────────────────────────────────────────────────────
   A wide table degrades by shedding its secondary columns rather than clipping
   the ones on the right. The breakpoints are a fixed set so a page cannot invent
   one that no stylesheet honours; QpColumn documents the supported values. */
@media (max-width: 1299px) {
    .qp-table th[data-hide-below="1300"],
    .qp-table td[data-hide-below="1300"] { display: none; }
    .qp-table col[data-hide-below="1300"] { width: 0; }
}

@media (max-width: 1099px) {
    .qp-table th[data-hide-below="1100"],
    .qp-table td[data-hide-below="1100"] { display: none; }
    .qp-table col[data-hide-below="1100"] { width: 0; }
}

@media (max-width: 899px) {
    .qp-table th[data-hide-below="900"],
    .qp-table td[data-hide-below="900"] { display: none; }
    .qp-table col[data-hide-below="900"] { width: 0; }
}

@media (max-width: 699px) {
    .qp-table th[data-hide-below="700"],
    .qp-table td[data-hide-below="700"] { display: none; }
    .qp-table col[data-hide-below="700"] { width: 0; }
}

/* ── QpFilterChip ─────────────────────────────────────────────────────────────────────────────────
   A toolbar filter that reads as inactive until it is filtering. The active treatment is deliberate:
   "why am I seeing so little?" has to be answerable without opening every control. */

.qp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    height: 30px;
    padding: 0 var(--qp-space-3);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-full);
    background: var(--qp-surface);
    color: var(--qp-text);
    font-family: inherit;
    font-size: var(--qp-text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--qp-duration-fast) var(--qp-ease), border-color var(--qp-duration-fast) var(--qp-ease);
}

.qp-filter-chip:hover:not(:disabled) {
    background: var(--qp-surface-hover);
}

.qp-filter-chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.qp-filter-chip[data-active="true"],
.qp-filter-chip[data-active="true"]:hover {
    border-color: var(--qp-accent-border);
    background: var(--qp-accent-subtle);
    color: var(--qp-accent-text);
}

.qp-filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--qp-space-1);
    border-radius: var(--qp-radius-full);
    background: var(--qp-accent);
    color: var(--qp-text-on-accent);
    font-size: var(--qp-text-2xs);
    font-variant-numeric: tabular-nums;
}

.qp-filter-chip__panel {
    padding: var(--qp-space-2);
}

.qp-filter-chip__options {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-1);
    max-height: 320px;
    overflow-y: auto;
}

.qp-filter-chip__option {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    width: 100%;
    min-width: 0;
    padding: var(--qp-space-2);
    border: 0;
    border-radius: var(--qp-radius-sm);
    background: transparent;
    color: var(--qp-text);
    font: inherit;
    font-size: var(--qp-text-sm);
    text-align: start;
    cursor: pointer;
}

.qp-filter-chip__option:hover:not(:disabled) {
    background: var(--qp-surface-hover);
}

.qp-filter-chip__option[aria-pressed="true"] {
    color: var(--qp-accent-text);
}

.qp-filter-chip__option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* QpColumn Truncate. A table cell is sized by its content's minimum width, so one greedy cell — a long
   unbroken name, a row of pills — sets the table's minimum and pushes the columns on its right past the
   edge of the surface, where they are cut off entirely. max-width:0 is what lets a cell give way instead;
   the column's own width keeps it from collapsing. */
.qp-table td[data-truncate] {
    max-width: 0;
    overflow: hidden;
}

/* A menu item with a Description: two lines that wrap, so the row must grow instead of staying 30px. */
.qp-menu__item:has(.qp-menu__text) {
    height: auto;
    align-items: flex-start;
    padding-block: var(--qp-space-2);
    white-space: normal;
}

.qp-menu__item:has(.qp-menu__text) .qp-menu__icon { margin-top: 2px; }

.qp-menu__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.qp-menu__title {
    color: var(--qp-text);
    font-size: var(--qp-text-sm);
}

.qp-menu__description {
    color: var(--qp-text-faint);
    font-size: var(--qp-text-xs);
    line-height: var(--qp-leading-snug);
}

.qp-menu__label {
    padding: var(--qp-space-2) var(--qp-space-2) var(--qp-space-1);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-caps);
    text-transform: uppercase;
    color: var(--qp-text-faint);
}

.qp-menu__separator {
    height: 1px;
    margin: var(--qp-space-1) calc(-1 * var(--qp-space-1));
    background: var(--qp-border-subtle);
}

/* ------------------------------------------------------------ Combobox ---- */
.qp-combobox {
    position: relative;
    min-width: 0;
}

.qp-combobox__list {
    position: fixed;
    z-index: var(--qp-z-popover);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--qp-space-1);
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-md);
    box-shadow: var(--qp-shadow-3);
}

.qp-combobox__option {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    height: 30px;
    padding-inline: var(--qp-space-2);
    border-radius: var(--qp-radius-xs);
    font-size: var(--qp-text-sm);
    cursor: pointer;

    &[data-active="true"] {
        background: var(--qp-surface-hover);
    }

    &[aria-selected="true"] {
        color: var(--qp-accent-text);
        font-weight: var(--qp-weight-medium);
    }
}

.qp-combobox__check {
    margin-inline-start: auto;
    color: var(--qp-accent);
}

.qp-combobox__empty {
    padding: var(--qp-space-3);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    text-align: center;
}

/* ---------------------------------------------------- Breadcrumb / Kbd ---- */
.qp-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--qp-space-1);
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
    min-width: 0;
}

.qp-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
    padding-inline: var(--qp-space-1);
    border-radius: var(--qp-radius-xs);
    color: inherit;

    &:hover {
        color: var(--qp-text);
        text-decoration: none;
    }
}

.qp-breadcrumb__item[aria-current="page"] {
    color: var(--qp-text-strong);
    font-weight: var(--qp-weight-medium);
}

.qp-breadcrumb__sep {
    color: var(--qp-text-faint);
    flex: none;
}

.qp-kbd {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--qp-radius-xs);
    border: 1px solid var(--qp-border);
    background: var(--qp-surface-sunken);
    color: var(--qp-text-subtle);
    font-family: var(--qp-font-sans);
    font-size: var(--qp-text-3xs);
    font-weight: var(--qp-weight-medium);
    line-height: 1;
}

/* --------------------------------------------------------- Empty state ---- */
.qp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-16) var(--qp-space-6);
    max-width: 420px;
    margin-inline: auto;
}

.qp-empty[data-size="sm"] {
    padding: var(--qp-space-10) var(--qp-space-6);
}

.qp-empty__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--qp-radius-lg);
    background: var(--qp-surface-sunken);
    border: 1px solid var(--qp-border-subtle);
    color: var(--qp-text-faint);
    margin-bottom: var(--qp-space-1);
}

/* The title may render as p, h1 or h2 (QpEmptyState.TitleAs); it looks the same either way, so the
   heading levels have to be reset out of their default size and margin. */
.qp-empty__title {
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    color: var(--qp-text-strong);
    margin: 0;
    letter-spacing: normal;
    line-height: var(--qp-leading-snug);
}

.qp-empty__desc {
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
    line-height: var(--qp-leading-normal);
}

.qp-empty__actions {
    display: flex;
    gap: var(--qp-space-2);
    margin-top: var(--qp-space-2);
}

/* ------------------------------------------------------------ Skeleton ---- */
.qp-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--qp-skeleton) 25%, var(--qp-skeleton-shine) 37%, var(--qp-skeleton) 63%);
    background-size: 400% 100%;
    border-radius: var(--qp-radius-xs);
    animation: qp-shimmer 1.4s ease-in-out infinite;
}

.qp-skeleton[data-shape="circle"] {
    border-radius: var(--qp-radius-full);
}

.qp-skeleton[data-shape="text"] {
    height: 0.75em;
    margin-block: 0.19em;
    border-radius: var(--qp-radius-full);
}

@keyframes qp-shimmer {
    from {
        background-position: 100% 50%;
    }

    to {
        background-position: 0 50%;
    }
}

/* ---------------------------------------------------------------- Card ---- */
.qp-card {
    background: var(--qp-surface);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
    padding: var(--qp-space-5);
    min-width: 0;
}

.qp-card[data-padding="none"] {
    padding: 0;
}

.qp-card[data-interactive="true"] {
    transition: border-color var(--qp-duration-fast) var(--qp-ease), box-shadow var(--qp-duration-fast) var(--qp-ease);

    &:hover {
        border-color: var(--qp-border-strong);
        box-shadow: var(--qp-shadow-2);
    }
}

.qp-card__header {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    margin-bottom: var(--qp-space-4);
}

.qp-card__title {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-semibold);
    color: var(--qp-text-strong);
}

/* ------------------------------------------------------------ StatTile ---- */
.qp-stat {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-2);
    padding: var(--qp-space-4) var(--qp-space-5);
    min-width: 0;
}

.qp-stat__label {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-stat__value {
    font-size: var(--qp-text-2xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tighter);
    color: var(--qp-text-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.qp-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-stat__delta[data-tone="up"] {
    color: var(--qp-pass);
}

.qp-stat__delta[data-tone="down"] {
    color: var(--qp-fail);
}

.qp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    background: var(--qp-surface);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
    overflow: hidden;

    & > .qp-stat + .qp-stat {
        box-shadow: inset 1px 0 0 var(--qp-border-subtle);
    }
}

/* ----------------------------------------------------------- PageHeader --- */
.qp-page-header {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-6);
    flex-wrap: wrap;
    padding-bottom: var(--qp-space-6);
}

.qp-page-header__main {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-2);
    min-width: 0;
    /* Below ~320px of title space the actions wrap to their own line instead of
       squeezing the title into a column of single words. */
    flex: 1 1 320px;
}

.qp-page-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.qp-page-header__title {
    font-size: var(--qp-text-2xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tighter);
    color: var(--qp-text-strong);
    line-height: 1.2;
}

.qp-page-header__subtitle {
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
    max-width: 68ch;
    line-height: var(--qp-leading-normal);
}

.qp-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------ Toolbar ----- */
.qp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    flex-wrap: wrap;
    padding-bottom: var(--qp-space-4);
}

.qp-toolbar__search {
    width: min(280px, 100%);
}

/* Controls in a toolbar size to their content, not to the row. */
.qp-toolbar > .qp-select,
.qp-toolbar > .qp-input,
.qp-toolbar > .qp-combobox {
    width: auto;
    min-width: 150px;
}

.qp-toolbar__divider {
    width: 1px;
    height: 20px;
    background: var(--qp-border);
    margin-inline: var(--qp-space-1);
}

/* ---------------------------------------------------------- Split pane ---- */
.qp-split {
    display: grid;
    gap: var(--qp-space-8);
    grid-template-columns: minmax(0, 1fr) var(--qp-split-aside, 300px);
    align-items: start;
}

.qp-split[data-side="start"] {
    grid-template-columns: var(--qp-split-aside, 300px) minmax(0, 1fr);
}

@container qp-content (max-width: 900px) {
    .qp-split,
    .qp-split[data-side="start"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qp-split__aside {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-5);
    position: sticky;
    top: var(--qp-space-6);
}

.qp-meta {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-3);
}

.qp-meta__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--qp-space-3);
    align-items: baseline;
    font-size: var(--qp-text-sm);
}

.qp-meta__key {
    color: var(--qp-text-subtle);
    font-size: var(--qp-text-xs);
}

.qp-meta__value {
    color: var(--qp-text);
    min-width: 0;
}

/* ----------------------------------------------------------- DiffBadge ---- */
.qp-diff {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-medium);
    font-variant-numeric: tabular-nums;
}

.qp-diff__part {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.qp-diff__part[data-kind="added"] {
    color: var(--qp-pass);
}

.qp-diff__part[data-kind="removed"] {
    color: var(--qp-fail);
}

.qp-diff__part[data-kind="changed"] {
    color: var(--qp-warn);
}

.qp-diff__part[data-zero="true"] {
    color: var(--qp-text-faint);
}

/* ---------------------------------------------------------- LockedHint ---- */
.qp-locked {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--qp-space-2);
    padding: var(--qp-space-2) var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    border: 1px solid var(--qp-neutral-border);
    background: var(--qp-neutral-bg);
    color: var(--qp-text-muted);
    font-size: var(--qp-text-xs);
    line-height: var(--qp-leading-snug);
}

.qp-locked__icon {
    margin-top: 1px;
    flex: none;
}

.qp-locked[data-variant="production"] {
    border-color: var(--qp-prod-border);
    background: var(--qp-prod-bg);
    color: var(--qp-prod);
}

.qp-locked[data-variant="inline"] {
    padding: 0;
    border: 0;
    background: none;
}

.qp-locked strong {
    color: inherit;
    font-weight: var(--qp-weight-semibold);
}

/* -------------------------------------------------------- SaveIndicator --- */
.qp-save {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    transition: color var(--qp-duration-base) var(--qp-ease);
    min-height: 20px;
}

.qp-save[data-state="saved"] {
    color: var(--qp-pass);
}

.qp-save[data-state="failed"] {
    color: var(--qp-fail);
}

.qp-save[data-state="idle"] {
    opacity: 0;
}

/* ------------------------------------------------------ Command palette --- */
.qp-palette-layer {
    position: fixed;
    inset: 0;
    z-index: var(--qp-z-palette);
    display: grid;
    justify-items: center;
    align-content: start;
    padding-block-start: min(14vh, 140px);
    padding-inline: var(--qp-space-4);
    pointer-events: none;
}

.qp-palette {
    pointer-events: auto;
    width: min(620px, 100%);
    max-height: min(520px, 70vh);
    display: flex;
    flex-direction: column;
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-xl);
    box-shadow: var(--qp-shadow-3);
    overflow: hidden;
    animation: qp-pop-in var(--qp-duration-slow) var(--qp-ease-out);
}

.qp-palette__search {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-4) var(--qp-space-5);
    border-bottom: 1px solid var(--qp-border-subtle);
    color: var(--qp-text-faint);
}

.qp-palette__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-size: var(--qp-text-lg);
    color: var(--qp-text);

    &::placeholder {
        color: var(--qp-text-faint);
    }

    &:focus {
        outline: none;
    }
}

.qp-palette__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--qp-space-2);
    scroll-padding-block: var(--qp-space-2);
}

.qp-palette__group {
    padding: var(--qp-space-3) var(--qp-space-3) var(--qp-space-1);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-caps);
    text-transform: uppercase;
    color: var(--qp-text-faint);
}

.qp-palette__item {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    width: 100%;
    padding: var(--qp-space-2) var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    text-align: start;
    color: var(--qp-text);

    &[data-active="true"] {
        background: var(--qp-surface-selected);
    }
}

.qp-palette__item-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--qp-radius-xs);
    background: var(--qp-surface-sunken);
    color: var(--qp-text-muted);
}

.qp-palette__item[data-active="true"] .qp-palette__item-icon {
    background: var(--qp-surface);
    color: var(--qp-accent-text);
}

.qp-palette__item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.qp-palette__item-title {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
}

.qp-palette__item-sub {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-palette__item-meta {
    font-size: var(--qp-text-2xs);
    font-family: var(--qp-font-mono);
    color: var(--qp-text-faint);
    flex: none;
}

.qp-palette__footer {
    display: flex;
    align-items: center;
    gap: var(--qp-space-4);
    padding: var(--qp-space-2) var(--qp-space-4);
    border-top: 1px solid var(--qp-border-subtle);
    background: var(--qp-surface-sunken);
    font-size: var(--qp-text-2xs);
    color: var(--qp-text-subtle);
}

.qp-palette__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-1);
}

/* ------------------------------------------------------------- Spinner ---- */
.qp-spinner {
    display: inline-block;
    color: currentColor;
    animation: qp-spin 700ms linear infinite;
}

/* --------------------------------------------------------- Surfaces ------- */
.qp-panel {
    background: var(--qp-surface);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
}

.qp-section {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-4);
}

.qp-section__title {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-semibold);
    color: var(--qp-text-strong);
    letter-spacing: var(--qp-tracking-tight);
}

.qp-divider {
    height: 1px;
    background: var(--qp-border-subtle);
    border: 0;
}

/* --------------------------------------------------- Definition list ---- */
.qp-dl {
    display: grid;
    gap: var(--qp-space-2) var(--qp-space-4);
    margin: 0;
    font-size: var(--qp-text-sm);
}

.qp-dl__row {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: var(--qp-space-2) var(--qp-space-4);
    align-items: baseline;
}

.qp-dl[data-layout="stacked"] .qp-dl__row {
    grid-template-columns: 1fr;
    gap: 2px;
}

.qp-dl__key {
    color: var(--qp-text-muted);
}

.qp-dl__value {
    margin: 0;
    color: var(--qp-text-strong);
    word-break: break-word;
}

.qp-dl__value[data-tone="muted"] {
    color: var(--qp-text-muted);
}

.qp-dl__empty {
    color: var(--qp-text-faint);
}

/* Beside a narrow aside there is no room for two columns; stack without being asked. */
@media (max-width: 720px) {
    .qp-dl__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ------------------------------------------------------ Reveal once ---- */
.qp-reveal {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-3);
    padding: var(--qp-space-4);
    border: 1px solid var(--qp-warn-border);
    border-radius: var(--qp-radius-lg);
    background: var(--qp-warn-bg);
}

.qp-reveal__head {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
}

.qp-reveal__icon {
    display: inline-flex;
    color: var(--qp-warn);
}

.qp-reveal__title {
    color: var(--qp-text-strong);
}

.qp-reveal__value {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    padding: var(--qp-space-3);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-surface);
}

.qp-reveal__secret {
    flex: 1;
    min-width: 0;
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-sm);
    /* A key has no spaces to break at, and must never be truncated: a half-copied secret is worse
       than an ugly line. */
    word-break: break-all;
}

.qp-reveal__note {
    margin: 0;
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    line-height: var(--qp-leading-relaxed);
}