/* ═══ Телефон — брони: неделя заездов ═══
   (.scratch/mobile/design-review.md) Плита — та же, что у ленты броней
   (bookings.css, §8.11), но на телефоне она несёт три вещи: заголовок
   экрана, диапазон недели с числом заездов и полосу семи дней — подпись
   экрана: тёмный лак, числа крупно, заезды бумажной меткой, сегодня —
   бумажной плиткой. Показания и линейка суток остались компьютеру: числа
   стоят в обойме отбора, одним органом на одно намерение. Ниже — поиск
   утопленной бумагой, чипы отбора вбок, дни один за другим: заголовок
   словами, строки по шкале телефона (shell.css), деньги справа тоном.
   Цвет отвечает на вопрос (§8.3): ребро строки — род события, деньги —
   тон ожидания и просрочки, знак гостя — его тон. */
.tel-screen.bookings{display:flex;border-radius:0;box-shadow:none}
.tel-screen.bookings[hidden]{display:none}

/* ── плита ── */
.tel-screen.bookings .bl-face{display:block;padding:calc(12px + env(safe-area-inset-top,0px)) var(--ph-gutter) 8px}
.tel-screen.bookings .bl-of{flex-basis:auto;margin:0}
.tel-screen.bookings .bl-of h2{font-size:var(--ph-title);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.tel-screen.bookings .bl-of span{margin-top:5px;font-size:var(--ph-s);color:var(--band-ink-2)}

/* Полоса семи дней: день недели, число, заезды меткой. */
.wk-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:4px 12px 12px}
.wk-day{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:62px;padding:7px 0 6px;border-radius:var(--r-lg);color:var(--band-ink-2);
  transition:background-color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.wk-day i{font-size:var(--ph-xs);font-style:normal;font-weight:500}
.wk-day b{
  font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  color:var(--band-ink);font-variant-numeric:tabular-nums;
}
.wk-day u{
  min-width:18px;height:16px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--bl-in);color:var(--band);font-size:11px;font-weight:600;line-height:16px;
  text-decoration:none;font-variant-numeric:tabular-nums;
}
.wk-day.zero u{visibility:hidden}
/* Сегодня — бумажная плитка на лаке: «где я» видно раньше, чем прочитано;
   под числом — та же черта «сейчас», что в заголовке дня и в списке. */
.wk-day.today{background:var(--band-ink);color:var(--band-2)}
.wk-day.today b{color:var(--band);box-shadow:0 2px 0 0 var(--now)}
.wk-day:not(.today):active{background:rgb(237 234 227 / .14)}
.wk-day:active{transform:scale(.96)}
.wk-day:focus-visible{outline:2px solid var(--band-ink);outline-offset:1px}

