/* Quadrat — the components. Every class here is one block of HTML used on every page; no page carries its
   own CSS and no element an inline style. Values come from tokens.css only. */

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--size-4); line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, figure, pre, table { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
h2 { font-size: var(--size-2); line-height: 1.2; }
h3 { font-size: var(--size-3); line-height: 1.3; }
a { color: var(--moss); text-decoration: underline; text-underline-offset: var(--underline); }
a:hover { color: var(--moss-ink); }
code, kbd, samp, .mono { font-family: var(--mono); font-size: var(--size-6); }
strong { font-weight: 600; }
small, .muted { color: var(--ink-2); }
.small { font-size: var(--size-5); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--line-2) solid var(--ink); outline-offset: var(--line-2); }
img, svg { display: block; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

/* ---------- layout ---------- */
.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }
.flow > * + * { margin-top: var(--s-2); }
.section { padding-top: var(--s-6); }
.section + .section { margin-top: 0; }
.section--rule { border-top: var(--line) solid var(--rule); padding-top: var(--s-4); }
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.stack--tight { gap: var(--s-1); }
.stack--loose { gap: var(--s-3); }
.sections { display: flex; flex-direction: column; gap: var(--s-6); padding-top: var(--s-6); padding-bottom: var(--s-7); }
.teaser { display: flex; flex-direction: column; gap: var(--s-2); max-width: var(--measure); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--gutter); top: -100%; z-index: 2; background: var(--paper); color: var(--ink); padding: var(--s-1) var(--s-2); border: var(--line-2) solid var(--ink); border-radius: var(--radius); }
.skip:focus { top: var(--s-1); }

/* ---------- header ---------- */
.header { border-bottom: var(--line) solid var(--rule); }
.header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--target); font-weight: 600; font-size: var(--size-wordmark); color: var(--moss); text-decoration: none; letter-spacing: -0.01em; }
.wordmark svg { width: var(--icon-2); height: var(--icon-2); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gap-menu); margin: 0; padding: 0; list-style: none; font-size: var(--size-menu); }
.menu a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); text-decoration: none; border-bottom: var(--line-2) solid transparent; }
.menu a:hover { color: var(--moss-ink); }
.menu a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--moss); }
.menu a.btn { margin-left: var(--s-1); color: var(--paper); border-bottom: var(--line) solid var(--moss); }
.menu a.btn:hover { color: var(--paper); border-bottom-color: var(--moss-ink); }

/* ---------- page title ---------- */
.title { font-size: var(--size-1); line-height: 1.1; letter-spacing: -0.02em; max-width: var(--measure); text-wrap: balance; }
.lead { font-size: var(--size-3); line-height: 1.4; color: var(--ink-2); max-width: var(--measure); }
.titleblock { display: flex; flex-direction: column; gap: var(--s-2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); padding: 0 var(--pad-btn); border: var(--line) solid var(--moss); border-radius: var(--radius); background: var(--moss); color: var(--paper); font-weight: 600; font-size: var(--size-4); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--moss-ink); border-color: var(--moss-ink); color: var(--paper); }
.btn--2 { background: var(--paper); color: var(--moss); }
.btn--2:hover { background: var(--paper); color: var(--moss-ink); }
.btn:focus-visible { outline: var(--line-2) solid var(--ink); outline-offset: var(--line-2); }
.btn[disabled] { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
form.inline { display: inline; }

/* ---------- drop zones ---------- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--drop-min); padding: var(--s-6) var(--gutter); border: var(--line-2) dashed var(--moss); border-radius: var(--radius-2); background: var(--moss-paper); text-align: center; cursor: pointer; }
.drop.is-over, .drop:focus-within { border-style: solid; background: var(--moss-paper-2); }
.drop__arrow { width: var(--icon-3); height: var(--icon-3); color: var(--moss); }
.drop__head { font-size: var(--size-3); font-weight: 600; line-height: 1.3; }
.drop__types { color: var(--ink-2); }
.drop__file { margin-top: var(--s-1); }
.drop__file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop--2 { min-height: 0; padding: var(--s-3) var(--gutter); border: var(--line) dashed var(--ink-2); background: var(--paper); gap: var(--s-1); }
.drop--2.is-over, .drop--2:focus-within { border-style: solid; border-color: var(--ink); background: var(--paper-2); }
.drop--2 .drop__head { font-size: var(--size-4); }
.drop.is-loaded { border-style: solid; }
.drop__meta { color: var(--ink-2); font-size: var(--size-5); max-width: var(--measure); overflow-wrap: anywhere; }
.drop__nojs { display: none; color: var(--ink-2); font-size: var(--size-5); max-width: var(--measure); }
.nojs .drop__nojs { display: block; }
.nojs .drop__file, .nojs .drop__arrow { display: none; }
.drop__file:focus-within { outline: var(--line-2) solid var(--ink); outline-offset: var(--line-2); }

/* ---------- privacy line ---------- */
.privacy { display: flex; align-items: flex-start; gap: var(--s-1); color: var(--ink-2); max-width: var(--measure); }
.privacy svg { flex: 0 0 auto; width: var(--icon); height: var(--icon); margin-top: 0.3em; }
.privacy-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: var(--s-1) var(--s-4); }
.privacy-row > p:last-child { color: var(--ink-2); font-size: var(--size-5); }

