/* Assetnode - Modern 2026 UI Stylesheet */
/* No external dependencies - pure CSS */

/* ========================================
   Font Face Definitions - Zain (Local)
   ======================================== */

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/assets/zain-extralight-10da2efd.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/assets/zain-light-40bed04f.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/zain-regular-e023bbbc.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/zain-bold-2386d306.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/zain-extrabold-1ea78019.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/assets/zain-black-99fdf802.ttf") format("truetype");
}

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */

:root {
    /* Primary brand colors - Blue spectrum */
    --color-brand-50: #f5f7fa;
    --color-brand-100: #ebeef5;
    --color-brand-200: #d3dae8;
    --color-brand-300: #adbbd4;
    --color-brand-400: #8196bc;
    --color-brand-500: #6278a8;
    --color-brand-600: #4d5f8e;
    --color-brand-700: #404d73;
    --color-brand-800: #384260;
    --color-brand-900: #323951;
    --color-brand-950: #1e2231;

    /* Accent colors - Hive Honey (Pastell) */
    --color-accent-50: #fefce8;
    --color-accent-100: #fef9c3;
    --color-accent-200: #fef08a;
    --color-accent-300: #fde047;
    --color-accent-400: #facc15;
    --color-accent-500: #eab308;
    --color-accent-600: #ca8a04;
    --color-accent-700: #a16207;

    /* Hive Pastell für Branding */
    --color-hive-light: #fef3c7;
    --color-hive-medium: #fcd34d;
    --color-hive-warm: #f59e0b;

    /* Surface colors */
    --color-surface: #fafbfc;
    --color-surface-elevated: #ffffff;

    /* Text colors */
    --color-text-primary: var(--color-brand-900);
    --color-text-secondary: var(--color-brand-600);
    --color-text-muted: var(--color-brand-400);

    /* Border colors */
    --color-border: var(--color-brand-200);
    --color-border-focus: var(--color-brand-500);

    /* Status colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:
        0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
        0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:
        0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Typography */
    --font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
}

/* Dark mode - always active */
:root {
    --color-surface: #0f1219;
    --color-surface-elevated: #1a1f2e;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-border: #334155;
    --color-border-focus: var(--color-brand-400);
}

/* ========================================
   Base Styles
   ======================================== */

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

/* Keep the hidden attribute effective on elements whose class sets
   its own display (e.g. .warning-box with display: flex) */
[hidden] {
    display: none !important;
}

/* Off-screen but present in the render tree — password managers skip
   display:none fields, so autofill helpers must hide this way */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: 2.25rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1.125rem;
}

p {
    margin: 0;
}

a {
    color: var(--color-brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-brand-300);
}

/* ========================================
   Layout Utilities
   ======================================== */

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}

.grid {
    display: grid;
}
.gap-2 {
    gap: var(--space-2);
}
.gap-3 {
    gap: var(--space-3);
}
.gap-4 {
    gap: var(--space-4);
}
.hidden {
    display: none !important;
}

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

.space-y-2 > * + * {
    margin-top: var(--space-2);
}
.space-y-4 > * + * {
    margin-top: var(--space-4);
}
.space-y-5 > * + * {
    margin-top: var(--space-5);
}
.space-y-6 > * + * {
    margin-top: var(--space-6);
}

/* Responsive */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:w-1\/2 {
        width: 50%;
    }
    .lg\:px-8 {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    .lg\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Components
   ======================================== */

/* Card */
.card {
    background-color: var(--color-surface-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: none;
    border: 1px solid var(--color-border);
    padding: var(--space-8);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    border: none;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    /* Fixed line-height so <a> (link_to) and <button> (button_to) render the same height */
    line-height: 1.25;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-brand-500);
    color: white;
    box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--color-brand-600) 40%, transparent);
}

.btn-primary:hover {
    background-color: var(--color-brand-400);
    box-shadow: 0 6px 20px 0 color-mix(in srgb, var(--color-brand-600) 50%, transparent);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--color-brand-800);
    color: var(--color-brand-200);
}

.btn-secondary:hover {
    background-color: var(--color-brand-700);
}

.btn-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

.btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.3);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: scale(0.98);
}

/* Small buttons for row and secondary actions, badge-like scale; must come after the btn-* base */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
}

/* Icon-only button at default button height: even padding + a 20px icon
   add up to the same 44px as text buttons in the same row */
.btn-icon {
    padding: var(--space-3);
}

/* Filter action bar: one row at all widths — on small screens the text
   buttons give up horizontal padding (not height) so nothing wraps */
.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

