/* BoilerRoom web UI — monochrome (CMP-30 / CMP-15.N).
 *
 * No colors. Only black, white, and four grays. Lacconic typography. The
 * goal is "spreadsheet for sales calls" — high information density, no
 * decoration. Status meaning is conveyed by typography (bold) or position,
 * never by hue.
 */

:root {
    --fg: #111;
    --fg-muted: #555;
    --fg-faint: #888;
    --bg: #fff;
    --bg-soft: #f6f6f6;
    --rule: #e5e5e5;
    --rule-strong: #999;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Status colour ramp — used sparingly in the redesigned reports
       (CMP-38). The base UI is still monochrome; these tokens only kick in
       on dots, deltas, heatmap cells, mood-meter and money up/down chips. */
    --good: #2f8a4f;
    --good-soft: #d8efde;
    --warn: #c98b1e;
    --warn-soft: #fbe9c8;
    --bad:  #c4423d;
    --bad-soft: #f7d7d4;
    --info: #2c6cb1;

    /* Heatmap (CMP-38 §C — green→amber→red). Calibrated for ≥WCAG-AA
       contrast against either text or the score numeral overlay. */
    --heat-best: #1e7d3a;
    --heat-good: #6eb053;
    --heat-ok:   #e0c241;
    --heat-weak: #e08240;
    --heat-fail: #b52d29;
    --heat-na:   #f0f0f0;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Telegram WebApp safe-area + smooth height */
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}
/* Inside Telegram WebApp: trim padding, hide redundant header (TG already
   shows app title), use the device viewport more aggressively. */
body.in-telegram header.app { padding: 10px 16px; }
body.in-telegram header.app h1 { font-size: 14px; }
body.in-telegram main { padding: 12px 16px 80px; }
body.in-telegram footer.app { display: none; }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--fg); }
a:visited { color: var(--fg-muted); }

header.app {
    border-bottom: 1px solid var(--rule);
    padding: 14px 24px;
    display: flex;
    align-items: baseline;
    gap: 24px;
}
header.app h1 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}
header.app nav a { margin-right: 16px; font-size: 13px; }
header.app .crumbs { color: var(--fg-faint); font-size: 12px; }

main {
    padding: 16px 24px 80px;
    max-width: 1400px;
}

/* ── filters ─────────────────────────────────────────────────────── */
form.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: end;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 12px;
}
form.filters label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    gap: 4px;
}
form.filters input,
form.filters select {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--bg);
    color: var(--fg);
    min-width: 110px;
}
form.filters input[type="number"] { width: 70px; min-width: 0; }
form.filters button {
    font: inherit;
    padding: 5px 14px;
    background: var(--fg);
    color: var(--bg);
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}
form.filters button.secondary {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--rule-strong);
}

/* ── summary line ────────────────────────────────────────────────── */
.summary {
    color: var(--fg-muted);
    font-size: 12px;
    margin: 0 0 8px;
}
.summary strong { color: var(--fg); font-weight: 600; }

/* ── calls table ─────────────────────────────────────────────────── */
table.calls {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
table.calls thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    font-weight: 500;
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule-strong);
    background: var(--bg);
}
table.calls td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.calls tbody tr:hover { background: var(--bg-soft); }
table.calls td.score { font-family: var(--mono); font-weight: 600; }
table.calls td.score.flagged { text-decoration: underline; text-decoration-thickness: 2px; }
table.calls td.muted { color: var(--fg-faint); }
table.calls td.mono { font-family: var(--mono); font-size: 12px; }
table.calls td.dir-in::before { content: "↓ "; color: var(--fg-faint); }
table.calls td.dir-out::before { content: "↑ "; color: var(--fg-faint); }
table.calls td.dir-int::before { content: "↔ "; color: var(--fg-faint); }
table.calls a.uuid { font-family: var(--mono); font-size: 12px; }

/* Empty state — excludes .micro-bar.empty which is a sparkline placeholder bar */
.empty:not(.micro-bar) {
    text-align: center;
    color: var(--fg-faint);
    font-style: italic;
    padding: 60px 0;
    border: 1px dashed var(--rule-strong);
    margin: 24px 0;
}

/* ── call detail ─────────────────────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
}
.detail-grid > section h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    font-weight: 500;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 6px;
}
dl.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 24px;
}
dl.kv dt {
    color: var(--fg-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
dl.kv dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
}

.score-banner {
    border: 1px solid var(--fg);
    padding: 16px 20px;
    margin: 0 0 24px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}
.score-banner .value {
    font-family: var(--mono);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.score-banner .label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: var(--fg-muted);
}
.score-banner.flagged-low { border-style: double; border-width: 3px; }
.score-banner.flagged-high { border-style: double; border-width: 3px; }
.score-banner.no-score { border-style: dashed; color: var(--fg-faint); }

table.blocks {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
}
table.blocks th, table.blocks td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px dotted var(--rule);
    font-size: 13px;
}
table.blocks td.num { font-family: var(--mono); text-align: right; width: 70px; }

ul.checklist { list-style: none; padding: 0; margin: 0 0 24px; font-size: 13px; }
ul.checklist li { padding: 2px 0; }
ul.checklist li::before { content: "☐  "; color: var(--fg-faint); font-family: var(--mono); }
ul.checklist li.done::before { content: "☑  "; color: var(--fg); }
ul.checklist li.done { color: var(--fg-muted); }

ul.insights { padding: 0 0 0 18px; margin: 0 0 24px; font-size: 13px; }
ul.insights li { margin: 4px 0; }

audio.player {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    /* Strip default chrome for monochrome theme. */
    background: var(--bg-soft);
    border: 1px solid var(--rule-strong);
    height: 38px;
    border-radius: 0;
    /* Custom controls colors via filter (the only way to style native player) */
    filter: grayscale(1) contrast(0.9);
}

pre.transcript {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid var(--rule);
    padding: 14px 16px;
    background: var(--bg-soft);
    margin: 0 0 24px;
    max-height: 70vh;
    overflow: auto;
}

/* ── animations ──────────────────────────────────────────────────── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in       { animation: fade-in-up 0.45s ease-out both; }
.fade-in.delay-1 { animation-delay: 0.05s; }
.fade-in.delay-2 { animation-delay: 0.10s; }
.fade-in.delay-3 { animation-delay: 0.15s; }
.fade-in.delay-4 { animation-delay: 0.20s; }
.fade-in.delay-5 { animation-delay: 0.25s; }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font: inherit;
    padding: 7px 16px;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:hover  { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary:hover { background: var(--bg); color: var(--fg); }
.btn.link {
    background: none; border: none; padding: 0;
    color: var(--fg); text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
.btn.link:hover { text-decoration-color: var(--fg); background: none; color: var(--fg); }

/* Match filter buttons to .btn aesthetic */
form.filters button:not(.secondary):not(.link) {
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}
form.filters button:not(.secondary):not(.link):hover {
    background: var(--bg); color: var(--fg); border: 1px solid var(--fg);
}

/* ── owner news-digest (top of /reports/daily) ─────────────────── */
.digest {
    border-top: 2px solid var(--fg);
    border-bottom: 1px solid var(--rule);
    padding: 24px 0 8px;
    margin: 0 0 28px;
}
.digest-headline {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 24px;
    max-width: 780px;
}
.digest-block {
    margin: 0 0 22px;
    max-width: 780px;
}
.digest-block h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0 0 8px;
    border-bottom: none;
    padding-bottom: 0;
}
.digest-block p { margin: 4px 0; }
.digest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.digest-list li {
    padding: 6px 0;
    border-bottom: 1px dotted var(--rule);
}
.digest-list li:last-child { border-bottom: none; }
.severity {
    display: inline-block;
    width: 18px;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--fg-faint);
}
.severity.sev-medium { color: var(--fg-muted); }
.severity.sev-high { color: var(--fg); }
.digest-why { font-size: 14px; line-height: 1.45; }
.digest blockquote {
    font-family: var(--mono);
    font-size: 13px;
    border-left: 2px solid var(--rule-strong);
    margin: 6px 0;
    padding: 4px 12px;
    color: var(--fg-muted);
}
.team-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-faint);
    width: 100px;
}
.digest-meta {
    color: var(--fg-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 28px;
}
.digest-meta button.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    cursor: pointer;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.digest-empty {
    color: var(--fg-muted);
    font-style: italic;
    margin: 0 0 12px;
}

/* ── KPI strip (top of digest) ───────────────────────────────────── */
.metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin: 0 0 28px;
}
.metric {
    background: var(--bg);
    padding: 14px 16px;
    transition: background 0.15s ease;
}
.metric:hover { background: var(--bg-soft); }
.metric-value {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.metric-label {
    margin-top: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
}
.metric.metric-warn .metric-value {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ── card-grid (star / anti) ─────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.call-card {
    border: 1px solid var(--rule-strong);
    padding: 14px 16px;
    background: var(--bg);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.call-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 var(--rule-strong), 0 2px 6px rgba(0,0,0,0.06);
    border-color: var(--fg);
}
.call-card.good { border-left: 3px solid var(--fg); }
.call-card.bad  { border-left: 3px double var(--fg); }
.card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.card-head .muted { color: var(--fg-faint); font-size: 12px; }
.badge {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--rule-strong);
    background: var(--bg-soft);
}
.badge.bad { border-style: double; }
.card-why {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
    color: var(--fg);
    white-space: pre-line;
}

/* ── incidents ───────────────────────────────────────────────────── */
.digest-list .incident { transition: background 0.12s ease; padding: 8px 6px; margin: 0; }
.digest-list .incident:hover { background: var(--bg-soft); }
/* CMP-65 §1: красные акценты по severity — high заливается красным фоном,
   medium получает заметную красную полосу. low остаётся серым. */
.digest-list .incident.sev-high {
    border-left: 4px solid var(--bad);
    background: var(--bad-soft);
    padding-left: 10px;
    font-weight: 500;
}
.digest-list .incident.sev-medium {
    border-left: 3px solid var(--bad);
    padding-left: 11px;
    background: rgba(247, 215, 212, 0.4);
}
.digest-list .incident.sev-low {
    border-left: 2px solid var(--rule-strong);
    padding-left: 12px;
}
.digest-list .incident.incident-clickable { cursor: pointer; }
.digest-list .incident.incident-clickable:hover { background: var(--bad-soft); filter: brightness(0.98); }
.digest-list .incident .severity.sev-high { color: var(--bad); font-size: 14px; }
.digest-list .incident .severity.sev-medium { color: var(--bad); }
a.row-link {
    margin-left: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    transition: text-decoration-color 0.15s ease;
}
a.row-link:hover { text-decoration-color: var(--fg); }

/* ── taboos ──────────────────────────────────────────────────────── */
.taboo-list { list-style: none; padding: 0; margin: 0; }
.taboo {
    border: 1px solid var(--rule-strong);
    border-left: 3px double var(--fg);
    padding: 10px 14px;
    margin: 0 0 10px;
    background: var(--bg);
    transition: background 0.12s ease;
}
.taboo:hover { background: var(--bg-soft); }
.taboo blockquote {
    font-family: var(--mono);
    font-size: 13px;
    margin: 0 0 6px;
    padding: 0;
    border: none;
    color: var(--fg);
}
.taboo-meta {
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.taboo-why {
    margin: 0;
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.45;
}

/* ── team line block ─────────────────────────────────────────────── */
.team-line {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 12px;
    max-width: 720px;
}
.team-tags > div { margin: 4px 0; font-size: 13px; }
.team-tag.warn { color: var(--fg); }
details.numbers-fold {
    border-top: 1px solid var(--rule);
    margin-top: 32px;
    padding-top: 16px;
}
details.numbers-fold summary {
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    padding: 4px 0 12px;
    user-select: none;
}
details.numbers-fold[open] summary { color: var(--fg); }

/* ── reports (daily/weekly) ─────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}
.kpi-grid.kpi-grid-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kpi {
    border: 1px solid var(--rule-strong);
    padding: 14px 16px;
    background: var(--bg);
}
/* CMP-49: traffic-light accent on KPI tiles. Thin left-border, no fill,
   so the page stays minimal. Applied to good (≥7.5) / warn (4..7.5) /
   bad (≤4) score-driven and money-driven tiles. */
.kpi.kpi-good { border-left: 3px solid var(--good); }
.kpi.kpi-warn { border-left: 3px solid var(--warn); }
.kpi.kpi-bad  { border-left: 3px solid var(--bad); }
@media (max-width: 720px) {
    .kpi-grid.kpi-grid-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    margin-bottom: 6px;
}
.kpi-value {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.kpi-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
}

/* CMP-68 §5: collapsible legend under the KPI grid. Subtle, low-contrast,
   tap-to-expand on mobile. */
details.kpi-legend {
    margin: -8px 0 24px;
    font-size: 12px;
    color: var(--fg-muted);
}
details.kpi-legend > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: var(--fg-muted);
    user-select: none;
    list-style: none;
}
details.kpi-legend > summary::-webkit-details-marker { display: none; }
details.kpi-legend > summary::before {
    content: "ⓘ";
    font-size: 13px;
    color: var(--fg-faint);
}
details.kpi-legend[open] > summary::before { content: "✕"; }
.kpi-legend-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 8px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--fg-faint);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
}
.kpi-legend-list dt {
    font-weight: 600;
    color: var(--fg);
    font-size: 12px;
}
.kpi-legend-list dd {
    margin: 0;
    color: var(--fg-muted);
    font-size: 12px;
    line-height: 1.4;
}
@media (max-width: 640px) {
    .kpi-legend-list {
        grid-template-columns: 1fr;
        gap: 4px 0;
        padding: 10px 12px;
    }
    .kpi-legend-list dt { margin-top: 6px; }
    .kpi-legend-list dt:first-child { margin-top: 0; }
    .kpi-legend-list dd { margin-bottom: 6px; padding-left: 0; }
}

