.picker-field { --picker-accent: #2563eb; --picker-muted: #64748b; position: relative; min-width: 0; }
.picker-input-group { position: relative; flex: 1; min-width: 0; }
.picker-input-group > input:not([type=hidden]) { width: 100%; padding-right: 3rem; min-height: 44px; }
.picker-trigger { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: .5rem; color: var(--picker-muted); cursor: pointer; }
.picker-trigger:hover { color: var(--picker-accent); background: #eff6ff; }
.picker-trigger svg { width: 20px; height: 20px; }
.picker-panel { position: fixed; margin: 0; padding: 1rem; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #e2e8f0; border-radius: 1rem; background: white; color: #0f172a; box-shadow: 0 12px 40px #0f172a26; }
.picker-panel::backdrop { background: #0f172a0a; }
.picker-panel button, .picker-panel select { cursor: pointer; }
.picker-panel button:disabled { cursor: default; opacity: .35; }
.picker-field button:focus-visible, .picker-field select:focus-visible, .picker-field input:focus-visible { outline: 2px solid var(--picker-accent); outline-offset: 2px; }
.picker-title { font-size: .875rem; font-weight: 600; margin: 0 0 1rem; }
.picker-icon-button { width: 32px; height: 32px; border: 1px solid #e2e8f0; border-radius: .5rem; font-size: 1.5rem; line-height: 1; }
.picker-icon-button:hover, .picker-text-button:hover { background: #f1f5f9; }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.calendar-selects { display: flex; gap: .25rem; }
.calendar-selects select { padding: .375rem .25rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; background: #f8fafc; max-width: 112px; }
.calendar-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-row [role=columnheader] { text-align: center; font-size: .75rem; color: var(--picker-muted); padding: .375rem 0; }
.calendar-day { width: 100%; height: 36px; font-size: .875rem; border-radius: .5rem; }
.calendar-day:hover { background: #eff6ff; }
.calendar-day[data-outside=true] { color: #94a3b8; }
.calendar-day[aria-current=date] { box-shadow: inset 0 0 0 1px #bfdbfe; }
.calendar-day[data-selected=true] { color: white; background: var(--picker-accent); }
.picker-footer { border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; padding-top: .75rem; }
.picker-text-button, .picker-primary-button { padding: .5rem .65rem; border-radius: .5rem; font-size: .8125rem; font-weight: 500; }
.picker-text-button { color: var(--picker-muted); }
.picker-primary-button { background: var(--picker-accent); color: white; }
.picker-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.picker-time-inputs { display: flex; gap: .5rem; }
.picker-time-input, .picker-period-select { border: 1px solid #cbd5e1; border-radius: .5rem; padding: .75rem 1rem; font-size: 1.125rem; background: white; }
.picker-period-select { padding: .5rem; }
.clock-heading { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.clock-value { display: flex; align-items: center; gap: .25rem; font-size: 2.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.clock-value button { padding: .25rem .5rem; border-radius: .625rem; }
.clock-value button[aria-pressed=true] { background: #eff6ff; color: var(--picker-accent); }
.clock-periods { display: flex; flex-direction: column; gap: .25rem; }
.clock-periods button { border: 1px solid #e2e8f0; border-radius: .375rem; padding: .25rem .5rem; font-size: .75rem; }
.clock-periods button[aria-pressed=true] { background: var(--picker-accent); color: white; border-color: var(--picker-accent); }
.clock-instruction { text-align: center; font-size: .8125rem; color: var(--picker-muted); margin: .75rem 0; }
.clock-face { position: relative; margin: auto; width: 256px; height: 256px; border-radius: 50%; background: #f1f5f9; touch-action: none; user-select: none; }
.clock-center { position: absolute; left: 124px; top: 124px; width: 8px; height: 8px; border-radius: 50%; background: var(--picker-accent); pointer-events: none; }
.clock-hand { position: absolute; width: 2px; left: 127px; bottom: 128px; transform-origin: bottom center; background: var(--picker-accent); pointer-events: none; }
.clock-number { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; font-size: .875rem; font-variant-numeric: tabular-nums; }
.clock-number:hover { background: #dbeafe; }
.clock-number[aria-pressed=true] { background: var(--picker-accent); color: white; }
.clock-precise { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .8125rem; color: var(--picker-muted); margin: .875rem 0; }
.clock-precise input { width: 64px; padding: .375rem .5rem; border: 1px solid #e2e8f0; border-radius: .375rem; color: #0f172a; }
@media (max-width: 360px) { .picker-panel { padding: .75rem; } }
@media (prefers-reduced-motion: no-preference) { .picker-panel[open] { animation: picker-enter .12s ease-out; } @keyframes picker-enter { from { opacity: 0; } to { opacity: 1; } } }