:root {
  --blue: #1B5E7A;
  --blue-dark: #13455A;
  --off-white: #F7F5EF;
  --paper: #FFFFFF;
  --text: #17232B;
  --muted: #5F6F78;
  --border: #D8E1E5;
  --warning: #8A4B00;
  --error: #9A1C1C;
  --success: #246B45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Aptos, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--off-white);
  line-height: 1.45;
}

.site-header {
  background: var(--blue);
  color: white;
  padding: 2rem clamp(1rem, 4vw, 4rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}

.eyebrow { margin: 0 0 .35rem; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; opacity: .9; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.subtitle { margin: .5rem 0 0; max-width: 760px; opacity: .9; }
.language-switcher { display: grid; gap: .4rem; min-width: 160px; font-size: .9rem; }
.language-switcher select { padding: .55rem; border-radius: .45rem; border: 0; }
.language-switcher label { font-size: .78rem; font-weight: 700; opacity: .9; }
.language-switcher option:disabled { color: #8B98A0; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem clamp(1rem, 4vw, 4rem) 3rem;
}

.progress {
  align-self: start;
  position: sticky;
  top: 1rem;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: 1rem;
}
.progress ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.progress li { padding: .55rem .65rem; border-radius: .45rem; color: var(--muted); font-size: .9rem; }
.progress li.current { background: var(--blue); color: white; }
.progress li.complete { color: var(--blue-dark); font-weight: 600; }

form { min-width: 0; }
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 8px 24px rgba(20, 53, 68, .07);
}
.section { display: none; }
.section.active { display: block; }

h2 { margin-top: 0; color: var(--blue-dark); }
h3 { margin-top: 0; color: var(--blue-dark); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.field { display: grid; gap: .35rem; align-content: start; }
.field.full { grid-column: 1 / -1; }
.short-field { max-width: 360px; }
label { font-weight: 650; }
.required { color: var(--error); }
.help, .counter { color: var(--muted); font-size: .88rem; margin: 0; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .7rem .75rem;
  font: inherit;
  background: white;
}
textarea { min-height: 110px; resize: vertical; }
textarea.short-feedback { min-height: 76px; }
select[multiple] { min-height: 145px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(27, 94, 122, .18); border-color: var(--blue); }

.subcard, .assessment-card {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem;
  background: #FAFCFD;
}
.assessment-card h3 { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.badge { font-size: .85rem; color: var(--muted); font-weight: 500; }
.table-like { display: grid; gap: .5rem; }
.table-row { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; align-items: center; }
.seed-row { display: grid; grid-template-columns: 70px 2fr 1fr; gap: .75rem; align-items: center; }
.table-row.header, .seed-row.header { font-weight: 700; color: var(--blue-dark); border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.total-line { font-weight: 700; color: var(--blue-dark); }
.total-line.error { color: var(--error); }
.total-line.ok { color: var(--success); }

.checkbox-group { display: grid; gap: .45rem; border: 1px solid var(--border); padding: .75rem; border-radius: .5rem; }
.checkbox-item { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.checkbox-item input { width: auto; margin-top: .25rem; }

.actions, .nav-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; flex-wrap: wrap; }
.nav-actions { display: none; }
.nav-actions.visible { display: flex; }
button {
  border: 0;
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
button.primary { background: var(--blue); color: white; }
button.primary:hover { background: var(--blue-dark); }
button.secondary { background: #E7EEF1; color: var(--blue-dark); }
button:disabled { opacity: .45; cursor: not-allowed; }
.message { margin: .75rem 0 0; padding: .75rem; border-radius: .5rem; display: none; }
.message.show { display: block; }
.message.error { background: #FFF1F1; color: var(--error); border: 1px solid #F0B4B4; }
.message.success { background: #EDF8F1; color: var(--success); border: 1px solid #AEDBC0; }
.message.warning { background: #FFF7E8; color: var(--warning); border: 1px solid #E8C783; }
.review-table { width: 100%; border-collapse: collapse; margin-top: .75rem; }
.review-table th, .review-table td { border: 1px solid var(--border); padding: .55rem; text-align: left; vertical-align: top; }
.review-table th { background: #EDF4F7; color: var(--blue-dark); }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .site-header, .app-shell { display: block; }
  .language-switcher { margin-top: 1rem; }
  .progress { position: static; margin-bottom: 1rem; }
  .grid { grid-template-columns: 1fr; }
  .table-row, .seed-row { grid-template-columns: 1fr; }
}


/* R3I production additions */
.container { max-width: 1120px; margin: 0 auto; padding: 20px; }
.route-card { margin-bottom: 1.25rem; }
.route-options { display: grid; gap: .75rem; margin-top: .75rem; }
.single-code-gate { max-width: 360px; margin-left: auto; margin-right: auto; justify-items: center; }
.single-code-gate .route-start-button { width: auto; min-width: 210px; }
.route-code-entry { display: grid; gap: .35rem; }
.route-option { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; }
.pathway-note { background: #EDF4F7; color: var(--blue-dark); border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; margin: .75rem 0; }
.form-section { background: var(--paper); border: 1px solid var(--border); border-radius: .9rem; padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(20, 53, 68, .07); }
.form-section h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.question { margin-bottom: 1.15rem; padding-bottom: 1rem; border-bottom: 1px solid #EEF2F3; }
.question:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.question-label { font-weight: 650; margin-bottom: .45rem; display: block; }
.question-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .76rem; color: var(--paper); margin-left: .35rem; font-weight: 500; }
.question-note { font-size: .86rem; color: var(--muted); font-style: italic; margin: .25rem 0 .45rem; }
.option { display: block; padding: .24rem 0; font-size: .94rem; font-weight: 400; }
.option input { width: auto; margin-right: .45rem; }
.engagement-only { border-left: 3px solid #D8E8EF; padding-left: 1rem; }
.submit-row { text-align: center; margin: 1.5rem 0; }
.submit-btn { background: var(--blue); color: white; border: none; padding: .85rem 2rem; font-size: 1rem; font-weight: 700; border-radius: .5rem; cursor: pointer; }
.submit-btn:hover { background: var(--blue-dark); }
.matrix-wrap { overflow-x: auto; margin-top: .75rem; }
.matrix-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.matrix-table th, .matrix-table td { border: 1px solid var(--border); padding: .6rem; vertical-align: middle; text-align: center; }
.matrix-table th:first-child { text-align: left; width: 34%; }
.matrix-table thead th { background: #EDF4F7; color: var(--blue-dark); font-size: .86rem; }
.matrix-table input { width: auto; }
.matrix-terminal { margin-top: .85rem; padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; background: #FAFCFD; }
.matrix-table th[scope="row"] { font-weight: 600; color: var(--text); }
.matrix-table input:disabled { opacity: .45; cursor: not-allowed; }
#dashboard { display: none; margin-top: 2rem; }
.dash-header { text-align: center; margin-bottom: 1.5rem; }
.dash-header h2 { font-size: 1.45rem; font-weight: 800; color: var(--blue-dark); }
.dash-header p { color: var(--muted); font-size: .9rem; }
.dash-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.dash-col { background: var(--paper); border: 1px solid var(--border); border-radius: .9rem; padding: 1.25rem; box-shadow: 0 8px 24px rgba(20, 53, 68, .07); }
.dash-col-title { font-size: 1rem; font-weight: 800; text-align: center; color: var(--blue-dark); }
.dash-col-subtitle { font-size: .78rem; color: var(--muted); text-align: center; margin-bottom: .75rem; }
.dash-score { text-align: center; margin: .75rem 0; }
.dash-score-num { font-size: 2rem; font-weight: 800; }
.dash-score-max { font-size: .9rem; color: var(--muted); }
.dash-gauge { display: flex; justify-content: center; margin: .75rem 0; }
.dash-gauge canvas { max-width: 120px; max-height: 120px; }
.dash-level { text-align: center; padding: .25rem .75rem; border-radius: 20px; font-size: .82rem; font-weight: 700; display: inline-block; margin: .5rem auto; }
.dash-level-wrap { text-align: center; }
.level-strong { background: #E8F5EC; color: #1A7A3A; }
.level-developing { background: #FEF6E6; color: #B07800; }
.level-limited { background: #FCE8E8; color: #A83232; }
.dash-highlight { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.dash-highlight-label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.hl-strong { color: #1A7A3A; }
.hl-developing { color: #B07800; }
.hl-limited { color: #A83232; }
.dash-highlight-dim { font-size: .86rem; font-weight: 700; margin-bottom: .15rem; }
.dash-highlight-text { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.dash-summary { background: var(--paper); border: 1px solid var(--border); border-radius: .9rem; padding: 1.5rem; box-shadow: 0 8px 24px rgba(20, 53, 68, .07); margin-bottom: 1rem; }
.dash-summary h3 { font-size: 1rem; font-weight: 800; margin-bottom: .5rem; color: var(--blue-dark); }
.dash-summary p { font-size: .95rem; line-height: 1.55; }
.cta-placeholder { text-align: center; margin: 1.5rem 0; }
.cta-btn { background: var(--blue); color: white; border: none; padding: .85rem 2rem; font-size: .95rem; font-weight: 700; border-radius: .5rem; cursor: pointer; opacity: 1; }
.cta-btn:disabled { cursor: not-allowed; opacity: .6; }
.cta-message { max-width: 620px; margin: .85rem auto 0; text-align: left; }
.cta-contact { font-size: .75rem; color: var(--text-light); margin-top: .55rem; }
.cta-contact a { color: var(--blue); font-weight: 700; }
#debug-toggle { display: none; text-align: center; margin: 1rem 0; }
#debug-toggle button { background: #1E1E2E; color: #CDD6F4; border: none; padding: .55rem 1rem; font-size: .82rem; font-family: ui-monospace, monospace; border-radius: .5rem; cursor: pointer; }
#debug-panel { display: none; background: #1E1E2E; color: #CDD6F4; border-radius: .75rem; padding: 1rem; margin-bottom: 2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .78rem; line-height: 1.6; overflow-x: auto; }
#debug-panel h3 { color: #89B4FA; font-size: .85rem; margin: 1rem 0 .5rem; border-bottom: 1px solid #45475A; padding-bottom: .25rem; }
#debug-panel h3:first-child { margin-top: 0; }
#debug-panel table { border-collapse: collapse; width: 100%; margin-bottom: .75rem; }
#debug-panel th, #debug-panel td { text-align: left; padding: .2rem .55rem; border-bottom: 1px solid #313244; }
#debug-panel th { color: #89B4FA; font-weight: 700; }
.debug-true { color: #A6E3A1; }
.debug-false { color: #F38BA8; }
.debug-val { color: #FAB387; }
.debug-dim { color: #CBA6F7; }
#debug-panel .radar-wrap { display: flex; justify-content: center; margin: 1rem 0; }
#debug-panel .radar-wrap canvas { max-width: 400px; max-height: 300px; }
@media (max-width: 768px) { .dash-columns { grid-template-columns: 1fr; } .matrix-table { min-width: 760px; } }
@media print { .site-header, #route-card, .submit-row, .cta-placeholder, #debug-toggle, #debug-panel, #form-message { display:none !important; } body { background:white; } .dash-col, .dash-summary { box-shadow:none; } }


.welcome-block {
  text-align: left;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.welcome-block h2 {
  text-align: center;
  margin-bottom: .85rem;
}
.welcome-block p {
  margin: 0 0 1rem;
  line-height: 1.6;
}
.welcome-block p:last-child { margin-bottom: 0; }
.issue-report-row {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.secondary-button {
  display: inline-block;
  background: #E7EEF1;
  color: var(--blue-dark);
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-weight: 700;
  text-decoration: none;
}
.secondary-button:hover {
  background: #DCE8EC;
  color: var(--blue-dark);
}

/* Front-page routing refinements */
.route-card { max-width: 820px; margin: 1.25rem auto; text-align: center; }
.centered-route-options { max-width: 720px; margin-left: auto; margin-right: auto; }
.route-choice { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.route-choice .route-option { margin: 0; }
.route-option input { width: auto; margin-top: .2rem; }
.route-start-button { white-space: nowrap; }
.route-code-entry { max-width: 360px; margin: .25rem auto .5rem; text-align: left; }

@media (max-width: 640px) {
  .route-choice { align-items: flex-start; justify-content: flex-start; }
  .route-card { text-align: left; }
  .route-start-button { width: 100%; }
  .single-code-gate .route-start-button { width: auto; }
}