*{box-sizing:border-box}

:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#172033;
  --muted:#667085;
  --line:#dfe5ec;
  --line-strong:#cbd5e1;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-soft:#eff6ff;
  --green:#16794b;
  --green-soft:#ecfdf3;
  --amber:#a15c00;
  --amber-soft:#fff8e7;
  --slate:#475467;
  --slate-soft:#f2f4f7;
  --danger:#b42318;
  --shadow:0 20px 60px rgba(30,41,59,.08);
}

html{scroll-behavior:auto}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(37,99,235,.08), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(22,121,75,.06), transparent 24%),
    var(--bg);
  color:var(--text);
}

button,input,select{font:inherit}

.page-shell{
  width:min(1480px,96%);
  margin:28px auto 50px;
}

.survey-card{
  padding:34px 38px 30px;
  border:1px solid rgba(203,213,225,.75);
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:var(--shadow);
}

.survey-header{
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-start;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}

.eyebrow{
  margin:0 0 7px;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

h1{
  margin:0 0 8px;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.description{
  max-width:900px;
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.header-status{
  flex:none;
  min-width:190px;
  padding-top:2px;
}

.header-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:var(--blue-soft);
  color:#1e40af;
  font-size:13px;
  font-weight:800;
}

.button{
  min-height:42px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:9px;
  cursor:pointer;
  font-weight:750;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}

.button:hover:not(:disabled){transform:translateY(-1px)}
.button:disabled{opacity:.45;cursor:not-allowed}
.button.primary{
  background:var(--blue);
  color:white;
  box-shadow:0 7px 18px rgba(37,99,235,.18);
}
.button.primary:hover:not(:disabled){background:var(--blue-dark)}
.button.secondary{
  border-color:var(--line-strong);
  background:white;
  color:var(--slate);
}
.button.ghost{
  border-color:var(--line);
  background:var(--surface-soft);
  color:var(--slate);
}

.footer-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

#next{margin-left:auto}

.message{
  min-height:20px;
  margin:16px 0 0;
  color:var(--danger);
  font-size:13px;
  font-weight:650;
}

/* Intro */
.intro-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  margin-top:26px;
}

.intro-panel{
  padding:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}

.intro-panel h2{
  margin:0 0 10px;
  font-size:20px;
}

.intro-panel p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.6;
}

.flow-list{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.flow-step{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
}

.flow-number{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
}

.flow-step strong{
  display:block;
  margin-bottom:2px;
}

.flow-step span{
  color:var(--muted);
  font-size:13px;
}

.key-principle{
  padding:18px;
  border-radius:12px;
  background:#f8fbff;
  border:1px solid #dbeafe;
  color:#344054;
  line-height:1.55;
}

/* General progress */
.progress-block{
  margin-top:22px;
}

.progress-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:13px;
}

.progress-track{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#e8edf3;
}

.progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  transition:width .2s ease;
}

/* Step 1 */
.domain-toolbar-wrap{
  position:sticky;
  top:0;
  z-index:50;
  margin:20px -10px 18px;
  padding:10px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(9px);
}

