/* ==========================================================================
   iOS Design Kit v1.1
   Shared skill: ~/workspace/skills/ios-ui/
   Apple's iOS design language expressed as dependency-free CSS.

   Usage: <link rel="stylesheet" href="PATH/TO/ios-kit.css">
   - Phone-first: content column caps at 430px and centers on larger screens.
   - Light + dark mode via prefers-color-scheme. No JavaScript required.
   - Font stack renders San Francisco natively on iPhone/iPad/Mac.
   - Tokens mirror Apple's semantic color names from the Human Interface
     Guidelines (systemBlue, label, secondaryLabel, systemBackground, etc.).
   - Motion: iOS-style timing tokens (--ios-ease-out, --ios-ease-spring,
     --ios-ease-drawer); animations stay under 300ms and only touch
     transform/opacity so they stay composited at 60fps.
   - Components: nav bar, tab bar, grouped lists, toggles, segmented control,
     buttons, search, cards, badges, text fields, bottom sheet, icons.
   ========================================================================== */

/* ---------- Design tokens (light mode) ---------- */
:root {
  /* System accent colors (Apple HIG values) */
  --ios-blue:   #007AFF;
  --ios-green:  #34C759;
  --ios-indigo: #5856D6;
  --ios-orange: #FF9500;
  --ios-pink:   #FF2D55;
  --ios-purple: #AF52DE;
  --ios-red:    #FF3B30;
  --ios-teal:   #5AC8FA;
  --ios-yellow: #FFCC00;

  /* Grays */
  --ios-gray:  #8E8E93;
  --ios-gray2: #AEAEB2;
  --ios-gray3: #C7C7CC;
  --ios-gray4: #D1D1D6;
  --ios-gray5: #E5E5EA;
  --ios-gray6: #F2F2F7;

  /* Labels */
  --ios-label:   #000000;
  --ios-label-2: rgba(60, 60, 67, 0.6);
  --ios-label-3: rgba(60, 60, 67, 0.3);
  --ios-label-4: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --ios-bg:          #FFFFFF;
  --ios-bg-2:        #F2F2F7;
  --ios-bg-3:        #FFFFFF;
  --ios-grouped-bg:  #F2F2F7;
  --ios-card-bg:     #FFFFFF;

  /* Separators + fills */
  --ios-separator:        rgba(60, 60, 67, 0.29);
  --ios-separator-opaque: #C6C6C8;
  --ios-fill:             rgba(120, 120, 128, 0.2);
  --ios-fill-2:           rgba(120, 120, 128, 0.16);
  --ios-search-bg:        rgba(120, 120, 128, 0.12);

  /* Bars (translucent) */
  --ios-bar-bg: rgba(247, 247, 248, 0.82);

  /* Component specifics */
  --ios-toggle-off:  #E9E9EA;
  --ios-seg-thumb:    #FFFFFF;
  --ios-tab-inactive: #8E8E93;
  --ios-card-shadow:  0 1px 4px rgba(0, 0, 0, 0.06);

  /* Shape + spacing */
  --ios-radius-sm: 7px;
  --ios-radius-md: 10px;
  --ios-radius-lg: 16px;

  /* Motion (iOS-style timing; keep durations under 300ms, animate transform/opacity only) */
  --ios-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* snappy UI ease-out */
  --ios-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* springy, slight overshoot */
  --ios-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* sheet/drawer slide, iOS-like */
}

/* ---------- Design tokens (dark mode) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ios-blue:   #0A84FF;
    --ios-green:  #30D158;
    --ios-indigo: #5E5CE6;
    --ios-orange: #FF9F0A;
    --ios-pink:   #FF375F;
    --ios-purple: #BF5AF2;
    --ios-red:    #FF453A;
    --ios-teal:   #64D2FF;
    --ios-yellow: #FFD60A;

    --ios-gray:  #8E8E93;
    --ios-gray2: #636366;
    --ios-gray3: #48484A;
    --ios-gray4: #3A3A3C;
    --ios-gray5: #2C2C2E;
    --ios-gray6: #1C1C1E;

    --ios-label:   #FFFFFF;
    --ios-label-2: rgba(235, 235, 245, 0.6);
    --ios-label-3: rgba(235, 235, 245, 0.3);
    --ios-label-4: rgba(235, 235, 245, 0.18);

    --ios-bg:          #000000;
    --ios-bg-2:        #1C1C1E;
    --ios-bg-3:        #2C2C2E;
    --ios-grouped-bg:  #000000;
    --ios-card-bg:     #1C1C1E;

    --ios-separator:        rgba(84, 84, 88, 0.6);
    --ios-separator-opaque: #38383A;
    --ios-fill:             rgba(120, 120, 128, 0.36);
    --ios-fill-2:           rgba(120, 120, 128, 0.32);
    --ios-search-bg:        rgba(120, 120, 128, 0.24);

    --ios-bar-bg: rgba(24, 24, 26, 0.82);

    --ios-toggle-off:  #39393D;
    --ios-seg-thumb:    #636366;
    --ios-tab-inactive: #8E8E93;
    --ios-card-shadow:  none;
  }
}

/* ---------- Base ---------- */
.ios-screen {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ios-grouped-bg);
  color: var(--ios-label);
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  font-size: 17px;
  line-height: 1.35;
}
.ios-screen.has-tabbar { padding-bottom: calc(83px + env(safe-area-inset-bottom, 0px)); }
.ios-screen * { box-sizing: border-box; }
.ios-screen a { color: var(--ios-blue); }

