/* ============================================================
   te-tokens.css — shared shell for the instrument suite
   Values measured from the reference images. See README.md.

   Usage:  <html data-skin="aluminum">   (or "black")
   ============================================================ */

:root{
  /* ---- accent ----
     Hard rule unchanged: this colour must stay under 2% of rendered surface.
     Measured on the TE references: TX-6 0.59%, K.O. II 1.54%.
     The hue is a deliberate departure from those references (they sit at
     10-20°); this is the suite's own mark at 67°.
     --accent-ink is what must sit ON the accent: at luminance 0.83 white
     gives 1.19:1 and is unreadable, near-black gives 14.45:1.            */
  --accent:        #DCF900;
  --accent-deep:   #B4CE00;
  --accent-ink:    #1B1B19;

  /* ---- the display window is identical in both colourways ---- */
  --win:           #0E0F0E;
  --win-hi:        #161715;
  --win-ink:       #F2F2EE;
  --win-dim:       #6E6F68;
  --win-edge:      #000;

  /* ---- geometry. one scale, applied everywhere ---- */
  --gutter:  calc(var(--u)*4);   /* device edge -> content, everywhere */
  --r-key:    3px;
  --r-tile:   0px;
  --r-body:  10px;
  --u:        4px;      /* base unit; everything is a multiple */

  --hair:     1px;

  /* ---- type ---- */
  --sans: "Helvetica Neue", Helvetica, Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Berkeley Mono", "BerkeleyMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-label:  10px;     /* legends. deliberately smaller than feels safe */
  --t-body:   12px;
  --t-value:  11px;
  --t-mark:   15px;
  --ls-label: .02em;
}

/* ---- aluminum (default) ---------------------------------- */
:root, [data-skin="aluminum"]{
  --page:      #F4F4F4;
  --body:      #B2B2B0;
  --body-hi:   #C4C4C2;
  --body-lo:   #9E9E9C;
  --tile:      #B8B8B6;
  --rule:      #9A9A98;
  --edge:      rgba(255,255,255,.42);

  --key:       #D6D6D4;
  --key-lo:    #C6C6C4;
  --key-edge:  #9A9A98;

  --ink:       #1A1A1A;
  --ink-2:     #56565A;
  --ink-3:     #7E7E80;

  --slot:      #8E8E8C;
  --slot-in:   #7A7A78;
  --bkey:      #35352F;
  --lamp-off:  #96969A;
  /* #DCF900 is 1.78:1 on this body and 1.22:1 on a key — invisible.
     Same hue (67°), dark enough to read: 3.19:1 and 4.66:1. */
  --accent:      #556100;
  --accent-deep: #3E4600;
  --accent-ink:  #F2F5E4;
}

/* ---- black ------------------------------------------------ */
[data-skin="black"]{
  --page:      #0A0A0A;
  --body:      #1E1E1E;
  --body-hi:   #2A2A2A;
  --body-lo:   #121212;
  --tile:      #242424;
  --rule:      #333333;
  --edge:      rgba(255,255,255,.06);

  --key:       #303030;
  --key-lo:    #282828;
  --key-edge:  #0E0E0E;

  --ink:       #E8E8E6;
  --ink-2:     #9A9A98;
  --ink-3:     #6E6E6C;

  --slot:      #0E0E0E;
  --slot-in:   #060606;
  --bkey:      #080808;
  --lamp-off:  #4A4A48;
  --accent:      #DCF900;
  --accent-deep: #B4CE00;
  --accent-ink:  #1B1B19;
}

/* ============================================================
   base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page)}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   device — the object
   ============================================================ */
.te-device{
  background:var(--body);
  border-radius:var(--r-body);
  overflow:hidden;
  /* matte. no glossy bevel — a single hairline top edge and a contact shadow */
  box-shadow:
    inset 0 var(--hair) 0 var(--edge),
    0 1px 2px rgba(0,0,0,.16),
    0 20px 44px -20px rgba(0,0,0,.34);
}

.te-brow{
  display:flex;align-items:center;gap:calc(var(--u)*4);
  padding:calc(var(--u)*4) calc(var(--u)*5);
  border-bottom:var(--hair) solid var(--rule);
}
.te-mark{
  font-size:var(--t-mark);font-weight:400;letter-spacing:.01em;
  /* product codes are the one place capitals are allowed */
}
.te-sub{
  font-family:var(--mono);font-size:9px;color:var(--ink-3);
  letter-spacing:.04em;margin-left:auto;text-align:right;line-height:1.5;
}

/* ============================================================
   grid — tiles butt together, hairlines between. no gaps.
   ============================================================ */
/* Dividers come from the grid gap showing the container colour through, not
   from per-tile borders keyed on :nth-child. The old rule assumed left-column
   tiles were always odd, which any full-width tile silently breaks — reordering
   one tile moved the vertical rule to the wrong column. This is
   order-independent and survives any arrangement. */
.te-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--hair);
  background:var(--rule);
  border-top:var(--hair) solid var(--rule);
}
@media (max-width:640px){ .te-grid{grid-template-columns:1fr} }

.te-tile{
  background:var(--body);
  padding:calc(var(--u)*4) calc(var(--u)*5) calc(var(--u)*5);
  border-radius:var(--r-tile);
}
.te-tile--full{grid-column:1 / -1}

.te-tile h2{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-label);font-weight:400;letter-spacing:.12em;
  color:var(--ink-2);margin-bottom:calc(var(--u)*3.5);
}
/* the honesty legend — quiet as a channel number */
.te-tile h2 em{font-style:normal;color:var(--ink-3);letter-spacing:.02em}

/* ============================================================
   labels and values
   ============================================================ */
.te-ctl{margin-bottom:calc(var(--u)*3.25)}
.te-ctl:last-child{margin-bottom:0}
.te-ctl-l{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u)*2.5);margin-bottom:var(--u)}
.te-ctl-l span{font-size:11px;color:var(--ink)}
.te-ctl-l b{
  font-family:var(--mono);font-size:var(--t-value);font-weight:400;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.te-note{font-size:9.5px;line-height:1.65;color:var(--ink-3);margin-top:calc(var(--u)*2)}

/* ============================================================
   fader — a recessed slot, not a raised bevel
   ============================================================ */
input[type=range].te-fader{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:transparent;display:block;cursor:pointer;
}
input[type=range].te-fader::-webkit-slider-runnable-track{
  height:5px;border-radius:2px;
  background:var(--slot);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
input[type=range].te-fader::-moz-range-track{
  height:5px;border-radius:2px;background:var(--slot);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
input[type=range].te-fader::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px;height:21px;margin-top:-8px;border-radius:2px;
  background:var(--key);border:var(--hair) solid var(--key-edge);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
input[type=range].te-fader::-moz-range-thumb{
  width:13px;height:21px;border-radius:2px;
  background:var(--key);border:var(--hair) solid var(--key-edge);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
input[type=range].te-fader:focus-visible::-webkit-slider-thumb{border-color:var(--accent)}
input[type=range].te-fader:focus-visible::-moz-range-thumb{border-color:var(--accent)}

/* dotted tick scale, as on the TX-6 channel strips */
.te-ticks{
  height:5px;margin-top:3px;
  /* dots must clear the body colour. #7E7E80 at 50% on #B2B2B0 is invisible —
     full opacity and a 1.8px dot is the minimum that reads. */
  background-image:radial-gradient(circle, var(--ink-3) .9px, transparent 1px);
  background-size:calc(100%/12) 5px;background-repeat:repeat-x;
  background-position:center;
}

/* ============================================================
   keys — flat, minimal gradient, small radius
   ============================================================ */
.te-key{
  font-family:var(--sans);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--ink);
  background:var(--key);
  border:var(--hair) solid var(--key-edge);
  border-radius:var(--r-key);
  padding:calc(var(--u)*2.25) calc(var(--u)*3);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);
  box-shadow:0 1px 1px rgba(0,0,0,.16);
  transition:background .1s, box-shadow .1s, transform .04s;
}
.te-key:hover{background:var(--body-hi)}
.te-key:active,.te-key.is-down{
  background:var(--key-lo);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.32);
  transform:translateY(.5px);
}
.te-key:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.te-key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.te-key--wide{width:100%}
.te-key--round{border-radius:50%;width:38px;height:38px;padding:0}

/* the one place a large orange fill is allowed */
.te-key--record.is-armed{
  background:var(--accent);border-color:var(--accent-deep);color:var(--accent-ink);
}

.te-row{display:flex;gap:calc(var(--u)*2)}
.te-row > *{flex:1}

/* ============================================================
   lamp — state, in accent
   ============================================================ */
.te-lamp{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--lamp-off);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.3);
  transition:background .5s ease, box-shadow .5s ease;
}
.te-lamp.is-on{
  background:var(--accent);
  box-shadow:0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:none;
}

