/* ==========================================================================
   CodeCharter Design System
   --------------------------------------------------------------------------
   Component classes built on top of design-tokens.css. Used by:
    - Marketing landing pages
    - Authenticated portal app shell
    - Docs / wiki pages
   Aim for primitives that compose, not bespoke styles per page. Any
   page-specific decoration extends a base class instead of redefining it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset + Base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--bg-base);
    font-feature-settings: 'cv01', 'cv02', 'cv03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

/* Touch devices: suppress the default dark tap-highlight that on colored
   surfaces (sidebar links, primary buttons) appears to "swallow" the text
   for a brief moment. Each interactive primitive defines its own :active
   feedback below. */
a, button, label, [role='button'] { -webkit-tap-highlight-color: transparent; }

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

/* Browser default focus rings only appear for keyboard users (Tab). Mouse
   clicks and programmatic focus (scrollIntoView, Blazor's auto-focus on
   navigation, the skip-link target) do not. Interactive primitives draw
   their own focus indicator via box-shadow above. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ds-btn:focus-visible,
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

.ds-display {
    font-size: clamp(var(--fs-36), 6vw, var(--fs-72));
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.ds-h1 {
    font-size: clamp(var(--fs-30), 4vw, var(--fs-48));
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.ds-h2 {
    font-size: clamp(var(--fs-24), 3vw, var(--fs-36));
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.ds-h3 {
    font-size: var(--fs-20);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    margin: 0;
}

.ds-lead {
    font-size: var(--fs-18);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.ds-body { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--text-primary); }
.ds-small { font-size: var(--fs-14); color: var(--text-secondary); }
.ds-tiny  { font-size: var(--fs-12); color: var(--text-muted); }

.ds-mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    color: var(--text-primary);
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.ds-container {
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.ds-container-wide   { max-width: var(--container-wide); }
.ds-container-narrow { max-width: var(--container-narrow); }

.ds-section {
    padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}

.ds-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }

.ds-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

.ds-grid {
    display: grid;
    gap: var(--space-5);
}
.ds-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.ds-btn {
    --btn-bg: transparent;
    --btn-fg: var(--text-primary);
    --btn-border: var(--border-default);
    --btn-bg-hover: var(--bg-overlay);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: var(--fw-medium);
    font-size: var(--fs-14);
    letter-spacing: 0;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}
.ds-btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Touch devices: kill the default dark tap-highlight overlay that on
   a colored button (e.g. primary green) appears to "eat" the label
   text on press. Use an explicit :active state for visual feedback. */
.ds-btn { -webkit-tap-highlight-color: transparent; }
.ds-btn:active { background: var(--btn-bg-hover); transform: translateY(1px); }

.ds-btn-primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-on);
    --btn-border: var(--accent);
    --btn-bg-hover: var(--accent-hover);
}

.ds-btn-ghost {
    --btn-border: transparent;
    --btn-bg-hover: var(--bg-overlay);
    color: var(--text-secondary);
}

.ds-btn-danger {
    --btn-bg: transparent;
    --btn-fg: var(--error);
    --btn-border: var(--error);
    --btn-bg-hover: rgba(239, 68, 68, 0.12);
}

.ds-btn-sm { height: 32px; padding-inline: var(--space-3); font-size: var(--fs-12); }
.ds-btn-lg { height: 48px; padding-inline: var(--space-5); font-size: var(--fs-16); }

/* --------------------------------------------------------------------------
   5. Inputs
   -------------------------------------------------------------------------- */

.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-label { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-primary); }
.ds-hint  { font-size: var(--fs-12); color: var(--text-muted); }

.ds-input,
.ds-textarea,
.ds-select {
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg-inset);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-14);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}

.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-muted); }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

.ds-textarea { height: auto; min-height: 96px; padding-block: var(--space-3); resize: vertical; }

.ds-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.ds-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ds-checkbox input { accent-color: var(--accent); width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   6. Cards & Surfaces
   -------------------------------------------------------------------------- */

.ds-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.ds-card:hover { border-color: var(--border-default); }

.ds-card-interactive:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.ds-card-elevated { box-shadow: var(--shadow-sm); }

.ds-card-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ds-card-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dashboard onboarding: completed steps fade back so the active step
   stands out without removing the option to re-open a finished step. */
.ds-card-done {
    background: var(--bg-base);
    border-color: var(--border-subtle);
    opacity: 0.78;
}
.ds-card-done .ds-h3 { color: var(--text-secondary); }

.ds-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--bg-base);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9em;
    margin-right: var(--space-2);
    vertical-align: middle;
}
.ds-card-done .ds-step-marker {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Pricing
   -------------------------------------------------------------------------- */

.ds-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.ds-pricing-card:hover { border-color: var(--border-default); }
.ds-pricing-card-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

/* Floating "Beliebt" badge on the featured plan. */
.ds-pricing-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

/* Hero stat line (e.g. "Bis 5 Devs"). */
.ds-pricing-stat {
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: var(--lh-tight);
}

/* Thin divider between card sections. */
.ds-pricing-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) calc(-1 * var(--space-6));
}

