:root {
    --ink: #111111;
    --ink-soft: #2d2d2d;
    --paper: #ffffff;
    --canvas: #f5f5f3;
    --surface: #ffffff;
    --surface-muted: #f0f0ee;
    --line: #dfdfdc;
    --line-dark: #c9c9c5;
    --muted: #70706c;
    --muted-light: #969692;
    --accent: #c45038;
    --accent-dark: #a13c28;
    --accent-wash: #faece8;
    --shadow: 0 18px 45px rgba(17, 17, 17, .07);
    --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --display: "Fraunces", Georgia, serif;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
}

body, input, select, textarea, button {
    font-family: var(--sans);
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1, h2, h3 {
    letter-spacing: -.04em;
}

h1, h2 {
    font-family: var(--display);
    font-weight: 600;
}

h1 {
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
    line-height: 1.05;
}

h2 {
    font-size: 1.55rem;
    line-height: 1.12;
}

h3 {
    font-size: 1rem;
}

small {
    color: var(--muted);
}

svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

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

.eyebrow {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.25;
    margin-bottom: .65rem;
}

.muted-label {
    color: var(--muted);
    font-size: .75rem;
}

.panel-intro {
    color: var(--muted);
    font-size: .9rem;
    margin-top: .55rem;
}

.button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 700;
    gap: .5rem;
    justify-content: center;
    line-height: 1;
    min-height: 43px;
    padding: .75rem 1rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:focus-visible, .nav-item:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(196, 80, 56, .28);
    outline-offset: 2px;
}

.button-dark {
    background: var(--ink);
    color: var(--paper);
}

.button-dark:hover {
    background: var(--ink-soft);
}

.button-accent {
    background: var(--accent);
    color: var(--paper);
}

.button-accent:hover {
    background: var(--accent-dark);
}

.button-muted {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--ink);
}

.button-muted:hover {
    background: #e8e8e5;
}

.quiet-link {
    color: var(--ink);
    font-size: .79rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiet-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.back-link {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 600;
    gap: .5rem;
    margin-bottom: 1.65rem;
}

.back-link:hover {
    color: var(--ink);
}

.back-link span {
    font-size: 1.15rem;
    line-height: 1;
}

/* Shared application shell */
.app-body {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    background: var(--ink);
    bottom: 0;
    color: #dadad7;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow-y: auto;
    padding: 1.35rem 1rem;
    position: fixed;
    top: 0;
    transition: transform .22s ease;
    will-change: transform;
    width: 216px;
    z-index: 20;
}

.brand {
    align-items: center;
    color: var(--paper);
    display: inline-flex;
    font-size: 1.27rem;
    font-weight: 700;
    gap: .6rem;
    letter-spacing: -.07em;
    margin: 0 .48rem 2.2rem;
    width: max-content;
}

.brand-mark {
    align-items: center;
    background: var(--paper);
    border-radius: 50%;
    color: var(--ink);
    display: inline-flex;
    font-family: var(--display);
    font-size: 1.25rem;
    font-style: italic;
    height: 27px;
    justify-content: center;
    letter-spacing: -.1em;
    padding-right: .08rem;
    width: 27px;
}

.brand-word {
    letter-spacing: -.07em;
}

.workspace-switcher {
    margin: -1.25rem .25rem 1.35rem;
    position: relative;
}

.workspace-switcher > summary {
    align-items: center;
    border: 1px solid #383836;
    border-radius: .7rem;
    color: var(--paper);
    cursor: pointer;
    display: grid;
    gap: .45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 54px;
    padding: .6rem .7rem;
    list-style: none;
}

.workspace-switcher-copy {
    display: grid;
    gap: .08rem;
    min-width: 0;
    text-align: left;
}

.workspace-switcher > summary::-webkit-details-marker {
    display: none;
}

.workspace-switcher > summary:hover,
.workspace-switcher[open] > summary {
    background: #292928;
    border-color: #4b4b48;
}

.workspace-switcher-label {
    color: #aeadab;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.workspace-switcher-copy strong {
    display: block;
    font-size: .78rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-switcher > summary svg {
    height: 16px;
    justify-self: end;
    transition: transform .18s ease;
    width: 16px;
}

.workspace-switcher[open] > summary svg {
    transform: rotate(180deg);
}

.workspace-switcher-panel {
    background: #242423;
    border: 1px solid #444440;
    border-radius: .75rem;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
    display: grid;
    gap: .2rem;
    left: 0;
    padding: .45rem;
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 35;
}

.workspace-switcher-panel > p {
    color: #aaa9a5;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .3rem .4rem .25rem;
    text-transform: uppercase;
}

.workspace-switcher-option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    color: #e8e8e5;
    display: flex;
    justify-content: space-between;
    padding: .58rem .55rem;
    text-align: left;
    width: 100%;
}

.workspace-switcher-option:hover,
.workspace-switcher-option.is-active {
    background: #363634;
}

.workspace-switcher-option strong,
.workspace-switcher-option small {
    display: block;
}

.workspace-switcher-option strong {
    font-size: .76rem;
}

.workspace-switcher-option small {
    color: #aaa9a5;
    font-size: .67rem;
    margin-top: .08rem;
}

.workspace-switcher-check {
    color: #f0c1b6;
    font-size: .85rem;
    font-weight: 700;
}

.workspace-switcher-divider {
    background: #454542;
    height: 1px;
    margin: .32rem .2rem;
}

.workspace-switcher-action {
    align-items: center;
    border-radius: .5rem;
    color: #f0c1b6;
    display: flex;
    font-size: .74rem;
    font-weight: 700;
    gap: .48rem;
    padding: .58rem .55rem;
}

.workspace-switcher-action:hover {
    background: #363634;
    color: #ffd5cc;
}

.workspace-switcher-action svg {
    height: 16px;
    width: 16px;
}

.primary-nav {
    display: grid;
    gap: .26rem;
}

.nav-item {
    align-items: center;
    border: 0;
    border-radius: .65rem;
    color: #adadaa;
    display: flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .8rem;
    min-height: 42px;
    padding: .65rem .72rem;
    text-align: left;
    transition: background .18s ease, color .18s ease;
    width: 100%;
}

a.nav-item:hover, .nav-item:hover, .nav-item.active {
    background: #292928;
    color: var(--paper);
}

.nav-item svg {
    height: 18px;
    width: 18px;
}

.nav-badge {
    align-items: center;
    background: var(--accent);
    border-radius: 999px;
    color: #fff8f4;
    display: inline-flex;
    font-size: .62rem;
    height: 18px;
    justify-content: center;
    margin-left: auto;
    min-width: 18px;
    padding: 0 .32rem;
}

.nav-divider {
    background: #343432;
    height: 1px;
    margin: .75rem .45rem;
}

.logout-form {
    margin-top: auto;
}

.logout-form .nav-item {
    background: transparent;
}

.logout-form .nav-item:hover {
    background: #292928;
}

.main-content {
    margin-left: 216px;
    min-height: 100vh;
    padding: 0 clamp(1.25rem, 4vw, 4.2rem) 4.5rem;
    transition: margin-left .22s ease;
}

.topbar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    min-height: 78px;
    position: relative;
    z-index: 20;
}

.workspace-identity {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.sidebar-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .58rem;
    color: var(--ink);
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    padding: 0;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    width: 34px;
}

.sidebar-toggle:hover {
    background: var(--surface-muted);
    border-color: var(--line-dark);
}

.sidebar-toggle svg {
    height: 18px;
    width: 18px;
}

