/* ===================================================================
   Tele-Market Guru — design tokens & shared component classes.
   Layered on top of Bootstrap 5. Refines, doesn't replace.
   ------------------------------------------------------------------- */

/* Self-hosted Inter (latin subset, @fontsource builds served from wwwroot/fonts). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
}

:root {
    --tmg-brand: #0F766E;
    --tmg-brand-hover: #115E59;
    --tmg-brand-50: #F0FDFA;
    --tmg-brand-100: #CCFBF1;
    --tmg-brand-200: #99F6E4;
    --tmg-brand-600: #0D9488;
    --tmg-brand-grad: linear-gradient(135deg, #0F766E 0%, #0D9488 55%, #10B981 100%);
    --tmg-bg: #F3F5F9;
    --tmg-surface: #FFFFFF;
    --tmg-page-card-bg: #FFFFFF;
    --tmg-sidebar-bg: #1F2937;
    --tmg-sidebar-fg: #E5E7EB;
    --tmg-sidebar-active: #10B981;
    --tmg-border: #E5E7EB;
    --tmg-text: #111827;
    --tmg-text-muted: #6B7280;
    --tmg-success: #10B981;
    --tmg-warning: #F59E0B;
    --tmg-danger: #EF4444;
    --tmg-info: #3B82F6;
    /* Secondary surfaces: inset panels (--tmg-surface-2) and chips/tracks/kbd
       (--tmg-surface-3). Scoped page CSS references these with a light fallback,
       so the dark theme can restyle every tinted panel from one place. */
    --tmg-surface-2: #F8FAFC;
    --tmg-surface-3: #F3F4F6;
    --tmg-track: #E5E7EB;
    /* Semantic tint panels (warning callouts, info boxes, danger strips). */
    --tmg-tint-warn-bg: #FFFBEB;
    --tmg-tint-warn-border: #FDE68A;
    --tmg-tint-danger-bg: #FEF2F2;
    --tmg-tint-info-bg: #ECFEFF;
    --tmg-warn-text: #78350F;
    --tmg-warn-strong: #B45309;
    --tmg-info-text: #155E75;
    --tmg-danger-text: #B91C1C;
    /* Sticky public header glass. */
    --tmg-glass-bg: rgb(255 255 255 / .82);
    --tmg-radius: 8px;
    --tmg-radius-lg: 14px;
    --tmg-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
    --tmg-shadow-md: 0 4px 12px rgb(0 0 0 / .08);
    --tmg-shadow-card: 0 1px 2px rgb(15 118 110 / .04), 0 8px 24px -8px rgb(15 23 42 / .10);
    --tmg-shadow-lift: 0 12px 32px -8px rgb(15 118 110 / .18), 0 4px 12px -4px rgb(15 23 42 / .10);
    --tmg-shadow-modal: 0 20px 50px -10px rgba(15, 23, 42, .35), 0 8px 16px -4px rgba(15, 23, 42, .15);
}

/* ========== Page card (wraps @Body inside the authenticated MainLayout) ========== */
.tmg-page-card {
    background: var(--tmg-page-card-bg);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius-lg);
    box-shadow: var(--tmg-shadow-card);
    padding: 28px 32px 40px;
    /* The whole content column up to a comfortable 1280px, centred inside <main>. (It was 80% of the
       column, which left tables, tab strips and tile rows cramped beside two wide empty gutters.) */
    width: min(100%, 1280px);
    margin: 0 auto 24px;
    min-height: calc(100vh - 72px);
    /* Defensive: contain wide flex/grid descendants so they can't push the page-card
       (and the document body) past the viewport, producing a horizontal page scroll. */
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .tmg-page-card {
        width: auto;
        padding: 20px;
        margin: 16px 8px;
    }
}

/* ==================== BUTTON VARIANT GUIDE ====================
   Four variants in use across the app:

   1. .btn-primary           Primary CTA — saturated brand-accent
                             with white text. One per page, attached to
                             the dominant action: form submit, "Call now",
                             "Start campaign", "Save".
   2. .btn-outline-secondary Secondary action — outlined neutral. Used
                             for "Back", "Cancel", "Discard",
                             "Test connection", "Preview".
   3. .btn-outline-danger    Destructive — outlined red. Used for
                             "Delete", "Cancel campaign", "Hang up",
                             "Erase".
   4. .btn-link              Tertiary / link-as-button. Used for in-row
                             actions that aren't primary ("Edit",
                             "Re-queue", "Research").

   Status-state actions (Pause/Resume/Retry) keep their semantic
   Bootstrap colour (warning / success / outline-warning).
   ============================================================== */

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tmg-text);
    background-color: var(--tmg-bg);
    /* Very subtle fixed brand tint behind every page. */
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(13, 148, 136, .06), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(16, 185, 129, .05), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
}

/* Display-grade heading rhythm: tight tracking, heavy weights. */
h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

h1, .h1 {
    font-weight: 800;
}

::selection {
    background: var(--tmg-brand-100);
    color: #0B3B36;
}

html {
    scrollbar-color: rgb(15 118 110 / .35) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(15 118 110 / .35);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(15 118 110 / .5);
}

a, .btn-link {
    color: var(--tmg-brand);
}

a {
    text-underline-offset: 3px;
}

a:hover, .btn-link:hover {
    color: var(--tmg-brand-hover);
}

.btn {
    border-radius: 8px;
}

.btn:focus-visible {
    outline: 2px solid var(--tmg-brand-600);
    outline-offset: 2px;
}

.btn-primary {
    color: #fff;
    background-color: var(--tmg-brand);
    background-image: linear-gradient(135deg, #115E59, #0F766E);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 8px -2px rgb(15 118 110 / .45), inset 0 1px 0 rgb(255 255 255 / .15);
    transition: all .18s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tmg-brand);
    background-image: linear-gradient(135deg, #115E59, #0F766E);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgb(15 118 110 / .55), inset 0 1px 0 rgb(255 255 255 / .15);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus {
    background-color: var(--tmg-brand);
    background-image: linear-gradient(135deg, #115E59, #0F766E);
    border-color: transparent;
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 1px 4px -1px rgb(15 118 110 / .4), inset 0 1px 0 rgb(255 255 255 / .1);
}

/* Disabled primary buttons must stay on-brand: Bootstrap's --bs-btn-disabled-bg
   otherwise reverts them to default blue (visible on Enrol / Send course / wizard
   Continue while no selection is made). */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--tmg-brand);
    background-image: linear-gradient(135deg, #115E59, #0F766E);
    border-color: transparent;
    color: #fff;
    opacity: 0.55;
    box-shadow: none;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--tmg-brand-50);
    border-color: var(--tmg-brand-200);
    color: var(--tmg-brand);
}

/* Outline-primary follows the brand too (pricing page CTAs). */
.btn-outline-primary {
    color: var(--tmg-brand);
    border-color: var(--tmg-brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--tmg-brand);
    border-color: var(--tmg-brand);
    color: #fff;
}

.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 rgba(15, 118, 110, 0.45);
}

.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;
}

/* Hidden-until-error banner. Global (not layout-scoped CSS) because both MainLayout
   and PublicLayout render the #blazor-error-ui div; Blazor's JS flips it to visible
   when the circuit faults. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #111827;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========== Page header ========== */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tmg-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header h1,
.page-header .h1,
.page-header > div > .h3,
.page-header > div > .h2 {
    margin: 0;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--tmg-text);
}

/* Short gradient underline flourish beneath the page title. */
.page-header h1::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--tmg-brand-grad);
    margin-top: .5rem;
}

.page-header .page-header-subtitle {
    color: var(--tmg-text-muted);
    margin-top: 0.25rem;
    font-size: 0.95rem;
    max-width: 72ch;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ========== Card ========== */
.tmg-card {
    background: var(--tmg-surface);
    border: 1px solid rgb(15 118 110 / .08);
    border-radius: var(--tmg-radius);
    box-shadow: var(--tmg-shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.tmg-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tmg-shadow-lift);
}

.card {
    transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tmg-shadow-lift);
}

.tmg-card > h2:first-child,
.tmg-card > .tmg-card-title:first-child {
    margin-top: 0;
}

/* ========== Table ========== */
.tmg-table {
    vertical-align: middle;
}

.tmg-table > thead > tr > th {
    background: var(--tmg-surface-2);
    border-bottom: 2px solid var(--tmg-border);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--tmg-text-muted);
    text-transform: uppercase;
}

.tmg-table > tbody > tr > td {
    border-bottom: 1px solid var(--tmg-border);
    transition: background-color .12s ease;
}

.tmg-table > tbody > tr {
    transition: background-color .12s ease;
}

.tmg-table > tbody > tr:hover,
.tmg-table > tbody > tr:hover > td {
    background-color: var(--tmg-brand-50);
}

.tmg-table .num,
.tmg-table th.num,
.tmg-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Phone widths: wide data tables scroll sideways instead of clipping at the card edge. */
@media (max-width: 640px) {
    .tmg-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.tmg-row-clickable {
    cursor: pointer;
}
.tmg-row-clickable:hover {
    background: rgba(15, 118, 110, 0.04);
}

/* ========== Empty state ========== */
.tmg-empty {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--tmg-surface);
    border: 1px dashed var(--tmg-border);
    border-radius: var(--tmg-radius);
    color: var(--tmg-text-muted);
}

.tmg-empty .tmg-empty-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tmg-brand-50);
    color: var(--tmg-brand);
    display: grid;
    place-items: center;
    margin-inline: auto;
    border: 1px dashed var(--tmg-brand-200);
}

.tmg-empty .tmg-empty-title {
    font-weight: 600;
    color: var(--tmg-text);
    margin-bottom: 0.25rem;
}

/* ========== Metric ========== */
.tmg-metric {
    position: relative;
    overflow: hidden;
    background: var(--tmg-surface);
    border: 1px solid rgb(15 118 110 / .08);
    border-radius: var(--tmg-radius);
    padding: 0.75rem 1rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

.tmg-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--tmg-shadow-lift);
}

/* 3px gradient accent across the top of every metric tile. */
.tmg-metric::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tmg-brand-grad);
    opacity: .85;
}

.tmg-metric-label {
    color: var(--tmg-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.tmg-metric-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    /* Solid fallback first, then gradient-clipped text. The two-stop teal
       gradient stays >= 3:1 on white (AA large text); the lighter emerald
       end of --tmg-brand-grad would not, so it isn't used here. */
    color: var(--tmg-brand);
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tmg-metric-detail {
    color: var(--tmg-text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Small denominator suffix inside a metric value ("82/100") so the headline
   number stays large without overflowing its card. */
.tmg-metric-denom {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tmg-text-muted);
    -webkit-text-fill-color: var(--tmg-text-muted);
    margin-left: 1px;
}

/* ========== Admin traffic charts (global: parts of the SVG are raw markup) ========== */
.tmg-traffic-svg {
    width: 100%;
    height: auto;
    display: block;
}

.tmg-chart-grid {
    stroke: rgba(100, 116, 139, 0.15);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.tmg-chart-axis {
    fill: var(--tmg-text-muted, #64748B);
    font-size: 11px;
    font-family: inherit;
}

.tmg-chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tmg-chart-line-views { stroke: #10B981; }

.tmg-chart-line-unique {
    stroke: #6366F1;
    stroke-width: 2;
    stroke-dasharray: 5 4;
    opacity: 0.9;
}

.tmg-chart-hit {
    fill: transparent;
    cursor: pointer;
}

.tmg-chart-hit:hover {
    fill: rgba(16, 185, 129, 0.35);
}

.tmg-chart-bar {
    fill: #10B981;
    opacity: 0.85;
    transition: opacity 0.12s ease;
}

.tmg-chart-bar:hover { opacity: 1; }

/* ========== Modal ========== */
body.tmg-modal-open {
    overflow: hidden;
}

.tmg-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
}

.tmg-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    overflow-y: auto;
}

.tmg-modal-dialog {
    position: relative;
    background: var(--tmg-surface);
    border-radius: var(--tmg-radius-lg);
    box-shadow: var(--tmg-shadow-modal);
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Brand-accent strip across the top of the modal. */
.tmg-modal-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tmg-brand);
    border-top-left-radius: var(--tmg-radius-lg);
    border-top-right-radius: var(--tmg-radius-lg);
    z-index: 1;
}

.tmg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 24px;
    border-bottom: 1px solid var(--tmg-border);
}

.tmg-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tmg-text);
}

.tmg-modal-position {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--tmg-surface-3);
    color: var(--tmg-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.tmg-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Tint metric tiles inside the modal so they read as a subtle group, not as
   white-on-white. */
.tmg-modal-body .tmg-metric {
    background: var(--tmg-surface-2);
    border: 1px solid var(--tmg-border);
}

.tmg-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 16px 24px;
    border-top: 1px solid var(--tmg-border);
    background: var(--tmg-surface-2);
    border-bottom-left-radius: var(--tmg-radius-lg);
    border-bottom-right-radius: var(--tmg-radius-lg);
}

/* Compact dialog for simple forms/confirmations (trainee invite/edit/delete). */
.tmg-modal-dialog.tmg-modal-narrow {
    max-width: 480px;
}

.tmg-modal-footer.tmg-modal-footer-end {
    justify-content: flex-end;
}

/* ========== Auth card (centred 420px panel for Login/Register) ========== */
.tmg-auth-card {
    max-width: 420px;
    margin: 24px auto;
    background: var(--tmg-surface);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius-lg);
    box-shadow: var(--tmg-shadow-md);
    padding: 32px;
}

.tmg-auth-title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tmg-text);
}

.tmg-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--tmg-text-muted);
    font-size: 0.8rem;
    margin: 1rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.tmg-auth-divider span {
    padding: 0 0.75rem;
}

/* "Continue with Google" (and future providers) on Login/Register — neutral, bordered
   button per Google's branding guidance (white/surface background, official 4-color G). */
.tmg-external-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--tmg-surface);
    color: var(--tmg-text);
    border: 1px solid var(--tmg-border);
    font-weight: 500;
}

.tmg-external-login-btn:hover {
    background: var(--tmg-surface-2, var(--tmg-surface));
    border-color: var(--tmg-brand);
    color: var(--tmg-text);
}

.tmg-external-login-icon {
    flex: 0 0 auto;
}

.tmg-auth-links {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
}

.tmg-auth-links a {
    color: var(--tmg-brand);
    text-decoration: none;
}

.tmg-auth-links a:hover {
    text-decoration: underline;
}

/* ========== About page brand strip ========== */
.tmg-about-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tmg-about-brand h1 {
    font-size: 1.6rem;
    font-weight: 600;
}

/* ========== Status badges (unified palette) ==========
   Used by Components/Shared/StatusBadge.razor. Single font-weight,
   single size, padded 2px 8px, fully-rounded pill. */
