/* /ai-traffic-analytics/crawl-health/ only: the crawler race, the punch card, the path matcher,
   the threshold strip and the nested boxes. */

/* ---------- hero: crawler race ---------- */
.ch-race{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden;font:400 .8rem/1.5 var(--sk-mono)}
.ch-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}
.ch-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}
.ch-lanes{position:relative;margin:0;padding:.9rem .9rem .4rem;list-style:none}
.ch-lanes::after{content:'';position:absolute;top:.6rem;bottom:0;right:calc(.9rem + 3.2rem - 3px);width:6px;background:repeating-linear-gradient(180deg,var(--sk-text) 0 6px,#0a0f14 6px 12px);opacity:.75}
.ch-lanes li{display:grid;grid-template-columns:7.2rem minmax(0,1fr) 2.6rem;gap:.6rem;align-items:center;padding:.38rem 0}
.ch-lanes b{font:600 .72rem var(--sk-mono);color:var(--sk-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-lanes li.ai b{color:#ffc4a8}
.ch-trk{position:relative;height:1.5rem;border-radius:3px;background:repeating-linear-gradient(90deg,#1a2632 0 calc(100% / 16 - 2px),#0a0f14 calc(100% / 16 - 2px) calc(100% / 16))}
.ch-run{position:absolute;left:0;top:0;bottom:0;width:calc(var(--c,.5) * 100%);border-radius:3px;background:linear-gradient(90deg,rgba(27,175,122,.15),rgba(27,175,122,.55));transition:width 1.8s cubic-bezier(.3,.7,.3,1)}
.ch-lanes li.ai .ch-run{background:linear-gradient(90deg,rgba(235,104,52,.15),rgba(235,104,52,.6))}
.ch-run i{position:absolute;right:-.6rem;top:50%;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sk-text);color:var(--sk-ink);font:700 .58rem/1.2rem var(--sk-mono);font-style:normal;text-align:center;transform:translateY(-50%);box-shadow:0 0 0 3px var(--sk-deep)}
.ch-lanes em{font:700 .78rem var(--sk-mono);font-style:normal;color:var(--sk-text);text-align:right;transition:opacity .4s}
.ch-race.go .ch-run{width:0;transition:none}
.ch-race.go em{opacity:0}
.ch-flag{display:flex;align-items:center;gap:.5rem;margin:0;padding:.6rem .9rem .8rem;color:var(--sk-text-4);font-size:.64rem}
.ch-flag span{width:.9rem;height:.6rem;background:conic-gradient(var(--sk-text) 25%,#0a0f14 0 50%,var(--sk-text) 0 75%,#0a0f14 0);background-size:.3rem .3rem;border:1px solid var(--sk-text-3)}

/* ---------- 01: punch card ---------- */
.ch-crs{flex-wrap:wrap}
.ch-pcw{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:1.6rem}
.ch-pc{padding:1rem .9rem;border-radius:6px;background:#efe6cf;color:#3b2f1d;box-shadow:0 18px 40px rgba(0,0,0,.4);background-image:linear-gradient(90deg,transparent 7.4rem,rgba(176,64,26,.25) 7.4rem,rgba(176,64,26,.25) calc(7.4rem + 1px),transparent calc(7.4rem + 1px))}
.ch-tr{display:grid;grid-template-columns:7rem repeat(16,minmax(0,1fr)) 3.2rem;gap:3px;align-items:center;padding:.22rem 0;border-radius:4px;transition:background .3s}
.ch-tr>span:first-child{font:600 .72rem var(--sk-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-th span{font:600 .58rem var(--sk-mono);text-align:center;color:#7a6a4e}
.ch-th span:first-child{text-align:left}
.ch-h{position:relative;display:block;aspect-ratio:1/1.4;border-radius:2px;background:rgba(59,47,29,.08)}
.ch-h::after{content:'';position:absolute;inset:18% 22%;border-radius:2px;background:#121b24;transform:scale(0);transition:transform .28s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 28ms)}
.ch-pc[data-state="30"] .h30::after,.ch-pc[data-state="7"] .h7::after{transform:scale(1)}
.ch-cv{text-align:right;font:700 .72rem var(--sk-mono)}
.ch-cv .c7,.ch-pc[data-state="7"] .ch-cv .c30{display:none}
.ch-pc[data-state="7"] .ch-cv .c7{display:inline}
.ch-pcw[data-state="google"] [data-cr="google"],.ch-pcw[data-state="bing"] [data-cr="bing"],.ch-pcw[data-state="cguser"] [data-cr="cguser"],
.ch-pcw[data-state="gptbot"] [data-cr="gptbot"],.ch-pcw[data-state="claudebot"] [data-cr="claudebot"],.ch-pcw[data-state="pxuser"] [data-cr="pxuser"]{background:rgba(176,64,26,.14);box-shadow:inset 3px 0 0 #b0401a}
.ch-pcw[data-state="google"] [data-cr="google"] .ch-h:not(.h30)::before,.ch-pcw[data-state="bing"] [data-cr="bing"] .ch-h:not(.h30)::before,
.ch-pcw[data-state="cguser"] [data-cr="cguser"] .ch-h:not(.h30)::before,.ch-pcw[data-state="gptbot"] [data-cr="gptbot"] .ch-h:not(.h30)::before,
.ch-pcw[data-state="claudebot"] [data-cr="claudebot"] .ch-h:not(.h30)::before,.ch-pcw[data-state="pxuser"] [data-cr="pxuser"] .ch-h:not(.h30)::before{content:'';position:absolute;inset:0;border:2px dashed #b0401a;border-radius:2px}
.ch-orph{padding:1.1rem 1.2rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink)}
.ch-k{margin:0 0 .6rem;font:500 .64rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.ch-orph ol{margin:0;padding:0;list-style:none}
.ch-orph li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .6rem;padding:.45rem 0;border-top:1px solid var(--sk-line);font:400 .76rem var(--sk-mono);color:var(--sk-text-2)}
.ch-orph li:first-child{border-top:0}
.ch-hint{margin:.8rem 0 0;font-size:.82rem;line-height:1.5;color:var(--sk-text-3)}
.ch-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.15rem 1rem;margin:1rem 0 0;padding:0;list-style:none;font:400 .66rem var(--sk-mono);color:var(--sk-text-4)}
.ch-key b{display:inline-block;min-width:1.4rem;color:var(--sk-text-3)}

/* ---------- 02: path matcher ---------- */
.ch-pms{flex-wrap:wrap}
.ch-pms .seg{font-family:var(--sk-mono);font-size:.76rem}
.ch-pmw{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:1.6rem}
.ch-pm{margin:0;padding:1.2rem 1.3rem;border-radius:10px;background:var(--sk-paper-ink);color:#dfe7ee}
.ch-pm-in{display:grid;grid-template-columns:minmax(0,1fr) 8rem;gap:.8rem}
.ch-pm label span{display:block;margin-bottom:.3rem;font:600 .74rem var(--sk-sans);color:#b8c4cf}
.ch-pm input,.ch-pm select{width:100%;padding:.55rem .7rem;border:1px solid #4a5d70;border-radius:5px;background:var(--sk-deep);color:var(--sk-text);font:400 .85rem var(--sk-mono)}
.ch-pm input:focus,.ch-pm select:focus{outline:2px solid var(--sk-ai);outline-offset:1px}
.ch-strip{margin-top:1.2rem;padding:.8rem .9rem;border-radius:6px;background:var(--sk-deep);overflow-x:auto}
.ch-strip p{display:flex;align-items:center;gap:.6rem;margin:0;padding:.2rem 0}
.ch-strip i{flex:none;width:4rem;font:500 .6rem var(--sk-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-4)}
.ch-strip span{display:flex;flex-wrap:nowrap;gap:2px}
.ch-strip b{display:inline-block;width:1.15rem;height:1.5rem;border-radius:3px;font:700 .8rem/1.5rem var(--sk-mono);text-align:center}
.ch-strip b.ok{background:#123323;color:#8fe3b4}
.ch-strip b.no{background:#3a1a10;color:#ffb38f;box-shadow:inset 0 0 0 1px #b0401a}
.ch-strip b.gap{background:none;color:#4a5d70;box-shadow:inset 0 0 0 1px dashed #4a5d70;outline:1px dashed #4a5d70;outline-offset:-1px}
.ch-strip b.cut{background:#26333f;color:#6b8196;text-decoration:line-through}
.ch-strip b.in{animation:chIn .3s ease-out both}
@keyframes chIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ch-pmv{padding:1.2rem 1.3rem;border-left:4px solid var(--sk-bots);border-radius:6px;background:#fff;color:var(--sk-paper-ink);box-shadow:0 10px 30px rgba(23,33,43,.1)}
.ch-pmv .ch-k{color:#6b7785}
.ch-pmv h3{margin:0 0 .5rem;font:800 1.4rem/1.2 var(--sk-disp)}
.ch-pmv p:last-child{margin:0;line-height:1.55;color:var(--sk-paper-ink-2)}
.ch-pmv.ok{border-left-color:#2c8a5a}
.ch-pmv.out{border-left-color:#8193a5}

/* ---------- 03: threshold strip ---------- */
.ch-tsw{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:1.6rem}
.ch-ts{padding:.8rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink-2)}
.ch-ts svg{display:block;width:100%;height:auto}
.ch-zone{fill:transparent;transition:fill .4s}
.ch-ts[data-state="slow"] .ch-zone.slow{fill:rgba(237,161,0,.1)}
.ch-ts[data-state="large"] .ch-zone.large{fill:rgba(237,161,0,.1)}
.ch-th{stroke:var(--sk-bots);stroke-width:1.5;stroke-dasharray:5 4}
.ch-axl{stroke:#4a5d70}
.ch-tl{fill:var(--sk-bots);font:600 11px var(--sk-mono)}
.ch-al{fill:var(--sk-text-4);font:400 10px var(--sk-mono)}
.ch-dot circle{fill:#33475a;stroke:none;transition:fill .35s,r .35s,opacity .35s}
.ch-dot.li circle{stroke:#8193a5;stroke-width:1.5}
.ch-ts[data-state="nf"] .k-nf circle,.ch-ts[data-state="se"] .k-se circle,.ch-ts[data-state="rd"] .k-rd circle,
.ch-ts[data-state="slow"] .k-slow circle,.ch-ts[data-state="large"] .k-large circle{fill:var(--sk-bots);r:8}
.ch-ts[data-state="nf"] .k-nf.li circle,.ch-ts[data-state="se"] .k-se.li circle,.ch-ts[data-state="rd"] .k-rd.li circle,
.ch-ts[data-state="slow"] .k-slow.li circle,.ch-ts[data-state="large"] .k-large.li circle{stroke:#fff;stroke-width:3}
.ch-pl{padding:1.1rem 1.2rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink)}
.ch-tbl{width:100%;border-collapse:collapse;font:400 .74rem var(--sk-mono);color:var(--sk-text-2)}
.ch-tbl th{padding:.35rem .3rem;border-bottom:1px solid var(--sk-line-2);font-weight:500;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-4);text-align:left}
.ch-tbl td{padding:.45rem .3rem;border-bottom:1px solid var(--sk-line);overflow-wrap:anywhere;vertical-align:top}
.ch-tbl td.y{color:var(--sk-bots);font-weight:700}

/* ---------- 04: nested boxes ---------- */
.ch-sms{flex-wrap:wrap}
.ch-nb{position:relative;font:400 .74rem/1.45 var(--sk-mono)}
.ch-box{padding:.6rem .7rem .7rem;border:1px solid #4a5d70;border-radius:8px;background:rgba(255,255,255,.025);transition:opacity .4s,border-color .4s,background .4s}
.ch-box .ch-box{margin-top:.55rem}
.ch-box p{display:flex;flex-wrap:wrap;gap:.1rem .7rem;margin:0}
.ch-box b{color:var(--sk-text);font-weight:600;overflow-wrap:anywhere}
.ch-box p>span{color:var(--sk-text-4)}
.ch-box.b2{border-color:#2a78d6}.ch-box.b3{border-color:#6aa5ee}.ch-box.b4{border-color:#39c2c9}.ch-box.b5{border-color:var(--sk-search)}
.ch-say{display:none}
.ch-nb[data-state="off"] .s-off,.ch-nb[data-state="dtd"] .s-dtd,.ch-nb[data-state="fail"] .s-fail,.ch-nb[data-state="none"] .s-none{display:inline;color:var(--sk-bots) !important;font-weight:600}
.ch-list{display:flex;flex-direction:column;gap:.2rem;margin-top:.7rem;padding:.6rem .7rem;border:1px dashed var(--sk-search);border-radius:8px;transition:opacity .4s}
.ch-list b{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-search)}
.ch-list code{color:var(--sk-text-2);overflow-wrap:anywhere}
.ch-nb .shut{opacity:.22;background:none}
.ch-nb .shut .ch-box{opacity:1}
.ch-nb[data-state="none"] .b2,.ch-nb[data-state="fail"] .b3,.ch-nb[data-state="dtd"] .b5{opacity:.22}
.ch-nb[data-state="none"] .ch-list,.ch-nb[data-state="dtd"] .ch-list{opacity:.3}
.ch-nb[data-state="fail"] .ch-list code::before{content:'yesterday\'s list · '}
.ch-nb .pop{animation:chPop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes chPop{from{transform:scale(.97);border-color:var(--sk-text)}to{transform:none}}
.ch-nbv{margin-top:1rem;padding:1rem 1.1rem;border-left:4px solid var(--sk-search);border-radius:6px;background:var(--sk-ink)}
.ch-nbv h3{margin:0 0 .4rem;font:800 1.2rem var(--sk-disp);color:var(--sk-text)}
.ch-nbv p{margin:0;color:var(--sk-text-2);line-height:1.5}

@media (max-width:1060px){
  .ch-pcw,.ch-pmw,.ch-tsw{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ch-lanes li{grid-template-columns:5.4rem minmax(0,1fr) 2.3rem;gap:.4rem}
  .ch-lanes b{font-size:.62rem}
  .ch-lanes::after{right:calc(.9rem + 2.7rem - 3px)}
  .ch-pc{padding:.7rem .5rem;background-image:none}
  .ch-tr{grid-template-columns:4.4rem repeat(16,minmax(0,1fr)) 2.3rem;gap:2px}
  .ch-tr>span:first-child{font-size:.56rem}
  .ch-th span{font-size:.44rem}
  .ch-cv{font-size:.58rem}
  .ch-key{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-pm-in{grid-template-columns:minmax(0,1fr)}
  .ch-strip b{width:.95rem;height:1.3rem;font-size:.68rem;line-height:1.3rem}
  .ch-strip i{width:3.2rem}
}
@media (prefers-reduced-motion:reduce){
  .ch-run,.ch-h::after,.ch-dot circle,.ch-box,.ch-list,.ch-zone{transition:none}
  .ch-strip b.in,.ch-nb .pop{animation:none}
}
