/* Robotics guides (part B): interactive figures, code blocks and tables.
   Built on article.css tokens only; everything is scoped under body.rb so it
   cannot leak into other articles. Teal is the only accent. */
.rb {
  /* names the older robotics markup and SVGs use */
  --paper: var(--bg); --surface: var(--panel); --sunk: rgba(28, 27, 25, 0.045);
  --rule: var(--line); --rule-2: var(--line-soft); --grid: var(--line-soft);
  --blue: var(--accent); --blue-soft: var(--vine-soft);
  --green: var(--accent); --alert: var(--text);
  --small: 0.84rem;
  /* FRC alliance colours carry meaning, so they stay red and blue (muted for #f7f6f2) */
  --alliance-blue: #3a6596; --alliance-red: #a5463c;
}

.rb section h3:first-child { margin-top: 0; }
.rb ol.steps { margin: 0 0 20px; padding-left: 1.4em; color: var(--body); }
.rb ol.steps li { margin-bottom: 12px; padding-left: 4px; }
.rb ol.steps li::marker { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.rb .label { margin-bottom: 8px; }

/* ---------- figures ---------- */
.rb figure svg { width: 100%; }
.rb figure svg text.mono { font-family: var(--mono); }
.rb .fig-body { display: grid; gap: 16px; }

/* ---------- code ---------- */
.rb .code {
  background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 3px;
  overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; line-height: 1.6; padding: 14px 16px;
  margin: 0 0 20px;
}
.rb .code pre { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; overflow: visible; }
.rb .code .k { color: var(--accent); }
.rb .code .s { color: var(--text); }
.rb .code .c { color: var(--faint); font-style: italic; }
.rb .code .hl { color: var(--accent); font-weight: 600; }
.rb p code, .rb li code, .rb figcaption code, .rb td code { background: var(--sunk); padding: 0.05em 0.3em; border-radius: 2px; }

/* ---------- small controls ---------- */
.rb .chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.rb .chip, .rb .toggle button {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.3;
  border: 1px solid var(--line); background: transparent; color: var(--body);
  padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.rb .chip:hover, .rb .toggle button:hover { border-color: var(--accent); color: var(--accent); }
.rb .chip[aria-pressed="true"], .rb .toggle button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--vine-soft); color: var(--accent);
}
.rb .toggle { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rb :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* wide diagrams keep a legible minimum size and scroll sideways on phones */
.rb .fig-scroll, .rb .figbody { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rb .fig-scroll > svg, .rb .figbody > svg { min-width: 600px; }

/* ---------- Fig 1: timeline ---------- */
.rb .tl { display: grid; gap: 6px; }
.rb .tl-cols { display: grid; grid-template-columns: 3.4rem repeat(4, 1fr); align-items: center; }
.rb .tl-cols.headrow { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-bottom: 6px; }
.rb .tl-year { font-family: var(--sans); font-size: 0.76rem; color: var(--muted); text-align: center; }
.rb .tl-name { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--body); }
.rb .tl-track { grid-column: 2 / -1; position: relative; height: 2.15rem; }
.rb .tl-bar {
  position: absolute; top: 0.25rem; bottom: 0.25rem; display: flex; align-items: center; padding-inline: 0.45rem;
  font-family: var(--sans); font-size: 0.72rem; white-space: nowrap; overflow: hidden; border-radius: 2px;
  transform-origin: left center; transition: transform 0.8s cubic-bezier(.2,.7,.3,1);
}
.rb .tl.anim .tl-bar { transform: scaleX(0); }
.rb .tl.anim .tl-bar > span { opacity: 0; transition: opacity 0.4s ease 0.5s; }
.rb .tl.anim.in .tl-bar { transform: scaleX(1); }
.rb .tl.anim.in .tl-bar > span { opacity: 1; }
.rb .tl-bar.legacy { background: var(--sunk); color: var(--muted); border: 1px solid var(--line-soft); }
.rb .tl-bar.new { background: var(--vine-soft); color: var(--accent); border: 1px solid var(--accent); }
.rb .tl-bar.fade { -webkit-mask-image: linear-gradient(to right, #000 68%, transparent); mask-image: linear-gradient(to right, #000 68%, transparent); }
.rb .tl-cut { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.rb .tl-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.rb .tl-grid i { border-left: 1px dashed var(--line); }
.rb .tl-grid i:first-child { border-left: 0; }
.rb .tl-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }
.rb .tl-legend span { display: flex; align-items: center; gap: 7px; }
.rb .tl-legend .sw { width: 0.75rem; height: 0.75rem; flex: none; display: inline-block; }
.rb .tl-legend .sw.cut { background: var(--text); width: 2px; height: 1rem; }
.rb .tl-legend .sw.new { background: var(--vine-soft); border: 1px solid var(--accent); }
.rb .tl-legend .sw.old { background: var(--sunk); border: 1px solid var(--line); }

/* ---------- Fig 2: board ---------- */
.rb .hot { cursor: pointer; }
.rb .hot [data-shell] { transition: fill 0.18s ease, stroke 0.18s ease; }
.rb .hot:hover [data-shell] { stroke: var(--accent); }
.rb .hot:focus-visible { outline: none; }
.rb .hot:focus-visible [data-shell], .rb .hot.sel [data-shell] { stroke: var(--accent); stroke-width: 3; }
.rb .hot.sel [data-shell]:not(.keepfill) { fill: var(--vine-soft); }
.rb .detail { border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; min-height: 8.5rem; margin-bottom: 14px; }
.rb .detail h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--text); }
.rb .detail p { font-size: 0.95rem; margin: 0 0 8px; }
.rb .detail .hint { color: var(--muted); font-style: italic; font-size: 0.88rem; }

/* ---------- Fig 4: field ---------- */
.rb .field-readout { display: flex; flex-wrap: wrap; gap: 12px 28px; font-family: var(--sans); font-size: 0.8rem; }
.rb .field-readout div { display: flex; flex-direction: column; gap: 2px; }
.rb .field-readout .k { color: var(--muted); }
.rb .field-readout .v { font-family: var(--mono); font-size: 0.9rem; color: var(--text); }
.rb .field-readout .v.good { color: var(--accent); }
.rb .field-readout .v.meh { color: var(--muted); }

/* ---------- Fig 5: does it compile ---------- */
.rb .ux { display: grid; gap: 12px; }
.rb .ux-pick { display: grid; gap: 6px; }
.rb .ux-lab { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }
.rb .ux-pick .chip { font-family: var(--mono); font-size: 0.74rem; }
.rb .ux-out .code { margin-bottom: 12px; }
.rb .u-verdict { border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; }
.rb .u-verdict.bad { border-left-color: var(--text); border-left-style: dashed; }
.rb .u-verdict .mk { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 4px; }
.rb .u-verdict.bad .mk { color: var(--text); }
.rb .u-verdict p { font-size: 0.95rem; margin: 0; }
.rb .u-verdict b { font-weight: 600; color: var(--text); }

/* ---------- Fig 6: allocation ---------- */
.rb .alloc { display: grid; gap: 16px; }
.rb .alloc-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.rb .alloc-slider { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.rb .alloc-slider input { accent-color: var(--accent); width: 7.5rem; }
.rb .alloc-slider output { font-family: var(--mono); color: var(--text); min-width: 1.7rem; text-align: right; }
.rb .lanes { display: grid; gap: 16px; }
@media (min-width: 620px) { .rb .lanes { grid-template-columns: 1fr 1fr; } }
.rb .lane { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.rb .lane-h { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--text); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rb .lane-h i { font-style: normal; font-weight: 400; color: var(--muted); }
.rb .lane-h i.ok { color: var(--accent); }
.rb .boxwrap { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; min-height: 6.2rem; }
.rb .obj { font-family: var(--mono); font-size: 0.68rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); white-space: nowrap; }
.rb .obj.live { border-color: var(--accent); background: var(--vine-soft); color: var(--accent); }
.rb .obj.more { border-style: dashed; }
.rb .lane-stat { display: flex; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); border-top: 1px dotted var(--line); padding-top: 6px; }
.rb .lane-stat b { font-family: var(--mono); font-weight: 400; color: var(--text); }
.rb .heap { display: grid; gap: 8px; }
.rb .heap-lab { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.rb .heap-lab i { font-style: normal; color: var(--accent); }
.rb .heap-bar { height: 0.9rem; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.rb .heap-bar i { display: block; height: 100%; width: 0; background: var(--accent); opacity: 0.7; transition: width 0.2s linear; }
.rb .heap.sweep .heap-bar i { background: var(--text); transition: none; }
.rb .alloc-read { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin: 0; }
.rb .alloc-read b { color: var(--text); font-weight: 500; }

/* ---------- Fig 8: op modes ---------- */
.rb .om { display: grid; gap: 18px; }
.rb .ds { border: 1px solid var(--line); border-radius: 3px; }
.rb .ds-top { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.rb .ds-top button {
  font-family: var(--sans); font-size: 0.8rem; background: transparent; color: var(--muted);
  border: 0; border-bottom: 2px solid transparent; padding: 10px 4px; cursor: pointer;
}
.rb .ds-top button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.rb .ds-body { padding: 14px; display: grid; gap: 12px; }
.rb .ds-group { display: grid; gap: 4px; }
.rb .ds-group .label { margin: 0; }
.rb .ds-group[data-active="false"] { opacity: 0.4; }
.rb .ds-list { display: grid; gap: 4px; }
.rb .ds-list button {
  text-align: left; font-family: var(--mono); font-size: 0.78rem; background: transparent; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 2px; padding: 6px 9px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px;
}
.rb .ds-list button[aria-pressed="true"] { border-color: var(--accent); background: var(--vine-soft); color: var(--accent); }
.rb .ds-list button:disabled { cursor: not-allowed; color: var(--muted); }
.rb .ds-list button .mk { opacity: 0; }
.rb .ds-list button[aria-pressed="true"] .mk { opacity: 1; }
.rb .lifecycle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rb .lifecycle .st { font-family: var(--mono); font-size: 0.74rem; border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px; }
.rb .lifecycle .ar { color: var(--faint); }
.rb .om-note { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ---------- Fig 9: driver station mock ---------- */
.rb .dsm { border: 1px solid var(--line); border-radius: 3px; font-family: var(--sans); font-size: 0.8rem; }
.rb .dsm-bar, .rb .dsm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 12px; color: var(--muted); }
.rb .dsm-bar { border-bottom: 1px solid var(--line); color: var(--text); }
.rb .dsm-foot { border-top: 1px solid var(--line); }
.rb .dsm-foot .lnk { color: var(--accent); }
.rb .dsm-grid { display: grid; }
.rb .dsm-panel { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.rb .dsm-panel:last-child { border-bottom: 0; }
.rb .dsm-panel.center { align-items: stretch; }
.rb .dsm-panel .label { margin: 0; }
.rb .dsm-sel { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 2px; padding: 6px 9px; }
.rb .dsm-sel .k { color: var(--muted); }
.rb .dsm-sel .v { color: var(--accent); }
.rb .dsm-sel.dim { opacity: 0.5; }
.rb .dsm-note { font-size: 0.78rem; color: var(--muted); margin: 0; }
.rb .dsm-enable { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rb .dsm-enable button { border: 1px solid var(--line); border-radius: 2px; font: inherit; font-size: 0.9rem; padding: 10px 6px; cursor: default; background: transparent; color: var(--muted); }
.rb .dsm-enable .dis.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.rb .dsm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rb .dsm-modes .m { border: 1px solid var(--line-soft); border-radius: 2px; color: var(--body); padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.rb .dsm-modes .m.on { border-color: var(--accent); background: var(--vine-soft); color: var(--accent); }
.rb .dsm-modes .m i { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.rb .dsm-alliance { align-self: flex-start; color: var(--alliance-blue); border: 1px solid var(--alliance-blue); border-radius: 2px; padding: 3px 10px; }
.rb .dsm-stat { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); border-bottom: 1px dotted var(--line); padding-bottom: 3px; }
.rb .dsm-stat b { font-weight: 400; color: var(--text); font-family: var(--mono); }
.rb .dsm-stat b.ok { color: var(--accent); }
.rb .dsm-msg { color: var(--body); border-left: 2px solid var(--line); padding-left: 9px; line-height: 1.45; }
.rb .dsm-msg .label { display: block; margin: 0 0 2px; }
.rb .dsm-msg.alert { border-left-color: var(--text); color: var(--text); }
@media (min-width: 620px) {
  .rb .dsm-grid { grid-template-columns: 1fr 1fr; }
  .rb .dsm-panel { border-right: 1px solid var(--line-soft); }
  .rb .dsm-panel.center { order: 3; grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--line-soft); }
  .rb .dsm-panel:nth-child(3) { border-right: 0; }
}

/* ---------- Fig 10: blocks ---------- */
.rb .blocks-grid { display: grid; gap: 18px; }
@media (min-width: 620px) { .rb .blocks-grid { grid-template-columns: 1fr 1fr; } }
.rb .blk { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 0.8rem; }
.rb .blk .b { padding: 6px 9px; border-radius: 4px; color: var(--text); border: 1px solid var(--line); }
.rb .blk .b.evt { background: rgba(13, 122, 110, 0.18); border-color: rgba(13, 122, 110, 0.4); }
.rb .blk .b.ctl { background: rgba(13, 122, 110, 0.1); margin-left: 0.9rem; }
.rb .blk .b.act { background: var(--sunk); margin-left: 1.8rem; }
.rb .blk .b.val { background: transparent; border-style: dashed; margin-left: 1.8rem; }
.rb .blocks-grid > div, .rb .om > div, .rb .fig-body > * { min-width: 0; }
.rb .blocks-grid .code { margin: 0; }

/* ---------- tables ---------- */
.rb .table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.rb table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--body); }
.rb th { font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.rb td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.55; }
.rb table.tools td:first-child { font-family: var(--sans); font-size: 0.85rem; color: var(--text); white-space: nowrap; width: 1%; padding-right: 18px; }
@media (max-width: 420px) {
  .rb table.tools td:first-child { white-space: normal; }
}
/* ==========================================================
   Long-form tutorial components (shoot-on-the-move)
   ========================================================== */
.rb {
  --aim: var(--text); --aim-bg: rgba(28, 27, 25, 0.06);
  --motion: var(--accent); --motion-bg: var(--vine-soft);
  --good: var(--accent); --bad: var(--text); --bad-bg: var(--sunk);
  --shadow: none;
}
.rb main.doc ul, .rb main.doc ol { color: var(--body); padding-left: 1.2em; margin: 0 0 20px; }
.rb main.doc li { margin-bottom: 8px; }
.rb main.doc section h4 { font-family: var(--serif); font-size: 1.02rem; font-weight: 500; font-style: italic; color: var(--text); margin: 28px 0 10px; }
.rb .sub { margin: 0 0 8px; }
.rb .sub > :last-child { margin-bottom: 20px; }
.rb p.tinynote, .rb p.hint { font-size: 0.95rem; color: var(--muted); }
.rb .thsub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); margin-top: 2px; }
.rb th { white-space: nowrap; }
.rb td, .rb th { padding-right: 14px; }
.rb pre.code { margin: 0 0 20px; }

/* wide figures break out of the text column on desktop */
@media (min-width: 1000px) {
  .rb figure.wide { width: min(900px, calc(100vw - 64px)); margin-left: calc((100% - min(900px, calc(100vw - 64px))) / 2); }
}
.rb figure svg text { fill: var(--body); }
.rb .sv-lbl { font-size: 12px; }
.rb .sv-sm { font-size: 10.5px; }

/* equations */
.rb .eq {
  font-family: var(--mono); font-size: 0.95rem; text-align: center; overflow-x: auto;
  margin: 8px 0 24px; padding: 18px 12px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.rb .eq .plain { display: block; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--muted); margin-top: 10px; }
.rb .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 0.18em; line-height: 1.25; }
.rb .frac .den { border-top: 1.5px solid currentColor; padding-top: 0.1em; }
.rb .t-aim { color: var(--text); font-weight: 600; }
.rb .t-mot { color: var(--accent); }

/* simulations */
.rb .sim-controls { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.rb .ctl { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8rem; }
.rb .ctl label { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.rb .ctl input[type="range"] { width: 120px; accent-color: var(--accent); }
.rb .ctl output { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); min-width: 4.2ch; }
.rb button.btn {
  font-family: var(--sans); font-size: 0.8rem; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); padding: 5px 14px; border-radius: 3px; cursor: pointer;
}
.rb button.btn:hover { background: var(--vine-soft); }
.rb .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 18px; padding: 10px 0 4px; border-top: 1px solid var(--line-soft); }
.rb .rcell .rk { display: block; font-family: var(--sans); font-size: 0.74rem; color: var(--muted); margin-bottom: 2px; }
.rb .rcell .rv { font-family: var(--mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--text); }
.rb .rcell.hi .rv { color: var(--accent); font-weight: 600; }

