/* ROI persona framework, v4. Scoped under .P; colours, type and spacing are v4 tokens. */

/* The raised sheet clips its overflow, which stops the progress bar from sticking.
   Clip without creating a scroll container, on this page only. */
.bp-sheet:has(.rpf) { overflow: clip; }

.rpf { color: var(--fg-1); font-family: var(--font-sans); }
.rpf *, .rpf *::before, .rpf *::after { box-sizing: border-box; }
.rpf h2, .rpf h3, .rpf p { margin: 0; }

/* ── Progress bar: sticky, hairline below ───────────────────────────── */
.rpf .rp-rail {
  position: sticky; top: var(--ws-nav-offset, 0px); z-index: 5; transition: top var(--ws-nav-ease, 0s); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5);
  padding: var(--space-3) 0; background: var(--bg-raised); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
.rpf .rp-rail-label { font: 600 12.5px/1.3 var(--font-sans); color: var(--fg-2); }
.rpf .rp-rail-steps { display: flex; gap: var(--space-1); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rpf .rp-rail-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font: 400 14px/1.2 var(--font-sans); color: var(--fg-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.rpf .rp-rail-step:hover { color: var(--fg-1); }
.rpf .rp-rail-step .num { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rpf .rp-rail-step .dot { width: 8px; height: 8px; flex: none; border: 1.5px solid var(--fg-2); }
.rpf .rp-rail-step[data-status="partial"] .dot { border-color: var(--fg-1); background: var(--fg-2); }
.rpf .rp-rail-step[data-status="complete"] { color: var(--fg-1); }
.rpf .rp-rail-step[data-status="complete"] .dot { border-color: var(--status-positive); background: var(--status-positive); }
.rpf .rp-rail-pct { font: 400 14px/1.2 var(--font-sans); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpf .rp-rail-pct span { font-weight: 600; color: var(--fg-1); }
@media (max-width: 760px) { .rpf .rp-rail { grid-template-columns: minmax(0, 1fr) auto; } .rpf .rp-rail-label { display: none; } .rpf .rp-rail-steps { grid-column: 1 / -1; grid-row: 2; } }

.rpf .rp-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; }
.rpf .rp-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rpf .rp-save-indicator { font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }

/* ── Sections ────────────────────────────────────────────────────────── */
.rpf .fw-section { padding-top: var(--space-8); scroll-margin-top: var(--space-9); display: grid; gap: var(--space-5); min-width: 0; }
.rpf .rp-sec-head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-strong); }
.rpf .rp-sec-num { font: 300 46px/1 var(--font-sans); letter-spacing: -.03em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rpf .rp-sec-title { display: flex; flex-direction: column; gap: var(--space-2); }
.rpf .rp-sec-title h2 { order: 1; font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.rpf .rp-sec-title p { order: 2; font-size: 16px; line-height: 1.55; max-width: 64ch; }
.rpf .rp-sec-title .tag { order: 3; font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }
@media (max-width: 640px) {
  .rpf .rp-sec-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .rpf .rp-sec-num { font-size: 30px; }
  .rpf .rp-sec-title h2 { font-size: 26px; }
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.rpf .rp-fields { display: grid; gap: var(--space-5); }
.rpf .rp-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.rpf .rp-field--wide { grid-column: 1 / -1; }
.rpf .rp-field-label { font: 600 12.5px/1.35 var(--font-sans); color: var(--fg-1); }
.rpf .rp-input {
  display: block; min-height: 64px; width: 100%; padding: 10px 12px;
  font: 400 15px/1.5 var(--font-sans); color: var(--fg-1);
  background: var(--bg-page); border: 1px solid var(--rule-input); border-radius: var(--radius-sheet);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.rpf .rp-fields--full .rp-input { min-height: 96px; }
.rpf .rp-input:hover { border-color: var(--rule-strong); }
.rpf .rp-input:focus, .rpf .rp-persona-name-input:focus { outline: var(--rule-bold) solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.rpf .rp-input:empty::before, .rpf .rp-persona-name-input:empty::before { content: attr(data-placeholder); color: var(--fg-2); opacity: .8; pointer-events: none; }

.rpf .rp-example { display: none; padding: var(--space-2) var(--space-3); background: var(--bg-sunken); font-size: 13px; line-height: 1.5; }
.rpf .rp-example::before { content: "Example"; display: block; font: 600 12.5px/1.3 var(--font-sans); color: var(--fg-2); margin-bottom: 2px; }
.rpf[data-examples="on"] .rp-example { display: block; }

/* ── Tiers ───────────────────────────────────────────────────────────── */
.rpf .rp-tier { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-3); padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.rpf .rp-tier-head { display: grid; gap: var(--space-2); align-content: start; }
.rpf .rp-tier-name { font: 600 21px/1.28 var(--font-sans); letter-spacing: -.01em; }
.rpf .rp-tier-name em { display: block; font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); font-style: normal; }
.rpf .rp-tier-defn { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.rpf .rp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 860px) { .rpf .rp-tier { grid-template-columns: minmax(0, 1fr); } .rpf .rp-tier-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Journey: wide, scrolls inside its own box ───────────────────────── */
.rpf .rp-journey-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rpf .rp-journey { display: grid; grid-template-columns: 8.5rem repeat(6, minmax(9rem, 1fr)); gap: var(--space-2); min-width: 1000px; }
.rpf .rp-journey-label { font: 600 12.5px/1.3 var(--font-sans); color: var(--fg-2); padding-top: 10px; }
.rpf .rp-journey-stage { font: 600 14px/1.3 var(--font-sans); padding: var(--space-2) 0; border-top: var(--rule-bold) solid var(--rule-strong); }
.rpf .rp-journey .rp-input { min-height: 72px; font-size: 14px; }

/* ── Persona deep dive ───────────────────────────────────────────────── */
.rpf .rp-persona { padding: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--rule); display: grid; gap: var(--space-4); }
.rpf .rp-persona-role { font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }
.rpf .rp-persona-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font: 600 21px/1.28 var(--font-sans); letter-spacing: -.01em; }
.rpf .rp-persona-name-input { display: inline-block; min-width: 10rem; padding: 2px 4px; border-bottom: 1px solid var(--rule-input); cursor: text; }
.rpf .rp-persona-name-input--role { font-size: 18px; font-weight: 500; }
.rpf .rp-persona-sep { color: var(--fg-2); font-weight: 400; }
.rpf .rp-persona-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .rpf .rp-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rpf .rp-persona-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── ROI impact map ──────────────────────────────────────────────────── */
.rpf .rp-roi-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rpf .rp-roi-head, .rpf .rp-roi-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.4fr; gap: var(--space-3); min-width: 720px; }
.rpf .rp-roi-head { padding-bottom: 8px; border-bottom: var(--rule-bold) solid var(--rule-strong); font: 600 12.5px/1.3 var(--font-sans); color: var(--fg-2); }
.rpf .rp-roi-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.rpf .rp-roi-row > div:first-child .rp-input { font-weight: 600; }

/* ── Discovery questions ─────────────────────────────────────────────── */
.rpf .rp-q-list { display: grid; border-top: 1px solid var(--rule-strong); }
.rpf .rp-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.rpf .rp-q--custom { grid-template-columns: minmax(0, 1fr); }
.rpf .rp-q-question { font: 600 16px/1.4 var(--font-sans); padding-top: 8px; }
.rpf .rp-q-question em { font-style: normal; color: var(--fg-2); }
.rpf .rp-q--custom .rp-field-label { margin-bottom: var(--space-2); }
@media (max-width: 760px) { .rpf .rp-q { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

.rpf .fw-pullquote { margin: var(--space-8) 0 0; max-width: 40ch; font-size: 30px; line-height: 1.25; font-weight: 450; letter-spacing: -.018em; text-wrap: pretty; }
@media (max-width: 640px) { .rpf .fw-pullquote { font-size: 24px; } }

@media print {
  .rpf .rp-rail, .rpf .rp-toolbar, .rpf .rp-example { display: none !important; }
  .rpf .rp-input { border: 0; border-bottom: 1px solid var(--rule); min-height: 0; padding: 4px 0; background: transparent; }
  .rpf .rp-input:empty::before, .rpf .rp-persona-name-input:empty::before { content: ""; }
  .rpf .rp-journey, .rpf .rp-roi-head, .rpf .rp-roi-row { min-width: 0; }
  .bp-sheet:has(.rpf) .ws-app__note { display: none; }
}