/* XE-Table on /benchmark (xe-table.js). Every rule is scoped under .xe (or the .xe-tip tooltip), so nothing leaks
   into the rest of the page. Instrument's token names are mapped onto Dexterity's tokens; only the colours
   Dexterity has no token for (ink-2, track, warn/ok/bad, data-2) are defined here, with dark twins below. */
.xe, .xe-tip {
  --ink: var(--text); --ink-2: #3b3c40; --line: var(--border); --line-2: var(--border-strong);
  --bg-2: var(--surface-2); --track: #e2e0d9;
  --data-2: #34588c; --ok: #255f36; --warn: #735400; --bad: #a3153f;
  --c1: var(--accent); --c2: var(--data-2); --c3: var(--warn); --c4: var(--bad);
  --shadow-c: #000; --shadow: 0 1px 2px rgba(17,18,20,.05), 0 10px 30px rgba(17,18,20,.07);
  --logo-filter: brightness(0);
  --sans: var(--font); --r-xs: 2px; --r-md: 2px; --r-lg: 2px; --r-pill: 2px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --fs-sm: 14px; --fs-xs: 12px; --fs-label: 11px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xe, :root:not([data-theme="light"]) .xe-tip {
    --ink-2: #c9c8c3; --track: #202226; --data-2: #8eaad8; --ok: #6cc08a; --warn: #dcae4a; --bad: #f07896;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --logo-filter: brightness(0) invert(1);
  }
}
:root[data-theme="dark"] .xe, :root[data-theme="dark"] .xe-tip {
  --ink-2: #c9c8c3; --track: #202226; --data-2: #8eaad8; --ok: #6cc08a; --warn: #dcae4a; --bad: #f07896;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --logo-filter: brightness(0) invert(1);
}

/* ---------- section ---------- */
.xe { margin: 0 0 104px; scroll-margin-top: 100px; min-width: 0; }
.xe .section-head h2 { font-size: clamp(1.65rem, 3.1vw, 2.3rem); }
.xe .section-lede { margin: 12px 0 0; max-width: 70ch; color: var(--muted); font-size: .96rem; }
.xe .section-head .text-link { flex-shrink: 0; }
.xe code { font-family: var(--mono); font-size: .88em; }
.xe .mu { color: var(--muted); }
.xe .w { color: var(--warn); }
.xe .sm { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.xe .mono { font-family: var(--mono); }
.xe [hidden] { display: none !important; }

/* the illustrative-data notice: always visible, never collapsed */
.xe-illus { display: flex; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 6%, var(--bg));
  color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.xe-illus p { margin: 0; flex: 1 1 260px; min-width: 0; }
.xe .flag { display: inline-flex; align-items: center; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--r-xs); color: var(--ink-2); border: 1px solid var(--line-2); background: transparent; white-space: nowrap; flex: none; vertical-align: middle; }
.xe .flag.illus { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 7%, var(--bg)); }
.xe .flag[data-tip] { cursor: help; }

