.date-picker, .time-picker { margin:8px 0 12px; }
.picker-month-head { display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:380px; margin:6px auto; }
.picker-nav { min-width:40px; }
.picker-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; max-width:380px; margin:auto; touch-action:none; user-select:none; }
.picker-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; max-width:380px; margin:auto; text-align:center; color:var(--dim); font-size:11px; }
.picker-weekday { padding:4px 0; }
.picker-day, .picker-day-empty { min-width:0; min-height:38px; display:grid; place-items:center; padding:3px; }
.picker-day { font-size:13px; }
.picker-day[aria-pressed="true"] { background:var(--yes); border-color:var(--yes-line); outline:1px solid var(--yes-line); font-weight:bold; }
.picker-day.today { border-width:2px; border-color:var(--focus); }
.picker-day:disabled { opacity:.4; cursor:default; }
.picker-help { min-height:1.3em; color:var(--dim); font-size:11px; margin:6px 0; }
.picker-time-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:8px 0; }
.picker-range-label { font-size:15px; font-variant-numeric:tabular-nums; }
.picker-duration { color:var(--dim); font-size:12px; }
.picker-timeline-foot { display:flex; justify-content:space-between; gap:12px; color:var(--dim); font-size:11px; margin:5px 2px; }
.picker-midnight { color:var(--subject); font-weight:bold; }
.picker-time-scroll { padding:30px 16px 52px; border:1px solid var(--post-line); background:var(--post); }
.picker-time-track { position:relative; height:16px; border:1px solid var(--post-line); border-radius:8px; background:var(--bg); touch-action:none; cursor:pointer; user-select:none; }
.picker-time-nextday { position:absolute; top:0; bottom:0; left:50%; right:0; border-radius:0 7px 7px 0; background:var(--post-line); opacity:.5; pointer-events:none; }
.picker-time-selection { position:absolute; top:-1px; height:16px; min-width:3px; background:var(--yes); border:1px solid var(--yes-line); border-radius:7px; pointer-events:none; }
.picker-time-ticks { position:absolute; inset:0; pointer-events:none; }
.picker-time-tick { position:absolute; top:24px; transform:translateX(-50%); color:var(--dim); font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.picker-time-tick::before { content:""; position:absolute; left:50%; top:-24px; height:19px; border-left:1px solid var(--post-line); }
.picker-time-midnight { position:absolute; left:50%; top:-6px; height:28px; border-left:2px dashed var(--subject); pointer-events:none; }
.picker-time-midnight-label { position:absolute; top:-14px; left:4px; color:var(--subject); font-size:10px; font-weight:bold; white-space:nowrap; }
.picker-time-handle { position:absolute; top:50%; z-index:2; transform:translate(-50%,-50%); width:14px; height:26px; min-height:0; padding:0; border-radius:4px; touch-action:none; box-shadow:0 1px 3px #0005; }
.picker-time-handle.start { background:var(--yes); border-color:var(--yes-line); }
.picker-time-handle.end { background:var(--maybe); border-color:var(--maybe-line); }
.picker-time-handle:focus-visible { z-index:3; }
.picker-time-bubble { position:absolute; z-index:3; transform:translateX(-50%); padding:2px 5px; border:1px solid; border-radius:4px; font-size:11px; font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.picker-time-bubble.start { bottom:22px; background:var(--yes); border-color:var(--yes-line); }
.picker-time-bubble.end { top:42px; background:var(--maybe); border-color:var(--maybe-line); }
@media (max-width:600px) { .picker-day,.picker-day-empty { min-height:42px; } .picker-time-handle { width:18px; height:32px; } }