/* Campaign builder styles. Shared omni.css classes are overridden only under [data-product="builder"]; new classes are bld-*.
   Colours are omni.css tokens: blue for the user's own touchpoints and key numbers, greys for everything generated. */

[data-product="builder"] :is(a, button, select, input, summary, textarea, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bld-wide { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.bld-gap { margin-top: 20px; }
.is-bad { color: var(--bad-text); }
.is-warn { color: var(--ink2); }
.bld-print { display: none; }
[data-product="builder"] .tabs { margin-bottom: 24px; }

.bld-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.bld-e { margin: 8px 0 0; color: var(--text2); font-size: 15px; }

.bld-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.bld-kp { padding: 8px 12px 6px 0; display: flex; flex-direction: column; min-width: 0; }
.bld-kp__v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bld-kp + .bld-kp { padding-left: 18px; border-left: 1px solid var(--hair); }
.bld-kp span { font-size: 12px; color: var(--text2); }
.bld-kp b { font-size: 23px; font-weight: 300; color: var(--blue); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bld-kp b.is-bad { color: var(--bad-text); } .bld-kp b.is-warn { color: var(--ink2); }
.bld-kp small { font-size: 12px; color: var(--text2); }

.bld-ic { position: relative; flex: none; width: min(28px, calc(var(--wk, 40px) - 2px)); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink2); background: #FFFFFF; }
.bld-ic svg { width: 62%; height: 62%; display: block; }

/* tools and calendar */
.bld-cal { --lab: 96px; position: relative; overflow: auto; max-height: calc(100vh - 252px); min-height: 380px; border: 1px solid var(--hair); background: #FFFFFF; scrollbar-width: thin; }
.bld-cal--ro { max-height: none; }
.bld-cal__in { position: relative; width: calc(var(--lab) + var(--wk) * var(--n)); min-width: 100%; }
.bld-row { display: flex; border-bottom: 1px solid var(--hair); position: relative; }
.bld-lab { position: sticky; left: 0; z-index: 3; width: var(--lab); flex: none; background: #FFFFFF; padding: 6px 10px; font-size: 12px; line-height: 1.3; border-right: 1px solid var(--line); text-align: left; overflow: hidden; }
.bld-lab b { font-weight: 600; display: block; } .bld-lab small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.bld-row--l .bld-lab small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bld-tl { position: relative; flex: none; width: calc(var(--wk) * var(--n)); background-image: linear-gradient(to right, var(--hair) 1px, transparent 1px); background-size: var(--wk) 100%; }
.bld-hd { position: sticky; top: 0; z-index: 5; display: flex; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.bld-hd .bld-lab { display: flex; align-items: flex-end; font-size: 11px; color: var(--muted); }
.bld-hd .bld-tl { height: 64px; background-image: none; }
.bld-mo span { position: absolute; top: 3px; font-size: 11px; font-weight: 600; color: var(--text2); white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--line); height: 17px; line-height: 15px; }
.bld-wn span { position: absolute; top: 23px; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bld-wn .is-0 { color: var(--blue); font-weight: 600; }
.bld-fg em { position: absolute; top: 41px; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 6px; transform: translateX(-50%); white-space: nowrap; line-height: 16px; }
.bld-fg--today { background: var(--ink2); color: #FFFFFF; } .bld-fg--today.is-r { transform: translateX(-100%); }
.bld-fg--live { background: var(--blue); color: #FFFFFF; }
.bld-sh { display: flex; background: var(--alt); border-bottom: 1px solid var(--hair); height: 26px; }
.bld-sh .bld-lab { background: var(--alt); border-right: 0; overflow: visible; padding-top: 5px; white-space: nowrap; }
.bld-sh .bld-lab b { font-size: 12px; color: var(--text2); display: inline; }
.bld-sh .bld-lab small { display: inline; margin-left: 8px; }
.bld-sh .bld-tl { background: none; }
.bld-ln { position: absolute; top: 64px; bottom: 0; left: var(--lab); width: calc(var(--wk) * var(--n)); pointer-events: none; z-index: 1; }
.bld-ln i { position: absolute; top: 0; bottom: 0; width: 0; }
.bld-ln--today { border-left: 1px dashed var(--ink2); } .bld-ln--live { border-left: 2px solid var(--blue); margin-left: -1px; }

/* touchpoints */
.bld-tp { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink); cursor: grab; white-space: nowrap; touch-action: pan-x pan-y; }
.bld-tp .bld-ic { background: var(--blue); color: #FFFFFF; border-color: var(--blue); }
.bld-tp .bld-lb { padding-right: 6px; }
.bld-tp.sel .bld-ic { background: var(--navy); border-color: var(--navy); outline: 2px solid var(--blue); outline-offset: 2px; }
.bld-tp.is-bar { background: var(--blue); color: #FFFFFF; overflow: hidden; gap: 4px; padding-right: 6px; }
.bld-tp.is-bar .bld-ic { background: transparent; border-color: transparent; outline: 0; }
.bld-tp.is-bar .bld-lb { overflow: hidden; text-overflow: ellipsis; }
.bld-tp.is-bar.sel { background: var(--navy); outline: 2px solid var(--blue); outline-offset: 1px; overflow: visible; }
.bld-fl { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #FFFFFF; background: var(--warn); box-sizing: content-box; }
.bld-fl.is-bad { background: var(--bad); }
.bld-ro .bld-tp, .bld-cal--ro .bld-tp { cursor: default; }

/* preparation rows */
.bld-row--m { height: 26px; }
.bld-lab--m { border-top: 0; border-bottom: 0; border-left: 0; cursor: pointer; font-family: inherit; padding: 5px 8px; white-space: nowrap; } .bld-lab--m:hover small { color: var(--blue); }
.bld-lab--m small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.bld-mn { position: absolute; top: 4px; height: 18px; line-height: 18px; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink2); white-space: nowrap; cursor: pointer; z-index: 2; text-align: left; } .bld-mn:hover { color: var(--blue); }
.bld-cal--ro .bld-mn, .bld-ro .bld-mn { cursor: default; }
.bld-row.is-hl, .bld-row.is-hl .bld-lab { background-color: var(--b050); }
.bld-row.is-late .bld-lab small, .bld-row.is-late .bld-mn { color: var(--bad-text); }
.bld-seg { position: absolute; top: 7px; height: 12px; padding: 0; border: 0; box-shadow: inset -1px 0 #FFFFFF; z-index: 2; cursor: default; }
.bld-seg--make { background: var(--line); } .bld-seg--pm { background: var(--muted); } .bld-seg--eda { background: var(--text2); } .bld-seg--up { background: var(--ink2); } .bld-seg--review { background: var(--muted); }
.bld-seg--pub { background: #FFFFFF; border: 1.5px dashed var(--ink2); }
.bld-row.is-late .bld-seg--make { outline: 1px solid var(--bad); outline-offset: -1px; }
.bld-dm { position: absolute; top: 9px; width: 9px; height: 9px; margin-left: -4px; background: var(--ink2); transform: rotate(45deg); z-index: 2; }
.bld-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--text2); }
.bld-key span { display: inline-flex; align-items: center; gap: 7px; } .bld-key__x { margin-left: auto; color: var(--muted); }
.bld-k { display: inline-block; width: 16px; height: 11px; flex: none; position: static; box-shadow: none; } .bld-k--tp { background: var(--blue); } .bld-k--dm { width: 8px; height: 8px; background: var(--ink2); transform: rotate(45deg); }


.bld-mat { border: 0; border-top: 1px solid var(--hair); margin: 0; padding: 12px 0 4px; min-width: 0; } .bld-mat:first-of-type { border-top: 0; padding-top: 0; }
.bld-mat legend { padding: 0; font-size: 14px; font-weight: 600; float: left; width: 100%; margin-bottom: 2px; } .bld-mat legend + * { clear: both; }
.bld-mat__s { margin: 0 0 8px; font-size: 12.5px; color: var(--text2); } .bld-mat__n { margin: 8px 0 0; font-size: 13px; color: var(--ink2); } .bld-mat__c { margin: 2px 0 0; font-size: 12.5px; color: var(--text2); }
.bld-two { display: grid; grid-template-columns: 1fr 1fr; } .bld-two label { position: relative; }
.bld-two input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bld-two span { display: block; text-align: center; padding: 8px 6px; font-size: 13px; border: 1px solid var(--line); cursor: pointer; }
.bld-two label:first-child span { border-radius: 6px 0 0 6px; } .bld-two label:last-child span { border-radius: 0 6px 6px 0; border-left: 0; }
.bld-two input:checked + span { background: var(--b050); border-color: var(--blue); color: var(--navy); font-weight: 600; } .bld-two label:last-child input:checked + span { border-left: 1px solid var(--blue); }
.bld-two input:disabled + span { color: var(--muted); cursor: not-allowed; } .bld-two input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.bld-opts { list-style: none; margin: 8px 0 0; padding: 0; } .bld-opts li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--hair); padding: 8px 0; } .bld-opts li.is-off b { color: var(--text2); }
.bld-opts label { display: flex; gap: 10px; align-items: flex-start; flex: 1; cursor: pointer; min-width: 0; } .bld-opts input { margin: 3px 0 0; accent-color: var(--blue); flex: none; }
.bld-opts b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; } .bld-opts small { display: block; font-size: 12px; color: var(--text2); } .bld-opts a { color: var(--text2); flex: none; } .bld-opts a:hover { color: var(--blue); }
.bld-cks, .bld-sgs, .bld-nt { list-style: none; margin: 0; padding: 0; }
.bld-ck { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); } .bld-ck:last-child { border-bottom: 0; }
.bld-ck p { margin: 0; font-size: 14px; line-height: 1.4; } .bld-ck small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text2); }
.bld-ck__i svg { margin-top: 2px; } .bld-ck.is-bad .bld-ck__i { color: var(--bad); } .bld-ck.is-warn .bld-ck__i { color: var(--warn); } .bld-ck.is-info .bld-ck__i { color: var(--text2); }
.bld-ck.is-bad, .bld-ck.is-warn, .bld-ck.is-info { color: var(--ink); }
.bld-ck__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; } .bld-ck__a:empty { display: none; } .bld-ck__a .link { font-weight: 500; text-align: left; }
.bld-sg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); } .bld-sg:last-child { border-bottom: 0; }
.bld-sg p { margin: 0; font-size: 14px; line-height: 1.35; } .bld-sg small { color: var(--text2); font-size: 12.5px; } .bld-sg .btn { flex: none; }

/* tooltip */
.bld-tip { position: fixed; left: 0; top: 0; z-index: 30; padding: 16px 18px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 0.75rem 1.5rem rgba(33, 33, 33, .12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; font-size: 13px; }
.bld-tip.on { opacity: 1; }
.bld-tip__t { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; } .bld-tip p { margin: 6px 0 10px; font-size: 13.5px; color: var(--ink2); } .bld-tip p.bld-tip__w { margin: 4px 0 0; font-size: 13px; }
.bld-tip dl { margin: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); border-top: 1px solid var(--hair); } .bld-tip dt, .bld-tip dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; } .bld-tip dt { color: var(--text2); } .bld-tip dd:last-child, .bld-tip dt:nth-last-child(2) { border-bottom: 0; }

/* ---------- Plan ---------- */
.bld-plan .bld-sum { margin-bottom: 28px; }
.bld-lead { margin: 0 0 20px; color: var(--text2); font-size: 15px; }
.bld-tools--p { margin-bottom: 18px; }
.bld-seg3 { display: inline-flex; } .bld-seg3 button { height: 36px; padding: 0 16px; border: 1px solid var(--line); background: #FFFFFF; font-size: 14px; cursor: pointer; color: var(--ink); }
.bld-seg3 button:first-child { border-radius: 6px 0 0 6px; } .bld-seg3 button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.bld-seg3 button[aria-pressed="true"] { background: var(--b050); border-color: var(--blue); color: var(--navy); font-weight: 600; } .bld-seg3 button[aria-pressed="true"] + button { border-left-color: var(--blue); }
.bld-tg { margin-bottom: 28px; } .bld-tg__h { margin: 0 0 4px; font-size: 20px; font-weight: 300; padding-bottom: 8px; border-bottom: 1px solid var(--ink2); } .bld-tg__h small { margin-left: 12px; font-size: 13px; color: var(--text2); font-weight: 400; }
.bld-tg ul { list-style: none; margin: 0; padding: 0; }
.bld-tk { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px 24px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.bld-tk .chk { padding: 0; } .bld-tk.is-done .chk span { color: var(--muted); text-decoration: line-through; } .bld-tk__d { font-variant-numeric: tabular-nums; } .bld-tk.is-over .bld-tk__d { color: var(--bad-text); font-weight: 600; } .bld-tk__o { color: var(--text2); font-size: 13.5px; } .bld-tk__l { color: var(--muted); } .bld-tk__l:hover { color: var(--blue); }
.bld-jy { list-style: none; margin: 0; padding: 0; max-width: 880px; } .bld-jy > li { display: grid; grid-template-columns: 110px 30px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--hair); }
.bld-jy__d b { display: block; font-size: 15px; font-weight: 600; } .bld-jy__d small { color: var(--text2); font-size: 13px; }
.bld-jy > li > .bld-ic { background: var(--blue); color: #FFFFFF; border-color: var(--blue); width: 30px; }
.bld-jy h3 { margin: 0; font-size: 18px; font-weight: 600; } .bld-jy p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink2); } .bld-jy p.bld-jy__w { color: var(--text2); font-size: 13px; } .bld-jy__n { font-style: italic; }
.bld-jy__m { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; } .bld-jy__m li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--hair); } .bld-jy__m span { color: var(--text2); text-align: right; }
.bld-tb { font-size: 14px; } .bld-tb__h, .bld-tb__r { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.bld-tb__h { font-size: 12px; color: var(--text2); font-weight: 600; border-bottom-color: var(--ink2); }
.bld-tb small { display: block; font-size: 12.5px; color: var(--text2); } .bld-tb .r { text-align: right; } .bld-tb__r.is-late .bld-tb__n b { color: var(--bad-text); }
.bld-tot { padding: 4px 0 28px; max-width: 760px; } .bld-tot > span { display: block; font-size: 13px; color: var(--text2); } .bld-tot b { font-size: 52px; font-weight: 300; color: var(--blue); line-height: 1.15; } .bld-tot small { display: block; color: var(--text2); font-size: 14px; }
.bld-bg { max-width: 880px; margin-bottom: 28px; } .bld-bg h3 { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink2); padding-bottom: 8px; } .bld-bg__s { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 15px; color: var(--ink); }
.bld-bg ul { list-style: none; margin: 0; padding: 0; } .bld-bg li { display: grid; grid-template-columns: minmax(0, 1fr) 30% 130px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.bld-bg__b { height: 8px; display: block; } .bld-bg__b i { display: block; height: 100%; background: var(--line); } .bld-bg__b u { display: block; height: 100%; background: var(--muted); } .bld-bg__v { text-align: right; font-variant-numeric: tabular-nums; }
.bld-fine { max-width: 760px; font-size: 13px; color: var(--text2); }
.bld-cks--p { max-width: 760px; } .bld-cks--p .bld-ck p { font-size: 15px; }
.bld-sgs { max-width: 760px; }

.bld-pur { display: inline-block; margin-left: 10px; height: 22px; line-height: 20px; padding: 0 10px; border: 1px solid var(--line); border-radius: 56px; font-size: 12px; font-weight: 400; color: var(--ink2); vertical-align: middle; }
.bld-jy__no { display: block; font-size: 36px; font-weight: 300; color: var(--blue); line-height: 1; margin-bottom: 4px; } .bld-jy__q { font-style: italic; color: var(--ink) !important; }
.bld-tk__c { grid-column: 1; font-size: 12.5px; color: var(--text2); margin-top: -6px; padding-left: 28px; }
.bld-doc__j em { display: block; font-style: italic; }


/* ---------- Narrow screens: the plan pages ---------- */
@media (max-width: 760px) {
  .bld-wrap { padding: 0 16px; }
  .bld-sum { grid-template-columns: 1fr 1fr; } .bld-kp { padding: 10px 8px 8px 0; } .bld-kp + .bld-kp { padding-left: 0; border-left: 0; } .bld-kp:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--hair); } .bld-kp:nth-child(n+3) { border-top: 1px solid var(--hair); } .bld-kp b { font-size: 21px; }
  .bld-cal--ro { display: block; }
  .bld-tk { grid-template-columns: minmax(0, 1fr) auto; } .bld-tk__o { grid-column: 1; font-size: 12.5px; padding-left: 28px; margin-top: -8px; } .bld-tk__l { display: none; } .bld-tk__d { grid-row: 1; grid-column: 2; }
  .bld-jy > li { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; } .bld-jy__d { grid-column: 2; grid-row: 1; } .bld-jy > li > .bld-ic { grid-column: 1; grid-row: 1; } .bld-jy__b { grid-column: 1 / -1; }
  .bld-tb__h { display: none; } .bld-tb__r { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .bld-tb .r { text-align: left; } .bld-tb__r > span[data-l]::before { content: attr(data-l) ": "; color: var(--text2); }
  .bld-bg li { grid-template-columns: minmax(0, 1fr) auto; } .bld-bg__b { display: none; } .bld-tot b { font-size: 38px; }
}

