/* ═══════════════════════════════════════════════════════════════════════
   android-home.css — the screen as Android 14/15 draws it.

   Loads after sim.css and only restyles: every class the engine and the
   exercises use stays as it is. The drawn icons come from android-icons.js;
   the few glyphs the engine writes as text where no hook reaches (the
   Settings icon on the home screen, the Quick Settings footer, the back
   arrow, the browser mark in Settings lists) are drawn here as data URIs.
   Material 3 dark tones throughout; no blur, so it stays light on phones.
   (Built from scratchpad p4/home.src.css by build-css.mjs.)
   ═══════════════════════════════════════════════════════════════════════ */

.screen {
    --m3-sc:     #1d1e22;   /* surface container */
    --m3-sch:    #27292e;   /* … high */
    --m3-schh:   #313338;   /* … highest */
    --m3-on:     #e3e3e6;
    --m3-onv:    #c4c6cc;
    --m3-pri:    #a8c7fa;
    --m3-onpri:  #062e6f;
    font-family: "Google Sans Text", "Google Sans", Roboto, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── status bar and gesture handle ───────────────────────────────────── */

.statusbar {
    padding: 0 18px 0 22px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .015em;
    text-shadow: 0 0 3px rgba(0,0,0,.28);
}
.statusbar .left { font-variant-numeric: tabular-nums; }
.statusbar .right { gap: 5px; }
.sb-ico { font-size: 11.5px; }
/* the battery: a filled capsule, as Android 15 draws it */
.sb-batt {
    width: 21px; height: 11px;
    border: 0; border-radius: 3.5px; padding: 0;
    background: rgba(255,255,255,.36);
}
.sb-batt i { border-radius: 3.5px 1px 1px 3.5px; }
.sb-batt::after { right: -2.8px; top: 3.5px; width: 1.8px; height: 4px; background: rgba(255,255,255,.5); }

/* inside an app, the bars take the app's own colour (edge to edge) */
.view:not(.is-home) ~ .statusbar,
.view:not(.is-home) ~ .navbar { background: var(--and-bg); }
.screen:has(> .shade) > .statusbar,
.screen:has(> .lock) > .statusbar { background: none; }

.navpill {
    width: 34%; max-width: 116px;
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,.82);
}

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

/* the glance at the top, the apps low, over the dock and the search bar */
.view.is-home .home {
    min-height: 100%;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: 12px 12px 0;
}
.homeclock {
    text-align: left;
    margin: 18px 10px 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.homeclock b {
    font-size: 46px; font-weight: 400; line-height: 1.04;
    letter-spacing: -.01em; color: #e4ecff;
    font-variant-numeric: tabular-nums;
}
.homeclock span {
    display: block; margin-top: 6px;
    font-size: 14px; font-weight: 500; color: rgba(255,255,255,.92);
}
.view.is-home .grid { margin-top: auto; margin-bottom: 146px; padding-top: 22px; }
.grid { gap: 20px 4px; }

/* adaptive icons: a circle, the drawing fills it */
.app { gap: 7px; }
.app .ic {
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 23px;
    box-shadow: 0 2px 6px rgba(0,0,0,.26);
}
.app .ic:has(> .aic) { background: none !important; }
.app .ic > .aic { width: 100%; height: 100%; display: block; border-radius: 50%; }
.app .nm {
    font-size: 11.5px; font-weight: 400; letter-spacing: .01em;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.35);
    max-width: 76px;
}
.app .badge {
    top: -3px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px;
    background: #e5534b;
    font-size: 10px; font-weight: 600;
    box-shadow: 0 0 0 2px rgba(0,0,0,.16);
}

