/* Tomorrow's reminders (reminders.js, D-070). Prefix rm-. One colour per state, used the same in the bar, the filter
   chips and each row's pill: grey not sent, blue sent, green confirmed, amber no reply, red another time. */
.rm-wrap { max-width: 1120px }
.rm-day { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.rm-dayt h2 { margin: 0; font-size: var(--fs-18); font-weight: 600; letter-spacing: -.01em }
.rm-dayt span { color: var(--ink2); font-size: var(--fs-12) }
.rm-nav { width: 32px; height: 32px; border-radius: 9px; background: #f2f2f4; display: grid; place-items: center; color: var(--ink) }
.rm-nav:hover:not(:disabled) { background: #e9e9ec }
.rm-nav:disabled { opacity: .35; cursor: default }
.rm-sp { flex: 1 }
.rm-note { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: #f6f6f7; color: var(--ink2); font-size: var(--fs-12) }
.rm-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar next" "txt next"; gap: 6px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--sep); border-radius: 14px; margin-bottom: 12px; background: linear-gradient(180deg, #fff, #fbfbfc) }
.rm-bar { grid-area: bar; display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sep2) }
.rm-bar i { display: block; min-width: 6px }
.rm-sumt { grid-area: txt; font-size: var(--fs-13) }
.rm-next { grid-area: next; padding: 0 16px; white-space: nowrap; background: #137a3c }
.rm-next:hover { background: #0f6531 }
.rm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.rm-filters .chip { height: 28px; border: 0 }
.rm-filters .chip small { font-variant-numeric: tabular-nums }
.rm-how { margin: 0 0 12px; color: var(--ink2); font-size: var(--fs-12); max-width: 760px }
.rm-list { overflow: hidden }
.rm-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(150px, auto); grid-template-areas: "time who st" "time acts acts"; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--sep2); align-items: center; border-inline-start: 3px solid transparent }
.rm-row:last-child { border-bottom: 0 }
.rm-time { grid-area: time; align-self: start; display: flex; flex-direction: column; gap: 1px; padding-top: 1px }
.rm-time b { font-size: var(--fs-14); font-variant-numeric: tabular-nums }
.rm-time small { color: var(--ink3); font-size: var(--fs-12) }
.rm-who { grid-area: who; min-width: 0 }
.rm-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px }
.rm-nm a { color: inherit; text-decoration: none; font-weight: 600; font-size: var(--fs-14) }
.rm-nm a:hover { text-decoration: underline }
.rm-sub { margin-top: 2px; overflow-wrap: anywhere }
.rm-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--fs-12); font-weight: 500; background: #eef3ff; color: #2c4a8a }
.rm-tag-warn { background: #fff1db; color: #8a4a00 }
.rm-warn { color: #b25b00 }
.rm-st { grid-area: st; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end }
.rm-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: var(--fs-12); font-weight: 600; white-space: nowrap }
.rm-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.rm-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-start }
.rm-send { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: var(--fs-12) }
.rm-send.rm-first { background: #137a3c; color: #fff }
.rm-send.rm-first:hover { background: #0f6531 }
.rm-move { height: 30px; padding: 0 12px; font-size: var(--fs-12) }
.rm-reply { display: inline-flex; background: #f2f2f4; border-radius: 9px; padding: 2px; gap: 2px }
.rm-reply button { height: 26px; padding: 0 10px; border-radius: 7px; font-size: var(--fs-12); font-weight: 500; color: var(--ink2) }
.rm-reply button:hover:not(:disabled) { color: var(--ink); background: #e9e9ec }
.rm-reply button:disabled { opacity: .5; cursor: default }
.rm-reply button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12) }
.rm-empty { padding: 26px 18px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center }
.rm-none { padding: 14px 16px }
.rm-deskbtn .v { color: #137a3c }

/* the states */
.rm-notsent .rm-pill, .rm-f-notsent small { color: #55555b } .rm-notsent .rm-pill { background: #f2f2f4 } .rm-b-notsent { background: #c7c7cc }
.rm-sent .rm-pill { background: var(--c1b); color: var(--c1t) } .rm-b-sent { background: var(--c1) } .rm-f-sent small { color: var(--c1t) }
.rm-confirmed .rm-pill { background: #e3f6e8; color: #1d6b35 } .rm-b-confirmed { background: #34c759 } .rm-f-confirmed small { color: #1d6b35 }
.rm-noreply .rm-pill { background: #fff1db; color: #8a4a00 } .rm-b-noreply { background: #ff9500 } .rm-f-noreply small { color: #8a4a00 }
.rm-another .rm-pill { background: #fde7e5; color: #b42318 } .rm-b-another { background: #e5484d } .rm-f-another small { color: #b42318 }
.rm-nocontact .rm-pill { background: #f2f2f4; color: #6e6e73 } .rm-b-nocontact { background: repeating-linear-gradient(45deg, #d1d1d6 0 4px, #ececf0 4px 8px) } .rm-f-nocontact small { color: #6e6e73 }
.rm-row.rm-another { border-inline-start-color: #e5484d; background: #fffafa }
.rm-row.rm-noreply { border-inline-start-color: #ff9500 }
.rm-filters .chip[aria-pressed="true"] small { color: inherit }

/* a wide screen: one line per visit */
@media (min-width: 1380px) {
  .rm-row { grid-template-columns: 56px minmax(0, 1fr) 190px auto; grid-template-areas: "time who st acts" }
  .rm-acts { justify-content: flex-end }
}
/* a phone: the state under the name, the buttons under that */
@media (max-width: 620px) {
  .rm-row { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "time who" "time st" "acts acts"; padding: 12px }
  .rm-st { align-items: flex-start; text-align: start }
  .rm-sum { grid-template-columns: 1fr; grid-template-areas: "bar" "txt" "next" }
  .rm-next { width: 100% }
  .rm-day .mini-btn { display: none }
}