/* The DATE control. Under html[data-sk-js] the native picker indicator hides
 * and .sk-date-btn opens the engine-built calendar; scripts-off the button
 * never shows and the native picker stays. */

/* ── THE DATE CALENDAR — this part's script builds the whole subtree; no
 * template emits any of it. */
.sk-date-btn {
  display: none;
}
html[data-sk-js] .sk-date-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.45rem;
  top: 50%;
  translate: 0 -50%;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  /* The FIELD fill, not transparent: engines with no indicator seam
   * (Firefox) keep their native icon in this corner — the button sits
   * over it and must cover, never blend. */
  background: var(--sk-field);
  color: var(--sk-ink-muted);
  border-radius: var(--sk-control-radius);
  cursor: pointer;
}
html[data-sk-js] .sk-date-btn:hover {
  color: var(--sk-ink);
  background: var(--sk-surface);
}
.sk-date-cal {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--kit-space-1));
  right: 0;
  min-width: 17rem;
  padding: calc(var(--sk-panel-pad) * 0.75);
  background: var(--sk-bg);
  color: var(--sk-ink);
  border: var(--sk-border-width-min) solid var(--sk-stroke);
  border-radius: var(--sk-panel-radius);
  box-shadow: var(--sk-panel-shadow);
}
.sk-date-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kit-space-2);
  margin-bottom: var(--kit-space-2);
}
.sk-date-cal-label {
  font-size: var(--sk-text-detail-size);
  font-weight: 600;
}
.sk-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-ink-muted);
  border-radius: var(--sk-control-radius);
  cursor: pointer;
}
.sk-date-nav:hover {
  color: var(--sk-ink);
  background: var(--sk-surface);
}
/* The month grid packs its days at a 2px gap: at the default offset a day's
 * ring overpaints its neighbour, so the picker's controls share the tighter
 * one. */
.sk-date-btn,
.sk-date-nav,
.sk-date-day {
  --sk-focus-ring-offset: 1px;
}
.sk-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sk-date-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-detail);
  color: var(--sk-ink-muted);
}
.sk-date-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--sk-text-detail-size);
  color: var(--sk-ink);
  border-radius: var(--sk-control-radius);
  cursor: pointer;
}
.sk-date-day:hover {
  background: var(--sk-surface);
}
.sk-date-day[data-today="true"] {
  box-shadow: inset 0 0 0 var(--sk-border-width-min) var(--sk-stroke);
}
/* Selected-day ink is --sk-btn-ink, not --sk-bg, as on the badge chips: the
 * overlay ink remaps move the accent fill but not --sk-bg. */
.sk-date-day[data-selected="true"] {
  background: var(--sk-accent);
  color: var(--sk-btn-ink);
  font-weight: 600;
}
.sk-date-day:disabled {
  color: var(--sk-ink-muted);
  opacity: 0.45;
  cursor: default;
  background: none;
}
.sk-date-wrap {
  position: relative;
  display: block;
}
html[data-sk-js] .sk-date-input {
  padding-right: 2.6rem;
}
html[data-sk-js] .sk-date-input:focus-visible {
  padding: calc(0.7rem - var(--sk-focus-grow)) calc(2.6rem - var(--sk-focus-grow))
    calc(0.7rem - var(--sk-focus-grow)) calc(0.9rem - var(--sk-focus-grow));
}
html[data-sk-js] .sk-date-input::-webkit-calendar-picker-indicator {
  display: none;
}