/* ─── Deal toasts ─────────────────────────────────────────────────────────────
   ONE component, four pipeline stages: offer accepted → contract sent →
   contract signed → funded. Bottom-right stack, max 3 visible, NEWEST AT THE
   BOTTOM, 6s auto-dismiss with a hover-pausable hairline countdown. Colour
   encodes progression so the stage reads from the accent alone:
       offer accepted  → cyan   #22d3ee
       contract sent   → amber  #fbbf24
       contract signed → mint   #34d399
       funded          → gold   #fcd34d
   Shares the goal-hit HUD vocabulary — dark panel, one corner bracket, accent
   glow, mono micro-labels — at a whisper (these fire many times a day; the goal
   banner fires once a month, so the hierarchy has to hold). Never blocks a click.

   Z-ORDER RULE: the funded-fireworks canvas (.ct-fx-toasts, z 9989) sits
   STRICTLY BELOW the stack (z 9990), and its JS clears every frame — no
   accumulating trail-fade wash — so it can neither out-layer nor dim the toasts
   or the app. Lifted from the reference captap-deal-toasts.html. */

  .ct-toasts {
    /* self-contained palette — scoped here so the app's globals can't reach in
       and this can't leak out */
    --panel:#0a1a22; --panel-2:#071219;
    --mint:#34d399; --cyan:#22d3ee; --amber:#fbbf24; --gold:#fcd34d;
    --dim:#5b7c8a; --dim-2:#38505b; --white:#f1f5f9;
    --t-display:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --t-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    position:fixed; right:26px; bottom:26px; z-index:9990;
    display:flex; flex-direction:column; align-items:flex-end; gap:15px;   /* column + append = newest at the bottom; flex-end so a smaller stage doesn't stretch to the funded width */
    width:min(94vw,640px); pointer-events:none;       /* sized for the largest (funded) card; each stage sets its own width below */
  }
  .ct-fx-toasts { position:fixed; inset:0; z-index:9989; pointer-events:none; }

  .ct-toast {
    --scale:1;   /* per-stage size multiplier (offer/sent = 1); see the s-signed / s-funded rules */
    box-sizing:border-box;   /* width below is the full box, so base (offer/sent) stays today's size */
    position:relative; pointer-events:auto;
    width:min(94vw, calc(488px * var(--scale)));
    display:grid; grid-template-columns:auto 1fr auto; column-gap:calc(18px * var(--scale)); align-items:start;
    padding:calc(21px * var(--scale)) calc(22px * var(--scale)) calc(24px * var(--scale)) calc(24px * var(--scale));
    background:linear-gradient(160deg,var(--panel),var(--panel-2));
    border:1px solid rgba(255,255,255,.07);
    border-left:3px solid var(--accent);
    border-radius:12px;
    box-shadow:0 14px 40px -12px rgba(0,0,0,.85),
               0 0 0 1px rgba(0,0,0,.4),
               inset 0 1px 0 rgba(255,255,255,.045),
               0 0 30px -14px var(--accent);
    overflow:hidden; color:var(--white); font-family:var(--t-display);
    /* Resting state is VISIBLE. The entrance animates transform ONLY — opacity is
       never driven off 0 — so a suppressed, disabled, throttled, or frozen-clock
       entrance can never leave a toast stuck invisible (the goal-banner failure
       shape). The slide/scale reads as the reveal; there is no opacity fade-in. */
    opacity:1;
    animation:tk-in .52s cubic-bezier(.16,1,.3,1);
  }
  .ct-toast.out { animation:tk-out .3s ease-in forwards; }
  @keyframes tk-in  { from { transform:translateX(30px) scale(.97); } to { transform:none; } }
  @keyframes tk-out { to { opacity:0; transform:translateX(22px) scale(.98); } }

  /* one corner bracket, echoing the HUD */
  .ct-toast::before {
    content:""; position:absolute; top:9px; right:9px; width:17px; height:17px;
    border-top:1px solid var(--accent); border-right:1px solid var(--accent);
    opacity:.5; border-radius:0 4px 0 0;
  }
  .tk-mark {
    width:calc(46px * var(--scale)); height:calc(46px * var(--scale)); border-radius:12px; display:grid; place-items:center;
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
    font-family:var(--t-mono); font-size:calc(18px * var(--scale)); font-weight:700; color:var(--accent);
  }
  .tk-body { min-width:0; }
  .tk-eyebrow {
    font-family:var(--t-mono); font-size:calc(11px * var(--scale)); font-weight:500; letter-spacing:.26em;
    text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px;
  }
  .tk-eyebrow em { font-style:normal; color:var(--dim-2); letter-spacing:.14em; }
  .tk-deal {
    margin-top:9px; font-size:calc(20px * var(--scale)); font-weight:700; letter-spacing:-.01em; color:var(--white);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tk-meta {
    margin-top:9px; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
    font-family:var(--t-mono); font-size:calc(12.5px * var(--scale)); color:var(--dim);
  }
  .tk-amt { color:var(--accent); font-weight:700; font-size:calc(17px * var(--scale)); letter-spacing:.01em; }
  .tk-sep { color:var(--dim-2); }
  .tk-iso { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
  .tk-x {
    background:none; border:0; color:var(--dim-2); cursor:pointer;
    width:32px; height:32px; border-radius:8px; font-size:16px; line-height:1;
    display:grid; place-items:center; transition:.16s;
  }
  .tk-x:hover { color:var(--white); background:rgba(255,255,255,.07); }

  /* dismissal countdown hairline — hover pauses it (read the deal name) */
  .tk-timer {
    position:absolute; left:0; bottom:0; height:3px; width:100%;
    background:var(--accent); opacity:.5; transform-origin:left center;
    animation:tk-tick var(--life,6000ms) linear forwards;
  }
  .ct-toast:hover .tk-timer { animation-play-state:paused; }
  @keyframes tk-tick { from { transform:scaleX(1); } to { transform:scaleX(0); } }

  /* per-stage accent AND size — the pipeline reads as a progression, and a bigger
     card carries more weight: offer/sent smallest, contract signed medium, a
     funding largest. */
  .ct-toast.s-offer  { --accent:var(--cyan); }
  .ct-toast.s-sent   { --accent:var(--amber); }
  .ct-toast.s-signed { --accent:var(--mint); --scale:1.12; }   /* medium — contract signed */
  .ct-toast.s-funded { --accent:var(--gold); --scale:1.3; }    /* largest — a funding */

  /* funded gets a touch more, because it's the one that pays */
  .ct-toast.s-funded {
    box-shadow:0 14px 40px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4),
               inset 0 1px 0 rgba(255,255,255,.05), 0 0 46px -12px var(--gold);
  }
  .ct-toast.s-funded .tk-mark { animation:tk-pulse 2.1s ease-in-out infinite; }
  @keyframes tk-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(252,211,77,.35); } 50% { box-shadow:0 0 0 7px rgba(252,211,77,0); } }

  @media (prefers-reduced-motion:reduce) {
    .ct-toast, .ct-toast.out { animation:none; }
    .tk-timer { animation:none; transform:scaleX(0); }
    .ct-toast.s-funded .tk-mark { animation:none; }
  }

