/* One rounded focus boundary, including the search icon and text. */
#eac-picker .eac-search{border-radius:12px;transition:border-color .15s,box-shadow .15s}
#eac-picker .eac-search:focus-within{border-color:#f5d58b;box-shadow:0 0 0 2px #dbc07e55,inset 0 0 0 1px #e4bd6766}
#eac-picker .eac-search input,#eac-picker .eac-search input:focus,#eac-picker .eac-search input:focus-visible{outline:none;box-shadow:none;border:0;border-radius:0;margin:0;padding:14px 0;background:transparent;flex:1;width:0}
#eac-picker .eac-search svg{flex:0 0 20px;display:block}
/* The complete hour chooser fits the viewport. It has no minutes or free-text field. */
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]){width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden;padding:clamp(14px,2.5dvh,22px);margin:auto;inset:0;border-radius:18px}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) header{padding-bottom:clamp(10px,2dvh,16px)}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) h2{font-size:clamp(26px,4.8dvh,32px);margin-top:10px}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-value{font-size:clamp(30px,7dvh,48px);margin:clamp(8px,2dvh,16px) 0;padding-bottom:clamp(8px,1.5dvh,12px)}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-grid{gap:6px}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-grid button{height:clamp(34px,6dvh,46px);min-height:0;padding:0;font-size:22px;display:flex;align-items:baseline;justify-content:center;align-content:center;flex-wrap:wrap}
#eac-picker .eac-time-grid small{font-size:12px;margin-left:1px;opacity:.8}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-picker-error:empty{display:none}
#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) footer{margin-top:clamp(10px,2dvh,16px);padding-top:clamp(10px,2dvh,16px)}
@media(max-width:359px){#eac-picker .eac-time-grid small{font-size:10px}#eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-grid button{font-size:19px}}
@media(max-height:460px){
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]){width:min(560px,calc(100vw - 20px));padding:12px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) header>span{display:none}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) h2{margin:0 38px 5px 0;font-size:25px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) header{padding-bottom:7px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-value{font-size:30px;margin:6px 0;padding-bottom:6px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-grid{grid-template-columns:repeat(8,1fr);gap:4px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-grid button{height:32px;font-size:19px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) footer{margin-top:8px;padding-top:8px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) footer button{min-height:38px}
}
@media(max-height:360px){
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-time-value{font-size:26px;margin:4px 0;padding-bottom:4px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) footer{margin-top:4px;padding-top:4px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) header p{font-size:13px}
 #eac-picker:is([data-picker-kind=time],[data-picker-kind=demo]) .eac-picker-error{margin-top:4px;font-size:12px;line-height:1.2}
}