/* Панель формы и общие поля форм редизайна (docs/contract-r0.md, волна форм).
   Макеты: mockups/F_{TimeLog,OrderNew,ClientNew,ClientEdit,PartnerNew}.dc.html.
   Только var(--…) токенов пакета; цветовых литералов нет. Телефон — max-width 767px:
   панель встаёт шторкой снизу. */

/* ── Панель ──────────────────────────────────────────────────────────────── */
.rd-scrim--drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.rd-drawer, .rd-drawer * { box-sizing: border-box; }
.rd-drawer { width: 560px; max-width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-body); box-shadow: var(--shadow-pop); outline: none; font-family: var(--font); font-size: var(--fs-body); }
.rd-drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.rd-drawer__who { flex: 1; min-width: 0; }
.rd-drawer__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.rd-drawer__ctx { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; }
.rd-drawer__x { width: 36px; height: 36px; padding: 0; background: var(--bg-page); color: var(--text-primary); flex-shrink: 0; }
.rd-drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
.rd-drawer__foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--bg-surface); flex-shrink: 0; }
.rd-drawer__foot:empty { display: none; }
.rd-drawer__note { margin-left: auto; min-width: 0; font-size: var(--fs-meta); color: var(--text-muted); text-align: right; overflow-wrap: anywhere; }
.rd-drawer__note--bad { color: var(--state-late-text); }

/* ── Поле: подпись, ввод, подсказка, причина ─────────────────────────────── */
.rd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-field__label { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-field__opt { color: var(--text-faint); }
.rd-field__aside { margin-left: auto; color: var(--text-muted); }
.rd-field__hint { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-field__err { margin: 0; font-size: var(--fs-meta); color: var(--state-late-text); }
.rd-field__row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.rd-field__row > .rd-field { flex: 1; }
.rd-input { width: 100%; height: 40px; border: none; border-radius: var(--r-button); background: var(--bg-page); padding: 0 12px; font: inherit; font-size: var(--fs-body); color: var(--text-primary); }
.rd-input::placeholder { color: var(--text-faint); }
.rd-input:focus, .rd-input:focus-visible { outline: none; background: var(--bg-surface); box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
textarea.rd-input { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.45; resize: none; display: block; }
.rd-field--bad .rd-input, .rd-field--bad .rd-pick__btn { background: var(--bg-surface); box-shadow: inset 0 0 0 1.5px var(--state-late); }
.rd-unit { position: relative; display: flex; align-items: center; }
.rd-field__row > .rd-unit { flex: 0 0 132px; width: 132px; }
.rd-unit .rd-input { padding-right: 44px; }
.rd-unit__u { position: absolute; right: 12px; color: var(--text-muted); font-size: var(--fs-body); pointer-events: none; }

/* Родной выбор: стрелку рисует не система, а значок комплекта. */
.rd-selectwrap { position: relative; display: flex; align-items: center; }
.rd-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.rd-selectwrap__chev { position: absolute; right: 12px; color: var(--text-muted); display: inline-flex; pointer-events: none; }

/* ── Ряд чипов-сегментов ─────────────────────────────────────────────────── */
.rd-chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rd-chips .rd-seg { max-width: 100%; }
.rd-chips__step { font-size: var(--fs-meta); color: var(--text-muted); }
.rd-chips--wide { width: 100%; }
.rd-chips--wide .rd-seg { display: flex; width: 100%; }
.rd-chips--wide .rd-seg__opt { flex: 1; justify-content: center; height: 34px; }
.rd-drawer .rd-seg__opt { display: inline-flex; align-items: center; gap: 6px; }
.rd-chips--tall .rd-seg { display: flex; width: 100%; }
.rd-chips--tall .rd-seg__opt { flex: 1; height: auto; min-height: 48px; padding: 8px 10px; white-space: normal; }
.rd-chips__two { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.rd-chips__two b { font-weight: inherit; }
.rd-chips__two small { font-size: var(--fs-label); font-weight: 400; color: var(--text-muted); }

/* ── Выбор из списка с поиском (люди, клиенты) ───────────────────────────── */
.rd-pick { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-pick__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; border: none; border-radius: var(--r-button); background: var(--bg-page); padding: 0 12px; font: inherit; font-size: var(--fs-body); color: var(--text-primary); text-align: left; cursor: pointer; }
.rd-pick__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-blue); background: var(--bg-surface); }
.rd-pick__ph { color: var(--text-faint); }
.rd-pick__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-pick__sub { color: var(--text-muted); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-pick__chev { margin-left: auto; color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.rd-pick__pop { border-radius: 12px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-pop); overflow: hidden; }
.rd-pick__search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--text-faint); }
.rd-pick__search input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text-primary); }
.rd-pick__search input::placeholder { color: var(--text-faint); }
.rd-pick__list { max-height: 320px; overflow: auto; padding-bottom: 4px; }
.rd-pick__group { display: flex; gap: 8px; padding: 10px 12px 4px; font-size: var(--fs-group); font-weight: 600; color: var(--text-muted); }
.rd-pick__group span { font-weight: 400; }
.rd-pick__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: none; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text-primary); text-align: left; cursor: pointer; }
.rd-pick__opt:hover, .rd-pick__opt:focus-visible { background: var(--brand-blue-soft); outline: none; }
.rd-pick__opt[aria-selected="true"] { background: var(--brand-blue-soft); }
.rd-pick__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-pick__meta { font-size: var(--fs-label); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-pick__load { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; }
.rd-pick__tick { width: 16px; color: var(--brand-blue); display: inline-flex; flex-shrink: 0; }
.rd-pick__foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: var(--fs-label); color: var(--text-faint); }
.rd-pick__none { padding: 14px 12px; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-pick__link { display: block; width: 100%; padding: 10px 12px; border: none; border-top: 1px solid var(--line); background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--brand-blue-text); text-align: left; cursor: pointer; }
.rd-pick__link:hover, .rd-pick__link:focus-visible { background: var(--brand-blue-soft); outline: none; }
.rd-pick mark { background: color-mix(in srgb, var(--state-wait) 22%, var(--bg-surface)); color: inherit; border-radius: 3px; padding: 0 1px; }
.rd-pick__tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-chip); background: var(--dir-none-bg); color: var(--dir-none-fg); font-size: var(--fs-label); }
.rd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--state-idle); }
.rd-dot--ok { background: var(--state-ok); }
.rd-dot--wait { background: var(--state-wait); }
.rd-dot--late { background: var(--state-late); }