/* ============================================================
   switch — two-position, recessed when engaged
   ============================================================ */
.te-switch{display:flex;border:var(--hair) solid var(--key-edge);border-radius:var(--r-key);overflow:hidden}
.te-switch button{
  flex:1;font-family:var(--sans);font-size:var(--t-label);letter-spacing:var(--ls-label);
  padding:calc(var(--u)*1.75) var(--u);cursor:pointer;border:0;
  border-right:var(--hair) solid var(--key-edge);
  background:var(--key);color:var(--ink-2);
}
.te-switch button:last-child{border-right:0}
.te-switch button[aria-pressed="true"]{
  background:var(--slot);color:var(--win-ink);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}
.te-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* ============================================================
   select — recessed field
   ============================================================ */
select.te-select{
  width:100%;font-family:var(--sans);font-size:11px;color:var(--ink);
  background:var(--key);border:var(--hair) solid var(--key-edge);
  border-radius:var(--r-key);padding:calc(var(--u)*1.5) calc(var(--u)*2);cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
}
select.te-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================
   knob — circle with a single pointer. rotation via --angle.
   set el.style.setProperty('--angle', deg + 'deg') from JS.
   ============================================================ */
.te-knob{
  --angle:0deg;
  width:46px;height:46px;border-radius:50%;position:relative;
  background:var(--key);
  border:var(--hair) solid var(--key-edge);
  box-shadow:0 1px 2px rgba(0,0,0,.24), inset 0 1px 0 var(--edge);
  cursor:ns-resize;flex:none;touch-action:none;
}
.te-knob::after{             /* the pointer notch — accent, tiny */
  content:"";position:absolute;
  left:50%;top:5px;width:2px;height:11px;margin-left:-1px;
  background:var(--accent);border-radius:1px;
  transform-origin:50% 18px;
  transform:rotate(var(--angle));
}
.te-knob:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   display — a dark tile in the grid, never a floating panel
   ============================================================ */
.te-win{
  background:var(--win);
  border:var(--hair) solid var(--win-edge);
  border-radius:2px;
  box-shadow:inset 0 1px 6px rgba(0,0,0,.6);
  padding:calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*4);
  font-family:var(--mono);color:var(--win-ink);
}
.te-win-top{display:flex;align-items:flex-end;gap:calc(var(--u)*5)}
.te-big{font-size:44px;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.te-big.is-idle{color:var(--win-dim)}
.te-pairs{display:flex;flex-direction:column;gap:5px;margin-left:auto;text-align:right}
.te-pairs div{display:flex;gap:calc(var(--u)*2.5);justify-content:flex-end;align-items:baseline}
.te-pairs span{font-size:9px;letter-spacing:.12em;color:var(--win-dim)}
.te-pairs b{font-weight:400;font-size:13px;font-variant-numeric:tabular-nums;min-width:8ch;text-align:right}
.te-win-foot{
  display:flex;flex-wrap:wrap;gap:5px calc(var(--u)*5);align-items:center;
  margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*3);
  border-top:var(--hair) solid #2A2B27;
  font-size:9px;letter-spacing:.10em;color:var(--win-dim);
}
.te-win-foot b{font-weight:400;color:var(--win-ink);font-variant-numeric:tabular-nums;letter-spacing:0}
.te-win-foot .te-right{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*2)}

