/* ══════════════════════════════════════════════════════════════════════════
   /rychlost-webu — styly JEN pro tuhle stránku. Načítá se přes $extra_css.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Skryté, ale čitelné pro odečítač obrazovky (popisek pole). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Formulář ─────────────────────────────────────────────────────────────
   Na mobilu pod sebou, od 560 px vedle sebe. Pole je záměrně velké — je to
   jediná věc, kvůli které na stránku člověk přišel. */
.psi-form{display:flex;flex-direction:column;gap:12px;margin:26px 0 10px;max-width:620px}
@media(min-width:560px){ .psi-form{flex-direction:row;align-items:stretch} }
.psi-input{flex:1;min-width:0;font:inherit;font-size:1.05rem;color:var(--navy);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.95em 1em}
.psi-input::placeholder{color:var(--muted);opacity:.75}
.psi-input:focus{outline:2px solid var(--orange);outline-offset:2px;border-color:var(--orange)}
.psi-btn{flex:none;font-size:1.05rem;padding:.95em 1.6em;white-space:nowrap}
.psi-btn[disabled]{opacity:.75;cursor:progress}
.psi-note{color:var(--muted);font-size:.93rem;margin:0}
/* Po odeslání dá lišta najevo, že se pracuje. Bez JS se nezobrazí a nic
   se tím neztratí — stránka se prostě načte s výsledkem. */
.psi-form.is-meri{position:relative}
.psi-form.is-meri::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--orange-tint),var(--orange),var(--orange-tint));
  background-size:220% 100%;animation:psi-pruh 1.4s linear infinite}
@keyframes psi-pruh{from{background-position:220% 0}to{background-position:-20% 0}}
@media(prefers-reduced-motion:reduce){ .psi-form.is-meri::after{animation:none} }

.psi-off{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px;margin-top:24px;max-width:620px}
.psi-off p{margin:0 0 14px;color:var(--muted)}
.psi-off p:last-child{margin:0}
.psi-chyba{background:var(--orange-tint);border:1px solid var(--orange);
  border-radius:var(--radius-sm);padding:16px 18px;color:var(--navy);margin:0;
  max-width:70ch}

/* ── Výsledek ─────────────────────────────────────────────────────────────
   Ciferník vlevo, čísla vpravo, náhled obrazovky pod tím. */
.psi-vysledek{display:grid;gap:26px;grid-template-columns:1fr;align-items:start;
  max-width:1080px;margin:0 auto}
@media(min-width:880px){
  .psi-vysledek{grid-template-columns:auto 1fr;gap:40px}
  .psi-nahled{grid-column:1 / -1}
}
.psi-skore{text-align:center}
.psi-dial{position:relative;width:120px;height:120px;margin:0 auto}
.psi-dial svg{display:block;transform:rotate(-90deg)}
.psi-track{fill:none;stroke:var(--navy-tint);stroke-width:10}
.psi-fill{fill:none;stroke-width:10;stroke-linecap:round;
  stroke-dasharray:var(--psi-dash) var(--psi-gap)}
/* Hranice jsou Googlu, ne naše — viz komentář v rychlost-webu.php. */
.psi-skore--dobre   .psi-fill{stroke:var(--green-600)}
.psi-skore--stredni .psi-fill{stroke:var(--orange)}
.psi-skore--spatne  .psi-fill{stroke:#c0392b}
.psi-num{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:2.5rem;line-height:1;letter-spacing:-.03em}
.psi-slovy{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.1rem;margin:12px 0 4px}
.psi-skala{color:var(--muted);font-size:.86rem;margin:0;max-width:22ch;
  margin-left:auto;margin-right:auto;line-height:1.45}

/* Metriky. Barevná linka vlevo říká, jak na tom která je. */
.psi-metriky{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:660px){ .psi-metriky{grid-template-columns:1fr 1fr;column-gap:28px} }
.psi-metriky li{padding:14px 0 14px 16px;border-left:3px solid var(--border);
  margin-bottom:10px}
.psi-metriky li.is-dobre{border-left-color:var(--green-600)}
.psi-metriky li.is-stredni{border-left-color:var(--orange)}
.psi-metriky li.is-spatne{border-left-color:#c0392b}
.psi-m-hodnota{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.35rem;line-height:1;letter-spacing:-.02em}
.psi-m-nazev{display:block;color:var(--navy);font-weight:600;font-size:.96rem;margin:.35em 0 .2em}
.psi-m-popis{display:block;color:var(--muted);font-size:.9rem;line-height:1.5}

.psi-navrhy{margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.psi-navrhy h3{font-size:1.05rem;margin-bottom:.6em}
.psi-navrhy ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.psi-navrhy li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  color:var(--muted);font-size:.95rem;line-height:1.45}
.psi-navrhy li b{flex:none;color:var(--orange-600);font-family:var(--font-head);white-space:nowrap}
.psi-navrhy-note{color:var(--muted);font-size:.88rem;line-height:1.55;margin:14px 0 0}

.psi-nahled{margin:0;text-align:center}
.psi-nahled img{max-width:100%;width:auto;max-height:420px;border-radius:var(--radius-sm);
  border:1px solid var(--border);box-shadow:var(--shadow)}
.psi-nahled figcaption{color:var(--muted);font-size:.88rem;margin-top:10px}
.psi-znovu{text-align:center;margin:26px 0 0}
.psi-znovu a{font-family:var(--font-head);font-weight:600;color:var(--orange-600)}

/* ── Proč na tom záleží ───────────────────────────────────────────────────── */
.psi-proc{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr;
  max-width:1080px;margin:0 auto}
@media(min-width:860px){ .psi-proc{grid-template-columns:1fr 1fr;column-gap:48px} }
.psi-proc li{padding:20px 0;border-top:1px solid var(--border)}
.psi-proc li:first-child{border-top:0}
@media(min-width:860px){ .psi-proc li:nth-child(2){border-top:0} }
.psi-proc b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;margin-bottom:.25em;line-height:1.3}
.psi-proc span{color:var(--muted);font-size:.96rem;line-height:1.55}
.psi-my{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 0 1em}

/* ── Postup u Googlu (jen když je měřič vypnutý) ─────────────────────────── */
.psi-kroky{margin:0 0 16px;padding-left:1.3em;color:var(--muted);line-height:1.55}
.psi-kroky li{margin-bottom:6px}
.psi-kroky li::marker{color:var(--orange-600);font-weight:700}

/* ── Jak číst výsledek: LCP / INP / CLS ───────────────────────────────────
   Stejný rytmus jako .psi-proc: tučný název, pod ním popis, dole hranice. */
.psi-cwv{list-style:none;margin:0 0 18px;padding:0}
.psi-cwv li{padding:18px 0 18px 16px;border-left:3px solid var(--orange);margin-bottom:12px}
.psi-cwv b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;margin-bottom:.3em;line-height:1.3}
.psi-cwv span{display:block;color:var(--muted);font-size:.96rem;line-height:1.55}
.psi-cwv .psi-cwv-hranice{color:var(--navy);font-weight:600;font-size:.93rem;margin-top:.45em}