/* Monthly-equivalent helper underneath the yearly price. */
.ds-pricing-monthly {
    font-size: var(--fs-12);
    color: var(--text-muted);
    margin-top: calc(-1 * var(--space-2));
}

/* Support-SLA row at the card foot. */
.ds-pricing-support {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-13);
    color: var(--text-secondary);
}
.ds-pricing-support svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.ds-pricing-tier {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ds-pricing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: var(--space-2);
    min-width: 0;
}
.ds-pricing-amount {
    font-size: var(--fs-48);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    /* Keep the whole amount (incl. € and thousands separator) on one line. */
    white-space: nowrap;
    word-break: keep-all;
}
.ds-pricing-period { font-size: var(--fs-14); color: var(--text-muted); white-space: nowrap; }

/* At the 4-card grid width (~280–340 px per card on common desktops),
   €2.490 at fs-48 starts to overflow on Team and Business. Step the
   amount down at intermediate widths so it stays single-line. */
@media (max-width: 1400px) {
    .ds-pricing-amount { font-size: var(--fs-36); }
}

.ds-pricing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ds-pricing-list li {
    display: flex;
    gap: var(--space-2);
    font-size: var(--fs-14);
    color: var(--text-secondary);
}
.ds-pricing-list li::before {
    content: '✓';
    color: var(--accent);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Badges, Pills, Tags
   -------------------------------------------------------------------------- */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    background: var(--bg-overlay);
    color: var(--text-secondary);
}
.ds-badge-accent  { background: var(--accent-soft); color: var(--accent); }
.ds-badge-success { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.ds-badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.ds-badge-error   { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.ds-badge-info    { background: rgba(59, 130, 246, 0.12); color: var(--info); }

/* Badges that sit inside the active segmented-control pill (e.g. "~17% Rabatt"
   on the active Jährlich tab) need a high-contrast palette — the default
   green-tint badge disappears against the solid accent-green active state. */
.ds-segmented > .ds-segmented-active .ds-badge,
.ds-segmented > a.ds-segmented-active .ds-badge,
.ds-segmented > [aria-selected='true'] .ds-badge {
    background: var(--bg-base);
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   9. Banners (notifications inline with content)
   -------------------------------------------------------------------------- */

.ds-banner {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border-inline-start: 3px solid var(--info);
    font-size: var(--fs-14);
    color: var(--text-primary);
}
.ds-banner-success { border-color: var(--success); }
.ds-banner-warning { border-color: var(--warning); }
.ds-banner-error   { border-color: var(--error); }

/* --------------------------------------------------------------------------
   10. Tab / Segmented control (used by pricing toggle, settings)
   -------------------------------------------------------------------------- */

.ds-segmented {
    display: inline-flex;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    gap: 2px;
}
.ds-segmented > a,
.ds-segmented > button {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}
.ds-segmented > a:hover,
.ds-segmented > button:hover {
    color: var(--text-primary);
}
.ds-segmented > .ds-segmented-active,
.ds-segmented > a.ds-segmented-active,
.ds-segmented > [aria-selected='true'] {
    background: var(--accent);
    color: var(--accent-on);
    box-shadow: var(--shadow-sm);
}
.ds-segmented > .ds-segmented-active:hover,
.ds-segmented > a.ds-segmented-active:hover,
.ds-segmented > [aria-selected='true']:hover {
    color: var(--accent-on);
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

.ds-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-14);
}
.ds-table th, .ds-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
}
.ds-table th {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-wide);
}
.ds-table tbody tr:hover { background: var(--bg-overlay); }

/* --------------------------------------------------------------------------
   11b. Pricing comparison matrix
   Horizontal scroll on small viewports so the plan columns stay readable.
   -------------------------------------------------------------------------- */
