/* Радар Phase 4 — отчёт по продукту.
   Стилистика заимствована из NEWS AGGREGATOR VK report_kit/styles.py
   (sample-scope бэкграунд, accent-border, цветовая палитра sentiment).
   Самодостаточно — без внешних CDN кроме Bootstrap из base.html. */

:root {
    --r-brand:        #1a237e;
    --r-good:         #2e7d32;
    --r-warn:         #ef6c00;
    --r-bad:          #c62828;
    --r-text:         #1a1a1a;
    --r-text-muted:   #666;
    --r-bg-card:      #ffffff;
    --r-bg-soft:      #f5f5f7;
    --r-bg-quote:     #fafafa;
    --r-border:       #e0e0e0;
    --r-r-sm: 4px; --r-r-md: 8px; --r-r-lg: 12px;
    --r-sp-1: 4px; --r-sp-2: 8px; --r-sp-3: 12px;
    --r-sp-4: 16px; --r-sp-5: 24px; --r-sp-6: 32px;
    --r-shadow:    0 1px 2px rgba(0,0,0,.06);
    --r-shadow-md: 0 2px 6px rgba(0,0,0,.08);
}

.link-back {
    display: inline-block; margin-bottom: var(--r-sp-3);
    color: var(--r-text-muted); text-decoration: none; font-size: .9rem;
}
.link-back:hover { color: var(--r-brand); text-decoration: underline; }

.report-header {
    margin: 0 0 var(--r-sp-5);
    padding-bottom: var(--r-sp-3); border-bottom: 1px solid var(--r-border);
}
.report-title { font-size: 1.75rem; color: var(--r-text); margin: 0 0 var(--r-sp-1); }
.report-sub { color: var(--r-text-muted); font-size: .9rem; margin: 0; }

/* плашка scope (выборка X обсуждений HN, период Y-Z) — копия sample-scope из Среза */
.scope-card {
    margin: var(--r-sp-4) 0;
    padding: var(--r-sp-4) var(--r-sp-5);
    background: linear-gradient(135deg, rgba(239, 108, 0, .12), rgba(239, 108, 0, .04));
    border: 1px solid rgba(239, 108, 0, .25);
    border-left: 4px solid var(--r-warn);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow);
    display: flex; align-items: center; gap: var(--r-sp-5);
}
.scope-num {
    font-size: 2.4rem; font-weight: 700; color: var(--r-warn);
    line-height: 1; min-width: 80px; text-align: center;
}
.scope-text { font-size: .95rem; line-height: 1.5; }
.scope-period, .scope-total {
    color: var(--r-text-muted); font-size: .85rem;
}

/* плашка «нет данных» */
.empty-banner {
    padding: var(--r-sp-6); margin: var(--r-sp-5) 0;
    background: var(--r-bg-soft); border: 1px solid var(--r-border);
    border-radius: var(--r-r-md); text-align: center;
}
.empty-banner h2 { color: var(--r-text-muted); font-size: 1.2rem; margin: 0 0 var(--r-sp-3); }

/* секции отчёта */
.report-section {
    margin: var(--r-sp-5) 0;
    padding: var(--r-sp-4) var(--r-sp-5);
    background: var(--r-bg-card);
    border: 1px solid var(--r-border);
    border-radius: var(--r-r-md);
    box-shadow: var(--r-shadow);
}
.section-title {
    font-size: 1.15rem; font-weight: 600;
    margin: 0 0 var(--r-sp-3);
    color: var(--r-brand);
    border-bottom: 2px solid rgba(26, 35, 126, .15);
    padding-bottom: var(--r-sp-2);
}
.section-empty { color: var(--r-text-muted); font-style: italic; margin: 0; }
.section-meta {
    margin-top: var(--r-sp-3);
    color: var(--r-text-muted); font-size: .85rem;
}
.section-note {
    padding: var(--r-sp-2) var(--r-sp-3);
    background: rgba(239, 108, 0, .08);
    border-left: 3px solid var(--r-warn);
    border-radius: var(--r-r-sm);
    margin: 0 0 var(--r-sp-3);
    font-size: .9rem;
}
.section-note-soft {
    background: var(--r-bg-soft);
    border-left-color: var(--r-border);
    color: var(--r-text-muted);
    margin-top: var(--r-sp-3);
}

