/* =========================================================================
   Lit Librarian  |  styles.css
   Mobile-first. Brand: modern library meets warm bookstore.
   ========================================================================= */
 
:root {
  /* Brand palette */
  --navy: #16213E;
  --cream: #F7F1E3;
  --gold: #D8A31A;
  --green: #2F6F4E;
  --paper: #FFFDF7;
  --charcoal: #232323;
  --sky: #8ECAE6;
  --plum: #5A3E6B;
 
  /* Derived / functional */
  --gold-dark: #b8880f;
  --navy-soft: #24345c;
  --line: rgba(22, 33, 62, 0.12);
  --shadow-sm: 0 1px 3px rgba(22, 33, 62, 0.08), 0 1px 2px rgba(22, 33, 62, 0.06);
  --shadow-md: 0 6px 20px rgba(22, 33, 62, 0.12);
  --shadow-lg: 0 18px 45px rgba(22, 33, 62, 0.18);
  --radius: 14px;
  --radius-lg: 22px;
 
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 
  --maxw: 1120px;
}
 
* { box-sizing: border-box; }
 
html { scroll-behavior: smooth; }
 
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
 
img, svg { max-width: 100%; }
 
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}
 
/* Accessibility helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
 
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 6px;
}
 
/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: 16px;
  padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.1;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 9px 16px; font-size: 15px; }
.btn-lg { padding: 15px 30px; font-size: 18px; }
 
.btn-primary { background: var(--gold); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-dark); color: #fff; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
  background: #e7ddc3; color: #8a8471; cursor: not-allowed; box-shadow: none;
}
 
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(22,33,62,0.25); }
.btn-ghost:hover { background: rgba(22,33,62,0.06); border-color: var(--navy); }
 
.btn-amazon { background: var(--navy); color: #fff; width: 100%; margin-top: 4px; }
.btn-amazon:hover { background: var(--navy-soft); }
 
/* =========================================================================
   Header / Nav
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand-mark { color: var(--gold); display: inline-flex; }
.brand-text { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.brand-the { font-style: italic; font-weight: 600; font-size: 0.72em; opacity: 0.8; margin-right: 1px; }
.brand-accent { color: var(--gold-dark); }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  color: var(--navy); text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 8px 12px; border-radius: 8px;
}
.site-nav a:hover { background: rgba(22,33,62,0.06); }
.site-nav a[href="#account"] { display: none; }
 
/* =========================================================================
   Hero
   ========================================================================= */
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 800;
  color: var(--green); margin: 0 0 10px;
}
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(142,202,230,0.22), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--paper));
  padding: 56px 0 64px;
}
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero-title {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 7vw, 56px);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 18px;
}
.hero-sub { font-size: clamp(17px, 2.5vw, 20px); color: #3a4256; margin: 0 0 26px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.hero-note { font-size: 15px; color: #5a6070; font-weight: 700; margin: 0; }
 
/* Hero art: a little shelf */
.hero-art { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.shelf {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 22px; background: var(--navy); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 420px;
}
.book {
  font-family: var(--font-head); font-weight: 600; color: var(--cream);
  padding: 26px 10px; border-radius: 10px; text-align: center; font-size: 15px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);
}
.b1 { background: var(--gold); color: var(--navy); }
.b2 { background: var(--green); }
.b3 { background: var(--sky); color: var(--navy); }
.b4 { background: var(--plum); }
.b5 { background: var(--cream); color: var(--navy); }
.b6 { background: var(--gold-dark); }
.hero-tagline { font-family: var(--font-head); font-style: italic; color: var(--green); font-size: 20px; margin: 0; }
 
/* =========================================================================
   Sections generic
   ========================================================================= */
.section-title {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  font-size: clamp(26px, 4.5vw, 38px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.01em;
}
.section-sub { font-size: 18px; color: #4a5164; margin: 0 0 30px; max-width: 40em; }
 
/* How it works */
.how { padding: 64px 0; }
.steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm); position: relative;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy);
  font-family: var(--font-head); font-weight: 700; font-size: 20px; margin-bottom: 14px;
}
.step-title { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 21px; margin: 0 0 8px; }
.step-text { margin: 0; color: #4a5164; }
.how-cta { text-align: center; }
 
/* =========================================================================
   Survey
   ========================================================================= */
.survey { padding: 50px 0 64px; background: linear-gradient(180deg, var(--cream), var(--paper)); }
.survey-container { max-width: 720px; }
.survey-progress { margin-bottom: 20px; }
.progress-track { height: 10px; background: rgba(22,33,62,0.1); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 999px; transition: width .4s ease; width: 0; }
.progress-text { font-size: 14px; font-weight: 800; color: var(--green); margin: 10px 0 0; letter-spacing: .02em; }
 
.survey-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-md);
}
.q-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--gold-dark); margin: 0 0 8px; }
.q-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(22px, 4vw, 28px); line-height: 1.15; margin: 0 0 8px; }
.q-help { color: #5a6070; margin: 0 0 22px; font-size: 15px; }
 
.options { display: grid; grid-template-columns: 1fr; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px;
  padding: 15px 18px; font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--charcoal);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.option:hover { border-color: var(--gold); background: #fff; }
.option-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid rgba(22,33,62,0.3); background: #fff; position: relative;
}
.option.is-selected { border-color: var(--green); background: rgba(47,111,78,0.08); }
.option.is-selected .option-check { background: var(--green); border-color: var(--green); }
.option.is-selected .option-check::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.option-label { flex: 1; }
 
.text-input {
  width: 100%; padding: 15px 18px; font-size: 17px; font-family: var(--font-body);
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--charcoal);
}
.text-input:focus { border-color: var(--gold); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(216,163,26,0.25); }
.text-input::placeholder { color: #9a9788; }
 
.survey-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.survey-nav #back-btn[hidden] { display: none; }
.survey-nav #next-btn { margin-left: auto; }
.survey-hint { text-align: center; color: #6a7080; font-size: 14px; margin: 16px 0 0; }
 
/* shake animation for over-limit / feedback */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shake { animation: shake .3s ease; }
 
/* =========================================================================
   Results
   ========================================================================= */
.results { padding: 54px 0 68px; }
.result-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--gold-dark); margin: 0 0 8px; }
.result-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(28px, 5vw, 42px); margin: 0 0 14px; letter-spacing: -0.01em; }
.result-summary { font-size: 19px; color: #3a4256; max-width: 46em; margin: 0 0 34px; }
 
.rec-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
 
.rec-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.rec-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; color: #fff; box-shadow: var(--shadow-sm);
}
.rec-tag-best-match { background: var(--green); }
.rec-tag-confidence-builder { background: var(--sky); color: var(--navy); }
.rec-tag-stretch-pick { background: var(--plum); }
.rec-tag-wild-card { background: var(--gold-dark); }
 
