/* ───────────────────────────────────────────────────────────
   Annotation form v2 — SyRF question tree
   ─────────────────────────────────────────────────────────── */

/* Source layout segmented toggle — lives in the page header */
.src-layout-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 3px 3px 10px;
  margin-right: 4px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  height: 34px;
}
.src-layout-seg-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.src-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  border-radius: 5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.src-layout-btn:hover { background: var(--surface-alt); color: var(--ink); }
.src-layout-btn.on {
  background: var(--ink);
  color: var(--surface);
}
.dark .src-layout-btn.on { background: var(--accent); color: white; }
.src-layout-btn .ms { font-size: 16px; }

.ann-form.v2 {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Header */
.ann-form.v2 .ann-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 10%, var(--surface)),
    color-mix(in oklab, var(--accent) 4%, var(--surface)));
  position: relative;
}
.ann-form.v2 .ann-form-head::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.ann-form.v2 .ann-form-head h3 {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ann-form.v2 .ann-form-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}
.form-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-3);
}
.form-tag .ms { font-size: 13px; color: var(--ink-4); }

.form-stage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.form-stage-pill .ms { font-size: 13px; }

.form-formname {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.form-formname .ms { font-size: 13px; color: var(--ink-4); }
.form-formname b { color: var(--ink); font-weight: 600; }
.form-formname-ver {
  color: var(--ink-4);
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--divider);
  font-size: 10.5px;
}

/* Form-level auto-save indicator — one per form, not per question.
   Lives in the form subtitle next to the form-name chip. */
.form-autosave {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--divider-soft);
  background: var(--surface-sunken);
  color: var(--ink-3);
  letter-spacing: 0.005em;
  transition: background .15s, border-color .15s, color .15s;
}
.form-autosave .form-autosave-ic { display: inline-flex; }
.form-autosave .ms { font-size: 14px; }
.form-autosave.saved {
  color: var(--ok);
  background: color-mix(in oklab, var(--ok) 10%, transparent);
  border-color: color-mix(in oklab, var(--ok) 25%, transparent);
}
.form-autosave.saved .ms { color: var(--ok); }
.form-autosave.saving {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.form-autosave.saving .ms {
  color: var(--accent);
  animation: form-autosave-spin 1.1s linear infinite;
}
.form-autosave-ago { color: var(--ink-4); font-weight: 400; margin-left: 2px; }
.form-autosave.saved .form-autosave-ago { color: color-mix(in oklab, var(--ok) 60%, var(--ink-4)); }

/* Animated ellipsis while saving */
.form-autosave-dots {
  display: inline-flex; gap: 2px; margin-left: 3px;
  vertical-align: baseline;
}
.form-autosave-dots i {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; display: block;
  animation: form-autosave-dot 1.2s ease-in-out infinite;
}
.form-autosave-dots i:nth-child(2) { animation-delay: .15s; }
.form-autosave-dots i:nth-child(3) { animation-delay: .30s; }

@keyframes form-autosave-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-1px); }
}
@keyframes form-autosave-spin {
  to { transform: rotate(360deg); }
}

/* Category tabs */
.ann-tabs.v2 {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
  overflow-x: auto;
  overflow-y: hidden;
}
.ann-tabs.v2::-webkit-scrollbar { height: 0; }
.ann-tabs.v2::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ann-tab.v2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s, border-color 0.15s;
}
.ann-tab.v2:hover { color: var(--ink); }
.ann-tab.v2 .ms { font-size: 17px; opacity: 0.8; }
.ann-tab.v2 .ann-tab-label { font-weight: 500; }
.ann-tab.v2 .ann-tab-count {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-4);
  padding: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ann-tab.v2.started .ann-tab-count {
  color: var(--accent);
}
.ann-tab.v2.complete .ann-tab-count {
  color: var(--ok);
}
.ann-tab.v2.active {
  color: var(--brand-ink);
  border-bottom-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
}
.ann-tab.v2.active .ms { color: var(--accent); opacity: 1; }
.ann-tab.v2.complete { color: var(--ok); }
.ann-tab.v2.complete .ms { color: var(--ok); opacity: 0.9; }

/* Body */
.ann-form.v2 .ann-form-body {
  padding: 22px 24px 28px;
  background: var(--bg);
  min-height: 500px;
}

/* Category intro card — distinct so users know to start here */
.cat-intro {
  display: flex; gap: 14px;
  background: color-mix(in oklch, var(--brand-ink) 4%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--brand-ink) 14%, var(--divider-soft));
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.cat-intro-ic {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border-radius: 8px;
  flex-shrink: 0;
}
.cat-intro-ic .ms { color: var(--accent); font-size: 20px; }
.cat-intro h3 {
  margin: 0 0 4px 0;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cat-intro p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 70ch;
}
.cat-intro b {
  color: var(--ink);
  font-weight: 600;
}

/* Scope tabs (Disease Model / Treatment) */
.scope-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 7px;
  padding: 3px;
  margin-bottom: 16px;
}
.scope-tabs-label {
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 0 10px 0 6px;
}
.scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.scope-tab:hover { background: var(--surface-alt); }
.scope-tab.active {
  background: var(--ink);
  color: var(--surface);
}
.dark .scope-tab.active { background: var(--accent); color: white; }
.scope-tab-n {
  font-family: var(--f-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in oklch, currentColor 15%, transparent);
  min-width: 18px;
  text-align: center;
}

/* Unit rail (Cohort / Experiment / Outcome) */
.unit-rail {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.unit-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.unit-rail-label {
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.unit-rail-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 3px;
}
.unit-rail-items {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.unit-chip:hover {
  background: var(--surface);
  border-color: var(--ink-4);
}
.unit-chip.active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 18%, transparent);
}
.unit-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-5, var(--divider));
  border: 1px solid var(--divider);
  flex-shrink: 0;
}
.unit-chip-dot.part { background: var(--warn); border-color: transparent; }
.unit-chip-dot.ok { background: var(--ok); border-color: transparent; }

