/* Portal brief — the public questionnaire (/portal-brief?t=…) and the scope view it produces, which the Sales
   Team Board card's "Portal brief" tab reuses. Every class is prefixed pb- (DESIGN.md §2).

   Theme (2026-10-26, owner asked for "white, modern, different"): pure white, hairline borders instead of
   shadows, near-black ink with one electric-blue accent, Plus Jakarta Sans. Lettered single-choice rows
   (press A, B, C…), a tile grid for systems. */
.pb-page {
    --pb-ink: #0b0f19; --pb-text: #2a3140; --pb-muted: #667085; --pb-faint: #98a2b3;
    --pb-line: #e6e8ee; --pb-line-strong: #cfd4dc; --pb-tint: #f6f8fb;
    --pb-accent: #2563eb; --pb-accent-tint: #eff4ff; --pb-accent-ring: rgba(37, 99, 235, .18);
    margin: 0; min-height: 100vh; background: #fff; color: var(--pb-text);
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.pb-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 14px max(20px, calc(50% - 340px)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pb-line); }
.pb-brand { font-weight: 800; color: var(--pb-ink); font-size: 15px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.pb-brand i { width: 28px; height: 28px; border-radius: 8px; background: var(--pb-ink); color: #fff; display: inline-flex; align-items: center;
              justify-content: center; font-style: normal; font-size: 13px; }
.pb-brand span { color: #d92d27; }
.pb-saved { font-size: 12.5px; color: var(--pb-faint); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pb-saved:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12b76a; }
.pb-wrap { max-width: 680px; margin: 0 auto; padding: 22px 20px 120px; }

/* ── Progress ── */
.pb-progress { margin: 0 0 22px; }
.pb-progress-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--pb-faint); margin-bottom: 9px; }
.pb-progress-row b { color: var(--pb-ink); font-size: 13px; }
.pb-bar { height: 4px; background: var(--pb-line); border-radius: 999px; overflow: hidden; }
.pb-bar i { display: block; height: 100%; background: var(--pb-accent); border-radius: 999px; transition: width .35s ease; }

/* ── Question card ── */
.pb-card { background: #fff; border: 1px solid var(--pb-line); border-radius: 22px; padding: 34px 32px 28px; animation: pb-in .28s ease both; }
@media (max-width: 520px) { .pb-card { padding: 26px 18px 22px; border-radius: 18px; } }
@keyframes pb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pb-card { animation: none; } .pb-bar i { transition: none; } }
.pb-section { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pb-accent); background: var(--pb-accent-tint);
              padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.pb-q { font-size: 28px; font-weight: 800; color: var(--pb-ink); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.025em; }
@media (max-width: 520px) { .pb-q { font-size: 23px; } }
.pb-sub { font-size: 15px; color: var(--pb-muted); margin: 0 0 22px; }

/* Single choice: lettered rows (press the letter to pick) */
.pb-opts { display: grid; gap: 9px; }
.pb-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1.5px solid var(--pb-line); background: #fff;
          border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 16px; font-weight: 600; color: var(--pb-text); cursor: pointer;
          transition: border-color .12s, background .12s, transform .08s, box-shadow .12s; }
.pb-opt:hover { border-color: var(--pb-line-strong); background: var(--pb-tint); }
.pb-opt:active { transform: scale(.985); }
.pb-opt:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--pb-accent-ring); border-color: var(--pb-accent); }
.pb-opt.is-on { border-color: var(--pb-accent); background: var(--pb-accent-tint); color: var(--pb-ink); }
.pb-key { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; border: 1.5px solid var(--pb-line-strong); display: inline-flex; align-items: center;
          justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--pb-muted); background: #fff; }
.pb-opt.is-on .pb-key { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.pb-opt .pb-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--pb-line-strong); flex: 0 0 20px; display: inline-flex;
                   align-items: center; justify-content: center; font-size: 11px; color: transparent; background: #fff; }
