/* ============================================================
   TaskLogix360 — Outcomes section (3 cards + mini concept visuals)
   De-iframed from embeds/wix-embed-outcomes.html (2026-07-09).
   Pairs with sections/outcomes.html. No JS (embed had no scripts).

   Conversion notes / judgment calls (visual result unchanged):
   - Embed's root <section class="sec"> became .tlx-outcomes — the
     container (container-type:inline-size; container-name:tlxout)
     now lives on the section class, so cqw units + the @container
     tlxout query keep measuring the section.
   - LOCAL TOKEN: --ink:#0B2440 is used by this embed but is NOT in
     tokens.css — defined on .tlx-outcomes below (per-section token,
     kept out of the shared file). Every other token already exists
     in tokens.css.
   - html/body rules dropped (iframe artifacts: height/min-height
     100%, overflow:hidden — not kept on the section; card hover
     lift/shadows must not be clipped). Body font/color/background/
     font-smoothing moved onto .tlx-outcomes.
   - :root token block and universal box-sizing reset removed
     (tokens.css / base.css own those).
   - .eyebrow scoped to .tlx-outcomes .eyebrow: base.css defines a
     different .eyebrow primitive used elsewhere on the page — the
     embed's version wins inside this section and no longer leaks
     out (it overrides every property base.css sets). Same for .anim
     (hero.css defines its own .anim on the same page).
   - @keyframes fadeUp/fadeIn renamed tlxOutFadeUp/tlxOutFadeIn —
     keyframes are document-global and hero.css defines different
     fadeUp/fadeIn; unprefixed they'd clobber each other on index.html.

   ROUND 2 (2026-07-11) — per Sam's change list:
   - Section re-grounded DARK on the Command Center topology
     treatment (deep-navy gradient + curvy navy-light routes +
     junction nodes + green SMIL pulses; SVG markup lives in
     index.html, all rules tlxo-*). Routes/nodes sit in open
     canvas only — never under the head copy or the cards.
   - Dark re-tune: white title (green .hl → --green-bright),
     brighter sub (#BCD2E5), eyebrow → --green-bright; the three
     outcome cards stay LIGHT white cards with deeper drop
     shadows tuned for the dark ground.
   - Type spec applied: title clamp(32px,4.4vw,48px)/800,
     sub clamp(17px,1.8vw,21px), eyebrow 13px/800/.11em,
     card titles clamp(20px,2vw,26px).
   - Reduced motion: pulses hidden, rings static. No JS needed
     (SMIL animates the pulses).
   ============================================================ */

