/* --- SLA policy editor ---------------------------------------------------- */

.sd-sla-form { gap: var(--space-5); }
.sd-sla-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.sd-sla-overview article {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-sla-overview article > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent);
}
.sd-sla-overview svg { width: 20px; height: 20px; }
.sd-sla-overview article > div { display: grid; min-width: 0; }
.sd-sla-overview small { color: var(--text-tertiary); font: var(--text-xs); }
.sd-sla-overview strong { overflow: hidden; color: var(--text); font: var(--text-ui); text-overflow: ellipsis; white-space: nowrap; }
.sd-sla-form .sd-config-section { padding: 0; }
.sd-sla-form .sd-config-section > .sd-panel__body { display: grid; gap: var(--space-5); padding: var(--space-5); }
.sd-sla-form .sd-check > span { display: grid; gap: 2px; }
.sd-sla-form .sd-check small { color: var(--text-tertiary); font: var(--text-xs); font-weight: 400; }
.sd-sla-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.sd-sla-target {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.sd-sla-target > span:first-child { grid-row: 1 / 3; color: var(--accent); }
.sd-sla-target svg { width: 20px; height: 20px; }
.sd-sla-target > strong { color: var(--text); font: var(--text-sm); font-weight: 650; }
.sd-sla-target > small { min-height: 32px; color: var(--text-tertiary); font: var(--text-xs); }
.sd-sla-target .sd-input-unit { grid-column: 1 / -1; margin-top: var(--space-2); }
.sd-sla-target .sd-input-unit input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font: var(--text-ui);
}
.sd-sla-target .sd-input-unit input:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
.sd-sla-rule-list { display: grid; gap: var(--space-3); }
.sd-sla-rule-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sd-sla-rule-list__head .sd-alert { flex: 1; margin: 0; }
.sd-sla-rule-list__head .sd-alert p { margin: 2px 0 0; }
.sd-sla-rule { overflow: hidden; padding: 0; }
.sd-sla-rule > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
}
.sd-sla-rule > summary::-webkit-details-marker { display: none; }
.sd-sla-rule > summary:hover { background: var(--surface-sunken); }
.sd-sla-rule > summary > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1px var(--space-3); min-width: 0; }
.sd-sla-rule > summary i { display: grid; grid-row: 1 / 3; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font: var(--text-sm); font-style: normal; font-weight: 700; }
.sd-sla-rule > summary strong { overflow: hidden; color: var(--text); font: var(--text-ui); text-overflow: ellipsis; white-space: nowrap; }
.sd-sla-rule > summary small { color: var(--text-tertiary); font: var(--text-xs); }
.sd-sla-rule > summary b { color: var(--accent); font: var(--text-sm); font-weight: 590; }
.sd-sla-rule[open] > summary { border-bottom: 1px solid var(--border-soft); }
.sd-sla-rule__body { display: grid; gap: var(--space-5); padding: var(--space-5); }
.sd-sla-rule__section { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.sd-sla-rule__section h3, .sd-sla-rule__section p { margin: 0; }
.sd-sla-rule__section h3 { color: var(--text); font: var(--text-ui); font-weight: 650; }
.sd-sla-rule__section p { color: var(--text-tertiary); font: var(--text-sm); }
.sd-sla-condition { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.6fr) 36px; align-items: end; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sd-sla-condition + .sd-sla-condition { margin-top: var(--space-2); }
.sd-sla-condition select[multiple] { min-height: 96px; padding: var(--space-2); }
.sd-sla-condition > .sd-btn { align-self: center; width: 36px; padding: 0; font-size: 20px; }
.sd-sla-targets--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-sla-targets--compact .sd-field { padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sd-btn--danger-plain { justify-self: start; color: var(--danger-fg); background: transparent; }

@media (max-width: 900px) {
    .sd-sla-targets, .sd-sla-targets--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-sla-condition { grid-template-columns: minmax(0, 1fr) 36px; }
    .sd-sla-condition__value { grid-column: 1; }
    .sd-sla-condition > .sd-btn { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 620px) {
    .sd-sla-overview, .sd-sla-targets, .sd-sla-targets--compact { grid-template-columns: minmax(0, 1fr); }
    .sd-sla-rule-list__head { align-items: stretch; flex-direction: column; }
    .sd-sla-rule-list__head .sd-btn { width: 100%; }
    .sd-sla-form .sd-config-section > .sd-panel__body, .sd-sla-rule__body { padding: var(--space-4); }
}

/* ==========================================================================
   Service Desk — one design language
   Ported from the Lemric Forums system; the layering is load-bearing.

     1. TOKENS      values only — the single source of colour, space, type
     2. BASE        element defaults, focus, motion
     3. COMPONENTS  one block per component, defined exactly once
     4. UTILITIES   single-purpose helpers

   Rules: no raw colour below layer 1 · no component defined twice ·
   no !important outside the reduced-motion guard · no style="" in a template.

   PAGE CONVENTION — every view under templates/pages is built the same way:

     1. The layout owns the width. It emits .sd-content with at most one
        modifier; a page template never writes .sd-content itself. Two nested
        wrappers mean double padding inside half the width.
     2. Wayfinding first: .sd-crumbs on customer-facing detail views,
        .sd-back in the operator console. A view reachable only from a list
        has one or the other, never neither and never both.
     3. Then .sd-page-head — h1.sd-page-title, optional p.sd-page-lead, and
        actions as the last child. Long-form views (article, glossary entry,
        legal) put the same tokens on .sd-article__title instead, because the
        heading there is the content's own, not the screen's.
     4. Then content in .sd-section blocks. Vertical rhythm comes from the
        section, never from a margin on the element that happens to need it.

   Spec §22.3: content over decoration, one dominant goal per screen, generous
   margins, few colours, functional animation only, light and dark in full,
   WCAG 2.2 AA.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Space — 4px scale, nine steps, nothing between */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Measure. The product has exactly TWO page widths, and the navigation bar
       shares them: anything else puts the content column out of line with the
       brand and the account menu above it, which is what a reader sees as a
       broken page.

         --measure-page     everything a customer or a visitor sees
         --measure-console  the operator console, where a queue is a table and
                            a table wants columns

       980px is the width Apple's own help centre reads at: wide enough for a
       three-card row, narrow enough that a heading and the text under it stay
       in one eye span. */
    --measure-text: 68ch;
    --measure-page: 980px;
    --measure-console: 1600px;
    --measure-form: 440px;
    --control-height: 44px;

    /* Height of the sticky bar. Every element that parks under it offsets by
       this token, so changing the bar cannot leave a heading hidden behind it. */
    --nav-height: 48px;

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-display: 600 40px/1.1 var(--font);
    --text-title-1: 600 28px/1.2 var(--font);
    --text-title-2: 600 21px/1.25 var(--font);
    --text-title-3: 600 17px/1.35 var(--font);
    --text-body: 400 17px/1.5 var(--font);
    --text-ui: 400 15px/1.45 var(--font);
    --text-sm: 400 13px/1.4 var(--font);
    --text-xs: 590 12px/1.35 var(--font);
    /* Legal and footer copy: same size as --text-xs but regular weight, which
       is what keeps a whole row of small print from shouting. */
    --text-footer: 400 12px/1.35 var(--font);

    --track-display: -0.02em;
    --track-title: -0.01em;
    --track-body: 0;
    --track-sm: 0.005em;
    --track-xs: 0.02em;

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 980px;

    /* Motion */
    --motion-fast: 100ms;
    --motion-base: 180ms;
    --motion-slow: 280ms;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    /* Surfaces & text — light */
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f5f5f7;
    --border: #d2d2d7;
    --border-soft: #e5e5ea;

    --text: #1d1d1f;
    --text-secondary: #55555c;
    --text-tertiary: #6e6e73;

    --accent: #0066cc;
    --accent-hover: #0077ed;
    --accent-contrast: #ffffff;
    --accent-ring: rgb(0 102 204 / 0.35);
    --accent-tint: rgb(0 102 204 / 0.10);

    --success-fg: #0b5c1f;
    --success-bg: #e4f8e9;
    --warning-fg: #7a5200;
    --warning-bg: #fff4d6;
    --danger-fg: #b42318;
    --danger-bg: #ffeceb;
    --info-fg: #00427f;
    --info-bg: #e8f2ff;

    --elev-1: 0 1px 2px rgb(0 0 0 / 0.04);
    --elev-2: 0 8px 24px rgb(0 0 0 / 0.10);
    --elev-3: 0 20px 48px rgb(0 0 0 / 0.18);

    --focus-ring: 0 0 0 3px var(--accent-ring);

    /* Overridden per branded help centre; never referenced as a text colour. */
    --brand-accent: var(--accent);

    /* Selected segment of a segmented control. A separate pair from the accent
       pair because the dark theme needs a deeper fill: the light accent behind
       a 12px label reads as glare, whichever ink is put on it. */
    --segment-fill: var(--accent);
    --segment-ink: var(--accent-contrast);

    /* The contact flow's lower band. Barely a tint: enough to separate it from
       the header band, not enough to read as a second surface. */
    --flow-tint: #f8f8fb;
}

/* Dark — applied by explicit choice … */
:root[data-theme="dark"] {
    --surface: #1c1c1e;
    --surface-raised: #242426;
    --surface-sunken: #141416;
    --border: #48484a;
    --border-soft: #333335;

    --text: #f5f5f7;
    --text-secondary: #b8b8bf;
    --text-tertiary: #98989d;

    --accent: #2997ff;
    --accent-hover: #6cb3ff;
    --accent-contrast: #00234a;
    --segment-fill: #0a63c9;
    --segment-ink: #ffffff;
    --flow-tint: #151517;
    --accent-ring: rgb(41 151 255 / 0.45);
    --accent-tint: rgb(41 151 255 / 0.16);

    --success-fg: #30d158;
    --success-bg: rgb(48 209 88 / 0.16);
    --warning-fg: #ffd60a;
    --warning-bg: rgb(255 214 10 / 0.16);
    --danger-fg: #ff8a80;
    --danger-bg: rgb(255 69 58 / 0.16);
    --info-fg: #6cb3ff;
    --info-bg: rgb(41 151 255 / 0.16);

    /* Dark expresses elevation with surface lightness, not shadow */
    --elev-1: none;
    --elev-2: 0 8px 24px rgb(0 0 0 / 0.45);
    --elev-3: 0 20px 48px rgb(0 0 0 / 0.6);
}

/* … and by OS preference, unless light was explicitly chosen. Both mechanisms
   set the same tokens, so components never need to know which one is active. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #1c1c1e;
        --surface-raised: #242426;
        --surface-sunken: #141416;
        --border: #48484a;
        --border-soft: #333335;

        --text: #f5f5f7;
        --text-secondary: #b8b8bf;
        --text-tertiary: #98989d;

        --accent: #2997ff;
        --accent-hover: #6cb3ff;
        --accent-contrast: #00234a;
    --segment-fill: #0a63c9;
    --segment-ink: #ffffff;
    --flow-tint: #151517;
        --accent-ring: rgb(41 151 255 / 0.45);
        --accent-tint: rgb(41 151 255 / 0.16);

        --success-fg: #30d158;
        --success-bg: rgb(48 209 88 / 0.16);
        --warning-fg: #ffd60a;
        --warning-bg: rgb(255 214 10 / 0.16);
        --danger-fg: #ff8a80;
        --danger-bg: rgb(255 69 58 / 0.16);
        --info-fg: #6cb3ff;
        --info-bg: rgb(41 151 255 / 0.16);

        --elev-1: none;
        --elev-2: 0 8px 24px rgb(0 0 0 / 0.45);
        --elev-3: 0 20px 48px rgb(0 0 0 / 0.6);
    }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

/* A class that sets `display` outranks the UA's `[hidden]` rule, so any
   component with `display: grid|flex` would silently ignore the attribute.
   Every disclosure in this product depends on `hidden` meaning hidden. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.sd-body {
    margin: 0;
    min-height: 100vh;
    background: var(--surface);
    color: var(--text);
    font: var(--text-body);
    letter-spacing: var(--track-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

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

img { max-width: 100%; }

/* One focus treatment, everywhere. The transparent outline is what makes the
   ring survive Windows High Contrast / forced-colors mode. */
:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .sd-nav, .sd-footer, .sd-flashes, .sd-skip, .sd-article__feedback { display: none; }
    body.sd-body { background: #fff; color: #000; }
    .sd-content { max-width: none; padding: 0; }
}


/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* --- Page shell ---------------------------------------------------------- */

.sd-main { background: var(--surface); }

.sd-content {
    width: 100%;
    max-width: var(--measure-page);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-9);
}
/* Kept as an alias, not as a third width. It used to be 1120px while the
   navigation bar stayed at 980px, so every page carrying it rendered a content
   column wider than the header above it — the misalignment read as a broken
   layout on marketing, pricing and legal pages alike. Handlers and the
   marketing layout still name it, so the selector has to exist; what it must
   never do again is disagree with the bar. */
.sd-content--wide { max-width: var(--measure-page); }
.sd-content--console { max-width: var(--measure-console); }
.sd-content--form { max-width: var(--measure-form); padding-top: var(--space-7); }
/* Long-form pages: an article, a glossary entry, a legal document. Narrower
   than the grid because prose past ~75 characters a line costs the reader the
   start of the next one. */
.sd-content--reading { max-width: 780px; }

/* The layout owns this wrapper. A page that emits its own nests two of them
   and ends up with double padding inside half the width, so the rule is: no
   template under pages/ ever writes .sd-content. */

.sd-body--sunken { background: var(--surface-sunken); }
.sd-body--sunken .sd-main { background: transparent; }

.sd-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.sd-page-title {
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
}
.sd-page-lead {
    margin: var(--space-2) 0 0;
    max-width: 60ch;
    font: var(--text-sm);
    color: var(--text-secondary);
}

.sd-vh {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.sd-skip {
    position: fixed;
    left: var(--space-3);
    top: -100px;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font: var(--text-ui);
    font-weight: 600;
    transition: top var(--motion-base) var(--ease);
}
.sd-skip:focus { top: var(--space-3); text-decoration: none; }


/* --- Navigation — one bar ------------------------------------------------ */

.sd-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-soft);
}
.sd-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--measure-page);
    min-height: var(--nav-height);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
.sd-nav--wide .sd-nav__inner { max-width: var(--measure-console); }
.sd-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font: var(--text-title-3);
    letter-spacing: var(--track-title);
    white-space: nowrap;
}
.sd-nav__brand:hover { text-decoration: none; color: var(--text); }
.sd-nav__mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--brand-accent);
    color: var(--accent-contrast);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.sd-nav__sections {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.sd-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: var(--text-ui);
    white-space: nowrap;
}
.sd-nav__link:hover { color: var(--text); text-decoration: none; }
.sd-nav__link[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
    background: var(--surface-sunken);
}
.sd-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}
.sd-nav__meta {
    font: var(--text-sm);
    color: var(--text-tertiary);
}
.sd-nav__context {
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font: var(--text-sm);
}

/* Search in the bar */
.sd-search { position: relative; display: flex; }
.sd-search__input {
    width: 220px;
    height: 36px;
    padding: 0 var(--space-3) 0 34px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    color: var(--text);
    font: var(--text-ui);
    transition: width var(--motion-base) var(--ease), border-color var(--motion-fast) var(--ease);
}
.sd-search__input::placeholder { color: var(--text-tertiary); }
.sd-search__input:focus {
    width: 300px;
    border-color: var(--accent);
    outline: 2px solid transparent;
}

/* Inbox */
.sd-inbox {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}
.sd-inbox:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-inbox__count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-contrast);
    font: var(--text-xs);
    font-size: 10px;
    line-height: 13px;
    text-align: center;
}

/* Account menu */
.sd-account { position: relative; }
.sd-account > summary {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    list-style: none;
    cursor: pointer;
}
.sd-account > summary::-webkit-details-marker { display: none; }
.sd-account__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-3);
}
.sd-account__name { font: var(--text-ui); font-weight: 600; color: var(--text); }
.sd-account__handle { font: var(--text-sm); color: var(--text-tertiary); }

.sd-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-ui);
    font-weight: 600;
    object-fit: cover;
}
.sd-avatar--sm { width: 28px; height: 28px; font: var(--text-sm); font-weight: 600; }
.sd-avatar--lg { width: 56px; height: 56px; font: var(--text-title-3); }
.sd-avatar--agent { background: var(--accent-tint); color: var(--accent); }


/* --- Menu / popover ------------------------------------------------------ */

