/* Campaign Builder output: "Your campaign" (#/plan) and the brief. Loads after builder.css.
   Colours are the omni.css :root tokens only. Square surfaces, 6 px on controls, hairlines, Roche Blue for the journey line nodes, numerals and links.
   The Timeline, Tasks, Materials and Budget tabs reuse builder.css classes (bld-cal, bld-tk, bld-tb, bld-tot, bld-bg); this file only softens their labels. */

.bpl-print { display: none; }
.bpl-head :is(a, button):focus-visible, .bpl :is(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bpl-bad { color: var(--bad-text); }
.bpl .bld-tools--p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bpl-quiet { color: var(--text2); }

/* ---------- Header ---------- */
.bpl-head h1 { font-size: 40px; }
.bpl-head .head__act { align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.bpl-edit { font-size: 15px; font-weight: 500; }
.bpl-head .head__main > div { min-width: 0; }

/* ---------- Summary strip ---------- */
.bpl-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 28px; }
.bpl-kp { padding: 14px 16px 12px 0; min-width: 0; display: flex; flex-direction: column; }
.bpl-kp + .bpl-kp { padding-left: 20px; border-left: 1px solid var(--hair); }
.bpl-kp__l { font-size: 13px; font-weight: 500; color: var(--text2); }
.bpl-kp__v { font-size: 26px; font-weight: 300; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.bpl-kp__v.is-key { color: var(--blue); }
.bpl-kp__v.is-bad { color: var(--bad-text); }
.bpl-kp__s { font-size: 13px; color: var(--text2); }

/* ---------- Tabs ---------- */
.bpl-tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; gap: 28px; margin-bottom: 32px; }
.bpl-tabs::-webkit-scrollbar { display: none; }
.bpl-tabs a { flex: none; }
.bpl-pb { min-width: 0; }

/* Labels of the reused tab bodies: sentence case, no capitals. */
.bpl .bld-tb__h, .bpl .bld-sh .bld-lab b, .bpl .bld-bg h3 { text-transform: none; letter-spacing: 0; }
.bpl .bld-sh .bld-lab b { font-size: 12px; color: var(--ink2); }
.bpl .bld-tb__h { font-size: 13px; font-weight: 500; }
.bpl .bld-bg h3 { font-size: 17px; font-weight: 400; color: var(--ink); }
.bpl-h3 { margin: 32px 0 6px; font-size: 17px; font-weight: 500; }
.bpl-ok { display: flex; align-items: center; gap: 8px; color: var(--ok-text); font-size: 15px; }
.bpl-cks--tab { max-width: 760px; }

/* ---------- The guide: a vertical journey line, a node per step ---------- */
.bpl-guide { max-width: 880px; }
.bpl-s { position: relative; padding: 0 0 56px 48px; }
.bpl-s::before { content: ''; position: absolute; left: 6px; top: 22px; bottom: -8px; width: 2px; background: var(--b200); }
.bpl-s:last-child { padding-bottom: 8px; }
.bpl-s:last-child::before { display: none; }
.bpl-node { position: absolute; left: 0; top: 10px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue); background: #FFFFFF; z-index: 1; }
.bpl-node--go { background: var(--blue); }
.bpl-node--quiet { border-color: var(--muted); }
.bpl-s__h h2 { margin: 0; font-size: 28px; font-weight: 300; line-height: 1.25; letter-spacing: -0.005em; }
.bpl-num { color: var(--blue); }
.bpl-s__d { margin: 2px 0 0; font-size: 15px; color: var(--text2); }
.bpl-s { scroll-margin-top: 90px; }

/* Before you start */
.bpl-lead { margin: 12px 0 0; }
.bpl-lab { margin: 0; font-size: 13px; font-weight: 500; color: var(--text2); }
.bpl-big { margin: 2px 0 0; font-size: 40px; font-weight: 300; line-height: 1.15; color: var(--blue); font-variant-numeric: tabular-nums; }
.bpl-big.is-bad { color: var(--bad-text); }
.bpl-big--q { color: var(--ink); font-size: 28px; }
.bpl-lead__s { margin: 2px 0 0; font-size: 14px; color: var(--text2); }
.bpl-bps { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.bpl-bp { display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px; gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; align-items: baseline; }
.bpl-bp__d { font-variant-numeric: tabular-nums; font-weight: 500; }
.bpl-bp__d small { display: block; font-size: 12.5px; font-weight: 400; }
.bpl-bp__w b { font-weight: 500; margin-right: 4px; }
.bpl-bp__o { color: var(--text2); font-size: 14px; }
.bpl-bp.is-over .bpl-bp__d, .bpl-bp.is-over .bpl-bp__d small { color: var(--bad-text); }
.bpl-bp.is-done .bpl-bp__w { color: var(--muted); text-decoration: line-through; }
.bpl-bp.is-extra { display: none; }
.bpl-more { margin-top: 12px; font-size: 14px; }
.bpl-cks--loose { margin-top: 20px; max-width: 760px; }

/* Items inside a step, hairline-separated */
.bpl-its { margin-top: 18px; }
.bpl-it { padding: 22px 0 26px; border-top: 1px solid var(--hair); }
.bpl-it h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
.bpl-pur { margin-left: 12px; font-size: 15px; font-weight: 400; color: var(--text2); }
.bpl-rows { margin: 12px 0 0; }
.bpl-r { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 4px 20px; padding: 8px 0; }
.bpl-r dt { font-size: 13px; font-weight: 500; color: var(--text2); padding-top: 3px; }
.bpl-r dd { margin: 0; font-size: 15px; min-width: 0; }
.bpl-q { font-style: italic; quotes: '“' '”'; }

/* What you need */
.bpl-mats { list-style: none; margin: 0; padding: 0; }
.bpl-m + .bpl-m { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.bpl-m__t { margin: 0; }
.bpl-m__t b { font-weight: 500; }
.bpl-m__t span { margin-left: 10px; font-size: 14px; color: var(--text2); }
.bpl-m__c { margin: 2px 0 0; font-size: 14.5px; color: var(--ink2); }
.bpl-m__c b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bpl-m__c b.bpl-bad { color: var(--bad-text); }

/* Tasks */
.bpl-tks { list-style: none; margin: 0; padding: 0; }
.bpl-tk { display: grid; grid-template-columns: minmax(0, 1fr) 136px auto; gap: 2px 14px; align-items: start; padding: 5px 0; font-size: 14.5px; }
.bpl-tk + .bpl-tk { border-top: 1px solid var(--hair); }
.bpl-tk .chk { padding: 3px 0; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
.bpl-tk .chk input { margin-top: 2px; }
.bpl-tk__o { color: var(--text2); font-size: 13.5px; padding-top: 4px; }
.bpl-tk__d { white-space: nowrap; min-width: 54px; font-variant-numeric: tabular-nums; text-align: right; font-size: 13.5px; color: var(--text2); padding-top: 4px; }
.bpl-tk.is-done .chk span, .bpl-tk.is-done .bpl-tk__t { color: var(--muted); text-decoration: line-through; }
.bpl-tk.is-over .bpl-tk__d { color: var(--bad-text); font-weight: 500; }
.bpl-tk__l { display: flex; min-width: 0; padding: 3px 0; }
.bpl-box { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink2); flex: none; margin-top: 3px; margin-right: 8px; vertical-align: top; }
.bpl-box.is-on { background: var(--ink2); }

/* Do it well */
.bpl-ul { list-style: none; margin: 0; padding: 0; }
.bpl-ul li { position: relative; padding: 2px 0 2px 16px; font-size: 14.5px; }
.bpl-ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1.5px; background: var(--muted); }
.bpl-lnk { margin: 8px 0 0; font-size: 14.5px; }
.bpl-lnk a { font-weight: 500; }
.bpl-lnk a + a { margin-left: 18px; }

/* Checks */
.bpl-cks { list-style: none; margin: 0; padding: 0; }
.bpl-ck { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 14.5px; }
.bpl-ck + .bpl-ck { border-top: 1px solid var(--hair); }
.bpl-ck > svg { margin-top: 2px; }
.bpl-ck p { margin: 0; line-height: 1.4; }
.bpl-ck b { font-weight: 500; }
.bpl-ck small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text2); }
.bpl-ck.is-bad > svg { color: var(--bad); }
.bpl-ck.is-bad b { color: var(--bad-text); }
.bpl-ck.is-warn > svg { color: var(--warn); }
.bpl-ck.is-info > svg, .bpl-ck.is-sug > svg { color: var(--text2); }
.bpl-ck__a { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.bpl-ck__a .link { font-size: 14px; font-weight: 500; }

/* After the campaign */
.bpl-kn { list-style: none; margin: 16px 0 0; padding: 0; columns: 3; column-gap: 32px; border-top: 1px solid var(--hair); }
.bpl-kn li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.bpl-s--end .bpl-lnk { margin-top: 20px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
  .bpl-kn { columns: 2; }
  .bpl-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bpl-kp:nth-child(4) { padding-left: 0; border-left: 0; }
  .bpl-kp:nth-child(n+4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 700px) {
  .bpl-head h1 { font-size: 30px; }
  .bpl-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpl-kp, .bpl-kp + .bpl-kp, .bpl-kp:nth-child(4) { padding: 12px 8px 10px 0; border-left: 0; }
  .bpl-kp:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--hair); }
  .bpl-kp:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .bpl-kp:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .bpl-kp__v { font-size: 22px; }
  .bpl-tabs { gap: 22px; }
  .bpl-s { padding-left: 34px; padding-bottom: 44px; }
  .bpl-s__h h2 { font-size: 24px; }
  .bpl-big { font-size: 32px; }
  .bpl-bp { grid-template-columns: 72px minmax(0, 1fr); }
  .bpl-bp__o { grid-column: 2; }
  .bpl-r { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0 6px; }
  .bpl-it h3 { font-size: 18px; }
  .bpl-pur { display: block; margin: 2px 0 0; }
  .bpl-tk { grid-template-columns: minmax(0, 1fr) auto; }
  .bpl-tk__o { grid-column: 1; padding-left: 28px; }
  .bpl-tk__d { grid-row: 1; grid-column: 2; }
  .bpl-kn { columns: 1; }
  .bpl-m__t span { display: block; margin: 0; }
}