.ds-compare-wrap {
    overflow-x: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
}
.ds-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-14);
    min-width: 640px;
}
.ds-compare th, .ds-compare td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
    text-align: center;
}
.ds-compare th:first-child, .ds-compare td:first-child {
    text-align: left;
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    width: 36%;
}
.ds-compare thead th {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--bg-overlay);
    border-block-end: 1px solid var(--border-default);
    position: sticky;
    top: 0;
}
.ds-compare thead th.ds-compare-featured {
    color: var(--accent);
}
.ds-compare tbody tr:last-child td { border-block-end: 0; }
.ds-compare td { color: var(--text-secondary); }
.ds-compare-check {
    display: inline-block;
    color: var(--accent);
    font-weight: var(--fw-bold);
    font-size: var(--fs-16);
}
.ds-compare-dash {
    display: inline-block;
    color: var(--text-muted);
    font-size: var(--fs-16);
}
.ds-compare-section td {
    background: var(--bg-overlay);
    color: var(--text-muted);
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--fw-semibold);
    text-align: left;
}

/* --------------------------------------------------------------------------
   12. Code block
   -------------------------------------------------------------------------- */

.ds-code {
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--fs-14);
    line-height: var(--lh-relaxed);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}
.ds-code code { white-space: inherit; }
.ds-code-positive { color: var(--success); }
.ds-code-negative { color: var(--error); }

/* --------------------------------------------------------------------------
   13. Navigation primitives
   -------------------------------------------------------------------------- */

.ds-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding-inline: var(--space-5);
    background: color-mix(in srgb, var(--bg-base) 90%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}
.ds-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-decoration: none;
}
.ds-navbar-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}
/* Fallback for the legacy text-mark (kept for tests / DesignPreview):
   when the element has children (e.g. "CG"), draw the gradient pill. */
span.ds-navbar-brand-mark {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #fff) 100%);
    color: var(--bg-base);
    font-weight: var(--fw-bold);
    font-size: var(--fs-14);
}
.ds-navbar-links {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-navbar-links a {
    color: var(--text-secondary);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
}
.ds-navbar-links a:hover { color: var(--text-primary); }
.ds-navbar-actions { display: inline-flex; gap: var(--space-2); align-items: center; }

@media (max-width: 720px) {
    .ds-navbar-links { display: none; }
}

/* --- Mobile drawer --------------------------------------------------- */
/* Hidden by default. The checkbox <input class="marketing-mobile-toggle">
   above MarketingLayout flips it open on phones. Position:fixed so the
   drawer floats over the content instead of pushing the page down. */
.ds-mobile-drawer {
    display: none;
    position: fixed;
    inset-block-start: 56px;
    inset-inline: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-block-end: 1px solid var(--border-subtle);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    z-index: 30;
}
.ds-mobile-drawer a {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
}
.ds-mobile-drawer a:hover { background: var(--bg-overlay); }
.ds-mobile-drawer-language {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
    display: flex;
    justify-content: center;
}

.marketing-mobile-toggle:checked ~ .ds-mobile-drawer { display: flex; }

.ds-mobile-burger {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.ds-mobile-burger span {
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    position: relative;
}
.ds-mobile-burger span::before,
.ds-mobile-burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
}
.ds-mobile-burger span::before { top: -6px; }
.ds-mobile-burger span::after  { top: 6px; }

@media (max-width: 720px) {
    .ds-mobile-burger { display: inline-flex; }
    /* On phones, the CTAs hide behind the burger; the theme toggle stays. */
    .ds-navbar-actions > .ds-btn { display: none; }
}

/* --- Authentication shell (login/register/forgot/reset) ------------ */
.ds-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: radial-gradient(ellipse at 50% 0%, var(--accent-soft) 0%, transparent 50%) var(--bg-base);
}
.ds-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-lg);
}

.ds-auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: var(--fw-bold);
}
.ds-auth-icon-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}
.ds-auth-icon-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* --- Card link inheritance fix ---
   When a .ds-card is rendered as an <a>, headings inside picked up the
   anchor's accent colour. Force titles to keep the primary text colour. */
a.ds-card .ds-h3,
a.ds-card .ds-h2,
a.ds-card .ds-h1 { color: var(--text-primary); }
a.ds-card { color: var(--text-primary); text-decoration: none; }
a.ds-card:hover .ds-text-accent,
a.ds-card .ds-text-accent { color: var(--accent); }

/* --------------------------------------------------------------------------
   14. Sidebar (portal/app shell)
   -------------------------------------------------------------------------- */

