/* Спільні стилі для публічних юридичних сторінок.
   Окремо від застосунку: ці сторінки мають відкриватися без входу,
   без React і без збірки — щоб на них можна було послатися ззовні. */

:root {
  --canvas: #FAF8F5;
  --surface: #FFFFFF;
  --ink: #2C2825;
  --muted: #6E6960;
  --hairline: #E7E2D8;
  --accent: #5F7A4C;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.back {
  display: inline-block; margin-bottom: 2rem;
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.back:hover { text-decoration: underline; }

h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2; margin: 0 0 .4rem; }
.updated { color: var(--muted); font-size: .85rem; margin: 0 0 2rem; }

h2 {
  font-size: 1.1rem; margin: 2.25rem 0 .6rem; line-height: 1.3;
  padding-top: 1.25rem; border-top: 1px solid var(--hairline);
}
h3 { font-size: .98rem; margin: 1.4rem 0 .4rem; }

p, li { margin: 0 0 .7rem; }
ul { padding-left: 1.2rem; }
strong { font-weight: 600; }

a { color: var(--accent); }

.note {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 1rem 1.15rem; margin: 1.25rem 0;
}
.note p:last-child { margin-bottom: 0; }

.warn { border-left-color: #B3261E; }

.fill {
  background: #FFF3CD; color: #6B4E00;
  padding: .05rem .35rem; border-radius: 4px; font-weight: 600;
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.scroll { overflow-x: auto; }

footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); color: var(--muted); font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #17150F; --surface: #201E18; --ink: #EDE9E0;
    --muted: #A49D90; --hairline: #34302A; --accent: #A6BE8C;
  }
  .fill { background: #4A3B10; color: #FFE9A8; }
}