@media (max-width: 480px) {
    .filter-actions .btn-primary,
    .filter-actions .btn-secondary {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Form Inputs */
.input-field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-brand-700);
    background-color: var(--color-brand-900);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 1rem;
    /* Fixed line-height so text inputs, selects and date inputs render the same height */
    line-height: 1.25;
    transition: all var(--transition-normal);
}

.input-field::placeholder {
    color: var(--color-brand-500);
}

.input-field:focus {
    outline: none;
    border-color: var(--color-brand-400);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 20%, transparent);
}

select.input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237a8baa' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

/* Native date inputs match the other fields — Safari sizes them to their
   content and ignores width until the native appearance is reset. The
   explicit height mirrors the computed height of the other fields
   (1.25rem text + vertical padding + borders). */
input[type="date"].input-field {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: calc(1.25rem + 2 * var(--space-3) + 4px);
    color-scheme: dark;
    cursor: pointer;
}

input[type="date"].input-field::-webkit-date-and-time-value {
    text-align: left;
}

/* Turbo frames are custom elements with no user-agent styling; block display
   makes them participate in stacked layouts (space-y-*) like a div */
turbo-frame {
    display: block;
}

/* Collapsible filter group (details/summary): heading left, toggle button
   right, no native disclosure triangle. .when-open/.when-closed swap the
   button label with the details state. */
.filter-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-text-primary);
    list-style: none;
}

.filter-summary::-webkit-details-marker,
.filter-summary::marker {
    display: none;
    content: none;
}

details[open] > .filter-summary .when-closed,
details:not([open]) > .filter-summary .when-open {
    display: none;
}

/* Labels */
label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-300);
    margin-bottom: var(--space-2);
}

/* Links */
.link {
    color: var(--color-brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--color-brand-300);
}

/* Alerts */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-notice {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-accent-400);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-alert {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Progress Indicator */
.progress-step {
    display: flex;
    align-items: center;
}

.progress-step-dot {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border: 2px solid;
    transition: all var(--transition-slow);
}

.progress-step-dot.completed {
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: white;
}

.progress-step-dot.current {
    background-color: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: white;
    transform: scale(1.1);
}

.progress-step-dot.pending {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-600);
    color: var(--color-brand-500);
}

.progress-step-line {
    height: 0.25rem;
    width: 3rem;
    /* Steps are top-aligned (labels may wrap) — offset the connector so its
       center sits at the dot center (dot 2.5rem/2 − line 0.25rem/2). */
    margin: 1.125rem var(--space-2) 0;
    border-radius: var(--radius-full);
}

.progress-step-label {
    display: block;
    max-width: 6.5rem;
    text-align: center;
}

.progress-step-line.completed {
    background-color: var(--color-accent-500);
}

.progress-step-line.pending {
    background-color: var(--color-brand-700);
}

/* ========================================
   Page-Specific Styles
   ======================================== */

/* Auth Pages - Split Layout */
.auth-layout {
    display: flex;
    min-height: 100vh;
}

.auth-branding {
    display: none;
    width: 50%;
    background-color: var(--color-surface);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .auth-branding {
        display: flex;
    }
}

.auth-branding-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 5rem;
    padding-bottom: 20%;
    color: var(--color-text-primary);
}

.auth-branding h1,
.logo-text {
    font-family: "Zain", sans-serif;
    font-weight: 800;
}

.auth-branding h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.auth-branding p {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
}

.auth-features {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth-feature-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-4);
}

.auth-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-400);
}

.auth-form-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--space-4);
    padding-top: var(--space-16);
}

@media (min-width: 1024px) {
    .auth-form-side {
        width: 50%;
        padding: var(--space-12) 5rem;
        justify-content: center;
    }
}

.auth-form-container {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
}

/* Onboarding Layout */
.onboarding-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
}

.onboarding-container {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
}

.onboarding-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--color-brand-800);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.onboarding-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-400);
}

.onboarding-icon-success {
    background-color: rgba(245, 158, 11, 0.25);
}

.onboarding-icon-success svg {
    color: var(--color-accent-400);
}

/* Dashboard */
.dashboard-nav-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}

