/* =========================================================
   AI READINESS ASSESSMENT — the styles of assessment.html that
   site.css does not have. Loaded after site.css by
   app/(assessment)/layout.jsx (bump the ?v= there when this file
   changes: /assets is cached for 7 days).

   The approved pilot's styles (PILOT_NOTES.md) are the reference: same
   rules, values and order, only the names changed (pilot- -> quiz-,
   IMPLEMENTATION_NOTES.md §5.8). Each task moves the rules its steps
   need. Rules for this file:
   - Reuse the classes in site.css first.
   - Use only the existing variables (--ink, --gold, --line, ...).
   - Animate only transform and opacity.
========================================================= */

/* The hero (Nada's manager, after the pilot review): the breadcrumb and the
   eyebrow start at the left edge of the h1, and the h1 stays centered. The
   block is as wide as the h1; when the h1 wraps (phones), it takes the full
   width and its lines stay centered. */
.page-hero.center .hero-title{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
.page-hero.center .hero-title h1{text-align:center}

/* Questions 1–5. Every answer is an answer option (.quiz-opt,
   .quiz-opt.sel), laid out differently; the typed answers are .field inputs.
   Continue is disabled until the step is answered (.btn[disabled]). */

/* ALL helper text in the assessment (the "For example: …" lines, "Number of
   employees", …): the same font and size as the "Your answer" label
   (.field label), normal weight, muted color. Spacing is set where it is
   used. */
.quiz-help{font-family:var(--display);font-weight:400;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* Question 2: 4 compact options in one row, 2 per row on phones. The note
   under the row is .quiz-help. */
.quiz-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quiz-sizes .quiz-opt{padding:12px 10px;text-align:center}
@media(max-width:560px){.quiz-sizes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiz-opts-note{margin-top:12px}

/* Question 4: the 4 AI journey steps, left to right, joined by a thin line in
   the gaps (the color of the progress bar's gold end, --gold-hi). Under 760px
   they go one under the other and the line runs down between them. The line
   is drawn in the gaps, not behind the steps, because a selected step's
   background is see-through. */
.quiz-journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.quiz-journey li{position:relative;display:flex}
.quiz-journey li+li::before{content:"";position:absolute;top:50%;left:-20px;width:20px;height:1.5px;background:var(--gold-hi)}
/* The text starts at the top of each step, so the 4 titles line up. */
.quiz-journey .quiz-opt{width:100%;padding:16px 14px;display:flex;flex-direction:column;justify-content:flex-start}
.quiz-journey-title{display:block;font-weight:600}
.quiz-journey-text{display:block;margin-top:6px;font-weight:400;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){
  .quiz-journey{grid-template-columns:minmax(0,1fr);gap:16px}
  .quiz-journey li+li::before{top:-16px;left:50%;width:1.5px;height:16px}
  .quiz-journey .quiz-opt{padding:16px 18px}
}

/* Question 5: 6 cards, 3 per row, 2 under 900px (tablets), 1 under 560px
   (phones). The badge copies the service cards' badge (.feature .ic: 50px,
   14px corners, the card color at 15%); the color comes from --c.
   On phones the badge sits next to the title, so the 6 cards stay short. */
.quiz-challenges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quiz-challenges .quiz-opt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.quiz-challenges .ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--gold)) 15%,transparent);color:var(--c,var(--gold-lo))}
@media(max-width:900px){.quiz-challenges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .quiz-challenges{grid-template-columns:minmax(0,1fr)}
  .quiz-challenges .quiz-opt{flex-direction:row;align-items:center}
}
/* "Something else": its text field, under the cards. */
.quiz-other{margin:18px 0 0}

/* Contact step: consent checkbox + text + "Privacy policy" link.
   The checkbox is the browser's own, ticked in gold like a selected answer.
   The link reuses .tlink from site.css (gold underline on hover). An invalid
   email or website uses the site's .form-error line, as in the pilot's
   "Email me this report" field, so it needs no rule here. */
.quiz-consent{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--muted)}
.quiz-consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer}
.quiz-consent input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.quiz-consent label{cursor:pointer}
.quiz-consent .tlink:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* The AI advisor step (the pilot also used it on the optional question 6,
   which is now required and has no Skip): Back on the left, Skip + the
   next button together on the right (the group reuses .hero-actions from site.css: flex
   row, 14px gap). When the three buttons do not fit on one row (phones), the
   two on the right move to their own row, still on the right, instead of being
   squeezed. Button sizes and styles do not change. */
.quiz-nav-split{flex-wrap:wrap;align-items:center;gap:14px}
.quiz-nav-split .hero-actions{margin-left:auto;justify-content:flex-end}

/* A new question 7 (when it replaces the three dots) and a new chat message
   fade up with the same animation as a new quiz step (fadeUp from site.css:
   opacity + transform only). Reduced motion turns it off through the
   existing rule in site.css. */
.quiz-appear{animation:fadeUp .5s var(--ease)}

/* AI advisor conversation: the list of messages.
   An AI message looks like an answer option (.quiz-opt: sand, grey line,
   14px corners, same font and padding). The visitor's answer looks like a
   SELECTED option (.quiz-opt.sel: gold line, light gold background) and sits
   on the right. The small label above each message reuses .quiz-count.
   These are not buttons, so there is no hover and no pointer cursor. */
.quiz-chat{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.quiz-msg{max-width:100%}
.quiz-msg .quiz-count{margin-bottom:6px}
.quiz-msg-text{background:var(--sand);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;
  font-family:var(--display);font-weight:500;font-size:15px;overflow-wrap:anywhere}
.quiz-msg-you{align-self:flex-end;max-width:85%}
.quiz-msg-you .quiz-count{text-align:right}
.quiz-msg-you .quiz-msg-text{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}

/* AI advisor conversation: the answer box (the normal .field input) with the
   gold Send button next to it, both the same height. When the box would be
   narrower than 200px (phones), Send moves under it, on the right. */
.quiz-chat-form{margin-bottom:0}
.quiz-chat-row{display:flex;flex-wrap:wrap;gap:12px}
.quiz-chat-row input{flex:1 1 200px;min-width:0}
.quiz-chat-row .btn{margin-left:auto}

/* Question 7: the three dots shown where the follow-up question will be,
   while it is being written (D3, D22). Not in the pilot (its question never
   waits). The font, size, line height and space under it are the question's
   (.quiz-step h2), so the field under it barely moves when the question
   arrives; the color is the muted color of the pilot's other waiting lines.
   Each dot fades in and out in turn (opacity only). With reduced motion the
   animation is off (site.css) and a plain "..." stays. */
.quiz-dots{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.04;letter-spacing:.08em;margin-bottom:22px;color:var(--muted)}
.quiz-dots span span{animation:quizDot 1.2s var(--ease) infinite}
.quiz-dots span span:nth-child(2){animation-delay:.2s}
.quiz-dots span span:nth-child(3){animation-delay:.4s}
@keyframes quizDot{0%,100%{opacity:.25}50%{opacity:1}}

/* Results (task R8). The row for the summary (about 60%, task R10) and
   "Four key areas" (about 40%), side by side, top-aligned, 34px apart. Under
   760px the areas go under the summary, full width. On the results screen
   the row has the summary's space above and below. When only one block is
   there (until R10, or when the summary is not shown, D21), it takes the
   full width. */
.quiz-summary-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:34px;align-items:start;text-align:left}
.quiz-summary-row>:only-child{grid-column:1/-1}
.quiz-result .quiz-summary-row{margin:20px 0 44px}
@media(max-width:760px){.quiz-summary-row{grid-template-columns:minmax(0,1fr)}}
/* "Your summary." (task R10), the pilot's summary block: always inside the
   row above, so it has no space of its own. */
.quiz-summary{text-align:left}
.quiz-summary-text{color:var(--ink-soft)}

/* "AI in your industry" (task R9, the pilot's industry examples): the cards
   are the service cards (.feature): the same badge (.ic) and colors, with a
   line icon instead of the number. Same space below as the summary row. Under
   900px the cards are 1 per row, as site.css intends. The highlighted card
   stays raised: the same lift and shadow as .feature:hover. Its "Matches your
   answer" label (.del) is always terra, like the "Recommended" label. */
.quiz-examples{margin-bottom:44px}
@media(max-width:900px){.quiz-examples .feature-grid{grid-template-columns:1fr}}
.quiz-examples .quiz-match{transform:translateY(-6px);box-shadow:var(--shadow)}
.quiz-examples .quiz-match .del{color:var(--terra)}

/* "Four key areas": one row per area (.quiz-bars, below) with the quiz
   progress bar. The bar is empty (scaleX 0) until the results are known,
   then grows once from the left in about 1 second (transform only). Reduced
   motion: the site.css rule turns the animation off, so the bar simply
   appears full. The note under the rows is the site's small muted text. */
.quiz-areas .quiz-progress span{transform-origin:left center}
.quiz-area-wait{transform:scaleX(0)}
.quiz-area-grow{animation:quizGrow 1s var(--ease)}
@keyframes quizGrow{from{transform:scaleX(0)}to{transform:none}}
.quiz-areas-note{margin-top:18px;font-size:14px;line-height:1.6;color:var(--muted)}

/* The rows of "Four key areas" (the pilot's breakdown bars): a plain list;
   the area name in the form-label style (.field label) with its label on the
   right, then the quiz progress bar without its space below. */
