/* Smart reminders: app-wide pop-up, editor, Reminders page */

/* ---------- pop-up ---------- */
.rm-pop {
  --pr: var(--accent);
  position: fixed; z-index: 90; right: 20px; bottom: 20px; width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--pr); border-radius: 16px; box-shadow: var(--shadow-2);
  /* glass themes make --surface see-through: lay it over the solid page colour so text stays readable */
  background: linear-gradient(var(--surface), var(--surface)), var(--bg-base, var(--paper, #fff));
  -webkit-backdrop-filter: saturate(160%) blur(24px); backdrop-filter: saturate(160%) blur(24px);
  padding: 14px 16px 12px; animation: rm-in .28s var(--ease, ease-out);
}
.rm-pop[data-priority="high"] { --pr: var(--marigold); }
.rm-pop[data-priority="urgent"] { --pr: var(--debit); }
.rm-pop[data-priority="low"] { --pr: var(--line-strong); }
@keyframes rm-in { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.rm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rm-bell { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pr) 16%, transparent); color: var(--pr); flex: none; }
.rm-pop[data-priority="urgent"] .rm-bell, .rm-pop[data-priority="high"] .rm-bell { animation: rm-ring 1.6s ease-in-out 3; }
@keyframes rm-ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
.rm-kicker { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rm-kicker b { color: var(--ink-2); font-weight: 700; }
.rm-pr { color: var(--pr); font-weight: 700; }
.rm-count { font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; color: var(--ink-2); }
.rm-title { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; margin: 2px 0 2px; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); cursor: pointer; }
.rm-title:hover:not(:disabled) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rm-entity { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.rm-desc { margin: 6px 0 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; }
.rm-meta { margin: 8px 0; display: grid; gap: 4px; font-size: 13.5px; }
.rm-meta > div { display: grid; grid-template-columns: 18px 88px minmax(0, 1fr); align-items: start; gap: 6px; }
.rm-meta .icon { color: var(--muted); margin-top: 2px; }
.rm-meta dt { color: var(--muted); }
.rm-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rm-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.rm-files .chip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-note { margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--marigold-soft); color: var(--ink-2); }
.rm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-actions .btn.ok { color: var(--credit); border-color: color-mix(in srgb, var(--credit) 45%, transparent); }
.rm-again { position: relative; }
.rm-menu { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 2; background: linear-gradient(var(--surface), var(--surface)), var(--bg-base, var(--paper, #fff)); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 4px; display: grid; min-width: 170px; }
.rm-menu[hidden] { display: none; }
.rm-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.rm-menu button:hover { background: var(--surface-2); }
.rm-pill { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent-line); background: var(--surface); color: var(--ink);
  border-radius: 99px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-2); cursor: pointer; animation: rm-in .2s ease-out;
  background: linear-gradient(var(--surface), var(--surface)), var(--bg-base, var(--paper, #fff)); }
/* toasts move to the top while a reminder is open so they never cover its buttons */
html.rm-open .toasts { top: 20px; bottom: auto; }
.rm-pill .icon { color: var(--accent); }
.rm-pill[hidden], .rm-pop[hidden] { display: none; }
.rm-detail { margin: 0; display: grid; gap: 8px; }
.rm-detail > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.rm-detail dt { color: var(--muted); }
.rm-detail dd { margin: 0; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .rm-pop { left: 12px; right: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 110px); }
  .rm-pill { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .rm-actions .btn { flex: 1 1 auto; justify-content: center; }
  .rm-detail > div { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .rm-pop, .rm-pill, .rm-bell { animation: none !important; } }

/* ---------- editor ---------- */
.rm-form { gap: 4px; }
.rm-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; display: grid; gap: 12px; }
.rm-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.rm-sec h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.rm-linked { padding: 9px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; }
.rm-pick { display: grid; gap: 6px; }
.rm-search { position: relative; display: grid; gap: 4px; }
.rm-results { display: grid; max-height: 200px; overflow-y: auto; border-radius: 10px; }
.rm-results:not(:empty) { border: 1px solid var(--line); }
.rm-results button { border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; padding: 8px 10px; font: inherit; cursor: pointer; display: grid; color: var(--ink); }
.rm-results button:hover { background: var(--accent-soft); }
.rm-results small { color: var(--muted); }
.rm-chosen { font-size: 13px; }
.rm-mode { display: inline-flex; margin-bottom: 4px; }
.rm-mode label { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.rm-mode label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.rm-mode input { accent-color: var(--accent); }
.rm-form .chips label.chip { display: inline-flex; align-items: center; gap: 5px; }
.rm-form .chips label.chip:has(input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.rm-form .chips label.chip input { margin: 0; }
.rm-form .chip button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; cursor: pointer; vertical-align: middle; }
.rm-preview { margin: 4px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rm-preview .warn { display: block; width: 100%; color: var(--debit); font-weight: 600; }
.rm-form [data-voice-box].dim { opacity: .55; }
.rm-form input[type=range] { width: 100%; accent-color: var(--accent); }
.rm-form [hidden] { display: none !important; }

/* ---------- per-item panel ---------- */
.rm-mini { display: grid; gap: 6px; }
.rm-mini-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer; }
.rm-mini-row:hover { border-color: var(--accent-line); }
.rm-mini-row span { min-width: 0; display: grid; }
.rm-mini-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rm-mini-row small { color: var(--muted); font-size: 12.5px; }
.rm-mini-row.off, .rm-mini-row.done { opacity: .6; }
.rm-mini-row .icon { color: var(--accent); }

/* ---------- Reminders page ---------- */
.rm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.rm-stats .card { padding: 14px 16px; display: grid; gap: 2px; }
.rm-stats span { color: var(--muted); font-size: 13px; }
.rm-stats b { font-size: 26px; font-family: var(--mono); }
.rm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rm-list { display: grid; gap: 10px; }
.rm-card { --pr: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--pr); border-radius: 14px; }
.rm-card[data-pr="high"] { --pr: var(--marigold); }
.rm-card[data-pr="urgent"] { --pr: var(--debit); }
.rm-card[data-pr="low"] { --pr: var(--line-strong); }
.rm-card.off, .rm-card.done { opacity: .7; }
.rm-card h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.rm-msg { margin: 4px 0 0; font-size: 13.5px; }
.rm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rm-tag:hover { border-color: var(--accent-line); color: var(--accent); }
.rm-foot { margin-top: 8px; font-size: 12.5px; }
.rm-card-acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.rm-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-timeline li { --pr: var(--accent); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; border-left: 3px solid var(--pr); }
.rm-timeline li[data-pr="high"] { --pr: var(--marigold); }
.rm-timeline li[data-pr="urgent"] { --pr: var(--debit); }
.rm-timeline li.fired { color: var(--muted); }
.rm-timeline li.fired .icon { color: var(--credit); }
.rm-timeline li.due { background: var(--marigold-soft); }
.rm-timeline time { font-family: var(--mono); font-weight: 700; }
.rm-timeline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-timeline small { color: var(--muted); }
.rm-ready { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.rm-ready li { display: grid; gap: 3px; padding-left: 16px; position: relative; }
.rm-ready li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.rm-ready li.ok::before { background: var(--credit); }
.rm-ready li.warn::before { background: var(--marigold); }
.rm-ready li.bad::before { background: var(--debit); }
.rm-ready li span { color: var(--muted); }
.rm-ready li .btn { justify-self: start; margin-top: 2px; }
@media (max-width: 1080px) { .rm-layout { grid-template-columns: minmax(0, 1fr); } }
.rm-layout > * { min-width: 0; }
.rm-layout .filters { flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .rm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-card { grid-template-columns: minmax(0, 1fr); }
  .rm-card-acts { flex-direction: row; flex-wrap: wrap; }
  .rm-layout .filters [data-q] { max-width: none !important; width: 100%; }
}