:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #1a2332;
  --muted: #475569;
  --line: #e2e8f0;
  --accent: #0A66C2;
  --accent-dark: #084e95;
  --ok: #188038;
  --okbg: #e8f5e9;
  --amber: #7a5b00;
  --amberbg: #fff8e1;
  --amberline: #ffe082;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
.preview-bar {
  background: var(--amberbg);
  border-bottom: 1px solid var(--amberline);
  color: var(--amber);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
header {
  background: linear-gradient(135deg, #0A66C2, #084e95);
  color: #fff;
  padding: 22px 20px 20px;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
header h1 {
  margin: 0;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
header p { margin: 8px 0 0; font-size: 14px; color: #fff; }
.ver {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
}
.who {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  font-size: 14px;
}
.who .hello { font-weight: 700; font-size: 16px; }
.who .meta { margin-top: 2px; color: #fff; }
/* The opening paragraph is addressed to the person, so it reads under their name with a
   rule between the two rather than as a banner subtitle above the card. */
.who .who-intro {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 14px;
  line-height: 1.55;
  color: #fff;
}
main { padding: 20px 0 80px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
.card.branch {
  border-left: 4px solid var(--accent);
  background: #f8fbff;
}
.q-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
label.field, .field {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 8px;
}
/* Each question folds, so the whole survey is six lines on the first screen.
   The heading is the button: title on the left, Click to open on the right. */
.q-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.q-head-l { flex: 1; min-width: 0; }
.q-head .q-num { margin: 0 0 4px; }
.q-head .field { margin: 0; }
.q-head-r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-top: 18px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.q-head.static { cursor: default; }
/* Which set the question is about, where the question itself is the same one asked
   of a different set. */
.q-topic {
  display: block;
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-dark);
}
.q-topic + .field { font-size: 16px; font-weight: 600; }
.q-body { margin-top: 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  background: #fff;
}
.opt:hover { border-color: #b9cfe6; }
.opt.sel { border-color: var(--accent); background: #f0f7ff; }
.opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.opt .ttl { font-weight: 600; color: var(--ink); display: block; }
.opt .d { color: var(--muted); font-size: 13px; margin-top: 1px; display: block; }
/* The textbook's description of a sales activity, on hover over its name. */
.opt .ttl.has-tip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #7b8794;
  cursor: help;
}
.tip-bubble {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 460px;
  max-width: 70vw;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16,24,40,.14);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  z-index: 40;
}
.opt .ttl.has-tip:hover .tip-bubble,
.opt .ttl.has-tip:focus .tip-bubble,
.opt .ttl.has-tip:focus-within .tip-bubble { display: block; }
.group-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 16px 0 8px;
}
.group-h:first-of-type { margin-top: 4px; }
.card[data-qid="phase2"] .q-num { color: #0D9488; }
.notyet-list {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  color: var(--ink);
  font-size: 14px;
}
.notyet-list li { margin: 0 0 4px; }
.tool-list { display: flex; flex-direction: column; gap: 8px; }
.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px 6px 6px;
}
.thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.thumb img {
  display: block;
  width: 72px;
  height: 54px;
  object-fit: cover;
  object-position: top center;
}
.thumb:hover { border-color: var(--accent); }
.tool-name {
  flex: 1;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.tool-name:hover { color: var(--accent-dark); }
/* A section of the book has no page image, so the row keeps the thumbnail's
   width and reads as a plain name. */
.thumb-gap { flex: 0 0 72px; width: 72px; height: 54px; }
.tool-name.plain { cursor: default; }
.tool-name.plain:hover { color: var(--ink); }
/* Tool screenshots use the same small icon as the book pages. Click opens the
   full image. One format for every row. */
.tool-row.shot .thumb img { object-position: top left; }
.tool-name-wrap { flex: 1; min-width: 0; }
.tool-detail {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
/* The rungs are described states rather than one-word intervals, so the longest of
   them is about seventy characters and will not sit beside the name without being cut
   off. A closed select that reads "They use this some of the time, but it is..." hides
   the answer the person just gave, so the select drops to its own line at full width.
   JP, 24 Sep 2026. */
.tool-row { flex-wrap: wrap; }
.tool-row select {
  flex: 1 1 100%;
  width: 100%;
  margin-left: 86px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
/* A row with no page image has no thumbnail to line up under. */
.tool-row:not(.shot) select { margin-left: 86px; }
/* None of the above answers the whole grid in one click, so it reads as the last line of
   the grid and the rows above it stand down rather than disappearing. JP, 24 Sep 2026. */
.tool-none {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.tool-none.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tool-none input { width: 18px; height: 18px; cursor: pointer; }
.tool-row.stood-down { opacity: .5; }
.tool-row.stood-down select { background: #f4f5f7; }
/* No estimate on the ROTI, so no track until they give it one. The placeholder holds the
   slider's column so the box does not jump sideways when the track appears. */
.ach-none { flex: 1; }
/* The initial estimate sits above Achieved: an empty box they fill once where the ROTI
   never carried a figure, read-only text where it did. JP and SCOMP, 24 Sep 2026. */
.est-row { display: flex; align-items: center; gap: 12px; }
.est-box {
  flex: 0 0 120px;
  width: 120px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 600 14px/1.2 inherit;
  color: var(--ink);
  background: #fff;
}
.est-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
}
.est-note {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.est-fixed { font: 700 15px/1.3 inherit; color: var(--ink); }
.est-fixed-note {
  font: 400 12px/1.3 inherit;
  color: var(--muted);
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}
/* A clear step down from the initial estimate to what they are being asked to set. */
.ach-h { margin-top: 20px; }
.ach-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 10px;
}
.freq-row { flex-wrap: wrap; }
.freq-row select {
  flex: 1 1 100%;
  width: 100%;
  font-size: 14px;
}
/* One ROTI, as the person wrote it, with its own answers underneath. */
.roti {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px 14px;
  margin: 0 0 12px;
}
.roti:last-child { margin-bottom: 0; }
.roti-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.roti-when { font-weight: 700; color: var(--ink); font-size: 14px; }
.roti-class {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.roti-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}
.roti-idea { color: var(--ink); font-size: 14px; }
.roti-idea p { margin: 0 0 8px; }
.roti-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.roti-toggle:hover { color: var(--accent-dark); text-decoration: underline; }
.roti-detail {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
}
.roti-sec { margin-bottom: 10px; }
.roti-sec:last-child { margin-bottom: 0; }
.roti-sec-h {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 3px;
}
.roti-detail p { margin: 0 0 6px; }
.roti-dates { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* Their own seminar feedback, read-only. One panel per seminar attended. */
.prior {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #f7fafc;
}
.prior:last-child { margin-bottom: 0; }
.prior-head {
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.prior-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.prior-ratings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  margin-bottom: 10px;
}
.prior-rating {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  border-bottom: 1px dotted var(--line);
  padding: 3px 0;
}
.prior-lbl { color: var(--muted); }
.prior-val { font-weight: 600; color: var(--ink); white-space: nowrap; }
.prior-word { margin-top: 8px; font-size: 13px; color: var(--ink); }
.prior-word-h { font-size: 12px; font-weight: 700; color: var(--accent-dark); margin-bottom: 2px; }
.prior-word p { margin: 0 0 4px; }
.roti-asks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* A label that wraps to two lines must not push its dropdown out of line with
     the one beside it. */
  align-items: end;
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.roti-ask-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.roti-ask select {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
/* Not started or withdrawn: the outcome answers stay in place so nothing looks
   missing, but they are not asked for. */
.roti-ask.off .roti-ask-h { color: var(--muted); font-weight: 400; }
.roti-ask.off select { background: #f1f4f8; color: var(--muted); cursor: default; }
.roti-none {
  margin: 0;
  padding: 12px 14px;
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
}
.book-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, .55);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.book-modal[hidden] { display: none !important; }
.book-panel {
  background: #fff;
  border-radius: 12px;
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 16px 40px rgba(16,24,40,.24);
}
.book-panel.tight { width: auto; max-width: 96vw; }
.book-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
}
.book-title { font-weight: 700; color: var(--ink); }
.book-close {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}
.book-panel img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
}
/* A book page fills the panel. A small crop of one tile is shown at its own size
   rather than blown up soft. */
.book-panel img.wide { width: 100%; }
/* A module of several pages reads as one column the panel scrolls through, with a
   hairline where one page ends and the next begins. */
.book-pages img + img { border-top: 1px solid var(--line); }
textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  resize: vertical;
  min-height: 88px;
}
.submit {
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.submit:disabled { opacity: .5; cursor: not-allowed; }
.submit-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
/* Still blank, and they have been sent back to it: the control says so, so nobody
   reads a long question looking for the gap. */
.need {
  background: #FFF3B0 !important;
  border-color: #C99A00 !important;
  box-shadow: 0 0 0 3px rgba(224, 168, 0, .35);
}
select.need { color: var(--ink); font-weight: 600; }
.opts.need, .lv-strip.need {
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 0 0 3px rgba(224, 168, 0, .35);
}
/* One question to a page: where they are, and the way forward and back. */
.stepbar { margin: 0 0 14px; }
.stepbar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.stepbar-track {
  height: 6px;
  border-radius: 999px;
  background: #e6ecf1;
  overflow: hidden;
}
.stepbar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}
.nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.nav-back, .nav-next {
  border-radius: 9px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.nav-back {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.nav-back:hover { border-color: var(--accent); }
.nav-next {
  background: var(--accent);
  color: #fff;
  border: none;
  flex: 1;
}
.nav-next:hover { background: var(--accent-dark); }
.nav .submit { flex: 1; width: auto; }
.intro-line { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.intro-sub {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.intro-sections { margin: 0 0 18px; padding-left: 22px; }
.intro-sections li { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.intro-sections li::marker { color: var(--accent); font-weight: 700; }
.intro-sec-n { display: block; font-weight: 700; color: var(--ink); }
.intro-sec-t { display: block; color: var(--muted); font-size: 14px; }
/* The review page: what they said, with a way back to any of it. */
.rev { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.rev:first-of-type { border-top: 0; }
.rev-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.rev-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.rev-edit {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  flex: 0 0 auto;
}
.rev-edit:hover { border-color: var(--accent); }
.rev-text { margin: 0 0 8px; font-size: 14px; color: var(--ink); white-space: pre-wrap; }
.rev-row { display: flex; gap: 12px; padding: 3px 0; font-size: 13px; }
.rev-name { flex: 0 0 46%; color: var(--muted); }
.rev-val { flex: 1; color: var(--ink); font-weight: 600; }
.rev-roti {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.rev-roti-h { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
/* Optional comment at the foot of a question. */
.q-comment {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.q-comment-h {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.q-comment textarea { font-size: 14px; padding: 9px 11px; }
.err {
  background: #fdeaea;
  border: 1px solid #f3c2c2;
  color: #b5302a;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  display: none;
}
.done { text-align: center; padding: 36px 16px; display: none; }
.done h2 { margin: 8px 0; color: var(--ok); }
.hidden { display: none !important; }
.req { color: #b5302a; font-weight: 700; }
.compare-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.compare-nav a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  padding: 6px 12px;
}
.compare-nav a:hover { background: rgba(255,255,255,.12); }
.compare-nav a.on { background: #fff; color: var(--accent-dark); border-color: #fff; }
.diff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.diff-table th, .diff-table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.diff-table th { background: #eef2f7; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #334155; }
.diff-table td.haney { background: #fffaf5; }
.diff-table td.ours { background: #f3faf4; }
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  margin-right: 6px;
}
.tag-keep { background: #e8f5e9; color: #1b7a32; }
.tag-fix { background: #fdeaea; color: #b5302a; }
.tag-new { background: #e7f0fb; color: #084e95; }
.launch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.launch a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.launch a:hover { border-color: var(--accent); }
.launch h3 { margin: 0 0 6px; font-size: 16px; color: var(--accent-dark); }
.launch p { margin: 0; font-size: 13px; color: var(--muted); }

/* Question-level book figure: same small thumb as every other row, but the whole
   figure has to be visible, so contain rather than cover. */
.fig-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.fig-row .thumb img { object-fit: contain; object-position: center; }
.fig-cap { background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--accent); text-align: left; cursor: pointer; text-decoration: underline; }
.fig-cap:hover { color: #1a1a2e; }

/* The ROTI row carries the same controls as the Tracking panel on the ROTI
   itself, so the two screens read the same. Ported from roti/gantt.html. */
.roti-block { margin: 14px 0 0; }
.lv-label {
  display: block; font-size: 11px; font-weight: 700; color: #334155;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px;
}
.lv-strip { display: flex; width: 100%; align-items: stretch; overflow: visible; }
.lv-seg {
  flex: 1; position: relative; min-height: 48px; padding: 6px 10px 6px 16px;
  border: 1px solid #c5cdd6; background: #e8eef4; color: #1A1A2E;
  font-size: 11px; font-weight: 700; line-height: 1.2; cursor: pointer; font-family: inherit;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  margin-left: -8px;
}
.lv-seg:first-child {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  margin-left: 0; padding-left: 10px; z-index: 4;
}
.lv-seg:nth-child(2) { z-index: 3; }
.lv-seg:nth-child(3) { z-index: 2; }
.lv-seg:nth-child(4) { z-index: 1; }
.lv-seg[data-band="not_applied"] { background: #eef2f6; }
.lv-seg[data-band="first_use"] { background: #dceaf4; }
.lv-seg[data-band="repeat_use"] { background: #d4e6da; }
.lv-seg[data-band="now_routine"] { background: #c8e0ce; }
.lv-seg.on[data-band="not_applied"] { background: #eef2f6; }
.lv-seg.on[data-band="first_use"] { background: #d9e8f4; }
.lv-seg.on[data-band="repeat_use"] { background: #bfd9c9; }
.lv-seg.on[data-band="now_routine"] { background: #a8d4b0; }
.lv-seg.current { outline: 2px solid #1A1A2E; outline-offset: -2px; z-index: 5; }
.achieved-row { display: grid; grid-template-columns: 1fr 128px; gap: 10px; align-items: center; }
.achieved-row input[type="text"] {
  width: 128px; padding: 8px 10px; border: 1px solid #d0d7e2; border-radius: 8px;
  font: inherit; font-variant-numeric: tabular-nums;
}
.achieved-slider-col { min-width: 0; }
.achieved-track-wrap { position: relative; }
.achieved-track-wrap input[type="range"] {
  width: 100%; padding: 0; border: 0; background: transparent; height: 28px;
  accent-color: #1565c0;
}
.claimed-tick {
  position: absolute; top: 4px; width: 3px; height: 20px; background: #1A1A2E;
  transform: translateX(-50%); pointer-events: none; z-index: 2;
}
.achieved-scale {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: #334155; margin-top: 2px;
}
.achieved-scale .claimed-cap { color: #1A1A2E; font-weight: 600; }
.roti-comment {
  width: 100%; padding: 8px 10px; border: 1px solid #d0d7e2; border-radius: 8px;
  font: inherit; resize: vertical; min-height: 52px;
}

/* The Tracking pair folds shut until the ROTI is under way. */
.roti-track { margin: 16px 0 0; border-top: 1px solid #e3e8ef; padding-top: 10px; }
.roti-track-head {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 2px 0; user-select: none;
}
.roti-track-title {
  font-size: 11px; font-weight: 700; color: #334155;
  text-transform: uppercase; letter-spacing: .04em;
}
.roti-track-note { font-size: 12px; color: #64748b; }
.roti-track-chev {
  margin-left: auto; font-size: 10px; color: #64748b;
  transition: transform .15s ease;
}
.roti-track.collapsed .roti-track-chev { transform: rotate(-90deg); }
.roti-track.collapsed .roti-track-body { display: none; }
.roti-track-body .roti-block:first-child { margin-top: 10px; }

/* No comment: the three closing questions are optional, and pressing this
   records that they passed rather than leaving a blank nobody can read. */
.pass-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; flex-wrap: wrap; }
.pass {
  font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--accent-dark);
  background: #fff; border: 1.5px solid var(--accent); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}
.pass:hover { background: #f0fdfa; }
.pass[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pass-note { font-size: 13px; color: #64748b; }
textarea.passed { background: #f8fafc; color: #94a3b8; }

/* Their own seminar feedback, folded shut above the question. */
.prior-lead { font-size: 13px; color: #64748b; margin: 0 0 10px; }
.prior-wrap { margin: 0 0 20px; }
.prior { padding: 0; overflow: hidden; }
.prior-head {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  margin: 0; padding: 11px 14px; user-select: none;
}
.prior-head:hover { background: #eef5f4; }
.prior-name { flex: 1; }
/* Says out loud that the row opens, because a closed row that only carries a
   small arrow reads as a label. JP, 23 Sep 2026. */
.prior-hint {
  margin-left: auto; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.prior:not(.collapsed) .prior-hint { color: var(--muted); font-weight: 400; }
.prior-chev {
  font-size: 13px; line-height: 1; color: var(--accent);
  width: 12px; text-align: center; transition: transform .15s ease;
}
.prior.collapsed .prior-chev { transform: rotate(-90deg); }
.prior.collapsed .prior-body { display: none; }
.prior-body { padding: 0 14px 12px; }

/* OSHCO asks these people their own version of the same thing. Where our wording
   differs, hovering Why says what theirs asks, what ours asks, and what the
   difference buys - so the two forms can be read side by side. JP, 23 Sep 2026. */
.why { position: relative; display: inline-block; margin-left: 8px; vertical-align: middle; }
.why-tag {
  display: inline-block; cursor: help;
  font: 600 10px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-dark); background: #f0fdfa;
  border: 1px solid #99d5cf; border-radius: 999px; padding: 4px 8px;
}
.why:hover .why-tag, .why:focus .why-tag { background: var(--accent); border-color: var(--accent); color: #fff; }
.why-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  display: none; width: 360px; max-width: 78vw;
  font: 400 13px/1.5 Inter, system-ui, sans-serif; color: #1f2937; text-transform: none; letter-spacing: 0;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16); padding: 12px 14px;
}
.why-pop strong { color: #0f172a; }
.why:hover .why-pop, .why:focus .why-pop, .why:focus-within .why-pop { display: block; }
/* Near the right edge the box would run off the page, so it opens leftwards. */
.why.why-left .why-pop { left: auto; right: 0; }

/* The same box, carrying a field's own definition for the person answering. A round i
   rather than a word, because it sits inside a narrow column beside a label that is
   already three words long. JP, 24 Sep 2026. */
.why.help { margin-left: 6px; }
.help-tag {
  width: 17px; height: 17px; padding: 0;
  font: 700 11px/16px Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0;
  text-align: center;
}

/* His OpCo's own figures, handed to a general manager before he is asked what he has
   seen. OSHCO's form asks him to predict the commercial impact; this shows it.
   JP, 23 Sep 2026. */
.panel { margin: 4px 0 18px; border: 1px solid #cfe3e0; border-radius: 12px; background: #f7fdfc; overflow: hidden; }
.panel-h {
  font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-dark); background: #eefaf8; border-bottom: 1px solid #cfe3e0; padding: 10px 16px;
}
.panel table { width: 100%; border-collapse: collapse; }
.panel th, .panel td { text-align: left; padding: 10px 16px; border-bottom: 1px solid #e4f0ee; font-size: 14px; }
.panel tr:last-child th, .panel tr:last-child td { border-bottom: 0; }
.panel th { font-weight: 500; color: #475569; width: 58%; }
.panel td { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.panel td .sub { display: block; font-weight: 400; font-size: 12px; color: #64748b; }
.panel-note { padding: 10px 16px 14px; font-size: 13px; line-height: 1.55; color: #475569; }