/* Homepage showroom (index.html only): the five-step loop on top of a working dashboard preview,
   plus the request path above "Where the milliseconds go". Colors come from the site tokens; the only
   local tokens are the cause colors (hosting / website / app / third-party), defined for both themes. */
.dash{--c-hosting:var(--amber);--c-website:var(--info);--c-application:#B794F6;--c-third:#7D8AA6}
html[data-theme=light] .dash{--c-application:#7C4DDB;--c-third:#8F9AAE}

/* ---------- Deck: the steps and the window read as one instrument ---------- */
.deck{border:1px solid var(--line);border-radius:calc(var(--r) + 4px);overflow:hidden;background:var(--ink-1);box-shadow:var(--shadow-md)}
.deck .eco{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.deck .eco-i{padding:18px 20px 20px;gap:8px}
.deck .eco-i h3{font-size:16.5px}
.deck .eco-i p{font-size:13.5px;line-height:1.5}
.eco-i .step-n{display:block}
/* Tablet and phone: the five steps become one swipeable row, so the window stays near the top */
@media (max-width:1020px){
  .deck .eco{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .deck .eco::-webkit-scrollbar{display:none}
  .deck .eco-i{flex:0 0 min(270px,74%);scroll-snap-align:start;border-left:1px solid var(--line);border-top:0}
  .deck .eco-i:first-child{border-left:0}
  .deck .eco-i:last-child{grid-column:auto}
}

/* ---------- Window ---------- */
.dash{background:var(--ink-0)}
.dash-bar{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 16px;background:var(--ink-1);border-bottom:1px solid var(--line)}
.dash-id{display:flex;align-items:center;gap:10px;min-width:0}
.dash-fav{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--ink-3);border:1px solid var(--line-2);font:750 12px/1 var(--display);color:var(--fg)}
.dash-site{font:500 14px/1 var(--mono);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--go-line);background:var(--go-dim);color:var(--go);font:500 12px/1 var(--mono);cursor:pointer;transition:background .2s}
.dash-status:hover{background:color-mix(in srgb,var(--go) 16%,transparent)}
.dash-status svg{transition:transform .2s var(--ease)}
.dash-status[aria-expanded=true] svg{transform:rotate(180deg)}
.dash-status .dot{width:6px;height:6px;box-shadow:0 0 0 3px var(--go-dim)}
.dash-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-dev button{height:28px;padding:0 12px;font-size:12.5px}
.dash-when b{color:var(--fg-2);font-weight:500}
.dash-checks{border-bottom:1px solid var(--line);background:var(--ink-1)}
.dash-checks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dash-checks li{display:grid;gap:5px;padding:12px 16px;border-left:1px solid var(--line);animation:sr-in .25s var(--ease) both}
.dash-checks li:first-child{border-left:0}
.dash-checks b{font:500 14px/1.2 var(--mono)}
@media (max-width:900px){.dash-checks ul{grid-template-columns:1fr 1fr}.dash-checks li:nth-child(3){border-left:0}.dash-checks li:nth-child(n+3){border-top:1px solid var(--line)}}
.dash-tabs{display:none;margin:12px 12px 0}
.dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;padding:12px}
.pane{grid-column:span 12;container-type:inline-size;display:grid;gap:16px;align-content:start;min-width:0;padding:18px 20px 20px;background:var(--ink-1);border:1px solid var(--line);border-radius:12px;transition:opacity .25s,box-shadow .25s,border-color .25s}
.pane[data-pane=health]{grid-column:span 7}
.pane[data-pane=audit]{grid-column:span 5}
@media (max-width:1099px){.pane[data-pane=health]{grid-column:span 12}.pane[data-pane=history]{grid-column:span 7;grid-row:2}.pane[data-pane=audit]{grid-column:span 5;grid-row:2}}
@media (max-width:759px){
  .dash-tabs{display:flex}.dash-tabs button{flex:1}
  .dash-grid{padding:12px}
  .pane{display:none}
  .dash[data-view=health] .pane[data-pane=health],.dash[data-view=audit] .pane[data-pane=audit],.dash[data-view=history] .pane[data-pane=history]{display:grid;grid-column:span 12;grid-row:auto}
  .dash-when{display:none}
  .dash-bar{padding:10px 12px}
}
/* A step above the window lights the part of the product it describes */
.dash[data-focus] .pane{opacity:.42}
.dash[data-focus=health] .pane[data-pane=health],.dash[data-focus=audit] .pane[data-pane=audit],.dash[data-focus=history] .pane[data-pane=history]{opacity:1;border-color:var(--amber-line);box-shadow:0 0 0 4px var(--amber-dim)}

.pane-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pane-h .stage{margin-bottom:9px}
.pane-h h3{font-size:18px;font-stretch:112%;letter-spacing:-.01em}
.pane-n{padding-top:4px}
.dash .area{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.k-cap,.ap-k{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* Score ring sizes (the ring itself is the audit report's .rp-ring) */
.sr-ring.md{width:112px;height:112px}.sr-ring.md b{font-size:36px}
.sr-ring.sm{width:84px;height:84px}.sr-ring.sm b{font-size:27px}
.sr-ring circle{stroke-width:9}
.sr-ring .fg{transition:stroke-dashoffset .6s var(--ease),stroke .3s}

/* ---------- 1. Website health ---------- */
.wh-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.wh-vitals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vt{position:relative;display:grid;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink-0);cursor:default;transition:border-color .2s,background .2s}
.vt:hover,.vt:focus-visible{border-color:var(--line-2);background:var(--ink-2)}
.vt-k{display:flex;justify-content:space-between;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--fg-3)}
.vt-k .st{font-size:10.5px;letter-spacing:.02em}
.vt-v{display:flex;align-items:baseline;gap:4px}
.vt-v b{font:500 24px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vt-v small{font:400 12px/1 var(--mono);color:var(--fg-3)}
.vt-tip{position:absolute;left:0;bottom:calc(100% + 8px);width:min(260px,70vw);z-index:6;padding:9px 11px;border-radius:9px;background:var(--elevated);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);font:400 12.5px/1.45 var(--sans);color:var(--fg-2);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s,transform .15s}
.vt:nth-child(even) .vt-tip{left:auto;right:0}
.vt:hover .vt-tip,.vt:focus-visible .vt-tip{opacity:1;transform:none}
.wh-bd{display:grid;gap:12px}
.wh-bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-2)}
.wh-bh b{font:500 14px/1 var(--mono);color:var(--fg)}
.wh-legend{display:flex;gap:12px;font:400 11.5px/1 var(--mono);color:var(--fg-3)}
.wh-legend span{display:inline-flex;align-items:center;gap:6px}
.wh-legend span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.hosting{--c:var(--c-hosting)} .website{--c:var(--c-website)} .application{--c:var(--c-application)} .third{--c:var(--c-third)}
.wh-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;cursor:pointer}
.wh-bar i{flex-basis:0;min-width:3px;background:var(--c);transform-origin:left;transition:opacity .2s,filter .2s}
.dash.in .wh-bar i{animation:sr-grow .7s var(--ease) both}
.wh-bar i:nth-child(2){animation-delay:.05s}.wh-bar i:nth-child(3){animation-delay:.1s}.wh-bar i:nth-child(4){animation-delay:.15s}.wh-bar i:nth-child(5){animation-delay:.2s}.wh-bar i:nth-child(6){animation-delay:.25s}
.hov .wh-bar i:not(.hi){opacity:.28}
.wh-rows{list-style:none;margin:0;padding:0}
.wh-rows li{border-top:1px solid var(--line)}
.wh-rows button{display:grid;grid-template-columns:10px minmax(0,1fr) auto 62px 36px;gap:10px;align-items:center;width:100%;padding:8px 6px;margin:0;border:0;border-radius:6px;background:none;color:var(--fg);font:400 13.5px/1.3 var(--sans);text-align:left;cursor:pointer;transition:background .15s}
.wh-rows li.hi button,.wh-rows button:hover{background:var(--ink-2)}
.wh-rows .sw{width:10px;height:10px;border-radius:3px;background:var(--c)}
.wh-rows b{font-size:13px;font-weight:500;text-align:right}
.wh-pc{font-size:12px;color:var(--fg-3);text-align:right}
.wh-rows li.open .wh-l{font-weight:600}
.wh-budget{display:grid;gap:10px;padding-top:4px}
.wh-budget .go{color:var(--go)}
.wh-meter{position:relative;height:8px;border-radius:4px;background:var(--ink-3)}
.wh-meter i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);border-radius:4px;background:linear-gradient(90deg,var(--amber),var(--amber-2));transition:width .6s var(--ease)}
.wh-line{position:absolute;right:0;top:-4px;bottom:-4px;border-left:1.5px dashed var(--go)}
.wh-more{margin:0;padding:2px 6px 12px 26px;font-size:13px;line-height:1.5;color:var(--fg-2);animation:sr-in .2s var(--ease) both}
@container (max-width:380px){.wh-top{grid-template-columns:1fr;justify-items:start}.wh-vitals{width:100%}.wh-rows .area{display:none}.wh-rows button{grid-template-columns:10px minmax(0,1fr) 56px 32px}}