/* Tiny control/non-control badge on unit chips */
.unit-chip-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 17px;
  padding: 0 5px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 1px solid transparent;
  margin-right: 2px;
}
.unit-chip-scope-control {
  background: color-mix(in oklab, var(--ink-3) 12%, var(--surface));
  color: var(--ink-2);
  border-color: var(--divider);
}
.unit-chip-scope-non-control {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.dark .unit-chip-scope-control { background: color-mix(in oklab, var(--ink-3) 18%, var(--surface)); }

.unit-chip-name { font-weight: 500; }
.unit-chip-count {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  padding-left: 4px;
  border-left: 1px solid var(--divider);
}
.unit-chip.active .unit-chip-count {
  color: var(--ink-2);
  border-left-color: var(--divider-soft);
}
.unit-chip-add {
  background: transparent;
  border-style: dashed;
  color: var(--ink-3);
}
.unit-chip-add .ms { font-size: 14px; }

.unit-panel {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  overflow: hidden;
}
.unit-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--divider);
}
.unit-panel-head h4 {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

/* Control/Non-control toggle on the unit panel header */
.unit-panel-scopetog {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  border-radius: 6px;
  margin-left: 4px;
}
.unit-panel-scope {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.unit-panel-scope:hover { color: var(--ink); background: var(--surface); }
.unit-panel-scope.on {
  background: var(--ink);
  color: var(--surface);
}
.unit-panel-scope-nc.on {
  background: var(--accent);
  color: white;
}
.dark .unit-panel-scope.on { background: var(--accent); color: white; }


/* ───────────────────────────────────────────────────────────
   Question node — the core recursive element
   ─────────────────────────────────────────────────────────── */
.qn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.unit-panel .qn-list {
  padding: 6px 16px 16px;
}

.qn {
  display: flex;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 7px;
  transition: background 0.12s, box-shadow 0.12s;
  position: relative;
}
.qn:hover { background: color-mix(in oklch, var(--accent) 3%, transparent); }
/* Active row — strong accent bar + tint so the user sees where they are */
.qn:focus-within {
  background: color-mix(in oklch, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.qn.answered > .qn-body > .qn-self::before {
  content: '';
  position: absolute;
  left: -44px; top: 2px; bottom: 2px;
  width: 2px;
  background: var(--ok);
  border-radius: 1px;
  opacity: 0.5;
}
/* Unanswered required rows get a quiet amber rail */
.qn.required:not(.answered) > .qn-body > .qn-self::before {
  content: '';
  position: absolute;
  left: -44px; top: 2px; bottom: 2px;
  width: 2px;
  background: var(--warn);
  border-radius: 1px;
  opacity: 0.45;
}
.qn-self { position: relative; }

.qn-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  flex-shrink: 0;
}
.qn-status {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--divider);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4);
}
.qn-status.ok {
  background: var(--ok);
  border-color: var(--ok);
  color: white;
}
.qn-status.need {
  border-color: var(--warn);
  color: var(--warn);
  border-style: dashed;
}
.qn-rail {
  flex: 1;
  width: 1.5px;
  background: var(--divider);
  border-radius: 1px;
}

.qn-body { flex: 1; min-width: 0; }

.qn-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.qn-path {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 500;
  min-width: 28px;
  flex-shrink: 0;
}
.qn-label {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
  letter-spacing: -0.005em;
}
/* Hide secondary type/multi pills by default — reveal on hover
   so the row reads as just a question + answer most of the time. */
.qn-pill, .qn-ctl-badge, .qn-req, .qn-opt {
  opacity: 0;
  transition: opacity .15s;
}
.qn:hover .qn-pill,
.qn:hover .qn-ctl-badge,
.qn:hover .qn-req,
.qn:hover .qn-opt,
.qn:focus-within .qn-pill,
.qn:focus-within .qn-ctl-badge,
.qn:focus-within .qn-req,
.qn:focus-within .qn-opt { opacity: 1; }
/* Keep the required marker visible on unanswered required rows —
   that's useful information that shouldn't hide. */
.qn:not(.answered) .qn-req { opacity: 1; }
.qn-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qn-ctl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  padding: 1px 6px 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.qn-ctl-badge .ms { font-size: 12px; opacity: 0.8; }
.qn-req, .qn-opt {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 3px;
}
.qn-req {
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 15%, transparent);
}
.qn-opt {
  color: var(--ink-4);
  background: var(--surface);
  border: 1px solid var(--divider);
}

.qn-desc {
  font-size: 12px;
  color: var(--ink-3);
  margin: 2px 0 7px;
  line-height: 1.5;
  font-style: italic;
  padding-left: 30px;
}

.qn-answer {
  padding-left: 30px;
  margin-bottom: 6px;
}

.qn-footline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 30px;
  margin-top: 4px;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity .15s;
  min-height: 20px;
}
.qn:hover .qn-footline,
.qn:focus-within .qn-footline { opacity: 1; }
.qn-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  font-family: var(--f-sans);
  font-size: 11.5px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 0;
}
.qn-link:hover { color: var(--accent); }
.qn-link .ms { font-size: 14px; }
.qn-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 2px;
}
.qn-saved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ok);
  margin-left: auto;
}
.qn-saved .ms { font-size: 13px; }

.qn-comment {
  padding-left: 30px;
  margin-top: 6px;
}
.qn-comment textarea {
  background: color-mix(in oklch, var(--accent) 5%, var(--surface-alt));
  border-color: color-mix(in oklch, var(--accent) 25%, var(--divider));
}

/* Nested conditional children */
.qn-children {
  margin-top: 10px;
  margin-left: 30px;
  padding-left: 14px;
  position: relative;
}
.qn-children-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 4px;
  font-style: italic;
}
.qn-children-label .ms { font-size: 13px; }
.qn-children .qn {
  padding: 8px 10px;
}

.qn.qn-d1 .qn-label { font-size: 13px; }
.qn.qn-d2 .qn-label { font-size: 12.5px; }

