/*
 * Public-site component styles — header/nav, buttons, cards, outage rows,
 * chips/tabs, map overlay, footer, subscribe modal. Design tokens and the
 * box-sizing/margin reset live in base.css (shared with admin-layout.php);
 * everything genuinely specific to the public site's look lives here.
 * Split out of layout.php's inline <style> block so it's cached by the
 * browser across page loads instead of re-downloaded/re-parsed on every
 * request.
 */

body {
    font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }

.shell {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(14px, 4vw, 32px);
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    /* padding-top/-bottom only — same reasoning as .footer-inner below:
       the shorthand would zero .shell's horizontal padding. */
    padding-top: 9px;
    padding-bottom: 9px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: 4px; }

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(150deg, #2E5BFF, #5b86ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(46, 91, 255, .28);
    flex-shrink: 0;
}

.brand-mark span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .35);
}

.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.2px; line-height: 1.1; }
.brand-sub { font-size: 11px; color: var(--muted-2); font-weight: 600; }

.city-switch { position: relative; }

.city-switch summary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f2f6;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 8px 11px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.city-switch summary::-webkit-details-marker { display: none; }
.city-switch summary:hover { background: #e7eaf0; }

.city-switch summary .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.city-switch summary .arrow { color: var(--muted-3); font-size: 11px; }

.city-switch-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 22, 28, .14);
    padding: 6px;
    min-width: 210px;
    z-index: 60;
    max-height: 320px;
    overflow: auto;
}