.pb-opt.is-on .pb-tick { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.pb-opt[disabled] { opacity: .4; cursor: not-allowed; }

/* Multi choice: compact chips */
.pb-opts.is-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-opts.is-chips .pb-opt { width: auto; padding: 9px 13px; font-size: 14.5px; border-radius: 10px; gap: 9px; }

/* Systems: grouped tile grid with logos; picked shows a tick badge */
.pb-group { margin-bottom: 18px; }
.pb-group-label { font-size: 12px; font-weight: 700; color: var(--pb-faint); margin: 0 0 8px 2px; text-transform: uppercase; letter-spacing: .07em; }
.pb-opts.is-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pb-opts.is-tiles .pb-opt { padding: 11px 12px; font-size: 14.5px; border-radius: 12px; gap: 10px; min-height: 48px; }
.pb-logo { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; border-radius: 5px; }
/* Colourful icons: --ic / --icbg come from PB_mark (PB_iconColour, one colour per option, set inline). */
.pb-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: var(--icbg, var(--pb-tint)); color: var(--ic, #475467); display: inline-flex;
          align-items: center; justify-content: center; font-size: 14px; }
.pb-opt.is-on .pb-ico { background: #fff; color: var(--ic, var(--pb-accent)); }
.pb-opt .pb-lbl { min-width: 0; line-height: 1.3; }
.pb-scope-tags .pb-ico { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; border-radius: 5px; margin-right: 6px; vertical-align: -3px; background: transparent; color: var(--ic, #475467); }
.pb-opts.is-tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 520px) {                       /* phones: two tiles a row, icon BESIDE the words — half the height */
    .pb-opts.is-tiles { grid-template-columns: 1fr 1fr; gap: 7px; }
    .pb-opts.is-tiles .pb-opt { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; min-height: 44px; font-size: 13.5px; }
}
.pb-opt.has-logo .pb-tick, .pb-opt.is-other-chip .pb-tick { display: none; }
.pb-opt.is-other-chip { border-style: dashed; color: var(--pb-muted); }
.pb-opt.is-other-chip .pb-plus { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: var(--pb-tint); display: inline-flex; align-items: center;
                                  justify-content: center; font-weight: 800; color: var(--pb-muted); }
.pb-opt.is-other-chip.is-on { border-style: solid; color: var(--pb-ink); }
.pb-opt.has-logo.is-on::after, .pb-opt.is-other-chip.is-on::after {
    content: "\2713"; position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; background: var(--pb-accent);
    color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2.5px #fff; }
.pb-group-other { margin-top: 8px; }
.pb-lh h4 { display: flex; align-items: center; gap: 9px; }
.pb-scope-tags .pb-logo { width: 16px; height: 16px; flex-basis: 16px; vertical-align: -3px; margin-right: 6px; }
.pb-cap { font-size: 13px; color: var(--pb-faint); font-weight: 600; margin-top: 10px; }

/* Text inputs (contact, Other, details) */
.pb-field { margin-bottom: 16px; }
.pb-field label { display: block; font-size: 13px; font-weight: 700; color: var(--pb-ink); margin-bottom: 7px; }
.pb-input, .pb-text { width: 100%; max-width: none; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--pb-line); border-radius: 12px;
                      font: inherit; font-size: 16px; color: var(--pb-ink); background: #fff; transition: border-color .12s, box-shadow .12s; }
.pb-input::placeholder, .pb-text::placeholder { color: var(--pb-faint); }
.pb-text { min-height: 90px; resize: vertical; line-height: 1.5; }
.pb-input:hover, .pb-text:hover { border-color: var(--pb-line-strong); }
.pb-input:focus, .pb-text:focus { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 4px var(--pb-accent-ring); }
.pb-other { margin-top: 10px; }
.pb-details-toggle { margin-top: 18px; background: none; border: 0; padding: 4px 0; color: var(--pb-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pb-details-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-details { margin-top: 8px; }

/* Slider */
.pb-slider-val { font-size: 52px; font-weight: 800; color: var(--pb-ink); letter-spacing: -.035em; line-height: 1; }
.pb-slider-val small { font-size: 16px; font-weight: 600; color: var(--pb-muted); margin-left: 8px; letter-spacing: 0; }
.pb-range { width: 100%; margin: 22px 0 6px; accent-color: var(--pb-accent); height: 28px; }
.pb-range-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--pb-faint); font-weight: 600; }

/* Love / hate */
.pb-lh { border: 1px solid var(--pb-line); border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 10px; }
.pb-lh h4 { margin: 0 0 10px; font-size: 15.5px; font-weight: 800; color: var(--pb-ink); }
.pb-lh .pb-opt.is-love { border-color: #12b76a; background: #ecfdf3; color: #05603a; }
.pb-lh .pb-opt.is-hate { border-color: #f04438; background: #fef3f2; color: #912018; text-decoration: line-through; text-decoration-thickness: 2px; }
.pb-lh-key { display: flex; gap: 18px; font-size: 13px; font-weight: 600; color: var(--pb-muted); margin: -10px 0 16px; }

/* Nav */
.pb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--pb-line); }
.pb-back { background: none; border: 0; color: var(--pb-muted); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; padding: 10px 4px; }
.pb-back:hover { color: var(--pb-ink); }
.pb-next { margin-left: auto; background: var(--pb-ink); color: #fff; border: 0; border-radius: 12px; padding: 13px 22px; font: inherit;
           font-size: 15.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .12s, transform .08s; }
.pb-next:hover { background: #1d2433; }
.pb-next:active { transform: scale(.98); }
.pb-next[disabled] { opacity: .35; cursor: not-allowed; }
.pb-next .pb-enter { font-size: 12px; font-weight: 600; opacity: .55; margin-left: 2px; }
@media (hover: none) { .pb-next .pb-enter { display: none; } }   /* no keyboard hint on phones */
.pb-next.is-go { background: var(--pb-accent); } .pb-next.is-go:hover { background: #1d4ed8; }
.pb-hint { font-size: 12.5px; color: var(--pb-faint); text-align: right; margin-top: 8px; }

/* Welcome / done */
.pb-hero { text-align: center; padding: 18px 6px 8px; }
.pb-hero h1 { font-size: 34px; font-weight: 800; color: var(--pb-ink); margin: 6px 0 12px; letter-spacing: -.035em; line-height: 1.15; }
@media (max-width: 520px) { .pb-hero h1 { font-size: 27px; } }
.pb-hero p { font-size: 16px; color: var(--pb-muted); margin: 0 auto 8px; max-width: 470px; line-height: 1.55; }
.pb-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px 0 26px; }
.pb-pills span { border: 1px solid var(--pb-line); color: var(--pb-text); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.pb-hero .pb-next { margin: 0 auto; }
.pb-done-ico { width: 60px; height: 60px; border-radius: 50%; background: #ecfdf3; color: #12b76a; font-size: 28px; font-weight: 800; display: inline-flex;
               align-items: center; justify-content: center; box-shadow: 0 0 0 8px #f6fef9; }
.pb-state { text-align: center; padding: 40px 20px; }

/* ── Sheet layout (pbs-): one compact page with a section nav, for briefs our staff fill in (Leads Reacher) ── */
.pb-is-sheet .pb-top { padding: 12px 24px; }
.pb-is-sheet .pb-wrap { max-width: 1180px; padding: 0 24px 60px; }
.pbs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.pbs-nav { position: sticky; top: 57px; padding: 20px 0; max-height: calc(100vh - 57px); box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; }
.pbs-navhead { padding: 0 10px 14px; border-bottom: 1px solid var(--pb-line); margin-bottom: 10px; }
.pbs-navhead b { display: block; color: var(--pb-ink); font-size: 14px; line-height: 1.3; }
.pbs-navhead span { font-size: 12.5px; color: var(--pb-muted); }
.pbs-links { display: flex; flex-direction: column; gap: 1px; }
.pbs-link { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px;
            font: inherit; font-size: 13.5px; font-weight: 600; color: var(--pb-text); cursor: pointer; }
.pbs-link:hover { background: var(--pb-tint); }
.pbs-link.is-active { background: var(--pb-accent-tint); color: var(--pb-ink); font-weight: 700; }
.pbs-link span:nth-child(2) { flex: 1 1 auto; }
.pbs-link small { font-size: 11.5px; color: var(--pb-faint); font-weight: 700; }
.pbs-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--pb-line-strong); flex: 0 0 8px; }
.pbs-dot.is-part { border-color: var(--pb-accent); background: linear-gradient(90deg, var(--pb-accent) 50%, transparent 50%); }
.pbs-dot.is-done { border-color: #12b76a; background: #12b76a; }
.pbs-dot.is-scope { border-color: var(--pb-ink); background: var(--pb-ink); border-radius: 2px; }
.pbs-navfoot { margin-top: 16px; padding: 14px 10px 0; border-top: 1px solid var(--pb-line); }
.pbs-prog { font-size: 12.5px; color: var(--pb-muted); font-weight: 600; }
.pbs-submit { width: 100%; justify-content: center; margin-top: 10px; padding: 10px 14px; font-size: 14px; }

.pbs-main { padding: 20px 0 0; min-width: 0; }
.pbs-sec { border: 1px solid var(--pb-line); border-radius: 14px; padding: 4px 18px; margin-bottom: 14px; scroll-margin-top: 76px; }
.pbs-sec h2 { margin: 0 -18px; padding: 12px 18px; font-size: 13px; font-weight: 800; color: var(--pb-ink); text-transform: uppercase; letter-spacing: .06em;
              border-bottom: 1px solid var(--pb-line); display: flex; align-items: center; gap: 8px; }
.pbs-team { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 700; background: #fef2f2; color: #991b1b; border-radius: 999px; padding: 2px 8px; }
.pbs-q { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid #f0f2f5; }
.pbs-sec h2 + .pbs-q { border-top: 0; }
.pbs-ql { font-size: 13px; font-weight: 700; color: var(--pb-ink); padding-top: 6px; line-height: 1.35; }
.pbs-ql small { display: block; font-weight: 600; color: var(--pb-faint); font-size: 11.5px; }
.pbs-q.is-done .pbs-ql::before { content: "\2713"; color: #12b76a; font-weight: 900; margin-right: 6px; }
.pbs-qa { min-width: 0; }
.pbs-q.is-solo { grid-template-columns: minmax(0, 1fr); padding-top: 14px; } .pbs-q.is-solo .pbs-ql { display: none; }
.pbs .pb-opts.is-chips { gap: 6px; align-items: center; }
.pbs .pb-opts.is-chips .pb-opt { padding: 5px 10px; font-size: 13px; border-radius: 8px; gap: 7px; border-width: 1px; }
.pbs .pb-opt .pb-ico { width: 18px; height: 18px; flex-basis: 18px; font-size: 10.5px; border-radius: 5px; background: transparent; color: var(--ic, #475467); }
.pbs .pb-opt .pb-logo { width: 16px; height: 16px; flex-basis: 16px; }
.pbs .pb-opt .pb-tick { display: none; }
.pbs .pb-opt.is-on { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.pbs .pb-opt.is-on .pb-ico { color: #fff; background: transparent; }
.pbs .pb-opt.has-logo.is-on::after, .pbs .pb-opt.is-other-chip.is-on::after { display: none; }
.pbs .pb-opt.is-other-chip .pb-plus { width: 16px; height: 16px; flex-basis: 16px; font-size: 12px; background: transparent; }
.pbs .pb-opt.is-other-chip.is-on .pb-plus { color: #fff; }
.pbs-group { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.pbs-group + .pbs-group { margin-top: 4px; }
.pbs-glabel { flex: 0 0 96px; font-size: 11.5px; font-weight: 700; color: var(--pb-faint); text-transform: uppercase; letter-spacing: .05em; padding-top: 6px; }
.pbs-group .pb-opts { flex: 1 1 auto; min-width: 0; }
.pbs .pb-input, .pbs .pb-text { padding: 7px 10px; font-size: 14px; border-width: 1px; border-radius: 8px; }
.pbs .pb-input:focus, .pbs .pb-text:focus { box-shadow: 0 0 0 3px var(--pb-accent-ring); }
.pbs .pb-text { min-height: 64px; }
.pbs .pbs-other { width: 180px; }
.pbs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pbs-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pbs-f > span { font-size: 11.5px; font-weight: 700; color: var(--pb-muted); }
.pbs-f.is-wide { grid-column: 1 / -1; }
.pbs-f.is-short { flex-direction: row; align-items: center; gap: 8px; } .pbs-f.is-short .pb-input { width: 90px; }
.pbs-note-toggle { margin-top: 6px; background: none; border: 0; padding: 2px 0; color: var(--pb-accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pbs-note { margin-top: 8px; }
.pbs-bar { position: sticky; bottom: 0; display: none; align-items: center; gap: 12px; padding: 12px 0; background: rgba(255, 255, 255, .95); border-top: 1px solid var(--pb-line); }
.pbs-bar .pb-hint { margin: 0; flex: 1 1 auto; color: #b42318; text-align: left; }
.pbs-bar .pb-next { padding: 10px 18px; font-size: 14px; }
.pbs .pb-staffnote { margin-top: 0; }

/* Desktop / mobile view switch (top bar) */
.pb-top .pb-saved { margin-left: auto; }
.pb-viewbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--pb-line); background: #fff; color: var(--pb-text); border-radius: 999px;
              padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pb-viewbtn:hover { border-color: var(--pb-line-strong); color: var(--pb-ink); }
.pb-viewbtn i { color: var(--pb-accent); }
@media (max-width: 520px) {                       /* phones: brand, save dot and the switch on one line */
    .pb-top, .pb-is-sheet .pb-top { padding: 11px 14px; gap: 8px; }
    .pb-brand { font-size: 14px; }
    .pb-saved { font-size: 0; }                    /* keep only the green "saved" dot */
    .pb-viewbtn { padding: 5px 10px; font-size: 12px; }
}

/* Keep & lose in the desktop view */
.pbs-lh-key { font-size: 12px; font-weight: 600; color: var(--pb-muted); margin-bottom: 6px; }
.pbs-glabel.pbs-sys { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--pb-ink); }
.pbs .pb-opt.is-love { border-color: #12b76a; background: #ecfdf3; color: #05603a; }
.pbs .pb-opt.is-hate { border-color: #f04438; background: #fef3f2; color: #912018; text-decoration: line-through; }
.pbs-empty { font-size: 13px; color: var(--pb-faint); font-style: italic; padding-top: 6px; }
.pbs-thanks { background: #ecfdf3; border: 1px solid #abefc6; color: #05603a; border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }

/* Prefill with AI (first section, staff only) */
.pbs-ai { border-color: #c7d7fe; background: linear-gradient(180deg, #f5f8ff, #fff 120px); }
.pbs-ai h2 i, .pbs-ai-ico { color: var(--pb-accent); }
.pbs-ai-ico { width: 8px; flex: 0 0 8px; font-size: 11px; text-align: center; }
.pbs-ai-body { padding: 12px 0 16px; }
.pbs-ai-sub { margin: 0 0 8px; font-size: 13px; color: var(--pb-muted); }
.pbs .pbs-ai-notes { min-height: 120px; background: #fff; }
.pbs-ai-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pbs-ai-row .pb-next { margin-left: 0; padding: 9px 16px; font-size: 14px; gap: 8px; }
.pbs-ai-msg { font-size: 13px; font-weight: 600; color: var(--pb-text); }
.pbs-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--pb-line); }
.pbs-missing b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #b54708; margin-right: 4px; }
.pbs-missing.is-none { color: #067647; font-size: 13px; font-weight: 700; gap: 6px; }
.pbs-miss { border: 1px dashed #f5b971; background: #fffaf0; color: #93370d; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pbs-miss:hover { border-style: solid; }
.pbs-ai-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--pb-accent); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; margin-left: 4px; }
.pbs-q.is-solo .pbs-qa > .pbs-ai-tag { margin: 0 0 6px; }
.pbs-q.is-ai { background: linear-gradient(90deg, #f5f8ff, transparent 60%); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.pbs-q.is-flash { animation: pbs-flash 1.4s ease; }
@keyframes pbs-flash { 0%, 40% { background: #fff4d6; } 100% { background: transparent; } }
@media (max-width: 640px) { .pbs-q.is-ai { margin: 0 -12px; padding-left: 12px; padding-right: 12px; } }

/* ── Phones: one screen, no scrolling (owner, 2026-10-28) ─────────────────────────────────────────────────────────
   With one category per screen (portal-brief.js stepIds), what's left is spacing: tighter card, smaller heading,
   shorter rows and a closer nav, so a question plus its Next button fits a phone without scrolling. */
@media (max-width: 520px) {
    .pb-wrap { padding: 10px 12px 20px; }
    .pb-progress { margin-bottom: 10px; }
    .pb-progress-row { margin-bottom: 6px; }
    .pb-card { padding: 16px 14px 14px; border-radius: 16px; }
    .pb-section { margin-bottom: 8px; padding: 3px 9px; font-size: 11.5px; }
    .pb-q { font-size: 20px; margin-bottom: 4px; }
    .pb-sub { font-size: 13.5px; margin-bottom: 12px; }
    .pb-opts { gap: 7px; }
    .pb-opt { padding: 10px 12px; font-size: 15px; }
    .pb-key { width: 24px; height: 24px; flex-basis: 24px; }
    .pb-opts.is-chips .pb-opt { padding: 8px 11px; font-size: 13.5px; }
    .pb-ico { width: 26px; height: 26px; flex-basis: 26px; font-size: 12.5px; }
    .pb-group { margin-bottom: 10px; }
    .pb-group-label { margin-bottom: 6px; }
    .pb-field { margin-bottom: 10px; }
    .pb-field label { margin-bottom: 5px; }
    .pb-input { padding: 10px 12px; }
    .pb-details-toggle { margin-top: 8px; }
    .pb-nav { margin-top: 14px; padding-top: 12px; }
    .pb-hint { margin-top: 6px; }
    .pb-hero { padding: 6px 2px 4px; }
}

/* Ranked picks (time sinks): "1st", "2nd"… badge where the tick would be — the tap order is the priority */
.pb-opt.is-ranked::after { display: none; }
.pb-rank { position: absolute; top: -8px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
           background: var(--pb-accent); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center;
           justify-content: center; box-shadow: 0 0 0 2px #fff; }
.pb-opt.is-ranked .pb-tick { display: none; }

/* Systems: one-screen search picker (popular tiles + search + "Add …") */
.pb-search { position: relative; margin-top: 12px; }
.pb-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pb-faint); font-size: 14px; pointer-events: none; }
.pb-search .pb-input { padding-left: 38px; }
.pb-search-results { margin-top: 8px; }
.pb-search-results:empty { display: none; }
.pb-add-custom { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 14px; border: 1.5px dashed var(--pb-line-strong);
                 border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--pb-accent); cursor: pointer; }
.pb-add-custom span { font-size: 16px; }
.pb-add-custom:hover { border-color: var(--pb-accent); background: var(--pb-accent-tint); }
.pb-opt.is-custom { justify-content: space-between; }
.pb-opt .pb-x { margin-left: auto; font-size: 18px; line-height: 1; color: var(--pb-muted); }
.pb-opt.is-custom::after { display: none; }

/* Per-group pick count ("2 of 3") beside a group heading — multi questions with perGroup */
.pb-group-cap { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pb-faint); }

/* Desktop view: switching section slides the new one in from the side you're heading to */
.pbs-sec.pbs-in-next { animation: pbs-slide-next .32s cubic-bezier(.22, .8, .3, 1) both; }
.pbs-sec.pbs-in-prev { animation: pbs-slide-prev .32s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes pbs-slide-next { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes pbs-slide-prev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pbs-sec.pbs-in-next, .pbs-sec.pbs-in-prev { animation: none; } }
.pbs-main { overflow-x: clip; }   /* clip, not hidden: hidden makes a scroll container and un-sticks the bottom bar */

/* One section at a time (2026-10-28): previous / next under the section; the sidebar's error line */
.pbs-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 18px; }
.pbs-pager .pb-next, .pbs-pager .pb-back { padding: 9px 16px; font-size: 14px; }
.pbs-err { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #b42318; }
.pbs-err:empty { display: none; }

/* Phone: intl-tel-input (flag + searchable country list + dial code) wrapped round our .pb-input, both views */
.pb-phone .iti { display: block; width: 100%; }
.pb-phone .iti .pb-input { width: 100%; }
.iti__selected-country { border-radius: 12px 0 0 12px; }
.iti__selected-country:hover, .iti__selected-country:focus-visible { background: var(--pb-tint); }
.iti__selected-dial-code { font-weight: 600; color: var(--pb-ink); }
.pbs .iti__selected-country { border-radius: 8px 0 0 8px; }
/* The list is portalled to <body>, so it carries the page font and look itself. */
.iti--container, .iti__dropdown-content { font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif; }
.iti__dropdown-content { border: 1px solid #e6e8ee; border-radius: 12px; box-shadow: 0 12px 32px rgba(11, 15, 25, .14); overflow: hidden; }
.iti__search-input { padding: 10px 12px; border: 0; border-bottom: 1px solid #e6e8ee; font: inherit; font-size: 14px; max-width: none; width: 100%; box-sizing: border-box; }
.iti__search-input:focus { outline: none; }
.iti__country { padding: 8px 12px; font-size: 14px; }
.iti__country.iti__highlight { background: #eff4ff; }
.iti__dial-code { color: #667085; }
.pb-req { color: #d92d27; font-style: normal; font-weight: 700; }
/* Contact step on a public brief: "Confirm your mobile to continue", the confirmed line, and what's still needed */
.pb-nav .pb-next i { margin-right: 2px; }
.pb-err-line { text-align: right; color: #b42318; min-height: 0; }
.pb-err-line:empty { display: none; }
.pb-verified { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px 12px; border-radius: 10px;
               background: #ecfdf3; border: 1px solid #abefc6; color: #05603a; font-size: 13.5px; font-weight: 600; }

/* The SMS code popup (on <body>) */
.pb-mback { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 15, 25, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pb-modal { position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 28px 26px 22px; text-align: center;
            box-shadow: 0 24px 64px rgba(11, 15, 25, .28); font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif; color: var(--pb-text); }
.pb-mx { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--pb-faint); font-size: 17px; cursor: pointer; }
.pb-mx:hover { background: var(--pb-tint); color: var(--pb-ink); }
.pb-modal-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: var(--pb-accent-tint); color: var(--pb-accent);
                display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pb-modal h3 { margin: 0 0 6px; font-size: 20px; color: var(--pb-ink); }
.pb-modal p { margin: 0 0 16px; font-size: 14px; color: var(--pb-muted); line-height: 1.5; }
.pb-modal .pb-code { width: 100%; flex: none; font-size: 24px; letter-spacing: .45em; text-indent: .45em; padding: 12px; }
.pb-modal .pb-verify-msg { margin-top: 8px; min-height: 18px; }
.pb-modal-go { width: 100%; justify-content: center; margin: 12px 0 0; }
.pb-modal-links { margin-top: 14px; display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--pb-faint); }
.pb-modal-links button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--pb-accent); cursor: pointer; }
.pb-modal-links button:disabled { color: var(--pb-faint); cursor: default; }
.pb-phone-err { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #b42318; }
.pb-fine { font-size: 13px; margin-top: 4px; }

/* SMS code (public briefs) */
.pb-verify { border: 1px solid var(--pb-line); border-radius: 12px; padding: 14px 16px; background: var(--pb-tint); display: flex; flex-direction: column; gap: 10px; }
.pb-verify.is-ok { background: #ecfdf3; border-color: #abefc6; color: #05603a; font-weight: 600; flex-direction: row; align-items: center; gap: 8px; }
.pb-verify-to { font-size: 14px; color: var(--pb-text); }
.pb-verify-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-verify-row .pb-next, .pb-verify-row .pb-back { margin: 0; padding: 9px 16px; font-size: 14px; }
.pb-code { width: 160px; flex: 0 0 160px; letter-spacing: .3em; font-weight: 700; text-align: center; }
.pb-verify-msg { font-size: 13px; font-weight: 600; color: var(--pb-muted); }
.pb-verify-msg:empty { display: none; }
.pb-verify-msg.is-err { color: #b42318; }

@media (max-width: 900px) {                       /* nav becomes a scrolling strip under the top bar */
    .pbs { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pbs-bar { display: flex; }                   /* the side nav's Mark complete is hidden here */
    .pbs-links { min-width: 0; }
    .pbs-nav { min-width: 0; top: 53px; z-index: 4; padding: 8px 0; max-height: none; flex-direction: row; overflow: visible; background: #fff; border-bottom: 1px solid var(--pb-line);
               margin: 0 -24px; padding-left: 16px; padding-right: 16px; }
    .pbs-navhead, .pbs-navfoot { display: none; }
    .pbs-links { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .pbs-link { width: auto; white-space: nowrap; padding: 6px 10px; }
    .pbs-link small { display: none; }
}
@media (max-width: 640px) {
    .pb-is-sheet .pb-wrap { padding: 0 12px 40px; }
    .pbs-nav { margin: 0 -12px; }
    .pbs-sec { padding: 4px 12px; } .pbs-sec h2 { margin: 0 -12px; padding: 11px 12px; }
    .pbs-q { grid-template-columns: 1fr; gap: 6px; }
    .pbs-ql { padding-top: 0; }
    .pbs-group { flex-direction: column; gap: 4px; }
    .pbs-glabel { flex-basis: auto; padding-top: 0; }
    .pbs-grid { grid-template-columns: 1fr; }
}

/* ── Sales Team Board card: Client briefs tab (pbt-) ── */
#pbtPanel { padding: 4px 2px; }
.pbt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pbt-head h3 { margin: 0; font-size: 16px; color: #14162b; display: flex; align-items: center; gap: 8px; }
.pbt-head h3 i { color: #6d5efc; }
.pbt-intro { background: #f6f7fb; border: 1px dashed #c9cde0; border-radius: 14px; padding: 16px 18px; }
.pbt-intro p { margin: 0; color: #555d70; font-size: 14px; line-height: 1.55; }
.pbt-create { border: 1px solid #d8dceb; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fbfbfe; }
.pbt-create-title { font-weight: 800; color: #14162b; margin-bottom: 10px; font-size: 14px; }
.pbt-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pbt-type { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #d8dceb; border-radius: 10px; padding: 9px 13px; cursor: pointer;
            font-weight: 700; font-size: 13.5px; color: #2b3140; background: #fff; }
.pbt-type input { margin: 0; accent-color: #6d5efc; }
.pbt-type i { color: #6d5efc; }
.pbt-type:has(input:checked) { border-color: #6d5efc; background: #f3f1ff; }
.pbt-row { display: flex; gap: 8px; margin-top: 10px; }

.pbt-brief { border: 1px solid #e4e6f0; border-radius: 14px; margin-bottom: 10px; background: #fff; }
.pbt-brief.is-open { border-color: #c9cde0; box-shadow: 0 4px 16px rgba(20, 22, 60, .05); }
.pbt-brief-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.pbt-chev { color: #98a1b2; font-size: 12px; width: 12px; }
.pbt-type-ico { width: 30px; height: 30px; border-radius: 9px; background: #f3f1ff; color: #6d5efc; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.pbt-brief-title { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pbt-name { font-size: 14.5px; color: #14162b; }
.pbt-typename { font-size: 11.5px; font-weight: 700; color: #6a7285; background: #f1f3f7; border-radius: 999px; padding: 1px 8px; }
.pbt-meta { flex-basis: 100%; font-size: 12.5px; color: #6a7285; }
.pbt-rename { flex: 1 1 200px; padding: 6px 9px; }
.pbt-brief-body { padding: 0 14px 14px; }
.pbt-st { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pbt-st-none { background: #f1f3f7; color: #5b6275; } .pbt-st-prog { background: #fff4e0; color: #8a5a00; } .pbt-st-done { background: #dcfce7; color: #166534; }
.pbt-lk { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.pbt-lk-on { background: #eff4ff; color: #1d4ed8; } .pbt-lk-warn { background: #fff4e0; color: #8a5a00; } .pbt-lk-off { background: #fef2f2; color: #991b1b; }
.pbt-link { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pbt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: #f6f7fb; border-radius: 10px; margin-bottom: 12px; }
.pbt-tools-label { font-size: 11.5px; font-weight: 800; color: #6a7285; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.pbt-tools-gap { flex: 1 1 auto; }
.pbt-input { flex: 1 1 260px; max-width: none; padding: 8px 11px; border: 1px solid #d8dceb; border-radius: 9px; font: inherit; font-size: 13px; color: #2b3140; background: #fff; box-sizing: border-box; }
.pbt-input[disabled] { color: #98a1b2; text-decoration: line-through; background: #f6f7fb; }
.pbt-create .pbt-input { width: 100%; }
.pbt-select { flex: 0 0 auto; width: auto; padding: 6px 9px; cursor: pointer; }
.pbt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid #d8dceb; background: #fff; color: #2b3140;
           font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pbt-btn:hover { border-color: #6d5efc; color: #4a3ddb; }
.pbt-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pbt-primary { background: #6d5efc; border-color: #6d5efc; color: #fff; } .pbt-primary:hover { background: #5b4cf0; color: #fff; }
.pbt-ghost { background: transparent; }
.pbt-danger { color: #b91c1c; } .pbt-danger:hover { border-color: #ef4444; color: #991b1b; }
.pbt-btn.is-confirm { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.pbt-btn.is-busy { opacity: .6; cursor: progress; }
.pbt-empty { color: #6a7285; font-size: 14px; padding: 14px; background: #f6f7fb; border-radius: 12px; }
.pbt-err { color: #991b1b; background: #fef2f2; }

/* Staff editing a brief whose link is off (public page) */
.pb-staffnote { background: #fff8e6; border: 1px solid #f3d58a; color: #7a4d00; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.pb-scope-flags { border-color: #f5c6c6; background: #fffafa; }

/* ── Scope (review screen, done screen and the card tab) ── */
.pb-scope { font-size: 14.5px; color: #2b3140; line-height: 1.5; }
.pb-scope-head { background: #0b0f19; color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; }
.pb-scope-head h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; color: #fff; }
.pb-scope-head p { margin: 0; color: #c9cde0; font-size: 14px; }
.pb-scope-goal { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pb-scope-goal span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 6px 11px; font-size: 13.5px; font-weight: 700; }
.pb-scope-goal b { color: #93b4ff; }
.pb-scope-sec { border: 1px solid #e4e6f0; border-radius: 14px; padding: 13px 16px; margin-bottom: 10px; background: #fff; }
.pb-scope-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6a7285;
                   display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-scope-edit { background: none; border: 0; color: #4a3ddb; font: inherit; font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pb-scope-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-scope-tags span { background: #f4f5fb; border: 1px solid #e4e6f0; border-radius: 999px; padding: 3px 10px; font-size: 13.5px; font-weight: 600; }
.pb-scope-tags span.is-love { background: #f0fbf4; border-color: #bbe5c8; color: #166534; }
.pb-scope-tags span.is-hate { background: #fef2f2; border-color: #f5c6c6; color: #991b1b; text-decoration: line-through; }
.pb-scope-first { background: #fff8e6; border-color: #f3d58a; }
/* Recommended modules — first thing in the scope, so it reads as the headline */
.pb-scope-mods { border-color: #c7d7fe; background: linear-gradient(180deg, #f5f8ff, #fff 90px); }
.pb-scope-first b { font-size: 16px; color: #14162b; }
.pb-scope-list { margin: 0; padding-left: 20px; } .pb-scope-list li { margin: 3px 0; }
.pb-scope-note { margin-top: 8px; background: #f6f7fb; border-radius: 10px; padding: 8px 11px; font-size: 13.5px; color: #555d70; white-space: pre-wrap; }
.pb-scope-sys { margin-top: 8px; } .pb-scope-sys b { display: block; font-size: 14px; margin-bottom: 4px; color: #14162b; }
.pb-scope-empty { color: #98a1b2; font-style: italic; }
.pb-scope-mod { padding: 8px 0; border-top: 1px solid #eef0f6; } .pb-scope-mod:first-of-type { border-top: 0; padding-top: 0; }
.pb-scope-mod > b { font-size: 15px; color: #14162b; margin-right: 8px; }
.pb-mod-ready, .pb-mod-new, .pb-mod-req { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; display: inline-block; }
.pb-mod-ready { background: #dcfce7; color: #166534; } .pb-mod-new { background: #efecff; color: #4a3ddb; }
.pb-mod-req { background: #f3f4f6; color: #6a7285; }   /* PortalModules.md §D — on request, not in the core list */
.pb-scope-mod .pb-scope-list { margin-top: 4px; }