/*
 * The interactive alicit session. Every size inside .device is in iOS points
 * (1 CSS px = 1 pt), measured from iOS 27 Simulator captures of an iPhone 17
 * Pro (402 × 874 pt screen). The device is scaled with `zoom`, not a
 * transform, so text is laid out again at the final size and stays sharp.
 */

.session {
  --ios-font: system-ui, -apple-system, "SF Pro Text", "SF Pro", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --term-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
}

.session .caption {
  min-height: 4.5em;
  max-width: 36rem;
  margin: 20px 0 24px;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}
.session .caption b { color: var(--accent); font-weight: 600; }

/* ---------- Stage ---------- */

.session .stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head phone" "term phone";
  column-gap: clamp(28px, 5vw, 64px);
  row-gap: 8px;
}
.session .session-head { grid-area: head; align-self: end; }
.session .term { grid-area: term; align-self: start; }
.session .phone-col { grid-area: phone; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- Terminal ---------- */

.session .term {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .82);
  box-shadow:
    0 0 0 .5px rgba(26, 40, 95, .12),
    inset 0 1px 0 #fff,
    0 40px 80px -50px rgba(26, 40, 95, .5),
    0 12px 30px -18px rgba(26, 40, 95, .25);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  min-width: 0;
}
.session .term-bar {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#f6f7fa, #eceff4);
  border-bottom: .5px solid rgba(26, 40, 95, .12);
}
.session .lights { position: absolute; left: 12px; top: 10px; display: flex; gap: 8px; }
.session .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15); }
.session .lights i:nth-child(2) { background: #febc2e; }
.session .lights i:nth-child(3) { background: #28c840; }
.session .term-title { font-size: 12.5px; font-weight: 600; color: #5d6584; letter-spacing: .01em; }

.session .term-body {
  margin: 0;
  padding: 14px 16px 18px;
  height: 330px;
  overflow: hidden;
  font-family: var(--term-mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: #1d2440;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-variant-ligatures: none;
}
.session .term-body .p { color: #1f7a52; }
.session .term-body .p b { color: #0b5bd3; font-weight: 400; }
.session .term-body .g { color: #1f7a4a; }
.session .term-body .d { color: #5d6584; }
.session .term-body .r { color: #c62a2a; }
.session .term-body .lbl { color: #6f45cf; }
.session .cursor {
  display: inline-block;
  width: .6em;
  height: 1.2em;
  margin-bottom: -.22em;
  background: #1d2440;
  animation: s-blink 1.06s steps(1) infinite;
}
.session .cursor.solid { animation: none; }
@keyframes s-blink { 50% { opacity: 0; } }

/* ---------- Device ---------- */

.session .device-slot { position: relative; }

.session .device[hidden] { display: none; }
.session .device {
  --z: 0.6;
  zoom: var(--z);
  position: relative;
  width: 434px;
  height: 906px;
  font-family: var(--ios-font);
  color: #000;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 50px 60px rgba(26, 40, 95, .3)) drop-shadow(0 12px 18px rgba(26, 40, 95, .2));
}

/* Titanium band: measured Deep Blue gradient, highlight on the outer lip. */
.session .rim {
  position: absolute;
  inset: 0;
  border-radius: 78px;
  background: linear-gradient(160deg, #56627f 0%, #2b3246 18%, #3a4460 50%, #262c3e 78%, #4b5673 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 24, 36, .9),
    inset 0 0 0 2.2px #8d97b3,
    inset 0 0 0 3.2px #bfc6dc,
    inset 0 0 0 4.4px #4a5470,
    inset 0 0 0 5.7px #1b2030;
}
.session .bezel {
  position: absolute;
  inset: 5.7px;
  border-radius: 72.5px;
  background: #000;
  box-shadow: inset 0 0 0 1px #2d2d2f, inset 0 0 3px 1.5px rgba(255, 255, 255, .06);
}
.session .btn {
  position: absolute;
  width: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2a3144, #6d7894 45%, #394159);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .5);
}
.session .btn-action  { left: -3px; top: 186px; height: 41px; }
.session .btn-volup   { left: -3px; top: 258px; height: 68px; }
.session .btn-voldown { left: -3px; top: 344px; height: 67px; }
.session .btn-side    { right: -3px; top: 282px; height: 106px; background: linear-gradient(270deg, #2a3144, #6d7894 45%, #394159); }

.session .screen {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 402px;
  height: 874px;
  border-radius: 62px;
  /* clip, not hidden: a hidden overflow can still be scrolled by focus. */
  overflow: clip;
  background: #000;
  isolation: isolate;
  /* Safari clips an overflow:hidden radius on composited children only with a mask. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ---------- Status bar ---------- */

.session .status {
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  z-index: 5;
  pointer-events: none;
}
.session .status-time {
  position: absolute;
  left: 50px;
  top: 21px;
  width: 50px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
}
.session .status-icons {
  position: absolute;
  right: 33px;
  top: 25px;
  width: 85px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 85px 14px;
}
.session .status-light { color: #fff; }
.session .status-dark { color: #000; }

/* ---------- Lock screen ---------- */

.session .lock { position: absolute; inset: 0; z-index: 1; }

.session .wallpaper {
  position: absolute;
  inset: -20px;
  background:
    radial-gradient(60% 40% at 78% 18%, rgba(97, 160, 255, .85), transparent 70%),
    radial-gradient(70% 45% at 12% 70%, rgba(44, 76, 214, .9), transparent 70%),
    radial-gradient(50% 35% at 85% 88%, rgba(122, 76, 235, .75), transparent 70%),
    radial-gradient(90% 60% at 50% 45%, #0f2a78 0%, #081744 55%, #040a22 100%);
}
.session .wallpaper::after {
  /* A soft ribbon, so the glass has something to bend. */
  content: "";
  position: absolute;
  left: -30%;
  top: 36%;
  width: 160%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(100deg, transparent 10%, rgba(160, 200, 255, .35) 40%, rgba(255, 255, 255, .55) 50%, rgba(170, 150, 255, .3) 60%, transparent 90%);
  filter: blur(18px);
  transform: rotate(-24deg);
}

.session .lock-glyph {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 20px;
  height: 26px;
  margin-left: -10px;
  color: #fff;
  z-index: 2;
}
.session .padlock { width: 100%; height: 100%; overflow: visible; }

.session .lock-date {
  position: absolute;
  top: 104px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, .92);
  font-size: 21px;
  font-weight: 600;
  z-index: 2;
}
.session .lock-clock {
  position: absolute;
  top: 118px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, .93);
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.1;
  font-feature-settings: "tnum" 0, "ss01";
  text-shadow: 0 1px 12px rgba(20, 40, 120, .25);
  z-index: 2;
}

.session .glass-dark {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.05);
  backdrop-filter: blur(24px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 0 .6px 0 rgba(255, 255, 255, .45),
    inset 0 0 0 .6px rgba(255, 255, 255, .16),
    inset 0 -8px 16px -10px rgba(255, 255, 255, .18),
    0 8px 24px -8px rgba(0, 0, 20, .35);
}

.session .notif {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 578px;
  min-height: 72px;
  padding: 14px 14px 14px 12px;
  border-radius: 24px;
  display: flex;
  gap: 11px;
  align-items: center;
  color: #fff;
  z-index: 3;
  transform-origin: 50% 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.session .notif:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 24px; }
/* A soft pulse, so a visitor knows to tap it. */
.session .notif.hint::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
  animation: s-ring 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes s-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.25); } }
.session .notif-text { flex: 1; min-width: 0; }
.session .notif-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.session .notif-head strong { font-size: 15px; font-weight: 600; }
.session .notif-head span { font-size: 13px; color: rgba(255, 255, 255, .62); }
.session .notif-body { margin-top: 1px; font-size: 15px; color: rgba(255, 255, 255, .95); }

.session .app-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%232687FF' fill-rule='evenodd' d='M512 152 C600 232 686 266 792 280 L792 495 C792 659 662 787 512 864 C362 787 232 659 232 495 L232 280 C338 266 424 232 512 152 Z M512 388 C470 388 436 422 436 464 C436 492 451 517 472 530 L448 650 H576 L552 530 C573 517 588 492 588 464 C588 422 554 388 512 388 Z'/%3E%3C/svg%3E") center / 100% no-repeat,
    radial-gradient(120% 90% at 30% 10%, #13204a 0%, #070b1c 60%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 1px 1px rgba(255, 255, 255, .22);
}

.session .lock-corner {
  position: absolute;
  bottom: 44px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 2;
}
.session .lock-corner svg { width: 22px; height: 22px; }
.session .lock-corner.left { left: 46px; }
.session .lock-corner.right { right: 46px; }

.session .home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 140px;
  height: 5px;
  margin-left: -70px;
  border-radius: 3px;
  z-index: 6;
}
.session .home-indicator.light { background: rgba(255, 255, 255, .92); }
.session .home-indicator.dark { background: #000; }

.session .dim { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 4; pointer-events: none; }

/* ---------- App ---------- */

.session .app {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #eeeef3;
  transform-origin: 50% 67%;
  opacity: 0;
  visibility: hidden;
  overflow: clip;
  border-radius: 62px;
}

.session .glass {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 0 0 .6px rgba(255, 255, 255, .9),
    inset 0 1.5px 1px -1px rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(0, 0, 0, .04),
    0 0 0 .5px rgba(0, 0, 0, .10),
    0 6px 18px -6px rgba(0, 0, 0, .12);
}

.session .nav { position: absolute; inset: 0 0 auto; height: 120px; z-index: 3; }
.session .nav-title {
  position: absolute;
  top: 73px;
  width: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}
.session .nav-pill {
  position: absolute;
  left: 285px;
  top: 62px;
  width: 101px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  color: #0a63c9;
}
.session .nav-pill svg { width: 26px; height: 26px; }

.session .card {
  position: absolute;
  left: 16px;
  top: 132px;
  width: 370px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
  transform-origin: 50% 100%;
  z-index: 2;
  /* A vertical pan still scrolls the page; a sideways drag moves the card. */
  touch-action: pan-y;
  cursor: grab;
}
.session .card.dragging { cursor: grabbing; }
.session .card:focus-visible { outline: 3px solid #0a63c9; outline-offset: 4px; }
.session .card-head { display: flex; align-items: center; gap: 14px; padding: 20px; }
.session .mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(118, 118, 128, .12);
  display: grid;
  place-items: center;
  flex: none;
}
.session .mark svg { width: 28px; height: 28px; }
.session .card-title { font-size: 22px; font-weight: 700; line-height: 28px; }
.session .card-sub { font-size: 15px; line-height: 18px; }
.session .divider { height: .5px; margin-left: 20px; background: rgba(60, 60, 67, .29); }
.session .facts { padding: 6px 0; }
.session .fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6.15px 20px;
  font-size: 17px;
  line-height: 22px;
}
.session .fact b { font-weight: 600; text-align: right; }
.session .fact.stacked { display: block; }
.session .fact.stacked span, .session .fact.stacked b { display: block; text-align: left; }
.session .why { padding: 20px; }
.session .why p { margin: 0; font-size: 17px; line-height: 22px; }
.session .jev { margin-top: 10px; display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.session .jev svg { width: 21px; height: 21px; margin-left: -1px; }
.session .jev-answers { margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.session .card-foot {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.session .card-foot::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: .5px; background: rgba(60, 60, 67, .29); }
.session .card-foot svg { width: 17px; height: 17px; color: rgba(60, 60, 67, .6); }
.session .time-left { min-width: 52px; text-align: right; }

.session .stamp {
  position: absolute;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.session .stamp svg { width: 17px; height: 17px; }
.session .stamp.approve { left: 20px; background: #34c759; transform: rotate(-7deg); }
.session .stamp.decline { right: 20px; background: #ff3b30; transform: rotate(7deg); }

.session .empty {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 300px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.session .empty svg { width: 54px; height: 54px; color: rgba(60, 60, 67, .6); }
.session .empty-title { margin-top: 10px; font-size: 22px; font-weight: 700; }
.session .empty-body { margin: 8px auto 0; max-width: 300px; font-size: 17px; line-height: 22px; color: rgba(60, 60, 67, .6); }
.session .empty-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 99, 201, .14);
  color: #0a63c9;
  font: 600 15px/1.3 var(--ios-font);
  cursor: pointer;
  touch-action: manipulation;
}

.session .decide {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 725px;
  height: 58px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.session .decide-btn {
  flex: 1;
  border: 0;
  border-radius: 29px;
  display: grid;
  place-items: center;
  font: 600 17px/1 var(--ios-font);
  color: #0a63c9;
  cursor: pointer;
  touch-action: manipulation;
}
.session .decide-btn:active { transform: scale(.97); }
.session .decide-btn.prominent {
  color: #fff;
  background: linear-gradient(180deg, #1c74db 0%, #0a63c9 55%, #095cbc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 .6px rgba(255, 255, 255, .18),
    inset 0 -2px 4px rgba(0, 30, 90, .18),
    0 6px 16px -6px rgba(10, 99, 201, .55);
}

.session .tabbar {
  position: absolute;
  left: 21px;
  right: 21px;
  top: 790px;
  height: 62px;
  border-radius: 31px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 3;
}
.session .tab {
  position: relative;
  flex: 1;
  height: 54px;
  border-radius: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #1c1c1e;
  font-size: 10px;
  font-weight: 600;
}
.session .tab svg { width: 26px; height: 24px; }
.session .tab.on { color: #0a63c9; background: rgba(118, 118, 128, .14); }
.session .badge {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff3b30;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* ---------- Dynamic Island and Face ID ---------- */

.session .island {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 18px;
  background: #000;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.session .faceid { width: 64px; height: 64px; opacity: 0; }
.session .fid-check { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }

/* The ghost fingertip that plays the session when a visitor does not. */
.session .touch {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .15) 70%, transparent 72%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .18);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
}

.session .fine { margin: 32px 0 0; font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- Narrow screens: phone first, terminal under it ---------- */

@media (max-width: 860px) {
  .session .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "phone" "term"; row-gap: 22px; }
  .session .phone-col { justify-self: center; }
  .session .term-body { height: 250px; font-size: 12px; padding: 12px 12px 14px; }
  .session .caption { margin: 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .session .cursor, .session .notif.hint::after { animation: none; }
}

/* The stage should fit in one window under the sticky nav. */
section.session { padding: 72px 0 96px; }

/* ---------- Every part of the phone works ---------- */

/* Low specificity, so each control's own font and colour still win. */
:where(.session .device button) { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Hardware buttons, with a larger target than the 5 pt band. */
.session .btn { border: 0; padding: 0; cursor: pointer; transition: transform 120ms ease; }
.session .btn::before { content: ""; position: absolute; inset: -6px -14px; }
.session .btn-action:active, .session .btn-volup:active, .session .btn-voldown:active { transform: translateX(1.5px); }
.session .btn-side:active { transform: translateX(-1.5px); }

.session .lock-corner { border: 0; padding: 0; cursor: pointer; transition: transform 160ms ease, background 200ms ease, color 200ms ease; }
.session .lock-corner:active { transform: scale(1.12); }
.session .lock-corner.on { background: #fff; color: #1b2240; }
.session .lock-corner.on circle { fill: #fff; }

/* Notification preview, shown by a long press */
.session .preview {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(8, 14, 40, .28);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
  cursor: pointer;
}
.session .preview.show { opacity: 1; visibility: visible; }
.session .preview-card {
  position: absolute; left: 12px; right: 12px; top: 128px;
  background: rgba(255, 255, 255, .96);
  border-radius: 26px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 20, .5);
  transform: scale(.94); transform-origin: 50% 100%;
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}
.session .preview.show .preview-card { transform: none; }

/* Navigation bar */
.session .nav-back {
  position: absolute; left: 16px; top: 62px; width: 44px; height: 44px;
  border: 0; border-radius: 22px; display: none; place-items: center;
  color: #000; cursor: pointer;
}
.session .nav-back svg { width: 22px; height: 22px; }
.session .nav-back.show { display: grid; }
.session .nav-pill button {
  width: 44px; height: 44px; border: 0; padding: 0; background: none;
  display: grid; place-items: center; cursor: pointer; border-radius: 22px;
}
.session .nav-pill button svg { width: 26px; height: 26px; }
.session .nav-pill button:active { background: rgba(0, 0, 0, .06); }
.session .nav-pill.single { left: 342px; width: 44px; padding: 0; }
.session .nav-pill.single #infoBtn { display: none; }
.session .nav-pill.gone { display: none; }

/* Panes */
.session .pane { position: absolute; inset: 0; }
.session .pane[hidden] { display: none; }
.session .pane.push { background: #eeeef3; z-index: 2; }
.session .large-title { position: absolute; left: 20px; top: 104px; font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .2px; }

.session .unavailable { position: absolute; left: 32px; right: 32px; top: 320px; text-align: center; }
.session .unavailable svg { width: 56px; height: 56px; color: rgba(60, 60, 67, .6); }
.session .u-title { margin-top: 10px; font-size: 22px; font-weight: 700; line-height: 28px; }
.session .u-body { margin: 8px auto 0; max-width: 300px; font-size: 17px; line-height: 22px; color: rgba(60, 60, 67, .6); }

/* Inset grouped lists */
.session .list { position: absolute; left: 0; right: 0; top: 160px; bottom: 96px; padding: 0 16px; overflow: auto; scrollbar-width: none; }
.session .list-top { top: 120px; }
.session .group { background: #fff; border-radius: 26px; overflow: hidden; }
.session .group + .group, .session .group-foot + .group { margin-top: 20px; }
.session .group-head { margin: 22px 16px 7px; font-size: 13px; line-height: 18px; color: rgba(60, 60, 67, .6); }
.session .group-head + .group { margin-top: 0; }
.session .group-foot { margin: 7px 16px 0; font-size: 13px; line-height: 18px; color: rgba(60, 60, 67, .6); }
.session .row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 11px 16px;
  font-size: 17px; line-height: 22px; text-align: left;
  border: 0; background: #fff;
}
.session .row + .row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: .5px; background: rgba(60, 60, 67, .29); }
.session .row-value { color: rgba(60, 60, 67, .6); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.session .mono { font: 15px/20px ui-monospace, "SF Mono", Menlo, monospace; }
.session .row-value.wide, .session .row .wide { text-align: left; color: #000; flex: 1; }
.session .row-button, .session .row-link, .session .hrow { cursor: pointer; }
.session .row-button { justify-content: flex-start; gap: 14px; color: #0a63c9; }
.session .row-button svg { width: 24px; height: 24px; flex: none; }
.session .row-button.destructive { color: #ff3b30; }
.session .row-link { color: #0a63c9; }
.session .row-button:active, .session .row-link:active, .session .hrow:active { background: #e5e5ea; }
.session .identity { justify-content: flex-start; gap: 14px; padding: 14px 16px; }
.session .identity svg { width: 44px; height: 44px; color: #0a63c9; flex: none; }
.session .id-name { font-size: 17px; font-weight: 600; }
.session .id-sub { font-size: 15px; line-height: 20px; color: rgba(60, 60, 67, .6); }

.session .hrow { display: block; }
.session .h-sentence { font-size: 17px; line-height: 22px; font-weight: 600; padding-right: 22px; overflow-wrap: anywhere; }
.session .h-meta { margin-top: 3px; display: flex; gap: 8px; font-size: 15px; line-height: 20px; color: rgba(60, 60, 67, .6); }
.session .h-label { font-weight: 600; color: #000; }
.session .h-label.ok { color: #248a3d; }
.session .hrow .jev { margin-top: 6px; font-size: 13px; }
.session .hrow .jev svg { width: 16px; height: 16px; }
.session .hrow::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border: solid rgba(60, 60, 67, .3); border-width: 2.2px 2.2px 0 0; transform: rotate(45deg);
}
.session .jev.small { margin: 0; font-size: 15px; }

/* Tabs */
.session .tab { border: 0; background: none; cursor: pointer; padding: 0; }
.session .tab:not(.on):active { background: rgba(118, 118, 128, .08); }

/* Details sheet */
.session .scrim {
  position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms;
}
.session .sheet {
  position: absolute; left: 0; right: 0; top: 62px; bottom: 0; z-index: 9;
  background: #f2f2f7; border-radius: 38px 38px 0 0;
  transform: translateY(105%); visibility: hidden;
  transition: transform 460ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 460ms;
  box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .15);
}
.session .app.sheet-open .scrim { opacity: 1; visibility: visible; }
.session .app.sheet-open .sheet { transform: none; visibility: visible; transition-delay: 0s; }
.session .sheet-grabber { position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(60, 60, 67, .3); }
.session .sheet-bar { position: relative; height: 64px; }
.session .sheet-title { position: absolute; left: 0; right: 0; top: 22px; text-align: center; font-size: 17px; font-weight: 600; pointer-events: none; }
.session .sheet-close { position: absolute; left: 16px; top: 12px; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; font-size: 17px; color: #0a63c9; cursor: pointer; }
.session .sheet-list { top: 64px; bottom: 0; padding-bottom: 40px; }
.session .sheet-list .group-head:first-child { margin-top: 6px; }

/* Alert */
.session .alert-scrim {
  position: absolute; inset: 0; z-index: 11; display: grid; place-items: center;
  background: rgba(0, 0, 0, .2); opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.session .alert-scrim.show { opacity: 1; visibility: visible; }
.session .alert {
  width: 300px; padding: 24px 18px 18px; border-radius: 34px; text-align: center;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35);
  transform: scale(1.08); transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
}
.session .alert-scrim.show .alert { transform: none; }
.session .alert-title { font-size: 17px; font-weight: 600; line-height: 22px; }
.session .alert-buttons { display: flex; gap: 10px; margin-top: 20px; }
.session .alert-btn { flex: 1; height: 48px; border: 0; border-radius: 24px; font-size: 17px; font-weight: 600; cursor: pointer; background: rgba(118, 118, 128, .14); }
.session .alert-btn.destructive { color: #ff3b30; }

/* Signed out */
.session .signed-out { position: absolute; inset: 0; z-index: 10; background: #eeeef3; display: none; text-align: center; }
.session .signed-out.show { display: block; }
.session .so-mark { position: absolute; left: 0; right: 0; top: 230px; font-size: 44px; font-weight: 700; letter-spacing: -.5px; }
.session .so-sub { position: absolute; left: 0; right: 0; top: 292px; font-size: 17px; color: rgba(60, 60, 67, .6); }
.session .so-points { position: absolute; left: 64px; right: 40px; top: 400px; text-align: left; display: grid; gap: 22px; font-size: 17px; }
.session .so-points div { display: flex; align-items: center; gap: 16px; }
.session .so-points svg { width: 28px; height: 28px; color: #0a63c9; flex: none; }
.session .so-signin {
  position: absolute; left: 24px; right: 24px; top: 740px; height: 56px; border: 0; border-radius: 28px;
  color: #fff !important; font-weight: 600 !important; font-size: 17px !important; cursor: pointer;
  background: linear-gradient(180deg, #1c74db 0%, #0a63c9 55%, #095cbc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -6px rgba(10, 99, 201, .55);
}

/* Volume display, sleep and flashlight */
.session .vol-hud {
  position: absolute; left: 10px; top: 190px; z-index: 25;
  width: 40px; height: 160px; border-radius: 20px; overflow: hidden;
  background: rgba(40, 40, 50, .45);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  opacity: 0; transform: translateX(-8px) scale(.9); transform-origin: 0 50%;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}
.session .vol-hud.show { opacity: 1; transform: none; }
.session .vol-fill { position: absolute; inset: 0; background: #fff; transform: scaleY(.5); transform-origin: 50% 100%; transition: transform 160ms ease; }
.session .vol-hud svg { position: absolute; left: 10px; bottom: 10px; width: 20px; height: 20px; color: #5b5b66; mix-blend-mode: normal; }
.session .sleep { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity 320ms ease; cursor: pointer; }
.session .sleep.on { opacity: 1; pointer-events: auto; }
.session .torch {
  position: absolute; left: 50%; top: -30%; width: 180%; height: 160%; transform: translateX(-50%);
  /* Warm, so the light shows on a near-white page. */
  background: radial-gradient(closest-side, rgba(255, 226, 160, .55), rgba(255, 236, 196, .3) 45%, rgba(255, 244, 220, 0));
  opacity: 0; transition: opacity 400ms ease; pointer-events: none; z-index: -1;
}
.session .torch.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .session .sheet, .session .scrim, .session .alert, .session .alert-scrim, .session .preview,
  .session .preview-card, .session .vol-hud, .session .sleep, .session .torch { transition: none; }
}
.session .nav-title { pointer-events: none; }
/* Keyboard focus must not scroll a phone control under the sticky site nav. */
.session .device button, .session .device [tabindex] { scroll-margin-top: 90px; }
.session .btn { z-index: 1; }
/* The flashlight glow and a flung card must not widen the page on a phone. */
section.session { overflow-x: clip; }

/* ---------- Which phone: iPhone or Android ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.session .platform {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 .5px rgba(26, 40, 95, .14), inset 0 1px 0 #fff, 0 6px 18px -10px rgba(26, 40, 95, .35);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.session .platform label { position: relative; display: block; cursor: pointer; }
.session .platform input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.session .platform span {
  display: block;
  min-width: 92px;
  padding: 7px 16px;
  border-radius: 999px;
  text-align: center;
  font: 550 0.9rem/1.3 var(--font);
  color: var(--ink-soft);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.session .platform label:hover span { color: var(--ink); }
.session .platform input:checked + span {
  color: #fff;
  background: linear-gradient(180deg, #0c6ad6, var(--accent));
  box-shadow: 0 4px 10px -4px rgba(3, 100, 211, .6);
}
.session .platform input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .session .platform span { transition: none; }
}