/* RU: Кабинет бизнеса, пакет Ф4.8: баннеры заявок на права, панель «Здоровье карточки», лента разделов, чипы статусов
       заявок клиентов и раскладка для телефона. Отдельный файл, а не хвост biz.css — по той же причине, что и
       biz-reviews.css: biz.css правят параллельно, и дописывание в конец из двух веток даёт конфликт на каждом слиянии.
       Цвета — только токены `--k-*` (храповик `npm run check:theme`): у кабинета пять тонов и шесть палитр, и
       литерал в любом из них остался бы чужим пятном.
   EN: The business cabinet, package Ф4.8: rights-claim banners, the "card health" panel, the section chip row,
       customer-request status chips and the phone layout. A separate file rather than the tail of biz.css — for the
       same reason as biz-reviews.css: biz.css is edited in parallel, and appending from two branches conflicts on every
       merge. Colours are `--k-*` tokens only (the `npm run check:theme` ratchet): the cabinet has five tones and six
       palettes, and a literal would stay a foreign blot in any of them. */

/* ——— Цели касания / Tap targets ——— */
/* RU: 44 px — минимум из рекомендаций Apple и WCAG 2.5.5 (токен --k-tap-min). Правило общее для кабинета: на телефоне
       кнопки «Отвечено», «Заполнить», «×» у услуги были по 30 px, и палец попадал в соседнюю.
   EN: 44 px is the minimum from Apple's guidance and WCAG 2.5.5 (the --k-tap-min token). The rule covers the whole
       cabinet: on a phone the "Отвечено", "Заполнить" and service "×" buttons were 30 px, and a finger hit the neighbour. */
body.biz button,
body.biz select,
body.biz input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-height: var(--k-tap-min);
}

/* RU: Файл схемы должен сжиматься вместе с остальными полями строки: его встроенная минимальная ширина выталкивала
       кнопку загрузки за край кабинета на ширине планшета.
   EN: Let the schema file field shrink with the other row fields: its intrinsic minimum width pushed the upload button
       past the cabinet edge at tablet widths. */
#utility-upload-form > #utility-file {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* RU: Флажок сам по себе мелкий, поэтому цель касания — вся строка с подписью.
   EN: A checkbox is small on its own, so the tap target is the whole row with its caption. */
body.biz .biz-check {
  min-height: var(--k-tap-min);
}

/* RU: Заголовки разделов не прячутся под прилипшей лентой, когда к ним переходят по якорю.
   EN: Section headings do not hide under the stuck chip row when reached by an anchor. */
#step-edit h3[id],
#biz-overview {
  scroll-margin-top: calc(var(--k-tap-min) + var(--k-s-5));
}

/* ——— Баннеры заявок на права / Rights-claim banners ——— */
.biz-claims {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-3);
  margin: 0 0 var(--k-s-4);
}

.biz-claims[hidden] {
  display: none;
}

.biz-claim {
  padding: var(--k-s-4);
  border: 1px solid var(--k-border);
  border-left: 4px solid var(--k-info);
  border-radius: var(--k-r-3);
  background: var(--k-info-soft);
  color: var(--k-text);
}

/* RU: Отказ — тоном предупреждения, а не ошибки: это не поломка, а решение, после которого есть что делать.
   EN: A rejection uses the warning tone, not the error one: it is not a breakage but a decision with a next step. */
.biz-claim.is-warn {
  border-left-color: var(--k-warn);
  background: var(--k-warn-soft);
}

.biz-claim-title {
  display: block;
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
  margin-bottom: var(--k-s-1);
}

.biz-claim p {
  margin: var(--k-s-1) 0 0;
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
}

.biz-claim-reason span {
  font-weight: 700;
}

.biz-claim-when {
  color: var(--k-text-muted);
}

.biz-claim button {
  margin-top: var(--k-s-3);
}

/* ——— Лента разделов / Section chip row ——— */
/* RU: Лента прилипает к верху окна и листается вбок, а не переносится: в две строки она съела бы треть экрана
       телефона. Фон непрозрачный — иначе поля формы просвечивали бы сквозь чипы при прокрутке.
   EN: The row sticks to the top of the window and scrolls sideways instead of wrapping: two lines would eat a third
       of a phone screen. The background is opaque — otherwise form fields would show through the chips on scroll. */
.biz-sections {
  position: sticky;
  top: 0;
  z-index: var(--k-z-panel);
  display: flex;
  gap: var(--k-s-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: var(--k-s-3) calc(-1 * var(--k-s-2)) var(--k-s-4);
  padding: var(--k-s-2);
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-border-soft);
}

.biz-sections::-webkit-scrollbar {
  display: none;
}

.biz-sections a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap-min);
  padding: 0 var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-pill);
  background: var(--k-surface-2);
  color: var(--k-text);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.biz-sections a:hover {
  border-color: var(--k-brand);
}

.biz-sections a[aria-current="true"] {
  background: var(--k-brand-soft);
  border-color: var(--k-brand);
  color: var(--k-brand-ink);
}

.biz-sections a:focus-visible {
  outline: none;
  box-shadow: var(--k-focus);
}

/* ——— Здоровье карточки / Card health ——— */
.biz-health {
  margin: 0 0 var(--k-s-5);
  padding: var(--k-s-4);
  background: var(--k-surface-2);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-3);
}

.biz-health h3 {
  margin: 0 0 var(--k-s-2);
  font-size: var(--k-fs-5);
  line-height: var(--k-lh-title-s);
}

.biz-health-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--k-s-2) var(--k-s-3);
}

