/* /ai-traffic-analytics/claude-traffic/ only: the packet diagram, the railway points,
   the staircase of checks, the bookshelf and the MCP chat. */

/* ---------- hero: packet diagram ---------- */
.cl-pk{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden;font:400 .8rem/1.5 var(--sk-mono)}
.cl-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text-3);font-size:.7rem;letter-spacing:.04em}
.cl-btn{flex:none;padding:.25rem .55rem;border:1px solid var(--sk-line-2);border-radius:3px;background:none;color:var(--sk-text-2);font:500 .68rem var(--sk-mono);cursor:pointer}
.cl-lanes{padding:.6rem .9rem .3rem}
.cl-lane{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.55rem 0}
.cl-lane p{margin:0;line-height:1.25}
.cl-lane b{display:block;font:600 .74rem var(--sk-sans);color:var(--sk-text)}
.cl-lane small{font-size:.62rem;color:var(--sk-text-4)}
.cl-track{position:relative;height:1.9rem;border-bottom:2px dashed #33475a;margin-right:1.6rem}
.cl-srv{position:absolute;right:-1.7rem;bottom:-.95rem;width:1.5rem;height:1.9rem;border:1px solid #4a5d70;border-radius:3px;background:repeating-linear-gradient(180deg,#1d2a36 0 5px,#2c3c4c 5px 6px)}
.cl-pkt{position:absolute;left:0;bottom:.3rem;padding:.12rem .45rem;border-radius:3px;background:var(--sk-ai);color:var(--sk-ink);font:700 .62rem/1.4 var(--sk-mono);white-space:nowrap;animation:clRun 1.5s cubic-bezier(.5,0,.6,1) forwards}
.cl-pkt.home{background:#39c2c9}
.cl-pkt.bad{background:var(--sk-bots)}
@keyframes clRun{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:100%;transform:translateX(-100%);opacity:0}}
.cl-log{border-top:1px dashed var(--sk-line);padding:.7rem .9rem .8rem}
.cl-log-k{margin:0 0 .4rem;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.cl-log ol{margin:0;padding:0;list-style:none;min-height:7.6rem}
.cl-log li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem .6rem;padding:.3rem 0;border-top:1px solid var(--sk-line);font-size:.68rem;color:#b6c3cf}
.cl-log li:first-child{border-top:0}
.cl-log code{overflow-wrap:anywhere}
.cl-log li.new{animation:clIn .45s ease-out}
@keyframes clIn{from{opacity:0;transform:translateY(-6px);background:rgba(235,104,52,.18)}to{opacity:1;transform:none}}

/* ---------- 01: railway points ---------- */
.cl-rww{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.cl-rw{padding:1rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink);background-image:radial-gradient(rgba(238,242,245,.05) 1px,transparent 1px);background-size:16px 16px}
.cl-rw svg{display:block;width:100%;height:auto}
.cl-rails path{fill:none;stroke:#3b4d5f;stroke-width:9;stroke-linecap:round;transition:stroke .35s}
.cl-lbl text{fill:var(--sk-text-3);font:600 17px var(--sk-mono);transition:fill .35s}
.cl-lever circle{fill:#1d2a36;stroke:#6b8196;stroke-width:2}
.cl-lever line{stroke:var(--sk-ai);stroke-width:5;stroke-linecap:round;transition:transform .4s cubic-bezier(.3,1.6,.5,1);transform-origin:0 0}
.cl-wagon rect{fill:var(--sk-ai);stroke:#0f161d;stroke-width:2}
.cl-wagon circle{fill:#0f161d;stroke:#6b8196;stroke-width:2}
.cl-rw[data-state="claudebot"] #cl-in,.cl-rw[data-state="anthropic"] #cl-in,.cl-rw[data-state="search"] #cl-in,.cl-rw[data-state="user"] #cl-in,.cl-rw[data-state="web"] #cl-in,.cl-rw[data-state="click"] #cl-in{stroke:#6b8196}
.cl-rw[data-state="claudebot"] #cl-t0,.cl-rw[data-state="anthropic"] #cl-t0{stroke:var(--sk-ai)}
.cl-rw[data-state="search"] #cl-t1{stroke:#a98bf0}
.cl-rw[data-state="user"] #cl-t2,.cl-rw[data-state="web"] #cl-t2{stroke:#39c2c9}
.cl-rw[data-state="click"] #cl-t3{stroke:var(--sk-people)}
.cl-rw[data-state="claudebot"] .cl-lbl text:nth-child(1),.cl-rw[data-state="anthropic"] .cl-lbl text:nth-child(1),.cl-rw[data-state="search"] .cl-lbl text:nth-child(2),.cl-rw[data-state="user"] .cl-lbl text:nth-child(3),.cl-rw[data-state="web"] .cl-lbl text:nth-child(3),.cl-rw[data-state="click"] .cl-lbl text:nth-child(4){fill:var(--sk-text)}
.cl-rw[data-state="search"] .cl-lever line{transform:rotate(24deg)}
.cl-rw[data-state="user"] .cl-lever line,.cl-rw[data-state="web"] .cl-lever line{transform:rotate(52deg)}
.cl-rw[data-state="click"] .cl-lever line{transform:rotate(80deg)}
.cl-rw[data-state="click"] .cl-wagon rect{fill:var(--sk-people)}
.cl-rw-card{padding:1.2rem 1.3rem;border:1px solid var(--sk-line-2);border-radius:6px;background:var(--sk-ink)}
.cl-rw-card code{display:block;margin-bottom:.8rem;font:400 .78rem/1.5 var(--sk-mono);color:var(--sk-ai);overflow-wrap:anywhere}
.cl-rw-card dl{margin:0}
.cl-rw-card dl div{padding:.55rem 0;border-top:1px solid var(--sk-line)}
.cl-rw-card dt{font:500 .64rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.cl-rw-card dd{margin:.15rem 0 0;color:var(--sk-text-2);font-size:.9rem;line-height:1.5}

/* ---------- 02: the staircase of checks ---------- */
.cl-reqs{display:flex;flex-wrap:wrap;gap:.45rem}
.cl-reqs button{position:relative;overflow:hidden;padding:.55rem .85rem;border:1px solid var(--sk-paper-line);border-radius:4px;background:#fff;color:var(--sk-paper-ink);font:600 .84rem var(--sk-mono);cursor:pointer}
.cl-reqs button[aria-checked="true"]{background:var(--sk-paper-ink);border-color:var(--sk-paper-ink);color:#fff}
.cl-stw{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.cl-st{position:relative;padding:1.2rem 1.3rem 1.4rem;border-radius:8px;background:var(--sk-ink);color:var(--sk-text)}
.cl-st-line{display:block;margin:0 0 1.1rem;font:400 .78rem/1.5 var(--sk-mono);color:var(--sk-text-2);overflow-wrap:anywhere}
.cl-steps{margin:0;padding:0;list-style:none}
.cl-steps li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin-left:calc((var(--i) - 1) * 9%);width:calc(100% - 27%);padding:.75rem .9rem;border-top:3px solid #4a5d70;background:linear-gradient(180deg,#1d2a36,#141d26);transition:border-color .3s,background .3s,opacity .3s}
.cl-steps li[data-s="1"]{--i:1}.cl-steps li[data-s="2"]{--i:2}.cl-steps li[data-s="3"]{--i:3}.cl-steps li[data-s="4"]{--i:4}
.cl-steps li + li{margin-top:.55rem}
.cl-steps b{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#2c3c4c;font:700 .7rem var(--sk-mono)}
.cl-steps span{flex:1 1 12rem;font:600 .88rem var(--sk-sans)}
.cl-steps em{font:500 .74rem var(--sk-mono);font-style:normal;color:#39c2c9}
.cl-steps li.past{border-top-color:#39c2c9}
.cl-steps li.stop{border-top-color:var(--sk-ai);background:linear-gradient(180deg,rgba(235,104,52,.22),#141d26)}
.cl-steps li.stop em{color:var(--sk-ai)}
.cl-steps li.skip{opacity:.38}
.cl-ball{position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#f4b393 40%,var(--sk-ai));box-shadow:0 4px 8px rgba(0,0,0,.5);transition:transform .38s cubic-bezier(.4,1.8,.6,1);will-change:transform;pointer-events:none}
html:not(.js) .cl-ball{display:none}
.cl-vd{padding:1.3rem 1.4rem;border-radius:8px;background:#fff;border-left:6px solid #6b7785;color:var(--sk-paper-ink)}
.cl-vd.is-v{border-left-color:var(--sk-search)}.cl-vd.is-s{border-left-color:var(--sk-bots)}.cl-vd.is-n{border-left-color:#a98bf0}
.cl-vd-k{margin:0;font:600 .64rem var(--sk-mono);letter-spacing:.12em;text-transform:uppercase;color:#6b7785}
.cl-vd-v{margin:.3rem 0 .5rem;font:800 1.6rem/1.1 var(--sk-disp)}
.cl-vd-w{margin:0;color:var(--sk-paper-ink-2);font-size:.92rem;line-height:1.55}
.cl-vd.flash{animation:clIn .4s ease-out}

/* ---------- 03: the bookshelf ---------- */
.cl-bsw{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem;align-items:end}
.cl-bs{position:relative;padding:1.4rem 1.2rem 0;border:1px solid var(--sk-line-2);border-radius:8px;background:linear-gradient(180deg,#141d26,#0f161d)}
.cl-shelf{display:flex;align-items:flex-end;gap:.35rem;height:12.5rem;padding:0 .4rem;overflow:hidden}
.cl-book{--c:#39c2c9;position:relative;flex:0 0 3.1rem;height:var(--h,80%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.6rem 0 .45rem;border-radius:3px 3px 0 0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#000),var(--c) 30%,color-mix(in srgb,var(--c) 80%,#fff) 55%,color-mix(in srgb,var(--c) 70%,#000));box-shadow:inset 0 6px 0 rgba(0,0,0,.18),inset 0 -14px 0 rgba(0,0,0,.18);color:#0f161d;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.cl-book:nth-child(3n+2){--c:#2fa5ab}.cl-book:nth-child(3n){--c:#6fd9de}
.cl-book b{writing-mode:vertical-rl;transform:rotate(180deg);font:700 .74rem var(--sk-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:calc(100% - 2rem)}
.cl-book i{font:700 .56rem var(--sk-mono);font-style:normal;text-align:center;line-height:1.1}
.cl-book.land{--c:var(--sk-ai);transform:translateY(-1.1rem) rotate(-4deg)}
.cl-book.in{animation:clBook .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes clBook{from{transform:translateX(-30px);opacity:0}}
.cl-book.land.in{animation:clBookLand .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes clBookLand{from{transform:translateX(-30px);opacity:0}to{transform:translateY(-1.1rem) rotate(-4deg);opacity:1}}
.cl-empty{align-self:center;margin:0 auto;color:var(--sk-text-4);font:500 .8rem var(--sk-mono)}
.cl-plank{height:.9rem;margin:0 -1.2rem;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#7a5232,#4f3420)}
.cl-bs-say{padding:1.2rem 1.3rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink-2)}
.cl-bs-say p{color:var(--sk-text-2);line-height:1.55}
.cl-bs-h{margin:0 0 .6rem;font:700 1.05rem var(--sk-sans);color:var(--sk-text) !important}
.cl-bs-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1rem 0 0}
.cl-bs-kpi div{padding:.6rem .7rem;border-top:2px solid #39c2c9;background:var(--sk-ink)}
.cl-bs-kpi div:last-child{border-top-color:var(--sk-ai);border-top-style:dashed}
.cl-bs-kpi dt{font:500 .62rem/1.3 var(--sk-mono);color:var(--sk-text-4)}
.cl-bs-kpi dd{margin:.25rem 0 0;font:800 1.4rem var(--sk-disp);color:var(--sk-text)}

/* ---------- 04: MCP chat ---------- */
.cl-qs{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin:1.6rem 0 .8rem}
.cl-qs button{position:relative;overflow:hidden;padding:.6rem .95rem;border:1px solid #4a5d70;border-radius:999px 999px 999px 4px;background:var(--sk-ink);color:var(--sk-text-2);font:600 .9rem var(--sk-sans);text-align:left;cursor:pointer}
.cl-qs button[aria-checked="true"]{background:var(--sk-text);border-color:var(--sk-text);color:var(--sk-ink)}
.cl-mcp{border:1px solid var(--sk-line-2);border-radius:10px;background:#f4f1ea;color:var(--sk-paper-ink);overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.4)}
.cl-mcp-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.3rem 1rem;padding:.6rem .9rem;border-bottom:1px solid #e0d9cb;background:#ebe5d8;font:500 .68rem var(--sk-mono);color:#6b7785}
.cl-mcp-body{padding:1rem 1rem 1.1rem;min-height:26rem}
.cl-you{margin:0 0 .9rem auto;max-width:85%;width:fit-content;padding:.6rem .85rem;border-radius:12px 12px 3px 12px;background:#e3dccd;font:500 .92rem var(--sk-sans)}
.cl-call{margin:0 0 .6rem;padding:.55rem .7rem;border:1px solid #d6cdbb;border-radius:6px;background:#fff}
.cl-call-k{margin:0 0 .2rem;font:600 .6rem var(--sk-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ai-deep,#b4552d)}
.cl-call code{font:400 .72rem/1.45 var(--sk-mono);overflow-wrap:anywhere}
.cl-res{margin:0 0 .8rem;padding:.65rem .75rem;border-radius:6px;background:#1b2631;color:#c9d6e2;font:400 .68rem/1.55 var(--sk-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.cl-res.err{color:#ffcf7a}
.cl-ans{margin:0;font-size:.95rem;line-height:1.55;color:var(--sk-paper-ink)}
.cl-mcp .typing::after{content:'▍';margin-left:1px;animation:clBlink .8s steps(1) infinite}
@keyframes clBlink{50%{opacity:0}}

@media (max-width:1060px){
  .cl-rww,.cl-stw,.cl-bsw{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .cl-lane{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .cl-steps li{width:auto;margin-left:calc((var(--i) - 1) * 4%)}
  .cl-book{flex-basis:2.35rem}
  .cl-book b{font-size:.64rem}
  .cl-shelf{height:13rem;gap:.2rem;padding:0}
  .cl-mcp-body{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .cl-pkt,.cl-log li.new,.cl-book.in,.cl-book.land.in,.cl-vd.flash,.cl-mcp .typing::after{animation:none}
  .cl-ball,.cl-lever line,.cl-book,.cl-steps li,.cl-rails path{transition:none}
}