/* ============================================================================
   Assessment — screen-specific styles. Depends on tokens.css + base.css.
   ============================================================================ */

/* ---- App frame ---- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: rgba(250,248,244,.92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: var(--t-md); text-decoration: none; letter-spacing: -.01em; }
.brand .dot { color: var(--teal); }
.site-header .tagline { font-size: var(--t-xs); color: var(--muted); letter-spacing: .04em; }

main { padding: var(--s-16) 0 var(--s-20); }
.screen { animation: fade var(--dur) var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.display { font-size: clamp(2rem, 5vw, var(--t-3xl)); letter-spacing: -.02em; }
h2.serif { font-size: var(--t-xl); letter-spacing: -.015em; }
.lead { font-size: var(--t-md); color: var(--ink); margin-top: var(--s-4); }
.small { font-size: var(--t-sm); }

/* ---- Landing ---- */
.landing .lead { margin-bottom: var(--s-8); }
.landing-facts { display: flex; gap: var(--s-10); margin: var(--s-6) 0 var(--s-8); flex-wrap: wrap; }
.fact { display: flex; flex-direction: column; }
.fact-n { font-size: var(--t-2xl); font-weight: 700; color: var(--navy); line-height: 1; }
.fact-l { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-1); }
.actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }

/* ---- Progress ---- */
.progress { margin-bottom: var(--s-10); }
.progress-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); }
.progress-count { font-size: var(--t-xs); color: var(--muted); }
.progress-track { height: 3px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width var(--dur) var(--ease); }
.progress-dots { display: flex; gap: 6px; margin-top: var(--s-3); }
.dot { width: 100%; height: 4px; flex: 1; background: var(--hairline); border-radius: 1px; }
.dot.done { background: var(--teal); }
.dot.cur { background: var(--navy); }

/* ---- Domain head ---- */
.domain-head { margin-bottom: var(--s-8); }
.domain-head h2 { margin-top: var(--s-2); }
.domain-head .eyebrow .num { color: var(--teal); }

/* ---- Questions ---- */
.question { border: 0; padding: 0; margin: 0 0 var(--s-10); }
.q-stem { font-family: var(--sans); font-weight: 600; font-size: var(--t-md); color: var(--navy); padding: 0; margin-bottom: var(--s-4); line-height: 1.4; }
.q-id { color: var(--teal); font-size: var(--t-sm); margin-right: var(--s-2); }

.options { display: flex; flex-direction: column; gap: var(--s-2); }
.option {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  align-items: start;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.option:hover { border-color: var(--teal); }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-marker {
  font-size: var(--t-xs); font-weight: 500; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: 2px 6px; margin-top: 1px; min-width: 30px; text-align: center;
}
.opt-text { color: var(--ink); font-size: var(--t-base); line-height: 1.5; }
.option.selected { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 2px 0 0 var(--teal); }
.option.selected .opt-marker { background: var(--teal); color: #fff; border-color: var(--teal); }
.option.selected .opt-text { color: var(--navy); }

/* ---- Screen nav ---- */
.screen-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-12);
  padding-top: var(--s-6); border-top: 1px solid var(--hairline);
}
.nav-status { flex: 1; text-align: center; }

/* ---- Review ---- */
.review-domain { margin-bottom: var(--s-8); }
.review-dh { font-size: var(--t-md); color: var(--navy); margin-bottom: var(--s-3); }
.review-dh .num { color: var(--teal); margin-right: var(--s-2); font-size: var(--t-sm); }
.review-row {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  font-family: var(--sans);
}
.review-row:hover { border-color: var(--teal); }
.rr-q { display: block; font-size: var(--t-sm); color: var(--muted); margin-bottom: 2px; }
.rr-a { display: block; font-size: var(--t-sm); color: var(--ink); }
.rr-a .mono { color: var(--teal); margin-right: var(--s-2); }

/* ---- Results ---- */
.results-hero { background: linear-gradient(135deg, var(--navy-deepest), var(--navy-deep) 60%, var(--navy)); color: #fff; padding: var(--s-16) 0; margin-bottom: var(--s-12); }
.results-hero .eyebrow { color: var(--gold); }
.result-level { display: flex; align-items: center; gap: var(--s-8); margin: var(--s-4) 0; }
.rl-num { font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; line-height: .9; color: #fff; }
.rl-of { color: var(--faint); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; }
.rl-name { color: #fff; font-size: clamp(1.6rem, 4vw, var(--t-2xl)); margin: var(--s-1) 0; }
.rl-score { color: var(--teal); font-size: var(--t-sm); }
.rl-interp { color: #C8D2DE; font-size: var(--t-md); max-width: 52ch; margin-top: var(--s-2); }

.results-body { }
.block { margin-bottom: var(--s-16); }
.block h3.serif { font-size: var(--t-lg); margin-bottom: var(--s-2); }

/* bars */
.bars { display: flex; flex-direction: column; gap: var(--s-4); }
.bar-row { }
.bar-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); gap: var(--s-3); }
.bar-name { font-weight: 600; color: var(--navy); font-size: var(--t-sm); }
.bar-val { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.bar-track { height: 8px; background: var(--tint); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 2px; transition: width 600ms var(--ease); }
.bar-fill.band-1 { background: var(--band-1); }
.bar-fill.band-2 { background: var(--band-2); }
.bar-fill.band-3 { background: var(--band-3); }
.bar-fill.band-4 { background: var(--band-4); }
.bar-fill.band-5 { background: var(--band-5); }

/* strengths + gaps */
.sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); }
.sg-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.sg-list li { border-left: 2px solid var(--hairline); padding-left: var(--s-4); }
.sg-list.strengths li { border-left-color: var(--teal); }
.sg-list.gaps li { border-left-color: var(--amber); }
.sg-name { display: block; font-weight: 600; color: var(--navy); font-size: var(--t-sm); margin-bottom: 2px; }
.sg-s { color: var(--muted); font-weight: 400; margin-left: var(--s-1); }
.sg-note { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

/* actions */
.action-list { list-style: none; padding: 0; counter-reset: act; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.action { counter-increment: act; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-5); position: relative; padding-left: var(--s-12); }
.action::before { content: counter(act); position: absolute; left: var(--s-5); top: var(--s-5); font-family: var(--serif); font-weight: 700; color: var(--teal); font-size: var(--t-lg); line-height: 1; }
.action-dom { display: block; font-size: var(--t-xs); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-bottom: var(--s-1); }
.action-text { display: block; color: var(--ink); }

/* cta */
.cta-block { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-10); }
.cta-block .actions { margin-top: var(--s-5); }

.results-foot { text-align: center; padding-top: var(--s-4); }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deepest); color: var(--faint); padding: var(--s-10) 0; margin-top: var(--s-16); }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.site-footer .fw { font-family: var(--serif); color: #fff; font-weight: 700; }
.site-footer .fine { font-size: var(--t-xs); color: #5F7186; }
.site-footer a { color: #7FB8AA; font-size: var(--t-sm); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  main { padding: var(--s-10) 0 var(--s-16); }
  .sg-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .result-level { gap: var(--s-5); }
  .landing-facts { gap: var(--s-6); }
  .site-header .tagline { display: none; }
  .screen-nav { flex-wrap: wrap; }
  .nav-status { order: 3; flex-basis: 100%; text-align: left; }
}