/* The one "How long?" control (js/ui/length-picker.js, 2026-10-17, owner-
   approved canvas board "One length picker, everywhere"). Chips are 44px
   tall rounded rectangles, never round pills, so "1 h 30" stays on one line. */
.lp { display: flex; flex-direction: column; gap: 8px; }
.lp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--slate-300, #cbd5e1); background: var(--surface-primary, #ffffff);
  color: var(--text-primary, #0f172a); font: inherit; font-size: 14px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.lp-chip:hover { border-color: var(--primary-400, #2dd4bf); }
.lp-chip.is-on { background: var(--primary-600, #0d9488); border-color: var(--primary-600, #0d9488); color: #ffffff; }
.lp-chip--custom { border-style: dashed; border-color: #5eead4; color: var(--primary-700, #0f766e); }
.lp-chip--custom.is-on { border-style: solid; }
.lp-chip:focus-visible, .lp-step-btn:focus-visible { outline: 2px solid var(--primary-600, #0d9488); outline-offset: 2px; }
.lp-step { display: flex; align-items: center; gap: 8px; max-width: 320px; }
.lp-step[hidden], .lp-hint[hidden] { display: none; }
.lp-step-btn {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  border: 1px solid #99f6e4; background: #f0fdfa; color: var(--primary-700, #0f766e);
  font: inherit; font-size: 20px; font-weight: 700; cursor: pointer;
}
.lp-step-box {
  flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--primary-600, #0d9488); border-radius: 12px; font-size: 16px; font-weight: 700;
}
.lp-step-input { width: 56px; border: 0; background: transparent; text-align: right; font: inherit; color: inherit; }
.lp-step-input:focus { outline: none; }
.lp-hint { margin: 0; font-size: 12px; color: var(--text-secondary, #475569); }

body.dark-mode .lp-chip { background: var(--surface-secondary, #1e293b); border-color: #475569; color: #e2e8f0; }
body.dark-mode .lp-chip.is-on { background: #0d9488; border-color: #0d9488; color: #ffffff; }
body.dark-mode .lp-chip--custom { border-color: rgba(45, 212, 191, 0.5); color: #5eead4; }
body.dark-mode .lp-step-btn { background: rgba(20, 184, 166, 0.12); border-color: rgba(45, 212, 191, 0.35); color: #5eead4; }
body.dark-mode .lp-step-box { border-color: #14b8a6; color: #e2e8f0; }
body.dark-mode .lp-hint { color: #94a3b8; }