.badge.tmg-status {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge.tmg-status-pending { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.badge.tmg-status-queued  { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.badge.tmg-status-calling { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.badge.tmg-status-done    { background: rgba(16, 185, 129, 0.15); color: #047857; }
.badge.tmg-status-failed  { background: rgba(239, 68, 68, 0.15);  color: #b91c1c; }
.badge.tmg-status-skipped { background: rgba(100, 116, 139, 0.15); color: #475569; }
.badge.tmg-status-noanswer { background: rgba(100, 116, 139, 0.15); color: #475569; }
.badge.tmg-status-optout  { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
.badge.tmg-status-info    { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.badge.tmg-status-neutral { background: rgba(100, 116, 139, 0.15); color: #475569; }

/* Pulsing dot for in-flight Calling state. */
.badge.tmg-status-calling::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    animation: tmg-pulse 1.4s ease-in-out infinite;
}

@keyframes tmg-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ==================== Wave 3 — per-page polish ==================== */

/* Constrains main-column text on detail pages so transcript / notes
   don't stretch across a wide monitor. */
.tmg-readable {
    max-width: 880px;
}

/* Smaller, all-caps section heading used inside long pages (Settings,
   Detail tabs) where the H2 size is too loud for what's really a
   navigation label. */
.tmg-section-heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tmg-text-muted);
    margin: 24px 0 12px;
}

/* Validation message styling: red, small, with an icon prefix. */
.tmg-validation-error {
    color: var(--tmg-danger);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.tmg-validation-error::before {
    content: '\f33a'; /* bi-exclamation-circle */
    font-family: 'bootstrap-icons';
    margin-right: 4px;
}

/* Forms with a sticky right-side action rail. */
.tmg-form {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 32px;
}

.tmg-form-rail {
    position: sticky;
    top: 24px;
    align-self: start;
    padding: 16px;
    background: var(--tmg-surface);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
}

.tmg-form-rail .btn {
    width: 100%;
}

.tmg-form-rail .tmg-form-rail-hint {
    color: var(--tmg-text-muted);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

@media (max-width: 991px) {
    .tmg-form { grid-template-columns: 1fr; }
    .tmg-form-rail { position: static; }
}

/* Avatar with initials, brand-accent background. 32px round. */
.tmg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--tmg-brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Recent-calls / training-sessions / dashboard list rows: avatar + line. */
.tmg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tmg-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tmg-border);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.tmg-list-item:hover {
    background: rgba(15, 118, 110, 0.04);
}

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

.tmg-list-item .tmg-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tmg-list-item .tmg-list-title {
    color: var(--tmg-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmg-list-item .tmg-list-meta {
    color: var(--tmg-text-muted);
    font-size: 0.85rem;
}

.tmg-list-item .tmg-list-trailing {
    color: var(--tmg-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Calls-per-day mini bar chart on the dashboard. */
.tmg-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    justify-content: center;
    padding: 12px 8px 4px;
}

.tmg-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tmg-bar {
    width: 24px;
    border-radius: 4px 4px 0 0;
    background: var(--tmg-brand);
    min-height: 2px;
    transition: height 0.2s;
}

.tmg-bar.tmg-bar-empty {
    background: var(--tmg-track);
    height: 4px;
}

.tmg-bar-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--tmg-text);
}

.tmg-bar-label {
    font-size: 0.7rem;
    color: var(--tmg-text-muted);
}

/* Sticky toolbar above list pages (search + filters). */
.tmg-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tmg-surface);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
    padding: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tmg-toolbar .tmg-toolbar-spacer {
    flex: 1 1 auto;
}

/* Truncated long names with ellipsis. */
.tmg-truncate {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Transcript bubbles — tighter look with asymmetric border radius. */
.tmg-transcript {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmg-bubble {
    padding: 8px 12px;
    max-width: 75%;
    line-height: 1.4;
    word-wrap: break-word;
}

.tmg-bubble-agent {
    align-self: flex-start;
    background: var(--tmg-surface-3);
    color: var(--tmg-text);
    border-radius: 14px 14px 14px 4px;
}

.tmg-bubble-user {
    align-self: flex-end;
    background: var(--tmg-brand);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

.tmg-bubble-speaker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.tmg-bubble-agent .tmg-bubble-speaker {
    color: var(--tmg-text-muted);
}

.tmg-bubble-user .tmg-bubble-speaker {
    color: rgba(255, 255, 255, 0.75);
}

/* Keyboard hint chips inside modals. */
kbd.tmg-kbd,
.tmg-kbd {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--tmg-text-muted);
    background: var(--tmg-surface-3);
    border: 1px solid var(--tmg-border);
    border-radius: 4px;
    line-height: 1.2;
    vertical-align: baseline;
}

/* Training scenario card: coloured stripe at the top. */
.tmg-scenario-card {
    position: relative;
    overflow: hidden;
}

.tmg-scenario-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
}

.tmg-scenario-card.tmg-difficulty-easy::before   { background: var(--tmg-success); }
.tmg-scenario-card.tmg-difficulty-medium::before { background: var(--tmg-warning); }
.tmg-scenario-card.tmg-difficulty-hard::before   { background: var(--tmg-danger);  }

.tmg-scenario-card { transition: transform .12s ease, box-shadow .12s ease; }
.tmg-scenario-card:hover { transform: translateY(-2px); box-shadow: var(--tmg-shadow-modal, 0 10px 28px rgba(20,24,40,.12)); }
.tmg-scenario-card .card-title { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.tmg-scenario-card .tmg-scenario-voice { margin-top: auto; }

/* ===== Tele-training index: toolbar + section headers ===== */
.tmg-train-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 22px;
    background: var(--tmg-surface);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius-lg, 14px);
}

.tmg-train-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}

.tmg-train-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tmg-text-muted, #8a93a3);
    pointer-events: none;
}

.tmg-train-search .form-control { padding-left: 34px; }

.tmg-segmented {
    display: inline-flex;
    background: var(--tmg-surface-2, #f1f2f6);
    border: 1px solid var(--tmg-border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.tmg-segmented-btn {
    border: none;
    background: transparent;
    color: var(--tmg-text-muted, #5b6470);
    font-size: .85rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.tmg-segmented-btn:hover { color: var(--tmg-text, #1f2430); }

.tmg-segmented-btn.active {
    background: var(--tmg-surface, #fff);
    color: var(--tmg-brand);
    box-shadow: 0 1px 3px rgba(20,24,40,.12);
}

.tmg-train-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin: 6px 0 16px;
    border-radius: var(--tmg-radius-lg, 14px);
    background: var(--tmg-surface-2, #f6f7fb);
    border: 1px solid var(--tmg-border);
}

.tmg-train-section-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
}

.tmg-train-section-head.is-inbound .tmg-train-section-icon { background: var(--tmg-info, #0ea5e9); }
.tmg-train-section-head.is-outbound .tmg-train-section-icon { background: var(--tmg-brand, #4f46e5); }

.tmg-train-section-text { flex: 1 1 auto; min-width: 0; }
.tmg-train-section-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.tmg-train-section-sub { margin: 2px 0 0; font-size: .85rem; color: var(--tmg-text-muted, #5b6470); }

.tmg-train-section-count {
    flex: none;
    min-width: 28px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tmg-surface, #fff);
    border: 1px solid var(--tmg-border);
    font-weight: 700;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* ========== Settings tabbed layout ========== */
.tmg-settings-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tmg-settings-header {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.tmg-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 16px 0 24px;
    border-bottom: 1px solid var(--tmg-border);
    overflow-x: auto;
}

.tmg-settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--tmg-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.tmg-settings-tab:hover {
    color: var(--tmg-text);
    border-bottom-color: var(--tmg-border);
}

.tmg-settings-tab.active {
    color: var(--tmg-brand);
    border-bottom-color: var(--tmg-brand);
    font-weight: 600;
}

.tmg-settings-tab i {
    font-size: 0.95rem;
    opacity: 0.85;
}

.tmg-settings-tab-ext {
    font-size: 0.75rem;
    opacity: 0.6;
}

.tmg-settings-tab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.tmg-settings-tab-head h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tmg-text);
}

.tmg-settings-tab-sub {
    margin: 0;
    color: var(--tmg-text-muted);
    font-size: 0.9rem;
    max-width: 720px;
}

.tmg-settings-tab-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tmg-settings-body {
    min-height: 200px;
}

/* ========== Polish wave 6 ==========
   Tightened typography, consistent form field height, muted nav-tabs,
   role-pill neutral palette, public header refinements. */

/* Form fields uniformly 40px so buttons next to inputs line up. */
.form-control, .form-select {
    min-height: 40px;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .form-select-sm {
    min-height: 32px;
}

/* Brand-teal focus ring instead of Bootstrap's default blue. */
.form-control:focus, .form-select:focus {
    border-color: var(--tmg-brand-600);
    box-shadow: 0 0 0 3px rgb(13 148 136 / .15);
}

/* In auth-card form-floating fields, hide the placeholder until focused so the
   label can sit at the input's left edge without colliding with the placeholder.
   The default Bootstrap floating-label depends on a placeholder being present
   (any value), but the visible placeholder isn't useful here. */
.tmg-auth-card .form-floating > .form-control:not(:focus):placeholder-shown::placeholder {
    color: transparent;
}
.tmg-auth-card .form-floating > .form-control:focus::placeholder {
    color: var(--bs-secondary-color);
    text-align: start;
}

/* Inactive nav-tab links should be muted, not bright Bootstrap blue. */
.nav-tabs .nav-link {
    color: var(--tmg-text-muted);
    font-weight: 500;
}
.nav-tabs .nav-link:hover {
    color: var(--tmg-text);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--tmg-text);
    font-weight: 600;
    border-bottom-color: var(--tmg-surface);
}

/* `(not set)` placeholder styled as muted italic, not pink monospace. */
.tmg-not-set {
    color: var(--tmg-text-muted);
    font-style: italic;
    font-size: 0.875rem;
}

/* Phone-number rendering: muted mono, no pink. Used to replace inline <code> for E.164. */
.tmg-phone {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--tmg-text);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* Override Bootstrap inline-code reddening when the code element is just decorative for env-var
   references inside settings copy. Keep it monospace but neutral colour. */
.tmg-settings-tab-sub code,
.tmg-settings-body p code {
    color: var(--tmg-text);
    background: var(--tmg-bg);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* List rows (recent calls / sessions) — taller, more breathing room, larger avatars. */
.tmg-list-item {
    padding: 12px 12px;
    min-height: 56px;
}

.tmg-list-item .tmg-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 0.8rem;
}

/* Numeric table column helper — already defined in .tmg-table; reinforce as a
   standalone utility so non-tmg-tables benefit. */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Buttons inside in-row table actions should be uniform btn-sm height. */
.tmg-table td .btn,
.tmg-table tbody .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Inline bar chart in admin views — pure CSS, no JS library. */
.tmg-inline-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmg-inline-bar {
    position: relative;
    height: 18px;
    background: var(--tmg-surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.tmg-inline-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tmg-brand) 0%, var(--tmg-brand-hover) 100%);
}

.tmg-inline-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--tmg-text);
}

/* ---- Calling modal: notes split + objection-handling tab ---- */
.tmg-modal-tabs {
    margin-bottom: 16px;
}

.tmg-modal-tabs .nav-link {
    color: var(--tmg-text);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-weight: 500;
}

.tmg-modal-tabs .nav-link.active {
    color: var(--tmg-brand);
    border-bottom-color: var(--tmg-brand);
    background: transparent;
}

.tmg-notes-history {
    background: var(--tmg-surface-2);
    border: 1px solid var(--tmg-border);
    border-radius: 6px;
    padding: 10px 12px;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.45;
}

.tmg-objection-highlight {
    border-left: 4px solid var(--tmg-brand) !important;
    animation: tmg-objection-pulse 1.4s ease-out 0s 2;
}

@keyframes tmg-objection-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(15, 118, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}

/* Shared course/welcome number marker. Public variants live in public-design.css. */
.tmg-landing-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tmg-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

/* ---------- Trainee progress hub ---------------- */
.tmg-progress-trainee {
    padding: 18px 20px;
}

/* Long course names / emails must not blow the toolbar past the page card. */
.tmg-toolbar select.form-select-sm {
    max-width: 240px;
    text-overflow: ellipsis;
}

/* Auto-width selects in toolbars (class instead of an inline style so the mobile
   media query below can win). */
.tmg-select-auto {
    width: auto;
}

/* Phone widths: toolbar controls go full-width instead of overflowing the card. */
@media (max-width: 575px) {
    .tmg-toolbar label,
    .tmg-toolbar select.form-select-sm,
    .tmg-toolbar .tmg-select-auto,
    .tmg-toolbar .tmg-progress-enrol,
    .tmg-toolbar .tmg-progress-enrol select {
        width: 100%;
        max-width: 100%;
    }
}

.tmg-progress-enrol {
    min-width: 0;
}

.tmg-progress-course {
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.tmg-progress-course-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    background: var(--tmg-surface-2);
    border: none;
    padding: 10px 14px;
    font: inherit;
    color: var(--tmg-text);
    cursor: pointer;
    text-align: left;
}

/* Long unbroken course names (ids, imports) wrap instead of clipping the row. */
.tmg-progress-course-head > .fw-semibold {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tmg-progress-course-head:hover {
    background: rgba(15, 118, 110, 0.05);
}

.tmg-progress-bar-mini {
    display: inline-block;
    width: 110px;
    height: 6px;
    border-radius: 999px;
    background: var(--tmg-border);
    overflow: hidden;
    flex: 0 0 auto;
}

.tmg-progress-bar-mini-fill {
    display: block;
    height: 100%;
    background: var(--tmg-success);
    border-radius: 999px;
}

.tmg-progress-bar-mini-fill.failed {
    background: var(--tmg-danger);
}

.tmg-progress-levels {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--tmg-border);
}

.tmg-progress-level {
    padding: 8px 0;
    border-bottom: 1px dashed var(--tmg-border);
}

.tmg-progress-level:last-child {
    border-bottom: none;
}

.tmg-progress-level-locked {
    opacity: 0.55;
}

.tmg-progress-level-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tmg-progress-attempts {
    margin: 8px 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmg-progress-attempt {
    background: var(--tmg-surface-2);
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
    padding: 8px 12px;
}

.tmg-progress-audio {
    height: auto;
    width: 100%;
    min-width: 0;
    max-width: 560px;
    flex: 1 1 100%;
}

.tmg-progress-feedback {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--tmg-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 760px;
}

/* ---------- Welcome wizard (first-run onboarding) ---------------- */
.tmg-wizard {
    max-width: 880px;
    margin: 0 auto;
}

/* First-login welcome hero (the intro panel before the setup steps) */
.tmg-welcome-hero {
    text-align: center;
    max-width: 660px;
    margin: 0 auto;
    padding: 28px 20px 8px;
    animation: tmg-welcome-rise 0.5s ease both;
}

@keyframes tmg-welcome-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tmg-welcome-hero-mark {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
    margin-bottom: 14px;
}

.tmg-welcome-hero-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--tmg-brand);
    background: color-mix(in srgb, var(--tmg-brand) 12%, transparent);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.tmg-welcome-hero-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 14px;
}

.tmg-welcome-hero-sub {
    font-size: 1.08rem;
    color: var(--tmg-text-muted, #5b6470);
    max-width: 560px;
    margin: 0 auto 22px;
}

.tmg-welcome-hero-points {
    list-style: none;
    padding: 0;
    margin: 0 auto 26px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.tmg-welcome-hero-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.tmg-welcome-hero-points i {
    color: var(--tmg-brand);
    font-size: 1.15rem;
    flex: none;
}

.tmg-welcome-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tmg-wizard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.tmg-wizard-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.tmg-wizard-header > .btn {
    min-height: 44px;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .tmg-wizard-header {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
    }

    .tmg-wizard-header > img {
        grid-column: 1;
        grid-row: 1;
        max-width: 100%;
    }

    .tmg-wizard-header > div {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .tmg-wizard-header > .btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

.tmg-wizard-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.tmg-wizard-dot {
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: var(--tmg-border);
    transition: background 0.2s;
}

.tmg-wizard-dot.active {
    background: var(--tmg-brand);
}

.tmg-wizard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.tmg-wizard-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
    background: var(--tmg-surface);
    border: 2px solid var(--tmg-border);
    border-radius: var(--tmg-radius-lg);
    padding: 18px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    font: inherit;
    color: var(--tmg-text);
}

.tmg-wizard-card:hover {
    border-color: var(--tmg-brand);
    transform: translateY(-1px);
    box-shadow: var(--tmg-shadow-md);
}

.tmg-wizard-card.selected {
    border-color: var(--tmg-brand);
    background: rgba(15, 118, 110, 0.05);
    box-shadow: 0 0 0 1px var(--tmg-brand);
}

.tmg-wizard-card i {
    font-size: 1.5rem;
    color: var(--tmg-brand);
}

.tmg-wizard-card span {
    color: var(--tmg-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.tmg-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--tmg-border);
}

.tmg-welcome-finish-actions {
    min-width: 0;
    max-width: 100%;
}

.tmg-welcome-finish-actions .btn {
    min-height: 44px;
    white-space: normal;
    max-width: 100%;
}

.tmg-wizard-guide-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tmg-wizard-guide-list {
    margin: 16px 0;
    padding-left: 0;
    list-style: none;
    counter-reset: guide;
}

.tmg-wizard-guide-list li {
    counter-increment: guide;
    position: relative;
    padding: 10px 0 10px 44px;
    border-bottom: 1px dashed var(--tmg-border);
    line-height: 1.55;
}

.tmg-wizard-guide-list li::before {
    content: counter(guide);
    position: absolute;
    left: 0;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 118, 110, 0.1);
    color: var(--tmg-brand);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.tmg-wizard-recs {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.tmg-wizard-recs li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 14px;
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
    background: var(--tmg-surface);
    margin-bottom: 8px;
}

.tmg-wizard-recs i {
    color: var(--tmg-brand);
    font-size: 1.1rem;
    margin-top: 2px;
}

/* ---------- Training courses: ladder + certificate ---------------- */
.tmg-course-ladder {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    max-width: 720px;
}

.tmg-course-ladder-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--tmg-border);
    border-radius: var(--tmg-radius);
    background: var(--tmg-surface);
    margin-bottom: 8px;
}

.tmg-course-ladder-step .tmg-landing-step-num {
    margin-bottom: 0;
    flex: 0 0 30px;
}

.tmg-certificate {
    max-width: 820px;
    margin: 0 auto;
    background: var(--tmg-surface);
    border: 3px double var(--tmg-brand);
    border-radius: var(--tmg-radius-lg);
    box-shadow: var(--tmg-shadow-card), inset 0 0 0 1px rgb(15 118 110 / .12);
    padding: 14px;
}

.tmg-certificate-fail {
    border-color: #9CA3AF;
}

.tmg-certificate-inner {
    border: 1px solid rgb(15 118 110 / .18);
    border-radius: var(--tmg-radius);
    padding: 48px 40px;
    text-align: center;
    /* Faint watermark-scale brand tint behind the certificate copy. */
    background: radial-gradient(480px 360px at 50% 22%, rgb(15 118 110 / .05), transparent 70%);
}

.tmg-certificate-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: var(--tmg-text-muted);
    margin-bottom: 6px;
}

.tmg-certificate-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.tmg-certificate-awarded {
    color: var(--tmg-text-muted);
    margin-bottom: 2px;
}

.tmg-certificate-name {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.tmg-certificate-verdict {
    margin-bottom: 24px;
}

.tmg-certificate-levels {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 24px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tmg-certificate-levels th,
.tmg-certificate-levels td {
    border-bottom: 1px solid var(--tmg-border);
    padding: 6px 10px;
    text-align: left;
}

.tmg-certificate-levels th.num,
.tmg-certificate-levels td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tmg-certificate-meta {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    color: var(--tmg-text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.tmg-certificate-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--tmg-text-muted);
    opacity: 0.8;
}

/* Course-pass arrival (?celebrate=1): the certificate rises in and the frame
   pulses gold under the fireworks. Static (no animation) when printed. */
.tmg-certificate-celebrate {
    animation: tmg-cert-rise 0.9s cubic-bezier(0.18, 0.85, 0.3, 1.15) both,
               tmg-cert-glow 2.6s ease-in-out 0.9s 3;
}

@keyframes tmg-cert-rise {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tmg-cert-glow {
    0%, 100% { box-shadow: var(--tmg-shadow-card), inset 0 0 0 1px rgb(15 118 110 / .12); }
    50% { box-shadow: 0 0 42px 6px rgb(245 158 11 / .45), inset 0 0 0 1px rgb(245 158 11 / .35); }
}

@media print {
    .tmg-certificate-celebrate { animation: none; }
}

/* Phone widths: keep the levels table inside the certificate frame instead of
   spilling through the double border. */
@media (max-width: 640px) {
    .tmg-certificate-inner {
        padding: 28px 14px;
    }

    .tmg-certificate-title {
        font-size: 1.45rem;
    }

    .tmg-certificate-levels {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media print {
    .tmg-page-card { border: none; box-shadow: none; width: 100%; max-width: none; margin: 0; }
    .tmg-sidebar, .navbar, .page-header { display: none !important; }
}

/* ---------- Training admin: trend sparklines ---------------- */
.tmg-sparkline {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--tmg-brand);
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.tmg-trend-up   { color: #047857; font-weight: 600; }
.tmg-trend-down { color: #b91c1c; font-weight: 600; }

/* ---------- Transcript bubbles + AI feedback (theme-aware) ----------- */
.tmg-bubble {
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 70%;
}

.tmg-bubble-agent {
    background: var(--tmg-surface-3, #f3f4f6);
    color: inherit;
}

.tmg-bubble-user {
    background: var(--tmg-brand, #0f766e);
    color: #fff;
}

.tmg-feedback-good {
    background: color-mix(in srgb, #10b981 12%, var(--tmg-surface, #fff));
    border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
    color: inherit;
}

.tmg-feedback-good .bi {
    color: #10b981;
}

.tmg-feedback-improve {
    background: color-mix(in srgb, #f59e0b 12%, var(--tmg-surface, #fff));
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    color: inherit;
}

.tmg-feedback-improve .bi {
    color: #d97706;
}

.tmg-code-block {
    white-space: pre-wrap;
    background: var(--tmg-surface-2, #f8fafc);
    border: 1px solid var(--tmg-border, #e5e7eb);
    padding: 0.5rem;
    border-radius: 6px;
}

/* ---------- Available balance pill (Phase 4 billing) ---------------- */
.tmg-balance-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.4;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

a.tmg-balance-pill:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.tmg-balance-ok {
    background: rgba(20, 83, 45, 0.85);
    color: #d1fae5;
    border-color: rgba(34, 197, 94, 0.4);
}

.tmg-balance-low {
    background: rgba(120, 53, 15, 0.85);
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.45);
}

.tmg-balance-empty {
    background: rgba(127, 29, 29, 0.85);
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.5);
}

/* ---------- Design polish: alerts, motion ---------------- */

/* Alerts: softer radius + a left accent bar in the variant's own text colour. */
.alert {
    border-radius: 10px;
    border-left: 3px solid currentColor;
}

/* Fade the page card without transforming it: a transformed ancestor traps
   fixed course dialogs inside the card's overflow clipping. All animation is
   gated behind prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes tmg-fade-up {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .tmg-page-card {
        animation: tmg-fade-up .25s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge.tmg-status-calling::before,
    .tmg-objection-highlight {
        animation: none;
    }

    .tmg-card,
    .card,
    .tmg-metric,
    .btn-primary {
        transition: none;
    }

    .tmg-card:hover,
    .card:hover,
    .tmg-metric:hover,
    .btn-primary:hover {
        transform: none;
    }
}

/* =====================================================================
   DARK MODE
   =====================================================================
   All design tokens re-mapped under [data-tmg-theme="dark"].
   Because every component already uses var(--tmg-*) tokens, the
   entire app re-skins with zero per-component changes.

   Palette: deep charcoal (#0D1117) background, elevated surfaces in
   slate-blue (#161B22), borders in #21262D. Brand teal kept vibrant.
   =================================================================== */

[data-tmg-theme="dark"] {
    /* ---- Core palette ---- */
    --tmg-brand: #14B8A6;
    --tmg-brand-hover: #0D9488;
    --tmg-brand-50: rgba(20, 184, 166, 0.08);
    --tmg-brand-100: rgba(20, 184, 166, 0.12);
    --tmg-brand-200: rgba(20, 184, 166, 0.22);
    --tmg-brand-600: #2DD4BF;
    --tmg-brand-grad: linear-gradient(135deg, #0D9488 0%, #14B8A6 55%, #34D399 100%);

    /* ---- Surfaces ---- */
    --tmg-bg: #0D1117;
    --tmg-surface: #161B22;
    --tmg-page-card-bg: #161B22;
    --tmg-surface-2: #1C2128;
    --tmg-surface-3: #21262D;

    /* ---- Borders ---- */
    --tmg-border: #30363D;

    /* ---- Text ---- */
    --tmg-text: #E6EDF3;
    --tmg-text-muted: #8B949E;

    /* ---- Sidebar — stays dark, slightly deepen ---- */
    --tmg-sidebar-bg: #010409;
    --tmg-sidebar-fg: #C9D1D9;
    --tmg-sidebar-active: #2DD4BF;

    /* ---- Semantic colors — boosted for dark bg contrast ---- */
    --tmg-success: #34D399;
    --tmg-warning: #FBBF24;
    --tmg-danger: #F87171;
    --tmg-info: #60A5FA;

    /* ---- Track / scrollbar ---- */
    --tmg-track: #30363D;

    /* ---- Semantic tint panels ---- */
    --tmg-tint-warn-bg: rgba(251, 191, 36, 0.08);
    --tmg-tint-warn-border: rgba(251, 191, 36, 0.25);
    --tmg-tint-danger-bg: rgba(248, 113, 113, 0.08);
    --tmg-tint-info-bg: rgba(96, 165, 250, 0.08);
    --tmg-warn-text: #FCD34D;
    --tmg-warn-strong: #FBBF24;
    --tmg-info-text: #93C5FD;
    --tmg-danger-text: #FCA5A5;

    /* ---- Glass / blur header ---- */
    --tmg-glass-bg: rgba(13, 17, 23, 0.82);

    /* ---- Shadows — toned for dark UI ---- */
    --tmg-shadow-sm: 0 1px 2px rgb(0 0 0 / .25);
    --tmg-shadow-md: 0 4px 12px rgb(0 0 0 / .35);
    --tmg-shadow-card: 0 1px 2px rgb(0 0 0 / .15), 0 8px 24px -8px rgb(0 0 0 / .4);
    --tmg-shadow-lift: 0 12px 32px -8px rgb(20 184 166 / .15), 0 4px 12px -4px rgb(0 0 0 / .35);
    --tmg-shadow-modal: 0 20px 50px -10px rgba(0, 0, 0, .6), 0 8px 16px -4px rgba(0, 0, 0, .35);

    /* ---- CSS color-scheme for native elements (scrollbars, inputs) ---- */
    color-scheme: dark;
}

/* ---- Body & page background ---- */
[data-tmg-theme="dark"] body,
[data-tmg-theme="dark"] {
    background-color: var(--tmg-bg);
    color: var(--tmg-text);
}

html[data-tmg-theme="dark"],
html[data-tmg-theme="dark"] body {
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(20, 184, 166, .04), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(52, 211, 153, .03), transparent 55%);
}

/* ---- Selection ---- */
[data-tmg-theme="dark"] ::selection {
    background: rgba(20, 184, 166, 0.3);
    color: #F0FDFA;
}

/* ---- Scrollbar ---- */
html[data-tmg-theme="dark"] {
    scrollbar-color: rgba(45, 212, 191, .35) transparent;
}

[data-tmg-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(45, 212, 191, .3);
}

[data-tmg-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 212, 191, .5);
}

/* ---- Links ---- */
[data-tmg-theme="dark"] a:not(.btn),
[data-tmg-theme="dark"] .btn-link {
    color: var(--tmg-brand);
}

[data-tmg-theme="dark"] a:not(.btn):hover,
[data-tmg-theme="dark"] .btn-link:hover {
    color: #2DD4BF;
}

/* ---- Buttons ---- */
[data-tmg-theme="dark"] .btn-primary {
    box-shadow: 0 2px 8px -2px rgb(20 184 166 / .4), inset 0 1px 0 rgb(255 255 255 / .08);
}

[data-tmg-theme="dark"] .btn-primary:hover,
[data-tmg-theme="dark"] .btn-primary:focus {
    box-shadow: 0 6px 18px -4px rgb(20 184 166 / .45), inset 0 1px 0 rgb(255 255 255 / .08);
}

[data-tmg-theme="dark"] .btn-outline-secondary {
    color: var(--tmg-text-muted);
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .btn-outline-secondary:hover,
[data-tmg-theme="dark"] .btn-outline-secondary:focus {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .btn-outline-primary {
    color: var(--tmg-brand);
    border-color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .btn-outline-primary:hover,
[data-tmg-theme="dark"] .btn-outline-primary:focus {
    background: var(--tmg-brand);
    border-color: var(--tmg-brand);
    color: #fff;
}

[data-tmg-theme="dark"] .btn:focus,
[data-tmg-theme="dark"] .btn:active:focus,
[data-tmg-theme="dark"] .btn-link.nav-link:focus,
[data-tmg-theme="dark"] .form-control:focus,
[data-tmg-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(13, 17, 23, 0.6), 0 0 0 0.25rem rgba(20, 184, 166, 0.45);
}

/* ---- Form controls ---- */
[data-tmg-theme="dark"] .form-control,
[data-tmg-theme="dark"] .form-select {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .form-control:focus,
[data-tmg-theme="dark"] .form-select:focus {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-brand-600);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .form-control::placeholder {
    color: var(--tmg-text-muted);
}

[data-tmg-theme="dark"] .form-check-input {
    background-color: var(--tmg-surface-3);
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .darker-border-checkbox.form-check-input:not(:checked) {
    border-color: #929292;
}

[data-tmg-theme="dark"] .form-check-input:checked {
    background-color: var(--tmg-brand);
    border-color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .form-floating > label {
    color: var(--tmg-text-muted);
}

/* ---- Cards & surfaces ---- */
[data-tmg-theme="dark"] .card {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .card-header,
[data-tmg-theme="dark"] .card-footer {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .tmg-card {
    border-color: var(--tmg-border);
}

/* ---- Tables ---- */
[data-tmg-theme="dark"] .table,
[data-tmg-theme="dark"] .tmg-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tmg-text);
    --bs-table-border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .tmg-table > tbody > tr:hover,
[data-tmg-theme="dark"] .tmg-table > tbody > tr:hover > td {
    background-color: rgba(20, 184, 166, 0.06);
}

[data-tmg-theme="dark"] .tmg-row-clickable:hover {
    background: rgba(20, 184, 166, 0.06);
}

/* ---- Status badges (dark) ---- */
[data-tmg-theme="dark"] .badge.tmg-status-pending { background: rgba(251, 191, 36, 0.15); color: #FCD34D; }
[data-tmg-theme="dark"] .badge.tmg-status-queued  { background: rgba(96, 165, 250, 0.15); color: #93C5FD; }
[data-tmg-theme="dark"] .badge.tmg-status-calling { background: rgba(129, 140, 248, 0.15); color: #A5B4FC; }
[data-tmg-theme="dark"] .badge.tmg-status-done    { background: rgba(52, 211, 153, 0.15); color: #6EE7B7; }
[data-tmg-theme="dark"] .badge.tmg-status-failed  { background: rgba(248, 113, 113, 0.15); color: #FCA5A5; }
[data-tmg-theme="dark"] .badge.tmg-status-skipped { background: rgba(139, 148, 158, 0.15); color: #8B949E; }
[data-tmg-theme="dark"] .badge.tmg-status-noanswer { background: rgba(139, 148, 158, 0.15); color: #8B949E; }
[data-tmg-theme="dark"] .badge.tmg-status-optout  { background: rgba(251, 146, 60, 0.15); color: #FDBA74; }
[data-tmg-theme="dark"] .badge.tmg-status-info    { background: rgba(96, 165, 250, 0.15); color: #93C5FD; }
[data-tmg-theme="dark"] .badge.tmg-status-neutral { background: rgba(139, 148, 158, 0.15); color: #8B949E; }

[data-tmg-theme="dark"] .badge.tmg-status-calling::before {
    background: #818CF8;
}

/* ---- Metric tiles ---- */
[data-tmg-theme="dark"] .tmg-metric-value {
    background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Nav tabs ---- */
[data-tmg-theme="dark"] .nav-tabs {
    border-bottom-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border) var(--tmg-border) var(--tmg-surface);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: transparent;
}

/* ---- Alerts ---- */
[data-tmg-theme="dark"] .alert {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .alert-success {
    background-color: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.25);
    color: #6EE7B7;
    border-left-color: #34D399;
}

[data-tmg-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.25);
    color: #FCD34D;
    border-left-color: #FBBF24;
}

[data-tmg-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.25);
    color: #FCA5A5;
    border-left-color: #F87171;
}

[data-tmg-theme="dark"] .alert-info {
    background-color: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.25);
    color: #93C5FD;
    border-left-color: #60A5FA;
}

/* ---- Progress bars ---- */
[data-tmg-theme="dark"] .progress {
    background-color: var(--tmg-surface-3);
}

[data-tmg-theme="dark"] .progress-bar {
    background-color: var(--tmg-brand);
}

/* ---- Dropdowns ---- */
[data-tmg-theme="dark"] .dropdown-menu {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    box-shadow: var(--tmg-shadow-md);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .dropdown-item {
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .dropdown-item:hover,
[data-tmg-theme="dark"] .dropdown-item:focus {
    background-color: rgba(20, 184, 166, 0.08);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .dropdown-divider {
    border-color: var(--tmg-border);
}

/* ---- Modals — custom + Bootstrap ---- */
[data-tmg-theme="dark"] .modal-content {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

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

[data-tmg-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Tooltip ---- */
[data-tmg-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--tmg-surface-3);
    color: var(--tmg-text);
}

/* ---- Empty state ---- */
[data-tmg-theme="dark"] .tmg-empty {
    background: var(--tmg-surface-2);
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .tmg-empty .tmg-empty-icon {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.2);
}

/* ---- List items ---- */
[data-tmg-theme="dark"] .tmg-list-item:hover {
    background: rgba(20, 184, 166, 0.06);
}

[data-tmg-theme="dark"] .tmg-list-item .tmg-list-trailing {
    color: var(--tmg-text-muted);
}

/* ---- Bars / charts ---- */
[data-tmg-theme="dark"] .tmg-bar {
    background: var(--tmg-brand);
}

[data-tmg-theme="dark"] .tmg-bar.tmg-bar-empty {
    background: var(--tmg-surface-3);
}

/* ---- Inline code ---- */
[data-tmg-theme="dark"] code {
    color: #E17A9A;
    background: rgba(139, 148, 158, 0.1);
}

[data-tmg-theme="dark"] .tmg-settings-tab-sub code,
[data-tmg-theme="dark"] .tmg-settings-body p code {
    color: var(--tmg-text);
    background: var(--tmg-surface-3);
}

/* ---- Keyboard hints ---- */
[data-tmg-theme="dark"] kbd.tmg-kbd,
[data-tmg-theme="dark"] .tmg-kbd {
    background: var(--tmg-surface-3);
    border-color: rgba(48, 54, 61, 0.8);
    color: var(--tmg-text-muted);
}

/* ---- Transcript bubbles ---- */
[data-tmg-theme="dark"] .tmg-bubble-agent {
    background: var(--tmg-surface-3);
    color: var(--tmg-text);
}

/* ---- Notes history ---- */
[data-tmg-theme="dark"] .tmg-notes-history {
    background: var(--tmg-surface-2);
    border-color: var(--tmg-border);
}

/* ---- Auth card ---- */
[data-tmg-theme="dark"] .tmg-auth-card {
    background: var(--tmg-surface);
    border-color: var(--tmg-border);
}

/* ---- Wizard ---- */
[data-tmg-theme="dark"] .tmg-wizard-card {
    background: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .tmg-wizard-card:hover {
    border-color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .tmg-wizard-card.selected {
    background: rgba(20, 184, 166, 0.06);
    border-color: var(--tmg-brand);
    box-shadow: 0 0 0 1px var(--tmg-brand);
}

/* ---- Wizard guide numbers ---- */
[data-tmg-theme="dark"] .tmg-wizard-guide-list li::before {
    background: rgba(20, 184, 166, 0.15);
}

/* ---- Wizard recs ---- */
[data-tmg-theme="dark"] .tmg-wizard-recs li {
    border-color: var(--tmg-border);
    background: var(--tmg-surface);
}

/* ---- Certificate ---- */
[data-tmg-theme="dark"] .tmg-certificate {
    background: var(--tmg-surface);
    border-color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .tmg-certificate-fail {
    border-color: #4B5563;
}

[data-tmg-theme="dark"] .tmg-certificate-inner {
    border-color: rgba(20, 184, 166, 0.15);
    background: radial-gradient(480px 360px at 50% 22%, rgba(20, 184, 166, .06), transparent 70%);
}

/* ---- Course ladder ---- */
[data-tmg-theme="dark"] .tmg-course-ladder-step {
    border-color: var(--tmg-border);
    background: var(--tmg-surface);
}

/* ---- Settings tabs ---- */
[data-tmg-theme="dark"] .tmg-settings-tabs {
    border-bottom-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .tmg-settings-tab:hover {
    color: var(--tmg-text);
    border-bottom-color: var(--tmg-border);
}

/* ---- Toolbar ---- */
[data-tmg-theme="dark"] .tmg-toolbar {
    background: var(--tmg-surface);
    border-color: var(--tmg-border);
}

/* ---- Form rail ---- */
[data-tmg-theme="dark"] .tmg-form-rail {
    background: var(--tmg-surface);
    border-color: var(--tmg-border);
}

/* ---- Training progress ---- */
[data-tmg-theme="dark"] .tmg-progress-course {
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .tmg-progress-course-head {
    background: var(--tmg-surface-2);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .tmg-progress-course-head:hover {
    background: rgba(20, 184, 166, 0.06);
}

[data-tmg-theme="dark"] .tmg-progress-attempt {
    background: var(--tmg-surface-2);
    border-color: var(--tmg-border);
}

/* ---- Balance pills — keep dark bg variants ---- */
/* (These already use dark backgrounds by design, so they work in both themes.) */

/* ---- Blazor error UI ---- */
[data-tmg-theme="dark"] #blazor-error-ui {
    background: #1C1D00;
    color: #FCD34D;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);
}

/* ---- Validation ---- */
[data-tmg-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline-color: #34D399;
}

[data-tmg-theme="dark"] .invalid {
    outline-color: #F87171;
}

[data-tmg-theme="dark"] .validation-message {
    color: #F87171;
}

/* ---- Inline bars ---- */
[data-tmg-theme="dark"] .tmg-inline-bar {
    background: var(--tmg-surface-3);
}

/* ---- Scenario card difficulty stripes (keep semantic colors) ---- */
[data-tmg-theme="dark"] .tmg-scenario-card.tmg-difficulty-easy::before   { background: var(--tmg-success); }
[data-tmg-theme="dark"] .tmg-scenario-card.tmg-difficulty-medium::before { background: var(--tmg-warning); }
[data-tmg-theme="dark"] .tmg-scenario-card.tmg-difficulty-hard::before   { background: var(--tmg-danger); }

/* ---- Objection pulse — brand-tinted for dark ---- */
[data-tmg-theme="dark"] .tmg-objection-highlight {
    border-left-color: var(--tmg-brand) !important;
}

/* ---- Sparklines / trends ---- */
[data-tmg-theme="dark"] .tmg-trend-up   { color: #34D399; }
[data-tmg-theme="dark"] .tmg-trend-down { color: #F87171; }

/* ---- Page card entrance animation stays the same ---- */

/* ---- Bootstrap overrides: accordion, list-group ---- */
[data-tmg-theme="dark"] .accordion-item {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .accordion-button {
    background-color: var(--tmg-surface);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--tmg-surface-2);
    color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}

[data-tmg-theme="dark"] .list-group-item {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-text);
}

/* ---- Popover ---- */
[data-tmg-theme="dark"] .popover {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
}

[data-tmg-theme="dark"] .popover-header {
    background-color: var(--tmg-surface-2);
    border-bottom-color: var(--tmg-border);
    color: var(--tmg-text);
}

[data-tmg-theme="dark"] .popover-body {
    color: var(--tmg-text);
}

/* ---- Bootstrap text color helpers ---- */
[data-tmg-theme="dark"] .text-muted {
    color: var(--tmg-text-muted) !important;
}

[data-tmg-theme="dark"] .text-body-secondary {
    color: var(--tmg-text-muted) !important;
}

/* ---- Border utility ---- */
[data-tmg-theme="dark"] .border {
    border-color: var(--tmg-border) !important;
}

[data-tmg-theme="dark"] .border-bottom {
    border-bottom-color: var(--tmg-border) !important;
}

[data-tmg-theme="dark"] .border-top {
    border-top-color: var(--tmg-border) !important;
}

/* ---- Breadcrumb ---- */
[data-tmg-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tmg-text-muted);
}

[data-tmg-theme="dark"] .breadcrumb-item.active {
    color: var(--tmg-text-muted);
}

/* ---- Pagination ---- */
[data-tmg-theme="dark"] .page-link {
    background-color: var(--tmg-surface);
    border-color: var(--tmg-border);
    color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .page-link:hover {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-border);
    color: var(--tmg-brand);
}

[data-tmg-theme="dark"] .page-item.active .page-link {
    background-color: var(--tmg-brand);
    border-color: var(--tmg-brand);
    color: #fff;
}

[data-tmg-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--tmg-surface-2);
    border-color: var(--tmg-border);
    color: var(--tmg-text-muted);
}

/* ---- Smooth theme transition ---- */
@media (prefers-reduced-motion: no-preference) {
    html[data-tmg-theme] body,
    html[data-tmg-theme] .tmg-page-card,
    html[data-tmg-theme] .tmg-card,
    html[data-tmg-theme] .card,
    html[data-tmg-theme] .tmg-metric,
    html[data-tmg-theme] .tmg-toolbar,
    html[data-tmg-theme] .tmg-modal-dialog,
    html[data-tmg-theme] .tmg-public-header,
    html[data-tmg-theme] .tmg-auth-card,
    html[data-tmg-theme] .tmg-empty,
    html[data-tmg-theme] .form-control,
    html[data-tmg-theme] .form-select,
    html[data-tmg-theme] .btn,
    html[data-tmg-theme] .alert,
    html[data-tmg-theme] .nav-tabs .nav-link,
    html[data-tmg-theme] .dropdown-menu {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
}

/* ============================================================
   Speech-analytics metric cards + gamification + insights
   All token-based so they re-skin automatically in dark mode.
   ============================================================ */
.tmg-sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
}

.tmg-sa-card {
    background: var(--tmg-surface-2, #f8fafc);
    border: 1px solid var(--tmg-border, #e5e7eb);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.tmg-sa-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tmg-brand, #0f766e);
    letter-spacing: -0.02em;
}

.tmg-sa-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tmg-text-muted, #6b7280);
}

.tmg-sa-label {
    margin-top: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.tmg-sa-hint {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--tmg-text-muted, #6b7280);
}

/* Gamification: stat tiles + streak/badge chips + leaderboard */
.tmg-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.tmg-stat-tile {
    text-align: center;
    background: var(--tmg-surface-2, #f8fafc);
    border: 1px solid var(--tmg-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.1rem 0.75rem;
}

.tmg-stat-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tmg-brand, #0f766e);
}

.tmg-stat-num.tmg-streak {
    color: #ea580c;
}

.tmg-stat-cap {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--tmg-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tmg-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tmg-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--tmg-brand, #0f766e) 10%, transparent);
    color: var(--tmg-brand, #0f766e);
    border: 1px solid color-mix(in srgb, var(--tmg-brand, #0f766e) 22%, transparent);
}

.tmg-badge-chip i {
    font-size: 0.85rem;
}

.tmg-leader-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--tmg-surface-3, #f3f4f6);
    color: var(--tmg-text-muted, #6b7280);
}

.tmg-leader-rank.top {
    background: color-mix(in srgb, var(--tmg-brand, #0f766e) 15%, transparent);
    color: var(--tmg-brand, #0f766e);
}

/* =====================================================================
   CALL ANALYSIS (session page panel + course level strip)
   Components: RadialGauge, AnalysisGlanceCard, RangeBar, AdviceCard, CallTimeline,
   SyncedTranscript, AnalysisDetailTabs, AnalysisMethodology, LevelAnalysisStrip.
   Rules kept here: tokens only (dark remaps below), position not judgement (no
   red/amber/green anywhere in the analysis palette), no transforms retained on card
   ancestors (see web.md), all motion off under prefers-reduced-motion, touch targets
   at least 44px below 768px and on coarse pointers, text never below 11px.
   ===================================================================== */
:root {
    --tmg-speaker-you: #0F766E;
    --tmg-speaker-you-soft: rgba(15, 118, 110, 0.09);
    --tmg-speaker-you-border: rgba(15, 118, 110, 0.28);
    --tmg-speaker-ai: #64748B;
    --tmg-speaker-ai-soft: rgba(100, 116, 139, 0.10);
    /* Small text inside the analysis: darker than --tmg-text-muted so it stays above 4.5:1 on tinted surfaces too. */
    --tmg-ca-muted: #4B5563;
    --tmg-band: #4F46E5;
    --tmg-band-soft: rgba(79, 70, 229, 0.12);
    --tmg-band-line: rgba(79, 70, 229, 0.45);
    /* Dial: a quiet track, a pale section of that track as the broad guide, a brand gradient for the value. */
    --tmg-gauge-track: #E4E9EF;
    --tmg-gauge-track-thin: #CBD3DD;
    --tmg-gauge-band: rgba(52, 211, 153, 0.34);
    --tmg-gauge-band-quiet: rgba(52, 211, 153, 0.17);
    --tmg-gauge-g0: #0F766E;
    --tmg-gauge-g1: #0D9488;
    --tmg-gauge-g2: #34D399;
    --tmg-gauge-knob: #0D9488;
    --tmg-gauge-lit: var(--tmg-brand);
    /* Event markers: a categorical palette with no red, amber or green (those read as bad / warn / good). Shape differs as well as colour. */
    --tmg-marker-hesitation: #7C3AED;
    --tmg-marker-filler: #A21CAF;
    --tmg-marker-hedge: #1D4ED8;
    --tmg-marker-question: #0E7490;
    --tmg-marker-interrupt: #1E293B;
    --tmg-marker-pause: #64748B;
    /* Waveform: the trainee is the brand teal, the AI a neutral slate, overlap (both speaking) a quiet indigo from the dial-guide family. */
    --tmg-speaker-both: #7E22CE;
    --tmg-wave-neutral: #64748B;
    --tmg-wave-baseline: rgba(100, 116, 139, 0.32);
    /* The bright centre line every audio line is mirrored about, and how far a line glows (px of blur, a plain number the script reads): barely there in the light theme, soft in the dark one. */
    --tmg-wave-centre: rgba(100, 116, 139, 0.55);
    --tmg-wave-glow: 1.5;
    /* Pitch movement (experimental): a thin line in the trainee's teal, and a quiet violet wash for a stretch where pitch moved less than elsewhere in the same call (no red, amber or green). */
    --tmg-pitch-line: #0F766E;
    --tmg-pitch-flat: rgba(109, 40, 217, 0.10);
    --tmg-pitch-flat-line: rgba(109, 40, 217, 0.5);
    /* The trainee's usual (dials, range bars): a translucent glass sleeve a little wider than the track: a frosted white fill (the ring shows through) and a faint
       neutral hairline, so it never reads as an outlined pebble or a tick. Never a judgement colour. */
    --tmg-gauge-usual: rgba(255, 255, 255, 0.56);
    --tmg-gauge-usual-edge: rgba(15, 23, 42, 0.2);
    --tmg-gauge-usual-near: rgba(15, 23, 42, 0.34);
    /* Timeline structure: time grid lines, lane separators and the hairline each speaking lane is drawn on. */
    --tmg-tl-grid: rgba(100, 116, 139, 0.20);
    --tmg-tl-grid-minor: rgba(100, 116, 139, 0.09);
    --tmg-tl-sep: rgba(100, 116, 139, 0.15);
    --tmg-tl-hair: rgba(100, 116, 139, 0.26);
    --tmg-tl-stage-bg: #FBFCFD;
    /* Glyphs for the event kinds (masks, so each is drawn in its marker colour). The same glyph is used on the chip, the lane, the lane label, the transcript key and the table. */
    --tmg-icon-hesitation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 9c1.5-3.2 3-3.2 4.4 0s2.9 3.2 4.3 0 2.9-3.2 4.3 0' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --tmg-icon-filler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 2.4h9.6a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2H7.6l-3.3 2.6v-2.6H3.2a2 2 0 0 1-2-2V4.4a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='5.1' cy='7.15' r='1.2'/%3E%3Ccircle cx='8' cy='7.15' r='1.2'/%3E%3Ccircle cx='10.9' cy='7.15' r='1.2'/%3E%3C/svg%3E");
    --tmg-icon-hedge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 2.2a5.8 5.8 0 0 1 0 11.6z'/%3E%3C/svg%3E");
    --tmg-icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.6a2.8 2.8 0 1 1 4 2.5c-.8.4-1.2 1-1.2 1.9v.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='13.4' r='1.4'/%3E%3C/svg%3E");
    --tmg-icon-interruption: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 8h3.6M10.8 8h3.6M9.8 2.6 6.2 13.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --tmg-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.6' y='3' width='3' height='10' rx='1.5'/%3E%3Crect x='9.4' y='3' width='3' height='10' rx='1.5'/%3E%3C/svg%3E");
    --tmg-icon-deadair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.6' fill='none' stroke='black' stroke-width='1.9' stroke-dasharray='2.4 2.1'/%3E%3C/svg%3E");
    --tmg-icon-pitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 10.5 4.5 5l3 6 3-7.5 4 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-tmg-theme="dark"] {
    --tmg-speaker-you: #2DD4BF;
    --tmg-speaker-you-soft: rgba(45, 212, 191, 0.11);
    --tmg-speaker-you-border: rgba(45, 212, 191, 0.32);
    --tmg-speaker-ai: #8B98AA;
    --tmg-speaker-ai-soft: rgba(139, 152, 170, 0.12);
    --tmg-ca-muted: #A9B4C1;
    --tmg-band: #A5B4FC;
    --tmg-band-soft: rgba(129, 140, 248, 0.18);
    --tmg-band-line: rgba(129, 140, 248, 0.58);
    --tmg-gauge-track: #2B333D;
    --tmg-gauge-track-thin: #3D4855;
    --tmg-gauge-band: rgba(45, 212, 191, 0.30);
    --tmg-gauge-band-quiet: rgba(45, 212, 191, 0.15);
    --tmg-gauge-g0: #0D9488;
    --tmg-gauge-g1: #2DD4BF;
    --tmg-gauge-g2: #86EFAC;
    --tmg-gauge-knob: #2DD4BF;
    --tmg-gauge-lit: var(--tmg-brand);
    --tmg-marker-hesitation: #A78BFA;
    --tmg-marker-filler: #E879F9;
    --tmg-marker-hedge: #60A5FA;
    --tmg-marker-question: #22D3EE;
    --tmg-marker-interrupt: #E2E8F0;
    --tmg-marker-pause: #94A3B8;
    --tmg-speaker-both: #E879F9;
    --tmg-wave-neutral: #8B98AA;
    --tmg-wave-baseline: rgba(139, 152, 170, 0.34);
    --tmg-wave-centre: rgba(176, 190, 208, 0.7);
    --tmg-wave-glow: 6;
    --tmg-pitch-line: #2DD4BF;
    --tmg-pitch-flat: rgba(167, 139, 250, 0.16);
    --tmg-pitch-flat-line: rgba(167, 139, 250, 0.62);
    --tmg-gauge-usual: rgba(255, 255, 255, 0.2);
    --tmg-gauge-usual-edge: rgba(226, 232, 240, 0.42);
    --tmg-gauge-usual-near: rgba(241, 245, 249, 0.62);
    --tmg-tl-grid: rgba(139, 152, 170, 0.18);
    --tmg-tl-grid-minor: rgba(139, 152, 170, 0.08);
    --tmg-tl-sep: rgba(139, 152, 170, 0.13);
    --tmg-tl-hair: rgba(139, 152, 170, 0.26);
    --tmg-tl-stage-bg: #12171E;
}

.tmg-ca-root { --tmg-text-muted: var(--tmg-ca-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------- session header: one compact strip so the dials and the timeline start above the fold ---------------- */
.page-header.tmg-session-head { padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.tmg-session-head h1 { font-size: 1.6rem; }
.tmg-session-head h1::after { margin-top: 0.3rem; height: 3px; }
.tmg-session-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0.75rem; }
.tmg-session-meta > [class*="col-"] { width: auto; flex: 0 1 auto; padding: 0; margin: 0; max-width: none; }
.tmg-session-meta .tmg-metric { padding: 6px 14px 7px; height: auto; }
.tmg-session-meta .tmg-metric-label { margin-bottom: 1px; }
.tmg-session-meta .tmg-metric-value { font-size: 1.1rem; }
.tmg-session-meta .tmg-metric-when { font-size: 0.92rem; }

/* ---------------- panel frame ---------------- */
.tmg-ca { margin-bottom: 1.5rem; }
.tmg-ca-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 0.4rem; }
.tmg-ca-headtext { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; min-width: 0; flex: 1 1 320px; }
.tmg-ca-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--tmg-text); }
.tmg-ca-sub { margin: 0; color: var(--tmg-text-muted); font-size: 0.88rem; }
.tmg-ca-tier {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
    background: var(--tmg-brand-50); border: 1px solid var(--tmg-brand-200); color: var(--tmg-brand);
    font-size: 0.82rem; font-weight: 600;
}
[data-tmg-theme="dark"] .tmg-ca-tier { color: var(--tmg-brand-600); }
.tmg-ca-tier-est {
    padding: 1px 8px; border-radius: 999px; background: var(--tmg-surface); border: 1px solid var(--tmg-brand-200);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
}
.tmg-ca-block { margin-top: 0.9rem; }
.tmg-ca-block:first-of-type { margin-top: 0; }
.tmg-ca-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.tmg-ca-sectionhead .tmg-ca-h3 { margin-bottom: 0.45rem; }
.tmg-ca-h3 {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--tmg-text-muted); margin: 0 0 0.65rem;
}
.tmg-ca-hint { color: var(--tmg-text-muted); font-size: 0.82rem; margin: 0 0 0.6rem; }
.tmg-ca-sectionerror { padding: 10px 14px; border: 1px dashed var(--tmg-border); border-radius: 12px; }
.tmg-ca-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--tmg-surface-3); color: var(--tmg-text-muted); font-size: 0.8rem; font-weight: 500; white-space: nowrap;
}
.tmg-ca-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--tmg-border); border-radius: 14px; color: var(--tmg-text-muted); }
.tmg-ca-empty i { font-size: 1.3rem; color: var(--tmg-brand); }
.tmg-ca-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 992px) {
    .tmg-ca-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    /* The tips column is tall; the transcript follows the reader beside it instead of ending after a few turns. */
    .tmg-ca-cols > .tmg-ca-transcript { position: sticky; top: 12px; }
}
.tmg-ca-transcript--solo { margin-top: 1.5rem; }
.tmg-ca-recording { margin-top: 1.5rem; }
.tmg-review-sep { margin-top: 2.5rem !important; padding-top: 1.75rem; border-top: 1px solid var(--tmg-border); }

/* ---------------- radial gauge (ring, marker, half-arc) ---------------- */
.tmg-gauge { position: relative; display: block; width: 100%; max-width: 124px; margin: 0 auto; }
.tmg-gauge--sm { max-width: 108px; }
.tmg-gauge--half { max-width: 164px; }
.tmg-gauge--half.tmg-gauge--sm { max-width: 132px; }
.tmg-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmg-gauge-track, .tmg-gauge-band, .tmg-gauge-sweep { fill: none; }
.tmg-gauge-track { stroke: var(--tmg-gauge-track); stroke-linecap: round; }
.tmg-gauge--marker .tmg-gauge-track { stroke: var(--tmg-gauge-track-thin); }
.tmg-gauge-band { stroke: var(--tmg-gauge-band); stroke-linecap: round; }
.tmg-gauge-band.is-cap { stroke: var(--tmg-gauge-band-quiet); }
/* The upper end of an "up to" guide: the same pale band at full strength for a short stretch, so the limit shows without a tick across the ring. */
.tmg-gauge-cap { fill: none; stroke: var(--tmg-gauge-band); stroke-linecap: round; }
.tmg-gauge-stop--0 { stop-color: var(--tmg-gauge-g0); }
.tmg-gauge-stop--1 { stop-color: var(--tmg-gauge-g1); }
.tmg-gauge-stop--2 { stop-color: var(--tmg-gauge-g2); }
/* The value is the final state in plain markup. --tmg-dash is its length along the path. */
.tmg-gauge-sweep { stroke-linecap: round; stroke-dasharray: var(--tmg-dash, 0) var(--tmg-gap, 400); }
.tmg-gauge-knob { transform-origin: var(--tmg-ox, 60px) var(--tmg-oy, 60px); transform: rotate(var(--tmg-knob, 0deg)); }
.tmg-gauge-knob circle { fill: var(--tmg-surface); stroke: var(--tmg-gauge-knob); stroke-width: 3; }
.tmg-gauge--marker .tmg-gauge-knob circle { fill: var(--tmg-surface); stroke-width: 3.2; }
/* The trainee's usual: a translucent glass sleeve on the ring (a short dash of the same path, round caps), a little wider than the track. When the call sits at the
   usual the knob is inside it and its hairline is a touch stronger, so "about your usual" reads at a glance. */
.tmg-gauge-usual-fill, .tmg-gauge-usual-edge { fill: none; stroke-linecap: round; }
.tmg-gauge-usual-fill { stroke: var(--tmg-gauge-usual); }
.tmg-gauge-usual-edge { stroke: var(--tmg-gauge-usual-edge); }
.tmg-gauge-usual.is-near .tmg-gauge-usual-edge { stroke: var(--tmg-gauge-usual-near); }
.tmg-gauge-value {
    font-size: 27px; font-weight: 700; letter-spacing: -0.035em; fill: var(--tmg-text);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.tmg-gauge--half .tmg-gauge-value { font-size: 24px; }
.tmg-gauge.is-withheld .tmg-gauge-value { fill: var(--tmg-text-muted); font-weight: 600; }
/* While the number counts up, the real (final) figure stays in the page but is invisible; the aria-hidden ticker is what is seen. */
.tmg-gauge-value.is-counting { opacity: 0; }
.tmg-gauge-ticker { user-select: none; }
/* The unit is HTML so it stays at 11px or more however small the dial is drawn. */
.tmg-gauge-unit {
    position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 5.6em;
    font-size: 11px; line-height: 1.15; font-weight: 500; text-align: center; color: var(--tmg-text-muted); pointer-events: none;
}
.tmg-gauge--half .tmg-gauge-unit { max-width: 6.4em; }
.tmg-gauge-sub { display: block; font-size: 11px; font-weight: 500; opacity: 0.9; white-space: nowrap; }
.tmg-gauge-end {
    position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11px; line-height: 1; color: var(--tmg-text-muted);
    font-variant-numeric: tabular-nums; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    /* Played once, when the dial scrolls into view (tmg-call-timeline.js): it sets data-anim="pending" before first paint and
       "run" on entry. Without the script none of this applies and the dial is simply complete. 900 ms, ease-out, dials staggered
       by --tmg-gauge-delay. */
    .tmg-gauge[data-anim="pending"] .tmg-gauge-sweep { stroke-dasharray: 0 var(--tmg-gap, 400); transition: none; }
    .tmg-gauge[data-anim="pending"] .tmg-gauge-knob { transform: rotate(0deg); transition: none; }
    .tmg-gauge[data-anim="run"] .tmg-gauge-sweep, .tmg-gauge[data-anim="done"] .tmg-gauge-sweep {
        transition: stroke-dasharray 900ms cubic-bezier(0.22, 0.8, 0.3, 1) var(--tmg-gauge-delay, 0ms);
    }
    .tmg-gauge[data-anim="run"] .tmg-gauge-knob, .tmg-gauge[data-anim="done"] .tmg-gauge-knob {
        transition: transform 900ms cubic-bezier(0.22, 0.8, 0.3, 1) var(--tmg-gauge-delay, 0ms);
    }
    /* Settled without playing (never scrolled into view within the wait, or printing): jump to the final state, no transition. */
    .tmg-gauge[data-settled][data-anim="done"] .tmg-gauge-sweep, .tmg-gauge[data-settled][data-anim="done"] .tmg-gauge-knob { transition: none; }
}

/* ---------------- glance cards ---------------- */
.tmg-glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 991.98px) { .tmg-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Five dials (pitch variety joins the four): five across from 1200px, three over two (the two centred) from 576px to 1199px, two columns with the last dial centred on a phone.
   Three dials (no fillers dial) are three across from 576px. The level strip stays at three. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .tmg-glance-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tmg-glance-grid[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
    .tmg-glance-grid[data-count="5"] > * { grid-column: span 2; }
    .tmg-glance-grid[data-count="5"] > :nth-child(4) { grid-column: 2 / span 2; }
    .tmg-glance-grid[data-count="5"] > :nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 1200px) { .tmg-glance-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 575.98px) {
    .tmg-glance-grid[data-count="5"] > :nth-child(5), .tmg-glance-grid[data-count="3"] > :nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
}
/* A card is as quiet as the original four-dial row: dial, label, ONE comparison line, ONE guide line. Every line has a reserved height, so cards in a row are the same height. */
.tmg-glance-card {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; container-type: inline-size;
    padding: 10px 6px 10px; border: 1px solid var(--tmg-border); border-radius: 18px;
    background: linear-gradient(180deg, var(--tmg-surface) 0%, var(--tmg-surface-2) 100%);
    box-shadow: var(--tmg-shadow-sm);
}
.tmg-glance-label { font-weight: 600; font-size: 0.92rem; margin-top: 2px; color: var(--tmg-text); text-wrap: balance; line-height: 1.25; }
.tmg-glance-delta { margin-top: 3px; min-height: 1.3em; max-width: 100%; font-size: clamp(0.66rem, 9.4cqw, 0.8rem); line-height: 1.3; color: var(--tmg-text-muted); white-space: nowrap; }
.tmg-glance-meta { margin-top: 3px; min-height: 1.3em; max-width: 100%; font-size: clamp(0.64rem, 8.6cqw, 0.76rem); line-height: 1.3; color: var(--tmg-text-muted); white-space: nowrap; }
.tmg-glance-guide, .tmg-glance-sub { white-space: nowrap; }
.tmg-glance-sep { margin: 0 0.3em; }
/* One small soundwave glyph marks a dial measured from the recording (the legend explains it once); it takes no room of its own. */
.tmg-glance-src { position: absolute; top: 9px; right: 10px; font-size: 0.95rem; line-height: 1; color: var(--tmg-brand); }
.tmg-key--src { color: var(--tmg-brand); font-size: 1rem; line-height: 1; width: auto; height: auto; }
/* A withheld dial reads "Not shown"; the reason is behind it (a small disclosure that opens over the card, so the row keeps its height). */
.tmg-glance-why { margin-top: 3px; min-height: calc(2.6em + 3px); font-size: clamp(0.66rem, 9.4cqw, 0.8rem); line-height: 1.3; color: var(--tmg-text-muted); }
.tmg-glance-why > summary {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; border-radius: 6px; padding: 0 4px; color: var(--tmg-text-muted);
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.tmg-glance-why > summary::-webkit-details-marker { display: none; }
.tmg-glance-why > summary::after { content: ""; width: 5px; height: 5px; margin-top: -2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.tmg-glance-why[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.tmg-glance-why > summary:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; }
.tmg-glance-why > p {
    position: absolute; z-index: 20; left: 6px; right: 6px; top: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--tmg-border); border-radius: 12px;
    background: var(--tmg-surface); color: var(--tmg-text); box-shadow: var(--tmg-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.18)); font-size: 0.8rem; line-height: 1.4; text-align: left;
}
.tmg-glance-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 0.45rem; padding: 0; font-size: 0.76rem; color: var(--tmg-text-muted); }
.tmg-glance-legend li { display: inline-flex; align-items: center; }
.tmg-key { display: inline-block; vertical-align: middle; margin-right: 7px; flex: none; }
.tmg-key--band { width: 20px; height: 8px; border-radius: 4px; background: var(--tmg-gauge-band); box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.28); }
/* The key shows the sleeve as it looks on the ring: frosted glass with the same faint hairline, half over the value arc and half over the empty track. */
.tmg-key--usual { width: 18px; height: 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--tmg-gauge-usual-edge);
    background: linear-gradient(var(--tmg-gauge-usual), var(--tmg-gauge-usual)), linear-gradient(90deg, var(--tmg-gauge-g1) 50%, var(--tmg-gauge-track) 50%); }
.tmg-key--open, .tmg-key--you { width: 10px; height: 10px; border-radius: 3px; background: var(--tmg-brand); }
.tmg-key--closed, .tmg-key--i { width: 10px; height: 10px; border-radius: 3px; background: var(--tmg-speaker-ai); }
.tmg-key--other { width: 10px; height: 10px; border-radius: 3px; background: var(--tmg-border); }
.tmg-key--we { width: 10px; height: 10px; border-radius: 3px; background: var(--tmg-band); }
/* A plain figure with no scale (the legacy filler count) keeps the height of a dial so the row lines up. */
.tmg-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 112px; }
.tmg-stat-n { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; }
.tmg-stat-u { font-size: 11px; color: var(--tmg-text-muted); font-weight: 500; }

/* ---------------- range bar ---------------- */
.tmg-rangebar { min-width: 0; }
.tmg-rangebar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tmg-rangebar-label { font-weight: 600; font-size: 0.9rem; }
.tmg-rangebar-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.tmg-rangebar-value small { margin-left: 0.3em; font-weight: 500; color: var(--tmg-text-muted); font-size: 0.74rem; }
.tmg-rangebar-track { position: relative; height: 10px; margin: 14px 8px 6px; border-radius: 999px; background: var(--tmg-gauge-track); }
.tmg-rangebar-band {
    position: absolute; top: -3px; bottom: -3px; border-radius: 999px;
    background: var(--tmg-gauge-band);
}
.tmg-rangebar-band.is-cap { background: var(--tmg-gauge-band-quiet); top: -2px; bottom: -2px; }
.tmg-rangebar-usual { position: absolute; top: -4px; bottom: -4px; width: 14px; margin-left: -7px; border-radius: 7px; background: var(--tmg-gauge-usual); box-shadow: inset 0 0 0 1.2px var(--tmg-gauge-usual-edge); }
.tmg-rangebar-dot {
    position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: var(--tmg-surface); border: 3px solid var(--tmg-gauge-knob); box-shadow: var(--tmg-shadow-sm);
}
.tmg-rangebar-scale { display: flex; justify-content: space-between; margin: 0 4px; font-size: 0.6875rem; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
.tmg-rangebar-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 0.76rem; color: var(--tmg-text-muted); }
.tmg-rangebar-note { margin-top: 6px; font-size: 0.78rem; color: var(--tmg-text-muted); }
.tmg-rangebar--compact { margin-bottom: 0.4rem; }
.tmg-rangebar--compact .tmg-rangebar-track { height: 8px; margin-top: 11px; margin-bottom: 8px; }
.tmg-rangebar--compact .tmg-rangebar-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2.5px; }
.tmg-rangebar--compact .tmg-rangebar-scale { display: none; }
.tmg-rangebar--compact .tmg-rangebar-value { font-size: 0.92rem; }
.tmg-rangebar--empty .tmg-rangebar-note { margin-top: 2px; }

/* ---------------- marker glyphs (shape AND colour carry the meaning) ---------------- */
/* One glyph per kind, drawn as a mask in the kind's colour: a wave for um / er, a speech bubble of dots for fillers, a half-filled circle for hedges, a question mark,
   a line cut by a slash for "cut off", two bars for a pause, a dashed ring for dead air and a zigzag for pitch. The shapes alone tell the kinds apart (no colour needed). */
.tmg-glyph {
    --k: var(--tmg-text-muted);
    display: inline-block; flex: none; width: 14px; height: 14px; background-color: var(--k);
    -webkit-mask: var(--gi, none) center / contain no-repeat; mask: var(--gi, none) center / contain no-repeat;
}
.tmg-glyph--hesitation, .tmg-gbadge:has(.tmg-glyph--hesitation) { --k: var(--tmg-marker-hesitation); --gi: var(--tmg-icon-hesitation); }
.tmg-glyph--filler, .tmg-gbadge:has(.tmg-glyph--filler) { --k: var(--tmg-marker-filler); --gi: var(--tmg-icon-filler); }
.tmg-glyph--hedge, .tmg-gbadge:has(.tmg-glyph--hedge) { --k: var(--tmg-marker-hedge); --gi: var(--tmg-icon-hedge); }
.tmg-glyph--question, .tmg-gbadge:has(.tmg-glyph--question) { --k: var(--tmg-marker-question); --gi: var(--tmg-icon-question); }
.tmg-glyph--interruption, .tmg-gbadge:has(.tmg-glyph--interruption) { --k: var(--tmg-marker-interrupt); --gi: var(--tmg-icon-interruption); }
.tmg-glyph--pause, .tmg-gbadge:has(.tmg-glyph--pause) { --k: var(--tmg-marker-pause); --gi: var(--tmg-icon-pause); }
.tmg-glyph--deadair, .tmg-gbadge:has(.tmg-glyph--deadair) { --k: var(--tmg-marker-pause); --gi: var(--tmg-icon-deadair); }
.tmg-glyph--pitch, .tmg-gbadge:has(.tmg-glyph--pitch) { --k: var(--tmg-pitch-line); --gi: var(--tmg-icon-pitch); }
/* The glyph badge: the glyph on a soft disc of its own colour with a hairline ring. Chips, timeline markers and lane labels share it. */
.tmg-gbadge {
    display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
    background: color-mix(in srgb, var(--k, var(--tmg-text-muted)) 12%, var(--tmg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--tmg-text-muted)) 34%, transparent);
}
.tmg-gbadge .tmg-glyph { width: 13px; height: 13px; }

/* ---------------- call timeline ---------------- */
.tmg-tl-card { --tl-label: 92px; border: 1px solid var(--tmg-border); border-radius: 18px; padding: 12px 18px 12px; background: var(--tmg-surface); box-shadow: var(--tmg-shadow-sm); }
.tmg-tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin-bottom: 4px; }
.tmg-tl-title { min-width: 0; flex: 1 1 160px; }
.tmg-tl-title .tmg-ca-h3 { margin: 0; }
/* "2:26 · 15 turns" beside the title (filled by the script for a timed call). */
.tmg-tl-sum { font-size: 0.8rem; font-weight: 500; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
.tmg-tl-sum:empty { display: none; }
.tmg-tl-caption { margin: 8px 2px 0; font-size: 0.78rem; }
/* The recording player: its own full-width row directly above the stage. */
.tmg-tl-playrow { margin: 0 0 8px; }
.tmg-tl-playrow .tmg-audio { width: 100%; max-width: none; padding: 5px 12px; }
/* "No recording for this call" / "Recording no longer retained": a quiet outlined status, not a button-like slab. */
.tmg-ca-pill--quiet { gap: 6px; padding: 3px 11px; background: transparent; border: 1px solid var(--tmg-border); font-size: 0.76rem; }
.tmg-ca-pill--quiet i { font-size: 0.82rem; opacity: 0.85; }
.tmg-tl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
/* A filter chip: the kind's glyph badge, its name and its count. Pressed is a raised white chip; switched off is dashed with a grey glyph. */
.tmg-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 12px 2px 4px; border-radius: 999px;
    border: 1px solid var(--tmg-border); background: var(--tmg-surface); color: var(--tmg-text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tmg-chip:not(:has(.tmg-gbadge)) { padding-left: 12px; }
.tmg-chip[data-chip="hesitation"] { --k: var(--tmg-marker-hesitation); }
.tmg-chip[data-chip="filler"] { --k: var(--tmg-marker-filler); }
.tmg-chip[data-chip="hedge"] { --k: var(--tmg-marker-hedge); }
.tmg-chip[data-chip="question"] { --k: var(--tmg-marker-question); }
.tmg-chip[data-chip="interruption"] { --k: var(--tmg-marker-interrupt); }
.tmg-chip[data-chip="pause"], .tmg-chip[data-chip="deadair"] { --k: var(--tmg-marker-pause); }
.tmg-chip[data-chip="pitch"] { --k: var(--tmg-pitch-line); }
.tmg-chip[aria-pressed="true"] { background: var(--tmg-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.tmg-chip[aria-pressed="true"]:hover { border-color: color-mix(in srgb, var(--k, var(--tmg-brand)) 45%, var(--tmg-border)); background: color-mix(in srgb, var(--k, var(--tmg-brand)) 5%, var(--tmg-surface)); }
.tmg-chip[aria-pressed="false"] { color: var(--tmg-text-muted); background: transparent; border-style: dashed; font-weight: 500; }
.tmg-chip[aria-pressed="false"]:hover { color: var(--tmg-text); border-style: solid; }
.tmg-chip[aria-pressed="false"] .tmg-gbadge { filter: grayscale(1); opacity: 0.55; }
.tmg-chip[aria-pressed="false"] .tmg-glyph { opacity: 0.6; }
.tmg-chip:focus-visible, .tmg-dt-tab:focus-visible, .tmg-tip-play:focus-visible, .tmg-tx-time:focus-visible,
.tmg-tl-marker:focus-visible, .tmg-tl-stage:focus-visible, .tmg-tx:focus-visible, .tmg-dt-panel:focus-visible,
.tmg-tl-cluster-item:focus-visible, .tmg-audio-seek:focus-visible, .tmg-tl-turn:focus-visible {
    outline: 2px solid var(--tmg-brand-600); outline-offset: 2px;
}
.tmg-tl-marker:focus-visible { outline-offset: -3px; }
.tmg-method summary:focus-visible, .tmg-tl-table summary:focus-visible, .tmg-tip-more summary:focus-visible {
    outline: 3px solid var(--tmg-brand-600); outline-offset: 3px; border-radius: 12px;
}
.tmg-chip-count {
    min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tmg-surface-2); text-align: center;
    font-variant-numeric: tabular-nums; color: var(--tmg-text-muted); font-size: 0.74rem; font-weight: 600; line-height: 18px;
}

.tmg-tl-stagewrap { position: relative; }
/* Edge fades say "there is more this way" when the stage scrolls sideways (narrow screens). */
.tmg-tl-stagewrap::before, .tmg-tl-stagewrap::after {
    content: ""; position: absolute; top: 1px; bottom: 1px; width: 30px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
}
.tmg-tl-stagewrap::before { left: 1px; border-radius: 14px 0 0 14px; background: linear-gradient(90deg, var(--tmg-tl-stage-bg) 15%, transparent); }
.tmg-tl-stagewrap::after { right: 1px; border-radius: 0 14px 14px 0; background: linear-gradient(270deg, var(--tmg-tl-stage-bg) 15%, transparent); }
.tmg-tl-stagewrap[data-scroll-left="true"]::before, .tmg-tl-stagewrap[data-scroll-right="true"]::after { opacity: 1; }
.tmg-tl-stage {
    position: relative; min-height: 104px; overflow-x: auto; overflow-y: hidden; border-radius: 14px;
    background: var(--tmg-tl-stage-bg); border: 1px solid var(--tmg-border); padding: 4px 0 4px; scrollbar-width: thin;
}
.tmg-tl-stage[data-state="loading"] { background-image: linear-gradient(90deg, transparent 0%, rgba(127, 140, 160, 0.14) 50%, transparent 100%); background-size: 220% 100%; }
.tmg-tl-stage[data-state="error"], .tmg-tl-stage[data-state="empty"] { padding: 18px; color: var(--tmg-text-muted); font-size: 0.88rem; }
.tmg-tl-map { margin: 6px 0 0; }
.tmg-tl-map[hidden] { display: none; }
.tmg-tl-map { position: relative; height: 22px; }
.tmg-tl-map::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 3px; background: var(--tmg-gauge-track); }
.tmg-tl-map-thumb { position: absolute; top: 0; height: 5px; min-width: 18px; border-radius: 3px; background: var(--tmg-brand); }
.tmg-tl-map-hint { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-size: 11px; color: var(--tmg-text-muted); }
@media (prefers-reduced-motion: no-preference) {
    .tmg-tl-stage[data-state="loading"] { animation: tmg-shimmer 1.5s ease-in-out infinite; }
    @keyframes tmg-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
    @keyframes tmg-fade-in { from { opacity: 0; } }
    .tmg-tl-stage.is-entering .tmg-tl-turn, .tmg-tl-stage.is-entering .tmg-tl-pace, .tmg-tl-stage.is-entering .tmg-tl-marker {
        animation: tmg-fade-in 0.45s ease-out backwards;
    }
    .tmg-tl-stage.is-entering .tmg-tl-lane--ai .tmg-tl-turn { animation-delay: 0.08s; }
    .tmg-tl-stage.is-entering .tmg-tl-lane--pace .tmg-tl-pace { animation-delay: 0.16s; }
    .tmg-tl-stage.is-entering .tmg-tl-marker { animation-delay: 0.24s; }
    /* The turn lines are revealed left to right once (the canvas only, never a card ancestor), like the recording's waveform. */
    .tmg-tl-stage.is-entering .tmg-tl-turncanvas { animation: tmg-wave-reveal 0.42s ease-out backwards; }
    .tmg-tl-stage.is-entering .tmg-tl-lane--ai .tmg-tl-turncanvas { animation-delay: 0.06s; }
}
/* 480px keeps the stage from scrolling sideways on a tablet-width window (the stage is about 486px wide at 900px); 24px on the right holds the hit area of a marker at the very end of the call. */
.tmg-tl-plot { position: relative; min-width: 480px; padding-right: 24px; }
.tmg-tl-lane { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); align-items: center; margin: 0; }
.tmg-tl-lane-label { gap: 6px; padding-left: 14px; font-size: 0.6875rem; white-space: nowrap; font-weight: 600; letter-spacing: 0.01em; color: var(--tmg-text-muted); }
.tmg-tl-lane-label .tmg-glyph { width: 12px; height: 12px; }
.tmg-tl-track { position: relative; }
/* Time grid: a quiet line under every ruler label and a fainter one halfway between, behind every lane (the sticky lane labels cover it on the left). */
.tmg-tl-grid { position: absolute; left: var(--tl-label); right: 24px; top: 20px; bottom: 0; pointer-events: none; }
.tmg-tl-gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--tmg-tl-grid); }
.tmg-tl-gridline.is-minor { border-left: 1px dashed var(--tmg-tl-grid-minor); }
/* Speaking lanes: one canvas per lane (drawn by the script) of thin, spaced, round-capped lines mirrored about a bright centre line; each turn is one lens-shaped lobe with a fainter, taller
   ghost layer behind it. The shape is the same for every turn and is decoration: in the transcript tier a turn's peak height is its estimated pace (--h, set by the script; the AI's
   turns are all one height) and nothing is measured from audio. The recording's own waveform (.tmg-tl-track--wave) is the same family of lines but drawn from the real peaks.
   Over the canvas each turn is an empty, transparent block that carries the hit area, the tooltip, the hover tint and the "current" ring. */
.tmg-tl-track--turns { height: 44px; }
.tmg-tl-track--pace { height: 12px; border-radius: 5px; background: var(--tmg-surface-3); }
.tmg-tl-track--events { height: 28px; }
/* Lane separators: a hairline above every event lane, and a little air between the speaking lanes and the events. */
.tmg-tl-row--events { border-top: 1px solid var(--tmg-tl-sep); }
.tmg-tl-row--turns + .tmg-tl-row--events, .tmg-tl-row--wave + .tmg-tl-row--events, .tmg-tl-row--pace + .tmg-tl-row--events, .tmg-tl-row--pitch + .tmg-tl-row--events { margin-top: 4px; }
.tmg-tl-row--turns + .tmg-tl-row--turns { margin-top: 2px; }
.tmg-tl-row--turns .tmg-tl-lane-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--tmg-speaker-you); }
.tmg-tl-lane--ai.tmg-tl-row--turns .tmg-tl-lane-label::before { background: var(--tmg-speaker-ai); }
.tmg-ca-root[data-hide-hesitation] .tmg-tl-lane[data-lane="ev-hesitation"],
.tmg-ca-root[data-hide-filler] .tmg-tl-lane[data-lane="ev-filler"],
.tmg-ca-root[data-hide-hedge] .tmg-tl-lane[data-lane="ev-hedge"],
.tmg-ca-root[data-hide-question] .tmg-tl-lane[data-lane="ev-question"],
.tmg-ca-root[data-hide-interruption] .tmg-tl-lane[data-lane="ev-interruption"],
.tmg-ca-root[data-hide-pause] .tmg-tl-lane[data-lane="ev-pause"],
.tmg-ca-root[data-hide-deadair] .tmg-tl-lane[data-lane="ev-deadair"],
.tmg-ca-root[data-hide-pitch] .tmg-tl-lane[data-lane="pitch"] { display: none; }
.tmg-tl-track--ruler { height: 16px; }
.tmg-tl-tick { position: absolute; top: 1px; transform: translateX(-50%); font-size: 0.6875rem; font-weight: 500; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
.tmg-tl-tick:first-child { transform: none; }
.tmg-tl-turncanvas { pointer-events: none; }
.tmg-tl-turn {
    --c: var(--tmg-speaker-you);
    position: absolute; top: 2px; bottom: 2px; min-width: 4px; border-radius: 9px; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.tmg-tl-turn[data-who="ai"] { --c: var(--tmg-speaker-ai); }
.tmg-tl-turn:hover { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent); }
.tmg-tl-turn.is-current { box-shadow: 0 0 0 2px var(--tmg-tl-stage-bg), 0 0 0 4px var(--tmg-brand-600); }
.tmg-tl-pace { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 4px; background: var(--tmg-brand); opacity: calc(0.2 + var(--pace, 0) * 0.8); cursor: pointer; }
.tmg-tl-layer { position: absolute; left: var(--tl-label); right: 24px; top: 0; bottom: 0; pointer-events: none; }
.tmg-tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tmg-brand-600); box-shadow: 0 0 0 1px var(--tmg-surface-2); }
.tmg-tl-playhead::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--tmg-brand-600); border: 2px solid var(--tmg-surface-2); box-sizing: border-box; }
/* One marker is one real moment, never moved off its time; a dense lane merges neighbours into one counted marker. The 44px width is the
   hit area and the minimum spacing between markers, so neighbours never overlap. */
.tmg-tl-marker {
    position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; display: flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
}
.tmg-tl-marker .tmg-gbadge { transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
/* With a recording, a marker plays that moment: the badge lifts a little under the pointer or focus and settles when pressed, so it reads as a button. */
.tmg-tl-card[data-recording="available"] .tmg-tl-marker:not(.is-span):hover .tmg-gbadge, .tmg-tl-card[data-recording="available"] .tmg-tl-marker:not(.is-span):focus-visible .tmg-gbadge { transform: scale(1.12); }
.tmg-tl-card[data-recording="available"] .tmg-tl-marker:not(.is-span):active .tmg-gbadge { transform: scale(0.96); }
.tmg-tl-marker:hover .tmg-gbadge, .tmg-tl-marker:focus-visible .tmg-gbadge {
    background: color-mix(in srgb, var(--k) 24%, var(--tmg-surface));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--k) 14%, transparent);
}
/* A merged marker: the badge gets a second disc peeking out behind it, and the count sits as a small bubble at its top right, so the badge itself stays centred on the moments' time. */
.tmg-tl-marker.is-cluster .tmg-gbadge { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 34%, transparent), 3px -2px 0 -1px var(--tmg-tl-stage-bg), 4px -3px 0 -1px color-mix(in srgb, var(--k) 45%, transparent); }
/* Tucked onto the badge's shoulder (overlapping the disc a little), so even "×10" stays clear of the next marker 44px away. */
.tmg-tl-count {
    position: absolute; left: calc(50% + 3px); top: calc(50% - 19px); min-width: 15px; padding: 0 3px; border-radius: 999px; pointer-events: none;
    background: var(--tmg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k, var(--tmg-text-muted)) 38%, var(--tmg-border)); text-align: center;
    font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: -0.01em; color: var(--tmg-text); font-variant-numeric: tabular-nums;
}
.tmg-tl-tip {
    position: absolute; z-index: 6; max-width: 280px; padding: 8px 11px; border-radius: 9px; transform: translateX(-50%);
    background: var(--tmg-text); color: var(--tmg-surface); font-size: 0.78rem; line-height: 1.35; pointer-events: none; box-shadow: var(--tmg-shadow-md);
}
.tmg-tl-tip[hidden] { display: none; }
.tmg-tl-tip-title { font-weight: 700; }
.tmg-tl-tip-line { opacity: 0.92; margin-top: 2px; }
.tmg-tl-readout:empty { display: none; }
.tmg-tl-readout { min-height: 1.5em; margin-top: 8px; font-size: 0.82rem; color: var(--tmg-text-muted); }
.tmg-tl-cluster-title { font-weight: 600; color: var(--tmg-text); margin-bottom: 4px; }
.tmg-tl-cluster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow-y: auto; }
.tmg-tl-cluster-item {
    min-height: 36px; max-width: 100%; padding: 4px 12px; border: 1px solid var(--tmg-border); border-radius: 10px; background: var(--tmg-surface);
    color: var(--tmg-text); font-size: 0.8rem; text-align: left; cursor: pointer;
}
.tmg-tl-cluster-item:hover { background: var(--tmg-brand-50); border-color: var(--tmg-brand-200); }
.tmg-tl-table { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--tmg-tl-sep); }
.tmg-tl-table summary {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 2px; list-style: none;
    font-size: 0.8rem; font-weight: 600; color: var(--tmg-text-muted); cursor: pointer; border-radius: 8px;
}
.tmg-tl-table summary::-webkit-details-marker { display: none; }
.tmg-tl-table summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 0.15s ease; }
.tmg-tl-table[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.tmg-tl-table summary:hover { color: var(--tmg-text); }
.tmg-tl-table table { font-size: 0.82rem; margin-top: 4px; }
/* Inline (not inline-flex): an inline-flex item takes its baseline from the empty glyph, which lifted the words above the separating commas. */
.tmg-tl-ev { display: inline; white-space: nowrap; }
.tmg-tl-ev .tmg-glyph { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }
/* The table's play controls: one real button per event that plays the recording from that moment (a small play triangle and its clock time; 44px tall on touch widths). */
.tmg-tl-ev-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.tmg-tl-ev-play {
    display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 1px 9px 1px 6px; border: 1px solid var(--tmg-border); border-radius: 999px;
    background: var(--tmg-surface); color: var(--tmg-text); font-size: 0.78rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.tmg-tl-ev-play .bi { font-size: 0.8rem; color: var(--tmg-brand-600); }
.tmg-tl-ev-play:hover { background: var(--tmg-brand-50); border-color: var(--tmg-brand-200); }
.tmg-tl-ev-play:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; }

/* ---------------- acoustic tier: waveform, pace heat strip, spans, legend ---------------- */
.tmg-tl-track--wave { position: relative; cursor: default; user-select: none; -webkit-user-select: none; }
/* Only a recording that can be played gets the pointer: with none (or one retention has removed) the waveform shows where a moment sits and offers nothing to click. */
.tmg-tl-card[data-recording="available"] .tmg-tl-track--wave { cursor: pointer; }
.tmg-tl-track--duo { height: 56px; }
.tmg-tl-track--solo { height: 64px; }
.tmg-tl-canvas { position: absolute; left: 0; top: 0; display: block; transition: opacity 0.25s ease; }
/* The played portion is the same drawing in a box that grows with the playhead; once playback has started the rest recedes. */
.tmg-tl-played {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; overflow: hidden; pointer-events: none; border-radius: 6px 0 0 6px;
    background: color-mix(in srgb, var(--tmg-brand) 9%, transparent);
}
.tmg-tl-stage[data-played="true"] .tmg-tl-track--wave > .tmg-tl-canvas { opacity: 0.4; }
.tmg-tl-lane--trainee .tmg-tl-track--wave, .tmg-tl-lane--ai .tmg-tl-track--wave, .tmg-tl-lane--recording .tmg-tl-track--wave { border-radius: 6px; }
.tmg-tl-stage[data-waveform="speakers"] .tmg-tl-lane--trainee .tmg-tl-lane-label::before,
.tmg-tl-stage[data-waveform="speakers"] .tmg-tl-lane--ai .tmg-tl-lane-label::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; vertical-align: 0;
}
.tmg-tl-stage[data-waveform="speakers"] .tmg-tl-lane--trainee .tmg-tl-lane-label::before { background: var(--tmg-speaker-you); }
.tmg-tl-stage[data-waveform="speakers"] .tmg-tl-lane--ai .tmg-tl-lane-label::before { background: var(--tmg-speaker-ai); }
.tmg-tl-stage[data-waveform="speakers"] .tmg-tl-lane--trainee { margin-bottom: 0; }
.tmg-tl-cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--tmg-ca-muted); opacity: 0.5; pointer-events: none; }
.tmg-tl-cursor[hidden] { display: none; }
/* Pace heat strip: one quiet sequential tint (lighter is slower, darker is faster); no window = a gap in the track. */
.tmg-tl-track--heat { height: 14px; background: transparent; }
.tmg-tl-track--heat::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--tmg-tl-hair); }
/* Pitch lane: a thin relative line over a hairline (the speaker's own middle for this call). A flatter stretch is a shaded, playable band behind it. The button is the full height of the
   lane (48px) and a little wider than the shading, so it is a 44px target on a phone; only its ::before is drawn. */
.tmg-tl-track--pitch { height: 48px; border-radius: 6px; }
.tmg-tl-pitchcanvas { pointer-events: none; z-index: 1; }
.tmg-tl-flatband {
    position: absolute; top: 0; bottom: 0; z-index: 0; min-width: 6px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: transparent;
}
.tmg-tl-flatband::before {
    content: ""; position: absolute; inset: 2px 0; border-radius: 6px; background: var(--tmg-pitch-flat); box-shadow: inset 0 0 0 1px var(--tmg-pitch-flat-line);
}
.tmg-tl-flatband::after { content: ""; position: absolute; inset: 0 -8px; }
.tmg-tl-flatband:hover::before { filter: brightness(1.08); }
.tmg-ca-root[data-hide-pitch] .tmg-tl-key[data-legend="pitch"] { display: none; }
.tmg-ca-root[data-hide-pitch] .tmg-tl-legend:not(:has(.tmg-tl-key:not([data-legend="pitch"]))) { display: none; }
.tmg-tl-flatband:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 1px; }
.tmg-tl-card:not([data-recording="available"]) .tmg-tl-flatband { cursor: default; }
.tmg-tl-swatch.tmg-tl-swatch--pitch { height: 2px; border-radius: 1px; background: var(--tmg-pitch-line); }
.tmg-tl-swatch.tmg-tl-swatch--flat { height: 10px; background: var(--tmg-pitch-flat); box-shadow: inset 0 0 0 1px var(--tmg-pitch-flat-line); }
/* Each 15 s window is a rounded pill with a small gap to the next; a window with no value shows only the dashed baseline, so a gap reads as a gap. */
.tmg-tl-pace--cell { top: 2px; bottom: 2px; border-radius: 999px; min-width: 2px; }
.tmg-tl-pace--cell:hover { filter: brightness(1.1); outline: 1px solid var(--tmg-brand-600); outline-offset: -1px; }
/* A pause or a silence is drawn at its real width; the button around it is at least 44px so it can be hit. */
.tmg-tl-marker.is-span { border-radius: 8px; }
.tmg-tl-span { display: block; height: 8px; min-width: 4px; max-width: 100%; border-radius: 4px; flex: none; }
.tmg-tl-span--pause { background: var(--tmg-marker-pause); }
.tmg-tl-span--deadair {
    box-sizing: border-box; border: 1.5px solid var(--tmg-marker-pause);
    background: repeating-linear-gradient(135deg, var(--tmg-marker-pause) 0 2px, transparent 2px 6px);
}
.tmg-tl-marker.is-span:hover .tmg-tl-span, .tmg-tl-marker.is-span:focus-visible .tmg-tl-span { filter: brightness(1.2); }
.tmg-tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 10px 2px 0; font-size: 0.76rem; color: var(--tmg-text-muted); }
.tmg-tl-legend[hidden] { display: none; }
.tmg-tl-key { display: inline-flex; align-items: center; }
/* Keys echo the drawing: thin spaced lines on a centre line, in the speaker's colour. */
.tmg-tl-swatch { display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin-right: 7px; }
.tmg-tl-swatch--you, .tmg-tl-swatch--ai, .tmg-tl-swatch--both { --c: var(--tmg-speaker-you); width: 20px; height: 14px; border-radius: 0;
    background: linear-gradient(var(--tmg-wave-centre), var(--tmg-wave-centre)) center / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--c) 0 1.5px, transparent 1.5px 4.5px) center / 100% 100% no-repeat; }
.tmg-tl-swatch--ai { --c: var(--tmg-speaker-ai); }
.tmg-tl-swatch--both { --c: var(--tmg-speaker-both); }
/* Transcript-tier keys: a tiny lens of lines per speaker, and three rising lines for "peak height is the estimated pace in that turn". */
.tmg-tl-swatch--turn { --c: var(--tmg-speaker-you); position: relative; width: 26px; height: 14px; border-radius: 0;
    background: linear-gradient(var(--tmg-wave-centre), var(--tmg-wave-centre)) center / 100% 1px no-repeat; }
.tmg-tl-swatch--turn::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c) 0 1.5px, transparent 1.5px 4.5px);
    -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 96%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 96%, transparent 100%); }
.tmg-tl-swatch--turn-ai { --c: var(--tmg-speaker-ai); }
.tmg-tl-swatch--heights { --c: var(--tmg-speaker-you); width: 14px; height: 14px; border-radius: 0;
    background: linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 40% no-repeat, linear-gradient(var(--c), var(--c)) 4.5px 100% / 1.5px 70% no-repeat,
        linear-gradient(var(--c), var(--c)) 9px 100% / 1.5px 100% no-repeat; }
.tmg-tl-ramp {
    display: inline-block; width: 56px; height: 8px; margin: 0 7px; border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tmg-brand) 20%, transparent), var(--tmg-brand));
}
.tmg-tl-voicenote { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 8px; }
.tmg-tl-voicenote i { margin-top: 2px; color: var(--tmg-band); }
@media (prefers-reduced-motion: no-preference) {
    @keyframes tmg-wave-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .tmg-tl-stage.is-entering .tmg-tl-track--wave > .tmg-tl-canvas { animation: tmg-wave-reveal 0.42s ease-out backwards; }
    .tmg-tl-stage.is-entering .tmg-tl-lane--ai .tmg-tl-track--wave > .tmg-tl-canvas { animation-delay: 0.06s; }
}

/* ---------------- "Experimental" badge, measured-source line, tip badges ---------------- */
.tmg-exp {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--tmg-band-line); background: var(--tmg-band-soft); color: var(--tmg-band);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; cursor: help;
}
.tmg-exp i { font-size: 0.68rem; }
.tmg-tip-badges { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- voice & tone cards ---------------- */
.tmg-voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.tmg-voice-wait + .tmg-voice-grid, .tmg-dt-callout + .tmg-voice-grid { margin-top: 16px; }
.tmg-voice-card { min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--tmg-border); border-radius: 16px; background: var(--tmg-surface-2); }
.tmg-voice-card[data-withheld="true"] { border-style: dashed; }
.tmg-voice-head { display: block; margin-bottom: 4px; }
.tmg-voice-head .tmg-dt-h4 { margin: 0; }
.tmg-voice-head .tmg-exp { margin-top: 7px; }
.tmg-voice-big { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.tmg-voice-big small { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--tmg-text-muted); }
.tmg-voice-big--none { color: var(--tmg-text-muted); }
.tmg-steady { position: relative; height: 10px; margin: 14px 8px 6px; border-radius: 999px; background: var(--tmg-gauge-track); }
.tmg-steady-zone { position: absolute; top: -3px; bottom: -3px; border-radius: 999px; background: var(--tmg-gauge-band-quiet); }
.tmg-steady-dot {
    position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: var(--tmg-surface); border: 3px solid var(--tmg-gauge-knob); box-shadow: var(--tmg-shadow-sm);
}
.tmg-steady-scale, .tmg-steps-scale { display: flex; justify-content: space-between; margin: 0 4px; font-size: 0.6875rem; color: var(--tmg-text-muted); }
.tmg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 5px; }
.tmg-step { display: block; height: 10px; border-radius: 5px; background: var(--tmg-gauge-track); }
.tmg-step.is-on { background: linear-gradient(90deg, var(--tmg-gauge-g0), var(--tmg-gauge-g1)); }
.tmg-voice-slot[hidden] { display: none; }
/* Pitch variety card: the same quiet bar as volume steadiness, plus the trainee's own usual as a tick. No guide zone, no good or bad colour: there is no norm for how much a voice should move. */
.tmg-steady-usual { position: absolute; top: -4px; bottom: -4px; width: 14px; margin-left: -7px; border-radius: 7px; background: var(--tmg-gauge-usual); box-shadow: inset 0 0 0 1.2px var(--tmg-gauge-usual-edge); }
/* The pitch card is the featured one: it takes the whole row, figure and bar on the left, the comparison, the flatter stretches and the statement on the right. */
.tmg-voice-card--pitch { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px 36px; align-items: start; }
.tmg-pitch-main, .tmg-pitch-side { min-width: 0; }
.tmg-voice-card--pitch .tmg-pitch-side > .tmg-pitch-delta { margin-top: 6px; }
@media (max-width: 767.98px) { .tmg-voice-card--pitch { grid-template-columns: minmax(0, 1fr); } .tmg-voice-card--pitch .tmg-pitch-side > .tmg-pitch-delta { margin-top: 10px; } }
.tmg-voice-card--pitch .tmg-pitch-delta { margin-top: 10px; color: var(--tmg-text); font-weight: 600; font-size: 0.84rem; }
.tmg-voice-card--pitch .tmg-pitch-statement { margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--tmg-border); font-size: 0.76rem; line-height: 1.4; }
.tmg-voice-card--pitch .tmg-tip-evidence { margin-top: 8px; }
/* A withheld pitch card is one column (no floating empty second column). With a baseline the card leads with a plain phrase and the figure is secondary. */
.tmg-voice-card--pitch[data-withheld="true"] { grid-template-columns: minmax(0, 1fr); }
.tmg-voice-card--pitch .tmg-pitch-lead { font-size: 1.25rem; line-height: 1.25; margin: 6px 0 2px; text-wrap: balance; }
.tmg-voice-card--pitch .tmg-pitch-figure { margin: 0 0 6px; font-size: 0.9rem; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
/* The trainee's usual is a tick on the bar and is named above it. */
.tmg-steady--pitch.has-usual { margin-top: 32px; }
.tmg-steady-usual-label { position: absolute; top: -28px; transform: translateX(-50%); font-size: 0.6875rem; line-height: 1; white-space: nowrap; color: var(--tmg-text-muted); pointer-events: none; }
.tmg-voice-wait { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding: 16px 18px; border: 1px dashed var(--tmg-border); border-radius: 16px; background: var(--tmg-surface-2); }
.tmg-voice-wait-bars { display: flex; align-items: center; gap: 3px; height: 40px; flex: none; }
.tmg-voice-wait-bars i { display: block; width: 4px; border-radius: 2px; background: var(--tmg-gauge-track); }
.tmg-voice-wait-bars i:nth-child(1) { height: 10px; } .tmg-voice-wait-bars i:nth-child(2) { height: 22px; } .tmg-voice-wait-bars i:nth-child(3) { height: 34px; }
.tmg-voice-wait-bars i:nth-child(4) { height: 18px; } .tmg-voice-wait-bars i:nth-child(5) { height: 38px; } .tmg-voice-wait-bars i:nth-child(6) { height: 26px; }
.tmg-voice-wait-bars i:nth-child(7) { height: 32px; } .tmg-voice-wait-bars i:nth-child(8) { height: 14px; } .tmg-voice-wait-bars i:nth-child(9) { height: 8px; }
.tmg-voice-wait-body { flex: 1 1 260px; min-width: 0; }
.tmg-voice-wait-body p { color: var(--tmg-text-muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes tmg-voice-pulse { 50% { opacity: 0.4; } }
    .tmg-voice-wait-bars i { animation: tmg-voice-pulse 1.4s ease-in-out infinite; }
    .tmg-voice-wait-bars i:nth-child(2n) { animation-delay: 0.18s; }
    .tmg-voice-wait-bars i:nth-child(3n) { animation-delay: 0.36s; }
}

/* ---------------- rhythm: articulation beside pace, pauses, latency, dead air ---------------- */
.tmg-rhythm-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tmg-rhythm-head .tmg-dt-h4 { margin: 0; }
.tmg-pair { display: grid; gap: 8px; margin: 4px 0 2px; }
.tmg-pair-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 12px; font-size: 0.86rem; }
.tmg-pair-label { color: var(--tmg-text-muted); }
.tmg-pair-track { display: block; height: 9px; border-radius: 999px; background: var(--tmg-gauge-track); overflow: hidden; }
.tmg-pair-bar { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--tmg-brand) 45%, transparent); }
.tmg-pair-bar--speaking { background: linear-gradient(90deg, var(--tmg-gauge-g0), var(--tmg-gauge-g1)); }
.tmg-pair-val { font-weight: 700; text-align: right; }
.tmg-pair-val small { font-weight: 500; color: var(--tmg-text-muted); }
.tmg-dt-block .tmg-rhythm-facts { margin-top: 16px; }
.tmg-fact--withheld { border-style: dashed; }
.tmg-fact-why { display: block; margin-top: 4px; font-size: 0.74rem; line-height: 1.35; color: var(--tmg-text-muted); }
.tmg-fact .tmg-exp { margin-top: 7px; }
.tmg-rhythm-hear { margin-top: 6px; }
.tmg-hear-group { margin-top: 12px; }
.tmg-hear-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tmg-text-muted); }
.tmg-hear-group .tmg-tip-evidence { margin-top: 6px; }
@media (max-width: 575.98px) {
    .tmg-pair-row { grid-template-columns: minmax(0, 1fr) 4.6rem; }
    .tmg-pair-row .tmg-pair-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------- coaching tips ---------------- */
.tmg-tip-list { display: grid; gap: 12px; }
.tmg-tip-more { margin-top: 12px; }
.tmg-tip-more summary {
    display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px dashed var(--tmg-border); border-radius: 12px;
    color: var(--tmg-brand); font-weight: 600; font-size: 0.86rem; cursor: pointer; list-style: none;
}
.tmg-tip-more summary::-webkit-details-marker { display: none; }
.tmg-tip-more[open] summary { margin-bottom: 12px; }
[data-tmg-theme="dark"] .tmg-tip-more summary { color: var(--tmg-brand-600); }
.tmg-tip {
    border: 1px solid var(--tmg-border); border-left: 4px solid var(--tmg-band); border-radius: 14px;
    padding: 14px 16px; background: var(--tmg-surface); box-shadow: var(--tmg-shadow-sm);
}
.tmg-tip--strength { border-left-color: var(--tmg-brand); }
.tmg-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tmg-tip-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; color: var(--tmg-text-muted); }
.tmg-tip--strength .tmg-tip-kind { color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-tip--strength .tmg-tip-kind { color: var(--tmg-brand-600); }
.tmg-tip--focus .tmg-tip-kind { color: var(--tmg-band); }
.tmg-tip-cat { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; background: var(--tmg-surface-3); color: var(--tmg-text-muted); font-weight: 600; }
.tmg-tip-observation { font-size: 0.95rem; font-weight: 600; line-height: 1.45; margin: 0 0 6px; }
.tmg-tip-why { font-size: 0.86rem; color: var(--tmg-text-muted); margin: 0 0 10px; line-height: 1.45; }
.tmg-tip-why span, .tmg-tip-try span { font-weight: 700; margin-right: 4px; }
.tmg-tip-try { display: flex; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--tmg-brand-50); border: 1px solid var(--tmg-brand-200); font-size: 0.88rem; line-height: 1.45; }
.tmg-tip-try > i { color: var(--tmg-brand); font-size: 1.05rem; line-height: 1.3; }
.tmg-tip-try span { color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-tip-try > i, [data-tmg-theme="dark"] .tmg-tip-try span { color: var(--tmg-brand-600); }
.tmg-tip-evidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.tmg-tip-play {
    display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 14px 5px 11px; border-radius: 12px; text-align: left;
    border: 1px solid var(--tmg-brand-200); background: var(--tmg-surface); color: var(--tmg-brand); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease;
}
[data-tmg-theme="dark"] .tmg-tip-play { color: var(--tmg-brand-600); }
.tmg-tip-play:hover:not(:disabled) { background: var(--tmg-brand-50); }
.tmg-tip-play > i { font-size: 1.1rem; }
.tmg-tip-play-text { display: flex; flex-direction: column; line-height: 1.25; }
.tmg-tip-play small { color: var(--tmg-text-muted); font-weight: 500; font-size: 0.72rem; }
.tmg-tip-play:disabled { opacity: 0.6; cursor: not-allowed; }
.tmg-tip-flash { min-height: 1.2em; margin: 6px 0 0; font-size: 0.78rem; color: var(--tmg-text-muted); }
.tmg-tip-flash:empty { min-height: 0; margin: 0; }

/* ---------------- synced transcript ---------------- */
.tmg-tx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; font-size: 0.76rem; color: var(--tmg-text-muted); }
.tmg-tx-key { display: inline-flex; align-items: center; gap: 6px; }
.tmg-tx {
    display: flex; flex-direction: column; gap: 10px; max-height: min(780px, calc(100vh - 150px)); min-height: 280px; overflow-y: auto; padding: 14px;
    background: var(--tmg-surface-2); border: 1px solid var(--tmg-border); border-radius: 16px;
}
.tmg-tx-row { display: flex; }
.tmg-tx-row--you { justify-content: flex-end; }
.tmg-tx-bubble { max-width: 88%; min-width: 0; padding: 8px 13px 10px; border: 1px solid var(--tmg-border); }
.tmg-tx-row--ai .tmg-tx-bubble { background: var(--tmg-surface); border-radius: 16px 16px 16px 5px; }
.tmg-tx-row--you .tmg-tx-bubble { background: var(--tmg-speaker-you-soft); border-color: var(--tmg-speaker-you-border); border-radius: 16px 16px 5px 16px; }
.tmg-tx-row.is-current .tmg-tx-bubble { box-shadow: 0 0 0 2px var(--tmg-brand-600); }
.tmg-tx-row.tmg-tx-focus .tmg-tx-bubble { animation: tmg-tx-flash 2.6s ease-out; }
@keyframes tmg-tx-flash { from { box-shadow: 0 0 0 3px var(--tmg-brand-600); } to { box-shadow: 0 0 0 3px transparent; } }
.tmg-tx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tmg-tx-who { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.tmg-tx-row--ai .tmg-tx-who { color: var(--tmg-speaker-ai); }
.tmg-tx-row--you .tmg-tx-who { color: var(--tmg-speaker-you); }
[data-tmg-theme="dark"] .tmg-tx-row--ai .tmg-tx-who { color: var(--tmg-ca-muted); }
.tmg-tx-row--ai .tmg-tx-who { color: var(--tmg-ca-muted); }
.tmg-tx-time {
    position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; min-height: 22px;
    border: 0; border-radius: 6px; background: transparent; color: var(--tmg-ca-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
button.tmg-tx-time { cursor: pointer; }
button.tmg-tx-time:hover { background: var(--tmg-surface-3); color: var(--tmg-brand); }
button.tmg-tx-time::after { content: ""; position: absolute; inset: -10px -6px; }
.tmg-tx-text { font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; color: var(--tmg-text); }
.tmg-tx-row[data-start] .tmg-tx-bubble { transition: box-shadow 0.15s ease; }
.tmg-ca-root[data-recording="available"] .tmg-tx-row[data-start] .tmg-tx-bubble { cursor: pointer; }

.tmg-tx-mark { --mk: var(--tmg-text-muted); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--mk); border-radius: 2px; }
.tmg-tx-mark[data-kind="hesitation"] { --mk: var(--tmg-marker-hesitation); text-decoration-style: wavy; text-decoration-thickness: 1.5px; }
.tmg-tx-mark[data-kind="filler"] { --mk: var(--tmg-marker-filler); text-decoration-style: dotted; text-decoration-thickness: 2.5px; }
.tmg-tx-mark[data-kind="hedge"] { --mk: var(--tmg-marker-hedge); text-decoration-style: dashed; }
.tmg-tx-mark[data-kind="question"] { --mk: var(--tmg-marker-question); text-decoration-style: solid; text-decoration-thickness: 1.5px; }
.tmg-tx-mark[data-kind="interruption"] { --mk: var(--tmg-marker-interrupt); text-decoration-style: double; }
.tmg-tx-key .tmg-tx-mark { font-size: 0.78rem; }

/* Filter chips: a kind switched off loses its marker on the timeline and its underline in the transcript. */
.tmg-ca-root[data-hide-hesitation] .tmg-tl-marker[data-kind="hesitation"],
.tmg-ca-root[data-hide-filler] .tmg-tl-marker[data-kind="filler"],
.tmg-ca-root[data-hide-hedge] .tmg-tl-marker[data-kind="hedge"],
.tmg-ca-root[data-hide-question] .tmg-tl-marker[data-kind="question"],
.tmg-ca-root[data-hide-interruption] .tmg-tl-marker[data-kind="interruption"],
.tmg-ca-root[data-hide-pause] .tmg-tl-marker[data-kind="pause"],
.tmg-ca-root[data-hide-deadair] .tmg-tl-marker[data-kind="deadair"] { display: none; }
.tmg-ca-root[data-hide-hesitation] .tmg-tx .tmg-tx-mark[data-kind="hesitation"],
.tmg-ca-root[data-hide-filler] .tmg-tx .tmg-tx-mark[data-kind="filler"],
.tmg-ca-root[data-hide-hedge] .tmg-tx .tmg-tx-mark[data-kind="hedge"],
.tmg-ca-root[data-hide-question] .tmg-tx .tmg-tx-mark[data-kind="question"],
.tmg-ca-root[data-hide-interruption] .tmg-tx .tmg-tx-mark[data-kind="interruption"] { text-decoration: none; }

/* ---------------- detail tabs ---------------- */
.tmg-dt { border: 1px solid var(--tmg-border); border-radius: 18px; background: var(--tmg-surface); box-shadow: var(--tmg-shadow-sm); overflow: hidden; }
.tmg-dt-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--tmg-border); background: var(--tmg-surface-2); overflow-x: auto; scrollbar-width: thin; }
.tmg-dt-tab {
    min-height: 48px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent;
    color: var(--tmg-text-muted); font-weight: 600; font-size: 0.92rem; white-space: nowrap; cursor: pointer; margin-bottom: -1px;
}
.tmg-dt-tab:hover { color: var(--tmg-text); }
.tmg-dt-tab[aria-selected="true"] { color: var(--tmg-brand); border-bottom-color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-dt-tab[aria-selected="true"] { color: var(--tmg-brand-600); }
.tmg-dt-panel { padding: 20px 22px 22px; }
.tmg-dt-panel[hidden] { display: none; }
.tmg-dt-lead { font-size: 1.04rem; font-weight: 500; line-height: 1.5; margin: 0 0 1.1rem; max-width: 70ch; }
.tmg-dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; }
.tmg-dt-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 28px; margin-top: 1.4rem; }
.tmg-dt-block { margin-top: 1.4rem; min-width: 0; }
.tmg-dt-grid > .tmg-dt-block, .tmg-dt-columns > .tmg-dt-block { margin-top: 0; }
.tmg-dt-h4 { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tmg-text-muted); margin: 0 0 0.6rem; }
.tmg-dt-note { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--tmg-text-muted); }
.tmg-dt-callout { display: flex; gap: 14px; padding: 16px; border-radius: 14px; background: var(--tmg-surface-2); border: 1px solid var(--tmg-border); }
.tmg-dt-callout > i { font-size: 1.6rem; color: var(--tmg-band); line-height: 1; }
.tmg-dt-callout p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.5; }
.tmg-dt-list { margin: 14px 0 0; padding-left: 1.2rem; font-size: 0.88rem; color: var(--tmg-text-muted); line-height: 1.6; }
.tmg-dt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 1.4rem; }
.tmg-dt-block .tmg-dt-facts { margin-top: 0; }
.tmg-fact { padding: 10px 14px; border: 1px solid var(--tmg-border); border-radius: 13px; background: var(--tmg-surface-2); }
.tmg-fact-n { display: block; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tmg-fact-l { display: block; font-size: 0.76rem; color: var(--tmg-text-muted); margin-top: 2px; }

.tmg-bars-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tmg-bars-title { font-weight: 600; font-size: 0.88rem; }
.tmg-bars-total { font-size: 0.76rem; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
.tmg-bars-empty { margin: 0; font-size: 0.8rem; color: var(--tmg-text-muted); }
.tmg-bars-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tmg-bars-list li { display: grid; grid-template-columns: minmax(64px, 120px) minmax(0, 1fr) 22px; align-items: center; gap: 10px; font-size: 0.84rem; }
.tmg-bars-key { overflow-wrap: anywhere; }
.tmg-bars-bar { display: block; height: 8px; border-radius: 999px; background: var(--tmg-gauge-track); overflow: hidden; }
.tmg-bars-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tmg-brand); }
.tmg-bars-n { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.tmg-split { display: flex; height: 12px; gap: 2px; border-radius: 999px; overflow: hidden; background: var(--tmg-gauge-track); }
.tmg-split > span { display: block; min-width: 0; }
.tmg-split-open, .tmg-split-you { background: var(--tmg-brand); }
.tmg-split-closed, .tmg-split-i { background: var(--tmg-speaker-ai); }
.tmg-split-other { background: var(--tmg-border); }
.tmg-split-we { background: var(--tmg-band); }
.tmg-split-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 0.78rem; color: var(--tmg-text-muted); }
.tmg-split-legend b { color: var(--tmg-text); font-variant-numeric: tabular-nums; margin-left: 2px; }
.tmg-qlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tmg-qlist li { display: grid; grid-template-columns: 3rem auto minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 0.86rem; }
.tmg-qlist-time { color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.tmg-qlist-kind { font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--tmg-surface-3); color: var(--tmg-text-muted); white-space: nowrap; }
.tmg-qlist-kind--open { background: var(--tmg-brand-50); color: var(--tmg-brand); border: 1px solid var(--tmg-brand-200); }
[data-tmg-theme="dark"] .tmg-qlist-kind--open { color: var(--tmg-brand-600); }
.tmg-qlist-text { overflow-wrap: anywhere; }
.tmg-crutch { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tmg-crutch li { display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 12px; border-radius: 999px; background: var(--tmg-surface-2); border: 1px solid var(--tmg-border); font-size: 0.86rem; }
.tmg-crutch b { color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }

/* ---------------- methodology ---------------- */
.tmg-method { border: 1px solid var(--tmg-border); border-radius: 16px; background: var(--tmg-surface-2); }
.tmg-method summary { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; font-weight: 600; cursor: pointer; list-style: none; }
.tmg-method summary::-webkit-details-marker { display: none; }
.tmg-method summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--tmg-text-muted); font-size: 0.9rem; }
.tmg-method[open] summary::after { content: "\F286"; }
.tmg-method-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; padding: 4px 18px 18px; }
.tmg-method-body h4 { font-size: 0.8rem; font-weight: 700; margin: 0 0 4px; }
.tmg-method-body p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--tmg-text-muted); }
.tmg-method-foot { grid-column: 1 / -1; font-size: 0.76rem !important; }

/* ---------------- states ---------------- */
.tmg-ca-state { display: flex; flex-direction: column; gap: 18px; padding: 20px; border: 1px dashed var(--tmg-border); border-radius: 18px; background: var(--tmg-surface-2); }
.tmg-ca-state--note { flex-direction: row; align-items: flex-start; gap: 14px; }
.tmg-ca-state-icon { font-size: 1.5rem; color: var(--tmg-band); line-height: 1.2; }
.tmg-ca-state-title { font-weight: 700; margin-bottom: 2px; }
.tmg-ca-state p { color: var(--tmg-text-muted); font-size: 0.9rem; }
.tmg-ca-state-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tmg-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tmg-skel-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px; border: 1px solid var(--tmg-border); border-radius: 16px; background: var(--tmg-surface); }
.tmg-skel-dial { width: 92px; height: 92px; border-radius: 50%; border: 8px solid var(--tmg-gauge-track); border-bottom-color: transparent; box-sizing: border-box; }
.tmg-skel-line { height: 10px; width: 62%; border-radius: 6px; background: var(--tmg-gauge-track); }
.tmg-skel-line--short { width: 40%; }
@media (prefers-reduced-motion: no-preference) {
    .tmg-skel-card { animation: tmg-skel-pulse 1.6s ease-in-out infinite; }
    @keyframes tmg-skel-pulse { 50% { opacity: 0.55; } }
}

