/* Design tokens — four themes, picked with the theme switcher at the bottom
   of the sidebar (saved per browser in localStorage, applied before first
   paint in base.html). Light is the default when nothing has been picked.

   Variable names are the app's original ones (--azure-blue, --bg-card, …)
   so every existing rule keeps working; the newer tokens below them
   (--on-accent, --*-bg, --font-doc, …) cover what the old palette had
   hardcoded. Strong fills (primary buttons, avatars, badges) always pair
   with --on-accent, which flips to a dark text colour in the dark themes,
   where the accent itself is light. */
:root,
:root[data-theme="light"] {
    --azure-blue: #1F4FD8;      /* accent */
    --azure-dark: #163A9E;      /* accent, hover / pressed */
    --azure-light: #EEF2FB;     /* accent tint (selected rows, chips) */
    --on-accent: #FFFFFF;       /* text/icons on any strong fill */
    --bg-primary: #F6F7F9;      /* page background */
    --bg-card: #FFFFFF;         /* panels, cards, sidebar */
    --bg-secondary: #F1F3F6;    /* subtle fills: secondary buttons, table heads */
    --bg-input: #F1F3F6;
    --bg-code: #F1F3F6;
    --text-primary: #14171F;
    --text-secondary: #5B6372;
    --text-heading: #14171F;
    --border: #DDE1E7;
    --success: #1A6B3E;
    --warning: #8A5300;
    --danger: #B42318;
    --purple: #6D28D9;
    --success-bg: #E6F4EC;
    --warning-bg: #FFF3E0;
    --danger-bg: #FDECEC;
    --chip-text: #1B3A99;
    --ins-bg: #E3F4EA;
    --ins-text: #145C34;
    --del-text: #8A2D2D;
    --link: #1F4FD8;
    --link-hover: #163A9E;
    --shadow: 0 8px 24px rgba(20, 23, 31, 0.12);
}

:root[data-theme="dark"] {
    --azure-blue: #7AB3FF;
    --azure-dark: #A9CDFF;
    --azure-light: #1C2A44;
    --on-accent: #0D1117;
    --bg-primary: #0D1117;
    --bg-card: #161B22;
    --bg-secondary: #1C2230;
    --bg-input: #1C2230;
    --bg-code: #1C2230;
    --text-primary: #E6E9EF;
    --text-secondary: #A0A9B8;
    --text-heading: #F3F5F8;
    --border: #2A313C;
    --success: #7EE0A5;
    --warning: #F6C77E;
    --danger: #F2A3A3;
    --purple: #C4A1FF;
    --success-bg: #13261C;
    --warning-bg: #2B2111;
    --danger-bg: #2D1414;
    --chip-text: #A9CDFF;
    --ins-bg: #133024;
    --ins-text: #8EE6B4;
    --del-text: #F2A3A3;
    --link: #7AB3FF;
    --link-hover: #A9CDFF;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme="midnight"] {
    --azure-blue: #4FC3F7;
    --azure-dark: #8FD3FF;
    --azure-light: #16304F;
    --on-accent: #0B1426;
    --bg-primary: #0B1426;
    --bg-card: #111D33;
    --bg-secondary: #18263F;
    --bg-input: #18263F;
    --bg-code: #18263F;
    --text-primary: #E4ECF7;
    --text-secondary: #9DB0C9;
    --text-heading: #F2F6FB;
    --border: #24344F;
    --success: #6FE0B2;
    --warning: #F5C66E;
    --danger: #F4A6A6;
    --purple: #C9B2FF;
    --success-bg: #0F2A24;
    --warning-bg: #2A2110;
    --danger-bg: #2E1622;
    --chip-text: #8FD3FF;
    --ins-bg: #0F3029;
    --ins-text: #7EE8BD;
    --del-text: #F4A6A6;
    --link: #4FC3F7;
    --link-hover: #8FD3FF;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

:root[data-theme="contrast"] {
    --azure-blue: #0033CC;
    --azure-dark: #002299;
    --azure-light: #E0E7FF;
    --on-accent: #FFFFFF;
    --bg-primary: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-secondary: #F2F2F2;
    --bg-input: #FFFFFF;
    --bg-code: #F2F2F2;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-heading: #000000;
    --border: #000000;
    --success: #0B4D26;
    --warning: #5C3900;
    --danger: #8F0000;
    --purple: #4B0082;
    --success-bg: #DFF5E6;
    --warning-bg: #FFF0C2;
    --danger-bg: #FFE5E5;
    --chip-text: #001A66;
    --ins-bg: #CFF0DA;
    --ins-text: #0B4D26;
    --del-text: #8F0000;
    --link: #0033CC;
    --link-hover: #001A66;
    --shadow: 0 0 0 2px #000000;
}

:root {
    --radius: 8px;
    --radius-lg: 10px;

    /* Typography
       - UI font: IBM Plex Sans; documents (CSD, artifacts, wiki prose
         where marked .doc-serif): Source Serif 4. Both loaded from Google
         Fonts in base.html, with system fallbacks if the network is down.
       - Mono font: OS-native — SF Mono / Menlo on Mac, Consolas on Windows,
         common Linux mono fallbacks after that. Nothing is downloaded for
         mono; we use whatever the device already provides. */
    --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-ui);
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 15px;
    line-height: 1.5;
}

/* Code / monospace surfaces use the OS-native mono stack. */
code, pre, kbd, samp, tt {
    font-family: var(--font-mono);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */

.sidebar {
    width: 240px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    padding: 1.5rem 0;
}

.sidebar-header {
    padding: 0.25rem 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
}

.sidebar-logo {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    color: var(--text-heading);
}

.sidebar-tagline {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-secondary);
    opacity: 0.75;
}

.sidebar-beta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar-beta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning);
    display: inline-block;
    flex-shrink: 0;
}

/* ── Sidebar search ── */
.sidebar-search {
    position: relative;
    margin: 0.9rem 1rem 0;
    display: flex;
    align-items: center;
}

.sidebar-search-icon {
    position: absolute;
    left: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.7;
    pointer-events: none;
}

.sidebar-search input[type="search"] {
    width: 100%;
    padding: 0.45rem 0.6rem 0.45rem 2rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.sidebar-search input[type="search"]:focus {
    outline: none;
    border-color: var(--azure-blue);
}

.sidebar-search input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

/* ── Nav ── */
.nav-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 1rem 1.4rem 0.4rem;
}

.nav-links {
    list-style: none;
    padding: 0 0.6rem;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 0.15s, color 0.15s;
}

.nav-links a:hover { background: var(--bg-secondary); }
.nav-links a.active { background: var(--azure-light); color: var(--chip-text); font-weight: 600; }

.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.15s;
}
.nav-links a:hover .nav-icon { color: var(--text-primary); }
.nav-links a.active .nav-icon { color: var(--chip-text); }

/* ── Footer: user card + sign out ── */
.sidebar-footer {
    padding: 0.85rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
    min-width: 0;
}
.sidebar-user:hover,
.sidebar-user.active { background: var(--bg-secondary); }

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--azure-blue);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.sidebar-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--danger);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-signout:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: var(--danger);
}

.theme-picker {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
}
.theme-picker button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.theme-picker button:hover { color: var(--text-heading); }
.theme-picker button[aria-pressed="true"] {
    background: var(--azure-blue);
    color: var(--on-accent);
}
.theme-picker button:focus-visible {
    outline: 2px solid var(--azure-blue);
    outline-offset: 2px;
}

/* ── Content Area ────────────────────────────────────────────────── */

/* Right-hand column: main content + footer, offset by the sidebar. */
.page {
    margin-left: 240px;
    flex: 1;
    min-width: 0;   /* wide tables scroll inside .table-wrap, never stretch the page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    padding: 2rem;
    flex: 1;
}

/* ── Global footer ── */
.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.app-footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.app-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.app-footer-brand-name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-heading);
}

.app-footer-brand-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
}

.app-footer-copy {
    color: var(--text-secondary);
}

.app-footer-sub {
    color: var(--text-secondary);
    opacity: 0.75;
    font-size: 0.78rem;
}

.app-footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.app-footer-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.app-footer-links a:hover {
    color: var(--azure-blue);
}

/* ── Changelog page ────────────────────────────────────────────────
   Server-rendered markdown. We style the raw HTML with clean typography —
   no card wrappers around each version (they were fragile with sibling
   selectors and caused floating orphaned pills). */