/* CMP-58: KPI tiles that drop an inline accordion below the grid. The
   <button> reset is intentional — we want the same look-and-feel as the
   <div> tiles, so we strip browser styles and re-apply ours. */
.kpi-clickable button.kpi {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background 0.1s ease-in-out;
}
.kpi-clickable button.kpi:hover { background: var(--bg-soft); }
.kpi-clickable button.kpi:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -2px;
}
.kpi-clickable button.kpi.kpi-active {
    background: var(--bg-soft);
    box-shadow: inset 0 -3px 0 var(--fg);
}

.calls-accordion {
    border: 1px solid var(--rule-strong);
    margin: 0 0 24px;
    background: var(--bg);
}
.calls-accordion[hidden] { display: none; }
.calls-accordion .accordion-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
}
.calls-accordion .accordion-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.calls-accordion .accordion-count {
    color: var(--fg-faint);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}
.calls-accordion .accordion-loading,
.calls-accordion .accordion-error {
    padding: 16px;
    color: var(--fg-muted);
    font-size: 13px;
}
.calls-accordion .accordion-error { color: var(--bad); }

form.accordion-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: end;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
}
form.accordion-filters label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}
form.accordion-filters input,
form.accordion-filters select {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--fg);
    margin-top: 2px;
    min-width: 0;
}
form.accordion-filters input[type="number"] { width: 76px; }
form.accordion-filters fieldset.flag-group {
    border: 1px solid var(--rule);
    padding: 4px 8px 6px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
form.accordion-filters fieldset.flag-group legend {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    padding: 0 4px;
}
form.accordion-filters fieldset.flag-group label {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
    font-size: 12px;
}
.calls-accordion .accordion-body {
    overflow-x: auto;
}
.calls-accordion table.calls {
    margin: 0;
}

.flag-chip {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
    background: var(--bg);
}
.flag-chip + .flag-chip { margin-left: 4px; }
.flag-chip.flag-bad { color: var(--bad); border-color: var(--bad); }
.flag-chip.flag-good { color: var(--good); border-color: var(--good); }

.report-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 24px;
}
.report-pair section { margin: 0; }

