/* Font variables the compiled Tailwind theme expects. In the Next build these
   come from next/font classes on <html>; here we set them directly. The
   @font-face families (Inter, IBM Plex Mono) are declared in base.css. */
:root {
  --font-inter: "Inter", "Inter Fallback";
  --font-plex: "IBM Plex Mono", "IBM Plex Mono Fallback";
}

[hidden] { display: none !important; }

/* Company footer (shared with the Sampleify site). Utilities Procterify's
   compiled stylesheet doesn't include, with Tailwind's generated values. */
.text-on-contrast\/45 { color: color-mix(in oklab, var(--on-contrast) 45%, transparent); }
.text-on-contrast\/50 { color: color-mix(in oklab, var(--on-contrast) 50%, transparent); }
.text-on-contrast\/65 { color: color-mix(in oklab, var(--on-contrast) 65%, transparent); }
.border-on-contrast\/15 { border-color: color-mix(in oklab, var(--on-contrast) 15%, transparent); }
@media (hover: hover) {
  .hover\:border-on-contrast\/30:hover { border-color: color-mix(in oklab, var(--on-contrast) 30%, transparent); }
  .hover\:text-footer-accent:hover { color: var(--brand-1); }
}
/* footer accent = this site's brand (Sampleify uses its amber here) */
.text-footer-accent { color: var(--brand-1); }
.decoration-footer-accent { text-decoration-color: var(--brand-1); }

/* Active-section dot under the primary nav (same as the Sampleify site):
   4×4 accent dot, centred under the word, 8px below the text. Position and
   motion are set by site.js. */
.nav-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}

/* ---------------- Adaptive testing section (#adaptive) ---------------- */
.ad-rules { display: grid; gap: 20px; }
.ad-rule { display: flex; gap: 14px; align-items: flex-start; }
.ad-rule-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 11px; border: 1px solid;
}
.ad-rule-ic.ad-up { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 25%, transparent); color: var(--ok-strong); }
.ad-rule-ic.ad-down { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 25%, transparent); color: var(--danger-strong); }
.ad-rule-ic.ad-same { background: var(--surface-tint); border-color: var(--accent-soft); color: var(--accent); }

/* chart: level labels | plot, then question numbers under the plot */
.ad-chart { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 10px; }
.ad-levels { position: relative; width: 62px; }
.ad-levels span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.ad-plot { position: relative; height: 190px; }
@media (min-width: 640px) { .ad-plot { height: 220px; } .ad-levels { width: 72px; } .ad-levels span { font-size: 11px; } }
.ad-lane { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line-2); }
.ad-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-path {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.ad-dot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 9999px;
  display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 3px var(--surface);
}
.ad-dot svg { width: 11px; height: 11px; }
@media (max-width: 639px) { .ad-dot { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; } .ad-dot svg { width: 9px; height: 9px; } }
.ad-ok { background: var(--ok); }
.ad-bad { background: var(--danger); }
.ad-dot.ad-next { background: var(--surface); border: 2px dashed var(--accent); }
.ad-dot.ad-next::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--accent); opacity: 0; animation: adRing 1.8s ease-out 1.8s infinite;
}
.ad-qs { display: grid; grid-template-columns: repeat(10, 1fr); text-align: center; }
.ad-qs span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ad-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.ad-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.ad-key-dot { width: 9px; height: 9px; border-radius: 9999px; }
.ad-next-label {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ad-next-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--surface-tint); border: 1px solid var(--accent-soft); color: var(--accent-strong);
  font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600;
}

/* the path draws itself and the answers appear in order, once in view */
[data-reveal=wait] .ad-line { clip-path: inset(0 100% 0 0); }
[data-reveal=play] .ad-line { animation: adDraw 1.6s linear both; }
[data-reveal=wait] .ad-dot { opacity: 0; transform: scale(.4); }
[data-reveal=play] .ad-dot { animation: adPop .35s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(160ms * var(--i, 0)); }
@keyframes adDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes adPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes adRing { 0% { opacity: .55; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }

/* question formats */
.ad-formats { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line-2); }
@media (min-width: 1024px) { .ad-formats { margin-top: 96px; padding-top: 72px; } }
.ad-fmt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .ad-fmt-grid { gap: 16px; } }
@media (min-width: 1024px) { .ad-fmt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ad-fmt { padding: 16px; }
@media (min-width: 640px) { .ad-fmt { padding: 22px; } }