/* ============================================================================
   QuickPlay — application shell: sidebar, top bar, content frame,
   account pages and status pages. (The reconnect UI is styled in ReconnectModal.razor.css.)
   ========================================================================= */

.qp-app {
    --_sidebar: var(--qp-sidebar-width);

    display: grid;
    grid-template-columns: var(--_sidebar) minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--qp-canvas);
    transition: grid-template-columns var(--qp-duration-slow) var(--qp-ease);
}

.qp-app[data-collapsed="true"] {
    --_sidebar: var(--qp-sidebar-rail);
}

/* ------------------------------------------------------ Skip to content --- */
.qp-skip {
    position: fixed;
    top: var(--qp-space-2);
    left: var(--qp-space-2);
    z-index: var(--qp-z-tooltip);
    transform: translateY(-200%);
    padding: var(--qp-space-2) var(--qp-space-4);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-accent);
    color: var(--qp-text-on-accent);
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    box-shadow: var(--qp-shadow-2);
    transition: transform var(--qp-duration-base) var(--qp-ease);

    &:focus {
        transform: translateY(0);
        text-decoration: none;
    }
}

/* -------------------------------------------------------------- Sidebar --- */
.qp-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--_sidebar);
    z-index: var(--qp-z-sidebar);
    display: flex;
    flex-direction: column;
    background: var(--qp-sidebar-bg);
    border-inline-end: 1px solid var(--qp-border-subtle);
    transition: width var(--qp-duration-slow) var(--qp-ease), transform var(--qp-duration-slow) var(--qp-ease);
}

.qp-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    height: var(--qp-topbar-height);
    padding-inline: var(--qp-space-3);
    flex: none;
}

.qp-brand {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    min-width: 0;
    color: var(--qp-text-strong);
    border-radius: var(--qp-radius-sm);
    padding: var(--qp-space-1);
    margin: calc(-1 * var(--qp-space-1));

    &:hover {
        text-decoration: none;
    }
}

.qp-brand__mark {
    flex: none;
}

.qp-brand__name {
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.qp-sidebar__collapse {
    margin-inline-start: auto;
}

/* ----------------------------------------------------- Product selector --- */
.qp-sidebar__product {
    padding: var(--qp-space-2) var(--qp-space-3) var(--qp-space-3);
    flex: none;
}

.qp-product-trigger {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    width: 100%;
    height: 38px;
    padding-inline: var(--qp-space-2);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-surface);
    text-align: start;
    transition: border-color var(--qp-duration-fast) var(--qp-ease), background-color var(--qp-duration-fast) var(--qp-ease);

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

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

.qp-product-trigger__glyph {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--qp-radius-xs);
    background: var(--qp-accent-subtle);
    color: var(--qp-accent-text);
    font-size: var(--qp-text-2xs);
    font-weight: var(--qp-weight-semibold);
}

.qp-product-trigger__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.qp-product-trigger__label {
    font-size: var(--qp-text-3xs);
    color: var(--qp-text-faint);
    letter-spacing: var(--qp-tracking-caps);
    text-transform: uppercase;
}

.qp-product-trigger__name {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Nav --- */
.qp-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--qp-space-3) var(--qp-space-4);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

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

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

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

.qp-nav__item--active {
    background: var(--qp-surface-selected);
    color: var(--qp-accent-text);

    & .qp-nav__icon {
        color: var(--qp-accent);
    }
}

.qp-nav__icon {
    flex: none;
    color: var(--qp-text-faint);
    transition: color var(--qp-duration-fast) var(--qp-ease);
}

.qp-nav__item:hover .qp-nav__icon {
    color: var(--qp-text-muted);
}

.qp-nav__label {
    flex: 1;
    /* group headers are <button>s, which centre their text by default */
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-nav__chevron {
    color: var(--qp-text-faint);
    transition: transform var(--qp-duration-base) var(--qp-ease);
}

.qp-nav__item[aria-expanded="true"] .qp-nav__chevron {
    transform: rotate(90deg);
}

.qp-nav__children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 var(--qp-space-2);
    padding-inline-start: calc(var(--qp-space-2) + 8px);
    position: relative;

    &::before {
        content: "";
        position: absolute;
        inset-block: 2px;
        inset-inline-start: calc(var(--qp-space-2) + 7px);
        width: 1px;
        background: var(--qp-border);
    }
}