table.weekly-bars td .bar {
    height: 12px;
    background: var(--fg);
    min-width: 1px;
}
table.weekly-bars td:nth-child(3) {
    width: 50%;
}

footer.app {
    border-top: 1px solid var(--rule);
    padding: 12px 24px;
    color: var(--fg-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── CMP-38 redesign: weekly + monthly + index ─────────────────── */

.report-tldr {
    border-top: 2px solid var(--fg);
    padding: 18px 0 4px;
    margin: 0 0 16px;
}
.tldr-headline {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}
.tldr-headline .mood-emoji { font-size: 22px; margin-right: 6px; vertical-align: middle; }

.kpi .kpi-pct { font-size: 14px; color: var(--fg-faint); font-weight: 400; margin-left: 4px; }

/* Status dots/markers used in KPI tiles & inline rows. Position matters,
   not hue — the dot is small enough to read as a glyph too. */
.dot {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    vertical-align: 1px;
}
.dot-good { color: var(--good); }
.dot-mid  { color: var(--warn); }
.dot-bad  { color: var(--bad); }
.dot-na   { color: var(--fg-faint); }

/* Δ chip — compact, used in KPIs, CRM table, manager rows. */
.delta {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0 4px;
    border-radius: 2px;
    margin-left: 4px;
    vertical-align: 1px;
}
.delta.up   { color: var(--good); background: var(--good-soft); }
.delta.down { color: var(--bad);  background: var(--bad-soft); }
.delta.flat { color: var(--fg-faint); background: var(--bg-soft); }

/* Section title — section-level header for report cards. */
.section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0 0 12px;
}
.subsection-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-faint);
    font-weight: 600;
    margin: 18px 0 8px;
}
.report-section { margin: 0 0 28px; }
.degraded-note {
    font-size: 12px;
    color: var(--fg-muted);
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    padding: 6px 10px;
    margin: 0 0 12px;
}

/* §2 sparkline (weekly: 7 days, monthly: 4–5 weeks) */
.sparkline-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
}
.sparkline-row.weeks { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.sparkline-cell {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--fg);
    border: 1px solid var(--rule);
    padding: 4px 4px 6px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.sparkline-cell:hover { background: var(--bg-soft); border-color: var(--rule-strong); }
.sparkline-bar-wrap {
    display: flex;
    align-items: flex-end;
    height: 80px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
}
.sparkline-bar {
    width: 100%;
    background: var(--fg);
    min-height: 2px;
    transition: background 0.12s ease;
}
.sparkline-cell:hover .sparkline-bar { background: var(--info); }
.sparkline-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    line-height: 1.1;
    flex-wrap: wrap;
    gap: 2px 6px;
}
.sparkline-day { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sparkline-num { font-family: var(--mono); font-weight: 600; }
.sparkline-marker { font-size: 10px; }

/* §3 Money */
.money-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin: 0 0 16px;
}
.money-cell { background: var(--bg); padding: 12px 14px; }
.money-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 4px;
}
.money-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.money-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--fg-faint);
}
table.money-table td.money-pos { color: var(--good); font-weight: 600; }
table.money-table td.money-neg { color: var(--bad); font-weight: 600; }
table.money-table tr.row-extra td {
    color: var(--fg-faint);
    font-style: italic;
    border-top: 1px dashed var(--rule);
}

/* §4 Wow-moment quote */
.wow-moment {
    margin: 16px 0 8px;
    padding: 14px 18px;
    border: 1px solid var(--rule-strong);
    border-left: 4px double var(--fg);
    background: var(--bg-soft);
}
.wow-moment blockquote {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.45;
    margin: 0 0 6px;
    color: var(--fg);
}
.wow-moment footer {
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.call-card.costliest {
    border-left: 3px double var(--bad);
    background: var(--bad-soft);
}
.call-card.costliest .badge.bad { background: var(--bg); }
.card-meta { font-size: 12px; color: var(--fg-muted); margin: 4px 0 6px; }

/* §5 Manager-cards */
.manager-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 12px;
}
.manager-card {
    border: 1px solid var(--rule-strong);
    padding: 12px 14px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.manager-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}
.manager-card-icon { font-size: 16px; }
.manager-card-body { display: flex; gap: 10px; align-items: center; }
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.avatar-star    { background: var(--good); }
.avatar-alert   { background: var(--bad); }
.avatar-fighter { background: var(--info); }
.avatar-stable  { background: var(--warn); }
.manager-card-info { min-width: 0; }
.manager-name { font-weight: 600; font-size: 14px; }
.manager-stats { font-size: 12px; color: var(--fg-muted); }
.manager-stats.sub { color: var(--fg-faint); font-size: 11px; }

