/* Branded controls use the same Golos, navy, blue and curved shapes as the site. */
.picker {
  position:relative;
  min-width:0;
}
.picker-trigger {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--field-border);
  border-radius:12px;
  background:var(--white);
  cursor:pointer;
  font-weight:400;
  font-size:16px;
  line-height:1.25;
}
.picker-trigger::-webkit-details-marker { display:none; }
.picker-trigger::marker { content:''; }
.picker-value { min-width:0; overflow-wrap:anywhere; }
.picker-trigger>.ui-icon { width:20px; height:20px; flex:none; }
.picker-panel {
  z-index:40;
  padding:8px;
  border:1px solid var(--field-border);
  border-radius:16px;
  background:var(--white);
  box-shadow:0 12px 32px rgba(33,54,76,.12);
}
.select-options {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  max-height:min(24em,55dvh);
  overflow-y:auto;
}
.picker-upward>.select-options { top:auto; bottom:calc(100% + 8px); }
.select-option {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:46px;
  padding:12px;
  border:0;
  border-radius:9px;
  text-align:left;
  font-weight:400;
  line-height:1.25;
}
.select-option>span { min-width:0; overflow-wrap:anywhere; }
.select-option[aria-pressed=true] { background:var(--pale-blue); }
.select-option+.select-option { margin-top:2px; }
.calendar-panel {
  position:fixed;
  top:clamp(12px,8vh,72px);
  left:8px;
  right:8px;
  width:calc(100% - 16px);
  max-width:370px;
  max-height:calc(100dvh - 100px);
  margin-inline:auto;
  padding:12px;
  overflow-y:auto;
}
.calendar-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.calendar-month { min-width:0; text-align:center; font-weight:400; line-height:1.3; }
.calendar-month-step {
  width:44px;
  min-height:44px;
  flex:none;
  padding:10px;
  border:0;
  background:var(--paper);
}
.calendar-previous .ui-icon { rotate:90deg; }
.calendar-next .ui-icon { rotate:-90deg; }
.calendar-weekdays,.calendar-days {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;
}
.calendar-weekdays { margin-bottom:6px; font-size:13px; color:var(--muted); text-align:center; }
.calendar-day {
  min-width:0;
  min-height:44px;
  padding:6px 0;
  border:0;
  border-radius:9px;
  line-height:1.25;
  font-weight:400;
}
.calendar-day[aria-current=date] { background:var(--paper); }
.calendar-day[aria-pressed=true] { background:var(--action-blue); }
.calendar-entry { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.calendar-entry label,.calendar-time>span { font-size:14px; color:var(--muted); font-weight:400; }
.calendar-entry>input { min-height:44px; }
.calendar-time { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; }
.calendar-clock { display:flex; align-items:center; gap:6px; }
.calendar-clock input { width:3em; min-height:44px; padding:10px 6px; text-align:center; }
.calendar-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.calendar-actions button { min-height:44px; padding:10px 14px; font-size:14px; }
@media(max-width:650px) {
  .calendar-panel { padding:10px 6px; }
}
@media(forced-colors:active) {
  .select-option[aria-pressed=true],.calendar-day[aria-pressed=true] { outline:2px solid Highlight; }
}

.control-error { margin:0; color:var(--navy); font-size:14px; line-height:1.4; }
.picker-trigger[aria-invalid=true] { border-width:2px; padding:11px 13px; }