/* EchoHost plugin replica — spec docs/superpowers/specs/2026-09-23-plugin-replica-design.md. All sizes at native 720x339; the .eh box is scaled as a whole. */
.eh { font-family: Geneva, Verdana, sans-serif; font-size: 8.5px; /* JUCE height 11 measures as 8.5 px CSS */ line-height: 1; color: var(--ink); background: var(--paper); position: relative; width: 720px; height: 339px; box-sizing: border-box; outline: 1px solid var(--ink); outline-offset: -1px; transform-origin: 0 0; user-select: none; }
.eh-halftone { color: var(--ink); -webkit-mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); -webkit-mask-size: 1px 1px; mask-size: 1px 1px } /* "disabled": black through a soft 78 / 22 checker whose 2x2 tile spans one css px, so each cell is one device pixel at 2x like the plugin's text screen (its SEQUENCE and SYNC strokes measure 56 / 200 on the 2x render, never solid black) */
.eh-ghost { color: var(--ink); -webkit-mask-image: var(--p25); mask-image: var(--p25); -webkit-mask-size: 8px 8px; mask-size: 8px 8px } /* "ghost": 25 % stipple */
.eh-a11y { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: inherit; pointer-events: none } /* keyboard/AT target only; the mouse hits the visual */
.eh-dv { position: relative; display: inline-flex; align-items: baseline; gap: 2px; cursor: ns-resize; font-weight: 400 }
.eh-dv.labelonly .n, .eh-dv.labelonly .u { display: none } .eh-dv.labelonly::before { content: attr(data-label) } /* the plugin prints the HAAS / WIDTH handles at regular weight */
.eh-dv.primary { font-weight: 700 } .eh-dv .u { font-size: 7px } .eh-dv .u.pct { font-size: inherit; margin-left: 1.5px } /* the plugin sets % at the number's size; ms / Hz / dB drop a step */ .eh-dv.off { font-weight: 400; text-decoration: line-through; gap: 0; word-spacing: -3.5px } .eh-dv.off .n::after { content: '\a0' } /* the plugin's strike runs unbroken from the number into the unit: a struck space stands in for the gap */ /* a struck readout stays solid ink in the plugin (0 dB, 50 ms) — only its weight and the strike say "off" */
.eh :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px } .eh .eh-a11y:focus-visible { outline: none } .eh .eh-dv:has(.eh-a11y:focus-visible), .eh .eh-knob:has(.eh-a11y:focus-visible), .eh .eh-meter:has(.eh-a11y:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px }
.eh-knob { position: relative; display: inline-block; width: 64px; height: 64px; cursor: ns-resize } .eh-knob canvas { display: block; background: radial-gradient(circle at 32px 32px, var(--paper) 18px, transparent 18.5px) } /* the body's white disc (r = 0.70 x 26) sits under the ink so the ground never shows through the dial */ .eh-knob.off canvas { -webkit-mask-image: var(--p50); mask-image: var(--p50); -webkit-mask-size: 2px 2px; mask-size: 2px 2px } /* disabled = halftoned, never faded */
.eh-range { width: 144px; height: 42px; display: flex; flex-direction: column-reverse } /* readouts above the ribbon, as the plugin draws them */ .eh-range canvas { display: block; cursor: ew-resize } .eh-range-row { display: flex; justify-content: space-between; align-items: center; height: 24px; padding-top: 4px } .eh-range-row > * { transform: translateY(-.5px) } /* the Hz readouts sit half a px above where the padded row centres them; padding snaps text to whole px, a transform does not */ .eh-range .eh-dv .u { font-size: inherit; margin-left: .5px } .eh-range .eh-dv .n { letter-spacing: -.3px } /* the plugin prints the filter endpoints' Hz / kHz at the number's size (measured: kHz inks 13 px wide like the digits); only ms / dB drop a step */ /* readouts 2 px lower than centred, the ribbon where it is */
.eh-word { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: var(--ink); cursor: pointer; letter-spacing: inherit; text-transform: inherit }
.eh-word.primary { font-weight: 700 } .eh-word.on:not(.eh-freeze) { text-decoration: none; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 64%, var(--paper)) } /* the plugin's underline is a 1 px rule at 64 % ink (measured 75 / 109 over its two device rows), one row below the word */ /* the plugin's underline is one device pixel (a grey hairline on the 2x render); Chrome clamps text-decoration to 1 css px and snaps borders and background rules up to 2, so the rule is a half-px box-shadow strip just under the glyph box */
.eh-word.off { text-decoration: line-through } .eh-word.dim { -webkit-mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); -webkit-mask-size: 1px 1px; mask-size: 1px 1px }
.eh-words { display: inline-flex; align-items: center; white-space: pre }
.eh-sep { display: inline-block; width: 1px; height: 12.5px; margin: 0 3px; font-size: 0; background: var(--ghost) } /* a solid light hairline the height of the row's text, as the plugin draws it, not a pipe glyph */
.eh-line.short .eh-sep { height: 8px; margin: 0 3.5px 0 2px } .eh-line .eh-halftone { letter-spacing: .25px } /* SYNC screens at the same 56 / 200 checker as the mode words (measured); its lighter mean is its thinner strokes */ /* SYNC's screened letters advance 5.5 px in the plugin */ /* TIME | SYNC: the rule sits close to TIME, SYNC well after it */
.eh-line.phase .eh-word:not(.k) { letter-spacing: -.3px } /* PING-PONG inks 42 px in the plugin, 44.5 at the browser's advances */ .eh-line.phase .eh-sep { margin: 0 12px 0 14px } .eh-line.phase .eh-sep + * + .eh-sep { margin-left: 12px } /* LØ | PING-PONG | RØ: rules at x 47 and 127 of the plate */
.eh-line.spread { gap: 0 } .eh-line.spread .eh-sep { margin: 0 0 0 2px } /* HAAS sits where an even spread puts it; the rule and WIDTH 2 px right of that */ .eh-line.spread .eh-dv:first-child::before { letter-spacing: -.2px } .eh-line.spread .eh-dv:last-child::before { letter-spacing: 1px; word-spacing: -2px } /* HAAS sets 1.5 px tighter and WIDTH 2.5 px wider than the browser's advances */ /* ← HAAS → | ← WIDTH →: four equal gaps */
.eh-line.duck .eh-sep { margin: 0 -2px } .eh-line.duck .eh-dv + .eh-dv { margin-left: 12px } /* DUCK | GATE: the rule tight to both words; the two readouts 20 px apart, right-anchored */
.eh-line .eh-word.primary { margin-left: 2.5px } .eh-line .k.off { letter-spacing: .2px } .eh-line .eh-word.primary.off { margin-left: 2px; margin-right: -2px; letter-spacing: .6px } .eh-line .eh-word.primary.off + .eh-sep { margin-right: 1.5px } /* the rule after OFF sits 3 px further right in the plugin; FBK inks from x 193 at 2x */ /* struck LFO MOD / OFF ink 38.5 and 17 px in the plugin, a hair wider than the browser sets them */
.eh-fbk { display: inline-grid } .eh-fbk > * { grid-area: 1 / 1 } .eh-fbk .ghost { font-weight: 400; opacity: var(--a); transform: translateX(var(--x)); pointer-events: none } /* the plugin's FBK "mirror ghost": a copy of the word offset and faded by the feedback amount (PluginEditor paint(), FBK row) */ /* the LFO mode word sits a touch further from its caption */
.eh-meter { box-sizing: border-box; position: relative; display: inline-block; height: 10px; border: 1px solid var(--ink); background: var(--paper); vertical-align: middle; clip-path: inset(-4px 0) } /* the threshold handle may stand above and below the track but never past its ends (at max it sits on the end rule, 1 px wide, as the plugin clips it) */
.eh-meter.drag { cursor: ew-resize } /* §5: SAT and LIMIT print no number — the track itself is the threshold handle */
.eh-meter .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); -webkit-mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); mask-image: repeating-conic-gradient(rgb(0 0 0 / 78%) 0 25%, rgb(0 0 0 / 22%) 0 50%); -webkit-mask-size: 2px 2px; mask-size: 2px 2px } /* dither::fill p50: a 78 % / 22 % checker, one css px per cell, flush inside the track's rule (measured 200 / 56 at 2x) */ .eh-meter .peak { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink) } /* a 1 px tick in the plugin (two solid device px with a grey edge each side, measured ahead of the fill) */ .eh-meter .peak[hidden] { display: none } /* no tick at the floor, as the plugin draws none */ .eh-meter .thr { position: absolute; top: -3px; height: 14px; width: 2px; background: var(--ink) }
.eh-rack { width: 336px; display: flex; flex-direction: column }
.eh-rack-head { display: grid; grid-template-columns: 28px 166px 9.5px 39px 18px 39px 18px 18.5px; height: 18px; align-items: center; font-size: 6.5px; text-transform: uppercase }
.eh-rack-head .h-lat { grid-column: 2; text-align: right; padding-right: 8px } .eh-rack-head .h-in { grid-column: 4; text-align: center } .eh-rack-head .h-out { grid-column: 6; text-align: center } .eh-rack-head .h-x { grid-column: 8; display: flex; justify-content: flex-end; margin: -5.25px 1.5px 0 0 } .eh-rack-head .h-x svg { display: block } /* the clear-all icon rides 6 px above the head's text line, at grid y 33 */
.eh-row { display: grid; grid-template-columns: 15px 12px 167px 11px 39px 18px 39px 18px 17px; height: 28px; box-sizing: border-box; margin: 0 -5px; padding: 2px 4px 0 6px; align-items: center; background: linear-gradient(var(--ink), var(--ink)) 5px 100% / calc(100% - 10px) 1px no-repeat var(--paper) } /* the rule under every row is the 336 px rack width (x 192–528), the white plate runs 5 px past it each side; drawn as a bottom-anchored 1 px gradient so the plate can be wider than the rule */ /* the plugin rules every row solid, loaded or not; the rows ARE the white plate (the head sits on the ground); 3 px top padding seats the caps on the plugin's baseline */
.eh-rack-head + .eh-row { margin-top: 2px; height: 27px; padding-top: 1px; border-radius: 2.5px 2.5px 0 0 } /* rows 2-8 seat their text half a px lower than row 1 (measured) */ /* the plate's top edge is at grid y 42.5; row 1's rule lands at y 104 like the plugin's */
.eh-row:last-child { background: var(--paper); border-radius: 0 0 2.5px 2.5px }
.eh-row .idx { grid-column: 1; text-align: right; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit } .eh-row:not(.loaded) .idx { color: var(--disabled) } /* an empty slot's number, name and affordance are solid grey in the plugin (measured #8C8C8C), not screened */
.eh-row .name { grid-column: 3; display: flex; align-items: baseline; gap: 4px; overflow: hidden; white-space: nowrap } .eh-row .name button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left }
.eh-row .name .off, .eh-row .name .add { color: var(--disabled) } .eh-row .name .add { margin-left: 6px; letter-spacing: .15px } /* "+ load plugin" runs 1.5 px wider in the plugin */
.eh-row .name .guest { font-weight: 400 } .eh-row.bypassed .name .guest, .eh-row.bypassed .idx { text-decoration: line-through; -webkit-mask-image: var(--p50); mask-image: var(--p50); -webkit-mask-size: 1px 1px; mask-size: 1px 1px }
.eh-row .lat { margin-left: auto; white-space: nowrap; color: var(--disabled) } .eh-row .lat .u { font-size: 7px }
.eh-row .in { grid-column: 5; justify-self: end } .eh-row .link { grid-column: 6; text-align: center } .eh-row .out { grid-column: 7; justify-self: end }
.eh-row:not(.loaded) .in, .eh-row:not(.loaded) .out, .eh-row:not(.loaded) .link { visibility: hidden } /* an empty slot has no trims to show */
/* Multi-tap endpoints (rows 1 and 8): the plugin prints them as "Pass-Thru" taps — index and name in ink, a dash for IN, the OUT trim live, an × and a square marker in the gutter left of the plate — while the slot itself stays empty. */
.eh-row .idx { grid-row: 1 } .eh-row.tap .idx, .eh-row.tap .name .off { color: var(--ink) }
.eh-row.tap .in, .eh-row.tap .out { visibility: visible } .eh-row.tap .in { justify-self: center } .eh-row.tap .in .eh-dv { display: none } .eh-row.tap .in::before { content: '-'; color: var(--disabled) }
.eh-row.tap::before { content: ''; grid-column: 1; grid-row: 1; width: 5px; height: 5px; margin: -3px 0 0 -12px; background: var(--ink) } .eh-row.tap:last-child::before { width: 2px; height: 2px; margin-left: -10px } /* the marker is 5 px on the first tap and 2 px on the last, as rendered */
.eh-row .del { grid-column: 9; font: inherit; font-size: 9.5px; background: none; border: 0; padding: 0; margin-top: -2px; cursor: pointer; text-align: center } /* the × is a size up and rides a touch high, centred at x 520 */ .eh-row .del[hidden] { display: none }
.eh-picker, .eh-pop { position: absolute; background: var(--paper); border: 1px solid var(--ink); border-radius: 8px; padding: 8px 10px; z-index: 3; min-width: 160px }
.eh-picker { display: flex; flex-direction: column; gap: 4px } .eh-picker [role=option] { font: inherit; background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer } .eh-picker [role=option]:hover { text-decoration: underline }
.eh-pop { max-height: 220px; overflow-y: auto; width: 260px } .eh-pop .title { font-weight: 700; margin-bottom: 6px } .eh-pop-row { display: flex; justify-content: space-between; align-items: baseline; height: 18px }

