/* KKB — controls layer (Air Fill).
   "Native controls, up close": the app's real iOS controls, rendered in HTML/CSS
   as honest, mostly-interactive illustrative demos (sample data — not live
   screenshots). Plus .callout, a frosted iOS-popover detail tile that floats a
   magnified control over a device (used on the hero phone).

   Depends on, and loads AFTER: theme.json brand tokens (--wp--preset--*) and
   ios.css (--ios-*). BEM, single-class, token-only — no hardcoded color, space,
   radius, motion, or elevation. Reviewed: 2026-07. */

/* ==================================================================== */
/*  Gallery — responsive grid of control cards                          */
/* ==================================================================== */
.control-gallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--wp--style--global--wide-size, 1200px);
  display: grid;
  gap: var(--wp--preset--spacing--40);
  align-items: start; /* each card sizes to its own content — short ones (ratings, signature) don't stretch */
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .control-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .control-gallery { grid-template-columns: repeat(3, 1fr); } }

.control-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-card);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
}
/* Inset "stage" that holds the live control — sand so paper controls lift off it.
   Also the *scheme host*: it carries the --demo-* token set that everything inside the
   stage paints from (never the global --wp--preset--color--* directly), so the .scheme-toggle
   can recolour just the stage. Defaults below are Light; the Dark set is applied by the
   scope's :has() rules further down. The thumb/accents that read on both stay global. */
.control-card__demo {
  --demo-bg: var(--wp--preset--color--sand);      /* the sunken stage itself */
  --demo-surface: var(--wp--preset--color--paper); /* inputs, cards, pads that sit on the stage */
  --demo-text: var(--wp--preset--color--ink);
  --demo-muted: var(--wp--preset--color--muted);
  --demo-line: var(--wp--preset--color--line);
  --demo-accent: var(--wp--preset--color--gold);
  --demo-accent-strong: var(--wp--preset--color--gold-deep); /* AA on the light stage */

  display: grid;
  align-content: center;
  gap: var(--wp--preset--spacing--30);
  min-height: 9rem;
  padding: var(--wp--preset--spacing--40);
  border-radius: var(--ios-radius-md);
  background: var(--demo-bg);
  color: var(--demo-text);
}
.control-card__cap { display: grid; gap: 2px; margin-block-start: auto; }
.control-card__cap-t { font-weight: 800; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--ink); }
.control-card__cap-d { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--base); line-height: 1.4; }

/* ==================================================================== */
/*  Scheme scope — Dark demo palette (driven by the .scheme-toggle)      */
/*  A [data-demo-scope] section flips its stages to the warm-dark set    */
/*  when the toggle's Dark radio is checked, or its Auto radio is checked */
/*  AND the OS prefers dark. Everything is a color-mix of existing brand  */
/*  tokens — no new hex, no theme.json change. Only .control-card__demo   */
/*  and its contents recolour; the band, card, and captions don't.       */
/* ==================================================================== */
[data-demo-scope]:has(.scheme-toggle__radio[value="dark"]:checked) .control-card__demo {
  --demo-bg: var(--wp--preset--color--ink);                                             /* deepest — the stage */
  --demo-surface: var(--wp--preset--color--ink-2);                                      /* lifted controls */
  --demo-text: var(--wp--preset--color--paper);
  --demo-muted: color-mix(in srgb, var(--wp--preset--color--paper) 64%, var(--wp--preset--color--ink));
  --demo-line: color-mix(in srgb, var(--wp--preset--color--paper) 16%, var(--wp--preset--color--ink));
  --demo-accent-strong: var(--wp--preset--color--gold); /* the deep gold goes muddy on dark — brighten it */
}
@media (prefers-color-scheme: dark) {
  [data-demo-scope]:has(.scheme-toggle__radio[value="auto"]:checked) .control-card__demo {
    --demo-bg: var(--wp--preset--color--ink);
    --demo-surface: var(--wp--preset--color--ink-2);
    --demo-text: var(--wp--preset--color--paper);
    --demo-muted: color-mix(in srgb, var(--wp--preset--color--paper) 64%, var(--wp--preset--color--ink));
    --demo-line: color-mix(in srgb, var(--wp--preset--color--paper) 16%, var(--wp--preset--color--ink));
    --demo-accent-strong: var(--wp--preset--color--gold);
  }
}

/* ==================================================================== */
/*  Scheme toggle — iOS segmented control (Auto / Light / Dark)          */
/*  NOT a modifier of .segmented (components.css): that block is a JS     */
/*  control — <button role="tab"> whose indicator width/translate are set */
/*  by hero-video.js — skinned on-dark for the hero. This one is the      */
/*  opposite on every axis: real <input type=radio> read by :has() with   */
/*  zero JS, indicator slid by pure CSS, styled on-paper for a light      */
/*  intro. Sharing a base would couple this to the hero's JS for no gain, */
/*  so the ~30 lines of visual chrome are deliberately re-authored here.  */
/* ==================================================================== */
.scheme-toggle {
  min-inline-size: 0;
  margin: 0;
  margin-block-start: var(--wp--preset--spacing--40);
  padding: 0;
  border: 0;
  display: grid;
  justify-items: center;
  gap: var(--wp--preset--spacing--20);
}
.scheme-toggle__legend {
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--muted);
}
.scheme-toggle__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0; /* contiguous columns so the pill (translateX by its own width) lands exactly on each option */
  padding: 3px;
  border-radius: var(--ios-radius-md);
  background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}
