/* ============================================================
   features.css — стили трёх оверлеев-фич поверх peach.css:
   «Идеи» (#ov-ideas), «Лекарства» (#ov-meds), «Покупки» (.sl-*).
   Здесь только то, чего нет в дизайн-системе.
   ============================================================ */

/* ── Идеи ────────────────────────────────────────────────── */
#ov-ideas .ideas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#ov-ideas .idea-card {
  background: var(--p-card-solid);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-r-xl);
  padding: 16px 16px 14px;
  box-shadow: var(--p-sh-card);
  border-left: 4px solid var(--p-shoot);
}
#ov-ideas .idea-card__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--p-ink);
  line-height: 1.3;
}
#ov-ideas .idea-card__hook {
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--p-ink-2);
  margin-top: 8px;
}
#ov-ideas .idea-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
#ov-ideas .idea-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--p-tint-shoot);
  color: var(--p-border-shoot);
  padding: 4px 10px;
  border-radius: var(--p-r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
#ov-ideas .idea-chip__key {
  opacity: 0.7;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
#ov-ideas .idea-card__why {
  font-size: 12.5px;
  color: var(--p-ink-3);
  line-height: 1.45;
  margin-top: 10px;
}
#ov-ideas .idea-card__img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: var(--p-r-md);
  margin-top: 10px;
  border: 1px solid var(--p-divider);
}
#ov-ideas .idea-card__ref {
  margin-top: 10px;
}
#ov-ideas .idea-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--p-divider);
}
#ov-ideas .idea-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--p-r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 14px;
}
#ov-ideas .idea-act--shot {
  flex: 1;
  background: var(--p-ink);
  color: var(--p-ink-inv);
}
#ov-ideas .idea-act--del {
  background: rgba(217, 102, 102, 0.12);
  color: var(--p-custom);
  padding: 9px 13px;
}
#ov-ideas .idea-act[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
#ov-ideas .ideas-empty {
  text-align: center;
  padding: 48px 28px;
}
#ov-ideas .ideas-empty__glyph {
  font-size: 40px;
  line-height: 1;
}
#ov-ideas .ideas-empty__title {
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--p-ink);
  margin-top: 12px;
}
#ov-ideas .ideas-empty__hint {
  font-size: 13px;
  color: var(--p-ink-2);
  line-height: 1.5;
  margin-top: 8px;
}
#ov-ideas .ideas-empty__hint b {
  color: var(--p-ink);
  font-weight: 600;
}

/* ── Лекарства ───────────────────────────────────────────── */
#ov-meds .meds-content {
  padding: 16px 18px calc(110px + var(--app-safe-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
#ov-meds .meds-empty {
  padding: 18px 16px; text-align: center;
  font-family: var(--p-serif); font-style: italic;
  font-size: 14px; color: var(--p-ink-2); line-height: 1.5;
}
#ov-meds .meds-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
#ov-meds .meds-row--div { border-top: 1px solid var(--p-divider); }
#ov-meds .meds-row--dim { opacity: 0.55; }
#ov-meds .meds-glyph {
  width: 20px; flex-shrink: 0; text-align: center;
  font-size: 14px; color: var(--p-ink-3);
}
#ov-meds .meds-glyph--ok   { color: var(--p-rest); }
#ov-meds .meds-glyph--warn { color: var(--p-custom); }
#ov-meds .meds-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }
#ov-meds .meds-emoji--lg { font-size: 20px; }
#ov-meds .meds-name {
  flex: 1; min-width: 0;
  font-size: 14.5px; font-weight: 500; color: var(--p-ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis;
}
#ov-meds .meds-sub { color: var(--p-ink-2); font-size: 12.5px; font-weight: 400; }
#ov-meds .meds-time {
  font-family: var(--p-mono); font-size: 12px;
  color: var(--p-ink-2); flex-shrink: 0;
}
#ov-meds .meds-time--warn { color: var(--p-custom); font-weight: 600; }
#ov-meds .meds-btn-take {
  flex-shrink: 0;
  background: var(--p-ink); color: var(--p-ink-inv);
  font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--p-r-pill);
  letter-spacing: 0.01em;
}
#ov-meds .meds-btn-take:disabled { opacity: 0.5; }
#ov-meds .meds-btn-del {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(217, 102, 102, 0.1); color: var(--p-custom);
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
#ov-meds .meds-btn-del:disabled { opacity: 0.4; }
#ov-meds .meds-field-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--p-ink-2);
  margin-bottom: 7px;
}
#ov-meds .meds-input {
  width: 100%;
  /* 44px — минимум Apple HIG; при 14px шрифта поле выходило 41px. У input нет
     своих псевдоэлементов, поэтому область добирается высотой самого поля. */
  min-height: 44px;
  background: rgba(42, 31, 26, 0.04);
  border: 1px solid var(--p-divider);
  border-radius: var(--p-r-sm);
  padding: 11px 12px;
  /* 16px обязателен: ниже этого iOS зумит страницу при фокусе. */
  font-size: 16px; color: var(--p-ink);
  outline: none;
}
#ov-meds .meds-input::placeholder { color: var(--p-ink-3); }
#ov-meds .meds-input:focus { border-color: var(--p-shoot); }
#ov-meds .meds-input--emoji { width: 56px; text-align: center; flex-shrink: 0; }
#ov-meds [data-meds-type] { display: flex; width: 100%; }
#ov-meds [data-meds-type] .seg__btn { flex: 1; justify-content: center; }
#ov-meds .meds-form-err {
  font-size: 12.5px; color: var(--p-custom); line-height: 1.4;
}

