/* «Напомнить» (features/reminders/control.js) and its banner. Colours only from theme.css. */
/* The value stands in line with the text of the row: the padding of the button hangs out to the left. Its wrapper is as
   wide as the button minus that overhang, so the width allowed is the wrapper's plus it, or a short value is cut by it
   («Без напомина…»). */
.rem-pick { --rem-pick-pad: 10px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% + var(--rem-pick-pad)); height: 32px; padding: 0 var(--rem-pick-pad); margin-left: calc(-1 * var(--rem-pick-pad)); border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--foreground); text-align: left; }
.rem-pick:hover { background: var(--hover); }
.rem-pick .w-i { flex-shrink: 0; width: 14px; height: 14px; color: var(--muted-foreground); }
.rem-pick-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A long list of leads stays inside its row and is cut there, not past its edge. */
.rem-wrap { max-width: 100%; }
.rem-wrap .w-pop { padding: 16px; }

.rem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rem-chip { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.rem-chip:hover { background: var(--hover); }
.rem-chip[aria-pressed="true"] { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.rem-chip.is-pale { opacity: .6; text-decoration: line-through; }
.rem-chip[aria-disabled="true"], .rem-chip[aria-disabled="true"]:hover { opacity: .4; background: var(--card); cursor: not-allowed; }
.rem-chip.is-own { border-style: dashed; }
.rem-chip.is-none { margin-left: 6px; }
.rem-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rem-custom .w-input { width: 140px; height: 36px; }
.rem-note { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.rem-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; }

/* «Моё → Уведомления» (features/settings/my/reminders.js). */
.rem-settings-head { margin-top: 24px; }
.rem-settings-lead .rem { margin-top: 10px; }
.rem-settings-lead .w-saved { margin-left: 8px; font-weight: 400; }

@media (max-width: 760px) {
  /* 44px, the finger's target, as the chips of «Память» (owner, 06.11.2026). */
  .rem-chip { height: 44px; border-radius: 22px; }
}