/* Generated from src/config/brandTokens.json. Run node scripts/sync-brand-tokens.mjs after editing. */
.app-fidelity {
  --tr-navy: #0F2538;
  --tr-navy-deep: #0A1B2A;
  --tr-navy-soft: #16314A;
  --tr-navy-line: #1C3850;
  --tr-on-navy: #E8E2D4;
  --tr-on-navy-muted: rgba(232,226,212,.62);
  --tr-on-navy-subtle: rgba(232,226,212,.68);
  --tr-hair-navy: rgba(232,226,212,.10);
  --tr-active-tint: rgba(251,249,245,.09);
  --tr-green: #3D6B53;
  --tr-green-strong: #335946;
  --tr-green-soft: #A3BCA6;
  --tr-green-tint: #F0F4EF;
  --tr-leaf: #3D6B53;
  --tr-leaf-strong: #335946;
  --tr-leaf-soft: #A3BCA6;
  --tr-leaf-tint: #F0F4EF;
  --tr-white: #F4EFE5;
  --tr-paper: #FBF9F5;
  --tr-gray: #ECE5D6;
  --tr-gray-soft: #FBF9F5;
  --tr-cream: #DFD4C4;
  --tr-cream-soft: #FBF9F5;
  --tr-cream-deep: #ECE5D6;
  --tr-ink-soft: #314455;
  --bg: var(--tr-white);
  --surface: var(--tr-paper);
  --surface-raised: var(--tr-paper);
  --surface-sunken: #F4F1E9;
  --fg: var(--tr-navy);
  --fg-strong: var(--tr-navy-deep);
  --fg-muted: #485A68;
  --fg-subtle: var(--fg-muted);
  --tr-muted-ink: var(--fg-muted);
  --tr-slate: var(--fg-subtle);
  --border: rgba(15,37,56,.16);
  --border-strong: rgba(15,37,56,.26);
  --border-focus: var(--tr-green);
  --brand: var(--tr-green);
  --brand-strong: var(--tr-green-strong);
  --brand-soft: var(--tr-green-tint);
  --link: var(--tr-navy-soft);
  --status-progress: #3D6B53;
  --status-progress-bg: #F0F4EF;
  --status-wellbeing: var(--tr-navy-soft);
  --status-wellbeing-bg: #E6EEF7;
  --status-milestone: #805A22;
  --status-milestone-bg: #FBF1DE;
  --status-warning: #7C561E;
  --status-warning-bg: #F2E7D2;
  --tr-status-amber: var(--status-warning);
  --tr-status-amber-bg: #F2E7D2;
  --status-danger: #9C4536;
  --status-danger-bg: #F0DFDA;
  --tr-edge-rail-inset: 9px;
  --tr-edge-rail-size: 3px;
  --tr-edge-rail-corner: 1px;
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--fg);
  --surface-paper: var(--tr-paper);
  --text-primary: var(--tr-navy);
  --text-secondary: var(--fg-muted);
  --text-muted: var(--fg-muted);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --radius: 0.5rem;
  --radius-chip: 8px;
  --radius-input: 10px;
  --radius-card: 12px;
  --shadow-1: 0 1px 2px rgba(15,37,56,.045);
  --shadow-2: 0 10px 30px rgba(15,37,56,.07);
  --shadow-resting: 0 10px 30px rgba(15,37,56,.07);
  --focus-ring: 0 0 0 3px rgba(61,107,83,.22);
}

/* ============================================================================
   Referrals out — spec: Teryli App Revamp Rev 9, frame 9b "Referrals Out".
   Content pane only (the app supplies its own chrome): header row with the
   Cormorant page title, inline hairline stat strip carrying the funnel, then
   one worklist card — open-first grouping (awaiting response on top, age
   colored: 6d amber, 8d brick), closed below with decline reasons in the
   chip, 44px rows. Every color aliases a shipped --tr-* token where one
   matches; the rest are the design hexes from the redesign token sheet.
   ============================================================================ */

