/* =====================================================================
   PRIYAN Digital Growth Score™ — questionnaire
   ---------------------------------------------------------------------
   Loaded only by the audit pages, so the rest of the site does not pay
   for it. Everything here builds on the tokens in main.css; no colour,
   spacing or type scale is reinvented.

   Step visibility is decided by CSS rather than JavaScript. The server
   marks the open step with .is-current, so the wizard is already in the
   right state at first paint and there is no flash of all nine steps.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1  LAYOUT
   --------------------------------------------------------------------- */
.audit-flow {
  padding: calc(var(--s-9) + 2rem) 0 var(--s-9);
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(108, 124, 255, .10), transparent 70%),
    var(--offwhite);
}

.audit-flow__head { text-align: center; margin-bottom: var(--s-7); }
.audit-flow__title { font-size: var(--fs-h2); margin: .3rem 0 .6rem; }
.audit-flow__lead {
  max-width: 44rem; margin: 0 auto;
  color: var(--text-muted); font-size: var(--fs-body);
}

.audit-panel { padding: 0; overflow: hidden; }

/* ---------------------------------------------------------------------
   2  PROGRESS
   --------------------------------------------------------------------- */
.aprogress { display: none; margin-bottom: var(--s-6); }
.js .aprogress { display: block; }

.aprogress__bar {
  height: 6px; border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.aprogress__fill {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .35s ease;
}

.aprogress__steps {
  display: flex; justify-content: space-between; gap: .25rem;
  list-style: none; margin: .75rem 0 0; padding: 0;
}
.aprogress__step { flex: none; }

.aprogress__dot {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text-subtle);
  font-size: var(--fs-xs); font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.aprogress__dot[disabled] { cursor: default; opacity: .55; }
.aprogress__dot.is-done { background: var(--accent-soft); border-color: #C9D0FF; color: var(--accent-ink); }
.aprogress__dot.is-current {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: 0 0 0 4px rgba(108, 124, 255, .18);
}

.aprogress__label {
  margin: .6rem 0 0;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle);
}

/* On a phone the dots go entirely.

   Nine numbered circles are unreadable at that width, and shrinking them
   to ticks made them worse: a 10px dot needs a 44px hit area to be
   tappable, and nine of those overlap so badly you cannot reliably hit
   the one you meant. They were a shortcut nobody could take.

   Nothing is lost. The bar carries role="progressbar" with its
   aria-valuetext, the "Step n of 9" label states it in words, Back and
   Continue are the navigation, and the review step offers a Change link
   per section — which is the better way back anyway. */
@media (max-width: 560px) {
  .aprogress__steps { display: none; }
  .aprogress__label { margin-top: .5rem; }
}

/* ---------------------------------------------------------------------
   3  STEPS
   --------------------------------------------------------------------- */
.astep { padding: var(--s-7); }
.astep + .astep { border-top: 1px solid var(--line); }

/* Without JavaScript every step is shown as one long form. */
.js .astep { display: none; }
.js .astep.is-current { display: block; }
.js .astep + .astep { border-top: 0; }

.astep__count {
  margin: 0 0 .35rem;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-subtle);
}
.js .astep__count { display: none; } /* The progress bar already says this. */

.astep__title { font-size: var(--fs-h3); margin: 0 0 .5rem; }
.astep__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.astep__intro { color: var(--text-muted); margin: 0 0 var(--s-6); max-width: 40rem; }

.astep__nav {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: flex-end;
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.astep__back { margin-right: auto; }
.astep__back, .astep__next { display: none; }
.js .astep__back, .js .astep__next { display: inline-flex; }
/* Step one has nowhere to go back to. */
.js .astep[data-step="1"] .astep__back { display: none; }

/* ---------------------------------------------------------------------
   4  QUESTIONS
   --------------------------------------------------------------------- */
.aq + .aq { margin-top: var(--s-6); }
.aq__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.aq__text {
  display: block; padding: 0;
  font-size: var(--fs-body); font-weight: 700; color: var(--ink);
  margin-bottom: .35rem;
}
.aq__help, .aq__note {
  margin: 0 0 .6rem;
  font-size: var(--fs-sm); color: var(--text-subtle);
}
.aq__note { margin: .6rem 0 0; }
.aq__error { min-height: 0; }
.aq.has-error .aq__text { color: var(--danger); }

.aq__options { display: grid; gap: .5rem; margin-top: .75rem; }
@media (min-width: 620px) {
  .aq__options--grid { grid-template-columns: 1fr 1fr; }
}

/* A dependent question is visually subordinate to the one it follows. */
.aq--dependent {
  margin-top: var(--s-5);
  padding-left: var(--s-5);
  border-left: 3px solid var(--line);
}
.aq--dependent.is-empty { opacity: .55; }

/* --- The choice control ---------------------------------------------
   The whole row is the target, which matters most on a phone. Focus is
   drawn on the row because the real input is visually hidden. */
.achoice {
  position: relative;
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-size: var(--fs-sm); line-height: 1.45;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 3rem;
}
.achoice:hover { border-color: #C9D0FF; background: var(--accent-soft); }
.achoice input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0; padding: 0;
}
.achoice__mark {
  flex: none; margin-top: .1rem;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--line-strong, #C9CFDD);
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.achoice--box .achoice__mark { border-radius: 5px; }

.achoice input:checked ~ .achoice__mark {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.achoice--box input:checked ~ .achoice__mark {
  box-shadow: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.achoice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.achoice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.achoice__label { color: var(--text); }
.achoice:has(input:checked) .achoice__label { color: var(--ink); font-weight: 600; }

/* Browsers without :has still get a clear state from the mark itself. */
.achoice.is-disabled { opacity: .45; cursor: not-allowed; }
.achoice.is-disabled:hover { border-color: var(--line); background: var(--white); }

.aq.has-error .achoice { border-color: #F3C6C6; }

/* ---------------------------------------------------------------------
   5  BUSINESS STEP EXTRAS
   --------------------------------------------------------------------- */
.form__grid--3 { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .form__grid--3 { grid-template-columns: repeat(3, 1fr); } }

.alinks {
  border: 0; padding: var(--s-6) 0 0; margin: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s-5);
  min-width: 0;
}

.audit-form .form__grid + .form__grid,
.audit-form .form__grid + .field,
.audit-form .field + .field { margin-top: var(--s-5); }

/* ---------------------------------------------------------------------
   6  REVIEW STEP
   --------------------------------------------------------------------- */
.areview { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.areview:empty { display: none; }

.areview__group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-5);
  background: var(--offwhite);
}
.areview__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-bottom: .6rem;
}
.areview__title { font-size: var(--fs-body); margin: 0; }

.areview__list {
  display: grid; grid-template-columns: 1fr; gap: .1rem .75rem;
  margin: 0; font-size: var(--fs-sm);
}
@media (min-width: 620px) { .areview__list { grid-template-columns: minmax(10rem, 18rem) 1fr; } }
.areview__list dt { color: var(--text-subtle); margin: .35rem 0 0; }
.areview__list dd { color: var(--ink); font-weight: 600; margin: 0 0 .35rem; }
@media (min-width: 620px) { .areview__list dd { margin-top: .35rem; } }

.linkish {
  border: 0; background: none; padding: 0;
  color: var(--accent-ink); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--ink); }

.aconsent { margin-top: var(--s-5); }
.choice--consent { align-items: flex-start; }
.aconsent__fine {
  margin: .75rem 0 0;
  font-size: var(--fs-xs); color: var(--text-subtle);
}

.aform__save {
  display: none;
  margin: 0; padding: 0 var(--s-7) var(--s-6);
  font-size: var(--fs-xs); color: var(--text-subtle);
}
.js .aform__save.is-visible { display: block; }
.aform__help { font-size: var(--fs-sm); color: var(--text-muted); }

.audit-form.is-submitting { opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------------
   7  MOBILE
   Large targets, a nav bar that stays reachable, and no horizontal
   scrolling at any width.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .audit-flow { padding-top: calc(var(--s-8) + 2rem); }
  .astep { padding: var(--s-6) var(--s-5); }
  .achoice { padding: .95rem 1rem; }

  .js .astep__nav {
    position: sticky; bottom: 0; z-index: 3;
    margin: var(--s-6) calc(var(--s-5) * -1) calc(var(--s-6) * -1);
    padding: var(--s-4) var(--s-5);
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .astep__nav .btn { flex: 1 1 auto; justify-content: center; }
  .astep__back { flex: 0 1 auto; }

  .aform__save { padding: 0 var(--s-5) var(--s-5); }
}

/* Grid and flex children must be allowed to shrink or long words and
   inputs push the layout wider than the viewport. */
.audit-flow .form__grid > *,
.audit-flow .aq__options > *,
.audit-flow .areview__list > * { min-width: 0; }

@media print {
  .aprogress, .astep__nav, .aform__save, .aform__help { display: none !important; }
  .js .astep { display: block !important; }
}

/* ---------------------------------------------------------------------
   8  TOUCH TARGETS
   ---------------------------------------------------------------------
   The progress dots stay small — nine 44px circles across a phone would
   be a second navigation bar — so the hit area is expanded around them
   instead. The visual and the target are different rectangles, which is
   the point.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Tablets keep the dots — there is room for them there. */
  .aprogress__dot { position: relative; }
  .aprogress__dot::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  /* Keep neighbouring hit areas from overlapping into each other. */
  .aprogress__steps { gap: .6rem; }
}