.changelog-doc {
    max-width: 780px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-primary);
}

/* Hide the top-level "# Changelog" — the page already has its own heading. */
.changelog-doc > h1 { display: none; }

/* Intro paragraphs (before the first version) */
.changelog-doc > p {
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

/* Beta callout blockquote */
.changelog-doc > blockquote {
    margin: 0.5rem 0 2.25rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.changelog-doc > blockquote p { margin: 0; }
.changelog-doc > blockquote strong { color: var(--warning); }

/* Version heading — a strong section divider, NOT a card wrapper. */
.changelog-doc h2 {
    margin: 2.25rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--azure-blue);
    color: var(--text-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.changelog-doc > h2:first-of-type { margin-top: 0.5rem; }

/* Version-body paragraphs (the short blurb under [0.1.0]) */
.changelog-doc h2 + p,
.changelog-doc h2 + p + p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Subsection pill: Added / Changed / Fixed / Removed / Security */
.changelog-doc h3 {
    display: inline-block;
    margin: 1.25rem 0 0.5rem;
    padding: 0.22rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.changelog-doc h3[id*="added"]   { color: var(--success);    border-color: color-mix(in srgb, var(--success) 40%, transparent);  background: color-mix(in srgb, var(--success) 10%, transparent); }
.changelog-doc h3[id*="changed"] { color: var(--azure-blue); border-color: color-mix(in srgb, var(--azure-blue) 40%, transparent);  background: color-mix(in srgb, var(--azure-blue) 10%, transparent); }
.changelog-doc h3[id*="fixed"]   { color: var(--warning);    border-color: color-mix(in srgb, var(--warning) 40%, transparent);  background: color-mix(in srgb, var(--warning) 10%, transparent); }
.changelog-doc h3[id*="removed"] { color: var(--danger);     border-color: color-mix(in srgb, var(--danger) 40%, transparent);  background: color-mix(in srgb, var(--danger) 10%, transparent); }
.changelog-doc h3[id*="security"]{ color: var(--purple);     border-color: color-mix(in srgb, var(--purple) 40%, transparent); background: color-mix(in srgb, var(--purple) 10%, transparent); }

/* Bullets — dot marker, tight spacing, readable indent */
.changelog-doc ul {
    list-style: none;
    padding-left: 0.25rem;
    margin: 0.25rem 0 0.75rem;
}
.changelog-doc ul li {
    position: relative;
    padding-left: 1.1rem;
    margin: 0.5rem 0;
}
.changelog-doc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--azure-blue);
    opacity: 0.75;
}
.changelog-doc ul li strong { color: var(--text-heading); }

/* Inline code (feature names, file paths) */
.changelog-doc code {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Reference links at the bottom (e.g. [0.2.0]: https://…) */
.changelog-doc a { color: var(--azure-blue); text-decoration: none; }
.changelog-doc a:hover { text-decoration: underline; }

/* Links in the main content area — readable on dark backgrounds */
.content a:not(.btn) {
    color: var(--link);
    text-decoration: none;
}
.content a:not(.btn):hover {
    color: var(--link-hover);
    text-decoration: underline;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
h2 { color: var(--text-heading); margin-bottom: 1rem; }
h3 { color: var(--text-heading); margin-bottom: 0.75rem; }
h4 { color: var(--text-heading); margin-bottom: 0.5rem; margin-top: 1rem; }

/* Documents (CSD, generated artifacts) read as documents, not UI. */
.doc-serif,
.doc-serif.md-rendered {
    font-family: var(--font-doc);
    font-size: 1.04rem;
    line-height: 1.65;
}
.doc-serif h1, .doc-serif h2, .doc-serif h3, .doc-serif h4 {
    font-family: var(--font-doc);
    font-weight: 700;
}
.doc-serif code, .doc-serif pre, .doc-serif table { font-family: var(--font-ui); }
.doc-serif pre code { font-family: var(--font-mono); }
ins { text-decoration: none; color: var(--ins-text); background: var(--ins-bg); padding: 0 3px; border-radius: 3px; }
del { color: var(--del-text); }

/* ── Cards ───────────────────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

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

.card-grid .card h3 {
    font-size: 2rem;
    color: var(--azure-blue);
    margin-bottom: 0.25rem;
}

.card-grid .card p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* ── Page Header ─────────────────────────────────────────────────── */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Sections ────────────────────────────────────────────────────── */

.section { margin-bottom: 2rem; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
}

.detail-table th, .detail-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.detail-table th {
    color: var(--text-secondary);
    font-size: 0.85rem;
    width: 180px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.45rem 0.95rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    /* Default look = subtle outlined button so a plain `.btn` is always visible.
       Color modifiers below override the background/border. */
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.2s, border-color 0.15s, background 0.15s;
    color: var(--text-primary);
}

.btn:hover { border-color: var(--azure-blue); }
.btn:focus-visible { outline: 2px solid var(--azure-blue); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); }
.btn-primary { background: var(--azure-blue); border-color: var(--azure-blue); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--azure-dark); }
.btn-secondary { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover, .btn-danger:hover { border-color: transparent; }
.btn-sm { min-height: 32px; padding: 0.25rem 0.7rem; font-size: 0.8rem; }

/* ── Action Bar ──────────────────────────────────────────────────── */

.action-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.inline-form { display: inline; }

/* ── Form Row (horizontal) ───────────────────────────────────────── */

.form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.form-row select,
.form-row input {
    max-width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.form-row select:focus,
.form-row input:focus {
    outline: none;
    border-color: var(--azure-blue);
}

/* ── Forms ────────────────────────────────────────────────────────── */

/* Global form element styling — dark theme for all inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--azure-blue);
}

select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 600px;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--azure-blue);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    accent-color: var(--azure-blue);
}

/* ── Alerts ──────────────────────────────────────────────────────── */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error, .alert-danger { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.alert-success { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); }
.alert-warning { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); }

/* ── Badges ──────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-pending { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-created { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-running { background: color-mix(in srgb, var(--azure-blue) 20%, transparent); color: var(--azure-blue); }
.badge-completed { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.badge-failed { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

/* Role badges */
.badge-admin { background: color-mix(in srgb, var(--purple) 20%, transparent); color: var(--purple); }
.badge-user { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-architect { background: color-mix(in srgb, var(--azure-blue) 20%, transparent); color: var(--azure-blue); }
.badge-engineer { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.badge-reader { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }

/* Status badges */
.badge-skipped { background: color-mix(in srgb, var(--text-secondary) 15%, transparent); color: var(--text-secondary); }

/* Severity badges */
.badge-danger { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.badge-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge-info { background: color-mix(in srgb, var(--azure-blue) 20%, transparent); color: var(--azure-blue); }

/* ── Team Columns (Customer Detail) ─────────────────────────────── */

.team-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.team-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.team-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.team-col-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.team-col .data-table { margin-bottom: 0; }

.team-readers {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 800px) {
    .team-columns { grid-template-columns: 1fr; }
}

/* ── Customer Cards ─────────────────────────────────────────────── */

.customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.customer-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    overflow: hidden;
}

.customer-card:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 4%, transparent);
    transform: translateY(-2px);
}

.customer-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.customer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--azure-blue);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.customer-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 1rem;
}

.customer-card-title {
    flex: 1;
    min-width: 0;
}

.customer-card-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-card-org {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.customer-card-body {
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.customer-card-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.customer-card-label {
    color: var(--text-secondary);
}

.customer-card-value {
    font-weight: 500;
}

/* ── Customer / Deployment Hero Header ────────────────────────────── */

.customer-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-left: 4px solid var(--azure-blue);
    flex-wrap: wrap;
    gap: 1rem;
}

.customer-hero-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 600px) {
    .customer-grid { grid-template-columns: 1fr; }
}

/* ── Design Workspace ────────────────────────────────────────────── */

.design-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    height: calc(100vh - 160px);
    min-height: 500px;
}

.design-chat-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.design-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.design-chat-input {
    border-top: 1px solid var(--border);
    padding: 1rem;
    background: var(--bg-secondary);
}

.design-chat-input textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
}

.design-chat-input textarea:focus {
    outline: none;
    border-color: var(--azure-blue);
}

/* ── Design sidebar boxes ── */
.sidebar-box {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.sidebar-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-box-title {
    margin: 0 0 0.6rem 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    margin-bottom: 0.4rem;
}

.sidebar-action-btn:last-child {
    margin-bottom: 0;
}

.sidebar-action-btn:hover:not(:disabled) {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 8%, transparent);
}

