/* ======================================================================
   macOS Sequoia system controls
   ----------------------------------------------------------------------
   Mac-native control primitives — segmented pickers, toggle switches,
   refined dropdowns, settings rows, steppers. Modeled on Sequoia's
   System Settings, sized to AppKit metrics (NSSwitch 51x31, NSSegmented
   ~24-28px height, NSPopUpButton 22-28px). All controls preserve form
   field bindings — they wrap inputs rather than replacing them.

   Extracted from wavo-components.css in Phase 7.
   ====================================================================== */

/* ----- Segmented control (NSSegmentedControl) ---------------------- */
/* Inset pill track with sliding thumb. Matches Sequoia's "rounded"
   segmented style used in System Settings sidebars and Finder toolbars. */
.wavo-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--wavo-bg-tint);
  border-radius: var(--wavo-r-control);
  gap: 2px;
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline);
  /* Narrow viewports (320px iPhone SE): a 3-4 segment row of
     white-space:nowrap items overflows the viewport and breaks layout.
     Cap to parent width and allow horizontal scroll inside the pill so
     the page doesn't go wide. The native scrollbar is hidden (FF: thin,
     WebKit: ::-webkit-scrollbar) since the pill is too short to show one. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wavo-segmented::-webkit-scrollbar { display: none; }
.wavo-segmented--block { display: flex; width: 100%; overflow-x: visible; }
.wavo-segmented--block .wavo-segmented__item { flex: 1 1 0; text-align: center; }
.wavo-segmented__item {
  padding: 6px 16px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--wavo-ink-muted);
  font-size: 13px;
  font-weight: var(--wavo-weight-medium);
  font-family: inherit;
  cursor: pointer;
  letter-spacing: var(--wavo-tracking-normal);
  white-space: nowrap;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              color var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wavo-segmented__item:hover { color: var(--wavo-ink); }
.wavo-segmented__item.is-active,
.wavo-segmented__item[aria-selected="true"] {
  background: var(--wavo-bg-elevated);
  color: var(--wavo-ink);
  box-shadow: var(--wavo-depth-1),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
}
.wavo-segmented__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wavo-accent),
              0 0 0 4px rgba(84, 113, 175, 0.18);
}

/* ----- Toggle switch (NSSwitch, Sequoia 51x31) --------------------- */
/* Form-binding contract: underlying <input type="checkbox"> keeps its
   asp-for / name / id. Wrap input + slider in <label class="wavo-toggle">.
   Clicking the slider toggles the input via label-for semantics so the
   form submit value stays intact. */
.wavo-toggle {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  vertical-align: middle;
}
.wavo-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.wavo-toggle__slider {
  position: absolute;
  inset: 0;
  /* AppKit NSSwitch off-track: rgba(120, 120, 128, 0.16) — the same value
     UIKit ships in -systemFill. 0.32 (prior) reads as charcoal grey on
     pastel wallpaper; 0.16 reads as the proper "muted disabled" tone. */
  background: rgba(120, 120, 128, 0.16);
  border-radius: 31px;
  cursor: pointer;
  /* Animate WIDTH change too — Sequoia uses a 200ms ease-snap so the
     thumb appears to "pop" slightly on toggle. We don't actually animate
     width but the spring on transform handles the same visual effect. */
  transition: background 200ms var(--wavo-ease-snap);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.wavo-toggle__slider::before {
  content: "";
  position: absolute;
  height: 27px;
  width: 27px;
  left: 2px;
  top: 2px;
  background: #ffffff;
  border-radius: 50%;
  /* Sequoia NSSwitch thumb shadow stack — 1px crisp shadow + 4px softer
     halo + half-pixel inner ring. The crisp shadow gives it the "pinned
     button" feel; the halo softens onto the track. */
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.10);
  /* Sequoia thumb has a spring-ease on press — overshoot ~3% on toggle. */
  transition: transform 240ms var(--wavo-ease-spring);
}
.wavo-toggle input:checked + .wavo-toggle__slider {
  background: var(--wavo-success);
}
.wavo-toggle input:checked + .wavo-toggle__slider::before {
  transform: translateX(20px);
}
.wavo-toggle input:focus-visible + .wavo-toggle__slider {
  box-shadow: 0 0 0 3px rgba(84, 113, 175, 0.32),
              inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.wavo-toggle input:disabled + .wavo-toggle__slider {
  opacity: 0.4;
  cursor: not-allowed;
}
.wavo-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wavo-s-4);
  cursor: pointer;
}
.wavo-toggle-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.wavo-toggle-row__label {
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink);
  font-weight: var(--wavo-weight-medium);
}
.wavo-toggle-row__desc {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-subtle);
  line-height: var(--wavo-lh-normal);
}

