/* ==========================================================================
   API Company — components.css
   Только смысловые токены. Ни одного литерального цвета: проверяется check.sh.
   Разделы: каркас · иконки · кнопки · поля · загрузка · процесс · вывод
   ========================================================================== */

/* ---------- базовое ---------- */
/* Библиотека владеет всей страницей демки (`.shell` — это и есть страница),
   а компоненты применяются и вне `.shell` — например на витрине. Поэтому
   правило глобальное, а не привязанное к `.shell`: иначе паддинги и рамки
   снова начнут прибавляться к ширине везде, где каркаса нет. */
*,*::before,*::after{box-sizing:border-box}

/* ---------- каркас ---------- */
.shell{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  font-family:var(--font-ui); font-size:var(--text-base); line-height:var(--leading-normal);
}
.shell__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-6);
  background:var(--surface-raised); border-bottom:var(--border-width) solid var(--border);
}
.shell__logo{height:26px; width:auto; display:block}
.shell__title{min-width:0; font-size:var(--text-md); font-weight:600}
.shell__spacer{flex:1}
.shell__main{
  flex:1; width:100%; max-width:1080px; margin:0 auto; padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-5);
}
.shell__foot{
  padding:var(--space-5) var(--space-6);
  border-top:var(--border-width) solid var(--border);
  color:var(--text-muted); font-size:var(--text-sm);
}

.panel{
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-4);
}
.panel__head{display:flex; align-items:center; gap:var(--space-3)}
.panel__title{font-size:var(--text-md); font-weight:600; letter-spacing:-.01em}

.grid{display:flex; flex-direction:column; gap:var(--space-5)}
.grid--split{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:var(--space-5);
}

/* ряд действий: панель — колонка со stretch, кнопка в ней растянулась бы
   на всю ширину. `.actions` возвращает кнопкам обычный ряд с переносом. */
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3)}
.actions--end{justify-content:flex-end}

/* ---------- иконки ---------- */
.icon{
  width:16px; height:16px; flex:none; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- фокус ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px;
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:38px; padding:0 var(--space-4);
  font-family:var(--font-ui); font-size:var(--text-base); font-weight:600; line-height:1;
  color:var(--accent-contrast); background:var(--accent);
  border:var(--border-width) solid transparent; border-radius:var(--radius-md);
  cursor:pointer; white-space:nowrap; text-decoration:none; position:relative;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover{background:var(--accent-hover)}
.btn--secondary{background:var(--surface-raised); color:var(--text); border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--surface-sunken)}
.btn--ghost{background:transparent; color:var(--text-muted)}
.btn--ghost:hover{background:var(--surface-sunken); color:var(--text)}
.btn--danger{background:var(--status-error); color:var(--text-on-accent)}
.btn--danger:hover{filter:brightness(.92)}
.btn--sm{height:30px; padding:0 var(--space-3); font-size:var(--text-sm)}
.btn:disabled,.btn.is-disabled{opacity:.45; pointer-events:none}
.btn.is-loading{color:transparent; pointer-events:none}
.btn.is-loading::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--accent-contrast); border-top-color:transparent;
  animation:api-spin .7s linear infinite;
}
.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after{border-color:var(--text-muted); border-top-color:transparent}
@keyframes api-spin{to{transform:rotate(360deg)}}

/* ---------- поля ---------- */
.field{display:flex; flex-direction:column; gap:var(--space-2)}
.field__label{font-size:var(--text-sm); font-weight:600; color:var(--text)}
.field__hint{font-size:var(--text-sm); color:var(--text-muted)}
.field__error{font-size:var(--text-sm); color:var(--status-error)}

.input,.select,.textarea{
  width:100%; height:38px; padding:0 var(--space-3);
  font-family:var(--font-ui); font-size:var(--text-base); color:var(--text);
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color var(--transition);
}
.textarea{height:auto; min-height:96px; padding:var(--space-3);
  line-height:var(--leading-normal); resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-muted)}
.field.is-error .input,.field.is-error .textarea,.field.is-error .select{border-color:var(--status-error)}

.select-wrap{position:relative; display:block}
.select{appearance:none; padding-right:var(--space-6); cursor:pointer}
.select-wrap::after{
  content:""; position:absolute; right:var(--space-3); top:50%; width:7px; height:7px;
  margin-top:-5px; border-right:1.6px solid var(--text-muted);
  border-bottom:1.6px solid var(--text-muted); transform:rotate(45deg); pointer-events:none;
}

.checkbox{display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer}
.checkbox input{width:16px; height:16px; margin:0; accent-color:var(--accent)}

.switch{display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch__track{
  width:34px; height:20px; border-radius:var(--radius-pill);
  background:var(--border-strong); position:relative; flex:none;
  transition:background var(--transition);
}
.switch__track::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--surface-raised); transition:transform var(--transition);
}
.switch input:checked + .switch__track{background:var(--accent)}
.switch input:checked + .switch__track::after{transform:translateX(14px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--focus-ring); outline-offset:2px}

