/* ===========================================================================
   Clean — a bright, neutral thinking studio.
   Editorial serif (Fraunces) for marquee text, clean grotesque (Hanken Grotesk)
   for UI, mono for numerals. One calm blue signature on white.
   =========================================================================== */

:root {
    /* Cool neutral surfaces, light to white. */
    --ink-900: #f4f6f8;   /* page */
    --ink-850: #fbfcfd;   /* sidebar / panels */
    --ink-800: #ffffff;   /* canvas */
    --ink-750: #ffffff;   /* raised / inputs */
    --ink-700: #ffffff;   /* cards / nodes */
    --ink-600: #eef1f5;   /* hover / chips */
    --line: rgba(15, 23, 42, 0.10);
    --line-strong: rgba(15, 23, 42, 0.16);
    --overlay: rgba(15, 23, 42, 0.05);
    --overlay-strong: rgba(15, 23, 42, 0.09);

    --text: #1e293b;      /* slate ink */
    --text-dim: #475569;  /* secondary text — AA on all light surfaces */
    --text-faint: #64748b; /* tertiary text — still AA */

    --accent: #2563eb;        /* blue — borders, flourishes, fills */
    --accent-text: #1d4ed8;   /* darker blue — accent-coloured TEXT/links (AA on white) */
    --accent-bright: #3b82f6; /* bright blue — fills only */
    --accent-deep: #1e40af;
    --accent-soft: rgba(37, 99, 235, 0.12);
    --accent-ink: #ffffff;    /* text on blue fills */

    --danger: #c8443b;
    --danger-soft: rgba(200, 68, 59, 0.12);

    --radius: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.07);
    --shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 6px 22px rgba(37, 99, 235, 0.35);

    --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body {
    font-family: var(--font-ui);
    background-color: var(--ink-900);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

a, .btn-link {
    color: var(--accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

/* --- Scrollbars ---------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-600) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-600);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--line-strong);
    background-clip: content-box;
}

/* --- Buttons (override Bootstrap) ---------------------------------------- */
.btn {
    --bs-btn-focus-box-shadow: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 0.5rem 0.95rem;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
}

.btn-primary {
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--accent-ink);
    background: linear-gradient(180deg, #93c5fd, var(--accent-bright));
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}

.btn-outline-secondary {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--line-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--text);
    background: var(--overlay);
    border-color: var(--line-strong);
}

.btn-outline-danger {
    color: var(--danger);
    background: transparent;
    border-color: rgba(200, 68, 59, 0.4);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Inputs -------------------------------------------------------------- */
.form-control {
    background-color: var(--ink-750);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-family: var(--font-ui);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
    color: var(--text-faint);
}

.form-control:focus {
    background-color: var(--ink-750);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

h1, h2, h3 {
    color: var(--text);
}

h1:focus {
    outline: none;
}

/* --- Auth (sign in / register / sign out) -------------------------------- */
.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--ink-750);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem 1.8rem;
}

.auth-title {
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.auth-sub {
    margin: 0 0 1.4rem;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.auth-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
}

.auth-label .form-control {
    margin-top: 0.35rem;
    width: 100%;
}

.auth-submit {
    width: 100%;
    margin-top: 0.4rem;
}

.auth-alt {
    margin: 1.2rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.auth-error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.88rem;
}

.auth-info {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.88rem;
}

/* --- Template leftovers (validation / error UI) -------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.2rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }