/* ===== Notification bell ===== */
.bell { position: relative; }
.bell__badge {
  position: absolute; top: var(--toddyi-size-neg-2px); inset-inline-end: var(--toddyi-size-neg-2px);
  min-width: var(--toddyi-size-16px); height: var(--toddyi-size-16px); padding: 0 var(--toddyi-size-4px);
  border-radius: var(--toddyi-size-8px); background: var(--toddyi-danger); color: var(--toddyi-text-on-dark);
  font-size: var(--toddyi-size-0-65rem); font-weight: 700; line-height: var(--toddyi-size-16px); text-align: center;
}

/* ===== Flash ===== */
.flash {
  padding: var(--toddyi-size-0-75rem) var(--toddyi-size-1rem);
  margin-bottom: var(--toddyi-size-1-25rem);
  border-radius: var(--pico-border-radius);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  box-shadow: var(--toddyi-card-shadow);
}
.flash--notice { border-inline-start: var(--toddyi-size-4px) solid var(--toddyi-success); }
.flash--alert, .flash--error { border-inline-start: var(--toddyi-size-4px) solid var(--toddyi-danger); }

/* ===== Page header ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--toddyi-size-1rem);
  margin-bottom: var(--toddyi-size-1-75rem);
  border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  padding-bottom: var(--toddyi-size-1rem);
}
.page-header hgroup { margin: 0; }
.page-header h1 { font-size: clamp(var(--toddyi-size-1-5rem), var(--toddyi-size-5vw), var(--toddyi-size-2-5rem)); margin: 0; }
.page-header p { margin: 0; color: var(--pico-muted-color); }

/* ===== Buttons ===== */
.new-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--toddyi-size-0-4rem);
  padding: var(--toddyi-size-0-6rem) var(--toddyi-size-1-1rem);
  border-radius: var(--toddyi-size-2rem);
  white-space: nowrap;
  font-weight: 700;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border: var(--toddyi-size-1px) solid var(--pico-primary);
  box-shadow: var(--toddyi-card-shadow);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.new-task-btn::before {
  content: "+";
  font-size: var(--toddyi-size-1-2rem);
  font-weight: 700;
  line-height: 0.8;
}
.new-task-btn:hover {
  background: var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}
.new-task-btn:active { transform: scale(0.96); }

/* ===== Task grid / cards ===== */
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--toddyi-size-100pct), var(--toddyi-size-360px)), 1fr));
  gap: var(--toddyi-size-1-25rem);
}
.task-card {
  margin: 0;
  box-shadow: var(--toddyi-card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.task-card:hover { transform: translateY(var(--toddyi-size-neg-2px)); }
.task-card.is-completed { opacity: 0.7; }
.task-card__header { display: flex; justify-content: space-between; align-items: center; gap: var(--toddyi-size-0-5rem); }
.task-card__title { margin: 0; font-size: var(--toddyi-size-1-1rem); }
.task-card.is-completed .task-card__title { text-decoration: line-through; }
.task-card__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--toddyi-size-0-5rem); }
.task-check {
  width: var(--toddyi-size-1-5rem); height: var(--toddyi-size-1-5rem); flex-shrink: 0; padding: 0; margin: 0;
  border-radius: var(--toddyi-size-50pct); border: var(--toddyi-size-2px) solid var(--pico-muted-border-color);
  background: transparent; color: var(--toddyi-text-on-dark); cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--toddyi-size-0-8rem);
}
.task-check.is-checked { background: var(--toddyi-success); border-color: var(--toddyi-success); }

.status-badge { font-size: var(--toddyi-size-0-75rem); padding: var(--toddyi-size-0-15rem) var(--toddyi-size-0-6rem); border-radius: var(--toddyi-size-1rem); font-weight: 700; }
.status-badge--completed { background: color-mix(in srgb, var(--toddyi-success) var(--toddyi-size-20pct), transparent); color: var(--toddyi-success); }
.status-badge--pending { background: var(--pico-form-element-disabled-background-color); color: var(--pico-muted-color); }

.task-meta { display: flex; align-items: center; gap: var(--toddyi-size-0-4rem); color: var(--pico-muted-color); font-size: var(--toddyi-size-0-85rem); }
.task-meta svg { width: var(--toddyi-size-1em); height: var(--toddyi-size-1em); flex-shrink: 0; }
.task-meta svg,
.task-action-btn svg { stroke-width: var(--toddyi-size-2px); }
.task-action-btn svg { width: var(--toddyi-size-14px); height: var(--toddyi-size-14px); }
/* A date is one value; breaking it after the comma reads as two. */
.due-date { white-space: nowrap; }
.due-date.is-overdue { color: var(--toddyi-danger); font-weight: 700; }

.priority-badge { font-size: var(--toddyi-size-0-7rem); padding: var(--toddyi-size-0-1rem) var(--toddyi-size-0-5rem); border-radius: var(--toddyi-size-1rem); text-transform: capitalize; }
.priority-low { background: color-mix(in srgb, var(--toddyi-success) 18%, transparent); color: var(--toddyi-success); }
.priority-medium { background: color-mix(in srgb, var(--toddyi-warning) 22%, transparent); color: var(--toddyi-warning); }
.priority-high { background: color-mix(in srgb, var(--toddyi-danger) 18%, transparent); color: var(--toddyi-danger); }

