/* Oct 9 fixes. Loaded last.
   #187 "colours don't match in other modes": the Supporter appearance switch retints --panel by hue, but dialogs, the
   suggestion dropdown, the search box, the A–Z bar and the nav arrows hard-coded #111722 / #1A2230, so they stayed navy
   while the page changed. One token, --panel-solid, now carries the opaque pop-up colour for every theme and hue
   (app.js sets it with the hue). Native <select> menus get the same colour so the option list matches the page.
   #185 "rounded edges cut off text and pictures": pop-ups with a big radius and no inner inset clipped content at the
   corners. Inset the lists, round the items, and let full-bleed media follow the corner instead of poking out. */
:root{--panel-solid:#FFFFFF}
:root[data-wp-theme="dark"]{--panel-solid:#111722}
:root[data-wp-theme="dark"] dialog,:root[data-wp-theme="dark"] .suggest,:root[data-wp-theme="dark"] .az-bar,
:root[data-wp-theme="dark"] .cmdk-box,:root[data-wp-theme="dark"] .nl-arrow{background:var(--panel-solid)}
select,select.input{background-color:var(--panel-solid);color:var(--text)}
option,optgroup{background-color:var(--panel-solid);color:var(--text)}
select.input{background-color:var(--panel-2)}
:root[data-wp-theme="dark"] select.input{background-color:color-mix(in srgb,var(--panel-solid) 85%,white 0%)}

/* #185 */
.suggest{padding:8px;border-radius:14px}
.suggest>*{border-radius:9px}
.cmdk-box{border-radius:20px}
.cmdk-list{padding:10px}
.cmdk-item{border-radius:11px}
dialog{overflow:clip}
dialog>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
dialog>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
dialog>img:first-child,dialog>picture:first-child>img,dialog .dlg-media>img{display:block;width:100%;height:auto;border-radius:inherit}
.dlg-body{padding:24px 26px}
dialog>h1:first-child,dialog>h2:first-child,dialog>h3:first-child,dialog>p:first-child,dialog>form:first-child>:first-child{padding-top:22px;padding-left:24px;padding-right:24px}
/* cards that clip at the corners: give the words room so the curve never crosses them */
.pcard>.pc-head,.pcard>.pc-name,.pcard>.pc-stats,.pcard>.pc-foot{padding-left:max(14px,2.5%);padding-right:max(14px,2.5%)}
.ghero-card{padding:22px 26px}
.feature,.call{padding-left:22px;padding-right:22px}