/* ---------- загрузка файла ---------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-1); text-align:center;
  padding:var(--space-7) var(--space-5);
  background:var(--surface-raised); color:var(--text-muted);
  border:2px dashed var(--border-strong); border-radius:var(--radius-lg);
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.dropzone:hover{border-color:var(--accent); color:var(--text)}
.dropzone__title{font-size:var(--text-md); font-weight:600; color:var(--text)}
.dropzone__hint{font-size:var(--text-sm)}

.dropzone.is-dragover{border-color:var(--accent); background:var(--accent-soft); color:var(--text)}
.dropzone.is-filled{border-style:solid; border-color:var(--status-done); background:var(--status-done-soft)}
.dropzone.is-filled .dropzone__title{color:var(--status-done)}
.dropzone.is-error{border-color:var(--status-error); background:var(--status-error-soft)}
.dropzone.is-error .dropzone__title{color:var(--status-error)}

.filerow{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border); border-radius:var(--radius-md);
  color:var(--text-muted);
}
.filerow__name{
  flex:1; min-width:0; color:var(--text); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filerow__size{font-size:var(--text-sm); font-variant-numeric:tabular-nums}

/* ---------- процесс ---------- */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-1);
  height:22px; padding:0 var(--space-2);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.02em; white-space:nowrap;
  border-radius:var(--radius-pill);
  background:var(--status-wait-soft); color:var(--status-wait);
}
.badge .icon{width:12px; height:12px}
.badge--run{background:var(--status-run-soft);   color:var(--status-run)}
.badge--done{background:var(--status-done-soft); color:var(--status-done)}
.badge--warn{background:var(--status-warn-soft); color:var(--status-warn)}
.badge--error{background:var(--status-error-soft); color:var(--status-error)}
.badge .spinner{width:10px; height:10px; border-width:1.5px}

.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.step{display:flex; gap:var(--space-3); padding:var(--space-3) 0; color:var(--text-muted)}
.step + .step{border-top:var(--border-width) solid var(--border)}
.step__dot{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--status-wait-soft); color:var(--status-wait);
}
.step__dot .icon{width:13px; height:13px}
.step__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.step__title{font-size:var(--text-base); font-weight:600; color:var(--text-muted)}
.step__meta{font-size:var(--text-sm); font-variant-numeric:tabular-nums}
.step.is-done .step__dot{background:var(--status-done-soft);  color:var(--status-done)}
.step.is-done .step__title{color:var(--text)}
.step.is-active .step__dot{background:var(--status-run-soft);  color:var(--status-run)}
.step.is-active .step__title{color:var(--text)}
.step.is-error .step__dot{background:var(--status-error-soft); color:var(--status-error)}
.step.is-error .step__title{color:var(--status-error)}

.progress{
  height:6px; border-radius:var(--radius-pill);
  background:var(--surface-sunken); overflow:hidden;
}
.progress__bar{
  height:100%; border-radius:inherit; background:var(--accent);
  transition:width var(--transition);
}
.progress--indeterminate .progress__bar{width:35%; animation:api-slide 1.1s ease-in-out infinite}
@keyframes api-slide{
  0%{margin-left:-35%} 100%{margin-left:100%}
}

.log{
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:var(--leading-loose);
  background:var(--surface-sunken); color:var(--text);
  border-radius:var(--radius-md); padding:var(--space-3);
  max-height:240px; overflow:auto;
}
.log__line{display:flex; gap:var(--space-3); white-space:pre-wrap; word-break:break-word}
.log__time{flex:none; color:var(--text-muted); font-variant-numeric:tabular-nums}
.log__line--info{color:var(--text)}
.log__line--warn{color:var(--status-warn)}
.log__line--error{color:var(--status-error)}

.spinner{
  display:inline-block; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--accent);
  animation:api-spin .7s linear infinite;
}

/* ---------- вывод ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-4);
}
.result-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border); border-radius:var(--radius-lg);
  transition:border-color var(--transition);
}
.result-card:hover{border-color:var(--border-strong)}
.result-card__preview{
  aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:var(--surface-sunken); color:var(--text-faint);
}
.result-card__preview img{width:100%; height:100%; object-fit:cover; display:block}
.result-card__preview .icon{width:28px; height:28px}
.result-card__body{
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
}
.result-card__name{
  flex:1; min-width:0; font-size:var(--text-sm); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.note{
  padding:var(--space-3) var(--space-4);
  border-left:3px solid var(--status-run);
  border-radius:var(--radius-sm);
  background:var(--status-run-soft); color:var(--text);
}
.note--success{border-left-color:var(--status-done);  background:var(--status-done-soft)}
.note--warn{border-left-color:var(--status-warn);     background:var(--status-warn-soft)}
.note--error{border-left-color:var(--status-error);   background:var(--status-error-soft)}

.empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-8) var(--space-4); text-align:center;
  color:var(--text-muted);
}
.empty__icon{color:var(--text-faint)}
.empty__icon .icon{width:32px; height:32px}
.empty__title{font-size:var(--text-md); font-weight:600; color:var(--text)}

.skeleton{
  position:relative; overflow:hidden;
  background:var(--surface-sunken); border-radius:var(--radius-sm);
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--surface-raised), transparent);
  animation:api-sheen 1.3s infinite;
}
@keyframes api-sheen{to{transform:translateX(100%)}}

.metrics{display:flex; flex-wrap:wrap; gap:var(--space-7)}
.metric{display:flex; flex-direction:column; gap:var(--space-1)}
.metric__value{
  font-size:var(--text-2xl); font-weight:700; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.metric__label{font-size:var(--text-sm); color:var(--text-muted)}

.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:var(--text-base)}
.table th{
  text-align:left; padding:var(--space-2) var(--space-3);
  font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted);
  border-bottom:var(--border-width) solid var(--border-strong);
}
.table td{padding:var(--space-3); border-bottom:var(--border-width) solid var(--border)}
.table tbody tr:nth-child(even){background:var(--surface-sunken)}
.table .num{text-align:right; font-variant-numeric:tabular-nums}