/* BA path — the 'new' arm of the bapath experiment.
 *
 * Every rule is scoped under .bp so it cannot reach the old arm, which is
 * still served from the page's own <style> block to half the cohort.
 *
 * A chunk of this restyles class names that look like the old design's
 * (.psp-tool, .psp-step, .bap-bg …). That is deliberate and explained at the
 * top of includes/sections/bapath-new.php: five scripts bind to those names,
 * and ba-path-nav.js in particular walks #toolkit's direct children expecting
 * .psp-group and .psp-tool as siblings. Renaming them would have produced a
 * cleaner stylesheet and a broken toolkit.
 *
 * "Khối màu": radius 0, no shadow, no gradient, one accent, hairline rules. */

.bp{
  --bp-ink:#0a0a0a; --bp-paper:#fff; --bp-dim:#5c626b; --bp-lab:#9aa1ab;
  --bp-hair:#e6e6e6; --bp-blue:#1a3aff; --bp-green:#0f7a4a; --bp-warn:#b45309;
  --bp-pad:clamp(20px,5vw,64px);
  background:var(--bp-paper); color:var(--bp-ink);
}
.bp *{box-sizing:border-box}
.bp-in{max-width:1180px;margin:0 auto;padding:0 var(--bp-pad)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.bp-hero{background:var(--bp-blue);color:#fff;padding:clamp(44px,7vw,88px) 0 0}
.bp-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.82)}
/* 1.08, not the browser default: "Việt" and "số" stack a tone mark and an
   underdot, and at this size 1.2 was the first value with no collision. */
.bp-h1{font-size:clamp(32px,6vw,72px);line-height:1.08;letter-spacing:-.045em;font-weight:800;
  margin:16px 0 0;max-width:19ch;color:#fff}
.bp-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.5;margin:22px 0 0;max-width:56ch;
  color:rgba(255,255,255,.9)}