/* ---------- Print: the brief ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #FFFFFF; } body { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .strip, .hdr, .foot, .toast, .bld-tip { display: none !important; }
  #main > :not(.bld-print) { display: none !important; }
  .bld-print { display: block; }
  .bld-doc header { padding-bottom: 10pt; border-bottom: 1pt solid var(--ink2); margin-bottom: 12pt; }
  .bld-doc__k { margin: 0 0 6pt; font-size: 8.5pt; color: var(--text2); }
  .bld-doc h1 { margin: 0 0 4pt; font-size: 26pt; font-weight: 300; line-height: 1.15; }
  .bld-doc header p { margin: 0; font-size: 11pt; } .bld-doc header .bld-doc__s { margin-top: 6pt; font-size: 8.5pt; color: var(--text2); }
  .bld-doc h2 { margin: 18pt 0 8pt; padding-bottom: 4pt; border-bottom: 0.5pt solid var(--line); font-size: 14pt; font-weight: 300; break-after: avoid; }
  .bld-doc h3 { margin: 10pt 0 3pt; font-size: 9.5pt; font-weight: 600; break-after: avoid; }
  .bld-doc__f { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 6pt; border-bottom: 0.5pt solid var(--line); } .bld-doc__f div { padding: 4pt 6pt 6pt 0; } .bld-doc__f dt { font-size: 8pt; color: var(--text2); } .bld-doc__f dd { margin: 1pt 0 0; font-size: 12pt; font-weight: 300; color: var(--blue); }
  .bld-doc__j { list-style: none; margin: 0; padding: 0; } .bld-doc__j li { padding: 4pt 0; border-bottom: 0.5pt solid var(--hair); break-inside: avoid; font-size: 9.5pt; } .bld-doc__j li span { margin-left: 8pt; font-weight: 600; } .bld-doc__j small { display: block; color: var(--text2); font-size: 8.5pt; }
  .bld-doc section { break-inside: auto; }
  .bld-cal--print { max-height: none; overflow: visible; border: 0; min-height: 0; break-inside: avoid; --lab: 92px; }
  .bld-cal--print .bld-cal__in { width: 100%; --wk: calc(100% / var(--n)); }
  .bld-cal--print .bld-tl { width: auto; flex: 1; } .bld-cal--print .bld-lab { position: static; width: var(--lab); padding: 3pt 5pt; font-size: 6.5pt; }
  .bld-cal--print .bld-ln { width: auto; right: 0; } .bld-cal--print .bld-hd { position: static; }
  .bld-cal--print .bld-lb { font-size: 7pt; } .bld-cal--print .bld-mn { font-size: 6.5pt; } .bld-cal--print .bld-lab--m small { font-size: 6pt; } .bld-cal--print .bld-wn span, .bld-cal--print .bld-mo span { font-size: 6.5pt; }
  .bld-cal--print .bld-fg em { font-size: 6pt; }
  .bld-cal--print .bld-ic { width: 13px; } .bld-cal--print .bld-tp { height: 16px; gap: 3px; } .bld-cal--print .bld-ic svg { width: 70%; height: 70%; } .bld-cal--print .bld-fl { width: 6px; height: 6px; top: -3px; right: -3px; }
  .bld-key { font-size: 7.5pt; margin-top: 6pt; break-inside: avoid; }
  .bld-tb { font-size: 8.5pt; } .bld-tb__h, .bld-tb__r { gap: 8pt; padding: 4pt 0; break-inside: avoid; } .bld-tb small { font-size: 7.5pt; }
  .bld-doc table { width: 100%; border-collapse: collapse; font-size: 8.5pt; } .bld-doc td { padding: 2.5pt 0; border-bottom: 0.5pt solid var(--hair); vertical-align: top; } .bld-doc td.d { width: 46pt; color: var(--text2); } .bld-doc tr { break-inside: avoid; }
  .bld-tot { padding: 0 0 8pt; } .bld-tot b { font-size: 22pt; } .bld-bg { margin-bottom: 10pt; } .bld-bg li { padding: 3pt 0; font-size: 8.5pt; gap: 8pt; } .bld-bg h3 { font-size: 9pt; border-bottom-width: 0.5pt; }
  .bld-fine { font-size: 8pt; }
  .bld-doc__c { margin: 0; padding-left: 14pt; font-size: 9pt; } .bld-doc__c li { margin-bottom: 3pt; break-inside: avoid; }
}
.bld-tk__l { grid-row: 1; grid-column: 4; }

/* ---------- My campaigns panel ---------- */
body.bld-lock { overflow: hidden; }
.bld-mine { height: 38px; }
.bld-pn[hidden] { display: none; }
.bld-pn__bd { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .32); }
.bld-pn__sh { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100vw); background: #FFFFFF; padding: 24px 28px 32px; overflow-y: auto; box-shadow: -0.75rem 0 1.5rem rgba(33, 33, 33, .14); outline: 0; animation: bld-in .18s ease-out; }
@keyframes bld-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bld-pn__sh { animation: none; } }
.bld-pn__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .bld-pn__h h2 { margin: 0; font-size: 26px; font-weight: 300; }
.bld-pn__x { background: none; border: 0; color: var(--text2); cursor: pointer; padding: 6px; display: grid; place-items: center; } .bld-pn__x:hover { color: var(--blue); }
.bld-pl { list-style: none; margin: 22px 0 0; padding: 0; border-bottom: 1px solid var(--hair); }
.bld-pi { padding: 18px 0; border-top: 1px solid var(--hair); } .bld-pi.is-act { box-shadow: -14px 0 0 -11px var(--blue); }
.bld-pi__n { display: block; font-size: 19px; font-weight: 300; line-height: 1.25; color: var(--ink); } .bld-pi__n:hover { color: var(--blue); } .bld-pi > small { display: block; margin-top: 2px; font-size: 13px; color: var(--text2); }
.bld-pi dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 12px 0 0; } .bld-pi dt { font-size: 12px; color: var(--text2); } .bld-pi dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); } .bld-pi dd.is-bad { color: var(--bad-text); }
.bld-pi__x { margin: 10px 0 0; font-size: 13.5px; } .bld-pi__x small { display: block; font-size: 12.5px; color: var(--text2); }
.bld-pi__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; } .bld-pi__a span { flex: 1 1 100%; font-size: 14px; } .bld-pi__d { margin-left: auto; color: var(--text2); font-weight: 400; }

