/* ═══ Design tokens ═══════════════════════════════════════════════════════════
   Surfaces, ink, type scale and motion for the shared backoffice UI system.
   Zircos --ct-* values stay the source of truth underneath; these give us ONE
   name per concept so components stop hard-coding hex.

   NOTE --tc-ink is deliberately NOT mapped to --ct-emphasis-color in light mode:
   Zircos's light value is rgba(76,76,92,.75), LIGHTER than body text, which would
   invert the hierarchy. Dark mode maps to it because there the relationship holds. */
:root {
    --tc-surface-page:   var(--ct-body-bg, #f5f5f5);
    --tc-surface-card:   var(--ct-secondary-bg, #fff);
    --tc-surface-sunken: var(--ct-tertiary-bg, #f8f9fa);
    --tc-hairline:       var(--ct-border-color, #e7e9eb);

    --tc-ink:            #2c2c3e;   /* 13.5:1 */
    --tc-ink-muted:      #6c757d;   /*  4.66:1 AA */
    --tc-ink-faint:      #8a92a0;   /*  NON-TEXT only */
    --tc-accent:         #3b5de7;   /*  5.34:1 AA */

    --tc-page-pad-top:      1.25rem;
    --tc-header-pad-y:      .25rem;
    --tc-header-pad-bottom: .75rem;
    --tc-header-gap:        1rem;
    --tc-header-title-gap:  .25rem;
    --tc-header-band-gap:   1rem;
    --tc-actions-gap:       .5rem;

    --tc-fs-page-title:    1.125rem;  /* 18px 600 1.25 -.01em  */
    --tc-fs-section-title:  .9375rem; /* 15px 600 1.3  -.005em */
    --tc-fs-subtitle:       .8125rem; /* 13px 400 1.45         */
    --tc-fs-eyebrow:        .6875rem; /* 11px 600 1.2  .06em   */
    --tc-fs-meta:           .75rem;   /* 12px 600 1            */

    --tc-radius-chip:  999px;
    --tc-radius-tab:   6px 6px 0 0;
    --tc-radius-panel: .5rem;

    --tc-tabs-bg:      var(--tc-surface-page);
    --tc-tabs-top:     var(--ct-topbar-height, 70px);
    --tc-tabs-fade:    28px;
    --tc-tabs-rule:    2px;
    --tc-tabs-shadow:  0 4px 12px -4px rgba(26,27,34,.16);
    --tc-tabs-hover-bg: color-mix(in srgb, var(--tc-accent) 6%, transparent);

    --tc-ease: cubic-bezier(.2,.8,.2,1);
    --tc-dur: 160ms;
    --tc-dur-slow: 180ms;
}

/* A strip nested inside a card paints the card surface and drops the gutter bleed. */
.card .tc-tabs { --tc-tabs-bg: var(--tc-surface-card); --tc-tabs-bleed: 0px; }

[data-bs-theme="dark"] {
    --tc-ink: var(--ct-emphasis-color, #dee2e6);
    --tc-ink-muted: #a3adb9;   /* 7.2:1 on #1e1f27 */
    --tc-ink-faint: #78818f;
    --tc-accent:    #6b85f0;   /* 4.87:1 on dark */
    --tc-tabs-shadow: 0 4px 12px -4px rgba(0,0,0,.55);
    --tc-tabs-hover-bg: color-mix(in srgb, var(--tc-accent) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) { :root { --tc-dur: 0ms; --tc-dur-slow: 0ms; } }

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* clip (not hidden): blocks sideways scroll from overflowing cards WITHOUT
       creating a scroll container on body — `hidden` here silently broke the
       sticky .app-topbar (its scrollport became body, which never scrolls). */
    overflow-x: clip;
}

/* Kill iOS Safari/Chrome auto-zoom on input focus (it zooms whenever a focused
   control renders < 16px). 16px on touch widths only — desktop sizing untouched,
   pinch-zoom preserved (no viewport maximum-scale). Covers Cetan compose + all login fields. */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.header-title {
    position: absolute;
    top: 10px;
    left: 35px;
}

textarea {
    resize: none;
}

/* ===== Loading Overlay ===== */
.tc-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(36, 36, 36, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

.tc-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.60);
    animation: tc-spin 0.85s linear infinite;
}

@keyframes tc-spin {
    to { transform: rotate(360deg); }
}

.nav-item .icon {
    font-size: 18px;
}

.table .icon {
    line-height: 25px;
    cursor: pointer;
}

.table .icon:hover {
    color: blue;
}

/* ── Striped rows are the DEFAULT for every backoffice table ──────────────────
   Zircos/Bootstrap paints each CELL's shade through a box-shadow driven by the
   cascade var(--ct-table-bg-state, var(--ct-table-bg-type, --ct-table-accent-bg)).
   A <tr> background is painted over by that box-shadow and never shows — so
   striping/hover MUST set those variables, not a background. No need to add the
   `table-striped` class anywhere. tc-leads-grid and tc-leads-mini stripe at cell
   level themselves and are excluded so we don't double-paint or fight their
   custom (e.g. 4n+3) patterns. Using the explicit light token because the bundle's
   --ct-table-striped-bg resolves dark in the dark-theme block. */
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:nth-of-type(even) > * {
    --ct-table-bg-type: rgba(238, 242, 247, 0.45);
}

/* --ct-table-bg-state wins over --ct-table-bg-type in the cascade above, so hover
   correctly overrides the stripe on every row, even or odd. */
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:hover > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.06);
}
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:hover {
    cursor: pointer;
}

/* Selected-row state retained from the legacy rule. */
.table tbody tr.active > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.12);
}

/* ===== Collapsible side-nav section titles ===== */
/* Vendor Zircos sets pointer-events:none on .side-nav-title — re-enable for the
   clickable toggles (belt: inline style on the li covers stale cached app.css).
   Right padding = category li padding (10px) + .side-nav-link padding-x, so the vendor
   .menu-arrow chevron lines up exactly with the category-row chevrons below it. */
.side-nav-title.tc-nav-group-toggle {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    padding-right: calc(var(--ct-menu-item-padding-x) + 10px);
}
.tc-nav-group-toggle:hover,
.tc-nav-group-toggle:focus-visible {
    color: #fff;
}
/* Trailing hairline after each master-category label, flex-filling the gap to the chevron.
   Uses currentColor so it matches the category-title TEXT color exactly and brightens with it on
   hover (Marcos 2026-07-17). */
.tc-nav-group-toggle .tc-nav-title-rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 12px;
    margin: 0 10px;
    background-color: currentColor;
    opacity: .45;
}

/* ===== TC Filter Bar ===== */
.tc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 1rem;
}

.tc-filter-bar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.tc-filter-bar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tc-filter-bar__daterange {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tc-filter-bar__date-sep {
    font-size: .8125rem;
    color: #4c4c5c;
    line-height: 1;
}

.tc-filter-bar__search-label {
    font-size: .8125rem;
    color: #4c4c5c;
    white-space: nowrap;
    font-family: "Open Sans", sans-serif;
}

/* Remove the old icon approach � now using a label like Zircos */
.tc-filter-bar__search-icon { display: none; }

.tc-filter-search-field {
    width: 240px;
}

.tc-filter-search-field .mud-input-outlined-border {
    border-radius: 4px !important;
    border-color: #dee2e6 !important;
}

.tc-filter-search-field .mud-input-root {
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    height: 22px !important;
    padding: 0 8px !important;
}

.tc-filter-search-field .mud-input-outlined .mud-input-slot {
    padding: 4px 8px !important;
}

.tc-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    align-self: center;
}

.tc-filter-chip {
    font-size: .75rem !important;
    font-family: "Open Sans", sans-serif !important;
    height: 26px !important;
    border-radius: 13px !important;
    cursor: pointer;
    transition: opacity .15s;
}

.tc-filter-chip:hover { opacity: .85; }

/* ===== Date range pickers � match search bar height ===== */
.tc-date-picker {
    width: 130px;
}

.tc-date-picker .mud-input-outlined-border {
    border-radius: 4px !important;
    border-color: #dee2e6 !important;
}

.tc-date-picker .mud-input-root {
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    padding: 0 8px !important;
}

.tc-date-picker .mud-input-outlined .mud-input-slot {
    padding: 4px 8px !important;
}

.tc-date-picker .mud-input-adornment-end .mud-icon-button {
    padding: 2px !important;
    width: 20px !important;
    height: 20px !important;
}

.tc-date-picker .mud-icon-root { font-size: 14px !important; }

/* use our own "Date:" label � suppress MudBlazor floating label */
.tc-date-picker .mud-input-label { display: none !important; }
.tc-date-picker .mud-input-control-input-slot { margin-top: 0 !important; }

/* ===== Date preset dropdown ===== */
.tc-date-preset-wrapper {
    position: relative;
}

.tc-date-preset-btn {
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: border-color .15s;
}

.tc-date-preset-btn:hover { border-color: #188ae2; }

/* Dashboard study filter — matches .tc-date-preset-btn pixel-for-pixel; mobile-first width (no inline style / !important fight → no load reflow) */
.tc-dash-study-select {
    height: 32px;
    box-sizing: border-box;
    padding: 0 28px 0 10px;        /* right 28px reserves Bootstrap's native chevron space */
    font-size: .8125rem;           /* kills form-select-sm's .875rem — core font-match fix */
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    color: #4c4c5c;
    background-color: #fff;        /* background-color NOT background — must not wipe Bootstrap's chevron SVG */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 100%;                   /* mobile-first */
    flex: 1 0 100%;
}
.tc-dash-study-select:hover { border-color: #188ae2; }

@media (min-width: 481px) {
    .tc-dash-study-select {
        width: auto;
        flex: 0 0 auto;
        min-width: 160px;          /* study names run long; keeps it no narrower than the date control */
    }
}

/* Match the native form-select chevron weight/color (used on the study filter) */
.tc-date-preset-chevron { font-size: 1rem; opacity: 1; color: #343a40; }

.tc-date-preset-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.tc-date-preset-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 175px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    /* These menus render inside .tc-info-card__header, which forces uppercase/letter-spacing/bold.
       Reset to normal so the option text reads as a proper Zircos dropdown, not header labels. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.tc-date-preset-option {
    padding: 8px 16px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background .1s;
}

.tc-date-preset-option:hover { background: #f5f5f5; }

.tc-date-preset-option--active {
    font-weight: 600;
    color: #3d4fff;
}

/* ── Perspective switcher (dashboard lens) ─────────────────────────────────
   The primary dashboard control — styled bolder than the date/study filters so
   it reads as the context selector, not just another filter. */
.tc-persp-wrapper {
    position: relative;
}

.tc-persp-btn {
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    background: linear-gradient(90deg, #727cf5, #6571ff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(101, 113, 255, .35);
}

.tc-persp-btn:hover { filter: brightness(1.05); }

.tc-persp-icon { font-size: 1rem; }
.tc-persp-chevron { font-size: 1rem; opacity: .9; margin-left: 2px; }

.tc-persp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.tc-persp-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 300px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0,0,0,.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-persp-option {
    padding: 9px 10px;
    font-family: "Open Sans", sans-serif;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background .1s;
}

.tc-persp-option:hover { background: #f5f6ff; }

.tc-persp-option--active { background: #eef0ff; }

.tc-persp-option-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #727cf51a;
    color: #6571ff;
    font-size: 16px;
}

.tc-persp-option-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.tc-persp-option-title { font-size: .8125rem; font-weight: 600; color: #313a46; }
.tc-persp-option-blurb { font-size: .6875rem; color: #98a6ad; line-height: 1.3; margin-top: 1px; }
.tc-persp-check { color: #6571ff; font-size: 1rem; align-self: center; flex-shrink: 0; }

/* Speed-to-lead / RAG status dot */
.tc-speed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Recommended Actions — interactive (clickable) vs informational (read-only) cards.
   The difference must be obvious at a glance: action cards get a colored left rail,
   pointer + hover-lift and a CTA button; info cards are dashed/flat with no CTA. */
.tc-rec-card { border: 1px solid #eef0f2; }

.tc-rec-card--action {
    cursor: pointer;
    border-left-width: 4px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tc-rec-card--action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
.tc-rec-card--action:focus-visible { outline: 3px solid #3b5de7; outline-offset: 2px; }

.tc-rec-card--info { border-style: dashed; background: #fbfcfd; }

.tc-rec-card--success { border-left-color: #0acf97; }
.tc-rec-card--warning { border-left-color: #ffbc00; }
.tc-rec-card--danger  { border-left-color: #fa5c7c; }
.tc-rec-card--primary { border-left-color: #727cf5; }

.tc-rec-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.tc-rec-icon--success { background: rgba(10,207,151,.12);  color: #0acf97; }
.tc-rec-icon--warning { background: rgba(255,188,0,.16);   color: #d8a200; }
.tc-rec-icon--danger  { background: rgba(250,92,124,.12);  color: #fa5c7c; }
.tc-rec-icon--primary { background: rgba(114,124,245,.12); color: #727cf5; }

.tc-rec-pill-action { background: #313a46; color: #fff; }
.tc-rec-pill-info   { background: #eef0f2; color: #6c757d; }

.tc-rec-legend { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tc-rec-legend--action { background: #727cf5; }
.tc-rec-legend--info   { background: #fbfcfd; border: 1px dashed #c8ccd4; }

/* Study Performance — expandable rows. Cells paint via --ct-table-bg-type (box-shadow
   trick), so hover/open/detail must set that variable, not a background. */
.tc-study-perf tbody tr.tc-study-row:hover > * { --ct-table-bg-type: rgba(59,93,231,.06); }
.tc-study-perf tbody tr.tc-study-row--open > * { --ct-table-bg-type: rgba(101,113,255,.10); }
.tc-study-perf tbody tr.tc-study-detail > td { --ct-table-bg-type: #f7f8fa; padding: .25rem .5rem; }

/* Dashboard widgets: every widget card is at least 400px tall — empty OR full —
   then grows with content. KPI tiles (.tc-kpi-card, no .card-title) are excluded.
   !important + the #id selector beats .tc-equal-row's min-height:0 override so the
   floor still applies to cards inside equal-height rows. */
#dashboard-tabContent .card:has(.card-title) { min-height: 400px !important; }
#dashboard-tabContent .card:has(.card-title) > .card-body { display: flex; flex-direction: column; }

/* On large screens, give card bodies a wider, shorter padding.
   KPI tiles keep their own padding (more specific selectors win). */
@media (min-width: 992px) {
    .card-body { padding: .8rem 2rem; }
}

/* No-data indicator — fills the widget and centers on both axes. */
.tc-empty-state {
    flex: 1 1 auto;
    min-height: 400px;            /* floor for standalone (title-less) empty cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Inside a titled widget the card already supplies the 500 floor — don't stack a second one. */
#dashboard-tabContent .card:has(.card-title) .tc-empty-state { min-height: 0; }

/* Study Performance — per-axis reveal controls */
.tc-study-chevron { line-height: 1; border: 0; }
.tc-breakdown-toggle {
    display: inline-flex; align-items: center; gap: .25rem;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: .1rem .4rem; font-size: .8125rem; color: inherit; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.tc-breakdown-toggle:hover { background: rgba(101,113,255,.08); border-color: rgba(101,113,255,.25); }
.tc-breakdown-toggle--open { background: rgba(101,113,255,.12); border-color: rgba(101,113,255,.35); }
.tc-breakdown-toggle i { font-size: .9rem; opacity: .7; }

/* ── Communications (inbox + chat two-pane) ────────────────────────────────── */

/* Page wrapper: fills the viewport below the sticky topbar.
   Height flows from this anchor down through the flex chain — no magic pixel calcs
   on inner elements. The Zircos CSS variable keeps this in sync with the template. */
.tc-comms-page {
    display: flex;
    flex-direction: column;
    width: 100%;                 /* parent .page-container is a flex ROW — without this the page collapses to content width */
    align-self: stretch;         /* parent uses align-items:center — override so we fill full height, not centre */
    height: calc(100dvh - var(--ct-topbar-height) - 1.5rem);  /* viewport fill, minus topbar + breathing room so it never overflows into page scroll */
}

.tc-comms {
    flex: 1 1 0;
    min-height: 560px;   /* floor: won't collapse on short laptops */
}

/* The .row (.tc-comms) computes align-items:flex-start (Zircos/vendor override), so its
   columns size to content instead of stretching to the row height. Force both panes to
   the full row height so the list / thread fill. Verified via Playwright (cols = 1067px). */
.tc-comms-inbox,
.tc-comms-chat { height: 100%; min-height: 0; }

.tc-comms-inbox {
    border-right: 1px solid #eef0f2;
    display: flex;
    flex-direction: column;
}

/* Filter / search header — pinned, subtle brand tint */
.tc-comms-inbox-head {
    flex-shrink: 0;
    background: #f9fbff;
}

.tc-comms-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Empty state — left column when no conversations match */
.tc-comms-list-empty {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 6px;
    color: #adb5bd;
}
.tc-comms-list-empty i { font-size: 2rem; opacity: .5; }
.tc-comms-list-empty-title { font-size: .8125rem; font-weight: 600; color: #6c757d; }
.tc-comms-list-empty-hint { font-size: .72rem; color: #adb5bd; }

.tc-comms-item {
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    align-items: stretch;
    position: relative;
    transition: background .15s, border-left-color .15s;
}

.tc-comms-item:hover { background: #f8f9fb; border-left-color: #d1d5ff; }
.tc-comms-item--active { background: #eef0ff; border-left-color: #6571ff; }
.tc-comms-item--active:hover { background: #e7eaff; border-left-color: #6571ff; }

/* Inner select button (all content, transparent so parent hover/active shows) */
.tc-comms-item-select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 8px 11px 11px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Per-row trash — hidden until row hover, red on button hover */
.tc-comms-item-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0;
}
.tc-comms-item:hover .tc-comms-item-del { opacity: 1; }
.tc-comms-item-del:hover { color: #dc3545; }

/* Mark-as-read quick action — mirrors the delete button layout, green on hover.
   Used in both the /communications list and the global CommPanel rows. */
.tc-comms-item-read,
.tc-comm-row-read {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0;
}
.tc-comms-item:hover .tc-comms-item-read,
.tc-comm-row:hover .tc-comm-row-read { opacity: 1; }
.tc-comms-item-read:hover,
.tc-comm-row-read:hover { color: #0acf97; }

.tc-comms-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.tc-comms-unread {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fa5c7c;
}

.tc-comms-chat {
    display: flex;
    flex-direction: column;
}

/* Chat header and reply bar pinned; thread flex-fills the gap */
.tc-comms-chat-head { flex-shrink: 0; }
.tc-comms-reply { flex-shrink: 0; }

.tc-comms-thread {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-comms-bubble-row { display: flex; }
.tc-comms-bubble-row--mine { justify-content: flex-end; }

.tc-comms-bubble {
    max-width: 78%;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px 12px 12px 2px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.tc-comms-bubble--mine {
    background: #6571ff;
    border-color: #6571ff;
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.tc-comms-bubble-time {
    font-size: .65rem;
    opacity: .6;
    margin-top: 3px;
    text-align: right;
}

.tc-comms-bubble-sender {
    font-size: .65rem;
    font-weight: 700;
    opacity: .7;
    margin-bottom: 2px;
}

@media (max-width: 767px) {
    /* Release the viewport-fill so each pane sizes to content and the page scrolls */
    .tc-comms-page {
        height: auto;
    }
    .tc-comms {
        flex: none;
        min-height: 0;
    }
    /* Stacked panes size to content on mobile — release the forced full height */
    .tc-comms-inbox,
    .tc-comms-chat {
        height: auto;
    }
    .tc-comms-inbox {
        border-right: none;
        border-bottom: 1px solid #eef0f2;
    }
    /* No fixed/max heights on mobile — natural content sizing, page scrolls */
    .tc-comms-list {
        flex: none;
        max-height: none;
    }
    .tc-comms-thread {
        flex: none;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .tc-persp-wrapper { flex: 1 0 100%; }
    .tc-persp-btn { width: 100%; justify-content: space-between; }
    .tc-persp-menu { left: 0; right: 0; min-width: 0; max-width: calc(100vw - 16px); }
}

/* ── Equal-height card rows ────────────────────────────────────────────── */
/*  Guarantees all cards in a row match the tallest card's height.
    Apply .tc-equal-row to any .row that contains .card siblings. */
.tc-equal-row {
    align-items: stretch !important;
}
.tc-equal-row > [class*="col"] {
    display: flex !important;
    flex-direction: column !important;
}
.tc-equal-row > [class*="col"] > .card {
    flex: 1 1 auto !important;
    height: auto !important;      /* override any fixed height from template */
    min-height: 0 !important;
}

/* ── Chart centering ───────────────────────────────────────────────────────
   Wrap a dashboard chart in .tc-chart-center (inside a d-flex flex-column
   card-body) so it sits centered — vertically AND horizontally — in the card's
   leftover space, like the empty-state text. IMPORTANT: this must stay a normal
   full-width BLOCK (not display:flex) — an ApexCharts donut inside a flex item
   can't measure its width and collapses to a broken crosshair. Auto block
   margins absorb the free space above/below, centering it within the
   flex-column card-body. */
.tc-chart-center {
    width: 100%;
    margin-block: auto;
    min-height: 0;
    text-align: center;   /* horizontal center for inline/inline-block chart content */
}

/* Donut hover/select feedback = opacity only (no hue shift). Pairs with States=None on
   the chart options (ApexCharts' default lighten/darken made pending yellow go pale, then
   brown on select). Scoped to .tc-donut-opacity donuts so other charts keep their defaults. */
.tc-donut-opacity .apexcharts-pie-area {
    transition: opacity .15s ease;
}

.tc-donut-opacity .apexcharts-pie-area:hover {
    opacity: .78;
}

/* ── Geographic Lead Map (Leaflet) ─────────────────────────────────────── */
.tc-lead-map {
    width: 100%;
    min-height: 320px;            /* real height so Leaflet can paint tiles (flex-grows taller) */
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;                   /* keep tiles under Bootstrap dropdowns/modals */
    background: #e9edf2;          /* visible while tiles load */
}
/* Leaflet hardening: the admin/Bootstrap theme sets img{max-width:100%}, which distorts
   map tiles — force tiles back to their natural size, and give the canvas a height. */
.leaflet-container img.leaflet-tile,
.leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; }
.leaflet-container { height: 100%; }
.leaflet-control-attribution { font-size: 10px; }

/* Click-to-sort table headers (plain HTML geo tables) */
.tc-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.tc-sortable-th:hover { color: var(--ct-primary, #727cf5); }
.tc-lead-map .leaflet-container { font: inherit; }

/* Lead Map fullscreen expand + bubble drill-down panel + legend */
.tc-lead-map { position: relative; }
.tc-geo-expand { line-height: 1; }
.tc-geo-expand:hover { color: var(--ct-primary, #727cf5); }
.tc-geo-legend { position:absolute; left:8px; bottom:8px; z-index:4; display:flex; align-items:center; gap:4px; padding:3px 10px; background:rgba(255,255,255,.92); border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.12); pointer-events:none; }

/* Fullscreen modal two-pane layout: map left (~2/3) + docked leads panel right (~1/3),
   with a 10px inset from the popup edges and a 10px gap between the two panes. */
.tc-geo-modal-body { padding:20px; gap:20px; overflow:hidden; }
.tc-geo-modal-map { flex:1 1 auto; min-width:0; }
.tc-geo-modal-map .tc-lead-map { height:100%; }
.tc-geo-modal-panel { flex:0 0 32%; max-width:460px; min-width:280px; background:#fff; border:1px solid var(--ct-border-color, #e3ebf6); border-radius:8px; overflow:hidden; }
.tc-geo-panel__list { flex:1 1 auto; min-height:0; overflow-y:auto; }
@media (max-width:767.98px){
    .tc-geo-modal-body { flex-direction:column; }
    .tc-geo-modal-map { flex:1 1 60%; min-height:240px; }
    .tc-geo-modal-panel { flex:1 1 40%; max-width:none; min-width:0; width:100%; }
}

/* Lead Map fullscreen popup — near-full with a 10px gutter from the viewport edge (not edge-to-edge). */
.tc-modal-near-full { max-width: none; height: calc(100vh - 20px); margin: 10px; }
.tc-modal-near-full .modal-content { height: 100%; }

/* No black browser focus box when a bubble is clicked — selection is shown by recoloring the
   bubble (SELECTED_STYLE in tc-geo-map.js). */
.tc-lead-map path.leaflet-interactive:focus,
.tc-lead-map path.leaflet-interactive:focus-visible { outline: none; }

/* ── Dashboard KPI Cards ───────────────────────────────────────────────── */
/* All five tiles share a 104px floor; merged tile gets its own layout rules below. */
.tc-kpi-card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .15s;
    min-height: 104px;
}
.tc-kpi-card p { letter-spacing: .03em; }
/* Vertically center each tile's content; tighter padding keeps the row snug now that the
   value + pills sit on a single line. (Merged tile overrides padding via its own selector.) */
.tc-kpi-card > .card-body { display: flex; flex-direction: column; justify-content: center; padding: .8rem 1.1rem; }
/* Merged tile: 2-column side-by-side at the same height as single-stat tiles.
   The 2-class selector beats .tc-kpi-card--clickable's display:block so the card stays a
   flex column — that lets .card-body fill the 128px and actually center its content
   (otherwise the min-height surplus pools at the bottom). */
.tc-kpi-card.tc-kpi-card--merged { min-height: 104px; display: flex; flex-direction: column; }
.tc-kpi-card--merged > .card-body { padding: .75rem 1.1rem; display: flex; flex-direction: column; justify-content: center; }
/* flex-basis:0 forces the two stats to an exact 50/50 split regardless of value length. */
.tc-kpi-card--merged .flex-fill { flex: 1 1 0 !important; min-width: 0; }
.tc-kpi-vrule { border-left: 1px solid rgba(0,0,0,.08); }
.tc-kpi-label-sm { font-size: 11px; letter-spacing: .03em; line-height: 1.2; }
.tc-kpi-value-sm { font-size: 1.125rem; line-height: 1.2; }
/* Shrink delta + context pills inside the merged tile only; DeltaBadgeHtml is unchanged. */
.tc-kpi-card--merged .badge { font-size: 10px; padding: .2rem .4rem; }
/* Single-stat tiles: keep value + delta% + context badge on ONE no-wrap row, matched across
   all four tiles. min-width:0 lets the flex row shrink; the slightly smaller value + compact
   pills guarantee the line fits the narrow xl column without wrapping or overflowing. */
.tc-kpi-statline { min-width: 0; }
.tc-kpi-statline > h3 { font-size: 1.5rem; }
.tc-kpi-statline .badge { font-size: 10px; padding: .2rem .45rem; white-space: nowrap; }
.min-w-0 { min-width: 0; }
/* Hover lift + pointer only on cards that actually navigate (Overview KPIs).
   Plain display cards must not signal interactivity. */
/* Flex column (not block) so .card-body fills the card height and its justify-content:center
   can actually center the content — a plain block card-body would top-align it. */
.tc-kpi-card--clickable { cursor: pointer; display: flex; flex-direction: column; }
.tc-kpi-card--clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.tc-kpi-card--clickable:focus-visible {
    outline: 3px solid #3b5de7;
    outline-offset: -2px;                       /* sit on the card, not outside it */
    background-color: rgba(59, 93, 231, 0.03);  /* fallback cue if outline is suppressed (High Contrast) */
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* Lead Conversations Pending/Processed toggle — compact enough to share the header row with
   the card title in a col-lg-4 card (stays pinned top-right instead of wrapping below). */
.tc-recovery-toggle .btn {
    padding: 6px 11px;             /* fat-finger friendly: taller bar, wider hit target */
    font-size: 11px;
    white-space: nowrap;
}
.tc-recovery-toggle .btn .badge {
    font-size: 10px;
    margin-left: 3px !important;   /* Bootstrap .ms-1 is !important — must out-shout it */
    padding: 3px 6px;
}
/* Darker count-badge text than Zircos' soft defaults — 9-10px type on a subtle bg
   needs more contrast than the raw theme colors give. */
.tc-recovery-toggle .badge-soft-warning { --ct-badge-color: #8a6400; }
.tc-recovery-toggle .badge-soft-success { --ct-badge-color: #067a5a; }
.tc-recovery-toggle .badge-soft-info    { --ct-badge-color: #1c7c96; }
/* Icon-only tabs: icon must read at a glance despite the 11px button type.
   Always ink-dark — selected state is carried by the soft bg + badge, not icon color.
   Hover keeps Zircos' solid-fill treatment, where white/inherit is correct. */
.tc-recovery-toggle .btn .ti {
    font-size: 15px;
    vertical-align: -2px;
    color: #313a46;
}
.tc-recovery-toggle .btn:hover .ti {
    color: inherit;
}
/* Kill Bootstrap's blue focus glow on the buttons (the active button is already colour-coded).
   Keep a subtle neutral keyboard-only focus ring so tab-navigation stays visible. */
.tc-recovery-toggle .btn:focus,
.tc-recovery-toggle .btn:active,
.tc-recovery-toggle .btn.active {
    box-shadow: none !important;
}
.tc-recovery-toggle .btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, .4);
    outline-offset: -2px;
    box-shadow: none !important;
}

/* Lead Conversations card adapts to its OWN width (drawer-open squeeze), not the
   viewport — so it degrades gracefully whether the squeeze comes from a side drawer
   or a small screen. */
.tc-recovery-card { container-type: inline-size; }

/* Squeezed: reclaim the 32px/side body padding, and stack the row action buttons
   (check/undo over trash) so the lead name + briefing keep a usable, truncated width. */
@container (max-width: 380px) {
    .tc-recovery-card > .card-body { padding-left: 1rem; padding-right: 1rem; }
    .tc-recovery-actions { flex-direction: column; gap: .35rem !important; }
}

.tc-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Smaller chip for the merged 2-stat tile — must follow the base rule to win on source order. */
.tc-kpi-icon--sm { width: 36px; height: 36px; border-radius: 10px; }

/* KPI icon accents Bootstrap doesn't ship as contextual colors. */
.tc-kpi-icon.tc-icon-purple { background: rgba(111, 66, 193, .1); color: #6f42c1; }
.tc-kpi-icon.tc-icon-orange { background: rgba(253, 126, 20, .1); color: #fd7e14; }

/* ── Recommended Action Cards ──────────────────────────────────────────── */
.tc-action-card {
    border: none;
    border-left: 3px solid transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .15s;
}
.tc-action-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.tc-action-card--high  { border-left-color: #fa5c7c; }
.tc-action-card--medium { border-left-color: #ffbc00; }
.tc-action-card--low   { border-left-color: #39afd1; }

.tc-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-action-icon--high   { background: rgba(250,92,124,.12); color: #fa5c7c; }
.tc-action-icon--medium { background: rgba(255,188,0,.12);  color: #ffbc00; }
.tc-action-icon--low    { background: rgba(57,175,209,.12); color: #39afd1; }

.tc-date-preset-check {
    font-size: 13px;
    color: #3d4fff;
}

/* ===== TC Leads MudDataGrid � Zircos card style ===== */

/* Strip all MudBlazor chrome � card provides the frame */
.tc-leads-grid {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    width: 100%;
    font-family: "Open Sans", sans-serif !important;
    font-size: .8125rem !important;
}

/* Table sits naturally inside card-body padding � no bleed */
.card-body .tc-leads-grid {
    width: 100%;
}

/* th � Zircos: font-family secondary (Montserrat), .75rem, uppercase, weight 600 */
.tc-leads-grid .mud-table-head th {
    padding: .5rem .6rem !important;
    background-color: transparent !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #6c757d !important;
    white-space: nowrap;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    height: 44px;
}

/* Sort icon � make MudBlazor sort button visible and Zircos-sized */
.tc-leads-grid .mud-table-head th .mud-button-root {
    opacity: 1 !important;
    visibility: visible !important;
    color: #adb5bd !important;
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
}

.tc-leads-grid .mud-table-head th .mud-button-root:hover {
    color: #4c4c5c !important;
}

/* Sort icon size matches Zircos ti-chevrons */
.tc-leads-grid .mud-table-head th .mud-button-root .mud-icon-root {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

.tc-leads-grid .mud-table-head th:last-child  { padding-right: 1.5rem !important; }

/* td � Open Sans 0.8125rem, padding matches Zircos .table */
.tc-leads-grid .mud-table-body td {
    padding: .5rem .6rem !important;
    height: 44px;
    max-height: 44px;
    border-bottom: 1px solid #e7e9eb !important;
    border-top: none !important;
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    color: #4c4c5c !important;
    vertical-align: middle;
    box-shadow: none !important;
}

.tc-leads-grid .mud-table-body td:last-child  { padding-right: 1.5rem !important; }

/* Striped — Zircos .table-striped colors: white vs rgba(238,242,247,.45).
   ChildRowContent makes MudDataGrid emit TWO <tr> per item (main row + a
   collapsed/expanded child row), so a plain odd/even stripe shades the invisible
   child rows and leaves every visible main row white (= no stripes at all).
   Stripe on a 4-row cadence instead: item N occupies rows 2N-1 (main) and 2N
   (child). Odd items → 4n+1/4n+2 (white); even items → 4n+3/4n+4 (shaded), so the
   child row always matches its parent. */
.tc-leads-grid .mud-table-body tr:nth-child(4n+1) td,
.tc-leads-grid .mud-table-body tr:nth-child(4n+2) td { background-color: #fff; }
.tc-leads-grid .mud-table-body tr:nth-child(4n+3) td,
.tc-leads-grid .mud-table-body tr:nth-child(4n+4) td { background-color: rgba(238, 242, 247, 0.45); }

/* Clickable rows */
.tc-leads-grid--clickable .mud-table-body tr {
    cursor: pointer;
}

.tc-leads-grid--clickable .mud-table-body .tc-col-actions {
    cursor: default;
}

/* Hover � Zircos primary tint */
.tc-leads-grid .mud-table-body tr:hover td {
    background-color: rgba(24, 138, 226, 0.05) !important;
    cursor: pointer;
}

/* Remove MudBlazor toolbar / header chrome */
.tc-leads-grid .mud-toolbar,
.tc-leads-grid .mud-table-toolbar {
    display: none !important;
}

/* Keyword suggestions — "recommended for SEO" row highlight (Bootstrap table) */
.tc-leads-grid tr.tc-kw-recommended > td {
    background-color: #e9f9ef;
}
.tc-leads-grid tr.tc-kw-recommended:hover > td {
    background-color: #ddf4e6;
}
.tc-kw-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #e9f9ef;
    border: 1px solid #bfe6cd;
    vertical-align: -2px;
}

/* Pager � flush with card bottom, matches dataTables_info + pagination-rounded */
.tc-leads-grid .mud-table-pagination {
    border-top: none !important;
    padding: .6rem 1.5rem !important;
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    color: #6c757d !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Round pager buttons � Zircos pagination-rounded */
.tc-leads-grid .mud-table-pagination .mud-button-root,
.tc-leads-grid .mud-table-pagination .mud-icon-button {
    border-radius: 50% !important;
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 2px !important;
    border: none !important;
    padding: 0 !important;
    font-size: .8125rem !important;
}

/* Active page � Zircos #188ae2 */
.tc-leads-grid .mud-table-pagination .mud-selected .mud-button-root,
.tc-leads-grid .mud-table-pagination .mud-pagination-item-active .mud-button-root {
    background-color: #188ae2 !important;
    color: #fff !important;
}

/* Page content background */
.page-content {
    background: rgb(245, 245, 245) !important;
}

/* Filter chip � active state uses status-matching colour via border + text only */
.tc-filter-chip.mud-chip-color-primary {
    background-color: #3d4fff !important;
    color: #fff !important;
}

/* Active "All" status chip = purple, matching the Total Leads KPI it filters to. */
.tc-filter-chip.tc-chip-all-active.mud-chip-color-primary {
    background-color: #6f42c1 !important;
}

.tc-filter-chip.mud-chip-color-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #ffc107 !important;
    box-shadow: none !important;
}

.tc-filter-chip.mud-chip-color-error {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border: 1px solid #dc3545 !important;
    box-shadow: none !important;
}

.tc-filter-chip.mud-chip-color-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border: 1px solid #198754 !important;
    box-shadow: none !important;
}

/* ── Lead Recovery tool ───────────────────────────────────────────── */
.tc-recovery__check { width: 38px; }
.tc-recovery__check .form-check-input { cursor: pointer; }
.tc-recovery__check .form-check-input:checked { background-color: #727cf5; border-color: #727cf5; }
.tc-recovery__row--sel > td { background-color: rgba(114,124,245,.06); }
.tc-recovery__settings-toggle {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
.tc-recovery__settings-toggle:hover { background-color: rgba(114,124,245,.05); }
.tc-token {
    cursor: pointer; padding: 1px 6px; border-radius: 4px;
    background: rgba(114,124,245,.10); color: #727cf5; margin-right: 4px;
    border: 1px solid transparent; transition: border-color .15s ease;
}
.tc-token:hover { border-color: #727cf5; }
@media (prefers-reduced-motion: reduce) { .tc-token { transition: none; } }

/* Active info chip (e.g. Pre-screened) � light-blue soft pill */
.tc-filter-chip.mud-chip-color-info {
    background-color: #d2ebf9 !important;
    color: #055160 !important;
    border: 1px solid #39afd1 !important;
    box-shadow: none !important;
}

/* Active "Pending Contact" chip � orange soft pill (a recovery reply is waiting on staff).
   Distinct from Pending (yellow) and Not Answered (red), which both differ in urgency/meaning.
   Overrides the Error base colour the chip is declared with. */
.tc-filter-chip.tc-chip-pending-contact.mud-chip-color-error {
    background-color: #ffe5d0 !important;
    color: #8a3d0b !important;
    border: 1px solid #fd7e14 !important;
    box-shadow: none !important;
}

/* Active "Recovered" chip � teal soft pill (a recovery thread exists on the lead).
   Declared Success but overridden to teal so it reads distinctly from Processed (green). */
.tc-filter-chip.tc-chip-recovered.mud-chip-color-success {
    background-color: #cdeee9 !important;
    color: #0b544b !important;
    border: 1px solid #20a58f !important;
    box-shadow: none !important;
}

/* Inactive chips � neutral pill */
.tc-filter-chip.mud-chip-color-default {
    background-color: #f0f0f0 !important;
    color: #444 !important;
    border: 1px solid rgba(0,0,0,.1) !important;
}

.tc-action-btns {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* Native trash button � replaces MudIconButton so Blazor owns the click fully */
.tc-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #dc3545;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.tc-trash-btn:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.tc-trash-btn:focus-visible {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Secondary row action button (e.g. "View Leads") — same chrome as trash, blue accent */
.tc-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    font-size: 12px;
}

.tc-secondary-btn:hover {
    background: rgba(13, 110, 253, 0.12);
    color: #0a58ca;
}

.tc-secondary-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Compact leads list (Patients page side card) — Zircos striped rows.
   Striping is applied only to the clickable data rows so expanded detail rows
   stay white and don't break the stripe rhythm. */
.tc-leads-mini__row { cursor: pointer; }
.tc-leads-mini__row > td { background-color: #fff; }
.tc-leads-mini__row:nth-of-type(4n+3) > td { background-color: rgba(238, 242, 247, .55); }
.tc-leads-mini__row:hover > td { background-color: rgba(24, 138, 226, 0.05) !important; }
.tc-leads-mini__detail > td { background-color: #fff !important; }

/* All Bootstrap rows default to top-aligned columns — no card-height stretching. */
.row { align-items: flex-start; }

/* Side-panel column simply aligns to the top of the row — no inner scroll,
   no max-height. The page scrolls naturally. */
.tc-sticky-top {
    position: relative;
}

/* Custom Bootstrap-style pager appended below ZircosDataTable's grid. */
.tc-pager .page-link {
    border-radius: 50% !important;
    min-width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    font-size: 12px;
    color: #4c4c5c;
    border-color: #dee2e6;
}
.tc-pager .page-item.active .page-link {
    background-color: #188ae2;
    border-color: #188ae2;
    color: #fff;
}
.tc-pager .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #fff;
}
.tc-pager__size { width: auto; }

.tc-secondary-badge {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.15);
    color: #0a58ca;
}

.tc-no-records {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Status chips in table */
.tc-status-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tc-status-pending {
    background: #fff3cd;
    color: #856404;
}

.tc-status-not-answered {
    background: #f8d7da;
    color: #842029;
}

.tc-status-processed {
    background: #d1e7dd;
    color: #0f5132;
}

.tc-status-unreachable {
    background: #e2e3e5;
    color: #41464b;
}

.tc-status-screened {
    background: #cfe2ff;
    color: #084298;
}

/* Generic status palette � used when DB status values don't match named classes */
.tc-status-0 { background: #d1e7dd; color: #0f5132; } /* green  */
.tc-status-1 { background: #fff3cd; color: #856404; } /* yellow */
.tc-status-2 { background: #cfe2ff; color: #084298; } /* blue   */
.tc-status-3 { background: #f8d7da; color: #842029; } /* red    */
.tc-status-4 { background: #e2d9f3; color: #432874; } /* purple */
.tc-status-5 { background: #fde8d8; color: #7d3a08; } /* orange */

/* Named status badges � match chip colours exactly */
.tc-status-recruiting  { background: #d1e7dd; color: #0f5132; } /* green  � Success  */
.tc-status-coming-soon { background: #fff3cd; color: #856404; } /* yellow — Warning  */

/* Copy-to-clipboard button — no focus ring; icon swap is the visual feedback */
.tc-copy-btn:focus,
.tc-copy-btn:focus-visible { outline: none; box-shadow: none; }

/* Referral type badges */
.tc-status-ref-team       { background: #cfe2ff; color: #084298; } /* blue   — Info       */
.tc-status-ref-influencer { background: #e2d9f3; color: #432874; } /* purple — Secondary  */
.tc-status-ref-campaign   { background: #fde8d8; color: #7d3a08; } /* orange — Warning    */

/* Referrer-code channel badges */
.tc-status-ch-meta     { background: #dce7fb; color: #1c3d6e; } /* Facebook & Instagram */
.tc-status-ch-google   { background: #fde2e1; color: #842029; } /* Google               */
.tc-status-ch-sms      { background: #d1f2e1; color: #0f5132; } /* SMS                  */
.tc-status-ch-email    { background: #fff3cd; color: #664d03; } /* Email                */
.tc-status-ch-calls    { background: #e0dbfb; color: #3b2a7a; } /* Calls (AI agent)     */
.tc-status-ch-external { background: #e2e3e5; color: #41464b; } /* External             */

/* ── Prescreen Eligibility Qualification ──────────────────────────────────
   Verdict card (lead detail) + config editor (LeadCatcher edit). Reuses the
   Zircos chip palette so verdicts read as the same system as table statuses.
   Verdict is ADVISORY only — the .tc-prescreen-note disclaimer makes that
   explicit and color is never the sole signal (every badge carries an icon
   AND a word). All badge fg/bg pairs clear WCAG AA (>=4.5:1). */

/* Verdict card — calm container inside a standard .card; a thin primary rail
   marks it as a derived/AI surface without competing with the state badge. */
.tc-prescreen-card {
    border-left: 3px solid #727cf5;
    background: #fbfbfe;
    border-radius: 6px;
    padding: 1rem 1.1rem;
}

/* Verdict badge — larger than the table status-chip; this is the headline. */
.tc-prescreen-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}
.tc-prescreen-badge i { font-size: 13px; line-height: 1; }

.tc-prescreen-badge--eligible    { background: #d1e7dd; color: #0f5132; } /* green  */
.tc-prescreen-badge--noteligible { background: #f8d7da; color: #842029; } /* red    */
.tc-prescreen-badge--review      { background: #fff3cd; color: #856404; } /* amber  */

/* One-line reason under the verdict — secondary, never shouts over the badge. */
.tc-prescreen-rationale {
    margin-top: .5rem;
    font-size: 13px;
    line-height: 1.45;
    color: #6c757d;
}

/* Persistent advisory disclaimer — info-tinted caption with a left accent and
   an info icon; reads as guidance, NOT a clinical determination. */
.tc-prescreen-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .65rem;
    padding: .45rem .6rem;
    border-left: 3px solid #84a9e8;
    border-radius: 0 4px 4px 0;
    background: #eef4fd;
    font-size: 11.5px;
    line-height: 1.4;
    color: #1c3d6e;
}
.tc-prescreen-note i { font-size: 13px; line-height: 1.3; flex-shrink: 0; opacity: .9; }

/* Tiny "Scored <time>" meta line. */
.tc-prescreen-evaluated {
    margin-top: .55rem;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: #98a6ad;
}
.tc-prescreen-evaluated i { font-size: 11px; margin-right: .25rem; }

/* Re-evaluate — small ghost/secondary button. */
.tc-prescreen-reeval {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border: 1px solid #d4d9e2;
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tc-prescreen-reeval:hover {
    background: #f5f6ff;
    border-color: #b9c0ff;
    color: #5b66e8;
}
.tc-prescreen-reeval:focus-visible { outline: 2px solid #727cf5; outline-offset: 2px; }
.tc-prescreen-reeval i { font-size: 12px; line-height: 1; }

/* Config editor — per-question "Eligibility Qualification" section. */
.tc-prescreen-config {
    border: 1px solid #e7ebf1;
    border-radius: 8px;
    background: #fbfcfe;
    padding: .85rem 1rem;
}

/* One rule = label paired with its qualifying-answer / AI-prompt control.
   Hairline divider between stacked rows; collapses to stack on narrow widths. */
.tc-prescreen-rule-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid #eef1f5;
}
.tc-prescreen-rule-row:last-child { border-bottom: 0; }
.tc-prescreen-rule-row > :first-child {
    flex: 0 0 38%;
    max-width: 38%;
    font-size: 13px;
    font-weight: 600;
    color: #313a46;
    padding-top: .35rem;
}
.tc-prescreen-rule-row > :last-child { flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) {
    .tc-prescreen-rule-row { flex-direction: column; gap: .35rem; }
    .tc-prescreen-rule-row > :first-child { flex-basis: auto; max-width: 100%; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-prescreen-reeval { transition: none; }
}

/* Campaign editor live preview pane */
.tc-campaign-preview {
    position: sticky;
    top: 1rem;
}
.tc-preview-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 6px;
}
.tc-email-preview {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 14px;
    font-size: 13px;
    line-height: 1.5;
    max-height: 55vh;
    overflow-y: auto;
}
.tc-email-preview__subject {
    font-size: 12px;
    color: #495057;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eef0f2;
}
.tc-email-preview__body {
    white-space: pre-wrap;
    word-break: break-word;
}
.tc-email-preview__footer {
    font-size: 11px;
    color: #98a2ad;
    white-space: pre-wrap;
}
/* WYSIWYG campaign-email preview frame — renders the REAL email HTML (srcdoc, sandboxed). */
.tc-email-frame {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #EEF2F4;
    display: block;
}
.tc-sms-bubble {
    background: #e7f5ff;
    border: 1px solid #b6e0fe;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 300px;
}

/* Dropdown filter in the filter bar */
.tc-filter-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.tc-filter-bar__dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-filter-select {
    height: 40px;
    box-sizing: border-box;
    min-width: 160px;
    max-width: 220px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234c4c5c'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.tc-filter-select:hover {
    border-color: #188ae2;
}

.tc-filter-select:focus {
    outline: none;
    border-color: #188ae2;
    box-shadow: 0 0 0 2px rgba(24,138,226,.15);
}

/* ===== Mobile responsive: hide non-critical columns ===== */

/* tc-leads-grid applied to a native <table> (no MudBlazor grid chrome) */
table.tc-leads-grid {
    font-family: "Open Sans", sans-serif !important;
    font-size: .8125rem !important;
    width: 100%;
    border-collapse: collapse;
}

table.tc-leads-grid thead th {
    padding: .5rem 1rem !important;
    background-color: transparent !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #6c757d !important;
    white-space: nowrap;
    border-bottom: 1px solid #e5e8ef !important;
    border-top: none !important;
    height: 44px;
    vertical-align: middle;
}

table.tc-leads-grid tbody td {
    padding: .6rem 1rem !important;
    font-size: .8125rem !important;
    color: #2c2c3e !important;
    border-bottom: 1px solid #f0f1f5 !important;
    vertical-align: middle;
}

table.tc-leads-grid tbody tr:last-child td { border-bottom: none !important; }

table.tc-leads-grid tbody tr:nth-child(odd)  td { background-color: #fff; }
table.tc-leads-grid tbody tr:nth-child(even) td { background-color: rgba(238,242,247,.45); }

table.tc-leads-grid tbody tr:hover td { background-color: rgba(59,93,231,.04) !important; }

/* Native tc-leads-grid: mobile stacked-card layout (≤767px).
   Each row becomes a card; each cell shows its column label via data-label.
   The thead is visually hidden but kept in the a11y tree (screen readers still
   announce the table semantics). Mirrors the MudBlazor grid's mobile pattern. */
@media (max-width: 767px) {
    table.tc-leads-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table.tc-leads-grid,
    table.tc-leads-grid tbody,
    table.tc-leads-grid tbody tr,
    table.tc-leads-grid tbody td {
        display: block;
        width: 100%;
    }

    table.tc-leads-grid tbody tr {
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden;
        background-color: #fff;
    }

    table.tc-leads-grid tbody tr:last-child { margin-bottom: 0; }

    /* Flatten desktop zebra striping — cards carry their own surface */
    table.tc-leads-grid tbody tr:nth-child(odd)  td,
    table.tc-leads-grid tbody tr:nth-child(even) td,
    table.tc-leads-grid tbody tr:hover td {
        background-color: transparent !important;
    }

    table.tc-leads-grid tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: .55rem .9rem !important;
        border-bottom: 1px solid #f0f1f5 !important;
        white-space: normal;
        overflow-wrap: anywhere;   /* break long emails / GUIDs so they never spill past the card */
    }

    table.tc-leads-grid tbody td:last-child { border-bottom: none !important; }

    /* Long / multi-line cells: label on its own line, value full-width & left-aligned.
       Side-by-side reads poorly once the value wraps (emails, GUIDs, descriptions). */
    table.tc-leads-grid tbody td.tc-cell-stack {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 3px;
    }

    table.tc-leads-grid tbody td.tc-cell-stack::before {
        margin-right: 0;
    }

    /* Labeled cells: column title on the left, value on the right */
    table.tc-leads-grid tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6c757d;
        text-align: left;
    }

    /* Unlabeled cells (e.g. selection checkbox) align left, no pseudo-label */
    table.tc-leads-grid tbody td:not([data-label]),
    table.tc-leads-grid tbody td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .tc-col-hide-xs {
        display: none !important;
    }

    .tc-filter-bar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .tc-filter-bar__left {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-filter-bar__search {
        max-width: 100%;
    }

    .tc-filter-bar__right {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .tc-filter-bar__daterange {
        width: 100%;
        flex-wrap: wrap;
    }

    .tc-date-preset-wrapper {
        flex: 1;
    }

    .tc-date-preset-btn {
        width: 100%;
        height: 32px;
        justify-content: space-between;
    }

    .tc-filter-bar__dropdown {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .tc-filter-select {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: 40px;
    }

    .tc-date-picker { width: 120px; }
}

/* ===== Mobile expand button ===== */
.tc-subject-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tc-subject-name {
    flex: 1;
}

/* expand + delete pushed to right on mobile */
.tc-mobile-delete {
    margin-left: auto;
    flex-shrink: 0;
}

.tc-expand-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    color: #188ae2;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tc-expand-btn:focus { outline: none; }

/* Child row tr: ALWAYS hidden on desktop */
.tc-leads-grid .mud-table-body tr:has(.tc-child-row-cell) {
    display: none !important;
}

/* Also always hide the collapsed sentinel row */
.tc-leads-grid .mud-table-body tr:has(.tc-child-collapsed) {
    display: none !important;
}

/* ===== Mobile (?767px) ===== */
@media (max-width: 767px) {

    /* Hide non-mobile columns */
    .tc-col-hide-sm {
        display: none !important;
    }

    /* Mobile layout: the main row shows ONLY the subject cell (title + optional
       right-aligned total). Every other column collapses into the expand panel,
       so values never stack onto their own orphan rows. */
    .tc-leads-grid .mud-table-body tr:not(:has(.tc-child-row-cell)) > td:not(:first-child) {
        display: none !important;
    }

    /* The subject (IsMain) cell is not always the first column — tables that lead with a
       "#"/order column flagged HideOnMobile push it to 2nd, where the rule above would hide
       it and leave the whole row visually empty. Always re-show the cell carrying the subject
       content, wherever it sits, and give it the same flush treatment as a first-child cell. */
    .tc-leads-grid .mud-table-body tr:not(:has(.tc-child-row-cell)) > td:has(.tc-subject-cell) {
        display: table-cell !important;
        padding: 0 !important;
    }

    /* Right-aligned "total" beside the title on the subject row */
    .tc-subject-total {
        margin-left: auto;
        flex-shrink: 0;
        font-weight: 700;
        font-size: .8125rem;
        color: #313a46;
        padding-right: .4rem;
        white-space: nowrap;
    }

    /* Hide the entire thead on mobile � we replace it with our own bar */
    .tc-leads-grid .mud-table-head {
        display: none !important;
    }

    /* Suppress MudBlazor data-label::before on all cells */
    .tc-leads-grid .mud-table-body .mud-table-cell::before {
        display: none !important;
        content: none !important;
    }

    /* Our custom mobile column header bar � full row is clickable */
    .tc-mobile-header-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: .55rem .6rem;
        border-bottom: 1px solid #e7e9eb;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: .8125rem;
        color: #313a46;
        cursor: pointer;
        user-select: none;
    }

    .tc-mobile-header-bar:hover { background: rgba(24,138,226,.03); }

    /* Chevron aligned to match trash icon height (32px MudIconButton) */
    .tc-mobile-sort-icon {
        font-size: 1.1rem;
        color: #adb5bd;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-mobile-header-bar:hover .tc-mobile-sort-icon { color: #4c4c5c; }

    /* Show expanded child row only when expanded */
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) {
        display: table-row !important;
        cursor: default;
    }

    /* Strip ALL padding from the child row td MudBlazor generates */
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) td,
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) td > * {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        background-color: #fff !important;
        border-bottom: 2px solid #e7e9eb !important;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    /* Subject cell: icon | name | delete � flush to left edge */
    .tc-leads-grid .mud-table-body td:first-child {
        padding: 0 !important;
    }

    .tc-subject-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0 .6rem 0 .5rem;
    }

    /* Mobile detail block � flush to left */
    .tc-mobile-detail {
        padding: 0;
        width: 100%;
    }

    .tc-mobile-detail__row {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: .45rem .6rem .45rem .5rem;
        border-bottom: 1px solid rgba(231,233,235,.7);
        font-size: .8125rem;
    }

    .tc-mobile-detail__row:last-child {
        border-bottom: none;
    }
}

/* ===== Mobile detail expansion � Zircos dtr-details style ===== */
.tc-mobile-detail {
    padding: .5rem 1rem .5rem 2.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e7e9eb;
}

.tc-mobile-detail__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: .3rem 0;
    border-bottom: 1px solid rgba(231,233,235,.6);
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
}

.tc-mobile-detail__row:last-child {
    border-bottom: none;
}

.tc-mobile-detail__label {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    min-width: 80px;
    flex-shrink: 0;
}

.tc-mobile-detail__value {
    color: #4c4c5c;
}

.hidden {
    display: none !important;
}

.pull-right {
    float: right;
}

.text-right {
    text-align: right;
}

form h4 {
    font-size: 20px;
}

/* Sign-in mark. --login-logo is set per clinic by LoginLayout from Portal Content; the literal is
   the floor for a clinic that has not supplied one. `contain` rather than `100%` because a clinic
   logo is any aspect ratio, and 100% forces the width and lets the height overflow the 59px box. */
.login-logo {
    background: var(--login-logo, url(images/emr-brief-logo.png));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 120px;
    height: 59px;
    opacity: 1;
    margin-top: 0px;
    margin-left: 5px;
}

/* Brand gradient. Both stops come from the clinic's Primary/Accent via LoginLayout — the literals
   here are Encore's original hard-coded pair, kept as the fallback so an unbranded clinic (or a
   failed content lookup) renders the screen exactly as it always did. */
.gradient-background {
    background-image: linear-gradient(169deg, var(--login-grad-from, #0a4b7d) 0%, var(--login-grad-to, #8cc63f) 90%);
    height: 100vh;
    position: sticky;
    top: 0;
}

.login-logo {
    /* Sized for a clinic LOCKUP, not the old square product mark. The box was 170x59 with
       background-size:contain, so a wide "icon + two-line wordmark" — what clinics actually upload —
       fitted to 59px tall and read as a tiny sticker on a full-screen gradient (Marcos 2026-08-17).
       Bigger box, same contain, so any aspect scales into it without distortion or cropping.
       Width is capped by the sign-in column, so it cannot outgrow the card on a narrow screen. */
    /* Fits the sign-in CARD, not a fixed pixel box. A 280px cap looked right on a 370px column and
       tiny on a wide one — the card grows with the viewport and the mark did not, so it read as a
       stamp floating over a big white panel (Marcos 2026-08-17). Sizing by aspect-ratio lets the box
       track the card's width at every breakpoint, and background-size:contain still fits any logo
       shape inside it without cropping or distortion. */
    margin: 25px auto 30px;
    width: 55%;
    aspect-ratio: 3 / 1;
    height: auto;
}

.flex-centered-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    margin-top: -155px;
}

    .login-wrapper form {
        background: #FFFFFF;
        padding: 20px;
        border-radius: 5px;
    }

.user-menu {
    padding: 0;
    vertical-align: top;
    margin-top: -19px;
    margin-right: 5px;
}

.sidebar {
    z-index: 1;
    background-image: linear-gradient(180deg, #0a4b7d 18%, #8cc63f 120%) !important;
}

/* ===== MudBlazor DatePicker popover � force light theme regardless of Zircos dark vars ===== */
.mud-picker,
.mud-picker-content,
.mud-picker-container {
    background-color: #fff !important;
    color: #212529 !important;
    border-radius: 6px !important;
}

.mud-popover.mud-popover-open {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-picker-calendar-header,
.mud-picker-month-selection,
.mud-picker-year-selection {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-picker-calendar-header-switch,
.mud-picker-calendar-header-transition,
.mud-picker-calendar-content {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-day button,
.mud-picker-calendar-day {
    color: #212529 !important;
}

.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon {
    color: #4c4c5c !important;
}

/* ── Budget Negotiation — Sourced Recommendation ────────────────────────── */

/* Collapsed-summary chip (icon + label + state word inline) */
.tc-source-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .6875rem;
    line-height: 1;
    white-space: nowrap;
}

/* Expanded breakdown container — subtle surface with inline-start border */
.tc-source-detail {
    background: rgba(0, 0, 0, .015);
    border-inline-start: 3px solid var(--bs-border-color, #dee2e6);
    padding: .625rem .75rem;
    border-radius: .5rem;
}

/* Price-option cards — each pricing source summarized to label · amount · Use; auto-fit, full-width */
.tc-price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: .5rem;
}
.tc-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .5rem .65rem;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
}
.tc-price-card__k {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: var(--bs-secondary-color, #8a909a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-price-card__v {
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tc-price-card--floor { border-color: rgba(13, 110, 253, .35); }
.tc-price-card--floor .tc-price-card__k { color: var(--bs-primary, #0d6efd); }
.tc-price-card--req {
    background: rgba(13, 110, 253, .06);
    border-color: rgba(13, 110, 253, .35);
}
.tc-price-card--req .tc-price-card__v { color: var(--bs-primary, #0d6efd); }
.tc-price-card__tag {
    position: absolute;
    top: .35rem;
    inset-inline-end: .4rem;
    font-size: .5625rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    opacity: .7;
}
.tc-price-card--add {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-style: dashed;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8125rem;
    cursor: pointer;
}
.tc-price-card--add:hover:not(:disabled) {
    color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

@media (prefers-reduced-motion: reduce) {
    .tc-source-chip,
    .tc-source-detail { transition: none; }
}

/* ===== Detail Page Layout ===== */

/* NOTE 2026-07-22: this rule used to be preceded by an orphan
   `.mud-picker .mud-button-month,` selector — a dangling comma that silently
   merged the MudBlazor picker into the page-header rule. Verified harmless
   before removal: MudBlazor v9 has NO `.mud-button-month` class (its month view
   uses .mud-picker-month / .mud-picker-month-container / .mud-picker-month-selected),
   so the selector matched zero elements and took no styles with it. */
.tc-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .6rem 0 .55rem;
    border-bottom: 1px solid #e5e8ef;
    margin-bottom: 0;
}

.tc-detail-header__title h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c2c3e;
}

/* Claim hint — small muted meta line under the lead title, replacing the loud
   header pill (Marcos 2026-07-18: post-click UX). */
.tc-claim-hint {
    margin-top: .2rem;
    font-size: 11.5px;
    color: #6c757d;
}
.tc-claim-hint i { color: #0acf97; font-size: 12px; margin-right: .25rem; }

.tc-detail-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.tc-detail-status-select {
    width: 220px;
    min-width: 160px;
}

.tc-detail-tabs .nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: #4c4c5c;
    padding: .5rem .9rem;
}

.tc-detail-tabs .nav-link.active {
    color: #3b5de7;
    font-weight: 600;
    border-bottom-color: #3b5de7;
}

.tc-detail-tab-content {
    padding-top: .25rem;
}

/* Settings pages: control the gap around the Save bar explicitly.
   Top gap = tab-content padding (collapse-proof); bottom gap = bar margin.
   Equal 12px above and below, independent of margin-collapse. */
.tc-settings-tab-content {
    padding-top: 12px;
}

.tc-settings-savebar {
    margin-top: 0;
    margin-bottom: 15px;
}

/* Padding inside the settings tab panes */
.tc-settings-tab-content .tab-pane {
    padding: 5px;
}

/* ── Settings cards: one 15px vertical rhythm between stacked fields ───────────
   The app's spacer scale makes Bootstrap's .mb-3 compute to 12px, so fields inside
   a settings card sat tighter than the 15px gap under the Save bar above them —
   two different vertical units on one screen. 15px everywhere (Marcos 2026-07-25).

   Scoped to DIRECT children of .card-body on purpose: it sets the card's own field
   rhythm without reaching into nested widgets (tables, setting blocks, sub-grids)
   that own their internal spacing. Needs !important — Bootstrap's .mb-3 carries it. */
.tc-settings-tab-content .card-body > .mb-3 {
    margin-bottom: 15px !important;
}

.tc-settings-tab-content .card-body > .row.g-3 {
    --bs-gutter-y: 15px;
}

/* Retell AI cards: 20px of breathing room at the bottom of each card, ON TOP of the card's own
   padding. A ::after spacer rather than a padding override — the theme's card padding stays the
   source of truth and this stays exactly "+20" if it ever changes (Marcos 2026-07-25). */
.tc-retell-body::after {
    content: "";
    display: block;
    height: 20px;
}

/* …and 20px under the row, so the tab itself doesn't end flush against the cards. */
.tc-retell-row {
    margin-bottom: 20px;
}

/* Same 20px under the Cetan AI tab's last row (Marcos 2026-07-25) — the cards carry mb-0 so their
   stretched heights match, which otherwise leaves the tab ending flush against them. */
.tc-cetan-last-row {
    margin-bottom: 20px;
}

/* Activity Logs → Logging Settings: breathing room under the Retention & Geolocation cards.
   They carry mb-0 (so their stretched heights match), which left them flush against the
   bottom of the view — the 20px lives on the row instead (Marcos 2026-07-25). */
.tc-log-settings-row {
    margin-bottom: 20px;
}

/* Cetan Benchmarks: the table carries mb-0 and runs to the bottom of the card, so the
   last row sat tight against the card edge. +10px BELOW the table rather than a
   padding override — the card keeps its own theme padding and this stays exactly
   "10 more" if that padding ever changes (Marcos 2026-07-25). */
.tc-benchmarks-body > .table-responsive:last-child {
    margin-bottom: 10px;
}

/* Pill / pushed-button tab strip (Portal Content sub-tabs) */
.tc-pill-tabs {
    border-bottom: 0;
    gap: .4rem;
    flex-wrap: wrap;
    background: #f2f4f7;
    padding: .4rem;
    border-radius: .6rem;
}

.tc-pill-tabs .nav-link {
    font-size: .8125rem;
    font-weight: 500;
    color: #4c4c5c;
    padding: .4rem .8rem;
    border: 1px solid #e3e6ef;
    border-radius: .45rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 23, 39, .04);
    transition: all .15s ease;
}

.tc-pill-tabs .nav-link:hover {
    color: #3b5de7;
    border-color: #c7d2f7;
    transform: translateY(-1px);
}

.tc-pill-tabs .nav-link.active {
    color: #fff;
    font-weight: 600;
    background: #3b5de7;
    border-color: #3b5de7;
    box-shadow: 0 2px 6px rgba(59, 93, 231, .35);
    transform: translateY(0);
}

/* ── Portal Content: two-pane settings rail (grouped vertical nav) ─────────────
   Replaces the old 14-pill flex-wrap strip that wrapped into ragged rows. Left rail
   is a sticky grouped nav (Brand/Pages/Legal/Review); content pane fills the rest.
   Under 992px the rail collapses to a horizontal scroll strip so mobile stays usable. */
.tc-pc-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.tc-pc-rail {
    flex: 0 0 230px;
    width: 230px;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
    padding: .5rem;
    position: sticky;
    top: 76px;
    align-self: flex-start;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
}

.tc-pc-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Align each tab's first card flush with the rail's top border — kill the inherited
   settings/detail tab-content top padding inside the two-pane layout. */
.tc-pc-content .tc-detail-tab-content,
.tc-pc-content .tc-settings-tab-content { padding-top: 0; }
.tc-pc-content .tc-settings-tab-content .tab-pane { padding-top: 0; }

.tc-pc-rail__group {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa1ac;
    padding: .55rem .55rem .25rem;
}
.tc-pc-rail__group:first-child { padding-top: .25rem; }

.tc-pc-rail__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #4c4c5c;
    font-size: .8125rem;
    font-weight: 500;
    padding: .5rem .55rem;
    border-radius: .45rem;
    margin-bottom: 1px;
    transition: background .12s ease, color .12s ease;
}
.tc-pc-rail__item .ti { font-size: 1rem; color: #6b7280; flex: 0 0 auto; }
.tc-pc-rail__label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-pc-rail__item:hover { background: #f2f4f7; color: #3b5de7; }
.tc-pc-rail__item:hover .ti { color: #3b5de7; }
.tc-pc-rail__item.active {
    background: #3b5de7;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(59, 93, 231, .28);
}
.tc-pc-rail__item.active .ti { color: #fff; }
.tc-pc-rail__item .badge { flex: 0 0 auto; }

/* Portal template preview panel (UI Template tab — the once-empty tab, now balanced) */
.tc-pc-preview-frame {
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid #e5e8ef;
}
.tc-pc-preview-bar {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .6rem;
    background: #eef1f6;
}
.tc-pc-preview-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tc-pc-preview-url {
    flex: 1 1 auto;
    margin-left: .4rem;
    background: #fff;
    border-radius: .3rem;
    font-size: .68rem;
    color: #8a919c;
    padding: .12rem .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-pc-preview-body {
    height: 132px;
    padding: 1rem;
    background: linear-gradient(135deg, #12325a, #1b4b86);
}
.tc-pc-preview-line { height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .28); margin-bottom: .55rem; }
.tc-pc-swatch { height: 34px; border-radius: .4rem; border: 1px solid rgba(0, 0, 0, .08); }

/* Static "where this shows" helper card next to sparse tabs (Team / Sponsors) */
.tc-pc-hint__body { font-size: .8125rem; color: #6b7280; }

/* Compliance review — flat list (no nested cards). Group heading = underlined label;
   findings = divided rows. One container card only. */
.tc-cmp-group { margin-bottom: 1.25rem; }
.tc-cmp-group:last-child { margin-bottom: 0; }
.tc-cmp-group__head {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
    padding-bottom: .4rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid #e5e8ef;
}
.tc-cmp-finding {
    padding: .75rem .15rem;
    border-bottom: 1px solid #eef0f4;
}
.tc-cmp-finding:last-child { border-bottom: 0; }
.tc-cmp-suggest { color: #1a7f4b; }

/* Alternating gray on stacked repeater cards (Hero slides) so each reads as a
   distinct unit instead of one merged block. */
.tc-pc-slide { background: #fafbfc; margin-bottom: 20px; }
.tc-pc-slide--alt { background: #f1f3f7; }

@media (max-width: 991.98px) {
    .tc-pc-layout { flex-direction: column; }
    .tc-pc-rail {
        position: static;
        width: 100%;
        flex-basis: auto;
        max-height: none;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .4rem;
        -webkit-overflow-scrolling: touch;
    }
    .tc-pc-rail__group { display: none; }
    .tc-pc-rail__item { width: auto; margin-bottom: 0; white-space: nowrap; }
    .tc-pc-rail__item.active { box-shadow: 0 2px 6px rgba(59, 93, 231, .28); }
}

/* ── Media Studio: shared vertical-timeline stepper shell (Image + Video generators, MediaStudioShell.razor)
   Three panes: sticky ~190px timeline rail, the active step's panel, and a persistent sticky result slot.
   Unlike .tc-pc-rail (a free-browse nav list), these steps are GATED — the rail is a connected timeline
   with per-node state (locked/current/done) and, on the Compliance step, a compliance-verdict overlay. */
.tc-ms-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
}

/* ── The rail: a dark "studio console" that echoes the app's own navy sidebar, so it reads as
   part of the product — not a bolted-on widget. A glowing progress spine threads the nodes and
   an ambient brand bloom gives the panel depth + life. */
.tc-ms-rail {
    position: sticky;
    top: 76px;
    align-self: flex-start;
    flex: 0 0 224px;
    width: 224px;
    padding: 1.4rem 1.1rem 1.6rem;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    background: linear-gradient(168deg, #232c4c 0%, #1a2138 46%, #141a2c 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 50px -24px rgba(15, 20, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}
/* Ambient brand glow — a slow-breathing bloom top-left, a quiet teal counter-glow bottom-right. */
.tc-ms-rail::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(91, 123, 255, .34), transparent 68%);
    pointer-events: none;
    animation: tcMsAmbient 6s ease-in-out infinite;
}
.tc-ms-rail::after {
    content: "";
    position: absolute;
    bottom: -70px;
    right: -60px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(45, 212, 191, .16), transparent 70%);
    pointer-events: none;
}

.tc-ms-rail__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    padding: .1rem .3rem 1rem;
    margin-bottom: .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tc-ms-rail__head .ti {
    font-size: .95rem;
    color: #7d97ff;
    filter: drop-shadow(0 0 6px rgba(125, 151, 255, .6));
}

.tc-ms-panel { flex: 1 1 auto; min-width: 0; }

.tc-ms-result {
    flex: 0 0 clamp(360px, 40%, 520px);
    width: clamp(360px, 40%, 520px);
    position: sticky;
    top: 76px;
    align-self: flex-start;
    /* Deliberately NO max-height / overflow — the page body is the only scroller on desktop, so all
       step-form content stays reachable with the pointer anywhere (a nested overflow:auto here trapped
       the wheel and made the tall Setup form's lower half unreachable). Sticky still pins the panel
       when its content is shorter than the viewport. */
}
.tc-ms-result .card {
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    border-color: #eceff5;
    margin-bottom: 20px;   /* breathing room below the Creations card (Marcos 2026-07-18) */
    box-shadow: 0 20px 44px -26px rgba(28, 36, 64, .32);
}
.tc-ms-result table > thead th {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .66rem;
    font-weight: 700;
    color: #9aa1ac;
}
.tc-ms-result table > tbody td { padding-top: .65rem; padding-bottom: .65rem; }

/* ── Step panel: an elevated "canvas" card with a brand accent bar — never a naked white form. */
.tc-ms-step {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid #eceff5;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    padding: 1.85rem 1.9rem 2rem;
    box-shadow: 0 20px 44px -26px rgba(28, 36, 64, .3);
}
.tc-ms-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--ct-border-radius) var(--ct-border-radius) 0 0;
    background: linear-gradient(90deg, #3b5de7, #6f8bff 45%, #2dd4bf);
    opacity: .9;
}
.tc-ms-step:not(.d-none) { animation: tcMsRise .32s cubic-bezier(.22, .61, .36, 1); }

.tc-ms-step__head { margin-bottom: 1.1rem; }
.tc-ms-step__eyebrow {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b5de7;
    margin-bottom: .35rem;
}
.tc-ms-step__eyebrow-sep { color: #b9c0d4; margin: 0 .12rem; }
.tc-ms-step__title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: #1a2236;
    margin: 0;
}
.tc-ms-step__desc {
    font-size: .8125rem;
    color: #6b7280;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #f0f2f8;
}

/* Timeline node — a connector rises from the PREVIOUS node into this one, colored once THIS node has
   been reached (current or done), so the line fills blue top-to-bottom as steps complete. */
.tc-ms-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    font-weight: 600;
    padding: .55rem .5rem;
    margin-bottom: .2rem;
    border-radius: .7rem;
    transition: background .16s ease, color .16s ease;
}
/* The progress spine — fills top-to-bottom with a living gradient as each node is reached,
   so the rail visibly "charges up" through the flow. */
.tc-ms-node + .tc-ms-node::before {
    content: "";
    position: absolute;
    left: 1.69rem;
    top: -1.25rem;
    width: 3px;
    height: 1.85rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 3px;
    z-index: 0;
}
.tc-ms-node.is-done::before,
.tc-ms-node.is-current::before {
    background: linear-gradient(180deg, #2fd89a 0%, #5b7bff 100%);
    box-shadow: 0 0 10px rgba(91, 123, 255, .55);
}
.tc-ms-node:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: #fff; }
.tc-ms-node:disabled { cursor: not-allowed; }

.tc-ms-node__dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    border: 2px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .55);
    font-size: 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.tc-ms-node__label { flex: 1 1 auto; min-width: 0; line-height: 1.15; }

/* Upcoming (reachable but not yet reached) — quiet outline, full opacity. */
.tc-ms-node.is-upcoming .tc-ms-node__dot { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .5); }

/* Current — the hero node: gradient fill, a spring scale-up pop, layered glow + a soft pulse halo. */
.tc-ms-node.is-current { color: #fff; }
.tc-ms-node.is-current .tc-ms-node__dot {
    background: linear-gradient(135deg, #6f8bff 0%, #3b5de7 100%);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(59, 93, 231, .25), 0 8px 22px -3px rgba(91, 123, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.tc-ms-node.is-current .tc-ms-node__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(111, 139, 255, .55);
    animation: tcMsPulse 1.7s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tc-ms-node.is-current .tc-ms-node__dot::after { animation: none; }
    .tc-ms-rail::before { animation: none; }
    .tc-ms-step:not(.d-none) { animation: none; }
}
@keyframes tcMsPulse {
    0%   { transform: scale(1);    opacity: .85; }
    100% { transform: scale(1.75); opacity: 0; }
}
@keyframes tcMsRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tcMsAmbient {
    0%, 100% { opacity: .7; transform: translate(0, 0) scale(1); }
    50%      { opacity: 1; transform: translate(10px, 6px) scale(1.08); }
}

/* Done — green gradient dot + check glyph (the glyph carries the meaning, not color alone). */
.tc-ms-node.is-done { color: rgba(255, 255, 255, .88); }
.tc-ms-node.is-done .tc-ms-node__dot {
    background: linear-gradient(135deg, #2fd89a 0%, #10996a 100%);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(22, 180, 127, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Locked — inert node; dashed ring + lock glyph + dimmed + no pointer events (belt-and-suspenders
   on top of the `disabled` attribute already set in markup). */
.tc-ms-node.is-locked { opacity: .42; pointer-events: none; }
.tc-ms-node.is-locked .tc-ms-node__dot { background: rgba(255, 255, 255, .03); border: 2px dashed rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .32); box-shadow: none; }

/* Compliance verdict overlays — layered ON TOP of whichever base state (is-current/is-done) the
   Compliance step is already in; the glyph swap (GlyphFor in the shell's @code) is what actually
   carries the meaning, these rings are a secondary color cue only. Reuses Bootstrap's own stock
   danger/warning (#dc3545 / #ffc107) — both already active elsewhere in these exact tools via
   `.alert-danger`/`.alert-warning` — never a new invented color. */
.tc-ms-node.is-clear .tc-ms-node__dot { box-shadow: 0 0 0 4px rgba(26, 127, 75, .28), 0 6px 16px -4px rgba(22, 180, 127, .55); }
.tc-ms-node.is-flagged .tc-ms-node__dot {
    background: linear-gradient(135deg, #ff6b72 0%, #dc3545 100%);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .3), 0 6px 18px -3px rgba(220, 53, 69, .6);
}
/* Coverage gap — content cleared (green) but IRB coverage isn't on file: an amber ring layered
   OUTSIDE the green one, never replacing it (the content verdict must stay visible). */
.tc-ms-node.is-coverage .tc-ms-node__dot {
    box-shadow: 0 0 0 4px rgba(26, 127, 75, .26), 0 0 0 7px rgba(255, 193, 7, .42);
}

@media (max-width: 991.98px) {
    .tc-ms-shell { flex-direction: column; gap: 1rem; }
    /* Mobile timeline: a compact equal-width stepper that FITS the width — NO horizontal scroll
       (Marcos 2026-07-18: the scrolling strip was awful). Dots sit in a row with horizontal connectors
       and small wrapping captions; the active step name also shows in the panel header. */
    .tc-ms-rail {
        position: static;
        width: 100%;
        flex-basis: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        overflow: visible;
        gap: 0;
        padding: .9rem .55rem;
        border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    }
    .tc-ms-rail__head,
    .tc-ms-rail::before,
    .tc-ms-rail::after { display: none; }
    .tc-ms-node {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin: 0;
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .35rem;
    }
    /* horizontal connector from the previous dot's centre to this one's, behind the dots */
    .tc-ms-node + .tc-ms-node::before {
        display: block;
        content: "";
        position: absolute;
        top: 1.2rem;
        left: -50%;
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, .14);
        z-index: 0;
    }
    .tc-ms-node.is-done::before,
    .tc-ms-node.is-current::before { background: linear-gradient(90deg, #2fd89a, #5b7bff); }
    .tc-ms-node__dot { position: relative; z-index: 1; }
    .tc-ms-node__label {
        display: block;
        white-space: normal;
        font-size: .62rem;
        line-height: 1.15;
        max-width: 100%;
    }
    .tc-ms-node.is-current .tc-ms-node__dot { transform: none; }
    .tc-ms-result { position: static; width: 100%; max-height: none; }
    .tc-ms-step { padding: 1.3rem 1.2rem; }
    .tc-ms-step__title { font-size: 1.15rem; }
}

/* ── Media Studio: Creations gallery (Image/Video result panes, 2026-07-18) — replaces the plain
   generations TABLE. Hero card (newest/selected) + an "Earlier" 2-up thumbnail grid. Matches the
   shell's dark-studio media surface; status chips reuse the rail's clear/flagged/coverage language. */
.tc-ms-gallery { display: flex; flex-direction: column; }

.tc-ms-hero {
    display: flex;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    box-shadow: 0 2px 10px rgba(28, 36, 48, .08);
    padding: .75rem;
    overflow: hidden;
}
.tc-ms-hero__thumb {
    flex: 0 0 42%;
    max-width: 260px;
    aspect-ratio: 4 / 3;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1c2430, #2a3446);
}
.tc-ms-hero__thumb img,
.tc-ms-hero__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-ms-hero__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tc-ms-hero__caption {
    font-size: .95rem;
    font-weight: 600;
    color: #1c2430;
    margin-top: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-ms-hero__meta { margin-top: .3rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.tc-ms-crea-heading { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .7rem; }

.tc-ms-crea-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
.tc-ms-crea-card {
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    box-shadow: 0 1px 4px rgba(28, 36, 48, .06);
    overflow: hidden;
    transition: box-shadow .12s ease, transform .12s ease;
}
.tc-ms-crea-card:hover { box-shadow: 0 4px 14px rgba(28, 36, 48, .14); transform: translateY(-1px); }
.tc-ms-crea-card__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #1c2430, #2a3446);
}
.tc-ms-crea-card__thumb img,
.tc-ms-crea-card__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-ms-crea-card__caption {
    font-size: .8125rem;
    font-weight: 600;
    color: #1c2430;
    padding: .45rem .55rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-ms-crea-card__meta {
    padding: .15rem .55rem .55rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

/* Hover-revealed reuse/delete controls on a tile — visible always on touch (no hover state), shown on
   hover/focus for pointer devices so the thumbnail stays clean by default. */
.tc-ms-crea-card__actions {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: flex;
    gap: .3rem;
    opacity: 0;
    transition: opacity .12s ease;
}
.tc-ms-crea-card:hover .tc-ms-crea-card__actions,
.tc-ms-crea-card:focus-within .tc-ms-crea-card__actions { opacity: 1; }
@media (hover: none) {
    .tc-ms-crea-card__actions { opacity: 1; }
}

/* Muted "no image / not rendered" placeholder tile — never a broken <img>. Sits as the always-present
   BASE layer of a thumb (position:absolute) so an overlaid <img> that fails to load can hide itself
   (onerror) and fall back to this tile instead of showing a broken-image glyph. */
.tc-ms-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: rgba(255, 255, 255, .55);
}
.tc-ms-thumb-placeholder .ti { font-size: 1.6rem; }

/* Play-glyph overlay on a video poster frame. */
.tc-ms-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .9);
    font-size: 1.8rem;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Status chip — small pill (hero) or icon-only dot (tile), reusing the rail's clear/flagged/coverage
   color+glyph language (never color alone — the glyph always carries the meaning). */
.tc-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 1rem;
    background: #f2f4f7;
    color: #4c4c5c;
    flex-shrink: 0;
}
.tc-ms-chip.is-clear { background: rgba(26, 127, 75, .12); color: #1a7f4b; }
.tc-ms-chip.is-flagged { background: rgba(220, 53, 69, .12); color: #dc3545; }
.tc-ms-chip.is-coverage { background: rgba(26, 127, 75, .12); color: #1a7f4b; box-shadow: inset 0 0 0 1.5px rgba(255, 193, 7, .6); }

/* Tile dot variant — icon-only, positioned on the thumbnail corner. */
.tc-ms-chip--dot {
    position: absolute;
    top: .35rem;
    left: .35rem;
    padding: .25rem;
    border-radius: 50%;
    background: #fff;
}
.tc-ms-chip--dot .ti { font-size: .8rem; }

@media (max-width: 991.98px) {
    .tc-ms-hero { flex-direction: column; }
    .tc-ms-hero__thumb { flex-basis: auto; max-width: 100%; aspect-ratio: 16 / 9; }
    .tc-ms-crea-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

/* ── Media Studio: Creations LIST (rework, 2026-08-13) — replaces the hero + "Earlier" split above.
   ONE uniform row per creation: fixed-size thumbnail, title + status chip, meta line, actions. Search
   bar sits above the list; a "View more" button reveals 5 more rows at a time (Marcos 2026-08-13). */
.tc-crea-search .input-group-text { background: #fff; border-right: 0; color: #8a92a3; }
.tc-crea-search .form-control { border-left: 0; }
.tc-crea-search .form-control:focus { box-shadow: none; border-color: #ced4e0; }

.tc-crea-list { display: flex; flex-direction: column; gap: .55rem; }

.tc-crea-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    box-shadow: 0 1px 4px rgba(28, 36, 48, .06);
    padding: .5rem .65rem;
    transition: box-shadow .12s ease, transform .12s ease;
}
.tc-crea-row:hover { box-shadow: 0 4px 14px rgba(28, 36, 48, .12); transform: translateY(-1px); }

.tc-crea-row__thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--ct-border-radius);   /* house card radius (Marcos 2026-08-13 consistency sweep) */
    overflow: hidden;
    background: linear-gradient(135deg, #1c2430, #2a3446);
}
.tc-crea-row__thumb img,
.tc-crea-row__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-crea-row__thumb .tc-ms-thumb-placeholder .ti { font-size: 1.25rem; }
.tc-crea-row__thumb .tc-ms-play-badge { font-size: 1.2rem; }

.tc-crea-row__body { flex: 1 1 auto; min-width: 0; }
.tc-crea-row__title {
    font-size: .875rem;
    font-weight: 600;
    color: #1c2430;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.tc-crea-row__meta { margin-top: .2rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.tc-crea-row__actions { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }

@media (max-width: 575.98px) {
    .tc-crea-row { align-items: flex-start; }
    .tc-crea-row__thumb { flex-basis: 52px; width: 52px; height: 52px; }
}

/* Dashboard tabs — sticky + mobile scroll: RETIRED 2026-07-22.
   Generalized into the shared .tc-tabs block at the end of this file (TcTabStrip).
   The old rules were hard-coded to #dashboard-tab, which also meant their mobile
   compaction only won the cascade because of that ID's specificity. */

@media (max-width: 767px) {
    /* Date preset menu: prevent right-edge overflow on narrow phones.
       Flip anchor to right:0 so the menu opens leftward when the button
       is near the right side of the viewport. */
    .tc-date-preset-menu {
        left: auto;
        right: 0;
        max-width: calc(100vw - 16px);
    }

}

@keyframes tc-tab-slide-from-right {
    from { transform: translateX(22px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes tc-tab-slide-from-left {
    from { transform: translateX(-22px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* REPORTS PAGE */
.tc-report-list-card {
    overflow: hidden;
}

.tc-report-list {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    border-top: 0;
}

.tc-report-item {
    border: 0;
    border-bottom: 1px solid #f1f3f6;
    padding: .75rem 1rem;
    text-align: left;
    transition: background-color .15s ease;
}

.tc-report-item:last-child {
    border-bottom: 0;
}

/* Striped rows — alternate report items. Exclude the selected item (its --active
   class is lower specificity than :nth-of-type, so without this the stripe would
   override the selected colour); :hover follows in source order and wins on ties. */
.tc-report-item:nth-of-type(even):not(.tc-report-item--active) {
    background-color: rgba(238, 242, 247, 0.45);
}

.tc-report-item:hover {
    background: #f7f8fc;
}

.tc-report-item--active {
    background: #eef0ff;
}

.tc-report-item--active:hover {
    background: #e6e9ff;
}

.tc-report-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f3f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.tc-report-item-icon--active {
    background: #727cf5;
    color: #fff;
}

/* Lead Activity Log (Dashboard) — table layout.
   Striping and base hover come from the global .table even-row rule (lines 113–120).
   Only table-specific overrides live here. */

/* Stronger hover tint on clickable rows to signal interactivity */
.table > tbody > tr.tc-activity-row--clickable:hover > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.10);
}
/* Clickable rows — pointer cursor + WCAG focus ring */
tr.tc-activity-row--clickable {
    cursor: pointer;
    user-select: none;
}
tr.tc-activity-row--clickable:focus-visible {
    outline: 2px solid #188ae2;
    outline-offset: -2px;
}
/* Worklist Call Queue — clickable row navigates to lead details. Also matches the
   <button> variant used by the "Messages Needing Attention" rows (Dashboard.razor) —
   the selector previously only matched <a>, so the button variant had zero hover/focus
   feedback; harmless additive fix picked up while giving those rows a visible border
   (Marcos 2026-07-22 row redesign). */
a.tc-worklist-row--clickable,
button.tc-worklist-row--clickable {
    cursor: pointer;
    user-select: none;
    display: flex;
    border-radius: .375rem;
}
a.tc-worklist-row--clickable:hover,
button.tc-worklist-row--clickable:hover {
    background: rgba(24, 138, 226, 0.06);
}
a.tc-worklist-row--clickable:focus-visible,
button.tc-worklist-row--clickable:focus-visible {
    outline: 2px solid #188ae2;
    outline-offset: -2px;
}
/* "View N more" / "Show less" footer on the three dashboard worklist cards. Pinned to the bottom of
   the card body (margin-top:auto) so it sits on the card's floor regardless of how many rows are
   showing — the cards share an equal-height row, and a footer that floated up under a short list
   read as a stray link rather than a control. */
.tc-worklist-more {
    margin-top: auto;
    padding-top: .5rem;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.tc-worklist-more > .btn {
    color: #188ae2;
}
/* Note cell — constrain so long notes don't blow out the column */
.tc-activity-note-cell {
    max-width: 200px;
}
/* Right-hand meta column (time + chevron) */
.tc-activity-row-meta {
    min-width: 90px;
}
/* Thin rows — tighten vertical padding on body + header cells */
.tc-activity-table > tbody > tr > td {
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.tc-activity-table > thead > tr > th {
    padding-top: .35rem;
    padding-bottom: .35rem;
}
/* Patient names never word-stack — the .table-responsive wrapper already
   scrolls sideways, so let the table grow instead of crushing this column. */
.tc-activity-table > tbody > tr > td:first-child,
.tc-activity-table > thead > tr > th:first-child {
    white-space: nowrap;
}
/* Patient deep-link inside an activity row — inherit row color, reveal underline on interaction */
.tc-patient-link {
    color: inherit;
    text-decoration: none;
}
.tc-patient-link:hover,
.tc-patient-link:focus-visible {
    color: var(--bs-link-color, #727cf5);
    text-decoration: underline;
    outline: none;
}

.tc-report-viewer-card {
    height: calc(100vh - 210px);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tc-report-viewer-body {
    flex: 1;
    min-height: 0;
    background: #525659;
    position: relative;
}

.tc-report-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .tc-report-viewer-card {
        height: 720px;
        min-height: 480px;
    }
    .tc-report-list {
        max-height: 380px;
    }
}

/* Info cards */
.tc-info-card {
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44,44,62,.06);
}

/* Media thumbnail for Portal Content image fields (PortalMediaInput). */
.tc-media-thumb {
    width: 120px;
    height: 78px;
    overflow: hidden;
    background: #f4f6fa;
}
.tc-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tc-media-thumb__ph {
    width: 100%;
    height: 100%;
    color: #aab2c5;
    font-size: 1.1rem;
}

/* Clickable media thumbnail (opens the preview lightbox) */
.tc-media-thumb--clickable { cursor: pointer; position: relative; transition: box-shadow .12s ease; }
.tc-media-thumb--clickable:hover { box-shadow: 0 0 0 2px #3b5de7; }

/* Video preview tile: first frame fills the tile; play badge overlays it */
.tc-media-thumb--video { position: relative; }
.tc-media-thumb--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.tc-media-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* ── Media preview lightbox (image/video click-to-enlarge) ─────────────────── */
.tc-mlb { position: fixed; inset: 0; z-index: 2000; display: none; }
.tc-mlb.is-open { display: flex; align-items: center; justify-content: center; }
.tc-mlb__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 35, .78); }
.tc-mlb__dialog {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
}
.tc-mlb__body { display: flex; }
.tc-mlb__img,
.tc-mlb__video {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: .5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.tc-mlb__video { background: #000; }
.tc-mlb__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    z-index: 2;
}

.tc-info-card__header {
    background: #f7f8fc;
    border-bottom: 1px solid #e5e8ef;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    padding: .6rem 1rem;
    border-radius: .5rem .5rem 0 0;
}

/* Color variant — soft primary tint for the header bar */
.tc-info-card__header--primary {
    background: rgba(var(--ct-primary-rgb), .08);
    border-bottom-color: rgba(var(--ct-primary-rgb), .18);
    color: var(--ct-primary, #6571ff);
}

/* ── Uniform setting blocks (Automation cards) ─────────────────────────────
   Each toggle is the same visual unit: switch + bold label on the left, status
   chip pinned top-right on one aligned row, short help text full-width below.
   Chips no longer wrap under long help text, so they sit at the same height in
   every block. The nested sub-group uses the tc-info-card border colour so the
   sweep's extra controls read as one indented unit, not loose trailing rows. */
.tc-setting-block__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.tc-setting-block__head .form-check {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.tc-setting-block__head .tc-status-chip {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.tc-setting-block__help {
    margin-top: .35rem;
    margin-bottom: 0;
}

.tc-setting-sub {
    margin-top: .85rem;
    padding-left: .85rem;
    /* Primary-tinted guide line (echoes .tc-ai-set-group's accent bar) — was flat grey #e5e8ef. */
    border-left: 2px solid color-mix(in srgb, var(--ct-primary, #727cf5) 45%, transparent);
}

.tc-setting-sub .form-check {
    margin-bottom: 0;
}

/* ── Cetan Scheduled Tasks rows — controls stay pinned top-right on one line ──
   Text column wraps within itself (flex: 1 1 0) instead of pushing the
   switch + time picker onto their own wrapped row. Below md, the row still
   wraps (mobile column width can't fit both) — that's intentional. */
.tc-cron-row {
    flex-wrap: wrap;
}

.tc-cron-row__text {
    flex: 1 1 0;
    min-width: 0;
}

.tc-cron-row__controls {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tc-cron-row {
        flex-wrap: nowrap;
    }
}

/* Settings tabs — breathe a bit more between label/control rows */
.tab-pane .mb-3 {
    margin-bottom: 22px;
}

/* Recovery Sweep Details: let Bootstrap columns shrink to their % basis instead of
   growing to fit unbreakable content (long emails, {FirstName} tokens, etc.) */
.tc-sweep-cards > [class*="col-"] { min-width: 0; }

/* Definition list inside info cards */
.tc-info-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    margin: 0;
    font-size: .875rem;
}

.tc-info-dl dt {
    font-weight: 600;
    color: #4c4c5c;
    white-space: nowrap;
}

.tc-info-dl dd {
    margin: 0;
    color: #2c2c3e;
    min-width: 0;                /* dd is a grid track item — needs this for wrap to shrink intrinsic size */
    overflow-wrap: anywhere;     /* replaces word-break:break-word — anywhere affects min-content sizing */
}
.tc-info-dl dd code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Sentence-length badges (Cetan call coordination, Channel learning) must wrap —
   Bootstrap's .badge default nowrap overruns the card edge. Short badges elsewhere
   in these cards ("Measured Jul 8", "Off — staff handle replies") are unaffected —
   normal white-space only wraps when content exceeds the available width. */
.tc-info-dl dd .badge {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.tc-msg-body { overflow-wrap: anywhere; word-break: break-word; }

/* ── Career application detail (EditCareerApplication) ─────────────────────
   .tc-career-body wraps CareerTextFormatter.ToHtml output — the same
   subhead/paragraph/bullet HTML the portal renders, restyled for Zircos. */
.tc-career-section-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 1.25rem 0 .5rem;
}

.tc-career-body {
    font-size: .875rem;
    color: #2c2c3e;
    overflow-wrap: anywhere;
}

.tc-career-body p { margin-bottom: .65rem; }

.tc-career-body p.career-subhead {
    font-weight: 700;
    color: #4c4c5c;
    margin: 1rem 0 .35rem;
}

.tc-career-body ul.career-list {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
}

.tc-career-body ul.career-list li { margin-bottom: .25rem; }

/* Candidate identity header — avatar chip + name over the contact rows */
.tc-candidate-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid #f0f1f5;
}

.tc-candidate-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ct-primary-rgb), .12);
    color: var(--ct-primary, #6571ff);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
}

.tc-candidate-name {
    font-weight: 700;
    font-size: .95rem;
    color: #2c2c3e;
}

.tc-candidate-meta {
    font-size: .78rem;
    color: #98a6ad;
}

/* Candidate free-text message — textarea input, so preserve line breaks */
.tc-candidate-message {
    font-size: .875rem;
    color: #2c2c3e;
    background: #f7f8fc;
    border: 1px solid #e5e8ef;
    border-radius: .375rem;
    padding: .625rem .75rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Screening Q&A */
.tc-screening-item {
    border-bottom: 1px solid #f0f1f5;
    padding: .5rem 0;
}

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

.tc-screening-q {
    font-size: .83rem;
    font-weight: 600;
    color: #2c2c3e;
    margin-bottom: .15rem;
}

.tc-screening-a {
    font-size: .875rem;
    color: #4c4c5c;
    margin: 0;
}

/* Tables inside detail cards */
.tc-detail-table thead th {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    background: transparent;
    border-bottom: 1px solid #e5e8ef;
    padding: .5rem .75rem;
    height: 44px;
    white-space: nowrap;
}

.tc-detail-table tbody td {
    font-size: .8125rem;                 /* was .875rem — consistency with fs-13 cells */
    padding: .5rem .75rem;               /* Zircos density; aligns with th */
    color: #2c2c3e;
    border-bottom: 1px solid #f0f1f5;
    vertical-align: middle;              /* was top */
}

.tc-detail-table tbody tr:last-child td { border-bottom: none; }

.tc-detail-table > tbody > tr:hover { cursor: default; }

.tc-detail-table .tc-col-date {
    width: 11rem;
    white-space: nowrap;
}

@media (max-width: 575px) {
    table.tc-detail-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    table.tc-detail-table,
    table.tc-detail-table tbody,
    table.tc-detail-table tbody tr,
    table.tc-detail-table tbody td { display: block; width: 100%; }

    table.tc-detail-table tbody tr {
        border: 1px solid #e5e8ef; border-radius: 8px;
        margin-bottom: 12px; overflow: hidden; background-color: #fff;
    }
    table.tc-detail-table tbody tr:last-child { margin-bottom: 0; }

    table.tc-detail-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; text-align: right;
        padding: .55rem .9rem !important;
        border-bottom: 1px solid #f0f1f5 !important;
        white-space: normal; overflow-wrap: anywhere;
    }
    table.tc-detail-table tbody td:last-child { border-bottom: none !important; }

    table.tc-detail-table tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label); flex: 0 0 auto; margin-right: auto;
        font-family: "Montserrat", sans-serif; font-weight: 600; font-size: .7rem;
        text-transform: uppercase; letter-spacing: .04em; color: #6c757d; text-align: left;
    }
    table.tc-detail-table tbody td:not([data-label]),
    table.tc-detail-table tbody td[data-label=""] {
        justify-content: flex-start; text-align: left;
    }
}

/* Mobile responsiveness for detail header */
@media (max-width: 767px) {
    .tc-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tc-detail-header__actions {
        margin-left: 0;
        width: 100%;
    }

    .tc-detail-status-select {
        width: 100%;
    }

    .tc-detail-header__actions .btn {
        flex: 1;
    }
}

.mud-picker .mud-picker-calendar-header-content {
    color: #212529 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: .875rem !important;
}

/* Selected day highlight */
.mud-day.mud-selected button,
.mud-day.mud-current button {
    color: #fff !important;
}

/* Year/month picker items */
.mud-picker-year-button,
.mud-picker-month-btn {
    color: #212529 !important;
}

.mud-picker-year-button.mud-picker-year-selected,
.mud-picker-month-btn.mud-picker-month-selected {
    color: #fff !important;
}

.hidden {
    display: none !important;
}

.nav-item {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* ?? Mobile sidebar: always overlay, never push content ?? */
@media (max-width: 1140px) {
    .sidenav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        /* iOS Safari: 100vh extends behind the bottom browser toolbar, hiding the
           last menu items (Settings) + footer. dvh tracks the *visible* viewport. */
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1055 !important;
        transform: translateX(-100%) !important;
        transition: transform .25s ease-in-out !important;
        margin-left: 0 !important;
        opacity: 1 !important;
    }

    /* Scroll area must also follow the visible viewport, not 100vh */
    .sidenav-menu [data-simplebar] {
        height: calc(100vh - var(--ct-topbar-height)) !important;
        height: calc(100dvh - var(--ct-topbar-height)) !important;
    }

    /* Clear the Safari toolbar / home indicator so the footer never sits under chrome */
    .sidenav-menu > .position-absolute.bottom-0 {
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important;
    }

    html.sidebar-enable .sidenav-menu {
        transform: translateX(0) !important;
    }

    .page-content {
        margin-left: 0 !important;
    }
}

/* Hide the "Powered by" footer when the sidebar is condensed/collapsed —
   the multi-line text overflows the ~70px rail. Reappears on expand. */
html[data-sidenav-size="condensed"] .tc-sidebar-powered {
    display: none;
}

/* Condensed rail must stay put while the page scrolls — the vendor theme switches it to
   position:absolute in condensed mode, so the icon menu scrolled away with the document. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu {
    position: fixed;
}

/* Larger switch control for compact (fs-12) toggles — the default Bootstrap
   switch shrinks with the font-size and reads as barely tappable. Sizes are in
   rem so the control stays touch-friendly regardless of the shrunk label text. */
.tc-switch-lg {
    padding-left: 2.85rem;
    min-height: 1.5rem;
}
.tc-switch-lg .form-check-input {
    width: 2.35rem;
    height: 1.25rem;
    margin-left: -2.85rem;
    margin-top: 0.05rem;
    cursor: pointer;
}
.tc-switch-lg .form-check-label {
    cursor: pointer;
    padding-top: 0.1rem;
}

.tall-textarea {
    height: 200px;  
}
.medium-textarea {
    height: 155px;
}

.tab-pane {
    padding: 25px 5px;
}

/* STUDY STEPPER */

.tc-study-stepper {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 4px 0 2px;
}

.tc-stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Connector line: border-to-border (18px = circle radius) */
.tc-stepper-item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 2px;
    background-color: #e2e5e8;
    z-index: 0;
}

.tc-stepper-item.completed:not(:first-child)::before,
.tc-stepper-item.active:not(:first-child)::before {
    background-color: var(--stepper-color);
}

.tc-stepper-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #98a6ad;
    position: relative;
    z-index: 1;
    margin-bottom: 7px;
}

.tc-stepper-item.completed .tc-stepper-node,
.tc-stepper-item.active .tc-stepper-node {
    background-color: var(--stepper-color);
    border-color: var(--stepper-color);
    color: var(--stepper-text);
}

.tc-stepper-label {
    font-size: 11px;
    text-align: center;
    color: #98a6ad;
    line-height: 1.3;
    max-width: 80px;
    word-break: break-word;
}

@media (max-width: 767px) {
    .tc-stepper-label {
        display: none;
    }
}

.tc-stepper-item.active .tc-stepper-label {
    color: #343a40;
    font-weight: 600;
}

/* Centered mobile topbar logo: '.tc-mobile-only' had no rule, so it showed on every
   width and (absolutely-centered, unconstrained) overran the right-side trigger
   cluster on phones. Show it only while the sidebar is an overlay (≤1140px),
   cap its width, keep the icon cluster above it, and drop it entirely on the
   narrowest phones where the 4 trigger icons leave no centre room. */
/* NOTE: target the #id, not .tc-mobile-only — MudBlazor.min.css loads AFTER app.css
   and its `.d-flex{display:flex!important}` wins on equal specificity, so a class-only
   rule never hides the logo. The id (1,0,0) beats the utility class regardless of order. */
#tc-mobile-logo { display: none !important; }
@media (max-width: 1140px) {
    #tc-mobile-logo { display: flex !important; z-index: 0; }
    #tc-mobile-logo img { max-width: 130px; object-fit: contain; }
    .app-topbar .topbar-menu > .d-flex:last-child { position: relative; z-index: 1; }

    /* Touch targets ≥44px on the overlay-nav controls */
    .sidenav-toggle-button { min-width: 44px; min-height: 44px; }
    .button-close-fullsidebar {
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .sidenav-menu .side-nav-link { min-height: 44px; }
}
@media (max-width: 480px) {
    #tc-mobile-logo { display: none !important; } /* no room beside the icon cluster */
}
/* Soft variant buttons: restore brand bg/color when disabled (vendor overrides to grey) */
.btn-soft-danger:disabled, .btn-soft-danger.disabled { background-color: rgba(var(--ct-danger-rgb), .1) !important; color: var(--ct-danger) !important; border-color: transparent !important; }
.btn-soft-success:disabled, .btn-soft-success.disabled { background-color: rgba(var(--ct-success-rgb), .1) !important; color: var(--ct-success) !important; border-color: transparent !important; }
.btn-soft-primary:disabled, .btn-soft-primary.disabled { background-color: rgba(var(--ct-primary-rgb), .1) !important; color: var(--ct-primary) !important; border-color: transparent !important; }
.btn-soft-secondary:disabled, .btn-soft-secondary.disabled { background-color: rgba(var(--ct-secondary-rgb), .1) !important; color: var(--ct-secondary) !important; border-color: transparent !important; }

/* Sidebar scroll clearance: the "Powered by" footer is position:absolute bottom:0
   and overlays the scroll content, hiding the last nav item (Settings) behind it.
   Reserve bottom padding on the scrolled list (≥ footer height) so the last item
   can scroll clear, and make the informational footer non-interactive so it never
   intercepts taps on the items beneath it (ADA target-size safety). */
.sidenav-menu [data-simplebar] .side-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.sidenav-menu > .position-absolute.bottom-0 {
    pointer-events: none;
    background-color: var(--ct-menu-bg);
}

/* Nav menu active state � persists after focus/hover ends */
.side-nav .side-nav-item .side-nav-link:active,
.side-nav .side-nav-item .side-nav-link:focus,
.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav .side-nav-item .side-nav-link.active {
    color: var(--ct-menu-item-active-color) !important;
    background-color: var(--ct-menu-item-active-bg) !important;
}

/* ===== Global Communications panel (staff, all pages) ===== */
/* Topbar trigger button + unanswered badge */
.tc-comm-trigger { position: relative; }
.tc-comm-trigger-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
}
@keyframes tcCommFlash {
    0%, 100% { transform: scale(1); }
    25%, 75% { transform: scale(1.18); }
    50%      { transform: scale(1); }
}
.tc-comm-trigger--flash { animation: tcCommFlash .7s ease-in-out 3; }

/* Drawer pushes the page content left (not a floating overlay).
   Zircos .wrapper is width:100%, so margin-right just overflows — shrink the width instead. */
.wrapper { transition: width .28s cubic-bezier(.4,0,.2,1); }
body:has(.tc-comm-panel--open) .wrapper { width: calc(100% - 370px); }
@media (max-width: 767.98px) {
    body:has(.tc-comm-panel--open) .wrapper { width: 100%; }   /* mobile: overlay, no push */
}

.tc-comm-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1046;
    width: 370px;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh; /* visible viewport — iOS toolbar safe */
    background: var(--ct-card-bg, #fff);
    border-left: 1px solid var(--ct-border-color, #e5e7eb);
    box-shadow: -6px 0 22px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.tc-comm-panel--open { transform: translateX(0); }
.tc-comm-panel-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-comm-panel-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
/* "No conversations" — vertically centered in the panel body */
.tc-comm-empty { margin: auto; padding: 1.5rem; }

.tc-comm-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--ct-border-color, #f1f1f1);
}
.tc-comm-row:hover { background: rgba(0,0,0,.03); }

/* Inner select button */
.tc-comm-row-select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .5rem .65rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Per-row trash — hidden until row hover, red on button hover */
.tc-comm-row-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0 .25rem;
}
.tc-comm-row:hover .tc-comm-row-del { opacity: 1; }
.tc-comm-row-del:hover { color: #dc3545; }

.tc-comm-row-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* End conversation button bar (below reply input in panel) */
.tc-comm-end-bar {
    padding: .5rem .75rem .6rem;
    border-top: 1px solid var(--ct-border-color, #e5e7eb);
    margin-top: .25rem;
}

.tc-comm-thread-head {
    display: flex; align-items: center; padding: .6rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}

/* Cetan take-over: its own full-width row under the thread head (the head row stays uncramped). */
.tc-comm-takeover-row {
    padding: .35rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-comm-takeover-row .tc-btn-ghost { width: 100%; }

/* Ghost button — quiet borderless action; primary tint only on hover/focus. */
.tc-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ct-primary, #3b5de7);
    font-weight: 500;
}
.tc-btn-ghost:hover,
.tc-btn-ghost:focus-visible {
    background: rgba(59, 93, 231, .08);
    color: var(--ct-primary, #3b5de7);
    border-color: transparent;
}
.tc-comm-thread { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.tc-comm-bubble-row { display: flex; }
.tc-comm-bubble-row--mine { justify-content: flex-end; }
.tc-comm-bubble {
    max-width: 80%;
    padding: .45rem .7rem;
    border-radius: 12px;
    background: var(--ct-light, #f1f3f5);
    font-size: 13px;
}
.tc-comm-bubble--mine { background: var(--ct-primary, #0d6efd); color: #fff; }
.tc-comm-bubble-sender { display: block; font-size: 10px; font-weight: 700; opacity: .7; margin-bottom: 1px; }
.tc-comm-bubble-text { display: block; }
.tc-comm-bubble-time { display: block; font-size: 9px; opacity: .6; margin-top: 2px; text-align: right; }

/* Inline call transcript under the AI-call banner (Marcos 2026-07-26) — same chat-bubble idiom as
   the call-queue transcript popup (.tc-comm-bubble*), but compact and height-capped so a long call
   can't swallow the page it's embedded in (lead page / Communications / Comms drawer). */
.tc-call-transcript-scroll {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-right: .25rem;
}
.tc-comm-bubble--compact { max-width: 90%; padding: .3rem .55rem; font-size: 11.5px; border-radius: 10px; }

.tc-comm-reply {
    display: flex; gap: .4rem; padding: .6rem .75rem;
    border-top: 1px solid var(--ct-border-color, #e5e7eb);
    align-items: center;
}
/* visible keyboard focus (WCAG 2.4.7) */
.tc-comm-tab:focus-visible,
.tc-comm-row-select:focus-visible,
.tc-comm-row-del:focus-visible,
.tc-comm-thread-head button:focus-visible,
.tc-comm-reply input:focus-visible,
.tc-comm-reply textarea:focus-visible,
.tc-comm-reply button:focus-visible,
.tc-comm-end-bar button:focus-visible,
.tc-comms-item-select:focus-visible,
.tc-comms-item-del:focus-visible {
    outline: 3px solid var(--ct-primary, #0d6efd);
    outline-offset: 2px;
}

/* Subtle AI mark beside an AI-suggested / auto-fixed value (e.g. unconfirmed MCA designation).
   Renders only while the System set it and no human has confirmed; the native title= is the tooltip. */
.tc-ai-mark {
    color: var(--ct-primary, #6571ff);
    font-size: .82rem;
    opacity: .7;
    cursor: help;
    vertical-align: middle;
}
.tc-ai-mark:hover { opacity: 1; }

/* ===== AI assistant panel (swaps with the comms drawer — one at a time) ===== */
.tc-ai-trigger { position: relative; }
.tc-ai-trigger .ti { color: var(--ct-primary, #6571ff); }
.tc-ai-trigger-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--ct-primary, #6571ff);
    color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center;
}
.tc-ai-trigger--flash { animation: tcCommFlash .7s ease-in-out 3; }

/* Page push — same mechanic as the comms drawer */
body:has(.tc-ai-panel--open) .wrapper { width: calc(100% - 370px); }
@media (max-width: 767.98px) {
    body:has(.tc-ai-panel--open) .wrapper { width: 100%; }
}

.tc-ai-panel {
    position: fixed; top: 0; right: 0; z-index: 1046;
    width: 370px; max-width: 92vw;
    height: 100vh; height: 100dvh; /* dvh tracks the visible viewport (iOS toolbar) */
    background: var(--ct-card-bg, #fff);
    border-left: 1px solid var(--ct-border-color, #e5e7eb);
    box-shadow: -6px 0 22px rgba(0,0,0,.16);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.tc-ai-panel--open { transform: translateX(0); }

/* Mobile: side drawers (Cetan AI, Communications, Notifications) fill the viewport —
   full width, and true visible height so iOS Safari's toolbar can't clip the composer.
   Notifications reuse the .tc-comm-panel shell, so both selectors cover all three. */
@media (max-width: 767.98px) {
    .tc-ai-panel, .tc-comm-panel { width: 100%; max-width: 100%; }
}

.tc-ai-panel-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-ai-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px;
    background: linear-gradient(135deg, var(--ct-primary, #6571ff), #9b8cff);
}

/* Token quota meter */
.tc-ai-meter { padding: .5rem 1rem .6rem; border-bottom: 1px solid var(--ct-border-color, #f1f1f1); }
.tc-ai-meter-bar { height: 5px; border-radius: 3px; background: var(--ct-light, #eef0f3); overflow: hidden; }
.tc-ai-meter-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ct-primary, #6571ff), #9b8cff); transition: width .3s ease; }
.tc-ai-meter-cog { flex-shrink: 0; border: 0; background: transparent; color: #adb5bd; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: background .15s, color .15s; }
.tc-ai-meter-cog:hover { color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 10%, transparent); }

/* Shared title bar for every screen with a back button: back on the LEFT, title on the RIGHT in black.
   Used by the chat-detail header and the settings slide-over. */
.tc-ai-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .85rem; border-bottom: 1px solid var(--ct-border-color, #f1f1f1); flex-shrink: 0; background: var(--ct-card-bg, #fff); }
.tc-ai-titlebar-title { font-weight: 700; font-size: 13px; color: #1f2937; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The stage holds the body / history / settings; the usage meter sits ABOVE it and stays visible on every screen. */
.tc-ai-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ============================================================
   Cetan Settings — slide-over (data access & guardrails)
   Absolutely positioned over the stage so it slides OVER the
   body/history while the usage meter + cog stay pinned on top.
   ============================================================ */
.tc-ai-settings {
    position: absolute; inset: 0; z-index: 6;
    background: var(--ct-card-bg, #fff);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    visibility: hidden;
}
.tc-ai-panel--settings .tc-ai-settings { transform: translateX(0); visibility: visible; }
.tc-ai-settings-body { flex: 1 1 auto; overflow-y: auto; padding: .85rem; }
.tc-ai-set-group { margin-bottom: 1rem; }
.tc-ai-set-toggle { margin-bottom: .65rem; }
/* resource labels in Cetan's Data Access + Backoffice Actions panes — smaller than default form text */
.tc-ai-set-toggle .form-check-label { font-size: 14px; line-height: 1.35; }
.tc-ai-settings-foot { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-top: 1px solid var(--ct-border-color, #e5e7eb); flex-shrink: 0; }

.tc-ai-panel-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .85rem; }
.tc-ai-empty { margin: auto; padding: 1.25rem; max-width: 300px; }
.tc-ai-hero-icon { color: var(--ct-primary, #6571ff); }
.tc-ai-hero-name { color: var(--ct-primary, #6571ff); }
.tc-ai-hero-desc { text-align: center; margin: 10px 0 35px; }
.tc-ai-suggests { display: flex; flex-direction: column; gap: .4rem; }
.tc-ai-chip {
    border: 1px solid var(--ct-border-color, #e5e7eb); background: var(--ct-card-bg, #fff);
    border-radius: 18px; padding: .4rem .75rem; font-size: 12px; cursor: pointer;
    text-align: left; transition: background .15s, border-color .15s;
}
.tc-ai-chip:hover { background: color-mix(in srgb, var(--ct-primary, #6571ff) 8%, transparent); border-color: var(--ct-primary, #6571ff); }

.tc-ai-msg-row { display: flex; flex-direction: column; align-items: flex-start; }
.tc-ai-msg-row--mine { align-items: flex-end; }

/* slim "back to conversation list" bar shown when a thread was opened from history */
.tc-ai-backbar {
    position: sticky; top: 0; z-index: 3; align-self: stretch;
    display: flex; align-items: center; justify-content: flex-start; gap: .35rem;
    border: 0; background: var(--ct-card-bg, #fff);
    padding: .45rem .3rem; margin: -.85rem -.85rem .35rem;
    border-bottom: 1px solid var(--ct-border-color, #f1f1f1);
    font-size: 12px; font-weight: 600; color: var(--ct-primary, #6571ff); cursor: pointer;
    transition: opacity .15s;
}
button.tc-ai-backbar:hover { opacity: .7; }
.tc-ai-backbar i { font-size: 16px; }
button.tc-ai-backbar:focus-visible { outline: 3px solid var(--ct-primary, #6571ff); outline-offset: 2px; }
/* chat-screen variant: two link buttons (Home | Conversations) spread across the bar */
.tc-ai-backbar--chat { justify-content: space-between; cursor: default; padding-left: .55rem; padding-right: .55rem; }
/* home entry: a full-width outlined button into the conversations/briefings list (no icon) */
.tc-ai-backbar--fwd {
    position: sticky; top: 0; z-index: 3; align-self: stretch; justify-content: center; gap: .4rem;
    margin: 0 0 .5rem; padding: .6rem .75rem;
    border: 1px solid var(--ct-primary, #6571ff);
    border-radius: 10px; background: var(--ct-card-bg, #fff); color: var(--ct-primary, #6571ff); font-weight: 600;
}
.tc-ai-backbar--fwd:hover { opacity: 1; background: color-mix(in srgb, var(--ct-primary, #6571ff) 7%, transparent); }
.tc-ai-backbar--fwd:focus-visible { outline: 3px solid var(--ct-primary, #6571ff); outline-offset: 2px; }
.tc-ai-backbar-btn { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; padding: .15rem .25rem; font-size: 12px; font-weight: 600; color: var(--ct-primary, #6571ff); cursor: pointer; border-radius: 8px; transition: opacity .15s; }
.tc-ai-backbar-btn:hover { opacity: .7; }
.tc-ai-backbar-btn i { font-size: 16px; }
.tc-ai-backbar-btn:focus-visible { outline: 3px solid var(--ct-primary, #6571ff); outline-offset: 2px; }
/* home ("new conversation") screen — identity, briefing/insights feed, then starter prompts, top-aligned */
.tc-ai-home { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .65rem; }
.tc-ai-home .tc-ai-empty { margin: .25rem auto 0; padding: .5rem 1rem; }
.tc-ai-bubble {
    max-width: 85%; padding: .5rem .75rem; border-radius: 14px;
    background: var(--ct-light, #f1f3f5); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.tc-ai-bubble--mine { background: var(--ct-primary, #6571ff); color: #fff; border-bottom-right-radius: 4px; }
/* keep selected text legible on the blue bubble (white-on-white was invisible) */
.tc-ai-bubble--mine::selection, .tc-ai-bubble--mine ::selection { background: #fff; color: var(--ct-primary, #6571ff); }
.tc-ai-bubble:not(.tc-ai-bubble--mine) { border-bottom-left-radius: 4px; }
.tc-ai-bubble--error { background: #fdecea; color: #b42318; }
/* Rendered reply formatting — echoes the daily-briefing aesthetic so conversation answers read the
   same: section headers, spaced paragraphs, and dot bullets. Assistant replies run wider and drop
   pre-wrap (the renderer now owns the block structure); user/typed bubbles keep pre-wrap. */
.tc-ai-bubble:not(.tc-ai-bubble--mine) { max-width: 94%; white-space: normal; }
.tc-ai-bubble strong { font-weight: 700; }
/* shared body typography for both chat bubbles and home-feed cards */
.tc-ai-bubble .tc-ai-p,
.tc-ai-card-body .tc-ai-p { line-height: 1.5; }
.tc-ai-bubble .tc-ai-p + .tc-ai-p,
.tc-ai-card-body .tc-ai-p + .tc-ai-p { margin-top: .4rem; }
/* section header inside a reply — bold, dark, with a primary accent bar; mirrors briefing grouping */
.tc-ai-bubble .tc-ai-h,
.tc-ai-card-body .tc-ai-h {
    margin: .75rem 0 .35rem; padding-left: .5rem;
    border-left: 2px solid var(--ct-primary, #6571ff);
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    color: var(--ct-dark, #343a40);
}
.tc-ai-bubble .tc-ai-h:first-child,
.tc-ai-card-body .tc-ai-h:first-child { margin-top: 0; }
/* dot bullets matching the briefing's findings/actions lists */
.tc-ai-bubble .tc-ai-list,
.tc-ai-card-body .tc-ai-list {
    list-style: none; margin: .35rem 0 .15rem; padding-left: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.tc-ai-bubble .tc-ai-list li,
.tc-ai-card-body .tc-ai-list li {
    position: relative; padding-left: 16px; line-height: 1.45; margin: 0;
}
.tc-ai-bubble .tc-ai-list li::before,
.tc-ai-card-body .tc-ai-list li::before {
    content: ""; position: absolute; left: 4px; top: 7px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--ct-primary, #6571ff);
}
.tc-ai-bubble .tc-ai-list + .tc-ai-h,
.tc-ai-card-body .tc-ai-list + .tc-ai-h { margin-top: .7rem; }

/* one-click next-action buttons under a reply — the "steering wheel": one full-width
   action per row, thin but a comfortable tap target (fat-finger proof), clearly tappable. */
.tc-ai-cta-row { display: flex; flex-direction: column; gap: .4rem; margin-top: .55rem; max-width: 92%; }
.tc-ai-cta {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; min-height: 40px; cursor: pointer; text-align: left;
    border: 1px solid var(--ct-primary, #6571ff);
    color: var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 7%, transparent);
    border-radius: 12px; padding: .5rem .85rem; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    transition: background .15s, color .15s, box-shadow .15s, transform .05s;
}
.tc-ai-cta-label { display: inline-flex; align-items: center; gap: .45rem; }
.tc-ai-cta-arrow { font-size: 15px; opacity: .55; flex-shrink: 0; }
.tc-ai-cta:hover:not(:disabled) {
    background: var(--ct-primary, #6571ff); color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ct-primary, #6571ff) 35%, transparent);
}
.tc-ai-cta:hover:not(:disabled) .tc-ai-cta-arrow { opacity: 1; }
.tc-ai-cta:active:not(:disabled) { transform: translateY(1px); }
.tc-ai-cta:disabled { opacity: .5; cursor: default; }

/* proactive suggestion / daily-briefing feed */
.tc-ai-suggest-feed { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem; }

/* "Get more insights" — on-demand AI deep-analysis pull at the top of the feed */
.tc-ai-feed-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .15rem; }
.tc-ai-feed-title { font-size: 13px; font-weight: 700; color: var(--ct-dark, #343a40); }
.tc-ai-feed-hint { font-size: 9.5px; line-height: 1.3; color: var(--ct-text-muted, #adb5bd); margin-bottom: .55rem; }
.tc-ai-getmore {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; white-space: nowrap;
    padding: .3rem .7rem; cursor: pointer; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1;
    border: 1px solid var(--ct-primary, #6571ff); color: var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 8%, transparent);
    transition: background .15s, color .15s, box-shadow .15s, transform .05s, opacity .15s;
}
.tc-ai-getmore i { font-size: 14px; flex-shrink: 0; }
.tc-ai-getmore:hover:not(:disabled) { background: var(--ct-primary, #6571ff); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--ct-primary, #6571ff) 35%, transparent); }
.tc-ai-getmore:active:not(:disabled) { transform: translateY(1px); }
.tc-ai-getmore:focus-visible { outline: 2px solid var(--ct-primary, #6571ff); outline-offset: 2px; }
.tc-ai-getmore:disabled { opacity: .65; cursor: default; box-shadow: none; }
.tc-ai-spin { animation: tcAiSpin .7s linear infinite; }
@keyframes tcAiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tc-ai-spin { animation: none; } }
/* related-group header above each cluster of feed cards (briefing / study health / lead recovery) */
.tc-ai-feed-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ct-text-muted, #6c757d); margin: .35rem 0 -.1rem; padding-left: .15rem; }
.tc-ai-feed-group:first-child { margin-top: 0; }
.tc-ai-suggest-card {
    border: 1px solid var(--ct-border-color, #e5e7eb); border-radius: 12px;
    padding: .55rem .65rem; background: var(--ct-card-bg, #fff);
}
.tc-ai-suggest-card--briefing {
    border-color: var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 5%, transparent);
}
.tc-ai-suggest-ico { font-size: 16px; color: var(--ct-primary, #6571ff); margin-top: 2px; }
/* rendered briefing/insight body inside a feed card — section headers, bullets, and paragraph
   spacing all come from the shared .tc-ai-* rules above (same language as a chat bubble) */
.tc-ai-card-body { line-height: 1.5; }
.tc-ai-card-body strong { font-weight: 700; color: var(--ct-dark, #343a40); }

/* typing dots */
.tc-ai-bubble--typing { display: inline-flex; gap: 4px; align-items: center; }
.tc-ai-bubble--typing span { width: 6px; height: 6px; border-radius: 50%; background: #adb5bd; animation: tcAiBlink 1.2s infinite both; }
.tc-ai-bubble--typing span:nth-child(2) { animation-delay: .2s; }
.tc-ai-bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes tcAiBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* confirmation card — the human-in-the-loop gate */
.tc-ai-confirm {
    border: 1px solid var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 6%, transparent);
    border-radius: 12px; padding: .7rem .8rem;
}
.tc-ai-confirm-head { font-weight: 700; font-size: 12px; color: var(--ct-primary, #6571ff); margin-bottom: .25rem; }
.tc-ai-confirm-body { font-size: 12.5px; }

.tc-ai-compose {
    display: flex; gap: .5rem; align-items: center;
    padding: .6rem .75rem .5rem; border-top: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-ai-compose textarea {
    min-height: 72px;
    max-height: 160px;
    overflow-y: auto;
}
/* send button — vertically centered against the taller input, larger tap target */
.tc-ai-send {
    flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.tc-ai-disclaimer { font-size: 9.5px; color: #adb5bd; text-align: center; padding: 0 .75rem .55rem; }

/* ============================================================
   Cetan History — a mode of the AI panel (tc-ai-panel--history)
   ============================================================ */
.tc-ai-head-btn { border: 0; background: transparent; color: #adb5bd; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: background .15s, color .15s; }
.tc-ai-head-btn:hover { color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 8%, transparent); }
.tc-ai-head-btn--active { color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 12%, transparent); }
/* History keeps the usage meter visible (only the chat body + composer give way to the list). */
.tc-ai-panel--history .tc-ai-panel-body, .tc-ai-panel--history .tc-ai-compose, .tc-ai-panel--history .tc-ai-disclaimer { display: none; }
.tc-ai-history { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.tc-ai-panel--history .tc-ai-history { display: flex; }
/* Settings slide-over covers the stage; hide the composer + disclaimer beneath it (meter stays visible). */
.tc-ai-panel--settings .tc-ai-compose, .tc-ai-panel--settings .tc-ai-disclaimer { display: none; }
.tc-ai-hist-bar { position: sticky; top: 0; z-index: 3; background: var(--ct-card-bg, #fff); display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .85rem; border-bottom: 1px solid var(--ct-border-color, #f1f1f1); }
.tc-ai-hist-back { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; padding: .25rem .1rem; font-size: 12.5px; font-weight: 600; color: var(--ct-primary, #6571ff); cursor: pointer; border-radius: 8px; transition: opacity .15s; }
.tc-ai-hist-back:hover { opacity: .7; }
.tc-ai-hist-back i { font-size: 16px; }
.tc-ai-hist-new { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--ct-primary, #6571ff); color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 7%, transparent); border-radius: 9px; padding: .35rem .7rem; min-height: 34px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.tc-ai-hist-new:hover { background: var(--ct-primary, #6571ff); color: #fff; }
.tc-ai-hist-new i { font-size: 15px; }
.tc-ai-seg { display: flex; gap: .25rem; margin: .65rem .85rem; padding: .25rem; background: var(--ct-light, #eef0f3); border-radius: 11px; }
.tc-ai-seg-btn { flex: 1 1 0; min-height: 36px; border: 0; cursor: pointer; background: transparent; border-radius: 8px; padding: .4rem .5rem; font-size: 12.5px; font-weight: 600; color: var(--ct-text-muted, #6c757d); transition: background .15s, color .15s, box-shadow .15s; }
.tc-ai-seg-btn:hover:not(.tc-ai-seg-btn--active) { color: var(--ct-primary, #6571ff); }
.tc-ai-seg-btn--active { background: var(--ct-card-bg, #fff); color: var(--ct-primary, #6571ff); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.tc-ai-hist-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 .85rem .85rem; display: flex; flex-direction: column; gap: .4rem; }
.tc-ai-hist-row { display: flex; align-items: stretch; width: 100%; min-height: 56px; border: 1px solid var(--ct-border-color, #e5e7eb); border-radius: 12px; background: var(--ct-card-bg, #fff); overflow: hidden; transition: background .15s, border-color .15s, box-shadow .15s; }
.tc-ai-hist-row:hover { border-color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 5%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--ct-primary, #6571ff) 14%, transparent); }
.tc-ai-hist-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; text-align: left; cursor: pointer; border: 0; background: transparent; padding: .55rem .65rem; transition: transform .05s; }
.tc-ai-hist-open:active { transform: translateY(1px); }
.tc-ai-hist-del { flex: 0 0 auto; width: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--ct-border-color, #e5e7eb); background: transparent; color: #c4c8cf; font-size: 16px; cursor: pointer; transition: background .15s, color .15s; }
.tc-ai-hist-del:hover { background: color-mix(in srgb, #d9534f 12%, transparent); color: #d9534f; }
.tc-ai-hist-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 10%, transparent); }
.tc-ai-hist-main { flex: 1 1 auto; min-width: 0; }
.tc-ai-hist-title { font-size: 13px; font-weight: 700; color: var(--ct-dark, #343a40); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-ai-hist-meta { font-size: 11px; color: var(--ct-text-muted, #6c757d); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-ai-hist-chev { font-size: 16px; color: #c4c8cf; flex-shrink: 0; transition: color .15s; }
.tc-ai-hist-row:hover .tc-ai-hist-chev { color: var(--ct-primary, #6571ff); }
.tc-ai-hist-day { position: sticky; top: 0; z-index: 1; padding: .5rem .15rem .3rem; margin-top: .35rem; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ct-text-muted, #6c757d); background: var(--ct-card-bg, #fff); }
.tc-ai-hist-day:first-child { margin-top: 0; }
.tc-ai-hist-empty { margin: auto; text-align: center; padding: 1.5rem 1.25rem; max-width: 280px; }
.tc-ai-hist-empty-ico { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .85rem; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--ct-primary, #6571ff); background: color-mix(in srgb, var(--ct-primary, #6571ff) 10%, transparent); }
.tc-ai-hist-empty-title { font-weight: 700; font-size: 13.5px; margin-bottom: .25rem; }
.tc-ai-hist-empty-sub { font-size: 11.5px; color: var(--ct-text-muted, #6c757d); margin-bottom: 1rem; }
.tc-ai-head-btn:focus-visible, .tc-ai-hist-back:focus-visible, .tc-ai-hist-new:focus-visible, .tc-ai-seg-btn:focus-visible, .tc-ai-hist-open:focus-visible, .tc-ai-hist-del:focus-visible { outline: 3px solid var(--ct-primary, #6571ff); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tc-ai-hist-row, .tc-ai-hist-new, .tc-ai-seg-btn, .tc-ai-head-btn, .tc-ai-hist-chev { transition: none; } .tc-ai-hist-open:active { transform: none; } }
@media (max-width: 400px) { .tc-ai-hist-bar { padding: .5rem .7rem; } .tc-ai-seg { margin: .55rem .7rem; } .tc-ai-hist-list { padding: 0 .7rem .7rem; } .tc-ai-hist-new span { display: none; } }

/* ── Daily briefing card ──────────────────────────────────────── */
.tc-ai-brief { border: 1px solid var(--ct-border-color, #e5e7eb); border-radius: 12px; background: var(--ct-card-bg, #fff); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.tc-ai-brief::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--ct-primary, #6571ff), #9b8cff); }
.tc-ai-brief__head { display: flex; align-items: center; gap: 8px; }
.tc-ai-brief__chip { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--ct-primary, #6571ff), #9b8cff); color: #fff; }
.tc-ai-brief__chip .ti { font-size: 14px; }
.tc-ai-brief__title { font-size: 12.5px; font-weight: 600; color: var(--ct-dark, #343a40); letter-spacing: .01em; line-height: 1.2; }
.tc-ai-brief__bottomline { margin: 0; padding: 9px 11px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ct-dark, #343a40); background: color-mix(in srgb, var(--ct-primary, #6571ff) 7%, transparent); border-radius: 8px; border-left: 2px solid var(--ct-primary, #6571ff); }

/* ============================================================
   Cetan Settings — Data Access + Backoffice Actions tab cards.
   Both wear the same blue-accent card; badges pick up the same ink.
   All ink derived vs --ct-dark, which flips per theme → dark-aware.
   ============================================================ */
.tc-ai-set-group--actions, .tc-ai-set-group--data { --tc-blue-ink: color-mix(in srgb, var(--ct-primary, #727cf5) 45%, var(--ct-dark, #343a40)); }
.tc-ai-seg--settings { margin: .75rem .85rem .15rem; }
.tc-ai-set-pane { display: none; }
.tc-ai-set-pane.is-active { display: block; }
.tc-ai-set-group--actions, .tc-ai-set-group--data { position: relative; border: 1px solid color-mix(in srgb, var(--ct-primary, #727cf5) 35%, var(--ct-border-color, #f1f1f1)); border-radius: 10px; padding: .75rem .75rem .75rem .9rem; background: color-mix(in srgb, var(--ct-primary, #727cf5) 5%, var(--ct-card-bg, #fff)); overflow: hidden; }
.tc-ai-set-group--actions::before, .tc-ai-set-group--data::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--ct-primary, #727cf5), color-mix(in srgb, var(--ct-primary, #727cf5) 60%, var(--ct-info, #35b8e0))); }
.tc-ai-set-grouphead { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.tc-ai-set-grouphead h6 { color: var(--ct-dark, #343a40); }
.tc-ai-act-ico { font-size: 15px; color: var(--ct-primary, #727cf5); }
.tc-ai-act-sub { color: var(--tc-blue-ink); }
.tc-ai-act-sub strong { color: var(--tc-blue-ink); }
.tc-ai-act-badge { display: inline-block; margin-left: .4rem; vertical-align: middle; font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1; padding: .15rem .32rem; border-radius: 4px; color: var(--tc-blue-ink, color-mix(in srgb, var(--ct-primary, #727cf5) 45%, var(--ct-dark, #343a40))); background: color-mix(in srgb, var(--ct-primary, #727cf5) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ct-primary, #727cf5) 32%, transparent); }
.tc-ai-act-badge--read { color: var(--ct-text-muted, #6c757d); background: color-mix(in srgb, var(--ct-text-muted, #6c757d) 12%, transparent); border-color: color-mix(in srgb, var(--ct-text-muted, #6c757d) 22%, transparent); }
.tc-ai-act-badge--safe { color: color-mix(in srgb, #1a7a48 70%, var(--ct-dark, #343a40)); background: color-mix(in srgb, #1a7a48 12%, transparent); border-color: color-mix(in srgb, #1a7a48 28%, transparent); }
.tc-ai-set-toggle.is-locked { opacity: .5; }

/* ============================================================
   AI Engine — Models by Feature table
   (Advanced Settings → TrialCatcher AI Engine tab)
   One row per feature. Reuses the .tc-detail-table aesthetic
   (uppercase thead, soft borders) + the .tc-ai-act-badge soft-pill
   idiom. All ink/tint dark-aware via color-mix vs --ct-* tokens.
   ============================================================ */

/* Tier hues — three accessible families. Ink blends the hue toward
   --ct-dark (flips per theme); tints blend toward --ct-card-bg. */
.tc-aimodels {
    --tc-tier-haiku:  #1a7a48; /* cheapest / fast    — green  */
    --tc-tier-sonnet: #1565c0; /* balanced / default — blue   */
    --tc-tier-opus:   #6f42c1; /* premium            — purple */
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Horizontal-scroll safety net for tablet widths (6 data columns). */
.tc-aimodels-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tc-aimodels thead th {
    background: #f7f8fc;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: #6b7280;
    border-bottom: 1px solid #e5e8ef;
    padding: .6rem .85rem;
    white-space: nowrap;
    vertical-align: bottom;
}

.tc-aimodels tbody td {
    font-size: .8125rem;
    padding: .7rem .85rem;
    color: #2c2c3e;
    border-bottom: 1px solid #f0f1f5;
    vertical-align: top;
}

.tc-aimodels tbody tr:last-child td { border-bottom: none; }

/* Col 1 — Feature name + its "what it generates" subline */
.tc-aimodels__feature { font-weight: 700; color: var(--ct-dark, #343a40); line-height: 1.25; }
.tc-aimodels__desc { font-size: .75rem; font-weight: 400; color: #6c757d; line-height: 1.35; margin-top: .15rem; }

/* Col 3 — "Bills to": product-key chip (mono) + a small rail line */
.tc-keytag {
    display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .72rem; font-weight: 600; line-height: 1;
    padding: .25rem .45rem; border-radius: 5px;
    color: #475467; background: #eef0f4; border: 1px solid #e0e3ea;
    white-space: nowrap;
}
.tc-bills-rail { font-size: .7rem; color: #6c757d; margin-top: .3rem; }

/* ── Soft pills — shared base (echoes .tc-ai-act-badge) ───────── */
.tc-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    line-height: 1; white-space: nowrap;
    padding: .28rem .5rem; border-radius: 999px;
    border: 1px solid transparent;
}

/* Model-tier badge — colored dot + the model name (never color-only) */
.tc-tier-badge { padding: .3rem .55rem; }
.tc-tier-badge::before {
    content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: .9;
}
.tc-tier-badge--haiku {
    color: color-mix(in srgb, var(--tc-tier-haiku) 62%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-haiku) 13%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-haiku) 32%, transparent);
}
.tc-tier-badge--sonnet {
    color: color-mix(in srgb, var(--tc-tier-sonnet) 62%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-sonnet) 13%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-sonnet) 32%, transparent);
}
.tc-tier-badge--opus {
    color: color-mix(in srgb, var(--tc-tier-opus) 62%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-opus) 13%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-opus) 32%, transparent);
}

/* Rail / cost-type pills — Conversational (primary) vs One-shot (slate) */
.tc-rail-badge--conversational {
    color: color-mix(in srgb, var(--ct-primary, #6571ff) 52%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 12%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--ct-primary, #6571ff) 30%, transparent);
}
.tc-rail-badge--oneshot {
    color: var(--ct-text-muted, #6c757d);
    background: color-mix(in srgb, var(--ct-text-muted, #6c757d) 11%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--ct-text-muted, #6c757d) 24%, transparent);
}

/* Dev-key tag — subtle amber caution (not BAA-backed) */
.tc-devkey-tag {
    font-size: .62rem; padding: .2rem .42rem;
    color: color-mix(in srgb, var(--ct-warning, #f9c851) 34%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--ct-warning, #f9c851) 16%, transparent);
    border-color: color-mix(in srgb, var(--ct-warning, #f9c851) 36%, transparent);
}

/* Col 5 — 30-day usage: tokens (primary) over cost (muted) */
.tc-usage { line-height: 1.2; white-space: nowrap; }
.tc-usage__tokens { font-weight: 600; color: var(--ct-dark, #343a40); font-variant-numeric: tabular-nums; }
.tc-usage__cost { font-size: .72rem; color: #6c757d; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.tc-usage--none { color: #adb5bd; font-style: italic; font-weight: 400; }

/* Column width hints — FOUR data columns (Marcos 2026-07-25). The "Patient data" column was dropped
   when the table was split into grouped cards; these hints still described five, so Model inherited
   the old 14% slot and squeezed its dropdown. Feature leads, Type/Usage stay compact, Model is
   flush-right with room for the select. */
.tc-aimodels th:nth-child(1) { width: 34%; }
.tc-aimodels th:nth-child(2) { width: 14%; }
.tc-aimodels th:nth-child(3) { width: 16%; }
.tc-aimodels th:nth-child(4) { width: 36%; text-align: right; }
.tc-aimodels tbody td:last-child { text-align: right; }

/* +10px of breathing room inside each grouped card — the table had zero card padding (p-0) and ran
   edge-to-edge, which read cramped at half width (Marcos 2026-07-25). */
.tc-ai-group-body { padding: 10px; }

/* 20px under the last row so the tab doesn't end flush against the cards. */
.tc-ai-groups-row { margin-bottom: 20px; }

/* Model dropdown — widened ~16px (Marcos 2026-07-25); the model labels were clipping. */
.tc-model-select.form-select {
    font-size: .8125rem; padding: .35rem 1.8rem .35rem .6rem;
    min-width: 10rem; max-width: 13rem; background-position: right .55rem center;
}

/* ── Reserved / unwired feature rows (Proactive, Prescreen) ───── */
.tc-aimodels-row--reserved td { background: #fafbfc; }
.tc-aimodels-row--reserved .tc-aimodels__feature,
.tc-aimodels-row--reserved .tc-aimodels__desc,
.tc-aimodels-row--reserved .tc-keytag,
.tc-aimodels-row--reserved .tc-bills-rail,
.tc-aimodels-row--reserved .tc-pill,
.tc-aimodels-row--reserved .tc-usage { opacity: .55; filter: grayscale(.35); }
.tc-aimodels-row--reserved .tc-model-select { pointer-events: none; }
.tc-reserved-tag {
    font-size: .62rem; padding: .22rem .46rem;
    color: var(--ct-text-muted, #6c757d);
    background: color-mix(in srgb, var(--ct-text-muted, #6c757d) 10%, transparent);
    border-color: color-mix(in srgb, var(--ct-text-muted, #6c757d) 22%, transparent);
}

/* ── Responsive: stack rows into cards below 576px ───────────────
   ui-developer must add data-label="<column header>" to each <td>.
   Above 576px the scroll wrapper handles overflow; no fixed heights. */
@media (max-width: 575.98px) {
    .tc-aimodels thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tc-aimodels, .tc-aimodels tbody, .tc-aimodels tr, .tc-aimodels td { display: block; width: 100%; }
    .tc-aimodels tbody tr {
        border: 1px solid #e5e8ef; border-radius: .5rem;
        margin-bottom: .75rem; padding: .35rem .15rem; background: #fff;
    }
    .tc-aimodels tbody td { border-bottom: 1px solid #f4f5f8; padding: .5rem .85rem; }
    .tc-aimodels tbody tr td:last-child { border-bottom: none; }
    .tc-aimodels tbody td[data-label]::before {
        content: attr(data-label); display: block;
        font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
        color: #98a2b3; margin-bottom: .25rem;
    }
    .tc-model-select.form-select { max-width: none; width: 100%; }
}
.tc-ai-set-toggle.is-locked .form-check-input { cursor: not-allowed; }
.tc-ai-set-toggle.is-locked .form-check-label { cursor: not-allowed; }
.tc-ai-confirm--danger { border-color: var(--ct-danger, #f5707a); background: color-mix(in srgb, var(--ct-danger, #f5707a) 8%, transparent); }

/* ════════════════════════════════════════════════════════════════════════════
   Per-feature MODEL RECOMMENDATION rail (AiModelsByFeatureSection — Model cell)
   Goal: the recommended tier is glanceable per row WITHOUT opening the dropdown,
   visually distinct from the live selection badge, with one-click apply + a
   tooltip rationale. Reuses the --tc-tier-* vars declared on .tc-aimodels.
   Two mutually-exclusive states render under the badge + select row:
     • DIFFERS  → .tc-rec  (caption + clickable apply chip + info "i")
     • MATCHES  → .tc-rec-status--match  (green check confirmation + info "i")
   ADA: never color-only — every state pairs the tier color with an icon AND text.
   ════════════════════════════════════════════════════════════════════════════ */

/* DIFFERS-state row: caption + apply chip + info icon, flush right under the cell */
.tc-rec {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .45rem;
}

/* Micro caption so the chip's meaning is unmistakable at a glance */
.tc-rec__caption {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #98a2b3;
    line-height: 1;
}

/* The recommended tier as a one-click APPLY chip — distinct from the soft live
   tier-badge by its star glyph, stronger outline, and trailing "use" arrow. */
.tc-rec-apply {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    padding: .32rem .55rem;
    min-height: 30px;            /* comfortable hit target in a dense desktop cell */
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.tc-rec-apply__star { font-size: .82em; }            /* inherits tier color via currentColor */
.tc-rec-apply__use  { font-size: .9em; opacity: .5; transition: opacity .15s ease-out; }

/* ACTIVE state: suggested chip is shown but already selected — render it as a
   static confirmation (not a button), so the suggested model stays glanceable
   without inviting a redundant click. */
.tc-rec-apply--active,
.tc-rec-apply--active:hover {
    cursor: default;
    transform: none;
    box-shadow: none;
}
.tc-rec-apply--active .tc-rec-apply__use {
    opacity: 1;
    color: var(--tc-tier-haiku);                       /* green check = currently active */
}
.tc-rec-apply:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(16,24,40,.10); }
.tc-rec-apply:hover .tc-rec-apply__use { opacity: 1; }
.tc-rec-apply:active { transform: translateY(0); box-shadow: none; }
.tc-rec-apply:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Tier variants — same palette as .tc-tier-badge but stronger border + hover fill
   so the chip reads as actionable, not as a second status badge. */
.tc-rec-apply--haiku {
    color: color-mix(in srgb, var(--tc-tier-haiku) 70%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-haiku) 9%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-haiku) 42%, transparent);
}
.tc-rec-apply--haiku:hover { background: color-mix(in srgb, var(--tc-tier-haiku) 18%, var(--ct-card-bg, #fff)); }
.tc-rec-apply--sonnet {
    color: color-mix(in srgb, var(--tc-tier-sonnet) 70%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-sonnet) 9%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-sonnet) 42%, transparent);
}
.tc-rec-apply--sonnet:hover { background: color-mix(in srgb, var(--tc-tier-sonnet) 18%, var(--ct-card-bg, #fff)); }
.tc-rec-apply--opus {
    color: color-mix(in srgb, var(--tc-tier-opus) 70%, var(--ct-dark, #343a40));
    background: color-mix(in srgb, var(--tc-tier-opus) 9%, var(--ct-card-bg, #fff));
    border-color: color-mix(in srgb, var(--tc-tier-opus) 42%, transparent);
}
.tc-rec-apply--opus:hover { background: color-mix(in srgb, var(--tc-tier-opus) 18%, var(--ct-card-bg, #fff)); }

/* Info "i" — rationale lives in the title tooltip, off the visible surface */
.tc-rec-why {
    color: #b0b7c3;
    font-size: .9rem;
    line-height: 1;
    cursor: help;
    transition: color .15s ease-out;
}
.tc-rec-why:hover,
.tc-rec-why:focus-visible { color: #6b7280; }
.tc-rec-why:focus-visible { outline: 2px solid #6b7280; outline-offset: 2px; border-radius: 3px; }

/* MATCHES-state: quiet green confirmation (selection already = recommendation) */
.tc-rec-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    margin-top: .45rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}
.tc-rec-status--match {
    color: color-mix(in srgb, var(--tc-tier-haiku) 72%, var(--ct-dark, #343a40));
}
.tc-rec-status--match i.ti-circle-check { font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .tc-rec-apply { transition: none; }
    .tc-rec-apply:hover { transform: none; box-shadow: none; }
}

/* Stacked card view: left-align under the data-label and grow touch targets */
@media (max-width: 575.98px) {
    .tc-rec,
    .tc-rec-status { justify-content: flex-start; }
    .tc-rec-apply { min-height: 36px; padding: .45rem .7rem; font-size: .75rem; }
    .tc-rec-why { font-size: 1.05rem; padding: .1rem; }
}
.tc-ai-confirm--danger .tc-ai-confirm-head { color: color-mix(in srgb, var(--ct-danger, #f5707a) 50%, var(--ct-dark, #343a40)); }
.tc-ai-confirm--danger .btn-primary { background: var(--ct-danger, #f5707a); border-color: var(--ct-danger, #f5707a); }
.tc-ai-confirm--danger .btn-primary:hover { background: color-mix(in srgb, var(--ct-danger, #f5707a) 85%, #000); border-color: color-mix(in srgb, var(--ct-danger, #f5707a) 85%, #000); }
.tc-ai-confirm--danger button:focus-visible { outline-color: var(--ct-danger, #f5707a); }

/* Cetan hero portrait — replaces the sparkle icon on the panel home empty-state. */
.tc-ai-hero-img {
    /* Circle frame at the larger (square-match) size, CONTAIN so the source's circular vignette
       — plaque + CETAN nameplate — fits inside; only the empty blurred corners get clipped. */
    display: block;
    width: 200px; height: 200px;
    max-width: 84%;
    margin: .15rem auto .6rem;
    border-radius: 50%;
    object-fit: contain;
    border: 2px solid color-mix(in srgb, var(--ct-primary, #6571ff) 28%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ct-primary, #6571ff) 22%, transparent);
}
.tc-ai-brief__sec { display: flex; flex-direction: column; gap: 6px; }
.tc-ai-brief__sec + .tc-ai-brief__sec { padding-top: 12px; border-top: 1px solid var(--ct-border-color, #e5e7eb); }
.tc-ai-brief__label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ct-text-muted, #6c757d); }
.tc-ai-brief__label .ti { font-size: 12px; color: var(--ct-primary, #6571ff); }
.tc-ai-brief__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tc-ai-brief__list li { position: relative; padding-left: 16px; font-size: 11.5px; line-height: 1.45; color: var(--ct-dark, #343a40); }
.tc-ai-brief__list--find li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ct-text-muted, #6c757d); }
.tc-ai-brief__list--act li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ct-primary, #6571ff); }
.tc-ai-brief__foot { display: flex; align-items: center; gap: 14px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--ct-border-color, #e5e7eb); }
.tc-ai-brief__more, .tc-ai-brief__dismiss { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px; font-weight: 600; line-height: 1; }
.tc-ai-brief__more { color: var(--ct-primary, #6571ff); }
.tc-ai-brief__dismiss { color: var(--ct-text-muted, #6c757d); font-weight: 500; }
.tc-ai-brief__more:hover { text-decoration: underline; }
.tc-ai-brief__dismiss:hover { color: var(--ct-dark, #343a40); }

/* ── Conversation reply card — mirrors the daily-briefing detail chrome ──────
   Shell + accent bar + chip header reuse .tc-ai-brief. Body is RenderMarkup output
   (.tc-ai-p / .tc-ai-h / .tc-ai-list); these overrides upgrade that generic output
   to briefing visuals for ANY number of arbitrary section labels. */
.tc-ai-brief--reply { max-width: 94%; }

/* first paragraph = the bottom-line callout (matches .tc-ai-brief__bottomline) */
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-p:first-child {
    margin: 0 0 2px; padding: 9px 11px;
    font-size: 12.5px; font-weight: 600; line-height: 1.4;
    color: var(--ct-dark, #343a40);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 7%, transparent);
    border-radius: 8px; border-left: 2px solid var(--ct-primary, #6571ff);
}
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-p { font-size: 11.5px; color: var(--ct-dark, #343a40); }

/* section header = uppercase label + primary icon (matches .tc-ai-brief__label) */
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-h {
    display: flex; align-items: center; gap: 5px;
    margin: 12px 0 6px; padding: 0; border-left: 0;
    font-size: 10px; font-weight: 700; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ct-text-muted, #6c757d);
}
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-h:first-child { margin-top: 0; }

/* subsequent sections get the briefing divider (a header that follows a list) */
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-list + .tc-ai-h {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--ct-border-color, #e5e7eb);
}

/* dot bullets = briefing findings/actions dots (primary) */
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-list { gap: 7px; margin: 6px 0 2px; }
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-list li {
    padding-left: 16px; font-size: 11.5px; line-height: 1.45; color: var(--ct-dark, #343a40);
}
.tc-ai-brief--reply .tc-ai-card-body .tc-ai-list li::before { top: 6px; }

/* keep the new section-label icon tidy in ALL RenderMarkup contexts (feed cards, fallback bubble) */
.tc-ai-h .ti { font-size: 12px; color: var(--ct-primary, #6571ff); }

.tc-ai-trigger:focus-visible,
.tc-ai-chip:focus-visible,
.tc-ai-compose textarea:focus-visible,
.tc-ai-compose button:focus-visible,
.tc-ai-confirm button:focus-visible {
    outline: 3px solid var(--ct-primary, #6571ff);
    outline-offset: 2px;
}

/* ── Cetan in-conversation search ────────────────────────────────────────── */
/* Active state for the search trigger & settings cog (shared .is-active) */
.tc-ai-meter-cog.is-active,
.tc-ai-meter-search.is-active {
    color: var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 14%, transparent);
}
.tc-ai-meter-cog:focus-visible {
    outline: 2px solid var(--ct-primary, #6571ff);
    outline-offset: 2px;
}

/* Search bar — collapses to zero height when closed */
.tc-ai-search {
    display: flex; align-items: center; gap: .4rem;
    max-height: 0; opacity: 0; padding: 0 .7rem; overflow: hidden;
    background: var(--ct-card-bg, #fff);
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
    transition: max-height .15s ease, opacity .15s ease, padding .15s ease, border-color .15s ease;
}
.tc-ai-search--open {
    max-height: 48px; opacity: 1;
    padding: .4rem .6rem .4rem .7rem;
    border-bottom-color: var(--ct-border-color, #f1f1f1);
}
@media (prefers-reduced-motion: reduce) { .tc-ai-search { transition: none; } }

.tc-ai-search-ico { font-size: 15px; color: var(--ct-text-muted, #adb5bd); flex-shrink: 0; }
.tc-ai-search-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent;
    font-size: 12.5px; color: var(--ct-dark, #343a40);
    padding: .2rem 0;
}
.tc-ai-search-input:focus { outline: none; }
.tc-ai-search-input::placeholder { color: var(--ct-text-muted, #adb5bd); }
.tc-ai-search-nav { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.tc-ai-search-count {
    font-size: 10.5px; font-weight: 600; color: var(--ct-text-muted, #6c757d);
    min-width: 34px; text-align: right; padding-right: .15rem;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tc-ai-search-count.is-empty { color: var(--ct-danger, #f5707a); }
.tc-ai-search-step {
    border: 0; background: transparent; color: var(--ct-text-muted, #adb5bd);
    width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; transition: background .15s, color .15s;
}
.tc-ai-search-step:hover:not(:disabled) {
    color: var(--ct-primary, #6571ff);
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 10%, transparent);
}
.tc-ai-search-step:focus-visible { outline: 2px solid var(--ct-primary, #6571ff); outline-offset: 1px; }
.tc-ai-search-step:disabled { opacity: .35; cursor: default; }

/* Highlight tokens (scoped vars on .tc-ai-panel) */
.tc-ai-panel {
    --ct-hit-bg: #ffe9a8; --ct-hit-ink: #3a2f00;
    --ct-hit-active-bg: #ff9f1c; --ct-hit-active-ink: #1f1500;
}
mark.tc-ai-hit {
    background: var(--ct-hit-bg, #ffe9a8);
    color: var(--ct-hit-ink, #3a2f00) !important; /* required: readable on blue user bubble */
    border-radius: 3px; padding: 0 1px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark.tc-ai-hit--active {
    background: var(--ct-hit-active-bg, #ff9f1c);
    color: var(--ct-hit-active-ink, #1f1500) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-hit-active-bg, #ff9f1c) 55%, transparent);
}

/* Thread loading indicator (shown while history session loads into chat) */
.tc-ai-loading {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0;
}
.tc-ai-loading .tc-ai-bubble--typing { background: var(--ct-light, #f1f3f5); padding: .55rem .8rem; border-radius: 14px; }

/* ===== Notification bell panel (reuses .tc-comm-panel shell) ===== */
.tc-noti-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--ct-border-color, #f1f1f1);
}
.tc-noti-row:hover { background: rgba(0,0,0,.03); }
.tc-noti-row--unread { background: color-mix(in srgb, var(--ct-primary, #6571ff) 6%, transparent); }
.tc-noti-row--unread:hover { background: color-mix(in srgb, var(--ct-primary, #6571ff) 10%, transparent); }

.tc-noti-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .5rem .65rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.tc-noti-row-icon {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-top: 1px;
}
.tc-noti-row-msg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Per-row action buttons (mark read / delete) — appear on row hover */
.tc-noti-row-act {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
}
.tc-noti-row:hover .tc-noti-row-act { opacity: 1; }
.tc-noti-row-act:hover { color: var(--ct-primary, #6571ff); }
.tc-noti-row-del:hover { color: #dc3545; }
.tc-noti-row-main:focus-visible,
.tc-noti-row-act:focus-visible {
    outline: 3px solid var(--ct-primary, #0d6efd);
    outline-offset: -2px;
}

/* ===== Notification drop-in toasts ===== */
.tc-noti-toasts {
    position: fixed;
    top: 78px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 340px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.tc-noti-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .8rem;
    background: var(--ct-card-bg, #fff);
    border: 1px solid var(--ct-border-color, #e5e7eb);
    border-left: 4px solid var(--tc-noti-accent, #3b82f6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    transform: translateX(120%);
    opacity: 0;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.tc-noti-toast--in { transform: translateX(0); opacity: 1; }
.tc-noti-toast--out { transform: translateX(120%); opacity: 0; }
.tc-noti-toast-icon { font-size: 20px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.tc-noti-toast-body { flex: 1 1 auto; min-width: 0; }
.tc-noti-toast-title { font-weight: 700; font-size: 13px; }
.tc-noti-toast-msg { font-size: 12px; color: var(--ct-text-muted, #6c757d); margin-top: 1px; }
.tc-noti-toast-x {
    border: 0; background: transparent; color: #adb5bd;
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 0 0 .25rem; flex-shrink: 0;
}
.tc-noti-toast-x:hover { color: #6c757d; }

/* Compact dismissible inline banner (FlashAlert.razor) — shorter, smaller text,
   and a close button. Replaces the default taller Bootstrap .alert flash. */
.tc-flash {
    padding: .45rem .75rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    line-height: 1.35;
}
.tc-flash .tc-flash-icon { font-size: .95rem; line-height: 1; flex-shrink: 0; }
.tc-flash .tc-flash-close {
    flex-shrink: 0;
    font-size: .6rem;
    padding: .3rem;
    margin: -.15rem 0;
    opacity: .6;
}
.tc-flash .tc-flash-close:hover { opacity: 1; }

/* /communications empty state (no conversation selected) */
.tc-comms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 0;
    padding: 2rem;
}
.tc-comms-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 12%, transparent);
    color: var(--ct-primary, #6571ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 1rem;
}

/* ---- Ended-conversation notice (panel + /communications page) ---- */
/* Panel thread: sits between the message log and the (disabled) reply form */
.tc-comm-ended-notice {
    flex-shrink: 0;
    padding: 10px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    background: #f8f9fb;
    border-top: 1px solid var(--ct-border-color, #e9ecef);
}
/* /communications page: fixed bar above the reply box (consistent with the panel) */
.tc-comms-ended-notice {
    flex-shrink: 0;
    padding: 10px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    background: #f8f9fb;
    border-top: 1px solid var(--ct-border-color, #e9ecef);
}

/* Lead-recovery card: close the thread scroll area into a rounded, bordered panel
   so it reads as contained (the /communications page keeps the bare .tc-comms-thread). */
.tc-comms-thread--boxed { border: 1px solid #eef0f2; border-radius: 10px; }

/* ---- Lead Recovery tab: older (collapsed) conversation groups ---- */
.tc-lead-conv-group .tc-lead-conv-chevron { transition: transform .15s ease; }
.tc-lead-conv-group button[aria-expanded="true"] .tc-lead-conv-chevron { transform: rotate(90deg); }
.tc-lead-conv-group button:hover { background: #f8f9fb; }
/* Kill the global bright-blue .btn focus ring on the collapse toggle; keep a
   subtle keyboard-only indicator for a11y (mouse selection shows nothing). */
.tc-lead-conv-group button:focus { outline: none; box-shadow: none; }
.tc-lead-conv-group button:focus-visible { outline: 2px solid var(--ct-primary, #727cf5); outline-offset: -2px; box-shadow: none; }

/* Each AI call is its OWN top-level section (2026-07-26) — previously every call attempt on a
   recovery thread stacked as banners inside one "Current conversation" collapse, so five distinct
   phone calls read as one 5-message chat. The info-blue accent flags "a call happened" at a glance,
   same as the ti-phone-check icon swapped in for the chevron on these sections. */
.tc-lead-conv-group--call { border-left: 3px solid var(--ct-info, #35b8e0); }

/* ============================================================================
   MOBILE-ONLY: right slide-out drawer header tap targets + User-menu panel
   ----------------------------------------------------------------------------
   Desktop/web is byte-identical — EVERYTHING below is inside the
   max-width:767.98px query (plus a combined reduced-motion variant). No rule
   here touches the desktop cascade. Owns app.css only; app.js + MainLayout.razor
   are owned by another dev. Tokens: --ct-* (documented hex fallbacks only).

   Family (one cohesive look on mobile):
     1. Cetan AI panel   → .tc-ai-head-btn
     2. Communications   → .tc-comm-panel-head .btn  (+ .tc-comm-thread-head .btn)
     3. Notifications     → reuses .tc-comm-panel / .tc-comm-panel-head shell
     4. User-menu panel  → .nav-user .dropdown-menu (NEW mobile slide-in drawer)
   ============================================================================ */
/* Desktop dropdown header: avatar + name/role on ONE row; close X hidden (it's a
   mobile slide-drawer affordance only). The avatar carries the `d-flex` utility
   (display:flex !important) so it can't be hidden here — keep it shown and lay the
   id row out horizontally instead of letting it stack above the name. */
/* Chevron rotation — base scope (desktop + mobile) */
.nav-user .dropdown-toggle .ti-chevron-down { transition: transform .18s ease; }
.nav-user .dropdown-toggle[aria-expanded="true"] .ti-chevron-down { transform: rotate(180deg); }

/* ============================================================
   Desktop user dropdown — polished card (≥768px)
   ============================================================ */
@media (min-width: 768px) {
    .nav-user .dropdown-menu {
        min-width: 258px;
        padding: 6px;
        border-radius: 14px;
        border: 1px solid var(--ct-border-color, #e5e7eb);
        box-shadow: 0 12px 28px -8px rgba(0,0,0,.18);
        background: var(--ct-card-bg, #fff);
        margin-top: .4rem;
    }
    .nav-user .dropdown-menu .dropdown-header.tc-usermenu-head {
        display: flex;
        align-items: center;
        gap: .7rem;
        margin: -6px -6px 6px;
        padding: .8rem .9rem;
        background: var(--ct-light, #f8f9fa);
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
    }
    .tc-usermenu-head .tc-usermenu-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
    .tc-usermenu-head .avatar-sm { width: 38px; height: 38px; flex-shrink: 0; }
    .tc-usermenu-head .tc-usermenu-meta h6 {
        font-size: .8125rem;
        font-weight: 600;
        color: var(--ct-dark, #343a40);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tc-usermenu-head .tc-usermenu-meta small {
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ct-secondary, #6c757d);
    }
    .tc-usermenu-head .tc-usermenu-close { display: none; }

    .nav-user .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .65rem;
        min-height: 40px;
        padding: .5rem .7rem;
        font-size: .8125rem;
        color: var(--ct-dark, #343a40);
        border-radius: 8px;
        transition: background .15s ease, color .15s ease;
    }
    .nav-user .dropdown-menu .dropdown-item .ti {
        font-size: 1.05rem;
        flex-shrink: 0;
        color: var(--ct-secondary, #6c757d);
    }
    .nav-user .dropdown-menu .dropdown-item:hover,
    .nav-user .dropdown-menu .dropdown-item:focus {
        background: color-mix(in srgb, var(--brand-primary, #0d6efd) 8%, transparent);
        color: var(--brand-primary, #0d6efd);
    }
    .nav-user .dropdown-menu .dropdown-item:hover .ti {
        color: var(--brand-primary, #0d6efd);
    }
    .nav-user .dropdown-menu .dropdown-divider {
        margin: 6px 4px;
        border-color: var(--ct-border-color, #e5e7eb);
    }

    /* Sign Out */
    .nav-user .dropdown-menu .dropdown-item.text-danger { color: var(--ct-danger, #dc3545) !important; }
    .nav-user .dropdown-menu .dropdown-item.text-danger .ti { color: var(--ct-danger, #dc3545); }
    .nav-user .dropdown-menu .dropdown-item.text-danger:hover,
    .nav-user .dropdown-menu .dropdown-item.text-danger:focus {
        background: color-mix(in srgb, var(--ct-danger, #dc3545) 10%, transparent);
        color: var(--ct-danger, #dc3545) !important;
    }

    /* Entrance animation */
    .nav-user .dropdown-menu.show { animation: tcUserMenuPop .16s ease-out; }
}

/* Reduced-motion: skip desktop entrance animation */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .nav-user .dropdown-menu.show { animation: none; }
}

@media (max-width: 767.98px) {

    /* --- 1. Cetan AI header buttons: 30px → 44px hit area, icon 17px → 21px --- */
    .tc-ai-head-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 21px;
    }

    /* --- 2+3. Comms / Notifications header buttons (Bootstrap btn-sm btn-link p-0) ---
       The .ti glyph is ~16px and p-0 kills padding → ~16px target. min-width/height
       give a ≥44px tap area WITHOUT fighting p-0's `padding:0 !important`; flex
       re-centers the glyph. Covers the close X, the "open full page" link (a.btn),
       the notif "mark all read" + "clear all" buttons, and the thread back/delete. */
    .tc-ai-panel-head .btn,
    .tc-comm-panel-head .btn,
    .tc-comm-thread-head .btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .tc-ai-panel-head .btn .ti,
    .tc-comm-panel-head .btn .ti,
    .tc-comm-thread-head .btn .ti {
        font-size: 21px;
    }
    /* tighten the header gap so 2–3 enlarged buttons + title still fit one row */
    .tc-comm-panel-head, .tc-ai-panel-head { gap: .15rem; }

    /* --- 4. NEW User-menu slide-in drawer (right side, full-height) ---
       Dev adds #tc-usermenu-backdrop + data-bs-display="static" so Popper does NOT
       inline-position → our selector (higher specificity than .dropdown-menu) wins
       without !important on transform, leaving the keyframe free to animate it.
       (display:none→block on .show means a transition won't fire — use @keyframes.) */
    /* Selector is intentionally (0,4,0) — Zircos app.min.css has
       `.app-topbar .dropdown .dropdown-menu{left:10px;right:10px!important}` at
       ≤575.98px which, at (0,3,0), would otherwise outrank a `.nav-user .dropdown-menu`
       rule and pin the drawer 10px off both edges (mid-screen) instead of flush-right. */
    .app-topbar .nav-user .dropdown .dropdown-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        inset-inline-start: auto !important;
        height: 100dvh;
        width: 100%;
        max-width: 100%;
        z-index: 1046;
        border: 0;
        border-left: 1px solid var(--ct-border-color, #e5e7eb);
        border-radius: 0;
        box-shadow: -6px 0 22px rgba(0,0,0,.16);
        padding: 0 0 env(safe-area-inset-bottom);
        overflow-y: auto;
        overscroll-behavior-y: contain;
        background: var(--ct-card-bg, #fff);
    }
    .nav-user .dropdown-menu.show {
        animation: tcUserMenuIn .28s cubic-bezier(.4,0,.2,1);
        will-change: transform;
    }

    /* panel header: avatar + (name / role) on the left, close X on the right —
       matches the other drawer heads */
    .nav-user .dropdown-menu .dropdown-header.tc-usermenu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: calc(.9rem + env(safe-area-inset-top)) 1rem .9rem 1.15rem;
        background: var(--ct-light, #f8f9fa);
        border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
        color: var(--ct-dark, #343a40);
        line-height: 1.3;
    }
    .tc-usermenu-head .tc-usermenu-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
    .tc-usermenu-head .avatar-sm { display: flex; width: 42px; height: 42px; }
    .tc-usermenu-head .tc-usermenu-meta { min-width: 0; flex: 1 1 auto; }
    .tc-usermenu-head .tc-usermenu-meta h6,
    .tc-usermenu-head .tc-usermenu-meta small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tc-usermenu-head .tc-usermenu-meta h6 { font-size: .8125rem; font-weight: 600; }
    .tc-usermenu-head .tc-usermenu-close {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px; flex-shrink: 0;
        border: 0; background: transparent; border-radius: 10px;
        color: var(--ct-secondary, #6c757d); font-size: 21px; cursor: pointer;
        transition: background .15s, color .15s;
    }
    .tc-usermenu-head .tc-usermenu-close:hover,
    .tc-usermenu-head .tc-usermenu-close:active {
        color: var(--ct-dark, #343a40);
        background: color-mix(in srgb, var(--ct-dark, #343a40) 8%, transparent);
    }

    /* large, legible rows: ≥48px, ~1rem text, ~1.15rem leading icon, roomy padding */
    .nav-user .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* <button> defaults to center when flex; match the <a> */
        gap: .8rem;
        min-height: 48px;
        padding: .8rem 1.15rem;
        font-size: 1rem;
        line-height: 1.3;
        text-align: left;
    }
    .nav-user .dropdown-menu .dropdown-item i,
    .nav-user .dropdown-menu .dropdown-item .ti {
        font-size: 1.15rem;
        flex-shrink: 0;
    }
    .nav-user .dropdown-menu .dropdown-divider { margin: 0; }

    /* Sign Out (.text-danger) kept visually distinct: own tint + separation */
    .nav-user .dropdown-menu .dropdown-item.text-danger {
        color: var(--ct-danger, #dc3545) !important;
        border-top: 1px solid var(--ct-border-color, #e5e7eb);
    }
    .nav-user .dropdown-menu .dropdown-item.text-danger:hover,
    .nav-user .dropdown-menu .dropdown-item.text-danger:active {
        background: color-mix(in srgb, var(--ct-danger, #dc3545) 10%, transparent);
    }
    .nav-user .dropdown-menu .dropdown-item:not(.text-danger):active {
        background: var(--ct-light, #f8f9fa);
    }

    /* backdrop element the dev creates (.tc-usermenu-backdrop).
       z must sit BELOW the .app-topbar sticky stacking context (z:1000) that traps the
       panel — otherwise a body-level backdrop at 1045 paints OVER the panel (grey tint),
       since the panel's 1046 only competes inside the topbar context, not at root. */
    .tc-usermenu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 999;
        animation: tcUserMenuFade .2s ease-out;
        touch-action: none;
        cursor: pointer;
    }
}

/* slide/fade keyframes (inert unless referenced by the mobile rules above) */
@keyframes tcUserMenuIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes tcUserMenuFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tcUserMenuPop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* reduced-motion: drop the User-menu slide + backdrop fade on mobile only */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .nav-user .dropdown-menu.show,
    .tc-usermenu-backdrop { animation: none; }
}

/* ============================================================
   Account / Manage (Identity) — Zircos card shell + responsive nav
   ============================================================ */
.tc-account-shell { max-width: 920px; }

/* Subsection heading: unify every Manage page's <h3> (Profile, Email, …) */
.tc-account-content > h3,
.tc-account-content h3:first-child {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--ct-heading-color, var(--ct-dark, #313a46));
}

/* Nav rhythm */
.tc-account-nav { gap: .25rem; }
.tc-account-nav .nav-link { display: flex; align-items: center; font-weight: 500; }

/* DESKTOP (md+): vertical sidebar pills, full-width within the column */
@media (min-width: 768px) {
    .tc-account-nav .nav-link { width: 100%; }
    .tc-account-content { padding-left: .25rem; }
}

/* MOBILE (<768px): horizontal, scrollable pill strip that reads as tabs */
@media (max-width: 767.98px) {
    .tc-account-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .5rem;
        margin-bottom: .25rem;
        border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
    }
    .tc-account-nav::-webkit-scrollbar { display: none; }
    .tc-account-nav .nav-item { flex: 0 0 auto; }
    .tc-account-nav .nav-link { white-space: nowrap; }
}

/* Save button: block on mobile, natural width on desktop */
@media (min-width: 576px) {
    .tc-account-content form button[type="submit"].w-100 { width: auto !important; }
    .tc-account-content form .btn-lg[type="submit"] { padding: .45rem 1.1rem; font-size: .9375rem; }
}

/* ===== Access Log card (cog-swap: Activity ↔ Logging Settings) ===== */

/* Cog / back icon button in the card header */
.tc-cog-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 50%;
    color: var(--bs-secondary-color, #6c757d);
    background: transparent;
    transition: background-color .15s ease-out, color .15s ease-out, transform .2s ease-out;
}
.tc-cog-btn:hover { background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-body-color, #313a46); }
.tc-cog-btn:hover .ti-settings { transform: rotate(90deg); }
.tc-cog-btn .ti { font-size: 1.15rem; transition: transform .25s ease-out; }
.tc-cog-btn.active { background: var(--bs-primary, #727cf5); color: #fff; }
/* No blue focus outline / ring on the cog button. */
.tc-cog-btn:focus,
.tc-cog-btn:focus-visible { outline: none; box-shadow: none; }

/* Thin gray ring modifier — signals a jump-to button (media generator: image ⇄ compliance notes). */
.tc-cog-btn--ring { border: 1px solid var(--bs-border-color, #dee2e6); }
.tc-cog-btn--ring.active { border-color: var(--bs-primary, #727cf5); }

/* In-place view swap */
.tc-log-view { display: none; }
.tc-log-views.show-activity .tc-view-activity { display: block; animation: tcFade .2s ease-out; }
.tc-log-views.show-settings .tc-view-settings { display: block; animation: tcFade .2s ease-out; }

@keyframes tcFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Logs view switcher (segmented pill on a track) ──────────────────────── */
.tc-log-switch {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    margin: 0;
    background: #f4f5f8;
    border-radius: 8px;
}
.tc-log-switch .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: #6c757d;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.tc-log-switch .nav-link:hover { color: #3b5de7; background: rgba(59,93,231,.06); }
.tc-log-switch .nav-link.active { color: #313a46; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.tc-log-switch .nav-link:focus-visible { outline: 2px solid #3b5de7; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tc-log-switch .nav-link { transition: none; } }

/* Tracked Events toggle grid — uniform tiles, every item the same size */
.tc-toggle-row {
    display: flex; align-items: center; gap: .75rem;
    height: 100%;            /* fill the equal-height grid cell */
    min-height: 66px;        /* uniform tile height across all items */
    padding: .65rem .9rem;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
}
.tc-toggle-icon {
    font-size: 1.2rem; line-height: 1;
    color: var(--bs-primary, #727cf5);
    flex: 0 0 auto;
}
.tc-toggle-text { flex: 1 1 auto; min-width: 0; }
.tc-toggle-label { font-weight: 600; margin-bottom: .05rem; cursor: pointer; line-height: 1.2; }
.tc-toggle-help {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .8rem; line-height: 1.25;
    color: var(--bs-secondary-color, #6c757d);
}
.tc-toggle-switch { flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; }
.tc-toggle-switch .form-check-input { margin: 0; cursor: pointer; }

.tc-section-note { font-size: .8125rem; }
.tc-section-note .ti { vertical-align: -1px; }

@media (prefers-reduced-motion: reduce) {
    .tc-cog-btn, .tc-cog-btn .ti { transition: none; }
    .tc-cog-btn:hover .ti-settings { transform: none; }
    .tc-log-views.show-activity .tc-view-activity,
    .tc-log-views.show-settings .tc-view-settings { animation: none; }
}

/* ── Budget surface — cohesion tokens ──────────────────────────────────────
   One visual language across the line-item table, the two-pane split, the KB
   action buttons and the guided wizard cards: shared radii, hairlines, ink,
   surface and shadow. Edit a value here, it propagates everywhere. */
:root {
    --tc-budget-radius:     .5rem;   /* cards, panels, the aside rail */
    --tc-budget-radius-sm:  7px;     /* buttons, chips, inner items */
    --tc-budget-ink:        #313a46; /* primary text */
    --tc-budget-muted:      #6c757d; /* secondary text */
    --tc-budget-faint:      #8a92a0; /* tertiary / section labels */
    --tc-budget-hairline:   #e7ebf1; /* dividers inside a surface */
    --tc-budget-border:     #e2e7ee; /* surface edges */
    --tc-budget-shadow:     0 1px 2px rgba(49, 58, 70, .04);
    --tc-budget-accent:     #0d6efd; /* the single accent — actions only */
    --tc-amber-spine:       #f9c851;
    --tc-amber-ink:         #8a6d00;
    --tc-green-spine:       #0acf97;
    --tc-green-ink:         #0a7a5e;
}

/* ── Budget Negotiation — Increment 7: correctness surface ──────────────── */

/* "Needs pricing" row — calm soft spine + whisper tint, NOT a full-row amber
   flood. Matches the wizard's .tc-row-attention so the two read as one system.
   Color is never the only signal: the inline chip carries the "needs pricing"
   word too. (UI dev may later swap the class to .tc-row-attention for parity.) */
.tc-row-needs-price > td             { background: rgba(249, 200, 81, .045) !important; }
.tc-row-needs-price > td:first-child { box-shadow: inset 3px 0 0 0 var(--tc-amber-spine); }

/* Coverage meter strip — 4-cell summary in the line items card header. */
.tc-coverage-meter {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    align-items: center;
}
.tc-coverage-cell {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--tc-budget-hairline, #e7ebf1);
    background: #fff;
    color: #6c757d;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}
/* Soft tints — present enough to read state, quiet enough not to shout. */
.tc-coverage-cell.tc-coverage-ok   { border-color: #cdeede; color: #0a7a5e; background: rgba(10,207,151,.05); }
.tc-coverage-cell.tc-coverage-warn { border-color: #f1dfa6; color: #8a6d00; background: rgba(249,200,81,.07); }

/* Clickable coverage badges = single-select filter over the line-items table (fast triage to open gaps). */
.tc-coverage-cell.tc-coverage-filter {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.tc-coverage-cell.tc-coverage-filter:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(20,30,50,.12); }
.tc-coverage-cell.tc-coverage-cell--active { box-shadow: 0 0 0 2px rgba(13,110,253,.5); border-color: #0d6efd; }
.tc-coverage-cell.tc-coverage-cell--dim    { opacity: .42; }
/* Non-clickable (Overhead): visibly inert — dashed border + faint hatch + default cursor, never hovers. */
.tc-coverage-cell.tc-coverage-cell--static {
    cursor: default;
    border-style: dashed;
    background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 6px, #f2f4f8 6px, #f2f4f8 12px);
    opacity: .9;
}

/* Justification three-prong expandable. */
.tc-just-detail {
    background: rgba(0,0,0,.02);
    border-inline-start: 3px solid #0acf97;
    padding: .5rem .75rem;
    border-radius: .375rem;
}
.tc-just-prong-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .2rem;
}
.tc-just-prong-text {
    font-size: .8125rem;
    color: #313a46;
    line-height: 1.5;
    white-space: pre-line;
}

/* Export-gate violation list — calm, hairline-separated rows in ONE bordered
   group. Severity reads from a restrained left spine + a muted icon tint, never
   a flood of red blocks. The single count badge above the list is the only loud
   signal; each row is neutral ink with plenty of breathing room. */
.tc-gate-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tc-budget-hairline, #e7ebf1);
    border-radius: var(--tc-budget-radius-sm, 7px);
    background: #fff;
    overflow: hidden;
}
.tc-gate-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .8125rem;
    padding: .55rem .7rem;
    line-height: 1.5;
    color: #4b5563;                /* neutral ink — not a red block */
    background: #fff;
}
.tc-gate-item + .tc-gate-item { border-top: 1px solid var(--tc-budget-hairline, #e7ebf1); }
.tc-gate-item i { color: #98a2b0; margin-top: .05rem; flex-shrink: 0; }   /* muted by default */
.tc-gate-item--gate     { box-shadow: inset 3px 0 0 0 #e3a3a9; }   /* soft danger spine */
.tc-gate-item--gate i   { color: #c47883; }
.tc-gate-item--deferred { box-shadow: inset 3px 0 0 0 #d3dae3; }   /* neutral spine */
.tc-gate-item__link {
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    color: var(--tc-budget-accent, #0d6efd);   /* the next action — discoverable */
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    margin-top: .1rem;
}
.tc-gate-item__link:hover { color: #0a58ca; }

@media (prefers-reduced-motion: reduce) {
    .tc-row-needs-price > td,
    .tc-just-detail,
    .tc-gate-item { transition: none; }
}

/* ── Budget KB — document table Actions (text buttons, replaces icon-only) ─── */
/* Legible icon+label pills sized for easy clicking. Base = neutral/archive;
   modifiers re-tint for restore (success) and delete (danger). Use on <button>. */
.tc-kb-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .7rem;
    border-radius: 6px;
    border: 1px solid #d3dae3;
    background: #fff;
    color: #4b5563;
    font-size: .75rem;       /* 12px — readable, not tiny */
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    flex-shrink: 0;
}
.tc-kb-action i { font-size: .95rem; line-height: 1; }
.tc-kb-action + .tc-kb-action { margin-left: .35rem; }
.tc-kb-action:disabled { opacity: .55; cursor: not-allowed; }

/* Archive — neutral slate (default look already set above; explicit for clarity). */
.tc-kb-action--archive:hover:not(:disabled) {
    background: #eef1f5;
    border-color: #b9c2cd;
    color: #313a46;
}
.tc-kb-action--archive:focus-visible {
    outline: 2px solid #6c757d;
    outline-offset: 2px;
}

/* Restore — success green. */
.tc-kb-action--restore {
    border-color: #9ee7d0;
    color: #0a7a5e;
}
.tc-kb-action--restore:hover:not(:disabled) {
    background: rgba(10, 207, 151, .12);
    border-color: #0acf97;
    color: #086a51;
}
.tc-kb-action--restore:focus-visible {
    outline: 2px solid #0acf97;
    outline-offset: 2px;
}

/* Delete — danger red (outline at rest, solid-tint on hover). */
.tc-kb-action--delete {
    border-color: #f1b6bc;
    color: #c0303c;
}
.tc-kb-action--delete:hover:not(:disabled) {
    background: rgba(220, 53, 69, .12);
    border-color: #dc3545;
    color: #b02a37;
}
.tc-kb-action--delete:focus-visible {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Inline delete confirmation — solid danger confirm + neutral cancel + prompt. */
.tc-kb-confirm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
}
.tc-kb-confirm__prompt { font-size: .75rem; color: #6c757d; }
.tc-kb-action--confirm {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.tc-kb-action--confirm:hover:not(:disabled) {
    background: #b02a37;
    border-color: #b02a37;
    color: #fff;
}

/* ── Budget Detail — two-pane split (budget left / validation rail right) ──── */
/* Self-contained CSS grid so markup needs no Bootstrap col classes:
   <div class="tc-budget-split">
     <div class="tc-budget-main"> …line items card… </div>
     <aside class="tc-budget-aside"> …gate + warnings + coverage meter… </aside>
   </div>
   Source order = main first, aside second → on mobile the rail collapses BELOW. */
.tc-budget-split {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 1.25rem;
    align-items: start;        /* rail height never stretched by the main column */
}
.tc-budget-main { min-width: 0; }   /* let wide tables shrink instead of overflow */
/* Right rail hidden (flag in Budgets.razor.cs) → main content spans the full width. */
.tc-budget-split.tc-budget-split--full { grid-template-columns: minmax(0, 1fr); }

/* Right rail — grows naturally with its content. NO inner scrollbar, NO
   max-height: the Coverage / Pricing / Export sections stack and the PAGE
   scrolls (Chief's call — the Coverage card must grow auto). Sticky keeps it in
   view while the table scrolls; if the rail is ever taller than the viewport
   the page simply scrolls past it — there is never an internal scroll region. */
.tc-budget-aside {
    position: sticky;
    top: calc(var(--ct-topbar-height, 70px) + 1rem);   /* clears the 70px topbar */
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--tc-budget-border, #e2e7ee);
    border-radius: var(--tc-budget-radius, .5rem);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);  /* quieter than the old tint */
    box-shadow: var(--tc-budget-shadow, 0 1px 2px rgba(49, 58, 70, .04));
}
.tc-budget-aside__title {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tc-budget-faint, #8a92a0);   /* section label recedes */
    margin: 0 0 .6rem;                          /* rhythm under each heading */
}
/* Hairline divider between rail sections (Coverage / Pricing / Export). */
.tc-budget-aside__section + .tc-budget-aside__section {
    border-top: 1px solid var(--tc-budget-hairline, #e7ebf1);
    padding-top: 1.1rem;
}
/* Calm Bootstrap alerts inside the rail so the Pricing warning stops shouting. */
.tc-budget-aside .alert { border-radius: var(--tc-budget-radius-sm, 7px); margin-bottom: 0; }
.tc-budget-aside .alert-warning {
    background: rgba(249, 200, 81, .08);
    border-color: #f1dfa6;
    color: #8a6d00;
}

/* Collapse to single column below Bootstrap lg (992px): rail drops below,
   loses sticky + scroll cap and reads as a normal stacked panel. */
@media (max-width: 991.98px) {
    .tc-budget-split { grid-template-columns: 1fr; gap: 1rem; }
    .tc-budget-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ── Budget Negotiation — Guided, suggestion-driven gap resolution ──────────── */
/* Concept: claude/specs/budget-upgrade/05-guided-budget-ux.md. Every gap on a line
   ($0 price, unmatched activity, Unclassified MCA, missing CPT) surfaces an inline,
   pre-filled AI suggestion the user just CONFIRMS. Inline-per-row is the source of
   truth; a thin "Resolve gaps" guided driver re-uses the same cards. NOTE: classes
   only — .razor wiring is a follow-up. */

/* Row status spine — calmer than the full-row amber flood of .tc-row-needs-price.
   A 3px inset bar on the first cell encodes state; color is NEVER the only signal
   (paired with the inline .tc-fix-chip text / .tc-row-ready check in markup). */
.tc-row-attention > td:first-child { box-shadow: inset 3px 0 0 0 #f9c851; }
.tc-row-ready     > td:first-child { box-shadow: inset 3px 0 0 0 #0acf97; }
.tc-row-focused   > td {
    background: rgba(13, 110, 253, .06) !important;
    position: relative;
    z-index: 2;
}
/* Table focus mode — while a row is edited inline, dim + disable the rest so the user
   focuses on the active row; the editing row keeps full opacity + a blue accent. */
.tc-row-dimmed  > td { opacity: .3; pointer-events: none; transition: opacity .15s ease; }
/* Inputs + action buttons align to the TOP of the cell; floor/sponsor/MCA labels flow underneath. */
.tc-row-editing > td { background: rgba(13, 110, 253, .04); vertical-align: top; }
.tc-row-editing > td:first-child { box-shadow: inset 3px 0 0 0 #0d6efd; }
/* Keep the cell's own text dark on hover — the light edit background washed the total to white.
   Targets the td only (not children), so colored badges/hints keep their own colors. */
.tc-row-editing:hover > td { color: #212529 !important; }

/* Transient save toast — pops bottom-right then fades; auto-removed from the DOM after the C# timer. */
.tc-save-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 1080;
    background: #0f5132; color: #fff; padding: 10px 16px; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; font-weight: 600;
    animation: tcToastIn .18s ease-out, tcToastOut .4s ease-in 2.2s forwards;
}
@keyframes tcToastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tcToastOut { to { opacity: 0; transform: translateY(12px); } }

/* Inline confirm affordance (collapsed) — amber pill, mirrors the existing
   `why â–¾` toggle. Render as a <button> with aria-expanded/aria-controls. */
.tc-fix-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    border: 1px solid #f0d585;
    background: rgba(249, 200, 81, .14);
    color: #8a6d00;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.tc-fix-chip:hover       { background: rgba(249, 200, 81, .24); border-color: #e6c25a; }
.tc-fix-chip:focus-visible { outline: 2px solid #f9c851; outline-offset: 2px; }

/* Suggestion stack — wrapper inside the colspan expand row. */
.tc-suggest {
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
    border: 1px solid #e2e7ee;
    border-inline-start: 3px solid #0d6efd;   /* ✦ rail = "we have a recommendation" */
    border-radius: .5rem;
    padding: .75rem .9rem;
    margin: .35rem .5rem .55rem;
}
.tc-suggest__intro {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: #313a46;
    font-weight: 600;
    margin-bottom: .6rem;
}
.tc-suggest__intro i { color: #0d6efd; }

/* One gap = one card; hairline divider between cards. */
.tc-suggest-card { padding: .15rem 0; }
.tc-suggest-card + .tc-suggest-card {
    border-top: 1px solid #e7ebf1;
    margin-top: .55rem;
    padding-top: .6rem;
}
.tc-suggest-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}
.tc-suggest-card__kicker {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}
.tc-suggest-card__lead {
    font-size: .8125rem;
    color: #313a46;
    line-height: 1.5;
    margin-bottom: .45rem;
}
/* The recommended value, called out inline (❯ value). */
.tc-suggest-pick {
    color: #0d6efd;
    font-weight: 600;
    white-space: nowrap;
}
.tc-suggest-source {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6875rem;
    color: #6c757d;
}

/* "Add as a new activity" — action-with-undo affordance (guided gap-fix wizard).
   Quiet link by default; once staged it becomes a soft confirmed pill + an Undo link. */
.tc-newact-link {
    font-size: 13px;
    text-decoration: none;
}
.tc-newact-link:hover { text-decoration: underline; }
.tc-newact-confirm {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem .55rem;
    border-radius: 6px;
    background: rgba(10, 207, 151, .10);        /* Zircos success tint */
    border: 1px solid rgba(10, 207, 151, .30);
    color: #0a7a5e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.tc-newact-confirm > i { font-size: 15px; line-height: 1; }
.tc-newact-undo {
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    text-decoration: underline;
    padding: 0 0 0 .5rem !important;
    margin-left: .35rem;
    border-left: 1px solid rgba(10, 207, 151, .30);
    border-radius: 0;
}
.tc-newact-undo:hover { color: #0a7a5e; }

/* Confidence indicator — segmented meter + WORD + number (never color alone). */
.tc-confidence {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}
.tc-confidence-meter {
    display: inline-flex;
    gap: 2px;
}
.tc-confidence-seg {
    width: 9px;
    height: 7px;
    border-radius: 2px;
    background: #d3dae3;          /* empty segment */
}
.tc-confidence--high { color: #0a7a5e; }
.tc-confidence--med  { color: #8a6d00; }
.tc-confidence--low  { color: #5a6472; }
.tc-confidence--high .tc-confidence-seg.is-on { background: #0acf97; }
.tc-confidence--med  .tc-confidence-seg.is-on { background: #f9c851; }
.tc-confidence--low  .tc-confidence-seg.is-on { background: #8a92a0; }
/* On hover an activity-candidate row (btn-outline-secondary) inverts to a dark fill, so force the
   confidence chip text white for contrast — scoped to the guided wizard. */
.modal[aria-labelledby="bw-modal-title"] .btn-outline-secondary:hover .tc-confidence,
.modal[aria-labelledby="bw-modal-title"] .btn-outline-secondary:hover .tc-confidence-word,
.modal[aria-labelledby="bw-modal-title"] .btn-outline-secondary:hover .tc-confidence span {
    color: #fff !important;
}
/* When a candidate row is SELECTED (btn-primary, blue fill), the tier color (green/amber) is unreadable
   on blue — force the whole confidence chip (word + "· N%" + lit meter segments) white. Scoped to the wizard. */
.modal[aria-labelledby="bw-modal-title"] .btn-primary .tc-confidence,
.modal[aria-labelledby="bw-modal-title"] .btn-primary .tc-confidence-word,
.modal[aria-labelledby="bw-modal-title"] .btn-primary .tc-confidence span {
    color: #fff !important;
}
.modal[aria-labelledby="bw-modal-title"] .btn-primary .tc-confidence-seg.is-on {
    background: #fff !important;
}

/* Gap-wizard overage banner — extra breathing room below the warning state. */
.modal[aria-labelledby="bw-modal-title"] .alert-warning {
    margin-bottom: 25px !important;
}

/* GFW: selection is shown by the button BACKGROUND only — drop the Bootstrap focus
   ring on click (it disturbs the design). Keyboard focus (:focus-visible) keeps its
   ring for accessibility; only the mouse-click/persisted ring is removed. */
.modal[aria-labelledby="bw-modal-title"] .btn:focus:not(:focus-visible) {
    box-shadow: none !important;
    outline: none !important;
}

/* Budget line-items table: header sticks right under the sticky health/Grand-Total bar as the page scrolls.
   The wrapper must NOT create an overflow context (overflow-x:auto computes overflow-y:auto and kills the
   page-level sticky), so it stays overflow:visible. ~58px = health-bar height; tune if the bar grows. */
.tc-budget-lines-wrap {
    overflow: visible;
}
.tc-budget-lines thead th {
    position: sticky;
    top: calc(var(--ct-topbar-height, 70px) + 58px);
    background: var(--ct-card-bg, #fff);
    z-index: 15;
}

/* Accept / alternative / dismiss affordances. */
.tc-suggest-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.tc-suggest-accept {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .8rem;
    border: 1px solid #0d6efd;
    border-radius: 6px;
    background: #0d6efd;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.tc-suggest-accept:hover { background: #0a58ca; border-color: #0a58ca; }
.tc-suggest-accept:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.tc-suggest-alt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 30px;
    padding: 0 .7rem;
    border: 1px solid #d3dae3;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tc-suggest-alt:hover { background: #eef1f5; border-color: #b9c2cd; color: #313a46; }
.tc-suggest-alt:focus-visible { outline: 2px solid #6c757d; outline-offset: 2px; }
.tc-suggest-dismiss {
    background: none;
    border: none;
    padding: .2rem .25rem;
    color: #6c757d;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tc-suggest-dismiss:hover { color: #313a46; }
.tc-suggest-dismiss:focus-visible { outline: 2px solid #6c757d; outline-offset: 2px; }

/* Accepted strip — card collapses to one green confirmed line + undo. */
.tc-suggest-card--accepted {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: .375rem;
    background: rgba(10, 207, 151, .10);
    color: #0a7a5e;
    font-size: .8125rem;
    font-weight: 600;
}
.tc-suggest-card--accepted i.ti-circle-check { flex-shrink: 0; }
.tc-suggest-undo {
    margin-inline-start: auto;
    background: none;
    border: none;
    padding: 0 .15rem;
    color: #0a7a5e;
    font-size: .7rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.tc-suggest-undo:focus-visible { outline: 2px solid #0acf97; outline-offset: 2px; }

/* Aside rail — "Resolve gaps" progress block (sits above Coverage/Pricing/Export). */
.tc-gap-progress__count {
    font-size: .9375rem;
    font-weight: 700;
    color: #313a46;
}
.tc-gap-progress__sub { font-size: .75rem; color: #6c757d; margin-top: .1rem; }
.tc-gap-progress__bar {
    height: 6px;
    border-radius: 999px;
    background: #e7ebf1;
    overflow: hidden;
    margin: .5rem 0 .35rem;
}
.tc-gap-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: #f9c851;
    transition: width .25s ease, background .25s ease;
}
.tc-gap-progress--done .tc-gap-progress__fill { background: #0acf97; }
.tc-gap-progress--done .tc-gap-progress__count { color: #0a7a5e; }
.tc-resolve-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    height: 34px;
    margin-top: .5rem;
    border: 1px solid #0d6efd;
    border-radius: 7px;
    background: #0d6efd;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.tc-resolve-cta:hover { background: #0a58ca; }
.tc-resolve-cta:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }

/* Inline "Apply suggestion" on an export-gate row (extends .tc-gate-item). */
.tc-gate-item__apply {
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* Guided mode — dim scrim + floating controller. */
.tc-guided-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 35, .28);
    z-index: 1040;
}
.tc-guided-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1055;
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    max-width: min(92vw, 540px);
    padding: .7rem 1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e7ee;
    box-shadow: 0 8px 28px rgba(20, 26, 35, .22);
    font-size: .8125rem;
    color: #313a46;
}
.tc-guided-bar__step { font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.tc-guided-bar__step i { color: #0d6efd; }

@media (prefers-reduced-motion: reduce) {
    .tc-fix-chip,
    .tc-suggest-accept,
    .tc-suggest-alt,
    .tc-gap-progress__fill,
    .tc-resolve-cta,
    .tc-row-focused > td { transition: none; }
}

/* ── Budget — visual elevation: the line items read as a calm ledger ───────────
   Scoped to .tc-budget-main only (won't touch other admin tables). Column
   headers recede — small, tracked, muted — so the figures lead; rows get a
   generous, even vertical rhythm; the Description is the row's primary text and
   the money columns align on tabular figures. Same ink/border tokens as the
   aside + wizard, so the whole pane reads as one crafted surface. */
.tc-budget-main thead th {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tc-budget-faint, #8a92a0);
    border-bottom: 1px solid var(--tc-budget-border, #e2e7ee);
    padding-top: .5rem;
    padding-bottom: .5rem;
    white-space: nowrap;
}
.tc-budget-main tbody > tr > td {
    padding-top: .6rem;
    padding-bottom: .6rem;
    vertical-align: middle;
}
/* Description = primary text; chips, floor hints, basis lines stay secondary. */
.tc-budget-main tbody > tr > td:first-child { color: var(--tc-budget-ink, #313a46); font-weight: 500; }
/* Money columns line up cleanly. */
.tc-budget-main tbody > tr > td.text-end,
.tc-budget-main tfoot td.text-end { font-variant-numeric: tabular-nums; }
/* Grand-total footer — a quiet rule, a clear figure. */
.tc-budget-main tfoot td {
    border-top: 2px solid var(--tc-budget-border, #e2e7ee);
    padding-top: .7rem;
    padding-bottom: .7rem;
}

/* ══ Guided Budget Wizard v2 — focused modal step flow ═══════════════════════
   See claude/specs/budget-upgrade/06-guided-budget-wizard-v2.md.
   One gap per step, full attention, then auto-advance. Reuses the --tc-budget-*
   tokens + the existing .tc-confidence* / .tc-suggest-pick primitives so the
   wizard, the inline table and the aside rail read as ONE visual language.
   Prefix: .tc-bw-  ("budget wizard"). */

/* ── AI-processing gate — full card, NO partial table ─────────────────────── */
.tc-bw-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.15rem;
    min-height: 400px;
    padding: 3.5rem 2rem;
}
.tc-bw-processing__ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--tc-budget-hairline, #e7ebf1);
    border-top-color: var(--tc-budget-accent, #0d6efd);
    animation: tc-bw-spin .9s linear infinite;
}
.tc-bw-processing__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tc-budget-ink, #313a46);
    margin: .5rem 0 0;
}
.tc-bw-processing__sub {
    font-size: .9375rem;
    color: var(--tc-budget-muted, #6c757d);
    line-height: 1.6;
    max-width: 32rem;
}
.tc-bw-processing__bar {
    width: min(280px, 70%);
    height: 6px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
    margin-top: .25rem;
}
.tc-bw-processing__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--tc-budget-accent, #0d6efd);
    /* indeterminate by default; swap to a width-driven determinate fill once
       the extraction line-count is known. */
    width: 40%;
    animation: tc-bw-indet 1.4s ease-in-out infinite;
}
.tc-bw-processing__meta { font-size: .6875rem; color: var(--tc-budget-faint, #8a92a0); }


/* (.tc-bw-resume manual-mode re-entry banner removed — the single "items to resolve in the guided fix"
   alert + Open Guided Fix CTA is now the only gap chrome; it renders in manual mode too.) */

@keyframes tc-bw-spin { to { transform: rotate(360deg); } }
@keyframes tc-bw-indet {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-bw-processing__ring { animation: none; border-top-color: var(--tc-budget-hairline, #e7ebf1); }
    .tc-bw-processing__fill { animation: none; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sprint 1a — Budget Health bar · Category groups · Justification drawer + chip
   ══════════════════════════════════════════════════════════════════════════════ */

/* Design tokens */
:root {
    --tc-budget-display: 1.75rem;
    --tc-budget-elev: 0 2px 8px rgba(49,58,70,.10);
    --tc-just-ok: #0a7a5e;
    --tc-just-review: #8a6d00;
    --tc-just-none: #8a92a0;
}

/* ── Health bar ── */
.tc-health-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .55rem .75rem;
    background: var(--ct-card-bg, #fff);
    border: 1px solid var(--tc-budget-border, #e2e7ee);
    border-radius: var(--tc-budget-radius-sm, 7px);
    box-shadow: var(--tc-budget-shadow, 0 1px 2px rgba(49,58,70,.04));
    position: sticky;
    top: var(--ct-topbar-height, 70px);
    z-index: 20;
}
.tc-health-bar__segs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    flex: 1 1 auto;
    min-width: 0;
}
.tc-health-bar__right {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.tc-health-bar__amount {
    font-size: var(--tc-budget-display, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--tc-budget-ink, #313a46);
}
.tc-health-bar__total { text-align: right; }
.tc-health-bar__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a92a0;
}
/* Per-Subject (unit rate) + Per-Study (forecast) read as quiet context; only the Grand Total is the
   black headline figure. */
.tc-health-bar__total--muted .tc-health-bar__amount {
    color: #98a1ad;
    font-weight: 600;
    font-size: 1.2rem;
}
/* Hairline separating the muted context figures from the headline Grand Total. */
.tc-health-bar__div {
    align-self: stretch;
    width: 1px;
    min-height: 2.1rem;
    margin: 0 .1rem;
    background: var(--tc-budget-border, #e2e7ee);
}

@media (max-width: 767.98px) {
    .tc-health-bar { position: static; }
    .tc-health-bar__div { display: none; }
}

/* ── Attrition control — one compact horizontal row: icon · label+hint · SF/RI fields · save. ── */
.tc-attrition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .5rem .8rem;
    background: var(--ct-light, #f8fafc);
    border: 1px solid var(--tc-budget-border, #e2e7ee);
    border-radius: var(--tc-budget-radius-sm, 7px);
}
.tc-attrition__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 6px;
    background: rgba(49, 58, 70, .06);
    color: var(--tc-budget-ink, #313a46); font-size: 1rem; line-height: 1;
}

/* label + one-line hint (replaces the old 3-line paragraph) */
.tc-attrition__lead { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; line-height: 1.25; }
.tc-attrition__title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tc-budget-ink, #313a46);
}
.tc-attrition__sub { font-size: .72rem; color: #8a92a0; }
.tc-attrition__sub strong { color: var(--tc-budget-ink, #313a46); font-weight: 600; }

/* fields cluster — pinned right, never wraps its own inputs */
.tc-attrition__fields { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
.tc-attrition__ig { width: auto; }
.tc-attrition__tag {
    min-width: 78px; justify-content: flex-start;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    color: #6b7480; background: #fff; border-color: var(--tc-budget-border, #e2e7ee);
}
.tc-attrition__pct {
    font-size: .75rem; color: #8a92a0;
    background: #fff; border-color: var(--tc-budget-border, #e2e7ee);
}
.tc-attrition__input.form-control {
    width: 58px; min-width: 70px; flex: 0 0 auto;
    font-size: .95rem; font-weight: 600; text-align: right; padding-right: .4rem;
    color: var(--tc-budget-ink, #313a46); border-color: var(--tc-budget-border, #e2e7ee);
}
.tc-attrition__input.form-control:focus {
    border-color: #0acf97; box-shadow: 0 0 0 .15rem rgba(10, 207, 151, .18); z-index: 3;
}

/* quiet-until-dirty save */
.tc-attrition__save { padding: .3rem .6rem; line-height: 1; }
.tc-attrition__save:not(:disabled) { box-shadow: 0 1px 3px rgba(10, 207, 151, .35); }

/* mobile: hint on its own row, fields stretch full width */
@media (max-width: 575.98px) {
    .tc-attrition__lead { flex-basis: 100%; }
    .tc-attrition__fields { width: 100%; }
    .tc-attrition__ig { flex: 1 1 0; min-width: 0; }
    .tc-attrition__tag { min-width: 70px; }
    .tc-attrition__input.form-control { width: auto; flex: 1 1 auto; }
}

/* ── Category group header rows ── */
.tc-cat-group__head {
    /* Soft indigo tint + a quiet left accent rail — distinguishes a category band from the white/striped data
       rows without shouting. Inset box-shadow (not a border) avoids table border-collapse quirks. */
    background: rgba(99, 102, 241, .07);
    box-shadow: inset 3px 0 0 rgba(99, 102, 241, .45);
    cursor: pointer;
    user-select: none;
}
.tc-cat-group__head:hover { background: rgba(99, 102, 241, .12); }
.tc-cat-group__head td { padding-top: .4rem !important; padding-bottom: .4rem !important; }
/* Clickable-row variant: drop the cell's own padding so the full-width button covers
   the entire row (whole line toggles collapse, not just the title). */
.tc-cat-group__head--btn td { padding: 0 !important; }
.tc-cat-group__btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* label hard-left, subtotal hard-right */
    gap: .5rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .4rem .5rem; /* match the table's cell padding so the subtotal lines up with Grand Total */
    text-align: left;
    cursor: pointer;
}
/* Left cluster: caret + name + count, hugging the far left of the row. */
.tc-cat-group__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.tc-cat-group__btn:focus-visible { outline: 2px solid var(--tc-budget-accent, #0d6efd); outline-offset: 2px; border-radius: 3px; }
.tc-cat-group__caret {
    color: var(--tc-budget-faint, #8a92a0);
    font-size: .85rem;
    transition: transform .12s ease;
    flex-shrink: 0;
}
.tc-cat-group__count {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--tc-budget-faint, #8a92a0);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tc-cat-group__subtotal {
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tc-budget-ink, #313a46);
}

/* ── Justification status chip ── */
.tc-just-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--tc-budget-hairline, #e7ebf1);
    background: #fff;
    color: var(--tc-just-none, #8a92a0);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.3;
    transition: border-color .15s ease, background .15s ease;
}
.tc-just-chip:hover { border-color: #c4c9d0; background: #f9fafb; }
.tc-just-chip:focus-visible { outline: 2px solid var(--tc-budget-accent, #0d6efd); outline-offset: 2px; }
.tc-just-chip--justified {
    border-color: #cdeede;
    color: var(--tc-just-ok, #0a7a5e);
    background: rgba(10,207,151,.05);
}
.tc-just-chip--review {
    border-color: #f1dfa6;
    color: var(--tc-just-review, #8a6d00);
    background: rgba(249,200,81,.07);
}

/* ── Justification drawer scrim ── */
.tc-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(0,0,0,.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.tc-drawer__scrim.show { opacity: 1; pointer-events: auto; }

/* ── Justification drawer panel ── */
.tc-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 480px; max-width: 92vw;
    height: 100vh; height: 100dvh;
    z-index: 1045;
    background: var(--ct-card-bg, #fff);
    border-left: 1px solid var(--tc-budget-border, #e2e7ee);
    box-shadow: var(--tc-budget-elev, 0 2px 8px rgba(49,58,70,.10));
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease-out;
}
.tc-drawer.show { transform: translateX(0); }
.tc-drawer__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--tc-budget-border, #e2e7ee);
    flex-shrink: 0;
}
.tc-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}
.tc-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--tc-budget-border, #e2e7ee);
    flex-shrink: 0;
}
.tc-drawer__prong .tc-just-prong-label { margin-bottom: .3rem; }

/* ≤991px: full-height bottom sheet */
@media (max-width: 991.98px) {
    .tc-drawer {
        width: 100%;
        max-width: 100%;
        top: auto; bottom: 0;
        height: 85vh;
        border-left: none;
        border-top: 1px solid var(--tc-budget-border, #e2e7ee);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .tc-drawer.show { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-drawer, .tc-drawer__scrim, .tc-just-chip { transition: none; }
}

/* ─── Sprint 2: Budget sub-tab pill nav ──────────────────────────────────── */

.tc-budget-subtabs {
    /* Horizontal scroll at <768px — never wraps */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tc-budget-subtabs::-webkit-scrollbar { display: none; }

.tc-budget-subtabs .nav-pills {
    gap: .375rem;
    white-space: nowrap;
    padding-bottom: 2px; /* room for active indicator shadow */
}

.tc-budget-subtabs .nav-link {
    font-size: .8125rem;   /* 13px */
    font-weight: 500;
    padding: .35rem .85rem;
    border-radius: 20px;
    white-space: nowrap;
    color: var(--ct-menu-item-color, #6c757d);
    background: transparent;
    border: 1px solid transparent;
    min-height: 36px; /* 44px on mobile via @media below */
}

.tc-budget-subtabs .nav-link:hover:not(.active) {
    background: var(--ct-light, #f8fafc);
    border-color: var(--tc-budget-hairline, #e7ebf1);
}

.tc-budget-subtabs .nav-link.active {
    background: var(--bs-primary, #6658dd);
    color: #fff;
    border-color: var(--bs-primary, #6658dd);
    box-shadow: 0 2px 6px rgba(102, 88, 221, .25);
}

/* ─── Sprint 2: Budget activity × visit matrix ───────────────────────────── */

.tc-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.tc-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px; /* guarantees horizontal scroll kicks in before layout breaks */
}

/* Frozen first column */
.tc-matrix-frozen {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ct-card-bg, #fff);
    border-right: 1px solid var(--tc-budget-hairline, #e7ebf1);
    min-width: 200px;
    max-width: 260px;
}

.tc-matrix-frozen--head {
    z-index: 3; /* above data rows when scrolled */
}

/* Group header row for SoaTable name */
.tc-matrix-soa-group {
    background: var(--ct-light, #f8fafc);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tc-just-none, #8a92a0);
    border-bottom: 1px solid var(--tc-budget-hairline, #e7ebf1);
    white-space: nowrap;
    padding: .25rem .5rem;
}

.tc-matrix-soa-group--sub {
    color: var(--bs-warning, #f9bc0b);
}

/* Visit label header */
.tc-matrix-visit-label {
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    padding: .25rem .375rem;
}

/* Inline visit-label editor (Draft only) — reads like the plain header until focused */
.tc-matrix-label-input {
    width: 100%;
    max-width: 68px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
    padding: 1px 2px;
}
.tc-matrix-label-input:hover { border-color: #dee2e6; background: #fff; }
.tc-matrix-label-input:focus { outline: none; border-color: #727cf5; background: #fff; box-shadow: 0 0 0 2px rgba(114,124,245,.12); }

/* Individual fire-count cell */
.tc-matrix-cell {
    min-width: 48px;
    text-align: center;
    color: var(--tc-just-none, #8a92a0);
    font-size: .8125rem;
}

.tc-matrix-cell--active {
    color: var(--bs-primary, #6658dd);
    font-weight: 600;
}

/* Activity description (truncate long names) */
.tc-matrix-desc {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8125rem;
}

/* Footer row */
.tc-matrix-foot td {
    border-top: 2px solid var(--tc-budget-hairline, #e7ebf1);
    background: var(--ct-light, #f8fafc);
}

/* Head rows */
.tc-matrix-head-group th,
.tc-matrix-head-visits th {
    background: var(--ct-light, #f8fafc);
    position: sticky;
}

.tc-matrix-head-group th  { top: 0; z-index: 3; }
.tc-matrix-head-visits th { top: 1.625rem; z-index: 3; }

/* Matrix blocked on phone — show nudge */
@media (max-width: 767.98px) {
    .tc-budget-subtabs .nav-link { min-height: 44px; padding: .5rem .85rem; }

    .tc-matrix-wrap::after {
        content: 'Rotate to landscape for the visit matrix';
        display: block;
        text-align: center;
        font-size: .75rem;
        color: var(--tc-just-none, #8a92a0);
        padding: .5rem 0 0;
    }
}

@media (max-width: 991.98px) {
    .tc-matrix-frozen { min-width: 140px; max-width: 180px; }
    .tc-matrix-desc   { max-width: 170px; }
}

/* ─── Sprint 3 #4: Per-line negotiation counter ──────────────────────────── */

.tc-negoti-table td, .tc-negoti-table th {
    vertical-align: middle;
}

/* Delta directional chip */
.tc-negoti-delta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.tc-negoti-delta--up   { color: var(--tc-success, #0acf97); }
.tc-negoti-delta--down { color: var(--bs-danger, #fa5c7c); }

/* Tiny action buttons (Accept / Counter / Reject) */
.tc-negoti-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--tc-budget-hairline, #e7ebf1);
    background: var(--ct-card-bg, #fff);
    color: var(--tc-just-none, #8a92a0);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tc-negoti-action-btn:hover {
    background: var(--ct-light, #f8fafc);
    color: var(--ct-menu-item-color, #313a46);
}
.tc-negoti-action-btn:disabled { opacity: .45; cursor: not-allowed; }

.tc-negoti-action-btn--counter:hover {
    border-color: var(--bs-warning, #f9bc0b);
    color: var(--bs-warning, #f9bc0b);
}
.tc-negoti-action-btn--reject:hover {
    border-color: var(--bs-danger, #fa5c7c);
    color: var(--bs-danger, #fa5c7c);
}

/* Scorecard badge */
.tc-negoti-scorecard {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}
.tc-negoti-scorecard__count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-primary, #6658dd);
    line-height: 1;
}
.tc-negoti-scorecard__label {
    font-size: .75rem;
    color: var(--tc-just-none, #8a92a0);
}

/* ─── Negotiation tab restructure: workspace scroll + meta list + subline ── */

.tc-negoti-scroll { max-height: 24rem; overflow-y: auto; }
@media (max-width: 992px){ .tc-negoti-scroll { max-height: 18rem; } }

.tc-negoti-subline { font-size:.6875rem; color: var(--bs-secondary-color); margin-top:1px; }

/* ─── Sprint 3 #6: Sponsor intelligence aside card ───────────────────────── */

.tc-sponsor-intel {
    border-top: 1px solid var(--tc-budget-hairline, #e7ebf1);
    padding-top: 1rem !important;
}

@media (max-width: 767.98px) {
    .tc-negoti-scorecard { align-items: flex-start; }
}

/* ─── Negotiation tab v2 ──────────────────────────────────────────────────── */

.tc-negoti-card .card-body { padding: 1.5rem; }
.tc-negoti-card .card-title { margin-bottom: 1rem; }
.tc-negoti-summary { margin: 0; }
.tc-negoti-summary__row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--tc-budget-hairline,#e7ebf1); line-height:1.5; }
.tc-negoti-summary__row:last-child { border-bottom:0; }
.tc-negoti-summary__k { flex:0 0 auto; font-size:.8125rem; font-weight:500; color:var(--bs-secondary-color); letter-spacing:.01em; }
.tc-negoti-summary__v { text-align:right; font-size:.9375rem; font-weight:600; color:var(--bs-body-color); line-height:1.45; }
@media (max-width:575.98px){ .tc-negoti-summary__row{ flex-direction:column; align-items:flex-start; gap:.15rem; padding:.55rem 0; } .tc-negoti-summary__v{ text-align:left; } }

.tc-negoti-intel .card-body { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.25rem; padding:.85rem 1.25rem; }
.tc-negoti-intel__sep { width:1px; align-self:stretch; background:var(--tc-budget-hairline,#e7ebf1); }

.tc-log-views.show-lines .tc-view-lines { display:block; animation:tcFade .2s ease-out; }
.tc-log-views.show-history .tc-view-history { display:block; animation:tcFade .2s ease-out; }

@media (prefers-reduced-motion:reduce){
    .tc-log-views.show-lines .tc-view-lines,
    .tc-log-views.show-history .tc-view-history { animation:none; }
}

/* Local Clinical Trials scan card — cog-swap: criteria ↔ results (reuses .tc-log-views machinery). */
.tc-log-views.show-scancriteria .tc-view-scancriteria { display:block; animation:tcFade .2s ease-out; }
.tc-log-views.show-scanresults .tc-view-scanresults { display:block; animation:tcFade .2s ease-out; }

@media (prefers-reduced-motion:reduce){
    .tc-log-views.show-scancriteria .tc-view-scancriteria,
    .tc-log-views.show-scanresults .tc-view-scanresults { animation:none; }
}

/* ── Budget journey rail — 4-step start-to-finish guide above the detail tabs ──
   One step is "current" (accented dot + hint + the ONE next-action button); done
   steps collapse to a green check + title; upcoming steps sit muted. Wraps to a
   vertical list on small screens (no fixed heights). */
.tc-journey { border: 1px solid var(--tc-budget-border, #e2e7ee); box-shadow: none; }
.tc-journey__track { display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.tc-journey__step { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; flex: 1 1 160px; }
.tc-journey__dot {
    flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    background: #f1f3f7; color: #8a92a0;
    border: 1px solid var(--tc-budget-border, #e2e7ee);
}
.tc-journey__title { font-size: .8125rem; font-weight: 600; color: #8a92a0; line-height: 1.5rem; }
.tc-journey__hint { font-size: .75rem; color: #6c757d; max-width: 340px; }
.tc-journey__sep { flex: 0 1 24px; border-top: 2px solid var(--tc-budget-border, #e2e7ee); margin-top: .75rem; min-width: 12px; }
.tc-journey__step--current .tc-journey__dot { background: #727cf5; border-color: #727cf5; color: #fff; }
.tc-journey__step--current .tc-journey__title { color: var(--ct-body-color, #313a46); }
.tc-journey__step--done .tc-journey__dot { background: #e6f7ef; border-color: #0acf97; color: #0acf97; }
.tc-journey__step--done .tc-journey__title { color: #0acf97; }
@media (max-width: 767.98px) {
    .tc-journey__track { flex-direction: column; gap: .4rem; }
    .tc-journey__sep { display: none; }
    .tc-journey__step { flex-basis: auto; }
}

/* ─── Centralized tab sizing (2026-07-02) ─────────────────────────────────────
   ONE compact scale for every page tab strip in the backoffice, modeled on the
   dashboard tabs (.tc-detail-tabs): tab height, text size and icon size only —
   each strip keeps its own colour / underline / pill treatment. Placed last so
   it wins on source order over the per-strip base rules above. */
.nav-tabs .nav-link,
.nav-pills .nav-link,
.tc-pill-tabs .nav-link,
.tc-budget-subtabs .nav-link {
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .9rem;
    line-height: 1.2;
}
.nav-tabs .nav-link i,   .nav-tabs .nav-link .ti,
.nav-pills .nav-link i,  .nav-pills .nav-link .ti,
.tc-pill-tabs .nav-link i,     .tc-pill-tabs .nav-link .ti,
.tc-budget-subtabs .nav-link i, .tc-budget-subtabs .nav-link .ti {
    font-size: 1em;          /* icon tracks the tab text — matches the dashboard tabs */
    vertical-align: baseline;
}

/* ── Campaign editor tabs: RETIRED 2026-07-22 ──
   .tc-editor-tabs was a second, parallel implementation of the same never-wrap /
   horizontal-scroll concept as the dashboard strip. Both are now the shared
   .tc-tabs--scroll variant (TcTabStrip AlwaysScrollable="true") at the end of
   this file. Do not reintroduce a per-page scroll rule. */

/* red validation dot on a tab label */
.tc-tab-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #dc3545;                 /* Bootstrap danger */
    box-shadow: 0 0 0 2px rgba(220,53,69,.18);
    vertical-align: middle;
}

/* selected-count badge shown on the Audience tab label */
.tc-tab-count {
    background: #3b5de7;
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: .12rem .4rem;
    border-radius: 10px;
    vertical-align: middle;
}

/* AI Generate — primary-soft assist button */
.tc-btn-ai {
    color: #3b5de7;
    background: rgba(59,93,231,.10);
    border: 1px solid rgba(59,93,231,.22);
    font-weight: 600;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tc-btn-ai:hover:not(:disabled) {
    background: rgba(59,93,231,.16);
    color: #2f4bd0;
    box-shadow: 0 2px 6px rgba(59,93,231,.22);
}
.tc-btn-ai:disabled { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .tc-btn-ai { transition: none; } }

/* Audience picker table: no inner scroll — a full 30-row page shows; the pager moves through the set */
.tc-audience-table-wrap {
    border: 1px solid #e3e6ea;
    border-radius: 8px;
}
.tc-audience-table-wrap thead th {
    background: #f8f9fb;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}
.tc-row-selected { background: rgba(59,93,231,.06) !important; }

/* Engagement row tints — ContactedLeadsTable (sweep details + campaign Results tab).
   Ladder: pale yellow = opened the link; pale green = replied / conversation started;
   stronger green = applied to a study after the message (converted). On td (not tr)
   so the tint survives Bootstrap's table backgrounds and the ≤575px stacked-card mode. */
.tc-detail-table tr.tc-row-opened > td    { background-color: #fff8e1; }
.tc-detail-table tr.tc-row-engaged > td   { background-color: #e9f7ef; }
.tc-detail-table tr.tc-row-converted > td { background-color: #d2f0de; }

/* Legend swatches above the contacted-leads table */
.tc-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    vertical-align: -1px;
}
.tc-legend-dot--opened    { background: #fff8e1; border: 1px solid #e6d491; }
.tc-legend-dot--engaged   { background: #e9f7ef; border: 1px solid #aedcbd; }
.tc-legend-dot--converted { background: #d2f0de; border: 1px solid #86cfa4; }

/* Recurrency field-group mini header */
.tc-field-group-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .35rem;
}

/* Live Preview roomier email frame (full-tab context) */
.tc-email-preview--roomy { max-height: 70vh; }

/* Audience status-filter chips — visual parity with the Leads page's MudChip-based
   .tc-filter-chip without the MudBlazor dependency (this page is pure Zircos/Bootstrap).
   Colors match .tc-filter-chip.mud-chip-color-warning/error/success exactly; "All" uses
   this page's own brand-blue accent (matches .tc-btn-ai / .tc-tab-count) rather than the
   Leads page's KPI-specific purple. */
.tc-aud-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 .65rem;
    border-radius: 13px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    background: #f0f0f0;
    color: #444;
    border: 1px solid rgba(0,0,0,.1);
    transition: opacity .15s ease;
}
.tc-aud-chip:hover { opacity: .85; }
.tc-aud-chip--all.active {
    background: #3b5de7;
    color: #fff;
    border-color: #3b5de7;
}
.tc-aud-chip--warning.active {
    background: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}
.tc-aud-chip--error.active {
    background: #f8d7da;
    color: #842029;
    border-color: #dc3545;
}
.tc-aud-chip--success.active {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #198754;
}
@media (prefers-reduced-motion: reduce) { .tc-aud-chip { transition: none; } }

/* Campaign editor (New/Edit, all tabs): read-only inputs read as disabled — muted (low opacity),
   no blue focus ring — but stay selectable/copyable (readonly, not disabled). Scoped so it never
   touches editable fields (Custom-destination URL loses [readonly] → renders normal) or other pages. */
.tc-campaign-editor .form-control[readonly] {
    opacity: 0.5;
    cursor: default;
    -webkit-user-select: text;
    user-select: text;
}
.tc-campaign-editor .form-control[readonly]:focus {
    box-shadow: none;
    outline: none;
    border-color: #ced4da;
}

/* ── Local Clinical Trials page ───────────────────────────────────────────── */
.tc-local-trials { min-width: 0; padding-bottom: 2.5rem; }

/* Section divider inside info-card bodies (form steps + leaderboard groups).
   Generous top spacing so stacked groups (e.g. Hottest vs Coldest ZIPs) read
   as clearly separate blocks, not one run-on list. */
.tc-section {
    padding-top: 1.5rem;
    margin-top: 1.75rem;
    border-top: 1px solid #eef0f5;
}
.tc-section:first-of-type {
    padding-top: 0;
    margin-top: .25rem;
    border-top: 0;
}
.tc-section__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9aa0ac;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
}

/* Scan-form group separator (Search by / Search location / Trial status) — same spirit
   as .tc-section, tuned for the tighter form-group rhythm inside the scan card. */
.tc-scan-group {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid #eef0f5;
}
.tc-scan-group:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

/* Divider between the Lead Geography column and the scan-form column, now that both
   live inside one merged card (row g-4). Mobile: hairline above the form once it
   stacks under geography. lg+: hairline to the form column's left instead. */
.tc-scan-split {
    border-top: 1px solid #eef0f5;
    padding-top: 1.25rem;
}
@media (min-width: 992px) {
    .tc-scan-split {
        border-top: 0;
        padding-top: 0;
        border-left: 1px solid #eef0f5;
        padding-left: 2.75rem;
    }
    /* Matching air on the geography side so both areas breathe off the divider. */
    .tc-scan-left { padding-right: 2.75rem; }
}
/* Breathing room between the geography column's subtitle and its first ZIP group. */
.tc-scan-left .tc-section:first-of-type {
    margin-top: 1.25rem;
}

/* The merged scan card breathes top and bottom — content shouldn't hug the
   header bar or the card's bottom edge. */
.tc-local-trials .tc-info-card > .card-body {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
}

/* Matching Studies columns: Start (7th) never wraps — dates stay one line and
   the column widens to fit; Enrollment goal (6th) shrinks to its content. */
.tc-view-scanresults .tc-leads-grid th:nth-child(7),
.tc-view-scanresults .tc-leads-grid td:nth-child(7) { white-space: nowrap; }
.tc-view-scanresults .tc-leads-grid th:nth-child(6) { width: 1%; }
.tc-view-scanresults .tc-leads-grid td:nth-child(6) { white-space: nowrap; }

/* Clickable ZIP leaderboard row — hover/focus/selected affordance.
   fs matches the house table size (13px) so the lists read like every
   other admin grid, not oversized body text. */
.tc-zip-row {
    cursor: pointer;
    border-radius: .375rem;
    padding: .4rem .5rem !important;
    font-size: .8125rem;
    transition: background-color .12s ease, box-shadow .12s ease;
}
/* Trial-status switch labels — same 13px as the rest of the form/tables. */
.tc-local-trials .tc-scan-group .form-check-label {
    font-size: .8125rem;
}
.tc-zip-row:hover { background: #f7f8fc; }
.tc-zip-row:focus-visible {
    outline: 2px solid var(--ct-primary, #6571ff);
    outline-offset: -2px;
}
/* Persistent highlight on the ZIP currently centering the scan form (set from the
   popup's "Center local scan here" action) — the click's visible "it did something"
   cue on the far-left column. Renamed from .tc-zip-row.active — Bootstrap's own
   .list-group-item.active hijacked that class (blue border + washed-out text). */
.tc-zip-row--selected {
    background: rgba(var(--ct-primary-rgb, 101,113,255), .07);
    box-shadow: inset 3px 0 0 var(--ct-primary, #6571ff);
}

/* Clinic-ZIP selector chips in the scan form. */
.tc-zip-chip {
    border-radius: 999px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* One-shot pulse on the ZIP input when a leaderboard ZIP is loaded into it,
   so the eye catches the update on the opposite column. */
.tc-zip-flash { animation: tcZipFlash 1s ease; }
@keyframes tcZipFlash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ct-primary-rgb, 101,113,255), .45); }
    100% { box-shadow: 0 0 0 6px rgba(var(--ct-primary-rgb, 101,113,255), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-zip-row { transition: none; }
    .tc-zip-flash { animation: none; }
}

/* ══════════════════════════ Site Management — Organization ══════════════════════════
   Role rows: label + wrapping removable chips + an add-person picker, all on one row
   that wraps naturally on narrow viewports (no fixed heights). */
.tc-org-role-row {
    padding: .6rem 0;
    border-bottom: 1px solid #eef0f5;
}
.tc-org-role-row:last-child { border-bottom: none; }

.tc-org-role-label {
    font-weight: 600;
    font-size: .8125rem;
    min-width: 160px;
    flex: 0 0 auto;
}

.tc-org-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(var(--ct-primary-rgb, 101,113,255), .08);
    color: var(--ct-primary, #6571ff);
    border-radius: 999px;
    padding: .2rem .5rem .2rem .7rem;
    font-size: .75rem;
    font-weight: 600;
}

/* Missing Email + Phone — escalations can't reach this person (see project_screening... /
   SITE-MANAGEMENT-ESCALATION-SPEC §9.2). */
.tc-org-chip--warn {
    background: #fff3cd;
    color: #7a5b00;
}

.tc-org-chip-link {
    color: inherit;
    text-decoration: none;
}
.tc-org-chip-link:hover { text-decoration: underline; }

.tc-org-chip-x {
    border: none;
    background: transparent;
    color: inherit;
    opacity: .6;
    line-height: 1;
    padding: 0;
    font-size: .95rem;
}
.tc-org-chip-x:hover { opacity: 1; }

.tc-org-add-row {
    flex: 0 0 auto;
    max-width: 100%;
}
.tc-org-add-row .form-select { min-width: 160px; }

@media (max-width: 575.98px) {
    .tc-org-role-row { flex-direction: column; align-items: stretch !important; }
    .tc-org-add-row { width: 100%; }
    .tc-org-add-row .form-select { flex: 1 1 auto; }
}

/* ══════════════════════════ Site Management — Escalation Workflows ══════════════════
   Each step is a vertically-stacked block (card-width columns are too narrow for a table) —
   Delay / Channel / Target on their own line each, separated by a subtle divider. */
.tc-esc-step-block {
    padding: .6rem 0;
    border-bottom: 1px dashed #e5e7f0;
}
.tc-esc-step-block:last-child { border-bottom: none; padding-bottom: 0; }

.tc-esc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--ct-primary-rgb, 101,113,255), .12);
    color: var(--ct-primary, #6571ff);
    font-size: .7rem;
    font-weight: 700;
}

.tc-esc-reorder-btn {
    padding: 0 .25rem;
}

/* ══════════════════════════ AI Regulatory & Compliance Audit Module — Correction Panel ═══════════════
   02c BEFORE/AFTER reference: red-bordered AS-FOUND vs green-bordered PROPOSED, numbered
   WHY-IT-FLAGS / WHY-IT-PASSES explainer lists beneath each side. */
.tc-audit-finding-row--done { opacity: .55; }

.tc-audit-side {
    height: 100%;
    border-radius: .375rem;
    overflow: hidden;
}
.tc-audit-side-fail { border: 2px solid var(--bs-danger, #fa5c7c); }
.tc-audit-side-pass { border: 2px solid var(--bs-success, #0acf97); }

.tc-audit-side-header {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .45rem .75rem;
}
.tc-audit-side-fail > .tc-audit-side-header { background: rgba(250,92,124,.1); color: var(--bs-danger, #fa5c7c); }
.tc-audit-side-pass > .tc-audit-side-header { background: rgba(10,207,151,.1); color: var(--bs-success, #0acf97); }

.tc-audit-side-body { padding: .75rem; }

/* Responsive, uniformly-scaled image — pin left/top % map 1:1 to the natural-pixel-size percentage. */
.tc-audit-image-wrap {
    position: relative;
    display: block;
    width: 100%;
    background: #f8f9fa;
    border-radius: .25rem;
    overflow: hidden;
}
.tc-audit-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.tc-audit-pin {
    position: absolute;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--bs-danger, #fa5c7c);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.45);
    pointer-events: none;
}

.tc-audit-kept {
    font-style: italic;
    border-top: 1px dashed #e5e7f0;
    padding-top: .4rem;
    margin-top: .25rem;
}

/* ── Sidebar width ─────────────────────────────────────────────────────────────
   Expanded main-menu width: theme default 235px + 15px (Marcos 2026-07-13).
   MUST stay on :root — the theme defines the var on :root, which outranks a plain
   `html` selector; app.css loads after the theme, so equal specificity wins.
   Overrides the Zircos --ct-sidenav-width var (vendor css untouched); the content
   margin uses the same var, so the page area shifts with it. Condensed mode uses
   --ct-sidenav-width-sm and is unaffected. */
:root {
    --ct-sidenav-width: 250px;
}

/* Leads page: Subject cell links to the patient profile (row click still opens the lead). */
.tc-subject-link:hover {
    text-decoration: underline !important;
}

/* ═══ Shared tab strip (TcTabStrip) ═══════════════════════════════════════════
   ONE wall for tab-strip BEHAVIOR: sticky pin, never-wrap, mobile swipe.
   Supersedes .tc-dashboard-tabs-wrap (id-coupled to #dashboard-tab) and
   .tc-editor-tabs — do not reintroduce either. The LOOK still comes from
   .tc-detail-tabs; this block only owns position / overflow / background.

   Placed at the END of the file on purpose: the centralized tab sizing block
   (`.nav-tabs .nav-link`, ~line 7050) is (0,2,0) and would otherwise beat the
   mobile compaction on source order. See the specificity note below. */
.tc-tabs {
    position: sticky;
    top: calc(var(--tc-tabs-top) + var(--tc-tabs-offset, 0px));
    z-index: 98;                       /* < topbar 1000 < drawers 1046 < modals 1055 */
    background: var(--tc-tabs-bg);
    margin: 0 calc(var(--tc-tabs-bleed, 12px) * -1);
    padding: 0 var(--tc-tabs-bleed, 12px);
}

.tc-tabs--static { position: static; }
.tc-tabs--card   { --tc-tabs-bg: var(--tc-surface-card); --tc-tabs-bleed: 0px; }

/* Always-scrollable variant (supersedes .tc-editor-tabs) — for strips with enough
   tabs to overflow a DESKTOP viewport, not just a phone. */
.tc-tabs--scroll .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tc-tabs--scroll .nav-tabs::-webkit-scrollbar { display: none; }
.tc-tabs--scroll .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* ── Tab states — extends .tc-detail-tabs, does not replace the look ── */
.tc-detail-tabs .nav-link {
    color: var(--tc-ink-muted);
    border-bottom: var(--tc-tabs-rule) solid transparent;
    /* Keep the 2px rule flush with the strip's own bottom border (Bootstrap
       compensates for a 1px border by default). */
    margin-bottom: calc(-1 * var(--tc-tabs-rule));
    border-radius: var(--tc-radius-tab);
    transition: color var(--tc-dur) var(--tc-ease),
                background-color var(--tc-dur) var(--tc-ease);
}

.tc-detail-tabs .nav-link:hover {
    color: var(--tc-ink);
    background-color: var(--tc-tabs-hover-bg);
}

.tc-detail-tabs .nav-link.active {
    color: var(--tc-accent);
    font-weight: 600;
    /* 2px, not 1px — a 1px underline loses against a full-width table below. */
    border-bottom: var(--tc-tabs-rule) solid var(--tc-accent);
}

/* ADA (WCAG 2.4.7): no visible focus indicator existed on any tab strip before 2026-07-22.
   !important is REQUIRED here, not laziness — Zircos app.min.css ships a blanket
   `button { outline: 0 !important; }`, and an !important vendor declaration can only be
   beaten by !important at >= specificity. Specificity alone silently loses: the rule
   matches, outline-offset applies, and outline-width/style are still zeroed.
   ⚠️ That vendor reset also means NO button anywhere else in the backoffice shows a
   focus ring — a separate, pre-existing, app-wide finding. Not fixed here. */
.tc-detail-tabs .nav-link:focus-visible {
    outline: 2px solid var(--tc-accent) !important;
    outline-offset: -2px;
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .tc-tabs { box-shadow: 0 2px 6px rgba(0,0,0,.09); }

    .tc-tabs .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 1px;
        /* Swipe lands on a tab edge rather than mid-label. */
        scroll-snap-type: x proximity;
        scroll-padding-inline-start: var(--ct-card-spacer-x, 1.5rem);
    }
    .tc-tabs .nav-tabs::-webkit-scrollbar { display: none; }

    /* (0,3,0) — MUST out-specify `.nav-tabs .nav-link` (0,2,0) in the centralized
       sizing block above, which is otherwise later in source order. This is exactly
       what the retired #dashboard-tab ID selector was silently buying us; a plain
       `.tc-tabs .nav-link` would compile, render, and lose here in total silence. */
    .tc-tabs .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .8rem;
        padding: .45rem .7rem;
        scroll-snap-align: start;
    }

    /* Gradient edge fade — hints at hidden tabs on either side */
    .tc-tabs::before,
    .tc-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 4px;                   /* stop above the border line */
        width: var(--tc-tabs-fade);
        pointer-events: none;
        z-index: 2;
    }
    .tc-tabs::before {
        left: 0;
        background: linear-gradient(to right, var(--tc-tabs-bg) 20%, transparent);
    }
    .tc-tabs::after {
        right: 0;
        background: linear-gradient(to left, var(--tc-tabs-bg) 20%, transparent);
    }

    /* Pane slide. The hook is the EXISTING .tc-detail-tab-content class (already on
       15 pages), so no markup change is needed to opt in. */
    .tc-detail-tab-content[data-slide-dir] .tab-pane.fade.show.active {
        animation-duration: .2s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }
    .tc-detail-tab-content[data-slide-dir="1"] .tab-pane.fade.show.active {
        animation-name: tc-tab-slide-from-right;
    }
    .tc-detail-tab-content[data-slide-dir="-1"] .tab-pane.fade.show.active {
        animation-name: tc-tab-slide-from-left;
    }
}

/* ADA: motion is decorative here — never animate panes for users who opted out. */
@media (prefers-reduced-motion: reduce) {
    .tc-detail-tab-content[data-slide-dir] .tab-pane.fade.show.active {
        animation: none;
    }
}

/* ═══ Card top breathing room ═════════════════════════════════════════════
   +10px on top of the card's own padding. Now that the page-level h4 is
   gone, the card title IS the page title, so it needs air above it rather
   than sitting tight against the card edge.

   Scoped to :first-child deliberately — a .card-body that FOLLOWS a
   .card-header (e.g. .tc-info-card's uppercase header bar) is already
   separated from what's above it; adding padding there just opens a gap.

   KPI tiles (.tc-kpi-card) are excluded: they carry a short label + a big
   number, not a page title, and they're height-matched in a row — extra
   top padding just makes them tall and loose. */
:root {
    --tc-card-pad-top-extra: 10px;
}

.card:not(.tc-kpi-card) > .card-body:first-child {
    padding-top: calc(var(--ct-card-spacer-y, 1.5rem) + var(--tc-card-pad-top-extra));
}

/* ═══ Front Desk Efficiency — 3-zone score bar (Marcos 2026-08-10) ═══════════
   Fixed-width flex segments (red 0-49 / orange 50-79 / green 80-100) with an
   absolutely-positioned triangle marker at left:{score}%. Pure CSS, no chart
   lib — this is a single number on a fixed scale, not a data series. */
.tc-frontdesk-scorebar {
    position: relative;
    margin-bottom: 4px;
    /* Reserved band for the marker (value + pin ≈ 23px). Without it the marker's
       negative offset bleeds into whatever text sits above the bar. */
    padding-top: 24px;
}

.tc-frontdesk-scorebar-track {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
}

.tc-frontdesk-zone {
    height: 100%;
}
.tc-frontdesk-zone--red    { flex: 0 0 49%; background: var(--bs-danger, #fa5c7c); }
.tc-frontdesk-zone--orange { flex: 0 0 30%; background: var(--bs-warning, #f9bc0b); }
.tc-frontdesk-zone--green  { flex: 0 0 21%; background: var(--tc-success, #0acf97); }

/* Marker sits ABOVE the track so its point can overlap it; left is set inline
   per-score. translateX(-50%) centers the marker tip on the score position;
   clamped in C# to 2%..98% so it never clips off either edge of the card. */
.tc-frontdesk-marker {
    position: absolute;
    top: 0; /* inside the scorebar's reserved padding band — never overlaps the header text */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left .4s ease;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .tc-frontdesk-marker { transition: none; }
}

.tc-frontdesk-marker-value {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--ct-menu-item-color, #313a46);
}

.tc-frontdesk-marker-pin {
    width: 0;
    height: 0;
    margin-top: 2px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--ct-menu-item-color, #313a46);
}

.tc-frontdesk-zone-labels {
    display: flex;
    justify-content: space-between;
    font-size: .6875rem;
    color: var(--ct-body-color-secondary, #8a92a0);
    margin-top: 2px;
}

/* Under ~480px the three labels wrap into a ragged mess against the score
   marker above them — hide the labels there and keep the bar + score number,
   which already carry the meaning on a phone-width card. */
@media (max-width: 479.98px) {
    .tc-frontdesk-zone-labels { display: none; }
}

/* ═══ Front Desk Efficiency — transfer status chips ══════════════════════════ */
.tc-frontdesk-status {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}
.tc-frontdesk-status--connected   { background: rgba(10, 207, 151, .14);  color: var(--tc-success, #0acf97); }
.tc-frontdesk-status--rescheduled { background: rgba(249, 188, 11, .16);  color: var(--bs-warning, #f9bc0b); }
.tc-frontdesk-status--cancelled   { background: rgba(138, 146, 160, .16); color: var(--ct-body-color-secondary, #8a92a0); }
.tc-frontdesk-status--failed      { background: rgba(250, 92, 124, .14);  color: var(--bs-danger, #fa5c7c); }

/* ═══ Front Desk Efficiency — desk-caused unreachable groups ═════════════════ */
.tc-frontdesk-unreach-row {
    border-radius: 6px;
    padding: .375rem .5rem;
    margin-bottom: 2px;
}
.tc-frontdesk-unreach-row--optout    { background: rgba(250, 92, 124, .08); }
.tc-frontdesk-unreach-row--transfer  { background: rgba(249, 188, 11, .08); }

/* ═══ Front Desk — mini KPI tiles (Clinic Customer Service Performance card, Marcos round 2) ═══
   Same visual DNA as the dashboard's top-level .tc-kpi-card tiles — uppercase muted label + bold
   value + colored icon chip, reusing .tc-kpi-icon/.tc-kpi-icon--sm verbatim — but FLATTER, with no
   border/shadow of its own: these nest inside a card that already carries one, so a second shadowed
   box would read as a card-in-a-card. Fills the card's body with .flex-grow-1 on the wrapper in the
   markup rather than a fixed height here, so it centers in whatever vertical space is left instead
   of pooling as blank space at the bottom. */
.tc-frontdesk-mini-kpi {
    border-radius: 10px;
    background: var(--ct-light, #f8fafc);
    padding: .85rem 1rem;
    /* Marcos round 4: ALL tiles — the hero (col-12, its own row) and the 2x2 grid below it — share this
       floor so the hero reads as "one tile wide as the row" rather than a taller banner. Min, not fixed:
       a tile with more content (e.g. the Waiting-on-desk "oldest Xh" subtext) can still grow past it. */
    min-height: 76px;
}
/* Equal heights only where tiles sit side by side in a grid column. A blanket height:100% here made
   the hero tile stretch to fill the whole grown flex wrapper — a giant tile of dead space. */
[class*="col-"] > .tc-frontdesk-mini-kpi {
    height: 100%;
}
.tc-frontdesk-mini-kpi--hero {
    background: rgba(24, 138, 226, .06);
}
.tc-frontdesk-mini-kpi--danger {
    background: rgba(250, 92, 124, .09);
}
.tc-frontdesk-mini-kpi .tc-mini-kpi-label {
    font-size: .6875rem;
    letter-spacing: .03em;
    line-height: 1.2;
}
.tc-frontdesk-mini-kpi .tc-mini-kpi-value {
    font-size: 1.375rem;
    line-height: 1.2;
}
/* ── Meta Ads wizard: creative media picker (FacebookInstagramCampaigns.razor, step 1) ──────────
   Thumbnail grid — "None (text link ad)" tile plus one tile per ready image/video from
   AdMediaCatalog. Selected ring uses the same primary-color convention as everything else in the
   backoffice; no new tokens introduced. */
.tc-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tc-media-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    padding: 6px;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}

.tc-media-choice img,
.tc-media-choice video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(.5rem - 2px);
}

.tc-media-choice__none {
    font-size: 1.5rem;
    color: #adb5bd;
}

.tc-media-choice__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    font-size: 10px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    padding: 2px 4px;
}

.tc-media-choice__aspect {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    font-size: 9px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    padding: 1px 4px;
    border-radius: .25rem;
}

.tc-media-choice.is-selected {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .25);
}
/* .tc-media-grid / .tc-media-choice* above are ORPHANED as of 2026-08-13 -- CampaignAdsPage's
   Creative picker now reuses the Media Generator's Creations-list rows (.tc-crea-row, defined earlier
   in this file) instead of this tile grid, so the whole app has ONE picker/list visual language. Left
   in place rather than deleted (another agent editing this file concurrently) -- safe to remove once
   confirmed unused. */

/* Ad Creative media picker (CampaignAdsPage.razor "Creative" section, 2026-08-13) -- reuses the Media
   Generator's Creations-list row look (.tc-crea-row et al) but the rows are real <button> elements
   here (whole-row click, no separate thumb/body onclick needed), so this block only resets default
   button chrome + adds the selected-ring state. */
button.tc-crea-row {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.tc-crea-row.is-selected {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .25);
}
.tc-media-none .tc-crea-row__title { font-weight: 600; }

/* Search + All/Images/Videos segmented filter sit on one line above the list; the segmented control
   (.tc-log-switch, the house segmented-pill idiom borrowed from the Logs view switcher) never shrinks
   below its content so the search box is the one that gives up width first on narrow panels. */
.tc-crea-search .tc-log-switch { flex-shrink: 0; }

/* ═══ Meta Ads v2 — map-hero campaign page (meta-v2-design-spec.md §8) ═══════════════════════════
   "Meta shows you a spreadsheet of what you bought. We show you a map of who answered." One
   surface: the Leaflet map is the page background, the HUD/legend float on it as glass pills, and
   the auxiliary panel (KPIs → ad cards → collapsed campaign setup) is the only scrolling column.
   All classes below are new — nothing here overrides a Zircos/Bootstrap rule. */

.tc-ads-stage {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 128px);
    min-height: 560px;
}

.tc-ads-map {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: .75rem;
    overflow: hidden;
    background: #e9edf2;
    z-index: 0;
    /* Default clearance the config console (and its floating aside) reserve for the HUD sitting on
       top of it: 12px top offset + .5rem*2 v-padding (16px) + row1's 48px min-height = 76px, i.e.
       exactly the HUD's height when it renders ONLY row1. Bumped below via :has() when the HUD
       actually renders taller (row2 / error banner) so the console never starts underneath it. */
    --tc-ads-hud-h: 76px;
}

.tc-ads-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    /* Must beat Leaflet's internal panes (tiles z≈200, overlays 400, controls 1000) — at z:4 the
       tiles painted OVER the banner except mid-zoom. */
    z-index: 1100;
    display: flex;
    flex-wrap: wrap;
    padding: .5rem .85rem;
    /* .5rem = the house surface radius (tc-info-card, tc-ads-card, tc-ads-stat, console sections,
       and this same HUD's own mobile variant below). The old 1.25rem pill was the single roundest
       thing in the backoffice and read as a different product. */
    border-radius: .5rem;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

@supports not (backdrop-filter: blur(1px)) {
    .tc-ads-hud, .tc-ads-maplegend {
        background: rgba(255, 255, 255, .96);
    }
}

/* ── HUD row 1 (v3 polish) — the ONE row that must never wrap: back link, name, status chip, the
   live meta glance, then the primary action + icon buttons pinned right. __meta is the only item
   that grows, so it both fills the middle AND pushes the trailing buttons to the edge — no separate
   spacer element needed. */
.tc-ads-hud__row1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem .75rem;
    width: 100%;
    min-height: 48px;
}

.tc-ads-hud__meta {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Second row — ONLY for information the chip/meta line does not already carry: Draft's "not on
   Meta yet", the Deleted audit line, or LastError. A live/paused campaign has nothing to add here
   on purpose — the status chip + __meta already say it once. */
.tc-ads-hud__row2 {
    flex-basis: 100%;
    margin-top: .35rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: .35rem;
    font-size: 11px;
    color: #6c757d;
}

.tc-ads-hud__error {
    flex-basis: 100%;
}

.tc-ads-maplegend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1100; /* same Leaflet-pane stacking reason as .tc-ads-hud */
    max-width: 420px;
    border-radius: .5rem; /* house surface radius, same as the HUD it floats with */
    padding: .4rem .7rem;
    font-size: 11px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

/* Non-interactive ZIP-area legend entry — the dashed circle glyph gets a named legend row instead
   of relying on colour alone (🔴 ADA — colour is never the only signal). */
.tc-ads-maplegend__zip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .6rem;
    font-size: 11px;
    color: #495057;
}

.tc-ads-maplegend__zip-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    border: 1.5px dashed #6c8ff0;
    background: rgba(108, 143, 240, .12);
}

.tc-ads-maplegend__item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .6rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: 11px;
    color: #495057;
}

.tc-ads-maplegend__item[aria-pressed="true"] {
    font-weight: 700;
    color: #212529;
}

.tc-ads-maplegend__swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.tc-ads-maplegend__caption {
    display: block;
    margin-bottom: .3rem;
    font-size: 11px;
    color: #6b7280;
}

.tc-ads-mapnote {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 3;
    pointer-events: none;
}

.tc-ads-mapnote > div {
    pointer-events: auto;
    background: rgba(255, 255, 255, .92);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    max-width: 320px;
}

/* ═══ Config CONSOLE (v3) — the campaign details view; supersedes the stacked-card .tc-ads-config
   surface. The cog swaps the map for this console (no reduced map here — Marcos 2026-08-12); the
   HUD's map icon swaps back. The Leaflet div is only CSS-hidden (.tc-ads-mapdock gets d-none),
   never unmounted or recreated. */
.tc-ads-console {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    gap: 1rem;
    /* var(), not the literal 76px — see the HUD-clearance rule right below this block: the HUD
       (z:1100) floats ON TOP of this console, so its clearance must track the HUD's REAL height,
       not the shortest case. A hardcoded number here is exactly the bug: Draft/Deleted campaigns
       and a failed push all render a taller HUD than 76px, and this console's own savebar
       (Targeting title, Cancel/Save) plus the first section under it (the address input) render
       underneath it. */
    /* +18px on top of the HUD clearance — breathing room between the floating HUD and the
       console content (Marcos 2026-08-13). */
    padding: calc(var(--tc-ads-hud-h) + 18px) 1rem 1rem;
    background: #f7f8fb;
    overflow: hidden;
}

/* ── HUD-clearance — bump --tc-ads-hud-h when the HUD renders taller than its row1-only default.
   Desktop-only (mobile <992px statically stacks the HUD above the console instead of floating it,
   see the @media (max-width: 991.98px) block below, which fully overrides this console's padding
   and is unaffected by this variable). Route chosen (not raising the HUD's z-index further, not
   hiding it while the console is open): the HUD carries the campaign-level "Create paused campaign"
   action, which is a legitimate thing to reach for right after finishing Targeting — the console
   gets pushed down to clear it, the HUD is never covered or hidden. Heights are generous rounded
   estimates of the HUD's actual extra row(s) — a few px of extra breathing room under the savebar
   is harmless; undershooting reproduces the overlap bug. */
@media (min-width: 992px) {
    .tc-ads-map:has(.tc-ads-hud__row2),
    .tc-ads-map:has(.tc-ads-hud__error) {
        --tc-ads-hud-h: 108px;
    }
    .tc-ads-map:has(.tc-ads-hud__row2):has(.tc-ads-hud__error) {
        --tc-ads-hud-h: 140px;
    }
}

/* The nav column is a house CARD (white surface + hairline + soft shadow), not a bare stack of
   text buttons floating on the console background — same object as .tc-info-card everywhere else
   in the backoffice. 232px (was 208) buys room for the reach list below the glance. */
.tc-ads-console__nav {
    flex: 0 0 232px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
    padding: .5rem;

    /* ONE text column for the whole card (Marcos 2026-08-13). A nav row indents its label by
       3px active-indicator + .6rem row padding + 1rem icon + .5rem gap; the title, the glance
       lines and the reach list all reproduce that same x so nothing in this card hangs loose.
       Icons are the only thing allowed to sit left of it, in the --icon gutter.
         --…-item   = measured from a row that sits INSIDE the card padding
         --…-bleed  = measured from the glance/geo blocks, which are pulled out by -.5rem
       Change the row padding/icon size above and these two follow. */
    --tc-ads-nav-gutter: calc(1rem + .5rem);
    --tc-ads-nav-text-item: calc(3px + .6rem + var(--tc-ads-nav-gutter));
    --tc-ads-nav-icon-bleed: calc(.5rem + 3px + .6rem);
    --tc-ads-nav-text-bleed: calc(var(--tc-ads-nav-icon-bleed) + var(--tc-ads-nav-gutter));
}

.tc-ads-console__navtitle {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    padding: .15rem .6rem .45rem var(--tc-ads-nav-text-item);
}

.tc-ads-console__navitem {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 38px;
    padding: 0 .6rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: .375rem;
    background: transparent;
    font-size: 13px;
    color: #495057;
    text-align: left;
}

/* :first-child scopes this to the LEADING icon only — the trailing compliance warning triangle
   keeps its amber even on the active row (a bare `.ti` selector let .active repaint it blue). */
.tc-ads-console__navitem > .ti:first-child {
    /* Explicit 1rem box, not the glyph's own advance width — this icon defines the card's shared
       text column (see --tc-ads-nav-gutter), so it must not depend on the font's metrics. */
    width: 1rem;
    text-align: center;
    font-size: 1rem;
    color: #8a90a2;
    flex: 0 0 auto;
}

.tc-ads-console__navitem > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-ads-console__navitem:hover {
    background: rgba(0, 0, 0, .03);
}

.tc-ads-console__navitem.active {
    background: #f2f5ff;
    border-left-color: #3b5de7;
    color: #3b5de7;
    font-weight: 600;
}

.tc-ads-console__navitem.active > .ti:first-child {
    color: #3b5de7;
}

.tc-ads-console__navitem .ti-alert-triangle {
    color: #f1b44c;
    flex: 0 0 auto;
}

/* Blocking-problem flag (launch-gating, e.g. no locations) — the whole row goes danger so the
   broken section is findable from anywhere; advisory amber (compliance triangle) stays amber. */
.tc-ads-console__navitem--issue,
.tc-ads-console__navitem--issue > .ti:first-child,
.tc-ads-console__navitem--issue .ti-alert-circle {
    color: var(--bs-danger, #fa5c7c);
}

.tc-ads-console__navitem--issue .ti-alert-circle {
    flex: 0 0 auto;
}

.tc-ads-console__navitem--issue.active {
    background: rgba(250, 92, 124, .08);
    border-left-color: var(--bs-danger, #fa5c7c);
    color: var(--bs-danger, #fa5c7c);
}

.tc-ads-console__navitem--issue.active > .ti:first-child {
    color: var(--bs-danger, #fa5c7c);
}

/* Negative side margins so the divider spans the card edge-to-edge like a card footer rule. */
.tc-ads-console__glance {
    margin: .75rem -.5rem 0;
    padding: .75rem .6rem 0 var(--tc-ads-nav-text-bleed);
    border-top: 1px solid #e5e8ef;
    font-size: 11px;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* ── Reach list — the areas this campaign can serve to, docked under the glance inside the nav
   card (Marcos 2026-08-13). Deliberately NOT a floating right-hand aside: the console body owns
   the full width. Long labels ellipsis with the full string on the title attribute. ─────────── */
/* Padded to the ICON column, not the text column: the pins then sit exactly under the nav icons
   and the labels after them land exactly on the shared text column. */
.tc-ads-console__geo {
    margin: .6rem -.5rem 0;
    padding: .6rem .6rem 0 var(--tc-ads-nav-icon-bleed);
    border-top: 1px solid #e5e8ef;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

/* The rows below carry their own icon; these three don't, so they step right by the gutter to land
   on the same shared text column. */
.tc-ads-console__geo-title {
    padding-left: var(--tc-ads-nav-gutter);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a90a2;
    margin-bottom: .1rem;
}

.tc-ads-console__geo-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: 11.5px;
    color: #495057;
}

/* Fixed 1rem box + .5rem gap = the nav's icon gutter exactly, so a 12px pin glyph and a 16px nav
   glyph still produce the same label x. */
.tc-ads-console__geo-item .ti {
    width: 1rem;
    font-size: 12px;
    text-align: center;
    flex: 0 0 auto;
}

.tc-ads-console__geo-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-ads-console__geo-meta {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: #8a90a2;
    white-space: nowrap;
}

.tc-ads-console__geo-empty,
.tc-ads-console__geo-total {
    padding-left: var(--tc-ads-nav-gutter);
    font-size: 11px;
    color: #8a90a2;
}

.tc-ads-console__geo-total {
    margin-top: .25rem;
}

/* Creative-variant count gets the visual priority slot in the glance strip (control ranking #4,
   above geo/interests) — bold and first, everything else stays the usual muted line. */
.tc-ads-console__glance-primary {
    font-size: 13px;
    font-weight: 700;
    color: #343a40;
}

/* The body is the SURFACE, its sections are the cards — the same "light page, white cards"
   relationship every other backoffice page has. (It used to be one big white box with hairline
   dividers inside, which is what read as cold and off-system.) The 4–5px gutter keeps the card
   shadows from being clipped by this scroll container. */
.tc-ads-console__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: .25rem .3rem 1rem;
}

/* Sticky section action bar. Offsets mirror the body padding above (top/margin = -padding) so it
   parks flush against the scrollport top — change one, change both. */
.tc-ads-console__savebar {
    position: sticky;
    top: -.25rem;
    z-index: 2;
    margin: -.25rem -.3rem .75rem;
    padding: .6rem 1rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tc-ads-console__savebar-title {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.tc-ads-console__section,
.tc-ads-editor__section {
    margin-bottom: .75rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
}

.tc-ads-console__section:last-child,
.tc-ads-editor__section:last-child {
    margin-bottom: 0;
}

/* Section header bar — same typography as .tc-info-card__header so a console section and a
   backoffice card header read as the SAME object. Negative margins bleed it to the card edges. */
.tc-ads-console__section > h6,
.tc-ads-editor__section > h6 {
    margin: -.9rem -1rem .9rem;
    padding: .6rem 1rem;
    background: #f7f8fc;
    border-bottom: 1px solid #e5e8ef;
    border-radius: .5rem .5rem 0 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.tc-ads-console__section > h6 .ti,
.tc-ads-editor__section > h6 .ti {
    font-size: .95rem;
    vertical-align: -1px;
}

/* Form labels inside the console + panel. The 11px micro-label is what made this page read like a
   spec sheet instead of the backoffice; this restores the house label size in ONE place instead of
   ~40 markup edits, and it out-specifies the inline .fs-11 utility (0,2,0 vs 0,1,0). The Full-slice
   wizard (CampaignEditor) renders outside these containers and is untouched. */
.tc-ads-console__body .form-label,
.tc-ads-panel .form-label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: .25rem;
}

/* WRAPPER for the real Leaflet div. The wrapper carries every Blazor-dynamic class (d-none while
   the console is open) so the classes Leaflet adds to #tc-ads-hero-map at init are never rewritten
   by a re-render; the map div itself just fills the wrapper (static inline inset:0 in the markup). */
.tc-ads-mapdock {
    position: absolute;
    inset: 0;
}

.tc-ads-map--dim .leaflet-tile-pane {
    filter: grayscale(.5) opacity(.7);
}

.tc-ads-dot-popup {
    font-size: 12px;
}

.tc-ads-panel {
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    min-height: 0;
}

.tc-ads-panel--wide {
    flex-basis: 640px;
}

/* Top-align the panel with the FLOATING HUD, not with the stage (Marcos 2026-08-13). The HUD is
   absolutely positioned at top:12px inside .tc-ads-map, so the panel's first row (the KPI strip,
   or the ad-editor header) started 12px higher than it. margin-top — not padding-top — because
   the panel is the scrolling column: padding would scroll away and the alignment with it.
   Desktop only: below 992px the stage stacks and the HUD is position:static. */
@media (min-width: 992px) {
    .tc-ads-panel {
        margin-top: 12px;
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .tc-ads-panel:not(.tc-ads-panel--wide) { flex-basis: 340px; }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .tc-ads-panel:not(.tc-ads-panel--wide) { flex-basis: 320px; }
}

.tc-ads-stat {
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    padding: .6rem .75rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
}

.tc-ads-stat--lead {
    border-left: 3px solid #3b5de7;
}

.tc-ads-stat__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    display: block;
}

.tc-ads-stat__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #343a40;
}

/* Stale results (>1h since InsightsSyncedUtc) — the KPI strip dims instead of reading as a normal,
   trustworthy number (P2 punch list #8). */
.tc-ads-stale .tc-ads-stat__value {
    color: #b0b5c0;
}

.tc-ads-advisory {
    border-left: 3px solid #f1b44c;
    padding-left: .6rem;
    font-size: 11px;
    color: #6b7280;
}

.tc-ads-warn {
    border-left: 3px solid #f1b44c;
    padding-left: .6rem;
    font-size: 11px;
    color: #6b7280;
}

.tc-ads-live {
    border-left: 3px solid #0f9d58;
    padding-left: .75rem;
}

.tc-ads-empty {
    border: 1px dashed #dfe3ec;
    border-radius: .5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
}

.tc-ads-freshness {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tc-ads-freshness__chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 1rem;
    background: #fff3cd;
    color: #997404;
}

/* ── Ad cards (vertical stack in the panel — 380px wide, not a grid) ─────────────────────────── */
.tc-ads-card {
    position: relative;
    display: block;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(44, 44, 62, .06);
    padding: .75rem .75rem .75rem 1rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease-out;
}

.tc-ads-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
}

.tc-ads-card.is-selected {
    border-color: #3b5de7;
    box-shadow: 0 0 0 2px rgba(59, 93, 231, .20);
    transform: translateX(2px);
}

.tc-ads-card:focus-visible {
    outline: 3px solid #3b5de7;
    outline-offset: -2px;
}

.tc-ads-card--error {
    border-color: #dc3545;
}

.tc-ads-card--skeleton {
    background: #f2f4f8;
    min-height: 88px;
    cursor: default; /* loading placeholder is not clickable — don't promise a click */
}

.tc-ads-card--add {
    border: 2px dashed #c9cede;
    background: #fbfcfe;
    color: #6b7280;
    min-height: 96px; /* matches the ad card above it — column rhythm (P2 punch list) */
    display: grid;
    place-items: center;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.tc-ads-card--add:hover {
    border-color: #3b5de7;
    background: #f7f9ff;
    color: #3b5de7;
    box-shadow: none;
}

.tc-ads-card__swatch {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: .5rem 0 0 .5rem;
    background: var(--tc-ad-hue, #6c757d);
}

.tc-ads-card__row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.tc-ads-card__thumb {
    width: 72px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .375rem;
    background: #f4f6fa;
    flex: 0 0 auto;
}

.tc-ads-card__thumb--none {
    display: grid;
    place-items: center;
    color: #adb5bd;
    font-size: 1.1rem;
}

.tc-ads-card__title {
    font-size: .875rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card FOOTER, not a loose button cluster — the negative margins bleed the hairline to the card
   edges (card padding is .75rem/.75rem/.75rem/1rem; keep these in sync with it). */
.tc-ads-card__actions {
    display: flex;
    gap: .35rem;
    margin: .6rem -.75rem 0 -1rem;
    padding: .6rem .75rem 0 1rem;
    border-top: 1px solid #eef0f5;
    flex-wrap: wrap;
}

/* 🔴 ADA — 44×44 minimum touch target, at every breakpoint (was a 26px icon in a btn-sm at
   desktop widths; the old mobile-only override at ≤575px below is now redundant but left in place
   as a harmless no-op rather than risk a cascade surprise). */
.tc-ads-card__actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .7rem;
    font-weight: 600;
}

/* Delete stays icon-only on purpose — the one destructive action should not out-shout Edit.
   Qualified with .tc-ads-card__actions so it out-specifies the sizing rule above (and the
   `flex: 1 1 30%` mobile rule at ≤575px, which would otherwise stretch a lone trash icon). */
.tc-ads-card__actions .btn.tc-ads-card__action--icon {
    padding: .25rem;
    flex: 0 0 auto;
}

.tc-ads-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin-top: .4rem;
}

.tc-ads-kpi__label {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a90a2;
    display: block;
}

.tc-ads-kpi__value {
    font-size: .8125rem;
    font-weight: 600;
    color: #343a40;
}

.tc-ads-stale .tc-ads-kpi__value {
    color: #6c757d;
}

/* Signature action — the ONLY gradient on the page (scarcity is the point). */
.tc-ads-promote {
    position: relative;
    width: 100%;
    margin-top: .5rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: transparent;
    color: #3b5de7;
    font-weight: 600;
    font-size: .75rem;
    padding: .35rem .5rem;
    /* Always visible — it is the signature feature; hover only intensifies it. Hiding it at rest
       made it undiscoverable (and an empty white pill under any spotlight/screenshot). */
    opacity: .85;
    transition: opacity .15s ease-out, background .15s ease-out;
}

.tc-ads-promote::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, #3b5de7, #a56cc1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.tc-ads-promote:hover {
    background: rgba(59, 93, 231, .08);
}

.tc-ads-card:hover .tc-ads-promote,
.tc-ads-card:focus-within .tc-ads-promote,
.tc-ads-card.is-selected .tc-ads-promote {
    opacity: 1;
}

.tc-ads-promote__explainer {
    font-size: 10.5px;
    color: #8a90a2;
    margin-top: .2rem;
}

/* ── Ad editor takeover (fills the aux panel) ────────────────────────────────────────────────
   Header = title left / real back BUTTON right (house detail-page pattern), footer = primary Save
   + light Cancel on a ruled row. No bare text links anywhere in this flow. */
.tc-ads-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #e5e8ef;
}

.tc-ads-editor__title {
    display: inline-flex;
    align-items: center;
    font-size: .95rem;
    font-weight: 700;
    color: #343a40;
}

.tc-ads-editor__actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid #e5e8ef;
}

/* Back-navigation in the HUD — never allowed to wrap or shrink out of row 1. */
.tc-ads-hud__back {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
}

/* ── Campaign-setup accordion (bottom of the panel) ──────────────────────────────────────────── */
.tc-ads-glance {
    font-size: 11px;
    color: #6b7280;
}

/* ═══ Meta targeting substance (meta-targeting-substance.md) — interest allowlist picker ═══════ */
/* Symmetric tile grid (Marcos 2026-08-13 — it read ragged before). Three things were breaking the
   rhythm and all three are fixed here:
     1. rows had no floor height, so a row carrying a scope-constraint line was visibly taller than
        its neighbours — grid-auto-rows now gives every row the same minimum;
     2. the checkbox gutter was Bootstrap's `1.5em`, which resolves against a DIFFERENT font-size on
        .form-check (inherited) than on .tc-interest-row__scope (10.5px) — so the scope line never
        landed under the label. Everything is pinned to the SAME rem gutter below;
     3. the group header was a bare bold line — it is now a ruled head carrying the live count.
   --tc-interest-gutter is the single source of truth for that column: change it once. */
/* Each category is a BOUNDED BAND, not just whitespace (Marcos 2026-08-13: 20px of margin alone
   left no readable edge between "Life Stage & Demographics" and "Caregiving"). The band is the
   house page-surface grey inside a hairline box, so the white entry tiles pop out of it and the
   boundary is a real edge instead of a gap. Head bleeds to the box edges via matching negative
   margins — keep the two .75rem values in sync. */
.tc-interest-group {
    --tc-interest-gutter: 1.6rem;
    margin-bottom: 20px;
    padding: 0 .75rem .75rem;
    background: #f7f8fb;
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
}

.tc-interest-group:last-child {
    margin-bottom: 0;
}

.tc-interest-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 -.75rem .75rem;
    padding: .5rem .75rem;
    /* White head band + thin house-blue rule (Marcos 2026-08-13) — the head reads as the
       category's title bar against the grey group band below it. */
    background: #fff;
    border-radius: .5rem .5rem 0 0;
    border-bottom: 1px solid #3b5de7;
}

.tc-interest-group__name {
    font-size: 12px;
    font-weight: 700;
    color: #495057;
}

.tc-interest-group__cap {
    flex: 0 0 auto;
    font-size: 11px;
    color: #8a90a2;
    white-space: nowrap;
}

.tc-interest-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: minmax(44px, auto);
    gap: .4rem;
}

.tc-interest-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .4rem .6rem;
    /* #e5e8ef, not the lighter #eef0f5: the tiles now sit on the grey group band, where the paler
       hairline disappeared. */
    border: 1px solid #e5e8ef;
    border-radius: .375rem;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}

.tc-interest-row.is-selected {
    border-color: #3b5de7;
    background: #f2f5ff;
}

.tc-interest-row.is-disabled {
    background: #fbfcfe;
    border-style: dashed;
}

/* One rem-based gutter for the checkbox column — overrides Bootstrap's em-based .form-check
   padding so the label and the scope line beneath it share an exact left edge. */
.tc-interest-row .form-check {
    padding-left: var(--tc-interest-gutter);
    min-height: 0;
}

.tc-interest-row .form-check-input {
    width: .95rem;
    height: .95rem;
    margin-top: .1rem;
    margin-left: calc(var(--tc-interest-gutter) * -1);
}

.tc-interest-row .form-check-label {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}

.tc-interest-row.is-disabled .form-check-label {
    cursor: default;
    color: #8a90a2;
}

.tc-interest-row__scope {
    font-size: 10.5px;
    line-height: 1.3;
    color: #8a90a2;
    margin: .15rem 0 0 var(--tc-interest-gutter);
}

.tc-zip-radius-input {
    max-width: 90px;
}

.tc-zip-radius-help {
    font-size: 10.5px;
    color: #8a90a2;
}

/* ── Responsive (spec §8.8) ───────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .tc-ads-stage {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }
    .tc-ads-map {
        height: 420px;
        flex: 0 0 auto;
    }
    .tc-ads-map--console-open {
        height: auto;
        min-height: 100vh;
        /* HUD renders first in DOM (see the .razor comment) and is position:static at this width
           (rule below) — flex-column makes DOM order = visual order, so the HUD stacks above the
           also-static console instead of the two overlapping. */
        display: flex;
        flex-direction: column;
    }
    .tc-ads-panel, .tc-ads-panel--wide {
        flex-basis: auto;
        overflow-y: visible;
    }
    .tc-ads-hud {
        position: static;
        border-radius: .5rem;
        margin-bottom: .5rem;
        backdrop-filter: none;
        background: #fff;
        box-shadow: none;
        border: 1px solid #e5e8ef;
    }
    .tc-ads-hud__row1 { flex-wrap: wrap; }
    .tc-ads-hud__meta { flex-basis: 100%; white-space: normal; order: 5; }

    /* Console goes static/stacked: nav becomes a TcTabStrip above the body (markup-side),
       save bar pins full-width to the bottom. */
    .tc-ads-console {
        position: static;
        inset: auto;
        flex-direction: column;
        padding: .75rem;
        padding-bottom: 4rem;
    }
    /* The nav ITEMS are replaced by the TcTabStrip in markup at this width, but the glance + reach
       list have no other home — so the card survives and drops to the bottom of the column
       instead of the whole nav being display:none. */
    .tc-ads-console__nav {
        flex: 0 0 auto;
        order: 3;
        margin-top: .75rem;
        overflow-y: visible;
    }
    .tc-ads-console__navtitle,
    .tc-ads-console__navitem { display: none; }
    /* The nav rows that DEFINE the shared text column are gone at this width, so the indent they
       justify goes with them — both blocks fall back to the card's own padding. */
    .tc-ads-console__glance {
        margin-top: 0;
        padding: 0 .6rem;
        border-top: 0;
    }
    .tc-ads-console__geo {
        padding-left: .6rem;
    }
    .tc-ads-console__body { margin-top: 0; }

    /* Fixed bottom action bar — strip the card chrome the desktop sticky variant carries. */
    .tc-ads-console__savebar {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        margin: 0;
        z-index: 1200;
        border: 0;
        border-top: 1px solid #e5e8ef;
        border-radius: 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .tc-ads-map { height: 320px; }
    .tc-ads-card__actions .btn { flex: 1 1 30%; min-height: 44px; }
    .tc-ads-promote { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-ads-panel *, .tc-ads-card {
        transition: none !important;
    }
    .tc-ads-console__section, .tc-ads-console__navitem, .tc-interest-row {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gap-Fix Wizard v3 — near-fullscreen guided surface
   Extends the --tc-budget-* token block (app.css §Budget surface). No new
   libraries, no external assets. Light + dark mapped.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --tc-wiz-max-w:    min(1140px, 94vw);
    --tc-wiz-h:        min(88vh, 920px);
    --tc-wiz-pad:      1.75rem;
    --tc-wiz-gap:      1.25rem;
    --tc-wiz-measure:  46rem;

    --tc-wiz-surface:  var(--tc-surface-card, #fff);
    --tc-wiz-sunken:   var(--tc-surface-sunken, #f8f9fa);
    --tc-wiz-hairline: var(--tc-budget-hairline, #e7ebf1);
    --tc-wiz-border:   var(--tc-budget-border, #e2e7ee);
    --tc-wiz-ink:      var(--tc-budget-ink, #313a46);
    --tc-wiz-muted:    var(--tc-budget-muted, #6c757d);   /* 4.66:1 — lowest ink allowed on text */
    --tc-wiz-decor:    var(--tc-budget-faint, #8a92a0);   /* NON-TEXT only */
    --tc-wiz-accent:   var(--tc-budget-accent, #0d6efd);
    --tc-wiz-ok:       var(--tc-green-ink, #0a7a5e);
    --tc-wiz-ok-spine: var(--tc-green-spine, #0acf97);
    --tc-wiz-warn:     var(--tc-amber-ink, #8a6d00);
    --tc-wiz-warn-spine: var(--tc-amber-spine, #f9c851);
    --tc-wiz-bad:      #c0304a;
    --tc-wiz-bad-spine:#f1556c;
    --tc-wiz-elev:     var(--tc-budget-elev, 0 2px 8px rgba(49,58,70,.10));
    --tc-wiz-elev-shell: 0 24px 64px -12px rgba(20,26,35,.38);
    --tc-wiz-ease:     var(--tc-ease, cubic-bezier(.2,.8,.2,1));
    --tc-wiz-dur:      180ms;
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.tc-wizard-dialog { max-width: var(--tc-wiz-max-w); width: 100%; margin: 1rem auto; }
.tc-wizard-shell {
    display: flex;
    flex-direction: column;
    height: var(--tc-wiz-h);
    max-height: calc(100dvh - 2rem);
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--tc-wiz-surface);
    box-shadow: var(--tc-wiz-elev-shell);
}

/* ── header ──────────────────────────────────────────────────────────────── */
.tc-wizard-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem var(--tc-wiz-pad) .9rem;
    background: var(--tc-wiz-surface);
    border-bottom: 1px solid var(--tc-wiz-hairline);
}
.tc-wizard-head__lead { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tc-wizard-head__title {
    margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25;
    color: var(--tc-wiz-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-wizard-head__aux { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.tc-wizard-eyebrow {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tc-wiz-muted);
}
.tc-wizard-stepper {
    display: inline-flex; align-items: center;
    padding: .25rem .6rem; border-radius: 999px;
    background: var(--tc-wiz-sunken); border: 1px solid var(--tc-wiz-hairline);
    font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--tc-wiz-muted); white-space: nowrap;
}
.tc-wizard-close { font-size: .7rem; flex: 0 0 auto; }
.tc-wizard-iconbtn {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tc-wiz-hairline); border-radius: 8px;
    background: var(--tc-wiz-surface); color: var(--tc-wiz-muted);
    font-size: 1rem; line-height: 1; cursor: pointer;
    transition: background var(--tc-wiz-dur) var(--tc-wiz-ease), color var(--tc-wiz-dur) var(--tc-wiz-ease);
}
.tc-wizard-iconbtn:hover { background: var(--tc-wiz-sunken); color: var(--tc-wiz-ink); }
.tc-wizard-iconbtn:focus-visible { outline: 2px solid var(--tc-wiz-accent); outline-offset: 2px; }

/* ── progress hairline (step walk only) ──────────────────────────────────── */
.tc-wizard-progress { flex: 0 0 auto; height: 3px; background: var(--tc-wiz-hairline); overflow: hidden; }
.tc-wizard-progress__fill {
    display: block; height: 100%;
    background: var(--tc-wiz-warn-spine);
    transition: width 320ms var(--tc-wiz-ease), background 320ms var(--tc-wiz-ease);
}
.tc-wizard-progress--done .tc-wizard-progress__fill { background: var(--tc-wiz-ok-spine); }

/* ── body: the ONE scroll region ─────────────────────────────────────────── */
.tc-wizard-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--tc-wiz-pad);
    background: var(--tc-wiz-sunken);
}
.tc-wizard-canvas {
    max-width: 1024px; margin-inline: auto;
    display: flex; flex-direction: column; gap: var(--tc-wiz-gap);
}
.tc-wizard-canvas--step { max-width: var(--tc-wiz-measure); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.tc-wizard-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem var(--tc-wiz-pad);
    background: var(--tc-wiz-surface);
    border-top: 1px solid var(--tc-wiz-hairline);
}
.tc-wizard-foot__left  { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tc-wizard-foot__right { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.tc-wizard-foot__status { font-size: .8125rem; color: var(--tc-wiz-muted); font-variant-numeric: tabular-nums; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.tc-wizard-hero {
    position: relative; text-align: center; overflow: hidden;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--tc-wiz-surface);
    border: 1px solid var(--tc-wiz-border);
    border-radius: var(--tc-budget-radius, .5rem);
    box-shadow: var(--tc-wiz-elev);
}
.tc-wizard-hero:focus { outline: none; }
.tc-wizard-hero::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: var(--tc-wiz-accent);
}
.tc-wizard-hero--ok::before        { background: var(--tc-wiz-ok-spine); }
.tc-wizard-hero--attention::before { background: var(--tc-wiz-warn-spine); }
.tc-wizard-hero--fail::before      { background: var(--tc-wiz-bad-spine); }
.tc-wizard-hero__glyph {
    width: 60px; height: 60px; margin: 0 auto .9rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.9rem; line-height: 1;
    background: rgba(13,110,253,.10); color: var(--tc-wiz-accent);
    animation: tc-wiz-pop 260ms var(--tc-wiz-ease) both;
}
.tc-wizard-hero__glyph .spinner-border { width: 1.9rem; height: 1.9rem; border-width: .22em; }
.tc-wizard-hero--ok        .tc-wizard-hero__glyph { background: rgba(10,207,151,.12);  color: var(--tc-wiz-ok); }
.tc-wizard-hero--attention .tc-wizard-hero__glyph { background: rgba(249,200,81,.16);  color: var(--tc-wiz-warn); }
.tc-wizard-hero--fail      .tc-wizard-hero__glyph { background: rgba(241,85,108,.12);  color: var(--tc-wiz-bad); }
.tc-wizard-hero__title {
    margin: 0 0 .35rem; font-size: 1.375rem; font-weight: 700;
    letter-spacing: -.01em; line-height: 1.25; color: var(--tc-wiz-ink);
}
.tc-wizard-hero__sub {
    margin: 0 auto; max-width: 34rem;
    font-size: .875rem; line-height: 1.55; color: var(--tc-wiz-muted);
}
.tc-wizard-hero__actions {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem;
}

/* ── honest meter + stat row ─────────────────────────────────────────────── */
.tc-wizard-meter {
    max-width: 26rem; height: 6px; margin: 1.15rem auto .25rem;
    border-radius: 999px; background: var(--tc-wiz-hairline); overflow: hidden;
}
.tc-wizard-meter__fill {
    display: block; height: 100%; border-radius: 999px;
    background: var(--tc-wiz-ok-spine);
    transition: width 420ms var(--tc-wiz-ease);
}
.tc-wizard-hero--attention .tc-wizard-meter__fill { background: var(--tc-wiz-warn-spine); }
.tc-wizard-hero__stats {
    list-style: none; margin: 1.15rem 0 0; padding: 0;
    display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem 2.25rem;
}
.tc-wizard-hero__stats > li { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.tc-wizard-stat__n {
    font-size: 1.5rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--tc-wiz-ink);
}
.tc-wizard-stat__l {
    font-size: .6875rem; font-weight: 600; letter-spacing: .045em;
    text-transform: uppercase; color: var(--tc-wiz-muted);
}
.tc-wizard-hero__stats > li.is-zero .tc-wizard-stat__n { color: var(--tc-wiz-decor); }

/* ── two-column grid ─────────────────────────────────────────────────────── */
.tc-wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--tc-wiz-gap);
    align-items: start;
}
.tc-wizard-col { display: flex; flex-direction: column; gap: var(--tc-wiz-gap); min-width: 0; }
@media (max-width: 991.98px) {
    .tc-wizard-grid { grid-template-columns: minmax(0, 1fr); }
    /* receipt drops below the action panel on narrow screens */
    .tc-wizard-col--aside { order: 2; }
}

/* ── panels ──────────────────────────────────────────────────────────────── */
.tc-wizard-panel {
    padding: 1.5rem;
    background: var(--tc-wiz-surface);
    border: 1px solid var(--tc-wiz-border);
    border-radius: var(--tc-budget-radius, .5rem);
    box-shadow: var(--tc-budget-shadow, 0 1px 2px rgba(49,58,70,.04));
}
.tc-wizard-panel--action { border-color: #cfe0ff; box-shadow: var(--tc-wiz-elev); }
.tc-wizard-panel--calm {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 2.25rem 1.5rem; text-align: center; color: var(--tc-wiz-muted);
    border-style: dashed; box-shadow: none; background: transparent;
}
.tc-wizard-panel--calm > i { font-size: 1.75rem; color: var(--tc-wiz-ok); }
.tc-wizard-panel__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.tc-wizard-panel__head > i { font-size: 1.25rem; color: var(--tc-wiz-accent); }
.tc-wizard-panel__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tc-wiz-ink); }
.tc-wizard-panel__lede { margin: 0 0 1rem; font-size: .8125rem; line-height: 1.6; color: var(--tc-wiz-muted); }
.tc-wizard-panel__foot { margin: .65rem 0 0; font-size: .75rem; color: var(--tc-wiz-muted); text-align: center; }

/* ── count chips ─────────────────────────────────────────────────────────── */
.tc-wizard-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.15rem; padding: 0; }
.tc-wizard-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .65rem; border-radius: 999px;
    background: var(--tc-wiz-sunken); border: 1px solid var(--tc-wiz-hairline);
    font-size: .75rem; font-weight: 600; color: var(--tc-wiz-muted);
}
.tc-wizard-chip strong { color: var(--tc-wiz-ink); font-variant-numeric: tabular-nums; }

/* ── disclosure ──────────────────────────────────────────────────────────── */
.tc-wizard-disclose { border-top: 1px solid var(--tc-wiz-hairline); }
.tc-wizard-disclose__sum {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 0; font-size: .8125rem; font-weight: 600; color: var(--tc-wiz-ink);
}
.tc-wizard-disclose__sum::-webkit-details-marker { display: none; }
.tc-wizard-disclose__sum:focus-visible { outline: 2px solid var(--tc-wiz-accent); outline-offset: 2px; border-radius: 4px; }
.tc-wizard-disclose__caret {
    margin-inline-start: auto; color: var(--tc-wiz-muted);
    transition: transform var(--tc-wiz-dur) var(--tc-wiz-ease);
}
.tc-wizard-disclose[open] > summary .tc-wizard-disclose__caret { transform: rotate(180deg); }

/* ── ledger (what you're signing / what AI changed) ──────────────────────── */
.tc-wizard-ledger {
    list-style: none; margin: 0 0 1rem; padding: 0;
    border: 1px solid var(--tc-wiz-hairline);
    border-radius: var(--tc-budget-radius-sm, 7px);
    overflow: hidden;
}
.tc-wizard-ledger__row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .7rem; font-size: .8125rem;
    background: var(--tc-wiz-surface);
}
.tc-wizard-ledger__row + .tc-wizard-ledger__row { border-top: 1px solid var(--tc-wiz-hairline); }
.tc-wizard-ledger__what {
    flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--tc-wiz-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-wizard-ledger__why {
    flex: 0 0 auto; font-size: .75rem; color: var(--tc-wiz-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tc-wizard-ledger__opt { flex: 0 0 auto; padding: 0; font-size: .7rem; font-weight: 600; }
.tc-wizard-ledger--quiet .tc-wizard-ledger__row { background: var(--tc-wiz-sunken); }
.tc-wizard-ledger__row.is-excluded { opacity: .5; }
.tc-wizard-ledger__row.is-excluded .tc-wizard-ledger__what { text-decoration: line-through; }

/* ── primary CTA sizing (44px+ target, HIG) ──────────────────────────────── */
.tc-wizard-cta {
    width: 100%; min-height: 46px;
    font-size: .9375rem; font-weight: 600;
    border-radius: var(--tc-budget-radius-sm, 7px);
}
.tc-wizard-cta--inline { width: auto; min-width: 11rem; min-height: 42px; }

/* ── receipt ─────────────────────────────────────────────────────────────── */
.tc-wizard-receipt {
    overflow: hidden;
    background: var(--tc-wiz-surface);
    border: 1px solid var(--tc-wiz-border);
    border-radius: var(--tc-budget-radius, .5rem);
    box-shadow: var(--tc-budget-shadow, 0 1px 2px rgba(49,58,70,.04));
}
.tc-wizard-receipt__head {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--tc-wiz-hairline);
    background: linear-gradient(180deg, rgba(13,110,253,.05), transparent);
}
.tc-wizard-receipt__head > i { font-size: 1.15rem; color: var(--tc-wiz-accent); margin-top: .1rem; }
.tc-wizard-receipt__title { margin: 0; font-size: .875rem; font-weight: 700; color: var(--tc-wiz-ink); }
.tc-wizard-receipt__sub   { margin: .1rem 0 0; font-size: .75rem; color: var(--tc-wiz-muted); }
.tc-wizard-receipt__groups { list-style: none; margin: 0; padding: 0; }
.tc-wizard-receipt__groups > li + li { border-top: 1px solid var(--tc-wiz-hairline); }
.tc-wizard-receipt__group {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1.15rem; font-size: .8125rem; color: var(--tc-wiz-ink);
    transition: background var(--tc-wiz-dur) var(--tc-wiz-ease);
}
.tc-wizard-receipt__group::-webkit-details-marker { display: none; }
.tc-wizard-receipt__group:hover { background: var(--tc-wiz-sunken); }
.tc-wizard-receipt__group:focus-visible { outline: 2px solid var(--tc-wiz-accent); outline-offset: -2px; }
.tc-wizard-receipt__icon {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: .9rem;
    background: rgba(10,207,151,.12); color: var(--tc-wiz-ok);
}
.tc-wizard-receipt__icon--flagged { background: rgba(249,200,81,.16); color: var(--tc-wiz-warn); }
.tc-wizard-receipt__label { flex: 1 1 auto; min-width: 0; }
.tc-wizard-receipt__n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tc-wiz-ink); }
.tc-wizard-receipt__body { padding: 0 1.15rem .25rem; }
.tc-wizard-receipt__all {
    display: block; padding: .7rem 1.15rem; text-align: center;
    border-top: 1px solid var(--tc-wiz-hairline);
    font-size: .75rem; font-weight: 600;
}

/* ── remaining-items list ────────────────────────────────────────────────── */
.tc-wizard-todo {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--tc-wiz-hairline);
    border-radius: var(--tc-budget-radius-sm, 7px);
    overflow: hidden;
}
.tc-wizard-todo__row {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .8rem .7rem 1rem;
    background: var(--tc-wiz-surface);
}
.tc-wizard-todo__row + .tc-wizard-todo__row { border-top: 1px solid var(--tc-wiz-hairline); }
.tc-wizard-todo__row::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 3px; background: var(--tc-wiz-warn-spine);
}
.tc-wizard-todo__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tc-wizard-todo__what {
    font-size: .8125rem; font-weight: 600; color: var(--tc-wiz-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-wizard-todo__why  { font-size: .75rem; color: var(--tc-wiz-muted); }
.tc-wizard-todo__more {
    display: block; width: 100%;
    padding: .6rem; border: 0; border-top: 1px solid var(--tc-wiz-hairline);
    background: var(--tc-wiz-sunken);
    font-size: .75rem; font-weight: 600; color: var(--tc-wiz-accent); cursor: pointer;
}
.tc-wizard-todo__more:focus-visible { outline: 2px solid var(--tc-wiz-accent); outline-offset: -2px; }

/* ── step card ───────────────────────────────────────────────────────────── */
.tc-wizard-step {
    padding: 2rem 2.25rem 1.75rem;
    background: var(--tc-wiz-surface);
    border: 1px solid var(--tc-wiz-border);
    border-radius: var(--tc-budget-radius, .5rem);
    box-shadow: var(--tc-wiz-elev);
}
.tc-wizard-step__title {
    margin: .4rem 0 .4rem; font-size: 1.25rem; font-weight: 700;
    letter-spacing: -.01em; line-height: 1.3; color: var(--tc-wiz-ink);
}
.tc-wizard-step__lede {
    margin: 0 0 1.5rem; max-width: 44rem;
    font-size: .875rem; line-height: 1.6; color: var(--tc-wiz-muted);
}
.tc-wizard-step__field {
    display: flex; flex-direction: column; gap: .85rem;
    padding: 1.15rem;
    background: var(--tc-wiz-sunken);
    border: 1px solid var(--tc-wiz-hairline);
    border-radius: var(--tc-budget-radius-sm, 7px);
}
.tc-wizard-source {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .85rem; font-size: .75rem; color: var(--tc-wiz-muted);
}
.tc-wizard-source__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--tc-wiz-ok-spine); }
.tc-wizard-source--estimate .tc-wizard-source__dot { background: var(--tc-wiz-warn-spine); }
.tc-wizard-note:empty { display: none; }
.tc-wizard-note { margin-top: 1rem; }

/* ── working / skeleton ──────────────────────────────────────────────────── */
.tc-wizard-working {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .85rem; min-height: 22rem; text-align: center;
}
.tc-wizard-working__orb {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13,110,253,.10); color: var(--tc-wiz-accent); font-size: 1.7rem;
    animation: tc-wiz-breathe 1.6s var(--tc-wiz-ease) infinite;
}
.tc-wizard-working__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--tc-wiz-ink); }
.tc-wizard-working__sub   { margin: 0; font-size: .8125rem; color: var(--tc-wiz-muted); font-variant-numeric: tabular-nums; }
.tc-wizard-skel { width: min(100%, 32rem); display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.tc-wizard-skel__row {
    height: 14px; border-radius: 999px;
    background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: tc-wiz-shimmer 1.4s linear infinite;
}

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes tc-wiz-pop     { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-wiz-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes tc-wiz-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    .tc-wizard-hero__glyph,
    .tc-wizard-working__orb,
    .tc-wizard-skel__row { animation: none !important; }
    .tc-wizard-skel__row { background: #eef1f5; }
    .tc-wizard-progress__fill,
    .tc-wizard-meter__fill,
    .tc-wizard-disclose__caret,
    .tc-wizard-iconbtn,
    .tc-wizard-receipt__group { transition: none !important; }
}

/* ── responsive: full-bleed sheet on phones ──────────────────────────────── */
@media (max-width: 767.98px) {
    :root { --tc-wiz-pad: 1rem; --tc-wiz-gap: .85rem; }
    .tc-wizard-dialog { max-width: 100%; width: 100%; margin: 0; }
    .tc-wizard-shell  { height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .tc-wizard-hero        { padding: 1.5rem 1rem 1.25rem; }
    .tc-wizard-hero__title { font-size: 1.125rem; }
    .tc-wizard-hero__stats { gap: .5rem 1.5rem; }
    .tc-wizard-stat__n     { font-size: 1.25rem; }
    .tc-wizard-panel { padding: 1.15rem; }
    .tc-wizard-step  { padding: 1.25rem; }
    .tc-wizard-step__title { font-size: 1.0625rem; }
    .tc-wizard-foot { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
    .tc-wizard-foot__right, .tc-wizard-foot__left { justify-content: center; }
    .tc-wizard-cta--inline { width: 100%; }
    .tc-wizard-ledger__why { white-space: normal; }
}

/* ── dark mode (admin ships a [data-bs-theme=dark] block; keep parity) ───── */
[data-bs-theme="dark"] {
    --tc-wiz-surface:  var(--ct-card-bg, #262a33);
    --tc-wiz-sunken:   #1e222a;
    --tc-wiz-hairline: rgba(255,255,255,.08);
    --tc-wiz-border:   rgba(255,255,255,.12);
    --tc-wiz-ink:      var(--ct-emphasis-color, #dee2e6);
    --tc-wiz-muted:    #a3adb9;
    --tc-wiz-decor:    #78818f;
    --tc-wiz-accent:   #6b85f0;
    --tc-wiz-ok:       #3fd9a8;
    --tc-wiz-warn:     #e9c46a;
    --tc-wiz-bad:      #ff8095;
    --tc-wiz-elev-shell: 0 24px 64px -12px rgba(0,0,0,.6);
}
[data-bs-theme="dark"] .tc-wizard-panel--action { border-color: rgba(107,133,240,.45); }
[data-bs-theme="dark"] .tc-wizard-skel__row {
    background: linear-gradient(90deg, #2a2f38 25%, #333945 37%, #2a2f38 63%);
    background-size: 400% 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gap-Fix Wizard v3 — designer visual-review MUST-FIX pass (8 items)
   ═══════════════════════════════════════════════════════════════════════════ */

/* #3 — attest ledger text is what the user is legally signing: wrap it, never clip it.
   Scoped to the ACTION panel's ledger only; the quiet receipt ledger keeps its ellipsis.
   The line name (__what) clamps to 3 lines; the gate message (__why, the long legal text —
   "…is designated Routine (billable…)") is the one that was clipping with no ellipsis, so it
   gets the growing flex slot and wraps freely instead of the fixed nowrap it inherited. */
.tc-wizard-panel--action .tc-wizard-ledger__what {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 0 0 auto;
    max-width: 40%;
}
.tc-wizard-panel--action .tc-wizard-ledger__why {
    white-space: normal;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
}

/* #6 — short states (AI-working, all-clear, single-step) must not leave dead space
   between the content and the sticky footer; center the canvas in the scroll region. */
.tc-wizard-body--center { display: flex; flex-direction: column; justify-content: center; }
.tc-wizard-body--center > .tc-wizard-canvas { width: 100%; }

/* #8 — explicit AA-floor text color for step lede/hint copy — never inherits Bootstrap's
   ambient .text-muted (which can resolve lighter under the admin theme) or the decor token. */
.tc-wizard-copy { color: var(--tc-wiz-muted); font-style: normal; }