@media (min-width: 640px) {
    .dashboard-nav-inner {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .dashboard-nav-inner {
        padding: 0 var(--space-8);
    }
}

.dashboard-main {
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

@media (min-width: 640px) {
    .dashboard-main {
        padding: var(--space-8) var(--space-6);
    }
}

@media (min-width: 1024px) {
    .dashboard-main {
        padding: var(--space-8);
    }
}

.content-narrow {
    max-width: 42rem;
}

/* Form page with a contextual guide beside it (e.g. Identity Provider setup).
   Single column below 1280px — the guide stacks under the form card. */
.form-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 42rem);
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 1280px) {
    .form-with-aside {
        grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
    }
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.inline-actions {
    display: flex;
    /* Prevent flex-stretch: link_to buttons would grow to the row height otherwise */
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* button_to form wrapper: size exactly like the button inside (no line-box strut) */
.inline {
    display: inline-flex;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: 1rem;
}

.back-link:hover {
    color: var(--color-text-primary);
}

.back-link-icon {
    width: 1rem;
    height: 1rem;
}

.settings-link-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Stats Cards */
.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-4);
}

.stat-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.brand {
    background-color: var(--color-brand-800);
}

.stat-icon.brand svg {
    color: var(--color-brand-400);
}

.stat-icon.accent {
    background-color: rgba(245, 158, 11, 0.25);
}

.stat-icon.accent svg {
    color: var(--color-accent-400);
}

.stat-icon.warning {
    background-color: rgba(245, 158, 11, 0.2);
}

.stat-icon.warning svg {
    color: var(--color-warning);
}

/* Settings Links */
.settings-link {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.settings-link:hover {
    background-color: var(--color-brand-800);
    text-decoration: none;
}

.settings-link-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-brand-800);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.settings-link:hover .settings-link-icon {
    background-color: var(--color-brand-700);
}

.settings-link-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-400);
}

.settings-link-title {
    font-weight: 500;
    color: var(--color-text-primary);
}

.settings-link-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ========================================
   Notification Badge (sidebar icon)
   ======================================== */

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-full);
    background-color: #dc2626;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* QR Code Container */
.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.qr-code {
    padding: var(--space-4);
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md) inset;
}

.qr-code-interactive {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform: scale(0.78);
    transform-origin: center;
    margin: -1rem 0;
}

.qr-secret-overlay {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    border-radius: var(--radius-xl);
    color: white;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    word-break: break-all;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
}

.qr-secret-text {
    letter-spacing: 0.05em;
}

.qr-secret-hint {
    font-size: 0.7rem;
    opacity: 0.6;
}

.qr-code-interactive:hover .qr-secret-overlay {
    opacity: 1;
}

.qr-copied-msg {
    color: var(--color-success);
    min-height: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s;
    margin-bottom: 0.25rem;
}

.qr-copied-msg.is-visible {
    opacity: 1;
}

.qr-copy-textarea {
    position: fixed;
    left: -9999px;
    top: 0;
}

/* Recovery Codes */
.recovery-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.recovery-code {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-brand-900);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    user-select: all;
}

/* Info Box */
.info-box {
    padding: var(--space-4);
    background-color: rgba(56, 66, 96, 0.5);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
}

.info-box-value {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    word-break: break-all;
    user-select: all;
}

/* Numbered setup steps (side guide cards) */
.setup-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: setup-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.setup-steps li {
    counter-increment: setup-step;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.setup-steps li::before {
    content: counter(setup-step);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-brand-700);
    background-color: var(--color-brand-900);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-steps li > div {
    flex: 1;
    min-width: 0;
    padding-top: 0.375rem;
}

.setup-steps .info-box {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* Warning Box */
.warning-box {
    padding: var(--space-4);
    background-color: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    display: flex;
}

.warning-box svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-warning);
    margin-right: var(--space-2);
    margin-top: 0.125rem;
}

.warning-box-title {
    font-weight: 600;
    color: #fbbf24;
}

.warning-box-text {
    font-size: 0.875rem;
    color: #fde68a;
    margin-top: var(--space-1);
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: flex-start;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-brand-300);
    accent-color: var(--color-brand-600);
}

.checkbox-group label {
    margin-left: var(--space-2);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--color-brand-300);
}

/* Nav User Info */
/* ========================================
   Animations
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* Spinner: inline progress indicator for transit pages (SSO hand-off) */
.spinner {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-border-focus);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Utility Classes
   ======================================== */

.text-sm {
    font-size: 0.875rem;
}
.text-xs {
    font-size: 0.75rem;
}
.text-lg {
    font-size: 1.125rem;
}
.text-2xl {
    font-size: 1.5rem;
}
.text-4xl {
    font-size: 2.25rem;
}

.font-bold {
    font-weight: 700;
}
.font-semibold {
    font-weight: 600;
}
.font-medium {
    font-weight: 500;
}