/* Streak / personal-record badges */
.streak-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}
.streak-badge {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: 14px;
}
.streak-badge .streak-icon { margin-right: 4px; }

/* Micro-spark (used inside manager-card and table row) */
.micro-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    width: 80px;
}
.micro-bar {
    display: inline-block;
    flex: 1 1 0;
    background: var(--fg);
    min-width: 4px;
    height: 30%;
    transition: background 0.12s ease;
}
.micro-bar.empty { background: var(--rule); }
.manager-card .micro-spark { width: 100%; height: 18px; }

/* §6 Patterns table */
.patterns-table .trend { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.patterns-table .trend.up   { color: var(--bad); }
.patterns-table .trend.down { color: var(--good); }
.patterns-table .trend.ok   { color: var(--good); }
.patterns-table .delta.up   { color: var(--good); background: transparent; padding: 0; }
.patterns-table .delta.down { color: var(--bad);  background: transparent; padding: 0; }
.trend-cell { width: 40px; text-align: center; }

/* §7 Action items + §8 Anomalies */
.action-list, .anomaly-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.action-list li, .anomaly-list li {
    padding: 8px 12px;
    border-left: 3px solid var(--rule-strong);
    background: var(--bg-soft);
    margin-bottom: 6px;
    line-height: 1.45;
    font-size: 13px;
}
.anomaly-list li { border-left-color: var(--warn); }
.action-icon { display: inline-block; width: 22px; font-size: 14px; }

/* §9 Mood-meter */
.mood-section { margin-top: 28px; }
.mood-meter {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 2px solid var(--rule-strong);
    padding: 18px 22px;
    background: var(--bg);
}
.mood-emoji-large { font-size: 56px; line-height: 1; }
.mood-body { flex: 1; }
.mood-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 4px;
}
.mood-explanation {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg);
}
.mood-meter.mood-wow     { border-color: var(--good); background: var(--good-soft); }
.mood-meter.mood-happy   { border-color: var(--good); }
.mood-meter.mood-neutral { border-color: var(--rule-strong); }
.mood-meter.mood-down    { border-color: var(--warn); background: var(--warn-soft); }
.mood-meter.mood-rage    { border-color: var(--bad);  background: var(--bad-soft); }

/* Report meta footer */
.report-meta {
    color: var(--fg-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 28px 0 8px;
}

/* ── Monthly-only blocks ──────────────────────────────────────── */

/* §2.5 Heatmap */
.heatmap {
    display: grid;
    gap: 4px;
    margin: 0 0 8px;
    max-width: 720px;
}
.heatmap-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 8px;
    text-decoration: none;
    color: var(--fg);
    background: var(--heat-na);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    min-height: 56px;
}
.heatmap-cell:hover { transform: scale(1.04); box-shadow: 0 0 0 2px var(--fg) inset; }
.heatmap-cell.heatmap-pad {
    background: transparent;
    border: 1px dashed var(--rule);
    cursor: default;
    color: var(--fg-faint);
}
.heatmap-cell.heatmap-pad:hover { transform: none; box-shadow: none; }
.heatmap-day {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--bg);
}
.heatmap-score {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--bg);
    text-align: right;
}
.heatmap-cell.heatmap-pad .heatmap-day { color: var(--fg-faint); }
.heatmap-cell.heatmap-best { background: var(--heat-best); }
.heatmap-cell.heatmap-good { background: var(--heat-good); }
.heatmap-cell.heatmap-ok   { background: var(--heat-ok);   color: var(--fg); }
.heatmap-cell.heatmap-ok .heatmap-day, .heatmap-cell.heatmap-ok .heatmap-score { color: var(--fg); }
.heatmap-cell.heatmap-weak { background: var(--heat-weak); }
.heatmap-cell.heatmap-fail { background: var(--heat-fail); }
.heatmap-cell.heatmap-na   { background: var(--heat-na); color: var(--fg-faint); }
.heatmap-cell.heatmap-na .heatmap-day { color: var(--fg-faint); }
.heatmap-legend {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--fg-muted);
}
.heatmap-cell.legend {
    aspect-ratio: auto;
    min-height: 0;
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 11px;
    cursor: default;
}
.heatmap-cell.legend:hover { transform: none; box-shadow: none; }

/* Score-bucket colour for the manager dynamics table cell */
.score-bucket-best { background: var(--good-soft); }
.score-bucket-good { background: var(--good-soft); }
.score-bucket-ok   { background: var(--warn-soft); }
.score-bucket-weak { background: var(--bad-soft); }
.score-bucket-fail { background: var(--bad-soft); font-weight: 700; }

/* §3 Funnel — CSS-only stepped triangles (centered, decreasing width). */
.funnel { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 600px; }
.funnel-step { width: 100%; display: flex; justify-content: center; }
.funnel-bar {
    background: linear-gradient(90deg, var(--info), var(--fg));
    color: var(--bg);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    transition: filter 0.12s ease;
}
.funnel-bar:hover { filter: brightness(1.15); }
.funnel-bar-label { font-size: 13px; font-weight: 600; }
.funnel-bar-count { font-family: var(--mono); font-size: 13px; }
.funnel-bar-count .muted { color: rgba(255,255,255,0.7); }

