/* =====================================================================
   ClientScan — Atelier visual style
   Ported from mockup.html (v3). Parchment background, sepia ink, teal +
   plum accents, Crimson Pro + JetBrains Mono. This is the Satori look for
   the consultant-facing tools; the respondent form can later be re-skinned
   per client (phase 7) but the dashboard always stays Atelier.
   ===================================================================== */

/* ---- Fonts (CDN) -------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---- Design tokens ------------------------------------------------ */
:root {
  --parchment: #f5f0e6;
  --vellum: #ede8dc;
  --aged-paper: #e4ded0;
  --shadow-cream: #d4ccba;
  --deep-parchment: #c4baa4;
  --ink-black: #1a1815;
  --charcoal: #2d2a26;
  --sepia: #4a4238;
  --warm-gray: #6b6258;
  --faded-ink: #8b8275;
  --teal: #4a7c6f;
  --sage: #5b8a7d;
  --light-sage: #7ba89b;
  --pale-sage: #b5cfc6;
  --deep-teal: #3d5c55;
  --plum: #6b5b7a;
  --pale-violet: #c5b8cf;
  --rust: #9c5a3c;
  --pale-rust: #d9b9a4;
  --ochre: #b5894e;
  --slate: #5b7a8a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}

/* ---- Parchment body backdrop ------------------------------------- */
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(212, 204, 186, 0.62), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(228, 222, 208, 0.7), transparent 24%),
    radial-gradient(circle at 76% 82%, rgba(196, 186, 164, 0.36), transparent 22%),
    linear-gradient(180deg, #f2ece0 0%, var(--parchment) 22%, #f1ebdf 100%);
  color: var(--sepia);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
}
/* Faint manuscript grid + vignette overlay. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(139, 130, 117, 0.035) 0, rgba(139, 130, 117, 0.035) 1px, transparent 1px, transparent 120px),
    linear-gradient(rgba(139, 130, 117, 0.025) 0, rgba(139, 130, 117, 0.025) 1px, transparent 1px, transparent 120px),
    radial-gradient(circle at center, transparent 0, transparent 62%, rgba(196, 186, 164, 0.25) 100%);
  opacity: 0.45;
  z-index: 0;
}

/* ---- Layout container -------------------------------------------- */
.manuscript {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 36px 28px 80px;
  position: relative;
  z-index: 1;
}

/* ---- Typography --------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 500;
  color: var(--ink-black);
  margin: 0;
  letter-spacing: 0.005em;
}
h1 {
  font-size: 38px;
  font-style: italic;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 19px;
  font-weight: 600;
}
h4 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-gray);
}
p {
  margin: 0 0 10px;
}
small,
.meta {
  font-size: 13px;
  color: var(--warm-gray);
}
code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86em;
  background: rgba(107, 98, 88, 0.12);
  padding: 1px 5px;
  border-radius: 5px;
}
a {
  color: var(--deep-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
hr.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 66, 56, 0.35), transparent);
  margin: 28px 0;
}

/* ---- Preamble / header ------------------------------------------- */
.preamble {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.preamble .lede {
  max-width: 720px;
}
.badge {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(107, 98, 88, 0.4);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  background: rgba(255, 255, 255, 0.35);
}

/* ---- Landing launcher (consultant entrance at /) ----------------- */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.launch-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid rgba(107, 98, 88, 0.22);
  border-left: 3px solid var(--deep-teal);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.6);
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.launch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(107, 98, 88, 0.14);
  background: rgba(255, 253, 247, 0.92);
}
.launch-card.plum { border-left-color: var(--plum); }
.launch-card .lc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep-teal);
}
.launch-card.plum .lc-eyebrow { color: var(--plum); }
.launch-card h3 { font-size: 20px; font-style: italic; margin: 2px 0 2px; }
.launch-card p { font-size: 14px; color: var(--sepia); margin: 0; }
.launch-card .lc-go {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--deep-teal);
}
.launch-card.plum .lc-go { color: var(--plum); }

/* ---- Panel (primary surface) ------------------------------------- */
.panel {
  position: relative;
  padding: 26px 28px;
  border: 1px solid rgba(107, 98, 88, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.26), transparent 18%),
    radial-gradient(circle at 84% 16%, rgba(212, 204, 186, 0.32), transparent 20%),
    linear-gradient(180deg, rgba(237, 232, 220, 0.92), rgba(245, 240, 230, 0.97));
  box-shadow: 0 22px 42px rgba(107, 98, 88, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  margin-bottom: 32px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.panel-head .label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faded-ink);
}

/* ---- Card (secondary surface) ------------------------------------ */
.card {
  border: 1px solid rgba(107, 98, 88, 0.22);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.7);
  padding: 14px 16px;
}
.card h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