.tr-refout {
  --ro-cream-50: var(--tr-paper);          /* #FBF9F5 */
  --ro-cream-100: #F7F3EC;
  --ro-cream-200: var(--tr-white);         /* #F4EFE5 */
  --ro-cream-300: var(--tr-cream-deep);    /* #ECE5D6 */
  --ro-cream-400: #E3DCCB;
  --ro-hairline-strong: #D6CDB8;
  --ro-navy-900: var(--tr-navy);           /* #0F2538 */
  --ro-navy-800: #152439;
  --ro-navy-700: #24344A;
  --ro-navy-600: #3A4A60;
  --ro-navy-500: #56657A;
  --ro-navy-400: #7A8699;
  --ro-sage-700: var(--tr-green-strong);   /* #335946 */
  --ro-amber-ink: #7C561E;
  --ro-amber-100: var(--tr-status-amber-bg); /* #F2E7D2 */
  --ro-brick-600: #9C4536;
  --ro-brick-ink: #8A3D2F;
  --ro-brick-bg: #F1E0DA;

  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ro-cream-200);
  border: 1px solid var(--ro-cream-400);
  border-radius: 12px;
  overflow: hidden;
  color: var(--ro-navy-800);
  font-family: var(--ui-font, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ---- header row: title · subtitle · client filter · refresh ---------------- */
.tr-refout .ro-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px 11px;
  border-bottom: 1px solid var(--ro-cream-400);
}
.tr-refout .ro-title {
  margin: 0;
  font-family: var(--display-font, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.1;
  color: var(--ro-navy-800);
  white-space: nowrap;
}
.tr-refout .ro-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--ro-navy-500);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-refout .ro-spacer { flex: 1; }

.tr-refout .ro-select { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.tr-refout .ro-select select {
  appearance: none;
  background: var(--ro-cream-50);
  border: 1px solid var(--ro-cream-400);
  border-radius: 8px;
  padding: 7px 32px 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ro-navy-700);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease;
}
.tr-refout .ro-select select:hover { border-color: var(--ro-hairline-strong); }
.tr-refout .ro-select select:focus-visible { outline: none; border-color: var(--tr-green); box-shadow: var(--focus-ring); }
.tr-refout .ro-select svg { position: absolute; right: 11px; color: var(--ro-navy-400); pointer-events: none; }

.tr-refout .ro-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: var(--ro-cream-50);
  border: 1px solid var(--ro-cream-400);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ro-navy-700);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tr-refout .ro-refresh:hover { border-color: var(--ro-hairline-strong); background: var(--ro-cream-100); }
.tr-refout .ro-refresh:focus-visible { outline: none; border-color: var(--tr-green); box-shadow: var(--focus-ring); }
.tr-refout .ro-refresh:disabled { opacity: .6; cursor: default; }

/* ---- inline hairline stat strip -------------------------------------------- */
.tr-refout .ro-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 8px;
  margin: 0 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ro-cream-400);
}
.tr-refout .ro-stat { display: flex; align-items: baseline; gap: 9px; padding: 0 22px; border-left: 1px solid var(--ro-cream-400); }
.tr-refout .ro-stat:first-child { padding-left: 0; border-left: 0; }
.tr-refout .ro-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ro-navy-500);
  white-space: nowrap;
}
.tr-refout .ro-stat-value { font-size: 15px; font-weight: 600; color: var(--ro-navy-800); font-variant-numeric: tabular-nums; }
.tr-refout .ro-stat.is-amber .ro-stat-label,
.tr-refout .ro-stat.is-amber .ro-stat-value { color: var(--ro-amber-ink); }

/* ---- error line (brick tint, no accent bar) --------------------------------- */
.tr-refout .ro-error {
  margin: 14px 24px 0;
  padding: 10px 14px;
  border: 1px solid rgba(156, 69, 54, .3);
  border-radius: 8px;
  background: var(--ro-brick-bg);
  color: var(--ro-brick-ink);
  font-size: 12.5px;
}

/* ---- worklist card ----------------------------------------------------------- */
.tr-refout .ro-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 14px 24px 20px;
  background: var(--ro-cream-50);
  border: 1px solid var(--ro-cream-400);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 37, 56, .05);
  overflow: hidden;
}
/* Columns keep hard minimums; below them the list scrolls sideways in here —
   a column may hide or fold, never crush. */
.tr-refout .ro-scroll { overflow-x: auto; }

.tr-refout .ro-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 1fr) 74px 60px 148px 92px;
  align-items: center;
  min-width: 700px;
  padding: 0 8px;
}
.tr-refout .ro-grid--head { border-bottom: 1px solid var(--ro-hairline-strong); }
.tr-refout .ro-th {
  padding: 10px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ro-navy-400);
  white-space: nowrap;
}
.tr-refout .ro-th.is-sort { display: flex; align-items: center; gap: 4px; color: var(--ro-navy-700); }

/* group headers: open first, closed below */
.tr-refout .ro-group {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 700px;
  padding: 7px 18px;
  background: var(--ro-cream-100);
  border-bottom: 1px solid var(--ro-cream-200);
}
.tr-refout .ro-group-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ro-navy-500); white-space: nowrap; }
.tr-refout .ro-group-count { font-size: 11.5px; font-weight: 600; color: var(--ro-navy-500); font-variant-numeric: tabular-nums; }
.tr-refout .ro-group.is-amber .ro-group-label,
.tr-refout .ro-group.is-amber .ro-group-count { color: var(--ro-amber-ink); }

/* 44px single-line rows, nowrap + ellipsis on every cell */
.tr-refout .ro-row { min-height: 44px; border-bottom: 1px solid var(--ro-cream-200); transition: background-color .12s ease; }
.tr-refout .ro-row:hover { background: var(--ro-cream-100); }
.tr-refout button.ro-row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tr-refout button.ro-row:focus-visible { outline: none; background: var(--ro-cream-100); box-shadow: inset 0 0 0 2px var(--tr-green); }
.tr-refout .ro-cell { min-width: 0; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-refout .ro-client { font-size: 12.5px; font-weight: 600; color: var(--ro-navy-800); }
.tr-refout .ro-dest { font-size: 12.5px; color: var(--ro-navy-600); }
.tr-refout .ro-sent { font-size: 12px; color: var(--ro-navy-500); font-variant-numeric: tabular-nums; }
.tr-refout .ro-activity-label { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ro-navy-400); }
.tr-refout .ro-age { font-size: 12px; font-weight: 600; color: var(--ro-navy-500); font-variant-numeric: tabular-nums; }
.tr-refout .ro-age.is-amber { color: var(--ro-amber-ink); }
.tr-refout .ro-age.is-brick { color: var(--ro-brick-600); }
.tr-refout .ro-age.is-muted { color: var(--ro-navy-400); }

/* status chips — status lives here, decline reasons ride in the chip */
.tr-refout .ro-chip {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.tr-refout .ro-chip.is-neutral { background: var(--ro-cream-200); color: var(--ro-navy-600); }
.tr-refout .ro-chip.is-amber { background: var(--ro-amber-100); color: var(--ro-amber-ink); }
.tr-refout .ro-chip.is-sage { background: var(--ro-sage-700); color: var(--ro-cream-50); }
.tr-refout .ro-chip.is-brick { background: var(--ro-brick-bg); color: var(--ro-brick-ink); }

/* one quiet action per row */
.tr-refout .ro-act { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ro-navy-600); }
.tr-refout .ro-act svg { color: var(--ro-navy-400); flex: 0 0 auto; }

/* loading / empty */
.tr-refout .ro-empty { padding: 32px 24px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ro-navy-500); }
.tr-refout .ro-empty svg { vertical-align: -3px; margin-right: 8px; }

/* footer line */
.tr-refout .ro-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  border-top: 1px solid var(--ro-cream-200);
  font-size: 11.5px;
  color: var(--ro-navy-400);
}
.tr-refout .ro-foot .ro-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 860px) {
  .tr-refout .ro-head { flex-wrap: wrap; }
  .tr-refout .ro-sub { flex-basis: 100%; order: 5; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-refout .ro-row,
  .tr-refout .ro-refresh,
  .tr-refout .ro-select select { transition: none; }
}

/* ============================================================================
   Teryli — Facility outreach (Rev 6, "Teryli App Revamp.dc.html" §6a)
   ----------------------------------------------------------------------------
   Same porting convention as dueUpcoming.css: the redesign was authored against
   the design-system token names (cream-50…400, navy-400…900, sage, amber,
   brick). Where the app already ships the identical value under a --tr-* name
   we alias it; where it does not, the design hex is used directly. Everything
   is scoped under .tr-fout so the short class names cannot collide.
   ============================================================================ */

.tr-fout {
  --fo-paper: var(--tr-paper);            /* cream-50  #FBF9F5 */
  --fo-cream-100: #F7F3EC;                /* cream-100 */
  --fo-cream-200: var(--tr-white);        /* cream-200 #F4EFE5 */
  --fo-cream-300: var(--tr-cream-deep);   /* cream-300 #ECE5D6 */
  --fo-hair: #E3DCCB;                     /* cream-400 */
  --fo-hair-strong: #D6CDB8;              /* hairline-strong */
  --fo-navy-900: var(--tr-navy);          /* #0F2538 */
  --fo-navy-800: #152439;
  --fo-navy-700: #24344A;
  --fo-navy-600: #3A4A60;
  --fo-navy-500: #56657A;
  --fo-navy-400: #7A8699;
  --fo-sage: var(--tr-green-strong);      /* sage-700 #335946 */
  --fo-sage-tint: #DFE7DC;                /* redesign sage chip tint */
  --fo-amber: #7C561E;                    /* redesign warning-text amber */
  --fo-amber-tint: var(--tr-status-amber-bg); /* amber-100 #F2E7D2 */
  --fo-brick: var(--status-danger);       /* brick-600 #9C4536 */
  --fo-brick-text: #8A3D2F;               /* redesign declined chip text */
  --fo-brick-tint: #F1E0DA;               /* redesign declined chip tint */
  --fo-row-overdue: #F7EDE8;              /* redesign overdue row wash */
  --fo-shadow: 0 1px 2px rgba(15, 37, 56, 0.05);
}

.tr-fout button { cursor: pointer; font-family: inherit; }
.tr-fout button:disabled { cursor: not-allowed; }

/* ----- header row ---------------------------------------------------------- */
.tr-fout .fo-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 0 11px;
  border-bottom: 1px solid var(--fo-hair);
}
.tr-fout .fo-title {
  margin: 0;
  font-family: var(--display-font, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--fo-navy-800);
  white-space: nowrap;
}
.tr-fout .fo-sub {
  margin: 0;
  flex: 1;
  min-width: 160px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fo-navy-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--fo-paper);
  border: 1px solid var(--fo-hair-strong);
  color: var(--fo-navy-700);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 7px;
}
.tr-fout .fo-btn:hover { background: var(--fo-cream-100); }
.tr-fout .fo-btn:disabled { opacity: 0.55; }

/* ----- quiet sample-data note (feature-flagged) ---------------------------- */
.tr-fout .fo-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--fo-hair);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fo-navy-500);
}
.tr-fout .fo-note svg { flex-shrink: 0; align-self: center; }
.tr-fout .fo-note strong { font-weight: 600; color: var(--fo-navy-700); }

/* ----- error / notice flash ------------------------------------------------- */
.tr-fout .fo-flash {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--fo-hair);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.tr-fout .fo-flash.is-error { color: var(--fo-brick); }
.tr-fout .fo-flash.is-notice { color: var(--fo-sage); }

/* ----- inline hairline stat strip ------------------------------------------ */
.tr-fout .fo-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fo-hair);
}
.tr-fout .fo-stat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 22px;
  border-left: 1px solid var(--fo-hair);
}
.tr-fout .fo-stat:first-child { padding-left: 0; border-left: 0; }
.tr-fout .fo-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fo-navy-500);
  white-space: nowrap;
}
.tr-fout .fo-stat-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--fo-navy-800);
  font-variant-numeric: tabular-nums;
}
.tr-fout .fo-stat-label.is-brick,
.tr-fout .fo-stat-num.is-brick { color: var(--fo-brick); }
.tr-fout .fo-stat-note {
  font-size: 11px;
  color: var(--fo-navy-400);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----- body: main column + follow-up rail ----------------------------------- */
.tr-fout .fo-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0 20px;
}
.tr-fout .fo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-fout .fo-card {
  background: var(--fo-paper);
  border: 1px solid var(--fo-hair);
  border-radius: 10px;
  box-shadow: var(--fo-shadow);
  overflow: hidden;
}

/* ----- composer -------------------------------------------------------------- */
.tr-fout .fo-composer-head {
  padding: 12px 18px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tr-fout .fo-eyebrow {
  margin: 0;
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fo-navy-500);
}
.tr-fout .fo-quiet { font-size: 11px; color: var(--fo-navy-400); }

.tr-fout .fo-fields {
  padding: 10px 18px 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.tr-fout .fo-field { display: block; }
.tr-fout .fo-field-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fo-navy-400);
  margin-bottom: 4px;
}
.tr-fout .fo-select,
.tr-fout .fo-input {
  background-color: #FFFFFF;
  border: 1px solid var(--fo-hair);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--fo-navy-800);
}
.tr-fout .fo-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-input { width: 118px; }
.tr-fout .fo-select:focus,
.tr-fout .fo-input:focus {
  outline: none;
  border-color: var(--fo-hair-strong);
  box-shadow: 0 0 0 2px rgba(61, 107, 83, 0.22);
}
.tr-fout .fo-seg {
  display: inline-flex;
  align-items: center;
  background: var(--fo-cream-200);
  border: 1px solid var(--fo-hair);
  border-radius: 999px;
  padding: 2px;
}
.tr-fout .fo-seg-btn {
  background: none;
  border: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--fo-navy-500);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.tr-fout .fo-seg-btn:hover { color: var(--fo-navy-700); }
.tr-fout .fo-seg-btn.is-on {
  background: var(--fo-navy-900);
  color: var(--fo-paper);
  font-weight: 600;
}
.tr-fout .fo-fields-note { padding-bottom: 7px; }

/* facility toolbar */
.tr-fout .fo-facbar {
  margin: 12px 18px 0;
  border-top: 1px solid var(--fo-cream-200);
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tr-fout .fo-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--fo-hair);
  border-radius: 7px;
  padding: 6px 11px;
  width: 230px;
  color: var(--fo-navy-400);
}
.tr-fout .fo-search svg { flex-shrink: 0; }
.tr-fout .fo-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--fo-navy-800);
}
.tr-fout .fo-search input::placeholder { color: var(--fo-navy-400); }
.tr-fout .fo-search input:focus { outline: none; }
.tr-fout .fo-search:focus-within {
  border-color: var(--fo-hair-strong);
  box-shadow: 0 0 0 2px rgba(61, 107, 83, 0.22);
}
.tr-fout .fo-chipselect {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fo-paper);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid var(--fo-hair);
  border-radius: 7px;
  padding: 6px 26px 6px 10px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--fo-navy-700);
}
.tr-fout .fo-chipselect:hover { background-color: var(--fo-cream-100); }
.tr-fout .fo-chipselect:focus {
  outline: none;
  border-color: var(--fo-hair-strong);
  box-shadow: 0 0 0 2px rgba(61, 107, 83, 0.22);
}

/* facility checkbox rows — 40px single-line, fold never crush */
.tr-fout .fo-faclist {
  margin: 8px 18px 0;
  max-height: 328px;
  overflow-y: auto;
}
.tr-fout .fo-facrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-bottom: 1px solid var(--fo-cream-200);
  padding: 4px 8px;
  margin: 0 -8px;
}
.tr-fout .fo-facrow:hover { background: var(--fo-cream-100); }
.tr-fout .fo-facrow.is-sel { background: var(--fo-cream-100); }
.tr-fout .fo-facmain {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
}
.tr-fout .fo-check {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--fo-hair);
  background: transparent;
  color: var(--fo-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tr-fout .fo-check.is-on {
  background: var(--fo-navy-900);
  border-color: var(--fo-navy-900);
}
.tr-fout .fo-facid {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.tr-fout .fo-facname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fo-navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-facmeta {
  font-size: 11px;
  color: var(--fo-navy-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-facavail { font-size: 11px; font-weight: 600; white-space: nowrap; }
.tr-fout .fo-facavail.is-sage { color: var(--fo-sage); }
.tr-fout .fo-facavail.is-amber { color: var(--fo-amber); }
.tr-fout .fo-facpayer {
  font-size: 11px;
  color: var(--fo-navy-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 118px;
}
.tr-fout .fo-facresp {
  font-size: 11px;
  color: var(--fo-navy-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tr-fout .fo-facchip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tr-fout .fo-facchip.is-sage { background: var(--fo-sage-tint); color: var(--fo-sage); }
.tr-fout .fo-facchip.is-amber { background: var(--fo-amber-tint); color: var(--fo-amber); }
.tr-fout .fo-facchip.is-neutral { background: var(--fo-cream-200); color: var(--fo-navy-500); }
.tr-fout .fo-facacts {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fo-navy-500);
  flex-shrink: 0;
}
.tr-fout .fo-facacts a {
  display: inline-flex;
  padding: 4px;
  color: inherit;
}
.tr-fout .fo-facacts a:hover { color: var(--fo-navy-800); }
.tr-fout .fo-facacts .is-off { display: inline-flex; padding: 4px; opacity: 0.35; }

/* composer footer */
.tr-fout .fo-composer-foot {
  padding: 11px 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tr-fout .fo-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fo-navy-900);
  border: 0;
  color: var(--fo-paper);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  white-space: nowrap;
}
.tr-fout .fo-primary:hover { background: var(--fo-navy-800); }
.tr-fout .fo-primary:disabled { opacity: 0.45; }

/* ----- outreach log ----------------------------------------------------------- */
.tr-fout .fo-log {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tr-fout .fo-log-head,
.tr-fout .fo-logrow {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 78px 66px 88px 112px 92px;
  align-items: center;
  padding: 0 8px;
}
.tr-fout .fo-log-head { border-bottom: 1px solid var(--fo-hair-strong); }
.tr-fout .fo-log-h {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-navy-400);
  padding: 9px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-log-h.is-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fo-navy-700);
  overflow: visible;
}
.tr-fout .fo-logrow {
  border-bottom: 1px solid var(--fo-cream-200);
  min-height: 48px;
}
.tr-fout .fo-logrow:hover { background: var(--fo-cream-100); }
.tr-fout .fo-loggroup.is-focused { box-shadow: inset 0 0 0 2px var(--tr-green); animation: fo-focus-record 2.4s ease-out both; }
@keyframes fo-focus-record {
  0%, 55% { background: var(--tr-green-soft); }
  100% { background: transparent; }
}
.tr-fout .fo-logrow.is-overdue,
.tr-fout .fo-logrow.is-overdue:hover { background: var(--fo-row-overdue); }
.tr-fout .fo-cell {
  padding: 6px 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-fac {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fo-navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-fac-sub {
  display: block;
  font-size: 10.5px;
  color: var(--fo-navy-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-cell.fo-c-client { font-size: 12px; color: var(--fo-navy-600); font-variant-numeric: tabular-nums; }
.tr-fout .fo-cell.fo-c-created { font-size: 12px; color: var(--fo-navy-500); font-variant-numeric: tabular-nums; }
.tr-fout .fo-cell.fo-c-due { font-size: 12px; font-weight: 500; color: var(--fo-navy-500); font-variant-numeric: tabular-nums; }
.tr-fout .fo-cell.fo-c-due.is-brick { font-weight: 600; color: var(--fo-brick); }
.tr-fout .fo-cell.fo-c-due.is-empty { color: var(--fo-navy-400); }
.tr-fout .fo-status-sub {
  display: block;
  font-size: 10px;
  color: var(--fo-navy-400);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-c-act { display: flex; justify-content: flex-end; overflow: visible; }
.tr-fout .fo-setstatus {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%237A8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  border: 0;
  padding: 6px 17px 6px 0;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--fo-navy-600);
  cursor: pointer;
  max-width: 100%;
}
.tr-fout .fo-setstatus:hover { color: var(--fo-navy-800); }
.tr-fout .fo-setstatus:focus {
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(61, 107, 83, 0.22);
}

/* status chips — filled or outlined tints */
.tr-fout .fo-chip {
  display: inline-block;
  max-width: 100%;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-chip.is-neutral { background: var(--fo-cream-200); color: var(--fo-navy-600); border-color: var(--fo-cream-200); }
.tr-fout .fo-chip.is-amber { background: var(--fo-amber-tint); color: var(--fo-amber); border-color: var(--fo-amber-tint); }
.tr-fout .fo-chip.is-outline-sage { background: transparent; color: var(--fo-sage); border-color: var(--fo-sage); }
.tr-fout .fo-chip.is-sage-solid { background: var(--fo-sage); color: var(--fo-paper); border-color: var(--fo-sage); }
.tr-fout .fo-chip.is-brick { background: var(--fo-brick-tint); color: var(--fo-brick-text); border-color: var(--fo-brick-tint); }

/* inline amber outcome prompt */
.tr-fout .fo-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: var(--fo-amber-tint);
  border-bottom: 1px solid var(--fo-cream-200);
}
.tr-fout .fo-prompt-q {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fo-amber);
  white-space: nowrap;
}
.tr-fout .fo-prompt-chip {
  display: inline-block;
  background: var(--fo-paper);
  border: 1px solid var(--fo-hair-strong);
  color: var(--fo-navy-700);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tr-fout .fo-prompt-chip:hover { background: var(--fo-cream-100); }
.tr-fout .fo-prompt-note {
  font-size: 10.5px;
  color: var(--fo-amber);
  min-width: 0;
}

/* overdue quick actions — revealed on row hover or keyboard focus */
.tr-fout .fo-quick {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 18px;
  background: var(--fo-cream-100);
  border-bottom: 1px solid var(--fo-cream-200);
}
.tr-fout .fo-loggroup:hover .fo-quick,
.tr-fout .fo-loggroup:focus-within .fo-quick { display: flex; }
.tr-fout .fo-quick-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fo-brick);
  white-space: nowrap;
}
.tr-fout .fo-quick-primary {
  background: var(--fo-navy-900);
  border: 0;
  color: var(--fo-paper);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.tr-fout .fo-quick-primary:hover { background: var(--fo-navy-800); }
.tr-fout .fo-quick-btn {
  background: var(--fo-paper);
  border: 1px solid var(--fo-hair-strong);
  color: var(--fo-navy-700);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.tr-fout .fo-quick-btn:hover { background: var(--fo-cream-100); }

.tr-fout .fo-empty {
  padding: 32px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fo-navy-500);
}

.tr-fout .fo-log-foot {
  padding: 9px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--fo-navy-400);
  border-top: 1px solid var(--fo-cream-200);
}
.tr-fout .fo-log-client {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fo-navy-500);
  white-space: nowrap;
}
.tr-fout .fo-log-note {
  flex: 1;
  min-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-log-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----- follow-up queue rail --------------------------------------------------- */
.tr-fout .fo-rail {
  width: 252px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  background: var(--fo-paper);
  border: 1px solid var(--fo-hair);
  border-radius: 10px;
  box-shadow: var(--fo-shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.tr-fout .fo-rail-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fo-navy-500);
}
.tr-fout .fo-rail-list { display: flex; flex-direction: column; gap: 8px; }
.tr-fout .fo-rail-empty {
  margin: 0;
  font-size: 11.5px;
  color: var(--fo-navy-500);
}
.tr-fout .fo-qcard {
  background: var(--fo-cream-100);
  border: 1px solid var(--fo-cream-200);
  border-radius: 8px;
  padding: 9px 11px;
}
.tr-fout .fo-qcard-top { display: flex; align-items: flex-start; gap: 8px; }
.tr-fout .fo-qcard-fac {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fo-navy-800);
  line-height: 1.35;
}
.tr-fout .fo-qcard .fo-chip { font-size: 9.5px; flex-shrink: 0; }
.tr-fout .fo-qcard-meta {
  font-size: 10.5px;
  color: var(--fo-navy-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-fout .fo-qcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.tr-fout .fo-qcard-due {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.tr-fout .fo-qcard-due.is-brick { color: var(--fo-brick); }
.tr-fout .fo-qcard-due.is-amber { color: var(--fo-amber); }
.tr-fout .fo-qcard-act {
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--fo-navy-600);
  white-space: nowrap;
}
.tr-fout .fo-qcard-act:hover { color: var(--fo-navy-800); }

/* analytics contract — dev documentation, folded out of the workflow */
.tr-fout .fo-contract {
  margin-top: 12px;
  border-top: 1px solid var(--fo-cream-200);
  padding-top: 10px;
}
.tr-fout .fo-contract summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fo-navy-500);
}
.tr-fout .fo-contract summary::-webkit-details-marker { display: none; }
.tr-fout .fo-contract summary::after { content: ' +'; color: var(--fo-navy-400); }
.tr-fout .fo-contract[open] summary::after { content: ' –'; }
.tr-fout .fo-contract-copy {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fo-navy-400);
}
.tr-fout .fo-contract-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.tr-fout .fo-contract-fields code {
  font-size: 10px;
  color: var(--fo-navy-500);
  background: var(--fo-cream-100);
  border: 1px solid var(--fo-cream-200);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.tr-fout .fo-rail-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--fo-cream-200);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fo-navy-400);
}

/* ----- fold, never crush ------------------------------------------------------- */
@media (max-width: 1280px) {
  .tr-fout .fo-facpayer { display: none; }
}
@media (max-width: 1180px) {
  .tr-fout .fo-log-head,
  .tr-fout .fo-logrow { grid-template-columns: minmax(170px, 1.2fr) 78px 88px 112px 92px; }
  .tr-fout .fo-c-created { display: none; }
}
@media (max-width: 1024px) {
  .tr-fout .fo-body { flex-direction: column; }
  .tr-fout .fo-main { width: 100%; }
  .tr-fout .fo-rail { width: auto; align-self: stretch; position: static; }
}
@media (max-width: 720px) {
  .tr-fout .fo-composer-head { flex-wrap: wrap; }
  .tr-fout .fo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-fout .fo-field { min-width: 0; }
  .tr-fout .fo-input, .tr-fout .fo-select { width: 100%; max-width: 100%; min-height: 44px; }
  .tr-fout .fo-fields:has(.fo-seg) { grid-template-columns: minmax(0, 1fr); }
  .tr-fout .fo-fields-note { display: block; }
  .tr-fout .fo-search { width: 100%; min-width: 0; }
  .tr-fout .fo-log { overflow-x: auto; }
  .tr-fout .fo-log-head,
  .tr-fout .fo-logrow { grid-template-columns: minmax(140px, 1fr) 88px 104px 92px; }
  .tr-fout .fo-c-client { display: none; }
  .tr-fout .fo-facresp { display: none; }
}