/* Facade "Danger zone" (FS-002): the settings page of some product, dimmed, with the confirmation of
   an irreversible deletion as a dialog over it. The chrome is schematic on purpose — it is nobody's
   product. Follows the preview theme through the card tokens. */

/* Three rows: the top bar, the page with the dialog over it (both in the same cell, so the cell grows
   with the dialog), the honesty line. Pinned absolutely, the dialog and the line shared the frame's
   height and overlapped once the text wrapped on a phone. */
.facade-danger {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: 36rem;
    min-height: 25rem;
    overflow: hidden;
    border: 1px solid var(--veriqa-card-border);
    border-radius: var(--veriqa-radius-lg);
    background: var(--veriqa-card-bg);
    color: var(--veriqa-card-fg);
    box-shadow: var(--veriqa-shadow-lg);
}

.facade-danger-top {
    display: flex;
    align-items: center;
    gap: var(--veriqa-spacing-xs);
    height: 2.875rem;
    padding: 0 var(--veriqa-spacing-lg);
    border-block-end: 1px solid var(--veriqa-card-border);
    font-size: var(--veriqa-font-size-sm);
    font-weight: var(--veriqa-font-weight-bold);
}

.facade-danger-crumb,
.facade-danger-crumb-sep {
    color: var(--veriqa-card-muted);
    font-weight: var(--veriqa-font-weight-normal);
}

.facade-danger-body {
    grid-area: 2 / 1;
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    min-height: 22rem;
}

.facade-danger-nav {
    display: flex;
    flex-direction: column;
    gap: var(--veriqa-spacing-sm);
    padding: var(--veriqa-spacing-md);
    border-inline-end: 1px solid var(--veriqa-card-border);
}

.facade-danger-navline {
    height: 9px;
    border-radius: var(--veriqa-radius-sm);
    background: var(--veriqa-card-border);
}

.facade-danger-navline.is-short { width: 60%; }
.facade-danger-navline.is-active { width: 80%; background: var(--veriqa-card-muted); }

.facade-danger-content {
    padding: var(--veriqa-spacing-lg);
}

.facade-danger-heading {
    margin: 0 0 var(--veriqa-spacing-xs);
    font-weight: var(--veriqa-font-weight-bold);
}

.facade-danger-sub {
    margin: 0;
    font-size: var(--veriqa-font-size-xs);
    color: var(--veriqa-card-muted);
}

.facade-danger-box {
    display: flex;
    flex-direction: column;
    gap: var(--veriqa-spacing-xs);
    margin-block-start: var(--veriqa-spacing-lg);
    padding: var(--veriqa-spacing-md);
    border: 1px solid color-mix(in srgb, var(--veriqa-color-danger) 35%, var(--veriqa-card-border));
    border-radius: var(--veriqa-radius-md);
    background: color-mix(in srgb, var(--veriqa-color-danger) 5%, var(--veriqa-card-bg));
}

.facade-danger-box-title {
    margin: 0;
    font-size: var(--veriqa-font-size-sm);
    font-weight: var(--veriqa-font-weight-bold);
    color: var(--veriqa-color-danger);
}

.facade-danger-fakebtn {
    align-self: flex-start;
    margin-block-start: var(--veriqa-spacing-xs);
    padding: var(--veriqa-spacing-xs) var(--veriqa-spacing-md);
    border: 1px solid var(--veriqa-color-danger);
    border-radius: var(--veriqa-radius-sm);
    font-size: var(--veriqa-font-size-xs);
    font-weight: var(--veriqa-font-weight-bold);
    color: var(--veriqa-color-danger);
}

.facade-danger-dim {
    position: absolute;
    inset: 2.875rem 0 0;
    background: color-mix(in srgb, var(--veriqa-card-bg) 78%, transparent);
    backdrop-filter: blur(1px);
}

.facade-danger-dialog {
    position: relative;
    grid-area: 2 / 1;
    align-self: center;
    justify-self: center;
    margin-block: var(--veriqa-spacing-md);
    width: min(calc(100% - 2rem), 25rem);
    display: flex;
    flex-direction: column;
    gap: var(--veriqa-spacing-sm);
    padding: var(--veriqa-spacing-lg);
    border: 1px solid var(--veriqa-card-border);
    border-radius: var(--veriqa-radius-lg);
    background: var(--veriqa-card-bg);
    box-shadow: var(--veriqa-shadow-lg);
}

.facade-danger-title {
    display: flex;
    align-items: center;
    gap: var(--veriqa-spacing-sm);
    margin: 0;
    font-size: var(--veriqa-font-size-md);
    font-weight: var(--veriqa-font-weight-bold);
    line-height: 1.25;
}

.facade-danger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--veriqa-color-danger) 12%, var(--veriqa-card-bg));
    color: var(--veriqa-color-danger);
    font-weight: var(--veriqa-font-weight-bold);
}

.facade-danger-text {
    margin: 0;
    font-size: var(--veriqa-font-size-xs);
    line-height: 1.45;
    color: var(--veriqa-card-muted);
}

.facade-danger-dialog.is-done {
    border-color: color-mix(in srgb, var(--veriqa-color-success) 45%, var(--veriqa-card-border));
}

.facade-danger-dialog.is-cancelled {
    border-color: color-mix(in srgb, var(--veriqa-color-danger) 35%, var(--veriqa-card-border));
}

/* Positioned only to be painted above the dimming layer. */
.facade-danger > .veriqa-facade-honesty {
    position: relative;
    grid-area: 3 / 1;
    padding: 0 var(--veriqa-spacing-md) var(--veriqa-spacing-sm);
}

/* The live waiting page shows a full-size QR code, so its dialog needs more room than the mock-up
   and the result banner. */
.veriqa-confirmation .facade-danger {
    min-height: 34rem;
}

@media (max-width: 40rem) {
    .facade-danger-body {
        grid-template-columns: 4rem 1fr;
    }

    .veriqa-confirmation .facade-danger {
        min-height: 38rem;
    }
}