/* ---- Fields & inputs --------------------------------------------- */
.field {
  background: var(--parchment);
  border: 1px solid rgba(107, 98, 88, 0.32);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 16px;
  color: var(--ink-black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.field.empty {
  color: var(--faded-ink);
  font-style: italic;
}

/* ---- Chips -------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--parchment);
  border: 1px solid rgba(107, 98, 88, 0.32);
  border-radius: 8px;
  min-height: 38px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(123, 168, 155, 0.22);
  border: 1px solid rgba(74, 124, 111, 0.5);
  color: var(--deep-teal);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 14px;
}
.chip.new {
  background: rgba(217, 185, 164, 0.35);
  border-color: var(--rust);
  color: var(--rust);
}
.chip.loc {
  background: rgba(91, 122, 138, 0.18);
  border-color: var(--slate);
  color: var(--slate);
}
.chip .x {
  color: var(--warm-gray);
  font-size: 12px;
  cursor: pointer;
}

/* ---- Tags --------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(123, 168, 155, 0.2);
  color: var(--deep-teal);
  border: 1px solid rgba(74, 124, 111, 0.4);
  margin-right: 4px;
  margin-bottom: 3px;
}
.tag.plum {
  background: rgba(197, 184, 207, 0.3);
  border-color: var(--plum);
  color: var(--plum);
}
.tag.rust {
  background: rgba(217, 185, 164, 0.3);
  border-color: var(--rust);
  color: var(--rust);
}
.tag.slate {
  background: rgba(91, 122, 138, 0.18);
  border-color: var(--slate);
  color: var(--slate);
}

/* ---- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--deep-teal);
  color: var(--parchment);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 15px;
  border: 1px solid var(--deep-teal);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: filter 0.12s ease;
}
.btn:hover {
  filter: brightness(1.06);
}
.btn.ghost {
  background: transparent;
  color: var(--sepia);
  border-color: rgba(107, 98, 88, 0.5);
}
.btn.plum {
  background: var(--plum);
  border-color: var(--plum);
}

/* ---- Callouts ----------------------------------------------------- */
.callout {
  background: rgba(197, 184, 207, 0.18);
  border-left: 3px solid var(--plum);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 10px 0;
}
.callout.teal {
  background: rgba(123, 168, 155, 0.16);
  border-left-color: var(--deep-teal);
}
.callout.rust {
  background: rgba(217, 185, 164, 0.2);
  border-left-color: var(--rust);
}

/* ---- Monospace URL pill (invite / personal links) ---------------- */
.url-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(107, 98, 88, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--sepia);
}
.url-bar .lock {
  color: var(--teal);
}
.url-bar.personal {
  border-color: rgba(107, 91, 122, 0.5);
  background: rgba(197, 184, 207, 0.18);
}
.url-bar.personal .lock {
  color: var(--plum);
}

/* =====================================================================
   Respondent form (Phase 2)
   Interactive versions of the mockup's form components: the single
   scrolling questionnaire, autocomplete people pickers, chip multi-
   selects, radio scales, checkbox grids and the have/want access grid.
   ===================================================================== */

/* ---- Form layout -------------------------------------------------- */
.form-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.form-card {
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid rgba(107, 98, 88, 0.18);
  border-radius: 14px;
  padding: 20px 20px 18px;
  position: relative;
  box-shadow: 0 6px 14px rgba(107, 98, 88, 0.08);
}
.form-card.custom {
  border-color: rgba(107, 91, 122, 0.45);
  background: linear-gradient(180deg, rgba(197, 184, 207, 0.14), rgba(255, 253, 247, 0.85));
}
.form-card .step-num {
  position: absolute;
  top: -12px;
  left: 16px;
  background: var(--parchment);
  color: var(--plum);
  border: 1px solid rgba(107, 91, 122, 0.5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.form-card h3 {
  margin-bottom: 6px;
}
.form-card h4 {
  font-size: 14px;
  margin: 14px 0 4px;
}
.form-card .help {
  font-size: 13px;
  color: var(--warm-gray);
  margin-bottom: 12px;
  font-style: italic;
}

/* ---- Text inputs / textareas (real fields) ----------------------- */
input.field,
textarea.field,
.field input,
.field-input {
  width: 100%;
  background: var(--parchment);
  border: 1px solid rgba(107, 98, 88, 0.32);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 16px;
  color: var(--ink-black);
}
textarea.field {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}
input.field:focus,
textarea.field:focus,
.field-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(74, 124, 111, 0.18);
}
.field .matched {
  margin-left: auto;
  color: var(--teal);
  font-size: 12px;
}
.field .is-new {
  margin-left: auto;
  color: var(--rust);
  font-size: 12px;
}

/* ---- Autocomplete menu ------------------------------------------- */
.autocomplete {
  position: relative;
  margin-top: 8px;
}
.autocomplete .menu {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid rgba(107, 98, 88, 0.3);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.98);
  font-size: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(107, 98, 88, 0.14);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
}
.autocomplete .menu li {
  padding: 7px 11px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.autocomplete .menu li.hover,
.autocomplete .menu li:hover {
  background: rgba(123, 168, 155, 0.18);
}
.autocomplete .menu li.create {
  color: var(--rust);
  border-top: 1px dashed rgba(107, 98, 88, 0.25);
}

/* ---- Radio scales (rung / frequency / hours / sentiment / 1-5) --- */
.radio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.radio-row.inline {
  flex-direction: row;
  flex-wrap: wrap;
}
.radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(107, 98, 88, 0.18);
  background: rgba(255, 253, 247, 0.6);
  font-size: 14px;
  cursor: pointer;
}
.radio.selected {
  border-color: var(--plum);
  background: rgba(197, 184, 207, 0.25);
}
.radio .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--warm-gray);
  flex: 0 0 14px;
  margin-top: 3px;
  position: relative;
}
.radio.selected .dot {
  border-color: var(--plum);
}
.radio.selected .dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--plum);
}
.radio .level-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
  display: block;
  margin-bottom: 2px;
}

/* ---- Checkbox grids ---------------------------------------------- */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 14px;
}
.checkbox-grid.single {
  grid-template-columns: 1fr;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.checkbox .box {
  width: 14px;
  height: 14px;
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 14px;
  position: relative;
}
.checkbox.checked .box {
  background: var(--teal);
  border-color: var(--deep-teal);
}
.checkbox.checked .box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--parchment);
  border-bottom: 2px solid var(--parchment);
  transform: rotate(45deg);
}

/* ---- Have / want access grid ------------------------------------- */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 86px 86px;
  gap: 8px 10px;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
}
.access-grid .h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faded-ink);
  text-align: center;
}
.access-grid .toolname {
  color: var(--ink-black);
}
.access-grid .checkbox {
  justify-content: center;
}

/* ---- Follow-up reveal -------------------------------------------- */
.followup {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(107, 91, 122, 0.35);
}

/* ---- Welcome / GDPR card ----------------------------------------- */
.welcome-card {
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.95), rgba(245, 240, 230, 0.95));
  border: 1px solid rgba(107, 91, 122, 0.35);
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin-bottom: 18px;
}
.welcome-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 6px;
}
.welcome-card h3 {
  font-size: 22px;
  font-style: italic;
  margin-bottom: 8px;
}
.welcome-card .gdpr {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(245, 240, 230, 0.7);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sepia);
}
.welcome-card .gdpr p { margin: 0 0 8px; }
.welcome-card .gdpr p:last-child { margin-bottom: 0; }
.welcome-card .gdpr a { color: var(--teal); }
.welcome-card .gdpr .gdpr-flag {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(107, 98, 88, 0.3);
  font-size: 12px;
  color: var(--faded-ink);
}

/* ---- Returning-visitor banner (Phase 3 prefill state) ------------ */
.returning-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(197, 184, 207, 0.18);
  border-left: 3px solid var(--plum);
  font-size: 14px;
  margin-bottom: 16px;
}
.returning-banner .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
  background: var(--pale-violet);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* ---- Personal-link callout (thank-you state) --------------------- */
.link-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed rgba(107, 91, 122, 0.6);
  background: rgba(197, 184, 207, 0.14);
  border-radius: 12px;
  margin-top: 10px;
}
.link-callout .big {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--plum);
  word-break: break-all;
}

/* ---- Form actions / utilities ------------------------------------ */
.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.autosave-note {
  font-size: 12px;
  color: var(--faded-ink);
  margin-left: auto;
}
.hidden {
  display: none !important;
}
.error-text {
  color: var(--rust);
  font-size: 14px;
  margin-top: 8px;
}

/* =====================================================================
   Consultant dashboard (Phase 4) — ported from mockup.html §4.
   Stat bar, Cytoscape canvas + controls + legend, and the side profile
   panel with its timestamped history timeline. Always Atelier; never
   client-skinned.
   ===================================================================== */

.dashboard .dash-sub {
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--warm-gray);
}

/* ---- Stat bar ----------------------------------------------------- */
.stat-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.stat {
  flex: 1 1 0;
  min-width: 104px;
  background: rgba(255, 253, 247, 0.7);
  border: 1px solid rgba(107, 98, 88, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
}
.stat .n {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-black);
  font-feature-settings: "lnum";
}
.stat .l {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faded-ink);
}

/* ---- Graph shell: canvas + side panel ----------------------------- */
.dash-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  min-height: 520px;
}
@media (max-width: 860px) {
  .dash-shell {
    grid-template-columns: 1fr;
  }
}

.canvas-wrap {
  position: relative;
  background:
    linear-gradient(rgba(139, 130, 117, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(139, 130, 117, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    rgba(245, 240, 230, 0.6);
  border: 1px solid rgba(107, 98, 88, 0.2);
  border-radius: 12px;
  min-height: 480px;
}
#cy {
  width: 100%;
  height: 480px;
  border-radius: 12px;
  cursor: grab;
}
.canvas-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 5;
  flex-wrap: wrap;
}
.legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid rgba(107, 98, 88, 0.25);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 210px;
}
.legend .row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--sepia);
  flex: 0 0 12px;
}
.hint-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid rgba(107, 98, 88, 0.25);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--warm-gray);
  font-style: italic;
}

/* ---- Side profile panel ------------------------------------------- */
.side {
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid rgba(107, 98, 88, 0.2);
  border-radius: 12px;
  padding: 16px 16px 14px;
  font-size: 14px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side .person-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.side .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pale-sage);
  color: var(--deep-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  border: 1px solid var(--deep-teal);
  flex: 0 0 46px;
}
.side .person-head .name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-black);
  line-height: 1.1;
}
.side .person-head .role {
  font-size: 12px;
  color: var(--warm-gray);
}
.side h4 {
  margin: 0 0 4px;
}
.side .kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 10px;
  font-size: 13px;
  margin: 0;
}
.side .kv dt {
  color: var(--faded-ink);
}
.side .kv dd {
  margin: 0;
  color: var(--sepia);
}
.side .literacy-bar {
  position: relative;
  height: 8px;
  background: rgba(212, 204, 186, 0.6);
  border-radius: 999px;
  margin-top: 4px;
}
.side .literacy-bar .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--teal), var(--plum));
  border-radius: 999px;
}
.side .literacy-bar .pip {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  background: rgba(74, 66, 56, 0.25);
}
.side .assertions {
  font-size: 13px;
  margin: 6px 0 0;
  padding: 0;
}
.side .assertions li {
  list-style: none;
  padding: 6px 0;
  border-top: 1px dashed rgba(107, 98, 88, 0.2);
}
.side .assertions li:first-child {
  border-top: 0;
}
.side .assertions .who {
  color: var(--warm-gray);
  font-style: italic;
  font-size: 12px;
}
.side .words {
  font-size: 13px;
}
.side .words p {
  margin: 0 0 6px;
}
.side .words .q {
  color: var(--faded-ink);
  font-size: 12px;
}
.side .pmeta {
  font-size: 12px;
  color: var(--warm-gray);
  border-top: 1px dashed rgba(107, 98, 88, 0.2);
  padding-top: 10px;
}
.side .pmeta .pl {
  font-family: "JetBrains Mono", monospace;
  color: var(--plum);
}

/* ---- Timestamped history timeline --------------------------------- */
.timeline {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 0 0 12px 18px;
  border-left: 1px solid rgba(107, 98, 88, 0.25);
}
.timeline li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  border: 1px solid var(--deep-teal);
}
.timeline li.up::before {
  background: var(--plum);
  border-color: var(--plum);
}
.timeline li.seed::before {
  background: var(--rust);
  border-color: var(--rust);
}
.timeline .date {
  font-size: 11px;
  color: var(--faded-ink);
  font-family: "JetBrains Mono", monospace;
}
.timeline .what {
  font-size: 13px;
  color: var(--sepia);
}
.timeline .what .up-arrow {
  color: var(--plum);
  font-weight: 600;
}

