/* ВВІД ЧИСЕЛ, ДАТ І ВИБОРУ — вигляд. Пара до /ui/inputs.js (див. там, навіщо).
   Значення-чіп у формі й одне вікно-аркуш на три задачі: клавіатура, дата, картки.
   Взірець — клавіатура прошивки oCBot (rb-valuechip + numpadModal): число головне,
   усі цілі не менші за 44 px, обране — заливкою, а не лише кольором.

   Рух: вікно з'являється за 200–260 мс (на телефоні виїжджає аркушем знизу, кривою
   «шухляди»), зникає миттю — людина чекає форму, а не анімацію. Натиск клавіші —
   стискання на 3 %. Без руху для тих, хто його вимкнув. */

/* ── Значення-чіп у формі ──────────────────────────────────────────────────── */
/* Розмір — з !important: форма зони дає полям width:100% і min-height, і сховане поле інакше
   розпирає вікно вбік (смуга прокрутки й згасання країв у вікні складу пану, S7). */
.inp-src { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }

.inp-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px;
  padding: 6px 12px; border: 1px solid var(--border-control); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--elev-inset);
  transition: border-color 150ms ease, background-color 150ms ease, transform 120ms ease-out;
}
.inp-chip:active { transform: scale(.98); }
.inp-chip:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--elev-inset), var(--focus-ring); }
.inp-chip:disabled { opacity: .5; cursor: not-allowed; }
.inp-chip-bad { border-color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .inp-chip:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), .06); }
}
/* Число праворуч і впритул до одиниці — «1000 г», як на гейджі; стовпчик чисел
   у формі читається одним рядом. */
.inp-chip-num { justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.inp-chip-num .inp-chip-v { font-weight: 700; font-size: 1.1rem; color: var(--green); }
.inp-chip-u { color: var(--hint); font-size: .9rem; }
.inp-chip-empty { color: var(--hint) !important; font-weight: 500 !important; }
.inp-chip-date .ico { color: var(--gold); flex: none; }
.inp-chip-date .inp-chip-v { font-weight: 600; }
.inp-chip-pick { min-height: 48px; }
.inp-chip-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.inp-chip-txt .inp-chip-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inp-chip-hint { font-size: var(--fs-small); color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inp-chip-caret { flex: none; margin: 0 4px 0 2px; color: var(--hint); }
.inp-chev { display: inline-block; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.inp-chev-down { margin-top: -4px; }
.inp-chev-left { transform: rotate(135deg); margin-left: 3px; }
.inp-chev-right { transform: rotate(-45deg); margin-right: 3px; }
.inp-chip .inp-thumb { width: 32px; height: 32px; }

/* ── Вікно-аркуш ───────────────────────────────────────────────────────────── */
.inp-sheet {
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  display: none; flex-direction: column;
  width: min(360px, 100vw - 24px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--border-gold); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--elev-5);
  opacity: 1; transform: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.inp-sheet[open] { display: flex; }
@starting-style { .inp-sheet[open] { opacity: 0; transform: scale(.96); } }
.inp-sheet[data-kind="date"] { width: min(420px, 100vw - 24px); }
.inp-sheet[data-kind="pick"] { width: min(760px, 100vw - 24px); height: min(680px, 100dvh - 32px); }
.inp-sheet::backdrop { background: rgba(27, 77, 62, .35); backdrop-filter: blur(2px); }

.inp-head { display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px 18px; }
.inp-title { flex: 1; margin: 0; font-size: 1.05rem; color: var(--green); min-width: 0; overflow-wrap: anywhere; }
.inp-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 14px; overscroll-behavior: contain; }
.inp-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-gold); }
.inp-foot .btn { width: 100%; min-height: 48px; }
.inp-keys-hint { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--hint); }

/* Телефон: аркуш знизу на всю ширину, «ручка» вгорі. */
@media (max-width: 600px) {
  .inp-sheet, .inp-sheet[data-kind] {
    width: 100vw; max-width: 100vw; margin: auto 0 0; height: fit-content; max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
    transition: transform 260ms var(--ease-drawer), opacity 200ms ease-out;
  }
  .inp-sheet[data-kind="pick"] { height: 92dvh; }
  @starting-style { .inp-sheet[open] { opacity: 1; transform: translateY(100%); } }
  .inp-head::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 2px; background: var(--border-control); }
  .inp-keys-hint { display: none; }   /* про фізичну клавіатуру на телефоні мовчимо */
  /* Фільтри — однією стрічкою, що гортається пальцем: п'ять рядків чипів з'їдали
     пів аркуша, і до карток треба було гортати. */
  .inp-sheet .inp-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; }
  .inp-sheet .inp-chips .chip { flex: none; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .inp-sheet, .inp-sheet[data-kind] { transition: opacity 150ms ease; }
  @starting-style { .inp-sheet[open] { transform: none; opacity: 0; } }
}

