/* ============================================================
   Kookaburra Health — Marketing v2 (report-themed)
   Design tokens lifted from accounts/templates/accounts/reports/
   quarterly_audit.html so the marketing skin matches what the
   buyer actually receives each quarter.
   ============================================================ */

:root {
    /* Surfaces */
    --bg:           #FAF7F2;   /* warm parchment */
    --paper:        #FFFFFF;   /* card surface */
    --paper-alt:    #F5EFE3;   /* shaded band */

    /* Ink */
    --ink:          #1A2A28;   /* deep eucalypt-black */
    --ink-soft:     #4A5A55;
    --ink-mute:     #7A8580;
    --ink-faint:    #B5AE9F;

    /* Rules */
    --rule:         #DDD3C2;   /* hairline cream */
    --rule-soft:    #EDE6D8;

    /* Semantic accents — match report exactly */
    --accent:       #C8634A;   /* terracotta — primary brand */
    --accent-deep:  #A4523C;
    --accent-tint:  #F4E4DE;

    --strong:       #5B7B5A;   /* eucalypt sage — strengths */
    --strong-tint:  #E4EBE2;
    --on-track:     #6B8AA0;   /* steel blue — on-track */
    --on-track-tint:#E3EAF0;
    --watch:        #B89642;   /* honey/mustard — watch */
    --watch-tint:   #F1E8D2;
    --action:       #B05050;   /* deep rose — action */
    --action-tint:  #F1DCDA;

    /* Type */
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --container-w: 1080px;
    --pad-x:       clamp(1.25rem, 4vw, 2rem);
    --pad-y:       clamp(3rem, 7vw, 6rem);
    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   14px;

    /* Tabular figures helper for stats */
    --tnum: "tnum" 1, "lnum" 1;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-deep); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-weight: 400;
}
p { margin: 0 0 1rem; }

.container {
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* ---------- Eyebrow + section header ---------- */
.eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    display: inline-block;
    margin-bottom: 0.75rem;
}
.eyebrow-ink { color: var(--ink-soft); }

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    margin: 0 auto;
    max-width: 720px;
}
.section-header .section-sub {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    text-decoration: none;
}
.btn-lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}
.btn-secondary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}
.btn-secondary:hover {
    background: var(--ink);
    color: var(--paper);
}
.btn:disabled, .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Site header ---------- */
.site-header-v2 {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--rule);
}
.site-header-v2 .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
}
.site-brand:hover { color: var(--ink); }
.brand-mark {
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.brand-wordmark {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.site-nav {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.site-nav a {
    color: var(--ink-soft);
}
.site-nav a:hover { color: var(--accent); }
.site-nav-login {
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink) !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.site-nav-login:hover {
    border-color: var(--accent);
    background: var(--accent-tint);
}

/* ---------- Hero ---------- */
.hero {
    padding: clamp(0.85rem, 2.2vw, 1.5rem) 0 clamp(1rem, 2.5vw, 1.6rem);
    text-align: center;
}
.hero-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}
.hero-eyebrow-row .pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(200,99,74,.5);
    animation: pulse 2.5s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,99,74,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(200,99,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(200,99,74,0); }
}
.hero h1 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.2vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 auto 0.6rem;
    max-width: 680px;
}
.hero h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--ink-soft);
}
.hero-sub {
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    color: var(--ink-soft);
    max-width: 540px;
    margin: 0 auto 0.95rem;
    line-height: 1.5;
}
.hero-actions {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
/* ── Hero animated chat demo ──────────────────────────────────────────── */
.hero-chat-demo {
    max-width: 560px;
    margin: 0 auto 1.1rem;
    width: 100%;
}
.hero-chat-window {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    text-align: left;
}
.hero-chat-log {
    padding: 0.85rem 1rem;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.hc-msg {
    display: flex;
    animation: hcSlideIn 350ms ease-out both;
}
@keyframes hcSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hc-msg-user { justify-content: flex-end; }
.hc-msg-assistant { justify-content: flex-start; }
.hc-bubble {
    max-width: 82%;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius);
    line-height: 1.4;
    font-size: 0.86rem;
    word-wrap: break-word;
}
.hc-msg-user .hc-bubble {
    background: var(--accent);
    color: var(--paper);
    border-bottom-right-radius: var(--radius-sm);
}
.hc-msg-assistant .hc-bubble {
    background: var(--paper-alt);
    color: var(--ink);
    border-bottom-left-radius: var(--radius-sm);
}
.hc-thinking { color: var(--ink-mute); }
.hc-dots {
    display: inline-block;
    min-width: 1.7em;
    text-align: left;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--ink-mute);
}
.hc-fade-out {
    animation: hcFadeOut 600ms ease-out forwards;
}
@keyframes hcFadeOut {
    to { opacity: 0; transform: translateY(-4px); }
}

.hero-chat-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem 0.7rem;
    border-top: 1px solid var(--rule-soft);
}
.hero-chat-placeholder {
    flex: 1;
    color: var(--ink-mute);
    font-size: 0.82rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    min-height: 1.2em;          /* prevent collapse while text is being typed */
    white-space: pre-wrap;
    word-break: break-word;
}
.hero-chat-placeholder.is-typing { color: var(--ink); }
.hero-chat-placeholder.is-typing::after {
    content: '|';
    margin-left: 1px;
    color: var(--accent);
    animation: hcCursorBlink 0.9s steps(2) infinite;
}
@keyframes hcCursorBlink { 50% { opacity: 0; } }

.hero-chat-send {
    padding: 0.4rem 0.85rem;
    background: var(--accent);
    color: var(--paper);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.55;
    transition: opacity .15s ease, transform .15s ease;
}
.hero-chat-send.is-flashing {
    opacity: 1;
    transform: scale(1.04);
}

/* Visually-hidden but SR/SEO-readable list of the 4 example questions. */
.hero-chat-sr-list {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hc-msg, .hc-fade-out { animation: none; }
}
@media (max-width: 640px) {
    .hero-chat-log { min-height: 220px; padding: 0.85rem 0.95rem; }
    .hc-bubble { font-size: 0.86rem; }
    .hero-chat-input { padding: 0.5rem 0.9rem 0.7rem; }
}

/* ---------- "Latest post" pill (kept for parity) ---------- */
.latest-post {
    margin: 0.5rem auto 0;
    text-align: center;
    padding: 0 var(--pad-x);
}
.latest-post-card {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem 0.5rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.latest-post-card:hover {
    border-color: var(--accent);
    color: var(--ink);
}
.latest-pill {
    padding: 0.15rem 0.55rem;
    background: var(--accent-tint);
    color: var(--accent-deep);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.latest-arrow { color: var(--ink-mute); }

/* ====================================================
   Integrations marquee — restyled for paper theme,
   class names unchanged so home_v2.html can reuse the
   existing _integration_logos partial verbatim.
   ==================================================== */
.integrations {
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(0.5rem, 1.5vw, 1rem);
    overflow: hidden;
}
.integrations-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 1rem;
}
.integrations-marquee {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 4px var(--pad-x);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.integrations-track {
    display: flex;
    gap: 0.85rem;
    width: max-content;
    animation: marquee 35s linear infinite;
}
.integrations-track-reverse { animation: marquee-reverse 40s linear infinite; }
.integrations-marquee:hover .integrations-track { animation-play-state: paused; }
.integration-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.integration-item:hover {
    border-color: var(--accent);
    color: var(--ink);
    background: var(--paper-alt);
    transform: translateY(-2px);
}
.integration-item svg { width: 18px; height: 18px; flex-shrink: 0; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .integrations-track, .integrations-track-reverse { animation: none; }
}
.integrations-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.82rem;
}
.integrations-dot { color: var(--ink-faint); }
.integrations-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ink-mute);
    transition: color .15s ease;
}
.integrations-links a:hover { color: var(--accent); }
.integrations-links svg { transition: transform .15s ease; }
.integrations-links a:hover svg { transform: translateX(2px); }

/* ---------- Problem line ---------- */
.problem-line {
    padding: clamp(2rem, 4vw, 3rem) 0;
    text-align: center;
}
.problem-line p {
    margin: 0 auto;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 720px;
}
.problem-line .accent { color: var(--accent); font-style: italic; }

/* ---------- Performance feature sections ---------- */
.perf-section {
    padding: var(--pad-y) 0;
    border-top: 1px solid var(--rule);
}
.perf-section.perf-alt { background: var(--paper-alt); }
.perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.perf-grid-reverse .perf-copy { order: 2; }
.perf-grid-reverse .perf-visual { order: 1; }
.perf-copy h2 {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.perf-copy .perf-lead {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.35;
}
.perf-copy p {
    color: var(--ink-soft);
    line-height: 1.6;
}
.perf-visual {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(26,42,40,0.04), 0 14px 32px rgba(26,42,40,0.06);
}

/* ── Revenue Opportunity viz partial ── */
.viz { margin: 0; }
.viz-opportunity .viz-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule);
}
.viz-opportunity .viz-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}
.viz-opportunity .viz-total {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: var(--tnum);
}
.viz-total-strong { color: var(--strong, var(--accent-deep)); }
.viz-total-unit {
    font-size: 0.9rem;
    color: var(--ink-mute);
    font-weight: 400;
    margin-left: 0.15rem;
}
.viz-opp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.viz-opp-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 0.55rem 0.7rem;
    background: var(--paper-alt, color-mix(in srgb, var(--paper) 90%, var(--accent) 4%));
    border-radius: var(--radius-sm);
}
.viz-opp-dollar {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--strong, var(--accent-deep));
    font-feature-settings: var(--tnum);
    text-align: right;
    white-space: nowrap;
}
.viz-opp-dollar-unit {
    font-size: 0.72rem;
    color: var(--ink-mute);
    font-weight: 400;
    margin-left: 0.1rem;
}
.viz-opp-lever {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.viz-opp-lever strong {
    font-size: 0.88rem;
    color: var(--ink);
    font-weight: 600;
}
.viz-opp-lever-detail {
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.viz-caption {
    margin: 0.85rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.5;
}
.viz-caption strong { color: var(--ink); }
.viz-caption-strong strong { color: var(--strong, var(--accent-deep)); }

@media (max-width: 780px) {
    .perf-grid { grid-template-columns: 1fr; }
    .perf-grid-reverse .perf-copy { order: 1; }
    .perf-grid-reverse .perf-visual { order: 2; }
}

/* ---------- What's in the report ---------- */
.report-contents {
    padding: var(--pad-y) 0;
    border-top: 1px solid var(--rule);
}
.report-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 880px) { .report-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .report-list { grid-template-columns: 1fr; } }
.report-list li {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.4rem;
    transition: border-color .15s ease, transform .15s ease;
}
.report-list li:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.report-list .tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--accent-tint);
    color: var(--accent-deep);
    margin-bottom: 0.75rem;
}
.report-list .tile-icon svg { width: 18px; height: 18px; }
.report-list h3 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.report-list p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
/* Revenue Opportunity sits first and gets a subtle highlight — it's the
   single most useful number in the report, and visitors need to spot it
   on a scan. Featured tile: accent border + accent eyebrow tone. */
.report-list-feature {
    border-color: var(--accent) !important;
    background: var(--accent-tint-soft, color-mix(in srgb, var(--accent) 6%, var(--paper)));
    position: relative;
}
.report-list-feature .tile-icon {
    background: var(--accent);
    color: var(--paper);
}
.report-list-feature h3 { color: var(--accent-deep); }