@media (max-width: 760px) {
  .bld-pn__sh { top: auto; left: 0; right: 0; width: auto; max-height: 86vh; padding: 20px 20px 28px; box-shadow: 0 -0.75rem 1.5rem rgba(33, 33, 33, .16); animation: none; }
}

/* ---------- Names, info icons and the shelf ---------- */
.bld-nm { cursor: default; }
.bld-i { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: help; vertical-align: -5px; border-radius: 50%; } .bld-i:hover { color: var(--blue); } .bld-i svg { width: 16px; height: 16px; }
.bld-np { display: inline-block; margin-left: 8px; height: 20px; line-height: 18px; padding: 0 9px; border: 1px solid var(--line); border-radius: 56px; font-size: 11.5px; font-weight: 400; color: var(--text2); vertical-align: 1px; white-space: nowrap; }
.bld-cs dt .bld-i { margin-left: 2px; width: 20px; height: 20px; vertical-align: -6px; }

[data-product="builder"] .h3 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text2); }

/* =====================================================================================================
   The editor: a flow canvas (bfc-*). Three panes: Toolbox, Canvas, Inspector. Roche Blue is the only accent,
   hairlines and white space do the structuring, the lanes' --b100 fill is the only tint.
   ===================================================================================================== */
.bfc { --gz: 8px; --bfc-h: calc(100vh - 110px); }
.bfc[data-dk="step"] { --gz: 48px; }
.bfc-wrap { max-width: 1680px; margin: 0 auto; padding: 0 20px; height: var(--bfc-h); min-height: 560px; display: flex; flex-direction: column; }
.bfc .bld-tip, .bld-tip { z-index: 60; }
.bfc button { font-family: inherit; }
.bfc svg.i16 { width: 16px; height: 16px; flex: none; }

/* Top line */
.bfc-top { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.bfc-nm { position: relative; flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bfc-name { flex: 1; min-width: 0; max-width: 560px; border: 0; border-bottom: 1px solid transparent; padding: 2px 0; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; background: transparent; color: var(--ink); line-height: 1.2; text-overflow: ellipsis; }
.bfc-nm > svg { width: 16px; height: 16px; flex: none; color: var(--muted); pointer-events: none; }
.bfc-name:hover { border-bottom-color: var(--line); } .bfc-name:focus { border-bottom-color: var(--blue); outline: 0; }
.bfc-set { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0; }
.bfc-f { display: block; min-width: 0; margin: 0 0 12px; }
.bfc-set .bfc-f { margin: 0; }
.bfc-f > span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--text2); }
.bfc-f select, .bfc-f input[type="text"], .bfc-f input[type="date"] { width: 100%; height: 36px; border: 1px solid var(--muted); border-radius: 6px; padding: 0 10px; font-size: 14px; background-color: #FFFFFF; color: var(--ink); }
.bfc-f select:hover, .bfc-f input:hover { border-color: var(--ink2); }
.bfc-set select { width: 168px; } .bfc-set input[type="date"] { width: 150px; }
.bfc-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bfc-act .btn { height: 38px; }
.bfc-strip { display: none; }

/* Panes */
.bfc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) 320px; position: relative; border-bottom: 1px solid var(--hair); }
.bfc-tools, .bfc-insp { min-height: 0; overflow-y: auto; scrollbar-width: thin; background: #FFFFFF; }
.bfc-tools { border-right: 1px solid var(--hair); padding: 16px 0 24px; }
.bfc-insp { border-left: 1px solid var(--hair); padding: 16px 20px 24px; outline: 0; }
.bfc-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bfc-scrim { display: none; }

/* Toolbox */
.bfc-ph { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px; }
.bfc-ph h2 { margin: 0; font-size: 17px; font-weight: 600; } .bfc-ph .bfc-n, .bfc-done { display: none; }
.bfc-q { width: auto; height: 40px; margin: 10px 16px 4px; }
.bfc-q input { font-size: 14px; }
.bfc-tgt { margin: 8px 16px 2px; padding: 6px 10px; border-left: 2px solid var(--blue); font-size: 13px; color: var(--ink2); }
.bfc-tgt[hidden] { display: none; } .bfc-tgt .link { font-size: 13px; font-weight: 500; }
.bfc-g { margin-top: 4px; } .bfc-g h3 { margin: 0; }
.bfc-gh { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; border: 0; background: none; cursor: pointer; text-align: left; font-size: 13px; font-weight: 500; color: var(--text2); }
.bfc-gh span { flex: 1; } .bfc-gh small { font-size: 12px; color: var(--muted); font-weight: 400; } .bfc-gh:hover { color: var(--blue); }
.bfc-gh svg { transition: transform .15s; } .bfc-gh[aria-expanded="false"] svg { transform: rotate(-90deg); }
.bfc-g ul { list-style: none; margin: 0; padding: 0; }
.bfc-t { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 28px; align-items: center; column-gap: 8px; min-height: 40px; padding: 4px 10px 4px 16px; cursor: grab; }
.bfc-t__n { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bfc-t .ex { margin: 0; padding: 0 3px; height: 16px; font-size: 9px; letter-spacing: .02em; }
.bfc-t:hover .bfc-t__n { color: var(--blue); } .bfc-t:hover .bfc-ic { border-color: var(--b300); }
.bfc-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink2); }
.bfc-ic svg { width: 17px; height: 17px; display: block; }
.bfc-add { grid-column: 4; flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--b200); border-radius: 6px; background: #FFFFFF; color: var(--blue); cursor: pointer; }
.bfc-add:hover { background: var(--b050); border-color: var(--navy); color: var(--navy); } .bfc-add svg { width: 16px; height: 16px; }
.bfc-tn { display: none; }
.bfc-none { margin: 16px; font-size: 14px; color: var(--text2); }