/* Sliding pill: one third of the track, translated to the checked option. */
.scheme-toggle__ind {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  inline-size: calc((100% - 6px) / 3);
  border-radius: calc(var(--ios-radius-md) - 3px);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
  transition: transform var(--ios-duration-base) var(--ios-ease-out);
  pointer-events: none;
}
.scheme-toggle__track:has(.scheme-toggle__radio[value="light"]:checked) .scheme-toggle__ind { transform: translateX(100%); }
.scheme-toggle__track:has(.scheme-toggle__radio[value="dark"]:checked)  .scheme-toggle__ind { transform: translateX(200%); }
.scheme-toggle__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ios-control-height);
  padding-inline: var(--wp--preset--spacing--40);
  border-radius: calc(var(--ios-radius-md) - 3px);
  cursor: pointer;
}
.scheme-toggle__label {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  transition: color var(--ios-duration-fast) var(--ios-ease-out);
}
.scheme-toggle__opt:has(.scheme-toggle__radio:checked) .scheme-toggle__label { color: var(--wp--preset--color--ink); font-weight: 800; }
.scheme-toggle__opt:has(.scheme-toggle__radio:focus-visible) { box-shadow: var(--ios-focus-ring); }
@media (hover: hover) {
  .scheme-toggle__opt:hover .scheme-toggle__label { color: var(--wp--preset--color--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .scheme-toggle__ind { transition: none; }
}

/* ==================================================================== */
/*  Field — floating-label text input (real, editable)                  */
/* ==================================================================== */
.field { position: relative; display: block; }
.field__input {
  width: 100%;
  min-height: var(--ios-control-height-lg);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
  border: 1px solid var(--demo-line);
  border-radius: var(--ios-radius-md);
  background: var(--demo-surface);
  color: var(--demo-text);
  font-size: var(--wp--preset--font-size--base);
}
.field__input:focus {
  outline: none;
  border-color: var(--demo-accent);
  box-shadow: var(--ios-focus-ring);
}
/* Label rests centred over an empty field, floats to the top on focus/value. */
.field__label {
/*  position: absolute;*/
/*top: -10px;*/
/*position: relative;*/
  inset-inline-start: calc(var(--wp--preset--spacing--30) + 1px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--demo-muted);
  font-size: var(--wp--preset--font-size--base);
  pointer-events: none;
  transition: inset-block-start var(--ios-duration-fast) var(--ios-ease-out),
              font-size var(--ios-duration-fast) var(--ios-ease-out),
              color var(--ios-duration-fast) var(--ios-ease-out),
              transform var(--ios-duration-fast) var(--ios-ease-out);
}
.field__label,
.field__label {
  font-weight: 700;
  inset-block-start: var(--wp--preset--spacing--20);
  transform: none;
  font-size: var(--wp--preset--font-size--sm);
/*  color: var(--wp--preset--color--gold-deep);*/
}

/* ==================================================================== */
/*  Select cards — single-select as thumb-sized cards (the star)        */
/* ==================================================================== */
.opt-cards { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.opt-cards__legend {
  padding: 0;
  margin-block-end: var(--wp--preset--spacing--20);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--demo-muted);
}
.opt-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--ios-control-height);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  padding-inline-end: calc(var(--wp--preset--spacing--30) + 1.4em);
  border: 1.5px solid var(--demo-line);
  border-radius: var(--ios-radius-md);
  background: var(--demo-surface);
  color: var(--demo-text);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--ios-duration-fast) var(--ios-ease-out),
              background-color var(--ios-duration-fast) var(--ios-ease-out),
              transform var(--ios-duration-fast) var(--ios-ease-out);
}
.opt-card:active { transform: scale(0.98); }
/* Radio stays in the DOM for real selection + keyboard (hidden via .u-visually-hidden
   in markup); the card is the surface. */
.opt-card:has(.opt-card__radio:checked) {
  border-color: var(--demo-accent);
  background: color-mix(in srgb, var(--demo-accent) 8%, var(--demo-surface));
}
.opt-card:has(.opt-card__radio:focus-visible) { box-shadow: var(--ios-focus-ring); }
/* Trailing check on the chosen card. */
.opt-card::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--wp--preset--spacing--30);
  width: 0.55em; height: 0.3em;
  border-inline-start: 2px solid var(--demo-accent-strong);
  border-block-end: 2px solid var(--demo-accent-strong);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity var(--ios-duration-fast) var(--ios-ease-out);
}
.opt-card:has(.opt-card__radio:checked)::after { opacity: 1; }
@media (hover: hover) {
  .opt-card:hover { border-color: color-mix(in srgb, var(--demo-accent) 50%, var(--demo-line)); }
}
/* Compact variant for the hero callout — smaller type, but a full 44px hit area. */
.opt-cards--mini .opt-card { padding-block: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); }

