/**

 * LibZen TimePicker — iOS-style wheel for <input type="time">.

 * Field chrome matches DatePicker via shared datetime-field.css.

 */



@import url('./datetime-field.css');



:root {

  --libzen-tp-clock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b9cb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

}



/* Decorative clock on native time input; clicks pass through to input. */

input[type="time"]::-webkit-calendar-picker-indicator {

  cursor: pointer;

  pointer-events: none;

  width: var(--libzen-dt-icon-size);

  height: var(--libzen-dt-icon-size);

  margin: 0;

  padding: 0;

  opacity: 1;

  -webkit-appearance: none;

  appearance: none;

  background: transparent var(--libzen-tp-clock-icon) center / contain no-repeat;

}



input[type="time"]:hover::-webkit-calendar-picker-indicator,

input[type="time"]:focus-within::-webkit-calendar-picker-indicator {

  --libzen-tp-clock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

}



.libzen-tp {

  position: fixed;

  z-index: 2147483000;

  display: flex;

  flex-direction: column;

  background: var(--libzen-dt-panel);

  border: 1px solid var(--libzen-dt-accent);

  border-radius: var(--libzen-dt-radius);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  padding: 0.3rem;

  font-size: 0.85rem;

  color: var(--libzen-dt-text);

  user-select: none;

}



.libzen-tp[hidden] {

  display: none;

}



.libzen-tp-cols {

  display: flex;

  gap: 0.15rem;

  position: relative;

}



.libzen-tp-band {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1.8rem;

  transform: translateY(-50%);

  background: var(--libzen-dt-hover);

  border-radius: 7px;

  pointer-events: none;

  z-index: 0;

}



.libzen-tp-sep {

  align-self: center;

  z-index: 1;

  color: var(--libzen-dt-text);

  font-weight: 600;

  padding: 0 0.05rem;

}



.libzen-tp-col {

  position: relative;

  z-index: 1;

  max-height: 11rem;

  box-sizing: border-box;

  overflow-y: auto;

  scroll-snap-type: y proximity;

  scrollbar-width: none;

  -ms-overflow-style: none;

  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);

  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);

}



.libzen-tp-col::-webkit-scrollbar {

  width: 0;

  height: 0;

}



.libzen-tp-cell {

  display: block;

  width: 2.6rem;

  box-sizing: border-box;

  margin: 1px 0;

  padding: 0.18rem 0;

  text-align: center;

  font: inherit;

  font-variant-numeric: tabular-nums;

  color: var(--libzen-dt-muted);

  background: transparent;

  border: none;

  cursor: pointer;

  scroll-snap-align: center;

  transition: color 0.12s ease;

}



.libzen-tp-cell.centered {

  color: var(--libzen-dt-text);

  font-weight: 600;

}



.libzen-tp-cell:focus-visible {

  outline: var(--libzen-dt-focus-ring);

  outline-offset: -1px;

}



.libzen-tp-hint {

  margin-top: 0.3rem;

  padding-top: 0.25rem;

  border-top: 1px solid var(--libzen-dt-line);

  color: var(--libzen-dt-muted);

  font-size: 0.72rem;

  text-align: center;

  white-space: nowrap;

}