/* ---------- Print: the brief and the printed guide ---------- */
@media print {
  /* The per-page footer uses CSS margin boxes (Chromium 131+, so Chrome and Edge). Other browsers get the same line once, at the end (.bpl-nombox). */
  @page { size: A4; margin: 14mm 14mm 20mm;
    @bottom-left { content: "Sample · figures marked Example are placeholders"; font: 8pt "Roche Sans", "Helvetica Neue", Arial, sans-serif; color: #706B69; }
    @bottom-right { content: counter(page); font: 8pt "Roche Sans", "Helvetica Neue", Arial, sans-serif; color: #706B69; } }
  html, body { background: #FFFFFF; }
  body { font-size: 10pt; color: #000000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .strip, .hdr, .foot, .toast, .bld-tip { display: none !important; }
  #main > :not(.bpl-print):not(.bld-print) { display: none !important; }
  #main > .bpl-print.bpl-print, .bld-print { display: block !important; }
  a { color: inherit; }

  .bpl-doc { color: #000000; font-size: 9.5pt; line-height: 1.4; }
  .bpl-doc__cover { padding-bottom: 10pt; margin-bottom: 14pt; }
  .bpl-doc__k { margin: 0 0 8pt; font-size: 9pt; color: var(--text2); }
  .bpl-doc h1 { margin: 0 0 4pt; font-size: 28pt; font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
  .bpl-doc__sub { margin: 0; font-size: 10.5pt; color: var(--ink2); }
  .bpl-doc__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14pt 0 0; border-top: 0.75pt solid #000000; }
  .bpl-doc__facts > div { padding: 6pt 8pt 6pt 0; border-bottom: 0.5pt solid var(--line); }
  .bpl-doc__facts dt { font-size: 8.5pt; color: var(--text2); }
  .bpl-doc__facts dd { margin: 1pt 0 0; font-size: 12pt; font-weight: 300; color: #000000; }
  .bpl-doc h2 { margin: 0 0 8pt; padding-bottom: 4pt; border-bottom: 0.5pt solid #000000; font-size: 17pt; font-weight: 300; break-after: avoid; }
  .bpl-doc h2 .n { color: var(--blue); margin-right: 8pt; }
  .bpl-doc h3 { break-after: avoid; }
  .bpl-doc__sec { margin: 0 0 14pt; }
  .bpl-doc__sec--page { break-before: page; }

  .bpl-j { break-inside: avoid; padding: 6pt 0; border-bottom: 0.5pt solid var(--hair); }
  .bpl-j h3 { margin: 0 0 3pt; font-size: 11pt; font-weight: 500; }
  .bpl-j h3 i { font-style: normal; color: var(--blue); }
  .bpl-j h3 span { margin-left: 8pt; font-size: 9pt; font-weight: 400; color: var(--text2); }
  .bpl-j ul { list-style: none; margin: 0; padding: 0; }
  .bpl-j li { padding: 2pt 0; }
  .bpl-j p { margin: 0; }
  .bpl-j__h span { color: var(--text2); }
  .bpl-j__q { font-style: italic; }
  .bpl-j__x { font-size: 9pt; color: var(--ink2); }

  .bpl-mb { break-inside: avoid; padding: 8pt 0 10pt; border-bottom: 0.5pt solid var(--line); }
  .bpl-mb h3 { margin: 0 0 5pt; font-size: 12pt; font-weight: 500; }
  .bpl-mb h3 .n { color: var(--blue); margin-right: 6pt; font-weight: 300; }
  .bpl-kv { display: grid; grid-template-columns: 74pt minmax(0, 1fr); gap: 2.5pt 10pt; margin: 0; font-size: 9pt; }
  .bpl-kv dt { color: var(--text2); }
  .bpl-kv dd { margin: 0; }
  .bpl-kv ul { margin: 0; padding-left: 10pt; }
  .bpl-kv li { margin: 0 0 1pt; }
  .bpl-kv b { font-weight: 600; }

  .bpl-ow, .bpl-bu { margin: 0 0 10pt; break-inside: auto; }
  .bpl-ow h3, .bpl-bu h3 { display: flex; justify-content: space-between; margin: 0 0 3pt; padding-bottom: 2pt; border-bottom: 0.5pt solid #000000; font-size: 11pt; font-weight: 500; }
  .bpl-ow h3 span, .bpl-bu h3 span { font-weight: 400; font-size: 9pt; color: var(--text2); }
  .bpl-doc table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .bpl-doc td { padding: 2.5pt 0; border-bottom: 0.5pt solid var(--hair); vertical-align: top; }
  .bpl-doc td.d { width: 58pt; white-space: nowrap; color: var(--text2); }
  .bpl-doc td.s { width: 34pt; text-align: right; color: var(--text2); }
  .bpl-doc td.r { text-align: right; white-space: nowrap; }
  .bpl-doc tr { break-inside: avoid; }
  .bpl-doc tr.is-over td.d, .bpl-doc tr.is-over b { color: var(--bad-text); }
  .bpl-tot { margin: 0 0 12pt; }
  .bpl-tot span { display: block; font-size: 9pt; color: var(--text2); }
  .bpl-tot b { font-size: 24pt; font-weight: 300; color: #000000; }
  .bpl-tot small { display: block; font-size: 9pt; color: var(--text2); }
  .bpl-doc__c { margin: 0; padding-left: 14pt; font-size: 9.5pt; }
  .bpl-doc__c li { margin-bottom: 3pt; break-inside: avoid; }
  .bpl-doc__foot { display: none; }
  .bpl-nombox .bpl-doc__foot { display: block; margin-top: 16pt; padding-top: 3pt; border-top: 0.5pt solid var(--line); font-size: 8pt; color: var(--text2); }

  /* The printed guide: the same markup as on screen, tightened for paper. */
  .bpl-doc .bpl-guide { max-width: none; margin-top: 4pt; }
  .bpl-doc .bpl-s { padding: 0 0 14pt 20pt; }
  .bpl-doc .bpl-s::before { left: 4px; top: 14px; bottom: -4px; background: var(--line); }
  .bpl-doc .bpl-node { width: 9px; height: 9px; top: 6px; left: 0; border-color: #000000; }
  .bpl-doc .bpl-node--go { background: #000000; }
  .bpl-doc .bpl-node--quiet { border-color: var(--muted); }
  .bpl-doc .bpl-s__h { break-after: avoid; }
  .bpl-doc .bpl-s__h h2 { margin: 0; padding: 0; border: 0; font-size: 15pt; }
  .bpl-doc .bpl-num { color: var(--blue); }
  .bpl-doc .bpl-s__d { font-size: 9.5pt; }
  .bpl-doc .bpl-its { margin-top: 6pt; }
  .bpl-doc .bpl-it { padding: 8pt 0 8pt; break-inside: avoid; }
  .bpl-doc .bpl-it h3 { font-size: 12pt; }
  .bpl-doc .bpl-pur { font-size: 9.5pt; }
  .bpl-doc .bpl-rows { margin-top: 4pt; }
  .bpl-doc .bpl-r { grid-template-columns: 78pt minmax(0, 1fr); gap: 0 10pt; padding: 3pt 0; }
  .bpl-doc .bpl-r dt { font-size: 8.5pt; padding-top: 1pt; }
  .bpl-doc .bpl-r dd { font-size: 9pt; }
  .bpl-doc .bpl-m__t span, .bpl-doc .bpl-m__c { font-size: 9pt; }
  .bpl-doc .bpl-tk { grid-template-columns: minmax(0, 1fr) 90pt 48pt; padding: 2pt 0; font-size: 9pt; }
  .bpl-doc .bpl-tk__o, .bpl-doc .bpl-tk__d { font-size: 8.5pt; }
  .bpl-doc .bpl-tk__l { padding: 0; }
  .bpl-doc .bpl-tk__o, .bpl-doc .bpl-tk__d { padding-top: 0; }
  .bpl-doc .bpl-bp__o, .bpl-doc .bpl-bp__d small { font-size: 8.5pt; }
  .bpl-doc .bpl-ul li, .bpl-doc .bpl-ck, .bpl-doc .bpl-kn li, .bpl-doc .bpl-bp { font-size: 9pt; }
  .bpl-doc .bpl-big { font-size: 24pt; color: #000000; }
  .bpl-doc .bpl-big.is-bad { color: var(--bad-text); }
  .bpl-doc .bpl-bp { grid-template-columns: 56pt minmax(0, 1fr) 90pt; padding: 3pt 0; break-inside: avoid; }
  .bpl-doc .bpl-bp.is-extra { display: grid; }
  .bpl-doc .bpl-kn { columns: 3; margin-top: 6pt; }
  .bpl-doc .bpl-kn li { padding: 3pt 0; }
}