/* ───────────────────────────────────────────────────────────
   Answer inputs — consistent sizing for the tree
   ─────────────────────────────────────────────────────────── */
.afx-input,
.afx-select,
.afx-textarea,
.afx-number {
  width: 100%;
  max-width: 520px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 5px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.afx-input:focus, .afx-select:focus, .afx-textarea:focus, .afx-number:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}
.afx-textarea { resize: vertical; font-family: var(--f-sans); }
.afx-number { max-width: 160px; font-variant-numeric: tabular-nums; }
.afx-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

/* Autocomplete */
.afx-autocomplete {
  position: relative;
  max-width: 520px;
}
.afx-autocomplete-ic {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}
.afx-autocomplete .afx-input { padding-right: 28px; }

/* Radio groups */
.afx-radio-grp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.afx-radio-grp.inline {
  flex-direction: row;
  gap: 6px;
  flex-wrap: wrap;
}
.afx-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.afx-radio:hover { border-color: var(--ink-4); }
.afx-radio.on {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-color: var(--accent);
  color: var(--ink);
}
.afx-radio input[type="radio"] { accent-color: var(--accent); }

/* Checkbox (single yes) */
.afx-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.afx-check.on {
  background: color-mix(in oklch, var(--ok) 10%, transparent);
  border-color: var(--ok);
  color: var(--ink);
}
.afx-check input[type="checkbox"] { accent-color: var(--ok); }

/* Checklist (multi) */
.afx-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 620px;
}
.afx-checklist-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.afx-checklist-item:hover { border-color: var(--ink-4); }
.afx-checklist-item.on {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-color: var(--accent);
  color: var(--ink);
}
.afx-checklist-item input { accent-color: var(--accent); }


/* Info icon inline with progress */
.prog-honest-info {
  display: inline-flex; align-items: center;
  color: var(--ink-4);
  cursor: help;
  margin-left: 2px;
}
.prog-honest-info:hover { color: var(--accent); }
/* No subtitle line — compress the progress block */
.prog-honest { min-width: 220px; gap: 0; }

/* ───────────────────────────────────────────────────────────
   Screening Decision Bar (sdb)
   Sits above the data extraction form on stages that include
   screening. Two verdicts only — Include or Exclude. When the
   Screening Profile has a screening rationale question set,
   excluding opens a structured reason form saved atomically
   with the decision.
   ─────────────────────────────────────────────────────────── */
.sdb {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  padding: 14px 20px 18px;
  position: relative;
}
.sdb.sdb-include { background: linear-gradient(0deg, var(--ok-soft) 0%, var(--surface) 70%); }
.sdb.sdb-exclude { background: linear-gradient(0deg, var(--err-soft) 0%, var(--surface) 70%); }

.sdb-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.sdb-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
}
.sdb-eyebrow .ms { font-size: 16px; color: var(--ink-2); }
.sdb-stagetag {
  margin-left: 6px;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  text-transform: none; letter-spacing: 0;
}
.sdb-subtle {
  font-size: 12.5px; color: var(--ink-3);
  max-width: 70ch;
}
.sdb-expand {
  appearance: none; background: transparent; border: 1px solid var(--divider);
  border-radius: 6px; padding: 2px 6px; cursor: pointer; color: var(--ink-3);
  display: inline-flex; align-items: center;
}
.sdb-expand:hover { background: var(--surface-sunken); color: var(--ink); }
.sdb-expand .ms { font-size: 18px; }

/* Inclusion / exclusion criteria panel — collapsible */
.sdb-crit {
  margin-bottom: 14px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.sdb-crit.open { border-color: var(--ink-4); }

.sdb-crit-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.sdb-crit-toggle:hover { background: var(--surface-sunken); }
.sdb-crit.open .sdb-crit-toggle { border-bottom: 1px solid var(--divider); }

.sdb-crit-toggle-ic { font-size: 18px; color: var(--ink-2); }
.sdb-crit-toggle-label {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 1px;
}
.sdb-crit-toggle-label > :first-child {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.sdb-crit-sub {
  font-size: 11px; color: var(--ink-4);
}
.sdb-crit-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-3);
  margin-right: 4px;
}
.sdb-crit-count b {
  font-family: var(--f-mono);
  color: var(--ink);
  font-weight: 700;
}
.sdb-crit-divider { color: var(--ink-5); }
.sdb-crit-chev { font-size: 18px; color: var(--ink-3); }

.sdb-crit-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--surface);
}
.sdb-crit-col {
  padding: 12px 14px 14px;
  min-width: 0;
}
.sdb-crit-col-inc { border-right: 1px solid var(--divider); }
.sdb-crit-colhead {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sdb-crit-col-inc .sdb-crit-colhead { color: var(--ok); }
.sdb-crit-col-exc .sdb-crit-colhead { color: var(--err); }
.sdb-crit-colhead .ms { font-size: 14px; }

.sdb-crit-picolist {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.sdb-crit-picolist li {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  gap: 6px 10px;
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.45;
  padding: 4px 0;
}
.sdb-crit-pico {
  grid-row: span 2;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: var(--accent);
  border-radius: 5px;
}
.sdb-crit-picolabel { font-weight: 600; color: var(--ink); font-size: 12px; }
.sdb-crit-picotxt {
  grid-column: 2 / span 2;
  font-size: 12px; color: var(--ink-2);
}

.sdb-crit-list {
  margin: 0; padding-left: 1.1em;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.45;
}
.sdb-crit-list li::marker { color: var(--err); }

.sdb-crit-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-top: 1px solid var(--divider);
  background: var(--surface-alt);
  font-size: 11.5px; color: var(--ink-4);
}
.sdb-crit-foot .ms { font-size: 14px; }

/* Verdict buttons */
.sdb-verdicts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.sdb-verdicts-2 {
  grid-template-columns: repeat(2, 1fr);
}
.sdb-v {
  appearance: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 14px 14px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px;
  text-align: left;
  transition: all 0.1s;
  position: relative;
}
.sdb-v:hover { background: var(--surface-alt); border-color: var(--ink-4); }
.sdb-v .ms {
  grid-row: 1 / span 2;
  font-size: 26px;
  color: var(--ink-3);
  font-variation-settings: 'FILL' 0;
}
.sdb-v-main {
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.sdb-v-sub {
  font-size: 11.5px; color: var(--ink-3);
}
.sdb-v-inc.on {
  background: var(--surface); border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft);
}
.sdb-v-inc.on .ms { color: var(--ok); font-variation-settings: 'FILL' 1; }
.sdb-v-inc.on .sdb-v-main { color: var(--ok); }
.sdb-v-exc.on {
  background: var(--surface); border-color: var(--err); box-shadow: 0 0 0 2px var(--err-soft);
}
.sdb-v-exc.on .ms { color: var(--err); font-variation-settings: 'FILL' 1; }
.sdb-v-exc.on .sdb-v-main { color: var(--err); }

/* Include confirmation banner */
.sdb-ok {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--ok-soft);
  margin-top: 4px;
}
.sdb-ok .ms { color: var(--ok); font-variation-settings: 'FILL' 1; }

/* ───── Exclusion annotation form (structured reasons) ───── */
.sdb-excform {
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--err) 25%, transparent);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.sdb-excform-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sdb-qhead-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.sdb-qhead-required {
  font-size: 10px; font-weight: 600;
  color: var(--err);
  background: var(--err-soft);
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sdb-qhead-help {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-3); cursor: help;
}
.sdb-qhead-help .ms { font-size: 14px; }

/* Primary-reason fieldset — one-column tidy radio list */
.sdb-excprimary {
  border: 0; padding: 0; margin: 0;
}
.sdb-excprimary-legend {
  font-size: 11.5px; color: var(--ink-3); font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}
