/* ═══════════════════════════════════════════════════════
   OBCP — iOS Design System
   Matches Apple Human Interface Guidelines exactly.
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* ── System Blue (primary tint) ── */
  --ios-blue:        #007AFF;
  --ios-blue-bg:     rgba(0,122,255,0.10);
  --ios-blue-tint:   rgba(0,122,255,0.12);

  /* ── System Colors ── */
  --ios-green:   #34C759;
  --ios-red:     #FF3B30;
  --ios-orange:  #FF9500;
  --ios-yellow:  #FFCC00;
  --ios-purple:  #AF52DE;
  --ios-pink:    #FF2D55;
  --ios-teal:    #5AC8FA;
  --ios-indigo:  #5856D6;

  /* ── Backgrounds ── */
  --ios-bg:       #F2F2F7;   /* systemGroupedBackground */
  --ios-surface:  #FFFFFF;   /* secondarySystemGroupedBackground */
  --ios-surface3: #F2F2F7;   /* tertiarySystemGroupedBackground */

  /* ── Labels ── */
  --ios-label:   #000000;
  --ios-label2:  rgba(60,60,67,0.60);
  --ios-label3:  rgba(60,60,67,0.30);
  --ios-label4:  rgba(60,60,67,0.18);

  /* ── Separators ── */
  --ios-sep:       rgba(60,60,67,0.36);
  --ios-sep-light: rgba(60,60,67,0.12);

  /* ── Fills ── */
  --ios-fill:  rgba(120,120,128,0.20);
  --ios-fill2: rgba(120,120,128,0.16);
  --ios-fill3: rgba(118,118,128,0.12);
  --ios-fill4: rgba(116,116,128,0.08);

  /* ── Shape ── */
  --ios-radius:    10px;
  --ios-radius-lg: 16px;

  /* ── Shadow ── */
  --ios-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
}

/* ── Base ── */
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ios-bg);
  color: var(--ios-label);
  min-height: 100vh;
}
a { color: var(--ios-blue); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* ── Page scaffold ── */
.ios-page {
  padding-top: calc(44px + max(0px, env(safe-area-inset-top)));
  padding-bottom: calc(49px + max(0px, env(safe-area-inset-bottom)) + 20px);
  min-height: 100vh;
}
.ios-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

/* ── Navigation Bar ── */
.ios-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: calc(44px + env(safe-area-inset-top));
  background: rgba(242,242,247,0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0,0,0,0.20);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px calc(8px + 0px);
  padding-top: env(safe-area-inset-top);
}
.ios-navbar-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.41px;
  color: var(--ios-label);
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ios-back-btn {
  display: flex; align-items: center; gap: 3px;
  color: var(--ios-blue);
  font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.41px;
  background: none; border: none; cursor: pointer;
  padding: 8px 8px; min-height: 44px; min-width: 44px;
}
.ios-back-btn i { font-size: 1.1rem; }
.ios-back-btn:active { opacity: 0.5; }
.ios-nav-action {
  color: var(--ios-blue);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.41px;
  background: none; border: none; cursor: pointer;
  padding: 8px 8px; min-height: 44px;
}
.ios-nav-action:active { opacity: 0.5; }

/* ── Tab Bar ── */
.ios-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  background: rgba(249,249,249,0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid rgba(0,0,0,0.20);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ios-tab-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 4px 4px;
  background: none; border: none; cursor: pointer;
  color: rgba(60,60,67,0.50);
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12px;
  min-height: 49px;
  transition: color 0.15s;
}
.ios-tab-item i { font-size: 1.5rem; transition: color 0.15s; }
.ios-tab-item.active { color: var(--ios-blue); }
.ios-tab-item.active i { color: var(--ios-blue); }
.ios-tab-item:active { opacity: 0.6; }

/* ── Grouped List (Settings style) ── */
.ios-section { margin-bottom: 36px; }
.ios-section-header {
  font-size: 0.8125rem; font-weight: 400;
  color: var(--ios-label2); letter-spacing: -0.08px;
  text-transform: uppercase;
  padding: 0 16px; margin-bottom: 8px;
}
.ios-section-footer {
  font-size: 0.8125rem; font-weight: 400;
  color: var(--ios-label2); letter-spacing: -0.08px;
  padding: 8px 16px 0; line-height: 1.46;
}
.ios-list {
  background: var(--ios-surface);
  border-radius: var(--ios-radius);
  overflow: hidden;
}
.ios-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--ios-surface);
  min-height: 44px;
  position: relative;
}
.ios-row + .ios-row::before {
  content: '';
  position: absolute;
  top: 0; left: 56px; right: 0;
  height: 0.5px;
  background: var(--ios-sep-light);
}
.ios-row-label {
  flex: 1;
  font-size: 1.0625rem; font-weight: 400;
  letter-spacing: -0.41px; color: var(--ios-label);
}
.ios-row-value {
  font-size: 1.0625rem; font-weight: 400;
  letter-spacing: -0.41px; color: var(--ios-label2);
}
.ios-row-chevron { color: var(--ios-label3); font-size: 0.875rem; margin-left: 4px; }
.ios-row-tappable {
  cursor: pointer; display: flex;
  text-decoration: none; color: inherit;
}
.ios-row-tappable:active { background: rgba(0,0,0,0.06) !important; }
.ios-row-destructive .ios-row-label { color: var(--ios-red) !important; }

/* ── Icon badge (settings-style colored square icon) ── */
.ios-icon {
  width: 29px; height: 29px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; color: #fff; flex-shrink: 0;
}

/* ── Text Fields ── */
.ios-field {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--ios-surface);
  min-height: 44px;
  position: relative;
}
.ios-field + .ios-field::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 0;
  height: 0.5px;
  background: var(--ios-sep-light);
}
.ios-field-label {
  font-size: 1.0625rem; font-weight: 400;
  color: var(--ios-label); white-space: nowrap;
  letter-spacing: -0.41px; flex-shrink: 0; min-width: 90px;
}
.ios-field-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.41px;
  color: var(--ios-label); min-width: 0;
  text-align: right;
}
.ios-field-input::placeholder { color: var(--ios-label3); }
.ios-field-textarea { align-items: flex-start; padding-top: 13px; padding-bottom: 13px; }
.ios-field-textarea .ios-field-input { text-align: left; resize: none; line-height: 1.47; }
.ios-field-full .ios-field-input { text-align: left; }

/* ── Search Bar ── */
.ios-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--ios-fill3);
  border-radius: 10px; padding: 7px 10px;
  margin: 8px 16px 0;
}
.ios-search-bar i { color: var(--ios-label3); font-size: 0.875rem; }
.ios-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1.0625rem; letter-spacing: -0.41px; color: var(--ios-label);
}
.ios-search-input::placeholder { color: var(--ios-label3); }

/* ── Buttons ── */
.ios-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px; height: 50px;
  border-radius: var(--ios-radius);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.41px;
  border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
}
.ios-btn:active { opacity: 0.7; transform: scale(0.98); }
.ios-btn-full { width: 100%; }
.ios-btn-primary { background: var(--ios-blue); color: #fff; }
.ios-btn-green   { background: var(--ios-green); color: #fff; }
.ios-btn-red     { background: var(--ios-red); color: #fff; }
.ios-btn-tinted  { background: var(--ios-blue-tint); color: var(--ios-blue); }
.ios-btn-gray    { background: var(--ios-fill3); color: var(--ios-label); }
.ios-btn-text    { background: none; border: none; color: var(--ios-blue); font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.41px; cursor: pointer; padding: 8px 0; }
.ios-btn-text:active { opacity: 0.5; }
.ios-btn-destructive { background: rgba(255,59,48,0.10); color: var(--ios-red); }

/* ── iOS Toggle ── */
.ios-toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.ios-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-track {
  position: absolute; inset: 0;
  background: rgba(120,120,128,0.20);
  border-radius: 999px; cursor: pointer;
  transition: background 0.22s ease;
}
.ios-toggle-track::before {
  content: '';
  position: absolute;
  width: 27px; height: 27px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.04);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ios-toggle input:checked + .ios-toggle-track { background: var(--ios-green); }
.ios-toggle input:checked + .ios-toggle-track::before { transform: translateX(20px); }

/* ── Segmented Control ── */
.ios-segmented {
  display: flex; background: var(--ios-fill3);
  border-radius: 9px; padding: 2px;
}
.ios-seg-btn {
  flex: 1; padding: 6px 12px; border-radius: 7px; border: none;
  background: transparent;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.08px;
  color: var(--ios-label); cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.ios-seg-btn.active {
  background: var(--ios-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

/* ── Bottom Sheet ── */
.ios-sheet-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: flex-end; justify-content: center;
}
.ios-sheet-overlay.open { display: flex; animation: iosSheetBgIn 0.28s ease both; }
@keyframes iosSheetBgIn { from { opacity: 0; } to { opacity: 1; } }
.ios-sheet {
  background: var(--ios-surface);
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 28px);
  width: 100%; max-width: 540px; max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.40s cubic-bezier(0.32,0.72,0,1);
}
.ios-sheet-overlay.open .ios-sheet { transform: translateY(0); }
.ios-sheet-handle {
  width: 36px; height: 5px;
  background: var(--ios-fill);
  border-radius: 3px; margin: 12px auto 20px;
}

/* ── Alert Banner ── */
.ios-alert {
  padding: 12px 16px; border-radius: var(--ios-radius);
  font-size: 0.9375rem; font-weight: 400;
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.4;
}
.ios-alert-error   { background: rgba(255,59,48,0.10); color: var(--ios-red); }
.ios-alert-success { background: rgba(52,199,89,0.10);  color: #1a7a33; }
.ios-alert-info    { background: rgba(0,122,255,0.10);  color: var(--ios-blue); }
.ios-alert-warn    { background: rgba(255,149,0,0.10);  color: #b06000; }

/* ── Badge ── */
.ios-badge {
  display: inline-flex; align-items: center;
  background: var(--ios-red); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 3px 6px; min-width: 18px;
  justify-content: center;
}

/* ── Utility ── */
.ios-label2-text { color: var(--ios-label2); }
.ios-label3-text { color: var(--ios-label3); }
.ios-blue-text   { color: var(--ios-blue); }
.ios-red-text    { color: var(--ios-red); }
.ios-green-text  { color: var(--ios-green); }
hr.ios-sep { height: 0.5px; background: var(--ios-sep-light); border: none; margin: 0; }

/* ── Solid fallback (no backdrop-filter) ── */
@supports not (backdrop-filter: blur(1px)) {
  .ios-navbar  { background: #F2F2F7; }
  .ios-tabbar  { background: #F9F9F9; }
}

/* ── Samsung / Android: disable backdrop-filter ── */
@media (max-width: 768px) {
  .ios-navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(242,242,247,0.98) !important; }
  .ios-tabbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(249,249,249,0.98) !important; }
}

/* ═══════════════════════════════════════════════════════
   iOS UX — Page Transitions & Large Title
   ═══════════════════════════════════════════════════════ */

/* ── Page slide-in (sub-pages: edit, services, media kit) ── */
@keyframes iosSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
/* No fill-mode and no will-change: both would leave — or permanently hint —
   a non-none `transform` on this element even after the 0.32s animation
   finishes (fill-mode "both"/"forwards" keeps the last keyframe's
   translateX(0) applied indefinitely; will-change:transform reserves a
   compositing layer indefinitely). A transform ≠ none on this page-wide
   wrapper is exactly the kind of thing that has caused
   env(safe-area-inset-bottom) to compute wrong on first paint on real
   iOS/WebKit devices (not reproducible in desktop responsive-mode
   emulation, and self-corrects the moment the user zooms or scrolls,
   forcing a full layout recalc) — which showed up as the floating me-menu
   button landing off-screen on first load of pages using this wrapper
   (services, media kit) while pages without it (dashboard, public card)
   were unaffected. Dropping both here means the element cleanly reverts to
   transform:none once the entrance animation completes. */
.ios-slide-page {
  animation: iosSlideIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.ios-slide-page.ios-slide-enter {
  transform: translateX(40px);
  opacity: 0;
}

/* ── Large Title (collapses to compact on scroll) ── */
.ios-large-title {
  padding: 4px 16px 12px;
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: 0.37px;
  line-height: 1.21;
  color: var(--ios-label);
  transition: opacity 0.18s, transform 0.18s;
  transform-origin: left center;
}
.ios-large-title.collapsed {
  opacity: 0;
  transform: scale(0.85) translateY(-8px);
  pointer-events: none;
}

/* Compact title that fades in the nav bar when large title scrolls away */
.ios-navbar-compact-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.41px;
  color: var(--ios-label);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
  white-space: nowrap;
}
.ios-navbar.title-compact .ios-navbar-compact-title { opacity: 1; }

/* ── Keyboard avoidance ── */
body.keyboard-open .ios-tabbar,
body.keyboard-open .bottom-nav {
  transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body:not(.keyboard-open) .ios-tabbar,
body:not(.keyboard-open) .bottom-nav {
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Touch feedback refinements ── */
.ios-row-tappable:active,
.ios-tab-item:active,
button:active { -webkit-tap-highlight-color: transparent; }

/* ── Scroll rubber-band feel ── */
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}