/* Three independent times; the template puts device setup before the times when needed. */
.reminders-page .reminder-panel{background:rgb(255 255 255 / 90%);padding:clamp(12px,3vw,24px);gap:18px}
.reminder-times{margin:0}
.reminder-row{display:grid;grid-template-columns:36px minmax(0,1fr) 48px;gap:4px 10px;align-items:center;padding:14px 12px;background:#fff;border:1px solid #e1e8dd;border-radius:var(--sg-radius-status);min-width:0}
.reminder-period-icon{grid-row:1 / 3;display:grid;place-items:center;width:36px;height:44px;border-radius:50%;background:#fff3ce;color:#946300}
.reminder-period-icon .ui-icon{width:26px;height:26px}
.reminder-period-moon{background:#e8f3f8;color:#405c6b}
.reminder-period-copy{grid-column:2;min-width:0}
.reminders-page .reminder-period-copy h2{font-size:1rem;line-height:1.2;margin:0;overflow-wrap:anywhere}
.reminder-period-copy p{font-size:.875rem;line-height:1.3;color:var(--muted);margin:4px 0 0;overflow-wrap:anywhere}
.reminders-page input.reminder-time{grid-column:2 / -1;grid-row:2;width:min(100%,10rem);min-width:0;min-height:var(--sg-control-min-height);padding:8px 12px;margin:4px 0 0;border:1px solid var(--sg-field-border);border-radius:var(--sg-radius-control);background:var(--sg-surface);color:var(--ink);text-align:center;font:inherit;font-weight:700;line-height:1.3}
.reminders-page input.reminder-time:disabled{opacity:1;color:#60717a;background:#f4f6f3;border-color:#d9e0d9;-webkit-text-fill-color:#60717a}
.reminder-switch{position:relative;grid-column:3;grid-row:1;display:grid;place-items:center;width:48px;height:48px;margin:0;cursor:pointer}
.reminder-switch input{position:absolute;inset:0;width:48px;height:48px;margin:0;opacity:0;cursor:pointer}
.reminder-switch>span{pointer-events:none;width:46px;height:28px;border-radius:999px;background:#718276;border:1px solid #64776a;transition:background .15s}
.reminder-switch>span::before{content:"";display:block;width:22px;height:22px;background:white;border-radius:50%;margin:2px;box-shadow:0 1px 3px #0b293830;transition:transform .15s}
.reminder-switch input:checked+span{background:var(--green);border-color:var(--green)}
.reminder-switch input:checked+span::before{transform:translateX(18px)}
.reminder-switch input:focus-visible+span{outline:3px solid var(--sg-focus);outline-offset:3px}
.reminder-phone-status{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:16px 12px;border-radius:var(--sg-radius-status);border:1px solid var(--sg-info-border);background:var(--sg-info-background)}
.reminder-phone-status.is-active-status{background:var(--sg-success-background);border-color:var(--sg-success-border)}
.reminder-status-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--sg-info-background);color:var(--sg-info)}
.reminder-status-icon .ui-icon{width:23px;height:23px}
.reminder-status-active{display:none;background:var(--sg-success);color:#fff}
.is-active-status .reminder-status-default{display:none}
.is-active-status .reminder-status-active{display:grid}
.reminder-phone-copy{min-width:0}
.reminders-page .reminder-phone-copy h2{font-size:1.05rem;line-height:1.3;margin:0;overflow-wrap:anywhere}
.reminder-phone-copy p{margin:8px 0 0;line-height:1.45;overflow-wrap:anywhere}
.reminder-phone-copy .button{margin-top:12px;width:100%;font-size:1rem;min-height:var(--sg-control-min-height);padding:12px}
.reminder-email-status{padding:14px 16px;color:var(--sg-info);background:var(--sg-info-background);border-radius:var(--sg-radius-message);font-size:1rem;margin:0;line-height:1.45}
.reminder-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr));gap:12px;align-items:stretch}
.reminders-page .reminder-actions .button{width:100%;min-height:48px;padding:12px 10px;font-size:1rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.reminder-actions #reminder-test{margin:0;height:100%}
.reminder-save{display:flex;align-items:center;justify-content:center;gap:8px}
.reminder-save .ui-icon{flex:0 0 22px;width:22px;height:22px}
#local-test-action:empty,#local-test-action:has(>form[hidden]){display:none}
.reminder-note{margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)}
.reminders-page #reminder-more>div{margin-top:14px}
.reminders-page #reminder-more label{min-width:0;overflow-wrap:anywhere}
.reminders-page #reminder-more select{width:100%;min-width:0;max-width:100%}
.reminders-page #reminder-relevance p{margin:12px 0 0}
.reminders-page #reminder-settings-card summary,.reminders-page .phone-help summary{min-height:44px;display:list-item;align-content:center;line-height:1.4;overflow-wrap:anywhere}
.reminders-page #reminder-help .phone-help{background:rgb(255 255 255 / 90%)}
.reminders-page #test-status{margin:0;overflow-wrap:anywhere}
@media(min-width:600px){
 .reminder-row{grid-template-columns:44px minmax(0,1fr) minmax(8rem,10rem) 48px;gap:14px;padding:18px 16px}
 .reminder-period-icon{grid-row:1;width:44px;height:44px}
 .reminder-period-copy{grid-column:2}
 .reminders-page input.reminder-time{grid-column:3;grid-row:1;margin:0}
 .reminder-switch{grid-column:4;grid-row:1}
 .reminders-page .reminder-period-copy h2{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){.reminder-switch>span,.reminder-switch>span::before{transition:none}}

.reminder-save-feedback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px}
.reminder-save-feedback p{margin:0;line-height:1.4;overflow-wrap:anywhere}
.reminder-save-feedback [data-state="saved"]{color:var(--sg-success)}
.reminder-save-feedback [data-state="error"],.reminder-save-feedback [data-state="conflict"]{color:var(--sg-error)}
.reminder-save-feedback .button{min-height:var(--sg-control-min-height);padding:8px 16px;font-size:1rem}
.reminder-switch input:disabled+span{background:#c7d1c8;border-color:#9eafa1}
.reminder-switch input:disabled{cursor:not-allowed}
.reminder-actions:not(:has(#reminder-test:not([hidden]))):not(:has(noscript button)){display:none}