/*
 * proposals.css
 *   /proposals/  /proposals/new/  /proposals/{id}/  /proposals/view/{token}/
 * Version 1.1.0
 *
 * THE STOCK PAGES' DESIGN.
 * ---------------------------------------------------------------------
 * The card shell is bq-ownership's .bq-section (style.css): white, a
 * #dee2e6 hairline, 8px corners and a 2px shadow on the site's grey
 * ground, exactly as every /stocks/ page draws it. Inside the cards this
 * file restates the .bq-io vocabulary of ownership-pages.css (as
 * overview.css does, token for token): 12px/700 uppercase card heads over
 * one hairline, 9.5px uppercase table heads on a tint, tabular figures,
 * #00529b for state, #15803d / #c5331f for direction and nothing else.
 *
 * Buttons and dropdowns are the company-KPI plugin's: white, a line-mid
 * hairline, 6px corners, 34px tall, grey text that turns ink on hover; a
 * labelled field shell for selects. No filled dark buttons and no blue
 * button text anywhere.
 *
 * Chart and series colours come from the site's one categorical ramp
 * (company-KPI constants/colors.json = metric-pages MP_RAMP = the fund
 * charts): proposed #0f6e6e, current #ef9f4a, benchmark #4a6fa5.
 *
 * --pp-accent is the advisor's brand colour on the report, chrome only.
 *
 * 1.1.0 (2026-10-26) Rebuilt on the stock pages' design (was the fund
 *       pages' .bq-fd hues); KPI-plugin buttons and fields.
 */

.bq-pp, #pp-print-root {
    --pp-ink:        #0b1f2e;
    --pp-text:       #37485a;
    --pp-muted:      #6b7a89;
    --pp-faint:      #97a4b2;
    --pp-line:       #eaeff4;
    --pp-line-mid:   #dfe6ed;
    --pp-line-strong:#cfd9e3;
    --pp-frame:      #dee2e6;
    --pp-tint:       #f7fafc;
    --pp-tint-2:     #f1f6fa;
    --pp-blue:       #00529b;
    --pp-blue-mid:   #217ab4;
    --pp-blue-soft:  rgba(0, 82, 155, .08);
    --pp-green:      #15803d;
    --pp-green-soft: rgba(21, 128, 61, .10);
    --pp-red:        #c5331f;
    --pp-red-soft:   rgba(197, 51, 31, .09);
    --pp-amber:      #a86a12;
    /* Series: the ramp. */
    --pp-cur:        #ef9f4a;
    --pp-prop:       #0f6e6e;
    --pp-bench:      #4a6fa5;
    color: var(--pp-text);
}

.bq-pp .bq-pp-num, .bq-pp .bq-pp-table td, .bq-pp .bq-pp-kt-v, .bq-pp .bq-pp-kpi-v { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.bq-pp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* .bq-section's own h2 rule (18px, 20px bottom border) is page copy; the
   card heads below are chrome. */
.bq-pp .bq-section { margin-bottom: 20px; padding: 20px 22px; }

/* ── Card head (.bq-io-head) ─────────────────────────────────────────── */
.bq-pp .bq-pp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 11px; margin-bottom: 16px; border-bottom: 1px solid var(--pp-line-mid); }
.bq-pp .bq-pp-head h2, .bq-pp .bq-pp-head h3 { margin: 0; padding: 0; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--pp-ink); line-height: 1.35; }
.bq-pp .bq-pp-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bq-pp .bq-pp-meta { font-size: 11.5px; color: var(--pp-faint); letter-spacing: .2px; white-space: nowrap; }
.bq-pp .bq-pp-meta strong { font-weight: 600; color: var(--pp-muted); }
.bq-pp .bq-pp-say { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--pp-text); }
.bq-pp .bq-pp-say strong { font-weight: 700; color: var(--pp-ink); }
.bq-pp .bq-pp-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--pp-blue); margin-bottom: 6px; }

/* ── Breadcrumbs (stock-lists') ──────────────────────────────────────── */
.bq-pp .bq-pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 2px 12px; font-size: 12px; color: var(--pp-faint); }
.bq-pp .bq-pp-crumbs a { color: var(--pp-blue); text-decoration: none; }
.bq-pp .bq-pp-crumbs a:hover { text-decoration: underline; }
.bq-pp .bq-pp-crumbs [aria-current] { color: var(--pp-muted); }

/* ── Buttons (company-KPI .ck-control-btn) ───────────────────────────── */
.bq-pp .bq-pp-btn {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; padding: 0 12px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--pp-line-mid); border-radius: 6px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .1px; line-height: 1;
    color: var(--pp-muted); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bq-pp .bq-pp-btn svg { width: 14px; height: 14px; flex: none; }
