/* Settings lists (android-settings.js): the Pixel look. The home screen of
   Settings has a tinted circle behind each icon; every page below it has
   plain monochrome glyphs, primary-coloured section headings and quiet
   dividers. Drawn icons replace the emoji the rows were written with. */

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

.row .ri:has(> .sx-c), .row .ri:has(> .sx-m), .row .ri:has(> .sx-a) {
    background: none; overflow: visible;
}
.sx-c {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #1d1b20;
}
.sx-c > svg { width: 21px; height: 21px; display: block; }
.sx-m { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--m3-onv, #c4c6cc); }
.sx-m > svg { width: 22px; height: 22px; display: block; }
.sx-a { width: 34px; height: 34px; display: block; border-radius: 50%; overflow: hidden; }
.sx-a > svg { width: 34px !important; height: 34px !important; display: block; }
svg.sx-g { display: block; }
/* a page row with a monochrome glyph sits closer to its text, as on a Pixel */
.view.sx-set .row:has(> .ri > .sx-m) { gap: 20px; }
.view.sx-set .row:has(> .ri > .sx-m) .ri { width: 24px; }
.view.sx-set .row:has(> .ri > .sx-m) + .row::before,
.view.sx-set .row + .row:has(> .ri > .sx-m)::before { left: 60px; }

/* ── the Settings home screen ──────────────────────────────────────── */

.view.sx-root .rows { background: transparent; }
.view.sx-root .row { padding: 13px 18px; gap: 18px; }
.view.sx-root .row + .row::before { display: none; }
.view.sx-root .row .ri { width: 38px; height: 38px; }
.view.sx-root .row .rt b { font-size: 16px; font-weight: 400; }
.view.sx-root .row .rt span { font-size: 13px; color: var(--m3-onv, #c4c6cc); }
.view.sx-root .row .rr { display: none; }
.view.sx-root .row:hover { background: rgba(255,255,255,.05); border-radius: 18px; }

/* ── pages below it ────────────────────────────────────────────────── */

.view.sx-set .sect > .lbl { color: var(--m3-pri, #a8c7fa); font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; padding: 16px 16px 6px; }
.view.sx-set .row .rt b { font-weight: 400; font-size: 15px; }
.view.sx-set .row .rt span { white-space: pre-line; }

/* ── a Wi-Fi network's page ────────────────────────────────────────── */

.app-top .sx-edit {
    margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: none; color: var(--m3-on, #e3e3e6); font-size: 19px; cursor: pointer;
}
.app-top .sx-edit:hover { background: rgba(255,255,255,.08); }
.sx-nethead { text-align: center; padding: 6px 16px 14px; }
.sx-nethead .sx-netic {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--m3-sch, #27292e); color: var(--m3-pri, #a8c7fa);
}
.sx-nethead .sx-netic svg { width: 30px; height: 30px; }
.sx-nethead b { display: block; font-size: 20px; font-weight: 400; }
.sx-nethead > span:last-child { display: block; font-size: 13px; color: var(--m3-onv, #c4c6cc); margin-top: 4px; }
.sx-pills { display: flex; justify-content: center; gap: 10px; padding: 0 16px 16px; }
.sx-pill {
    flex: 1; max-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 0; border-radius: 18px; padding: 12px 6px 10px; cursor: pointer; font-family: inherit;
    background: var(--m3-sch, #27292e); color: var(--m3-on, #e3e3e6); font-size: 12.5px;
}
.sx-pill svg { width: 22px; height: 22px; color: var(--m3-pri, #a8c7fa); }
.sx-pill:hover { filter: brightness(1.15); }
.sx-qr {
    width: 132px; height: 132px; margin: 4px auto 12px; border-radius: 10px; background:
        repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 22px 22px;
    box-shadow: 0 0 0 8px #fff; image-rendering: pixelated;
}

/* App info: the drawn icon on its own */
.sx-bigic { width: 64px; height: 64px; margin: 0 auto 10px; }
.sx-bigic .sx-a, .sx-bigic .sx-a > svg { width: 64px !important; height: 64px !important; }