/* Операции — разметка. Самый «рабочий» экран: сюда заходят разгребать очередь,
 * часто стоя и по тридцать секунд. Отсюда решения: крупные цели для пальца,
 * категория видна прямо в строке, действие в один тап.
 */

/* ── Фильтры ────────────────────────────────────────────────────────── */
.ops-filters {
  position: sticky;
  /* Липнет ПОД шапкой: иначе при прокрутке уезжает вверх ровно тогда, когда
     нужнее всего — на длинном списке. */
  top: calc(var(--header-h) + var(--safe-t));
  z-index: 20;
  margin: 0 calc(var(--s4) * -1) var(--s3);
  padding: var(--s2) var(--s4) var(--s3);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.ops-filters .segmented { margin-bottom: var(--s2); }

.ops-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.ops-search .ico {
  position: absolute;
  left: 11px;
  width: 17px; height: 17px;
  stroke: var(--ink-3); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.ops-search .input { padding-left: 36px; min-height: 40px; }

.ops-summary {
  display: flex;
  gap: var(--s4);
  padding: var(--s2) var(--s1) 0;
  font-size: var(--t-footnote);
  color: var(--ink-2);
  flex-wrap: wrap;
}
.ops-summary b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ops-summary .in b { color: var(--income); }
.ops-summary .out b { color: var(--expense); }

@media (min-width: 900px) {
  .ops-filters { top: calc(var(--header-h)); margin-left: calc(var(--s6) * -1);
                 margin-right: calc(var(--s6) * -1); padding-left: var(--s6);
                 padding-right: var(--s6); }
}

/* ── Список ─────────────────────────────────────────────────────────── */
.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s2) var(--s2);
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--ink-2);
}
.day-head .day-sum { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }

.op {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  position: relative;
}
.op + .op::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: 0;
  height: .5px;
  background: var(--hairline);
}
.op:active { background: var(--surface-3); }

.op-main { flex: 1; min-width: 0; }
.op-who {
  font-size: var(--t-callout);
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-why {
  margin-top: 1px;
  font-size: var(--t-footnote);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.op-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 1px;
}
.op-check {
  width: 16px; height: 16px;
  stroke: var(--income); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Операция без категории — то, ради чего экран открывают. Помечена полосой
   слева, а не цветом текста: цветной текст суммы уже занят направлением. */
.op.needs::after {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--warn);
}

.load-more { margin: var(--s4) 0; }

/* ── Разворот операции ──────────────────────────────────────────────── */
.op-detail .amount-block {
  text-align: center;
  padding: var(--s3) 0 var(--s5);
}
.op-detail .amount-block .money { display: block; }
.op-detail .amount-block .when {
  margin-top: var(--s2);
  font-size: var(--t-subhead);
  color: var(--ink-2);
}

.kv {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  font-size: var(--t-subhead);
}
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
  margin-top: var(--s2);
}
.cat-pick {
  padding: 10px var(--s3);
  border: .5px solid var(--hairline-strong);
  border-radius: var(--r-row);
  background: var(--surface);
  color: inherit;
  font-size: var(--t-footnote);
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-pick[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.cat-group-label {
  margin: var(--s4) 0 var(--s1);
  font-size: var(--t-caption2);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.split-list { display: grid; gap: var(--s2); margin-top: var(--s2); }
.split-item {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-row);
  background: var(--surface-2);
  font-size: var(--t-footnote);
}