/* webapp/css/app_parts.css — детали экранов: плитки цифр, карточки, список пробежек, сплиты, профиль, переключатели.
   Как в жизни: мебель в комнатах — одинаковые полки и таблички, чтобы глаз сразу находил нужное. */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--bg-elevated); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.tile .k { font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v { font-family: var(--font-display); font-size: 19px; margin-top: 4px; letter-spacing: .02em; white-space: nowrap; }
.tile .v small { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); margin-left: 3px; letter-spacing: 0; }

.card {
  border: var(--stroke) solid var(--border); border-radius: var(--r-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; background: var(--bg);
}
.card.soft { background: var(--bg-elevated); border-color: transparent; }
.card.accent { background: var(--accent-soft); border-color: transparent; }
.card.warn { background: var(--danger-soft); border-color: transparent; }
.kv { display: flex; align-items: center; gap: 10px; color: var(--icon-idle); }
.kv .grow { color: var(--text); }

/* ---------- пробежка в списке: картинка маршрута + цифры ---------- */
.list { display: flex; flex-direction: column; }
.run-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line);
}
.run-row:last-child { border-bottom: none; }
.run-row:active { background: var(--bg-soft); }
.run-row .shape { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-elevated); display: grid; place-items: center; flex-shrink: 0; }
.run-row .km { font-family: var(--font-display); font-size: 18px; letter-spacing: .02em; }
.run-row .meta { font-size: 13px; color: var(--text-secondary); }
.run-row .chev { color: var(--text-muted); }
.empty { text-align: center; padding: 18px 8px 8px; color: var(--text-secondary); }
.empty .ic { color: var(--text-muted); margin: 0 auto 8px; width: max-content; }

/* ---------- сплиты: километр, темп и полоска (длиннее = быстрее) ---------- */
.splits { display: flex; flex-direction: column; gap: 6px; }
.split { display: grid; grid-template-columns: 34px 52px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.split .n { color: var(--text-secondary); font-weight: 600; }
.split .p { font-weight: 700; font-variant-numeric: tabular-nums; }
.split .bar { height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.split .bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.split.best .bar i { background: var(--brand-press); }

/* ---------- профиль ---------- */
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent-hover); font-weight: 700; font-size: 26px; flex-shrink: 0; }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 54px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line); font-weight: 500; color: var(--text); }
.menu-item svg { color: var(--icon-idle); }
.menu-item .muted { margin-left: auto; text-align: right; }
.switch { margin-left: auto; width: 46px; height: 28px; border-radius: 14px; background: var(--border); position: relative; transition: background .15s ease; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(30, 34, 48, .25); transition: transform .15s ease; }
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(18px); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid3 .btn { padding: 0 8px; font-size: 13px; flex-direction: column; gap: 4px; min-height: 64px; border-radius: var(--r-md); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 > *, .grid2 > * { min-width: 0; }
.field input { width: 100%; }
.btns .btn { padding: 0 12px; white-space: nowrap; }