/* ---- Window layout (Task 9). Spec §3: the box is 720x339 INCLUDING its 1 px frame, so the frame is
   an outline, not a border, so the box stays exactly 720x339 — a border would measure 722x341 and every
   constant below (columns 176+368+176, band 36 + grid 269 + footer 34) would stop landing on the
   plugin's own coordinates. Everything inside is grid/flex; absolute is only the canvases, the freeze
   glyph, the section-label plates and the overlays (§5 layout discipline). ---- */
.eh-scale { width: 100%; max-width: 900px; margin: 0 auto; overflow: hidden; --eh-scale: 1 } /* centred; the window caps at the plugin's own 1.25x */ .eh-scale .eh { transform: scale(var(--eh-scale)) }

.eh-head { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 22px; border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 12px, var(--ink) 12px 13px, transparent 13px 14px, var(--ink) 14px 15px, transparent 15px 16px, var(--ink) 16px 17px, transparent 17px 18px, var(--ink) 18px 19px, transparent 19px 20px, var(--ink) 20px 21px, transparent 21px 22px, var(--ink) 22px 23px, transparent 23px 36px) }
.eh-box { display: inline-flex; align-items: center; box-sizing: border-box; background: var(--paper); border: 1px solid var(--ink); font-size: 8px }
.eh-box.brand { height: 28px; gap: 12px; padding: 0 6px 0 1px; margin-top: 2px } /* box at y 4–32, wordmark 3 px further from the fish */ .eh-box .fish { width: 28px; height: 18px; display: block; margin-top: 2px } /* the plugin blits the fish 1 px below the box's centre line */ /* one css px per glyph pixel, as the plugin blits it */ .eh-box .mark { height: 16px; width: 129px; display: block; transform: scaleY(1.0625); transform-origin: 0 0 } /* the plugin's wordmark inks 129 x 17; the SVG inks 16 tall, so it is stretched one row */
.eh-box.cluster { width: 231px; align-self: stretch; border-width: 0 1px; padding: 2px 5px 0 5px; justify-content: space-between } /* the plugin's right cluster is a full-height white bay in the stripes, ruled only at its sides */

.eh-grid { position: relative; height: 269px; display: grid; grid-template-columns: 176px 369px 175px; clip-path: inset(0 1px) } /* column rules at x 176 and 544 */ /* clips the full-window ground to the grid and keeps it off the 1 px frame */
.eh-ground { position: absolute; left: 0; top: -36px; width: 1440px; height: 678px; transform: scale(.5); transform-origin: 0 0; image-rendering: pixelated; pointer-events: none; filter: blur(.5px) } /* the plugin's dots are soft (a sky dot peaks at 162 with 241 shoulders, a dune cell 90 / 208 at 2x); half a layout px is a quarter css px after the scale, one device px sigma at 2x, and lands both within a few levels */ /* the plugin's ground is the whole 720x339 window (dunes and vignette are fractions of it) at one dot per px; ground.js sizes its grid at half a 480+ px canvas, so lay it out at 2x and scale it down to land 720x339 cells under the grid */
.eh-col { position: relative; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 0; min-width: 0; overflow: visible } /* every row is built to fit the 144 px the column gives it; nothing here is allowed to spill into the neighbour or off the window */
.eh-col.chain { padding: 14px 15px 0; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink) } /* the two column rules, at x 176 and x 543 */
.eh-label { position: absolute; top: 13.5px; left: 12px } .eh-col.chain .eh-label, .eh-col:last-child .eh-label { left: 11px } .eh-col:last-child { padding-left: 15px } /* the output column is 175 wide; its content stays at x 560 */
.eh-label .plate { background: var(--paper); border-radius: 4px; padding: 2px 4px; font-size: 7px; letter-spacing: 1.65px; text-transform: uppercase; display: inline-block }

