/* The appetite and onboarding approach pages (tools/framework_pages.py; STAGING ONLY behind FRAMEWORK_HUB_LIVE).
   Mobile first. Statement hues are the risk exceptions ones (never a status colour). */
.fp-sec { display: flex; flex-direction: column; gap: 12px; }
.fp-prose { margin-top: 10px; max-width: 70ch; }
.fp-prose h3 { margin: 0 0 6px; font-size: 17px; }


/* each statement, tied to capital and indicators */
.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-chip { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--a); background: var(--surface); color: var(--i); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.fp-chip[aria-pressed="true"] { background: var(--a); color: var(--surface); }
.fp-chip:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.fp-card { margin-top: 10px; padding: 16px 18px; border-radius: 14px; background: var(--g); border-top: 5px solid var(--a); color: var(--ink); }
.fp-card[hidden] { display: none; }
.fp-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--i); }

/* flows: the onboarding journey */
.fp-flow { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.fp-flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.fp-flow li + li::before { content: ""; position: absolute; left: 28px; top: -22px; width: 2px; height: 16px; background: var(--accent-deep); }
.fp-flow li + li::after { content: ""; position: absolute; left: 24px; top: -8px; border: 5px solid transparent; border-top: 6px solid var(--accent-deep); border-bottom: 0; }
.fp-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-deep); color: var(--surface);
  font-family: var(--font-data); font-weight: 700; font-size: 14px; }
.fp-flow b { font-size: 16px; }
.fp-flow li > span:not(.fp-n) { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.fp-journey li:last-child { border-color: var(--accent-deep); background: var(--surface-2); }
@media (min-width: 900px) {
  .fp-flow { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 30px; }
  .fp-flow li + li::before { left: -24px; top: 50%; width: 18px; height: 2px; }
  .fp-flow li + li::after { left: -9px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 6px solid var(--accent-deep); border-right: 0; }
}

/* the timeline (the deck's component): down the page on a phone, across from 900px */
.fp-tl { list-style: none; margin: 6px 0 0; padding: 0 0 0 6px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.fp-tl::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; background: var(--accent-deep); opacity: .45; }
.fp-tl li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
.fp-tl-dot { grid-row: 1 / span 2; grid-column: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-deep); border: 4px solid var(--ground); box-shadow: 0 0 0 2px var(--accent-deep); box-sizing: border-box; margin-top: 2px; z-index: 1; }
.fp-tl-l { grid-column: 2; font-family: var(--font-data); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.fp-tl-t { grid-column: 2; font-size: 15px; line-height: 1.45; }
@media (min-width: 900px) {
  .fp-tl { flex-direction: row; gap: 26px; padding: 0; }
  .fp-tl::before { left: 0; right: 0; top: 52px; bottom: auto; width: auto; height: 3px; }
  .fp-tl li { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
  .fp-tl-l { order: 1; min-height: 34px; display: flex; align-items: flex-end; }
  .fp-tl-dot { order: 2; margin: 0; }
  .fp-tl-t { order: 3; }
}

/* what we need from you */
.fp-needs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fp-needs li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.fp-needs b { font-size: 15.5px; }
.fp-needs span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 720px) { .fp-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-prose .rl-p + .rl-p { margin-top: 8px; }

/* ---- appetite v2 (25 Oct): text left, visual right from 960px; stacked, text first, on a phone ---- */
.fp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fp-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 62ch; }
.fp-txt .h2-sm { margin: 0; }
.fp-sub { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.fp-vis { min-width: 0; display: flex; flex-direction: column; align-items: center; }   /* r26: centred in its column, as .sec-visual */
.fp-vis > * { width: 100%; }
.fp-more { margin: 4px 0 0; }
@media (min-width: 960px) {
  .fp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .fp-s-layers .fp-split, .fp-s-board .fp-split { align-items: center; }
}

/* appetite in layers: an inverted pyramid, firm widest at the top; each band is centred in its column and narrows by
   the same step each side, so the edges run on as one shape; the descriptor sits beside its band */
.fp-pyr { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fp-pyr-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-pyr-l li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.fp-band { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 6px 0; color: var(--surface);
  background: color-mix(in srgb, #1F4651 calc(100% - var(--i) * 30%), #17797A);
  clip-path: polygon(calc(var(--i) * 9%) 0, calc(100% - var(--i) * 9%) 0, calc(100% - (var(--i) + 1) * 9%) 100%, calc((var(--i) + 1) * 9%) 100%); }
.fp-band b { font-size: 15.5px; }
.fp-desc { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.fp-cue { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(50% - 7px); margin: 0; text-align: center;
  font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.fp-cue svg { width: 9px; height: 16px; flex: none; }
@media (min-width: 600px) {
  .fp-pyr-l li { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 18px; }
  .fp-cue { width: calc(54.5% - 9px); }
  .fp-band { min-height: 70px; } .fp-band b { font-size: 16.5px; } .fp-desc { font-size: 14.5px; }
}

/* each statement: commentary on the left, the compressed card on the right */
.fp-comm { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-comm li { padding-left: 12px; border-left: 3px solid var(--accent-deep); font-size: 15px; line-height: 1.5; }
.fp-v2 .fp-card { padding: 16px 18px 18px; }
.fp-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.fp-v2 .fp-card h3 { margin: 0; }
.fp-ents { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.fp-ents-l, .fp-grp h4 { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fp-ents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fp-ents li { padding: 3px 10px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--a); font-size: 13px; font-weight: 600; color: var(--ink); }
.fp-stmt { margin: 12px 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.fp-rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 600px) { .fp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-g-ind, .fp-g-act { grid-column: 1 / -1; } }
.fp-grp { position: relative; padding: 10px 12px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.fp-grp h4 { margin: 0 0 6px; }
.fp-ids { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fp-id { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-family: var(--font-data); font-weight: 700; font-size: 13px; letter-spacing: .04em; cursor: help; }
.fp-id-name { min-height: 32px; font-family: var(--font-text); font-weight: 600; font-size: 13.5px; letter-spacing: 0; cursor: default; }
.fp-id:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.fp-act.fp-on { border-style: solid; border-color: var(--ink); }
.fp-act.fp-rack { border-style: dashed; }
.fp-mk { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; flex: none; }
.fp-on .fp-mk { background: var(--ink); }
.fp-rack .fp-mk { border: 1.5px dashed var(--ink-2); }
.fp-legend { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.fp-lg { display: inline-flex; align-items: center; gap: 6px; }
/* the tooltip: hover, keyboard focus or tap (framework-pages.js toggles is-open; Escape hides it); spans its group */
.fp-tip { display: none; position: absolute; left: 6px; right: 6px; bottom: calc(100% - 4px); z-index: 5; padding: 8px 10px; border-radius: 8px;
  background: var(--ink); color: var(--surface); font-size: 13.5px; line-height: 1.4; box-shadow: 0 4px 14px rgba(31, 70, 81, .25); }
.fp-tt-l { display: block; margin-top: 3px; color: var(--on-ink-body); }
.fp-tt-l b { color: var(--surface); }
.fp-id:hover + .fp-tip, .fp-id:focus-visible + .fp-tip, .fp-id.is-open + .fp-tip { display: block; }
.fp-id[data-tip-off] + .fp-tip { display: none; }

/* what the board report looks like: the capture keeps a 1px strong border, no shadow (brand guidelines, screenshots) */
.fp-shot { margin: 0; }
.fp-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border-strong); }
.fp-help { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }