/* ============================================
   /audit — public neuro-inclusion audit

   Standalone public page. Deliberately does NOT reuse the app shell: cold
   prospects arrive here from an outbound link with no account and no context,
   so the page carries its own chrome. Adjust palette throughout.
   ============================================ */

.audit-page {
  --audit-blue: #2563EB;
  --audit-blue-deep: #1D4ED8;
  --audit-bg: #EFF4FF;
  --audit-ink: #293142;
  --audit-muted: #6B7280;
  --audit-line: rgba(0, 0, 0, 0.08);

  min-height: 100dvh;
  background: var(--audit-bg);
  padding: 32px 16px calc(48px + var(--safe-bottom, 0px));
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--audit-ink);
}

.audit-wrap { max-width: 640px; margin: 0 auto; }

.audit-header { text-align: center; margin-bottom: 20px; }
.audit-logo { height: 46px; width: auto; object-fit: contain; display: block; margin: 0 auto 16px; }

.audit-progress {
  height: 4px; background: rgba(37, 99, 235, 0.15);
  border-radius: 999px; overflow: hidden; max-width: 320px; margin: 0 auto;
}
.audit-progress-bar {
  height: 100%; background: var(--audit-blue);
  border-radius: 999px; transition: width 0.35s ease;
}

.audit-card {
  background: #fff; border-radius: 18px; padding: 32px 28px;
  box-shadow: 0 2px 20px rgba(37, 99, 235, 0.07);
}

/* The greeting is a salutation, not the proposition — it should not be the
   loudest thing on the page. Weight sits on the lede below it. */
.audit-h1 { font-size: 23px; font-weight: 700; margin: 0 0 8px; line-height: 1.24; }
.audit-h2 { font-size: 20px; font-weight: 700; margin: 0 0 20px; line-height: 1.35; }
.audit-lede { font-size: 17px; line-height: 1.55; color: var(--audit-ink); margin: 0 0 14px; }

/* The one-line promise. Being able to see your result without handing over an
   address is the sharpest difference between this and every competitor's
   version, so it gets its own line rather than trailing a paragraph. */
.audit-promise {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14.5px; line-height: 1.5; font-weight: 600;
  color: var(--audit-blue-deep); margin: 0 0 22px;
}
.audit-promise-tick {
  flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--audit-blue); color: #fff;
}
.audit-step {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--audit-blue); margin: 0 0 10px;
}
.audit-fineprint { font-size: 12.5px; color: var(--audit-muted); line-height: 1.5; margin: 16px 0 0; }

/* Intro pillar list — a contents list, NOT controls. It used to be bold blue
   pills, which put it in the same visual family as the button underneath and
   invited clicks that do nothing. Quiet, inert, plainly not interactive. */
.audit-pillars {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  font-size: 13px; color: var(--audit-muted);
}
.audit-pillars li { display: flex; align-items: center; gap: 10px; }
/* Separator dots, rather than seven tappable-looking shapes. */
.audit-pillars li:not(:last-child)::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.45;
}

/* Buttons */
.audit-btn {
  font-family: inherit; font-size: 15px; font-weight: 600;
  border-radius: 10px; padding: 13px 22px; cursor: pointer;
  border: none; transition: background 0.15s, transform 0.08s;
}
.audit-btn:active { transform: scale(0.99); }
.audit-btn-primary { background: var(--audit-blue); color: #fff; width: 100%; }
.audit-btn-primary:hover { background: var(--audit-blue-deep); }
.audit-btn-primary:disabled { opacity: 0.6; cursor: default; }
.audit-btn-ghost {
  background: transparent; color: var(--audit-muted);
  padding: 9px 4px; font-size: 14px; font-weight: 500;
}
.audit-btn-ghost:hover { color: var(--audit-ink); }

/* Question options */
.audit-options { display: flex; flex-direction: column; gap: 9px; }
.audit-option {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left; font-family: inherit; font-size: 15px; line-height: 1.45;
  padding: 15px 17px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--audit-line); color: var(--audit-ink);
  transition: border-color 0.14s, background 0.14s;
}
.audit-option:hover { border-color: var(--audit-blue); background: var(--audit-bg); }
.audit-option.selected { border-color: var(--audit-blue); background: var(--audit-bg); }
.audit-option-dot {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--audit-line); transition: border-color 0.14s, box-shadow 0.14s;
}
.audit-option:hover .audit-option-dot,
.audit-option.selected .audit-option-dot {
  border-color: var(--audit-blue);
}
.audit-option.selected .audit-option-dot {
  background: var(--audit-blue); box-shadow: inset 0 0 0 3px #fff;
}