.city-switch-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.city-switch-menu a:hover { background: #f2f4f8; }
.city-switch-menu a.is-active { color: var(--accent); }

.mainnav { display: flex; gap: 3px; flex-wrap: wrap; margin-left: auto; align-items: center; }

.mainnav a {
    padding: 8px 11px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14.5px;
    color: #3a4150;
}

.mainnav a:hover, .mainnav a.is-active { background: #f0f2f6; color: var(--text); }

/* Desktop-only "Ещё" dropdown (Карта/История/Аналитика/Блог/
   О сервисе). .nav-burger below (mobile hamburger, unchanged)
   duplicates all five links for narrow screens — kept exactly as
   it was, per explicit "mobile is already 100% right" feedback. */
.nav-more { position: relative; }

.nav-more-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 11px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14.5px;
    color: #3a4150;
    background: none;
    border: none;
}

.nav-more-trigger .arrow { font-size: 10px; color: var(--muted-3); }
.nav-more-trigger:hover { background: #f0f2f6; color: var(--text); }

.nav-more-menu {
    display: flex;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 22, 28, .14);
    padding: 6px;
    min-width: 190px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    /* visibility flips (and hit-testing/interactivity with it) only after
       the opacity fade finishes — gives the pointer ~100ms to reach the
       menu after leaving the trigger, instead of closing the instant
       :hover is lost, which was too fast to click a link inside it. */
    transition: opacity .1s linear, visibility 0s linear .1s;
}

.nav-more-menu a { padding: 9px 11px; border-radius: 8px; font-weight: 600; font-size: 14px; color: #3a4150; }
.nav-more-menu a:hover, .nav-more-menu a.is-active { background: #f2f4f8; color: var(--accent); }

/* Hover-driven, same as the user asked for ("при наведении") — not a
   <details>, deliberately: a closed <details>'s content is hidden by
   the browser's own UA stylesheet at a specificity a plain class
   selector can't reliably override (see [[nav_details_visibility_bug]]),
   and that mechanism doesn't fit a hover-triggered menu anyway.
   :focus-within is a minimal keyboard fallback (tab into the menu
   keeps it open) — no JS needed either way. */
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.nav-burger { display: none; position: relative; }

.nav-burger summary {
    display: none;
    list-style: none;
    cursor: pointer;
}

.nav-burger summary::-webkit-details-marker { display: none; }

.nav-burger-panel { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }

.nav-burger-panel a {
    padding: 8px 11px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14.5px;
    color: #3a4150;
}

.nav-burger-panel a:hover, .nav-burger-panel a.is-active { background: #f0f2f6; color: var(--text); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 11px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
}

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(46, 91, 255, .3); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: #f0f2f6; border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: #e7eaf0; }
.btn-light { background: #fff; color: var(--accent-dark); }
.btn-light:hover { background: #eef2ff; }
.btn-block { width: 100%; padding: 15px; font-size: 16px; }

/* generic content blocks */
.page-section { max-width: 1140px; margin: 0 auto; padding: clamp(30px, 5vw, 54px) clamp(14px, 4vw, 32px); }
.page-section.tight-top { padding-top: 0; }
.page-section.bordered { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.breadcrumbs { font-size: 13.5px; color: var(--muted-3); font-weight: 600; margin-bottom: 18px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 7px; }
.breadcrumbs .current { color: var(--muted); }

h1 { font-weight: 800; letter-spacing: -.8px; margin: 0 0 14px; line-height: 1.08; }
h2 { font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; }
.section-title { font-size: clamp(20px, 3vw, 26px); }
.section-sub { color: var(--muted-2); font-size: 15px; margin: 0 0 18px; }
.lede { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.55; color: var(--muted); max-width: 660px; }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Resource "по видам" tiles only (city.php/home.php) — 5 cards since hot
   water joined the primary resources; .cols-4's 210px floor needs >=1106px
   to fit 5 across but .page-section tops out at ~1076px, so the 5th always
   wrapped alone even on wide desktop. Kept as its own modifier rather than
   widening .cols-4, which two unrelated 4-card stat grids also use. */
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.card-link { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.card-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 22, 28, .1); }

.icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.icon-tile span { width: 16px; height: 16px; border-radius: 5px; }

.card-resource {
    overflow: hidden;
    background-repeat: no-repeat, no-repeat;
    background-position: center, bottom right;
    background-size: cover, 150px auto;
}

.outage-row {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px 17px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

.outage-row:hover { box-shadow: 0 8px 20px rgba(20, 22, 28, .08); border-color: var(--border-strong); }
.outage-row.outage-row-multiday { border-left: 3px solid #f2a20c; }

/* /test/{city}/ draft only (UX audit 2026-07, П1 items 1-4) — one-line
   variant for the "Долгосрочные плановые" feed group, and the grouped-feed
   section headings/raw-source spoiler that go with it. */
.outage-row.outage-row-dense { padding: 10px 14px; gap: 10px; }
.outage-row.outage-row-dense .outage-title { font-size: 14px; }

.test-feed-group { margin-bottom: 28px; }
.test-feed-group-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

.test-raw-source {
    background: #f7f8fa;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
}

.test-raw-source summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); list-style: none; }
.test-raw-source summary::-webkit-details-marker { display: none; }
.test-raw-source summary::before { content: '▸ '; }
.test-raw-source[open] summary::before { content: '▾ '; }
.test-raw-source-body { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.test-raw-source-body p { margin: 0 0 10px; }
.test-raw-source-body p:last-child { margin-bottom: 0; }

/* /test/{city}/ bottom-sheet popup (UX audit 2026-07), reproducing
   .makets/historical/Список отключений.dc.html's shared modal — a distinct
   bottom-anchored sheet, deliberately not the live site's centered
   .modal-overlay/.modal-card. JS-toggled via .is-open (fetch-driven, not
   :target), so display:none -> flex is what (re)starts the child animations
   below on every open. */
@keyframes test-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes test-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.test-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.test-sheet-overlay.is-open { display: flex; }

.test-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 30, .5);
    backdrop-filter: blur(3px);
    animation: test-sheet-fade .15s ease;
}

.test-sheet-card {
    position: relative;
    z-index: 1;
    background: #fff;
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding: 20px 20px 26px;
    animation: test-sheet-up .22s cubic-bezier(.2, .7, .3, 1);
}

.test-sheet-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f3f5;
    color: var(--muted-2);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-sheet-close:hover { background: #e7eaf0; }

.test-sheet-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 44px 16px 0; }

.test-sheet-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.test-sheet-title { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.test-sheet-subtitle { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

.test-sheet-meta { font-size: 14px; color: var(--muted); margin: 0 0 16px; }

.test-sheet-body { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }

.outage-icon { flex-shrink: 0; display: flex; }
.outage-main { flex: 1; min-width: 180px; }
.outage-title { font-weight: 700; font-size: 15.5px; }
.outage-reason { font-size: 13.5px; color: var(--muted-2); font-weight: 500; }
.outage-period { font-size: 13.5px; color: var(--muted); font-weight: 600; min-width: 120px; text-align: right; }

.chip-group { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 120px; }

.chip {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 100px;
    white-space: nowrap;
}

.chip-date { background: #eef0f3; color: #565d6b; }
.chip-time { background: #eaf0ff; color: #2E5BFF; }
.chip-muted { background: #eef0f3; color: #9aa0ac; }

.detail-modal-section { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.detail-modal-section:last-child { margin-bottom: 0; }
.detail-modal-label { font-weight: 700; color: var(--text); }

.provider-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f7f8fa; border-radius: 12px; }
.provider-box .provider-name-line { flex: 1; font-size: 12px; color: var(--muted-2); }
.provider-box .provider-name { font-weight: 650; font-size: 14px; color: var(--text); }
.provider-box .provider-phone { font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--accent); }
.provider-box .provider-phone:hover { color: var(--accent-dark); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12.5px;
    padding: 5px 11px;
    border-radius: 100px;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 9px; }

.pill {
    background: #f5f6f8;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 9px 15px;
    font-weight: 600;
    font-size: 14px;
    color: #3a4150;
}

a.pill:hover { border-color: var(--accent); color: var(--accent); background: #f7f9ff; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.table th { color: var(--muted-2); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

.bar-track { height: 9px; background: #f0f2f6; border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #2E5BFF, #5b86ff); border-radius: 100px; }

.search-panel {
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: clamp(14px, 2.5vw, 18px);
    box-shadow: 0 10px 28px rgba(20, 22, 28, .07);
    max-width: 720px;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.search-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted-2); margin-bottom: 5px; }

.search-field input, .search-field .static-value {
    width: 100%;
    background: #f5f6f8;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14.5px;
    font-family: inherit;
    font-weight: 600;
    color: var(--text);
}

.search-field input:focus { border-color: var(--accent); background: #fff; outline: none; }
.search-note { text-align: center; font-size: 13px; color: var(--muted-3); margin-top: 11px; }

/* Header's .city-switch reused verbatim inside a search field — just stretched
   to fill the grid column like the other fields, instead of the header's
   compact auto-width chip. */
.search-field .city-switch { width: 100%; }
.search-field .city-switch summary { width: 100%; justify-content: space-between; box-sizing: border-box; }

/* Portal search (test-index.php) — street field flexes, house field stays
   narrow rather than claiming an equal 1fr share like .search-grid's
   default auto-fit columns would otherwise give it. */
#portal-search-grid { grid-template-columns: minmax(160px, 2fr) minmax(90px, 1fr) auto auto; }
#portal-search-grid .search-field-street { min-width: 0; }

/* /portal draft only — mock address-suggestion dropdown, same visual
   language as .city-switch-menu (floating white card, shadow, hover row). */
.portal-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 22, 28, .14);
    padding: 6px;
    z-index: 20;
}

.portal-suggest-item { padding: 10px 12px; border-radius: 8px; font-size: 14.5px; cursor: pointer; }
.portal-suggest-item:hover { background: #f2f4f8; }

/* /portal draft only — properties the 680px media query below needs to
   override. Kept out of the inline style="" in portal.php on purpose: an
   inline declaration always wins over an external stylesheet rule
   regardless of specificity, so anything a media query needs to change
   has to start out as a plain CSS rule, not inline. */
#portal-search-grid { grid-template-columns: 1fr auto auto; }
#portal-cities-header { align-items: baseline; }
#portal-city-filter { width: 220px; margin-left: auto; }
.portal-step-num { margin-bottom: 14px; }

/* /portal draft only — bottom subscribe CTA, built to match the mockup's
   dark 2-column card rather than the site's usual blue .cta-panel. Dark
   tone reuses --text (already the site's near-black) instead of a new hex.
   Grid-area layout (not just 2 flex columns) so the mobile breakpoint can
   reorder intro/buttons/steps/note into the mockup's mobile sequence
   without duplicating markup. */
.portal-cta {
    background: var(--text);
    border-radius: 16px;
    padding: clamp(26px, 4vw, 44px);
    color: #e8edf3;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
        "intro   buttons"
        "steps   buttons"
        ".       note";
    column-gap: 36px;
    row-gap: 10px;
}

.portal-cta-intro { grid-area: intro; }
.portal-cta-buttons-wrap { grid-area: buttons; align-self: center; }
.portal-cta-steps { grid-area: steps; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #8fa1b3; align-self: start; }
.portal-cta-note { grid-area: note; font-size: 12px; color: #8fa1b3; }
.portal-cta-note a { color: #e8edf3; text-decoration: underline; }

.portal-cta h2 { font-size: clamp(21px, 3vw, 26px); margin: 0 0 10px; color: #fff; }
.portal-cta p { margin: 0; font-size: 15px; color: #b6c2cf; line-height: 1.5; }
.portal-cta-steps b { color: #e8edf3; }

.portal-cta-buttons { display: grid; gap: 12px; }

.portal-cta-btn {
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-cta-btn:hover { background: #e8edf3; color: var(--text); }
.portal-cta-icon { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.portal-cta-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* /portal draft only — mobile fixes (2026-07-27): the "Проверить" button
   collapsing onto its own row is intentional here (matches the mockup's
   mobile layout exactly), just done in a controlled way instead of letting
   the desktop 3-column grid overflow/wrap unpredictably. Stats go 2-up.
   The city filter input and "3 steps" cards match the mockup's mobile
   arrangement (full-width input on its own row; number+text side by side).
   The CTA reorders to intro -> buttons -> steps -> note via grid-area. */
@media (max-width: 680px) {
    #portal-search-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "field geo"
            "house house"
            "submit submit";
    }
    #portal-search-grid .search-field-street { grid-area: field; }
    #portal-search-grid .search-field-house { grid-area: house; }
    #portal-search-grid .portal-search-geo { grid-area: geo; }
    #portal-search-grid #portal-search-submit { grid-area: submit; width: 100%; }
    #portal-search .search-note { font-size: 11.5px; }

    /* Fit every resource on one line rather than wrapping — shrink gap/type
       a bit first, then allow horizontal scroll on just this row (not the
       page) as a fallback if it still doesn't quite fit. */
    #portal-resource-breakdown { flex-wrap: nowrap; overflow-x: auto; gap: 10px; font-size: 12.5px; max-width: 100%; }
    .portal-resource-chip { flex-shrink: 0; }

    #portal-stats-grid { grid-template-columns: 1fr 1fr; }

    #portal-cities-header { flex-direction: column; align-items: stretch; }
    #portal-city-filter { width: 100%; margin-left: 0; }

    .portal-step-card { display: flex; gap: 14px; align-items: flex-start; }
    .portal-step-card .portal-step-num { margin-bottom: 0; flex-shrink: 0; }

    .portal-cta {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "buttons"
            "steps"
            "note";
    }
    .portal-cta-steps { flex-direction: column; gap: 4px; }
}

.address-pending {
    background: #eef3ff;
    border: 1px solid #d6e2ff;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14.5px;
    color: #14213f;
}

/* street page — resource/status filter bar + "active now" block +
   month-divider history feed (see StreetPageQuery/PageController) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }

.resource-tabs { display: flex; flex-wrap: wrap; gap: 2px; background: #eef0f3; border: 1px solid var(--border); border-radius: 11px; padding: 4px; }

.resource-tab {
    border: none;
    background: transparent;
    font-weight: 650;
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 8px;
    color: #7a808a;
}

.resource-tab.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.resource-tab.is-disabled { color: var(--muted-3); cursor: default; }
.resource-tab .tab-count { margin-left: 4px; font-size: 11px; font-weight: 700; opacity: .55; }

.status-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.status-chip {
    border: 1px solid var(--border-strong);
    background: #fff;
    color: #5a6069;
    font-weight: 600;
    font-size: 12.5px;
    padding: 7px 13px;
    border-radius: 20px;
}

.status-chip.is-active { background: #16181d; color: #fff; border-color: #16181d; }

.active-block {
    background: linear-gradient(90deg, #fdecec, #fff6f6);
    border: 1px solid #f4d4d4;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.active-block-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c93b3f; margin-bottom: 10px; }

.history-divider { font-size: 12px; font-weight: 700; color: var(--muted-2); letter-spacing: .03em; text-transform: uppercase; padding: 2px; }

/* City-page mini-map panel (resources/views/partials/mini-map.php, shared by
   the live city page and its /test/ sibling) — was inline-styled with a
   fixed flex-basis and no mobile override at all, so it never shrank on
   narrow viewports. */
.mini-map-panel { flex: 0 0 360px; min-width: 260px; position: relative; align-self: stretch; }

@media (max-width: 680px) {
    .mini-map-panel { flex: 1 1 100%; min-width: 0; }
}

/* Outage map — floating legend + count badge over the Yandex Maps
   canvas (see resources/views/pages/map.php). Layer/period/resource
   controls above the map reuse .resource-tabs/.resource-tab as-is. */
.map-legend {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px -14px rgba(20, 24, 30, .4);
    max-width: 230px;
    z-index: 10;
}

.map-legend-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 8px; }
.map-legend-items { display: flex; flex-direction: column; gap: 7px; }

.map-count-badge {
    position: absolute;
    right: 14px;
    top: 14px;
    background: rgba(20, 24, 30, .86);
    color: #fff;
    font-size: 12.5px;
    font-weight: 650;
    padding: 7px 13px;
    border-radius: 20px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
    z-index: 10;
}

.cta-panel {
    background: linear-gradient(140deg, #1E3FB8, #2E5BFF 60%, #5b86ff);
    border-radius: 22px;
    padding: clamp(26px, 4vw, 44px);
    color: #fff;
    text-align: center;
}

.cta-panel.left { text-align: left; }
.cta-panel h2 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.6px; }
.cta-panel p { font-size: clamp(15px, 2vw, 17.5px); line-height: 1.55; color: rgba(255, 255, 255, .88); margin: 0 auto 22px; max-width: 520px; }
.cta-panel.left p { margin: 0 0 24px; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cta-note { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .72); margin-top: 16px; line-height: 1.5; }
.cta-note a { color: #fff; text-decoration: underline; }
.cta-panel.left .cta-buttons { justify-content: flex-start; }

footer.site-footer { background: #14161c; color: #c4c9d2; margin-top: 40px; }
/* padding-top/-bottom only (not the shorthand) — the shorthand would zero
   out left/right and silently override .shell's horizontal padding, since
   this rule comes later in the cascade at equal specificity. That's what
   was pinning footer text to the viewport edge on mobile (2026-07-28). */
.footer-inner { padding-top: clamp(34px, 5vw, 56px); padding-bottom: clamp(24px, 4vw, 36px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(24px, 4vw, 44px); margin-bottom: 36px; }
.footer-col-title { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 14px; }
.footer-links { display: grid; gap: 9px; font-size: 13.5px; }
.footer-links a { color: #c4c9d2; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #262a33; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #6e747f; }
.footer-legal-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal-links a { color: #9aa0ab; }
.footer-legal-links a:hover { color: #fff; }

.muted { color: var(--muted); }
.stack > * + * { margin-top: 16px; }

/* subscribe modal — CSS-only, driven by :target, works without JS */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
}

.modal-overlay:target { opacity: 1; visibility: visible; pointer-events: auto; }

/* A separate full-bleed link behind the card (not a card ancestor) —
   clicking it closes the modal, clicking the card itself never
   reaches it since the card paints on top. No JS needed. */
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 20, .55);
    backdrop-filter: blur(4px);
    z-index: 1;
}

/* Outer shell clips to the rounded corners and never scrolls itself —
   .modal-card-body is the only scrolling element, so its scrollbar
   renders inset within the rounded shell instead of poking outside
   it, and .modal-close (a sibling, not part of the scroll area)
   stays pinned to the card's own corner regardless of scroll. */
.modal-card {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 22px;
    max-width: 440px;
    width: 100%;
    max-height: calc(100vh - 32px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-right: 6px;
}

.modal-card-body {
    overflow-y: auto;
    padding: clamp(22px, 4vw, 30px);
    padding-right: calc(clamp(22px, 4vw, 30px) - 6px);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 17px;
    color: var(--muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(20, 22, 28, .15);
}

.modal-close:hover { background: #e7eaf0; }

.modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(150deg, #2E5BFF, #5b86ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.modal-icon span { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }

.modal-card h2 { font-size: 24px; margin: 0 0 8px; }
.modal-card .lede { max-width: none; margin: 0 0 20px; }

.subscribe-options { display: grid; gap: 11px; }

.subscribe-option { display: flex; align-items: center; gap: 13px; border-radius: 13px; padding: 15px 18px; }
.subscribe-option.max { background: var(--accent); color: #fff; }
.subscribe-option.max:hover { background: var(--accent-dark); color: #fff; }
.subscribe-option.telegram { background: #fff; border: 1.5px solid var(--border-strong); color: var(--text); }
.subscribe-option.telegram:hover { border-color: #229ED9; background: #f5fbfe; }

.subscribe-option-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
    overflow: hidden;
}

.subscribe-option-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.subscribe-option-body { flex: 1; }
.subscribe-option-title { font-weight: 800; font-size: 16px; display: block; }
.subscribe-option-sub { font-size: 12.5px; }
.subscribe-option.max .subscribe-option-sub { color: rgba(255, 255, 255, .8); }
.subscribe-option.telegram .subscribe-option-sub { color: var(--muted-2); }

.subscribe-note { text-align: center; font-size: 12.5px; color: var(--muted-3); margin-top: 16px; line-height: 1.5; }
.subscribe-note a { color: var(--accent); text-decoration: underline; }

/* /portal draft only — .site-header is position:sticky, so jumping to an
   in-page anchor (header/burger "Подписаться" -> #subscribe, "Как это
   работает" -> #how) would otherwise land the target heading right under
   the fixed header. scroll-margin-top reserves that space up front. */
#how, #cities, #subscribe { scroll-margin-top: 84px; }

@media (max-width: 900px) {
    .site-header-inner { padding-top: 12px; padding-bottom: 12px; }
    .grid.cols-2 { grid-template-columns: 1fr; }

    /* Subscribing is still reachable from every page's own CTA
       section and the footer — the header button just isn't worth
       the space it takes up alongside the burger on narrow screens. */
    .header-subscribe-btn { display: none; }

    /* Portal's mockup keeps "Подписаться" in the header even on mobile (it
       just jumps to the on-page #subscribe CTA), and collapses ALL nav
       items — including "Города" — behind the burger, not just the
       secondary ones header.php hides. */
    .portal-header .mainnav { display: none; }
    /* margin-left:auto pushes this button (and the burger right after it,
       following normally in flow) to the right edge as a group, now that
       .mainnav — which normally carries that auto margin — is hidden. */
    .portal-header .header-subscribe-btn { display: inline-flex; margin-left: auto; }

    .nav-more { display: none; }
    .nav-burger { display: block; }

    /* 5 resources don't fit .mainnav on one mobile row anymore (was 4) —
       drop the last one (Газ); same breakpoint the burger above appears
       on, which carries a duplicate link for it (see nav-burger-panel in
       header.php), so it's never missing from both places at once. */
    .mainnav a[data-resource="gas"] { display: none; }

    /* Desktop's margin-left:auto pushes .mainnav flush right against
       .nav-more/the subscribe button — with those gone on mobile it just
       pushed .mainnav (and its content) straight off the right edge of the
       viewport instead, with .nav-burger never getting any room at all.
       Left-aligned, .mainnav starts right where .nav-burger can follow it
       on the same row (confirmed live: fits from ~390px up already this
       way alone). Slightly tighter link padding/font closes the remaining
       gap at the narrowest common phone widths (360-375px), where burger
       was still getting clipped at the right edge. */
    .mainnav { margin-left: 0; }
    .mainnav a { padding: 7px 8px; font-size: 13.5px; }

    /* The floating legend eats too much of an already-small mobile
       map canvas — hidden there, the layer/period/resource controls
       above the map are still fully available. */
    .map-legend { display: none; }

    .nav-burger summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #f0f2f6;
        border: 1px solid var(--border-strong);
        font-size: 18px;
        color: var(--text);
    }

    .nav-burger summary:hover { background: #e7eaf0; }

    .nav-burger-panel {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(20, 22, 28, .14);
        padding: 6px;
        min-width: 200px;
        z-index: 60;
    }

    .nav-burger[open] .nav-burger-panel { display: flex; }
    .nav-burger-panel a { padding: 9px 11px; border-radius: 8px; }
}

/* Portal header on very narrow screens: brand + "Подписаться" + burger no
   longer all fit on one row. Drop the subscribe button rather than let the
   burger wrap to a second line — it's still reachable from the on-page CTA
   and the burger panel doesn't lose anything (this button was always just a
   shortcut to #subscribe, not a distinct destination). */
@media (max-width: 420px) {
    .portal-header .header-subscribe-btn { display: none; }
    /* With the subscribe button gone, the burger is the last visible item
       and needs its own auto margin to stay pinned right — declaring this
       alongside a still-visible .header-subscribe-btn's margin-left:auto
       (as in the 900px block above) would instead split the free space
       between both, pushing them apart instead of keeping them flush. */
    .portal-header .nav-burger { margin-left: auto; }
}

/* /terms/, /privacy/ — long numbered legal documents (terms.php/privacy.php).
   Adapted from the source .html drafts' own typographic system, but on this
   site's tokens (--accent/--text/--muted-3/--border) instead of a separate
   palette, and scoped under .legal-doc so it can't leak into any other
   page's h2/table/ul styling. */
.legal-doc-meta { color: var(--muted-3); font-size: 13.5px; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.legal-doc { max-width: 720px; }
.legal-doc h2 { font-size: 17px; font-weight: 700; margin: 2.2rem 0 .75rem; line-height: 1.35; }
.legal-doc h2 .num { color: var(--muted-3); font-weight: 400; margin-right: .5rem; }
.legal-doc h3 { font-size: 15px; font-weight: 700; margin: 1.6rem 0 .5rem; }
.legal-doc p { margin: 0 0 1rem; font-size: 15px; line-height: 1.65; }
.legal-doc ul, .legal-doc ol { margin: 0 0 1rem; padding-left: 1.3rem; font-size: 15px; line-height: 1.65; }
.legal-doc li { margin-bottom: .4rem; }
.legal-doc a { color: var(--accent); }
.legal-doc .callout { border-left: 3px solid var(--accent); background: #f4f8fb; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.legal-doc .callout p:last-child { margin-bottom: 0; }
.legal-doc-req { border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.5rem; margin: 1.25rem 0; }
.legal-doc-req dl { margin: 0; display: grid; grid-template-columns: 12rem 1fr; gap: .4rem 1rem; }
.legal-doc-req dt { color: var(--muted-3); font-size: 14px; }
.legal-doc-req dd { margin: 0; font-size: 14.5px; }
.legal-doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 14.5px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
.legal-doc th { font-weight: 700; background: #f6f8fa; }

@media (max-width: 560px) {
    .legal-doc-req dl { grid-template-columns: 1fr; gap: .15rem; }
    .legal-doc-req dt { font-size: 12.5px; }
    .legal-doc-req dd { margin-bottom: .6rem; }
    .legal-doc table, .legal-doc thead, .legal-doc tbody, .legal-doc tr, .legal-doc th, .legal-doc td { display: block; }
    .legal-doc th { display: none; }
    .legal-doc td { border: none; padding: .15rem 0; }
    .legal-doc tr { border-bottom: 1px solid var(--border); padding: .75rem 0; display: block; }
    .legal-doc td:first-child { font-weight: 700; }
}