/* Tokens have fallbacks so standalone tests can reuse the same picker. */
.number-picker, .number-picker * { box-sizing: border-box; }
.number-picker-input { display: block; position: relative; }
.has-number-picker input, .has-number-picker select { padding-right: 58px; }
/* Idle touch fields behave as picker entry points. Explicit manual mode restores
   native selection/caret; readonly itself is only held during the gesture. */
.has-number-picker input.number-picker-touch:not([data-picker-manual]) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; caret-color: transparent; }
.has-number-picker input::-webkit-inner-spin-button, .has-number-picker input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field .unit.has-number-picker input { padding-right: 94px; }
.field .unit.has-number-picker > b { right: 57px; }
.input-action { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--glass-line-2, var(--line, #766b90)); background: var(--glass-2, var(--control, #f0ebf8)); color: var(--ink, #241938); font: inherit; font-size: 21px; cursor: pointer; display: grid; place-items: center; }
.input-action svg { display: block; width: 21px; height: 21px; flex: none; }
.number-picker { --picker-row: 40px; width: min(94vw, 390px); max-width: 390px; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--glass-line-2, var(--line, #766b90)); border-radius: 23px; background: var(--page, #f7f3fb); color: var(--ink, #241938); box-shadow: 0 20px 80px #10092488; font-family: inherit; overflow: auto; overscroll-behavior: contain; }
.number-picker::backdrop { background: #08041999; backdrop-filter: blur(5px); }
.number-picker-box { padding: 18px; }
.number-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.number-picker-heading h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.number-picker button { font: inherit; cursor: pointer; }
.number-picker-tools { display: flex; flex: 0 0 auto; gap: 6px; margin-left: auto; }
.number-picker-tools button { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--glass-line, #d1c4df); border-radius: 10px; background: var(--glass-2, #e8dfef); color: inherit; }
.number-picker-tools .number-picker-close { font-size: 24px; line-height: 1; }
.number-picker-sound svg { width: 20px; height: 20px; }
.number-picker-sound[aria-pressed="true"] .sound-slash, .number-picker-sound[aria-pressed="false"] .sound-waves { display: none; }
.number-picker-sound[aria-pressed="false"] { color: var(--muted, #6b5777); }
.number-picker-tip { margin: 9px 0; color: var(--muted, #6b5777); font-size: 12px; text-align: center; }
.number-picker-track { position: relative; width: min(100%, 244px); margin: 0 auto; }
.number-picker-focus { position: absolute; left: 8px; right: 8px; top: 80px; height: 40px; border: 2px solid var(--accent, var(--press, #ab3ba1)); border-radius: 11px; background: color-mix(in srgb, var(--accent, var(--press, #ab3ba1)) 12%, transparent); pointer-events: none; }
.number-picker-wheel { position: relative; height: 200px; padding: 80px 8px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.number-picker-wheel::-webkit-scrollbar { display: none; }
.number-picker-wheel button { display: block; width: 100%; height: var(--picker-row); min-height: var(--picker-row); padding: 0; border: 0; background: transparent; color: var(--muted, #6b5777); font-size: 20px; font-weight: 600; scroll-snap-align: center; font-variant-numeric: tabular-nums; }
.number-picker-wheel button.selected { color: var(--ink, #241938); font-weight: 900; font-size: 25px; }
.number-picker-table { margin-top: 4px; }
.number-picker-table summary { cursor: pointer; color: var(--muted, #6b5777); font-size: 12px; margin-bottom: 8px; }
.number-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 112px; padding-block: 40px; overflow: auto; overscroll-behavior: contain; }
.number-picker-grid button { height: 32px; padding: 0 3px; background: var(--glass-2, #e8dfef); color: inherit; border: 1px solid var(--glass-line, #d1c4df); border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.number-picker-grid button[aria-pressed="true"] { color: var(--page, #fff); background: var(--ink, #241938); border-color: var(--ink, #241938); font-weight: 800; }
.number-picker-footer { display: flex; gap: 6px; margin-top: 15px; }
.number-picker-footer button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--glass-line-2, var(--line, #766b90)); border-radius: 10px; color: inherit; background: var(--glass-2, #e8dfef); font-size: 12px; font-weight: 700; white-space: nowrap; }
.number-picker-footer .number-picker-done { flex: 1; background: var(--accent, var(--press, #ab3ba1)); border-color: transparent; color: #fff; }
@media (max-width: 560px) { .number-picker { margin-bottom: max(12px, env(safe-area-inset-bottom)); } }
@media (max-height: 650px) { .number-picker-table[open] .number-picker-grid { height: 76px; padding-block: 22px; } .number-picker-box { padding: 12px 16px; } }

/* Native selects retain platform keyboard/screen-reader behavior. The decorative
   action area uses exactly the numeric trigger's geometry and SVG stroke. */
.standard-select-wrap { display: block; position: relative; min-width: 0; }
.standard-select-wrap select, .has-number-picker select { -webkit-appearance: none; appearance: none; background-image: none; padding-right: 58px; color-scheme: light; --option-bg: var(--surface, #fff8e9); --option-ink: var(--ink, #211738); }
.standard-select-indicator { pointer-events: none; cursor: default; }
.standard-select-wrap:has(select:disabled) .standard-select-indicator { opacity: .4; }
.standard-select-wrap:focus-within .standard-select-indicator { border-color: var(--accent, var(--press, #ab3ba1)); }
.standard-select option, .standard-select optgroup, .has-number-picker select option, .has-number-picker select optgroup { color: var(--option-ink); background-color: var(--option-bg); }
:root[data-theme="dark"] .standard-select, :root[data-theme="dark"] .has-number-picker select { color-scheme: dark; --option-bg: var(--surface, #251b3c); --option-ink: var(--ink, #f6f1ff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .standard-select, :root:not([data-theme="light"]) .has-number-picker select { color-scheme: dark; --option-bg: var(--surface, #251b3c); --option-ink: var(--ink, #f6f1ff); }
}

/* Keep input scroll boundaries soft only in the direction with more content. */
.input-scroll-fade { --fade-top: 0px; --fade-bottom: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); }
.input-scroll-fade.has-scroll-above { --fade-top: 24px; }
.input-scroll-fade.has-scroll-below { --fade-bottom: 24px; }
.number-picker-grid.input-scroll-fade.has-scroll-above { --fade-top: 12px; }
.number-picker-grid.input-scroll-fade.has-scroll-below { --fade-bottom: 12px; }

/* A time input retains its HH:MM value; the modal stages edits until confirmed. */
.has-time-picker input { padding-right: 58px; -webkit-touch-callout: none; user-select: none; caret-color: transparent; }
.has-time-picker input::-webkit-calendar-picker-indicator { display: none; }
.time-picker-columns { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: start; gap: 4px; padding: 8px 10px 12px; }
.time-picker-part { min-width: 0; text-align: center; }
.time-picker-part > span { display: block; color: var(--muted, #6b5777); font-size: 13px; margin-top: 6px; }
.time-picker-colon { padding-top: 83px; font-size: 24px; line-height: 36px; text-align: center; font-weight: 800; }
.time-picker-wheel button { font-size: 24px; }
.time-picker-wheel button.selected { font-size: 31px; }
.time-picker .number-picker-focus { left: 3px; right: 3px; }
.time-picker-error { font-size: 12px; line-height: 1.5; color: var(--accent, #ab3ba1); }
.time-picker button:focus-visible, .number-picker-wheel:focus-visible { outline: 2px solid var(--accent, #ab3ba1); outline-offset: 3px; }