.sidebar-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sidebar-action-btn.completed {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 6%, transparent);
    color: var(--success);
}

.sidebar-check {
    color: var(--success);
    font-weight: 700;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.artifact-count {
    background: var(--azure-blue);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 10px;
    padding: 0 0.35rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.sidebar-approve-btn {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sidebar-approve-btn.ready {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}

.sidebar-approve-btn.ready:hover {
    background: color-mix(in srgb, var(--success) 25%, transparent);
}

.sidebar-approve-btn.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Typing indicator ── */
.typing-dots span {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary);
    animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.design-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-y: auto;
}

.design-welcome {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.design-welcome h3 { color: var(--text-heading); margin-bottom: 0.5rem; }

.design-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.design-suggestion {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-primary);
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.design-suggestion:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 10%, transparent);
}

/* Chat messages */
.chat-msg { margin-bottom: 1rem; }

.chat-msg-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chat-msg-user .chat-msg-label { color: var(--azure-blue); }
.chat-msg-assistant .chat-msg-label { color: var(--success); }

/* Chat message timestamp — small muted text next to the sender label. */
.chat-msg-time {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4rem;
    opacity: 0.75;
}

/* Same style for the tool-conversation rows on the step page. */
.conv-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
    opacity: 0.75;
    font-family: var(--font-mono);
}

.chat-msg-body {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    line-height: 1.6;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg-user .chat-msg-body {
    background: color-mix(in srgb, var(--azure-blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--azure-blue) 20%, transparent);
}

/* Artifact sidebar items */
.design-artifact-item {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: background 0.15s;
    position: relative;
}

.design-artifact-item:hover { background: var(--bg-secondary); }

.design-artifact-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.design-artifact-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-artifact-size { color: var(--text-secondary); font-size: 0.75rem; flex-shrink: 0; margin-left: 0.5rem; }

.artifact-delete-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.design-artifact-item:hover .artifact-delete-btn {
    display: block;
}

.artifact-delete-btn:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

@media (max-width: 900px) {
    .design-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .design-sidebar { order: -1; }
}

/* ── Design Workspace (A5 layout) ────────────────────────────────────
   Header with every document action; below it chapters + collapsible
   Workspace / Gates / Cost on the left, the CSD Architect chat and a live
   CSD preview side by side, equal width. Stacks on narrow screens. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ws-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.ws-header-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.ws-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.content .ws-breadcrumb a:not(.btn) { color: var(--text-secondary); }
.content .ws-breadcrumb a:not(.btn):hover { color: var(--text-heading); }
.ws-breadcrumb-current { color: var(--text-heading); font-weight: 600; }

.ws-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.ws-pill-warn { background: var(--warning-bg); color: var(--warning); }
.ws-pill-ok { background: var(--success-bg); color: var(--success); }

.ws-header-actions {
    flex: 1 1 380px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
.ws-inline-form { display: inline-flex; margin: 0; }
.ws-inline-form[hidden] { display: none; }

/* Header / panel buttons — the mockup's shape. */
.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ws-btn[hidden] { display: none; }
.content a.ws-btn:not(.btn) { color: var(--text-primary); text-decoration: none; }
.ws-btn:hover:not(:disabled) { border-color: var(--azure-blue); }
.ws-btn:focus-visible { outline: 2px solid var(--azure-blue); outline-offset: 2px; }
.ws-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ws-btn-sm { min-height: 34px; padding: 0 0.7rem; font-size: 0.82rem; }
.ws-icon-btn { min-width: 34px; padding: 0; font-size: 1.1rem; }
.ws-btn-primary {
    background: var(--azure-blue);
    border-color: var(--azure-blue);
    color: var(--on-accent);
    font-weight: 600;
}
.ws-btn-primary:hover:not(:disabled) { background: var(--azure-dark); border-color: var(--azure-dark); }
.ws-btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-accent);
    font-weight: 600;
}
/* A done step keeps its button, with a check after the label. */
.ws-btn.completed::after {
    content: "\2713";
    font-weight: 700;
}
.ws-btn-primary.completed::after { color: inherit; }
.ws-btn.completed:not(.ws-btn-primary)::after { color: var(--success); }

/* Approve: dashed and muted while locked, solid success once everything passes. */
.ws-approve-btn.locked {
    border-style: dashed;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.ws-approve-btn.ready {
    background: var(--success);
    border-color: var(--success);
    color: var(--on-accent);
    font-weight: 600;
}
.ws-approve-btn.ready:hover:not(:disabled) { border-color: var(--success); filter: brightness(1.08); }

/* "Create document" dropdown. */
.ws-menu { position: relative; }
.ws-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 300px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.ws-menu-panel[hidden] { display: none; }
.ws-menu-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ws-menu-item:hover:not(:disabled),
.ws-menu-item:focus-visible { background: var(--bg-secondary); outline: none; }
.ws-menu-item:disabled { opacity: 0.55; cursor: not-allowed; }
.ws-menu-item-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ws-menu-item-label { font-weight: 600; }
.ws-menu-item-hint { font-size: 0.78rem; color: var(--text-secondary); }
.ws-menu-item.completed .ws-menu-item-label::after {
    content: " \2713";
    color: var(--success);
}

/* Three columns. Desktop: fixed height so the chat and preview scroll
   inside their own panes; stacked below 1100px. */
.ws-layout {
    display: flex;
    flex-wrap: nowrap;   /* one line, so every column takes the row's fixed height and scrolls inside */
    gap: 1rem;
    align-items: stretch;
    height: calc(100vh - 150px);
    min-height: 560px;
}
.ws-side {
    flex: 1 1 220px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    min-height: 0;
}
.ws-side > * { flex-shrink: 0; }   /* the column scrolls; its cards never squeeze shut */
.ws-layout > .ws-panel {
    flex: 1 1 380px;
    min-width: 0;
    min-height: 0;
}

.ws-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}
.ws-card-label {
    margin: 0 0 0.5rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ws-small { font-size: 0.8rem; line-height: 1.5; }

.ws-chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ws-chapters-empty { padding: 0.3rem; font-size: 0.85rem; }
.ws-chapter {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}
.ws-chapter:hover { background: var(--bg-secondary); }
.ws-chapter:focus-visible { outline: 2px solid var(--azure-blue); outline-offset: 1px; }
.ws-chapter.active { background: var(--azure-light); color: var(--chip-text); font-weight: 600; }
.ws-chapter-n { min-width: 1.6rem; color: var(--text-secondary); flex-shrink: 0; }
.ws-chapter.active .ws-chapter-n { color: inherit; }
.ws-chapter-title { flex: 1; min-width: 0; }

.ws-collapsible { padding: 0; overflow: hidden; }
.ws-collapsible-head { margin: 0; font-size: 0.9rem; }
.ws-collapsible-btn {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.85rem;
    border: none;
    background: transparent;
    color: var(--text-heading);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.ws-collapsible-btn:focus-visible { outline: 2px solid var(--azure-blue); outline-offset: -2px; }
.ws-collapsible-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ws-caret::before { content: "\25BE"; }
.ws-collapsible-btn[aria-expanded="true"] .ws-caret::before { content: "\25B4"; }
.ws-collapsible-body {
    padding: 0.4rem 0.85rem 0.85rem;
    border-top: 1px solid var(--border);
}
.ws-collapsible-body[hidden] { display: none; }
.ws-collapsible-body .design-artifact-item { margin: 0 -0.35rem; }

.ws-gates {
    list-style: none;
    margin: 0.35rem 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.85rem;
}
.ws-gates li { display: flex; justify-content: space-between; gap: 0.5rem; }
.ws-gate-ok { color: var(--success); }
.ws-gate-warn { color: var(--warning); font-weight: 600; }
.ws-gate-todo { color: var(--text-secondary); }
.ws-override { margin-top: 0.6rem; }
.ws-override p { margin-top: 0.3rem; }

/* Chat + preview panes. */
.ws-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ws-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    min-height: 52px;
    border-bottom: 1px solid var(--border);
}
.ws-panel-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-heading); }
.ws-preview-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Diagram instructions panel (Design Workspace sidebar). */
.ws-notes-group { margin: 0.6rem 0 0.3rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.ws-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ws-notes li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; align-items: start; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); }
.ws-note-text { color: var(--text-primary); line-height: 1.4; overflow-wrap: anywhere; }
.ws-note-by { grid-column: 1; font-size: 0.72rem; }
.ws-note-remove { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ws-changes-btn[aria-pressed="true"] {
    background: var(--ins-bg);
    color: var(--ins-text);
    border-color: color-mix(in srgb, var(--ins-text) 40%, transparent);
}

/* "Show changes": what changed in this CSD version (csd_diff.py). Never
   colour alone — added text is underlined, removed text struck through. */
.ws-preview ins.csd-ins {
    text-decoration: none;
    color: var(--ins-text);
    background: var(--ins-bg);
    border-bottom: 2px solid color-mix(in srgb, var(--ins-text) 55%, transparent);
    padding: 0 2px;
    border-radius: 3px;
    cursor: help;
}
.ws-preview del.csd-del {
    color: var(--del-text);
    background: var(--danger-bg);
    text-decoration: line-through;
    padding: 0 2px;
    border-radius: 3px;
    cursor: help;
}
.ws-changes-note {
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    background: var(--ins-bg);
    color: var(--ins-text);
    font-size: 0.82rem;
    line-height: 1.45;
}
.ws-change-tip {
    position: fixed;
    z-index: 1000;
    max-width: 320px;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    background: var(--text-heading);
    color: var(--bg-card);
    font-size: 0.8rem;
    line-height: 1.4;
    box-shadow: var(--shadow);
    pointer-events: none;
}
.ws-chapter-changed {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success);
    align-self: center;
}