/* список subcategory + drilldown */
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry { margin: var(--r-sp-2) 0; }
.entry > details {
    border: 1px solid var(--r-border); border-radius: var(--r-r-sm);
    overflow: hidden;
}
.entry > details > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--r-sp-2) var(--r-sp-3);
    background: var(--r-bg-soft);
    cursor: pointer;
    list-style: none;
}
.entry > details > summary::-webkit-details-marker { display: none; }
.entry > details > summary::before {
    content: "▸ "; color: var(--r-text-muted); margin-right: var(--r-sp-1);
}
.entry > details[open] > summary::before { content: "▾ "; color: var(--r-brand); }
.entry-name { flex: 1; font-weight: 500; color: var(--r-text); }
.entry-count {
    background: var(--r-brand); color: #fff;
    padding: 2px 10px; border-radius: 12px;
    font-size: .85rem; font-weight: 600; cursor: help;
}

/* свёрнутый блок «Единичные упоминания» */
.rare-block {
    margin-top: var(--r-sp-4);
    border: 1px dashed var(--r-border);
    border-radius: var(--r-r-sm);
    background: var(--r-bg-soft);
}
.rare-block > summary {
    padding: var(--r-sp-2) var(--r-sp-3);
    cursor: pointer; font-size: .9rem; color: var(--r-text-muted);
}
.rare-count { font-weight: 400; }
.rare-list { padding: var(--r-sp-2) var(--r-sp-3); }

/* цитаты */
.cite-list { list-style: none; padding: var(--r-sp-2) var(--r-sp-3); margin: 0; }
.cite-item { margin: var(--r-sp-3) 0; padding: var(--r-sp-2) 0; border-bottom: 1px solid var(--r-border); }
.cite-item:last-child { border-bottom: none; }
.cite-quote {
    margin: 0 0 var(--r-sp-1); padding: var(--r-sp-2) var(--r-sp-3);
    background: var(--r-bg-quote);
    border-left: 3px solid var(--r-border);
    font-size: .9rem; line-height: 1.5;
    font-style: italic; color: var(--r-text);
}
.cite-quote.sent-positive { border-left-color: var(--r-good); }
.cite-quote.sent-negative { border-left-color: var(--r-bad); }
.cite-quote.sent-neutral  { border-left-color: var(--r-text-muted); }
.cite-meta {
    font-size: .8rem; color: var(--r-text-muted);
    margin-left: var(--r-sp-3);
}
.cite-sep { margin: 0 var(--r-sp-1); color: var(--r-border); }
.cite-link { color: var(--r-brand); text-decoration: none; font-weight: 500; }
.cite-link:hover { text-decoration: underline; }
.cite-conf { font-family: monospace; font-size: .75rem; }

/* sentiment-pie (горизонтальные бары) */
.sent-pie { display: flex; flex-direction: column; gap: var(--r-sp-2); margin: var(--r-sp-3) 0; }
.sent-row { display: flex; align-items: center; gap: var(--r-sp-3); }
.sent-label { min-width: 110px; font-size: .9rem; font-weight: 500; }
.sent-positive  { color: var(--r-good); }
.sent-neutral   { color: var(--r-text-muted); }
.sent-negative  { color: var(--r-bad); }
.sent-bar { flex: 1; height: 14px; background: var(--r-bg-soft);
    border-radius: var(--r-r-sm); overflow: hidden; }