/* ---------- outputs strip ---------- */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-top: var(--s-4); border-top: var(--line) solid var(--rule); }
.strip__cell { display: flex; flex-direction: column; gap: var(--s-1); }
.strip__n { font-family: var(--mono); font-size: var(--size-6); color: var(--moss); }
.strip__cell p { color: var(--ink-2); }

/* ---------- flag glyph ---------- */
.glyph { font-family: var(--mono); font-weight: 500; color: var(--flag); }
.flag { font-weight: 600; overflow-wrap: anywhere; }
.legend { color: var(--ink-2); font-size: var(--size-5); }

/* ---------- verdict band and report panel ---------- */
.report { border: var(--line) solid var(--rule); border-radius: var(--radius-2); overflow: hidden; }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--pad-band) var(--s-3); border-bottom: var(--line) solid var(--rule); }
.band--flag { background: var(--flag-paper); color: var(--flag-ink); }
.band--clear { background: var(--clear-paper); color: var(--clear-ink); }
.band__text { font-size: var(--size-3); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.band__meta { font-family: var(--mono); font-size: var(--size-6); color: var(--ink-2); overflow-wrap: anywhere; }
.band__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.report__grid { display: grid; grid-template-columns: minmax(0, var(--col-contents)) minmax(0, var(--col-findings)); }
.contents { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-right: var(--line) solid var(--rule); font-size: var(--size-menu); }
.contents a { display: flex; align-items: baseline; gap: var(--s-1); color: var(--ink); text-decoration: none; min-height: var(--s-4); }
.contents a:hover { color: var(--moss-ink); text-decoration: underline; }
.contents a .mono { color: var(--moss); }
.contents__count { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.contents__count.is-flag { color: var(--flag); }
.contents hr { width: 100%; border: 0; border-top: var(--line) solid var(--rule); margin: var(--s-1) 0; }
.findings { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-3); min-width: 0; }
.findings h2 { font-size: var(--size-3); }
.findings h2 .mono { color: var(--moss); margin-right: var(--s-1); }
.findings > section { display: flex; flex-direction: column; gap: var(--s-2); }
.findings .rows { display: flex; flex-direction: column; }

/* ---------- finding row ---------- */
.row { display: flex; gap: var(--gap-glyph); padding: var(--s-2) 0; border-top: var(--line) solid var(--rule); }
.row:last-child { border-bottom: var(--line) solid var(--rule); }
.row__glyph { flex: 0 0 auto; font-family: var(--mono); font-weight: 500; color: var(--flag); width: 1.25em; }
.row__glyph.is-quiet { color: var(--ink-2); }
.row__body { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.row__head { font-weight: 600; overflow-wrap: anywhere; }
.row__rest { font-weight: 400; }
.row--title { border: 0; padding: 0; gap: var(--s-2); }
.row--title:last-child { border: 0; }
.row--title .row__glyph { font-size: var(--size-2); line-height: 1.1; padding-top: var(--s-1); width: auto; }
.row--title .row__body { gap: var(--s-2); }
.rows h3.row__head { font-size: var(--size-3); }
.rows h3.row__head a { color: var(--ink); text-decoration: none; }
.rows h3.row__head a:hover { color: var(--moss-ink); text-decoration: underline; }
.row__where { font-family: var(--mono); font-size: var(--size-6); color: var(--ink-2); overflow-wrap: anywhere; }
.row__where a { margin-left: var(--s-1); }

/* ---------- table ---------- */
.tablewrap { overflow-x: auto; border: var(--line) solid var(--rule); border-radius: var(--radius-2); }
table { border-collapse: collapse; width: 100%; font-size: var(--size-5); font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: var(--s-1) var(--pad-cell); border-bottom: var(--line) solid var(--rule-2); }
thead th { background: var(--paper-2); border-bottom: var(--line) solid var(--rule); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td.ref, th.ref { font-family: var(--mono); font-size: var(--size-6); white-space: nowrap; }
td.n, th.n { text-align: right; white-space: nowrap; }
.caption { color: var(--ink-2); font-size: var(--size-5); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); max-width: var(--measure); }
.field label { font-weight: 600; }
.field .help { color: var(--ink-2); font-size: var(--size-5); }
.input { width: 100%; min-height: var(--target); padding: var(--s-1) var(--pad-cell); border: var(--line) solid var(--ink-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: var(--size-6); }
textarea.input { min-height: var(--input-min); resize: vertical; }
.input:focus-visible { outline: var(--line-2) solid var(--ink); outline-offset: var(--line-2); }
.input.is-error { border: var(--line-2) solid var(--ink); }
.msg { color: var(--ink-2); font-size: var(--size-5); }

/* ---------- definition list, pre ---------- */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); font-size: var(--size-5); }
.dl dt { font-family: var(--mono); font-size: var(--size-6); overflow-wrap: anywhere; }
.dl dd { margin: 0; }
pre { padding: var(--s-2) var(--s-3); background: var(--paper-2); border: var(--line) solid var(--rule); border-radius: var(--radius-2); font-family: var(--mono); font-size: var(--size-5); line-height: 1.5; overflow-x: auto; }
pre code { font-size: inherit; }
blockquote { margin: 0; padding: var(--s-2) var(--s-3); border-left: var(--line-2) solid var(--rule); color: var(--ink-2); max-width: var(--measure); }
.panel { padding: var(--s-3); background: var(--paper-2); border-radius: var(--radius-2); }

/* ---------- pricing panel ---------- */
.price { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: var(--line) solid var(--rule); border-radius: var(--radius-2); max-width: var(--measure); }
.price__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--size-price); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price__big small { font-size: var(--size-4); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.price__terms { color: var(--ink-2); }

/* ---------- prose lists ---------- */
.prose ul, .prose ol { padding-left: var(--s-3); }
.prose li + li { margin-top: var(--s-1); }
.prose h2 { padding-top: var(--s-2); }
.prose h3 { padding-top: var(--s-1); }
.prose table { font-size: var(--size-5); }
.prose p, .prose li { max-width: var(--measure); }

/* ---------- footer ---------- */
.footer { border-top: var(--line) solid var(--rule); color: var(--ink-2); font-size: var(--size-5); line-height: 1.6; }
.footer__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding-top: var(--s-3); padding-bottom: var(--s-5); }
.footer__in p:last-child { text-align: right; }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .header__in { flex-direction: column; align-items: flex-start; }
  .menu { width: 100%; justify-content: flex-start; gap: 0 var(--s-2); }
  .menu .btn { margin: var(--s-1) 0 0; }
  .grid-2, .strip, .report__grid, .footer__in, .dl { grid-template-columns: minmax(0, 1fr); }
  .contents { border-right: 0; border-bottom: var(--line) solid var(--rule); }
  .footer__in p:last-child { text-align: left; }
  .privacy-row { grid-template-columns: minmax(0, 1fr); }
  .band__side { width: 100%; }
}

/* ---------- print ---------- */
@media print {
  .header .menu, .drop, .btn, .skip, .privacy-row, .strip, .teaser, .footer__in p:last-child { display: none !important; }
  body { background: var(--print-paper); color: var(--print-ink); }
  .report, .tablewrap, pre { border-color: var(--print-ink); }
  .band, .band--flag, .band--clear { background: var(--print-paper); color: var(--print-ink); border: var(--line-2) solid var(--print-ink); }
  .band__meta, .row__where, .contents__count, .legend, .caption { color: var(--print-ink); }
  .contents { display: none; }
  .report__grid { grid-template-columns: minmax(0, 1fr); }
  a { color: var(--print-ink); }
}