/* Robotics guides: components that article.css does not have.
   Load after article.css. Built only from article.css tokens; teal is the one accent.
   Everything is prefixed r- so it cannot collide with the shared sheet.

   Contents
     code ............ .r-code (pre) + token spans .k .s .c .hl .n
     code panel ...... .r-panel > .r-panel__head / .r-code / .r-panel__note
     comparison ...... .r-compare (stacked; two columns inside .r-wide)
     wide breakout ... .r-wide
     tables .......... .r-table (scrolls inside itself) + td.r-mono
     API list ........ dl.r-api
     widgets ......... .r-widget, .r-toggle (segmented buttons), .r-readout, canvas
     ownership tree .. .r-tree, .r-branch, .r-node, .r-res
     nested scopes ... .r-ring, .r-item
     timelines ....... .r-lanes/.r-lane/.r-bar, .r-spans/.r-span
     figure scripts .. .r-plot (alias tokens for SVG/canvas), .r-scroll, .r-controls, .r-slider
     click-a-node .... .r-zones/.r-zone/.r-pick + .r-detail
     lists ........... .r-cols/.r-col/.r-entry, ol.r-steps, .r-hops
     glossary ........ .r-search, dl.r-gloss
*/

:root {
  --r-code-bg: rgba(28, 27, 25, 0.035);
  --r-surface: #fbfaf7;
  --r-radius: 3px;
}

main section { scroll-margin-top: 76px; }
main code { font-family: var(--mono); font-size: 0.84em; color: var(--text); overflow-wrap: anywhere; }
main h2 code, main h3 code { font-size: 0.9em; }

/* ---------- code ---------- */
.r-code, pre.r-code {
  margin: 0 0 24px; padding: 14px 16px;
  background: var(--r-code-bg); border: 1px solid var(--line-soft); border-radius: var(--r-radius);
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.6; color: var(--text);
  overflow-x: auto; tab-size: 2; white-space: pre;
}
.r-code code { font-size: inherit; overflow-wrap: normal; }
.r-code .k { color: var(--accent); }
.r-code .s { color: var(--muted); }
.r-code .n { color: var(--accent); }
.r-code .p { color: var(--muted); }
.r-code .c { color: var(--faint); font-style: italic; }
.r-code .hl { color: var(--text); font-weight: 600; background: var(--vine-soft); border-radius: 2px; }

/* ---------- code panel: title, code, one-line note ---------- */
.r-panel { margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--r-radius); background: var(--r-surface); min-width: 0; }
.r-panel__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 0.8rem; color: var(--text);
}
.r-panel__head small { font-size: 0.74rem; color: var(--faint); }
.r-panel__head button { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.r-panel__head button:hover { color: var(--text); border-color: var(--muted); }
.r-panel .r-code { margin: 0; border: 0; border-radius: 0; background: transparent; }
.r-panel__note {
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 0.82rem; line-height: 1.55; color: var(--muted);
}

/* ---------- side-by-side comparison ---------- */
.r-compare { display: grid; gap: 16px; margin: 0 0 24px; }
.r-compare > .r-panel { margin: 0; display: flex; flex-direction: column; }
.r-compare > .r-panel .r-code { flex: 1; }

/* ---------- wide breakout (for comparisons, wide tables, demos) ---------- */
@media (min-width: 980px) {
  .r-wide { width: 900px; margin-left: calc((100% - 900px) / 2); }
  .r-wide.r-compare { grid-template-columns: 1fr 1fr; }
}

/* ---------- tables ---------- */
.r-table { margin: 0 0 24px; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.r-table table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; }
.r-table th, .r-table td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--body); }
.r-table th { font-weight: 500; font-size: 0.78rem; color: var(--muted); border-bottom-color: var(--line); white-space: nowrap; }
.r-table tbody tr:last-child td { border-bottom: 0; }
.r-table td.r-mono, .r-table .r-mono { font-family: var(--mono); font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.r-table td.r-quiet { color: var(--muted); }
.r-table td.r-term { color: var(--text); font-weight: 500; }
@media (max-width: 620px) { .r-table--wide table { min-width: 560px; } }
.r-table tr.r-child td:last-child { padding-left: 18px; }
.r-table code { font-size: 0.92em; overflow-wrap: normal; }

/* ---------- API reference list ---------- */
dl.r-api { margin: 0 0 24px; border-top: 1px solid var(--line); }
dl.r-api dt { margin: 0; padding-top: 12px; font-family: var(--mono); font-size: 0.84rem; color: var(--text); }
dl.r-api dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); font-size: 0.98rem; color: var(--body); }
@media (min-width: 621px) {
  dl.r-api { display: grid; grid-template-columns: max-content 1fr; column-gap: 22px; }
  dl.r-api dt, dl.r-api dd { padding: 11px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
}

/* ---------- interactive widgets ---------- */
.r-widget { display: grid; gap: 14px; min-width: 0; }
.r-widget canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-radius); background: var(--r-surface); }
.r-row { display: grid; gap: 14px; }
@media (min-width: 621px) { .r-row--2 { grid-template-columns: 1fr 1fr; } }

