/* The new design (Figma "PadBox Software", frames 1 and 2), laid out at the design's size - 1046 x 653 - and scaled
   to the window (--zoom, set in main.js). Every position and color below is read off the design. */

/* The design's fonts (FOR NEW UI): Xirod for the techno titles, Poppins Regular and SemiBold for everything else.
   Declared after ../css/app.css, so these Poppins files are the ones used. Xirod has one weight: declared for all of
   them, so the browser never fakes a bold. */
@font-face { font-family: "Poppins"; font-weight: 400; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Xirod"; font-weight: 100 900; src: url("fonts/Xirod.otf") format("opentype"); font-display: swap; }

:root {
  --bg: #2a2a2a; --card: #262626; --card-border: #6b6b6b; --border: #8a8a8a; --hairline: #3a3a3a; --field: #dddddd;
  --track: #9f9f9f; --frame: #262626; --orange: #fe6805; --orange-hot: #ff8a3a; --orange-deep: #d75700;
  --text: #e6e6e6; --soft: #c3c3c3; --muted: #8a8a8a; --good: #34de83; --warn: #ffc85a; --bad: #ff6e6e;
  --techno: "Xirod", "Poppins", sans-serif;
}
html, body { height: 100%; }
/* nothing may widen the page past the screen (a phone would then lay it out wider and scale it down) */
html { overflow: hidden; }
/* one background for the whole window (not only the design frame), so there is no seam at the frame's sides */
body { background: radial-gradient(90% 80% at 50% 75%, #2e2e2e 0%, #2a2a2a 45%, #232323 100%) fixed #232323; display: flex; align-items: center; justify-content: center; overflow: hidden; }

#stage {
  position: relative; width: 1046px; height: 653px; zoom: var(--zoom, 1); overflow: hidden; flex: none;
  background: transparent;
  font-family: "Poppins", sans-serif; color: var(--text);
}
.hidden { display: none !important; }
.grow { flex: 1; }

/* ---------------------------------------------------------------- header */
#head { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; }
#head .logo { position: absolute; left: 17px; top: 9px; width: 90px; height: auto; }
#head .who { position: absolute; left: 132px; top: 8px; }
#head .who .t { display: flex; align-items: center; gap: 7px; margin-left: 2px; font: 400 16.3px/19px var(--techno); letter-spacing: 0; color: #e8e8e8; }
#head .who .dot { position: absolute; left: 1px; top: 3.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
#head .who .t span { margin-left: 16px; }
#head .who .s { margin: -1px 0 0 18px; font-size: 9.6px; color: #9a9a9a; white-space: nowrap; }
#head .who .s b { font-weight: 400; color: var(--good); }
#head .who.off .dot { background: var(--bad); }
#head .who.off .s b { color: var(--bad); }
#head .acts { position: absolute; right: 12px; top: 11px; display: flex; gap: 10px; }
.act { white-space: nowrap; height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; border: 0; cursor: pointer; padding: 0; font: 400 14px "Poppins", sans-serif; }
.act svg { width: 19px; height: 19px; }
.act.outline { background: transparent; border: 1px solid #e0e0e0; color: #f0f0f0; }
.act.outline:hover { background: rgba(255, 255, 255, .08); }
.act.save { background: var(--orange); color: #fff; }
.act.save:disabled { background: #352316; color: #6b5040; cursor: default; }
.act.light { background: #d9d9d9; color: #262626; }
.act.light:hover { background: #ececec; }
.act.primary { background: var(--orange); color: #fff; padding: 0 12px; min-width: 174px; justify-content: center; gap: 7px; font-size: 13px; }
.act.primary svg { width: 18px; height: 18px; flex: none; }
.act.primary:hover, .act.save:not(:disabled):hover { background: var(--orange-hot); }

/* ---------------------------------------------------------------- side menu */
#nav { position: absolute; left: 0; top: 193px; display: flex; flex-direction: column; gap: 20px; }
#nav button { width: 52px; height: 52px; border: 0; border-radius: 0 2px 2px 0; background: #3d3d3d; color: #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#nav button svg { width: 27px; height: 27px; }
#nav button:hover { background: #4a4a4a; }
#nav button.sel { background: var(--orange-deep); color: #fff; }

/* ---------------------------------------------------------------- page title */
#heading { position: absolute; left: 132px; top: 71px; }
#heading h1 { margin: 0; font: 400 32.5px/36px var(--techno); letter-spacing: 0; color: #e0e0e0; }
#heading p { margin: 5px 0 0; font: 400 23px/1.2 "Poppins", sans-serif; color: #a8a8a8; letter-spacing: -.005em; }

#main { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; }
#msg { position: absolute; left: 132px; right: 240px; bottom: 7px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- CONTROLLER page */
body[data-page="controller"] #main { top: 0; }
#main .page.controller { overflow: visible; }
.pad-drawing { position: absolute; left: 132.9px; top: 143.3px; width: 654.8px; height: 513.6px; overflow: visible; }
.pad-drawing .pad-btn { cursor: pointer; transition: filter .12s; }
.pad-drawing .pad-btn:hover { filter: brightness(1.35); }
.pad-drawing .pad-btn.sel:hover { filter: none; }

.side-col { position: absolute; left: 817px; width: 218px; top: 169px; display: flex; flex-direction: column; gap: 9px; }
.side-col.selected { top: 108px; }
.panel { border: 1px solid #c5c5c5; border-radius: 4px; padding: 11px 13px 12px; }
.ptitle { font: 600 13px/16px "Poppins", sans-serif; color: #ececec; margin: 0 0 8px; letter-spacing: .01em; }
.lbl { font-size: 10.5px; color: #cfcfcf; margin: 9px 0 4px; }
.lbl.split { display: flex; justify-content: space-between; color: #cfcfcf; }
.lbl.split span:last-child { color: #bdbdbd; }
.field { width: 100%; height: 26px; border-radius: 2px; border: 0; background: var(--field); color: #2b2b2b; font: 400 10.5px "Poppins", sans-serif; padding: 0 22px 0 6px; outline: none; cursor: pointer; }
select.field { appearance: none; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 0h6L3 4z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 10px center; }
select.field.mono { font-family: "Consolas", "Roboto Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .02em; }
select.field:disabled { color: #8a8a8a; cursor: default; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field.color { display: flex; align-items: center; gap: 6px; text-align: left; font-family: "Poppins", sans-serif; }
.field.color .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.two.caps { margin: 3px 0 0; font-size: 8.5px; color: #8a8a8a; }
.pbtn { width: 100%; height: 26px; margin-top: 8px; border-radius: 2px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 400 10.5px "Poppins", sans-serif; cursor: pointer; }
.pbtn svg { width: 12px; height: 12px; }
.pbtn.primary { margin-top: 9px; background: var(--orange); border: 0; color: #fff; }
.pbtn.primary:hover { background: var(--orange-hot); }
.pbtn.primary:disabled { background: #6a3a1a; color: #b58a6a; cursor: default; }
.pbtn.outline { margin-top: 5px; background: transparent; border: 1px solid #c5c5c5; color: #f0f0f0; }
.pbtn.outline:hover { background: rgba(255, 255, 255, .06); }
.panel .hint { margin: 7px 0 0; font-size: 7.9px; color: #8a8a8a; white-space: nowrap; letter-spacing: -.01em; }
.panel .hint b { color: #cfcfcf; font-weight: 600; }
.hint2 { display: none; }

.panel.empty { height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: 25px; }
.click-icon { width: 38px; height: 38px; color: #e8e8e8; }
.click-icon svg { width: 100%; height: 100%; }
.empty-t { margin-top: 14px; font: 600 12.5px "Poppins", sans-serif; color: #b8b8b8; }
.empty-d { margin-top: 6px; font-size: 10px; line-height: 14.5px; color: #a5a5a5; }

.colorrow { display: flex; gap: 10px; align-items: flex-start; }
/* the rainbow ring is its own layer (masked to a ring), so nothing of it shows around the color in the middle */
.wheel { position: relative; width: 80px; height: 80px; border-radius: 50%; flex: none; cursor: crosshair; }
.wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  -webkit-mask: radial-gradient(circle, transparent 0 26px, #000 26.5px); mask: radial-gradient(circle, transparent 0 26px, #000 26.5px); }
.wheel-in { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; cursor: pointer; }
.wheel-knob { position: absolute; width: 11px; height: 11px; margin: -7px 0 0 -7px; background: rgba(255, 255, 255, .15); border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.readout { display: flex; justify-content: space-between; font-size: 7.5px; color: #8a8a8a; margin: 3px 0 11.5px; }
.sw { display: flex; gap: 6px; align-items: center; }
.sw button { width: 15px; height: 15px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.sw button:hover { outline: 1.5px solid #fff; outline-offset: 1.5px; }
.sw .plus { background: transparent; border: 1px solid #9a9a9a; color: #9a9a9a; display: inline-flex; align-items: center; justify-content: center; }
.sw .plus svg { width: 12px; height: 12px; }
input.range { width: 100%; margin: 2px 0 2px; appearance: none; height: 12px; background: transparent; cursor: pointer; }
input.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #ec6b0d 0 var(--p, 0%), #9f9f9f var(--p, 0%) 100%); }
input.range::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; background: #ff6500; border: 1.5px solid #2a2a2a; box-shadow: 0 0 0 .5px #ff6500; }
input.range::-moz-range-track { height: 2px; background: #9f9f9f; }
input.range::-moz-range-progress { height: 2px; background: #ec6b0d; }
input.range::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #ff6500; border: 1.5px solid #2a2a2a; }

/* ---------------------------------------------------------------- the other pages (the current app's, in the new colors) */
body:not([data-page="controller"]) #main { left: 132px; right: 12px; top: 150px; bottom: 22px; }
#main .page { position: absolute; inset: 0; overflow: auto; }
#main .card { background: transparent; border: 1px solid #c5c5c5; border-radius: 4px; padding: 11px 13px 12px; }
#main .card > h2 { font-size: 13px; }
#main .card > h2 svg { color: var(--orange); width: 18px; height: 18px; }
#main .btn { height: 28px; font-size: 10.5px; border-radius: 2px; text-transform: none; }
#main .btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
#main .page { padding: 0 !important; }
#main .toggle input:checked + .pill { background: var(--orange); border-color: var(--orange); }
#main .slider input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #ec6b0d 0 var(--p, 0%), #9f9f9f var(--p, 0%) 100%); }
#main .slider input[type=range]::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4.5px; background: #ff6500; border: 1.5px solid #2a2a2a; }
#main select.combo { background-color: var(--field); color: #2b2b2b; border: 0; border-radius: 2px; height: 26px; font-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 0h6L3 4z' fill='%23333'/%3E%3C/svg%3E"); background-position: right 10px center; }
#main select.combo option { background: #eee; color: #222; }

/* ---------------------------------------------------------------- connect screen */
body[data-page="connect"] #main { top: 0; }
.connect2 { position: absolute; left: 132px; top: 150px; width: 640px; }
.connect2 h1 { margin: 0 0 10px; font: 400 32.5px/36px var(--techno); letter-spacing: 0; color: #e0e0e0; position: absolute; top: -80px; }
.connect2 p { font-size: 15px; color: #a8a8a8; margin: 0 0 24px; }
.connect2 .btn.big { background: var(--orange); border-color: var(--orange); color: #fff; }
.connect2 .demo { margin-top: 18px; font-size: 12px; }
.connect2 .demo a { color: var(--orange); }
.connect2 .problem { color: var(--warn); font-size: 12px; white-space: pre-line; }

dialog { background: #2a2a2a; }
/* BUTTON SETTINGS: the rows where the design has them */
.side-col .panel:nth-child(2) { padding-bottom: 8px; }
.side-col .panel:nth-child(2) > div > .lbl:first-child { margin-top: 11px; }

/* ---------------------------------------------------------------- STICKS, SETTINGS, BACKUP in the design's style: the same
   panels, fields, buttons and sliders as the CONTROLLER page's side column, laid out over its drawing area (x 132..1035) */
body:not([data-page="controller"]) #main { left: 132px; right: 11px; top: 158px; bottom: 26px; }
#main .dpage { overflow: visible; }
.dpage .panel .ptitle { display: flex; align-items: center; }
.dpage .panel .ptitle .dtoggle { margin-left: auto; font-weight: 400; }
.dpage .panel .hint { white-space: normal; }
.dpage .panel .hint.wrap, .dpage p.hint { font-size: 9px; line-height: 13px; margin-top: 10px; color: #8a8a8a; white-space: normal; }
.dpage .panel p.text { font-size: 10.5px; line-height: 16px; color: #cfcfcf; margin: 4px 0 12px; }

.dtoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: #cfcfcf; cursor: pointer; user-select: none; }
.dtoggle input { display: none; }
.dtoggle i { position: relative; width: 20px; height: 11px; border-radius: 6px; background: #9f9f9f; flex: none; transition: background .15s; }
.dtoggle i::after { content: ""; position: absolute; left: 1.5px; top: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: #ced2d4; transition: left .15s; }
.dtoggle input:checked + i { background: var(--orange); }
.dtoggle input:checked + i::after { left: 10.5px; }
.dslider { margin-top: 8px; }
.dslider .lbl { margin: 0 0 2px; }
.btnrow { display: flex; gap: 8px; margin-top: 10px; }
.btnrow .pbtn { margin: 0; flex: 1; }

/* STICKS: two panels, the gate on the left of each */
.dpage.sticks { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; align-content: start; }
.panel.stick { padding-bottom: 14px; }
.stick-body { display: grid; grid-template-columns: 170px 1fr; gap: 16px; margin-top: 4px; }
.gate-col { padding-top: 4px; }
canvas.gate { display: block; width: 170px; height: 200px; }
.step { font: 600 11.5px "Poppins", sans-serif; color: var(--orange); }
.step.ok { color: var(--good); }
.info { font-size: 9.5px; line-height: 13.5px; color: #bdbdbd; min-height: 41px; margin-top: 3px; }
.ctl-col .two .dtoggle { margin-top: 2px; }

/* SETTINGS: three panels side by side */
.dpage.settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; align-content: start; }

/* BACKUP: one panel */
.dpage.backup .panel { width: 440px; }
.dpage.backup .btnrow .pbtn { max-width: 190px; }

/* the header and the side menu stay clickable above the pages (the CONTROLLER page spans the whole frame) */
#head, #nav { z-index: 3; }
#main { z-index: 1; }
body[data-page="controller"] #main { pointer-events: none; }
body[data-page="controller"] #main .page > * { pointer-events: auto; }

/* PROFILE dropdown on the Controller page, top right above the right-hand panels (as in the design's "Mon Profil 1") */
.profile-sel { position: absolute; left: 817px; width: 218px; top: 74px; }

/* the function written on each button of the drawing */
.pad-label { font-family: "Poppins", sans-serif; font-weight: 600; user-select: none; }

/* the right-hand boxes keep one size: a button without an LED keeps the LED rows' space, and "No button selected"
   is as tall as BUTTON SETTINGS, so GLOBAL LED SETTINGS never moves */
.led-block { position: relative; }
.led-block .noled-note { display: none; }
.led-block.noled .two { visibility: hidden; }
.led-block.noled .noled-note { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 19.3px; height: 26px; box-sizing: border-box;
  border: 1px dashed #5a5a5a; border-radius: 2px; font-size: 10px; color: #8a8a8a; }
.side-col, .side-col.selected { top: 108px; }
.panel.empty { height: 246.6px; justify-content: center; padding-top: 0; }

/* HOJA2: one LED color field per button (full width), Idle Glow on the "LED color" row, Animation time greyed out
   with the effects that don't animate */
.two.one { grid-template-columns: 1fr; }
.idle-row { align-items: center; }
.idle-row .dtoggle { font-size: 10.5px; }
.dslider.off { opacity: .45; }
.panel.hoja-led { padding-top: 9px; padding-bottom: 7px; }
.panel.hoja-led .ptitle { margin-bottom: 4px; }
.panel.hoja-led .lbl { margin: 6px 0 3px; }
.panel.hoja-led .readout { margin-bottom: 9px; }
.panel.hoja-led .dslider { margin-top: 3px; }

/* ---------------------------------------------------------------- PhobGCC (GS Platform) */
.connect-btns { display: flex; gap: 12px; }
/* its BUTTON SETTINGS has one more row (the analog amount): "No button selected" matches that height, and the LED
   panel under both stays put */
.side-col.phob .panel.empty { height: 294.1px; }
.side-col.phob .panel .dslider { margin-top: 6px; }
/* CALIBRATION: the stick's gate on the left, the step-by-step controls on the right */
.dpage.phobcal { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; align-content: start; }
.phob-gate { display: flex; justify-content: center; }
canvas.phob-canvas { display: block; width: 300px; height: 300px; }
.phob-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.phob-row .pbtn { width: auto; padding: 0 12px; margin: 0; }
.panel.phob-stick .two { margin-top: 6px; }
.phob-prog { height: 4px; border-radius: 2px; background: #3d3d3d; margin: 6px 0 8px; overflow: hidden; }
.phob-prog i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s; }
.phob-instr { min-height: 44px; color: #e6e6e6; font-size: 10.5px; line-height: 15px; }
.phob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.phob-grid .pbtn { margin: 0; }

/* Tooltips in the design ("Backup idea.png"), see main.js: light grey box, dark Poppins text, arrow at the element */
#tip { position: absolute; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .12s; max-width: 280px;
  background: #d9d9d9; color: #262626; font: 400 10px/1.35 "Poppins", sans-serif; padding: 4px 7px; border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); white-space: normal; }
#tip.show { opacity: 1; }
#tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top: 0; border-bottom: 4px solid #d9d9d9; }
#tip.above::after { bottom: auto; top: 100%; border-bottom: 0; border-top: 4px solid #d9d9d9; border-width: 4px 4px 0; }

/* HOJA2's analog amount (a button mapped to an analog output): one compact row whose space is always kept */
.amount-row { display: flex; align-items: center; gap: 8px; height: 18px; margin-top: 6px; font-size: 10.5px; color: var(--text); }
.amount-row input { flex: 1; margin: 0; }
.amount-row .amt-val { min-width: 30px; text-align: right; }
.amount-row.off { visibility: hidden; }

.connect2 .problem.good { color: var(--good); }

/* The TRIGGER, GYRO and RUMBLE pages, built like STICKS: bordered panels, orange controls */
.dpage.mtrig { display: grid; grid-template-columns: 470px; gap: 11px; align-content: start; }
.dpage.mgyro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 11px; align-content: start; }
.tbar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.tbar { flex: 1; height: 12px; border-radius: 6px; background: #3a3a3a; overflow: hidden; }
.tbar i { display: block; height: 100%; width: 0; background: var(--orange); }
.tpct { min-width: 38px; text-align: right; font-size: 13px; font-weight: 600; }
.dpage.mtrig .info, .dpage.mgyro .info { white-space: pre-line; }
.gyro-view { position: relative; height: 330px; border-radius: 2px; overflow: hidden; margin: 4px 0 10px;
  background: radial-gradient(closest-side, rgba(254, 104, 5, .16), rgba(254, 104, 5, 0)) #1f1f1f; }
.gyro-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gyro-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 11px; text-align: center; padding: 20px; }

/* GP2040-CE "Custom combo": the row under Function (its space always kept) and the window's check boxes */
.combo-row .combo-txt { flex: 1; color: var(--orange); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-edit { border: 1px solid #e0e0e0; background: transparent; color: #f0f0f0; font: 400 10px "Poppins", sans-serif; padding: 1px 10px; border-radius: 2px; cursor: pointer; }
.combo-edit:hover { background: rgba(255, 255, 255, .08); }
.combo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.combo-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #555; border-radius: 4px; cursor: pointer; font: 600 13px "Poppins", sans-serif; }
.combo-chip input { accent-color: #fe6805; width: 15px; height: 15px; margin: 0; }
.combo-chip:has(input:checked) { border-color: #fe6805; background: rgba(254, 104, 5, .12); }

/* ================================================================ the GS Essential Redesign ("PadBox GP2040 Essential.pdf",
   "PadBox HOJA2 Essential.pdf"): positions read off its pages (1389 x 868, so x 0.753 here) */

/* CONTROLLER: "No button selected" lower than BUTTON SETTINGS, and the profile (GP2040-CE) just above either */
.side-col:not(.phob) { top: 169px; }
.side-col:not(.phob).selected { top: 108px; }
.side-col:not(.phob) .panel.empty { height: 166px; }
.page.controller .profile-sel { top: 134px; }
.page.controller.selected .profile-sel { top: 74px; }
/* HOJA2: the subtitle has a second line ("in Switch Pro mode"), and the drawing sits a little lower */
.page.controller.hoja .pad-drawing { top: 154.5px; }
#heading p .mode-name { font-weight: 600; }

/* the side menu's flyout (HOJA2's modes) and the little arrow on the button that has one */
#nav button.has-menu { position: relative; }
#nav button.has-menu::after { content: ""; position: absolute; right: 4px; top: 50%; margin-top: -3px; border: 3px solid transparent; border-left: 4px solid currentColor; border-right: 0; }
.flyout { position: absolute; left: 57px; z-index: 6; width: 150px; background: #3a3a3a; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); display: flex; flex-direction: column; padding: 0 0 2px; }
.flyout button { height: 28px; text-align: left; padding: 0 10px; background: transparent; border: 0; color: #e6e6e6; font: 600 12.5px "Poppins", sans-serif; cursor: pointer; }
.flyout button:hover { background: #4a4a4a; }
.flyout button.sel { background: var(--orange-deep); color: #fff; }

/* the other pages start where the redesign's panels do */
body:not([data-page="controller"]) #main { top: 152px; bottom: 16px; }

/* a panel's title row: the badge after the name, the switch on the right */
.ptitle .badge { margin-left: 9px; font: 600 6.6px/1 "Poppins", sans-serif; padding: 3px 5px; border-radius: 1px; color: #fff; letter-spacing: 0; }
.badge.no { background: #d52b2b; }
.badge.ok { background: #1ea84b; }
.badge.busy { background: var(--orange); }
.dtoggle.off { opacity: .45; pointer-events: none; }

/* two choices in a pill: Round Gate | Octagonal Gate */
.seg { display: flex; height: 26px; margin-top: 10px; border-radius: 13px; background: #3d3d3d; }
.seg button { flex: 1; border: 0; border-radius: 13px; background: transparent; color: #e6e6e6; font: 400 10px "Poppins", sans-serif; cursor: pointer; }
.seg button.on { background: #dddddd; color: #262626; }
.seg.locked, .seg.locked button { cursor: not-allowed; }
.seg.locked button:not(.on) { color: #7a7a7a; }

/* STICKS: two tall panels, everything stacked: the gate, its reading, then the settings, Reset and Calibrate at the foot */
.dpage.sticks { grid-template-columns: 349px 349px; gap: 18px; }
.panel.stick { height: 481px; box-sizing: border-box; display: flex; flex-direction: column; padding: 11px 13px 13px; }
.panel.stick .ptitle { margin-bottom: 0; }
.stick-body { display: flex; flex-direction: column; flex: 1; margin-top: 0; gap: 0; }
.gate-wrap { display: flex; justify-content: center; padding-top: 9px; }
canvas.gate { width: 206px; height: 206px; }
.rd { text-align: center; margin-top: 6px; font-size: 7.5px; line-height: 12.5px; color: #a8a8a8; }
.rd1 { white-space: pre; }
.cal-info { margin: 2px 0 0; min-height: 0; font-size: 8.5px; line-height: 12px; color: #bdbdbd; text-align: center; }
.cal-info:empty { display: none; }
.stick-ctl { display: flex; flex-direction: column; flex: 1; }
.two.flips { margin-top: 18px; }
.stick-ctl .dslider { margin-top: 9px; }
.btnrow.bottom { margin-top: auto; padding-top: 12px; }
.btnrow.bottom .pbtn { height: 26px; }
.stick-off { margin: 56px 0 0; text-align: center; }
.stick-off .empty-t { margin-top: 0; }
/* HOJA2's panels hold more (ANGLE SET, snapback, curve): a smaller gate, closer rows */
.dpage.sticks.hoja canvas.gate { width: 140px; height: 140px; }
.dpage.sticks.hoja .gate-wrap { padding-top: 6px; }
.dpage.sticks.hoja .rd { margin-top: 3px; }
.dpage.sticks.hoja .two.flips { margin-top: 8px; }
.dpage.sticks.hoja .seg { margin-top: 7px; height: 24px; }
.dpage.sticks.hoja .stick-ctl .dslider { margin-top: 5px; }
.dpage.sticks.hoja .btnrow.bottom { padding-top: 6px; }
.dpage.sticks.hoja .cal-info { margin-top: 3px; }
.legend { display: flex; align-items: center; justify-content: center; gap: 3px; }
.legend .lg-dot, .legend .lg-ring { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.legend .lg-dot { background: var(--orange); }
.legend .lg-ring { border: 1px solid #c5c5c5; width: 4px; height: 4px; margin-left: 8px; }
.angle-row { display: flex; justify-content: center; margin-top: 6px; }
.angle-row .pbtn.angle { width: 100px; margin: 0; height: 24px; }
.angle-hint { margin: 3px 0 0; font-size: 7.4px; color: #9a9a9a; text-align: center; white-space: nowrap; }
.angle-hint.left { text-align: left; margin-top: 1px; }

/* SETTINGS: INPUT BEHAVIOR and TURBO side by side, the same height, Reset and Save at the foot */
.dpage.settings { grid-template-columns: 349px 349px; gap: 18px; align-items: stretch; }
.panel.stretch { display: flex; flex-direction: column; min-height: 205px; box-sizing: border-box; }
.panel.stretch .ptitle { margin-bottom: 4px; }
.panel .gap { height: 10px; }
.panel.stretch .dslider { margin-top: 10px; }
.turbo-on { display: flex; flex-direction: column; flex: 1; }
.turbo-on .dslider { margin-top: 4px; }
.turbo-on .lbl { margin-top: 8px; }
.dpage .turbo-on p.hint.wrap { margin-top: 6px; font-size: 7.8px; line-height: 11px; }
.panel-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 8px; }
.panel-off .off-icon { width: 46px; height: 46px; color: #8a8a8a; }
.panel-off .off-icon svg { width: 100%; height: 100%; }
.panel-off .empty-t { margin-top: 6px; }
.panel-off .empty-d { margin-top: 4px; }

/* a dropdown of check boxes (TURBO's Assigned Buttons) */
.ms-wrap { position: relative; }
.field.ms { display: flex; align-items: center; text-align: left; overflow: hidden;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 0h6L3 4z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 10px center; }
.ms-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field.ms.empty .ms-txt { color: #5f5f5f; }
.ms-list { position: absolute; left: 0; right: 0; top: 28px; z-index: 10; background: #ececec; border-radius: 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); padding: 4px 0; max-height: 230px; overflow: auto; }
.ms-list label { display: flex; align-items: center; gap: 7px; padding: 3px 9px; color: #2b2b2b; font-size: 10px; cursor: pointer; }
.ms-list label:hover { background: #dcdcdc; }
.ms-list input { accent-color: #fe6805; margin: 0; width: 12px; height: 12px; }

/* BACKUP & RESTORE: CONFIGURATION FILES, then BACKUP HISTORY */
.dpage.backup { display: flex; flex-direction: column; gap: 18px; width: 715px; }
.dpage.backup .panel { width: auto; }
.dpage.backup .btnrow .pbtn { max-width: none; height: 26px; }
.dpage.backup .ptitle { margin-bottom: 4px; }
.dpage.backup .panel p.text { margin: 0 0 10px; font-size: 10px; }
.dpage.backup p.last b { color: var(--orange); font-weight: 600; }
.dpage.backup .hint.wrap:empty { display: none; }
.tbl { max-height: 250px; overflow: auto; }
table.hist { width: 100%; border-collapse: collapse; font-size: 9.6px; }
table.hist th { text-align: left; font-weight: 600; color: #e6e6e6; padding: 4px 6px 7px 0; border-bottom: 1px solid #5a5a5a; white-space: nowrap; }
table.hist td { padding: 7px 6px 7px 0; border-bottom: 1px solid #5a5a5a; color: #d2d2d2; white-space: nowrap; }
table.hist td.nm { font-weight: 600; color: #f0f0f0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.hist td.valid { color: var(--good); }
table.hist td.other { color: var(--muted); }
table.hist td.acts { text-align: right; padding-right: 0; }
table.hist tr.none td { color: var(--muted); text-align: center; padding: 16px 0; }
.ia { width: 20px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--orange); cursor: pointer; vertical-align: middle; }
.ia svg { width: 13px; height: 13px; }
.ia.del { color: #e53935; }
.ia:hover:not(:disabled) { filter: brightness(1.3); }
.ia:disabled { opacity: .3; cursor: default; }
dialog .name-in { width: 100%; box-sizing: border-box; height: 32px; border: 0; border-radius: 2px; background: #dddddd; color: #262626; font: 400 14px "Poppins", sans-serif; padding: 0 10px; outline: none; }

/* while a stick is calibrated, its steps where its settings were */
.stick-set { display: flex; flex-direction: column; }
.stick-ctl .cal-info { margin: 18px 2px 0; font-size: 10.5px; line-height: 15.5px; color: #e6e6e6; text-align: left; }
.dpage.sticks.hoja canvas.gate { width: 126px; height: 126px; }
.dpage.sticks.hoja .stick-ctl .dslider { margin-top: 3px; }
.dpage.sticks.hoja .angle-row { margin-top: 4px; }
.dpage.sticks.hoja .two.flips { margin-top: 7px; }

/* ================================================================ PhobGCC on the GS Platform (Figma "PadBox GS Platform") */
/* STICKS: one wide panel - the gate and Set center on the left; axes, gate shape, the calibration step and Calibrate on the right */
.dpage.phobsticks { display: block; }
.panel.phob-wide { width: 775px; height: 415px; box-sizing: border-box; }
.panel.phob-wide .ptitle { margin-bottom: 0; }
.phob-body { display: grid; grid-template-columns: 300px 1fr; gap: 45px; }
.phob-left { display: flex; flex-direction: column; align-items: center; }
.phob-left .gate-wrap { padding-top: 12px; }
canvas.phob-gate-cv { width: 252px; height: 252px; }
.phob-left .rd { margin-top: 2px; }
.phob-left .angle-row { margin-top: 10px; }
.phob-left .angle-row .pbtn.angle { width: 100px; }
.phob-left .angle-hint { white-space: normal; width: 230px; line-height: 10.5px; margin-top: 5px; }
.legend .lg-x { color: #ffd23c; font-weight: 600; margin-left: 8px; font-size: 8px; }
.phob-right { padding-top: 66px; }
.phob-right .two.flips { margin-top: 0; }
.cal-box { border: 1px solid #c5c5c5; border-radius: 4px; padding: 9px 13px 12px; margin-top: 10px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-t { color: var(--orange); font: 600 11px/14px "Poppins", sans-serif; }
.cal-d { font-size: 10px; line-height: 14px; color: #e6e6e6; margin-top: 5px; }
.cal-s { font-size: 8px; color: #9a9a9a; margin-top: 2px; min-height: 11px; }
.cal-box .phob-prog { margin: 5px 0 0; height: 3px; }
.cal-btns { margin-top: 10px; }
.cal-btns .pbtn, .cal-main .pbtn { height: 26px; }
.cal-main { margin-top: 12px; justify-content: flex-end; }
.cal-main .pbtn { flex: 0 0 calc(50% - 4px); }
.pbtn .key { display: inline-flex; align-items: center; justify-content: center; min-width: 11px; height: 11px; padding: 0 3px; box-sizing: border-box; border-radius: 6px;
  background: #e6e6e6; color: #262626; font: 600 6.5px "Poppins", sans-serif; font-style: normal; margin-right: 3px; }
.pbtn.primary .key { background: #fff; color: var(--orange); }
.angle-off { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #9a9a9a; white-space: nowrap; }
.hold { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #e6e6e6; color: #262626; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hold svg { width: 12px; height: 12px; }
.hold:active { background: var(--orange); color: #fff; }

/* a notice at the top right ("Calibration complete") */
.toast { position: absolute; right: 12px; top: 70px; z-index: 50; width: 292px; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px 9px;
  border-radius: 3px; background: #1d3a26; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.toast-ic { flex: none; width: 13px; height: 13px; margin-top: 1px; border-radius: 50%; border: 1.3px solid var(--good); color: var(--good); display: flex; align-items: center; justify-content: center; }
.toast-ic svg { width: 10px; height: 10px; }
.toast-t { font: 600 10px "Poppins", sans-serif; color: #f0f0f0; }
.toast-d { margin-top: 2px; font-size: 8.3px; color: #c8c8c8; }
.toast-x { margin-left: auto; padding: 0; border: 0; background: transparent; color: #c8c8c8; font-size: 13px; line-height: 1; cursor: pointer; }

/* HOJA2: the one-color-for-all wheel greyed out in the effects that don't use it (Fairy, Rainbow, Authentic) */
.colorrow.off { opacity: .35; }
.colorrow.off > * { pointer-events: none; }

/* "Firmware update available": a red dot on the update button, and a notice at the top right until it's answered */
.act.has-update { position: relative; border-color: var(--orange); color: var(--orange); }
.act.has-update::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #232323; animation: un-pulse 1.6s ease-in-out infinite; }
@keyframes un-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.update-note { position: absolute; right: 12px; top: 52px; z-index: 40; width: 300px; box-sizing: border-box; padding: 11px 13px 12px;
  background: #2b2b2b; border: 1px solid var(--orange); border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55); }
.update-note::before { content: ""; position: absolute; top: -6px; right: var(--un-ax, 214px); border: 6px solid transparent; border-top: 0; border-bottom-color: var(--orange); }
.un-head { display: flex; align-items: center; gap: 7px; }
.un-ic { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; }
.un-ic svg { width: 13px; height: 13px; }
.un-t { font: 600 12px "Poppins", sans-serif; color: #f0f0f0; }
.un-d { margin-top: 6px; font-size: 9.6px; line-height: 13.5px; color: #cfcfcf; }
.update-note .btnrow .pbtn { height: 26px; }

/* ================================================================ the GS Essential Redesign, final pages (1280 x 800, 4 Oct 2026):
   "PadBox GP2040 Essential.pdf", "PadBox HOJA2 Essential.pdf" and their PNGs. Every size below is the design's, read off its
   vector pages, times 1046 / 1280 (0.8172). Its fonts: 40 px Xirod titles, 24 px subtitles, 16 px panel titles, 12 px text,
   10 px small text, 8 px tags (here 32.69, 19.61, 13.07, 9.81, 8.17, 6.54). */
:root {
  --orange: #ff6800; --orange-hot: #ff8a3a; --orange-deep: #d95700; --text: #dfdfdf; --soft: #dfdfdf; --muted: #9d9d9d; --good: #46d682;
  --bg: #2a2a2a; --field: #dfdfdf;
}
/* the background: a soft light at the middle, darker to the edges (the design's radial gradient) */
body { background: radial-gradient(circle calc(513.2px * var(--zoom, 1)) at 50% calc(50% + 82.1px * var(--zoom, 1)),
  #3d3d3d 0%, #383838 15%, #343434 29%, #303030 40%, #2d2d2d 50%, #282828 64%, #252525 74%, #212121 100%) fixed #212121; }
#stage { color: var(--text); }

/* header: the logo, the firmware's name and its state, the buttons */
#head .logo { position: absolute; left: 16.34px; top: 15.81px; width: 90.71px; height: 12.83px; color: #fff; }
#head .who { left: 0; top: 0; }
#head .who .t { position: absolute; left: 150.36px; top: 9.66px; margin: 0; display: block; white-space: nowrap; font: 400 16.34px/1 var(--techno); color: #dfdfdf; }
#head .who .t span { margin: 0; }
#head .who .dot { left: -15.93px; top: 3.01px; width: 8.17px; height: 8.17px; background: var(--good); }
#head .who .s { position: absolute; left: 150.36px; top: 28.69px; margin: 0; font-size: 9.81px; line-height: 1; color: var(--muted); }
#head .acts { right: 11.44px; top: 11.44px; gap: 9.81px; }
.act { height: 32.69px; min-width: 32.69px; width: 32.69px; border-radius: 0; }
.act svg.ri { width: 32.69px; height: 32.69px; }
.act.outline { border: 0; outline: 1px solid #d9d9d9; outline-offset: 0; color: #d9d9d9; }
.act.save { color: #eeeeee; }
.act.save:disabled { background: #3a2518; color: #666666; }
.act.light { background: #d9d9d9; color: #212121; }
.act.primary { width: 174.06px; min-width: 0; padding: 0 0 0 9.81px; justify-content: flex-start; gap: 8.17px; font-size: 13.07px; color: #eeeeee; }
.act.primary svg.ri { width: 14.71px; height: 14.71px; }

/* page title */
#heading { left: 130.75px; top: 0; }
#heading h1 { position: absolute; left: 0; top: 67.54px; white-space: nowrap; font: 400 32.69px/1 var(--techno); color: #dfdfdf; }
#heading p { position: absolute; left: 0; top: 102.91px; margin: 0; white-space: nowrap; font: 400 19.61px/29.42px "Poppins", sans-serif; color: var(--muted); letter-spacing: 0; }
#heading p .mode-name { font-weight: 600; }

/* side menu: 64 px squares, 24 px apart, centred on the window's height */
#nav { top: 326.88px; transform: translateY(-50%); gap: 19.61px; }
#nav button { width: 52.3px; height: 52.3px; border-radius: 0 1.63px 1.63px 0; background: #3d3d3d; color: #dfdfdf; }
#nav button svg.ri { width: 52.3px; height: 52.3px; }
#nav button.sel { background: var(--orange-deep); color: #eeeeee; }
#nav button.has-menu::after { display: none; }

/* CONTROLLER: the drawing where the design places it (its tracing at 0.4214 of the 1530 x 1200 geometry); HOJA2's sits
   13 px lower, under its two-line subtitle */
.pad-drawing { left: 125.46px; top: 144.39px; width: 644.73px; height: 505.67px; }
.page.controller.hoja .pad-drawing { top: 155.01px; }

/* the right-hand column: the profile, then "No button selected" or BUTTON SETTINGS, then GLOBAL LED SETTINGS. Panels:
   267 x n px, 1 px #d9d9d9 border, 6 px corners, filled, a soft shadow; their content 17 px in (233 px wide). Every row is
   placed by the design's baselines (Poppins: baseline = line-height / 2 + 0.35 em). */
.profile-sel, .page.controller .profile-sel { left: 818px; width: 216.55px; top: 134.02px; height: 26.15px; }
.page.controller.selected .profile-sel { top: 73.55px; }
.side-col, .side-col.selected, .side-col:not(.phob) { left: 817.19px; width: 218.19px; top: 169.16px; gap: 8.17px; }
.side-col.selected, .side-col:not(.phob).selected { top: 108.69px; }
.panel { box-sizing: border-box; border: .8172px solid #d9d9d9; border-radius: 4.9px; background: #2a2a2a; box-shadow: 0 3.27px 3.27px rgba(0, 0, 0, .25); padding: 13.4px 13.07px 13.07px; }
.ptitle { font: 600 13.07px/1 "Poppins", sans-serif; color: #dfdfdf; margin: 0; letter-spacing: 0; }
.lbl { font-size: 9.81px; line-height: 1; color: #dfdfdf; margin: 0; }
.lbl.split { color: #dfdfdf; }
.lbl.split span:last-child { color: #9d9d9d; }
.field { height: 26.15px; border-radius: 3.27px; background: #dfdfdf; color: #2a2a2a; font: 400 9.81px/26.15px "Poppins", sans-serif; padding: 0 22px 0 7.2px; box-shadow: 0 0 0 .8172px #dfdfdf; box-sizing: border-box; }
select.field { background: #dfdfdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.7 4'%3E%3Cpath d='M.5 0h5.7a.5.5 0 0 1 .37.85L3.72 3.82a.55.55 0 0 1-.74 0L.13.85A.5.5 0 0 1 .5 0z' fill='%23212121'/%3E%3C/svg%3E") no-repeat right 9.56px top 13.07px / 5.48px 3.3px; }
select.field.mono { font-size: 9.81px; letter-spacing: .06em; padding-left: 5.5px; }

/* side column rows */
.side-col .panel > .ptitle + .lbl, .side-col .panel > .ptitle + div > .lbl:first-child { margin-top: 14.22px; }
.side-col .panel > .lbl + select.field, .side-col .panel > .lbl + .field { margin-top: 5.88px; }
.side-col .panel > select.field + .lbl, .side-col .panel > select.field + div > .lbl:first-child, .side-col .panel > select.field + .amount-row + .lbl,
.side-col .panel > select.field + .led-block > .lbl:first-child, .side-col .panel > .amount-row + .led-block > .lbl:first-child { margin-top: 12.09px; }
.side-col .panel:nth-child(2) > div > .lbl:first-child { margin-top: 12.09px; }
.side-col .panel:nth-child(2) { padding-bottom: 11.85px; }
.led-block .two { margin-top: 6.7px; gap: 9.81px; }
.field.color { gap: 3.27px; padding-left: 4.9px; }
.field.color .dot { width: 14.71px; height: 14.71px; }
.field.color:disabled { cursor: default; }
.two.caps { margin: 5.32px 0 0; font-size: 8.17px; line-height: 1; color: #9d9d9d; }
.led-block.noled .noled-note { top: 18.49px; height: 26.15px; font-size: 8.17px; }
.pbtn { height: 26.15px; border-radius: 0; font: 400 9.81px "Poppins", sans-serif; gap: 4.9px; color: #eeeeee; }
.pbtn svg.ri { width: 8.33px; height: 8.33px; }
.side-col .pbtn.primary { margin-top: 11.03px; }
.side-col .pbtn.outline { margin-top: 4.9px; }
.pbtn.outline { border: 0; box-shadow: 0 0 0 .8172px #d9d9d9; color: #eeeeee; }
.pbtn.primary { background: var(--orange); }
.panel .hint { margin: 6.95px 0 0; font-size: 8.17px; line-height: 1; color: #9d9d9d; letter-spacing: 0; }
.panel .hint b { color: #9d9d9d; font-weight: 600; }

/* "No button selected" */
.side-col:not(.phob) .panel.empty, .panel.empty { height: 166.7px; padding: 25.33px 0 0; justify-content: flex-start; }
.click-icon { width: 37.6px; height: 37.6px; color: #9d9d9d; }
.click-icon svg.ri { width: 100%; height: 100%; }
.empty-t { margin-top: 16.67px; font: 600 13.07px/1 "Poppins", sans-serif; color: #9d9d9d; }
.empty-d { margin-top: 5.23px; font-size: 9.81px; line-height: 14.71px; color: #9d9d9d; white-space: pre-line; }
.panel.empty .empty-d { white-space: pre; }

/* GLOBAL LED SETTINGS */
.side-col .panel.ledp { height: 284.38px; padding-bottom: 0; }
.idle-row { display: flex; justify-content: space-between; align-items: center; height: 9.81px; }
.idle-row .dtoggle { font-size: 9.81px; color: #dfdfdf; }
.colorrow { gap: 9.81px; margin-top: 6.7px; }
.wheel { width: 79.27px; height: 79.27px; }
.wheel::before { -webkit-mask: radial-gradient(circle, transparent 0 26.27px, #000 26.6px); mask: radial-gradient(circle, transparent 0 26.27px, #000 26.6px); }
.wheel-in { width: 36.04px; height: 36.04px; margin: -18.02px 0 0 -18.02px; }
.wheel-knob { width: 14.71px; height: 14.71px; margin: -7.36px 0 0 -7.36px; box-sizing: border-box; background: transparent; border: 1.63px solid #dfdfdf; box-shadow: none; }
.colorrow > div { flex: 1; padding-top: 7.77px; }
.readout { font-size: 8.17px; line-height: 1; color: #9d9d9d; margin: 0 0 7.76px; }
.sw { gap: 4.9px; }
.sw button { width: 16.34px; height: 16.34px; }
.sw .plus { box-sizing: border-box; border: .8172px solid #9d9d9d; }
.sw .plus svg { width: 11px; height: 11px; }
.ledp .dslider { margin-top: 12.09px; }
.ledp .dslider .lbl { margin: 0; }
.dslider input.range { margin: 5.07px 0 0; }
/* sliders: a 2 px grey track, the part to the left 4 px orange with round ends, a 14 px orange knob with a light ring */
input.range { display: block; height: 13.07px; margin: 0; }
input.range::-webkit-slider-runnable-track { height: 3.27px; background:
  linear-gradient(#ff6800, #ff6800) 0 0 / var(--p, 0%) 100% no-repeat,
  linear-gradient(#9d9d9d, #9d9d9d) 0 50% / 100% 1.63px no-repeat; border-radius: 1.63px; }
input.range::-webkit-slider-thumb { width: 11.44px; height: 11.44px; margin-top: -4.09px; border-radius: 50%; background: #ff6800; border: 0; box-shadow: 0 0 0 .8172px #dfdfdf; }
input.range:disabled::-webkit-slider-runnable-track, .dslider.off input.range::-webkit-slider-runnable-track { background:
  linear-gradient(#3d3d3d, #3d3d3d) 0 50% / var(--p, 0%) 1.63px no-repeat, linear-gradient(#9d9d9d, #9d9d9d) 0 50% / 100% 1.63px no-repeat; }
input.range:disabled::-webkit-slider-thumb, .dslider.off input.range::-webkit-slider-thumb { background: #3d3d3d; }
.dslider.off { opacity: 1; }
.dslider.off .lbl span { color: inherit; }
/* switches: 24 x 14, grey off, orange on */
.dtoggle { gap: 5.72px; font-size: 9.81px; color: #dfdfdf; }
.dtoggle i { width: 19.61px; height: 11.44px; border-radius: 5.72px; background: #9d9d9d; }
.dtoggle i::after { left: .82px; top: .82px; width: 9.81px; height: 9.81px; background: #dfdfdf; }
.dtoggle input:checked + i { background: var(--orange); }
.dtoggle input:checked + i::after { left: 8.99px; background: #d9d9d9; }
.dtoggle.off { opacity: 1; }
.amount-row.off { display: none; }
.side-col .panel > .amount-row { margin-top: 6px; }
.side-col .panel .hint { letter-spacing: -.04em; }   /* the design's line is set tighter (228 px at 10 px) */

/* ---------------------------------------------------------------- STICKS, SETTINGS, BACKUP (pages 4-8 of the GP2040 design) */
body:not([data-page="controller"]) #main { left: 129.93px; top: 151.18px; right: 0; bottom: 0; }
.dpage.sticks, .dpage.settings { grid-template-columns: 348.94px 348.94px; gap: 17.98px; }
.panel .ptitle { display: flex; align-items: center; height: 13.07px; }
.ptitle .badge { margin-left: 7.93px; height: 14.71px; box-sizing: border-box; padding: 0 4.9px; font: 600 6.54px/14.71px "Poppins", sans-serif; border-radius: 0; color: #dfdfdf; }
.badge.no { background: #d92424; }
.badge.ok { background: #1aa64a; }
.dpage .panel .ptitle .dtoggle { margin-left: auto; }
/* STICKS: a 427 x 591 panel per stick; the gate (251 px) centred under the title, its reading, the axes, the gate shape,
   the deadzones, then Reset and Calibrate */
.panel.stick { height: 482.96px; padding: 13.4px 13.07px 13.48px; }
.gate-wrap { padding-top: 16.28px; }
canvas.gate { width: 211.1px; height: 211.1px; }
.rd { margin-top: 2.72px; font-size: 8.17px; line-height: 12.26px; color: #9d9d9d; }
.two.flips { margin-top: 20.43px; height: 11.44px; display: grid; grid-template-columns: 160.99px 1fr; gap: 0; }
.two.flips .dtoggle { margin: 0; }
.seg { margin-top: 11.44px; height: 26.15px; border-radius: 8.17px; background: #3d3d3d; }
.seg button { border-radius: 8.17px; font-size: 9.81px; color: #eeeeee; }
.seg button:first-child { flex: 0 0 165.89px; }
.seg button.on { background: #dfdfdf; color: #212121; }
.stick-ctl .dslider { margin-top: 8.82px; }
.stick-ctl .dslider + .dslider { margin-top: 8.01px; }
.btnrow { gap: 10.3px; }
.btnrow.bottom { padding-top: 0; margin-top: auto; }
.btnrow .pbtn, .btnrow.bottom .pbtn { height: 26.15px; }
.pbtn.outline { margin: 0; }
.stick-off { margin: 68px 0 0; }
.stick-off .empty-t { font-size: 13.07px; }
.stick-off .empty-d { white-space: normal; padding: 0 40px; }
.seg button { font-weight: 400; }
/* the chosen gate shape is 203 px wide, whichever side it is on */
.seg button:first-child { flex: 1; }
.seg button.on { flex: 0 0 165.89px; }
/* HOJA2's STICKS (its page is 916 px tall, so it scrolls): a 715 px panel - a 226 px gate with its dashed reference
   circle, the reading and the legend, ANGLE SET and its hint, then the same rows as GP2040-CE's plus snapback and curve */
#main .dpage.sticks.hoja { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 13.07px; box-sizing: border-box; }
#main .dpage.sticks.hoja::-webkit-scrollbar { display: none; }
.dpage.sticks.hoja .panel.stick { height: 584.3px; }
.dpage.sticks.hoja .gate-wrap { padding-top: 10.57px; }
.dpage.sticks.hoja canvas.gate { width: 190.68px; height: 190.68px; }
.dpage.sticks.hoja .rd { margin-top: 1.91px; line-height: 13.89px; }
.dpage.sticks.hoja .angle-row { margin-top: 3.27px; }
.angle-row .pbtn.angle { width: 99.7px; height: 26.15px; }
.angle-hint { margin: 5.31px 0 0; font-size: 8.17px; line-height: 1; color: #9d9d9d; }
.dpage.sticks.hoja .two.flips { margin-top: 15.94px; }
.dpage.sticks.hoja .seg { margin-top: 11.44px; height: 26.15px; }
.dpage.sticks.hoja .stick-ctl .dslider { margin-top: 8.01px; }
.dpage.sticks.hoja .stick-ctl .seg + .dslider { margin-top: 8.82px; }
.angle-hint.left { text-align: left; margin-top: 4.5px; }
.dpage.sticks.hoja .btnrow.bottom { padding-top: 0; }
/* the two-stick panels fit the page (502 px high), so Reset and Calibrate show without scrolling: a smaller gate, tighter rows */
.dpage.sticks.hoja .panel.stick:not(.wide) { height: 486px; }
.dpage.sticks.hoja .panel.stick:not(.wide) .gate-wrap { padding-top: 8px; }
.dpage.sticks.hoja .panel.stick:not(.wide) canvas.gate { width: 156px; height: 156px; }
.dpage.sticks.hoja .panel.stick:not(.wide) .two.flips { margin-top: 10px; }
.dpage.sticks.hoja .panel.stick:not(.wide) .seg { margin-top: 8px; }
.dpage.sticks.hoja .panel.stick:not(.wide) .stick-ctl .dslider { margin-top: 6px; }
.legend { gap: 3.27px; }
.legend .lg-dot, .legend .lg-ring { width: 6.54px; height: 6.54px; box-sizing: border-box; }
.legend .lg-ring { margin-left: 8.17px; border: .82px solid #dfdfdf; }
/* SETTINGS: INPUT BEHAVIOR and TURBO, 427 x 253 each, Reset and Save at the foot */
.panel.stretch { height: 206.75px; min-height: 0; padding: 13.4px 13.07px 13.07px; }
.dpage .panel > .ptitle + .lbl, .turbo-on > .dslider:first-child { margin-top: 14.22px; }
.dpage .panel > .lbl + select.field, .turbo-on .lbl + .ms-wrap { margin-top: 5.88px; }
.panel.stretch > select.field + .dtoggle { margin-top: 11.44px; }
.panel.stretch > .dtoggle + .dslider { margin-top: 13.73px; }
.dslider input.range { margin-top: 5.07px; }
.turbo-on .dslider + .lbl { margin-top: 8.02px; }
.dpage .turbo-on p.hint.wrap { margin: 6.54px 0 0; font-size: 8.17px; line-height: 12.26px; color: #9d9d9d; letter-spacing: -.02em; }
.field.ms.empty .ms-txt { color: #666666; }
.panel-off { justify-content: flex-start; padding: 0; }
.panel-off .off-icon { width: 58.43px; height: 58.43px; margin-top: 34.1px; color: #9d9d9d; }
.panel-off .empty-t { margin-top: 14.54px; }
.panel-off .empty-d { margin-top: 5.23px; white-space: pre-line; }
.panel.stretch .ptitle, .dpage .panel .ptitle, .panel.stick .ptitle { margin-bottom: 0; }
.panel-off .off-icon { margin-top: 20.9px; }
.panel.stretch > .dtoggle { height: 11.44px; }
/* BACKUP & RESTORE: two 875 px panels, 22 px apart */
.dpage.backup { width: 715.05px; gap: 17.98px; }
.dpage.backup .panel { padding: 13.4px 13.07px 13.07px; }
.dpage.backup .panel p.text { margin: 7.68px 0 0; font-size: 9.81px; line-height: 1; color: #dfdfdf; }
.dpage.backup p.last b { color: var(--orange); font-weight: 600; }
.dpage.backup .btnrow { margin-top: 22.23px; gap: 13.07px; }
.dpage.backup .btnrow .pbtn { height: 26.15px; }
.dpage.backup .pbtn svg.ri { width: 8.99px; height: 8.99px; }
.dpage.backup .hint.wrap { margin-top: 8px; }
.tbl { max-height: none; overflow: visible; margin-top: 5.07px; }
table.hist { table-layout: fixed; font-size: 9.81px; }
table.hist th, table.hist td { height: 27.78px; box-sizing: border-box; padding: 0; line-height: 1; vertical-align: middle; border-bottom: .8172px solid #3d3d3d; color: #dfdfdf; overflow: hidden; text-overflow: ellipsis; }
table.hist th { font-weight: 600; }
table.hist td.nm { font-weight: 600; color: #dfdfdf; max-width: none; }
table.hist td.valid { color: #14aa4b; }
table.hist tr.can { cursor: pointer; }
table.hist tr.can:hover td { background: rgba(255, 255, 255, .04); }
table.hist td.acts { text-align: left; overflow: visible; }
.ia { width: 9.81px; height: 9.81px; margin-right: 10.6px; vertical-align: middle; }
.ia svg.ri { width: 9.81px; height: 9.81px; }
.ia.del { color: #d92424; }
table.hist td.acts { line-height: 0; } table.hist td.acts .ia { position: relative; top: -2px; }
/* HOJA2's mode menu: a 183 px list beside the CONTROLLER button, the mode in use orange */
.flyout { left: 57.2px; width: 149.55px; background: #3d3d3d; padding: 0 0 4.09px; box-shadow: 0 3.27px 3.27px rgba(0, 0, 0, .25); }
.flyout button { height: 27.78px; padding: 0 0 0 9.81px; font: 600 13.07px/27.78px "Poppins", sans-serif; color: #dfdfdf; }
.flyout button:first-child { height: 29.42px; padding-top: 1.63px; }
.flyout button.sel { background: var(--orange-deep); color: #eeeeee; }
body[data-page="connect"] #main { left: 0; top: 0; }
/* the GS Platform's drawing where its design (Figma "PadBox GS Platform - GP2040") has it: a little smaller and lower */
.pad-drawing.pd-platform { left: 128.17px; top: 151.24px; width: 639.97px; height: 501.94px; }
.page.controller.hoja .pad-drawing.pd-platform { top: 161.86px; }

/* GS Platform STICKS (GP2040-CE): one 949 x 425 panel - the 284 px gate and its reading on the left, the settings in a
   470 px column on the right, Reset and Calibrate at its foot */
.dpage.sticks.one { display: block; }
.panel.stick.wide { position: relative; width: 775.51px; height: 347.3px; }
.panel.stick.wide .ptitle { padding-right: 19.61px; }
.panel.stick.wide .stick-body { display: block; }
.panel.stick.wide .gate-wrap { position: absolute; left: 46.85px; top: 51.75px; padding: 0; }
.panel.stick.wide canvas.gate { width: 238.08px; height: 238.08px; }
.panel.stick.wide .rd { position: absolute; left: 0; width: 331.78px; top: 292.5px; margin: 0; }
.panel.stick.wide .stick-ctl { position: absolute; left: 357.93px; width: 384.08px; top: 92.34px; bottom: 87.43px; }
.panel.stick.wide .two.flips { margin-top: 0; grid-template-columns: 198.6px 1fr; }
.panel.stick.wide .seg { margin-top: 12.26px; }
.panel.stick.wide .seg button.on { flex: 0 0 197.76px; }
.panel.stick.wide .stick-ctl .dslider, .panel.stick.wide .stick-ctl .dslider + .dslider { margin-top: 8.82px; }
.panel.stick.wide .btnrow { gap: 12.26px; }
.panel.stick.wide .stick-off { position: absolute; left: 336.7px; width: 384px; top: 108px; margin: 0; }
.stick-off .off-icon { width: 52.3px; height: 52.3px; margin: 0 auto; color: #9d9d9d; }
.stick-off .off-icon svg { width: 100%; height: 100%; }
.panel.stick:not(.wide) .stick-off .off-icon { display: none; }
.panel.stick.wide .stick-off .empty-t { margin-top: 6.5px; }
.panel.stick.wide .stick-off .empty-d { padding: 0; }

/* the name window (EDIT BACKUP): 426 x 211, centred, the page behind it dimmed and blurred */
.dm-back { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(24, 24, 24, .55); backdrop-filter: blur(3.27px); -webkit-backdrop-filter: blur(3.27px); }
.panel.dmodal { width: 348.12px; height: 172.43px; padding: 24.84px 19.61px 18.8px; }
.dm-t { margin: 20.76px 0 0; font-size: 9.81px; line-height: 1; color: #9d9d9d; }
.field.dm-in { display: block; width: 100%; margin-top: 15.69px; cursor: text; padding-right: 7.2px; }
.dm-btns { display: flex; justify-content: flex-end; gap: 13.07px; margin-top: 15.52px; }
.dm-btns .pbtn { width: 84.99px; margin: 0; }
.dm-btns .pbtn svg.ri { width: 8.66px; height: 8.66px; }
.dm-x { font-style: normal; font-size: 11px; line-height: 1; }
/* HOJA2 on the GS Platform: the same wide panel, taller for ANGLE SET, snapback and curve */
.dpage.sticks.hoja.one .panel.stick.wide { height: 405px; }
.panel.stick.wide .angle-row { position: absolute; left: 0; width: 331.78px; top: 327px; margin: 0; }
.panel.stick.wide p.angle-hint:not(.left) { position: absolute; left: 0; width: 331.78px; top: 362px; margin: 0; white-space: normal; text-align: center; }
.dpage.sticks.hoja .panel.stick.wide .rd { top: 290px; margin: 0; }
.dpage.sticks.hoja .panel.stick.wide .gate-wrap { padding: 0; }
.dpage.sticks.hoja .panel.stick.wide canvas.gate { width: 238.08px; height: 238.08px; }
.dpage.sticks.hoja .panel.stick.wide .stick-ctl { top: 70px; bottom: 21px; }
.dpage.sticks.hoja .panel.stick.wide .two.flips { margin-top: 0; }
.panel.stick.wide .stick-off { top: 88px; }
.panel.stick.wide .stick-off .off-icon { width: 80px; height: 80px; margin: 0 auto -16px; }
.connect2 p.old { font-size: 12px; margin: 14px 0 0; color: #9d9d9d; }
/* dropdowns in the windows (Update firmware, Update an older PadBox): dark text on the light field, as on the pages */
dialog select.combo { appearance: none; height: 32px; padding: 0 28px 0 10px; border: 0; border-radius: 3px; color: #2a2a2a; font: 400 13px "Poppins", sans-serif;
  background: #dfdfdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.7 4'%3E%3Cpath d='M.5 0h5.7a.5.5 0 0 1 .37.85L3.72 3.82a.55.55 0 0 1-.74 0L.13.85A.5.5 0 0 1 .5 0z' fill='%23212121'/%3E%3C/svg%3E") no-repeat right 11px center / 7px 4px; }
dialog select.combo:disabled { opacity: .6; }
dialog select.combo option { color: #222; background: #eee; }

/* PhobGCC: its lock state on the STICK title row; Lock / Unlock beside Calibrate; the calibration's four buttons */
.lock-tag { margin-left: 7.93px; height: 14.71px; box-sizing: border-box; padding: 0 4.9px; font: 600 6.54px/14.71px "Poppins", sans-serif; color: #dfdfdf; }
.lock-tag.locked { background: #3d3d3d; }
.lock-tag.open { background: #1aa64a; }
.lock-tag:empty { display: none; }
.cal-main { gap: 10.3px; }
.cal-btns .pbtn { flex: 1; }
/* PhobGCC's SETTINGS cards hold four sliders: as tall as they need, the note and the buttons below them */
.dpage.settings.phobset .panel.stretch { height: auto; }
.dpage.settings.phobset .panel.stretch .dslider { margin-top: 8.82px; }
.dpage.settings.phobset .panel.stretch > .ptitle + .dslider { margin-top: 14.22px; }
.dpage.settings.phobset .panel .hint.wrap { margin: 10px 0 0; font-size: 8.17px; line-height: 12.26px; }
.dpage.settings.phobset .btnrow.bottom { margin-top: 13.07px; }

/* PhobGCC notch visualizer (as in SmashScope) */
.notchviz { margin-top: 14px; padding-top: 12px; border-top: 1px solid #3a3a3a; }
.notchviz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notchviz-top .pbtn { height: 26px; flex: 0 0 calc(50% - 4px); visibility: hidden; }
.notchviz.on .notchviz-top .pbtn { visibility: visible; }
.notchviz .melee-rd { display: none; margin-top: 8px; font-size: 10px; color: #cfcfcf; white-space: pre; font-variant-numeric: tabular-nums; }
.notchviz.on .melee-rd { display: block; }

/* PhobGCC settings: the design's five boxes (title, description, X and Y sliders side by side) */
.dpage.settings.phobset .panel.setbox { height: 116.4px; box-sizing: border-box; padding: 12px 13.5px 0; }
.dpage.settings.phobset .panel.setbox .ptitle { margin: 0 0 4.5px; }
.dpage.settings.phobset .setdesc { margin: 0; font-size: 8.17px; line-height: 14.3px; color: #a7a7a7; height: 28.6px; }
.dpage.settings.phobset .setsl { margin-top: 13px; }
.dpage.settings.phobset .setsl.two { gap: 10.8px; }
.dpage.settings.phobset .setsl .dslider { margin-top: 0; }

/* HOJA2 SNAPBACK page: Filter mode, Filter cutoff and the analyzer, a panel per stick */
.dpage.snappage { display: grid; grid-template-columns: 348.94px 348.94px; gap: 17.98px; align-content: start; }
#main .dpage.snappage { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 13px; box-sizing: border-box; }
#main .dpage.snappage::-webkit-scrollbar { display: none; }
.dpage.snappage.one { display: block; }
.panel.snapback { padding: 12px 13.5px 13px; }
.dpage.snappage.one .panel.snapback { width: 775.51px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 22px; }
.dpage.snappage.one .panel.snapback > .ptitle { grid-column: 1 / -1; }
.panel.snapback .snap-sub { margin: 2px 0 4px; font-size: 8.17px; line-height: 11.5px; color: #9a9a9a; }
.panel.snapback .lbl { font-size: 10px; color: #dcdcdc; margin-top: 4px; }
.panel.snapback .seg { margin-top: 5px; height: 24px; }
.panel.snapback .snap-hint { margin: 5px 0 0; font-size: 8.17px; line-height: 11.5px; color: #9a9a9a; min-height: 23px; }
.panel.snapback .dslider { margin-top: 6px; }
.panel.snapback .snap-an { margin-top: 12px; padding-top: 10px; border-top: 1px solid #3a3a3a; }
.dpage.snappage.one .panel.snapback .snap-an { margin-top: 0; padding-top: 0; border-top: 0; }
.panel.snapback .snap-head { display: flex; justify-content: space-between; align-items: center; }
.panel.snapback .snap-state { font-size: 8.5px; color: #9a9a9a; }
.panel.snapback .snap-state::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7a7a7a; margin-right: 5px; }
.panel.snapback .snap-state.got::before { background: var(--good); }
.panel.snapback .snap-stats { display: flex; justify-content: space-between; margin-top: 6px; min-height: 22px; }
.panel.snapback .snap-stats div { display: flex; flex-direction: column; font-size: 7.5px; color: #9a9a9a; }
.panel.snapback .snap-stats b { font-size: 10px; color: #ececec; font-weight: 600; font-variant-numeric: tabular-nums; }
.panel.snapback canvas.snap-plot { display: block; width: 100%; height: 150px; margin-top: 4px; }
.panel.snapback .snap-hist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-height: 18px; }
.panel.snapback .snap-cap { font: 400 7.5px/1 "Poppins", sans-serif; color: #cfcfcf; background: #2f2f2f; border: 1px solid #4a4a4a; border-radius: 9px; padding: 4px 7px; cursor: pointer; white-space: pre; }
.panel.snapback .snap-cap.on { border-color: var(--orange); color: #fff; }

/* the connect page: centred in the frame (the title, the text and the buttons) */
.connect2 { left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 30px)); width: 700px; text-align: center; }
.connect2 h1 { left: 0; right: 0; }
.connect2 p { margin-left: auto; margin-right: auto; }
.connect-btns { justify-content: center; }

/* the owner's guide: a button at the top right, the same size as the others; a line on the connect page */
.act.guide { width: 32.7px; height: 32.7px; box-sizing: border-box; text-decoration: none; }
.act.guide svg { width: 19px; height: 19px; }
.connect2 p.guide { font-size: 13px; margin: 18px auto 0; color: #bdbdbd; }
.connect2 p.guide a { color: var(--orange); }

/* HOJA's SWITCH COLORS page: the four colors on the left, a Pro Controller in them on the right */
.dpage.swcolors { display: grid; grid-template-columns: 330px 420px; gap: 13.07px; align-content: start; }
.dpage.swcolors .panel p.text { margin: 9px 0 0; font-size: 9.81px; line-height: 14px; color: #dfdfdf; }
.dpage.swcolors .two { margin-top: 2px; gap: 0 13.07px; }
.dpage.swcolors .two .lbl { margin: 12.09px 0 5.88px; }
.dpage.swcolors .two .sw { margin-top: 6.54px; gap: 4.4px; }
.dpage.swcolors .two .sw button { box-sizing: border-box; border: .8172px solid rgba(255, 255, 255, .38); }   /* so the black and dark grey show on the dark panel */
.dpage.swcolors .btnrow { margin-top: 16px; }
.dpage.swcolors .btnrow .pbtn { flex: none; width: 150px; }
.sw-prev { margin-top: 12px; padding: 26px 0; display: flex; justify-content: center; }
.sw-prev svg { width: 300px; height: auto; }
.sw-prev svg .rim { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 2.4; stroke-linejoin: round; }
.sw-prev svg .edge { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 4; }
/* the language menu in the header (js/i18n.js): an outlined box like the guide button beside it, with the language's own name */
select.act.lang { appearance: none; display: inline-block; flex: none; width: 96px; height: 32.7px; box-sizing: border-box; padding: 0 22px 0 9px; font: 400 12px "Poppins", sans-serif; color: #f0f0f0; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.7 4'%3E%3Cpath d='M.5 0h5.7a.5.5 0 0 1 .37.85L3.72 3.82a.55.55 0 0 1-.74 0L.13.85A.5.5 0 0 1 .5 0z' fill='%23f0f0f0'/%3E%3C/svg%3E") no-repeat right 8px center / 6.7px 4px; }
select.act.lang:hover { background-color: rgba(255, 255, 255, .08); }
select.act.lang option { background: #2b2b2b; color: #f0f0f0; }
/* in another language the orange header button grows with its text instead of cutting it */
html:not([lang="en"]) .act.primary { width: auto; min-width: 174.06px; padding-right: 9.81px; }

/* STICKS: the tall stick panels reached down to the status line ("Unsaved changes..."), which sat on their bottom edge.
   The panels end a little higher (taken from the free space above their buttons) and the line sits a little lower. */
.panel.stick:not(.wide), .dpage.sticks.hoja .panel.stick:not(.wide) { height: 477px; }
body[data-page="sticks"] #msg { bottom: 4px; }
.dpage.sticks.hoja .panel.stick:not(.wide) canvas.gate { width: 150px; height: 150px; }   /* gives the hint above the buttons its room back */