/* ──────────────────────────────────────────────────────────────────────────
 * /css/_lib/call-outcome.css
 *
 * MANIFEST
 * Purpose: TrustGuard Glass Tier-3 CALL OUTCOME sheet (CALL-OUTCOME1, C175,
 *          issue #413) — pairs with /js/_lib/call-outcome.js
 *          (window.TG.callOutcome). After a Call tap (or an email / text
 *          started from the person's own mail or text app) the person
 *          leaves the lead and this one-screen sheet asks how it went,
 *          "fill in first, finish last" (Sean-ruled C175): the header with
 *          the one labelled way out ("Dismiss", every mode; a tap outside
 *          does nothing), the optional note with its visible helper line (only
 *          when there are outcome buttons), the two "If ...:" option
 *          checkboxes, the Sent / Didn't send line(s), and the five outcome
 *          buttons LAST (an outcome tap saves and closes).
 *          BOTTOM SHEET below the 640px content-column breakpoint, CENTERED
 *          glass CARD at/above it — the /css/_lib/reminder-sheet.css +
 *          dialog.css presentation contract.
 *
 * Glass:   Tier-3 recipe (LOCKED C97-A) built ENTIRELY from the Glass tokens
 *          in /css/tokens.css. Buttons consume the LOCKED C107-A
 *          --btn-primary-* / --btn-secondary-* tokens; rectangular per
 *          LOCKED C68-B-1A.6-A. NO hardcoded glass values or hex.
 *          @supports not(backdrop-filter) → solid opaque-tint fallback.
 *
 * Targets: every tappable control is at least 44px tall (outcomes, segments,
 *          checkbox rows, actions).
 *
 * Cascade: A /css/_lib/ shared module (LOCKED C82-A). Loaded AFTER the shared
 *          base layer and BEFORE the page CSS. Single-class `.tg-co-*` rules
 *          — no page CSS competes.
 *
 * Dark-only: DARK is the authoritative value set (LOCKED C99-A). LIGHT values
 *          resolve from the provisional light token set.
 *
 * Precache: in sw.js PRECACHE_URLS (v548; the fill-in-first reorder
 *          bumped v549; the Stay button / no-backdrop change bumped v550).
 *
 * Consumed by: purchased-lead.html + my-leads.html.
 *
 * Shipped: C175 (CALL-OUTCOME1).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Backdrop scrim — bottom-anchored sheet < 640px, centered card ≥ 640px ── */
.tg-co-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tg-co-overlay.tg-co-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Glass sheet surface (< 640px) ──────────────────────────────────────── */
.tg-co {
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;

  /* Glass recipe — Tier 3 (LOCKED C97-A), tokens only */
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-bottom: none;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight);

  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.tg-co:focus { outline: none; }

.tg-co-overlay.tg-co-open .tg-co {
  transform: translateY(0);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tg-co {
    background: var(--tier3-tint-opaque);
  }
}

/* ── Centered glass CARD (≥ 640px) ──────────────────────────────────────── */
@media (min-width: 640px) {
  .tg-co-overlay {
    align-items: center;
  }
  .tg-co {
    width: 100%;
    max-width: 460px;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border-bottom: 1px solid var(--glass-edge);
    transform: scale(0.96);
    transition: transform 0.2s ease;
  }
  .tg-co-overlay.tg-co-open .tg-co {
    transform: scale(1);
  }
}

/* ── Heading block ──────────────────────────────────────────────────────── */
/* The eyebrow shares a row with the ONE labelled way out, "Dismiss" (the
   same label in every mode): a quiet text button with a 44px target. A tap
   outside the sheet does nothing (Sean-ruled C175). */
.tg-co-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-2)) 0 0;
}

.tg-co-head .tg-co-eyebrow { margin: 0; }

.tg-co-stay:not([hidden]) {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  margin-right: calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tg-co-stay:hover { color: var(--text); }
.tg-co-stay:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tg-co-stay:disabled { opacity: 0.55; cursor: not-allowed; }

.tg-co-eyebrow {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.tg-co-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text);
  word-break: break-word;
}

.tg-co-prompt {
  margin: var(--space-1) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ── Outcome buttons — the LAST row, one tap saves and closes ───────────── */
.tg-co-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.tg-co-outcome {
  min-height: 48px;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  border: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
  color: var(--btn-secondary-text);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform 0.18s var(--ease-spring), filter 0.15s ease;
}

/* "No call made" spans the row and reads quieter: the honest answer for a
   cancelled tap, not a peer of the four call results. */
.tg-co-outcome--quiet {
  grid-column: 1 / -1;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.tg-co-outcome:hover { filter: brightness(1.12); }
.tg-co-outcome:active { transform: scale(var(--press-scale)); }
.tg-co-outcome:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tg-co-outcome:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Checkbox rows (If voicemail or no answer: remind me / If talked: mark as contacted) */
.tg-co-opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tg-co-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--tier2-inset);
  cursor: pointer;
}

.tg-co-check-input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

.tg-co-check-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.tg-co-check-label {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text);
}

/* ── Sent / Didn't send line(s) ─────────────────────────────────────────── */
.tg-co-line {
  margin-top: var(--space-4);
}

.tg-co-q {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text);
  word-break: break-word;
}

.tg-co-seg {
  display: flex;
  gap: var(--space-2);
}

.tg-co-seg-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--btn-radius);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--tier2-inset);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform 0.18s var(--ease-spring), filter 0.15s ease;
}

.tg-co-seg-btn[aria-pressed="true"] {
  background: var(--btn-secondary-bg);
  border: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
  color: var(--text);
}

.tg-co-seg-btn:hover { filter: brightness(1.1); }
.tg-co-seg-btn:active { transform: scale(var(--press-scale)); }
.tg-co-seg-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tg-co-seg-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Optional note — FIRST, under the heading ───────────────────────────── */
.tg-co-field {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
}

.tg-co-label {
  margin-bottom: var(--space-0-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* The visible helper under the label ("Fill in before choosing outcome."):
   plain text, not a placeholder, so it shows without focusing the box. */
.tg-co-help {
  margin: 0 0 var(--space-1-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.tg-co-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--tier2-inset);
  font-family: var(--font-sans);
  font-size: var(--text-input);
  line-height: var(--leading-normal);
  color: var(--text);
  resize: vertical;
}

.tg-co-textarea::placeholder { color: var(--text-disabled); }
.tg-co-textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ── Inline status / error line ─────────────────────────────────────────── */
.tg-co-err {
  display: none;
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--danger, var(--red));
}

.tg-co-err.tg-co-err-show { display: block; }

/* The reminder confirmation ("Reminder set for Mon, Sep 28, 9:00 AM"): shown
   for 1.5 s inside the sheet after a save that set the call-back reminder,
   then the sheet closes (Sean-ruled C175). Green = done; red stays for
   failures (.tg-co-err). */
.tg-co-ok {
  display: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--chip-green-bg);
  border: 1px solid var(--chip-green-border);
  color: var(--chip-green-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.tg-co-ok.tg-co-ok-show { display: block; }

/* ── Actions (Save when there is no finishing tap; Try again / Continue) ─ */
.tg-co-actions {
  display: flex;
  gap: var(--space-2-5);
  margin-top: var(--space-4);
}

.tg-co-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform 0.18s var(--ease-spring), filter 0.15s ease;
}

.tg-co-btn:hover { filter: brightness(1.1); }
.tg-co-btn:active { transform: scale(var(--press-scale)); }
.tg-co-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tg-co-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.tg-co-btn--primary {
  background: var(--btn-primary-bg);
  border: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: var(--btn-primary-text);
}

.tg-co-btn--secondary {
  background: var(--btn-secondary-bg);
  border: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
  color: var(--btn-secondary-text);
}

/* Saving: the pointer shows progress while the one request runs (the
   controls themselves are disabled by the module). */
.tg-co--busy { cursor: progress; }

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tg-co-overlay { transition: opacity 0.001s linear; }
  .tg-co,
  .tg-co-overlay.tg-co-open .tg-co { transition: none; transform: none; }
  .tg-co-outcome,
  .tg-co-seg-btn,
  .tg-co-btn { transition: filter 0.15s ease; }
}