/* ui/speed.css — Kiểm tra tốc độ gõ (#/toc-do). Tokens only (Neon + Cute). */
.speed { max-width: 1100px; }
.speed-head { margin-bottom: 12px; transition: opacity .25s; }
.speed-head h1 { margin-bottom: 4px; }
.speed-head p { margin: 0; }
.speed-config { display: flex; justify-content: center; padding: 10px 12px; margin-bottom: 14px; transition: opacity .25s; }
.sp-config-row { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; align-items: center; }
.sp-config-row .seg button { display: inline-flex; align-items: center; gap: 4px; }
.sp-toggle .ic { opacity: .8; }
.sp-toggle[aria-pressed="false"] .ic { opacity: .45; }
.sp-custom-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sp-phone-config { width: 100%; }
.sp-phone-mode { display: block; text-align: center; font-size: 13px; margin-top: 6px; }
.speed-config:has(.sp-phone-config) { flex-direction: column; }
.sp-config-modal .sp-config-row { justify-content: flex-start; }
.sp-config-modal .seg { width: 100%; }

.speed-status { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px 8px; flex-wrap: wrap; }
.sp-counter { font: 800 28px/1 var(--font-display); color: var(--primary); min-width: 64px; }
html[data-theme="neon"] .sp-counter { text-shadow: 0 0 14px rgba(34, 211, 238, .45); }
.sp-counter.timer-low { color: var(--bad); }
.sp-live { font: 800 18px/1 var(--font-display); color: var(--ink-soft); }
.sp-mode { font-size: 13px; font-weight: 700; text-align: right; }
.speed-card { padding: 28px 30px 26px; }
.speed-card .typing-text { color: var(--text-pending); }
.speed-tip { text-align: center; margin-top: 12px; transition: opacity .25s; }
.speed-tip kbd { margin: 0 2px; }

/* results */
.speed-result { outline: none; animation: screen-in var(--t-mid) ease-out; }
.sr-title { margin: 4px 0 10px; }
.sr-top { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.sr-big { display: grid; gap: 8px; align-content: center; justify-items: start; }
.sr-stat span { display: block; font: 800 15px/1 var(--font-display); color: var(--ink-faint); text-transform: lowercase; letter-spacing: .03em; }
.sr-stat b { display: block; font: 800 64px/1 var(--font-display); color: var(--primary); font-variant-numeric: tabular-nums; }
html[data-theme="neon"] .sr-stat b { text-shadow: 0 0 22px rgba(34, 211, 238, .4); }
.sr-stat + .sr-stat b { color: var(--accent); }
html[data-theme="neon"] .sr-stat + .sr-stat b { text-shadow: 0 0 22px rgba(192, 132, 252, .4); }
.sr-chart { min-width: 0; }
.sr-lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.sr-line { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.sr-line .sr-l { font-size: 12px; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.sr-line b { font: 800 20px/1.2 var(--font-display); overflow-wrap: anywhere; }
.sr-line small { font-size: 12px; color: var(--ink-faint); }
.sr-line.sr-mode b { font-size: 15px; }
.sr-line.bad b { color: var(--bad); }
.sr-flags { display: block; white-space: normal; border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
.sr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-saved { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.sr-input-history { margin-top: 12px; }
.sr-words { font: 600 17px/1.9 var(--font-mono); margin: 0; overflow-wrap: anywhere; }
.sr-word.bad { color: var(--bad); text-decoration: underline wavy var(--bad) 1.5px; text-underline-offset: 5px; cursor: help; }
.sp-replay { padding: 20px; cursor: default; }

/* quote search, custom dialog */
.sp-quote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow: auto; }
.sp-quote { display: grid; gap: 6px; justify-items: start; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: var(--border-w) solid var(--line); background: var(--surface-2); color: var(--ink); }
.sp-quote:hover { border-color: var(--primary); }
.sp-quote-text { font-size: 14px; line-height: 1.45; }
.sp-limit { width: 110px; }
.sp-saved { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-saved-item { display: inline-flex; gap: 2px; align-items: center; }

.sp-hist-grid .card { min-width: 0; }
.sp-hist-grid .tbl td.sp-wrap { white-space: normal; min-width: 150px; }
.sp-invalid { display: block; color: var(--bad); font-weight: 800; font-size: 12px; }
.sp-invalid-row td.num { color: var(--ink-faint); }
/* let the line break at the separator space instead of carrying it to the next line */
.speed-card .typing-text .sp, .sp-replay .typing-text .sp { white-space: normal; }
body.is-phone .speed-tip { display: none; }
.speed-history h2 .ic { color: var(--primary); }

@media (max-width: 900px) {
  .sr-top { grid-template-columns: 1fr; }
  .sr-big { grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 28px; }
  .sr-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .speed-card { padding: 18px 16px; }
  .sr-stat b { font-size: 48px; }
  .sp-mode { display: none; }
  .sr-actions .btn { flex: 1 1 calc(50% - 8px); }
}