/* ============================================================================
   Toggle, Checkbox and Interactive row — COMPONENTS.md §15

   First implementation in this app. Both are named directly by the checkout's
   `Checkout / Options / Billing` (47890:268281), whose "Use the address in my
   profile for billing" control is an `Interactive row` wrapping a §15.4
   Toggle at the Small size.

   §15.4's contract, verified against the frame: the knob is `surface/raised`
   in all 12 variants, and the TRACK colour sits on a sibling node. The frame
   gives that track `#4211a0` when on and `#bfbfbf` when off:

     · `#4211a0` is the BigHeart seed — root CLAUDE.md non-negotiable 4. Bound
       to `solid/brand/default`, so it follows the brand instead of freezing
       BigHeart purple under BWHI. It is exactly the "fifth frozen brand seed"
       the project is trying not to add to.
     · `#bfbfbf` is `Text & Icons/Placeholders`, an INK token doing a surface
       job — the layer inversion §15 F2 and §14 F1 both log. `soft/neutral/
       strong` is the semantic token for an off-state track, and §15.4's own
       notes name it as such.

   §15.4 models no focus state (SIZE × State × Checked, where State is
   Default / Hover / Disabled). Implemented here per the root CLAUDE.md
   instruction on that gap: `border/focus`, `shape/focus-width`,
   `shape/focus-offset`, `:focus-visible` only.

   TODO(tokens): every bare px is a SIZE — DESIGN.md §12.4.
   ========================================================================== */

/* `Interactive row` — the control and its label, as one hit target. It is a
   <label> wrapping a real checkbox, so the whole row toggles and the browser
   gives us the semantics for free. */
.interactive-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.interactive-row__input {
  /* Not `display: none` — that would make it unfocusable and unreachable by
     the label. It sits under the track it draws. */
  position: absolute;
  opacity: 0;
  inline-size: 28px;
  block-size: 16px;
  margin: 0;
}

/* The label text — `Elements/Input Label` 12/20, `Text & Icons/Primary`. */
.interactive-row__label {
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
}

/* --- The track ------------------------------------------------------------
   The frame's Small toggle is 16 tall with 2px padding and a 12px knob, so the
   travel is the width minus the knob minus both paddings. 28 wide gives the
   knob 12px of travel, which is the frame's own geometry. */
.toggle {
  position: relative;
  flex: none;
  display: block;
  inline-size: 28px;
  block-size: 16px;
  /* Optical: lines the track up with the cap height of the first label line,
     which is what the frame's `pt-[2px]` Control Wrapper does. */
  margin-block-start: var(--space-3xs);
  /* Fully rounded — a switch is a pill, not a rounded rectangle, and
     `shape/radius/chip` (4px) left visible corners on a 16-tall track.
     Non-negotiable 7 — `--shape-radius-*`, never `--radius-*`: there is no
     `shape/radius/pill`, and `shape-radius-avatar` IS the circle in this
     system (tokens.brand.css maps it to `radius/full`), so it is the shape
     token for a fully-rounded control. */
  border-radius: var(--shape-radius-avatar);
  background: var(--color-soft-neutral-strong);
  transition: background-color 120ms ease; /* TODO(tokens): motion not built */
}

/* The knob — `surface/raised` in every variant, per §15.4. */
.toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 12px;
  block-size: 12px;
  /* The knob is a circle, for the same reason and by the same token. */
  border-radius: var(--shape-radius-avatar);
  background: var(--color-surface-raised);
  /* The frame's handle shadow. DESIGN.md §8.1's elevation is the token-bound
     equivalent; this is its smallest step. */
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--color-surface-media) 15%, transparent);
  transition: translate 120ms ease; /* TODO(tokens): motion not built */
}

.interactive-row__input:checked + .toggle {
  background: var(--color-solid-brand-default);
}

/* `translate`, not `inset-inline-start`, so the knob slides on the compositor
   and so the direction follows the writing mode. */
.interactive-row__input:checked + .toggle::after {
  translate: 12px 0;
}

/* Focus — the §15.4 gap, implemented. */
.interactive-row__input:focus-visible + .toggle {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

.interactive-row:hover .toggle {
  background: var(--color-soft-neutral-pressed);
}

.interactive-row:hover .interactive-row__input:checked + .toggle {
  background: var(--color-solid-brand-hover);
}

@media (prefers-reduced-motion: reduce) {
  .toggle,
  .toggle::after {
    transition: none;
  }
}


/* ============================================================================
   Checkbox — COMPONENTS.md §15.3

   The checkout's "Update information also in my profile" row (36718:791731)
   wraps one at 16px. §15.3 is a full 3×3 matrix with correct `on-*` pairing,
   so the checked contract is taken as-is: a `solid/brand/default` box with an
   `on-solid/brand` tick, and the tick masked from the asset file rather than
   inlined (ASSETS.md §6 rule 1).

   ⚠️ THE UNCHECKED FILL IS DELIBERATELY NOT THE DS's. §15 F1 (Critical) is
   that Radio binds its unchecked state to `PRIM-10 (10p)` — a variable from a
   THIRD token library (`Light / Dark`), valued Ant Design blue at 10%, not a
   BigHeart colour at all. Reproducing that would import a foreign library's
   brand into the checkout. `surface/raised` inside `border/strong` is the
   semantic pair for an empty control, and it follows the theme.

   §15.3 models no focus state. Implemented per the root CLAUDE.md instruction
   on that gap — on the BOX, since the real input is visually hidden.
   ========================================================================== */

.checkbox__input {
  /* Not `display: none`, which would make it unfocusable and unreachable by
     its label. It sits under the box it draws. */
  position: absolute;
  opacity: 0;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
}

.checkbox__box {
  flex: none;
  display: block;
  /* TODO(tokens): size not built. 16px is the frame's box. */
  inline-size: 16px;
  block-size: 16px;
  /* Optical: aligns to the cap height of the first label line, matching the
     frame's own `pt-[2px]` Control Wrapper. */
  margin-block-start: var(--space-3xs);
  box-sizing: border-box;
  border: var(--space-px) solid var(--color-border-strong);
  /* Non-negotiable 7 — `--shape-radius-*` for component geometry, never
     `--radius-*`. A checkbox is the smallest rounded control in the system, so
     `shape/radius/chip` is its step. */
  border-radius: var(--shape-radius-chip);
  background: var(--color-surface-raised);
  transition: background-color 100ms ease, border-color 100ms ease;
}

.checkbox__input:checked + .checkbox__box {
  border-color: var(--color-solid-brand-default);
  background-color: var(--color-solid-brand-default);
  /* The tick, from the asset file — never inline SVG. */
  -webkit-mask: none;
  mask: none;
  background-image: none;
}

/* The tick is drawn as a masked pseudo-element so it takes `on-solid/brand`
   as a colour rather than being baked into an image. */
.checkbox__box::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: transparent;
  -webkit-mask: url("../../../../assets/icons/e/icon/system/check_line.svg") center / 12px 12px
    no-repeat;
  mask: url("../../../../assets/icons/e/icon/system/check_line.svg") center / 12px 12px no-repeat;
}

.checkbox__input:checked + .checkbox__box::after {
  background-color: var(--color-on-solid-brand);
}

.interactive-row:hover .checkbox__box {
  border-color: var(--color-border-brand-default);
}

.checkbox__input:focus-visible + .checkbox__box {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .checkbox__box {
    transition: none;
  }
}