.audit-nav { display: flex; justify-content: space-between; margin-top: 18px; }

/* ── Results ──────────────────────────────── */
.audit-score-head {
  display: flex; align-items: center; gap: 20px;
  margin: 0 0 26px; flex-wrap: wrap;
}
.audit-score-ring {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--band) calc(var(--pct) * 1%), rgba(0, 0, 0, 0.07) 0);
  position: relative;
}
.audit-score-ring::before {
  content: ''; position: absolute; inset: 9px;
  background: #fff; border-radius: 50%;
}
/* Headline is the normalised percentage — "11 of 21" reads as an arbitrary
   scale, "52%" is instantly legible. Raw score kept underneath for anyone
   who wants to see the working. */
.audit-score-num {
  position: relative; font-size: 27px; font-weight: 700;
  line-height: 1; color: var(--band); letter-spacing: -0.01em;
}
.audit-score-den {
  position: relative; font-size: 10.5px; color: var(--audit-muted);
  margin-top: 3px; white-space: nowrap;
}
.audit-band-sub { font-size: 13.5px; color: var(--audit-muted); margin: 0; }

.audit-bars { display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; }
.audit-bar-row { display: grid; grid-template-columns: 148px 1fr 36px; align-items: center; gap: 12px; }
.audit-bar-label { font-size: 13.5px; font-weight: 600; }
.audit-bar-track { height: 8px; background: rgba(0, 0, 0, 0.07); border-radius: 999px; overflow: hidden; }
.audit-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.audit-bar-score { font-size: 12.5px; color: var(--audit-muted); text-align: right; }

/* AI commentary */
.audit-commentary {
  background: var(--audit-bg); border-radius: 12px;
  padding: 18px 20px; margin: 0 0 20px; min-height: 76px;
}
.audit-commentary p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.audit-commentary p:last-child { margin-bottom: 0; }
.audit-commentary-loading { padding: 6px 0 2px; }
.audit-loading-row { display: flex; align-items: center; gap: 6px; }
.audit-commentary-loading-text {
  font-size: 13.5px; color: var(--audit-muted); margin-left: 6px;
  transition: opacity 0.2s ease;
}
/* An indeterminate sweep. The wait is a live OpenAI call, so there is no real
   percentage to report — this says "working", not "34% complete". */
.audit-loading-track {
  height: 3px; margin-top: 12px; border-radius: 999px;
  background: rgba(37, 99, 235, 0.15); overflow: hidden;
}
.audit-loading-bar {
  height: 100%; width: 38%; border-radius: 999px;
  background: var(--audit-blue);
  animation: auditSweep 1.5s ease-in-out infinite;
}
@keyframes auditSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .audit-loading-bar { animation: none; width: 100%; opacity: 0.45; }
  .audit-dot { animation: none; }
}
.audit-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--audit-blue);
  opacity: 0.35; animation: audit-pulse 1.3s ease-in-out infinite;
}
.audit-dot:nth-child(2) { animation-delay: 0.18s; }
.audit-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes audit-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

.audit-next {
  border-left: 3px solid var(--audit-blue);
  padding: 2px 0 2px 15px; margin: 0 0 26px;
}
.audit-next-title { font-size: 14px; font-weight: 700; margin: 0 0 5px; }
.audit-next-body { font-size: 14.5px; line-height: 1.6; color: #41495B; margin: 0; }

/* Collapsed score summary — the strip that replaces the ring + bars once the
   conversation starts. Tapping it brings the full breakdown back. */
.audit-score-mini {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
  background: var(--audit-bg); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 14px; margin: 0 0 18px;
  transition: border-color 0.14s, background 0.14s;
}
/* The `hidden` attribute is display:none in the UA sheet, which an author
   `display:flex` would otherwise beat. */
.audit-score-mini[hidden] { display: none; }
.audit-score-mini:hover { border-color: var(--audit-blue); }
.audit-score-mini-pill {
  flex: none; color: #fff; font-weight: 700; font-size: 14px;
  padding: 5px 10px; border-radius: 999px; line-height: 1;
}
.audit-score-mini-label { font-size: 14.5px; font-weight: 700; color: var(--audit-ink); }
.audit-score-mini-hint {
  margin-left: auto; font-size: 12.5px; color: var(--audit-blue); font-weight: 600;
}

#auditScoreBlock.collapsed,
.audit-next.collapsed { display: none; }

/* Post-result conversation */
.audit-chat { margin: 0 0 26px; }
.audit-chat-invite {
  border-top: 1px solid var(--audit-line);
  padding-top: 20px; margin-bottom: 14px;
}
.audit-chat-invite.done { display: none; }
.audit-chat-invite-title { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.audit-chat-invite-sub { font-size: 14px; line-height: 1.55; color: #41495B; margin: 0; }

.audit-chat-starters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.audit-chat-starter {
  font-family: inherit; font-size: 13px; line-height: 1.35; text-align: left;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--audit-line);
  color: var(--audit-blue-deep); font-weight: 600;
  transition: border-color 0.14s, background 0.14s;
}
.audit-chat-starter:hover { border-color: var(--audit-blue); background: var(--audit-bg); }

.audit-chat-log { display: flex; flex-direction: column; gap: 10px; }
.audit-chat-log:not(:empty) { margin-bottom: 14px; }

.audit-chat-msg {
  max-width: 88%; border-radius: 14px; padding: 11px 14px;
  font-size: 14.5px; line-height: 1.6;
}
.audit-chat-msg p { margin: 0 0 10px; }
.audit-chat-msg p:last-child { margin-bottom: 0; }
.audit-chat-msg ul,
.audit-chat-msg ol { margin: 0 0 10px; padding-left: 20px; }
.audit-chat-msg ul:last-child,
.audit-chat-msg ol:last-child { margin-bottom: 0; }
.audit-chat-msg li { margin: 0 0 5px; }
.audit-chat-msg li:last-child { margin-bottom: 0; }
.audit-chat-msg strong { font-weight: 700; }
.audit-chat-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; padding: 1px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
}
.audit-chat-user code { background: rgba(255, 255, 255, 0.22); }
.audit-chat-user {
  align-self: flex-end; background: var(--audit-blue); color: #fff;
  border-bottom-right-radius: 5px;
}
.audit-chat-assistant {
  align-self: flex-start; background: var(--audit-bg); color: var(--audit-ink);
  border-bottom-left-radius: 5px;
  /* Lifts the bubble off the commentary panel, which shares this background. */
  border: 1px solid rgba(37, 99, 235, 0.16);
}
.audit-chat-typing { display: flex; align-items: center; gap: 5px; padding: 14px; }

.audit-chat-form {
  display: flex; align-items: flex-end; gap: 8px;
  border: 1.5px solid var(--audit-line); border-radius: 12px;
  background: #fff; padding: 6px 6px 6px 12px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.audit-chat-form:focus-within {
  border-color: var(--audit-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.audit-chat-form textarea {
  flex: 1; font-family: inherit; font-size: 15px; line-height: 1.5;
  border: none; outline: none; resize: none; background: transparent;
  color: var(--audit-ink); padding: 8px 0; max-height: 140px;
}
.audit-chat-form textarea:disabled { opacity: 0.55; }
.audit-chat-send {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border: none; border-radius: 9px;
  background: var(--audit-blue); color: #fff; cursor: pointer;
  transition: background 0.14s, opacity 0.14s;
}
.audit-chat-send:hover { background: var(--audit-blue-deep); }
.audit-chat-send:disabled { opacity: 0.5; cursor: default; }

.audit-chat-meta {
  font-size: 12.5px; color: var(--audit-muted); margin: 9px 2px 0;
}
.audit-chat-meta:empty { display: none; }

.audit-chat-closed {
  background: var(--audit-bg); border-radius: 12px; padding: 18px 18px 20px;
}
.audit-chat-closed-title { font-size: 15.5px; font-weight: 700; margin: 0 0 5px; }
.audit-chat-closed-sub {
  font-size: 14px; line-height: 1.55; color: #41495B; margin: 0 0 14px;
}

/* Social proof — sector-matched where the link carried a sector macro */
.audit-proof { margin: 0 0 22px; }
.audit-proof-compact {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--audit-line);
}
/* Claim on top, then a quiet label for the logos under it. */
.audit-proof-count {
  font-size: 16px; font-weight: 700; color: var(--audit-ink);
  margin: 0 0 12px; line-height: 1.35;
}
.audit-proof-lead {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--audit-muted); margin: 0 0 9px;
}
.audit-proof-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 9px; margin: 0 0 18px;
}
.audit-proof-compact .audit-proof-logos { margin-bottom: 0; }
/* These are tiles, not transparent logos — Adjust's originals are each a
   wordmark centred on its own background, at wildly different scales and
   aspect ratios. A uniform tile with `contain` normalises them without
   cropping anything; `cover` clips Leeds Beckett and Diversity and Ability,
   and greyscale turns the coloured ones into unreadable grey blocks. */
