/* Shared H:MM control. Attribute selectors also cover dynamically added rows.
   Keep layout widths with the owning form; no wrappers or icon assets needed. */
html input[data-duration-input] {
  --duration-surface: var(--wt-surface, var(--panel, var(--pw-surface, #fff)));
  --duration-subtle: var(--wt-surface-subtle, var(--panel-2, var(--pw-surface-subtle, #f8f9fa)));
  --duration-border: var(--wt-line-strong, var(--border-strong, var(--pw-border-strong, #c4cbd4)));
  --duration-text: var(--wt-text, var(--text, var(--pw-text, #172033)));
  --duration-muted: var(--wt-muted, var(--muted, var(--pw-muted, #667085)));
  --duration-accent: var(--wt-accent, var(--accent, var(--pw-primary, #1f6faa)));
  --duration-danger: var(--wt-danger, var(--tone-danger-text, var(--pw-tone-danger-text, #b42318)));
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--duration-border);
  /* The legacy admin sets all control radii with !important. */
  border-radius: 8px !important;
  background-color: var(--duration-surface);
  color: var(--duration-text);
  font-family: inherit;
  font-weight: var(--pw-font-weight-emphasis, 500);
  /* Preserve aligned figures even inside forms that reset the font shorthand. */
  font-variant-numeric: lining-nums tabular-nums !important;
  line-height: 1.5;
  letter-spacing: .025em;
  text-align: left;
  direction: ltr;
  caret-color: var(--duration-accent);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

html input[data-duration-input]::placeholder {
  color: var(--duration-muted);
  font-weight: var(--pw-font-weight-regular, 400);
  opacity: .8;
}

html input[data-duration-input]:hover:not(:disabled):not([readonly]) {
  border-color: color-mix(in srgb, var(--duration-border) 55%, var(--duration-accent)) !important;
}

/* State overrides stay local to duration controls, including the interval form
   whose ID-based base rules otherwise override interactive border colours. */
html input[data-duration-input]:focus {
  border-color: var(--duration-accent) !important;
  outline: 3px solid color-mix(in srgb, var(--duration-accent) 18%, transparent) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html input[data-duration-input]:focus-visible {
  outline: 2px solid var(--duration-accent) !important;
  outline-offset: 2px !important;
}

html input[data-duration-input]:is([aria-invalid="true"], [data-duration-invalid="true"], :user-invalid),
html :is(.errors, .has-errors) input[data-duration-input] {
  --duration-accent: var(--duration-danger);
  border-color: var(--duration-danger) !important;
}

html input[data-duration-input][readonly] {
  background-color: var(--duration-subtle) !important;
  cursor: default;
}

html input[data-duration-input]:disabled {
  border-color: var(--pw-control-disabled-border, var(--duration-border)) !important;
  background-color: var(--pw-control-disabled-bg, var(--duration-subtle)) !important;
  color: var(--pw-control-disabled-fg, var(--duration-muted)) !important;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  html input[data-duration-input] {
    /* Keep Safari from zooming while retaining compact table widths. */
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html input[data-duration-input] { transition: none; }
}

@media (forced-colors: active) {
  html input[data-duration-input]:focus { outline-color: Highlight !important; }
  html input[data-duration-input]:disabled { color: GrayText !important; }
}