.ws-layout .design-chat-messages { flex: 1; overflow-y: auto; padding: 1.1rem 1rem; min-height: 0; }
.ws-layout .design-chat-input {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem 0.9rem;
    background: var(--bg-card);
}
.ws-layout .design-chat-input textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    background: var(--bg-input);
}
.ws-chat-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ws-chat-tools, .ws-chat-send { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ws-chat-note p { margin: 0; text-align: center; color: var(--text-secondary); }

.ws-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.6rem 1.9rem 2rem;
    min-height: 0;
}
.ws-preview-meta {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.ws-preview-meta[hidden], #csd-preview-content[hidden], .ws-preview-empty[hidden] { display: none; }
.ws-preview-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.ws-preview-empty h3 { color: var(--text-heading); margin-bottom: 0.4rem; }
#csd-preview-content h1, #csd-preview-content h2, #csd-preview-content h3 { color: var(--text-heading); margin: 1.1rem 0 0.5rem; line-height: 1.25; }
#csd-preview-content > :first-child { margin-top: 0; }
#csd-preview-content h1 { font-size: 1.5rem; }
#csd-preview-content h2 { font-size: 1.35rem; }
#csd-preview-content h3 { font-size: 1.2rem; }
#csd-preview-content h4 { font-size: 1.02rem; }
#csd-preview-content p { margin: 0 0 0.85rem; }
#csd-preview-content ul, #csd-preview-content ol { margin: 0 0 0.85rem 1.4rem; }
#csd-preview-content img { max-width: 100%; height: auto; border-radius: var(--radius); }

@media (max-width: 1100px) {
    .ws-layout { flex-wrap: wrap; height: auto; min-height: 0; }
    .ws-side { max-width: none; flex-basis: 100%; overflow: visible; }
    .ws-layout > .ws-panel { flex-basis: 100%; }
    .ws-layout .design-chat-messages { max-height: 60vh; }
    .ws-preview-body { max-height: 70vh; }
}

/* Chat messages — the mockup's bubbles: your messages on the right in
   the accent colour, the assistant's as plain text on the left. Shared by
   every chat in the app. */
.chat-msg { margin-bottom: 1rem; display: flex; flex-direction: column; }
.chat-msg-user { align-items: flex-end; }
.chat-msg-user .chat-msg-body {
    max-width: 85%;
    background: var(--azure-blue);
    border: none;
    color: var(--on-accent);
    border-radius: 14px 14px 4px 14px;
    padding: 0.65rem 0.95rem;
}
.chat-msg-assistant .chat-msg-body {
    max-width: 100%;
    background: transparent;
    padding: 0.1rem 0;
}
.chat-msg-user .chat-msg-label { color: var(--text-secondary); }
.chat-msg-assistant .chat-msg-label { color: var(--text-secondary); }
.chat-msg-label {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
}
.chat-msg-user .chat-msg-body a { color: inherit; text-decoration: underline; }
.chat-msg-user .chat-msg-body code { background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: inherit; }

/* ── Deployment Q&A Chat ────────────────────────────────────────── */

.qa-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.qa-chat-header:hover {
    background: var(--bg-secondary);
}

.qa-toggle-icon {
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.qa-chat-panel {
    display: none;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
    max-height: 500px;
}

.qa-chat-panel.open {
    display: flex;
}

.qa-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    min-height: 100px;
    max-height: 380px;
}

.qa-welcome {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.qa-chat-input {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
}

.qa-chat-input textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.65rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
}

.qa-chat-input textarea:focus {
    outline: none;
    border-color: var(--azure-blue);
}

/* ── Principle Filters ───────────────────────────────────────────── */

.principle-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-parent {
    padding: 0.45rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.filter-parent:hover { border-color: var(--azure-blue); }
.filter-parent.active {
    background: var(--azure-blue);
    border-color: var(--azure-blue);
    color: var(--on-accent);
}

.filter-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-left: 0.25rem;
}

.filter-sub {
    padding: 0.3rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-sub:hover { border-color: var(--azure-blue); color: var(--text-primary); }
.filter-sub.active {
    background: color-mix(in srgb, var(--azure-blue) 15%, transparent);
    border-color: var(--azure-blue);
    color: var(--azure-blue);
}

.filter-count {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.filter-clear {
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    align-self: center;
}

.filter-tag {
    padding: 0.3rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-tag:hover { border-color: var(--azure-blue); color: var(--text-primary); }
.filter-tag.active {
    background: color-mix(in srgb, var(--azure-blue) 15%, transparent);
    border-color: var(--azure-blue);
    color: var(--azure-blue);
}
.filter-tag.filter-show-all {
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tag.filter-show-all.active {
    background: var(--azure-blue);
    border-color: var(--azure-blue);
    color: var(--on-accent);
}

.tag-dropdown {
    padding: 0.35rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 200px;
}
.tag-dropdown:focus {
    outline: none;
    border-color: var(--azure-blue);
}

.tag-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: color-mix(in srgb, var(--azure-blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--azure-blue) 25%, transparent);
    border-radius: 8px;
    font-size: 0.65rem;
    color: var(--azure-blue);
    margin-right: 0.2rem;
    margin-top: 0.2rem;
}

/* ── Principle review (live SSE) ──────────────────────────────── */
.principle-review-item {
    transition: opacity 0.2s, border-color 0.2s;
}
.principle-review-item .principle-btn {
    transition: opacity 0.15s;
}
.principle-review-item .principle-btn.active {
    opacity: 1 !important;
    font-weight: 700;
}

.filter-clear:hover { border-color: var(--danger); color: var(--danger); }

/* ── SKU Review (live SSE) ───────────────────────────────────────── */
.sku-review-card h3 {
    color: var(--azure-blue);
}

.sku-resource-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}

.sku-resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.sku-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sku-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    min-width: 110px;
    text-align: center;
    font-size: 0.85rem;
}

.sku-btn:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 8%, transparent);
    transform: translateY(-1px);
}

.sku-btn-selected {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 15%, transparent);
    color: var(--text-heading);
    font-weight: 600;
}

.sku-btn-selected:hover {
    background: color-mix(in srgb, var(--azure-blue) 22%, transparent);
}

.sku-btn-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.sku-btn-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azure-blue);
    opacity: 0.9;
}

