/* ═══════════════════════════════════════════════════════════════════════
   The iPhone's own screens: home grid, dock, status bar, lock screen,
   passcode, App Library and Control Centre.

   Overrides only - sim-ios.css is left as it was, and every class the
   engine and the exercises use is kept. Sizes are an iPhone 15 Pro's, in
   points, scaled to this 356-px-wide screen (x 0.906): 56-px icons on a
   4-column grid, a 86-px frosted dock, the clock centred in the left "ear"
   beside the Dynamic Island. The app icons themselves are drawn by
   ios-icons.js; the few emoji the engine still writes outside cbtn()
   (lock screen torch and camera, padlock, slider glyphs) are swapped here
   for line glyphs with a mask, the markup untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.screen {
    --g-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Crect x='1.5' y='11' width='17' height='14' rx='3.4'/%3E%3Cpath d='M5.2 11.5V7.6a4.8 4.8 0 0 1 9.6 0v3.9' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
    --g-torch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 2.8h8v3.4l-2 3.2V20a1.6 1.6 0 0 1-1.6 1.6h-.8A1.6 1.6 0 0 1 10 20V9.4L8 6.2zM12 12.3a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E");
    --g-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 8.6a2 2 0 0 1 2-2h2.4l1.3-1.9h4.6l1.3 1.9H18a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zM12 8.7a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3Ccircle cx='12' cy='12.7' r='2.4'/%3E%3C/svg%3E");
    --g-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.3 5.3L7 7M17 17l1.7 1.7M5.3 18.7L7 17M17 7l1.7-1.7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --g-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 9.2h3.2l4.6-3.9c.5-.4 1.2 0 1.2.6v12.2c0 .6-.7 1-1.2.6l-4.6-3.9H3.5a1 1 0 0 1-1-1v-3.6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.2 6.4a8 8 0 0 1 0 11.2' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── app icons ───────────────────────────────────────────────────────── */

.app { gap: 5px; }
.app .ic {
    width: 56px; height: 56px; border-radius: 12.6px; font-size: 26px;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
/* a drawn icon carries its own squircle: no square behind it */
.app .ic > .ios-ic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app .ic:has(> .ios-ic) { background: transparent !important; box-shadow: none; border-radius: 0; }
.app .nm {
    font-size: 11px; letter-spacing: .005em; line-height: 1.25; max-width: 74px;
    color: rgba(255,255,255,.97); text-shadow: 0 .5px 2px rgba(0,0,0,.42);
}
.app .badge {
    top: -6px; right: -7px; min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: 11px; font-size: 12.5px; font-weight: 500; box-shadow: none;
}

/* ── home screen: grid, page dots, dock ──────────────────────────────── */

.view.is-home { bottom: 0; }
.home { padding: 26px 23px 0; }
.home .grid { gap: 15px 0; }

/* the dots sit just above the dock, wherever the grid ends */
.home .pagedots {
    position: absolute; left: 0; right: 0; bottom: 122px; margin: 0; gap: 8px;
}
.pagedots i { width: 7px; height: 7px; background: rgba(255,255,255,.38); }
.pagedots i.on { background: rgba(255,255,255,.95); }

.dock {
    bottom: 22px; left: 11px; right: 11px;
    padding: 15px 12px; gap: 0; border-radius: 33px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14);
}

/* ── status bar and Dynamic Island ───────────────────────────────────── */

/* centred on the island, the clock in the left ear, the glyphs in the right */
.statusbar {
    height: 55px; padding: 0;
    font-size: 15px; font-weight: 600; letter-spacing: -.015em;
}
.statusbar .left  { width: calc(50% - 59px); text-align: center; padding-left: 14px; white-space: nowrap; }
.statusbar .right { width: calc(50% - 59px); justify-content: center; gap: 5px; padding-right: 10px; white-space: nowrap; }
.statusbar .sb-ico { font-size: 12.5px; font-weight: 600; }
.sb-svg { width: 16px; height: 16px; vertical-align: -3px; }
.sb-svg + .sb-svg { margin-left: 5px; }
.sb-batt {
    width: 25px; height: 12.5px; padding: 1.5px;
    border: 1px solid rgba(255,255,255,.42); border-radius: 4px;
}
.sb-batt::after { right: -3.6px; top: 3.25px; width: 2px; height: 4px; background: rgba(255,255,255,.42); }
.sb-batt i { border-radius: 2px; }