.sd-menu { position: relative; }
.sd-menu > summary { list-style: none; cursor: pointer; }
.sd-menu > summary::-webkit-details-marker { display: none; }
.sd-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 50;
    min-width: 200px;
    padding: var(--space-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--elev-2);
    animation: sd-menu-in var(--motion-base) var(--ease);
}
.sd-menu__panel--lg { width: 260px; padding: var(--space-2); }
.sd-menu__panel--left { right: auto; left: 0; }
@keyframes sd-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.sd-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: var(--text-ui);
    text-align: left;
    cursor: pointer;
}
.sd-menu__item:hover,
.sd-menu__item.is-active {
    background: var(--surface-sunken);
    text-decoration: none;
    color: var(--text);
}
.sd-menu__rule { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-1) 0; }
.sd-menu__label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.sd-menu__group { display: flex; flex-direction: column; gap: 2px; }
.sd-menu__chevron { transition: transform var(--motion-base) var(--ease); }
.sd-menu[open] .sd-menu__chevron { transform: rotate(180deg); }


/* --- Button — one component ---------------------------------------------- */

.sd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: var(--text-ui);
    font-weight: 590;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease);
}
.sd-btn:hover { text-decoration: none; }
.sd-btn:active { transform: scale(0.98); }

/* Touch targets reach 44px on touch devices by growing the control itself. An
   absolutely-positioned overlay would be invisible but would also overhang
   neighbouring controls in dense rows and intercept their taps. */
@media (pointer: coarse) {
    .sd-btn,
    .sd-btn--sm { min-height: 44px; }
    .sd-btn--icon { min-width: 44px; }
    .sd-nav__link,
    .sd-menu__item,
    .sd-console__link,
    .sd-tabs__item { min-height: 44px; }
    .sd-icon-link,
    .sd-inbox { width: 44px; height: 44px; }
}

.sd-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.sd-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }

.sd-btn--secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.sd-btn--secondary:hover { background: var(--surface-sunken); color: var(--text); }
.sd-btn--secondary.is-active {
    background: var(--surface-sunken);
    border-color: var(--text-secondary);
    font-weight: 600;
}

.sd-btn--plain {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
    padding: 0 var(--space-2);
}
.sd-btn--plain:hover { color: var(--accent-hover); text-decoration: underline; }

.sd-btn--danger { color: var(--danger-fg); border-color: color-mix(in srgb, var(--danger-fg) 35%, transparent); }
.sd-btn--danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.sd-btn--primary.sd-btn--danger {
    background: var(--danger-fg);
    border-color: var(--danger-fg);
    color: #fff;
}

.sd-btn--sm { height: 30px; padding: 0 var(--space-3); font: var(--text-sm); font-weight: 590; }
.sd-btn--lg { height: 44px; padding: 0 var(--space-5); }
.sd-btn--pill { border-radius: var(--radius-full); }
.sd-btn--block { width: 100%; }
.sd-btn--icon { width: 36px; padding: 0; }
.sd-btn--icon.sd-btn--sm { width: 30px; }

.sd-btn:disabled,
.sd-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
/* Loading state. The label stays in place so the button does not resize and
   shift everything beside it. */
.sd-btn.is-loading { color: transparent; pointer-events: none; }
.sd-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--accent-contrast);
    animation: sd-spin 700ms linear infinite;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

.sd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.sd-actions--end { justify-content: flex-end; }

/* Non-interactive metadata that sits in a button row. Never a real control. */
.sd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font: var(--text-sm);
    color: var(--text-tertiary);
}

.sd-icon-link {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
}
.sd-icon-link:hover { color: var(--accent); background: var(--surface-sunken); text-decoration: none; }


/* --- Chip — shape carries meaning ---------------------------------------- */

.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    line-height: 1.5;
    white-space: nowrap;
}

/* Pill = navigable. It is a link. The accent is a mark, not the text colour:
   generated hues cannot guarantee 4.5:1 as text, but a dot beside readable
   text identifies just as well and always passes. */
.sd-chip--nav {
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-accent) 12%, var(--surface));
    color: var(--text);
}
.sd-chip--nav::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
    flex-shrink: 0;
}
.sd-chip--nav:hover {
    background: color-mix(in srgb, var(--brand-accent) 22%, var(--surface));
    text-decoration: none;
    color: var(--text);
}

/* Rectangle = state. It is a fact. */
.sd-chip--state {
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.sd-chip--success { background: var(--success-bg); color: var(--success-fg); }
.sd-chip--warning { background: var(--warning-bg); color: var(--warning-fg); }
.sd-chip--danger { background: var(--danger-bg); color: var(--danger-fg); }
.sd-chip--info { background: var(--info-bg); color: var(--info-fg); }


/* --- Card ---------------------------------------------------------------- */

.sd-card {
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
.sd-card + .sd-card { margin-top: var(--space-4); }
.sd-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.sd-card__title { font: var(--text-title-2); letter-spacing: var(--track-title); }
.sd-card__rule { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-5) 0; }
.sd-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}


/* --- Field — one input system -------------------------------------------- */

.sd-form { display: grid; gap: var(--space-4); }
.sd-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}

.sd-field { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.sd-field__label { font: var(--text-xs); letter-spacing: var(--track-xs); color: var(--text-secondary); }
.sd-field__label .sd-required { color: var(--danger-fg); margin-left: 2px; }
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]), select, textarea),
.sd-input {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font: var(--text-ui);
    transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
select:not([multiple]),
select.sd-input,
.sd-settings__control:is(select) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-color: var(--surface-raised);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px;
}
textarea,
textarea.sd-input { min-height: 96px; resize: vertical; }
:where(input, select, textarea):focus-visible,
.sd-input:focus {
    outline: 2px solid transparent;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
:where(input, select, textarea):disabled,
.sd-input:disabled {
    opacity: 0.5;
    background-color: var(--surface-sunken);
    cursor: not-allowed;
}
.sd-field[data-invalid] input:not([type="checkbox"]):not([type="radio"]),
.sd-field[data-invalid] select,
.sd-field[data-invalid] textarea,
.sd-input[aria-invalid="true"] { border-color: var(--danger-fg); }
.sd-field__hint { margin: 0; font: var(--text-sm); color: var(--text-tertiary); }
.sd-field__error { margin: 0; font: var(--text-sm); color: var(--danger-fg); }

.sd-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 32px;
    padding: var(--space-1) 0;
    font: var(--text-ui);
    color: var(--text);
    cursor: pointer;
}
.sd-check input {
    appearance: auto;
    -webkit-appearance: auto;
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 2px 0 0;
    accent-color: var(--accent);
}
.sd-check__body { display: grid; gap: 2px; }
.sd-check__desc { font: var(--text-sm); color: var(--text-tertiary); }

.sd-fieldset,
fieldset.sd-field {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.sd-fieldset > legend,
fieldset.sd-field > legend,
.sd-fieldset__legend {
    float: none;
    width: 100%;
    margin: 0 0 var(--space-2);
    padding: 0;
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    color: var(--text-secondary);
}
.sd-fieldset__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.sd-fieldset__options {
    display: grid;
    gap: var(--space-2);
}

.sd-errors {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    list-style: none;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-fg);
    font: var(--text-ui);
}
.sd-errors li + li { margin-top: var(--space-1); }


/* --- Flash --------------------------------------------------------------- */

.sd-flashes {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-3));
    left: 50%;
    z-index: 60;
    display: grid;
    gap: var(--space-2);
    width: min(28rem, calc(100vw - 2 * var(--space-4)));
    transform: translateX(-50%);
    pointer-events: none;
}
.sd-flash {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-fg);
    font: var(--text-ui);
    box-shadow: var(--elev-2);
    pointer-events: auto;
    animation: sd-flash-in var(--motion-base) var(--ease);
}
.sd-flash--success { background: var(--success-bg); color: var(--success-fg); }
.sd-flash--warning { background: var(--warning-bg); color: var(--warning-fg); }
.sd-flash--error { background: var(--danger-bg); color: var(--danger-fg); }
@keyframes sd-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .sd-flash { animation: none; } }

/* An inline notice belongs to the content, unlike a flash which belongs to the
   action that just happened. Used for the language fallback banner (§6.5). */
.sd-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-fg);
    font: var(--text-ui);
}
.sd-notice--warning { background: var(--warning-bg); color: var(--warning-fg); }
.sd-notice--danger { background: var(--danger-bg); color: var(--danger-fg); }
.sd-notice p { margin: 0; }


/* --- Breadcrumb ---------------------------------------------------------- */

.sd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font: var(--text-sm);
    color: var(--text-secondary);
}
.sd-crumbs__sep { color: var(--text-tertiary); }
.sd-crumbs [aria-current="page"] { color: var(--text-secondary); }


/* --- Tabs — segmented ---------------------------------------------------- */

.sd-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow-x: auto;
}
.sd-tabs__item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: 6px;
    color: var(--text-secondary);
    font: var(--text-ui);
    white-space: nowrap;
}
.sd-tabs__item:hover { color: var(--text); text-decoration: none; }
.sd-tabs__item[aria-current] {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--elev-1);
}

.sd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}


/* --- Help centre home ---------------------------------------------------- */

/* One dominant goal: find the answer. The hero carries the search field and
   nothing that competes with it (spec §6.1). */
.sd-hero {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-5) var(--space-6);
    text-align: center;
}
.sd-hero__title {
    font: var(--text-display);
    letter-spacing: var(--track-display);
    max-width: 20ch;
}
.sd-hero__lead {
    margin: 0;
    max-width: 56ch;
    font: var(--text-body);
    color: var(--text-secondary);
}
.sd-hero__search { width: min(640px, 100%); }

.sd-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--accent);
    font: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sd-marketing-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: var(--space-8);
    min-height: 610px;
    padding: var(--space-8) 0;
}
.sd-marketing-hero__title,
.sd-pricing-head h1 {
    max-width: 14ch;
    font: var(--text-display);
    letter-spacing: var(--track-display);
}
.sd-marketing-hero__lead,
.sd-pricing-head > p:last-child {
    max-width: 58ch;
    margin: var(--space-4) 0 var(--space-5);
    color: var(--text-secondary);
    font: var(--text-body);
}
.sd-marketing-hero--premium { grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr); min-height: 680px; }
.sd-marketing-hero__copy { position: relative; z-index: 1; }
.sd-marketing-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sd-marketing-hero__note { margin: var(--space-3) 0 0; color: var(--text-tertiary); font: var(--text-xs); }
.sd-product-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-2);
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.sd-product-preview__bar { display: flex; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); }
.sd-product-preview__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.sd-product-preview__bar small { margin-left: auto; color: var(--text-tertiary); font: var(--text-xs); }
.sd-product-preview__body { display: grid; grid-template-columns: 84px 1fr; min-height: 390px; }
.sd-product-preview__body aside { display: grid; align-content: start; gap: 18px; padding: 25px; border-right: 1px solid var(--border-soft); background: var(--surface-sunken); }
.sd-product-preview__body aside i { display: block; width: 34px; height: 7px; border-radius: 8px; background: var(--border); }
.sd-product-preview__body aside strong { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); font-style: normal; }
.sd-product-preview__main { padding: 32px; }
.sd-product-preview__top { display: flex; align-items: center; justify-content: space-between; font: var(--text-title-3); }
.sd-product-preview__top b { display: grid; place-items: center; min-width: 28px; height: 24px; border-radius: var(--radius-full); background: var(--accent-tint); color: var(--accent); font-size: 12px; }
.sd-product-preview__heading { width: 46%; height: 20px; border-radius: 8px; background: var(--text); opacity: .86; }
.sd-product-preview__search { width: 100%; height: 42px; margin: 24px 0; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-sunken); }
.sd-product-preview__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sd-product-preview__cards b { display: grid; align-content: space-between; height: 92px; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sd-product-preview__cards small { color: var(--text-tertiary); font: var(--text-xs); font-weight: 500; }
.sd-product-preview__cards strong { font: var(--text-title-2); }
.sd-product-preview__rows { display: grid; gap: 12px; margin-top: 25px; }
.sd-product-preview__rows i { height: 13px; border-radius: 7px; background: var(--surface-sunken); }
.sd-product-preview--real { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); box-shadow: 0 30px 80px color-mix(in srgb, var(--text) 16%, transparent), var(--elev-2); }
.sd-product-preview__tickets { display: grid; margin-top: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.sd-product-preview__tickets i { display: grid; grid-template-columns: 72px minmax(0, 1fr) 58px; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--border-soft); font-style: normal; }
.sd-product-preview__tickets i:last-child { border-bottom: 0; }
.sd-product-preview__tickets span { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; }
.sd-product-preview__tickets strong { overflow: hidden; font: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.sd-product-preview__tickets em { height: 8px; border-radius: var(--radius-full); background: var(--accent-tint); }
.sd-marketing-proof { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--border-soft); }
.sd-marketing-proof span { display: grid; place-items: center; min-height: 74px; padding: var(--space-3); color: var(--text-secondary); font: var(--text-sm); font-weight: 590; text-align: center; }
.sd-marketing-story { padding: calc(var(--space-9) + var(--space-4)) 0 var(--space-9); }
.sd-marketing-story > header { max-width: 760px; margin-bottom: var(--space-7); }
.sd-marketing-story > header h2 { font: var(--text-display); letter-spacing: var(--track-display); }
.sd-marketing-story > header > p:last-child { max-width: 62ch; margin-top: var(--space-3); color: var(--text-secondary); }
.sd-marketing-story__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.sd-marketing-story__grid article { padding: var(--space-6); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-marketing-story__grid h3 { margin: var(--space-4) 0 var(--space-2); font: var(--text-title-2); }
.sd-marketing-story__grid p { margin: 0; color: var(--text-secondary); }
.sd-marketing-story__grid ul { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-soft); list-style: none; }
.sd-marketing-story__grid li { position: relative; padding-left: 22px; color: var(--text-secondary); font: var(--text-sm); }
.sd-marketing-story__grid li::before { content: "✓"; position: absolute; left: 0; color: var(--success-fg); font-weight: 700; }
.sd-marketing-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.sd-marketing-features article { padding: var(--space-6) var(--space-5); border-right: 1px solid var(--border-soft); }
.sd-marketing-features article:last-child { border-right: 0; }
.sd-marketing-features h2 { margin: var(--space-4) 0 var(--space-2); font: var(--text-title-3); }
.sd-marketing-features p { margin: 0; color: var(--text-secondary); font: var(--text-sm); }
.sd-feature-icon { color: var(--accent); font: var(--text-xs); font-weight: 700; }
.sd-marketing-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: calc(var(--space-9) + var(--space-3)) 0;
}
.sd-marketing-flow h2, .sd-marketing-cta h2 { font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-marketing-flow > div > p:last-child, .sd-marketing-cta p { max-width: 56ch; margin-top: var(--space-3); color: var(--text-secondary); }
.sd-marketing-flow ol { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sd-marketing-flow li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); font-weight: 600; }
.sd-marketing-flow li span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); }
.sd-marketing-flow li div { display: grid; gap: 2px; }
.sd-marketing-flow li small { color: var(--text-secondary); font-weight: 400; }
.sd-marketing-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); padding: var(--space-7); border-radius: var(--radius-lg); background: var(--text); color: var(--surface); }
.sd-marketing-cta p { color: color-mix(in srgb, var(--surface) 72%, transparent); }
.sd-marketing-cta .sd-eyebrow { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.sd-marketing-cta > div:last-child { display: grid; justify-items: center; gap: var(--space-2); flex: 0 0 auto; }
.sd-marketing-cta > div:last-child small { color: color-mix(in srgb, var(--surface) 62%, transparent); font: var(--text-xs); }

.sd-pricing-head { max-width: 760px; margin: 0 auto; padding: var(--space-8) 0 var(--space-7); text-align: center; }
.sd-pricing-head h1 { max-width: none; }
.sd-pricing-head > p:last-child { margin-right: auto; margin-left: auto; }
.sd-pricing-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; }
.sd-pricing-card { padding: var(--space-6); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--elev-2); }
.sd-pricing-card__price { display: grid; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); }
.sd-pricing-card__price strong { font: var(--text-display); letter-spacing: var(--track-display); }
.sd-pricing-card__price span, .sd-pricing-card__free { color: var(--text-secondary); font: var(--text-sm); }
.sd-pricing-card__free { margin: 0 0 var(--space-5); }
.sd-pricing-card__rule { margin: var(--space-6) 0 var(--space-5); border-top: 1px solid var(--border-soft); }
.sd-pricing-card h2, .sd-pricing-explain h2 { font: var(--text-title-3); }
.sd-check-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.sd-check-list li { position: relative; padding-left: 26px; color: var(--text-secondary); }
.sd-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success-fg); font-weight: 700; }
.sd-pricing-explain { display: grid; grid-template-rows: auto 1fr; gap: var(--space-5); }
.sd-pricing-note, .sd-pricing-table { padding: var(--space-6); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-pricing-note p { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.sd-pricing-table table { width: 100%; margin-top: var(--space-4); border-collapse: collapse; }
.sd-pricing-table th, .sd-pricing-table td { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.sd-pricing-table th:last-child, .sd-pricing-table td:last-child { text-align: right; }
.sd-pricing-table th { color: var(--text-tertiary); font: var(--text-xs); }
.sd-pricing-faq { padding: var(--space-9) 0; }
.sd-pricing-faq > h2 { margin-bottom: var(--space-5); font: var(--text-title-1); }
.sd-pricing-faq > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.sd-pricing-faq article { padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.sd-pricing-faq h3 { font: var(--text-title-3); }
.sd-pricing-faq p { margin-top: var(--space-2); color: var(--text-secondary); }

@media (max-width: 900px) {
    .sd-marketing-hero { grid-template-columns: 1fr; min-height: 0; padding: var(--space-7) 0; }
    .sd-product-preview { transform: none; }
    .sd-marketing-features { grid-template-columns: 1fr 1fr; }
    .sd-marketing-features article:nth-child(2) { border-right: 0; }
    .sd-marketing-features article:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
    .sd-pricing-grid { grid-template-columns: 1fr; }
    .sd-marketing-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sd-marketing-story__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .sd-marketing-hero { gap: var(--space-6); }
    .sd-marketing-hero__title, .sd-pricing-head h1 { font: var(--text-title-1); }
    .sd-product-preview__body { grid-template-columns: 52px 1fr; min-height: 280px; }
    .sd-product-preview__body aside { padding: 20px 12px; }
    .sd-product-preview__main { padding: 22px 18px; }
    .sd-product-preview__cards { grid-template-columns: 1fr; }
    .sd-product-preview__cards b { height: 42px; }
    .sd-marketing-features, .sd-marketing-flow, .sd-pricing-faq > div { grid-template-columns: 1fr; }
    .sd-marketing-features article { border-right: 0; border-bottom: 1px solid var(--border-soft); }
    .sd-marketing-features article:last-child { border-bottom: 0; }
    .sd-marketing-flow { gap: var(--space-6); padding: var(--space-8) 0; }
    .sd-marketing-cta { display: grid; padding: var(--space-5); }
    .sd-pricing-head { padding: var(--space-7) 0 var(--space-5); }
    .sd-pricing-card, .sd-pricing-note, .sd-pricing-table { padding: var(--space-5); }
    .sd-marketing-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-marketing-story { padding-top: var(--space-8); }
    .sd-marketing-story > header h2 { font: var(--text-title-1); }
}

.sd-bigsearch { position: relative; display: flex; }
.sd-bigsearch__input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-5) 0 52px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background-color: var(--surface-raised);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px 50%;
    color: var(--text);
    font: var(--text-body);
    box-shadow: var(--elev-1);
}
.sd-bigsearch__input:focus {
    border-color: var(--accent);
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}
.sd-bigsearch__suggestions {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0; right: 0;
    z-index: 30;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--elev-2);
    text-align: left;
}
.sd-bigsearch__suggestion {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: var(--text-ui);
}
.sd-bigsearch__suggestion:hover,
.sd-bigsearch__suggestion.is-active { background: var(--surface-sunken); text-decoration: none; }

.sd-section { margin-bottom: var(--space-8); }
/* A section that follows body copy rather than another section needs the gap
   above it too; this replaces the inline margins that used to be sprinkled on
   individual elements. */
.sd-section--spaced { margin-top: var(--space-7); }
.sd-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.sd-section__title { font: var(--text-title-2); letter-spacing: var(--track-title); }
.sd-section__lead {
    margin: var(--space-1) 0 0;
    max-width: 62ch;
    font: var(--text-sm);
    color: var(--text-secondary);
}

/* Topic grid. Two columns on desktop, one on a phone (spec §8.1 applies the
   same rhythm to the contact wizard, which reuses .sd-choice below). */
.sd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}
.sd-grid--two { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.sd-topic-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    color: var(--text);
    transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.sd-topic-card:hover {
    border-color: var(--accent);
    text-decoration: none;
    color: var(--text);
    transform: translateY(-1px);
}
.sd-topic-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent);
}
.sd-topic-card__name { font: var(--text-title-3); }
.sd-topic-card__desc { margin: 0; font: var(--text-sm); color: var(--text-secondary); }
.sd-topic-card__count { font: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-xs); }

/* Public help landing. Broad whitespace, restrained borders and a clear
   guide directory make the page read as one documentation product. */
.sd-help-landing { display: grid; gap: var(--space-9); padding-bottom: var(--space-7); }
.sd-help-intro { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) 0 var(--space-6); text-align: center; }
.sd-help-intro h1 { max-width: 18ch; font: var(--text-display); letter-spacing: var(--track-display); }
.sd-help-intro > p:not(.sd-eyebrow) { max-width: 58ch; margin: 0; color: var(--text-secondary); font: var(--text-body); }
.sd-help-intro__search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); width: min(720px, 100%); min-height: 58px; margin-top: var(--space-5); padding: 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text-tertiary); box-shadow: var(--elev-1); }
.sd-help-intro__search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.sd-help-intro__search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: var(--text-ui); }
.sd-help-section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.sd-help-section-head h2, .sd-help-section-head p { margin: 0; }
.sd-help-section-head h2 { font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-help-section-head p { max-width: 60ch; color: var(--text-secondary); }
.sd-help-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.sd-help-guide { position: relative; display: grid; align-content: start; gap: var(--space-3); min-height: 220px; padding: var(--space-6); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); }
.sd-help-guide:hover { border-color: var(--border); box-shadow: var(--elev-2); color: var(--text); text-decoration: none; transform: translateY(-1px); }
.sd-help-guide__icon { width: 36px; height: 36px; margin-bottom: var(--space-3); color: var(--text-secondary); }
.sd-help-guide__icon svg { width: 100%; height: 100%; }
.sd-help-guide strong { font: var(--text-title-2); }
.sd-help-guide > span:not(.sd-help-guide__icon):not(.sd-help-guide__arrow) { color: var(--text-secondary); }
.sd-help-guide__arrow { position: absolute; right: var(--space-5); bottom: var(--space-5); color: var(--accent); font-size: 1.2rem; }
.sd-help-directory { padding-top: var(--space-7); border-top: 1px solid var(--border-soft); }
.sd-help-directory__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.sd-help-directory__grid > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 88px; padding: var(--space-4) 0; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.sd-help-directory__grid > a:hover { color: var(--accent); text-decoration: none; }
.sd-help-directory__grid > a > span:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.sd-help-directory__grid strong { font: var(--text-title-3); }
.sd-help-directory__grid small { overflow: hidden; color: var(--text-secondary); font: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.sd-help-directory__grid > a > span:last-child { color: var(--accent); }
.sd-help-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-7); border-top: 1px solid var(--border-soft); }
.sd-help-actions > a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); color: var(--text); }
.sd-help-actions > a:hover { border-color: var(--border); box-shadow: var(--elev-1); text-decoration: none; }
.sd-help-actions__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-sunken); font: var(--text-title-3); }
.sd-help-actions__icon svg { width: 25px; height: 25px; }
.sd-help-actions > a > span:nth-child(2) { display: grid; gap: var(--space-1); }
.sd-help-actions strong { font: var(--text-title-3); }
.sd-help-actions small { color: var(--text-secondary); font: var(--text-sm); }
.sd-help-actions > a > span:last-child { color: var(--accent); }

@media (max-width: 900px) {
    .sd-help-guide-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-help-guide { min-height: 170px; }
}
@media (max-width: 700px) {
    .sd-help-landing { gap: var(--space-7); }
    .sd-help-intro { padding-top: var(--space-6); }
    .sd-help-directory__grid, .sd-help-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Topic articles use the same quiet, full-width directory treatment as the
   help landing page: one clear target per row, useful context, no card chrome. */
.sd-article-list { margin: 0; padding: 0; border-top: 1px solid var(--border-soft); list-style: none; }
.sd-article-list > li { border-bottom: 1px solid var(--border-soft); }
.sd-article-list__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    min-height: 112px;
    padding: var(--space-5) 0;
    color: var(--text);
}
.sd-article-list__link:hover { color: var(--text); text-decoration: none; }
.sd-article-list__link:hover .sd-article-list__title,
.sd-article-list__link:hover .sd-article-list__arrow { color: var(--accent); }
.sd-article-list__body { display: grid; gap: var(--space-2); min-width: 0; }
.sd-article-list__title { font: var(--text-title-2); letter-spacing: var(--track-title); transition: color var(--motion-fast) var(--ease); }
.sd-article-list__lead { max-width: 68ch; color: var(--text-secondary); font: var(--text-body); }
.sd-article-list__arrow { color: var(--accent); font-size: 1.75rem; line-height: 1; transition: transform var(--motion-fast) var(--ease); }
.sd-article-list__link:hover .sd-article-list__arrow { transform: translateX(3px); }

@media (max-width: 620px) {
    .sd-article-list__link { min-height: 96px; gap: var(--space-4); padding: var(--space-5) 0; }
    .sd-article-list__title { font: var(--text-title-3); }
    .sd-article-list__lead { font: var(--text-sm); }
}

/* A flat list of article links under a topic. */
.sd-links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sd-links__item { border-bottom: 1px solid var(--border-soft); }
.sd-links__item:last-child { border-bottom: 0; }
.sd-links__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    color: var(--text);
    font: var(--text-ui);
}
.sd-links__link:hover { color: var(--accent); text-decoration: none; }
.sd-links__meta { font: var(--text-sm); color: var(--text-tertiary); white-space: nowrap; }


/* --- Article ------------------------------------------------------------- */

.sd-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}
@media (min-width: 1000px) {
    .sd-article--with-toc { grid-template-columns: minmax(0, 1fr) 220px; }
}
.sd-article__main { min-width: 0; max-width: var(--measure-text); }
.sd-article__title {
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
    margin-bottom: var(--space-3);
}
.sd-article__lead {
    margin: 0 0 var(--space-5);
    font: var(--text-body);
    color: var(--text-secondary);
}
.sd-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
    font: var(--text-sm);
    color: var(--text-tertiary);
}

.sd-toc {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-5));
    align-self: start;
    font: var(--text-sm);
}
.sd-toc__title {
    margin-bottom: var(--space-2);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.sd-toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.sd-toc__link { color: var(--text-secondary); }
.sd-toc__link:hover { color: var(--accent); }
.sd-toc__item { line-height: 1.35; }
.sd-toc__item--2 { padding-left: var(--space-3); }

/* Prose. The only place in the product where the browser's default element
   styling is deliberately re-established, because the body is author content. */
.sd-prose { font: var(--text-body); color: var(--text); }
.sd-prose > * + * { margin-top: 1em; }
.sd-prose h2 {
    margin-top: var(--space-7);
    font: var(--text-title-2);
    letter-spacing: var(--track-title);
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}
.sd-prose h3 {
    margin-top: var(--space-6);
    font: var(--text-title-3);
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}
.sd-prose p { margin: 0; }
.sd-prose ul, .sd-prose ol { margin: 0; padding-left: 1.4em; }
.sd-prose li + li { margin-top: var(--space-2); }
.sd-prose a { text-decoration: underline; }
.sd-prose img { border-radius: var(--radius-md); }
.sd-prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 0.88em;
}
.sd-prose pre {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    overflow-x: auto;
}
.sd-prose pre code { padding: 0; background: none; }
.sd-prose blockquote {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--border);
    color: var(--text-secondary);
}
.sd-prose table {
    width: 100%;
    border-collapse: collapse;
    font: var(--text-ui);
}
.sd-prose th, .sd-prose td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}
/* Callouts an editor can insert (spec §6.3: ostrzeżenia, uwagi, wymagania). */
.sd-callout {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-fg);
    font: var(--text-ui);
}
.sd-callout--warning { background: var(--warning-bg); color: var(--warning-fg); }
.sd-callout--danger { background: var(--danger-bg); color: var(--danger-fg); }
.sd-callout--info { background: var(--accent-tint); color: var(--text); }
.sd-callout__title { display: block; margin-bottom: var(--space-1); font-weight: 600; }

.sd-article__feedback {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-soft);
}
.sd-article__feedback-title { font: var(--text-title-3); margin-bottom: var(--space-3); }
.sd-article__feedback-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* The contact link at the end of an article is deliberately secondary: it is
   the exit when the article did not help, not the point of the page. */
.sd-article__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font: var(--text-ui);
}


/* Terms, privacy policy and the like. .sd-prose supplies the typography; this
   only pins the measure, because a legal page is rendered inside the marketing
   layout, which is wider than anything anyone should read a contract at. */
.sd-legal { max-width: var(--measure-text); }


/* --- Glossary ------------------------------------------------------------ */

.sd-glossary-page { max-width: 980px; margin: 0 auto; }
.sd-glossary-hero { padding: var(--space-7) 0 var(--space-6); }
.sd-glossary-hero h1 { margin: var(--space-2) 0 0; font: var(--text-display); letter-spacing: var(--track-display); }
.sd-glossary-hero > p:not(.sd-eyebrow) { max-width: 62ch; margin: var(--space-3) 0 0; color: var(--text-secondary); font: var(--text-body); }
.sd-glossary-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 720px;
    margin-top: var(--space-6);
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
.sd-glossary-search svg { flex: 0 0 auto; color: var(--text-tertiary); }
.sd-glossary-search input { width: 100%; min-height: 58px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: var(--text-body); }
.sd-glossary-search > a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); color: var(--text-tertiary); font-size: 22px; }
.sd-glossary-search > a:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-glossary-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring), var(--elev-1); }

.sd-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
}
.sd-alpha--glossary { position: sticky; top: var(--nav-height); z-index: 4; margin-inline: calc(var(--space-3) * -1); padding: var(--space-3); border-block: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); }
.sd-alpha__item {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: var(--text-ui);
    font-weight: 590;
}
.sd-alpha__item:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-alpha__item[aria-current] { background: var(--accent); color: var(--accent-contrast); }
.sd-alpha__item[aria-disabled="true"] { color: var(--text-tertiary); opacity: 0.45; pointer-events: none; }

.sd-glossary-results { margin: var(--space-5) 0 0; color: var(--text-secondary); font: var(--text-sm); }
.sd-terms { display: grid; gap: var(--space-5); }
.sd-terms--glossary { gap: 0; margin-top: var(--space-5); }
.sd-term {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border-soft);
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}
.sd-term:last-child { border-bottom: 0; }
.sd-term__name { margin: 0; font: var(--text-title-2); letter-spacing: var(--track-display); }
.sd-term__name > a { color: var(--text); }
.sd-term__name > a:hover { color: var(--accent); text-decoration: none; }
.sd-term__aliases { margin-left: var(--space-2); font: var(--text-sm); color: var(--text-tertiary); font-weight: 400; }
.sd-term__definition { margin: var(--space-3) 0 0; max-width: 78ch; color: var(--text-secondary); font-size: 17px; line-height: 1.62; }
.sd-term__definition > :first-child { margin-top: 0; }
.sd-term__definition > :last-child { margin-bottom: 0; }
.sd-term__metadata { max-width: 78ch; margin: var(--space-3) 0 0; color: var(--text-tertiary); font: var(--text-sm); }
.sd-term__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

@media (max-width: 640px) {
    .sd-glossary-hero { padding-top: var(--space-4); }
    .sd-alpha--glossary { top: 0; flex-wrap: nowrap; overflow-x: auto; }
    .sd-term { padding-block: var(--space-5); }
    .sd-term__definition { font-size: 16px; }
}


/* --- Contact flow shell -------------------------------------------------- */

/* Spec §8: the fewest possible decisions per screen. The flow drops the
   navigation bar entirely — a header full of competing links is an invitation
   to abandon a form — and replaces it with two bands. The white one states
   which step this is and how to go back; the tinted one holds the choices or
   the fields. Every step of the flow is built from the same two.

   The tint is barely there on purpose: it separates the bands without reading
   as a second surface, which is what a heavier fill would do. */
/* A column so the tinted band fills whatever is left of the viewport: on a
   short step the page would otherwise end mid-screen with white below it. */
.sd-flow { display: flex; flex-direction: column; min-height: 100vh; }
.sd-flow__head { background: var(--surface); }
.sd-flow__head-inner {
    width: 100%;
    max-width: var(--measure-page);
    margin: 0 auto;
    padding: var(--space-7) var(--space-5) var(--space-6);
}
.sd-flow__body {
    flex: 1;
    background: var(--flow-tint);
    border-top: 1px solid var(--border-soft);
}
.sd-flow__body-inner {
    width: 100%;
    max-width: var(--measure-page);
    margin: 0 auto;
    padding: var(--space-7) var(--space-5) var(--space-9);
}

