/* «Ещё» и её подэкраны: выписки, правила, система.
 *
 * На телефоне «Ещё» — это меню; на широком экране те же пункты уже стоят в
 * боковой панели, и меню там показывать незачем.
 */

.hub { margin-bottom: var(--s5); }
.hub-item .hub-ico {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: grid; place-items: center;
}
.hub-item .hub-ico svg {
  width: 17px; height: 17px;
  stroke: var(--accent); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Загрузка выписки ───────────────────────────────────────────────── */
.drop {
  padding: var(--s6) var(--s4);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: center;
  transition: border-color .16s linear, background .16s linear;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .d-title { font-size: var(--t-headline); font-weight: 600; margin-bottom: 4px; }
.drop .d-text { font-size: var(--t-footnote); color: var(--ink-2); }
.drop .btn { margin-top: var(--s4); }
.drop input[type="file"] { display: none; }

.imp-result {
  margin-top: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--income-soft);
  color: var(--income);
}
.imp-result.dup { background: var(--warn-soft); color: var(--warn); }
.imp-result.bad { background: var(--expense-soft); color: var(--expense); }
.imp-result .r-title { font-weight: 700; margin-bottom: 3px; }
.imp-result .r-text { font-size: var(--t-footnote); }

.imp-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: relative;
}
.imp-row + .imp-row::before {
  content: ""; position: absolute; top: 0; left: var(--s4); right: 0;
  height: .5px; background: var(--hairline);
}
.imp-row .i-name { flex: 1; min-width: 0; font-size: var(--t-subhead);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-row .i-meta { font-size: var(--t-caption); color: var(--ink-3); }

/* ── Правила ────────────────────────────────────────────────────────── */
.rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: relative;
}
.rule + .rule::before {
  content: ""; position: absolute; top: 0; left: var(--s4); right: 0;
  height: .5px; background: var(--hairline);
}
.rule.off { opacity: .5; }
.rule .r-main { flex: 1; min-width: 0; }
.rule .r-pattern {
  font-family: var(--font-mono);
  font-size: var(--t-footnote);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.rule .r-target { margin-top: 2px; font-size: var(--t-caption); color: var(--ink-2); }
.rule .r-count {
  flex: none;
  font-size: var(--t-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Переключатель в стиле системного. Своя разметка, потому что нативный
   чекбокс на iOS квадратный и синий — он спорит с остальным экраном. */
.toggle {
  flex: none;
  position: relative;
  width: 46px; height: 28px;
  border: 0; border-radius: 14px;
  background: var(--surface-3);
  transition: background .2s var(--ease);
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s var(--ease);
}
.toggle[aria-pressed="true"] { background: var(--income); }
.toggle[aria-pressed="true"]::after { transform: translateX(18px); }

/* ── Система ────────────────────────────────────────────────────────── */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s3);
}
.sys-cell .s-label { font-size: var(--t-caption); color: var(--ink-3); }
.sys-cell .s-value {
  font-size: var(--t-title3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.unit {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: relative;
}
.unit + .unit::before {
  content: ""; position: absolute; top: 0; left: var(--s4); right: 0;
  height: .5px; background: var(--hairline);
}
.unit .u-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.unit.ok .u-dot { background: var(--income); }
.unit.bad .u-dot { background: var(--expense); }
.unit .u-name { flex: 1; min-width: 0; font-size: var(--t-subhead); }
.unit .u-when { font-size: var(--t-caption); color: var(--ink-3); text-align: right; }