.ds-sidebar {
    width: 248px;
    background: var(--bg-elevated);
    border-inline-end: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-2);
}
.ds-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ds-sidebar-link:hover { background: var(--bg-overlay); color: var(--text-primary); }
.ds-sidebar-link.ds-sidebar-active { background: var(--accent-soft); color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Hero (marketing page)
   -------------------------------------------------------------------------- */

.ds-hero {
    text-align: center;
    padding-block: clamp(var(--space-7), 9vw, var(--space-9));
    background: radial-gradient(ellipse at 50% 0%, var(--accent-soft) 0%, transparent 60%);
}
.ds-hero h1 { margin-block-end: var(--space-4); }
.ds-hero .ds-lead { max-width: 640px; margin: 0 auto var(--space-5); }
.ds-hero-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.ds-footer {
    border-block-start: 1px solid var(--border-subtle);
    padding-block: var(--space-7);
    color: var(--text-secondary);
    font-size: var(--fs-14);
}
.ds-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-6);
}
.ds-footer h4 {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}
.ds-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ds-footer a { color: var(--text-secondary); }
.ds-footer a:hover { color: var(--text-primary); }
@media (max-width: 720px) { .ds-footer-grid { grid-template-columns: 1fr 1fr; } }

/* Language switcher (Wave J). Plain text buttons styled as a single
   inline group so it reads as "DE · EN" rather than a heavy form. */
.ds-language-switcher {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0;
}
.ds-language-switcher-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ds-language-switcher-btn:hover { color: var(--text-primary); }
.ds-language-switcher-btn-active {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    cursor: default;
}
.ds-language-switcher-sep { color: var(--text-muted); font-size: 0.85rem; }

/* Corner placement of the language switcher on EmptyLayout auth pages. */
.ds-auth-lang-corner {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    z-index: 10;
}

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */

.ds-divider { border: 0; border-block-start: 1px solid var(--border-subtle); margin: var(--space-5) 0; }

.ds-text-muted { color: var(--text-muted); }
.ds-text-secondary { color: var(--text-secondary); }
.ds-text-accent { color: var(--accent); }

.ds-text-center { text-align: center; }
.ds-justify-between { display: flex; justify-content: space-between; align-items: center; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.ds-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 1000;
}
.ds-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 100%;
    padding: var(--space-5);
}

/* Skip-to-content: hidden off-screen until keyboard focus pulls it in.
   Uses negative top instead of left:-9999px so screen readers still get a
   sensibly-sized element. :focus-visible would skip mouse-clicks but the
   plain :focus is more robust across older browsers. */
.ds-skip {
    position: absolute;
    top: calc(var(--space-4) * -4);
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--accent-on);
    border-radius: var(--radius-md);
    z-index: 999;
    transition: top var(--transition-fast);
    text-decoration: none;
}
.ds-skip:focus,
.ds-skip:focus-visible {
    top: var(--space-4);
    outline: 2px solid var(--accent-on);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   16. Status page
   --------------------------------------------------------------------------
   Primitives for /status. Data comes from the internal monitoring; these
   classes only describe presentation (overall banner, per-service rows,
   heartbeat history bars, incident timeline).
   -------------------------------------------------------------------------- */

.ds-status-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
}
.ds-status-hero-ok      { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.30); }
.ds-status-hero-warn    { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.30); }
.ds-status-hero-down    { background: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.30); }
.ds-status-hero-unknown { background: var(--bg-elevated); }

.ds-status-hero-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    font-size: var(--fs-24);
    line-height: 1;
}
.ds-status-hero-ok      .ds-status-hero-icon { background: rgba(16, 185, 129, 0.16); color: var(--success); }
.ds-status-hero-warn    .ds-status-hero-icon { background: rgba(245, 158, 11, 0.16); color: var(--warning); }
.ds-status-hero-down    .ds-status-hero-icon { background: rgba(239, 68, 68, 0.16);  color: var(--error); }
.ds-status-hero-unknown .ds-status-hero-icon { background: var(--bg-overlay); color: var(--text-muted); }

.ds-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}
.ds-status-dot-up      { background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14); }
.ds-status-dot-warn    { background: var(--warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14); }
.ds-status-dot-down    { background: var(--error);   box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }
.ds-status-dot-unknown { background: var(--text-muted); box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.14); }

.ds-status-service { padding: var(--space-5); }
.ds-status-service + .ds-status-service { border-top: 1px solid var(--border-subtle); }
.ds-status-service-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    flex-wrap: wrap;
}
.ds-status-service-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.ds-status-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    margin-top: var(--space-4);
    height: 34px;
}
.ds-status-bar {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--success);
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.ds-status-bar:hover  { opacity: 1; }
.ds-status-bar-up     { background: var(--success); }
.ds-status-bar-warn   { background: var(--warning); }
.ds-status-bar-down   { background: var(--error); }
.ds-status-bar-empty  { background: var(--border-default); opacity: 0.5; }

.ds-status-bars-legend {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.ds-status-metrics {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.ds-status-num { font-family: var(--font-mono); }

.ds-status-incident {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}
.ds-status-incident + .ds-status-incident { border-top: 1px solid var(--border-subtle); }
.ds-status-incident-rail {
    flex: 0 0 auto;
    padding-top: 4px;
}