/* ── Клавіатура ────────────────────────────────────────────────────────────── */
.inp-disp {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  min-height: 64px; padding: 8px 14px; border: 1px solid var(--border-control); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--elev-inset); font-variant-numeric: tabular-nums;
}
.inp-disp-v { font-size: 2.1rem; font-weight: 700; color: var(--green); line-height: 1.1; overflow-wrap: anywhere; }
/* Підставлене значення ще не правлене — перша цифра його замінить. Позначка
   ледь помітна, як виділений текст у полі. */
.inp-disp-v.inp-fresh { background: rgba(var(--gold-rgb), .18); border-radius: 4px; padding: 0 4px; }
.inp-disp-u { font-size: 1rem; color: var(--hint); }
.inp-issue { min-height: 1.2em; margin: 4px 2px 6px; font-size: var(--fs-small); color: var(--danger); }
.inp-issue:empty { margin-block: 0 8px; min-height: 0; }
.inp-note { margin: 0 2px 10px; font-size: var(--fs-small); color: var(--hint); line-height: 1.4; }

.inp-slider { margin-bottom: 8px; }
.inp-slider input { width: 100%; height: 44px; accent-color: var(--gold); cursor: pointer; }
.inp-slider-scale { display: flex; justify-content: space-between; margin-top: -6px; font-size: var(--fs-caption); color: var(--hint); }

.inp-util, .inp-keys, .inp-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inp-util { margin-bottom: 8px; }
.inp-units { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); margin-top: 10px; }
.inp-key, .inp-unit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: 600 1.35rem var(--font); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 100ms ease-out;
}
.inp-key:active:not(:disabled), .inp-unit:active { transform: scale(.97); background: rgba(var(--gold-rgb), .18); }
.inp-key:focus-visible, .inp-unit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.inp-key:disabled { opacity: .4; cursor: not-allowed; }
.inp-key-util { min-height: 44px; font-size: 1.25rem; border-color: rgba(var(--gold-rgb), .55); color: var(--green); }
.inp-key-back { color: var(--danger); }
.inp-key .ico { width: 1.2em; height: 1.2em; }
.inp-unit { min-height: 44px; font-size: 1rem; }
.inp-unit[aria-checked="true"] { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .inp-key:hover:not(:disabled), .inp-unit:hover { border-color: var(--gold); }
}

/* ── Дата ─────────────────────────────────────────────────────────────────── */
/* Поле набору: дата текстом чи вставкою; під ним — що з неї зрозуміло (або
   спокійне «не впізнав» — кольором підказки, не помилки: людина ще пише). */
.inp-when-type .input { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.inp-when-read { min-height: 1.3em; margin: 6px 2px 0; font-weight: 600; color: var(--green); font-size: var(--fs-small); }
.inp-when-read.inp-when-bad { font-weight: 500; color: var(--hint); }
.inp-cal-head .icon-btn { min-width: 44px; min-height: 44px; }

/* Перемикач «Колеса / Календар» — жолоб .ui-seg з ядра (components.css);
   тут лише те, що він на всю ширину шторки. */
.inp-seg { display: grid; width: 100%; margin-bottom: 10px; }
.inp-sheet[data-mode="wheels"] .inp-cal { display: none; }
.inp-sheet[data-mode="cal"] .inp-wg-date { display: none; }
.inp-sheet[data-mode="cal"] .inp-wheels { --inp-wheel-rows: 3; margin-top: 8px; }

/* Колеса: стовпчики зі snap, обраний пункт — у смузі по центру. П'ять рядків
   на виду (у режимі календаря — три: лише година й хвилина під ним). */
.inp-wheels {
  --inp-wheel-h: 40px; --inp-wheel-rows: 5;
  position: relative; display: flex; justify-content: center; gap: 14px;
}
.inp-wheels::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--inp-wheel-h) * (var(--inp-wheel-rows) - 1) / 2);
  height: var(--inp-wheel-h); border-radius: var(--radius); background: rgba(var(--gold-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .35); pointer-events: none; }
