/* rychlost.ensonet.cz — měřák v barvách ISP profi: oranžové pole, hnědý inkoust, bílý protokol. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff") format("woff");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --field: #E07828;      /* pole měřáku (barva značky) */
  --glow: #F5A03A;       /* dosažená rychlost na stupnici */
  --ink: #3B1404;        /* text, ručička, ryska */
  --sheet: #FFFFFF;      /* protokol */
  --sheet-ink: #3B1404;
  --muted: #6B5A50;
  --rule: #EAE4E0;
  --accent: #B4530F;     /* oranžový text na bílé */
  --reach: #FFFFFF;
  --btn: #3B1404;
  --btn-ink: #FFFFFF;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --field: #2A1206; --glow: #F5A03A; --ink: #FBE9DA; --sheet: #1C0C04; --sheet-ink: #FBE9DA;
    --muted: #C9A992; --rule: #3A2214; --accent: #F5A03A; --reach: #F5A03A; --btn: #F5A03A; --btn-ink: #2A1206;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--field); color: var(--ink);
  font: 400 16px/1.5 var(--font); font-stretch: 100%;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- lišta: bílý pruh, logo v původní podobě (černý text loga potřebuje bílé pozadí) */
.bar { background: #FFFFFF; padding-top: env(safe-area-inset-top); box-shadow: 0 1px 0 rgba(59, 20, 4, .12); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          max-width: 1080px; margin: 0 auto; padding: 10px 20px; }
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 40px; width: auto; }
.brand:focus-visible, .install:focus-visible { outline: 3px solid #3B1404; outline-offset: 3px; }
.install { font: 600 13px/1 var(--font); color: #3B1404; background: transparent; border: 1.5px solid #3B1404;
           border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
@media (max-width: 380px) { .brand img { height: 32px; } }

/* ---------- měřák */
main { max-width: 1080px; margin: 0 auto; padding: 16px 20px 24px;
       display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.instrument { text-align: center; padding: 8px 0 4px; }
h1 { margin: 6px 0 0; font-size: clamp(22px, 5.2vw, 30px); line-height: 1.1; font-weight: 800; font-stretch: 112%;
     letter-spacing: -.01em; }
.dial { position: relative; width: min(100%, 420px); margin: 6px auto 0; }
#gauge { display: block; width: 100%; height: auto; overflow: visible; }
.track { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; opacity: .18; }
.reach { fill: none; stroke: var(--reach); stroke-width: 12; stroke-linecap: round; }
.tick { stroke: var(--ink); stroke-width: 1.5; }
.tick.major { stroke-width: 2.5; }
.tlabel { fill: var(--ink); font: 600 11px var(--font); font-stretch: 75%; text-anchor: middle; dominant-baseline: middle;
          font-variant-numeric: tabular-nums; }
.needle { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.hub { fill: var(--ink); }

.readout { position: relative; margin-top: -30px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.value { display: block; font-size: clamp(52px, 15vw, 84px); font-weight: 800; font-stretch: 125%;
         font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.unit { margin-top: 4px; font-size: 14px; font-weight: 600; font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; }

/* průběh: Odezva → Stahování → Odesílání (pořadí měření) */
.phases { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
          width: min(100%, 420px); margin: 26px auto 0; padding: 0; }
.phases li { text-align: left; font-size: 12px; font-weight: 600; font-stretch: 80%; letter-spacing: .06em;
             text-transform: uppercase; opacity: .55; transition: opacity .2s; }
.phases li.on, .phases li.done { opacity: 1; }
.phases i { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(59, 20, 4, .18); overflow: hidden; }
.phases i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--ink); }
@media (prefers-color-scheme: dark) { .phases i { background: rgba(251, 233, 218, .18); } }

.go { margin: 26px auto 0; display: block; min-width: 240px; font: 700 18px/1 var(--font); font-stretch: 105%;
      color: var(--btn-ink); background: var(--btn); border: 0; border-radius: 999px; padding: 18px 32px; cursor: pointer;
      box-shadow: 0 6px 0 rgba(59, 20, 4, .25); transition: transform .08s, box-shadow .08s; }
.go:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(59, 20, 4, .25); }
.go:disabled { cursor: default; opacity: .75; }
.status { max-width: 420px; margin: 16px auto 0; font-size: 15px; }
.status.err { font-weight: 700; }

button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- protokol a historie */
.sheet { background: var(--sheet); color: var(--sheet-ink); border-radius: 18px; padding: 20px;
         box-shadow: 0 1px 0 rgba(59, 20, 4, .08), 0 18px 40px -24px rgba(59, 20, 4, .55); }
.sheet h2 { margin: 0; font-size: 13px; font-weight: 700; font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; }
.protocol header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                   padding-bottom: 12px; border-bottom: 2px solid var(--sheet-ink); }
.protocol time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.protocol dl { margin: 0; }
.protocol dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                   padding: 12px 0; border-bottom: 1px solid var(--rule); }
.protocol dt { color: var(--muted); }
.protocol dd { margin: 0; font-variant-numeric: tabular-nums; }
.protocol dd b { font-size: 26px; font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; }
.protocol .ip dd { font-size: 14px; }
.saved { margin: 14px 0 0; font-weight: 600; color: var(--accent); }
.saved.err { color: var(--sheet-ink); }

.history table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.history th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.history td { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.history .n { text-align: right; }

.ios { margin: 0; font-size: 14px; }
.foot { max-width: 1080px; margin: 0 auto; padding: 0 20px 28px; font-size: 13px; }

@media (min-width: 900px) {
  main { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; padding-top: 24px; gap: 32px; }
  .instrument { grid-row: span 3; }
  .dial, .phases { width: min(100%, 480px); }
  .protocol, .history, .ios { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}