.bq-pp .bq-pp-btn:hover:not(:disabled) { background: var(--pp-tint-2); border-color: var(--pp-line-strong); color: var(--pp-ink); }
.bq-pp .bq-pp-btn:focus-visible { outline: none; border-color: var(--pp-blue-mid); box-shadow: 0 0 0 3px var(--pp-blue-soft); }
.bq-pp .bq-pp-btn:disabled { background: #f8f9fa; border-color: #e9ecef; color: var(--pp-faint); cursor: not-allowed; }
/* The one action per bar that matters more: ink text on the strong
   hairline. Still white: nothing on these pages is darker than the bar. */
.bq-pp .bq-pp-btn-primary { color: var(--pp-ink); font-weight: 700; border-color: var(--pp-line-strong); }
.bq-pp .bq-pp-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--pp-muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pp-line-strong); text-underline-offset: 3px; }
.bq-pp .bq-pp-linkbtn:hover { color: var(--pp-ink); text-decoration-color: currentColor; }
.bq-pp .bq-pp-linkbtn.is-armed, .bq-pp .bq-pp-iconbtn.is-armed { color: var(--pp-red); }
.bq-pp .bq-pp-iconbtn { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; margin-left: 4px; background: #fff; border: 1px solid var(--pp-line-mid); border-radius: 5px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--pp-muted); cursor: pointer; text-decoration: none; }
.bq-pp .bq-pp-iconbtn:hover { background: var(--pp-tint-2); border-color: var(--pp-line-strong); color: var(--pp-ink); }
.bq-pp .bq-pp-iconbtn.is-danger:hover { color: var(--pp-red); }

/* ── Segmented control (.bq-io-seg) ──────────────────────────────────── */
.bq-pp .bq-pp-seg { display: inline-flex; padding: 2px; background: var(--pp-tint-2); border: 1px solid var(--pp-line-mid); border-radius: 5px; }
.bq-pp .bq-pp-seg button { appearance: none; border: 0; background: none; cursor: pointer; padding: 5px 11px; border-radius: 3px; font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: var(--pp-muted); line-height: 1.4; white-space: nowrap; }
.bq-pp .bq-pp-seg button:hover { color: var(--pp-ink); }
.bq-pp .bq-pp-seg button.is-active { background: #fff; color: var(--pp-ink); box-shadow: 0 1px 2px rgba(0, 42, 69, .14); }
.bq-pp .bq-pp-count { margin-left: 3px; font-size: 10.5px; color: var(--pp-faint); }

/* ── Fields (company-KPI field shells) ───────────────────────────────── */
.bq-pp input[type=text], .bq-pp input[type=number], .bq-pp input[type=url], .bq-pp input[type=date], .bq-pp select, .bq-pp textarea {
    box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 0 10px;
    background: #fff; border: 1px solid var(--pp-line-mid); border-radius: 6px;
    font: inherit; font-size: 13px; color: var(--pp-ink); font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bq-pp select {
    appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2397a4b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.bq-pp textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.bq-pp input:hover, .bq-pp select:hover, .bq-pp textarea:hover { border-color: var(--pp-line-strong); }
.bq-pp input:focus, .bq-pp select:focus, .bq-pp textarea:focus { outline: none; border-color: var(--pp-blue-mid); box-shadow: 0 0 0 3px var(--pp-blue-soft); }
.bq-pp input::placeholder, .bq-pp textarea::placeholder { color: var(--pp-faint); }

/* The labelled shell: a micro-label on a tint, then the control, one frame. */
.bq-pp .bq-pp-field-shell { display: inline-flex; align-items: stretch; height: 34px; box-sizing: border-box; background: #fff; border: 1px solid var(--pp-line-mid); border-radius: 6px; transition: border-color .15s ease, box-shadow .15s ease; }
.bq-pp .bq-pp-field-shell:hover { border-color: var(--pp-line-strong); }
.bq-pp .bq-pp-field-shell:focus-within { border-color: var(--pp-blue-mid); box-shadow: 0 0 0 3px var(--pp-blue-soft); }
.bq-pp .bq-pp-field-l { display: flex; align-items: center; padding: 0 9px; background: var(--pp-tint); border-right: 1px solid var(--pp-line); border-radius: 5px 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); white-space: nowrap; }
.bq-pp .bq-pp-field-shell select { height: 32px; border: 0; border-radius: 0 6px 6px 0; box-shadow: none !important; width: auto; min-width: 116px; font-weight: 600; }

.bq-pp .bq-pp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.bq-pp .bq-pp-form--one { grid-template-columns: minmax(0, 1fr); }
.bq-pp .bq-pp-span-2 { grid-column: 1 / -1; }
.bq-pp .bq-pp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bq-pp .bq-pp-field > span, .bq-pp .bq-pp-field > label > span { font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }
.bq-pp .bq-pp-field small { font-size: 11px; color: var(--pp-faint); line-height: 1.4; }
.bq-pp .bq-pp-field--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.bq-pp .bq-pp-field--row > label { flex: 1 0 100%; }
.bq-pp input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--pp-line-mid); border-radius: 6px; background: #fff; cursor: pointer; }
.bq-pp .bq-pp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-pp .bq-pp-swatches button { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pp-line-mid); cursor: pointer; padding: 0; }
.bq-pp .bq-pp-swatches button.is-on { box-shadow: 0 0 0 2px var(--pp-blue-mid); }

/* ── Misc ────────────────────────────────────────────────────────────── */
.bq-pp .bq-pp-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--pp-line-mid); border-top-color: var(--pp-blue-mid); border-radius: 50%; animation: bq-pp-spin .8s linear infinite; vertical-align: -2px; }
@keyframes bq-pp-spin { to { transform: rotate(360deg); } }
.bq-pp .bq-pp-loading { padding: 18px 2px; font-size: 13px; color: var(--pp-muted); list-style: none; }
.bq-pp .bq-pp-hint, .bq-pp .bq-pp-note { font-size: 12px; line-height: 1.6; color: var(--pp-muted); margin: 10px 0 0; }
.bq-pp .bq-pp-muted { color: var(--pp-faint); }
.bq-pp .bq-pp-nm { display: block; font-size: 11px; font-weight: 400; color: var(--pp-faint); white-space: normal; }
.bq-pp .bq-pp-blank { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--pp-muted); font-size: 13px; }
.bq-pp .bq-pp-blank svg { width: 30px; height: 30px; color: var(--pp-faint); margin-bottom: 4px; }
.bq-pp .bq-pp-blank strong { font-size: 14px; color: var(--pp-ink); }
.bq-pp .bq-pp-pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .2px; background: rgba(136, 153, 168, .14); color: #5d6b79; white-space: nowrap; }
.bq-pp .bq-pp-pill.is-presented { background: var(--pp-blue-soft); color: var(--pp-blue); }
.bq-pp .bq-pp-pill.is-accepted { background: var(--pp-green-soft); color: var(--pp-green); }
.bq-pp .bq-pp-pill.is-declined { background: var(--pp-red-soft); color: var(--pp-red); }

