.controls-page {
  box-sizing: border-box;
  justify-content: flex-start !important;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}
.controls-page .mpage-title { margin: 4px 0 10px; }
#controls-kit .ctl-tabs {
  position: sticky; top: 0; z-index: 3; padding: 6px 4px 10px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px;
  background: rgba(4,6,8,.96);
  border-bottom: 1px solid rgba(190,160,110,.16);
}
#controls-kit .ctl-tab,
#controls-kit button,
#controls-kit select,
#controls-kit input,
.controls-page button { min-height: 44px; }
.controls-page :focus-visible,
#controls-kit :focus-visible { outline: 3px solid var(--amber-hot); outline-offset: 2px; }
#controls-kit[hidden] { display: none; }
/* Inside the pause panel the editor is a section of a dialog, not a page. */
#pause-controls-slot #controls-kit {
  max-height: min(56vh, 460px); overflow-y: auto;
  /* Keep the sticky device tabs from covering the first binding rows (Frag). */
  scroll-padding-top: 64px;
}
#pause-controls-slot .ctl-tabs {
  background: rgba(10,13,16,.98);
  margin: 0 auto 8px;
  width: 100%;
  box-sizing: border-box;
}
#ctl-list { margin-top: 0; padding-top: 4px; }
#ctl-list h3:first-child,
.ctl-row { scroll-margin-top: 72px; }
#ctl-help, #ctl-controller-status {
  box-sizing: border-box;
  color: var(--paper-dim); font: 12px/1.5 var(--font-mono);
}
#ctl-controller-status {
  padding: 10px 14px; border: 1px solid rgba(190,160,110,.3);
  background: rgba(7,10,13,.9); color: var(--tone-d5c9ad);
}
/* Nothing competes for this any more: the floating-card rules in theme.css and
   screens.css that these !important declarations existed to overrule are gone,
   along with the touch.css block that overruled them a second time. */
#controls-kit .controls-panel {
  box-sizing: border-box; display: block;
  min-width: 0; max-width: 100%;
  padding: 10px 14px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
  background: rgba(5,8,11,.86); color: var(--tone-a8a092);
  font: 12px/1.4 var(--font-mono);
}
#ctl-list h3 {
  margin: 15px 0 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(190,160,110,.2);
  color: var(--tone-c5b48c); font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
}
#ctl-list h3:first-child { margin-top: 3px; }
.ctl-row {
  display: grid; grid-template-columns: minmax(160px, 1.1fr) minmax(160px, 1.4fr) 48px;
  align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.045);
}
.ctl-row.capturing { background: rgba(128,70,20,.22); }
.ctl-action { color: var(--cream-600); text-align: left; justify-self: start; }
.ctl-bindings { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.ctl-binding, .ctl-conflict button {
  min-width: 82px; padding: 8px 10px; border: 1px solid var(--steel-500); border-radius: 4px;
  background: var(--steel-800); color: var(--cream-400); font: 700 11px/1.2 var(--font-mono); cursor: pointer;
}
.ctl-binding:hover { border-color: var(--tone-b7965f); background: var(--tone-22272b); }
.ctl-binding.add { min-width: 44px; color: var(--tone-aaa18e); }
.ctl-conflict {
  padding: 10px; margin-bottom: 10px; border: 1px solid var(--denied); border-radius: 4px;
  background: rgba(105,28,22,.35); color: var(--tone-ffe1d9);
}
.ctl-conflict p { margin: 0 0 8px; }
.ctl-conflict button { margin: 0 6px 0 0; }
.ctl-touch-note { color: var(--tone-d0c4a7); }
.ctl-row.static b { color: var(--cream-600); text-align: left; }
#ctl-settings {
  box-sizing: border-box; margin-block: 10px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(5,8,11,.86);
  color: var(--cream-600); font: 12px/1.4 var(--font-mono);
}
.ctl-setting { display: grid; grid-template-columns: minmax(140px,1fr) minmax(150px,2fr) 45px; align-items: center; gap: 10px; }
.ctl-setting input { width: 100%; }
.ctl-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ctl-check input { width: 22px; }
.ctl-calibration { display: grid; gap: 6px; margin-top: 8px; border-color: var(--tone-5d584d); }
.ctl-calibration label { display: grid; grid-template-columns: 1fr 100px 22px auto; align-items: center; gap: 7px; }
.ctl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
/* Resetting one device is the ordinary action; wiping every device, plus look
   sensitivity and dead zones, is not — so it does not look like a peer. */
#ctl-reset-all { opacity: .8; }
#ctl-reset-all:hover, #ctl-reset-all:focus-visible { opacity: 1; }
#ctl-reset-device[hidden], #ctl-reset-all[hidden], #ctl-search-row[hidden],
#ctl-family-row[hidden], #ctl-test[hidden] { display: none !important; }

