/* ============================================================================
   BIE PhotoApp — "Diplomatic Modern" design system
   Ultramarine + gold · IBM Plex superfamily · banded-sphere emblem motif
   ============================================================================ */

:root {
    /* Brand */
    --bie-ultramarine: #110ca9;   /* primary (BIE wordmark blue) */
    --bie-ultra-bright: #2a20e0;  /* lifted accent / hover */
    --bie-navy: #071689;          /* emblem blue / depth */
    --bie-navy-deep: #050d52;     /* darkest panels */
    --bie-gold: #c8a45c;          /* diplomatic accent */
    --bie-gold-bright: #e2c280;
    --bie-gold-soft: #f4ead2;

    /* Neutrals */
    --ink: #0b1030;
    --muted: #5a6488;
    --faint: #97a0c2;
    --line: #e3e6f4;
    --line-strong: #cdd2ec;
    --canvas: #eef1fb;
    --surface: #ffffff;
    --surface-2: #f7f8ff;

    /* Status */
    --ok: #1f7a4d;
    --ok-bg: #e7f5ec;

    /* Form */
    --radius: 18px;
    --radius-sm: 11px;
    --pill: 999px;
    --shadow-sm: 0 2px 14px rgba(7, 22, 137, .06);
    --shadow: 0 26px 60px -28px rgba(7, 22, 137, .34);
    --shadow-blue: 0 30px 70px -26px rgba(17, 12, 169, .5);
    --ring: 0 0 0 4px rgba(17, 12, 169, .14);

    --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
    --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Atmospheric backdrop: cool gradient + faint grain */
body {
    min-height: 100vh;
    background:
        radial-gradient(1100px 680px at 84% -8%, rgba(17, 12, 169, .10), transparent 60%),
        radial-gradient(900px 700px at -6% 4%, rgba(200, 164, 92, .10), transparent 55%),
        linear-gradient(180deg, #f4f6ff 0%, var(--canvas) 38%, #e7ebfa 100%);
    background-attachment: fixed;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--bie-ultramarine); text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus { outline: none; }

/* ---- Banded-sphere emblem motif (decorative) -------------------------- */
.bie-orb {
    position: relative;
    border-radius: 50%;
    background:
        repeating-linear-gradient(180deg,
            currentColor 0 9%,
            transparent 9% 16.5%);
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
            mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
    color: var(--bie-ultramarine);
}
.bie-orb::after { /* the emblem's peak cut */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 138%, var(--surface) 30%, transparent 31%);
    mix-blend-mode: screen;
}

/* ---- Shell + app bar -------------------------------------------------- */
.pa-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pa-appbar {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1.6rem;
    background: linear-gradient(100deg, var(--bie-navy-deep) 0%, var(--bie-navy) 42%, var(--bie-ultramarine) 100%);
    border-bottom: 2px solid var(--bie-gold);
    box-shadow: 0 10px 30px -16px rgba(5, 13, 82, .8);
}
.pa-appbar__brand { display: flex; align-items: center; gap: .8rem; }
.pa-appbar__mark {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
}
.pa-appbar__mark img { width: 26px; height: 26px; display: block; }
.pa-appbar__txt { display: flex; flex-direction: column; line-height: 1.05; }
.pa-appbar__eyebrow {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .26em;
    color: var(--bie-gold-bright);
    text-transform: uppercase;
}
.pa-appbar__app { color: #fff; font-weight: 600; font-size: 1.06rem; letter-spacing: .01em; }
.pa-appbar__spacer { flex: 1; }

.pa-content { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2.4rem 1.6rem 3rem; }

/* ---- Buttons ---------------------------------------------------------- */
.pa-btn {
    font: 600 1rem/1 var(--font-sans);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .85rem 1.5rem;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.pa-btn:disabled { opacity: .45; cursor: not-allowed; }
.pa-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, var(--bie-ultra-bright), var(--bie-ultramarine));
    box-shadow: var(--shadow-blue);
}
.pa-btn--primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 36px 80px -24px rgba(17, 12, 169, .62); }
.pa-btn--primary:not(:disabled):active { transform: translateY(0); }
.pa-btn--ghost {
    color: var(--bie-navy);
    background: var(--surface);
    border-color: var(--line-strong);
}
.pa-btn--ghost:not(:disabled):hover { border-color: var(--bie-ultramarine); background: var(--surface-2); }

/* ---- Pills / badges / chips ------------------------------------------ */
.pa-pill {
    display: inline-flex; align-items: center;
    font: 600 .74rem/1 var(--font-sans);
    color: var(--bie-ultramarine);
    background: rgba(17, 12, 169, .07);
    border: 1px solid rgba(17, 12, 169, .16);
    padding: .35rem .65rem;
    border-radius: var(--pill);
    letter-spacing: .01em;
}
.pa-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font: 600 .68rem/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: .1em;
    padding: .34rem .6rem;
    border-radius: var(--pill);
}
.pa-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa-badge--has { color: var(--ok); background: var(--ok-bg); }
.pa-badge--needs { color: #936014; background: var(--bie-gold-soft); }

/* ---- Spinner: orbiting band ------------------------------------------ */
.pa-spinner {
    display: inline-block; width: 1.15rem; height: 1.15rem; vertical-align: -.2rem;
    border-radius: 50%;
    border: 2.5px solid rgba(17, 12, 169, .16);
    border-top-color: var(--bie-ultramarine);
    border-right-color: var(--bie-gold);
    animation: pa-spin .7s linear infinite;
}
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ---- States ----------------------------------------------------------- */
.pa-state {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    text-align: center; color: var(--muted);
    padding: 3.2rem 1rem; font-size: 1.02rem;
}
.pa-state--error { color: #b3261e; }
.pa-note {
    font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
    color: var(--muted); text-align: center; margin: 0 0 1.1rem;
}

/* ---- Avatar fallback (shared) ---------------------------------------- */
.pa-avatar-fallback {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 38%, #e7ebfb, #d3d9f4);
    color: var(--faint);
}
.pa-avatar-fallback svg { width: 46%; height: 46%; }

/* ---- Blazor framework necessities ------------------------------------ */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; left: 0; width: 100%;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: var(--bie-navy-deep);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }