:root {
  --green-50: #eefaf3;
  --green-100: #d4f3e2;
  --green-400: #4ecf8a;
  --green-500: #2bb673;
  --green-600: #1f9a5f;
  --blue-50: #eef6fc;
  --blue-100: #d7ebf8;
  --blue-400: #5aa8de;
  --blue-500: #2f8fd6;
  --blue-700: #1a5f96;
  --ink: #0f2433;
  --ink-soft: #4a6678;
  --font: "Heebo", "Segoe UI", Tahoma, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: #f4faf7;
  min-height: 100vh;
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 640px at 8% 0%, var(--green-100) 0%, transparent 55%),
    radial-gradient(1000px 560px at 94% 10%, var(--blue-100) 0%, transparent 50%),
    linear-gradient(165deg, var(--green-50) 0%, #f7fbfd 48%, var(--blue-50) 100%);
}

.stage {
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /*
    "safe" keeps the top reachable when the content is taller than the
    viewport — plain centering pushes it above the scrollable area.
  */
  justify-content: center;
  justify-content: safe center;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  animation: rise 0.55s ease-out both;
}

.brand__logo {
  display: block;
  height: clamp(2.75rem, 5vw, 3.5rem);
  width: auto;
  object-fit: contain;
}

/*
  Meter + controls always LTR so needle, sparklines, and progress
  all advance left → right (same as the old UI).
  Hebrew text stays RTL on the page chrome around them.
*/
.board,
.controls {
  direction: ltr;
}

.board {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(1.75rem, 3vh, 2.5rem);
  animation: rise 0.55s 0.05s ease-out both;
}

@media (max-width: 760px) {
  .board {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.gauge {
  position: relative;
  width: 100%;
  max-width: 420px;
  user-select: none;
}

.gauge__svg {
  display: block;
  width: 100%;
  height: auto;
}

.gauge__track {
  fill: none;
  stroke: rgba(26, 95, 150, 0.14);
  stroke-width: 12;
  stroke-linecap: round;
}

.gauge__arc {
  fill: none;
  stroke: url(#arcGrad);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 433.54;
  stroke-dashoffset: 433.54;
  transition: stroke-dashoffset 0.12s linear;
}

.gauge__needle {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 120px 120px;
  transition: transform 0.12s linear;
}

.gauge.is-trembling .gauge__needle {
  transition: none;
}

.gauge.is-trembling .gauge__lcd {
  transition: none;
}

.gauge__hub {
  fill: var(--blue-700);
  stroke: #fff;
  stroke-width: 2;
}

.gauge__tick {
  stroke: var(--ink);
  stroke-width: 1.75;
  opacity: 0.7;
}

.gauge__tick-label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(247, 251, 253, 0.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Sits in the open bottom wedge of the 270° dial */
.gauge__lcd {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  min-width: 5rem;
  min-height: 1.85rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.35rem;
  background: var(--ink);
  color: var(--green-400);
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: opacity 0.2s ease;
}

.gauge__lcd.is-empty {
  opacity: 0;
  pointer-events: none;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
  width: 100%;
}

.stat {
  display: grid;
  grid-template-columns: 6.5rem minmax(140px, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
}

@media (max-width: 760px) {
  .stat {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    width: 100%;
  }
}

.stat__label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  direction: rtl;
}

.stat__chart {
  display: block;
  /* min-width keeps the canvas from forcing the grid wider than the screen */
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: clamp(56px, 8vw, 72px);
  border-radius: 4px;
}

.stat__chart.is-trembling {
  animation: chartShake 0.12s linear infinite;
}

.stat__num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 7rem;
  direction: ltr;
}

.stat__value {
  font-family: var(--font);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat__unit {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Secondary quality strip — under the progress bar, smaller than download/upload */
.quality {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(15, 36, 51, 0.08);
  direction: rtl;
  animation: rise 0.55s 0.12s ease-out both;
}

@media (max-width: 700px) {
  .quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .quality {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quality__item {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}

.quality__head {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.1;
}

.quality__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1.1;
}

.quality__readout {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  direction: ltr;
  margin-top: 0.05rem;
}

.quality__value {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue-700);
  line-height: 1;
}

.quality__unit {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1;
}

.help {
  position: relative;
  appearance: none;
  border: 1px solid rgba(26, 95, 150, 0.28);
  background: rgba(255, 255, 255, 0.7);
  color: var(--blue-700);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: help;
  flex-shrink: 0;
}

.help:hover,
.help:focus-visible {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
  outline: none;
}

.help::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.45rem);
  right: 50%;
  transform: translateX(50%);
  width: max(12rem, 100%);
  min-width: 12rem;
  max-width: 16rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: right;
  direction: rtl;
  box-shadow: 0 8px 24px rgba(15, 36, 51, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.help::before {
  content: "";
  position: absolute;
  z-index: 21;
  top: calc(100% + 0.15rem);
  right: 50%;
  transform: translateX(50%);
  border: 6px solid transparent;
  border-bottom-color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

/* :focus as well as :focus-visible so a tap on a touch screen opens the bubble */
.help:hover::after,
.help:hover::before,
.help:focus::after,
.help:focus::before {
  opacity: 1;
  visibility: visible;
}

/* The strip sits low on the page, so its bubbles open upwards */
.quality .help::after {
  top: auto;
  bottom: calc(100% + 0.45rem);
}

/* Outermost bubbles hug the page edge instead of overflowing it */
.quality__item:first-child .help::after {
  right: -0.4rem;
  transform: none;
}

.quality__item:last-child .help::after {
  right: auto;
  left: -0.4rem;
  transform: none;
}

.quality .help::before {
  top: auto;
  bottom: calc(100% + 0.15rem);
  border-bottom-color: transparent;
  border-top-color: var(--ink);
}

/* Same as legacy: progress grows LTR, Start sits on the right */
.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
  animation: rise 0.55s 0.1s ease-out both;
}

.progress {
  height: 1rem;
  border-radius: 3px;
  border: 1px solid rgba(15, 36, 51, 0.2);
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  direction: ltr;
}

.progress__fill {
  height: 100%;
  width: 0%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue-500), var(--green-500));
  transition: width 0.08s linear;
}

.progress.is-waiting .progress__fill {
  width: 28% !important;
  animation: indeterminate 1.15s ease-in-out infinite;
}

.start {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0.7rem 1.75rem;
  min-width: 6.5rem;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  background: var(--green-500);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px rgba(43, 182, 115, 0.25);
}

.start:hover:not(:disabled) {
  background: var(--green-600);
  transform: translateY(-1px);
}

.start:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.start:disabled {
  opacity: 0.75;
  cursor: wait;
}

.start.is-running {
  background: var(--blue-500);
  box-shadow: 0 6px 16px rgba(47, 143, 214, 0.25);
}

.meta {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-soft);
  min-height: 1.35rem;
  text-align: start;
  direction: ltr;
  unicode-bidi: isolate;
  animation: rise 0.55s 0.14s ease-out both;
}

.meta[data-error="true"] {
  color: #b42318;
}

/*
  Embedded in an iframe: stay transparent so the host page's own
  background shows through instead of our gradient backdrop.
*/
.is-embedded,
.is-embedded body {
  background: transparent;
}

.is-embedded .atmosphere {
  display: none;
}

/* The halo assumes our own pale backdrop; on a host page it would show as a smudge */
.is-embedded .gauge__tick-label {
  stroke: none;
}

/*
  Short viewports — mainly the iframe embed on the WordPress site.
  Everything shrinks so the page fits without its own scrollbar.
*/
@media (max-height: 780px) {
  .stage {
    width: min(1120px, calc(100% - 1.5rem));
    padding: 1rem 0;
  }

  .brand {
    margin-bottom: 0.75rem;
  }

  .brand__logo {
    height: 2.1rem;
  }

  .board {
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: 0.9rem;
  }

  .gauge {
    max-width: 280px;
  }

  .gauge__lcd {
    min-width: 4rem;
    min-height: 1.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 1rem;
  }

  .stats {
    gap: 0.9rem;
  }

  .stat {
    gap: 0.8rem;
  }

  .stat__label {
    font-size: 0.95rem;
  }

  .stat__chart {
    height: 42px;
  }

  .stat__value {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  }

  .stat__unit {
    font-size: 0.75rem;
  }

  .stat__num {
    min-width: 5.5rem;
  }

  .controls {
    gap: 0.9rem;
    margin-bottom: 0.65rem;
  }

  .progress {
    height: 0.7rem;
  }

  .start {
    padding: 0.5rem 1.35rem;
    min-width: 5.5rem;
    font-size: 1rem;
  }

  .quality {
    margin-bottom: 0.6rem;
    padding-top: 0.6rem;
    gap: 0.5rem 0.75rem;
  }

  .quality__value {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
  }

  .meta {
    font-size: 0.85rem;
    min-height: 1.1rem;
  }
}

/* Tighter columns only when the viewport is short *and* wide enough for them */
@media (max-height: 780px) and (min-width: 761px) {
  .board {
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  }

  .stat {
    grid-template-columns: 5.5rem minmax(120px, 1fr) auto;
  }
}

/* Very short embeds: drop the logo, the parent page is already branded */
@media (max-height: 620px) {
  .brand {
    display: none;
  }

  .gauge {
    max-width: 230px;
  }

  .stat__chart {
    height: 34px;
  }
}

/*
  Phones — a label + chart + big number row is too wide, so the number
  moves next to the label and the chart drops to its own line.
  Last of the media queries so it wins over the short-viewport rules.
*/
@media (max-width: 620px) {
  /*
    Vertical sizes are driven by vh so the whole UI shrinks to whatever
    height the host iframe gives us — we cannot change the host page.
  */
  .stage {
    justify-content: flex-start;
    width: min(1120px, calc(100% - 1.25rem));
    padding: clamp(0.4rem, 1.5vh, 0.75rem) 0;
  }

  .board {
    margin-bottom: clamp(0.35rem, 1.2vh, 0.6rem);
  }

  .gauge {
    max-width: min(210px, 32vh);
  }

  .stat {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "chart chart";
    gap: 0.3rem 0.75rem;
    align-items: baseline;
  }

  .stat__label {
    grid-area: label;
    justify-content: flex-start;
    font-size: clamp(0.85rem, 2.4vh, 1.05rem);
  }

  .stat__num {
    grid-area: value;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
  }

  .stat__value {
    font-size: clamp(1.3rem, 4.4vh, 1.9rem);
  }

  /*
    A dash at result size looks oversized, so shrink it. The readouts keep
    the full height reserved so nothing shifts once the numbers arrive.
  */
  .stat__num {
    min-height: clamp(1.3rem, 4.4vh, 1.9rem);
  }

  .stat__value.is-placeholder {
    font-size: clamp(0.9rem, 2.6vh, 1.15rem);
    font-weight: 500;
    color: var(--ink-soft);
  }

  .quality__readout {
    min-height: clamp(0.9rem, 2.8vh, 1.05rem);
  }

  .quality__value.is-placeholder {
    font-size: clamp(0.7rem, 2vh, 0.85rem);
    font-weight: 500;
    color: var(--ink-soft);
  }

  .stat__unit {
    margin-top: 0;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .stat__chart {
    grid-area: chart;
    height: clamp(18px, 4.5vh, 34px);
  }

  .stats {
    gap: clamp(0.35rem, 1.2vh, 0.7rem);
  }

  /* Progress bar on top, big centered Start below — like the old mobile UI */
  .controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.45rem, 1.4vh, 0.75rem);
    margin-bottom: clamp(0.45rem, 1.2vh, 0.75rem);
  }

  .progress {
    width: 100%;
    height: clamp(0.55rem, 1.6vh, 0.8rem);
  }

  .start {
    width: 100%;
    min-width: 0;
    padding: clamp(0.55rem, 1.8vh, 0.75rem) 1.25rem;
    font-size: clamp(1rem, 3vh, 1.2rem);
    border-radius: 6px;
  }

  /* Smaller checks sit under Start — order already matches in the HTML */
  .quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.2rem, 0.9vh, 0.4rem) 0.5rem;
    padding-top: clamp(0.3rem, 1vh, 0.5rem);
    margin-bottom: clamp(0.3rem, 1vh, 0.5rem);
    border-top: 1px solid rgba(15, 36, 51, 0.08);
  }

  .quality__label {
    font-size: 0.72rem;
    white-space: normal;
  }

  .quality__value {
    font-size: clamp(0.9rem, 2.8vh, 1.05rem);
  }

  .quality__unit {
    font-size: 0.7rem;
  }

  .meta {
    font-size: clamp(0.7rem, 2.1vh, 0.8rem);
    min-height: 1rem;
  }

  /*
    There is no room for a bubble anchored to the button, so it spans the
    screen along the bottom edge instead and the pointer arrow is dropped.
  */
  .quality .help::after,
  .stat__label .help::after {
    position: fixed;
    top: auto;
    bottom: 0.6rem;
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  .help::before {
    display: none;
  }
}

/* Last resort for a very short embed: the sparklines are decoration, the numbers are not */
@media (max-width: 620px) and (max-height: 430px) {
  .stat__chart {
    display: none;
  }

  .stat {
    grid-template-areas: "label value";
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@keyframes chartShake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0.4px, -0.5px);
  }
  50% {
    transform: translate(-0.5px, 0.3px);
  }
  75% {
    transform: translate(0.3px, 0.4px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}