/* =====================================================================
   v5 — dashboard filter bar (PRD FR-D5) + engagement setup / builder
   ===================================================================== */
.dash-nav { font-size: 13px; color: var(--deep-teal); text-decoration: none; border: 1px solid rgba(74,124,111,0.4); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.dash-nav:hover { background: rgba(74,124,111,0.12); }

.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border: 1px solid rgba(107,98,88,0.2); border-radius: 12px; background: rgba(255,253,247,0.6); }
.filter-bar .fb-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faded-ink); }
.fctl { font-family: inherit; font-size: 13px; color: var(--ink-black); background: var(--parchment); border: 1px solid rgba(107,98,88,0.32); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
.fchip { font-family: inherit; font-size: 13px; color: var(--sepia); background: transparent; border: 1px solid rgba(107,98,88,0.35); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.fchip:hover { border-color: var(--deep-teal); }
.fchip.on { background: rgba(74,124,111,0.18); border-color: var(--deep-teal); color: var(--deep-teal); }
.fchip.clear { border-style: dashed; color: var(--rust); border-color: rgba(156,90,60,0.5); }
.fb-readout { margin-left: auto; font-size: 13px; color: var(--warm-gray); font-style: italic; }

.setup-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } }
.eng-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.eng-item { border: 1px solid rgba(107,98,88,0.22); border-radius: 10px; background: rgba(255,253,247,0.7); padding: 10px 12px; cursor: pointer; }
.eng-item:hover { border-color: rgba(74,124,111,0.5); }
.eng-item.active { border-color: var(--plum); background: rgba(197,184,207,0.14); }
.eng-item .eng-name { font-size: 16px; color: var(--ink-black); font-weight: 500; }
.eng-item .eng-meta { font-size: 12px; color: var(--warm-gray); margin-top: 2px; }
.eng-item .eng-links { font-size: 12px; margin-top: 6px; }
.create-card { border: 1px dashed rgba(107,98,88,0.4); border-radius: 10px; padding: 12px 14px; background: rgba(245,240,230,0.5); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.create-card h4 { margin-bottom: 8px; }
.create-card.flash { border-color: var(--deep-teal); border-style: solid; box-shadow: 0 0 0 3px rgba(74,124,111,0.18); }
.create-row { display: flex; flex-direction: column; gap: 8px; }
.create-row .field { width: 100%; }
.create-row .btn { align-self: flex-start; cursor: pointer; }

.sec-group { margin-bottom: 18px; }
.sec-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; border-bottom: 1px solid rgba(107,98,88,0.2); margin-bottom: 8px; }
.sec-head .sec-name { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warm-gray); }
.sec-head .sec-count { font-size: 12px; color: var(--faded-ink); font-family: "JetBrains Mono", monospace; }
.sec-head .sec-switch { margin-left: auto; }
.section-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid rgba(107,98,88,0.2); border-radius: 10px; background: rgba(255,253,247,0.72); margin-bottom: 7px; }
.section-item.off { opacity: 0.55; }
.section-item .grip { color: var(--faded-ink); cursor: grab; font-size: 14px; user-select: none; }
.section-item .si-body { flex: 1; min-width: 0; }
.section-item .si-edit { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font-family: inherit; font-size: 15px; color: var(--ink-black); }
.section-item .si-edit:hover { border-color: rgba(107,98,88,0.25); }
.section-item .si-edit:focus { outline: none; border-color: var(--deep-teal); background: var(--parchment); }
.section-item .si-sub { font-size: 12px; color: var(--warm-gray); padding: 0 6px; }
.qtag { display: inline-block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 6px; border-radius: 999px; border: 1px solid; }
.qtag.trend { color: var(--plum); border-color: var(--plum); background: rgba(197,184,207,0.18); }

.switch { position: relative; width: 38px; height: 20px; border-radius: 999px; flex: 0 0 38px; background: rgba(107,98,88,0.3); border: 1px solid rgba(107,98,88,0.4); cursor: pointer; transition: background .15s ease; }
.switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--parchment); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left .15s ease; }
.switch.on { background: var(--teal); border-color: var(--deep-teal); }
.switch.on::after { left: 19px; }

/* =====================================================================
   Phase 5 — dashboard depth: tabs + Teams / Literacy / Conflicts /
   Submissions views. Ported from mockup.html (dash-tabs, histo, barlist,
   conflict-card/claim/mini-btn, log-table, team-card/member, note-list).
   ===================================================================== */
.dash-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(107, 98, 88, 0.2);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.dash-tabs .tab {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--warm-gray);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  background: transparent;
  font-family: inherit;
}
.dash-tabs .tab:hover {
  color: var(--ink-black);
}
.dash-tabs .tab.active {
  color: var(--ink-black);
  border-bottom-color: var(--plum);
  font-weight: 500;
}
.dash-tabs .tab .pill {
  display: inline-block;
  margin-left: 6px;
  background: var(--rust);
  color: var(--parchment);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}

.dash-view[hidden] {
  display: none;
}

/* ---- Literacy: rung histogram ---- */
.histo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding: 6px 0 0;
}
.histo .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.histo .bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  border: 1px solid rgba(74, 66, 56, 0.18);
  border-bottom: 0;
}
.histo .cnt {
  font-size: 14px;
  color: var(--ink-black);
  font-weight: 600;
}
.histo .lab {
  font-size: 11px;
  color: var(--warm-gray);
  text-align: center;
  line-height: 1.2;
}

