/* ============================================================================
   HOME-1 · AI Command Center — Главная (#/today)
   Composition only. Every value is filled by home_command_center.js from real
   endpoints or shown as an honest unavailable state. Reuses index.html tokens
   (--surface/--surface-2/--border/--text/--text-muted/--accent/--teal/
    --success/--warning/--danger/--sp-*/--r-card). Calm accents — no acid glow.
   ========================================================================== */

.hcc { --hcc-max: 1440px; max-width: var(--hcc-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-4); }

/* honest status bar */
.hcc-statusbar { display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; }
.hcc-brand { display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; letter-spacing: -0.01em; color: var(--text); font-size: var(--fs-h2, 17px); }
.hcc-brand-mark { color: var(--teal); }
.hcc-sysstate { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sub, 13px); color: var(--text-muted); font-weight: 600; }
.hcc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.hcc-dot.ok { background: var(--success); }
.hcc-dot.warn { background: var(--warning); }
.hcc-dot.err { background: var(--danger); }
.hcc-dot.loading { background: var(--text-muted); }
.hcc-fresh { margin-left: auto; font-size: var(--fs-meta, 11px); color: var(--text-muted); }
.hcc-fresh.stale { color: var(--warning); }

/* KPI strip (honest Today / daily_progress) */
.hcc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.hcc-kpi { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.hcc-kpi-l { font-size: var(--fs-meta, 11px); color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; }
.hcc-kpi-v { font-size: var(--fs-h1, 20px); font-weight: 700; letter-spacing: -0.02em;
  margin-top: 2px; word-break: break-word; }
.hcc-kpi.green .hcc-kpi-v { color: var(--success); }
.hcc-kpi-sub { font-size: var(--fs-meta, 11px); color: var(--text-muted); margin-top: 2px; }
.hcc-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 5px; }

/* main composition */
.hcc-grid { display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr 1.5fr 1fr minmax(300px, 340px);
  grid-template-areas:
    "left center right report"
    "feed feed feed report"; }
.hcc-left   { grid-area: left; }
.hcc-center { grid-area: center; }
.hcc-right  { grid-area: right; }
.hcc-report { grid-area: report; }
.hcc-feed   { grid-area: feed; }
.hcc-left, .hcc-right { display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; }

/* subtle data-exchange lines toward the center (decorative, calm) */
.hcc-left::after, .hcc-right::after { content: ""; position: absolute; top: 8%;
  bottom: 8%; width: 1px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--border) 0 6px, transparent 6px 12px);
  opacity: .7; }
.hcc-left::after { right: calc(var(--sp-4) / -2); }
.hcc-right::after { left: calc(var(--sp-4) / -2); }

/* agent card */
.hcc-agent { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-3); display: flex; gap: var(--sp-3);
  align-items: flex-start; min-height: 88px;
  transition: background var(--dur, .2s) var(--ease, ease),
    border-color var(--dur, .2s) var(--ease, ease), transform var(--dur, .2s) var(--ease, ease); }
.hcc-agent:hover { background: var(--surface-2);
  border-color: color-mix(in srgb, var(--ag, var(--teal)) 26%, var(--border));
  transform: translateY(-1px); }
.hcc-agent-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: color-mix(in srgb, var(--ag, var(--teal)) 14%, transparent);
  color: var(--ag, var(--teal)); border: 1px solid color-mix(in srgb, var(--ag, var(--teal)) 30%, transparent); }
.hcc-agent-body { min-width: 0; flex: 1; }
.hcc-agent-name { font-weight: 700; font-size: var(--fs-card, 14px); }
.hcc-agent-desc { font-size: var(--fs-meta, 11px); color: var(--text-muted);
  margin-top: 1px; line-height: 1.3; }
.hcc-agent-metric { margin-left: auto; text-align: right; flex: 0 0 auto; }
.hcc-agent-mv { font-weight: 700; font-size: var(--fs-body, 15px); }
.hcc-agent-ml { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.hcc-agent-status { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-meta, 11px); font-weight: 600; margin-top: 6px; }
.hcc-agent-status .hcc-dot { width: 6px; height: 6px; }
.hcc-agent-status.active { color: var(--teal); }
.hcc-agent-status.active .hcc-dot { background: var(--teal); }
.hcc-agent-status.analyzing { color: var(--warning); }
.hcc-agent-status.analyzing .hcc-dot { background: var(--warning); }
.hcc-agent-status.idle { color: var(--text-muted); }
.hcc-agent-status.idle .hcc-dot { background: var(--text-muted); }

