/* «Таможенный калькулятор ЕС» /{lang}/services/customs (aero2/customs_calc/page.py, страница сервера).
   Вид А/Б/В — токены --sk-* из css/skins/{a,b,c}.css, только под html[data-skin]. Телефон 375 — одна колонка,
   монитор — форма слева, расчёт справа. Без прокрутки вбок: таблицы переносят текст, суммы не рвутся. */

html[data-skin] .home-search-dock { display: none !important; }  /* форма поиска шапки — не здесь, как в ads */

html[data-skin] .customs-main { padding: 24px 0 48px; background: var(--sk-page-bg, #fff); }
html[data-skin] .cu-page { max-width: var(--sk-wrap); margin: 0 auto; padding: 0 var(--sk-gut); box-sizing: border-box;
  color: var(--sk-ink); font-family: var(--sk-font); }
html[data-skin] .cu-page h1 { font: 600 clamp(22px, 3vw, 30px)/1.25 var(--sk-font); margin: 0 0 8px; }
html[data-skin] .cu-page h2 { font: 600 18px/1.3 var(--sk-font); margin: 0 0 12px; }
html[data-skin] .cu-page h3 { font: 600 15px/1.3 var(--sk-font); margin: 20px 0 8px; }
html[data-skin] .cu-lead { color: var(--sk-muted); margin: 0 0 20px; max-width: 72ch; line-height: 1.55; }
html[data-skin] .cu-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
html[data-skin] .cu-col { min-width: 0; }

/* форма */
html[data-skin] .cu-form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--sk-line);
  border-radius: var(--sk-r, 10px); background: #fff; box-shadow: var(--sk-shadow, none); }
html[data-skin] .cu-pair { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html[data-skin] .cu-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-skin] .cu-field label { font-size: 13px; color: var(--sk-muted); }
html[data-skin] .cu-field input,
html[data-skin] .cu-field select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; font: 16px var(--sk-font);
  color: var(--sk-ink); background: #fff; border: 1px solid var(--sk-line); border-radius: 8px; }
html[data-skin] .cu-field input:focus,
html[data-skin] .cu-field select:focus { outline: 2px solid var(--sk-ink); outline-offset: 1px; }
html[data-skin] .cu-field.is-bad input,
html[data-skin] .cu-field.is-bad select { border-color: var(--sk-accent); }
html[data-skin] .cu-hint { font-size: 12px; color: var(--sk-muted); }
html[data-skin] .cu-submit { min-height: 46px; padding: 10px 18px; font: 600 16px var(--sk-font); color: #fff; cursor: pointer;
  background: var(--sk-accent); border: 1px solid var(--sk-accent); border-radius: var(--sk-login-r, 999px); }

/* расчёт */
html[data-skin] .cu-result { margin: 0 0 20px; }
html[data-skin] .cu-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
html[data-skin] .cu-table th,
html[data-skin] .cu-table td { padding: 10px 0; border-bottom: 1px solid var(--sk-line); vertical-align: top; text-align: left; }
html[data-skin] .cu-table th { font-weight: 500; overflow-wrap: anywhere; padding-right: 12px; }
html[data-skin] .cu-table td { width: 9.5em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-skin] .cu-words { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--sk-muted); line-height: 1.45; }
html[data-skin] .cu-src { margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--sk-muted); overflow-wrap: anywhere; }
html[data-skin] .cu-src a { color: var(--sk-muted); }
html[data-skin] .cu-warn { font-weight: 600; color: var(--sk-ink); }
html[data-skin] .cu-nodata { color: var(--sk-accent); font-weight: 600; white-space: normal; }
html[data-skin] .cu-total th,
html[data-skin] .cu-total td { font-weight: 700; font-size: 17px; border-bottom: 2px solid var(--sk-ink); }
html[data-skin] .cu-landed th,
html[data-skin] .cu-landed td { color: var(--sk-muted); }
html[data-skin] .cu-note { font-size: 13px; color: var(--sk-muted); line-height: 1.5; margin: 10px 0 0; }
html[data-skin] .cu-error { padding: 12px 14px; border: 1px solid var(--sk-accent); border-radius: 8px; color: var(--sk-ink); }
html[data-skin] .cu-how p { line-height: 1.55; color: var(--sk-muted); }

/* ставки */
html[data-skin] .cu-rates { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--sk-line); max-width: 760px; }
html[data-skin] .cu-table--rates td { width: 7em; }
html[data-skin] .cu-table--rates thead th { font-size: 12px; color: var(--sk-muted); text-align: right; }
html[data-skin] .cu-table--rates thead th:first-child { text-align: left; }

@media (max-width: 420px) {
  html[data-skin] .cu-table td { width: 7.5em; }
  html[data-skin] .cu-table--rates td { width: 5.5em; white-space: normal; }
}
@media (min-width: 960px) {
  html[data-skin] .cu-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  html[data-skin] .cu-form { position: sticky; top: calc(var(--sk-hd-h, 60px) + 16px); }
}