/* ═══════════════════════════════════════════════════════════════════════
   A phone you can pick up with a mouse.

   Topic 4.1 teaches menu paths - Settings → System → Reset options, and so
   on - and a path is a thing you walk, not a thing you read. So this is a
   real Android built out of CSS: a slab with six faces, side buttons that
   stick out of the frame and can be held down, a lock screen, quick
   settings you pull from the top, and a Settings tree deep enough that
   finding something in it is the exercise.

   Three ideas carry the whole file:

     1. The device is a solid. .device keeps preserve-3d and six faces are
        placed around it - front, back, and four 14px edges turned a quarter
        turn. Tilting it turns the solid, so the sides really come into
        view; nothing here is a picture of a phone.

     2. The screen is the only scrolling thing. Everything else is fixed
        furniture - status bar, navigation bar, the pulled-down shade.

     3. Nothing is loaded from outside. No fonts, no icons, no scripts off
        the web: the site's stylesheet policy forbids it, and a lab that
        needs the network to teach networking is a poor lab. Every icon on
        the phone is a character or a shape.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --page:      #0e1116;
    --panel:     #161b22;
    --line:      rgba(255,255,255,.09);
    --ink:       #e6edf3;
    --ink-dim:   #9aa5b1;
    --accent:    #2f81f7;
    --good:      #2ea043;
    --warn:      #d29922;
    --bad:       #f85149;

    /* the phone's own palette - Android's dark Material */
    --and-bg:    #0f1115;
    --and-card:  #1b1f27;
    --and-card2: #232834;
    --and-ink:   #e3e3e3;
    --and-dim:   #9fa6b2;
    --and-blue:  #a8c7fa;
    --and-blue-s:#004a77;

    --frame:     #2a2f3a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif;
    min-height: 100%;
}

