/* Панель "Перевод документа" — вложена в #resultsPanel, который уже сам
   карточка (class="panel", background:var(--surface)). Поэтому фон здесь —
   var(--bg) (как у .group-order-item в styles.css), а не var(--surface):
   иначе получилась бы белая рамка на белом без контраста. Токены те же,
   что и в остальном сайте (styles.css), своих цветов не заводим.
   Структура экрана "до перевода" (шапка + поля + сворачиваемый шаблон)
   пересмотрена 13 сен 2026 для меньшего визуального шума: второстепенные
   контролы шаблона убраны под <details>, а не видны все сразу. */
.translation-panel{
  --translit:#7C3FA6;--translit-tint:#F2E9FB; /* новый статус "транслитерация" —
    токены завели только здесь, а не в общем :root styles.css, т.к. нужны
    только для этого экрана (13 сен 2026). */
  margin-top:28px;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:22px;
}
.translation-panel[hidden],.translation-panel [hidden]{display:none!important}
.translation-panel p{line-height:1.5;margin:10px 0}
.translation-panel h2{font-size:1.12rem}

.translation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.translation-header-title{display:flex;align-items:center;gap:10px}
.translation-icon{
  width:30px;height:30px;border-radius:8px;background:var(--accent-tint);
  color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.translation-info{position:relative}
.translation-info>summary{cursor:pointer;font-size:0.8rem;color:var(--ink-soft);list-style:none}
.translation-info>summary::-webkit-details-marker{display:none}
.translation-info .lang-note{
  width:260px;max-width:calc(100vw - 60px);position:absolute;right:0;top:100%;z-index:3;
  margin-top:6px;background:var(--surface);box-shadow:0 4px 16px rgba(20,20,19,0.12);
}

.translation-setup-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.translation-field{flex:1 1 200px;min-width:160px}
.translation-field-label{display:block;font-size:0.78rem;color:var(--ink-soft);margin-bottom:6px;font-family:'IBM Plex Mono',monospace}
.translation-setup-row select{width:100%}
.translation-setup-row .btn-primary,.translation-setup-row .btn-secondary{flex:0 0 auto}

.translation-template{border-top:1px solid var(--line);padding-top:14px;margin-bottom:8px}
.translation-template>summary{
  cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--ink-soft);
  display:flex;align-items:center;gap:7px;list-style:none;
}
.translation-template>summary::-webkit-details-marker{display:none}
.translation-template-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.translation-template-toolbar select{max-width:220px}
.translation-link-btn{
  margin-left:auto;background:transparent;border:none;color:var(--ink-soft);
  text-decoration:underline;font-size:0.82rem;font-weight:500;padding:8px 0;min-height:auto;
}
.translation-link-btn:hover:not(:disabled){color:var(--ink)}
.translation-link-btn:disabled{color:var(--ink-soft);opacity:0.5;cursor:not-allowed;text-decoration:none}

.translation-estimate{font-size:0.83rem;color:var(--ink-soft)}

/* Статус-строка (13 сен 2026): раньше — один <p>, теперь тот же смысл с
   визуальным кодированием через setStatus()/setProgress() в panel.js. */
.translation-status{margin:12px 0;font-size:0.85rem;display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--ink-soft)}
.translation-status:empty{margin:0}
.translation-status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:6px;padding:7px 12px;font-size:0.85rem;font-weight:600}
.translation-status-success .translation-status-pill{background:var(--good-tint);color:var(--good)}
.translation-status-warning .translation-status-pill{background:var(--warn-tint);color:var(--warn)}
.translation-status-error .translation-status-pill{background:var(--danger-tint);color:var(--danger)}
.translation-status-meta{font-size:0.78rem;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace}
.translation-progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:0 0 14px}
.translation-progress-fill{height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .2s ease}

.translation-warning-banner{display:flex;gap:8px;align-items:flex-start;background:var(--warn-tint);color:var(--warn);border-radius:6px;padding:10px 12px;font-size:0.83rem;line-height:1.4;margin:14px 0 16px}
.translation-warning-banner svg{flex-shrink:0;margin-top:2px}

/* Плашки статуса поля/фрагмента в сетке результатов. */
.translation-badge{display:inline-block;font-size:0.68rem;font-weight:600;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:4px;white-space:nowrap}
.translation-badge-accent{background:var(--accent-tint);color:var(--accent-deep)}
.translation-badge-translit{background:var(--translit-tint);color:var(--translit)}
.translation-badge-neutral{background:var(--line);color:var(--ink-soft)}
.translation-badge-good{background:var(--good-tint);color:var(--good)}

