/* Browser tools: mic test, speaker test, vibration test, APNs payload tester.
   Loaded only on those four pages. Uses the site tokens. */
.wt-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wt-btns .btn { min-height: 44px; }
.wt-status { margin: 0; min-height: 1.5em; font-weight: 600; }
.wt-meter { position: relative; height: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.wt-bar { height: 100%; width: 0; background: var(--text-3); transition: width 60ms linear; }
.wt-bar.is-ok { background: var(--ok); }
.wt-bar.is-clip { background: var(--bad); }
.wt-readout { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 0.9rem; }
.wt-wave { display: block; width: 100%; height: 120px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent); }
.tool audio { width: 100%; }
.wt-check { display: flex !important; gap: 0.5rem; align-items: center; font-size: 0.9rem !important; }
.wt-check input { width: auto !important; }
.wt-track { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.wt-track .on { background: var(--accent); }
.wt-track .off { background: transparent; }
.wt-notice { padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.wt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; }
.tool textarea { font: 0.85rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; width: 100%; box-sizing: border-box; }
.wt-code { margin: 0; padding: 0.85rem; overflow-x: auto; white-space: pre; font: 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wt-report { margin: 0; padding-left: 1.1rem; }
.wt-report li { margin: 0.2rem 0; }
.wt-err strong { color: var(--bad); }
.wt-warn strong { color: var(--star); }
.wt-note strong { color: var(--ok); }
.tool fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tool legend { font-weight: 600; margin-bottom: 0.5rem; }
.tool :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 44px hit area for checkbox rows: the label wraps the input, the box itself stays small */
.wt-check { min-height: 44px; padding-inline: 0.25rem; cursor: pointer; }