/* ---------- task reference strip ---------- */
.xe-videos { margin: 0 0 28px; }
.xe-videos h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.xe-videos > .sm { margin: 0 0 12px; font-size: .8rem; }
.xe-vstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 10px; overscroll-behavior-x: contain; }
.xe-vid { margin: 0; min-width: 0; scroll-snap-align: start; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.xe-vplay { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); cursor: pointer; aspect-ratio: 16 / 10; overflow: hidden; }
.xe-vplay video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); pointer-events: none; }
.xe-vplay .pl { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; color: var(--bg); background: color-mix(in srgb, var(--ink) 78%, transparent); transition: opacity .2s; }
.xe-vid.on .pl { opacity: 0; }
.xe-vplay:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; }
.xe-vid figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; font-size: .82rem; flex: 1; }
.xe-vid figcaption b { font-weight: 500; color: var(--text); }
.xe-vmeta { font: 400 .66rem/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; }
.xe-vv { font: 400 .66rem/1.5 var(--mono); }
.xe-vgo { margin-top: auto; padding: 6px 0 0; border: 0; background: none; color: var(--accent); font: 500 .76rem var(--font); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.xe-vgo:hover, .xe-vgo:focus-visible { text-decoration-color: currentColor; }

/* ---------- controls + table ---------- */
.xe-panel { border: 1px solid var(--border-strong); background: var(--surface); min-width: 0; }
.xe-ctrls { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.xe-switch { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 6px; flex-wrap: wrap; }
.xe-switch button { border: 0; border-radius: 4px; background: transparent; color: var(--muted); padding: 9px 12px; font: 500 .8rem var(--mono); cursor: pointer; }
.xe-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.xe-anon { border: 1px solid var(--border-strong); border-radius: 4px; background: transparent; color: var(--muted); padding: 9px 12px; font: 500 .8rem var(--font); cursor: pointer; }
.xe-anon[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.xe-hint { font: 400 .66rem/1.5 var(--mono); color: var(--muted); }
.xe-scroll { overflow-x: auto; }
.xe .xe-status { margin: 0; padding: 18px 16px; color: var(--muted); font-size: .86rem; }
.xe table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.xe th, .xe td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.xe thead th { font: 400 var(--fs-label)/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); background: var(--surface); }
.xe td { color: var(--ink-2); }
.xe td.num, .xe th.num { text-align: right; font-family: var(--mono); font-size: 13px; }
.xe tbody tr:last-child td { border-bottom: 0; }
.xe tr.sum td { background: var(--surface-2); color: var(--ink); font-weight: 500; border-top: 1px solid var(--line-2); }
.xe tr.sum td .n { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.xe #xe-mx { min-width: 620px; }
.xe .body-cell { font-size: 13px; color: var(--ink); white-space: normal; min-width: 190px; }
.xe .body-cell em { font-style: normal; color: var(--muted); font-size: 11px; display: block; }
.xe td.body-cell[role="button"] { cursor: pointer; }
.xe td.body-cell[role="button"]:hover, .xe td.body-cell[role="button"]:focus-visible { background: var(--bg-2); outline: none; }
.xe td.body-cell.sel { box-shadow: inset 2px 0 0 var(--c1); }
.xe td.mx { cursor: pointer; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; padding: 10px 12px; transition: filter .12s; }
.xe td.mx:hover { filter: brightness(.94); }
.xe td.mx:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; }
.xe td.mx .n { font-size: 11px; display: block; color: inherit; font-weight: 400; }
.xe td.mx.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.xe td.hx { font-family: var(--mono); text-align: right; padding: 9px 11px; }
.xe .xe-cite { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); font: 400 .68rem/1.7 var(--mono); color: var(--muted); }
.xe .xe-cite code { color: var(--text); font-size: 1em; }
.xe .xe-foot { margin: 16px 0 0; max-width: 92ch; color: var(--muted); font-size: .82rem; }

/* vendor marks: arm + hand/gripper, flattened to one monochrome */
.xe .body-cell .cmps { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; min-height: 17px; }
.xe .body-cell .cmps img, .xe .cd-id .cmps img { height: 15px; width: auto; max-width: 62px; object-fit: contain; filter: var(--logo-filter); opacity: .8; }
.xe .cmp-x { color: var(--muted); font: 400 11px var(--sans); }
.xe .cmp-t { font: 600 11px/1 var(--sans); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-xs); padding: 2px 5px; }
.xe td .vlogo { height: 15px; max-width: 54px; object-fit: contain; vertical-align: -3px; margin-right: 6px; opacity: .75; filter: var(--logo-filter); }

/* badges, info dots, notes */
.xe .badge { font: 400 var(--fs-label)/1 var(--mono); letter-spacing: .08em; padding: 4px 8px; border-radius: var(--r-xs); white-space: nowrap;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); display: inline-block; }
.xe .i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2);
  font: 500 10px/1 var(--mono); color: var(--ink-2); cursor: help; vertical-align: 1px; margin-left: 5px; font-style: normal; flex: none; }