/* ----- Settings row (NSGroupedTableView / System Settings) --------- */
.wavo-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--wavo-hairline);
  gap: var(--wavo-s-4);
}
.wavo-setting-row:last-child { border-bottom: 0; }
.wavo-setting-row__label {
  font-size: 15px;
  color: var(--wavo-ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.wavo-setting-row__desc {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-subtle);
  line-height: var(--wavo-lh-normal);
}
.wavo-setting-row__control {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--wavo-s-2);
}
/* At 320-560px a 51x31 NSSwitch + multi-line label + description can't
   share a single row without crowding. Stack vertically and right-anchor
   the toggle so the user's tap target stays on the trailing edge. The
   560px breakpoint matches the rest of the Sequoia mobile system
   (wavo-window chrome, navbar brand, accordion padding). */
@media (max-width: 560px) {
  .wavo-setting-row {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--wavo-s-3) var(--wavo-s-4);
  }
  .wavo-setting-row__control { width: 100%; }
  .wavo-setting-row__control .wavo-toggle { margin-left: auto; }
}

/* ----- Stepper (NSStepper, value pill) ----------------------------- */
.wavo-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  background: var(--wavo-bg-tint);
  border-radius: var(--wavo-r-pill);
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline);
  overflow: hidden;
}
.wavo-stepper__btn {
  width: 36px;
  background: transparent;
  border: 0;
  color: var(--wavo-ink);
  font-size: 16px;
  font-weight: var(--wavo-weight-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wavo-stepper__btn:hover { background: rgba(23, 41, 76, 0.06); }
.wavo-stepper__btn:active { background: rgba(23, 41, 76, 0.10); }
.wavo-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}
.wavo-stepper__btn:focus-visible {
  outline: none;
  background: rgba(84, 113, 175, 0.14);
}
.wavo-stepper__value {
  min-width: 56px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--wavo-fs-body-sm);
  font-weight: var(--wavo-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--wavo-ink);
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.wavo-stepper__value::-webkit-outer-spin-button,
.wavo-stepper__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ----- Refined select (NSPopUpButton popover) ---------------------- */
/* select.wavo-field__control already styled for forms. The popover
   variant is the compact inline form for filter bars and toolbars. */
.wavo-select-pop {
  position: relative;
  display: inline-block;
}
select.wavo-select-pop__control,
.wavo-select-pop__control {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0 36px 0 14px;
  background: var(--wavo-bg-tint);
  border: 0;
  border-radius: var(--wavo-r-control);
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline);
  color: var(--wavo-ink);
  font-size: 13px;
  font-weight: var(--wavo-weight-medium);
  font-family: inherit;
  letter-spacing: var(--wavo-tracking-normal);
  cursor: pointer;
  outline: none;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'><path d='M2 4L5 1L8 4' stroke='%2317294c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M2 8L5 11L8 8' stroke='%2317294c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.wavo-select-pop__control:hover { background-color: var(--wavo-bg-tint-deep); }
.wavo-select-pop__control:focus-visible {
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline),
              0 0 0 2px var(--wavo-accent),
              0 0 0 4px rgba(84, 113, 175, 0.18);
}

.wavo-field--popover select.wavo-field__control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'><path d='M2 4L5 1L8 4' stroke='%2317294c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M2 8L5 11L8 8' stroke='%2317294c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}