/* =========================================================
   Кейс «Запис до майстра». Общие капсулы — в ../_ui/ui.css,
   здесь только то, что есть лишь на этой странице.
   ========================================================= */

.hero { display: grid; justify-items: center; }
.hero .duo { margin-top: 20px; }

.run {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}
.run-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fa36a; }

/* ---------- кабинет мастера ---------- */


.day-tabs { display: flex; gap: 8px; padding: 16px clamp(20px, 3vw, 28px) 0; flex-wrap: wrap; }
.day-tab {
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.day-tab[aria-selected="true"] { background: #232322; border-color: #232322; color: #f4f3ee; }

/* Сетка дня: слева время, дальше по колонке на мастера.
   Занятое рисуется блоком во всю длину услуги — так сразу видно,
   почему соседние окна недоступны. */
.grid { padding: 18px clamp(20px, 3vw, 28px) 24px; overflow-x: auto; }
.grid-head, .grid-row { display: grid; grid-template-columns: 62px repeat(3, minmax(88px, 1fr)); gap: 6px; }
.grid-head { position: sticky; top: 0; padding-bottom: 8px; }
.grid-head span {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.grid-body { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.hour { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--faint); align-self: center; }

.cell { height: 26px; border-radius: 6px; background: #e4e3dd; }
.cell.free { background: #eeede7; }
.cell.busy { background: #cfcec6; }
.cell.mine { background: var(--lime); box-shadow: 0 0 0 2px #232322 inset; }
.cell.head { background: #232322; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }

/* ---------- лист ожидания ---------- */
.wait-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gap);
  padding: 20px clamp(20px, 3vw, 28px);
}
.wait-strip p { margin: 0; font-size: 14.5px; }

.facts { margin-top: 30px; }

.end { display: grid; justify-items: start; gap: 18px; }
.end .lede { margin: 0; max-width: 620px; }