.text-muted {
    color: var(--color-text-muted);
}
.text-secondary {
    color: var(--color-text-secondary);
}
.text-primary {
    color: var(--color-text-primary);
}
.mb-1 {
    margin-bottom: var(--space-1);
}
.mb-2 {
    margin-bottom: var(--space-2);
}
.mb-3 {
    margin-bottom: var(--space-3);
}
.mb-4 {
    margin-bottom: var(--space-4);
}
.mb-6 {
    margin-bottom: var(--space-6);
}
.mb-8 {
    margin-bottom: var(--space-8);
}

.mt-1 {
    margin-top: var(--space-1);
}
.mt-2 {
    margin-top: var(--space-2);
}
.mt-3 {
    margin-top: var(--space-3);
}
.mt-4 {
    margin-top: var(--space-4);
}
.mt-6 {
    margin-top: var(--space-6);
}
.mt-8 {
    margin-top: var(--space-8);
}

.ml-auto {
    margin-left: auto;
}
.py-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.pt-2 {
    padding-top: var(--space-2);
}
.pt-4 {
    padding-top: var(--space-4);
}
.pt-6 {
    padding-top: var(--space-6);
}

.border-t {
    border-top: 1px solid var(--color-border);
}

.list-disc {
    list-style-type: disc;
}
.list-inside {
    list-style-position: inside;
}


/* TOTP code input */
.totp-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
}

/* ========================================
   Sidebar Navigation (Icon-only, Zendesk-style)
   ======================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 60px;
    flex-shrink: 0;
    background-color: var(--color-surface-elevated);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition-slow);
}

/* Logo */
.sidebar-logo {
    padding: var(--space-4) 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.sidebar-brand {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
}

/* Navigation icons */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) 0;
    gap: var(--space-1);
}

/* Single icon button/link */
.sidebar-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-family);
}

.sidebar-icon:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-icon-active {
    background-color: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
    color: var(--color-text-primary);
}

.sidebar-icon-active svg {
    color: var(--color-brand-400);
}

.sidebar-icon-active:hover {
    background-color: color-mix(in srgb, var(--color-brand-500) 30%, transparent);
}

/* CSS-only tooltip (appears on hover, to the right) */
.sidebar-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-brand-900);
    color: var(--color-text-primary);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 100;
    border: 1px solid var(--color-border);
}

.sidebar-icon[data-tooltip]:hover::after {
    opacity: 1;
}

/* Hide tooltip when a popover is open in the same trigger */
.sidebar-popover-trigger:has(.popover-open) .sidebar-icon[data-tooltip]::after {
    display: none;
}

/* Separator line */
/* Footer / Avatar area */
.sidebar-footer {
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Avatar with user initials */
.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-brand-700);
    color: var(--color-brand-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    text-transform: uppercase;
    position: relative;
}

.sidebar-avatar:hover {
    border-color: var(--color-brand-500);
}

/* Popover menu (for avatar and security) */
.sidebar-popover {
    display: none;
    position: absolute;
    left: calc(60px + 8px);
    bottom: 0;
    min-width: 200px;
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sidebar-popover.popover-top {
    bottom: auto;
    top: 0;
}

.sidebar-popover.popover-open {
    display: block;
}

.sidebar-popover-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-1);
}

.sidebar-popover-email {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-popover-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-family);
    text-align: left;
}

.sidebar-popover-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-popover-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-popover-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-1) 0;
}

.sidebar-popover-link-danger {
    color: var(--color-error);
}

.sidebar-popover-link-danger:hover {
    color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.1);
}

/* Icon wrapper for popover trigger */
.sidebar-popover-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content area next to sidebar */
.sidebar-content {
    flex: 1;
    margin-left: 60px;
    min-width: 0;
}

/* Popover backdrop (click to close) */
.sidebar-popover-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
}

.sidebar-popover-backdrop.popover-open {
    display: block;
}

/* Mobile top bar */
@media (max-width: 767px) {
    .sidebar {
        width: 100%;
        height: auto;
        min-height: 56px;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 var(--space-3);
        /* Keep the bar clear of the notch/status bar when installed as a PWA */
        padding-top: env(safe-area-inset-top);
        z-index: 1000;
    }

    .sidebar-logo {
        padding: 0;
        width: auto;
        margin-right: var(--space-2);
    }

    .sidebar-brand {
        width: 2rem;
        height: 2rem;
    }

    .sidebar-nav {
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
        gap: var(--space-1);
    }

    .sidebar-footer {
        padding: 0;
        border-top: none;
        width: auto;
    }

    .sidebar-content {
        margin-left: 0;
        margin-top: calc(56px + env(safe-area-inset-top));
        margin-bottom: 0;
    }

    .sidebar-icon[data-tooltip]::after {
        display: none;
    }

    .sidebar-popover {
        left: auto;
        right: 0;
        top: calc(100% + 10px);
        bottom: auto;
    }

    /* Two-column form grids collapse to one column */
    .grid-2col,
    .grid-2-1 {
        grid-template-columns: 1fr;
    }
}