/* Canvas */
.bfc-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 20px 0; }
.bld-note { min-height: 24px; font-size: 14px; color: var(--ink2); } .bld-note .link { font-size: 14px; }
.bfc-addtool { display: none; }
.bfc-cv { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.bfc-gr { box-sizing: border-box; display: grid; width: max-content; min-width: 100%; align-content: start; padding: 8px 28px 32px 20px; position: relative; }
.bfc-ch { margin: 0; font-size: 13px; font-weight: 500; color: var(--text2); }
.bfc-bz { position: relative; display: flex; flex-direction: column; gap: 8px; padding-right: 14px; border-right: 1px dashed var(--line); }
.bfc-bz .bfc-ch { height: 64px; flex: none; }
.bfc-bz .bfc-nd { padding: 10px; } .bfc-bz .bfc-slot { margin-top: 0; }

/* The journey line */
.bfc-line { z-index: 0; align-self: start; height: 2px; margin: 5px 0 0 6px; background: var(--b200); }
.bfc-hd { position: relative; z-index: 1; height: 64px; }
.bfc-node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--blue); background: #FFFFFF; }
.bfc-node.is-live { background: var(--blue); } .bfc-node.is-new { border: 1.5px dashed var(--muted); }
.bfc-hd__t { position: absolute; left: 0; top: 22px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.bfc-hd__t b { font-size: 13px; font-weight: 600; } .bfc-hd__t span { font-size: 13px; color: var(--text2); }
.bfc-hd--new .bfc-hd__t b { color: var(--muted); font-weight: 500; }
.bfc-gap { position: absolute; right: 12px; top: -5px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; font-size: 12px; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.bfc-gap:hover, .bfc-gap[aria-expanded="true"] { border-color: var(--b300); color: var(--blue); }
.bfc-gp { position: absolute; right: 0; top: 24px; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 6px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 0.75rem 1.5rem rgba(33, 33, 33, .12); font-size: 13px; white-space: nowrap; }
.bfc-gp span { min-width: 64px; text-align: center; }
.bfc-gp button, .bfc-gs button, .bfc-wk button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--b200); border-radius: 6px; background: #FFFFFF; color: var(--blue); cursor: pointer; }
.bfc-gp button:hover:not([disabled]), .bfc-gs button:hover:not([disabled]), .bfc-wk button:hover:not([disabled]) { background: var(--b050); border-color: var(--navy); }
.bfc-gp button[disabled], .bfc-gs button[disabled], .bfc-wk button[disabled] { color: var(--muted); border-color: var(--hair); cursor: default; }

/* Columns and cards */
.bfc-col { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding-bottom: 8px; }
.bfc-col--new { border: 1px dashed var(--line); }
.bfc-nd { position: relative; display: block; padding: 12px; border: 1px solid var(--line); background: #FFFFFF; cursor: pointer; text-align: left; }
.bfc-nd:hover { border-color: var(--b300); }
.bfc-nd.sel { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bfc-nd__h { display: flex; align-items: flex-start; gap: 10px; }
.bfc-nd__h .bfc-ic { width: 24px; height: 24px; } .bfc-nd__h .bfc-ic svg { width: 15px; height: 15px; }
.bfc-nd__h b { font-size: 14px; font-weight: 600; line-height: 1.3; padding-top: 2px; overflow-wrap: anywhere; }
.bfc-nd__p { display: block; margin-top: 6px; font-size: 13px; color: var(--text2); }
.bfc-nd__s { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text2); }
.bfc-nd__s.is-bad { color: var(--bad-text); }
.bfc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; } .bfc-dot.is-bad { background: var(--bad); }
.is-dragging { opacity: .4; }

/* Drop feedback */
.bfc-slot { display: none; }
.bfc-slot::after { content: 'Add in parallel'; display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--muted); }
.bfc[data-dk="step"] .bfc-col .bfc-slot, .bfc[data-dk="before"] .bfc-bz .bfc-slot { display: block; flex: none; height: 40px; border: 1px dashed var(--line); }
.bfc[data-dk="before"] .bfc-bz .bfc-slot::after { content: 'Drop here'; }
.bfc-col--new .bfc-slot::after { content: 'New step here'; }
.dz-on { outline: 2px dashed var(--b400); outline-offset: 0; }
.dz-on > .bfc-slot::after, .dz-on.bfc-ins::after { color: var(--blue); }
.bfc-ins { position: relative; min-width: 0; }
.bfc[data-dk="step"] .bfc-ins { border-left: 1px dashed var(--b200); border-right: 1px dashed var(--b200); }
.bfc[data-dk="step"] .bfc-ins::after { content: 'New step here'; position: absolute; inset: 0; display: grid; place-items: center; writing-mode: vertical-rl; font-size: 12px; color: var(--muted); }
.bfc-lc { position: relative; }
.bfc[data-dk="run"] .bfc-lc { border: 1px dashed var(--line); }
.bfc[data-dk="run"] .bfc-lc::after { content: 'Run from here'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.bfc[data-dk="run"] .bfc-lc.dz-on::after { color: var(--blue); }
.bfc.is-drag .bfc-ln { pointer-events: none; }

/* Running throughout */
.bfc-lh { margin-top: 12px; padding: 12px 0 6px; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 500; color: var(--text2); }
.bfc-ln { align-self: center; z-index: 1; height: 36px; margin: 2px 0; padding: 0 12px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; background: var(--b100); border-left: 2px solid var(--blue); font-size: 13px; cursor: pointer; }
.bfc-ln b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .bfc-ln span { flex: none; color: var(--text2); }
.bfc-ln:hover { box-shadow: inset 0 0 0 1px var(--b300); } .bfc-ln.sel { outline: 2px solid var(--blue); outline-offset: -2px; }
.bfc-ln .bfc-dot { margin-left: auto; }

/* Empty state */
.bfc-empty { padding: 12px 20px 40px; max-width: 800px; }
.bfc-big { display: grid; place-items: center; width: 100%; min-height: 240px; padding: 24px; border: 2px dashed var(--b200); background: #FFFFFF; color: var(--ink); font: inherit; text-align: center; }
button.bfc-big { cursor: pointer; } button.bfc-big:hover { border-color: var(--b400); }
.bfc-big h2 { margin: 0; font-size: 28px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
.bfc-big.dz-on { outline: 0; border-color: var(--b400); } .bfc-big.dz-on h2 { color: var(--blue); }
.bfc-sh { margin: 22px 0 8px; font-size: 13px; font-weight: 500; color: var(--text2); text-transform: none; letter-spacing: 0; }
.bfc-empty .bfc-sh { margin-top: 32px; }
.bfc-tpl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bfc-tpl button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bfc-tpl button:hover { border-color: var(--b300); } .bfc-tpl button:hover b { color: var(--blue); }
.bfc-tpl b { font-size: 14px; font-weight: 600; } .bfc-tpl span { flex: none; font-size: 13px; color: var(--text2); }

/* Inspector */
.bfc-ih { display: flex; justify-content: space-between; align-items: center; min-height: 28px; margin-bottom: 6px; }
.bfc-h { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.bfc-ih .bfc-h { font-size: 17px; }
.bfc-ih + .bfc-h { margin-bottom: 14px; }
.bfc-x { display: none; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; background: none; color: var(--text2); cursor: pointer; } .bfc-x:hover { color: var(--blue); }
.bfc-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text2); } .bfc-back:hover { color: var(--blue); } .bfc-back svg { width: 14px; height: 14px; }
.bfc-brief { margin: 12px 0 18px; }
.bfc-lab { display: block; font-size: 13px; font-weight: 500; color: var(--text2); }
.bfc-num { display: block; margin-top: 2px; font-size: 32px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bfc-num.is-bad { color: var(--bad-text); } .bfc-num--s { font-size: 22px; }
.bfc-brief small { display: block; margin-top: 2px; font-size: 13px; color: var(--text2); }
.bfc-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--hair); }
.bfc-grid > div { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.bfc-grid > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--hair); }
.bfc-grid dt { font-size: 13px; color: var(--text2); } .bfc-grid dd { margin: 2px 0 0; }
.bfc-grid b { font-size: 17px; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bfc-grid small { display: block; font-size: 12px; color: var(--text2); }
.bfc-row { border-bottom: 1px solid var(--hair); font-size: 14px; }
div.bfc-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
details.bfc-row > summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; list-style: none; cursor: pointer; }
details.bfc-row > summary::-webkit-details-marker { display: none; } details.bfc-row > summary > span { flex: 1; min-width: 0; }
details.bfc-row > summary:hover { color: var(--blue); } details.bfc-row[open] > summary svg { transform: rotate(180deg); }
.bfc-row b { font-weight: 600; } .bfc-row b.is-bad { color: var(--bad-text); }
.bfc-row .bld-cks, .bfc-row .bld-sgs { padding-bottom: 6px; }
.bfc-more { margin-top: 4px; } .bfc-more summary { list-style: none; cursor: pointer; padding: 12px 0 10px; font-size: 13px; font-weight: 500; color: var(--text2); display: flex; justify-content: space-between; align-items: center; }
.bfc-more summary::-webkit-details-marker { display: none; } .bfc-more[open] summary svg { transform: rotate(180deg); } .bfc-more summary:hover { color: var(--blue); }
.bfc-more .chk { padding: 2px 0 8px; } .bfc-more .link { display: block; margin-bottom: 8px; }
.bfc-ff { margin-top: 20px; } .bfc-dl { display: block; margin: 14px auto 0; font-weight: 500; }
.btn.is-off, span.btn.is-off { background: var(--hair); border-color: var(--hair); color: var(--muted); pointer-events: none; }
.bfc-wk { display: flex; align-items: center; gap: 10px; font-size: 14px; } .bfc-wk b { flex: 1; text-align: center; font-weight: 400; }
.bfc-cks { margin: 0 0 6px; } .bfc-cks .bld-ck__a .link[data-do="sel"] { display: none; } .bfc-row .bld-ck__a .link[data-do="sel"] { font-weight: 500; }
.bfc-needs { margin-top: 4px; }
.bfc .bld-mat { padding-top: 12px; } .bfc .bld-mat:first-of-type { border-top: 1px solid var(--hair); }
.bfc .bld-mat legend { font-size: 14px; }
.bfc .bld-two input:checked + span { background: #FFFFFF; border-color: var(--blue); color: var(--blue); font-weight: 600; }
.bfc-route { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink); } .bfc-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--text2); }
.bfc-pb { margin-top: 4px; } .bfc-pb ul { margin: 0 0 8px; padding: 0; list-style: none; }
.bfc-pb li { padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bfc-pb .link { font-weight: 500; }
.bfc-acts { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--hair); }
.bfc-acts .link { font-weight: 500; } .bfc-rm { color: var(--bad-text); }

