/* iOS 26/27 look-alike kit for the coded screens.
   Every screen renders inside .ios, which fills the device screen.
   Units are CSS px = iOS points. Safe areas come from --sat (top) and --sab (bottom),
   set by the frame (iPad/desktop) or by the phone layout. */

.ios {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Inter, Roboto, Arial, sans-serif;
  --sf-round: ui-rounded, "SF Pro Rounded", var(--sf);
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --label: #000;
  --label2: rgba(60, 60, 67, .6);
  --label3: rgba(60, 60, 67, .3);
  --label4: rgba(60, 60, 67, .18);
  --sep: rgba(60, 60, 67, .29);
  --bg: #fff;
  --bg-grouped: #f2f2f7;
  --cell: #fff;
  --fill: rgba(120, 120, 128, .2);
  --fill2: rgba(120, 120, 128, .16);
  --fill3: rgba(118, 118, 128, .12);
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-edge: rgba(0, 0, 0, .06);

  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --yellow: #ffcc00;
  --pink: #ff2d55;
  --purple: #af52de;
  --indigo: #5856d6;
  --teal: #30b0c7;
  --cyan: #32ade6;
  --mint: #00c7be;
  --brown: #a2845e;
  --gray: #8e8e93;
  --gray2: #aeaeb2;
  --gray3: #c7c7cc;
  --gray4: #d1d1d6;
  --gray5: #e5e5ea;
  --gray6: #f2f2f7;

  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--sf);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -.43px;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

.ios.dark {
  --label: #fff;
  --label2: rgba(235, 235, 245, .6);
  --label3: rgba(235, 235, 245, .3);
  --label4: rgba(235, 235, 245, .16);
  --sep: rgba(84, 84, 88, .6);
  --bg: #000;
  --bg-grouped: #000;
  --cell: #1c1c1e;
  --fill: rgba(120, 120, 128, .36);
  --fill2: rgba(120, 120, 128, .32);
  --fill3: rgba(118, 118, 128, .24);
  --glass: rgba(40, 40, 44, .72);
  --glass-strong: rgba(44, 44, 48, .8);
  --glass-edge: rgba(255, 255, 255, .1);
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --pink: #ff375f;
  --purple: #bf5af2;
  --indigo: #5e5ce6;
  --teal: #40c8e0;
  --cyan: #64d2ff;
  --gray: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
}

.ios *, .ios *::before, .ios *::after { box-sizing: border-box; }
.ios svg { display: block; flex: none; }
.ios.grouped { background: var(--bg-grouped); }

/* ---- text styles (Apple HIG, iOS) ---------------------------------------- */
.t-large  { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .4px; }
.t-title1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: .38px; }
.t-title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.26px; }
.t-title3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.45px; }
.t-head   { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.43px; }
.t-body   { font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -.43px; }
.t-callout{ font-size: 16px; line-height: 21px; letter-spacing: -.31px; }
.t-sub    { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
.t-foot   { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
.t-cap1   { font-size: 12px; line-height: 16px; letter-spacing: 0; }
.t-cap2   { font-size: 11px; line-height: 13px; letter-spacing: .06px; }
.c2 { color: var(--label2); }
.c3 { color: var(--label3); }
.cblue { color: var(--blue); }
.cred { color: var(--red); }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- page structure ------------------------------------------------------ */
.ios-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* Never squeeze content to fit: on short screens it runs off the bottom instead. */
.ios-page > * { flex-shrink: 0; }
.ios-scroll { flex: 1; overflow: hidden; position: relative; }
.ios-top { height: var(--sat); flex: none; }
.ios-bottom-space { height: calc(var(--sab) + 84px); flex: none; }

/* Nav bar: glass circle buttons at the edges, inline title in the middle. */
.ios-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 0 16px; gap: 8px; flex: none; position: relative;
}
.ios-nav .nav-title {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 17px; font-weight: 600; letter-spacing: -.43px;
}
.ios-nav .nav-group { display: flex; gap: 8px; align-items: center; z-index: 1; }
.ios-large { padding: 2px 16px 8px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .4px; }

/* Liquid Glass */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 0 0 .5px var(--glass-edge), 0 6px 20px rgba(0, 0, 0, .07), inset 0 .5px 0 rgba(255, 255, 255, .6);
}
.ios.dark .glass { box-shadow: 0 0 0 .5px var(--glass-edge), 0 6px 20px rgba(0, 0, 0, .3), inset 0 .5px 0 rgba(255, 255, 255, .12); }
.glass-btn {
  width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--label);
}
.glass-btn svg { width: 20px; height: 20px; }
.glass-pill { height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 0 4px; color: var(--label); }
.glass-pill > * { width: 40px; height: 44px; display: grid; place-items: center; }
.glass-pill svg { width: 20px; height: 20px; }
.glass-text { height: 44px; border-radius: 22px; padding: 0 16px; display: flex; align-items: center; gap: 4px; font-size: 17px; }

