/* =====================================================================
   Dunia Anura — the equipment studio.

   The three calculators used to be a form with a sidebar. They are now one
   instrument: a light studio card spanning the page's measure, with the tool
   rail, the input slip, the readout and the note docked over it — and the
   answer drawn on paper inside it, at true scale, following what you type.

   Two grounds, marked by the corner radius, the same move css/detail.css
   documents in its own header:
     STUDIO  18px shell, 12px slips, hairlines, tabular figures
     SHOP    28px cards and 999px pills, in the bands below
   That is the one deliberate departure from ds/styles.css, and it is stated
   here rather than scattered.

   This file loads after css/site.css, so at equal specificity it wins. If you
   reach for !important, an inline style attribute was left behind in
   site-src/pages/equipment.html or in the string literals of
   js/pages/equipment.js — take it out instead.
   ===================================================================== */

body[data-page="equipment"] {
  /* the identical expression to --dsr-w in css/detail.css, so this page and
     the species pages share one left edge on the same monitor */
  --eqs-w:    min(1400px, calc(100vw - clamp(20px, 7vw, 100px) * 2));
  --eqs-gap:  clamp(16px, 1.7vw, 24px);
  --eqs-band: clamp(56px, 5.2vw, 84px);
  --eqs-end:  clamp(84px, 9vh, 120px);
  --eqs-col:  clamp(228px, 18vw, 268px);
  --eqs-rule: var(--color-neutral-400);
  --eqs-hair: var(--color-divider);
  --eqs-slip-r: 12px;
  --eqs-h: clamp(440px, calc(100svh - 300px), 680px);
}

.eqs { width: var(--eqs-w); margin-inline: auto; }
.eqs * { box-sizing: border-box; }
.eqs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------- the head */
.eqs-top { padding: 150px 0 0; }
.eqs-crumb { display: flex; gap: 8px; align-items: center; font-size: var(--fs-read); color: var(--color-neutral-600); margin-bottom: 22px; }
.eqs-crumb span:last-child { color: var(--color-text); font-weight: 600; }
.eqs-ledger { display: grid; grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto; align-items: baseline; column-gap: 14px; }
.eqs-ledger h1 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.015em; }
.eqs-leader { height: 0; font-size: 28px; align-self: baseline; border-bottom: 1.5px dotted color-mix(in srgb, var(--color-text) 26%, transparent); transform: translateY(-.3em); }
.eqs-run { font: 600 var(--fs-read)/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); white-space: nowrap; }
.eqs-lede { margin: 16px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.7; color: var(--color-neutral-700); }

/* ----------------------------------------------------------- the studio */
.eqs-stick { margin-top: 26px; }
.eqs-studio {
  position: relative; height: var(--eqs-h);
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 8%, #ffffff 0%, var(--color-bg) 42%, var(--color-surface) 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--color-divider);
  /* layout+paint walls off #rfRows' per-keystroke innerHTML churn. NOT `size`:
     the height is a clamp today, but `size` would collapse the box to 0 the
     day someone makes it auto, with no error anywhere. */
  contain: layout paint;
}
.eqs-stage { position: absolute; inset: 0; }
/* The drawing is inset by whatever the dock has reserved, so a slip never
   stands on the tank. preserveAspectRatio="xMidYMid meet" then fits the whole
   scene into whatever box is left, at any width. Below 1015 the slips have
   moved out of the dock entirely and the drawing takes the full card. */
.eqs-stage__gl, .eqs-stage__flat { position: absolute; inset: 0; }
@media (min-width: 1015px) {
  .eqs-stage__gl, .eqs-stage__flat { left: calc(var(--eqs-col) + 26px); top: 58px; bottom: 34px; }
}
@media (min-width: 1181px) {
  .eqs-stage__gl, .eqs-stage__flat { right: calc(var(--eqs-col) + 26px); }
}
.eqs-stage__gl { opacity: 0; transition: opacity .4s ease; }
/* the phone/tablet opt-in pill (js/equipment-studio-gl.js appends it below 1015px) */
.eqs-3d { position: absolute; right: 12px; bottom: 84px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--eqs-hair); border-radius: 999px; background: var(--color-bg); color: var(--color-accent-800); font: 700 var(--fs-read) var(--font-body); box-shadow: var(--shadow-sm); cursor: pointer; }
.eqs-3d svg { width: 16px; height: 16px; color: var(--color-accent-700); }
.eqs-3d:disabled { opacity: .7; cursor: default; }
.eqs-3d[hidden] { display: none; }   /* display lives on the class, so `hidden` needs this to win */
.eqs-3d.is-busy svg { animation: spin 1.1s linear infinite; }
@media (min-width: 1015px) { .eqs-3d { display: none; } }
.eqs-stage__gl canvas { display: block; width: 100%; height: 100%; }
.eqs-studio.is-gl .eqs-stage__gl { opacity: 1; }
.eqs-studio.is-gl .eqs-stage__flat { visibility: hidden; }
.eqs-stage__flat svg { display: block; width: 100%; height: 100%; }
.eqs-stage__labels { position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 1015px) { .eqs-stage__labels { left: calc(var(--eqs-col) + 26px); top: 58px; bottom: 34px; } }
@media (min-width: 1181px) { .eqs-stage__labels { right: calc(var(--eqs-col) + 26px); } }
.eqs-stage__labels span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font: 700 var(--fs-min)/1 var(--font-body); letter-spacing: .06em;
  color: var(--color-accent-800); background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  padding: 4px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums lining-nums;
}
.eqs-stage__labels span.dim { color: var(--color-neutral-700); }

/* ------------------------------------------------------------- the dock */
.eqs-dock {
  position: absolute; inset: 0; padding: 16px; gap: 14px; pointer-events: none;
  display: grid;
  /* auto, not a fixed track: a fixed one leaves a dead column between 1015
     and 1180 where the readout has already moved out but the inputs have not */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.eqs-dock > * { pointer-events: auto; }
.eqs-rail   { grid-area: 1/1/2/4; justify-self: start; max-width: 100%; min-width: 0; }
.eqs-view   { grid-area: 1/3/2/4; justify-self: end; align-self: start; display: flex; gap: 8px; }
/* stretch, not start: the slip inside caps itself with max-height:100%, and a
   percentage height needs a definite parent height to resolve against. Stretched
   to the row track it can finally scroll; content-sized it just spilled past the
   bottom of the studio and the last parameter card was cut off unreachably. */
.eqs-inputs { grid-area: 2/1/3/2; align-self: stretch; width: var(--eqs-col); min-height: 0; }
.eqs-read   { grid-area: 2/3/3/4; align-self: start; width: var(--eqs-col); }
/* r3c3 is empty and the note is inset, because #daChatBtn is 96x116 fixed at
   z-index 180 in that corner and no grid rule can dodge it */
.eqs-note   { grid-area: 3/2/4/3; align-self: end; margin: 0; padding-inline-end: 118px;
              font-size: var(--fs-read); line-height: 1.5; color: var(--color-neutral-600);
              max-width: 62ch; }

.eqs-rail #toolMenu { display: flex; gap: 6px; flex-wrap: wrap; }
.eqs-tab {
  border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: var(--fs-read); font-weight: 700; letter-spacing: .02em;
  padding: 9px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  color: var(--color-accent-800);
  box-shadow: inset 0 0 0 1px var(--eqs-hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s ease, color .2s ease;
}
.eqs-tab:hover { background: var(--color-bg); }
.eqs-tab[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); box-shadow: none; }

.eqs-icon {
  border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: var(--fs-read); font-weight: 700; letter-spacing: .04em;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  color: var(--color-neutral-700); box-shadow: inset 0 0 0 1px var(--eqs-hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.eqs-icon:hover { color: var(--color-text); background: var(--color-bg); }
/* icon + label inside every studio button: the label reads on a desktop, the
   icon alone on a phone/tablet where the buttons sit over the drawing */
.eqs-icon svg { width: 18px; height: 18px; display: none; }
.eqs-icon .g { font-size: 12px; font-weight: 800; letter-spacing: 0; }
.eqs-turn--2d { display: none; }
@media (max-width: 1014px) {
  .eqs-view { gap: 6px; }
  .eqs-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .eqs-icon svg { display: block; }
  .eqs-icon .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .eqs-turn--2d { display: inline-flex; }
  .eqs-icon[hidden] { display: none; }
}

/* ---- the slips */
.eqs-slip {
  display: none; flex-direction: column; gap: 12px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--eqs-hair);
  border-radius: var(--eqs-slip-r); padding: 16px;
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
body[data-tool="vol"] #eqIn-vol,
body[data-tool="rf"]  #eqIn-rf,
body[data-tool="re"]  #eqIn-re { display: flex; }

.eqs-cap { font: 700 var(--fs-read)/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--color-neutral-600); }
.eqs-hair { border: 0; border-top: 1px solid var(--eqs-hair); margin: 2px 0; }

.eqs-units, .eqs-shapes { display: flex; gap: 6px; flex-wrap: wrap; }
.eqs-pill {
  border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: var(--fs-read); font-weight: 700; padding: 8px 13px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-accent-800);
  box-shadow: inset 0 0 0 1px var(--eqs-hair);
  transition: background-color .18s ease, color .18s ease;
}
.eqs-pill:hover { background: var(--color-accent-100); }
.eqs-pill[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); box-shadow: none; }
.eqs-pill--unit { padding: 8px 12px; min-width: 42px; }