/* ---------------- campaign call analysis (agent side only): turn ribbon, moments ---------------- */
.tmg-cr { display: grid; gap: 6px; margin: 8px 0 4px; }
.tmg-cr-lane { display: grid; grid-template-columns: minmax(64px, 8.5rem) minmax(0, 1fr); align-items: center; gap: 10px; }
.tmg-cr-label { font-size: 0.8rem; font-weight: 600; color: var(--tmg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmg-cr-track { position: relative; height: 32px; border-radius: 8px; background: var(--tmg-surface-2); border: 1px solid var(--tmg-border); }
.tmg-cr-turn { position: absolute; top: 5px; bottom: 5px; min-width: 3px; border-radius: 4px; }
.tmg-cr-turn--agent { background: var(--tmg-speaker-you); opacity: 0.88; }
.tmg-cr-turn--other { background: var(--tmg-speaker-ai); opacity: 0.55; }
.tmg-cr-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--tmg-surface); }
.tmg-cr-axis { display: flex; justify-content: space-between; padding-left: calc(8.5rem + 10px); font-size: 0.72rem; color: var(--tmg-text-muted); font-variant-numeric: tabular-nums; }
.tmg-cr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 0.78rem; color: var(--tmg-text-muted); }
.tmg-cr-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* The campaign ribbon draws solid turn blocks, so its keys stay solid chips (the session timeline's keys are thin lines). */
.tmg-cr-legend .tmg-tl-swatch--you, .tmg-cr-legend .tmg-tl-swatch--ai { width: 12px; height: 8px; border-radius: 3px; background: var(--c); }
.tmg-ca-moments { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 0.8rem; color: var(--tmg-text-muted); }
.tmg-ca-moments > span:first-child { font-weight: 600; }
.tmg-ca-moment { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--tmg-border); background: var(--tmg-surface-2); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .tmg-cr-lane { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
    .tmg-cr-axis { padding-left: 90px; }
}

/* ---------------- course level modal strip ---------------- */
.tmg-strip { margin: 14px 0 6px; padding: 12px 14px 12px; text-align: left; border: 1px solid var(--tmg-border); border-radius: 16px; background: var(--tmg-surface-2); }
.tmg-strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tmg-strip-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.9rem; }
.tmg-strip-title i { color: var(--tmg-brand); }
.tmg-strip-est { font-size: 0.74rem; color: var(--tmg-ca-muted); }
.tmg-strip-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tmg-glance-card--sm { padding: 6px 2px 4px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.tmg-glance-card--sm .tmg-glance-label { font-size: 0.8rem; margin-top: 0; }
.tmg-glance-card--sm .tmg-glance-delta { font-size: 0.72rem; }
.tmg-glance-card--sm .tmg-glance-meta { display: none; }
.tmg-glance-card--sm .tmg-glance-delta { white-space: normal; text-wrap: balance; min-height: 0; }
.tmg-glance-card--sm .tmg-glance-why { font-size: 0.72rem; min-height: 0; }
.tmg-glance-card--sm .tmg-glance-why > p { position: static; margin-top: 4px; padding: 6px 8px; box-shadow: none; font-size: 0.72rem; }
.tmg-strip-tip { display: flex; gap: 9px; padding: 9px 11px; margin-top: 4px; border-radius: 11px; background: var(--tmg-brand-50); border: 1px solid var(--tmg-brand-200); font-size: 0.84rem; line-height: 1.45; }
.tmg-strip-tip > i { color: var(--tmg-brand); line-height: 1.3; }
.tmg-strip-tip span { font-weight: 700; color: var(--tmg-brand); margin-right: 3px; }
[data-tmg-theme="dark"] .tmg-strip-tip > i, [data-tmg-theme="dark"] .tmg-strip-tip span { color: var(--tmg-brand-600); }
.tmg-strip-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.74rem; color: var(--tmg-ca-muted); }
.tmg-strip-foot a { font-weight: 600; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }

/* ---------------- small screens and touch: dials 2x2, timeline scrolls sideways, 44px targets ---------------- */
@media (max-width: 767.98px) {
    .tmg-ca-title { font-size: 1.15rem; }
    .tmg-glance-card { padding: 10px 4px 10px; border-radius: 16px; }
    .tmg-tl-card { padding: 12px 10px 10px; --tl-label: 80px; }
    .tmg-tl-plot { min-width: 640px; }
    .tmg-chip { min-height: 44px; padding: 6px 14px; }
    .tmg-tip-play { min-height: 44px; }
    .tmg-dt-tab { min-height: 48px; padding: 0 14px; }
    .tmg-dt-panel { padding: 16px 14px 18px; }
    .tmg-tx { max-height: 460px; padding: 10px; }
    .tmg-tx-bubble { max-width: 94%; }
    .tmg-method summary { min-height: 48px; }
    .tmg-tl-table summary, .tmg-tip-more summary { min-height: 44px; }
    .tmg-strip-foot a { min-height: 44px; }
    .tmg-qlist li { grid-template-columns: 2.6rem auto minmax(0, 1fr); gap: 8px; }
    .tmg-tl-track--events { height: 44px; }
    .tmg-tl-cluster-item { min-height: 44px; }
    .tmg-tl-ev-play { min-height: 44px; padding: 4px 12px 4px 9px; }
    /* A 44px target without a taller bubble header: the button is 44px tall and pulled back with negative margins. */
    button.tmg-tx-time { min-height: 44px; min-width: 44px; margin: -11px -8px -11px auto; justify-content: center; }
    button.tmg-tx-time::after { inset: 0; }
}
/* The level modal is narrow on a phone: the strip becomes a list (dial left, words right) instead of three squeezed columns. */
@media (max-width: 480px) {
    .tmg-strip-gauges { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .tmg-strip .tmg-glance-card--sm {
        display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "g l" "g d"; align-items: center; column-gap: 14px;
        text-align: left; padding: 4px 0;
    }
    .tmg-strip .tmg-glance-card--sm .tmg-gauge { grid-area: g; max-width: 92px; margin: 0; }
    .tmg-strip .tmg-glance-card--sm .tmg-glance-label { grid-area: l; align-self: end; margin: 0; font-size: 0.92rem; }
    .tmg-strip .tmg-glance-card--sm .tmg-glance-delta, .tmg-strip .tmg-glance-card--sm .tmg-glance-why { grid-area: d; align-self: start; font-size: 0.8rem; max-width: none; }
}
@media (pointer: coarse) {
    .tmg-tl-track--events { height: 44px; }
    .tmg-chip { min-height: 44px; }
    button.tmg-tx-time { min-height: 44px; min-width: 44px; margin: -11px -8px -11px auto; justify-content: center; }
    button.tmg-tx-time::after { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tmg-tl-stage, .tmg-tl-stage *, .tmg-skel-card, .tmg-tx-row.tmg-tx-focus .tmg-tx-bubble { animation: none !important; }
    .tmg-chip, .tmg-tip-play, .tmg-tx-row .tmg-tx-bubble, .tmg-tl-stagewrap::before, .tmg-tl-stagewrap::after, .tmg-tl-canvas { transition: none; }
    .tmg-voice-wait-bars i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tmg-tx-row.tmg-tx-focus .tmg-tx-bubble { box-shadow: 0 0 0 3px var(--tmg-brand-600); }
}

/* ---------------- Phase 3 fix round: experimental badge as a control, inline playback control, timeline polish ---------------- */

/* The "Experimental" badge is a button (keyboard and touch); its note opens under it. */
.tmg-exp { position: relative; cursor: default; padding: 0; }
.tmg-exp-btn {
    display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 1px 9px 1px 7px; border: 0; border-radius: 999px; background: transparent;
    color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; cursor: pointer; min-height: 22px;
}
.tmg-exp-btn:hover { background: color-mix(in srgb, var(--tmg-band) 10%, transparent); }
.tmg-exp-btn:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; }
.tmg-exp-tip {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(260px, 78vw); padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--tmg-border); background: var(--tmg-surface); color: var(--tmg-text); box-shadow: var(--tmg-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.18));
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; white-space: normal; text-align: left;
}
.tmg-exp-tip[hidden] { display: none; }
.tmg-exp-tip[data-align="end"] { left: auto; right: 0; }
.tmg-exp--compact { font-size: 0.66rem; }
.tmg-exp--compact .tmg-exp-btn { padding: 0 7px 0 6px; min-height: 20px; }
/* Touch widths: the badge, the table toggle and a withheld dial's "Not shown" are 44px targets. The pill stays small; the button is taller than it and pulled back with negative margins. */
@media (pointer: coarse), (max-width: 575.98px) {
    .tmg-exp-btn, .tmg-exp--compact .tmg-exp-btn { min-height: 44px; margin: -11px 0; }
    .tmg-tl-table summary { min-height: 44px; }
    .tmg-glance-why > summary { min-height: 44px; margin: -12px 0; }
    .tmg-tl-flatband::after { inset: 0 -12px; }
}
.tmg-tl-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.tmg-rangebar-label .tmg-exp { margin-left: 8px; vertical-align: 1px; }
.tmg-glance-exp { margin-top: 5px; display: flex; justify-content: center; }
.tmg-strip-est .tmg-exp { margin-left: 8px; }

/* The inline "Playing 0:12 to 0:20. · Pause" control that sits under the button that started playback. */
.tmg-tip-flash .tmg-tip-playing { font-variant-numeric: tabular-nums; }
.tmg-tip-stop {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--tmg-border); border-radius: 999px; background: var(--tmg-surface);
    color: var(--tmg-text); font: inherit; font-weight: 600; cursor: pointer;
}
.tmg-tip-stop:hover { background: var(--tmg-brand-50); border-color: var(--tmg-brand-200); }
.tmg-tip-stop:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; }

/* Timeline header: the chips and the player never touch, and the player sits quietly (a light pill, not a dark slab) so the waveform stays the subject. */
.tmg-tl-head { margin-bottom: 10px; }
.tmg-tl-card .tmg-tl-playrow .tmg-audio { width: 100%; max-width: none; background: var(--tmg-surface-2); border-color: var(--tmg-border); box-shadow: none; padding: 4px 12px; }
.tmg-tl-card .tmg-tl-playrow .tmg-audio-time { color: var(--tmg-text-muted); }

/* Lane labels stay put while the stage scrolls sideways, so a narrow screen always shows which lane is You and which is the AI. */
.tmg-tl-lane-label { position: sticky; left: 0; z-index: 4; background: var(--tmg-tl-stage-bg); align-self: stretch; display: flex; align-items: center; }
.tmg-tl-lane--ruler .tmg-tl-lane-label { background: transparent; }

