/* Номер и владелец (р0.5д): страница номеров контакта и шторки «Открепить» / «Прикрепить». Макет ContactPhones; строки привязки и «Это другой человек…» в «Звонках» — макет Calls. Только var(--…) токенов пакета, классы rd-ph-* и rd-calls-*. */

.rd-ph { display: flex; flex-direction: column; gap: 18px; min-width: 0; font-family: var(--font); color: var(--text-body); }
.rd-ph *, .rd-ph *::before, .rd-ph *::after { box-sizing: border-box; }
.rd-ph .rd-head__aside .rd-btn { font-size: var(--fs-body); font-weight: 500; }
.app a.rd-ph-a { color: var(--text-primary); text-decoration: none; }
.app .rd-dl a.rd-ph-a { color: var(--brand-blue-text); }
.rd-ph-cols { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.rd-ph-main { flex: 1 1 auto; min-width: 0; }
.rd-ph-main .rd-card__head { align-items: center; }
.rd-ph-main .rd-card__title { white-space: nowrap; }
.rd-ph-main .rd-card__meta { margin-left: 0; }
.rd-ph-main .rd-card__act { margin-left: auto; }
.rd-ph-side { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
.rd-ph-sm { height: 32px; padding: 0 12px; font-size: var(--fs-meta); }
.rd-ph-note { margin: 8px 0; font-size: var(--fs-meta); color: var(--text-muted); }
.rd-ph-err { margin: 8px 0; font-size: var(--fs-body); color: var(--state-late-text); }

/* Таблица номеров: номер, привязан, звонков, действие */
.rd-ph-g { display: grid; grid-template-columns: minmax(0, 1fr) 230px 90px 150px; column-gap: 16px; align-items: center; }
.rd-ph-hd { padding: 4px 12px 8px; font-size: var(--fs-label); color: var(--text-muted); }
.rd-ph-r { padding: 12px; border-top: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-body); color: var(--text-primary); }
.rd-ph-r--on { background: var(--brand-blue-soft); border-top-color: transparent; }
.rd-ph-r--past { color: var(--text-muted); }
.rd-ph-n { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rd-ph-r--past .rd-ph-n { color: var(--text-secondary); }
.rd-ph-tag { margin-left: 8px; padding: 3px 8px; border-radius: var(--r-chip); background: var(--bg-page); font-size: var(--fs-label); color: var(--text-secondary); white-space: nowrap; }
.rd-ph-why { display: block; font-size: var(--fs-label); color: var(--text-muted); }
.rd-ph-num { font-variant-numeric: tabular-nums; }
.rd-ph-end { text-align: right; }
.rd-ph-now { font-size: var(--fs-meta); color: var(--brand-blue-text); }
.rd-ph-hh { padding: 18px 12px 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }

/* Как устроено */
.rd-ph-ru { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.45; color: var(--text-secondary); }
.rd-ph-ru:first-of-type { border-top: 0; padding-top: 0; }
.rd-ph-ru b { font-weight: 600; color: var(--text-primary); }

/* Срок у телефона в карточке контакта */
.rd-ph-since { font-size: var(--fs-meta); color: var(--text-muted); }

/* Шторки: вопрос с вариантами, выбор контакта, «Что произойдёт» */
.rd-ph-q__t { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.rd-ph-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rd-ph-op { display: flex; gap: 12px; align-items: flex-start; width: 100%; height: auto; padding: 14px; border: 0; border-radius: 12px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--line-strong); text-align: left; font-family: inherit; cursor: pointer; }
.rd-ph-op--on { background: color-mix(in srgb, var(--brand-blue) 3%, var(--bg-surface)); box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
.rd-ph-rb { width: 16px; height: 16px; margin-top: 2px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--text-disabled); }
.rd-ph-op--on .rd-ph-rb { box-shadow: inset 0 0 0 4.5px var(--brand-blue); }
.rd-ph-op__t { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.rd-ph-op__s { display: block; margin-top: 3px; font-size: var(--fs-meta); line-height: 1.4; color: var(--text-secondary); }
.rd-ph-seek { margin-top: 8px; }
.rd-ph-pk { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--r-button); background: var(--bg-page); font-size: var(--fs-body); color: var(--text-primary); }
.rd-ph-pk .rd-mono { width: 26px; height: 26px; border-radius: 13px; font-size: 10px; }
.rd-ph-pk__nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rd-ph-lnk { padding: 0; border: 0; background: none; font-size: var(--fs-meta); color: var(--text-muted); cursor: pointer; }
.rd-ph-lnk:hover { color: var(--brand-blue-text); }
.rd-ph-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rd-ph-hits:empty { display: none; }
.rd-ph-hit { padding: 8px 12px; border: 0; border-radius: var(--r-button); background: var(--bg-page); text-align: left; font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; }
.rd-ph-hit:hover { background: var(--bg-hover); }
.rd-ph-ro { display: flex; align-items: center; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rd-ph-hint { margin: 0; font-size: var(--fs-label); line-height: 1.45; color: var(--text-muted); }
.rd-ph-res { padding: 14px 16px; border-radius: 12px; background: var(--bg-page); }
.rd-ph-res__h { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }
.rd-ph-ef { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: var(--fs-body); line-height: 1.45; color: var(--text-primary); }
.rd-ph-dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; flex-shrink: 0; transform: translateY(-1px); }
.rd-ph-dot--ok { background: var(--state-ok); }
.rd-ph-dot--wait { background: var(--state-wait); }
.rd-ph-dot--idle { background: var(--state-idle); }
.rd-ph-dot--late { background: var(--state-late); }

/* «Звонки»: строка привязки в ленте, срок у телефона, контакт из номера, «Это другой человек…» */
.rd-calls-sys.rd-calls-bind { max-width: 86%; padding: 5px 12px; border-radius: 10px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-primary); text-align: center; line-height: 1.4; }
.rd-calls-sys.rd-calls-bind svg { color: var(--brand-blue); }
.rd-calls-num { font-variant-numeric: tabular-nums; }
.rd-calls-since { display: block; font-size: var(--fs-label); color: var(--text-muted); }
.rd-calls-add { width: 100%; justify-content: center; margin-top: 10px; }
.rd-calls-addf { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rd-calls-addf > label { font-size: var(--fs-label); color: var(--text-muted); }
.rd-calls-addf .rd-input { height: 36px; width: 100%; font-size: var(--fs-body); }
.rd-calls-addn { padding: 8px 10px; border-radius: 8px; background: var(--bg-page); font-size: var(--fs-label); line-height: 1.4; color: var(--text-secondary); }
.rd-calls-addb { display: flex; gap: 8px; }
.rd-calls-addb > :first-child { flex-grow: 1; }
.rd-calls-addb > :first-child .rd-btn { width: 100%; justify-content: center; }
.rd-calls-other { margin-top: 10px; font-size: var(--fs-meta); }
.rd-calls-oth { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rd-calls-ob { display: block; width: 100%; height: auto; padding: 8px 10px; border: 0; border-radius: var(--r-button); background: var(--bg-page); text-align: left; font-family: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); cursor: pointer; }
.rd-calls-ob:hover { background: var(--bg-hover); }
.rd-calls-ob span { display: block; margin-top: 2px; font-size: var(--fs-label); font-weight: 400; line-height: 1.35; color: var(--text-muted); }

/* Планшет: колонка «Как устроено» уходит под таблицу */
@media (max-width: 1279px) {
  .rd-ph-cols { flex-direction: column; align-items: stretch; }
  .rd-ph-side { width: auto; }
}

/* Телефон, §4 пакета: строка номера в две строки, действие во всю ширину, строки не ниже 48 */
@media (max-width: 767px) {
  .rd-ph-main .rd-card__head { flex-wrap: wrap; }
  .rd-ph-main .rd-card__meta { flex-basis: 100%; order: 3; }
  .rd-ph-hd { display: none; }
  .rd-ph-g { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .rd-ph-r { padding: 12px 0; border-radius: 0; min-height: 48px; }
  .rd-ph-r--on { padding: 12px; border-radius: 10px; }
  .rd-ph-end { text-align: left; }
  .rd-ph-cell:nth-child(3) { text-align: right; }
  .rd-ph-cell:nth-child(4) { grid-column: 1 / -1; }
  .rd-ph-cell:nth-child(4) .rd-btn { width: 100%; min-height: 44px; justify-content: center; }
  .rd-ph-hh { padding-left: 0; }
  .rd-ph-op { min-height: 48px; }
  .rd-calls-ob { min-height: 48px; }
}