/* Styling for the coach "To Do" account card (Messages + Lesson Notes To Do + Open
   Lesson Requests). Markup is produced by account.html (static shell) and
   account-coach-todo.js (rows). Tokens mirror styles.css. Scoped under
   #coach-todo-section so nothing leaks onto the rest of the account page.
   Buttons deliberately reuse .account-save-btn (styles.css) rather than a
   new --btn-primary-bg rule here, so they stay covered by the existing
   dark-mode button-contrast audit (scripts/dark-mode-button-contrast-check.mjs)
   without needing a new probe entry. */

/* Separator between VISIBLE subsections only. The Messages subsection can be [hidden]
   (no inbox.view, or view-as); an adjacent-sibling `+` rule would still draw a divider
   above whichever subsection follows it. */
#coach-todo-section .coach-todo-subsection:not([hidden]) ~ .coach-todo-subsection:not([hidden]) {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
#coach-todo-section h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
#coach-todo-section .coach-todo-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
}
#coach-todo-section .coach-todo-banner {
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--danger);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* [hidden] guard, same convention as availability-grid.css / admin.css / etc:
   this repo has no global [hidden] reset, so the `display: flex` above beats
   the UA [hidden] { display: none } and the banner renders as an empty red
   box on every load even though account-coach-todo.js sets `hidden` by
   default. Found live in Task 8 emulator verification (2026-09-17). */
#coach-todo-section .coach-todo-banner[hidden] {
  display: none;
}
#coach-todo-section .coach-todo-banner button {
  background: transparent;
  border: 0;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}
#coach-todo-section .coach-todo-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
#coach-todo-section .coach-todo-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
#coach-todo-section .coach-todo-row.coach-todo-priority {
  border-left: 4px solid #f5c518;
}
#coach-todo-section .coach-todo-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
}
#coach-todo-section .coach-todo-row-meta {
  color: var(--text-muted);
  font-size: 0.87rem;
  margin: 4px 0 0;
}
#coach-todo-section .coach-todo-priority-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf1d6;
  color: #7d5a08;
  font-size: 0.78rem;
  font-weight: 700;
}
#coach-todo-section .coach-todo-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
/* NOT scoped under #coach-todo-section: openConfirmDialog() and
   openPublishConfirmDialog() (account-coach-todo.js) append their
   .ml-modal-backdrop straight to document.body (matching the existing
   reschedule/cancel modal pattern), so a Cancel/Dismiss-reminder button
   built with this class never lives inside #coach-todo-section. Scoped it
   silently never matched, leaving the button with raw UA button chrome
   (black outset border, gray fill) instead of this pill style. The class
   name itself is unique to this file (grep confirms no collision), so
   dropping the scope prefix is safe. Found live in Task 8 emulator
   verification (2026-09-17). */
.coach-todo-secondary-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#coach-todo-section .coach-todo-row-status.error {
  color: var(--danger);
}
#coach-todo-section .coach-todo-note-editor {
  margin-top: 10px;
}
/* The card takes focus (tabindex="-1") when the publish dialog closes and the Publish button it opened from is gone. */
#coach-todo-notes:focus { outline: none; }

/* ---- Messages subsection (design spec 2026-09-19-coach-todo-messages) ------------------ */
#coach-todo-section .coach-todo-msg-group + .coach-todo-msg-group { margin-top: 6px; }
#coach-todo-section .coach-todo-msg-group-title {
  margin: 14px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#coach-todo-section .coach-todo-msg-group-title .coach-todo-msg-count {
  font-weight: 600;
}
/* min-width:0 is load-bearing: .coach-todo-list is a grid, so its <li> items default to
   min-width:auto and a no-wrap subject/preview would stretch the row past the card. */
#coach-todo-section .coach-todo-row.coach-todo-msg-row { padding: 0; min-width: 0; }
#coach-todo-section .coach-todo-msg-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
#coach-todo-section .coach-todo-msg-link:hover { background: var(--green-light); }
#coach-todo-section .coach-todo-msg-link:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}
#coach-todo-section .coach-todo-msg-body { flex: 1 1 auto; min-width: 0; }
#coach-todo-section .coach-todo-msg-subject,
#coach-todo-section .coach-todo-msg-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#coach-todo-section .coach-todo-msg-subject { margin-top: 2px; }
#coach-todo-section .coach-todo-msg-preview {
  color: var(--text-muted);
  font-size: 0.87rem;
}
#coach-todo-section .coach-todo-msg-age {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}
#coach-todo-section .coach-todo-msg-new {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--green-light);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}
#coach-todo-section .coach-todo-msg-go {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
#coach-todo-section .coach-todo-msg-footer {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
#coach-todo-section .coach-todo-msg-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Same link treatment in the footer and inside the empty-state sentence (that one is inline,
   so it keeps its line box). Without an explicit colour it falls back to UA blue, which is
   close to unreadable on the dark card. */
#coach-todo-section .coach-todo-msg-footer a,
#coach-todo-section .coach-todo-empty a {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Spec N15 (2026-10-08): on phones, less side padding inside the To Do card, so its boxes and the dictation
   bar's buttons get about 32px wider. */
@media (max-width: 480px) {
  #coach-todo-section .account-collapse-body { padding-left: 10px; padding-right: 10px; }
  #coach-todo-section .coach-todo-row { padding-left: 6px; padding-right: 6px; }
}

/* #981: the To Do row's buttons get the 44px touch floor the publish dialog has. */
@media (pointer: coarse) {
  #coach-todo-section .coach-todo-row-actions button { min-height: 44px; }
}