:root{--c-bg:#f7f8f9;--c-surface:#ffffff;--c-fg:#17212b;--c-muted:#505d6a;--c-line:#d9dfe5;--c-accent:#0a5a9c;--c-accent-soft:#e8f1fa;--c-note:#fff5dc;--c-note-line:#e8d59a;--c-focus:#0a5a9c;--c-coral:#f0645a;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--fs-sm:.875rem;--fs-base:1rem;--fs-md:1.125rem;--fs-lg:1.375rem;--fs-xl:1.75rem;
--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2.5rem;
--r-sm:6px;--r-md:10px;--shadow:0 1px 2px rgba(16,24,32,.06),0 4px 14px rgba(16,24,32,.06);
--ctl-h:2.75rem;--measure:62rem;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--c-bg:#101519;--c-surface:#182027;--c-fg:#e6ebf0;--c-muted:#a3afbb;--c-line:#2b3640;--c-accent:#7dbcf0;--c-accent-soft:#1b2b3a;--c-note:#2e2a17;--c-note-line:#5a4f22;--c-focus:#7dbcf0;--c-coral:#f2786f;--shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-base)/1.6 var(--font);color:var(--c-fg);background:var(--c-bg)}
a{color:var(--c-accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{line-height:1.25;margin:var(--sp-5) 0 var(--sp-2);font-weight:650}
h1{font-size:var(--fs-xl);margin-top:var(--sp-4);letter-spacing:-.01em}
h2{font-size:var(--fs-lg)}h3{font-size:var(--fs-md)}h4{font-size:var(--fs-base);color:var(--c-muted)}
p,ul,ol{margin:var(--sp-3) 0}
.skip{position:absolute;left:var(--sp-3);top:-4rem;z-index:20;background:var(--c-surface);color:var(--c-fg);border:2px solid var(--c-focus);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}
.skip:focus{top:var(--sp-3)}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--sp-4)}
header{background:var(--c-surface);border-bottom:3px solid var(--c-accent)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.brand{display:block;flex-shrink:0;line-height:0;text-decoration:none}
.brand img{display:block;height:2.75rem;width:auto;max-width:100%}
/* the header menu pill; every other nav (.bc, .sw, nav.letters, the chip rows) is styled by its own component */
.hn a{padding:var(--sp-1) var(--sp-3);border-radius:999px;color:var(--c-fg);text-decoration:none;font-size:var(--fs-sm)}
.hn a:hover{background:var(--c-accent-soft);color:var(--c-accent)}
nav.family-filter,nav.atc-level{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-2)}
nav.letters{margin-bottom:var(--sp-3)}
main{padding-bottom:var(--sp-5)}main:focus{outline:none}
.disclaimer{background:var(--c-note);border:1px solid var(--c-note-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0;font-size:var(--fs-sm)}
.lead{font-size:var(--fs-md);max-width:44rem}
dl.facts{display:grid;grid-template-columns:1fr;gap:var(--sp-1) var(--sp-4);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow)}
dl.facts dt{color:var(--c-muted);font-size:var(--fs-sm);margin-top:var(--sp-2)}dl.facts dt:first-child{margin-top:0}
dl.facts dd{margin:0}dl.facts ul{margin:0;padding-left:var(--sp-4)}
@media (min-width:40rem){dl.facts{grid-template-columns:12rem minmax(0,1fr)}dl.facts dt{margin-top:0}}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);margin:var(--sp-3) 0;font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-line);vertical-align:top;overflow-wrap:break-word}
/* a value that must not break: dates, numbers, the availability column */
.nw{white-space:nowrap}
/* Moc wraps BETWEEN strengths: each number+unit token is a nowrap .u, the comma stays on the token before it, a line breaks after ", " (or at the <wbr> after a slash word) */
td.c-moc .v{white-space:normal}
td.c-moc .vl{white-space:normal;overflow-wrap:break-word}
td.c-moc .mg{display:block}
.u{white-space:nowrap;overflow-wrap:normal}
th{color:var(--c-muted);font-weight:600;background:var(--c-bg)}
thead th:first-child{border-top-left-radius:var(--r-md)}thead th:last-child{border-top-right-radius:var(--r-md)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--c-accent-soft)}
tr[data-m][tabindex]{cursor:pointer}
tr[data-m][tabindex]:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
tr:target td,tr.hit td{background:var(--c-accent-soft)}
tr:target td:first-child,tr.hit td:first-child{box-shadow:inset 3px 0 0 var(--c-accent)}
.eqset.hit{background:var(--c-accent-soft);box-shadow:inset 3px 0 0 var(--c-accent);padding-inline:var(--sp-3);margin-inline:calc(-1*var(--sp-3))}
td:first-child{font-weight:550}
figure{margin:var(--sp-4) 0}
nav.atc-level+nav.atc-level{border-top:1px solid var(--c-line);padding-top:var(--sp-2);margin-top:var(--sp-2)}
figcaption,summary{margin-bottom:var(--sp-2)}
tr.sec td{background:var(--c-accent-soft)}
@media (max-width:39.99rem){
table,thead,tbody,tr,td{display:block}
table{background:none;border:0}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
tr{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);margin:var(--sp-3) 0;padding:var(--sp-1) 0;box-shadow:var(--shadow)}
td,tbody tr:last-child td{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--sp-3);border:0;padding:var(--sp-1) var(--sp-3);white-space:normal;overflow-wrap:break-word}
td[data-label]::before{content:attr(data-label);color:var(--c-muted);font-size:var(--fs-sm);overflow-wrap:normal;word-break:normal;hyphens:none}
td,td *,td[data-label],td[data-label] *,td.c-moc .vl{white-space:normal;overflow-wrap:break-word;min-width:0}
/* a unit (number + unit, unit/unit) never breaks inside: only a word longer than the card is cut (I6) */
td.c-moc .v{white-space:normal;overflow-wrap:break-word;min-width:0}
td .u,td .u *{white-space:nowrap;overflow-wrap:normal;word-break:normal}
td[data-label] .step,td[data-label] .step *{white-space:nowrap;overflow-wrap:normal}
td:first-child{font-size:var(--fs-base)}
table.tot td:nth-child(2),table.tot tbody tr:last-child td:nth-child(2){display:block}table.tot td:nth-child(2)::before{display:block;margin-bottom:var(--sp-1)}table.tot td>.mark{grid-column:1/-1}
td:empty{display:none}
tr.sec td{display:block}
.term [role=tooltip]{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);top:auto;width:auto;max-width:none}
}
.tag{display:inline-block;font-size:.75rem;line-height:1.5;border:1px solid var(--c-line);background:var(--c-accent-soft);border-radius:999px;padding:0 var(--sp-2);color:var(--c-muted);font-weight:500;white-space:nowrap}
.eqset{padding:var(--sp-2) 0;border-radius:var(--r-md)}
.mark{color:var(--c-muted);font-size:var(--fs-sm)}
.holder-contact address{font-style:normal;overflow-wrap:break-word}
details{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);margin:var(--sp-3) 0}
details[open]{padding-bottom:var(--sp-3)}
summary{cursor:pointer;font-weight:600;padding:var(--sp-1) 0}
.raw{white-space:pre-wrap;font:inherit;margin:var(--sp-3) 0;max-width:46rem;overflow-wrap:break-word}
section[id^=s-]{margin-top:var(--sp-6);padding-top:var(--sp-2);border-top:1px solid var(--c-line)}
main>ul{list-style:none;padding:0;columns:1;column-gap:var(--sp-5)}
main>ul>li{break-inside:avoid;padding:var(--sp-1) 0;border-bottom:1px solid var(--c-line)}
@media (min-width:40rem){main>ul{columns:2}}
form[role=search] label{display:block;font-weight:600;margin-bottom:var(--sp-2)}
input[type=search]{width:100%;font:inherit;font-size:var(--fs-md);padding:var(--sp-3) var(--sp-5);border:1px solid var(--c-muted);border-radius:999px;background:var(--c-surface);color:var(--c-fg);box-shadow:var(--shadow)}
input.num{font:inherit;width:5.5rem;padding:var(--sp-1) var(--sp-3);border:1px solid var(--c-muted);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-fg)}
input.num:focus-visible,input[type=search]:focus-visible{outline:3px solid var(--c-focus);outline-offset:0;border-color:var(--c-focus)}
.step{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap}.step .btn{padding:var(--sp-1) var(--sp-3);min-width:2rem}.step input.num{width:4.5rem}.step .mark{margin-left:var(--sp-1)}
table.prow td select{width:min(100%,22rem);max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.prow td .selfull{display:none}
table.prow td .btn.rm{justify-self:start;width:auto}
table.prow td input.num{-moz-appearance:textfield;appearance:textfield}table.prow td input.num::-webkit-inner-spin-button,table.prow td input.num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.btn.rm{background:transparent;border-color:transparent;color:var(--c-muted);padding:var(--sp-1);min-width:2.5rem;width:auto;display:inline-flex;align-items:center;justify-content:center}.btn.rm svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.btn.rm:hover{text-decoration:none;background:var(--c-surface);color:var(--c-fg)}
/* the collapsed contraindication list of a disease page (D-261022-020): a product table inside a details box, so the box keeps a narrow side padding and the table (columns sized by content) does not scroll inside it */
details.contra{padding-left:var(--sp-2);padding-right:var(--sp-2)}
/* ATC pills (Q9.2): one disclosure, closed on a phone by the script after it */
details.atc-pills>summary{cursor:pointer;font-weight:600;margin:var(--sp-3) 0 var(--sp-2)}
/* one big search box (/search, /leki; the header has the small pill) */
form.big{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-3) 0}
form.big input[type=search]{flex:1 1 auto;min-width:0;height:var(--ctl-h);padding-top:0;padding-bottom:0}
/* select and button: tokens, radius, focus */
main select{font:inherit;font-size:var(--fs-sm);color:var(--c-fg);background:var(--c-surface);border:1px solid var(--c-muted);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);max-width:100%}
main button[type=submit],.btn{display:inline-block;line-height:1.4;text-decoration:none;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--c-bg);background:var(--c-accent);border:1px solid var(--c-accent);border-radius:999px;padding:var(--sp-2) var(--sp-5);cursor:pointer;white-space:nowrap}
main button[type=submit]:hover,.btn:hover{text-decoration:underline;text-underline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed;text-decoration:none}
.res-list{list-style:none;padding-left:0;margin-block:var(--sp-2)}
.res-list li{margin-block:var(--sp-2)}
form.big button[type=submit],.holder button[type=submit],main select{height:var(--ctl-h)}
form.big button[type=submit]{font-size:var(--fs-base);padding:0 var(--sp-5)}
@media (max-width:30rem){form.big input[type=search]{font-size:var(--fs-base);padding-left:var(--sp-4);padding-right:var(--sp-3)}form.big button[type=submit]{padding:0 var(--sp-4);font-size:var(--fs-sm)}}
/* chips: scope tabs, filters, letters, pager; the current one carries the accent (as in the header) */
.chips,nav.letters,.pager,.holder{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.chips{margin:var(--sp-2) 0}
.chips .fl,.pager,.holder label{color:var(--c-muted);font-size:var(--fs-sm)}
.chips .fl{flex:0 0 100%}
.chip,nav.letters a,nav.letters strong,.pager a,.pager strong{display:inline-flex;align-items:center;gap:.3em;font:inherit;font-size:var(--fs-sm);line-height:1.4;padding:var(--sp-1) var(--sp-3);min-height:2rem;border-radius:999px;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-fg);text-decoration:none;cursor:pointer}
a.chip:hover,nav.letters a:hover,.pager a:hover{border-color:var(--c-accent);background:var(--c-accent-soft);color:var(--c-accent)}
.chip[aria-current],.pager strong,nav.letters strong{background:var(--c-accent-soft);color:var(--c-accent);border-color:var(--c-accent);cursor:default}
.chip[aria-disabled],.holder option:disabled{color:var(--c-muted);border-style:dashed;opacity:.6;cursor:default}
.chip .n{color:var(--c-muted);font-weight:400;white-space:nowrap;overflow-wrap:normal;flex:none}
p.clear{margin:var(--sp-2) 0;font-size:var(--fs-sm)}
.chips p.clear{margin:0 0 0 var(--sp-2)}
/* subpage switcher (`nav.sw`, issue #42): links to sibling pages (segmented control, centered, above the h1), NOT the in-page filters above. */
.sw{display:flex;flex-wrap:wrap;gap:var(--sp-1);width:fit-content;max-width:100%;margin:var(--sp-3) auto var(--sp-2);padding:3px;background:var(--c-accent-soft);border:1px solid var(--c-line);border-radius:var(--r-md)}
.sw a{white-space:nowrap;padding:var(--sp-2) var(--sp-3);border-radius:calc(var(--r-md) - 3px);font-size:var(--fs-sm);font-weight:500;text-align:center;text-decoration:none;color:var(--c-muted)}
.sw[hidden]{display:none}
.sw a:hover{color:var(--c-accent)}
.sw a[aria-current]{background:var(--c-accent);color:var(--c-bg);font-weight:650}
/* phones: the switcher wraps onto a second row, nothing hidden and no inner scroll */
@media (max-width:39.99rem){.sw a{flex:none}}
/* round 11b: the three Leki tabs (Wyszukiwarka | Alfabetycznie | Przeciwwskazania) fit one row at 390 and 375 px (341 px wide, measured); 360 px and below still wrap onto a second row */
@media (max-width:30rem){.sw{gap:0}.sw a{padding:var(--sp-2) var(--sp-1);font-size:.8125rem}}
/* /leki on a phone (issue #38): the filter block never widens the page; the holder select takes its own full-width line and long option texts are cut by it */
.family-filter,.chips,.holder{min-width:0;max-width:100%}
table.prow td .tag,table.simple td .tag{white-space:normal;overflow-wrap:break-word}
@media (max-width:39.99rem){td.c-name,td.c-name *,table.prow td .tag,table.simple td .tag,td.c-quote,td.c-extra{overflow-wrap:anywhere}td.c-quote,td.c-extra{hyphens:auto}}
/* Moje leki totals table: the sources list sits level with the other cells (no list margin or indent); fixed widths so headers wrap at spaces only */
table.tot td ul{list-style:none;margin:0;padding:0}table.tot td li+li{margin-top:var(--sp-1)}
@media (min-width:40rem){}
table.tot td .tag{display:block;width:fit-content;margin-top:var(--sp-1);white-space:normal}
/* simple table (TB1, MedinaryWeb.SimpleTable): widths and wrapping by class, not by label text */
/* ONE table width rule (T-261021-008, measured): columns are sized by their content (auto layout) and the only floor is Nazwa (11rem), so no column is squeezed to a fixed share and none is padded; a table wider than its box scrolls inside its own wrapper (.tablewrap), never the page. Every cell still carries a column-type class (c-name, c-form, ...) for cell-specific rules. No mid-word breaks at desktop (break-anywhere only in the phone card layout). Stacked tables of one kind on a page get the same columns from the equaliser script in the layout (a min-width per column = the widest of the group). Comparison of the candidates: docs/conventions.md. */
table.simple{width:100%}
.tablewrap{overflow-x:auto;max-width:100%;margin:var(--sp-3) 0}.tablewrap>table{margin:0}
@media (min-width:40rem){
th.c-name,td.c-name{min-width:11rem}
/* column-type bounds of the one table rule (round 9, measured): Postać never wraps a common form name ("Tabletki powlekane", "Kapsułki twarde" fit in 10.5rem = 168 px; round 10 raised it from 9rem to 12rem, which wrapped them at 1440 no more but padded short forms and squeezed the quote, Podmiot and Moc columns, so round 10b settled on 10.5rem) and Podmiot keeps a floor (round 11: 12.5rem = 200 px, measured: 59 % of the 400 most frequent holders on one line against 43 % at 11rem, holder cells wrapped on /choroby/jaskra/przeciwwskazania 29 -> 17 of 50; 14rem wrapped 13 but made that page 17 % taller because the quote column was squeezed, 12.5rem 6 %); a single common form name of up to 24 characters ("Roztwór do wstrzykiwań", 193 px with padding, wrapped at 10.5rem) is a nowrap span (`ProductRow.form_text`), so Postać is as wide as its widest short name instead of a padded 12rem floor; a Moc cap was measured too and made the tables taller (4092 -> 4360 px on /leki), so Moc stays content-sized */
th.c-form,td.c-form{min-width:10.5rem}
th.c-holder,td.c-holder{min-width:12.5rem}
/* round 11b (measured against 302b3b8 and 0a8983b on 15 table pages at 1440): a Moc floor of 11rem = one "Substance amount" on a line; the equaliser script does not propagate Moc widths (a combination list's wide Moc column had made the single-substance table's Moc 344 px and its Podmiot 3-4 lines, X7b: 2516 -> 2001 px). A table with a free-text column gets Podmiot back at 11rem; a quote column (c-quote: the contraindication lists) also has no Moc floor and Postać wraps, so the quote keeps its width (E3 352 -> 329 px, ciaza/2 7118 -> 6379); the Wygląd column (c-look) has a 12rem floor so its tags do not stack (X1 7163 -> 6962, X2 13388 -> 11664, W1 4345 -> 3961); text columns break inside a long word (a table must never be wider than its box, BZ 1000 -> 960 px); round 11c: `hyphens:auto` (the page is lang="pl") first, anywhere stays the fallback where the browser has no Polish dictionary */
th.c-moc,td.c-moc{min-width:11rem}
table:has(.c-quote) th.c-moc,table:has(.c-quote) td.c-moc{min-width:0}
table:has(.c-quote,.c-look) th.c-holder,table:has(.c-quote,.c-look) td.c-holder{min-width:11rem}
table:has(.c-quote) td.c-form .nw{white-space:normal}
th.c-look,td.c-look{min-width:12rem}
td.c-quote,td.c-extra{hyphens:auto;overflow-wrap:anywhere}
}
/* ATC level chips carry long names: one per row on a phone, text wraps at spaces only */
@media (max-width:39.99rem){nav.atc-level .chip{flex:1 1 100%;max-width:100%;border-radius:var(--r-md);overflow-wrap:normal;word-break:normal;padding:var(--sp-1) var(--sp-2);min-height:0}}
@media (max-width:39.99rem){colgroup{display:none}.tablewrap{overflow:visible;margin:0}.holder select{flex:1 1 100%;width:100%;min-width:0;max-width:100%}.chip{max-width:100%;overflow-wrap:break-word}table.prow,table.simple{width:100%;max-width:100%}table.prow td select{width:100%}table.prow td .selfull{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);overflow-wrap:anywhere}}
.chip[aria-current] .n{color:var(--c-accent)}
.holder{margin:var(--sp-3) 0}
.family-filter .mark{margin:var(--sp-2) 0}
/* result rows: kind label, name, detail line */
.rows{list-style:none;padding:0;margin:var(--sp-3) 0;columns:1}
.rows>li{display:block;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-2) 0;break-inside:avoid}
.rows>li:hover{border-color:var(--c-accent)}
.rows .kind{display:block;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);font-weight:600}
.rows .nm{font-size:var(--fs-md);font-weight:600}
.rows .det{display:block;font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--sp-1)}
#results h2{font-size:var(--fs-md);margin:var(--sp-4) 0 var(--sp-1)}
.term{position:relative;display:inline-block}
.term>a{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.term>a:hover,.term>a:focus-visible{color:var(--c-accent)}
.term [role=tooltip]{display:none;position:absolute;left:0;top:100%;z-index:10;width:max-content;max-width:min(20rem,80vw);background:var(--c-surface);color:var(--c-fg);border:1px solid var(--c-accent);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:400;line-height:1.45;box-shadow:var(--shadow)}
.moc-mark{cursor:help;font-size:var(--fs-sm);margin-left:1px}
.term:hover [role=tooltip],.term:focus-within [role=tooltip]{display:block}
footer{border-top:1px solid var(--c-line);color:var(--c-muted);font-size:var(--fs-sm);margin-top:var(--sp-6);padding:var(--sp-4) 0 var(--sp-6)}
footer p{margin:var(--sp-2) 0;max-width:50rem}
/* header nav: blue underline on the current page */
.hn a[aria-current=page]{color:var(--c-accent);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.hn li a:hover{background:var(--c-accent-soft);color:var(--c-accent)}
.hn{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sp-2);flex:1 1 0;min-width:0}
.hn ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.hn .hm{flex-wrap:nowrap}
.hn li a,.hn button{white-space:nowrap}
.hn .hm li+li{border-left:1px solid var(--c-line)}
.hn li a{display:block;padding:var(--sp-1) var(--sp-3);border-radius:0}
.hs{flex:1 1 12rem;min-width:12rem;max-width:16rem;margin:0}
.hs input[type=search]{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);box-shadow:none;border-radius:999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.si,.hn .db{display:none}
.hn button{font:inherit;line-height:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0;padding:var(--sp-1) var(--sp-3);cursor:pointer;display:inline-flex;align-items:center;gap:.25em}
.hn button:hover{background:var(--c-accent-soft);color:var(--c-accent)}
.hn .dr{display:none}
.hn [hidden]{display:none!important}
@media (max-width:30rem){
.brand img{height:1.875rem}
header .wrap{flex-wrap:nowrap;gap:var(--sp-2)}
.hn{justify-content:flex-end;gap:0}
html:not(.js) .hn{flex-wrap:wrap}
.hs,.hn .hm{display:none}
.si{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;height:2.75rem;color:var(--c-fg)}
header{position:relative}
header .wrap{position:static}
.hn{position:static}
.js .hn .db{display:inline-flex;min-height:2.75rem;padding:var(--sp-1) var(--sp-2)}
.js .hn .dr{display:block;position:absolute;left:0;right:0;top:100%;z-index:15;background:var(--c-surface);border-top:1px solid var(--c-line);border-bottom:3px solid var(--c-accent);box-shadow:var(--shadow);padding:0 var(--sp-4)}
.hn .dr{display:block;flex:0 0 100%}
.hn .dr li+li{border-left:0;border-top:1px solid var(--c-line)}
.hn .dr li a{padding:var(--sp-3) var(--sp-2)}
}
.bc{padding-top:var(--sp-3);font-size:var(--fs-sm,.875rem);color:var(--c-muted)}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;min-width:0}
.bc li{flex:0 1 auto;min-width:0;overflow-wrap:break-word}
.bc li+li::before{content:"\203A" / "";margin:0 var(--sp-2);color:var(--c-muted)}
.bc a{color:var(--c-accent);text-decoration:none;padding:var(--sp-1) 0;border-radius:999px;font-size:var(--fs-sm)}
.bc a:hover{background:var(--c-accent-soft);text-decoration:underline}
.bc [aria-current=page]{color:var(--c-fg);font-weight:600}
@media print{header nav,.skip,.bc{display:none}}