@media (prefers-reduced-motion: reduce) {
  .ios-screen *, .ios-screen *::before, .ios-screen *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Typography (Apple text styles) ---------- */
.ios-large-title { font-size: 34px; font-weight: 700; letter-spacing: 0.37px; line-height: 1.15; }
.ios-title-1     { font-size: 28px; font-weight: 700; letter-spacing: 0.36px; line-height: 1.2; }
.ios-title-2     { font-size: 22px; font-weight: 700; letter-spacing: 0.35px; line-height: 1.25; }
.ios-title-3     { font-size: 20px; font-weight: 600; letter-spacing: 0.38px; line-height: 1.25; }
.ios-headline    { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; line-height: 1.3; }
.ios-body        { font-size: 17px; font-weight: 400; letter-spacing: -0.41px; line-height: 1.35; }
.ios-callout     { font-size: 16px; font-weight: 400; letter-spacing: -0.32px; line-height: 1.35; }
.ios-subhead     { font-size: 15px; font-weight: 400; letter-spacing: -0.24px; line-height: 1.35; }
.ios-footnote    { font-size: 13px; font-weight: 400; letter-spacing: -0.08px; line-height: 1.4; color: var(--ios-label-2); }
.ios-caption-1   { font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--ios-label-2); }
.ios-caption-2   { font-size: 11px; font-weight: 400; letter-spacing: 0.06px; line-height: 1.35; color: var(--ios-label-2); }

/* ---------- Navigation bar ---------- */
.ios-navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ios-bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--ios-separator);
  padding-top: env(safe-area-inset-top, 0px);
}
.ios-navbar-inner {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.ios-navbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; }
.ios-navbar .ios-btn { font-size: 17px; }

/* Large-title block (sits in content flow, like Settings) */
.ios-largetitle-block { padding: 8px 16px 10px; }
.ios-largetitle-block .ios-large-title { margin: 0; }

/* ---------- Tab bar ---------- */
.ios-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 50;
  background: var(--ios-bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--ios-separator);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ios-tabbar-inner { display: flex; height: 49px; }
.ios-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--ios-tab-inactive); text-decoration: none;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12px;
  min-height: 49px;
  transition: color 0.2s ease;
}
.ios-tab svg { width: 25px; height: 25px; }
.ios-tab.is-active { color: var(--ios-blue); }

/* ---------- Inset grouped list ---------- */
.ios-section { margin: 0 0 8px; }
.ios-section-title {
  font-size: 13px; font-weight: 400; color: var(--ios-label-2);
  text-transform: uppercase; letter-spacing: 0.06px;
  padding: 22px 32px 7px; margin: 0;
}
.ios-section-footer {
  font-size: 13px; color: var(--ios-label-2); letter-spacing: -0.08px;
  padding: 7px 32px 0; margin: 0; line-height: 1.4;
}
.ios-group {
  background: var(--ios-card-bg);
  border-radius: var(--ios-radius-md);
  margin: 0 16px;
  overflow: hidden;
  box-shadow: var(--ios-card-shadow);
}
.ios-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 9px 16px 9px 16px;
  color: var(--ios-label); text-decoration: none;
  transition: background 0.15s ease;
}
.ios-row:active { background: var(--ios-fill-2); }
.ios-row:not(:first-child)::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--ios-sep-inset, 16px); height: 0.5px; background: var(--ios-separator);
}
.ios-group.has-icons { --ios-sep-inset: 57px; }
.ios-row-main { flex: 1; min-width: 0; }
.ios-row-title { font-size: 17px; letter-spacing: -0.41px; }
.ios-row-detail { font-size: 17px; color: var(--ios-label-2); letter-spacing: -0.41px; white-space: nowrap; }
.ios-row-chevron { color: var(--ios-gray3); flex: none; }
.ios-row-chevron svg { width: 13px; height: 20px; display: block; }