.sku-btn-cost {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sku-btn-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Step Flow ───────────────────────────────────────────────────── */

.step-flow {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.step-item {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 0.85rem;
    text-align: center;
    min-width: 120px;
    transition: border-color 0.2s, color 0.2s;
}

.step-item:hover { border-color: var(--azure-blue); }
.step-item.active { border-color: var(--azure-blue); color: var(--azure-blue); }
.step-item.completed { border-color: var(--success); color: var(--success); }
.step-item.skipped { border-color: var(--border); color: var(--text-secondary); opacity: 0.55; }
.step-item.skipped:hover { border-color: var(--text-secondary); opacity: 0.75; }
.step-item.failed { border-color: var(--danger); color: var(--danger); }
.step-item.locked { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* ── Flow Sections ──────────────────────────────────────────────── */

.flow-section {
    margin-bottom: 1.5rem;
}

.flow-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.flow-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.flow-title-design { color: var(--azure-blue); }
.flow-title-engineering { color: var(--success); }

/* ── Agent Output ────────────────────────────────────────────────── */

.agent-output {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* ── Conversation History ───────────────────────────────────────── */

.conversation {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 600px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.conv-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.conv-row-agent { flex-direction: row; }
.conv-row-user  { flex-direction: row-reverse; }

.conv-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}

.conv-avatar-agent { background: var(--azure-blue); color: var(--on-accent); }
.conv-avatar-user  { background: var(--success); color: var(--on-accent); }

.conv-bubble {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
    max-width: 80%;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
}

.conv-bubble-agent    { background: var(--bg-secondary); color: var(--text-primary); }
.conv-bubble-question { background: color-mix(in srgb, var(--azure-blue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--azure-blue) 35%, transparent); color: var(--text-primary); }
.conv-bubble-user     { background: var(--azure-blue); color: var(--on-accent); }

/* Tool call rows (commands, file writes, etc.) */
.conv-tool-row {
    margin-left: 36px;   /* align with bubble content past the avatar */
    font-size: 0.82rem;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.conv-tool-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.conv-tool-header:hover { background: var(--bg-secondary); }

.conv-tool-header code {
    font-family: var(--font-mono);
    color: var(--azure-blue);
    font-size: 0.82rem;
}

.conv-tool-header .conv-tool-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.conv-tool-header.open .conv-tool-icon { transform: rotate(90deg); }

.conv-tool-output {
    display: none;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    max-height: 250px;
    overflow-y: auto;
    white-space: pre-wrap;
    color: var(--text-secondary);
}

.conv-tool-header.open + .conv-tool-output { display: block; }

/* Separator between history and live output */
.conv-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin: 0.5rem 0;
}

.conv-separator::before,
.conv-separator::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border);
}

/* ── Extraction Progress ───────────────────────────────────────── */

.extraction-progress {
    padding: 0.5rem 0;
}

.progress-phases {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    position: relative;
}

/* Connector line behind the phases */
.progress-phases::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 32px;
    right: 32px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.progress-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
    flex: 1;
}

.phase-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.progress-phase.active .phase-dot {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 20%, transparent);
    color: var(--azure-blue);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.progress-phase.done .phase-dot {
    border-color: var(--success);
    background: var(--success);
    color: var(--on-accent);
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--azure-blue) 30%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--azure-blue) 0%, transparent); }
}

.phase-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.progress-phase.active .phase-label { color: var(--azure-blue); font-weight: 600; }
.progress-phase.done .phase-label   { color: var(--success); }

/* Progress bar */
.progress-bar-track {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar-fill {
    height: 100%;
    background: var(--azure-blue);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 5%;
}

/* Shared "little wheel" spin — a back-eased overshoot instead of a flat
   linear rotation, so it reads as a small wobble rather than a sterile
   mechanical spin. Used by the "Sync to GitHub" modal spinner. */
@keyframes wheel-wobble {
    to { transform: rotate(360deg); }
}

/* "Sync to GitHub" progress modal — indeterminate, since a single
   request/response has no real per-item progress to report. */
.sync-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 1.25rem;
    border: 4px solid var(--border);
    border-top-color: var(--azure-blue);
    border-right-color: var(--azure-blue);
    border-radius: 50%;
    animation: wheel-wobble 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.btn.is-loading, .sidebar-action-btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

/* ── Generic "loading wheel" popup ────────────────────────────────────
   Shown by the global submit handler in base.html for any plain form
   submit (upload, PDF generation, GitHub sync, renames...) — most of
   which otherwise navigate away with zero feedback while the request is
   in flight. A dashed ring orbits a cloud icon (the icon itself counter-
   rotates so it stays upright) above a witty quote that cycles every
   couple of seconds for as long as the popup is up. */
.loading-wheel-overlay { align-items: center; }
.loading-wheel-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    padding: 2.25rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
    margin: auto;
}
.loading-wheel-ring {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border: 2px dashed var(--azure-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wheel-wobble 2.4s linear infinite;
}
.loading-wheel-cloud {
    font-size: 1.85rem;
    line-height: 1;
    animation: wheel-wobble 2.4s linear infinite reverse;
}
.loading-wheel-quote {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.45;
    min-height: 2.6em;
}

.sync-progress-track {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.sync-progress-fill {
    height: 100%;
    width: 35%;
    background: var(--azure-blue);
    border-radius: 3px;
    animation: sync-progress-slide 1.2s ease-in-out infinite;
}

@keyframes sync-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}

.progress-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Review actions card */
.review-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.75rem;
}

/* Requirements rendered output */
.requirements-content {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.7;
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── File Upload Area ───────────────────────────────────────────── */

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.upload-area:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 5%, transparent);
}

.upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* ── Data Table ──────────────────────────────────────────────────── */

.data-table, .table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td,
.table th, .table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th, .table th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.data-table tr:hover, .table tr:hover { background: var(--bg-secondary); }

.data-table a:not(.btn) {
    color: var(--azure-blue);
    text-decoration: none;
}

.data-table a:not(.btn):hover { text-decoration: underline; }

/* ── Auth ─────────────────────────────────────────────────────────── */

.auth-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 1rem;
}

/* Brand panel next to the sign-in card: what Cobalt is for. */
.auth-brand { flex: 0 1 380px; min-width: 0; }
.auth-logo { display: block; width: 190px; height: auto; color: var(--text-heading); margin-bottom: 1.25rem; }
.auth-brand-lead { font-size: 1.15rem; line-height: 1.5; color: var(--text-heading); margin: 0 0 1.5rem; }
.auth-steps { margin-bottom: 1.5rem; }
.auth-brand-foot { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.auth-brand-foot a { color: var(--link); }

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
}

.auth-title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 600; color: var(--text-heading); }
.auth-sub { margin: 0 0 1.4rem; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.auth-card .btn { width: 100%; text-align: center; margin-top: 0.5rem; }
.auth-card .form-group small { display: block; margin-top: 0.3rem; }

@media (max-width: 860px) {
    .auth-container { gap: 1.25rem; align-content: center; }
    .auth-brand { flex-basis: 100%; max-width: 420px; text-align: center; }
    .auth-logo { margin: 0 auto 0.75rem; width: 160px; }
    .auth-brand-lead { font-size: 1rem; margin-bottom: 0; }
    .auth-brand .auth-steps, .auth-brand .auth-brand-foot { display: none; }
}

.divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.divider::before, .divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

/* ── Utilities ───────────────────────────────────────────────────── */

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

/* Inline select in data table */
.data-table select {
    padding: 0.25rem 0.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* ── Wiki ────────────────────────────────────────────────────────── */

.wiki-layout {
    display: flex;
    gap: 2rem;
    min-height: calc(100vh - 4rem);
}

.wiki-nav {
    width: 220px;
    flex-shrink: 0;
    padding: 1rem 0;
    border-right: 1px solid var(--border);
}

.wiki-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    padding: 1rem 1rem 0.4rem;
    font-weight: 600;
}

.wiki-nav ul {
    list-style: none;
    margin-bottom: 0.5rem;
}

.wiki-nav li a {
    display: block;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.wiki-nav li a:hover { background: var(--bg-card); }
.wiki-nav li a.active {
    color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 10%, transparent);
    font-weight: 600;
}

.wiki-content {
    flex: 1;
    max-width: 900px;
    line-height: 1.7;
}

/* ── Wiki typography ─────────────────────────────────────────────── */

.wiki-content h2 { margin-top: 0; margin-bottom: 1rem; }
.wiki-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.wiki-content h4 { margin-top: 1.25rem; margin-bottom: 0.5rem; }
.wiki-content p { margin-bottom: 1rem; color: var(--text-primary); }
.wiki-content strong { color: var(--text-heading); }
.wiki-content a { color: var(--azure-blue); text-decoration: none; }
.wiki-content a:hover { text-decoration: underline; }

.wiki-content ul,
.wiki-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.wiki-content li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

/* ── Wiki tables ─────────────────────────────────────────────────── */

.wiki-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.wiki-content th, .wiki-content td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.wiki-content th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
}

.wiki-content tr:hover { background: var(--bg-secondary); }

