/* byASB · shared UX layer — palette, search, TOC, progress, anchors, related.
   Every colour comes from the tokens in /work/work.css. Nothing here hardcodes
   a hue, so the whole layer follows the site theme. */

/* ---------- reading progress ---------- */
#bp-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9998;
  background:linear-gradient(90deg,var(--signal),var(--signal-soft));
  transition:width .1s linear;pointer-events:none}

/* ---------- heading anchors ---------- */
.bp-anchor{opacity:0;margin-left:.45em;font-family:var(--mono);font-size:.6em;
  color:var(--signal-soft);text-decoration:none;vertical-align:middle;
  transition:opacity .18s ease;cursor:pointer;border:0;background:none;padding:0}
h2:hover .bp-anchor,h3:hover .bp-anchor,.bp-anchor:focus-visible{opacity:1}
.bp-anchor:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- read time ---------- */
.bp-readtime{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}

/* ---------- table of contents ---------- */
/* Lives in the right-hand gutter: the article column is ~68ch inside a 1360px
   wrap, so the space to the right is free. Anchored by its right edge so it can
   never grow back over the text. Hidden until the hero has scrolled past,
   because the h1 runs the full width of the wrap. */
.bp-toc{position:fixed;right:max(20px,calc(50% - 660px));top:120px;width:180px;z-index:40;
  max-height:calc(100vh - 190px);overflow-y:auto;padding-left:4px;
  }
/* The hero h1 runs the full wrap width, so at the widths where the TOC exists
   the hero reserves that gutter. Geometry, not scroll state — nothing to go
   wrong at runtime. */
@media(min-width:1281px){
  .hero h1,.hero .lede,.hero .frame,.hero .status,.hero .crumb{max-width:calc(100% - 230px)}
}
.bp-toc-title{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.bp-toc a{display:block;font-size:12.5px;line-height:1.4;color:var(--faint);
  padding:6px 0 6px 12px;border-left:1px solid var(--line);
  transition:color .2s ease,border-color .2s ease}
.bp-toc a:hover{color:var(--ink);border-color:var(--line-strong)}
.bp-toc a.on{color:var(--signal-soft);border-color:var(--signal)}
@media(max-width:1280px){.bp-toc{display:none}}

/* ---------- command palette ---------- */
#bp-hint{position:fixed;right:18px;bottom:18px;z-index:60;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);background:var(--bone-2);border:1px solid var(--line);
  padding:8px 11px;cursor:pointer;transition:color .2s ease,border-color .2s ease}
#bp-hint:hover{color:var(--ink);border-color:var(--line-strong)}
#bp-hint kbd{font-family:var(--mono);color:var(--signal-soft);background:none;border:0;padding:0}
@media(max-width:640px){#bp-hint{display:none}}

#bp-overlay{position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(5,7,10,.82);backdrop-filter:blur(6px);padding:12vh 20px 20px}
#bp-overlay.open{display:block}
#bp-box{width:min(640px,100%);margin:0 auto;background:var(--bone-2);
  border:1px solid var(--line-strong);display:flex;flex-direction:column;max-height:70vh}
#bp-input{background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-size:17px;padding:18px 20px;width:100%}
#bp-input:focus{outline:none;border-bottom-color:var(--signal)}
#bp-input::placeholder{color:var(--faint)}
#bp-results{overflow-y:auto;padding:6px 0}
.bp-res{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:11px 20px;cursor:pointer;border-left:2px solid transparent}
.bp-res.sel{background:rgba(157,177,204,.06);border-left-color:var(--signal)}
.bp-res .t{font-size:14.5px;color:var(--ink);line-height:1.35}
.bp-res .t em{font-style:normal;color:var(--signal-soft)}
.bp-res .d{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch}
.bp-res .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.bp-empty{padding:22px 20px;font-size:14px;color:var(--faint)}
#bp-foot{border-top:1px solid var(--line);padding:10px 20px;display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#bp-foot b{color:var(--mute);font-weight:400}

/* ---------- related ---------- */
.bp-related{border-top:1px solid var(--line);margin-top:8px;padding:34px 0 4px}
.bp-related .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-soft);margin-bottom:18px}
.bp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.bp-rel-grid{grid-template-columns:1fr}}
.bp-rel-grid a{background:var(--bone-2);padding:20px 20px;display:flex;flex-direction:column;gap:8px;
  transition:background .2s ease}
.bp-rel-grid a:hover{background:rgba(157,177,204,.05)}
.bp-rel-grid .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.bp-rel-grid .t{font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  #bp-progress,.bp-anchor,.bp-toc a,.bp-rel-grid a,#bp-hint{transition:none}
}

/* ---------- currently-shipping strip ---------- */
.bp-strip{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:28px;
  border:1px solid var(--line);background:var(--bone-2);padding:12px 16px;
  transition:border-color .2s ease}
.bp-strip:hover{border-color:var(--line-strong)}
.bp-strip .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--live);white-space:nowrap}
.bp-strip .v{font-size:14px;color:var(--ink);line-height:1.4;flex:1;min-width:12ch}
.bp-strip .go{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-soft);white-space:nowrap}

/* ---------- subscribe ---------- */
.bp-sub{border-top:1px solid var(--line);padding:40px 0}
.bp-sub-box{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media(max-width:820px){.bp-sub-box{grid-template-columns:1fr;gap:22px}}
.bp-sub .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-soft);display:block;margin-bottom:10px}
.bp-sub h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,24px);
  letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:0 0 10px}
.bp-sub p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mute);max-width:52ch}
.bp-sub p a{color:var(--signal-soft)}
.bp-sub-form{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.bp-sub-form input{flex:1;min-width:200px;background:var(--bone-2);border:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-size:15px;padding:12px 14px}
.bp-sub-form input:focus{outline:none;border-color:var(--signal)}
.bp-sub-form button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--signal);color:#05070A;border:0;
  padding:13px 20px;cursor:pointer;font-weight:500}
.bp-sub-form button:hover{background:var(--signal-soft)}
.bp-sub-form button:disabled{opacity:.55;cursor:default}
.bp-sub-msg{flex-basis:100%;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--value);min-height:14px}