/* ===== Confirmation modal for destructive actions such as account deletion ===== */
.modal {
  width: min(var(--toddyi-size-460px), calc(var(--toddyi-size-100vw) - var(--toddyi-size-2rem)));
  border: none;
  border-radius: var(--toddyi-size-16px);
  padding: 0;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  box-shadow: var(--toddyi-card-shadow);
}
.modal::backdrop { background: var(--toddyi-modal-overlay); backdrop-filter: blur(var(--toddyi-size-2px)); }
.modal[open] { animation: modal-in 0.16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(var(--toddyi-size-6px)) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__body { padding: var(--toddyi-size-1-5rem) var(--toddyi-size-1-5rem) var(--toddyi-size-1-25rem); }
.modal--danger { border-top: var(--toddyi-size-4px) solid var(--toddyi-danger); }
.modal__title { margin: 0 0 var(--toddyi-size-0-5rem); font-size: var(--toddyi-size-1-15rem); }
.modal__warning {
  margin: 0 0 var(--toddyi-size-0-9rem); font-size: var(--toddyi-size-0-9rem); line-height: 1.6;
  padding: var(--toddyi-size-0-75rem) var(--toddyi-size-0-9rem); border-radius: var(--toddyi-size-10px);
  color: var(--toddyi-danger);
  background: color-mix(in srgb, var(--toddyi-danger) 10%, transparent);
}
.modal__prompt { margin: 0 0 var(--toddyi-size-0-5rem); font-size: var(--toddyi-size-0-9rem); }
.modal__prompt strong { word-break: break-all; }
.modal__input { width: var(--toddyi-size-100pct); margin-bottom: var(--toddyi-size-1rem); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--toddyi-size-0-6rem); flex-wrap: wrap; }
.modal__actions form { margin: 0; }
/* Disabled final deletion button. */
.modal__actions .auth-danger:disabled,
.auth-danger[disabled] { opacity: 0.45; cursor: not-allowed; }
.auth-danger[data-loading] { opacity: 0.6; cursor: progress; }

/* ===== Notifications ===== */
.notif-list { display: flex; flex-direction: column; gap: var(--toddyi-size-0-5rem); }
.notif {
  display: flex; justify-content: space-between; align-items: center; gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-0-75rem) var(--toddyi-size-1rem); border-radius: var(--pico-border-radius);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color); background: var(--pico-card-background-color);
}
.notif--unread { border-inline-start: var(--toddyi-size-4px) solid var(--pico-primary); }
.notif__body { display: flex; align-items: center; gap: var(--toddyi-size-0-6rem); }
.notif__kind { width: var(--toddyi-size-8px); height: var(--toddyi-size-8px); border-radius: var(--toddyi-size-50pct); background: var(--pico-muted-color); flex-shrink: 0; }
.notif__kind--reminder { background: var(--toddyi-warning); }
.notif__kind--success { background: var(--toddyi-success); }
.notif__kind--warning { background: var(--toddyi-danger); }
.notif__actions { display: flex; gap: var(--toddyi-size-0-3rem); }

/* ===== Subscription / Plans ===== */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--toddyi-size-100pct), var(--toddyi-size-280px)), 1fr)); gap: var(--toddyi-size-1-25rem); }
.plan-card { margin: 0; box-shadow: var(--toddyi-card-shadow); }
.plan-card.is-current { outline: var(--toddyi-size-2px) solid var(--pico-primary); }
.plan-card--pro { border-top: var(--toddyi-size-4px) solid var(--pico-primary); }
.plan-price { font-size: var(--toddyi-size-2rem); font-weight: 800; margin: 0; }
.plan-price small { font-size: var(--toddyi-size-0-9rem); font-weight: 400; color: var(--pico-muted-color); }
.plan-card ul { padding-inline-start: var(--toddyi-size-1-1rem); }
.plan-card button, .plan-card form { width: var(--toddyi-size-100pct); }

.nav-emoji { font-style: normal; }

/* ===== Custom Task Action Buttons ===== */
.task-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--toddyi-size-0-35rem);
  font-size: var(--toddyi-size-0-75rem);
  font-weight: 600;
  padding: var(--toddyi-size-0-3rem) var(--toddyi-size-0-6rem);
  border-radius: var(--toddyi-size-6px);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  background: transparent;
  color: var(--pico-muted-color);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  text-decoration: none;
  line-height: 1.2;
}

.task-action-btn:hover {
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  border-color: var(--pico-secondary-background);
  text-decoration: none;
  transform: translateY(-1px);
}

.task-action-btn--danger {
  color: var(--toddyi-danger);
  border-color: color-mix(in srgb, var(--toddyi-danger) 25%, transparent);
}

.task-action-btn--danger:hover {
  background: var(--toddyi-danger);
  color: var(--toddyi-text-on-dark);
  border-color: var(--toddyi-danger);
  box-shadow: 0 var(--toddyi-size-2px) var(--toddyi-size-6px) color-mix(in srgb, var(--toddyi-danger) 30%, transparent);
}

/* ===== Markdown Editor Preview Tabs ===== */
.markdown-editor {
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-25rem);
  margin-bottom: var(--toddyi-size-1rem);
}
.markdown-editor__tabs {
  display: flex;
  gap: var(--toddyi-size-0-25rem);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  padding-bottom: 0;
  margin-bottom: var(--toddyi-size-0-4rem);
}
.markdown-editor__tab {
  font-size: var(--toddyi-size-0-8rem);
  font-weight: 600;
  padding: var(--toddyi-size-0-35rem) var(--toddyi-size-0-75rem) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: var(--toddyi-size-2px) solid transparent !important;
  color: var(--pico-muted-color) !important;
  cursor: pointer;
  margin: 0 !important;
  border-radius: var(--toddyi-size-4px) var(--toddyi-size-4px) 0 0 !important;
  transition: all 0.15s ease;
  width: auto !important;
  box-shadow: none !important;
}
.markdown-editor__tab:hover {
  /* Same trap as .board-filter-btn: these tabs are <button> elements. (#203) */
  color: var(--toddyi-text-body) !important;
  background: var(--pico-secondary-background) !important;
}
.markdown-editor__tab.is-active {
  color: var(--pico-primary) !important;
  border-bottom: var(--toddyi-size-2px) solid var(--pico-primary) !important;
  border-radius: var(--toddyi-size-4px) var(--toddyi-size-4px) 0 0 !important;
}
.markdown-editor__preview {
  padding: var(--toddyi-size-0-75rem);
  border: var(--toddyi-size-1px) dashed var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  min-height: var(--toddyi-size-138px);
  overflow-y: auto;
}
.markdown-editor__preview p:last-child {
  margin-bottom: 0;
}

/* ===== Form and Switch enhancements ===== */
.switches-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--toddyi-size-1-5rem);
  margin-top: var(--toddyi-size-1rem);
  margin-bottom: var(--toddyi-size-1-5rem);
  padding: var(--toddyi-size-0-75rem) var(--toddyi-size-1-25rem);
  background-color: var(--pico-secondary-background);
  border-radius: var(--pico-border-radius);
  border: var(--toddyi-size-1px) dashed var(--pico-muted-border-color);
}

.switch-item {
  display: inline-flex;
  align-items: center;
  gap: var(--toddyi-size-0-5rem);
  margin: 0 !important;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.switch-item input[type="checkbox"] {
  margin-bottom: 0 !important;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-75rem);
  margin-top: var(--toddyi-size-1-5rem);
}

.form-actions input[type="submit"],
.form-actions button,
.form-actions a[role="button"] {
  margin-bottom: 0 !important;
  width: auto;
  min-width: var(--toddyi-size-140px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}