/* tm-inspector.css - "Inside the plugin" on textmaker.html: the read-only
   Text Maker Inspector (js/tm-inspector.js) and the section around it.
   Part 1 is the Structure Lab's inspector_look.css (text-maker/_structure_lab),
   the look of DaVinci Resolve Studio 21.1's Edit-page Inspector measured at
   1x: a 420 px panel, Open Sans 11/12 px, the skin palette, nest tints, the
   host's own 1x skin icons. Trimmed to what a read-only Text Maker page uses
   and scoped under .tmi-frame (no :root tokens). Hover states are kept only
   on the parts that work here (page tabs, nest headers).
   Part 2 is the section: the copy beside the panel, Hairline style.
   GENERATED FILE: edit tm-inspector.src.css next to build_web.py and rebuild.
   Pure ASCII. */

/* Open Sans Regular 3.003 (SIL Open Font License 1.1), the face Resolve's
   Inspector draws with; a Latin subset made by build_web.py's mkfont.py.
   The one bold line (the tool name) uses synthetic bold. */
@font-face {
  font-family: "TMI Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/opensans-400-ri.woff?v=1) format("woff");
}

/* ==========================================================================
   PART 1 - the Inspector
   ========================================================================== */
.tmi-frame {
  --ri-panel:        #28282e;
  --ri-global:       #212126;
  --ri-line:         #090909;
  --ri-field:        #1f1f1f;
  --ri-field-edge:   #070707;
  --ri-seg-on:       #17181a;
  --ri-seg-off:      #222226;
  --ri-btn-edge:     #43474d;
  --ri-accent:       #e64b3d;
  --ri-text:         #ffffff;
  --ri-label:        #d0d0d0;
  --ri-dim:          #929292;
  --ri-btn-text:     #ababab;
  --ri-track:        #171717;
  --ri-track-hi:     #2f2f35;
  --ri-screw:        #1c1d1f;
  --ri-swatch-edge:  #090909;
  --ri-font:     "TMI Open Sans", "Open Sans", "Segoe UI", Arial, sans-serif;
  --ri-fs:       11px;
  --ri-fs-edit:  12px;
  --ri-fs-hdr:   12px;
  --ri-fs-title: 12px;
  --ri-note-lh:  15px;
  --ri-w:        420px;
  --ri-row:      25px;
  --ri-box:      20px;
  --ri-btn:      22px;
  --ri-lbl-cell: 152px;
  --ri-ctl-x:    157px;
  --ri-rst:      40px;
  --ri-pad-r:    15px;
  --ri-inset:    15px;
  --ri-hdr-h:    28px;
  --ri-tab-w:    60px;
  --ri-i-arrow:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAQpJREFUGBljYKA1EABawIzDElagOEgeDARKS0uv5uXlTQDyQBLIgDktLW1aSUnJVaAgDxOQYPz79+9jERGR/MzMzAIgH2YDc0ZGRqm0tHQmUP4RUJwFJPHv0qVLz/X19Y34+fnDFBQUbl+8ePFaXFxcBFDhxG/fvl2fMWNGw+/fv++AFQMZbx8/fvxUW1vbBqghREJC4reiomL3nz9/3q1YsaL6zZs3h4CGfodZ+evTp08vv3z58kpFRcVVUlLS5xcQ7Ny5s/rmzZvbgQo/APF/mOL/QM7PFy9evGRjY/sINF3t5MmTk0+dOrUKKP4aiP8BMQYAhYYyEAdAafTQwdAAso0TiGG2whUAADTCZs6C9sLbAAAAAElFTkSuQmCC");
  --ri-i-arrowr: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAT1JREFUGBljZkAARiCTB4iZgPgPQhjBYkYwGYRKS0uP2drauv3//3/P48ePvyLJgZkwxSBTWZWVlQ3ExcVDZWRkPPj5+Q/cvn37LbIGmGKQ2L9Lly7dkZSU/CEhIeElJiYWLCUlde7KlSsPYRqQFf8HCn4ASt5lY2N7JSsr6yQkJBSppaV198yZM9eBcv+RFYMM+AvEn+7evXufh4eHRV5e3pGRkdH86NGjS4Di31hAKpAAyPR/MTExNkCFqd+/f/90/vz5qUAxkGcZ0RWzpaen54mIiLT9/v375Z49ezrOnTu3E6jwFxD/R1bMkpaW1gFUWPjt27dL69at63r48OEhoKKXQAxyHgOyYkGgx1zev3+/bfHixTM+f/58Eij/DqoQ5DwGUPiCAIjmBGJHIP4CxBeB+DMQg00E0mAAANldbWxt41A5AAAAAElFTkSuQmCC");
}

.tmi-frame .ri-panel {
  width: var(--ri-w);
  background: var(--ri-panel);
  color: var(--ri-label);
  font: 400 var(--ri-fs)/var(--ri-row) var(--ri-font);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  forced-color-adjust: none;           /* a picture of the host UI keeps the host's colours */
}
.tmi-frame .ri-panel *, .tmi-frame .ri-panel *::before, .tmi-frame .ri-panel *::after { box-sizing: border-box; }
.tmi-frame .ri-panel img { display: block; max-width: none; }
.tmi-frame .ri-panel i { font-style: normal; }

