/* The header's own rules (Art 2026-10-08: a lower header, every item link-blue, the gold Sponsors); site.css
   is at its size budget. Loaded on every page after site.css, by content hash. */
header.site .brand{font-size:1.05rem;white-space:nowrap}nav.sections a{color:var(--link)}nav.sections a[aria-current="page"]{color:var(--text)}.cmp-basket>summary{font-size:.8rem;padding:.15rem .45rem;white-space:nowrap}header.site .switch select{font-size:.75rem;min-height:1.5rem}header.site .switch{flex-direction:row;flex-wrap:nowrap}header.site .wrap{padding-block:2px}header.site nav.sections a{min-height:2.1rem}nav.sections a.add-seller{white-space:nowrap;min-height:2rem;padding:.05rem .6rem;line-height:1.05}nav.sections a.sponsors-link{font-weight:700;color:#2b1d00;background-color:#eec457;background-image:linear-gradient(#f9dc7a,#e3ac2f);border:1px solid #b8860b;margin-right:.25rem}
.load-view{position:relative}.load-view>summary{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--touch);padding:.5rem 1rem;border:1px solid var(--accent);border-radius:var(--r);color:var(--link);font-weight:600;cursor:pointer;list-style:none}.load-view>summary::-webkit-details-marker{display:none}.load-view>summary .count{padding:0 .4rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.75rem}.load-view .fdrop-body{position:absolute;z-index:20;top:100%;left:0;margin-top:2px;min-width:16rem;max-height:60vh;overflow:auto;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:.4rem;box-shadow:0 4px 14px rgba(0,0,0,.15)}.load-view .fdrop-body a{padding:.3rem .5rem;border-radius:4px}.load-view .fdrop-body a:hover{background:var(--su)}.load-view .fdrop-body p{margin:.3rem .5rem 0;font-size:.8rem}
.view-toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:50;max-width:min(36rem,92vw);padding:.7rem 1.1rem;border-radius:var(--r);background:var(--ok-bg);color:var(--ok-text);border:1px solid currentColor;box-shadow:0 4px 14px rgba(0,0,0,.2);font-weight:600}.view-toast.bad{background:var(--bad-bg);color:var(--bad-text)}
.views-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.2rem 0 .35rem;font-size:.8rem}.views-bar .view-now{color:var(--tm);white-space:nowrap;max-width:16rem;overflow:hidden;text-overflow:ellipsis}.views-bar .view-now b{color:var(--text)}.views-bar .save-view{display:flex;gap:.3rem;align-items:center;margin:0;padding:0;border:0}.views-bar input[name=name]{min-height:0!important;height:1.75rem;width:11rem;padding:0 .45rem!important;font-size:.8rem}.views-bar button{min-height:0;height:1.75rem;padding:0 .6rem;font-size:.8rem}.views-bar .load-view>summary{min-height:0;height:1.75rem;padding:0 .6rem;font-size:.8rem}
@media(max-width:1400px){header.site .wrap{flex-wrap:wrap}}
header.site .wrap{flex-wrap:wrap}main tr.col-filters .cf.on>details.fdrop>summary{min-width:3.2rem}
main table.data.compare.items{table-layout:fixed;width:100%}main table.data.compare.items th:first-child{width:13rem}main table.data.compare.items th.best-col,main table.data.compare.items td.best-col,main table.data.compare.items thead th:last-child{width:6rem}main table.data.compare.items td,main table.data.compare.items th{white-space:normal!important;overflow-wrap:anywhere}
ul.articles{list-style:none;padding:0;max-width:48rem}ul.articles li{padding:var(--s3) 0;border-bottom:1px solid var(--bd)}ul.articles p{margin:var(--s1) 0 0}article.article{max-width:48rem}article.article h3{font-size:1.05rem}article.article .table-wrap{overflow-x:auto}table.data.live td,table.data.live th{white-space:nowrap}

.ch-pick{display:flex;flex-wrap:wrap;gap:.25rem .9rem;align-items:center;margin:0 0 .4rem}.ch-pick .sep{color:var(--bd)}.ch-pick strong{color:var(--text)}table.changes .move{display:inline-block;min-width:3.6rem;padding:.05rem .4rem;border-radius:var(--r-sm);text-align:center}tr.down .move{background:var(--ok-bg);color:var(--ok-text)}tr.up .move{background:var(--bad-bg);color:var(--bad-text)}
/* the field tables of /join on a phone (2026-10-10): wrap the long field lists, scroll the table itself if still wide */
table.legal{display:block;max-width:100%;overflow-x:auto}table.legal td,table.legal th{overflow-wrap:anywhere}
/* the card list on a phone (2026-10-10, e2e_phone): a row is a block of its own height - the desktop's fixed row
   height had cut every field to one 36 px line, so names were not visible */
@media(max-width:640px){table.data.cards>tbody>tr:not(.open){height:auto;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;row-gap:.15rem}
table.data.cards>tbody>tr:not(.open)>td{height:auto;width:auto;max-width:100%;overflow:visible;overflow-wrap:anywhere;white-space:normal;flex:0 1 auto;padding:0}
table.data.cards>tbody>tr:not(.open)>td.c-icon{align-self:flex-start}table.data.cards>tbody>tr:not(.open)>td.c-name{flex:1 1 0;min-width:10rem;font-size:var(--fs-base)}
table.data.cards>tbody>tr:not(.open)>td.card-actions{margin-left:auto}table.data.cards>tbody>tr:not(.open)>td.c-variant{flex-basis:100%}
table.data.cards>tbody>tr:not(.open)>td:is(.c-variant,.c-sub,.c-region,.c-cost):empty{display:none}
table.data.cards>tbody>tr:not(.open)>td:is(.c-in,.c-out,.c-ctx-in,.c-ctx-out,.c-cost)::before{content:attr(data-label) " ";color:var(--tm);font-size:.78em}
table.data.cards>tbody>tr:not(.open)>td.c-icon:has(>.img-slot:only-child),table.data.cards>tbody>tr:not(.open)>td:has(>.img-slot:only-child){display:none}
.card-head{flex-wrap:wrap;gap:var(--s1) var(--s2)}.card-head>strong{flex:1 1 100%}.card-head .card-buttons{gap:var(--s1)}.card-head .card-buttons .button{min-height:2rem;padding:.2rem .6rem;font-size:var(--sm)}}
/* passwords: the eye inside the field (t.js, Art 2026-10-10) */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:2.6rem;box-sizing:border-box}
button.pw-eye{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);background:none;border:0;box-shadow:none;padding:.2rem .45rem;margin:0;min-width:0;width:auto;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65}
button.pw-eye[aria-pressed=true]{opacity:1}
/* phones (Art 2026-10-10): denser, and the cards' sorting and filters behind one button (t.js) */
button.m-filters{display:none}
@media(max-width:640px){
body{font-size:.875rem;line-height:1.4}
.wrap{padding:0 .6rem}
h1{font-size:1.2rem;margin:.35rem 0 .25rem}h2{font-size:1.02rem;margin:.6rem 0 .3rem}h3{font-size:.95rem}
p{margin:.4rem 0}
header.site .wrap{padding-block:.15rem;gap:0 .3rem}
header.site .brand{font-size:.98rem;min-height:1.8rem}
header.site nav.sections a{min-height:1.75rem;padding:0 .32rem;font-size:.82rem}
nav.sections a.add-seller{min-height:1.6rem;font-size:.68rem;padding:.05rem .4rem;margin-left:.2rem}
.switch select{min-height:1.5rem;font-size:.75rem}
main nav{margin:.25rem 0;gap:.15rem .35rem}main nav a{min-height:1.9rem}
.group.pills{margin-bottom:2px}.group.pills nav.types a{font-size:.72rem;min-height:20px;line-height:1.35;padding:0 .4rem}
.list-pager .pages>*{min-width:1.7rem}.list-pager strong[aria-current]{line-height:1.8rem}.list-pager .per-page{font-size:.75rem}
button,a.button{min-height:2.1rem;padding:.25rem .65rem}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{min-height:2.1rem;padding:.2rem .45rem}
table.data.cards>tbody>tr:not(.open){padding:.3rem .45rem;margin:0 0 .3rem}
table.data.cards td.c-name{font-size:.85rem}
table.data.cards td.c-updated{white-space:nowrap}
.seller-pic{width:32px;height:32px;border-radius:8px;font-size:.65rem}
table.data tr{margin:0 0 .4rem;padding:.3rem .5rem}
/* the button and the stacked header */
button.m-filters{display:inline-flex;align-items:center;gap:.3rem;margin:.3rem 0;background:var(--su2);color:var(--text);border-color:var(--bs);font-weight:600}
button.m-filters[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
table.data.cards.m-open>thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;display:block;margin:0 0 .5rem;padding:.4rem .5rem;border:1px solid var(--bs);border-radius:var(--r);background:var(--su)}
table.data.cards.m-open>thead>tr{display:flex;flex-wrap:wrap;gap:.25rem;height:auto;padding:0;margin:0 0 .4rem;border:0;background:none}
table.data.cards.m-open>thead th{display:none;position:static;width:auto;padding:0;border:0;background:none;font-size:.8rem}
table.data.cards.m-open>thead>tr:first-child th:has(a.sort){display:block}
table.data.cards.m-open>thead>tr:first-child th{white-space:nowrap;overflow-wrap:normal;hyphens:none;word-break:normal}
table.data.cards.m-open>thead>tr:first-child th a.sort{display:inline-block;white-space:nowrap;padding:.1rem .5rem;border:1px solid var(--bs);border-radius:var(--r-pill);background:var(--bg)}
table.data.cards.m-open>thead>tr:first-child th a.sort.on{border-color:var(--accent);color:var(--accent)}
table.data.cards.m-open>thead th .col-tog{display:none}
table.data.cards.m-open>thead>tr.col-filters>*[data-mlab]{display:block;flex:1 1 calc(50% - .25rem);min-width:0;height:auto}
table.data.cards.m-open>thead>tr.col-filters>*::after{content:none}
table.data.cards.m-open>thead .cf,table.data.cards.m-open>thead .work,table.data.cards.m-open>thead details.fdrop{display:block;width:100%}
table.data.cards.m-open>thead details.fdrop>summary{display:flex;align-items:center;min-height:2.1rem;padding:0 .45rem;border:1px solid var(--bs);border-radius:var(--r);background:var(--bg)}
table.data.cards.m-open>thead>tr.col-filters>*[data-mlab]::before{content:attr(data-mlab);display:block;font-size:.72rem;color:var(--tm);margin-bottom:.1rem}
table.data.cards.m-open>thead input:not([type=checkbox]),table.data.cards.m-open>thead select{width:100%;max-width:none}
/* the Full view stays a real table on a phone, scrolling sideways in its own box */
table.data.cards.full{display:table;width:max-content;min-width:100%;font-size:.72rem}
table.data.cards.full>thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;display:table-header-group}
table.data.cards.full>tbody{display:table-row-group}
table.data.cards.full>thead>tr,table.data.cards.full>tbody>tr,table.data.cards.full>tbody>tr:not(.open){display:table-row;height:auto;margin:0;padding:0;border:0;grid-template-columns:none}
table.data.cards.full th,table.data.cards.full td,table.data.cards.full>tbody>tr>td{display:table-cell;width:auto;height:auto;padding:.15rem .3rem;border-bottom:1px solid var(--bd);text-align:left;white-space:nowrap;font-size:.72rem}
table.data.cards.full td::before,table.data.cards.full td::after{content:none}
table.data.cards.full>thead th{position:sticky;top:0}
}

/* providers on a phone (Art 2026-10-10, "too much empty space"): one compact grid card per provider -
   picture | name + tagline | price / last check / pin; the types and the model count are already in the tagline */
@media(max-width:640px){
table.data.cards.sellers>tbody>tr:not(.open):not(.ad){display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;grid-template-areas:"pic name from from" "pic name upd act" "spon spon spon spon";column-gap:.5rem;row-gap:0;align-items:center;padding:.35rem .5rem;margin:0 0 .25rem}
table.data.cards.sellers>tbody>tr:not(.open)>td{padding:0;border:0}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-pic{grid-area:pic;align-self:start}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-name{grid-area:name;min-width:0;font-size:.9rem;font-weight:600;line-height:1.25}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-name .s-tag{display:block;font-weight:400;font-size:.72rem;color:var(--tm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-from{grid-area:from;font-size:.76rem;text-align:right;white-space:nowrap}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-upd{grid-area:upd;font-size:.68rem;color:var(--tm);text-align:right;white-space:nowrap}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-upd br{display:none}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-upd .muted{margin-left:.25rem}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-spon{grid-area:spon}
table.data.cards.sellers>tbody>tr:not(.open)>td.sp-spon:empty{display:none}
table.data.cards.sellers>tbody>tr:not(.open)>td.card-actions{grid-area:act;margin:0;justify-self:end}
table.data.cards.sellers>tbody>tr:not(.open)>td.card-actions button.pin{min-height:1.5rem;padding:0 .3rem}
table.data.cards.sellers>tbody>tr:not(.open)>td:is(.c-types,.sp-n){display:none}
table.data.cards.sellers .seller-pic{width:30px;height:30px;font-size:.6rem}
}
@media(max-width:640px){table.data.cards.m-open>thead>tr.col-filters>*:not([data-mlab]):empty{display:none}
table.data.cards.m-open>thead>tr.col-filters>.card-actions{flex:1 1 100%}table.data.cards.m-open>thead>tr.col-filters>.card-actions button{min-height:2rem;width:100%}}
/* the home page on a phone: two tiles per row, a smaller summary */
@media(max-width:640px){.hero p.summary{font-size:1rem;margin:.2rem 0}.hero p.lead{font-size:.82rem}
.hero p.home-go{gap:.3rem;margin:.4rem 0}.hero p.home-go .button,.hero p.home-go a{min-height:1.9rem;padding:.2rem .6rem;font-size:.82rem}
ul.type-tiles{grid-template-columns:1fr 1fr;gap:.35rem}ul.type-tiles>li>a{padding:.45rem .55rem;gap:0;font-size:.75rem;line-height:1.3}
ul.type-tiles>li>a strong{font-size:.85rem}}
/* small tables on a phone: up to 4 columns stay a real table (they fit 360 px); bigger ones keep the
   label/value cards, but tighter; the site header scrolls away instead of holding 100 px of the screen */
@media(max-width:640px){header.site{position:static}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5))){display:table;table-layout:auto;width:100%;border-spacing:0;border-collapse:collapse;font-size:.8rem}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;display:table-header-group}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>thead>tr{display:table-row;margin:0;padding:0;border:0;background:none}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>thead th{display:table-cell;width:auto;position:static;font-size:.7rem;padding:.2rem .3rem;white-space:normal}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody{display:table-row-group}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody>tr{display:table-row;margin:0;padding:0;border:0;background:none}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody>tr>td{display:table-cell;width:auto;padding:.3rem;border-bottom:1px solid var(--bd)!important;font-size:.8rem;font-weight:400;text-align:left;overflow-wrap:anywhere}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody>tr>td.num{text-align:right;white-space:nowrap}
table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody>tr>td::before{content:none}
table.data:not(.cards) tr{margin:0 0 .3rem;padding:.3rem .5rem}
table.data:not(.cards) td{padding:.05rem 0;font-size:.8rem}table.data:not(.cards) td::before{font-size:.72rem}
table.data:not(.cards) td:first-child{font-size:.85rem}}
/* the price changes on a phone: model on top, then provider, component, date, and the change on one line */
@media(max-width:640px){table.data.changes>tbody>tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem}
table.data.changes>tbody>tr>td{display:inline;width:auto;padding:0;font-size:.75rem;color:var(--tm);text-align:left}
table.data.changes>tbody>tr>td::before{content:none}
table.data.changes>tbody>tr>td:nth-child(2){order:-1;flex:1 1 60%;font-size:.85rem;font-weight:600;color:var(--text)}
table.data.changes>tbody>tr>td:nth-child(6){order:-1;font-weight:700}
table.data.changes>tbody>tr>td:nth-child(5){color:var(--text)}
table.data.changes>tbody>tr>td:first-child{font-weight:400;font-size:.75rem}}
/* model offers on a phone: line 1 the model and its buttons, line 2 provider and prices, line 3 the small details */
@media(max-width:640px){table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open){column-gap:.4rem;row-gap:.05rem;padding:.35rem .5rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td:is(.c-icon,.c-logo,.c-variant,.c-sub,.c-region):empty{display:none}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-name{order:1;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;line-height:1.25}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-name br{display:none}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-name :is(small,.muted,span){font-size:.7rem;font-weight:400;margin-left:.3rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.card-actions{order:2;margin-left:auto;align-self:center}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.card-actions :is(button.pin,button.cmp){min-height:1.5rem;padding:0 .3rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-icon{order:0}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-variant{order:3;flex-basis:100%;font-size:.72rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-seller{order:4;flex-basis:100%;font-size:.8rem;color:var(--text)}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-seller::after{content:none}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td:is(.c-in,.c-out,.c-cost,.c-sub){order:5;font-size:.8rem;color:var(--text)}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td:is(.c-region,.c-ctx-in,.c-ctx-out,.c-accepts,.c-updated,.c-votes){order:6;font-size:.7rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-updated br{display:none}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-updated .muted{margin-left:.2rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-votes button.vote{min-height:1.3rem;font-size:.7rem;padding:0 .3rem}
table.data.cards:not(.sellers):not(.full)>tbody>tr:not(.open)>td.c-votes .talk{display:inline;margin-left:.2rem}}
@media(max-width:640px){table.data.cards>tbody>tr:not(.open)>td.c-name a.base-line{display:inline;margin-left:.35rem;font-size:.7rem;font-weight:400;color:var(--tm)}}
@media(max-width:640px){table.data.cards.m-open>thead :is(input:not([type=checkbox]),select){min-height:1.8rem;padding:.1rem .4rem;font-size:.8rem}
table.data.cards.m-open>thead>tr.col-filters{row-gap:.35rem}table.data.cards.m-open>thead details.fdrop>summary{min-height:1.8rem;font-size:.8rem}}
/* compare on a phone: the four model fields two per row, the popular pairs in two columns */
@media(max-width:640px){form.compare-pick{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .5rem;align-items:end}
form.compare-pick label{font-size:.75rem;gap:.1rem}form.compare-pick input{width:100%;min-width:0}
form.compare-pick button{grid-column:1/-1}
ul.compare-popular{columns:2;column-gap:1rem;padding-left:1rem;font-size:.8rem}ul.compare-popular li{break-inside:avoid;margin:0 0 .15rem}}
@media(max-width:640px){p.summary{font-size:.95rem;margin:.2rem 0 .35rem}
table.data.compare{font-size:.78rem;border-spacing:0}table.data.compare :is(th,td){padding:.25rem .3rem;line-height:1.25}
table.data.compare>tbody>tr>th{font-size:.75rem}table.data.compare thead th{font-size:.72rem}}
/* wide plain tables on a phone: the first cell across the card, the rest two per line */
@media(max-width:640px){table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr:not(.open){display:grid;grid-template-columns:1fr 1fr;column-gap:.6rem;row-gap:0}
table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td:first-child{grid-column:1/-1}
table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td{gap:.3rem;min-width:0}
table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td::before{max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
label.opt{min-height:1.7rem}form.calc-form{gap:.4rem .6rem}}
@media(max-width:640px){table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td:first-child::before{content:none}
table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td:first-child{justify-content:flex-start;text-align:left}
table.data:not(.cards):not(.changes):not(.compare):has(>tbody>tr>td:nth-child(5))>tbody>tr>td:nth-child(2){grid-column:1/-1}}
@media(max-width:640px){.docs-toc-wrap{padding:.25rem .5rem;margin-bottom:.6rem}.docs-toc-wrap>summary{min-height:1.9rem}
.docs-toc{display:grid;grid-template-columns:1fr 1fr;gap:0 .6rem;margin-top:.2rem}
.docs-toc a{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:1.7rem;font-size:.8rem;line-height:1.2}
.docs-content section{margin-bottom:.9rem}.code pre{padding:.4rem 2rem .4rem .5rem;font-size:.75rem}}
@media(max-width:640px){main table.data:not(.cards):not(:has(>tbody>tr>td:nth-child(5)))>tbody>tr>td:not(.num){white-space:normal}
main .table-wrap:has(>table.data:not(.cards)){padding:0;margin:0}}
@media(max-width:640px){main .view-switch{margin:.2rem 0}main .view-switch>*{min-height:1.6rem;font-size:.8rem}p.found{margin:.2rem 0 0}}
/* phones (Art 2026-10-10): the types fold behind a button and open as a grid; the sort links and the filter
   fields of the panel are an even grid too, nothing runs into its neighbour */
@media(max-width:640px){button.m-types{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left}
.type-chips.m-fold{display:none}
.type-chips.m-fold.m-open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:.1rem 0 .4rem}
.type-chips.m-fold.m-open label.tchip{display:flex;justify-content:center;min-height:1.9rem;padding:.1rem .25rem;border-radius:6px;font-size:.74rem;line-height:1.15;text-align:center;overflow:hidden}
.type-chips.m-fold.m-open a.tchip-x{width:auto;height:auto;min-height:1.9rem;border-radius:6px}
table.data.cards.m-open>thead>tr:first-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
table.data.cards.m-open>thead>tr:first-child th:has(a.sort){display:block;min-width:0}
table.data.cards.m-open>thead>tr:first-child th a.sort{display:flex;align-items:center;justify-content:center;width:100%;min-height:1.8rem;padding:.05rem .2rem;border-radius:6px;font-size:.72rem;line-height:1.1;text-align:center;white-space:normal;overflow:hidden}
table.data.cards.m-open>thead>tr.col-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .5rem}
table.data.cards.m-open>thead>tr.col-filters>*[data-mlab]{min-width:0;width:auto}
table.data.cards.m-open>thead>tr.col-filters>.card-actions{grid-column:1/-1}
table.data.cards.m-open>thead>tr.col-filters>*[data-mlab]::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:640px){table.data.cards.m-open>thead>tr>*{grid-column:auto;grid-row:auto;width:auto!important;max-width:none}
table.data.cards.m-open>thead>tr.col-filters>.card-actions{grid-column:1/-1;order:9}}
@media(max-width:640px){table.data.cards.m-open>thead>tr.col-filters>*:last-child:has(button){grid-column:1/-1}table.data.cards.m-open>thead>tr.col-filters>*:last-child button{width:100%;min-height:2rem}}
/* the Full view on a phone: the table keeps its own sortable header; the filter row is folded behind the
   same button and opens as a panel held at the left edge of the sideways-scrolling box */
@media(max-width:640px){table.data.cards.full>thead>tr.col-filters{display:none}
div.m-panel{display:none;margin:0 0 .5rem;padding:.4rem .5rem;border:1px solid var(--bs);border-radius:var(--r);background:var(--su)}
div.m-panel.m-open{display:block}
div.m-panel .m-sorts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 .45rem}
div.m-panel .m-sorts a.sort{display:flex;align-items:center;justify-content:center;min-height:1.8rem;padding:.05rem .2rem;border:1px solid var(--bs);border-radius:6px;background:var(--bg);font-size:.72rem;line-height:1.1;text-align:center;overflow:hidden;text-decoration:none;color:var(--text)}
div.m-panel .m-sorts a.sort.on{border-color:var(--accent);color:var(--accent)}
div.m-panel .m-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .5rem}
div.m-panel .m-fields>div{min-width:0}div.m-panel .m-fields>div.m-wide{grid-column:1/-1}
div.m-panel .m-fields>div>span.m-lab{display:block;font-size:.72rem;color:var(--tm);margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
div.m-panel :is(input:not([type=checkbox]),select){width:100%;max-width:none;min-height:1.8rem;padding:.1rem .4rem;font-size:.8rem}
div.m-panel .cf,div.m-panel .work,div.m-panel details.fdrop{display:block;width:100%}
div.m-panel button{width:100%;min-height:2rem}}
@media(max-width:640px){div.m-panel details.fdrop>summary{display:flex;align-items:center;min-height:1.8rem;padding:0 .45rem;border:1px solid var(--bs);border-radius:var(--r);background:var(--bg);font-size:.8rem;width:100%;box-sizing:border-box}}
@media(max-width:640px){div.m-panel button.col-all{display:none}}
/* the site mark in the header (Art 2026-10-10) */
header.site .brand{gap:.4rem}header.site .brand img{display:block;width:22px;height:22px;border-radius:5px;flex:none}
@media(max-width:640px){header.site .brand img{width:20px;height:20px}}
/* the home hero (Art 2026-10-10): the slogan, the line about free listing, then the live numbers */
section.hero>h1{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.12;letter-spacing:-.01em;margin:.6rem 0 .35rem;max-width:32ch}
section.hero>p.hero-sub{font-size:1.15rem;line-height:1.4;margin:0 0 .5rem;max-width:44rem}
section.hero>p.summary{font-size:.95rem;color:var(--tm);margin:0 0 .4rem}
.home-go a.button.join{background:#1f9a4d;border-color:#1b7f40;color:#fff}.home-go a.button.join:hover{background:#1b8a44}
@media(max-width:640px){section.hero>h1{font-size:1.45rem;margin:.4rem 0 .25rem}section.hero>p.hero-sub{font-size:.95rem;margin:0 0 .3rem}section.hero>p.summary{font-size:.8rem}}
section.hero>h1 .nw{white-space:nowrap}
/* a new provider's path (TASK-0117, web/onboarding_pages.py): the steps, a block per model, the problems */
ol.ob-steps{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:.6rem 0 1rem}
ol.ob-steps li>a,ol.ob-steps li>span{display:inline-block;padding:.25rem .6rem;border:1px solid var(--line,#d0d5dd);border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--tm)}ol.ob-steps li.current>a,ol.ob-steps li.current>span{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:600}ol.ob-steps li.done>a{color:var(--ok-text);border-color:var(--ok-text)}ol.ob-steps li.todo>span{opacity:.6}p.ob-nav{display:flex;gap:.6rem;margin:.8rem 0 0}p.ob-nav .ob-next[aria-disabled]{opacity:.45;cursor:not-allowed}.ob-group{display:contents}.ob-group[hidden]{display:none}fieldset.ob-model p.ob-remove-p{grid-column:1/-1;margin:.2rem 0 0}fieldset.ob-model button.ob-remove,form.ob-models button.ob-add{min-height:1.9rem;padding:0 .6rem;font-size:var(--sm);font-weight:400;background:#0000;color:var(--link);border-color:var(--bs)}
section.ob-step{border-top:1px solid var(--line,#d0d5dd);padding-top:.4rem;margin-top:1.2rem}
fieldset.ob-model{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.4rem .8rem;border:1px solid var(--line,#d0d5dd);border-radius:8px;padding:.6rem .8rem;margin:.6rem 0}
fieldset.ob-model legend{font-weight:600;padding:0 .3rem}
fieldset.ob-model label{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem}
fieldset.ob-model label.check{flex-direction:row;align-items:center;gap:.35rem}
fieldset.ob-model .ob-sub,fieldset.ob-model .ob-mods{grid-column:1/-1;margin:.2rem 0 0}
.ob-mods{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center}
.ob-mods label{display:inline-flex!important;flex-direction:row!important}
.ob-row{display:flex;flex-wrap:wrap;gap:.8rem}
.ob-problems{border-left:4px solid #d93025;background:rgba(217,48,37,.07);padding:.4rem .8rem;margin:.6rem 0;border-radius:4px}
.ob-step p.ok,.its-me+p.ok{color:#137333;font-weight:600}
p.its-me{margin:.5rem 0}
@media(max-width:640px){fieldset.ob-model{grid-template-columns:1fr 1fr}fieldset.ob-model label:first-of-type{grid-column:1/-1}}
/* the header search (Art 2026-10-11): a field after the site name; suggestions under it */
form.hsearch{position:relative;margin:0 .6rem 0 .4rem;flex:0 1 15rem;min-width:9rem}
form.hsearch input[type=search]{width:100%;padding:.3rem .6rem;font-size:.9rem;border:1px solid var(--line,#d0d5dd);border-radius:999px;background:var(--bg,#fff);color:inherit}
form.hsearch .hs-list{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);min-width:16rem;list-style:none;margin:0;padding:.25rem;background:var(--bg,#fff);border:1px solid var(--line,#d0d5dd);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
form.hsearch .hs-list a{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem .5rem;border-radius:6px;text-decoration:none;color:inherit;font-size:.9rem}
form.hsearch .hs-list a small{color:var(--muted,#5b6270)}
form.hsearch .hs-list a.on,form.hsearch .hs-list a:hover{background:rgba(11,87,208,.1)}
form.hsearch .hs-list li:last-child a{border-top:1px solid var(--line,#d0d5dd);margin-top:.2rem;color:var(--link,#0b57d0)}
@media(max-width:640px){form.hsearch{order:3;flex:1 1 100%;margin:.3rem 0}}
nav.sections a.auth-reg{min-height:1.75rem;padding:0 .55rem;margin-left:.2rem;font-size:.8rem;font-weight:700;color:var(--on-accent);background:var(--accent);border:1px solid var(--accent-hover);border-radius:var(--r)}nav.sections a.auth-reg:hover{background:var(--accent-hover)}nav.sections a.auth-reg[hidden]{display:none}

/* the follow form: "where" as one row of radio buttons (Art 2026-10-16) */
.follow-scope{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;margin:0;padding:.2rem .6rem .4rem;border:1px solid var(--bd);border-radius:var(--r)}.follow-scope legend{font-size:var(--sm);padding:0 .2rem}.follow-scope label{display:inline-flex;flex-direction:row;align-items:center;gap:.35rem;white-space:nowrap}
.table-wrap:has(>table.dev-models){overflow-x:auto}table.dev-models td.num{white-space:nowrap}@media (max-width:600px){table.dev-models .dev-type{display:none}}

/* the card's API fields (base, endpoint, model id) fit a phone: a long value scrolls inside its own box (tests 2026-10-25: /ru/c/offer:... 67 px sideways at 390 px) */
table.api-fields{table-layout:fixed;width:100%}table.api-fields th{width:7rem}table.api-fields td{min-width:0;overflow:hidden}table.api-fields td .code,table.api-fields td pre{max-width:100%}
/* the legal pages' tables (privacy: data / when / why / basis / how long) on a phone: a column keeps a readable width and the table scrolls inside itself, instead of words broken letter by letter and the last column cut off (tests 2026-10-25) */
@media(max-width:640px){table.legal{display:block;overflow-x:auto;max-width:100%}table.legal th,table.legal td{min-width:7.5rem}}
