/* ============================================================
   picker.css — the look of picker.js, shared by the app and the order
   form. Every colour is a --dp-* token, defined in each page's own :root
   (dark in styles.css, light in order/index.html). Loaded AFTER the
   page's stylesheet, so the box's icon wins over a `background`
   shorthand on `.field input`.
   ============================================================ */

/* The box: a read-only text input that looks like the other fields,
   with a calendar or clock at the right. */
input.dp-in{cursor:pointer;caret-color:transparent;padding-right:40px}
/* !important because the pages restyle fields with a `background`
   shorthand on :focus / :hover (`.field input:focus` outranks a class),
   which would wipe the icon the moment the box is clicked. */
input.dp-in{
  background-repeat:no-repeat!important;background-position:right 13px center!important;
  background-size:16px 16px!important;
}
input.dp-date{background-image:var(--dp-icon-date)!important}
input.dp-time{background-image:var(--dp-icon-time)!important}
input.dp-in[aria-expanded=true]{border-color:var(--dp-accent-text)}
input.dp-in:disabled{cursor:default;opacity:.6}

/* The popover. The popover API's own defaults (centred, inset 0) are
   undone so picker.js can place it under the box. */
.dp-pop{
  position:fixed;inset:auto;margin:0;z-index:1000;
  width:300px;max-width:calc(100vw - 16px);padding:14px;
  border:1px solid var(--dp-line);border-radius:18px;
  background:var(--dp-bg);color:var(--dp-ink);box-shadow:var(--dp-shadow);
  font-family:var(--sans,system-ui);font-size:13px;line-height:1.2;
  opacity:1;transform:none;
  transition:opacity .14s ease,transform .14s ease,overlay .14s allow-discrete,display .14s allow-discrete;
}
@starting-style{ .dp-pop:popover-open{opacity:0;transform:translateY(-4px)} }

.dp-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.dp-head b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dp-nav{
  width:32px;height:32px;border:0;border-radius:999px;background:none;
  color:var(--dp-ink-2);display:grid;place-items:center;cursor:pointer;padding:0;
}
.dp-nav:hover:not(:disabled){background:var(--dp-hover);color:var(--dp-ink)}
.dp-nav:disabled{opacity:.3;cursor:default}

.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:11px;font-weight:500;color:var(--dp-ink-3);padding:4px 0 6px}
.dp-day{
  aspect-ratio:1;min-width:0;border:0;border-radius:999px;background:none;padding:0;
  color:var(--dp-ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background .1s;
}
.dp-day:hover:not(:disabled){background:var(--dp-hover)}
.dp-day.is-today{color:var(--dp-accent-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--dp-line)}
.dp-day.is-sel,.dp-day.is-sel:hover{background:var(--dp-accent);color:var(--dp-accent-ink);font-weight:600;box-shadow:none}
.dp-day:disabled{color:var(--dp-ink-3);opacity:.4;cursor:default}

.dp-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--dp-line-soft);
}
.dp-link{
  border:0;background:none;padding:6px 10px;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:600;color:var(--dp-accent-text);
}
.dp-link:hover{background:var(--dp-hover)}
.dp-quiet{color:var(--dp-ink-2);font-weight:500}

/* The time list. */
.dp-pop.is-time{padding:6px}
.dp-pop.is-time .dp-foot{margin:6px 0 0;padding:6px 0 0}
.dp-times{
  max-height:288px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;
}
.dp-time{
  display:flex;align-items:center;justify-content:space-between;flex:none;
  border:0;border-radius:12px;background:none;padding:9px 12px;text-align:left;
  color:var(--dp-ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;
}
.dp-time:hover{background:var(--dp-hover)}
.dp-time.is-sel,.dp-time.is-sel:hover{background:var(--dp-accent);color:var(--dp-accent-ink);font-weight:600}

.dp-day:focus-visible,.dp-time:focus-visible,.dp-nav:focus-visible,.dp-link:focus-visible{
  outline:2px solid var(--dp-accent-text);outline-offset:1px;
}

/* A phone: a sheet along the bottom, over a dimmed page. */
.dp-pop.dp-sheet{
  left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
  border-radius:22px 22px 0 0;border-bottom:0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
}
@starting-style{ .dp-pop.dp-sheet:popover-open{transform:translateY(24px)} }
.dp-pop.dp-sheet::backdrop{background:var(--dp-scrim)}
.dp-pop.dp-sheet .dp-grid{gap:4px}
/* A wide phone held sideways still gets a calendar, not a billboard. */
.dp-pop.dp-sheet > *{max-width:420px;margin-left:auto;margin-right:auto}
.dp-pop.dp-sheet .dp-times{max-height:50vh}
.dp-pop.dp-sheet.is-time{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}