/* The tools we run on (Cara, 2026-11-09, from Adam's brief through Emet): Pouch, Calleroo and
   Liaison, after the five products. Same rows as the products. Each drawer holds one card in the
   tool's own colours: what it is on the left, a worked example of it on the right (Adam: "a tad
   more compelling"), then its status and the way to ask for it. */
#pouch-drawer,#calleroo-drawer,#liaison-drawer{padding:16px 24px 18px}

/* the card, and each tool's colours */
.tl-card{--bg:#1d1916;--glow:#3a2a20;--accent:#d27a45;--fg:#f3efe9;--soft:#b9ada2;--hair:#ffffff1f;--panel:#ffffff0d;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;padding:34px 36px 30px;border-radius:14px;
  color:var(--fg);background:radial-gradient(110% 120% at 85% 10%,var(--glow) 0%,var(--bg) 62%);box-shadow:0 18px 44px #0f171c2e}
.tl-calleroo-card{--bg:#15191d;--glow:#2c2a24;--accent:#e8964a;--soft:#aeb4b9}
.tl-liaison-card{--bg:#161a21;--glow:#262c3b;--accent:#9fb2cf;--accent2:#b8a3c6;--soft:#a9b1bf}
.tl-card p{margin:0}
.tl-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.tl-brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:.02em}
.tl-brand img{width:28px;height:28px;border-radius:7px;background:#fff}
.tl-head{font:400 clamp(28px,2.6vw,36px)/1.1 var(--serif);letter-spacing:-.02em;margin:6px 0 2px}
.tl-text{font-size:17px;line-height:1.6;color:var(--fg);opacity:.86;max-width:520px}
.tl-status{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tl-status-main{font-size:15px}
.tl-status-sub{font-size:13px;color:var(--soft);margin-top:3px!important}
.tl-cta{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.tl-ask{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:4px;background:var(--accent);color:#14110f;font-size:15px;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:filter .2s}
.tl-ask:hover{opacity:1;filter:brightness(1.08)}
.tl-ask:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tl-small{font-size:12.5px;color:var(--soft);text-underline-offset:.2em;white-space:nowrap}

/* the worked example: a panel in the tool's colours, its lines arriving one by one */
.tl-scene{align-self:center;background:linear-gradient(180deg,#ffffff1c,#ffffff0f);border:1px solid #ffffff30;border-radius:12px;padding:18px 18px 14px;min-width:0;box-shadow:0 14px 34px #00000059,inset 0 1px 0 #ffffff24}
.tl-scene-top{display:flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.02em;color:var(--soft);padding-bottom:13px;border-bottom:1px solid var(--hair)}
.tl-scene-top>span:last-child{margin-left:auto}
.tl-live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:tl-pulse 2.4s ease-out infinite}
.tl-scene-note{font-size:12px;color:var(--soft);opacity:.85;margin-top:12px!important;text-align:center}
.tl-scene li,.tl-listen,.tl-summary{opacity:0;transform:translateY(6px);animation:tl-in .5s ease-out forwards;animation-delay:calc(.25s + var(--i) * .55s)}
.tl-scene ol{list-style:none;margin:0;padding:0}

/* Pouch: a routing board. Each email runs through Pouch to its own agent, one route at a time */
.tl-pouch-card{--r1:#e08a52;--r2:#e6b866;--r3:#d79b8e;--r4:#8c837c}
.tl-route{display:grid;grid-template-columns:minmax(0,1.2fr) 46px 80px 46px minmax(0,1fr);align-items:stretch;margin-top:14px}
.tl-in,.tl-out{display:grid;grid-template-rows:repeat(4,1fr);gap:8px}
.tl-in li,.tl-out li{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:7px 11px;border-radius:8px;background:#ffffff0f;border:1px solid #ffffff1a;border-left:3px solid var(--c);font-size:13px;line-height:1.3;color:var(--fg);min-width:0}
.tl-in b,.tl-out b{font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}
.tl-out b{font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--fg)}
.tl-out li{font-size:12px;color:var(--soft)}
.tl-in li.is-quiet,.tl-out li.is-quiet{opacity:.55}
.tl-tag{display:none}
.tl-wires{width:100%;height:100%;overflow:visible}
.tl-wires path{fill:none;stroke:var(--c);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-dasharray:5 4;opacity:.6;animation:tl-flow 1.1s linear infinite,tl-lit 6.6s ease-in-out infinite;animation-delay:0s,calc(var(--i) * 1.65s)}
.tl-wires path.is-quiet{stroke-dasharray:2 5;opacity:.4}
.tl-hub{align-self:center;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px;border-radius:12px;background:#f3efe9;color:#1d1916;text-align:center;box-shadow:0 0 0 4px #e08a5226,0 8px 20px #0000004d}
.tl-hub img{width:34px;height:34px;border-radius:8px}
.tl-hub b{font-size:13px;font-weight:600}
.tl-hub span{font-size:10.5px;color:#6b5f55;line-height:1.2}
@keyframes tl-flow{to{stroke-dashoffset:-14}}
@keyframes tl-lit{0%,4%{opacity:.6;stroke-width:2px}10%,22%{opacity:1;stroke-width:3.2px}30%,100%{opacity:.6;stroke-width:2px}}

/* Calleroo: a call in progress, then its summary */
.tl-timer{font-variant-numeric:tabular-nums}
.tl-wave{display:flex;align-items:center;gap:4px;height:30px;margin:14px 0 6px}
.tl-wave i{flex:0 0 3px;height:calc(var(--h) * 100%);border-radius:2px;background:var(--accent);opacity:.75;transform-origin:center;animation:tl-wave 1.2s ease-in-out infinite alternate;animation-delay:var(--d)}
.tl-lines li{font-size:14px;line-height:1.45;padding:7px 0;color:var(--fg);opacity:.92}
.tl-lines b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:1px}
.tl-lines li.is-them b{color:var(--soft)}
.tl-listen{font-size:12.5px;color:var(--soft);margin-top:6px!important}
.tl-listen span{color:var(--accent);font-size:10px;margin-right:4px}
.tl-summary{margin-top:12px!important;padding:11px 13px;border-radius:9px;background:#ffffff12;font-size:14px;line-height:1.4}
.tl-summary b{display:block;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);font-weight:600;margin-bottom:2px}

/* Liaison: two agents, two platforms, one room */
.tl-chat{display:flex;flex-direction:column;gap:10px;padding-top:14px}
.tl-chat li{max-width:82%;padding:10px 13px;border-radius:12px 12px 12px 3px;background:color-mix(in srgb,var(--accent) 20%,transparent)}
.tl-chat li.is-them{align-self:flex-end;border-radius:12px 12px 3px 12px;background:color-mix(in srgb,var(--accent2) 20%,transparent)}
.tl-who{display:block;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--accent);margin-bottom:3px}
.is-them .tl-who{color:var(--accent2)}
.tl-chat p{font-size:14px;line-height:1.4}
.tl-file{display:inline-block;margin-top:8px;font-size:12.5px;padding:5px 10px;border-radius:6px;border:1px solid var(--hair);color:var(--fg)}
.tl-file:before{content:'⎘ ';color:var(--accent)}

@keyframes tl-in{to{opacity:1;transform:none}}
@keyframes tl-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes tl-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media(prefers-reduced-motion:reduce){.tl-wires path{animation:none;opacity:.7}.tl-scene li,.tl-listen,.tl-summary{animation:none;opacity:1;transform:none}.tl-wave i,.tl-live{animation:none}}

@media(max-width:1100px){
 .tl-card{gap:28px;padding:28px 26px 24px}
 .tl-text{font-size:16px}
}
@media(max-width:800px){
 .tl-card{grid-template-columns:minmax(0,1fr)}
 .tl-copy{display:contents}
 .tl-scene{order:2}
 .tl-status{order:3}
}
@media(max-width:600px){
    #pouch-drawer,#calleroo-drawer,#liaison-drawer{padding:10px}
 .tl-card{padding:22px 18px;gap:18px;border-radius:12px}
 .tl-head{font-size:26px}
 .tl-scene{padding:14px 13px 12px}
 .tl-scene-top{font-size:11.5px}
 .tl-route{grid-template-columns:minmax(0,1fr)}
 .tl-wires,.tl-hub,.tl-out{display:none}
 .tl-in li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
 .tl-in li b{grid-column:1}
 .tl-tag{display:block;grid-column:2;grid-row:1 / 3;align-self:center;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
 .tl-tag:before{content:"→ ";opacity:.7}
 .tl-status{flex-direction:column;align-items:stretch}
 .tl-cta{align-items:stretch;text-align:center}
 .tl-ask{justify-content:center}
}