.biz-health-head strong {
  font-size: var(--k-fs-7);
  line-height: var(--k-lh-head);
  font-variant-numeric: tabular-nums;
  color: var(--k-text);
}

.biz-health-head.is-ok strong {
  color: var(--k-ok);
}

.biz-health-head span {
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  color: var(--k-text-muted);
}

/* RU: Полоса — стандартный <progress>, перекрашенный токенами; appearance снят, иначе Safari рисует свою синюю.
   EN: The bar is a standard <progress> repainted with tokens; appearance is reset, otherwise Safari draws its own blue. */
.biz-health-meter {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--k-s-2);
  margin: var(--k-s-2) 0 var(--k-s-3);
  border: 0;
  border-radius: var(--k-r-pill);
  background: var(--k-surface-3);
  overflow: hidden;
}

.biz-health-meter::-webkit-progress-bar {
  background: var(--k-surface-3);
}

.biz-health-meter::-webkit-progress-value {
  background: var(--k-brand);
}

.biz-health-meter::-moz-progress-bar {
  background: var(--k-brand);
}

.biz-health-head.is-ok + .biz-health-meter::-webkit-progress-value {
  background: var(--k-ok);
}

.biz-health-head.is-ok + .biz-health-meter::-moz-progress-bar {
  background: var(--k-ok);
}

.biz-health-sub {
  margin: 0 0 var(--k-s-1);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  font-weight: 700;
}

.biz-health-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* RU: Строка пробела — что, зачем и кнопка. Кнопка справа и не сжимается: она и есть действие строки.
   EN: A gap row — what, why and a button. The button sits on the right and does not shrink: it is the row's action. */
.biz-health-list li {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr auto;
  align-items: center;
  gap: var(--k-s-2) var(--k-s-3);
  padding: var(--k-s-2) 0;
  border-bottom: 1px solid var(--k-border-soft);
}

.biz-health-list li:last-child {
  border-bottom: 0;
}

.biz-health-list .biz-ghost {
  margin-top: 0;
}

.biz-health-label {
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
  font-weight: 600;
}

.biz-health-why {
  font-size: var(--k-fs-2);
  color: var(--k-text-muted);
  line-height: var(--k-lh-sm);
}

.biz-health-done {
  margin: var(--k-s-2) 0 0;
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  color: var(--k-text-muted);
}

.biz-health-how {
  margin-top: var(--k-s-2);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  color: var(--k-text-muted);
}

/* RU: list-item, а не flex: у flex-summary Chrome прячет треугольник, и строка перестаёт выглядеть раскрываемой.
       Высота цели касания набирается отступами.
   EN: list-item rather than flex: Chrome hides the triangle on a flex summary, and the line stops looking expandable.
       The tap-target height comes from padding. */
.biz-health-how summary {
  cursor: pointer;
  display: list-item;
  padding-block: var(--k-s-3);
}

.biz-health-how p {
  margin: 0;
  line-height: var(--k-lh-normal);
}

/* ——— Заявки клиентов / Customer requests ——— */
/* RU: Чип статуса — слово в плашке. Тон дублирует слово, а не заменяет его (см. leadStatusChip).
   EN: A status chip is a word on a pill. The tone duplicates the word rather than replacing it (see leadStatusChip). */
.biz-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k-s-2);
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-border);
  background: var(--k-surface-2);
  color: var(--k-text-muted);
  font-size: var(--k-fs-1);
  line-height: var(--k-lh-cap);
  font-weight: 600;
  white-space: nowrap;
}

.biz-chip.is-new {
  background: var(--k-brand-soft);
  border-color: var(--k-brand);
  color: var(--k-brand-ink);
}

.biz-chip.is-done {
  background: var(--k-ok-soft);
  border-color: var(--k-ok);
  color: var(--k-text);
}

.biz-lead-item .biz-lead-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2);
  margin-top: var(--k-s-1);
}

.biz-lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-2);
  margin-top: var(--k-s-2);
}

.biz-lead-actions .biz-ghost {
  margin-top: 0;
}

/* RU: Пустой список заявок — рамкой, а не серой строкой: это инструкция, её должны прочесть.
   EN: An empty request list comes as a framed block rather than a grey line: it is an instruction meant to be read. */
.biz-empty {
  padding: var(--k-s-4);
  border: 1px dashed var(--k-border-strong);
  border-radius: var(--k-r-3);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  color: var(--k-text-muted);
}

.biz-empty a {
  color: var(--k-brand-ink);
  font-weight: 600;
}

.biz-empty.is-error {
  color: var(--k-danger);
  border-color: var(--k-danger);
}

/* ——— Телефон / Phone ——— */
/* RU: Одна колонка и поля от края до края: на 360 px ширины каждая лишняя рамка отнимает место у текста.
   EN: One column and edge-to-edge fields: at 360 px wide every extra frame takes room from the text. */
@media (max-width: 640px) {
  .biz-main {
    padding: var(--k-s-4) var(--k-s-3) var(--k-s-8);
  }

  .biz-card {
    padding: var(--k-s-4) var(--k-s-3);
  }

  .biz-health-list li {
    grid-template-columns: 1fr auto;
  }

  .biz-health-why {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .biz-row,
  .biz-actions,
  .biz-lead-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .biz-row > *,
  .biz-actions > * {
    width: 100%;
  }

  /* RU: Переключатель периода статистики — исключение: четыре коротких кнопки столбиком заняли бы экран.
     EN: The stats period switch is an exception: four short buttons in a column would fill the screen. */
  #stats-days {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #stats-days > * {
    width: auto;
  }

  .biz-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}