.wiki-content td code {
    background: var(--bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ── Wiki code blocks ────────────────────────────────────────────── */

.wiki-content pre {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wiki-content pre code {
    background: none;
    padding: 0;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.wiki-content code {
    font-family: var(--font-mono);
    color: var(--azure-blue);
    font-size: 0.88em;
}

/* ── Wiki cards ──────────────────────────────────────────────────── */

.wiki-content .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.wiki-content .card h4 {
    margin-top: 0;
    color: var(--azure-blue);
}

.wiki-content .card p:last-child { margin-bottom: 0; }

/* ── Wiki callouts ───────────────────────────────────────────────── */

.wiki-content .callout {
    border-left: 4px solid var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 8%, transparent);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.wiki-content .callout.warning {
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.wiki-content .callout.success {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, transparent);
}

.wiki-content .callout strong { color: var(--text-heading); }

/* ── Wiki diagrams ───────────────────────────────────────────────── */

.wiki-content .diagram {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.wiki-content .diagram-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.wiki-content .diagram-flow .node {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--text-primary);
}

.wiki-content .diagram-flow .node.tool {
    border-color: var(--azure-blue);
    color: var(--azure-blue);
}

.wiki-content .diagram-flow .node.gate {
    border-color: var(--warning);
    color: var(--warning);
}

.wiki-content .diagram-flow .arrow {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

/* ── Wiki step flow ──────────────────────────────────────────────── */

.wiki-content .step-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.wiki-content .step-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    text-align: center;
    min-width: 80px;
}

.wiki-content .step-box.gate {
    border-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.wiki-content .step-num {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.wiki-content .step-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-heading);
}

.wiki-content .step-box.gate .step-name { color: var(--warning); }

/* ── Wiki badges ─────────────────────────────────────────────────── */

.wiki-content .badge-agent {
    background: color-mix(in srgb, var(--azure-blue) 15%, transparent);
    color: var(--azure-blue);
}

.wiki-content .badge-gate {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
}

/* ── Wiki responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .wiki-layout {
        flex-direction: column;
    }
    /* Wide tables scroll sideways on their own instead of widening the page. */
    .wiki-content table {
        display: block;
        overflow-x: auto;
    }
    .wiki-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
    }
}

/* ── Dashboard ──────────────────────────────────────────────────── */

.dash-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* ── Admin sections ── */
.admin-section {
    margin-bottom: 2rem;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.admin-section-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-heading);
}

/* The deployment grid normally lives inside a card block (which supplies its
   inset). Standalone on the admin page it must drop that padding and match the
   customer grid's column width so all sections left-align on the same edge. */
.admin-section .dash-dep-grid {
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* Clickable summary cards lift on hover */
a.dash-summary-card {
    color: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
a.dash-summary-card:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 4%, transparent);
    transform: translateY(-2px);
}

.dash-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
}

.dash-summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--azure-blue);
    line-height: 1;
}

.dash-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

/* ── Customer block ── */

.dash-customer-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.dash-customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-customer-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-customer-title a {
    color: var(--text-heading);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
}

.dash-customer-title a:hover {
    color: var(--azure-blue);
}

.dash-customer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Activity dots */
.dash-activity {
    display: flex;
    gap: 4px;
    align-items: center;
}

.dash-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    transition: background 0.2s;
}

.dash-activity-dot.active {
    background: var(--azure-blue);
    border-color: var(--azure-blue);
}

.dash-customer-counts {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dash-meta-sep {
    color: var(--border);
}

/* Workload search/sort toolbar (engagement page) */
.workload-toolbar {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.workload-toolbar input[type="search"] {
    flex: 1;
    min-width: 0;
}

.workload-toolbar select {
    flex: 0 0 auto;
}

/* Deployment card grid */
.dash-dep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.dash-dep-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-dep-card:hover {
    border-color: var(--azure-blue);
    background: color-mix(in srgb, var(--azure-blue) 4%, transparent);
}

.dash-dep-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}

.dash-dep-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-dep-card-body {
    padding: 0.6rem 0.9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-dep-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.dash-dep-card-label {
    color: var(--text-secondary);
}

.dash-dep-card-value {
    font-weight: 600;
}

.dash-dep-card-footer {
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--border);
}

.dash-dep-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Progress pips */
.dash-dep-progress {
    display: flex;
    gap: 3px;
    align-items: center;
}

.dash-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
}

.dash-pip.filled {
    background: var(--success);
    border-color: var(--success);
}

.dash-pip.running {
    background: var(--warning);
    border-color: var(--warning);
    animation: pipPulse 1.5s ease-in-out infinite;
}

@keyframes pipPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.dash-empty {
    padding: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .dash-dep-grid {
        grid-template-columns: 1fr;
    }
}

/* Role badges */
.badge-admin { background: color-mix(in srgb, var(--purple) 20%, transparent); color: var(--purple); }
.badge-architect { background: color-mix(in srgb, var(--azure-blue) 20%, transparent); color: var(--azure-blue); }
.badge-engineer { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.badge-reader { background: color-mix(in srgb, var(--text-secondary) 15%, transparent); color: var(--text-secondary); }

/* ── Delivery Tollgate ──────────────────────────────────────────── */

.tollgate-check {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.2s;
}

.tollgate-check.done {
    border-color: var(--success);
}

.tollgate-check-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.tollgate-check-status {
    flex-shrink: 0;
}

.tollgate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
}

.tollgate-icon.pending {
    background: var(--bg-primary);
    border: 2px solid var(--border);
    color: var(--text-secondary);
}

.tollgate-icon.done {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border: 2px solid var(--success);
    color: var(--success);
    font-size: 1.1rem;
}

.tollgate-check-info {
    flex: 1;
    min-width: 0;
}

.tollgate-check-title {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
}

.tollgate-check-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tollgate-check-action {
    flex-shrink: 0;
}

.tollgate-output {
    border-top: 1px solid var(--border);
    max-height: 600px;
    overflow-y: auto;
}

.tollgate-output-content {
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    line-height: 1.6;
    word-wrap: break-word;
    color: var(--text-primary);
}

/* Rendered markdown inside tollgate output */
.tollgate-md {
    white-space: normal !important;
}
.tollgate-md h1, .tollgate-md h2, .tollgate-md h3, .tollgate-md h4 {
    color: var(--text-heading);
    margin: 0.75rem 0 0.3rem 0;
}
.tollgate-md h1 { font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.tollgate-md h2 { font-size: 1.05rem; }
.tollgate-md h3 { font-size: 0.95rem; }
.tollgate-md h4 { font-size: 0.88rem; color: var(--text-secondary); }
.tollgate-md p { margin: 0.3rem 0; }
.tollgate-md ul, .tollgate-md ol { margin: 0.2rem 0 0.2rem 1.5rem; }
.tollgate-md li { margin-bottom: 0.15rem; }
.tollgate-md > *:first-child { margin-top: 0; }
.tollgate-md strong { color: var(--text-heading); }
.tollgate-md code {
    background: var(--bg-primary);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.82rem;
}
.tollgate-md pre {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.tollgate-md pre code {
    background: none;
    padding: 0;
}
/* Same reasoning as .md-rendered pre.mermaid above — an SVG diagram, not a
   code block, so it shouldn't get the code-block box or left-alignment. */
.tollgate-md pre.mermaid {
    background: none;
    border: none;
    padding: 0;
    text-align: center;
}
.tollgate-md pre.mermaid svg {
    max-width: 100%;
    height: auto;
}
.tollgate-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.82rem;
}
.tollgate-md th, .tollgate-md td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.tollgate-md th {
    background: var(--bg-primary);
    color: var(--text-heading);
    font-weight: 600;
}
.tollgate-md hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75rem 0;
}
.tollgate-md blockquote {
    border-left: 3px solid var(--azure-blue);
    margin: 0.5rem 0;
    padding: 0.3rem 0.75rem;
    color: var(--text-secondary);
}
.tollgate-md a {
    color: var(--link);
    text-decoration: none;
}
.tollgate-md a:hover {
    text-decoration: underline;
    color: var(--link-hover);
}

/* ── Global rendered markdown ───────────────────────────────────── */
/* Applied automatically by the DOMContentLoaded renderer in base.html
   or manually via renderMarkdown() for SSE-streamed content.          */

/* Override pre-wrap that was needed for raw text but breaks rendered HTML.
   Without this, newlines between <p> tags are displayed as extra blank
   lines on top of the paragraph margins.                                */
.md-rendered {
    white-space: normal !important;
}

.md-rendered h1, .md-rendered h2, .md-rendered h3, .md-rendered h4 {
    color: var(--text-heading);
    margin: 0.75rem 0 0.3rem 0;
}
.md-rendered h1 { font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.md-rendered h2 { font-size: 1.05rem; }
.md-rendered h3 { font-size: 0.95rem; }
.md-rendered h4 { font-size: 0.88rem; color: var(--text-secondary); }
.md-rendered p { margin: 0.3rem 0; }
.md-rendered ul, .md-rendered ol { margin: 0.2rem 0 0.2rem 1.5rem; }
.md-rendered li { margin-bottom: 0.15rem; }
/* Remove top margin from the very first element to avoid gap at top of bubble */
.md-rendered > *:first-child { margin-top: 0; }
.md-rendered strong { color: var(--text-heading); }
.md-rendered code {
    background: var(--bg-primary);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.82rem;
}
.md-rendered pre {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.md-rendered pre code {
    background: none;
    padding: 0;
}
/* A rendered mermaid diagram is an <svg>, not code — drop the code-block
   box (background/border/padding) it'd otherwise inherit from .md-rendered
   pre above, and center it since diagrams read better centered than
   left-aligned like text. Still scrolls horizontally if wider than the
   container, same as a wide table or code block would. */
.md-rendered pre.mermaid {
    background: none;
    border: none;
    padding: 0;
    text-align: center;
}
.md-rendered pre.mermaid svg {
    max-width: 100%;
    height: auto;
}
.md-rendered table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.82rem;
}
.md-rendered th, .md-rendered td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.md-rendered th {
    background: var(--bg-primary);
    color: var(--text-heading);
    font-weight: 600;
}
.md-rendered hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75rem 0;
}
.md-rendered blockquote {
    border-left: 3px solid var(--azure-blue);
    margin: 0.5rem 0;
    padding: 0.3rem 0.75rem;
    color: var(--text-secondary);
}
.md-rendered a {
    color: var(--link);
    text-decoration: none;
}
.md-rendered a:hover {
    text-decoration: underline;
    color: var(--link-hover);
}

/* ── Generic modal ─────────────────────────────────────────────────── */
.modal-overlay {
    display: none;                 /* toggled to flex by openModalEl() */
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
}
.modal-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.modal-dialog-wide { max-width: 920px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; color: var(--text-heading); font-size: 1.05rem; }
.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 1.25rem; overflow-y: auto; }
.modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Activity timeline ────────────────────────────────────────────── */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
}
.activity-item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--azure-blue);
}
.activity-dot-principle { background: var(--warning); }
.activity-dot-member,
.activity-dot-contact { background: var(--purple); }
.activity-dot-deployment,
.activity-dot-design { background: var(--success); }
.activity-dot-document,
.activity-dot-note,
.activity-dot-artifact,
.activity-dot-customer { background: var(--azure-blue); }
.activity-summary { color: var(--text-primary); flex: 1; }
.activity-time {
    color: var(--text-secondary);
    font-size: 0.76rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Engagement chat ───────────────────────────────────────────────── */
.eng-chat-log {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 360px;
    overflow-y: auto;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
}
.eng-chat-log:empty { display: none; }
.eng-msg { max-width: 85%; }
.eng-msg-user { align-self: flex-end; text-align: right; }
.eng-msg-assistant { align-self: flex-start; }
.eng-msg-body {
    display: inline-block;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
}
.eng-msg-user .eng-msg-body {
    background: var(--azure-blue);
    border-color: var(--azure-blue);
    color: var(--on-accent);
}
.eng-chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.eng-chat-form textarea {
    width: 100%;
    resize: vertical;
}
.eng-chat-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Sidebar unread-feedback badge ─────────────────────────────────── */
.nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    min-width: 1.1rem;
    text-align: center;
}
.nav-links a.active .nav-badge { background: var(--azure-blue); color: var(--on-accent); }

/* ── File input (e.g. feedback screenshot upload) ──────────────────── */
input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}
input[type="file"]:hover { border-color: var(--azure-blue); }
input[type="file"]:focus { outline: none; border-color: var(--azure-blue); }

input[type="file"]::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 0.9rem;
    background: var(--azure-blue);
    border: none;
    border-radius: var(--radius);
    color: var(--on-accent);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
input[type="file"]::file-selector-button:hover { background: var(--azure-dark); }

/* ── "New version" toast (bottom-right, dismiss remembered per version) ── */
.version-toast {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1100;
    background: var(--bg-card);
    border: 1px solid var(--azure-blue);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 0.9rem 2.2rem 0.9rem 1rem;
    max-width: 320px;
    align-items: flex-start;
    animation: versionToastIn 0.3s ease-out;
}
@keyframes versionToastIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.version-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}
.version-toast-close:hover { color: var(--text-primary); }
.version-toast-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
}
.version-toast-link strong {
    color: var(--azure-blue);
    font-size: 0.92rem;
}
.version-toast-link span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Same shape as .version-toast, warning accent instead of the blue "new
   version" one — see the sync-error-toast bullet in the changelog. */
.sync-error-toast {
    border-color: var(--warning);
}
.sync-error-toast .version-toast-link strong {
    color: var(--warning);
}

/* Generated markdown documents (artifact viewer) read as a document. */
.artifact-doc {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.5rem 0.75rem;
    white-space: normal;
}
.artifact-doc h1, .artifact-doc h2, .artifact-doc h3 { color: var(--text-heading); margin: 1.2rem 0 0.5rem; line-height: 1.25; }
.artifact-doc > :first-child { margin-top: 0; }
.artifact-doc h1 { font-size: 1.7rem; }
.artifact-doc h2 { font-size: 1.4rem; }
.artifact-doc h3 { font-size: 1.2rem; }
.artifact-doc p { margin: 0 0 0.9rem; }
.artifact-doc ul, .artifact-doc ol { margin: 0 0 0.9rem 1.4rem; }
.artifact-doc img { max-width: 100%; height: auto; }

/* ══ Page components (v1.0.0) ═══════════════════════════════════════
   The shared building blocks every page is made of — see each page's
   template for usage. Tokens only: no colour here is hardcoded, so all
   four themes stay correct. */

/* Page header: breadcrumb, title + subtitle, meta facts, actions. */
.pg-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.pg-header-main { flex: 1 1 360px; min-width: 0; }
.pg-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.content .pg-crumbs a:not(.btn) { color: var(--text-secondary); }
.content .pg-crumbs a:not(.btn):hover { color: var(--text-heading); }
.pg-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.pg-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-heading);
}
.pg-sub { margin: 0.35rem 0 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; max-width: 72ch; }
.pg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pg-meta li { display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-meta strong { color: var(--text-primary); font-weight: 500; }
.pg-meta svg { flex-shrink: 0; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pg-actions form { margin: 0; display: inline-flex; }

/* Stat tiles. */
.pg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
a.stat { transition: border-color 0.15s, background 0.15s; }
a.stat:hover { border-color: var(--azure-blue); }
.content a.stat:not(.btn), .content a.stat:not(.btn):hover { color: inherit; text-decoration: none; }
.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--text-heading); }
.stat-hint { font-size: 0.8rem; color: var(--text-secondary); }
.stat-ok .stat-value { color: var(--success); }
.stat-warn .stat-value { color: var(--warning); }
.stat-danger .stat-value { color: var(--danger); }
.stat-accent .stat-value { color: var(--azure-blue); }