/* director header */
.hcc-director { background: linear-gradient(160deg,
    color-mix(in srgb, var(--teal) 10%, var(--surface)), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--sp-4); position: relative; overflow: hidden; }
.hcc-dir-role { font-size: var(--fs-h1, 20px); font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hcc-dir-tag { font-size: var(--fs-meta, 11px); font-weight: 700; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
  border-radius: 999px; padding: 2px 8px; text-transform: none; }
.hcc-dir-sub { color: var(--text-muted); font-size: var(--fs-sub, 13px); margin-top: 4px; }
.hcc-dir-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.hcc-chip { font-size: var(--fs-meta, 11px); color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px; }

/* decision center */
.hcc-decision { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-4); margin-top: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.hcc-dec-head { font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  font-size: var(--fs-sub, 13px); color: var(--text); }
.hcc-dec-state { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-card, 14px); color: var(--text-muted); }
.hcc-dec-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hcc-dec-metric { min-width: 0; }
.hcc-dec-metric .hcc-dm-l { font-size: var(--fs-meta, 11px); color: var(--text-muted); }
.hcc-dec-metric .hcc-dm-v { font-size: var(--fs-h2, 17px); font-weight: 700; }
.hcc-dec-current { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-control); padding: var(--sp-3); }
.hcc-dec-current .hcc-dc-l { font-size: var(--fs-meta, 11px); color: var(--text-muted); }
.hcc-dec-current .hcc-dc-v { font-weight: 700; margin-top: 2px; }
.hcc-dec-reporters { display: flex; flex-wrap: wrap; gap: 6px; }
.hcc-tag { font-size: var(--fs-meta, 11px); border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--border); color: var(--text-muted); }
.hcc-tag.done { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 32%, transparent); }
.hcc-tag.wait { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.hcc-dec-last { border-top: 1px dashed var(--border); padding-top: var(--sp-3);
  font-size: var(--fs-sub, 13px); }
.hcc-conf-num { color: var(--teal); font-weight: 700; }

/* owner report */
.hcc-report { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-4); align-self: start;
  display: flex; flex-direction: column; gap: var(--sp-3); }
.hcc-rep-title { font-weight: 800; font-size: var(--fs-h2, 17px); }
.hcc-rep-sec-h { font-size: var(--fs-meta, 11px); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-top: var(--sp-2); }
.hcc-rep-item { display: flex; gap: var(--sp-2); font-size: var(--fs-sub, 13px);
  align-items: flex-start; padding: 3px 0; }
.hcc-rep-item .hcc-rep-ic { flex: 0 0 auto; }
.hcc-rep-item .hcc-rep-t { min-width: 0; }
.hcc-rep-time { color: var(--text-muted); font-size: var(--fs-meta, 11px); }
.hcc-rep-effect { border: 1px solid var(--border); border-radius: var(--r-control);
  padding: var(--sp-3); }
.hcc-rep-effect .hcc-eff-v { font-size: var(--fs-h1, 20px); font-weight: 800; }
.hcc-rep-risk { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: var(--r-control); padding: var(--sp-3); }
.hcc-rep-risk .hcc-risk-h { color: var(--danger); font-weight: 700; font-size: var(--fs-sub, 13px); }

/* activity feed */
.hcc-feed { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-4); }
.hcc-feed-head { display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; margin-bottom: var(--sp-3); }
.hcc-feed-live { font-size: var(--fs-meta, 11px); color: var(--text-muted); font-weight: 600; }
.hcc-feed-track { display: flex; gap: var(--sp-3); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.hcc-feed-track::-webkit-scrollbar { display: none; }
.hcc-feed-card { flex: 0 0 190px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-3); }
.hcc-feed-top { display: flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: var(--fs-sub, 13px); }
.hcc-feed-time { margin-left: auto; color: var(--text-muted); font-size: var(--fs-meta, 11px); font-weight: 500; }
.hcc-feed-txt { font-size: var(--fs-meta, 11px); color: var(--text-muted); margin-top: 4px; line-height: 1.35; }
.hcc-feed-eff { font-weight: 700; margin-top: 6px; font-size: var(--fs-sub, 13px); }
.hcc-feed-eff.pos { color: var(--success); }
.hcc-feed-status { font-size: var(--fs-meta, 11px); color: var(--text-muted); margin-top: 4px; }

/* shared honest states inside command center */
.hcc .shell-state { padding: var(--sp-5) var(--sp-3); }

