/* The gentle bell (js/bellView.js): a compact button in the top bar and a bottom sheet with the list. */
.bell-btn { position: relative; flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 999px; background: var(--surface); color: var(--text-secondary); box-shadow: 0 0 0 1px var(--line-soft); display: inline-flex; align-items: center; justify-content: center; }
.bell-btn svg { width: 20px; height: 20px; }
.bell-btn:hover { color: var(--accent-strong); background: var(--accent-light); }
.bell-btn.has-items { color: var(--accent-strong); }
.bell-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #A65A12; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.bell-badge[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bell-head h2 { margin: 0; font-size: var(--text-lg); }
.bell-quiet { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #EEF1FA; color: #3B4470; font-size: 13px; font-weight: 600; line-height: 1.45; }
.bell-quiet[hidden] { display: none; }
.bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bell-item { display: grid; gap: 4px; padding: 8px 8px 6px; border-radius: 14px; background: var(--surface-soft); }
.bell-go { display: grid; gap: 2px; text-align: left; width: 100%; margin: 0; padding: 4px 4px; background: transparent; box-shadow: none; border-radius: 10px; color: var(--text-primary); min-height: 44px; }
.bell-go:hover { background: var(--accent-light); }
.bell-item-title { font-size: 12px; font-weight: 800; color: var(--accent-strong); letter-spacing: 0.02em; text-transform: uppercase; }
.bell-item-text { font-size: 14px; font-weight: 600; line-height: 1.4; }
.bell-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bell-snooze, .bell-dismiss, .bell-mute { margin: 0; min-height: 40px; padding: 0 12px; font-size: 13px; background: transparent; box-shadow: 0 0 0 1px var(--line); color: var(--text-secondary); width: auto; }
.bell-snooze:hover, .bell-dismiss:hover, .bell-mute:hover { background: var(--accent-light); color: var(--accent-strong); }
.bell-empty-row { list-style: none; }
.bell-empty { margin: 8px 4px 12px; color: var(--text-secondary); font-weight: 600; }
/* Habits share one card: the open ones listed, a done one disappears (js/notifications.js groupItems). */
.bell-group-head { display: grid; gap: 2px; padding: 4px 4px 2px; }
.bell-sublist { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
/* (the app's generic `li` is a flex row with a top rule: not inside the bell) */
.bell-list > li.bell-item { grid-template-columns: minmax(0, 1fr); justify-content: stretch; border-top: 0; }
.bell-sublist > li { display: block; padding: 0; border: 0; }
.bell-go.bell-sub { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; font-size: 14px; font-weight: 600; }
.bell-sub-time { flex: 0 0 auto; min-width: 46px; padding: 2px 7px; border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 0 0 1px var(--line-soft); }
.bell-sub-title { min-width: 0; overflow-wrap: anywhere; }
.bell-note { margin: 10px 2px 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); color: var(--text-primary); font-size: 13px; font-weight: 600; line-height: 1.45; }
.bell-note[hidden] { display: none; }
.bell-note .link-btn { min-height: 40px; padding: 0 6px; font-size: 13px; }
.bell-foot { display: flex; justify-content: center; margin-top: 8px; }
.bell-settings { min-height: 44px; font-size: 14px; }

/* Profile › Preferences › Reminders (js/bellView.js renderPrefsPanel). */
.bell-prefs-set { margin: 8px 0 10px; padding: 0; border: 0; min-width: 0; }
.bell-prefs-set legend { padding: 0; margin: 0 0 6px; font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.bell-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 2px 12px; }
.bell-topic { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.bell-topic[hidden] { display: none; }
.bell-topic input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0; }
.bell-topic span { min-width: 0; overflow-wrap: anywhere; }
.bell-quiet-times { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0; }
.bell-time { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.bell-time input[type="time"] { flex: 0 0 auto; min-width: 0; width: 9.5em; min-height: 44px; } /* room for "07:00 AM" + the clock icon */
@media (max-width: 340px) { .bell-topics { grid-template-columns: minmax(0, 1fr); } }
#bell-prefs-saved { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .bell-snooze, .bell-dismiss, .bell-mute { transition: none; } }
@media (max-width: 380px) { .bell-btn { width: 40px; } }
/* 320–360 px phones: the date keeps room to be read — the weight icon goes (the field keeps its label). */
@media (pointer: coarse) and (max-width: 360px) {
  .weight-pill svg { display: none; }
  .weight-pill { padding: 0 6px; }
  .bell-btn { width: 36px; min-width: 36px; }
  #date-prev-btn, #date-next-btn { width: 30px; min-width: 30px; padding: 0; }
}
/* Phones: a tap on the date opens the picker; its small calendar icon would cut "09/30/2026" to
   "09/30/202" (the date field keeps no room for it between the ‹ › buttons). */
@media (pointer: coarse) and (max-width: 480px) {
  .date-pill input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  #date-picker { padding: 0; }
}
@media (pointer: coarse) and (max-width: 340px) {
  .toolbar-row { gap: 4px; }
  #weight { width: 36px; flex: 0 0 36px; }
  #date-picker { letter-spacing: -0.3px; font-variant-numeric: proportional-nums; }
}

/* Round 12 — reminder times (Profile › Reminders, js/reminders.js): one row per reminder (switch + time), a short
   note under a row when its time is refused / inside quiet hours / muted, the Android app's "this phone" switch. */
.rem-rows { display: grid; gap: 0; margin: 2px 0 6px; }
.rem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.rem-row .rem-on { min-width: 0; }
.rem-time { min-width: 0; width: 8.5em; min-height: 44px; margin: 0; }
.rem-row-note { grid-column: 1 / -1; margin: -2px 0 6px 32px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--yellow-ink); }
.rem-row-note[hidden] { display: none; }
.rem-device { margin: 6px 0 4px; padding: 4px 10px 6px; border-radius: var(--radius-md); background: var(--surface-soft); }
.rem-device[hidden] { display: none; }
.rem-device .pf-note { margin-top: 0; }
.rem-device .pf-btn { margin-top: 4px; }
.rem-status { font-weight: 700; color: var(--text-primary); }
.rem-status[hidden] { display: none; }
@media (max-width: 340px) { .rem-time { width: 7.6em; } .rem-row-note { margin-left: 0; } }

/* The one line at the top of Today when a chosen reminder time has come (js/bellView.js renderBanner). */
.rem-banner { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 6px 6px 6px 12px; border-radius: var(--radius-md);
  background: var(--yellow-light); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; line-height: 1.35; }
.rem-banner[hidden] { display: none; }
.rem-banner-icon { flex: 0 0 auto; }
.rem-banner-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rem-banner-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.rem-banner-go, .rem-banner-later { margin: 0; width: auto; min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 13.5px; }
.rem-banner-go { background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
.rem-banner-later { background: transparent; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--line-strong); }
.rem-banner-later:hover { background: var(--surface); color: var(--text-primary); }
@media (max-width: 360px) { .rem-banner { margin: 6px 8px 0; padding-left: 10px; font-size: 13.5px; } .rem-banner-go, .rem-banner-later { padding: 0 10px; } }