/* ── Покупки ─────────────────────────────────────────────── */
.sl-body { padding: 14px 18px 36px; display: flex; flex-direction: column; gap: 14px; }

/* строка добавления */
.sl-add { background: var(--p-card-solid); border: 1px solid var(--p-card-border);
  border-radius: var(--p-r-lg); padding: 14px; box-shadow: var(--p-sh-card);
  display: flex; flex-direction: column; gap: 10px; }
.sl-add__input { width: 100%; border: 1px solid var(--p-divider); background: #fff;
  border-radius: var(--p-r-md); outline: none; font-family: var(--p-sans);
  font-size: 14px; color: var(--p-ink); padding: 11px 13px; }
.sl-add__input::placeholder { color: var(--p-ink-3); }
.sl-add__cats { display: flex; gap: 6px; }
.sl-cat { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 6px; border-radius: var(--p-r-pill);
  background: rgba(42, 31, 26, 0.05); border: 1px solid transparent;
  color: var(--p-ink-2); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap; }
.sl-cat.is-active { background: #fff; color: var(--p-ink); font-weight: 600;
  border-color: var(--p-shoot); box-shadow: 0 2px 6px -3px rgba(196, 80, 43, 0.3); }
.sl-cat__em { font-size: 14px; }

/* секция категории */
.sl-section { background: var(--p-card-solid); border: 1px solid var(--p-card-border);
  border-radius: var(--p-r-lg); padding: 12px 14px; box-shadow: var(--p-sh-card); }
.sl-section__head { font-size: 11px; font-weight: 700; color: var(--p-ink-2);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 2px 8px;
  display: flex; align-items: center; gap: 6px; }
.sl-section__count { color: var(--p-ink-3); }

/* строка товара */
.sl-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-top: 1px solid var(--p-divider); }
.sl-row:first-of-type { border-top: none; }
.sl-row__em { font-size: 18px; line-height: 1; flex-shrink: 0; }
.sl-row__name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500;
  color: var(--p-ink); letter-spacing: -0.005em; }
.sl-row__qty { color: var(--p-ink-3); font-size: 13px; font-weight: 400; }
.sl-row__btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; border: 1px solid transparent; }
.sl-row__btn--buy { background: #e3f0e3; color: var(--p-rest);
  border-color: rgba(61, 107, 58, 0.18); }
.sl-row__btn--del { background: rgba(42, 31, 26, 0.05); color: var(--p-ink-3); }

/* пустое состояние */
.sl-empty { text-align: center; padding: 26px 16px; font-family: var(--p-serif);
  font-style: italic; font-size: 15px; color: var(--p-ink-2); line-height: 1.5; }

/* архив «куплено» */
.sl-archive { background: var(--p-card-solid); border: 1px solid var(--p-card-border);
  border-radius: var(--p-r-lg); padding: 12px 14px; box-shadow: var(--p-sh-card); }
.sl-archive__head { font-size: 11px; font-weight: 700; color: var(--p-ink-2);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 2px 8px;
  display: flex; align-items: center; gap: 6px; }
.sl-arow { display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  border-top: 1px solid var(--p-divider); }
.sl-arow:first-of-type { border-top: none; }
.sl-arow__em { font-size: 15px; line-height: 1; flex-shrink: 0; opacity: 0.75; }
.sl-arow__name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--p-ink-2);
  text-decoration: line-through; text-decoration-color: rgba(42, 31, 26, 0.3); }
.sl-arow__restore { flex-shrink: 0; display: inline-flex; align-items: center;
  gap: 4px; background: rgba(42, 31, 26, 0.05); color: var(--p-ink-2);
  border-radius: var(--p-r-pill); padding: 5px 10px; font-size: 11.5px;
  font-weight: 600; letter-spacing: 0.01em; }