/* ---------- Trust / Security section ---------- */
.trust-section {
    padding: var(--pad-y) 0;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.trust-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 880px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem 1.2rem;
    transition: border-color .15s ease;
}
.trust-card:hover { border-color: var(--accent); }
.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--strong-tint, var(--accent-tint));
    color: var(--strong, var(--accent-deep));
    margin-bottom: 0.65rem;
}
.trust-icon svg { width: 17px; height: 17px; }
.trust-card h3 {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.3rem;
    color: var(--ink);
}
.trust-card p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.trust-card a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.trust-card a:hover { text-decoration: underline; }

/* ---------- Objections / FAQ ---------- */
.objections {
    padding: var(--pad-y) 0;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
}
.objection-list {
    max-width: 760px;
    margin: 0 auto;
}
.objection {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 0.75rem;
    transition: border-color .15s ease;
}
.objection[open] { border-color: var(--accent); }
.objection summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    position: relative;
    padding-right: 2.5rem;
}
.objection summary::-webkit-details-marker { display: none; }
.objection summary::after {
    content: "+";
    position: absolute;
    right: 1.25rem; top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.25rem;
}
.objection[open] summary::after { content: "−"; }
.objection p, .objection ul {
    margin: 0 1.25rem 1.25rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}
.objection ul { padding-left: 1.1rem; }
.objection ul li { margin-bottom: 0.4rem; }

/* ---------- Pricing ---------- */
.pricing {
    padding: var(--pad-y) 0;
    border-top: 1px solid var(--rule);
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .pricing-grid { grid-template-columns: 1fr; }
}
.pricing-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
}
.pricing-card-featured {
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(200,99,74,0.06), 0 18px 40px rgba(200,99,74,0.10);
}
.pricing-badge {
    position: absolute;
    top: -0.7rem;
    left: 1.5rem;
    padding: 0.25rem 0.7rem;
    background: var(--bg);
    color: var(--ink-mute);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid var(--rule);
    border-radius: 999px;
}
.pricing-card-featured .pricing-badge {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-tint);
}
.pricing-price {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.pricing-price .price-now {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    font-feature-settings: var(--tnum);
}
.pricing-price .price-unit {
    font-size: 0.9rem;
    color: var(--ink-mute);
}
.pricing-tagline {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.pricing-features li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.9rem;
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.pricing-features li::before {
    content: "—";
    color: var(--accent);
    flex-shrink: 0;
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features strong { color: var(--ink); font-weight: 600; }
.pricing-cta-form { margin-top: auto; }

/* ---------- Final CTA ---------- */
.final-cta {
    padding: var(--pad-y) 0;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
}
.final-cta h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 400;
    color: var(--paper);
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}
.final-cta p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
.final-cta .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}
.final-cta .btn-primary:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* ---------- Footer ---------- */
.site-footer-v2 {
    padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
}
.site-footer-v2 .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 760px) {
    .site-footer-v2 .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .site-footer-v2 .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-name {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.3rem;
}
.footer-tagline {
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin: 0;
    line-height: 1.5;
}
.footer-col h4 {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
}
.footer-col li { margin-bottom: 0.35rem; }
.footer-col a {
    color: var(--ink-soft);
    font-size: 0.9rem;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--ink-mute);
    text-align: center;
}

/* ====================================================
   Sample-request lead-capture page (/v2/sample/)
   ==================================================== */
.sample-form-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.sample-form-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}
@media (max-width: 820px) {
    .sample-form-wrap { grid-template-columns: 1fr; }
}
.sample-form-copy h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0.25rem 0 1rem;
}
.sample-form-lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.sample-form-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--rule);
}
.sample-form-meta li {
    padding: 0.7rem 0 0.7rem 1.5rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.95rem;
    color: var(--ink-soft);
    position: relative;
}
.sample-form-meta li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.1rem;
    width: 14px; height: 1px;
    background: var(--accent);
}

.sample-form-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 1px 2px rgba(26,42,40,0.04), 0 14px 32px rgba(26,42,40,0.06);
}
.form-row {
    margin-bottom: 1.1rem;
}
.form-row label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin-bottom: 0.4rem;
}
.form-row input[type="email"],
.form-row input[type="text"],
.form-row input[type="tel"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.form-row input:focus {
    outline: 0;
    border-color: var(--accent);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(200,99,74,0.12);
}
.field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-mute);
}
.field-error,
.form-errors {
    margin-top: 0.35rem;
    padding: 0.45rem 0.7rem;
    background: var(--action-tint);
    border-left: 3px solid var(--action);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    color: var(--action);
    font-weight: 500;
}
.form-fineprint {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-mute);
    line-height: 1.5;
}

/* ====================================================
   Long-form legal pages (privacy, terms, data handling)
   ==================================================== */
.container-narrow { max-width: 760px; }
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.legal-header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
}
.legal-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.5rem;
}
.legal-header h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}
.legal-meta {
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin: 0;
    font-feature-settings: var(--tnum);
}
.legal-lead-context {
    margin-top: 1rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink-soft);
    font-style: italic;
    line-height: 1.55;
}
.legal-toc {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
}
.legal-toc-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin: 0 0 0.6rem;
}
.legal-toc ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
}
@media (max-width: 680px) {
    .legal-toc ol { columns: 1; }
}
.legal-toc a { color: var(--ink-soft); }
.legal-toc a:hover { color: var(--accent); }

.legal-body {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.legal-body .lead {
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 1.5rem;
}
.legal-body h2 {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    font-weight: 400;
    color: var(--ink);
    margin: 2.5rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    letter-spacing: -0.015em;
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-body h3 {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 1.5rem 0 0.5rem;
    letter-spacing: -0.005em;
}
.legal-body p { margin: 0 0 1rem; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body em { color: var(--ink); }
.legal-body a {
    color: var(--accent);
    border-bottom: 1px dotted var(--accent);
}
.legal-body a:hover {
    color: var(--accent-deep);
    border-bottom-color: var(--accent-deep);
}
.legal-body code {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background: var(--rule-soft);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}
.legal-footer-link {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9rem;
    color: var(--ink-mute);
}
.legal-download {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: 12px;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.legal-download-label {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 0.25rem;
}
.legal-download-desc {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin: 0;
    max-width: 32rem;
}
.legal-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--paper) !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background .15s ease;
    white-space: nowrap;
}
.legal-download-btn:hover {
    background: var(--accent-deep);
    color: var(--paper) !important;
}

/* ====================================================
   Buy continue (Stripe checkout auto-submit page)
   ==================================================== */
.buy-continue { padding: clamp(4rem, 10vw, 7rem) 0; }
.buy-continue-card {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 2px rgba(26,42,40,0.04), 0 14px 32px rgba(26,42,40,0.06);
}
.buy-continue-card h1 {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.buy-continue-card p {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

/* ====================================================
   Auth pages (login, signup, password reset)
   ==================================================== */
.auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) var(--pad-x);
}
.auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 2px rgba(26,42,40,0.04), 0 18px 40px rgba(26,42,40,0.06);
}
.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-logo {
    display: inline-block;
    margin-bottom: 0.75rem;
}
.auth-logo img {
    display: block;
    width: 56px;
    height: 56px;
}
.auth-header h1 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
    line-height: 1.2;
}
.auth-subtitle {
    color: var(--ink-mute);
    font-size: 0.95rem;
    margin: 0;
}

.auth-messages { margin-bottom: 1.25rem; }
.alert {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.alert-success { background: var(--strong-tint);   border-left-color: var(--strong);   color: var(--strong); }
.alert-info,
.alert-warning { background: var(--watch-tint);    border-left-color: var(--watch);    color: #8E7332; }
.alert-error,
.alert-danger  { background: var(--action-tint);   border-left-color: var(--action);   color: var(--action); }

.auth-form .form-group { margin-bottom: 1.1rem; }
.auth-form label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin-bottom: 0.4rem;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="tel"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-form input:focus {
    outline: 0;
    border-color: var(--accent);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(200,99,74,0.12);
}
.auth-form input::placeholder { color: var(--ink-faint); }
.auth-form .form-help {
    font-size: 0.8rem;
    color: var(--ink-mute);
    margin: 0.35rem 0 0;
}
.auth-form .form-error {
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.55rem;
    background: var(--action-tint);
    border-left: 3px solid var(--action);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.8rem;
    color: var(--action);
    font-weight: 500;
}
.auth-form .btn-submit { width: 100%; margin-top: 0.5rem; }

.auth-form .consent-row { margin-top: 0.25rem; margin-bottom: 1rem; }
.auth-form .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
}
.auth-form .consent-label input[type="checkbox"] {
    width: auto;
    margin: 0.15rem 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.auth-form .consent-label a {
    color: var(--ink);
    border-bottom: 1px dotted var(--ink-mute);
}
.auth-form .consent-label a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}
.auth-footer p {
    font-size: 0.9rem;
    color: var(--ink-mute);
    margin: 0;
}
.auth-footer a { color: var(--accent); font-weight: 600; }
.auth-footer a:hover { color: var(--accent-deep); }
.auth-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin-top: 0.8rem;
}
.auth-link:hover { color: var(--accent); }

/* ====================================================
   Dashboard chrome (nav + main area + cards)
   ==================================================== */
.dashboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.dashboard-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--rule);
    padding: 0.7rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.dashboard-nav-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.dashboard-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.dashboard-logo img { display: block; flex-shrink: 0; }
.dashboard-nav-links {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}
.dashboard-nav-links a {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-mute);
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
    text-decoration: none;
}
.dashboard-nav-links a:hover {
    color: var(--ink);
    background: var(--rule-soft);
}
.dashboard-nav-links a.active {
    color: var(--accent);
    background: var(--accent-tint);
}
.dashboard-nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}
.user-email { color: var(--ink-mute); font-feature-settings: var(--tnum); }
.logout-link { color: var(--ink-mute); }
.logout-link:hover { color: var(--accent); }

.dashboard-main {
    flex: 1;
    padding: 2.25rem 0 3.5rem;
}
.dashboard-messages { margin-bottom: 1.5rem; }

.dashboard-header {
    margin-bottom: 2rem;
}
.dashboard-header h1 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
}
.dashboard-header p {
    color: var(--ink-soft);
    font-size: 1rem;
    margin: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.dashboard-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.75rem;
}
.dashboard-card h3 {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin: 0 0 1rem;
}
.card-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.success { background: var(--strong); }
.status-dot.warning { background: var(--watch); }
.status-dot.error   { background: var(--action); }
.status-dot.muted   { background: var(--ink-faint); }
.card-action { margin-top: 1rem; }
.card-meta {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--ink-mute);
    line-height: 1.45;
}

@media (max-width: 760px) {
    .dashboard-nav-inner {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .dashboard-nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .dashboard-nav-user { margin-left: auto; }
}

/* btn-sm for dashboard secondary actions */
.btn-sm { padding: 0.5rem 0.95rem; font-size: 0.85rem; }

/* ====================================================
   Legacy v1 token aliases — safety net so any per-page
   inline <style> blocks that still reference old token
   names render in v2 paper colours instead of breaking.
   New code should use the canonical v2 names directly.
   ==================================================== */
:root {
    --ink-muted:        var(--ink-mute);
    --border:           var(--rule);
    --border-soft:      var(--rule-soft);
    --surface:          var(--paper-alt);
    --surface-card:     var(--paper);
    --surface-elevated: var(--paper-alt);
    --accent-soft:      var(--accent-tint);
    --font-display:     var(--serif);
}

/* ====================================================
   Consolidated dashboard — status strip + accordions
   ==================================================== */
.dash-standalone { max-width: 760px; }
.dashboard-header-tight { margin-bottom: 0.9rem; }
.dashboard-header-tight h1 {
    margin-bottom: 0.15rem;
    font-size: clamp(1.4rem, 2.2vw, 1.65rem);
}
.dashboard-header-tight p { font-size: 0.875rem; }
.dashboard-header-tight p { font-size: 0.95rem; }

/* At-a-glance status strip */
.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.status-chip:hover { border-color: var(--accent); background: var(--paper-alt); }
.status-chip-label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}
.status-chip-value { color: var(--ink); font-weight: 500; }

