/* public/assets/style.css
   Реєстр сервіс-провайдерів UMFO.

   One stylesheet for all eight pages. The palette, the tracking values and the
   radii below are the UMFO brand tokens as published — nothing here is a
   variation on them. Every neutral is warm-tinted, so there is no #000 and no
   #fff anywhere in this file.

   How the two grounds divide the work, matching umfo.eu: the chrome and the
   body are cream, and the dark is spent in one place — the landing hero. Gold
   is filled only on that dark panel (the button, the accent word); on cream it
   stays a hairline, a rule or a small mark. */

:root {
  /* ---- brand tokens ------------------------------------------------ */
  --paper:      #FBF4E9;
  --surface:    #FFFBF4;
  --cream:      #FAEEDF;
  --stone-100:  #F0E6D8;
  --stone-200:  #E3D7C5;
  --stone-400:  #B7A997;
  --stone-500:  #8E8474;
  --ink:        #1E2220;
  --graphite:   #44403A;
  --forest:     #153E35;
  --forest-2:   #1C5044;
  --gold:       #BD9345;
  --gold-deep:  #8C6A2C;
  --gold-soft:  #D8B770;

  /* --stone-500 on --paper measures 3.4:1, under the 4.5:1 floor for text.
     --stone-600 is that same taupe darkened to 5.1:1 and is what carries the
     tracked-caps labels, captions and secondary table text; --stone-500 is
     kept for rules, marks and other non-text uses. */
  --stone-600:  #6F675A;

  /* Status text. Quiet and desaturated — never a filled banner. */
  --negative:   #9B3B2E;

  --radius-card: 14px;
  --radius-sm:   8px;

  --track-eyebrow: 0.24em;
  --track-caps:    0.10em;

  --font:      'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 68rem;
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);

  /* One module governs the landing. The hero's column of type is --measure
     wide; so is the category list in the band under it. Everything else on the
     page gives way to that one width — the band's heading column is simply
     what is left over once the list has had its share. */
  --measure: 36rem;
}

/* ---- base ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* <main> also carries .shell, whose padding shorthand would reset a top
   padding set on the bare element selector — so the page's own top margin is
   set at the same specificity. */
main { flex: 1 0 auto; }
main.shell { padding-top: 3.1rem; }

/* The landing sets its own rhythm: it opens with a full-bleed panel, so it
   carries no shell padding of its own and the hero sits flush under the
   header hairline. */
main.landing { padding: 0; }

h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

p { margin: 0 0 1rem; }

a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(140, 106, 44, 0.42);
  transition: text-decoration-color 0.18s var(--ease), color 0.18s var(--ease);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Small text that names a thing rather than saying it: eyebrows, table
   headers, definition-list terms, group titles. */
.label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.eyebrow {
  display: block;
  margin: 0 0 1.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  /* --gold itself reads at 2.6:1 on paper; --gold-deep is the same accent at
     4.6:1, so the eyebrow stays gold and stays readable. */
  color: var(--gold-deep);
}

/* The same eyebrow on the forest panel, where the ratio runs the other way:
   --gold-deep would sink into the ground, --gold-soft reads at 6.2:1. */
.eyebrow--dark { color: var(--gold-soft); }

.measure { max-width: 70ch; }

.lede {
  max-width: 70ch;
  margin: 0 0 2.6rem;
  font-size: 1.08rem;
  color: var(--graphite);
}

.note {
  max-width: 62ch;
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--stone-600);
}

.backlink {
  display: inline-block;
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  color: var(--stone-600);
  text-decoration-color: rgba(111, 103, 90, 0.4);
}
.backlink:hover { color: var(--gold-deep); }

/* ---- header --------------------------------------------------------- */

/* A cream bar, as on umfo.eu: the mark, the wordmark in ink, the links right,
   and a hairline underneath doing all the separating. No filled band — the
   dark on this site is spent on the landing hero, not on the chrome. */
.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--stone-200);
  color: var(--graphite);
}

.site-head__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

.site-head__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}

/* Gold foil at 26px: small enough that the metallic texture reads as a mark
   rather than as an image, and the wordmark beside it carries the name. */
.site-head__mark {
  display: block;
  width: auto;
  height: 26px;
}

.site-head__word {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  /* the tracking adds a trailing gap after the last letter; take it back so
     the divider sits at an even distance */
  margin-right: calc(var(--track-eyebrow) * -1);
}
.site-head__brand:hover .site-head__word { color: var(--gold-deep); }

.site-head__div {
  width: 1px;
  height: 18px;
  background: var(--gold);
  flex: none;
}

.site-head__section {
  font-size: 0.82rem;
  color: var(--stone-600);
}

.site-head__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  margin-left: auto;
  font-size: 0.82rem;
}
.site-head__nav a {
  color: var(--stone-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.site-head__nav a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

@media (max-width: 620px) {
  .site-head__div { display: none; }
  .site-head__section { order: 3; flex-basis: 100%; }
}

/* ---- footer --------------------------------------------------------- */

.site-foot {
  margin-top: 5rem;
  border-top: 1px solid var(--stone-200);
}

.site-foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-top: 1.35rem;
  padding-bottom: 2.4rem;
  font-size: 0.82rem;
  color: var(--stone-600);
}

/* ---- landing: the forest hero --------------------------------------- */

.landing { display: block; }

/* Full-bleed: the panel spans the viewport while the type inside it stays on
   the same .shell rails as every other page. overflow:hidden is load-bearing —
   it is what lets the monogram run past the right edge without the document
   ever scrolling sideways. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

/* Everything in the hero shares one measure, so the panel reads as a single
   column of type rather than four blocks each stopping somewhere different. */
.hero__col { max-width: var(--measure); }

.hero__title {
  margin: 0 0 1.15rem;
  font-size: clamp(2rem, 1.15rem + 3.1vw, 3.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--cream);
}

/* The accent word, exactly as umfo.eu sets it: the same face, italic, a lighter
   weight than the rest of the line, in --gold-soft (6.2:1 on forest). Manrope
   ships no italic, so this is a synthesised oblique — which is what the live
   site renders too. */
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
}

.hero__lede {
  max-width: var(--measure);
  margin: 0 0 2.75rem;
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--stone-200);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.9rem;
  margin: 0;
}

/* The quiet half of the pair: text, not a second button, kept off the gold by
   an underline that only warms up on hover. */
.hero__link {
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(216, 183, 112, 0.45);
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.18s var(--ease);
}
.hero__link:hover { border-bottom-color: var(--gold-soft); }
.hero__arrow { margin-left: 0.35rem; }

/* Small print, and on a narrow screen the one line of hero text the monogram
   can end up behind — so it recedes by size, not by colour. --stone-400 would
   read 5.2:1 on bare forest but only 3.1:1 over the brightest foil in the mark;
   --stone-200 holds 5.0:1 even there. Nothing on this panel uses --stone-400. */
.hero__note {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--stone-200);
}

/* The signature device. Oversized, bled off the right edge and held at 18%,
   it gives the panel a right-hand half without putting anything there to
   read. Decorative: the <img> carries an empty alt. */
.hero__mono {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -3.25rem;
  width: min(30rem, 42vw);
  transform: translateY(-50%);
  pointer-events: none;
}

.hero__mono img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.18;
  filter: drop-shadow(0 18px 40px rgba(21, 62, 53, 0.45)) brightness(1.05);
}

.hero :focus-visible { outline-color: var(--gold-soft); }

/* One lead figure, and deliberately the only one. The count and its caption are
   stacked, not set on a shared baseline: at this size the numeral's baseline is
   two-thirds of the way down the block, and a label parked there reads as
   dropped rather than placed. Stacked, they are one object. */
.figure {
  display: block;
  margin: 0 0 2.9rem;
}

.figure__n {
  display: block;
  font-size: clamp(3.4rem, 2rem + 6vw, 5.25rem);
  font-weight: 600;
  line-height: 0.86;
  /* Proportional figures here: one number set large wants its own fit. The
     tabular figures belong in the breakdown below, where a column has to
     line up. */
  letter-spacing: -0.035em;
  color: var(--cream);
}