.domain-toolbar{
  display:grid;
  grid-template-columns:auto minmax(250px,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:white;
  box-shadow:0 8px 24px rgba(15,23,42,.07);
}

.domain-nav{
  display:flex;
  align-items:center;
  gap:7px;
}

.nav-icon{
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:white;
  color:var(--slate);
  cursor:pointer;
  font-size:20px;
  font-weight:800;
}

.domain-select-wrap{
  position:relative;
}

.domain-select{
  width:100%;
  min-height:42px;
  padding:9px 38px 9px 12px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:white;
  color:var(--text);
  cursor:pointer;
  font-weight:650;
}

.domain-position{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.bulk-bar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  padding:15px 17px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}

.bulk-copy strong{
  display:block;
  margin-bottom:3px;
  font-size:13px;
}

.bulk-copy span{
  color:var(--muted);
  font-size:13px;
}

.bulk-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.classify-all{
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}

.classify-all.low{background:var(--slate-soft);color:var(--slate)}
.classify-all.medium{background:var(--amber-soft);color:var(--amber)}
.classify-all.high{background:var(--green-soft);color:var(--green)}

.domain-summary{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
  margin-bottom:14px;
}

.domain-summary h2{
  margin:0 0 4px;
  font-size:20px;
}

.domain-summary p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.count-cluster{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.count-chip{
  padding:6px 9px;
  border-radius:999px;
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
}

.count-chip.unclassified{background:#f3f4f6;color:#667085}
.count-chip.low{background:var(--slate-soft);color:var(--slate)}
.count-chip.medium{background:var(--amber-soft);color:var(--amber)}
.count-chip.high{background:var(--green-soft);color:var(--green)}

.trait-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.trait-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-height:72px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}

.trait-row:hover{
  border-color:#b9c5d3;
  box-shadow:0 5px 15px rgba(15,23,42,.05);
  transform:translateY(-1px);
}

.trait-name{
  min-width:0;
  font-size:13px;
  line-height:1.35;
  font-weight:650;
}

.segmented{
  display:flex;
  gap:4px;
  flex:none;
  padding:3px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#f8fafc;
}

.segment-button{
  min-width:61px;
  padding:7px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#667085;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}

.segment-button:hover{background:white}
.segment-button.active.low{background:#e5e7eb;color:#344054}
.segment-button.active.medium{background:#fff0c7;color:#8a4b00}
.segment-button.active.high{background:#dff5e8;color:#12663f}

/* Step 2 */
.top30-toolbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:20px -10px 16px;
  padding:12px 10px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(9px);
}

.top30-toolbar-inner{
  width:100%;
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(210px,300px) auto auto;
  gap:9px;
  align-items:center;
  padding:13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:white;
  box-shadow:0 8px 24px rgba(15,23,42,.07);
}

.search-input,
.filter-select{
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:white;
  color:var(--text);
}

.top-counter{
  min-width:92px;
  padding:9px 11px;
  border-radius:9px;
  background:var(--blue-soft);
  color:#1e40af;
  text-align:center;
  font-size:13px;
  font-weight:900;
}

.small-button{
  min-height:40px;
  padding:8px 11px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:white;
  color:var(--slate);
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}

.top30-note{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  margin-bottom:14px;
  border:1px solid #dbeafe;
  border-radius:11px;
  background:#f8fbff;
  color:#475467;
  font-size:13px;
}

.top-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.top-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px;
  align-items:start;
  padding:13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  cursor:pointer;
}

.top-card:hover{border-color:#b9c5d3}
.top-card.selected{
  border-color:#93b4f8;
  background:#f8fbff;
  box-shadow:0 0 0 1px rgba(37,99,235,.10) inset;
}

.top-checkbox{
  width:18px;
  height:18px;
  margin-top:1px;
  accent-color:var(--blue);
}

.top-name{
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.top-domain{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

/* Step 3 profile */
.profile-banner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin:20px 0 15px;
  padding:14px 16px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f8fbff;
}

.profile-banner strong{display:block;margin-bottom:3px}
.profile-banner span{color:var(--muted);font-size:11px}

.profile-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.profile-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}

.profile-help{
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.add-trait{position:relative}
.add-trait summary{
  list-style:none;
  padding:9px 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:white;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}
.add-trait summary::-webkit-details-marker{display:none}

.add-menu{
  position:absolute;
  right:0;
  z-index:60;
  width:min(440px,86vw);
  margin-top:7px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  box-shadow:0 16px 40px rgba(15,23,42,.15);
}

.add-results{
  max-height:330px;
  overflow:auto;
  margin-top:7px;
}

.add-option{
  display:flex;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:9px;
  border:0;
  border-radius:7px;
  background:white;
  cursor:pointer;
  text-align:left;
}

.add-option:hover{background:var(--surface-soft)}
.add-option strong{font-size:11px}
.add-option span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}
.add-tag{
  flex:none;
  align-self:center;
  padding:4px 6px;
  border-radius:999px;
  background:#f2f4f7;
  color:#667085;
  font-size:13px;
  font-weight:800;
}

.chart-shell{position:relative}

.chart-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:13px 13px 0 0;
  background:white;
}

#profile-chart{
  display:block;
  width:100%;
  min-width:700px;
  height:auto;
  touch-action:pan-y;
}

.grid-line{stroke:#d8dee6;stroke-width:1;stroke-dasharray:5 5}
.zero-line{stroke:#64748b;stroke-width:1.4}
.axis-line{stroke:#64748b;stroke-width:1}
.y-label{fill:#64748b;font-size:12px}
.axis-title{fill:#475569;font-size:12px}
.x-label{
  fill:#24324a;
  font-size:13px;
  font-weight:800;
  cursor:grab;
  user-select:none;
}
.x-label-hit{fill:transparent;cursor:grab}
.series-line{fill:none;stroke-width:1.7;vector-effect:non-scaling-stroke}
.series-line.individual{stroke-width:3}
.series-point{stroke-width:1.3;vector-effect:non-scaling-stroke}
.drop-indicator{stroke:var(--blue);stroke-width:4;stroke-linecap:round;pointer-events:none}
.drag-ghost{fill:white;stroke:#aab4c3;stroke-width:1;opacity:.97;pointer-events:none}
.drag-ghost-text{fill:#24324a;font-size:13px;font-weight:800;pointer-events:none}

.trait-tooltip{
  position:absolute;
  z-index:70;
  min-width:245px;
  max-width:320px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  box-shadow:0 14px 34px rgba(15,23,42,.15);
}
.trait-tooltip[hidden]{display:none}
.tooltip-abbr{color:var(--muted);font-size:13px;font-weight:900}
.tooltip-name{margin:3px 0 4px;font-size:13px;font-weight:800;line-height:1.35}
.tooltip-domain{margin-bottom:10px;color:var(--muted);font-size:10px}
.tooltip-actions{display:flex;gap:5px;flex-wrap:wrap}
.tooltip-actions button{
  padding:6px 8px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:white;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.tooltip-actions .remove{color:var(--danger)}

.legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:13px;
  margin:14px 0 11px;
}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px}
.legend-line{width:24px;border-radius:2px}

.profile-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 13px 13px;
}
.profile-table{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
  font-size:13px;
}
.profile-table th,
.profile-table td{
  padding:8px 9px;
  border-bottom:1px solid #edf0f3;
  text-align:center;
  white-space:nowrap;
}
.profile-table thead th{background:#f8fafc}
.profile-table th:first-child,
.profile-table td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:white;
  text-align:left;
  font-weight:800;
}
.profile-table .individual-row td{font-weight:800}
.profile-table .percentile-row td{background:#f8fafc;font-weight:800}

.sequence{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.sequence-chip{
  padding:6px 8px;
  border-radius:999px;
  background:#eef3f8;
  font-size:13px;
  font-weight:800;
}

.completion-grid{
  display:grid;
  gap:14px;
  margin-top:22px;
}
.completion-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}
.completion-card h2{margin:0 0 10px;font-size:17px}
.code-summary{
  margin:0;
  overflow:auto;
  padding:14px;
  border-radius:9px;
  background:#f6f8fb;
  font-size:13px;
}

@media (max-width:1050px){
  .trait-grid,.top-grid{grid-template-columns:1fr}
  .top30-toolbar-inner{grid-template-columns:1fr 1fr}
  .domain-toolbar{grid-template-columns:auto 1fr}
  .domain-position{grid-column:1/-1}
}

@media (max-width:760px){
  .page-shell{width:97%;margin:10px auto 24px}
  .survey-card{padding:22px 14px;border-radius:13px}
  .survey-header{display:block}
  .header-status{margin-top:12px}
  .intro-grid{grid-template-columns:1fr}
  .domain-toolbar{grid-template-columns:1fr}
  .domain-nav{justify-content:space-between}
  .domain-summary{grid-template-columns:1fr}
  .count-cluster{justify-content:flex-start}
  .trait-row{grid-template-columns:1fr}
  .segmented{width:100%}
  .segment-button{flex:1}
  .top30-toolbar-inner{grid-template-columns:1fr}
  .profile-toolbar,.profile-banner{display:block}
  .profile-actions{margin-top:10px}
  .add-trait{margin-top:10px}
  .add-menu{left:0;right:auto}
}


/* Step 1 recovery controls */
.classify-all.clear{background:#fff;color:#475467;border-color:#cbd5e1}
.classify-all.undo{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.classify-all[hidden]{display:none}

/* Step 2 summary */
.summary-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.summary-metrics div{padding:14px 10px;border:1px solid var(--line);border-radius:10px;background:white;text-align:center}
.summary-metrics strong{display:block;margin-bottom:4px;font-size:24px}
.summary-metrics span{color:var(--muted);font-size:10px}
.selected-summary{display:grid;gap:12px;margin-top:18px}
.selected-domain-block{padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff}
.selected-domain-block h3{margin:0 0 9px;font-size:14px}
.selected-trait-list{display:flex;flex-wrap:wrap;gap:6px}
.selected-trait-chip{padding:6px 8px;border-radius:999px;background:#eef3f8;color:#344054;font-size:13px;font-weight:700}

/* More compact profile */
.compact-profile,.compact-table{width:100%;max-width:none;margin-left:0;margin-right:0}
.compact-profile .x-label{font-size:12.5px}
.readonly-profile .x-label,.readonly-profile .x-label-hit{cursor:default}

/* Required reasons for additions/removals */
.modal-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.48);backdrop-filter:blur(3px)}
.modal-backdrop[hidden]{display:none}
.reason-dialog{width:min(610px,96vw);padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.24)}
.reason-dialog h2{margin:4px 0 8px;font-size:21px}
.reason-copy{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.5}
.field-label{display:block;margin-bottom:7px;font-size:13px;font-weight:800}
.reason-textarea,.reflection-textarea{width:100%;resize:vertical;padding:11px 12px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--text);line-height:1.5}
.reason-textarea:focus,.reflection-textarea:focus{outline:3px solid rgba(37,99,235,.11);border-color:#8fb2f7}
.field-error{min-height:17px;margin:7px 0 0;color:var(--danger);font-size:13px;font-weight:700}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* Step 4 */
.reflection-profile{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fbfdff}
.reflection-profile-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}
.reflection-profile-heading h2{margin:0 0 3px;font-size:18px}
.reflection-profile-heading p{margin:0;color:var(--muted);font-size:11px}
.reflection-form{display:grid;gap:12px;margin-top:20px}
.question-card{padding:17px;border:1px solid var(--line);border-radius:12px;background:white}
.question-card > label,.question-label{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:11px}
.question-card strong{display:block;margin-bottom:3px;font-size:13px;line-height:1.4}
.question-card small{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.question-number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--blue-soft);color:var(--blue);font-size:13px;font-weight:900}
.interest-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-left:40px}
.interest-option{position:relative;cursor:pointer}
.interest-option input{position:absolute;opacity:0}
.interest-option span{display:block;min-height:44px;padding:11px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;text-align:center;font-size:13px;font-weight:700}
.interest-option input:checked + span{border-color:#93b4f8;background:#eff6ff;color:#1d4ed8;box-shadow:0 0 0 1px rgba(37,99,235,.1) inset}
.optional-question{background:#fafbfc}

/* Completion change log */
.change-log{display:grid;gap:8px}
.change-log-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:9px}
.change-log-row p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.change-action{padding:4px 6px;border-radius:999px;font-size:13px;font-weight:900;text-transform:uppercase}
.change-action.add{background:var(--green-soft);color:var(--green)}
.change-action.remove{background:#fff1f2;color:#be123c}

@media (max-width:760px){
  .summary-metrics,.interest-options{grid-template-columns:1fr}
  .interest-options{margin-left:0}
  .reflection-profile-heading{display:block}
  .reflection-profile-heading .header-badge{margin-top:8px}
}


/* ============================================================
   Wide profile workspace
   The profile is the central task, so Steps 3 and 4 use almost
   all available browser width.
============================================================ */

body.profile-mode .page-shell{
  width:min(1900px,99%);
  margin:16px auto 36px;
}

body.profile-mode .survey-card{
  padding-left:24px;
  padding-right:24px;
}

body.profile-mode .survey-header{
  padding-bottom:18px;
}

/* Remove the previous 1120px restriction. */
body.profile-mode .compact-profile,
body.profile-mode .compact-table{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}

/* Give the visualisation clear priority in the page hierarchy. */
body.profile-mode .profile-banner{
  margin-top:18px;
}

body.profile-mode .profile-toolbar{
  margin-bottom:10px;
}

body.profile-mode .chart-wrap{
  width:100%;
  overflow-x:auto;
  border-radius:14px 14px 0 0;
}

body.profile-mode #profile-chart{
  width:100%;
  min-width:0;
  height:auto;
}

/* More readable graphical marks and labels. */
body.profile-mode .grid-line{
  stroke-width:1.1;
}

body.profile-mode .zero-line{
  stroke-width:1.6;
}

body.profile-mode .axis-line{
  stroke-width:1.15;
}

body.profile-mode .y-label{
  font-size:13px;
}

body.profile-mode .axis-title{
  font-size:13px;
}

body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label{
  font-size:13px;
  font-weight:850;
}

body.profile-mode .series-line{
  stroke-width:2;
}

body.profile-mode .series-line.individual{
  stroke-width:3.6;
}

body.profile-mode .series-point{
  stroke-width:1.5;
}

/* Table follows the same full-width visual grid as the chart. */
body.profile-mode .profile-table-wrap{
  width:100%;
}

body.profile-mode .profile-table{
  width:100%;
  min-width:100%;
  table-layout:auto;
  font-size:13px;
}

body.profile-mode .profile-table th,
body.profile-mode .profile-table td{
  min-width:44px;
  padding:9px 7px;
}

body.profile-mode .profile-table th:first-child,
body.profile-mode .profile-table td:first-child{
  min-width:88px;
}

/* The final profile shown in Step 4 receives the same emphasis. */
body.profile-mode .reflection-profile{
  padding:20px;
}

body.profile-mode .reflection-profile-heading{
  margin-bottom:16px;
}

@media (max-width:1100px){
  body.profile-mode .page-shell{
    width:99%;
  }

  body.profile-mode .survey-card{
    padding-left:14px;
    padding-right:14px;
  }

  body.profile-mode .profile-table{
    min-width:1250px;
  }
}


/* ============================================================
   EDUCATIONAL ONBOARDING
============================================================ */

.learning-hero{
  display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr);
  gap:30px;
  align-items:center;
  margin-top:26px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.72),rgba(255,255,255,.95) 44%,rgba(236,253,243,.42));
}

.reverse-learning{
  grid-template-columns:minmax(380px,.8fr) minmax(540px,1.2fr);
}

.learning-kicker{
  display:inline-block;
  margin-bottom:10px;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.learning-copy h2{
  max-width:620px;
  margin:0 0 15px;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.learning-copy > p{
  max-width:700px;
  margin:0 0 13px;
  color:#475467;
  font-size:14px;
  line-height:1.62;
}

.learning-figure img{
  display:block;
  width:100%;
  max-height:590px;
  object-fit:contain;
  border-radius:13px;
  background:white;
}

.learning-callout{
  margin-top:18px;
  padding:14px 16px;
  border-left:4px solid #64748b;
  border-radius:0 10px 10px 0;
  background:#f8fafc;
  color:#475467;
  font-size:13px;
  line-height:1.55;
}

.learning-callout.research{
  border-left-color:var(--blue);
  background:#f8fbff;
}

.learning-callout strong{color:#24324a}

.concept-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}

.concept-strip > div{
  position:relative;
  min-height:105px;
  padding:15px 14px 14px 50px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}

.concept-strip > div > span{
  position:absolute;
  top:14px;
  left:13px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:8px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}

.concept-strip strong{
  display:block;
  margin-bottom:5px;
  font-size:13px;
}

.concept-strip small{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.profile-concept-flow{
  display:grid;
  grid-template-columns:1fr auto 1.1fr auto 1.35fr;
  gap:12px;
  align-items:center;
  margin-top:15px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:white;
}

.concept-node{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
}

.concept-node span{
  padding:8px;
  border-radius:8px;
  background:#f4f7fb;
  text-align:center;
  font-size:13px;
  font-weight:800;
}

.concept-arrow{
  color:#94a3b8;
  font-size:20px;
  font-weight:900;
}

.concept-profile{
  padding:12px;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#f8fbff;
}

.concept-profile strong{
  display:block;
  margin-bottom:4px;
  font-size:13px;
}

.concept-profile small{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.science-purpose{
  margin:16px 0;
  padding:16px;
  border:1px solid #c7d2fe;
  border-radius:12px;
  background:linear-gradient(135deg,#f8fbff,#f5f7ff);
}

.science-purpose strong{
  display:block;
  margin-bottom:6px;
  color:#1e40af;
  font-size:13px;
}

.science-purpose p{
  margin:0;
  color:#344054;
  font-size:13px;
  line-height:1.55;
}

.participant-role{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.participant-role > div{
  position:relative;
  min-height:125px;
  padding:17px 16px 15px 54px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
}

.participant-role-number{
  position:absolute;
  left:14px;
  top:15px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#ecfdf3;
  color:#16794b;
  font-size:13px;
  font-weight:900;
}

.participant-role strong{
  display:block;
  margin-bottom:5px;
  font-size:13px;
}

.participant-role p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

/* ============================================================
   STEP PURPOSE / EDUCATIONAL CONTEXT
============================================================ */

.step-objective{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:13px;
  margin-top:20px;
  margin-bottom:16px;
  padding:16px 18px;
  border:1px solid #dbeafe;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(239,246,255,.9),rgba(255,255,255,.97));
}

.objective-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:20px;
  font-weight:900;
}

.objective-kicker{
  display:block;
  margin-bottom:3px;
  color:#1d4ed8;
  font-size:13px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.objective-main h2{
  margin:0 0 4px;
  font-size:14px;
}

.objective-main > p{
  max-width:1050px;
  margin:0;
  color:#475467;
  font-size:13px;
  line-height:1.48;
}

.objective-details{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px;
  margin-top:11px;
}

.objective-details > div{
  padding:9px 11px;
  border:1px solid rgba(219,234,254,.9);
  border-radius:9px;
  background:rgba(255,255,255,.78);
}

.objective-details strong{
  display:block;
  margin-bottom:3px;
  color:#344054;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.objective-details span{
  display:block;
  color:#667085;
  font-size:13px;
  line-height:1.4;
}

@media (max-width:980px){
  .learning-hero,
  .reverse-learning{
    grid-template-columns:1fr;
  }

  .learning-figure{order:-1}
  .learning-figure img{max-height:480px}

  .concept-strip,
  .participant-role{
    grid-template-columns:1fr 1fr;
  }

  .profile-concept-flow{
    grid-template-columns:1fr;
  }

  .concept-arrow{
    transform:rotate(90deg);
    text-align:center;
  }
}

@media (max-width:650px){
  .learning-hero{padding:16px}

  .concept-strip,
  .participant-role,
  .objective-details{
    grid-template-columns:1fr;
  }

  .step-objective{
    grid-template-columns:1fr;
  }
}

/* Typography readability pass */
.learning-copy > p{font-size:15px}
.learning-callout,.learning-callout.research{font-size:13px}
.concept-strip strong{font-size:13px}
.concept-strip small{font-size:12px}
.concept-profile strong{font-size:13px}
.concept-profile small{font-size:12px}
.science-purpose strong{font-size:13px}
.science-purpose p{font-size:13px}
.participant-role strong{font-size:13px}
.participant-role p{font-size:12px}
.objective-kicker{font-size:11px}
.objective-main h2{font-size:16px}
.objective-main > p{font-size:13px}
.objective-details strong{font-size:11px}
.objective-details span{font-size:12px}

/* Keep the dense profile readable without making 30 columns impossible. */
body.profile-mode .profile-table{font-size:12px}
body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label{font-size:13px}


/* Fixed typography system: one px value per element */
.eyebrow{font-size:12px}
h1{font-size:34px}
.description{font-size:16px}
.header-badge{font-size:13px}

.learning-kicker{font-size:13px}
.learning-copy h2{font-size:30px}
.learning-copy > p{font-size:16px}
.learning-callout,
.learning-callout.research{font-size:14px}

.concept-strip > div > span{font-size:12px}
.concept-strip strong{font-size:14px}
.concept-strip small{font-size:14px}

.concept-profile strong{font-size:14px}
.concept-profile small{font-size:14px}

.science-purpose strong{font-size:14px}
.science-purpose p{font-size:14px}

.participant-role-number{font-size:12px}
.participant-role strong{font-size:14px}
.participant-role p{font-size:14px}

.objective-kicker{font-size:12px}
.objective-main h2{font-size:16px}
.objective-main > p{font-size:14px}
.objective-details strong{font-size:12px}
.objective-details span{font-size:14px}

.flow-step strong{font-size:14px}
.flow-step span{font-size:14px}

body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label{font-size:13px}
body.profile-mode .profile-table{font-size:12px}


/* ============================================================
   TYPOGRAPHY DESIGN SYSTEM
   Six levels only. 13px is the absolute minimum.
============================================================ */

:root{
  --type-micro:13px;
  --type-secondary:14px;
  --type-body:16px;
  --type-section:20px;
  --type-hero:30px;
  --type-page:34px;
}

/* Level 1 — Micro / metadata / compact data */
.eyebrow,
.header-badge,
.learning-kicker,
.domain-meta,
.domain-position,
.progress-line,
.count-chip,
.stat-pill,
.top-counter,
.small-button,
.add-tag,
.tooltip-abbr,
.tooltip-domain,
.legend-item,
.profile-table,
body.profile-mode .profile-table,
body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label,
.y-label,
.axis-title,
.question-number,
.participant-role-number,
.objective-kicker,
.objective-details strong{
  font-size:var(--type-micro);
}

/* Level 2 — Secondary text / captions / helper copy */
.flow-step span,
.concept-strip strong,
.concept-strip small,
.concept-profile strong,
.concept-profile small,
.science-purpose strong,
.science-purpose p,
.participant-role strong,
.participant-role p,
.learning-callout,
.learning-callout.research,
.objective-main > p,
.objective-details span,
.domain-summary p,
.bulk-copy span,
.review-note,
.top-domain,
.profile-help,
.reflection-profile-heading p,
.question-card small,
.reason-copy,
.add-option span,
.change-log-row p{
  font-size:var(--type-secondary);
}

/* Level 3 — Body / forms / interactive content */
body,
.description,
.learning-copy > p,
.intro-panel p,
.trait-name,
.segment-button,
.button,
.domain-select,
.search-input,
.filter-select,
.reason-textarea,
.reflection-textarea,
.interest-option span,
.top-name,
.card-name{
  font-size:var(--type-body);
}

/* Level 4 — Section headings */
.intro-panel h2,
.domain-summary h2,
.objective-main h2,
.reflection-profile-heading h2,
.completion-card h2,
.reason-dialog h2,
.selected-domain-block h3{
  font-size:var(--type-section);
}

/* Level 5 — Educational hero heading */
.learning-copy h2{
  font-size:var(--type-hero);
}

/* Level 6 — Main page title */
h1{
  font-size:var(--type-page);
}

/* Cards at the bottom of the educational page use one consistent
   small-text level instead of 12/13/14px variations. */
.concept-strip > div > span,
.concept-strip strong,
.concept-strip small{
  font-size:var(--type-secondary);
}

/* Keep all SVG profile labels at the minimum readable level. */
.x-label,
.compact-profile .x-label,
body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label,
.y-label,
.axis-title{
  font-size:var(--type-micro);
}


/* ============================================================
   STEP 2 — SEPARATE TRAIT NAME AND DOMAIN
============================================================ */
.top-name{
  display:block;
}

.top-domain{
  display:block;
  margin-top:6px;
  line-height:1.35;
  color:var(--muted);
  font-weight:400;
}

/* ============================================================
   PROFILE TABLE — CLEANER EMPHASIS
============================================================ */
.profile-table-wrap,
body.profile-mode .profile-table-wrap{
  margin-top:18px;
  border-top:1px solid var(--line);
  border-radius:13px;
  overflow-x:auto;
}

.profile-table,
body.profile-mode .profile-table{
  color:#475467;
}

.profile-table th,
.profile-table td,
body.profile-mode .profile-table th,
body.profile-mode .profile-table td{
  font-weight:400;
  background:#fff;
}

/* Only the first row and first column use grey background. */
.profile-table thead th,
body.profile-mode .profile-table thead th{
  background:#f3f4f6;
  color:#344054;
  font-weight:400;
}

.profile-table th:first-child,
.profile-table td:first-child,
body.profile-mode .profile-table th:first-child,
body.profile-mode .profile-table td:first-child{
  background:#f3f4f6;
  color:#344054;
  font-weight:400;
}

/* Individual is darker, but not bold. */
.profile-table .individual-row td,
body.profile-mode .profile-table .individual-row td{
  color:#111111;
  font-weight:400;
  background:#fff;
  border-top:1px solid #d8dee6;
}

.profile-table .individual-row td:first-child,
body.profile-mode .profile-table .individual-row td:first-child{
  background:#f3f4f6;
}

/* Percentile row is a normal data row. */
.profile-table .percentile-row td,
body.profile-mode .profile-table .percentile-row td{
  background:#fff;
  color:#475467;
  font-weight:400;
}

.profile-table .percentile-row td:first-child,
body.profile-mode .profile-table .percentile-row td:first-child{
  background:#f3f4f6;
  color:#344054;
}

/* Extra visual separation below plot labels / legend. */
.legend{
  margin-bottom:4px;
}

/* ============================================================
   REFERENCE COHORT CONTROLS
============================================================ */
.cohort-panel{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(430px,2fr) auto;
  gap:14px;
  align-items:center;
  margin:12px 0 16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafcff;
}

.cohort-panel-copy strong{
  display:block;
  margin-bottom:4px;
  font-size:var(--type-body);
  font-weight:600;
}

.cohort-panel-copy span{
  display:block;
  color:var(--muted);
  font-size:var(--type-secondary);
  line-height:1.4;
}

.cohort-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.cohort-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:#fff;
  color:#344054;
  cursor:pointer;
  font-size:var(--type-micro);
  font-weight:400;
  user-select:none;
}

.cohort-toggle input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--blue);
}

.cohort-toggle:has(input:checked){
  border-color:#9ab8f8;
  background:#f4f8ff;
}

.cohort-dot{
  width:10px;
  height:10px;
  flex:none;
  border-radius:50%;
}

.individual-fixed{
  cursor:default;
  color:#111;
}

.individual-fixed small{
  color:var(--muted);
  font-size:var(--type-micro);
}

.cohort-actions{
  display:flex;
  gap:7px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.cohort-readonly-summary{
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--muted);
  font-size:var(--type-secondary);
}

.cohort-readonly-summary strong{
  color:#344054;
  font-weight:600;
}

.individual-legend{
  color:#111;
  font-weight:400;
}

@media (max-width:1050px){
  .cohort-panel{
    grid-template-columns:1fr;
  }

  .cohort-actions{
    justify-content:flex-start;
  }
}


/* ============================================================
   PROFILE BUILDER FRAME: instruction + Domain summary
============================================================ */
.profile-builder-frame{
  align-items:flex-start;
}

.profile-builder-main{
  min-width:0;
  flex:1;
}

.profile-builder-copy strong{
  display:block;
  margin-bottom:5px;
  font-size:var(--type-section);
  font-weight:600;
}

.profile-builder-copy > span{
  display:block;
  max-width:980px;
  color:var(--muted);
  font-size:var(--type-secondary);
  line-height:1.45;
}

.profile-builder-copy small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:var(--type-micro);
  line-height:1.35;
}

.profile-domain-section{
  margin-top:15px;
}

.profile-domain-label{
  display:block;
  margin-bottom:8px;
  color:#344054;
  font-size:var(--type-micro);
  font-weight:600;
}

.profile-domain-summary{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.profile-domain-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid #d6dee8;
  border-radius:9px;
  background:#fff;
  color:#344054;
  cursor:default;
  font-size:var(--type-micro);
  font-weight:400;
  text-align:left;
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}

.profile-domain-chip:hover,
.profile-domain-chip:focus{
  border-color:#7ea6f8;
  background:#f4f8ff;
  outline:none;
  transform:translateY(-1px);
}

.profile-domain-count{
  display:grid;
  place-items:center;
  min-width:25px;
  height:25px;
  padding:0 6px;
  border-radius:6px;
  background:#eaf2ff;
  color:#1d4ed8;
  font-size:var(--type-micro);
  font-weight:600;
}

.profile-domain-name{
  line-height:1.2;
}

/* Domain hover on the chart: matching labels become blue, others fade. */
.x-label{
  transition:opacity .12s ease,fill .12s ease;
}

.x-label.domain-highlight{
  fill:#1d4ed8;
  opacity:1;
}

.x-label.domain-dim{
  opacity:.20;
}

.x-label-hit.domain-dim{
  opacity:.20;
}

/* X-axis abbreviations use normal font weight. */
.x-label,
.compact-profile .x-label,
body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label{
  font-weight:400;
}

/* Individual line = exactly twice reference cohort line thickness. */
.series-line,
body.profile-mode .series-line{
  stroke-width:2;
}

.series-line.individual,
body.profile-mode .series-line.individual{
  stroke-width:4;
}

/* Individual and PRS percentile rows both belong to the individual result. */
.profile-table .individual-row td,
body.profile-mode .profile-table .individual-row td,
.profile-table .percentile-row td,
body.profile-mode .profile-table .percentile-row td{
  color:#111111;
  font-weight:400;
}

.profile-table .percentile-row td:first-child,
body.profile-mode .profile-table .percentile-row td:first-child{
  color:#111111;
  background:#f3f4f6;
}

@media (max-width:900px){
  .profile-builder-frame{
    display:block;
  }

  .profile-builder-frame .profile-actions{
    margin-top:14px;
  }
}


/* Final line-weight refinement: Individual is darker, not thicker. */
.series-line,
body.profile-mode .series-line{
  stroke-width:2;
}

.series-line.individual,
body.profile-mode .series-line.individual{
  stroke-width:2;
}


/* ============================================================
   STEP 4 — PARTICIPANT CHARACTERISTICS
============================================================ */

.choice-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-left:40px;
}

.choice-option{
  position:relative;
  cursor:pointer;
}

.choice-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.choice-option span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  height:100%;
  padding:10px 11px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:#fff;
  color:#344054;
  text-align:center;
  font-size:var(--type-secondary);
  font-weight:400;
  line-height:1.35;
}

.choice-option input:checked + span{
  border-color:#93b4f8;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:0 0 0 1px rgba(37,99,235,.10) inset;
}

.conditional-field{
  margin:12px 0 0 40px;
  max-width:620px;
}

.conditional-field[hidden],
.conditional-question[hidden]{
  display:none;
}

.email-input{
  max-width:620px;
  margin-left:40px;
}

.conditional-question .field-error{
  margin-left:40px;
}

.contact-storage-card{
  border-color:#dbeafe;
  background:#f8fbff;
}

@media (max-width:1100px){
  .choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .choice-grid{
    grid-template-columns:1fr;
    margin-left:0;
  }

  .conditional-field,
  .email-input,
  .conditional-question .field-error{
    margin-left:0;
  }
}


/* Final plot line weight: all series use the same 2px stroke. */
.series-line,
.series-line.individual,
body.profile-mode .series-line,
body.profile-mode .series-line.individual{
  stroke-width:2;
}


/* Developer demo trigger is intentionally visually indistinguishable from badge text. */
#developer-demo-trigger{
  display:inline;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-decoration:none;
  cursor:default;
  user-select:text;
}


/* Step 1 classification buttons match bulk action text size. */
.segment-button{
  font-size:var(--type-micro);
}


/* ============================================================
   FINAL TYPOGRAPHY AUDIT
   Six semantic levels only; 13px is the absolute minimum.
============================================================ */

:root{
  --type-micro:13px;
  --type-secondary:14px;
  --type-body:16px;
  --type-section:20px;
  --type-hero:30px;
  --type-page:34px;
}

/* Micro: compact labels, metadata and dense visual data */
.eyebrow,
.header-badge,
.progress-line,
.domain-position,
.count-chip,
.classify-all,
.segment-button,
.top-counter,
.small-button,
.add-tag,
.tooltip-abbr,
.tooltip-domain,
.legend-item,
.profile-table,
body.profile-mode .profile-table,
.x-label,
.compact-profile .x-label,
body.profile-mode .x-label,
body.profile-mode .compact-profile .x-label,
.y-label,
.axis-title,
.question-number,
.participant-role-number,
.objective-kicker,
.objective-details strong,
.profile-builder-copy small,
.profile-domain-label,
.profile-domain-chip,
.profile-domain-count,
.cohort-toggle,
.individual-fixed small{
  font-size:var(--type-micro);
}

/* Secondary: captions, helper text and explanatory microcopy */
.flow-step span,
.concept-strip > div > span,
.concept-strip strong,
.concept-strip small,
.concept-profile strong,
.concept-profile small,
.science-purpose strong,
.science-purpose p,
.participant-role strong,
.participant-role p,
.learning-callout,
.learning-callout.research,
.objective-main > p,
.objective-details span,
.domain-summary p,
.bulk-copy span,
.top-domain,
.profile-help,
.reflection-profile-heading p,
.question-card small,
.reason-copy,
.add-option span,
.change-log-row p,
.cohort-panel-copy span,
.cohort-readonly-summary,
.profile-builder-copy > span,
.choice-option span{
  font-size:var(--type-secondary);
}

/* Body: normal reading and interactive text */
body,
.description,
.learning-copy > p,
.intro-panel p,
.trait-name,
.button,
.domain-select,
.search-input,
.filter-select,
.reason-textarea,
.reflection-textarea,
.interest-option span,
.top-name,
.card-name,
.cohort-panel-copy strong{
  font-size:var(--type-body);
}

/* Section headings */
.intro-panel h2,
.domain-summary h2,
.objective-main h2,
.reflection-profile-heading h2,
.completion-card h2,
.reason-dialog h2,
.selected-domain-block h3,
.profile-builder-copy strong{
  font-size:var(--type-section);
}

/* Educational hero */
.learning-copy h2{
  font-size:var(--type-hero);
}

/* Main page title */
h1{
  font-size:var(--type-page);
}

/* Previously identified legacy selectors, explicitly normalised */
.profile-banner span,
.add-option strong,
.summary-metrics span{
  font-size:var(--type-micro);
}

.summary-metrics strong{
  font-size:var(--type-section);
}

/* SAVE & RESUME */
.header-tools{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:190px}
.header-tools .header-status{min-width:0;padding-top:0}
.save-progress-button{min-height:36px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:#475467;cursor:pointer;font-size:var(--type-micro);font-weight:600}
.save-progress-button:hover{border-color:#94a3b8;background:#f8fafc}
.save-progress-button[hidden]{display:none}
.save-progress-status{min-height:18px;color:var(--green);font-size:var(--type-micro);font-weight:600}
.resume-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:28px;padding:24px;border:1px solid #bfdbfe;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#fff)}
.resume-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#dbeafe;color:#1d4ed8;font-size:var(--type-section);font-weight:600}
.resume-copy h2{margin:0 0 7px;font-size:var(--type-section)}
.resume-copy p{margin:0 0 8px;color:var(--muted);font-size:var(--type-body);line-height:1.5}
.resume-time{color:var(--muted);font-size:var(--type-secondary)}
.resume-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.header-tools{align-items:flex-start;margin-top:12px}.resume-card{grid-template-columns:1fr}.resume-actions{justify-content:flex-start}}


/* ============================================================
   PARTICIPANT-FACING COMPLETION
============================================================ */

.thank-you-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:20px;
  align-items:start;
  max-width:900px;
  margin:34px auto 10px;
  padding:30px;
  border:1px solid #bbf7d0;
  border-radius:18px;
  background:linear-gradient(135deg,#f7fff9,#ffffff);
}

.thank-you-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#dcfce7;
  color:#166534;
  font-size:var(--type-section);
  font-weight:600;
}

.thank-you-copy h2{
  margin:2px 0 10px;
  font-size:var(--type-section);
  font-weight:600;
}

.thank-you-copy > p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.65;
}

.completion-followup{
  max-width:760px;
  margin-top:20px;
  padding:15px 16px;
  border:1px solid #dbeafe;
  border-radius:11px;
  background:#f8fbff;
}

.completion-followup strong{
  display:block;
  margin-bottom:4px;
  color:#1e3a8a;
  font-size:var(--type-secondary);
  font-weight:600;
}

.completion-followup p{
  margin:0;
  color:var(--muted);
  font-size:var(--type-secondary);
  line-height:1.55;
}

.completion-close-note{
  margin-top:22px !important;
  color:#344054 !important;
  font-size:var(--type-secondary) !important;
}

@media (max-width:650px){
  .thank-you-card{
    grid-template-columns:1fr;
    padding:22px;
  }
}


/* ============================================================
   STEP 3 — ESSENTIAL TRAITS
============================================================ */

.essential-x-label,
body.profile-mode .essential-x-label{
  fill:#8a5a00;
  font-weight:400;
}

.essential-x-marker{
  fill:#c27a00;
  font-size:var(--type-micro);
  font-weight:400;
  pointer-events:none;
}

.tooltip-essential-status{
  display:inline-flex;
  align-items:center;
  margin-top:7px;
  padding:5px 8px;
  border:1px solid #f2cc7d;
  border-radius:7px;
  background:#fff9e8;
  color:#7a4b00;
  font-size:var(--type-micro);
  font-weight:600;
}

.tooltip-actions .essential{
  color:#7a4b00;
}

.tooltip-actions .essential.active{
  border-color:#e5b94f;
  background:#fff9e8;
}

.profile-table thead th.essential-table-header,
body.profile-mode .profile-table thead th.essential-table-header{
  background:#fff9e8;
  color:#5f4300;
  font-weight:400;
}

.essential-table-star{
  color:#c27a00;
  font-weight:400;
}

/* Sort controls stay compact when both sort options are shown. */
.profile-actions{
  align-items:flex-start;
}


/* ============================================================
   SURVEY JOURNEY
============================================================ */
.survey-journey{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 16px;
}

.journey-item{
  display:flex;
  gap:9px;
  align-items:center;
  min-height:54px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--muted);
}

.journey-item.active{
  border-color:#9ab8f8;
  background:#f4f8ff;
  color:#1d4ed8;
}

.journey-item.complete{
  background:#f8fafc;
}

.journey-number{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:none;
  border-radius:50%;
  background:#eef2f7;
  color:#475467;
  font-size:var(--type-micro);
  font-weight:600;
}

.journey-item.active .journey-number{
  background:#dbeafe;
  color:#1d4ed8;
}

.journey-copy{
  min-width:0;
}

.journey-copy strong{
  display:block;
  font-size:var(--type-secondary);
  font-weight:600;
}

.journey-copy small{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:var(--type-micro);
}

/* ============================================================
   DOMAIN LOCKING
============================================================ */
.profile-domain-heading{
  display:flex;
  align-items:baseline;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.profile-domain-heading .profile-domain-label{
  margin-bottom:0;
}

.profile-domain-heading small{
  color:var(--muted);
  font-size:var(--type-micro);
}

.profile-domain-chip.selected{
  border-color:#3975e8;
  background:#eaf2ff;
  color:#174ea6;
  box-shadow:0 0 0 1px rgba(57,117,232,.10) inset;
}

.domain-pin{
  color:#1d4ed8;
  font-size:var(--type-micro);
}

/* ============================================================
   CLEAR PROFILE CUSTOMIZATION AREA
============================================================ */
.customize-panel{
  margin:14px 0 16px;
  padding:18px;
  border:1px solid #bfd2f8;
  border-radius:14px;
  background:#f8fbff;
}

.customize-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}

.customize-heading h2{
  margin:3px 0 4px;
  font-size:var(--type-section);
}

.customize-heading p{
  margin:0;
  max-width:800px;
  color:var(--muted);
  font-size:var(--type-secondary);
}

.customize-grid{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:9px;
}

.customize-group{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
  padding:12px;
  border:1px solid #d9e4f7;
  border-radius:10px;
  background:#fff;
}

.customize-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:8px;
  background:#eaf2ff;
  color:#1d4ed8;
  font-size:var(--type-body);
  font-weight:400;
}

.customize-group strong{
  display:block;
  margin-bottom:3px;
  color:#344054;
  font-size:var(--type-secondary);
  font-weight:600;
}

.customize-group > div > span{
  display:block;
  color:var(--muted);
  font-size:var(--type-micro);
  line-height:1.4;
}

.customize-actions{
  display:flex;
  gap:7px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:9px;
}

/* ============================================================
   DRAG DISCOVERY + TRASH DROP ZONE
============================================================ */
.chart-interaction-bar{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:10px;
  margin:12px 0 8px;
}

.drag-discovery-hint{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  padding:10px 12px;
  border:1px dashed #9ab8f8;
  border-radius:10px;
  background:#f7faff;
}

.drag-discovery-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:none;
  border-radius:8px;
  background:#eaf2ff;
  color:#1d4ed8;
  font-size:var(--type-body);
}

.drag-discovery-hint strong{
  display:block;
  color:#344054;
  font-size:var(--type-secondary);
  font-weight:600;
}

.drag-discovery-hint span:not(.drag-discovery-icon){
  display:block;
  color:var(--muted);
  font-size:var(--type-micro);
}

.profile-trash{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:170px;
  padding:9px 12px;
  border:1px dashed #c9d1dc;
  border-radius:10px;
  background:#fff;
  color:#667085;
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}

.profile-trash .trash-icon{
  font-size:var(--type-section);
}

.profile-trash strong{
  display:block;
  font-size:var(--type-secondary);
  font-weight:600;
}

.profile-trash small{
  display:block;
  color:var(--muted);
  font-size:var(--type-micro);
}

.profile-trash.drag-active{
  border-color:#f1a5a5;
  background:#fff8f8;
}

.profile-trash.drag-over{
  border-color:#dc2626;
  background:#fff0f0;
  color:#991b1b;
  transform:scale(1.02);
}

.profile-trash.disabled{
  opacity:.45;
}

.drop-indicator.hidden{
  opacity:0;
}

/* Make draggable labels visibly interactive. */
.x-label-hit{
  cursor:grab;
}

.x-label{
  cursor:grab;
  transition:fill .12s ease,opacity .12s ease;
}

.x-label:hover{
  fill:#1d4ed8;
}

/* ============================================================
   COHORT PROGRESSIVE DISCLOSURE + HOVER FOCUS
============================================================ */
.series-line,
.series-point,
.legend-item,
.cohort-toggle{
  transition:opacity .14s ease;
}

.cohort-suppressed{
  opacity:.06 !important;
}

.legend-reference{
  cursor:default;
}

.cohort-panel{
  border-color:#d7e1ee;
}

.cohort-toggle:has(input:not(:checked)){
  background:#fff;
  border-style:dashed;
}

.cohort-toggle:has(input:checked){
  border-style:solid;
}

/* ============================================================
   REQUIRED QUESTIONS
============================================================ */
.required-note{
  margin:0 0 9px;
  color:var(--muted);
  font-size:var(--type-secondary);
}

.required-note span,
.required-mark{
  color:#b42318;
  font-weight:600;
}

.required-question > label strong::after,
.required-question > .question-label strong::after{
  content:" *";
  color:#b42318;
  font-weight:600;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1100px){
  .customize-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:780px){
  .survey-journey{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .customize-grid{
    grid-template-columns:1fr;
  }

  .chart-interaction-bar{
    flex-direction:column;
  }

  .profile-trash{
    min-width:0;
  }
}


/* ============================================================
   STREAMLINED STEP 2
============================================================ */

.step2-live-summary{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:12px;
  margin:14px 0;
}

.step2-summary-block{
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.step2-summary-heading{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px;
}

.step2-summary-heading strong{
  color:#344054;
  font-size:var(--type-secondary);
  font-weight:600;
}

.step2-summary-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.step2-summary-metrics > div{
  padding:9px 10px;
  border-radius:9px;
  background:#f8fafc;
}

.step2-summary-metrics strong{
  display:block;
  margin-bottom:2px;
  color:#344054;
  font-size:var(--type-section);
  font-weight:600;
}

.step2-summary-metrics span{
  color:var(--muted);
  font-size:var(--type-micro);
}

.step2-selected-domains{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.step2-domain-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid #d9e4f7;
  border-radius:8px;
  background:#f8fbff;
  color:#344054;
  font-size:var(--type-micro);
}

.step2-domain-chip strong{
  display:grid;
  place-items:center;
  min-width:21px;
  height:21px;
  padding:0 5px;
  border-radius:6px;
  background:#eaf2ff;
  color:#1d4ed8;
  font-size:var(--type-micro);
  font-weight:600;
}

.step2-empty-domain{
  color:var(--muted);
  font-size:var(--type-secondary);
}

.step2-domain-list{
  display:grid;
  gap:13px;
  margin-top:12px;
}

.step2-domain-section{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.step2-domain-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
}

.step2-domain-header h3{
  margin:0;
  color:#344054;
  font-size:var(--type-body);
  font-weight:600;
}

.step2-domain-header > div > span,
.step2-domain-selected-count{
  color:var(--muted);
  font-size:var(--type-micro);
}

.step2-domain-selected-count{
  white-space:nowrap;
}

.step2-domain-grid{
  margin:0;
  padding:10px;
}

/* Domain is now the section heading, so repeat it less inside each card. */
.step2-domain-grid .top-domain{
  display:none;
}

/* ============================================================
   STREAMLINED PROFILE CONTROLS
============================================================ */

.streamlined-controls{
  grid-template-columns:
    minmax(280px,1.4fr)
    minmax(180px,.8fr)
    minmax(180px,.8fr)
    minmax(220px,1fr);
}

.cohort-control-group{
  grid-column:1 / -1;
}

.cohort-control-content,
.remove-control-content{
  min-width:0;
  width:100%;
}

.compact-cohort-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
}

.compact-cohort-toggle,
.compact-individual{
  min-height:34px;
}

.compact-individual{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid #d9e1eb;
  border-radius:8px;
  background:#f8fafc;
  color:#344054;
  font-size:var(--type-micro);
}

.compact-cohort-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}

.cohort-hover-note{
  color:var(--muted);
  font-size:var(--type-micro);
}

.compact-trash{
  width:100%;
  min-width:0;
  margin-top:9px;
  padding:7px 9px;
  justify-content:center;
}

.compact-trash .trash-icon{
  font-size:var(--type-body);
}

/* The previous duplicated instruction bar is no longer rendered. */
.chart-interaction-bar{
  display:none;
}

.cohort-panel{
  display:none;
}

@media (max-width:1100px){
  .streamlined-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cohort-control-group{
    grid-column:1 / -1;
  }
}

@media (max-width:800px){
  .step2-live-summary{
    grid-template-columns:1fr;
  }

  .step2-summary-metrics{
    grid-template-columns:1fr;
  }

  .streamlined-controls{
    grid-template-columns:1fr;
  }

  .cohort-control-group{
    grid-column:auto;
  }

  .step2-domain-header{
    align-items:flex-start;
  }
}


/* ============================================================
   COMPACT PROFILE WORKSPACE
   Domains + controls + cohorts in a single surface.
============================================================ */

body.profile-mode .survey-journey{
  margin-bottom:10px;
}

body.profile-mode .journey-item{
  min-height:44px;
  padding:6px 9px;
}

body.profile-mode .journey-number{
  width:24px;
  height:24px;
}

.profile-workspace{
  margin:10px 0 10px;
  padding:12px 14px;
  border:1px solid #bfd2f8;
  border-radius:13px;
  background:#f8fbff;
}

.workspace-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:8px;
  border-bottom:1px solid #dbe7f7;
}

.workspace-title{
  min-width:0;
}

.workspace-title > strong{
  display:block;
  color:#101828;
  font-size:var(--type-section);
  font-weight:600;
}

.workspace-title > span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:var(--type-secondary);
}

.workspace-stats{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.workspace-stats > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border:1px solid #dbe7f7;
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:var(--type-micro);
  white-space:nowrap;
}

.workspace-stats strong{
  color:#1d4ed8;
  font-size:var(--type-micro);
  font-weight:600;
}

.workspace-domain-row,
.workspace-cohort-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:7px 0;
}

.workspace-domain-row{
  border-bottom:1px solid #e2eaf5;
}

.workspace-row-label{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex:none;
  min-width:max-content;
}

.workspace-row-label strong{
  color:#344054;
  font-size:var(--type-micro);
  font-weight:600;
}

.workspace-row-label span{
  color:var(--muted);
  font-size:var(--type-micro);
}

.compact-domain-summary{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}

.compact-domain-summary .profile-domain-chip{
  min-height:29px;
  padding:4px 7px;
  gap:5px;
  border-radius:7px;
}

.compact-domain-summary .profile-domain-count{
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:5px;
}

.workspace-control-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid #e2eaf5;
}

.workspace-control-group,
.workspace-action-hints{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

.workspace-control-label{
  margin-right:2px;
  color:#344054;
  font-size:var(--type-micro);
  font-weight:600;
}

.compact-add-trait{
  margin:0;
}

.compact-add-trait > summary{
  min-height:34px;
  padding:7px 10px;
}

.workspace-action-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:5px 7px;
  border-radius:7px;
  background:#fff;
  color:#475467;
  font-size:var(--type-micro);
  white-space:nowrap;
}

.workspace-action-hint > span{
  color:#1d4ed8;
  font-size:var(--type-secondary);
}

.inline-trash{
  display:inline-flex;
  width:auto;
  min-width:0;
  min-height:32px;
  margin:0;
  padding:5px 8px;
  gap:5px;
  white-space:nowrap;
}

.inline-trash .trash-icon{
  font-size:var(--type-secondary);
}

.inline-trash > span:last-child{
  font-size:var(--type-micro);
  font-weight:600;
}

.workspace-cohort-row{
  padding-bottom:0;
}

.compact-cohort-label{
  align-items:center;
}

.workspace-cohort-controls{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:0;
}

.workspace-individual,
.compact-cohort-toggle{
  min-height:31px;
  padding:4px 7px;
}

.cohort-shortcut{
  min-height:31px;
  padding:5px 8px;
}

.compact-hover-note{
  margin-left:2px;
  color:var(--muted);
  font-size:var(--type-micro);
  white-space:nowrap;
}

/* The old large surfaces are not rendered in Step 3 anymore. */
.profile-builder-frame,
.customize-panel{
  margin-top:0;
}

/* Bring the plot immediately under the workspace. */
.compact-profile-chart{
  margin-top:8px !important;
  border:1px solid #e1e7ef;
  border-radius:11px;
  background:#fff;
}

.compact-profile-chart .chart-wrap{
  min-height:0;
}

.compact-profile-legend{
  margin-top:5px;
  margin-bottom:5px;
}

/* Custom white tooltip should be visually immediate and clearly primary. */
.trait-tooltip{
  z-index:30;
  box-shadow:0 10px 28px rgba(16,24,40,.15);
}

/* Prevent any SVG text from behaving like a native tooltip target.
   Interaction remains on the transparent hit area. */
.x-label{
  user-select:none;
}

/* Reduce Step 3 vertical whitespace further. */
body.profile-mode .survey-content{
  gap:0;
}

@media (max-width:1180px){
  .workspace-control-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .workspace-action-hints{
    width:100%;
  }

  .workspace-cohort-row,
  .workspace-domain-row{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

@media (max-width:760px){
  .workspace-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .workspace-stats{
    justify-content:flex-start;
  }

  .compact-domain-summary{
    max-width:100%;
  }

  .compact-hover-note{
    width:100%;
    margin-left:0;
  }
}


/* ============================================================
   STEP 2 CORRECTION
   Keep all High traits visible by default, grouped by Domain.
============================================================ */

/* Only the explicitly requested toolbar/banner are removed. */
.top30-toolbar,
.top30-note{
  display:none !important;
}

/* The summaries stay visible. */
.step2-live-summary{
  display:grid !important;
}

/* Selected Domain chips can optionally filter the trait list. */
.step2-domain-filter{
  cursor:pointer;
  font-family:inherit;
  font-weight:400;
  text-align:left;
}

.step2-domain-filter.selected{
  border-color:#7da2ef;
  background:#eaf2ff;
  color:#174ea6;
}

.step2-filter-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0;
  padding:8px 10px;
  border:1px solid #d9e4f7;
  border-radius:9px;
  background:#f8fbff;
  color:#475467;
  font-size:var(--type-secondary);
}

/* ============================================================
   PROFILE ACTION EMPHASIS + ADD MENU POSITION
============================================================ */

.profile-workspace .profile-secondary-control{
  font-weight:400;
}

.profile-workspace .profile-add-control > summary{
  font-weight:600;
}

/* Open the Add trait menu to the RIGHT of the button,
   instead of extending to the left and being clipped. */
.profile-workspace .profile-add-control .add-menu{
  left:0;
  right:auto;
}

/* The SVG label is visual only.
   One stable transparent hit target owns hover/drag. */
.compact-profile-chart .x-label{
  pointer-events:none;
}

.profile-workspace .add-trait{
  position:relative;
}

.profile-workspace .profile-add-control .add-menu{
  top:100%;
  left:0 !important;
  right:auto !important;
  transform:none;
}


/* ============================================================
   STEP 2 — COMPACT HIGH TRAIT CHIPS
============================================================ */

/* Replace the fixed multi-column grid with flexible content-width chips. */
.step2-domain-grid{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:7px;
}

/* Each trait takes only the width its label needs. */
.step2-domain-grid .top-card{
  display:inline-flex;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  max-width:100%;
  min-height:42px;
  margin:0;
  padding:9px 12px;
  align-items:center;
  gap:9px;
  border-radius:9px;
}

/* Prevent the label wrapper from stretching the card. */
.step2-domain-grid .top-card > span{
  display:inline-flex;
  width:auto;
  min-width:0;
}

/* Allow long trait names to wrap only when genuinely necessary. */
.step2-domain-grid .top-name{
  display:inline-block;
  width:auto;
  max-width:420px;
  white-space:normal;
  line-height:1.35;
}

/* Keep checkbox sizing stable inside compact chips. */
.step2-domain-grid .top-checkbox{
  flex:0 0 auto;
  margin:0;
}


/* ============================================================
   STEP 2 — DENSER TRAIT CHIPS
============================================================ */

/* Match the compact scale used by Selected Domains. */
.step2-domain-grid .top-card{
  min-height:32px;
  padding:5px 8px;
  gap:6px;
  border-radius:8px;
  font-size:var(--type-micro);
  font-weight:400;
}

/* Trait names remain on one line and are not bold. */
.step2-domain-grid .top-name{
  display:inline-block;
  width:auto;
  max-width:none;
  white-space:nowrap;
  font-size:var(--type-micro);
  font-weight:400;
  line-height:1.25;
}

/* Keep checkbox compact as well. */
.step2-domain-grid .top-checkbox{
  width:16px;
  height:16px;
  flex:0 0 16px;
}

/* Slightly tighter spacing between chips so more fit per row. */
.step2-domain-grid{
  gap:5px !important;
  padding:8px !important;
}


/* ============================================================
   PROFILE CONTROL EMPHASIS
============================================================ */

/* Reference cohort shortcuts stay secondary. */
.profile-workspace #show-all-cohorts,
.profile-workspace #hide-all-cohorts{
  font-weight:400 !important;
}

/* + Add trait remains the primary trait-action control. */
.profile-workspace .profile-add-control > summary{
  font-weight:600 !important;
}