/* ==========================================================================
   Social Ambassadors -- Brand Override (Pico CSS layer)
   Matches social-ambassadors.com identity (Helvetica family, electric purple #4a2eff)
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
    /* Brand palette */
    --brand-black: rgb(0, 0, 0);
    --brand-white: rgb(255, 255, 255);
    --brand-bg-secondary: rgb(247, 247, 247);

    /* Blues */
    --brand-blue: rgb(0, 58, 150);
    --brand-blue-dark: rgb(0, 29, 75);

    /* Earth / warm */
    --brand-earth-light: rgb(249, 197, 180);
    --brand-earth: rgb(243, 167, 143);
    --brand-earth-dark: rgb(158, 59, 27);

    /* Purple (matches social-ambassadors.com logo and homepage accents) */
    --brand-purple: rgb(74, 46, 255);
    --brand-purple-dark: rgb(58, 34, 214);
    --brand-purple-deep: rgb(28, 10, 61);

    /* Green */
    --brand-green: rgb(64, 124, 81);
    --brand-green-dark: rgb(43, 83, 54);
    --brand-green-deep: rgb(21, 41, 27);

    /* Neutral */
    --brand-disabled: rgb(128, 128, 128);
    --brand-muted: rgb(100, 100, 100);

    /* Semantic */
    --brand-success: var(--brand-green);
    --brand-warning: rgb(210, 160, 60);
    --brand-danger: rgb(180, 40, 40);

    /* Layout */
    --nav-width: 220px;

    /* Typography  Helvetica family throughout to match social-ambassadors.com */
    --brand-font-body: 'Helvetica Neue', Helvetica, 'helvetica-w01-roman', Arial, sans-serif;
    --brand-font-heading: var(--brand-font-body);
    --brand-font-small: 'Helvetica Neue', Helvetica, 'din-next-w01-light', Arial, sans-serif;
    --brand-font-label: var(--brand-font-small);
}

/* ---------- Pico overrides ---------- */
html[data-theme="light"] {
    --pico-font-family: var(--brand-font-body);
    --pico-primary: var(--brand-purple);
    --pico-primary-hover: var(--brand-purple-dark);
    --pico-primary-focus: rgba(74, 46, 255, 0.25);
    --pico-color: var(--brand-black);
    --pico-background-color: var(--brand-white);
}

/* ---------- Global typography ---------- */
body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--brand-font-body);
    color: var(--brand-black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    letter-spacing: -0.005em;
}

small, .stat-label, .account-selector label, .badge {
    font-family: var(--brand-font-small);
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--nav-width);
    min-height: 100vh;
    background: var(--brand-purple-deep);
    padding: 1rem;
    position: fixed;
    overflow-y: auto;
}

.sidebar h2 {
    color: var(--brand-white);
    font-family: var(--brand-font-heading);
    font-size: 1.02rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    letter-spacing: 0.005em;
}

.sidebar-wordmark {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sidebar-wordmark-mono {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    /* Original SVG is #4a2eff; keep the brand purple glow against the dark sidebar */
}

.sidebar-wordmark-logo {
    max-height: 26px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-wordmark span {
    line-height: 1.15;
}

.sidebar nav a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    margin: 0.2rem 0;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--brand-font-body);
    transition: background 0.15s, color 0.15s;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: var(--brand-purple-dark);
    color: var(--brand-white);
}