/* Badge styles for tables */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--color-success);
}

.badge-info {
    background-color: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
    color: var(--color-brand-400);
}

.badge-muted {
    background-color: rgba(100, 116, 139, 0.2);
    color: var(--color-text-muted);
}

.badge-pending {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

/* Table utilities */
.border-b {
    border-bottom: 1px solid var(--color-border);
}

.space-y-3 > * + * {
    margin-top: var(--space-3);
}

.w-auto {
    width: auto;
}

.p-4 {
    padding: var(--space-4);
}

.border {
    border: 1px solid var(--color-border);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.flex-grow {
    flex-grow: 1;
}

.bg-muted {
    background-color: var(--color-brand-800);
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.word-break-all {
    word-break: break-word;
}

.icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transition: opacity var(--transition-normal);
}

/* ========================================
   Corporate Branding — Brand Palettes
   ======================================== */

/* Curated brand color scales. Each scale was derived from the default blue
   scale in OKLCH with identical lightness per step, so contrast ratios stay
   the same across all palettes. The body attribute is set from the Branding
   setting; the .palette-option-* classes reuse the same scales for the
   swatches in the palette picker. "assetnode" is the :root default. */

/* Explicit blue values so the picker swatch keeps its own colors even
   while another palette is active on the body */
.palette-option-assetnode {
    --color-brand-300: #adbbd4;
    --color-brand-400: #8196bc;
    --color-brand-500: #6278a8;
    --color-brand-700: #404d73;
}

body[data-palette="emerald"],
.palette-option-emerald {
    --color-brand-50: #f4f8f5;
    --color-brand-100: #e7f1ea;
    --color-brand-200: #cbe0d1;
    --color-brand-300: #9dc6aa;
    --color-brand-400: #65a67c;
    --color-brand-500: #318d59;
    --color-brand-600: #097442;
    --color-brand-700: #0f5e36;
    --color-brand-800: #175030;
    --color-brand-900: #1a442b;
    --color-brand-950: #0f2919;
}

body[data-palette="teal"],
.palette-option-teal {
    --color-brand-50: #f2f8f9;
    --color-brand-100: #e4f1f2;
    --color-brand-200: #c5e0e1;
    --color-brand-300: #91c5c8;
    --color-brand-400: #4ba5aa;
    --color-brand-500: #11898f;
    --color-brand-600: #0a6e73;
    --color-brand-700: #055a5e;
    --color-brand-800: #044d51;
    --color-brand-900: #044346;
    --color-brand-950: #03292b;
}

body[data-palette="violet"],
.palette-option-violet {
    --color-brand-50: #f7f6fb;
    --color-brand-100: #efecf6;
    --color-brand-200: #dcd6eb;
    --color-brand-300: #bfb3d9;
    --color-brand-400: #9d89c3;
    --color-brand-500: #8369b0;
    --color-brand-600: #6b5096;
    --color-brand-700: #574279;
    --color-brand-800: #4a3965;
    --color-brand-900: #3f3355;
    --color-brand-950: #261e34;
}

body[data-palette="ruby"],
.palette-option-ruby {
    --color-brand-50: #fbf5f5;
    --color-brand-100: #f7ebeb;
    --color-brand-200: #ecd3d4;
    --color-brand-300: #dbadaf;
    --color-brand-400: #c57f84;
    --color-brand-500: #b05b64;
    --color-brand-600: #95434c;
    --color-brand-700: #79373e;
    --color-brand-800: #653136;
    --color-brand-900: #552c30;
    --color-brand-950: #341a1c;
}

body[data-palette="copper"],
.palette-option-copper {
    --color-brand-50: #fbf6f2;
    --color-brand-100: #f6ece4;
    --color-brand-200: #ead6c6;
    --color-brand-300: #d7b295;
    --color-brand-400: #bf8859;
    --color-brand-500: #ab6623;
    --color-brand-600: #8e4f07;
    --color-brand-700: #753f03;
    --color-brand-800: #62380f;
    --color-brand-900: #533113;
    --color-brand-950: #321d0b;
}

body[data-palette="cobalt"],
.palette-option-cobalt {
    --color-brand-50: #f3f7fe;
    --color-brand-100: #e6effd;
    --color-brand-200: #cadbf9;
    --color-brand-300: #9dbbf2;
    --color-brand-400: #6694e8;
    --color-brand-500: #3c73de;
    --color-brand-600: #2459c1;
    --color-brand-700: #1e499c;
    --color-brand-800: #1e4081;
    --color-brand-900: #1d386b;
    --color-brand-950: #112241;
}

body[data-palette="indigo"],
.palette-option-indigo {
    --color-brand-50: #f6f6fc;
    --color-brand-100: #ededf9;
    --color-brand-200: #d7d7ef;
    --color-brand-300: #b6b5e1;
    --color-brand-400: #8f8dd0;
    --color-brand-500: #726cc0;
    --color-brand-600: #5b53a5;
    --color-brand-700: #4a4485;
    --color-brand-800: #3f3c6e;
    --color-brand-900: #37345d;
    --color-brand-950: #211f38;
}

body[data-palette="magenta"],
.palette-option-magenta {
    --color-brand-50: #fbf5f8;
    --color-brand-100: #f6eaf0;
    --color-brand-200: #ead2de;
    --color-brand-300: #d7acc3;
    --color-brand-400: #be7ea2;
    --color-brand-500: #a95a89;
    --color-brand-600: #8e4270;
    --color-brand-700: #73365b;
    --color-brand-800: #61304d;
    --color-brand-900: #522c42;
    --color-brand-950: #321a28;
}

body[data-palette="olive"],
.palette-option-olive {
    --color-brand-50: #f6f8f3;
    --color-brand-100: #edefe6;
    --color-brand-200: #d7ddc9;
    --color-brand-300: #b6c09c;
    --color-brand-400: #8f9d64;
    --color-brand-500: #718236;
    --color-brand-600: #5a691b;
    --color-brand-700: #495518;
    --color-brand-800: #3f491b;
    --color-brand-900: #363e1b;
    --color-brand-950: #202610;
}

body[data-palette="scarlet"],
.palette-option-scarlet {
    --color-brand-50: #fef5f3;
    --color-brand-100: #fde9e6;
    --color-brand-200: #f7cfc9;
    --color-brand-300: #eca69c;
    --color-brand-400: #dc7265;
    --color-brand-500: #cb4339;
    --color-brand-600: #ae2520;
    --color-brand-700: #8d211c;
    --color-brand-800: #75231d;
    --color-brand-900: #63221c;
    --color-brand-950: #3c1411;
}

body[data-palette="azure"],
.palette-option-azure {
    --color-brand-50: #f2f8fc;
    --color-brand-100: #e3f1f9;
    --color-brand-200: #c2dff0;
    --color-brand-300: #8cc3e3;
    --color-brand-400: #3ea0d3;
    --color-brand-500: #1682b3;
    --color-brand-600: #0f6991;
    --color-brand-700: #085577;
    --color-brand-800: #074967;
    --color-brand-900: #00405b;
    --color-brand-950: #022638;
}

/* Palette picker (Admin → Settings → Branding) */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-3);
}