/* Narrow list (under 900) */
.bfc-vl { padding: 4px 0 0; }
.bfc-vg { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 0 14px; border-top: 1px solid var(--hair); }
.bfc-vh { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.bfc-vh .bfc-node { position: static; flex: none; } .bfc-vh b { font-size: 14px; font-weight: 600; } .bfc-vh span { font-size: 13px; color: var(--text2); }
.bfc-vg .bfc-ch { margin-bottom: 2px; }
.bfc-gs { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 2px; font-size: 13px; color: var(--ink2); border-top: 1px solid var(--hair); }
.bfc-gs button { width: 36px; height: 36px; } .bfc-gs span { min-width: 76px; text-align: center; }
.bfc-vg .bfc-ln { height: auto; min-height: 36px; padding: 8px 12px; flex-wrap: wrap; white-space: normal; margin: 0; align-items: baseline; }

/* Bottom bar (under 900) */
.bld-bar2 { display: none; }

/* ---------- 900 to 1199: slide-over Inspector, summary strip ---------- */
@media (min-width: 900px) and (max-width: 1199px) {
  .bfc-body { grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
  .bfc-insp { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: 340px; border-left: 1px solid var(--line); box-shadow: -0.75rem 0 1.5rem rgba(33, 33, 33, .14); transform: translateX(104%); visibility: hidden; transition: transform .18s ease-out, visibility 0s .18s; }
  .show-insp .bfc-insp { transform: none; visibility: visible; transition: transform .18s ease-out; }
  .bfc-x { display: grid; }
  .bfc-strip { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 6px 22px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--text2); }
  .bfc-strip:empty { display: none; }
  .bfc-strip b { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--ink); } .bfc-strip b.is-bad { color: var(--bad-text); }
  .bfc-strip .link { font-weight: 500; } .bfc-strip .btn { margin-left: auto; height: 34px; }
  .bfc-act #bfc-get { display: none; }
  .bfc-t { padding-left: 12px; } .bfc-t .bfc-ic, .bfc-t .bfc-add { grid-row: 1 / span 2; } .bfc-t .bfc-add { grid-column: 4; } .bfc-t .ex { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 2px; }
  .bfc-tools .bfc-ph, .bfc-q, .bfc-gh, .bfc-tgt { padding-left: 12px; } .bfc-q { margin-left: 12px; margin-right: 12px; } .bfc-tgt { margin-left: 12px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bfc-insp, .bfc-gh svg { transition: none !important; } }

/* ---------- Under 900: vertical list, bottom sheets, sticky bar ---------- */
@media (max-width: 899px) {
  .bfc-wrap { height: auto; min-height: 0; display: block; padding: 0 16px 76px; }
  .bfc-top { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0; }
  .bfc-nm { flex: none; } .bfc-name { max-width: none; font-size: 22px; }
  .bfc-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bfc-set select, .bfc-set input[type="date"] { width: 100%; } .bfc-set .bfc-f:last-child { grid-column: 1 / -1; }
  .bfc-act { margin-left: 0; } .bfc-act .bld-mine { width: 100%; } .bfc-act #bfc-get { display: none; }
  .bfc-body { display: block; border-bottom: 0; }
  .bfc-main { display: block; }
  .bfc-bar { display: block; padding: 12px 0 0; min-height: 0; } .bfc-addtool { display: inline-flex; width: 100%; } .bld-note { padding-top: 8px; min-height: 0; }
  .bfc-cv { overflow: visible; }
  .bfc-empty { padding: 12px 0 24px; } .bfc-big { min-height: 160px; } .bfc-big h2 { font-size: 24px; } .bfc-tpl { grid-template-columns: minmax(0, 1fr); }
  .bfc-tools, .bfc-insp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86vh; padding: 18px 16px 28px; border: 0; border-top: 1px solid var(--line); box-shadow: 0 -0.75rem 1.5rem rgba(33, 33, 33, .16); transform: translateY(104%); visibility: hidden; transition: transform .2s ease-out, visibility 0s .2s; }
  .bfc-tools { padding: 16px 0 28px; }
  .show-tools .bfc-tools, .show-insp .bfc-insp { transform: none; visibility: visible; transition: transform .2s ease-out; }
  .bfc-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .32); }
  .show-tools .bfc-scrim, .show-insp .bfc-scrim { display: block; }
  .bfc-ph .bfc-w { display: none; } .bfc-ph .bfc-n { display: inline; } .bfc-done { display: inline-block; font-weight: 500; }
  .bfc-x { display: grid; }
  .bfc-t { min-height: 48px; grid-template-columns: 28px minmax(0, 1fr) auto 36px; padding-right: 16px; } .bfc-add { width: 36px; height: 36px; } .bfc-tools { outline: 0; }
  .bfc-tn { display: block; margin: 8px 16px 0; font-size: 13px; color: var(--ink2); } .bfc-tn:empty { display: none; } .bfc-tn .link { font-size: 13px; }
  .bld-bar2 { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: #FFFFFF; border-top: 1px solid var(--line); }
  .bld-bar2:empty { display: none; }
  .bfc-barb { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
  .bfc-barb small { display: block; font-size: 12px; color: var(--text2); } .bfc-barb b { font-size: 19px; font-weight: 300; color: var(--blue); }
  .bld-pn__sh { padding-bottom: 28px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .bfc-tools, .bfc-insp { transition: none !important; } }