.sdb-excprimary-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}
.sdb-excopt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  transition: all 0.1s;
}
.sdb-excopt:hover { border-color: var(--ink-4); background: var(--surface-alt); }
.sdb-excopt input { display: none; }
.sdb-excopt-dot {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  position: relative;
}
.sdb-excopt.on {
  border-color: var(--err);
  background: color-mix(in oklch, var(--err) 6%, var(--surface));
}
.sdb-excopt.on .sdb-excopt-dot {
  border-color: var(--err);
  background:
    radial-gradient(circle at center, var(--err) 0 4px, transparent 4.5px);
}
.sdb-excopt.on .sdb-excopt-label { color: var(--ink); font-weight: 600; }

/* Conditional sub-reason fieldset */
.sdb-excsub {
  border: 0; padding: 10px 0 0;
  margin: 0;
  border-top: 1px dashed color-mix(in oklch, var(--err) 22%, transparent);
}
.sdb-excsub-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sdb-excsub-arrow {
  font-size: 16px !important; color: var(--err) !important;
}
.sdb-excsub-opts {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sdb-excsub-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  transition: all 0.1s;
}
.sdb-excsub-opt:hover { border-color: var(--err); color: var(--ink); }
.sdb-excsub-opt input { display: none; }
.sdb-excsub-opt.on {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
  font-weight: 600;
}
.sdb-excsub-other {
  margin-top: 8px;
  width: 100%;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
}

/* Completion status pill */
.sdb-excstatus {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  align-self: flex-start;
}
.sdb-excstatus.off {
  background: var(--surface-sunken);
  color: var(--ink-3);
}
.sdb-excstatus.off .ms { font-size: 16px; color: var(--ink-4); }
.sdb-excstatus.on {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
}
.sdb-excstatus.on .ms { font-size: 16px; color: var(--ok); font-variation-settings: 'FILL' 1; }

/* Reconciliation hint */
.sdb-reconhint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px dashed var(--divider);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.sdb-reconhint .ms {
  font-size: 16px; color: var(--ink-3); flex: none;
  margin-top: 1px;
}
.sdb-reconhint b { color: var(--ink); font-weight: 600; }


/* Dim extraction body when excluded */
.ann-tabs-dim, .ann-form-body-excluded {
  position: relative;
}
.ann-tabs-dim { opacity: 0.45; pointer-events: none; }
.ann-form-body-excluded > :not(.ann-exclude-overlay) {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}
.ann-exclude-overlay {
  position: sticky; top: 0; z-index: 3;
  padding: 12px 18px;
  background: var(--err-soft);
  border-bottom: 1px solid color-mix(in oklch, var(--err) 20%, transparent);
}
.ann-exclude-card {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--ink);
}
.ann-exclude-card > .ms {
  font-size: 24px; color: var(--err);
  font-variation-settings: 'FILL' 1;
}
.ann-exclude-card strong {
  display: block; font-size: 14px; color: var(--ink);
}
.ann-exclude-card div div { color: var(--ink-3); font-size: 12px; }
.ann-exclude-card .btn {
  margin-left: auto;
  flex: none;
}

/* ───────────────────────────────────────────────────────────
   v4: Quiet form chrome (single-activity stages)
   The page header is the title; the form body is the content.
   Everything in between earns its weight or is removed.
   ─────────────────────────────────────────────────────────── */

/* Unframed form body when there's only one activity on the stage */
.ann-form.v2 .ann-bare {
  display: block;
}

/* Quiet form head — strip the accent rail, gradient, and h3 */
.ann-form.v2 .ann-form-head-quiet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.ann-form.v2 .ann-form-head-quiet::before {
  display: none;
}