.palette-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.palette-option:hover {
    border-color: var(--color-brand-400);
}

.palette-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The checked ring picks up the option's own palette variables */
.palette-option:has(input:checked) {
    border-color: var(--color-brand-400);
    background-color: color-mix(in srgb, var(--color-brand-500) 15%, transparent);
}

.palette-option:has(input:focus-visible) {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.palette-swatches {
    display: flex;
    gap: var(--space-1);
}

.palette-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
}

.palette-dot-300 { background-color: var(--color-brand-300); }
.palette-dot-500 { background-color: var(--color-brand-500); }
.palette-dot-700 { background-color: var(--color-brand-700); }

.palette-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Flash toast wrapper. Toasts persist until the next navigation, so on
   mobile they sit below the fixed top navbar (z-index 1000) instead of
   covering it */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1100;
    max-width: calc(100vw - 2rem);
}

@media (max-width: 767px) {
    .toast-container {
        top: calc(56px + env(safe-area-inset-top) + var(--space-2));
    }
}

/* Toggle switch — boolean settings. Markup: label.toggle > hidden
   checkbox + span.toggle-track + span.toggle-label */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    transition: background-color var(--transition-normal);
}

.toggle-track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    background-color: white;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal);
}

.toggle input:checked + .toggle-track {
    background-color: var(--color-brand-500);
}

.toggle input:checked + .toggle-track::after {
    transform: translateX(1.25rem);
}

