/* ─── Главная v3 (home_v3.js) · Freshli Rest ─────────────────────────────
   Канон: бумага/ink/serif, терра-акцент, без эмодзи/градиентов/теней.
   Цвета ТОЛЬКО через токены из tokens.css; локальные --hv3-* — производные. */

.hv3 {
    /* столбики графика: фолбэки, ниже уточняются через color-mix */
    --hv3-bar-record: var(--green);        /* рекорд месяца */
    --hv3-bar-ok: var(--green);            /* план дня сделан (приглушается ниже) */
    --hv3-bar-miss: var(--amber);          /* недобор (бежевый ниже) */
    --hv3-bar-plain: var(--border);        /* плана на день нет */
    --hv3-bar-today: var(--brand-soft);    /* сегодня — день идёт */
}
@supports (color: color-mix(in srgb, red, blue)) {
    .hv3 {
        --hv3-bar-ok: color-mix(in srgb, var(--green) 45%, var(--bg));
        --hv3-bar-miss: color-mix(in srgb, var(--amber) 28%, var(--bg-soft));
        --hv3-bar-today: color-mix(in srgb, var(--brand) 55%, transparent);
    }
}

/* ── Шапка ── */
.hv3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hv3-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.hv3-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 7px; }
.hv3-fresh.stale .hv3-dot { background: var(--amber); }

/* ── Сводка дня (просто текст) ── */
.hv3-summary { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.hv3-summary .pos, .hv3 .pos { color: var(--green); }
.hv3-summary .neg, .hv3 .neg { color: var(--red); }
.hv3-summary .terra, .hv3 .terra { color: var(--brand); }

/* ── Карты ── */
.hv3-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 10px;
    min-width: 0;
}
.hv3-tap { cursor: pointer; }
.hv3-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.hv3-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.hv3-row3 { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* ── Hero «Прибыль месяца» ── */
.hv3-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hv3-hero-num { font-family: var(--serif); font-size: 40px; line-height: 1.1; color: var(--text); margin-top: 6px; }
.hv3-hero-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.hv3-hero-sub b { color: var(--text); font-weight: 600; }
.hv3-hero-note { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.hv3-badge {
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
    color: var(--text-2); background: var(--bg-soft);
}
.hv3-badge.pos { color: var(--green); border-color: var(--green); background: var(--bg-card); }
.hv3-badge.warn { color: var(--amber); border-color: var(--amber); background: var(--bg-card); }
.hv3-badge.neutral { color: var(--text-2); }

/* прогресс: чёрный факт → светло-терра прогноз → серая риска плана */
.hv3-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-soft); margin-top: 12px; display: flex; overflow: visible; }
.hv3-bar-fact { height: 100%; border-radius: 4px 0 0 4px; background: var(--text); }
.hv3-bar-fc { height: 100%; background: var(--brand-soft); }
@supports (color: color-mix(in srgb, red, blue)) {
    .hv3-bar-fc { background: color-mix(in srgb, var(--brand) 35%, var(--bg-card)); }
}
.hv3-bar-plan { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-3); }

/* ── График по дням ── */
.hv3-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hv3-sec-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.hv3-chart-scroll { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.hv3-chart svg { display: block; margin: 0 auto; }
.hv3-chart g[data-nav] { cursor: pointer; }
.hv3-ch-val { font-size: 9.5px; fill: var(--text-2); font-family: inherit; }
.hv3-ch-day { font-size: 9px; fill: var(--text-2); font-family: inherit; }
.hv3-ch-dow { font-size: 8px; fill: var(--text-3); font-family: inherit; }
.hv3-ch-day.wknd, .hv3-ch-dow.wknd { font-weight: 700; fill: var(--text); }

/* ── Грид 2 колонки (на мобиле — стек) ── */
.hv3-grid { display: flex; gap: 10px; }
.hv3-grid > .hv3-card { flex: 1 1 240px; }
.hv3-grid > .hv3-card[hidden] { display: none; }
@media (max-width: 480px) {
    .hv3-grid { flex-direction: column; gap: 0; }
}

.hv3-big { font-family: var(--serif); font-size: 27px; line-height: 1.15; color: var(--text); margin-top: 6px; }
.hv3-big-unit { font-size: 13px; color: var(--text-3); font-family: inherit; }
.hv3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hv3-chip {
    font-size: 11px; color: var(--text-2);
    border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
    background: var(--bg);
}
.hv3-chip.warn { color: var(--amber); border-color: var(--amber); }

/* ── P&L вчера ── */
.hv3-tbl { margin-top: 8px; }
.hv3-tr { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-2); padding: 3px 0; }
.hv3-tr b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hv3-tr-total { border-top: 1px solid var(--border-soft); margin-top: 5px; padding-top: 7px; }
.hv3-tr-total span { color: var(--text); font-weight: 600; }
.hv3-tr-total b { font-family: var(--serif); font-size: 16px; }

/* ── Совет (терра-софт) ── */
.hv3-advice { background: var(--brand-soft); border-color: var(--brand-soft); }
@supports (color: color-mix(in srgb, red, blue)) {
    .hv3-advice { border-color: color-mix(in srgb, var(--brand) 25%, var(--bg-card)); }
}
.hv3-advice .hv3-label { color: var(--brand); }
.hv3-advice-text { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 6px; }
.hv3-btn {
    margin-top: 10px; display: inline-block;
    font-size: 12.5px; font-weight: 600; color: var(--brand);
    background: var(--bg-card); border: 1px solid var(--brand);
    border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer;
}

/* ── Скелетоны (пульс прозрачностью, без градиентов) ── */
.hv3-skel { min-height: 52px; }
.hv3-card.hv3-skel { background: var(--bg-soft); border-color: var(--border-soft); animation: hv3-pulse 1.3s ease-in-out infinite; }
.hv3-summary.hv3-skel { display: block; height: 14px; width: 70%; background: var(--bg-soft); border-radius: 7px; min-height: 14px; animation: hv3-pulse 1.3s ease-in-out infinite; }
.hv3-hero.hv3-skel { min-height: 120px; }
.hv3-chart.hv3-skel { min-height: 150px; }
@keyframes hv3-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}