/* Своё для МБО: каркас, компоненты и тема — в /shared/styles.css */

/* ── Раскладка ───────────────────────────────────────────────────────────── */
/* На телефоне карточки идут одной колонкой в порядке разметки: выполнение,
   линейки, куда жать, планы. На компьютере (сайт открывают и с 1920) работа
   идёт в линейках, поэтому они занимают широкую колонку, а итог с подсказками
   уходит вправо и остаётся на виду при прокрутке. */
.cols { display: flex; flex-direction: column; gap: 16px; }

/* Переключатель режима стоит над всем: он меняет и цифры, и поля ввода */
.c-tabs { margin-bottom: 16px; }

@media (min-width: 900px) {
  :root { --content-w: 1000px; }
  .wrap { max-width: 1000px; }
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 16px;
  }
  .c-lines { grid-column: 1; grid-row: 1 / span 3; }
  .c-total { grid-column: 2; grid-row: 1; }
  .c-advice { grid-column: 2; grid-row: 2; }
  .c-plans { grid-column: 2; grid-row: 3; }
}

@media (min-width: 1600px) {
  :root { --content-w: 1280px; }
  .wrap { max-width: 1280px; }
  .cols { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* ── Выполнение: сейчас и прогноз ───────────────────────────────────────── */
/* Прогноз крупнее текущего: в середине месяца смотрят именно на него, текущий
   процент сам по себе ни о чём не говорит. */
.totals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.total { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.total-l { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.total-v { font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total-m { font-size: 13px; line-height: 18px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.total-go { font-size: 18px; color: var(--muted-foreground); }
.total-main .total-v { font-size: 34px; line-height: 40px; color: color-mix(in oklch, var(--primary) 85%, white); }
.total-main .total-m { color: var(--foreground); font-weight: 500; }

/* Цель месяца: у кого-то это порог 80%, у кого-то потолок 120% */
.goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.goal .input { width: 80px; text-align: center; font-variant-numeric: tabular-nums; flex: none; }

.days { margin: 0; font-size: 13px; line-height: 18px; }
.dim { color: var(--muted-foreground); }

/* ── Линейка ─────────────────────────────────────────────────────────────── */
/* На телефоне линейка — блок: название, под ним поле, под ним цифры. На большом
   экране та же разметка раскладывается в строку таблицы: пять линеек читаются
   разом, а поле ввода не растягивается на всю ширину карточки. */
/* Ширины колонок заданы жёстко: иначе набранная цифра меняет ширину соседней
   ячейки, и поле ввода уезжает под курсором. */
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name ctl"
    "fact fact"
    "now  now"
    "pts  pts"
    "body body";
  align-items: center;
  gap: 6px 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.line:first-child { border-top: none; padding-top: 2px; }
.line-name { grid-area: name; }
.line-fact { grid-area: fact; }
.line-now { grid-area: now; }
.line-pts { grid-area: pts; }
.line-ctl { grid-area: ctl; display: flex; align-items: center; gap: 6px; flex: none; }
.line-body { grid-area: body; }

@media (min-width: 900px) {
  .line {
    grid-template-columns: minmax(0, 1fr) 172px 136px 224px auto;
    grid-template-areas:
      "name fact now  pts  ctl"
      "body body body body body";
    gap: 8px 14px;
  }
  /* Подпись у поля на строке лишняя: что это факт, сказано в шапке карточки */
  .line-fact .label { display: none; }
  .line-now, .line-pts { text-align: right; }
}

.line-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.line-title { font-size: 15px; font-weight: 600; line-height: 21px; }
.line-sub { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* Раскрывает добор только стрелка: по табу идут поля ввода, а не названия */
.line-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: none; border-radius: calc(var(--radius) - 4px);
  background: transparent; color: var(--muted-foreground);
  font-size: 16px; cursor: pointer; outline: none;
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .line-toggle:hover { background: var(--accent); color: var(--accent-foreground); } }
.line-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 50%, transparent); }
.line-toggle .icon { transition: transform .15s ease; }
.line.open .line-toggle .icon { transform: rotate(180deg); }

/* Фиксированная ширина: без неё пилюля скачет с каждой введённой цифрой и
   тянет за собой стрелку. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; min-width: 82px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 20px;
  background: color-mix(in oklch, var(--primary) 20%, transparent);
  color: color-mix(in oklch, var(--primary) 82%, white);
  font-variant-numeric: tabular-nums;
}
/* Упёрлась в потолок — дальше продажи ничего не прибавят. Видно по цвету,
   само число остаётся на месте. */
.pill-cap {
  background: color-mix(in oklch, var(--success) 20%, transparent);
  color: color-mix(in oklch, var(--success) 85%, white);
}

.line-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.line-fact .input { font-variant-numeric: tabular-nums; }
.line-now, .line-pts { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.line-now b, .line-pts b { font-weight: 600; }

.line-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.need {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklch, var(--accent) 45%, transparent);
  font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.need { flex-wrap: wrap; }
.need b { font-size: 14px; font-weight: 600; }
.need-t { color: var(--muted-foreground); }
.need-or { width: 100%; color: var(--muted-foreground); }
.need.done { color: color-mix(in oklch, var(--success) 85%, white); background: transparent; padding: 2px 0; }
.need.done .icon { font-size: 15px; }

.price {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 19px; color: var(--muted-foreground);
}
.price .icon { flex: none; margin-top: 2px; font-size: 15px; color: color-mix(in oklch, var(--primary) 80%, white); }
.price b { font-weight: 600; color: var(--foreground); }

/* ── Куда жать ───────────────────────────────────────────────────────────── */
.adv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.adv:first-child { border-top: none; padding-top: 0; }
.adv-n { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-v { text-align: right; font-weight: 600; font-size: 14px; }
.adv-sub { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.adv-r { text-align: right; font-weight: 600; color: color-mix(in oklch, var(--primary) 85%, white); }
/* Самая выгодная линейка — единственная, которую стоит запомнить перед сменой */
.adv-best .adv-n { color: color-mix(in oklch, var(--primary) 85%, white); }

/* ── Планы и веса ────────────────────────────────────────────────────────── */
.card-toggle {
  width: 100%; padding: 0; border: none; background: transparent; color: inherit;
  font-family: inherit; text-align: left; cursor: pointer; outline: none;
}
.card-toggle .toggle-chev { margin-left: auto; transition: transform .15s ease; }
.card-toggle[aria-expanded="true"] .toggle-chev { transform: rotate(180deg); }
.card-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 50%, transparent); border-radius: 4px; }

#settings { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.set-head, .set-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 116px; gap: 8px; align-items: center; }
.set-head { font-size: 12px; color: var(--muted-foreground); }
.set-head span:not(:first-child) { text-align: center; }
.set-row + .set-row { margin-top: 8px; }
.set-w, .set-p { text-align: center; font-variant-numeric: tabular-nums; }
#setLines { display: flex; flex-direction: column; }

@media (min-width: 520px) {
  .set-head, .set-row { grid-template-columns: minmax(0, 1fr) 64px 140px; }
}