.eqs-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
/* min-width:0 is load-bearing, not tidiness. These are flex items of
   .eqs-rfcard .p, and a flex item's automatic minimum size is its min-content
   width — here ~220px, because an <input>'s intrinsic width is 171px. Two of
   them then demand 448px in a column that is 203px in the dock and 275px on a
   390px phone, and the "Target" field is pushed off the side with no way to
   scroll to it: the Foundation calculator cannot be completed. */
.eqs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.eqs-lab { font: 700 var(--fs-read)/1 var(--font-body); letter-spacing: .06em; color: var(--color-neutral-600); }
.eqs-box { display: flex; align-items: center; gap: 6px; background: var(--color-surface); border-radius: var(--radius-sm); padding: 0 10px; box-shadow: inset 0 0 0 1px var(--eqs-hair); }
.eqs-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 9px 0; font: 600 15px/1 var(--font-body); color: var(--color-text); font-variant-numeric: tabular-nums lining-nums; }
.eqs-box i { font: 700 var(--fs-min)/1 var(--font-body); font-style: normal; color: var(--color-neutral-500); }
.eqs-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.eqs-rf { display: flex; flex-direction: column; gap: 10px; }
.eqs-rfcard { display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); border-radius: 10px; padding: 11px 12px; }
.eqs-rfcard > .h { display: flex; align-items: center; gap: 8px; }
.eqs-rfcard .k { width: 22px; height: 22px; flex: none; border-radius: 50%; color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--fs-min); }
.eqs-rfcard .n { font: 700 var(--fs-read)/1.2 var(--font-body); }
.eqs-rfcard .p { display: flex; gap: 8px; }
.eqs-rfcard .d { font-size: var(--fs-read); line-height: 1.45; color: var(--color-accent-800); background: var(--color-accent-100); border-radius: 8px; padding: 7px 10px; }
.eqs-rfcard .d strong { font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.eqs-stock { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- the readout */
.eqs-readslip {
  display: none; flex-direction: column; gap: 10px;
  background: var(--color-accent-100); border-radius: var(--eqs-slip-r);
  box-shadow: var(--shadow-md), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
  padding: 16px 18px;
}
body[data-tool="vol"] #eqRead-vol,
body[data-tool="rf"]  #eqRead-rf,
body[data-tool="re"]  #eqRead-re { display: flex; }
.eqs-big { margin: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.eqs-big span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 3vw, 50px); line-height: 1; color: var(--color-accent-800); font-variant-numeric: tabular-nums lining-nums; }
.eqs-big i { font: 700 var(--fs-read)/1 var(--font-body); font-style: normal; color: var(--color-accent-700); }
.eqs-rows { margin: 0; display: flex; flex-direction: column; }
.eqs-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent); font-size: var(--fs-read); }
.eqs-rows > div:last-child { border-bottom: 0; }
.eqs-rows dt { color: var(--color-accent-700); }
.eqs-rows dd { margin: 0; text-align: right; font-weight: 700; color: var(--color-accent-800); font-variant-numeric: tabular-nums lining-nums; }
.eqs-rows dd .sub { display: block; font-weight: 500; font-size: var(--fs-read); opacity: .8; }
.eqs-rows .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.eqs-wait, .eqs-foot { margin: 0; font-size: var(--fs-read); line-height: 1.55; color: var(--color-accent-700); }
.eqs-foot { opacity: .8; font-size: var(--fs-read); }

