/* Структурная основа денежных блоков и диаграмм.
   Цвет, кегль и ритм задаются переменными — вариант их переопределяет,
   а при желании переписывает правила целиком. DESIGN_DIRECTIONS.md §8. */

/* Токены НЕ объявляются на самих компонентах: объявление на .inv перебивало бы
   переопределение с родителя, и тёмная тема молча получала светлые значения.
   Поэтому значение по умолчанию стоит в месте использования, вторым аргументом
   var() — тогда любой предок может задать своё, и оно наследуется. */

/* Защита от правил самого варианта: он красит теги header/footer/table
   по-своему, и мой документ ловил чужой фон. Поэтому и теги нейтральные,
   и фон здесь сбрасывается явно. */
/* Та же причина, что и у блока кода: документ стоит в колонке сетки, и его
   min-content становился минимумом трека. Колонки таблицы отбрасываются
   контейнерными запросами, так что сжиматься ей есть куда. */
.inv { min-width: 0; }

.inv, .inv * { background-color: transparent; }
.inv { background: var(--inv-bg, #fff); }

/* ---- документ -------------------------------------------------------- */

.inv {
  background: var(--inv-bg, #fff);
  color: var(--inv-fg, #14161a);
  border-radius: var(--inv-radius, 0px);
  padding: var(--inv-pad, 28px);
  container-type: inline-size;
}

.inv__head {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
}
.inv__no { font: 600 15px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.04em; }
.inv__dates { display: flex; gap: 18px; color: var(--inv-dim, #5c6470); font-size: 13px; }

.inv__parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
}
@container (max-width: 460px) { .inv__parties { grid-template-columns: 1fr; } }
.inv__party { display: grid; gap: 3px; align-content: start; }
.inv__plabel {
  font: 10.5px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--inv-dim, #5c6470);
}
.inv__pname { font-weight: 600; font-size: 15px; }
.inv__paddr, .inv__pvat { color: var(--inv-dim, #5c6470); font-size: 13px; line-height: 1.5; }
.inv__pvat { font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; }

/* min-width сбрасывается намеренно: у №22 есть правило table{min-width:900px},
   и моя таблица вылезала из своей колонки на 300 px. Тот же класс столкновения,
   что и с тегами header/footer выше. */
.inv__lines {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin-top: 4px;
  font: inherit;
}
.inv__lines th {
  text-align: left; padding: 12px 10px 8px 0;
  font: 10.5px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--inv-dim, #5c6470);
  border-bottom: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
}
.inv__lines td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14)); font-size: 14px; }
.inv__lines tr:last-child td { border-bottom: 0; }
.inv__c-id { width: 1%; color: var(--inv-dim, #5c6470); font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; }
.inv__c-qty, .inv__c-price, .inv__c-amt { text-align: right; white-space: nowrap; font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); }
.inv__c-amt { font-weight: 600; }
.inv__c-qty i { font-style: normal; color: var(--inv-dim, #5c6470); font-size: 11.5px; }
th.inv__c-qty, th.inv__c-price, th.inv__c-amt { text-align: right; }
/* Порог поднят с 460 до 580: у №30 колонка под инвойс всего 527 px, и пять
   столбцов упирались в минимальную ширину — таблица вылезала на 42 px.
   Цена за единицу выводится из суммы и количества, поэтому прячется первой. */
@container (max-width: 580px) {
  .inv__c-price, th.inv__c-price { display: none; }
}
@container (max-width: 420px) {
  .inv__c-qty i { display: none; }          /* единица измерения — вторая на выбывание */
}
/* Третья ступень. На 320 таблице нужен 251 px в поле 210 — она вылезала
   за скруглённый край карточки на 14 px, и линейки строк резали её рамку.
   Уходит номер строки (он ничего не сообщает), а описанию разрешается
   рвать длинные слова: «Onboarding workshop, Amsterdam» иначе держит
   колонку шире, чем есть места. */
@container (max-width: 340px) {
  .inv__c-id, th.inv__c-id { display: none; }
  .inv__lines { table-layout: fixed; }
  .inv__c-name { overflow-wrap: anywhere; }
}

.inv__totals { margin-top: 6px; border-top: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14)); }
.inv__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 9px 0; font-size: 14px;
}
.inv__row span { color: var(--inv-dim, #5c6470); }
.inv__row b { font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); font-weight: 600; }
.inv__row[data-due] { border-top: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14)); padding-top: 14px; margin-top: 4px; }
.inv__row[data-due] span { color: var(--inv-fg, #14161a); font-weight: 600; }
.inv__due { font-size: clamp(24px, 5cqi, 38px); letter-spacing: -0.02em; line-height: 1; }
.inv__due .inv__sym { font-style: normal; opacity: 0.6; margin-right: 2px; }
.inv__due .inv__cents { font-style: normal; font-size: 0.55em; opacity: 0.6; }

.inv__pay {
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
  color: var(--inv-dim, #5c6470); font: 12px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace);
}

/* ---- крупная сумма --------------------------------------------------- */

.amt { display: grid; gap: 10px; }
.amt__label {
  font: 11px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--inv-dim, #5c6470);
}
.amt__v { display: flex; align-items: baseline; line-height: 0.86; }
.amt__sym { font-style: normal; font-size: 0.42em; opacity: 0.55; margin-right: 0.08em; }
.amt__whole { font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.amt__cents { font-style: normal; font-size: 0.34em; opacity: 0.55; margin-left: 0.1em; align-self: flex-start; }

/* ---- полоса долей ---------------------------------------------------- */

.cbar__track {
  display: flex; height: 14px; border-radius: 99px; overflow: hidden;
  background: var(--inv-rule, rgb(20 22 26 / 0.14));
}
.cbar__seg { width: var(--w); background: var(--inv-accent, #0f766e); }
.cbar__seg[data-i="1"] { opacity: 0.78; }
.cbar__seg[data-i="2"] { opacity: 0.56; }
.cbar__seg[data-i="3"] { opacity: 0.36; }
.cbar__key { margin-top: 16px; display: grid; gap: 9px; }
.cbar__key li {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 12px;
  align-items: baseline; font-size: 13.5px;
}
.cbar__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--inv-accent, #0f766e); }
.cbar__key li[data-i="1"] .cbar__dot { opacity: 0.78; }
.cbar__key li[data-i="2"] .cbar__dot { opacity: 0.56; }
.cbar__key li[data-i="3"] .cbar__dot { opacity: 0.36; }
.cbar__val { font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); font-weight: 600; }
.cbar__pc { font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); color: var(--inv-dim, #5c6470); width: 4ch; text-align: right; }

/* ---- кольцо ---------------------------------------------------------- */

.dnt { position: relative; display: inline-grid; place-items: center; }
.dnt svg { display: block; }
.dnt__arc { stroke: var(--inv-accent, #0f766e); }
.dnt__arc[data-i="1"] { opacity: 0.78; }
.dnt__arc[data-i="2"] { opacity: 0.56; }
.dnt__arc[data-i="3"] { opacity: 0.36; }
.dnt__mid { position: absolute; display: flex; align-items: baseline; font-family: var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); }
.dnt__mid i { font-style: normal; opacity: 0.55; font-size: 0.6em; }
.dnt__mid b { font-size: 1.5em; letter-spacing: -0.03em; }

/* ---- тарифы столбиками ----------------------------------------------- */

.pbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
@media (max-width: 560px) { .pbar { grid-template-columns: repeat(2, 1fr); } }
.pbar li { display: grid; gap: 8px; align-content: end; }
.pbar__col {
  height: var(--h); min-height: 4px; background: var(--inv-rule, rgb(20 22 26 / 0.14)); border-radius: 3px 3px 0 0;
}
.pbar li[data-hl="true"] .pbar__col { background: var(--inv-accent, #0f766e); }
.pbar li[data-open="true"] .pbar__col {
  background: repeating-linear-gradient(135deg, var(--inv-rule, rgb(20 22 26 / 0.14)) 0 5px, transparent 5px 10px);
}
.pbar__p { font: 600 19px/1 var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: -0.02em; }
.pbar__p i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--inv-dim, #5c6470); }
.pbar__n { font-size: 12.5px; color: var(--inv-dim, #5c6470); }

/* Под столбцом — что это за тариф. Одна цена без объёма не отвечает на
   вопрос, за что платят; диаграмма при этом остаётся диаграммой. */
.pbar__q {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--inv-dim, #5c6470);
  text-wrap: pretty;
}

/* ---- тарифы карточками с составом ------------------------------------ */

/* auto-fit, а не фиксированные четыре колонки: тарифов стало три, и жёсткая
   сетка оставляла бы пустую четверть ряда. Так раскладка верна при любом
   их числе. */
.pcard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}
.pcard > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
  border-radius: 16px;
}
.pcard > li[data-hl="true"] {
  border-color: var(--inv-accent, #0f766e);
  box-shadow: inset 0 2px 0 var(--inv-accent, #0f766e);
}
.pcard__name {
  font: 11px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--inv-dim, #5c6470);
}
.pcard__p {
  font: 700 clamp(26px, 3.4vw, 34px)/1 var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: -0.03em;
}
.pcard__p i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--inv-dim, #5c6470); }
.pcard__q { font-size: 13.5px; color: var(--inv-dim, #5c6470); }
.pcard__inc { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.pcard__inc li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}
.pcard__inc li::before {
  content: "";
  margin-top: 6px;
  width: 9px; height: 9px;
  border-left: 1.5px solid var(--inv-accent, #0f766e);
  border-bottom: 1.5px solid var(--inv-accent, #0f766e);
  transform: rotate(-45deg);
}
.pcard__cta {
  margin-top: auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14));
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.pcard > li[data-hl="true"] .pcard__cta {
  background: var(--inv-accent, #0f766e);
  border-color: var(--inv-accent, #0f766e);
  color: var(--inv-on-accent, #fff);
}

/* ---- находки валидатора ---------------------------------------------- */

.fbar { display: grid; gap: 12px; }
.fbar li {
  display: grid; grid-template-columns: 2.5ch 1fr; gap: 4px 14px; align-items: center;
}
.fbar__n { font: 700 22px/1 var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); }
.fbar__b { height: 10px; width: var(--w); background: var(--inv-accent, #0f766e); border-radius: 99px; }
.fbar li[data-lvl="fatal"] .fbar__b { background: var(--inv-bad, #b3261e); }
.fbar li[data-lvl="fatal"] .fbar__n { color: var(--inv-bad, #b3261e); }
.fbar__l {
  grid-column: 2; font: 10.5px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--inv-dim, #5c6470);
}
.fbar__r { grid-column: 2; font: 12px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); color: var(--inv-dim, #5c6470); }

/* ---- веер форматов --------------------------------------------------- */

.fan { display: grid; grid-template-columns: auto 90px 1fr; gap: 0 12px; align-items: center; }
@media (max-width: 640px) { .fan { grid-template-columns: 1fr; } .fan__wire { display: none; } }
.fan__in {
  font: 11px var(--inv-num, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 14px; border: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14)); border-radius: 6px; white-space: nowrap;
}
.fan__wire { width: 90px; height: 100%; }
.fan__wire path { stroke: var(--inv-accent, #0f766e); opacity: 0.55; }
.fan__out { display: grid; gap: 10px; }
.fan__out li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; border: 1px solid var(--inv-rule, rgb(20 22 26 / 0.14)); border-radius: 6px;
}
.fan__out b { font-weight: 600; font-size: 14px; }
.fan__out span { color: var(--inv-dim, #5c6470); font-size: 12.5px; }