/*
 * The Castles-in-the-Air Authority: the portal's design system.
 *
 * Three layers of styling, from broad to narrow:
 *   1. This file: design tokens, base elements and shared patterns (.card, .btn …), and how the
 *      forms look everywhere in the portal (the "quillflow forms" section below).
 *   2. Component.razor.css files: Blazor scoped CSS for one component (the layout, a badge, a page).
 *   3. ::deep in a page's scoped CSS, when one page wants a form to look different (Apply.razor.css).
 */

/* ---------- Design tokens ---------- */
:root {
    --sky-50: #f4f8ff;
    --sky-100: #e4eeff;
    --sky-200: #c9dbff;
    --sky-500: #4a7bd4;
    --sky-700: #2c4d8f;
    --sky-800: #23417c;
    --sky-900: #162544;
    --dusk-500: #6a4f9c;
    --sunset-400: #ff9e6d;
    --gold-100: #fff3cc;
    --gold-400: #ffcf4a;
    --gold-800: #6e4b00;
    --mint-100: #dcf4e8;
    --mint-800: #19613f;
    --rose-100: #ffe4e0;
    --rose-800: #9b2618;

    --ink: #18213a;
    --muted: #55607a;
    --line: #dce4f2;
    --line-strong: #8f9dbb;
    --surface: #ffffff;
    --background: #f2f6fd;

    --font-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 1px 2px rgb(22 37 68 / 0.06), 0 6px 20px rgb(22 37 68 / 0.06);
    --page-width: 76rem;
    --gutter: 1rem;

    color-scheme: light;
}

@media (min-width: 40rem) {
    :root { --gutter: 1.5rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--background);
}

body {
    margin: 0;
    background: linear-gradient(180deg, var(--sky-50), var(--background) 30rem);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

h1 { margin: 0 0 0.5rem; font-size: 2.1rem; }
h2 { margin: 0 0 1rem; font-size: 1.35rem; }

h1:focus { outline: none; }

a { color: var(--sky-800); }

a:focus-visible {
    outline: 3px solid var(--gold-400);
    outline-offset: 2px;
}

.muted { color: var(--muted); }

/* ---------- Shared patterns ---------- */
.page-head { margin-bottom: 1.5rem; }
.page-head p { margin: 0; color: var(--muted); }

.page-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.card {
    margin: 0 0 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.side .card,
.form-layout .card { margin: 0; }

.empty-state { text-align: center; }

.btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--sky-800);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: var(--sky-900); }

.btn:focus-visible {
    outline: 3px solid var(--gold-400);
    outline-offset: 2px;
}

.btn--danger { background: var(--rose-800); }
.btn--danger:hover { background: #7a1c11; }

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1.5rem;
    align-items: start;
}

.form-card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.help {
    position: sticky;
    top: 1rem;
    background: linear-gradient(180deg, var(--sky-100), var(--surface));
}

@media (max-width: 60rem) {
    .form-layout { grid-template-columns: minmax(0, 1fr); }
    .help { position: static; }
}

@media (max-width: 40rem) {
    .form-card { padding: 1.25rem; }
}

/* ---------- quillflow forms ----------
 * quillflow.css (loaded before this file) is a GOV.UK-like default. Most of the portal's look comes
 * from its custom properties; a few rules below go further where the portal's design differs.
 */
qf-form {
    --qf-font: var(--font-body);
    --qf-text: var(--ink);
    --qf-muted: var(--muted);
    --qf-border: var(--line-strong);
    --qf-background: var(--surface);
    --qf-primary: var(--sky-800);
    --qf-primary-hover: var(--sky-900);
    --qf-secondary: var(--sky-100);
    --qf-error: #b42318;
    --qf-focus: var(--gold-400);
    --qf-radius: var(--radius-sm);
    --qf-gap: 1.4rem;
    --qf-max-width: none;

    font-size: 1.0625rem;
}

qf-form .qf-page-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
}

qf-form .qf-input:focus,
qf-form .qf-select:focus {
    border-color: var(--sky-800);
    box-shadow: 0 0 0 4px rgb(74 123 212 / 0.25);
}

/* Pill-shaped buttons like the rest of the portal, without the GOV.UK bottom shadow. */
qf-form .qf-button {
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    box-shadow: none;
    font-weight: 700;
}

qf-form .qf-button--secondary:hover { background: var(--sky-200); }

qf-form .qf-error-summary {
    border-width: 0 0 0 6px;
    border-radius: var(--radius-sm);
    background: var(--rose-100);
}

/* Notes (lookups, the fee) become a soft callout. */
qf-form .qf-note {
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--sky-500);
    border-radius: var(--radius-sm);
    background: var(--sky-50);
}

qf-form .qf-search__list {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

qf-form .qf-confirmation {
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--sky-800), var(--dusk-500));
}

/* ---------- Blazor's error bar ---------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--gold-100);
    box-shadow: 0 -1px 4px rgb(0 0 0 / 0.2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

.skip-link:focus { z-index: 100; }