/* Сетка результатов перевода — заменяет прежнюю <table> и скрытый <details>
   с сохраняемыми/транслитерируемыми полями: теперь каждое поле — строка со
   своей плашкой статуса, ничего не спрятано. Сама сетка при этом снова
   в <details> (13 сен 2026: список полей может быть длинным и раздувать
   окно) — свёрнута по умолчанию, см. gridExpanded в panel.js. */
.translation-grid-details{margin-bottom:6px}
.translation-grid-details[open] .translation-grid{margin-top:10px}
.translation-grid-summary{
  cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--ink-soft);
  list-style:none;display:flex;align-items:center;gap:7px;
}
.translation-grid-summary::-webkit-details-marker{display:none}
.translation-grid-summary::before{content:'▸';font-size:0.7rem;color:var(--ink-soft);transition:transform .15s ease}
.translation-grid-details[open] .translation-grid-summary::before{transform:rotate(90deg)}
.translation-grid{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:6px}
.translation-grid-row{display:grid;grid-template-columns:1fr 1.3fr 118px;align-items:center;border-top:1px solid var(--line)}
.translation-grid-row:first-child{border-top:none}
.translation-grid-head{background:var(--accent-tint)}
.translation-grid-head span{padding:9px 12px;font-size:0.74rem;font-weight:600;color:var(--accent-deep);font-family:'IBM Plex Mono',monospace}
.translation-grid-row-alt{background:#FAFAF8}
.translation-grid-cell{padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.translation-grid-source-label{font-size:0.72rem;color:var(--ink-soft);margin-bottom:2px}

.translation-toolbar{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.translation-toolbar-option{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--ink-soft)}
.translation-toolbar-buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.translation-toolbar-buttons select{max-width:200px}
.translation-panel select,.translation-panel input:not([type=checkbox]),.translation-panel textarea{
  font:inherit;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:6px;background:#fff;color:var(--ink);max-width:100%;
}
/* Внутри сетки результатов поля выглядят как текст, а не как обычные инпуты
   формы: тот же приоритет CSS (.translation-panel + .translation-grid = 2
   класса, как и в общем правиле выше), но идёт следом, поэтому и побеждает. */
.translation-panel .translation-grid input{width:100%;padding:6px 8px;border:1px solid transparent;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:0.85rem;background:transparent;color:var(--ink)}
.translation-panel .translation-grid input:disabled{color:var(--ink-soft)}
.translation-panel .translation-grid textarea{width:100%;padding:6px 8px;border:1px solid var(--line-strong);border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:0.85rem;background:#fff;color:var(--ink);resize:vertical}
.translation-panel .translation-grid textarea:disabled{background:transparent;border-color:transparent;color:var(--ink-soft)}
.translation-content{overflow-x:auto}
.translation-template-editor{border:1px solid var(--line);padding:14px;border-radius:8px}
.translation-template-editor>label{display:block;margin:8px 0}
.translation-template-row{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:10px 0}
.translation-template-row label{display:flex;align-items:center;gap:5px}
.translation-template-editor>button{margin:12px 8px 0 0}

@media(max-width:600px){
  .translation-setup-row{flex-direction:column;align-items:stretch}
  /* flex-basis:200px from .translation-field's row layout would otherwise be
     read as a HEIGHT once the row becomes a column here — reset it. */
  .translation-field{flex:none;min-width:0}
  .translation-setup-row .btn-primary,.translation-setup-row .btn-secondary{width:100%}
  .translation-toolbar-buttons{flex-direction:column;align-items:stretch}
  .translation-toolbar-buttons select{width:100%;max-width:none}
  .translation-template-toolbar{flex-direction:column;align-items:stretch}
  .translation-link-btn{margin-left:0}
  .translation-info .lang-note{position:static;max-width:none}
  .translation-template-row label{width:100%;flex-wrap:wrap}
  .translation-grid-head{display:none}
  .translation-grid-row{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .translation-grid-cell{padding:4px 12px}
  .translation-grid-cell::before{content:attr(data-label);display:block;font-size:0.68rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:2px}
}
.translation-quality-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.translation-quality-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  background: var(--panel, #fff);
}
@media (max-width: 640px) {
  .translation-quality-summary { grid-template-columns: 1fr; }
}