/* Gentle reminders in the same warm, natural palette as the rest of the app. */
.notification-settings.side-card {
  min-width: 0;
  margin-bottom: 24px;
  padding: 26px;
  border-color: #e1e6d7;
  background: #fffef9;
}
.notification-settings > h2 { color: #44553a; font-size: 19px; line-height: 1.45; }
.notification-settings > p { margin-top: 9px; color: #748269; font-size: 12px; line-height: 1.75; }
.notification-settings .section-head { align-items: flex-start; flex-wrap: wrap; gap: 8px 14px; }
.notification-settings .section-head h2 { color: #44553a; line-height: 1.45; }
.notification-status {
  min-width: 0;
  padding: 12px 14px;
  margin: 16px 0;
  border: 1px solid #e4e2d5;
  border-radius: 11px;
  background: #f6f4ed;
  color: #756f5a;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.notification-status[data-state="enabled"] { background: #eff6e8; border-color: #dce9cf; color: #56713f; }
.notification-status[data-state="blocked"] { background: #fbf3e5; border-color: #eedfc4; color: #8b693c; }
.notification-status[data-state="unavailable"] { background: #f2f1eb; border-color: #e2e2d8; color: #737669; }
.notification-status strong { color: inherit; font-weight: 750; }
.notification-status p { margin: 4px 0 0; font-size: inherit; line-height: inherit; color: inherit; }
.notification-status .icon { width: 17px; height: 17px; margin-right: 6px; }
.notification-preview {
  min-width: 0;
  padding: 17px 18px;
  margin: 18px 0;
  border: 1px solid #e0e7d5;
  border-left: 3px solid #9eb981;
  border-radius: 13px;
  background: linear-gradient(115deg, #f4f8ec, #fafbf5);
  box-shadow: 0 4px 17px #43572c04;
  color: #5c7350;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.notification-preview :is(h3, strong) { color: #49603c; font-size: 14px; line-height: 1.6; font-weight: 750; }
.notification-preview p { margin-top: 6px; color: #728466; font-size: 12px; line-height: 1.75; }
.notification-preview small { color: #7c8c70; font-size: 11px; line-height: 1.6; }
.notification-preview .icon { width: 18px; height: 18px; color: #8ca76d; margin-right: 6px; }
.notification-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 9px; margin: 17px 0; }
.notification-actions > button {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 15px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.notification-actions .primary { background: #768f5b; box-shadow: none; }
.notification-actions .primary:hover { background: #627c47; }
.notification-actions .secondary { border-color: #d8e2cb; color: #73845e; background: #fbfdf7; }
.notification-actions .secondary:hover { border-color: #b3c69a; background: #f2f7e9; }
.notification-actions .text-button { color: #73885c; }
.notification-fields,
.task-reminder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; margin-top: 18px; }
.notification-fields .field,
.task-reminder-fields .field { min-width: 0; margin-bottom: 0; font-size: 12px; line-height: 1.5; color: #647657; }
.notification-fields .field :is(input:not([type="checkbox"]), select),
.task-reminder-fields .field :is(input:not([type="checkbox"]), select) { min-width: 0; max-width: 100%; min-height: 44px; background: #fffefb; border-color: #dce4d0; color: #4e633f; font-size: 13px; }
.notification-fields .field small,
.task-reminder-fields .field small { font-size: 11px; line-height: 1.7; color: #819173; }
.notification-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  color: #607451;
  font-size: 13px;
  line-height: 1.65;
  cursor: pointer;
}
.notification-toggle > :not(input) { min-width: 0; overflow-wrap: anywhere; }
.notification-toggle input[type="checkbox"] { width: 21px; height: 21px; flex: 0 0 21px; margin: 0; accent-color: #78965b; }
.notification-toggle small { color: #829274; font-size: 11px; line-height: 1.65; }
.notification-toggle:has(input:disabled) { cursor: default; color: #91998a; }
.task-reminder-box { min-width: 0; margin: 20px 0; padding: 17px; border: 1px solid #e1e7d7; border-radius: 13px; background: #f8faf3; }
.task-reminder-box > h3 { margin-bottom: 8px; color: #5c714c; font-size: 14px; line-height: 1.5; }
.task-reminder-box > .notification-toggle:first-child { padding-top: 0; }
.task-reminder-box .task-reminder-fields { margin-top: 12px; }
.reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #e2e8d7;
  border-radius: 6px;
  background: #f0f5e7;
  color: #718754;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.reminder-badge .icon { width: 13px; height: 13px; flex-shrink: 0; }
.notification-note { margin-top: 12px; color: #7c8b70; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.notification-note a { color: #607a44; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.notification-settings :is(button, input, select, a):focus-visible,
.task-reminder-box :is(button, input, select, a):focus-visible { outline: 3px solid #a5bc8c; outline-offset: 3px; }
:is(.notification-status, .notification-preview, .notification-actions, .notification-fields, .notification-toggle, .task-reminder-box, .task-reminder-fields, .notification-note)[hidden] { display: none; }
html:is([data-task-size="large"], [data-task-size="xlarge"]) .reminder-badge { font-size: var(--task-meta-size, 14px); }
html:is([data-task-size="large"], [data-task-size="xlarge"]) .task-reminder-box :is(.notification-toggle, .field) { font-size: 14px; }

@media (max-width: 700px) {
  .notification-settings.side-card { padding: 21px 17px; margin-bottom: 20px; }
  .notification-settings > h2 { font-size: 17px; }
  .notification-status { padding: 11px 12px; }
  .notification-preview { padding: 15px 13px; }
  .notification-actions { gap: 8px; }
  .notification-actions > button { flex: 1 1 140px; font-size: 12px; padding: 11px 12px; }
  .notification-fields,
  .task-reminder-fields { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .notification-fields .field :is(input:not([type="checkbox"]), select),
  .task-reminder-fields .field :is(input:not([type="checkbox"]), select) { font-size: 16px; }
  .notification-toggle { align-items: flex-start; }
  .notification-toggle input[type="checkbox"] { margin-top: 1px; }
  .task-reminder-box { padding: 15px 13px; }
  .notification-note { font-size: 11px; }
}