/* ---------------- delivery trends and team delivery (Phase 4): small lines over the last analysed calls, and aggregate bands for managers ---------------- */
.tmg-trends-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 12px; }
.tmg-trends-sub { font-size: 0.8rem; color: var(--tmg-ca-muted); }
/* Cards: four across when there are four, three and two (centred) when there are five, never an orphan in the last row. */
.tmg-trends-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tmg-trends-grid > .tmg-trend { flex: 0 1 calc((100% - 24px) / 3); min-width: 200px; }
.tmg-trends-grid[data-count="4"] > .tmg-trend { flex-basis: calc((100% - 36px) / 4); }
.tmg-trends-grid[data-count="1"] > .tmg-trend, .tmg-trends-grid[data-count="2"] > .tmg-trend { flex-basis: calc((100% - 12px) / 2); max-width: 340px; }
.tmg-trends-rows { display: grid; gap: 6px; margin-top: 12px; }
.tmg-trends-empty { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px dashed var(--tmg-border); border-radius: 14px; background: var(--tmg-surface-2); color: var(--tmg-ca-muted); font-size: 0.9rem; }
.tmg-trends-empty > i { margin-top: 2px; color: var(--tmg-brand); font-size: 1.05rem; }
.tmg-trend { min-width: 0; padding: 12px 14px 10px; border: 1px solid var(--tmg-border); border-radius: 16px; background: linear-gradient(180deg, var(--tmg-surface) 0%, var(--tmg-surface-2) 100%); box-shadow: var(--tmg-shadow-sm); }
.tmg-trend--row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 14px; border-radius: 12px; box-shadow: none; background: var(--tmg-surface-2); }
.tmg-trend--row .tmg-trend-empty { margin: 0; flex: 1 1 260px; }
.tmg-trend-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.tmg-trend-title { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tmg-ca-muted); }
.tmg-trend-figure { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.tmg-trend-latest { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--tmg-text); }
.tmg-trend-unit { font-size: 0.78rem; color: var(--tmg-ca-muted); }
.tmg-trend-delta { margin-top: 1px; font-size: 0.8rem; color: var(--tmg-ca-muted); }
.tmg-trend-svg { display: block; width: 100%; height: auto; margin: 6px 0 0; overflow: visible; }
.tmg-trend-dates { display: flex; justify-content: space-between; margin: 0 0 2px; font-size: 0.7rem; color: var(--tmg-ca-muted); }
.tmg-trend-line { fill: none; stroke: var(--tmg-speaker-you); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tmg-trend-area { stroke: none; }
.tmg-trend-fill-stop--0 { stop-color: var(--tmg-speaker-you); stop-opacity: 0.2; }
.tmg-trend-fill-stop--1 { stop-color: var(--tmg-speaker-you); stop-opacity: 0; }
.tmg-trend-base { stroke: var(--tmg-tl-hair); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.tmg-trend-dot { fill: var(--tmg-surface); stroke: var(--tmg-speaker-you); stroke-width: 1.4; }
.tmg-trend-dot.is-latest { fill: var(--tmg-speaker-you); stroke: var(--tmg-surface); stroke-width: 1.6; }
.tmg-trend-empty { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--tmg-ca-muted); }
.tmg-trend-note { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.35; color: var(--tmg-ca-muted); }
.tmg-trend-table { margin-top: 4px; font-size: 0.78rem; }
.tmg-trend-table summary { cursor: pointer; color: var(--tmg-ca-muted); padding: 4px 0; list-style-position: inside; }
.tmg-trend-table summary:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; border-radius: 4px; }
.tmg-trend-table table { font-size: 0.78rem; }
.tmg-trends-recurring { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--tmg-speaker-you-soft); border: 1px solid var(--tmg-speaker-you-border); font-size: 0.92rem; }
.tmg-trends-recurring > i { color: var(--tmg-speaker-you); font-size: 1.05rem; }
.tmg-trends-recurring small { color: var(--tmg-ca-muted); margin-left: 4px; }

