/* Settings additions and fixes (ios-settings.js): the drawn row icons, the
   Wi-Fi rows with their ⓘ, the account avatar and the Action Button hero. */

/* a row icon: the white glyph on its coloured rounded square */
.row .ri:has(> .sx-t), .row .ri:has(> .sx-a), .row .ri:has(> .sx-b), .row .ri:has(> .sx-av) {
    background: none; padding: 0; overflow: visible;
}
.sx-t {
    width: 29px; height: 29px; border-radius: 7px; flex: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08);
    color: #fff;
}
.sx-t > svg { width: 19px; height: 19px; display: block; color: #fff; }
.sx-t.sx-emoji { font-size: 16px; }
.sx-a { width: 29px; height: 29px; display: block; border-radius: 7px; overflow: hidden; }
.sx-a > svg, .sx-a > * { width: 29px !important; height: 29px !important; display: block; }
.sx-b { width: 24px; height: 24px; display: block; }
.sx-b > svg { width: 24px; height: 24px; display: block; }

/* the Apple Account row: initials in a grey disc, a little larger */
.sx-av {
    width: 29px; height: 29px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #a1a1a8, #6c6c72); color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.row.sx-acct { min-height: 62px; }
.row.sx-acct .sx-av { width: 44px; height: 44px; font-size: 17px; }
.row.sx-acct .rt b { font-size: 17px; font-weight: 500; }
.row.sx-acct + .row::before, .row + .row.sx-acct::before { left: 72px; }

/* the separator starts after an icon: wider icons keep the iOS inset */
.row:has(> .ri > .sx-t) + .row::before { left: 55px; }

/* Wi-Fi: the connected network's tick, the lock, the signal and the ⓘ */
.row.sx-net { gap: 8px; }
.row.sx-net .sx-chk { width: 18px; flex: none; color: var(--ios-blue); font-weight: 600; font-size: 15px; text-align: center; }
.row.sx-net.noicon { padding-left: 40px; }
.row.sx-net .sx-nr { display: flex; align-items: center; gap: 7px; flex: none; color: var(--ios-ink); }
.row.sx-net .sx-lock { width: 12px; height: 12px; opacity: .9; }
.row.sx-net .sx-sig { width: 17px; height: 17px; }
.row.sx-net .sx-i {
    color: var(--ios-blue); font-size: 21px; line-height: 1; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 2px;
}
.row.sx-net .rt span.sx-warn { color: var(--ios-orange); }
.row.sx-net + .row::before, .row + .row.sx-net::before { left: 40px; }
.row.sx-dim .rt b { color: var(--ios-dim); }

/* Action Button: a drawing of the button and what it does now */
.sx-act-hero {
    display: flex; align-items: center; gap: 16px; margin: 4px 16px 18px; padding: 16px 18px;
    border-radius: 14px; background: var(--ios-group);
}
.sx-act-pill {
    width: 16px; height: 44px; border-radius: 8px; flex: none;
    background: linear-gradient(90deg, #8b8b90, #d9d9de 45%, #8b8b90);
    box-shadow: 0 0 0 2px rgba(10,132,255,.6), 0 0 14px rgba(10,132,255,.45);
}
.sx-act-hero b { display: block; font-size: 17px; font-weight: 600; }
.sx-act-hero span { display: block; color: var(--ios-dim); font-size: 12.5px; margin-top: 3px; }

/* light appearance, if the phone is switched to it */
.screen.light .sx-t { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }