/* screen-parameters.css — “Apple” polish for the Settings screen.
   Presentation layer ONLY: no logic/form changes.

   Reuses the KIT (design foundation):
   tokens --ease, --ease-spring, --dur-2/--dur-3, --shadow-sm/md, --r-pill and the
   components .segmented / .btn-pill. This file REDEFINES NEITHER — it
   uses them with a fallback (var(--token, fallback)) to work correctly before the merge
   of the KIT (classes not rendered = silent fallback, never broken).

   Scope: everything is scoped under `body:has(.param-sections)` → applies ONLY to
   Settings pages (which include partials/parametres-tabs.ejs). Loaded
   globally via head.ejs, inactive elsewhere. */

/* ─────────────────────────────────────────────────────────────────────────
   1. Cards: COLD shadows + Apple grain (« inset grouped » grouping)
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .app-card {
  border-radius: 16px;
  box-shadow:
    var(--shadow-sm, 0 1px 2px rgba(15, 37, 68, 0.05)),
    0 8px 28px -16px rgba(15, 37, 68, 0.22);
  transition: box-shadow var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@media (hover: hover) {
  body:has(.param-sections) .app-card:hover {
    box-shadow:
      var(--shadow-md, 0 2px 6px rgba(15, 37, 68, 0.07)),
      0 18px 44px -20px rgba(15, 37, 68, 0.28);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. iOS “inset grouped” list: settings rows with hairline separators.
   Apply via <div class="param-list"> containing .param-row elements.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--separator, rgba(15, 37, 68, 0.12));
  border-radius: 14px;
  overflow: hidden;
  background: var(--lg-surface-soft, var(--bg-secondary, #fff));
}
body:has(.param-sections) .param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  margin: 0;
  cursor: pointer;
  transition: background var(--dur-1, 0.14s) var(--ease, ease);
}
body:has(.param-sections) .param-row + .param-row {
  border-top: 1px solid var(--separator, rgba(15, 37, 68, 0.10));
}
@media (hover: hover) {
  body:has(.param-sections) .param-row:hover {
    background: var(--fill-quaternary, rgba(94, 127, 168, 0.06));
  }
}
body:has(.param-sections) .param-row-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
body:has(.param-sections) .param-row-text strong { font-weight: 600; letter-spacing: -0.005em; }
body:has(.param-sections) .param-row-text small,
body:has(.param-sections) .param-row-text .app-muted {
  font-size: 0.78rem;
  color: var(--label-secondary, var(--slate));
  line-height: 1.35;
}
body:has(.param-sections) .param-row-control { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   3. iOS switch — styles an <input type="checkbox" class="ios-switch">.
   Pure CSS, no JS: the native checkbox remains the source of truth (click, keyboard,
   submit). We hide the native rendering and draw the track + thumb.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) input.ios-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 30px;
  margin: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--fill-tertiary, rgba(15, 37, 68, 0.16));
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
body:has(.param-sections) input.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 37, 68, 0.35), 0 0 0 0.5px rgba(15, 37, 68, 0.08);
  transition: transform var(--dur-2, 0.22s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
body:has(.param-sections) input.ios-switch:checked {
  background: var(--system-blue, #2563eb);
}
body:has(.param-sections) input.ios-switch:checked::after {
  transform: translateX(20px);
}
body:has(.param-sections) input.ios-switch:focus-visible {
  outline: 2px solid var(--accent, #5e7fa8);
  outline-offset: 3px;
}
body:has(.param-sections) input.ios-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:root[data-theme="dark"] body:has(.param-sections) input.ios-switch {
  background: rgba(255, 255, 255, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  body:has(.param-sections) input.ios-switch,
  body:has(.param-sections) input.ios-switch::after { transition: none; }
}

/* Switch row built on a <label>: aligns the label + switch. */
body:has(.param-sections) label.param-row { font-weight: 400; }

/* ─────────────────────────────────────────────────────────────────────────
   4. Settings tabs (param-tab): pill finish, smooth transitions.
   We do not redefine .btn-pill — we only align the animation/feedback.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-tab {
  transition: color var(--dur-1, 0.14s) var(--ease, ease),
              background var(--dur-1, 0.14s) var(--ease, ease),
              box-shadow var(--dur-2, 0.22s) var(--ease, ease);
}
body:has(.param-sections) .param-tab.is-active {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 37, 68, 0.06));
}
body:has(.param-sections) .param-tab:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  body:has(.param-sections) .param-tab:active { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Segmented control (reuses the KIT .segmented + public/js/segmented.js).
   Light visual fallback if the KIT is not loaded yet (radios styled as a
   pill), so choice groups remain presentable before the merge.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
body:has(.param-sections) .param-choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--separator, rgba(15, 37, 68, 0.14));
  font-size: 0.86rem;
  cursor: pointer;
  transition: background var(--dur-1, 0.14s) var(--ease, ease),
              border-color var(--dur-1, 0.14s) var(--ease, ease);
}
body:has(.param-sections) .param-choices label:has(input:checked) {
  background: var(--accent-soft, rgba(94, 127, 168, 0.16));
  border-color: var(--accent, #5e7fa8);
  font-weight: 600;
}
body:has(.param-sections) .param-choices input[type="radio"] { accent-color: var(--accent, #5e7fa8); }