.inp-wg { position: relative; display: flex; align-items: center; gap: 2px; }
.inp-wheel {
  height: calc(var(--inp-wheel-h) * var(--inp-wheel-rows));
  padding-block: calc(var(--inp-wheel-h) * (var(--inp-wheel-rows) - 1) / 2);
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  border-radius: var(--radius); outline: none; touch-action: pan-y;
}
.inp-wheel:focus-visible { box-shadow: var(--focus-ring); }
.inp-w-day { width: 58px; } .inp-w-month { width: 104px; } .inp-w-year { width: 62px; }
.inp-w-hour, .inp-w-min { width: 46px; }
.inp-wheel-i {
  height: var(--inp-wheel-h); scroll-snap-align: center; display: flex; align-items: center; justify-content: center; gap: 4px;
  color: var(--hint); font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none; transition: color 120ms ease;
}
.inp-wheel-i small { font-size: .68rem; color: var(--hint); }
.inp-wheel-i.on { color: var(--green); font-weight: 700; font-size: 1.2rem; }
.inp-wheel-sep { font-size: 1.3rem; font-weight: 700; color: var(--hint); }
@media (max-width: 600px) {
  .inp-wheels { gap: 8px; }
  .inp-w-month { width: 92px; }
  /* Квадратні клітинки на всю ширину телефона з'їдали місце коліс часу під календарем. */
  .inp-day { aspect-ratio: auto; height: 40px; }
  /* Швидкі кнопки — однією стрічкою: другий рядок відсував колеса часу за край. */
  .inp-sheet .inp-quick { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; }
  .inp-sheet .inp-quick .chip { flex: none; }
}
.inp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.inp-sheet .chip[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.inp-cal-head { display: flex; align-items: center; justify-content: space-between; }
.inp-cal-title { font-weight: 600; }
.inp-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.inp-cal-dow span { padding: 4px 0; text-align: center; font-size: var(--fs-caption); color: var(--hint); }
.inp-day {
  aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: none; color: var(--text);
  font: 500 .95rem var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 120ms ease, transform 100ms ease-out;
}
.inp-day:active { transform: scale(.94); }
.inp-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.inp-day-today { box-shadow: inset 0 0 0 1px var(--gold); font-weight: 700; }
.inp-day-on { background: var(--green); color: #fff; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .inp-day:not(.inp-day-on):hover { background: rgba(var(--gold-rgb), .15); } }


/* ── Вибір карткою ─────────────────────────────────────────────────────────── */
.inp-sheet[data-kind="pick"] .inp-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.inp-search { position: relative; position: sticky; top: -4px; z-index: 1; background: var(--surface); padding: 4px 0; }
.inp-search .input { padding-left: 40px; }
.inp-search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--hint); display: flex; }
.inp-filters:empty { display: none; }
.inp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inp-chips + .inp-chips { margin-top: 6px; }
.inp-chips .chip { padding: 5px 12px; font-size: .85rem; }
.inp-sect { margin: 6px 0 6px; font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); }
.inp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
@media (max-width: 600px) {
  .inp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inp-sheet .inp-card { gap: 8px; padding: 8px; }
  .inp-sheet .inp-card .inp-thumb { width: 30px; height: 30px; }
  .inp-sheet .inp-thumb-ico .ico { width: 18px; height: 18px; }
}
.inp-card {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px;
  border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 120ms ease-out;
}
.inp-card:active { transform: scale(.97); }
.inp-card:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--focus-ring); }
.inp-card-on { border-color: var(--green); background: rgba(var(--green-rgb), .07); box-shadow: inset 0 0 0 1px var(--green); }
.inp-card:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .inp-card:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), .06); } }
.inp-card-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.inp-card-name { font-weight: 600; overflow-wrap: anywhere; }
.inp-card-hint { margin-top: 2px; font-size: var(--fs-caption); color: var(--hint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Малюнок картки: гравюра чи фото — фоном; без нього — іконка книги або літера,
   щоб ряд карток не був «з дірками». */
.inp-thumb { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(var(--gold-rgb), .1) center / contain no-repeat; }
.inp-thumb-ico, .inp-thumb-mono { display: flex; align-items: center; justify-content: center; color: var(--green); }
.inp-thumb-ico .ico { width: 24px; height: 24px; }
.inp-thumb-mono { font-weight: 700; font-size: 1.05rem; color: var(--gold); background: rgba(var(--green-rgb), .06); }
.inp-empty { margin: 24px 0; text-align: center; color: var(--hint); }