/* «Витрати» у Кирила (usage-04, 04.10.2026; LOGIC-usage.md, доски 15.1-15.3): лист «Витрати» из «Моє». Значения только через var(--...);
   цвета темы Б приходят из тех же переменных, своих цветов у экрана нет, кроме янтарной метки «запасна» (как «Не подобається» в «Нотатках»). */

@layer screens {
  .us { display: flex; flex-direction: column; gap: var(--sp-4); }
  .us-content { display: flex; flex-direction: column; gap: var(--sp-5); }
  .us-content[hidden], .us-state[hidden] { display: none; }
  .us-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .us-sum { display: flex; flex-direction: column; gap: var(--sp-2); }

  /* ---------- суммы: плашка из трёх колонок, между ними тонкая линия (15.2) ---------- */
  .us-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--sp-4) 0;
    border-radius: var(--r-card-l);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .us-tot { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: 0 var(--sp-3); }
  .us-tot:first-child { padding-left: var(--sp-4); }
  .us-tot + .us-tot { box-shadow: inset 1px 0 0 var(--line-2); }
  .us-tot__l { color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .us-tot__v { color: var(--ink); font: 700 var(--fs-display-m)/1.1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .us-free { margin: 0; color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }

  /* ---------- назначения месяца: название, вызовы, цена, доля и тонкая полоса доли ---------- */
  .us-sec { display: flex; flex-direction: column; gap: var(--sp-3); }
  .us-h { margin: 0; color: var(--ink); font: 600 var(--fs-section)/1.3 var(--font-ui); }
  .us-head, .us-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 60px 48px;
    column-gap: var(--sp-2);
    align-items: baseline;
  }
  .us-head { color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .us-head > :not(:first-child), .us-row > :not(:first-child):not(.us-row__bar) { text-align: right; font-variant-numeric: tabular-nums; }
  .us-row { row-gap: var(--sp-2); }
  .us-row__name { color: var(--ink); font: 500 var(--fs-body-s)/1.3 var(--font-ui); overflow-wrap: anywhere; }
  .us-row__n, .us-row__s { color: var(--ink-2); font: 500 var(--fs-hint)/1.3 var(--font-ui); }
  .us-row__p { color: var(--ink); font: 700 var(--fs-hint)/1.3 var(--font-ui); }
  .us-row__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
  .us-row__bar > i { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; background: var(--acc); }

  /* ---------- 30 дней: простые столбики, сегодня тёмный, над линией наибольшая сумма ---------- */
  .us-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 112px;
    margin-top: var(--sp-5);
    border-top: 1px solid var(--line-2);
  }
  .us-chart__max { position: absolute; right: 0; bottom: 100%; padding-bottom: var(--sp-1); color: var(--ink-2); font: 500 var(--fs-caption)/1 var(--font-ui); }
  .us-bar { flex: 1 1 0; min-width: 0; height: var(--h, 2px); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--ink-3); }
  .us-bar--zero { background: var(--line-2); }
  .us-bar--now { background: var(--acc); }
  .us-axis { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }

  /* ---------- «Найдорожчі виклики» (15.3): три строки, раскрытая строка плашкой с журналом ---------- */
  .us-calls { display: flex; flex-direction: column; }
  .us-call { border-bottom: 1px solid var(--line); }
  .us-call__head {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: var(--sp-3) 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
  }
  .us-call__l1 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  .us-call__name { min-width: 0; font: 600 var(--fs-body)/1.3 var(--font-ui); overflow-wrap: anywhere; }
  .us-call__cost { margin-left: auto; font: 700 var(--fs-body-s)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .us-call__l2, .us-call__l3 { color: var(--ink-2); font: 500 var(--fs-caption)/1.3 var(--font-ui); }
  .us-call__l3 { display: flex; justify-content: space-between; gap: var(--sp-3); }
  .us-call__l3 > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .us-call__l3 > :last-child { flex: none; font-variant-numeric: tabular-nums; }
  .us-pill { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-badge); font: 600 var(--fs-label)/1 var(--font-ui); }
  .us-pill--spare { background: #F5EBCB; color: #6E5410; }
  .us-pill--fail { background: var(--danger-soft); color: var(--danger); }
  .us-call--open {
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
    border-bottom-color: transparent;
    border-radius: var(--r-card);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .us-detail {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    margin: 0;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
    font: 500 var(--fs-caption)/1.35 var(--font-ui);
  }
  .us-detail[hidden] { display: none; }
  .us-detail > dt { color: var(--ink-2); }
  .us-detail > dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
  .us-detail > dd.us-detail__bad { color: var(--danger); font-weight: 700; }

  .us-quiet { margin: 0; color: var(--ink-2); font: 400 var(--fs-hint)/1.4 var(--font-ui); }
  .us-note { margin: 0; color: var(--ink-2); font: 500 var(--fs-caption)/1.4 var(--font-ui); }
}