.figure__cap {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-200);
}

/* ---- landing: the cream band ---------------------------------------- */

.band { padding: 5rem 0 1rem; }

/* The heading sits beside the list rather than above it. The list column is
   fixed at --measure — the hero column's width — and the heading takes what is
   left, which puts both outer edges of the band on the same rails as the header
   hairline and the footer above and below it. */
.band__inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) var(--measure);
  gap: 0 4rem;
  align-items: start;
}

.band__side { padding-top: 0.15rem; }

.band__title { margin: 0 0 0.75rem; }

.band__side .note { max-width: 26rem; margin-top: 0; }

.rule-gold {
  height: 2px;
  border: 0;
  margin: 0 0 1.4rem;
  width: 3.25rem;
  max-width: 100%;
  background: var(--gold);
}

@media (max-width: 900px) {
  .band { padding-top: 3.75rem; }
  .band__inner { grid-template-columns: minmax(0, var(--measure)); gap: 2rem 0; }
  .band__side { padding-top: 0; }
}

/* The per-category breakdown reads as a printed table of contents: name left,
   count right, hairlines between. */
.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--stone-200);
}

.toc li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.66rem 0;
  border-bottom: 1px solid var(--stone-200);
}

.toc__name { color: var(--ink); }

.toc__n {
  flex: none;
  min-width: 3ch;
  text-align: right;
  font-weight: 500;
  color: var(--stone-600);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---- buttons -------------------------------------------------------- */

.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.78rem 1.65rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius-sm);
  background: var(--forest);
  color: var(--cream);
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover,
a.btn:hover {
  background: var(--forest-2);
  border-color: var(--forest-2);
  color: var(--cream);
}

/* Gold as a fill, which on this site means one place: the primary action on the
   forest hero. umfo.eu sets it in tracked caps, and --ink on --gold measures
   5.7:1 (--forest would be 4.2:1, under the floor for text this size). */
.btn-gold,
a.btn-gold {
  padding: 0.92rem 1.75rem;
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.btn-gold:hover,
a.btn-gold:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--ink);
}

.btn-quiet,
a.btn-quiet {
  background: transparent;
  border-color: var(--stone-200);
  color: var(--graphite);
}
.btn-quiet:hover,
a.btn-quiet:hover {
  background: var(--stone-100);
  border-color: var(--stone-400);
  color: var(--graphite);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* ---- forms ---------------------------------------------------------- */

.form { max-width: 52rem; }

.field {
  display: block;
  margin: 0 0 1.3rem;
  max-width: 34rem;
  color: var(--graphite);
  font-size: 0.85rem;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.62rem 0.8rem;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 400;
  transition: border-color 0.18s var(--ease);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover { border-color: var(--stone-400); }

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible,
select:focus-visible { border-color: var(--gold-deep); }

/* The one free-text field in the questionnaire. Capped at 400 characters, so it
   is sized for what it is — a paragraph — and does not invite a page. */
textarea {
  min-height: 6.5rem;
  line-height: 1.55;
  resize: vertical;
}

input::placeholder { color: var(--stone-500); }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236F675A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 11px 8px;
}

/* A group of related fields under a small tracked-caps heading. The fieldset
   carries no border of its own — the hairline belongs to the legend, which
   keeps it unbroken. */
.group {
  min-width: 0;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

.group__title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.3rem 0 0.9rem;
  border-top: 1px solid var(--stone-200);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.group--first .group__title { padding-top: 0; border-top: 0; }

/* Розділ 6 — the блок напряму. public/submit.php renders all ten and reveals
   the one matching the chosen company, so the choice can change without a round
   trip. The browser's own [hidden] rule would do this; it is written out
   because a fieldset with a display of its own would quietly beat it. */
.catblock[hidden] { display: none; }

/* A parenthetical inside a tracked-caps heading or label: same size, ordinary
   case, so the constraint reads as a note rather than as shouting. */
.group__hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stone-600);
}

/* A sentence of guidance under a section heading — why the section is being
   asked, or what will not be published. */
