:root {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#253b3a;
  background:#f5f7f4;
  --surface:#fff;
  --muted:#687976;
  --line:#dfe7e1;
  --accent:#176b57;
  --soft:#e9f3ed;
  --danger:#a83d3d;
  --shadow:0 6px 28px #183b2c08;
  color-scheme:light;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-width:280px;
  padding-bottom:env(safe-area-inset-bottom);
}

button,input,textarea {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.55;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #83bca5;
  outline-offset:3px;
}

button {
  border:0;
  background:none;
  color:inherit;
}

h1,h2,h3,p {
  margin:0;
}

h1 {
  font-size:clamp(25px,4vw,34px);
  letter-spacing:-.8px;
  line-height:1.2;
}

h2 {
  font-size:21px;
  line-height:1.4;
}

h3 {
  font-size:17px;
  line-height:1.45;
}

p {
  line-height:1.6;
}

small {
  font-size:12px;
}

.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1180px;
  margin:auto;
  padding:22px 28px;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--accent);
  color:white;
  border-radius:13px;
  font-size:19px;
  font-weight:750;
}

.brand strong {
  display:block;
  font-size:17px;
}

.brand small {
  display:block;
  color:var(--muted);
  margin-top:3px;
}

.profile-name {
  font-size:13px;
  color:var(--muted);
  max-width:180px;
  text-align:right;
}

main {
  max-width:1124px;
  margin:32px auto;
  padding:0 24px;
}

.page-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
}

.eyebrow {
  font-size:11px;
  font-weight:750;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}

.muted {
  color:var(--muted);
}

.subtitle {
  margin-top:10px;
  font-size:14px;
}

.primary,.secondary,.quiet,.danger {
  border-radius:11px;
  padding:12px 17px;
  font-size:14px;
  font-weight:650;
  line-height:1.3;
}

.primary {
  background:var(--accent);
  color:white;
}

.secondary {
  background:var(--surface);
  border:1px solid var(--line);
}

.quiet {
  color:var(--accent);
  background:var(--soft);
}

.danger {
  color:var(--danger);
  border:1px solid var(--line);
}

.toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.search {
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:20px;
  color:inherit;
}

.list {
  display:grid;
  gap:12px;
}

.assessment-card {
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  display:grid;
  gap:12px;
  width:100%;
}

.assessment-card:hover {
  border-color:#87b39b;
}

.card-title {
  font-size:17px;
  font-weight:650;
  overflow-wrap:anywhere;
}

.card-meta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pill {
  font-size:11px;
  border-radius:30px;
  padding:6px 10px;
  background:var(--soft);
  color:var(--accent);
}

.arrow {
  font-size:20px;
  color:var(--accent);
}

.empty,.gate {
  padding:48px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  text-align:center;
  max-width:600px;
  margin:40px auto;
}

.gate p,.empty p {
  margin:14px auto 24px;
  color:var(--muted);
  max-width:430px;
}

.gate-icon {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  background:var(--soft);
  color:var(--accent);
  border-radius:17px;
  font-size:24px;
}

.back {
  padding:0;
  color:var(--muted);
  font-size:13px;
  margin-bottom:20px;
}

.editor-layout {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.sections {
  display:grid;
  gap:7px;
  position:sticky;
  top:16px;
}

.section-tab {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  text-align:left;
  border:1px solid transparent;
  border-radius:12px;
  font-size:13px;
  line-height:1.4;
  background:var(--surface);
}

.section-tab.active {
  border-color:var(--accent);
  background:var(--soft);
}

.section-number {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:8px;
  background:#f2f5f1;
  font-size:12px;
  color:var(--muted);
}

.active .section-number {
  background:var(--accent);
  color:white;
}

.section-label {
  flex:1;
}

.completed {
  color:var(--accent);
  font-weight:bold;
}

.form-panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  box-shadow:var(--shadow);
}