/* Colored rounded-square row icons (Settings style) */
.ios-rowicon {
  width: 29px; height: 29px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.ios-rowicon svg { width: 19px; height: 19px; }
.ios-rowicon.bg-blue   { background: var(--ios-blue); }
.ios-rowicon.bg-green  { background: var(--ios-green); }
.ios-rowicon.bg-orange { background: var(--ios-orange); }
.ios-rowicon.bg-red    { background: var(--ios-red); }
.ios-rowicon.bg-purple { background: var(--ios-purple); }
.ios-rowicon.bg-pink   { background: var(--ios-pink); }
.ios-rowicon.bg-teal   { background: var(--ios-teal); }
.ios-rowicon.bg-indigo { background: var(--ios-indigo); }
.ios-rowicon.bg-gray   { background: var(--ios-gray); }

/* ---------- Toggle switch ---------- */
.ios-toggle { position: relative; width: 51px; height: 31px; flex: none; }
.ios-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.ios-toggle .track {
  position: absolute; inset: 0; border-radius: 16px;
  background: var(--ios-toggle-off); transition: background 0.25s ease;
}
.ios-toggle .knob {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; transition: transform 0.25s var(--ios-ease-spring);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16), 0 3px 1px rgba(0,0,0,0.1);
}
.ios-toggle input:checked ~ .track { background: var(--ios-green); }
.ios-toggle input:checked ~ .knob { transform: translateX(20px); }

/* ---------- Segmented control ---------- */
.ios-segmented {
  display: flex; background: var(--ios-fill-2); border-radius: 9px; padding: 2px; margin: 0 16px;
}
.ios-segmented button {
  flex: 1; border: 0; background: transparent; color: var(--ios-label);
  font-size: 13px; font-weight: 500; letter-spacing: -0.08px;
  padding: 7px 0; border-radius: 7px; cursor: pointer;
  font-family: inherit;
  transition: background 0.2s var(--ios-ease-out), box-shadow 0.2s var(--ios-ease-out);
}
.ios-segmented button.is-active {
  background: var(--ios-seg-thumb); font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.06);
}

/* ---------- Buttons ---------- */
.ios-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ios-blue); font-size: 17px; font-weight: 400; letter-spacing: -0.41px;
  font-family: inherit; padding: 0; text-decoration: none;
}
.ios-btn:active { opacity: 0.55; }
.ios-btn-filled {
  display: block; width: 100%;
  background: var(--ios-blue); color: #fff !important;
  font-size: 17px; font-weight: 600; letter-spacing: -0.41px;
  border-radius: 12px; padding: 13px 16px; text-align: center;
  font-family: inherit; border: 0; cursor: pointer; text-decoration: none;
  transition: transform 0.15s var(--ios-ease-out), opacity 0.15s ease-out;
}
.ios-btn-filled:active { transform: scale(0.98); opacity: 0.85; }
.ios-btn-filled.bg-green  { background: var(--ios-green); }
.ios-btn-filled.bg-red    { background: var(--ios-red); }
.ios-btn-filled.bg-gray   { background: var(--ios-gray5); color: var(--ios-blue) !important; }
.ios-btn-destructive { color: var(--ios-red); }
.ios-btn-row { display: block; width: 100%; text-align: center; padding: 12px; font-size: 17px; }

/* ---------- Search bar ---------- */
.ios-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--ios-search-bg); border-radius: 10px;
  padding: 8px 10px; margin: 8px 16px 4px; color: var(--ios-label-2);
}
.ios-search svg { width: 17px; height: 17px; flex: none; }
.ios-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 17px; letter-spacing: -0.41px; color: var(--ios-label); font-family: inherit;
  min-width: 0;
}
.ios-search input::placeholder { color: var(--ios-label-3); }

/* ---------- Cards ---------- */
.ios-card {
  background: var(--ios-card-bg); border-radius: var(--ios-radius-lg);
  padding: 16px; margin: 0 16px 12px; box-shadow: var(--ios-card-shadow);
}
.ios-card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; margin: 0 0 4px; }
.ios-card-text  { font-size: 15px; color: var(--ios-label-2); letter-spacing: -0.24px; margin: 0; }

/* ---------- Badge ---------- */
.ios-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--ios-red); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1; flex: none;
}

/* ---------- Icons ---------- */
.ios-icon { width: 24px; height: 24px; flex: none; vertical-align: -4px; }
.ios-icon.sm { width: 17px; height: 17px; }

/* ---------- Form rows ---------- */
.ios-textfield {
  width: 100%; border: 0; background: transparent; outline: none;
  font-size: 17px; letter-spacing: -0.41px; color: var(--ios-label); font-family: inherit;
  padding: 2px 0; text-align: right;
}
.ios-textfield::placeholder { color: var(--ios-label-3); }
.ios-textfield.left { text-align: left; }

/* ---------- Bottom sheet (and action-sheet style panels) ---------- */
.ios-sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.ios-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 95;
  width: 100%; max-width: 430px;
  max-height: 85dvh; overflow: auto;
  background: var(--ios-card-bg);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(102%);
  transition: transform 0.4s var(--ios-ease-drawer);
}
.ios-sheet.open { transform: translateX(-50%) translateY(0); }
.ios-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.ios-sheet-grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--ios-gray4); margin: 4px auto 12px;
}
.ios-sheet-title {
  font-size: 20px; font-weight: 600; letter-spacing: 0.38px;
  text-align: center; margin: 0 0 12px;
}

/* ---------- Misc ---------- */
.ios-divider { height: 0.5px; background: var(--ios-separator); margin: 0 16px; }
.ios-stack { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.ios-pad { padding: 0 16px; }