.group__note {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--stone-600);
}

/* A sub-heading inside a section: several checkbox groups can sit under one
   numbered heading without each of them becoming a section of its own. */
.group__lead {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--graphite);
}
.group__lead:first-of-type { margin-top: 0; }

/* Two short fields that belong together sit side by side while there is room. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
  margin-bottom: 1.3rem;
}
.field-row .field { flex: 1 1 15rem; margin-bottom: 0; }
.field-row:last-child { margin-bottom: 0; }

/* The description runs the full width of the form rather than the 34rem a
   single-line field is held to: a paragraph reads badly in a narrow column. */
.field--wide { max-width: none; }

/* Checkbox groups run as many columns as the width allows, so a twelve-item
   vocabulary is three short columns rather than a twelve-row wall. */
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.45rem 1.75rem;
  margin: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.15rem 0;
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}

/* The native control is grey-and-white and sits outside this palette, so the
   box is drawn here: stone hairline on the warm surface, forest when checked.
   Under forced colours the browser's own control comes back. */
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.22rem 0 0;
  border: 1px solid var(--stone-400);
  border-radius: 3px;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.64rem 0.64rem;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.check input[type="checkbox"]:hover { border-color: var(--stone-500); }
.check input[type="checkbox"]:checked {
  border-color: var(--forest);
  background-color: var(--forest);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FAEEDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 6.3 4.7 9.4 10.4 3.1'/%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  .check input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
}

/* Filters sit on one line on desktop and stack when there is no room. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem 1.1rem;
  margin: 1.75rem 0 1.9rem;
}
.filters .field {
  margin: 0;
  min-width: 12rem;
  max-width: 22rem;
  flex: 1 1 12rem;
}
.filters .btn { flex: none; }

/* ---- notices -------------------------------------------------------- */

/* No filled alert bars: a hairline and the text in its own colour. */
.notice {
  max-width: 62ch;
  margin: 0 0 1.7rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--stone-200);
  font-size: 0.92rem;
}
.notice--error { color: var(--negative); border-top-color: var(--negative); }
.notice--ok    { color: var(--forest);   border-top-color: var(--forest); }
.notice a { color: inherit; }

/* ---- registry listing ----------------------------------------------- */

/* On a narrow screen the table scrolls inside this box instead of forcing the
   whole page sideways. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.registry {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
}

.registry th,
.registry td {
  padding: 0.78rem 1.25rem 0.78rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--stone-200);
}
.registry th:last-child,
.registry td:last-child { padding-right: 0; }

.registry thead th {
  padding-bottom: 0.55rem;
  border-bottom-color: var(--stone-400);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.registry tbody tr { transition: background-color 0.15s var(--ease); }
.registry tbody tr:hover { background: var(--stone-100); }

.registry__name a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.registry__name a:hover {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Sentence case, not tracked caps: this value repeats on every one of 110 rows
   and uppercase at that length costs more to scan than it gains in hierarchy.
   Caps stay on the column header, which is short and read once. */
.registry__cat {
  font-size: 0.84rem;
  color: var(--stone-600);
}

.registry__status {
  font-size: 0.86rem;
  color: var(--stone-600);
}

.result-count {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  color: var(--stone-600);
}

/* Below 640px the three columns stack into one block per company. A sideways
   scrolling table truncates the category mid-word, and this list is opened on a
   phone as often as on a desk. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .registry { min-width: 0; }
  .registry thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .registry tr { display: block; padding: 0.95rem 0 1rem; border-bottom: 1px solid var(--stone-200); }
  .registry td { display: block; padding: 0; border-bottom: 0; }
  .registry__name a { font-size: 1.02rem; }
  .registry__cat { margin-top: 0.3rem; }
  .registry__status { margin-top: 0.15rem; font-size: 0.8rem; }
}

/* ---- company card --------------------------------------------------- */

.card-meta {
  margin: 0.3rem 0 2.4rem;
  font-size: 0.84rem;
  color: var(--stone-600);
}

/* The company's own paragraph, set above the tabulated facts and given the
   registry's reading measure — it is prose, not a field value. */