.island { box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.island::after {
    right: 12px; width: 11px; height: 11px;
    background: radial-gradient(circle at 36% 30%, #34466a 0%, #0c1424 42%, #020306 76%);
    box-shadow: 0 0 0 1.5px #0d0d10;
}

/* inside an app the strips behind the status bar and the home indicator are
   the app's, not the wallpaper */
.view:not(.is-home) { box-shadow: 0 -46px 0 0 #0f0f11, 0 30px 0 0 var(--ios-bg); }

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

.lock { padding-top: 62px; }
.lock .faceid {
    font-size: 0; width: 17px; height: 22px; opacity: .92; background: #fff;
    -webkit-mask: var(--g-lock) center / contain no-repeat; mask: var(--g-lock) center / contain no-repeat;
}
.lock .date {
    margin-top: 16px; font-size: 19px; font-weight: 600; letter-spacing: .005em;
    color: rgba(255,255,255,.86);
}
/* 82px so that a 12-hour "12:22 PM" (the engine writes AM/PM) still fits the glass */
.lock .clock {
    font-size: 82px; font-weight: 600; letter-spacing: -.03em; line-height: .98;
    margin-top: 0; color: rgba(255,255,255,.93); white-space: nowrap;
}
.lock .carrier { margin-top: 10px; font-weight: 500; }
.lock .widgets { bottom: 66px; left: 40px; right: 40px; }
.lock .widgets button {
    position: relative; font-size: 0;
    background: rgba(28,28,30,.42);
}
.lock .widgets button::before {
    content: ''; position: absolute; inset: 0; margin: auto; width: 21px; height: 21px; background: #fff;
    -webkit-mask: var(--g-torch) center / contain no-repeat; mask: var(--g-torch) center / contain no-repeat;
}
.lock .widgets button[data-act="open-app"]::before { -webkit-mask-image: var(--g-camera); mask-image: var(--g-camera); }
.lock .hint { bottom: 26px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }

/* passcode */
.passcode { padding-top: 96px; }
.passcode h3 { font-size: 20px; font-weight: 400; margin-bottom: 24px; }
.passcode .dots { gap: 24px; margin-bottom: 50px; }
.pad { gap: 16px 26px; }
.pad button {
    width: 76px; height: 76px; font-size: 34px; font-weight: 300;
    background: rgba(255,255,255,.16);
}
.pad button[data-arg="⌫"] { background: none; font-size: 22px; }

/* ── App Library ─────────────────────────────────────────────────────── */

.library { padding: 62px 20px 30px; }
.library .searchbar {
    text-align: center; border-radius: 12px; padding: 9px 14px; margin-bottom: 24px;
    font-size: 15px; background: rgba(118,118,128,.3); color: rgba(235,235,245,.62);
}
.library .grid { gap: 18px 0; }

/* ── Control Centre ──────────────────────────────────────────────────── */

.cc-grid { gap: 14px; }
.mod { border-radius: 22px; }
.mod .lbl { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.72); }
.cc-grid .cbtn .cc-svg { width: 24px; height: 24px; }
.cc-grid .cbtn.on.green, .cc-grid .cbtn.on.orange { color: #fff; }

/* connectivity: four round buttons in a square */
.cc-grid > .mod:first-child .row4 {
    display: grid; grid-template-columns: repeat(2, 54px); gap: 14px 18px; justify-content: center;
}
.cc-grid > .mod:first-child .cbtn { width: 54px; height: 54px; }
.cc-grid > .mod:first-child .lbl { text-align: center; }

/* now playing: bare transport glyphs on one line */
.cc-grid > .mod:nth-child(2) .row4 { flex-wrap: nowrap; justify-content: space-between; padding: 0 2px; margin-top: auto; }
.cc-grid > .mod:nth-child(2) .cbtn { background: none; width: 40px; height: 40px; color: rgba(255,255,255,.92); }
.cc-grid > .mod:nth-child(2) .cbtn .cc-svg { width: 27px; height: 27px; }

/* brightness and volume */
.slider-v { height: 120px; border-radius: 22px; background: rgba(120,120,128,.42); }
.slider-v span { font-size: 0; bottom: 12px; height: 22px; }
.slider-v span::before {
    content: ''; display: block; width: 22px; height: 22px; margin: 0 auto; background: rgba(60,60,67,.62);
    -webkit-mask: var(--g-sun) center / contain no-repeat; mask: var(--g-sun) center / contain no-repeat;
}
.slider-v[data-act="cc-volume"] span::before { -webkit-mask-image: var(--g-speaker); mask-image: var(--g-speaker); }

/* the small square controls: white when on, the glyph in the control's colour */
.cc-tiles { gap: 14px; margin-top: 14px; }
.cc-tiles .cbtn {
    height: auto; min-height: 52px; aspect-ratio: 1 / 1; border-radius: 20px;
    background: rgba(120,120,128,.32);
}
.cc-tiles .cbtn .cc-svg { width: 26px; height: 26px; }
.cc-tiles .cbtn.on { background: #fff; color: #1c1c1e; }
.cc-tiles .cbtn.on.orange { color: #f5a300; }
.cc-tiles .cbtn.on.green { color: #28b14c; }
.cc-tiles .cbtn.on[data-act="cc-focus"] { color: #5e5ce6; }