/* §3b Radar */
.radar-section { max-width: 720px; }
.radar-wrap { position: relative; height: 320px; max-width: 540px; margin: 0 auto; }

/* §4 Revenue bars (per-manager) */
.revenue-bars { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.revenue-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.revenue-name { color: var(--fg-muted); }
.revenue-bar-wrap {
    position: relative;
    height: 22px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    overflow: hidden;
}
.revenue-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--good), var(--info));
    min-width: 2px;
}
.revenue-amt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg);
    text-shadow: 0 0 4px var(--bg), 0 0 6px var(--bg);
}

/* §5 Stars-of-month grid */
.stars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.star-card {
    border: 1px solid var(--rule-strong);
    padding: 14px 16px;
    background: var(--bg);
    position: relative;
}
.star-icon { font-size: 20px; margin-bottom: 4px; }
.star-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 6px;
}
.star-body { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 14px; }
.star-body .badge { margin-left: 8px; }

/* ── Index page ─────────────────────────────────────────────── */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.archive-col h3 { margin-top: 0; }
.archive-list { list-style: none; padding: 0; margin: 0; }
.archive-row { border-bottom: 1px dotted var(--rule); }
.archive-row:last-child { border-bottom: none; }
.archive-row-empty { color: var(--fg-faint); }
.archive-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-decoration: none;
    color: inherit;
    padding: 8px 6px;
    transition: background 0.1s ease;
}
.archive-link:hover { background: var(--bg-soft); }
.archive-row-empty .archive-link { font-style: italic; }
.archive-label { font-size: 13px; }
.archive-meta { font-family: var(--mono); font-size: 12px; display: flex; gap: 10px; }
.archive-num { color: var(--fg-muted); }
.archive-score { font-weight: 700; color: var(--fg); }
.archive-score.muted { color: var(--fg-faint); font-weight: 400; }

/* Mobile tightening for the new dense report layouts. */
@media (max-width: 720px) {
    .sparkline-bar-wrap { height: 60px; }
    .heatmap { max-width: 100%; }
    .heatmap-cell { min-height: 44px; padding: 4px 5px; }
    .heatmap-day { font-size: 11px; }
    .heatmap-score { font-size: 11px; }
    .revenue-row { grid-template-columns: 100px 1fr; }
    .manager-cards { grid-template-columns: 1fr 1fr; }
    .funnel-bar-label { font-size: 12px; }
}

/* ── CMP-49: line-chart trend (weekly + monthly §2) ───────────── */
.trend-chart-wrap {
    position: relative;
    height: 220px;
    max-width: 720px;
    margin: 0 0 12px;
}
.trend-day-links {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 0;
}
.trend-day-links.weeks {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}
.trend-day-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--fg-muted);
    border: 1px solid transparent;
    padding: 4px 4px 6px;
    font-size: 11px;
    line-height: 1.15;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.trend-day-link:hover { background: var(--bg-soft); border-color: var(--rule); }
.trend-day-link .trend-day-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}
.trend-day-link .trend-day-num {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--fg);
    font-size: 12px;
}
.trend-day-link .trend-day-marker { font-size: 10px; }

/* CMP-49 §4: weekly-comparison table inside monthly. Each numeric column
   gets a tiny inline SVG line-chart in its header cell so the trend
   across the 4–5 weeks reads at a glance. */
.weeks-table { width: 100%; border-collapse: collapse; }
.weeks-table th,
.weeks-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
}
.weeks-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--rule-strong);
    vertical-align: bottom;
}
.weeks-table td.mono { font-family: var(--mono); font-size: 12px; }
.weeks-table tr:hover td { background: var(--bg-soft); }
.weeks-table .col-spark {
    display: block;
    margin-top: 6px;
    width: 100%;
    max-width: 120px;
    height: 24px;
}
.weeks-table .col-spark path { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.weeks-table .col-spark circle { fill: var(--fg); }
.weeks-table .col-spark.tone-good path,
.weeks-table .col-spark.tone-good circle { stroke: var(--good); fill: var(--good); }
.weeks-table .col-spark.tone-bad path,
.weeks-table .col-spark.tone-bad circle { stroke: var(--bad); fill: var(--bad); }
.weeks-table .col-spark.tone-good circle,
.weeks-table .col-spark.tone-bad circle { fill: currentColor; }
.weeks-table .row-week { font-weight: 600; }

/* ── CMP-48: Mobile-first /calls/{id} (call detail) ─────────────── *
 * The owner reviews call analyses from a phone (often inside Telegram
 * WebApp). Desktop two-column grid + dense tables don't survive the
 * 375 px viewport — this block reworks score banner, metadata,
 * blocks, transcript and audio for mobile-first. The base UI stays
 * monochrome; the only colour exceptions are the score tiers, where
 * the existing bad/warn/good ramp is used as a minimal traffic light
 * (red 0–4, amber 4–7, green 7–10). */

.score-banner.score-tier-bad   { border-left: 6px solid var(--bad);  background: var(--bad-soft); }
.score-banner.score-tier-warn  { border-left: 6px solid var(--warn); background: var(--warn-soft); }
.score-banner.score-tier-good  { border-left: 6px solid var(--good); background: var(--good-soft); }
.score-banner.score-tier-na    { border-left: 6px solid var(--rule-strong); }
.score-banner.score-tier-bad  .value { color: var(--bad); }
.score-banner.score-tier-warn .value { color: var(--warn); }
.score-banner.score-tier-good .value { color: var(--good); }

.audio-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 8px 0 10px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--rule);
}
.audio-sticky h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    font-weight: 500;
    margin: 0 0 6px;
    border: none;
    padding: 0;
}
.audio-sticky audio.player { margin: 0; height: 44px; }

