/* Setup Navigator — full-bleed app shell for /setup-navigator/.
 *
 * Self-contained on purpose. The live app.css is edited surgically rather than
 * rebuilt, so Tailwind utilities that do not already exist there would be missing.
 * Everything here is a named .sn-* class with literal brand values.
 *
 * Brand: Forest #163300, Lime #9fe870, Spruce #054d28, Linen #e2f6d5.
 */

/* Centred container. The tool is a card on the page, not a full-bleed takeover,
 * so it lines up with the rest of the site rather than running edge to edge. */
.sn-wrap {
  max-width: 1200px;
  margin: 40px auto 72px;
  padding: 0 24px;
}

.sn-app {
  --sn-forest: #163300;
  --sn-spruce: #054d28;
  --sn-spruce-l: #12683a;
  --sn-lime: #9fe870;
  --sn-lime-d: #7abe4e;
  --sn-linen: #e2f6d5;
  --sn-fog: #e8ebe6;
  --sn-rail: #f2f5ef;
  --sn-paper: #fff;
  --sn-ink: #0e0f0c;
  --sn-body: #454745;
  --sn-muted: #868685;
  --sn-amber: #a16207;
  --sn-amber-bg: #fdf5e3;
  --sn-red: #9a3412;
  --sn-red-bg: #fbeee8;
  --sn-green: #1c7a3e;
  --sn-green-bg: #eaf5ee;
  border: 1px solid var(--sn-fog);
  border-radius: 16px;
  overflow: hidden;
  background: var(--sn-paper);
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04);
}

/* Title bar */
.sn-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--sn-fog);
  background: var(--sn-paper);
}
.sn-title {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--sn-ink);
  line-height: 1.2;
}
.sn-bar .sn-sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sn-muted);
}
.sn-bar .sn-spacer { flex: 1; }
.sn-reset {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--sn-fog);
  background: none;
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sn-ink);
  cursor: pointer;
}
.sn-reset:hover { border-color: var(--sn-spruce); }
.sn-reset:focus-visible { outline: 2px solid var(--sn-spruce); outline-offset: 2px; }

/* Shell */
.sn-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 62vh; }
.sn-rail { background: var(--sn-rail); border-right: 1px solid var(--sn-fog); padding: 24px 18px 36px; }
.sn-pane { padding: 30px 34px 44px; max-width: 860px; }

/* Rail */
.sn-railhead { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.sn-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sn-muted);
}
.sn-count { font-size: 14px; font-weight: 700; color: var(--sn-ink); }
.sn-bar-track { height: 5px; border-radius: 999px; background: var(--sn-fog); overflow: hidden; margin-top: 6px; }
.sn-bar-fill { display: block; height: 100%; background: var(--sn-lime); width: 0; transition: width .3s ease; }

.sn-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-stages li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 9px 8px; border-radius: 9px;
}
.sn-stages li:hover { background: var(--sn-paper); }
.sn-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--sn-fog); color: var(--sn-muted);
}
.sn-done .sn-num { background: var(--sn-lime); color: var(--sn-forest); }
.sn-slabel { display: block; font-size: 13.5px; font-weight: 650; color: var(--sn-forest); text-decoration: none; line-height: 1.3; }
.sn-slabel:hover { text-decoration: underline; }
.sn-snote { display: block; font-size: 11.5px; color: var(--sn-muted); margin-top: 2px; }

/* Questions */
.sn-step { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-muted); }
.sn-q {
  font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.15; margin: 8px 0 6px; color: var(--sn-ink);
}
.sn-why { font-size: 14.5px; color: var(--sn-body); margin: 0 0 22px; max-width: 60ch; }
.sn-opts { display: grid; gap: 10px; margin-bottom: 18px; }
.sn-opt {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; align-items: start;
  width: 100%; text-align: left; padding: 15px 17px;
  border: 1px solid var(--sn-fog); border-radius: 10px; background: var(--sn-paper);
  cursor: pointer; font: inherit;
}
.sn-opt:hover { border-color: var(--sn-spruce); background: var(--sn-rail); }
.sn-opt:focus-visible { outline: 2px solid var(--sn-spruce); outline-offset: 1px; }
.sn-mark {
  width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  border: 2px solid var(--sn-fog); display: flex; align-items: center; justify-content: center;
}
.sn-on { border-color: var(--sn-forest); background: var(--sn-linen); }
.sn-on .sn-mark { border-color: var(--sn-forest); background: var(--sn-forest); }
.sn-on .sn-mark::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sn-lime); }
.sn-t { display: block; font-size: 15.5px; font-weight: 650; color: var(--sn-ink); }
.sn-d { display: block; font-size: 13px; color: var(--sn-muted); margin-top: 2px; }
.sn-back {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px;
  color: var(--sn-spruce); cursor: pointer; text-decoration: underline;
}

