/* The Caply kit: Caply's own components. They follow the public rules of
   Apple's Human Interface Guidelines (a 44pt minimum target, the control
   sizes 28 / 32 / 44 / 52, capsules for buttons that stand alone, the system
   colours in dark mode, glass only for controls floating over content), and
   every measure, radius and material here is drawn for Caply. Nothing is
   copied from Apple's design files. Listed in docs/APPLE-SPECS.md. Dark
   appearance only: Caply lives on a film. */

:root {
  /* system colours and label levels, dark mode (public HIG and UIKit values) */
  --k-bg: #000;
  --k-bg-2: rgb(28, 28, 30);
  --k-bg-3: rgb(44, 44, 46);
  --k-bg-4: rgb(58, 58, 60);
  --k-label: #fff;
  --k-label-2: rgba(235, 235, 245, 0.6);
  --k-label-3: rgba(235, 235, 245, 0.3);
  --k-label-4: rgba(235, 235, 245, 0.16);
  --k-fill: rgba(120, 120, 128, 0.36);
  --k-fill-2: rgba(120, 120, 128, 0.32);
  --k-fill-3: rgba(118, 118, 128, 0.24);
  --k-fill-4: rgba(118, 118, 128, 0.18);
  --k-sep: rgba(255, 255, 255, 0.12);
  --k-sep-opaque: rgb(56, 56, 58);
  --k-blue: rgb(0, 145, 255);
  --k-green: rgb(48, 209, 88);
  --k-orange: rgb(255, 146, 48);
  --k-red: rgb(255, 66, 69);
  --k-gray: rgb(142, 142, 147);
  --k-gray-2: rgb(99, 99, 102);
  --k-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* glass over a film: little tint, a lit top edge, a dark rim */
  --k-glass: rgba(255, 255, 255, 0.1);
  --k-glass-filter: blur(22px) saturate(180%);
  --k-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ── Button · 32 / 44 / 52 tall, capsule ────────────────────────────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--k-blue);
  font: 600 15px/20px var(--k-font);
  letter-spacing: -0.13px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease-out, filter 0.15s ease, opacity 0.15s ease;
}
.k-btn.is-small { height: 32px; padding: 0 12px; }
.k-btn.is-large { height: 52px; padding: 0 24px; font-size: 17px; line-height: 22px; letter-spacing: -0.22px; }
/* three styles: filled, glass, plain */
.k-btn.is-prominent { background: var(--k-blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.k-btn.is-glass { background: var(--k-glass); color: var(--k-label); -webkit-backdrop-filter: var(--k-glass-filter); backdrop-filter: var(--k-glass-filter); box-shadow: var(--k-glass-edge); }
.k-btn.is-destructive { color: var(--k-red); }
.k-btn:hover { filter: brightness(1.12); }
.k-btn:active { transform: scale(0.96); filter: brightness(0.92); }   /* a press state, always */
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* ── Toggle · 60 x 30 ───────────────────────────────────────────────────── */
.k-toggle { position: relative; flex: none; width: 60px; height: 30px; border: 0; padding: 0; border-radius: 999px; background: var(--k-fill-2); cursor: pointer; transition: background-color 0.25s ease; }
.k-toggle::after {                 /* knob 36 x 26 */
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 36px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.32s cubic-bezier(0.3, 1.25, 0.45, 1), width 0.2s ease;
}
.k-toggle[aria-checked="true"] { background: var(--k-green); }
.k-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.k-toggle:active::after { width: 40px; }
.k-toggle[aria-checked="true"]:active::after { transform: translateX(16px); }

/* ── Segmented control · 32 or 44 tall ──────────────────────────────────── */
.k-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 32px; padding: 2px; border-radius: 999px; background: var(--k-fill-3); }
.k-seg.is-large { height: 44px; padding: 3px; }
.k-seg > button { position: relative; border: 0; padding: 0 12px; border-radius: 999px; background: none; color: var(--k-label); font: 500 13px/18px var(--k-font); letter-spacing: -0.04px; cursor: pointer; }
.k-seg.is-large > button { font-size: 15px; line-height: 20px; letter-spacing: -0.13px; }
.k-seg > button[aria-pressed="true"] { font-weight: 600; }
.k-seg-thumb {                     /* the selected segment, sliding */
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  width: calc((100% - 4px) / var(--n, 2));
  border-radius: 999px;
  background: var(--k-gray-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.36s cubic-bezier(0.3, 1.25, 0.45, 1);
}
.k-seg.is-large .k-seg-thumb { top: 3px; left: 3px; height: calc(100% - 6px); width: calc((100% - 6px) / var(--n, 2)); }

/* ── Grouped list · rows 48, large rows 64 ──────────────────────────────── */
.k-list { border-radius: 24px; background: var(--k-bg-2); overflow: clip; }
.k-list.is-elevated { background: var(--k-bg-3); }
.k-row {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--k-label);
  font: 400 17px/22px var(--k-font);
  letter-spacing: -0.22px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.k-row.is-large { min-height: 64px; }
.k-row + .k-row::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--k-sep); transform: scaleY(0.5); transform-origin: top; }
button.k-row { cursor: pointer; }
button.k-row:active { background: var(--k-fill-4); }
.k-row em { font-style: normal; color: var(--k-label-2); display: inline-flex; align-items: center; gap: 6px; }
.k-row small { display: block; color: var(--k-label-2); font-size: 15px; line-height: 20px; letter-spacing: -0.13px; }
.k-chevron { width: 8px; height: 13px; color: var(--k-label-3); }
.k-check { width: 15px; height: 14px; color: var(--k-blue); }
.k-list-head { min-height: 44px; padding: 12px 16px 8px; color: var(--k-label); font: 600 20px/25px var(--k-font); letter-spacing: -0.33px; }
.k-list-foot { min-height: 28px; padding: 8px 16px 0; color: var(--k-label-2); font: 400 13px/18px var(--k-font); letter-spacing: -0.04px; }

/* ── Text field · 48 tall ───────────────────────────────────────────────── */
.k-field { width: 100%; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--k-fill-3); color: var(--k-label); font: 400 17px/22px var(--k-font); letter-spacing: -0.22px; caret-color: var(--k-blue); }
.k-field::placeholder { color: var(--k-label-3); }
.k-field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--k-blue); }

/* ── Alert · 296 wide, buttons 44 tall ──────────────────────────────────── */
.k-alert { width: 296px; padding: 24px 20px 20px; border-radius: 32px; background: rgba(44, 44, 46, 0.72); -webkit-backdrop-filter: var(--k-glass-filter); backdrop-filter: var(--k-glass-filter); box-shadow: var(--k-glass-edge); color: var(--k-label); }
.k-alert h4 { font: 600 17px/22px var(--k-font); letter-spacing: -0.22px; }
.k-alert p { margin-top: 4px; color: var(--k-label-2); font: 400 15px/20px var(--k-font); letter-spacing: -0.13px; }
.k-alert-actions { margin-top: 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.k-alert-actions .k-btn { height: 44px; font-size: 17px; line-height: 22px; letter-spacing: -0.22px; }
.k-alert-actions .k-btn:not(.is-prominent) { background: var(--k-fill-3); color: var(--k-label); }

/* ── Menu · 248 wide, items 44 tall ─────────────────────────────────────── */
.k-menu { width: 248px; padding: 8px; border-radius: 30px; background: rgba(44, 44, 46, 0.72); -webkit-backdrop-filter: var(--k-glass-filter); backdrop-filter: var(--k-glass-filter); box-shadow: var(--k-glass-edge); }
.k-menu > button { width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: none; color: var(--k-label); font: 400 17px/22px var(--k-font); letter-spacing: -0.22px; text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.k-menu > button:hover { background: var(--k-fill-4); }
.k-menu > button.is-destructive { color: var(--k-red); }

/* ── Slider · knob 36 x 26 ──────────────────────────────────────────────── */
.k-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer; }
.k-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(var(--k-blue) 0 0) 0 / var(--v, 50%) 100% no-repeat, var(--k-fill-2); }
.k-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 26px; margin-top: -10px; border-radius: 999px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1); }

/* ── Banner · 296 x 60 ──────────────────────────────────────────────────── */
.k-banner { width: 296px; min-height: 60px; padding: 10px 16px; border-radius: 30px; display: grid; align-content: center; background: var(--k-glass); -webkit-backdrop-filter: var(--k-glass-filter); backdrop-filter: var(--k-glass-filter); box-shadow: var(--k-glass-edge); color: var(--k-label); }
.k-banner b { font: 600 15px/20px var(--k-font); letter-spacing: -0.13px; }
.k-banner span { color: var(--k-label-2); font: 400 15px/20px var(--k-font); letter-spacing: -0.13px; }

@media (prefers-reduced-motion: reduce) { .k-btn, .k-toggle::after, .k-seg-thumb { transition-duration: 0.01s; } }
@media (prefers-reduced-transparency: reduce) { .k-btn.is-glass, .k-alert, .k-menu, .k-banner { background: var(--k-bg-3); -webkit-backdrop-filter: none; backdrop-filter: none; } }