/* the bar the readout moves into below 1181 */
.eqs-bar { display: none; margin-top: 14px; }
.eqs-bar .eqs-readslip { border-radius: var(--eqs-slip-r); }

/* ------------------------------------------------------------ the bands */
.eqs-band { margin-top: var(--eqs-band); }
.eqs-last { padding-bottom: var(--eqs-end); }
.eqs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 20px; padding-bottom: 10px; margin-bottom: 26px; border-bottom: 1.5px solid var(--eqs-rule); }
.eqs-head .l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.eqs-head .n { font: 700 var(--fs-min)/1 var(--font-body); letter-spacing: .14em; color: var(--color-accent-700); }
.eqs-head .t { font: 700 var(--fs-read)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-text); }
.eqs-head .r { font: 600 var(--fs-read)/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }

.eqs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--eqs-gap); }
.eqs-cards .card { gap: 8px; }
.eqs-chip { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 13px; color: var(--color-bg); background: var(--color-accent); }
.eqs-chip--a { background: var(--color-accent); }
.eqs-chip--b { background: var(--color-accent-2-600); }
.eqs-chip--c { background: var(--color-accent-700); }
.eqs-chip--ca { background: var(--color-accent); }
.eqs-chip--kh { background: var(--color-accent-2-600); }
.eqs-chip--mg { background: var(--color-accent-700); }
.eqs-formula { margin: 18px 0 0; font-size: var(--fs-read); color: var(--color-neutral-500); line-height: 1.6; }

.eqs-faq { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.eqs-faq details { background: var(--color-surface); border-radius: var(--radius-lg); padding: 16px 22px; }
.eqs-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.eqs-faq summary::-webkit-details-marker { display: none; }
.eqs-faq summary:before { content: "+"; color: var(--color-accent-700); font-size: 15px; line-height: 1; }
.eqs-faq details[open] summary:before { content: "\2212"; }
.eqs-faq p { margin: 10px 0 0; font-size: var(--fs-read); line-height: 1.65; color: var(--color-neutral-600); }

.eqs-kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--eqs-gap); }
.eqs-kitmore { margin: 18px 0 0; font-size: var(--fs-read); font-weight: 700; }

/* the studio's own out-of-dock slot for the inputs, below 1015 */
.eqs-out { display: none; margin-top: 14px; }
.eqs-out .eqs-slip {
  background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--eqs-hair); max-height: none; overflow: visible;
  -webkit-mask-image: none; mask-image: none; padding: 18px;
}
.eqs-out .eqs-dims { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.eqs-out .eqs-rf { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --------------------------------------------------------- breakpoints */
@media (max-width: 1180px) {
  body[data-page="equipment"] { --eqs-h: clamp(380px, calc(100svh - 400px), 540px); }
  .eqs-bar { display: block; }
  .eqs-bar .eqs-readslip { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  /* #eqRead is MOVED into the bar here (equipment-studio.js reflow), so it has
     to stop being a dock column and take the page measure — the same handover
     .eqs-inputs makes at 1014. */
  .eqs-read { width: auto; }
  .eqs-note { padding-inline-end: 0; }
}
@media (max-width: 1014px) {
  .eqs-note { grid-area: 3/1/4/4; padding-inline-end: 0; }
  body[data-page="equipment"] { --eqs-h: clamp(320px, 44svh, 420px); }
  .eqs-studio { position: sticky; top: 88px; z-index: 2; }
  .eqs-inputs { position: static; width: auto; }
  /* the inputs leave the dock and take the full measure below the studio */
  .eqs-dock { grid-template-rows: auto minmax(0, 1fr) auto; }
  .eqs-dock .eqs-inputs { display: none; }
  .eqs-out { display: block; }
  .eqs-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .eqs-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .eqs-top { padding-top: 120px; }
  /* 360 minimum, not 300: the drawing box below is the card minus the strip
     (92) and the note (76), and at 300 a 390x667 phone was left 132px — the
     whole reef at k=0.21. At 360 it keeps k=0.3; a 390x844 phone is 388. */
  body[data-page="equipment"] { --eqs-h: clamp(360px, 46svh, 400px); }
  .eqs-ledger { grid-template-columns: minmax(0, 1fr); }
  .eqs-leader, .eqs-run { display: none; }
  /* Static on a phone, whatever its height. Stuck at 88px the 380px studio
     sat exactly over the input slip (390x844: studio 88..468, #eqIn-vol
     88..460 — every pill and field under the drawing, the focused Width
     input at 343..379 answered elementFromPoint with a node of #eqStudio),
     and an iOS keyboard leaves ~76px below it. The (max-height:780px) rule
     below already did this for short phones; this is the same behaviour for
     the tall ones. Tablets 641-1014 keep the sticky drawing. The absolute
     stage and dock keep their containing block through `contain: layout`. */
  .eqs-studio { position: static; }
  .eqs-dock { padding: 10px; }
  /* The tool rail and the note float over the full drawing below 1015
     (nothing reserves them a row), so the drawing starts under the strip and
     ends under the note. Reserve both. Strip: two rows of 37px pills (10px
     vertical padding = a 37px thumb target; 39px before the web font lands)
     inside 10px dock padding: 10 + 39 + 3 + 39 = 91. Note: 10 + three lines
     of 14px/1.5 = 73 — the Reef Foundation note runs three lines at 390 and
     the merged dose labels sit on the last row of the drawing. 10px horizontal
     padding and a 3px gap keep "Volume Tank" + "Reef Foundation A/B/C" on one
     row (285px) down to a 356px viewport; at 8px 11px / 4px they needed 290px
     and wrapped to THREE rows at 360, the third pill printed over "30 cm
     (lebar)". */
  .eqs-rail #toolMenu { gap: 3px; }
  .eqs-tab { font-size: var(--fs-read); padding: 10px 10px; }
  .eqs-stage__flat, .eqs-stage__labels, .eqs-stage__gl { top: 92px; bottom: 76px; }   /* the opted-in studio takes the same box as the drawing */
  /* the studio's turn buttons (and the reset) live in the tool strip's row on a
     desktop; here the strip is two rows of pills, so they move to the drawing's
     bottom-right corner — the spot the "Lihat 3D" pill vacated */
  .eqs-view { grid-area: 2/1/3/4; justify-self: end; align-self: end; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
  /* The band head: "PERLENGKAPAN" (176px) against "DARI KATALOG DUNIA ANURA"
     (233px at .1em) cannot share a 335px row — the auto track took the whole
     running label and the fr track was squeezed to 82px, the two printed on
     top of each other. Two rows, the running label under the numbered title. */
  .eqs-head { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .eqs-head .r { justify-self: start; letter-spacing: .08em; }
  /* thumbs: 44px fields (16px text comes from the site-wide phone input rule
     in css/site.css), 37px pills */
  .eqs-box input { padding: 14px 0; }
  .eqs-pill { padding: 10px 13px; }
}
/* below 356px the strip is three rows: 10 + 3 x 39 + 2 x 3 = 133 */
@media (max-width: 356px) {
  .eqs-stage__flat, .eqs-stage__labels { top: 134px; }
}
@media (max-height: 780px) and (max-width: 1014px) {
  .eqs-studio { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .eqs-stage__gl, .eqs-tab, .eqs-pill, .eqs-icon { transition: none; }
}