/* Компоненты редизайна — классы rd-*, docs/contract-r0.md. Поток K.
   Только var(--…) токенов пакета (docs/forush-redesign/tokens.css, они же в
   kernel.css). Ни одного цветового литерала. Телефон — max-width 767px. */

.rd-card, .rd-fx, .rd-pop, .rd-sheet, .rd-route, .rd-seg, .rd-stages, .rd-feed,
.rd-table, .rd-dl, .rd-empty, .rd-row { font-family: var(--font); box-sizing: border-box; }
.rd-card *, .rd-fx *, .rd-pop *, .rd-sheet *, .rd-route *, .rd-stages *, .rd-feed * { box-sizing: border-box; }

/* Card */
.rd-card { background: var(--bg-surface); border-radius: var(--r-card); padding: var(--card-pad); color: var(--text-body); font-size: var(--fs-body); }
.rd-card__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rd-card__title { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-card-title); color: var(--text-primary); }
.rd-card__meta { margin-left: auto; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-card__act { margin-left: auto; font-size: var(--fs-meta); color: var(--brand-blue-text); }
.rd-card__meta + .rd-card__act { margin-left: 12px; }

/* Шапка записи */
.rd-head { display: flex; align-items: center; gap: 18px; }
.rd-head__body { flex: 1; min-width: 0; }
.rd-head__meta { font-size: var(--fs-meta); color: var(--text-muted); }
.rd-head__title { margin: 2px 0 6px; font-size: var(--fs-page-title); font-weight: var(--fw-page-title); letter-spacing: var(--ls-page-title); color: var(--text-primary); line-height: 1.15; overflow-wrap: anywhere; }
.rd-head__ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--text-secondary); }
.rd-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 28px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Фокус-блок */
.rd-fx { display: flex; align-items: center; gap: 24px; background: var(--fx-grad); color: var(--bg-surface); border-radius: var(--r-card); padding: 18px 24px; }
.rd-fx__body { flex: 1; min-width: 0; }
.rd-fx__kicker { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--fx-kicker); }
.rd-fx__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--state-late); }
.rd-fx__title { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--bg-surface); }
.rd-fx__sub { margin: 4px 0 0; font-size: var(--fs-body); color: var(--fx-sub); }
.rd-fx__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rd-fx .rd-btn--soft { background: var(--fx-btn); color: var(--bg-surface); }
.rd-fx .rd-btn--soft:hover { background: var(--rail-active); }
.rd-fx .rd-btn--ghost { color: var(--bg-surface); }
.rd-fx .rd-btn--ghost:hover { background: var(--fx-btn); }
.rd-fx a { color: var(--bg-surface); }

/* Кнопки */
.rd-btn-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 16px; border: none; border-radius: var(--r-button); font: inherit; font-size: var(--fs-body); font-weight: 500; cursor: pointer; white-space: nowrap; }
.rd-btn--pri { background: var(--brand-blue); color: var(--bg-surface); }
.rd-btn--pri:hover { background: var(--brand-blue-text); }
.rd-btn--soft { background: var(--bg-page); color: var(--text-primary); padding: 0 14px; }
.rd-btn--soft:hover { background: var(--bg-hover); }
.rd-btn--ghost { background: transparent; color: var(--text-body); padding: 0 12px; }
.rd-btn--ghost:hover { background: var(--bg-hover); }
.rd-btn--off, .rd-btn--off:hover { cursor: not-allowed; }
.rd-btn--pri.rd-btn--off, .rd-btn--pri.rd-btn--off:hover { background: var(--state-idle); color: var(--bg-surface); }
.rd-btn--soft.rd-btn--off, .rd-btn--ghost.rd-btn--off { color: var(--text-disabled); }
.rd-btn--soft.rd-btn--off:hover, .rd-btn--ghost.rd-btn--off:hover { background: transparent; }
.rd-btn--soft.rd-btn--off:hover { background: var(--bg-page); }
.rd-btn__why { font-size: var(--fs-meta); color: var(--text-secondary); max-width: 320px; white-space: normal; }
.rd-btn__why[hidden] { display: none; }

