/* ═══════════════════════════════════════════════════════════════════════
   An iPhone, built the same way the Android one was.

   The twin to /sim/android. Same idea - a solid you turn with the mouse,
   a screen that is the only thing allowed to scroll, nothing fetched from
   the web - and a deliberately different everything else, because the whole
   point of topic 4.1 is that the two systems put the same setting in
   different places.

   What is iOS here and not Android:

     * flat titanium rails and a Dynamic Island instead of a punch-hole,
     * grouped inset lists on black, with a blue chevron and a green switch,
     * a back button that carries the name of the screen behind it,
     * Control Centre pulled from the top right, notifications from the
       top left - two different gestures that trainees mix up constantly,
     * "slide to power off", which is a drag, not a button.

   The Android lab's files are untouched; this is a second device, not a
   theme on the first one. That costs some repetition and buys the certainty
   that nothing done here can break something already tested and live.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --page:      #0b0d10;
    --panel:     #15181d;
    --line:      rgba(255,255,255,.09);
    --ink:       #e9edf2;
    --ink-dim:   #98a1ad;
    --accent:    #0a84ff;
    --good:      #30d158;

    /* iOS dark */
    --ios-bg:     #000000;
    --ios-group:  #1c1c1e;
    --ios-group2: #2c2c2e;
    --ios-sep:    rgba(84,84,88,.55);
    --ios-ink:    #ffffff;
    --ios-dim:    #98989f;
    --ios-blue:   #0a84ff;
    --ios-green:  #30d158;
    --ios-red:    #ff453a;
    --ios-orange: #ff9f0a;

    --steel:     #2e3238;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--page);
    color: var(--ink);
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif;
}
body {
    background:
        radial-gradient(1000px 680px at 16% -8%, #18212e 0%, transparent 60%),
        radial-gradient(900px 600px at 96% 108%, #1a1b26 0%, transparent 60%),
        var(--page);
}

/* ── page furniture ──────────────────────────────────────────────────── */

.lab {
    max-width: 1280px; margin: 0 auto;
    padding: 22px 20px 60px;
    display: grid; grid-template-columns: minmax(0, 1fr) 420px;
    gap: 28px; align-items: start;
}
.lab-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.lab-head h1 { margin: 0; font-size: 1.22rem; font-weight: 650; letter-spacing: -.01em; }
.lab-head .tag {
    font-size: .74rem; padding: 4px 10px; border-radius: 980px;
    background: rgba(10,132,255,.14); border: 1px solid rgba(10,132,255,.32);
    color: #6cb6ff; font-weight: 600;
}
.lab-head .spacer { flex: 1; }
.minibtn {
    text-decoration: none; display: inline-block;
    background: var(--panel); border: 1px solid var(--line); color: var(--ink);
    border-radius: 980px; padding: 7px 14px; font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.minibtn:hover { border-color: rgba(255,255,255,.22); }
.minibtn[aria-pressed="true"] {
    background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.45); color: #8ec8ff;
}
.minibtn.other { border-color: rgba(48,209,88,.35); color: #7ee2a0; }

/* ── the solid ───────────────────────────────────────────────────────── */

.stage {
    perspective: 1900px; perspective-origin: 50% 42%;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 26px 0 10px; min-height: 850px;
    user-select: none; -webkit-user-select: none;
}
.device {
    position: relative; width: 376px; height: 790px;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .14s ease-out; will-change: transform;
}
.device.settling { transition: transform .55s cubic-bezier(.22,1,.36,1); }

.shadow {
    position: absolute; left: 50%; bottom: -42px;
    width: 304px; height: 46px;
    transform: translate(-50%, 0) translateZ(-62px) rotateX(78deg);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, transparent 72%);
    filter: blur(9px); pointer-events: none;
}

.face { position: absolute; inset: 0; border-radius: 54px; backface-visibility: hidden; }

/* brushed titanium front rail */

/* ── thickness ──────────────────────────────────────────────────────
   A real phone is about 8mm thick for 71mm of width - one part in nine.
   At this device's width that is 40px, and the first build had 14: turned
   edge-on it was a line, and the buttons on it could not be seen. */
.face-front {
    transform: translateZ(20px);
    background: linear-gradient(142deg, #585f69 0%, #2f343b 26%, #22262c 62%, #4a515b 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 2px 2px rgba(0,0,0,.5);
    padding: 10px;
}
.face-back {
    transform: translateZ(-20px) rotateY(180deg);
    background: radial-gradient(130% 95% at 24% 6%, #3a414b 0%, #1b1f25 52%, #0e1115 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.cam-plate {
    position: absolute; top: 26px; left: 24px;
    width: 132px; height: 132px; border-radius: 34px;
    background: linear-gradient(155deg, #333942, #15181d);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 8px 18px rgba(0,0,0,.5);
    display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 10px;
}
.lens {
    width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #5d6878 0%, #1d222a 55%, #090b0e 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 0 0 3px rgba(0,0,0,.4);
}
.lens::after {
    content: ''; display: block; width: 10px; height: 10px; margin: 8px 0 0 9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150,200,255,.7), transparent 70%);
}
.lens.small { width: 34px; height: 34px; }
.back-logo {
    position: absolute; bottom: 0; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.16); font-size: 30px;
}

/* the four rails */
/* centred on the device, turned, then pushed out by half of it (188 / 395):
   centred first, or a rail swings away from the slab when the slab turns */
.edge { position: absolute; background: linear-gradient(90deg, #5a616c, #2b3037 46%, #5a616c); }
/* rails stop short of the rounded corners, with rounded ends: one rounded
   body from the side, never a box past the face's corners */
.edge-r { top: 54px; left: 50%; width: 40px; height: calc(100% - 108px); transform: translateX(-50%) rotateY(90deg) translateZ(188px); }
.edge-l { top: 54px; left: 50%; width: 40px; height: calc(100% - 108px); transform: translateX(-50%) rotateY(-90deg) translateZ(188px); }
.edge-t { top: 50%; left: 54px; width: calc(100% - 108px); height: 40px; transform: translateY(-50%) rotateX(90deg) translateZ(395px);
          background: linear-gradient(180deg, #5a616c, #2b3037 50%, #5a616c); }
.edge-b { top: 50%; left: 54px; width: calc(100% - 108px); height: 40px; transform: translateY(-50%) rotateX(-90deg) translateZ(395px);
          background: linear-gradient(180deg, #5a616c, #2b3037 50%, #5a616c); }

.port {
    position: absolute; top: 16px; left: 50%; width: 34px; height: 7px;
    transform: translateX(-50%); border-radius: 6px; background: #05070a;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.9);
}
.grille {
    position: absolute; top: 17px; width: 54px; height: 5px; border-radius: 4px;
    background: repeating-linear-gradient(90deg, #05070a 0 3px, transparent 3px 6px);
}
.grille.left { left: 46px; } .grille.right { right: 46px; }

/* the buttons sit on the rail, lighter than it so they read at a glance,
   with a seam of shadow around each */
.btn3d {
    position: absolute; left: 4px; width: 32px; border-radius: 5px;
    background: linear-gradient(90deg, #8a93a1, #555d69 55%, #6a7382);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
    cursor: pointer; transform: translateZ(3px);
    transition: transform .07s ease, filter .07s ease;
}
.btn3d:hover { filter: brightness(1.25); }
.btn3d.press { transform: translateZ(0); filter: brightness(.8); }
.btn3d.held  { filter: brightness(1.5); box-shadow: 0 0 0 2px rgba(10,132,255,.55); }
/* right rail: the side button. left rail: action button, then volume. */
.btn-power  { top: 174px; height: 96px; }
.btn-action { top: 90px; height: 34px; }
.btn-volup  { top: 148px; height: 62px; }
.btn-voldn  { top: 218px; height: 62px; }

.sheen {
    position: absolute; inset: 0; border-radius: 54px;
    transform: translateZ(21px); pointer-events: none;
    background: linear-gradient(var(--sheen-a, 115deg),
        rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 18%, transparent 38%,
        transparent 62%, rgba(255,255,255,.05) 86%, rgba(255,255,255,.13) 100%);
    /* No blend mode. A blended layer inside a preserve-3d context made Chrome
       drop every rail behind it: the slab had no visible thickness and the
       side buttons could not be seen at any angle. A plain translucent
       gradient gives the same gloss without the effect. */
    opacity: .55;
}

/* ── the screen ──────────────────────────────────────────────────────── */

.screen {
    /* an English iPhone whatever language the page around it speaks */
    direction: ltr; text-align: left;
    position: relative; width: 100%; height: 100%;
    border-radius: 45px; overflow: hidden;
    background: var(--ios-bg); color: var(--ios-ink);
    font-size: 14px; isolation: isolate; cursor: default;
    letter-spacing: -.01em;
}
.screen.off { background: #000; }
.screen.off > *:not(.boot) { display: none; }

.wall {
    position: absolute; inset: 0;
    background: #0b0d16 url(wall-default.svg?v=1) center / cover no-repeat;
}

/* the Dynamic Island */
.island {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 118px; height: 33px; border-radius: 20px;
    background: #000; z-index: 60; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.island::after {
    content: ''; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #1e2736 0%, #05070a 70%);
}

/* status bar, split around the island */
.statusbar {
    position: absolute; top: 0; left: 0; right: 0; height: 46px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 26px; z-index: 58; pointer-events: none;
    font-size: 13.5px; font-weight: 600; color: #fff;
}
.statusbar .right { display: flex; align-items: center; gap: 5px; }
.sb-ico { font-size: 11.5px; }
.sb-batt {
    display: inline-flex; align-items: center; width: 24px; height: 12px;
    border: 1.5px solid rgba(255,255,255,.55); border-radius: 3.5px; padding: 1.5px;
    position: relative;
}
.sb-batt::after {
    content: ''; position: absolute; right: -3.6px; top: 3.4px;
    width: 2px; height: 5px; background: rgba(255,255,255,.55); border-radius: 0 1px 1px 0;
}
.sb-batt i { display: block; height: 100%; background: #fff; border-radius: 1.5px; }
.sb-batt.low i   { background: var(--ios-red); }
.sb-batt.saver i { background: var(--ios-orange); }

/* the page */
.view {
    position: absolute; top: 46px; left: 0; right: 0; bottom: 30px;
    overflow-y: auto; overflow-x: hidden; z-index: 10;
    background: var(--ios-bg);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.view.is-home { background: transparent; }
.view::-webkit-scrollbar { width: 5px; }
.view::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.view.enter { animation: viewIn .22s cubic-bezier(.32,.72,0,1); }
@keyframes viewIn { from { opacity: .4; transform: translateX(34px); } to { opacity: 1; transform: none; } }
.view.enter.back { animation-name: viewBack; }
@keyframes viewBack { from { opacity: .4; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .view.enter, .view.enter.back { animation: none; }
    .device { transition: none; }
}

.homebar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    display: flex; align-items: center; justify-content: center; z-index: 40;
}
.homepill { width: 134px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.82); cursor: pointer; }
.homepill:hover { background: #fff; }

/* ── lock screen ─────────────────────────────────────────────────────── */

.lock {
    position: absolute; inset: 0; z-index: 50;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 74px; cursor: grab;
    background:
        radial-gradient(85% 55% at 24% 10%, rgba(94,92,230,.48) 0%, transparent 62%),
        radial-gradient(80% 60% at 88% 34%, rgba(255,55,95,.26) 0%, transparent 62%),
        radial-gradient(90% 60% at 50% 102%, rgba(10,132,255,.32) 0%, transparent 62%),
        linear-gradient(165deg, #10121f 0%, #090b12 55%, #06070b 100%);
}
.lock.dragging { cursor: grabbing; }
.lock .faceid { font-size: 26px; opacity: .9; }
.lock .date  { margin-top: 16px; font-size: 20px; font-weight: 600; color: rgba(255,255,255,.92); }
.lock .clock { font-size: 82px; font-weight: 300; letter-spacing: -.035em; line-height: 1.02; margin-top: 2px; }
.lock .carrier { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.62); }
.lock .widgets {
    position: absolute; bottom: 86px; left: 24px; right: 24px;
    display: flex; justify-content: space-between;
}
.lock .widgets button {
    width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
    color: #fff; font-size: 19px;
}
.lock .hint {
    position: absolute; bottom: 42px; left: 0; right: 0; text-align: center;
    font-size: 12.5px; color: rgba(255,255,255,.75);
}
.lock .hint .arrow { display: block; font-size: 17px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }

/* passcode */
.passcode { position: absolute; inset: 0; z-index: 52; background: rgba(8,9,14,.96);
            display: flex; flex-direction: column; align-items: center; padding-top: 86px; }
.passcode h3 { font-weight: 500; font-size: 17px; margin: 0 0 22px; }
.passcode .dots { display: flex; gap: 20px; margin-bottom: 36px; }
.passcode .dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; display: block; }
.passcode .dots i.on { background: #fff; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
.pad button {
    width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 29px; font-weight: 300;
    font-family: inherit;
}
.pad button:hover { background: rgba(255,255,255,.24); }
.pad button.blank { background: none; cursor: default; }

/* ── home screen ─────────────────────────────────────────────────────── */

.home { padding: 22px 22px 0; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 10px; }
.app {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
}
.app .ic {
    width: 60px; height: 60px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    box-shadow: 0 5px 12px rgba(0,0,0,.4); position: relative;
    transition: transform .12s ease;
}
.app:hover .ic { transform: translateY(-2px) scale(1.04); }
.app:active .ic { transform: scale(.93); }
.app .nm { font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
    max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .badge {
    position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--ios-red); color: #fff; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,.3);
}
.pagedots { display: flex; justify-content: center; gap: 7px; margin: 22px 0 0; }
.pagedots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); display: block; }
.pagedots i.on { background: #fff; }
.dock {
    position: absolute; bottom: 38px; left: 12px; right: 12px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 30px; padding: 12px 10px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; z-index: 15;
}
.dock .nm { display: none; }

/* app library / search */
.library {
    position: absolute; inset: 0; z-index: 45;
    background: rgba(8,9,13,.88);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    padding: 58px 18px 30px; overflow-y: auto;
    animation: libIn .22s ease-out;
}
@keyframes libIn { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.library .searchbar {
    background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px;
    font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 22px;
}

/* ── Control Centre & notifications ──────────────────────────────────── */

.scrim { position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,.4); }

.cc {
    position: absolute; top: 0; left: 0; right: 0; z-index: 55;
    padding: 56px 14px 20px;
    background: rgba(26,28,34,.82);
    backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
    border-radius: 0 0 44px 44px;
    transform: translateY(-100%); transition: transform .24s cubic-bezier(.2,.8,.3,1);
    max-height: 100%; overflow-y: auto;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.cc.open { transform: translateY(0); }
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.mod {
    background: rgba(120,120,128,.34); border-radius: 20px; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.mod.span2 { grid-column: span 2; }
.mod.span4 { grid-column: span 4; }
.cbtn {
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(120,120,128,.5); color: #fff; font-size: 17px; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.cbtn:hover { filter: brightness(1.2); }
.cbtn.on { background: var(--ios-blue); }
.cbtn.on.green { background: var(--ios-green); color: #06310f; }
.cbtn.on.orange { background: var(--ios-orange); color: #3a2200; }
.cbtn.wide { width: auto; border-radius: 20px; padding: 0 14px; gap: 8px; font-size: 13px; }
.mod .row4 { display: flex; gap: 10px; flex-wrap: wrap; }
.mod .lbl { font-size: 11px; color: rgba(255,255,255,.75); }
.slider-v {
    height: 112px; width: 100%; border-radius: 18px; position: relative; overflow: hidden;
    background: rgba(120,120,128,.5); cursor: pointer;
}
.slider-v i { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; }
.slider-v span {
    position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
    font-size: 15px; color: rgba(0,0,0,.45); z-index: 2;
}
.cc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 11px; }
.cc-tiles .cbtn { width: 100%; height: 52px; border-radius: 18px; background: rgba(120,120,128,.34); }

.notifs {
    position: absolute; top: 0; left: 0; right: 0; z-index: 55;
    padding: 62px 14px 22px; min-height: 42%;
    background: rgba(12,13,17,.78);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 0 0 44px 44px;
    transform: translateY(-100%); transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.notifs.open { transform: translateY(0); }
.notif {
    background: rgba(70,70,78,.5); border-radius: 18px; padding: 12px 14px; margin-bottom: 9px;
}
.notif b { display: block; font-size: 12.5px; font-weight: 600; }
.notif span { display: block; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 3px; }

.pulltab-l, .pulltab-r {
    position: absolute; top: 0; height: 46px; z-index: 35; cursor: s-resize;
}
.pulltab-l { left: 0; width: 45%; }
.pulltab-r { right: 0; width: 45%; }

/* ── slide to power off ──────────────────────────────────────────────── */

.poweroff {
    position: absolute; inset: 0; z-index: 70;
    background: rgba(0,0,0,.84);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center;
    padding-top: 88px; animation: fadeIn .18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slider-off {
    width: 290px; height: 62px; border-radius: 31px; margin-top: 10px;
    background: rgba(255,255,255,.16); position: relative; overflow: hidden;
}
.slider-off .label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: rgba(255,255,255,.8);
    background: linear-gradient(100deg, rgba(255,255,255,.35) 20%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.35) 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2.4s linear infinite;
}
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.slider-off .knob {
    position: absolute; top: 4px; left: 4px; width: 54px; height: 54px; border-radius: 50%;
    background: #fff; color: var(--ios-red); display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: grab; z-index: 3;
}
.slider-off .knob:active { cursor: grabbing; }
.poweroff .cancel {
    margin-top: 40px; border: 0; background: none; color: #fff; font-size: 17px;
    cursor: pointer; font-family: inherit;
}
.poweroff .medical { margin-top: 28px; font-size: 12px; color: rgba(255,255,255,.5); }

/* boot */
.boot { position: absolute; inset: 0; z-index: 80; background: #000;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.boot .mark { font-size: 46px; color: #fff; }
.boot .bar { width: 160px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.boot .bar i { display: block; height: 100%; background: #fff; width: 0; animation: fill 2.1s ease-out forwards; }
@keyframes fill { to { width: 100%; } }

/* ── iOS list furniture ──────────────────────────────────────────────── */

.nav {
    position: sticky; top: 0; z-index: 6;
    background: rgba(18,18,20,.86);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 10px 14px; display: flex; align-items: center; gap: 4px;
    border-bottom: .5px solid var(--ios-sep);
}
.nav .bk {
    border: 0; background: none; color: var(--ios-blue); cursor: pointer;
    font-size: 16px; font-family: inherit; display: flex; align-items: center; gap: 3px;
    padding: 2px 4px; max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.nav .bk:hover { opacity: .75; }
.nav h2 {
    position: absolute; left: 0; right: 0; text-align: center;
    margin: 0; font-size: 16px; font-weight: 600; pointer-events: none;
}
.nav .edit { margin-left: auto; color: var(--ios-blue); font-size: 15px; background: none; border: 0;
    cursor: pointer; font-family: inherit; }

.big { padding: 16px 20px 10px; font-size: 33px; font-weight: 700; letter-spacing: -.02em; }

.search {
    margin: 0 16px 16px; background: var(--ios-group2); border-radius: 11px;
    padding: 9px 14px; color: var(--ios-dim); font-size: 14px; display: flex; gap: 8px;
}

.sect { margin: 0 16px 24px; }
.sect > .lbl {
    font-size: 12.5px; color: var(--ios-dim); padding: 0 16px 7px; text-transform: uppercase;
    letter-spacing: .02em;
}
.sect > .foot { font-size: 12px; color: var(--ios-dim); padding: 7px 16px 0; line-height: 1.45; }
.rows { background: var(--ios-group); border-radius: 11px; overflow: hidden; }

.row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: 0; background: none; color: var(--ios-ink); cursor: pointer;
    padding: 11px 14px; font-family: inherit; font-size: 15px; text-align: left; position: relative;
    min-height: 46px;
}
.row + .row::before {
    content: ''; position: absolute; top: 0; left: 48px; right: 0; height: .5px; background: var(--ios-sep);
}
.row.noicon + .row.noicon::before { left: 14px; }
.row:hover { background: rgba(255,255,255,.05); }
.row .ri {
    width: 29px; height: 29px; border-radius: 7px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--ios-group2);
}
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-weight: 400; font-size: 15px; }
.row .rt span { display: block; color: var(--ios-dim); font-size: 12.5px; margin-top: 2px; }
.row .rr { color: var(--ios-dim); font-size: 14px; flex: none; max-width: 52%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .chev { color: rgba(235,235,245,.3); font-size: 15px; flex: none; }
.row.plain { cursor: default; }
.row.plain:hover { background: none; }
.row.blue .rt b { color: var(--ios-blue); }
.row.red .rt b  { color: var(--ios-red); }
.row.center { justify-content: center; }
.row.center .rt { flex: none; text-align: center; }

/* the iOS switch */
.sw {
    flex: none; width: 51px; height: 31px; border-radius: 16px;
    background: #39393d; position: relative; transition: background .2s ease;
}
.sw::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
    border-radius: 50%; background: #fff; transition: left .2s cubic-bezier(.2,.8,.3,1);
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.sw.on { background: var(--ios-green); }
.sw.on::after { left: 22px; }

/* cards, notes, buttons */
.note {
    margin: 0 16px 20px; padding: 12px 15px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.55;
    background: rgba(255,159,10,.12); border: .5px solid rgba(255,159,10,.3); color: #ffc368;
}
.note.bad  { background: rgba(255,69,58,.12); border-color: rgba(255,69,58,.3); color: #ff8a80; }
.note.good { background: rgba(48,209,88,.12); border-color: rgba(48,209,88,.3); color: #6ee89a; }
.card {
    margin: 0 16px 20px; padding: 15px 17px; border-radius: 12px; background: var(--ios-group);
}
.card h3 { margin: 0 0 7px; font-size: 14.5px; font-weight: 600; }
.card p  { margin: 0; color: var(--ios-dim); font-size: 12.5px; line-height: 1.55; }

.ibtn {
    border: 0; border-radius: 12px; padding: 12px 20px; font-size: 15px; font-weight: 500;
    cursor: pointer; font-family: inherit; background: var(--ios-blue); color: #fff;
}
.ibtn:hover { filter: brightness(1.1); }
.ibtn[disabled] { opacity: .4; cursor: not-allowed; }
.ibtn.ghost { background: var(--ios-group); color: var(--ios-blue); }
.ibtn.red { background: var(--ios-group); color: var(--ios-red); }
.btnrow { display: flex; gap: 10px; padding: 0 16px 20px; flex-wrap: wrap; }

/* fields, laid out the way iOS lays them out: label left, value right */
.frow {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    position: relative; background: none; min-height: 46px;
}
.frow + .frow::before {
    content: ''; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--ios-sep);
}
.frow label { width: 108px; flex: none; font-size: 15px; }
.frow input, .frow select {
    flex: 1; min-width: 0; background: none; border: 0; color: var(--ios-ink);
    font-size: 15px; font-family: inherit; padding: 2px 0; text-align: left;
}
.frow input::placeholder { color: rgba(235,235,245,.3); }
.frow input:focus, .frow select:focus { outline: none; }
.frow select { color: var(--ios-dim); }
.frow.focusring { box-shadow: inset 0 0 0 2px var(--ios-blue); border-radius: 11px; }

/* alert */
.alert {
    position: absolute; inset: 0; z-index: 65; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; padding: 32px;
    animation: fadeIn .14s ease-out;
}
.alert .a {
    width: 100%; max-width: 270px; border-radius: 14px; overflow: hidden;
    background: rgba(44,44,46,.96); backdrop-filter: blur(18px);
    text-align: center;
}
.alert .a .body { padding: 19px 16px 16px; }
.alert h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; }
.alert p  { margin: 0; font-size: 12.5px; color: rgba(235,235,245,.75); line-height: 1.45; }
.alert .acts { display: flex; border-top: .5px solid var(--ios-sep); }
.alert .acts button {
    flex: 1; border: 0; background: none; color: var(--ios-blue); font-size: 15px;
    padding: 12px 8px; cursor: pointer; font-family: inherit;
}
.alert .acts button + button { border-left: .5px solid var(--ios-sep); }
.alert .acts button.danger { color: var(--ios-red); }
.alert .acts button.bold { font-weight: 600; }
.alert .acts button:hover { background: rgba(255,255,255,.07); }

/* sheet of choices, the iOS action sheet */
.sheet-pick { position: absolute; inset: 0; z-index: 66; background: rgba(0,0,0,.4);
    display: flex; align-items: flex-end; padding: 10px; animation: fadeIn .14s ease-out; }
.sheet-pick .s { width: 100%; }
.sheet-pick .grp { background: rgba(44,44,46,.96); border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
.sheet-pick button {
    width: 100%; border: 0; background: none; color: var(--ios-blue); font-size: 17px;
    padding: 15px; cursor: pointer; font-family: inherit;
}
.sheet-pick button + button { border-top: .5px solid var(--ios-sep); }
.sheet-pick .cancelgrp button { font-weight: 600; }

/* toast */
.toast {
    position: absolute; left: 16px; right: 16px; bottom: 46px;
    background: rgba(240,240,245,.96); color: #15171c;
    border-radius: 14px; padding: 12px 16px; font-size: 12.5px; z-index: 75;
    box-shadow: 0 10px 26px rgba(0,0,0,.5); animation: toastIn .2s ease-out;
}
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: var(--ios-blue); width: 0; transition: width .25s linear; }

/* mail */
.mail-item { padding: 12px 16px; cursor: pointer; position: relative; }
.mail-item + .mail-item::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--ios-sep);
}
.mail-item:hover { background: rgba(255,255,255,.05); }
.mail-item .from { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.mail-item .from span { color: var(--ios-dim); font-weight: 400; font-size: 12px; flex: none; }
.mail-item .subj { font-size: 13.5px; margin-top: 2px; }
.mail-item .prev { font-size: 12.5px; color: var(--ios-dim); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread::after {
    content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--ios-blue);
}

/* ── side panel ──────────────────────────────────────────────────────── */

.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.panel h2 { margin: 0 0 4px; font-size: .98rem; font-weight: 650; }
.panel .sub { margin: 0 0 14px; font-size: .78rem; color: var(--ink-dim); line-height: 1.6; }

.progress-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08);
    overflow: hidden; margin: 10px 0 16px; }
.progress-line i { display: block; height: 100%; background: var(--good); width: 0; transition: width .4s ease; }

.task { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.task:first-of-type { border-top: 0; }
.task .mark {
    flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; margin-top: 1px;
}
.task.done .mark { background: var(--good); border-color: var(--good); color: #06310f; }
.task .tx { flex: 1; min-width: 0; }
.task .tx b { display: block; font-size: .83rem; font-weight: 600; line-height: 1.4; }
.task.done .tx b { color: var(--ink-dim); text-decoration: line-through; }
.task .tx span { display: block; font-size: .75rem; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
.task .tx .path {
    display: inline-block; margin-top: 6px; font-size: .71rem;
    background: rgba(10,132,255,.12); border: 1px solid rgba(10,132,255,.26);
    color: #6cb6ff; padding: 3px 9px; border-radius: 7px;
}

.sheet table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.sheet td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.sheet td:first-child { color: var(--ink-dim); width: 46%; }
.sheet td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sheet tr:first-child td { border-top: 0; }

.keys { font-size: .75rem; color: var(--ink-dim); line-height: 1.9; }
.keys kbd {
    background: #202631; border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 6px; padding: 1px 7px; font-size: .72rem; color: var(--ink); font-family: inherit;
}
.done-banner {
    background: linear-gradient(135deg, rgba(48,209,88,.2), rgba(48,209,88,.06));
    border: 1px solid rgba(48,209,88,.4); color: #7ee2a0;
    border-radius: 14px; padding: 14px 16px; font-size: .82rem; line-height: 1.6;
}

html[dir="rtl"] .lab-head, html[dir="rtl"] .panel { text-align: right; }
html[dir="rtl"] .sheet td:last-child { direction: ltr; text-align: right; }

@media (max-width: 1080px) {
    .lab { grid-template-columns: minmax(0, 1fr); }
    .side { position: static; }
    .stage { min-height: 0; padding-bottom: 50px; }
}
@media (max-width: 440px) {
    .lab { padding: 14px 10px 40px; }
    .device { transform: scale(.85) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
    .stage { margin: -46px 0 -96px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Inside the site.

   /simulator/<device> frames this lab under the site's own navigation, in
   its light Apple palette. The page around the phone takes that palette;
   the phone stays a dark object, as a phone is. The lab's own title and the
   device-swap link go, because the site's tabs now do that job; the three
   controls stay. Nothing about how the device works changes here.
   ═══════════════════════════════════════════════════════════════════════ */
html.embed {
    --page: transparent;
    --panel: #ffffff;
    --line: rgba(0, 0, 0, .09);
    --ink: #1d1d1f;
    --ink-dim: #6e6e73;
}
html.embed body { background: transparent; }
html.embed .lab { padding: 10px 18px 22px; gap: 22px; }
html.embed .lab-head { justify-content: flex-end; }
html.embed .lab-head h1,
html.embed .lab-head .tag,
html.embed #android-btn { display: none; }
html.embed .minibtn { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1d1d1f; }
html.embed .minibtn:hover { border-color: rgba(0, 0, 0, .3); }
html.embed .minibtn[aria-pressed="true"] {
    background: rgba(0, 113, 227, .1); border-color: rgba(0, 113, 227, .4); color: #0071e3;
}
html.embed .panel { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
html.embed .side { position: static; }           /* sticky means nothing in a frame */
html.embed .progress-line { background: rgba(0, 0, 0, .07); }
html.embed .task .mark { border-color: rgba(0, 0, 0, .18); }
html.embed .task.done .mark { color: #fff; }
html.embed .task .tx .path {
    background: rgba(0, 113, 227, .08); border-color: rgba(0, 113, 227, .22); color: #0071e3;
}
html.embed .keys kbd { background: #f5f5f7; border-color: rgba(0, 0, 0, .12); color: #1d1d1f; }
html.embed .done-banner {
    background: rgba(48, 209, 88, .12); border-color: rgba(48, 209, 88, .35); color: #1f7a3a;
}
html.embed .shadow { opacity: .55; }

/* Framed, the page cannot scroll the phone along with the reader - a sticky
   column inside a frame sticks to nothing. So beside the phone the notes
   column is capped at the phone's own height and scrolls within itself: the
   device and the exercise stay in view together, which is the point of
   putting them side by side. Stacked on a narrow screen, nothing is capped. */
@media (min-width: 1081px) {
    html.embed .side {
        max-height: 880px;
        overflow-y: auto;
        padding-right: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .18) transparent;
    }
    html.embed .side::-webkit-scrollbar { width: 6px; }
    html.embed .side::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; }
    html[dir="rtl"].embed .side { padding-right: 0; padding-left: 6px; }
}

/* A rail turned away from the viewer takes no clicks, and neither does one
   seen exactly edge-on (.flat is set by the engine within 3 degrees of it):
   Chrome hit-tests an edge-on plane along the whole ray, so a click beside
   the phone was landing on a button it could not see. */
/* the rails' front faces inward, so their back is the side we see and
   click - it must stay visible */
.device.flat .edge { pointer-events: none; }

/* the engine marks which rail faces the viewer; the other takes no clicks */
.device:not(.show-right) .edge-r { pointer-events: none; }
.device:not(.show-left)  .edge-l { pointer-events: none; }

/* ═══ the view buttons beside the phone ═══
   A short column next to the device: front, the side buttons, (the volume
   rail,) the back. One click, one fixed pose - simpler than dragging, and
   the buttons it reveals are at a known, clickable angle. */
.stage { gap: 22px; align-items: flex-start; cursor: default; }
.stage.turning { cursor: default; }
.views {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 300px;
    flex: none;
}
.viewbtn {
    display: flex; align-items: center; gap: 8px;
    min-width: 128px;
    padding: 9px 12px;
    border-radius: 980px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer; text-align: start;
}
.viewbtn:hover { border-color: rgba(127,127,127,.5); }
.viewbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.viewbtn .vi { width: 1.3em; text-align: center; font-size: .95rem; }
html.embed .viewbtn { background: #fff; border-color: rgba(0,0,0,.12); color: #1d1d1f; }
html.embed .viewbtn.on { background: #0071e3; border-color: #0071e3; color: #fff; }
@media (max-width: 640px) {
    .stage { flex-direction: column; align-items: center; }
    .views { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 0; }
    .viewbtn { min-width: 0; }
}

/* Face-on, the four rails are seen exactly edge-on and draw as a hairline
   rectangle around the rounded body - a box the phone does not have. Within
   three degrees of face-on (.flat) they are not drawn at all; from any other
   angle they are the slab's thickness and show. */
.device.flat .edge { opacity: 0; }
.edge { transition: opacity .25s ease; }

/* corner facets: short strips on the arc between two rails, the slab's
   thickness tall, built by the engine from the device's measurements */
.corner {
    position: absolute; left: 50%; top: 50%;
    height: 40px; margin-top: -20px;
    background: linear-gradient(180deg, #5a616c, #2b3037 50%, #5a616c);
    pointer-events: none;
    transition: opacity .25s ease;
}
.device.flat .corner { opacity: 0; }

/* ═══ more-ios.js: wallpaper picker, AssistiveTouch, VoiceOver, display options ═══ */
.wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 4px; }
.wtile { aspect-ratio: 9 / 16; border-radius: 14px; border: 2px solid transparent; cursor: pointer; position: relative; padding: 0; }
.wtile.on { border-color: var(--ios-blue); }
.wtile span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); text-transform: capitalize; }
.assistive {
    position: absolute; right: 14px; bottom: 120px; z-index: 48;
    width: 52px; height: 52px; border-radius: 14px; border: 0; cursor: pointer;
    background: rgba(60,60,67,.72); color: #fff; font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,.4); backdrop-filter: blur(8px);
}
.vo-banner {
    position: absolute; left: 12px; right: 12px; top: 52px; z-index: 47;
    background: rgba(10,132,255,.9); color: #fff; font-size: 12px; font-weight: 600;
    border-radius: 10px; padding: 7px 12px; text-align: center; pointer-events: none;
}
.notif { position: relative; }
.notif .nx { position: absolute; top: 10px; right: 10px; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; }
html.reduce-motion .view.enter, html.reduce-motion .view.enter.back { animation: none !important; }
html.reduce-motion .library, html.reduce-motion .cc, html.reduce-motion .notifs { transition: none !important; animation: none !important; }
.screen.bold-text .view { font-weight: 600; }
.screen.button-shapes .ibtn, .screen.button-shapes .nav .bk { text-decoration: underline; }
.screen.high-contrast .view { --ios-group: #000; --ios-dim: #d1d1d6; }
.screen.high-contrast .rows { border: 1px solid rgba(255,255,255,.35); }

/* ═══ full screen: the device and the exercises, nothing else ═══ */
html.fs, html.fs body { height: 100%; overflow: hidden; }
html.fs .lab { max-width: none; height: 100vh; box-sizing: border-box; padding: 8px 16px 10px; gap: 10px 18px; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
html.fs .lab-head { grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
html.fs .lab-head h1, html.fs .lab-head .tag, html.fs .lab-head .other, html.fs #wide-btn { display: none; }
html.fs .side { position: static; display: flex; min-height: 0; max-height: none; height: auto; align-self: stretch; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-right: 4px; }
html.fs .stage { touch-action: pan-y; }
html.fs .side .panel:not(:first-child) { display: none; }
html.fs .lab.wide { grid-template-columns: minmax(0, 1fr) 400px; } html.fs .lab.wide .side { display: flex; }
html.fs .stage { min-height: 0; height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
html.fs #fs-btn { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.5); }
@media (max-width: 900px) { html.fs .lab { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } html.fs .side { max-height: 34vh; } }
html.fs .device { zoom: 1; transform: scale(var(--fs-zoom, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
html.fs .device.settling { transition: transform .55s cubic-bezier(.22,1,.36,1); }

/* phones: no full-screen mode (the browser chrome fights it), two header buttons in one row */
@media (max-width: 900px), (pointer: coarse) { #fs-btn { display: none !important; } }
@media (max-width: 760px) { .lab-head { gap: 8px !important; } .lab-head .minibtn { padding: 8px 12px !important; font-size: .8rem !important; } }

/* drawn radio icons: Control Centre, the status bar, Settings tiles */
.cc-svg { width: 22px; height: 22px; display: block; }
.sb-svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
.sb-svg + .sb-svg { margin-left: 4px; }
.ri-svg { width: 18px; height: 18px; display: block; color: #fff; }
.row .ri:has(.tile-blue) { background: var(--ios-blue); }
.row .ri:has(.tile-green) { background: var(--ios-green); }

/* the Apple logo is drawn: U+F8FF only exists in Apple's fonts */
.apl { width: 1em; height: 1em; display: block; }

/* full screen: the lab sheet stays in the side column - scroll down past the exercises to reach it */
html.fs .side .panel.sheet { display: block; flex: none; }