.toggle input:focus-visible + .toggle-track {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.toggle-label {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* Uploaded logo previews (Branding page) */
.logo-preview {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.logo-preview-wide {
    width: auto;
    max-width: 12rem;
}

/* Custom logo on the auth pages (replaces the wordmark) */
.auth-logo {
    max-height: 4rem;
    max-width: 100%;
    width: auto;
    margin-bottom: var(--space-2);
}

/* Error pages: the 404 train speeds in, teeters on the broken edge, crashes
   into the abyss and stays down (wheels still spinning) */
.error-page {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.error-scene {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 1rem;
    overflow: hidden;
}

.error-code {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.error-wagon-1,
.error-wagon-2,
.error-wagon-3,
.error-wagon-4,
.error-wagon-5 {
    transform-box: fill-box;
    transform-origin: 90% 100%;
    animation: 6s linear 1 forwards;
}

/* The locomotive leads: teeters on the edge, flips and lands on its roof.
   Translation and rotation run on separate nested groups with the pivot baked
   into the geometry — Safari re-resolves fill-box/percentage origins per frame
   while the wheel animations run inside, which made the resting loco bob. */
.error-loco {
    animation: error-loco-move 6s linear 1 forwards;
}

.error-loco-rot {
    animation: error-loco-spin 6s linear 1 forwards;
}

@keyframes error-loco-move {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    29%  { transform: translateX(221px); }
    32%  { transform: translateX(224px); }
    36%  { transform: translateX(228px); }
    39%  { transform: translateX(231px); }
    43%  { transform: translate(240px, 12px); }
    50%  { transform: translate(288px, 60px); }
    56%  { transform: translate(310px, 106px); }
    61%  { transform: translate(311px, 82px); }
    66%  { transform: translate(312px, 106px); }
    70%  { transform: translate(312px, 100px); }
    74%  { transform: translate(312px, 104px); }
    100% { transform: translate(312px, 104px); }
}

@keyframes error-loco-spin {
    0%   { transform: rotate(0deg); }
    26%  { transform: rotate(0deg); }
    29%  { transform: rotate(8deg); }
    32%  { transform: rotate(3deg); }
    36%  { transform: rotate(14deg); }
    39%  { transform: rotate(8deg); }
    43%  { transform: rotate(24deg); }
    50%  { transform: rotate(95deg); }
    56%  { transform: rotate(183deg); }
    61%  { transform: rotate(174deg); }
    66%  { transform: rotate(181deg); }
    70%  { transform: rotate(179deg); }
    74%  { transform: rotate(179deg); }
    100% { transform: rotate(179deg); }
}

/* Decoupled wagons keep rolling and drop over the edge one after another */
.error-wagon-1 { animation-name: error-wagon-1-crash; }

@keyframes error-wagon-1-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    30%  { transform: translateX(232px); }
    36%  { transform: translateX(248px); }
    39%  { transform: translateX(252px) rotate(10deg); }
    44%  { transform: translateX(264px) translateY(20px) rotate(55deg); }
    52%  { transform: translateX(288px) translateY(100px) rotate(140deg); }
    58%  { transform: translateX(300px) translateY(122px) rotate(188deg); }
    63%  { transform: translateX(300px) translateY(106px) rotate(176deg); }
    68%  { transform: translateX(300px) translateY(122px) rotate(183deg); }
    72%  { transform: translateX(300px) translateY(118px) rotate(180deg); }
    76%  { transform: translateX(300px) translateY(120px) rotate(181deg); }
    100% { transform: translateX(300px) translateY(120px) rotate(181deg); }
}

.error-wagon-2 { animation-name: error-wagon-2-crash; }

@keyframes error-wagon-2-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    36%  { transform: translateX(258px); }
    44%  { transform: translateX(274px); }
    48%  { transform: translateX(279px) rotate(12deg); }
    54%  { transform: translateX(284px) translateY(30px) rotate(70deg); }
    62%  { transform: translateX(288px) translateY(100px) rotate(140deg); }
    66%  { transform: translateX(288px) translateY(122px) rotate(187deg); }
    71%  { transform: translateX(288px) translateY(106px) rotate(178deg); }
    76%  { transform: translateX(288px) translateY(120px) rotate(184deg); }
    100% { transform: translateX(288px) translateY(120px) rotate(184deg); }
}

/* Wagon 3 drops promptly onto the wall wagon */
.error-wagon-3 { animation-name: error-wagon-3-crash; }

@keyframes error-wagon-3-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    40%  { transform: translateX(262px); }
    52%  { transform: translateX(306px); }
    56%  { transform: translateX(308px) rotate(8deg); }
    62%  { transform: translateX(318px) translateY(60px) rotate(30deg); }
    68%  { transform: translateX(328px) translateY(110px) rotate(22deg); }
    72%  { transform: translateX(330px) translateY(130px) rotate(18deg); }
    77%  { transform: translateX(330px) translateY(116px) rotate(22deg); }
    82%  { transform: translateX(330px) translateY(128px) rotate(15deg); }
    100% { transform: translateX(330px) translateY(128px) rotate(15deg); }
}

/* Wagon 4 launches at speed, sails over the pile and wedges itself
   diagonally into the gap between the honey wagon and the loco */
.error-wagon-4 { animation-name: error-wagon-4-crash; }

@keyframes error-wagon-4-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    42%  { transform: translateX(272px); }
    56%  { transform: translateX(332px); }
    62%  { transform: translateX(356px) translateY(24px) rotate(10deg); }
    70%  { transform: translateX(384px) translateY(76px) rotate(20deg); }
    81%  { transform: translateX(404px) translateY(140px) rotate(40deg); }
    86%  { transform: translateX(404px) translateY(130px) rotate(36deg); }
    91%  { transform: translateX(404px) translateY(138px) rotate(40deg); }
    100% { transform: translateX(404px) translateY(138px) rotate(40deg); }
}

/* The very last wagon brakes at the edge, hesitates — goes down anyway,
   slides forward and leans back against the two-storey wall pile */
.error-wagon-5 { animation-name: error-wagon-5-crash; }

@keyframes error-wagon-5-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    44%  { transform: translateX(276px); }
    60%  { transform: translateX(330px); }
    72%  { transform: translateX(354px); }
    76%  { transform: translateX(358px) rotate(6deg); }
    80%  { transform: translateX(358px) rotate(2deg); }
    84%  { transform: translateX(366px) translateY(12px) rotate(14deg); }
    88%  { transform: translateX(386px) translateY(70px) rotate(8deg); }
    92%  { transform: translateX(408px) translateY(140px) rotate(0deg); }
    95%  { transform: translateX(410px) translateY(136px) rotate(-18deg); }
    98%  { transform: translateX(410px) translateY(132px) rotate(-32deg); }
    100% { transform: translateX(410px) translateY(132px) rotate(-32deg); }
}