.eh-knobrow { height: 64px; margin: 21px 0 4px; display: flex; align-items: center; justify-content: center; position: relative } /* knob centre at grid y 67, as the plugin's */
.eh-freeze { position: absolute; left: 106px; top: 20.5px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none !important; background: var(--paper); border-radius: 4px; padding: 0 } .eh-freeze svg { display: block; width: 18px; height: 18px } /* the glyph measures 17 x 15 px in the render */
.eh-freeze.on { background: var(--ink); color: var(--paper) }

.eh-plate { background: var(--paper); border-radius: 2.5px; /* the plugin's plate corners measure ~5 device px at 2x */ margin: 0 -5px; padding: 0 5px 1px; display: flex; flex-direction: column }
.eh-plate.rack { margin: 0; padding: 0; background: none; border-radius: 0 } /* the chain's white is the rows themselves, so the head can sit on the ground with only its own strip */
/* One plate per side column, divided by 1 px rules — the plugin draws a single card, not three floating
   ones. The global border-box keeps the rule inside each block's own 18/28/42 px, so the stack still
   measures 144 px and the SAT line still lands at y 255. The rack plate has a single child, so no rule. */
.eh-plate > * + * { border-top: 1px solid var(--ink) }
.eh-line { display: flex; align-items: center; gap: 6px; height: 28px; padding-top: 2px; white-space: nowrap; min-width: 0 } /* the plugin seats each row's text 1 px lower than a centred line box does (measured on every row) */
.eh-line.spread { justify-content: space-evenly } /* each handle centred in its half of the column, the rule between them */
.eh-line.short { height: 17px; padding-top: 3.5px } /* TIME / MIX: 17 px to the rule, text 1.5 px lower (rule at plate y 17, caps at y 6) */ .eh-line .k { font-weight: 700 } .eh-line .k.off { text-decoration: line-through } .eh-line .grow { flex: 1 1 auto; min-width: 0 }
.eh-line .eh-meter { flex: 1 1 auto; min-width: 0 } .eh-line:has(.eh-meter) > .eh-word { transform: translateY(.5px) } /* SAT / LIMIT sit half a px lower than the meter's centre line */ /* the meters are given 100 px and shrink to whatever the row leaves them */

.eh-chainhead { height: 20px; display: flex; justify-content: flex-end; align-items: flex-start } /* strip text centred at y 54.5 like the section labels; the rack plate starts at y 70 */
.eh-modes { white-space: pre; display: flex; align-items: flex-start; box-sizing: border-box; height: 18px; margin: -4.5px -15px 0 0; padding: 7px 17px 0 0; background: var(--paper); border-radius: 4px 0 0 4px } /* the bay starts 15 px right of the M; MODES: sits on its own small plate overlapping it (the ground shows between the two at the top and bottom rows) */ /* the strip is a white bay flush with the column's right rule, grid y 9.5–27.5, measured off the plugin */
.eh-modes .k { letter-spacing: 1.65px; font-size: 7px; margin: -3px 5px 0 -19px; padding: 2px 4px 2px 2px; background: var(--paper); border-radius: 4px } .eh-modes .eh-words { margin-top: 0 } /* the words ink from row 104 at 2x, level with the MODES: caps */ .eh-modes .eh-word.dim { letter-spacing: .18px } /* the screened words run a hair wider than the active one (JUCE's rounded advances) */ .eh-modes .eh-sep { width: 1px; height: 7.5px; margin: 0 10.5px 0 9px; background: var(--ink); transform: translate(1.5px, -.75px); -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 65%), rgb(0 0 0 / 90%)); mask-image: linear-gradient(to right, rgb(0 0 0 / 65%), rgb(0 0 0 / 90%)) } /* the plugin's mode bars are a hairline straddling two device px (83 / 30), 7 px tall, 1.75 px above the words' centre */ .eh-modes .eh-sep + * + .eh-sep { margin: 0 11px 0 6.5px } /* the second rule sits 1 px nearer SEQUENCE */ /* a hairline: one device pixel at 2x, as rendered */ .eh-modes .tap { font-size: 7px; font-weight: 700; margin-left: 4.5px; transform: translateY(.5px) } /* the plugin sets the tap count bold (2 px stems at 2x), a device px below the words */ .eh-modes .eh-word.on { box-shadow: inset 0 -.5px 0 color-mix(in srgb, var(--ink) 64%, var(--paper)), 0 .5px 0 color-mix(in srgb, var(--ink) 64%, var(--paper)) } /* the strip's underline sits one css px higher than the toggles' and is the same 64 % hairline (measured 125 / 59 over its two device rows) */
.eh-modes .eh-word.on:has(.cap) { box-shadow: none; transform: translateY(-1px) } .eh-modes .eh-word.on .cap, .eh-modes .eh-word.on .rest { display: inline-block; box-shadow: inset 0 -.5px 0 color-mix(in srgb, var(--ink) 64%, var(--paper)), 0 .5px 0 color-mix(in srgb, var(--ink) 64%, var(--paper)) } .eh-modes .eh-word.on .cap { transform: translateY(-1.5px) } /* the plugin raises the active word 1 px and its leading letters (M, SE) 1.5 px more, each run underlined at its own height; the letters are not enlarged (13 rows at 2x like the rest) */
/* The column header hangs 3.5 px into row 1 as the plugin draws it: the head's own box stays 7 px tall in the flow so row 1 still starts at y 77. */
.eh-col.chain .eh-rack-head { position: relative; z-index: 1; height: 7px; box-sizing: content-box; padding: 7.75px 4.5px 0 5.5px; margin: -3px -5px -5.25px; align-items: flex-start; background: linear-gradient(to right, transparent 158.5px, var(--paper) 158.5px) } /* the head still takes 7 px of flow (rows start at y 41); its white strip runs from LATENCY to the plate's right edge, y 31 down, and the ground shows to its left as in the plugin */
.eh-dice { align-self: flex-end; display: block; width: 11px; height: 11px; margin: -10px -11.5px 0 0 } /* the shuffle die sits on the rack plate's bottom-right corner */

.eh-foot { background: linear-gradient(to top, var(--ink) 0 2px, transparent 2px); height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-top: 1px solid var(--ink) }
.eh-q { font-weight: 700; font-size: 11px } /* TipMetrics::kHelpFontBump — the "?" is a control, not a label */
.eh-tip { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.eh-transport { display: inline-flex; gap: 16px; align-items: baseline; position: relative }
.eh-lock { display: inline-flex; flex-direction: column; align-items: flex-end; width: 7px; gap: 1px; margin: -3px 0 0 -2px } /* the padlock rides 1.5 px above the row's centre line */ /* MIX's open padlock as the plugin draws it: a solid 7x4 body, the shackle flush right with a 1 px gap */
.eh-lock::before { content: ''; box-sizing: border-box; width: 5.5px; height: 3px; border: 1px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0 }
.eh-lock::after { content: ''; width: 7px; height: 4px; background: var(--ink); border-radius: 1px }

.eh-note { display: none; font-size: 13px; color: var(--disabled); margin: 8px 0 0 }
@media (max-width: 719px) { .eh-note { display: block } }