/* Step one asks an open question, so its heading is centred and large. Later
   steps name where you already are, so they align left and make room for the
   way back. */
.sd-flow__intro { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.sd-flow__title {
    font: var(--text-display);
    letter-spacing: var(--track-display);
    max-width: 20ch;
}
.sd-flow__title--step { max-width: none; font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-flow__lead {
    margin: 0;
    max-width: 52ch;
    font: var(--text-body);
    color: var(--text-secondary);
}
.sd-flow__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font: var(--text-ui);
    font-weight: 590;
    color: var(--text-secondary);
}
.sd-flow__eyebrow .sd-choice__glyph { width: 20px; height: 20px; }
/* The way back is a link, not a button: it undoes a choice rather than
   performing an action, and it must never compete with the step's own call. */
.sd-flow__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    color: var(--accent);
    font: var(--text-ui);
}
.sd-flow__back::before { content: "‹"; font-size: 1.15em; line-height: 1; }

@media (max-width: 700px) {
    .sd-flow__head-inner { padding: var(--space-6) var(--space-5) var(--space-5); }
    .sd-flow__body-inner { padding: var(--space-5) var(--space-5) var(--space-8); }
    .sd-flow__title { font: var(--text-title-1); letter-spacing: var(--track-display); }
}


/* --- Contact wizard ------------------------------------------------------ */

/* The step indicator is kept for flows that are not the contact flow: it tells
   the user where they are without offering a way to skip ahead into a state
   the form cannot satisfy. */
.sd-steps { margin-bottom: var(--space-6); }
.sd-steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-steps__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-full);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
}
.sd-steps__item.is-done { color: var(--text-secondary); }
.sd-steps__item.is-current {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}
.sd-steps__index {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: inherit;
    font-weight: 650;
}
.sd-steps__item.is-current .sd-steps__index { background: var(--accent); color: var(--accent-contrast); }

/* Large category cards, two columns on desktop and one on mobile (§8.1). */
/* Exactly two columns, as the reference has. auto-fit would give three at this
   measure, and a nine-item grid three across reads as a table of options
   rather than as a short list of decisions. */
.sd-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.sd-choices--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
    .sd-choices { grid-template-columns: minmax(0, 1fr); }
}

.sd-choice {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 76px;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    text-align: left;
    font: var(--text-ui);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease);
}
/* The card lifts on hover instead of filling with colour: at this size a tint
   turns the whole grid into a wall of blue as the pointer crosses it. */
.sd-choice:hover {
    border-color: var(--border);
    box-shadow: var(--elev-2);
    color: var(--text);
    text-decoration: none;
}
.sd-choice:active { transform: scale(0.995); }
/* A plain glyph, in the text colour. A tinted chip behind it would make nine
   identical badges compete with the nine labels that carry the meaning. */
.sd-choice__glyph { flex-shrink: 0; color: var(--text); }
.sd-choice__body { display: grid; gap: 2px; min-width: 0; }
.sd-choice__name { font: var(--text-title-3); }
.sd-choice__desc { margin: 0; font: var(--text-sm); color: var(--text-secondary); }

/* Review step: what the user is about to send, in the order they gave it. */
.sd-review { display: grid; gap: 0; margin: 0; }
.sd-review__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
}
.sd-review__row:last-child { border-bottom: 0; }
.sd-review__label { font: var(--text-sm); color: var(--text-tertiary); }
.sd-review__value { font: var(--text-ui); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .sd-review__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* --- Compose step -------------------------------------------------------- */

/* One column, centred, capped at a width a person can scan without moving
   their head. The glyph and the heading say what this screen is before the
   fields do. */
.sd-compose {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.sd-compose__glyph { color: var(--text); }
.sd-compose__title { font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-compose__lead {
    margin: 0;
    max-width: 54ch;
    font: var(--text-ui);
    color: var(--text-secondary);
}
.sd-compose__form {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-5);
    text-align: left;
}

/* A field whose label sits inside it, above the value. It keeps the label
   visible while typing — which a placeholder does not — without spending a
   whole line on it, and it makes a filled field and an empty one the same
   height, so the form does not jump as it is completed. */
.sd-fld {
    display: grid;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    transition: border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
}
.sd-fld:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.sd-fld.is-invalid { border-color: var(--danger-fg); }
.sd-fld__label {
    font: var(--text-sm);
    color: var(--text-tertiary);
}
.sd-fld__control {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: var(--text-ui);
    resize: none;
}
.sd-fld__control:focus { outline: none; box-shadow: none; }
.sd-fld__control::placeholder { color: var(--text-tertiary); }
.sd-fld--area .sd-fld__control { min-height: 8.5em; resize: vertical; }
/* Shown, not editable: the account the request will be raised from. */
.sd-fld--locked { background: var(--surface-sunken); border-color: var(--border-soft); }
.sd-fld__value { font: var(--text-ui); color: var(--text-secondary); }
.sd-fld__error { margin: calc(-1 * var(--space-2)) 0 0; font: var(--text-sm); color: var(--danger-fg); }


/* --- Confirmation -------------------------------------------------------- */

/* The ticket number and the expected response time are the two facts the user
   came for (spec §8.2 step 10); everything else here is reassurance. */
.sd-receipt {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-6) 0;
    text-align: center;
}
.sd-receipt__glyph {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success-fg);
}
.sd-receipt__label {
    margin: var(--space-3) 0 0;
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.sd-receipt__number {
    margin: 0;
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
    font-family: var(--font-mono);
}
.sd-receipt__lead { margin: 0; max-width: 52ch; color: var(--text-secondary); }
.sd-receipt__due {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    font: var(--text-sm);
    color: var(--text-secondary);
}


/* --- Ticket list --------------------------------------------------------- */

.sd-feed {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    overflow: hidden;
}
.sd-feed__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    transition: background-color var(--motion-fast) var(--ease);
}
.sd-feed__row:last-child { border-bottom: 0; }
.sd-feed__row:hover { background: var(--surface-sunken); }
.sd-feed__row.is-waiting { box-shadow: inset 3px 0 0 var(--warning-fg); }
.sd-feed__row.is-breached { box-shadow: inset 3px 0 0 var(--danger-fg); }
.sd-feed__main { min-width: 0; }
.sd-feed__title-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.sd-feed__number {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.sd-feed__title {
    font: var(--text-title-3);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-feed__title:hover { color: var(--accent); text-decoration: none; }
.sd-feed__excerpt {
    margin: var(--space-1) 0 0;
    max-width: 76ch;
    font: var(--text-sm);
    letter-spacing: var(--track-sm);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-feed__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.sd-feed__side {
    display: grid;
    gap: var(--space-1);
    justify-items: end;
    align-content: center;
    text-align: right;
}
.sd-time { font: var(--text-sm); color: var(--text-tertiary); white-space: nowrap; }

/* Explicit "what happens next" line. Spec §10.2 asks for the expected next
   step on every row, because a status alone does not tell a customer whether
   they are waiting or being waited on. */
.sd-next-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font: var(--text-sm);
    color: var(--text-secondary);
}
.sd-next-step--you { color: var(--warning-fg); font-weight: 590; }

.sd-portal-hero {
    max-width: 820px;
    margin: 0 auto var(--space-8);
    padding: var(--space-7) 0 var(--space-6);
    text-align: center;
}
.sd-portal-hero h1 { margin: var(--space-2) 0 0; font: var(--text-display); letter-spacing: var(--track-display); }
.sd-portal-hero > p:not(.sd-eyebrow) { max-width: 58ch; margin: var(--space-3) auto 0; color: var(--text-secondary); }
.sd-portal-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 680px;
    margin: var(--space-6) auto 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
.sd-portal-search svg { flex: 0 0 auto; color: var(--text-tertiary); }
.sd-portal-search input { width: 100%; min-height: 58px; padding: 0; border: 0; background: transparent; font: var(--text-body); color: var(--text); outline: 0; }
.sd-portal-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring), var(--elev-1); }
.sd-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.sd-section-heading h2 { margin: 0; font: var(--text-title-2); letter-spacing: var(--track-display); }
.sd-section-heading p { margin: var(--space-1) 0 0; color: var(--text-secondary); font: var(--text-sm); }
.sd-section-heading > a { flex: 0 0 auto; font: var(--text-sm); }
.sd-portal-guides { margin-bottom: var(--space-8); }
.sd-portal-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.sd-portal-guide-grid > a,
.sd-portal-guide-grid > article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 112px;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--elev-1);
}
.sd-portal-guide-grid > a:hover { border-color: var(--border); text-decoration: none; transform: translateY(-1px); }
.sd-portal-organization small a { color: var(--accent); font-weight: 600; }
.sd-chip--workspace { background: var(--accent-tint); color: var(--accent); }
.sd-portal-guide__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.sd-portal-guide-grid strong, .sd-portal-guide-grid small { display: block; }
.sd-portal-guide-grid small { margin-top: 3px; color: var(--text-secondary); font: var(--text-sm); }
.sd-portal-requests { margin-top: var(--space-5); }
.sd-filter-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); padding-bottom: var(--space-1); overflow-x: auto; scrollbar-width: thin; }
.sd-filter-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-full); color: var(--text-secondary); font: var(--text-sm); white-space: nowrap; }
.sd-filter-tabs a:hover { background: var(--surface-raised); color: var(--text); text-decoration: none; }
.sd-filter-tabs a.is-active { background: var(--segment-fill); color: var(--segment-ink); font-weight: 600; }
.sd-filter-tabs a span { min-width: 20px; padding: 1px 6px; border-radius: var(--radius-full); background: color-mix(in srgb, currentColor 10%, transparent); text-align: center; font-size: 11px; }
.sd-feed--portal .sd-feed__row { padding-block: var(--space-5); }
.sd-feed__side > span { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }


/* --- Ticket conversation ------------------------------------------------- */

.sd-ticket-page { padding-bottom: var(--space-8); }
.sd-ticket-view-contract { display: contents; }
.sd-ticket-hero {
    margin-bottom: var(--space-7);
    padding: var(--space-5) 0 var(--space-6);
    border-bottom: 1px solid var(--border-soft);
}
.sd-ticket-layout { gap: var(--space-8); }
.sd-ticket-conversation { min-width: 0; }
.sd-ticket-conversation > .sd-thread,
.sd-ticket-page .sd-thread {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}
.sd-ticket-conversation > .sd-thread > .sd-message,
.sd-ticket-page .sd-thread > .sd-message {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: none;
}
.sd-ticket-conversation > .sd-thread > .sd-message:last-child,
.sd-ticket-page .sd-thread > .sd-message:last-child { border-bottom: 0; }
.sd-ticket-conversation > .sd-thread > .sd-message--internal,
.sd-ticket-page .sd-thread > .sd-message--internal {
    border-bottom: 1px solid color-mix(in srgb, var(--warning-fg) 30%, var(--border-soft));
    box-shadow: inset 4px 0 0 var(--warning-fg);
}
.sd-ticket-composer {
    overflow: hidden;
    margin: var(--space-5) 0;
    border-color: var(--border);
    box-shadow: var(--elev-1);
}
.sd-ticket-composer .sd-panel__body { padding: var(--space-5); }
.sd-ticket-composer textarea { min-height: 148px; line-height: 1.55; }
.sd-ticket-composer--note { border-color: color-mix(in srgb, var(--warning-fg) 35%, var(--border)); }
.sd-ticket-page .sd-ticket__main > form.sd-panel {
    overflow: hidden;
    margin: var(--space-5) 0;
    border-color: var(--border);
    box-shadow: var(--elev-1);
}
.sd-ticket-page .sd-ticket__main > form.sd-panel textarea { min-height: 148px; line-height: 1.55; }
.sd-ticket-page .sd-ticket__head {
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0 var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-ticket-sidebar .sd-panel { overflow: hidden; box-shadow: none; }
.sd-ticket-page .sd-ticket__aside .sd-panel { overflow: hidden; box-shadow: none; }
.sd-ticket-sidebar .sd-panel__head { min-height: 54px; }
.sd-ticket-sidebar .sd-form + .sd-btn,
.sd-ticket-sidebar .sd-field + .sd-btn { margin-top: var(--space-3); }

.sd-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 1040px) {
    .sd-ticket--with-aside { grid-template-columns: minmax(0, 1fr) 320px; }
}
.sd-ticket__main { min-width: 0; }
.sd-ticket__aside {
    display: grid;
    gap: var(--space-4);
    position: sticky;
    top: calc(var(--nav-height) + var(--space-5));
}

.sd-ticket__head { margin-bottom: var(--space-5); }
.sd-ticket__number {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-tertiary);
}
.sd-ticket__title {
    margin-top: var(--space-1);
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
}
.sd-ticket__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
    font: var(--text-sm);
    color: var(--text-tertiary);
}

.sd-portal-ticket-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: var(--space-6); align-items: end; margin: var(--space-4) 0 var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-soft); }
.sd-portal-ticket-head h1 { max-width: 22ch; margin: var(--space-2) 0; font: var(--text-display); letter-spacing: var(--track-display); }
.sd-portal-ticket-head p { margin: 0; color: var(--text-secondary); font: var(--text-sm); }
.sd-portal-next { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--accent-tint); color: var(--text); }
.sd-portal-next span { color: var(--text-secondary); font: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.sd-portal-next strong { font: var(--text-ui); }
.sd-ticket-section { margin-bottom: var(--space-5); }
.sd-reply-panel { margin: var(--space-5) 0; }
.sd-detail-list { margin: 0; }
.sd-detail-list > div { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-soft); }
.sd-detail-list > div:first-child { border-top: 0; }
.sd-detail-list dt { margin-bottom: var(--space-1); color: var(--text-tertiary); font: var(--text-xs); }
.sd-detail-list dd { margin: 0; color: var(--text); font: var(--text-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
.sd-person-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.sd-person-row .sd-avatar { width: 32px; height: 32px; }
.sd-person-row strong, .sd-person-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.sd-person-row strong { font: var(--text-sm); font-weight: 600; }
.sd-person-row small { color: var(--text-tertiary); font-size: 11px; }
.sd-inline-form { padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.sd-btn--full { width: 100%; justify-content: center; }
.sd-rating { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.sd-rating legend { width: 100%; margin-bottom: var(--space-1); font: var(--text-sm); font-weight: 600; }
.sd-rating label { cursor: pointer; }
.sd-rating input { position: absolute; opacity: 0; pointer-events: none; }
.sd-rating span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raised); }
.sd-rating input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.sd-rating input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 900px) {
    .sd-portal-guide-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-portal-ticket-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .sd-ticket__aside { position: static; }
    .sd-ticket-hero { margin-bottom: var(--space-5); }
}
@media (max-width: 640px) {
    .sd-portal-hero { padding-top: var(--space-4); text-align: left; }
    .sd-portal-hero > p:not(.sd-eyebrow) { margin-inline: 0; }
    .sd-portal-search { margin-top: var(--space-4); }
    .sd-section-heading { align-items: start; }
    .sd-feed__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .sd-feed__side { justify-items: start; text-align: left; }
    .sd-ticket-layout { gap: var(--space-5); }
    .sd-ticket-composer .sd-panel__body { padding: var(--space-4); }
    .sd-message { padding: var(--space-4); }
    .sd-message__head { align-items: flex-start; flex-wrap: wrap; }
    .sd-message__time { width: 100%; margin-left: 44px; }
}

.sd-thread { display: grid; gap: var(--space-4); }

.sd-message {
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
/* An internal note must never be mistaken for something the customer can see.
   It is the only component in the system with a hatched edge, and it carries
   its own label rather than relying on colour alone. */
.sd-message--internal {
    border-color: color-mix(in srgb, var(--warning-fg) 45%, transparent);
    background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface-raised));
    box-shadow: inset 4px 0 0 var(--warning-fg);
}
.sd-message--agent { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.sd-message__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.sd-message__author { font: var(--text-ui); font-weight: 600; }
.sd-message__role { font: var(--text-sm); color: var(--text-tertiary); }
.sd-message__time { margin-left: auto; font: var(--text-sm); color: var(--text-tertiary); }
.sd-message__body { font: var(--text-ui); }
.sd-message__body > * + * { margin-top: 0.8em; }
.sd-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* A system entry is a fact about the ticket, not a contribution to the
   conversation, so it sits between messages rather than inside a card. */
.sd-event {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    font: var(--text-sm);
    color: var(--text-tertiary);
}
.sd-event::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}

