/* Foliovex — Live Speed Test. Uses the site's own existing design
   tokens directly (--paper, --ink, --stamp, --ledger, --display,
   --body, --mono, --radius) rather than a separate palette — unlike
   the Hijri calendar or resume builder, this tool never needed its
   own color scheme, since it was designed against Foliovex's tokens
   from the start. Scoped by #fvx-live (an ID, not a class like
   .hijri-scope/.resume-scope elsewhere on the site) — a deliberate
   choice to keep, not an inconsistency to fix: there's only ever one
   instance of this tool on a page, so an ID scope is exactly as safe
   as a class here, and renaming every selector below purely to match
   convention would have been pure risk for zero functional gain. */

#fvx-live {
  /* Swap this line to any hex for a different upload line color. */
  --fvx-upload-color: var(--ledger);
  --fvx-download-color: var(--stamp-dark);

  font-family: var(--body);
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) 0;
}
#fvx-live * { box-sizing: border-box; }

#fvx-live .fvx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ledger); margin-bottom: 14px;
}
#fvx-live .fvx-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--ledger); border-radius: 50%; display: inline-block; }

#fvx-live h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 10px;
}
#fvx-live h1 em { font-style: italic; color: var(--stamp); }
#fvx-live .fvx-lede { font-size: 15px; color: var(--ink-soft); max-width: 58ch; margin: 0 0 20px; line-height: 1.6; }

#fvx-live .fvx-disclosure {
  font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 26px;
  padding-left: 14px; border-left: 2px solid var(--line);
}
#fvx-live .fvx-disclosure b { color: var(--ink); }

#fvx-live .fvx-btn {
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 14px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
  background: var(--stamp); color: var(--stamp-ink);
}
#fvx-live .fvx-btn:hover { background: var(--stamp-dark); }
#fvx-live .fvx-btn:active { transform: translateY(1px); }
#fvx-live .fvx-btn.fvx-stop { background: transparent; border-color: var(--line); color: var(--ink); }
#fvx-live .fvx-btn.fvx-stop:hover { border-color: var(--ink); }
#fvx-live .fvx-btn:focus-visible { outline: 2px solid var(--ledger); outline-offset: 2px; }

#fvx-live .fvx-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); margin-left: 14px;
  opacity: 0; transition: opacity 0.2s;
}
#fvx-live .fvx-live-badge.fvx-visible { opacity: 1; }
#fvx-live .fvx-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fvx-download-color);
  animation: fvx-pulse 1s ease-in-out infinite;
}
@keyframes fvx-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Screen-reader-only utility — no equivalent already existed
   site-wide, so it's scoped to this tool rather than added globally
   for one use. Used by the live status region below, which narrates
   test progress and failures to anyone not looking at the chart. */
#fvx-live .fvx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Visible failure state — shown after repeated, consecutive failed
   test requests, distinct from a slow-but-working connection. Without
   this, a blocked or unreachable test endpoint left every stat frozen
   at "0.0 / —" with zero indication that the *tool* had failed rather
   than the person's connection genuinely being that bad. */
#fvx-live .fvx-error-banner {
  display: none; align-items: flex-start; gap: 10px;
  background: var(--paper-dim); border: 1px solid var(--line); border-left: 3px solid var(--stamp);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
#fvx-live .fvx-error-banner.fvx-visible { display: flex; }
#fvx-live .fvx-error-banner b { color: var(--ink); }

/* ---- four-box stat row ---- */
#fvx-live .fvx-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 26px 0 28px;
}
#fvx-live .fvx-stat-box {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 14px; text-align: center;
}
#fvx-live .fvx-stat-box b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px); line-height: 1; letter-spacing: -0.01em;
}
#fvx-live .fvx-stat-box span {
  display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px;
}
#fvx-live #fvx-box-dl b { color: var(--fvx-download-color); }
#fvx-live #fvx-box-ul b { color: var(--fvx-upload-color); }