/* ---------- Sidebar nav toggle all ---------- */
.sidebar .nav-toggle-all {
    display: block;
    font-size: 0.65rem;
    font-family: var(--brand-font-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.3);
    text-align: right;
    padding: 0.2rem 0.75rem 0;
    margin: 0.25rem 0 0;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.sidebar .nav-toggle-all:hover {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

/* ---------- Sidebar nav groups (collapsible) ---------- */
.sidebar details.nav-group {
    margin: 0;
    border: none;
    padding: 0;
}

.sidebar details.nav-group > summary {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-family: var(--brand-font-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0.6rem 0.75rem 0.25rem;
    margin: 0.3rem 0 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    border-radius: 4px;
    transition: color 0.15s;
    /* Reset Pico accordion styles */
    background-image: none;
    outline: none;
}

.sidebar details.nav-group > summary:hover {
    color: rgba(255, 255, 255, 0.8);
}

.sidebar details[open].nav-group > summary {
    margin-bottom: 0;
}

/* Override Pico focus styles inside sidebar */
.sidebar details.nav-group > summary:focus,
.sidebar details.nav-group > summary:focus-visible {
    color: rgba(255, 255, 255, 0.8);
    outline: none;
}

.sidebar details.nav-group .nav-group-items {
    padding: 0 0 0.15rem 0.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: 0.5rem;
}

.sidebar details.nav-group .nav-group-items a {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    margin: 0.1rem 0;
}

.sidebar .account-selector {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar .account-selector label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar .account-selector select {
    background: var(--brand-purple-dark);
    color: var(--brand-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.4rem;
    width: 100%;
    font-size: 0.85rem;
    border-radius: 4px;
}

/* ---------- Main content ---------- */
.main-content {
    margin-left: var(--nav-width);
    flex: 1;
    padding: 2rem;
    max-width: calc(100% - var(--nav-width));
    background: var(--brand-white);
}

/* ---------- Flash messages ---------- */
.flash {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.flash.success {
    background: rgba(64, 124, 81, 0.1);
    color: var(--brand-green-dark);
    border: 1px solid rgba(64, 124, 81, 0.25);
}

.flash.error {
    background: rgba(180, 40, 40, 0.08);
    color: var(--brand-danger);
    border: 1px solid rgba(180, 40, 40, 0.2);
}

.flash.info {
    background: rgba(74, 46, 255, 0.06);
    color: var(--brand-purple-dark);
    border: 1px solid rgba(74, 46, 255, 0.15);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge.active {
    background: rgba(64, 124, 81, 0.12);
    color: var(--brand-green);
}

.badge.inactive {
    background: rgba(243, 167, 143, 0.2);
    color: var(--brand-earth-dark);
}

.badge.error {
    background: rgba(180, 40, 40, 0.08);
    color: var(--brand-danger);
}

/* Direction badges (inbox) */
.badge-in {
    background: rgba(74, 46, 255, 0.1);
    color: var(--brand-purple-dark);
}

.badge-out {
    background: rgba(64, 124, 81, 0.12);
    color: var(--brand-green);
}

.badge-warning {
    background: rgba(210, 160, 60, 0.12);
    color: #92710e;
}

.badge-success {
    background: rgba(64, 124, 81, 0.12);
    color: var(--brand-green);
}

.badge-info {
    background: rgba(0, 58, 150, 0.1);
    color: var(--brand-blue);
}

.badge-purple {
    background: rgba(74, 46, 255, 0.1);
    color: var(--brand-purple);
}

.badge-draft {
    background: rgba(128, 128, 128, 0.08);
    color: var(--brand-muted);
}

html[data-theme="dark"] .badge-warning { background: rgba(210, 160, 60, 0.18); color: #d2a03c; }
html[data-theme="dark"] .badge-info { background: rgba(0, 58, 150, 0.18); color: #5a9aff; }
html[data-theme="dark"] .badge-purple { background: rgba(74, 46, 255, 0.18); color: #b484ff; }
html[data-theme="dark"] .badge-draft { background: rgba(128, 128, 128, 0.12); color: #999; }

/* ---------- Sentiment badges ---------- */
.badge-sentiment-positive {
    background: rgba(64, 124, 81, 0.12);
    color: var(--brand-green);
}
.badge-sentiment-curious {
    background: rgba(0, 58, 150, 0.10);
    color: rgb(0, 58, 150);
}
.badge-sentiment-frustrated {
    background: rgba(210, 160, 60, 0.12);
    color: #92710e;
}
.badge-sentiment-angry {
    background: rgba(180, 40, 40, 0.10);
    color: rgb(180, 40, 40);
}
.badge-sentiment-neutral {
    background: rgba(128, 128, 128, 0.08);
    color: #666;
}
html[data-theme="dark"] .badge-sentiment-positive { background: rgba(64, 124, 81, 0.2); color: #6dbb84; }
html[data-theme="dark"] .badge-sentiment-curious { background: rgba(0, 58, 150, 0.18); color: #5a9aff; }
html[data-theme="dark"] .badge-sentiment-frustrated { background: rgba(210, 160, 60, 0.18); color: #d2a03c; }
html[data-theme="dark"] .badge-sentiment-angry { background: rgba(180, 40, 40, 0.18); color: #e65555; }
html[data-theme="dark"] .badge-sentiment-neutral { background: rgba(128, 128, 128, 0.12); color: #999; }

/* Sentiment stat value colors (dark mode safe) */
.stat-curious { color: var(--brand-blue); }
html[data-theme="dark"] .stat-curious { color: #5a9aff; }

/* ---------- Health dots ---------- */
.health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.health-dot.green { background: var(--brand-green); }
.health-dot.yellow { background: var(--brand-warning); }
.health-dot.red { background: var(--brand-danger); }

/* ---------- Stat cards ---------- */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--brand-bg-secondary);
    border: 1px solid rgba(74, 46, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-purple-deep);
    font-family: var(--brand-font-heading);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--brand-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Tables ---------- */
table {
    font-size: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Primary button: electric purple pill (matches social-ambassadors.com).
   High-specificity selectors so we beat Pico's [type=submit] rules. */
button,
button[type],
[type="submit"],
[type="button"],
[type="reset"],
[role="button"] {
    border: 1px solid var(--brand-purple);
    background: var(--brand-purple);
    background-color: var(--brand-purple);
    color: var(--brand-white);
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    --pico-background-color: var(--brand-purple);
    --pico-border-color: var(--brand-purple);
    --pico-color: var(--brand-white);
    --pico-primary-background: var(--brand-purple);
    --pico-primary-border: var(--brand-purple);
    --pico-primary-hover-background: var(--brand-purple-dark);
    --pico-primary-hover-border: var(--brand-purple-dark);
}

button:hover,
button[type]:hover,
[type="submit"]:hover,
[type="button"]:hover,
[type="reset"]:hover,
[role="button"]:hover {
    background: var(--brand-purple-dark);
    background-color: var(--brand-purple-dark);
    color: var(--brand-white);
    border-color: var(--brand-purple-dark);
}

button:active,
[type="submit"]:active,
[type="button"]:active,
[role="button"]:active { transform: translateY(1px); }

/* Secondary button: solid dark ink, white text */
button.secondary,
[type="submit"].secondary,
[type="button"].secondary,
[role="button"].secondary {
    background: var(--brand-black);
    background-color: var(--brand-black);
    color: var(--brand-white);
    border-color: var(--brand-black);
    --pico-background-color: var(--brand-black);
    --pico-border-color: var(--brand-black);
}

button.secondary:hover,
[type="submit"].secondary:hover,
[type="button"].secondary:hover,
[role="button"].secondary:hover {
    background: var(--brand-purple);
    background-color: var(--brand-purple);
    color: var(--brand-white);
    border-color: var(--brand-purple);
}

/* Outline buttons: transparent + purple border, fills on hover */
button.outline,
[type="submit"].outline,
[type="button"].outline,
[role="button"].outline {
    background: transparent;
    background-color: transparent;
    border: 1px solid var(--brand-purple);
    color: var(--brand-purple);
    --pico-background-color: transparent;
    --pico-border-color: var(--brand-purple);
    --pico-color: var(--brand-purple);
}

button.outline:hover,
[type="submit"].outline:hover,
[type="button"].outline:hover,
[role="button"].outline:hover {
    background: var(--brand-purple);
    background-color: var(--brand-purple);
    color: var(--brand-white);
    border-color: var(--brand-purple);
}

button.outline.secondary,
[role="button"].outline.secondary {
    border-color: var(--brand-muted);
    color: var(--brand-muted);
    background: transparent;
    --pico-color: var(--brand-muted);
    --pico-border-color: var(--brand-muted);
}

button.outline.secondary:hover,
[role="button"].outline.secondary:hover {
    background: var(--brand-muted);
    color: var(--brand-white);
    border-color: var(--brand-muted);
}

/* Pico contrast variant: re-skin to brand dark */
button.contrast,
[type="submit"].contrast,
[type="button"].contrast,
[role="button"].contrast {
    background: var(--brand-purple-deep);
    background-color: var(--brand-purple-deep);
    color: var(--brand-white);
    border-color: var(--brand-purple-deep);
    --pico-background-color: var(--brand-purple-deep);
    --pico-border-color: var(--brand-purple-deep);
}

button.contrast:hover,
[type="submit"].contrast:hover,
[type="button"].contrast:hover,
[role="button"].contrast:hover {
    background: var(--brand-purple);
    background-color: var(--brand-purple);
    color: var(--brand-white);
    border-color: var(--brand-purple);
}

/* Ghost button: minimal table-row treatment, no purple flood */
button.ghost,
[type="submit"].ghost,
[type="button"].ghost,
[role="button"].ghost {
    background: transparent;
    background-color: transparent;
    color: var(--brand-black);
    border-color: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    --pico-background-color: transparent;
}

button.ghost:hover,
[type="submit"].ghost:hover,
[type="button"].ghost:hover,
[role="button"].ghost:hover {
    background: rgba(74, 46, 255, 0.06);
    background-color: rgba(74, 46, 255, 0.06);
    color: var(--brand-purple);
    border-color: var(--brand-purple);
}

/* ---------- Conversation header ---------- */
.conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.conv-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.conv-back {
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--brand-muted);
    line-height: 1;
    padding: 0.25rem;
}

.conv-back:hover {
    color: var(--brand-purple);
}

.conv-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-purple-deep);
    color: var(--brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    font-family: var(--brand-font-label);
}

.conv-header-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.conv-handoff-banner {
    background: rgba(210, 160, 60, 0.12);
    border: 1px solid rgba(210, 160, 60, 0.3);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--brand-warning);
}

.conv-actions-bar {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(74, 46, 255, 0.08);
}

/* ---------- Messages (conversation bubbles) ---------- */
.message {
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin: 0.25rem 0;
    max-width: 75%;
    position: relative;
}

.message.in {
    background: rgba(74, 46, 255, 0.08);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.message.out {
    background: rgba(64, 124, 81, 0.1);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message p {
    line-height: 1.4;
    word-wrap: break-word;
}

.message-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--brand-muted);
}

.message.out .message-meta {
    justify-content: flex-end;
}

.message-status {
    text-transform: lowercase;
    font-style: italic;
}

/* Date divider */
.conv-date-divider {
    text-align: center;
    margin: 1rem 0 0.5rem;
    position: relative;
}

.conv-date-divider span {
    background: var(--brand-bg-secondary, #f5f5f5);
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    color: var(--brand-muted);
    font-family: var(--brand-font-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Conversation thread container ---------- */
.thread-container {
    margin: 0 0 0.75rem 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    scroll-behavior: smooth;
}

/* ---------- Overview account card ---------- */
.account-card {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    background: var(--brand-white);
}

.account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.account-card-header h3 {
    margin: 0;
}

.account-card-header small {
    color: var(--brand-muted);
}

/* ---------- Reply form ---------- */
.reply-form {
    display: flex;
    gap: 0.5rem;
}

.reply-form input[type="text"] {
    flex: 1;
}

/* ---------- Inbox list ---------- */
.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.inbox-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--brand-white);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(74, 46, 255, 0.06);
    cursor: pointer;
}

.inbox-item:last-child {
    border-bottom: none;
}

.inbox-item:hover {
    background: rgba(74, 46, 255, 0.03);
}

.inbox-item.unread {
    background: rgba(74, 46, 255, 0.04);
}

.inbox-item.unread .inbox-item-name {
    font-weight: 700;
}

.inbox-item.unread .inbox-item-preview {
    font-weight: 500;
    color: var(--brand-black);
}

.inbox-item.pinned {
    border-left: 3px solid var(--brand-purple);
}

.inbox-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-purple-deep);
    color: var(--brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
    font-family: var(--brand-font-label);
}

.inbox-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.inbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

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

.inbox-item-display-name {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--brand-muted);
    margin-left: 0.25rem;
}

.inbox-item-time {
    font-size: 0.75rem;
    color: var(--brand-muted);
    white-space: nowrap;
    font-family: var(--brand-font-label);
}

.inbox-item.unread .inbox-item-time {
    color: var(--brand-purple);
    font-weight: 600;
}

.inbox-item-preview {
    font-size: 0.85rem;
    color: var(--brand-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.inbox-direction-arrow {
    color: var(--brand-green);
    font-weight: 600;
}

.inbox-item-badges {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.1rem;
}

.inbox-unread-badge {
    background: var(--brand-purple);
    color: var(--brand-white);
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: var(--brand-font-label);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.inbox-score-badge {
    background: rgba(210, 160, 60, 0.12);
    color: #92400e;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
}

.inbox-score-badge.hot {
    background: rgba(180, 40, 40, 0.1);
    color: var(--brand-danger);
}

.inbox-badge-count {
    background: var(--brand-danger);
    color: var(--brand-white);
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    vertical-align: middle;
    font-family: var(--brand-font-label);
}

.inbox-pin-icon {
    color: var(--brand-purple);
    font-size: 0.8rem;
}

.inbox-date-group {
    padding: 0.35rem 1rem;
    font-family: var(--brand-font-small);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-muted);
    background: var(--brand-bg-secondary);
    border-bottom: 1px solid rgba(74, 46, 255, 0.06);
}

.inbox-msg-count {
    margin-left: auto;
    font-size: 0.65rem;
    font-family: var(--brand-font-label);
    color: var(--brand-muted);
    flex-shrink: 0;
    background: rgba(74, 46, 255, 0.06);
    padding: 0 0.3rem;
    border-radius: 0.5rem;
}

.inbox-tag-pill {
    background: rgba(74, 46, 255, 0.08);
    color: var(--brand-purple-dark);
    padding: 0.02rem 0.35rem;
    border-radius: 0.3rem;
    font-size: 0.6rem;
    font-weight: 500;
    font-family: var(--brand-font-label);
    white-space: nowrap;
}

html[data-theme="dark"] .inbox-date-group {
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .inbox-tag-pill {
    background: rgba(74, 46, 255, 0.15);
    color: rgba(200, 180, 255, 0.8);
}

html[data-theme="dark"] .inbox-msg-count {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .inbox-item {
    background: var(--brand-bg-secondary);
}

html[data-theme="dark"] .inbox-item:hover {
    background: rgba(74, 46, 255, 0.08);
}

html[data-theme="dark"] .inbox-item.unread {
    background: rgba(74, 46, 255, 0.1);
}

html[data-theme="dark"] .inbox-item.unread .inbox-item-preview {
    color: var(--brand-white);
}

/* ---------- Calendar filter bar ---------- */
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.filter-pills {
    display: flex;
    gap: 0.5rem;
}

.filter-pills a {
    font-size: 0.8rem;
}

/* ---------- Campaign action row ---------- */
.action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* ---------- Settings form spacing ---------- */
.settings-form label {
    flex: 1;
}

.settings-inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: end;
}

.settings-inline-form label {
    flex: 1;
}

.settings-inline-form button {
    margin-bottom: 0;
}

/* Danger heading */
.danger-heading {
    color: var(--brand-danger);
}

/* ---------- HTMX indicator ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--brand-muted);
}

/* ---------- Login page ---------- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--brand-white);
}

.login-box {
    max-width: 400px;
    width: 100%;
    padding: 2rem;
}

.login-box h1 {
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--brand-font-heading);
    font-weight: 300;
    color: var(--brand-purple-deep);
}

/* ---------- Mobile hamburger ---------- */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1001;
    background: var(--brand-purple-deep);
    border: none;
    border-radius: 6px;
    padding: 0.6rem 0.5rem;
    cursor: pointer;
    width: 40px;
    height: 36px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--brand-white);
    border-radius: 1px;
    transition: transform 0.2s;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .sidebar-overlay {
        display: none;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        width: 250px;
        min-height: 100vh;
        z-index: 999;
        transition: left 0.25s ease;
        overflow-y: auto;
    }

    body.sidebar-open .sidebar {
        left: 0;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    .main-content {
        margin-left: 0;
        max-width: 100%;
        padding: 1rem;
        padding-top: 3.5rem;
    }

    /* Stack grid on mobile */
    .grid-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.5rem;
    }

    .stat-card .stat-value {
        font-size: 1.2rem;
    }

    /* Make tables scroll horizontally */
    figure:has(> table),
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables not in a figure: make the table itself scrollable */
    table:not(figure table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table[role="grid"] {
        min-width: 480px;
    }

    /* Stack forms */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Smaller buttons on mobile */
    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* Inbox mobile */
    .inbox-item {
        padding: 0.6rem 0.75rem;
    }

    .inbox-item-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    /* Conversation mobile */
    .conv-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .conv-header-actions {
        width: 100%;
    }

    .message {
        max-width: 90%;
    }

    .thread-container {
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
        padding: 0.75rem;
        padding-top: 3.5rem;
    }
}

/* ==========================================================================
   UGC Content Library
   ========================================================================== */

/* Grid */
.ugc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Card */
.ugc-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    background: var(--brand-bg-secondary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ugc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 10, 61, 0.1);
}

/* Media area */
.ugc-card-media {
    display: block;
    position: relative;
    text-decoration: none;
    background: var(--brand-purple-deep);
}

.ugc-card-media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.ugc-card-video-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-purple-deep);
    color: var(--brand-white);
    font-size: 2.5rem;
}

/* Status badge overlay */
.ugc-status-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--brand-font-small);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ugc-status-pending { background: rgba(210, 160, 60, 0.9); color: #fff; }
.ugc-status-approved { background: rgba(64, 124, 81, 0.9); color: #fff; }
.ugc-status-rejected { background: rgba(180, 40, 40, 0.9); color: #fff; }
.ugc-status-archived { background: rgba(100, 100, 100, 0.9); color: #fff; }

/* Inline status badge (detail page) */
.ugc-status-badge-inline {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-family: var(--brand-font-small);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Type badge */
.ugc-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: var(--brand-font-small);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Card body */
.ugc-card-body {
    padding: 0.75rem;
}

.ugc-card-creator {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--brand-purple);
}

.ugc-card-caption {
    font-size: 0.8rem;
    color: var(--brand-muted);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.ugc-card-meta {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.25rem;
}

.ugc-card-tags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.ugc-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(74, 46, 255, 0.08);
    color: var(--brand-purple);
    font-family: var(--brand-font-small);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ugc-rating {
    color: var(--brand-warning);
    font-size: 0.8rem;
    letter-spacing: -1px;
}

/* Quick action buttons */
.ugc-card-actions {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.75rem 0.75rem;
}

.ugc-btn-approve {
    background: var(--brand-green);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.ugc-btn-approve:hover {
    background: var(--brand-green-dark);
    color: #fff;
}

.ugc-btn-reject {
    background: var(--brand-danger);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.ugc-btn-reject:hover {
    background: rgb(140, 30, 30);
    color: #fff;
}

/* Review bar (detail page) */
.ugc-review-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(74, 46, 255, 0.1);
}

/* Info cards (detail sidebar) */
.ugc-info-card {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    background: var(--brand-bg-secondary);
}

.ugc-info-label {
    font-family: var(--brand-font-small);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-muted);
    margin-bottom: 0.5rem;
}

/* Media card (detail page) */
.ugc-media-card {
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(74, 46, 255, 0.1);
    background: var(--brand-bg-secondary);
}

/* Collection card */
.ugc-collection-card {
    padding: 1.25rem;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    background: var(--brand-bg-secondary);
}

/* Filter separator */
.ugc-filter-sep {
    color: var(--brand-muted);
    opacity: 0.4;
    font-size: 0.8rem;
}

/* Dark mode */
html[data-theme="dark"] .ugc-card,
html[data-theme="dark"] .ugc-info-card,
html[data-theme="dark"] .ugc-media-card,
html[data-theme="dark"] .ugc-collection-card {
    background: rgba(28, 10, 61, 0.15);
    border-color: rgba(74, 46, 255, 0.2);
}

html[data-theme="dark"] .ugc-card:hover {
    box-shadow: 0 4px 12px rgba(74, 46, 255, 0.15);
}

html[data-theme="dark"] .ugc-card-creator {
    color: rgb(180, 130, 255);
}

html[data-theme="dark"] .ugc-tag {
    background: rgba(74, 46, 255, 0.2);
    color: rgb(180, 130, 255);
}

html[data-theme="dark"] .ugc-card-caption,
html[data-theme="dark"] .ugc-info-label {
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .ugc-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .ugc-card-media img,
    .ugc-card-video-placeholder {
        height: 150px;
    }

    /* Stack detail page layout */
    .ugc-detail-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .ugc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .ugc-card-media img,
    .ugc-card-video-placeholder {
        height: 120px;
    }

    .ugc-card-body {
        padding: 0.5rem;
    }
}

/* ==========================================================================
   Split-Pane Inbox
   ========================================================================== */

.inbox-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid rgba(74, 46, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    min-height: 65vh;
}

/* Desktop: two columns when conversation is open */
@media (min-width: 769px) {
    .inbox-split {
        grid-template-columns: 340px 1fr;
    }
}

@media (min-width: 1100px) {
    .inbox-split {
        grid-template-columns: 380px 1fr;
    }
}

/* List pane */
.inbox-split-list {
    overflow-y: auto;
    max-height: 75vh;
    border-right: 1px solid rgba(74, 46, 255, 0.08);
}

.inbox-split-list .inbox-list {
    border: none;
    border-radius: 0;
}

.inbox-split-list .inbox-item {
    border-radius: 0;
}

/* Active conversation highlight */
.inbox-item.active {
    background: rgba(74, 46, 255, 0.08);
    border-left: 3px solid var(--brand-purple);
}

html[data-theme="dark"] .inbox-item.active {
    background: rgba(74, 46, 255, 0.15);
}

/* Keyboard focus indicator */
.inbox-item.keyboard-focus {
    outline: 2px solid var(--brand-purple);
    outline-offset: -2px;
}

/* Conversation pane */
.inbox-split-conv {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--brand-white);
}

#conv-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

/* Empty state centered */
.conv-pane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
}

.conv-pane-empty-inner {
    color: var(--brand-muted);
}

.conv-pane-empty-inner h3 {
    font-family: var(--brand-font-heading);
    font-weight: 300;
    margin: 0 0 0.25rem;
}

.conv-pane-empty-inner p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.conv-pane-empty-inner kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(74, 46, 255, 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--brand-font-label);
    background: rgba(74, 46, 255, 0.04);
}

/* Close button in partial */
.conv-pane-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--brand-muted);
    padding: 0.2rem 0.4rem;
    line-height: 1;
    border-radius: 4px;
}

/* Desktop: show X icon, hide Back label */
.conv-back-label { display: none; }
.conv-back-icon { display: inline; }

.conv-pane-close:hover {
    color: var(--brand-purple);
    background: rgba(74, 46, 255, 0.06);
}

/* Thread inside split pane */
.split-thread {
    flex: 1;
    max-height: none;
    min-height: 200px;
    max-height: 50vh;
}

/* Reply form inside split pane */
.split-reply-form {
    position: sticky;
    bottom: 0;
    background: var(--brand-white);
    padding-top: 0.5rem;
    border-top: 1px solid rgba(74, 46, 255, 0.08);
}

/* Notes inside split pane */
.split-notes {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.split-notes summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--brand-muted);
}

/* Header compact inside pane */
#conv-pane .conv-header {
    margin-bottom: 0.5rem;
}

#conv-pane .conv-actions-bar {
    margin-bottom: 0.5rem;
    padding: 0.3rem 0;
}

/* Mobile: hide conv pane until opened, then hide list */
@media (max-width: 768px) {
    .inbox-split {
        grid-template-columns: 1fr;
    }

    .inbox-split-conv {
        display: none;
    }

    .inbox-split.has-conv .inbox-split-list {
        display: none;
    }

    .inbox-split.has-conv .inbox-split-conv {
        display: flex;
    }

    .inbox-split-list {
        max-height: none;
        border-right: none;
    }

    .split-thread {
        max-height: 55vh;
    }
}

/* Dark mode */
html[data-theme="dark"] .inbox-split {
    border-color: rgba(74, 46, 255, 0.15);
}

html[data-theme="dark"] .inbox-split-list {
    border-right-color: rgba(74, 46, 255, 0.12);
}

html[data-theme="dark"] .inbox-split-conv {
    background: var(--pico-background-color);
}

html[data-theme="dark"] #conv-pane {
    background: var(--pico-background-color);
}

html[data-theme="dark"] .conv-pane-empty-inner kbd {
    border-color: rgba(74, 46, 255, 0.3);
    background: rgba(74, 46, 255, 0.1);
}

html[data-theme="dark"] .split-reply-form {
    background: var(--pico-background-color);
    border-top-color: rgba(74, 46, 255, 0.12);
}

/* Content Pillars */
.pillar-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}

.pillar-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------- Keyboard Shortcut Modal ---------- */
.shortcut-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    animation: shortcut-fade-in 0.15s ease-out;
}
@keyframes shortcut-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.shortcut-modal {
    background: var(--brand-white);
    border: 1px solid rgba(74, 46, 255, 0.15);
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(28, 10, 61, 0.25);
    animation: shortcut-slide-up 0.15s ease-out;
}
@keyframes shortcut-slide-up {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.shortcut-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(74, 46, 255, 0.08);
}
.shortcut-modal-header h3 {
    margin: 0;
    font-family: var(--brand-font-heading);
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--brand-purple-deep);
}
.shortcut-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--brand-muted);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s;
}
.shortcut-modal-close:hover {
    background: rgba(74, 46, 255, 0.06);
    color: var(--brand-purple);
}
.shortcut-modal-body {
    padding: 0.75rem 1.25rem 1rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
}
.shortcut-group h4 {
    font-family: var(--brand-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-purple);
    margin: 0 0 0.4rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(74, 46, 255, 0.08);
}
.shortcut-group:first-child {
    grid-row: span 2;
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
}
.shortcut-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    background: var(--brand-bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    color: var(--brand-purple-deep);
    white-space: nowrap;
}
.shortcut-row span {
    color: var(--brand-text, #333);
}
.shortcut-modal-footer {
    padding: 0.6rem 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--brand-muted);
    border-top: 1px solid rgba(74, 46, 255, 0.06);
}
.shortcut-modal-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--brand-bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Dark mode */
html[data-theme="dark"] .shortcut-modal {
    background: #1a1a2e;
    border-color: rgba(74, 46, 255, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .shortcut-modal-header h3 {
    color: rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .shortcut-modal-header {
    border-bottom-color: rgba(74, 46, 255, 0.15);
}
html[data-theme="dark"] .shortcut-modal-close {
    color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .shortcut-modal-close:hover {
    background: rgba(74, 46, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .shortcut-group h4 {
    color: rgba(74, 46, 255, 0.8);
    border-bottom-color: rgba(74, 46, 255, 0.15);
}
html[data-theme="dark"] .shortcut-row kbd {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .shortcut-row span {
    color: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] .shortcut-modal-footer {
    border-top-color: rgba(74, 46, 255, 0.12);
    color: rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] .shortcut-modal-footer kbd {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile: single column */
@media (max-width: 600px) {
    .shortcut-modal { max-width: 95%; }
    .shortcut-modal-body {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .shortcut-group:first-child {
        grid-row: auto;
    }
}

/* ---------- Workflow Chain (visual step editor) ---------- */
/* ============================================
   Workflow Visual Builder
   ============================================ */
.wf-builder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Nodes */
.wf-node {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--brand-bg-secondary);
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--pico-muted-border-color);
    position: relative;
    width: 100%;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.wf-node:hover {
    box-shadow: 0 2px 8px rgba(74, 46, 255, 0.08);
}
.wf-node-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
    line-height: 1;
    padding-top: 0.15rem;
}
.wf-node-content { flex: 1; min-width: 0; }
.wf-node-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-muted);
    font-weight: 600;
}
.wf-node-title { font-size: 0.95rem; font-weight: 500; }
.wf-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.wf-node-desc { font-size: 0.9rem; }
.wf-node-actions { display: flex; gap: 0.2rem; }
.wf-step-num {
    color: var(--brand-muted);
    font-size: 0.75rem;
    margin-left: 0.3rem;
}

/* Node type colors */
.wf-node-trigger { border-left-color: var(--brand-purple); background: rgba(74, 46, 255, 0.04); }
.wf-node-action { border-left-color: var(--brand-purple); }
.wf-node-condition { border-left-color: var(--brand-blue); }
.wf-node-delay { border-left-color: var(--brand-earth); }
.wf-node-end { border-left-color: var(--brand-muted); opacity: 0.7; }

/* Drag handle */
.wf-drag-handle {
    cursor: grab;
    color: var(--brand-muted);
    font-size: 0.9rem;
    padding: 0.1rem 0.2rem;
    flex-shrink: 0;
    user-select: none;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.wf-node:hover .wf-drag-handle { opacity: 1; }
.wf-drag-handle:active { cursor: grabbing; }

/* Mini action buttons */
.wf-btn-mini {
    background: none;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--pico-color);
    line-height: 1.2;
    transition: background 0.15s;
}
.wf-btn-mini:hover { background: var(--pico-muted-border-color); }
.wf-btn-danger { color: var(--brand-danger); border-color: var(--brand-danger); }
.wf-btn-danger:hover { background: rgba(180, 40, 40, 0.1); }

/* Connector / insert points */
.wf-insert-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 2.5rem;
    width: 100%;
}
.wf-connector-line {
    width: 2px;
    flex: 1;
    background: var(--pico-muted-border-color);
}
.wf-insert-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--pico-muted-border-color);
    background: var(--pico-background-color);
    color: var(--brand-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
    z-index: 1;
    opacity: 0;
}
.wf-insert-point:hover .wf-insert-btn {
    opacity: 1;
    border-color: var(--brand-purple);
    color: var(--brand-purple);
}
.wf-insert-btn:hover {
    background: var(--brand-purple);
    color: white;
    transform: scale(1.15);
}

/* Branch indicators for conditions */
.wf-branch-indicators {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
}
.wf-branch {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.wf-branch-yes {
    color: var(--brand-green);
    background: rgba(64, 124, 81, 0.08);
}
.wf-branch-no {
    color: var(--brand-danger);
    background: rgba(180, 40, 40, 0.08);
}

/* Sortable list */
.wf-steps-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Drag ghost & chosen states */
.wf-ghost {
    opacity: 0.3;
    border-style: dashed;
}
.wf-chosen {
    box-shadow: 0 4px 16px rgba(74, 46, 255, 0.15);
    border-color: var(--brand-purple);
}

/* Saved flash animation */
.wf-saved-flash {
    animation: wfFlash 0.8s ease;
}
@keyframes wfFlash {
    0% { box-shadow: 0 0 0 0 rgba(64, 124, 81, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(64, 124, 81, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(64, 124, 81, 0); }
}

/* Edit panel */
.wf-edit-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

/* Empty state */
.wf-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--brand-muted);
    width: 100%;
}
.wf-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Type card selector in modal */
.wf-type-cards {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.wf-type-card {
    flex: 1;
    cursor: pointer;
    margin: 0;
}
.wf-type-card input[type="radio"] { display: none; }
.wf-type-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--pico-muted-border-color);
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.wf-type-card-icon { font-size: 1.4rem; }
.wf-type-card-label { font-weight: 600; font-size: 0.85rem; }
.wf-type-card small { color: var(--brand-muted); font-size: 0.75rem; }
.wf-type-card input:checked + .wf-type-card-body {
    border-color: var(--brand-purple);
    background: rgba(74, 46, 255, 0.06);
}
.wf-type-card-action input:checked + .wf-type-card-body { border-color: var(--brand-purple); }
.wf-type-card-condition input:checked + .wf-type-card-body { border-color: var(--brand-blue); }
.wf-type-card-delay input:checked + .wf-type-card-body { border-color: var(--brand-earth); }

/* Dark mode */
html[data-theme="dark"] .wf-node {
    background: var(--pico-card-background-color);
}
html[data-theme="dark"] .wf-node-trigger {
    background: rgba(74, 46, 255, 0.08);
}
html[data-theme="dark"] .wf-btn-mini {
    color: var(--pico-color);
    border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .wf-btn-mini:hover {
    background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .wf-insert-btn {
    background: var(--pico-card-background-color);
}
html[data-theme="dark"] .wf-type-card-body {
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .wf-type-card input:checked + .wf-type-card-body {
    background: rgba(74, 46, 255, 0.12);
}
html[data-theme="dark"] .wf-branch-yes {
    background: rgba(64, 124, 81, 0.15);
}
html[data-theme="dark"] .wf-branch-no {
    background: rgba(180, 40, 40, 0.15);
}
html[data-theme="dark"] .wf-edit-panel {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Mobile */
@media (max-width: 768px) {
    .wf-builder { padding: 0.5rem 0; }
    .wf-type-cards { flex-direction: column; gap: 0.5rem; }
    .wf-type-card-body { flex-direction: row; padding: 0.5rem 0.75rem; }
    .wf-branch-indicators { flex-direction: column; gap: 0.3rem; }
}

/* Notification Bell */
.notif-bell-container {
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    z-index: 100;
}
.notif-bell-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pico-card-background-color);
    border: 1px solid rgba(74, 46, 255, 0.15);
    color: var(--pico-color);
    text-decoration: none;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.notif-bell-link:hover {
    background: rgba(74, 46, 255, 0.06);
    border-color: rgba(74, 46, 255, 0.3);
}
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgb(180, 40, 40);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--pico-card-background-color);
    border: 1px solid rgba(74, 46, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.notif-item {
    border-bottom: 1px solid var(--brand-bg-secondary);
    transition: background 0.1s;
}
.notif-item:hover {
    background: rgba(74, 46, 255, 0.04);
}
.notif-item:last-child {
    border-bottom: none;
}
html[data-theme="dark"] .notif-bell-link {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .notif-dropdown {
    background: var(--pico-card-background-color);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .notif-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 768px) {
    .notif-bell-container { top: 0.5rem; right: 3.5rem; }
    .notif-dropdown { width: 280px; right: -2rem; }
}

/* Command Palette */
.cmd-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--pico-color);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--brand-bg-secondary);
    transition: background 0.08s;
}
.cmd-item:hover {
    background: rgba(74, 46, 255, 0.06);
    text-decoration: none;
    color: var(--pico-color);
}
html[data-theme="dark"] .cmd-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- Utility classes (used across analytics/dashboard templates) ---------- */

.metric-card {
    text-align: center;
    padding: 0.75rem;
    margin: 0;
}
.metric-card small {
    display: block;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.2rem;
}
.metric-card strong {
    font-size: 1.3rem;
    display: block;
}

.tag-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(74, 46, 255, 0.1);
    color: var(--brand-purple, #4a2eff);
    white-space: nowrap;
}
.tag-badge.success { background: rgba(76, 175, 80, 0.12); color: #2e7d32; }
.tag-badge.warning { background: rgba(255, 152, 0, 0.12); color: #e65100; }
.tag-badge.contrast { background: rgba(244, 67, 54, 0.1); color: #c62828; }
html[data-theme="dark"] .tag-badge { background: rgba(74, 46, 255, 0.2); color: #bb86fc; }
html[data-theme="dark"] .tag-badge.success { background: rgba(76, 175, 80, 0.2); color: #81c784; }
html[data-theme="dark"] .tag-badge.warning { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
html[data-theme="dark"] .tag-badge.contrast { background: rgba(244, 67, 54, 0.15); color: #ef9a9a; }

.overflow-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.text-muted {
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

/* === Notification Bell === */
.notif-bell-container {
    position: fixed;
    top: 0.75rem;
    right: 1.5rem;
    z-index: 200;
}
.notif-bell-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pico-card-background-color);
    border: 1px solid var(--brand-bg-secondary, rgba(74, 46, 255,0.12));
    color: var(--pico-color);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.notif-bell-link:hover {
    background: var(--brand-bg-secondary, rgba(74, 46, 255,0.06));
    border-color: var(--brand-purple, #4a2eff);
}
.notif-bell-link svg {
    display: block;
}
.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: rgb(180, 40, 40);
    border-radius: 8px;
    padding: 0 4px;
    font-family: var(--brand-font-small, system-ui);
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--pico-card-background-color);
    border: 1px solid var(--brand-bg-secondary, rgba(74, 46, 255,0.12));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.notif-item {
    border-bottom: 1px solid var(--brand-bg-secondary, rgba(74, 46, 255,0.06));
    transition: background 0.1s;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item:hover {
    background: var(--brand-bg-secondary, rgba(74, 46, 255,0.04));
}

/* Mobile: bell moves left of hamburger area */
@media (max-width: 768px) {
    .notif-bell-container {
        top: 0.6rem;
        right: 3.5rem;
    }
    .notif-dropdown {
        width: calc(100vw - 2rem);
        right: -1rem;
    }
}

/* ============================================================================
   ATELIER LAYER  refined Parisian back-office aesthetic
   ------------------------------------------------------------------
   Mirrors social-ambassadors.com:  cream surfaces, hairline rules,
   electric purple (#4a2eff) used surgically, Helvetica throughout,
   editorial typography hierarchy.  Loaded last so it overrides
   the original component layer above.
   ============================================================================ */

:root {
    --atelier-cream:        #faf7f0;
    --atelier-cream-edge:   #f1ece0;
    --atelier-ink:          #14161c;
    --atelier-ink-soft:     #4a4f5c;
    --atelier-ink-muted:    #8a8f9a;
    --atelier-hairline:     rgba(20, 22, 28, 0.10);
    --atelier-hairline-soft:rgba(20, 22, 28, 0.06);
    --atelier-purple:       var(--brand-purple);
    --atelier-purple-soft:  rgba(74, 46, 255, 0.08);
    --atelier-appbar-h:     64px;
    --atelier-footer-h:     56px;
    --sidebar-w:            240px;
}

/* ---------- Global surface ---------- */
html[data-theme="light"] body {
    background: #ffffff;
    color: var(--atelier-ink);
}

html[data-theme="light"] {
    --pico-background-color: #ffffff;
    --pico-color: var(--atelier-ink);
    --pico-muted-color: var(--atelier-ink-muted);
    --pico-muted-border-color: var(--atelier-hairline);
    --pico-form-element-border-color: var(--atelier-hairline);
    --pico-card-background-color: #ffffff;
    --pico-card-sectioning-background-color: var(--atelier-cream);
}

body {
    font-family: var(--brand-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14.5px;
    line-height: 1.55;
    letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font-body);
    color: var(--atelier-ink);
    letter-spacing: -0.01em;
}

/* ============================================================================
   SIDEBAR  cream column with hairline rules and purple monogram
   ============================================================================ */

aside.sidebar {
    width: var(--sidebar-w);
    background: var(--atelier-cream);
    border-right: 1px solid var(--atelier-cream-edge);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The brand block at top */
aside.sidebar h2.sidebar-wordmark {
    margin: 0;
    padding: 1.4rem 1.25rem 1.1rem;
    color: var(--atelier-ink);
    background: transparent;
    border-bottom: 1px solid var(--atelier-hairline);
    font-family: var(--brand-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

aside.sidebar h2.sidebar-wordmark .sidebar-wordmark-mono {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

aside.sidebar h2.sidebar-wordmark .sidebar-wordmark-logo {
    max-height: 30px;
    width: auto;
    flex-shrink: 0;
}

aside.sidebar h2.sidebar-wordmark span {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

aside.sidebar h2.sidebar-wordmark span::after {
    content: "Workspace";
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--atelier-purple);
    margin-top: 0.2rem;
}

/* Search field  inline, no chrome */
aside.sidebar > form {
    margin: 0 !important;
    padding: 0.85rem 1.25rem 0.65rem;
    border-bottom: 1px solid var(--atelier-hairline-soft);
}

aside.sidebar > form input[type="text"] {
    width: 100%;
    height: 32px;
    padding: 0 0.6rem !important;
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    border-radius: 3px;
    font-size: 0.78rem !important;
    color: var(--atelier-ink);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

aside.sidebar > form input[type="text"]::placeholder {
    color: var(--atelier-ink-muted);
}

aside.sidebar > form input[type="text"]:focus {
    border-color: var(--atelier-purple);
    box-shadow: 0 0 0 3px var(--atelier-purple-soft);
    outline: none;
}

/* Top-level nav region scrolls; bottom block sticks */
aside.sidebar nav:not(.sidebar-bottom) {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem 0.75rem 1rem;
    scrollbar-width: thin;
}

aside.sidebar nav:not(.sidebar-bottom)::-webkit-scrollbar {
    width: 6px;
}
aside.sidebar nav:not(.sidebar-bottom)::-webkit-scrollbar-thumb {
    background: rgba(20, 22, 28, 0.10);
    border-radius: 3px;
}

/* Top-level nav links (Overview, Activity Feed, Compare) */
aside.sidebar nav > a {
    display: block;
    padding: 0.4rem 0.6rem 0.4rem 0.85rem;
    margin: 0;
    color: var(--atelier-ink);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    border-radius: 0;
    border-left: 2px solid transparent;
    background: transparent;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

aside.sidebar nav > a:hover {
    color: var(--atelier-purple);
    background: transparent;
}

aside.sidebar nav > a.active {
    color: var(--atelier-purple);
    border-left-color: var(--atelier-purple);
    background: transparent;
    font-weight: 600;
}

/* Expand-all toggle */
aside.sidebar .nav-toggle-all {
    color: var(--atelier-ink-muted) !important;
    font-family: var(--brand-font-body);
    font-size: 0.6rem !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.85rem 0.85rem 0.25rem !important;
    text-align: left !important;
    text-decoration: none;
}

aside.sidebar .nav-toggle-all:hover {
    color: var(--atelier-purple) !important;
}

/* Nav groups */
aside.sidebar details.nav-group {
    margin: 0.15rem 0;
}

aside.sidebar details.nav-group > summary {
    padding: 0.4rem 0.85rem 0.35rem;
    color: var(--atelier-ink-muted);
    font-family: var(--brand-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    background: transparent;
    transition: color 0.12s ease;
}

aside.sidebar details.nav-group > summary:hover {
    color: var(--atelier-purple);
}

aside.sidebar details.nav-group .nav-group-items {
    padding: 0 0 0.35rem 0;
    border-left: none;
    margin-left: 0;
}

aside.sidebar details.nav-group .nav-group-items a {
    display: block;
    padding: 0.32rem 0.6rem 0.32rem 1.55rem;
    margin: 0;
    color: var(--atelier-ink-soft);
    font-size: 0.82rem;
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

aside.sidebar details.nav-group .nav-group-items a:hover {
    color: var(--atelier-purple);
    background: transparent;
}

aside.sidebar details.nav-group .nav-group-items a.active {
    color: var(--atelier-purple);
    border-left-color: var(--atelier-purple);
    background: transparent;
    font-weight: 600;
}

/* Account selector */
aside.sidebar .account-selector {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--atelier-hairline-soft);
}

aside.sidebar .account-selector label {
    color: var(--atelier-ink-muted);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

aside.sidebar .account-selector select {
    background: #ffffff;
    color: var(--atelier-ink);
    border: 1px solid var(--atelier-hairline);
    padding: 0.4rem 0.55rem;
    width: 100%;
    font-size: 0.82rem;
    border-radius: 3px;
    margin-top: 0.35rem;
}

/* Photographic strip  atmospheric tie to homepage */
aside.sidebar::before {
    content: "";
    order: 100;
    display: block;
    height: 64px;
    margin: 0;
    background-image:
        linear-gradient(180deg, rgba(250, 247, 240, 1) 0%, rgba(250, 247, 240, 0) 18%),
        linear-gradient(0deg,   rgba(250, 247, 240, 0.55) 0%, rgba(250, 247, 240, 0) 100%),
        url("/app/static/sa-hero-creators.jpg");
    background-size: cover;
    background-position: center 30%;
    flex-shrink: 0;
    position: relative;
}

/* Bottom block (user, theme toggle, logout) */
/* ============================================================================
   MAIN CONTENT + APP BAR
   ============================================================================ */

main.main-content {
    background: #ffffff;
    padding: 0;
    max-width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The page body sits inside .main-content > {first non-appbar element}.
   We add an app-bar shell via base.html. Content below the bar gets padding. */

.appbar {
    height: var(--atelier-appbar-h);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--atelier-hairline);
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 50;
}

.appbar-left {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
}

.appbar-eyebrow {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--atelier-ink-muted);
    flex-shrink: 0;
}

.appbar-eyebrow::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1px;
    background: var(--atelier-hairline);
    margin: 0 0.5rem 0 0.65rem;
    vertical-align: middle;
    transform: translateY(-2px);
}

.appbar-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--atelier-ink);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

/* Platform-user identity: signed-in SA account (login email) — avatar + email.
   NOT the connected IG/FB account. Electric-pink sibling of the brand purple;
   override --sa-user-pink to retune. */
.appbar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding-right: 0.7rem;
    margin-right: 0.15rem;
    border-right: 1px solid var(--atelier-hairline);
}
.appbar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sa-user-pink, #ff2e88);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1;
    flex-shrink: 0;
    font-family: var(--brand-font-label);
}
.appbar-user-email {
    font-size: 0.78rem;
    color: var(--atelier-ink-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .appbar-user { padding-right: 0; margin-right: 0; border-right: none; }
    .appbar-user-email { display: none; }
}

/* Active-profile chip (appbar-left) — the client profile the Workspace is acting
   on. The MOST prominent identity on the page. Deterministic accent ring via
   --pf-accent (set inline per profile); short-lived fbcdn avatar with an initials
   fallback via onerror. Rendered only for multi-profile viewers, so single-account
   tenants (incl. the Meta reviewer) see the appbar byte-identical to before. */
.appbar-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    padding: 0.1rem 0.7rem 0.1rem 0.15rem;
    margin-right: 0.15rem;
    border-right: 1px solid var(--atelier-hairline);
    min-width: 0;
    flex-shrink: 1;
}
.appbar-profile-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--pf-accent, var(--atelier-purple));
    background: var(--pf-accent, var(--atelier-purple));
}
.appbar-profile-av-fb {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1;
    font-family: var(--brand-font-label);
}
.appbar-profile-handle {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--atelier-ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.appbar-profile:hover .appbar-profile-handle { color: var(--atelier-purple); }
.appbar-profile-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #8a8f9a;
}
.appbar-profile-dot--ok { background: #2fbf71; }
.appbar-profile-dot--page_only { background: #e0a13c; }
.appbar-profile-dot--down { background: #e0574c; }
@media (max-width: 640px) {
    .appbar-profile-handle { max-width: 110px; }
}
@media (max-width: 480px) {
    /* Keep the handle legible on mobile (the sidebar switcher is behind the
       drawer, so this chip is the only visible profile indicator) — truncate
       rather than hide. The page title truncates first via appbar-left overflow. */
    .appbar-profile { padding: 0.1rem 0.5rem 0.1rem 0.1rem; gap: 0.35rem; }
    .appbar-profile-handle { max-width: 84px; }
}

.appbar-date {
    font-size: 0.7rem;
    color: var(--atelier-ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-right: 0.65rem;
    border-right: 1px solid var(--atelier-hairline);
    margin-right: 0.25rem;
}

/* Override the fixed bell to inline within the appbar */
.appbar .notif-bell-container {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

.appbar .notif-bell-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--atelier-hairline);
    color: var(--atelier-ink-soft);
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.appbar .notif-bell-link:hover {
    color: var(--atelier-purple);
    border-color: var(--atelier-purple);
    background: var(--atelier-purple-soft);
}

.appbar .notif-badge {
    background: var(--atelier-purple);
    box-shadow: 0 0 0 2px #ffffff;
}

/* Hide the legacy floating notif bell (we moved it into the appbar) */
body > .notif-bell-container { display: none !important; }

/* Page-content wrapper that pages render into  generous padding */
.page-body {
    padding: 2.25rem 2.5rem 2.5rem;
    flex: 1;
    width: 100%;
    max-width: 1400px;
}

/* When pages don't yet use .page-body, give main-content direct children padding */
main.main-content > :not(.appbar):not(.app-footer):not(.page-body):not(script):not(style):not(.htmx-indicator):not([style*="position: fixed"]):not(.notif-bell-container):not(.shortcut-modal-overlay) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

main.main-content > :not(.appbar):not(.app-footer):not(.page-body):first-of-type {
    padding-top: 2.25rem;
}

/* ---------- Editorial page header treatment ---------- */

/* The first h1 inside main-content (or .page-body) gets the editorial pattern */
main.main-content h1:first-of-type,
.page-body > h1:first-of-type,
main.main-content > h1 {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--atelier-ink);
    margin: 0 0 1.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--atelier-hairline);
    position: relative;
}

main.main-content h1:first-of-type::before,
.page-body > h1:first-of-type::before,
main.main-content > h1::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--atelier-purple);
    margin-bottom: 0.9rem;
}

/* Subsequent h2 in pages gets section eyebrow */
main.main-content h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--atelier-ink);
    letter-spacing: -0.005em;
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
}

/* ---------- Flash banners ---------- */
.flash {
    border-radius: 4px;
    padding: 0.7rem 0.95rem;
    font-size: 0.85rem;
}

.flash.success {
    background: rgba(64, 124, 81, 0.06);
    border: 1px solid rgba(64, 124, 81, 0.20);
    color: rgb(43, 83, 54);
}

.flash.info {
    background: var(--atelier-purple-soft);
    border: 1px solid rgba(74, 46, 255, 0.18);
    color: var(--atelier-purple);
}

.flash.error {
    background: rgba(180, 40, 40, 0.06);
    border: 1px solid rgba(180, 40, 40, 0.20);
    color: rgb(180, 40, 40);
}

/* ---------- Stat cards  borderless top-rule treatment ---------- */
.grid-stats {
    gap: 1rem;
}

.stat-card {
    background: #ffffff;
    border: none;
    border-top: 2px solid var(--atelier-purple);
    border-radius: 0;
    padding: 1.1rem 0.75rem 0.95rem;
    text-align: left;
    position: relative;
    box-shadow: 0 1px 0 var(--atelier-hairline-soft);
}

.stat-card .stat-value {
    font-family: var(--brand-font-body);
    font-size: 2rem;
    font-weight: 500;
    color: var(--atelier-ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 0.35rem;
}

.stat-card .stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--atelier-ink-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---------- Pico article cards ---------- */
article {
    border: 1px solid var(--atelier-hairline);
    border-radius: 6px;
    box-shadow: none;
    background: #ffffff;
}

/* ---------- Tables  refined hairline ---------- */
table {
    font-size: 0.86rem;
    border-collapse: collapse;
}

table th {
    font-size: 0.62rem !important;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--atelier-ink-muted);
    background: transparent !important;
    border-bottom: 1px solid var(--atelier-hairline) !important;
    padding: 0.55rem 0.85rem !important;
    text-align: left;
}

table td {
    border-bottom: 1px solid var(--atelier-hairline-soft) !important;
    padding: 0.7rem 0.85rem !important;
    color: var(--atelier-ink);
}

table tr:last-child td {
    border-bottom: none !important;
}

table a {
    color: var(--atelier-purple);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

table a:hover {
    border-bottom-color: var(--atelier-purple);
}

/* ---------- Inputs  refined flat hairline ---------- */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    border-radius: 4px;
    color: var(--atelier-ink);
    box-shadow: none;
    font-family: var(--brand-font-body);
    font-size: 0.92rem;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--atelier-purple);
    box-shadow: 0 0 0 3px var(--atelier-purple-soft);
    outline: none;
}

label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--atelier-ink-soft);
}

/* ---------- Quick compose floating button  refine ---------- */
main.main-content > div[style*="position: fixed"] button {
    box-shadow: 0 8px 24px rgba(74, 46, 255, 0.28) !important;
    background: var(--atelier-purple) !important;
}

/* ---------- Pico card sidebar inside content (e.g. inbox split) keeps its own
   subtle background to differentiate panes ---------- */

/* ---------- Sidebar wordmark "Workspace" caption: hide when custom branding logo present ---------- */
aside.sidebar h2.sidebar-wordmark:has(img.sidebar-wordmark-logo) span::after {
    display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    aside.sidebar {
        background: #ffffff;
        border-right: none;
    }

    aside.sidebar h2.sidebar-wordmark {
        padding: 1.1rem 1rem;
    }

    aside.sidebar::before {
        display: none;
    }

    main.main-content {
        margin-left: 0;
        max-width: 100%;
        padding-top: 0;
    }

    .appbar {
        padding: 0 1rem 0 3.25rem;
        height: 56px;
    }

    .appbar-date { display: none; }

    main.main-content > :not(.appbar):not(.app-footer):not(.page-body) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main.main-content h1:first-of-type {
        font-size: 1.55rem;
    }

}

/* ---------- Dark mode override (preserve atelier feel but inverted) ---------- */
html[data-theme="dark"] {
    --atelier-cream:        #0c0d12;
    --atelier-cream-edge:   #1a1c25;
    --atelier-ink:          #f1ece0;
    --atelier-ink-soft:     #b9b7b0;
    --atelier-ink-muted:    #7e7d77;
    --atelier-hairline:     rgba(255, 255, 255, 0.10);
    --atelier-hairline-soft:rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] body { background: #07080c; color: var(--atelier-ink); }
html[data-theme="dark"] main.main-content { background: #07080c; }
html[data-theme="dark"] .appbar { background: #07080c; }
html[data-theme="dark"] aside.sidebar { background: var(--atelier-cream); }
html[data-theme="dark"] aside.sidebar > form input[type="text"] {
    background: rgba(255,255,255,0.04);
    color: var(--atelier-ink);
}
html[data-theme="dark"] article,
html[data-theme="dark"] .stat-card { background: rgba(255,255,255,0.02); }
html[data-theme="dark"] table th,
html[data-theme="dark"] table td { color: var(--atelier-ink); }
html[data-theme="dark"] .app-footer { background: var(--atelier-cream); }

/* ============================================================================
   ATELIER  REFINEMENT PASS
   ------------------------------------------------------------------
   Adds the moments that reward attention:  active-nav choreography,
   thin loading bar, ambient watermark, micro-motion, form-button fixes.
   ============================================================================ */

/* ---------- Thin gradient accent at top of every page ---------- */
.appbar {
    background-image:
        linear-gradient(90deg, var(--atelier-purple) 0%, rgba(74,46,255,0.45) 22%, rgba(74,46,255,0) 50%) ;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 0;
}

/* htmx in-flight loading bar  fills the appbar accent strip */
body.htmx-request .appbar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--atelier-purple) 20%,
        var(--atelier-purple) 80%,
        transparent 100%);
    animation: atelier-loading 1.1s linear infinite;
    background-size: 200% 100%;
}
@keyframes atelier-loading {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---------- Form-submit buttons inside flex forms shouldn't go full-width.
   This caps the natural width so they read as actions, not banners. ---------- */
form[style*="display: flex"] button[type="submit"],
form[style*="display:flex"]  button[type="submit"],
.reply-form button[type="submit"],
form > div + button[type="submit"] {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
    padding: 0 1.25rem;
    height: 38px;
}

/* The inbox top "Search" form sits in a flex; we want a fixed-width pill. */
form[action$="/search"] button[type="submit"],
form[action*="search?"] button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 110px !important;
    padding: 0 1.4rem !important;
    height: 38px !important;
}

/* Page-action anchors that look like full-width pills are usually a Pico
   default we want to scope.  Where a page uses <a role="button"> as a header
   action, render it as a sensible inline pill, not a banner. */
.page-action,
a[role="button"].page-action {
    display: inline-flex;
    width: auto;
    min-width: 96px;
    padding: 0 1.25rem;
    height: 38px;
    align-items: center;
    justify-content: center;
}

/* ---------- Active nav choreography  more confident left rule ---------- */
aside.sidebar nav > a,
aside.sidebar details.nav-group .nav-group-items a {
    position: relative;
}

aside.sidebar nav > a::before,
aside.sidebar details.nav-group .nav-group-items a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--atelier-purple);
    transform: translateY(-50%);
    transition: height 0.18s ease;
    pointer-events: none;
}

aside.sidebar nav > a:hover::before,
aside.sidebar details.nav-group .nav-group-items a:hover::before {
    height: 14px;
}

aside.sidebar nav > a.active::before,
aside.sidebar details.nav-group .nav-group-items a.active::before {
    height: 100%;
    background: var(--atelier-purple);
}

/* Replace the static border-left technique  the pseudo wins on cascade */
aside.sidebar nav > a,
aside.sidebar nav > a.active,
aside.sidebar details.nav-group .nav-group-items a,
aside.sidebar details.nav-group .nav-group-items a.active {
    border-left: none;
}

/* ---------- Sidebar photo strip  more confident treatment with brand tint ---------- */
aside.sidebar::before {
    height: 96px;
    background-image:
        linear-gradient(180deg,
            rgba(250, 247, 240, 1) 0%,
            rgba(250, 247, 240, 0) 20%,
            rgba(250, 247, 240, 0) 70%,
            rgba(250, 247, 240, 0.92) 100%),
        linear-gradient(180deg,
            rgba(74, 46, 255, 0.18) 0%,
            rgba(74, 46, 255, 0) 60%),
        url("/app/static/sa-hero-creators.jpg");
    background-size: cover, cover, cover;
    background-position: center 25%, center, center 30%;
}

/* "PARIS" mark on the photo strip, very faint */
aside.sidebar::after {
    content: "PARIS";
    order: 101;
    position: absolute;
    bottom: calc(var(--atelier-footer-h, 56px) + 96px - 22px);
    left: 1.25rem;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}

/* Reposition the photo strip relative to bottom block (it's appended via order:100) */
aside.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

/* ---------- Ambient Ss watermark in the page bottom-right ---------- */
main.main-content {
    position: relative;
}

main.main-content::before {
    content: "";
    position: fixed;
    right: 2.2rem;
    bottom: calc(var(--atelier-footer-h) + 1.5rem);
    width: 140px;
    height: 140px;
    background-image: url("/app/static/sa-monogram.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.045;
    pointer-events: none;
    z-index: 0;
    filter: saturate(1.4);
}

/* Make sure content sits above the watermark */
main.main-content > *,
.appbar,
.app-footer,
.page-body { position: relative; z-index: 1; }

/* The appbar hosts the bell dropdown — it must outrank .page-body (a later
   sibling, also lifted to z-index 1 by the rule above) or the expanded
   dropdown paints behind page content. Also restores position: sticky,
   which the rule above clobbered to `relative` (the frosted-glass
   backdrop-filter treatment depends on content scrolling underneath).
   Needs (0,2,1)+ specificity to beat `main.main-content > *`. */
main.main-content > .appbar { position: sticky; top: 0; z-index: 50; }

/* ---------- Entrance motion  page content fades in subtly ---------- */
@keyframes atelier-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

main.main-content > h1:first-of-type,
.page-body > h1:first-of-type {
    animation: atelier-fade-up 0.45s ease-out both;
}

main.main-content > article,
main.main-content > section,
main.main-content > div,
main.main-content > table,
.page-body > article,
.page-body > section {
    animation: atelier-fade-up 0.5s ease-out 0.06s both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Focus rings throughout  purple offset ---------- */
:focus-visible {
    outline: 2px solid var(--atelier-purple);
    outline-offset: 2px;
    border-radius: 3px;
}

button:focus-visible,
[type="submit"]:focus-visible,
[role="button"]:focus-visible {
    outline-offset: 3px;
}

aside.sidebar nav a:focus-visible,
aside.sidebar details.nav-group .nav-group-items a:focus-visible {
    outline-offset: -2px;
    border-radius: 2px;
}

/* ---------- Section markers  h2 anywhere in main content gets a leading dash ---------- */
main.main-content h2,
.page-body h2 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

main.main-content h2::before,
.page-body h2::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--atelier-purple);
    flex-shrink: 0;
}

/* But the page h1 already has its own treatment; keep h1 styles untouched */
main.main-content h1:first-of-type::before,
.page-body > h1:first-of-type::before {
    width: 28px;
    height: 2px;
    background: var(--atelier-purple);
    margin-bottom: 0.9rem;
}

/* ---------- Stat-card refinement  subtle hover lift ---------- */
.stat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-top-width 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(74, 46, 255, 0.08), 0 1px 0 var(--atelier-hairline);
}

/* Stat label & value subtle entrance */
.stat-card .stat-value,
.stat-card .stat-label {
    transition: color 0.18s ease;
}

/* ---------- Appbar refinements: gap, type, badge dot ---------- */
.appbar-eyebrow {
    color: var(--atelier-purple);
    font-weight: 600;
}

.appbar-eyebrow::after {
    background: var(--atelier-purple);
    opacity: 0.45;
}

.appbar-title {
    font-weight: 500;
    font-size: 0.96rem;
}

/* Account context  shown when available */
.appbar-account {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    height: 30px;
    border: 1px solid var(--atelier-hairline);
    border-radius: 999px;
    font-size: 0.74rem;
    color: var(--atelier-ink);
    background: #ffffff;
}

.appbar-account::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(64, 124, 81); /* live-dot */
    box-shadow: 0 0 0 2px rgba(64, 124, 81, 0.18);
}

.appbar-account .at-handle {
    color: var(--atelier-ink-soft);
    font-weight: 500;
}

/* ---------- Empty-state polish ---------- */
.empty-state {
    padding: 4rem 2rem;
    color: var(--atelier-ink-muted);
}

.empty-state::before {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background: var(--atelier-purple);
    margin: 0 auto 1.5rem;
}

.empty-state h2,
.empty-state h3 {
    color: var(--atelier-ink);
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Conversation-pane empty state inherits this aesthetic */
.conv-pane-empty {
    color: var(--atelier-ink-muted);
}
.conv-pane-empty-inner h3 {
    color: var(--atelier-ink);
    font-family: var(--brand-font-body);
    font-weight: 500;
}

/* ---------- Compose floating button  refine shadow ---------- */
main.main-content > div[style*="position: fixed"] button {
    background: var(--atelier-purple) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 12px 28px rgba(74,46,255,0.30) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

main.main-content > div[style*="position: fixed"] button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 16px 36px rgba(74,46,255,0.36) !important;
}

/* ---------- Pico card sectioning ---------- */
article header {
    border-bottom: 1px solid var(--atelier-hairline);
    padding: 0.9rem 1.1rem;
    background: transparent;
}

article footer {
    border-top: 1px solid var(--atelier-hairline);
    padding: 0.75rem 1.1rem;
    background: var(--atelier-cream);
}

article > :first-child:not(header):not(figure) { padding-top: 0.9rem; }

/* ---------- Badges  align with new palette ---------- */
.badge.active,
.badge-success {
    background: rgba(64, 124, 81, 0.08);
    color: rgb(43, 83, 54);
}

.badge.inactive {
    background: rgba(180, 40, 40, 0.06);
    color: rgb(180, 40, 40);
}

.badge,
.badge-purple,
.badge-info {
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ---------- Links inside content ---------- */
.page-body a,
main.main-content > article a,
main.main-content > section a,
main.main-content > div a {
    color: var(--atelier-purple);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.page-body a:hover {
    border-bottom-color: var(--atelier-purple);
}

/* ---------- Date pill on appbar  refine ---------- */
.appbar-date {
    font-weight: 500;
    color: var(--atelier-ink-soft);
}

/* ---------- Responsive refinements ---------- */
@media (max-width: 1100px) {
    main.main-content::before { display: none; }
}

@media (max-width: 768px) {
    .appbar {
        background-image:
            linear-gradient(90deg, var(--atelier-purple) 0%, rgba(74,46,255,0) 60%);
        background-size: 100% 2px;
    }

    aside.sidebar {
        position: fixed;
    }

    aside.sidebar::before { display: none; }
    aside.sidebar::after { display: none; }

    main.main-content::before { display: none; }

    .appbar-account { display: none; }
}

/* ---------- Appbar Sign Out  visible, refined pill ---------- */
.appbar-signout {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.9rem;
    height: 32px;
    border: 1px solid var(--atelier-hairline);
    border-radius: 999px;
    color: var(--atelier-ink);
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.appbar-signout svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.appbar-signout:hover {
    background: var(--atelier-ink);
    color: #ffffff;
    border-color: var(--atelier-ink);
}

.appbar-signout:focus-visible {
    outline: 2px solid var(--atelier-purple);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .appbar-signout {
        padding: 0 0.6rem;
        gap: 0;
    }
    .appbar-signout span { display: none; }
}

/* ---------- Accordion CTA summary  detach from full-width default ---------- */
main.main-content details > summary[role="button"],
main.main-content details > summary.outline {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    padding: 0 1.4rem !important;
    height: 38px;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--atelier-purple);
    border: 1px solid var(--atelier-purple);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
}

main.main-content details > summary[role="button"]:hover,
main.main-content details > summary.outline:hover {
    background: var(--atelier-purple);
    color: #ffffff;
}

/* Pico injects a chevron via ::after; replace it with a small + icon for "expand to reveal form" */
main.main-content details > summary[role="button"]::after,
main.main-content details > summary.outline::after {
    content: "+";
    width: auto;
    height: auto;
    margin: 0 0 0 0.35rem;
    background-image: none;
    transform: none;
    transition: transform 0.18s ease;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1;
}

main.main-content details[open] > summary[role="button"]::after,
main.main-content details[open] > summary.outline::after {
    transform: rotate(45deg);
}

/* When open, soften the summary so the revealed form gets the attention */
main.main-content details[open] > summary[role="button"],
main.main-content details[open] > summary.outline {
    margin-bottom: 0.85rem;
}

/* Sidebar bottom Logout link  hide (we already expose Sign out in the appbar) */

/* ---------- Inbox top-filter row (filter chips + active marker) cleanup ---------- */
/* Strip any stray separator dots between the inbox form and the filter chips */
.inbox-list,
form[action$="/search"] + * { /* no-op  scoped reset placeholder */ }

/* ---------- Subtle column rule between sidebar and content ---------- */
aside.sidebar {
    box-shadow: 1px 0 0 var(--atelier-hairline-soft);
    border-right-color: var(--atelier-cream-edge);
}

/* ============================================================================
   ATELIER  CONVERSATION / MODAL / CHART REFINEMENT
   ============================================================================ */

/* ---------- Conversation page ---------- */

/* Don't apply the page-h1 editorial treatment when the h1 sits inside conv-header  */
main.main-content .conv-header h1,
main.main-content .conv-header h1:first-of-type {
    padding: 0;
    border: none;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--atelier-ink);
    animation: none;
}

main.main-content .conv-header h1::before,
main.main-content .conv-header h1:first-of-type::before {
    display: none;
}

/* Header block */
.conv-header {
    padding: 1.25rem 0 1.1rem;
    border-bottom: 1px solid var(--atelier-hairline);
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.conv-header-left {
    gap: 0.85rem;
}

.conv-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--atelier-purple);
    border: 1px solid var(--atelier-purple);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.conv-back {
    color: var(--atelier-ink-muted);
    font-size: 1.2rem;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
}

.conv-back:hover {
    color: var(--atelier-purple);
    background: var(--atelier-purple-soft);
}

.conv-header-actions {
    gap: 0.4rem;
}

/* Handoff banner: amber but quiet */
.conv-handoff-banner {
    background: rgba(210, 160, 60, 0.06);
    border: 1px solid rgba(210, 160, 60, 0.22);
    border-radius: 4px;
    color: rgb(138, 106, 20);
    padding: 0.7rem 1rem;
}

.conv-handoff-banner strong {
    color: rgb(138, 106, 20);
    margin-right: 0.4rem;
}

/* Quick-actions bar */
.conv-actions-bar {
    border-bottom: 1px solid var(--atelier-hairline);
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 1rem;
    gap: 0.4rem;
}

.conv-actions-bar button,
.conv-actions-bar [type="submit"],
.conv-actions-bar [role="button"] {
    height: 30px !important;
    padding: 0 0.85rem !important;
    font-size: 0.74rem !important;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

/* "Take Over" warning-tint button rather than amber-flood */
.conv-actions-bar button[style*="brand-warning"],
.conv-actions-bar button[type="submit"][style*="warning"] {
    background: rgba(210, 160, 60, 0.10) !important;
    color: rgb(138, 106, 20) !important;
    border: 1px solid rgba(210, 160, 60, 0.45) !important;
}

.conv-actions-bar button[style*="brand-warning"]:hover,
.conv-actions-bar button[type="submit"][style*="warning"]:hover {
    background: rgb(138, 106, 20) !important;
    color: #ffffff !important;
}

/* Resume bot green */
.conv-handoff-banner button {
    background: rgba(64, 124, 81, 0.10) !important;
    color: rgb(43, 83, 54) !important;
    border: 1px solid rgba(64, 124, 81, 0.40) !important;
}

.conv-handoff-banner button:hover {
    background: rgb(43, 83, 54) !important;
    color: #ffffff !important;
}

/* Thread container */
.thread-container {
    border: 1px solid var(--atelier-hairline);
    border-radius: 6px;
    background: #fafafa;
    padding: 1rem 1.25rem;
    max-height: 60vh;
}

/* Date divider  more editorial */
.conv-date-divider {
    margin: 1.25rem 0 0.75rem;
    position: relative;
    text-align: center;
}

.conv-date-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--atelier-hairline);
    z-index: 0;
}

.conv-date-divider span {
    background: #fafafa;
    color: var(--atelier-ink-muted);
    font-family: var(--brand-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.15rem 0.85rem;
    position: relative;
    z-index: 1;
    border-radius: 0;
}

/* Message bubbles  refined */
.message {
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    max-width: 72%;
    line-height: 1.45;
    font-size: 0.92rem;
    margin: 0.4rem 0;
}

.message.in {
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    color: var(--atelier-ink);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.message.out {
    background: var(--atelier-purple);
    color: #ffffff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
    border: 1px solid var(--atelier-purple);
}

.message.out p { color: #ffffff; }

.message-meta {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    color: var(--atelier-ink-muted);
    letter-spacing: 0.04em;
}

.message.out .message-meta {
    color: rgba(255, 255, 255, 0.72);
}

.message-status {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
}

/* Reply form */
.reply-form {
    margin-top: 1rem;
    gap: 0.55rem;
}

.reply-form > div[style*="display: flex"] {
    gap: 0.55rem !important;
    align-items: center;
}

.reply-form input[type="text"] {
    height: 42px;
    padding: 0 1rem !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--atelier-hairline) !important;
    background: #ffffff !important;
}

.reply-form input[type="text"]:focus {
    border-color: var(--atelier-purple) !important;
    box-shadow: 0 0 0 3px var(--atelier-purple-soft) !important;
}

.reply-form select {
    height: 42px !important;
    border-radius: 999px !important;
    padding: 0 0.85rem !important;
    font-size: 0.78rem !important;
    background: #ffffff !important;
    border: 1px solid var(--atelier-hairline) !important;
    margin: 0 !important;
}

.reply-form button[type="submit"] {
    height: 42px !important;
    min-width: 88px;
    padding: 0 1.4rem !important;
    font-size: 0.82rem !important;
}

/* ============================================================================
   MODALS  Shortcut, Compose, generic
   ============================================================================ */

.shortcut-modal-overlay {
    background: rgba(20, 22, 28, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.shortcut-modal {
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 24px 60px rgba(20, 22, 28, 0.20);
}

.shortcut-modal-header {
    border-bottom: 1px solid var(--atelier-hairline);
    padding: 1.1rem 1.4rem 0.95rem;
}

.shortcut-modal-header h3 {
    font-family: var(--brand-font-body);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--atelier-ink);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.shortcut-modal-header h3::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--atelier-purple);
}

.shortcut-modal-close {
    color: var(--atelier-ink-muted);
    border-radius: 999px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shortcut-modal-close:hover {
    color: var(--atelier-purple);
    background: var(--atelier-purple-soft);
}

.shortcut-modal-body {
    padding: 0.9rem 1.4rem 1.1rem;
}

.shortcut-group h4 {
    font-family: var(--brand-font-body);
    font-weight: 600;
    color: var(--atelier-purple);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--atelier-hairline);
    padding-bottom: 0.4rem;
}

.shortcut-row {
    padding: 0.3rem 0;
    font-size: 0.82rem;
}

.shortcut-row kbd {
    background: var(--atelier-cream) !important;
    border: 1px solid var(--atelier-hairline) !important;
    color: var(--atelier-ink) !important;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    font-family: 'SF Mono', 'Menlo', Monaco, monospace;
    font-weight: 600;
}

.shortcut-modal-footer {
    border-top: 1px solid var(--atelier-hairline);
    padding: 0.7rem 1.4rem;
    color: var(--atelier-ink-muted);
    font-size: 0.72rem;
}

.shortcut-modal-footer kbd {
    background: var(--atelier-cream) !important;
    border: 1px solid var(--atelier-hairline) !important;
}

/* ---------- Notification dropdown  refined ---------- */
.notif-dropdown {
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 20px 48px rgba(20, 22, 28, 0.16);
    /* NOT `overflow: hidden` — the shorthand kills the base rule's
       overflow-y: auto and makes the list unscrollable (wheel/touch fall
       through and scroll the page). overflow-x: hidden still clips
       children against the rounded corners. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.notif-item {
    border-bottom: 1px solid var(--atelier-hairline-soft);
    transition: background 0.12s ease;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
}

.notif-item:hover {
    background: var(--atelier-purple-soft);
}

.notif-item:last-child {
    border-bottom: none;
}

/* ---------- Notif badge in appbar (still purple, but cleaner) ---------- */
.appbar .notif-badge {
    background: var(--atelier-purple);
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

/* ---------- Generic overlay/modal patterns used elsewhere (compose modal etc.) ---------- */
[id$="Modal"][style*="display: block"],
[id$="modal"][style*="display: block"] {
    background: rgba(20, 22, 28, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============================================================================
   CHART.JS  global brand palette
   ------------------------------------------------------------------
   Set in base.html via Chart.defaults; this CSS just ensures the
   chart canvases sit nicely in the cream layout.
   ============================================================================ */

canvas[id$="Chart"],
canvas.chart,
.chart-container canvas {
    background: transparent;
    max-width: 100%;
}

/* Chart cards & wrappers (existing patterns) */
.chart-container,
.chart-wrap,
.chart-card {
    background: #ffffff;
    border: 1px solid var(--atelier-hairline);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

/* ---------- Animation overrides: don't animate fixed/sticky elements ---------- */
.appbar, .app-footer,
.shortcut-modal-overlay, .notif-bell-container,
main.main-content > div[style*="position: fixed"] { animation: none !important; }

/* ============================================================================
   ATELIER  MOBILE + DARK-MODE POLISH
   ============================================================================ */

/* ---------- Mobile menu toggle  refine to match brand ---------- */
.mobile-menu-toggle {
    background: #ffffff !important;
    border: 1px solid var(--atelier-hairline) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    width: 38px;
    height: 34px;
    padding: 0.55rem 0.45rem !important;
}

.mobile-menu-toggle span {
    background: var(--atelier-ink) !important;
    width: 18px !important;
}

/* ---------- Mobile  hide/slide sidebar properly ---------- */
@media (max-width: 768px) {
    aside.sidebar {
        position: fixed !important;
        top: 0;
        left: -260px !important;
        bottom: 0;
        width: 250px !important;
        z-index: 999;
        transition: left 0.25s ease;
        background: var(--atelier-cream) !important;
        border-right: 1px solid var(--atelier-cream-edge);
        box-shadow: 4px 0 14px rgba(0,0,0,0.04);
    }

    body.sidebar-open aside.sidebar {
        left: 0 !important;
    }

    body.sidebar-open .sidebar-overlay {
        display: block !important;
        background: rgba(20, 22, 28, 0.45);
        backdrop-filter: blur(2px);
        z-index: 998;
    }

    main.main-content {
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .appbar {
        padding: 0 0.85rem 0 3.5rem;
    }

    .appbar-left {
        gap: 0.4rem;
    }

    .appbar-eyebrow { display: none; }

    .appbar-right {
        gap: 0.3rem;
    }

    .appbar-date,
    .appbar-account { display: none; }

    .appbar-signout {
        padding: 0 0.5rem;
        width: 32px;
        gap: 0;
    }

    .appbar-signout span { display: none; }

    .appbar .notif-bell-link {
        width: 32px;
        height: 32px;
    }

    main.main-content > :not(.appbar):not(.app-footer):not(.page-body):not(script):not(style) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ---------- Bottom tabs (PWA mobile)  restyle to atelier ---------- */
nav.bottom-tabs {
    background: #ffffff;
    border-top: 1px solid var(--atelier-hairline);
    padding: 0.35rem 0 calc(env(safe-area-inset-bottom) + 0.35rem);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}

nav.bottom-tabs .bottom-tab {
    color: var(--atelier-ink-muted) !important;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0;
    transition: color 0.15s ease;
}

nav.bottom-tabs .bottom-tab .bottom-tab-icon {
    color: var(--atelier-ink-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

nav.bottom-tabs .bottom-tab.active,
nav.bottom-tabs .bottom-tab:hover {
    color: var(--atelier-purple) !important;
}

nav.bottom-tabs .bottom-tab.active .bottom-tab-icon,
nav.bottom-tabs .bottom-tab:hover .bottom-tab-icon {
    color: var(--atelier-purple);
    transform: translateY(-1px);
}

nav.bottom-tabs .bottom-tab.active {
    position: relative;
}

nav.bottom-tabs .bottom-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24%;
    right: 24%;
    height: 2px;
    background: var(--atelier-purple);
}

/* ============================================================================
   DARK MODE  refine content-side cards & contrast
   ============================================================================ */

html[data-theme="dark"] {
    --atelier-cream:        #0d0e14;
    --atelier-cream-edge:   #161824;
    --atelier-ink:          #ece8da;
    --atelier-ink-soft:     #b9b6ad;
    --atelier-ink-muted:    #7d7c75;
    --atelier-hairline:     rgba(255, 255, 255, 0.10);
    --atelier-hairline-soft:rgba(255, 255, 255, 0.05);
    --atelier-purple-soft:  rgba(74, 46, 255, 0.16);
}

html[data-theme="dark"] body,
html[data-theme="dark"] main.main-content {
    background: #06070b;
    color: var(--atelier-ink);
}

html[data-theme="dark"] .appbar {
    background: #06070b;
    border-bottom-color: var(--atelier-hairline);
}

html[data-theme="dark"] .appbar-account,
html[data-theme="dark"] .appbar-signout,
html[data-theme="dark"] .appbar .notif-bell-link {
    background: rgba(255,255,255,0.04);
    border-color: var(--atelier-hairline);
    color: var(--atelier-ink);
}

html[data-theme="dark"] .appbar-signout svg {
    stroke: var(--atelier-ink);
}

html[data-theme="dark"] .appbar-signout:hover {
    background: var(--atelier-ink);
    color: #06070b;
    border-color: var(--atelier-ink);
}

html[data-theme="dark"] .appbar-signout:hover svg { stroke: #06070b; }

html[data-theme="dark"] aside.sidebar {
    background: var(--atelier-cream);
    border-right-color: var(--atelier-cream-edge);
    box-shadow: 1px 0 0 var(--atelier-hairline-soft);
}

html[data-theme="dark"] aside.sidebar h2.sidebar-wordmark {
    color: var(--atelier-ink);
    border-bottom-color: var(--atelier-hairline);
}

html[data-theme="dark"] aside.sidebar nav > a,
html[data-theme="dark"] aside.sidebar details.nav-group .nav-group-items a {
    color: var(--atelier-ink-soft);
}

html[data-theme="dark"] aside.sidebar nav > a.active,
html[data-theme="dark"] aside.sidebar details.nav-group .nav-group-items a.active {
    color: var(--atelier-purple);
}

html[data-theme="dark"] aside.sidebar > form input[type="text"] {
    background: rgba(255,255,255,0.04);
    color: var(--atelier-ink);
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] 
html[data-theme="dark"] 
/* Content cards / panels in dark */
html[data-theme="dark"] article,
html[data-theme="dark"] .stat-card {
    background: rgba(255,255,255,0.025);
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] .stat-card {
    box-shadow: 0 1px 0 var(--atelier-hairline-soft);
}

html[data-theme="dark"] .stat-card .stat-value { color: var(--atelier-ink); }
html[data-theme="dark"] .stat-card .stat-label { color: var(--atelier-ink-muted); }

html[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 8px 24px rgba(74, 46, 255, 0.14), 0 1px 0 var(--atelier-hairline);
}

/* Tables in dark */
html[data-theme="dark"] table td {
    color: var(--atelier-ink);
    border-bottom-color: var(--atelier-hairline-soft) !important;
}

html[data-theme="dark"] table th {
    color: var(--atelier-ink-muted);
    border-bottom-color: var(--atelier-hairline) !important;
}

html[data-theme="dark"] table a {
    color: rgb(160, 145, 255);
}

/* Inputs in dark */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: rgba(255,255,255,0.04) !important;
    color: var(--atelier-ink) !important;
    border-color: var(--atelier-hairline) !important;
}

/* Conversation in dark */
html[data-theme="dark"] .thread-container {
    background: rgba(255,255,255,0.025);
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] .message.in {
    background: rgba(255,255,255,0.04);
    border-color: var(--atelier-hairline);
    color: var(--atelier-ink);
}

html[data-theme="dark"] .message.in p { color: var(--atelier-ink); }

html[data-theme="dark"] .conv-date-divider span {
    background: rgba(13, 14, 20, 1);
    color: var(--atelier-ink-muted);
}

html[data-theme="dark"] .conv-header-avatar {
    background: rgba(74, 46, 255, 0.12);
    color: rgb(160, 145, 255);
    border-color: rgba(74, 46, 255, 0.45);
}

html[data-theme="dark"] .conv-header,
html[data-theme="dark"] .conv-actions-bar {
    border-bottom-color: var(--atelier-hairline);
}

/* Quick actions block in overview (each card)  dark */
html[data-theme="dark"] main.main-content article header,
html[data-theme="dark"] main.main-content article footer {
    background: transparent;
    border-color: var(--atelier-hairline);
}

/* App footer in dark */
html[data-theme="dark"] .app-footer {
    background: var(--atelier-cream);
    border-top-color: var(--atelier-hairline);
    color: var(--atelier-ink-muted);
}

/* Flash banners in dark */
html[data-theme="dark"] .flash.success {
    background: rgba(64, 124, 81, 0.12);
    color: rgb(160, 220, 178);
    border-color: rgba(64, 124, 81, 0.32);
}

html[data-theme="dark"] .flash.info {
    background: rgba(74, 46, 255, 0.14);
    color: rgb(180, 170, 255);
    border-color: rgba(74, 46, 255, 0.34);
}

html[data-theme="dark"] .flash.error {
    background: rgba(220, 80, 80, 0.10);
    color: rgb(240, 160, 160);
    border-color: rgba(220, 80, 80, 0.32);
}

/* Empty-state in dark */
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .empty-state h3 {
    color: var(--atelier-ink);
}

/* Modals in dark */
html[data-theme="dark"] .shortcut-modal {
    background: #0d0e14;
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] .shortcut-modal-header,
html[data-theme="dark"] .shortcut-modal-footer {
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] .shortcut-modal-header h3 {
    color: var(--atelier-ink);
}

html[data-theme="dark"] .shortcut-row kbd,
html[data-theme="dark"] .shortcut-modal-footer kbd {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--atelier-hairline) !important;
    color: var(--atelier-ink) !important;
}

html[data-theme="dark"] .notif-dropdown {
    background: #0d0e14;
    border-color: var(--atelier-hairline);
}

html[data-theme="dark"] .notif-item:hover {
    background: rgba(74, 46, 255, 0.12);
}

/* Bottom tabs in dark */
html[data-theme="dark"] nav.bottom-tabs {
    background: #0d0e14;
    border-top-color: var(--atelier-hairline);
}

/* Mobile menu toggle in dark */
html[data-theme="dark"] .mobile-menu-toggle {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--atelier-hairline) !important;
}

html[data-theme="dark"] .mobile-menu-toggle span {
    background: var(--atelier-ink) !important;
}

/* Ambient watermark in dark  even more subtle */
html[data-theme="dark"] main.main-content::before {
    opacity: 0.035;
    filter: invert(0) saturate(2);
}

/* ======================================================
   Dark Mode Audit Pass (2026-05-23)
   Covers: alert boxes, approval cards, action buttons,
   calendar type badges, persona badges, import badges,
   funnel visualization, rejected badges
   ====================================================== */

/* --- Alert / warning box (used in x_home, etc.) --- */
.alert-box {
    border-left: 4px solid var(--brand-danger);
    background: rgba(180, 40, 40, 0.06);
    padding: 1rem;
    border-radius: 0.25rem;
}
html[data-theme="dark"] .alert-box {
    background: rgba(180, 40, 40, 0.12);
}

/* --- Rejected badge (inline pattern used in approval pages) --- */
.badge-danger {
    background: rgba(180, 40, 40, 0.1);
    color: rgb(180, 40, 40);
}
html[data-theme="dark"] .badge-danger {
    background: rgba(220, 80, 80, 0.18);
    color: #e65555;
}

/* --- Approval action cards --- */
.approval-action-card {
    border-radius: 8px;
    padding: 1rem;
}
.approval-action-card.approve {
    border: 1px solid var(--brand-green);
    background: rgba(64, 124, 81, 0.04);
}
.approval-action-card.changes {
    border: 1px solid rgb(210, 160, 60);
    background: rgba(210, 160, 60, 0.04);
}
.approval-action-card.reject {
    border: 1px solid rgb(180, 40, 40);
    background: rgba(180, 40, 40, 0.04);
}
.approval-action-card.resubmit {
    border: 1px solid var(--brand-purple);
    background: rgba(74, 46, 255, 0.04);
}

html[data-theme="dark"] .approval-action-card.approve {
    background: rgba(64, 124, 81, 0.1);
    border-color: rgba(64, 124, 81, 0.4);
}
html[data-theme="dark"] .approval-action-card.changes {
    background: rgba(210, 160, 60, 0.08);
    border-color: rgba(210, 160, 60, 0.35);
}
html[data-theme="dark"] .approval-action-card.reject {
    background: rgba(180, 40, 40, 0.08);
    border-color: rgba(180, 40, 40, 0.35);
}
html[data-theme="dark"] .approval-action-card.resubmit {
    background: rgba(74, 46, 255, 0.08);
    border-color: rgba(74, 46, 255, 0.35);
}

/* --- Approval action buttons (semantic colors) --- */
.btn-approve {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.btn-changes {
    background: rgb(210, 160, 60);
    color: #fff;
    border-color: rgb(210, 160, 60);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.btn-reject {
    background: rgb(180, 40, 40);
    color: #fff;
    border-color: rgb(180, 40, 40);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.btn-resubmit {
    background: var(--brand-purple);
    color: #fff;
    border-color: var(--brand-purple);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

/* --- Approval card (pending queue) dark mode --- */
html[data-theme="dark"] .approval-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: rgb(210, 160, 60);
}

/* --- Approval timeline dots --- */
html[data-theme="dark"] .dot-red { background: #e65555; }
html[data-theme="dark"] .dot-warning { background: #d2a03c; }

/* --- Stat value semantic colors (dark mode safe) --- */
.stat-value-warning { color: rgb(210, 160, 60); }
.stat-value-danger { color: rgb(180, 40, 40); }
html[data-theme="dark"] .stat-value-warning { color: #d2a03c; }
html[data-theme="dark"] .stat-value-danger { color: #e65555; }

/* --- AI Calendar type badges (dark mode) --- */
html[data-theme="dark"] .badge-reel {
    background: rgba(220, 80, 80, 0.15);
    color: #e65555;
}
html[data-theme="dark"] .badge-carousel {
    background: rgba(90, 154, 255, 0.15);
    color: #5a9aff;
}
html[data-theme="dark"] .badge-photo {
    background: rgba(74, 46, 255, 0.18);
    color: #b484ff;
}

/* --- AI Calendar action buttons (dark mode) --- */
html[data-theme="dark"] .ai-cal-btn-skip {
    background: rgba(220, 80, 80, 0.12);
    color: #e65555;
}
html[data-theme="dark"] .ai-cal-btn-skip:hover {
    background: #e65555;
    color: #fff;
}
html[data-theme="dark"] .ai-cal-btn-accept {
    background: rgba(64, 124, 81, 0.15);
}
html[data-theme="dark"] .ai-cal-btn-regen {
    background: rgba(74, 46, 255, 0.12);
}

/* --- Auto/Manual badges (import, general) --- */
.badge-auto {
    background: rgba(64, 124, 81, 0.1);
    color: var(--brand-green);
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.badge-manual {
    background: rgba(243, 167, 143, 0.15);
    color: var(--brand-earth-dark);
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
html[data-theme="dark"] .badge-auto {
    background: rgba(64, 124, 81, 0.18);
    color: #6dbb84;
}
html[data-theme="dark"] .badge-manual {
    background: rgba(243, 167, 143, 0.2);
    color: #f3a78f;
}

/* --- Funnel visualization (campaign ROI detail) --- */
html[data-theme="dark"] .funnel-step {
    background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .funnel-arrow {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Approval labels (dark mode safe) --- */
.label-approve { font-size: 0.85rem; font-weight: 600; color: var(--brand-green); }
.label-changes { font-size: 0.85rem; font-weight: 600; color: rgb(210, 160, 60); }
.label-reject { font-size: 0.85rem; font-weight: 600; color: rgb(180, 40, 40); }

html[data-theme="dark"] .label-changes { color: #d2a03c; }
html[data-theme="dark"] .label-reject { color: #e65555; }

/* --- E-commerce order timeline event badges (dark mode) --- */
html[data-theme="dark"] .timeline-event-refund {
    background: rgba(220, 80, 80, 0.15) !important;
    color: #e65555 !important;
}
html[data-theme="dark"] .timeline-event-click {
    color: #f3a78f !important;
}

/* --- Contact import warning box --- */
html[data-theme="dark"] .import-warning {
    background: rgba(180, 40, 40, 0.12);
}

/* --- Account Health progress bars & scores --- */
.health-bar-track {
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.health-score { font-size: 1.3rem; }
.health-good { color: #10b981; }
.health-warn { color: #f59e0b; }
.health-bad { color: #ef4444; }
.health-bar-good { background: #10b981; border-radius: 4px; }
.health-bar-warn { background: #f59e0b; border-radius: 4px; }
.health-bar-bad { background: #ef4444; border-radius: 4px; }

html[data-theme="dark"] .health-bar-track {
    background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .health-good { color: #34d399; }
html[data-theme="dark"] .health-warn { color: #fbbf24; }
html[data-theme="dark"] .health-bad { color: #f87171; }
html[data-theme="dark"] .health-bar-good { background: #34d399; }
html[data-theme="dark"] .health-bar-warn { background: #fbbf24; }
html[data-theme="dark"] .health-bar-bad { background: #f87171; }

/* --- Bio manage page --- */
html[data-theme="dark"] .bio-preview-frame {
    background: rgba(255, 255, 255, 0.03);
}

/* ============================================================================
   MOBILE RESPONSIVENESS AUDIT (2026-05-29)
   Comprehensive fixes for all templates on phones/tablets
   ============================================================================ */

/* ---------- 768px: Tablet + Phone ---------- */
@media (max-width: 768px) {

    /* ---- Inbox split-pane: show "Back" label, hide X ---- */
    .conv-back-icon { display: none; }
    .conv-back-label { display: inline; }

    .conv-back.conv-pane-close {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.82rem;
        font-weight: 500;
        padding: 0.3rem 0.65rem;
        border: 1px solid var(--atelier-hairline, rgba(0,0,0,0.1));
        border-radius: 6px;
        background: var(--atelier-purple-soft, rgba(74, 46, 255,0.06));
        color: var(--atelier-purple, var(--brand-purple));
    }

    .inbox-split-conv {
        max-height: none;
        height: auto;
    }

    .inbox-split.has-conv .split-thread {
        max-height: 60vh;
    }

    .inbox-split.has-conv .conv-header-actions {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .inbox-split.has-conv .conv-header-actions .btn-sm {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    /* ---- Conversation quick-action tags inline ---- */
    .conv-actions-bar {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    .conv-actions-bar form,
    .conv-actions-bar .btn-sm {
        flex-shrink: 0;
    }

    /* ---- Search + filter bars: always wrap ---- */
    form[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

    /* ---- Stat cards: tighter on phone ---- */
    .stat-card .stat-label {
        font-size: 0.65rem;
    }

    /* ---- Charts: ensure they stay within viewport ---- */
    article:has(canvas) {
        overflow-x: auto;
    }

    canvas {
        max-width: 100%;
        height: auto !important;
        min-height: 180px;
    }

    /* ---- Heatmaps & wide data grids: horizontal scroll ---- */
    .heatmap-container,
    [style*="grid-template-columns: repeat(24"],
    [style*="grid-template-columns: repeat(7, "] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Notification dropdown: full width on phone ---- */
    .notif-dropdown {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: 3rem !important;
        width: auto !important;
        max-height: 60vh;
    }

    /* ---- Filter pill rows ---- */
    [style*="display: flex"][style*="gap: 0.25rem"] {
        flex-wrap: wrap !important;
    }

    /* ---- Autopilot form: was 4-col, .grid rule handles it ---- */
    /* ---- Campaign ROI detail flex stats ---- */
    [style*="flex: 1"][style*="min-width: 100px"] {
        min-width: 80px !important;
    }

    /* ---- Inline fixed-column grids: collapse on mobile ---- */
    [style*="grid-template-columns: 1fr 1fr"]:not(.grid):not(.grid-stats),
    [style*="grid-template-columns: repeat(3, 1fr)"]:not(.grid):not(.grid-stats) {
        grid-template-columns: 1fr !important;
    }

    /* ---- Workflow builder step cards ---- */
    .wf-step-card {
        padding: 0.75rem !important;
    }

    /* ---- Bio manage: stack preview + editor ---- */
    .bio-editor-layout {
        grid-template-columns: 1fr !important;
    }

    /* ---- Content series detail: stack ---- */
    .content-series-layout {
        grid-template-columns: 1fr !important;
    }

    /* ---- E-commerce product filter bar fixed widths ---- */
    input[style*="width: 200px"],
    input[style*="width: 180px"],
    select[style*="width: 180px"],
    select[style*="width: 120px"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ---- Details/summary CTA pills ---- */
    details > summary[role="button"] {
        font-size: 0.78rem !important;
        padding: 0 1rem !important;
        height: 34px !important;
    }

    /* ---- Keyboard shortcuts modal ---- */
    .shortcuts-modal-content {
        width: 95vw !important;
        max-height: 80vh;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Funnel labels ---- */
    [style*="width: 120px"][style*="text-align: right"] {
        width: 80px !important;
        font-size: 0.7rem !important;
    }

    /* ---- Command palette ---- */
    .cmd-overlay .cmd-dialog {
        width: 95vw !important;
        max-width: none !important;
    }

    /* ---- Page header flex (title + button) ---- */
    main.main-content > div:first-child[style*="display: flex"][style*="space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* ---- Overview highlight cards ---- */
    .overview-highlights {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }

    /* ---- Daily digest action items bar ---- */
    .action-items-bar {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* ---- Quick actions footer rows ---- */
    .quick-actions {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .quick-actions a[role="button"] {
        font-size: 0.78rem;
        padding: 0.3rem 0.6rem;
        flex: 1 1 auto;
        text-align: center;
    }

    /* ---- Competitor comparison side-by-side ---- */
    .compare-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Wide article cards: let text wrap ---- */
    article header,
    article footer {
        white-space: normal !important;
    }

    /* ---- CRM kanban: horizontal scroll ---- */
    .kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap !important;
    }

    .kanban-board .kanban-column {
        min-width: 240px;
        flex-shrink: 0;
    }
}

/* ---------- 480px: Small phones ---------- */
@media (max-width: 480px) {

    /* ---- Stat cards: 2-col with even smaller text ---- */
    .stat-card .stat-value {
        font-size: 1rem;
    }

    .stat-card .stat-label {
        font-size: 0.6rem;
    }

    .stat-card {
        padding: 0.4rem;
    }

    /* ---- Inbox: tighter items ---- */
    .inbox-item {
        padding: 0.5rem 0.6rem;
    }

    .inbox-item-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    /* ---- Page titles ---- */
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }
    h3 { font-size: 0.95rem; }

    /* ---- Badges ---- */
    .badge {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.35rem !important;
    }

    /* ---- Main content padding ---- */
    main.main-content {
        padding: 0.5rem !important;
        padding-top: 3.5rem !important;
    }

    /* ---- Autopilot H1 subtitle ---- */
    main.main-content > div > p > small {
        font-size: 0.72rem;
    }

    /* ---- Chart minimum height ---- */
    canvas {
        min-height: 150px;
    }

    /* ---- Form inputs ---- */
    input, select, textarea {
        font-size: 0.85rem !important;
    }

    /* ---- Conversation messages: wider ---- */
    .message {
        max-width: 95% !important;
    }

    /* ---- Overview highlights: single col ---- */
    .overview-highlights {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   Loading states — skeleton shimmer + working buttons (2026-07-17)
   ================================================================ */

/* Skeleton shimmer blocks: drop <div class="skeleton skeleton-line"></div>
   (or -title / -block / -chip) into any htmx-indicator or placeholder. */
.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(28, 10, 61, 0.07);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        rgba(74, 46, 255, 0.09),
        transparent);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}
.skeleton-line  { height: 0.85rem; margin: 0.45rem 0; }
.skeleton-line.short { width: 55%; }
.skeleton-title { height: 1.15rem; width: 40%; margin: 0.5rem 0 0.75rem; }
.skeleton-block { height: 5rem; margin: 0.5rem 0; }
.skeleton-chip  { display: inline-block; height: 1.35rem; width: 5.5rem;
                  margin: 0.15rem 0.25rem 0.15rem 0; border-radius: 0.5rem; }

/* Skeleton groups used as HTMX indicators are block-level.
   htmx adds .htmx-request to the hx-indicator element ITSELF (self selector);
   the descendant form covers indicators nested inside a requesting element. */
.htmx-request.htmx-indicator.skeleton-group,
.htmx-request .htmx-indicator.skeleton-group { display: block; }
.skeleton-group { display: none; }

html[data-theme="dark"] .skeleton {
    background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .skeleton::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent);
}

/* Working buttons: JS sets aria-busy on the trigger while a request is
   in flight (Pico renders its spinner); this locks interaction + dims. */
button[aria-busy="true"],
[type="submit"][aria-busy="true"],
[role="button"][aria-busy="true"] {
    pointer-events: none;
    opacity: 0.75;
}

/* ============================================================================
   ATELIER V2 — 2026-07-24 — streamlined workspace pass
   Scope: sidebar as a calm editorial object (no photo strip), Workspace/Library
   nav sections, top client-account switcher, entrance stagger, micro-motion,
   Comments page (cmt-*). Tokens only — dark mode adapts via the var overrides.
   ============================================================================ */

/* ---------- Sidebar: retire the photo strip + PARIS mark. The sidebar is now
   pure typography on cream — the brand object is the nav itself. ---------- */
aside.sidebar::before { display: none; }
aside.sidebar::after  { display: none; }

/* ---------- Nav section labels — tracked-uppercase micro headings ---------- */
aside.sidebar nav .nav-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0.4rem 0 0.15rem;
    padding: 0.35rem 1.25rem 0.2rem;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--atelier-ink-muted);
    user-select: none;
}

aside.sidebar nav .nav-label-library {
    margin-top: 1.1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--atelier-hairline-soft);
}

aside.sidebar nav .nav-label .nav-toggle-all {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--atelier-ink-muted);
    text-decoration: none;
}

aside.sidebar nav .nav-label .nav-toggle-all:hover { color: var(--atelier-purple); }

/* Workspace flat links: the daily surfaces read a touch stronger */
aside.sidebar nav > a {
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---------- Client-account switcher — first item inside Workspace ----------
   The workspace (Inbox, Comments, Calendar, ...) is scoped to ONE client
   account; the switcher leads it. Styled to match the workspace nav rows
   exactly — same icon+label geometry, flat (no boxed control), so it reads
   as part of the section rather than a stray form field. */
aside.sidebar .account-selector-workspace {
    display: flex;
    align-items: center;
    /* Nav rows compute border-left:0 (active rail is a ::before pseudo), so NO
       real border here or the whole row sits 2px right of its siblings. Gap is
       0.5rem (vs the rows' 0.6rem) to offset the single-user 'account' glyph,
       which sits ~2px narrower on its right than the other nav icons — this
       makes the icon->text gap read equal to Inbox/Comments/etc. */
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.6rem 0.4rem 0.85rem;
    border: none;
}

aside.sidebar .account-selector-workspace .nav-icon {
    flex: none;
    color: var(--atelier-ink-muted);
    opacity: 0.75;
    transition: color 0.15s ease, opacity 0.15s ease;
}

aside.sidebar .account-selector-workspace:hover .nav-icon {
    color: var(--atelier-purple);
    opacity: 1;
}

aside.sidebar .account-selector-workspace select,
aside.sidebar .account-selector-workspace .ws-account-handle {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--atelier-ink);
    font-family: var(--brand-font-body);
    /* Match the nav rows exactly (aside.sidebar nav > a is 0.84rem). !important +
       -webkit-text-size-adjust defeat the generic mobile `select{font-size:.85rem
       !important}` rule AND Chromium mobile font-boosting, which otherwise inflate
       the <select> to ~16px while the plain nav labels stay 0.84rem. */
    font-size: 0.84rem !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The dropdown: strip the native chrome, add a quiet chevron so the row stays
   flat like its siblings while still reading as switchable. */
aside.sidebar .account-selector-workspace select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 11px;
    transition: color 0.15s ease;
}

aside.sidebar .account-selector-workspace select:hover { color: var(--atelier-purple); }
/* No-account placeholder: looks like the switcher but routes to Accounts. */
aside.sidebar .account-selector-empty { text-decoration: none; cursor: pointer; }
aside.sidebar .account-selector-empty .ws-account-empty { color: var(--atelier-ink-muted); font-style: italic; }
aside.sidebar .account-selector-empty:hover .ws-account-empty { color: var(--atelier-purple); font-style: normal; }

/* Override the global dark form-field fill (html[data-theme="dark"] select is
   !important) so the switcher stays flat like the nav rows — transparent bg,
   theme-matched chevron, no field border. */
html[data-theme="dark"] aside.sidebar .account-selector-workspace select {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e7d77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center !important;
    background-size: 11px !important;
    border-color: transparent !important;
}

/* Workspace label carries a hairline divider — separates the account-agnostic
   umbrella (Home, Accounts) above from the account-scoped workspace below. */
aside.sidebar nav .nav-label-workspace {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--atelier-hairline-soft);
}

/* "All Profiles" caption sits at the very top of the nav (super-only). No top
   divider — it's the first element; the Workspace label below carries the rule
   that visually splits the two zones. */
aside.sidebar nav .nav-label-agency {
    margin-top: 0.1rem;
}

/* ---------- Entrance motion v2 — staggered rise for the first content blocks.
   Replaces the single-delay fade with a 40ms cascade (capped at 6 blocks). ---- */
main.main-content > *:nth-child(n) { animation-delay: 0.04s; }
main.main-content > *:nth-child(3) { animation-delay: 0.08s; }
main.main-content > *:nth-child(4) { animation-delay: 0.12s; }
main.main-content > *:nth-child(5) { animation-delay: 0.16s; }
main.main-content > *:nth-child(6) { animation-delay: 0.20s; }
main.main-content > *:nth-child(7) { animation-delay: 0.24s; }

/* ---------- Micro-interactions ---------- */
button[type]:active, [type="submit"]:active, [type="button"]:active, [role="button"]:active {
    transform: translateY(1px);
}

table tbody tr { transition: background 0.12s ease; }
table tbody tr:hover { background: rgba(74, 46, 255, 0.03); }

.htmx-swapping { opacity: 0.35; transition: opacity 0.15s ease; }
.htmx-settling { opacity: 1; transition: opacity 0.2s ease; }

/* V2 tidy: sidebar footer — one calm micro row */

/* V2 elevation: the appbar glides — translucent cream with blur, so content
   slips beneath it instead of hitting a solid bar. Token-based: adapts to dark. */
.appbar {
    background: color-mix(in srgb, var(--atelier-cream) 86%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
}
@supports not (backdrop-filter: blur(1px)) {
    .appbar { background: var(--atelier-cream); }
}

/* V2: Library as a single quiet disclosure — closed by default, the long tail
   lives one click away instead of filling the sidebar. */
aside.sidebar details.nav-library { margin: 0; }
aside.sidebar details.nav-library > summary { list-style: none; cursor: pointer; align-items: center; }
aside.sidebar details.nav-library > summary::-webkit-details-marker,
aside.sidebar details.nav-group > summary::-webkit-details-marker { display: none; }
aside.sidebar details.nav-library > summary::marker,
aside.sidebar details.nav-group > summary::marker { content: ''; }
/* One chevron per disclosure: replace both Pico's background arrow and the
   former plus/minus text. Point right when closed and down when open. */
aside.sidebar details.nav-group > summary::after,
aside.sidebar details.nav-library > summary.nav-label-library::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0 0.15rem 0 0.65rem;
    float: none;
    background: none;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    color: var(--atelier-ink-muted);
    filter: none;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
}
aside.sidebar details.nav-group[open] > summary::after,
aside.sidebar details.nav-library[open] > summary.nav-label-library::after {
    transform: rotate(45deg);
}
aside.sidebar details.nav-group > summary:hover::after,
aside.sidebar details.nav-library > summary:hover::after { color: var(--atelier-purple); }

/* ============================================================================
   OVERNIGHT REVAMP LAYER — 2026-07-24/25
   Later-class finish pass. Chrome fixes + warm dark ladder.
   ============================================================================ */

/* Tabular numerals for every count/time/stat app-wide */
body { font-variant-numeric: tabular-nums; }

/* ---------- Canvas seam fix: one painted canvas per theme.
   The sidebar is position:fixed; on pages taller than 100vh the rail area
   used to fall back to the body background (white / cool black). Paint the
   rail + content split on the body itself, fixed-attachment. ---------- */
html[data-theme="light"] body {
    background: linear-gradient(to right,
        var(--atelier-cream) 0,
        var(--atelier-cream) var(--nav-width),
        #ffffff var(--nav-width)) fixed;
}

/* ---------- Warm dark ladder (was cool blue-black under a warm cream brand) */
html[data-theme="dark"] {
    --atelier-cream:        #14120e;
    --atelier-cream-edge:   #201c14;
    --atelier-ink:          #f1ece0;
    --atelier-ink-soft:     #bab4a6;
    --atelier-ink-muted:    #827d70;
    --atelier-hairline:     rgba(241, 236, 224, 0.10);
    --atelier-hairline-soft:rgba(241, 236, 224, 0.05);
    --atelier-purple-soft:  rgba(122, 98, 255, 0.16);
    --pico-card-background-color: #14120e;
    --pico-card-sectioning-background-color: #1a1712;
}
html[data-theme="dark"] main.main-content,
html[data-theme="dark"] .appbar {
    background: #0c0b09;
}
html[data-theme="dark"] body {
    background: linear-gradient(to right,
        var(--atelier-cream) 0,
        var(--atelier-cream) var(--nav-width),
        #0c0b09 var(--nav-width)) fixed;
}

/* ---------- Sidebar search (inline styles removed from base.html) ---------- */
/* Retired sidebar search: also hide it in pages using a cached base template. */
.sidebar-search { display: none; }
.sidebar-search input[type="text"] {
    margin: 0; padding: 0.3rem 0.5rem; font-size: 0.8rem;
}

/* ---------- Sidebar footer: identity + utils row ---------- */
aside.sidebar nav.sidebar-bottom {
    display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch;
    margin-top: auto;
    padding: 0.75rem 1.25rem 0.85rem;
    border-top: 1px solid var(--atelier-hairline);
    background: var(--atelier-cream);
}
.sb-identity {
    font-size: 0.72rem; color: var(--atelier-ink-muted);
    text-decoration: none; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.sb-identity:hover { color: var(--atelier-purple); }
.sb-utils {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.72rem; min-width: 0;
}
aside.sidebar nav.sidebar-bottom .sb-utils a,
aside.sidebar nav.sidebar-bottom a.sb-identity {
    display: inline-block; width: auto; margin: 0;
    color: var(--atelier-ink-muted); text-decoration: none;
    background: none; border: none; border-left: none; padding: 0; white-space: nowrap;
    font-size: 0.72rem; letter-spacing: 0.01em; text-transform: none; font-weight: 400;
    transition: color .15s ease;
}
aside.sidebar nav.sidebar-bottom .sb-utils a:hover {
    color: var(--atelier-purple); background: none;
}
aside.sidebar nav.sidebar-bottom .sb-utils a::before { display: none; content: none; }
.sb-utils kbd {
    font-size: 0.58rem; padding: 0.05rem 0.28rem; border-radius: 3px;
    border: 1px solid var(--atelier-hairline); background: transparent; color: inherit;
}

/* ---------- Quiet nav count (calendar conflicts) ---------- */
.nav-count {
    display: inline-block; min-width: 1.2em; margin-left: 0.35em; padding: 0 0.35em;
    font-size: 0.62rem; line-height: 1.6; text-align: center; border-radius: 99px;
    background: var(--atelier-purple-soft); color: var(--atelier-purple);
    vertical-align: middle;
}

/* ---------- Flash container (inline padding removed from base.html) ---------- */
.flash-stack { padding: 1rem 2.5rem 0; }

/* ---------- Appbar: page h1 owns the title on desktop; appbar keeps context */
@media (min-width: 769px) {
    .appbar-title { display: none; }
    .appbar-eyebrow::after { content: none; }
}

/* ---------- Mobile: clear the fixed bottom tab bar ---------- */
@media (max-width: 768px) {
    main.main-content { padding-bottom: 2rem; }
    .flash-stack { padding: 0.75rem 1.25rem 0; }
}

/* ---------- Dark mode: lift interactive purple to AA on the near-black canvas.
   The outgoing DM bubble is pinned to true electric purple in both themes —
   it is the brand thread (white-on-#4a2eff is 8.6:1 everywhere). ---------- */
html[data-theme="dark"] {
    --atelier-purple: #7a62ff;
    --brand-purple: #7a62ff;
}
html[data-theme="dark"] .message.out {
    background: #4a2eff;
    color: #fff;
}

/* ---------- Emoji fallback for user content (IG captions/comments/DMs) ---------- */
:root {
    --brand-font-body: 'Helvetica Neue', Helvetica, 'helvetica-w01-roman', Arial,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---------- HARDEN 2026-07-25: sidebar clarity ---------- */
/* Icons on the 9 workspace items — one stroke language, quiet until active */
aside.sidebar nav > a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
aside.sidebar nav > a .nav-icon {
    flex: none;
    color: var(--atelier-ink-muted);
    opacity: 0.75;
    transition: color .15s ease, opacity .15s ease;
}
aside.sidebar nav > a:hover .nav-icon,
aside.sidebar nav > a.active .nav-icon {
    color: var(--atelier-purple);
    opacity: 1;
}

/* Brand block: the "Workspace" caption duplicated the nav's Workspace label —
   the wordmark now stands alone. */
aside.sidebar h2.sidebar-wordmark span::after { content: none; display: none; }

/* ============================================================================
   EDITORIAL CRAFT LAYER — 2026-07-25
   The de-AI-ification pass: masthead typography, warm paper atmosphere,
   letter-spacing discipline. Tokens only; both themes.
   ============================================================================ */

/* 1 — Masthead titles: bigger, lighter, tighter. Editorial confidence. */
main.main-content h1:first-of-type,
.page-body > h1:first-of-type,
main.main-content > h1 {
    font-size: 2.55rem;
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

/* 2 — Warm paper: a whisper of grain + warm wash on the canvas so surfaces
   read as paper, not as a default white viewport. Sits inside the existing
   body rail gradient (last layer paints first). */
html[data-theme="light"] body {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.33 0 0 0 0 0.28 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat fixed,
        linear-gradient(to right,
            var(--atelier-cream) 0,
            var(--atelier-cream) var(--nav-width),
            #ffffff var(--nav-width)) fixed;
}
html[data-theme="dark"] body {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.012 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat fixed,
        linear-gradient(to right,
            var(--atelier-cream) 0,
            var(--atelier-cream) var(--nav-width),
            #0c0b09 var(--nav-width)) fixed;
}

/* 3 — Letter-spacing ladder: tracked caps live at 10-11px only; readable text
   never tracks. Kill stray wide tracking on mid-size text. */
main.main-content h2 { letter-spacing: -0.005em; }

/* 4 — Subtitle line under the masthead reads as a deck: slightly larger, soft */
main.main-content h1:first-of-type + p,
.page-body > h1:first-of-type + p {
    font-size: 0.98rem;
    color: var(--atelier-ink-soft);
    max-width: 56ch;
}

/* ============================================================================
   UX PASS LAYER — 2026-09-13
   Chrome-level corrections applied across all 232 templates via the cascade.
   Backup: static/brand.css.bak-20260913-uxpass
   Every value here was measured on the live app (390x844 and 1440x900), not
   estimated; the measurements are quoted in the comments so a later reader can
   re-run them rather than trust them.
   ========================================================================= */

/* ---- 1. MOBILE: the 56px dead band above the app bar --------------------
   `.main-content { padding-top: 3.5rem }` (brand.css:1148 + :1236) predates the
   app bar, when the fixed hamburger needed clearance at the top of the CONTENT.
   The app bar now reserves that lane itself (`padding-left: 3.5rem`), so the
   top padding became empty space AND pushed the sticky bar 56px down the page,
   which is why it never stuck to the viewport top. Measured before this rule:
   .appbar top=56, h1 top=112. After: .appbar top=0, h1 top=56.
   Reclaims 56px on every mobile page.                                      */
@media (max-width: 768px) {
    /* !important is required, not preferred: the rule being corrected
       (brand.css:5162, inside @media max-width:480px) is itself
       `padding: 0.5rem !important; padding-top: 3.5rem !important`, so a
       normal declaration loses to it below 480px however late it appears.
       Verified by measuring at 390px: without !important the bar stayed at
       top=56; with it, top=0. */
    main.main-content {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* main's side padding is removed above so the bar can go full-bleed; the
       existing child rule (brand.css:3275) already re-applies 1rem to every
       non-appbar child, and .page-body carries its own — retuned for 390px. */
    .page-body {
        padding: 1.25rem 1rem 1.75rem;
    }

    /* ---- 2. The app bar truncated BOTH identities ------------------------
       Measured: .appbar-left was 184px wide, of which .appbar-title got 36px —
       "Content Calendar" rendered as "Content C…" and "@lineagecoded" as
       "@lineage…". The eyebrow is the thing to cut: it reads "Workspace" on
       every page in the workspace, so it is the one element in that row
       carrying no information. Removing it returns ~90px to the two that do. */
    .appbar-eyebrow { display: none; }

    .appbar-title {
        font-size: 0.85rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .appbar-profile-handle { max-width: 120px; }

    /* ---- 3. The masthead ate the fold ------------------------------------
       Measured: the h1 block was 113px tall on a 844px viewport. The editorial
       treatment (purple bar + rule) is kept — it is the brand — but tightened. */
    main.main-content h1:first-of-type,
    .page-body > h1:first-of-type,
    main.main-content > h1 {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ---- 4. Horizontal scroll rows had no affordance -------------------------
   Correction to a first reading of the screenshots: the document does NOT
   overflow (scrollWidth == clientWidth == 390 on every page probed). The
   filter rows are deliberate scroll containers — .ibx2-chips measured
   scrollWidth 458 vs clientWidth 374. The defect is that nothing SAYS so, so a
   cut-off chip ("NEGATIVE" rendering as "NE") reads as a layout bug. A right-
   edge fade makes the affordance visible without changing the behaviour.    */
@media (max-width: 768px) {
    .ibx2-chips,
    .cal2-chips,
    .filter-chips,
    .chip-row {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        scrollbar-width: none;
    }
    .ibx2-chips::-webkit-scrollbar,
    .cal2-chips::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar,
    .chip-row::-webkit-scrollbar { display: none; }
}

/* ---- 5. MOBILE: the app bar carried a truncated duplicate ----------------
   After (2) the bar reads: [profile chip] [page title]. Measured on Calendar
   at 390px: the chip got 123px ("@linea…") and the title 85px ("Content C…") —
   BOTH truncated, and the title is a verbatim duplicate of the h1 sitting 36px
   below it. The title is the one to cut: on mobile the bottom tab bar already
   marks which page you are on, persistently and without truncation, whereas
   which CLIENT the workspace is acting on appears nowhere else on screen and
   is the expensive thing to get wrong. Full handle beats half of both. */
@media (max-width: 768px) {
    /* ⛔ SUPERSEDED THE SAME DAY — and the reason it was right is the reason it
       is now wrong. Hiding the title was justified by "the bottom tab bar
       already marks the page persistently". The owner then removed the bottom
       tab bar (navigation moved to the left drawer), which **deleted the
       premise**, and with it the only thing on a phone that said which page
       you were on once the h1 scrolled under the sticky bar.
       ★ A justification that names another component is a DEPENDENCY. When
       that component goes, every decision resting on it has to be re-opened —
       nothing warns you, because the rule still looks locally sensible.
       So the title comes back, and the space is taken from the profile chip
       instead: it drops to avatar + health dot, because the full handle is one
       tap away in the drawer's account switcher, whereas the page name is not
       anywhere else at all. */
    .appbar-title {
        display: block;
        font-size: 0.85rem;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .appbar-profile-handle { display: none; }

    .appbar-profile {
        flex-shrink: 0;
        padding: 0.1rem 0.35rem 0.1rem 0.1rem;
    }
}

/* ---- 6. The Lab marker ---------------------------------------------------
   Set by `surface.is_lab()` (see surface.py). Deliberately QUIET: it is a
   statement of finish, not a warning, and several Lab pages are load-bearing
   features people use daily. Loud styling here would either train people to
   ignore it or make working software look broken.                          */
.lab-ribbon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* !important is EARNED, and this is the same trap the training sheet hit.
       `main.main-content > :not(.appbar):not(.app-footer):not(.page-body)...
       :first-of-type` (brand.css:3048) is the Atelier first-child treatment and
       computes to roughly (0,9,3) — it lands on this note because the ribbon is
       now main's first non-appbar child, and it applied padding-top 45px to a
       single line of text (measured: ribbon height 82px for one sentence).
       Nothing sane outranks that selector, and narrowing it would touch every
       page in the app. */
    margin: 0 2.5rem 1.25rem !important;
    padding: 0.5rem 0.8rem !important;
    border: 1px solid var(--atelier-hairline);
    border-left: 2px solid var(--atelier-ink-muted);
    border-radius: 3px;
    background: transparent;
}

.lab-ribbon-tag {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--atelier-ink-muted);
    border: 1px solid var(--atelier-hairline);
    border-radius: 2px;
    padding: 0.12rem 0.4rem;
    flex-shrink: 0;
}

.lab-ribbon-text {
    font-size: 0.78rem;
    color: var(--atelier-ink-soft);
    line-height: 1.35;
}

/* The Lab nav label carries the same words as the ribbon, so the section and
   the page agree about what they are. */
.nav-lab-note {
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--atelier-ink-muted);
    opacity: 0.75;
    margin-left: 0.35rem;
}

@media (max-width: 768px) {
    .lab-ribbon { margin: 0 1rem 1rem !important; }
}

/* ---- 7. The masthead ate the fold — SPACE ONLY (2026-09-13) --------------
   Measured on Feed at 1440x900: the h1 box is 169px, of which the TYPE is 53px
   and the other 116px is spacing. So the slack is in the box, not the letters.

   ⛔ A TYPE CUT WAS MEASURED AND REJECTED, not assumed. Dropping 2.55rem to
   1.95rem — a 24% reduction — moved Feed's first content from 553 to 543:
   **10px for the entire editorial voice**, because `line-height: 1.04` leaves
   the type almost no slack to give. At that size "Feed" stops reading as a
   masthead and reads as a subsection heading.

   ⚠ CORRECTION TO A SOURCE READ: the live masthead is NOT the `2.1rem/500`
   rule at brand.css:3054. It is overridden by the EDITORIAL CRAFT LAYER at
   :5612 (`2.55rem/300/-0.035em/1.04`), and the root font-size is 20px, so the
   live h1 renders at 51px. A change written against :3054's font-size would
   have been a no-op against a dead rule. Read the COMPUTED value.

   SCOPE, deliberately narrow: only the three properties that belong to the
   masthead itself. The generic container padding (`.page-body` /
   `:first-of-type` at 2.25rem = 45px) is NOT touched here even though it is
   the single largest contributor, because it is a GLOBAL page metric that also
   governs the 83 of 232 templates with no h1 at all, and tightening it would
   cut app-bar-to-content clearance estate-wide as a side effect of a change
   justified as a brand tweak. That is its own decision, with its own evidence
   — see CLAUDE.md "Masthead compression".

   Desktop only: the mobile masthead was already retuned in layer 3 above, and
   this rule is a measured +0 no-op at 768px and below.                       */
@media (min-width: 769px) {
    main.main-content h1:first-of-type,
    .page-body > h1:first-of-type,
    main.main-content > h1 {
        padding-bottom: 0.6rem;
        margin-bottom: 0.75rem;
    }

    main.main-content h1:first-of-type::before,
    .page-body > h1:first-of-type::before,
    main.main-content > h1::before {
        margin-bottom: 0.6rem;
    }
}

/* ---- 8. The surface palette — DIRECTION, not amount (2026-09-13) ---------
   Cards measured `rgb(241,236,224)` on a `rgb(255,255,255)` page: **1.179:1,
   and DARKER than the ground**, so they receded and read as inset or faintly
   disabled rather than as objects.

   ★ THE ARGUMENT THAT SETTLED IT: DARK MODE ALREADY HAS IT RIGHT.
       light today:  ground #ffffff  card #f1ece0  = 1.179:1  card DARKER
       dark  today:  ground #0c0b09  card #201c14  = 1.159:1  card LIGHTER
   Same app, same card, near-identical magnitude, OPPOSITE direction. So the
   defect is not "not enough contrast" — raising it would only have made the
   cards heavier. Dark mode also supplies the target number to aim at.

   The fix therefore darkens the GROUND and touches no card fill at all:
   `.wh-card`/`.ov2-acctcard`/`.ha-tile`/`.ov2-notice` 1.179 DARKER -> 1.103
   LIGHTER; `.acc2-pair`/`.acc2-tnode` 1.070 DARKER -> 1.215 LIGHTER. Both
   bracket dark mode's 1.159.

   ★ The unlooked-for win: **655 surfaces were white-on-white and invisible** —
   601 calendar table cells, 41 settings panels, 13 growth stat cards. Across
   14 pages the LIGHTER/DARKER/invisible split goes 62/180/659 -> 863/36/2.
   The Content Calendar now reads as a white sheet on a desk instead of
   dissolving into the page.

   ⛔ THE PRETTIER OPTION WAS MEASURED AND REJECTED. Inverting the tokens
   (page -> cream, cards -> white) looks best and is one token pair — which is
   exactly why it is dangerous: **`--atelier-cream-edge` is not only a card
   fill, it is the placeholder/well fill.** Inverting collapses 120 calendar
   thumbnail placeholders to contrast **1.000 — literally invisible** — and
   strips the letterbox off 60 media tiles, on the 2 of 12 pages that happened
   to be sampled. Lightening cream-edge toward cream fails the same way on 60
   nested edge-in-cream pairs. ★ A token used for two jobs cannot be retuned
   for one of them.

   ⚠ Zero fills are touched, by construction, so all 118 `--atelier-cream`/
   `-edge` surface rules are unaffected and no half-flipped state is possible:
   a card class nobody listed simply gets no shadow and still sits lighter
   than the ground. Dark mode: 0 differing pixels (measured against a
   baseline-vs-baseline control establishing the noise floor).              */
:root {
    --atelier-paper: #e9e1d1;   /* page ground — sits BELOW both card fills */
}

html[data-theme="light"] main.main-content {
    background: var(--atelier-paper);
}

/* Cards lift off the desk. ⚠ Every selector is scoped individually: in a
   comma list the descendant scope binds ONLY to the first selector, which
   leaked a light-mode shadow into dark mode on `.ov2-acctcard` and `.ha-tile`
   in the first cut. The `:not()` clauses are load-bearing, not cosmetic — the
   dashed "add" slot and disabled nodes were picking up a shadow and reading
   as active. */
html[data-theme="light"] .wh-card,
html[data-theme="light"] .ov2-acctcard,
html[data-theme="light"] .ha-tile,
html[data-theme="light"] .ov2-notice,
html[data-theme="light"] .acc2-pair:not(.acc2-pair-add):not(.is-off),
html[data-theme="light"] .acc2-tnode:not(.is-off),
html[data-theme="light"] .report-card {
    box-shadow: 0 1px 1px rgba(20, 22, 28, 0.04), 0 3px 10px rgba(20, 22, 28, 0.07);
}

/* ⛔ NOT deferred as "a second decision". Darkening the ground drops muted
   secondary text from 3.24:1 to 2.49:1 wherever it sits directly on the desk,
   and the analytics hub is exactly that case — all 73 `.report-card`s are
   transparent in light mode, so every card description would land on the
   ground. Both numbers already fail WCAG AA, and "it was already failing" is
   not a reason to ship a change that makes it worse on a client-facing app.
   Dark mode already solves this the same way (`rgba(255,255,255,0.02)` on
   `.report-card`); light simply never did. One line, causally part of the
   change, so it ships with it. */
html[data-theme="light"] .report-card {
    background: var(--atelier-cream);
}

/* ---- 9. `--atelier-ink-muted` failed WCAG AA on EVERY surface (2026-09-13)
   Found by `ui-review` once a teammate shipped auth support for it. The token
   is `#8a8f9a`, and 370 of its ~390 uses are `color:` — it is the app's
   tertiary text colour. Measured against every ground it sits on:

       vs the NEW page ground  #e9e1d1   2.49:1
       vs a card               #f1ece0   2.75:1
       vs the app bar          #f8f4ec   2.95:1
       vs the sidebar          #faf7f0   3.03:1
       vs the OLD white page   #ffffff   3.24:1     <- before any of today's work

   ★ GET THE ATTRIBUTION RIGHT IN BOTH DIRECTIONS. It **failed on the sidebar
   and the app bar**, which today's ground change did not touch, and it failed
   on the old white page too. So this is a PRE-EXISTING, app-wide defect that
   the ground change made worse (3.24 -> 2.49), not one it created. Neither
   "I broke it" nor "it was already broken so it is fine" is the truth, and
   only measuring the untouched surfaces separates them.

   `#5f646f` is the LIGHTEST value that clears 4.5:1 on the worst surface
   (4.57:1 on the ground; 5.03 on cards, 5.41 app bar, 5.55 sidebar), computed
   by walking lightness down in HLS from the original — so **hue and saturation
   are unchanged** and it stays lighter than `--atelier-ink-soft` (6.30:1). The
   three-step ink > ink-soft > ink-muted hierarchy survives; the token is still
   muted, it is just legible.

   ⚠ ~13 of its uses are not text — status dots, a zero-bar, a draft marker,
   five `border-left` rails. Each was checked: they are faint markers meaning
   "unknown / stale / zero", and a slightly stronger value helps them.

   Light only. Dark redefines this token separately and is measured on its own
   evidence — see CLAUDE.md.                                                  */
html[data-theme="light"] {
    --atelier-ink-muted: #5f646f;
}

/* ---- 10. Mobile tap targets below the 44px floor (2026-09-13) ------------
   `ui-review` measured 198 interactive elements at 390x844 and found seven
   under WCAG 2.5.5's 44x44: the profile `<select>` at 178x17, notice rows at
   299x20, "Mark all read" 77x18, "View all ads" 86x21, and the notice dismiss
   `x` at **21x18** — a target you have to aim at on a phone.

   ★ TWO TECHNIQUES, CHOSEN PER CASE, because "add padding" is not always free:
   where the element sits in a layout that padding would disturb (the inline
   `x`, the inline text links) the hit area is grown with an absolutely
   positioned `::after` overlay — the tap target reaches 44px while the box,
   and therefore the layout, does not move at all. Where the element is a block
   row that can simply be taller (the notice rows, the profile select), padding
   and `min-height` do the job honestly.

   ⚠ The overlay must not eat its neighbours' clicks: each is confined to its
   own element's stacking context and the parents are `position: relative`, so
   it extends only over the row's own padding, not across the row.          */
@media (max-width: 768px) {
    /* -- block rows: just make them tall enough -- */
    .ov2-notice-body,
    .ha-all {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .account-selector-workspace select {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* -- inline targets: grow the HIT AREA, never the box -- */
    .ov2-notice,
    .ov2-notice-actions { position: relative; }

    /* ⚠ A `::after` OVERLAY WAS TRIED FIRST AND WITHDRAWN. It does enlarge the
       real hit area, but an absolutely-positioned pseudo does not change the
       parent's box — so `getBoundingClientRect()` still reads 21x18, and any
       checker (or reviewer) measuring the element sees an unfixed target. A
       fix that is invisible to measurement is a fix nobody can confirm and the
       next person will "re-fix". Grow the real box instead, and cancel the
       growth with a negative margin so the row height does not move. */
    .ov2-notice-x,
    .ov2-notice-markall {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: -13px;
        margin-bottom: -13px;
    }

    /* The hamburger measured 38x34. */
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
    }

    /* (The active-bottom-tab contrast fix that sat here was REMOVED when the
       bottom tab bar was deleted — the element no longer exists, so the rule
       was dead. The lesson it recorded is kept in CLAUDE.md: on a two-colour
       pair, "increase the contrast" has a direction and intuition picks it
       wrong about half the time. Re-measure after, not just before.) */
}

/* ---- 11. The drawer is now the ONLY navigation on mobile (2026-09-13) ----
   The bottom tab bar was removed at the owner's request — navigation moved to
   the left drawer. `ui-review` had already flagged the drawer's own rows as
   under 44x44 (search input 32, nav-group `<summary>` 28-34), and at the time
   those were left as accepted WARNs on the reasoning that a drawer is "a list
   you scroll rather than aim at".

   ★ THAT REASONING DIED WITH THE TAB BAR. A secondary list you occasionally
   open is not the same object as the primary and only navigation. The same
   measurement means something different once the component it competed with
   is gone — which is the second time in this one change that removing the tab
   bar invalidated a decision made in its shadow (the app-bar title was the
   first). When a component is deleted, re-open what was justified BY it, not
   just what referenced it.                                                  */
@media (max-width: 768px) {
    aside.sidebar nav a,
    aside.sidebar nav summary,
    aside.sidebar .account-selector-workspace select {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    aside.sidebar form.sidebar-search input {
        min-height: 44px;
    }

    /* The app bar's own controls measured 32x32 in a 56px-tall bar — there was
       always room, they were just never sized for a thumb. The drawer's Dark
       toggle was 28 wide; it is a short word, so it gets width, not height. */
    .appbar .notif-bell-link,
    .appbar-signout {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    aside.sidebar .sb-utils a {
        min-width: 44px;
    }
}

/* ---- 12. THE PAGE HEADER PATTERN (2026-09-13) ---------------------------
   Owner: *"things are a bit messy … tidy up, arrange, align, remove unneeded
   text. Make it look more like an app."*

   Measured across the 12 product pages, the two causes were concrete:
   (a) SEVEN carried an explanatory paragraph under the h1 (47-109 chars) —
       onboarding prose a daily operator re-reads forever;
   (b) the primary action was in a different place on every page: Calendar
       y236, Inbox y505, Media y594, Growth y1569, Settings y1884, and four
       pages had none at all.
   An app puts its one primary action in the same place on every screen. An
   essay explains itself first. This is the app version.

   ONE pattern, defined once here so per-page work cannot invent dialects:

       <div class="pg-head">
         <h1>Title</h1>
         <div class="pg-head-actions"> …primary action… </div>
       </div>

   ⚠ Wrapping the h1 BREAKS the editorial masthead treatment, which is keyed on
   `main.main-content h1:first-of-type` / `.page-body > h1:first-of-type` — an
   h1 inside a wrapper is no longer either. `.pg-head > h1` is therefore added
   to every one of those selector groups below, including the `::before` purple
   bar. Miss this and the page silently loses its masthead.                  */
.pg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

main.main-content .pg-head > h1 {
    flex: 1 1 auto;
    min-width: 0;
}

.pg-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    /* sit on the title's baseline rule, not above it */
    padding-bottom: 1.35rem;
}

/* Re-attach the masthead treatment to a wrapped h1 (see the warning above). */
main.main-content .pg-head > h1:first-of-type {
    font-size: 2.55rem;
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--atelier-ink);
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--atelier-hairline);
    position: relative;
}

main.main-content .pg-head > h1:first-of-type::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--atelier-purple);
    margin-bottom: 0.6rem;
}

/* The rule under the title should span the whole header, action included —
   otherwise the hairline stops mid-row and the alignment reads as accidental.
   ⚠ `main.main-content` prefix is REQUIRED on all of these: the original
   masthead rule is `main.main-content h1:first-of-type` = (0,2,2), which beats
   a bare `.pg-head > h1:first-of-type` = (0,2,1), and per-page stylesheets
   load AFTER brand.css so their own `.xxx-head` (0,1,0) ties and wins on
   order. Measured symptom of getting this wrong: the hairline stops where the
   title ends instead of running under the action. */
main.main-content .pg-head {
    border-bottom: 1px solid var(--atelier-hairline);
    margin-bottom: 1.25rem;
}
main.main-content .pg-head > h1:first-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0.6rem;
}

@media (max-width: 768px) {
    .pg-head { gap: 0.5rem; }
    main.main-content .pg-head > h1:first-of-type { font-size: 1.4rem; }
    .pg-head-actions { padding-bottom: 0.75rem; }
}

/* An actions cell with nothing in it still occupies the header row (measured
   0x27 on Feed after its one action moved to the Creative Hub). A page with no
   primary action should carry no phantom element. */
main.main-content .pg-head-actions:empty { display: none; }


/* ======================================================================
   Gallery foundation · 2026-10-31
   Shared mechanics and compatibility aliases. Page styles consume --sa-*;
   legacy --atelier-* and --brand-* names keep their existing API.
   Eight explicit type steps; root remains 20px desktop and 16px on phones.
   ====================================================================== */
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('fonts/HankenGrotesk-var.ttf?v=20261031-gallery-1') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --sa-font: 'Hanken Grotesk', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    --sa-text-xs: 12px;
    --sa-text-sm: 14px;
    --sa-text-base: 16px;
    --sa-text-lg: 20px;
    --sa-text-xl: 24px;
    --sa-text-2xl: 32px;
    --sa-text-3xl: 40px;
    --sa-text-4xl: 56px;
    --sa-space-1: 4px;
    --sa-space-2: 8px;
    --sa-space-3: 12px;
    --sa-space-4: 16px;
    --sa-space-5: 20px;
    --sa-space-6: 24px;
    --sa-space-8: 32px;
    --sa-space-10: 40px;
    --sa-space-12: 48px;
    --sa-space-16: 64px;
    --sa-radius-sm: 6px;
    --sa-radius: 8px;
    --sa-radius-lg: 12px;
    --sa-radius-xl: 16px;
    --sa-radius-round: 999px;
    --sa-motion-fast: 160ms;
    --sa-motion: 200ms;
    --sa-ease: cubic-bezier(.2,.7,.2,1);
    --sa-sidebar-width: 208px;
    --sa-appbar-height: 88px;
    --sa-tap: 44px;
    --brand-purple: #4a2eff;
    --brand-purple-dark: #3b20eb;
    --brand-purple-deep: #271c55;
    --brand-white: #fff;
    --brand-black: #202620;
    --brand-font-body: var(--sa-font);
    --brand-font-heading: var(--sa-font);
    --brand-font-small: var(--sa-font);
    --brand-font-label: var(--sa-font);
    --nav-width: var(--sa-sidebar-width);
    --sidebar-w: var(--sa-sidebar-width);
    --atelier-appbar-h: var(--sa-appbar-height);
    --atelier-footer-h: 0px;
}
html[data-theme='light'], html:not([data-theme]) {
    color-scheme: light;
    --sa-canvas: #f6f7f4;
    --sa-surface: #fff;
    --sa-surface-alt: #f1f3ef;
    --sa-surface-inset: #e8eee4;
    --sa-ink: #202620;
    --sa-muted: #687168;
    --sa-line: #e2e6df;
    --sa-line-strong: #c9d1c6;
    --sa-action: #4a2eff;
    --sa-action-hover: #3b20eb;
    --sa-on-action: #fff;
    --sa-link: #4a2eff;
    --sa-accent-soft: #eeebff;
    --sa-sage: #526d4b;
    --sa-sage-soft: #e8eee4;
    --sa-danger: #ac332b;
    --sa-danger-soft: #fff0ed;
    --sa-warning: #79530d;
    --sa-warning-soft: #fff4d8;
    --sa-shadow: 0 8px 24px #1e2d2010;
    --sa-shadow-high: 0 24px 72px #11221826;
    --sa-focus: #4a2eff;
}
html[data-theme='dark'] {
    color-scheme: dark;
    --sa-canvas: #151d19;
    --sa-surface: #1d2822;
    --sa-surface-alt: #111a15;
    --sa-surface-inset: #2c3f2e;
    --sa-ink: #eef3ed;
    --sa-muted: #a8b5a8;
    --sa-line: #2e3b31;
    --sa-line-strong: #455648;
    --brand-purple: #4a2eff;
    --brand-purple-dark: #3b20eb;
    --sa-action: #4a2eff;
    --sa-action-hover: #3b20eb;
    --sa-on-action: #fff;
    --sa-link: #c3b7ff;
    --sa-accent-soft: #30294d;
    --sa-sage: #bbcfad;
    --sa-sage-soft: #2c3f2e;
    --sa-danger: #ffaaa1;
    --sa-danger-soft: #402822;
    --sa-warning: #f4d18e;
    --sa-warning-soft: #3b3220;
    --sa-shadow: 0 8px 24px #050d0830;
    --sa-shadow-high: 0 24px 72px #02090666;
    --sa-focus: #c3b7ff;
}
/* Set aliases per theme so an inherited alias resolves against that theme. */
html[data-theme], html:not([data-theme]) {
    --atelier-paper: var(--sa-canvas);
    --atelier-cream: var(--sa-surface);
    --atelier-cream-edge: var(--sa-surface-inset);
    --atelier-ink: var(--sa-ink);
    --atelier-ink-soft: var(--sa-muted);
    --atelier-ink-muted: var(--sa-muted);
    --atelier-hairline: var(--sa-line);
    --atelier-hairline-soft: var(--sa-line);
    --atelier-purple: var(--sa-link);
    --atelier-purple-soft: var(--sa-accent-soft);
    --brand-bg-secondary: var(--sa-surface-inset);
    --brand-muted: var(--sa-muted);
    --brand-disabled: var(--sa-muted);
    --brand-success: var(--sa-sage);
    --brand-green: var(--sa-sage);
    --brand-danger: var(--sa-danger);
    --brand-warning: var(--sa-warning);
    --pico-font-family: var(--sa-font);
    --pico-font-size: 20px;
    --pico-line-height: 1.5;
    --pico-border-radius: var(--sa-radius);
    --pico-background-color: var(--sa-canvas);
    --pico-color: var(--sa-ink);
    --pico-muted-color: var(--sa-muted);
    --pico-muted-border-color: var(--sa-line);
    --pico-primary: var(--sa-link);
    --pico-primary-hover: var(--sa-link);
    --pico-primary-background: var(--sa-action);
    --pico-primary-border: var(--sa-action);
    --pico-primary-hover-background: var(--sa-action-hover);
    --pico-primary-hover-border: var(--sa-action-hover);
    --pico-primary-inverse: var(--sa-on-action);
    --pico-primary-focus: color-mix(in srgb, var(--sa-focus) 22%, transparent);
    --pico-secondary: var(--sa-muted);
    --pico-secondary-background: var(--sa-surface);
    --pico-secondary-border: var(--sa-line-strong);
    --pico-secondary-inverse: var(--sa-ink);
    --pico-form-element-background-color: var(--sa-surface);
    --pico-form-element-border-color: var(--sa-line-strong);
    --pico-form-element-color: var(--sa-ink);
    --pico-form-element-placeholder-color: var(--sa-muted);
    --pico-form-element-active-background-color: var(--sa-surface);
    --pico-form-element-active-border-color: var(--sa-focus);
    --pico-form-element-focus-color: color-mix(in srgb, var(--sa-focus) 18%, transparent);
    --pico-card-background-color: var(--sa-surface);
    --pico-card-sectioning-background-color: var(--sa-surface-alt);
    --pico-card-border-color: var(--sa-line);
    --pico-card-box-shadow: var(--sa-shadow);
    --pico-accordion-border-color: var(--sa-line);
    --pico-table-border-color: var(--sa-line);
    --pico-table-row-stripped-background-color: var(--sa-surface-alt);
    --pico-dropdown-background-color: var(--sa-surface);
    --pico-dropdown-border-color: var(--sa-line);
    --pico-dropdown-color: var(--sa-ink);
    --pico-modal-overlay-background-color: #07160e66;
    font-size: 20px;
    background: var(--sa-canvas);
}
html[data-theme] body {
    background: var(--sa-canvas);
    background-image: none;
    color: var(--sa-ink);
    font-family: var(--sa-font);
    font-size: var(--sa-text-base);
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
html[data-theme] main.main-content {
    width: calc(100% - var(--sa-sidebar-width));
    max-width: calc(100% - var(--sa-sidebar-width));
    min-width: 0;
    min-height: 100dvh;
    margin-left: var(--sa-sidebar-width);
    padding: 0;
    background: var(--sa-canvas);
    color: var(--sa-ink);
}
html[data-theme] main.main-content::before,
html[data-theme] main.main-content::after,
html[data-theme] aside.sidebar::before,
html[data-theme] aside.sidebar::after { content: none; display: none; }
html[data-theme] main.main-content > * { animation: none; }
html[data-theme] :is(h1,h2,h3,h4,h5,h6):where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)) {
    color: var(--sa-ink);
    font-family: var(--sa-font);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
}
html[data-theme] main.main-content h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type,
html[data-theme] main.main-content .pg-head > h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type {
    font-size: var(--sa-text-3xl);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
    padding: 0;
    margin: 0;
    border: 0;
}
html[data-theme] main.main-content h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type::before,
html[data-theme] main.main-content .pg-head > h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type::before { display: none; content: none; }
html[data-theme] main.main-content h2 { font-size: var(--sa-text-xl); }
html[data-theme] main.main-content h3 { font-size: var(--sa-text-lg); }
html[data-theme] main.main-content .pg-head {
    align-items: center;
    gap: var(--sa-space-6);
    margin-bottom: var(--sa-space-8);
    padding: 0;
    border: 0;
}
html[data-theme] .pg-head-actions { padding: 0; gap: var(--sa-space-3); }
html[data-theme] a { color: var(--sa-link); text-underline-offset: 3px; }
html[data-theme] :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--sa-focus);
    outline-offset: 3px;
}
html[data-theme] input:focus-visible,
html[data-theme] textarea:focus-visible,
html[data-theme] select:focus-visible { outline-offset: 2px; }
html[data-theme] .sa-skip-link {
    position: fixed;
    z-index: 5000;
    top: 8px;
    left: calc(var(--sa-sidebar-width) + 16px);
    transform: translateY(-180%);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--sa-line-strong);
    border-radius: 8px;
    background: var(--sa-surface);
    color: var(--sa-ink);
    font-size: var(--sa-text-sm);
}
html[data-theme] .sa-skip-link:focus { transform: none; }
.sa-visually-hidden {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    margin: -1px!important;
    padding: 0!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}
/* One consistent set of real control boxes. Page-specific media tiles retain
   their own aspect ratios and layout via their scoped page stylesheet. */
html[data-theme] button,
html[data-theme] button[type],
html[data-theme] [type='submit'],
html[data-theme] [type='button'],
html[data-theme] [role='button'],
html[data-theme] .sa-button {
    --pico-primary-background: var(--sa-action);
    --pico-primary-border: var(--sa-action);
    --pico-primary-inverse: var(--sa-on-action);
    --pico-primary-hover-background: var(--sa-action-hover);
    --pico-primary-hover-border: var(--sa-action-hover);
    min-height: var(--sa-tap);
    border-radius: var(--sa-radius);
    font-family: var(--sa-font);
    font-size: var(--sa-text-sm);
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--sa-motion-fast) var(--sa-ease), border-color var(--sa-motion-fast) var(--sa-ease), box-shadow var(--sa-motion-fast) var(--sa-ease), transform var(--sa-motion-fast) var(--sa-ease);
}
html[data-theme] button[type='submit'],
html[data-theme] input[type='submit'],
html[data-theme] .sa-button-primary {
    color: var(--sa-on-action);
    background: var(--sa-action);
    border-color: var(--sa-action);
}
html[data-theme] .sa-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; text-decoration: none; }
html[data-theme] .sa-button-primary:hover { background: var(--sa-action-hover); border-color: var(--sa-action-hover); color: var(--sa-on-action); }
html[data-theme] button.secondary,
html[data-theme] [role='button'].secondary,
html[data-theme] button.outline,
html[data-theme] [role='button'].outline,
html[data-theme] .sa-button-secondary {
    --pico-primary-background: var(--sa-surface);
    --pico-primary-border: var(--sa-line-strong);
    --pico-primary-inverse: var(--sa-ink);
    --pico-primary-hover-background: var(--sa-surface-alt);
    --pico-primary-hover-border: var(--sa-line-strong);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line-strong);
    color: var(--sa-ink);
    box-shadow: 0 1px 2px #10201006;
}
html[data-theme] .sa-button-secondary:hover { background: var(--sa-surface-alt); color: var(--sa-ink); }
html[data-theme] .sa-button-quiet { border: 0; color: var(--sa-muted); background: transparent; box-shadow: none; }
html[data-theme] .sa-button-quiet:hover { background: var(--sa-surface-inset); color: var(--sa-ink); }
html[data-theme] :is(button,[role='button'],.sa-button):active { transform: translateY(1px); }
html[data-theme] :is(button,[role='button'],input,select,textarea):disabled,
html[data-theme] [aria-disabled='true'] { cursor: default; opacity: .55; box-shadow: none; }
html[data-theme] input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']):not([type='submit']),
html[data-theme] textarea,
html[data-theme] select {
    min-height: 44px;
    border-color: var(--sa-line-strong);
    border-radius: var(--sa-radius);
    background-color: var(--sa-surface);
    color: var(--sa-ink);
    font-family: var(--sa-font);
    font-size: var(--sa-text-sm);
    box-shadow: none;
}
html[data-theme] :is(input,textarea)::placeholder { color: var(--sa-muted); opacity: 1; }
html[data-theme] label { font-size: var(--sa-text-sm); color: var(--sa-ink); }
html[data-theme] input[aria-invalid='true'], html[data-theme] textarea[aria-invalid='true'] { border-color: var(--sa-danger); }
html[data-theme] :is(article,.sa-card) { background: var(--sa-surface); color: var(--sa-ink); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow); }
html[data-theme] :is(article,.sa-card) > :is(header,footer) { background: var(--sa-surface-alt); border-color: var(--sa-line); }
html[data-theme] .sa-card { padding: var(--sa-space-6); }
html[data-theme] .sa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--sa-line); border-radius: 999px; background: var(--sa-surface); color: var(--sa-muted); font-size: var(--sa-text-xs); line-height: 1.3; }
html[data-theme] .sa-badge-success { background: var(--sa-sage-soft); color: var(--sa-sage); }
html[data-theme] .sa-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; object-fit: cover; flex: none; border-radius: 50%; background: var(--sa-sage-soft); color: var(--sa-ink); font-size: var(--sa-text-sm); font-weight: 600; }
html[data-theme] .sa-banner,
html[data-theme] .flash { padding: 16px 20px; border: 1px solid var(--sa-line-strong); border-radius: var(--sa-radius); background: var(--sa-surface); color: var(--sa-ink); font-size: var(--sa-text-sm); box-shadow: none; }
html[data-theme] .flash.success { background: var(--sa-sage-soft); color: var(--sa-sage); border-color: var(--sa-line-strong); }
html[data-theme] .flash.error,
html[data-theme] .sa-banner-error { background: var(--sa-danger-soft); color: var(--sa-danger); border-color: color-mix(in srgb,var(--sa-danger) 35%,var(--sa-line)); }
html[data-theme] .flash.warning { background: var(--sa-warning-soft); color: var(--sa-warning); }
html[data-theme] .flash-stack { padding: 20px 32px 0; }
html[data-theme] .sa-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--sa-line); }
html[data-theme] .sa-tabs > :is(a,button) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; margin: 0; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--sa-muted); font-size: var(--sa-text-sm); font-weight: 600; box-shadow: none; text-decoration: none; }
html[data-theme] .sa-tabs > [aria-current='page'], html[data-theme] .sa-tabs > [aria-selected='true'] { color: var(--sa-ink); border-bottom-color: var(--sa-link); }
html[data-theme] .sa-segmented { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--sa-line); border-radius: 12px; background: var(--sa-surface-alt); }
html[data-theme] .sa-segmented > :is(a,button) { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; margin: 0; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--sa-muted); font-size: var(--sa-text-sm); box-shadow: none; text-decoration: none; }
html[data-theme] .sa-segmented > [aria-current='page'],html[data-theme] .sa-segmented > [aria-pressed='true'] { background: var(--sa-surface); color: var(--sa-ink); box-shadow: 0 1px 3px #10201010; }
html[data-theme] dialog[open] { border: 1px solid var(--sa-line); border-radius: var(--sa-radius-xl); background: var(--sa-surface); color: var(--sa-ink); box-shadow: var(--sa-shadow-high); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] dialog:not([open]) { display: none; }
html[data-theme] dialog::backdrop { background: #07160e66; backdrop-filter: blur(4px); }
html[data-theme] .sa-drawer[open] { position: fixed; inset: 0 0 0 auto; width: min(420px,100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0; border-radius: 0; padding: 24px 24px 80px; }
html[data-theme] .skeleton,
html[data-theme] .sa-skeleton { background: linear-gradient(110deg,var(--sa-line) 10%,var(--sa-surface) 35%,var(--sa-line) 60%); background-size: 250% 100%; border-radius: var(--sa-radius); animation: sa-gallery-shimmer 1.8s ease-in-out infinite; }
@keyframes sa-gallery-shimmer { to { background-position: -250% 0; } }
/* Shell: narrow quiet navigation, clear identity, no repeated footer controls. */
html[data-theme] aside.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: var(--sa-sidebar-width);
    height: 100dvh;
    min-height: 0;
    padding: 28px 16px 24px;
    border-right: 1px solid var(--sa-line);
    background: var(--sa-surface-alt);
    color: var(--sa-ink);
    display: flex;
    flex-direction: column;
    overflow: visible;
}
html[data-theme] aside.sidebar h2.sidebar-wordmark {
    min-height: 48px;
    margin: 0 8px 52px;
    padding: 0;
    gap: 12px;
    border: 0;
    color: var(--sa-ink);
    background: transparent;
    font-size: var(--sa-text-sm);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
html[data-theme] aside.sidebar h2.sidebar-wordmark .sidebar-wordmark-mono { width: 28px; height: 44px; object-fit: contain; }
html[data-theme] aside.sidebar h2.sidebar-wordmark .sidebar-wordmark-logo { max-width: 40px; max-height: 44px; object-fit: contain; }
html[data-theme] aside.sidebar h2.sidebar-wordmark span { min-width: 0; line-height: 1.15; white-space: normal; }
html[data-theme] aside.sidebar h2.sidebar-wordmark span::after { display: none; content: none; }
html[data-theme] aside.sidebar nav:not(.sidebar-bottom) { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0; scrollbar-width: thin; }
html[data-theme] aside.sidebar nav a { min-height: 44px; border: 0; border-radius: 8px; font-size: var(--sa-text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
html[data-theme] aside.sidebar nav > a { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 12px; min-height: 48px; background: transparent; color: var(--sa-muted); border: 0; box-shadow: none; }
html[data-theme] aside.sidebar nav > a .nav-icon { width: 20px; height: 20px; color: var(--sa-muted); opacity: 1; flex-shrink: 0; }
html[data-theme] aside.sidebar nav > a:hover { background: var(--sa-line); color: var(--sa-ink); }
html[data-theme] aside.sidebar nav > a.active { color: var(--sa-ink); background: var(--sa-surface); font-weight: 600; border: 0; box-shadow: 0 1px 3px #10201008; }
html[data-theme] aside.sidebar nav > a.active .nav-icon { color: var(--sa-link); }
html[data-theme] aside.sidebar nav a::before { display: none; content: none; }
html[data-theme] aside.sidebar details.nav-group { margin: 4px 0; padding: 0; border: 0; }
html[data-theme] aside.sidebar details.nav-group > summary,
html[data-theme] aside.sidebar .nav-label-library { display: flex; align-items: center; min-height: 44px; margin: 12px 0 4px; padding: 8px 12px; color: var(--sa-muted); font-family: var(--sa-font); font-size: var(--sa-text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-theme] aside.sidebar details.nav-group .nav-group-items { padding: 0; margin: 0; }
html[data-theme] aside.sidebar details.nav-group .nav-group-items a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px 8px 20px; color: var(--sa-muted); font-size: var(--sa-text-sm); border: 0; }
html[data-theme] aside.sidebar details.nav-group .nav-group-items a:hover,
html[data-theme] aside.sidebar details.nav-group .nav-group-items a.active { color: var(--sa-ink); background: var(--sa-surface); border: 0; }
html[data-theme] aside.sidebar nav.sidebar-bottom { flex: 0 0 auto; order: 2; margin: 20px 0 0; padding: 16px 12px 0; border-top: 1px solid var(--sa-line); background: transparent; gap: 0; }
html[data-theme] aside.sidebar nav.sidebar-bottom .sb-identity { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; color: var(--sa-muted); font-size: var(--sa-text-xs); font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
html[data-theme] aside.sidebar nav.sidebar-bottom .sb-identity-quiet { min-height: 24px; }
html[data-theme] .appbar {
    position: sticky;
    top: 0;
    z-index: 100;
    flex: 0 0 var(--sa-appbar-height);
    height: var(--sa-appbar-height);
    min-height: var(--sa-appbar-height);
    width: 100%;
    margin: 0;
    padding: 0 32px;
    border-bottom: 1px solid var(--sa-line);
    background: var(--sa-canvas);
    color: var(--sa-ink);
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
html[data-theme] .appbar-left { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: visible; gap: 12px; }
html[data-theme] .appbar-title { display: none; }
html[data-theme] .appbar-eyebrow { display: none; }
html[data-theme] .appbar-right { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 8px; margin-left: auto; }
html[data-theme] .sa-shell-icon,
html[data-theme] button.sa-shell-icon,
html[data-theme] .appbar .notif-bell-link,
html[data-theme] .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sa-muted); box-shadow: none; text-decoration: none; }
html[data-theme] .sa-shell-icon:hover,
html[data-theme] .appbar .notif-bell-link:hover { background: var(--sa-line); color: var(--sa-ink); }
html[data-theme] .sa-shell-icon .ui-icon { display: block; width: 20px; height: 20px; }
html[data-theme] .sa-theme-sun { display: none; }
html[data-theme='dark'] .sa-theme-moon { display: none; }
html[data-theme='dark'] .sa-theme-sun { display: block; }
html[data-theme] .appbar-user { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--sa-muted); border: 0; }
html[data-theme] .appbar-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--sa-line-strong); border-radius: 50%; background: var(--sa-sage-soft); color: var(--sa-ink); font-size: var(--sa-text-sm); font-weight: 650; }
html[data-theme] .appbar-user-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sa-text-xs); color: var(--sa-muted); }
html[data-theme] .appbar-signout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; margin: 0; border: 0; border-radius: 8px; font-size: var(--sa-text-sm); color: var(--sa-muted); }
html[data-theme] .appbar-signout:hover { background: var(--sa-line); color: var(--sa-ink); }
html[data-theme] .appbar-signout .ui-icon { width: 20px; height: 20px; }
html[data-theme] .notif-bell-container { position: relative; top: auto; right: auto; }
html[data-theme] .notif-dropdown { top: calc(100% + 8px); right: 0; width: min(360px,calc(100vw - 32px)); background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 12px; box-shadow: var(--sa-shadow-high); }
html[data-theme] .mobile-menu-toggle { display: none; }
html[data-theme] .ui-icon { vertical-align: middle; flex-shrink: 0; }
html[data-theme] .lab-ribbon { position: static; margin: 16px 32px 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
html[data-theme] .lab-ribbon-tag { padding: 4px 8px; border: 1px solid var(--sa-line); border-radius: 6px; font-size: var(--sa-text-xs); letter-spacing: 0; text-transform: none; color: var(--sa-muted); background: var(--sa-surface); }
html[data-theme] .bottom-tabs { display: none!important; }
@media(max-width:1100px) and (min-width:769px) {
    html[data-theme] .appbar { padding: 0 24px; }
    html[data-theme] .appbar-user-email { display: none; }
}
@media(max-width:768px) {
    html[data-theme], html:not([data-theme]) { --pico-font-size: 16px; --sa-appbar-height: 76px; font-size: 16px; }
    html[data-theme] body { font-size: var(--sa-text-base); }
    html[data-theme] main.main-content { width: 100%; max-width: 100%; margin-left: 0; padding-bottom: 80px!important; }
    html[data-theme] .appbar { position: sticky; top: 0; height: 76px; min-height: 76px; flex-basis: 76px; padding: 0 16px 0 64px; gap: 8px; }
    html[data-theme] .appbar-left { display: flex; flex: 1 1 auto; flex-direction: row; min-width: 0; gap: 0; }
    html[data-theme] .appbar-right { gap: 0; }
    html[data-theme] .appbar-search { display: none; }
    html[data-theme] .appbar-user { display: none; }
    html[data-theme] .appbar-signout { width: 44px; padding: 0; }
    html[data-theme] .appbar-signout span { display: none; }
    html[data-theme] .mobile-menu-toggle { position: fixed; top: 16px; left: 12px; z-index: 120; display: inline-flex; }
    html[data-theme] aside.sidebar { z-index: 130; width: min(280px,calc(100vw - 60px)); transform: translateX(-110%); visibility: hidden; padding: 24px 16px; transition: transform var(--sa-motion) var(--sa-ease),visibility var(--sa-motion); box-shadow: var(--sa-shadow-high); }
    html[data-theme] body.sidebar-open aside.sidebar { transform: translateX(0); visibility: visible; }
    html[data-theme] aside.sidebar h2.sidebar-wordmark { margin-bottom: 32px; }
    html[data-theme] .sidebar-overlay { position: fixed; inset: 0; z-index: 125; background: #07160e66; backdrop-filter: blur(3px); }
    html[data-theme] body.sidebar-open .sidebar-overlay { display: block; }
    html[data-theme] .sa-skip-link { left: 16px; }
    html[data-theme] main.main-content h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type,
    html[data-theme] main.main-content .pg-head > h1:where(:not(.bb-cover-title,.cb-title,.ec-title,.cs-unit,.sp-title)):first-of-type { font-size: var(--sa-text-2xl); }
    html[data-theme] main.main-content .pg-head { gap: 16px; margin-bottom: 24px; }
    html[data-theme] .flash-stack { padding: 16px 20px 0; }
    html[data-theme] dialog[open] { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    html[data-theme] .sa-drawer[open] { max-width: 100vw; max-height: 100dvh; }
    html[data-theme] .lab-ribbon { margin: 16px 20px 0!important; }
}
@media(prefers-reduced-motion:reduce) {
    html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}

/* Final Gallery cascade refinements against legacy mobile/form layers. */
html[data-theme] main.main-content :is(h1,h2,h3):where(:not(.cs-unit))::before { display: none; content: none; }
html[data-theme] main.main-content label { font-family: var(--sa-font); font-size: var(--sa-text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-theme] main.main-content :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']):not([type='submit']),textarea) { padding: 10px 12px; }
html[data-theme] main.main-content select { padding: 10px 36px 10px 12px; }
html[data-theme] .sa-tabs { justify-content: flex-start; align-items: center; }
html[data-theme] body .appbar-signout { background: transparent; }
html[data-theme] body .mobile-menu-toggle { border: 0; background: transparent; padding: 0; }
html[data-theme] .sa-nav-close { display: none; }
@media(max-width:768px) { html[data-theme] aside.sidebar .sa-nav-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 8px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sa-muted); box-shadow: none; } html[data-theme] aside.sidebar h2.sidebar-wordmark { padding-right: 28px; } }

/* Preserve the shell icon treatment against generic type=button styles. */
html[data-theme] button.mobile-menu-toggle { min-width:44px; min-height:44px; width:44px; height:44px; border:0!important; background:transparent!important; box-shadow:none; padding:0!important; }

/* Legacy Growth filled actions consume the action token in both themes.
   Match its page selector, which otherwise uses the dark link alias as fill. */
html[data-theme] main.main-content .pg-head-actions button[type].gr2-newbtn { background:var(--sa-action); border-color:var(--sa-action); color:var(--sa-on-action); }
html[data-theme] main.main-content .pg-head-actions button[type].gr2-newbtn:hover { background:var(--sa-action-hover); border-color:var(--sa-action-hover); color:var(--sa-on-action); }