.rec-cover {
  min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 50px 20px 22px; text-align: left;
}
.rec-cover-title { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.15; }
.rec-cover-author { font-weight: 700; font-size: 14px; opacity: .85; }
 
.rec-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rec-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 22px; margin: 0; line-height: 1.15; }
.rec-author { margin: 0; color: #5a6070; font-weight: 700; font-size: 15px; }
.rec-meta { margin: 4px 0 0; }
.rec-format {
  display: inline-block; font-size: 13px; font-weight: 800; color: var(--green);
  background: rgba(47,111,78,0.1); padding: 4px 10px; border-radius: 999px;
}
.rec-best, .rec-why { margin: 4px 0 0; font-size: 15px; color: #3a4256; }
.rec-label { font-weight: 800; color: var(--navy); }
.rec-why { flex: 1; }
.rec-body .btn-amazon { margin-top: 12px; }
 
.result-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 40px 0 10px; }
.affiliate-note { font-size: 13px; color: #6a7080; text-align: center; margin: 18px auto 0; max-width: 40em; }
 
/* Next journey */
.next-journey {
  margin-top: 44px; background: var(--navy); color: var(--cream);
  border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-lg);
}
.nj-title { font-family: var(--font-head); font-weight: 700; font-size: 26px; margin: 0 0 6px; color: #fff; }
.nj-sub { margin: 0 0 22px; color: rgba(247,241,227,0.8); font-size: 15px; }
.nj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nj-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 14px 16px;
}
.nj-label { grid-column: 1 / 2; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.nj-book { grid-column: 1 / 2; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: #fff; }
.nj-author { grid-column: 1 / 2; font-size: 14px; color: rgba(247,241,227,0.75); }
.nj-link {
  grid-column: 2 / 3; grid-row: 1 / 4; align-self: center;
  color: var(--navy); background: var(--gold); text-decoration: none; font-weight: 800;
  padding: 9px 16px; border-radius: 999px; font-size: 14px;
}
.nj-link:hover { background: #fff; }
 
/* =========================================================================
   Account preview
   ========================================================================= */
.account { padding: 64px 0; background: linear-gradient(180deg, var(--paper), var(--cream)); }
.account-inner { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.feature-list { columns: 1; list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.feature-list li { position: relative; padding-left: 30px; font-weight: 700; color: #33384a; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.account-actions { display: flex; flex-wrap: wrap; gap: 14px; }
 
.account-card {
  background: var(--navy); color: var(--cream); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-lg);
}
.ac-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--gold); margin: 0 0 16px; }
.ac-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-weight: 700; font-size: 15px; }
.ac-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sky); flex: 0 0 auto; }
.ac-dot.green { background: var(--green); }
.ac-dot.gold { background: var(--gold); }
.ac-dot.plum { background: var(--plum); }
.ac-foot { margin: 16px 0 0; font-size: 13px; color: rgba(247,241,227,0.7); }
 
/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--navy); color: var(--cream); padding: 40px 0; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.footer-brand { font-family: var(--font-head); font-weight: 700; font-size: 24px; margin: 0; }
.footer-tag { font-style: italic; font-family: var(--font-head); color: var(--gold); margin: 4px 0 0; }
.footer-meta .affiliate-note { text-align: left; color: rgba(247,241,227,0.8); margin: 0 0 8px; }
.footer-small { font-size: 13px; color: rgba(247,241,227,0.65); margin: 0; }
 
