/* ============================================================================
   AI READINESS DIAGNOSTIC, SCREEN SCAFFOLDS
   Page-level layout for the four screen types. Container-query driven: the
   same markup adapts from 375px (phone frame) to desktop (window frame).
   Depends on tokens.css + app.css. Type uses cqi so it scales to the frame.
   ========================================================================== */

.scr {
  container-type: inline-size;
  height: 100%; width: 100%; overflow-y: auto; position: relative;
  font-family: var(--font-sans);
}
.scr::-webkit-scrollbar { width: 8px; }
.scr::-webkit-scrollbar-thumb { background: rgba(120,131,152,0.4); border-radius: 4px; }

/* shared screen chrome ------------------------------------------------------*/
.scr-top {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--gutter-mobile);
}
.scr-top__mark { width: 24px; height: 24px; flex: none; }
.scr-top__name { font-weight: var(--w-extrabold); font-size: var(--fs-sm); letter-spacing: var(--ls-heading); }
.scr-top__name small { display:block; font-size: 10px; font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; opacity: 0.6; }
/* full Circle Squared lockup, top-right brand reminder */
.scr-top__logo { height: 30px; width: auto; flex: none; display: block; }
/* logo links to circle-sq.com; display:contents keeps the img's layout intact */
.scr-top__logolink { display: contents; }
.scr-top__logolink .scr-top__logo { cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.scr-top__logolink:hover .scr-top__logo { opacity: 0.8; }
.scr-landing .scr-top__logo,
.scr-results .scr-top__logo { margin-left: auto; }
.scr-question .scr-top__logo { margin-left: var(--space-3); }

/* ===========================================================================
   1 · LANDING  (dark)
   ========================================================================= */
.scr-landing { background: radial-gradient(120% 90% at 80% -10%, #11182b 0%, var(--ink-1000) 55%); color: #fff; }
.scr-landing .scr-top { color: #fff; }
.scr-landing__body { padding: var(--space-6) var(--gutter-mobile) var(--space-12); display: grid; gap: var(--space-8); }
.scr-landing__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brand-red); margin: 0;
}
.scr-landing__eyebrow::before { content:""; width: 24px; height: 2px; background: var(--brand-red); }
.scr-landing h1 {
  font-size: clamp(2.4rem, 13cqi, 5.5rem); font-weight: var(--w-extrabold);
  line-height: 0.98; letter-spacing: var(--ls-display); margin: 0; text-wrap: balance;
}
.scr-landing h1 em { color: var(--brand-red); font-style: normal; }
.scr-landing__lead { font-size: clamp(1rem, 2.6cqi, 1.25rem); color: var(--ink-200); margin: var(--space-5) 0 0; max-width: 46ch; }
/* the 88% / 6% hook lifted from the LinkedIn carousel, one quiet line, no extra screen */
.scr-landing__stat {
  font-size: clamp(0.95rem, 2.3cqi, 1.1rem); color: var(--ink-300);
  margin: var(--space-5) 0 0; max-width: 46ch;
  padding-top: var(--space-5); border-top: 1px solid var(--ink-600);
}
.scr-landing__stat b { color: #fff; font-weight: var(--w-bold); }
.scr-landing__stat .scr-landing__stat-red { color: var(--brand-red); }

.scr-landing__form {
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-radius: var(--radius-2xl); padding: var(--space-6);
  display: grid; gap: var(--space-5);
}
.scr-landing__form .form-grid { display: grid; gap: var(--space-4); }
.scr-landing__formnote { font-size: var(--fs-caption); color: var(--ink-300); text-align: center; margin: 0; }
.scr-landing__formnote b { color: var(--ink-100); font-weight: var(--w-semibold); }

@container (min-width: 700px) {
  .scr-landing__body {
    grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-16);
    padding: var(--space-12) var(--space-12) var(--space-16); max-width: 1100px; margin: 0 auto;
  }
  .scr-landing__hero { grid-column: 1; }
  .scr-landing__form { grid-column: 2; align-self: center; }
  .scr-landing__form .form-grid { grid-template-columns: 1fr 1fr; }
  .scr-landing__form .form-grid .field--wide { grid-column: 1 / -1; }
}

/* ===========================================================================
   2 · QUESTION  (light)
   ========================================================================= */
.scr-question { background: var(--paper-50); color: var(--text-strong); }
.scr-question .scr-top { color: var(--text-strong); border-bottom: 1px solid var(--paper-200); }
.scr-question .scr-top__exit {
  margin-left: auto; font-size: var(--fs-sm); font-weight: var(--w-semibold);
  color: var(--text-muted); text-decoration: none;
}
.scr-question__body {
  padding: var(--space-6) var(--gutter-mobile) var(--space-10);
  max-width: 640px; margin: 0 auto; display: grid; gap: var(--space-6);
}
.scr-question__q { display: grid; gap: var(--space-2); }
.scr-question__num {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.scr-question h2 {
  font-size: clamp(1.4rem, 5cqi, 2rem); font-weight: var(--w-bold);
  line-height: 1.2; letter-spacing: var(--ls-heading); margin: 0; color: var(--text-strong); text-wrap: pretty;
}
.scr-question__foot { display: flex; justify-content: flex-end; }
/* Next appears after selection */
.scr-question__next {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.scr-question.has-answer .scr-question__next { opacity: 1; transform: none; pointer-events: auto; }

/* V3: question navigation , Back (from Q2) + Next (only on already-answered
   questions, i.e. when reviewing). Quiet outline buttons so they never compete
   with the answer options. */
.scr-question__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.qnav-spacer { display: inline-block; }
.qnav {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--w-semibold);
  min-height: 48px; padding: 10px var(--space-5);
  background: transparent; border: 1.5px solid var(--paper-300); border-radius: var(--radius-md);
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.qnav:hover { border-color: var(--text-strong); color: var(--text-strong); }
.qnav:focus-visible { outline: 3px solid var(--red-tint-24); outline-offset: 2px; }
.qnav__icon { flex: none; }
.qnav--next { color: var(--brand-red); border-color: var(--red-tint-24); }
.qnav--next:hover { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }
.qnav--next .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.qnav--next:hover .btn__arrow { transform: translateX(3px); }

@container (min-width: 700px) {
  .scr-question__body { padding-top: var(--space-12); gap: var(--space-8); }
  .scr-question__next .btn { min-width: 180px; }
}

/* ===========================================================================
   3 · RESULTS  (dark)
   ========================================================================= */
.scr-results { background: var(--ink-1000); color: #fff; }
.scr-results__hero {
  background: radial-gradient(120% 100% at 50% -20%, #141d34 0%, var(--ink-900) 60%);
  padding: var(--space-10) var(--gutter-mobile) var(--space-10);
  border-bottom: 1px solid var(--ink-600); text-align: left;
}
.scr-results__hero .scr-top { padding-left: 0; padding-top: 0; }
.scr-results__verdict { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.scr-results h1 {
  font-size: clamp(1.8rem, 7cqi, 3rem); font-weight: var(--w-extrabold);
  line-height: 1.05; letter-spacing: var(--ls-display); margin: 0; text-wrap: balance;
}
.scr-results h1 em { color: var(--brand-red); font-style: normal; }
.scr-results__sub { color: var(--ink-200); font-size: var(--fs-lead); margin: 0; max-width: 52ch; }

.scr-results__section { padding: var(--space-10) var(--gutter-mobile); max-width: 760px; margin: 0 auto; }
.scr-results__sectionhead {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-300); margin: 0 0 var(--space-6);
  display: flex; align-items: center; gap: var(--space-2);
}
.scr-results__sectionhead::before { content:""; width: 24px; height: 2px; background: var(--brand-red); }
.scr-results__radar { max-width: 440px; margin: 0 auto; }
.scr-results__legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--ink-100);
}
.scr-results__legend span { display: flex; gap: var(--space-2); align-items: center; }
.scr-results__legend .lk { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.scr-results__cards { display: grid; gap: var(--space-4); }
.scr-results__cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }
.scr-results__cta .btn { width: 100%; box-sizing: border-box; }

@container (min-width: 700px) {
  .scr-results__hero { padding: var(--space-12) var(--space-12) var(--space-12); }
  .scr-results__verdict { max-width: 900px; }
  .scr-results__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; max-width: 980px; margin: 0 auto; padding: var(--space-12) var(--space-12) 0; }
  .scr-results__split .scr-results__radar { margin: 0; }
  .scr-results__split .scr-results__section { padding: 0; max-width: none; }
  .scr-results__cta { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ===========================================================================
   4 · RESUME  (dark, centred)
   ========================================================================= */
.scr-resume { background: radial-gradient(120% 90% at 50% 0%, #11182b 0%, var(--ink-1000) 55%); color: #fff; display: grid; place-items: center; }
.scr-resume__card {
  text-align: center; padding: var(--space-10) var(--gutter-mobile); max-width: 440px; width: 100%;
  display: grid; gap: var(--space-6); justify-items: center;
}
.scr-resume__mark { width: 64px; height: 64px; }
.scr-resume h1 { font-size: clamp(1.6rem, 6cqi, 2.4rem); font-weight: var(--w-extrabold); letter-spacing: var(--ls-display); margin: 0; }
.scr-resume p { color: var(--ink-200); margin: 0; }
.scr-resume__prog { width: 100%; display: grid; gap: var(--space-2); }
.scr-resume__prog .progress__rail .progress__tick.is-done { background: #fff; }
.scr-resume__prog .progress__rail .progress__tick { background: var(--ink-600); }
.scr-resume__actions { display: grid; gap: var(--space-3); width: 100%; }

@container (min-width: 700px) {
  .scr-resume__card { max-width: 480px; }
}