/* SPDX-License-Identifier: MIT
 *
 * terminology-toggle.css — the Simple <-> Technical switch, ported from hire4real's
 * static/css/components/terminology-toggle.css at ebca5d4 (SL_05A Part C). Same markup, same
 * geometry. The colours are ours: every value is a token, and theirs fell back to literals that
 * the colour law forbids here. The label registry stays ours too: this ports the SWITCH, never
 * the vocabulary.
 */

/* ---- SL_05F D16: their page's rules, as they reach this component, scoped to its root. ----
 * Tailwind preflight's line-height 1.5 (on their html, inherited by the two labels), its border
 * reset and its form-control reset (on the switch's input), copied from their built output.css
 * (Tailwind CSS v3.4.19's preflight, MIT, Copyright (c) Tailwind Labs, Inc.) and wrapped in
 * :where() so each keeps the specificity it has there. Our page base (17px / 1.6)
 * is untouched: nothing here reaches outside .terminology-toggle. D16 governs over Part A's
 * "not touched". */
:where(.terminology-toggle) { line-height: var(--line-height-normal, 1.5); }
:where(.terminology-toggle), :where(.terminology-toggle) *,
:where(.terminology-toggle) ::before, :where(.terminology-toggle) ::after {
  border-width: 0;
  border-style: solid;
}
:where(.terminology-toggle) input {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

.terminology-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.terminology-toggle__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: color 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.terminology-toggle__label--active {
  color: var(--ink);
  font-weight: 600;
}

.terminology-toggle__switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

.terminology-toggle__switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.terminology-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--line);
  border-radius: 18px;
  transition: background-color 0.18s ease;
}

.terminology-toggle__slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--surface-2);
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.terminology-toggle__switch input:checked + .terminology-toggle__slider {
  background: var(--earth);
}

.terminology-toggle__switch input:checked + .terminology-toggle__slider::before {
  transform: translateX(14px);
}

.terminology-toggle__switch input:focus-visible + .terminology-toggle__slider {
  outline: 2px solid var(--earth);
  outline-offset: 2px;
}

/* ---- SL_05F D16: the 44px floor is a hit area, on Stone Lane only. ----
 * A 44x44 pseudo-element centred on the 32x18 switch, never padding, so the visible box
 * lock-step compares is the sibling's. It reaches 6px past each side: the gap to each word.
 * It hangs off the slider, which fills the switch exactly, so the switch's own ::after is free
 * to carry the hover tip, as theirs does (tooltip.css). */
.terminology-toggle__slider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}