/* W-lib · Переводы — стол переводчика и вычитка (webapp/autotr.js).
 * Тот же материал, что у W-lib: бумага, тушь, один красный, жёсткие рамки. */

.tr-slot { display: flex; gap: 0; }
.tr-how { margin: 0; font-size: 14px; line-height: 1.5; }
.tr-warn {
  margin: 8px 0 0; padding: 10px 12px;
  border: 2px solid var(--wl-red); background: var(--wl-white);
  font: 600 13px var(--wl-sans); color: var(--wl-red);
}
.tr-sub { margin: 0; font: 600 13px var(--wl-sans); color: var(--wl-dim); }
.tr-stack { display: grid; gap: 12px; }
.tr-card {
  display: grid; gap: 10px; padding: 14px;
  border: 2px solid var(--wl-ink); background: var(--wl-white);
  box-shadow: 4px 4px 0 var(--wl-ink);
}
.tr-card h3 { margin: 0; font: 900 18px var(--wl-display); }
.tr-card .wl-dim { margin: 0; }
.tr-status { display: grid; gap: 2px; }
.tr-status b { font: 900 18px var(--wl-display); }
.tr-status span { font: 600 12px var(--wl-sans); color: var(--wl-dim); }
.tr-bar { height: 8px; }
.tr-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Листалка страниц */
.tr-nav {
  position: sticky; top: calc(60px + var(--safe-top, 0px)); z-index: 3;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  margin-top: 16px; background: var(--wl-paper); border-bottom: 2px solid var(--wl-ink);
  font: 800 13px var(--wl-sans); text-align: center;
}
.tr-nav .wl-icon:disabled { opacity: 0.25; }

/* Страница и рамки реплик */
.tr-stage {
  position: relative; margin: 12px 16px 0;
  border: 2px solid var(--wl-ink); background: var(--wl-white);
  line-height: 0; user-select: none; -webkit-user-select: none;
}
.tr-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.tr-stage.is-drawing { touch-action: none; cursor: crosshair; outline: 3px dashed var(--wl-red); outline-offset: 2px; }
.tr-stage.is-drawing .tr-box { pointer-events: none; }
.tr-box {
  position: absolute; padding: 0; border: 2px solid var(--wl-red);
  background: rgba(216, 53, 42, 0.08); cursor: pointer;
}
.tr-box i {
  position: absolute; top: -2px; left: -2px; min-width: 18px; height: 18px; padding: 0 3px;
  background: var(--wl-red); color: var(--wl-white);
  font: 800 11px/18px var(--wl-sans); font-style: normal; text-align: center;
}
.tr-box.is-skip { border-style: dashed; border-color: var(--wl-dim); background: none; }
.tr-box.is-skip i { background: var(--wl-dim); }
.tr-box.is-pick { border-width: 3px; background: rgba(216, 53, 42, 0.18); }
.tr-rubber { position: absolute; border: 2px dashed var(--wl-red); background: rgba(216, 53, 42, 0.12); pointer-events: none; }
.tr-drawing { margin: 10px 16px 0; font: 700 13px var(--wl-sans); color: var(--wl-red); }

/* Реплики */
.tr-block {
  display: grid; gap: 8px; padding: 12px;
  border: 2px solid var(--wl-ink); background: var(--wl-white);
  scroll-margin-top: 120px;
}
.tr-block.is-pick { box-shadow: 4px 4px 0 var(--wl-red); border-color: var(--wl-red); }
.tr-block.is-skip { opacity: 0.6; }
.tr-block-head { display: flex; align-items: center; gap: 10px; }
.tr-block-head .wl-link { margin-left: auto; }
.tr-no {
  min-width: 32px; height: 32px; padding: 0 6px; border: 0;
  background: var(--wl-red); color: var(--wl-white); font: 800 14px var(--wl-sans); cursor: pointer;
}
.tr-check { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--wl-sans); color: var(--wl-dim); }
.tr-src, .tr-dst {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 8px 10px; border: 2px solid var(--wl-ink); background: var(--wl-paper);
  font: 15px/1.4 var(--wl-sans); color: var(--wl-ink);
}
.tr-src { font-size: 13px; color: var(--wl-dim); border-width: 1px; }
.tr-dst { background: var(--wl-white); font-weight: 600; }
.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-small { min-height: 34px; padding: 0 10px; font-size: 12px; }
.tr-size { font: 700 12px var(--wl-sans); color: var(--wl-dim); min-width: 64px; text-align: center; }

/* Вычитка (27.09.2026): проверено, стиль, полоса страниц, шторка, словарь. */
.tr-ok { min-width: 32px; height: 32px; border: 2px solid var(--wl-ink); background: var(--wl-white);
  color: var(--wl-dim); font: 900 16px var(--wl-sans); cursor: pointer; }
.tr-ok.is-on { background: #2e7d4f; border-color: #2e7d4f; color: var(--wl-white); }
.tr-eng { font: 700 10px var(--wl-sans); color: var(--wl-dim); text-transform: uppercase; letter-spacing: .06em; }
.tr-style { min-height: 34px; border: 2px solid var(--wl-ink); background: var(--wl-white); font: 700 12px var(--wl-sans); }
.tr-count { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 13px var(--wl-sans); }
.tr-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.tr-chip { flex: 0 0 auto; min-width: 34px; height: 30px; border: 2px solid var(--wl-ink); background: var(--wl-white);
  font: 800 12px var(--wl-sans); cursor: pointer; }
.tr-chip.is-todo { background: #f6d9d6; }
.tr-chip.is-part { background: #f5e8c8; }
.tr-chip.is-done { background: #cfe8d7; }
.tr-chip.is-now { outline: 3px solid var(--wl-red); outline-offset: 1px; }
.tr-stage.is-compare { touch-action: none; cursor: ew-resize; }
.tr-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-split { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--wl-red); pointer-events: none; }
.tr-split i { position: sticky; top: 45%; display: block; width: 28px; height: 28px; margin-left: -12.5px;
  border-radius: 50%; background: var(--wl-red); color: var(--wl-white); font: 900 14px/28px var(--wl-sans);
  font-style: normal; text-align: center; }
.tr-gloss-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; }
.tr-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }