/* Shared styles for the browser tools at /tools/typing-speed-test and
   /tools/mic-test, in every language. Tokens come from site-ia.css. */
.bt-tool { margin: 0 0 8px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--cue-line-strong); border-radius: var(--r-lg); background: #fff; }
.bt-tool h2 { font-size: clamp(24px, 1.2rem + 1vw, 32px); margin: 0 0 16px; letter-spacing: var(--cue-track-h3); }
.bt-tool h3 { font-size: var(--cue-h3); margin: 0 0 8px; letter-spacing: var(--cue-track-h3); }
.bt-tool p { margin: 0 0 12px; color: var(--cue-muted); font-size: var(--cue-body); line-height: 1.65; }
.bt-tool [hidden] { display: none !important; }
.bt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 18px; }
.bt-label { font-size: var(--cue-small); font-weight: 700; color: var(--cue-ink); }
.bt-select { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--cue-line-strong); border-radius: var(--r-sm); background: #fff; color: var(--cue-ink); font: inherit; font-size: var(--cue-small); }
.bt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--cue-line-strong); border-radius: var(--r-sm); background: #fff; color: var(--cue-ink); font: inherit; font-size: var(--cue-small); font-weight: 700; cursor: pointer; }
.bt-btn:hover { background: var(--cue-surface); }
.bt-btn.primary { border-color: var(--cue-blue); background: var(--cue-blue); color: #fff; }
.bt-btn.primary:hover { border-color: var(--cue-blue-hover); background: var(--cue-blue-hover); }
.bt-btn:is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
.bt-step { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--cue-line); }
.bt-step:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.bt-passage { margin: 0 0 14px !important; padding: 16px 18px; border-radius: var(--r-md); background: var(--cue-surface); color: var(--cue-ink) !important; font-size: clamp(17px, 1rem + .25vw, 19px) !important; line-height: 1.75 !important; overflow-wrap: anywhere; }
.bt-passage .ok { color: #15803d; }
.bt-passage .bad { color: #b91c1c; background: #fee2e2; border-radius: 2px; }
.bt-passage .cur { box-shadow: inset 0 -2px 0 var(--cue-blue); }
.bt-input { display: block; width: 100%; min-height: 112px; padding: 14px 16px; border: 1px solid var(--cue-line-strong); border-radius: var(--r-md); background: #fff; color: var(--cue-ink); font: inherit; font-size: 17px; line-height: 1.6; resize: vertical; }
.bt-input:focus-visible, .bt-select:focus-visible { outline: 3px solid var(--cue-blue); outline-offset: 2px; }
.bt-msg { min-height: 1.4em; margin: 10px 0 0 !important; font-size: var(--cue-xs) !important; color: var(--cue-label) !important; }
.bt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; }
.bt-stats > div { padding: 14px 16px; border: 1px solid var(--cue-line); border-radius: var(--r-md); }
.bt-stats dt { margin: 0 0 4px; font-size: var(--cue-xs); font-weight: 700; color: var(--cue-label); }
.bt-stats dd { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: var(--cue-track-h3); color: var(--cue-ink); overflow-wrap: anywhere; }
.bt-stats dd small { font-size: var(--cue-xs); font-weight: 600; letter-spacing: 0; color: var(--cue-label); }
.bt-clock { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 14px; color: var(--cue-ink); }
.bt-note { padding: 14px 16px; border-radius: var(--r-md); background: var(--cue-blue-surface); color: var(--cue-ink) !important; font-size: var(--cue-small) !important; margin-top: 16px !important; }
.bt-alert { padding: 14px 16px; margin: 0 0 14px !important; border: 1px solid #fecaca; border-radius: var(--r-md); background: #fef2f2; color: #991b1b !important; font-size: var(--cue-small) !important; }
.bt-status { font-size: var(--cue-small) !important; font-weight: 600; color: var(--cue-ink) !important; }
.bt-meter { position: relative; height: 18px; margin: 8px 0 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--cue-surface); box-shadow: inset 0 0 0 1px var(--cue-line-strong); }
.bt-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--cue-blue); transition: width 60ms linear; }
.bt-meter-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--cue-ink); }
.bt-meter[data-level="loud"] .bt-meter-fill { background: #dc2626; }
.bt-meter[data-level="good"] .bt-meter-fill { background: #16a34a; }
.bt-verdict { min-height: 1.6em; font-size: var(--cue-small) !important; font-weight: 600; color: var(--cue-ink) !important; }
.bt-tool audio { display: block; width: 100%; margin: 0 0 12px; }
.bt-table { width: 100%; margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bt-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--cue-small); line-height: 1.55; }
.bt-table th, .bt-table td { padding: 12px 14px; border-bottom: 1px solid var(--cue-line); text-align: left; vertical-align: top; color: var(--cue-muted); }
.bt-table th { color: var(--cue-ink); font-weight: 700; background: var(--cue-surface); }
.bt-table td:first-child { color: var(--cue-ink); font-weight: 600; }
.bt-table a { color: var(--cue-blue); }
.bt-table .td-cue { background: var(--cue-blue-surface); }
.bt-table-hint { display: none; font-size: var(--cue-xs) !important; color: var(--cue-label) !important; margin: 16px 0 0 !important; }
@media (max-width: 720px) { .bt-table-hint { display: block; } .bt-btn { flex: 1 1 auto; } .bt-select { width: 100%; } }
/* On a phone the passage and the field must both stay above the on-screen keyboard. */
@media (max-width: 480px) { .bt-passage { padding: 12px 14px; font-size: 16px !important; line-height: 1.6 !important; } .bt-input { min-height: 84px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .bt-meter-fill { transition: none; } }