/* Safety Index — веб-интерфейс. Дизайн-токены и компоненты. */
:root {
  --ground: #e7ebe8;
  --surface: #ffffff;
  --panel: #f4f6f4;
  --ink: #16201d;
  --muted: #667069;
  --faint: #97a19b;
  --line: #dbe1dc;
  --line-strong: #c7cfc9;

  --accent: #1c4b73;
  --accent-hover: #163c5c;
  --accent-soft: #e7eef5;
  --accent-line: #cddced;

  --safe: #2f8f5b;   --safe-bg: #e6f2ea;   --safe-line: #bfe0cc;
  --warn: #b8790c;   --warn-bg: #fbf0d8;   --warn-line: #eed6a6;
  --danger: #c4362f; --danger-bg: #fae6e3; --danger-line: #f0c4bf;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(20,32,29,.04), 0 12px 32px -16px rgba(20,32,29,.22);
  --shadow-soft: 0 1px 2px rgba(20,32,29,.05);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
[hidden] { display: none !important; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfcfb, #f2f5f2);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.side__head { padding: 4px 10px 16px; display: flex; align-items: center; gap: 10px; }
.side__head .mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.side__head b { display: block; font-weight: 650; font-size: 14px; letter-spacing: -.01em; }
.side__head .eyebrow { font-size: 9.5px; margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav button {
  all: unset;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--muted); cursor: pointer;
  transition: background .14s, color .14s;
}
.nav button svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav button:hover { background: #eceff0; color: var(--ink); }
.nav button.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.nav button.is-active svg { opacity: 1; }
.nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.side__foot { margin-top: auto; padding: 12px 10px 4px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status.ok i { background: var(--safe); box-shadow: 0 0 0 3px var(--safe-bg); }
.status.down i { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* ---------- Main ---------- */
.main {
  padding: 28px clamp(20px, 4vw, 44px) 48px;
  background: radial-gradient(circle at 1px 1px, rgba(22,32,29,.045) 1px, transparent 0) 0 0 / 22px 22px;
  min-width: 0;
}
.main__head { margin-bottom: 22px; max-width: 70ch; }
.main__head h1 { font-size: 22px; margin: 5px 0 4px; letter-spacing: -.015em; font-weight: 650; }
.main__head p { margin: 0; color: var(--muted); font-size: 14px; }

.screen { max-width: 1080px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card__head h2, .card__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card__body { padding: 16px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field:last-child { margin-bottom: 0; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 9px 11px; width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
.field input.mono { font-family: var(--mono); font-size: 13px; }
.field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input.invalid, .field input:invalid.touched { border-color: var(--danger); }
.field .err { font-family: var(--sans); font-size: 11.5px; color: var(--danger); text-transform: none; letter-spacing: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.grid-2 .field { margin-bottom: 0; }

.subhead { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 20px 0 12px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--faint); }

/* ---------- Buttons ---------- */
.btn {
  all: unset; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 550; padding: 10px 18px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .14s, border-color .14s, color .14s, opacity .14s; text-align: center;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn .spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; }

/* ---------- Result states ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 54px 24px; color: var(--faint); min-height: 260px; }
.empty svg { width: 40px; height: 40px; opacity: .5; }
.empty p { margin: 0; font-size: 13.5px; max-width: 28ch; }

.loading { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.loading .bar { height: 12px; border-radius: 5px; background: linear-gradient(90deg,#eef1ef 25%,#e2e7e3 37%,#eef1ef 63%); background-size: 400% 100%; animation: sh 1.3s ease infinite; }
.loading .bar.w1 { width: 55%; height: 26px; }
.loading .bar.w2 { width: 90%; }
.loading .bar.w3 { width: 72%; }
.loading .note { color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.spin { width: 15px; height: 15px; border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; animation: rot .7s linear infinite; flex: none; }
@keyframes sh { 0%{background-position:100% 0} 100%{background-position:0 0} }
@keyframes rot { to { transform: rotate(360deg); } }

.alert { display: flex; gap: 12px; padding: 16px; margin: 16px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid var(--danger-line); color: #7d2620; }
.alert svg { width: 20px; height: 20px; flex: none; color: var(--danger); margin-top: 1px; }
.alert b { display: block; margin-bottom: 2px; }
.alert p { margin: 0; font-size: 13px; line-height: 1.5; }

.verdict { animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.verdict__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 16px 16px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; padding: 7px 13px; border-radius: 100px; border: 1px solid; }
.badge i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.badge--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.badge--safe { color: var(--safe); background: var(--safe-bg); border-color: var(--safe-line); }
.badge--danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.idx { text-align: right; }
.idx b { font-size: 42px; line-height: 1; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.idx .eyebrow { margin-top: 5px; }

.scale { padding: 4px 18px 20px; }
.scale__track { position: relative; height: 10px; border-radius: 100px; opacity: .9; }
.scale__marker { position: absolute; top: 50%; width: 3px; height: 22px; border-radius: 2px; background: var(--ink); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--surface); }
.scale__ticks { position: relative; height: 16px; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.scale__ticks span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.scale__legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.scale__legend span { display: inline-flex; align-items: center; gap: 5px; }
.scale__legend i { width: 8px; height: 8px; border-radius: 2px; }

.crit { border-top: 1px solid var(--line); padding: 16px; }
.crit__row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.crit__row:last-child { border-bottom: none; }
.crit__name { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crit__pick { font-size: 13px; line-height: 1.4; }
.crit__pick .off { color: var(--faint); }
.crit__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 116px; }
.crit__coef { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.crit__coef b { color: var(--ink); }
.crit__coef .contrib { font-variant-numeric: tabular-nums; }
.crit__barwrap { width: 116px; height: 6px; border-radius: 100px; background: var(--panel); overflow: hidden; }
.crit__bar { height: 100%; border-radius: 100px; background: var(--accent); }
.crit__sum { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.crit__sum span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crit__sum b { font-size: 18px; font-variant-numeric: tabular-nums; }

.reasoning { padding: 16px; border-top: 1px solid var(--line); }
.reasoning .eyebrow { margin-bottom: 8px; }
.reasoning p { margin: 0; font-size: 14px; line-height: 1.6; color: #2b3531; white-space: pre-wrap; }
.verdict__actions { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- CSV ---------- */
.csv-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.drop { border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--panel); transition: border-color .14s, background .14s; cursor: pointer; }
.drop:hover, .drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.drop svg { width: 38px; height: 38px; color: var(--accent); }
.drop b { font-size: 15px; }
.drop .hint { font-size: 12.5px; }

.fmt { padding: 16px; }
.fmt .eyebrow { margin-bottom: 10px; }
.fmt ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fmt li { font-size: 12.5px; color: var(--muted); display: flex; gap: 9px; align-items: flex-start; }
.fmt li::before { content: "—"; color: var(--faint); }
.fmt li code { font-family: var(--mono); font-size: 11.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--ink); }
.fmt li b { color: var(--ink); font-weight: 550; }

.filechip { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.filechip .fico { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.filechip .fico svg { width: 18px; height: 18px; }
.filechip .fmeta { flex: 1; min-width: 0; }
.filechip .fmeta b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filechip .fmeta span { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.filechip .fx { all: unset; cursor: pointer; color: var(--faint); padding: 4px; border-radius: 6px; }
.filechip .fx:hover { color: var(--danger); background: var(--danger-bg); }
.filechip .fx svg { width: 16px; height: 16px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--mono); letter-spacing: .04em; padding: 4px 10px; border-radius: 100px; border: 1px solid; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--proc { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.pill--done { color: var(--safe); background: var(--safe-bg); border-color: var(--safe-line); }
.pill--fail { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.pill--wait { color: var(--muted); background: var(--panel); border-color: var(--line-strong); }

.prog { margin-top: 20px; }
.prog__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.prog__top b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.prog__top span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.prog__track { height: 10px; border-radius: 100px; background: var(--panel); overflow: hidden; }
.prog__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent), #2f6fa0); transition: width .5s ease; }
.prog__fill.indet { width: 40% !important; animation: indet 1.3s ease-in-out infinite; }
@keyframes indet { 0%{margin-left:-40%} 100%{margin-left:100%} }
.prog__note { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--muted); }

.done-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
.done-hero .check { width: 42px; height: 42px; border-radius: 50%; background: var(--safe-bg); color: var(--safe); display: grid; place-items: center; border: 1px solid var(--safe-line); }
.done-hero .check svg { width: 22px; height: 22px; }
.done-hero h3 { margin: 8px 0 0; font-size: 17px; letter-spacing: -.01em; }
.done-hero p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

.loc { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.loc code { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Jobs table ---------- */
.toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table.jobs { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
table.jobs th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
table.jobs td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.jobs tr:last-child td { border-bottom: none; }
table.jobs td.id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
table.jobs td.file b { font-weight: 500; word-break: break-all; }
table.jobs td.num { font-variant-numeric: tabular-nums; }
table.jobs .lk { color: var(--accent); text-decoration: none; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
table.jobs .lk:hover { text-decoration: underline; }
table.jobs .lk svg { width: 13px; height: 13px; }
.muted-dash { color: var(--faint); }
.jobs-empty { padding: 40px; text-align: center; color: var(--faint); font-size: 13.5px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 100px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); align-items: center; gap: 10px; padding: 12px; }
  .side__head, .side__foot { display: none; }
  .nav { flex-direction: row; }
  .nav button { white-space: nowrap; }
  .split, .csv-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}