/* ============================================================
   ОТЗЫВЫ В АНКЕТЕ — лента и форма
   theme/dist-tutor/css/page_review/block.css

   Было: бутстраповская float-сетка, дежурная «рожица» 92×92 на месте
   фото автора и вкладки-таблетки старого набора. Стало: карточка с
   монограммой автора, звёздами и текстом, вкладки и кнопка — пилюли
   в облике «Класса».

   Разметка: theme/dist-tutor/tpl/frm/review/{review,list}.tpl.
   Классы .review, .reviewlist, .nav-reviews, .nav-review-*, .noreviews,
   .btn-morereviews, .open_review/.close_review, .status_review держит
   user/js/profile.js — их имена сохранены.

   Ловушки портала (AGENTS.md): 1rem = 10px, глобальное * { margin: 0 auto }
   расталкивает флекс-детей, бутстраповские клирфиксы лезут в грид —
   отсюда явные margin и префикс .dt-rvws.
   ============================================================ */

.dt-rvws { margin: 0; }
.dt-rvws *, .dt-rvws *:before, .dt-rvws *:after { box-sizing: border-box; }
.dt-rvws * { margin-left: 0; margin-right: 0; }

/* ---------- вкладки ---------- */

.dt-rvws ul.nav-reviews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    border: 0;
    box-shadow: none;
}
.dt-rvws ul.nav-reviews > li { margin: 0; float: none; }
.dt-rvws ul.nav-reviews > li > a {
    display: inline-block;
    min-height: 38px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .82);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 36px;
    color: #5c6678;
    text-decoration: none;
    text-shadow: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.dt-rvws ul.nav-reviews > li > a:hover {
    border-color: rgba(10, 132, 255, .28);
    background: rgba(255, 255, 255, .95);
    color: #0a84ff;
    text-decoration: none;
}
.dt-rvws ul.nav-reviews > li.active > a,
.dt-rvws ul.nav-reviews > li.active > a:hover {
    border-color: #0a84ff;
    background: #0a84ff;
    box-shadow: 0 10px 22px -14px rgba(10, 132, 255, .75);
    color: #fff;
}

/* ---------- карточка отзыва ---------- */

.dt-rvws .reviewlist { margin: 0; }

/* Разделительных линеек нет: отзывы разводит воздух и подложка облачка. */
.dt-rvws .dt-rvw {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.dt-rvws .reviewlist > .dt-rvw:last-child { margin-bottom: 0; }

/* Превью автора: фото кружком либо монограмма. Оттенок подбирается
   по имени (FormReview::reviewAvatar), чтобы соседние отзывы отличались. */
.dt-rvws .dt-rvw__ava {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 9999px;
    overflow: hidden;
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, sans-serif);
    font-size: 19px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.01em;
    user-select: none;
}
.dt-rvws .dt-rvw__photo {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.dt-rvws .dt-rvw__mono { margin: 0; }

.dt-rvws .dt-rvw__ava--t0 { background: #e0edff; color: #1d63c9; }
.dt-rvws .dt-rvw__ava--t1 { background: #e6f6ec; color: #16794a; }
.dt-rvws .dt-rvw__ava--t2 { background: #fdeee3; color: #b45309; }
.dt-rvws .dt-rvw__ava--t3 { background: #f0e9fd; color: #6d3fc4; }
.dt-rvws .dt-rvw__ava--t4 { background: #ffe9ef; color: #be2f5b; }
.dt-rvws .dt-rvw__ava--t5 { background: #e4f4f7; color: #0e7490; }

.dt-rvws .dt-rvw__body { flex: 1 1 auto; min-width: 0; margin: 0; }

.dt-rvws .dt-rvw__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 6px;
    padding: 0 4px;
}
.dt-rvws .dt-rvw__name {
    margin: 0;
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, sans-serif);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: #14243d;
    text-decoration: none;
}
.dt-rvws a.dt-rvw__name:hover { color: #0a84ff; text-decoration: none; }

/* Звёзды рисуем формой, а не шрифтом иконок: он на странице не везде. */
.dt-rvws .dt-rvw__stars { display: inline-flex; gap: 2px; margin: 0; }
.dt-rvws .dt-rvw__star {
    width: 14px;
    height: 14px;
    margin: 0;
    background: #dbe2ea;
    -webkit-mask: no-repeat center / 100% 100%;
    mask: no-repeat center / 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
}
.dt-rvws .dt-rvw__star.is-on { background: #f5a524; }

.dt-rvws .dt-rvw__date {
    margin: 0 0 0 auto;
    font-size: 12.5px;
    color: #a4b0c0;
    white-space: nowrap;
}

/* Облачко реплики. Хвостик — повёрнутый квадрат той же заливки, он же
   привязывает текст к монограмме слева. */
.dt-rvws .dt-rvw__bubble {
    position: relative;
    margin: 0;
    padding: 14px 18px;
    border-radius: 6px 20px 20px 20px;
    background: #f4f7fb;
}
.dt-rvws .dt-rvw__bubble:before {
    content: '';
    position: absolute;
    top: 12px;
    left: -5px;
    width: 12px;
    height: 12px;
    margin: 0;
    border-radius: 3px;
    background: inherit;
    transform: rotate(45deg);
}

.dt-rvws .dt-rvw__text {
    position: relative;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2c3e;
    overflow-wrap: anywhere;
}

.dt-rvws .dt-rvw__tag {
    display: inline-block;
    margin: 10px 8px 0 0;
    padding: 2px 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .9);
    font-size: 11.5px;
    line-height: 18px;
    color: #8a94a6;
}
.dt-rvws .dt-rvw__vis { display: inline-block; margin: 10px 0 0; font-size: 12px; color: #94a3b8; }
.dt-rvws .dt-rvw__vis i { margin: 0 0 0 4px; cursor: pointer; }

/* ---------- пусто и «ещё отзывы» ---------- */

.dt-rvws .noreviews {
    margin: 16px 0 0;
    padding: 24px 16px;
    border-radius: 18px;
    background: rgba(148, 163, 184, .08);
    font-size: 13.5px;
    color: #94a3b8 !important;
    text-align: center;
}

.dt-rvws .dt-rvws__more { margin: 14px 0 0; text-align: center; }
.dt-rvws .btn-morereviews {
    display: inline-block;
    min-height: 40px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 38px;
    color: #5c6678;
    text-shadow: none;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.dt-rvws .btn-morereviews:hover { border-color: rgba(10, 132, 255, .3); background: rgba(255, 255, 255, .95); color: #0a84ff; }

/* ---------- форма отзыва ----------
   Было: пустая textarea без подсказки, случайный текстовый инпут от
   элемента star, голые кружки радио вместо звёзд и зелёная кнопка.
   Стало: карточка, поле с подсказкой, сегменты «ученик/коллега»,
   свои звёзды на radio+label и синяя кнопка.
   Классы .reviewform, #letter_review, .btn-sendreview, .alert-add-review,
   .type_user/.typeuser держит user/js/profile.js. */

.dt-rvws .dt-rvws__form {
    margin: 22px 0 0;
    padding: 20px 22px 18px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
}
.dt-rvws .dt-rvws__formtitle {
    margin: 0 0 14px;
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, sans-serif);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: #14243d;
}

.dt-rvws .reviewform textarea,
.dt-rvws .dt-rvws__area {
    display: block;
    width: 100%;
    min-height: 104px;
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 18px;
    background: #fbfcfe;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: #0f172a;
    resize: vertical;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.dt-rvws .reviewform textarea::placeholder { color: #a4b0c0; }
.dt-rvws .reviewform textarea:focus {
    outline: none;
    border-color: rgba(10, 132, 255, .45);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, .12);
}

/* Скрытый текстовый инпут элемента star из старой формы больше не
   выводится, но если где-то всплывёт — не показываем. */
.dt-rvws .star-review-profile { display: none; }

.dt-rvws .dt-rvws__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0;
}
.dt-rvws .dt-rvws__label {
    margin: 0 2px 0 0;
    font-size: 12.5px;
    color: #94a3b8;
}

/* ---------- сегменты «ученик / коллега» ---------- */

.dt-rvws .dt-rvws__who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    float: none;
}
.dt-rvws .dt-rvws__who label,
.dt-rvws .dt-rvws__who .radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 14px;
    min-height: 34px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    color: #5c6678;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.dt-rvws .dt-rvws__who label:hover { border-color: rgba(10, 132, 255, .3); color: #0a84ff; }
.dt-rvws .dt-rvws__who input[type="radio"] { margin: 0; accent-color: #0a84ff; }

/* ---------- звёзды оценки ---------- */

.dt-rvws .dt-rvws__rate { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dt-rvws .dt-rvws__rate-stars {
    /* порядок в разметке 5→1, показываем 1→5: так работает подсветка
       «все звёзды левее наведённой» одними селекторами */
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
    margin: 0;
}
.dt-rvws .dt-rvws__rate-in {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.dt-rvws .dt-rvws__rate-lb {
    width: 26px;
    height: 26px;
    margin: 0;
    background: #dbe2ea;
    cursor: pointer;
    -webkit-mask: no-repeat center / 22px 22px;
    mask: no-repeat center / 22px 22px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
    transition: background-color .12s ease, transform .12s ease;
}
.dt-rvws .dt-rvws__rate-stars:hover .dt-rvws__rate-lb { background: #dbe2ea; }
.dt-rvws .dt-rvws__rate-lb:hover,
.dt-rvws .dt-rvws__rate-lb:hover ~ .dt-rvws__rate-lb,
.dt-rvws .dt-rvws__rate-in:checked ~ .dt-rvws__rate-lb { background: #f5a524; }
.dt-rvws .dt-rvws__rate-lb:hover { transform: scale(1.08); }
.dt-rvws .dt-rvws__rate-in:focus-visible + .dt-rvws__rate-lb { outline: 3px solid rgba(10, 132, 255, .28); outline-offset: 2px; }

/* ---------- кнопка ---------- */

.dt-rvws .dt-rvws__send { margin: 0 0 0 auto; }
.dt-rvws .btn-sendreview,
.dt-rvws .dt-rvws__send .btn {
    min-height: 42px;
    margin: 0 !important;
    padding: 0 22px;
    border: 1px solid #0a84ff;
    border-radius: 9999px;
    background: #0a84ff;
    background-image: none;
    box-shadow: 0 14px 26px -16px rgba(10, 132, 255, .95);
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 40px;
    color: #fff;
    text-shadow: none;
    cursor: pointer;
    transition: filter .16s ease;
}
.dt-rvws .btn-sendreview:hover { filter: brightness(1.05); background: #0a84ff; color: #fff; }
.dt-rvws .alert-add-review { border-radius: 16px; }

@media (max-width: 620px) {
    .dt-rvws .dt-rvw { gap: 10px; }
    .dt-rvws .dt-rvw__ava { width: 40px; height: 40px; font-size: 16px; }
    .dt-rvws .dt-rvw__date { margin: 0; width: 100%; }
    .dt-rvws .dt-rvw__bubble { padding: 12px 14px; border-radius: 6px 16px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-rvws ul.nav-reviews > li > a,
    .dt-rvws .btn-morereviews { transition: none; }
}