/* Wheel geometry is centered on its group origin (positioned by an outer
   translate), so the rotation needs no transform-box/origin — that combination
   renders jittery in Safari on nested SVG animations. */
.error-wheel {
    animation: error-wheel-spin 0.6s linear infinite;
}

@keyframes error-wheel-spin {
    to { transform: rotate(360deg); }
}

.error-puff {
    opacity: 0;
    animation: error-puff-rise 1s ease-out 3.36s 1 both;
    transform-box: fill-box;
    transform-origin: center;
}

/* One dust wave per impact: loco 3.36s, wagon 1 3.48s, wagon 2 3.96s,
   wagon 3 4.32s, wagon 4 4.86s, wagon 5 5.52s */
.error-puff:nth-child(2)  { animation-delay: 3.44s; }
.error-puff:nth-child(3)  { animation-delay: 3.6s; }
.error-puff:nth-child(4)  { animation-delay: 3.5s; }
.error-puff:nth-child(5)  { animation-delay: 3.98s; }
.error-puff:nth-child(6)  { animation-delay: 4.06s; }
.error-puff:nth-child(7)  { animation-delay: 4.34s; }
.error-puff:nth-child(8)  { animation-delay: 4.42s; }
.error-puff:nth-child(9)  { animation-delay: 4.88s; }
.error-puff:nth-child(10) { animation-delay: 5.54s; }

@keyframes error-puff-rise {
    0%   { opacity: 0; transform: scale(0.2); }
    20%  { opacity: 0.85; }
    100% { opacity: 0; transform: scale(2.4) translateY(-14px); }
}

/* The whole scene jolts when the locomotive hits */
.error-scene {
    animation: error-scene-shake 0.4s linear 3.34s 1 both;
}

@keyframes error-scene-shake {
    0%, 100% { transform: translate(0, 0); }
    20%  { transform: translate(-3px, 3px); }
    40%  { transform: translate(3px, -2px); }
    60%  { transform: translate(-2px, 2px); }
    80%  { transform: translate(1px, -1px); }
}

/* Accessibility: no crash for reduced-motion users — the train just waits */
@media (prefers-reduced-motion: reduce) {
    .error-loco,
    .error-wagon-1,
    .error-wagon-2,
    .error-wagon-3,
    .error-wagon-4,
    .error-wagon-5 {
        animation: none;
        transform: translateX(120px);
    }

    .error-loco-rot,
    .error-wheel,
    .error-puff,
    .error-scene {
        animation: none;
    }
}