/* worked derivation, quoted statement, axis chips */
.rb details.deriv { margin: 0 0 24px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
.rb details.deriv summary { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); cursor: pointer; padding: 8px 0; }
.rb details.deriv summary:hover { color: var(--accent); }
.rb details.deriv p { font-size: 0.96rem; }
.rb blockquote.quoted { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text); }
.rb blockquote.quoted b { font-weight: 600; }
.rb .ax { font-family: var(--sans); font-size: 0.72rem; padding: 1px 6px; border-radius: 2px; white-space: nowrap; border: 1px solid var(--line); }
.rb .ax-src { color: var(--text); }
.rb .ax-sto { color: var(--accent); border-color: var(--accent); }

/* glossary */
.rb .gloss { display: grid; margin: 0 0 24px; }
.rb .gloss > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; color: var(--body); }
.rb .gloss dt-x { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--text); }
@media (max-width: 560px) { .rb .gloss > div { grid-template-columns: 1fr; gap: 2px; } }

/* glossary terms in the text, with a definition bubble */
.rb button.term {
  display: inline; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: help; text-align: left; border-bottom: 1px dotted var(--accent);
}
.rb button.term:hover, .rb button.term[aria-expanded="true"] { color: var(--accent); }
.rb #tip {
  position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 24px));
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 3px; padding: 10px 12px; box-shadow: 0 8px 24px -12px rgba(28, 27, 25, 0.3);
  font-family: var(--sans); font-size: 0.84rem; line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s; pointer-events: none;
}
.rb #tip.on { opacity: 1; visibility: visible; transform: translateY(0); }
.rb #tip .tt { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rb .tl-bar { transform: scaleX(1) !important; }
  .rb .tl-bar > span { opacity: 1 !important; }
}

.rb main.doc :not(pre) > code { overflow-wrap: anywhere; }