/* ACT cockpit shell — Phase 0a.
   Brand: Navy #0D2340, Emerald #1D9E75, Red #B03030, Stone #F2F0EB, Mid #7A8796.
   Red reserved for gap / loss / SLA-breach / tag-required surfaces only. */

.page--act-cockpit {
  min-height: 100vh;
  background: #F2F0EB;
  color: #0D2340;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.act-cockpit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.act-cockpit--loading,
.act-cockpit--centered {
  align-items: center;
  justify-content: center;
}

.act-cockpit-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
}

.act-cockpit-brand {
  display: inline-flex;
  align-items: center;
  color: #0D2340;
  text-decoration: none;
  font-weight: 600;
}

.act-cockpit-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.act-cockpit-clinic {
  color: #0D2340;
  font-weight: 600;
}

.act-cockpit-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.08);
  color: #0D2340;
  font-size: 12px;
  font-weight: 500;
}

.act-cockpit-signout {
  background: transparent;
  border: 1px solid rgba(13, 35, 64, 0.15);
  color: #0D2340;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.act-cockpit-signout:hover:not(:disabled) {
  background: rgba(13, 35, 64, 0.06);
}

.act-cockpit-signout:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.act-cockpit-main {
  flex: 1;
  padding: 48px 24px;
}

.act-cockpit-welcome {
  max-width: 960px;
  margin: 0 auto;
}

.act-cockpit-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: #7A8796;
  margin: 0 0 8px;
}

.act-cockpit-title {
  font-size: 32px;
  font-weight: 600;
  color: #0D2340;
  margin: 0 0 12px;
  line-height: 1.2;
}

.act-cockpit-lede {
  font-size: 15px;
  color: #5a6877;
  margin: 0 0 32px;
  max-width: 640px;
  line-height: 1.55;
}

.act-cockpit-firstrun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.act-cockpit-firstrun-card {
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-cockpit-firstrun-card h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #0D2340;
}

.act-cockpit-firstrun-card p {
  font-size: 13px;
  color: #5a6877;
  margin: 0 0 8px;
  line-height: 1.5;
}

.act-cockpit-firstrun-cta {
  background: rgba(29, 158, 117, 0.1);
  border: 1px solid rgba(29, 158, 117, 0.3);
  color: #1D9E75;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s ease;
}

.act-cockpit-firstrun-cta:hover:not(:disabled) {
  background: rgba(29, 158, 117, 0.18);
}

.act-cockpit-firstrun-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.act-cockpit-firstrun-cta--solid {
  background: #1D9E75;
  color: #ffffff;
  text-decoration: none;
  border-color: #1D9E75;
}

.act-cockpit-firstrun-cta--solid:hover {
  background: #178d68;
}

.act-cockpit-footer-note {
  font-size: 12px;
  color: #7A8796;
  margin: 24px 0 0;
}

/* ------------------------------------------------------------------
 * Queue view (cockpit when ≥1 patient exists)
 * ------------------------------------------------------------------ */

.act-cockpit-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto 24px;
}

.act-cockpit-lede--compact {
  margin: 0;
  max-width: none;
}

.act-cockpit-danger-text {
  color: #B03030;
  font-weight: 600;
}

.act-cockpit-add-patient-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.act-cockpit-queues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.act-cockpit-stage {
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-cockpit-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A8796;
}

.act-cockpit-stage-label {
  color: #0D2340;
}

.act-cockpit-stage-count {
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.act-cockpit-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------------------------------------
 * TaskCard
 * ------------------------------------------------------------------ */

.act-task-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F2F0EB;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.act-task-card:hover {
  background: rgba(29, 158, 117, 0.08);
}

.act-task-card.is-stalled {
  background: rgba(176, 48, 48, 0.06);
  border: 1px solid rgba(176, 48, 48, 0.2);
}

.act-task-card-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.act-task-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #0D2340;
}

.act-task-card-lifecycle {
  font-size: 11px;
  color: #7A8796;
  text-transform: lowercase;
}

.act-task-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #7A8796;
}

.act-task-card-force {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.act-task-card-force--oe { background: rgba(122, 135, 150, 0.15); color: #0D2340; }
.act-task-card-force--fr { background: rgba(29, 158, 117, 0.15); color: #1D9E75; }
.act-task-card-force--ps { background: rgba(13, 35, 64, 0.1); color: #0D2340; }
.act-task-card-force--ce { background: rgba(242, 240, 235, 0.7); color: #7A8796; border: 1px solid rgba(13, 35, 64, 0.08); }

.act-task-card-badge--alert {
  background: rgba(176, 48, 48, 0.1);
  color: #B03030;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.act-task-card-source {
  text-transform: lowercase;
}

/* ------------------------------------------------------------------
 * Add-patient modal
 * ------------------------------------------------------------------ */

.act-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 35, 64, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.act-modal-overlay[hidden] {
  display: none;
}

.act-modal {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 16px 40px rgba(13, 35, 64, 0.18);
  overflow: hidden;
}

.act-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
}

.act-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0D2340;
}

.act-modal-close {
  background: transparent;
  border: none;
  color: #7A8796;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.act-modal-close:hover {
  color: #0D2340;
}

.act-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.act-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #0D2340;
}

.act-modal-field > span:first-child {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7A8796;
}

.act-modal-field-optional {
  color: #7A8796;
  text-transform: none;
  font-weight: 400;
}

.act-modal-field input[type="text"],
.act-modal-field select {
  border: 1px solid rgba(13, 35, 64, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: #0D2340;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.act-modal-field input[type="text"]:focus,
.act-modal-field select:focus {
  outline: none;
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18);
}

.act-modal-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.act-modal-field--checkbox > span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #0D2340;
}

.act-modal-field--checkbox input[type="checkbox"] {
  accent-color: #1D9E75;
}

.act-modal-feedback {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(176, 48, 48, 0.08);
  color: #B03030;
}

.act-modal-feedback[data-state="info"] {
  background: rgba(29, 158, 117, 0.08);
  color: #1D9E75;
}

.act-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.act-modal-button {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.act-modal-button--ghost {
  background: transparent;
  color: #7A8796;
  border-color: rgba(13, 35, 64, 0.1);
}

.act-modal-button--ghost:hover {
  background: rgba(13, 35, 64, 0.04);
}

.act-modal-button--primary {
  background: #1D9E75;
  color: #ffffff;
}

.act-modal-button--primary:hover:not(:disabled) {
  background: #178d68;
}

.act-modal-button--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .act-cockpit-queue-header {
    flex-direction: column;
    align-items: stretch;
  }
  .act-cockpit-add-patient-cta {
    align-self: flex-start;
  }
}

/* Sign-in helper button (text link styled as a button) — used in the auth page footer. */
.trace-signin-textlink {
  background: none;
  border: none;
  color: #1D9E75;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

.trace-signin-textlink:hover {
  text-decoration: underline;
}

.trace-signin-helper {
  text-align: center;
}

/* Center the signin panel on the auth page since ACT doesn't reuse the TRACE hero side. */
.trace-signin-panel--centered {
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
}

@media (max-width: 720px) {
  .act-cockpit-topbar {
    padding: 0 16px;
  }
  .act-cockpit-meta {
    gap: 8px;
  }
  .act-cockpit-role {
    display: none;
  }
  .act-cockpit-main {
    padding: 24px 16px;
  }
  .act-cockpit-title {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------------
 * Frame variants — subtle top band that signals the user's chosen mood.
 * Applied as a class on .act-cockpit. Red is intentionally absent.
 * ------------------------------------------------------------------ */

.act-cockpit-frame--none {
  /* no decoration; baseline */
}

.act-cockpit-frame--navy {
  border-top: 4px solid #0D2340;
}

.act-cockpit-frame--emerald {
  border-top: 4px solid rgba(29, 158, 117, 0.6);
}

.act-cockpit-frame--stone {
  border-top: 4px solid #E5DFD3;
}

/* ------------------------------------------------------------------
 * Motto banner — shown only when staff has a personal_motto set.
 * Sits below the topbar, above any tabs / KPI strip. Subtle by design.
 * ------------------------------------------------------------------ */

.act-cockpit-motto {
  max-width: 1080px;
  margin: 12px auto 0;
  padding: 6px 24px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #5a6877;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
}

.act-cockpit-motto-mark {
  font-size: 28px;
  line-height: 0.6;
  color: rgba(13, 35, 64, 0.3);
  font-family: Georgia, serif;
  font-style: normal;
}

.act-cockpit-motto-text {
  margin: 0;
}

.act-cockpit-motto-byline {
  margin-left: 4px;
  color: rgba(13, 35, 64, 0.45);
  font-style: normal;
  font-size: 12px;
}

/* ------------------------------------------------------------------
 * Topbar — Profile link
 * ------------------------------------------------------------------ */

.act-cockpit-profile-link {
  font-size: 12px;
  color: #5a6877;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.act-cockpit-profile-link:hover {
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
}

.act-cockpit-back {
  font-size: 12px;
  color: #5a6877;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.act-cockpit-back:hover {
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
}

/* ------------------------------------------------------------------
 * Role-aware tab strip
 * ------------------------------------------------------------------ */

.act-cockpit-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0 0;
  max-width: 1080px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
  overflow-x: auto;
}

.act-cockpit-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #7A8796;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.act-cockpit-tab:hover {
  color: #0D2340;
}

.act-cockpit-tab.is-active {
  color: #0D2340;
  border-bottom-color: #1D9E75;
  font-weight: 600;
}

/* ------------------------------------------------------------------
 * KPI strip — role-aware. Subtle palette.
 * ------------------------------------------------------------------ */

.act-cockpit-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1080px;
  margin: 18px auto 18px;
}

.act-cockpit-kpi {
  flex: 1 1 140px;
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 35, 64, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.act-cockpit-kpi-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A8796;
}

.act-cockpit-kpi-value {
  font-size: 24px;
  font-weight: 600;
  color: #0D2340;
  line-height: 1.1;
}

.act-cockpit-kpi-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #5a6877;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.act-cockpit-kpi.is-clickable {
  background: inherit;
  border: 1px solid rgba(13, 35, 64, 0.08);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.act-cockpit-kpi.is-clickable:hover {
  background: rgba(13, 35, 64, 0.03);
  border-color: rgba(13, 35, 64, 0.18);
  transform: translateY(-1px);
}
.act-cockpit-kpi-cta {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #0D2340;
  text-transform: none;
  letter-spacing: 0;
}

.act-cockpit-kpi--info .act-cockpit-kpi-value { color: #3b8ac4; }
.act-cockpit-kpi--warning .act-cockpit-kpi-value { color: #c2783d; }

.act-cockpit-kpi--default .act-cockpit-kpi-value {
  color: #0D2340;
}

.act-cockpit-kpi--success .act-cockpit-kpi-value {
  color: #1D9E75;
}

.act-cockpit-kpi--warning .act-cockpit-kpi-value {
  color: #7A8796;
}

.act-cockpit-kpi--danger .act-cockpit-kpi-value {
  color: #B03030;
}

/* ------------------------------------------------------------------
 * Empty-list state (when an active tab filters everything out)
 * ------------------------------------------------------------------ */

.act-cockpit-empty-list {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.06);
  border-radius: 10px;
  text-align: center;
}

/* ------------------------------------------------------------------
 * /act/profile page
 * ------------------------------------------------------------------ */

.page--act-profile {
  min-height: 100vh;
  background: #F2F0EB;
  color: #0D2340;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.act-profile-main {
  padding: 32px 16px 64px;
}

.act-profile-shell {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.act-profile-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
  background: linear-gradient(180deg, rgba(13, 35, 64, 0.03) 0%, rgba(13, 35, 64, 0) 100%);
}

.act-profile-title {
  margin: 4px 0 16px;
  font-size: 24px;
  font-weight: 600;
  color: #0D2340;
}

.act-profile-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.act-profile-meta-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.act-profile-meta-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A8796;
}

.act-profile-meta-value {
  font-size: 14px;
  color: #0D2340;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.act-profile-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.act-profile-role-chip--founder {
  background: rgba(29, 158, 117, 0.12);
  color: #1D9E75;
}

.act-profile-role-chip--manager {
  background: rgba(13, 35, 64, 0.12);
  color: #0D2340;
}

.act-profile-form {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.act-profile-section {
  border: 1px solid rgba(13, 35, 64, 0.06);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.act-profile-section > legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A8796;
}

.act-profile-section-lede {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.5;
}

.act-profile-required {
  color: #B03030;
}

.act-profile-motto-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.act-profile-motto-chip {
  background: rgba(13, 35, 64, 0.04);
  border: 1px solid rgba(13, 35, 64, 0.06);
  color: #5a6877;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.act-profile-motto-chip:hover {
  background: rgba(29, 158, 117, 0.08);
  color: #1D9E75;
}

.act-profile-frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.act-profile-frame-option {
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}

.act-profile-frame-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.act-profile-frame-option:hover {
  border-color: rgba(29, 158, 117, 0.3);
}

.act-profile-frame-option.is-selected {
  border-color: #1D9E75;
  background: rgba(29, 158, 117, 0.05);
}

.act-profile-frame-swatch {
  height: 8px;
  border-radius: 4px;
  background: rgba(13, 35, 64, 0.08);
}

.act-profile-frame-swatch--navy { background: #0D2340; }
.act-profile-frame-swatch--emerald { background: rgba(29, 158, 117, 0.7); }
.act-profile-frame-swatch--stone { background: #E5DFD3; }
.act-profile-frame-swatch--none {
  background: linear-gradient(90deg, rgba(13, 35, 64, 0.06) 0%, rgba(13, 35, 64, 0.06) 100%);
  border: 1px dashed rgba(13, 35, 64, 0.18);
}

.act-profile-frame-label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
}

.act-profile-frame-description {
  font-size: 12px;
  color: #7A8796;
  line-height: 1.4;
}

.act-profile-coming-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.7;
}

.act-profile-coming-list strong {
  color: #0D2340;
  font-weight: 600;
}

.act-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(13, 35, 64, 0.06);
}

@media (max-width: 720px) {
  .act-profile-main {
    padding: 16px 12px 48px;
  }
  .act-profile-shell {
    border-radius: 10px;
  }
  .act-profile-header,
  .act-profile-form {
    padding: 18px 16px;
  }
  .act-profile-section {
    padding: 14px;
  }
}

/* ------------------------------------------------------------------
 * Subtle re-tuning of the empty-state CTAs introduced in Phase 0a.
 * Goal: less Emerald saturation on non-primary surfaces. Primary CTAs
 * (solid Emerald) retain their colour because they're the action.
 * ------------------------------------------------------------------ */

.act-cockpit-firstrun-cta:not(.act-cockpit-firstrun-cta--solid) {
  background: rgba(13, 35, 64, 0.04);
  border-color: rgba(13, 35, 64, 0.08);
  color: #0D2340;
}

.act-cockpit-firstrun-cta:not(.act-cockpit-firstrun-cta--solid):hover:not(:disabled) {
  background: rgba(13, 35, 64, 0.08);
}

/* ------------------------------------------------------------------
 * Patient detail modal (Phase 0b slice 2b)
 * ------------------------------------------------------------------ */

.act-detail-overlay .act-detail-modal {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.act-detail-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.act-task-card {
  cursor: pointer;
}

.act-task-card:focus-visible {
  outline: 2px solid rgba(29, 158, 117, 0.6);
  outline-offset: 2px;
}

/* Summary block */
.act-detail-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
}

.act-detail-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.act-detail-name {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: #0D2340;
}

.act-detail-lifecycle {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.act-detail-lifecycle--stalled,
.act-detail-lifecycle--stall_untagged {
  background: rgba(176, 48, 48, 0.1);
  color: #B03030;
}

.act-detail-lifecycle--proceeded,
.act-detail-lifecycle--recovered {
  background: rgba(29, 158, 117, 0.12);
  color: #1D9E75;
}

.act-detail-lifecycle--lost_permanent,
.act-detail-lifecycle--excluded_CE {
  background: rgba(122, 135, 150, 0.18);
  color: #5a6877;
}

.act-detail-meta {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}

.act-detail-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-detail-meta dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A8796;
  margin: 0;
}

.act-detail-meta dd {
  margin: 0;
  font-size: 13px;
  color: #0D2340;
}

/* Actions row */
.act-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
}

.act-modal-button--danger {
  background: transparent;
  color: #B03030;
  border: 1px solid rgba(176, 48, 48, 0.3);
}

.act-modal-button--danger:hover:not(:disabled) {
  background: rgba(176, 48, 48, 0.08);
}

.act-detail-terminal-note {
  font-size: 12px;
  color: #7A8796;
  font-style: italic;
}

/* Section header (reused inside the detail modal) */
.act-detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 14px;
}

.act-detail-event-count {
  font-size: 11px;
  color: #7A8796;
}

/* Timeline */
.act-detail-empty {
  margin: 12px 0;
  font-size: 13px;
  color: #7A8796;
  font-style: italic;
}

.act-detail-event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-detail-event {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: #5a6877;
  padding: 8px 10px;
  background: #F8F6F1;
  border-radius: 8px;
  align-items: baseline;
}

.act-detail-event-type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  color: #7A8796;
}

.act-detail-event-summary {
  color: #0D2340;
}

.act-detail-event-note {
  grid-column: 2;
  color: #5a6877;
  font-style: italic;
}

.act-detail-event-time {
  grid-column: 2;
  color: #7A8796;
  font-size: 11px;
}

/* Tag-stall view */
.act-detail-tagstall {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.act-detail-tagstall-lede {
  margin: 0;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.5;
}

.act-detail-tagstall-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-detail-tagstall-fieldset {
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

.act-detail-tagstall-fieldset > legend {
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A8796;
}

.act-detail-force-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.act-detail-force-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.act-detail-force-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.act-detail-force-option:hover {
  border-color: rgba(29, 158, 117, 0.3);
}

.act-detail-force-option.is-selected {
  border-color: #1D9E75;
  background: rgba(29, 158, 117, 0.05);
}

.act-detail-force-label {
  font-size: 12px;
  color: #0D2340;
}

.act-detail-subreason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 30px;
}

.act-detail-subreason-chip {
  background: rgba(13, 35, 64, 0.04);
  border: 1px solid rgba(13, 35, 64, 0.06);
  color: #0D2340;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.act-detail-subreason-chip:hover {
  background: rgba(29, 158, 117, 0.08);
  border-color: rgba(29, 158, 117, 0.3);
}

.act-detail-subreason-chip.is-selected {
  background: rgba(29, 158, 117, 0.12);
  border-color: #1D9E75;
  color: #1D9E75;
  font-weight: 600;
}

.act-detail-tagstall-form textarea {
  border: 1px solid rgba(13, 35, 64, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0D2340;
  background: #ffffff;
  resize: vertical;
}

.act-detail-tagstall-form textarea:focus {
  outline: none;
  border-color: #1D9E75;
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18);
}

@media (max-width: 560px) {
  .act-detail-overlay .act-detail-modal {
    max-height: 96vh;
  }
  .act-detail-body {
    padding: 14px 16px 20px;
  }
  .act-detail-force-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
 * Stage band — primary navigation (replaces the role-aware tab strip)
 * ------------------------------------------------------------------ */

.act-stage-band {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) repeat(6, minmax(120px, 1fr));
  gap: 8px;
  max-width: 1080px;
  margin: 16px auto 0;
  padding: 0;
}

.act-stage-tile {
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.act-stage-tile:hover:not(:disabled) {
  border-color: rgba(29, 158, 117, 0.4);
}

.act-stage-tile.is-active {
  border-color: #1D9E75;
  background: rgba(29, 158, 117, 0.05);
}

.act-stage-tile.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
  background: #F6F4EE;
}

.act-stage-tile-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A8796;
}

.act-stage-tile-name {
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
}

.act-stage-tile-count {
  font-size: 18px;
  font-weight: 700;
  color: #0D2340;
  margin-top: 2px;
}

.act-stage-tile-alert {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #B03030;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.act-stage-tile--all .act-stage-tile-count {
  display: none;
}

/* ------------------------------------------------------------------
 * Action bar above the task list (Add / Import buttons)
 * ------------------------------------------------------------------ */

.act-cockpit-action-bar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  max-width: 1080px;
  margin: 0 auto 8px;
}

/* ------------------------------------------------------------------
 * Priority task list
 * ------------------------------------------------------------------ */

.act-task-list-section {
  max-width: 1080px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.act-task-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
}

.act-task-list-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0D2340;
}

.act-task-list-count {
  font-size: 12px;
  color: #7A8796;
}