.ann-form-head-meta {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.form-formname-quiet {
  font-size: 12px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.form-formname-quiet b { color: var(--ink); font-weight: 600; }

.form-autosave-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-4);
  white-space: nowrap;
}
.form-autosave-quiet .form-autosave-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); opacity: 0.85;
}
.form-autosave-quiet.saving .form-autosave-dot {
  background: var(--accent);
  animation: form-autosave-pulse 1.1s ease-in-out infinite;
}
@keyframes form-autosave-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Quiet progress — number first, no INFO icon, single-line */
.prog-honest.prog-honest-quiet {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-3);
}
.prog-honest.prog-honest-quiet .prog-honest-bar {
  width: 110px; height: 4px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.prog-honest.prog-honest-quiet .prog-honest-bar i {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.prog-honest.prog-honest-quiet .prog-honest-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.prog-honest.prog-honest-quiet .prog-honest-val b {
  font-weight: 600;
}
.prog-honest.prog-honest-quiet .prog-honest-tot { color: var(--ink-4); }
.prog-honest.prog-honest-quiet .prog-honest-lbl {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-4);
  font-weight: 400;
  font-size: 11.5px;
}

/* When ann-bare is rendering, we don't need the rounded card outline of the
   ann-form anymore — let it sit flush in the page. */
.ann-form.v2:has(.ann-bare) {
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

/* Soften the cat-intro inside ann-bare — the page already names the activity,
   so the per-category intro doesn't need to shout. */
.ann-bare .cat-intro {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--divider-soft);
  padding: 14px 18px 12px;
  border-radius: 0;
}
.ann-bare .cat-intro h3 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--f-sans);
  letter-spacing: -0.005em;
  margin: 0 0 2px;
}
.ann-bare .cat-intro p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin: 0;
}
.ann-bare .cat-intro-ic {
  width: 28px; height: 28px;
  background: var(--surface-sunken);
  color: var(--ink-3);
  border: 1px solid var(--divider);
  box-shadow: none;
}
.ann-bare .cat-intro-ic .ms { font-size: 16px; }

/* ── Screening summary — collapsed "Include" / "Excluded — skip" ── */
/* Replaces the full SF screening section once the decision is made,
   so the form below can dominate. Keep it visible enough to reassure
   the reviewer the decision is recorded, quiet enough to not compete
   with the form. */
.screen-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  margin: 0 0 14px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface);
}
.screen-summary > .ms { font-size: 22px; flex: none; }
.screen-summary-text {
  flex: 1;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
}
.screen-summary-text b { color: var(--ink); font-weight: 600; }
.screen-summary .btn-link {
  background: transparent; border: 0;
  color: var(--accent); font-weight: 500; font-size: 13px;
  cursor: pointer; padding: 6px 8px;
}
.screen-summary .btn-link:hover { text-decoration: underline; }

.screen-summary-include {
  border-left: 3px solid var(--ok, #6b8e4e);
  background: color-mix(in oklab, var(--ok, #6b8e4e) 5%, var(--surface));
}
.screen-summary-include > .ms { color: var(--ok, #6b8e4e); }

.screen-summary-skip {
  border-left: 3px solid var(--ink-4);
  background: var(--surface-sunken);
}
.screen-summary-skip > .ms { color: var(--ink-3); }

/* Inline next-study CTA inside the screen-summary callout — used when
   the stage doesn't lead naturally into a form (screening-only stages,
   or excluded-in-both where extraction is skipped). Visually equal to
   the change-decision link, plus an accent fill for the forward action. */
.screen-summary-next {
  display: inline-flex; align-items: center; gap: 4px;
}
.screen-summary-next .ms { font-size: 16px; }

/* "What's next" advance bar — used after an Exclude in screening-only
   mode, where the screening section stays expanded (rationale form is
   still useful as a record) but the reviewer needs a clear forward path. */
.screen-advance {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  margin: 12px 0 0;
  border: 1px solid var(--divider);
  border-left: 3px solid var(--ok, #6b8e4e);
  border-radius: 10px;
  background: color-mix(in oklab, var(--ok, #6b8e4e) 5%, var(--surface));
}
.screen-advance-text {
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-2);
}
.screen-advance-text > .ms { color: var(--ok, #6b8e4e); font-size: 18px; }
.screen-advance-text b { color: var(--ink); font-weight: 600; }
.screen-advance-actions {
  display: flex; gap: 8px; align-items: center;
}