/* ── Сводка «станет на наряде» и предупреждения ──────────────────────────── */
.rd-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--bg-page); }
.rd-sum__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-sum__big { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rd-sum__track { display: flex; height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }
.rd-sum__was { background: var(--brand-blue); }
.rd-sum__add { background: var(--brand-blue-past); }
.rd-sum__was, .rd-sum__add { display: block; height: 100%; }
.rd-sum__legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-label); color: var(--text-muted); }
.rd-sum__legend b { font-weight: 500; color: var(--text-secondary); }
.rd-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--state-late) 8%, var(--bg-surface)); color: var(--state-late-text); font-size: var(--fs-body); line-height: 1.4; }
.rd-warn .rd-dot { margin-top: 7px; background: var(--state-late); }
.rd-note { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-note--wait { color: var(--state-late-text); }
.rd-note a { color: var(--brand-blue-text); }
.rd-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rd-cost { display: flex; align-items: baseline; padding: 12px 16px; border-radius: 10px; background: var(--bg-page); font-size: var(--fs-body); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rd-cost b { margin-left: auto; font-size: var(--fs-body); color: var(--text-primary); }
.rd-drawer__wait { padding: 24px 0; color: var(--text-muted); font-size: var(--fs-meta); }

/* ── Телефон: шторка снизу ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rd-scrim--drawer { align-items: flex-end; justify-content: stretch; }
  .rd-drawer { width: 100%; height: auto; max-height: 92%; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow-sheet); }
  .rd-drawer__head { padding: 18px 16px 14px; }
  .rd-drawer__body { padding: 16px; gap: 18px; }
  .rd-drawer__foot { flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rd-drawer__note { order: -1; flex-basis: 100%; margin-left: 0; text-align: left; }
  .rd-drawer__foot .rd-btn { flex: 1; }
  .rd-input { height: 48px; font-size: 16px; border-radius: 12px; }
  textarea.rd-input { min-height: 96px; }
  .rd-pick__btn { height: 48px; border-radius: 12px; font-size: 16px; }
  .rd-pick__search input { font-size: 16px; }
  .rd-pick__opt { min-height: 48px; }
  .rd-field__row { flex-wrap: wrap; }
  .rd-drawer .rd-seg { max-width: 100%; overflow-x: auto; }
  .rd-drawer .rd-seg__opt { height: 42px; }
}

/* ── Формы лида и человека (волна форм 2) ────────────────────────────────── */
.rd-group { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rd-group__head { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.rd-phone { display: grid; grid-template-columns: 148px 1fr; gap: 8px; min-width: 0; }
.rd-phone .rd-select { text-overflow: ellipsis; }
.rd-link { align-self: flex-start; padding: 0; border: none; background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--brand-blue-text); cursor: pointer; }
.rd-link:hover, .rd-link:focus-visible { text-decoration: underline; outline: none; }
.rd-fold { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.rd-fold__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: none; background: transparent; font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer; }
.rd-fold__head:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-blue); border-radius: var(--r-button); }
.rd-fold__note { font-weight: 400; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-fold__chev { margin-left: auto; display: inline-flex; color: var(--text-muted); transition: transform 0.15s ease; }
.rd-fold__chev--open { transform: rotate(90deg); }
.rd-fold__body { display: flex; flex-direction: column; gap: 14px; }

/* Блоки правки человека: каждый записывается своей кнопкой. */
.rd-block { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rd-block:last-child { border-bottom: none; padding-bottom: 0; }
.rd-block__head { display: flex; align-items: baseline; gap: 10px; }
.rd-block__head h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.rd-block__n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-page); color: var(--text-muted); font-size: var(--fs-label); font-weight: 600; align-self: center; }
.rd-block__sub { font-size: var(--fs-meta); color: var(--text-muted); }
.rd-block__foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.rd-block__note { flex: 1; min-width: 0; font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; }
.rd-block__note--ok { color: var(--state-ok); }
.rd-block__note--bad { color: var(--state-late-text); }
.rd-drawer__note--left { margin-left: 0; text-align: left; flex: 1; }
.rd-places { display: flex; flex-direction: column; }
.rd-place { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rd-place:first-child { border-top: none; }
.rd-place__mono { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--dir-none-bg); color: var(--dir-none-fg); font-size: var(--fs-label); font-weight: 600; flex-shrink: 0; }
.rd-place__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-place__name { font-size: var(--fs-body); color: var(--text-primary); }
.rd-place__meta { font-size: var(--fs-label); color: var(--text-muted); }
.rd-place__tag { font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; }
.rd-place--over .rd-place__name { color: var(--text-muted); }
.rd-place__end { height: 30px; font-size: var(--fs-meta); }

/* ── Разбор лида: широкая панель с колонкой дел ──────────────────────────── */
.rd-drawer--wide { width: 860px; }
.rd-drawer--wide .rd-drawer__body { gap: 16px; }
.rd-uns { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--state-wait) 14%, var(--bg-surface)); font-size: var(--fs-meta); color: var(--text-primary); }
.rd-uns .rd-dot { margin: 0; }
.rd-uns__text { flex: 1; min-width: 0; }
.rd-work { display: flex; gap: 24px; align-items: flex-start; min-width: 0; }
.rd-steps { width: 196px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.rd-step { height: auto; min-height: 44px; display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 10px; border: none; border-radius: 10px; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; }
.rd-step:hover, .rd-step:focus-visible { background: var(--bg-hover); outline: none; }
.rd-step[aria-current="step"] { background: var(--brand-blue-soft); }
.rd-step__n { width: 24px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-page); color: var(--text-secondary); font-size: var(--fs-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-step[aria-current="step"] .rd-step__n { background: var(--brand-blue); color: var(--bg-surface); }
.rd-step__text { display: flex; flex-direction: column; min-width: 0; }
.rd-step__name { font-weight: 500; line-height: 24px; }
.rd-step__sub { font-size: var(--fs-label); color: var(--text-muted); }
.rd-step__dirty { font-size: var(--fs-label); font-weight: 500; color: var(--state-late-text); margin-top: 2px; }
.rd-steps__note { margin: 10px 0 0; padding: 14px 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-label); line-height: 1.45; color: var(--text-muted); }
.rd-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rd-pane__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.rd-pane__sub { margin: -12px 0 0; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-count { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--bg-page); }
.rd-count__row { display: flex; align-items: baseline; gap: 10px; }
.rd-count__n { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rd-count__cap { font-size: var(--fs-meta); color: var(--text-muted); }
.rd-count__bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.rd-count__bar i { display: block; height: 100%; background: var(--brand-blue); }
.rd-count__list { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-clue { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: none; border-radius: 8px; background: var(--bg-surface); font: inherit; font-size: var(--fs-meta); color: var(--brand-blue-text); font-weight: 500; cursor: pointer; }
.rd-clue--full { color: var(--text-muted); font-weight: 400; }
.rd-clue:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
.rd-clue__i { width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-label); font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1.5px var(--brand-blue-past); color: var(--brand-blue-text); }
.rd-clue--full .rd-clue__i, .rd-need--ok .rd-clue__i { background: var(--state-ok); color: var(--bg-surface); box-shadow: none; }
.rd-search { display: flex; gap: 8px; }
.rd-search .rd-input { flex: 1; }
.rd-rows { display: flex; flex-direction: column; gap: 10px; }
.rd-rows__head { display: flex; align-items: baseline; justify-content: space-between; }
.rd-row { display: grid; grid-template-columns: 1fr 96px 36px; gap: 8px; align-items: center; }
.rd-row__item { min-width: 0; }
.rd-row__drop { width: 36px; height: 36px; padding: 0; }
.rd-row__err { grid-column: 1 / -1; }
.rd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.rd-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); min-width: 0; }
.rd-box__head { margin: 0; font-size: var(--fs-card-title); font-weight: 600; color: var(--text-primary); }
.rd-box__foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.rd-box__why { font-size: var(--fs-meta); color: var(--text-secondary); line-height: 1.4; }
.rd-box__why--bad { color: var(--state-late-text); }
.rd-needs { display: flex; flex-direction: column; gap: 8px; }
.rd-need { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-meta); color: var(--text-secondary); }
.rd-reasons { display: flex; flex-direction: column; }
.rd-reason { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 6px 0; border: none; background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--text-primary); text-align: left; cursor: pointer; line-height: 1.35; }
.rd-reason:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-blue); border-radius: 6px; }
.rd-reason__dot { width: 14px; height: 14px; border-radius: 7px; flex-shrink: 0; margin-top: 1px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.rd-reason[aria-checked="true"] .rd-reason__dot { box-shadow: inset 0 0 0 4px var(--brand-blue); }
@media (max-width: 767px) {
  .rd-drawer--wide { width: 100%; }
  .rd-phone { grid-template-columns: 1fr; }
  .rd-work { flex-direction: column; gap: 12px; }
  .rd-steps { width: 100%; flex-direction: row; overflow-x: auto; position: static; }
  .rd-step { width: auto; flex-shrink: 0; }
  .rd-steps__note { display: none; }
  .rd-two { grid-template-columns: 1fr; }
  .rd-row { grid-template-columns: 1fr 80px 44px; }
  .rd-row__drop { width: 44px; height: 44px; }
}
.rd-chips--wrap .rd-seg { display: flex; flex-wrap: wrap; height: auto; }
.rd-chips--wrap .rd-seg__opt { height: 32px; }
.rd-work, .rd-steps, .rd-step, .rd-uns, .rd-pane { flex-shrink: 0; }
.rd-pane { flex-shrink: 1; }