/* Részletes Google-sebességjelentés (lib/sebesseg.php, 10-24): eszközlap és riport-fejezet. Színek a Google sávjai szerint. */
.seb{--s-ok:var(--ok);--s-mid:var(--amber);--s-bad:var(--crit);--s-na:var(--dim);display:grid;gap:18px}
.seb-p-mob,.seb-p-desk{container-type:inline-size}
.seb .seb-ok{color:var(--s-ok)}.seb .seb-mid{color:var(--s-mid)}.seb .seb-bad{color:var(--s-bad)}.seb .seb-na{color:var(--s-na)}
.seb-fej{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:18px clamp(16px,3vw,28px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.seb .seb-host{margin:0;font:700 1.15rem var(--f-mono);color:var(--white);overflow-wrap:anywhere}
.seb-fej .when{margin:4px 0 0}
.seb-fulek{display:flex;gap:0;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.seb-fulek label{position:relative;cursor:pointer}
.seb-fulek input{position:absolute;opacity:0;width:1px;height:1px}
.seb-fulek span{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;font-weight:600;color:var(--dim)}
.seb-fulek b{font:800 1rem var(--f-mono)}
.seb-fulek label+label span{border-left:1px solid var(--line2)}
.seb-fulek input:checked+span{background:var(--tile);color:var(--white);box-shadow:inset 0 -3px 0 var(--amber)}
.seb-fulek input:focus-visible+span{outline:2px solid var(--amber);outline-offset:-2px}
.seb-p-desk{display:none}
.seb:has(input[value=desk]:checked) .seb-p-desk{display:block}
.seb:has(input[value=desk]:checked) .seb-p-mob{display:none}
.seb-panel{padding:clamp(16px,3vw,28px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.seb-panel h3{margin:32px 0 6px;font-size:1.15rem;color:var(--white)}
.seb .seb-mag{margin:0 0 12px;color:var(--dim);font-size:.92rem;max-width:72ch}
.seb-korok{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.seb-kor{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.seb-gy{position:relative;width:min(100%,104px);aspect-ratio:1}
.seb-kor svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.seb-kor circle{fill:none;stroke-width:3.2}
.seb-alap{stroke:var(--line2)}
.seb-iv{stroke:currentColor;stroke-linecap:butt}
.seb-kor b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 clamp(1.3rem,3.4vw,2rem)/1 var(--f-disp)}
.seb-kor span{font-size:.86rem;font-weight:600;color:var(--fg)}
.seb .seb-skala{margin:14px 0 0;text-align:center;font:.74rem var(--f-mono);color:var(--dim);max-width:none}
.seb-labor{display:grid;gap:20px;align-items:start}
.seb-m{list-style:none;margin:0;padding:0!important;display:grid;gap:0}
.seb-m li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-top:1px dashed var(--line2);max-width:none}
.seb-m i,.seb-tipp i{width:10px;height:10px;background:currentColor;border-radius:2px;align-self:center}
.seb-m span{color:var(--white);font-weight:600}
.seb-m small{display:block;color:var(--dim);font-weight:400;font-size:.84rem;margin-top:2px}
.seb-m b{font:800 1.15rem var(--f-mono);white-space:nowrap}
.seb-kep{margin:0;justify-self:center;text-align:center}
.seb-kep img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--line2);border-radius:var(--r)}
.seb-kep figcaption{margin-top:8px;font:.74rem var(--f-mono);color:var(--dim)}
.seb-f{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.seb-f li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:baseline;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);max-width:none}
.seb-f span{color:var(--white);font-weight:600;font-size:.92rem}
.seb-f b{font:800 1.05rem var(--f-mono)}
.seb-sav{grid-column:1/-1;width:100%;height:6px;display:block}
.seb-sav .seb-ok{fill:var(--s-ok)}.seb-sav .seb-mid{fill:var(--s-mid)}.seb-sav .seb-bad{fill:var(--s-bad)}
.seb-f small{grid-column:1/-1;font:.72rem var(--f-mono);color:var(--dim)}
.seb-tipp{list-style:none;margin:0;padding:0!important;counter-reset:t}
.seb-tipp li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px dashed var(--line2);max-width:none}
.seb-tipp i{margin-top:6px;align-self:start}
.seb-tipp b{color:var(--white)}
.seb-tipp p{margin:4px 0 0;color:var(--dim);font-size:.9rem;max-width:72ch}
.seb .seb-nyer{font:.78rem var(--f-mono);color:var(--fg)}
.seb-hibak{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.seb-hibak section{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.seb-hibak h4{margin:0 0 8px;display:flex;justify-content:space-between;gap:10px;font-size:.95rem;color:var(--white)}
.seb-hibak h4 span{font:800 1rem var(--f-mono)}
.seb-hibak ul{margin:0;padding-left:18px}
.seb-hibak li{font-size:.88rem;color:var(--fg);margin:3px 0;max-width:none}
.seb .seb-hibak p{margin:0}
.seb .seb-g{margin:0;font-size:.9rem}
.seb .mailcta{margin-top:0}
@container (min-width:760px){
  .seb-labor{grid-template-columns:minmax(0,1fr) auto;gap:32px}
}
@container (max-width:480px){
  .seb-korok{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
}