/* ---- controller family + test ---- */
#ctl-family-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; width: min(760px, 100%); margin: 8px auto 0;
  color: var(--paper-dim); font: 12px/1.5 var(--font-mono);
}
#ctl-family {
  min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--steel-500); border-radius: 4px;
  background: var(--steel-800); color: var(--cream-400);
  font: 700 12px/1.2 var(--font-mono);
}
#ctl-family:disabled { opacity: .55; }
#ctl-test {
  box-sizing: border-box; width: min(760px, 100%); margin: 10px auto 0; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(5,8,11,.86);
  color: var(--cream-600); font: 12px/1.5 var(--font-mono); text-align: left;
}
.ctl-test-note { margin: 0 0 10px; color: var(--paper-dim); }
.ctl-test-sticks { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.ctl-stick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ctl-stick-dial {
  position: relative; width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(190,160,110,.35); background: rgba(0,0,0,.5);
}
.ctl-stick-dz {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border: 1px dashed rgba(216,131,122,.6); border-radius: 50%;
}
.ctl-stick-dial b {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; background: var(--amber-hot);
  box-shadow: 0 0 10px rgba(240,195,106,.6);
}
.ctl-test-triggers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.ctl-trigger { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; }
.ctl-trigger div { height: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(190,160,110,.3); }
.ctl-trigger i { display: block; height: 100%; width: 0; background: var(--tone-9ac25f); }
.ctl-test-pressed { margin: 12px 0; min-height: 18px; color: var(--cream-400); }

/* ---- filter ---- */
#ctl-search {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--steel-500); border-radius: 4px;
  background: var(--tone-101418); color: var(--cream-400);
  font: 700 13px/1.2 var(--font-mono);
}
#ctl-search::placeholder { color: var(--tone-6b675e); }
.ctl-none { color: var(--paper-dim); padding: 14px 0; }
/* A binding used twice is flagged where it lives, not only when it is set. */
.ctl-binding.dupe { border-color: var(--denied); color: var(--cream-100); }
/* An axis is not a rebindable button; it reads as a fact, not a control. */
.ctl-binding.axis {
  display: inline-flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: var(--tone-4f5a45);
  background: rgba(20,26,20,.7); color: var(--tone-b9c4ae); cursor: default;
}
.ctl-binding.add.missing { border-color: var(--denied); color: var(--tone-ffbdb2); }

/* ---- the touch layout diagram ---- */
.ctl-phone-wrap { margin: 4px 0 14px; }
.ctl-phone {
  position: relative;
  width: 100%; max-width: 520px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(190,160,110,.4); border-radius: 12px;
  background:
    linear-gradient(120deg, rgba(30,34,38,.9), rgba(10,12,14,.95)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.02) 5px 6px);
}
.ctl-spot {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 1px solid rgba(226,220,202,.45); border-radius: 50%;
  background: rgba(14,16,18,.72);
  color: var(--cream-600); text-align: center;
}
.ctl-spot b { font: 700 9px/1 var(--font-mono); letter-spacing: .06em; }
.ctl-spot i { font: 400 8px/1.2 var(--font-ui); font-style: normal; letter-spacing: .03em; color: var(--paper-mute); opacity: .86; }
.ctl-spot.zone {
  /* Labels ride the top of a drag zone: the buttons overlay its lower half,
     and a centred caption would sit underneath them. */
  justify-content: flex-start; padding-top: 8px;
  border-radius: 8px; border-style: dashed;
  background: rgba(120,140,150,.08);
}
.ctl-spot.hot { border-color: rgba(240,200,120,.85); background: rgba(120,92,20,.45); }
.ctl-phone-caption {
  max-width: 520px; margin: 10px auto 0;
  color: var(--paper-dim); font: 400 12px/1.5 var(--font-ui); font-style: normal; letter-spacing: .04em; text-align: center;
}
@media (max-width: 560px) {
  .ctl-spot b { font-size: 8px; }
  .ctl-spot i { display: none; }
}
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
}
@media (max-width: 560px) {
  .controls-page { padding-inline: max(8px, env(safe-area-inset-left)) !important; }
  #controls-kit .ctl-tab { flex: 1 1 100px; padding-inline: 8px; letter-spacing: .06em; }
  .ctl-row { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .ctl-bindings { justify-content: flex-start; }
  .ctl-binding { flex: 1 1 105px; }
  .ctl-setting { grid-template-columns: 1fr 50px; }
  .ctl-setting input { grid-column: 1/-1; grid-row: 2; }
  .ctl-calibration label { grid-template-columns: 1fr 90px 22px auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .controls-page { min-height: 100dvh; padding-top: max(6px, env(safe-area-inset-top)) !important; }
  .controls-page .mpage-title { font-size: 24px; margin: 0 0 4px; }
  #ctl-help { margin-block: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .controls-page *, .controls-page *::before, .controls-page *::after {
    scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}