/* Crophalo: the reminders' look: the Remind me button, its dialog, the list, the jobs a plan suggests and the Settings panel. Only the tokens and classes of css/app.css; every control is 44 px. */
.remind-btn { gap: 6px; }
.remind-btn .ic { width: 16px; height: 16px; }
.remind-btn[aria-expanded=true], .remind-btn[aria-pressed=true] { background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--card); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }   /* the opener looks chosen while its dialog is open */
dialog.remind { width: min(520px, calc(100vw / var(--tz) - 24px)); }
.remind-form .sheet-body { display: grid; gap: var(--space-12); }
.remind-hint { padding: var(--space-8) var(--space-12); border-radius: var(--r2); background: var(--accent-soft); color: var(--accent-text); }
.remind-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.remind-when input, .remind-form input[type=text] { min-height: var(--touch); width: 100%; }
@media (max-width: 420px) { .remind-when { grid-template-columns: minmax(0, 1fr); } }
.remind-empty { display: grid; justify-items: start; gap: var(--space-8); padding: var(--space-12) 0; } .remind-empty .ic.big { width: 32px; height: 32px; color: var(--ink2); } .remind-empty p { margin: 0; }
.remind-group { margin-top: var(--space-12); } .remind-group h3 { margin: 0 0 var(--space-4); font-size: var(--fs-row); } .remind-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.remind-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8) var(--space-12); align-items: center; padding: var(--space-8) var(--space-12); border-radius: var(--r3); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); min-width: 0; }
.remind-card .btnrow { grid-column: 1 / -1; } .remind-card.is-done .remind-body b { text-decoration: line-through; color: var(--ink2); } .remind-body { min-width: 0; overflow-wrap: anywhere; } .remind-body p { margin: 2px 0 0; }
.remind-card .btn, .rm-job .btn { min-height: var(--touch); }
.rm-h { margin: var(--space-16) 0 var(--space-4); font-size: var(--fs-row); } .rm-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.rm-job { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding: var(--space-8) var(--space-12); border-radius: var(--r3); background: var(--card2); min-width: 0; } .rm-job > span { min-width: 0; overflow-wrap: anywhere; }
.rm-cal { margin-top: var(--space-24); display: grid; gap: var(--space-8); } .rm-cal h3 { margin: 0; } .rm-cal p { margin: 0; }
.remind-dialog .remind-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-12); } .remind-dialog input[type=text], .remind-dialog input[type=date], .remind-dialog input[type=time] { width: 100%; box-sizing: border-box; min-height: var(--touch); font: inherit; padding: var(--space-8) var(--space-12); border: 1px solid var(--ctl); border-radius: var(--r3); background: var(--card); color: var(--ink); }
.remind-err { color: var(--bad); min-height: 1.2em; margin: var(--space-8) 0; } .remind-err:empty { display: none; } .remind-hint { margin-bottom: var(--space-8); }
.remind-dialog .btnrow .btn { min-height: var(--touch); }
@media (forced-colors: active) { .remind-card, .rm-job, .remind-hint { border: 1px solid CanvasText; } }