/* ── tablet / mobile: engineer + decision first, agents compact, report below ── */
@media (max-width: 1023px) {
  .hcc-grid { grid-template-columns: 1fr;
    grid-template-areas: "center" "left" "right" "report" "feed"; }
  .hcc-left::after, .hcc-right::after { display: none; }         /* no side lines when stacked */
  .hcc-left, .hcc-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .hcc-kpis { grid-template-columns: repeat(2, 1fr); }
  .hcc-report { align-self: stretch; }
}
@media (max-width: 460px) {
  .hcc-agent { min-height: 0; flex-wrap: wrap; }
  .hcc-agent-metric { margin-left: 0; text-align: left; width: 100%; }
}

/* ══════════════════ HOME-1A · production polish ══════════════════ */

/* independent per-block state chips (loading/empty/unavailable/error) */
.hcc-state { display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3); font-size: var(--fs-sub, 13px);
  color: var(--text-muted); line-height: 1.4; }
.hcc-state-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--text-muted); }
.hcc-state[data-state="loading"] { color: var(--text-muted); }
.hcc-state[data-state="empty"] { color: var(--text-muted); }
.hcc-state[data-state="unavailable"] { color: var(--text-muted); }
.hcc-state[data-state="unavailable"] .hcc-state-dot { background: var(--warning); }
.hcc-state[data-state="error"] { color: var(--danger); }
.hcc-state[data-state="error"] .hcc-state-dot { background: var(--danger); }
.hcc-state[data-state="loading"] .hcc-state-dot { animation: hccPulse 1.4s ease-in-out infinite; }

/* small shared helpers used by JS */
.muted { color: var(--text-muted); }
.pos { color: var(--success); }
.hcc-rl { font-size: var(--fs-meta, 11px); color: var(--text-muted); }
.hcc-dec-state.s-ready .hcc-state-dot { background: var(--teal); }
.hcc-dec-state.s-work  .hcc-state-dot { background: var(--warning); }
.hcc-dec-state.s-idle  .hcc-state-dot { background: var(--text-muted); }
.hcc-dec-state { gap: var(--sp-2); }
.hcc-rep-sec[data-state] { min-height: 20px; }

/* stable heights so switching states never jumps the layout */
.hcc-decision { min-height: 232px; }
.hcc-report { min-height: 300px; }
.hcc-feed { min-height: 120px; }
.hcc-kpi { min-height: 74px; }

/* soft hover on the resting surfaces (calm, no lift on large panels) */
.hcc-kpi, .hcc-feed-card, .hcc-director, .hcc-decision, .hcc-report {
  transition: border-color var(--dur, .2s) var(--ease, ease),
    background var(--dur, .2s) var(--ease, ease); }
.hcc-feed-card:hover { border-color: color-mix(in srgb, var(--ag, var(--teal)) 26%, var(--border)); }
.hcc-kpi:hover { border-color: color-mix(in srgb, var(--teal) 22%, var(--border)); }

/* subtle entrance fade — on PERSISTENT structural blocks only, so the 60s data
   refresh (which only replaces inner HTML) never re-triggers or flickers. */
.hcc-statusbar { animation: hccFadeIn .45s var(--ease, ease) both; }
.hcc-kpis { animation: hccFadeIn .45s var(--ease, ease) .05s both; }
.hcc-grid { animation: hccFadeIn .45s var(--ease, ease) .10s both; }
.hcc-feed { animation: hccFadeIn .45s var(--ease, ease) .15s both; }

/* subtle data-flow drift on the connector guides (calm, low-contrast) */
.hcc-left::after, .hcc-right::after { animation: hccFlow 6s linear infinite; }

@keyframes hccFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hccPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hccFlow  { to { background-position: 0 18px; } }

/* respect reduced-motion: no entrance, no drift, no pulse */
@media (prefers-reduced-motion: reduce) {
  .hcc-statusbar, .hcc-kpis, .hcc-grid, .hcc-feed,
  .hcc-left::after, .hcc-right::after,
  .hcc-state[data-state="loading"] .hcc-state-dot { animation: none !important; }
  .hcc-agent, .hcc-kpi, .hcc-feed-card { transition: none; }
}

/* laptop tier: keep the 4-column command-center composition without crowding */
@media (min-width: 1024px) and (max-width: 1280px) {
  .hcc-grid { gap: var(--sp-3);
    grid-template-columns: 1fr 1.4fr 1fr minmax(260px, 300px); }
  .hcc-agent { padding: var(--sp-2) var(--sp-3); }
  .hcc-agent-desc { display: none; }              /* trim to avoid text crowding */
}