/* Лендинг /l/prozorro/ — общее: токены «офіційний документ», выбор разметки, штамп, вичитка, чипы. */
:root {
  --paper: #f6f3ea;
  --sheet: #fdfcf8;
  --ink: #1d1f22;
  --ink-2: #4a4d52;
  --rule: #1d1f22;
  --rule-soft: #c9c4b4;
  --stamp: #2c3c95;           /* чорнило штампа — синьо-фіолетове, без символіки */
  --mark: #fff0a8;            /* маркер */
  --del: #a3271d;
  --ok: #1f5e2e;
  --focus: #2c3c95;
  --mono: "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", "Cousine", ui-monospace, monospace;
  --sans: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17181a; --sheet: #1f2023; --ink: #ece8dc; --ink-2: #b6b2a6; --rule: #ece8dc; --rule-soft: #45464a;
    --stamp: #9fb0ff; --mark: #5b4f12; --del: #ff8a7d; --ok: #8fd6a0; --focus: #9fb0ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17181a; --sheet: #1f2023; --ink: #ece8dc; --ink-2: #b6b2a6; --rule: #ece8dc; --rule-soft: #45464a;
  --stamp: #9fb0ff; --mark: #5b4f12; --del: #ff8a7d; --ok: #8fd6a0; --focus: #9fb0ff; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-2); font-weight: 400; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
h1, h2, h3 { font-family: var(--mono); line-height: 1.2; margin: 0; }
.num { display: inline-block; min-width: 2ch; }

/* ---- выбор разметки: одна видна ---- */
[data-layout="m"] { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  [data-layout="d"] { display: none; }
  [data-layout="m"] { display: block; }
}

/* ---- кнопки ---- */
.btn-primary { display: inline-flex; align-items: center; gap: .6em; background: var(--ink); color: var(--sheet);
  font: 700 1rem/1.2 var(--mono); padding: 14px 20px; text-decoration: none; border: 2px solid var(--ink);
  min-height: 48px; transition: transform .15s, box-shadow .15s; box-shadow: 4px 4px 0 var(--stamp); }
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--stamp); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stamp); }
.btn-ghost { font: 700 .95rem/1.2 var(--mono); background: transparent; color: var(--ink); border: 2px solid var(--ink);
  padding: 10px 14px; min-height: 44px; cursor: pointer; }
.btn-ghost:hover { background: var(--ink); color: var(--sheet); }
.btn-link { font: .95rem var(--mono); background: none; border: 0; color: var(--ink); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 6px; }

/* ---- кинетический заголовок: строки выезжают из маски ---- */
.kin .ln { display: block; overflow: hidden; clip-path: inset(-0.1em -0.15em -0.2em -0.15em); padding-bottom: .04em; }
.kin .ln > span { display: inline-block; transform: translateY(105%); animation: lnIn .8s cubic-bezier(.2,.7,.1,1) forwards; }
.kin .ln:nth-child(2) > span { animation-delay: .12s; }
.kin .ln:nth-child(3) > span { animation-delay: .24s; }
@keyframes lnIn { to { transform: none; } }

/* ---- штамп ---- */
.stamp, .m-stamp { display: inline-flex; flex-direction: column; align-items: center; color: var(--stamp);
  border: 3px solid var(--stamp); outline: 1.5px solid var(--stamp); outline-offset: 3px; padding: 6px 14px;
  font-family: var(--mono); font-weight: 700; letter-spacing: .06em; transform: rotate(-7deg);
  mix-blend-mode: multiply; opacity: 0; }
.stamp .s1, .m-stamp .s1 { font-size: .8em; }
.stamp .s2, .m-stamp .s2 { font-size: 1.35em; }
.stamp .s3 { font-size: .62em; letter-spacing: 0; font-weight: 400; }
.stamp.on, .m-stamp.on { animation: stampIn .45s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-7deg) scale(1.9); } 70% { opacity: .95; transform: rotate(-7deg) scale(.96); } 100% { opacity: .9; transform: rotate(-7deg) scale(1); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp, :root:not([data-theme="light"]) .m-stamp { mix-blend-mode: normal; } }
:root[data-theme="dark"] .stamp, :root[data-theme="dark"] .m-stamp { mix-blend-mode: normal; }

/* ---- вичитка: зачеркнули → вписали ---- */
.r-pair { display: inline; }
.r-old { text-decoration: none; background-image: linear-gradient(var(--del), var(--del)); background-repeat: no-repeat;
  background-position: 0 55%; background-size: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s ease, opacity .3s .5s; color: var(--ink); }
.r-new { text-decoration: none; display: none; background: var(--mark); color: var(--ink); padding: 0 .15em; }
.redacted .r-old { background-size: 100% 2px; color: var(--del); }
.redacted.done .r-old { opacity: .7; margin-right: .4em; }
.redacted.done .r-new { display: inline; animation: inkIn .5s ease both; }
@keyframes inkIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }

/* ---- чипы и подсветка рядков ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.chip { font: .9rem var(--mono); border: 1.5px dashed var(--ink); background: transparent; color: var(--ink); padding: 8px 12px; min-height: 44px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--mark); border-style: solid; font-weight: 700; }
.hl { background: var(--mark) !important; }
.dim-row { opacity: .45; }

/* ---- таблицы-сетки ---- */
table.grid { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--sheet); }
table.grid th, table.grid td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; }
table.grid thead th { font-weight: 700; background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); }
table.grid caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
table.grid tr { transition: background .25s, opacity .25s; }

.annex-media { position: relative; background: #fbfaf6; border: 1px solid var(--rule); }
.annex-img, .hero-video { display: block; width: 100%; height: auto; }
.video-btn { position: absolute; left: 10px; bottom: 10px; font: 700 .85rem var(--mono); background: var(--ink); color: var(--sheet); border: 0; padding: 8px 12px; min-height: 40px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kin .ln > span { transform: none; }
}