/* 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:13px}
.tool-crumb a{color:var(--muted);text-decoration:none}
.tool-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tool-intro{color:var(--muted);margin:0 0 20px;max-width:60ch}
.tool-note{margin:10px 0 0;font-size:13px;color:var(--muted);max-width:none}

/* Index cards */
.tool-cards{list-style:none;padding:0!important;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool-cards li{max-width:none}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;padding:24px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:background .15s,box-shadow .15s,transform .12s var(--ease-out)}
.tool-card:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.tool-card:active{transform:scale(.99)}
.tool-card>.ui-icon{width:30px;height:30px;flex:0 0 30px;color:var(--accent);vertical-align:0;margin-bottom:4px}
.tool-card h2{margin:0;font-size:26px}
.tool-card p{margin:0;color:var(--muted);font-size:14px;max-width:none}

/* Run length */
.tool-choices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tool-choice{min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .15s,box-shadow .15s,color .15s,transform .12s var(--ease-out)}
.tool-choice:hover{background:var(--surface-2);color:var(--ink)}
.tool-choice:active{transform:scale(.97)}
.tool-choice[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:inset 0 0 0 1.5px var(--accent)}

/* 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:18px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);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:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:6px}
.capture-hint{margin:6px 0 0;font-size:16px;font-weight:500;color:var(--ink);max-width:none}
.capture-live{margin:0;font-size:13px;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;text-decoration:none}
.capture[data-state="running"] .capture-button{display:none}

/* Result card */
.result{margin:16px 0 0;padding:20px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.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:15px;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:12px;background:var(--ground);max-width:none}
.stat-label{margin:0;font-size:12px;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:12px;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:12px;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:13px;color:var(--muted);max-width:none}
.tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}
.tool-actions .button{text-decoration:none}

/* 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:10px;background:var(--ground);font-size:13px}
.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:13px;color:var(--muted);max-width:70ch}

@media(max-width:600px){
 .tool-cards{grid-template-columns:1fr}
 .tool-card{padding:20px}
 .capture,.target{min-height:260px;padding:30px 16px 26px;border-radius:16px}
 .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%}
}