.ssp-time-picker {
  position: relative;
  display: grid;
  gap: 0.5rem;
  color: var(--ssp-time-picker-text, #18211f);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
}

.ssp-time-picker [hidden] {
  display: none !important;
}

.ssp-time-picker__label {
  color: var(--ssp-time-picker-label-text, #33413d);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.ssp-time-picker__input {
  block-size: 2.75rem;
  border: 1px solid var(--ssp-time-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  color: #111816;
  font: inherit;
  font-size: 1rem;
  inline-size: 100%;
  outline: none;
  padding-inline: 0.75rem;
}

.ssp-time-picker__input:focus {
  border-color: var(--ssp-time-picker-accent, #11735f);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ssp-time-picker-accent, #11735f) 20%, transparent);
}

.ssp-time-picker__modes {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssp-time-picker__mode,
.ssp-time-picker__time-option {
  border: 1px solid var(--ssp-time-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  background: var(--ssp-time-picker-bg, #fff);
  color: var(--ssp-time-picker-text, #18211f);
  cursor: pointer;
  font: inherit;
  min-inline-size: 0;
}

.ssp-time-picker__mode {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2rem;
}

.ssp-time-picker__mode-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.ssp-time-picker__mode[data-active="true"],
.ssp-time-picker__clock-button[data-selected="true"] {
  border-color: var(--ssp-time-picker-accent, #11735f);
  background: var(--ssp-time-picker-accent-bg, #dff4eb);
  color: var(--ssp-time-picker-accent-text, #0a4f42);
  font-weight: 700;
}

.ssp-time-picker__time-option:disabled {
  background: var(--ssp-time-picker-disabled-bg, #eef2f0);
  color: var(--ssp-time-picker-disabled-text, #8a9692);
  cursor: not-allowed;
  opacity: 0.7;
}

.ssp-time-picker__popover {
  position: absolute;
  inset-block-start: calc(100% + 0.375rem);
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: var(--ssp-time-picker-z-index, 20);
  inline-size: max(100%, var(--ssp-time-picker-popover-min-width, 16rem));
  max-inline-size: var(--ssp-time-picker-popover-max-width, min(94vw, 22rem));
  display: grid;
  gap: 0.625rem;
  border: 1px solid var(--ssp-time-picker-border, #d8e0dc);
  border-radius: var(--ssp-time-picker-radius, 0.5rem);
  background: var(--ssp-time-picker-bg, #fff);
  padding: 0.75rem;
  box-shadow: var(
    --ssp-time-picker-popover-shadow,
    0 12px 24px -12px rgb(10 30 25 / 25%),
    0 2px 8px rgb(10 30 25 / 10%)
  );
  /* Lets the clock face size itself off the popover's own rendered width (cqi below)
     instead of only the page viewport — so it still shrinks to fit when something other
     than screen size narrows the popover (a tight form column, a nested layout, etc.). */
  container-type: inline-size;
  container-name: ssp-time-picker-popover;
}

.ssp-time-picker__popover[data-align="end"] {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ssp-time-picker__panels {
  display: grid;
  gap: 0.625rem;
}

.ssp-time-picker__analog {
  display: grid;
  gap: 0.625rem;
  justify-items: center;
}

.ssp-time-picker__analog-value {
  color: var(--ssp-time-picker-accent-text, #0a4f42);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  min-block-size: 1.5rem;
}

.ssp-time-picker__periods {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: min(100%, 17rem);
}

.ssp-time-picker__period {
  min-block-size: 2rem;
  border: 1px solid var(--ssp-time-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  background: var(--ssp-time-picker-bg, #fff);
  color: var(--ssp-time-picker-text, #18211f);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}

.ssp-time-picker__period[data-active="true"] {
  border-color: var(--ssp-time-picker-accent, #11735f);
  background: var(--ssp-time-picker-accent-bg, #dff4eb);
  color: var(--ssp-time-picker-accent-text, #0a4f42);
  font-weight: 700;
}

.ssp-time-picker__clock-face {
  position: relative;
  inline-size: var(--ssp-time-picker-clock-size, min(17rem, 78vw));
  aspect-ratio: 1;
  display: block;
  overflow: visible;
  border-radius: 999px;
  background: var(--ssp-time-picker-bg, #fff);
  touch-action: manipulation;
}

/* Caps the dial to the popover's own rendered width (not just the viewport), so it shrinks
   correctly even when a narrow form column — not screen size — is what's actually
   constraining the popover. Gated behind @supports so browsers without container queries
   keep the viewport-only sizing above instead of an invalid/dropped declaration. */
@supports (container-type: inline-size) {
  .ssp-time-picker__clock-face {
    inline-size: var(--ssp-time-picker-clock-size, min(17rem, 78vw, 82cqi));
  }
}

.ssp-time-picker__clock-face--minutes {
  inline-size: min(100%, 9rem);
}

.ssp-time-picker__clock-ring {
  fill: none;
  stroke: var(--ssp-time-picker-border, #d8e0dc);
  stroke-width: 0.75;
}

.ssp-time-picker__clock-ticks line {
  stroke: var(--ssp-time-picker-border, #d8e0dc);
  stroke-linecap: round;
  stroke-width: 0.85;
}

.ssp-time-picker__clock-center {
  fill: var(--ssp-time-picker-accent, #11735f);
}

.ssp-time-picker__clock-hand {
  pointer-events: none;
  stroke: var(--ssp-time-picker-accent, #11735f);
  stroke-linecap: round;
  stroke-width: 1.15;
}

.ssp-time-picker__clock-label {
  cursor: pointer;
  fill: var(--ssp-time-picker-text, #18211f);
  font-size: 7.2px;
  dominant-baseline: middle;
  pointer-events: none;
  text-anchor: middle;
  user-select: none;
}

.ssp-time-picker__time-option {
  min-block-size: 2rem;
  font-size: 0.9rem;
  line-height: 1;
}

.ssp-time-picker__clock-label[data-selected="true"] {
  fill: var(--ssp-time-picker-accent-text, #0a4f42);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--ssp-time-picker-accent-bg, #dff4eb);
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.ssp-time-picker__clock-label[aria-disabled="true"] {
  cursor: not-allowed;
  fill: var(--ssp-time-picker-disabled-text, #8a9692);
  opacity: 0.6;
}

.ssp-time-picker__digital {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  max-block-size: 13rem;
  overflow: auto;
}

.ssp-time-picker__time-option {
  padding-inline: 0.375rem;
  white-space: nowrap;
}