/* Состояние */
.rd-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-state__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--state-idle); }
.rd-state--late .rd-state__dot { background: var(--state-late); }
.rd-state--wait .rd-state__dot { background: var(--state-wait); }
.rd-state--ok .rd-state__dot { background: var(--state-ok); }
.rd-state--idle .rd-state__dot { background: var(--state-idle); }
.rd-state--late.rd-state--strong { color: var(--state-late-text); font-weight: 700; }

/* Метка направления и монограмма делят цвета направления */
.rd-dir { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-chip); font-size: var(--fs-label); font-weight: 500; white-space: nowrap; }
.rd-dir--erp  { background: var(--dir-erp-bg);  color: var(--dir-erp-fg); }
.rd-dir--buh  { background: var(--dir-buh-bg);  color: var(--dir-buh-fg); }
.rd-dir--zup  { background: var(--dir-zup-bg);  color: var(--dir-zup-fg); }
.rd-dir--roz  { background: var(--dir-roz-bg);  color: var(--dir-roz-fg); }
.rd-dir--none { background: var(--dir-none-bg); color: var(--dir-none-fg); }
.rd-mono { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; border-radius: var(--r-monogram); padding: 0; letter-spacing: 0; }
.rd-mono--20 { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }
.rd-mono--28 { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.rd-mono--34 { width: 34px; height: 34px; font-size: var(--fs-label); }
.rd-mono--56 { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }

/* Сегмент */
.rd-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-page); border-radius: 11px; }
.rd-seg__opt { height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.rd-seg__opt:hover { color: var(--text-primary); }
.rd-seg__opt[aria-checked="true"] { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-black) 12%, transparent); }

/* Строка списка */
.rd-row { display: flex; align-items: center; gap: 12px; min-height: var(--row-min-h); padding: 6px 0; font-size: var(--fs-body); color: var(--text-body); }
.rd-row + .rd-row { border-top: 1px solid var(--line); }
.rd-row--on { background: var(--brand-blue-soft); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.rd-row__lead { display: inline-flex; flex-shrink: 0; }
.rd-row__main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rd-row__trail { margin-left: auto; flex-shrink: 0; font-size: var(--fs-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Список полей */
.rd-dl { margin: 0; display: grid; }
.rd-dl__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.rd-dl dt { font-size: var(--fs-body); color: var(--text-muted); }
.rd-dl dd { margin: 0; font-size: var(--fs-body); color: var(--text-primary); overflow-wrap: anywhere; }

/* Таблица */
.rd-table-wrap { width: 100%; }
.rd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); color: var(--text-body); }
.rd-table th { padding: 0 10px 8px; text-align: left; font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.rd-table td { padding: 11px 10px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.rd-table th:first-child, .rd-table td:first-child { padding-left: 0; }
.rd-table th:last-child, .rd-table td:last-child { padding-right: 0; }
.rd-table .rd-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Полоса */
.rd-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rd-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--brand-blue); }
.rd-bar--late .rd-bar__fill { background: var(--state-late); }
.rd-bar--wait .rd-bar__fill { background: var(--state-wait); }
.rd-bar--ok .rd-bar__fill { background: var(--state-ok); }
.rd-bar--idle .rd-bar__fill { background: var(--state-idle); }

/* Стадии */
.rd-stages__list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rd-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rd-stage__seg { height: 6px; border-radius: 3px; background: var(--line-strong); }
.rd-stage--past .rd-stage__seg { background: var(--brand-blue-past); }
.rd-stage--now .rd-stage__seg { background: var(--brand-blue); }
.rd-stage__label { font-size: var(--fs-meta); color: var(--text-secondary); overflow-wrap: anywhere; }
.rd-stage--now .rd-stage__label { color: var(--text-primary); font-weight: 600; }
.rd-stage__days { font-size: var(--fs-label); color: var(--text-muted); }
.rd-stages__cap { display: none; margin: 8px 0 0; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-stages--flat .rd-stages__list { gap: 4px; }
.rd-stages--flat .rd-stage { min-height: 34px; padding: 0 12px; justify-content: center; border-radius: 8px; background: var(--bg-page); }
.rd-stages--flat .rd-stage--past { background: var(--brand-blue-soft); }
.rd-stages--flat .rd-stage--now { background: var(--brand-blue); }
.rd-stages--flat .rd-stage__seg, .rd-stages--flat .rd-stage__days { display: none; }
.rd-stages--flat .rd-stage--now .rd-stage__label { color: var(--bg-surface); }

/* Маршрут обращения */
.rd-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rd-route__opt { display: block; height: auto; text-align: left; padding: 12px 14px; border: none; border-radius: 12px; background: var(--bg-page); color: var(--text-primary); font: inherit; cursor: pointer; }
.rd-route__opt:hover { background: var(--bg-hover); }
.rd-route__opt--on, .rd-route__opt--on:hover { background: var(--brand-blue-soft); color: var(--brand-blue-text); box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
.rd-route__opt--off, .rd-route__opt--off:hover { background: var(--bg-page); color: var(--text-disabled); cursor: not-allowed; }
.rd-route__name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 500; }
.rd-route__key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--dir-none-bg); color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; }
.rd-route__hint { display: block; margin-top: 4px; font-size: var(--fs-label); font-weight: 400; color: var(--text-muted); }
.rd-route__why { display: block; margin-top: 6px; font-size: var(--fs-label); font-weight: 400; color: var(--text-secondary); }

/* Лента */
.rd-feed__day + .rd-feed__day { margin-top: 18px; }
.rd-feed__title { margin: 0 0 8px; font-size: var(--fs-group); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); }
.rd-feed__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rd-feed__item { display: flex; align-items: flex-start; gap: 12px; }
.rd-feed__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-page); color: var(--text-secondary); }
.rd-feed__body { flex: 1; min-width: 0; }
.rd-feed__text { font-size: var(--fs-body); color: var(--text-body); overflow-wrap: anywhere; }
.rd-feed__meta { margin-top: 2px; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-feed__time { flex-shrink: 0; font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Пустое состояние */
.rd-empty { padding: 28px 8px; text-align: center; }
.rd-empty__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.rd-empty__line { margin: 6px 0 0; font-size: var(--fs-body); color: var(--text-secondary); }
.rd-empty__act { display: flex; justify-content: center; margin-top: 16px; }

/* Окно поверх и шторка */
.rd-scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); }
.rd-pop { width: 960px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-body); border-radius: 18px; box-shadow: var(--shadow-pop); outline: none; }
.rd-pop__head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 8px; }
.rd-pop__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.rd-pop__x { margin-left: auto; padding: 0; width: var(--btn-h); }
.rd-pop__body { padding: 8px 24px 24px; overflow: auto; font-size: var(--fs-body); }
.rd-scrim--sheet { align-items: flex-end; padding: 0; }
.rd-sheet { width: 560px; max-width: 100%; max-height: 90%; display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-body); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-sheet); outline: none; padding-bottom: env(safe-area-inset-bottom); }
.rd-sheet__grip { align-self: center; width: 36px; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--line-strong); }
.rd-sheet .rd-pop__head { padding-top: 10px; }

/* Планшет: таблицы с 5+ колонками прокручиваются внутри карточки */
@media (max-width: 1023px) {
  .rd-table-wrap { overflow-x: auto; }
  .rd-table { min-width: 560px; }
}

