/* Поля формы — единственное место со скруглениями (Material Design 3 по DESIGN.md):
   .tf  — outlined text field: подпись внутри поднимается и уменьшается до .75 при фокусе или заполнении
          (input с placeholder=" "), фон подписи — бумага листа; ошибка — .tf.is-error, иконка .tf__err-ic;
   .seg — сегменты (radio в label > span), выбранный светло-синий с галочкой;
          .seg__i — тот же вид ссылками (фильтр без скрипта: ?rubric=…);
   .cb  — чекбокс (input + .cb__box в label.cb__row), ошибка — .cb__err под строкой. */

/* ---------- Текстовое поле ---------- */

.tf { position: relative; margin: 0 0 18px; }
.tf input, .tf textarea {
  display: block; width: 100%; min-width: 0; height: 56px;
  padding: 16px 44px 16px 16px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--graphite); border-radius: var(--r-field);
  font: 400 var(--fs-annotation)/1.4 var(--sans);
  transition: border-color .2s;
}
.tf textarea { height: auto; min-height: 112px; resize: vertical; }
.tf input:hover, .tf textarea:hover { border-color: var(--ink); }
.tf input:focus, .tf textarea:focus { outline: none; border: 2px solid var(--blue); padding: 15px 43px 15px 15px; }

.tf label {
  position: absolute; left: 12px; top: 16px;
  padding: 0 4px;
  background: var(--sheet, var(--paper));
  font-size: var(--fs-annotation); line-height: 24px; color: var(--graphite);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .2s var(--ease), color .2s;
}
.tf input:focus + label, .tf input:not(:placeholder-shown) + label,
.tf textarea:focus + label, .tf textarea:not(:placeholder-shown) + label { transform: translateY(-28px) scale(.75); }
.tf input:focus + label, .tf textarea:focus + label { color: var(--blue); }

.tf__support { display: flex; justify-content: space-between; gap: 12px; padding: 4px 16px 0; font-size: var(--fs-caption); line-height: 1.3; color: var(--graphite); }
.tf__count { font-size: var(--fs-micro); white-space: nowrap; }
.tf__err-ic { display: none; position: absolute; right: 14px; top: 18px; width: 20px; height: 20px; color: var(--red); }

.tf.is-error input, .tf.is-error textarea { border: 2px solid var(--red); padding: 15px 43px 15px 15px; }
.tf.is-error label, .tf.is-error .tf__support, .tf.is-error :focus + label { color: var(--red); }
.tf.is-error .tf__err-ic { display: block; }

/* ---------- Сегменты ---------- */

.seg { display: flex; flex-wrap: wrap; margin: 0 0 20px; padding: 0; border: 0; }
.seg legend { margin-bottom: 8px; padding: 0; font-size: var(--fs-caption); color: var(--graphite); }
.seg label { flex: 1 1 auto; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label span, .seg__i {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--graphite);
  font-size: var(--fs-label); font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.seg label + label span, .seg__i + .seg__i { margin-left: -1px; }
.seg label:first-of-type span, .seg__i:first-child { border-radius: var(--r-segment) 0 0 var(--r-segment); }
.seg label:last-of-type span, .seg__i:last-child { border-radius: 0 var(--r-segment) var(--r-segment) 0; }
.seg .ic { display: none; width: 16px; height: 16px; }
.seg label:hover span, .seg__i:hover { background: var(--side-l); color: var(--ink); }
.seg input:checked + span, .seg__i[aria-current] { background: var(--blue-tint); color: var(--blue-ink); }
.seg input:checked + span .ic, .seg__i[aria-current] .ic { display: block; }
.seg input:focus-visible + span, .seg__i:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
/* число в сегменте — графитом */
.seg__n { font-weight: 400; color: var(--graphite); }
.seg__i[aria-current] .seg__n { color: var(--blue-ink); }

/* не помещаются в строку — сетка 2×2 с общей рамкой и скруглёнными внешними углами */
@media (max-width: 479px) {
  .seg--grid { display: grid; grid-template-columns: 1fr 1fr; }
  .seg--grid label:nth-of-type(odd) span { margin-left: 0; }
  .seg--grid label:nth-of-type(n+3) span { margin-top: -1px; }
  .seg--grid label:nth-of-type(1) span { border-radius: var(--r-segment) 0 0 0; }
  .seg--grid label:nth-of-type(2) span { border-radius: 0 var(--r-segment) 0 0; }
  .seg--grid label:nth-of-type(3) span { border-radius: 0 0 0 var(--r-segment); }
  .seg--grid label:nth-of-type(4) span { border-radius: 0 0 var(--r-segment) 0; }
}

/* ---------- Чекбокс ---------- */

.cb { margin: 4px 0 16px; }
.cb__row { display: flex; align-items: flex-start; gap: 12px; min-height: 24px; font-size: var(--fs-small); cursor: pointer; }
.cb__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb__box {
  flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 2px;
  border: 2px solid var(--graphite); border-radius: var(--r-check);
  color: var(--on-blue);
  transition: background .15s, border-color .15s;
}
.cb__box .ic { width: 14px; height: 14px; opacity: 0; }
.cb__row:hover .cb__box { border-color: var(--ink); }
.cb__row input:checked + .cb__box { background: var(--blue); border-color: var(--blue); }
.cb__row input:checked + .cb__box .ic { opacity: 1; }
.cb__row input:focus-visible + .cb__box { outline: 2px solid var(--blue); outline-offset: 3px; }
.cb__err { padding: 4px 0 0 30px; font-size: var(--fs-caption); color: var(--red); }
.cb__err:empty { display: none; }
.cb.is-error .cb__box { border-color: var(--red); }