.audit-proof-logo {
  width: 104px; height: 60px; object-fit: contain;
  background: #fff; border: 1px solid var(--audit-line);
  border-radius: 8px;
}
.audit-proof-name {
  display: grid; place-items: center; text-align: center;
  width: 104px; height: 60px; padding: 0 8px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--audit-line); border-radius: 8px;
  font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--audit-muted);
}

.audit-proof-quote {
  margin: 0; padding: 0 0 0 15px;
  border-left: 3px solid var(--audit-line);
}
.audit-proof-quote p {
  font-size: 14.5px; line-height: 1.6; color: #41495B; margin: 0 0 8px;
  font-style: italic;
}
.audit-proof-quote cite {
  font-size: 12.5px; font-weight: 700; font-style: normal;
  color: var(--audit-ink);
}

/* Lead capture */
.audit-capture {
  background: #F8FAFC; border: 1px solid var(--audit-line);
  border-radius: 14px; padding: 22px 20px;
}
.audit-capture-title { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.audit-capture-sub { font-size: 14px; line-height: 1.55; color: #41495B; margin: 0 0 16px; }
.audit-capture-form { display: flex; flex-direction: column; gap: 9px; }
.audit-capture-form input {
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 1.5px solid var(--audit-line); border-radius: 10px;
  background: #fff; color: var(--audit-ink);
}
.audit-capture-form input:focus {
  outline: none; border-color: var(--audit-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.audit-sent { text-align: center; padding: 6px 0; }

.audit-footer {
  text-align: center; margin-top: 22px;
  font-size: 12.5px; color: var(--audit-muted);
}

@media (max-width: 560px) {
  .audit-page { padding: 20px 12px 40px; }
  .audit-card { padding: 24px 20px; border-radius: 14px; }
  .audit-h1 { font-size: 22px; }
  .audit-h2 { font-size: 18px; }
  .audit-bar-row { grid-template-columns: 116px 1fr 32px; gap: 9px; }
  .audit-bar-label { font-size: 12.5px; }
  .audit-chat-msg { max-width: 94%; }
  .audit-score-mini-hint { display: none; }
  .audit-proof-logos { gap: 7px; }
  .audit-proof-logo,
  .audit-proof-name { width: 86px; height: 50px; }
  .audit-proof-name { font-size: 10.5px; }
}

.audit-footer-link {
  font-family: inherit; font-size: inherit; color: var(--audit-muted);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline;
}
.audit-footer-link:hover { color: var(--audit-ink); }