.sd-attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text);
    font: var(--text-sm);
}
.sd-attachment:hover { border-color: var(--accent); text-decoration: none; }
.sd-attachment__size { color: var(--text-tertiary); }
.sd-attachment[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.sd-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
}
.sd-file-row:last-child { border-bottom: 0; }
.sd-file-row span:first-child { display: grid; min-width: 0; }
.sd-file-row strong { overflow-wrap: anywhere; }
.sd-file-row small { color: var(--text-tertiary); }

.sd-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    color: var(--text-secondary);
    font: var(--text-sm);
}
.sd-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: -2px;
    left: 5px;
    width: 1px;
    background: var(--border-soft);
}
.sd-timeline li:last-child { padding-bottom: 0; }
.sd-timeline__dot {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 4px;
    border: 2px solid var(--surface-raised);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--border);
}
.sd-timeline p { margin-top: var(--space-1); overflow-wrap: anywhere; }
.sd-timeline time { display: block; margin-top: var(--space-1); color: var(--text-tertiary); }


/* --- Composer ------------------------------------------------------------ */

.sd-composer {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    overflow: hidden;
}
.sd-composer:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.sd-composer__tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-sunken);
}
.sd-composer__tab {
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: var(--text-ui);
    cursor: pointer;
}
.sd-composer__tab[aria-selected="true"] {
    background: var(--surface-raised);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--elev-1);
}
/* The internal-note tab adopts the note's colour so the destination of what is
   being typed is visible before it is sent, not after. */
.sd-composer__tab[aria-selected="true"][data-kind="internal_note"] {
    background: var(--warning-bg);
    color: var(--warning-fg);
}
.sd-composer.is-internal { border-color: color-mix(in srgb, var(--warning-fg) 50%, transparent); }
.sd-composer__body {
    width: 100%;
    min-height: 140px;
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text);
    font: var(--text-ui);
    resize: vertical;
}
.sd-composer__body:focus { outline: none; box-shadow: none; }
.sd-composer__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-sunken);
}
.sd-composer__hint { font: var(--text-sm); color: var(--text-tertiary); }
.sd-composer__submit { margin-left: auto; }


/* --- SLA ----------------------------------------------------------------- */

.sd-sla { display: grid; gap: var(--space-2); }
.sd-sla__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font: var(--text-sm);
}
.sd-sla__label { color: var(--text-secondary); }
.sd-sla__value { font-weight: 600; color: var(--text); white-space: nowrap; }
.sd-sla__value--warning { color: var(--warning-fg); }
.sd-sla__value--breached { color: var(--danger-fg); }
.sd-sla__value--met { color: var(--success-fg); }
.sd-sla__track {
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    overflow: hidden;
}
.sd-sla__fill {
    height: 100%;
    width: var(--sla-progress, 0%);
    border-radius: inherit;
    background: var(--success-fg);
    transition: width var(--motion-slow) var(--ease);
}
.sd-sla__fill--warning { background: var(--warning-fg); }
.sd-sla__fill--breached { background: var(--danger-fg); }


/* --- Console shell (agent + admin) --------------------------------------- */

.sd-console {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 900px) {
    .sd-console { grid-template-columns: minmax(0, 1fr); }
    .sd-console__aside { position: static; }
}
.sd-console__aside { position: sticky; top: calc(var(--nav-height) + var(--space-5)); }
.sd-console__brand {
    margin: 0 0 var(--space-5);
    padding: 0 var(--space-3);
    font: var(--text-title-2);
    letter-spacing: var(--track-title);
}
.sd-console__group { margin-bottom: var(--space-5); }
.sd-console__group--switch {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}
.sd-console__group-label {
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.sd-console__nav { display: grid; gap: 2px; }
.sd-console__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: var(--text-ui);
}
.sd-console__link:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-console__link[aria-current="page"] {
    background: var(--surface-raised);
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--border-soft), var(--elev-1);
}
.sd-console__count {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-xs);
}
.sd-console__count--alert { background: var(--danger-bg); color: var(--danger-fg); }
.sd-console__main { min-width: 0; }

.sd-panel {
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    overflow: hidden;
}
.sd-panel--narrow { max-width: 640px; }
.sd-panel--form { max-width: 760px; }
.sd-panel--queue { max-width: 1040px; }
.sd-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-panel__title { font: var(--text-title-3); }
.sd-panel__subtitle {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font: var(--text-sm);
}
.sd-panel__body { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }
.sd-panel__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-panel__filters .sd-field { flex: 1 1 12rem; max-width: 22rem; }

/* A metric is the number, and the panel around it is the card. Earlier this
   class was itself a card, which meant every dashboard tile rendered a box
   inside a box; one class now has one meaning. */
.sd-metric {
    display: block;
    margin-top: var(--space-1);
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sd-metric--alert { color: var(--danger-fg); }
.sd-metric--warn { color: var(--warning-fg); }
/* The label above it is the panel's own paragraph. */
.sd-panel__body > p:first-child {
    margin: 0;
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
    color: var(--text-secondary);
}


/* Dashboard tiles. Wider minimum than a plain card grid: a metric is a label
   and a number, and wrapping either of them defeats the point of a tile. */
.sd-grid--metrics { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sd-metric-card {
    color: inherit;
    transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.sd-metric-card:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--border);
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}
.sd-metric-card--warn { border-color: color-mix(in srgb, var(--warning-fg) 38%, var(--border-soft)); }
.sd-metric-card--alert { border-color: color-mix(in srgb, var(--danger-fg) 42%, var(--border-soft)); }
.sd-metric-card__action { color: var(--accent); font: var(--text-sm); }

.sd-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.sd-settings-list { display: grid; }
.sd-settings-list__section + .sd-settings-list__section { border-top: 1px solid var(--border-soft); }
.sd-settings-list__section > h3 {
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-2);
    color: var(--text-secondary);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
}
.sd-settings-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
    padding: var(--space-3) var(--space-5);
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
}
.sd-settings-list__item:last-child { border-bottom: 0; }
a.sd-settings-list__item:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-settings-list__item > span:first-child { display: grid; gap: 2px; min-width: 0; }
.sd-settings-list__item small { color: var(--text-secondary); font: var(--text-sm); }
.sd-settings-list__item--static { cursor: default; }
.sd-dns-record { display: block; max-width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); user-select: all; }
.sd-settings-list__empty { padding: var(--space-4) var(--space-5); color: var(--text-secondary); font: var(--text-sm); }
.sd-table__primary { color: var(--text); font-weight: 600; }
.sd-form-grid, .sd-target-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.sd-form-grid > .sd-field,
.sd-target-grid > .sd-field { align-self: start; }
.sd-schedule {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.sd-schedule__day {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(110px, .7fr) auto minmax(110px, .7fr);
    align-items: center;
    gap: var(--space-3);
}
.sd-schedule__day input[type="time"] { width: 100%; }
.sd-input-unit { display: flex; align-items: stretch; }
.sd-input-unit input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.sd-input-unit > span {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-sm);
}

@media (max-width: 1050px) {
    .sd-admin-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .sd-console__aside {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border-soft);
    }
    .sd-console__brand { display: none; }
    .sd-console__group { flex: 0 0 auto; margin: 0; }
    .sd-console__group-label { display: none; }
    .sd-console__nav { display: flex; }
    .sd-console__group--switch { padding: 0 0 0 var(--space-3); border-top: 0; border-left: 1px solid var(--border-soft); }
}

@media (max-width: 700px) {
	.sd-nav__context, .sd-nav--wide .sd-search { display: none; }
	.sd-nav__inner { gap: var(--space-2); padding-inline: var(--space-4); }
    .sd-nav__brand > span:last-child { display: none; }
    .sd-search__input { width: min(180px, 45vw); }
    .sd-page-head { display: grid; }
    .sd-settings-list__item { padding-inline: var(--space-4); }
    .sd-form-grid, .sd-target-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-schedule__day { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .sd-schedule__day > .sd-check { grid-column: 1 / -1; }
    .sd-schedule__day input[type="time"] { min-width: 0; }
}

@media (max-width: 560px) {
    .sd-console__aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
        overflow: visible;
        padding: var(--space-3);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
    }
    .sd-console__group { min-width: 0; }
    .sd-console__group-label { display: block; padding-inline: var(--space-2); }
    .sd-console__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
    .sd-console__link { min-width: 0; white-space: normal; }
    .sd-console__group--switch { padding: var(--space-3) 0 0; border-top: 1px solid var(--border-soft); border-left: 0; }
}

/* ==========================================================================
   Account Center

   Global identity is a product surface of its own, not an admin form. The
   shell follows the familiar settings pattern used by mature SaaS products:
   stable local navigation, one readable content column, quiet cards and
   explicit security hierarchy.
   ========================================================================== */

.sd-account-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    align-items: start;
}
.sd-account-nav {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.sd-account-nav__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0 var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.sd-account-nav__identity > span:last-child { display: grid; min-width: 0; gap: 1px; }
.sd-account-nav__identity strong,
.sd-account-nav__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-account-nav__identity strong { font: var(--text-ui); font-weight: 650; }
.sd-account-nav__identity small { color: var(--text-tertiary); font: var(--text-sm); }
.sd-account-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #7557d7));
    color: var(--accent-contrast);
    font: var(--text-sm);
    font-weight: 750;
    letter-spacing: -.02em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
}
.sd-account-avatar--lg { width: 54px; height: 54px; font: var(--text-title-3); }
.sd-account-nav__links { display: grid; gap: var(--space-1); }
.sd-account-nav__links > a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 58px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.sd-account-nav__links > a:hover { background: var(--surface-sunken); color: var(--text); }
.sd-account-nav__links > a[aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.sd-account-nav__links > a > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.sd-account-nav__links strong { color: inherit; font: var(--text-ui); font-weight: 650; }
.sd-account-nav__links small { overflow: hidden; color: var(--text-tertiary); font: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.sd-account-nav__links em {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-contrast);
    font: var(--text-xs);
    font-style: normal;
    text-align: center;
}
.sd-account-nav__icon { display: grid; place-items: center; }
.sd-account-nav__icon svg { width: 20px; height: 20px; }
.sd-account-main { display: grid; gap: var(--space-6); min-width: 0; }
.sd-account-heading { max-width: 700px; padding-top: 2px; }
.sd-account-heading h1 { margin: var(--space-1) 0 var(--space-2); font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-account-heading > p:last-child,
.sd-account-heading > div > p:last-child { max-width: 62ch; margin: 0; color: var(--text-secondary); font: var(--text-ui); }
.sd-account-heading--split { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); max-width: none; }
.sd-eyebrow { margin: 0; color: var(--accent); font: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.sd-account-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--surface-raised), color-mix(in srgb, var(--accent) 4%, var(--surface-raised)));
    box-shadow: var(--elev-1);
}
.sd-account-summary p, .sd-account-summary h2 { margin: 0; }
.sd-account-summary p { color: var(--text-tertiary); font: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-xs); }
.sd-account-summary h2 { margin-top: 2px; font: var(--text-title-3); }
.sd-account-summary div > span { color: var(--text-secondary); font: var(--text-sm); }
.sd-account-section { display: grid; gap: var(--space-4); }
.sd-account-section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.sd-account-section__head h2, .sd-account-section__head p { margin: 0; }
.sd-account-section__head h2 { font: var(--text-title-2); }
.sd-account-section__head p { margin-top: var(--space-1); color: var(--text-secondary); font: var(--text-sm); }
.sd-organization-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.sd-organization-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
.sd-organization-card > header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.sd-organization-card__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-sunken));
    color: var(--accent);
    font-weight: 750;
}
.sd-organization-card h3, .sd-organization-card p { margin: 0; }
.sd-organization-card h3 { font: var(--text-title-3); }
.sd-organization-card p { margin-top: 2px; color: var(--text-tertiary); font: var(--text-sm); }
.sd-organization-card__links { display: grid; border-top: 1px solid var(--border-soft); }
.sd-organization-card__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); color: var(--text-secondary); font: var(--text-sm); }
.sd-organization-card__links a + a { border-top: 1px solid var(--border-soft); }
.sd-organization-card__links a:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-organization-card__links a.is-primary { color: var(--accent); font-weight: 650; }

.sd-account-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
}
.sd-account-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-account-card__head h2, .sd-account-card__head p { margin: 0; }
.sd-account-card__head h2 { font: var(--text-title-3); }
.sd-account-card__head p { margin-top: 2px; color: var(--text-secondary); font: var(--text-sm); }
.sd-account-card__symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-sm);
    font-weight: 700;
}
.sd-account-form { display: grid; gap: var(--space-5); }
.sd-account-form__body { display: grid; }
.sd-account-field {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.2fr);
    align-items: center;
    gap: var(--space-5);
    min-height: 82px;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-account-field:last-child { border-bottom: 0; }
.sd-account-field > span:first-child { display: grid; gap: 2px; }
.sd-account-field strong { font: var(--text-ui); font-weight: 650; }
.sd-account-field small { color: var(--text-tertiary); font: var(--text-sm); }
.sd-account-field input, .sd-account-field select { width: 100%; min-width: 0; }
.sd-account-static { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.sd-account-static > span:first-child { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; }
.sd-account-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.sd-account-form__actions p { margin: 0 auto 0 0; color: var(--text-tertiary); font: var(--text-sm); }

.sd-security-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--warning-fg) 30%, var(--border-soft));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--warning-fg) 6%, var(--surface-raised));
}
.sd-security-hero.is-protected { border-color: color-mix(in srgb, var(--success-fg) 28%, var(--border-soft)); background: color-mix(in srgb, var(--success-fg) 5%, var(--surface-raised)); }
.sd-security-hero__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-raised); color: var(--warning-fg); box-shadow: var(--elev-1); }
.sd-security-hero.is-protected .sd-security-hero__icon { color: var(--success-fg); }
.sd-security-hero__icon svg { width: 28px; height: 28px; }
.sd-security-hero p, .sd-security-hero h2, .sd-security-hero span { margin: 0; }
.sd-security-hero p { color: var(--text-tertiary); font: var(--text-xs); font-weight: 650; letter-spacing: var(--track-xs); text-transform: uppercase; }
.sd-security-hero h2 { margin: 2px 0; font: var(--text-title-3); }
.sd-security-hero > div:nth-child(2) > span { color: var(--text-secondary); font: var(--text-sm); }
.sd-security-hero__facts { display: flex; gap: var(--space-5); padding-left: var(--space-5); border-left: 1px solid var(--border-soft); }
.sd-security-hero__facts span { display: grid; gap: 1px; color: var(--text-tertiary); font: var(--text-xs); text-align: center; }
.sd-security-hero__facts strong { color: var(--text); font: var(--text-title-3); }
.sd-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.sd-security-card__body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.sd-security-card__copy { margin: 0; color: var(--text-secondary); font: var(--text-sm); }
.sd-security-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.sd-security-facts div { display: grid; gap: 2px; }
.sd-security-facts dt { color: var(--text-tertiary); font: var(--text-xs); }
.sd-security-facts dd { margin: 0; font: var(--text-sm); font-weight: 650; }
.sd-security-danger { padding-top: var(--space-1); }
.sd-security-danger > summary { width: fit-content; color: var(--danger-fg); cursor: pointer; font: var(--text-sm); font-weight: 650; list-style-position: inside; }
.sd-security-danger[open] > summary { margin-bottom: var(--space-4); }
.sd-security-danger form { padding: var(--space-4); border-radius: var(--radius-md); background: var(--danger-bg); }
.sd-security-danger form > p { margin: 0; color: var(--danger-fg); font: var(--text-sm); }
.sd-security-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sd-session-list { display: grid; }
.sd-session-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 82px;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-session-row:last-child { border-bottom: 0; }
.sd-session-row__device { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-secondary); }
.sd-session-row__device svg { width: 21px; height: 21px; }
.sd-session-row h3, .sd-session-row p { margin: 0; }
.sd-session-row h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--text-ui); font-weight: 650; }
.sd-session-row p { margin-top: 3px; color: var(--text-tertiary); font: var(--text-sm); }
.sd-security-timeline { display: grid; padding: var(--space-2) var(--space-5); }
.sd-security-timeline article { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-3); min-height: 62px; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.sd-security-timeline article:last-child { border-bottom: 0; }
.sd-security-timeline article > span { width: 9px; height: 9px; margin-top: 6px; border: 2px solid var(--surface-raised); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.sd-security-timeline h3, .sd-security-timeline p { margin: 0; }
.sd-security-timeline h3 { font: var(--text-sm); font-weight: 650; }
.sd-security-timeline p { margin-top: 2px; color: var(--text-tertiary); font: var(--text-xs); }
.sd-security-history-more { border-top: 1px solid var(--border-soft); }
.sd-security-history-more > summary { padding: var(--space-4) var(--space-5); color: var(--accent); cursor: pointer; font: var(--text-sm); font-weight: 650; }
.sd-account-empty { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-account-empty__icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-sunken); color: var(--accent); font-size: 1.25rem; }
.sd-account-empty h3, .sd-account-empty p { margin: 0; }
.sd-account-empty h3 { font: var(--text-title-3); }
.sd-account-empty p { margin-top: 2px; color: var(--text-secondary); font: var(--text-sm); }
.sd-account-empty .sd-btn { margin-left: auto; }
.sd-account-empty-inline { margin: 0; padding: var(--space-5); color: var(--text-secondary); }
.sd-notification-list { display: grid; }
.sd-notification-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-soft); }
.sd-notification-row:last-child { border-bottom: 0; }
.sd-notification-row__dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.sd-notification-row.is-unread .sd-notification-row__dot { background: var(--accent); }
.sd-notification-row h2, .sd-notification-row p { margin: 0; }
.sd-notification-row h2 { margin-top: var(--space-2); font: var(--text-ui); font-weight: 650; }
.sd-notification-row p { margin-top: 3px; color: var(--text-secondary); font: var(--text-sm); }
.sd-notification-row small { color: var(--text-tertiary); font: var(--text-xs); }

@media (max-width: 900px) {
    .sd-account-layout { grid-template-columns: minmax(0, 1fr); }
    .sd-account-nav { position: static; gap: var(--space-3); }
    .sd-account-nav__identity { display: none; }
    .sd-account-nav__links { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-2); }
    .sd-account-nav__links > a { flex: 0 0 auto; grid-template-columns: auto auto; min-height: 42px; padding: var(--space-2) var(--space-3); white-space: nowrap; }
    .sd-account-nav__links > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
    .sd-account-nav__links small, .sd-account-nav__links em { display: none; }
    .sd-security-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .sd-organization-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-account-summary, .sd-security-hero { grid-template-columns: auto minmax(0, 1fr); }
    .sd-account-summary .sd-btn { grid-column: 1 / -1; width: 100%; }
    .sd-security-hero__facts { grid-column: 1 / -1; justify-content: start; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-soft); border-left: 0; }
    .sd-account-section__head, .sd-account-heading--split { display: grid; align-items: start; }
    .sd-account-section__head .sd-btn, .sd-account-heading--split .sd-btn { width: 100%; }
    .sd-account-field { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .sd-account-form__actions { display: grid; }
    .sd-account-form__actions .sd-btn { width: 100%; }
    .sd-account-empty { display: grid; }
    .sd-account-empty .sd-btn { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
    .sd-account-card__head { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
    .sd-account-card__head > .sd-badge,
    .sd-account-card__head > form { grid-column: 2; justify-self: start; }
    .sd-security-password-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-session-row { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
    .sd-session-row form { grid-column: 2; }
    .sd-notification-row { grid-template-columns: 8px minmax(0, 1fr); padding: var(--space-4); }
    .sd-notification-row form { grid-column: 2; }
}

/* Account settings v2 — a compact product surface with Jira-grade density.
   The content is intentionally quiet: borders define groups, while colour is
   reserved for current navigation, status and primary actions. */
.sd-account-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-8);
}
.sd-account-nav {
    top: calc(var(--nav-height) + var(--space-7));
    gap: var(--space-5);
}
.sd-account-nav__identity {
    padding: 0 0 var(--space-5);
}
.sd-account-nav__links { gap: 2px; }
.sd-account-nav__links > a {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}
.sd-account-nav__links > a[aria-current="page"] {
    background: var(--accent-tint);
    box-shadow: none;
}
.sd-account-nav__links small { display: none; }
.sd-account-nav__icon svg { width: 18px; height: 18px; }

.sd-account-page {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
    max-width: 820px;
}
.sd-account-page--narrow { max-width: 720px; }
.sd-account-heading {
    max-width: 680px;
    padding: 0 0 var(--space-2);
}
.sd-account-heading h1 {
    margin: 0 0 var(--space-2);
    font: var(--text-title-1);
    letter-spacing: var(--track-display);
}
.sd-account-heading > p:last-child { font: var(--text-ui); line-height: 1.55; }

.sd-account-settings {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-account-settings__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--surface-sunken) 45%, var(--surface-raised));
}
.sd-account-settings__header--action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.sd-account-settings__header h2,
.sd-account-settings__header p { margin: 0; }
.sd-account-settings__header h2 { font: var(--text-ui); font-weight: 700; }
.sd-account-settings__header p {
    max-width: 62ch;
    margin-top: 3px;
    color: var(--text-secondary);
    font: var(--text-sm);
}
.sd-account-settings__body { display: grid; }
.sd-account-setting-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
}
.sd-account-setting-row__content { display: grid; gap: 2px; min-width: 0; }
.sd-account-setting-row__content strong { overflow: hidden; font: var(--text-ui); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sd-account-setting-row__content span { overflow: hidden; color: var(--text-secondary); font: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }

.sd-account-list { display: grid; }
.sd-account-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 76px;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-account-list__item:last-child { border-bottom: 0; }
.sd-account-list__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent);
    font: var(--text-sm);
    font-weight: 750;
}
.sd-account-list__content { min-width: 0; }
.sd-account-list__content h3,
.sd-account-list__content p { margin: 0; }
.sd-account-list__content h3 { overflow: hidden; font: var(--text-ui); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sd-account-list__content p { margin-top: 2px; color: var(--text-tertiary); font: var(--text-sm); }
.sd-account-list__actions { display: flex; align-items: center; gap: var(--space-1); }

.sd-account-control {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr);
    align-items: center;
    gap: var(--space-5);
    min-height: 84px;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.sd-account-control:last-child { border-bottom: 0; }
.sd-account-control > span:first-child { display: grid; gap: 3px; }
.sd-account-control strong { font: var(--text-ui); font-weight: 650; }
.sd-account-control small { color: var(--text-tertiary); font: var(--text-sm); line-height: 1.4; }
.sd-account-control input,
.sd-account-control select { width: 100%; min-width: 0; }
.sd-account-form { gap: var(--space-5); }
.sd-account-form__actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    min-height: 64px;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
}

.sd-security-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--warning-fg) 32%, var(--border-soft));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-fg) 6%, var(--surface-raised));
}
.sd-security-overview.is-protected {
    border-color: color-mix(in srgb, var(--success-fg) 30%, var(--border-soft));
    background: color-mix(in srgb, var(--success-fg) 5%, var(--surface-raised));
}
.sd-security-overview__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--surface-raised);
    color: var(--warning-fg);
}
.sd-security-overview.is-protected .sd-security-overview__icon { color: var(--success-fg); }
.sd-security-overview__icon svg { width: 21px; height: 21px; }
.sd-security-overview h2,
.sd-security-overview p { margin: 0; }
.sd-security-overview h2 { font: var(--text-ui); font-weight: 700; }
.sd-security-overview p { margin-top: 2px; color: var(--text-secondary); font: var(--text-sm); }

.sd-security-setting { border-bottom: 1px solid var(--border-soft); }
.sd-security-setting:last-child { border-bottom: 0; }
.sd-security-setting__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 78px;
    padding: var(--space-4) var(--space-5);
}
details.sd-security-setting > summary {
    cursor: pointer;
    list-style: none;
}
details.sd-security-setting > summary::-webkit-details-marker { display: none; }
details.sd-security-setting > summary:hover { background: var(--surface-sunken); }
.sd-security-setting__summary h3,
.sd-security-setting__summary p { margin: 0; }
.sd-security-setting__summary h3 { font: var(--text-ui); font-weight: 650; }
.sd-security-setting__summary p { margin-top: 2px; color: var(--text-secondary); font: var(--text-sm); }
.sd-security-setting__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-sm);
    font-weight: 700;
}
.sd-security-setting__action {
    display: grid;
    gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 52px);
}
.sd-security-setting--details[open] > .sd-security-setting__summary { background: var(--surface-sunken); }
.sd-security-setting--details[open] > .sd-security-setting__action { padding-top: var(--space-5); border-top: 1px solid var(--border-soft); }
.sd-security-inline-form { grid-template-columns: minmax(240px, 1fr) auto; align-items: end; }
.sd-security-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; }

.sd-account-control--stack {
    align-items: start;
    padding-block: var(--space-5);
}
.sd-account-control--danger strong { color: var(--danger-fg); }
.sd-security-method {
    display: grid;
    gap: var(--space-3);
    justify-items: stretch;
}
.sd-security-method__empty,
.sd-security-method__status {
    margin: 0;
    color: var(--text-secondary);
    font: var(--text-sm);
}
.sd-security-passkeys {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-security-passkeys li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.sd-security-passkeys__label {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.sd-security-passkeys__label strong {
    overflow: hidden;
    font: var(--text-sm);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-security-action > summary {
    display: inline-flex;
    width: fit-content;
    list-style: none;
    cursor: pointer;
}
.sd-security-action > summary::-webkit-details-marker { display: none; }
.sd-security-action[open] > summary { margin-bottom: var(--space-3); }
.sd-security-confirm {
    display: grid;
    gap: var(--space-3);
    max-width: 360px;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-security-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5);
}
.sd-security-choice {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-security-choice__copy { display: grid; gap: var(--space-2); }
.sd-security-choice__copy h3,
.sd-security-choice__copy p { margin: 0; }
.sd-security-choice__copy h3 { font: var(--text-ui); font-weight: 700; }
.sd-security-choice__copy p { color: var(--text-secondary); font: var(--text-sm); line-height: 1.45; }
.sd-security-choice .sd-chip { width: fit-content; }

@media (max-width: 900px) {
    .sd-account-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .sd-account-nav { position: static; }
    .sd-account-nav__identity { display: none; }
    .sd-account-nav__links { display: flex; overflow-x: auto; padding-bottom: var(--space-2); }
    .sd-account-nav__links > a { flex: 0 0 auto; grid-template-columns: auto auto; }
    .sd-account-nav__links > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
}
@media (max-width: 700px) {
    .sd-account-settings__header--action,
    .sd-account-list__item,
    .sd-account-control { grid-template-columns: minmax(0, 1fr); }
    .sd-account-settings__header--action { display: grid; align-items: start; }
    .sd-account-settings__header--action > .sd-btn { width: 100%; }
    .sd-account-list__item { gap: var(--space-2); }
    .sd-account-list__mark { grid-row: 1; }
    .sd-account-list__content { grid-column: 1 / -1; }
    .sd-account-list__actions { grid-column: 1 / -1; flex-wrap: wrap; padding-top: var(--space-2); }
    .sd-account-control { gap: var(--space-3); }
    .sd-security-inline-form { grid-template-columns: minmax(0, 1fr); }
    .sd-security-choices { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
    .sd-security-passkeys li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .sd-account-nav__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
    }
    .sd-account-nav__links > a {
        min-width: 0;
        white-space: normal;
    }
    .sd-account-setting-row,
    .sd-security-overview,
    .sd-security-setting__summary { grid-template-columns: auto minmax(0, 1fr); }
    .sd-account-setting-row > .sd-btn,
    .sd-security-overview > .sd-badge,
    .sd-security-setting__summary > .sd-badge,
    .sd-security-setting__summary > .sd-btn { grid-column: 2; justify-self: start; }
    .sd-security-setting__action { padding-left: var(--space-5); }
    .sd-security-password-grid,
    .sd-security-facts { grid-template-columns: minmax(0, 1fr); }
    .sd-account-form__actions { display: grid; }
    .sd-account-form__actions .sd-btn { width: 100%; }
}


/* --- Back link ----------------------------------------------------------- */

/* Sits above the page header on a detail screen and returns to its list. The
   chevron is drawn from the text so it inherits colour in both themes. */
.sd-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
    font: var(--text-sm);
}
.sd-back::before {
    content: "";
    width: 6px;
    height: 6px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.sd-back:hover { color: var(--accent); text-decoration: none; }


/* --- List rows — notifications, sessions --------------------------------- */

.sd-list__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-soft);
}
.sd-list__row:last-child { border-bottom: 0; }
.sd-list__row > div { min-width: 0; }
.sd-list__row strong { display: block; font: var(--text-ui); font-weight: 590; color: var(--text); }
.sd-list__row p { margin: var(--space-1) 0 0; font: var(--text-sm); color: var(--text-secondary); }
.sd-list__row small { display: block; margin-top: var(--space-1); font: var(--text-sm); color: var(--text-tertiary); }
.sd-list__row form { flex-shrink: 0; }
/* Unread is marked by a rule in the gutter rather than by a background, so a
   long list does not turn into stripes. */
.sd-list__row.is-unread { box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-4); }


/* --- Definition list ----------------------------------------------------- */

/* Used for DNS records and other name/value pairs an administrator copies. */
.sd-definition {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font: var(--text-ui);
}
.sd-definition dt { color: var(--text-secondary); font: var(--text-sm); }
.sd-definition dd { margin: 0; min-width: 0; }
.sd-definition code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 12px;
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .sd-definition { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .sd-definition dd { margin-bottom: var(--space-3); }
}


/* --- Input with a fixed suffix ------------------------------------------- */

/* A subdomain field: the input grows, the domain after it does not. The group
   carries the border so the two read as one control. */
.sd-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    overflow: hidden;
}
.sd-input-group:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.sd-input-group input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text);
    font: var(--text-ui);
}
.sd-input-group input:focus { outline: none; box-shadow: none; }
.sd-input-group > span {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-left: 1px solid var(--border-soft);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-ui);
    white-space: nowrap;
}


/* --- Data table ---------------------------------------------------------- */

.sd-table-wrap { overflow-x: auto; }
.sd-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--text-ui);
}
.sd-table th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.sd-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table tbody tr:hover td { background: var(--surface-sunken); }
.sd-table__num { text-align: right; }
.sd-table__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.sd-table__col-actions { width: 1%; white-space: nowrap; }


/* --- Empty state --------------------------------------------------------- */

.sd-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-5);
    text-align: center;
}
.sd-empty--boxed {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-empty__glyph { color: var(--text-tertiary); }
.sd-empty__title { font: var(--text-title-3); color: var(--text); }
.sd-empty__body { margin: 0; max-width: 48ch; font: var(--text-sm); color: var(--text-secondary); }
.sd-empty__action { margin-top: var(--space-3); }
/* An empty state that is the whole page — an error, a 404 — rather than the
   contents of one panel. */
.sd-empty--page { padding-block: var(--space-9); }

.sd-workspace-unavailable {
    min-height: calc(100vh - (2 * var(--space-8)));
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: var(--space-7);
    padding-block: var(--space-7);
}
.sd-workspace-unavailable__brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font: var(--text-title-3);
    text-decoration: none;
}
.sd-workspace-unavailable__panel { max-width: 640px; }
.sd-workspace-unavailable__panel h1 {
    margin: var(--space-2) 0 var(--space-3);
    font: var(--text-display);
    letter-spacing: var(--track-display);
}
.sd-workspace-unavailable__panel > p { max-width: 58ch; color: var(--text-secondary); }
.sd-workspace-unavailable__lead { font: var(--text-body); color: var(--text) !important; }
.sd-workspace-unavailable__panel .sd-btn { margin-top: var(--space-4); }


/* --- Search results ------------------------------------------------------ */

/* The search field on the results page, as opposed to the one in the bar. */
.sd-searchbar { margin-bottom: var(--space-6); }

.sd-result { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-soft); }
.sd-result:last-child { border-bottom: 0; }
.sd-result__title { font: var(--text-title-3); color: var(--text); }
.sd-result__title:hover { color: var(--accent); text-decoration: none; }
.sd-result__snippet {
    margin: var(--space-1) 0 0;
    max-width: 76ch;
    font: var(--text-sm);
    color: var(--text-secondary);
}
.sd-result__snippet mark {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--accent-tint);
    color: inherit;
    font-weight: 600;
}
.sd-result__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}


/* --- Auth ---------------------------------------------------------------- */

.sd-auth { width: 100%; }
.sd-auth__title { margin-bottom: var(--space-2); font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-auth__lead { margin: 0 0 var(--space-5); font: var(--text-ui); color: var(--text-secondary); }
.sd-auth__foot { margin-top: var(--space-5); font: var(--text-ui); color: var(--text-secondary); text-align: center; }
.sd-auth__foot a { white-space: nowrap; }
.sd-auth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    font: var(--text-sm);
    color: var(--text-tertiary);
}
.sd-auth__divider::before,
.sd-auth__divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border-soft);
}