/* Accordion section (native <details>) */
.dash-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}
.dash-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    user-select: none;
}
.dash-section > summary::-webkit-details-marker { display: none; }
.dash-section-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.dash-section-status {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.dash-chevron { color: var(--ink-mute); transition: transform .2s ease; flex-shrink: 0; }
.dash-section[open] > summary .dash-chevron { transform: rotate(180deg); }
.dash-section-body {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--rule-soft);
    padding-top: 1.25rem;
}

/* Pills used in section summaries */
.pill {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pill-success { background: var(--strong-tint); color: var(--strong); }
.pill-error   { background: var(--action-tint); color: var(--action); }
.pill-muted   { background: var(--rule-soft);   color: var(--ink-mute); }

/* ── PMS connection status banner + form ── */
.api-key-status {
    display: flex;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
}
.api-key-status.success { background: var(--strong-tint); border: 1px solid var(--strong); }
.api-key-status.success .status-icon { color: var(--strong); }
.api-key-status.error { background: var(--action-tint); border: 1px solid var(--action); }
.api-key-status.error .status-icon { color: var(--action); }
.status-icon { flex-shrink: 0; }
.status-content strong { display: block; margin-bottom: 0.1rem; font-size: 0.88rem; color: var(--ink); }
.status-content p { margin: 0; font-size: 0.78rem; color: var(--ink-mute); }

.api-key-form .form-group { margin-bottom: 0.75rem; }
.api-key-form label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin-bottom: 0.3rem;
}
.api-key-form input,
.api-key-form select {
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    font-family: var(--sans);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.api-key-form input:focus,
.api-key-form select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(200,99,74,0.12);
}
.form-help { font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.3rem; line-height: 1.45; }

/* PMS connection step-by-step guide (api-key page + onboarding connect). */
.pms-prereq {
    margin-top: 0.35rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--accent, #c4622d);
    border-left-width: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent, #c4622d) 7%, transparent);
    font-size: 0.78rem;
    line-height: 1.45;
}
.pms-guide { margin-top: 0.5rem; font-size: 0.78rem; }
.pms-guide > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent, #c4622d);
    padding: 0.25rem 0;
}
.pms-guide-steps {
    margin: 0.5rem 0 0.4rem;
    padding-left: 1.2rem;
    line-height: 1.55;
}
.pms-guide-steps li { margin-bottom: 0.35rem; }
.pms-guide-steps img,
.pms-guide-shot {                 /* screenshot slots — populated later */
    display: block;
    max-width: 100%;
    margin: 0.4rem 0 0.2rem;
    border: 1px solid var(--border, #e2e0da);
    border-radius: 6px;
}
.pms-guide-doc { font-weight: 600; }
.pms-guide-note { font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.4rem; }
.pms-guide-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0.5rem 0 0.6rem;
    border: 1px solid var(--border, #e2e0da);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.pms-guide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.security-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--on-track-tint);
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    color: var(--on-track);
    margin-bottom: 0.85rem;
}
.security-note svg { flex-shrink: 0; width: 14px; height: 14px; }
.next-hint {
    background: var(--accent-tint);
    border: 1px solid rgba(200,99,74,0.2);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.95rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 1.25rem;
}
.next-hint strong { color: var(--accent); }
.form-error { color: var(--action); font-size: 0.76rem; margin: 0.35rem 0 0; font-weight: 500; }
.legal-link { margin: 0.7rem 0 0; font-size: 0.72rem; color: var(--ink-mute); line-height: 1.45; }
.legal-link a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal-link a:hover { color: var(--accent); }
.consent-row { margin: 0 0 0.75rem; }
.api-key-form .consent-label,
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}
.consent-label input[type="checkbox"] {
    width: auto; margin: 0.15rem 0 0; padding: 0; flex-shrink: 0;
    accent-color: var(--accent); cursor: pointer;
}

/* ── Disconnect PMS control (destructive, understated) ── */
.disconnect-form { margin: 0; }
.btn-disconnect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--action);
    background: var(--paper);
    border: 1px solid var(--action);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.btn-disconnect:hover { background: var(--action); color: #fff; }
.disconnect-note { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--ink-mute); }

/* Connect/Update button — match the Reports/Strategy compact button scale. */
.api-key-form .btn-primary { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

/* ── Billing: active-subscription card + plans grid ── */
.billing-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; }
.billing-card.error { border-color: var(--action); }
.billing-plan { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.plan-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.plan-header h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin: 0; }
.plan-badge {
    background: var(--accent); color: #fff;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.25rem 0.55rem; border-radius: 999px;
}
.plan-badge-neutral { background: var(--paper-alt); color: var(--ink-mute); border: 1px solid var(--rule); }
.upgrade-form { margin: 0 0 0.75rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.5rem; }
.price-amount { font-family: var(--serif); font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; }
.price-period { color: var(--ink-mute); font-size: 0.9rem; }
.billing-details { margin-bottom: 1.25rem; }
.detail-row { display: flex; justify-content: space-between; padding: 0.65rem 0; border-bottom: 1px solid var(--rule-soft); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--ink-mute); font-size: 0.9rem; }
.detail-value { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.billing-actions { }
.billing-note { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-mute); }
.billing-alert {
    display: flex; align-items: flex-start; gap: 0.875rem;
    padding: 1rem 1.1rem; background: var(--watch-tint); border: 1px solid var(--watch);
    border-radius: var(--radius-sm); margin-bottom: 1.25rem;
}
.billing-alert svg { flex-shrink: 0; color: var(--action); margin-top: 2px; }
.billing-alert.warning { background: var(--watch-tint); border-color: var(--watch); }
.billing-alert.warning svg { color: #8E7332; }
.billing-alert div { flex: 1; }
.billing-alert strong { display: block; margin-bottom: 0.25rem; color: var(--ink); }
.billing-alert p { margin: 0; font-size: 0.85rem; color: var(--ink-mute); }
.billing-alert a { color: var(--accent); font-weight: 600; }
.no-sub-intro { margin-bottom: 1.25rem; }
.no-sub-intro h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin: 0 0 0.3rem; }
.no-sub-intro p { margin: 0; color: var(--ink-mute); font-size: 0.9rem; }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 720px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card {
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 1.5rem; display: flex; flex-direction: column;
}
.plan-card-featured { border: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(200,99,74,0.12); position: relative; }
.plan-card-badge {
    align-self: flex-start; background: var(--paper-alt); border: 1px solid var(--rule); color: var(--ink-mute);
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.25rem 0.625rem; border-radius: 999px; margin-bottom: 1rem;
}
.plan-card-badge-featured { background: var(--accent); color: #fff; border-color: var(--accent); }
.plan-card-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.plan-card-amount { font-family: var(--serif); font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; }
.plan-card-unit { color: var(--ink-mute); font-size: 0.875rem; }
.plan-card-tagline { color: var(--ink-mute); font-size: 0.875rem; margin: 0 0 1rem; }
.plan-card-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.plan-card-features li { padding: 0.35rem 0 0.35rem 1.25rem; position: relative; color: var(--ink-soft); font-size: 0.85rem; }
.plan-card-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.plans-footnote { color: var(--ink-mute); font-size: 0.75rem; margin: 0; }
.plans-footnote a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.plans-footnote a:hover { color: var(--accent); }

/* ── Reports list ── */
.reports-list { display: flex; flex-direction: column; gap: 0.6rem; }
.report-row {
    display: flex; align-items: center; gap: 0.65rem;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
}
.report-row-icon {
    width: 30px; height: 30px; background: var(--accent-tint); color: var(--accent-deep);
    border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.report-row-icon svg { width: 17px; height: 17px; }
.report-row-meta { flex: 1; min-width: 0; }
.report-row-meta h3 { margin: 0 0 0.05rem; font-size: 0.84rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--serif); font-weight: 500; }
.report-pill {
    display: inline-block; background: var(--paper-alt); color: var(--ink-mute); border: 1px solid var(--rule);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem; border-radius: 999px;
}
.report-row-sub { margin: 0; color: var(--ink-mute); font-size: 0.74rem; }
.reports-empty {
    text-align: center; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius);
    padding: 2.5rem 1.5rem; color: var(--ink-mute);
}
.reports-empty svg { margin-bottom: 1rem; }
.reports-empty h3 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.reports-empty p { margin: 0 auto; max-width: 420px; font-size: 0.875rem; }
.reports-empty-meta { margin-top: 0.75rem !important; font-size: 0.8rem !important; color: var(--ink-faint) !important; }

/* ====================================================
   Live score (dashboard Reports section)
   ==================================================== */
