.reminder-controls{margin-block:1rem;padding:1rem;border:1px solid var(--border,var(--theme-line));border-radius:12px;text-align:left}.reminder-controls [hidden]{display:none!important}.reminder-controls label{display:block;margin-block:.5rem}.reminder-controls input:not([type=checkbox]),.reminder-controls select{display:block;width:100%;min-height:44px;box-sizing:border-box;font:inherit}.reminder-controls input[type=checkbox]{width:20px;height:20px;vertical-align:middle}.reminder-controls button,.personal-push-controls button{min-height:44px;margin:.3rem .4rem .3rem 0;font:inherit}.reminder-custom{display:flex;gap:.75rem;flex-wrap:wrap}.reminder-custom label{flex:1 1 130px}.reminder-help{font-size:.9rem}.reminder-error{color:var(--theme-danger-ink);font-weight:600}.reminder-preview p{overflow-wrap:anywhere}.reminder-controls :focus-visible,.personal-push-controls :focus-visible{outline:3px solid var(--theme-accent);outline-offset:3px}.personal-push-controls{margin-block:1rem}.personal-push-controls p{max-width:65ch}

/* Keep native time controls compact, including their intrinsic width on iOS. */
.reminder-controls,.reminder-controls label,.reminder-custom{min-width:0}
.reminder-controls input:not([type=checkbox]),.reminder-controls select{min-width:0;max-width:100%}
.reminder-controls input[type=time]{width:10rem;max-width:100%;min-width:0;min-height:44px;font-size:16px;-webkit-appearance:none;appearance:none}
.reminder-controls input[type=time]::-webkit-date-and-time-value{text-align:left}
.reminder-controls input[type=time]::-webkit-datetime-edit{padding:0}

.personal-reminder-badge{position:absolute;right:5px;top:7px;display:block;width:14px;height:14px;line-height:0;color:var(--accent,var(--theme-accent));pointer-events:none}
.personal-reminder-badge svg{display:block;width:100%;height:100%}
/* A changed-time dot gets its own space below the reminder, not underneath it. */
.day:has(.personal-reminder-badge) .modified{top:25px;right:8px}
/* The all-reliefs table has no date row, so reserve a small marker row. */
.rota td:has(.personal-reminder-badge) button{padding-top:20px}
.rota .personal-reminder-badge{top:2px;right:0;width:12px;height:12px}
@media(max-width:550px){
 .day .personal-reminder-badge{top:4px;right:2px;width:10px;height:10px}
 .day:has(.personal-reminder-badge) .modified{top:19px;right:3px}
}
@media(max-width:360px){
 /* Keep both corner markers clear of a two-digit today circle on small phones. */
 .day:has(.personal-reminder-badge) .num{margin-left:0}
 .day.today:has(.personal-reminder-badge) .num{padding-inline:4px}
 .day:has(.personal-reminder-badge) .note-icon{left:1px;top:4px;width:9px;height:9px}
 .day .personal-reminder-badge{right:1px;width:9px;height:9px}
}
.personal-reminder-summary{border:1px solid var(--line,var(--theme-line));border-radius:8px;padding:12px;font-size:12px;margin:12px 0}.personal-reminder-summary p{margin:5px 0}#personal-reminder-review{margin:16px 0}