/* Panels: a card with a header row. */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    min-width: 0;
}
.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.panel-title { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--text-heading); }
.panel-title-meta { margin-left: 0.4rem; font-weight: 400; color: var(--text-secondary); font-size: 0.88rem; }
.panel-desc { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.panel-actions form { margin: 0; display: inline-flex; }
.panel-body { padding: 1rem 1.1rem; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-flush { padding: 0; }
.panel-flush .data-table th:first-child, .panel-flush .data-table td:first-child { padding-left: 1.1rem; }
.panel-flush .data-table th:last-child, .panel-flush .data-table td:last-child { padding-right: 1.1rem; }
.panel-foot {
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Two-column page body: main + aside; stacks when narrow. */
.pg-cols { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.pg-main { flex: 999 1 560px; min-width: 0; }
.pg-aside { flex: 1 1 280px; min-width: 0; }
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1rem;
}
.pg-grid > .panel { margin-bottom: 0; }

/* Key/value facts. */
.kv {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 0.55rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
}
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
/* In a narrow side column the 110px label minimum leaves values ~110px
   wide; size the labels to their text instead. */
.pg-aside .kv { grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; }

/* Status pills (text always present — colour is never the only signal). */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.pill-plain::before { display: none; }
.pill-ok { background: var(--success-bg); color: var(--success); }
.pill-warn { background: var(--warning-bg); color: var(--warning); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-info { background: var(--azure-light); color: var(--chip-text); }
.pill-neutral { background: var(--bg-secondary); color: var(--text-secondary); }

/* Empty state. */
.empty {
    text-align: center;
    padding: 2.25rem 1.25rem;
    color: var(--text-secondary);
}
.empty-icon { color: var(--text-secondary); opacity: 0.7; margin-bottom: 0.6rem; }
.empty-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; color: var(--text-heading); }
.empty p { margin: 0 auto 0.9rem; max-width: 52ch; line-height: 1.5; }
.empty > :last-child { margin-bottom: 0; }

/* Row lists (people, files, events). */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.rows > li:last-child { border-bottom: none; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 500; color: var(--text-heading); overflow-wrap: anywhere; }
.row-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.1rem; overflow-wrap: anywhere; }
.row-side { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--azure-light);
    color: var(--chip-text);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Progress bar. */
.progress {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--azure-blue); }
.progress-ok > span { background: var(--success); }

/* Phase stepper (Design → Engineering → Tollgate …). */
.stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.stepper > li {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-width: 0;
}
.stepper-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    border: 2px solid var(--border);
    color: var(--text-secondary);
}
.stepper-label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text-heading); }
.stepper-state { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.stepper > li.done .stepper-dot { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.stepper > li.current { border-color: var(--azure-blue); background: var(--azure-light); }
.stepper > li.current .stepper-dot { background: var(--azure-blue); border-color: var(--azure-blue); color: var(--on-accent); }
.stepper > li.current .stepper-label { color: var(--chip-text); }
.stepper > li.blocked .stepper-dot { border-color: var(--warning); color: var(--warning); }
.stepper-vertical { flex-direction: column; }
.stepper-vertical > li { flex: none; }

/* Callouts. */
.callout {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 0.9rem;
    line-height: 1.5;
}
.callout > svg { flex-shrink: 0; margin-top: 0.1rem; }
.callout-title { display: block; font-weight: 600; color: var(--text-heading); }
.callout-info { background: var(--azure-light); border-color: color-mix(in srgb, var(--azure-blue) 35%, transparent); }
.callout-info .callout-title, .callout-info > svg { color: var(--chip-text); }
.callout-warn { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.callout-warn .callout-title, .callout-warn > svg { color: var(--warning); }
.callout-ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.callout-ok .callout-title, .callout-ok > svg { color: var(--success); }
.callout-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.callout-danger .callout-title, .callout-danger > svg { color: var(--danger); }

/* Tables: a scroll box so wide tables never push the page sideways. */
/* position: relative keeps absolutely positioned children (.sr-only header
   labels) inside the scroll box instead of widening the page. */
.table-wrap { position: relative; width: 100%; overflow-x: auto; }
/* Long inline code (file paths, identifiers) wraps instead of widening the page. */
.markdown-body :not(pre) > code,
.changelog-doc :not(pre) > code,
.wiki-content :not(pre) > code { overflow-wrap: anywhere; }
.data-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.data-table td { vertical-align: middle; }
.cell-sub { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.1rem; }
.cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Small helpers. */
/* Workload "Progress" in tables (partials/phase_progress.html): the three
   phases with the same marks as the workload page's phase cards. */
.phase-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.phase-track li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.phase-track-mark {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
}
.phase-track-done .phase-track-mark { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.phase-track-current .phase-track-mark { border-color: var(--azure-blue); box-shadow: inset 0 0 0 3px var(--bg-card), inset 0 0 0 8px var(--azure-blue); }
.phase-track-current .phase-track-label { font-weight: 600; color: var(--text-heading); }
.phase-track-blocked .phase-track-mark { border-color: var(--danger); color: var(--danger); }
.phase-track-blocked .phase-track-label { font-weight: 600; color: var(--danger); }
.phase-track-next { margin-top: 0.25rem; }

.text-ok { color: var(--success); }
.text-warn { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-secondary); }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.88em; }

@media (max-width: 600px) {
    .pg-header { padding: 0.85rem 1rem; }
    .pg-title { font-size: 1.35rem; }
    .kv { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .kv dd { margin-bottom: 0.45rem; }
}

/* Narrow screens: the fixed sidebar becomes a compact block above the
   page instead of pushing the content off-screen. */
@media (max-width: 900px) {
    body { flex-direction: column; }
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        padding: 0.75rem 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 1rem 0.75rem;
    }
    .sidebar-logo { width: 140px; }
    .sidebar-tagline, .nav-section-label { display: none; }
    .nav-links { flex: none; flex-direction: row; flex-wrap: wrap; padding: 0.5rem 0.75rem 0; }
    .sidebar-footer { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .sidebar-user { flex: 1 1 180px; }
    .page { margin-left: 0; }
    .content { padding: 1rem; }
    .app-footer { padding: 1rem; }
}

/* ── Collapsible sidebar ─────────────────────────────────────────────
   html[data-sidebar] is set before first paint (base.html) and toggled by
   the button in the sidebar header. Desktop: a 72px icon rail — labels stay
   in the DOM, visually hidden, so links keep their accessible names; the
   title attributes give tooltips. Phones (see the 900px block above): the
   menu folds away, leaving the header row. */
.sidebar-header { position: relative; }
.sidebar-toggle {
    position: absolute;
    top: -0.6rem;
    right: 0.5rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-toggle:hover { background: var(--bg-secondary); color: var(--text-heading); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--azure-blue); outline-offset: 2px; }
.sidebar-toggle-chevron { transition: transform 0.2s; transform-origin: 14.5px 12px; }
html[data-sidebar="collapsed"] .sidebar-toggle-chevron { transform: rotate(180deg); }
.sidebar-logo-icon { display: none; width: 36px; height: 36px; }
.nav-links a { position: relative; }

@media (min-width: 901px) {
    .sidebar { transition: width 0.2s ease; overflow-x: hidden; }
    .page { transition: margin-left 0.2s ease; }

    html[data-sidebar="collapsed"] .sidebar { width: 72px; }
    html[data-sidebar="collapsed"] .page { margin-left: 72px; }
    html[data-sidebar="collapsed"] .sidebar-header { padding: 0 0.5rem 0.9rem; gap: 0.6rem; }
    html[data-sidebar="collapsed"] .sidebar-toggle { position: static; order: 2; }
    html[data-sidebar="collapsed"] .sidebar-logo,
    html[data-sidebar="collapsed"] .sidebar-tagline,
    html[data-sidebar="collapsed"] .sidebar-beta,
    html[data-sidebar="collapsed"] .sidebar-search,
    html[data-sidebar="collapsed"] .nav-section-label { display: none; }
    html[data-sidebar="collapsed"] .sidebar-logo-icon { display: block; }
    html[data-sidebar="collapsed"] .nav-links { padding: 0.75rem 0.5rem 0; }
    html[data-sidebar="collapsed"] .nav-links a { justify-content: center; padding: 0.65rem 0; }
    html[data-sidebar="collapsed"] .nav-links a > span:not(.nav-badge),
    html[data-sidebar="collapsed"] .sidebar-user-meta,
    html[data-sidebar="collapsed"] .sidebar-signout-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    html[data-sidebar="collapsed"] .nav-badge {
        position: absolute;
        top: 3px;
        right: 6px;
        margin: 0;
        padding: 0.12rem 0.32rem;
        font-size: 0.6rem;
    }
    html[data-sidebar="collapsed"] .sidebar-footer { padding: 0.6rem 0.4rem; align-items: center; }
    html[data-sidebar="collapsed"] .sidebar-user { justify-content: center; padding: 0.3rem; }
    html[data-sidebar="collapsed"] .sidebar-signout { width: 44px; height: 40px; padding: 0; }
    html[data-sidebar="collapsed"] .theme-picker { flex-direction: column; border-radius: 22px; }
}

@media (max-width: 900px) {
    .sidebar-toggle { position: static; order: 2; }
    html[data-sidebar="collapsed"] .sidebar-search,
    html[data-sidebar="collapsed"] .nav-links,
    html[data-sidebar="collapsed"] .sidebar-footer { display: none; }
    html[data-sidebar="collapsed"] .sidebar-header { border-bottom: none; padding-bottom: 0; }
}