.tag-chip { display: inline-flex; align-items: center; gap: var(--toddyi-size-0-25rem); font-size: var(--toddyi-size-0-72rem); padding: var(--toddyi-size-0-1rem) var(--toddyi-size-0-55rem); border-radius: var(--toddyi-size-1rem); background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }

.empty-state { text-align: center; padding: var(--toddyi-size-3rem) var(--toddyi-size-1rem); color: var(--pico-muted-color); }

/* ===== Search ===== */
.search-bar { margin-bottom: var(--toddyi-size-1-5rem); }
.search-bar input { margin: 0; }

/* ===== Auth ===== */
.auth-page { max-width: var(--toddyi-size-460px); padding: var(--toddyi-size-3rem) var(--toddyi-size-1rem); margin-inline: auto; }
.auth-card { box-shadow: var(--toddyi-card-shadow); }
.auth-card header { text-align: center; }
.auth-submit { width: var(--toddyi-size-100pct); }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--toddyi-size-0-5rem); margin-top: var(--toddyi-size-1rem); font-size: var(--toddyi-size-0-9rem); }

/* OmniAuth sign-in providers such as Google. */
.oauth-links { margin-top: var(--toddyi-size-1-25rem); }
.oauth-divider { display: flex; align-items: center; gap: var(--toddyi-size-0-75rem); margin: var(--toddyi-size-1rem) 0; color: var(--pico-muted-color); font-size: var(--toddyi-size-0-85rem); }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: var(--toddyi-size-1px); background: var(--pico-muted-border-color); }
.oauth-links form { margin: 0; }
.oauth-button {
  width: var(--toddyi-size-100pct);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--toddyi-size-0-6rem);
  background: var(--oauth-btn-bg);
  color: var(--oauth-btn-color);
  border: var(--toddyi-size-1px) solid var(--oauth-btn-border);
  font-weight: 600;
}
.oauth-button:hover { background: var(--oauth-btn-bg-hover); color: var(--oauth-btn-color); }
.oauth-icon { width: var(--toddyi-size-18px); height: var(--toddyi-size-18px); flex-shrink: 0; }
.auth-errors { border-inline-start: var(--toddyi-size-4px) solid var(--toddyi-danger); padding: var(--toddyi-size-0-75rem) var(--toddyi-size-1rem); margin-bottom: var(--toddyi-size-1rem); }
.auth-errors ul { margin: var(--toddyi-size-0-25rem) 0 0; padding-inline-start: var(--toddyi-size-1-1rem); font-size: var(--toddyi-size-0-85rem); }
.auth-danger { --pico-color: var(--toddyi-danger); --pico-border-color: var(--toddyi-danger); background: transparent; }

/* Linked sign-in providers on the account page. (#234) */
.provider-list { list-style: none; margin: var(--toddyi-size-1rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--toddyi-size-0-5rem); }
.provider-list__row { display: flex; align-items: center; gap: var(--toddyi-size-0-75rem); padding: var(--toddyi-size-0-6rem) 0; border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.provider-list__row:last-child { border-bottom: none; }
.provider-list__name { display: inline-flex; align-items: center; gap: var(--toddyi-size-0-6rem); flex: 1; font-weight: 600; }
.provider-list__state { display: inline-flex; align-items: center; gap: var(--toddyi-size-0-25rem); color: var(--toddyi-accent-green); font-size: var(--toddyi-size-0-85rem); }
.provider-list__row form { margin: 0; }
.provider-list__row button { inline-size: auto; padding-block: var(--toddyi-size-0-25rem); font-size: var(--toddyi-size-0-85rem); }
.provider-list__note { margin-top: var(--toddyi-size-0-75rem); font-size: var(--toddyi-size-0-85rem); }

/* ===== Multi-factor authentication ===== */
.mfa-section { margin-top: var(--toddyi-size-1-5rem); padding-top: var(--toddyi-size-1-25rem); border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.mfa-section h2 { font-size: var(--toddyi-size-1-05rem); margin-bottom: var(--toddyi-size-0-5rem); }
.mfa-steps { margin: 0 0 var(--toddyi-size-1rem); padding-inline-start: var(--toddyi-size-1-25rem); color: var(--pico-muted-color); font-size: var(--toddyi-size-0-9rem); display: flex; flex-direction: column; gap: var(--toddyi-size-0-4rem); }
.mfa-qr { display: flex; justify-content: center; padding: var(--toddyi-size-1rem); background: var(--toddyi-text-on-dark); border-radius: var(--pico-border-radius); border: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.mfa-qr svg { width: var(--toddyi-size-200px); height: var(--toddyi-size-200px); }
.mfa-secret { text-align: center; margin: var(--toddyi-size-1rem) 0; font-size: var(--toddyi-size-0-85rem); }
.mfa-secret code { font-size: var(--toddyi-size-1rem); letter-spacing: var(--toddyi-size-0-08em); word-break: break-all; }
.mfa-status { font-weight: 600; }
.mfa-status--on { color: var(--toddyi-success); }

/* ===== Folder board (grouped tasks view · #1) ===== */
.tasks-board {
  display: grid;
  grid-template-columns: var(--toddyi-size-260px) 1fr;
  gap: var(--toddyi-size-1-5rem);
  align-items: start;
}