/* ============================================================
   Brand Assessment — App Stylesheet
   ============================================================
   Sections:
     1.  Design tokens (light + dark mode)
     2.  Reset & base
     3.  Utilities
     4.  Progress bar
     5.  Theme toggle (sun/moon)
     6.  Buttons
     7.  Form elements
     8.  Intake screen
     9.  Page screen (question pages)
     10. Question blocks
     11. Multiple-choice options
     12. Likert scale
     13. Color picker (16x16 grid)
     14. Page navigation
     15. Loading screen
     16. Download screen
     17. Responsive overrides
     18. Reduced motion
   ============================================================ */


/* ── 1. Design tokens ─────────────────────────────────────── */

:root {
  /* Light mode (default) */
  --c-bg:            #F5F3EF;
  --c-bg-translucent: rgba(245,243,239,0.92);
  --c-surface:       #FFFFFF;
  --c-border:        #E2DED8;
  --c-border-focus:  #C85A2A;
  --c-text:          #1A1815;
  --c-text-2:        #5A5550;
  --c-text-3:        #9A9590;
  --c-accent:        #C85A2A;
  --c-accent-hover:  #A84820;
  --c-accent-soft:   #F5EDE8;
  --c-accent-2:      #2A6480;
  --c-accent-2-soft: #E5EFF4;
  --c-ghost-border:  #D0CBC5;
  --c-error:         #D4373E;

  /* Layout */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --shadow-sm: 0 1px 3px rgba(26,24,21,0.07);
  --shadow-md: 0 4px 20px rgba(26,24,21,0.10);
  --shadow-lg: 0 12px 40px rgba(26,24,21,0.14);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Motion */
  --transition: 0.15s ease;

  /* Progress bar */
  --progress-h-desktop: 44px;
  --progress-h-mobile:  40px;

  /* Content width */
  --content-max: 680px;
}

html.dark {
  /* Dark mode override */
  --c-bg:            #16140F;
  --c-bg-translucent: rgba(22,20,15,0.92);
  --c-surface:       #1F1C17;
  --c-border:        #332E27;
  --c-border-focus:  #E07647;
  --c-text:          #F1ECE3;
  --c-text-2:        #B5AFA4;
  --c-text-3:        #80776B;
  --c-accent:        #E07647;
  --c-accent-hover:  #F08858;
  --c-accent-soft:   #2A1E16;
  --c-accent-2:      #5FA0BC;
  --c-accent-2-soft: #1A2A33;
  --c-ghost-border:  #3F3933;
  --c-error:         #E15960;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
}


/* ── 2. Reset & base ──────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}

#app { min-height: 100vh; }


/* ── 3. Utilities ─────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.u-mt-sm { margin-top: 10px; }
.u-mt-md { margin-top: 12px; }
.u-mt-lg { margin-top: 24px; }
.u-text-accent { color: var(--c-accent); }
.u-text-error  { color: var(--c-error); }
.u-hidden { opacity: 0; }


/* ── 4. Progress bar ──────────────────────────────────────── */

.progress-track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--progress-h-desktop);
  background: var(--c-bg-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}
.progress-track__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-2);
  flex-shrink: 0;
}
.progress-track__bar {
  flex: 1;
  height: 10px;
  background: var(--c-border);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--c-accent);
  width: 0%;
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-track__pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ── 5. Theme toggle (sun/moon) ───────────────────────────── */

.theme-toggle {
  position: fixed;
  top: calc(var(--progress-h-desktop) + 12px);
  right: 20px;
  z-index: 199;
  width: 38px;
  height: 38px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-2);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.theme-toggle:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  transform: scale(1.05);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.theme-toggle__icon { display: block; }
/* Light mode: show moon (go to dark). Dark mode: show sun (go to light). */
.theme-toggle__icon--moon { display: block; }
.theme-toggle__icon--sun  { display: none; }
html.dark .theme-toggle__icon--moon { display: none; }
html.dark .theme-toggle__icon--sun  { display: block; }


/* ── 6. Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--transition), opacity var(--transition),
              transform 0.1s, border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn--primary {
  background: var(--c-accent);
  color: #FFFFFF;
}
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--primary:disabled {
  background: var(--c-border);
  color: var(--c-text-3);
  cursor: not-allowed;
  transform: none;
}
.btn--ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1.5px solid var(--c-ghost-border);
}
.btn--ghost:hover { border-color: var(--c-text-2); color: var(--c-text); }
.btn--full  { width: 100%; }
.btn--large { padding: 16px 24px; font-size: 17px; }


/* ── 7. Form elements ─────────────────────────────────────── */

.form-group { margin-bottom: 24px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
}
.form-optional {
  font-weight: 400;
  color: var(--c-text-3);
  font-size: 12px;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--transition), background var(--transition),
              color var(--transition);
  outline: none;
}
.form-input:focus { border-color: var(--c-border-focus); }
.form-input.input--error { border-color: var(--c-error); }

.gender-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gender-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-2);
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}
.gender-option:hover { border-color: var(--c-accent); color: var(--c-text); }
.gender-option.selected {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}


/* ── 8. Intake screen ─────────────────────────────────────── */

.intake-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 20px 40px;
  background: var(--c-bg);
}
.intake-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 48px 44px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.intake-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.intake-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: normal;
  color: var(--c-text);
  margin-bottom: 10px;
  line-height: 1.2;
}
.intake-subtitle {
  font-size: 15px;
  color: var(--c-text-2);
  margin-bottom: 32px;
  line-height: 1.6;
}


/* ── 9. Page screen (question pages) ──────────────────────── */
/* Uses flex column so the nav can sit naturally at the bottom
   without floating over content. */

.page-screen {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 76px 24px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Compact (15% reduction) — adjusted margins / gaps below */
.page-header {
  margin-bottom: 32px;
}
.page-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.page-theme {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
}
.page-counter {
  font-size: 12px;
  color: var(--c-text-3);
}
.page-subtitle {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: normal;
  color: var(--c-text);
  line-height: 1.35;
}


/* ── 10. Question blocks ──────────────────────────────────── */
/* Compact: container gap was 32px, now 24px (–8) */

.questions-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.question-text {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 12px;       /* was 16px */
  line-height: 1.45;          /* was 1.5 */
}
.question-subtext {
  font-size: 14px;
  color: var(--c-text-2);
  margin-bottom: 16px;        /* was 20px */
  font-style: italic;
}


/* ── 11. Multiple-choice options ──────────────────────────── */
/* Compact: gap 10→8, padding 14/18→12/16 */

.mc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--c-surface);
  transition: border-color var(--transition), background var(--transition);
}
.mc-option:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.mc-option.selected {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.mc-option__key {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-border);
  color: var(--c-text-2);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.mc-option.selected .mc-option__key {
  background: var(--c-accent);
  color: #fff;
}
.mc-option__text {
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.45;
  padding-top: 2px;
}


/* ── 12. Likert scale ─────────────────────────────────────── */
/* Compact: button 48→42 */

.likert-scale {
  display: flex;
  align-items: center;
  gap: 12px;
}
.likert-label {
  font-size: 12px;
  color: var(--c-text-3);
  flex: 0 0 auto;
  max-width: 120px;
  line-height: 1.3;
}
.likert-buttons {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.likert-btn {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              color var(--transition);
}
.likert-btn:hover { border-color: var(--c-accent); color: var(--c-text); }
.likert-btn.selected {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}


/* ── 13. Color picker (16×16 grid) ────────────────────────── */

.color-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 512px;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.color-cell {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.color-cell:hover {
  transform: scale(1.15);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.color-cell.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.5px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.4);
  border-radius: 1px;
}
.color-cell:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
  z-index: 2;
}
.color-selected-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s;
}
.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.color-swatch-label {
  font-size: 14px;
  color: var(--c-text-2);
  text-transform: capitalize;
}


/* ── 14. Page navigation ──────────────────────────────────── */
/* In-flow, NOT fixed. Sits at the bottom of .page-screen via
   margin-top: auto, properly centered under the question column. */

.page-nav {
  margin-top: auto;
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}
/* When only the Next button exists (page 1), give it the full width
   centered. We render an empty spacer div for the back slot to keep
   the grid two columns; this style anchors Next to the right. */
.page-nav__spacer { visibility: hidden; }
.page-nav .btn--ghost { justify-self: start; }
.page-nav .btn--primary { justify-self: end; }


/* ── 15. Loading screen ───────────────────────────────────── */

.loading-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 20px 40px;
}
.loading-card {
  text-align: center;
  max-width: 360px;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: normal;
  margin-bottom: 10px;
  color: var(--c-text);
}
.loading-title--error { color: var(--c-accent); }
.loading-status { font-size: 15px; color: var(--c-text-2); }


/* ── 16. Download screen ──────────────────────────────────── */

.download-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 20px 40px;
}
.download-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 48px 44px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.download-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.download-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: normal;
  color: var(--c-text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.download-desc {
  font-size: 15px;
  color: var(--c-text-2);
  margin-bottom: 24px;
  line-height: 1.6;
}
.download-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}
.pill--accent { background: var(--c-accent); color: #fff; }
.pill--subtle-dark { background: var(--c-border); color: var(--c-text-2); }
.download-filename {
  font-size: 12px;
  color: var(--c-text-3);
  margin-top: 10px;
  font-family: monospace;
}


/* ── 17. Responsive overrides ─────────────────────────────── */

@media (max-width: 500px) {
  .likert-scale {
    flex-direction: column;
    align-items: stretch;
  }
  .likert-label { text-align: center; }
}

@media (max-width: 480px) {
  .progress-track {
    padding: 0 14px;
    gap: 10px;
    height: var(--progress-h-mobile);
  }
  .progress-track__label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .theme-toggle {
    top: calc(var(--progress-h-mobile) + 10px);
    right: 14px;
    width: 34px;
    height: 34px;
  }
  .intake-card, .download-card { padding: 32px 24px; }
  .page-screen { padding: 64px 16px 32px; }
  .page-header { margin-bottom: 24px; }
}


/* ── 18. Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}