ul.score-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule-strong);
    background: var(--bg);
    font-size: 14px;
    min-height: 44px;
}
.score-row.score-tier-bad  { border-left-color: var(--bad); }
.score-row.score-tier-warn { border-left-color: var(--warn); }
.score-row.score-tier-good { border-left-color: var(--good); }
.score-row .score-label { flex: 1; min-width: 0; line-height: 1.3; }
.score-row .score-value {
    font-family: var(--mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-size: 15px;
}
.score-row.score-tier-bad  .score-value { color: var(--bad); }
.score-row.score-tier-warn .score-value { color: var(--warn); }
.score-row.score-tier-good .score-value { color: var(--good); }

/* Transcript bubbles. Role prefix ("Менеджер:", "Клиент:") stays
   inline so the original line is preserved verbatim; bubble alignment
   + colour does the visual disambiguation. */
.transcript-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px;
    padding: 12px 10px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.bubble-manager {
    align-self: flex-end;
    background: #e3effb;
    color: var(--fg);
    border-bottom-right-radius: 4px;
}
.bubble-client {
    align-self: flex-start;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    color: var(--fg);
    border-bottom-left-radius: 4px;
}
.bubble-other {
    align-self: center;
    background: transparent;
    color: var(--fg-muted);
    font-size: 12px;
    font-style: italic;
    max-width: 100%;
    text-align: center;
}

details.detail-section { margin: 0 0 16px; }
details.detail-section > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rule);
}
details.detail-section > summary::-webkit-details-marker { display: none; }
details.detail-section > summary > h2 {
    margin: 0;
    flex: 1;
    border: none;
    padding: 0;
}
details.detail-section > summary::after {
    content: "▾";
    color: var(--fg-faint);
    margin-left: 8px;
    transition: transform 0.15s ease;
}
details.detail-section[open] > summary::after { transform: rotate(180deg); }
details.detail-section[open] > dl.kv { margin-top: 10px; }

dl.kv dd.uuid-cell { font-size: 11px; word-break: break-all; }

@media (max-width: 640px) {
    main { padding: 12px 14px 60px; max-width: 100%; }
    body.in-telegram main { padding: 8px 12px 60px; }

    header.app { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
    header.app h1 { font-size: 14px; }
    header.app nav a { margin-right: 10px; font-size: 12px; }
    header.app .crumbs { font-size: 11px; flex-basis: 100%; }

    .detail-grid { grid-template-columns: 1fr; gap: 0; }

    /* CMP-72: на мобиле dl.kv — стек, не 2 колонки. Ключ сверху мелким
       серым шрифтом, значение под ним крупно, между парами — тонкий
       сепаратор. На десктопе остаётся grid 2-колонки. */
    dl.kv {
        display: block;
        margin: 0 0 16px;
    }
    dl.kv dt {
        font-size: 10px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--fg-muted);
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--rule);
    }
    dl.kv > dt:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    dl.kv dd {
        margin: 4px 0 0;
        font-size: 15px;
        line-height: 1.35;
        word-break: break-word;
    }
    dl.kv dd.uuid-cell { font-size: 12px; }

    dl.kv dd a {
        display: inline-block;
        min-height: 44px;
        line-height: 22px;
        padding: 11px 4px;
    }

    .score-banner { padding: 12px 14px; gap: 12px; margin-bottom: 16px; }
    .score-banner .value { font-size: 30px; }
    .score-banner .label { font-size: 10px; }

    .detail-grid > section h2 { font-size: 12px; margin-bottom: 6px; }

    .bubble { max-width: 92%; font-size: 14px; }
    .transcript-chat { padding: 10px 8px; max-height: 60vh; }

    audio.player { height: 44px; }

    ul.checklist li { padding: 6px 0; min-height: 28px; }

    /* Legacy <pre> still gets rendered when transcript_text is empty
       — it's gone in the bubble path. Drop its desktop max-height cap
       so it doesn't double-scroll on tiny viewports. */
    pre.transcript { max-height: none; }
}

/* ── CMP-65: правки 13-05 на /reports/daily ──────────────────────── */

/* §6 Логотип-ссылка в шапке — переход на сегодня без параметров. */
header.app h1 a.logo-link {
    color: inherit;
    text-decoration: none;
}
header.app h1 a.logo-link:hover { text-decoration: underline; }

/* §7 Главный вывод над KPI — формат «утреннее письмо собственнику».
   3–5 коротких абзацев, перенос строк через `white-space: pre-line`,
   крупный читаемый размер. Чёрная вертикальная полоса слева — акцент. */