@media (min-width: 681px) {
    html.sidebar-is-collapsed .sidebar {
        transform: translateX(-100%);
    }

    html.sidebar-is-collapsed .main-content {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .main-content {
        transition: none;
    }
}

.mobile-wordmark {
    display: none;
    font-weight: 700;
    letter-spacing: -.06em;
}

.workspace-name {
    font-size: .88rem;
    font-weight: 700;
}

.workspace-role {
    border-left: 1px solid var(--line-dark);
    color: var(--muted);
    font-size: .73rem;
    padding-left: .65rem;
}

.topbar-user {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.topbar-user strong {
    display: block;
    font-size: .78rem;
    line-height: 1.2;
}

.topbar-user small {
    display: block;
    font-size: .68rem;
    line-height: 1.3;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    align-items: center;
    background: var(--ink);
    border-radius: 50%;
    color: var(--paper);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .73rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.avatar-small {
    font-size: .66rem;
    height: 29px;
    width: 29px;
}

.flash-stack {
    display: grid;
    gap: .5rem;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(360px, calc(100vw - 2rem));
    z-index: 10;
}

.flash-message {
    align-items: center;
    background: var(--ink);
    border-radius: .7rem;
    box-shadow: 0 14px 30px rgba(17, 17, 17, .16);
    color: var(--paper);
    display: flex;
    font-size: .82rem;
    font-weight: 600;
    gap: .7rem;
    min-height: 50px;
    padding: .7rem .72rem .7rem .9rem;
}

.flash-message.error {
    background: var(--accent);
}

.flash-message-copy {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.flash-dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .42rem;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    padding: 0;
    transition: background .16s ease;
    width: 30px;
}

.flash-dismiss:hover {
    background: rgba(255, 255, 255, .14);
}

.flash-dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.flash-dismiss svg {
    height: 16px;
    width: 16px;
}

.client-notice {
    background: var(--ink);
    border-radius: .45rem;
    bottom: 1rem;
    box-shadow: var(--shadow);
    color: var(--paper);
    font-size: .78rem;
    font-weight: 600;
    left: 50%;
    max-width: calc(100% - 2rem);
    padding: .75rem .9rem;
    position: fixed;
    transform: translateX(-50%);
    z-index: 50;
}

.page-heading {
    align-items: flex-end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.7rem) 0 1.85rem;
}

.page-heading > div > p:last-child {
    color: var(--muted);
    margin-top: .65rem;
    max-width: 640px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    min-width: 0;
    padding: clamp(1.1rem, 2vw, 1.5rem);
}

.panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.panel-heading .eyebrow {
    margin-bottom: .35rem;
}

.empty-state {
    color: var(--muted);
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-state strong {
    color: var(--ink);
    display: block;
    margin-bottom: .25rem;
}

.compact-empty {
    padding: 1.15rem .25rem;
    text-align: left;
}

.compact-empty p {
    font-size: .82rem;
}

/* Dashboard */
.dashboard-heading {
    padding-bottom: 1.25rem;
}

.dashboard-date-line {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.dashboard-live-clock {
    align-items: center;
    border-left: 1px solid var(--line-dark);
    color: var(--ink-soft);
    display: inline-flex;
    font-feature-settings: "tnum" 1;
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    gap: .36rem;
    letter-spacing: .07em;
    padding-left: .65rem;
    white-space: nowrap;
}

.dashboard-live-clock::before {
    background: #6f8f70;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
}

.attention-board {
    background: var(--ink);
    border-radius: 1rem;
    color: var(--paper);
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1.25fr .5fr 1.25fr;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.2rem);
    position: relative;
}

.attention-board::after {
    border: 1px solid #3c3c3a;
    border-radius: 50%;
    content: "";
    height: 250px;
    position: absolute;
    right: -105px;
    top: -115px;
    width: 250px;
}

.attention-intro {
    position: relative;
    z-index: 1;
}

.attention-intro .eyebrow {
    color: #aaa9a5;
}

.attention-intro h2 {
    font-size: clamp(1.65rem, 2.4vw, 2.5rem);
}

.attention-intro p:last-child {
    color: #c4c4c0;
    font-size: .87rem;
    margin-top: .6rem;
    max-width: 390px;
}

.attention-count {
    align-items: center;
    border-left: 1px solid #3c3c3a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 1;
}

.attention-count strong {
    color: var(--accent);
    font-family: var(--display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: .95;
}

.attention-count span {
    color: #c4c4c0;
    font-size: .71rem;
    margin-top: .25rem;
}

.attention-breakdown {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    z-index: 1;
}

.attention-breakdown a {
    border-left: 1px solid #3c3c3a;
    display: grid;
    gap: .1rem;
    min-height: 68px;
    padding-left: .85rem;
}

.attention-breakdown strong {
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 1;
}

.attention-breakdown span {
    color: #c4c4c0;
    font-size: .66rem;
    line-height: 1.25;
}

.attention-board.has-attention .attention-breakdown a:first-child strong {
    color: var(--accent);
}

.metric-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: .85rem;
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 155px;
    padding: 1.15rem;
}

.metric-card > span {
    color: var(--muted);
    font-size: .73rem;
    font-weight: 600;
}

.metric-card > strong {
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 2.9rem);
    letter-spacing: -.07em;
    line-height: 1;
    margin: .45rem 0 auto;
}

.metric-card > small {
    font-size: .72rem;
    margin-top: auto;
}

.metric-card > a {
    font-size: .74rem;
    font-weight: 700;
    margin-top: 1rem;
}

.metric-card > a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.metric-card.metric-alert {
    border-color: rgba(196, 80, 56, .45);
}

.metric-card.metric-alert > strong, .metric-card.metric-alert > a {
    color: var(--accent);
}

.metric-currency {
    font-size: clamp(1.45rem, 2.5vw, 2.25rem) !important;
}

.dashboard-analytics {
    margin-top: 1.65rem;
}

.analytics-heading {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.analytics-heading h2 {
    font-size: clamp(1.55rem, 2.3vw, 2.15rem);
}

.analytics-heading > div > p:last-child {
    color: var(--muted);
    font-size: .84rem;
    margin-top: .42rem;
    max-width: 560px;
}

.analytics-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
}

.analytics-panel-heading {
    margin-bottom: .8rem;
}

.analytics-stat {
    color: var(--muted);
    display: grid;
    flex: 0 0 auto;
    gap: .04rem;
    text-align: right;
}

.analytics-stat strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.8rem;
    letter-spacing: -.06em;
    line-height: 1;
}

.analytics-stat small {
    font-size: .63rem;
}

.stage-chart {
    align-items: stretch;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: 205px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stage-chart-column {
    display: grid;
    gap: .35rem;
    grid-template-rows: 17px minmax(0, 1fr) 23px;
    min-width: 0;
    text-align: center;
}

.stage-chart-total {
    color: var(--ink);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.stage-chart-plot {
    align-items: flex-end;
    background: repeating-linear-gradient(to top, transparent 0, transparent 31px, var(--surface-muted) 32px);
    border-bottom: 1px solid var(--line-dark);
    display: flex;
    min-height: 0;
}

.stage-chart-bar {
    background: var(--ink);
    border-radius: .35rem .35rem 0 0;
    display: block;
    transition: height .18s ease;
    width: 100%;
}

.stage-chart-bar.is-won {
    background: #65735c;
}

.stage-chart-bar.is-lost {
    background: var(--accent);
}

.stage-chart-label {
    color: var(--muted);
    font-size: .6rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-performance-chart {
    display: grid;
}

.source-performance-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(95px, 1fr) minmax(72px, 1.15fr) 36px;
    padding: .68rem 0;
}

.source-performance-row:first-child {
    border-top: 0;
    padding-top: .15rem;
}

.source-performance-row strong {
    display: block;
    font-size: .75rem;
}

.source-performance-row small {
    display: block;
    font-size: .64rem;
    margin-top: .08rem;
}

.source-performance-row > b {
    font-size: .72rem;
    text-align: right;
}

.source-performance-track {
    background: var(--surface-muted);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.source-performance-track i {
    background: var(--accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.lead-trend-chart {
    margin: .15rem -.25rem 0;
    min-width: 0;
    position: relative;
}

.lead-trend-chart svg {
    height: 218px;
    overflow: visible;
    width: 100%;
}

.lead-trend-gridline {
    stroke: var(--line);
    stroke-width: 1;
}

.lead-trend-gridline.is-baseline {
    stroke: var(--line-dark);
}

.lead-trend-grid-label, .lead-trend-axis-label {
    fill: var(--muted);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .02em;
    stroke: none;
}

.lead-trend-axis-label {
    font-size: 10.5px;
}

.lead-trend-area {
    fill: url(#lead-trend-fill);
    stroke: none;
}

.lead-trend-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
}

.lead-trend-dot {
    cursor: default;
    fill: var(--surface);
    stroke: var(--accent);
    stroke-width: 2.4;
    transition: r .18s ease, fill .18s ease;
}

.lead-trend-dot:hover, .lead-trend-dot.is-active, .lead-trend-dot:focus-visible {
    fill: var(--accent);
    r: 5;
}

.lead-trend-tooltip {
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: .65rem;
    box-shadow: 0 12px 30px rgba(17, 17, 17, .22);
    color: var(--paper);
    display: grid;
    gap: .18rem;
    left: 0;
    max-width: min(220px, calc(100% - 1rem));
    padding: .64rem .72rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    white-space: nowrap;
    z-index: 2;
}

.lead-trend-tooltip[hidden] {
    display: none;
}

.lead-trend-tooltip strong {
    color: var(--paper);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
}

.lead-trend-tooltip span {
    color: #c7c7c2;
    font-size: .67rem;
    line-height: 1.2;
}

.lead-trend-footnote {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: space-between;
}

.lead-trend-footnote .quiet-link {
    font-size: inherit;
}

.overview-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
    margin-top: .85rem;
}

.priority-panel, .lead-trend-panel, .recent-panel {
    grid-column: 1 / 2;
}

.pipeline-panel, .team-panel {
    grid-column: 2 / 3;
}

.watch-panel, .recent-panel {
    grid-column: 1 / -1;
}

.task-list {
    display: grid;
}

.task-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .75rem;
    grid-template-columns: 9px 1fr auto;
    padding: .78rem 0;
}

.task-row:first-child {
    border-top: 0;
}

.task-row:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.task-row strong {
    font-size: .85rem;
}

.task-row small {
    display: block;
    font-size: .72rem;
    margin-top: .08rem;
}

.task-row time {
    color: var(--muted);
    font-size: .69rem;
    text-align: right;
}

.status-dot {
    background: #8e8e89;
    border-radius: 50%;
    display: block;
    height: 7px;
    width: 7px;
}

.status-dot.is-overdue {
    background: var(--accent);
}

.is-overdue {
    color: var(--accent) !important;
}

.stage-summary {
    display: grid;
    gap: .78rem;
}

.stage-summary-row {
    align-items: center;
    color: var(--muted);
    display: grid;
    font-size: .72rem;
    gap: .55rem;
    grid-template-columns: 85px 1fr 20px;
}

.stage-summary-row strong {
    color: var(--ink);
    text-align: right;
}

.neutral-bar {
    background: var(--surface-muted);
    border-radius: 999px;
    height: 5px;
    overflow: hidden;
}

.neutral-bar i {
    background: var(--ink);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.panel-footnote {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    margin-top: 1.15rem;
    padding-top: .85rem;
}

.team-pulse-list {
    display: grid;
}

.team-pulse-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .65rem;
    grid-template-columns: auto 1fr auto;
    padding: .67rem 0;
}

.team-pulse-row:first-child {
    border-top: 0;
}

.team-pulse-row strong {
    display: block;
    font-size: .8rem;
}

.team-pulse-row small {
    display: block;
    font-size: .68rem;
}

.team-pulse-meta {
    color: var(--muted);
    font-size: .67rem;
    text-align: right;
}

.team-pulse-row.needs-attention .team-pulse-meta b {
    color: var(--accent);
    font-weight: 700;
}

.watch-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.watch-row {
    border-left: 1px solid var(--line);
    display: grid;
    gap: .12rem;
    min-height: 86px;
    padding: .2rem .85rem;
}

.watch-row:first-child {
    border-left: 0;
    padding-left: 0;
}

.watch-row > span {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.watch-row.alert-row > span {
    color: var(--accent);
}

.watch-row strong {
    font-size: .84rem;
}

.watch-row small {
    font-size: .69rem;
}

.table-wrap {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    min-width: 620px;
    width: 100%;
}

th {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 0 .7rem .65rem;
    text-align: left;
    text-transform: uppercase;
}

td {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .77rem;
    padding: .8rem .7rem;
}

th:first-child, td:first-child {
    padding-left: 0;
}

.table-lead-link strong {
    display: block;
    font-size: .8rem;
}

.table-lead-link small {
    display: block;
    font-size: .67rem;
    margin-top: .08rem;
}

.table-lead-link:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stage-pill {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-block;
    font-size: .65rem;
    font-weight: 600;
    padding: .25rem .5rem;
    white-space: nowrap;
}

.stage-pill-large {
    font-size: .72rem;
    padding: .38rem .7rem;
}

/* Lead board */
.lead-board-heading {
    padding-bottom: 1.2rem;
}

.lead-filter {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin-bottom: .85rem;
}

.search-field {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .6rem;
    display: flex;
    flex: 1;
    max-width: 440px;
    padding-left: .7rem;
}

.search-field svg {
    color: var(--muted);
    height: 16px;
    width: 16px;
}

.search-field input {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    width: 100%;
}

.select-field select {
    min-width: 145px;
}

input, select, textarea {
    background: var(--paper);
    border: 1px solid var(--line-dark);
    border-radius: .55rem;
    color: var(--ink);
    line-height: 1.25;
    min-height: 42px;
    padding: .65rem .7rem;
    transition: border-color .16s ease, box-shadow .16s ease;
    width: 100%;
}

textarea {
    min-height: 84px;
    resize: vertical;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .07);
    outline: 0;
}

input::placeholder, textarea::placeholder {
    color: #aaa9a5;
}

.clear-filter {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    padding: .5rem;
}

.clear-filter:hover {
    color: var(--ink);
    text-decoration: underline;
}

.board-help {
    color: var(--muted);
    font-size: .75rem;
    margin: 1.25rem 0 .6rem;
}

.kanban-scroll {
    --kanban-column-height: clamp(500px, calc(100vh - 255px), 720px);
    overflow-x: auto;
    padding-bottom: .8rem;
}

.kanban-board {
    align-items: flex-start;
    display: flex;
    gap: .7rem;
    min-width: max-content;
}

.kanban-column {
    background: #ebebe8;
    border: 1px solid var(--line);
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    height: var(--kanban-column-height);
    width: 258px;
}

.kanban-column > header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: .45rem;
    grid-template-columns: auto 1fr auto;
    padding: .75rem;
}

.kanban-column > header h2 {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.kanban-column > header strong {
    color: var(--muted);
    font-size: .72rem;
}

.stage-number {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.terminal-column {
    background: #e5e5e2;
}

.kanban-dropzone {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: .5rem;
    min-height: 0;
    overflow-y: auto;
    padding: .55rem;
    transition: background .18s ease, outline-color .18s ease;
}

.kanban-column.is-drop-target .kanban-dropzone {
    background: rgba(17, 17, 17, .06);
    outline: 1px dashed #868681;
    outline-offset: -5px;
}

.lead-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .62rem;
    box-shadow: 0 1px 0 rgba(17, 17, 17, .03);
    cursor: grab;
    transition: box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}

.lead-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.lead-card.is-dragging {
    cursor: grabbing;
    opacity: .45;
}

.lead-card-link {
    display: block;
    padding: .78rem;
}

.lead-card-top {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.lead-card-top strong {
    font-size: .83rem;
}

.lead-card-arrow {
    color: var(--muted);
    font-size: .78rem;
}

.lead-card p {
    color: var(--muted);
    font-size: .68rem;
    margin-top: .18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card-meta {
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: .63rem;
    justify-content: space-between;
    margin-top: .7rem;
    padding-top: .55rem;
}

.column-empty {
    color: var(--muted);
    font-size: .7rem;
    padding: .7rem .25rem;
    text-align: center;
}

.kanban-column-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: .65rem;
    gap: .45rem;
    justify-content: space-between;
    padding: .6rem .7rem;
}

.kanban-column-actions {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.kanban-load-more, .kanban-view-all {
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
}

.kanban-load-more:hover, .kanban-view-all:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kanban-load-more:disabled {
    cursor: wait;
    opacity: .55;
}

.lead-stage-heading .back-link {
    margin-bottom: .85rem;
}

.lead-stage-filter .search-field {
    max-width: 330px;
}

.lead-stage-table-panel {
    margin-top: 1.2rem;
}

.stage-list-empty {
    color: var(--muted);
    padding: 2rem .7rem;
    text-align: center;
}

.pagination {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: .72rem;
    font-weight: 600;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.pagination a {
    color: var(--ink-soft);
}

.pagination a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.board-empty-state {
    align-items: center;
    background: var(--surface);
    border: 1px dashed var(--line-dark);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    margin: 1.4rem auto;
    max-width: 600px;
    padding: clamp(2.3rem, 6vw, 5rem) 1.3rem;
    text-align: center;
}

.board-empty-state h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.board-empty-state > p:not(.eyebrow) {
    color: var(--muted);
    margin: .75rem 0 1.45rem;
    max-width: 410px;
}

/* Fast capture and lead detail */
.quick-add-layout {
    align-items: center;
    display: grid;
    gap: clamp(1.4rem, 5vw, 5rem);
    grid-template-columns: minmax(0, .9fr) minmax(360px, .8fr);
    min-height: calc(100vh - 78px);
    padding: 2.5rem 0;
}

.quick-add-copy h1 {
    max-width: 520px;
}

.quick-add-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1rem;
    margin-top: 1rem;
    max-width: 500px;
}

.quick-add-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: clamp(1.2rem, 3vw, 2.1rem);
}

.quick-add-form {
    display: grid;
    gap: 1rem;
}

.quick-add-form .button {
    margin-top: .35rem;
}

.field {
    display: grid;
    gap: .38rem;
}

.field > span:first-child,
.field > label {
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
}

.field > span b {
    color: var(--accent);
    padding-left: .15rem;
}

.field-hint {
    font-size: .67rem;
}

.stacked-form {
    display: grid;
    gap: .92rem;
    margin-top: 1.25rem;
}

.form-errors {
    background: var(--accent-wash);
    border-left: 3px solid var(--accent);
    color: var(--accent-dark);
    font-size: .78rem;
    padding: .7rem .8rem;
}

.form-error {
    color: var(--accent-dark);
    font-size: .7rem;
    font-weight: 600;
}

.detail-back-link {
    margin-top: 1.45rem;
}

.lead-detail-heading {
    align-items: flex-end;
    display: flex;
    gap: 1.3rem;
    justify-content: space-between;
    padding-bottom: 1.3rem;
}

.lead-detail-heading > div > p:last-child {
    color: var(--muted);
    font-size: .88rem;
    margin-top: .45rem;
}

.lead-heading-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.lead-heading-meta small {
    font-size: .7rem;
}

.lead-command-card {
    align-items: start;
    background: var(--ink);
    border-radius: 1rem;
    color: var(--paper);
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(170px, .75fr) minmax(330px, 1.35fr);
    margin-bottom: .9rem;
    padding: clamp(1.15rem, 2.5vw, 1.7rem);
}

.lead-command-card .eyebrow {
    color: #aaa9a5;
}

.lead-command-card h2 {
    font-size: 1.55rem;
}

.lead-command-card > div > p:last-child {
    color: #c4c4c0;
    font-size: .78rem;
    margin-top: .5rem;
}

.stage-change-form {
    align-items: end;
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr 1fr 1.2fr auto;
}

.stage-change-form .field > span {
    color: #dadad7;
}

.stage-change-form input,
.stage-change-form select,
.stage-change-form textarea {
  background: #282826;
  border-color: #4a4a47;
  color: var(--paper);
  height: 39px;
  min-height: 39px;
}

.stage-change-form textarea {
  height: 39px;
  min-height: 39px;
  max-height: 39px;
  padding-top: .6rem;
  resize: none;
  overflow-y: hidden;
}

.stage-change-form .button {
    min-height: 39px;
}

.needs-time-form {
    grid-column: 2 / 3;
}

.needs-time-form .button {
    font-size: .72rem;
    min-height: 34px;
    padding: .55rem .75rem;
}

.lead-detail-grid {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
}

.lead-detail-main, .lead-detail-sidebar {
    display: grid;
    gap: .85rem;
}

.lead-workflow-panels {
    display: grid;
    gap: .85rem;
}

.activity-form {
    align-items: end;
    display: grid;
    gap: .7rem;
    grid-template-columns: 130px 1fr auto;
}

.activity-note textarea {
  height: 42px;
  min-height: 45px;
  max-height: 39px;
  padding-top: .6rem;
  resize: none;
  overflow-y: hidden;
}

.timeline {
    display: grid;
}

.timeline-item {
    border-top: 1px solid var(--line);
    display: grid;
    gap: .75rem;
    grid-template-columns: 10px 1fr;
    padding: .85rem 0;
}

.timeline-item:first-child {
    border-top: 0;
}

.timeline-dot {
    background: #90908b;
    border-radius: 50%;
    height: 7px;
    margin-top: .42rem;
    width: 7px;
}

.timeline-dot.stage-change {
    background: var(--accent);
}

.timeline-item-top {
    align-items: center;
    display: flex;
    gap: .7rem;
    justify-content: space-between;
}

.timeline-item strong {
    font-size: .8rem;
}

.timeline-item time {
    color: var(--muted);
    font-size: .66rem;
}

.timeline-item p {
    color: var(--ink-soft);
    font-size: .79rem;
    margin-top: .18rem;
}

.timeline-item small {
    display: block;
    font-size: .65rem;
    margin-top: .25rem;
}

.details-form {
    display: grid;
    gap: .8rem;
}

.details-form .button {
    justify-self: start;
    margin-top: .25rem;
}

.task-count {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.lead-task-list {
    display: grid;
}

.lead-task {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .6rem;
    grid-template-columns: 8px 1fr;
    padding: .7rem 0;
}

.lead-task:first-child {
    border-top: 0;
}

.lead-task strong {
    display: block;
    font-size: .75rem;
}

.lead-task small {
    display: block;
    font-size: .65rem;
    margin-top: .12rem;
}

.schedule-follow-up {
    border-top: 1px solid var(--line);
    margin-top: .35rem;
    padding-top: .75rem;
}

.schedule-follow-up summary, .task-action-details summary {
    color: var(--ink);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    list-style: none;
}

.schedule-follow-up summary::-webkit-details-marker, .task-action-details summary::-webkit-details-marker {
    display: none;
}

.schedule-follow-up summary {
    display: flex;
    justify-content: space-between;
}

.schedule-follow-up[open] summary {
    margin-bottom: .8rem;
}

.inline-form {
    display: grid;
    gap: .65rem;
    margin-top: .65rem;
}

.inline-form .button {
    justify-self: start;
}

/* Follow-up queue */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}

.filter {
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    padding: .48rem .75rem;
}

.filter:hover, .filter.selected {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.task-queue-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: visible;
}

.task-queue-heading {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    display: grid;
    font-size: .63rem;
    font-weight: 700;
    gap: 1rem;
    grid-template-columns: 1fr 1.2fr .88fr .95fr;
    letter-spacing: .08em;
    padding: .8rem 1rem;
    text-transform: uppercase;
}

.task-queue-row {
    align-items: start;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1.2fr .88fr .95fr;
    padding: 1rem;
}

.task-queue-row:last-child {
    border-bottom: 0;
}

.task-queue-row.is-overdue {
    background: linear-gradient(90deg, var(--accent-wash), transparent 45%);
}

.task-lead {
    align-items: flex-start;
    display: grid;
    gap: .55rem;
    grid-template-columns: 8px 1fr;
}

.task-lead strong {
    display: block;
    font-size: .79rem;
}

.task-lead small {
    display: block;
    font-size: .67rem;
    margin-top: .12rem;
}

.task-queue-row > p {
    color: var(--ink-soft);
    font-size: .78rem;
}

.task-queue-row > time {
    color: var(--muted);
    font-size: .68rem;
}

.task-queue-row > time b {
    color: var(--accent);
    font-size: .66rem;
    text-transform: uppercase;
}

.task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-start;
}

.task-action-details {
    position: relative;
}

.task-action-details summary {
    border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-size: .7rem;
    padding-bottom: .1rem;
    white-space: nowrap;
}

.task-action-details[open] > form {
    background: var(--paper);
    border: 1px solid var(--line-dark);
    border-radius: .65rem;
    box-shadow: var(--shadow);
    min-width: 250px;
    padding: .8rem;
    position: absolute;
    right: 0;
    top: 1.4rem;
    z-index: 5;
}

.task-empty-state {
    padding: 4rem 1.2rem;
    text-align: center;
}

.task-empty-state h2 {
    font-size: 2rem;
}

.task-empty-state > p:last-child {
    color: var(--muted);
    margin: .55rem auto 0;
    max-width: 390px;
}

.notification-workspace {
    margin-top: 1.2rem;
    padding: 0;
}

body.notification-page .notification-overview {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .8rem;
    display: grid;
    flex: 0 0 auto;
    gap: .04rem;
    grid-template-columns: auto auto;
    min-width: 148px;
    padding: .62rem .8rem;
}

body.notification-page .notification-overview > span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.notification-page .notification-overview strong {
    font-size: 1.52rem;
    letter-spacing: -.06em;
    line-height: 1;
}

body.notification-page .notification-overview em {
    color: var(--accent);
    font-size: .63rem;
    font-style: normal;
    font-weight: 700;
    grid-column: 1 / -1;
}

.notification-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .9rem 1.1rem;
}

body.notification-page .notification-filter-tabs {
    align-items: center;
    background: #efefed;
    border: 1px solid #e3e3e0;
    border-radius: .7rem;
    display: inline-flex;
    gap: .22rem;
    padding: .22rem;
}

body.notification-page .notification-filter-tab {
    align-items: center;
    border-radius: .5rem;
    color: var(--muted);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    gap: .42rem;
    min-height: 30px;
    padding: .38rem .55rem;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease;
    white-space: nowrap;
}

body.notification-page .notification-filter-tab b {
    align-items: center;
    background: #ddddda;
    border-radius: 99px;
    color: #5c5c58;
    display: inline-flex;
    font-size: .59rem;
    height: 17px;
    justify-content: center;
    min-width: 17px;
    padding: 0 .28rem;
}

body.notification-page .notification-filter-tab:hover {
    background: rgba(255, 255, 255, .72);
    color: var(--ink);
}

body.notification-page .notification-filter-tab.is-active {
    background: var(--ink);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .16);
    color: var(--paper);
}

body.notification-page .notification-filter-tab.is-active b {
    background: rgba(255, 255, 255, .18);
    color: var(--paper);
}

.notification-list {
    display: grid;
}

.notification-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .9rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1rem 1.1rem;
}

.notification-row:first-child {
    border-top: 0;
}

.notification-row.is-unread {
    background: #fff8f5;
}

.notification-mark {
    align-items: center;
    background: #f6d9d1;
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.notification-copy .eyebrow {
    color: var(--accent);
    font-size: .59rem;
}

.notification-copy h2 {
    font-size: 1rem;
    margin-top: .12rem;
}

.notification-copy > p:not(.eyebrow),
.notification-copy small {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    margin-top: .2rem;
}

.notification-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.notification-actions form {
    margin: 0;
}

.notification-read {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

@media (max-width: 680px) {
    .notification-toolbar,
    .notification-row {
        align-items: flex-start;
    }

    .notification-toolbar {
        flex-direction: column;
    }

    body.notification-page .notification-overview {
        min-width: 0;
        width: 100%;
    }

    body.notification-page .notification-filter-tabs {
        max-width: 100%;
        overflow-x: auto;
        width: 100%;
    }

    body.notification-page .notification-filter-tab {
        flex: 1 0 auto;
        justify-content: center;
    }

    .notification-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .notification-actions {
        grid-column: 2;
    }
}

/* Campaign builder refresh */
.campaign-builder {
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
    max-width: 1280px;
}

.campaign-editor-column {
    display: grid;
    gap: .9rem;
    min-width: 0;
}

.campaign-builder-card {
    padding: clamp(1.25rem, 2.5vw, 1.8rem);
}

.campaign-section-heading > div:first-child {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.campaign-section-heading .eyebrow {
    margin-bottom: .12rem;
}

.campaign-step-label {
    align-items: center;
    background: var(--ink);
    border-radius: 50%;
    color: var(--paper);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.campaign-section-note,
.campaign-card-heading > span {
    color: var(--muted);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.campaign-label-row,
.campaign-field-meta {
    align-items: center;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
}

.campaign-label-row > span,
.campaign-field > span:first-child {
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
}

.campaign-label-row b,
.campaign-field b {
    color: var(--accent);
}

.campaign-input-with-action {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.campaign-input-with-action input {
    border-radius: .55rem 0 0 .55rem;
}

.campaign-variable-picker {
    background: var(--surface-muted);
    border-left: 0;
    border-radius: 0 .55rem .55rem 0;
    color: var(--ink-soft);
    font-size: .68rem;
    min-height: 42px;
    padding-left: .55rem;
    padding-right: .35rem;
    width: 130px;
}

.campaign-field-meta {
    margin-top: -.1rem;
}

.campaign-field-meta small,
.campaign-field-meta span {
    color: var(--muted);
    font-size: .65rem;
}

.campaign-field-meta span {
    font-variant-numeric: tabular-nums;
}

.campaign-field-meta span.is-near-limit {
    color: var(--accent);
    font-weight: 700;
}

.campaign-body-field {
    margin-top: 1.25rem;
}

.campaign-editor-shell {
    border: 1px solid var(--line-dark);
    border-radius: .65rem;
    margin-top: .4rem;
    overflow: hidden;
}

.campaign-editor-toolbar {
    align-items: center;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .18rem;
    padding: .38rem .45rem;
}

.campaign-editor-toolbar button {
    background: transparent;
    border: 0;
    border-radius: .35rem;
    color: var(--ink-soft);
    font-size: .72rem;
    min-height: 28px;
    min-width: 28px;
    padding: .25rem .4rem;
}

.campaign-editor-toolbar button:hover,
.campaign-editor-toolbar button:focus-visible {
    background: var(--paper);
    outline: 0;
}

.campaign-editor-toolbar span {
    flex: 1;
}

.campaign-editor-toolbar small {
    font-size: .62rem;
}

.campaign-rich-editor {
    background: var(--paper);
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.65;
    min-height: 245px;
    outline: 0;
    overflow-wrap: anywhere;
    padding: 1rem;
}

.campaign-rich-editor:focus {
    box-shadow: inset 0 0 0 2px rgba(17, 17, 17, .08);
}

.campaign-rich-editor p {
    margin: 0 0 .75rem;
}

.campaign-rich-editor p:last-child {
    margin-bottom: 0;
}

.campaign-fallback-editor textarea {
    border: 0;
    border-radius: 0;
    min-height: 245px;
}

.campaign-builder:not(.campaign-editor-ready) .campaign-rich-editor,
.campaign-editor-ready .campaign-fallback-editor {
    display: none;
}

.campaign-advanced {
    margin-top: 1.35rem;
}

.campaign-advanced summary {
    align-items: center;
    display: flex;
    gap: .55rem;
    justify-content: space-between;
    list-style: none;
}

.campaign-advanced summary::-webkit-details-marker {
    display: none;
}

.campaign-advanced summary::after {
    color: var(--muted);
    content: "⌄";
    font-size: 1rem;
    transition: transform .16s ease;
}

.campaign-advanced[open] summary::after {
    transform: rotate(180deg);
}

.campaign-advanced summary span {
    font-size: .78rem;
}

.campaign-advanced summary small {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 500;
    margin-left: auto;
}

.campaign-advanced-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: .85rem;
}

.campaign-dropzone {
    align-items: center;
    background: var(--surface-muted);
    border: 1px dashed var(--line-dark);
    border-radius: .7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    justify-content: center;
    min-height: 130px;
    padding: 1rem;
    text-align: center;
    transition: background .16s ease, border-color .16s ease;
}

.campaign-dropzone:hover,
.campaign-dropzone.is-dragging {
    background: #fcf3ef;
    border-color: var(--accent);
}

.campaign-dropzone input[type="file"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.campaign-dropzone-icon {
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    font-size: 1.2rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.campaign-dropzone strong {
    font-size: .76rem;
}

.campaign-dropzone small {
    font-size: .64rem;
}

.campaign-file-list {
    display: grid;
    gap: .4rem;
    margin-top: .55rem;
}

.campaign-file-chip {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .5rem;
    display: flex;
    font-size: .7rem;
    gap: .55rem;
    justify-content: space-between;
    padding: .45rem .55rem;
}

.campaign-file-chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-file-chip small {
    color: var(--muted);
    flex: 0 0 auto;
}

.campaign-file-chip button {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1;
    padding: .1rem;
}

.campaign-usage {
    display: grid;
    gap: .3rem;
    margin-top: .55rem;
}

.campaign-usage span {
    color: var(--muted);
    font-size: .62rem;
}

.campaign-usage i {
    background: var(--line);
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
}

.campaign-usage b {
    background: var(--accent);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .16s ease;
    width: 0;
}

.campaign-audience-card {
    min-height: 0;
}

.campaign-audience-card .campaign-section-heading {
    margin-bottom: .75rem;
}

.campaign-audience-excluded {
    color: #aaa9a5;
    font-size: .68rem;
    line-height: 1.45;
    margin-top: .85rem;
}

.campaign-view-recipients {
    border-top: 1px solid #3c3c3a;
    color: #f0c1b6;
    display: flex;
    font-size: .7rem;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: .8rem;
}

.campaign-chip-filter {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .55rem;
    display: flex;
    gap: .55rem;
    margin-top: .55rem;
    padding-left: .65rem;
}

.campaign-chip-filter > span {
    color: var(--muted);
    flex: 0 0 72px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.campaign-chip-filter select {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: .76rem;
    min-height: 38px;
    padding-left: 0;
}

.campaign-segmented {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: .2rem;
}

.campaign-segmented button {
    background: transparent;
    border: 0;
    border-radius: .4rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    padding: .55rem .4rem;
}

.campaign-segmented button.is-active {
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(17, 17, 17, .07);
    color: var(--ink);
}

.campaign-schedule-field {
    margin-top: .85rem;
}

.campaign-delivery-note {
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.45;
    margin-top: .8rem;
}

.campaign-review-summary {
    background: var(--surface-muted);
    border-radius: .65rem;
    display: grid;
    gap: .25rem;
    padding: .85rem;
}

.campaign-review-summary strong {
    font-size: .75rem;
}

.campaign-review-summary span {
    color: var(--muted);
    font-size: .68rem;
}

.campaign-sticky-bar {
    backdrop-filter: blur(12px);
    background: rgba(245, 245, 243, .92);
    border: 1px solid var(--line);
    border-radius: .8rem;
    bottom: .8rem;
    box-shadow: 0 14px 35px rgba(17, 17, 17, .1);
    margin-top: .15rem;
    padding: .7rem .85rem;
    position: sticky;
    z-index: 4;
}

.campaign-draft-status {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
    margin-right: auto;
}

.campaign-draft-status.is-saved {
    color: #4f7b53;
}

.campaign-preview-tabs {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .25rem;
    margin-top: .8rem;
}

.campaign-preview-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    padding: .45rem .55rem .55rem;
}

.campaign-preview-tabs button.is-active {
    border-color: var(--accent);
    color: var(--ink);
}

.campaign-preview-frame {
    transition: max-width .2s ease;
}

.campaign-preview-frame[data-preview-mode="mobile"] {
    margin: 0 auto;
    max-width: 320px;
}

.campaign-preview-frame[data-preview-mode="plain"] .campaign-inbox-preview,
.campaign-preview-frame[data-preview-mode="plain"] [data-campaign-html-preview] {
    display: none;
}

.campaign-plain-preview {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .65rem;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: .72rem;
    line-height: 1.55;
    margin-top: .65rem;
    min-height: 190px;
    padding: .85rem;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .campaign-builder {
        grid-template-columns: 1fr;
    }

    .campaign-compose-sidebar {
        position: static;
    }
}

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

    .campaign-sticky-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .campaign-sticky-bar .campaign-draft-status {
        flex-basis: 100%;
    }

    .campaign-sticky-bar .button {
        flex: 1 1 calc(50% - .6rem);
    }
}

/* Final campaign composer surface: quieter hierarchy, fewer competing cards. */
.campaign-builder-clean {
    align-items: start;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    max-width: 1240px;
}

.campaign-page-heading-clean {
    padding-bottom: 1.35rem;
}

.campaign-title-row {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.campaign-draft-badge {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    padding: .27rem .55rem;
    text-transform: uppercase;
}

.campaign-message-surface,
.campaign-rail-surface {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    min-width: 0;
}

.campaign-message-surface {
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.campaign-surface-header,
.campaign-rail-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.campaign-surface-title,
.campaign-rail-heading > div {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.campaign-surface-header h2,
.campaign-rail-heading h2 {
    font-size: 1.22rem;
    margin-top: .12rem;
}

.campaign-surface-caption,
.campaign-preview-sample {
    color: var(--muted);
    font-size: .65rem;
    padding-top: .3rem;
}

.campaign-builder-clean .campaign-field {
    gap: .4rem;
    margin-top: 1.15rem;
}

.campaign-builder-clean .campaign-subject-field {
    margin-top: 1.8rem;
}

.campaign-builder-clean .campaign-label-row {
    margin-bottom: .05rem;
}

.campaign-field-meta-inline {
    color: var(--muted);
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.campaign-body-hint {
    color: var(--muted);
    display: flex;
    font-size: .65rem;
    gap: .75rem;
    justify-content: space-between;
    margin-top: .5rem;
}

.campaign-body-hint code {
    color: var(--ink-soft);
    font-size: .63rem;
}

.campaign-builder-clean .campaign-advanced-clean {
    border-top: 1px solid var(--line);
    margin-top: 1.7rem;
    padding-top: 1rem;
}

.campaign-advanced-clean summary {
    color: var(--ink-soft);
    font-size: .76rem;
}

.campaign-advanced-clean summary small {
    color: var(--muted);
}

.campaign-rail-clean {
    gap: .75rem;
    position: sticky;
    top: 1rem;
}

.campaign-rail-surface {
    padding: 1.15rem 1.25rem;
}

.campaign-rail-heading .campaign-step-label {
    height: 25px;
    width: 25px;
}

.campaign-rail-heading > a {
    color: var(--accent-dark);
    font-size: .68rem;
    font-weight: 700;
    padding-top: .25rem;
}

.campaign-audience-clean {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.campaign-audience-clean .eyebrow,
.campaign-audience-clean .campaign-preview-sample {
    color: #aaa9a5;
}

.campaign-audience-clean .campaign-step-label {
    background: #363634;
    color: #f0c1b6;
}

.campaign-audience-clean h2 {
    color: var(--paper);
}

.campaign-audience-number {
    align-items: baseline;
    border-bottom: 1px solid #3c3c3a;
    display: flex;
    gap: .55rem;
    margin-top: 1.15rem;
    padding-bottom: .85rem;
}

.campaign-audience-number strong {
    color: #f0c1b6;
    font-family: var(--display);
    font-size: 2.8rem;
    letter-spacing: -.08em;
    line-height: .9;
}

.campaign-audience-number span {
    color: #d0d0cc;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.campaign-audience-clean > p {
    color: #aaa9a5;
    font-size: .66rem;
    margin-top: .7rem;
}

.campaign-filter-stack {
    display: grid;
    gap: .45rem;
    margin-top: .9rem;
}

.campaign-filter-stack .campaign-chip-filter {
    background: #292928;
    border-color: #454542;
    margin-top: 0;
}

.campaign-filter-stack .campaign-chip-filter > span {
    color: #aaa9a5;
}

.campaign-filter-stack .campaign-chip-filter select {
    color: var(--paper);
}

.campaign-filter-stack .campaign-chip-filter select option {
    color: var(--ink);
}

.campaign-delivery-clean .campaign-rail-heading,
.campaign-test-clean .campaign-rail-heading {
    margin-bottom: .9rem;
}

.campaign-delivery-clean .campaign-delivery-note {
    margin-bottom: 0;
}

.campaign-test-clean .campaign-field {
    margin-top: .75rem;
}

.campaign-preview-clean {
    padding-bottom: .9rem;
}

.campaign-preview-clean .campaign-preview-tabs {
    margin-top: .65rem;
}

.campaign-preview-clean .campaign-inbox-preview {
    margin-top: .65rem;
}

.campaign-sticky-bar-clean {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border-radius: .7rem;
    gap: .55rem;
    grid-column: 1 / -1;
    padding: .65rem .75rem;
}

.campaign-review-inline {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin-right: auto;
}

.campaign-review-inline strong {
    font-size: .74rem;
}

.campaign-review-inline span {
    color: var(--muted);
    font-size: .66rem;
}

.campaign-sticky-bar-clean .campaign-draft-status {
    border-left: 1px solid var(--line);
    margin: 0 .35rem 0 0;
    padding-left: .7rem;
}

@media (max-width: 900px) {
    .campaign-builder-clean {
        grid-template-columns: 1fr;
    }

    .campaign-rail-clean {
        position: static;
    }
}

@media (max-width: 600px) {
    .campaign-surface-caption,
    .campaign-review-inline span {
        display: none;
    }

    .campaign-body-hint {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }

    .campaign-sticky-bar-clean {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .campaign-review-inline,
    .campaign-sticky-bar-clean .campaign-draft-status {
        flex-basis: 100%;
        margin: 0;
    }

    .campaign-sticky-bar-clean .campaign-draft-status {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: .55rem 0 0;
    }

    .campaign-sticky-bar-clean .button {
        flex: 1 1 calc(50% - .55rem);
    }
}

/* Email campaigns */
.campaign-page-heading {
    padding-bottom: 1.4rem;
}

.campaign-compose-form {
    align-items: start;
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
}

.campaign-form-error {
    grid-column: 1 / -1;
}

.campaign-editor-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.campaign-compose-sidebar {
    display: grid;
    gap: .9rem;
    position: sticky;
    top: 1rem;
}

.campaign-section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.campaign-section-heading h2 {
    font-size: 1.35rem;
    margin-top: .1rem;
}

.campaign-step {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    display: inline-flex;
    font-size: .65rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.campaign-field {
    display: grid;
    gap: .38rem;
    margin-top: 1rem;
}

.campaign-field > span:first-child {
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
}

.campaign-field textarea[name="body"] {
    min-height: 235px;
}

.campaign-advanced {
    border-top: 1px solid var(--line);
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.campaign-advanced summary {
    color: var(--ink-soft);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    list-style-position: inside;
}

.campaign-advanced summary span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 500;
    margin-left: .35rem;
}

.campaign-advanced-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr);
    margin-top: .35rem;
}

.campaign-preview-card {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .8rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.campaign-preview-card .eyebrow {
    margin-bottom: .12rem;
}

.campaign-inbox-preview {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .65rem;
    display: grid;
    gap: .15rem;
    margin-top: .8rem;
    padding: .75rem .85rem;
}

.campaign-inbox-preview small {
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.campaign-inbox-preview strong {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-inbox-preview span {
    color: var(--muted);
    font-size: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-email-preview {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .65rem;
    margin-top: .65rem;
    overflow: hidden;
}

.campaign-email-preview-top {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .55rem;
    padding: .75rem .85rem;
}

.campaign-preview-brand {
    align-items: center;
    background: var(--ink);
    border-radius: .35rem;
    color: var(--paper);
    display: inline-flex;
    font-family: var(--display);
    font-size: 1.05rem;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.campaign-email-preview-top strong,
.campaign-email-preview-top small {
    display: block;
}

.campaign-email-preview-top strong {
    font-size: .73rem;
}

.campaign-email-preview-top small {
    font-size: .62rem;
    margin-top: .05rem;
}

.campaign-preview-body {
    color: var(--ink-soft);
    font-size: .78rem;
    line-height: 1.6;
    min-height: 100px;
    padding: 1rem .85rem .55rem;
    overflow-wrap: anywhere;
}

.campaign-preview-body p {
    margin: 0 0 .7rem;
}

.campaign-preview-body p:last-child {
    margin-bottom: 0;
}

.campaign-preview-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.45;
    padding: .7rem .85rem;
}

.campaign-field-wide {
    grid-column: 1 / -1;
}

.campaign-attachment-field input[type="file"] {
    background: var(--surface-muted);
    border-style: dashed;
    cursor: pointer;
    padding: .85rem;
}

.campaign-audience-card {
    background: var(--ink);
    border-radius: 1rem;
    color: var(--paper);
    padding: 1.35rem;
}

.campaign-audience-card .eyebrow {
    color: #aaa9a5;
}

.campaign-audience-card .campaign-step {
    background: #2b2b29;
    border-color: #464642;
    color: #c4c4c0;
}

.campaign-audience-card h2 {
    color: var(--paper);
    font-size: 1.28rem;
}

.campaign-recipient-count {
    color: #f0c1b6;
    display: block;
    font-family: var(--display);
    font-size: 3.35rem;
    letter-spacing: -.08em;
    line-height: .95;
    margin-top: .75rem;
}

.campaign-recipient-label {
    color: #d0d0cc;
    display: block;
    font-size: .72rem;
    font-weight: 700;
    margin-top: .28rem;
    text-transform: uppercase;
}

.campaign-audience-card > p:last-child {
    color: #aaa9a5;
    font-size: .72rem;
    line-height: 1.55;
    margin-top: 1.1rem;
}

.campaign-filter-card,
.campaign-delivery-card,
.campaign-test-card {
    padding: 1.2rem 1.25rem;
}

.campaign-card-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.campaign-card-heading strong {
    font-size: .84rem;
}

.campaign-card-heading span {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.campaign-form-actions {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: .6rem;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 1rem;
}

.campaign-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 .9rem;
}

.campaign-history-panel {
    margin-bottom: 1rem;
}

.campaign-history-panel td small,
.campaign-history-panel td strong {
    display: block;
}

.campaign-history-panel td small {
    font-size: .67rem;
    margin-top: .1rem;
}

.campaign-status {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-block;
    font-size: .63rem;
    font-weight: 700;
    padding: .25rem .5rem;
    white-space: nowrap;
}

.campaign-status-sent {
    background: #edf6ed;
    border-color: #c9e1ca;
    color: #3e7141;
}

.campaign-status-failed,
.campaign-status-partial {
    background: var(--accent-wash);
    border-color: #efc6bc;
    color: var(--accent-dark);
}

.campaign-status-scheduled {
    background: #f6f0e1;
    border-color: #e9d7a9;
    color: #876a2d;
}

.detail-list {
    display: grid;
    gap: .75rem;
    margin: 1.2rem 0 0;
}

.detail-list div {
    border-top: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-top: .7rem;
}

.detail-list dt {
    color: var(--muted);
    font-size: .7rem;
}

.detail-list dd {
    font-size: .77rem;
    margin: 0;
    text-align: right;
}

.campaign-attachment-list {
    border-top: 1px solid var(--line);
    display: grid;
    gap: .45rem;
    margin-top: 1rem;
    padding-top: .9rem;
}

.campaign-attachment-list > p {
    margin-bottom: .15rem;
}

.campaign-attachment-list a {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .5rem;
    display: flex;
    font-size: .72rem;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
}

.campaign-attachment-list a:hover {
    border-color: var(--line-dark);
    background: var(--paper);
}

.campaign-attachment-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-attachment-list small {
    flex: 0 0 auto;
    font-size: .62rem;
}

@media (max-width: 860px) {
    .campaign-compose-form {
        grid-template-columns: 1fr;
    }

    .campaign-compose-sidebar {
        position: static;
    }

    .campaign-form-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .campaign-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .campaign-advanced-grid,
    .campaign-metrics {
        grid-template-columns: 1fr;
    }

    .campaign-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .campaign-form-actions .button {
        width: 100%;
    }
}

/* Management, settings and reports */
.management-layout {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
}

.management-form-panel {
    position: sticky;
    top: 1rem;
}

.member-list, .service-list {
    display: grid;
}

.member-row, .service-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .75rem;
    grid-template-columns: auto 1fr auto;
    padding: .85rem 0;
}

.member-row:first-child, .service-row:first-child {
    border-top: 0;
}

.member-row strong, .service-row strong {
    display: block;
    font-size: .84rem;
}

.member-row p, .service-row p {
    color: var(--muted);
    font-size: .71rem;
    margin-top: .1rem;
}

.member-row small, .service-row small {
    display: block;
    font-size: .65rem;
    margin-top: .1rem;
}

.member-row.is-inactive, .service-row.is-inactive {
    opacity: .52;
}

.member-actions {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.member-actions form {
    margin: 0;
}

.text-button {
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: .7rem;
    font-weight: 700;
    padding: 0;
}

.text-button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-button-alert {
    color: var(--accent);
}

.service-mark {
    background: var(--ink);
    border-radius: .25rem;
    height: 13px;
    width: 13px;
}

.settings-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(300px, .85fr) minmax(240px, .55fr);
    max-width: 900px;
}

.settings-layout.business-settings-layout {
    gap: 2rem;
    grid-template-columns: minmax(470px, 1.1fr) minmax(280px, .75fr);
    max-width: 1180px;
}

.business-details-panel {
    padding: 2rem;
}

.business-details-panel .stacked-form {
    margin-top: 1.5rem;
    max-width: 560px;
}

.business-details-panel .field {
    gap: .5rem;
}

.business-details-panel input,
.business-details-panel select {
    font-size: 1rem;
    min-height: 3.35rem;
}

.business-details-panel .button {
    margin-top: .25rem;
    min-width: 210px;
}

@media (max-width: 1120px) {
    .settings-layout.business-settings-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 680px;
    }
}

.settings-note {
    border-left: 1px solid var(--line-dark);
    margin-top: 1.3rem;
    padding: .35rem 0 .35rem 1.35rem;
}

.settings-note h2 {
    font-size: 1.6rem;
}

.settings-note > p:last-child {
    color: var(--muted);
    font-size: .84rem;
    margin-top: .6rem;
}

.business-create-layout {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(300px, .9fr) minmax(270px, .7fr);
    max-width: 920px;
}

.business-create-form-panel {
    padding: clamp(1.25rem, 2.5vw, 1.8rem);
}

.business-create-form-heading {
    align-items: center;
    display: flex;
    gap: .85rem;
}

.business-create-form-heading .eyebrow {
    margin-bottom: .28rem;
}

.business-create-icon {
    align-items: center;
    background: var(--accent-wash);
    border: 1px solid #f0c7bd;
    border-radius: .78rem;
    color: var(--accent-dark);
    display: inline-flex;
    flex: 0 0 auto;
    height: 47px;
    justify-content: center;
    width: 47px;
}

.business-create-icon svg {
    height: 24px;
    width: 24px;
}

.business-create-form-panel .panel-intro {
    margin: 1rem 0 1.3rem;
}

.business-create-preview {
    background: var(--ink);
    border-radius: 1rem;
    color: var(--paper);
    min-width: 0;
    padding: clamp(1.3rem, 2.5vw, 1.8rem);
}

.business-create-preview .eyebrow {
    color: #b5b5b1;
}

.business-create-preview h2 {
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    max-width: 290px;
}

.business-create-preview > p:last-of-type {
    color: #c1c1bd;
    font-size: .84rem;
    margin-top: .65rem;
}

.business-create-steps {
    counter-reset: business-step;
    display: grid;
    gap: .8rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.business-create-steps li {
    align-items: center;
    border-top: 1px solid #3a3a38;
    display: grid;
    gap: .65rem;
    grid-template-columns: auto 1fr;
    padding-top: .8rem;
}

.business-create-steps span {
    align-items: center;
    background: #2b2b29;
    border-radius: 50%;
    color: #f0c1b6;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.business-create-steps strong,
.business-create-steps small {
    display: block;
}

.business-create-steps strong {
    font-size: .78rem;
}

.business-create-steps small {
    color: #b5b5b1;
    font-size: .67rem;
    margin-top: .08rem;
}

.edit-form-panel {
    max-width: 630px;
}

.form-actions {
    display: flex;
    gap: .6rem;
    margin-top: .4rem;
}

.report-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .85rem;
}

.chart-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(100px, 1fr) minmax(70px, 1.2fr) 37px;
    padding: .8rem 0;
}

.chart-row:first-child {
    border-top: 0;
}

.chart-row strong {
    display: block;
    font-size: .78rem;
}

.chart-row small {
    display: block;
    font-size: .65rem;
    margin-top: .1rem;
}

.chart-row > b {
    font-size: .75rem;
    text-align: right;
}

.chart-track, .loss-track {
    background: var(--surface-muted);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.chart-track i, .loss-track i {
    background: var(--accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.chart-track-muted i {
    background: var(--ink);
}

.report-list-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: .85rem;
    justify-content: space-between;
    margin-top: .15rem;
    padding-top: .85rem;
}

.report-list-footer > span {
    color: var(--muted);
    font-size: .7rem;
}

.report-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.report-load-more-button {
    flex: 0 0 auto;
    font-size: .73rem;
    min-height: 36px;
    padding: .55rem .8rem;
}

.report-load-more-button.is-loading {
    cursor: progress;
    opacity: .68;
    pointer-events: none;
}

.report-quote-background {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 3.5vw, 3.8rem);
    position: relative;
}

.report-quote-background .eyebrow, .report-quote-background blockquote, .report-quote-background .report-quote-copy {
    position: relative;
    z-index: 1;
}

.report-quote-background blockquote {
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(3.1rem, 5vw, 5.8rem);
    letter-spacing: -.07em;
    line-height: .98;
    margin: .45rem 0 0;
    max-width: 720px;
}

.report-quote-copy {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
    margin-top: 1.35rem;
    max-width: 380px;
}

.lost-reasons-panel {
    grid-column: 1 / -1;
}

.loss-list {
    display: grid;
    gap: .8rem;
}

.loss-row {
    display: grid;
    gap: .45rem;
    grid-template-columns: minmax(150px, .55fr) 1.45fr;
}

.loss-row > div:first-child {
    align-items: baseline;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.loss-row strong {
    font-size: .77rem;
}

.loss-row span {
    color: var(--muted);
    font-size: .65rem;
    white-space: nowrap;
}

/* Onboarding */
.onboarding-layout {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 7vw, 7rem);
    grid-template-columns: minmax(0, .85fr) minmax(360px, .9fr);
    min-height: calc(100vh - 78px);
    padding: 2.5rem 0;
}

.onboarding-intro > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1rem;
    margin: 1rem 0 1.4rem;
    max-width: 490px;
}

.onboarding-checklist {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: clamp(1.2rem, 3vw, 2rem);
}

.onboarding-checklist ol {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.onboarding-checklist li {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .8rem;
    grid-template-columns: 29px 1fr auto;
    padding: 1rem 0;
}

.onboarding-checklist li:first-child {
    border-top: 0;
}

.onboarding-checklist li > span {
    align-items: center;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    color: var(--muted);
    display: flex;
    font-size: .7rem;
    font-weight: 700;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.onboarding-checklist li.complete > span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.onboarding-checklist li strong {
    display: block;
    font-size: .82rem;
}

.onboarding-checklist li p {
    color: var(--muted);
    font-size: .7rem;
    margin-top: .1rem;
}

.onboarding-checklist li a {
    font-size: .7rem;
    font-weight: 700;
}

.onboarding-checklist li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Marketing */
.marketing-body {
    background: var(--paper);
    color: var(--ink);
}

.marketing-nav {
    align-items: center;
    display: flex;
    height: 82px;
    justify-content: space-between;
    margin: auto;
    max-width: 1210px;
    padding: 0 1.5rem;
}

.wordmark {
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.075em;
}

.wordmark span {
    font-family: var(--display);
    font-style: italic;
    letter-spacing: -.13em;
    margin-right: .01em;
}

.marketing-nav nav {
    align-items: center;
    display: flex;
    gap: 1.45rem;
}

.marketing-nav nav > a:not(.button) {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.marketing-nav nav > a:not(.button):hover {
    color: var(--ink);
}

.marketing-hero {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 7vw, 8rem);
    grid-template-columns: minmax(0, 1.06fr) minmax(350px, .8fr);
    margin: auto;
    max-width: 1210px;
    min-height: calc(100vh - 82px);
    padding: 4rem 1.5rem 5rem;
}

.marketing-hero h1 {
    font-size: clamp(3.1rem, 6.8vw, 6.1rem);
    line-height: .97;
    max-width: 740px;
}

.marketing-hero h1 em {
    font-weight: 500;
}

.hero-intro {
    color: var(--muted);
    font-size: clamp(.98rem, 1.5vw, 1.17rem);
    line-height: 1.55;
    margin-top: 1.35rem;
    max-width: 575px;
}

.hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    margin-top: 1.6rem;
}

.hero-footnote {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    margin-top: 2rem;
    max-width: 575px;
    padding-top: .8rem;
}

.hero-ledger {
    background: var(--ink);
    box-shadow: 18px 18px 0 var(--surface-muted);
    color: var(--paper);
    padding: 1.25rem;
    position: relative;
}

.ledger-topline {
    border-bottom: 1px solid #373735;
    color: #adadaa;
    display: flex;
    font-size: .65rem;
    justify-content: space-between;
    padding-bottom: .8rem;
}

.ledger-live {
    color: #dadad7;
}

.ledger-heading {
    padding: 1.4rem 0 1rem;
}

.ledger-heading p {
    color: #bcbcb8;
    font-size: .75rem;
}

.ledger-heading strong {
    display: block;
    font-family: var(--display);
    font-size: 1.8rem;
    line-height: 1.1;
    margin-top: .22rem;
}

.ledger-list {
    border-top: 1px solid #373735;
}

.ledger-item {
    align-items: center;
    border-bottom: 1px solid #373735;
    display: grid;
    gap: .6rem;
    grid-template-columns: 8px 1fr auto;
    padding: .85rem 0;
}

.ledger-signal {
    background: #8e8e89;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.ledger-item.is-overdue .ledger-signal {
    background: var(--accent);
}

.ledger-item strong {
    display: block;
    font-size: .78rem;
}

.ledger-item small {
    color: #aaa9a5;
    display: block;
    font-size: .64rem;
    margin-top: .1rem;
}

.ledger-item time {
    color: #bcbcb8;
    font-size: .63rem;
}

.ledger-item.is-overdue time {
    color: var(--accent);
}

.ledger-bottom {
    color: #bcbcb8;
    display: flex;
    font-size: .66rem;
    justify-content: space-between;
    padding-top: .9rem;
}

.pipeline-section {
    background: var(--canvas);
    padding: clamp(4rem, 8vw, 7rem) max(1.5rem, calc((100vw - 1160px) / 2));
}

.section-intro {
    max-width: 610px;
}

.section-intro h2 {
    font-size: clamp(2rem, 4vw, 3.7rem);
}

.section-intro > p:last-child {
    color: var(--muted);
    margin-top: .75rem;
}

.marketing-pipeline {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    list-style: none;
    margin: 2.6rem 0 0;
    overflow-x: auto;
    padding: 0 0 .35rem;
}

.marketing-pipeline li {
    border-left: 1px solid var(--line-dark);
    min-height: 104px;
    padding: .7rem .7rem .7rem .85rem;
}

.marketing-pipeline li:first-child {
    border-left: 0;
    padding-left: 0;
}

.marketing-pipeline span {
    color: var(--muted);
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.marketing-pipeline strong {
    display: block;
    font-size: .8rem;
    line-height: 1.2;
    margin-top: 1.5rem;
}

.workspaces-section {
    align-items: center;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    gap: clamp(2.5rem, 9vw, 9rem);
    grid-template-columns: minmax(0, .95fr) minmax(330px, .7fr);
    margin: 0 auto;
    max-width: 1120px;
    padding: clamp(4rem, 9vw, 7rem) 1.5rem;
}

.workspaces-copy h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.workspaces-copy > p:last-of-type {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 550px;
}

.workspace-benefits {
    display: grid;
    gap: .55rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.workspace-benefits li {
    align-items: center;
    display: flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .65rem;
}

.workspace-benefits li::before {
    align-items: center;
    background: var(--accent);
    border-radius: 50%;
    color: var(--paper);
    content: "✓";
    display: flex;
    font-size: .58rem;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.workspaces-preview {
    background: var(--ink);
    box-shadow: 12px 12px 0 var(--accent);
    color: var(--paper);
    padding: clamp(1rem, 2.6vw, 1.45rem);
}

.workspaces-preview-heading {
    align-items: center;
    border-bottom: 1px solid #3d3d3a;
    display: flex;
    justify-content: space-between;
    padding: 0 0 1rem;
}

.workspaces-preview-heading span {
    color: #aaa9a5;
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.workspaces-preview-heading strong {
    display: block;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: .18rem;
}

.workspaces-preview-heading .workspaces-preview-chevron {
    color: var(--paper);
    font-size: 1.25rem;
    letter-spacing: 0;
    text-transform: none;
}

.workspaces-preview-list {
    display: grid;
    gap: .45rem;
    margin-top: .8rem;
}

.workspaces-preview-option {
    align-items: center;
    border: 1px solid transparent;
    display: grid;
    gap: .65rem;
    grid-template-columns: 30px 1fr auto;
    padding: .62rem;
}

.workspaces-preview-option.is-current {
    background: #292927;
    border-color: #4b4b47;
}

.workspaces-preview-mark {
    align-items: center;
    background: #42423f;
    border-radius: 50%;
    color: #e4e4df;
    display: flex;
    font-size: .56rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.is-current .workspaces-preview-mark {
    background: var(--accent);
    color: var(--paper);
}

.workspaces-preview-option strong,
.workspaces-preview-option small {
    display: block;
}

.workspaces-preview-option strong {
    font-size: .75rem;
}

.workspaces-preview-option small {
    color: #aaa9a5;
    font-size: .62rem;
    margin-top: .14rem;
}

.workspaces-preview-check {
    color: var(--accent);
    font-size: .85rem;
    font-weight: 700;
}

.workspaces-preview-add {
    border-top: 1px solid #3d3d3a;
    color: #d0d0cb;
    font-size: .7rem;
    font-weight: 700;
    margin-top: .85rem;
    padding-top: .9rem;
}

.workspaces-preview-add span {
    color: var(--accent);
    font-size: 1rem;
    margin-right: .3rem;
}

.automation-section {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 8vw, 8rem);
    grid-template-columns: minmax(0, .9fr) minmax(330px, .8fr);
    margin: auto;
    max-width: 1120px;
    padding: clamp(4rem, 10vw, 8rem) 1.5rem;
}

.automation-copy h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.automation-copy > p:last-child {
    color: var(--muted);
    font-size: 1rem;
    margin-top: 1rem;
    max-width: 510px;
}

.automation-demo {
    border: 1px solid var(--line-dark);
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.automation-event {
    align-items: flex-start;
    display: grid;
    gap: .8rem;
    grid-template-columns: 27px 1fr;
}

.event-number {
    align-items: center;
    background: var(--surface-muted);
    border-radius: 50%;
    display: flex;
    font-size: .7rem;
    font-weight: 700;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.automation-event small {
    display: block;
    font-size: .64rem;
}

.automation-event strong {
    display: block;
    font-size: .9rem;
    margin-top: .15rem;
}

.automation-event p {
    color: var(--muted);
    font-size: .72rem;
    margin-top: .12rem;
}

.automation-line {
    border-left: 1px dashed var(--line-dark);
    height: 54px;
    margin: .1rem 0 .1rem 13px;
}

.automation-result .event-number {
    background: var(--accent);
    color: var(--paper);
}

.comparison-section {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(4rem, 8vw, 7rem) max(1.5rem, calc((100vw - 1120px) / 2));
}

.comparison-section .eyebrow, .comparison-section .section-intro > p:last-child {
    color: #b9b9b4;
}

.comparison-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.5rem;
}

.comparison-grid article {
    background: #222220;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.comparison-grid article:first-child {
    background: #2b2b29;
}

.comparison-label {
    color: #b9b9b4;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.comparison-grid ul {
    list-style: none;
    margin: 1.2rem 0 1.6rem;
    padding: 0;
}

.comparison-grid li {
    border-top: 1px solid #444441;
    font-size: .88rem;
    padding: .65rem 0;
}

.comparison-grid li:last-child {
    border-bottom: 1px solid #444441;
}

.comparison-grid small {
    color: #b9b9b4;
    font-size: .7rem;
}

.comparison-cuein {
    box-shadow: inset 0 3px 0 var(--accent);
}

.industries-section {
    margin: auto;
    max-width: 1120px;
    padding: clamp(4rem, 9vw, 7rem) 1.5rem;
}

.industry-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 2.25rem;
}

.industry-grid article {
    border-top: 1px solid var(--ink);
    padding-top: .7rem;
}

.industry-grid span {
    font-family: var(--display);
    font-size: 1.15rem;
}

.industry-grid p {
    color: var(--muted);
    font-size: .7rem;
    margin-top: .4rem;
}

.marketing-cta {
    align-items: center;
    background: var(--canvas);
    display: flex;
    flex-direction: column;
    padding: clamp(4rem, 10vw, 8rem) 1.5rem;
    text-align: center;
}

.marketing-cta h2 {
    font-size: clamp(2.15rem, 4.8vw, 4.5rem);
    max-width: 880px;
}

.marketing-cta .button {
    margin-top: 1.5rem;
}

.marketing-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: .72rem;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.6rem max(1.5rem, calc((100vw - 1160px) / 2));
}

.marketing-footer .wordmark {
    color: var(--ink);
}

.marketing-footer a:last-child {
    color: var(--ink);
    font-weight: 700;
}

/* Authentication */
.auth-body {
    background: var(--canvas);
    min-height: 100vh;
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
    min-height: 100vh;
}

.auth-intro {
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 6vw, 5rem);
}

.auth-intro .wordmark {
    color: var(--paper);
}

.auth-intro .eyebrow {
    color: #aaa9a5;
}

.auth-intro h1 {
    font-size: clamp(2.8rem, 5vw, 5.1rem);
    max-width: 610px;
}

.auth-intro > div > p:last-child {
    color: #bdbdb8;
    font-size: 1rem;
    margin-top: 1.1rem;
    max-width: 480px;
}

.auth-points {
    color: #c1c1bd;
    display: grid;
    font-size: .77rem;
    gap: .35rem;
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}

.auth-points li::before {
    content: "—";
    margin-right: .55rem;
}

.auth-card {
    align-self: center;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    margin: 2rem auto;
    max-width: 570px;
    padding: clamp(1.45rem, 4vw, 2.4rem);
    width: calc(100% - 3rem);
}

.auth-card-heading h1, .auth-card-heading h2 {
    font-size: clamp(1.9rem, 3vw, 2.65rem);
}

.auth-card-heading > p:last-child {
    color: var(--muted);
    font-size: .84rem;
    margin-top: .5rem;
}

.auth-form {
    display: grid;
    gap: .95rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.6rem;
}

.auth-form .field-wide {
    grid-column: 1 / -1;
}

.auth-form .form-submit-error {
    grid-column: 1 / -1;
    margin: -.1rem 0;
}

.auth-switch {
    color: var(--muted);
    font-size: .76rem;
    margin-top: 1.2rem;
}

.auth-switch a {
    color: var(--ink);
    font-weight: 700;
}

.auth-switch a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-login-body {
    align-items: center;
    display: grid;
}

.login-wrap {
    margin: auto;
    max-width: 490px;
    padding: 2rem 1.5rem;
    width: 100%;
}

.login-wrap > .wordmark {
    display: block;
    margin-bottom: 1.2rem;
}

.login-card {
    margin: 0;
    max-width: none;
    width: 100%;
}

.auth-form-single {
    grid-template-columns: 1fr;
}

.password-input {
    display: block;
    position: relative;
}

.password-input input {
    padding-right: 3rem;
}

.password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .4rem;
    color: var(--muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    transition: background .16s ease, color .16s ease;
    width: 34px;
}

.password-toggle:hover {
    background: var(--surface-muted);
    color: var(--ink);
}

.password-toggle:focus-visible {
    outline: 3px solid rgba(196, 80, 56, .28);
    outline-offset: 1px;
}

.password-toggle svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 19px;
}

.password-toggle [data-password-icon="hide"],
.password-toggle[aria-pressed="true"] [data-password-icon="show"] {
    display: none;
}

.password-toggle[aria-pressed="true"] [data-password-icon="hide"] {
    display: block;
}

.login-credentials-error {
    line-height: 1.45;
}

/* Verification code experience */
.verification-page {
    background:
        radial-gradient(circle at 50% -10%, rgba(196, 80, 56, .11), transparent 31rem),
        var(--canvas);
}

.verification-shell {
    margin: auto;
    max-width: 548px;
    padding: clamp(2rem, 7vh, 5rem) 1.25rem 2.5rem;
    width: 100%;
}

.verification-shell > .wordmark {
    display: block;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.verification-card {
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(17, 17, 17, .09);
    padding: clamp(1.55rem, 5vw, 2.5rem);
}

.verification-icon {
    align-items: center;
    background: var(--ink);
    border-radius: 14px;
    color: var(--paper);
    display: flex;
    height: 46px;
    justify-content: center;
    margin-bottom: 1.35rem;
    width: 46px;
}

.verification-icon svg {
    height: 24px;
    width: 24px;
}

.verification-heading h1 {
    font-size: clamp(2.2rem, 7vw, 3rem);
}

.verification-heading strong {
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.verification-messages {
    display: grid;
    gap: .55rem;
    margin-top: 1.3rem;
}

.verification-message {
    background: var(--accent-wash);
    border-left: 3px solid var(--accent);
    color: var(--accent-dark);
    font-size: .8rem;
    padding: .75rem .85rem;
}

.verification-message.success {
    background: #edf6ef;
    border-color: #4d8060;
    color: #28543a;
}

.verification-message.info {
    background: #eff4fa;
    border-color: #527eaf;
    color: #31587f;
}

.verification-form {
    gap: 1rem;
    margin-top: 1.55rem;
}

.verification-recipient {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    display: grid;
    gap: .13rem;
    padding: .75rem .85rem;
}

.verification-recipient span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.verification-recipient strong {
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.verification-code-field {
    gap: .48rem;
}

.verification-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.45rem !important;
    font-weight: 700;
    letter-spacing: .58em;
    min-height: 58px;
    padding-left: .58em !important;
    text-align: center;
}

.verification-code-field small {
    font-size: .72rem;
}

.verification-resend-panel {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
}

.verification-resend-panel strong {
    display: block;
    font-size: .82rem;
}

.verification-resend-panel p {
    color: var(--muted);
    font-size: .73rem;
    margin-top: .12rem;
}

.verification-resend-button,
.verification-resend-details summary {
    background: transparent;
    border: 1px solid var(--line-dark);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    padding: .62rem .78rem;
    white-space: nowrap;
}

.verification-resend-button:hover,
.verification-resend-details summary:hover {
    background: var(--surface-muted);
}

.verification-resend-details {
    position: relative;
}

.verification-resend-details summary {
    cursor: pointer;
    list-style: none;
}

.verification-resend-details summary::-webkit-details-marker {
    display: none;
}

.verification-resend-form {
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid;
    gap: .65rem;
    margin-top: .55rem;
    padding: .75rem;
    position: absolute;
    right: 0;
    top: 100%;
    width: min(300px, calc(100vw - 3rem));
    z-index: 2;
}

.verification-resend-form .field {
    gap: .28rem;
}

.verification-resend-form .field > span {
    font-size: .66rem;
}

.verification-resend-form input {
    min-width: 0;
}

.verification-switch {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
}

@media (max-width: 520px) {
    .verification-shell {
        padding: 1.4rem 1rem 2rem;
    }

    .verification-shell > .wordmark {
        margin-bottom: 1rem;
    }

    .verification-card {
        border-radius: 14px;
        padding: 1.35rem;
        width: 100%;
    }

    .verification-resend-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .verification-resend-button,
    .verification-resend-details {
        width: 100%;
    }

    .verification-resend-button,
    .verification-resend-details summary {
        display: block;
        text-align: center;
        width: 100%;
    }

    .verification-resend-form {
        position: static;
        width: 100%;
    }

    .verification-code-input {
        font-size: 1.2rem !important;
        letter-spacing: .44em;
        padding-left: .44em !important;
    }
}

/* Small-screen application behaviour */
@media (max-width: 1120px) {
    .attention-board {
        grid-template-columns: 1.1fr .42fr 1.25fr;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .priority-panel, .pipeline-panel, .lead-trend-panel, .team-panel, .watch-panel, .recent-panel {
        grid-column: auto;
    }

    .watch-panel {
        grid-column: auto;
    }

    .management-layout {
        grid-template-columns: minmax(250px, .76fr) minmax(0, 1.24fr);
    }

    .stage-change-form {
        grid-template-columns: 1fr 1fr;
    }

    .stage-change-form .button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .needs-time-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .sidebar {
        padding: 1.1rem .75rem;
        width: 184px;
    }

    .main-content {
        margin-left: 184px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .brand-word {
        font-size: 1.05rem;
    }

    .nav-item {
        gap: .62rem;
        padding-left: .6rem;
    }

    .attention-board {
        grid-template-columns: 1fr .42fr;
    }

    .attention-breakdown {
        border-top: 1px solid #3c3c3a;
        grid-column: 1 / -1;
        padding-top: .9rem;
    }

    .attention-breakdown a:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .lead-detail-grid, .quick-add-layout, .onboarding-layout {
        grid-template-columns: 1fr;
    }

    .quick-add-layout, .onboarding-layout {
        align-content: center;
        min-height: auto;
        padding: 3rem 0;
    }

    .quick-add-card {
        max-width: 620px;
    }

    .management-layout, .settings-layout, .business-create-layout, .auth-layout {
        grid-template-columns: 1fr;
    }

    .management-form-panel {
        position: static;
    }

    .settings-note {
        border-left: 0;
        border-top: 1px solid var(--line-dark);
        margin: 0;
        padding: 1.3rem 0 0;
    }

    .report-grid {
        grid-template-columns: 1fr;
    }

    .lost-reasons-panel {
        grid-column: auto;
    }

    .marketing-hero, .workspaces-section, .automation-section {
        grid-template-columns: 1fr;
    }

    .marketing-hero {
        min-height: auto;
        padding-top: 4.5rem;
    }

    .hero-ledger {
        max-width: 560px;
        width: 100%;
    }

    .industry-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .auth-intro {
        min-height: 390px;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .sidebar {
        align-items: center;
        border-top: 1px solid #3d3d3a;
        bottom: 0;
        flex-direction: row;
        height: 65px;
        left: 0;
        overflow: hidden;
        padding: .38rem .42rem;
        right: 0;
        top: auto;
        width: auto;
    }

    .sidebar-toggle {
        display: none;
    }

    .brand {
        display: none;
    }

    .primary-nav {
        -ms-overflow-style: none;
        display: flex;
        gap: .12rem;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
    }

    .primary-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-divider {
        display: none;
    }

    .nav-item {
        align-items: center;
        flex: 0 0 auto;
        flex-direction: column;
        font-size: .58rem;
        gap: .12rem;
        justify-content: center;
        min-height: 55px;
        min-width: 58px;
        padding: .32rem .4rem;
        text-align: center;
    }

    .nav-item svg {
        height: 17px;
        width: 17px;
    }

    .logout-form {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: 0 1rem 6.5rem;
    }

    .topbar {
        min-height: 63px;
    }

    .flash-stack {
        max-width: calc(100vw - 2rem);
    }

    .mobile-wordmark {
        display: inline;
    }

    .workspace-name {
        display: none;
    }

    .workspace-role {
        border-left: 0;
        font-size: .66rem;
        padding-left: 0;
    }

    .topbar-user > span:last-child {
        display: none;
    }

    .topbar-user .avatar {
        height: 29px;
        width: 29px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 0 1.35rem;
    }

    .page-heading .button {
        width: 100%;
    }

    .dashboard-heading {
        padding-bottom: 1rem;
    }

    .attention-board {
        display: block;
        padding: 1.15rem;
    }

    .attention-board::after {
        height: 180px;
        right: -92px;
        top: -98px;
        width: 180px;
    }

    .attention-count {
        align-items: flex-start;
        border-left: 0;
        flex-direction: row;
        gap: .5rem;
        justify-content: flex-start;
        margin-top: 1.35rem;
        text-align: left;
    }

    .attention-count span {
        margin-top: .55rem;
    }

    .attention-breakdown {
        border-top: 1px solid #3c3c3a;
        margin-top: 1rem;
        padding-top: .85rem;
    }

    .attention-breakdown a {
        min-height: 57px;
        padding-left: .5rem;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-card {
        min-height: 135px;
        padding: .9rem;
    }

    .metric-card > strong {
        font-size: 2.15rem;
    }

    .metric-currency {
        font-size: 1.3rem !important;
        letter-spacing: -.05em !important;
    }

    .analytics-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: .75rem;
    }

    .analytics-heading h2 {
        font-size: 1.55rem;
    }

    .stage-chart {
        gap: .28rem;
        height: 182px;
    }

    .stage-chart-column {
        gap: .25rem;
        grid-template-rows: 15px minmax(0, 1fr) 23px;
    }

    .stage-chart-total {
        font-size: .62rem;
    }

    .stage-chart-label {
        font-size: .53rem;
    }

    .source-performance-row {
        gap: .5rem;
        grid-template-columns: minmax(85px, 1fr) minmax(58px, .9fr) 33px;
    }

    .panel {
        border-radius: .85rem;
        padding: 1rem;
    }

    .watch-list {
        grid-template-columns: 1fr;
    }

    .watch-row, .watch-row:first-child {
        border-left: 0;
        border-top: 1px solid var(--line);
        min-height: 0;
        padding: .65rem 0;
    }

    .watch-row:first-child {
        border-top: 0;
    }

    .lead-filter {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .search-field {
        flex-basis: 100%;
        max-width: none;
    }

    .select-field {
        flex: 1;
    }

    .select-field select {
        min-width: 0;
    }

    .lead-filter .button {
        min-height: 42px;
    }

    .board-help {
        margin-top: .7rem;
    }

    .desktop-help {
        display: none;
    }

    .kanban-column {
        height: min(66vh, 560px);
        width: min(278px, calc(100vw - 3.5rem));
    }

    .kanban-dropzone {
        min-height: 0;
    }

    .kanban-column-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-stage-filter .select-field {
        flex: 1 1 calc(50% - .55rem);
    }

    .pagination {
        gap: .5rem;
    }

    .quick-add-layout {
        padding: 2rem 0;
    }

    .quick-add-copy .back-link {
        margin-bottom: 2rem;
    }

    .quick-add-card {
        margin: 0 -1rem;
    }

    .lead-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-heading-meta {
        align-items: flex-start;
        flex-direction: row;
    }

    .lead-command-card {
        display: block;
        margin: 0 -1rem .85rem;
    }

    .lead-command-card > div {
        margin-bottom: 1rem;
    }

    .stage-change-form {
        grid-template-columns: 1fr;
    }

    .stage-change-form .button {
        grid-column: auto;
        width: 100%;
    }

    .needs-time-form {
        margin-top: .65rem;
    }

    .needs-time-form .button {
        width: 100%;
    }

    .activity-form {
        grid-template-columns: 1fr;
    }

    .activity-form .button {
        width: 100%;
    }

    .task-queue-heading {
        display: none;
    }

    .task-queue-row {
        gap: .7rem;
        grid-template-columns: 1fr auto;
        padding: 1rem;
    }

    .task-queue-row > p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: -.3rem;
    }

    .task-queue-row > time {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .task-actions {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .task-action-details[open] > form {
        left: 0;
        right: auto;
    }

    .member-row, .service-row {
        grid-template-columns: auto 1fr;
    }

    .member-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .settings-layout {
        display: block;
    }

    .settings-note {
        margin-top: 1.5rem;
    }

    .report-metrics {
        grid-template-columns: 1fr;
    }

    .chart-row {
        grid-template-columns: minmax(80px, 1fr) minmax(60px, 1fr) 35px;
    }

    .report-list-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-list-actions {
        justify-content: flex-start;
    }

    .loss-row {
        grid-template-columns: 1fr;
    }

    .onboarding-layout {
        padding: 2rem 0;
    }

    .onboarding-checklist li {
        grid-template-columns: 27px 1fr;
    }

    .onboarding-checklist li a {
        grid-column: 2;
    }

    .marketing-nav {
        height: 68px;
        padding: 0 1rem;
    }

    .marketing-nav nav {
        gap: .6rem;
    }

    .marketing-nav nav > a:not(.button) {
        display: none;
    }

    .marketing-nav nav > a:nth-last-child(2) {
        display: inline;
    }

    .marketing-hero {
        gap: 2.5rem;
        padding: 3rem 1rem 3.8rem;
    }

    .marketing-hero h1 {
        font-size: clamp(2.85rem, 14vw, 4.2rem);
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-ledger {
        box-shadow: 10px 10px 0 var(--surface-muted);
    }

    .pipeline-section, .comparison-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .marketing-pipeline {
        grid-template-columns: repeat(7, 126px);
    }

    .workspaces-section, .automation-section, .industries-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .marketing-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.35rem 1rem 5.5rem;
    }

    .auth-layout {
        display: block;
    }

    .auth-intro {
        min-height: auto;
        padding: 1.4rem 1.2rem 2.8rem;
    }

    .auth-intro > .wordmark {
        margin-bottom: 3.7rem;
    }

    .auth-intro h1 {
        font-size: 2.8rem;
    }

    .auth-points {
        display: none;
    }

    .auth-card {
        margin: -1rem 1rem 2rem;
        position: relative;
        width: calc(100% - 2rem);
    }

    .auth-form {
        grid-template-columns: 1fr;
    }

    .auth-login-body {
        display: block;
    }

    .login-wrap {
        padding: 1.2rem 1rem;
    }

    .login-card {
        margin: 1rem 0;
    }

.client-notice {
        bottom: 5rem;
    }
}

/* Leads workspace — reference pipeline design */
body.leads-redesign {
    --sans: "Inter", "DM Sans", "Helvetica Neue", Arial, sans-serif;
    background: #f7f9fc;
    color: #172033;
}

body.leads-redesign h1,
body.leads-redesign h2,
body.leads-redesign h3 {
    font-family: var(--sans);
}

body.leads-redesign .sidebar {
    background: linear-gradient(180deg, #101b2f 0%, #091426 100%);
    border-right: 1px solid rgba(148, 163, 184, .12);
    color: #dbe6f8;
    padding: 1.45rem 1rem 1.15rem;
    width: 216px;
}

body.leads-redesign .brand {
    color: #f8fbff;
    font-size: 1.18rem;
    letter-spacing: -.055em;
    margin: .05rem .5rem 2.4rem;
}

body.leads-redesign .brand-mark {
    background: #f8fbff;
    color: #16233a;
    font-family: var(--sans);
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    height: 29px;
    letter-spacing: -.08em;
    width: 29px;
}

body.leads-redesign .primary-nav {
    gap: .42rem;
}

body.leads-redesign .nav-item {
    border-radius: .72rem;
    color: #c2cee1;
    font-size: .81rem;
    font-weight: 500;
    gap: .85rem;
    min-height: 44px;
    padding: .68rem .75rem;
}

body.leads-redesign a.nav-item:hover,
body.leads-redesign .nav-item:hover,
body.leads-redesign .nav-item.active {
    background: linear-gradient(90deg, rgba(87, 117, 166, .31), rgba(65, 91, 138, .19));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    color: #ffffff;
}

body.leads-redesign .nav-item svg {
    height: 18px;
    stroke-width: 1.65;
    width: 18px;
}

body.leads-redesign .nav-divider {
    background: rgba(148, 163, 184, .2);
    margin: 1rem .45rem;
}

body.leads-redesign .logout-form .nav-item:hover {
    background: rgba(87, 117, 166, .23);
}

body.leads-redesign .main-content {
    background: #f7f9fc;
    margin-left: 216px;
    min-height: 100vh;
    padding: 0 clamp(1.35rem, 2.45vw, 2.6rem) 2.2rem;
}

body.leads-redesign .lead-workspace-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e7ebf2;
    margin: 0 calc(clamp(1.35rem, 2.45vw, 2.6rem) * -1);
    min-height: 88px;
    padding: 0 clamp(1.35rem, 2.45vw, 2.6rem);
}

body.leads-redesign .lead-page-identity h1 {
    color: #172033;
    font-size: 1.33rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.16;
}

body.leads-redesign .lead-page-identity p {
    color: #728096;
    font-size: .77rem;
    margin-top: .22rem;
}

body.leads-redesign .lead-topbar-actions {
    align-items: center;
    display: flex;
    gap: 1.1rem;
}

body.leads-redesign .lead-global-search {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e6ef;
    border-radius: .55rem;
    color: #95a1b4;
    display: flex;
    gap: .5rem;
    height: 39px;
    padding: 0 .55rem .0rem .7rem;
    width: 270px;
}

body.leads-redesign .lead-global-search svg {
    height: 15px;
    width: 15px;
}

body.leads-redesign .lead-global-search input {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #273348;
    font-size: .72rem;
    min-height: 0;
    padding: 0;
}

body.leads-redesign .lead-global-search input:focus {
    box-shadow: none;
}

body.leads-redesign .lead-global-search kbd {
    background: #f2f4f8;
    border-radius: .28rem;
    color: #8894a7;
    font-family: var(--sans);
    font-size: .61rem;
    font-weight: 700;
    padding: .14rem .28rem;
    white-space: nowrap;
}

body.leads-redesign .lead-notification-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e7ebf2;
    border-radius: .55rem;
    color: #5d6a7d;
    display: inline-flex;
    height: 39px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 39px;
}

body.leads-redesign .lead-notification-button svg {
    height: 17px;
    width: 17px;
}

body.leads-redesign .lead-notification-button b {
    align-items: center;
    background: #ef5a67;
    border: 2px solid #fff;
    border-radius: 99px;
    color: #fff;
    display: inline-flex;
    font-size: .51rem;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 16px;
}

body.leads-redesign .lead-user-menu {
    align-items: center;
    display: flex;
    gap: .6rem;
}

body.leads-redesign .lead-user-avatar {
    align-items: center;
    background: #eef0f6;
    border-radius: 50%;
    color: #445167;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    width: 38px;
}

body.leads-redesign .lead-user-menu strong,
body.leads-redesign .lead-user-menu small {
    display: block;
    line-height: 1.25;
}

body.leads-redesign .lead-user-menu strong {
    color: #253147;
    font-size: .73rem;
    font-weight: 700;
}

body.leads-redesign .lead-user-menu small {
    color: #7b8799;
    font-size: .67rem;
}

body.leads-redesign .lead-user-menu > svg {
    color: #6c778a;
    height: 15px;
    margin-left: .2rem;
    width: 15px;
}

body.leads-redesign .lead-workspace {
    padding-top: 1.9rem;
}

body.leads-redesign .lead-toolbar {
    align-items: center;
    display: flex;
    gap: .7rem;
    margin-bottom: 1.75rem;
}

body.leads-redesign .lead-toolbar-search,
body.leads-redesign .lead-toolbar-select select,
body.leads-redesign .lead-toolbar-filter,
body.leads-redesign .lead-mode {
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: .55rem;
    color: #38465d;
    font-size: .75rem;
    font-weight: 600;
    min-height: 40px;
}

body.leads-redesign .lead-toolbar-search {
    align-items: center;
    display: flex;
    gap: .55rem;
    padding: 0 .75rem;
    width: 330px;
}

body.leads-redesign .lead-toolbar-search svg {
    color: #8793a6;
    height: 16px;
    width: 16px;
}

body.leads-redesign .lead-toolbar-search input {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #273348;
    font-size: .75rem;
    min-height: 0;
    padding: 0;
}

body.leads-redesign .lead-toolbar-search input:focus {
    box-shadow: none;
}

body.leads-redesign .lead-toolbar-select select {
    box-shadow: none;
    min-width: 150px;
    padding: .55rem 2rem .55rem .72rem;
}

body.leads-redesign .lead-toolbar-filter,
body.leads-redesign .lead-mode {
    align-items: center;
    display: inline-flex;
    gap: .44rem;
    justify-content: center;
    padding: .55rem .82rem;
}

body.leads-redesign .lead-toolbar-filter svg,
body.leads-redesign .lead-mode svg {
    height: 15px;
    width: 15px;
}

body.leads-redesign .lead-toolbar-filter:hover,
body.leads-redesign .lead-mode:hover {
    background: #f8fafc;
    border-color: #cad4e3;
}

body.leads-redesign .lead-toolbar-clear {
    color: #5873aa;
    font-size: .72rem;
    font-weight: 700;
}

body.leads-redesign .lead-toolbar-modes {
    align-items: center;
    display: flex;
    gap: .65rem;
    margin-left: auto;
}

body.leads-redesign .lead-mode.is-active {
    background: linear-gradient(135deg, #1c2b43, #101d31);
    border-color: #1c2b43;
    box-shadow: 0 5px 12px rgba(30, 47, 74, .16);
    color: #ffffff;
}

body.leads-redesign .lead-kanban-scroll {
    --kanban-column-height: clamp(420px, calc(100vh - 420px), 520px);
    margin-bottom: 1.5rem;
    padding-bottom: .85rem;
    scrollbar-color: #c6cfdb transparent;
    scrollbar-width: thin;
}

body.leads-redesign .lead-kanban-scroll::-webkit-scrollbar {
    height: 8px;
}

body.leads-redesign .lead-kanban-scroll::-webkit-scrollbar-thumb {
    background: #c6cfdb;
    border: 2px solid var(--canvas);
    border-radius: 99px;
}

body.leads-redesign .kanban-board {
    gap: .82rem;
}

body.leads-redesign .kanban-column {
    --stage-color: #7ba9ff;
    background: #fbfcfe;
    border: 1px solid #e3e8f0;
    border-radius: .62rem;
    border-top: 2px solid var(--stage-color);
    box-shadow: 0 2px 7px rgba(35, 54, 84, .025);
    width: 270px;
}

body.leads-redesign .kanban-stage-1 { --stage-color: #6ca2ff; }
body.leads-redesign .kanban-stage-2 { --stage-color: #63d68b; }
body.leads-redesign .kanban-stage-3 { --stage-color: #c180ff; }
body.leads-redesign .kanban-stage-4 { --stage-color: #f4a84c; }
body.leads-redesign .kanban-stage-5 { --stage-color: #f2ce57; }
body.leads-redesign .kanban-stage-6 { --stage-color: #43caa2; }
body.leads-redesign .kanban-stage-7 { --stage-color: #ef7784; }

body.leads-redesign .kanban-column > header {
    border-bottom: 1px solid #edf0f5;
    display: flex;
    gap: .5rem;
    grid-template-columns: none;
    justify-content: space-between;
    min-height: 57px;
    padding: .72rem .82rem;
}

body.leads-redesign .kanban-column > header h2 {
    color: #202b3e;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.018em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.leads-redesign .kanban-column > header h2 span {
    color: #778399;
    font-size: .77rem;
    font-weight: 500;
    margin-left: .2rem;
}

body.leads-redesign .kanban-column-menu {
    background: transparent;
    border: 0;
    color: #647188;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    padding: .2rem;
}

body.leads-redesign .kanban-dropzone {
    background: #fcfdff;
    gap: .58rem;
    overscroll-behavior: contain;
    padding: .65rem .58rem;
    scrollbar-color: #aeb9c8 transparent;
    scrollbar-width: thin;
}

body.leads-redesign .kanban-dropzone::-webkit-scrollbar {
    width: 7px;
}

body.leads-redesign .kanban-dropzone::-webkit-scrollbar-thumb {
    background: #aeb9c8;
    border: 2px solid #fcfdff;
    border-radius: 99px;
}

body.leads-redesign .kanban-column.is-drop-target .kanban-dropzone {
    background: #f0f6ff;
    outline-color: #90b9ff;
}

body.leads-redesign .lead-card {
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: .58rem;
    box-shadow: 0 2px 5px rgba(37, 55, 84, .055);
    min-width: 0;
}

body.leads-redesign .lead-card:hover {
    box-shadow: 0 6px 14px rgba(37, 55, 84, .1);
    transform: translateY(-1px);
}

body.leads-redesign .lead-card:focus-within {
    border-color: #9dbcf2;
    box-shadow: 0 0 0 3px rgba(108, 162, 255, .16);
}

body.leads-redesign .lead-card-link {
    padding: .75rem .72rem .68rem;
}

body.leads-redesign .lead-card-primary {
    align-items: center;
    display: flex;
    gap: .58rem;
    min-width: 0;
}

body.leads-redesign .lead-card-avatar {
    align-items: center;
    background: #edf4ff;
    border-radius: 50%;
    color: #5075b9;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 700;
    height: 31px;
    justify-content: center;
    width: 31px;
}

body.leads-redesign .lead-card:nth-child(5n + 2) .lead-card-avatar {
    background: #ebf7ef;
    color: #4d9369;
}

body.leads-redesign .lead-card:nth-child(5n + 3) .lead-card-avatar {
    background: #f3edff;
    color: #8060b6;
}

body.leads-redesign .lead-card:nth-child(5n + 4) .lead-card-avatar {
    background: #fff1e8;
    color: #b26a42;
}

body.leads-redesign .lead-card:nth-child(5n + 5) .lead-card-avatar {
    background: #fff0f1;
    color: #ba6871;
}

body.leads-redesign .lead-card-copy {
    display: grid;
    gap: .13rem;
    min-width: 0;
}

body.leads-redesign .lead-card-copy strong {
    color: #202b3e;
    font-size: .72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.leads-redesign .lead-card-copy small {
    color: #6d798d;
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.leads-redesign .lead-card-meta {
    border-top: 1px solid #edf0f5;
    color: #667387;
    font-size: .64rem;
    margin-top: .6rem;
    padding-top: .53rem;
}

body.leads-redesign .lead-card-meta time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.leads-redesign .kanban-column-footer {
    background: #fbfcfe;
    border-top: 1px solid #edf0f5;
    box-shadow: 0 -5px 12px rgba(37, 55, 84, .025);
    color: #667387;
    flex: 0 0 auto;
    font-size: .63rem;
    min-height: 47px;
    padding: .64rem .76rem;
    position: relative;
    z-index: 1;
}

body.leads-redesign .kanban-column-actions {
    gap: .9rem;
}

body.leads-redesign .kanban-load-more,
body.leads-redesign .kanban-view-all {
    color: #466cae;
    font-size: .63rem;
    font-weight: 700;
}

body.leads-redesign .kanban-view-all {
    color: #56647b;
}

body.leads-redesign .column-empty {
    color: #8a95a7;
}

body.leads-redesign .lead-summary-strip {
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: .65rem;
    box-shadow: 0 2px 8px rgba(37, 55, 84, .03);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 1rem;
    padding: 1rem .7rem;
}

body.leads-redesign .lead-summary-metric {
    align-items: center;
    border-left: 1px solid #e5eaf1;
    display: flex;
    gap: .72rem;
    min-width: 0;
    padding: .1rem 1rem;
}

body.leads-redesign .lead-summary-metric:first-child {
    border-left: 0;
}

body.leads-redesign .lead-summary-icon {
    align-items: center;
    background: #edf4ff;
    border-radius: 50%;
    color: #6a91dc;
    display: inline-flex;
    flex: 0 0 auto;
    height: 37px;
    justify-content: center;
    width: 37px;
}

body.leads-redesign .lead-summary-icon svg {
    height: 19px;
    width: 19px;
}

body.leads-redesign .metric-new .lead-summary-icon { background: #eaf8ee; color: #54a970; }
body.leads-redesign .metric-won .lead-summary-icon { background: #f1edff; color: #8b67d0; }
body.leads-redesign .metric-rate .lead-summary-icon { background: #fff0ea; color: #e17c4c; }
body.leads-redesign .metric-value .lead-summary-icon { background: #fff8df; color: #d49b30; }

body.leads-redesign .lead-summary-metric > span:last-child {
    display: grid;
    min-width: 0;
}

body.leads-redesign .lead-summary-metric small {
    color: #7d899b;
    font-size: .61rem;
    font-weight: 600;
}

body.leads-redesign .lead-summary-metric strong {
    color: #1e2a3e;
    font-size: 1rem;
    letter-spacing: -.03em;
    line-height: 1.25;
    white-space: nowrap;
}

body.leads-redesign .lead-summary-metric em {
    color: #4aa66f;
    font-size: .58rem;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 681px) {
    html.sidebar-is-collapsed body.leads-redesign .sidebar {
        transform: none;
    }

    html.sidebar-is-collapsed body.leads-redesign .main-content {
        margin-left: 216px;
    }
}

@media (max-width: 1180px) {
    body.leads-redesign .lead-global-search {
        display: none;
    }

    body.leads-redesign .lead-toolbar {
        flex-wrap: wrap;
    }

    body.leads-redesign .lead-toolbar-modes {
        margin-left: 0;
    }

    body.leads-redesign .lead-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1rem;
    }

    body.leads-redesign .lead-summary-metric:nth-child(4) {
        border-left: 0;
    }
}

@media (max-width: 680px) {
    body.leads-redesign .main-content {
        margin-left: 0;
        padding: 0 1rem 5.9rem;
    }

    body.leads-redesign .lead-workspace-topbar {
        margin: 0 -1rem;
        min-height: 72px;
        padding: 0 1rem;
    }

    body.leads-redesign .lead-page-identity h1 {
        font-size: 1.08rem;
    }

    body.leads-redesign .lead-page-identity p,
    body.leads-redesign .lead-user-menu > span:not(.lead-user-avatar),
    body.leads-redesign .lead-user-menu > svg {
        display: none;
    }

    body.leads-redesign .lead-topbar-actions {
        gap: .7rem;
    }

    body.leads-redesign .lead-toolbar-search {
        flex-basis: 100%;
        width: 100%;
    }

    body.leads-redesign .lead-toolbar-select {
        flex: 1 1 calc(50% - .35rem);
    }

    body.leads-redesign .lead-toolbar-select select {
        min-width: 0;
    }

    body.leads-redesign .lead-toolbar-modes {
        flex-basis: 100%;
        gap: .45rem;
        overflow-x: auto;
        padding-bottom: .1rem;
    }

    body.leads-redesign .lead-mode {
        flex: 0 0 auto;
    }

    body.leads-redesign .lead-kanban-scroll {
        --kanban-column-height: min(63vh, 520px);
    }

    body.leads-redesign .kanban-column {
        width: min(276px, calc(100vw - 3rem));
    }

    body.leads-redesign .lead-summary-strip {
        grid-template-columns: 1fr;
        padding: .4rem 1rem;
    }

    body.leads-redesign .lead-summary-metric,
    body.leads-redesign .lead-summary-metric:nth-child(4) {
        border-left: 0;
        border-top: 1px solid #e5eaf1;
        padding: .8rem 0;
    }

    body.leads-redesign .lead-summary-metric:first-child {
        border-top: 0;
    }
}

/* Keep the established workspace header and navigation around the redesigned board. */
body.leads-redesign {
    --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    background: var(--canvas);
    color: var(--ink);
}

body.leads-redesign .page-heading h1 {
    font-family: var(--display);
}

body.leads-redesign .sidebar {
    background: var(--ink);
    border-right: 0;
    color: #dadad7;
    padding: 1.35rem 1rem;
    width: 216px;
}

body.leads-redesign .brand {
    color: var(--paper);
    font-size: 1.27rem;
    letter-spacing: -.07em;
    margin: 0 .48rem 2.2rem;
}

body.leads-redesign .brand-mark {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    height: 27px;
    letter-spacing: -.1em;
    padding-right: .08rem;
    width: 27px;
}

body.leads-redesign .primary-nav {
    gap: .26rem;
}

body.leads-redesign .nav-item {
    border-radius: .65rem;
    color: #adadaa;
    font-size: .8rem;
    font-weight: 600;
    gap: .8rem;
    min-height: 42px;
    padding: .65rem .72rem;
}

body.leads-redesign a.nav-item:hover,
body.leads-redesign .nav-item:hover,
body.leads-redesign .nav-item.active {
    background: #292928;
    box-shadow: none;
    color: var(--paper);
}

body.leads-redesign .nav-item svg {
    height: 18px;
    stroke-width: 1.7;
    width: 18px;
}

body.leads-redesign .nav-divider {
    background: #343432;
    margin: .75rem .45rem;
}

body.leads-redesign .logout-form .nav-item:hover {
    background: #292928;
}

body.leads-redesign .main-content {
    background: transparent;
    margin-left: 216px;
    padding: 0 clamp(1.25rem, 4vw, 4.2rem) 4.5rem;
}

body.leads-redesign .lead-board-workspace {
    --sans: "Inter", "DM Sans", "Helvetica Neue", Arial, sans-serif;
    font-family: var(--sans);
    padding-top: 0;
}

@media (min-width: 681px) {
    html.sidebar-is-collapsed body.leads-redesign .sidebar {
        transform: translateX(-100%);
    }

    html.sidebar-is-collapsed body.leads-redesign .main-content {
        margin-left: 0;
    }
}

@media (min-width: 681px) and (max-width: 860px) {
    body.leads-redesign .sidebar {
        padding: 1.1rem .75rem;
        width: 184px;
    }

    body.leads-redesign .main-content {
        margin-left: 184px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    body.leads-redesign .nav-item {
        gap: .62rem;
        padding-left: .6rem;
    }
}

@media (max-width: 680px) {
    body.leads-redesign .sidebar {
        padding: .38rem .42rem;
        width: auto;
    }

    body.leads-redesign .primary-nav {
        gap: .12rem;
    }

    body.leads-redesign .nav-item {
        font-size: .58rem;
        gap: .12rem;
        min-height: 55px;
        padding: .32rem .4rem;
    }

    body.leads-redesign .main-content {
        margin-left: 0;
        padding: 0 1rem 6.5rem;
    }
}

/* Follow-up queue — an action-first CRM working view. */
body.task-queue-page .task-page-heading {
    align-items: flex-end;
    gap: 1.5rem;
    max-width: 1380px;
    padding-bottom: 1.4rem;
}

body.task-queue-page .task-page-copy > p:last-child {
    max-width: 660px;
}

body.task-queue-page .task-overview {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .8rem;
    display: grid;
    flex: 0 0 auto;
    gap: .04rem;
    grid-template-columns: auto auto;
    min-width: 148px;
    padding: .62rem .8rem;
}

body.task-queue-page .task-overview > span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.task-queue-page .task-overview strong {
    font-size: 1.52rem;
    letter-spacing: -.06em;
    line-height: 1;
}

body.task-queue-page .task-overview em {
    color: var(--accent);
    font-size: .63rem;
    font-style: normal;
    font-weight: 700;
    grid-column: 1 / -1;
}

body.task-queue-page .task-workspace {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 14px 35px rgba(17, 17, 17, .04);
    max-width: 1380px;
    overflow: hidden;
}

body.task-queue-page .task-workspace-toolbar {
    align-items: center;
    background: #fbfbfa;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .78rem 1rem;
}

body.task-queue-page .task-filter-tabs {
    align-items: center;
    background: #efefed;
    border: 1px solid #e3e3e0;
    border-radius: .7rem;
    display: inline-flex;
    gap: .22rem;
    padding: .22rem;
}

body.task-queue-page .task-filter-tab {
    align-items: center;
    border-radius: .5rem;
    color: var(--muted);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    gap: .42rem;
    min-height: 30px;
    padding: .38rem .55rem;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease;
    white-space: nowrap;
}

body.task-queue-page .task-filter-tab b {
    align-items: center;
    background: #ddddda;
    border-radius: 99px;
    color: #5c5c58;
    display: inline-flex;
    font-size: .59rem;
    height: 17px;
    justify-content: center;
    min-width: 17px;
    padding: 0 .28rem;
}

body.task-queue-page .task-filter-tab:hover {
    background: rgba(255, 255, 255, .72);
    color: var(--ink);
}

body.task-queue-page .task-filter-tab.is-active {
    background: var(--ink);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .16);
    color: var(--paper);
}

body.task-queue-page .task-filter-tab.is-active b {
    background: rgba(255, 255, 255, .18);
    color: var(--paper);
}

body.task-queue-page .task-list-range {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

body.task-queue-page .task-queue-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

body.task-queue-page .task-queue-heading,
body.task-queue-page .task-queue-row {
    grid-template-columns: minmax(220px, .88fr) minmax(285px, 1.34fr) minmax(165px, .64fr) auto;
}

body.task-queue-page .task-queue-heading {
    background: #ffffff;
    color: #858580;
    font-size: .6rem;
    gap: 1.25rem;
    letter-spacing: .1em;
    padding: .75rem 1.05rem;
}

body.task-queue-page .task-queue-heading > span:last-child {
    justify-self: end;
}

body.task-queue-page .task-queue-row {
    align-items: center;
    color: var(--ink) !important;
    gap: 1.25rem;
    min-height: 88px;
    padding: .82rem 1.05rem;
    position: relative;
    transition: background .16s ease, box-shadow .16s ease;
}

body.task-queue-page .task-queue-row:hover {
    background: #fbfbfa;
}

body.task-queue-page .task-queue-row.is-overdue {
    background: #fff9f7;
    box-shadow: inset 3px 0 var(--accent);
}

body.task-queue-page .task-queue-row.is-overdue:hover {
    background: #fff5f1;
}

body.task-queue-page .task-lead {
    align-items: center;
    gap: .68rem;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
}

body.task-queue-page .task-lead-avatar {
    align-items: center;
    background: #eceff5;
    border-radius: 50%;
    color: #4f617d;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

body.task-queue-page .task-queue-row:nth-child(5n + 2) .task-lead-avatar { background: #eaf5ee; color: #427d59; }
body.task-queue-page .task-queue-row:nth-child(5n + 3) .task-lead-avatar { background: #f2edff; color: #7760ad; }
body.task-queue-page .task-queue-row:nth-child(5n + 4) .task-lead-avatar { background: #fff0e8; color: #ae6944; }
body.task-queue-page .task-queue-row:nth-child(5n + 5) .task-lead-avatar { background: #fff0f1; color: #b25e6b; }

body.task-queue-page .task-lead-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

body.task-queue-page .task-lead strong {
    color: var(--ink);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.task-queue-page .task-lead small {
    color: var(--muted);
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.task-queue-page .task-lead:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.task-queue-page .task-description {
    color: var(--ink-soft);
    min-width: 0;
}

body.task-queue-page .task-description p {
    font-size: .76rem;
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.task-queue-page .task-due {
    display: grid;
    gap: .12rem;
}

body.task-queue-page .task-due > span {
    color: #67706c;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.task-queue-page .task-due time {
    color: var(--muted);
    font-size: .67rem;
    white-space: nowrap;
}

body.task-queue-page .task-due.is-overdue > span,
body.task-queue-page .task-due.is-overdue time {
    color: var(--accent) !important;
}

body.task-queue-page .task-actions {
    align-items: center;
    flex-wrap: nowrap;
    gap: .45rem;
    justify-content: flex-end;
}

body.task-queue-page .task-action-details summary.task-action-button {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    border-radius: .5rem;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: .66rem;
    font-weight: 700;
    gap: .34rem;
    min-height: 32px;
    padding: .38rem .52rem;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.task-queue-page .task-action-button svg {
    height: 14px;
    width: 14px;
}

body.task-queue-page .task-action-details summary.task-action-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

body.task-queue-page .task-action-details summary.task-action-button:hover,
body.task-queue-page .task-action-details[open] > summary.task-action-button {
    background: #f0f0ee;
    border-color: #bcbcb7;
    color: var(--ink);
}

body.task-queue-page .task-action-details[open] > summary.task-action-primary {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: var(--paper);
}

body.task-queue-page .task-action-details[open] > form {
    border-color: #c8c8c3;
    box-shadow: 0 18px 42px rgba(17, 17, 17, .15);
    margin-top: 0;
    min-width: min(310px, calc(100vw - 3rem));
    padding: .9rem;
    top: calc(100% + .5rem);
}

body.task-queue-page .task-pagination {
    align-items: center;
    background: #fbfbfa;
    border-top: 1px solid var(--line);
    display: grid;
    font-size: .7rem;
    grid-template-columns: 1fr auto 1fr;
    margin: 0;
    padding: .78rem 1rem;
}

body.task-queue-page .task-pagination-link {
    align-items: center;
    border: 1px solid var(--line-dark);
    border-radius: .48rem;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: .67rem;
    font-weight: 700;
    justify-self: start;
    min-height: 31px;
    padding: .34rem .55rem;
}

body.task-queue-page .task-pagination-link:last-child {
    justify-self: end;
}

body.task-queue-page .task-pagination a.task-pagination-link:hover {
    background: var(--surface);
    border-color: var(--ink-soft);
    color: var(--ink);
    text-decoration: none;
}

body.task-queue-page .task-pagination-link.is-disabled {
    background: transparent;
    border-color: transparent;
    color: #aaa9a5;
}

body.task-queue-page .task-page-summary {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

body.task-queue-page .task-page-summary i {
    color: var(--line-dark);
    font-style: normal;
    margin: 0 .22rem;
}

@media (max-width: 860px) {
    body.task-queue-page .task-queue-heading,
    body.task-queue-page .task-queue-row {
        grid-template-columns: minmax(190px, .9fr) minmax(220px, 1.2fr) minmax(145px, .65fr) auto;
    }

    body.task-queue-page .task-workspace-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    body.task-queue-page .task-page-heading {
        align-items: stretch;
        gap: .85rem;
        padding-bottom: 1.1rem;
    }

    body.task-queue-page .task-overview {
        min-width: 0;
        width: 100%;
    }

    body.task-queue-page .task-workspace {
        border-radius: .85rem;
    }

    body.task-queue-page .task-workspace-toolbar {
        gap: .7rem;
        padding: .7rem;
    }

    body.task-queue-page .task-filter-tabs {
        max-width: 100%;
        overflow-x: auto;
        width: 100%;
    }

    body.task-queue-page .task-filter-tab {
        flex: 1 0 auto;
        justify-content: center;
    }

    body.task-queue-page .task-list-range {
        padding-left: .15rem;
    }

    body.task-queue-page .task-queue-heading {
        display: none;
    }

    body.task-queue-page .task-queue-row {
        gap: .68rem;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        padding: .9rem;
    }

    body.task-queue-page .task-description {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.task-queue-page .task-description p {
        white-space: normal;
    }

    body.task-queue-page .task-due {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    body.task-queue-page .task-actions {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    body.task-queue-page .task-action-details {
        flex: 1;
    }

    body.task-queue-page .task-action-details summary.task-action-button {
        justify-content: center;
        width: 100%;
    }

    body.task-queue-page .task-action-details[open] > form {
        left: 0;
        right: auto;
    }

    body.task-queue-page .task-pagination {
        gap: .65rem;
        grid-template-columns: 1fr 1fr;
        padding: .75rem .7rem;
    }

    body.task-queue-page .task-page-summary {
        grid-column: 1 / -1;
        grid-row: 1;
        white-space: normal;
    }

    body.task-queue-page .task-pagination-link:last-child {
        justify-self: end;
    }
}

/* Account menu, profile photos, and profile settings */
.profile-avatar {
    flex: 0 0 auto;
    overflow: hidden;
}

.profile-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.topbar-user-menu {
    position: relative;
    z-index: 12;
}

.topbar-user-menu > summary {
    list-style: none;
}

.topbar-user-menu > summary::-webkit-details-marker {
    display: none;
}

.topbar-user {
    background: transparent;
    border: 0;
    border-radius: .7rem;
    cursor: pointer;
    padding: .42rem;
    transition: background .16s ease;
}

.topbar-user:hover,
.topbar-user-menu[open] .topbar-user {
    background: var(--surface-muted);
}

.topbar-user-chevron {
    color: var(--muted);
    height: 15px;
    margin-left: .05rem;
    transition: transform .16s ease;
    width: 15px;
}

.topbar-user-menu[open] .topbar-user-chevron {
    transform: rotate(180deg);
}

.account-menu-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .8rem;
    box-shadow: 0 18px 42px rgba(17, 17, 17, .14);
    display: grid;
    gap: .15rem;
    min-width: 248px;
    padding: .35rem;
    position: absolute;
    right: 0;
    top: calc(100% + .55rem);
}

.account-menu-panel form {
    margin: 0;
}

.account-menu-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .55rem;
    color: var(--ink);
    display: grid;
    font: inherit;
    gap: .65rem;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: .65rem .68rem;
    text-align: left;
    transition: background .16s ease, color .16s ease;
    width: 100%;
}

.account-menu-action:hover {
    background: var(--surface-muted);
}

.account-menu-action svg {
    height: 18px;
    width: 18px;
}

.account-menu-action strong,
.account-menu-action small {
    display: block;
}

.account-menu-action strong {
    font-size: .76rem;
}

.account-menu-action small {
    font-size: .65rem;
    margin-top: .08rem;
}

.account-menu-logout {
    color: var(--accent-dark);
}

.settings-layout {
    align-items: start;
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    max-width: 900px;
    padding-bottom: 2rem;
}

.settings-nav-panel {
    padding: 1rem;
}

.settings-nav {
    display: grid;
    gap: .35rem;
    margin-top: .7rem;
}

.settings-nav-link {
    border-radius: .55rem;
    color: var(--muted);
    display: block;
    padding: .7rem .75rem;
}

.settings-nav-link:hover,
.settings-nav-link.is-active {
    background: var(--surface-muted);
    color: var(--ink);
}

.settings-nav-link strong,
.settings-nav-link small {
    display: block;
}

.settings-nav-link strong {
    font-size: .82rem;
}

.settings-nav-link small {
    font-size: .7rem;
    line-height: 1.35;
    margin-top: .12rem;
}

.profile-layout {
    align-items: start;
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(235px, .58fr) minmax(0, 1.12fr);
    max-width: 980px;
    padding-bottom: 2rem;
}

.profile-summary-panel {
    min-height: 100%;
}

.profile-summary-avatar {
    margin-bottom: 1.15rem;
}

.avatar.profile-avatar-large {
    border: 4px solid var(--surface-muted);
    height: 92px;
    width: 92px;
}

.profile-summary-panel h2 {
    font-size: 1.7rem;
}

.profile-security-section {
    border-top: 1px solid var(--line);
    margin-top: 2rem;
    padding-top: 1.7rem;
}

.profile-password-form {
    margin-top: 1.2rem;
    max-width: 480px;
}

.profile-password-recovery {
    color: var(--muted);
    font-size: .82rem;
    margin: -.3rem 0 .2rem;
}

.profile-password-recovery a {
    color: var(--ink);
    font-weight: 700;
}

.profile-summary-email {
    color: var(--muted);
    font-size: .8rem;
    margin-top: .3rem;
    overflow-wrap: anywhere;
}

.profile-facts {
    border-top: 1px solid var(--line);
    display: grid;
    gap: .75rem;
    margin: 1.35rem 0 0;
    padding-top: 1.15rem;
}

.profile-facts div {
    display: grid;
    gap: .08rem;
}

.profile-facts dt {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-facts dd {
    font-size: .78rem;
    font-weight: 600;
    margin: 0;
}

.profile-photo-field input[type="file"] {
    background: var(--surface-muted);
    border-style: dashed;
    cursor: pointer;
    font-size: .73rem;
    padding: .45rem;
}

.profile-photo-field input[type="file"]::file-selector-button {
    background: var(--ink);
    border: 0;
    border-radius: .38rem;
    color: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    font-weight: 700;
    margin-right: .65rem;
    padding: .48rem .62rem;
}

/* Lead assignment with a visible photo and account name. */
.assignee-field {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.assignee-field > legend {
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
    padding: 0;
}

.assignee-dropdown {
    min-width: 0;
    position: relative;
}

.assignee-dropdown > summary {
    list-style: none;
}

.assignee-dropdown > summary::-webkit-details-marker {
    display: none;
}

.assignee-dropdown-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-dark);
    border-radius: .65rem;
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 54px;
    padding: .42rem .55rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.assignee-dropdown-toggle:hover,
.assignee-dropdown[open] .assignee-dropdown-toggle {
    border-color: var(--ink-soft);
}

.assignee-dropdown-toggle:focus-visible {
    outline: 3px solid rgba(196, 80, 56, .28);
    outline-offset: 2px;
}

.assignee-dropdown-selected {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: 32px minmax(0, 1fr);
    min-width: 0;
}

.assignee-avatar {
    background: var(--surface-muted);
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

.assignee-dropdown-copy {
    min-width: 0;
}

.assignee-dropdown-copy strong,
.assignee-dropdown-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignee-dropdown-copy strong {
    font-size: .72rem;
}

.assignee-dropdown-copy small {
    font-size: .61rem;
    margin-top: .08rem;
}

.assignee-dropdown-chevron {
    color: var(--muted);
    height: 17px;
    transition: transform .16s ease;
    width: 17px;
}

.assignee-dropdown[open] .assignee-dropdown-chevron {
    transform: rotate(180deg);
}

.assignee-dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--line-dark);
    border-radius: .7rem;
    box-shadow: 0 16px 34px rgba(17, 17, 17, .14);
    display: grid;
    gap: .14rem;
    left: 0;
    max-height: min(370px, 48vh);
    overflow-y: auto;
    padding: .32rem;
    position: absolute;
    right: 0;
    top: calc(100% + .38rem);
    z-index: 16;
}

.assignee-dropdown-option {
    cursor: pointer;
    display: block;
    min-width: 0;
    position: relative;
}

.assignee-dropdown-input {
    appearance: none;
    border: 0;
    height: 1px;
    margin: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 1px;
}

.assignee-dropdown-option-content {
    align-items: center;
    border-radius: .5rem;
    display: grid;
    gap: .55rem;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 47px;
    padding: .4rem .45rem;
    transition: background .16s ease;
}

.assignee-dropdown-option:hover .assignee-dropdown-option-content {
    background: var(--surface-muted);
}

.assignee-dropdown-input:checked + .assignee-dropdown-option-content {
    background: var(--accent-wash);
}

.assignee-dropdown-input:focus-visible + .assignee-dropdown-option-content {
    outline: 3px solid rgba(196, 80, 56, .28);
    outline-offset: 1px;
}

.assignee-dropdown-check {
    align-items: center;
    background: var(--accent);
    border-radius: 50%;
    color: var(--paper);
    display: inline-flex;
    font-size: .62rem;
    font-weight: 700;
    height: 17px;
    justify-content: center;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s ease, transform .16s ease;
    width: 17px;
}

.assignee-dropdown-input:checked + .assignee-dropdown-option-content .assignee-dropdown-check {
    opacity: 1;
    transform: scale(1);
}

/* Compact status switch used by team and services forms. */
.status-toggle-field {
    display: grid;
    gap: .38rem;
}

.status-toggle-field > span {
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
}

.status-toggle {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: .7rem;
    cursor: pointer;
    display: grid;
    gap: .65rem;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 61px;
    padding: .55rem .65rem;
    transition: background .16s ease, border-color .16s ease;
}

.status-toggle:hover {
    border-color: var(--line-dark);
}

.status-toggle input {
    appearance: none;
    border: 0;
    height: 1px;
    margin: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 1px;
}

.status-toggle-control {
    background: #a7aaa6;
    border-radius: 999px;
    height: 24px;
    position: relative;
    transition: background .16s ease;
    width: 42px;
}

.status-toggle-control::after {
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(17, 17, 17, .18);
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    top: 3px;
    transform: translateX(0);
    transition: transform .16s ease;
    width: 18px;
}

.status-toggle input:checked + .status-toggle-control {
    background: #3d8061;
}

.status-toggle input:checked + .status-toggle-control::after {
    transform: translateX(18px);
}

.status-toggle input:focus-visible + .status-toggle-control {
    outline: 3px solid rgba(196, 80, 56, .28);
    outline-offset: 2px;
}

.status-toggle-copy strong,
.status-toggle-copy small {
    display: block;
}

.status-toggle-copy strong {
    font-size: .75rem;
}

.status-toggle-copy small {
    font-size: .64rem;
    margin-top: .1rem;
}

.status-label-off {
    display: none;
}

.status-toggle input:not(:checked) ~ .status-toggle-copy .status-label-on {
    display: none;
}

.status-toggle input:not(:checked) ~ .status-toggle-copy .status-label-off {
    display: inline;
}

@media (max-width: 680px) {
    .topbar-user-copy,
    .topbar-user-chevron {
        display: none;
    }

    .topbar-user {
        padding: .25rem;
    }

    .account-menu-panel {
        min-width: min(248px, calc(100vw - 2rem));
    }

    .profile-layout,
    .settings-layout {
        grid-template-columns: 1fr;
    }
}

/* Site visits: a real appointment layer beside the normal follow-up queue. */
.site-visits-panel.needs-site-visit {
    border-color: rgba(196, 80, 56, .45);
    box-shadow: 0 0 0 3px rgba(196, 80, 56, .08);
}

.site-visit-prompt {
    background: var(--accent-wash);
    border-radius: .65rem;
    color: var(--ink-soft);
    font-size: .76rem;
    line-height: 1.5;
    margin: -.25rem 0 .9rem;
    padding: .7rem .8rem;
}

.site-visit-assignee-note {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.45;
    margin: 0;
}

.site-visit-assignee-note strong {
    color: var(--ink);
}

.lead-site-visit-list {
    display: grid;
}

.lead-site-visit {
    border-top: 1px solid var(--line);
    display: grid;
    gap: .42rem;
    padding: .8rem 0;
}

.lead-site-visit:first-child {
    border-top: 0;
}

.lead-site-visit.is-closed {
    opacity: .64;
}

.lead-site-visit-top {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
}

.lead-site-visit-top strong,
.lead-site-visit-top small {
    display: block;
}

.lead-site-visit-top strong {
    font-size: .76rem;
}

.lead-site-visit-top small,
.lead-site-visit-assignee {
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.35;
}

.visit-status {
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .28rem .45rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.visit-status-scheduled {
    background: var(--accent-wash);
    color: var(--accent-dark);
}

.visit-status-completed {
    background: #e4f1e9;
    color: #286345;
}

.visit-status-cancelled {
    background: #eeeae6;
    color: #73716d;
}

.lead-site-visit-actions,
.calendar-visit-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .2rem;
}

.lead-site-visit-actions form,
.calendar-visit-actions form {
    margin: 0;
}

.text-button-danger {
    color: #a74633;
}

.schedule-site-visit {
    border-top: 1px solid var(--line);
    margin-top: .55rem;
    padding-top: .75rem;
}

.schedule-site-visit summary,
.reschedule-site-visit summary {
    color: var(--ink);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    list-style: none;
}

.schedule-site-visit summary::-webkit-details-marker,
.reschedule-site-visit summary::-webkit-details-marker {
    display: none;
}

.schedule-site-visit summary {
    display: flex;
    justify-content: space-between;
}

.schedule-site-visit[open] summary {
    margin-bottom: .75rem;
}

/* Keep Reschedule alongside Complete and Cancel. When opened, only its form
   expands to a new full-width row instead of leaving the trigger detached. */
.reschedule-site-visit {
    border: 0;
    margin: 0;
    padding: 0;
}

.reschedule-site-visit summary {
    align-items: center;
    display: inline-flex;
    font-size: .7rem;
    min-height: 1rem;
}

.reschedule-site-visit[open] {
    flex-basis: 100%;
    width: 100%;
}

.reschedule-site-visit[open] .inline-form {
    border-top: 1px solid var(--line);
    margin-top: .7rem;
    padding-top: .8rem;
}

.site-visits-panel input[type="checkbox"] {
    accent-color: var(--accent);
    min-height: 18px;
    padding: 0;
    width: 18px;
}

.site-visit-calendar-heading {
    align-items: flex-end;
}

.site-visit-overview {
    background: var(--ink);
    border-radius: .85rem;
    color: var(--paper);
    display: grid;
    min-width: 118px;
    padding: .85rem 1rem;
}

.site-visit-overview span,
.site-visit-overview em {
    color: rgba(255, 255, 255, .67);
    font-size: .62rem;
    font-style: normal;
}

.site-visit-overview strong {
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 1.1;
    margin: .18rem 0;
}

.site-visit-calendar {
    padding: 0;
    overflow: hidden;
}

.site-visit-calendar-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: space-between;
    padding: .8rem 1rem;
}

.calendar-view-tabs,
.calendar-navigation {
    align-items: center;
    display: flex;
    gap: .28rem;
}

.calendar-view-tab,
.calendar-nav-button,
.calendar-today-link {
    border-radius: .48rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    padding: .43rem .62rem;
}

.calendar-view-tab.is-active {
    background: var(--ink);
    color: var(--paper);
}

.calendar-nav-button {
    align-items: center;
    background: var(--surface-muted);
    color: var(--ink);
    display: inline-flex;
    font-size: 1rem;
    height: 29px;
    justify-content: center;
    padding: 0;
    width: 29px;
}

.calendar-today-link:hover,
.calendar-view-tab:not(.is-active):hover {
    background: var(--surface-muted);
    color: var(--ink);
}

.calendar-period-heading {
    align-items: baseline;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    padding: 1rem 1rem .75rem;
}

.calendar-period-heading h2 {
    font-size: 1.05rem;
}

.calendar-period-heading p {
    color: var(--muted);
    font-size: .63rem;
}

.site-visit-calendar-grid {
    display: grid;
}

.site-visit-calendar-grid.is-week {
    grid-template-columns: repeat(7, minmax(145px, 1fr));
    min-width: 980px;
}

.site-visit-calendar-grid.is-week {
    overflow: hidden;
}

.site-visit-calendar:has(.site-visit-calendar-grid.is-week) {
    overflow-x: auto;
}

.site-visit-calendar-day {
    border-top: 1px solid var(--line);
    min-height: 250px;
    padding: .75rem;
}

.site-visit-calendar-grid.is-week .site-visit-calendar-day {
    border-right: 1px solid var(--line);
}

.site-visit-calendar-grid.is-week .site-visit-calendar-day:last-child {
    border-right: 0;
}

.site-visit-calendar-day.is-today {
    background: #fcf7f3;
}

.site-visit-calendar-day > header {
    align-items: baseline;
    display: flex;
    gap: .35rem;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.calendar-day-name {
    color: var(--muted);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.calendar-day-name-short {
    display: none;
}

.site-visit-calendar-day > header strong {
    font-size: .72rem;
}

.site-visit-calendar-day > header em {
    background: var(--accent);
    border-radius: 999px;
    color: var(--paper);
    font-size: .54rem;
    font-style: normal;
    font-weight: 700;
    padding: .2rem .34rem;
}

.site-visit-calendar-items {
    display: grid;
    gap: .55rem;
}

.calendar-visit-card {
    background: var(--surface);
    border: 1px solid var(--line-dark);
    border-left: 3px solid var(--accent);
    border-radius: .55rem;
    display: grid;
    gap: .5rem;
    padding: .6rem;
}

.calendar-visit-time {
    color: var(--accent-dark);
    font-size: .68rem;
    font-weight: 700;
}

.calendar-visit-copy a {
    color: var(--ink);
    display: block;
    font-size: .74rem;
    font-weight: 700;
}

.calendar-visit-copy p {
    color: var(--ink-soft);
    font-size: .66rem;
    line-height: 1.35;
    margin-top: .2rem;
    overflow-wrap: anywhere;
}

.calendar-visit-copy small {
    display: block;
    font-size: .6rem;
    line-height: 1.35;
    margin-top: .3rem;
}

.calendar-visit-actions {
    border-top: 1px solid var(--line);
    gap: .55rem;
    padding-top: .5rem;
}

.calendar-empty-day {
    color: var(--muted);
    font-size: .67rem;
    padding: .5rem 0;
}

@media (max-width: 860px) {
    .site-visit-calendar-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-visit-calendar-grid.is-week {
        min-width: 900px;
    }
}

@media (max-width: 680px) {
    .lead-site-visit-top {
        gap: .45rem;
    }

    .site-visit-calendar-toolbar,
    .calendar-period-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-navigation {
        width: 100%;
    }

    .calendar-today-link {
        flex: 1;
        text-align: center;
    }

    .site-visit-calendar-grid.is-week {
        min-width: 840px;
    }

    .site-visit-calendar-day {
        min-height: 210px;
    }

    .calendar-day-name-full {
        display: none;
    }

    .calendar-day-name-short {
        display: inline;
    }
}

.page-heading-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.bulk-lead-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 1rem;
}

.bulk-lead-toolbar strong {
    margin-right: .25rem;
}

.bulk-lead-toolbar .field,
.bulk-lead-toolbar .select-field {
    margin: 0;
}

.bulk-lost-reason {
    max-width: 180px;
}

.duplicate-warning {
    margin-bottom: 1rem;
}

.duplicate-warning p,
.duplicate-warning ul {
    margin-top: .45rem;
}

.duplicate-warning ul {
    padding-left: 1.2rem;
}

.import-results {
    margin-top: 1rem;
}

.import-results h3 {
    margin-top: 1rem;
}

@media (max-width: 680px) {
    .page-heading-actions,
    .bulk-lead-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading-actions .button,
    .bulk-lead-toolbar .button,
    .bulk-lead-toolbar .select-field,
    .bulk-lead-toolbar .field {
        width: 100%;
    }
}

/* Keep the composer controls usable at narrow widths after the shared form rules. */
@media (max-width: 560px) {
    .campaign-sticky-bar-clean {
        flex-direction: row;
    }

    .campaign-sticky-bar-clean .button {
        width: auto;
    }
}

/* Campaign composer reference layout. This is scoped so the rest of the CRM keeps its existing shell. */
body.campaign-reference-page {
    background: #f7f7f5;
}

body.campaign-reference-page .sidebar {
    width: 240px;
}

body.campaign-reference-page .main-content {
    margin-left: 240px;
    padding: 0 3.45rem 5.5rem;
}

body.campaign-reference-page .campaign-reference-topbar {
    min-height: 65px;
}

.campaign-breadcrumb,
.campaign-topbar-actions,
.campaign-save-indicator {
    align-items: center;
    display: flex;
}

.campaign-breadcrumb {
    color: var(--muted);
    font-size: .78rem;
    gap: .8rem;
}

.campaign-breadcrumb b {
    color: var(--line-dark);
    font-size: 1rem;
    font-weight: 400;
}

.campaign-breadcrumb strong {
    color: var(--ink);
    font-weight: 700;
}

.campaign-topbar-actions {
    gap: 1.35rem;
}

.campaign-save-indicator {
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    gap: .45rem;
    padding-right: 1.35rem;
}

.campaign-save-indicator i {
    background: #2c9864;
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    width: 7px;
}

.campaign-reference-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    padding: 2rem 0 1.55rem;
}

.campaign-reference-heading .eyebrow {
    margin-bottom: .35rem;
}

.campaign-reference-heading h1 {
    font-size: clamp(2.25rem, 3.2vw, 3rem);
}

.campaign-reference-heading p:last-child {
    color: var(--muted);
    font-size: .93rem;
    margin-top: .45rem;
}

.campaign-step-nav {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .73rem;
    gap: .55rem;
    padding-bottom: .25rem;
}

.campaign-step-nav a:first-child,
.campaign-step-nav a:hover {
    color: var(--ink);
    font-weight: 700;
}

.campaign-step-nav span {
    color: var(--line-dark);
}

.campaign-reference-form {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 700px) minmax(300px, 380px);
    justify-content: space-between;
    max-width: 1100px;
}

.campaign-reference-editor {
    background: var(--paper);
    border: 1px solid #e2e2df;
    border-radius: .8rem;
    overflow: hidden;
}

.campaign-reference-section {
    border-bottom: 1px solid #e7e7e4;
    padding: 1.7rem 2rem 1.85rem;
}

.campaign-reference-section:last-child {
    border-bottom: 0;
}

.campaign-reference-section-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.3rem;
}

.campaign-reference-section-heading > div {
    align-items: center;
    display: flex;
    gap: .7rem;
}

.campaign-reference-section-heading h2 {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.campaign-reference-section-heading > span {
    color: var(--muted);
    font-size: .71rem;
}

.campaign-reference-section-heading b,
.campaign-reference-label-row b {
    color: var(--accent);
}

.campaign-reference-step {
    align-items: center;
    background: var(--ink);
    border-radius: 50%;
    color: var(--paper);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.campaign-reference-field {
    display: grid;
    gap: .38rem;
    margin-top: 1rem;
}

.campaign-reference-field > span,
.campaign-reference-label-row label,
.campaign-reference-filter > span,
.campaign-reference-test label,
.campaign-reference-schedule label > span {
    color: var(--ink-soft);
    font-size: .74rem;
    font-weight: 700;
}

.campaign-reference-label-row,
.campaign-reference-help,
.campaign-reference-test > div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.campaign-reference-label-row > span,
.campaign-reference-help > span,
.campaign-reference-help > small {
    color: var(--muted);
    font-size: .65rem;
}

.campaign-reference-field input,
.campaign-reference-field textarea,
.campaign-reference-select select,
.campaign-test-row input,
.campaign-reference-schedule input {
    border-color: #d8d8d4;
    border-radius: .55rem;
    min-height: 40px;
}

.campaign-reference-field input:focus,
.campaign-reference-field textarea:focus,
.campaign-reference-select select:focus,
.campaign-test-row input:focus,
.campaign-reference-schedule input:focus {
    border-color: #8d8d88;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .06);
}

.campaign-reference-field .campaign-input-with-action input {
    border-radius: .55rem 0 0 .55rem;
}

.campaign-reference-field .campaign-variable-picker {
    border-color: #d8d8d4;
    border-left: 0;
    border-radius: 0 .55rem .55rem 0;
    min-height: 40px;
}

.campaign-reference-body-field {
    margin-top: 1.25rem;
}

.campaign-reference-editor-shell {
    border: 1px solid #d8d8d4;
    border-radius: .55rem;
    margin-top: .45rem;
    overflow: hidden;
}

.campaign-reference-toolbar {
    background: #fbfbfa;
    border-bottom: 1px solid #e6e6e2;
    padding: .28rem .55rem;
}

.campaign-reference-toolbar button {
    color: #4b4b47;
    font-size: .76rem;
    min-height: 29px;
    min-width: 29px;
}

.campaign-reference-toolbar > i {
    background: #e2e2df;
    height: 18px;
    margin: 0 .25rem;
    width: 1px;
}

.campaign-reference-toolbar span,
.campaign-reference-toolbar small {
    display: none;
}

.campaign-reference-editor-shell .campaign-rich-editor {
    min-height: 185px;
    padding: .9rem 1rem;
}

.campaign-reference-help {
    color: var(--muted);
    display: block;
    line-height: 1.4;
    margin-top: .35rem;
}

.campaign-reference-dropzone {
    align-items: center;
    background: #fff;
    border: 1px dashed #cfcfca;
    border-radius: .55rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    justify-content: center;
    min-height: 69px;
    padding: .65rem;
}

.campaign-reference-dropzone .campaign-dropzone-icon {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 1rem;
    height: auto;
    width: auto;
}

.campaign-reference-dropzone strong {
    font-size: .74rem;
}

.campaign-reference-dropzone small {
    font-size: .63rem;
}

.campaign-reference-dropzone input[type="file"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.campaign-reference-section .campaign-file-list {
    gap: .35rem;
    margin-top: .45rem;
}

.campaign-reference-section .campaign-file-chip {
    background: #fff;
    border-color: #e1e1dd;
    padding: .48rem .6rem;
}

.campaign-reference-section .campaign-usage {
    margin-top: .35rem;
}

.campaign-reference-section .campaign-usage i {
    height: 3px;
}

.campaign-reference-advanced {
    border-top: 1px solid #e7e7e4;
    margin-top: 1.2rem;
    padding-top: .85rem;
}

.campaign-reference-advanced summary {
    align-items: center;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    font-size: .72rem;
    gap: .65rem;
    justify-content: flex-start;
    list-style: none;
}

.campaign-reference-advanced summary::-webkit-details-marker {
    display: none;
}

.campaign-reference-advanced summary::before {
    content: "▸";
    color: var(--ink);
    font-size: .72rem;
    transition: transform .16s ease;
}

.campaign-reference-advanced[open] summary::before {
    transform: rotate(90deg);
}

.campaign-reference-advanced summary span {
    color: var(--muted);
    font-size: .68rem;
}

.campaign-reference-advanced .campaign-advanced-grid {
    margin-top: .5rem;
}

.campaign-reference-filter {
    margin-top: 1rem;
}

.campaign-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin-top: .42rem;
}

.campaign-chip-group button {
    background: #fff;
    border: 1px solid #d8d8d4;
    border-radius: .38rem;
    color: #565651;
    font-size: .72rem;
    min-height: 34px;
    padding: .45rem .75rem;
}

.campaign-chip-group button:hover,
.campaign-chip-group button.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.campaign-hidden-field,
.campaign-reference-hidden-schedule {
    display: none;
}

.campaign-assignee-filter {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: 145px minmax(180px, 320px);
}

.campaign-reference-select select {
    min-height: 39px;
    width: 100%;
}

.campaign-reference-audience-count {
    align-items: center;
    background: #fafaf8;
    border: 1px solid #e5e5e1;
    border-radius: .55rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .7rem;
    gap: .35rem;
    margin-top: 1.1rem;
    padding: .65rem .75rem;
}

.campaign-reference-audience-count strong {
    color: var(--ink);
}

.campaign-reference-audience-count a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.campaign-reference-delivery-toggle {
    width: 185px;
}

.campaign-reference-schedule {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr 1fr;
    margin-top: .95rem;
    max-width: 520px;
}

.campaign-reference-schedule label {
    display: grid;
    gap: .35rem;
}

.campaign-reference-schedule[hidden] {
    display: none;
}

.campaign-reference-timezone {
    display: block;
    font-size: .65rem;
    margin-top: .4rem;
}

.campaign-reference-test {
    border-top: 1px solid #e7e7e4;
    display: grid;
    gap: 1rem;
    grid-template-columns: 145px minmax(0, 1fr);
    margin-top: 1.25rem;
    padding-top: 1.2rem;
}

.campaign-reference-test > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.campaign-reference-test > div:first-child small {
    color: #2d8b5b;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin-top: .15rem;
    text-transform: uppercase;
}

.campaign-test-row {
    display: flex;
    gap: .55rem;
}

.campaign-test-row input {
    min-width: 0;
    width: 100%;
}

.campaign-test-row .button {
    min-height: 40px;
    white-space: nowrap;
}

.campaign-delivery-note {
    font-size: .67rem;
    margin-top: .85rem;
}

.campaign-reference-rail {
    display: grid;
    gap: 1.1rem;
    position: sticky;
    top: 1rem;
}

.campaign-reference-summary,
.campaign-reference-preview {
    background: var(--paper);
    border: 1px solid #e2e2df;
    border-radius: .8rem;
    padding: 1.2rem 1.25rem;
}

.campaign-reference-summary .eyebrow,
.campaign-reference-preview .eyebrow {
    margin-bottom: .65rem;
}

.campaign-summary-count {
    align-items: baseline;
    display: flex;
    gap: .55rem;
}

.campaign-summary-count strong {
    font-family: var(--display);
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: -.08em;
    line-height: .95;
}

.campaign-summary-count span {
    font-size: .68rem;
    font-weight: 600;
}

.campaign-reference-summary dl {
    margin: .85rem 0 0;
}

.campaign-reference-summary dl div {
    align-items: baseline;
    border-top: 1px solid #e7e7e4;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: .55rem 0;
}

.campaign-reference-summary dt {
    color: var(--muted);
    font-size: .69rem;
}

.campaign-reference-summary dd {
    font-size: .69rem;
    font-weight: 700;
    margin: 0;
    max-width: 70%;
    overflow-wrap: anywhere;
    text-align: right;
}

.campaign-summary-checks {
    border-top: 1px solid #e7e7e4;
    display: grid;
    gap: .48rem;
    list-style: none;
    margin: .2rem 0 0;
    padding: .8rem 0 0;
}

.campaign-summary-checks li {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: .7rem;
    gap: .5rem;
}

.campaign-summary-checks i {
    align-items: center;
    border: 1px solid #c8c8c3;
    border-radius: 50%;
    color: transparent;
    display: inline-flex;
    font-size: .62rem;
    font-style: normal;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.campaign-summary-checks li.is-complete i {
    background: #2d9562;
    border-color: #2d9562;
    color: white;
}

.campaign-reference-preview-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.campaign-reference-preview-heading .eyebrow {
    margin: 0;
}

.campaign-reference-preview .campaign-preview-tabs {
    background: #efefec;
    border: 0;
    border-radius: .48rem;
    gap: 0;
    margin: 0;
    padding: .15rem;
}

.campaign-reference-preview .campaign-preview-tabs button {
    border: 0;
    border-radius: .35rem;
    color: var(--muted);
    font-size: .65rem;
    padding: .4rem .65rem;
}

.campaign-reference-preview .campaign-preview-tabs button.is-active {
    background: white;
    box-shadow: 0 1px 4px rgba(17, 17, 17, .1);
    color: var(--ink);
}

.campaign-reference-preview .campaign-inbox-preview {
    border-radius: .5rem .5rem 0 0;
    margin-top: 1rem;
    padding: .7rem .75rem;
}

.campaign-reference-preview .campaign-inbox-preview small {
    display: none;
}

.campaign-reference-preview .campaign-email-preview {
    border-radius: 0 0 .5rem .5rem;
    margin-top: 0;
}

.campaign-reference-preview .campaign-email-preview-top {
    padding: .7rem .75rem;
}

.campaign-reference-preview .campaign-preview-body {
    min-height: 195px;
    padding: .85rem .75rem .55rem;
}

.campaign-reference-preview .campaign-preview-footer {
    padding: .6rem .75rem;
}

.campaign-reference-preview .campaign-preview-brand {
    background: var(--ink);
    border-radius: .35rem;
    height: 28px;
    width: 28px;
}

.campaign-reference-actions {
    align-items: center;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #dededb;
    border-radius: .65rem;
    box-shadow: 0 -5px 22px rgba(17, 17, 17, .06);
    display: flex;
    gap: .6rem;
    grid-column: 1 / -1;
    padding: .65rem .85rem;
    position: sticky;
    z-index: 5;
}

.campaign-review-status {
    display: grid;
    gap: .08rem;
    margin-right: auto;
}

.campaign-review-status strong {
    font-size: .73rem;
}

.campaign-review-status small {
    font-size: .64rem;
}

.campaign-reference-review .campaign-review-status {
    background: #fafaf8;
    border: 1px solid #e5e5e1;
    border-radius: .55rem;
    padding: .75rem .85rem;
}

.campaign-reference-review .campaign-reference-actions {
    background: transparent;
    border: 0;
    border-top: 1px solid #e7e7e4;
    border-radius: 0;
    box-shadow: none;
    grid-column: auto;
    margin: 1.2rem -2rem -1.85rem;
    padding: 1rem 2rem 1.2rem;
    position: static;
}

.campaign-reference-actions .campaign-draft-status {
    border-left: 1px solid var(--line);
    margin: 0 auto 0 0;
    padding-left: .75rem;
}

@media (max-width: 1050px) {
    body.campaign-reference-page .main-content {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .campaign-reference-form {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 850px) {
    .campaign-reference-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .campaign-reference-form {
        grid-template-columns: 1fr;
    }

    .campaign-reference-rail {
        position: static;
    }
}

@media (max-width: 680px) {
    body.campaign-reference-page .sidebar {
        width: auto;
    }

    body.campaign-reference-page .main-content {
        margin-left: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .campaign-reference-topbar {
        gap: .6rem;
    }

    .campaign-breadcrumb {
        font-size: .7rem;
    }

    .campaign-save-indicator {
        display: none;
    }

    .campaign-reference-heading {
        padding-top: 1.35rem;
    }

    .campaign-reference-heading h1 {
        font-size: 2.2rem;
    }

    .campaign-step-nav {
        font-size: .65rem;
    }

    .campaign-reference-section {
        padding: 1.35rem 1rem;
    }

    .campaign-reference-section-heading > span {
        font-size: .63rem;
    }

    .campaign-assignee-filter,
    .campaign-reference-test {
        grid-template-columns: 1fr;
    }

    .campaign-reference-test > div:first-child {
        flex-direction: row;
        gap: .45rem;
    }

    .campaign-reference-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .campaign-reference-review .campaign-reference-actions {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: -1.35rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .campaign-review-status,
    .campaign-reference-actions .campaign-draft-status {
        flex-basis: 100%;
        margin: 0;
    }

    .campaign-reference-actions .campaign-draft-status {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: .45rem 0 0;
    }

    .campaign-reference-actions .button {
        flex: 1 1 calc(50% - .6rem);
        min-width: 0;
    }
}

/* Connected mail and shared inbox */
.mail-page-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
}

.mail-page-heading h1 {
    margin-top: .2rem;
}

.mail-page-heading-actions,
.mail-page-heading .page-heading-actions {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.mail-connect-options,
.mail-inbox-layout,
.mail-thread-detail-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
}

.mail-connect-options {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
}

.mail-connect-card {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: auto 1fr auto;
    padding: 1.1rem 1.2rem;
}

.mail-connect-card h2,
.mailboxes-panel h2,
.mail-inbox-note h2 {
    font-family: var(--display);
    font-size: 1.1rem;
    letter-spacing: -.035em;
}

.mail-connect-card p,
.mail-inbox-note p {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5;
    margin-top: .2rem;
}

.mail-provider-mark {
    align-items: center;
    background: var(--ink);
    border-radius: .55rem;
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--display);
    font-size: 1.1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.mail-provider-google {
    background: #fff;
    border: 1px solid var(--line);
    color: #4285f4;
}

.mail-provider-microsoft {
    background: #2967b1;
}

.mail-provider-imap {
    background: #4c4c47;
}

.mail-shared-link {
    color: var(--muted);
    font-size: .65rem;
    grid-column: 2 / -1;
    justify-self: end;
    margin-top: -.45rem;
}

.mail-shared-link:hover {
    color: var(--ink);
    text-decoration: underline;
}

.mailboxes-panel {
    padding: 1.2rem 1.35rem;
}

.panel-heading,
.mail-inbox-toolbar,
.mail-thread-statusbar,
.mailbox-row,
.mail-thread-detail-toolbar,
.mail-composer-heading,
.mail-composer-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.panel-heading > span,
.mail-thread-statusbar > span {
    color: var(--muted);
    font-size: .67rem;
}

.mailbox-list {
    display: grid;
    margin-top: 1rem;
}

.mailbox-row {
    border-top: 1px solid var(--line);
    gap: .75rem;
    padding: .8rem 0;
}

.mailbox-row > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.mailbox-row strong,
.mailbox-row p {
    display: block;
}

.mailbox-row strong {
    font-size: .79rem;
}

.mailbox-row p,
.mailbox-row > small {
    color: var(--muted);
    font-size: .66rem;
    margin-top: .12rem;
}

.mailbox-status,
.mail-status {
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    padding: .25rem .5rem;
    white-space: nowrap;
}

.mailbox-status-active,
.mail-status-open {
    background: #edf6ed;
    border-color: #c9e1ca;
    color: #3e7141;
}

.mailbox-status-error,
.mail-status-closed {
    background: var(--accent-wash);
    border-color: #efc6bc;
    color: var(--accent-dark);
}

.mailbox-status-pending,
.mail-status-waiting {
    background: #f6f0e1;
    border-color: #e9d7a9;
    color: #876a2d;
}

.mailbox-row form {
    flex: 0 0 auto;
}

.empty-state {
    color: var(--muted);
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state strong {
    color: var(--ink);
    display: block;
    font-size: .85rem;
}

.empty-state p {
    font-size: .73rem;
    margin: .35rem auto 1rem;
    max-width: 420px;
}

.mailbox-form {
    max-width: 820px;
    padding: 1.6rem;
}

.mail-form-grid {
    display: grid;
    gap: .85rem 1rem;
    grid-template-columns: 1fr 1fr;
}

.mail-form-grid .field-wide {
    grid-column: 1 / -1;
}

.mail-form-grid .checkbox-field {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 1.55rem;
    width: max-content;
}

.mail-form-grid .checkbox-field input {
    min-height: auto;
    width: auto;
}

.mailbox-form > .field-hint {
    display: block;
    margin-top: 1rem;
}

.mailbox-form .form-actions {
    border-top: 1px solid var(--line);
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1.4rem;
    padding-top: 1rem;
}

.mail-inbox-layout {
    grid-template-columns: minmax(0, 1fr) 285px;
}

.mail-thread-panel {
    min-width: 0;
    overflow: hidden;
}

.mail-inbox-toolbar {
    border-bottom: 1px solid var(--line);
    gap: 1rem;
    padding: .8rem 1rem;
}

.mail-filter-tabs {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
}

.mail-filter-tabs a,
.mail-thread-statusbar a {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.mail-filter-tabs a.is-active,
.mail-filter-tabs a:hover,
.mail-thread-statusbar a.is-active,
.mail-thread-statusbar a:hover {
    color: var(--ink);
}

.mail-thread-search {
    display: flex;
    gap: .4rem;
    max-width: 250px;
}

.mail-thread-search input {
    min-height: 35px;
    min-width: 0;
    width: 100%;
}

.mail-thread-search .button {
    min-height: 35px;
    padding: .55rem .7rem;
}

.mail-thread-statusbar {
    border-bottom: 1px solid var(--line);
    padding: .55rem 1rem;
}

.mail-thread-statusbar > div {
    display: flex;
    gap: .8rem;
}

.mail-thread-list {
    display: grid;
}

.mail-thread-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: .7rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .8rem 1rem;
    transition: background .16s ease;
}

.mail-thread-row:hover,
.mail-thread-row.is-open {
    background: #fafaf8;
}

.mail-thread-avatar,
.mail-message-avatar {
    align-items: center;
    background: var(--surface-muted);
    border-radius: 50%;
    color: var(--ink-soft);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.mail-thread-copy,
.mail-thread-meta {
    min-width: 0;
}

.mail-thread-copy strong,
.mail-thread-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-thread-copy strong {
    font-size: .78rem;
}

.mail-thread-copy small {
    color: var(--muted);
    font-size: .68rem;
    margin-top: .15rem;
}

.mail-thread-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.mail-thread-meta > small {
    color: var(--muted);
    font-size: .63rem;
}

.mail-inbox-note {
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

.mail-inbox-note h2 {
    font-size: 1.3rem;
    margin-top: .6rem;
}

.mail-inbox-note .quiet-link {
    display: inline-block;
    font-size: .7rem;
    margin-top: 1rem;
}

.mail-thread-detail-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.mail-conversation-panel {
    min-width: 0;
    padding: 1.1rem;
}

.mail-thread-detail-toolbar {
    border-bottom: 1px solid var(--line);
    padding: 0 0 .85rem;
}

.mail-thread-detail-toolbar strong,
.mail-thread-detail-toolbar small {
    display: block;
}

.mail-thread-detail-toolbar strong {
    font-size: .78rem;
}

.mail-thread-detail-toolbar small {
    color: var(--muted);
    font-size: .66rem;
    margin-top: .15rem;
}

.mail-thread-detail-toolbar select {
    min-height: 34px;
    width: 120px;
}

.mail-message-list {
    display: grid;
    gap: .8rem;
    padding: 1rem 0;
}

.mail-message {
    border: 1px solid var(--line);
    border-radius: .6rem;
    overflow: hidden;
}

.mail-message header {
    align-items: center;
    background: #fafaf8;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .6rem;
    padding: .65rem .75rem;
}

.mail-message header > div:nth-child(2) {
    flex: 1;
}

.mail-message header strong,
.mail-message header small {
    display: block;
}

.mail-message header strong {
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.mail-message header small,
.mail-message header > span {
    color: var(--muted);
    font-size: .62rem;
}

.mail-message header > span {
    align-self: flex-start;
}

.mail-message-body {
    color: var(--ink-soft);
    font-size: .8rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    padding: 1rem;
}

.mail-message-body p {
    margin-bottom: .7rem;
}

.mail-message-attachments {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem 1rem;
}

.mail-message-attachments span {
    background: var(--surface-muted);
    border-radius: .35rem;
    color: var(--muted);
    font-size: .64rem;
    padding: .3rem .45rem;
}

.mail-reply-composer {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.mail-composer-heading strong {
    font-size: .8rem;
}

.mail-composer-heading select {
    max-width: 250px;
}

.mail-composer-selects {
    display: flex;
    gap: .45rem;
}

.mail-composer-selects select {
    min-width: 150px;
}

.mail-template-panel {
    padding: 1rem 1.25rem;
}

.mail-template-list {
    display: grid;
}

.mail-template-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
}

.mail-template-row:last-child {
    border-bottom: 0;
}

.mail-template-row strong,
.mail-template-row p,
.mail-template-row small {
    display: block;
}

.mail-template-row strong {
    font-size: .78rem;
}

.mail-template-row p,
.mail-template-row small {
    color: var(--muted);
    font-size: .66rem;
    margin-top: .15rem;
}

@media (max-width: 620px) {
    .mail-composer-selects {
        flex-direction: column;
    }

    .mail-composer-selects select {
        max-width: none;
        width: 100%;
    }

    .mail-template-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

.mail-reply-composer textarea {
    margin-top: .65rem;
    min-height: 150px;
}

.mail-reply-composer input[type="file"] {
    margin-top: .55rem;
}

.mail-composer-actions {
    gap: 1rem;
    margin-top: .65rem;
}

.mail-composer-actions small {
    font-size: .65rem;
}

.mail-thread-side {
    display: grid;
    gap: .9rem;
}

.mail-thread-side > .panel {
    padding: 1rem 1.1rem;
}

.mail-thread-side h2 {
    font-size: 1.05rem;
}

.mail-thread-side .field {
    margin-top: .6rem;
}

.mail-thread-side .button {
    margin-top: .7rem;
    min-height: 35px;
    padding: .55rem .75rem;
}

.mail-notes {
    display: grid;
    gap: .6rem;
    margin-top: .7rem;
}

.mail-notes > div {
    border-top: 1px solid var(--line);
    padding-top: .55rem;
}

.mail-notes strong,
.mail-notes p,
.mail-notes small {
    display: block;
}

.mail-notes strong {
    font-size: .68rem;
}

.mail-notes p,
.mail-notes small {
    color: var(--muted);
    font-size: .65rem;
    margin-top: .15rem;
}

.mail-note-form {
    display: grid;
    gap: .45rem;
    margin-top: .8rem;
}

.mail-note-form textarea {
    min-height: 80px;
}

@media (max-width: 860px) {
    .mail-connect-options,
    .mail-inbox-layout,
    .mail-thread-detail-layout {
        grid-template-columns: 1fr;
    }

    .mail-inbox-note {
        position: static;
    }
}

@media (max-width: 620px) {
    .mail-page-heading,
    .mail-inbox-toolbar,
    .mail-composer-heading,
    .mail-composer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-page-heading .button,
    .mail-page-heading-actions,
    .mail-page-heading .page-heading-actions {
        width: 100%;
    }

    .mail-connect-options,
    .mail-form-grid {
        grid-template-columns: 1fr;
    }

    .mail-connect-card {
        grid-template-columns: auto 1fr;
    }

    .mail-connect-card .button,
    .mail-shared-link {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }

    .mail-form-grid .field-wide {
        grid-column: auto;
    }

    .mail-form-grid .checkbox-field {
        margin-top: 0;
    }

    .mail-thread-statusbar {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }

    .mail-thread-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mail-thread-meta {
        align-items: flex-start;
        grid-column: 2;
        flex-direction: row;
    }

    .mail-thread-search {
        max-width: none;
    }

    .mail-test-row,
    .mail-composer-heading select {
        max-width: none;
        width: 100%;
    }
}

.unmatched-mail-panel {
    padding: 1rem 1.25rem;
}

.unmatched-mail-list {
    display: grid;
}

.unmatched-mail-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 0;
}

.unmatched-mail-row:last-child {
    border-bottom: 0;
}

.unmatched-mail-row h2 {
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 700;
}

.unmatched-mail-row > div:first-child > p:not(.eyebrow) {
    color: var(--muted);
    font-size: .68rem;
    margin-top: .2rem;
}

.unmatched-mail-row .quiet-link {
    display: inline-block;
    font-size: .67rem;
    margin-top: .5rem;
}

.unmatched-mail-actions {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.unmatched-mail-actions details {
    position: relative;
}

.unmatched-mail-actions summary {
    list-style: none;
}

.unmatched-mail-actions summary::-webkit-details-marker {
    display: none;
}

.unmatched-lead-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .65rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: .45rem;
    padding: .8rem;
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    width: 255px;
    z-index: 3;
}

.unmatched-lead-form .field {
    margin-top: 0;
}

@media (max-width: 620px) {
    .unmatched-mail-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .unmatched-mail-actions {
        width: 100%;
    }
}