#fvx-live .fvx-best-line { font-size: 13px; color: var(--ink-soft); margin: -14px 0 20px; text-align: center; }
#fvx-live .fvx-best-line b { color: var(--ink); font-weight: 600; }

/* ---- chart with axes ---- */
#fvx-live .fvx-chart-box {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 10px; margin-bottom: 26px; box-shadow: var(--shadow-card);
}
#fvx-live canvas { width: 100%; height: 260px; display: block; }
#fvx-live .fvx-legend { display: flex; gap: 22px; font-size: 13px; color: var(--ink-soft); margin-top: 10px; justify-content: center; }
#fvx-live .fvx-legend span { display: inline-flex; align-items: center; gap: 7px; }
#fvx-live .fvx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#fvx-live .fvx-dot.dl { background: var(--fvx-download-color); }
#fvx-live .fvx-dot.ul { background: var(--fvx-upload-color); }

#fvx-live .fvx-conn-panel { background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 20px; }
#fvx-live .fvx-conn-panel h2 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 16px 0 4px; }
#fvx-live .fvx-conn-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#fvx-live .fvx-conn-row:last-child { border-bottom: none; }
#fvx-live .fvx-conn-row span:first-child { color: var(--ink-soft); }
#fvx-live .fvx-conn-row span:last-child { color: var(--ink); font-weight: 500; text-align: right; }

/* ---- test history ----
   Saved locally on stop() (see speed-test.js), matching the same
   "your own browser's local storage, on your device" pattern the
   Resume Builder already uses and discloses — kept hidden entirely
   (rather than an empty "no history yet" state) until there's at
   least one real result, since an empty history section on a brand
   new visit reads as confusing filler, not useful information. */
#fvx-live .fvx-history { margin: 30px 0; }
#fvx-live .fvx-history-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
#fvx-live .fvx-history-head h2 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 0; }
#fvx-live .fvx-history-clear {
  font-family: var(--body); font-size: 13px; color: var(--ink-soft); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 4px 0;
}
#fvx-live .fvx-history-clear:hover { color: var(--ink); }
#fvx-live .fvx-history-list { display: flex; flex-direction: column; gap: 8px; }
#fvx-live .fvx-history-row {
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 10px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; font-size: 13.5px;
}
#fvx-live .fvx-history-row .fvx-hist-when { color: var(--ink-soft); }
#fvx-live .fvx-history-row .fvx-hist-val { text-align: right; }
#fvx-live .fvx-history-row .fvx-hist-val b { color: var(--ink); font-weight: 600; }
#fvx-live .fvx-history-row .fvx-hist-val span { display: block; font-size: 10.5px; color: var(--ink-faint, var(--ink-soft)); margin-top: 1px; }
#fvx-live .fvx-history-head-row {
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 10px;
  padding: 0 16px; font-size: 11px; color: var(--ink-faint, var(--ink-soft)); text-transform: uppercase; letter-spacing: 0.04em;
}
#fvx-live .fvx-history-head-row span:not(:first-child) { text-align: right; }

@media (max-width: 560px) {
  #fvx-live .fvx-history-head-row { display: none; }
  #fvx-live .fvx-history-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  #fvx-live .fvx-history-row .fvx-hist-when { grid-column: 1 / -1; font-weight: 600; color: var(--ink); }
  #fvx-live .fvx-history-row .fvx-hist-val { text-align: left; }
}

/* "About this speed test" — plain-prose section, no card/border
   treatment needed since it sits after the functional part of the
   page (stat grid, chart, connection panel), matching how the site's
   shared .faq block below it is styled too: text-first, not another
   boxed widget. */
#fvx-live .fvx-about { margin: 36px 0 8px; }
#fvx-live .fvx-about h2 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 0 0 12px; }
#fvx-live .fvx-about p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin: 0 0 14px; }

@media (max-width: 620px) {
  #fvx-live .fvx-stat-grid { grid-template-columns: repeat(2, 1fr); }
}