/* ── Tables (.bq-io-table) ───────────────────────────────────────────── */
.bq-pp .bq-pp-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pp-line-mid); border-radius: 5px; }
.bq-pp .bq-pp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 640px; }
.bq-pp .bq-pp-table thead th { position: sticky; top: 0; z-index: 1; background: var(--pp-tint); padding: 8px 14px; border-bottom: 1px solid var(--pp-line-mid); font-size: 9.5px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--pp-faint); white-space: nowrap; text-align: right; }
.bq-pp .bq-pp-table thead th.bq-pp-c-name { text-align: left; }
.bq-pp .bq-pp-table tbody td, .bq-pp .bq-pp-table tbody th { padding: 6px 14px; line-height: 1.35; border-bottom: 1px solid var(--pp-line); color: var(--pp-text); white-space: nowrap; text-align: right; vertical-align: middle; font-weight: 400; }
.bq-pp .bq-pp-table tbody th { text-align: left; font-weight: 600; color: var(--pp-ink); }
.bq-pp .bq-pp-table tbody tr:last-child td, .bq-pp .bq-pp-table tbody tr:last-child th { border-bottom: 0; }
.bq-pp .bq-pp-table tbody tr:hover { background: var(--pp-tint); }
.bq-pp .bq-pp-table .bq-pp-c-name { text-align: left; white-space: normal; }
.bq-pp .bq-pp-table .bq-pp-c-name strong { color: var(--pp-blue); font-weight: 700; }
.bq-pp .bq-pp-table a { color: var(--pp-blue); text-decoration: none; }
.bq-pp .bq-pp-table a:hover { text-decoration: underline; }
.bq-pp .bq-pp-c-act { white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════════════
   LANDING
   ═════════════════════════════════════════════════════════════════════ */
.bq-pp .bq-pp-hero { padding: 24px 26px 24px; }
.bq-pp .bq-pp-h1 { margin: 0 0 8px; padding: 0; border: 0; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px; color: var(--pp-ink); }
.bq-pp .bq-pp-hero.is-compact .bq-pp-h1 { font-size: 20px; letter-spacing: -.4px; }
.bq-pp .bq-pp-hero > .bq-pp-say { max-width: 820px; font-size: 14px; }
.bq-pp .bq-pp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bq-pp .bq-pp-hero .bq-pp-note { margin-top: 14px; }
.bq-pp .bq-pp-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bq-pp .bq-pp-features li { display: flex; flex-direction: column; gap: 5px; padding: 4px 16px 16px; border-left: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.bq-pp .bq-pp-features li:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.bq-pp .bq-pp-features li:nth-last-child(-n + 4) { border-bottom: 0; }
.bq-pp .bq-pp-features li:nth-child(n + 5) { padding-top: 16px; }
.bq-pp .bq-pp-features strong { font-size: 13px; color: var(--pp-ink); }
.bq-pp .bq-pp-features span { font-size: 12px; line-height: 1.55; color: var(--pp-muted); }
.bq-pp .bq-pp-how { margin: 0; padding: 0; list-style: none; counter-reset: pp; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bq-pp .bq-pp-how li { counter-increment: pp; display: flex; flex-direction: column; gap: 4px; }
.bq-pp .bq-pp-how li::before { content: counter(pp); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pp-tint-2); border: 1px solid var(--pp-line-mid); color: var(--pp-muted); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.bq-pp .bq-pp-how strong { font-size: 13px; color: var(--pp-ink); }
.bq-pp .bq-pp-how span { font-size: 12px; line-height: 1.55; color: var(--pp-muted); }
.bq-pp .bq-pp-faq details { border-bottom: 1px solid var(--pp-line); padding: 12px 0; }
.bq-pp .bq-pp-faq details:last-child { border-bottom: 0; padding-bottom: 0; }
.bq-pp .bq-pp-faq summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--pp-ink); }
.bq-pp .bq-pp-faq p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--pp-text); }
.bq-pp .bq-pp-related { font-size: 12px; color: var(--pp-muted); margin: 0 2px 24px; }
.bq-pp .bq-pp-related a { color: var(--pp-blue); text-decoration: none; }
.bq-pp .bq-pp-related a:hover { text-decoration: underline; }

/* ═════════════════════════════════════════════════════════════════════
   BUILDER
   ═════════════════════════════════════════════════════════════════════ */
/* Head bar: the stock pages' identity card, name on top, tabs along the
   bottom edge (.bq-page-headbar + .bq-top-navigation). */
.bq-pp .bq-pp-headbar { background: #fff; border: 1px solid var(--pp-frame); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, .06); margin-bottom: 15px; }
.bq-pp .bq-pp-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 20px 12px; }
.bq-pp .bq-pp-title { flex: 1 1 360px; min-width: 0; }
.bq-pp .bq-pp-title .bq-pp-eyebrow { margin-bottom: 2px; }
.bq-pp .bq-pp-title-row { display: flex; align-items: baseline; gap: 12px; }
.bq-pp input.bq-pp-name { flex: 1 1 auto; min-width: 0; height: auto; font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--pp-ink); border: 1px solid transparent; border-radius: 6px; padding: 2px 8px; margin-left: -9px; background: transparent; }
.bq-pp input.bq-pp-name:hover { border-color: var(--pp-line-mid); }
.bq-pp input.bq-pp-name:focus { background: #fff; }
.bq-pp .bq-pp-savestate { font-size: 11.5px; color: var(--pp-faint); white-space: nowrap; }
.bq-pp .bq-pp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.bq-pp .bq-pp-steps { display: flex; gap: 2px; padding: 0 12px; border-top: 1px solid var(--pp-line); overflow-x: auto; scrollbar-width: none; }
.bq-pp .bq-pp-steps::-webkit-scrollbar { display: none; }
.bq-pp .bq-pp-steps button { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 12px 12px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--pp-text); white-space: nowrap; }
.bq-pp .bq-pp-steps button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.bq-pp .bq-pp-steps button:hover { color: var(--pp-ink); }
.bq-pp .bq-pp-steps button.is-active { color: var(--pp-blue-mid); }
.bq-pp .bq-pp-steps button.is-active::after { background: var(--pp-blue-mid); }
.bq-pp .bq-pp-step-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--pp-line-strong); font-size: 10.5px; font-weight: 700; color: var(--pp-muted); background: #fff; }
.bq-pp .bq-pp-steps button.is-done .bq-pp-step-n { border-color: transparent; background: var(--pp-green-soft); color: var(--pp-green); }
.bq-pp .bq-pp-steps button.is-active .bq-pp-step-n { border-color: var(--pp-blue-mid); background: var(--pp-blue-soft); color: var(--pp-blue-mid); }
.bq-pp .bq-pp-step-t { display: flex; flex-direction: column; min-width: 0; }
.bq-pp .bq-pp-step-t strong { font-size: 14px; font-weight: 600; color: inherit; }
.bq-pp .bq-pp-step-t em { font-style: normal; font-size: 11px; color: var(--pp-faint); }

/* KPI strip (.bq-io-kpis: dividers between tiles, never a box in a box). */
.bq-pp .bq-pp-kpis-card { padding-bottom: 16px; }
.bq-pp .bq-pp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bq-pp .bq-pp-kpis-empty { grid-column: 1 / -1; padding: 4px 0 2px; font-size: 13px; color: var(--pp-muted); }
.bq-pp .bq-pp-kt { display: flex; flex-direction: column; padding: 2px 16px 2px; border-left: 1px solid var(--pp-line); min-width: 0; }
.bq-pp .bq-pp-kt:first-child { border-left: 0; padding-left: 0; }
.bq-pp .bq-pp-kt-l { font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-pp .bq-pp-kt-v { font-size: 20px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; color: var(--pp-ink); white-space: nowrap; }
.bq-pp .bq-pp-kt-s { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--pp-faint); }
.bq-pp .bq-pp-kt.is-warn .bq-pp-kt-s { color: var(--pp-red); }
.bq-pp .bq-pp-from { color: var(--pp-faint); font-weight: 600; }

.bq-pp .bq-pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.bq-pp .bq-pp-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 28px; }
.bq-pp .bq-pp-run { font-size: 12px; color: var(--pp-muted); text-align: center; }
.bq-pp .bq-pp-run.is-bad { color: var(--pp-red); }

/* Questionnaire: answers are square-ish chips, selected = the state blue,
   soft, never filled dark. */
.bq-pp .bq-pp-questions { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.bq-pp .bq-pp-questions > li { counter-increment: q; padding: 11px 0; border-bottom: 1px solid var(--pp-line); }
.bq-pp .bq-pp-questions > li:first-child { padding-top: 0; }
.bq-pp .bq-pp-questions > li:last-child { border-bottom: 0; padding-bottom: 0; }
.bq-pp .bq-pp-questions fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bq-pp .bq-pp-questions legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--pp-ink); }
.bq-pp .bq-pp-questions legend::before { content: counter(q) ". "; color: var(--pp-faint); }
.bq-pp .bq-pp-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-pp .bq-pp-answers label { position: relative; cursor: pointer; }
.bq-pp .bq-pp-answers input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bq-pp .bq-pp-answers span { display: inline-block; padding: 5px 10px; border: 1px solid var(--pp-line-mid); border-radius: 5px; font-size: 12px; color: var(--pp-text); background: #fff; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.bq-pp .bq-pp-answers label:hover span { border-color: var(--pp-line-strong); color: var(--pp-ink); }
.bq-pp .bq-pp-answers label.is-on span { background: var(--pp-blue-soft); border-color: var(--pp-blue-mid); color: var(--pp-blue); font-weight: 700; }
.bq-pp .bq-pp-answers input:focus-visible + span { box-shadow: 0 0 0 3px var(--pp-blue-soft); }
.bq-pp .bq-pp-clientscore { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--pp-line-mid); border-radius: 6px; background: var(--pp-tint); }
.bq-pp .bq-pp-cs-n { font-size: 28px; font-weight: 700; letter-spacing: -.6px; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.bq-pp .bq-pp-clientscore strong { display: block; font-size: 14px; color: var(--pp-ink); }
.bq-pp .bq-pp-clientscore span { font-size: 12px; color: var(--pp-muted); }

/* Editable tables */
.bq-pp .bq-pp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.bq-pp .bq-pp-toolbar .bq-pp-linkbtn { margin-left: auto; }
.bq-pp .bq-pp-edit { min-width: 620px; }
.bq-pp .bq-pp-edit tbody td { padding: 5px 8px; }
.bq-pp .bq-pp-edit tbody td.bq-pp-c-name { min-width: 150px; }
.bq-pp .bq-pp-edit input, .bq-pp .bq-pp-edit select { height: 30px; font-size: 12.5px; border-radius: 5px; }
.bq-pp .bq-pp-edit .bq-pp-tk { text-transform: uppercase; font-weight: 700; max-width: 170px; color: var(--pp-blue); }
.bq-pp .bq-pp-edit .bq-pp-num { text-align: right; max-width: 140px; margin-left: auto; display: block; }
.bq-pp .bq-pp-edit input[type=date] { max-width: 150px; margin-left: auto; display: block; }
.bq-pp .bq-pp-c-unit { width: 112px; }
.bq-pp .bq-pp-c-unit select { width: 104px; }
.bq-pp .bq-pp-table .bq-pp-c-x { width: 34px; text-align: center; }
.bq-pp .bq-pp-c-bar { width: 32%; }
.bq-pp .bq-pp-x { width: 26px; height: 26px; border: 0; border-radius: 5px; background: none; font-size: 17px; line-height: 1; color: var(--pp-faint); cursor: pointer; }
.bq-pp .bq-pp-x:hover { background: var(--pp-red-soft); color: var(--pp-red); }
.bq-pp .bq-pp-edit tr.is-unknown .bq-pp-tk { border-color: var(--pp-red); }
.bq-pp .bq-pp-bad { display: block; font-size: 10.5px; color: var(--pp-red); font-weight: 600; margin-top: 2px; }
.bq-pp .bq-pp-wbar { display: block; height: 6px; border-radius: 3px; background: var(--pp-tint-2); overflow: hidden; }
.bq-pp .bq-pp-wbar i { display: block; height: 100%; background: var(--pp-prop); border-radius: 3px; }
.bq-pp .bq-pp-sum { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bq-pp .bq-pp-sum.is-ok { color: var(--pp-green); }
.bq-pp .bq-pp-sum.is-off { color: var(--pp-amber); }

/* Observations (.bq-io-insights: a disc in an 18px gutter). */
.bq-pp .bq-pp-flags, .bq-pp .bq-pp-flaglist { margin: 0; padding: 0; list-style: none; }
.bq-pp .bq-pp-flags li, .bq-pp .bq-pp-flaglist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; padding: 0 0 9px; font-size: 13px; line-height: 1.6; color: var(--pp-text); }
.bq-pp .bq-pp-flags li:last-child, .bq-pp .bq-pp-flaglist li:last-child { padding-bottom: 0; }
.bq-pp .bq-pp-flags li::before, .bq-pp .bq-pp-flaglist li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #b3c1cf; }
.bq-pp .bq-pp-flags li.is-warn::before, .bq-pp .bq-pp-flaglist li.is-warn::before { background: var(--pp-red); }

/* Models */
.bq-pp .bq-pp-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bq-pp .bq-pp-model { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--pp-line-mid); border-radius: 6px; background: #fff; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.bq-pp .bq-pp-model:hover { border-color: var(--pp-line-strong); }
.bq-pp .bq-pp-model.is-suggested { border-color: rgba(21, 128, 61, .45); }
.bq-pp .bq-pp-model.is-picked { border-color: var(--pp-blue-mid); box-shadow: 0 0 0 3px var(--pp-blue-soft); }
.bq-pp .bq-pp-model-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bq-pp .bq-pp-model-h strong { font-size: 13.5px; color: var(--pp-ink); margin-right: auto; }
.bq-pp .bq-pp-model p { margin: 0; font-size: 12px; color: var(--pp-muted); }
.bq-pp .bq-pp-model-mix { display: flex; flex-wrap: wrap; gap: 4px; }
.bq-pp .bq-pp-model-mix span { padding: 2px 6px; border-radius: 3px; background: var(--pp-tint-2); font-size: 11px; font-weight: 700; color: var(--pp-text); }
.bq-pp .bq-pp-model-mix b { font-weight: 600; color: var(--pp-faint); }
.bq-pp .bq-pp-model-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.bq-pp .bq-pp-model-f .bq-pp-btn { height: 30px; }

/* Report step */
.bq-pp .bq-pp-reportlayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
/* The report options stay pinned beside the report. global-styles.css sets
   `body { overflow-x: hidden }`, which (with html's overflow-y) makes body a
   scroll container that never scrolls, so nothing sticky could pin to the
   window; `clip` clips the same overflow without that side effect. */
body.bq-pp-page { overflow-x: clip; }
/* 1.2.1: the root also carries #bq-ownership-container, whose overflow-x:
   hidden (bq-ownership style.css) makes it a scroll container of its own,
   so the options pinned to a box that never scrolls. Same clip here. */
body.bq-pp-page #bq-ownership-container.bq-pp { overflow-x: clip; }
.bq-pp .bq-pp-reportlayout > .bq-pp-reportopts.bq-section { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; margin-top: 0; }
.bq-pp .bq-pp-subhead { margin: 18px 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }
.bq-pp .bq-pp-sections { margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--pp-line-mid); border-radius: 5px; }
.bq-pp .bq-pp-sections li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--pp-line); font-size: 12.5px; }
.bq-pp .bq-pp-sections li:last-child { border-bottom: 0; }
.bq-pp .bq-pp-sections li.is-off label { color: var(--pp-faint); }
.bq-pp .bq-pp-sections label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--pp-text); min-width: 0; }
.bq-pp .bq-pp-sections input { accent-color: var(--pp-blue-mid); }
.bq-pp .bq-pp-move { display: flex; gap: 2px; flex: none; }
.bq-pp .bq-pp-move button { width: 22px; height: 22px; border: 1px solid var(--pp-line-mid); border-radius: 4px; background: #fff; font-size: 11px; color: var(--pp-muted); cursor: pointer; padding: 0; }
.bq-pp .bq-pp-move button:hover { background: var(--pp-tint-2); color: var(--pp-ink); }
.bq-pp .bq-pp-sections li:first-child [data-dir="-1"], .bq-pp .bq-pp-sections li:last-child [data-dir="1"] { visibility: hidden; }
.bq-pp .bq-pp-preview { min-width: 0; }
.bq-pp .bq-pp-preview-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }
.bq-pp .bq-pp-preview-bar .bq-pp-linkbtn { text-transform: none; letter-spacing: 0; }

/* ═════════════════════════════════════════════════════════════════════
   THE REPORT — a stock-page card; the advisor's colour on its chrome
   ═════════════════════════════════════════════════════════════════════ */
.bq-pp-report { --pp-accent: #0f6e6e; background: #fff; border: 1px solid var(--pp-frame); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, .06); padding: 6px 26px 22px; color: var(--pp-text); }
.bq-pp-report.is-standalone { max-width: 1080px; margin: 0 auto 30px; }
.bq-pp-report > .bq-pp-blank { margin: 10px 0; }
.bq-pp-report .bq-pp-mast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 18px 0 14px; border-bottom: 2px solid var(--pp-accent); }
.bq-pp-report .bq-pp-mast strong { font-size: 18px; color: var(--pp-ink); }
.bq-pp-report .bq-pp-mast span { font-size: 12px; color: var(--pp-muted); }
.bq-pp-report .bq-pp-cover { padding: 28px 0 26px; border-bottom: 1px solid var(--pp-line-mid); }
.bq-pp-report .bq-pp-cover-top { display: flex; align-items: center; gap: 14px; min-height: 34px; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 2px solid var(--pp-accent); }
.bq-pp-report .bq-pp-logo { max-height: 42px; max-width: 200px; object-fit: contain; }
.bq-pp-report .bq-pp-firm { font-size: 15px; font-weight: 700; color: var(--pp-ink); letter-spacing: .2px; }
.bq-pp-report .bq-pp-cover-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--pp-accent); }
.bq-pp-report .bq-pp-cover-client { margin: 6px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--pp-ink); line-height: 1.2; }
.bq-pp-report .bq-pp-cover-title { margin: 0 0 10px; padding: 0; border: 0; font-size: 17px; font-weight: 600; color: var(--pp-text); }
.bq-pp-report .bq-pp-cover-meta { margin: 0; font-size: 13px; color: var(--pp-muted); }
.bq-pp-report .bq-pp-cover-notes { margin: 18px 0 0; max-width: 760px; padding: 12px 16px; border-left: 3px solid var(--pp-accent); background: var(--pp-tint); font-size: 13px; line-height: 1.65; }
.bq-pp-report .bq-pp-cover-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 24px; font-size: 12px; color: var(--pp-muted); }
.bq-pp-report .bq-pp-cover-foot strong { color: var(--pp-ink); }

.bq-pp-report .bq-pp-rsec { padding: 22px 0 8px; border-bottom: 1px solid var(--pp-line-mid); }
.bq-pp-report .bq-pp-rsec:last-child { border-bottom: 0; }
.bq-pp-report .bq-pp-rhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 14px; }
.bq-pp-report .bq-pp-rhead h2 { margin: 0; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--pp-accent); font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--pp-ink); line-height: 1.25; }
.bq-pp-report .bq-pp-rmeta { font-size: 11.5px; color: var(--pp-faint); }
.bq-pp-report .bq-pp-h3 { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }
.bq-pp-report .bq-pp-rsec .bq-pp-h3:first-child, .bq-pp-report .bq-pp-two > div > .bq-pp-h3:first-child, .bq-pp-report .bq-pp-cut > .bq-pp-h3:first-child { margin-top: 0; }
.bq-pp-report .bq-pp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.bq-pp-report .bq-pp-two--top { margin-top: 6px; }
.bq-pp-report .bq-pp-t { min-width: 0; }
.bq-pp-report .bq-pp-t tr.is-total th, .bq-pp-report .bq-pp-t tr.is-total td { font-weight: 700; color: var(--pp-ink); background: var(--pp-tint); }
.bq-pp-report .bq-pp-t td.is-up, .bq-pp-report .bq-pp-t td .is-up { color: var(--pp-green); font-weight: 600; }
.bq-pp-report .bq-pp-t td.is-down, .bq-pp-report .bq-pp-t td .is-down { color: var(--pp-red); font-weight: 600; }
.bq-pp-report .bq-pp-t td .bq-pp-nm { text-align: right; }
.bq-pp-report .bq-pp-t td:last-child { white-space: normal; }
.bq-pp-report .bq-pp-two .bq-pp-t td:last-child { min-width: 110px; }
.bq-pp-report .bq-pp-t--perf thead th.bq-pp-grp { text-align: center; border-bottom: 1px solid var(--pp-line); color: var(--pp-muted); }
.bq-pp-report .bq-pp-t--perf thead tr:nth-child(2) th { position: static; }
.bq-pp-report .bq-pp-t--perf td:nth-child(3n+2) { border-left: 1px solid var(--pp-line); }
.bq-pp-report .bq-pp-thl { font-size: 9px; }
.bq-pp-report .bq-pp-t sup { color: var(--pp-amber); font-weight: 700; }
.bq-pp-report .bq-pp-sw, .bq-pp .bq-pp-sw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; flex: none; }
.bq-pp-report .bq-pp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 11.5px; color: var(--pp-muted); }
.bq-pp-report .bq-pp-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.bq-pp-report .bq-pp-plot { position: relative; height: 230px; margin: 0 0 14px; }
.bq-pp-report .bq-pp-plot.is-tall { height: 290px; }
.bq-pp-report .bq-pp-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 12px; color: var(--pp-muted); }
.bq-pp-report .bq-pp-facts b { color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.bq-pp-report .bq-pp-facts--stack { flex-direction: column; }

/* Report KPI tiles: the io grid, dividers only. */
.bq-pp-report .bq-pp-kpis5, .bq-pp-report .bq-pp-kpis3 { display: grid; margin: 0 0 8px; padding: 4px 0 14px; border-bottom: 1px solid var(--pp-line); }
.bq-pp-report .bq-pp-kpis5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bq-pp-report .bq-pp-kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.bq-pp-report .bq-pp-kpi { padding: 0 16px; border-left: 1px solid var(--pp-line); min-width: 0; }
.bq-pp-report .bq-pp-kpi:first-child { border-left: 0; padding-left: 0; }
.bq-pp-report .bq-pp-kpi.is-current .bq-pp-kpi-l::before, .bq-pp-report .bq-pp-kpi.is-proposed .bq-pp-kpi-l::before, .bq-pp-report .bq-pp-kpi.is-benchmark .bq-pp-kpi-l::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; }
.bq-pp-report .bq-pp-kpi.is-current .bq-pp-kpi-l::before { background: var(--pp-cur); }
.bq-pp-report .bq-pp-kpi.is-proposed .bq-pp-kpi-l::before { background: var(--pp-prop); }
.bq-pp-report .bq-pp-kpi.is-benchmark .bq-pp-kpi-l::before { background: var(--pp-bench); }
.bq-pp-report .bq-pp-kpi-l { font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }
.bq-pp-report .bq-pp-kpi-v { margin: 8px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--pp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bq-pp-report .bq-pp-kpi-s { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--pp-faint); }
.bq-pp-report .bq-pp-kpi-s strong { color: var(--pp-ink); }
.bq-pp-report .bq-pp-arrow { margin: 0 5px; color: var(--pp-faint); font-weight: 400; }

/* Talking points: the io bullet list, with the topic as a micro-label. */
.bq-pp-report .bq-pp-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.bq-pp-report .bq-pp-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; padding: 10px 0; border-bottom: 1px solid var(--pp-line); }
.bq-pp-report .bq-pp-points li::before { content: ""; grid-row: 1 / span 2; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #b3c1cf; }
.bq-pp-report .bq-pp-points li.is-up::before { background: var(--pp-green); }
.bq-pp-report .bq-pp-points li.is-down::before { background: var(--pp-red); }
.bq-pp-report .bq-pp-points p { margin: 3px 0 0; font-size: 13px; line-height: 1.6; color: var(--pp-text); }
.bq-pp-report .bq-pp-topic { font-size: 9.5px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--pp-faint); }

/* Risk scale */
.bq-pp-report .bq-pp-scale { margin: 34px 4px 18px; }
.bq-pp-report .bq-pp-scale-track { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(79, 157, 105, .35) 0%, rgba(230, 196, 84, .40) 50%, rgba(207, 77, 77, .35) 100%); }
.bq-pp-report .bq-pp-scale-band { position: absolute; top: -7px; bottom: -7px; border: 1.5px dashed var(--pp-muted); border-radius: 5px; background: rgba(11, 31, 46, .03); }
.bq-pp-report .bq-pp-scale-band em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 26px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--pp-muted); white-space: nowrap; }
.bq-pp-report .bq-pp-scale-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c); }
.bq-pp-report .bq-pp-scale-mark b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--pp-ink); }
.bq-pp-report .bq-pp-scale-mark em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; font-style: normal; font-size: 10.5px; color: var(--pp-muted); white-space: nowrap; }
.bq-pp-report .bq-pp-scale-ends { display: flex; justify-content: space-between; margin-top: 46px; font-size: 10.5px; color: var(--pp-faint); }