.card-description {
  max-width: 62ch;
  margin: 0 0 2.4rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--graphite);
}

/* The card is now four sections rather than one long list, so each gets the
   same small tracked-caps heading the forms use — the questionnaire read back
   in the questionnaire's own order. */
.card-section {
  margin: 2.6rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.card-section:first-of-type { margin-top: 0; }

.deflist {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  margin: 0.7rem 0 0;
  border-top: 1px solid var(--stone-200);
}

.deflist dt {
  padding: 1.05rem 1.75rem 0.9rem 0;
  border-bottom: 1px solid var(--stone-200);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.deflist dd {
  margin: 0;
  padding: 0.85rem 0 0.9rem;
  border-bottom: 1px solid var(--stone-200);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* A third of the fields are legitimately empty. Blanks recede by size, not by
   fading out: --stone-400 measures 2.1:1 on paper, which is unreadable, and
   "не вказано" carries real meaning (the data is missing, not absent by error). */
.deflist dd.is-empty {
  color: var(--stone-600);
  font-size: 0.88rem;
}

.deflist__note {
  margin: 1.1rem 0 0;
  max-width: 60ch;
  font-size: 0.84rem;
  color: var(--stone-600);
}

@media (max-width: 640px) {
  .deflist { grid-template-columns: 1fr; }
  .deflist dt { padding: 1rem 0 0.15rem; border-bottom: 0; }
  .deflist dd { padding: 0 0 1rem; }
}

/* ---- moderation queue ----------------------------------------------- */

.queue { margin: 2.2rem 0 0; }

.queue__item {
  padding: 1.7rem 0 1.9rem;
  border-top: 1px solid var(--stone-200);
}

.queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.85rem;
  margin: 0 0 0.35rem;
}

.queue__kind {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.queue__name { font-size: 1.1rem; font-weight: 600; }

.queue__when { font-size: 0.8rem; color: var(--stone-600); }

.queue__who { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--graphite); }

/* The submitted payload, shown as what it is: keyed data. */
.payload {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0.35rem 1.25rem;
  max-width: 46rem;
  margin: 0 0 1.2rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--stone-100);
}

.payload dt {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.payload dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.payload dd.is-empty { color: var(--stone-600); }

/* Most edits move two fields out of twenty-six. A gold rule down the left of
   the ones that moved lets a partner find them without reading the rest, and
   the previous value sits under the new one so the difference is on the page
   rather than in the reviewer's memory. */
.payload dd.is-changed {
  padding-left: 0.6rem;
  border-left: 2px solid var(--gold-deep);
}

.payload__was {
  display: block;
  font-size: 0.78rem;
  color: var(--stone-600);
}

/* Розділ 8 and the contact already on file: same keyed-data treatment, set
   apart under their own label so the never-published boundary is visible in
   the queue and not just in the schema. */
.payload__aside {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
}

.payload--private { border-left: 2px solid var(--stone-400); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

@media (max-width: 560px) {
  .payload { grid-template-columns: 1fr; gap: 0.1rem; }
  .payload dd { margin-bottom: 0.5rem; }
}

.queue__warn {
  margin: 0 0 1rem;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--negative);
  font-size: 0.88rem;
  color: var(--negative);
}

/* ---- admin: two views ------------------------------------------------ */

/* Адмінка тепер не одна сторінка, а дві — черга і реєстрації. Перемикач
   набраний тим самим трековим капсом, що й решта назв розділів; активний
   тримає золоту підкреслювальну лінію, яка сідає на хайрлайн контейнера. */
.views {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.7rem;
  margin: 0 0 1.9rem;
  border-bottom: 1px solid var(--stone-200);
}

.views a {
  padding: 0 0 0.7rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
  text-decoration: none;
}
.views a:hover { color: var(--gold-deep); }
.views a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold-deep);
}

.views__n {
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--stone-500);
}

/* ---- admin: registrations ------------------------------------------- */

.regs__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 1.4rem 0 1.9rem;
}