.live-score {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
}
.ls-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}
.ls-title {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin: 0.05rem 0 0;
}
.ls-sample-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--watch);
    background: var(--watch-tint);
    border: 1px solid var(--watch);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.ls-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    margin-bottom: 0.65rem;
}
.ls-hero-score { flex-shrink: 0; }
.ls-hero-value {
    display: block;
    font-family: var(--serif);
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-feature-settings: var(--tnum);
}
.ls-hero-suffix { font-size: 1rem; color: var(--ink-mute); font-weight: 300; }
.ls-hero-delta { display: block; margin-top: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-mute); }
.ls-hero-delta.up { color: var(--strong); }
.ls-hero-delta.down { color: var(--action); }
.ls-hero-label { border-left: 1px solid var(--rule); padding-left: 1.1rem; }
.ls-hero-label strong { font-family: var(--serif); font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.ls-hero-label p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 560px) {
    .ls-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ls-hero-label { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
}

.ls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
}
@media (max-width: 900px) { .ls-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ls-grid { grid-template-columns: 1fr; } }
.ls-tile {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.7rem 0.65rem;
}
.ls-tile.ls-strong   { border-left-color: var(--strong); }
.ls-tile.ls-on-track { border-left-color: var(--on-track); }
.ls-tile.ls-watch    { border-left-color: var(--watch); }
.ls-tile.ls-action   { border-left-color: var(--action); }
.ls-tile-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    line-height: 1.25;
    min-height: 1.5em;
}
.ls-tile-value {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0.15rem 0 0.3rem;
    font-feature-settings: var(--tnum);
}
.ls-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}
.ls-pill {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--rule-soft);
    color: var(--ink-soft);
    white-space: nowrap;
}
.ls-strong   .ls-pill { background: var(--strong-tint);   color: var(--strong); }
.ls-on-track .ls-pill { background: var(--on-track-tint); color: var(--on-track); }
.ls-watch    .ls-pill { background: var(--watch-tint);    color: #8E7332; }
.ls-action   .ls-pill { background: var(--action-tint);   color: var(--action); }
.ls-delta { font-size: 0.68rem; font-weight: 600; color: var(--ink-mute); font-feature-settings: var(--tnum); white-space: nowrap; }
.ls-delta.up { color: var(--strong); }
.ls-delta.down { color: var(--action); }
.ls-tile-hint { font-size: 0.68rem; color: var(--ink-mute); line-height: 1.3; }
.ls-note {
    margin: 1rem 0 0;
    padding: 0.7rem 0.95rem;
    background: var(--watch-tint);
    border-left: 3px solid var(--watch);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.ls-note a { color: var(--accent); font-weight: 600; }

/* New-patient sparkline — last 6 months. */
.ls-chart {
    margin-top: 0.75rem;
    padding: 0.65rem 0.8rem 0.45rem;
    background: var(--surface, #fff);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.ls-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.ls-chart-total {
    font-size: 0.72rem;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}
.ls-chart-svg {
    display: block;
    width: 100%;
    height: 80px;
    overflow: visible;
}
.ls-chart-line {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ls-chart-fill {
    fill: var(--accent);
    fill-opacity: 0.08;
    stroke: none;
}
.ls-chart-dot {
    fill: var(--accent);
}
.ls-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    padding: 0 14px;
    font-size: 0.65rem;
    color: var(--ink-mute);
}

/* Insufficient-data tile + real-data footer */
.ls-tile.ls-empty { border-left-color: var(--rule); opacity: 0.75; }
.ls-tile.ls-empty .ls-tile-value { color: var(--ink-mute); }
.ls-pill-empty { background: var(--rule-soft); color: var(--ink-mute); }

/* Direct status-pill colours (table reuses pills outside the .ls-tile
   parent-class context the grid relied on). */
.ls-pill-strong   { background: var(--strong-tint);   color: var(--strong); }
.ls-pill-on-track { background: var(--on-track-tint); color: var(--on-track); }
.ls-pill-watch    { background: var(--watch-tint);    color: #8E7332; }
.ls-pill-action   { background: var(--action-tint);   color: var(--action); }

/* "Refresh from your PMS" button bar — sits just under the page header on the
   dashboard pages that carry it. */
.pms-refresh-bar { margin: -0.6rem 0 1.4rem; }
.pms-refresh-form { display: inline-block; margin: 0; line-height: 1; }
/* Discreet "Refresh <PMS>" control — mirrors the chat composer's refresh
   button: small muted text + icon, accent on hover, icon spins while a sync
   is in flight. */
.pms-refresh-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    background: none; border: 0; padding: .1rem .25rem;
    font-family: var(--sans); font-size: .72rem; color: var(--ink-mute);
    cursor: pointer; border-radius: 5px; transition: color .15s ease;
}
.pms-refresh-btn:hover { color: var(--accent); }
.pms-refresh-btn svg { width: 12px; height: 12px; }
.pms-refresh-btn[disabled] { cursor: default; }
@keyframes pms-spin { to { transform: rotate(360deg); } }
.pms-refresh-btn.is-refreshing svg { animation: pms-spin .8s linear infinite; }

/* Reports live-score breaks out wider than the 760px text column so the
   period table fits without scrolling on desktop. */
.ls-standalone { max-width: 1024px; }

/* ── Period-comparison table ─────────────────────────────────────────── */
/* On desktop the table fits, so leave overflow visible — that lets the hover
   tooltip escape the box. Only switch to horizontal scroll once the viewport
   is too narrow to show all columns (sticky first column keeps labels in view).
   On that narrow branch the tooltip can clip, which is an acceptable
   touch-screen tradeoff. */
.ls-table-wrap {
    overflow: visible;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
@media (max-width: 1124px) {
    .ls-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.ls-table {
    width: 100%;
    border-collapse: collapse;
    font-feature-settings: var(--tnum);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;   /* compact base — every cell inherits this */
}
.ls-table th, .ls-table td {
    padding: 0.3rem 0.45rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule-soft);
}
.ls-table thead th {
    font-size: 0.56rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    background: var(--paper-alt);
}
/* Group row ("This period" / "Last period") — centred over its 4 columns */
.ls-thead-group th[scope="colgroup"] {
    text-align: center;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--rule-soft);
}
.ls-thead-sub th { border-bottom: 1px solid var(--rule); }
.ls-table thead .ls-th-metric,
.ls-table thead .ls-th-status,
.ls-table thead .ls-th-bench { vertical-align: bottom; border-bottom: 1px solid var(--rule); }
.ls-table tbody tr:last-child th,
.ls-table tbody tr:last-child td { border-bottom: 0; }
.ls-table tbody tr:hover td,
.ls-table tbody tr:hover .ls-row-head { background: var(--paper-alt); }

/* First column — metric heading, left-aligned + sticky on horizontal scroll */
.ls-th-metric { text-align: left; }
.ls-th-status { text-align: center; }
.ls-row-head {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--paper);
    font-family: var(--serif);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--ink);
    cursor: help;
}
.ls-row-name { border-bottom: 1px dotted var(--ink-mute); }
.ls-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--rule-soft);
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.6rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Visual seam between the "This …" and "Last …" period groups */
.ls-col-divide { border-left: 2px solid var(--rule); }

/* Seam between the per-period block and the merged as-of block */
.ls-table tbody tr.ls-group-start td,
.ls-table tbody tr.ls-group-start th { border-top: 2px solid var(--rule); }

/* New-patients-by-month table (replaces the old sparkline). Sits inside the
   .ls-chart card, so it drops its own border to avoid a double frame, and the
   row heading isn't a tooltip target. */
.ls-month-wrap { border: 0; margin-top: 0.35rem; }
.ls-month-table { background: transparent; }
.ls-month-rowhead { cursor: default; font-size: 0.78rem; background: transparent; }
.ls-month-table thead th { background: transparent; }

.ls-cell { color: var(--ink-soft); }
.ls-cell-blank { color: var(--ink-mute); }

/* Snapshot/cohort rows: one real value spanning the period columns (left-
   aligned so it reads as a statement, not a per-column number). The
   td-qualified selector beats the base right-align on `.ls-table td`. */
/* Merged cells can hold long strings (the funding mix) — let them wrap within
   their colspan instead of forcing the whole table wider. */
.ls-table td.ls-cell-merged { text-align: left; padding-left: 0.9rem; white-space: normal; }
/* Merged value reads like every other figure — same colour, not bolded. */
.ls-merged-value { font-weight: 400; color: var(--ink-soft); }
.ls-merged-note {
    margin-left: 0.45rem;
    font-size: 0.64rem;
    color: var(--ink-mute);
    font-style: italic;
}
.ls-cell-status, .ls-cell-bench { white-space: nowrap; }
.ls-cell-bench { color: var(--ink-mute); font-size: 0.66rem; }
.ls-cell-status { text-align: center; }

/* Hover/focus tooltip on the metric heading */
.ls-tip {
    position: absolute;
    left: 0.6rem;
    top: calc(100% - 0.2rem);
    z-index: 20;
    width: min(20rem, 70vw);
    padding: 0.65rem 0.8rem;
    background: var(--ink, #1d2521);
    color: #fff;
    font-family: var(--sans, sans-serif);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease;
    pointer-events: none;
}
.ls-row-head:hover .ls-tip,
.ls-row-head:focus .ls-tip,
.ls-row-head:focus-within .ls-tip {
    opacity: 1;
    visibility: visible;
}
/* Lift the active heading above the sibling sticky first-column cells (which
   also sit at z-index 1) so its tooltip paints over them, not under. */
.ls-row-head:hover,
.ls-row-head:focus,
.ls-row-head:focus-within { z-index: 30; }
.ls-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule-soft);
}
.ls-synced { font-size: 0.8rem; color: var(--ink-mute); }
.ls-refresh-form { margin: 0; }

/* ── Data chat — full-page Claude-style layout ───────────────────────── */
/* The chat page fills the viewport below the dashboard nav (footer hidden). */
body.chat-page { overflow: hidden; }
.chat-page .dashboard { height: 100vh; display: flex; flex-direction: column; }
.chat-page .dashboard-main { flex: 1; min-height: 0; padding: 0; }
.chat-page .dashboard-main > .container {
    max-width: none; width: 100%; height: 100%;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
}

/* Centred card for the gated (upsell / connect) states. */
.chat-gate { max-width: 640px; margin: 3rem auto; padding: 0 1.5rem; }

/* Two-pane shell: Recents sidebar + chat. */
.chat-shell { flex: 1; min-height: 0; display: flex; }

.chat-sidebar {
    width: 260px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1rem 0.75rem;
    background: var(--paper-alt);
    border-right: 1px solid var(--rule);
    min-height: 0;
}
.chat-new-btn {
    display: block;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink); font-weight: 600; font-size: 0.9rem;
    transition: border-color .15s ease, color .15s ease;
}
.chat-new-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.chat-recents { display: flex; flex-direction: column; min-height: 0; }
.chat-recents-head {
    padding: 0 0.35rem 0.45rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-mute);
}
.chat-recent-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.chat-recent {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink); font-size: 0.88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-recent:hover { background: var(--paper); }
.chat-recent.active { background: var(--paper); color: var(--accent-deep); font-weight: 600; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }

.chat-log {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.9rem;
    padding: 1.6rem;
}
.chat-msg { display: flex; width: 100%; max-width: 768px; margin: 0 auto; }
.chat-msg-user { justify-content: flex-end; }
/* Assistant messages stack vertically so the Save-to-memory pill and
   any auto-suggest chip sit BELOW the bubble (not floating to the
   right of it as flex-row siblings). align-items keeps everything
   left-aligned under the bubble's left edge. */
.chat-msg-assistant {
    flex-direction: column;
    align-items: flex-start;
}
.chat-bubble {
    max-width: 80%;
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius);
    line-height: 1.55;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-msg-user .chat-bubble {
    background: var(--accent); color: var(--paper);
    border-bottom-right-radius: var(--radius-sm);
}
.chat-msg-assistant .chat-bubble {
    background: var(--paper-alt); color: var(--ink);
    border-bottom-left-radius: var(--radius-sm);
    white-space: normal;          /* rendered Markdown handles its own spacing */
}
/* Rendered-Markdown styling inside assistant bubbles. */
.chat-msg-assistant .chat-bubble > :first-child { margin-top: 0; }
.chat-msg-assistant .chat-bubble > :last-child { margin-bottom: 0; }
.chat-bubble h3, .chat-bubble h4, .chat-bubble h5, .chat-bubble h6 {
    font-family: var(--serif); line-height: 1.25; margin: 0.7rem 0 0.35rem;
}
.chat-bubble h3 { font-size: 1.05rem; }
.chat-bubble h4 { font-size: 0.98rem; }
.chat-bubble h5, .chat-bubble h6 { font-size: 0.92rem; }
.chat-bubble p { margin: 0.5rem 0; }
.chat-bubble ul, .chat-bubble ol { margin: 0.45rem 0; padding-left: 1.3rem; }
.chat-bubble li { margin: 0.15rem 0; }
.chat-bubble li > ul, .chat-bubble li > ol { margin: 0.15rem 0; }
.chat-bubble code {
    background: rgba(0, 0, 0, 0.06); padding: 0.05rem 0.32rem;
    border-radius: 4px; font-size: 0.88em;
}
.chat-bubble hr { border: none; border-top: 1px solid var(--rule); margin: 0.75rem 0; }
.chat-bubble a { color: var(--accent-deep); text-decoration: underline; }
.chat-bubble table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.55rem 0;
    font-size: 0.88rem;
    display: block;
    overflow-x: auto;          /* horizontal scroll on narrow bubbles */
}
.chat-bubble th, .chat-bubble td {
    border: 1px solid var(--rule);
    padding: 0.35rem 0.6rem;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.chat-bubble th { background: var(--paper); font-weight: 700; }
.chat-thinking { color: var(--ink-mute); }
.chat-dots {
    display: inline-block;
    min-width: 1.8em;          /* reserve room for "..." so the bubble doesn't jump */
    text-align: left;
    font-size: 1.4rem; line-height: 1; letter-spacing: 2px;
    color: var(--ink-mute);
}
.chat-empty { color: var(--ink-mute); margin: auto; max-width: 620px; text-align: center; }
.chat-empty-title { font-family: var(--serif); color: var(--ink); margin: 0 0 0.4rem; }
.chat-empty > p { margin: 0 0 1.25rem; }
.chat-suggestion-groups {
    display: flex; flex-direction: column; gap: 1rem;
    text-align: left; max-width: 640px; margin: 0 auto;
}
.chat-suggestion-group { display: flex; flex-direction: column; gap: 0.45rem; }
.chat-suggestion-cat {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent-deep);
}
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat-suggestion {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem; color: var(--ink);
    transition: border-color .15s ease, background .15s ease;
}
.chat-suggestion:hover { border-color: var(--accent); background: var(--accent-tint); }

.chat-input {
    display: flex; gap: 0.6rem; align-items: flex-end;
    width: 100%; max-width: 768px; margin: 0 auto; box-sizing: border-box;
    padding: 0.4rem 1.6rem 0;
}
.chat-input textarea {
    flex: 1; resize: none;
    font-family: var(--sans); font-size: 0.95rem; line-height: 1.5;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper); color: var(--ink);
    max-height: 160px;
}
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
.chat-input .btn { white-space: nowrap; min-width: 4.5rem; }
.chat-input .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-disclaimer {
    width: 100%; max-width: 768px; margin: 0 auto; box-sizing: border-box;
    padding: 0.5rem 1.6rem 0.9rem;
    font-size: 0.78rem; color: var(--ink-mute); text-align: center;
}

@media (max-width: 640px) {
    .chat-sidebar { width: 168px; }
    .chat-log, .chat-input, .chat-disclaimer { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Patient-level (Practice+) add-on price on the data-tier screen ───── */
.addon-price { display: flex; align-items: baseline; gap: 0.3rem; margin: 0.4rem 0 0.9rem; }
.addon-amount { font-family: var(--serif); font-size: 2rem; color: var(--ink); }
.addon-period { color: var(--ink-mute); }

/* ====================================================
   Claude-style dashboard sidebar shell (2026-06-02)
   Replaces the old horizontal .dashboard-nav. All new selectors
   are prefixed .ds- so they coexist with leftover .dashboard-*
   styles still used inside the content area (.dashboard-grid etc.).
   ==================================================== */
:root {
    --ds-sidebar-w: 224px;
    --ds-sidebar-collapsed-w: 54px;
    --ds-sidebar-bg: #F5EFE3;
    --ds-sidebar-border: var(--rule);
    --ds-sidebar-text: var(--ink);
    --ds-sidebar-text-mute: var(--ink-mute);
    --ds-sidebar-hover-bg: rgba(200, 99, 74, 0.07);
    --ds-sidebar-active-bg: rgba(200, 99, 74, 0.13);
}

body.dashboard-body { background: var(--bg); }

.ds-shell {
    display: grid;
    grid-template-columns: var(--ds-sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.2s ease;
}
.ds-shell[data-sidebar-state="collapsed"] {
    grid-template-columns: var(--ds-sidebar-collapsed-w) 1fr;
}

/* ── Sidebar container ── */
.ds-sidebar {
    background: var(--ds-sidebar-bg);
    border-right: 1px solid var(--ds-sidebar-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 50;
}

/* ── Brand + toggle row ── */
.ds-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    gap: 6px;
}
.ds-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink) !important;
    text-decoration: none;
    min-width: 0;
}
.ds-brand-mark { flex-shrink: 0; border-radius: 6px; width: 22px; height: 22px; }
.ds-brand-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: nowrap;
}
.ds-sidebar-toggle {
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.ds-sidebar-toggle:hover { background: var(--ds-sidebar-hover-bg); color: var(--ink); }

/* ── New chat button ── */
.ds-sidebar-action { padding: 2px 10px 8px; }
.ds-newchat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--accent);
    color: var(--paper) !important;
    border-radius: 7px;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.ds-newchat-btn:hover { background: var(--accent-deep); }
.ds-newchat-btn svg { width: 14px; height: 14px; }

/* ── Primary nav ── */
.ds-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 10px 8px;
    border-bottom: 1px solid var(--ds-sidebar-border);
}
.ds-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--ds-sidebar-text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.ds-nav-item svg { width: 15px; height: 15px; }
.ds-nav-item:hover { background: var(--ds-sidebar-hover-bg); color: var(--ink); }
.ds-nav-item.active {
    background: var(--ds-sidebar-active-bg);
    color: var(--accent-deep);
}
.ds-nav-item svg { flex-shrink: 0; color: currentColor; }

/* ── Recents ── */
.ds-sidebar-recents {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 0;
    overflow: hidden;
}
.ds-recents-head {
    padding: 2px 10px 5px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ds-sidebar-text-mute);
}
.ds-recents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.ds-recents-list::-webkit-scrollbar { width: 6px; }
.ds-recents-list::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 3px;
}
.ds-recent-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.ds-recent-row:hover { background: var(--ds-sidebar-hover-bg); }
.ds-recent-row:has(.ds-recent-item.active) { background: var(--ds-sidebar-active-bg); }

/* Date divider that headers each day's group. */
.ds-recents-day {
    list-style: none;
    padding: 8px 10px 2px;
    margin-top: 0;
}
.ds-recents-day:not(:first-child) { padding-top: 14px; }
.ds-recents-day-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0 0 5px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ds-sidebar-border);
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-sidebar-text);
    text-align: left;
    cursor: pointer;
}
.ds-recents-day-label:hover { opacity: 0.75; }
.ds-recents-day-chevron {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.ds-recents-day.is-collapsed .ds-recents-day-chevron { transform: rotate(-90deg); }
.ds-recent-row.is-collapsed { display: none; }

.ds-recent-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 10px 5px;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ds-recent-title {
    display: block;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.ds-recent-time {
    display: block;
    color: var(--ds-sidebar-text-mute);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}
.ds-recent-row:hover .ds-recent-title { color: var(--ink); }
.ds-recent-item.active .ds-recent-title {
    color: var(--accent-deep);
    font-weight: 600;
}

.ds-recent-delete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 3px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--ink-mute);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.ds-recent-delete svg { width: 12px; height: 12px; }
.ds-recent-row:hover .ds-recent-delete,
.ds-recent-row:focus-within .ds-recent-delete { opacity: 1; }
.ds-recent-delete:hover {
    background: var(--rule-soft, rgba(0,0,0,0.06));
    color: var(--action, #b8421a);
}
.ds-recent-delete:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
/* Vanishing-row animation when deleted via JS. */
.ds-recent-row.is-deleting {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Report rows fade out the same way. */
.report-row.is-deleting {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ds-recents-empty {
    list-style: none;
    padding: 5px 10px;
    color: var(--ink-faint);
    font-size: 0.76rem;
    font-style: italic;
}

/* ── User profile / settings access ── */
.ds-sidebar-user {
    border-top: 1px solid var(--ds-sidebar-border);
    padding: 6px 10px;
    position: relative;
}
.ds-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--ink);
    text-align: left;
    transition: background 0.15s ease;
}
.ds-user-btn:hover { background: var(--ds-sidebar-hover-bg); }
.ds-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.ds-user-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ds-user-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-user-email {
    font-size: 0.68rem;
    color: var(--ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-user-chev {
    flex-shrink: 0;
    color: var(--ink-mute);
}
.ds-user-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    right: 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26, 42, 40, 0.10);
    padding: 6px;
    z-index: 60;
}
.ds-user-menu[hidden] { display: none; }
.ds-user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ds-user-menu-item svg { width: 14px; height: 14px; }
.ds-user-menu-item:hover { background: var(--ds-sidebar-hover-bg); }
.ds-user-menu-item svg { color: var(--ink-mute); flex-shrink: 0; }
.ds-user-menu-signout { color: var(--action) !important; }
.ds-user-menu-signout:hover { background: var(--action-tint); }
.ds-user-menu-signout svg { color: currentColor; }
.ds-user-menu-rule {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--rule-soft);
}

/* ── Collapsed sidebar overrides ── */
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-head { padding-left: 8px; padding-right: 8px; }
.ds-shell[data-sidebar-state="collapsed"] .ds-brand-name,
.ds-shell[data-sidebar-state="collapsed"] .ds-label,
.ds-shell[data-sidebar-state="collapsed"] .ds-user-meta,
.ds-shell[data-sidebar-state="collapsed"] .ds-user-chev,
.ds-shell[data-sidebar-state="collapsed"] .ds-recents-head,
.ds-shell[data-sidebar-state="collapsed"] .ds-recents-list,
.ds-shell[data-sidebar-state="collapsed"] .ds-recents-empty {
    display: none;
}
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-action,
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-nav,
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-user {
    padding-left: 8px;
    padding-right: 8px;
}
.ds-shell[data-sidebar-state="collapsed"] .ds-newchat-btn,
.ds-shell[data-sidebar-state="collapsed"] .ds-nav-item {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}
.ds-shell[data-sidebar-state="collapsed"] .ds-user-btn {
    justify-content: center;
    padding: 4px;
}
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-recents {
    flex-grow: 0;
    padding: 0;
    border-bottom: none;
}
.ds-shell[data-sidebar-state="collapsed"] .ds-sidebar-toggle svg {
    transform: scaleX(-1);
}

/* ── Main content ── */
.ds-main {
    overflow-y: auto;
    max-height: 100vh;
    padding: 32px 40px;
}
.ds-messages { margin-bottom: 1.5rem; }

/* ── Mobile hamburger ── */
.ds-mobile-open {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 70;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ds-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 40;
}

/* ── Responsive: < 900px ── */
@media (max-width: 899px) {
    .ds-shell { grid-template-columns: 1fr !important; }
    .ds-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .ds-shell[data-mobile-open="true"] .ds-sidebar { transform: translateX(0); }
    .ds-shell[data-mobile-open="true"] .ds-mobile-overlay { display: block; }
    .ds-mobile-open { display: inline-flex; }
    .ds-main { padding: 64px 20px 32px; }
    .ds-sidebar-toggle { display: none; }
}

/* ── Settings page ── */
.settings-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 760px; }
.settings-card { padding: 1.75rem 2rem; }
.settings-list {
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.settings-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row dt {
    font-size: 0.875rem;
    color: var(--ink-mute);
    margin: 0;
}
.settings-row dd {
    font-size: 0.95rem;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
}
.settings-note {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0.5rem 0 1rem;
    line-height: 1.5;
}
.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.settings-signout { color: var(--action) !important; border-color: var(--action) !important; }
.settings-signout:hover { background: var(--action-tint); }
.settings-links {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.settings-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--accent-deep);
    text-decoration: none;
    font-size: 0.9rem;
}
.settings-links a:hover { text-decoration: underline; }
.settings-links a::after {
    content: "→";
    color: var(--ink-faint);
    font-size: 0.85em;
}
.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--strong-tint);
    color: var(--strong);
}
.status-pill.status-canceled,
.status-pill.status-past_due { background: var(--action-tint); color: var(--action); }

/* ── Chat page — full-bleed inside the dashboard main column ── */
body.chat-page { overflow: hidden; }
.chat-page .ds-main {
    padding: 0;
    overflow: hidden;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}
.chat-page .ds-messages { padding: 1rem 1.5rem 0; }
.chat-page .chat-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* Single-plan layout — centre the lone card so the "two-column" grid
   doesn't leave it stranded on the left. */
.pricing-grid-single {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

/* Dashboard billing — centre the single plan card too */
.plans-grid-single {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}

/* ── Reports page: delete button + section title (2026-06-02) ── */
.reports-section-title {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--rule-soft);
}
/* Match the live-score table width (.ls-standalone) so every reports-page
   box — live score, custom-range generator, Your reports — lines up. */
