.reminder-page .card {
  margin-bottom: 18px;
}
.reminder-filters,
.reminder-metrics {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.reminder-filters {
  margin: 16px 0;
}
.reminder-filters input {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 560px;
}
.reminder-filters select {
  width: auto;
  flex: 0 1 190px;
  min-width: 140px;
}
.reminder-filters button {
  flex: none;
}
.reminder-filters > .ss-trigger {
  flex: 0 1 190px;
  width: auto;
  min-width: 140px;
}
.reminder-metrics span {
  background: #f3f6fb;
  padding: 12px 20px;
  border-radius: 10px;
}
.reminder-metrics b {
  font-size: 22px;
  color: #2455a4;
  margin-left: 10px;
}
.reminder-heading-actions,
.reminder-rule-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reminder-rules-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 16px; color: #74819a; font-size: 13px; }
.reminder-rules-summary strong { color: #405579; font-weight: 600; }
.reminder-rule-list { display: grid; gap: 18px; }
.reminder-page .reminder-rule { border: 1px solid #d5dff0; border-left: 4px solid #526ff1; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 3px 12px #253d6c06; min-width: 0; }
.reminder-rule-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 20px; background: #f7f9ff; border-bottom: 1px solid #e5eaf4; }
.reminder-rule-title { display: flex; align-items: center; flex: 1 1 200px; gap: 10px; flex-wrap: wrap; min-width: 0; }
.reminder-rule-title h3 { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 700; color: #263c64; overflow-wrap: anywhere; }
.reminder-rule-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 20px; background: #e7f5ee; color: #22724e; white-space: nowrap; }
.reminder-rule-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.reminder-rule.is-disabled { border-left-color: #a3adbe; }
.reminder-rule.is-disabled .reminder-rule-status { color: #68758a; background: #e9edf3; }
.reminder-rule.is-disabled .reminder-rule-header { background: #f8f9fb; }
.reminder-rule-actions button { margin: 0; font-size: 13px; white-space: nowrap; }
.reminder-rule-actions .reminder-edit { color: #3555cf; border-color: #b8c7f8; background: #fff; font-weight: 600; }
.reminder-rule-body { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; padding: 20px; }
.reminder-rule-body section { min-width: 0; }
.reminder-rule-body h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #344a6b; margin: 0 0 12px; }
.reminder-rule-body h4 > span { color: #7a879d; font-size: 12px; font-weight: 400; }
.reminder-event-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.reminder-event-tags > span { padding: 5px 9px; border: 1px solid #e0e7f5; background: #f7f9fe; border-radius: 7px; color: #4a6085; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.reminder-rule-filters { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; margin: 14px 0 0; font-size: 12px; }
.reminder-rule-filters > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; }
.reminder-rule-filters dt { color: #7a879d; }
.reminder-rule-filters dd { margin: 0; color: #526783; overflow-wrap: anywhere; }
.reminder-account-list { display: grid; gap: 10px; }
.reminder-account-route { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 14px; padding: 12px 14px; border: 1px solid #e2e8f2; border-radius: 9px; }
.reminder-account-name { display: grid; align-content: start; gap: 4px; min-width: 0; }
.reminder-account-name strong { color: #304969; font-size: 14px; overflow-wrap: anywhere; }
.reminder-account-name small { color: #7a879d; font-size: 11px; overflow-wrap: anywhere; }
.reminder-field-label { color: #77859b; font-size: 12px; }
.reminder-group-list { display: grid; align-content: start; gap: 6px; min-width: 0; border-left: 1px solid #e5eaf3; padding-left: 14px; }
.reminder-group-list > div { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-group-name { padding: 4px 8px; background: #edf3ff; color: #395d9c; border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.reminder-rule-schedule { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; padding: 13px 20px; background: #f8faff; border-top: 1px solid #e5eaf4; }
.reminder-rule-schedule strong { font-size: 14px; color: #304f87; }
.reminder-rule-timing { font-size: 12px; color: #708098; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .reminder-rule-body { grid-template-columns: minmax(0,1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .reminder-heading-actions { width: 100%; }
  .reminder-heading-actions button { flex: 1; }
  .reminder-rule-header, .reminder-rule-body { padding: 15px; }
  .reminder-rule-title { flex-basis: 100%; }
  .reminder-rule-title h3 { font-size: 18px; }
  .reminder-rule-actions { width: 100%; }
  .reminder-rule-actions button { flex: 1; }
  .reminder-rule-schedule { padding: 12px 15px; }
  .reminder-rule-timing { flex-basis: 100%; }
  .reminder-account-route { grid-template-columns: minmax(0,1fr); }
  .reminder-group-list { border-left: 0; border-top: 1px solid #e5eaf3; padding: 9px 0 0; }
}
.reminder-dialog {
  width: min(800px, 94vw);
  max-height: 90vh;
  overflow: auto;
}
.reminder-dialog form {
  display: grid;
  gap: 14px;
}
.reminder-dialog label {
  display: grid;
  gap: 6px;
}
.reminder-dialog label.check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reminder-dialog input[type='checkbox'] {
  width: auto;
}
.reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reminder-dialog fieldset {
  min-width: 0;
  border: 1px solid #dde4ed;
  border-radius: 10px;
  padding: 14px;
}
.reminder-dialog [hidden] {
  display: none !important;
}
.reminder-picked {
  color: #586b85;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.reminder-dialog [data-picker] summary {
  cursor: pointer;
  color: #2455a4;
  padding: 8px 0;
}
.reminder-options {
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 3px;
  padding-top: 8px;
}
.reminder-options .check {
  padding: 4px;
}
.reminder-targets label:has(input:disabled) {
  color: #68788d;
}
.reminder-ref {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.reminder-dialog .reminder-grid:has(> [data-picker][hidden]):not(:has(> [data-picker]:not([hidden]))) {
  display: none;
}
.reminder-targets {
  max-height: 280px;
  overflow: auto;
  padding: 8px;
}
.reminder-targets label {
  padding: 9px 0;
}
.reminder-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 4px;
  border-radius: 8px;
  background: #edf3ff;
}
.reminder-ref button {
  padding: 0 5px;
  min-height: 24px;
}
.reminder-dialog [data-reference-results] {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.reminder-record {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
}
.reminder-record dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.reminder-page pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 500px;
}
.reminder-page td small {
  display: block;
  margin-top: 5px;
}
.reminder-page td {
  vertical-align: top;
}
@media (max-width: 600px) {
  .reminder-grid {
    grid-template-columns: 1fr;
  }
  .reminder-dialog {
    padding: 18px;
  }
  .reminder-record {
    grid-template-columns: 100px 1fr;
  }
  .reminder-filters > * {
    max-width: 100%;
  }
  .reminder-filters > input,
  .reminder-filters > .ss-trigger {
    flex-basis: 100%;
    width: 100%;
  }
  .reminder-filters > button:not(.ss-trigger) {
    flex: 1;
  }
  .reminder-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .reminder-metrics span {
    padding: 10px 6px;
    font-size: 12px;
    text-align: center;
  }
  .reminder-metrics b {
    display: block;
    margin: 3px 0 0;
    font-size: 20px;
  }
}
.reminder-dialog label.check {
  flex-direction: row;
  justify-content: flex-start;
  margin: 0;
  min-height: 32px;
}
.reminder-dialog label.check input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 0;
}

/* Compact todo editor: only the fields scroll; title and save stay visible. */
body dialog.reminder-todo-dialog {
  width: min(880px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.reminder-todo-dialog[open] { display: flex; flex-direction: column; }
.reminder-todo-dialog > .section-heading { flex: none; margin: 0; padding: 14px 20px; border-bottom: 1px solid #e5eaf4; align-items: center; }
.reminder-todo-dialog > .section-heading h2 { font-size: 20px; }
.reminder-todo-dialog > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 0; margin: 0; overflow: hidden; }
.reminder-todo-body { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; scroll-padding-block: 12px; }
.reminder-todo-dialog label { margin: 0; gap: 4px; min-width: 0; line-height: 1.5; }
.reminder-todo-dialog input:not([type='checkbox']), .reminder-todo-dialog select, .reminder-todo-dialog .ss-trigger { min-height: 36px; height: 36px; padding: 6px 10px; }
.reminder-todo-dialog textarea { min-height: 54px; height: 54px; max-height: 180px; padding: 6px 10px; }
.reminder-todo-meta { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,1.4fr) minmax(0,.65fr) minmax(0,.8fr); gap: 10px; }
.reminder-todo-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start; }
.reminder-todo-dialog fieldset { margin: 0; padding: 8px 10px; border-radius: 8px; }
.reminder-todo-dialog legend { padding-inline: 4px; font-size: 12px; }
.reminder-todo-dialog [data-picker] summary { padding: 4px 0; margin: 0; font-size: 12px; }
.reminder-todo-dialog .reminder-ref { padding: 3px 7px; margin: 2px 4px 2px 0; gap: 4px; font-size: 12px; border-radius: 6px; }
.reminder-todo-dialog .reminder-picked { font-size: 12px; }
.reminder-todo-dialog .reminder-options { max-height: 145px; }
.reminder-todo-dialog .reminder-filters { margin: 6px 0 0; gap: 8px; flex-wrap: nowrap; }
.reminder-todo-dialog .reminder-filters input { max-width: none; flex: 1; }
.reminder-todo-dialog .reminder-filters button { min-height: 36px; padding: 6px 12px; font-size: 12px; }
.reminder-todo-dialog [data-reference-results]:not(:empty) { padding-top: 8px; max-height: 150px; }
.reminder-todo-dialog [data-references] { font-size: 12px; }
.reminder-todo-history { margin: 0; }
.reminder-todo-history > summary { margin: 0; padding: 2px 0; font-size: 12px; color: #6b7c96; }
.reminder-todo-history [data-history] { font-size: 12px; }
.reminder-todo-history p { margin: 8px 0; }
.reminder-todo-footer { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 20px; border-top: 1px solid #e5eaf4; background: #f8faff; }
.reminder-todo-footer .error-text { flex: 1; min-width: 0; margin: 0; font-size: 12px; }
.reminder-todo-footer .error-text:empty { display: none; }
.reminder-todo-footer > button { flex: none; min-height: 38px; padding: 7px 22px; margin: 0; }
@media (max-width: 760px) {
  .reminder-todo-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  body dialog.reminder-todo-dialog { width: 100%; max-width: 680px; max-height: min(94dvh,calc(var(--mobile-viewport-height,100dvh) - 12px)); padding: 0; overflow: hidden; }
  .reminder-todo-dialog > .section-heading { padding: 10px 14px; }
  .reminder-todo-body { padding: 12px 14px; gap: 10px; }
  .reminder-todo-options { grid-template-columns: minmax(0,1fr); }
  .reminder-todo-footer { padding: 10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  .reminder-todo-footer > button { flex: 1; }
}
@media (max-width: 440px) {
  .reminder-todo-meta > [data-todo-owner], .reminder-todo-meta > [data-todo-due] { grid-column: 1 / -1; }
}
.todo-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; }
.todo-row-actions > button { margin: 0; }
.todo-pinned { background: #fffcf2; }
.todo-pin-badge { display: inline-block; margin-right: 7px; padding: 2px 6px; border-radius: 5px; background: #fff0bc; color: #826012; font-size: 11px; vertical-align: middle; }
.todo-row-actions [aria-pressed=true] { color: #8a6510; border-color: #dec98c; background: #fff8dd; }
.todo-template-apply { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 7px 10px; padding: 12px; border: 1px solid #dce5f6; border-radius: 9px; background: #f7f9ff; }
.todo-template-apply > label { margin: 0; }
.todo-template-apply > small { grid-column: 1 / -1; }
.todo-template-apply > button { margin: 0; }
.todo-template-deadline { display: grid; grid-template-columns: minmax(0,1fr) 110px; gap: 12px; align-items: end; }
.todo-template-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 12px; }
.todo-template-toolbar > label { flex: 1; min-width: 160px; margin: 0; }
.todo-template-list-dialog { width: min(980px,calc(100vw - 32px)); }
.todo-template-list-dialog td small { display: block; margin-top: 5px; }
.todo-draft-notice { padding: 9px 12px; background: #edf4ff; border-radius: 7px; color: #3e5d91; font-size: 12px; margin: 0; }
.reminder-todo-dialog:has([data-template-settings]:not([hidden])) .reminder-todo-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:600px) {
  .todo-row-actions { min-width: 0; }
  .todo-template-apply { grid-template-columns: minmax(0,1fr); }
  .todo-template-apply > button { justify-self: center; }
  .todo-template-save-dialog,.todo-template-list-dialog { max-width: 100%; }
}