/* ---- Literacy / locations: horizontal bar lists ---- */
.barlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.barlist .row {
  display: grid;
  grid-template-columns: 150px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.barlist .name {
  color: var(--sepia);
}
.barlist .track {
  height: 12px;
  background: rgba(212, 204, 186, 0.55);
  border-radius: 999px;
  overflow: hidden;
}
.barlist .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--teal));
  border-radius: 999px;
}
.barlist .fill.plum {
  background: linear-gradient(90deg, var(--pale-violet), var(--plum));
}
.barlist .fill.rust {
  background: linear-gradient(90deg, var(--pale-rust), var(--rust));
}
.barlist .num {
  font-size: 12px;
  color: var(--warm-gray);
  text-align: right;
  font-feature-settings: "lnum";
}

.note-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--sepia);
}
.note-list li {
  margin-bottom: 5px;
}

/* ---- Conflicts ---- */
.conflict-card {
  border: 1px solid rgba(156, 90, 60, 0.4);
  border-radius: 12px;
  background: rgba(217, 185, 164, 0.12);
  padding: 16px;
  margin-bottom: 14px;
}
.conflict-card h3 {
  font-size: 16px;
  margin: 0;
}
.claim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(107, 98, 88, 0.2);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.7);
  margin-top: 8px;
}
.claim .ctext {
  font-size: 14px;
  color: var(--ink-black);
}
.claim .who {
  font-size: 12px;
  color: var(--warm-gray);
  font-style: italic;
}
.claim .acts {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.mini-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(107, 98, 88, 0.4);
  background: transparent;
  color: var(--sepia);
  cursor: pointer;
  font-family: inherit;
}
.mini-btn.accept {
  border-color: var(--deep-teal);
  color: var(--deep-teal);
}
.mini-btn.reject {
  border-color: var(--rust);
  color: var(--rust);
}
.mini-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.claim.resolved-keep {
  border-color: var(--deep-teal);
  background: rgba(123, 168, 155, 0.18);
}
.claim.resolved-drop {
  opacity: 0.45;
}
.claim.resolved-drop .ctext {
  text-decoration: line-through;
}

/* ---- Submissions log table ---- */
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.log-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faded-ink);
  padding: 6px 10px;
  border-bottom: 1px solid rgba(107, 98, 88, 0.25);
  font-weight: 600;
}
.log-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(107, 98, 88, 0.12);
  vertical-align: top;
}
.log-table tr:hover td {
  background: rgba(123, 168, 155, 0.08);
}
.log-table .ts {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--warm-gray);
  white-space: nowrap;
}

/* ---- Teams cards ---- */
.team-card {
  border: 1px solid rgba(107, 98, 88, 0.22);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.7);
  margin-bottom: 12px;
  overflow: hidden;
}
.team-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.team-card .tdot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(74, 66, 56, 0.3);
  flex: 0 0 14px;
}
.team-card .tname {
  font-size: 16px;
  color: var(--ink-black);
  font-weight: 500;
}
.team-card .tcount {
  margin-left: auto;
  font-size: 12px;
  color: var(--warm-gray);
}
.team-card .caret {
  font-size: 12px;
  color: var(--faded-ink);
  transition: transform 0.15s ease;
}
.team-card.collapsed .caret {
  transform: rotate(-90deg);
}
.team-card.collapsed .members {
  display: none;
}
.team-card .members {
  padding: 2px 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px;
}
.member {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.member:hover {
  background: rgba(123, 168, 155, 0.14);
}
.member .mdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  border: 1px solid rgba(74, 66, 56, 0.3);
}
.member .mname {
  color: var(--ink-black);
}
.member .mrole {
  color: var(--warm-gray);
  font-size: 12px;
}
.member .penddot {
  font-size: 10px;
  color: var(--rust);
  margin-left: auto;
}

/* ===================================================================
 * Phase 6 — template-builder editing (options chips, add/delete/reorder)
 * Ported from mockup.html §2 card-editor styling.
 * =================================================================== */
.section-item .si-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.q-iconbtn {
  border: 1px solid rgba(107, 98, 88, 0.3);
  background: transparent;
  color: var(--warm-gray);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.q-iconbtn:hover {
  border-color: var(--deep-teal);
  color: var(--deep-teal);
}
.q-iconbtn.danger:hover {
  border-color: var(--rust);
  color: var(--rust);
}
.q-iconbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
.q-iconbtn.open {
  border-color: var(--plum);
  color: var(--plum);
}

/* The options editor that drops down under a question row. */
.q-options {
  margin: 2px 2px 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(107, 98, 88, 0.32);
  border-radius: 10px;
  background: rgba(245, 240, 230, 0.45);
}
.q-options .opt-label {
  font-size: 12px;
  color: var(--warm-gray);
  margin-bottom: 8px;
}
.q-options.hidden {
  display: none;
}
.opt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.opt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(91, 122, 138, 0.16);
  border: 1px solid var(--slate);
  color: var(--slate);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
}
.opt-chip .x {
  cursor: pointer;
  color: var(--warm-gray);
  font-size: 13px;
}
.opt-chip .x:hover {
  color: var(--rust);
}
.opt-add {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.opt-add input {
  border: 1px solid rgba(107, 98, 88, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--parchment);
  min-width: 120px;
}
.mini-add {
  border: 1px dashed rgba(107, 98, 88, 0.5);
  background: transparent;
  color: var(--sepia);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.mini-add:hover {
  border-color: var(--deep-teal);
  color: var(--deep-teal);
}

/* "Add a question" row inside a section + "add a section" block. */
.add-q-row {
  margin: 4px 0 6px;
}
.q-new-form,
.sec-new-form {
  border: 1px dashed rgba(107, 98, 88, 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(245, 240, 230, 0.5);
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-new-form.hidden,
.sec-new-form.hidden {
  display: none;
}
.q-new-form .row,
.sec-new-form .row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.q-new-form input,
.q-new-form select,
.sec-new-form input {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid rgba(107, 98, 88, 0.3);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--parchment);
  color: var(--ink-black);
}
.q-new-form input.grow {
  flex: 1;
  min-width: 160px;
}
.q-new-form .opt-hint {
  font-size: 12px;
  color: var(--warm-gray);
}
.builder-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(107, 98, 88, 0.2);
}

/* =====================================================================
   PHASE 7 — CLIENT-BRAND SKIN (respondent form only).
   Applied to #form-app.branded, driven entirely off the --brand-* custom
   properties injected per engagement in form.html (from the parsed brand.md).
   The consultant dashboard + setup pages NEVER get this class, so they always
   stay Satori Atelier. Any client's palette works because nothing is
   hard-coded here — only the brand vars + a few neutral surfaces.
   Ported & generalised from mockup.html #form-region.brand.
   ===================================================================== */

/* The brand bar is hidden unless the form is branded. */
.brand-bar { display: none; }

#form-app.branded {
  /* Neutral surfaces derived from the brand background so cards read cleanly
     on any palette. color-mix gives a card slightly lighter than the page and
     a hairline border a touch darker; both fall back gracefully. */
  --brand-card: #ffffff;
  --brand-line: color-mix(in srgb, var(--brand-ink) 14%, var(--brand-bg));
  --brand-field: color-mix(in srgb, var(--brand-bg) 88%, #ffffff);
  --brand-soft: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-bg));

  background: var(--brand-bg);
  border-radius: 16px;
  padding: 8px 22px 22px;
  font-family: var(--brand-body-font);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

#form-app.branded .brand-bar {
  display: flex; align-items: center; gap: 10px; padding: 18px 4px 14px;
  color: var(--brand-primary); font-weight: 700; font-size: 19px;
  letter-spacing: 0.01em; font-family: var(--brand-heading-font);
}
#form-app.branded .brand-bar .mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--brand-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
#form-app.branded .brand-bar .tag-line {
  margin-left: auto; font-weight: 400; font-size: 12px;
  color: var(--brand-ink); opacity: 0.62; font-family: var(--brand-body-font);
}

/* Headings + body type take the brand fonts; kill the Atelier italic. */
#form-app.branded h1, #form-app.branded h2, #form-app.branded h3,
#form-app.branded h4, #form-app.branded .name,
#form-app.branded .badge, #form-app.branded .brand-bar {
  font-family: var(--brand-heading-font);
  color: var(--brand-ink);
  font-style: normal !important;
}
#form-app.branded p, #form-app.branded label, #form-app.branded .field,
#form-app.branded .field-input, #form-app.branded .meta,
#form-app.branded .help, #form-app.branded .si-sub {
  font-family: var(--brand-body-font);
}
#form-app.branded .help, #form-app.branded .meta,
#form-app.branded .si-sub, #form-app.branded .autosave-note {
  color: color-mix(in srgb, var(--brand-ink) 62%, var(--brand-bg));
}
#form-app.branded .badge { color: var(--brand-primary); }

/* Welcome / GDPR card. */
#form-app.branded .welcome-card {
  background: var(--brand-card) !important;
  border: 1px solid var(--brand-line) !important; border-radius: 14px;
}
#form-app.branded .welcome-card .eyebrow,
#form-app.branded .eyebrow { color: var(--brand-primary); }
#form-app.branded .welcome-card .gdpr {
  background: var(--brand-soft) !important;
  border-left-color: var(--brand-primary) !important;
  color: color-mix(in srgb, var(--brand-ink) 70%, var(--brand-bg));
}

/* Returning-visitor banner. */
#form-app.branded .returning-banner {
  background: var(--brand-soft) !important;
  border-left-color: var(--brand-primary) !important;
}
#form-app.branded .returning-banner .av {
  background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}

/* Question cards. */
#form-app.branded .form-card {
  background: var(--brand-card) !important;
  border: 1px solid var(--brand-line) !important; border-radius: 12px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-ink) 8%, transparent);
}
#form-app.branded .form-card .step-num {
  background: var(--brand-card); color: var(--brand-primary);
  border-color: var(--brand-primary) !important;
}

/* Inputs. */
#form-app.branded .field, #form-app.branded .chips,
#form-app.branded .field-input {
  background: var(--brand-field) !important;
  border-color: var(--brand-line) !important;
  color: var(--brand-ink); font-family: var(--brand-body-font);
}
#form-app.branded .field-input:focus { border-color: var(--brand-primary); }
#form-app.branded .autocomplete .menu {
  background: var(--brand-card); border-color: var(--brand-line);
}
#form-app.branded .autocomplete .menu li.hover,
#form-app.branded .autocomplete .menu li:hover { background: var(--brand-soft); }
#form-app.branded .autocomplete .menu li.create { color: var(--brand-accent); }

/* Chips. */
#form-app.branded .chip {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-bg));
  border-color: var(--brand-primary); color: var(--brand-primary);
}
#form-app.branded .chip.new {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-bg));
  border-color: var(--brand-accent); color: var(--brand-accent);
}

/* Radios. */
#form-app.branded .radio { border-color: var(--brand-line); background: var(--brand-field); }
#form-app.branded .radio.selected {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-bg));
}
#form-app.branded .radio.selected .dot { border-color: var(--brand-primary); }
#form-app.branded .radio.selected .dot::after { background: var(--brand-primary); }
#form-app.branded .radio .level-tag {
  color: color-mix(in srgb, var(--brand-ink) 60%, var(--brand-bg));
}

/* Checkboxes. */
#form-app.branded .checkbox .box {
  border-color: color-mix(in srgb, var(--brand-ink) 55%, var(--brand-bg));
}
#form-app.branded .checkbox.checked .box {
  background: var(--brand-primary); border-color: var(--brand-primary);
}
#form-app.branded .checkbox.checked .box::after {
  border-right-color: #fff; border-bottom-color: #fff;
}
#form-app.branded .access-grid .h {
  color: color-mix(in srgb, var(--brand-ink) 60%, var(--brand-bg));
}

/* Buttons. */
#form-app.branded .btn {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff; font-family: var(--brand-heading-font); border-radius: 8px;
}
#form-app.branded .btn.ghost {
  background: transparent !important; color: var(--brand-primary);
  border-color: var(--brand-primary) !important;
}
#form-app.branded .btn.plum {
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* Personal-link callout + tags + links + follow-ups. */
#form-app.branded .link-callout {
  border-color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-bg)) !important;
}
#form-app.branded .link-callout .big { color: var(--brand-primary); }
#form-app.branded .tag {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-bg));
  border-color: var(--brand-primary); color: var(--brand-primary);
}
#form-app.branded .tag.plum {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-bg));
  border-color: var(--brand-accent); color: var(--brand-accent);
}
#form-app.branded a { color: var(--brand-accent); }
#form-app.branded .followup { border-left-color: var(--brand-accent); }

/* ---- Phase 7: setup brand-theme panel (Atelier-styled, consultant side) ---- */
.brand-panel { margin-top: 22px; }
.brand-theme-panel .brand-current { margin: 8px 0 12px; }
.brand-name-line { font-size: 15px; color: var(--ink-black); margin-bottom: 8px; }
.brand-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.brand-swatch {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sepia);
}
.brand-swatch .sw-chip {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid rgba(107, 98, 88, 0.4);
}
.brand-swatch .sw-label { color: var(--warm-gray); }
.brand-swatch .sw-hex { font-family: "JetBrains Mono", monospace; color: var(--ink-black); }
.brand-fonts { margin-bottom: 4px; }
.brand-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.brand-md-label { display: block; margin: 8px 0 4px; }
.brand-md {
  width: 100%; box-sizing: border-box;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
  line-height: 1.45; color: var(--ink-black);
  background: var(--parchment); border: 1px solid rgba(107, 98, 88, 0.35);
  border-radius: 8px; padding: 10px 12px; resize: vertical;
}
.brand-md:focus { outline: none; border-color: var(--teal); }

/* ---- Phase 8: Progression tab + sparklines ------------------------------- */
.prog-headline {
  border: 1px solid rgba(107, 98, 88, 0.22);
  background: rgba(181, 207, 198, 0.16);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.prog-headline .ph-text {
  font-size: 16px;
  color: var(--ink-black);
}
.prog-headline .big-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.prog-headline .big-num.up { color: var(--teal); }
.move-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.move-chips .mc {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(107, 98, 88, 0.3);
  color: var(--sepia);
  background: var(--parchment);
  white-space: nowrap;
}
.move-chips .mc.up { color: var(--teal); border-color: rgba(74, 124, 111, 0.5); }
.move-chips .mc.down { color: var(--rust); border-color: rgba(156, 90, 60, 0.5); }
.move-chips .mc.flat { color: var(--warm-gray); }

/* Rung now-vs-first comparison rows */
.rcompare { display: flex; flex-direction: column; gap: 10px; }
.rcrow { display: flex; flex-direction: column; gap: 4px; }
.rcrow .rclab {
  font-size: 12px;
  color: var(--sepia);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rcrow .rcdot {
  width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid rgba(74, 66, 56, 0.2);
  display: inline-block;
}
.rcbars { display: flex; flex-direction: column; gap: 3px; }
.rcbar {
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  gap: 8px;
  align-items: center;
}
.rcbar .rclbl { font-size: 10px; color: var(--faded-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.rcbar .track {
  height: 10px;
  background: rgba(212, 204, 186, 0.55);
  border-radius: 999px;
  overflow: hidden;
}
.rcbar .fill { height: 100%; border-radius: 999px; }
.rcbar .fill.first { background: linear-gradient(90deg, var(--shadow-cream), var(--deep-parchment)); }
.rcbar .fill.now { background: linear-gradient(90deg, var(--sage), var(--teal)); }
.rcbar .rcnum { font-size: 11px; color: var(--warm-gray); text-align: right; }

/* Headline trend cards */
.trend-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.trend-card {
  flex: 1 1 140px;
  border: 1px solid rgba(107, 98, 88, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--parchment);
}
.trend-card .tc-label { font-size: 11px; color: var(--faded-ink); text-transform: uppercase; letter-spacing: 0.05em; }
.trend-card .tc-val {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 18px;
  color: var(--ink-black);
}
.trend-card .tc-arrow { color: var(--faded-ink); font-size: 14px; }
.trend-card .tc-suffix { font-size: 12px; color: var(--warm-gray); }
.trend-card .tc-delta { font-size: 12px; margin-left: auto; font-weight: 600; }
.trend-card .tc-delta.up { color: var(--teal); }
.trend-card .tc-delta.down { color: var(--rust); }
.trend-card .tc-delta.flat { color: var(--warm-gray); }

/* Movers list */
.mover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mover-list li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  grid-template-areas: "arrow name date" "arrow move date";
  column-gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.mover-list li:hover { background: rgba(181, 207, 198, 0.18); border-color: rgba(107, 98, 88, 0.18); }
.mover-list .mv-arrow { grid-area: arrow; font-size: 16px; font-weight: 700; }
.mover-list li.up .mv-arrow { color: var(--teal); }
.mover-list li.down .mv-arrow { color: var(--rust); }
.mover-list li.flat .mv-arrow { color: var(--warm-gray); }
.mover-list .mv-name { grid-area: name; font-size: 14px; color: var(--ink-black); }
.mover-list .mv-move { grid-area: move; font-size: 12px; color: var(--warm-gray); }
.mover-list .mv-date { grid-area: date; font-size: 11px; color: var(--faded-ink); white-space: nowrap; }

/* Sparklines (inline SVG, reused in the person panel) */
svg.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.kv-spark { display: inline-block; margin-left: 8px; vertical-align: middle; }
.h4-spark { display: inline-block; margin-left: 10px; vertical-align: middle; }
.side .kv dd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Monthly check-in (pulse) card — top of the Progression tab */
.pulse-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(74, 124, 111, 0.35);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: rgba(181, 207, 198, 0.10);
}
.pulse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pulse-head h4 { margin: 0 0 2px; }
.pulse-head .meta { margin: 0; max-width: 52ch; }
.pulse-head #pulse-get { flex: none; cursor: pointer; background: none; }
.pulse-body { margin-top: 12px; border-top: 1px solid rgba(107, 98, 88, 0.15); padding-top: 12px; }
.pulse-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pulse-actions #pulse-copy-all { cursor: pointer; background: none; }
.dash-nav.copied, .mini-btn.copied { color: var(--teal); border-color: var(--teal); }
.pulse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pulse-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.pulse-row:hover { background: rgba(181, 207, 198, 0.16); border-color: rgba(107, 98, 88, 0.16); }
.pulse-row .pl-name { font-size: 14px; color: var(--ink-black); }
.pulse-row .pl-team { color: var(--faded-ink); font-size: 12px; }
.pulse-row .pl-url {
  font-size: 11px;
  color: var(--faded-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-row .pl-copy { cursor: pointer; }

/* =====================================================================
   Phase 9 — Export menu + GDPR delete affordance (dashboard only)
   ===================================================================== */
.export-menu { position: relative; display: inline-block; }
.export-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  background: var(--parchment, #f5f0e6);
  border: 1px solid rgba(107, 98, 88, 0.28);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(107, 98, 88, 0.22);
}
.export-pop[hidden] { display: none; }
.export-item {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--deep-teal, #3d5c55);
  text-decoration: none;
  border-radius: 7px;
}
.export-item:hover { background: rgba(74, 124, 111, 0.12); }

/* GDPR per-person deletion — deliberately understated (rust, not loud red). */
.gdpr-row {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 90, 60, 0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gdpr-del {
  font-size: 12px;
  color: var(--rust, #9c5a3c);
  background: transparent;
  border: 1px solid rgba(156, 90, 60, 0.5);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.gdpr-del:hover { background: rgba(156, 90, 60, 0.12); }
.gdpr-row .meta { font-size: 11px; }

/* =====================================================================
   Reports tab — report builder + live preview
   ===================================================================== */
.report-builder { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.rep-controls {
  background: rgba(255, 253, 247, 0.6);
  border: 1px solid rgba(107, 98, 88, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
}
.rep-controls .facet { margin-bottom: 14px; }
.rep-controls .facet h4 {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--plum);
}
.rep-controls .opt {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 2px 0; cursor: pointer; color: var(--ink-black);
}
.rep-controls .opt input { accent-color: var(--teal); }
.rep-controls .fctl { width: 100%; }
.rep-note { font-size: 11px; color: var(--faded-ink); margin-top: 4px; }
.rep-rule { border: 0; border-top: 1px solid rgba(107, 98, 88, 0.18); margin: 12px 0; }
.rep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-actions .dash-nav, #rep-save { cursor: pointer; background: none; }

.rep-saved-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.rep-saved-row .rep-load {
  flex: 1; text-align: left; cursor: pointer; font-family: inherit; font-size: 13px;
  background: rgba(181, 207, 198, 0.18); border: 1px solid rgba(74, 124, 111, 0.3);
  border-radius: 7px; padding: 5px 9px; color: var(--ink-black);
}
.rep-saved-row .rep-load:hover { background: rgba(181, 207, 198, 0.36); }
.rep-saved-row .rep-del {
  cursor: pointer; border: 1px solid var(--line, rgba(107,98,88,0.3)); background: transparent;
  border-radius: 6px; color: var(--rust); width: 26px; height: 26px; font-size: 14px;
}

.rep-preview {
  background: var(--paper, #fffdf7);
  border: 1px solid rgba(107, 98, 88, 0.18);
  border-radius: 14px; padding: 18px 20px; min-height: 360px;
}
.rep-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
  flex-wrap: wrap; border-bottom: 1px solid rgba(107, 98, 88, 0.18);
  padding-bottom: 11px; margin-bottom: 12px;
}
.rep-title { font-size: 21px; font-style: italic; font-weight: 600; margin: 0; }
.rep-count { color: var(--teal); font-weight: 600; }
.rep-summary {
  display: flex; gap: 20px; flex-wrap: wrap; background: rgba(181, 207, 198, 0.12);
  border: 1px solid rgba(107, 98, 88, 0.16); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.rep-summary .s b { font-size: 19px; color: var(--deep-teal); }
.rep-summary .s span { display: block; font-size: 11px; color: var(--faded-ink); }
.rep-gh {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum);
  margin: 16px 0 8px; border-bottom: 1px solid rgba(107, 98, 88, 0.16); padding-bottom: 3px;
}
.rep-card {
  border: 1px solid rgba(107, 98, 88, 0.18); border-left: 3px solid var(--teal);
  border-radius: 11px; padding: 12px 15px; margin-bottom: 10px; background: rgba(255, 253, 247, 0.7);
  cursor: pointer;
}
.rep-card:hover { background: rgba(181, 207, 198, 0.16); }
.rep-card .rc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rep-card .rc-nm { font-size: 17px; font-weight: 600; }
.rep-card .rc-ro { color: var(--faded-ink); font-size: 13px; }
.rep-card .rc-tags { margin: 6px 0 2px; }
.rep-card dl.kv { grid-template-columns: auto 1fr; margin-top: 8px; }
.rep-card dl.kv dd.quote { font-style: italic; color: var(--sepia); }
.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-table th, .rep-table td {
  text-align: left; padding: 6px 9px; border-bottom: 1px solid rgba(107, 98, 88, 0.16); vertical-align: top;
}
.rep-table th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum); }
.rep-table tr[data-person]:hover td { background: rgba(181, 207, 198, 0.16); cursor: pointer; }

@media (max-width: 860px) { .report-builder { grid-template-columns: 1fr; } }