.reports-standalone { margin-top: 0.85rem; max-width: 1024px; }
.report-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.report-row-actions .btn-sm { padding: 0.28rem 0.6rem; font-size: 0.74rem; }
.report-row-actions .btn-sm svg { width: 12px; height: 12px; }
.report-row-delete-form { margin: 0; padding: 0; line-height: 1; }
.report-row-delete-btn {
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
}
.report-row-delete-btn:hover {
    color: var(--action);
    border-color: var(--action-tint);
    background: var(--action-tint);
}

/* ── Chat empty-state: header (sync + refresh) + 2-col category grid ── */
/* The original .chat-empty is centred + max-width 620px which is too
   narrow for a 2-column grid. Widen + left-align the empty state body. */
.chat-empty {
    text-align: left;
    max-width: 920px;
    padding: 1.5rem 1.75rem 0;
}

.chat-empty-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.chat-empty-title {
    font-family: var(--serif);
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}
.chat-empty-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.chat-empty-synced {
    font-size: 0.85rem;
    color: var(--ink-mute);
}
.chat-empty-synced-sample { color: var(--watch); font-weight: 500; }
.chat-empty-refresh-form { margin: 0; }

.chat-empty-prompt {
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.chat-suggestion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.chat-suggestion-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1rem 1.1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.chat-suggestion-cat-title {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 0.4rem;
}
.chat-suggestion-pill {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-suggestion-pill:hover {
    border-color: var(--accent);
    background: var(--accent-tint);
}

/* Strategy-aware card — spans both columns + accent-bordered so it
   visually reads as "this one talks to your prioritised plan". Pills
   inside lay out in a 2-col grid since there's now horizontal room. */
.chat-suggestion-card-strategy {
    grid-column: 1 / -1;
    border-color: var(--accent);
    background: var(--accent-tint, var(--paper-alt));
}
.chat-suggestion-card-strategy .chat-suggestion-cat-title {
    color: var(--accent-deep);
}
.chat-suggestion-card-strategy .chat-suggestion-pill { background: var(--paper); }
@media (min-width: 720px) {
    .chat-suggestion-card-strategy {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: start;
    }
    .chat-suggestion-card-strategy .chat-suggestion-cat-title {
        grid-row: 1 / span 2;
        margin: 0;
        align-self: center;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    .chat-suggestion-grid { grid-template-columns: 1fr; }
    .chat-empty-header { flex-direction: column; align-items: flex-start; }
}

/* ── Compact tightening for the suggestion grid (2026-06-02) ── */
.chat-empty {
    max-width: 880px;
    padding-top: 1rem;
}
.chat-empty-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.chat-empty-prompt {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
}
.chat-suggestion-grid { gap: 0.75rem; }
.chat-suggestion-card {
    padding: 0.85rem 0.95rem 0.75rem;
    gap: 0.35rem;
}
.chat-suggestion-cat-title {
    font-size: 0.68rem;
    margin: 0 0 0.3rem;
}
.chat-suggestion-pill {
    padding: 0.45rem 0.65rem;
    font-size: 0.83rem;
    line-height: 1.3;
}

/* ── Strategy page (dashboard tab) ─────────────────────────── */
.strategy-page { max-width: 880px; }

/* "Tied to your goals" strip (PR-E) — profile goals atop the strategy plan. */
.strategy-goals {
    max-width: 880px;
    margin: 0 auto 1rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--border, #e2e0da);
    border-radius: 8px;
    background: var(--surface-2, #faf9f7);
}
.strategy-goals-eyebrow {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
}
.strategy-goals-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
}
.strategy-goal { display: flex; flex-direction: column; gap: 1px; }
.strategy-goal-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.strategy-goal-value { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.strategy-goals-edit {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--accent, #c4622d);
    text-decoration: none;
}
.strategy-goals-edit:hover { text-decoration: underline; }
.strategy-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.25rem;
    background: var(--watch-tint);
    border-left: 3px solid var(--watch);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.strategy-banner-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--watch);
    background: var(--paper);
    border: 1px solid var(--watch);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Tab strip + panels */
.strategy-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 1.25rem;
    padding: 3px;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.strategy-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-sm) - 3px);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.strategy-tab:hover { color: var(--ink); }
.strategy-tab.is-active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(26,42,40,0.06);
}
.strategy-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.strategy-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--rule-soft);
    color: var(--ink-mute);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.strategy-tab.is-active .strategy-tab-count {
    background: var(--accent);
    color: var(--paper);
}

.strategy-panel { display: none; }
.strategy-panel.is-active { display: block; }
.strategy-panel-head { margin-bottom: 0.7rem; }
.strategy-panel-head h2 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 0.2rem;
}
.strategy-panel-sub {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.strategy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.strategy-empty {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--paper);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink-mute);
    font-size: 0.9rem;
}

.strategy-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
}
.strategy-card-action   { border-left-color: var(--action); }
.strategy-card-watch    { border-left-color: var(--watch); }
.strategy-card-on-track { border-left-color: var(--on-track); }
.strategy-card-strong   { border-left-color: var(--strong); }
.strategy-card-neutral  { border-left-color: var(--rule); }

.strategy-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.45rem;
}
.strategy-card-titles { min-width: 0; flex: 1 1 auto; }
.strategy-card-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}
.strategy-card-title {
    font-family: var(--serif);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0.1rem 0 0.15rem;
    color: var(--ink);
}
.strategy-card-short {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

.strategy-card-metric {
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 180px;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.strategy-card-metric-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}
.strategy-card-metric-value {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    font-feature-settings: var(--tnum);
}
.strategy-card-metric-pill {
    align-self: flex-end;
    font-size: 0.6rem;
}
.strategy-card-metric-hint {
    font-size: 0.65rem;
    color: var(--ink-mute);
    line-height: 1.3;
}

.strategy-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule-soft);
}
.strategy-card-why    { grid-column: span 2; }
.strategy-card-track  { grid-column: span 2; }
@media (min-width: 760px) {
    .strategy-card-why    { grid-column: span 1; }
    .strategy-card-actions { grid-column: span 1; }
    .strategy-card-track  { grid-column: span 2; }
}
.strategy-card-body p,
.strategy-card-body ol {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    color: var(--ink);
    line-height: 1.5;
}
.strategy-card-body ol {
    padding-left: 1.1rem;
}
.strategy-card-body ol li { margin-bottom: 0.18rem; }
.strategy-card-rowlabel {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}

@media (max-width: 640px) {
    .strategy-card-head { flex-direction: column; gap: 0.5rem; }
    .strategy-card-metric { text-align: left; max-width: none; min-width: 0; }
    .strategy-card-metric-pill { align-self: flex-start; }
    .strategy-card-body { grid-template-columns: 1fr; }
}