/* ── Goal-hit celebration (fires once a month / on scheduled replay) ───────────
   Rebuilt in the loading-screen's HUD language. LIFTED from the reference
   captap-goal-celebration.html — keep in sync. Everything is scoped under
   .ctg-root and all custom props live on .ctg-root, so nothing leaks into the
   app. The offer/contract/funded per-deal banners above are untouched.
   Both headline lines are white-space:nowrap with pure vw sizing — that is what
   makes a mid-word break structurally impossible; do NOT add overflow-wrap. */
  .ctg-root {
    --bg:#02090d; --mint:#34d399; --mint-hi:#6ee7b7; --cyan:#22d3ee;
    --dim:#4d6b78; --dim-2:#2b3f48; --white:#f8fafc;
    --display:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  }
  /* Preview (test) runs: flip the accent palette to red so the ENTIRE overlay
     reads red, plus the figure/eyebrow say "preview — not live data" and the
     pace bar is hidden. Unmistakable, and no fabricated dollar figure anywhere. */
  .ctg-root.ctg-preview { --mint:#f87171; --mint-hi:#fca5a5; --cyan:#f87171; }
  .ctg-root.ctg-preview .ct-bar-wrap { display:none; }

  .ctg-root .ct-goal {
    position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
    background:var(--bg); opacity:0; animation:ctg-in .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes ctg-in { to { opacity:1 } }
  .ctg-root .ct-grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:
      repeating-linear-gradient(0deg,rgba(52,211,153,.045) 0 1px,transparent 1px 44px),
      repeating-linear-gradient(90deg,rgba(52,211,153,.045) 0 1px,transparent 1px 44px);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 78%);
    mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 78%);
  }
  .ctg-root .ct-glow {
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 50% 46%,rgba(52,211,153,.16),transparent 46%),
      radial-gradient(circle at 50% 46%,rgba(34,211,238,.09),transparent 62%),
      radial-gradient(ellipse at 50% 50%,transparent 40%,var(--bg) 88%);
  }
  .ctg-root .ct-rings {
    position:absolute; top:50%; left:50%; width:min(128vh,124vw); aspect-ratio:1;
    transform:translate(-50%,-50%); pointer-events:none; opacity:.9;
  }
  .ctg-root .ct-rings svg { width:100%; height:100%; overflow:visible }
  .ctg-root .spin-slow { transform-origin:50% 50%; animation:ctg-spin 46s linear infinite }
  .ctg-root .spin-rev  { transform-origin:50% 50%; animation:ctg-spin 32s linear infinite reverse }
  @keyframes ctg-spin { to { transform:rotate(360deg) } }
  .ctg-root .ct-cash { position:absolute; inset:0; pointer-events:none; overflow:hidden }
  .ctg-root .ct-cash span {
    position:absolute; color:var(--mint); font-family:var(--display); font-weight:700;
    user-select:none; animation:ctg-drift linear infinite;
  }
  @keyframes ctg-drift {
    from { transform:translateY(14px) rotate(-6deg) } to { transform:translateY(-14px) rotate(6deg) }
  }
  .ctg-root .ct-plate {
    position:relative; z-index:3; width:min(92vw,1040px);
    padding:clamp(28px,4.4vw,60px) clamp(24px,4vw,72px); text-align:center;
    animation:ctg-rise .9s cubic-bezier(.16,1,.3,1) both .1s;
  }
  @keyframes ctg-rise { from { opacity:0; transform:translateY(22px) scale(.985) } to { opacity:1; transform:none } }
  .ctg-root .br { position:absolute; width:clamp(26px,3.4vw,52px); aspect-ratio:1; border:2px solid var(--mint); opacity:.75 }
  .ctg-root .br.tl { top:0; left:0; border-right:0; border-bottom:0 }
  .ctg-root .br.tr { top:0; right:0; border-left:0; border-bottom:0 }
  .ctg-root .br.bl { bottom:0; left:0; border-right:0; border-top:0 }
  .ctg-root .br.br2 { bottom:0; right:0; border-left:0; border-top:0 }
  .ctg-root .ct-eyebrow {
    font-family:var(--mono); font-weight:500; font-size:clamp(10px,1.05vw,13px);
    letter-spacing:.42em; text-transform:uppercase; color:var(--mint);
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:clamp(18px,2.4vw,30px); white-space:nowrap;
  }
  .ctg-root .ct-eyebrow::before, .ctg-root .ct-eyebrow::after {
    content:""; height:1px; width:clamp(24px,7vw,110px);
    background:linear-gradient(90deg,transparent,var(--mint));
  }
  .ctg-root .ct-eyebrow::after { background:linear-gradient(90deg,var(--mint),transparent) }
  /* headline — nowrap + vw scaling, so it can NEVER break mid-word */
  .ctg-root .ct-congrats {
    font-family:var(--display); font-weight:600; font-size:clamp(15px,3.5vw,38px);
    letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--white);
    white-space:nowrap; word-break:keep-all; opacity:.92; margin-bottom:clamp(8px,1.2vw,16px);
  }
  .ctg-root .ct-wordmark {
    font-family:var(--display); font-weight:900; font-size:clamp(52px,12.5vw,148px);
    line-height:.94; letter-spacing:.055em; white-space:nowrap; word-break:keep-all; color:var(--white);
    text-shadow:0 0 38px rgba(52,211,153,.42),0 0 90px rgba(52,211,153,.2);
  }
  .ctg-root.ctg-preview .ct-wordmark { text-shadow:0 0 38px rgba(248,113,113,.42),0 0 90px rgba(248,113,113,.2) }
  .ctg-root .ct-wordmark .tap { color:var(--mint); text-shadow:0 0 34px rgba(52,211,153,.75),0 0 78px rgba(52,211,153,.35) }
  .ctg-root .ct-sub {
    font-family:var(--mono); font-weight:400; font-size:clamp(11px,1.3vw,16px);
    letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-top:clamp(14px,1.8vw,22px); white-space:nowrap;
  }
  .ctg-root .ct-figure { margin-top:clamp(26px,3.4vw,44px); padding-top:clamp(22px,2.8vw,34px); border-top:1px solid rgba(52,211,153,.16) }
  .ctg-root .ct-amount {
    font-family:var(--display); font-weight:800; font-size:clamp(38px,7vw,88px); line-height:1;
    letter-spacing:.01em; color:var(--mint-hi); text-shadow:0 0 32px rgba(52,211,153,.5); white-space:nowrap;
  }
  /* preview: the figure slot holds "preview — not live data", so it must shrink to fit */
  .ctg-root.ctg-preview .ct-amount { font-family:var(--mono); font-size:clamp(16px,2.6vw,30px); letter-spacing:.24em; text-transform:uppercase; text-shadow:none }
  .ctg-root .ct-amount-label { font-family:var(--mono); font-size:clamp(9px,1vw,12px); letter-spacing:.4em; text-transform:uppercase; color:var(--dim); margin-top:12px; white-space:nowrap }
  .ctg-root .ct-bar-wrap { margin-top:clamp(24px,3vw,38px) }
  .ctg-root .ct-bar { position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(52,211,153,.14); overflow:visible }
  .ctg-root .ct-bar-fill { height:100%; border-radius:99px; width:0; background:linear-gradient(90deg,var(--cyan),var(--mint)); box-shadow:0 0 22px rgba(52,211,153,.7); transition:width 2.1s cubic-bezier(.16,1,.3,1) }
  .ctg-root .ct-target { position:absolute; top:-7px; bottom:-7px; left:90.9%; width:2px; background:rgba(255,255,255,.5) }
  .ctg-root .ct-target::after { content:"TARGET"; position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:rgba(255,255,255,.55); white-space:nowrap }
  .ctg-root .ct-legend { display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; gap:18px; font-family:var(--mono); font-size:clamp(9px,1.02vw,12px); letter-spacing:.22em; text-transform:uppercase; color:var(--dim) }
  .ctg-root .ct-legend b { color:var(--mint); font-weight:700 }
  .ctg-root .ct-pct { font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:clamp(16px,2.1vw,26px); color:var(--mint); text-shadow:0 0 20px rgba(52,211,153,.5) }
  .ctg-root .ct-status { display:flex; justify-content:center; gap:clamp(16px,3vw,42px); margin-top:clamp(26px,3.2vw,40px); flex-wrap:wrap; font-family:var(--mono); font-size:clamp(9px,1vw,11px); letter-spacing:.28em; text-transform:uppercase; color:var(--dim-2) }
  .ctg-root .ct-status i { font-style:normal; color:var(--mint); margin-right:8px }
  .ctg-root .ct-status span { color:var(--dim) }
  /* Fireworks canvas sits BELOW the plate + decorations (just above the solid
     .ct-goal background), so its per-frame trail-fade (a full-screen dark wash
     that accumulates toward opaque) only ever covers the same-coloured backdrop —
     never the banner text. z-9050-over-the-banner blotted the text out mid-fire. */
  .ctg-root .ct-fx { position:absolute; inset:0; z-index:1; pointer-events:none }
  .ctg-root .ct-grid, .ctg-root .ct-rings, .ctg-root .ct-glow, .ctg-root .ct-cash { z-index:2 }
  /* ✕ — ≥44px hit target, over everything */
  .ctg-root .ct-x {
    position:fixed; top:22px; right:22px; z-index:9100; width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.05); border:1px solid rgba(52,211,153,.28); color:#cbd5e1;
    font-size:19px; cursor:pointer; display:grid; place-items:center; transition:.18s;
  }
  .ctg-root .ct-x:hover { background:rgba(52,211,153,.14); color:#fff; border-color:var(--mint) }
  @media (prefers-reduced-motion:reduce) {
    .ctg-root .spin-slow, .ctg-root .spin-rev, .ctg-root .ct-cash span { animation:none }
    .ctg-root .ct-plate, .ctg-root .ct-goal { animation-duration:.01ms }
    .ctg-root .ct-bar-fill { transition:none }
    .ctg-root .ct-fx { display:none }
  }