/* ---- tool header (Edit page: toggle, bold tool name, two icons) -------- */
.tmi-frame .ri-toolhdr {
  height: 32px;
  border-bottom: 1px solid var(--ri-line);
  position: relative;
  padding-left: 49px;
  font: 700 var(--ri-fs-title)/29px var(--ri-font);
  letter-spacing: .75px;               /* lab: .25px on a real bold; the synthetic bold needs +.5px to keep its width */
  color: var(--ri-text);
  white-space: nowrap; overflow: hidden;
}
.tmi-frame .ri-toggle {
  position: absolute; left: 15px; top: 8px; width: 24px; height: 14px;
  border-radius: 7px; background: #171717;
}
.tmi-frame .ri-toggle::after {
  content: ""; position: absolute; top: 3px; left: 13px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ri-accent);
}
.tmi-frame .ri-ico-openfusion { position: absolute; left: 367px; top: 3px; width: 23px; height: 23px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAF6ADAAQAAAABAAAAFwAAAACm59GpAAAEB0lEQVRIDc1VXUhTYRg+ZzvO6ZjzN8vfqalBFikYmlGKZYIgpWYqKyhIkCK8qJCoZkU30UUQUUm4QsIKUW/mxRJx/kQgKOq6UBBHUvN3Op3O+XPW8562MVca1E0ffDvf+d73fd73eb/nO2OY/3EkJiYey8rKOrdTbdxOxp1sqampmbAHYb7fzk+8nWG7/YyMjHOZmZmqoKCgcqlUmpyQkCBbX18Xzc3NffWOEXlv/Imu2Wz+5nA45nmed2AymIEKhSLCG4fef2nLn+iOjo720CwqKlIg3tLc3Pzod8BbwIludHT0ocDAwDMwOEpLS80DAwOfa2pqBlZWVuQ2m43o+21uboox2K6uLjP2jU5gv/z8/Jy1tbXVjo6OT9hbpX135UQ3KioqlugKBo7bnZycfEAkEpkwOb1efxjP3enp6e1IwEApnfAd7+7ulqpUqmdxcXEXkdQRGRn5pqGhoYoSuMFddFFxCMdx9uLi4jpUwtntdjHLsnxISMhBPBUA+AhwLFlrbW2tGRWfUiqVKplMRjWxMTEx58H+3sLCgnHLgba1tfmCwcjk5GQfEvC+vr5LGo3mSGdn5yUoowDvR4eHhwvBYi8STABMDrWo/f39fXDIBM6gdd8BbKW1u3IYRb29vRK1Wt2ysbFBErXm5OSsJiUljYeFhe1xtQs2yeLiIoOqbSUlJVVgRHoXBlgyExMTT/Fipg03ONZiuVzOT09P80jCIpglB1e7vNURGhq6BwK4ATYMVU1zdna2v7GxsQ5hPMVuacvy8jI/NTXlGBkZuVpRUXELdj9yomE0GgcNBgMpgQaXl5d3HfpWutoBNfFjY2P3YbMIHvjxBOdBn7dYLHxAQEBebGzs7fLy8lr4+JNzf3//B2JBa9yF/VDFZRcwqQfn1Ioz05HdNYS2ZGdn7y0sLNwHimLIjUV/n0MNu5DgJhJIQJVY2JxBfmlpaXd9fHzsqFQbHx9fhqoXBwcHH3j4CK4COPR9ATq9QzsAFiZaxEAhDBJUFxQUzGq12odkP4mBfp8GC/XMzIw+PDy8zGQyverr6zOQ3XMI4DC+Q3YDKcI5RcHBwZfRnhM4pK6hoSGNM0iBb88dq9X6pamp6UVlZeU7SG9cp9M9hn3DE5jWgiK8NsW4cU+ghKsA1re2tpahwkn4iHCxqtGGxzjYUrRPlpKS8hoMqlpaWl7C/lPoHmCeB+relkgkSlwmHXp91glMtuCIiIhr+LRq8V3pwa28NT8/3wPgt7D9AkwBQlto4TH4+vr689C8GPTnXPvorRzqiAJgM658DQ4/DpK9AvuSy8f7+TtwqmJhaWlrDPRvwgXT4NtRDTuLm1jX3t7e4w34L+9S/Asdz83NzQeI+4L9C+Bfx/4A5u/4n8sN7EkAAAAASUVORK5CYII=") no-repeat; }
.tmi-frame .ri-ico-resetall  { position: absolute; left: 394px; top: 6px; width: 20px; height: 20px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAtFJREFUOBHlVM1r0nEY/+nPl+nyBdRRG02lVV48zcYGwS52GtspCA/tMnBrqCzQLtY/EINOhYJYhw47VApFHbYKosuEGnbQQlqwTVHzbZtv+drn+aHmFr0cgz7w8fl+n9/zfb7P21eG+e/A+4uMhbAZBFmwBVbAb2Ab/AnHHYphUQfpoHBmZuaCTqe7rlQqp3g8nga6w3K5/CGRSHjX1taC2JPjI6Bbu5BZrdYXer0+F4lEPs/PzzsNBsN9gUCg3N/ff5vP559Uq9WEWCzWDQ8P20ZHR8/mcrnXBwcHFHEP/RGq3G53JhaL2fh8/pmxsbGVeDz+dGNj49ru7m4KJ5ogHxTjMtvIyMgtOHzs9XoXoauBHPojlE5OTt5oNpuDML6STqdX/X6/AxHkYEn1UoMlsBEOhzfVarUQ2dgh30Wj0U/Qc6AbexAKhQxSmc5kMm+KxWJodnbWhI9ko7LZbF8hySmhGQwGb5dKpS2kv4w91Z6DoLsg2Wq1mHq9zgwNDU0Ts9nsK6ivgjLUkkxU9ANkwCqiDyHCy1hLQK5B/Q7zoVBovN1uo6G8Nsuyre3tbXZpaSkuEokYlUrFOByOj7VajfF4PNTxDGxjCEKJdb8fbH+AtVgsHnT7OVR0K4GiOme326mO5zt7CIa3sLBw1+VyUcPIKYcjNYSmhci+KBSKSxMTE6c7NlnIbKXCTQe37ugHpFKpCXV8j31vdI47bCPth+h03mg0rsLwROdw1ufzUUOodgTKZBkOx3d2du5h3xvw/rHhLNGIMl5HUaPRrGCwTxUKhU2wjI9ECmAAL8ip1WrdmM9HgUDgDnQ0oxz6B7urIymam5u7ieF2NhqNJF7KS8gYXolWIpGYZDKZKZVKPVhfX3ft7e3RnPbwK4dkwJrN5ilEsiiXyy+i8yfR1SJquZVMJr2Yw2ew6aXa9fg7h10b+rehjpP8479N99C/K78Du9AXZODuC1YAAAAASUVORK5CYII=") no-repeat; }

/* ---- global band (IC_ControlPage = -1): the banner on every page ------- */
.tmi-frame .ri-global {
  background: var(--ri-global);
  border-bottom: 1px solid var(--ri-line);
  padding: 10px 0;
}
.tmi-frame .ri-global img { margin: 0 auto; width: 355px; height: 132px; }

/* ---- page tabs: text, 60 px each from x 30 (buttons here) --------------- */
.tmi-frame .ri-tabs {
  height: 30px;
  border-bottom: 1px solid var(--ri-line);
  position: relative;
  display: flex;
  padding: 0 30px;
  overflow: hidden;
  white-space: nowrap;
}
.tmi-frame .ri-tab {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 var(--ri-tab-w);
  height: 29px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  text-align: center;
  font: 400 var(--ri-fs)/27px var(--ri-font);
  color: var(--ri-dim);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.tmi-frame .ri-tab:hover { color: var(--ri-text); }
.tmi-frame .ri-tab.on { color: var(--ri-text); box-shadow: inset 0 -2px 0 var(--ri-accent); }

/* ---- page + vertical rhythm (see inspector_look.md section 6) ----------
   a page whose first item is not a nest starts 5 px below the tab rule; a
   nest = 6 px gap + 1 px rule (15 px inset) + 28 px header + body, the first
   nest on a page has neither; a closed nest adds 2 px and the next nest's
   rule follows at once; a non-nest after a closed nest gets the closed
   nest's own bottom rule + 2 px; a nest in a nest: no rule, 2 px overlap,
   header 20 px in; after the last item 8 px, then the full-width rule.
   Every page is at least as tall as the tallest page at rest
   (--tmi-page-min, set by the script), like the fixed-height host panel. */
.tmi-frame .ri-page { position: relative; display: flow-root; padding: 0; min-height: var(--tmi-page-min, 0px); }
.tmi-frame .ri-page > :first-child:not(.ri-nest) { margin-top: 5px; }
.tmi-frame .ri-page-end { height: 1px; background: var(--ri-line); margin-top: 8px; }
.tmi-frame .ri-nest.is-closed + .ri-page-end { margin-top: 0; }

.tmi-frame .ri-nest { margin-top: 6px; }
.tmi-frame .ri-nest::before {
  content: ""; display: block; height: 1px;
  margin: 0 var(--ri-inset); background: var(--ri-line);
}
.tmi-frame .ri-page > .ri-nest:first-child { margin-top: 0; }
.tmi-frame .ri-page > .ri-nest:first-child::before { display: none; }
.tmi-frame .ri-nest.is-closed + .ri-nest { margin-top: 0; }
.tmi-frame .ri-nest.is-closed:has(+ :not(.ri-nest):not(.ri-page-end))::after {
  content: ""; display: block; height: 1px; margin: 0 var(--ri-inset) 2px; background: var(--ri-line);
}
.tmi-frame .ri-nest .ri-nest { margin-top: -2px; }
.tmi-frame .ri-nest .ri-nest::before { display: none; }

.tmi-frame .ri-nest-hdr {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  height: var(--ri-hdr-h);
  margin: 0; border: 0; border-radius: 0; background: none;
  position: relative;
  padding: 0 0 0 36px;
  text-align: left;
  font: 400 var(--ri-fs-hdr)/30px var(--ri-font);
  color: var(--tint, var(--ri-label));
  white-space: nowrap; overflow: hidden;
  cursor: pointer;
}
.tmi-frame .ri-nest.is-closed > .ri-nest-hdr { height: calc(var(--ri-hdr-h) + 2px); }
.tmi-frame .ri-nest-hdr::before {
  content: ""; position: absolute; left: 18px; top: 9px; width: 11px; height: 11px;
  background: var(--ri-label);
  -webkit-mask: var(--ri-i-arrow) no-repeat; mask: var(--ri-i-arrow) no-repeat;
}
.tmi-frame .ri-nest.is-closed > .ri-nest-hdr::before { -webkit-mask-image: var(--ri-i-arrowr); mask-image: var(--ri-i-arrowr); }
.tmi-frame .ri-nest .ri-nest > .ri-nest-hdr { padding-left: 56px; }
.tmi-frame .ri-nest .ri-nest > .ri-nest-hdr::before { left: 38px; }
.tmi-frame .ri-nest.is-closed > .ri-nest-body { display: none; }
.tmi-frame .ri-nest-hdr:hover::before { background: var(--ri-text); }

/* keyboard focus on the two working parts: an ice edge inside the element */
.tmi-frame .ri-tab:focus-visible, .tmi-frame .ri-nest-hdr:focus-visible { outline: 1px solid var(--tm-ice, #cdd8ff); outline-offset: -3px; }

/* ---- separator, notes ---------------------------------------------------- */
.tmi-frame .ri-sep { height: 12px; position: relative; }
.tmi-frame .ri-sep::before { content: ""; position: absolute; left: var(--ri-inset); right: var(--ri-inset); top: 6px; height: 1px; background: var(--ri-line); }
.tmi-frame .ri-note {
  min-height: var(--ri-row);
  padding: 5px 60px 4px var(--ri-ctl-x);
  font: 400 var(--ri-fs)/var(--ri-note-lh) var(--ri-font);
  color: var(--ri-dim);
  white-space: normal;
  overflow-wrap: break-word;
}
.tmi-frame .ri-note.is-blank::before { content: "\00a0"; }

/* ---- rows: [label 152][cell: 5 | control | 5 | reset 40] ... [15] ------- */
.tmi-frame .ri-row {
  display: flex;
  min-height: var(--ri-row);
  padding-right: var(--ri-pad-r);
  position: relative;
}
.tmi-frame .ri-lbl {
  flex: 0 0 var(--ri-lbl-cell);
  padding: 0 5px 0 15px;
  text-align: right;
  font: 400 var(--ri-fs)/var(--ri-row) var(--ri-font);
  color: var(--ri-label);
  white-space: nowrap; overflow: hidden;
}
.tmi-frame .ri-row--nolabel > .ri-lbl { flex-basis: 15px; padding: 0; }
.tmi-frame .ri-cell { flex: var(--w, 1) 1 0; min-width: 0; display: flex; padding-left: 5px; }
.tmi-frame .ri-ctl { flex: 1 1 auto; min-width: 0; margin-right: 5px; position: relative; min-height: var(--ri-row); }
.tmi-frame .ri-rst { flex: 0 0 var(--ri-rst); position: relative; height: var(--ri-row); }

.tmi-frame .ri-kf { position: absolute; left: 15px; top: 8px; width: 11px; height: 11px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAALxJREFUGBljYMAEsmxsbCeBwrKYUqgislxcXA9iYhP+gWh0DcxIakEKD+fmFcnr6OoxamhoCpw/dybo9+/fa4FqPoHUwRTDFcrJK4DEGfgFBBjQNYAUYygEq8aigRnomd0hoRFaIKthipBpkA28vLz8N25cs2H69etXyLq1qx49evgAWQ2cDRIHyYPUgZzxCeQJkGdAbgSZBAMghZMn9T389u2bLVDsMcyDGBrQFcIMQKbxhjOyQhgbZwwCAJFgY/gxQLb4AAAAAElFTkSuQmCC") no-repeat; }
.tmi-frame .ri-rst .ri-fontbtn { position: absolute; left: 8px; top: 2px; width: 23px; height: 23px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAF6ADAAQAAAABAAAAFwAAAACm59GpAAACsElEQVRIDe1Uu2taYRS/Xo2PYDSoTYsSKenSoCCEQP0DHCw4aOlSKvSxlKAd+krJ0g7pUtp0qjjUxcGSzFqngpu4uIhCKTgkpqSPVK02Gl/X/s7F76LXlHbKlAPnnu/8zuM73/nOdznujE67AwrZhqQbwUoZLld/AejLQbk+npz3+/13lpaWXiiVyoXBYMCrVCpOo9FMxAiCwGWz2dVMJvM5GAxu6nS6WebQ7Xb5eDx+H3qbMBUzQBqWl5c31Wr1hXw+/yiVSsV9Pt+tlZWVLa1WK7m1222uVqv9BDALfNVoNGpRzLm5uTl7p9Oh0zwFi8l5KQqtAJ2nyuQ0HA45xnQal8t1Ez4/YrHY1UKh8LDX62lwUgFyInS8cg6JeYVCIdjt9ufhcPgZJUI1dbAUNNrkkACv1+tyOBw7PM9ryuXyltVqfSA5YjGRnAJ3d3c3EonEO9j0YHYnJOmSa+AhuO50Oi/hBDtUdalUuqHX6y2oHiZuhj5EU8lRfQW4MhQKvZ2fn7eJXvjU6/UvkUjkLpbUb5H29/eLzWbzdTqd/uh2uy8fHx+/geH3yDydfLR7Y29vL4lAM3NsNBrfsG4yvVgslsHXoB8RlsvlPkFsgKVLm6qcHEG9ZDL5HpK1RQTxoSOrwTQItJGYGJLzeDxXLBbLve3t7RDUFmFTyXGh1FPD2trauslkspCTnKrV6mE0Gn0JvMFsZrP54uLi4m3oj8HTyZkj5BHakm21WoYxTFqiRXSx4ixL4AmLicr7/b6AiaFW9D+ATvD/K0RxFA8HKae0ADjApBxgZq8HAgF6+v/8d7CdMI4z8A/g+X9lGMnx5M1KpbJus9le4aX6sQk9KPFlkiNbkySiN8EwJBcQc4BWPoHpu+iAj3waSF8YGf+78pE/vSCaIPEljbAzccod+AMSJx/7CVbStQAAAABJRU5ErkJggg==") no-repeat; }

/* ComboControl */
.tmi-frame .ri-combo {
  height: var(--ri-box); margin-top: 3px;
  border: 1px solid var(--ri-field-edge); border-radius: 3px;
  background: var(--ri-field);
  padding: 0 24px 0 7px;
  font: 400 var(--ri-fs)/18px var(--ri-font);
  color: var(--ri-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.tmi-frame .ri-combo::after {
  content: ""; position: absolute; right: 6px; top: 5px; width: 11px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath d='M1 1l4.5 5.5L10 1' fill='none' stroke='%23858585' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat;
}

/* TextEditControl: single-line centred, multi-line (TEC_Lines N) 18 px a line */
.tmi-frame .ri-edit {
  height: var(--ri-box); margin-top: 3px;
  border: 1px solid var(--ri-field-edge); border-radius: 3px;
  background: var(--ri-field);
  padding: 0 4px;
  font: 400 var(--ri-fs-edit)/18px var(--ri-font);
  color: var(--ri-text);
  text-align: center;
  white-space: nowrap; overflow: hidden;
}
.tmi-frame .ri-edit--multi {
  height: calc(18px * var(--lines, 8)); margin: 3px 0 2px;
  text-align: left; white-space: pre-wrap; overflow: hidden;
  padding: 2px 2px 0; line-height: 18px;
  border-radius: 2px;
}
.tmi-frame .ri-row:has(.ri-edit--multi) { min-height: calc(18px * var(--lines, 8) + 5px); }

/* MultiButtonControl */
.tmi-frame .ri-mb {
  display: flex; height: var(--ri-box); margin-top: 3px;
  border: 1px solid var(--ri-line); border-radius: 2px; overflow: hidden;
  background: var(--ri-seg-off);
}
.tmi-frame .ri-mb > span {
  flex: 1 1 0; min-width: 0; text-align: center;
  font: 400 var(--ri-fs)/18px var(--ri-font);
  color: var(--ri-dim); white-space: nowrap; overflow: hidden;
}
.tmi-frame .ri-mb > span + span { border-left: 1px solid var(--ri-line); }
.tmi-frame .ri-mb > span.on { background: var(--ri-seg-on); color: var(--ri-text); }

/* ButtonControl: buttons span 62..360, 10 px gap */
.tmi-frame .ri-row--btn { padding: 0 60px 0 62px; gap: 10px; }
.tmi-frame .ri-btn {
  flex: var(--w, 1) 1 0; min-width: 0;
  height: var(--ri-btn); margin-top: 2px;
  border: 1px solid var(--ri-btn-edge); border-radius: 11px;
  background: transparent;
  font: 400 var(--ri-fs)/20px var(--ri-font);
  color: var(--ri-btn-text); text-align: center;
  white-space: nowrap; overflow: hidden;
}

/* CheckboxControl */
.tmi-frame .ri-check { display: flex; height: var(--ri-row); white-space: nowrap; overflow: hidden; }
.tmi-frame .ri-cb {
  flex: 0 0 15px; height: 15px; margin-top: 5px;
  border: 1px solid var(--ri-field-edge); border-radius: 2px;
  background: var(--ri-field) no-repeat center;
}
.tmi-frame .ri-cb.on { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAASBJREFUKBVjYKAhYNu5c2fN3bt3lwHtECbGHua1a9em/f///9eNGzc2ADWIEtLEOGPGjJB///59+fHjx0NZWVk/oAY2vJoaGxsd//z58xpoy++ioqJKoGIhIGZE18QBE8jIyDAEmn4fqOH/0aNHVwDF1YCYGSYPppuamrRv3bq1zNPTU9nDw0Ph8+fPl0EagPR1bm5uF6AiuIEwjYpfvnwBK/r69ev9T58+HQdpAPrle0xMTD5QER8QYziLt62trRGo6AdIMQysX79+LlCxPBAzATEGYAWK6Le2tnYBNfwEaXr58uVZoJgVEOMNLU6gAqPOzs7eX79+vXZzc0sG8nmAGAOguxOkERRKICedBOLXQPwPiAkCkHMEgBg1eJG0AQD6soq3bHFu4wAAAABJRU5ErkJggg=="); }
.tmi-frame .ri-check > span { margin-left: 10px; font: 400 var(--ri-fs)/var(--ri-row) var(--ri-font); color: var(--ri-label); }

/* SliderControl: knob centre = 163 + 126 t at the 420 px panel */
.tmi-frame .ri-slider { display: flex; height: var(--ri-row); }
.tmi-frame .ri-slider .ri-track { flex: 1 1 auto; position: relative; margin-right: 5px; }
.tmi-frame .ri-slider .ri-track::before {
  content: ""; position: absolute; left: 1px; right: 7px; top: 11px; height: 3px;
  border-radius: 2px; background: var(--ri-track); box-shadow: 0 1px 0 var(--ri-track-hi);
}
.tmi-frame .ri-knob {
  position: absolute; top: 7px; width: 11px; height: 11px;
  left: calc(0.5px + (100% - 17px) * var(--t, 0));
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAQNJREFUGBmNkTFrg0AYhs+7U5FQRTuKCBmKk4hbx5K5i/T/lI75L8F/EPwBQXAqmqEg4iDYCpVQDhXqW9IhECTvcHD3Pt93934nkbNs277nnL/KsryZpmnNGPsYhmE/juNbXdefwCQsrus+zeYuCIKV53mqaZqk6zqS57nIsuw0F7+UZZlI6Kiq6jGKIstxHNReqKoqEsfxlxDigVmWtQ3D8NH3fX5BnTeGYZAZpE3T3FG8EVdfA//P4IOjCIM3Lgk+OIrUCLMk+OAoxoPUSzB8cBRzxHiQ+ppwDh8c6/v+R9f1Q1EUz0itaRpXFIW0bUvSNBVJknxjznPR+9+noOMtP/gLQ7CSVfQQA1oAAAAASUVORK5CYII=") no-repeat;
}
.tmi-frame .ri-knob.red   { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAQRJREFUGBmNkbFqAkEQhmd37jw9z8CpYLFFwCK+QcBGEOt0eY88QrBMmbewyBuI2GsfiEVAwhYpjODhqXcZL/mDEEQ5/Ist5v92d/4ZRQcZY2oF5keHqCdETSZ6/yYaJSJ9a+0CmMJxbUzXZX7pJnH5Nt16DRH6ZKaJW9yNC/46FbmfWztWeLHEPHtYL6stSXH3SG/s0nM5/NqI3HA9DJ96SdzupNvfDk5Vz/YUK6XnrlfR6BFfn2L/FfjgNMKgxzzBB6eRGmHyBB+cxniQOg+GD05jjhgPUp8T6vDBcRRFm0oQTKeef4fUQbZ3illGlh0aev5uULpaYc4f1r7+LQUvXrLBHz12eDZUThRDAAAAAElFTkSuQmCC"); }
.tmi-frame .ri-knob.green { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAPxJREFUGBmNkcFKw0AURd+8NzbSNELqwkUWBdH+Q1cirt35P9Jl/8VfEHEtuBSpIAhm0UVbNNjakJnx3RCFQgnexUDmnjcz98ZQoyzLDsXKNVm6IGeOScIrVXTrKjfO83wOzGBR8Jw7crM69fH3wEdVEsgWhvbfeNN94S9fuisduDM4UcHp8qzql0cBs1vqzAyl93ahA0NJ++lkNfSj9Ym3W1Tz4XpEXBqOlpIw3oird4G/e7WvHCMM3tim2leOkRph2lT7yjHqQeo2uPaVY/SIepB6l7APH5wURbFO4t5D991eInWIyAbtZe/DUPwsm4NH+Wx6fvo77j9/8Ae56Xm5TLLfIgAAAABJRU5ErkJggg=="); }
.tmi-frame .ri-knob.blue  { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAQ5JREFUGBljZIACaWlpYWZmlnoGJhZnhv//lBgYme4x/Puz9+/fP41Pnz59C1LGCCKkpeUdmVmY13zn0+b+yaPC/odVgIHl9wcG9i93fnJ+uvr175+/IU+fPtzPCDaRhf3WRwkvod+cUiC9KID1+zMG/hfb3v3981ONWVBQqPM7v67lDz4tFhRVUM4/Vl4Gxn8/mdh+veZlArkRZDU2hTAxsDxQHRPIMyA34gN/WfkZQOqYQL4GeQYfYP79ERgUTPeYQMED8jU+xWB5oDomUDiCggfka2wAJA4OPqA65s+fP3/n4eE7zfntri/I1/+ZOVj+MbExsPx6x8D58dJPnrfHPkHC+fE1cKSATCQmBgFkXIY7TBEp9wAAAABJRU5ErkJggg=="); }
.tmi-frame .ri-defdot {
  position: absolute; top: 17px; width: 6px; height: 6px;
  left: calc(3px + (100% - 17px) * var(--d, 0));
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAHNJREFUCB1FjUEKgCAURLUgtA4gCF7NTceoXR2jlScTXbgWKRCS+tOmgWGGNx9+z35NVAfyDcRha+1sjNk55yyEsDrnjo6GkeAmpVRCCKW13ohNGFit9WmtMfghgWE4Y4xLKSXlnJP3fiF24QeEHL9Gh8gXW2Ipsp7vKrwAAAAASUVORK5CYII=") no-repeat;
}
.tmi-frame .ri-value {
  flex: 0 0 55px; height: var(--ri-box); margin-top: 3px;
  border: 1px solid var(--ri-field-edge); border-radius: 3px;
  background: var(--ri-field);
  font: 400 var(--ri-fs-edit)/18px var(--ri-font);
  color: var(--ri-text); text-align: center;
  white-space: nowrap; overflow: hidden;
}

/* ScrewControl (thumbwheel) */
.tmi-frame .ri-screw { flex: 1 1 auto; margin: 6px 10px 0 0; height: 14px; border-radius: 1px; position: relative;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAAQCAYAAADj70HHAAAABGdBTUEAALGPC/xhBQAAAF9JREFUeNrt2jEOABEUBFAcQE/c/2Sb1TuBSqfQSeS9yrS/mHwiBIBDsdQ2jAE4kYwAUBiAwgDuieuw3jL6/2VZluVdtmEAriSAwgAUBqAwgKf46QnYMACFASgMAOApExx0C+xHquxcAAAAAElFTkSuQmCC") center / auto repeat-x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJMAAAAQCAYAAAASwU1jAAAABGdBTUEAALGPC/xhBQAABIJJREFUaN7tWVGW5CAIBOK8PcLc/0x7nO6R/VhxKgTQ9M7+dd7L68QoopZFSRO9r/f1Qxd/fn7+ni9ERMx0eocyETmVZfXZ6jMTqRIzkxIRj/YiQu3jg1prdBwHtda+y0ToaO383BrJcdDH+G2j7BhlR2t0iMx6rTViZhKReTMzHcdBIkJENPu0evbr6zCMb+dSVfr6+rrcj8djfns+n/R8Pqn3Xv7is9npvdPj8Sjr4q+qkqrOZ/PRnrEOfuu9z+9WjuPD8do3wRdyE6fjJiKSv5ZJh/HVhJIqdVXqwwaPBVLsx2xZ/1APy07AhnJVJbUBM1/8z3xj5jkJNnYEDU707d05bKMd24hmcwVQdWNEu+rmxdu338iWvzxQKj+s/8p/wYk0EOAC8mCX4SnR2MXh4iIzMZOM24DDw6Y4wE4QqF7BOlhN85mfExhNth+4vUcT4ifLL8wuM1V97IAI2yE4I7ueQfwGYOawDNccnytg+fH4unLZ/VEDZuoAiKhDBvaYoBz3LLcBIzjNkQFADsDCEfAAtASTtRpwtmj2LiL/hZnsHe1nQI82hC002q8Yyffpy6JyBFllK/NfTs4jC1l4ck6HizTCDQJLDIAGgsFq5MIcj/YGMM0YxbMaaIC+AST0vwoZxkx3WWUF1Mq/KhRlbbOQ5cdbtbOxRmE1AtrKl1OYo8FCPsxk9Onr2KIrLLB9096vGknkyjYwiA7+qLPLcBgQkW8mDGK99992eBQ2cOe9dKJJJhoF8O7i7GqfCES+v4jtbKyRLzZfEVtmUkLY6xfHBhOp+eydQKRoHIDDxkw4ccZMFuYgFKrqPA1GzHTSUUOAa6CLwpDs9ALWiXbrK5rpoic2hHHV5wpwCKJKb2X68K6Oi+qIVmoeFrAbk3gd4cITlncEpT85MH8zk4W5YjIV2Qo1GvSzu9jZLot0xE8yE4rhahGzw0EEjkjX7TBdJLorMFv/nvHCMMeJTrHQYqkBhpNTKcDHSc6nBjjQZlYXQ1rkyyVs2qnR6YPVDrdFqQQwg116Eaw+fM5c3QZjZqmBlbbZDYm4cbLTZ3SqNP9TMM2w4U8fuLOS8BblpGY6QZXEgBBpJrRvJ7+hhSJfFB1GneRY704eJ6N0TNzdZaYIFD5peDekZGPzKYFqse/qsorBSzCddn8krpw45kRjoZDvkCfy4vqUtMSckg8DbmK773+EyyyWZxOb5W92wtAOM12OzW6Rq9NetlhRG58aqIT+Tv7pTgj38yfIAlVi0ELL1D4uZCG4NGvvc0V2IgOxHYVRRTtgi5NM7k7sj8IH5lFeFeCr00+Udd5hrFUG/E7aIAufVeiNRLsfq+CicHGaI58rcppHQTfxOYk12YNdH6iDuktLYLqCI9Y0zVQsaKRNsuyyb/cqM0XtV1n4VcZ8J6OOYW6VtMxOmJnw350TOYWSJGnp/xK55KYS7WRhzjSTOs2kvZ//+4MytVOayzMhq1mmPRPgOzs9ywf9S2oga4/M9wrTZP5mqYFVmLex7ua5fAb8ktNT1V/0vt7XD1x/ACMnZCnh7LTuAAAAAElFTkSuQmCC") center / 100% 100% no-repeat, var(--ri-screw);
  box-shadow: 0 1px 0 var(--ri-track-hi); }

/* OffsetControl (point: X [55] .... Y [55]) */
.tmi-frame .ri-point { display: flex; height: var(--ri-row); align-items: flex-start; }
.tmi-frame .ri-point > i {
  flex: 0 0 10px; margin-right: 10px; text-align: right;
  font: 400 var(--ri-fs)/var(--ri-row) var(--ri-font); color: var(--ri-label);
}
.tmi-frame .ri-point > .ri-value + i { margin-left: auto; }

/* ColorControl (collapsed): [> expand][swatch 74 x 20][pick 25], then a slider per channel */
.tmi-frame .ri-color { display: flex; height: var(--ri-row); position: relative; }
.tmi-frame .ri-color .ri-expand { flex: 0 0 11px; height: 11px; margin: 8px 13px 0 1px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAT1JREFUGBljZkAARiCTB4iZgPgPQhjBYkYwGYRKS0uP2drauv3//3/P48ePvyLJgZkwxSBTWZWVlQ3ExcVDZWRkPPj5+Q/cvn37LbIGmGKQ2L9Lly7dkZSU/CEhIeElJiYWLCUlde7KlSsPYRqQFf8HCn4ASt5lY2N7JSsr6yQkJBSppaV198yZM9eBcv+RFYMM+AvEn+7evXufh4eHRV5e3pGRkdH86NGjS4Di31hAKpAAyPR/MTExNkCFqd+/f/90/vz5qUAxkGcZ0RWzpaen54mIiLT9/v375Z49ezrOnTu3E6jwFxD/R1bMkpaW1gFUWPjt27dL69at63r48OEhoKKXQAxyHgOyYkGgx1zev3+/bfHixTM+f/58Eij/DqoQ5DwGUPiCAIjmBGJHIP4CxBeB+DMQg00E0mAAANldbWxt41A5AAAAAElFTkSuQmCC") no-repeat; }
.tmi-frame .ri-swatch { flex: 0 0 74px; height: var(--ri-box); margin-top: 3px; border: 1px solid var(--ri-swatch-edge); background: var(--c, #fff); }
.tmi-frame .ri-pick { flex: 0 0 25px; height: 25px; margin: 2px 0 0 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAhBJREFUSA1jYBgFwzUEWIAekwdiEI0BGDFESBfgTE1N7WJlZfW6e/du0M6dOy+iG8GMLkAEH+QwMSD+CcTs6enpnTIyMrmCQMDPz+/++fPntS9fvvyEbA5W7yErQGOzRkdHZ3Nzc0dcuHAhzsDAIFtaWjoX6AuGf//+MXz48OH9o0ePvqDpwR6G6IqQ+IJAQ5P4+Ph0hYWFD3JxcUmwsLAw/P37l+HNmzcnT5w4EQK06AOSejCT1OD69uPHj8tAi1x4eXmlmZmZwRa8ffv25LZt24KvXbv2FN0CEJ8JmyAeMQ4VFRXts2fPRnz69OkRKIj+/PnzAxh0Obdu3cJqAamWcCYlJXVoaGjMUFdXLz1w4EDMx48fHzExMXHo6+vPBxomhMtxxAYX2AJgMOWBIpmTk1MTGBdvgD5oBQabG9BXly9evLgVaMk3bBYRk084ExIS2oDJtICNjQ2cit69e3di8+bNEffv33/Iw8Mj9uXLl69QC/6TYwmKBaBUBLIAmOFC8MUBukX4fMKamJjYKSUlVQjyAdSC47t27QolxQKQhbgyI3NUVFSthIREISgOgCmI4f3792RZgM8SXmAREQzzATAfHN+zZw/JPoAFGzafMHp6euoDLREFlkNfgCnnyKFDh1JIDSKYBbho+eTk5IeRkZGlQAXiQMyBSyEl4lySkpLGQAOIzUOU2DWqd4BCAACy6NaH1qghRQAAAABJRU5ErkJggg==") no-repeat; }

/* ==========================================================================
   PART 2 - the section: copy beside the panel (one column on phones)
   ========================================================================== */
.tm-page .tmi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px clamp(48px, 7vw, 104px);
  align-items: start;
}
.tm-page .tmi-copy { position: sticky; top: var(--tmi-stick, 112px); max-width: 470px; }   /* --tmi-stick: a copy taller than the screen sticks by its foot (js) */
.tm-page .tmi-copy h2 { margin-top: 0; }
.tm-page .tmi-copy .tm-lede { margin-top: 22px; }

/* the five tabs as one hairline list: the shown tab is white with the one light at its left */
.tm-page .tmi-index { list-style: none; margin: 36px 0 0; padding: 0; }
.tm-page .tmi-index li + li { border-top: 1px solid var(--tm-rule); }
.tm-page .tmi-pick {
  -webkit-appearance: none; appearance: none;
  position: relative; display: block; width: 100%;
  margin: 0; padding: 16px 0 16px 20px; border: 0; border-radius: 0; background: none;
  text-align: left; color: inherit; cursor: pointer;
}
.tm-page .tmi-pick::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px;
  background: var(--tm-light-v); opacity: 0; transition: opacity .2s ease;
}
.tm-page .tmi-pick[aria-pressed="true"]::before { opacity: 1; }
.tm-page .tmi-pick .tm-hl-label { transition: color .2s ease; }
.tm-page .tmi-pick:hover .tm-hl-label, .tm-page .tmi-pick[aria-pressed="true"] .tm-hl-label { color: #fff; }
.tm-page .tmi-pick .tm-hl-note { margin-top: 6px; max-width: 40ch; }
.tm-page .tmi-pick:focus-visible { outline: 1px solid var(--tm-ice); outline-offset: -1px; }
@media (forced-colors: active) {
  .tm-page .tmi-pick[aria-pressed="true"]::before { forced-color-adjust: none; background: CanvasText; width: 2px; }
}
.tm-page .tmi-caption { margin: 28px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--tm-soft); }

/* the panel's frame: the Inspector keeps its real 420 px; a narrow screen
   scrolls it sideways inside the frame, never the page */
.tm-page .tmi-stage { min-width: 0; }
.tm-page .tmi-frame {
  width: 422px; max-width: 100%;
  min-height: 1080px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #28282e;
  scrollbar-width: thin; scrollbar-color: #5a5f66 #28282e;
}
.tm-page .tmi-frame:has(.ri-panel) { min-height: 0; }
.tm-page .tmi-swipe { display: none; margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--tm-soft); }
.tm-page .tmi-stage.is-wide .tmi-swipe { display: block; }

@media (max-width: 1023px) {
  .tm-page .tmi { grid-template-columns: minmax(0, 1fr); }
  .tm-page .tmi-copy { position: static; max-width: 640px; }
  /* one column: the panel's own tabs do the list's job, so the panel comes sooner */
  .tm-page .tmi-index { display: none; }
  .tm-page .tmi-caption { margin-top: 20px; }
  .tm-page .tmi-stage { justify-self: center; width: 422px; max-width: 100%; }
}
@media (max-width: 820px) {
  .tm-page .tmi-pick { padding: 13px 0 13px 18px; }
  .tm-page .tmi-copy .tm-lede { margin-top: 18px; }
}