/* ── Accordion + drag + modal (added with custom levers) ────────── */
.strategy-card { padding: 0; transition: box-shadow 120ms ease; }
.strategy-card.is-dragging { opacity: 0.4; }
.strategy-card.is-drop-target { box-shadow: 0 0 0 2px var(--accent, #6E8E69) inset; }

.strategy-card-head {
    /* Override existing flex defaults for the new button element. */
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0.85rem 1rem;
    margin-bottom: 0;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: var(--radius-sm);
}
.strategy-card-head:hover { background: rgba(0,0,0,0.015); }
.strategy-card-head:focus-visible {
    outline: 2px solid var(--accent, #6E8E69);
    outline-offset: -2px;
}

.strategy-card-drag {
    flex: 0 0 auto;
    color: var(--ink-mute);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    border-radius: 4px;
}
.strategy-card-drag:hover { color: var(--ink); background: rgba(0,0,0,0.04); }

.strategy-card-head .strategy-card-titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.strategy-card-head .strategy-card-eyebrow { display: block; }
.strategy-card-head .strategy-card-title {
    display: block;
    margin: 0;
}
.strategy-card-head .strategy-card-short {
    display: block;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.strategy-card-head .strategy-card-metric {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
    min-width: 0;
    max-width: none;
    flex-direction: row;
}
.strategy-card-head .strategy-card-metric-label {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}
.strategy-card-head .strategy-card-metric-value {
    font-size: 0.92rem;
}

.strategy-card-chevron {
    flex: 0 0 auto;
    transition: transform 160ms ease;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
}
.strategy-card.is-open .strategy-card-chevron { transform: rotate(180deg); }

.strategy-card-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--rule-soft);
    margin-top: -1px;
}
/* The earlier rule sets `display: grid` which overrides the HTML
   `hidden` attribute (author CSS wins). Need an explicit rule so the
   accordion starts collapsed and toggles cleanly. */
.strategy-card-body[hidden] { display: none !important; }
.strategy-card-hint {
    grid-column: span 2;
    font-size: 0.75rem;
    color: var(--ink-mute);
    padding-top: 0.5rem;
}

.strategy-card-foot {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}
.strategy-card-edit-btn,
.strategy-card-delete-btn {
    font: inherit;
    font-size: 0.78rem;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.strategy-card-edit-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
.strategy-card-delete-btn:hover { color: #b3261e; border-color: #b3261e; }

.strategy-card-custom { border-left-color: var(--accent, #6E8E69); }

.strategy-add-btn {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.45rem 0.85rem;
    background: var(--paper);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
.strategy-add-btn:hover {
    border-color: var(--accent, #6E8E69);
    color: var(--ink);
}
.strategy-add-btn-plus { font-size: 0.95rem; line-height: 1; color: var(--accent, #6E8E69); }

/* Empty list <li> still needs zero list styling. */
.strategy-empty-li { list-style: none; }

/* ── Add / Edit modal ────────────────────────────────────────────── */
.strategy-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 90;
}
.strategy-modal {
    position: fixed;
    z-index: 91;
    background: var(--paper);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.strategy-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule-soft);
}
.strategy-modal-head h3 { margin: 0; font-family: var(--serif); font-size: 1.1rem; }
.strategy-modal-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 0 0.3rem;
}
.strategy-modal-form { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.strategy-modal-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    margin-top: 0.6rem;
}
.strategy-modal-req { color: #b3261e; }
.strategy-modal-hint {
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--ink-mute);
}
.strategy-modal-form input,
.strategy-modal-form textarea {
    font: inherit;
    color: var(--ink);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: #fff;
    resize: vertical;
}
.strategy-modal-form input:focus,
.strategy-modal-form textarea:focus {
    outline: 2px solid var(--accent, #6E8E69);
    outline-offset: 0;
    border-color: var(--accent, #6E8E69);
}
.strategy-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.strategy-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}
.strategy-modal-cancel,
.strategy-modal-save {
    font: inherit;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.strategy-modal-save {
    background: var(--accent, #6E8E69);
    border-color: var(--accent, #6E8E69);
    color: #fff;
}
.strategy-modal-save:disabled { opacity: 0.6; cursor: progress; }

/* ── Inline editable fields + save indicators ────────────────────── */
.strategy-editable {
    outline: none;
    border-radius: 4px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.strategy-editable:hover {
    background-color: rgba(110, 142, 105, 0.05);
}
.strategy-editable:focus {
    background-color: rgba(110, 142, 105, 0.08);
    box-shadow: 0 0 0 2px rgba(110, 142, 105, 0.35);
}
.strategy-editable.is-saving {
    background-color: rgba(110, 142, 105, 0.12);
}
.strategy-editable.is-saved {
    background-color: rgba(110, 142, 105, 0.18);
    transition: background-color 800ms ease;
}
.strategy-editable.is-save-failed {
    background-color: rgba(179, 38, 30, 0.1);
    box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.4);
}
/* Empty-state hint — show the placeholder when the field is empty AND
   not focused. */
.strategy-editable:empty:not(:focus)::before {
    content: attr(data-empty-placeholder);
    color: var(--ink-mute);
    font-style: italic;
}

/* Actions field is multi-line and preserves the user's line breaks. */
.strategy-editable-actions {
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink);
    padding: 0.1rem 0.3rem;
    min-height: 1.4em;
}

/* Title head — make it look obviously editable on hover. */
.strategy-card-head .strategy-card-title.strategy-editable {
    cursor: text;
}

/* ── Notes log ───────────────────────────────────────────────────── */
.strategy-card-notes {
    grid-column: span 2;
    margin-top: 0.4rem;
}
.strategy-card-notes-list {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.strategy-card-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.45;
}
.strategy-card-note-when {
    flex: 0 0 auto;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    color: var(--ink-mute);
    padding-top: 0.1rem;
}
.strategy-card-note-text {
    flex: 1 1 auto;
    white-space: pre-wrap;
    color: var(--ink);
}
.strategy-card-note-del {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.3rem;
    border-radius: 4px;
}
.strategy-card-note-del:hover {
    color: #b3261e;
    background: rgba(179, 38, 30, 0.08);
}
.strategy-card-note-add {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.strategy-card-note-input {
    font: inherit;
    color: var(--ink);
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: #fff;
    resize: vertical;
}
.strategy-card-note-input:focus {
    outline: 2px solid var(--accent, #6E8E69);
    border-color: var(--accent, #6E8E69);
}
.strategy-card-note-add-btn {
    align-self: flex-end;
    font: inherit;
    font-size: 0.8rem;
    background: var(--accent, #6E8E69);
    color: #fff;
    border: 0;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.strategy-card-note-add-btn:disabled { opacity: 0.6; cursor: progress; }
.strategy-card-note-add-btn:hover:not(:disabled) {
    filter: brightness(0.92);
}

/* ── Practice Profile page (dashboard tab) ─────────────────── */
.profile-page { max-width: 880px; }

.profile-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.25rem;
    background: var(--accent-tint, var(--paper-alt));
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.profile-banner-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--paper);
    border: 1px solid var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
}

.profile-messages {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.profile-message {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--strong-tint, var(--paper-alt));
    color: var(--strong, var(--ink));
    margin-bottom: 0.3rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem 1.1rem;
}
.profile-card-head { margin-bottom: 0.85rem; }
.profile-card-head h2 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin: 0.15rem 0 0.25rem;
}
.profile-card-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* Observed "From your PMS" panel on the profile (PR-C1) — read-only. */
.profile-observed {
    margin: 0 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border, #e2e0da);
    border-radius: 8px;
    background: var(--surface-2, #faf9f7);
}
.profile-observed-head {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
    line-height: 1.5;
}
.profile-observed-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 6px;
    background: var(--accent, #c4622d);
    color: #fff;
}
.profile-observed-badge-sample { background: var(--ink-soft, #8a857c); }
.profile-observed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.55rem;
}
.profile-observed-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: var(--surface, #fff);
    border-left: 3px solid var(--border, #e2e0da);
}
.profile-observed-strong  { border-left-color: #2e7d52; }
.profile-observed-on-track { border-left-color: #4a90c2; }
.profile-observed-watch   { border-left-color: #d8a13a; }
.profile-observed-action  { border-left-color: #c4622d; }
.profile-observed-label {
    font-size: 0.68rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-observed-value { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.profile-observed-foot {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
}

/* Owner time-split — four percentage inputs + a live total. */
.profile-timesplit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}
.profile-timesplit-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--ink-soft);
}
.profile-timesplit-item input { width: 72px; }
.profile-timesplit-total {
    font-size: 0.8rem;
    font-weight: 700;
    padding-bottom: 6px;
}
.profile-timesplit-total.is-ok  { color: #2e7d52; }
.profile-timesplit-total.is-off { color: var(--accent, #c4622d); }

.profile-grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
.profile-grid-2 { grid-template-columns: repeat(2, 1fr); }
.profile-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
    .profile-grid-2, .profile-grid-3 { grid-template-columns: 1fr; }
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.profile-field-full {
    margin-top: 0.4rem;
}
.profile-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}
.profile-hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-faint);
}
.profile-field input,
.profile-field select,
.profile-field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Drop the native browser chrome on dropdowns so they match the text
   inputs above. Inline-SVG chevron in ink-mute colour replaces the
   default arrow; extra right-padding makes room for it. */
.profile-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b675f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    cursor: pointer;
}
.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}
.profile-field textarea {
    resize: vertical;
    min-height: 6em;
    line-height: 1.5;
}
.profile-error {
    font-size: 0.78rem;
    color: var(--action);
    font-weight: 600;
}

.profile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}
.profile-updated {
    font-size: 0.78rem;
    color: var(--ink-mute);
}

/* ── Chat: save-to-memory pill below each assistant message ── */
.chat-msg-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0.25rem 0 0 0.4rem;
    padding: 2px 7px;
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: 999px;
}
.chat-msg-save:hover {
    background: var(--accent-tint, var(--paper-alt));
    color: var(--accent-deep);
}
.chat-msg-save:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.chat-msg-save svg { display: block; width: 11px; height: 11px; }

/* Lightweight inline toast inside the chat log. */
.chat-toast {
    align-self: center;
    margin: 0.6rem 0;
    padding: 0.4rem 0.85rem;
    background: var(--strong-tint, var(--paper-alt));
    color: var(--strong, var(--ink));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    transition: opacity 0.5s ease;
}
.chat-toast-fade { opacity: 0; }

/* ── Save-to-memory modal ── */
.mem-modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 42, 40, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1.5rem;
}
.mem-modal[hidden] { display: none; }
.mem-modal-panel {
    background: var(--paper);
    border-radius: var(--radius);
    max-width: 480px;
    width: 100%;
    padding: 1.25rem 1.25rem 1.1rem;
    position: relative;
    box-shadow: 0 18px 50px rgba(26, 42, 40, 0.22);
}
.mem-modal-panel h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
}
.mem-modal-sub {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.mem-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.mem-modal-close:hover { background: var(--rule-soft, rgba(0,0,0,0.06)); color: var(--ink); }
.mem-modal-form { display: flex; flex-direction: column; gap: 0.75rem; }
.mem-modal-kinds {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mem-modal-kinds legend {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    margin-bottom: 0.3rem;
    padding: 0;
}
.mem-modal-kind {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mem-modal-kind:hover { border-color: var(--accent); }
.mem-modal-kind input[type="radio"] { accent-color: var(--accent); }
.mem-modal-kind input[type="radio"]:checked + span { font-weight: 600; }
.mem-modal-field { display: flex; flex-direction: column; gap: 0.25rem; }
.mem-modal-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}
.mem-modal-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.mem-modal-field input,
.mem-modal-field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.mem-modal-field input:focus,
.mem-modal-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}
.mem-modal-field textarea { resize: vertical; min-height: 4em; line-height: 1.5; }
.mem-modal-error {
    margin: 0;
    color: var(--action);
    font-size: 0.82rem;
    font-weight: 600;
}
.mem-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* ── Memory sections on /profile/ ── */
.memory-sections {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}
.memory-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem 1.1rem;
}
.memory-section-head { margin-bottom: 0.75rem; }
.memory-section-head h2 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0.15rem 0 0.25rem;
}
.memory-section-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.memory-list {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.memory-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--paper-alt);
    border-radius: var(--radius-sm);
}
.memory-item-text { flex: 1 1 auto; min-width: 0; }
.memory-item-title {
    font-size: 0.88rem;
    color: var(--ink);
    font-weight: 500;
}
.memory-item-body {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.memory-item-meta {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--ink-mute);
}
.memory-item-archive { margin: 0; }
.memory-item-archive-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    border-radius: 4px;
    color: var(--ink-mute);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.memory-item-archive-btn:hover {
    background: var(--rule-soft, rgba(0,0,0,0.06));
    color: var(--action, #b8421a);
}

.memory-empty {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.7rem;
    background: var(--paper-alt);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--ink-mute);
    font-style: italic;
}

.memory-add-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.memory-add-title {
    flex: 1 1 auto;
    padding: 0.45rem 0.7rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.memory-add-title:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}

.memory-archived {
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
}
.memory-archived summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
}
.memory-archived-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.memory-archived-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--paper);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.memory-archived-kind {
    flex: 0 0 auto;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
}
.memory-archived-title { flex: 1 1 auto; color: var(--ink-soft); }
.memory-archived-restore { margin: 0; }

/* ── Phase 3: Memory suggestion chip below assistant messages ── */
.mem-suggest {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.75rem;
    max-width: 80%;
    background: var(--accent-tint, var(--paper-alt));
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.mem-suggest-resolving {
    opacity: 0;
    transform: translateY(-4px);
}
.mem-suggest-inner {
    flex: 1 1 240px;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.mem-suggest-eyebrow {
    flex: 0 0 auto;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-deep);
}
.mem-suggest-kind {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
}
.mem-suggest-kind-workstream { color: var(--accent-deep); border-color: var(--accent); }
.mem-suggest-kind-tried { color: var(--action, #b8421a); border-color: var(--action, #b8421a); }
.mem-suggest-kind-fact { color: var(--strong); border-color: var(--strong); }
.mem-suggest-title {
    flex: 1 1 200px;
    font-size: 0.86rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.4;
    min-width: 0;
}
.mem-suggest-rationale {
    flex: 1 1 100%;
    font-size: 0.74rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.mem-suggest-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
}
.mem-suggest-form { margin: 0; }

/* ── Settings: chat retention form row ── */
.settings-form { margin: 0.85rem 0 0; }
.settings-form-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.settings-form-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}
.settings-form-select {
    padding: 0.45rem 0.7rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.settings-form-select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}
.settings-note-strong {
    background: var(--paper-alt);
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--strong, var(--accent));
}

/* ── Settings: folded billing UI + danger zone (2026-06-03) ── */
.status-pill.status-pending-cancel {
    background: var(--watch-tint);
    color: #8E7332;
    margin-left: 0.35rem;
}
.settings-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.settings-alert {
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    line-height: 1.5;
}
.settings-alert strong { display: block; margin-bottom: 0.15rem; }
.settings-alert p { margin: 0; font-size: 0.875rem; }
.settings-alert-warn { background: var(--watch-tint); border-left: 3px solid var(--watch); }
.settings-alert-error { background: var(--action-tint); border-left: 3px solid var(--action); color: var(--ink); }

.settings-plan-card {
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem 1.1rem;
    margin-top: 0.5rem;
}
.settings-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}
.settings-plan-amount {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: var(--tnum);
}
.settings-plan-unit { font-size: 0.85rem; color: var(--ink-mute); }
.settings-plan-tagline { font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.settings-plan-features {
    margin: 0 0 0.85rem;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--ink);
    line-height: 1.5;
}
.settings-plan-features li { margin: 0.15rem 0; }
.settings-plan-footnote { font-size: 0.78rem; color: var(--ink-mute); margin: 0.6rem 0 0; }
.settings-plan-footnote a { color: var(--accent); }

/* Danger zone — card visually quiet, button red. The styling restraint
   matches GitHub's settings page: no scare colour at the surface, just
   a clearly-labelled red action. */
.settings-card-danger {
    border-color: var(--action, #b8421a);
}
.settings-card-danger h3 { color: var(--action, #b8421a); }
.btn.btn-danger {
    background: var(--action, #b8421a);
    color: var(--paper);
    border: 1px solid var(--action, #b8421a);
}
.btn.btn-danger:hover {
    background: var(--action-deep, #9a3614);
    border-color: var(--action-deep, #9a3614);
    color: var(--paper);
}

/* Stacked form row variant — label above input rather than inline. */
.settings-form-row-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}
.settings-form-input {
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.settings-form-input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}

/* ── Strategy card: "Chat about this lever" footer (2026-06-03) ── */
.strategy-card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule-soft);
}
.strategy-card-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent-deep);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.strategy-card-chat-btn:hover {
    background: var(--accent);
    color: var(--paper);
}
.strategy-card-chat-btn svg { width: 14px; height: 14px; }

/* ── Intake questionnaire (/onboarding/) + per-Q rendering ── */
.onboarding-page { max-width: 900px; }

.onboarding-section { margin-bottom: 1.25rem; }

/* "Connect your PMS to auto-fill these" callout on the numbers section. */
.onboarding-pms-callout {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink);
}
.onboarding-pms-callout strong { display: block; margin-bottom: 0.15rem; }
.onboarding-owner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.onboarding-q {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule-soft);
}
.onboarding-q:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.onboarding-q-title {
    font-family: var(--serif);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
}
.onboarding-q-why {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.onboarding-q select,
.onboarding-q input[type="text"],
.onboarding-q input[type="number"],
.onboarding-q textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.onboarding-q select:focus,
.onboarding-q input:focus,
.onboarding-q textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.05));
}
.onboarding-q textarea { resize: vertical; min-height: 5em; line-height: 1.5; }
.onboarding-q-other {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--ink-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.onboarding-q-other input { margin-top: 0.2rem; }

/* True single-line stacked list. Each option = one full-width row,
   the label runs the length of the column without wrapping, and
   only the checkbox + label show — no per-item card decoration. */
.onboarding-checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.4rem;
}
.onboarding-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--ink);
    transition: color 0.12s ease;
}
.onboarding-checkbox-item:hover { color: var(--accent); }
.onboarding-checkbox-item input[type="checkbox"] {
    /* Override `.profile-field input` (width:100%, padding, border)
       that styles text inputs in this same form — without these the
       checkbox renders as a 700px-wide bordered box and the label
       gets pushed outside the visible area. */
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.onboarding-checkbox-item input[type="checkbox"]:checked + span { font-weight: 600; }

.onboarding-data-flag {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--watch);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.5;
    cursor: pointer;
}
.onboarding-data-flag input[type="checkbox"] { margin-top: 4px; accent-color: var(--accent); }
.onboarding-data-flag strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }

.onboarding-q-checkbox-row { padding-bottom: 0; border-bottom: 0; }

.onboarding-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.25rem;
}
.onboarding-edit-later {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-mute);
    text-align: right;
}
.onboarding-edit-later a { color: var(--accent); }

/* ── Auto-save banner on /profile/ ── */
.profile-autosave-banner {
    position: fixed;
    bottom: 1rem;
    right: 1.25rem;
    z-index: 70;
    padding: 0.5rem 0.85rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 20px rgba(26, 42, 40, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.profile-autosave-banner[hidden] {
    display: none;
}
.profile-autosave-banner.profile-autosave-err {
    background: var(--action, #b8421a);
}
.profile-autosave-status::before {
    content: '✓ ';
    margin-right: 0.1rem;
    font-weight: 700;
}
.profile-autosave-banner.profile-autosave-err .profile-autosave-status::before {
    content: '⚠ ';
}

/* ── Practice Profile — compact, Halaxy-style dense layout (2026-06-14) ──────
   Full-width boxes — one card per row — each tightened, with the fields laid
   out in columns INSIDE the box (see .profile-rows below). Same styling. */
.profile-page { max-width: 1120px; }
.profile-form { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-card { margin: 0; padding: 0.75rem 1rem 0.85rem; }
.profile-card-head { margin-bottom: 0.45rem; }
.profile-card-head h2 { font-size: 0.92rem; margin: 0.05rem 0 0.1rem; }
.profile-card-sub { font-size: 0.72rem; line-height: 1.3; }
.profile-grid { gap: 0.45rem; margin-top: 0.15rem; }
.profile-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-field { gap: 0.12rem; }
.profile-label { font-size: 0.6rem; }
.profile-field input,
.profile-field select,
.profile-field textarea { padding: 0.38rem 0.5rem; font-size: 0.85rem; }
.profile-field textarea { min-height: 54px; }
.profile-field-full { margin-top: 0.3rem; }
.onboarding-checkbox-grid { gap: 0.22rem; }
/* Uniform half-gap (0.5rem) between every box. The memory card lives outside
   the form so the form's gap doesn't reach it — give it the same top margin,
   and match the Save row below it. */
#memory-card { margin-top: 0.5rem; }
.profile-actions { margin-top: 0.5rem; }
/* Memory sections: stacked full-width boxes (same width as the cards above),
   sitting above the Save button. */
.memory-sections {
    display: flex; flex-direction: column;
    gap: 1rem; margin-top: 1rem;
}
.profile-updated-bottom { text-align: center; margin: 0.8rem 0 0; }

/* Label-left / input-right fields, laid out in columns INSIDE each full-width
   card (auto-fit so it's ~3 columns on desktop, fewer as it narrows). Each
   field is its own label-left row. */
.profile-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.4rem 1.6rem;
}
.profile-rows .profile-field {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.profile-rows .profile-label { flex: 0 0 8.5rem; margin: 0; }
.profile-rows .profile-field input,
.profile-rows .profile-field select,
.profile-rows .profile-field textarea {
    flex: 1 1 auto; min-width: 0;
    padding: 0.18rem 0.45rem; font-size: 0.8rem;   /* small, ~text height */
}

/* Compact checkbox groups (profile page only — leaves the onboarding flow
   untouched): two tight columns, small text the size of the field inputs. */
.profile-page .onboarding-checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px 1rem; margin-top: 0.2rem;
}
.profile-page .onboarding-checkbox-item {
    align-items: flex-start; gap: 0.35rem; padding: 1px 0;
    font-size: 0.75rem; line-height: 1.25;
}
.profile-page .onboarding-checkbox-item input[type="checkbox"] {
    transform: scale(0.85); margin-top: 2px;
}
@media (max-width: 640px) {
    .profile-page .onboarding-checkbox-grid { grid-template-columns: 1fr; }
}

/* "Flag PMS data as patchy" — checkbox left, heading + compressed note inline.
   On the profile page the label also carries .profile-field (flex-direction:
   column), which would stack the checkbox on top — force it back to a row so
   the tick sits to the LEFT of the heading. */
.onboarding-data-flag strong { display: inline; margin: 0; }
.onboarding-data-flag .profile-hint { font-size: 0.75rem; }
.profile-page .onboarding-data-flag {
    flex-direction: row; align-items: flex-start;
    gap: 0.5rem; padding: 0.55rem 0.75rem;
    font-size: 0.8rem; line-height: 1.4;
}
.profile-page .onboarding-data-flag input[type="checkbox"] {
    flex: 0 0 auto; width: auto; margin-top: 1px; transform: scale(0.9);
}

/* Each profile card is an accordion: clickable header with a chevron.
   The header is a single heading line only — the category eyebrow and the
   descriptive subtitle are dropped so the cards read as a tidy list. */
.profile-card > .profile-card-head .eyebrow,
.profile-card > .profile-card-head .profile-card-sub { display: none; }
.profile-card > .profile-card-head h2 { margin: 0; }
.profile-card > .profile-card-head {
    cursor: pointer; position: relative; padding-right: 1.4rem;
    margin-bottom: 0.6rem;
    -webkit-user-select: none; user-select: none;
}
.profile-card > .profile-card-head::after {
    content: ''; position: absolute; right: 3px; top: 0.4rem;
    width: 7px; height: 7px;
    border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
    transform: rotate(45deg); transition: transform 0.18s ease;
}
.profile-card.is-collapsed > .profile-card-head::after { transform: rotate(-45deg); }
.profile-card.is-collapsed > :not(.profile-card-head) { display: none; }
.profile-card.is-collapsed > .profile-card-head { margin-bottom: 0; }

/* Practice-memory accordion: the three memory groups (Workstreams / Tried /
   Facts) live inside ONE card, styled to match the rest of the page — no
   nested boxes, no redundant eyebrow, heading sizes aligned with the cards. */
#memory-card .memory-sections { gap: 0; margin: 0; }
#memory-card .memory-section {
    background: transparent; border: 0; border-radius: 0; padding: 0;
}
#memory-card .memory-section + .memory-section {
    margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--rule);
}
#memory-card .memory-section-head .eyebrow { display: none; }
#memory-card .memory-section-head { margin-bottom: 0.45rem; }
#memory-card .memory-section-head h2 { font-size: 0.92rem; margin: 0; }
#memory-card .memory-section-sub { font-size: 0.72rem; line-height: 1.3; margin-top: 0.1rem; }
#memory-card .memory-item-title { font-size: 0.82rem; }
#memory-card .memory-item-body { font-size: 0.78rem; }
#memory-card .memory-empty { font-size: 0.76rem; margin-bottom: 0.6rem; padding: 0.45rem 0.6rem; }
#memory-card .memory-add-title { font-size: 0.82rem; padding: 0.35rem 0.6rem; }
#memory-card .memory-archived { margin-top: 0.85rem; }

/* ── Settings page — compact density (2026-06-30) ─────────────────── */
.settings-grid { gap: 1rem; }
.settings-card { padding: 1rem 1.3rem; }
.settings-card h3 { margin: 0 0 0.55rem; }
.settings-list { gap: 0.15rem; margin: 0 0 0.6rem; }
.settings-row { grid-template-columns: 135px 1fr; padding: 0.28rem 0; }
.settings-row dt { font-size: 0.78rem; }
.settings-row dd { font-size: 0.84rem; }
.settings-note { font-size: 0.8rem; margin: 0.3rem 0 0.65rem; line-height: 1.45; }
.settings-form { margin: 0.55rem 0 0; }
.settings-form-select { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
.settings-plan-card { padding: 0.7rem 0.95rem 0.8rem; margin-top: 0.35rem; }
.settings-plan-amount { font-size: 1.3rem; }
.settings-plan-tagline { font-size: 0.8rem; margin: 0 0 0.45rem; }
.settings-plan-features { font-size: 0.8rem; margin: 0 0 0.55rem; }
.settings-plan-footnote { font-size: 0.72rem; margin: 0.45rem 0 0; }
.settings-tier-options { gap: 0.45rem !important; margin: 0.7rem 0 !important; }
.settings-actions { gap: 0.45rem; margin-top: 0.55rem; }
/* smaller buttons throughout the settings cards */
.settings-card .btn { padding: 0.42rem 0.85rem; font-size: 0.8rem; }
.settings-card .btn-block { width: 100%; }
.settings-card > p { font-size: 0.82rem; line-height: 1.45; }

/* ── Profile intake fields — labels-above, uniform grid (2026-06-30) ──
   Replaces the label-left layout whose variable-width labels wrapped and
   knocked rows out of alignment. Labels above → every input is full-width
   in its column and lines up; kept compact with tight spacing. */
.profile-rows { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.6rem 1.4rem; align-items: start; }
.profile-rows .profile-field { flex-direction: column; align-items: stretch; gap: 0.18rem; }
.profile-rows .profile-label { flex: none; line-height: 1.2; }
.profile-rows .profile-field input,
.profile-rows .profile-field select,
.profile-rows .profile-field textarea { width: 100%; flex: none; padding: 0.34rem 0.55rem; font-size: 0.82rem; }

/* Self-hosted connect video (replaces the old Drive iframe) — native aspect,
   sizes to the file (1280x654) so no letterbox. */
.pms-guide-video--native { aspect-ratio: auto; border: 0; overflow: visible; margin: 0.5rem 0 0.6rem; }
.pms-guide-video--native video { display: block; width: 100%; height: auto;
    border: 1px solid var(--border, #e2e0da); border-radius: 8px; background: #000; }