/* the Settings icon is written as text by the engine: draw it */
.app[data-arg="settings"] .ic {
    font-size: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='aic aic-settings' viewBox='0 0 48 48' aria-hidden='true'%3E%3Cdefs%3E%3ClinearGradient id='aicg2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237b8088'/%3E%3Cstop offset='1' stop-color='%2344474e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='24' cy='24' r='24' fill='url(%23aicg2)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M21.57 13.89L22.02 10.75A13.4 13.4 0 0 1 25.98 10.75L26.43 13.89A10.4 10.4 0 0 1 29.43 15.13L31.97 13.23A13.4 13.4 0 0 1 34.77 16.03L32.87 18.57A10.4 10.4 0 0 1 34.11 21.57L37.25 22.02A13.4 13.4 0 0 1 37.25 25.98L34.11 26.43A10.4 10.4 0 0 1 32.87 29.43L34.77 31.97A13.4 13.4 0 0 1 31.97 34.77L29.43 32.87A10.4 10.4 0 0 1 26.43 34.11L25.98 37.25A13.4 13.4 0 0 1 22.02 37.25L21.57 34.11A10.4 10.4 0 0 1 18.57 32.87L16.03 34.77A13.4 13.4 0 0 1 13.23 31.97L15.13 29.43A10.4 10.4 0 0 1 13.89 26.43L10.75 25.98A13.4 13.4 0 0 1 10.75 22.02L13.89 21.57A10.4 10.4 0 0 1 15.13 18.57L13.23 16.03A13.4 13.4 0 0 1 16.03 13.23L18.57 15.13A10.4 10.4 0 0 1 21.57 13.89Z M28.6 24a4.6 4.6 0 1 0 -9.2 0a4.6 4.6 0 1 0 9.2 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
.screen:has(.aic.themed) .app[data-arg="settings"] .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='aic aic-settings themed' viewBox='0 0 48 48' aria-hidden='true'%3E%3Cdefs%3E%3ClinearGradient id='aicg3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232f4f7d'/%3E%3Cstop offset='1' stop-color='%23213a60'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='24' cy='24' r='24' fill='url(%23aicg3)'/%3E%3Cpath fill='%23d6e4ff' fill-rule='evenodd' d='M21.57 13.89L22.02 10.75A13.4 13.4 0 0 1 25.98 10.75L26.43 13.89A10.4 10.4 0 0 1 29.43 15.13L31.97 13.23A13.4 13.4 0 0 1 34.77 16.03L32.87 18.57A10.4 10.4 0 0 1 34.11 21.57L37.25 22.02A13.4 13.4 0 0 1 37.25 25.98L34.11 26.43A10.4 10.4 0 0 1 32.87 29.43L34.77 31.97A13.4 13.4 0 0 1 31.97 34.77L29.43 32.87A10.4 10.4 0 0 1 26.43 34.11L25.98 37.25A13.4 13.4 0 0 1 22.02 37.25L21.57 34.11A10.4 10.4 0 0 1 18.57 32.87L16.03 34.77A13.4 13.4 0 0 1 13.23 31.97L15.13 29.43A10.4 10.4 0 0 1 13.89 26.43L10.75 25.98A13.4 13.4 0 0 1 10.75 22.02L13.89 21.57A10.4 10.4 0 0 1 15.13 18.57L13.23 16.03A13.4 13.4 0 0 1 16.03 13.23L18.57 15.13A10.4 10.4 0 0 1 21.57 13.89Z M28.6 24a4.6 4.6 0 1 0 -9.2 0a4.6 4.6 0 1 0 9.2 0Z'/%3E%3C/svg%3E") !important; }

/* the dock: no tray, no labels, and the search bar under it */
.dock {
    left: 10px; right: 10px; bottom: 4px;
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0 4px;
    row-gap: 16px;
}
.dock .app .nm {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dock::after {
    content: '';
    grid-column: 1 / -1;
    height: 46px; border-radius: 23px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.4' cy='10.4' r='5.9' fill='none' stroke='%23c4c6cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8 14.8l5 5' fill='none' stroke='%23c4c6cc' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 17px center / 20px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9.1' y='3.4' width='5.8' height='10.8' rx='2.9' fill='%23c4c6cc'/%3E%3Cpath d='M6.1 11.4a5.9 5.9 0 0 0 11.8 0M12 17.4v3.2' fill='none' stroke='%23c4c6cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 17px center / 20px no-repeat,
        rgba(30,31,36,.94);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    pointer-events: none;
}

/* ── app drawer ──────────────────────────────────────────────────────── */

.drawer {
    background: #131316;   /* opaque: even 2% let the home screen show through on a dark ground */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 44px 12px 30px;
}
.drawer .grid { gap: 22px 4px; }
.drawer .searchbar,
.searchpill {
    display: block;
    background: var(--m3-sch);
    border-radius: 26px;
    padding: 13px 18px;
    font-size: 14.5px;
    color: var(--m3-onv);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer .searchbar { margin: 0 4px 24px; }
/* the 🔍 / 🔒 at the start of a search bar: a plain grey symbol, as Android draws it */
.drawer .searchbar::first-letter,
.searchpill::first-letter {
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;
    color: var(--m3-onv);
    font-size: 15px;
    padding-right: 4px;
}

/* ── Quick Settings ──────────────────────────────────────────────────── */

.scrim { background: rgba(0,0,0,.55); }
.shade {
    display: flex; flex-direction: column;
    background: #1b1c20;
    border-radius: 0 0 30px 30px;
    padding: 36px 14px 14px;
    box-shadow: 0 16px 36px rgba(0,0,0,.55);
}
.shade > * { flex-shrink: 0; }
.shade .qs-head {
    order: 0;
    font-size: 13.5px; font-weight: 500; color: var(--m3-on);
    padding: 0 6px; margin-bottom: 14px;
}
/* the brightness slider sits over the tiles */
.shade .brightness {
    order: 1;
    margin: 0 0 12px;
    height: 44px; border-radius: 22px;
    background: var(--m3-schh);
}
.shade .brightness i { background: var(--m3-pri); border-radius: 22px; min-width: 44px; }
.shade .brightness span { left: 16px; font-size: 14px; font-weight: 500; color: var(--m3-onpri); }
.shade .tiles { order: 2; }
.shade .qs-foot { order: 3; }

/* tiles: two columns of rounded tiles, the icon at the start */
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 1px;
    align-items: center; align-content: center;
    min-height: 62px;
    padding: 9px 12px 9px 14px;
    border-radius: 31px;
    background: var(--m3-schh);
    color: var(--m3-on);
}
.tile:hover { filter: brightness(1.1); }
.tile .ti {
    grid-row: 1 / span 2;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    font-size: 17px; line-height: 1;
}
.tile .ti .qs-svg { width: 20px; height: 20px; }
.tile:not(:has(> .ts)) .ti { grid-row: 1; }
.tile .tt { grid-column: 2; font-size: 12.5px; font-weight: 500; line-height: 1.22; }
.tile .ts {
    grid-column: 2; font-size: 11px; opacity: 1; color: var(--m3-onv);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile.on { background: var(--m3-pri); color: var(--m3-onpri); }
.tile.on .ts { color: rgba(6,46,111,.78); }
/* a tile whose icon is its own switch shows the icon in a circle */
.tile .ti.tap {
    width: 36px; height: 36px;
    margin: 0 0 0 -7px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.tile.on .ti.tap { background: rgba(6,46,111,.12); }
.tile .ti.tap:hover { background: rgba(255,255,255,.16); }
.tile.on .ti.tap:hover { background: rgba(6,46,111,.2); }

/* the footer: device name, then round buttons */
.shade .qs-foot { margin-top: 14px; padding: 0 2px 0 8px; color: var(--m3-onv); font-size: 12px; }
.qs-icobtn {
    width: 38px; height: 38px;
    position: relative; vertical-align: middle;
    font-size: 0;
    background: var(--m3-schh) center / 19px no-repeat;
}
.qs-icobtn[data-arg="settings"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 9 30 30'%3E%3Cpath fill='%23e3e3e6' fill-rule='evenodd' d='M21.57 13.89L22.02 10.75A13.4 13.4 0 0 1 25.98 10.75L26.43 13.89A10.4 10.4 0 0 1 29.43 15.13L31.97 13.23A13.4 13.4 0 0 1 34.77 16.03L32.87 18.57A10.4 10.4 0 0 1 34.11 21.57L37.25 22.02A13.4 13.4 0 0 1 37.25 25.98L34.11 26.43A10.4 10.4 0 0 1 32.87 29.43L34.77 31.97A13.4 13.4 0 0 1 31.97 34.77L29.43 32.87A10.4 10.4 0 0 1 26.43 34.11L25.98 37.25A13.4 13.4 0 0 1 22.02 37.25L21.57 34.11A10.4 10.4 0 0 1 18.57 32.87L16.03 34.77A13.4 13.4 0 0 1 13.23 31.97L15.13 29.43A10.4 10.4 0 0 1 13.89 26.43L10.75 25.98A13.4 13.4 0 0 1 10.75 22.02L13.89 21.57A10.4 10.4 0 0 1 15.13 18.57L13.23 16.03A13.4 13.4 0 0 1 16.03 13.23L18.57 15.13A10.4 10.4 0 0 1 21.57 13.89Z M28.6 24a4.6 4.6 0 1 0 -9.2 0a4.6 4.6 0 1 0 9.2 0Z'/%3E%3C/svg%3E"); background-size: 20px; }
.qs-icobtn[data-act="qs-notifs"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e3e3e6' d='M12 3.4c-3.2 0-5.5 2.5-5.5 5.7v3.7L4.7 15.9v1.2h14.6v-1.2l-1.8-3.1V9.1c0-3.2-2.3-5.7-5.5-5.7zM9.7 18.5a2.4 2.4 0 0 0 4.6 0z'/%3E%3C/svg%3E"); }
.qs-icobtn[data-act="power-menu"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6v7.6M7.3 6.7a7.4 7.4 0 1 0 9.4 0' fill='none' stroke='%23062e6f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat, var(--m3-pri); }
.qs-icobtn small {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 3px;
    box-sizing: border-box; border-radius: 8px;
    background: var(--m3-pri); color: var(--m3-onpri);
    font-weight: 700; line-height: 16px; text-align: center;
}

/* ── lock screen: the wallpaper, dimmed, with the big clock ──────────── */

.lock { padding-top: 84px; }
@supports selector(:has(*)) {
    .lock { background: rgba(0,0,0,.3); }
    .screen:has(> .lock) > .view,
    .screen:has(> .lock) > .navbar,
    .screen:has(> .lock) > .drawer,
    .screen:has(> .lock) > .scrim,
    .screen:has(> .lock) > .shade { visibility: hidden; }
    /* the carrier stands where the small clock was */
    .screen:has(> .lock) > .statusbar .left { visibility: hidden; }
    .lock .carrier { position: absolute; top: 8px; left: 22px; margin: 0; font-size: 12.5px; font-weight: 500; color: #fff; }
}
.lock .clock {
    font-size: 78px; font-weight: 400; line-height: 1;
    letter-spacing: -.015em; color: #dce7ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.lock .date { margin-top: 12px; font-size: 15px; font-weight: 500; color: #fff; }
.lock .lk {
    position: absolute; left: 0; right: 0; bottom: 128px;
    margin: 0; text-align: center;
    font-size: 19px; opacity: .92;
    filter: grayscale(1) brightness(2.4);
}
.lock .hint { font-size: 13px; color: rgba(255,255,255,.86); }

/* ── app bars, search bars, notifications (Settings lists belong to android-settings.css) ─────────────────────────── */

.app-top { padding: 12px 14px 10px 10px; gap: 8px; }
.app-top .bk {
    position: relative; flex: none;
    width: 40px; height: 40px;
    font-size: 0;
}
.app-top .bk::before {
    content: '';
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12H5.2M11.2 5.6L4.8 12l6.4 6.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12H5.2M11.2 5.6L4.8 12l6.4 6.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.app-top h2 { font-size: 20px; font-weight: 400; letter-spacing: 0; }

.searchpill { margin: 2px 16px 16px; padding: 12px 18px; background: var(--m3-sch); }

/* the browser's icon in Settings lists, App info and Privacy: the lab's
   own globe, not a brand mark (the engine still writes its old SVG there) */
svg.chrome-ic { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='aic aic-chrome' viewBox='0 0 48 48' aria-hidden='true'%3E%3Cdefs%3E%3ClinearGradient id='aicg4' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234fc3dc'/%3E%3Cstop offset='1' stop-color='%230b7590'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='24' cy='24' r='24' fill='url(%23aicg4)'/%3E%3Ccircle cx='24' cy='24' r='11.8' fill='%23fff'/%3E%3Cg fill='none' stroke='%230b7590' stroke-width='1.7'%3E%3Cellipse cx='24' cy='24' rx='5.2' ry='11.8'/%3E%3Cpath d='M12.2 24h23.6M13.9 18.3h20.2M13.9 29.7h20.2'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; border-radius: 50%; }
svg.chrome-ic > * { display: none; }
/* App info draws it on a white square: let the circle stand alone */
.view div:has(> svg.chrome-ic) { background: none !important; }
.view div:has(> svg.chrome-ic) > svg.chrome-ic { width: 100%; height: 100%; }

/* notifications: each its own rounded card, stacked */
.rows:has(> .notif) { background: none; display: flex; flex-direction: column; gap: 3px; }
.notif { background: var(--and-card); border-radius: 6px; padding: 14px; }
.notif:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.notif:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.notif + .notif::before { display: none; }
.notif .ni { width: 34px; height: 34px; background: rgba(168,199,250,.16); }
.notif .nt b { font-size: 13.5px; }