.act-filter-clear-btn {
  appearance: none;
  background: #FFF4E6;
  border: 1px solid #F5B947;
  color: #A0660A;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.act-filter-clear-btn:hover { background: #FFE8C2; border-color: #E0A030; }

/* ========================================================================
   Smart Retention Pack v1 — counsellor retention surfaces (S3/S4)
   ====================================================================== */

/* Warmth pill on task row */
.act-task-row-warmth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F4F6F9;
  color: #5A6877;
  letter-spacing: 0.02em;
}
.act-task-row-warmth--warm  { background: #E6F7EC; color: #2A7B47; }
.act-task-row-warmth--cool  { background: #FFF6DA; color: #8A6300; }
.act-task-row-warmth--cold  { background: #FFE6D1; color: #A04A10; }
.act-task-row-warmth--ghost { background: #ECECEC; color: #4A4A4A; }

/* Suggested-next-move chip below the row reason */
.act-task-row-suggestion {
  appearance: none;
  background: linear-gradient(180deg, #F0F7FF 0%, #E2EEFB 100%);
  border: 1px solid #B8D2F0;
  color: #1F4A8C;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: filter 120ms ease, transform 120ms ease;
  grid-column: 1 / -1;
  margin-top: 4px;
}
.act-task-row-suggestion:hover { filter: brightness(0.98); transform: translateY(-1px); }
.act-task-row-suggestion--retention {
  background: linear-gradient(180deg, #FFF4E6 0%, #FFE4BD 100%);
  border-color: #F5B947;
  color: #8A4F00;
}

/* Smart Exit Interview — finality grid */
.act-detail-finality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.act-detail-finality-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 120ms ease, background 120ms ease;
}
.act-detail-finality-option:hover { border-color: rgba(13, 35, 64, 0.25); }
.act-detail-finality-option input { position: absolute; opacity: 0; pointer-events: none; }
.act-detail-finality-option.is-selected { border-color: #1F4A8C; background: #F0F7FF; }
.act-detail-finality-title { font-weight: 600; font-size: 13px; color: #0D2340; }
.act-detail-finality-hint  { font-size: 11px; color: #5A6877; }

.act-detail-followup-grid,
.act-detail-alternative-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.act-detail-followup-grid label,
.act-detail-alternative-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
}

/* Snooze-with-reason */
.act-snooze-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.act-snooze-reason-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  transition: border-color 120ms ease, background 120ms ease;
}
.act-snooze-reason-option:hover { border-color: rgba(13, 35, 64, 0.25); }
.act-snooze-reason-option input { position: absolute; opacity: 0; pointer-events: none; }
.act-snooze-reason-option.is-selected { border-color: #1F4A8C; background: #F0F7FF; }

/* Step-down (S4 alternative-plan) view */
.act-stepdown-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  min-width: 200px;
  flex: 1 1 calc(50% - 8px);
  transition: border-color 120ms ease, background 120ms ease;
}
.act-stepdown-option:hover { border-color: rgba(13, 35, 64, 0.25); }
.act-stepdown-option input { position: absolute; opacity: 0; pointer-events: none; }
.act-stepdown-option.is-selected { border-color: #2A7B47; background: #F0FBF4; }
.act-stepdown-title { font-weight: 600; font-size: 14px; color: #0D2340; }
.act-stepdown-hint  { font-size: 11px; color: #5A6877; }

.act-detail-stepdown-cta {
  background: #FFF4E6 !important;
  border-color: #F5B947 !important;
  color: #8A4F00 !important;
}
.act-detail-stepdown-cta:hover { background: #FFE8C2 !important; }

/* Recall-due band — a patient who said "check back later" and whose date
   has arrived. Soft amber tint so it reads as a retention opportunity, not
   an alarm. */
.act-task-row--recall_due {
  background: linear-gradient(90deg, #FFFBEC 0%, #ffffff 30%);
  border-left: 3px solid #F5B947;
}
.act-task-row--recall_due .act-task-row-name::before {
  content: "📞 ";
}

/* Snooze-reason pill on task row — surfaces when a paused patient pops back
   into the queue so future-you knows what they were waiting on. */
.act-task-row-snooze-reason {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FFF6DA;
  color: #8A6300;
  border: 1px solid rgba(245, 185, 71, 0.30);
}

/* ========================================================================
   Founder dashboard — brand-aligned (Segoe UI · navy/green/red/stone/line).
   No gradients, no emojis, no off-brand greys. The unprefixed --navy etc.
   tokens are only scoped to .about-page / .pricing-page in master-brand.css,
   so we alias the --ivfc-* tokens locally here.
   ====================================================================== */

.act-founder-hero,
.act-founder-stats,
.act-founder-stat,
.act-founder-section,
.act-founder-foot {
  --navy:  var(--ivfc-navy, #0D2340);
  --green: var(--ivfc-green, #1D9E75);
  --red:   var(--ivfc-red, #B03030);
  --stone: var(--ivfc-stone, #F2F0EB);
  --mid:   var(--ivfc-mid, #7A8796);
  --line:  var(--ivfc-line, #DDD9D1);
  --white: var(--ivfc-white, #FFFFFF);
}

.act-founder-hero {
  background: var(--navy);
  color: var(--white);
  border-radius: 4px;
  padding: 40px 44px 32px;
  margin-bottom: 24px;
  font-family: var(--font-display, 'Segoe UI'), 'Segoe UI', sans-serif;
}
.act-founder-hero-head { margin-bottom: 32px; }
.act-founder-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.act-founder-hero-headline {
  margin: 0 0 10px 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
}
.act-founder-hero-headline strong { color: var(--green); font-weight: 700; }
.act-founder-hero-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 60ch;
}
.act-founder-hero-sub a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.act-founder-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  overflow: hidden;
}
.act-founder-stat {
  background: var(--navy);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
}
.act-founder-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
}
.act-founder-stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.act-founder-stat-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: auto;
}

/* Founder strategic sections — newspaper-style, brand colors only.
   Each section gets a colored leading rule (4px) using a brand token. */
.act-founder-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--mid);
  border-radius: 2px;
  padding: 18px 22px;
  margin-bottom: 10px;
  font-family: var(--font-display, 'Segoe UI'), 'Segoe UI', sans-serif;
}
.act-founder-section--growth { border-left-color: var(--green); }
.act-founder-section--ops    { border-left-color: var(--navy); }
.act-founder-section--risk   { border-left-color: var(--red); }

.act-founder-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.act-founder-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
}
.act-founder-section-hint {
  font-size: 12px;
  color: var(--mid);
}

.act-founder-row {
  display: grid;
  /* 150px fits the widest current tag ("NEW LEADS 30D", "TIME TO TREATMENT")
     without wrapping; baseline alignment doesn't help when the tag wraps to
     two lines on a single-line value, so we give the tag column real room. */
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.act-founder-row-tag {
  /* Keep the tag on one line. If a future tag is too long for this column,
     ellipsis is better than wrapping into the value. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-founder-row:first-of-type { border-top: 0; }
.act-founder-row-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mid);
}
.act-founder-row-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.act-founder-row-text strong { font-weight: 700; color: var(--navy); }

/* Trend marker — brand green up, brand red down, mid for flat. */
.act-trend {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 2px;
}
.act-trend--up   { color: var(--green); }
.act-trend--down { color: var(--red); }
.act-trend--flat { color: var(--mid); }

.act-founder-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-display, 'Segoe UI'), 'Segoe UI', sans-serif;
}
.act-founder-foot p {
  margin: 0;
  font-size: 13px;
  color: var(--mid);
  max-width: 60ch;
}
.act-founder-foot-nav {
  display: flex;
  gap: 16px;
}
.act-founder-foot-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.act-founder-foot-nav a:hover { border-bottom-color: var(--navy); }

@media (max-width: 768px) {
  .act-founder-hero { padding: 28px 22px; }
  .act-founder-hero-headline { font-size: 32px; }
  .act-founder-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-founder-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Clinic economics card on Settings */
.act-economics-row { display: flex; gap: 12px; }
.act-economics-amount { flex: 2; }
.act-economics-currency { flex: 1; }

/* Founder strategic insights — visually distinct from operational manager
   insights. Same component, slightly heavier framing with an eyebrow header. */
.act-cockpit-insights--founder {
  background: linear-gradient(180deg, #F0F7FF 0%, #E2EEFB 100%);
  border: 1px solid #B8D2F0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.act-cockpit-insights--founder .act-cockpit-insight {
  padding: 6px 0;
  border-top: 1px solid rgba(31, 74, 140, 0.12);
}
.act-cockpit-insights--founder .act-cockpit-insight:first-of-type { border-top: 0; }

/* Per-group subtle tinting so founder can scan one category at a time */
.act-cockpit-insights--growth {
  background: linear-gradient(180deg, #F0FBF4 0%, #DDF4E6 100%);
  border-color: #B8E3C7;
}
.act-cockpit-insights--growth .act-cockpit-insights-eyebrow { color: #2A7B47; }

.act-cockpit-insights--ops {
  background: linear-gradient(180deg, #F0F7FF 0%, #E2EEFB 100%);
  border-color: #B8D2F0;
}
.act-cockpit-insights--ops .act-cockpit-insights-eyebrow { color: #1F4A8C; }

.act-cockpit-insights--risk {
  background: linear-gradient(180deg, #FFF6DA 0%, #FFEBC2 100%);
  border-color: #F5B947;
}
.act-cockpit-insights--risk .act-cockpit-insights-eyebrow { color: #8A4F00; }

.act-cockpit-insights--founder + .act-cockpit-insights--founder { margin-top: 12px; }
.act-cockpit-insights-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.act-cockpit-insights-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1F4A8C;
}
.act-cockpit-insights-hint {
  font-size: 11px;
  color: #5A6877;
}

/* Topbar reminders pill — visible to all roles */
.act-cockpit-reminders-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  cursor: help;
  border: 1px solid transparent;
}
.act-cockpit-reminders-pill.is-on  { background: #E6F7EC; color: #2A7B47; border-color: #B8E3C7; }
.act-cockpit-reminders-pill.is-off { background: #F4F6F9; color: #5A6877; border-color: rgba(13,35,64,0.08); }

/* Refresh pill shown transiently during rerender(null) — gives explicit
   feedback that the post-mutation refetch is in flight. Auto-clears when
   the outer innerHTML replacement lands. */
.act-cockpit-refresh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(29, 158, 117, 0.10);
  color: #1D9E75;
  border: 1px solid rgba(29, 158, 117, 0.25);
  letter-spacing: 0.02em;
  animation: act-cockpit-refresh-spin 1.6s linear infinite;
}
@keyframes act-cockpit-refresh-spin {
  0%   { opacity: 0.55; }
  50%  { opacity: 1.0;  }
  100% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .act-cockpit-refresh-badge { animation: none; }
}

/* Settings — reminders card */
.act-reminders-card .act-reminders-master {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  background: #FAFBFD;
  margin-bottom: 12px;
}
.act-reminders-card .act-reminders-master input { margin-top: 2px; }
.act-reminders-master-label { display: flex; flex-direction: column; gap: 2px; }
.act-reminders-master-hint  { font-size: 12px; color: #5A6877; }
.act-reminders-on  { color: #2A7B47; font-weight: 700; }
.act-reminders-off { color: #5A6877; font-weight: 700; }
.act-reminders-cadence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 8px 0;
}
.act-reminders-cadence[disabled] { opacity: 0.5; }
.act-reminders-cadence label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.act-reminders-note {
  font-size: 11px;
  color: #8A6300;
  background: #FFF6DA;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 10px 0;
}

/* Patient detail — queued reminders list */
.act-reminders-list-card {
  background: #FAFBFD;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}
.act-reminders-list { list-style: none; padding: 0; margin: 8px 0 0 0; }
.act-reminders-list-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: #0D2340;
  border-top: 1px solid rgba(13, 35, 64, 0.04);
}
.act-reminders-list-row:first-child { border-top: 0; }
.act-reminders-list-kind   { font-weight: 500; }
.act-reminders-list-when,
.act-reminders-list-channel { font-size: 12px; color: #5A6877; }
.act-reminders-list-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.act-reminders-list-status--queued  { background: #FFF6DA; color: #8A6300; }
.act-reminders-list-status--sent    { background: #E6F7EC; color: #2A7B47; }
.act-reminders-list-status--failed  { background: #FBE6E6; color: #A02929; }
.act-reminders-list-status--cancelled,
.act-reminders-list-status--skipped { background: #ECECEC; color: #4A4A4A; }

.act-task-list-empty {
  padding: 24px;
  color: #7A8796;
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.act-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.act-task-row {
  display: grid;
  grid-template-columns: 22px 1fr minmax(180px, 280px) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid rgba(13, 35, 64, 0.04);
  cursor: pointer;
  transition: background 0.15s ease;
}

.act-task-row:first-child {
  border-top: none;
}

.act-task-row:hover {
  background: rgba(29, 158, 117, 0.04);
}

.act-task-row:focus-visible {
  outline: 2px solid rgba(29, 158, 117, 0.6);
  outline-offset: -2px;
}

.act-task-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.act-task-row-name {
  font-size: 14px;
  font-weight: 600;
  color: #0D2340;
}

.act-task-row-stage {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A8796;
  background: rgba(13, 35, 64, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.act-task-row-lifecycle {
  font-size: 11px;
  color: #7A8796;
}

.act-task-row-reason {
  font-size: 12px;
  color: #5a6877;
}

.act-task-row-action {
  background: rgba(29, 158, 117, 0.1);
  border: 1px solid rgba(29, 158, 117, 0.3);
  color: #1D9E75;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.act-task-row-action:hover:not(:disabled) {
  background: rgba(29, 158, 117, 0.18);
}

.act-task-row-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Priority-band tinting */
.act-task-row--tag_required {
  background: rgba(176, 48, 48, 0.04);
  border-left: 3px solid #B03030;
}
.act-task-row--tag_required:hover {
  background: rgba(176, 48, 48, 0.08);
}
.act-task-row--tag_required .act-task-row-reason {
  color: #B03030;
  font-weight: 500;
}

.act-task-row--stalled_severe {
  background: rgba(176, 48, 48, 0.02);
  border-left: 3px solid #B03030;
}
.act-task-row--stalled_severe .act-task-row-reason {
  color: #B03030;
}

.act-task-row--stalled_mild {
  border-left: 3px solid rgba(176, 48, 48, 0.4);
}
.act-task-row--stalled_mild .act-task-row-reason {
  color: #B03030;
}

.act-task-row--stalled_fresh {
  border-left: 3px solid rgba(176, 48, 48, 0.25);
}

.act-task-row--recovery {
  border-left: 3px solid rgba(122, 135, 150, 0.5);
}

.act-task-row--forward_due {
  border-left: 3px solid rgba(29, 158, 117, 0.6);
}

.act-task-row--forward_soon {
  border-left: 3px solid rgba(29, 158, 117, 0.2);
}

.act-task-row--routine {
  border-left: 3px solid transparent;
}

/* ------------------------------------------------------------------
 * Import modal
 * ------------------------------------------------------------------ */

.act-import-modal {
  max-width: 560px;
}

.act-import-body {
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-import-lede {
  margin: 0;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.5;
}

.act-import-lede code {
  background: rgba(13, 35, 64, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

.act-import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  border: 2px dashed rgba(13, 35, 64, 0.18);
  border-radius: 12px;
  background: #F8F6F1;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.act-import-drop:hover,
.act-import-drop.is-dragover {
  border-color: #1D9E75;
  background: rgba(29, 158, 117, 0.05);
}

.act-import-drop-label {
  font-size: 14px;
  font-weight: 600;
  color: #0D2340;
}

.act-import-drop-sub {
  font-size: 12px;
  color: #7A8796;
}

.act-import-preview {
  background: #F8F6F1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #0D2340;
}

.act-import-summary {
  margin: 0 0 6px;
  font-size: 13px;
}

.act-import-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.act-import-preview-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
}

.act-import-preview-list li.act-import-row-invalid {
  background: rgba(176, 48, 48, 0.08);
  color: #B03030;
}

.act-import-row-name {
  font-weight: 600;
}

.act-import-row-meta {
  color: #5a6877;
  font-size: 11px;
}

.act-import-row-more {
  font-style: italic;
  color: #7A8796;
  font-size: 11px;
}

/* Per-row validation issues — surface WHY a row is invalid (or, for valid
   rows with coercions, what got mapped to a default). */
.act-import-preview-list li {
  flex-wrap: wrap;
}
.act-import-row-issues {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.act-import-row-issue {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.act-import-row-issue--error {
  background: rgba(176, 48, 48, 0.16);
  color: #B03030;
}
.act-import-row-issue--warn {
  background: rgba(212, 145, 30, 0.14);
  color: #8a5a0a;
}

/* CSV template download button — inline in the lede paragraph */
.act-import-template-btn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: #1D9E75;
  border: 1px solid rgba(29, 158, 117, 0.40);
  border-radius: 4px;
  cursor: pointer;
}
.act-import-template-btn:hover {
  background: rgba(29, 158, 117, 0.08);
}
.act-import-template-btn:focus-visible {
  outline: 2px solid rgba(29, 158, 117, 0.40);
  outline-offset: 1px;
}

/* Header-mapping disclosure (<details>) — collapsed by default; expand to
   see which CSV columns were recognized vs ignored. */
.act-import-mapping {
  margin: 6px 0 8px;
  font-size: 12px;
  color: #5a6877;
}
.act-import-mapping summary {
  cursor: pointer;
  font-weight: 600;
  color: #0D2340;
  padding: 4px 0;
}
.act-import-mapping-list {
  margin: 4px 0 4px 16px;
  padding: 0;
  list-style: disc;
}
.act-import-mapping-list li {
  font-size: 11px;
  line-height: 1.6;
}
.act-import-mapping-ignored {
  margin: 6px 0 0;
  font-size: 11px;
  color: #7A8796;
  font-style: italic;
}

/* ------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .act-stage-band {
    grid-template-columns: 1fr 1fr;
  }
  .act-task-row {
    grid-template-columns: 1fr;
  }
  .act-task-row-action {
    justify-self: start;
  }
}

/* ------------------------------------------------------------------
 * /act/team page (slice 4)
 * ------------------------------------------------------------------ */

.act-team-header {
  max-width: 880px;
  margin: 0 auto 18px;
}

.act-team-card {
  max-width: 880px;
  margin: 0 auto 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.act-team-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
}

.act-team-card-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0D2340;
  display: flex;
  align-items: center;
  gap: 8px;
}

.act-team-card-header p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.5;
}

.act-team-count {
  background: rgba(13, 35, 64, 0.08);
  color: #0D2340;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}

.act-team-invite-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 16px 20px;
}

.act-team-invite-url {
  flex: 1 1 320px;
  font-family: Consolas, monospace;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  background: #F8F6F1;
  color: #0D2340;
}

.act-team-pending-list,
.act-team-active-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.act-team-pending-row,
.act-team-active-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid rgba(13, 35, 64, 0.04);
  flex-wrap: wrap;
}

.act-team-pending-row:first-child,
.act-team-active-row:first-child {
  border-top: none;
}

.act-team-pending-main {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-team-pending-name,
.act-team-active-name {
  font-size: 14px;
  font-weight: 600;
  color: #0D2340;
}

.act-team-pending-meta {
  font-size: 12px;
  color: #7A8796;
}

.act-team-pending-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.act-team-role-select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #0D2340;
}

.act-team-active-roles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.act-team-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  font-size: 11px;
  font-weight: 500;
}

.act-team-role-chip--founder { background: rgba(29, 158, 117, 0.14); color: #1D9E75; }
.act-team-role-chip--manager { background: rgba(13, 35, 64, 0.12); color: #0D2340; }
.act-team-role-chip--none { background: rgba(176, 48, 48, 0.1); color: #B03030; }

.act-team-active-phone {
  font-size: 12px;
  color: #7A8796;
  margin-left: auto;
}

/* ------------------------------------------------------------------
 * Join landing: ensure the form helper text reads on dark hero shell.
 * ------------------------------------------------------------------ */

.trace-signin-loading {
  background: #0D2340;
  color: rgba(255, 255, 255, 0.6);
  min-height: 100vh;
}

/* ------------------------------------------------------------------
 * Avatars (slice 6)
 * ------------------------------------------------------------------ */

.act-cockpit-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(13, 35, 64, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #0D2340;
  flex-shrink: 0;
}

.act-cockpit-avatar--initial {
  background: rgba(29, 158, 117, 0.18);
  color: #1D9E75;
}

.act-profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.act-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(13, 35, 64, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.act-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.act-profile-avatar-initial {
  font-size: 26px;
  font-weight: 700;
  color: #1D9E75;
}

.act-profile-avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.act-profile-avatar-controls > div,
.act-profile-avatar-controls > button {
  margin: 0;
}

.act-profile-avatar-hint {
  margin: 0;
  font-size: 11px;
  color: #7A8796;
}

/* ------------------------------------------------------------------
 * Coach panel inside patient detail (slice 7)
 * ------------------------------------------------------------------ */

.act-detail-coach {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(29, 158, 117, 0.04), rgba(29, 158, 117, 0.02));
}

.act-detail-coach--filled {
  border-color: rgba(29, 158, 117, 0.3);
}

.act-detail-coach-cta {
  padding: 4px 12px;
  font-size: 12px;
}

.act-detail-coach-lede {
  margin: 6px 0 0;
  font-size: 12px;
  color: #5a6877;
}

.act-detail-coach-loading {
  font-style: italic;
}

.act-detail-coach-text {
  margin: 8px 0 4px;
  font-size: 13.5px;
  color: #0D2340;
  line-height: 1.5;
  white-space: pre-wrap;
}

.act-detail-coach-meta {
  margin: 0;
  font-size: 11px;
  color: #7A8796;
  font-style: italic;
}

.act-detail-coach-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #B03030;
}

/* ------------------------------------------------------------------
 * Stage playbook (slice 8 — intelligence pass)
 * Concrete moves you can make in the next 30 min, per stage.
 * ------------------------------------------------------------------ */

.act-detail-playbook {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  background: #F8F6F1;
}

.act-detail-playbook-hint {
  font-size: 11px;
  color: #7A8796;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.act-detail-playbook-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-detail-playbook-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.06);
  border-radius: 8px;
  border-left: 3px solid rgba(29, 158, 117, 0.5);
}

.act-detail-playbook-item--whatsapp { border-left-color: rgba(37, 211, 102, 0.6); }
.act-detail-playbook-item--phone { border-left-color: rgba(29, 158, 117, 0.6); }
.act-detail-playbook-item--email { border-left-color: rgba(13, 35, 64, 0.4); }
.act-detail-playbook-item--sms { border-left-color: rgba(122, 135, 150, 0.6); }
.act-detail-playbook-item--in-person { border-left-color: rgba(29, 158, 117, 0.9); }

.act-detail-playbook-label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
}

.act-detail-playbook-hint-text {
  font-size: 12px;
  color: #5a6877;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Manager pattern insights — small grey lines at the top of the cockpit.
 * Calmest signal wins; no charts, just one human sentence per insight.
 * ------------------------------------------------------------------ */

.act-cockpit-insights {
  max-width: 1080px;
  margin: 6px auto 0;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.act-cockpit-insight {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: #5a6877;
  line-height: 1.45;
}

.act-cockpit-insight-emoji {
  flex-shrink: 0;
  font-size: 14px;
  color: #7A8796;
  width: 18px;
  text-align: center;
}

.act-cockpit-insight-text strong {
  color: #0D2340;
  font-weight: 600;
}

/* ------------------------------------------------------------------
 * Handover banner — surfaces patients that just landed in your queue.
 * Subtle, navy on stone; not a CTA, just a signal.
 * ------------------------------------------------------------------ */

.act-cockpit-handover {
  max-width: 1080px;
  margin: 12px auto 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 35, 64, 0.04);
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  color: #0D2340;
  font-size: 13px;
}

.act-cockpit-handover-emoji {
  font-size: 16px;
  color: #1D9E75;
}

/* ------------------------------------------------------------------
 * Day-shape: time-of-day blocks (slice 9)
 * Calm scaffolding under the priority list — Now / Reach out / Decisions
 * / In person / Later today. No tabs, no clicks; just visual rhythm.
 * ------------------------------------------------------------------ */

.act-task-list-summary {
  margin: 0 0 8px;
  padding: 8px 18px;
  font-size: 13px;
  color: #5a6877;
  background: rgba(13, 35, 64, 0.03);
  border-bottom: 1px solid rgba(13, 35, 64, 0.04);
}

.act-task-list-summary strong {
  color: #0D2340;
  font-weight: 600;
}

.act-time-block {
  border-top: 1px solid rgba(13, 35, 64, 0.04);
}

.act-time-block:first-of-type {
  border-top: none;
}

.act-time-block-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px 4px;
  background: rgba(13, 35, 64, 0.02);
  border-bottom: 1px solid rgba(13, 35, 64, 0.04);
}

.act-time-block-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0D2340;
}

.act-time-block-hint {
  font-size: 12px;
  color: #7A8796;
  font-style: italic;
  flex: 1;
}

.act-time-block-count {
  font-size: 11px;
  font-weight: 600;
  color: #5a6877;
  background: rgba(13, 35, 64, 0.06);
  padding: 1px 8px;
  border-radius: 999px;
}

.act-time-block--now .act-time-block-label {
  color: #B03030;
}

.act-time-block--reach .act-time-block-label,
.act-time-block--in_person .act-time-block-label {
  color: #1D9E75;
}

/* ------------------------------------------------------------------
 * Proactive coach whisper (slice 9)
 * One-line preview of the coach's suggestion, painted onto the top
 * priority row so the user can act without opening the modal.
 * ------------------------------------------------------------------ */

.act-task-row-whisper {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #5a6877;
  background: rgba(29, 158, 117, 0.06);
  border-left: 2px solid rgba(29, 158, 117, 0.45);
  padding: 6px 10px;
  margin-top: 6px;
  border-radius: 6px;
  line-height: 1.45;
}

.act-task-row-whisper-mark {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1D9E75;
  background: rgba(29, 158, 117, 0.18);
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* SLA-band tints on task rows (slice 9). */
.act-task-row--sla_breach {
  background: rgba(176, 48, 48, 0.04);
  border-left: 3px solid rgba(176, 48, 48, 0.7);
}
.act-task-row--sla_breach .act-task-row-reason {
  color: #B03030;
  font-weight: 500;
}

.act-task-row--sla_approaching {
  border-left: 3px solid rgba(176, 48, 48, 0.3);
}
.act-task-row--sla_approaching .act-task-row-reason {
  color: #5a6877;
}

/* Slice 10 — claim row, mini-search, settings page. */
.act-detail-claim {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(13, 35, 64, 0.03);
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: #0D2340;
}
.act-detail-claim-cta {
  padding: 4px 12px;
  font-size: 12px;
}
.act-detail-claim-hint {
  color: #5a6877;
  font-size: 12px;
}
.act-detail-claim-mine {
  font-weight: 600;
  color: #1d6f4a;
}
.act-detail-claim-other {
  font-weight: 500;
  color: #5a6877;
  font-style: italic;
}

.act-cockpit-search {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin: 0 18px;
}
.act-cockpit-search-input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(13, 35, 64, 0.15);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  color: #0D2340;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.act-cockpit-search-input::placeholder {
  color: #8a96a6;
}
.act-cockpit-search-input:focus {
  outline: none;
  border-color: rgba(13, 35, 64, 0.35);
  box-shadow: 0 0 0 3px rgba(13, 35, 64, 0.08);
}
.act-cockpit-search-results {
  position: absolute;
  top: 38px;
  left: 0;
  /* The container is a flex item that can shrink below its content's natural
     width at narrow viewports; we want the dropdown to remain wide enough to
     show a full patient name and stage label on one line. So we anchor on
     left:0 and grow rightward via min-width, instead of pinning right:0
     which would inherit the squeezed input width. */
  min-width: 280px;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(13, 35, 64, 0.10);
  z-index: 40;
}
.act-cockpit-search-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.act-cockpit-search-row:hover,
.act-cockpit-search-row.is-active {
  background: rgba(13, 35, 64, 0.05);
}
.act-cockpit-search-name {
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
}
.act-cockpit-search-meta {
  font-size: 11px;
  color: #5a6877;
  margin-top: 2px;
}
.act-cockpit-search-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #8a96a6;
  font-style: italic;
}

.act-settings-card {
  max-width: 780px;
  margin: 0 auto 18px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
}
.act-settings-sla-form,
.act-settings-tz-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.act-settings-sla-row {
  display: grid;
  grid-template-columns: 1fr 180px 110px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
}
.act-settings-sla-row:last-of-type {
  border-bottom: 0;
}
.act-settings-sla-label {
  font-size: 13px;
  font-weight: 500;
  color: #0D2340;
}
.act-settings-sla-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.act-settings-sla-input {
  width: 88px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(13, 35, 64, 0.18);
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: #0D2340;
}
.act-settings-sla-input:focus {
  outline: none;
  border-color: rgba(13, 35, 64, 0.35);
  box-shadow: 0 0 0 3px rgba(13, 35, 64, 0.08);
}
.act-settings-sla-unit {
  font-size: 12px;
  color: #5a6877;
}
.act-settings-sla-default {
  font-size: 11px;
  color: #8a96a6;
  text-align: right;
}
.act-settings-tz-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(13, 35, 64, 0.18);
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: #0D2340;
}
.act-settings-tz-select:focus {
  outline: none;
  border-color: rgba(13, 35, 64, 0.35);
  box-shadow: 0 0 0 3px rgba(13, 35, 64, 0.08);
}

@media (max-width: 720px) {
  .act-cockpit-search {
    display: none;
  }
  .act-settings-sla-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .act-settings-sla-default {
    text-align: left;
  }
}

/* Slice 11 — filters, fast-path chips, capture cards, snooze, keyboard ----- */

.act-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 4px 14px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
  margin-bottom: 14px;
}
.act-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.04);
}
.act-filter-chip {
  border: 0;
  background: transparent;
  color: #5a6877;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.act-filter-chip:hover { color: #0D2340; }
.act-filter-chip.is-active {
  background: #0D2340;
  color: #ffffff;
}
.act-filter-help {
  margin-left: auto;
  font-size: 11px;
  color: #8a96a6;
  cursor: help;
}

.act-task-row-source {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.06);
  color: #5a6877;
  text-transform: lowercase;
}
.act-task-row-age {
  font-size: 10px;
  color: #8a96a6;
  margin-left: auto;
}

.act-detail-snooze-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: rgba(178, 138, 32, 0.12);
  color: #8a6e1f;
}

.act-detail-fastpath {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(13, 35, 64, 0.025);
  border: 1px dashed rgba(13, 35, 64, 0.12);
  border-radius: 8px;
  margin: 12px 0;
}
.act-detail-fastpath-chip {
  border: 1px solid rgba(13, 35, 64, 0.15);
  background: #ffffff;
  color: #0D2340;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.act-detail-fastpath-chip:hover {
  background: #0D2340;
  color: #ffffff;
  border-color: #0D2340;
}

.act-detail-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.act-detail-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.act-detail-date-chip {
  border: 1px solid rgba(13, 35, 64, 0.15);
  background: #ffffff;
  color: #0D2340;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.act-detail-date-chip:hover {
  background: rgba(13, 35, 64, 0.06);
}

.act-detail-subview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-detail-capture {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(13, 35, 64, 0.03);
  border-radius: 8px;
}
.act-detail-capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  margin: 0;
}
.act-detail-capture-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.act-detail-capture-grid dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a96a6;
  font-weight: 600;
}
.act-detail-capture-grid dd {
  font-size: 13px;
  color: #0D2340;
  margin: 0;
}
.act-detail-capture-note { grid-column: 1 / -1; }
.act-detail-capture-note dd {
  white-space: pre-wrap;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 6px;
  padding: 8px;
}

.act-detail-partner {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(13, 35, 64, 0.03);
  border-radius: 8px;
}
.act-detail-partner-edit {
  padding: 3px 10px;
  font-size: 11px;
}
.act-detail-partner-tests {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.act-detail-partner-tests li {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid rgba(13, 35, 64, 0.12);
  background: #ffffff;
  color: #5a6877;
}
.act-detail-partner-tests li.is-done {
  background: rgba(29, 111, 74, 0.08);
  border-color: rgba(29, 111, 74, 0.4);
  color: #1d6f4a;
}

.act-detail-quote-row {
  display: flex;
  gap: 8px;
}
.act-detail-currency-input {
  width: 80px;
  text-transform: uppercase;
}
.act-detail-amount-input {
  flex: 1;
}

/* Appointment-today band tint */
.act-task-row--appointment_today {
  background: rgba(29, 111, 74, 0.05);
  border-left: 3px solid rgba(29, 111, 74, 0.5);
}

/* Keyboard help overlay */
.act-kbd-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 35, 64, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.act-kbd-help-card {
  background: #ffffff;
  border-radius: 12px;
  width: 480px;
  max-width: 92vw;
  padding: 18px 22px;
  box-shadow: 0 16px 40px rgba(13, 35, 64, 0.25);
}
.act-kbd-help-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.act-kbd-help-card h3 {
  margin: 0;
  font-size: 16px;
  color: #0D2340;
}
.act-kbd-help-card ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}
.act-kbd-help-card li {
  font-size: 13px;
  color: #0D2340;
  display: flex;
  align-items: center;
  gap: 8px;
}
.act-kbd-help-card kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid rgba(13, 35, 64, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: #f7f8fa;
  text-align: center;
}
.act-kbd-help-foot {
  font-size: 11px;
  color: #5a6877;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(13, 35, 64, 0.08);
}

/* Slice 12 — daily-flow polish (briefing, recents, compose, journey, emoji) -- */

.act-cockpit-done-today {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(29, 111, 74, 0.1);
  color: #1d6f4a;
}

.act-cockpit-quiet-toggle {
  background: transparent;
  border: 1px solid rgba(13, 35, 64, 0.15);
  color: #0D2340;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.act-cockpit-quiet-toggle.is-on {
  background: rgba(13, 35, 64, 0.9);
  color: #ffffff;
  border-color: rgba(13, 35, 64, 0.9);
}

.act-cockpit-legend-wrap { position: relative; display: inline-flex; }
.act-cockpit-legend-btn {
  background: transparent;
  border: 1px solid rgba(13, 35, 64, 0.15);
  color: #0D2340;
  font-size: 14px;
  width: 30px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-cockpit-legend-btn:hover { background: rgba(13, 35, 64, 0.06); }
.act-cockpit-legend-menu {
  position: absolute;
  top: 32px;
  right: 0;
  width: 420px;
  max-height: 78vh;
  overflow-y: auto;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.12);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(13, 35, 64, 0.18);
  z-index: 60;
}

.act-cockpit-legend-glossary {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-cockpit-legend-glossary li {
  font-size: 12px;
  color: #0D2340;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.act-cockpit-legend-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.act-cockpit-legend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.act-cockpit-legend-menu header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  margin-bottom: 6px;
  margin-top: 4px;
}
.act-cockpit-legend-menu header:first-child { margin-top: 0; }
.act-cockpit-legend-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}
.act-cockpit-legend-list li {
  font-size: 12px;
  color: #0D2340;
  display: flex;
  align-items: center;
  gap: 6px;
}
.act-cockpit-legend-list kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  border: 1px solid rgba(13, 35, 64, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  background: #f7f8fa;
  text-align: center;
}

.act-cockpit-briefing {
  padding: 12px 18px;
  background: linear-gradient(95deg, rgba(13, 35, 64, 0.04), rgba(29, 111, 74, 0.05));
  border-radius: 10px;
  margin-bottom: 12px;
}
.act-cockpit-briefing-text {
  margin: 0;
  font-size: 14px;
  color: #0D2340;
  line-height: 1.5;
}

.act-cockpit-recent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.act-cockpit-recent-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a96a6;
  font-weight: 600;
}
.act-cockpit-recent-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.act-cockpit-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(13, 35, 64, 0.15);
  background: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  color: #0D2340;
  cursor: pointer;
}
.act-cockpit-recent-chip:hover {
  background: rgba(13, 35, 64, 0.06);
}
.act-cockpit-recent-tag {
  font-size: 10px;
  font-weight: 600;
  color: #5a6877;
}

.act-cockpit-quiet-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(13, 35, 64, 0.06);
  border-radius: 6px;
  font-size: 12px;
  color: #5a6877;
}

.act-task-row-emoji {
  font-size: 14px;
  width: 22px;
  display: inline-flex;
  justify-content: center;
}
.act-task-row-why {
  margin-left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(13, 35, 64, 0.2);
  background: transparent;
  color: #5a6877;
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  line-height: 1;
}
.act-task-row-why:hover { background: rgba(13, 35, 64, 0.08); }

/* Patient journey strip ----------------------------------------------------- */
.act-journey-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(13, 35, 64, 0.02), rgba(13, 35, 64, 0.04));
  border-radius: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.act-journey-step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  font-size: 10px;
  color: #5a6877;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex-shrink: 0;
}
.act-journey-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(13, 35, 64, 0.2);
  background: #ffffff;
  font-size: 12px;
  color: #5a6877;
}
.act-journey-step--done .act-journey-mark {
  background: #1d6f4a;
  border-color: #1d6f4a;
  color: #ffffff;
}
.act-journey-step--now .act-journey-mark {
  background: #0D2340;
  border-color: #0D2340;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(13, 35, 64, 0.12);
}
.act-journey-step--lost .act-journey-mark {
  background: rgba(176, 48, 48, 0.1);
  border-color: rgba(176, 48, 48, 0.3);
  color: rgba(176, 48, 48, 0.7);
}
.act-journey-step--now .act-journey-label { color: #0D2340; }
.act-journey-step--done .act-journey-label { color: #1d6f4a; }
.act-journey-line {
  flex: 1;
  height: 2px;
  background: rgba(13, 35, 64, 0.15);
  min-width: 12px;
}
.act-journey-line.is-done { background: #1d6f4a; }

/* Compose chips ------------------------------------------------------------- */
.act-detail-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(29, 111, 74, 0.04);
  border: 1px solid rgba(29, 111, 74, 0.15);
  border-radius: 8px;
  margin: 12px 0;
}
.act-detail-compose-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1d6f4a;
  font-weight: 600;
}
.act-detail-compose-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid rgba(13, 35, 64, 0.15);
  background: #ffffff;
  color: #0D2340;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.act-detail-compose-chip:hover {
  background: #0D2340;
  color: #ffffff;
  border-color: #0D2340;
}
/* Transient "✓ Logged" state after auto-logging the reach-out click. */
.act-detail-compose-chip--logged {
  background: rgba(29, 158, 117, 0.14);
  color: #1D9E75;
  border-color: rgba(29, 158, 117, 0.40);
  font-weight: 700;
  pointer-events: none;
}
.act-detail-compose-chip--logged:hover {
  background: rgba(29, 158, 117, 0.14);
  color: #1D9E75;
  border-color: rgba(29, 158, 117, 0.40);
}
.act-detail-compose-hint {
  font-size: 11px;
  color: #5a6877;
  font-style: italic;
  margin-left: auto;
}

/* Duplicate-detection banner in Add Patient -------------------------------- */
.act-modal-dup {
  background: rgba(178, 138, 32, 0.1);
  border: 1px solid rgba(178, 138, 32, 0.3);
  color: #8a6e1f !important;
}
.act-modal-dup-open {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border: 1px solid rgba(178, 138, 32, 0.4);
  background: #ffffff;
  color: #8a6e1f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.act-modal-dup-open:hover { background: rgba(178, 138, 32, 0.15); }

/* Slice 13 — bulk select, stage panels, snooze cluster, yesterday recap ---- */

.act-task-row-check {
  margin-right: 6px;
  cursor: pointer;
}
.act-task-row.is-selected {
  background: rgba(13, 35, 64, 0.04);
  box-shadow: inset 3px 0 0 #0D2340;
}

.act-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #0D2340;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(13, 35, 64, 0.32);
  z-index: 70;
}
.act-bulk-count {
  font-size: 12px;
  font-weight: 600;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.act-bulk-actions {
  display: inline-flex;
  gap: 6px;
}
.act-bulk-actions .act-modal-button {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
.act-bulk-actions .act-modal-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Stage-specific panel (today's OPD, OPU week, etc.) */
.act-stage-panel {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: linear-gradient(95deg, rgba(13, 35, 64, 0.03), rgba(29, 111, 74, 0.04));
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
}
.act-stage-panel-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.act-stage-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.act-stage-panel-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
}
.act-stage-panel-hint {
  font-size: 11px;
  color: #5a6877;
}
.act-stage-panel-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.1);
  color: #0D2340;
}
.act-stage-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-stage-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0D2340;
  transition: background 0.15s ease;
}
.act-stage-panel-row:hover { background: rgba(13, 35, 64, 0.06); }
.act-stage-panel-emoji { font-size: 14px; }
.act-stage-panel-name { font-weight: 500; flex: 1; }
.act-stage-panel-when {
  font-size: 11px;
  color: #1d6f4a;
  font-weight: 600;
}
.act-stage-panel-contact {
  font-size: 11px;
  color: #5a6877;
}
.act-stage-panel-action {
  font-size: 11px;
  color: #5a6877;
}

/* Snooze cluster (button + chevron) */
.act-detail-snooze-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.act-detail-snooze-cluster .act-modal-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.act-detail-snooze-chevron {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 6px 8px;
  margin-left: -1px;
}

/* Yesterday recap in briefing */
.act-cockpit-briefing-yesterday {
  margin: 4px 0 0;
  font-size: 12px;
  color: #5a6877;
}

/* First-run welcome — "How ACT works" explainer + after-they-fill story. */
.act-cockpit-firstrun-explainer {
  margin: 18px auto 24px;
  max-width: 760px;
  padding: 16px 20px;
  background: rgba(13, 35, 64, 0.04);
  border-left: 3px solid rgba(29, 111, 74, 0.6);
  border-radius: 0 10px 10px 0;
}
.act-cockpit-firstrun-explainer h2 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #0D2340;
}
.act-cockpit-firstrun-explainer ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #0D2340;
  font-size: 13px;
  line-height: 1.55;
}
.act-cockpit-firstrun-explainer ol li strong { color: #1d6f4a; }

.act-cockpit-firstrun-after {
  margin: 18px auto 0;
  max-width: 760px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px dashed rgba(13, 35, 64, 0.18);
  border-radius: 10px;
  color: #0D2340;
  font-size: 13px;
  line-height: 1.55;
}
.act-cockpit-firstrun-after p { margin: 0 0 8px; }
.act-cockpit-firstrun-after p:last-child { margin-bottom: 0; }
.act-cockpit-firstrun-help { font-size: 12px; color: #5a6877; }

.act-cockpit-firstrun-card--muted {
  background: rgba(13, 35, 64, 0.025);
  border-style: dashed;
}
.act-cockpit-firstrun-card--muted h2 { color: #5a6877; }

.act-cockpit-firstrun-sample {
  margin: 14px 0 0;
  font-size: 12px;
  color: #5a6877;
}
.act-cockpit-firstrun-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #1d6f4a;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.act-cockpit-firstrun-link:hover { color: #0D2340; }

/* Onboarding "Getting started" checklist — top of dashboard until done. */
.act-onboarding {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: linear-gradient(95deg, rgba(29, 111, 74, 0.08), rgba(29, 158, 117, 0.05));
  border: 1px solid rgba(29, 111, 74, 0.18);
  border-radius: 10px;
}
.act-onboarding-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.act-onboarding-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1d6f4a;
}
.act-onboarding-progress {
  font-size: 11px;
  color: #5a6877;
}
.act-onboarding-dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(13, 35, 64, 0.15);
  color: #5a6877;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.act-onboarding-dismiss:hover { background: rgba(13, 35, 64, 0.06); }
.act-onboarding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-onboarding-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #0D2340;
  line-height: 1.45;
}
.act-onboarding-list li.is-done { color: #1d6f4a; text-decoration: line-through; opacity: 0.85; }
.act-onboarding-list li.is-info { color: #5a6877; }
.act-onboarding-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(13, 35, 64, 0.2);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}
.act-onboarding-list li.is-done .act-onboarding-tick {
  background: #1d6f4a;
  color: #ffffff;
  border-color: #1d6f4a;
}

.act-onboarding-nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(178, 138, 32, 0.08);
  border: 1px solid rgba(178, 138, 32, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #0D2340;
}
.act-onboarding-nudge-emoji { font-size: 16px; }

/* Slice 16 — manager Insights page ---------------------------------------- */

.act-cockpit-main--insights {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

.act-insights-window {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px auto 18px;
  max-width: 980px;
}
.act-insights-window-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  font-weight: 600;
}
.act-insights-window-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.04);
}

.act-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.act-insights-card {
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
}
.act-insights-card-header { margin-bottom: 12px; }
.act-insights-card-header h2 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #0D2340;
}
.act-insights-card-hint {
  margin: 0;
  font-size: 12px;
  color: #5a6877;
  line-height: 1.45;
}
.act-insights-card-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: #5a6877;
}

/* Exit interview breakdown — three-tile grid (finality categories) + an
   optional alternatives row underneath. */
.act-insights-exit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.act-insights-exit-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(13, 35, 64, 0.08);
  background: #FAFBFD;
}
.act-insights-exit-tile-label { font-size: 12px; font-weight: 600; color: #5A6877; }
.act-insights-exit-tile-value { font-size: 28px; font-weight: 700; color: #0D2340; line-height: 1; }
.act-insights-exit-tile-hint  { font-size: 11px; color: #7A8796; }
.act-insights-exit-tile--maybe { background: #FFF6DA; border-color: #F5B947; }
.act-insights-exit-tile--alt   { background: #FFF4E6; border-color: #F5B947; }
.act-insights-exit-tile--definite { background: #FBE6E6; border-color: rgba(160, 41, 41, 0.25); }

.act-insights-exit-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 35, 64, 0.05);
  font-size: 12px;
}
.act-insights-exit-alts-label { color: #5A6877; font-weight: 600; }
.act-insights-exit-alt-chip {
  background: #F0F7FF;
  border: 1px solid #B8D2F0;
  color: #1F4A8C;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.act-insights-bar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-insights-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 84px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #0D2340;
}
.act-insights-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-insights-bar-track {
  height: 8px;
  background: rgba(13, 35, 64, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.act-insights-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.act-insights-bar-fill--navy { background: #0D2340; }
.act-insights-bar-fill--emerald { background: #1d6f4a; }
.act-insights-bar-fill--danger { background: #B03030; }
.act-insights-bar-fill--muted { background: rgba(13, 35, 64, 0.3); }
.act-insights-bar-fill--oe { background: #c2783d; }
.act-insights-bar-fill--fr { background: #6f4ec5; }
.act-insights-bar-fill--ps { background: #3b8ac4; }
.act-insights-bar-fill--ce { background: #B03030; }
.act-insights-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.act-insights-bar-pct {
  display: inline-block;
  margin-left: 4px;
  font-weight: 400;
  color: #5a6877;
}

.act-insights-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.act-insights-outcome {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(13, 35, 64, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-insights-outcome--won { background: rgba(29, 111, 74, 0.08); }
.act-insights-outcome--recovered { background: rgba(29, 158, 117, 0.08); }
.act-insights-outcome--lost { background: rgba(176, 48, 48, 0.06); }
.act-insights-outcome--rate { background: rgba(13, 35, 64, 0.06); }
.act-insights-outcome-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  font-weight: 600;
}
.act-insights-outcome-value {
  font-size: 22px;
  font-weight: 600;
  color: #0D2340;
}

.act-insights-force-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-insights-force-item {
  display: grid;
  grid-template-columns: 40px 130px 1fr 84px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.act-insights-force-name {
  color: #0D2340;
  font-weight: 500;
}

/* Slice 24 — multi-staff orchestration: team load, pick-up-next --------- */

.act-team-load {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 14px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.act-team-load-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  font-weight: 600;
}
.act-team-load-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.act-team-load-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.06);
  font-size: 11px;
  color: #0D2340;
}
.act-team-load-chip.is-me {
  background: #0D2340;
  color: #ffffff;
}
.act-team-load-chip--unclaimed {
  background: rgba(178, 138, 32, 0.15);
  color: #8a6e1f;
}
.act-team-load-count {
  font-weight: 700;
}

.act-pickup-row {
  margin: 0 0 12px;
}
.act-pickup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #1D9E75;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 158, 117, 0.25);
  transition: background 0.15s ease, transform 0.1s ease;
}
.act-pickup-btn:hover {
  background: #178d65;
  transform: translateY(-1px);
}
.act-pickup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.act-pickup-hint {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}

/* Slice 23 — polish: weather chip, next-best-move card ------------------- */

.act-cockpit-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(13, 35, 64, 0.06);
  color: #0D2340;
  font-size: 11px;
  font-weight: 600;
}

.act-next-move {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(13, 35, 64, 0.04), rgba(29, 158, 117, 0.06));
  border: 1px solid rgba(13, 35, 64, 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.act-next-move::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1D9E75, #0D2340);
}
.act-next-move-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1d6f4a;
  margin-bottom: 8px;
}
.act-next-move-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1D9E75;
  box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.6);
  animation: act-pulse 2s infinite;
}
@keyframes act-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(29, 158, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
}
.act-next-move-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.act-next-move-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.act-next-move-body {
  flex: 1;
  min-width: 0;
}
.act-next-move-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  color: #0D2340;
  margin-bottom: 3px;
}
.act-next-move-stage {
  font-size: 11px;
  color: #5a6877;
  font-weight: 500;
}
.act-next-move-reason {
  margin: 0 0 2px;
  font-size: 13px;
  color: #0D2340;
  font-weight: 500;
}
.act-next-move-why {
  margin: 0;
  font-size: 11px;
  color: #5a6877;
  line-height: 1.4;
}
.act-next-move-cta {
  flex-shrink: 0;
}

/* Slice 22 — Manager rules: alerts banner + settings rule rows ---------- */

.act-rule-alerts {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: rgba(178, 138, 32, 0.08);
  border: 1px solid rgba(178, 138, 32, 0.25);
  border-radius: 10px;
}
.act-rule-alerts-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.act-rule-alerts-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a6e1f;
}
.act-rule-alerts-link {
  margin-left: auto;
  font-size: 11px;
  color: #8a6e1f;
  text-decoration: none;
}
.act-rule-alerts-link:hover { text-decoration: underline; }
.act-rule-alert {
  font-size: 13px;
  color: #0D2340;
  padding: 4px 0;
  line-height: 1.5;
}
.act-rule-alert + .act-rule-alert { border-top: 1px solid rgba(13, 35, 64, 0.06); margin-top: 4px; padding-top: 8px; }

.act-settings-rules-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.act-rule-row {
  padding: 12px 14px;
  background: rgba(13, 35, 64, 0.025);
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-rule-row.is-enabled {
  background: rgba(29, 111, 74, 0.05);
  border-color: rgba(29, 111, 74, 0.3);
}
.act-rule-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.act-rule-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0D2340;
  cursor: pointer;
}
.act-rule-audience {
  margin-left: auto;
  font-size: 11px;
  color: #5a6877;
}
.act-rule-desc {
  margin: 0;
  font-size: 12px;
  color: #5a6877;
  line-height: 1.45;
}
.act-rule-param {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #0D2340;
}
.act-rule-param input {
  width: 80px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(13, 35, 64, 0.18);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
}

/* Slice 21 — Role focus card --------------------------------------------- */

.act-role-focus {
  padding: 14px 18px;
  margin-bottom: 14px;
  background: linear-gradient(95deg, rgba(13, 35, 64, 0.05), rgba(29, 158, 117, 0.05));
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 12px;
}
.act-role-focus-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.act-role-focus-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1d6f4a;
}
.act-role-focus-role {
  font-size: 12px;
  color: #5a6877;
}
.act-role-focus-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.act-role-focus-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
}
.act-role-focus-chip--primary { border-color: rgba(29, 111, 74, 0.35); background: rgba(29, 111, 74, 0.05); }
.act-role-focus-chip--danger { border-color: rgba(176, 48, 48, 0.3); background: rgba(176, 48, 48, 0.04); }
.act-role-focus-chip--muted { opacity: 0.7; }
.act-role-focus-value {
  font-size: 24px;
  font-weight: 600;
  color: #0D2340;
  line-height: 1;
}
.act-role-focus-chip--primary .act-role-focus-value { color: #1d6f4a; }
.act-role-focus-chip--danger .act-role-focus-value { color: #B03030; }
.act-role-focus-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  font-weight: 600;
}
.act-role-focus-hint {
  font-size: 11px;
  color: #5a6877;
  line-height: 1.4;
}

/* Slice 20 — Team Health + Stage Health -------------------------------- */

.act-insights-card--full { grid-column: 1 / -1; }

.act-insights-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.act-insights-team-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(13, 35, 64, 0.08);
  border-radius: 10px;
}
.act-insights-team-card.is-attention {
  border-color: rgba(176, 48, 48, 0.35);
  background: rgba(176, 48, 48, 0.02);
}
.act-insights-team-card-head { display: flex; flex-direction: column; gap: 2px; }
.act-insights-team-name { font-size: 13px; font-weight: 600; color: #0D2340; }
.act-insights-team-role { font-size: 11px; color: #5a6877; }
.act-insights-team-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.act-insights-team-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: rgba(13, 35, 64, 0.03);
  border-radius: 6px;
}
.act-insights-team-metrics .m-value {
  font-size: 16px;
  font-weight: 600;
  color: #0D2340;
  line-height: 1;
}
.act-insights-team-metrics .m-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6877;
  margin-top: 3px;
}
.act-insights-team-metrics .is-danger .m-value { color: #B03030; }
.act-insights-team-metrics .is-success .m-value { color: #1d6f4a; }
.act-insights-team-card-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #5a6877;
}
.act-insights-team-flag {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #B03030;
  background: rgba(176, 48, 48, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}

.act-insights-stage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.act-insights-stage-table th,
.act-insights-stage-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(13, 35, 64, 0.06);
}
.act-insights-stage-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6877;
  font-weight: 600;
}
.act-insights-stage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.act-insights-stage-table .is-danger-text { color: #B03030; font-weight: 600; }

@media (max-width: 900px) {
  .act-insights-grid { grid-template-columns: 1fr; }
  .act-insights-outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .act-insights-bar-row { grid-template-columns: 110px 1fr 70px; }
  .act-insights-force-item { grid-template-columns: 36px 100px 1fr 70px; }
  .act-insights-team-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .act-cockpit-legend-menu { width: 320px; max-height: 70vh; }
  .act-journey-step { min-width: 44px; font-size: 9px; }
  .act-journey-mark { width: 22px; height: 22px; font-size: 10px; }
  .act-cockpit-firstrun-explainer { margin: 14px 8px 20px; padding: 12px 14px; }
  .act-cockpit-firstrun-after { margin: 14px 8px 0; padding: 10px 12px; }
}

/* === Lead Sources card (Rule 13 channel registry) ============================
   Manager Settings · /act/settings · "Lead sources" section. 32 channels
   alphabetical · on/off + Low/Normal/High priority · Two-way/Inbound/Manual
   type pill on each row. See docs/ACT-CHANNEL-PLUGINS.md. */

.act-channels-card .act-channels-onboarding {
  margin: 14px 0 10px;
  background: rgba(29, 158, 117, 0.06);
  border: 1px solid rgba(29, 158, 117, 0.20);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #0D2340;
  line-height: 1.55;
}
.act-channels-card .act-channels-onboarding strong { color: #1D9E75; font-weight: 600; }
.act-channels-card .act-channels-onboarding a { color: #1D9E75; font-weight: 600; text-decoration: none; }

.act-channels-card .act-channels-automatch {
  margin: 0 0 14px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #EFEBE0;
  border-radius: 8px;
  font-size: 12px;
  color: #7A8796;
  display: flex;
  gap: 8px;
  align-items: center;
}
.act-channels-card .act-channels-automatch > span:first-child { color: #1D9E75; font-weight: 700; }
.act-channels-card .act-channels-automatch strong { color: #0D2340; font-weight: 500; }

.act-channels-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}

.act-channel-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #EFEBE0;
  border-radius: 8px;
  opacity: 0.55;
  transition: opacity .15s, border-color .15s;
}
.act-channel-row.is-on { opacity: 1; }
.act-channel-row:hover { border-color: rgba(29, 158, 117, 0.30); }

.act-channel-info { min-width: 0; }
.act-channel-name {
  font-size: 14px; font-weight: 600; color: #0D2340;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.act-channel-name > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.act-channel-type {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
}
.act-channel-type--two_way { background: rgba(29, 158, 117, 0.12); color: #1D9E75; }
.act-channel-type--inbound { background: rgba(13, 35, 64, 0.08);  color: #0D2340; }
.act-channel-type--manual  { background: rgba(212, 134, 44, 0.16); color: #8B5E15; }

.act-channel-priority {
  display: flex; gap: 3px; align-items: center; flex-shrink: 0;
}
.act-channel-pri {
  padding: 5px 11px;
  font-size: 11px; font-weight: 600;
  color: #7A8796;
  background: transparent;
  border: 1px solid #DDD9D1;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.act-channel-pri:hover { background: rgba(13, 35, 64, 0.04); color: #0D2340; }
.act-channel-pri.is-active {
  background: #0D2340; color: #ffffff; border-color: #0D2340;
}
.act-channel-pri--high.is-active {
  background: #1D9E75; border-color: #1D9E75;
}

.act-channel-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  min-width: 64px; justify-content: flex-end;
}
.act-channel-switch {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.act-channel-switch-track {
  position: relative; display: inline-block;
  width: 34px; height: 18px;
  background: #DDD9D1; border-radius: 999px;
  transition: background .15s;
}
.act-channel-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #ffffff;
  transition: left .15s;
}
.act-channel-switch:checked + .act-channel-switch-track {
  background: #1D9E75;
}
.act-channel-switch:checked + .act-channel-switch-track::after {
  left: 18px;
}
.act-channel-switch:focus-visible + .act-channel-switch-track {
  outline: 2px solid rgba(29, 158, 117, 0.40); outline-offset: 2px;
}
.act-channel-switch-label {
  font-size: 11px; font-weight: 700; color: #7A8796;
  text-transform: uppercase; letter-spacing: 0.06em;
  min-width: 24px; text-align: left;
}
.act-channel-row.is-on .act-channel-switch-label { color: #1D9E75; }

.act-channels-foot {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.act-channels-count {
  margin-right: auto;
  font-size: 12px; color: #7A8796;
}
.act-channels-count strong { color: #0D2340; font-weight: 600; }

@media (max-width: 720px) {
  .act-channel-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .act-channel-priority { justify-self: flex-start; }
  .act-channel-toggle { justify-self: flex-end; }
}

/* === Prioritization card (Rule 13 gap #2) =================================
   Pinned rules + factor impacts. Drives queue order across all role views. */
.act-pri-card .act-pri-section { margin: 16px 0 20px; }
.act-pri-card .act-pri-section-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.act-pri-card .act-pri-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #0D2340; color: #ffffff;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.act-pri-card .act-pri-section-title {
  font-size: 15px; font-weight: 600; color: #0D2340;
}
.act-pri-card .act-pri-section-sub {
  font-size: 12.5px; color: #7A8796; margin: 4px 0 12px; line-height: 1.5;
}

.act-pri-rule {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid #DDD9D1;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #ffffff;
}
.act-pri-rule.is-on { border-color: rgba(29,158,117,0.30); background: rgba(29,158,117,0.03); }

.act-pri-rule-check {
  display: inline-flex; cursor: pointer; position: relative;
  width: 20px; height: 20px;
}
.act-pri-rule-cb {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.act-pri-rule-cb-box {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1.5px solid #DDD9D1;
  border-radius: 4px;
  background: #ffffff;
  position: relative;
  transition: background .15s, border-color .15s;
}
.act-pri-rule-cb:checked + .act-pri-rule-cb-box {
  background: #1D9E75; border-color: #1D9E75;
}
.act-pri-rule-cb:checked + .act-pri-rule-cb-box::after {
  content: '✓'; position: absolute; top: -3px; left: 2px;
  color: #ffffff; font-size: 14px; font-weight: 700;
}
.act-pri-rule-cb:focus-visible + .act-pri-rule-cb-box {
  outline: 2px solid rgba(29,158,117,0.40); outline-offset: 2px;
}

.act-pri-rule-text { min-width: 0; }
.act-pri-rule-label { font-size: 14px; font-weight: 600; color: #0D2340; }
.act-pri-rule-hint  { font-size: 12px; color: #7A8796; margin-top: 2px; line-height: 1.5; }

.act-pri-rule-input {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 12px; color: #7A8796;
  min-width: 90px; justify-content: flex-end;
}
.act-pri-rule-window {
  width: 56px; padding: 4px 8px;
  border: 1px solid #DDD9D1; border-radius: 4px;
  font-family: inherit; font-size: 13px; color: #0D2340;
  background: #ffffff; text-align: right;
}
.act-pri-rule-window:focus {
  outline: 2px solid rgba(29,158,117,0.30); border-color: #1D9E75;
}

.act-pri-factor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #EFEBE0;
}
.act-pri-factor:first-of-type { border-top: none; }
.act-pri-factor-text { min-width: 0; }
.act-pri-factor-label { font-size: 14px; font-weight: 600; color: #0D2340; }
.act-pri-factor-hint  { font-size: 12px; color: #7A8796; margin-top: 2px; line-height: 1.5; }

.act-pri-factor-impact {
  display: flex; gap: 3px; align-items: center; flex-shrink: 0;
}
.act-pri-impact {
  padding: 5px 11px;
  font-size: 11px; font-weight: 600; color: #7A8796;
  background: transparent;
  border: 1px solid #DDD9D1;
  border-radius: 999px;
  cursor: pointer; font-family: inherit;
}
.act-pri-impact:hover { background: rgba(13,35,64,0.04); color: #0D2340; }
.act-pri-impact.is-active {
  background: #0D2340; color: #ffffff; border-color: #0D2340;
}
.act-pri-impact--ignore.is-active {
  background: #7A8796; border-color: #7A8796;
}
.act-pri-impact--high.is-active {
  background: #1D9E75; border-color: #1D9E75;
}

@media (max-width: 720px) {
  .act-pri-factor { grid-template-columns: 1fr; gap: 8px; }
  .act-pri-factor-impact { justify-self: flex-start; flex-wrap: wrap; }
}

/* === Scripts library card (Rule 13 gap #3, enforces Rule 11) ============== */
.act-scripts-card .act-scripts-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 14px 0 12px;
}
.act-scripts-cat {
  padding: 7px 13px;
  background: #ffffff;
  border: 1px solid #DDD9D1;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #0D2340;
  cursor: pointer; font-family: inherit;
}
.act-scripts-cat:hover { background: rgba(29,158,117,0.06); }
.act-scripts-cat.is-active { background: #0D2340; color: #ffffff; border-color: #0D2340; }
.act-scripts-cat-count {
  margin-left: 4px;
  background: rgba(13,35,64,0.06); color: #7A8796;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.act-scripts-cat.is-active .act-scripts-cat-count {
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85);
}

.act-scripts-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.act-scripts-empty {
  padding: 24px; text-align: center; color: #7A8796; font-size: 13px;
  background: #ffffff; border: 1px dashed #DDD9D1; border-radius: 8px;
}

.act-scripts-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #EFEBE0;
  border-radius: 8px;
  opacity: 0.55;
  transition: opacity .15s, border-color .15s;
}
.act-scripts-row.is-on { opacity: 1; }
.act-scripts-row.is-custom { border-left: 3px solid #1D9E75; padding-left: 11px; }
.act-scripts-row:hover { border-color: rgba(29,158,117,0.30); }
.act-scripts-main { min-width: 0; }
.act-scripts-name {
  font-size: 14px; font-weight: 600; color: #0D2340;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.act-scripts-custom {
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  background: rgba(29,158,117,0.14); color: #1D9E75;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.act-scripts-context {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.act-scripts-tag {
  background: rgba(13,35,64,0.06); color: #0D2340;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
}
.act-scripts-preview {
  font-size: 12px; color: #7A8796; margin-top: 5px;
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.act-scripts-lang-flags { display: flex; gap: 3px; flex-shrink: 0; }
.act-scripts-lang {
  padding: 2px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700;
  background: rgba(13,35,64,0.06); color: #0D2340;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.act-scripts-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  min-width: 64px; justify-content: flex-end;
}
.act-scripts-switch {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.act-scripts-switch-track {
  position: relative; display: inline-block;
  width: 34px; height: 18px;
  background: #DDD9D1; border-radius: 999px;
  transition: background .15s;
}
.act-scripts-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #ffffff;
  transition: left .15s;
}
.act-scripts-switch:checked + .act-scripts-switch-track { background: #1D9E75; }
.act-scripts-switch:checked + .act-scripts-switch-track::after { left: 18px; }
.act-scripts-switch:focus-visible + .act-scripts-switch-track {
  outline: 2px solid rgba(29,158,117,0.40); outline-offset: 2px;
}
.act-scripts-switch-label {
  font-size: 11px; font-weight: 700; color: #7A8796;
  text-transform: uppercase; letter-spacing: 0.06em;
  min-width: 24px; text-align: left;
}
.act-scripts-row.is-on .act-scripts-switch-label { color: #1D9E75; }

.act-scripts-foot-note {
  margin-right: auto; font-size: 11px; color: #7A8796; font-style: italic;
}
.act-scripts-seed-empty {
  margin: 14px 0; padding: 24px;
  background: #ffffff; border: 1px dashed #DDD9D1; border-radius: 10px;
  text-align: center;
}
.act-scripts-seed-empty p {
  font-size: 13px; color: #7A8796; margin-bottom: 14px; line-height: 1.55;
}

@media (max-width: 720px) {
  .act-scripts-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .act-scripts-lang-flags { justify-self: flex-start; }
  .act-scripts-toggle { justify-self: flex-end; }
}

/* Inline body editor — collapsed by default ([hidden]). When expanded
   spans the row's full grid width so the textarea has room to breathe. */
.act-scripts-edit-btn {
  display: inline-block;
  margin-top: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: #1D9E75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.act-scripts-edit-btn:hover { text-decoration: underline; }
.act-scripts-edit-btn:focus-visible {
  outline: 2px solid rgba(29,158,117,0.40);
  outline-offset: 3px;
  border-radius: 3px;
}

.act-scripts-editor {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 14px;
  background: #FAF7EE;
  border: 1px solid #EFEBE0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.act-scripts-editor[hidden] { display: none; }

.act-scripts-editor-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #EFEBE0;
  padding-bottom: 6px;
}
.act-scripts-editor-tab {
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: #7A8796;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.act-scripts-editor-tab:hover { background: rgba(13,35,64,0.05); color: #0D2340; }
.act-scripts-editor-tab.is-active {
  background: #ffffff;
  border-color: #EFEBE0;
  color: #0D2340;
}

.act-scripts-editor-body {
  display: flex;
  flex-direction: column;
}
.act-scripts-editor-textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid #DDD9D1;
  border-radius: 6px;
  background: #ffffff;
  font: 13px/1.55 inherit;
  color: #0D2340;
  resize: vertical;
}
.act-scripts-editor-textarea:focus {
  outline: 2px solid rgba(29,158,117,0.30);
  outline-offset: 0;
  border-color: #1D9E75;
}
.act-scripts-editor-textarea[hidden] { display: none; }

.act-scripts-editor-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.act-scripts-editor-vars-label {
  font-size: 11px;
  font-weight: 700;
  color: #7A8796;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.act-scripts-var-chip {
  padding: 3px 8px;
  border: 1px solid rgba(13,35,64,0.14);
  border-radius: 4px;
  background: #ffffff;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #0D2340;
  cursor: pointer;
}
.act-scripts-var-chip:hover {
  background: rgba(29,158,117,0.08);
  border-color: rgba(29,158,117,0.40);
  color: #1D9E75;
}
.act-scripts-var-chip:focus-visible {
  outline: 2px solid rgba(29,158,117,0.40);
  outline-offset: 1px;
}

.act-scripts-editor-hint {
  font-size: 11px;
  color: #7A8796;
  font-style: italic;
  margin: 0;
}

.act-scripts-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* === Preferences card (Rule 13 gap #4) ===================================== */
.act-pref-card .act-pref-block {
  border: 1px solid #EFEBE0;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  background: #ffffff;
}
.act-pref-card .act-pref-block legend {
  font-size: 14px; font-weight: 600; color: #0D2340;
  padding: 0 6px;
}
.act-pref-card .act-pref-block-sub {
  font-size: 12.5px; color: #7A8796; margin: 4px 0 14px; line-height: 1.55;
}
.act-pref-card .act-pref-block-sub strong { color: #0D2340; font-weight: 500; }

.act-pref-master {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; user-select: none;
  margin-bottom: 14px;
}

.act-pref-time-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px; color: #0D2340;
}
.act-pref-time-row input[type="time"] {
  padding: 7px 10px; border: 1px solid #DDD9D1; border-radius: 6px;
  font-family: inherit; font-size: 14px; color: #0D2340; background: #ffffff;
  width: 110px;
}
.act-pref-time-row input[type="time"]:focus {
  outline: 2px solid rgba(29,158,117,0.30); border-color: #1D9E75;
}

.act-pref-check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  font-size: 13px; color: #0D2340; cursor: pointer; line-height: 1.45;
}
.act-pref-check input[type="checkbox"] {
  margin-top: 3px; flex-shrink: 0; accent-color: #1D9E75;
}
.act-pref-check strong { font-weight: 600; }

.act-pref-textarea-label {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px;
}
.act-pref-textarea-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #7A8796; font-weight: 700;
}
.act-pref-textarea-label textarea {
  width: 100%;
  padding: 10px 12px; border: 1px solid #DDD9D1; border-radius: 6px;
  font-family: inherit; font-size: 13px; color: #0D2340; background: #ffffff;
  line-height: 1.5; resize: vertical; min-height: 70px;
}
.act-pref-textarea-label textarea:focus {
  outline: 2px solid rgba(29,158,117,0.30); border-color: #1D9E75;
}
.act-pref-textarea-hint { font-size: 11px; color: #7A8796; }

.act-pref-lang-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .act-pref-lang-grid { grid-template-columns: repeat(2, 1fr); }
}
.act-pref-lang {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  border: 1px solid #DDD9D1; border-radius: 8px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: #0D2340; font-weight: 500;
  background: #ffffff;
}
.act-pref-lang:hover { border-color: rgba(29,158,117,0.30); }
.act-pref-lang.is-on { background: rgba(29,158,117,0.06); border-color: #1D9E75; }
.act-pref-lang-cb {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.act-pref-lang-cb-box {
  width: 14px; height: 14px;
  border: 1.5px solid #DDD9D1; border-radius: 3px;
  background: #ffffff; position: relative; flex-shrink: 0;
}
.act-pref-lang.is-on .act-pref-lang-cb-box {
  background: #1D9E75; border-color: #1D9E75;
}
.act-pref-lang.is-on .act-pref-lang-cb-box::after {
  content: '✓'; position: absolute; top: -3px; left: 1px;
  color: #ffffff; font-size: 12px; font-weight: 700;
}

.act-pref-default-lang {
  padding: 12px 0;
  border-top: 1px solid #EFEBE0;
}
.act-pref-default-lang label {
  display: flex; gap: 12px; align-items: center;
  font-size: 13px; color: #0D2340; font-weight: 500;
}
.act-pref-default-lang select {
  padding: 6px 10px; border: 1px solid #DDD9D1; border-radius: 6px;
  font-family: inherit; font-size: 13px; background: #ffffff; color: #0D2340;
  cursor: pointer;
}

.act-pref-price-row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.act-pref-price-amount,
.act-pref-price-currency {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #7A8796; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.act-pref-price-amount { flex: 1; min-width: 200px; }
.act-pref-price-amount input,
.act-pref-price-currency select {
  padding: 9px 14px; border: 1px solid #DDD9D1; border-radius: 6px;
  font-family: inherit; font-size: 16px; font-weight: 600; color: #0D2340;
  background: #ffffff;
}
.act-pref-price-currency select { font-size: 14px; min-width: 100px; }
.act-pref-price-amount input:focus,
.act-pref-price-currency select:focus {
  outline: 2px solid rgba(29,158,117,0.30); border-color: #1D9E75;
}

.act-pref-radio {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #DDD9D1; border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #ffffff;
}
.act-pref-radio:hover { border-color: rgba(29,158,117,0.30); }
.act-pref-radio.is-on { background: rgba(29,158,117,0.06); border-color: #1D9E75; }
.act-pref-radio input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.act-pref-radio-box {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #DDD9D1;
  position: relative; flex-shrink: 0;
  margin-top: 3px;
  background: #ffffff;
}
.act-pref-radio.is-on .act-pref-radio-box { border-color: #1D9E75; }
.act-pref-radio.is-on .act-pref-radio-box::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 8px; height: 8px; border-radius: 50%; background: #1D9E75;
}
.act-pref-radio-text {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #0D2340;
}
.act-pref-radio-text strong { font-weight: 600; }
.act-pref-radio-recommended {
  display: inline-block; margin-left: 6px;
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  background: rgba(29,158,117,0.14); color: #1D9E75;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.act-pref-radio-hint { font-size: 12px; color: #7A8796; line-height: 1.5; }

/* === Call Centre · Focus Mode (Phase A7, ?focus=1) =========================
   Calm 2-pane cockpit. Renders only when call_centre + ?focus=1 in URL. */

.act-focus {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 32px;
}

.act-focus-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(13,35,64,0.06);
  border: 1px solid rgba(13,35,64,0.10);
  border-radius: 8px;
  font-size: 12px;
  color: #0D2340;
}
.act-focus-banner-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: #1D9E75;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(29,158,117,0.14);
}
.act-focus-banner-msg { color: #7A8796; }
.act-focus-banner-link { color: #1D9E75; font-weight: 600; text-decoration: none; }

.act-focus-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.act-focus-kpi {
  background: #ffffff; border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 0 rgba(13,35,64,0.04), 0 1px 2px rgba(13,35,64,0.06);
}
.act-focus-kpi-eb {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #7A8796; font-weight: 600; margin-bottom: 2px;
}
.act-focus-kpi-val { display: block; font-size: 22px; font-weight: 600; color: #0D2340; }
.act-focus-kpi-val--risk { color: #B03030; }

.act-focus-work {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 600px;
}

.act-focus-queue {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(13,35,64,0.04), 0 1px 2px rgba(13,35,64,0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 720px;
}
.act-focus-queue-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid #DDD9D1;
}
.act-focus-queue-eb {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #7A8796; font-weight: 700;
}
.act-focus-queue-title { font-size: 16px; font-weight: 600; color: #0D2340; margin-top: 2px; }
.act-focus-queue-body { flex: 1; overflow-y: auto; }
.act-focus-queue-empty { padding: 24px; text-align: center; color: #7A8796; font-size: 12px; }

.act-focus-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px; align-items: center;
  width: 100%;
  padding: 10px 18px;
  background: transparent; border: none;
  border-bottom: 1px solid #EFEBE0;
  cursor: pointer; font-family: inherit;
  text-align: left;
  position: relative;
}
.act-focus-row:hover { background: rgba(29,158,117,0.04); }
.act-focus-row.is-focused { background: #F2F0EB; }
.act-focus-row.is-focused::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #1D9E75;
}
.act-focus-row-flag { width: 8px; height: 8px; border-radius: 50%; }
.act-focus-flag--hot  { background: #C8341A; }
.act-focus-flag--warm { background: #D4862C; }
.act-focus-flag--cool { background: #7A8796; opacity: 0.5; }

.act-focus-row-main {
  min-width: 0; display: flex; flex-direction: column;
}
.act-focus-row-name {
  font-size: 13.5px; font-weight: 600; color: #0D2340;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-focus-row-meta {
  font-size: 11px; color: #7A8796; margin-top: 2px;
  /* No text-transform — channel labels and lifecycle words arrive
     already-cased from channelLabelFor() / vocabulary. Capitalize here
     would re-Title-Case "Phone calls" → "Phone Calls" and diverge from
     every other surface that uses the resolver (Settings, strategic
     signals, modal). PR #151 promised cross-surface consistency. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-focus-row-age {
  font-size: 11px; color: #7A8796; font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.act-focus-detail {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(13,35,64,0.04), 0 1px 2px rgba(13,35,64,0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.act-focus-detail-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid #DDD9D1;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.act-focus-detail-eb {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #7A8796; font-weight: 700; margin: 0 0 6px;
}
.act-focus-detail-name {
  font-size: 22px; font-weight: 600; color: #0D2340; margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.act-focus-detail-meta { font-size: 12.5px; color: #7A8796; margin: 0; }
.act-focus-detail-meta b { color: #0D2340; font-weight: 500; }
.act-focus-detail-open {
  background: transparent; border: 1px solid #DDD9D1;
  color: #0D2340; padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.act-focus-detail-open:hover { background: rgba(29,158,117,0.08); color: #1D9E75; border-color: #1D9E75; }

.act-focus-nba {
  margin: 18px 26px 0;
  background: #0A1628; color: #ffffff;
  border-radius: 10px;
  padding: 20px 24px;
}
.act-focus-nba--quiet {
  background: rgba(13,35,64,0.04); color: #7A8796;
  border: 1px solid #DDD9D1;
}
.act-focus-nba-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.act-focus-nba--quiet .act-focus-nba-tag { color: #7A8796; }
.act-focus-nba-dot { width: 6px; height: 6px; border-radius: 50%; background: #1D9E75; }
.act-focus-nba-badge {
  margin-left: auto; font-size: 9px;
  padding: 2px 7px; background: rgba(29,158,117,0.25);
  color: #9FE5C8; border-radius: 3px; letter-spacing: 0.12em;
}
.act-focus-nba-title {
  font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 10px;
  letter-spacing: -0.2px;
}
.act-focus-nba--quiet .act-focus-nba-title { color: #0D2340; }
.act-focus-nba-rationale {
  font-size: 12.5px; color: rgba(250,248,243,0.72); line-height: 1.55;
}
.act-focus-nba--quiet .act-focus-nba-rationale { color: #7A8796; }
.act-focus-nba-rationale b { color: #FCA77B; font-weight: 600; }
.act-focus-nba--quiet .act-focus-nba-rationale b { color: #0D2340; }

.act-focus-composer {
  margin: 14px 26px 0;
  border: 1px solid #DDD9D1;
  border-radius: 10px;
  overflow: hidden;
  background: #fafaf6;
}
.act-focus-composer-eb {
  padding: 10px 16px;
  background: rgba(29,158,117,0.04);
  border-bottom: 1px solid #EFEBE0;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: #7A8796;
}
.act-focus-composer-from { font-weight: 500; color: #1D9E75; }
.act-focus-composer-from b { color: #0D2340; font-weight: 600; }
.act-focus-composer-channel {
  margin-left: auto;
  font-size: 9px; padding: 2px 7px; border-radius: 3px;
  background: #DCF8C6; color: #128C7E;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.act-focus-composer-body {
  width: 100%;
  min-height: 100px;
  padding: 14px 16px;
  border: none; outline: none;
  font-family: inherit; font-size: 13.5px; color: #0D2340;
  background: #ffffff; line-height: 1.55;
  resize: vertical;
}
.act-focus-composer-body:focus { background: #FFFEF7; }
.act-focus-composer-foot {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  background: #ffffff;
  border-top: 1px solid #EFEBE0;
}
.act-focus-composer-info { font-size: 11px; color: #7A8796; }
.act-focus-composer-send {
  background: #0D2340; color: #ffffff; border: none;
  padding: 8px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.act-focus-composer-send:hover { background: #0A1628; }
.act-focus-composer-send:disabled { opacity: 0.6; cursor: not-allowed; }

.act-focus-thread-note {
  margin: 14px 26px 26px;
  padding: 10px 14px;
  background: rgba(13,35,64,0.04);
  border-radius: 6px;
  font-size: 12px; color: #7A8796;
  font-style: italic;
}

.act-focus-empty {
  max-width: 600px; margin: 60px auto;
  text-align: center;
}
.act-focus-empty .act-cockpit-eyebrow { color: #1D9E75; }

@media (max-width: 900px) {
  .act-focus-kpis { grid-template-columns: repeat(2, 1fr); }
  .act-focus-work { grid-template-columns: 1fr; }
  .act-focus-queue { max-height: 360px; }
}

/* Demo cohort — sub-phase 1C. DEMO pill on patient rows + coach-note banner
   at the top of the patient modal. Both render ONLY for is_demo=true rows,
   so real patients never see them. */
.act-demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid rgba(196, 134, 44, 0.45);
  border-radius: 999px;
  background: rgba(212, 134, 44, 0.10);
  color: #8a5a18;
  font-family: var(--font-mono, "SFMono-Regular", "Consolas", monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.4;
}
.act-demo-pill--inline {
  margin-left: 2px;
  margin-right: 2px;
  font-size: 9px;
  padding: 0 5px;
}
.act-task-row--demo {
  background: linear-gradient(90deg, rgba(212, 134, 44, 0.03), transparent 240px);
}
.act-task-row--demo .act-task-row-name {
  /* Subtle italic to reinforce that this isn't a real patient. */
  font-style: italic;
}
.act-detail-coach-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  margin: 0 0 16px;
  border: 1px solid rgba(29, 158, 117, 0.25);
  border-left: 3px solid var(--color-accent, #1D9E75);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(29, 158, 117, 0.05) 0%, rgba(29, 158, 117, 0.02) 100%);
}
.act-detail-coach-note-pill {
  align-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent, #1D9E75);
  color: #fff;
  font-family: var(--font-mono, "SFMono-Regular", "Consolas", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.act-detail-coach-note-text {
  margin: 0;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(13, 35, 64, 0.85);
}
.act-demo-card-body {
  padding: 0 24px 20px;
}
.act-demo-card-lede {
  margin: 0 0 16px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(13, 35, 64, 0.65);
}

/* ============================================================
   Preview enforcement — sub-phase 1A (Audit 2026-05-17).
   PREVIEW pill in the topbar + sticky banner above the cockpit +
   upgrade modal + visual dimming when the cockpit is read-only.
   ============================================================ */

/* Pill — next to the clinic name in the topbar */
.act-preview-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono, "SFMono-Regular", "Consolas", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.18s;
  line-height: 1.5;
}
.act-preview-pill:hover { filter: brightness(1.05); transform: translateY(-1px); }
.act-preview-pill--active   { background: rgba(196, 134, 44, 0.12); color: #8a5a18; border: 1px solid rgba(196, 134, 44, 0.40); }
.act-preview-pill--urgent   { background: rgba(217, 59, 59, 0.12);  color: #b03030; border: 1px solid rgba(217, 59, 59, 0.45); animation: act-preview-pulse 2s ease-in-out infinite; }
.act-preview-pill--expired  { background: #b03030; color: #ffffff;                   border: 1px solid #8a2424; }
@keyframes act-preview-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 59, 59, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 59, 59, 0.10); }
}

/* Banner — sits above the cockpit topbar */
.act-preview-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(13, 35, 64, 0.08);
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.45;
  position: sticky;
  top: 0;
  z-index: 25;
}
.act-preview-banner--active  { background: linear-gradient(180deg, rgba(196, 134, 44, 0.10), rgba(196, 134, 44, 0.05)); color: rgba(13, 35, 64, 0.85); }
.act-preview-banner--urgent  { background: linear-gradient(180deg, rgba(217, 59, 59, 0.10), rgba(217, 59, 59, 0.05));  color: rgba(13, 35, 64, 0.95); }
.act-preview-banner--expired { background: #b03030; color: #fff; }
.act-preview-banner--expired strong { color: #fff; }
.act-preview-banner-msg { flex: 1 1 auto; }
.act-preview-banner-msg strong { font-weight: 700; }
.act-preview-banner-cta {
  appearance: none;
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: #fff;
  color: #b03030;
  font-family: var(--font-display, "Segoe UI", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.act-preview-banner--active .act-preview-banner-cta  { color: #8a5a18; border-color: rgba(196, 134, 44, 0.55); }
.act-preview-banner--urgent .act-preview-banner-cta  { color: #b03030; border-color: rgba(217, 59, 59, 0.55); }
.act-preview-banner--expired .act-preview-banner-cta { color: #b03030; background: #fff; border-color: #fff; }
.act-preview-banner-cta:hover { background: rgba(255, 255, 255, 0.9); }
.act-preview-banner--expired .act-preview-banner-cta:hover { background: #f8e6e6; }
.act-preview-banner-cta--ghost {
  background: transparent;
  opacity: 0.85;
}

/* Upgrade modal */
.act-upgrade-overlay {
  /* uses .act-modal-overlay styles plus this specifier so we can theme */
}
.act-upgrade-modal { max-width: 480px; }
.act-upgrade-body { padding: 0 24px 24px; }
.act-upgrade-lede {
  margin: 0 0 14px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(13, 35, 64, 0.80);
}
.act-upgrade-bullets {
  margin: 0 0 20px;
  padding-left: 20px;
  list-style: disc;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(13, 35, 64, 0.75);
}
.act-upgrade-bullets li { margin-bottom: 4px; }

/* ============================================================
   Rich CSV import + missing-fields banner — sub-phase 1B.
   ============================================================ */

/* Import preview — ready vs need-data summary */
.act-import-summary-ready {
  color: var(--color-accent, #1D9E75);
  font-weight: 700;
}
.act-import-summary-attn {
  color: #ba7517;
  font-weight: 700;
}
.act-import-summary-routing {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(186, 117, 23, 0.06);
  border-left: 3px solid rgba(186, 117, 23, 0.45);
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.80);
}
.act-import-row-attn {
  border-left: 3px solid rgba(186, 117, 23, 0.55);
  padding-left: 9px;
}
.act-import-row-attn-pill {
  display: inline-block;
  padding: 2px 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(186, 117, 23, 0.10);
  color: #8a5a18;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Missing-fields banner on the patient modal */
.act-detail-attn {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(186, 117, 23, 0.35);
  border-left: 3px solid #ba7517;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(186, 117, 23, 0.06), rgba(186, 117, 23, 0.02));
}
.act-detail-attn-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.act-detail-attn-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: #ba7517;
  color: #fff;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  white-space: nowrap;
}
.act-detail-attn-hint {
  flex: 1 1 200px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.75);
}
.act-detail-attn-form {
  display: grid;
  gap: 14px;
}
.act-detail-attn-field {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 12px;
  align-items: start;
}
.act-detail-attn-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
}
.act-detail-attn-label-name {
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: rgba(13, 35, 64, 0.85);
}
.act-detail-attn-label-hint {
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(13, 35, 64, 0.55);
}
.act-detail-attn-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 64, 0.18);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  color: #0d2340;
}
.act-detail-attn-input:focus {
  outline: 0;
  border-color: var(--color-accent, #1D9E75);
}
.act-detail-attn-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* "Need data" chip on the role-focus card */
.act-role-focus-chip--attn {
  background: rgba(186, 117, 23, 0.06);
  border-left: 3px solid #ba7517;
}
.act-role-focus-chip--attn .act-role-focus-value {
  color: #ba7517;
}

@media (max-width: 720px) {
  .act-detail-attn-field {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .act-detail-attn-label { padding-top: 0; }
}

/* ============================================================
   Locked clinic mode — applied when ctx.billing.writable is false.
   The cockpit layout stays identical; mutating affordances become
   truly inactionable with a cursor: not-allowed + reduced opacity.
   Clicks are intercepted in JS (capture phase) to either open the
   upgrade modal (manager) or the nudge dialog (staff) — see
   actdashboardpage.js click interceptor. Audit 2026-05-17 (billing
   attention). ============================================================ */

.act-cockpit--locked .act-cockpit-action-bar button,
.act-cockpit--locked .act-cockpit-action-bar a,
.act-cockpit--locked .act-detail-actions button,
.act-cockpit--locked .act-cockpit-firstrun-cta:not(#act-load-demo),
.act-cockpit--locked [data-detail-action]:not([data-detail-action="back"]):not([data-detail-action="open"]) {
  opacity: 0.45;
  filter: grayscale(0.2);
  cursor: not-allowed;
}
.act-cockpit--locked .act-cockpit-action-bar button:hover,
.act-cockpit--locked .act-detail-actions button:hover {
  filter: grayscale(0.2);
}
/* Don't dim the upgrade / nudge / billing card buttons — they're the
   way out of the locked state. */
.act-cockpit--locked [data-billing-action],
.act-cockpit--locked .act-billing-card *,
.act-cockpit--locked .act-upgrade-modal *,
.act-cockpit--locked .act-nudge-modal *,
.act-cockpit--locked #act-load-demo,
.act-cockpit--locked #act-demo-remove {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

/* Billing Attention card — manager / founder only, top of <main>. */
.act-billing-card {
  margin: 0 0 20px;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid rgba(217, 59, 59, 0.30);
  background: linear-gradient(180deg, rgba(217, 59, 59, 0.08), rgba(217, 59, 59, 0.02));
  font-family: var(--font-body, "Segoe UI", sans-serif);
}
.act-billing-card--payment_lapsed {
  border-color: rgba(176, 48, 48, 0.45);
  background: linear-gradient(180deg, rgba(176, 48, 48, 0.10), rgba(176, 48, 48, 0.03));
}
.act-billing-card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.act-billing-card-head-text { flex: 1 1 260px; }
.act-billing-card-title {
  margin: 0 0 6px;
  font-family: var(--font-display, "Segoe UI", sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #b03030;
}
.act-billing-card-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.85);
}
.act-billing-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 11px;
  color: rgba(13, 35, 64, 0.65);
  white-space: nowrap;
}
.act-billing-card-since {
  font-weight: 600;
}
.act-billing-card-nudges {
  color: #b03030;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
}
.act-billing-card-roi {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid #b03030;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(13, 35, 64, 0.82);
}
.act-billing-card-actions {
  display: flex;
  justify-content: flex-end;
}
.act-billing-card-cta {
  background: #b03030;
  color: #fff !important;
  border-color: #b03030 !important;
}
.act-billing-card-cta:hover {
  background: #8a2424;
  border-color: #8a2424 !important;
}

/* Nudge dialog */
.act-nudge-overlay { /* uses .act-modal-overlay base */ }
.act-nudge-modal { max-width: 440px; }
.act-nudge-body { padding: 0 24px 24px; }
.act-nudge-lede {
  margin: 0 0 10px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.85);
}
.act-nudge-detail {
  margin: 0 0 14px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.65);
}
.act-modal-feedback[data-state="info"] {
  border: 1px solid rgba(29, 158, 117, 0.30);
  background: rgba(29, 158, 117, 0.08);
  color: #0d2340;
}
.act-modal-feedback[data-state="success"] {
  border: 1px solid rgba(29, 158, 117, 0.45);
  background: rgba(29, 158, 117, 0.12);
  color: var(--color-accent, #1D9E75);
}

/* ============================================================
   Role Coverage panel on /act/team — sub-phase 1A.7 / role-aware
   invites. Five role cards, each with status + per-role invite
   form. Audit 2026-05-17.
   ============================================================ */
.act-team-role-coverage .act-team-card-header h2 { margin-bottom: 6px; }
.act-team-role-grid {
  display: grid;
  gap: 18px;
  padding: 16px 24px 24px;
}
.act-team-role-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(13, 35, 64, 0.10);
  background: #ffffff;
}
.act-team-role-card--missing { border-color: rgba(196, 134, 44, 0.40); background: linear-gradient(180deg, rgba(196, 134, 44, 0.04), #ffffff); }
.act-team-role-card--pending { border-color: rgba(31, 74, 140, 0.20); background: linear-gradient(180deg, rgba(31, 74, 140, 0.03), #ffffff); }
.act-team-role-card--filled  { border-color: rgba(29, 158, 117, 0.25); }

.act-team-role-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.act-team-role-title {
  margin: 0 0 4px;
  font-family: var(--font-display, "Segoe UI", sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: #0d2340;
}
.act-team-role-stages {
  margin: 0;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(13, 35, 64, 0.55);
  text-transform: uppercase;
}
.act-team-role-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.act-team-role-status--filled  { background: rgba(29, 158, 117, 0.10); color: var(--color-accent, #1D9E75); border: 1px solid rgba(29, 158, 117, 0.30); }
.act-team-role-status--pending { background: rgba(31, 74, 140, 0.08);  color: #1F4A8C; border: 1px solid rgba(31, 74, 140, 0.30); }
.act-team-role-status--missing { background: rgba(196, 134, 44, 0.10); color: #8a5a18; border: 1px solid rgba(196, 134, 44, 0.40); }

.act-team-role-owns,
.act-team-role-why,
.act-team-role-roster {
  margin: 0;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.78);
}
.act-team-role-why { color: rgba(13, 35, 64, 0.62); }
.act-team-role-roster { padding: 8px 10px; background: rgba(29, 158, 117, 0.04); border-radius: 4px; }

.act-team-role-invites {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.act-team-role-invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 5px;
  background: rgba(31, 74, 140, 0.04);
  border: 1px solid rgba(31, 74, 140, 0.12);
}
.act-team-role-invite-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
}
.act-team-role-invite-who strong { color: #0d2340; }
.act-team-role-invite-who > span { color: rgba(13, 35, 64, 0.65); }
.act-team-role-invite-meta { font-size: 11px; color: rgba(13, 35, 64, 0.50); font-family: var(--font-mono, "SFMono-Regular", monospace); }
.act-team-role-invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.act-team-role-invite-actions button { font-size: 12px; padding: 5px 10px; }

.act-team-role-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}
.act-team-role-form-row input {
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 64, 0.18);
  border-radius: 4px;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  color: #0d2340;
}
.act-team-role-form-row input:focus { outline: 0; border-color: var(--color-accent, #1D9E75); }
.act-team-role-form-row button { white-space: nowrap; }
.act-team-role-form-feedback {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 11px;
}
.act-team-role-form-feedback[hidden] { display: none; }
.act-team-role-form-feedback[data-state="error"]   { background: rgba(217, 59, 59, 0.08); color: #b03030; border: 1px solid rgba(217, 59, 59, 0.25); }
.act-team-role-form-feedback[data-state="success"] { background: rgba(29, 158, 117, 0.08); color: var(--color-accent, #1D9E75); border: 1px solid rgba(29, 158, 117, 0.30); }

@media (max-width: 720px) {
  .act-team-role-form-row { grid-template-columns: 1fr; }
  .act-team-role-invite-row { grid-template-columns: 1fr; }
  .act-team-role-head { flex-direction: column; align-items: flex-start; }
}

/* Empty-state — list of 5 roles inside the "Invite your team by role" card */
.act-cockpit-firstrun-roles {
  margin: 12px 0 16px;
  padding-left: 20px;
  list-style: disc;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(13, 35, 64, 0.78);
}
.act-cockpit-firstrun-roles li { margin-bottom: 3px; }

/* Inline error note next to the demo-cohort link when the load couldn't
   complete — replaces the prior alert() with a quiet inline message that
   redirects the user to the working onboarding paths. PR-A cleanup. */
.act-cockpit-firstrun-sample-error {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 2px solid rgba(186, 117, 23, 0.45);
  background: rgba(186, 117, 23, 0.06);
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.75);
}

/* Deferred-feature note that replaces the team-invite form when the
   role-invitation RPC isn't deployed. Calm, brief, points the user at
   the clinic-wide invite link still available at the bottom of the page. */
.act-team-role-form-deferred {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 2px solid rgba(13, 35, 64, 0.18);
  background: rgba(13, 35, 64, 0.03);
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.65);
}

/* ============================================================
   Post-unlock catch-up banner — sub-phase 1A.8.
   Surfaces once per (staff, clinic, unlock-timestamp) right after
   the clinic transitions from locked → writable. Counts what
   accumulated while ACT was locked. Audit 2026-05-17.
   ============================================================ */
.act-catchup-banner {
  margin: 0 0 20px;
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid rgba(29, 158, 117, 0.30);
  background: linear-gradient(180deg, rgba(29, 158, 117, 0.07), rgba(29, 158, 117, 0.02));
  font-family: var(--font-body, "Segoe UI", sans-serif);
}
.act-catchup-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.act-catchup-head-text { flex: 1 1 260px; }
.act-catchup-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #1D9E75);
}
.act-catchup-title {
  margin: 0;
  font-family: var(--font-display, "Segoe UI", sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: #0d2340;
}
.act-catchup-dismiss {
  appearance: none;
  border: 1px solid rgba(13, 35, 64, 0.18);
  background: transparent;
  color: rgba(13, 35, 64, 0.65);
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.act-catchup-dismiss:hover { color: #0d2340; border-color: rgba(13, 35, 64, 0.45); }
.act-catchup-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.act-catchup-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(29, 158, 117, 0.18);
}
.act-catchup-row--info {
  border-color: rgba(13, 35, 64, 0.12);
  background: rgba(13, 35, 64, 0.03);
}
.act-catchup-row-count {
  font-family: var(--font-display, "Segoe UI", sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent, #1D9E75);
  text-align: right;
}
.act-catchup-row-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.85);
}
.act-catchup-foot {
  margin: 0;
  padding-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(13, 35, 64, 0.55);
}

@media (max-width: 720px) {
  .act-catchup-row { grid-template-columns: 40px 1fr; gap: 10px; }
  .act-catchup-row-count { font-size: 18px; }
}

/* Locked role pill on /act/join when invitation is role-specific */
.act-join-role-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 5px;
  background: rgba(29, 158, 117, 0.10);
  border: 1px solid rgba(29, 158, 117, 0.30);
}
.act-join-role-locked-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-accent, #1D9E75);
  color: #fff;
  font-family: var(--font-mono, "SFMono-Regular", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.act-join-role-locked-note {
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================================
   Spotlight pulse on the next-best-action button.

   Sophisticated visual guidance pattern. Instead of a dialog box or an
   intrusive coachmark, the *recommended next button* on the dashboard
   carries a soft persistent pulse-glow that says "this is what to do
   next" without breaking flow.

   Selection logic lives in actdashboardpage.js (applyNextBestActionSpotlight)
   and is recomputed on every rerender, so the spotlight follows what the
   user has just done. Priority order:
     1. Locked clinic, manager  → Upgrade ACT button in the attention card
     2. Locked clinic, staff    → Upgrade button in the preview banner
        (clicking it opens the nudge-manager dialog)
     3. Empty state, manager    → Add a patient (firstrun primary CTA)
     4. Active dashboard        → Next-best-move card primary CTA
     5. Otherwise               → no spotlight (calm)

   Visuals: a soft accent-coloured outer ring that breathes in/out every
   2.6s — slower than the existing inline status pulses so it reads as
   "always here, no rush" rather than "alarm". Respects prefers-reduced-motion.
   Audit 2026-05-18 (sophisticated visual guidance, PR B). */
.act-spotlight-pulse {
  position: relative;
  z-index: 1;
  animation: act-spotlight-breathe 2.6s ease-in-out infinite;
}
@keyframes act-spotlight-breathe {
  0%   { box-shadow: 0 0 0 0   rgba(29, 158, 117, 0.55),
                     0 0 0 0   rgba(29, 158, 117, 0.0); }
  55%  { box-shadow: 0 0 0 6px rgba(29, 158, 117, 0.0),
                     0 0 22px 4px rgba(29, 158, 117, 0.28); }
  100% { box-shadow: 0 0 0 0   rgba(29, 158, 117, 0.0),
                     0 0 0 0   rgba(29, 158, 117, 0.0); }
}
/* When the spotlight lands on a ghost / outline button, the box-shadow
   alone reads too softly — bump the outline to match. */
.act-preview-banner-cta.act-spotlight-pulse,
.act-cockpit-firstrun-cta.act-spotlight-pulse {
  outline: 2px solid rgba(29, 158, 117, 0.45);
  outline-offset: 2px;
}
/* Small hint label that follows the spotlight — "Do this next" — anchored
   to the right of the button so it doesn't shift layout. Position is set
   by JS via the host element's `position: relative`. */
.act-spotlight-hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(29, 158, 117, 0.94);
  color: #fff;
  font-family: var(--font-body, "Segoe UI", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  animation: act-spotlight-hint-in 600ms ease-out 400ms forwards;
  box-shadow: 0 2px 6px rgba(29, 158, 117, 0.28);
}
.act-spotlight-hint::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  background: rgba(29, 158, 117, 0.94);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes act-spotlight-hint-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0);    }
}
/* On narrow viewports the hint pip would overflow off-screen; drop it
   under the button instead so the spotlight still teaches without
   cropping. */
@media (max-width: 640px) {
  .act-spotlight-hint {
    top: calc(100% + 8px);
    left: 0;
    transform: none;
  }
  .act-spotlight-hint::before { display: none; }
  @keyframes act-spotlight-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .act-spotlight-pulse { animation: none; }
  .act-spotlight-hint  { animation: none; opacity: 1; }
}