/* Text From Home — texting pause switch (assets/texting-pause.js) */
.tfh-pause { color: #57534e; }
.tfh-pause[hidden], [data-texting-pause][hidden] { display: none !important; }
.tfh-pause-line[hidden] { display: none !important; }
.tfh-pause-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.tfh-pause-state { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #1c1917; }
.tfh-pause-state[hidden] { display: none; }
.tfh-pause-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d6d3d1; flex: 0 0 auto; }
.tfh-pause.is-on .tfh-pause-dot { background: #047857; }
.tfh-pause.is-paused .tfh-pause-dot { background: #b45309; }
.tfh-pause-label[hidden], .tfh-pause-nophone[hidden] { display: none; }
.tfh-pause.is-nophone .tfh-pause-dot { background: #d6d3d1; }
.tfh-pause-nophone { font-weight: 500; color: #57534e; }
.tfh-pause-nophone a { color: #b45309; font-weight: 600; text-decoration: underline; }
.tfh-pause[aria-busy="true"] .tfh-pause-label { color: #57534e; }
.tfh-pause-btn { padding: 0.5rem 1rem; font-size: 0.95rem; line-height: 1.2; }
.tfh-pause-btn[hidden] { display: none; }
.tfh-pause-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tfh-pause-btn:focus-visible, .tfh-pause-retry:focus-visible { outline: 2px solid rgba(180, 83, 9, 0.45); outline-offset: 2px; }
.tfh-pause .tfh-pause-note {
  margin: 0 0 0.7rem; padding: 0.7rem 0.9rem; border-radius: 0.75rem;
  background: #fff7ed; color: #9a3412; font-weight: 500; font-size: 0.95rem;
}
.tfh-pause-note[hidden] { display: none; }
.tfh-pause-msg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.tfh-pause .tfh-pause-status { margin: 0.5rem 0 0; font-size: 0.92rem; min-height: 0; }
.tfh-pause-status:empty { display: none; }
.tfh-pause .tfh-pause-status.is-ok { color: #047857; }
.tfh-pause .tfh-pause-status.is-err { color: #be123c; }
.tfh-pause-retry {
  background: none; border: 0; padding: 0; margin: 0.5rem 0 0; font: inherit; font-size: 0.92rem;
  font-weight: 600; color: #b45309; cursor: pointer; text-decoration: underline;
}
.tfh-pause-retry[hidden] { display: none; }

/* Compact inline variant (/reports/ header, next to "Edit profile").
   The switch's parts flow into the controls row; note + messages take their own full-width lines. */
.tfh-report-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.75rem; }
.tfh-report-controls .tfh-sep { color: #a8a29e; }
.tfh-report-controls:has(> [data-texting-pause][hidden]) .tfh-sep,
.tfh-report-controls:has(.tfh-pause-line[hidden]) .tfh-sep { display: none; }
.tfh-report-controls > [data-texting-pause]:not([hidden]),
.tfh-report-controls .tfh-pause--compact { display: contents; }
.tfh-pause--compact .tfh-pause-line { font-size: 0.98rem; justify-content: center; gap: 0.35rem 0.6rem; }
.tfh-pause--compact .tfh-pause-btn { padding: 0.35rem 0.85rem; font-size: 0.9rem; }
.tfh-pause--compact .tfh-pause-note.tfh-pause-note { order: 2; flex: 1 0 100%; margin: 0.25rem auto 0; max-width: 30rem; text-align: center; box-sizing: border-box; }
.tfh-pause--compact .tfh-pause-msg { order: 3; flex: 1 0 100%; justify-content: center; text-align: center; }
.tfh-pause--compact .tfh-pause-status, .tfh-pause--compact .tfh-pause-retry { margin-top: 0.1rem; }
/* No phone yet on /reports/: own centered line under "Edit profile", no dot or separator. */
.tfh-report-controls:has(.tfh-pause.is-nophone) .tfh-sep,
.tfh-pause--compact.is-nophone .tfh-pause-dot { display: none; }
.tfh-pause--compact.is-nophone .tfh-pause-line { flex: 1 0 100%; }
.tfh-pause--compact.is-nophone .tfh-pause-state { display: inline; text-align: center; }
@media print { .tfh-pause, [data-texting-pause] { display: none !important; } }

/* ---- Header placement on /reports/ (2026-10-02) ----
   Edit profile + "Texting is on" + Pause live in the top nav row, between the logo and the avatar, in the old
   nav-link size (1.08rem / 1rem on phones). Same controller and markup as before; only the container moved. */
html.tfh-signed-in .nav-report-controls[data-nav-auth="user"] { display: flex !important; }
.nav-report-controls {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.35rem 0.9rem;
  margin: 0 1.4rem 0 0;
  font-size: 1.08rem; font-weight: 500; line-height: 1.2;
}
/* Reserve its space (no jump) until the control has mounted, then show it all at once. */
.nav-report-controls:has(> [data-texting-pause][hidden]) { visibility: hidden; }
.nav-report-controls > a { white-space: nowrap; }
.nav-report-controls .tfh-pause--compact .tfh-pause-line { font-size: 1.08rem; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 0.35rem 0.9rem; white-space: nowrap; }
.nav-report-controls .tfh-pause--compact .tfh-pause-state { font-weight: 500; }
.nav-report-controls .tfh-pause--compact .tfh-pause-btn { font-size: 0.95rem; padding: 0.3rem 0.85rem; }
.nav-report-controls .tfh-pause--compact.is-nophone .tfh-pause-line { flex: 0 0 auto; }
.nav-report-controls .tfh-pause--compact.is-nophone .tfh-pause-state { white-space: normal; text-align: left; }
/* Persistent STOP note stays in flow (rare): own full-width line under the row. */
.nav-report-controls .tfh-pause--compact .tfh-pause-note.tfh-pause-note { order: 2; flex: 1 0 100%; margin: 0.35rem 0 0; max-width: 24rem; text-align: left; white-space: normal; font-size: 0.92rem; }
/* Transient messages (Pausing…, Texting paused., errors, Try again) float under the header so it never changes height. */
.nav-report-controls .tfh-pause--compact .tfh-pause-msg {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 45;
  flex: none; width: max-content; max-width: min(22rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid #e7e5e4; border-radius: 0.7rem; padding: 0.5rem 0.8rem;
  box-shadow: 0 8px 22px rgba(28, 25, 23, 0.12); text-align: left; font-size: 0.92rem; font-weight: 500; white-space: normal;
}
.nav-report-controls .tfh-pause--compact .tfh-pause-msg:not(:has(.tfh-pause-status:not(:empty))):not(:has(.tfh-pause-retry:not([hidden]))) { display: none; }
.nav-report-controls .tfh-pause--compact .tfh-pause-status { margin: 0; }
.nav-report-controls .tfh-pause--compact .tfh-pause-retry { margin: 0; }

/* Tablets/phones: logo + avatar share the first row; the controls take their own centred row under it
   (where the old nav links wrapped to), so nothing crowds the logo or avatar. */
@media (max-width: 820px) {
  html.tfh-signed-in header:has(.nav-report-controls) { flex-wrap: wrap !important; row-gap: 0.45rem !important; }
  html.tfh-signed-in header:has(.nav-report-controls) > .nav { display: contents !important; }
  html.tfh-signed-in header:has(.nav-report-controls) > .logo { order: 1; }
  html.tfh-signed-in header:has(.nav-report-controls) .account-menu { order: 2; margin-left: auto; }
  html.tfh-signed-in header:has(.nav-report-controls) .nav-report-controls[data-nav-auth="user"] {
    order: 3; flex: 1 0 100%; justify-content: center; margin: 0; min-height: 2.2rem;
  }
  /* "Add their number in setup" sentence is too long for a phone row; Edit profile already leads to setup. */
  .nav-report-controls .tfh-pause--compact.is-nophone .tfh-pause-nophone { display: none; }
  .nav-report-controls .tfh-pause--compact .tfh-pause-msg { right: auto; left: 50%; transform: translateX(-50%); text-align: center; }
  .nav-report-controls .tfh-pause--compact .tfh-pause-note.tfh-pause-note { max-width: none; text-align: center; }
}
.nav .nav-report-controls > a { font-size: inherit; }
@media (max-width: 640px) {
  html.tfh-signed-in .nav-report-controls[data-nav-auth="user"] { font-size: 1rem; }
  html.tfh-signed-in .nav-report-controls .tfh-pause--compact .tfh-pause-line { font-size: 1rem; }
}