/*
 * dialog.css - the two modal dialogs (session expired, customise) and the ordering list.
 *
 * Both are native <dialog> elements opened with showModal(): the browser supplies the focus
 * trap, the Escape key and the inert page behind. Logical properties only; class prefix xa-.
 */

.xa-dialog {
    inline-size: min(100% - 2 * var(--space-lg), 36rem);
    max-inline-size: none;
    max-block-size: calc(100% - 2 * var(--space-lg));
    margin: auto;
    padding: var(--space-xl);
    overflow: auto;
    border: 1px solid var(--xa-border-strong);
    border-radius: var(--xa-radius-card);
    background-color: var(--xa-surface-raised);
    color: var(--text-color);
}

.xa-dialog[open] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Older engines do not hand custom properties to ::backdrop, hence the literal fallback. */
.xa-dialog::backdrop {
    background-color: var(--xa-backdrop, rgba(0, 0, 0, 0.75));
}

.xa-dialog__title {
    font-size: var(--fs-md);
}

.xa-dialog__status {
    min-block-size: 1.6em;
    color: var(--xa-text-muted);
}

.xa-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-md);
}

/* ---- customise: one numbered row per card -------------------------------------------------- */

/* The numbers stay: a row's position is what this list is about. */
.xa-order {
    padding-inline-start: 2.5ch;
}

.xa-order__row {
    padding-block: var(--space-md);
    padding-inline-start: var(--space-sm);
    border-block-start: 1px solid var(--xa-border);
}

.xa-order__row:first-child {
    border-block-start: none;
}

.xa-order__row::marker {
    color: var(--premium-gold);
    font-variant-numeric: tabular-nums;
}

.xa-order__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    margin-block-end: var(--space-sm);
}

.xa-order__name {
    font-weight: 700;
}

.xa-order__state {
    color: var(--xa-text-muted);
    font-size: 0.9em;
}

/* A hidden card is marked by its words ("Hidden") and by the struck-through name. */
.xa-order__row[data-hidden="true"] .xa-order__name {
    text-decoration: line-through;
    color: var(--xa-text-muted);
}

.xa-order__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}