/* kukudze verifier tool in the brand book style: the one-address panel (homepage hero, /email-verify/) and the bulk list
   (/email-verify/). Flat white panels, 1px borders, 4px radius, no shadows. Values from tokens.css. Mobile first. */

/* ---------- One-address panel ---------- */
.demo--panel { background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-20); }
.demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-16); padding-bottom: var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); }
.demo__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.demo__form > label { display: block; margin-bottom: var(--space-8); }
.demo__field { display: grid; gap: var(--space-12); }
.demo__field .input { font-family: var(--font-code); }
.demo__form .field-error { margin-top: var(--space-8); }
.demo__checks { margin-top: var(--space-16); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); }
.demo__checks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-16); min-height: 48px; padding: var(--space-8) var(--space-16); border-top: var(--border-thin) solid var(--color-border); }
.demo__checks li:first-child { border-top: 0; }
.demo__name { display: inline-flex; align-items: baseline; gap: var(--space-12); font-weight: 600; }
.demo__n { color: var(--color-primary); }
.demo__sig .sig { font-weight: 600; }
/* Locked rows (guests, unconfirmed accounts): calm and clearly not running. Muted text keeps AA contrast. */
.sig-lock { color: var(--color-text-muted); }
.demo__checks[data-lock] { background: var(--color-surface-muted); }
.demo__checks[data-lock] .demo__name { color: var(--color-text-muted); }
.demo__checks[data-lock] .demo__n { color: var(--color-text-muted); }
.demo__result { display: grid; gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-16); background: var(--color-surface-muted); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); }
.demo__result-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }
.demo__label { color: var(--color-text-muted); }
.demo__addr { overflow-wrap: anywhere; }
.demo__note { margin-top: var(--space-12); color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.icon.spin { animation: kuk-spin 900ms linear infinite; }
@media (min-width: 480px) {
	.demo__field { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 768px) { .demo--panel { padding: var(--space-24); } }

/* ---------- Verifier page layout ---------- */
.notice { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-24); padding: var(--space-12) var(--space-16); max-width: 72ch; background: var(--color-info-bg); color: var(--color-text); border-radius: var(--radius-control); }
.notice .icon { color: var(--color-info); flex: none; margin-top: 2px; }
.notice a { font-weight: 600; }
.vgrid { display: grid; gap: var(--space-48); }
@media (min-width: 1024px) {
	.vgrid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-48); align-items: start; }
	.vgrid__side { position: sticky; top: calc(var(--header-height) + var(--space-32)); }
}
.tool { background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); }
.tabs { display: flex; border-bottom: var(--border-thin) solid var(--color-border); }
.tabs__tab { flex: 1 1 0; min-height: 48px; padding: var(--space-8) var(--space-16); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-text-muted); font-size: var(--font-size-label); font-weight: 600; }
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tool__panel { padding: var(--space-20); }
@media (min-width: 768px) { .tool__panel { padding: var(--space-24); } .tabs__tab { flex: 0 0 auto; padding-inline: var(--space-24); } }
.tool__h { font-size: var(--font-size-h4); margin-bottom: var(--space-16); }
.no-js .tabs { display: none; }
.no-js #p-bulk { border-top: var(--border-thin) solid var(--color-border); }
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); margin-top: var(--space-20); padding: var(--space-16); border: 2px dashed var(--color-control-border); border-radius: var(--radius-control); }
.upload > .icon { color: var(--color-primary); }
.upload__text { flex: 1 1 220px; min-width: 0; }
.upload__title { font-weight: 600; }
.upload.is-over { background: var(--color-surface-blue); border: 2px solid var(--color-primary); }
.upload:has(.file-in:focus-visible) label.btn { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: var(--space-20) 0 var(--space-12); }
@media (max-width: 767px) { .tool__actions .btn-primary { width: 100%; } }
.key { display: grid; margin-top: var(--space-16); border-top: var(--border-thin) solid var(--color-border); }
.key li { display: grid; gap: var(--space-8); justify-items: start; padding-block: var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); }
.key p { color: var(--color-text-muted); }
.badge-note { color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 0 0 var(--border-thin) var(--color-border); }
.badge-note .icon { color: var(--color-info); }