.section-description {
  font-size:13px;
  color:var(--muted);
  margin:9px 0 24px;
}

.question {
  padding:20px 0;
  border-top:1px solid var(--line);
}

.question:first-child {
  border-top:0;
  padding-top:0;
}

.question-heading {
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-bottom:13px;
}

.question-index {
  font-size:12px;
  color:var(--muted);
}

.options {
  display:grid;
  gap:8px;
}

.option-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px;
  cursor:pointer;
  font-size:14px;
  line-height:1.5;
}

.option-row.chosen {
  background:var(--soft);
  border-color:#94b9a6;
}

.option-row input {
  margin-top:4px;
  accent-color:var(--accent);
  width:17px;
  height:17px;
  flex-shrink:0;
}

.nested {
  margin:12px 0 16px 10px;
  padding-left:17px;
  border-left:2px solid var(--line);
}

.input-label {
  display:block;
  font-size:13px;
  margin-bottom:8px;
  color:var(--muted);
}

textarea,input[type=text],input[type=date] {
  width:100%;
  padding:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:inherit;
}

textarea {
  min-height:110px;
  resize:vertical;
  line-height:1.6;
}

.field-actions {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.saved-label {
  font-size:12px;
  color:var(--accent);
  margin-top:9px;
}

.form-footer {
  padding-top:22px;
  margin-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.report {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(20px,5vw,50px);
  margin:20px 0;
}

.report h2 {
  text-align:center;
  margin-bottom:30px;
}

.report p+p {
  margin-top:18px;
}

.report p {
  font-size:15px;
  overflow-wrap:anywhere;
}

.notice {
  font-size:13px;
  color:var(--muted);
  padding:13px 0;
}

.loading {
  padding:65px;
  text-align:center;
  color:var(--muted);
}

.spinner {
  display:inline-block;
  width:25px;
  height:25px;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

.loading p {
  margin-top:16px;
}

#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(92vw,600px);
  border-radius:12px;
  padding:14px 20px;
  background:#234638;
  color:white;
  box-shadow:0 8px 35px #0003;
  font-size:14px;
  z-index:5;
}

#toast.error {
  background:#793f3f;
}

.readonly {
  background:var(--soft);
  padding:12px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:20px;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

@media(max-width:720px) {
  .app-header {
    padding:16px;
  }
  .profile-name {
    max-width:100px;
    font-size:11px;
  }
  .brand small {
    font-size:10px;
  }
  main {
    margin:24px auto;
    padding:0 16px;
  }
  .page-head {
    align-items:flex-start;
    flex-direction:column;
  }
  .editor-layout {
    display:block;
  }
  .sections {
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-bottom:18px;
    gap:6px;
  }
  .section-tab {
    padding:10px;
    font-size:12px;
  }
  .section-number {
    width:23px;
    height:23px;
  }
  .form-panel {
    padding:20px;
  }
  .assessment-card {
    padding:18px;
  }
  .toolbar {
    width:100%;
  }
  .toolbar .primary {
    flex:1;
  }
  .nested {
    margin-left:3px;
    padding-left:12px;
  }
  .form-footer {
    flex-wrap:wrap;
  }
  .gate {
    margin-top:22px;
  }
  .question-heading h3 {
    font-size:16px;
  }
}

@media(prefers-color-scheme:dark) {
  :root {
    background:#182320;
    color:#e6efe9;
    --surface:#202f29;
    --muted:#a8b9b0;
    --line:#344b3e;
    --accent:#84cfaa;
    --soft:#293f32;
    --danger:#ffaaaa;
  }
  .primary {
    color:#13281d;
  }
  .brand-mark {
    color:#13281d;
  }
  .section-number {
    background:#2b3c31;
  }
  .active .section-number {
    color:#13281d;
  }
  .option-row.chosen {
    border-color:#649675;
  }
}

@media(prefers-reduced-motion:reduce) {
  .spinner {
    animation:none;
  }
}