/* Добавления демо математики поверх оформления альфы (alfa.css). Только то,
   чего в альфе нет: плитки чисел, группы полей, диаграммы. Цвета и тени —
   переменные альфы, своих оттенков здесь не заводится. */

/* Атрибут hidden должен побеждать display из классов (плашка загрузки, страницы). */
[hidden]{display:none !important}

.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:14px 18px;margin:6px 0 4px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f > span{font-size:14px;font-weight:600}
.f > small{color:var(--faint);font-size:12px}
.f input[type=number],.f input[type=text],.f select{width:100%;min-width:0}
.f.chk{flex-direction:row;align-items:center;gap:10px;min-height:52px}
.f.chk input{width:22px;height:22px;accent-color:#E2601A;box-shadow:none;background:none}
.f.chk > span{font-weight:500}

.tiles-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:12px;margin:12px 0}
.well .v{font-size:22px;letter-spacing:-.01em}
.well .v.big{font-size:28px}
.well .d{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.35}
.well.accent{background:linear-gradient(180deg,#FDF1E8,#F8E1D0);box-shadow:inset 0 0 0 1px rgba(226,96,26,.25)}

details.more{margin:10px 0 0}
details.more summary{cursor:pointer;font-weight:600;padding:10px 0;color:var(--accent-ink)}
details.more[open] summary{margin-bottom:6px}

.r-good{color:var(--ok);font-weight:700}
.r-mid{color:var(--warn);font-weight:700}
.r-bad{color:var(--bad);font-weight:700}
.status-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.status-list div{display:flex;gap:10px;align-items:flex-start;font-size:15px}

.bars{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.bars .line .k{width:13rem;flex:none;font-size:14px;color:var(--muted)}
.bars .line .n{width:8rem;flex:none;text-align:right;font:500 14px "IBM Plex Mono",ui-monospace,monospace}

.chart{width:100%;height:auto;display:block;margin:6px 0}
.chart .axis{stroke:rgba(28,26,22,.25);stroke-width:1}
.chart .curve{fill:none;stroke:#E2601A;stroke-width:3;stroke-linejoin:round}
.chart text{font:12px "IBM Plex Mono",ui-monospace,monospace;fill:var(--faint)}

.loading{display:flex;align-items:center;gap:14px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#F58A45;
animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

.instr h2{margin-top:26px}
.instr p,.instr li{max-width:48rem}
.instr ol,.instr ul{padding-left:22px}
.instr li{margin:4px 0}
.side .foot .src{font:500 11px "IBM Plex Mono",ui-monospace,monospace;color:#6B665F}

@media (max-width:900px){
  .bars .line .k{width:9rem}
  .bars .line .n{width:6.5rem}
}