/* «Вся программа Форума» — 4 дня, поиск одной строкой + фильтры по дню и времени.
   Чипы — по макету Figma (node 10367:15697): Inter 15px, pill 22px.
   Карточки переиспользуют .s5-card из s5.css. */


.prog-back { position: absolute; left: 32px; top: 226px; white-space: pre; cursor: pointer;
  font-weight: 500; font-size: 28px; line-height: 1.2; color: rgba(255,255,255,0.85); }

.prog-title { position: absolute; left: 32px; top: 290px; width: 776px;
  font-weight: 700; font-size: 48px; line-height: 1.16; color: rgba(255,255,255,0.9); }

/* Строка поиска: название · тема · спикер (одно поле, поиск по всей программе) */
.prog-search { position: absolute; left: 32px; top: 370px; width: 1016px; height: 76px;
  display: flex; align-items: center; gap: 16px; padding: 0 24px; box-sizing: border-box;
  border-radius: 38px; cursor: text;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); }
.prog-search.focus { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.55); }
.prog-search-i { width: 30px; height: 30px; flex: 0 0 auto; color: rgba(255,255,255,0.65); }
.prog-search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  padding: 0; font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 28px;
  line-height: 1.2; color: #fff; caret-color: #fff; }
.prog-search input::placeholder { color: rgba(255,255,255,0.5); }
.prog-search-x { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1;
  color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.12); }

/* Ряды фильтров (день / время). При активном поиске приглушены — ищем по всей программе. */
.chips { position: absolute; left: 43px; display: flex; gap: 10px; flex-wrap: wrap; width: 1000px; }
#prog-days { top: 470px; }
#prog-times { top: 536px; }
.chips.muted { opacity: 0.4; }
.chip { padding: 10px 18px; border-radius: var(--nd-r-chip); cursor: pointer; white-space: nowrap;
  background: var(--nd-card); border: 1px solid var(--nd-card-br);
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; color: rgba(255,255,255,0.85); }
.chip.active { background: #fff; border-color: #fff; font-weight: 600; color: var(--nd-chip-fg); }

/* Строка результата поиска (пусто, когда поиск не задан) */
.prog-found { position: absolute; left: 32px; top: 598px; width: 1016px;
  font-weight: 400; font-size: 24px; line-height: 1.2; color: rgba(255,255,255,0.65); }

.prog-list { position: absolute; left: 32px; top: 632px; width: 1016px; height: 748px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 24px;
  scrollbar-width: none; -ms-overflow-style: none; }
.prog-list::-webkit-scrollbar { width: 0; height: 0; }
.prog-list { mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%); }
.prog-list.fits { mask-image: none; -webkit-mask-image: none; }
.prog-list .s5-card { cursor: pointer; }
/* Пустая выдача: сообщение по центру области списка, а не строка над пустотой */
.prog-empty { margin: auto; width: 720px; text-align: center; }
.prog-empty-t { font-weight: 600; font-size: 34px; line-height: 1.2; color: rgba(255,255,255,0.9); }
.prog-empty-s { margin-top: 16px; font-weight: 400; font-size: 26px; line-height: 1.3;
  color: rgba(255,255,255,0.55); }
/* Клавиатура открыта — список ужимается до неё, а не уезжает под неё */
/* Клавиатура стоит в середине экрана (печатать на уровне колен неудобно), поэтому
   при её открытии верх экрана уплотняется: заголовок и фильтры прячем, список —
   между строкой поиска и клавиатурой. */
body.kbd-open .prog-title { display: none; }
body.kbd-open .prog-search { top: 300px; }
body.kbd-open .clock { display: none; }
body.kbd-open .chips { display: none; }
body.kbd-open .prog-found { top: 396px; }
#screen-prog.kbd-open .prog-list { top: 436px; height: 356px; }


/* Экранная клавиатура (у стелы нет физической; системная подавлена inputmode=none) */
.kbd { position: absolute; left: 0; right: 0; top: 820px; height: 560px; z-index: 5;
  box-sizing: border-box; padding: 24px 16px 28px;
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(8,20,38,0.94); border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 -18px 40px rgba(4,10,20,0.45); }
.kbd-row { display: flex; gap: 8px; justify-content: center; }
.kbd-key { flex: 0 0 auto; width: 80px; height: 88px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; user-select: none;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16);
  font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 34px; color: #fff; }
.kbd-key:active { background: #fff; color: #123361; }
.kbd-key.wide { width: 168px; font-size: 26px; }
.kbd-key.space { width: 424px; }
.kbd-key.act { background: rgba(255,255,255,0.24); font-size: 26px; }
.kbd-key.done { background: #fff; color: #123361; font-size: 26px; font-weight: 600; }