/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 640px) {
  .options { grid-template-columns: 1fr 1fr; }
  .rec-grid { grid-template-columns: 1fr 1fr; }
  .feature-list { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
 
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .account-inner { grid-template-columns: 1.2fr 0.8fr; }
  .rec-grid { grid-template-columns: repeat(4, 1fr); }
  .site-nav a[href="#account"] { display: inline-block; }
}
 
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .progress-fill, .btn { transition: none; }
  .shake { animation: none; }
}
 
/* =========================================================================
   Reading Level Check (upgraded feature)
   ========================================================================= */
.reading-check {
  padding: 64px 0;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(90,62,107,0.12), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--paper));
}
.rc-inner { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.rc-badge {
  display: inline-block; background: var(--plum); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.rc-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.rc-points li { position: relative; padding-left: 30px; font-weight: 700; color: #33384a; }
.rc-points li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.rc-card {
  background: var(--navy); color: var(--cream); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-lg); text-align: center;
}
.rc-card-title { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 800; color: var(--sky); margin: 0 0 12px; }
.rc-card-level { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--gold); margin: 0; }
.rc-card-grade { margin: 4px 0 18px; color: rgba(247,241,227,0.8); font-weight: 700; }
.rc-card-metrics { display: flex; justify-content: center; gap: 26px; margin-bottom: 16px; }
.rc-card-metrics div { display: flex; flex-direction: column; }
.rc-card-metrics span { font-family: var(--font-head); font-weight: 700; font-size: 26px; }
.rc-card-metrics small { font-size: 12px; color: rgba(247,241,227,0.75); }
.rc-card-note { margin: 0; font-size: 14px; color: rgba(247,241,227,0.85); }
 
/* Inline button on the survey reading-level question */
.assess-inline-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  background: rgba(90,62,107,0.08); border: 2px dashed rgba(90,62,107,0.4); color: var(--plum);
  font-family: var(--font-body); font-weight: 800; font-size: 15px; cursor: pointer;
  padding: 12px 18px; border-radius: 12px; width: 100%; justify-content: center;
}
.assess-inline-btn:hover { background: rgba(90,62,107,0.14); border-color: var(--plum); }
.assess-inline-badge {
  background: var(--plum); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
 
/* =========================================================================
   Reading Check modal
   ========================================================================= */
.assess-modal {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(22, 33, 62, 0.55); backdrop-filter: blur(3px); padding: 24px 16px; overflow-y: auto;
}
.assess-modal[hidden] { display: none; }
.assess-dialog {
  position: relative; background: var(--paper); width: 100%; max-width: 640px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 32px 26px; margin: auto;
}
.assess-close {
  position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(22,33,62,0.08); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer;
}
.assess-close:hover { background: rgba(22,33,62,0.16); }
 
.assess-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--plum); margin: 0 0 6px; }
.assess-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(24px, 4.5vw, 32px); margin: 0 0 10px; line-height: 1.15; }
.assess-lead { color: #4a5164; margin: 0 0 22px; }
.assess-grade { font-weight: 800; color: var(--green); margin: -4px 0 18px; }
 
.assess-field { margin-bottom: 20px; }
.assess-field label { display: block; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.assess-select {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: var(--font-body); font-weight: 700;
  border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--charcoal);
}
 
.assess-modes { border: none; padding: 0; margin: 0 0 22px; }
.assess-modes legend { font-weight: 800; color: var(--navy); margin-bottom: 10px; padding: 0; }
.assess-mode {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; cursor: pointer; background: #fff;
}
.assess-mode:hover { border-color: var(--plum); }
.assess-mode input { margin-top: 4px; }
.assess-mode span { display: flex; flex-direction: column; }
.assess-mode strong { color: var(--navy); }
.assess-mode small { color: #5a6070; font-size: 13px; margin-top: 2px; }
.assess-mode.is-disabled { opacity: .6; }
 
.assess-passage {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: 12px; padding: 22px 22px; font-size: 20px; line-height: 1.75; color: var(--charcoal);
  font-family: var(--font-head); font-weight: 400; margin-bottom: 16px;
}
.assess-timer { font-weight: 800; color: var(--green); margin-bottom: 10px; }
.assess-mic { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--plum); margin-bottom: 10px; }
.assess-mic-dot { width: 12px; height: 12px; border-radius: 50%; background: #d33; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
 
.assess-q { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; background: #fff; }
.assess-q legend { font-weight: 800; color: var(--navy); padding: 0 6px; }
.assess-opt { display: flex; align-items: center; gap: 10px; padding: 9px 6px; cursor: pointer; font-weight: 700; color: #33384a; }
.assess-opt input { width: 18px; height: 18px; }
 
.assess-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.assess-result-actions { margin-top: 24px; }
 
.assess-metrics { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px 0 20px; }
.assess-metric {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.am-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--plum); }
.am-value { font-family: var(--font-head); font-weight: 700; font-size: 28px; color: var(--navy); }
.am-value small { font-size: 15px; color: #5a6070; }
.am-note { font-size: 13px; color: #4a5164; }
.assess-interpret { font-size: 17px; color: #2b3245; background: rgba(47,111,78,0.08); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; }
.assess-basis { font-size: 12px; color: #6a7080; margin: 0 0 4px; }
 
@media (min-width: 640px) {
  .assess-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .rc-inner { grid-template-columns: 1.25fr 0.75fr; }
}
 
/* =========================================================================
   Library availability (upgraded) + location capture
   ========================================================================= */
.btn-library {
  background: transparent; color: var(--green); border-color: var(--green);
  width: 100%; margin-top: 8px;
}
.btn-library:hover { background: rgba(47,111,78,0.1); }
.rec-library-note { font-size: 12px; color: #6a7080; margin: 8px 0 0; text-align: center; }
 
.assess-location {
  background: rgba(47,111,78,0.07); border: 1px solid rgba(47,111,78,0.25);
  border-radius: 12px; padding: 16px 18px; margin: 4px 0 6px;
}
.al-title { font-weight: 800; color: var(--navy); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.al-badge {
  background: var(--plum); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.al-sub { font-size: 14px; color: #4a5164; margin: 0 0 12px; }
.al-row { display: flex; gap: 10px; flex-wrap: wrap; }
.al-input {
  flex: 1 1 180px; min-width: 0; padding: 11px 14px; font-size: 16px; font-family: var(--font-body);
  border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--charcoal);
}
.al-input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(47,111,78,0.2); }
.al-status { font-size: 13px; color: var(--green); font-weight: 700; margin: 10px 0 0; min-height: 1em; }
 
/* =========================================================================
   Describe the reader (text + audio)
   ========================================================================= */
.describe-input {
  width: 100%; padding: 15px 18px; font-size: 17px; font-family: var(--font-body);
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper);
  color: var(--charcoal); line-height: 1.6; resize: vertical; min-height: 128px;
}
.describe-input:focus { border-color: var(--gold); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(216,163,26,0.25); }
.describe-input::placeholder { color: #9a9788; }
.describe-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.describe-hint { font-size: 13px; color: #6a7080; }
#describe-record.is-recording { border-color: #d33; color: #d33; }
.describe-mic-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: 2px; }
#describe-record.is-recording .describe-mic-dot { animation: pulse 1s infinite; }
 
/* =========================================================================
   Reading Journey (narrative)
   ========================================================================= */
.journey {
  margin-top: 44px; background: var(--navy); color: var(--cream);
  border-radius: var(--radius-lg); padding: 34px 26px; box-shadow: var(--shadow-lg);
}
.journey-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--sky); margin: 0 0 6px; }
.journey-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 4.5vw, 34px); color: var(--gold); margin: 0 0 12px; line-height: 1.1; }
.journey-why { font-size: 17px; color: rgba(247,241,227,0.92); margin: 0 0 26px; max-width: 46em; }
 
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.journey-step {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 18px 18px;
}
.journey-step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
}
.journey-step-body { min-width: 0; }
.journey-step-tag { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 800; color: var(--sky); margin-bottom: 4px; }
.journey-step-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: #fff; margin: 0; line-height: 1.15; }
.journey-step-author { font-size: 14px; color: rgba(247,241,227,0.75); margin: 2px 0 6px; }
.journey-step-why { font-size: 15px; color: rgba(247,241,227,0.9); margin: 0 0 10px; }
.journey-step-links { display: flex; flex-wrap: wrap; gap: 10px; }
.journey-link {
  color: var(--navy); background: var(--gold); text-decoration: none; font-weight: 800;
  padding: 8px 14px; border-radius: 999px; font-size: 14px;
}
.journey-link:hover { background: #fff; }
.journey-link-lib { background: transparent; color: var(--cream); border: 2px solid rgba(255,255,255,0.35); padding: 6px 12px; }
.journey-link-lib:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.journey-foot { margin: 22px 0 0; font-size: 14px; color: rgba(247,241,227,0.8); font-style: italic; }
 
@media (min-width: 760px) {
  .journey-steps { grid-template-columns: 1fr 1fr; }
}
 

/* ============ SMALL SCREEN HEADER ============ */
/* Keeps the sticky header from overflowing (and causing horizontal scroll)
   on narrow phones. The primary CTA stays; text links are reachable by scroll. */
@media (max-width: 560px) {
  .site-nav a { display: none; }
  .site-nav { gap: 0; }
  .nav-inner { height: 58px; gap: 10px; }
  .brand-text { font-size: 17px; }
}