.tlx-outcomes{
  --ink:#0B2440;                 /* local token — not in tokens.css */
  position:relative;container-type:inline-size;container-name:tlxout;
  font-family:var(--font);color:var(--ink);
  /* Reverted 2026-07-11 (per Sam): dark Command-Center ground dropped → clean LIGHT GRAY.
     Topology SVG hidden (dark-ground element); cards + copy re-tuned for the light ground. */
  background:linear-gradient(180deg,#F5F7FA 0%,#EDF1F5 100%);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.tlxo-net{display:none} /* dark topology retired on the light-gray ground */
.wrap{max-width:1120px;margin:0 auto;padding:clamp(44px,6cqw,84px) clamp(20px,5cqw,56px)}
.tlx-outcomes .wrap{position:relative;z-index:1}

/* ---- living network topology (SVG in index.html, decorative) ---- */
.tlxo-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.tlxo-net .tlxo-link{fill:none;stroke:rgba(151,196,236,.20);stroke-width:1.4}
.tlxo-net .tlxo-link.faint{stroke:rgba(151,196,236,.11)}
.tlxo-node{fill:#7FD99A}
.tlxo-node-core{fill:#1E9A44}
.tlxo-node-ring{
  fill:none;stroke:rgba(30,154,68,.45);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  animation:tlxoRing 3.2s var(--ease) infinite;
}
.tlxo-node-ring.r2{animation-delay:1.1s}
.tlxo-node-ring.r3{animation-delay:2s}
.tlxo-node-ring.r4{animation-delay:.6s}
@keyframes tlxoRing{
  0%{transform:scale(.45);opacity:.9}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
.tlxo-pulse-halo{fill:rgba(110,231,160,.4)}
.tlxo-pulse-dot{fill:#A7F3C4}
/* narrow screens: the slice-fitted SVG crops to its centre strip, so node
   positions no longer avoid the copy — drop the ping rings, soften the net */
@media (max-width:900px){
  .tlxo-node-ring{display:none}
  .tlxo-net{opacity:.55}
}

/* Header */
.head{max-width:760px;margin:0 0 clamp(28px,3.6cqw,44px)}
.tlx-outcomes .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--green-dark);margin-bottom:clamp(14px,1.8cqw,18px)}
.tlx-outcomes .eyebrow .d{width:8px;height:8px;border-radius:50%;background:var(--green)}
.title{margin:0 0 clamp(12px,1.6cqw,18px);font-weight:800;letter-spacing:-0.025em;line-height:1.12;
  font-size:clamp(32px,4.4vw,48px);color:var(--navy-deep)}
.title .hl{color:var(--green)}
.sub{margin:0;max-width:560px;font-size:clamp(17px,1.8vw,21px);line-height:1.6;color:var(--slate)}

/* Cards grid */
.cards{display:grid;grid-template-columns:1fr;gap:clamp(16px,2cqw,24px)}
@container tlxout (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }

/* white cards on the light-gray ground (reverted to standard card elevation) */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:clamp(18px,2cqw,24px);
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(8,54,93,.05), 0 24px 44px -22px rgba(8,54,93,.28)}

/* Mini visual panel */
.viz{min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  background:linear-gradient(180deg,#FBFCFE,#F3F7FB);border:1px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:clamp(16px,1.8cqw,20px)}
.viz .v-head{display:flex;align-items:center;justify-content:space-between}
.viz .v-lbl{font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-light)}

/* viz 1 — completed -> invoiced bar */
.v-bar{position:relative;height:12px;border-radius:7px;background:#E6EBF1;overflow:hidden}
.v-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:7px;
  background:linear-gradient(90deg,var(--navy),var(--green));animation:barFill 1.2s var(--ease) .35s both}
@keyframes barFill{from{width:0}to{width:var(--w)}}
.v-foot{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--slate)}
.v-foot .v-pct{font-family:var(--mono);font-weight:700;color:var(--green-dark)}

/* viz 2 — diverging sparklines */
.spark{width:100%;height:64px;display:block;overflow:visible}
.s-flat{fill:none;stroke:#C2CCD8;stroke-width:2;stroke-linecap:round}
.s-rise{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.4s var(--ease) .45s both}
@keyframes draw{to{stroke-dashoffset:0}}
.s-dot{fill:var(--green);stroke:#fff;stroke-width:2;opacity:0;animation:tlxOutFadeIn .4s 1.5s both}
@keyframes tlxOutFadeIn{to{opacity:1}}
.v-legend{display:flex;gap:16px}
.lg{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--slate-light)}
.lg::before{content:"";width:12px;height:4px;border-radius:2px}
.lg.g::before{background:var(--green)}
.lg.n::before{background:#C2CCD8}

/* viz 3 — project status bars */
/* Name column widened 64px -> 72px when .st-n went 11px -> 13.5px for the type
   floor: "Tower 14B" then needed 67px and was silently ellipsing to "Tower 1...".
   This is the "rework the layout, never shrink the type" half of the rule - the
   label kept its new size and the grid gave way. Percent column 34px -> 32px puts
   it on the grid and hands 2px back to the bar, which is only ~36px at 820. */
.st{display:grid;grid-template-columns:72px 1fr 32px;align-items:center;gap:8px}
.st-n{font-size:13.5px;font-weight:600;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar{height:8px;border-radius:5px;background:#E6EBF1;overflow:hidden}
.st-bar i{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--navy);animation:barFill 1.1s var(--ease) both}
.st:nth-child(1) .st-bar i{animation-delay:.35s}
.st:nth-child(2) .st-bar i{animation-delay:.5s}
.st:nth-child(3) .st-bar i{background:var(--green);animation-delay:.65s}
.st-p{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--slate-light);text-align:right}

/* Card copy */
.c-title{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.015em;line-height:1.22;color:var(--navy-deep)}
.c-desc{margin-top:8px;font-size:clamp(13.5px,1.45cqw,14.5px);line-height:1.55;color:var(--slate)}
.c-foot{margin-top:auto;padding-top:clamp(16px,2cqw,20px);display:flex;align-items:center;gap:12px}
.c-foot .dash{width:28px;height:4px;border-radius:2px;background:var(--green)}
.c-foot .lbl{font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-light)}

/* Entrance */
@keyframes tlxOutFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tlx-outcomes .anim{opacity:0;animation:tlxOutFadeUp .6s var(--ease) forwards}
/* .a1-.a5 scoped WITH .anim: the scoped .anim shorthand (0,2,0) would otherwise
   beat bare .aN (0,1,0) for animation-delay and kill the stagger */
.tlx-outcomes .a1{animation-delay:.04s}.tlx-outcomes .a2{animation-delay:.12s}.tlx-outcomes .a3{animation-delay:.2s}.tlx-outcomes .a4{animation-delay:.28s}.tlx-outcomes .a5{animation-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .tlx-outcomes .anim{opacity:1;animation:none}
  .v-fill,.st-bar i{animation:none;width:var(--w)}
  .s-rise{animation:none;stroke-dashoffset:0}
  .s-dot{animation:none;opacity:1}
  /* topology: static routes/nodes, no SMIL pulses, no ping rings */
  .tlxo-pulses{display:none}
  .tlxo-node-ring{animation:none}
}