/* App styles — consumes NeuroInk semantic tokens (--ni-c-*) only. Mobile-first. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- header / footer ---------- */
.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ni-space-4);
  padding: var(--ni-space-4);
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.site-logo { width: clamp(140px, 40vw, 200px); }
.theme-toggle { font-size: var(--ni-text-xs); padding: var(--ni-space-2) var(--ni-space-4); }
.site-footer { text-align: center; padding: var(--ni-space-8) var(--ni-space-4); margin-top: auto; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--ni-space-4) var(--ni-space-16);
}
.screen[hidden], [hidden] { display: none !important; }
.muted { color: var(--ni-c-text-muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ni-space-3); margin-top: var(--ni-space-6); }
.welcome-points { padding-left: 1.2em; line-height: var(--ni-leading-relaxed); }
.framing { margin-top: var(--ni-space-6); font-size: var(--ni-text-sm); }

/* ---------- progress ---------- */
.progress {
  position: sticky; top: 0; z-index: 10;
  height: 4px; background: var(--ni-c-bg-sunken);
}
.progress-fill {
  height: 100%; background: var(--ni-c-action);
  transition: width var(--ni-duration-base) var(--ni-ease);
}

/* ---------- questions ---------- */
fieldset.q {
  border: 1px solid var(--ni-c-border);
  border-radius: var(--ni-radius-lg);
  background: var(--ni-c-bg-raised);
  padding: var(--ni-space-4);
  margin: 0 0 var(--ni-space-4);
  min-inline-size: 0;
}
fieldset.q legend {
  font-family: var(--ni-font-display);
  font-weight: var(--ni-weight-medium);
  padding: 0 var(--ni-space-2);
  font-size: var(--ni-text-base);
}

/* vertical option lists (context questions) */
.opts { display: flex; flex-direction: column; gap: var(--ni-space-2); }
.opts label {
  display: flex; align-items: center; gap: var(--ni-space-3);
  min-height: 44px; padding: var(--ni-space-2) var(--ni-space-3);
  border: 1px solid var(--ni-c-border); border-radius: var(--ni-radius-md);
  cursor: pointer; font-size: var(--ni-text-base);
}
.opts label:has(:checked) {
  border-color: var(--ni-c-action);
  background: var(--ni-c-accent-surface);
}
.opts input { width: 20px; height: 20px; accent-color: var(--ni-c-action); flex: none; }
.q--missing { border-color: var(--ni-c-danger); }
.hint { margin: var(--ni-space-2) 0 0; font-size: var(--ni-text-xs); color: var(--ni-c-text-muted); }
.prompt { font-style: italic; color: var(--ni-c-text-muted); font-size: var(--ni-text-sm); }
.aboutyou { margin-top: calc(var(--ni-space-4) * -1); margin-bottom: var(--ni-space-6); }

/* 1–5 competence scale: five large tap segments */
.scale {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ni-space-2);
}
.scale label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px;
  min-height: 60px; padding: var(--ni-space-1);
  border: 1px solid var(--ni-c-border); border-radius: var(--ni-radius-sm);
  cursor: pointer; color: var(--ni-c-text-muted);
  overflow-wrap: anywhere; hyphens: auto;
}
.scale .num {
  font-family: var(--ni-font-display); font-weight: var(--ni-weight-semibold);
  font-size: 1.05rem; line-height: 1;
}
.scale .lab { font-size: 0.68rem; line-height: 1.15; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale label:has(:checked) {
  background: var(--ni-c-action); border-color: var(--ni-c-action);
  color: var(--ni-c-on-action); font-weight: var(--ni-weight-medium);
}
.scale label:has(:focus-visible) {
  outline: var(--ni-focus-width) solid var(--ni-c-focus);
  outline-offset: var(--ni-focus-offset);
}
@media (hover: hover) {
  .scale label:hover { border-color: var(--ni-c-action); }
}
.scale label:active { background: var(--ni-c-accent-surface); }
@media (max-width: 379px) {
  .scale .lab { font-size: 0.62rem; }
}

/* ---------- sticky action bar ---------- */
.actionbar {
  position: sticky; bottom: 0; z-index: 10;
  display: block;
  max-width: 760px; margin: 0 auto; width: 100%;
  padding: var(--ni-space-3) var(--ni-space-4);
  padding-bottom: calc(var(--ni-space-3) + env(safe-area-inset-bottom));
  background: var(--ni-c-bg);
  border-top: 1px solid var(--ni-c-border);
}
.actionbar-buttons { display: flex; gap: var(--ni-space-3); justify-content: space-between; }
.actionbar-buttons .ni-btn { flex: 1; justify-content: center; min-height: 48px; font-size: var(--ni-text-base); }
.status {
  margin: 0 0 var(--ni-space-2); min-height: 1.2em; text-align: center;
  font-size: var(--ni-text-sm); color: var(--ni-c-danger);
}
.ni-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- report ---------- */
.report-header { margin-bottom: var(--ni-space-8); }
.report-grid { display: grid; gap: var(--ni-space-4); }
.radar-wrap svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.overall-card { text-align: center; }
.overall-score {
  font-family: var(--ni-font-display); font-weight: var(--ni-weight-semibold);
  font-size: var(--ni-text-h1); line-height: 1;
}
.badge {
  display: inline-block; padding: 2px 12px; border-radius: var(--ni-radius-pill);
  font-family: var(--ni-font-mono); font-size: var(--ni-text-xs);
  letter-spacing: var(--ni-tracking-wide); text-transform: uppercase;
  border: 1px solid var(--ni-c-border-strong);
}
.badge.priority { color: var(--ni-c-danger); border-color: var(--ni-c-danger); }
.badge.emerging { color: var(--ni-c-warning); border-color: var(--ni-c-warning); }
.badge.strength { color: var(--ni-c-success); border-color: var(--ni-c-success); }

table.scores { width: 100%; border-collapse: collapse; font-size: var(--ni-text-sm); }
table.scores th, table.scores td {
  text-align: left; padding: var(--ni-space-2) var(--ni-space-3);
  border-bottom: 1px solid var(--ni-c-border);
}
table.scores td:nth-child(2) { font-variant-numeric: tabular-nums; }

.report-section { margin-top: var(--ni-space-8); }
.report-section > h3 { margin-bottom: var(--ni-space-3); }
.rec-list { padding-left: 1.3em; }
.rec-list li { margin-bottom: var(--ni-space-3); }
.tier-tag {
  font-family: var(--ni-font-mono); font-size: var(--ni-text-eyebrow);
  letter-spacing: var(--ni-tracking-wide); text-transform: uppercase;
  color: var(--ni-c-highlight);
}
details.methods { margin-top: var(--ni-space-8); font-size: var(--ni-text-sm); }
details.methods summary { cursor: pointer; font-family: var(--ni-font-display); }
details.methods table { margin: var(--ni-space-3) 0; }

@media (min-width: 600px) {
  .report-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ---------- print ---------- */
@media print {
  .no-print, .actionbar, .theme-toggle, #btn-report-actions { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .ni-card, fieldset.q { box-shadow: none; }
  details.methods { display: block; }
  details.methods summary { display: none; }
  a { color: inherit; text-decoration: none; }
}