/* JUST Forms - отчет. Только этот экран, общие ui.css и tokens.css не трогаем.
   Палитра экрана: слоновая кость, уголь, апельсин. Пепел и дым - служебная подложка.
   Серии диаграмм: --data-1 апельсин, --data-2 синие чернила, --data-3 уголь. Лайма нет.
   Полосок по верхнему краю панелей нет и не будет: постоянный запрет владельца. */

.rmain{padding-bottom:64px}
.rcol{display:grid;gap:18px;align-content:start}

/* ---------- заголовки ---------- */
/* Интерлиньяж по брендбуку: заголовок = кегль * 0,94, основной текст * 1,25 */
.rhead{padding:28px 0 22px;border-bottom:1px solid var(--rule)}
.rhead h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(25px,3vw,40px);line-height:.94;margin:0;
  max-width:26ch;text-wrap:balance;
}
.rnote{margin:14px 0 0;max-width:62ch;font-size:14px;color:var(--muted)}

.panel__head h2{
  font-family:var(--font-display);font-weight:700;
  font-size:14px;line-height:.94;letter-spacing:.02em;margin:0;text-transform:uppercase;
}
h3.sub{
  font-size:12px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:28px 0 0;padding-top:16px;border-top:1px solid var(--rule);
}
h4.sub--deep{
  font-family:var(--font-text);font-weight:400;font-size:15px;line-height:1.25;
  margin:22px 0 0;text-transform:none;letter-spacing:0;color:var(--ink);border:0;padding:0;
}

/* ---------- фильтр ---------- */
.filters{margin:20px 0 0}
.filters__title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.filters__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters__out{margin:12px 0 0;font-size:13px;color:var(--muted)}

.fld{display:inline-grid;gap:5px}
.fld--block{display:grid;margin:0 0 16px}
.fld__cap{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.fld select,.fld input[type=text]{
  min-height:40px;padding:0 12px;background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  font-size:15px;max-width:100%;
}
.fld select{padding-right:8px}

/* ---------- цифры ---------- */
.kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.kpi__note{line-height:1.25}

.npstile{
  display:grid;gap:4px;padding:18px;margin:0 0 20px;
  border:1px solid var(--ink);border-radius:var(--radius);
}
.npstile__num{font-family:var(--font-display);font-size:clamp(40px,6vw,64px);line-height:.94}
.npstile__unit{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.npstile__how{font-size:13px;color:var(--muted);max-width:58ch;margin-top:6px}

/* ---------- полосы ---------- */
.bars{list-style:none}
.rmain .bars{margin-top:16px}
.rmain .bar{grid-template-columns:minmax(140px,280px) minmax(0,1fr) 112px}
.rmain .bar__label{white-space:normal;overflow:visible;text-overflow:clip}
.rmain .bar__val{white-space:nowrap;color:var(--muted)}
.bar__n{font-variant-numeric:tabular-nums;color:var(--ink)}
.bar__pct{color:var(--muted);font-variant-numeric:normal}
.bar__drop{color:var(--orange)}

.denom{margin:12px 0 0;font-size:13px;line-height:1.25;color:var(--muted);max-width:74ch}
.denom--lead{margin:0 0 16px}
.story{margin:14px 0 0;font-size:15px;line-height:1.25;max-width:70ch}
.hintline{margin:10px 0 0;font-size:13px;line-height:1.25;color:var(--muted);max-width:74ch}
.privnote{
  margin:0 0 14px;padding:10px 12px;font-size:13px;line-height:1.25;
  background:var(--ash);border:1px solid var(--rule-strong);border-radius:var(--radius);
}

/* ---------- цифрами под диаграммой ---------- */
.nums{margin:14px 0 0}
.nums summary{
  display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);cursor:pointer;padding:4px 0;text-decoration:underline;
}
.nums[open] summary{margin-bottom:6px}
.nums summary::marker{color:var(--rule-strong)}

table.rtab{table-layout:auto}
table.rtab caption{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:0 0 8px;
}
table.rtab th[scope=row]{font-weight:400;color:var(--ink)}
table.rtab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
/* запятая в табличном начертании получает место под знак: разряд держим табличным, запятую - нет */
.sep{font-variant-numeric:normal}
table.rtab th.num{text-align:right}
table.rtab td .why{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

/* ---------- последние ответы ---------- */
.rmain .list li{border-bottom:1px solid var(--rule)}
.rmain .list li:last-child{border-bottom:0}
.rmain .list__item{border-bottom:0;min-height:var(--tap)}
.panel__body--tight{padding:12px 18px}

/* ---------- карточки разбора ---------- */
.fixcard{
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px;display:grid;gap:8px;justify-items:start;
}
.fixcard:last-child{margin-bottom:0}
.fixcard__t{margin:0;font-size:16px;line-height:1.25}
.fixcard__b{margin:0;font-size:14px;line-height:1.25;color:var(--muted)}

/* ---------- диалоги параметров ---------- */
.dlg{
  width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 48px);
  padding:0;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);overflow:auto;
}
.dlg--wide{width:min(680px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(21,21,21,.55)}
.dlg__in{padding:22px;display:grid;gap:0}
.dlg__h{
  font-family:var(--font-display);font-weight:700;font-size:20px;line-height:.94;
  margin:0 0 10px;
}
.dlg__lede{margin:0 0 18px;font-size:14px;line-height:1.25;color:var(--muted)}
.dlg__note{margin:4px 0 0;font-size:13px;line-height:1.25;color:var(--muted)}
.dlg__foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.fs{border:1px solid var(--rule);border-radius:var(--radius);padding:12px 14px;margin:0 0 16px}
.fs legend{padding:0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.chk{display:flex;gap:10px;align-items:flex-start;min-height:32px;padding:5px 0;font-size:15px;line-height:1.25}
.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange);flex:0 0 auto}

.meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 20px;font-size:14px}
.meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-top:2px}
.meta dd{margin:0;line-height:1.25}
.rtab--answer{margin-bottom:16px}

/* ---------- строка состояния ---------- */
.status{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;
  max-width:min(520px,calc(100vw - 32px));margin:0;
  padding:12px 16px;font-size:14px;line-height:1.25;
  background:var(--ink);color:var(--paper);border-radius:var(--radius);
  display:none;
}
.status--on{display:block}

/* ---------- наведение только там, где есть курсор ---------- */
/* Урок iOS 18.09: :hover залипает после тапа, и подсвеченной выглядит не та строка. */
@media (hover:none){
  .rmain .list__item:hover{background:transparent}
  .rmain .card:hover,.rmain .btn:hover,.rmain .btn--ghost:hover{background:inherit}
}
@media (hover:hover) and (pointer:fine){
  .nums summary:hover{color:var(--ink)}
  .rmain .list__item:hover{background:var(--faint)}
}

/* ---------- раскладка ---------- */
@media (max-width:1024px){
  .cols--report{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:700px){
  /* шапка: логотип сверху, обе кнопки одной строкой под ним */
  .topbar__in{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;padding-block:10px;min-height:0}
  .topbar__in .brand{grid-column:1 / -1}
  .topbar__spacer{display:none}
  .topbar__in .btn{width:100%;padding:0 10px}

  .rmain{padding-bottom:48px}
  .rhead{padding:20px 0 18px}
  .rmain .panel__body{padding:12px}
  .rmain .panel__head{padding:12px}
  .panel__body--tight{padding:10px 12px}

  /* KPI по два в ряд */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px}
  .kpi__num{font-size:28px}
  .kpi__label,.kpi__note{font-size:11px}

  /* воронка одной колонкой: подпись, число, полоса под ними */
  .rmain .bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:14px}
  .rmain .bar__track{grid-column:1 / -1;order:3;height:16px}
  .rmain .bar__val{order:2}

  /* список ответов карточками */
  .rmain .list{padding:12px}
  .rmain .list li,.rmain .list li:last-child{border-bottom:0}
  .rmain .list__item{
    border:1px solid var(--rule-strong);border-radius:var(--radius);
    padding:12px;margin-bottom:8px;
  }
  .rmain .list li:last-child .list__item{margin-bottom:0}

  /* таблицы влезают в 390px без горизонтальной прокрутки */
  table.rtab{font-size:12.5px}
  table.rtab th,table.rtab td{padding:7px 5px;overflow-wrap:anywhere}
  table.rtab thead th{font-size:10px}
  table.rtab .num{padding-left:4px}
  table.rtab caption{font-size:10px}

  .filters__row{gap:10px}
  .filters__row .fld{flex:1 1 150px}
  .filters__row .btn{flex:0 0 auto}
  .npstile{padding:14px}
  .dlg__in{padding:16px}
  .meta{grid-template-columns:minmax(0,1fr)}
  .meta dd{margin-bottom:6px}
}

@media (max-width:360px){
  .kpis{grid-template-columns:minmax(0,1fr)}
}