/* ---------- Results ---------- */
.results { margin-top: var(--space-32); }
.results:focus { outline: none; }
.results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-16); }
.state { display: grid; gap: var(--space-12); }
.state__title { font-family: var(--font-display); font-size: var(--font-size-h4); font-weight: 700; letter-spacing: var(--letter-spacing-h4); font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: var(--color-surface-muted); border-radius: var(--radius-control); overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; background: var(--color-primary); }
.results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.results__file { display: inline-flex; align-items: center; gap: var(--space-8); overflow-wrap: anywhere; }
.results__file .icon { color: var(--color-text-muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filter { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--layout-touch-target); padding: 0 var(--space-12); border: var(--border-thin) solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-label); font-weight: 600; }
.filter .icon { width: 20px; height: 20px; }
.filter--valid .icon { color: var(--color-success); }
.filter--invalid .icon { color: var(--color-error); }
.filter--risky .icon { color: var(--color-warning); }
.filter--unknown .icon { color: var(--color-unknown); }
.filter:hover { border-color: var(--color-text); }
.filter[aria-pressed="true"] { background: var(--color-surface-blue); border-color: var(--color-primary); color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }

/* Two-table pattern: separate header and body tables, one shared colgroup, rounded top corners, no seams. */
.tbl-h, .tbl-b { width: 100%; table-layout: fixed; }
.tbl-h { border-collapse: separate; border-spacing: 0; }
.tbl-h th { height: var(--layout-table-head); padding: 0 var(--space-16); text-align: left; font-weight: 600; background: var(--color-primary); color: var(--color-on-primary); }
.tbl-h th:first-child { border-top-left-radius: var(--radius-control); }
.tbl-h th:last-child { border-top-right-radius: var(--radius-control); }
.tbl-scroll { border: var(--border-thin) solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--color-surface); }
.tbl-b td { height: var(--layout-table-row); padding: var(--space-12) var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); vertical-align: middle; }
.tbl-b tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .tbl-b tbody tr:hover td { background: var(--color-surface-blue); } }
.tbl-b .em { overflow-wrap: anywhere; }
.tbl-b .none { text-align: center; color: var(--color-text-muted); }
.note { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--color-text); font-weight: 600; white-space: nowrap; }
.note .icon { width: 18px; height: 18px; color: var(--color-info); }
.why-m { display: block; margin-top: var(--space-4); color: var(--color-text-muted); }
.c-email { width: 58%; } .c-res { width: 42%; } .c-why { width: 0; }
.tbl-h th:last-child, .tbl-b td:last-child { display: none; }
.tbl-h th:nth-child(2) { border-top-right-radius: var(--radius-control); }
@media (min-width: 768px) {
	.c-email { width: 40%; } .c-res { width: 22%; } .c-why { width: 38%; }
	.tbl-h th:last-child, .tbl-b td:last-child { display: table-cell; }
	.tbl-h th:nth-child(2) { border-top-right-radius: 0; }
	.why-m { display: none; }
	.tbl-b td:last-child { color: var(--color-text-muted); }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.pager__nav { display: flex; align-items: center; gap: var(--space-12); }
.alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-control); }
.alert--error { background: var(--color-error-bg); }
.alert--error > .icon { color: var(--color-error); }
.alert__title { font-weight: 700; }
.alert p + p { margin-top: var(--space-4); }
.alert .btn { margin-top: var(--space-16); }

/* ---------- /email-verify/ tool guide below the tool (redone 2026-11-05, owner: "reminds me homepage", "not too much
   content"). Three short parts in a documentation style: pipeline diagram, results reference table, visible Q&A.
   No homepage blocks (no big step numbers, band, split, accordion or final action strip). ---------- */
#checker { scroll-margin-top: calc(var(--header-height) + var(--space-24)); }
.vguide { padding-bottom: var(--page-section); }
.vguide__sec { padding-block: var(--space-32); border-top: var(--border-thin) solid var(--color-border); }
.vguide__sec:last-child { padding-bottom: 0; }
.vguide__h { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); margin-bottom: var(--space-24); }
.vguide__fine { margin-top: var(--space-20); color: var(--color-text-muted); }
.vguide__fine a { font-weight: 600; }
@media (min-width: 1024px) { .vguide__sec { padding-block: var(--space-48); } }