/* ── поиск и обойма ── */
.tel-screen.bookings .bl-bar{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-wrap:nowrap;
  padding:10px var(--ph-gutter) 8px;border-bottom:0;background:var(--card);
}
.tel-screen.bookings .bl-find{
  order:0;width:100%;height:44px;margin:0;padding:0 14px;
  border:0;border-radius:var(--r-lg);background:var(--sunk);color:var(--ink-3);box-shadow:none;
  transition:box-shadow var(--t-tap) var(--ease);
}
.tel-screen.bookings .bl-find:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink-3);color:var(--ink-2)}
.tel-screen.bookings .bl-find svg{width:16px;height:16px}
.tel-screen.bookings .bl-find input{width:100%;font-size:16px;color:var(--ink)}
/* Чипы отбора со счётчиками, листаются вбок; выбранный — акцентом. */
.wk-chips{display:flex;gap:6px;margin:0 calc(var(--ph-gutter) * -1);padding:0 var(--ph-gutter) 2px;overflow-x:auto;scrollbar-width:none}
.wk-chips::-webkit-scrollbar{display:none}
.wk-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;
  border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.wk-chip b{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wk-chip.on{background:var(--accent);color:var(--accent-ink)}
.wk-chip.on b{color:var(--accent-ink);opacity:.72}
.wk-chip:active{transform:scale(.97)}
.wk-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── дни ── */
.tel-screen.bookings .bl-dayhead{padding:16px var(--ph-gutter) 6px;gap:0;box-shadow:none;background:var(--card)}
.tel-screen.bookings .bl-daytitle b{display:inline-block;font-size:var(--ph-h);letter-spacing:-.02em;line-height:1.2}
.tel-screen.bookings .bl-daytitle em{margin-top:3px;font-size:var(--ph-s);color:var(--ink-3)}
.tel-screen.bookings .bl-day.today .bl-daytitle b{box-shadow:0 2px 0 0 var(--now)}
.tel-screen.bookings .bl-rows{padding:0 0 6px}

/* ── строка ── */
.tel-screen.bookings .bl-row{gap:0;border-radius:0;padding-right:6px;transition:background-color var(--t-tap) var(--ease)}
.tel-screen.bookings .bl-row::before{left:0;top:14px;bottom:14px;width:3px;border-radius:0 2px 2px 0}
.tel-screen.bookings .bl-row::after{
  content:"";position:absolute;left:calc(var(--ph-gutter) + 98px);right:0;bottom:0;height:1px;background:var(--rule-2);
}
.tel-screen.bookings .bl-row:last-child::after{display:none}
.tel-screen.bookings .bl-row:active{background:var(--sunk)}
.tel-screen.bookings .bl-open{
  grid-template-columns:44px 36px minmax(0,1fr) auto;column-gap:8px;row-gap:3px;
  grid-template-areas:"at av who purse" "at av what what" "at av params params" "at av note note";
  align-items:start;padding:12px 4px 12px var(--ph-gutter);min-height:64px;
}
.tel-screen.bookings .bl-at{min-width:0;padding-top:2px;font-size:var(--ph-b);font-weight:500;color:var(--ink)}
.tel-screen.bookings .bl-at i{font-size:var(--ph-xs);color:var(--ink-3)}
.tel-screen.bookings .bl-av{width:36px;height:36px;margin-right:2px;font-size:12px}
.tel-screen.bookings .bl-who{gap:6px;min-height:22px}
.tel-screen.bookings .bl-who>span{font-size:var(--ph-h);font-weight:600;letter-spacing:-.02em}
.tel-screen.bookings .bl-what{font-size:var(--ph-b);color:var(--ink-2);white-space:normal;line-height:1.3}
/* Деньги: остаток тоном справа от имени; у просрочки — и слово под суммой; оплаченное — одним словом. */
.tel-screen.bookings .bl-purse{
  grid-area:purse;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  margin:2px 0 0 6px;text-align:right;font-size:var(--ph-b);font-weight:500;color:var(--ink-3);
}
.tel-screen.bookings .bl-purse b{font-weight:500;letter-spacing:-.01em}
.tel-screen.bookings .bl-purse i{font-size:var(--ph-xs);font-style:normal;font-weight:500;color:var(--late)}
.tel-screen.bookings .bl-purse.wait b{color:var(--wait)}
.tel-screen.bookings .bl-purse.late b{color:var(--late)}
.wk-params{grid-area:params;display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:3px}
.wk-params i{
  font-size:var(--ph-xs);font-style:normal;font-weight:500;color:var(--ink-2);
  padding:2px 8px;border-radius:var(--r-pill);background:var(--sunk);
}
/* Заметка гостя — выписка, а не коробка: та же волосяная черта, что у
   комментария в картотеке (§8.5). */
.wk-note{
  grid-area:note;margin-top:4px;padding-left:9px;font-size:var(--ph-s);line-height:1.4;
  color:var(--ink-2);box-shadow:inset 1px 0 0 var(--rule);
}
.tel-screen.bookings .bl-acts{align-self:center;gap:0;padding-right:0}
.tel-screen.bookings .bl-act{width:40px;height:40px;color:var(--ink-3)}
.tel-screen.bookings .bl-act svg{width:18px;height:18px}

/* Черта «сейчас» внутри дня и пустой день. */
.tel-screen.bookings .bl-now{padding:6px 6px 6px var(--ph-gutter)}
.tel-screen.bookings .bl-now b{font-size:var(--ph-xs)}
/* Пустой день: слова строкой, кнопка под ними — на ширине телефона рядом им тесно. */
.tel-screen.bookings .bl-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px var(--ph-gutter) 16px}
.tel-screen.bookings .bl-empty b{font-size:var(--ph-b);font-weight:500;line-height:1.35;color:var(--ink-3)}
.tel-screen.bookings .bl-add{height:34px;padding:0 13px;border-radius:var(--r-pill);font-size:var(--ph-s);box-shadow:none}
.tel-screen.bookings .bl-add svg{width:13px;height:13px}
.tel-screen.bookings .bl-more{padding:12px var(--ph-gutter);font-size:var(--ph-s)}
.tel-screen.bookings .bl-blank{padding:24px var(--ph-gutter)}

@media (prefers-reduced-motion:reduce){
  .wk-day,.wk-chip,.tel-screen.bookings .bl-row,.tel-screen.bookings .bl-find{transition:none}
  .wk-day:active,.wk-chip:active{transform:none}
}