.r-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.r-toggle button {
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.3; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.r-toggle button:hover { color: var(--text); border-color: var(--muted); }
.r-toggle button[aria-pressed="true"], .r-toggle button.on { color: var(--bg); background: var(--text); border-color: var(--text); }
.r-toggle button:focus-visible, .r-widget :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.r-readout { border-top: 1px solid var(--line); padding-top: 10px; font-family: var(--sans); font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.r-readout .label { margin-bottom: 4px; }
.r-readout__big { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.r-readout .is-alarm, .r-readout__big.is-alarm { color: var(--text); font-weight: 600; }
.r-readout p { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }

.r-note { font-family: var(--sans); font-size: 0.84rem; line-height: 1.55; color: var(--muted); margin: 0; padding-left: 12px; border-left: 2px solid var(--line); }

/* ---------- ownership tree: a parent, its children, the resources they hold ---------- */
.r-tree { display: grid; gap: 8px; }
.r-branch { display: grid; gap: 8px; margin-left: 16px; padding-left: 14px; border-left: 1px solid var(--line); }
.r-node {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 8px 12px; background: var(--r-surface); border: 1px solid var(--line); border-left: 3px solid var(--faint);
  border-radius: var(--r-radius); font-family: var(--sans); transition: opacity 0.25s, border-color 0.25s;
}
.r-node b { font-family: var(--mono); font-weight: 400; font-size: 0.84rem; color: var(--text); }
.r-node i { margin-left: auto; font-style: normal; font-size: 0.74rem; color: var(--muted); }
.r-node span { flex: 1 1 100%; font-size: 0.78rem; color: var(--faint); }
.r-node.is-run { border-left-color: var(--accent); }
.r-node.is-run i { color: var(--accent); }
.r-node.is-done { opacity: 0.6; }
.r-node.is-idle { opacity: 0.45; }
.r-node.is-kill { border-left-style: dashed; border-left-color: var(--text); }
.r-node.is-kill i { color: var(--text); font-weight: 500; }
.r-node.is-kill b { text-decoration: line-through; text-decoration-color: var(--muted); }

.r-res { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-radius); font-family: var(--sans); }
.r-res b { font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.r-res.is-busy { border-color: var(--accent); }
.r-res.is-busy b { color: var(--accent); }
.r-res.is-taken b { color: var(--text); font-weight: 500; }

/* ---------- nested scopes ---------- */
.r-ring { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-radius); background: var(--r-surface); transition: opacity 0.25s; }
.r-ring .r-ring { background: var(--bg); }
.r-ring__name { font-family: var(--sans); font-size: 0.74rem; color: var(--faint); }
.r-ring--inner { border-left: 2px solid var(--accent); }
.r-ring.is-gone { border-style: dashed; background: transparent; opacity: 0.6; }
.r-item { display: block; padding-left: 16px; text-indent: -16px; font-family: var(--mono); font-size: 0.8rem; color: var(--text); }
.r-item::before { content: "\25CF"; display: inline-block; width: 16px; text-indent: 0; color: var(--accent); font-size: 0.7em; }
.r-item em { font-style: normal; color: var(--muted); }
.r-item.is-off, .r-item.is-over { color: var(--faint); }
.r-item.is-off::before, .r-item.is-over::before { content: "\25CB"; color: var(--faint); }
.r-item.is-over { text-decoration: line-through; }
.r-item.is-off em, .r-item.is-over em { color: var(--faint); }

/* ---------- timelines: lanes of bars, and nested spans ---------- */
.r-lanes { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 621px) { .r-lanes { grid-template-columns: 1fr 1fr; } }
.r-lanes > div { background: var(--bg); padding: 14px 14px 4px; display: grid; gap: 10px; align-content: start; }
.r-lanes p { font-family: var(--sans); font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin: 4px 0 10px; }
.r-lane { display: flex; gap: 10px; align-items: stretch; }
.r-lane__name { width: 4.8rem; flex: none; font-family: var(--sans); font-size: 0.76rem; color: var(--muted); }
.r-lane__bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.r-bar { height: 11px; background: var(--faint); opacity: 0.35; border-radius: 1px; }
.r-bar.is-on { opacity: 1; background: var(--muted); }
.r-bar.is-cmd { opacity: 1; background: var(--accent); }

.r-spans { display: grid; gap: 6px; align-content: center; overflow-x: auto; }
.r-spans > * { min-width: 520px; }
.r-span-row { display: flex; gap: 2px; height: 26px; }
.r-span {
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  font-family: var(--sans); font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 2px;
}
.r-span--parent { flex: 1; color: var(--accent); background: var(--vine-soft); border-color: var(--accent); }
.r-span--a { flex: 2.2; background: var(--r-surface); }
.r-span--b { flex: 1; background: var(--panel-2); color: var(--faint); }
.r-caption-sm { font-family: var(--sans); font-size: 0.76rem; color: var(--faint); margin: 6px 0 0; }

/* ---------- figure scripts: one alias layer, so SVG attributes and canvas code
   written against older names resolve to the article palette.
   Put .r-plot on <main>; scripts should read tokens from that element. ---------- */
.r-plot {
  --surface: var(--r-surface); --surface-2: #efede7; --sunk: #efede7;
  --rule: #d9d6cd; --rule-soft: #e7e4dc; --hair: #e7e4dc; --grid: #e7e4dc;
  --ctrl: var(--text); --ctrl-soft: rgba(28, 27, 25, 0.06);
  --data: var(--accent); --data-soft: var(--vine-soft);
  --blue: var(--text); --blue-soft: rgba(28, 27, 25, 0.06);
  --ok: var(--muted); --ok-soft: rgba(28, 27, 25, 0.05);
  --accent-soft: var(--vine-soft);
  /* FRC alliance colours carry meaning (data, not chrome): muted to sit on --bg */
  --r-alliance-blue: #3d62a0; --r-alliance-red: #a9463c;
  /* sequential ramp, slow to fast, all one hue */
  --s0: #cfcbc1; --s1: #5f9e95; --s2: #0b4f47;
}
.r-scroll { overflow-x: auto; }
.r-scroll > svg, .r-scroll > canvas { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .r-scroll > svg, .r-scroll > canvas { min-width: var(--r-min, 600px); } }
main figure > canvas { display: block; width: 100%; height: auto; }
figure.r-framed .r-scroll, figure.r-framed > canvas { border: 1px solid var(--line); border-radius: var(--r-radius); background: var(--r-surface); }

.r-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 12px; }
.r-controls .r-toggle { margin: 0; }
.r-status { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-slider { display: grid; gap: 2px; flex: 1 1 170px; min-width: 150px; }
.r-slider label { display: flex; justify-content: space-between; gap: 8px; font-family: var(--sans); font-size: 0.76rem; color: var(--muted); }
.r-slider label span { color: var(--text); font-variant-numeric: tabular-nums; }
.r-slider input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); }
.r-hud { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-hud b { font-weight: 500; color: var(--text); }

/* ---------- click-a-node chain with a detail panel ---------- */
.r-zones { display: grid; gap: 14px; }
.r-zone { display: grid; gap: 8px; }
.r-zone__nodes { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.r-arrow { align-self: center; color: var(--faint); font-family: var(--sans); font-size: 0.8rem; }
.r-pick {
  flex: 1 1 auto; min-width: 5.4rem; display: grid; gap: 1px; text-align: left; cursor: pointer;
  padding: 7px 10px; background: var(--r-surface); color: var(--text);
  border: 1px solid var(--line); border-top: 2px solid var(--text); border-radius: var(--r-radius);
  font-family: var(--sans); transition: border-color 0.2s, background 0.2s;
}
.r-pick.r-pick--alt { border-top: 2px dashed var(--accent); }
.r-pick b { font-weight: 500; font-size: 0.82rem; }
.r-pick small { font-size: 0.72rem; color: var(--faint); }
.r-pick:hover { border-color: var(--muted); }
.r-pick[aria-pressed="true"] { background: var(--vine-soft); border-color: var(--accent); }
.r-pick[aria-pressed="true"] small { color: var(--accent); }
.r-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-detail { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-radius); background: var(--r-surface); }
.r-detail h3 { margin: 0; font-size: 1.05rem; }
.r-detail p { margin: 0; font-family: var(--sans); font-size: 0.86rem; line-height: 1.55; color: var(--body); }
.r-detail dl { margin: 0; display: grid; gap: 6px; }
.r-detail dt { font-family: var(--sans); font-size: 0.72rem; color: var(--faint); }
.r-detail dd { margin: 0 0 4px; font-family: var(--sans); font-size: 0.84rem; color: var(--text); }
@media (min-width: 621px) { .r-detail { grid-template-columns: 1.4fr 1fr; } }

/* ---------- lists: columns of entries, numbered steps, hop chains ---------- */
.r-cols { display: grid; gap: 22px; margin: 0 0 8px; }
@media (min-width: 621px) { .r-cols { grid-template-columns: 1fr 1fr; } }
.r-col h3 { margin: 0 0 6px; font-size: 1.05rem; }
.r-entry { padding: 8px 0; border-top: 1px solid var(--line-soft); font-family: var(--sans); font-size: 0.84rem; line-height: 1.5; color: var(--body); }
.r-entry b { display: block; font-weight: 500; color: var(--text); }
.r-col > p { font-family: var(--sans); font-size: 0.84rem; line-height: 1.55; color: var(--muted); margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.r-hops { display: grid; gap: 2px; margin: 0 0 4px; font-family: var(--sans); font-size: 0.84rem; }
.r-hops b { font-weight: 500; color: var(--text); }
.r-hops span { color: var(--faint); padding-left: 14px; font-size: 0.78rem; }

ol.r-steps { list-style: none; counter-reset: r-step; margin: 0 0 8px; padding: 0; display: grid; gap: 0; }
ol.r-steps li { counter-increment: r-step; display: grid; grid-template-columns: 2rem 1fr; gap: 0 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--body); }
ol.r-steps li::before { content: counter(r-step, decimal-leading-zero); grid-row: span 2; color: var(--faint); font-variant-numeric: tabular-nums; }
ol.r-steps li b { font-weight: 500; color: var(--text); }
ol.r-steps li.is-back::before { color: var(--accent); }

/* ---------- glossary with a filter ---------- */
.r-search {
  flex: 1 1 210px; min-width: 0; font-family: var(--sans); font-size: 0.86rem; color: var(--text);
  padding: 7px 12px; background: var(--r-surface); border: 1px solid var(--line); border-radius: 999px;
}
.r-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
dl.r-gloss { margin: 16px 0 8px; border-top: 1px solid var(--line); }
dl.r-gloss > div { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
dl.r-gloss > div[hidden] { display: none; }
dl.r-gloss dt { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--text); }
dl.r-gloss dd { margin: 2px 0 0; font-size: 0.96rem; color: var(--body); line-height: 1.55; }
dl.r-gloss .g { display: block; font-family: var(--sans); font-size: 0.7rem; color: var(--faint); margin-bottom: 2px; }

@media (max-width: 620px) {
  .r-code, pre.r-code { font-size: 0.76rem; padding: 12px 13px; }
  .r-panel__head, .r-panel__note { padding-left: 13px; padding-right: 13px; }
}