/* Pipeline: vertical with down arrows to 1023px (node as a row from 768), 3 x 2 from 1024, one row from 1280. */
.flow { display: grid; gap: var(--space-32); --flow-line: var(--color-primary); }
.flow__node { position: relative; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-16); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); }
.flow__node:last-child { border-color: var(--color-primary); background: var(--color-surface-blue); }
.flow__tech { color: var(--color-primary); }
.flow__name { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.flow__node p { color: var(--color-text-muted); }
/* Connector: a 1px line with a small arrow head, drawn in the gap after each node. */
.flow__node:not(:last-child)::after,
.flow__node:not(:last-child)::before { content: ""; position: absolute; left: var(--space-24); }
.flow__node:not(:last-child)::after { top: 100%; width: 1px; height: calc(var(--space-32) - 6px); background: var(--flow-line); }
.flow__node:not(:last-child)::before { top: calc(100% + var(--space-32) - 7px); margin-left: -5px; border: 5px solid transparent; border-top: 6px solid var(--flow-line); border-bottom: 0; }
@media (min-width: 768px) {
	.flow__node { grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: var(--space-4) var(--space-24); align-items: baseline; }
	.flow__tech { grid-column: 1; grid-row: 2; }
	.flow__name { grid-column: 1; grid-row: 1; }
	.flow__node p { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
	.flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24) var(--space-32); }
	.flow__node { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.flow__tech, .flow__name, .flow__node p { grid-column: auto; grid-row: auto; }
	.flow__tech { order: -1; }
	/* Arrows go right inside a row; none after the last node of a row. */
	.flow__node:not(:last-child)::after { top: var(--space-24); left: 100%; width: calc(var(--space-32) - 6px); height: 1px; }
	.flow__node:not(:last-child)::before { top: calc(var(--space-24) - 5px); left: calc(100% + var(--space-32) - 7px); margin-left: 0; border: 5px solid transparent; border-left: 6px solid var(--flow-line); border-right: 0; }
	.flow__node:nth-child(3n)::after, .flow__node:nth-child(3n)::before { display: none; }
}
@media (min-width: 1280px) {
	.flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.flow__node:nth-child(3n)::after, .flow__node:nth-child(3n)::before { display: block; }
	.flow__node:last-child::after, .flow__node:last-child::before { display: none; }
}

/* Results reference: the two-table pattern above (.tbl-h / .tbl-b). Phones: two columns, "What to do" sits under the meaning. */
.c-rr { width: 40%; } .c-rm { width: 60%; } .c-rd { width: 0; }
.rref .tbl-b th, .rref .tbl-b td { padding: var(--space-12); vertical-align: top; text-align: left; font-weight: 400; border-bottom: var(--border-thin) solid var(--color-border); }
.rref .tbl-b tr:last-child th { border-bottom: 0; }
.rref .tbl-h th { padding-inline: var(--space-12); }
.rref__badges { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.rref .badge { white-space: normal; }
.rref__do-m { display: block; margin-top: var(--space-8); }
@media (min-width: 768px) {
	.c-rr { width: 26%; } .c-rm { width: 40%; } .c-rd { width: 34%; }
	.rref .tbl-b th, .rref .tbl-b td, .rref .tbl-h th { padding-inline: var(--space-16); }
	.rref .tbl-b td:last-child { color: var(--color-text); }
	.rref__do-m { display: none; }
	.rref__badges { flex-direction: row; flex-wrap: wrap; }
	.rref .badge { white-space: nowrap; }
}

/* Questions: all answers visible, two columns from 768. */
.qa { display: grid; gap: 0 var(--space-48); }
.qa__item { padding-block: var(--space-20); border-top: var(--border-thin) solid var(--color-border); }
.qa dt { font-weight: 600; font-size: var(--font-size-lead-390); line-height: var(--line-height-label); }
.qa dd { margin-top: var(--space-8); color: var(--color-text-muted); max-width: 64ch; }
@media (min-width: 768px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Sign-up prompt ("gate") and quota line (2026-11-09) ----------
   Shown when a guest (or an unconfirmed account) tries a check. Same calm look as the notices: info background,
   1px cobalt rule, two buttons on one line when there is room. Nothing moves on hover. */
.gate { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-16); padding: var(--space-16); background: var(--color-info-bg); border: var(--border-thin) solid var(--color-primary); border-radius: var(--radius-control); }
.gate[hidden] { display: none; }
.gate > .icon { flex: none; margin-top: 2px; color: var(--color-primary); }
.gate > div { display: grid; gap: var(--space-8); min-width: 0; }
.gate__title { font-weight: 700; }
.gate__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-4); }
.gate:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); }
.page-head .gate { max-width: 72ch; margin-top: var(--space-24); }
.quota-line { margin-top: var(--space-16); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.b-msg { max-width: none; margin: 0 0 var(--space-16); }
.b-msg__act:has(> [hidden]) { display: none; }
#c-stop { margin-top: var(--space-12); }