/* Индекс кризиса ИИ: только своё. Тема, статусы (.st, .dot), вкладки, .fold, table.t, .cap, .note, .pad, .prose из /design/. */
:root {
  /* три состояния индекса = статусы дизайн-системы; -ink для текста */
  --calm: var(--ok); --calm-ink: var(--ok-ink);
  --watch: var(--warn); --watch-ink: var(--warn-ink);
  --alarm: var(--bad); --alarm-ink: var(--bad-ink);
  /* серии графиков */
  --c-neo: var(--accent); --c-mkt: #0E8F7E; --c-hyp: #8A3FC7; --c-srv: #B5651D;
}
@media (prefers-color-scheme: dark) {
  :root { --c-mkt: #2FC7B2; --c-hyp: #B57BF0; --c-srv: #E09455; }
}
.calm  { --st: var(--ok);   --st-ink: var(--ok-ink); }
.watch { --st: var(--warn); --st-ink: var(--warn-ink); }
.alarm { --st: var(--bad);  --st-ink: var(--bad-ink); }
.mono { font-size: 12px; }

/* циферблат */
.g-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px 32px; align-items: center; }
.dial { width: 100%; height: auto; display: block; overflow: visible; }
.dial text { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.g-num { font-size: clamp(56px, 9vw, 84px); font-weight: 700; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.g-num small { font-size: .3em; letter-spacing: 0; color: var(--muted); font-weight: 500; margin-left: 4px; }
.g-name { font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; letter-spacing: -.02em; margin-top: 10px; line-height: 1.1; }
.g-name.st-boom { color: var(--calm-ink); } .g-name.st-base { color: var(--watch-ink); } .g-name.st-crash { color: var(--alarm-ink); }
.g-txt p { color: var(--muted); margin-top: 6px; max-width: 46ch; }
.g-life { color: var(--text) !important; font-size: 16px; }
.counts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }

/* сигналы */
.sig { list-style: none; }
.sig li + li { border-top: 1px solid var(--border); }
.sig summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 90px; gap: 14px; align-items: center; padding: 14px var(--pad); cursor: pointer; list-style: none; }
.sig summary::-webkit-details-marker { display: none; }
.sig summary:hover, .sig details[open] summary { background: var(--surface); }
.sig .dot { width: 12px; height: 12px; }
.sig .dot.alarm { box-shadow: 0 0 0 4px color-mix(in srgb, var(--alarm) 25%, transparent); }
.sig .nm { font-size: 16px; font-weight: 600; line-height: 1.25; }
.sig .val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sig .val small { font: 500 13px var(--sans); color: var(--muted); margin-left: 4px; }
.sig .val .vtext { font-size: 14px; font-weight: 500; line-height: 1.35; white-space: normal; display: inline-block; max-width: 22ch; text-align: right; }
.sig .spk { width: 90px; height: 30px; display: block; }
.sig .more { padding: 0 var(--pad) 16px calc(var(--pad) + 26px); }
.sig .more p { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 64ch; }
.sig .more .meta { font: 12px/1.6 var(--mono); margin-top: 8px; }
.sig .calm-fold > details > summary .val { font-weight: 400; color: var(--muted); }
.sig .calm-fold > details[open] > summary .val { transform: rotate(45deg); }
.sig .calm-fold .sig { border-top: 1px solid var(--border); }
.sig .calm-fold .sig summary { background: none; }
.stale { color: var(--watch-ink); }

/* цифры GPU */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 18px; }
.stats > div { padding: 12px 14px; min-width: 0; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats .lab { font: 500 12px/1.2 var(--mono); letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.stats .lab i { width: 10px; height: 10px; display: inline-block; flex: none; }
.stats .big { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stats .sm { font: 13px/1.4 var(--sans); color: var(--muted); }

/* графики */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 11px var(--mono); fill: var(--muted); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 14px/1.4 var(--sans); color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; }

/* таблицы и строки */
table.t .tag { font: 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.err { color: var(--alarm-ink); font: 12px var(--mono); }
.ok { color: var(--calm-ink); font: 12px var(--mono); }
.list .when { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--accent); }
.list .title { font-size: 18px; }

/* сводка Opus */
.note-ai { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.note-ai .na-h { font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.note-ai .na-f { margin-top: 10px; font: 13px/1.4 var(--sans); color: var(--muted); }
.note-ai b { display: block; margin-top: 8px; font-size: 18px; line-height: 1.3; }
.note-ai p { margin-top: 6px !important; font-size: 16px; line-height: 1.55; color: var(--text) !important; max-width: 66ch !important; }
.note-ai .na-w { color: var(--muted) !important; font-size: 15px !important; }

/* лестница стадий */
.ladder { list-style: none; margin-top: 8px; }
.ladder li { display: grid; grid-template-columns: 10px 48px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--border); color: var(--muted); }
.ladder li i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; grid-row: span 2; }
.ladder li .lr { font: 12px/1.6 var(--mono); grid-row: span 2; }
.ladder li b { font-weight: 650; }
.ladder li span:last-child { grid-column: 3; font-size: 15px; }
.ladder li.on { color: var(--text); }
.ladder li.on b::after { content: " ←"; }

/* шесть индикаторов под стрелкой */
.pillars { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 6px; }
.pillars li { display: grid; grid-template-columns: minmax(0, 13em) 1fr 2.2em; gap: 10px; align-items: center; font-size: 15px; }
.pillars .pn small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.pillars .pb { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.pillars .pb i { display: block; height: 100%; border-radius: 4px; }
.pillars .pv { text-align: right; font-variant-numeric: tabular-nums; }
.pl-cap { margin-top: 14px; font-size: 13px; color: var(--muted); }
.how-link { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.muted.sm, p.sm { font-size: 14px; line-height: 1.5; margin: 4px 0 14px; }

@media (max-width: 760px) {
  .g-wrap { grid-template-columns: minmax(0, 1fr); }
  .dial { max-width: 320px; margin: 0 auto; }
  .sig summary { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; }
  .sig .spk { display: none; }
  .sig .nm { font-size: 15px; }
  .sig .val { font-size: 18px; }
  /* длинное текстовое значение сигнала: под названием, а не узкой колонкой справа */
  .sig summary:has(.vtext) .val { grid-column: 2 / -1; grid-row: 2; text-align: left; white-space: normal; margin-top: -6px; }
  .sig summary:has(.vtext) .val .vtext { max-width: none; text-align: left; color: var(--muted); }
  .sig summary:has(.vtext) .dot { grid-row: 1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* «скопировать ссылку на картинку» - тихой ссылкой в строке API */
.copy-png { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.copy-png:hover { color: var(--accent); }

/* окупаемость ИИ: строка компании - имя, две полосы ("потрачено" красная, "заработано" зелёная), цифры */
.pb-lead { margin: 0 0 14px; }
.pb-g { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.pb-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 3px 0; font-size: 14px; }
.pb-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-bar { display: grid; gap: 2px; }
.pb-bar i { display: block; height: 6px; min-width: 1px; }
.pb-sp { background: var(--alarm); }
.pb-rv { background: var(--calm); }
.pb-n { font: 400 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; text-align: right; }
.pb-n b { display: inline-block; min-width: 46px; font-weight: 500; color: var(--text); }