/* Viplor — free preview redesign: foundation, entry and progress screens.
   Loaded by templates/viplor_preview.html only, after viplor-preview.css,
   site/site.css and viplor-ds.css. Every rule is scoped under .vpr-page
   (the preview body class) and every new class uses the vpr- prefix, so
   viplor_app.html (which also loads viplor-preview.css) is unaffected.
   Tokens: --vp-* from site/site.css, --band-* from viplor-ds.css.
   CSP: style-src 'self', so no inline styles; states are classes. */

/* ---- header: logo + note on a surface bar ---- */
.vpr-page .vi-header {
  padding: 14px 24px;
  background: var(--vp-surface, #fff);
  border-bottom: 1px solid var(--vp-line, #E3E1D7);
}
.vpr-page .vi-header-inner { max-width: 1080px; }
.vpr-page .vi-brand .vp-logo__image { padding: 0; background: none; border-radius: 0; height: 28px; width: auto; }
.vpr-page .vi-header-note {
  font-family: var(--vp-font-sans, "Inter Variable", system-ui, sans-serif);
  font-size: 13px;
  color: var(--vp-text-3, #5E6571);
}

/* ---- shared building blocks (entry + progress only) ---- */
.vpr-entry,
.vpr-progress {
  font-family: var(--vp-font-sans, "Inter Variable", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--vp-text, #0B0F14);
  padding-top: 24px;
}
.vpr-page .vpr-eyebrow {
  margin: 0;
  font-family: var(--vp-font-mono, "JetBrains Mono Variable", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vp-text-3, #5E6571);
}
.vpr-page .vpr-h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 650;
  text-wrap: balance;
}
.vpr-page .vpr-h1--sm { font-size: 32px; }
.vpr-page .vpr-h1 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--vp-accent, #A8FF3E) 62%);
}
.vpr-page .vpr-h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; font-weight: 620; }
.vpr-page .vpr-h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; font-weight: 620; }
.vpr-page .vpr-lead {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--vp-text-2, #414854);
  max-width: 38em;
}
.vpr-page .vpr-muted { margin: 0; font-size: 13px; color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-card {
  background: var(--vp-surface, #fff);
  border: 1px solid var(--vp-line, #E3E1D7);
  border-radius: 18px;
  padding: 28px;
}
.vpr-page .vpr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- entry ---- */
.vpr-page .vpr-entry {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  grid-template-areas: "intro form" "facts form";
  grid-template-rows: auto 1fr;
  align-items: start;
  padding-top: 24px;
}
.vpr-page .vpr-entry__intro { grid-area: intro; }
.vpr-page .vpr-entry__form { grid-area: form; }
.vpr-page .vpr-entry[hidden] { display: none; }
.vpr-page .vpr-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.vpr-page .vpr-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--vp-text-2, #414854);
}
.vpr-page .vpr-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--band-green-soft, #E3F4E6);
}
.vpr-page .vpr-list li { position: relative; }
/* CSS-drawn check: CSP img-src 'self' blocks data: URIs */
.vpr-page .vpr-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 4px;
  height: 8px;
  border: solid #1D6234;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vpr-page .vpr-facts {
  grid-area: facts;
  margin: 4px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--vp-line, #E3E1D7);
  font-size: 13px;
  line-height: 1.55;
  color: var(--vp-text-3, #5E6571);
}
.vpr-page .vpr-facts h2 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vp-text-2, #414854);
}
.vpr-page .vpr-facts p { margin: 0; }
.vpr-page .vpr-facts p + p { margin-top: 8px; }
.vpr-page .vpr-facts a { color: var(--vp-text, #0B0F14); font-weight: 600; }

.vpr-page .vpr-entry__form-sub { margin: 6px 0 20px; }
.vpr-page .vpr-entry__form-foot { margin-top: 14px; }
.vpr-page .vpr-form { display: block; }
.vpr-page .vpr-field { display: grid; gap: 6px; margin-bottom: 16px; }
.vpr-page .vpr-field label { font-weight: 600; font-size: 14px; }
.vpr-page .vpr-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--vp-line-strong, #CBC8BB);
  border-radius: 10px;
  background: var(--vp-surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.vpr-page .vpr-input::placeholder { color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-input:focus-visible {
  outline: 2px solid var(--vp-focus, #0B0F14);
  outline-offset: 1px;
}
.vpr-page .vpr-input[aria-invalid="true"] {
  border-color: var(--band-red-arc, #D92D20);
  box-shadow: 0 0 0 3px var(--band-red-soft, #FDECEA);
}
.vpr-page .vpr-input:disabled { opacity: 0.6; cursor: not-allowed; }
.vpr-page .vpr-hint { font-size: 13px; color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-label-example { font-weight: 400; color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-field-error {
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--band-red-text, #B42318);
}
.vpr-page .vpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vpr-page .vpr-btn-primary { background: var(--vp-btn, #0B0F14); color: var(--vp-btn-text, #fff); }
.vpr-page .vpr-btn-primary:hover:not(:disabled) { background: var(--vp-btn-hover, #232A34); }
.vpr-page .vpr-btn-primary:disabled { opacity: 0.55; cursor: wait; }
.vpr-page .vpr-btn:focus-visible { outline: 2px solid var(--vp-focus, #0B0F14); outline-offset: 2px; }
.vpr-page .vpr-btn-block { width: 100%; }

/* ---- progress ---- */
.vpr-page .vpr-progress {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
  padding-top: 24px;
}
.vpr-page .vpr-progress[hidden] { display: none; }
.vpr-page .vpr-progress .vi-progress-card {
  background: var(--vp-surface, #fff);
  border: 1px solid var(--vp-line, #E3E1D7);
  border-radius: 18px;
  box-shadow: none;
  padding: 28px;
}
.vpr-page .vpr-progress__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vpr-page .vpr-meter {
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--vp-surface-2, #F3F2EC);
  overflow: hidden;
}
.vpr-page .vpr-meter i {
  display: block;
  height: 100%;
  width: 24%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vp-btn, #0B0F14), #3A4350);
  transition: width 400ms ease;
}
.vpr-page .vi-is-running .vpr-meter i { width: 62%; }
.vpr-page .vpr-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.vpr-page .vpr-step.vi-stage {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--vp-line, #E3E1D7);
}
.vpr-page .vpr-step.vi-stage:first-child { border-top: 0; }
.vpr-page .vpr-step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  background: var(--vp-surface-2, #F3F2EC);
  color: var(--vp-text-3, #5E6571);
}
.vpr-page .vpr-step--done .vpr-step__dot { background: var(--band-green-soft, #E3F4E6); color: var(--band-green-text, #1D6234); }
.vpr-page .vpr-step--run .vpr-step__dot {
  background: var(--vp-btn, #0B0F14);
  color: var(--vp-accent, #A8FF3E);
  box-shadow: 0 0 0 5px rgba(168, 255, 62, 0.35);
}
.vpr-page .vpr-step .vpr-step__t.vi-stage-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--vp-text, #0B0F14);
}
.vpr-page .vpr-step__d { margin: 2px 0 0; font-size: 13.5px; color: var(--vp-text-2, #414854); }
.vpr-page .vpr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vpr-page .vpr-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.vpr-page .vpr-chip--pass { background: var(--band-green-soft, #E3F4E6); color: var(--band-green-text, #1D6234); }
.vpr-page .vpr-chip--wait { background: var(--vp-surface-2, #F3F2EC); color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-chip--run { background: var(--vp-btn, #0B0F14); color: var(--vp-btn-text, #fff); }

/* notices: slow (info), stuck and trouble (warn) */
.vpr-page .vpr-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--vp-surface-2, #F3F2EC);
  color: var(--vp-text-2, #414854);
}
.vpr-page .vpr-note[data-tone="warn"] {
  background: var(--band-orange-soft, #FFF2D9);
  color: var(--band-orange-text, #8F5300);
}
.vpr-page .vpr-note a { color: inherit; text-decoration: underline; }
.vpr-page .vpr-note b { display: block; }
.vpr-page .vpr-note__ic {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.08);
}

/* PR B hook: result screen styles go in preview-result.css */
/* ---- PR C: failure and quota states ----
   One centered state card in a 640px column. data-tone on the icon and
   data-kind on the section pick the variant; both are set by the script. */
.vpr-page .vpr-state-wrap {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  padding-top: 24px;
  font-family: var(--vp-font-sans, "Inter Variable", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--vp-text, #0B0F14);
}
.vpr-page .vpr-state-wrap[hidden] { display: none; }
.vpr-page .vpr-state {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 44px 32px;
  text-align: center;
}
.vpr-page .vpr-state__ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 650;
  background: var(--vp-surface-2, #F3F2EC);
  color: var(--vp-text-2, #414854);
}
.vpr-page .vpr-state__ic[data-tone="red"] {
  background: var(--band-red-soft, #FDECEA);
  color: var(--band-red-text, #B42318);
}
.vpr-page .vpr-state__ic[data-tone="orange"] {
  background: var(--band-orange-soft, #FFF2D9);
  color: var(--band-orange-text, #8F5300);
}
.vpr-page .vpr-state__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 650;
  text-wrap: balance;
}
.vpr-page .vpr-state__title:focus { outline: none; }
.vpr-page .vpr-state__title:focus-visible {
  outline: 2px solid var(--vp-focus, #0B0F14);
  outline-offset: 4px;
  border-radius: 4px;
}
.vpr-page .vpr-state__body {
  margin: 0;
  max-width: 34em;
  color: var(--vp-text-2, #414854);
  overflow-wrap: anywhere;
}
.vpr-page .vpr-state__body[hidden],
.vpr-page .vpr-state__note[hidden],
.vpr-page .vpr-state__support[hidden],
.vpr-page .vpr-kv[hidden] { display: none; }
.vpr-page .vpr-state__note { text-align: left; max-width: 34em; }
.vpr-page .vpr-kv {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 18px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--vp-surface-2, #F3F2EC);
  font-size: 13.5px;
  text-align: left;
}
.vpr-page .vpr-kv dt { color: var(--vp-text-3, #5E6571); }
.vpr-page .vpr-kv dd { margin: 0; font-weight: 600; }
.vpr-page .vpr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.vpr-page .vpr-actions:empty { display: none; }
.vpr-page .vpr-actions .vpr-btn { text-decoration: none; }
.vpr-page .vpr-btn-secondary {
  background: var(--vp-surface, #fff);
  border-color: var(--vp-line-strong, #CBC8BB);
  color: var(--vp-text, #0B0F14);
}
.vpr-page .vpr-btn-secondary:hover { background: var(--vp-surface-2, #F3F2EC); }
.vpr-page .vpr-state__support { max-width: 34em; overflow-wrap: anywhere; }
.vpr-page .vpr-state__support a { color: var(--vp-text, #0B0F14); font-weight: 600; }
/* the full reference is long: it wraps instead of widening the card */
.vpr-page .vpr-ref {
  font-family: var(--vp-font-mono, "JetBrains Mono Variable", ui-monospace, monospace);
  font-size: 12px;
  word-break: break-all;
}

@media (prefers-reduced-motion: reduce) {
  .vpr-page .vpr-meter i { transition: none; }
}

@media (max-width: 420px) {
  .vpr-page .vpr-progress__head { flex-wrap: wrap; }
  .vpr-page .vpr-step.vi-stage { grid-template-columns: 36px 1fr; gap: 10px 12px; }
  .vpr-page .vpr-step.vi-stage > .vpr-chip { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .vpr-page .vi-header-note { display: none; }
  .vpr-page .vpr-entry,
  .vpr-page .vpr-progress { padding-top: 4px; }
  .vpr-page .vpr-entry {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "form" "facts";
    grid-template-rows: auto;
    gap: 28px;
  }
  .vpr-page .vpr-h1 { font-size: 30px; }
  .vpr-page .vpr-h1--sm { font-size: 28px; }
  .vpr-page .vpr-lead { font-size: 16px; }
  .vpr-page .vpr-card,
  .vpr-page .vpr-progress .vi-progress-card { padding: 20px; border-radius: 16px; }
  .vpr-page .vpr-progress { gap: 18px; }
  .vpr-page .vpr-state-wrap { padding-top: 4px; }
  .vpr-page .vpr-state { padding: 32px 20px; }
  .vpr-page .vpr-state__title { font-size: 22px; }
}

@media (max-width: 420px) {
  .vpr-page .vpr-actions { flex-direction: column; align-items: stretch; }
  .vpr-page .vpr-actions .vpr-btn { width: 100%; }
  .vpr-page .vpr-kv { width: 100%; grid-template-columns: 1fr; gap: 2px; }
  .vpr-page .vpr-kv dd { margin-bottom: 8px; }
}