.xe .i:hover, .xe .i:focus-visible { border-color: var(--accent); color: var(--accent); }
.xe .xnote { border-left: 1px solid var(--accent); padding: 4px 0 4px 18px; color: var(--ink-2); margin: var(--s5) 0; font-size: 15px; max-width: 72ch; }
.xe .xnote.wn2 { border-left-color: var(--warn); }
.xe .nc { display: block; font: 500 11px var(--sans); color: var(--warn); white-space: nowrap; }
.xe .v-ok { color: var(--ok) !important; } .xe .v-low { color: var(--c3) !important; } .xe .v-und { color: var(--ink-2) !important; } .xe .v-bad { color: var(--c4) !important; }
.xe-tip { position: fixed; z-index: 1000; max-width: 340px; padding: 10px 13px; border-radius: 2px; background: var(--surface);
  color: var(--ink-2); font: 400 13px/1.5 var(--font); box-shadow: var(--shadow), 0 0 0 1px var(--border); pointer-events: none;
  white-space: normal; overflow-wrap: anywhere; letter-spacing: normal; text-transform: none; text-align: left; }
.xe-tip[hidden] { display: none; }

/* readout: a row of numbers in hairline cells */
.xe .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-top-color: var(--ink); overflow: hidden; margin-bottom: var(--s2); }
.xe .readout > div { background: var(--bg); padding: var(--s4); min-width: 0; }
.xe .rl { font: 400 var(--fs-label)/1.4 var(--mono); letter-spacing: .1em; color: var(--muted); display: block; }
.xe .rval { font: 600 28px/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); display: block; margin-top: 6px; }
.xe .rval.zero { color: var(--muted); }
.xe .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px) { .xe .grid2 { grid-template-columns: 1fr; } }
.xe .scroll { overflow-x: auto; }

/* ---------- cell / body panel ---------- */
.xe .cd { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); padding: var(--s5) var(--s5) var(--s3); margin: var(--s4) 0 0; min-width: 0; }
.xe .cd h3 { font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: var(--s6) 0 var(--s3); display: flex; align-items: center; }
.xe .cd-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xe .cd-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.xe .cd-id .cmps { display: flex; align-items: center; gap: 5px; }
.xe .cd-id .cmps img { height: 20px; max-width: 80px; }
.xe .cd-t { font: 600 19px/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.xe .cd-x { background: var(--bg-2); border: 0; color: var(--ink-2); font: 400 18px/1 var(--sans); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; }
.xe .cd-x:hover, .xe .cd-x:focus-visible { color: var(--ink); background: var(--track); }
.xe .cd-ro { margin: 12px 0 4px; }
.xe .cd-ro .rs { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.xe .cd-ro .em { box-shadow: inset 0 3px 0 var(--accent); }
.xe .cd-ro .em .rval { color: var(--accent); }
.xe .cd-ok { margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--ok); }
.xe .cd .grid2 { margin-top: 6px; }
.xe .cd details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--s5) 0 var(--s2); }
.xe .cd summary { cursor: pointer; list-style: none; padding: 14px 0; font: 500 .95rem/1.4 var(--sans); color: var(--ink); display: flex; justify-content: space-between; }
.xe .cd summary::-webkit-details-marker { display: none; }
.xe .cd summary::after { content: "+"; font: 300 20px/1 var(--mono); color: var(--muted); transition: transform .25s var(--ease); }
.xe .cd details[open] > summary::after { transform: rotate(45deg); }
.xe .cd summary:hover { color: var(--accent); }
/* decomposition */
.xe .dc { background: var(--surface-2); padding: var(--s3) var(--s3) var(--s1); min-width: 0; }
.xe .dc-h { font: 600 var(--fs-sm) var(--sans); color: var(--ink); margin-bottom: var(--s2); display: flex; align-items: center; }
.xe .dc-bar { position: relative; display: flex; height: 14px; background: var(--track); border-radius: 3px; overflow: visible;
  background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px)); }