/* Своя таблиця, а не .registry: у реєстрі три стовпці й вони складаються в
   блоки на телефоні, тут їх сім і складати їх нікуди — це екран, який три
   партнерки читають з десктопа, тож ширина лишається, а вузький екран її
   прокручує всередині .table-wrap. */
.regs {
  width: 100%;
  min-width: 54rem;
  border-collapse: collapse;
}

.regs th,
.regs td {
  padding: 0.72rem 1.15rem 0.72rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--stone-200);
}
.regs th:last-child,
.regs td:last-child { padding-right: 0; }

.regs thead th {
  padding-bottom: 0.55rem;
  border-bottom-color: var(--stone-400);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
  white-space: nowrap;
}

.regs tbody tr { transition: background-color 0.15s var(--ease); }
.regs tbody tr:hover { background: var(--stone-100); }

.regs__name { font-weight: 500; }

/* break-word, не anywhere: anywhere зменшує і min-content ширину колонки, тож
   на вузькому екрані стовпець стискається, а адреса рветься посеред слова
   («provide|rgbexamp|le.com») замість того, щоб таблиця прокрутилася всередині
   .table-wrap. Рветься лише те, що не вміщається саме по собі. */
.regs__mono {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  overflow-wrap: break-word;
}

/* Номер набирається пробілами і дефісами, тож авторозкладка таблиці охоче
   рве його на три рядки, щойно сусідній стовпець попросить місця. Номер, у
   якому «+380» і «123-45-67» стоять на різних рядках, не читається. */
.regs__tel { white-space: nowrap; }

.regs__quiet {
  font-size: 0.84rem;
  color: var(--stone-600);
  white-space: nowrap;
}

/* Другий рядок в осередку: компанія під іменем, кількість входів під датою,
   версія згоди під її датою. Дрібне і тихе — його читають, лише коли перший
   рядок уже привів очі в потрібне місце. */
.regs__sub {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--stone-600);
}

.regs__none { color: var(--stone-400); }

/* Тип рядка. Провайдер і заявник підсвічені, бо саме вони — не ліди: за ними
   картка або заявка, і в списку контактів їх треба бачити окремо. */
.kind {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--stone-400);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--stone-600);
  white-space: nowrap;
}
.kind--provider  { border-color: var(--forest);    color: var(--forest); }
.kind--applicant { border-color: var(--gold-deep); color: var(--gold-deep); }

/* Згода на обробку даних — це речення, а не пункт списку: галочка лишається
   зверху рядка, а текст набирається на повну міру. */
.check--consent {
  max-width: 52rem;
  margin: 1.6rem 0 1.4rem;
  line-height: 1.55;
}

/* ---- dashboard ------------------------------------------------------ */

.owned {
  padding: 2rem 0 0;
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--stone-200);
}
.owned:first-of-type { margin-top: 1.8rem; }

.owned__meta { margin: 0 0 1.6rem; font-size: 0.85rem; color: var(--stone-600); }
.owned__meta strong { color: var(--graphite); font-weight: 600; }

/* ---- message page --------------------------------------------------- */

.message { max-width: 58ch; padding-bottom: 1rem; }

/* ---- motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- narrow screens ------------------------------------------------- */

/* The monogram gets out of the way of the type once the hero is one narrow
   column: smaller, dropped to the foot of the panel, and quieter still, so no
   line of text is ever read across it. */
@media (max-width: 780px) {
  .hero__inner { padding-top: 3.75rem; padding-bottom: 4.25rem; }
  .hero__mono {
    top: auto;
    bottom: -2.5rem;
    right: -2.5rem;
    width: min(15rem, 44vw);
    transform: none;
  }
  .hero__mono img { opacity: 0.1; }
}

@media (max-width: 480px) {
  .shell { padding: 0 1.15rem; }
  main.shell { padding-top: 2.1rem; }
  .site-foot { margin-top: 3.25rem; }
  .hero__inner { padding-top: 3rem; padding-bottom: 3.5rem; }
  .hero__lede { margin-bottom: 2.25rem; }
  .hero__note { margin-top: 2rem; }
  .figure { margin-bottom: 2.4rem; }
  .band { padding-top: 3rem; }
}