/* The Practice page slim row: one short strip (name, three tiny lines, a link) so the scenario list stays above the fold. On a phone it folds to its header until opened. */
.tmg-trends--slim { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding: 6px 14px; }
.tmg-slim-head { display: contents; }
.tmg-slim-title { order: 0; font-size: 0.85rem; font-weight: 700; color: var(--tmg-ca-muted); white-space: nowrap; }
.tmg-slim-all { order: 3; margin-left: auto; white-space: nowrap; font-size: 0.82rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.tmg-slim-all:hover { text-decoration: underline; }
.tmg-slim-toggle { order: 1; display: none; border: 0; background: transparent; padding: 0 4px; font-size: 0.82rem; font-weight: 600; color: var(--tmg-brand-600); min-height: 44px; }
.tmg-slim-toggle:focus-visible, .tmg-slim-all:focus-visible { outline: 2px solid var(--tmg-brand-600); outline-offset: 2px; border-radius: 4px; }
.tmg-slim-empty { order: 2; flex: 1 1 260px; margin: 0; font-size: 0.82rem; color: var(--tmg-ca-muted); }
.tmg-slim-row { order: 2; display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1 1 auto; }
.tmg-mini { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; }
.tmg-mini-label { grid-column: 1; font-size: 0.72rem; font-weight: 600; color: var(--tmg-ca-muted); }
.tmg-mini-figure { grid-column: 1; white-space: nowrap; }
.tmg-mini-latest { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--tmg-text); }
.tmg-mini-unit { font-size: 0.72rem; color: var(--tmg-ca-muted); }
.tmg-mini-svg { grid-column: 2; grid-row: 1 / span 2; width: 48px; height: 18px; overflow: visible; }

/* Team delivery */
.tmg-team-intro, .tmg-team-foot { font-size: 0.82rem; color: var(--tmg-ca-muted); }
.tmg-team-foot { margin: 14px 0 0; }
.tmg-team-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; margin-top: 10px; }
.tmg-team-band { min-width: 0; padding: 12px 14px; border: 1px solid var(--tmg-border); border-radius: 14px; background: var(--tmg-surface-2); }
.tmg-team-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.tmg-team-band-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tmg-ca-muted); }
.tmg-team-band-value { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; color: var(--tmg-text); }
.tmg-team-band-who { font-size: 0.78rem; font-weight: 500; letter-spacing: 0; color: var(--tmg-ca-muted); }
.tmg-team-band-value small { margin-left: 4px; font-size: 0.74rem; font-weight: 500; color: var(--tmg-ca-muted); letter-spacing: 0; }
.tmg-team-track { position: relative; height: 10px; margin: 12px 4px 6px; border-radius: 999px; background: var(--tmg-gauge-track); }
.tmg-team-iqr { position: absolute; top: -2px; bottom: -2px; border-radius: 999px; background: linear-gradient(90deg, var(--tmg-gauge-g0), var(--tmg-gauge-g1)); opacity: 0.85; }
.tmg-team-median { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tmg-text); box-shadow: 0 0 0 2px var(--tmg-surface-2); }
.tmg-team-scale { display: flex; justify-content: space-between; margin: 0 4px; font-size: 0.7rem; color: var(--tmg-ca-muted); }
.tmg-team-focus { margin-top: 18px; }
.tmg-team-h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
.tmg-team-focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tmg-team-focus-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.92rem; padding: 6px 0; border-bottom: 1px solid var(--tmg-border); }
.tmg-team-focus-row small { color: var(--tmg-ca-muted); }
@media (max-width: 991.98px) { .tmg-trends-grid > .tmg-trend, .tmg-trends-grid[data-count="4"] > .tmg-trend { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 575.98px) {
  .tmg-trends-grid > .tmg-trend, .tmg-trends-grid[data-count="4"] > .tmg-trend { flex-basis: calc((100% - 12px) / 2); min-width: 0; }
  .tmg-trend-latest { font-size: 1.45rem; }
  .tmg-slim-toggle { display: inline-flex; align-items: center; }
  .tmg-trends--slim:not(.is-open) .tmg-slim-row { display: none; }
  .tmg-slim-row { order: 4; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .tmg-mini { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .tmg-mini-svg { grid-column: 1; grid-row: 3; width: 100%; max-width: 72px; }
}
/* Four cards in a narrow panel are a 2 x 2 grid, never 3 + 1: the panel's own width decides, not the window's. */
.tmg-trends { container-type: inline-size; }
@container (max-width: 860px) { .tmg-trends-grid[data-count="4"] > .tmg-trend { flex-basis: calc((100% - 12px) / 2); } }

/* =====================================================================================================================
   Optional paid enrichment (Phase 5): word-level timing, the AI-written summary, the status cards and the confirm dialog.
   Tokens only (dark mode follows the remapped tokens), opacity-only motion, nothing animates under prefers-reduced-motion,
   no transform on any ancestor of the fixed dialog. Enriched figures are always labelled; none of this feeds a grade.
   ===================================================================================================================== */

/* ---- status cards ---- */
.tmg-en { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--tmg-border); }
.tmg-en-head { margin-bottom: 0.8rem; }
.tmg-en-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.tmg-en-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--tmg-border); border-radius: 16px; background: var(--tmg-surface-2); }
.tmg-en-card--wide { grid-column: 1 / -1; }
.tmg-en-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tmg-en-card-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; }
.tmg-en-card-title i { color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-en-card-title i { color: var(--tmg-brand-600); }
.tmg-en-card-what { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--tmg-text-muted); }
.tmg-en-quiet, .tmg-en-warn, .tmg-en-done, .tmg-en-progress { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.88rem; line-height: 1.5; }
.tmg-en-quiet { color: var(--tmg-text-muted); }
.tmg-en-quiet > i, .tmg-en-warn > i, .tmg-en-done > i { flex: none; margin-top: 2px; }
.tmg-en-done { color: var(--tmg-text); }
.tmg-en-done > i { color: var(--tmg-success); }
.tmg-en-warn { padding: 9px 12px; border-radius: 11px; border: 1px solid var(--tmg-tint-warn-border); background: var(--tmg-tint-warn-bg); color: var(--tmg-warn-text); }
[data-tmg-theme="dark"] .tmg-en-warn { color: var(--tmg-text); }
.tmg-en-price { margin: 0; font-size: 0.92rem; }
.tmg-en-price strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.tmg-en-cost { margin: 0; font-size: 0.8rem; color: var(--tmg-text-muted); }
.tmg-en-cost strong { color: var(--tmg-text); font-variant-numeric: tabular-nums; }
.tmg-en-admin { font-size: 0.78rem; overflow-wrap: anywhere; }
.tmg-en-btn { min-height: 44px; align-self: flex-start; }
.tmg-en-notice { margin-top: 4px; }
.tmg-en-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--tmg-brand); }
@media (prefers-reduced-motion: no-preference) { .tmg-en-dot { animation: tmg-en-pulse 1.4s ease-in-out infinite; } @keyframes tmg-en-pulse { 50% { opacity: 0.3; } } }
.tmg-en-admin-detail { margin-top: 2px; font-size: 0.8rem; }
.tmg-en-admin-detail summary { min-height: 32px; cursor: pointer; color: var(--tmg-text-muted); }
.tmg-en-admin-detail dl { display: grid; gap: 4px; margin: 6px 0 0; }
.tmg-en-admin-detail dl > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px; }
.tmg-en-admin-detail dt { font-weight: 600; color: var(--tmg-text-muted); }
.tmg-en-admin-detail dd { margin: 0; overflow-wrap: anywhere; }
.tmg-en-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--tmg-brand-200); background: var(--tmg-brand-50); color: var(--tmg-brand); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
[data-tmg-theme="dark"] .tmg-en-pill { color: var(--tmg-brand-600); }

/* ---- the confirm dialog (a fixed layer; no transform on it or any ancestor) ---- */
.tmg-en-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 42, 0.55); }
.tmg-en-dialog {
    position: fixed; inset: 0; z-index: 1055; margin: auto; width: min(520px, calc(100vw - 24px)); height: fit-content; max-height: calc(100dvh - 24px); overflow-y: auto;
    padding: 20px 22px 18px; border-radius: var(--tmg-radius-lg); background: var(--tmg-surface); color: var(--tmg-text); border: 1px solid var(--tmg-border); box-shadow: var(--tmg-shadow-modal);
}
.tmg-en-dialog:focus { outline: none; }
.tmg-en-dlg-title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.tmg-en-dlg-quote { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.5; padding: 10px 12px; border-radius: 11px; background: var(--tmg-brand-50); border: 1px solid var(--tmg-brand-200); }
.tmg-en-dlg-quote strong { font-variant-numeric: tabular-nums; }
.tmg-en-dlg-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--tmg-text-muted); }
.tmg-en-dlg-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.tmg-en-dlg-list li > i { color: var(--tmg-brand); margin-top: 2px; }
[data-tmg-theme="dark"] .tmg-en-dlg-list li > i { color: var(--tmg-brand-600); }
.tmg-en-dlg-list b { color: var(--tmg-text); }
.tmg-en-dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.tmg-en-dlg-actions .tmg-en-btn { align-self: auto; }
@media (max-width: 575.98px) { .tmg-en-dlg-actions { flex-direction: column-reverse; } .tmg-en-dlg-actions .tmg-en-btn { width: 100%; } }

/* ---- the AI-written summary card (inside the call analysis) ---- */
.tmg-en-summary { padding: 16px 18px; border: 1px solid var(--tmg-border); border-left: 4px solid var(--tmg-brand); border-radius: 16px; background: var(--tmg-surface); box-shadow: var(--tmg-shadow-sm); }
.tmg-en-summary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tmg-en-summary-head .tmg-ca-h3 { margin: 0; }
.tmg-en-summary-note { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 0.82rem; color: var(--tmg-text-muted); }
.tmg-en-summary-note i { color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-en-summary-note i { color: var(--tmg-brand-600); }
.tmg-en-summary-body p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.6; max-width: 72ch; overflow-wrap: anywhere; }
.tmg-en-summary-h4 { margin: 12px 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tmg-text-muted); }
.tmg-en-suggestions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tmg-en-suggestion { padding: 10px 12px; border-radius: 11px; background: var(--tmg-brand-50); border: 1px solid var(--tmg-brand-200); font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.tmg-en-suggestion .tmg-tip-evidence { margin-top: 8px; }

/* ---- enriched pace (Pace & rhythm tab) ---- */
.tmg-en-pace { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--tmg-border); border-radius: 14px; background: var(--tmg-surface-2); }
.tmg-en-pace-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tmg-en-pace-head .tmg-dt-h4 { margin: 0; }
.tmg-en-pace-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.tmg-en-pace-list li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 10px; font-size: 0.84rem; }
.tmg-en-pace-when { font-variant-numeric: tabular-nums; color: var(--tmg-text-muted); white-space: nowrap; }
.tmg-en-pace-n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tmg-en-pace-n small { font-weight: 400; color: var(--tmg-text-muted); }
@media (max-width: 575.98px) { .tmg-en-pace-list li { grid-template-columns: 5.2rem minmax(0, 1fr) 3.8rem; gap: 6px; } }

/* ---- second-pass words in the synced transcript ---- */
.tmg-tx-spbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tmg-tx-splabel { flex: 1 1 280px; display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--tmg-text-muted); }
.tmg-tx-splabel i { margin-top: 2px; color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-tx-splabel i { color: var(--tmg-brand-600); }
.tmg-tx-splabel b { color: var(--tmg-text); }
.tmg-tx-sptoggle { min-height: 44px; }
.tmg-tx-words { display: none; overflow-wrap: anywhere; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--tmg-border); font-size: 0.86rem; line-height: 1.75; color: var(--tmg-text); }
.tmg-tx-row.is-sp-current .tmg-tx-words, .tmg-tx-row:focus-within .tmg-tx-words, .tmg-tx-wrap[data-sp-all] .tmg-tx-words { display: block; }
.tmg-tx-wordshead { display: block; margin-bottom: 1px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tmg-text-muted); }
.tmg-w { padding: 1px 1px; border-radius: 4px; }
.tmg-ca-root[data-recording="available"] .tmg-w { cursor: pointer; }
.tmg-w.is-word { background: var(--tmg-brand-100); color: var(--tmg-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--tmg-brand); box-shadow: 0 0 0 1px var(--tmg-brand-600); }
@media (prefers-reduced-motion: no-preference) { .tmg-w { transition: background-color 0.08s linear; } }

/* ---- second-pass markers on the timeline (own lanes; the chip hides them together) ---- */
.tmg-tl-lane[data-source="second-pass"] .tmg-tl-lane-label { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.1; }
.tmg-tl-lane-sub { display: block; font-size: 0.625rem; font-weight: 500; color: var(--tmg-text-muted); }
/* A halo that follows the glyph's own shape (a box-shadow would be cut off by the diamond and triangle glyphs): the marker is from the second pass. */
.tmg-tl-marker[data-source="second-pass"] { filter: drop-shadow(0 0 1px var(--tmg-brand)) drop-shadow(0 0 1.5px var(--tmg-brand)); }
.tmg-tl-caption i { color: var(--tmg-brand); }
.tmg-ca-root[data-hide-sp] .tmg-tl-lane[data-source="second-pass"],
.tmg-ca-root[data-hide-hesitation] .tmg-tl-lane[data-lane="ev-sp-hesitation"],
.tmg-ca-root[data-hide-filler] .tmg-tl-lane[data-lane="ev-sp-filler"],
.tmg-ca-root[data-hide-hedge] .tmg-tl-lane[data-lane="ev-sp-hedge"] { display: none; }

/* ---- settings: the optional paid enrichment section ---- */
.tmg-en-set { max-width: 720px; margin-top: 1.5rem; scroll-margin-top: 80px; }
.tmg-en-set-intro { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: var(--tmg-text-muted); }
.tmg-en-set-row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--tmg-border); }
.tmg-en-set-row:first-of-type { border-top: 0; padding-top: 0; }
.tmg-en-set-row h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.tmg-en-set-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.86rem; line-height: 1.5; color: var(--tmg-text-muted); }
.tmg-en-set-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; }
.tmg-en-set-facts li > i { margin-top: 2px; color: var(--tmg-brand); }
[data-tmg-theme="dark"] .tmg-en-set-facts li > i { color: var(--tmg-brand-600); }
.tmg-en-set-select { max-width: 280px; min-height: 44px; }
.tmg-en-set-quote { margin: 0; font-size: 0.9rem; font-weight: 500; color: var(--tmg-text); }
.tmg-en-set > .tmg-en-set-facts { margin-bottom: 18px; }
.tmg-en-set-off { margin: 0; padding: 9px 12px; border-radius: 11px; border: 1px dashed var(--tmg-border); background: var(--tmg-surface-2); font-size: 0.88rem; color: var(--tmg-text-muted); }
@media (max-width: 575.98px) { .tmg-en-set-select { max-width: none; width: 100%; } .tmg-en-admin-detail dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* The assistant launcher: a 48px round button in the corner that opens out to its label on hover or keyboard focus, so at rest
   it covers a corner of the page and never a table column. It is not an ancestor of any dialog, so it may use transforms. */
.tmg-assistant-launcher {
    position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; align-items: center; min-width: 48px; height: 48px; padding: 0 15px;
    border-radius: 24px; background: var(--tmg-brand-grad); color: #fff !important; text-decoration: none; font-size: 0.84rem; font-weight: 650;
    box-shadow: 0 10px 26px -6px rgb(15 118 110 / .55), 0 2px 6px rgb(15 23 42 / .18), inset 0 1px 0 rgb(255 255 255 / .22);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tmg-assistant-launcher > i { font-size: 1.1rem; line-height: 1; }
.tmg-assistant-launcher > span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, margin-left .28s cubic-bezier(.2, .8, .2, 1); }
.tmg-assistant-launcher:hover, .tmg-assistant-launcher:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgb(15 118 110 / .6), 0 3px 8px rgb(15 23 42 / .2), inset 0 1px 0 rgb(255 255 255 / .22); }
.tmg-assistant-launcher:hover > span, .tmg-assistant-launcher:focus-visible > span { max-width: 9em; margin-left: 9px; opacity: 1; }
.tmg-assistant-launcher:focus-visible { outline: 3px solid var(--tmg-brand-600); outline-offset: 3px; }
@media (max-width: 576px) { .tmg-assistant-launcher { right: 14px; bottom: 14px; } }
@media (hover: none) { .tmg-assistant-launcher > span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tmg-assistant-launcher, .tmg-assistant-launcher > span { transition: none; } .tmg-assistant-launcher:hover, .tmg-assistant-launcher:focus-visible { transform: none; } }
@media print { .tmg-assistant-launcher { display: none; } }
body:has(.assistant-workspace) .tmg-assistant-launcher{display:none}
/* A dialog owns the screen: the launcher steps aside instead of sitting bright above the dimmed page. */
body:has([role="dialog"]) .tmg-assistant-launcher, body:has(.tmg-modal-backdrop) .tmg-assistant-launcher, body:has(dialog[open]) .tmg-assistant-launcher { display: none; }

/* =====================================================================================================================
   SIGNED-IN SHELL POLISH (October 2026)
   The page card now fills the content column (see .tmg-page-card), so the rules here tidy what sits around and inside it.
   Tokens only; dark mode follows the remapped tokens.
   ===================================================================================================================== */

/* A layout-level notice (the regulatory banner) is as wide as the page card under it and reads as a quiet strip, not a slab. */
.alert.tmg-shell-notice {
    display: flex; align-items: flex-start; gap: 10px; width: min(100%, 1280px); margin: 0 auto 12px; padding: 9px 14px;
    border: 1px solid var(--tmg-border); border-left-width: 1px; border-radius: 12px; background: var(--tmg-surface);
    color: var(--tmg-text-muted); box-shadow: var(--tmg-shadow-sm);
}
.alert.tmg-shell-notice > i { margin-top: 1px; color: var(--tmg-text-muted); }
.alert.tmg-shell-notice--block { display: block; }
.alert-warning.tmg-shell-notice { background: var(--tmg-tint-warn-bg); border-color: var(--tmg-tint-warn-border); color: var(--tmg-warn-text); }

/* Inline code inside the app (environment variable names, placeholders) is a neutral chip, not Bootstrap's pink. */
.tmg-page-card :not(pre) > code {
    padding: 1px 6px; border: 1px solid var(--tmg-border); border-radius: 6px; background: var(--tmg-surface-2);
    color: var(--tmg-text); font-size: 0.82em; overflow-wrap: anywhere;
}

/* Information callouts use the app's own quiet info tint instead of Bootstrap's bright cyan slab (dark mode has its own remap above). */
html:not([data-tmg-theme="dark"]) .tmg-page-card .alert-info {
    background: var(--tmg-tint-info-bg); border-color: rgb(14 116 144 / .18); border-left-color: #0E7490; color: var(--tmg-info-text);
}
html:not([data-tmg-theme="dark"]) .tmg-page-card .alert-info strong { color: #164E63; }
html:not([data-tmg-theme="dark"]) .tmg-page-card .alert-secondary { background: var(--tmg-surface-2); border-color: var(--tmg-border); border-left-color: var(--tmg-text-muted); color: var(--tmg-text); }

/* Team delivery: the range never breaks in the middle ("135–" / "150 wpm"); its caption sits on its own line above it. */
.tmg-team-band-value { white-space: nowrap; }
.tmg-team-band-who { display: block; white-space: normal; }
.tmg-team-band-head { flex-direction: column; align-items: flex-start; gap: 2px; }

/* Section cards are containers, not buttons: they keep still under the pointer (tiles and scenario cards still lift). */
.tmg-page-card .tmg-card:hover { transform: none; box-shadow: var(--tmg-shadow-sm); }
/* No padding here: several cards (the slim trends strip) set their own, and this selector would outrank them. */
.tmg-page-card .tmg-card { border-color: var(--tmg-border); border-radius: 14px; }

/* An empty state inside a card is a soft inset, so the card does not read as a box in a box. */
.tmg-empty { border-radius: 14px; background: linear-gradient(180deg, var(--tmg-surface-2), var(--tmg-surface)); }
.tmg-empty .tmg-empty-icon { border-style: solid; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tmg-brand) 6%, transparent); }
.tmg-empty .tmg-empty-title { font-size: 1.02rem; }

/* Tables: a calmer header and room to breathe now that the card is wide enough to hold them. */
.tmg-table > thead > tr > th { border-bottom-width: 1px; padding-top: 0.6rem; padding-bottom: 0.6rem; white-space: nowrap; }
.tmg-table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.tmg-table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.tmg-table > tbody > tr > td { padding-top: 0.6rem; padding-bottom: 0.6rem; }
/* Plain Bootstrap tables inside the app (ledger entries, admin lists) share the same quiet header and row rhythm. No text-transform here: some of
   these headers are read back as written. */
.tmg-page-card .table:not(.tmg-table) { font-size: 0.9rem; vertical-align: middle; }
.tmg-page-card .table:not(.tmg-table) > thead > tr > th {
    background: var(--tmg-surface-2); border-bottom: 1px solid var(--tmg-border); color: var(--tmg-text-muted);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.tmg-page-card .table:not(.tmg-table) > tbody > tr > td { border-bottom-color: var(--tmg-border); }
.tmg-page-card .table:not(.tmg-table) > tbody > tr:last-child > td { border-bottom-color: transparent; }
.tmg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tmg-table-scroll > .tmg-table { margin-bottom: 0; }

/* Summary tiles inside a dialog are compact, so a worded value ("Not graded") stays on one line. */
.tmg-modal-body .tmg-metric-value { font-size: 1.3rem; line-height: 1.25; }
.tmg-modal-dialog::before { background: var(--tmg-brand-grad); }
.tmg-modal-title { font-weight: 700; letter-spacing: -0.015em; }

/* Course page: the level ladder and its introduction use the wider card. */
.tmg-course-ladder { max-width: 960px; }

/* A short caption for a group of controls in a toolbar ("Send a course"). */
.tmg-toolbar-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tmg-text-muted); white-space: nowrap; }
.tmg-toolbar { border-radius: 12px; }

/* Phones: a row of metric tiles is two across instead of one long stack, and the detail tabs use the width they have. */
@media (max-width: 767.98px) {
    .tmg-page-card .row:not(.tmg-session-meta):has(> [class*="col-"] > .tmg-metric) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-left: 0; margin-right: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
    .tmg-page-card .row:not(.tmg-session-meta):has(> [class*="col-"] > .tmg-metric) > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; }
    .tmg-page-card .row:not(.tmg-session-meta):has(> [class*="col-"] > .tmg-metric) > [class*="col-"]:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tmg-page-card .row:not(.tmg-session-meta):has(> [class*="col-"] > .tmg-metric) .tmg-metric-value { font-size: 1.45rem; }
    .tmg-dt-panel { padding: 16px 14px 18px; }
    .tmg-dt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tmg-stat-row, .tmg-sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .tmg-stat-row > :last-child:nth-child(odd), .tmg-sa-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tmg-stat-tile { padding: 0.85rem 0.5rem; }
    .tmg-stat-num { font-size: 1.7rem; }
    .tmg-stat-cap { font-size: 0.72rem; }
    /* A plain table has no scroll box of its own, so on a phone its headers may wrap rather than push a column out of reach. */
    .tmg-page-card .table:not(.tmg-table) > thead > tr > th { white-space: normal; }
}

/* Column chart that uses the full width of its card (training admin: sessions in the last 14 days). */
.tmg-bar-row.tmg-bar-row--wide { justify-content: space-between; align-items: flex-end; gap: 6px; padding: 8px 4px 0; }
.tmg-bar-row--wide .tmg-bar-col { flex: 1 1 0; min-width: 0; }
.tmg-bar-row--wide .tmg-bar { width: min(100%, 44px); border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--tmg-gauge-g1), var(--tmg-gauge-g0)); }
.tmg-bar-row--wide .tmg-bar.tmg-bar-empty { width: min(100%, 44px); height: 3px; border-radius: 2px; background: var(--tmg-track); }
.tmg-bar-row--wide .tmg-bar-count { min-height: 1.2em; font-weight: 600; }
.tmg-bar-row--wide .tmg-bar-score { font-size: 0.7rem; font-weight: 600; color: var(--tmg-text); font-variant-numeric: tabular-nums; }
.tmg-bar-row--wide .tmg-bar-score.is-none { color: var(--tmg-text-muted); font-weight: 400; }
.tmg-bar-axis { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tmg-border); font-size: 0.78rem; color: var(--tmg-text-muted); }

/* =====================================================================================================================
   ENTRANCE MOTION for charts and tiles (driven by tmg-reveal.js)
   The plain markup is the finished state. For a block on screen the script sets data-rv="pending" (held at the first frame)
   before first paint and then data-rv="run"; a block further down the page stays complete and gets data-rv="run" as it nears the
   viewport. The attribute is removed when the entrance ends, so no animation or transform is kept afterwards.
   Every keyframe below has only a "from" (the end is the element's own style) and the fill is backwards only.
   --rv-i staggers blocks that arrive together; --rv-at is negative when a re-created block carries on mid-entrance.
   Nothing here applies under prefers-reduced-motion or in print, and none of these blocks is an ancestor of a dialog.
   ===================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes tmg-rv-rise { from { opacity: 0; transform: translateY(10px); } }
    @keyframes tmg-rv-fade { from { opacity: 0; } }
    @keyframes tmg-rv-dim { from { opacity: 0.2; } }
    @keyframes tmg-rv-grow-x { from { transform: scaleX(0); } }
    @keyframes tmg-rv-grow-y { from { transform: scaleY(0); } }
    @keyframes tmg-rv-pop { 0% { opacity: 0; transform: scale(0.4); } 65% { opacity: 1; transform: scale(1.14); } }
    @keyframes tmg-rv-slide { from { left: 0%; } }
    @keyframes tmg-rv-wipe { from { clip-path: inset(-10px 100% -10px -10px); } to { clip-path: inset(-10px -10px -10px -10px); } }
    @keyframes tmg-rv-wipe-round { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }

    [data-rv] { --rv-d: calc(var(--rv-at, 0ms) + var(--rv-i, 0) * 55ms); --rv-ease: cubic-bezier(0.22, 0.8, 0.3, 1); }

    /* Tiles and tip cards rise into place. */
    [data-rv].tmg-metric, [data-rv].tmg-stat-tile, [data-rv].tmg-sa-card, [data-rv].tmg-tip { animation: tmg-rv-rise 520ms var(--rv-ease) var(--rv-d) backwards; }

    /* Trend cards: the figure rises, the line is drawn from the first call to the latest, and the latest point lands last. */
    [data-rv].tmg-trend .tmg-trend-figure, [data-rv].tmg-trend .tmg-trend-delta { animation: tmg-rv-rise 480ms var(--rv-ease) var(--rv-d) backwards; }
    [data-rv].tmg-trend .tmg-trend-svg { animation: tmg-rv-wipe 900ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--rv-d) + 120ms) backwards; }
    [data-rv].tmg-trend .tmg-trend-dot.is-latest { transform-box: fill-box; transform-origin: center; animation: tmg-rv-pop 440ms ease-out calc(var(--rv-d) + 860ms) backwards; }
    [data-rv].tmg-mini .tmg-mini-svg { animation: tmg-rv-wipe 700ms cubic-bezier(0.4, 0, 0.2, 1) var(--rv-d) backwards; }

    /* Range bars and the steadiness bars: the guide fades in, the marker travels from the start of the scale to its place. */
    [data-rv].tmg-rangebar .tmg-rangebar-band, [data-rv].tmg-steady .tmg-steady-zone { animation: tmg-rv-fade 500ms ease-out var(--rv-d) backwards; }
    [data-rv].tmg-rangebar .tmg-rangebar-dot, [data-rv].tmg-steady .tmg-steady-dot { animation: tmg-rv-slide 820ms var(--rv-ease) calc(var(--rv-d) + 60ms) backwards; }
    [data-rv].tmg-rangebar .tmg-rangebar-usual, [data-rv].tmg-steady .tmg-steady-usual, [data-rv].tmg-steady .tmg-steady-usual-label { animation: tmg-rv-fade 400ms ease-out calc(var(--rv-d) + 520ms) backwards; }
    [data-rv].tmg-steps .tmg-step.is-on { animation: tmg-rv-dim 360ms ease-out var(--rv-d) backwards; }
    [data-rv].tmg-steps .tmg-step.is-on:nth-child(2) { animation-delay: calc(var(--rv-d) + 150ms); }
    [data-rv].tmg-steps .tmg-step.is-on:nth-child(3) { animation-delay: calc(var(--rv-d) + 300ms); }

    /* Horizontal bars grow from the left, one after another. */
    [data-rv].tmg-bars .tmg-bars-bar i, [data-rv].tmg-pair .tmg-pair-bar, [data-rv].tmg-inline-bar .tmg-inline-bar-fill, [data-rv].tmg-progress-bar-mini .tmg-progress-bar-mini-fill {
        transform-origin: left center; animation: tmg-rv-grow-x 760ms var(--rv-ease) var(--rv-d) backwards;
    }
    [data-rv].tmg-bars li:nth-child(2) .tmg-bars-bar i, [data-rv].tmg-pair .tmg-pair-row:nth-child(2) .tmg-pair-bar { animation-delay: calc(var(--rv-d) + 80ms); }
    [data-rv].tmg-bars li:nth-child(3) .tmg-bars-bar i { animation-delay: calc(var(--rv-d) + 160ms); }
    [data-rv].tmg-bars li:nth-child(4) .tmg-bars-bar i { animation-delay: calc(var(--rv-d) + 240ms); }
    [data-rv].tmg-bars li:nth-child(5) .tmg-bars-bar i { animation-delay: calc(var(--rv-d) + 320ms); }
    [data-rv].tmg-bars li:nth-child(n + 6) .tmg-bars-bar i { animation-delay: calc(var(--rv-d) + 400ms); }
    /* A bar that carries its figure is uncovered instead of stretched, so the figure is never squashed. */
    [data-rv].progress .progress-bar { animation: tmg-rv-wipe 760ms var(--rv-ease) var(--rv-d) backwards; }
    [data-rv].tmg-split { animation: tmg-rv-wipe-round 800ms var(--rv-ease) var(--rv-d) backwards; }

    /* Team bands: the middle-of-the-team bar opens out from its centre, then the median tick lands. */
    [data-rv].tmg-team-band .tmg-team-iqr { animation: tmg-rv-grow-x 820ms var(--rv-ease) var(--rv-d) backwards; }
    [data-rv].tmg-team-band .tmg-team-median { animation: tmg-rv-grow-y 380ms ease-out calc(var(--rv-d) + 560ms) backwards; }
    [data-rv].tmg-team-band .tmg-team-band-value { animation: tmg-rv-fade 500ms ease-out calc(var(--rv-d) + 120ms) backwards; }

    /* Fact tiles arrive in reading order. */
    [data-rv].tmg-dt-facts > .tmg-fact { animation: tmg-rv-rise 460ms var(--rv-ease) var(--rv-d) backwards; }
    [data-rv].tmg-dt-facts > .tmg-fact:nth-child(2) { animation-delay: calc(var(--rv-d) + 55ms); }
    [data-rv].tmg-dt-facts > .tmg-fact:nth-child(3) { animation-delay: calc(var(--rv-d) + 110ms); }
    [data-rv].tmg-dt-facts > .tmg-fact:nth-child(4) { animation-delay: calc(var(--rv-d) + 165ms); }
    [data-rv].tmg-dt-facts > .tmg-fact:nth-child(5) { animation-delay: calc(var(--rv-d) + 220ms); }
    [data-rv].tmg-dt-facts > .tmg-fact:nth-child(n + 6) { animation-delay: calc(var(--rv-d) + 275ms); }

    /* Column charts: each bar grows from the baseline, left to right, and its count follows. */
    [data-rv].tmg-bar-row .tmg-bar:not(.tmg-bar-empty) { transform-origin: center bottom; animation: tmg-rv-grow-y 700ms var(--rv-ease) calc(var(--rv-d) + var(--rv-col, 0) * 32ms) backwards; }
    [data-rv].tmg-bar-row .tmg-bar-count { animation: tmg-rv-fade 380ms ease-out calc(var(--rv-d) + 420ms + var(--rv-col, 0) * 32ms) backwards; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(2) { --rv-col: 1; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(3) { --rv-col: 2; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(4) { --rv-col: 3; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(5) { --rv-col: 4; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(6) { --rv-col: 5; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(7) { --rv-col: 6; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(8) { --rv-col: 7; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(9) { --rv-col: 8; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(10) { --rv-col: 9; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(11) { --rv-col: 10; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(12) { --rv-col: 11; } [data-rv].tmg-bar-row .tmg-bar-col:nth-child(13) { --rv-col: 12; }
    [data-rv].tmg-bar-row .tmg-bar-col:nth-child(n + 14) { --rv-col: 13; }

    /* Admin traffic charts: lines and areas are drawn left to right, bars grow from the axis. */
    [data-rv].tmg-traffic-svg .tmg-chart-line, [data-rv].tmg-traffic-svg .tmg-chart-area { animation: tmg-rv-wipe 1000ms cubic-bezier(0.4, 0, 0.2, 1) var(--rv-d) backwards; }
    [data-rv].tmg-traffic-svg .tmg-chart-bar { transform-box: fill-box; transform-origin: center bottom; animation: tmg-rv-grow-y 700ms var(--rv-ease) var(--rv-d) backwards; }

    /* Empty states: the icon settles in. */
    [data-rv].tmg-empty .tmg-empty-icon { animation: tmg-rv-pop 520ms ease-out var(--rv-d) backwards; }

    /* Waiting to come into view: held at the first frame. */
    [data-rv="pending"], [data-rv="pending"] * { animation-play-state: paused !important; }
}
/* A headline figure counting up: its own text stays in the page (drawn at zero size) and the running figure is shown from the attribute. */
[data-rv-count] { font-size: 0 !important; min-width: var(--rv-w, 0); }
[data-rv-count][data-rv-inline] { display: inline-block; }
[data-rv-count]::after { content: attr(data-rv-count); font-size: var(--rv-fs, 1rem); }
@media print { [data-rv], [data-rv] * { animation: none !important; } }
/* =====================================================================================================================
   LIVE PRACTICE CALL (TrainingBrowserCall: the course level dialog and the standalone practice page)
   A dark "studio" stage in BOTH themes, like the recording player, so the live waveform glows the same way everywhere.
   The waveform itself is drawn on the canvas by tmg-voice-wave.js; its colours are the --vw-* properties below.
   Nothing here is an ancestor of a dialog. All motion stops under prefers-reduced-motion.
   ===================================================================================================================== */
.tmg-call { min-width: 0; }
.tmg-call-stage {
    --vw-ai-0: #0D9488; --vw-ai-1: #2DD4BF; --vw-ai-2: #A7F3D0; --vw-ai-glow: rgba(45, 212, 191, 0.6);
    --vw-you-0: #6366F1; --vw-you-1: #C7D2FE; --vw-you-glow: rgba(129, 140, 248, 0.35); --vw-line: rgba(94, 234, 212, 0.55);
    position: relative; overflow: hidden; padding: 18px 20px 16px; border-radius: 20px; color: #E6F4F1; text-align: left;
    border: 1px solid rgba(94, 234, 212, 0.18);
    background:
        radial-gradient(120% 90% at 88% 0%, rgba(45, 212, 191, 0.17), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, rgba(99, 102, 241, 0.13), transparent 60%),
        linear-gradient(160deg, #0B1B22 0%, #0C2328 55%, #0A1A1F 100%);
    box-shadow: 0 22px 44px -22px rgba(13, 148, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tmg-call-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tmg-call-live {
    display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px;
    background: rgba(248, 113, 113, 0.14); border: 1px solid rgba(248, 113, 113, 0.32); color: #FECACA;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.tmg-call-live > i { width: 7px; height: 7px; border-radius: 50%; background: #F87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.6); }
.tmg-call-clock { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.tmg-call-timer { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #F8FAFC; }
.tmg-call-max { font-size: 0.8rem; color: rgba(203, 213, 225, 0.7); }
.tmg-call-stage[data-ending="true"] .tmg-call-timer { color: #FCD34D; }
.tmg-call-persona { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 13px; margin-top: 12px; min-width: 0; }
.tmg-call-avatar {
    position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #115E59, #0F766E); color: #fff; font-weight: 700; font-size: 1.05rem;
    box-shadow: 0 0 0 2px rgba(11, 27, 34, 1), 0 0 0 3.5px rgba(94, 234, 212, 0.45);
}
.tmg-call-avatar::after { content: ""; position: absolute; inset: -3.5px; border-radius: 50%; border: 2px solid rgba(94, 234, 212, 0.55); opacity: 0; }
.tmg-call-who { min-width: 0; flex: 1 1 180px; }
.tmg-call-name { display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.25; letter-spacing: -0.01em; color: #F8FAFC; overflow-wrap: anywhere; }
.tmg-call-role { margin-top: 1px; font-size: 0.84rem; line-height: 1.35; color: rgba(203, 213, 225, 0.82); overflow-wrap: anywhere; }
/* Whose turn it is: a pill that changes colour with the speaker (teal for the AI caller, indigo for the trainee's turn), matching the wave. */
.tmg-call-status {
    flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 13px 6px 11px; border-radius: 999px;
    background: rgba(129, 140, 248, 0.14); border: 1px solid rgba(165, 180, 252, 0.32); color: #C7D2FE;
    font-size: 0.84rem; font-weight: 600; white-space: nowrap; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.tmg-call-status > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tmg-call-stage[data-mode="speaking"] .tmg-call-status { background: rgba(45, 212, 191, 0.13); border-color: rgba(94, 234, 212, 0.36); color: #5EEAD4; }
.tmg-call-hint { margin-top: 2px; font-size: 0.86rem; line-height: 1.45; color: rgba(203, 213, 225, 0.85); }
/* The wave: faint time grid behind it, and older sound fades out towards the left edge. */
.tmg-voicewave {
    position: relative; height: 132px; margin: 12px -6px 8px;
    background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.07) 0 1px, transparent 1px 60px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
}
.tmg-voicewave > canvas { display: block; width: 100%; height: 100%; }
.tmg-call-progress { height: 3px; border-radius: 999px; background: rgba(148, 163, 184, 0.2); overflow: hidden; }
.tmg-call-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0D9488, #34D399); transition: width 1s linear; }
.tmg-call-stage[data-ending="true"] .tmg-call-progress > span { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.tmg-call-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 13px; }
.tmg-call-legend { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: rgba(203, 213, 225, 0.85); }
.tmg-call-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tmg-call-legend li::before { content: ""; width: 14px; height: 4px; border-radius: 2px; }
.tmg-call-legend .is-ai::before { background: linear-gradient(90deg, var(--vw-ai-0), var(--vw-ai-2)); box-shadow: 0 0 8px var(--vw-ai-glow); }
.tmg-call-legend .is-you::before { background: linear-gradient(90deg, var(--vw-you-0), var(--vw-you-1)); }
/* White on these reds is 4.8:1 or better (the brighter #EF4444 is not). */
.tmg-call-end { min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 650; border: 0; background: linear-gradient(135deg, #B91C1C, #DC2626); box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.75); }
.tmg-call-end:hover, .tmg-call-end:focus-visible { background: linear-gradient(135deg, #991B1B, #B91C1C); }
/* Connecting: the same stage, a ringing handset, no wave yet. */
.tmg-call-stage--connecting { display: flex; align-items: center; gap: 14px; padding: 20px; }
.tmg-call-avatar.is-ringing { font-size: 1.15rem; }
.tmg-call > .alert { border-radius: 14px; }
.tmg-call > .tmg-call-stage + .alert { margin-top: 0.75rem; }
@media (max-width: 575.98px) {
    .tmg-call-stage { padding: 14px 14px 13px; border-radius: 16px; }
    .tmg-voicewave { height: 104px; margin-left: -4px; margin-right: -4px; }
    .tmg-call-timer { font-size: 1.3rem; }
    .tmg-call-foot { justify-content: stretch; }
    .tmg-call-end { flex: 1 1 100%; }
    .tmg-call-persona { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .tmg-call-status { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}
/* A short screen (a phone on its side, a zoomed-in desktop): the wave gives up height first, so End call stays within reach. */
@media (max-height: 720px) { .tmg-voicewave { height: 84px; margin-top: 8px; } }
@media (prefers-reduced-motion: no-preference) {
    @keyframes tmg-call-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); } 60% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); } }
    @keyframes tmg-call-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
    .tmg-call-live > i { animation: tmg-call-live 1.6s ease-out infinite; }
    /* The avatar sends out a ring while its owner is speaking (or the line is ringing). */
    .tmg-call-stage[data-mode="speaking"] .tmg-call-avatar::after, .tmg-call-avatar.is-ringing::after { animation: tmg-call-ring 1.5s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .tmg-call-progress > span, .tmg-call-status { transition: none; } }
@media print { .tmg-call-stage { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }