/*
 * «Чей номер»: theme on top of engine.css (tokens + site components only).
 * Accent: the site keeps its green. #0a7d55 on white = 5.2:1 and white on #0a7d55 = 5.2:1 (AA for text and
 * buttons); links use the darker #086647 (7.0:1). Dark scheme: #4cc597 on #161d23 = 7.9:1.
 */
:root {
    --c-accent: #0a7d55;
    --c-link: #086647;
    --c-focus: #0a7d55;
    --c-accent-soft: #e5f3ec;
    --c-danger: #b42318;        /* form errors: 6.5:1 on white */
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-accent: #4cc597;
        --c-link: #6fd3ab;
        --c-focus: #6fd3ab;
        --c-accent-soft: #15302a;
        --c-on-accent: #04251a;
        --c-danger: #ff9b8f;
    }
}

/* ---------- Search form (home hero, invalid number, 404) ---------- */
.search-form { width: 100%; }
.search-form label { display: block; margin-bottom: var(--s-2); font-weight: 600; font-size: var(--fs-sm); }
.search-form__row { display: flex; gap: var(--s-2); }
.search-form input {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.search-form button { padding: 12px 20px; font-size: 1.0625rem; }
.card > .search-form { margin-top: var(--s-4); }

/* ---------- Home hero ---------- */
.hero {
    margin: 0 0 var(--s-6);
    padding: var(--s-6) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    text-align: center;
}
.hero h1 { margin: 0 0 var(--s-3); }
.hero .lead { margin: 0 auto var(--s-5); font-size: var(--fs-base); }
.hero .search-form { max-width: 560px; margin: 0 auto; text-align: left; }
.hero__note { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- Number page: result card ---------- */
.result__title { margin: 0 0 var(--s-4); }
.result__lead { display: block; margin-bottom: var(--s-1); font-size: var(--fs-lg); font-weight: 400; color: var(--c-muted); }
.result__number {
    display: block;
    font-family: var(--font);
    font-size: clamp(1.5rem, 7.5vw + .25rem, var(--fs-display)); /* fits one line down to 320px */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.result .kv { margin-top: var(--s-2); }

/* ---------- Reviews ---------- */
.reviews { margin-top: var(--s-6); }
.reviews h2 .badge { font-family: var(--font); font-size: var(--fs-sm); }
.reviews__empty { padding: var(--s-5) var(--s-4); border: 1px dashed var(--c-border-strong); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }

.review-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.review-list > li { min-width: 0; }
.review-list > li.ad { margin: 0; }
.review { padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--c-muted); }
.review__number { display: inline-block; min-height: 44px; padding-block: 11px; margin-block: -11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.review__date { margin-left: auto; font-variant-numeric: tabular-nums; }
.review__text { margin: 0 0 var(--s-2); white-space: pre-line; overflow-wrap: anywhere; }
.review__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-muted); }
.review__complain { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-muted); }
.review__complain:hover { color: var(--c-link); }

/* Category colours: decorative only (labels carry the meaning); ≥ 3:1 against the surface. */
.cat--fraud { --cat: #c0392b; }
.cat--collectors { --cat: #8e44ad; }
.cat--ads { --cat: #b9770e; }
.cat--bank { --cat: #2471a3; }
.cat--delivery { --cat: #148f77; }
.cat--survey { --cat: #5d6d7e; }
.cat--robot { --cat: #717d7e; }
.cat--safe { --cat: #1e8449; }
.cat--other { --cat: #808b96; }
@media (prefers-color-scheme: dark) {
    .cat--fraud { --cat: #f1948a; }
    .cat--collectors { --cat: #c39bd3; }
    .cat--ads { --cat: #f0b27a; }
    .cat--bank { --cat: #7fb3d5; }
    .cat--delivery { --cat: #76d7c4; }
    .cat--survey { --cat: #aab7c4; }
    .cat--robot { --cat: #a6acaf; }
    .cat--safe { --cat: #82e0aa; }
    .cat--other { --cat: #bfc9ca; }
}
.review__cat::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; border-radius: 50%; background: var(--cat, var(--c-muted)); vertical-align: .05em; }

/* Breakdown by category: label | bar | count. */
.categories { padding: var(--s-4); }
.categories__title { margin: 0 0 var(--s-3); font-size: var(--fs-base); }
.categories__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.categories__item { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.categories__label { overflow-wrap: anywhere; }
.categories__bar { height: 10px; border-radius: 999px; background: var(--c-surface-alt); overflow: hidden; }
.categories__bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--cat, var(--c-accent)); }
.categories__count { min-width: 2ch; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Section header link («Все отзывы»). */
.section-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); }

/* ---------- Public forms (review, complaint) ---------- */
.review-form { margin-top: var(--s-5); scroll-margin-top: var(--s-4); }
.review-form h2, .complaint > h2, .complaint > h3 { margin-top: 0; }
.review-form__rules { font-size: var(--fs-sm); color: var(--c-muted); }
.form .field input:not([type="checkbox"], [type="radio"]), .form .field select, .form .field textarea { width: 100%; max-width: 100%; font-size: 1rem; }
.form fieldset { min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; }
.form legend { padding: 0; margin-bottom: var(--s-2); }
.field__error { margin: var(--s-1) 0 0; color: var(--c-danger); font-size: var(--fs-sm); font-weight: 600; }
.complaint { scroll-margin-top: var(--s-4); }
.form-consent { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.text-page .complaint { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }

/* Call category as radio chips: natural width, wrapping; the whole chip is the tap target. */
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.form .choice-chip, .choice-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.choice-chip input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-accent); }
.choice-chip:hover { border-color: var(--c-accent); }
.choice-chip:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.choice-chip:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ---------- Catalog pages (code / operator / region) ---------- */
.summary .lead { margin-bottom: 0; font-size: var(--fs-base); }

@media (min-width: 640px) {
    .hero { padding: var(--s-7) var(--s-6); }
    .hero .lead { font-size: var(--fs-lg); }
}

@media (max-width: 479px) {
    .hero { padding: var(--s-5) var(--s-4); }
    .hero .search-form__row { flex-direction: column; }
}

@media (max-width: 359px) {
    .search-form__row { flex-wrap: wrap; }
    .search-form button { flex: 1 1 100%; }
}

/* Narrow screens: «1,0 млн» instead of «1,0 млн номеров» keeps name and count on one row; the section hint names the unit. */
@media (max-width: 479px) {
    .link-list .count .unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}