.owner-headline {
    margin: 0 0 24px;
    padding: 6px 0 6px 16px;
    border-left: 4px solid var(--fg);
    max-width: 820px;
}
.owner-headline-text {
    font-size: 16px;
    line-height: 1.55;
    white-space: pre-line;
    color: var(--fg);
}
@media (max-width: 640px) {
    .owner-headline { padding-left: 10px; }
    .owner-headline-text { font-size: 14.5px; line-height: 1.5; }
}

/* §9 KPI «Проанализировано N/M» — серый суффикс «/ M» при основном N. */
.kpi-value .kpi-of {
    color: var(--fg-faint);
    font-weight: 500;
    font-size: 20px;
    margin-left: 2px;
}

/* §2 Кликабельная плашка «жалобы» в дайджест-полоске.
   Кнопка стилизуется как обычная metric-ячейка, но с красным акцентом
   при наличии жалоб и явным hover-сигналом. */
.metrics-strip .metric-clickable {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.metrics-strip .metric-clickable:hover { background: var(--bg-soft); }
.metrics-strip .metric-clickable:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: -2px;
}
.metrics-strip .metric.metric-bad { background: var(--bad-soft); }
.metrics-strip .metric.metric-bad .metric-value { color: var(--bad); }
.metrics-strip .metric.metric-bad .metric-label { color: var(--bad); font-weight: 600; }
.metrics-strip .metric-clickable.metric-bad:hover {
    background: var(--bad-soft);
    box-shadow: inset 0 -3px 0 var(--bad);
}

/* §8 Хорошие/плохие звонки — более выраженные акценты карточек. */
.call-card.good {
    border-left: 4px solid var(--good);
    background: linear-gradient(90deg, var(--good-soft) 0, var(--bg) 70%);
}
.call-card.bad {
    border-left: 4px double var(--bad);
    background: linear-gradient(90deg, var(--bad-soft) 0, var(--bg) 70%);
}
.call-card.bad .badge.bad { background: var(--bg); }

/* §1 Заголовок блока «Инциденты» — красный, контрастный фон. */
.digest-block.digest-incidents h2 {
    color: var(--bad);
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* §2 Кликабельный чип «жалоба» — выглядит как ссылка-плашка. */
.flag-chip.flag-link {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
}
.flag-chip.flag-link:hover { background: var(--bad-soft); }

/* §3 Скачать звонок — компактная иконка-ссылка в строке аккордеона. */
.row-download-cell { width: 32px; text-align: center; }
a.row-download {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    text-decoration: none;
    color: var(--fg);
    font-size: 12px;
    transition: background 0.12s ease, color 0.12s ease;
}
a.row-download:hover { background: var(--fg); color: var(--bg); }

/* §3 Кнопка «Скачать звонок» на странице звонка — рядом с плеером. */
.audio-sticky a.btn.recording-download {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    font-size: 11px;
}

/* ── CMP-70: правки 14-05 ─────────────────────────────────────── */

/* §5 Кнопка «Назад» в карточке звонка — вверху и внизу.
   Выравнивание совпадает на десктопе и мобилке (всегда слева), чтобы
   взаимодействие читалось одинаково при ротации устройства. */
.call-back-nav {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 12px;
}
.call-back-nav-bottom {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.call-back-nav a.btn.back-btn {
    text-decoration: none;
    font-size: 12px;
}

/* §7 Унификация выравнивания заголовков-«вкладок» внутри карточки звонка.
   Раньше на мобилке h2 у секций уезжал в центр (из-за наследования через
   flex column), а на десктопе оставался слева. Теперь все заголовки и
   summary-«вкладки» выравниваются по левому краю на обоих размерах. */
.detail-grid > section h2,
.audio-sticky h2,
details.detail-section > summary,
details.detail-section > summary > h2 {
    text-align: left;
    justify-content: flex-start;
}
@media (max-width: 640px) {
    .detail-grid > section h2,
    .audio-sticky h2,
    details.detail-section > summary > h2 {
        text-align: left;
    }
}

/* ── CMP-73: блок «Тип лида» на странице звонка ─────────────────
   ``insights.hot_lead.is_hot`` приходит из Sonnet-анализа. Зелёная плашка
   когда клиент проявил конкретный интерес (горячий), серая — когда нет.
   Расширение `.reason` дочитывает обоснование рядом с вердиктом. */
.hot-lead {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    font-size: 13px;
}
.hot-lead-yes {
    color: var(--good);
    border-color: var(--good);
}
.hot-lead-no {
    color: var(--fg-muted);
}
.hot-lead-verdict { font-weight: 600; }
.hot-lead-reason { color: var(--fg-muted); font-weight: 400; }

/* CMP-78: красная плашка о потере записей. Появляется над KPI и owner-
   headline, чтобы собственник сразу понял, почему отчёт пустой. */
.alert.alert-critical.no-audio-banner {
    border: 1px solid var(--bad);
    border-left-width: 4px;
    background: var(--bad-soft);
    color: var(--fg);
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 6px;
    line-height: 1.45;
}
.alert.alert-critical.no-audio-banner strong { color: var(--bad); }