.xe .dc-bar i { display: block; height: 100%; border-right: 1px solid var(--surface-2); }
.xe .dc-bar b { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px solid var(--ink); }
.xe .dc-scale { display: flex; justify-content: space-between; font: 400 11px var(--sans); color: var(--muted); margin: 2px 0 6px; }
.xe .dc-t { margin: 0 0 6px; }
.xe .dc-t th, .xe .dc-t td { padding: 5px 6px; font-size: 12px; background: none; }
.xe .dc-t thead th { background: none; font-size: 11px; }
.xe .dc-t td.thin { color: var(--muted); }
.xe .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
/* drill-down tree: label | interval bar | n | success | attempt — one shared 0–100% scale */
.xe .cd-tree { border: 1px solid var(--line); }
.xe .cd-r { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(120px, 1fr) 42px 92px 92px; gap: 10px; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.xe .cd-r.hd { font: 600 11px var(--sans); color: var(--muted); background: var(--surface-2); }
.xe .cd-r.l1 .cd-l { padding-left: 16px; } .xe .cd-r.l2 .cd-l { padding-left: 32px; }
.xe .cd-r.l0 { background: var(--surface); }
.xe .cd-r.thin > .c-n, .xe .cd-r.thin .cd-l, .xe .cd-r.thin .cd-lf, .xe .cd-r.thin .cd-tt, .xe .cd-r.thin .cd-tg { color: var(--muted); }
.xe .cd-r.thin .c-s, .xe .cd-r.thin .c-a { color: var(--muted); }
.xe .cd-r.hit { box-shadow: inset 2px 0 0 var(--c1); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.xe .cd-l { min-width: 0; display: flex; align-items: center; gap: 7px; }
.xe .cd-tg { background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 2px 0; text-align: left; min-width: 0; }
.xe .cd-tg:hover, .xe .cd-tg:focus-visible { color: var(--c1); }
.xe .rc-chev { width: 6px; height: 6px; border-right: 1px solid var(--c1); border-bottom: 1px solid var(--c1); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.xe .cd-tg[aria-expanded="true"] .rc-chev { transform: rotate(45deg); }
.xe .cd-lf, .xe .cd-tt { color: var(--ink-2); min-width: 0; }
.xe .cd-tt code { font-size: 10.5px; }
.xe .cd-tt .badge { font-size: 10px; padding: 3px 6px; margin-left: 4px; }
.xe .c-n, .xe .c-s, .xe .c-a { font: 400 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.xe .c-n { color: var(--ink-2); }
.xe .c-s small, .xe .c-a small { display: block; font-size: 11px; color: var(--muted); }
.xe .c-a { color: var(--c2); }
.xe .cd-r.hd .c-n, .xe .cd-r.hd .c-s, .xe .cd-r.hd .c-a { font: 600 11px var(--sans); color: var(--muted); }
.xe .cib { position: relative; display: block; height: 14px; background: var(--track); border-radius: 3px;
  background-image: linear-gradient(90deg, transparent calc(25% - .5px), var(--line) calc(25% - .5px), var(--line) calc(25% + .5px), transparent calc(25% + .5px),
    transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px),
    transparent calc(75% - .5px), var(--line) calc(75% - .5px), var(--line) calc(75% + .5px), transparent calc(75% + .5px)); }
.xe .cib.na { opacity: .35; }
.xe .cib.sc { background: none; display: flex; justify-content: space-between; font: 400 11px var(--sans); height: auto; }
.xe .cib i { position: absolute; }
.xe .cib .rf { top: -2px; bottom: -2px; border-left: 1px dashed var(--muted); }
.xe .cib .wh { top: 6px; height: 2px; background: var(--c1); }
.xe .cib .wh::before, .xe .cib .wh::after { content: ""; position: absolute; top: -3px; height: 8px; border-left: 1px solid var(--c1); }
.xe .cib .wh::before { left: 0; } .xe .cib .wh::after { right: 0; }
.xe .cib .pt { top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px var(--surface); }
.xe .cib.thin .pt, .xe .cib.thin .wh { background: var(--muted); }
.xe .cib.thin .wh::before, .xe .cib.thin .wh::after { border-color: var(--muted); }
/* reference footage inside task rows */
.xe .cd-th { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface-2); cursor: pointer; overflow: hidden; }
.xe .cd-th img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.xe .cd-th .pl { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; display: grid; place-items: center; font-size: 8px; color: var(--bg); background: color-mix(in srgb, var(--ink) 78%, transparent); }
.xe .cd-th:hover, .xe .cd-th:focus-visible { border-color: var(--c1); }
.xe .cd-v { padding: 8px 10px 8px 42px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.xe .cd-v video { width: 100%; max-width: 420px; aspect-ratio: 16 / 10; background: var(--shadow-c); display: block; }
.xe .cd-v p { margin: 6px 0 0; font: 400 var(--fs-xs) var(--sans); color: var(--warn); }
.xe .cd-media { margin: var(--s2) 0 0; font-size: var(--fs-xs); }
/* failure mix */
.xe .fm-ns { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.xe .fm-r { display: grid; grid-template-columns: minmax(0, 220px) 1fr 34px; gap: 9px; align-items: center; margin: 4px 0; }
.xe .fm-l { font: 400 12px var(--sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xe .fm-l code { font-size: 11px; color: var(--muted); }
.xe .fm-b { height: 9px; background: var(--track); border-radius: 3px; overflow: hidden; display: block; }
.xe .fm-b i { display: block; height: 100%; background: var(--bad); }
.xe .fm-v { font: 500 11px var(--mono); color: var(--ink); text-align: right; }
.xe .fm-sep { margin: var(--s4) 0 var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); font: 600 var(--fs-xs) var(--sans); color: var(--warn); }
.xe .fm-r.non .fm-b i { background: var(--muted); }
.xe .fm-r.non .fm-l { color: var(--muted); }
.xe .fm-more { background: var(--bg-2); border: 0; color: var(--accent); font: 500 var(--fs-xs) var(--sans); padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; margin: var(--s1) 0; }
.xe .fm-more:hover, .xe .fm-more:focus-visible { background: var(--track); }
.xe .fm-sum { font: 400 11px var(--mono); color: var(--muted); text-align: right; margin: 2px 0 4px; }
/* body panel: composition by unit + policy × setting / horizon matrices */
.xe .bp-u { margin: 0 0 6px; }
.xe .bp-u td, .xe .bp-u th { font-size: 11.5px; }
.xe .bp-u code { font-size: 10.5px; }
.xe .bp-u a { color: var(--accent); }
.xe .bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
@media (max-width: 980px) { .xe .bp-grid { grid-template-columns: 1fr; } }
.xe .bp-m { margin: 0; }
.xe .bp-m th, .xe .bp-m td { padding: 5px 7px; font-size: 11px; white-space: nowrap; }
.xe .bp-m thead th { background: none; }
.xe .bp-m tbody th { font: 600 12px var(--sans); color: var(--ink-2); text-align: left; background: none; }
.xe .bp-m tr.sum td, .xe .bp-m tr.sum th { background: var(--surface-2); }
.xe td.bm { font-family: var(--mono); text-align: right; vertical-align: top; color: var(--ink); }
.xe td.bm b { font-weight: 500; display: block; }
.xe td.bm small { display: block; font-size: 11px; color: var(--muted); }
.xe td.bm small.att { color: var(--c2); }
.xe td.bm.thin b, .xe td.bm.thin small.att { color: var(--muted); }
.xe td.bm.na { color: var(--muted); text-align: center; }
.xe td.bm[role="button"] { cursor: pointer; }
.xe td.bm[role="button"]:hover, .xe td.bm[role="button"]:focus-visible { background: var(--bg-2); outline: 1px solid var(--accent); outline-offset: -1px; }

@media (max-width: 700px) {
  .xe .cd-r { grid-template-columns: minmax(0, 1fr) 34px 78px 70px; gap: 6px; }
  .xe .cd-r > .cib { grid-column: 1 / -1; order: 5; }
  .xe .cd-r.hd > .cib { display: none; }
  .xe .cd-r.l1 .cd-l { padding-left: 10px; } .xe .cd-r.l2 .cd-l { padding-left: 20px; }
  .xe .cd-v { padding-left: 10px; }
  .xe .fm-r { grid-template-columns: minmax(0, 130px) 1fr 30px; }
}
/* phone: the panel becomes a full-screen sheet over the page (above the sticky header) */
@media (max-width: 620px) {
  .xe .cd { position: fixed; inset: 0; z-index: 900; margin: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 16px 24px; box-shadow: none; }
  .xe .cd-hd { position: sticky; top: -12px; z-index: 1; margin: -12px -16px 0; padding: 12px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
  html.xe-open, html.xe-open body { overflow: hidden; }
  .xe .cd-ro { grid-template-columns: repeat(2, 1fr); }
  .xe .rval { font-size: 22px; }
  .xe-ctrls { padding: 12px; }
  .xe-switch { flex: 1 1 100%; }
  .xe-switch button { flex: 1; }
  .xe-vstrip { grid-auto-columns: 72%; }
  .xe .body-cell { min-width: 150px; }
}