/* Телефон, docs/forush-redesign/DESIGN_SYSTEM.md §4 */
@media (max-width: 767px) {
  .rd-card { border-radius: 14px; padding: 16px; }
  .rd-btn { height: 48px; border-radius: 12px; }
  .rd-btn--ghost { padding: 0 12px; }
  .rd-row { min-height: 48px; }
  .rd-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .rd-head__title { font-size: 22px; }
  .rd-head__aside { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; font-size: 24px; }
  .rd-fx { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-radius: 14px; }
  .rd-fx__acts { justify-content: stretch; }
  .rd-fx__acts .rd-btn { flex: 1; }
  .rd-seg { max-width: 100%; overflow-x: auto; }
  .rd-seg__opt { height: 42px; }
  .rd-dl__row { grid-template-columns: 110px minmax(0, 1fr); }
  .rd-btn__why { max-width: none; }
  .rd-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-route__opt { min-height: 48px; }

  /* Стадии: полоска и подпись «Название · 3 из 6» */
  .rd-stages__list { gap: 4px; }
  .rd-stage__label, .rd-stage__days { display: none; }
  .rd-stages__cap { display: block; }
  .rd-stages--flat .rd-stage { min-height: 8px; padding: 0; background: transparent; }
  .rd-stages--flat .rd-stage__seg { display: block; }

  /* Таблица: строкой — название и мета слева, число справа */
  .rd-table-wrap { overflow-x: visible; }
  .rd-table { min-width: 0; }
  .rd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rd-table, .rd-table tbody { display: block; }
  .rd-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 48px; padding: 10px 0; border-top: 1px solid var(--line); }
  .rd-table tr:first-child { border-top: none; }
  .rd-table td { display: block; padding: 0; border: none; }
  .rd-table td:first-child { flex: 1 1 60%; min-width: 0; color: var(--text-primary); }
  .rd-table td.rd-table__num { margin-left: auto; }

  /* Поля ввода в окнах и шторках: 48 / 16px, чтобы iOS не увеличивал */
  .rd-pop input, .rd-pop select, .rd-pop textarea,
  .rd-sheet input, .rd-sheet select, .rd-sheet textarea,
  .rd-card input, .rd-card select, .rd-card textarea { min-height: 48px; font-size: 16px; }

  .rd-scrim { padding: 12px; }
  .rd-pop { border-radius: 14px; }
  .rd-pop__head, .rd-pop__body { padding-left: 16px; padding-right: 16px; }
  .rd-sheet { width: 100%; }
}

/* Галерея редизайна (?kit): раскладка стенда, не компонент */
.app.rd-gal { width: auto; min-height: 0; display: block; }
.rd-gal { padding: 32px var(--page-pad-x); background: var(--bg-page); font-family: var(--font); color: var(--text-body); }
.rd-gal__head h1 { margin: 0; font-size: var(--fs-page-title); font-weight: var(--fw-page-title); letter-spacing: var(--ls-page-title); color: var(--text-primary); }
.rd-gal__head p { margin: 4px 0 0; font-size: var(--fs-body); color: var(--text-secondary); }
.rd-gal__spec { margin-top: 32px; }
.rd-gal__title { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-card-title); color: var(--text-primary); }
.rd-gal__note { margin: 4px 0 12px; max-width: 760px; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-gal__stand { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); }
.rd-gal__case { min-width: 0; max-width: 100%; }
.rd-gal__case:has(.rd-card) { flex: 1 1 340px; }
.rd-gal__case:has(.rd-head), .rd-gal__case:has(.rd-fx), .rd-gal__case:has(.rd-route), .rd-gal__case:has(.rd-stages) { flex: 1 1 100%; }
.rd-gal__case:has(.rd-bar) { width: 220px; }
.rd-gal__cap { margin-top: 6px; font-size: var(--fs-label); color: var(--text-secondary); }
.rd-gal__p { margin: 0 0 12px; font-size: var(--fs-body); }
.rd-gal__p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .app.rd-gal { width: auto; min-height: 0; display: block; }
.rd-gal { padding: 16px; }
  .rd-gal__stand { gap: 12px; }
  .rd-gal__case { flex: 1 1 100%; }
}

/* Причина у поля формы — строкой текста под полем, а не плашкой (§1.4 пакета:
   «не прятать, а объяснять» — рядом, словами). Выведенный слой (`derived.css`,
   заморожен) красит `.catch--stop` сплошным `--high`, и на новом, более тёмном
   токене пустая форма встречала человека стеной красных полос (29.09). */
.app [data-style="derived"] .ask .catch--stop,
.app .ask .catch--stop {
  background: none; color: var(--state-late-text); padding: 0; margin-top: 6px;
  font-size: var(--fs-meta); border-radius: 0;
}
.app [data-style="derived"] .ask .catch--warn,
.app .ask .catch--warn {
  background: none; color: var(--dir-roz-fg); padding: 0; margin-top: 6px;
  font-size: var(--fs-meta); border-radius: 0;
}