/* ---------- 2. Performance history ---------- */
.ph-ctl{display:flex;gap:8px;flex-wrap:wrap}
.seg-ctl.sm button{height:26px;padding:0 10px;font-size:12px}
.ph-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}
@container (max-width:700px){.ph-body{grid-template-columns:1fr}.ph-trend{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:470px){.ph-trend{grid-template-columns:1fr}}
.ph-chart{position:relative;min-width:0}
.ph-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;cursor:crosshair;border-radius:6px}
.ph-svg text{font:400 10.5px var(--mono);fill:var(--fg-3)}
.ph-svg .gl{stroke:var(--chart-grid);stroke-width:1}
.ph-svg .before{fill:color-mix(in srgb,var(--fg-3) 7%,transparent)}
.ph-svg .af{fill:var(--amber-wash)}
.ph-svg .ln{fill:none;stroke:var(--chart-line);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .2s}
.ph-svg .ev line{stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 3;transition:stroke .2s}
.ph-svg .ev text{fill:var(--fg-2);font-size:10.5px}
.ph-svg .ev.move line{stroke:var(--fg-3)}
.ph-svg .lim line{stroke:var(--go);stroke-width:1.5;stroke-dasharray:5 4;transition:stroke-width .2s}
.ph-svg .lim text{fill:var(--go)}
.ph-svg .cx,.ph-svg .cd{opacity:0;transition:opacity .12s}
.scrub .ph-svg .cx,.scrub .ph-svg .cd{opacity:1}
.ph-svg .cx{stroke:var(--fg-3);stroke-width:1;stroke-dasharray:2 3;pointer-events:none}
.ph-svg .cd{fill:var(--ink-1);stroke:var(--chart-line);stroke-width:2;pointer-events:none}
.ph-svg .end{fill:var(--chart-line);stroke:var(--amber-dim);stroke-width:7;paint-order:stroke}
.scrub .ph-svg .end{opacity:0}
[data-hl=move] .ev.move line,[data-hl=verify] .ev.move line{stroke:var(--amber);stroke-dasharray:none}
[data-hl=move] .ev.move text,[data-hl=verify] .ev.move text{fill:var(--amber)}
[data-hl=limit] .lim line{stroke-width:3}
[data-hl=verify] .ln{stroke-width:3}
.ph-tip{position:absolute;z-index:4;display:grid;gap:3px;min-width:120px;padding:8px 10px;border-radius:9px;background:var(--elevated);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);transform:translate(-50%,calc(-100% - 14px));opacity:0;pointer-events:none;transition:opacity .12s;font:400 11px/1.3 var(--mono);color:var(--fg-3);white-space:nowrap}
.ph-tip.on{opacity:1}
.ph-tip b{font:500 15px/1.1 var(--mono);color:var(--fg)}
.ph-tip .ph-phase{color:var(--amber)}
.ph-trend{display:grid;gap:8px}
.tr-i{display:grid;gap:6px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink-0);color:var(--fg);text-align:left;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.tr-i:hover{background:var(--ink-2)}
.tr-i.on{border-color:var(--amber-line);background:var(--amber-wash)}
.tr-k{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.tr-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:12.5px;color:var(--fg-2)}
.tr-v .was{color:var(--fg-3)}
.tr-v .ar{color:var(--fg-3);font-size:11px}
.tr-v b{font-size:15px;font-weight:500}
.tr-n{font-size:11px;color:var(--fg-3)}

/* ---------- 3. Audit preview ---------- */
.ap-id{display:grid;gap:4px}
.ap-id b{font:500 15px/1.2 var(--mono)}
.ap-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.ap-cwv{display:grid;gap:8px;justify-items:start}
.ap-v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 0;width:100%}
.ap-v div{display:grid;gap:4px}
.ap-v dt{font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--fg-3)}
.ap-v dd{margin:0;font-size:15px;font-weight:500}
.ap-slow ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.ap-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-t{font-size:13.5px;font-weight:500;margin-right:auto}
.ap-row .imp{height:20px;padding:0 8px;font-size:10.5px}
.ap-bar{display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:10px;margin-top:6px}
.ap-bar i{display:block;height:6px;width:var(--w);border-radius:3px;background:var(--c);transform-origin:left}
.dash.in .ap-bar i{animation:sr-grow .8s var(--ease) both}
.ap-bar b{font-size:12px;font-weight:500;color:var(--fg-2);text-align:right}
.ap-none{font-size:13.5px;color:var(--fg-2)}
.ap-pri{display:grid;gap:5px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--ink-0)}
.ap-pri b{font:700 16px/1.25 var(--display);font-stretch:110%;letter-spacing:-.01em}
.ap-go{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ap-sec{font-size:11px;color:var(--fg-3)}
.ap-cap{display:flex;gap:8px;align-items:baseline;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px}
.ap-cap .dot{width:6px;height:6px;flex:none;position:relative;top:-1px}

/* ---------- Request path (stack section) ---------- */
.rpath{position:relative;display:flex;align-items:center;margin-bottom:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-1);container-type:inline-size;overflow:hidden}
.rpath .pn{position:relative;z-index:1;flex:none;padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-0);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);transition:color .2s,border-color .2s,background .2s}
.rpath .pn.on{color:var(--amber);border-color:var(--amber-line);background:var(--amber-dim)}
.rpath .pn.end{color:var(--go);border-color:var(--go-line);background:var(--go-dim)}
.rpath i{flex:1;min-width:10px;height:1px;background:var(--line-2)}
.rpath .pulse{position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);opacity:0;pointer-events:none}
.rpath.run:not(.hold) .pulse{animation:rp-run 2.8s linear infinite}
@keyframes rp-run{0%{transform:translateX(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(calc(100cqw - 36px));opacity:0}}
@media (max-width:900px){.rpath{flex-wrap:wrap;gap:8px 6px}.rpath i{flex:none;min-width:0;height:auto;background:none;color:var(--fg-3);font:400 11px/1 var(--mono)}.rpath i::before{content:"\2192"}.rpath .pulse{display:none}}

@keyframes sr-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes sr-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dash.in .wh-bar i,.dash.in .ap-bar i,.wh-more,.dash-checks li{animation:none}.rpath .pulse{display:none}}