.bp-lead b{color:#fff;font-weight:700}

.bp-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.bp-btn{display:inline-block;font-size:13.5px;font-weight:800;text-decoration:none;
  padding:13px 22px;border:2px solid currentColor;border-radius:0;white-space:nowrap;
  line-height:1.2;cursor:pointer;font-family:inherit}
.bp-btn-solid{background:#fff;color:var(--bp-ink);border-color:#fff}
.bp-btn-solid:hover{background:#f0f0f0;color:var(--bp-ink);text-decoration:none}
.bp-btn-ghost{background:transparent;color:#fff}
.bp-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.bp-btn-on{background:var(--bp-ink);color:#fff;border-color:var(--bp-ink)}
.bp-btn-on:hover{background:#252525;color:#fff;text-decoration:none}
.bp-btn-line{background:transparent;color:var(--bp-ink);border-color:var(--bp-ink)}
.bp-btn-line:hover{background:var(--bp-ink);color:#fff;text-decoration:none}

.bp-figs{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.3);
  margin-top:clamp(34px,5vw,60px)}
@media (min-width:700px){ .bp-figs{grid-template-columns:repeat(3,1fr)} }
.bp-fig{padding:22px 0 24px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:700px){
  .bp-fig{border-bottom:0;border-left:1px solid rgba(255,255,255,.3);padding-left:24px}
  .bp-fig:first-child{border-left:0;padding-left:0}
}
/* Child combinators. `.bp-fig span` would also claim the <a> inside the third
   figure's label and the "0%" would drag it into the number style. */
.bp-fig > b{display:block;font-size:clamp(36px,5.4vw,66px);line-height:.88;font-weight:800;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.bp-fig > span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.78);margin-top:11px}
.bp-fig > span a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.bp-bar{height:6px;background:rgba(255,255,255,.25);margin-top:4px}
.bp-bar i{display:block;height:100%;background:#fff}

/* ── body rhythm ────────────────────────────────────────────────────────── */
.bp-body{padding:clamp(40px,6vw,76px) 0 0}
.bp-sec{margin-bottom:clamp(44px,6vw,80px)}
.bp-h2{font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:800;
  margin:0 0 10px}
.bp-sub{font-size:15px;line-height:1.55;color:var(--bp-dim);margin:0 0 24px;max-width:70ch}
.bp-sub b{color:var(--bp-ink)}
.bp-note{font-size:13.5px;color:var(--bp-dim);margin:14px 0 0}
.bp-note a{color:var(--bp-blue);font-weight:700}

/* ── panels ─────────────────────────────────────────────────────────────── */
.bp-panel{border:2px solid var(--bp-ink);padding:24px 26px;display:flex;gap:22px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.bp-panel-ink{background:var(--bp-ink);color:#fff;border-color:var(--bp-ink)}
.bp-panel-ink .bp-panel-p{color:rgba(255,255,255,.86)}
.bp-panel-ink .bp-panel-k{color:rgba(255,255,255,.6)}
.bp-panel-ink .bp-btn-on{background:#fff;color:var(--bp-ink);border-color:#fff}
.bp-panel-ink .bp-btn-on:hover{background:#e8e8e8;color:var(--bp-ink)}
.bp-panel-cta{border-left-width:10px;border-left-color:var(--bp-blue)}
.bp-panel-green{border-left-width:10px;border-left-color:var(--bp-green)}
.bp-panel-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--bp-lab)}
/* Every one of these sets colour explicitly, including where it looks like the
   parent already said so. design-system.css carries a bare `p{color:...}`, and
   an element rule beats an inherited value however specific the ancestor was —
   so `.bp-panel-ink{color:#fff}` did NOT reach its own headline. Measured: the
   heading on the black panel came out at 2.62:1, and the one on the green strip
   at 1.4:1. Found by sweeping every text node in .bp for contrast, not by
   looking, which is exactly why the strip one survived a screenshot review. */
.bp-panel-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;margin:8px 0 0;color:var(--bp-ink)}
.bp-panel-ink .bp-panel-t{color:#fff}
.bp-panel-green .bp-panel-t{color:var(--bp-ink)}
.bp-panel-p{font-size:14px;line-height:1.55;color:var(--bp-dim);margin:9px 0 0;max-width:64ch}
.bp-panel-p b,.bp-panel-t b{font-weight:800}

/* ── outcomes ───────────────────────────────────────────────────────────── */
.bp-cans{display:grid;grid-template-columns:1fr;border-top:1px solid var(--bp-hair)}
@media (min-width:820px){ .bp-cans{grid-template-columns:1fr 1fr} }
.bp-can{padding:15px 0 15px 30px;border-bottom:1px solid var(--bp-hair);font-size:14.5px;
  line-height:1.5;position:relative}
@media (min-width:820px){
  .bp-can:nth-child(odd){padding-right:26px;border-right:1px solid var(--bp-hair)}
}
.bp-can::before{content:'';position:absolute;left:6px;top:22px;width:9px;height:2px;
  background:var(--bp-green)}

/* ── background picker ──────────────────────────────────────────────────── */
.bap-bgs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.bp .bap-bg{font-family:inherit;font-size:13.5px;font-weight:700;padding:11px 17px;
  border:2px solid var(--bp-ink);background:var(--bp-paper);color:var(--bp-ink);
  border-radius:0;cursor:pointer;line-height:1.2}
.bp .bap-bg:hover{background:#f2f2f2}
.bp .bap-bg.on{background:var(--bp-ink);color:#fff}
.bp .bap-panel{border:2px solid var(--bp-ink);padding:22px 24px;background:var(--bp-paper)}
.bp .bap-hi{margin:0;color:var(--bp-dim);font-size:14.5px}
/* Injected by the inline script — styled here because it never exists in the
   markup this file ships with. */
.bp .bap-mentor{border-left:6px solid var(--bp-green);background:#f4faf7;padding:14px 16px;
  margin:0 0 18px}
.bp .bap-mentor i{display:none}         /* the icon carried no meaning the text lacked */
.bp .bap-mentor p{margin:0;font-size:14.5px;line-height:1.55;color:var(--bp-ink)}
.bp .bap-cols{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:700px){ .bp .bap-cols{grid-template-columns:1fr 1fr;gap:28px} }
.bp .bap-col h4{margin:0 0 10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700}
.bp .bap-col.strong h4{color:var(--bp-green)}
.bp .bap-col.gap h4{color:var(--bp-warn)}
.bp .bap-col h4 i{display:none}
.bp .bap-col ul{margin:0;padding-left:17px;color:var(--bp-dim);font-size:13.5px;line-height:1.65}
.bp .bap-start{margin-top:18px;padding-top:14px;border-top:1px solid var(--bp-hair);
  font-size:13.5px;color:var(--bp-dim)}
.bp .bap-start i{display:none}
.bp .bap-start a{color:var(--bp-blue);font-weight:800;text-decoration:none}
.bp .bap-start a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── the path ───────────────────────────────────────────────────────────── */
.bp .psp-steps{display:grid;grid-template-columns:1fr;border-top:2px solid var(--bp-ink)}
.bp .psp-step{border-bottom:1px solid var(--bp-hair)}
.bp .psp-step:last-child{border-bottom:2px solid var(--bp-ink)}
/* Set by the picker on the step it recommends. It is the only reason a learner
   can tell which of seven identical blocks is theirs. */
.bp .psp-step.rec .psp-card,.bp .psp-card.rec{background:#f5f7ff;
  box-shadow:inset 6px 0 0 var(--bp-blue)}
.bp .psp-card{padding:22px 0 24px}
.bp .psp-step.rec .psp-card{padding-left:22px}
.bp .psp-card-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bp .psp-step-num{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--bp-ink);color:#fff;font-size:12.5px;font-weight:800;
  align-self:center}
.bp .psp-step.done .psp-step-num{background:var(--bp-green)}
.bp .psp-card-top h3{flex:1 1 260px;margin:0;font-size:clamp(17px,1.9vw,22px);font-weight:800;
  letter-spacing:-.02em;line-height:1.25}
.bp .psp-badge{flex:0 0 auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:4px 9px;border:1px solid var(--bp-hair);color:var(--bp-lab)}
.bp .psp-b-done{background:var(--bp-green);border-color:var(--bp-green);color:#fff}
.bp .psp-b-prog{border-color:var(--bp-ink);color:var(--bp-ink)}
.bp .psp-learn,.bp .psp-do{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--bp-dim)}
.bp .psp-learn b,.bp .psp-do b{color:var(--bp-ink);font-weight:800}
.bp .psp-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--bp-dim)}
.bp .psp-prog{height:4px;background:var(--bp-hair);margin-top:14px}
.bp .psp-prog span{display:block;height:100%;background:var(--bp-blue)}
.bp .psp-card-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.bp .psp-blink{display:inline-block;font-size:12.5px;font-weight:800;text-decoration:none;
  padding:10px 17px;border:2px solid var(--bp-ink);background:var(--bp-ink);color:#fff;
  line-height:1.2}
.bp .psp-blink:hover{background:#252525;color:#fff;text-decoration:none}
.bp .psp-blink.ghost{background:transparent;color:var(--bp-ink)}
.bp .psp-blink.ghost:hover{background:var(--bp-ink);color:#fff}

/* ── toolkit ────────────────────────────────────────────────────────────── */
.bp .psp-group{margin:38px 0 0;padding:0 0 10px;border-bottom:2px solid var(--bp-ink);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:11px}
.bp .psp-group > span{flex:0 0 auto;width:24px;height:24px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--bp-blue);color:#fff;
  font-size:12px;letter-spacing:0}
.bp .psp-tool{border-bottom:1px solid var(--bp-hair);padding:20px 0 22px}
.bp .psp-tool > h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.015em;
  line-height:1.3}
.bp .psp-tool-sub{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--bp-dim);
  max-width:74ch}
.bp .psp-tool-sub b{color:var(--bp-ink);font-weight:700}
.bp .psp-dls{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.bp .psp-dl{display:inline-block;font-size:12px;font-weight:700;text-decoration:none;
  padding:8px 13px;border:1px solid var(--bp-ink);color:var(--bp-ink)}
.bp .psp-dl:hover{background:var(--bp-ink);color:#fff;text-decoration:none}

/* ── the parts ba-path-nav.js BUILDS ──────────────────────────────────────
   None of this exists in the markup this file ships alongside: the sticky
   group nav, the collapse head, the progress bar and the "Đã làm" button are
   all created at runtime. They have to be styled here anyway, because the old
   arm's stylesheet — which is where they used to get their looks — is no
   longer loaded on this arm. Miss one and it renders unstyled, which on a
   collapse control means a toolkit that looks broken rather than plain. */
.bp .psp-tool-head{position:relative;display:block;width:100%;text-align:left;
  background:none;border:0;padding:0 34px 0 0;font:inherit;color:inherit;cursor:pointer}
.bp .psp-tool-head h3{margin:0}
.bp .psp-tool-head .psp-tool-sub{margin:6px 0 0}
.bp .psp-tool-chev{position:absolute;right:2px;top:4px;color:var(--bp-lab);font-size:12px;
  transition:transform .18s ease}
.bp .psp-tool-head[aria-expanded="true"] .psp-tool-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .bp .psp-tool-chev{transition:none} }

/* max-height, not display:none — several tools measure themselves when they
   draw and would render at zero width inside a hidden box. */
.bp .psp-tool-body{max-height:0;overflow:hidden}
.bp .psp-tool.is-open .psp-tool-body{max-height:none;overflow:visible;padding-top:16px}
.bp .psp-tool-static{padding:20px 0 22px}
.bp .psp-tool.is-done{border-bottom-color:var(--bp-green)}
.bp .psp-tool.is-done .psp-tool-head h3::after{content:' ✓';color:var(--bp-green)}
.bp .psp-tool-done{display:inline-block;margin-top:14px;font-family:inherit;font-size:12px;
  font-weight:800;padding:8px 14px;border:1px solid var(--bp-ink);background:transparent;
  color:var(--bp-ink);border-radius:0;cursor:pointer;line-height:1.2}
.bp .psp-tool-done:hover{background:var(--bp-ink);color:#fff}
.bp .psp-tool-done.on{background:var(--bp-green);border-color:var(--bp-green);color:#fff}

.bp .psp-nav-top{height:1px}
.bp .psp-nav{display:flex;gap:0;overflow-x:auto;position:sticky;top:0;z-index:20;
  background:var(--bp-paper);border-bottom:2px solid var(--bp-ink);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.bp .psp-nav::-webkit-scrollbar{display:none}
.bp .psp-nav a{flex:0 0 auto;white-space:nowrap;text-decoration:none;padding:12px 15px;
  font-size:12px;font-weight:800;color:var(--bp-ink);display:flex;align-items:center;gap:8px;
  border-right:1px solid var(--bp-hair)}
.bp .psp-nav a:last-child{border-right:0}
.bp .psp-nav a b{background:var(--bp-blue);color:#fff;width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.bp .psp-nav a.on{background:var(--bp-ink);color:#fff}
.bp .psp-nav a.on b{background:rgba(255,255,255,.24);color:#fff}
.bp .psp-nav-n{font-size:11px;color:var(--bp-dim);font-variant-numeric:tabular-nums}
.bp .psp-nav a.on .psp-nav-n{color:rgba(255,255,255,.85)}
.bp .psp-nav-n.all{color:var(--bp-green);font-weight:800}
.bp .psp-nav a.on .psp-nav-n.all{color:#a7e8c8}

.bp .psp-progress{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12.5px;
  color:var(--bp-dim)}
.bp .psp-progress-t b{color:var(--bp-ink);font-variant-numeric:tabular-nums}
.bp .psp-progress-bar{flex:1;max-width:260px;height:6px;background:var(--bp-hair);overflow:hidden}
.bp .psp-progress-bar i{display:block;height:100%;background:var(--bp-green);
  transition:width .25s ease}
@media (prefers-reduced-motion:reduce){ .bp .psp-progress-bar i{transition:none} }
@media (max-width:640px){ .bp .psp-progress-bar{max-width:none} }

/* ba-terms.js turns glossary words into these. */
.bp .ba-term{border-bottom:1px dotted var(--bp-lab);cursor:help;color:inherit}

/* ── capstone ───────────────────────────────────────────────────────────── */
.bp .bap-cap{border:2px solid var(--bp-ink);padding:24px 26px}
.bp .bap-brief{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--bp-hair);
  font-size:14.5px;line-height:1.6;color:var(--bp-dim)}
.bp .bap-brief b{color:var(--bp-ink);font-weight:800}
.bp #ba-tool-capstone ol{margin:0;padding-left:20px;display:grid;gap:12px}
.bp #ba-tool-capstone li{font-size:14px;line-height:1.55;color:var(--bp-dim)}
.bp #ba-tool-capstone label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.bp #ba-tool-capstone input{margin-top:3px;flex:0 0 auto}
.bp #ba-tool-capstone b{color:var(--bp-ink);font-weight:800}
.bp #ba-tool-capstone a{color:var(--bp-blue);font-weight:700}

/* ── domain ─────────────────────────────────────────────────────────────── */
.bp .bap-dom{border-top:1px solid var(--bp-hair)}
.bp .bap-dom details{border-bottom:1px solid var(--bp-hair)}
.bp .bap-dom summary{cursor:pointer;padding:15px 0;font-size:15.5px;font-weight:800;
  letter-spacing:-.01em;list-style:none}
.bp .bap-dom summary::-webkit-details-marker{display:none}
.bp .bap-dom summary::after{content:'+';float:right;font-weight:700;color:var(--bp-lab)}
.bp .bap-dom details[open] summary::after{content:'–'}
.bp .bap-dom summary i{display:none}
.bp .bap-dom .bd{padding:0 0 18px;font-size:13.5px;line-height:1.7;color:var(--bp-dim);
  max-width:78ch}
.bp .bap-dom .bd b{color:var(--bp-ink);font-weight:800}

/* ── certificate ────────────────────────────────────────────────────────── */
.bp .bap-cert{border:2px solid var(--bp-ink);padding:26px}
.bp .bap-cert-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;
  margin:8px 0 0;color:var(--bp-ink)}
.bp .bap-cert-p{font-size:14px;line-height:1.55;color:var(--bp-dim);margin:9px 0 0;max-width:64ch}
.bp .bap-cert-p a{color:var(--bp-blue);font-weight:700}
.bp .bap-cert-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.bp .bap-cert input{font-family:inherit;font-size:14px;padding:12px 14px;
  border:2px solid var(--bp-ink);border-radius:0;min-width:200px;flex:1 1 200px}
.bp .bap-cert button{font-family:inherit;font-size:13.5px;font-weight:800;padding:12px 22px;
  border:2px solid var(--bp-ink);background:var(--bp-ink);color:#fff;border-radius:0;
  cursor:pointer;line-height:1.2}
.bp .bap-cert button:hover{background:#252525}
.bp #bapCertOut{margin-top:20px;border:2px solid var(--bp-ink);padding:30px 26px;text-align:center}
.bp #bapCertOut .c-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--bp-lab)}
.bp #bapCertOut .c-n{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;
  margin:12px 0 10px}
.bp #bapCertOut .c-t{font-size:13.5px;line-height:1.6;color:var(--bp-dim)}

/* ── what next ──────────────────────────────────────────────────────────── */
.bp-next{display:grid;grid-template-columns:1fr;border:2px solid var(--bp-ink)}
@media (min-width:700px){ .bp-next{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .bp-next{grid-template-columns:repeat(4,1fr)} }
.bp-next-c{display:block;padding:20px 22px 22px;text-decoration:none;color:var(--bp-ink);
  border-bottom:1px solid var(--bp-hair)}
.bp-next-c:last-child{border-bottom:0}
@media (min-width:700px){
  .bp-next-c{border-right:1px solid var(--bp-hair);border-bottom:1px solid var(--bp-hair)}
  .bp-next-c:nth-child(2n){border-right:0}
  .bp-next-c:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1000px){
  .bp-next-c{border-right:1px solid var(--bp-hair);border-bottom:0}
  .bp-next-c:nth-child(2n){border-right:1px solid var(--bp-hair)}
  .bp-next-c:last-child{border-right:0}
}
.bp-next-c:hover{background:#f6f6f6;text-decoration:none;color:var(--bp-ink)}
.bp-next-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.bp-next-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--bp-dim)}

/* ── the glossary tooltip ─────────────────────────────────────────────────
   NOT scoped under .bp, and that is not an oversight: ba-terms.js does
   document.body.appendChild(tip), so the panel is a sibling of <main>, not a
   descendant. Every `.bp .ba-tip` rule would miss it.

   Unscoped is safe here because this file only loads on the new arm — the old
   arm keeps its own copy in the page's <style> block. Without these rules the
   tip still exists and still gets its is-on class; it is just position:static
   with no background, so it renders as invisible text somewhere down the page.
   88 terms on this page and not one of them could show anything. */
.ba-tip{position:absolute;z-index:80;display:none;max-width:340px;
  background:var(--bp-ink,#0a0a0a);color:#e9eaec;border:2px solid var(--bp-ink,#0a0a0a);
  border-radius:0;padding:14px 16px;font-size:13.5px;line-height:1.55;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.ba-tip.is-on{display:block}
.ba-tip-t{font-weight:800;color:#fff;font-size:14.5px;margin-bottom:6px;padding-right:22px}
.ba-tip-d{color:#cfd2d6}
.ba-tip-d b{color:#fff}
.ba-tip-e{margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.16);
  color:#cfd2d6}
.ba-tip-e span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#9aa1ab;margin-bottom:4px}
.ba-tip-x{position:absolute;top:7px;right:8px;background:none;border:0;color:#9aa1ab;
  font-size:14px;cursor:pointer;padding:4px;line-height:1}
.ba-tip-x:hover{color:#fff}
/* Phones get it as a bottom sheet instead of a floating panel. */
.ba-tip.is-sheet{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;
  max-width:none;width:auto;border-width:2px 0 0;padding:20px 18px 26px}
.ba-tip.is-sheet .ba-tip-x{display:block;font-size:18px;top:12px;right:12px}

.bp .ba-term:hover,.bp .ba-term:focus-visible{background:#eef1ff;
  border-bottom-color:var(--bp-blue);outline:0}

/* ── what the tool scripts inject ─────────────────────────────────────────
   ba-tools.js, ba-tools2.js and ba-sql.js each append their own <style> with
   the OLD design baked in — 31 border-radius declarations and a set of blue and
   green rounded callouts between them. Those sheets go into <head> at runtime
   and this file is a <link> in the body, so it already wins on order; the .bp
   prefix wins on specificity too. Overriding here rather than editing the
   scripts keeps the old arm looking exactly as it did. */
/* ba-tools.js, ba-tools2.js and ba-sql.js also emit a `pst-` namespace (shared
   with ps-tools.js) and style a bare `code` — neither matched the ba- prefixes
   below, so .pst-preview / .pst-verdict / .pst-mtable kept 10px and .pst-vlabel
   a 999px pill. These only exist after a widget renders, so nothing that reads
   the served HTML can catch them. */
.bp .psp-tool-body [class^="ba-"],
.bp .psp-tool-body [class*=" ba-"],
.bp .psp-tool-body [class^="pst-"],
.bp .psp-tool-body [class*=" pst-"],
.bp .psp-tool-body code{border-radius:0}
.bp .psp-tool-body [class^="pst-"],
.bp .psp-tool-body [class*=" pst-"]{box-shadow:none}
.bp .ba-ib-link{background:#f5f7ff;border:2px solid var(--bp-blue);border-radius:0;
  padding:16px 18px}
.bp .ba-ib-txt b{color:var(--bp-ink)}
.bp .ba-ib-ico{display:none}          /* a stack glyph next to the words it repeats */
/* !important because the injected rule uses it:
     .ba-ib-go{background:#2563eb !important;color:#fff !important;...}
   An important declaration is only beaten by another important one, and then
   specificity decides — .bp .ba-ib-go (0,2,0) over .ba-ib-go (0,1,0). Without
   it the button squared off but kept the old blue, which looked like a
   half-finished restyle rather than a deliberate one. */
.bp .ba-ib-go{background:var(--bp-ink)!important;color:#fff!important;
  border:2px solid var(--bp-ink)!important;border-radius:0;font-weight:800}
.bp .ba-ib-go:hover{background:#252525!important;color:#fff!important;
  border-color:#252525!important}
.bp .ba-ib-tips{background:#f4faf7;border:0;border-left:6px solid var(--bp-green);
  border-radius:0;padding:16px 18px}
.bp .ba-ib-tips-h{color:var(--bp-green);font-weight:800}
.bp .ba-ib-tips-h i{display:none}
.bp .ba-ib-tips-f{color:var(--bp-dim)}
.bp .ba-ex,.bp .ba-ex-body,.bp .ba-ex-good{border-radius:0}
.bp .ba-mos,.bp .ba-mos-h,.bp .ba-mmd,.bp .ba-grid-row{border-radius:0}
/* Inputs inside the tools: square them off so a tool does not read as a
   different product from the page it sits in. */
.bp .psp-tool-body input,.bp .psp-tool-body textarea,.bp .psp-tool-body select,
.bp .psp-tool-body button{border-radius:0}

/* ── closing strip ──────────────────────────────────────────────────────── */
.bp-strip{background:var(--bp-green);color:#fff;padding:clamp(34px,5vw,60px) 0}
.bp-strip-in{display:flex;gap:24px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.bp-strip-t{font-size:clamp(20px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin:0;color:#fff}
.bp-strip-s{font-size:14.5px;line-height:1.55;margin:9px 0 0;color:rgba(255,255,255,.9);
  max-width:60ch}
.bp-strip .bp-btn-on{background:#fff;color:var(--bp-ink);border-color:#fff}
.bp-strip .bp-btn-on:hover{background:#eee;color:var(--bp-ink)}