.sd-mfa-card { max-width: 880px; }
.sd-mfa-setup { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 760px) { .sd-mfa-setup { grid-template-columns: 280px minmax(0, 1fr); } }
.sd-mfa-setup__visual { display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: #fff; }
.sd-mfa-setup__visual img { width: min(100%, 256px); height: auto; image-rendering: pixelated; }
.sd-mfa-setup__steps { display: grid; gap: var(--space-6); }
.sd-mfa-setup__steps h2 { display: inline; margin-left: var(--space-2); font: var(--text-title-3); }
.sd-mfa-setup__steps p { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.sd-step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font: var(--text-sm); font-weight: 700; }
.sd-secret-code { display: block; margin-top: var(--space-3); padding: var(--space-3); overflow-wrap: anywhere; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 1rem; letter-spacing: .08em; user-select: all; }
.sd-recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin: var(--space-5) 0; padding: 0; list-style: none; }
.sd-recovery-codes li { padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); text-align: center; background: var(--surface-sunken); }
.sd-recovery-codes code { font-size: 1rem; letter-spacing: .06em; user-select: all; }
.sd-definition { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-5); }
.sd-definition div { display: grid; gap: var(--space-1); }
.sd-definition span { color: var(--text-tertiary); font: var(--text-sm); }
.sd-form--compact { max-width: 560px; }
@media print { .sd-nav, .sd-footer, .sd-actions { display: none !important; } .sd-recovery-codes { grid-template-columns: repeat(2, 1fr); } }


/* --- Settings lists ------------------------------------------------------ */

.sd-settings { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 800px) {
    .sd-settings { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-7); }
}
.sd-settings__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: sticky;
    top: calc(var(--space-6) + var(--nav-height));
}
.sd-settings__nav-link {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease);
}
.sd-settings__nav-link:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.sd-settings__nav-link[aria-current="page"] { background: var(--surface-raised); box-shadow: var(--elev-1); }
.sd-settings__nav-title { font: var(--text-ui); font-weight: 590; }
.sd-settings__nav-desc { font: var(--text-sm); color: var(--text-tertiary); }
.sd-settings__main { display: grid; gap: var(--space-5); min-width: 0; }
.sd-settings__group { display: grid; gap: var(--space-2); }
.sd-settings__group-label {
    margin: 0;
    padding: 0 var(--space-4);
    font: var(--text-xs);
    letter-spacing: var(--track-xs);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.sd-settings__group-body {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--elev-1);
    border: 1px solid var(--border-soft);
}
.sd-settings__footnote {
    margin: 0;
    padding: 0 var(--space-4);
    font: var(--text-sm);
    color: var(--text-tertiary);
}
.sd-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    width: 100%;
}
.sd-settings__row:last-child { border-bottom: 0; }
.sd-settings__row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}
.sd-settings__row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sd-settings__row-title { margin: 0; font: var(--text-ui); font-weight: 400; color: var(--text); }
.sd-settings__row-title--danger { color: var(--danger-fg); }
.sd-settings__row-desc { margin: 0; font: var(--text-sm); color: var(--text-tertiary); }
.sd-settings__control {
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font: var(--text-ui);
}


/* --- Two-step confirmation — replaces window.confirm() ------------------- */

.sd-confirm { display: inline-block; }
.sd-confirm > summary { list-style: none; display: inline-flex; }
.sd-confirm > summary::-webkit-details-marker { display: none; }
.sd-confirm__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--danger-fg) 35%, transparent);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
}
.sd-confirm__text { margin: 0; font: var(--text-sm); color: var(--danger-fg); font-weight: 590; }


/* --- Pagination ---------------------------------------------------------- */

.sd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}
.sd-pagination__status { font: var(--text-sm); color: var(--text-tertiary); }


/* --- Footer -------------------------------------------------------------- */

/* One row on a desktop: theme, copyright, legal links, language. The band sits
   on the page surface with a single hairline above it — a filled bar would
   read as another section rather than as the end of the page. */
.sd-footer {
    margin-top: var(--space-8);
    /* see .sd-flow .sd-footer below */
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-secondary);
}
.sd-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    width: 100%;
    max-width: var(--measure-page);
    margin: 0 auto;
    padding: var(--space-5);
    font: var(--text-footer);
    letter-spacing: var(--track-sm);
}
.sd-footer__copyright { margin: 0; }
/* Inside the contact flow the tinted band already runs to the footer's rule,
   so the usual separating margin would open a white gap between them. */
.sd-flow .sd-footer { margin-top: 0; }

.sd-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sd-footer__links a {
    position: relative;
    padding: 0 var(--space-3);
    color: var(--text-secondary);
}
.sd-footer__links a:first-child { padding-left: 0; }
.sd-footer__links a:hover { color: var(--text); }
/* A short rule between links, not a full-height border: the divider should
   align with the text, not with the line box. */
.sd-footer__links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 11px;
    transform: translateY(-50%);
    border-left: 1px solid var(--border);
}

/* The same control appears in the footer and in the marketing bar, so the
   component itself claims no space: only the footer pins it to the right. */
.sd-locale {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sd-footer .sd-locale { margin-left: auto; }
/* Beside 15px navigation links, 12px reads as a misprint. */
.sd-nav .sd-locale__select { font-size: 13px; }

.sd-locale select.sd-locale__select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-height: 28px;
    height: 28px;
    padding: 0 24px 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    background-image: none;
    color: var(--text);
    font: var(--text-footer);
    font-weight: 590;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.sd-locale__select:hover { color: var(--accent); }
.sd-locale__select:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    text-decoration: none;
}
/* The chevron is an element rather than a background image so it inherits the
   text colour and needs no second copy for dark mode. */
.sd-locale__chevron {
    position: absolute;
    right: var(--space-2);
    color: var(--text-secondary);
    pointer-events: none;
}
.sd-locale__select:hover + .sd-locale__chevron { color: var(--accent); }

/* Exactly one of the two is usable at a time: the select needs JavaScript to
   navigate, the links do not. */
.sd-locale__fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.sd-locale__fallback-label { color: var(--text-tertiary); }
.sd-locale__fallback a { color: var(--text-secondary); }
.sd-locale__fallback a[aria-current] { color: var(--text); font-weight: 590; }
.js .sd-locale__fallback { display: none; }
.sd-locale__select,
.sd-locale__chevron { display: none; }
.js .sd-locale__select { display: block; }
.js .sd-locale__chevron { display: block; }

/* Versioned configuration builders share the same density and surfaces as
   the rest of the console. Rows remain readable without turning into a giant
   native fieldset, and repeatable controls progressively enhance with JS. */
.sd-settings-list__heading,
.sd-builder__head,
.sd-builder-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.sd-settings-list__heading { padding: var(--space-3) var(--space-4) var(--space-2); }
.sd-settings-list__heading h3 { margin: 0; }
.sd-builder { display: grid; gap: var(--space-3); }
.sd-builder + .sd-builder { margin-top: var(--space-4); }
.sd-builder__head h2 { margin: 0; font: var(--text-lg); }
.sd-builder__list { display: grid; gap: var(--space-3); }
.sd-builder-row {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.sd-builder-row__head strong { font: var(--text-sm); color: var(--text); }
.sd-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-check-grid { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.sd-details {
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-3);
}
.sd-details summary { color: var(--accent); cursor: pointer; font: var(--text-sm); font-weight: 650; }
.sd-details[open] summary { margin-bottom: var(--space-3); }

.sd-workflow-map {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--surface-raised), var(--surface-sunken));
}
.sd-workflow-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.sd-workflow-lane { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); }
.sd-workflow-lane > strong { display: block; margin-bottom: var(--space-2); color: var(--text-secondary); font: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.sd-workflow-lane > div { display: grid; gap: var(--space-2); align-content: start; }
.sd-workflow-node { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-sunken); font: var(--text-sm); }
.sd-workflow-node i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--text-tertiary); }
.sd-workflow-lane--open .sd-workflow-node i { background: var(--accent); }
.sd-workflow-lane--pending .sd-workflow-node i { background: var(--warning-fg); }
.sd-workflow-lane--done .sd-workflow-node i { background: var(--success-fg); }
.sd-workflow-node--initial { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft)); box-shadow: inset 3px 0 0 var(--accent); }
.sd-workflow-node small { margin-left: auto; color: var(--text-tertiary); white-space: nowrap; }
[data-workflow-form] .sd-builder-row { gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
[data-workflow-form] .sd-builder-row.is-expanded { padding-block: var(--space-4); box-shadow: var(--shadow-sm); }
[data-workflow-form] .sd-builder-row__head { min-height: 32px; }
[data-workflow-form] .sd-builder-row__head strong { display: grid; gap: 2px; margin-right: auto; }
[data-workflow-form] .sd-builder-row__head strong small { color: var(--text-tertiary); font: var(--text-xs); font-weight: 500; }
.sd-workflow-toggle { margin-left: auto; }
.sd-workflow-rules { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.sd-workflow-rules h3, .sd-workflow-rules p { margin: 0; }
.sd-workflow-rules h3 { font: var(--text-sm); font-weight: 680; }
.sd-workflow-rules p { margin-top: 2px; color: var(--text-secondary); font: var(--text-xs); }
.sd-workflow-action-list { display: grid; gap: var(--space-2); }
.sd-workflow-action { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-sunken); }
.sd-workflow-action .sd-field { gap: var(--space-1); }

/* Guided Service Desk configuration. The overview follows the same mental
   model as mature service-management products: intake → process → delivery →
   scale. Technical objects remain editable, but are introduced by purpose. */
.sd-page-head--split { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.sd-config-health {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: var(--space-6); padding: var(--space-6); margin-bottom: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--success-fg) 35%, var(--border-soft));
    border-radius: var(--radius-lg); background: color-mix(in srgb, var(--success-fg) 7%, var(--surface-raised));
}
.sd-config-health h2, .sd-config-health p { margin: 0; }
.sd-config-health--incomplete { border-color: color-mix(in srgb, var(--warning-fg) 35%, var(--border-soft)); background: color-mix(in srgb, var(--warning-fg) 7%, var(--surface-raised)); }
.sd-config-health p:last-child { margin-top: var(--space-2); color: var(--text-secondary); max-width: var(--measure-text); }
.sd-config-health__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: 0; }
.sd-config-health__stats div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); }
.sd-config-health__stats dt { color: var(--text-tertiary); font: var(--text-xs); }
.sd-config-health__stats dd { margin: var(--space-1) 0 0; font: var(--text-title-2); }
.sd-config-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-7); }
.sd-config-journey a { display: grid; grid-template-columns: 32px 1fr; gap: 0 var(--space-3); padding: var(--space-3); color: var(--text); border-radius: var(--radius-md); }
.sd-config-journey a:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-config-journey span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.sd-config-journey strong { font: var(--text-ui); }
.sd-config-journey small { color: var(--text-tertiary); }
.sd-config-stage { scroll-margin-top: var(--space-6); margin-bottom: var(--space-8); }
.sd-config-stage > header { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.sd-config-stage > header h2, .sd-config-stage > header p { margin: 0; }
.sd-config-stage > header p:last-child { margin-top: var(--space-1); color: var(--text-secondary); }
.sd-config-stage__index { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contrast); font-weight: 750; }
.sd-config-stage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.sd-config-stage__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-config-stage__grid--one { grid-template-columns: minmax(0, 1fr); }
.sd-config-module, .sd-config-action { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; }
.sd-config-module__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.sd-config-module__head h3, .sd-config-module__head p { margin: 0; }
.sd-config-module__head p { margin-top: var(--space-1); color: var(--text-tertiary); font: var(--text-sm); }
.sd-config-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text); border-bottom: 1px solid var(--border-soft); }
.sd-config-row:last-child { border-bottom: 0; }
.sd-config-row:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-config-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.sd-config-row small { color: var(--text-tertiary); }
.sd-config-action { display: grid; gap: var(--space-2); padding: var(--space-5); color: var(--text); }
.sd-config-action:hover { border-color: var(--accent); box-shadow: var(--elev-1); text-decoration: none; }
.sd-config-action span { color: var(--text-secondary); }
.sd-config-action small { color: var(--accent); }
.sd-rule-editor { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); }
.sd-rule-editor h3 { margin: 0; font: var(--text-ui); }
.sd-form-grid:has(> [data-form-choice-settings][hidden]) { grid-template-columns: minmax(0, 1fr); }

.sd-config-section {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}
.sd-config-section__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.sd-config-section__head > span {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 750;
}
.sd-config-section__head h2,
.sd-config-section__head p,
.sd-builder__head p { margin: 0; }
.sd-config-section__head h2 { font: var(--text-lg); }
.sd-config-section__head p,
.sd-builder__head p { margin-top: var(--space-1); color: var(--text-secondary); font: var(--text-sm); }

.sd-automation-flow { display: grid; gap: var(--space-4); }
.sd-automation-step {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}
.sd-automation-step + .sd-automation-step::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-4));
    left: 35px;
    height: var(--space-4);
    border-left: 2px solid var(--accent);
}
.sd-automation-step__badge {
    width: fit-content;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-contrast);
    font: var(--text-xs);
    font-weight: 750;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
}
.sd-builder--compact .sd-builder-row { gap: var(--space-2); padding: var(--space-3); background: var(--surface-raised); }
.sd-builder--compact .sd-builder-row > .sd-btn--plain { justify-self: end; }
.sd-check--switch { align-items: flex-start; padding: var(--space-3) 0; }
.sd-check--switch > span { display: grid; gap: 2px; }
.sd-check--switch small { color: var(--text-secondary); font-weight: 400; }

@media (max-width: 850px) {
    .sd-form-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .sd-workflow-lanes, .sd-workflow-action { grid-template-columns: minmax(0, 1fr); }
    .sd-builder-row { padding: var(--space-3); }
    .sd-page-head--split { display: grid; }
    .sd-config-health, .sd-config-stage__grid, .sd-config-stage__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .sd-config-journey { grid-template-columns: repeat(2, 1fr); }
    .sd-config-section, .sd-automation-step { padding: var(--space-4); }
}

@media (max-width: 560px) {
    .sd-config-journey, .sd-config-health__stats { grid-template-columns: minmax(0, 1fr); }
}

/* Service management command centre. This page is intentionally denser than
   marketing and editor screens: administrators need status, dependencies and
   destinations in one scan without losing the shared product language. */
.sd-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.sd-command-center {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) minmax(220px, 0.55fr);
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--success-fg) 38%, var(--border-soft));
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--success-fg) 8%, var(--surface-raised)), var(--surface-raised) 70%);
}
.sd-command-center--attention {
    border-color: color-mix(in srgb, var(--warning-fg) 38%, var(--border-soft));
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning-fg) 8%, var(--surface-raised)), var(--surface-raised) 70%);
}
.sd-command-center__score {
    display: grid;
    place-content: center;
    width: 112px;
    height: 112px;
    text-align: center;
    border: 9px solid color-mix(in srgb, var(--success-fg) 24%, var(--border-soft));
    border-radius: 50%;
    background: var(--surface-raised);
}
.sd-command-center--attention .sd-command-center__score { border-color: color-mix(in srgb, var(--warning-fg) 28%, var(--border-soft)); }
.sd-command-center__score strong { font: var(--text-title-1); letter-spacing: var(--track-title); }
.sd-command-center__score span { color: var(--text-tertiary); font: var(--text-xs); }
.sd-command-center__main h2, .sd-command-center__main p { margin: 0; }
.sd-command-center__main h2 { margin-top: var(--space-1); font: var(--text-title-2); }
.sd-command-center__main > p:last-of-type { margin-top: var(--space-2); color: var(--text-secondary); font: var(--text-ui); }
.sd-command-center__main progress { width: 100%; height: 6px; margin-top: var(--space-3); accent-color: var(--success-fg); }
.sd-command-center--attention progress { accent-color: var(--warning-fg); }
.sd-command-center__next { display: grid; gap: var(--space-2); align-content: center; padding-left: var(--space-5); border-left: 1px solid var(--border-soft); }
.sd-command-center__next > span { color: var(--text-tertiary); font: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-xs); }
.sd-command-center__next > strong { font: var(--text-ui); }
.sd-command-center__next .sd-btn { width: fit-content; margin-top: var(--space-1); }

