/* Elastic controls - drawing for elastic-controls.js (house style 2026-10-08).
   The real checkbox sits on top of the drawing at 44px+ so it gets the tap,
   the keyboard and the form submit. Everything else here is paint.

   The hit area is pinned with !important on purpose: hub pages carry older
   rules like `.f input { width:100% }` or `input { min-height:44px }` that
   would otherwise resize or shift the invisible input off the drawing. The
   wrapper is a span, so it is pinned the same way against `label span { ... }`.
   Margin is left alone so a page can nudge it into line with its text. */
.el {
  position: relative !important; display: inline-block !important; flex: 0 0 auto !important;
  padding: 0 !important; border: 0 !important; background: none !important; vertical-align: middle;
}
.el:has(> .el-input[hidden]) { display: none !important; }
.el > input.el-input {
  position: absolute !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  opacity: 0 !important; cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.el > .el-input:disabled { cursor: not-allowed; }
.el:has(> .el-input:disabled) { opacity: .45; }

/* Switch: track 50x28, knob 22, 3px inset; hit area 58x44 */
.el-switch { width: 50px !important; height: 28px !important; }
.el-switch > input.el-input { left: -4px !important; top: -8px !important; width: 58px !important; height: 44px !important; }
.el-switch .el-track { position: absolute; inset: 0; border-radius: 999px; background: #D3D0CB; overflow: hidden; }
.el-switch .el-fill { position: absolute; inset: 0; background: var(--orange, #FAA61A); opacity: 0; }
.el-switch .el-knob {
  position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.12);
}

/* Checkbox: 22px box, 5px corners; hit area 44x44 */
.el-check { width: 22px !important; height: 22px !important; }
.el-check > input.el-input { left: -11px !important; top: -11px !important; width: 44px !important; height: 44px !important; }
.el-check .el-face {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 5px;
  background: #fff; border: 2px solid #B5B1AA; box-sizing: border-box; overflow: hidden;
  transition: border-color .12s;
}
.el-check .el-paint { position: absolute; inset: 0; background: var(--orange, #FAA61A); border-radius: 2px; transform: scale(0); }
.el-check svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.el-check path { fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.el-check > .el-input:checked ~ .el-face { border-color: var(--orange, #FAA61A); }
.el > .el-input:hover:not(:disabled) ~ .el-face { border-color: var(--orange, #FAA61A); }

/* Keyboard focus shows on the drawing, not the hidden input */
.el > .el-input:focus-visible ~ .el-track,
.el > .el-input:focus-visible ~ .el-face { outline: 2px solid #000; outline-offset: 2px; }