body {
    background:
        radial-gradient(1100px 700px at 18% -10%, #1b2535 0%, transparent 60%),
        radial-gradient(900px 600px at 95% 110%, #19222e 0%, transparent 60%),
        var(--page);
}

/* ── the page around the phone ───────────────────────────────────────── */

.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;
    margin-bottom: 4px;
}
.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(47,129,247,.14);
    border: 1px solid rgba(47,129,247,.3);
    color: #79b8ff;
    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.other { border-color: rgba(61,220,132,.35); color: #7ee2a0; }
.minibtn[aria-pressed="true"] {
    background: rgba(47,129,247,.18);
    border-color: rgba(47,129,247,.45);
    color: #9ecbff;
}

/* ── the stage and the solid ─────────────────────────────────────────── */

.stage {
    perspective: 1900px;
    perspective-origin: 50% 42%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 26px 0 10px;
    min-height: 840px;
    user-select: none;
    -webkit-user-select: none;
}

.device {
    position: relative;
    width: 372px;
    height: 782px;
    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); }

/* the ground shadow is a separate flat element: a shadow on a rotated
   solid rotates with it, which looks like the phone is glued to a wall */
.shadow {
    position: absolute;
    left: 50%;
    bottom: -42px;
    width: 300px;
    height: 46px;
    transform: translate(-50%, 0) translateZ(-60px) 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: 44px;
    backface-visibility: hidden;
}

/* front: the frame, with the screen cut into it */

/* ── 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(145deg, #3a4250 0%, #20242d 32%, #171b22 70%, #2b313c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        inset 0 0 2px 2px rgba(0,0,0,.5);
    padding: 11px;
}

/* back: glass, a camera island, a logo */
.face-back {
    transform: translateZ(-20px) rotateY(180deg);
    background:
        radial-gradient(120% 90% at 20% 8%, #2d3542 0%, #161a21 55%, #0d1015 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.cam-island {
    position: absolute;
    top: 26px; left: 24px;
    width: 118px; height: 112px;
    border-radius: 28px;
    background: linear-gradient(160deg, #262c37, #11141a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.lens {
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #525c6e 0%, #1a1e26 55%, #0a0c10 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.07), 0 0 0 3px rgba(0,0,0,.35);
}
.lens::after {
    content: '';
    display: block;
    width: 9px; height: 9px; margin: 6px 0 0 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140,190,255,.75), transparent 70%);
}
.back-logo {
    position: absolute;
    bottom: 54px; left: 0; right: 0;
    text-align: center;
    color: rgba(255,255,255,.17);
    font-size: .8rem;
    letter-spacing: .32em;
    font-weight: 600;
}

/* The four edges: each a 40px face, centred on the device, turned a
   quarter turn and pushed out by half the device - 186px sideways, 391px
   up and down. Centred first, or the rail swings away from the slab when
   the slab turns (measured: 51px off at 55 degrees). */
.edge { position: absolute; background: linear-gradient(90deg, #4a5261, #262b35 45%, #4a5261); }
/* The rails stop short of the rounded corners and have rounded ends, so the
   slab reads as one rounded body from the side and never as a box poking
   out past the face's corners. */
.edge-r {
    top: 44px; left: 50%; width: 40px; height: calc(100% - 88px);
    transform: translateX(-50%) rotateY(90deg) translateZ(186px);
}
.edge-l {
    top: 44px; left: 50%; width: 40px; height: calc(100% - 88px);
    transform: translateX(-50%) rotateY(-90deg) translateZ(186px);
}
.edge-t {
    top: 50%; left: 44px; width: calc(100% - 88px); height: 40px;
    transform: translateY(-50%) rotateX(90deg) translateZ(391px);
    background: linear-gradient(180deg, #4a5261, #262b35 50%, #4a5261);
}
.edge-b {
    top: 50%; left: 44px; width: calc(100% - 88px); height: 40px;
    transform: translateY(-50%) rotateX(-90deg) translateZ(391px);
    background: linear-gradient(180deg, #4a5261, #262b35 50%, #4a5261);
}
/* the speaker grille and the charging port, on the bottom edge */
.port {
    position: absolute;
    top: 16px; left: 50%;
    width: 36px; 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: 52px; height: 5px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, #05070a 0 3px, transparent 3px 6px);
}
.grille.left  { left: 44px; }
.grille.right { right: 44px; }

/* side buttons: children of the edges, pushed out along Z so they stand
   proud of the frame when the phone is turned */
/* 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, #7d8797, #4a5261 55%, #5c6677);
    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(0px); filter: brightness(.8); }
/* power on its own at the top, the volume rocker as a pair below it */
.btn-power  { top: 82px; height: 64px; }
.btn-volup  { top: 176px; height: 56px; }
.btn-voldn  { top: 236px; height: 56px; }

/* a moving sheen so the glass reads as glass while the phone turns */
.sheen {
    position: absolute;
    inset: 0;
    border-radius: 44px;
    transform: translateZ(21px);
    pointer-events: none;
    background: linear-gradient(
        var(--sheen-a, 115deg),
        rgba(255,255,255,.14) 0%,
        rgba(255,255,255,.03) 18%,
        transparent 38%,
        transparent 62%,
        rgba(255,255,255,.05) 86%,
        rgba(255,255,255,.12) 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 {
    /* The phone is an English Android whatever language the page around it
       is in. Without this, an RTL page flipped the status bar - clock on the
       right, battery on the left - and put the full stop of every toast at
       the wrong end. A real support call is read in the menu's own
       direction, so the slab keeps its own. */
    direction: ltr;
    text-align: left;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: var(--and-bg);
    color: var(--and-ink);
    font-size: 14px;
    isolation: isolate;
    cursor: default;
}
.screen.off { background: #000; }
.screen.off > *:not(.boot) { display: none; }

/* the wallpaper lives behind everything and never scrolls */
.wall {
    position: absolute;
    inset: 0;
    background: #0d1117 url(wall-default.svg?v=1) center / cover no-repeat;
}
.wall.dim::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
}

/* status bar */
.statusbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    z-index: 58;          /* above the lock screen, below the punch-hole */
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.statusbar .right { display: flex; align-items: center; gap: 6px; }
.sb-ico { font-size: 11px; opacity: .95; }
.sb-batt {
    display: inline-flex; align-items: center;
    width: 22px; height: 11px;
    border: 1.4px solid #fff; border-radius: 3px;
    padding: 1.4px; position: relative;
}
.sb-batt::after {
    content: ''; position: absolute; right: -3.4px; top: 3px;
    width: 2px; height: 5px; background: #fff; border-radius: 0 1px 1px 0;
}
.sb-batt i { display: block; height: 100%; background: #fff; border-radius: 1px; }
.sb-batt.low i { background: var(--bad); }
.sb-batt.saver i { background: var(--warn); }

/* the punch-hole camera, drawn over everything */
.punch {
    position: absolute;
    top: 9px; left: 50%;
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: #05070a;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    z-index: 60;
    pointer-events: none;
}

/* the page area between status bar and nav bar */
.view {
    position: absolute;
    top: 30px; left: 0; right: 0; bottom: 26px;
    /* an app covers the wallpaper; the home screen is the wallpaper */
    background: var(--and-bg);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.view::-webkit-scrollbar { width: 5px; }
.view::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.view.is-home { background: transparent; }

.view.enter { animation: viewIn .19s ease-out; }
@keyframes viewIn {
    from { opacity: 0; transform: translateX(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.view.enter.back { animation-name: viewBack; }
@keyframes viewBack {
    from { opacity: 0; transform: translateX(-14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .view.enter, .view.enter.back { animation: none; }
    .device { transition: none; }
}

/* gesture navigation bar */
.navbar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}
.navpill {
    width: 118px; height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,.72);
    cursor: pointer;
}
.navpill:hover { background: #fff; }

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

.lock {
    position: absolute; inset: 0; z-index: 50;
    /* its own ground. Without this the home screen showed straight through a
       locked phone - two clocks, one on top of the other. */
    background:
        radial-gradient(90% 60% at 20% 8%,  rgba(47,129,247,.34) 0%, transparent 60%),
        radial-gradient(80% 60% at 92% 32%, rgba(0,200,160,.20) 0%, transparent 62%),
        radial-gradient(70% 50% at 50% 104%, rgba(190,80,255,.22) 0%, transparent 60%),
        linear-gradient(160deg, #0a1018 0%, #0b0e14 55%, #080b10 100%);
    display: flex; flex-direction: column; align-items: center;
    padding-top: 92px;
    cursor: grab;
}
.lock.dragging { cursor: grabbing; }
.lock .clock { font-size: 64px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.lock .date  { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 14px; }
.lock .lk    { margin-top: 26px; font-size: 20px; opacity: .8; }
.lock .carrier { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.65); }
.lock .hint {
    position: absolute; bottom: 80px;   /* clear of a toast at 42px */ left: 0; right: 0;
    text-align: center; font-size: 12.5px; color: rgba(255,255,255,.78);
}
.lock .hint .arrow { display: block; font-size: 18px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }

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

.home { padding: 18px 16px 0; }
.homeclock {
    text-align: center; margin: 10px 0 26px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.homeclock b { display: block; font-size: 42px; font-weight: 300; letter-spacing: -.02em; }
.homeclock span { font-size: 12.5px; color: rgba(255,255,255,.8); }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 6px;
}
.app {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer;
    border: 0; background: none; padding: 0; font-family: inherit;
}
.app .ic {
    width: 52px; height: 52px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    transition: transform .12s ease;
    position: relative;
}
.app:hover .ic { transform: translateY(-2px) scale(1.04); }
.app:active .ic { transform: scale(.94); }
.app .nm {
    font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
    max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app .badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--bad); color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

.dock {
    position: absolute;
    bottom: 34px; left: 12px; right: 12px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 26px;
    padding: 12px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    z-index: 15;
}

/* app drawer */
.drawer {
    position: absolute; inset: 0;
    background: rgba(10,13,18,.93);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 45;
    padding: 46px 16px 30px;
    overflow-y: auto;
    animation: drawerIn .2s ease-out;
}
@keyframes drawerIn { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .grid { gap: 22px 6px; }
.drawer .searchbar {
    background: rgba(255,255,255,.1);
    border-radius: 980px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--and-dim);
    margin-bottom: 22px;
}

/* ── quick settings shade ────────────────────────────────────────────── */

.shade {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 55;
    background: #1b2027;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 18px 40px rgba(0,0,0,.6);
    padding: 34px 16px 16px;
    transform: translateY(-100%);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
    max-height: 100%;
    overflow-y: auto;
}
.shade.open { transform: translateY(0); }
.shade .qs-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--and-dim); margin-bottom: 12px;
}
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
    border: 0; font-family: inherit;
    background: var(--and-card2);
    color: var(--and-dim);
    border-radius: 20px;
    padding: 12px 10px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    cursor: pointer;
    text-align: left;
    min-height: 74px;
}
.tile .ti { font-size: 17px; }
.tile .tt { font-size: 11px; font-weight: 600; line-height: 1.25; }
.tile .ts { font-size: 10px; opacity: .8; }
.tile:hover { filter: brightness(1.12); }
.tile.on {
    background: var(--and-blue);
    color: #062e6f;
}
.shade .brightness {
    margin: 14px 0 6px;
    height: 42px; border-radius: 21px;
    background: var(--and-card2);
    position: relative; overflow: hidden;
    cursor: pointer;
}
.shade .brightness i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--and-blue);
    width: 70%;
}
.shade .brightness span {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: #062e6f; z-index: 2;
}
.shade .qs-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; color: var(--and-dim); font-size: 12px;
}
.qs-icobtn {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--and-card2); border: 0; color: var(--and-ink);
    cursor: pointer; font-size: 14px;
}
.qs-icobtn:hover { filter: brightness(1.2); }

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

/* the strip you drag down from, invisible but real */
.pulltab {
    position: absolute; top: 0; left: 0; right: 0; height: 30px;
    z-index: 35; cursor: s-resize;
}

/* ── power menu ──────────────────────────────────────────────────────── */

.powermenu {
    position: absolute; inset: 0; z-index: 70;
    background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn .14s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.powermenu .card {
    background: var(--and-card);
    border-radius: 26px;
    padding: 10px;
    width: 230px;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.powermenu button {
    display: flex; align-items: center; gap: 12px;
    width: 100%; border: 0; background: none; color: var(--and-ink);
    padding: 14px 16px; border-radius: 18px; cursor: pointer;
    font-size: 14px; font-family: inherit; text-align: left;
}
.powermenu button:hover { background: var(--and-card2); }
.powermenu button .e { font-size: 17px; }

/* boot */
.boot {
    position: absolute; inset: 0; z-index: 80;
    background: #000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 22px;
}
.boot .mark { font-size: 30px; letter-spacing: .1em; color: #3ddc84; font-weight: 700; }
.boot .ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: #3ddc84;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Android UI furniture ────────────────────────────────────────────── */

.app-top {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px 10px;
    position: sticky; top: 0;
    background: var(--and-bg);
    z-index: 5;
}
.app-top .bk {
    border: 0; background: none; color: var(--and-ink);
    font-size: 19px; cursor: pointer; line-height: 1;
    width: 30px; height: 30px; border-radius: 50%;
}
.app-top .bk:hover { background: var(--and-card2); }
.app-top h2 { margin: 0; font-size: 17px; font-weight: 500; }

.big-title { padding: 6px 24px 18px; font-size: 30px; font-weight: 400; line-height: 1.15; }

.searchpill {
    margin: 0 16px 16px;
    background: var(--and-card);
    border-radius: 980px;
    padding: 12px 18px;
    color: var(--and-dim);
    font-size: 13.5px;
    display: flex; align-items: center; gap: 10px;
}

.sect { margin: 0 12px 10px; }
.sect > .lbl {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--and-blue);
    padding: 14px 12px 8px;
}
.rows { background: var(--and-card); border-radius: 22px; overflow: hidden; }
.rows + .rows { margin-top: 10px; }

.row {
    display: flex; align-items: center; gap: 14px;
    width: 100%; border: 0; background: none; color: var(--and-ink);
    padding: 14px 16px; cursor: pointer; font-family: inherit;
    text-align: left; font-size: 14px; position: relative;
}
.row + .row::before {
    content: ''; position: absolute; top: 0; left: 56px; right: 0;
    height: 1px; background: rgba(255,255,255,.055);
}
.row:hover { background: rgba(255,255,255,.045); }
.row .ri {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--and-card2);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex: none;
}
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-weight: 500; font-size: 14px; }
.row .rt span { display: block; color: var(--and-dim); font-size: 12px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; }
.row .rr { color: var(--and-dim); font-size: 12px; flex: none; }
.row.plain { cursor: default; }
.row.plain:hover { background: none; }
.row.danger .rt b { color: var(--bad); }

/* the Material switch */
.sw {
    flex: none;
    width: 46px; height: 26px; border-radius: 14px;
    background: #3a4150; position: relative;
    transition: background .16s ease;
    border: 2px solid #5c6472;
}
.sw::after {
    content: ''; position: absolute;
    top: 50%; left: 3px; transform: translateY(-50%);
    width: 15px; height: 15px; border-radius: 50%;
    background: #9fa6b2;
    transition: left .16s cubic-bezier(.2,.8,.3,1), width .16s ease, height .16s ease, background .16s ease;
}
.sw.on { background: var(--and-blue); border-color: var(--and-blue); }
.sw.on::after { left: 23px; width: 20px; height: 20px; background: #062e6f; }

/* cards, notes, buttons inside apps */
.card {
    background: var(--and-card);
    border-radius: 22px;
    margin: 0 12px 12px;
    padding: 16px 18px;
}
.card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.card p  { margin: 0; color: var(--and-dim); font-size: 12.5px; line-height: 1.55; }

.note {
    margin: 0 12px 12px; padding: 12px 16px;
    border-radius: 18px; font-size: 12.5px; line-height: 1.5;
    background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.3);
    color: #e3b341;
}
.note.bad  { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.32); color: #ff7b72; }
.note.good { background: rgba(46,160,67,.12); border-color: rgba(46,160,67,.32); color: #56d364; }

.mbtn {
    border: 0; border-radius: 980px; padding: 11px 22px;
    font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    background: var(--and-blue); color: #062e6f;
}
.mbtn:hover { filter: brightness(1.08); }
.mbtn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.mbtn.ghost { background: transparent; color: var(--and-blue); box-shadow: inset 0 0 0 1px rgba(168,199,250,.5); }
.mbtn.danger { background: rgba(248,81,73,.16); color: #ff7b72; box-shadow: inset 0 0 0 1px rgba(248,81,73,.4); }
.btnrow { display: flex; gap: 10px; padding: 4px 16px 18px; flex-wrap: wrap; }

.field { padding: 4px 16px 14px; }
.field label { display: block; font-size: 11.5px; color: var(--and-blue); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
    width: 100%; background: var(--and-card); color: var(--and-ink);
    border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    padding: 11px 14px; font-size: 13.5px; font-family: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--and-blue); outline-offset: -1px; }
.field .hint { font-size: 11px; color: var(--and-dim); margin-top: 5px; }

/* Material dialog */
.dialog {
    position: absolute; inset: 0; z-index: 65;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: fadeIn .13s ease-out;
}
.dialog .d {
    background: var(--and-card); border-radius: 26px;
    padding: 22px; width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.dialog h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.dialog p  { margin: 0 0 18px; font-size: 13px; color: var(--and-dim); line-height: 1.55; }
.dialog .acts { display: flex; justify-content: flex-end; gap: 8px; }
.dialog .acts button {
    border: 0; background: none; color: var(--and-blue);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    padding: 10px 16px; border-radius: 980px; font-family: inherit;
}
.dialog .acts button:hover { background: rgba(168,199,250,.12); }
.dialog .acts button.danger { color: #ff7b72; }

/* toast */
.toast {
    position: absolute; left: 16px; right: 16px; bottom: 42px;
    background: #e6edf3; color: #11151a;
    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; } }

/* progress line, for installs and syncs */
.bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: var(--and-blue); width: 0; transition: width .25s linear; }

/* mail */
.mail-item { padding: 14px 16px; cursor: pointer; position: relative; }
.mail-item + .mail-item::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: rgba(255,255,255,.06);
}
.mail-item:hover { background: rgba(255,255,255,.04); }
.mail-item .from { font-weight: 600; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.mail-item .from span { color: var(--and-dim); font-weight: 400; font-size: 11px; flex: none; }
.mail-item .subj { font-size: 13px; margin-top: 3px; }
.mail-item .prev { font-size: 12px; color: var(--and-dim); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .subj { font-weight: 600; }

/* ── the side panel: brief, tasks, provider sheet ────────────────────── */

.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;
    display: flex; align-items: center; gap: 8px;
}
.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: #fff; }
.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(47,129,247,.12); border: 1px solid rgba(47,129,247,.26);
    color: #79b8ff; 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: #222935; 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(46,160,67,.2), rgba(46,160,67,.06));
    border: 1px solid rgba(46,160,67,.4);
    color: #7ee787;
    border-radius: 14px; padding: 14px 16px; font-size: .82rem; line-height: 1.6;
}

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

/* ── narrow screens: the phone first, the panel under it ─────────────── */

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


/* ═══════════════════════════════════════════════════════════════════════
   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 #ios-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(46, 160, 67, .12); border-color: rgba(46, 160, 67, .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, #4a5261, #262b35 50%, #4a5261);
    pointer-events: none;
    transition: opacity .25s ease;
}
.device.flat .corner { opacity: 0; }

/* ═══ more.js: the PIN pad, the notification list, the wallpaper picker ═══ */
.pinpad {
    position: absolute; inset: 0; z-index: 52;
    background: rgba(8,10,14,.96);
    display: flex; flex-direction: column; align-items: center; padding-top: 70px;
}
.pinpad h3 { font-weight: 500; font-size: 17px; margin: 0 0 20px; }
.pinpad .dots { display: flex; gap: 18px; margin-bottom: 30px; }
.pinpad .dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; display: block; }
.pinpad .dots i.on { background: #fff; }
.pinpad .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.pinpad .pad button {
    width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 27px; font-weight: 300; font-family: inherit;
}
.pinpad .pad button:hover { background: rgba(255,255,255,.22); }
.pinpad .pad button.blank { background: none; cursor: default; }
.pinpad .hint { margin-top: 22px; font-size: 12px; color: rgba(255,255,255,.55); }
.pinpad .cancel { margin-top: 14px; border: 0; background: none; color: var(--and-blue); font-size: 14px; cursor: pointer; font-family: inherit; }

.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; position: relative; }
.notif + .notif::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: rgba(255,255,255,.055); }
.notif .ni { width: 32px; height: 32px; border-radius: 50%; background: var(--and-card2); display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.notif .nt { flex: 1; min-width: 0; }
.notif .nt b { display: block; font-size: 13px; font-weight: 500; }
.notif .nt span { display: block; font-size: 12px; color: var(--and-dim); margin-top: 2px; }
.notif .nx { font-size: 11px; color: var(--and-dim); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.notif .nx button { border: 0; background: var(--and-card2); color: var(--and-ink); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 11px; }

.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(--and-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; }
.screen.show-taps .view button:active { outline: 2px solid var(--and-blue); outline-offset: 2px; }

/* ═══ 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; } }

/* Wi-Fi and mobile data are drawn icons; on a tile the icon is its own switch */
.qs-svg { width: 19px; height: 19px; display: block; }
.sb-svg { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; }
.statusbar .sb-ico .sb-svg + .sb-svg { margin-left: 3px; }
.tile .ti.tap { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -6px 0 -4px -6px; border-radius: 50%; cursor: pointer; }
.tile .ti.tap:hover { background: rgba(255,255,255,.12); }
.tile.on .ti.tap:hover { background: rgba(6,46,111,.12); }

/* the drawn Chrome mark fills its tile the way the real icon does */
.chrome-ic { width: 1.25em; height: 1.25em; display: block; }
.app .ic .chrome-ic { width: 38px; height: 38px; }
.row .ri .chrome-ic { width: 22px; height: 22px; }

/* the boot logo: the green robot head over the wordmark, drawn */
.boot .mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.boot .mark .droid { width: 72px; height: 45px; display: block; color: #3ddc84; }
.boot .mark span { color: #fff; font-size: 30px; letter-spacing: .04em; font-weight: 600; }

/* 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; }