.sd-service-console { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: var(--space-5); }
.sd-service-console__main { display: grid; gap: var(--space-7); min-width: 0; }
.sd-service-setup {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}
.sd-service-setup__head { padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
.sd-service-setup__head h2, .sd-service-setup__head p { margin: 0; }
.sd-service-setup__head h2 { margin-top: var(--space-1); font: var(--text-title-3); }
.sd-service-setup__head p:last-child { margin-top: var(--space-2); color: var(--text-secondary); font: var(--text-sm); }
.sd-service-setup nav { display: grid; }
.sd-setup-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 68px;
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
}
.sd-setup-row:last-child { border-bottom: 0; }
.sd-setup-row:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-setup-row__state { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-tertiary); font: var(--text-xs); }
.sd-setup-row.is-complete .sd-setup-row__state { background: var(--success-bg); color: var(--success-fg); }
.sd-setup-row > span:nth-child(2) { display: grid; min-width: 0; }
.sd-setup-row strong { font: var(--text-sm); color: var(--text); }
.sd-setup-row small { margin-top: 2px; color: var(--text-tertiary); font: var(--text-xs); font-weight: 400; }
.sd-setup-row b { min-width: 24px; padding: 3px 7px; text-align: center; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-secondary); font: var(--text-xs); }

.sd-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.sd-section-head h2, .sd-section-head p { margin: 0; }
.sd-section-head h2 { margin-top: var(--space-1); font: var(--text-title-2); }
.sd-section-head p:last-child { margin-top: var(--space-1); color: var(--text-secondary); font: var(--text-ui); }
.sd-service-flow { min-width: 0; }
.sd-service-flow__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-service-flow__track li {
    position: relative;
    display: grid;
    gap: var(--space-1);
    min-height: 96px;
    align-content: center;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}
.sd-service-flow__track li:not(:last-child)::after {
    content: "›";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(-1 * var(--space-3));
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-weight: 700;
}
.sd-service-flow__track span { color: var(--text-tertiary); font: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-xs); }
.sd-service-flow__track strong { font: var(--text-title-2); }
.sd-service-flow__track small { color: var(--text-secondary); font: var(--text-sm); }

.sd-service-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.sd-service-group { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-service-group > header { padding: var(--space-4); border-bottom: 1px solid var(--border-soft); background: var(--surface-sunken); }
.sd-service-group > header > div { display: flex; align-items: flex-start; gap: var(--space-3); }
.sd-service-group > header h3, .sd-service-group > header p { margin: 0; }
.sd-service-group > header h3 { font: var(--text-title-3); }
.sd-service-group > header p { margin-top: 2px; color: var(--text-tertiary); font: var(--text-sm); }
.sd-service-group__icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent); font: var(--text-xs); }
.sd-service-resource { scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.sd-service-resource + .sd-service-resource, .sd-integration-row { border-top: 1px solid var(--border-soft); }
.sd-service-resource__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); }
.sd-service-resource__title > div { display: flex; align-items: center; gap: var(--space-2); }
.sd-service-resource__title h4 { font: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-xs); color: var(--text-secondary); }
.sd-service-resource__title span { padding: 2px 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-tertiary); font: var(--text-xs); }
.sd-service-resource__title > a { font: var(--text-sm); }
.sd-service-item, .sd-integration-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 60px;
    padding: var(--space-2) var(--space-4);
    color: var(--text);
}
.sd-service-item:hover, .sd-integration-row:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-service-item > span:first-child, .sd-integration-row > span:nth-child(2) { display: grid; min-width: 0; }
.sd-service-item strong, .sd-integration-row strong { overflow: hidden; color: var(--text); font: var(--text-ui); font-weight: 590; text-overflow: ellipsis; white-space: nowrap; }
.sd-service-item small, .sd-integration-row small { overflow: hidden; margin-top: 1px; color: var(--text-tertiary); font: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.sd-service-empty { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); color: var(--text-tertiary); font: var(--text-sm); }
.sd-status-dot { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); font: var(--text-xs); white-space: nowrap; }
.sd-status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); }
.sd-status-dot.is-online { color: var(--success-fg); }
.sd-status-dot.is-online::before { background: var(--success-fg); }
.sd-integration-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; }
.sd-integration-row__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: #1868db; color: #fff; font-weight: 750; }

/* Contact catalogue and guided intake. These surfaces deliberately reuse the
   same panels, table rhythm and compact controls as the rest of the console. */
.sd-config-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: var(--space-5); align-items: start; }
.sd-config-main { display: grid; gap: var(--space-5); min-width: 0; }
.sd-config-aside { position: sticky; top: calc(var(--nav-height) + var(--space-4)); }
.sd-config-link { display: grid; gap: 2px; color: var(--text); }
.sd-config-link:hover { text-decoration: none; }
.sd-config-link small { color: var(--text-tertiary); font: var(--text-xs); }
.sd-contact-level { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 620; }
.sd-contact-level--1 { padding-left: var(--space-4); }
.sd-contact-level--2 { padding-left: var(--space-8); }
.sd-contact-level--1::before, .sd-contact-level--2::before { content: "↳"; color: var(--text-tertiary); font-weight: 400; }
.sd-config-flow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.sd-config-flow > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 720; }
.sd-config-flow p { display: grid; gap: 2px; margin: 0; padding-bottom: var(--space-3); }
.sd-config-flow strong { font: var(--text-ui); }
.sd-config-flow small { color: var(--text-tertiary); font: var(--text-sm); }
.sd-choice--preview { margin-top: var(--space-3); cursor: default; }
.sd-choice__arrow { margin-left: auto; color: var(--text-tertiary); }
.sd-contact-suggestions { display: grid; gap: var(--space-4); width: 100%; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); text-align: left; }
.sd-contact-suggestions__head h3, .sd-contact-suggestions__head p { margin: 0; }
.sd-contact-suggestions__head h3 { margin-top: var(--space-2); font: var(--text-title-2); }
.sd-contact-suggestions__head p { margin-top: var(--space-1); color: var(--text-secondary); }
.sd-contact-suggestions__list { display: grid; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; }
.sd-contact-suggestions__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text); border-bottom: 1px solid var(--border-soft); }
.sd-contact-suggestions__list a:last-child { border-bottom: 0; }
.sd-contact-suggestions__list a:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-contact-suggestions__list strong { font: var(--text-ui); }
.sd-contact-suggestions__list span:not(:last-child) { color: var(--text-secondary); font: var(--text-sm); }
.sd-contact-suggestions__list span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--text-tertiary); }
.sd-contact-solved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-soft); }
.sd-contact-solved > span { margin-right: auto; font-weight: 620; }
.sd-contact-channel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-sunken); text-align: left; }
.sd-contact-channel > div:first-child { display: grid; gap: 3px; }
.sd-contact-channel strong { margin-top: var(--space-1); font: var(--text-ui); }
.sd-contact-channel small { color: var(--text-secondary); }
.sd-file-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.sd-file-picker:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.sd-file-picker__btn {
    flex-shrink: 0;
    margin: 0;
}
.sd-file-picker__names {
    min-width: 0;
    flex: 1 1 8rem;
    overflow: hidden;
    color: var(--text-secondary);
    font: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Contact compose shells already provide the field chrome; keep the picker flush. */
.sd-fld .sd-file-picker {
    min-height: 0;
    margin: var(--space-1) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.sd-fld .sd-file-picker:focus-within {
    border-color: transparent;
    box-shadow: none;
}
.sd-fld.is-invalid .sd-file-picker { border-color: transparent; }
.sd-contact-field { display: contents; }
.sd-contact-review { display: grid; gap: var(--space-3); width: 100%; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); text-align: left; scroll-margin-top: var(--space-6); }
.sd-contact-review h3, .sd-contact-review p { margin: 0; }
.sd-contact-review h3 { font: var(--text-title-2); }
.sd-contact-review p { color: var(--text-secondary); }
.sd-contact-review .sd-row { justify-content: flex-end; padding-top: var(--space-2); border-top: 1px solid var(--border-soft); }

/* The contact method is a real decision step, not a compact status row above
   the form. Large, quiet cards keep one decision per screen. */
.sd-channel-select { display: grid; gap: var(--space-8); }
.sd-channel-select__section { display: grid; gap: var(--space-5); }
.sd-channel-select__head { display: grid; justify-items: start; gap: var(--space-2); max-width: 720px; }
.sd-channel-select__head h2, .sd-channel-select__head p { margin: 0; }
.sd-channel-select__head h2 { font: var(--text-title-1); letter-spacing: var(--track-display); }
.sd-channel-select__head p { color: var(--text-secondary); font: var(--text-ui); }
.sd-channel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.sd-channel-cards--single { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.sd-channel-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-3);
    min-height: 230px;
    padding: var(--space-7) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    text-align: center;
    transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.sd-channel-card:hover { border-color: var(--text-tertiary); box-shadow: var(--elev-2); color: var(--text); text-decoration: none; transform: translateY(-1px); }
.sd-channel-card__icon { width: 52px; height: 52px; margin-bottom: var(--space-2); }
.sd-channel-card__icon svg { display: block; width: 100%; height: 100%; }
.sd-channel-card strong { font: var(--text-title-2); }
.sd-channel-card > span:last-child { max-width: 38ch; color: var(--text-secondary); font: var(--text-ui); }

/* Every field is a separate, readable block. display:contents previously
   collapsed the vertical rhythm into one dense stack. */
.sd-compose__channel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--text-secondary); font: var(--text-sm); }
.sd-compose__channel strong { color: var(--text); font: var(--text-ui); }
.sd-compose__form { gap: var(--space-6); margin-top: var(--space-7); }
.sd-compose__form [data-contact-fields] { display: grid; gap: var(--space-5); }
.sd-compose__form .sd-contact-field { display: block; }
.sd-compose__form .sd-contact-field > .sd-fld,
.sd-compose__form [data-contact-fields] > .sd-fld { width: 100%; padding: var(--space-4) var(--space-5); }
.sd-compose__form .sd-fld__label { margin-bottom: var(--space-1); color: var(--text-secondary); font-weight: 600; }
.sd-compose__form .sd-fld__hint { margin-top: var(--space-2); }
.sd-compose__form textarea.sd-fld__control { line-height: 1.55; }

@media (max-width: 720px) {
    .sd-channel-cards { grid-template-columns: minmax(0, 1fr); }
    .sd-channel-card { min-height: 190px; padding: var(--space-6) var(--space-5); }
}

/* Simplified Service Desk settings: a small number of plain destination
   cards, with advanced systems hidden until they are explicitly requested. */
.sd-setup-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--warning-fg) 28%, var(--border-soft)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning-fg) 5%, var(--surface-raised)); }
.sd-setup-banner__progress { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--surface-raised); color: var(--warning-fg); font: var(--text-title-3); font-weight: 700; }
.sd-setup-banner h2, .sd-setup-banner p { margin: 0; }
.sd-setup-banner h2 { margin-top: 2px; font: var(--text-title-3); }
.sd-setup-banner div > p:last-child { margin-top: var(--space-1); color: var(--text-secondary); font: var(--text-sm); }
.sd-settings-section { margin-bottom: var(--space-8); }
.sd-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.sd-settings-card { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-settings-card > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); min-height: 118px; padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
.sd-settings-card > header h3, .sd-settings-card > header p { margin: 0; }
.sd-settings-card > header h3 { font: var(--text-title-3); }
.sd-settings-card > header p { margin-top: var(--space-1); color: var(--text-secondary); font: var(--text-sm); }
.sd-settings-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-secondary); font-weight: 700; }
.sd-settings-card__links { display: grid; }
.sd-settings-card__links > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-soft); color: var(--text); }
.sd-settings-card__links > a:last-child { border-bottom: 0; }
.sd-settings-card__links > a:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sd-settings-card__links > a > span:first-child { display: grid; gap: 2px; min-width: 0; }
.sd-settings-card__links strong { overflow: hidden; font: var(--text-ui); text-overflow: ellipsis; white-space: nowrap; }
.sd-settings-card__links small { overflow: hidden; color: var(--text-tertiary); font: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.sd-settings-card__links > a > span:last-child { color: var(--accent); }
.sd-settings-card__empty { padding: var(--space-5); color: var(--text-tertiary); font: var(--text-sm); }
.sd-advanced-settings { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sd-advanced-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); cursor: pointer; list-style: none; }
.sd-advanced-settings > summary::-webkit-details-marker { display: none; }
.sd-advanced-settings > summary > span:first-child { display: grid; gap: var(--space-1); }
.sd-advanced-settings > summary strong { font: var(--text-title-3); }
.sd-advanced-settings > summary small { color: var(--text-secondary); font: var(--text-sm); }
.sd-advanced-settings[open] > summary { border-bottom: 1px solid var(--border-soft); }
.sd-advanced-settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-advanced-settings__grid > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); color: var(--text); }
.sd-advanced-settings__grid > a:nth-child(2n) { border-right: 0; }
.sd-advanced-settings__grid > a:nth-last-child(-n + 2) { border-bottom: 0; }
.sd-advanced-settings__grid > a:hover { background: var(--surface-sunken); text-decoration: none; }
.sd-advanced-settings__grid span { color: var(--text-tertiary); font: var(--text-sm); }

@media (max-width: 850px) {
    .sd-settings-grid, .sd-advanced-settings__grid { grid-template-columns: minmax(0, 1fr); }
    .sd-advanced-settings__grid > a { border-right: 0; }
    .sd-advanced-settings__grid > a:nth-last-child(2) { border-bottom: 1px solid var(--border-soft); }
}
@media (max-width: 620px) {
    .sd-setup-banner { grid-template-columns: auto minmax(0, 1fr); }
    .sd-setup-banner .sd-btn { grid-column: 1 / -1; width: 100%; }
    .sd-settings-card > header { grid-template-columns: 38px minmax(0, 1fr); }
    .sd-settings-card > header > .sd-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 1120px) {
    .sd-service-console { grid-template-columns: minmax(0, 1fr); }
    .sd-service-setup { position: static; }
    .sd-service-setup nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-setup-row:nth-last-child(2) { border-bottom: 0; }
    .sd-setup-row:nth-child(odd) { border-right: 1px solid var(--border-soft); }
}

@media (max-width: 850px) {
    .sd-command-center { grid-template-columns: 88px minmax(0, 1fr); }
    .sd-command-center__score { width: 88px; height: 88px; }
    .sd-command-center__next { grid-column: 1 / -1; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-soft); border-left: 0; }
    .sd-service-flow__track { grid-template-columns: minmax(0, 1fr); }
    .sd-service-flow__track li { min-height: 72px; }
    .sd-service-flow__track li:not(:last-child)::after { top: auto; right: 50%; bottom: -17px; transform: translateX(50%) rotate(90deg); }
    .sd-service-catalog { grid-template-columns: minmax(0, 1fr); }
	.sd-config-layout { grid-template-columns: minmax(0, 1fr); }
	.sd-config-aside { position: static; }
}

@media (max-width: 560px) {
    .sd-page-actions { justify-content: stretch; }
    .sd-page-actions .sd-btn { flex: 1; }
    .sd-command-center { grid-template-columns: minmax(0, 1fr); }
    .sd-command-center__score { width: 82px; height: 82px; }
    .sd-service-setup nav { grid-template-columns: minmax(0, 1fr); }
    .sd-setup-row:nth-child(odd) { border-right: 0; }
    .sd-setup-row:nth-last-child(2) { border-bottom: 1px solid var(--border-soft); }
    .sd-integration-row { grid-template-columns: 34px minmax(0, 1fr); }
    .sd-integration-row .sd-status-dot { grid-column: 2; }
	.sd-contact-channel { align-items: flex-start; flex-direction: column; }
	.sd-contact-solved .sd-btn { flex: 1 1 100%; }
}


/* --- Theme switcher — segmented, three states ---------------------------- */

.sd-footer__theme { display: inline-flex; }

.sd-theme {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}
.sd-theme__option {
    appearance: none;
    padding: 4px var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--accent);
    font: var(--text-footer);
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
}
.sd-theme__option:hover { background: var(--accent-tint); }
.sd-theme__option[aria-pressed="true"] {
    background: var(--segment-fill);
    color: var(--segment-ink);
    font-weight: 590;
}
.sd-theme__option[aria-pressed="true"]:hover { filter: brightness(1.08); }

@media (max-width: 700px) {
    /* Stacked, in reading order: what the page is, then the controls. */
    .sd-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    .sd-footer .sd-locale { margin-left: 0; }
    .sd-footer__links a:first-child { padding-left: 0; }
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

.sd-muted { color: var(--text-secondary); font: var(--text-sm); }
.sd-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.sd-lead { margin: var(--space-2) 0 0; max-width: 60ch; font: var(--text-sm); color: var(--text-secondary); }
.sd-stack { display: grid; gap: var(--space-4); }
.sd-stack--tight { gap: var(--space-2); }
.sd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sd-row--center { justify-content: center; }
.sd-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-list { margin: 0 0 1em; padding-left: 1.3em; max-width: var(--measure-text); }
.sd-list li + li { margin-top: var(--space-1); }
/* Accessible text for controls whose visible label is supplied by context. */
.sd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}