.quiz-bars{list-style:none;margin:0;padding:0}
.quiz-bar+.quiz-bar{margin-top:18px}
.quiz-bar-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.quiz-bar-label{font-family:var(--display);font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.quiz-bar-value{flex:none;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--muted)}
.quiz-bar .quiz-progress{margin-bottom:0}

/* The stage word in place of the pilot's "A–" score (D17): the same style
   (.quiz-result .score in site.css: 4rem, bold, terra→gold gradient). On
   phones it gets smaller so it stays on one line: the widest word,
   "Adopting", is 4.31em wide, and the quiz card has 100vw - 138px of space
   (measured in R8). 22vw - 30px keeps a small margin: 64px from about 427px
   wide, 56px at 390, 49px at 360, 40px at 320. */
.quiz-result .score{font-size:min(4rem,calc(22vw - 30px))}

/* Results: "Ask a question." under the service cards (task R11, the pilot's
   block). The heading and the intro line copy "Your AI roadmap" (centered);
   the suggested questions are answer options (.quiz-opt), and the questions
   and answers reuse the AI advisor conversation (.quiz-chat, .quiz-msg…) and
   its answer row (.quiz-chat-row). Everything under the intro is
   left-aligned, like the summary. 44px above, like the space between the
   other result blocks. */
.quiz-ask{margin-top:44px}
.quiz-ask-body{text-align:left}
.quiz-ask .quiz-opts{margin-bottom:22px}
/* "From: <page>" under an answer (not in the pilot: the task). The site's
   small muted text; the links are underlined, darker on hover. */
.quiz-ask-source{margin-top:8px;font-size:13px;color:var(--muted)}
.quiz-ask-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.quiz-ask-source a:hover{color:var(--ink)}
.quiz-ask-source a:active{opacity:.7}
.quiz-ask-source a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* Results: "Email me this report" under the service cards (task R12 part 2,
   the pilot's block). The field and Send button reuse the AI advisor answer
   row (.quiz-chat-row); the confirmation is the contact forms' success line
   (.form-success), which gets the focus without a ring. */
.quiz-report-email{max-width:520px;margin:34px auto 0;text-align:left}
.quiz-report-email .form-success:focus{outline:none}

/* =========================================================
   Report page (assessment-report.html, task R12; the pilot's report page)
========================================================= */

/* Each part is its own block on the page background, 80px apart (the
   section padding of site.css on phones). This rule comes after
   .quiz-examples on purpose, so its space wins there too. */
.report-part{margin-bottom:80px}
/* The summary: the same width as the quiz card, left-aligned. */
.report-narrow{max-width:720px;margin-inline:auto}
/* The examples, the roadmap and the "Your answers" heading are centered,
   like on the results screen. */
.report-center{text-align:center}
/* Under 900px the cards are 1 per row, as site.css intends. On this page
   that includes the service cards (on the results screen they keep the known
   live bug). */
@media(max-width:900px){.report-body .feature-grid{grid-template-columns:1fr}}

/* "Your answers": the quiz card, with each question in the label style of
   the form fields (.field label) and the answer under it. */
.report-answers dl{margin:0}
.report-answer{margin-bottom:22px}
.report-answer:last-child{margin-bottom:0}
.report-answers dt{font-family:var(--display);font-weight:600;font-size:13.5px;margin-bottom:6px}
.report-answers dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
.report-answers-group{margin-top:34px}

/* Printing (and "Save as PDF"): only the report. The header, the mobile
   menu, the footer, the hero background, the grain layer over the page
   (body::before in site.css — printed, it greys out all the text) and the
   buttons are hidden; the hero loses the space kept for the fixed header.
   Card backgrounds are printed so the cards look like on screen. Sections,
   cards and answers are not split across two pages when they fit on one; a
   heading stays with what follows it. The cards stay 3 per row, as in the
   results card. */
@media print{
  body:has(.report-body) .site-header,
  body:has(.report-body) .mobile-menu,
  body:has(.report-body) .site-footer,
  body:has(.report-body)::before,
  .report-hero .mesh,
  .report-actions{display:none!important}
  .report-hero{padding:0 0 32px}
  .report-hero .reveal{opacity:1;transform:none;transition:none}
  .report-body{padding:0!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .report-body .wrap{width:100%}
  .report-part{margin-bottom:40px}
  .report-part,.report-body .feature,.report-answer{break-inside:avoid}
  .report-body h2,.report-body .quiz-count{break-after:avoid}
  .report-body .feature-grid{grid-template-columns:repeat(3,1fr)}
  /* Summary + "Four key areas" stay side by side on paper (a printed page is
     narrower than 760px), and the bars are printed full, not mid-growth. */
  .report-body .quiz-summary-row{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .report-body .quiz-area-grow{animation:none}
  .quiz-areas .quiz-bar{break-inside:avoid}
  .report-body .feature{transition:none}
  .report-answers{box-shadow:none}
}