/* R8 unit converter only: retain DOM order and all functional JS contracts. */
.p0-page #unit-converter .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.p0-page #unit-converter #unit-swap,.p0-page #unit-converter button[type=submit]{display:inline-block;width:calc(50% - 4px);min-height:44px;margin:12px 0 0;padding:10px 6px;font-size:14px;vertical-align:top}
.p0-page #unit-converter button[type=submit]{margin-left:8px}
@media(max-width:700px){
 body:has(#unit-converter) .site-header{padding:8px 12px!important}
 body:has(#unit-converter) .p0-page{padding:12px!important}
 .p0-page:has(#unit-converter) .hero h1{font-size:26px!important;margin:4px 0 6px!important}
 .p0-page:has(#unit-converter) .hero .direct-answer{font-size:14px!important;line-height:1.45!important;margin:0 0 4px}
 .p0-page:has(#unit-converter) .hero{margin-bottom:8px!important}
 .p0-page:has(#unit-converter) .hero>a{font-size:13px}
 .p0-page:has(#unit-converter) .layout{margin-top:8px}
 .p0-page #unit-converter{padding:12px!important}
 .p0-page #unit-converter h2{margin:0 0 8px;font-size:17px}
 .p0-page #unit-converter .fields{gap:8px}
 .p0-page #unit-converter .fields label{font-size:14px;line-height:1.4}
 .p0-page #unit-converter .fields input,.p0-page #unit-converter .fields select{margin-top:4px;min-height:44px;height:44px;padding:8px;font-size:16px;min-width:0}
 .p0-page #unit-converter #unit-help{line-height:1.45;margin:10px 0}
 .p0-page #unit-converter output{font-size:20px;min-height:44px;padding:8px}
}

/* R9: full names in both native unit selectors, without changing options or JS. */
@media(max-width:1000px){
 .p0-page #unit-converter .fields label:has(select[name=from]),
 .p0-page #unit-converter .fields label:has(select[name=to]){grid-column:1 / -1}
}

/* U1U3: explicit page hook and structural selectors also work without :has(). */
@media(max-width:1000px){
 .unit-page #unit-converter .fields>label:nth-child(3),
 .unit-page #unit-converter .fields>label:nth-child(4){grid-column:1 / -1}
}
@media(max-width:700px){
 .unit-page .site-header{padding:8px 12px!important}
 .unit-page .p0-page{padding:12px!important}
 .unit-page .p0-page .hero h1{font-size:26px!important;margin:4px 0 6px!important}
 .unit-page .p0-page .hero{margin-bottom:6px!important}
 .unit-page .p0-page .hero>a{font-size:13px}
 .unit-page .p0-page .layout{margin-top:6px}
 .unit-page #unit-converter .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .unit-page #unit-converter #unit-swap,.unit-page #unit-converter button[type=submit]{margin-top:8px;margin-bottom:4px}
}