/* scope — live waveform inside a display tile.
   SVG deliberately, not canvas: no backing store, no devicePixelRatio, nothing
   that can re-multiply its own dimensions. Resolution-independent by default. */
.te-scope{display:block;width:100%;height:62px;overflow:visible}
.te-scope .trace{
  fill:none;stroke:var(--win-ink);stroke-width:1.25;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
.te-scope .axis{
  stroke:var(--win-dim);stroke-width:1;opacity:.3;
  vector-effect:non-scaling-stroke;stroke-dasharray:2 5;
}
.te-scope .peak{stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.85}

/* meter bars, for display tiles that need a level rather than a number */
.te-meter{display:flex;gap:2px;align-items:flex-end;height:22px}
.te-meter i{width:4px;background:var(--win-dim);border-radius:.5px}
.te-meter i.is-hot{background:var(--accent)}

/* ============================================================
   keyboard — OP-1 geometry: white pill keys, black circles above
   ============================================================ */
.te-keyboard{
  position:relative;display:flex;gap:2px;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.te-wkey{
  flex:1;min-width:0;height:62px;position:relative;
  background:var(--key);border:var(--hair) solid var(--key-edge);
  border-radius:2px 2px var(--r-key) var(--r-key);
  cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
  font-family:var(--sans);font-size:8px;color:var(--ink-3);letter-spacing:.02em;
}
.te-wkey.is-down{background:var(--body-lo);box-shadow:inset 0 2px 5px rgba(0,0,0,.26);color:transparent}
.te-wkey.is-down::after{
  content:"";position:absolute;bottom:6px;left:50%;margin-left:-2.5px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.te-bkey{
  position:absolute;top:9px;width:20px;height:20px;margin-left:-10px;z-index:2;
  border-radius:50%;background:var(--bkey);border:var(--hair) solid rgba(0,0,0,.5);
  cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.34);
}
.te-bkey.is-down{background:var(--accent);border-color:var(--accent-deep)}
.te-wkey:focus-visible,.te-bkey:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================
   colourway toggle — TE ships every device in two finishes
   ============================================================ */
.te-skin{display:flex;border:var(--hair) solid var(--key-edge);border-radius:var(--r-key);overflow:hidden;flex:none}
.te-skin button{
  font-family:var(--sans);font-size:9px;letter-spacing:var(--ls-label);
  padding:6px 9px;cursor:pointer;
  border:0;border-right:var(--hair) solid var(--key-edge);
  background:var(--key);color:var(--ink-3);
}
.te-skin button:last-child{border-right:0}
.te-skin button[aria-pressed="true"]{background:var(--slot);color:var(--win-ink)}
.te-skin button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* ============================================================
   keys strip
   ============================================================ */
.te-keys{
  display:flex;flex-wrap:wrap;gap:6px calc(var(--u)*5);
  padding:calc(var(--u)*3) var(--gutter);
  border-top:var(--hair) solid var(--rule);
  font-size:9.5px;color:var(--ink-3);
}
.te-keys b{font-family:var(--mono);font-weight:400;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}


/* ============================================================
   RACK — a central instrument at its natural width, with auxiliary
   modules docked into the negative space either side. The device keeps
   its identity; the rails are separate panels that can be folded away.
   ============================================================ */
.te-rack{
  height:100dvh;
  padding:calc(var(--u)*4);
  display:flex;gap:calc(var(--u)*4);
  align-items:stretch;justify-content:center;
}

/* ---- the instrument ---- */
.te-rack > .te-device{
  flex:0 1 940px;min-width:0;min-height:0;
  display:flex;flex-direction:column;
}
.te-rack .te-brow{flex:0 0 auto;padding:calc(var(--u)*2.5) var(--gutter)}
.te-rack .screen{flex:1 1 auto;min-height:130px;display:flex;padding:var(--gutter)}
.te-rack .te-win{flex:1;display:flex;flex-direction:column;min-height:0}
.te-rack .te-scope{flex:1 1 auto;min-height:40px;height:auto}
/* The .te-mod padding rule was lost when the rack block was rewritten. Rails
   were unaffected because .te-panel carries its own, but the core modules sat
   flush against the device edge — 0px inset against the display's 12px. */
.te-rack .te-core{
  flex:0 0 auto;
  border-top:var(--hair) solid var(--rule);
  padding:calc(var(--u)*2.5) var(--gutter) calc(var(--u)*3.5);
}
.te-rack .te-keyboard{flex:0 0 auto}

/* ---- rails ---- */
.te-rail{
  flex:0 0 248px;min-width:0;
  display:flex;flex-direction:column;gap:calc(var(--u)*3);
  min-height:0;overflow-y:auto;overflow-x:hidden;
  transition:flex-basis .18s ease;
}
.te-rail::-webkit-scrollbar{width:5px}
.te-rail::-webkit-scrollbar-thumb{background:var(--rule)}
.te-rail.is-folded{flex-basis:38px}

.te-panel{
  background:var(--body);
  border-radius:var(--r-body);
  padding:calc(var(--u)*3) calc(var(--u)*3.5) calc(var(--u)*3.5);
  box-shadow:inset 0 var(--hair) 0 var(--edge), 0 1px 2px rgba(0,0,0,.14);
  flex:0 0 auto;min-width:0;
}
.te-rail.is-folded .te-panel{padding:calc(var(--u)*3) 0;display:flex;justify-content:center}
.te-rail.is-folded .te-mod-b{display:none}
.te-rail.is-folded .te-mod-h{
  writing-mode:vertical-rl;transform:rotate(180deg);
  margin:0;gap:calc(var(--u)*2);justify-content:flex-start;
}
.te-rail.is-folded .te-mod-h em{display:none}

.te-fold{
  flex:0 0 auto;align-self:flex-end;
  width:26px;height:22px;line-height:1;
  font-family:var(--sans);font-size:12px;color:var(--ink-3);
  background:var(--body);border:var(--hair) solid var(--rule);border-radius:var(--r-key);
  cursor:pointer;
}
#railL .te-fold{align-self:flex-start}
.te-rail.is-folded .te-fold{align-self:center}
.te-fold:hover{color:var(--ink);background:var(--body)}
.te-fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- module header / body ---- */
.te-mod-h{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  cursor:pointer;user-select:none;
  font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-2);
  margin-bottom:calc(var(--u)*2.5);
}
.te-mod-h .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-mod-h em{font-style:normal;color:var(--ink-3);letter-spacing:.02em;margin-left:auto;white-space:nowrap}
.te-mod-h .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--accent);opacity:.9}
.te-mod.is-closed .te-mod-h{margin-bottom:0}
.te-mod.is-closed .te-mod-h .dot{background:var(--ink-3);opacity:.45}
.te-mod.is-closed .te-mod-b{display:none}
.te-mod-h:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- draggable numeric field ---- */
.te-params{display:grid;gap:calc(var(--u)*2.5) calc(var(--u)*3)}
.te-params.c1{grid-template-columns:1fr}
.te-params.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.te-params.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.te-params.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.te-params.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:820px){ .te-params.c4,.te-params.c5{grid-template-columns:repeat(2,minmax(0,1fr))} }
.te-num{display:flex;flex-direction:column;gap:1px;min-width:0;cursor:ns-resize;touch-action:none;user-select:none}
/* Position track. The drag-number bought the space the rack needed, but it
   threw away the three things a slider gives for free: where the value sits in
   its range at a glance, click-anywhere-to-jump, and a sweep gesture. This
   returns all three for 8px of height. */
.te-num > i{
  display:block;height:3px;margin-top:5px;border-radius:2px;
  background:var(--slot);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  position:relative;cursor:ew-resize;
}
.te-num > i::after{
  content:"";position:absolute;left:0;top:0;bottom:0;border-radius:2px;
  width:calc(var(--fill,0) * 100%);
  background:var(--ink-3);
}
/* accent only on the control being moved, so 16 tracks cost nothing */
.te-num.is-live > i::after{background:var(--accent)}
.te-num > span{font-size:9px;color:var(--ink-3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.te-num > b{font-family:var(--mono);font-size:15px;font-weight:400;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-num.is-live > span{color:var(--accent)}
.te-num:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Below this the rails cannot hold a panel and the margins no longer exist:
   everything stacks into one scrolling column. */
@media (max-width:1180px), (max-height:600px){
  .te-rack{height:auto;flex-direction:column;align-items:center;padding:calc(var(--u)*4) calc(var(--u)*2)}
  .te-rack > .te-device{flex:0 0 auto;width:100%;max-width:940px;display:block}
  .te-rack .screen{display:block}
  .te-rack .te-win{display:block}
  .te-rack .te-scope{height:62px}
  .te-rail{flex:0 0 auto;width:100%;max-width:940px;overflow:visible;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .te-rail.is-folded{flex-basis:auto}
  .te-rail.is-folded .te-panel{padding:calc(var(--u)*3) calc(var(--u)*3.5);display:block}
  .te-rail.is-folded .te-mod-h{writing-mode:horizontal-tb;transform:none;margin-bottom:calc(var(--u)*2.5)}
  .te-fold{display:none}
}
@media (max-width:660px){ .te-rail{grid-template-columns:1fr} }

/* The brow was 426px of content inside a 374px device. overflow:hidden made it
   look fine until the browser scrolled the clicked power button into view and
   dragged every child 52px left. Let it wrap instead of overflow. */
@media (max-width:820px){
  .te-rack .te-brow{flex-wrap:wrap;gap:calc(var(--u)*2.5)}
  .te-rack .te-sub{order:9;width:100%;margin-left:0;text-align:left}
  .te-rack .te-maker{padding-right:calc(var(--u)*2.5)}
}


/* ============================================================
   SHEET — an overlay for content that must not occupy layout.
   A plain hidden/shown block below a 100dvh rack renders off-screen:
   it "opens" into space the page does not scroll to.
   ============================================================ */
.te-sheet{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--u)*6);
  background:color-mix(in srgb, var(--page) 82%, transparent);
}
.te-sheet[hidden]{display:none}
.te-sheet-inner{
  position:relative;
  background:var(--body);
  border-radius:var(--r-body);
  box-shadow:inset 0 var(--hair) 0 var(--edge), 0 24px 64px -24px rgba(0,0,0,.65);
  max-width:760px;max-height:82dvh;overflow-y:auto;
  padding:calc(var(--u)*6) calc(var(--u)*7);
}
.te-sheet-inner::-webkit-scrollbar{width:6px}
.te-sheet-inner::-webkit-scrollbar-thumb{background:var(--rule)}
.te-sheet-close{
  position:absolute;top:calc(var(--u)*3);right:calc(var(--u)*3);
  width:26px;height:26px;line-height:1;
  background:transparent;border:var(--hair) solid var(--rule);border-radius:var(--r-key);
  color:var(--ink-3);font-family:var(--sans);font-size:13px;cursor:pointer;
}
.te-sheet-close:hover{color:var(--ink);background:var(--body-hi)}
.te-sheet-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}