/* Browser tools: /tools/, /tools/polling/ and /tools/clicks/. One file, because both measuring pages share
   the big measuring surface, the result card, the stat grid and the SVG chart. Every colour is a style.css
   token, so light and dark follow the rest of the site with no page-local palette. */
.tools{max-width:820px;margin:0 auto}
.document-page .tools h1{margin:0 0 8px}
.tool-crumb{margin:0 0 6px;font-size:var(--fs-sm)}
.tool-crumb a{color:var(--muted);text-decoration:none}
.tool-intro{color:var(--muted);margin:0 0 20px;max-width:60ch;font-size:var(--fs-md)}
.tool-note{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:none}

/* Index. Two big cards, each with a drawn preview of the surface it opens, and one line of what runs where. */
.tools-index{max-width:960px}
.tool-cards{list-style:none;padding:0!important;margin:var(--s-6) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool-cards li{max-width:none}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;padding:22px 24px 24px;text-decoration:none;overflow:hidden;transition:box-shadow var(--fast),transform .18s var(--ease-out),border-color var(--fast)}
.tool-card:active{transform:scale(.99)}
.tool-card>.ui-icon{width:30px;height:30px;flex:0 0 30px;color:var(--accent-text);vertical-align:0;margin-bottom:2px}
.tool-card h2{margin:0;font-size:var(--fs-h2)}
.tool-card p{margin:0;color:var(--muted);font-size:var(--fs-base);max-width:none}
/* The preview: a miniature of the tool's own surface, drawn from the same tokens so it matches the page. */
.tool-preview{width:100%;margin:6px 0 4px;padding:18px 16px 14px;border-radius:var(--r-md);background:var(--ground);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.tool-preview .tool-big{font-family:var(--display);font-size:44px;font-weight:700;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.tool-preview .tool-big small{display:block;font-family:var(--body);font-size:var(--fs-xs);font-weight:600;color:var(--muted);letter-spacing:0;margin-top:4px}
.tool-preview svg{display:block;width:100%;max-width:220px;height:auto}
.tool-preview .bar{fill:color-mix(in srgb,var(--accent) 45%,var(--line-strong))}
.tool-preview .bar.is-top{fill:var(--accent)}
.tool-preview .trace{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-card .tool-open{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.tools-foot{margin:var(--s-8) 0 0;padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-base);color:var(--muted);max-width:70ch}
.tools-foot a{color:var(--ink)}
@media (hover:hover){
  .tool-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .tool-card:hover{box-shadow:var(--elev-2);transform:translateY(-2px);border-color:var(--line-strong)}
}

/* Run length */
.tool-choices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tool-choice{min-height:var(--control-h);padding:0 16px;border-radius:var(--r-pill);font-size:var(--fs-base);font-weight:600;color:var(--muted);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background var(--fast),box-shadow var(--fast),color var(--fast),transform .12s var(--ease-out)}
.tool-choice:active{transform:scale(.97)}
.tool-choice[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (hover:hover){.tool-choice:hover{background:var(--surface-2);color:var(--ink)}}

/* The measuring surface. The polling area and the click target are the same block: a big number, a hint,
   a live line and a progress bar along the top edge that fills over the run. data-state drives the look. */
.capture,.target{position:relative;display:grid;place-content:center;gap:6px;text-align:center;min-height:300px;margin:0;padding:34px 20px 30px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong),var(--elev-1);overflow:hidden;transition:background .2s,box-shadow .2s}
.capture{touch-action:none;cursor:crosshair}
.target{user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer}
.capture[data-state="idle"]{cursor:pointer}
.capture[data-state="running"],.target[data-state="running"]{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:inset 0 0 0 1.5px var(--accent)}
.capture[data-state="done"],.target[data-state="done"]{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.target.is-hit{animation:hit .18s var(--ease-out)}
@keyframes hit{from{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}}
.capture-progress{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--line);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .1s linear;pointer-events:none}
.capture[data-state="running"] .capture-progress,.target[data-state="running"] .capture-progress{background:var(--accent)}
.capture[data-state="done"] .capture-progress,.target[data-state="done"] .capture-progress{background:var(--line-strong)}
.capture-rate{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(64px,14vw,104px);line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.capture-rate small{display:block;font-family:var(--body);font-size:var(--fs-base);font-weight:600;color:var(--muted);letter-spacing:0;margin-top:6px}
.capture-hint{margin:6px 0 0;font-size:var(--fs-lg);font-weight:500;color:var(--ink);max-width:none}
.capture-live{margin:0;font-size:var(--fs-sm);color:var(--muted);max-width:none;font-variant-numeric:tabular-nums;min-height:20px}
.capture[data-state="idle"] .capture-rate{color:var(--line-strong)}
.target[data-state="idle"] .capture-rate{color:var(--line-strong)}
.capture-button{margin:14px auto 0}
.capture[data-state="running"] .capture-button{display:none}

/* Result card */
.result{margin:16px 0 0;padding:20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--elev-1)}
.result-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px}
.result-head h2{margin:0;font-size:24px}
.result-verdict{margin:0;font-size:var(--fs-md);color:var(--muted);max-width:none}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;list-style:none;padding:0!important}
.stat{padding:12px 14px;border-radius:var(--r-md);background:var(--ground);max-width:none}
.stat-label{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--muted);max-width:none}
.stat-value{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:none}
.stat-value small{font-family:var(--body);font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-left:5px}

/* Inline SVG charts. The viewBox is fixed at 640 wide; the chart scales with the card. */
.chart{margin:14px 0 0;padding:8px 4px 0;border-radius:var(--r-md);background:var(--ground);overflow:hidden}
.chart:empty{display:none}
.chart svg{display:block;width:100%;height:auto}
.chart .bar{fill:color-mix(in srgb,var(--accent) 45%,var(--line-strong))}
.chart .bar.is-top{fill:var(--accent)}
.chart .value{fill:var(--ink);font-family:var(--body);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.chart .axis{fill:var(--muted);font-family:var(--body);font-size:12px}
.chart-caption{margin:8px 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:none}
.tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}

/* Flagged presses */
.flag-list{list-style:none;padding:0!important;margin:14px 0 0;display:grid;gap:6px}
.flag-list li{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 12px;border-radius:var(--r-md);background:var(--ground);font-size:var(--fs-sm)}
.flag-time{font-weight:600;font-variant-numeric:tabular-nums;min-width:52px}
.flag-gap{color:var(--muted);font-variant-numeric:tabular-nums}

/* The honest limits, one paragraph, always in the page so it survives a script failure. */
.tool-limits{margin:22px 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:70ch}

@media(max-width:520px){
 .tool-cards{grid-template-columns:1fr}
 .tool-card{padding:18px 18px 20px}
 .capture,.target{min-height:260px;padding:30px 16px 26px;border-radius:var(--r-lg)}
 .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat-value{font-size:26px}
 .result{padding:16px}
 .tool-choice{flex:1 1 calc(50% - 4px);justify-content:center}
 .tool-actions .button{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.tool-card:hover{transform:none}}