/* Bottom search field (Messages, Contacts, Settings in iOS 26+) */
.ios-searchbar {
  position: absolute; left: 27px; right: 27px; bottom: calc(var(--sab) - 6px);
  display: flex; gap: 10px; align-items: center;
}
.ios-searchbar .field {
  flex: 1; height: 48px; border-radius: 24px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  color: var(--label2); font-size: 17px;
}
.ios-searchbar .field svg { width: 18px; height: 18px; color: var(--label); }
.ios-searchbar .field .mic { margin-left: auto; }
.ios-searchbar .round { width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; color: var(--label); }

/* Floating tab bar */
.ios-tabbar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) - 16px);
  height: 56px; border-radius: 28px; display: flex; align-items: center; padding: 4px; gap: 0;
  max-width: calc(100% - 40px);
}
.ios-tabbar .tab {
  min-width: 88px; height: 48px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: .1px; color: var(--label); padding: 0 10px;
}
.ios-tabbar .tab svg { width: 26px; height: 24px; }
.ios-tabbar .tab.on { color: var(--blue); background: var(--fill3); }

/* ---- lists --------------------------------------------------------------- */
.ios-section { margin: 0 16px 36px; background: var(--cell); border-radius: 26px; overflow: hidden; }
.ios-section-head { margin: 0 32px 7px; font-size: 13px; line-height: 18px; color: var(--label2); letter-spacing: -.08px; }
.ios-section-foot { margin: -29px 32px 36px; font-size: 13px; line-height: 18px; color: var(--label2); letter-spacing: -.08px; }
.row {
  --inset: 16px;
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 19px 0 16px; font-size: 17px; letter-spacing: -.43px;
}
.row.has-icon { --inset: 56px; padding-left: 14px; }
.row + .row::before {
  content: ""; position: absolute; top: 0; left: var(--inset); right: 16px; height: .5px; background: var(--sep);
}
.row .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { display: block; font-size: 15px; line-height: 20px; color: var(--label2); letter-spacing: -.23px; }
.row .detail { color: var(--label2); white-space: nowrap; }
.row .chev { color: var(--label3); width: 8px; height: 14px; }
.row-icon {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none;
}
.row-icon svg { width: 18px; height: 18px; }

/* Switch (iOS 26 proportions) */
.switch {
  position: relative; width: 64px; height: 28px; border-radius: 14px; background: var(--fill); flex: none;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 38px; height: 24px; border-radius: 12px; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .06);
}
.switch.on { background: var(--green); }
.switch.on::after { left: 24px; }

/* Buttons */
.btn-fill { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 16px; height: 34px; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; }
.btn-tint { background: var(--fill3); color: var(--blue); border-radius: 999px; padding: 0 14px; height: 30px; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; letter-spacing: -.23px; }

/* Avatars */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, #a5abb8, #858b98); color: #fff; font-weight: 600; font-size: 16px; letter-spacing: 0; }

/* App icons (Home Screen) */
.app-icon { width: 64px; height: 64px; border-radius: 15px; overflow: hidden; position: relative; flex: none;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); }
.app-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.app-label { font-size: 12px; line-height: 14px; letter-spacing: 0; text-align: center; margin-top: 5px; white-space: nowrap; }

/* Wallpapers (abstract, close to the iOS 26 default) */
.wall-default {
  background:
    radial-gradient(120% 70% at 85% 10%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(90% 60% at 10% 90%, rgba(120, 90, 70, .55), transparent 70%),
    radial-gradient(70% 50% at 70% 60%, rgba(210, 190, 170, .9), transparent 70%),
    linear-gradient(160deg, #e9e3dc 0%, #c9b8a6 45%, #8f7a68 100%);
}
.wall-night {
  background:
    radial-gradient(90% 60% at 80% 15%, rgba(120, 140, 255, .55), transparent 60%),
    radial-gradient(80% 60% at 15% 85%, rgba(255, 120, 90, .45), transparent 65%),
    linear-gradient(170deg, #1b1f3a 0%, #2c2457 50%, #0f1024 100%);
}

/* SF Symbols as alpha masks (see kit.sf) */
.sf { display: inline-block; flex: none; vertical-align: middle; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Screenshot-based screens (see kit.shot); frame.js scales .shot-stage to the canvas */
.shot-wrap { position: absolute; inset: 0; overflow: hidden; }
.shot-stage { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0;
  background-size: 402px 874px; background-repeat: no-repeat; }
.shot-status { position: absolute; left: 0; top: 0; width: 402px; height: 54px; }
.shot-box { position: absolute; }