.sent-fill { height: 100%; transition: width .3s ease; min-width: 1px; }
.sent-fill-positive { background: var(--r-good); }
.sent-fill-neutral  { background: #9e9e9e; }
.sent-fill-negative { background: var(--r-bad); }
.sent-num { min-width: 40px; text-align: right; font-weight: 600; font-size: .9rem; }

/* sentiment-weekly (вертикальные stacked bars) */
.sent-weekly {
    display: flex; align-items: flex-end; gap: var(--r-sp-1);
    margin: var(--r-sp-3) 0; padding: var(--r-sp-3) 0;
    height: 200px;
    border-bottom: 1px solid var(--r-border);
    overflow-x: auto;
}
.week-row {
    flex: 1; min-width: 50px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%;
    cursor: help;
}
.week-bar {
    width: 80%; background: var(--r-bg-soft);
    display: flex; flex-direction: column;
    border-radius: var(--r-r-sm) var(--r-r-sm) 0 0;
    overflow: hidden;
    min-height: 1px;
}
.seg { min-height: 1px; }
.seg-positive { background: var(--r-good); }
.seg-neutral  { background: #9e9e9e; }
.seg-negative { background: var(--r-bad); }
.week-label {
    font-size: .7rem; color: var(--r-text-muted);
    margin-top: var(--r-sp-1); white-space: nowrap;
}
.week-total {
    position: absolute; transform: translateY(-100%);
    font-size: .7rem; color: var(--r-text-muted); padding-top: 2px;
}

/* mobile */
@media (max-width: 720px) {
    .scope-card { flex-direction: column; align-items: flex-start; gap: var(--r-sp-3); }
    .scope-num { font-size: 2rem; min-width: auto; }
    .sent-row { flex-wrap: wrap; }
    .sent-label { min-width: 80px; }
    .sent-weekly { height: 160px; }
    .week-row { min-width: 36px; }
}

/* Phase 4.5: блок «Что важно знать» (executive summary) */
.exec-summary {
    background: linear-gradient(135deg, var(--r-bg-soft) 0%, var(--r-bg) 100%);
    border-left: 4px solid var(--r-accent, #4a7fbb);
    border-radius: var(--r-r-md, 8px);
    padding: var(--r-sp-4, 1.25rem);
    margin: var(--r-sp-4, 1.25rem) 0 var(--r-sp-5, 1.5rem) 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.exec-summary-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--r-sp-3, 1rem);
    margin-bottom: var(--r-sp-3, 1rem);
}
.exec-summary-head .section-title { margin: 0; flex: 1; }
.exec-summary-form { margin: 0; }
.exec-summary-text {
    font-size: 1.05rem; line-height: 1.6;
    margin: 0 0 var(--r-sp-3, 1rem) 0;
    color: var(--r-text, #1a1a1a);
}
.exec-summary-recs-title {
    font-size: 1rem; font-weight: 600;
    margin: var(--r-sp-3, 1rem) 0 var(--r-sp-2, .5rem) 0;
    color: var(--r-text, #1a1a1a);
}
.exec-summary-recs {
    margin: 0; padding-left: 1.25rem;
    line-height: 1.55;
}
.exec-summary-recs li { margin-bottom: var(--r-sp-1, .25rem); }
.exec-summary-meta {
    font-size: .8rem; color: var(--r-text-muted);
    margin-top: var(--r-sp-3, 1rem); margin-bottom: 0;
    border-top: 1px solid var(--r-bg-soft); padding-top: var(--r-sp-2, .5rem);
}
.exec-summary-empty {
    color: var(--r-text-muted); font-style: italic; margin: 0;
}
.btn { padding: .5rem 1rem; border-radius: var(--r-r-sm, 4px); border: 1px solid transparent; cursor: pointer; font-size: .9rem; }
.btn-primary { background: var(--r-accent, #4a7fbb); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }

/* summary_run.html стили */
.run-card {
    background: var(--r-bg, #fff);
    border: 1px solid var(--r-bg-soft, #e8e8e8);
    border-radius: var(--r-r-md, 8px);
    padding: var(--r-sp-4, 1.25rem);
    margin: var(--r-sp-3, 1rem) 0;
}
.run-card-error { border-color: var(--r-bad, #c5413a); background: #fff5f4; }
.run-steps { line-height: 1.55; padding-left: 1.5rem; }
.run-cmd {
    background: #f4f4f4; padding: .5rem .75rem; border-radius: var(--r-r-sm);
    font-family: monospace; font-size: .85rem; overflow-x: auto;
    margin: var(--r-sp-2, .5rem) 0;
}
.run-meta dt { font-weight: 600; margin-top: var(--r-sp-2, .5rem); }
.run-meta dd { margin-left: 1rem; font-family: monospace; font-size: .85rem; word-break: break-all; }
.run-actions { margin: var(--r-sp-4, 1.25rem) 0; }
.run-success { color: var(--r-good, #4a8c4a); font-weight: 500; }
.run-failed { color: var(--r-bad, #c5413a); }
.run-waiting { color: var(--r-text-muted); }
.inline { display: inline; }

/* === Hero card === */
.hero-card {
    margin: var(--r-sp-4, 1.25rem) 0;
    padding: var(--r-sp-4, 1.25rem) var(--r-sp-5, 1.5rem);
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border: 1px solid var(--r-bg-soft, #e8e8e8);
    border-radius: var(--r-r-md, 8px);
    border-left: 4px solid var(--r-accent, #4a7fbb);
}
.hero-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--r-sp-5, 1.5rem);
}
.hero-col h3.hero-title {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--r-text-muted, #666);
    margin: 0 0 var(--r-sp-2, .5rem) 0;
}
.hero-col p { line-height: 1.55; margin: 0 0 var(--r-sp-2, .5rem) 0; }
.hero-list { line-height: 1.55; margin: var(--r-sp-2, .5rem) 0; padding-left: 1.25rem; }
.hero-list li { margin-bottom: var(--r-sp-1, .25rem); }
@media (max-width: 720px) { .hero-grid { grid-template-columns: 1fr; } }

/* === Section head with hint === */
.section-head { margin-bottom: var(--r-sp-3, 1rem); }
.section-head .section-title { margin: 0 0 var(--r-sp-1, .25rem) 0; }
.section-hint {
    font-size: 0.92rem; color: var(--r-text-muted, #555);
    line-height: 1.5; margin: 0;
    max-width: 56rem;
}

/* === Sources table === */
.sources-card {
    margin: var(--r-sp-4, 1.25rem) 0;
    padding: var(--r-sp-4, 1.25rem);
    background: var(--r-bg, #fff);
    border: 1px solid var(--r-bg-soft, #e8e8e8);
    border-radius: var(--r-r-md, 8px);
}
.sources-table {
    width: 100%; border-collapse: collapse; margin-top: var(--r-sp-3, 1rem);
    font-size: 0.95rem;
}
.sources-table th, .sources-table td {
    padding: 0.55rem 0.75rem; text-align: left;
    border-bottom: 1px solid var(--r-bg-soft, #efefef);
}
.sources-table th { font-weight: 600; color: var(--r-text-muted); font-size: 0.85rem; }
.sources-table td.num, .sources-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sources-table td.src-hint { color: var(--r-text-muted); font-size: 0.88rem; }
.sources-table .sources-total td {
    border-top: 2px solid var(--r-bg-soft, #ddd); border-bottom: none;
    font-weight: 600; padding-top: 0.7rem;
}
.sources-meta { margin-top: var(--r-sp-3, 1rem); color: var(--r-text-muted); font-size: 0.88rem; }
.sources-meta summary { cursor: pointer; }
.kw-list { margin-top: var(--r-sp-2, .5rem); line-height: 1.5; font-family: monospace; font-size: 0.82rem; }

/* === Improved exec summary list === */
ol.exec-summary-recs {
    margin: 0; padding-left: 1.5rem; line-height: 1.55;
}
ol.exec-summary-recs li {
    margin-bottom: var(--r-sp-2, .5rem);
    padding-left: 0.25rem;
}

/* === Methodology card === */
.methodology-card {
    margin: var(--r-sp-5, 1.5rem) 0 var(--r-sp-4, 1.25rem) 0;
    padding: var(--r-sp-3, 1rem) var(--r-sp-4, 1.25rem);
    background: #f8f9fc;
    border-radius: var(--r-r-md, 8px);
}
.methodology-card details summary {
    cursor: pointer; padding: var(--r-sp-2, .5rem) 0;
    list-style: revert;
}
.methodology-card .methodology-summary {
    display: inline; margin: 0; font-size: 1.1rem; color: var(--r-text);
}
.methodology-body {
    padding-top: var(--r-sp-3, 1rem); line-height: 1.55;
    color: var(--r-text);
}
.methodology-body h4 {
    font-size: 0.95rem; margin: var(--r-sp-3, 1rem) 0 var(--r-sp-1, .25rem) 0;
    color: var(--r-text);
}
.methodology-body ol, .methodology-body ul {
    margin: 0 0 var(--r-sp-2, .5rem) 0; padding-left: 1.5rem;
}
.methodology-body li { margin-bottom: var(--r-sp-2, .5rem); }
.methodology-body p { margin: var(--r-sp-2, .5rem) 0; }

/* === Header subtitle styling === */
.report-title strong { color: var(--r-accent, #4a7fbb); }
.report-sub { font-size: 0.95rem; color: var(--r-text-muted); }