/* Result */
.sn-card { background: var(--sn-forest); border-radius: 14px; padding: 28px 30px; margin-bottom: 22px; }
.sn-card .sn-eyebrow { color: var(--sn-lime); }
.sn-rt { font-size: clamp(26px, 3.6vw, 36px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 8px; color: #fff; }
.sn-lede { margin: 0; font-size: 15px; color: #cfe3c2; max-width: 62ch; }

.sn-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--sn-fog); border-radius: 10px; overflow: hidden; margin: 0 0 24px;
}
.sn-fact { padding: 15px 17px; border-right: 1px solid var(--sn-fog); background: var(--sn-rail); }
.sn-fact:last-child { border-right: 0; }
.sn-fact dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sn-spruce); margin-bottom: 5px; }
.sn-fact dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--sn-ink); font-variant-numeric: tabular-nums; }
.sn-fnote { display: block; font-size: 11.5px; font-weight: 500; color: var(--sn-muted); margin-top: 4px; }

.sn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.sn-col h2 { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 8px; color: var(--sn-spruce); font-weight: 700; }
.sn-col p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sn-body); }
.sn-against h2 { color: var(--sn-amber); }

.sn-zones { margin-bottom: 24px; }
.sn-zones h2 { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 10px; color: var(--sn-muted); font-weight: 700; }
.sn-zone {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--sn-fog); border-radius: 10px; margin-bottom: 9px;
}
.sn-zn { display: block; font-size: 15px; font-weight: 700; color: var(--sn-ink); }
.sn-zw { display: block; font-size: 12.5px; color: var(--sn-muted); margin-top: 2px; }
.sn-chip { flex: none; border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sn-v { background: var(--sn-green-bg); color: var(--sn-green); }
.sn-i { background: var(--sn-amber-bg); color: var(--sn-amber); }
.sn-x { background: var(--sn-red-bg); color: var(--sn-red); }
.sn-znote { margin: 10px 0 0; font-size: 12.5px; color: var(--sn-muted); max-width: 68ch; }

.sn-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sn-go {
  display: inline-block; background: var(--sn-lime); color: var(--sn-forest);
  font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 999px; text-decoration: none;
}
.sn-go:hover { filter: brightness(.95); }
.sn-go:focus-visible { outline: 2px solid var(--sn-spruce); outline-offset: 2px; }

.sn-noscript { padding: 26px 30px; font-size: 15px; color: var(--sn-body); }

@media (max-width: 900px) {
  .sn-wrap { margin: 24px auto 48px; padding: 0 16px; }
  .sn-app { border-radius: 12px; }
  .sn-shell { grid-template-columns: 1fr; }
  /* Questions first on a phone. The rail is a progress reference, not the task, so
   * it drops below rather than pushing the tool itself off the first screen. */
  .sn-pane { order: 1; }
  .sn-rail { order: 2; border-right: 0; border-top: 1px solid var(--sn-fog); padding: 20px 18px 24px; }
  .sn-pane { padding: 24px 20px 36px; }
  .sn-grid { grid-template-columns: 1fr; }
  .sn-bar { padding: 14px 20px; }
  .sn-zone { flex-direction: column; align-items: flex-start; gap: 7px; }
}
/* Narrow phones: the bar had title, subtitle and button all wrapping to two lines.
 * Drop the subtitle (it repeats what the first question already shows) and keep the
 * title and button on single lines. */
@media (max-width: 600px) {
  .sn-bar { padding: 12px 16px; gap: 10px; }
  .sn-sub { display: none; }
  .sn-title { font-size: 17px; white-space: nowrap; }
  .sn-reset { padding: 7px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { .sn-bar-fill { transition: none; } }