/* Allocation bars */
.bq-pp-report .bq-pp-cmp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--pp-line); }
.bq-pp-report .bq-pp-cmp-row:last-child { border-bottom: 0; }
.bq-pp-report .bq-pp-cmp-l { font-size: 12px; color: var(--pp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-pp-report .bq-pp-cmp-bars { display: flex; flex-direction: column; gap: 2px; }
.bq-pp-report .bq-pp-cmp-bar { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; align-items: center; }
.bq-pp-report .bq-pp-cmp-bar i { display: block; height: 6px; border-radius: 0 3px 3px 0; min-width: 1px; transform-origin: left center; animation: bq-pp-grow .62s ease-out both; }
.bq-pp-report .bq-pp-cmp-bar b { font-size: 10.5px; font-weight: 600; color: var(--pp-muted); text-align: right; font-variant-numeric: tabular-nums; }
/* The bars fill left to right too, like the charts. */
@keyframes bq-pp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bq-pp-report .bq-pp-cmp-bar i { animation: none; } }

.bq-pp-report .bq-pp-buys { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-pp-report .bq-pp-buys span { display: inline-flex; gap: 6px; padding: 4px 9px; border: 1px solid var(--pp-line-mid); border-radius: 4px; background: var(--pp-tint); font-size: 12px; color: var(--pp-text); font-variant-numeric: tabular-nums; }
.bq-pp-report .bq-pp-buys strong { color: var(--pp-blue); }
.bq-pp-report .bq-pp-disc { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--pp-line-mid); border-radius: 5px; background: var(--pp-tint); font-size: 12px; line-height: 1.6; }

/* ── Dialogs, toast, type-ahead ──────────────────────────────────────── */
.bq-pp .bq-pp-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 20px 22px; border: 1px solid var(--pp-frame); border-radius: 8px; box-shadow: 0 16px 40px rgba(11, 31, 46, .16); color: var(--pp-text); box-sizing: border-box; }
.bq-pp .bq-pp-dialog::backdrop { background: rgba(11, 31, 46, .28); }
.bq-pp .bq-pp-dialog h3 { margin: 0 0 8px; padding-bottom: 11px; border-bottom: 1px solid var(--pp-line-mid); font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--pp-ink); }
.bq-pp .bq-pp-dialog p { font-size: 13px; line-height: 1.6; margin: 10px 0 12px; }
.bq-pp .bq-pp-dialog code { font-size: 12px; background: var(--pp-tint-2); padding: 1px 5px; border-radius: 3px; }
.bq-pp .bq-pp-dialog textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.bq-pp .bq-pp-dlg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.bq-pp .bq-pp-file { position: relative; overflow: hidden; }
.bq-pp .bq-pp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bq-pp .bq-pp-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.bq-pp .bq-pp-check input { accent-color: var(--pp-blue-mid); }
.bq-pp .bq-pp-dlg-msg { min-height: 1em; font-size: 12.5px !important; color: var(--pp-muted); margin: 6px 0 !important; }
.bq-pp .bq-pp-dlg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pp-line); }
.bq-pp .bq-pp-dlg-foot .bq-pp-linkbtn { margin-right: auto; color: var(--pp-red); }
.bq-pp .bq-pp-sharebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bq-pp .bq-pp-sharebox input { flex: 1 1 260px; }
.bq-pp .bq-pp-views { flex: 1 0 100%; margin: 4px 0 0 !important; font-size: 12px !important; color: var(--pp-muted); }
/* A white card, not a dark slab. */
.bq-pp .bq-pp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100000; padding: 10px 16px 10px 14px; border: 1px solid var(--pp-frame); border-left: 3px solid var(--pp-green); border-radius: 6px; background: #fff; color: var(--pp-ink); font-size: 13px; box-shadow: 0 8px 24px rgba(11, 31, 46, .14); max-width: calc(100vw - 32px); }
.bq-pp .bq-pp-toast.is-bad { border-left-color: var(--pp-red); }
.bq-pp-suggest { position: absolute; z-index: 100001; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #dfe6ed; border-radius: 6px; box-shadow: 0 10px 28px rgba(11, 31, 46, .12); max-width: calc(100vw - 32px); box-sizing: border-box; }
.bq-pp-suggest li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; }
.bq-pp-suggest li:hover, .bq-pp-suggest li.is-active { background: #f1f6fa; }
.bq-pp-suggest strong { color: #00529b; }
.bq-pp-suggest span { color: #37485a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-pp-suggest em { font-style: normal; font-size: 10.5px; color: #97a4b2; }

/* Share view */
.bq-pp .bq-pp-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 1080px; margin: 0 auto 12px; font-size: 13px; color: var(--pp-muted); }
.bq-pp .bq-pp-viewbar strong { color: var(--pp-ink); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .bq-pp .bq-pp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .bq-pp .bq-pp-kt:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
    .bq-pp .bq-pp-kt:nth-child(n + 4) { padding-top: 14px; border-top: 1px solid var(--pp-line); }
    .bq-pp .bq-pp-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bq-pp-report .bq-pp-kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .bq-pp-report .bq-pp-kpis5 .bq-pp-kpi:nth-child(4) { border-left: 0; padding-left: 0; }
    .bq-pp .bq-pp-reportlayout { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .bq-pp .bq-pp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp .bq-pp-features li:nth-child(n) { border-left: 1px solid var(--pp-line); padding-left: 16px; padding-top: 16px; border-bottom: 1px solid var(--pp-line); }
    .bq-pp .bq-pp-features li:nth-child(odd) { border-left: 0; padding-left: 0; }
    .bq-pp .bq-pp-features li:nth-child(-n + 2) { padding-top: 4px; }
    .bq-pp .bq-pp-features li:nth-last-child(-n + 2) { border-bottom: 0; }
    .bq-pp .bq-pp-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp .bq-pp-grid, .bq-pp-report .bq-pp-two, .bq-pp-report .bq-pp-points { grid-template-columns: minmax(0, 1fr); }
    .bq-pp .bq-pp-reportlayout { grid-template-columns: minmax(0, 1fr); }
    .bq-pp .bq-pp-reportlayout > .bq-pp-reportopts.bq-section { position: relative; top: auto; max-height: none; }
    .bq-pp .bq-pp-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp .bq-pp-step-t em { display: none; }
}
@media (max-width: 640px) {
    .bq-pp .bq-section { padding: 16px; }
    .bq-pp .bq-pp-hero { padding: 18px 16px; }
    .bq-pp .bq-pp-h1 { font-size: 22px; }
    .bq-pp .bq-pp-features, .bq-pp .bq-pp-how, .bq-pp .bq-pp-models { grid-template-columns: minmax(0, 1fr); }
    .bq-pp .bq-pp-features li:nth-child(n) { border-left: 0; padding-left: 0; padding-top: 12px; border-bottom: 1px solid var(--pp-line); }
    .bq-pp .bq-pp-features li:first-child { padding-top: 0; }
    .bq-pp .bq-pp-features li:last-child { border-bottom: 0; }
    .bq-pp .bq-pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp .bq-pp-kt:nth-child(n) { border-left: 0; padding-left: 0; padding-top: 12px; border-top: 1px solid var(--pp-line); }
    .bq-pp .bq-pp-kt:nth-child(even) { border-left: 1px solid var(--pp-line); padding-left: 14px; }
    .bq-pp .bq-pp-kt:nth-child(-n + 2) { border-top: 0; padding-top: 2px; }
    .bq-pp .bq-pp-kt-v { font-size: 17px; }
    .bq-pp .bq-pp-topbar { padding: 14px 14px 10px; }
    .bq-pp input.bq-pp-name { font-size: 18px; }
    .bq-pp .bq-pp-title-row { flex-wrap: wrap; }
    .bq-pp .bq-pp-actions { width: 100%; }
    .bq-pp .bq-pp-actions .bq-pp-btn { flex: 1 1 auto; }
    .bq-pp .bq-pp-actions .bq-pp-field-shell { flex: 1 1 100%; }
    .bq-pp .bq-pp-actions .bq-pp-field-shell select { flex: 1; }
    .bq-pp .bq-pp-steps { padding: 0 4px; }
    .bq-pp .bq-pp-steps button { padding: 10px 8px 11px; gap: 6px; }
    .bq-pp .bq-pp-step-t strong { font-size: 13px; }
    .bq-pp .bq-pp-form { grid-template-columns: minmax(0, 1fr); }
    .bq-pp-report { padding: 4px 14px 18px; }
    .bq-pp-report .bq-pp-kpis5, .bq-pp-report .bq-pp-kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp-report .bq-pp-kpi:nth-child(n) { border-left: 0; padding-left: 0; }
    .bq-pp-report .bq-pp-kpi:nth-child(even) { border-left: 1px solid var(--pp-line); padding-left: 14px; }
    .bq-pp-report .bq-pp-kpi-v { font-size: 17px; }
    .bq-pp-report .bq-pp-cmp-row { grid-template-columns: 104px minmax(0, 1fr); }
    .bq-pp-report .bq-pp-cover-client { font-size: 21px; }
    .bq-pp-report .bq-pp-plot.is-tall { height: 240px; }
    .bq-pp-report .bq-pp-scale-mark em { display: none; }
    .bq-pp .bq-pp-toolbar .bq-pp-linkbtn { margin-left: 0; }
}

/* ── Print: the report and nothing else ──────────────────────────────── */
/* report.js moves #pp-report into #pp-print-root (a direct child of body)
   for the print and back after it, so everything else can be display:none
   and the pages hold the report only, with its live canvases. */
@media print {
    @page { margin: 14mm 12mm; }
    body.bq-pp-page > *:not(#pp-print-root) { display: none !important; }
    body.bq-pp-page { background: #fff !important; padding: 0 !important; margin: 0 !important; }
    #pp-print-root .bq-pp-report { border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }
    #pp-print-root .bq-pp-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bq-pp-report .bq-pp-cover { min-height: 88vh; border-bottom: 0; page-break-after: always; break-after: page; }
    .bq-pp-report .bq-pp-rhead, .bq-pp-report .bq-pp-plot, .bq-pp-report .bq-pp-kpi, .bq-pp-report .bq-pp-points li, .bq-pp-report .bq-pp-cmp-row, .bq-pp-report .bq-pp-t tr { break-inside: avoid; }
    .bq-pp-report .bq-pp-rhead { break-after: avoid; }
    .bq-pp-report .bq-pp-two, .bq-pp-report .bq-pp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-pp-report .bq-pp-kpis5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bq-pp-report .bq-pp-kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bq-pp-report .bq-pp-tablewrap { overflow: visible; border: 0; }
    .bq-pp-report .bq-pp-table thead th { position: static; }
    .bq-pp-report .bq-pp-cmp-bar i { animation: none; }
    .bq-pp-suggest, .bq-pp .bq-pp-toast { display: none !important; }
}


/* TOUCH — iOS ZOOM ON FOCUS (2026-10-26)
   Mobile Safari zooms the page when a focused control computes under 16px
   and never zooms back. Everything here that takes focus is 16px on a
   touch device; the resting look on desktop is untouched. Last in the file
   with !important on the one property, so no later or more specific rule
   can undercut it. Reasoning: company-KPI/css/styles.css. */
@media (pointer: coarse) {
    .bq-pp input[type="text"], .bq-pp input[type="number"], .bq-pp input[type="url"], .bq-pp input[type="date"],
    .bq-pp input[type="search"], .bq-pp input:not([type]), .bq-pp select, .bq-pp textarea, .bq-pp-suggest input {
        font-size: 16px !important;
    }
}

/* ── 1.2.0 — THE KPI DROPDOWN (includes/css/bq-dropdown.css) ──
   Every select is drawn by bq-dropdown; these only place it. In a stacked
   form field it fills the column, in the toolbar's labelled shell it takes
   the shell's remaining width, in a table row it is the compact size. */
.bq-pp .bq-pp-field > .bqdd,
.bq-pp .bq-pp-field > label > .bqdd { display: flex; width: 100%; }
.bq-pp .bq-pp-field-shell > .bqdd { min-width: 116px; }
.bq-pp .bq-pp-c-unit .bqdd { width: 104px; }
.bq-pp .bq-pp-c-unit .bqdd-btn,
.bq-pp .bq-pp-edit .bqdd-btn { height: 30px; font-size: 12px; }
@media (max-width: 640px) {
  .bq-pp .bq-pp-actions .bq-pp-field-shell > .bqdd { flex: 1; }
}