/* Account preferences override the scheme/accent; System follows the browser.
   Neutral surfaces match the loadout. Ticket/report paper remains white. */
:root {
    color-scheme: var(--cloud-color-scheme, light dark);
    --cloud-background: light-dark(#d3d3d3, #303030);
    --cloud-surface: light-dark(#fafafa, #424242);
    --cloud-raised: light-dark(#f5f5f5, #4a4a4a);
    --cloud-hover: light-dark(#e8e8e8, #515151);
    --cloud-text: light-dark(#202124, #ffffff);
    --cloud-secondary: light-dark(#3d4145, #eeeeee);
    --cloud-muted: light-dark(#565b60, #d0d0d0);
    --cloud-border: light-dark(#b6b6b6, #757575);
    --cloud-divider: light-dark(#d6d6d6, #606060);
    --cloud-strong-border: light-dark(#858585, #a0a0a0);
    --cloud-primary: #ff0000;
    --cloud-primary-hover: color-mix(in srgb, var(--cloud-primary), var(--cloud-on-primary) 12%);
    --cloud-on-primary: #ffffff;
    --cloud-accent-text: light-dark(color-mix(in srgb, var(--cloud-primary), #000 35%), color-mix(in srgb, var(--cloud-primary), #fff 65%));
    --cloud-accent-background: color-mix(in srgb, var(--cloud-primary) 14%, var(--cloud-surface));
    --cloud-accent-hover: color-mix(in srgb, var(--cloud-primary) 22%, var(--cloud-surface));
    --cloud-accent-border: color-mix(in srgb, var(--cloud-primary) 45%, var(--cloud-border));
    --cloud-info-background: light-dark(#eaf1f8, #324253);
    --cloud-info-text: light-dark(#526b83, #bdd5ef);
    --cloud-warning-background: light-dark(#fff4df, #4a3d25);
    --cloud-warning-text: light-dark(#98732f, #f1cd88);
    --cloud-error-background: light-dark(#fcece8, #503035);
    --cloud-error-text: light-dark(#b75042, #ffb4ab);
    --cloud-success-background: light-dark(#e9f5ef, #2b4638);
    --cloud-success-text: light-dark(#287551, #9bdab7);
    --cloud-neutral-background: light-dark(#ededed, #4a4a4a);
    --cloud-overlay: light-dark(#17171745, #060606a6);
    --cloud-canvas: light-dark(#aaa, #303030);

    --lc-surface: var(--cloud-surface);
    --lc-surface-raised: var(--cloud-raised);
    --lc-foreground: var(--cloud-text);
    --lc-text-secondary: var(--cloud-muted);
    --lc-foreground-muted: var(--cloud-muted);
    --lc-background: var(--cloud-background);
    --lc-border: var(--cloud-border);
    --lc-surface-hover: var(--cloud-hover);
    --lc-danger: var(--cloud-error-text);
    --lc-danger-surface: var(--cloud-error-background);
    --lc-outline: var(--cloud-border);
    --lc-divider: var(--cloud-divider);
    --lc-primary: var(--cloud-primary);
    --lc-primary-hover: color-mix(in srgb, var(--cloud-primary) 7%, transparent);
    --lc-primary-selected: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    --lc-primary-pressed: color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    --lc-on-primary: var(--cloud-on-primary);
    --lc-workspace: var(--cloud-canvas);
}

input:focus, select:focus, .field select:focus, textarea:focus {
    border-color: var(--cloud-primary);
    outline: 1px solid var(--cloud-primary);
    outline-offset: -1px;
}
/* Ticket designers use the viewport remaining below the support banner. */
body:has(.cloud-ticket-workspace) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body:has(.cloud-ticket-workspace) > .support-banner { flex-shrink: 0; }
.cloud-ticket-workspace { flex: 1 1 0; min-height: 0; min-width: 0; padding: 18px; box-sizing: border-box; overflow: hidden; background: var(--cloud-background); }
:root .passkey-entry { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--cloud-border); }
:root .passkey-entry small { font-size: 12px; }
:root .passkey-list { margin-bottom: 20px; }
.login-card .passkey-enrollment { display: grid; gap: 24px; margin-top: 28px; }
.login-card .passkey-actions { display: grid; gap: 12px; }
.login-card .passkey-actions .full { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 13px 15px; text-align: center; text-decoration: none; }
.login-card [data-passkey-status]:empty { display: none; }
:root dialog[data-passkey-confirm] { color: var(--cloud-text); background: var(--cloud-surface); border: 1px solid var(--cloud-border); border-radius: 12px; padding: 24px; max-width: 400px; }
:root dialog[data-passkey-confirm]::backdrop { background: rgb(0 0 0 / 55%); }