.qp-nav__child {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    height: 28px;
    padding-inline: var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    color: var(--qp-text-muted);
    font-size: var(--qp-text-sm);
    white-space: nowrap;

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

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

.qp-nav__child--active {
    color: var(--qp-accent-text);
    font-weight: var(--qp-weight-medium);
    background: var(--qp-surface-selected);
}

.qp-nav__section {
    height: var(--qp-space-4);
}

/* Icon rail: labels, badges and children collapse away. */
.qp-app[data-collapsed="true"] {
    & .qp-nav__label,
    & .qp-nav__chevron,
    & .qp-nav__children,
    & .qp-brand__name,
    & .qp-product-trigger__text,
    & .qp-sidebar__user-text {
        display: none;
    }

    & .qp-nav__item,
    & .qp-nav__child,
    & .qp-product-trigger,
    & .qp-sidebar__user-trigger {
        justify-content: center;
        padding-inline: 0;
    }

    /* The rail stacks the mark above the expand button so there is always a visible,
       focusable way back — a rail you cannot leave is a trap. */
    & .qp-sidebar__brand {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        gap: var(--qp-space-2);
        padding: var(--qp-space-3) 0 var(--qp-space-1);
    }

    & .qp-sidebar__collapse {
        margin-inline-start: 0;
    }

    & .qp-nav__badge {
        position: absolute;
        top: 2px;
        inset-inline-end: 2px;
        min-width: 7px;
        height: 7px;
        padding: 0;
        font-size: 0;
        line-height: 0;
    }
}

/* --------------------------------------------------------- Sidebar foot --- */
.qp-sidebar__foot {
    flex: none;
    padding: var(--qp-space-2) var(--qp-space-3) var(--qp-space-3);
    border-top: 1px solid var(--qp-border-subtle);
}

.qp-sidebar__user-trigger {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    width: 100%;
    padding: var(--qp-space-1) var(--qp-space-2);
    border-radius: var(--qp-radius-sm);
    text-align: start;
    transition: background-color var(--qp-duration-fast) var(--qp-ease);

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

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

.qp-sidebar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.3;
}

.qp-sidebar__user-name {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qp-sidebar__user-role {
    font-size: var(--qp-text-2xs);
    color: var(--qp-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------- Main ----- */
.qp-main {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
}

.qp-topbar {
    position: sticky;
    top: 0;
    z-index: var(--qp-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    height: var(--qp-topbar-height);
    padding-inline: var(--qp-gutter);
    background: color-mix(in oklab, var(--qp-canvas) 82%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--qp-border-subtle);
}

.qp-topbar__menu {
    display: none;
}

.qp-topbar__crumbs {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

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

/* search trigger with the ⌘K hint */
.qp-search-trigger {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    height: 30px;
    width: min(240px, 28vw);
    padding-inline: var(--qp-space-2) var(--qp-space-1);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-surface);
    color: var(--qp-text-faint);
    font-size: var(--qp-text-sm);
    transition: border-color var(--qp-duration-fast) var(--qp-ease), color var(--qp-duration-fast) var(--qp-ease);

    &:hover {
        border-color: var(--qp-border-strong);
        color: var(--qp-text-muted);
    }

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

.qp-search-trigger__label {
    flex: 1;
    text-align: start;
}

.qp-search-trigger__keys {
    display: flex;
    gap: 2px;
    flex: none;
}

/* ------------------------------------------------------- Notifications ---- */
.qp-bell {
    position: relative;
}

.qp-bell__dot {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    min-width: 8px;
    height: 8px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-fail);
    box-shadow: 0 0 0 2px var(--qp-canvas);
}

.qp-notifications {
    width: min(380px, calc(100vw - 2 * var(--qp-space-4)));
    max-height: min(480px, 70vh);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.qp-notifications__head {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    padding: var(--qp-space-3) var(--qp-space-3) var(--qp-space-3) var(--qp-space-4);
    border-bottom: 1px solid var(--qp-border-subtle);
}

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

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

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

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

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

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

.qp-notification[data-kind="RunFailed"] .qp-notification__icon {
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
}

.qp-notification[data-kind="RunCompleted"] .qp-notification__icon {
    background: var(--qp-pass-bg);
    color: var(--qp-pass);
}

.qp-notification[data-kind="ReviewRequested"] .qp-notification__icon,
.qp-notification[data-kind="ReviewDecision"] .qp-notification__icon {
    background: var(--qp-accent-subtle);
    color: var(--qp-accent-text);
}

.qp-notification[data-kind="ScheduleChanged"] .qp-notification__icon {
    background: var(--qp-info-bg);
    color: var(--qp-info);
}

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

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

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

.qp-notification__time {
    font-size: var(--qp-text-2xs);
    color: var(--qp-text-faint);
    margin-top: 2px;
}

.qp-notification__unread {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 10px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-accent);
}

.qp-notifications__foot {
    border-top: 1px solid var(--qp-border-subtle);
    padding: var(--qp-space-2);
}

/* The /notifications page reuses the popover's rows at full width. It is a list of pointers to elsewhere in
   the product, so it is deliberately the same object in both places — the same notification should not look
   like two different things depending on where you met it. */

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

.qp-notifications__page .qp-notification {
    align-items: center;
}

.qp-notifications__page .qp-notification + .qp-notification {
    border-top: 1px solid var(--qp-border-subtle);
    border-radius: 0;
}

/* Unread is carried by weight and a dot rather than a background wash: a page of unread notifications
   should not be a page of highlighted rows, which reads as an error state. */
.qp-notifications__page .qp-notification[data-unread] .qp-notification__title {
    font-weight: var(--qp-weight-semibold);
}

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

/* The title is the affordance: almost every notification is a pointer to somewhere else, and a list whose
   whole purpose is to be clicked should look like one. Self-aligned so the hit area is the words, not the
   whole column. */
.qp-notifications__page a.qp-notification__title {
    align-self: flex-start;
    color: var(--qp-accent-text);
}

.qp-notifications__page a.qp-notification__title:hover {
    text-decoration: underline;
}

.qp-notifications__page a.qp-notification__title:focus-visible {
    outline: 2px solid var(--qp-accent);
    outline-offset: 2px;
    border-radius: var(--qp-radius-sm);
}

.qp-notifications__page .qp-notification__text {
    font-size: var(--qp-text-sm);
}

/* ------------------------------------------------------------- Content ---- */
.qp-content {
    flex: 1;
    min-width: 0;
    container-type: inline-size;
    container-name: qp-content;
}

.qp-content__inner {
    max-width: var(--qp-content-max);
    margin-inline: auto;
    padding: var(--qp-space-8) var(--qp-gutter) var(--qp-space-16);
}

.qp-content--flush .qp-content__inner {
    padding-inline: 0;
    max-width: none;
}

/* ------------------------------------------------------------ Responsive -- */
@media (max-width: 1280px) {
    .qp-app {
        --qp-gutter: var(--qp-space-6);
    }
}

@media (max-width: 1023px) {
    .qp-app {
        grid-template-columns: minmax(0, 1fr);
        --qp-gutter: var(--qp-space-4);
    }

    .qp-main {
        grid-column: 1;
    }

    .qp-sidebar {
        --_sidebar: var(--qp-sidebar-width);
        width: var(--qp-sidebar-width);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .qp-app[data-drawer="true"] .qp-sidebar {
        transform: translateX(0);
        /* As an overlay the sidebar is a drawer: it must sit above the scrim, not under it. */
        z-index: var(--qp-z-drawer);
        box-shadow: var(--qp-shadow-3);
    }

    .qp-app[data-collapsed="true"] .qp-sidebar {
        --_sidebar: var(--qp-sidebar-width);
    }

    /* the rail never applies on small screens */
    .qp-app[data-collapsed="true"] .qp-nav__label,
    .qp-app[data-collapsed="true"] .qp-nav__chevron,
    .qp-app[data-collapsed="true"] .qp-brand__name,
    .qp-app[data-collapsed="true"] .qp-product-trigger__text,
    .qp-app[data-collapsed="true"] .qp-sidebar__user-text {
        display: revert;
    }

    .qp-app[data-collapsed="true"] .qp-nav__item,
    .qp-app[data-collapsed="true"] .qp-nav__child,
    .qp-app[data-collapsed="true"] .qp-product-trigger,
    .qp-app[data-collapsed="true"] .qp-sidebar__user-trigger {
        justify-content: flex-start;
        padding-inline: var(--qp-space-2);
    }

    .qp-app[data-collapsed="true"] .qp-sidebar__brand {
        flex-direction: row;
        align-items: center;
        height: var(--qp-topbar-height);
        gap: var(--qp-space-2);
        padding: 0 var(--qp-space-3);
    }

    .qp-app[data-collapsed="true"] .qp-sidebar__collapse {
        margin-inline-start: auto;
    }

    .qp-topbar__menu {
        display: inline-grid;
    }

    .qp-sidebar__collapse {
        display: inline-grid;
    }

    .qp-content__inner {
        padding-block: var(--qp-space-6) var(--qp-space-12);
    }
}

@media (max-width: 640px) {
    .qp-search-trigger__label,
    .qp-search-trigger__keys {
        display: none;
    }

    .qp-search-trigger {
        width: 30px;
        justify-content: center;
        padding-inline: 0;
    }

    .qp-page-header {
        gap: var(--qp-space-4);
    }
}

/* ======================================================= Account pages ==== */
.qp-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--qp-canvas);
}

@media (min-width: 900px) {
    .qp-account {
        grid-template-columns: minmax(0, 1fr) minmax(480px, 44%);
    }
}

.qp-account__brand-panel {
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--qp-space-12);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 8% 8%, color-mix(in oklab, var(--qp-iris-400) 55%, transparent) 0%, transparent 55%),
        radial-gradient(110% 80% at 96% 92%, color-mix(in oklab, #2f7de1 42%, transparent) 0%, transparent 58%),
        linear-gradient(152deg, #2a2a63 0%, #191a2c 46%, #101119 100%);
}

@media (min-width: 900px) {
    .qp-account__brand-panel {
        display: flex;
    }
}

.qp-account__brand-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 100% at 20% 10%, #000 0%, transparent 72%);
    pointer-events: none;
}

.qp-account__brand-head,
.qp-account__brand-body,
.qp-account__brand-foot {
    position: relative;
    z-index: 1;
}

.qp-account__brand-head {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-lg);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: -0.02em;
}

.qp-account__headline {
    font-size: var(--qp-text-3xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 16ch;
    color: #fff;
}

.qp-account__sub {
    margin-top: var(--qp-space-4);
    font-size: var(--qp-text-lg);
    line-height: var(--qp-leading-normal);
    color: rgb(255 255 255 / 0.68);
    max-width: 42ch;
}

.qp-account__points {
    margin-top: var(--qp-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-3);
}

.qp-account__point {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-3);
    font-size: var(--qp-text-sm);
    color: rgb(255 255 255 / 0.78);
}

.qp-account__point-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--qp-radius-full);
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.9);
}

