/* Form popouts in the site's own style (pitch/snippets/picker.css, 2026-10-31).
   Pairs with picker.js. Structure only: the look comes from the site.
   - The closed control (.pk__btn) is the site's field: add .pk__btn to the site.css rule
     that styles its inputs and selects, and to that rule's :focus and invalid states.
   - The popouts take the --pk-* tokens, set in site.css :root. Every one falls back to the
     system's own colours, so an unthemed site still works (and check.mjs warns about it).
     Surface:  --pk-bg, --pk-ink, --pk-muted, --pk-line, --pk-radius, --pk-shadow
     Type:     --pk-font, --pk-size; --pk-label-font/-size/-weight/-tracking/-case (the
               month and weekday headings: the site's small labels)
     Rows:     --pk-row-h (min 44px), --pk-hover-bg/-ink (pointer and keyboard)
     Chosen:   --pk-sel-bg/-ink (the chosen day: the site's primary button),
               --pk-accent (the chosen option's tick, today's ring), --pk-focus (outline)
     Empty:    --pk-placeholder (the closed control's "Choose one" text)
     Motion:   --pk-speed, --pk-ease
   Contrast: no colours here; the --pk-* pairs go in site.css's contrast table.
   Load after site.css. */

.pk { position: relative; }
.pk.is-open { z-index: 30; }
.pk__native {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}

/* The closed control. Box, border, colours and type come from the site's field rule. */
.pk__btn {
  position: relative; display: flex; align-items: center; width: 100%;
  text-align: start; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pk__val { flex: 1; min-width: 0; padding-inline-end: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk__btn[data-empty] .pk__val { color: var(--pk-placeholder, inherit); }
.pk__btn::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform var(--pk-speed, .16s) var(--pk-ease, ease-out), margin var(--pk-speed, .16s) var(--pk-ease, ease-out);
}
.pk.is-open .pk__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.pk__btn[aria-disabled="true"], .pk__btn:disabled { cursor: default; opacity: .55; }

/* The popout. */
.pk__pop {
  position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0;
  background: var(--pk-bg, Canvas); color: var(--pk-ink, CanvasText);
  border: 1px solid var(--pk-line, GrayText); border-radius: var(--pk-radius, 6px);
  box-shadow: var(--pk-shadow, 0 12px 28px rgb(0 0 0 / .18));
  font-family: var(--pk-font, inherit); font-size: var(--pk-size, 16px); line-height: 1.35;
  font-weight: 400; letter-spacing: normal; text-transform: none; text-align: start;
  animation: pk-in var(--pk-speed, .16s) var(--pk-ease, ease-out);
}
.pk__pop[hidden] { display: none; }
.pk__pop--up { top: auto; bottom: 100%; margin: 0 0 6px; animation-name: pk-in-up; }
@keyframes pk-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pk-in-up { from { opacity: 0; transform: translateY(4px); } }

/* Option list. */
.pk__list { max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; list-style: none; }
.pk__opt {
  position: relative; display: flex; align-items: center; min-height: var(--pk-row-h, 44px);
  margin: 0; padding: 8px 44px 8px 14px; cursor: pointer;
}
.pk__opt.is-active { background: var(--pk-hover-bg, Highlight); color: var(--pk-hover-ink, HighlightText); }
.pk__opt--empty { color: var(--pk-muted, GrayText); }
.pk__opt[aria-selected="true"] { font-weight: 700; }
.pk__opt[aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%;
  width: 6px; height: 11px; margin-top: -8px;
  border: solid var(--pk-accent, currentColor); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pk__opt[aria-disabled="true"] { color: var(--pk-muted, GrayText); cursor: default; }
.pk__opt--empty.is-active { color: var(--pk-muted, GrayText); }
.pk__opt--empty[aria-selected="true"] { font-weight: 400; }
.pk__opt--empty[aria-selected="true"]::after { content: none; }
.pk__group {
  padding: 12px 14px 4px; color: var(--pk-muted, GrayText);
  font: var(--pk-label-weight, 700) var(--pk-label-size, 12px)/1.3 var(--pk-label-font, inherit);
  letter-spacing: var(--pk-label-tracking, .08em); text-transform: var(--pk-label-case, uppercase);
}

/* Calendar. */
.pk__cal { right: auto; width: calc(7 * 44px + 18px); padding: 8px 8px 10px; }
.pk__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk__month {
  margin: 0; text-align: center; flex: 1;
  font: var(--pk-label-weight, 700) var(--pk-label-size, 12px)/1.3 var(--pk-label-font, inherit);
  letter-spacing: var(--pk-label-tracking, .08em); text-transform: var(--pk-label-case, uppercase);
}
.pk__nav, .pk__day, .pk__clear {
  margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  border-radius: var(--pk-radius, 6px); -webkit-tap-highlight-color: transparent;
}
.pk__nav { position: relative; width: 44px; height: 44px; flex: none; }
.pk__nav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -2px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg);
}
.pk__nav--next::before { margin-left: -6px; transform: rotate(-135deg); }
.pk__nav:disabled { opacity: .3; cursor: default; }
.pk__grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 4px; }
.pk__grid th {
  padding: 4px 0 6px; color: var(--pk-muted, GrayText); text-align: center;
  font: var(--pk-label-weight, 700) var(--pk-label-size, 12px)/1.3 var(--pk-label-font, inherit);
  letter-spacing: var(--pk-label-tracking, .08em); text-transform: var(--pk-label-case, uppercase);
}
.pk__grid td { padding: 0; text-align: center; }
.pk__day {
  display: block; width: 100%; height: 44px; padding: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.pk__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--pk-accent, currentColor); }
.pk__day.is-chosen { background: var(--pk-sel-bg, Highlight); color: var(--pk-sel-ink, HighlightText); font-weight: 700; box-shadow: none; }
.pk__day[aria-disabled="true"] { color: var(--pk-muted, GrayText); opacity: .5; cursor: default; text-decoration: line-through; }
.pk__foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.pk__foot:has(> [hidden]:only-child) { display: none; }
.pk__clear[hidden] { display: none; }
.pk__clear { min-height: 44px; padding: 0 12px; text-decoration: underline; text-underline-offset: 3px; }
.pk__nav:focus-visible, .pk__day:focus-visible, .pk__clear:focus-visible { outline: var(--pk-focus, 2px solid currentColor); outline-offset: -2px; }
@media (hover: hover) {
  .pk__nav:not(:disabled):hover, .pk__day:not(.is-chosen):not([aria-disabled="true"]):hover, .pk__clear:hover {
    background: var(--pk-hover-bg, Highlight); color: var(--pk-hover-ink, HighlightText);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk__pop { animation: none; }
  .pk__btn::after { transition: none; }
}
@media print { .pk__pop { display: none; } }