/*
 * base.css - page frame, type, links, buttons, form controls and the dashboard grid.
 *
 * Logical properties only (inline/block, start/end): the Arabic dashboard is this same sheet
 * under dir="rtl", with no second set of rules. Class prefix xa-. No rule here may depend on a
 * script having run, because error.html uses this sheet and carries no script at all.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* An author rule such as display: grid would otherwise beat the browser's own [hidden] rule. */
[hidden] {
    display: none !important;
}

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-block-size: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-heading, var(--brand-pure-white, #FFFFFF));
}

/* The public site's h1 is a 100px hero line; a dashboard heading sits three steps down the same scale. */
h1 {
    font-size: var(--fs-lg);
}

h2 {
    font-size: var(--fs-sm);
}

h3 {
    font-size: var(--fs-base);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--premium-gold);
}

a {
    color: var(--premium-gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--premium-silver);
}

:focus-visible {
    outline: var(--xa-focus-width) solid var(--xa-focus);
    outline-offset: var(--xa-focus-offset);
}

/* Headings that receive focus from script (after a retry, after saving) are reading positions,
   not controls: no ring, the screen reader simply starts there. */
[tabindex="-1"]:focus {
    outline: none;
}

/* ---- helpers ------------------------------------------------------------------------------- */

.xa-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.xa-skip {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    z-index: 10;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--xa-radius-control);
    background-color: var(--premium-gold);
    color: var(--bg-secondary);
    transform: translateY(-200%);
}

.xa-skip:focus {
    transform: none;
}

.xa-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xa-hint {
    color: var(--xa-text-muted);
    max-inline-size: var(--xa-measure);
}

/* One sentence about an attempt that failed (a sign-in that did not complete): a bar and words,
   so the state never rests on colour alone. */
.xa-alert {
    padding-inline-start: var(--space-md);
    border-inline-start: 4px solid var(--xa-danger);
    color: var(--xa-danger);
}

/* ---- page frame ---------------------------------------------------------------------------- */

.xa-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    padding-block: var(--space-lg);
    padding-inline: var(--space-lg);
    border-block-end: 1px solid var(--xa-border);
    background-color: var(--bg-secondary);
}

.xa-header__brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--premium-silver);
    text-decoration: none;
}

.xa-header__brand:hover {
    color: var(--premium-gold);
}

.xa-header__area {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--premium-gold);
}

/* The grid asks this element how wide it is, so that a wide card can span two columns only
   where two columns exist. */
.xa-main {
    container-type: inline-size;
    container-name: xa-main;
    max-inline-size: 1320px;
    margin-inline: auto;
    padding-block: var(--space-2xl) var(--space-5xl);
    padding-inline: var(--space-lg);
}

.xa-main > h1 {
    margin-block-end: var(--space-xl);
}

.xa-boot {
    color: var(--xa-text-muted);
}

/* Without scripting the dashboard can never arrive; the noscript text speaks instead. */
@media (scripting: none) {
    .xa-boot {
        display: none;
    }
}

.xa-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    max-inline-size: var(--xa-measure);
    padding: var(--space-xl);
    border: 1px solid var(--xa-border);
    border-inline-start: 4px solid var(--premium-gold);
    border-radius: var(--xa-radius-card);
    background-color: var(--xa-surface);
}

.xa-plain-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    color: var(--xa-text-muted);
}

/* ---- the dashboard grid -------------------------------------------------------------------- */

.xa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--xa-column)), 1fr));
    gap: var(--space-xl);
    align-items: start;
}

/* Size "l" takes two columns once the page holds two; sizes "s" and "m" take one. */
@container xa-main (min-inline-size: 46rem) {
    .xa-grid > [data-size="l"] {
        grid-column: span 2;
    }
}

/* ---- controls ------------------------------------------------------------------------------ */

.xa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-block-size: var(--xa-target);
    max-inline-size: 100%;
    padding-block: var(--space-sm);
    padding-inline: var(--space-lg);
    border: 1px solid var(--xa-border-strong);
    border-radius: var(--xa-radius-control);
    background-color: transparent;
    color: var(--premium-silver);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.xa-button:hover {
    border-color: var(--premium-gold);
    color: var(--premium-gold);
}

.xa-button--primary {
    border-color: var(--premium-gold);
    background-color: var(--premium-gold);
    color: var(--bg-secondary);
}

.xa-button--primary:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: var(--bg-secondary);
}

.xa-button--small {
    min-block-size: 36px;
    padding-inline: var(--space-md);
    font-size: 0.8rem;
}

/* A disabled button says so in two ways: dimmed, and a dashed outline - never by colour alone. */
.xa-button:disabled {
    border-style: dashed;
    opacity: 0.45;
    cursor: not-allowed;
}

.xa-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--premium-gold);
}

.xa-select {
    min-block-size: var(--xa-target);
    max-inline-size: 100%;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: 1px solid var(--xa-border-strong);
    border-radius: var(--xa-radius-control);
    background-color: var(--bg-secondary);
    color: var(--premium-silver);
    font-family: var(--font-body);
    font-size: 1rem;
}

.xa-select:hover {
    border-color: var(--premium-gold);
}

/* ---- people who asked for less motion, and forced-colour modes ----------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .xa-button,
    .xa-select {
        border-color: ButtonText;
    }
}