.qp-account__brand-foot {
    font-size: var(--qp-text-xs);
    color: rgb(255 255 255 / 0.45);
}

.qp-account__form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--qp-space-8) var(--qp-space-6);
    background: var(--qp-surface);
}

.qp-account__form {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-5);
}

.qp-account__mobile-brand {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    justify-content: center;
    margin-bottom: var(--qp-space-2);
    font-size: var(--qp-text-lg);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--qp-text-strong);
}

@media (min-width: 900px) {
    .qp-account__mobile-brand {
        display: none;
    }
}

.qp-account__title {
    font-size: var(--qp-text-xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tighter);
    color: var(--qp-text-strong);
}

.qp-account__lede {
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
    margin-top: var(--qp-space-1);
}

.qp-account__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qp-space-3);
}

.qp-account__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-2);
    padding: var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    border: 1px solid var(--qp-fail-border);
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
    font-size: var(--qp-text-sm);
    line-height: var(--qp-leading-snug);
}

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

.qp-account__foot {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    text-align: center;
}

/* ===================================================== Status pages ======= */
.qp-status-page {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: var(--qp-space-8);
}

.qp-status-page__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--qp-space-4);
    max-width: 480px;
}

.qp-status-page__code {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-2xs);
    letter-spacing: var(--qp-tracking-caps);
    text-transform: uppercase;
    color: var(--qp-text-faint);
}

.qp-status-page__glyph {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--qp-radius-xl);
    background: var(--qp-surface-sunken);
    border: 1px solid var(--qp-border-subtle);
    color: var(--qp-text-muted);
}

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

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

.qp-status-page__title {
    font-size: var(--qp-text-xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tighter);
    color: var(--qp-text-strong);
}

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

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

.qp-status-page__detail {
    margin-top: var(--qp-space-4);
    width: 100%;
    text-align: start;
}

.qp-status-page__detail summary {
    cursor: pointer;
    font-size: var(--qp-text-xs);
    color: var(--qp-text-subtle);
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

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

.qp-status-page__detail pre {
    margin-top: var(--qp-space-2);
    padding: var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-code-bg);
    border: 1px solid var(--qp-border-subtle);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    overflow-x: auto;
}