/* ==================================================================== */
/*  Switch — iOS toggle driving a conditional field (real)              */
/* ==================================================================== */
.cond { display: grid; gap: 0; }
/* The checkbox lives at .cond level (hidden via .u-visually-hidden in markup) so
   :checked can reach both the track and the revealed field as siblings; the visible
   label toggles it via for=. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-height: var(--ios-tap-min);
  font-weight: 700;
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  inline-size: var(--ios-switch-w);
  block-size: var(--ios-switch-h);
  border-radius: var(--ios-radius-capsule);
  background: var(--demo-line);
  transition: background-color var(--ios-duration-fast) var(--ios-ease-out);
}
.switch__thumb {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: var(--ios-switch-thumb);
  block-size: var(--ios-switch-thumb);
  border-radius: var(--ios-radius-capsule);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
  transition: transform var(--ios-duration-base) var(--ios-ease-spring);
}
.switch__input:checked ~ .switch .switch__track { background: var(--wp--preset--color--success); }
.switch__input:checked ~ .switch .switch__thumb { transform: translateX(calc(var(--ios-switch-w) - var(--ios-switch-thumb) - 4px)); }
.switch__input:focus-visible ~ .switch .switch__track { box-shadow: var(--ios-focus-ring); }

/* Conditional reveal — collapses to nothing when the switch is off. visibility:hidden
   pulls the collapsed field out of the tab order (no phantom keyboard focus). */
.cond__extra {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--ios-duration-base) var(--ios-ease-out),
              visibility var(--ios-duration-base) var(--ios-ease-out);
}
.switch__input:not(:checked) ~ .cond__extra { grid-template-rows: 0fr; visibility: hidden; }
.cond__extra-inner { overflow: hidden; padding-block-start: var(--wp--preset--spacing--30); }

/* ==================================================================== */
/*  Star rating — display of the tappable star control                  */
/* ==================================================================== */
.stars { display: inline-flex; gap: var(--wp--preset--spacing--20); }
.star {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  background: var(--demo-line);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star--on { background: var(--demo-accent); }

/* ==================================================================== */
/*  Inline calendar — display of the date control                       */
/* ==================================================================== */
.cal { margin: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.cal__head { font-weight: 800; font-size: var(--wp--preset--font-size--base); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--wp--preset--spacing--20); }
.cal__wd { text-align: center; font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--demo-muted); }
.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--ios-radius-capsule);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--demo-text);
}
/* Selected pill keeps ink-on-gold in both schemes — gold is light enough that dark text wins. */
.cal__day--sel { background: var(--demo-accent); color: var(--wp--preset--color--ink); }
.cal__cap { font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--demo-accent-strong); }

/* ==================================================================== */
/*  Signature — display of the sign-off control                         */
/* ==================================================================== */
.sign { margin: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.sign__pad {
  position: relative;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  border: 1px solid var(--demo-line);
  border-radius: var(--ios-radius-md);
  background: var(--demo-surface);
}
/* iOS-style ✕ signing baseline. */
.sign__pad::after {
  content: "\00d7  ";
  position: absolute;
  inset-inline: var(--wp--preset--spacing--30);
  inset-block-end: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--demo-line);
  padding-block-start: 2px;
  color: var(--demo-muted);
  font-size: var(--wp--preset--font-size--sm);
}
.sign__mark { display: block; width: 100%; height: auto; color: var(--demo-text); }
.sign__cap { font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--demo-muted); }

/* ==================================================================== */
/*  Callout — frosted iOS-popover detail tile, floats over a device     */
/* ==================================================================== */
.callout {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30);
  border-radius: var(--ios-radius-lg);
  border: 0.5px solid color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
  background: var(--ios-material-light);
  -webkit-backdrop-filter: blur(var(--ios-material-blur)) saturate(var(--ios-material-saturate));
  backdrop-filter: blur(var(--ios-material-blur)) saturate(var(--ios-material-saturate));
  box-shadow: var(--ios-elevation-2);
}
/* Solid fallback where backdrop-filter is unsupported (keeps text legible). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .callout { background: var(--wp--preset--color--paper); }
}
/* Ink (not muted) so it stays AA regardless of what shows through the blur. */
.callout__label { font-size: var(--wp--preset--font-size--sm); font-weight: 800; color: var(--wp--preset--color--ink); }

/* Hero placement — floats over the lower-left of the hero device. */
.hero__callout {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--wp--preset--spacing--20);
  inset-block-end: var(--wp--preset--spacing--50);
  inline-size: min(62%, 15rem);
}
@media (min-width: 834px) {
  .hero__callout { inset-inline-start: calc(-1 * var(--wp--preset--spacing--40)); inset-block-end: var(--wp--preset--spacing--70, 3.5rem); }
}