/* fast-noble-hashes page */

[hidden] { display: none !important; }

/* the digest under the race */
.digest { margin: 16px 0 0; }
.digest-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.digest-hex { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.55; padding: 10px 12px; background: var(--paper-2); border-radius: 6px; overflow-wrap: anywhere; word-break: break-all; min-height: 2.6em; }
.text-field { flex: 1 1 260px; }
.text-field input { width: 100%; }

/* speedup by message length */
.lab .sweep-row { grid-template-columns: 62px 1fr 92px; }
.sweep-t { font-size: 12px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.sweep-x.slower { color: var(--warn); }
.sweep-bars i { transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* digests as you type */
.live { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--rule); }
.live-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 210px; gap: 8px 18px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.live-name { font-weight: 700; font-size: 15px; padding-top: 2px; }
.live-digests { margin: 0; display: grid; gap: 8px; min-width: 0; }
.live-digests > div { min-width: 0; padding-left: 10px; border-left: 3px solid var(--orig); }
.live-digests > div.f { border-left-color: var(--fast); }
.live-digests dt { font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.live-digests dd { margin: 1px 0 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; }
.live-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.live-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.live-tools .field { flex: 1 1 320px; }
.live-tools input { width: 100%; }

/* template and expanded sizes */
.meter-row.gap { margin-top: 12px; }
.meter-row .track { min-width: 0; }
.tpl-sum { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.tpl-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin: 0 0 6px; }
.tpl-key i { display: inline-block; width: 12px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--orig); }
.tpl-key i.f { background: var(--fast); }
.results th[scope="row"] { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); text-align: left; }

@media (max-width: 760px) {
  .live-row { grid-template-columns: 1fr; }
  .live-name { padding-top: 0; }
  .lab .sweep-row { grid-template-columns: 52px 1fr 78px; gap: 10px; }
}
@media (max-width: 640px) {
  .meter-row { grid-template-columns: 1fr 112px; }
  .meter-row .val { white-space: nowrap; }
}