/* Health · duty doctors (huisartsenpost) and emergency rooms (SEH). One question per page — where to call
   tonight, from any address in the country — so the answer is set as the SOS page sets 112: the number large, in
   the site's mono, one tap to call. Red only where a call is; the rest is the site's own ink, grounds and accent.
   Mobile first: a phone is where this is used. Prefix hp-. */
:root { --hp-sos: #C8303F; --hp-sos-press: #A82533; --hp-sos-ink: #C8303F; --hp-band: #121211; }
/* #C8303F keeps white type at 5.3:1; red text on the dark ground takes the header's lighter red. */
:root.dark { --hp-sos-ink: #FF6B75; --hp-band: #1F1F23; }
.hp { --line: rgba(var(--ink), .1); padding-bottom: 8px; }
:where(.hp) :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.hp) ul { list-style: none; }
.hp-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* First screen: the question, the field, «Где я» */
.hp-hero { padding-top: 28px; padding-bottom: 8px; }
.hp-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.hp-kick a { color: var(--hp-sos-ink); }
.hp .hp-kick a:hover { color: var(--hp-sos-ink); text-decoration: underline; text-underline-offset: 3px; }
.hp-kick i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.hp-hero h1 { max-width: 15ch; margin-top: 14px; font-size: clamp(36px, 4.4vw + 18px, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.hp-lead { max-width: 60ch; margin-top: 16px !important; font-size: 18px; line-height: 1.5; color: var(--txt2); }
.hp-lead b { font-weight: 600; color: var(--txt); }
.hp-lead a { color: var(--hp-sos-ink); font-weight: 600; white-space: nowrap; }
.hp-find { display: grid; gap: 10px; max-width: 760px; margin-top: 26px; }
.hp-search { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px; border-radius: 32px; background: var(--s1); border: 1px solid rgba(var(--ink), .16); transition: border-color .15s, box-shadow .15s; }
.hp-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(var(--accr), .14); }
.hp-search .hp-ic { color: var(--mut); }
.hp-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: inherit; font-size: 18px; color: var(--txt); }
.hp-search input::placeholder { color: var(--mut); }
.hp-here { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 28px; background: var(--txt); color: var(--bg); font-size: 17px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.hp-here:hover { background: var(--acc); color: #FFFFFF; }
.hp-here:focus-visible, .hp-search input:focus-visible { outline: none; }
.hp-here:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--acc); }
.hp-here[aria-busy="true"] { opacity: .7; cursor: progress; }
.hp-status { max-width: 760px; margin-top: 12px !important; padding-left: 20px !important; font-size: 15px; line-height: 1.45; color: var(--txt2); }
.hp-status b { font-weight: 600; color: var(--txt); }
.hp-status[data-tone="warn"] { color: var(--hp-sos-ink); }
@media (min-width: 700px) {
  .hp-find { grid-template-columns: 1fr auto; align-items: center; }
  .hp-here { height: 64px; border-radius: 32px; padding: 0 28px; }
}

/* The list: provinces as chips, posts by province */
.hp-list { margin-top: 44px; }
.hp-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hp-list-head h2 { font-size: clamp(24px, 1.6vw + 16px, 36px); font-weight: 600; letter-spacing: -.025em; }
.hp-reset { font-size: 15px; color: var(--acc); }
.hp-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hp-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(var(--ink), .16); font-size: 15px; color: var(--txt2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.hp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.hp-chip small { font: 500 12px var(--mono); color: var(--mut); }
.hp-chip:hover { border-color: rgba(var(--ink), .45); color: var(--txt); }
.hp-chip:has(input:checked) { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.hp-chip:has(input:checked) small { color: inherit; opacity: .7; }
.hp-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--acc); }
.hp-chip[data-gally-none] { opacity: .45; }
.hp-grid { display: grid; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.hp-card h3 { padding-right: 40px !important; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.hp-card h3 a:hover { color: var(--acc); }
.hp-area { font-size: 15px; line-height: 1.45; color: var(--txt2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-nums { display: grid; gap: 12px; margin-top: 4px; }
.hp-num { display: flex; align-items: center; gap: 12px; }
.hp-num-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-num b { font: 500 26px/1.1 var(--mono); letter-spacing: -.03em; white-space: nowrap; color: var(--txt); }
.hp-num small { font-size: 14px; line-height: 1.35; color: var(--txt2); }
.hp-nums:has(.hp-num + .hp-num) .hp-num b { font-size: 22px; }
.hp-check { align-self: flex-start; font-size: 15px; line-height: 1.4; color: var(--acc); }
.hp .hp-check:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.hp-call-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hp-sos); color: #FFFFFF; transition: background .2s; }
.hp-num:hover .hp-call-ic { background: var(--hp-sos-press); }
.hp .hp-num:hover b { color: var(--txt); }
.hp-hours { font-size: 15px; line-height: 1.45; color: var(--txt2); }
.hp-caveat { padding: 10px 12px !important; border-radius: 12px; background: rgba(var(--accr), .08); font-size: 15px; line-height: 1.45; color: var(--txt2); }
.hp-more { margin-top: auto; padding-top: 6px; font-size: 15px; color: var(--acc); }
.hp-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-card .x-fav { position: absolute; top: 14px; right: 14px; }
/* One answer — the visitor's own post, by the field or by «Где я» — is set as the answer: the number large, a
   red «Позвонить» under it. */
.hp-grid:has(> .hp-card:only-of-type) { grid-template-columns: minmax(0, 760px); }
.hp-card:only-of-type { gap: 12px; padding: 26px 24px 24px; border-color: rgba(var(--ink), .2); }
.hp-card:only-of-type h3 { font-size: 24px; }
.hp-call-w { display: none; }
/* One number: the SOS answer — the number huge, a red «Позвонить» under it. Several (a post per part of the
   area): each one large enough to read across a room, with the part it is for under it. */
.hp-card:only-of-type .hp-nums:not(:has(.hp-num + .hp-num)) .hp-num { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
.hp-card:only-of-type .hp-nums:not(:has(.hp-num + .hp-num)) .hp-num b { font-size: clamp(40px, 7vw + 12px, 76px); letter-spacing: -.05em; }
.hp-card:only-of-type .hp-nums:not(:has(.hp-num + .hp-num)) .hp-call-ic { width: auto; height: 60px; border-radius: 30px; gap: 10px; display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: 600; }
.hp-card:only-of-type .hp-nums:not(:has(.hp-num + .hp-num)) .hp-call-w { display: inline; }
.hp-card:only-of-type .hp-nums:has(.hp-num + .hp-num) .hp-num b { font-size: clamp(28px, 2.4vw + 18px, 40px); }
/* Two posts named one municipality: the one that names the visitor's own town comes first, marked. */
.hp-card.is-yours { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.hp-yours { display: none; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.hp-card.is-yours .hp-yours { display: block; }
.hp-none { margin-top: 20px !important; font-size: 17px; line-height: 1.5; color: var(--txt2); }

/* How it works: the calm dark band, edge to edge, as on the SOS page */
.hp-band { margin-top: 64px; padding: 44px 0 48px; background: var(--hp-band); box-shadow: 0 0 0 100vmax var(--hp-band); clip-path: inset(0 -100vmax); color: #F2F0EB; }
.hp-band h2 { max-width: 20ch; font-size: clamp(26px, 2vw + 16px, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.hp-steps { display: grid; gap: 22px; margin-top: 28px; counter-reset: hp-step; }
.hp-steps li { position: relative; padding-left: 46px; counter-increment: hp-step; }
.hp-steps li::before { content: counter(hp-step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #F2F0EB; color: #121211; font: 500 14px var(--mono); }
.hp-steps b { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.hp-steps span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: rgba(242, 240, 235, .72); }
.hp-steps a { color: #FF8A92; font-weight: 600; }
@media (min-width: 900px) { .hp-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* Emergency rooms: a register, not cards — they are where a doctor sends you, not where you go yourself */
.hp-seh { margin-top: 56px; }
.hp-seh-head { display: grid; gap: 12px; max-width: 760px; }
.hp-seh-head h2 { font-size: clamp(26px, 2vw + 16px, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.hp-seh-head p { font-size: 17px; line-height: 1.5; color: var(--txt2); }
.hp-seh-head b { font-weight: 600; color: var(--txt); }
.hp-seh-head a { color: var(--hp-sos-ink); font-weight: 600; }
.hp-seh-list { margin-top: 18px; columns: 1; column-gap: 40px; }
@media (min-width: 900px) { .hp-seh-list { columns: 2; } }
@media (min-width: 1400px) { .hp-seh-list { columns: 3; } }
.hp-seh-prov { break-inside: avoid-column; padding-top: 18px; }
.hp-seh-prov h3 { padding-bottom: 8px !important; border-bottom: 1px solid var(--line); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.hp-seh-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.hp-seh-row b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.hp-seh-row small { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--mut); }
.hp-seh-row a { color: inherit; }
.hp-seh-row a:hover b { color: var(--acc); }
.hp-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 13px; font: 500 12px var(--mono); letter-spacing: .02em; white-space: nowrap; background: var(--txt); color: var(--bg); }
.hp-badge.is-part { background: none; border: 1px solid currentColor; color: var(--hp-sos-ink); }

.hp-trust { margin: 48px 0 36px !important; padding: 18px 0 0 !important; border-top: 1px solid var(--line); max-width: 860px; font-size: 14px; line-height: 1.55; color: var(--mut); }
.hp-trust a { color: var(--acc); text-decoration: underline; text-decoration-color: rgba(var(--accr), .35); text-underline-offset: 3px; }
.hp .hp-trust a:hover { color: var(--acc); text-decoration-color: var(--acc); }

.hp-prov { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }

/* A post's own page */
.hp-crumbs { padding-top: 22px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.hp-crumbs a { color: var(--txt2); }
.hp-crumbs a:first-child { color: var(--hp-sos-ink); }
.hp-crumbs span { margin: 0 6px; opacity: .5; }
.hp-e-hero { display: grid; gap: 28px; padding-top: 18px; }
.hp-e-hero h1 { margin-top: 10px; font-size: clamp(32px, 3.4vw + 16px, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.hp-answer { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 22px; border-radius: 26px; background: var(--s1); border: 1px solid rgba(var(--ink), .16); }
.hp-answer .hp-kick { color: var(--mut); }
.hp-answer-num { font: 500 clamp(40px, 6vw + 14px, 84px)/1 var(--mono); letter-spacing: -.05em; white-space: nowrap; }
.hp-call { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border-radius: 30px; background: var(--hp-sos); color: #FFFFFF; font-size: 19px; font-weight: 600; transition: background .2s; }
.hp a.hp-call:hover { color: #FFFFFF; background: var(--hp-sos-press); }
.hp-call:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }
.hp-answer .x-fav { position: absolute; top: 16px; right: 16px; }
@media (min-width: 1000px) {
  .hp-e-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: 56px; }
}
.hp-rule { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 18px 18px 19px; border-radius: 20px; background: rgba(var(--accr), .1); }
.hp-rule .hp-ic { margin-top: 2px; color: var(--acc); }
.hp-rule b { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.hp-rule span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--txt2); }
.hp-sec { margin-top: 48px; }
.hp-sec > h2 { font-size: clamp(24px, 1.6vw + 16px, 36px); font-weight: 600; letter-spacing: -.025em; }
.hp-sec > p { max-width: 65ch; margin-top: 10px !important; font-size: 17px; line-height: 1.55; color: var(--txt2); }
.hp-sec > p a { color: var(--hp-sos-ink); font-weight: 600; }
.hp-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 18px; }
.hp-post { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); transition: border-color .15s; }
.hp-post:hover { border-color: rgba(var(--ink), .4); }
.hp .hp-post:hover { color: var(--txt); }
.hp-post b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.hp-post span { font-size: 15px; line-height: 1.45; color: var(--txt2); }
.hp-post em { margin-top: 4px; font-style: normal; font-size: 14px; color: var(--acc); }
.hp-places { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--txt2); }
.hp-more-places { margin-top: 14px; }
.hp-more-places summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--acc); cursor: pointer; list-style: none; }
.hp-more-places summary::-webkit-details-marker { display: none; }
.hp-more-places summary::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.hp-more-places[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.hp-more-places p { margin-top: 8px !important; max-width: 90ch; font-size: 15px; line-height: 1.6; color: var(--txt2); }
.hp-src { display: grid; gap: 10px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); }
.hp-src p { max-width: 75ch; font-size: 14px; line-height: 1.55; color: var(--mut); }
.hp-src-list { display: flex; flex-direction: column; gap: 4px; }
.hp-src-list a { font: 400 13px/1.5 var(--mono); color: var(--txt2); overflow-wrap: anywhere; }
.hp-src-list a:hover { color: var(--acc); }

/* The other numbers of a post (one per part of its area), under the large one */
.hp-answer-where { margin-top: -6px !important; font-size: 15px; line-height: 1.4; color: var(--txt2); }
.hp-alts { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.hp-alt { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hp-alt:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-alt b { font: 500 22px/1.1 var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.hp-alt span { font-size: 15px; line-height: 1.4; color: var(--txt2); }
.hp a.hp-alt:hover b { color: var(--hp-sos-ink); }
@media (max-width: 420px) { .hp-alt { grid-template-columns: 1fr; } }
.hp-gem { margin-top: 10px !important; max-width: 90ch; font-size: 15px; line-height: 1.6; color: var(--txt2); }
.hp-gem b { font-weight: 600; color: var(--txt); }