/* Звірка документів — вигляд.
   Розрахунок на великий екран (3840×2160 при 200 %) і на звичайний 1920.
   Усі розміри в rem від --кегль, тож кнопки А− / А+ збільшують геть усе разом. */

:root {
  --кегль: 18px;              /* базовий розмір тексту; змінює головний модуль */
  --чорнило: #15202b;
  --приглушене: #5a6b7c;
  --лінія: #d8e0e8;
  --тло: #f4f7fa;
  --картка: #ffffff;
  --було-тло: #fdeeee;
  --було-колір: #8c1d28;
  --було-знак: #f6c9c9;
  --стало-тло: #e8f7ed;
  --стало-колір: #12572f;
  --стало-знак: #b5e8c6;
  --перенос: #e6edff;
  --увага: #fff6e0;
  --увага-край: #d9a52a;
  --синій: #14508c;
  --радіус: 10px;
}

* { box-sizing: border-box; }

html { font-size: var(--кегль); }

body {
  margin: 0;
  background: var(--тло);
  color: var(--чорнило);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Ширина — як у калькулятора: та сама центральна колонка сайту.
   «На весь екран» знімає обмеження, коли треба читати широко. */
main { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 6rem; }
body.повний main, body.повний .смуга { max-width: 100rem; }

h1 { font-size: 1.9rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .7rem; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.шапка { background: var(--картка); border-bottom: 1px solid var(--лінія); padding: 1.6rem 1.5rem; }
/* Заголовок і обіцянка по центру, керування — окремим рядком праворуч. */
.смуга { max-width: 64rem; margin: 0 auto; display: block; text-align: center; }
.смуга h1 { margin-bottom: .4rem; }
.обіцянка { margin: 0 auto; max-width: 48rem; color: var(--приглушене); font-size: .95rem; }
.обіцянка b { color: var(--чорнило); }
.замок { margin-right: .3rem; }

/* ── Вибір файлів ──────────────────────────────────────────────────────── */
.вибір {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 2rem 0 1.4rem;
}
.джерело { background: var(--картка); border: 1px solid var(--лінія); border-radius: var(--радіус); padding: 1.3rem; }
.стрілка { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--приглушене); }
.стрілка-знак { font-size: 2rem; line-height: 1; }
#кн-поміняти { font-size: .82rem; line-height: 1.25; padding: .5rem .7rem; white-space: nowrap; }

.ярлик {
  display: inline-block; padding: .1rem .5rem; border-radius: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; vertical-align: .12em;
}
.ярлик-було { background: var(--було-знак); color: var(--було-колір); }
.ярлик-стало { background: var(--стало-знак); color: var(--стало-колір); }

.кидок {
  border: 2px dashed var(--лінія); border-radius: var(--радіус);
  padding: 1.8rem 1rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.кидок:hover, .кидок:focus-visible { border-color: var(--синій); background: #f7fbff; outline: none; }
.кидок.несуть { border-color: var(--синій); background: #eef5ff; }
.кидок-напис { margin: 0 0 .5rem; font-size: 1.02rem; }
.кидок-напис span { color: var(--приглушене); font-size: .9rem; }
.кидок-типи { margin: 0; color: var(--приглушене); font-size: .8rem; }

.стан { margin: .8rem 0 0; font-size: .92rem; color: var(--приглушене); word-break: break-word; }
.стан.готово { color: var(--чорнило); }
.стан.готово b { font-weight: 600; }

.вставка { margin-top: .8rem; }
.вставка summary { cursor: pointer; color: var(--синій); font-size: .9rem; }
.вставка textarea {
  width: 100%; margin-top: .6rem; padding: .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--лінія); border-radius: .5rem; resize: vertical;
}

/* ── Дії ───────────────────────────────────────────────────────────────── */
.дії { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.розтяжка { flex: 1; }

button {
  font: inherit; font-size: .95rem; padding: .62rem 1.15rem;
  border-radius: .55rem; border: 1px solid var(--лінія); background: var(--картка);
  color: var(--чорнило); cursor: pointer; transition: background .12s, border-color .12s;
}
button:hover:not(:disabled) { border-color: var(--синій); }
button:disabled { opacity: .45; cursor: default; }
button.головна { background: var(--синій); border-color: var(--синій); color: #fff; font-weight: 600; padding: .7rem 1.8rem; }
button.головна:hover:not(:disabled) { background: #0d3d6e; }
.галка { display: flex; align-items: center; gap: .4rem; font-size: .93rem; color: var(--приглушене); cursor: pointer; }
.галка input { width: 1rem; height: 1rem; }
.кегль { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--приглушене); }
.кегль button { padding: .4rem .7rem; }

/* ── Поступ і помилки ──────────────────────────────────────────────────── */
.поступ { margin: 1rem 0; }
.поступ-смуга { height: .5rem; background: var(--лінія); border-radius: .3rem; overflow: hidden; }
.поступ-смуга i { display: block; height: 100%; width: 0; background: var(--синій); transition: width .15s; }
.поступ p { margin: .5rem 0 0; color: var(--приглушене); font-size: .9rem; }

.лихо {
  background: #fdecec; border: 1px solid #e0a0a0; border-left: .35rem solid #b32222;
  color: #7c1717; padding: 1rem 1.2rem; border-radius: var(--радіус); margin: 1rem 0; font-size: .97rem;
}

/* ── Підсумок ──────────────────────────────────────────────────────────── */
.підсумок {
  display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;
  background: var(--картка); border: 1px solid var(--лінія); border-radius: var(--радіус);
  padding: 1.1rem 1.4rem; margin-bottom: 1rem;
}
.схожість b, .лічба b { font-size: 1.7rem; display: block; line-height: 1.1; }
.схожість span, .лічба span { color: var(--приглушене); font-size: .85rem; }
.забрати { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

.межі {
  background: var(--увага); border-left: .35rem solid var(--увага-край);
  padding: .9rem 1.2rem; border-radius: var(--радіус); margin-bottom: 1rem; font-size: .92rem;
}
.межі ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ── Дві колонки ───────────────────────────────────────────────────────── */
.порівняння { background: var(--картка); border: 1px solid var(--лінія); border-radius: var(--радіус); overflow: clip; }

.заголовки, .сітка { display: grid; grid-template-columns: 1fr 1fr; }
.заголовки {
  position: sticky; top: 0; z-index: 2; background: var(--картка);
  border-bottom: 1px solid var(--лінія);
}
.заголовок { padding: .85rem 1.2rem; font-size: .9rem; font-weight: 600; }
.заголовок + .заголовок { border-left: 1px solid var(--лінія); }
.заголовок span:last-child { color: var(--приглушене); font-weight: 400; }

/* Кожна пара — один рядок сітки: обидві клітинки автоматично однакової висоти,
   тому нічого не «з’їжджає» і не потрібні два окремі прокручування. */
.клітинка {
  padding: .75rem 1.2rem;
  border-bottom: 1px solid #eef2f6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.клітинка.права { border-left: 1px solid var(--лінія); }
.клітинка.порожня { background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 8px, #f2f4f7 8px, #f2f4f7 16px); }
.клітинка .номер {
  display: inline-block; min-width: 2.6rem; margin-right: .7rem;
  color: #97a5b3; font-size: .78rem; user-select: none; vertical-align: top;
}

.клітинка.ліва.рядок-replace, .клітинка.ліва.рядок-delete { background: var(--було-тло); }
.клітинка.права.рядок-replace, .клітинка.права.рядок-insert { background: var(--стало-тло); }
.клітинка.права.рядок-delete, .клітинка.ліва.рядок-insert { background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 8px, #f2f4f7 8px, #f2f4f7 16px); }

ins, del { text-decoration: none; padding: .05em .15em; border-radius: .2em; }
del { background: var(--було-знак); color: var(--було-колір); }
ins { background: var(--стало-знак); color: var(--стало-колір); }

.клітинка.рядок-equal { color: #46566a; }
.перенесено { box-shadow: inset .25rem 0 0 var(--синій); }
.позначка {
  display: inline-block; margin-left: .5rem; padding: .05rem .4rem; border-radius: .3rem;
  background: var(--перенос); color: var(--синій); font-size: .72rem; font-weight: 600;
}
.поточна .клітинка { outline: .18rem solid #f2c200; outline-offset: -.18rem; }

/* ── Ходіння по змінах ─────────────────────────────────────────────────── */
.ходіння {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  background: var(--картка); border: 1px solid var(--лінія); border-radius: 2rem;
  padding: .45rem .8rem; box-shadow: 0 .3rem 1.2rem rgba(21,32,43,.16);
}
/* Атрибут hidden слабший за display:flex — без цього рядка капсула видна завжди. */
.ходіння[hidden] { display: none; }
.ходіння button { border: none; background: transparent; font-size: 1.4rem; padding: .1rem .6rem; line-height: 1; }
.ходіння span { font-size: .88rem; color: var(--приглушене); min-width: 7.5rem; text-align: center; }

/* ── Пояснення ─────────────────────────────────────────────────────────── */
.скан {
  margin: .6rem 0 0; padding: .7rem .9rem; font-size: .9rem;
  background: var(--увага); border-left: .3rem solid var(--увага-край); border-radius: .4rem;
}
.пояснення summary { cursor: pointer; list-style: none; }
.пояснення summary::-webkit-details-marker { display: none; }
.пояснення summary h2 { display: inline; }
.пояснення summary::before { content: '▸ '; color: var(--приглушене); }
.пояснення details[open] summary::before { content: '▾ '; }
.пояснення ul { margin-top: 1rem; }

/* Пропущені незмінні абзаци в режимі «лише зміни». */
.клітинка.розрив {
  text-align: center; color: #9aa7b4; font-size: .8rem; letter-spacing: .04em;
  background: #fbfcfd; padding: .5rem;
}

/* Підказка про вибір файлу: різна для миші й для дотику. */
.лише-дотиком { display: none; }
@media (hover: none) {
  .лише-мишею { display: none; }
  .лише-дотиком { display: inline; }
}

.пояснення { margin-top: 2.5rem; background: var(--картка); border: 1px solid var(--лінія); border-radius: var(--радіус); padding: 1.3rem 1.6rem; }
.пояснення ul { margin: 0; padding-left: 1.3rem; color: var(--приглушене); }
.пояснення li { margin-bottom: .45rem; }
.пояснення b { color: var(--чорнило); }

.підвал { border-top: 1px solid var(--лінія); padding: 1.2rem 1.5rem 4.5rem; /* низ — місце під плаваючу капсулу */
  color: var(--приглушене); font-size: .85rem; text-align: center; }

/* ── Вузькі екрани ─────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .вибір { grid-template-columns: 1fr; }
  .стрілка { transform: rotate(90deg); justify-self: center; }
  .заголовки, .сітка { grid-template-columns: 1fr; }
  .клітинка.права { border-left: none; }
  .клітинка.ліва { border-bottom: none; }
  .заголовок + .заголовок { border-left: none; border-top: 1px solid var(--лінія); }
  .ходіння { left: 1rem; right: 1rem; justify-content: center; }
}

/* ── Друк ──────────────────────────────────────────────────────────────── */
@media print {
  .вибір, .дії, .ходіння, .пояснення, .підвал, .поступ, .забрати { display: none !important; }
  body { background: #fff; }
  .порівняння { border: none; }
  .клітинка { break-inside: avoid; }
}

/* Cell coordinates belong above the original text, not in its inline diff. */
.таблична-комірка .номер { display:block; margin:0 0 .6rem; font-size:.85em; line-height:1.4; color:#354456; }
.стан-комірки { display:block; margin-top:.5rem; font-size:.9em; color:#354456; }


/* ═══ ВИРІВНЮВАННЯ 18.09.2026 — за словом Ігоря: кнопки шапки по центру, підвал у ту саму колонку, без зайвої порожнечі внизу ═══ */
.смуга .екран { margin: .9rem auto 0; justify-content: center; }
main { padding-bottom: 2.5rem; }
.підвал { padding: 1.2rem 1.5rem 1.6rem; }
.підвал p { max-width: 64rem; margin: 0 auto; }
body.повний .підвал p { max-width: 100rem; }
/* body — flex-колонка (обгортка сайту), тому main у повному екрані стискався до вмісту; тримаємо його на всю ширину, як смугу й підвал */
body.повний main { width: 100%; }
/* той самий внутрішній відступ, що в main, — щоб бокові краї смуги, вмісту й підвалу збігалися */
.смуга, .підвал p { padding-left: 1.5rem; padding-right: 1.5rem; }
body.повний .смуга, body.повний .підвал p { padding-left: 0; padding-right: 0; } /* у повному екрані зовнішній відступ уже дають .шапка і .підвал */
/* коли є результат і плаваюча капсула ходіння — лишити під неї місце */
body:has(#ходіння:not([hidden])) main { padding-bottom: 6rem; }
body:has(#ходіння:not([hidden])) .підвал { padding-bottom: 4.5rem; }