/* Best Place to Create — brand base (DASHBOARD_REQUIREMENTS §8, Brandbook BP2C). */
@font-face {
  font-family: 'Manrope';
  src: url('Manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --navy: #012233;
  --lime: #B1D635;
  --lightblue: #C0D6EB;
  --lavender: #C6C0CA;
  --cream: #F4F0E9;
  --white: #FFFFFF;
  --muted: #4A5A66;
  --hairline: #DCE3E8;
  --org: #1A5E8E;
  --good: #1E7A4C;
  --warn: #9A6B00;
  --crit: #B3261E;
  --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--org); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--org);
  outline-offset: 2px;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

.site-header { background: var(--navy); color: var(--cream); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.site-header img { height: 40px; width: auto; display: block; }
.site-header .context { font-size: 0.875rem; color: var(--lightblue); text-align: right; }
.site-header .wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.brand-link { display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.875rem; margin-right: auto; }
.site-nav a { color: var(--cream); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

main { padding: 32px 0 48px; }

h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 16px; }
.lede { color: var(--muted); margin: 0 0 24px; }
ul.lede { padding-left: 20px; margin-bottom: 8px; }

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.site-footer { border-top: 1px solid var(--hairline); padding: 24px 0; color: var(--muted); font-size: 0.875rem; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--lime); color: var(--navy); }
.btn-secondary { background: var(--navy); color: var(--cream); }
.btn-danger { background: var(--crit); color: var(--white); }

.messages { list-style: none; padding: 0; margin: 0 0 24px; }
.messages li { background: var(--white); border-left: 4px solid var(--warn); padding: 12px 16px; border-radius: 4px; }

/* Questionnaire */
.question { padding: 20px 0; border-top: 1px solid var(--hairline); }
.question:first-of-type { border-top: 0; padding-top: 0; }
.question > label, .question legend { display: block; font-weight: 600; margin-bottom: 12px; padding: 0; }
.question fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.question select, .question input[type=number] {
  font: inherit; color: var(--navy);
  width: 100%; max-width: 480px; padding: 10px 12px;
  border: 1px solid var(--muted); border-radius: 8px; background: var(--white);
}
.errorlist { color: var(--crit); list-style: none; padding: 0; margin: 8px 0 0; font-weight: 600; }

.scale-intro { color: var(--muted); margin: 0 0 8px; padding-left: 20px; }
.section-note { color: var(--muted); margin: -8px 0 16px; }

/* 0–10 slider: same markup and values as v2 (0 = «NA»), brand colors. */
.slider-labels { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); }
.slider-labels .label { width: 2ch; text-align: center; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin: 8px 0; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--lightblue); border-radius: 4px; }
input[type=range]::-moz-range-track { height: 8px; background: var(--lightblue); border-radius: 4px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--navy);
}
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--navy);
}

/* 1–5 and −5…+5 scales */
.scale { display: flex; flex-wrap: wrap; gap: 6px; }
.scale ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.scale label { display: inline-flex; }
.scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale label span {
  min-width: 44px; padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid var(--muted); border-radius: 8px; background: var(--white); cursor: pointer;
}
.scale input:checked + span { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.scale input:focus-visible + span { outline: 3px solid var(--org); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 0.8125rem; color: var(--muted); margin-top: 6px; }

.women-block[hidden] { display: none; }

@media (max-width: 480px) {
  .card { padding: 16px; }
  h1 { font-size: 1.5rem; }
  .site-header img { height: 32px; }
}

/* Results dashboard (DASHBOARD_REQUIREMENTS §8). Bars ≤ 24px, 4px rounded at the value end, square at
   the baseline. 2px gaps between stacked segments. Values in ink, never in the bar color. */
:root { --unfav: #9C5B2E; }  /* warm pole of the favorable/neutral/unfavorable split, validated with --org */
.dash .wrap, .dash { max-width: 980px; }
.dash-head h1 { margin-bottom: 4px; }
.quality { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; color: var(--muted); margin: 0 0 24px; }
.quality strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.quality-warn { flex-basis: 100%; margin: 0; color: var(--warn); font-weight: 600; }
.admin-warning { background: var(--white); border-left: 4px solid var(--crit); padding: 12px 16px; font-weight: 700; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; color: var(--navy); }
.tag-counts { background: var(--lime); }
.tag-info { background: var(--lightblue); }
.tag-reverse { background: var(--lavender); font-weight: 600; }
.tag-preliminary { background: var(--cream); }
.chip { display: inline-block; border-radius: 8px; padding: 6px 10px; font-weight: 600; background: var(--white); border: 1px solid; }
.chip.good { color: var(--good); border-color: var(--good); }
.chip.crit { color: var(--crit); border-color: var(--crit); }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.placeholder { color: var(--muted); font-style: italic; }
.footnote { color: var(--muted); font-size: 0.8125rem; margin: 8px 0 0; }
.muted { color: var(--muted); }

.acc { border: 2px solid var(--navy); padding: 0; overflow: hidden; }
.acc-band { background: var(--navy); color: var(--cream); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 24px; }
.acc-band h2 { margin: 0; font-size: 1rem; letter-spacing: 0.08em; }
.acc-body { padding: 20px 24px 24px; position: relative; }
.acc-marks { float: right; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 12px 16px; }
.acc-marks .seal { width: 120px; height: auto; }
.acc-marks .pill { width: 180px; height: auto; }
.acc-label { margin: 0; font-weight: 600; }
.acc-score { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.acc-score .big { font-size: 3.5rem; font-weight: 600; line-height: 1; font-variant-numeric: proportional-nums; }
.acc-score .unit, .enps .unit { color: var(--muted); font-weight: 600; }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.acc-result { font-size: 1.125rem; margin: 8px 0; }
.acc-reason, .acc-distance, .acc-next, .acc-preliminary { margin: 4px 0; }
.acc-preliminary { font-weight: 600; }

.offer { background: var(--lightblue); border: 0; }
.offer h2 { margin-bottom: 8px; }
.locked { list-style: none; padding: 0; margin: 0 0 16px; }
.locked li { padding: 2px 0; }
.offer-sub { font-weight: 600; margin-bottom: 4px; }
.deliverables { list-style: none; padding: 0; margin: 0; }
.deliverables li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.deliverables li:first-child { border-top: 0; }

.divider { background: var(--lightblue); border-radius: var(--radius); padding: 16px 24px; margin: 8px 0 24px; }
.divider p { margin: 0; }

.floor-label { font-size: 0.8125rem; color: var(--navy); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ref-key { display: inline-block; width: 2px; height: 14px; background: var(--navy); }
.q-list { display: flex; flex-direction: column; }
.q-row { border-top: 1px solid var(--hairline); }
.q-row:first-child { border-top: 0; }
.q-row summary, .placeholder-row, .opts li, .palanca-profile li {
  display: grid; grid-template-columns: minmax(140px, 34%) 1fr 3.2em; align-items: center; gap: 12px; padding: 8px 0;
}
.q-row summary { cursor: pointer; list-style: none; }
.q-row summary::-webkit-details-marker { display: none; }
.q-row summary .chip { grid-column: 2 / 4; justify-self: start; padding: 2px 8px; font-size: 0.75rem; }
.placeholder-row { grid-template-columns: minmax(140px, 34%) 1fr; }
.opts li.opt-suppressed .placeholder { grid-column: 2 / 4; }
.q-label, .opt-label { font-size: 0.9375rem; }
.q-value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bar-track { position: relative; height: 20px; background: transparent; border-left: 1px solid var(--hairline); }
.bar-track.small { height: 16px; }
.bar { display: block; height: 100%; background: var(--org); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-neutral { background: var(--lavender); }
.ref-line { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--navy); }
.q-detail { padding: 4px 0 16px; }
.q-text { font-weight: 600; margin: 8px 0 4px; }
.q-meta { color: var(--muted); font-size: 0.875rem; margin: 0 0 8px; font-variant-numeric: tabular-nums; }

.split { display: flex; gap: 2px; height: 16px; max-width: 520px; margin: 8px 0 4px; }
.seg { display: block; height: 100%; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg.fav, .key.fav { background: var(--org); }
.seg.neu, .key.neu { background: var(--lavender); }
.seg.unf, .key.unf { background: var(--unfav); }
.split-legend { font-size: 0.8125rem; color: var(--muted); margin: 0 0 8px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.hist { display: flex; align-items: flex-end; gap: 2px; height: 96px; max-width: 520px; border-bottom: 1px solid var(--hairline); margin: 8px 0 20px; }
.hist-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.hist-bar { display: block; width: 100%; max-width: 24px; background: var(--org); border-radius: 4px 4px 0 0; min-height: 1px; }
.hist-tick { position: absolute; bottom: -18px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.opts { list-style: none; padding: 0; margin: 0 0 4px; }
.cat { border-top: 1px solid var(--hairline); padding-top: 8px; margin-top: 8px; }
.palanca-profile { list-style: none; padding: 0; margin: 0; }
.pal-score { margin: 4px 0 8px; }
.enps-value { margin: 0 0 8px; }
.big-2 { font-size: 2.25rem; font-weight: 600; font-variant-numeric: proportional-nums; }
.dash-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.datapub { display: inline-flex; align-items: center; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .q-row summary, .opts li, .palanca-profile li { grid-template-columns: 1fr 3.2em; }
  .placeholder-row, .opts li.opt-suppressed { grid-template-columns: 1fr; row-gap: 2px; }
  .opts li.opt-suppressed .placeholder { grid-column: 1; }
  .q-row summary .bar-track, .opts li .bar-track, .palanca-profile li .bar-track { grid-column: 1 / 3; grid-row: 2; }
  .acc-score .big { font-size: 2.75rem; }
  .acc-marks { float: none; flex-direction: row; margin: 0 0 12px; }
}

@media print {
  body { background: var(--cream); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .divider { break-inside: avoid; }
  .dash > section.card, .dash > .divider { break-before: page; }
  .dash > section.card.acc { break-before: auto; }
  details.q-row > .q-detail { display: block; }
  .no-print { display: none; }
  .dash-head a, .dash-footer a[href] { color: var(--navy); }
}

/* Pages outside the questionnaire and the dashboard: same tokens, same components. */
.narrow { max-width: 560px; }
.login-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.login-form label { font-weight: 600; }
.login-form input[type=email] {
  font: inherit; color: var(--navy);
  width: 100%; max-width: 420px; padding: 10px 12px;
  border: 1px solid var(--muted); border-radius: 8px; background: var(--white);
}
.notice-ok { background: var(--white); border-left: 4px solid var(--good); padding: 12px 16px; border-radius: 8px; }
.callout { background: var(--lightblue); border-radius: var(--radius); padding: 16px 24px; margin: 0 0 24px; }
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin: 0; }
.action-list { list-style: none; padding: 0; margin: 0; }
.action-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.action-list li:first-child { border-top: 0; }
.confirm summary { list-style: none; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm[open] { flex-basis: 100%; }
.confirm[open] summary { background: var(--lavender); color: var(--navy); }
.confirm-body { margin-top: 12px; padding: 12px 16px; border-left: 4px solid var(--crit); background: var(--white); }
.notice h2 { margin-top: 28px; }
.notice ul { padding-left: 20px; }
.notice li { margin-bottom: 6px; }
.cat-scores { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; }
.legacy-q-title { font-size: 1rem; }
.results-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.results-summary td { padding: 2px 16px 2px 0; font-variant-numeric: tabular-nums; }
.summary-label { font-weight: 600; }
.plot { max-width: 100%; overflow-x: auto; }

@media print {
  .site-nav { display: none; }
}