/* Findmykids Android (dark). 1 CSS px = 1 dp; the stage is 384 x 854 dp (1200 x 2670 px at density 500). */
@font-face { font-family: 'Google Sans'; font-weight: 400; src: url('../assets/fonts/google_sans_regular.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Google Sans'; font-weight: 500; src: url('../assets/fonts/google_sans_medium.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Google Sans'; font-weight: 700; src: url('../assets/fonts/google_sans_bold.woff2') format('woff2'); font-display: block; }

:root {
  --fs: 1;   /* text scale: Android font size; the test phone runs at 0.85 (Prototype settings → Text size) */
  /* palette from resources.arsc (night values) */
  --bg: #000000;
  --surface: #1a1a1a;
  --surface-2: #262626;
  --line: #2e2e2e;
  --ink: #ffffff;
  --ink-2: #e0e0e0;
  --mute: #9a9a9a;
  --blue: #0085ff;          /* saturate_b 500 */
  --blue-deep: #002147;     /* saturate_b 100 night */
  --blue-mid: #004494;      /* saturate_b 300 night */
  --blue-light: #d6edff;    /* saturate_b 100 day */
  --blue-soft: #70baff;     /* saturate_b 300 day */
  --red: #f23f54;           /* saturate_r 500 */
  --red-deep: #480911;      /* saturate_r 100 night */
  --green: #06a747;         /* saturate_g 500 */
  --green-deep: #072c16;
  --green-ink: #43d07c;
  --orange: #fa7500;        /* saturate_o 500 */
  --orange-deep: #452000;
  --map-bg: #242f3e;
  /* neutrals measured on the device */
  --btn: #000000;           /* floating map buttons, pin rims and labels */
  --ink-3: #c0c0c0;
  --chip: #3a3a3a;
  --grip: #3d3d3d;
  --track: #333333;
  --track-2: #444444;
  --sw-off: #4a4a4a;
  --toast: #2c2c2c;
  --btn-grey: #3a3d44;
  --btn-grey-ink: #c9ccd2;
  --pin-ink: #000000;
  --shadow: none;
}
/* light theme: day values of the same resources (palette.json), set by setTheme() in app.js */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f6f6f6;       /* deep 10 */
  --surface-2: #ecedee;     /* deep 50 */
  --line: #ecedee;
  --ink: #000000;
  --ink-2: #3f4145;         /* deep 800 */
  --ink-3: #62666d;         /* deep 600 */
  --mute: #7a7d84;          /* deep 500 */
  --blue-deep: #d6edff;     /* saturate_b 100 day */
  --blue-mid: #70baff;      /* saturate_b 300 day */
  --blue-soft: #026be8;     /* saturate_b 600 day */
  --red-deep: #ffe0e4;      /* saturate_r 100 day */
  --green-deep: #d2f4e0;    /* saturate_g 100 day */
  --green-ink: #0e8b40;     /* saturate_g 600 day */
  --orange-deep: #ffe5ce;   /* saturate_o 100 day */
  --map-bg: #f5f5f5;
  --btn: #ffffff;
  --chip: #ecedee;
  --grip: #c8c9cc;
  --track: #e3e4e5;
  --track-2: #c8c9cc;
  --sw-off: #c8c9cc;
  --toast: #2c2c2c;
  --btn-grey: #e3e4e5;
  --btn-grey-ink: #7a7d84;
  --pin-ink: #ffffff;
  --shadow: 0 1px 6px rgba(0, 0, 0, .14);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0c0f; color: #e9ecf1; font-family: 'Google Sans', 'Roboto', system-ui, sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; }

/* ------------------------------------------------------------ desktop layout */
.layout { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px 16px; }
.panel { width: 280px; }
.panel h1 { margin: 0 0 4px; color: var(--blue); font-size: calc(28px * var(--fs)); }
.panel .muted { color: #8a93a3; margin: 0 0 20px; font-size: calc(14px * var(--fs)); }
.panel .jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.panel .jumps button { background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 9px 10px; font-size: calc(13px * var(--fs)); text-align: left; }
.panel .jumps button:hover { border-color: #3d4656; }
.panel .toggle { display: flex; gap: 8px; align-items: center; font-size: calc(14px * var(--fs)); color: #c7cdd8; margin-bottom: 14px; }
.panel .hints { margin: 0; padding-left: 18px; color: #aab2c0; font-size: calc(13px * var(--fs)); line-height: 1.6; }
.phone { --w: min(384px, calc((100vh - 64px) * 384 / 854)); width: calc(var(--w) + 22px); height: calc(var(--w) * 854 / 384 + 22px); padding: 11px;
  border-radius: 46px; background: #15171b; box-shadow: inset 0 0 0 2px #34373e, 0 30px 80px rgba(0, 0, 0, .55); flex: none; }
.screen { position: relative; width: var(--w); height: calc(var(--w) * 854 / 384); overflow: hidden; border-radius: 36px; background: #000; }
#stage { --H: 854px; --st: 32px; --sbb: 0px; position: absolute; left: 0; top: 0; width: 384px; height: 854px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: 'Google Sans', sans-serif; user-select: none; -webkit-user-select: none; }
/* phone: the screen fills the whole viewport, the stage height adapts (see fit() in app.js) */
@media (max-width: 760px) {
  html, body { background: var(--bg); overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
  .layout { padding: 0; gap: 0; min-height: 0; height: 100%; }
  .panel { display: none; }
  /* the phone frame is pinned to the screen edges: on iPhone Home Screen apps 100vh / 100dvh can stop short of the Home indicator */
  .phone { padding: 0; border-radius: 0; background: none; box-shadow: none; position: fixed; inset: 0; width: auto; height: auto; }
  .screen { border-radius: 0; width: 100%; height: 100%; }
}

/* ------------------------------------------------------------ primitives */
.ic { display: inline-block; width: 24px; height: 24px; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.statusbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; padding: 0 24px 0 21px; display: flex; align-items: center; justify-content: space-between;
  font: 500 calc(14.5px * var(--fs)) 'Google Sans'; letter-spacing: .2px; z-index: 50; pointer-events: none; }
.statusbar .r { display: flex; gap: 6px; align-items: center; }
.statusbar .r i { display: block; background: currentColor; }
.screen-layer { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: var(--bg); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, 0, 0, 1); z-index: 20; overflow: hidden; }
.page.on { transform: none; }
.page.under { transform: translateX(-24%); }
.page .content { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; overflow-y: auto; scrollbar-width: none; }
.page .content::-webkit-scrollbar { display: none; }
.topbar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--st) + 57px); padding-top: calc(var(--st) + 8px); display: flex; align-items: center; justify-content: center; background: var(--surface);
  font: 500 calc(15.6px * var(--fs)) 'Google Sans'; z-index: 2; }
.topbar .l, .topbar .rbtn { position: absolute; top: calc(var(--st) + 8px); width: 40px; height: 40px; border-radius: 14px; background: var(--btn); display: grid; place-items: center; }
.topbar .l { left: 16px; }
.topbar .rbtn { right: 16px; }
.round { width: 40px; height: 40px; border-radius: 14px; background: var(--btn); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow); }
#b-family, #b-sos, #b-rt, .pin .label, .statuspill, .pin .badge { box-shadow: var(--shadow); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 16px; background: var(--blue); color: #fff; font: 500 calc(16px * var(--fs)) 'Google Sans';
  width: 100%; transition: transform .15s, filter .15s; }
.btn:active { transform: scale(.97); filter: brightness(1.1); }
.btn.secondary { background: var(--blue-deep); color: var(--blue); }
.btn.red { background: var(--red); color: #fff; }
.btn.grey { background: var(--btn-grey); color: var(--btn-grey-ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.light { background: #c0e1ff; color: #002147; }
.card { background: var(--surface); border-radius: 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 6px; border-radius: 7px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; }
.chip.batt { background: var(--green-deep); color: var(--ink); }
.chip.batt .ic { color: var(--green-ink); width: 18px; height: 18px; }
.chip.silent { background: var(--orange-deep); color: var(--ink); }
.chip.silent .ic { color: var(--orange); width: 16px; height: 16px; }
.avatar { width: 46px; height: 46px; border-radius: 15px; background: var(--blue); color: #fff; display: grid; place-items: center; font: 700 calc(26px * var(--fs)) 'Google Sans'; flex: none; }
.avatar.ring { box-shadow: 0 0 0 3px var(--chip); }
.avatar.pink { background: #c858da; }
.avatar.green { background: #06a747; }
.avatar.orange { background: #fa7500; }
.dim { color: var(--mute); }
.toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--toast); color: #fff; font: 400 calc(14px * var(--fs)) 'Google Sans'; padding: 12px 16px;
  border-radius: 14px; opacity: 0; transition: .25s; z-index: 100; white-space: nowrap; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ main (Location) */
#map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--map-bg); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { display: none; }
.mapbtns { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.mapbtns > * { pointer-events: auto; position: absolute; }
#b-menu { left: 16px; top: calc(var(--st) + 8px); }
#b-family { left: 50%; top: calc(var(--st) + 8px); transform: translateX(-50%); height: 40px; padding: 0 14px 0 13px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 4px;
  font: 500 calc(15.5px * var(--fs)) 'Google Sans'; }
#b-family .ic { width: 20px; height: 20px; }
#b-bell { right: 16px; top: calc(var(--st) + 8px); }
#b-bell.dot::after { content: ''; position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--btn); }
#b-layers { right: 16px; top: calc(var(--st) + 56px); }
#b-locate { right: 16px; }
#b-sos { left: 16px; height: 40px; padding: 0 13px 0 8px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 7px; font: 700 calc(13.6px * var(--fs)) 'Google Sans'; }
#b-sos .sq { width: 24px; height: 24px; border-radius: 7px; background: var(--red-deep); display: grid; place-items: center; color: var(--red); }
#b-sos .sq .ic { width: 18px; height: 18px; }
#b-rt { height: 40px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 8px; font: 700 calc(13.6px * var(--fs)) 'Google Sans'; white-space: nowrap; }
#b-rt .sq { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-deep); display: grid; place-items: center; color: var(--blue); }
/* the app's switch: 52×26 track, a pill-shaped thumb (checked on the phone) */
.sw { position: relative; width: 52px; height: 26px; border-radius: 13px; background: var(--sw-off); transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; left: 1.5px; top: 1.5px; width: 31px; height: 23px; border-radius: 11.5px; background: #fff; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.sw.on { background: var(--blue); }
.sw.on::after { transform: translateX(18px); }

/* map pins (measured: body 57 dp incl. 3 dp black rim, squircle, wide tail, ringed dot) */
.pin { position: relative; width: 57px; height: 82px; cursor: pointer; }
.pin .body { position: absolute; left: 0; top: 0; width: 57px; height: 57px; border-radius: 22px; background: var(--btn); padding: 3px; }
.pin .body .face { width: 100%; height: 100%; border-radius: 19px; background: var(--blue); display: grid; place-items: center; font: 700 calc(30px * var(--fs)) 'Google Sans'; color: var(--pin-ink); }
.pin .tail { position: absolute; left: 20.5px; top: 54px; width: 16px; height: 11px; background: var(--btn); clip-path: polygon(0 0, 100% 0, 58% 92%, 50% 100%, 42% 92%); }
.pin .dot { position: absolute; left: 22.5px; top: 70px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3.5px solid var(--btn); }
.pin .badge { position: absolute; right: -11px; top: 37px; width: 26px; height: 26px; border-radius: 8px; background: var(--btn); display: grid; place-items: center; color: var(--orange); }
.pin .badge .ic { width: 18px; height: 18px; }
.pin .label { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); height: 26px; padding: 0 10px 0 7px; border-radius: 9px; background: var(--btn);
  display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 400 calc(15px * var(--fs)) 'Google Sans'; color: var(--ink); }
.pin .label .ic { width: 16px; height: 16px; color: var(--blue); }
.pin.kid .body .face { background: #c858da; }
.pin.kid .dot { background: #c858da; }
.pin.pulse .body::before { content: ''; position: absolute; inset: -10px; border-radius: 28px; border: 2px solid var(--red); animation: ring 1.4s infinite; }
@keyframes ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.4); } }

/* bottom sheet */
.sheet { position: absolute; left: 0; right: 0; top: 0; height: var(--H); background: var(--bg); border-radius: 26px 26px 0 0; z-index: 8; touch-action: pan-y;
  transition: transform .38s cubic-bezier(.2, 0, 0, 1); will-change: transform; }
.sheet.drag { transition: none; }
.sheet .grab { position: absolute; left: 0; right: 0; top: 0; height: 24px; }
.sheet .grab::after { content: ''; position: absolute; left: 50%; top: 6px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--grip); }
.sheet .inner { position: absolute; left: 0; right: 0; top: 16px; bottom: 66px; overflow-y: auto; padding: 0 16px 24px; scrollbar-width: none; }
.sheet .inner::-webkit-scrollbar { display: none; }
.members { margin-top: 8px; }
.member { display: flex; gap: 14px; padding: 16px; align-items: center; cursor: pointer; }
.member + .member, .member + .addp { border-top: 1px solid var(--line); }
.member .avatar { width: 58px; height: 58px; border-radius: 19px; font-size: calc(32px * var(--fs)); box-shadow: 0 0 0 3px var(--line); }
.member .nm { display: flex; align-items: center; gap: 8px; font: 700 calc(20px * var(--fs)) 'Google Sans'; flex-wrap: wrap; }
.member .addr { font: 400 calc(15px * var(--fs)) 'Google Sans'; margin-top: 2px; color: var(--ink); }
.member .ago { font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 1px; }
.addp { display: flex; gap: 14px; align-items: center; padding: 16px; color: var(--blue); font: 500 calc(16px * var(--fs)) 'Google Sans'; cursor: pointer; }
.addp .dash { width: 58px; height: 58px; border-radius: 19px; border: 2px dashed var(--blue); display: grid; place-items: center; }
.kchips { display: flex; gap: 8px; margin: 16px 0 12px; }
.kchip { height: 36px; border-radius: 12px; border: 1.5px solid var(--track); display: flex; align-items: center; gap: 7px; padding: 0 12px 0 4px; font: 500 calc(15px * var(--fs)) 'Google Sans'; cursor: pointer; }
.kchip .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: calc(15px * var(--fs)); box-shadow: none; }
.kchip.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.h { font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink); margin: 4px 0 10px; }
.feed-row { display: flex; gap: 8px; }
.fcard { background: var(--surface); border-radius: 18px; padding: 14px; }
.fcard .big { font: 700 calc(21px * var(--fs)) 'Google Sans'; }
.fcard .line { display: flex; align-items: center; gap: 8px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; margin-top: 10px; color: var(--ink-2); }
.fcard .tag { width: 22px; height: 22px; border-radius: 7px; background: var(--chip); display: grid; place-items: center; }
.fcard .tag .ic { width: 15px; height: 15px; }
.now { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.now .tag { width: 38px; height: 38px; border-radius: 12px; }
.now b { font: 700 calc(16px * var(--fs)) 'Google Sans'; display: block; }
.now small { color: var(--mute); font-size: calc(13px * var(--fs)); }
.route-card { margin-top: 8px; border-radius: 18px; overflow: hidden; background: var(--surface); }
.route-card .anim { width: 100%; aspect-ratio: 704 / 568; }
.endfeed { text-align: center; color: var(--ink); font: 400 calc(14px * var(--fs)) 'Google Sans'; padding: 22px 0 8px; }
.endfeed .star { font-size: calc(30px * var(--fs)); color: var(--blue); }

/* bottom navigation */
.navbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(66px + var(--sbb, 0px)); padding-bottom: var(--sbb, 0px); background: var(--surface); display: flex; z-index: 12; }
.navbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mute); font: 700 calc(12.3px * var(--fs)) 'Google Sans'; }
.navbar button .ic { width: 26px; height: 26px; }
.navbar button.on { color: var(--ink-2); }
.navbar button.on .ic { color: var(--ink); }
.static-page { position: absolute; left: 0; right: 0; top: calc(var(--st) + 3px); bottom: 66px; background-size: 100% auto; background-repeat: no-repeat; background-position: top; z-index: 11; display: none; }

/* sheets / dialogs */
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s; z-index: 30; pointer-events: none; }
.scrim.on { opacity: 1; pointer-events: auto; }
.bs { position: absolute; left: 0; right: 0; bottom: 0; contain: layout paint; background: var(--bg); border-radius: 26px 26px 0 0; z-index: 31; transform: translateY(105%);
  transition: transform .34s cubic-bezier(.2, 0, 0, 1); padding: 24px 16px calc(20px + var(--sbb, 0px)); max-height: calc(100% - var(--st) - 10px); overflow-y: auto; scrollbar-width: none; }
.bs.surface { background: var(--surface); }
.bs.on { transform: none; }
.bs .grip { position: absolute; left: 50%; top: 8px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--grip); }
.bs .close { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; z-index: 2; }
.bs h2 { font: 700 calc(22px * var(--fs))/calc(27px * var(--fs)) 'Google Sans'; margin: 8px 0 6px; }
.bs h2.c { text-align: center; }
.bs p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; margin: 0 0 18px; color: var(--ink-2); }
.bs p.c { text-align: center; }

/* family / circles dropdown */
.drop { position: absolute; left: 0; right: 0; top: 0; background: var(--bg); border-radius: 0 0 22px 22px; z-index: 31; transform: translateY(-105%);
  transition: transform .32s cubic-bezier(.2, 0, 0, 1); padding: calc(var(--st) + 8px) 16px 16px; }
.drop.on { transform: none; }
.drop .hdr { display: flex; justify-content: center; position: relative; margin-bottom: 22px; }
.drop .hdr .pill { height: 40px; padding: 0 12px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; gap: 3px; font: 500 calc(13.8px * var(--fs)) 'Google Sans'; }
.drop .hdr .pill .ic { width: 18px; height: 18px; }
.drop .hdr .gear { position: absolute; right: 0; top: 0; width: 40px; height: 40px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; }
.circle-item { display: flex; align-items: center; gap: 10px; height: 49px; padding: 0 9px 0 12px; border-radius: 15px; border: 1.3px solid transparent; background: var(--surface); margin-bottom: 8px; cursor: pointer; }
.circle-item.on { border-color: var(--blue); background: var(--blue-deep); }
.circle-item .ck { width: 18px; color: var(--ink); }
.circle-item .ck .ic { width: 18px; height: 18px; }
.circle-item b { font: 500 calc(14.5px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; display: block; }
.circle-item small { font: 400 calc(11.5px * var(--fs))/calc(14px * var(--fs)) 'Google Sans'; color: var(--ink-3); }
.circle-item .grow { flex: 1; }
.circle-item .avs { display: flex; }
.circle-item .avs .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: calc(16px * var(--fs)); margin-left: -6px; box-shadow: 0 0 0 2px var(--blue-deep); }
.row2 { display: flex; gap: 8px; margin: 16px 0 16px; }
.row2 .btn { height: 40px; font-size: calc(14px * var(--fs)); border-radius: 14px; }
.share-row { display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 14px 0 12px; border-radius: 16px; background: var(--surface); cursor: pointer; }
.share-row b { font: 500 calc(14.5px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; display: block; }
.share-row small { font: 400 calc(11.5px * var(--fs))/calc(14px * var(--fs)) 'Google Sans'; color: var(--ink-3); }

/* inputs */
.field { position: relative; background: var(--surface); border-radius: 16px; height: 60px; border: 1.5px solid transparent; transition: border-color .2s; }
.field.focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 133, 255, .25); }
.field.err { border-color: var(--red); }
.field label { position: absolute; left: 14px; top: 19px; font: 400 calc(15px * var(--fs)) 'Google Sans'; color: var(--mute); transition: .18s; pointer-events: none; }
.field.filled label, .field.focus label { top: 9px; font-size: calc(11.5px * var(--fs)); }
.field input { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; padding: 24px 46px 6px 14px; background: none; border: 0; outline: none; color: var(--ink); font: 400 calc(16px * var(--fs)) 'Google Sans'; }
.field .aux { position: absolute; right: 12px; top: 18px; width: 24px; height: 24px; color: var(--blue); }
.hint { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); margin: 6px 0 0 10px; }
.errmsg { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--red); margin: 6px 0 0 10px; display: none; }
.err + .errmsg { display: block; }
.code { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 18px; }
.code .cell { width: 44px; height: 54px; border-radius: 13px; background: var(--surface); border: 2px solid var(--blue-mid); display: grid; place-items: center; font: 500 calc(24px * var(--fs)) 'Google Sans';
  box-shadow: 0 0 0 3px rgba(0, 133, 255, .18); }
.code .cell.cur { border-color: var(--blue); }
.code .cell.cur::after { content: ''; width: 2px; height: 24px; background: var(--blue); animation: blink 1s steps(1) infinite; }
.code .dash { width: 12px; height: 2px; background: var(--track-2); }
.code.err .cell { border-color: var(--red); box-shadow: 0 0 0 3px rgba(242, 63, 84, .2); animation: shake .35s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.codebox { height: 64px; border-radius: 18px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 calc(28px * var(--fs)) 'Google Sans'; color: var(--mute); letter-spacing: 1px; cursor: pointer; }
.codebox .ic { color: var(--mute); }
.or { display: flex; align-items: center; gap: 12px; color: var(--mute); font: 400 calc(12.5px * var(--fs)) 'Google Sans'; margin: 22px 0 16px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--track-2); }
.link { color: var(--blue); font: 500 calc(14.5px * var(--fs)) 'Google Sans'; text-align: center; display: block; width: 100%; padding: 16px 0 4px; }
.opt { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 14px 0 16px; background: var(--surface); border-radius: 16px; margin-top: 14px; font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.opt .val { height: 28px; padding: 0 9px; border-radius: 8px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; font: 500 calc(14px * var(--fs)) 'Google Sans'; cursor: pointer; }
.durs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.durs button { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface); font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.durs button.on { background: var(--blue-deep); color: var(--blue); }

/* kid profile */
.kid-top { position: absolute; left: 0; right: 0; top: calc(var(--st) + 8px); display: flex; justify-content: space-between; padding: 0 16px; z-index: 6; pointer-events: none; }
.kid-top > * { pointer-events: auto; }
.statuspill { height: 40px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 6px; padding: 0 12px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; }
.statuspill .sep { width: 1px; height: 14px; background: var(--track-2); }
.statuspill .ic { width: 16px; height: 16px; }
.statuspill.big { flex-direction: column; height: 46px; gap: 1px; justify-content: center; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 2px 0 18px; }
.act { height: 78px; border-radius: 18px; background: var(--blue-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s; }
.act:active { transform: scale(.96); }
.act .ic { width: 28px; height: 28px; color: var(--blue); margin-bottom: 3px; }
.act b { font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink); }
.act small { font: 400 calc(11px * var(--fs)) 'Google Sans'; color: var(--blue-soft); }
.act.redish { background: var(--red-deep); }
.act.redish .ic { color: var(--red); }
.act.redish small { color: #f9aeb7; }
.floatbar { position: absolute; left: 16px; bottom: calc(16px + var(--sbb, 0px)); display: flex; gap: 8px; z-index: 9; }
.floatbar button { height: 44px; min-width: 44px; border-radius: 15px; background: var(--btn); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  font: 500 calc(15px * var(--fs)) 'Google Sans'; box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* feature pages (sound around, loud signal, SOS) */
.feature { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 16px calc(28px + var(--sbb, 0px)); }
.feature .grow { flex: 1; }
.feature h3 { font: 700 calc(22px * var(--fs))/calc(27px * var(--fs)) 'Google Sans'; text-align: center; margin: 18px 0 6px; }
.feature p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; text-align: center; margin: 0; color: var(--ink-2); }
.feature .note { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--mute); text-align: center; margin-top: 12px; }
.orb { position: relative; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; margin-top: 48px; }
.orb .core { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center; font: 700 calc(46px * var(--fs)) 'Google Sans'; }
.orb .w { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.orb.live .w { animation: wave 2.2s infinite cubic-bezier(.2, 0, 0, 1); }
.orb.live .w:nth-child(2) { animation-delay: .73s; }
.orb.live .w:nth-child(3) { animation-delay: 1.46s; }
@keyframes wave { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.wavebox { width: 100%; height: 108px; margin-top: 26px; position: relative; }
.wavebox .lot { position: absolute; inset: 0; }
.wavebox .flat { position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; border-radius: 2px; background: var(--track); }
.timer { font: 500 calc(34px * var(--fs)) 'Google Sans'; font-variant-numeric: tabular-nums; margin-top: 18px; letter-spacing: .5px; }
.statusline { display: flex; align-items: center; gap: 8px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink-3); margin-top: 8px; }
.statusline .dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.ctrls { display: flex; gap: 40px; justify-content: center; margin-top: 10px; }
.ctrl { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--ink-3); }
.ctrl .c { width: 64px; height: 64px; border-radius: 22px; background: var(--surface); display: grid; place-items: center; transition: .2s; }
.ctrl .c.on { background: var(--blue); }
.ctrl .c.stop { background: var(--red); }
.ctrl .c .ic { width: 28px; height: 28px; }
.ctrl .c.stop .ic { color: #fff; }
.counter { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.counter i { width: 26px; height: 6px; border-radius: 3px; background: var(--blue); }
.counter i.used { background: var(--track); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sos-orb .core { background: var(--surface); color: var(--red); width: 80px; height: 80px; border-radius: 50%; }
.sosbig { width: 100%; height: 56px; border-radius: 28px; background: var(--red); color: #000; font: 700 calc(15px * var(--fs)) 'Google Sans'; box-shadow: 0 0 0 0 rgba(242, 63, 84, .5); }
.sosbig.armed { animation: arm 1s infinite; }
@keyframes arm { 0% { box-shadow: 0 0 0 0 rgba(242, 63, 84, .6); } 100% { box-shadow: 0 0 0 18px rgba(242, 63, 84, 0); } }
.art { width: 100%; display: block; }
.ob { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; }
.ob .txt { padding: 0 16px; text-align: center; }
.ob .txt { padding: 0 36px; }
.ob .txt h3 { font: 700 calc(21.5px * var(--fs))/calc(25px * var(--fs)) 'Google Sans'; margin: 20px 0 6px; }
.ob .txt p { font: 400 calc(14px * var(--fs))/calc(18px * var(--fs)) 'Google Sans'; margin: 0; color: var(--ink-2); }
.ob .txt ul { text-align: left; display: inline-block; margin: 8px 0 0; padding-left: 18px; font: 400 calc(14.5px * var(--fs))/calc(22px * var(--fs)) 'Google Sans'; }
.ob .foot { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.sos-live { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #5f0c16 0, #1d0306 55%, #000 100%); z-index: 40; display: none; flex-direction: column; align-items: center; padding: calc(var(--st) + 58px) 20px calc(28px + var(--sbb)); }
.sos-live.on { display: flex; }
.sos-live .ring { width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; position: relative; margin-top: 30px; }
.sos-live .ring .core { width: 120px; height: 120px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font: 700 calc(44px * var(--fs)) 'Google Sans'; color: #fff; z-index: 2; }
.sos-live .ring .w { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--red); animation: wave 1.6s infinite; }
.sos-live .ring .w:nth-child(2) { animation-delay: .53s; }
.sos-live .ring .w:nth-child(3) { animation-delay: 1.06s; }
.sos-live h3 { font: 700 calc(24px * var(--fs))/calc(29px * var(--fs)) 'Google Sans'; margin: 34px 0 8px; text-align: center; }
.sos-live p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; margin: 0; text-align: center; color: #f2d2d6; }
.sos-live .who { display: flex; gap: 8px; margin-top: 22px; }
.sos-live .who .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(18px * var(--fs)); }
.sos-live .grow { flex: 1; }
.accordion { margin-top: 8px; }
.acc { background: var(--surface); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }

/* capture mode (?bare): the stage fills the window, used for pixel comparison with device screenshots */
body.bare .layout { padding: 0; gap: 0; }
body.bare .panel { display: none; }
body.bare .phone { --w: 100vw; padding: 0; border-radius: 0; background: none; box-shadow: none; width: 100vw; height: calc(100vw * 854 / 384); }
body.bare .screen { border-radius: 0; }

/* full-height sheet (Share location) */
.bs.full { top: calc(var(--st) + 6px); max-height: none; display: flex; flex-direction: column; padding-bottom: 16px; }
.bs.full .grow { flex: 1; }
/* SOS main, measured on the device: orb 96 dp centred at 332 dp, button 288 x 71 dp at 632 dp (151 dp above the bottom) */
.sosmain .orb { width: 96px; height: 96px; margin-top: 195px; }
.sosmain .orb .core { width: 96px; height: 96px; }
.sosmain h3 { margin-top: 45px; }
.sosmain .sosbig { position: absolute; left: 48px; right: 48px; width: auto; bottom: 151px; height: 71px; border-radius: 36px; font-size: calc(15px * var(--fs)); }
.sosmain .contacts { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 calc(13.5px * var(--fs)) 'Google Sans'; color: var(--ink); }
.bs.full h2 { font: 700 calc(19.5px * var(--fs))/calc(24px * var(--fs)) 'Google Sans'; margin-top: 34px !important; }
.bs.full p { font-size: calc(14px * var(--fs)); }
.panel .fullbtn { display: block; width: 100%; margin-bottom: 14px; background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 9px 10px; font-size: calc(13px * var(--fs)); }

/* theme picker (menu button), same list as the app's Settings → Theme */
.themes .opt-row { display: flex; align-items: center; justify-content: space-between; height: 60px; font: 400 calc(17px * var(--fs)) 'Google Sans'; border-bottom: 1px solid var(--track); cursor: pointer; }
.themes .opt-row:last-child { border-bottom: 0; }
.themes .opt-row .ic { color: var(--blue); width: 26px; height: 26px; }
.panel .themesw { display: flex; gap: 6px; margin-bottom: 14px; }
.panel .themesw button { flex: 1; background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 8px 6px; font-size: calc(13px * var(--fs)); }
.panel .themesw button.on { border-color: var(--blue); color: #fff; background: #0b2a4a; }

/* photo avatars */
.avatar.photo, .pin .body .face.photo { background-size: cover !important; background-position: center !important; background-color: var(--surface-2) !important; }
/* settings sheet */
.set-h { font: 500 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 2px; }
.themes .fam { display: flex; align-items: center; gap: 12px; }
.themes .fam .avs { display: flex; }
.themes .fam .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: calc(15px * var(--fs)); margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.themes .fam .avatar:first-child { margin-left: 0; }

/* ------------------------------------------------------------ gestures and touch feedback */
.screen { background: var(--bg) !important; }
.sheet[data-st="half"] .inner { overflow: hidden; }
.sheet .inner, .bs, .page .content, .chat { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bs { touch-action: pan-y; will-change: transform; }
.bs.drag, .drop.drag { transition: none; }
.sheet .grab { height: 30px; cursor: grab; }
.bs .grip { width: 40px; margin-left: -20px; }
.drop::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--grip); }
button, .member, .circle-item, .share-row, .opt-row, .fcard, .addp, .notif, .place-row, .member-row, .act, .codebox, .kchip, .maptype {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.round, #b-family, #b-sos, #b-rt, .floatbar button, .kchip, .topbar .l, .topbar .rbtn, .bs .close, .ctrl .c, .act, .opt .val, .durs button, .seg button, .chips button, .more, .send, .quick button, .maptype {
  transition: scale .16s cubic-bezier(.2, 0, 0, 1), opacity .16s, background-color .2s; }
.round:active, #b-family:active, #b-sos:active, #b-rt:active, .floatbar button:active, .kchip:active, .topbar .l:active, .topbar .rbtn:active, .bs .close:active, .ctrl .c:active,
.opt .val:active, .durs button:active, .seg button:active, .chips button:active, .more:active, .send:active, .quick button:active, .maptype:active { scale: .93; }
.act:active { transform: none; scale: .96; }
.member, .circle-item, .share-row, .opt-row, .fcard, .addp, .notif, .place-row, .member-row, .codebox { transition: opacity .15s; }
.member:active, .circle-item:active, .share-row:active, .opt-row:active, .fcard:active, .addp:active, .notif:active, .place-row:active, .member-row:active, .codebox:active { opacity: .6; }
.navbar button:active { opacity: .6; }

/* ------------------------------------------------------------ new screens */
.list-pad { padding: 12px 16px calc(24px + var(--sbb)); }
.card.list { padding: 0 14px; }
.notif, .place-row, .member-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.list > :last-child { border-bottom: 0; }
.notif .grow, .place-row .grow, .member-row .grow, .prof .grow { flex: 1; min-width: 0; }
.notif b, .place-row b, .member-row b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; }
.notif small, .place-row small, .member-row small, .prof small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.notif .avatar, .member-row .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(18px * var(--fs)); }
.nic, .pic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--blue-deep); color: var(--blue); }
.nic .ic, .pic .ic { width: 22px; height: 22px; }
.nic.green { background: var(--green-deep); color: var(--green); }
.nic.red { background: var(--red-deep); color: var(--red); }
.nic.orange { background: var(--orange-deep); color: var(--orange); }
.note-s { font: 400 calc(13px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; color: var(--mute); margin: 10px 4px 0; }
.empty { padding: 22px 0; text-align: center; color: var(--mute); font: 400 calc(14px * var(--fs)) 'Google Sans'; }
.more { width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.more .ic { width: 20px; height: 20px; }
.opt-row.pad { padding: 0; }
.opt-row .dim { display: flex; align-items: center; gap: 2px; font-size: calc(14px * var(--fs)); }
.opt-row .dim .ic { width: 18px; height: 18px; }
.timeline { padding: 6px 14px; }
.tl { display: flex; align-items: center; gap: 12px; padding: 11px 0; position: relative; }
.tl b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.tl small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.tl .grow { flex: 1; }
.tl .dim { font-size: calc(13px * var(--fs)); }
.tdot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--blue); background: var(--bg); flex: none; z-index: 1; }
.tdot.walk { border-style: dotted; border-color: var(--mute); }
.tl + .tl::before { content: ''; position: absolute; left: 6px; top: -12px; height: 24px; width: 2px; background: var(--track); }
.tl.now .tdot { background: var(--blue); }
.mini-map { position: relative; height: 230px; background: var(--map-bg); overflow: hidden; }
.prof { display: flex; gap: 14px; align-items: center; padding: 16px; margin-top: -34px; position: relative; z-index: 2; box-shadow: var(--shadow); }
.prof b { font: 700 calc(21px * var(--fs)) 'Google Sans'; display: block; }
.avatar.big { width: 64px; height: 64px; border-radius: 21px; font-size: calc(32px * var(--fs)); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { height: 36px; padding: 0 12px 0 8px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 6px; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; border: 1.5px solid transparent; }
.chips button .ic { width: 18px; height: 18px; color: var(--blue); }
.chips button.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.seg { display: flex; gap: 4px; background: var(--surface); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; height: 36px; border-radius: 11px; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.seg button.on { background: var(--btn); color: var(--blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
:root:not([data-theme="light"]) .seg button.on { background: var(--blue-deep); }
.set-h + .themes .opt-row, .themes .opt-row { gap: 10px; }
.maptypes { display: flex; gap: 10px; margin-top: 8px; }
.maptype { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; font: 500 calc(14px * var(--fs)) 'Google Sans'; }
.maptype .thumb { width: 100%; height: 86px; border-radius: 16px; border: 2px solid transparent; display: grid; place-items: center; color: var(--blue);
  background: linear-gradient(135deg, var(--map-bg) 0 45%, var(--surface-2) 45% 55%, var(--map-bg) 55%); }
.maptype .thumb.3d { background: linear-gradient(160deg, var(--surface-2), var(--map-bg)); }
.maptype .thumb .ic { width: 30px; height: 30px; }
.maptype.on .thumb { border-color: var(--blue); }
.maptype.on { color: var(--blue); }
.rt-art { position: relative; height: 120px; display: grid; place-items: center; margin-top: 6px; }
.rt-art .ring { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--blue); animation: wave 2s infinite; }
.rt-art .ring.r2 { animation-delay: 1s; }
.rt-av { width: 64px !important; height: 64px !important; border-radius: 21px !important; z-index: 1; }
.pin.live .body::before { content: ''; position: absolute; inset: -10px; border-radius: 28px; border: 2px solid var(--blue); animation: ring 1.4s infinite; }
#stage.nolabels .pin .label { display: none; }
/* chat */
.chat-h { display: flex; align-items: center; gap: 10px; text-align: left; }
.chat-h .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(17px * var(--fs)); }
.chat-h b { font: 500 calc(15.5px * var(--fs)) 'Google Sans'; display: block; }
.chat-h small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--green); }
.chat { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: calc(118px + var(--sbb)); overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.chat .day { align-self: center; font: 500 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); background: var(--surface); padding: 4px 10px; border-radius: 10px; margin-bottom: 6px; }
.bub { max-width: 76%; align-self: flex-start; background: var(--surface); padding: 9px 12px 6px; border-radius: 18px 18px 18px 6px; font: 400 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; animation: pop .22s cubic-bezier(.2, 0, 0, 1); }
.bub.me { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 18px 18px 6px 18px; }
.bub small { display: block; text-align: right; font: 400 calc(10.5px * var(--fs)) 'Google Sans'; opacity: .65; margin-top: 2px; }
.bub.typing { display: flex; gap: 4px; padding: 13px 14px; }
.bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: blink 1s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .2s; }
.bub.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.composer { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px calc(10px + var(--sbb)); background: var(--bg); border-top: 1px solid var(--line); }
.composer .quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.composer .quick button { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--blue-deep); color: var(--blue); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.composer .row { display: flex; gap: 8px; align-items: center; }
.composer input { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--surface); color: var(--ink); padding: 0 16px; font: 400 calc(16px * var(--fs)) 'Google Sans'; outline: none; }
.send { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.send[disabled] { opacity: .4; }
/* confirm dialog */
.dlg-wrap { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .2s; }
.dlg-wrap.on { opacity: 1; }
.dlg { width: 100%; background: var(--bg); border-radius: 26px; padding: 22px 18px 16px; transform: scale(.94); transition: transform .22s cubic-bezier(.2, 0, 0, 1); }
.dlg-wrap.on .dlg { transform: none; }
.dlg h3 { font: 700 calc(20px * var(--fs)) 'Google Sans'; margin: 0 0 6px; text-align: center; }
.dlg p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: var(--ink-2); text-align: center; margin: 0 0 18px; }
.dlg-b { display: flex; gap: 8px; }
.dlg-b .btn { height: 46px; }

/* ------------------------------------------------------------ app blocking */
.atile { display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; line-height: 1; }
.app-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--track); cursor: pointer; transition: opacity .15s; }
.app-row:active { opacity: .6; }
.app-row .grow { flex: 1; min-width: 0; }
.app-row b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; }
.app-row small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.app-row > .ic { width: 20px; height: 20px; color: var(--mute); }
.app-row.blocked .atile { filter: grayscale(1); opacity: .45; }
.app-row.blocked b { color: var(--mute); }
.chip.blk { background: var(--red-deep); color: var(--red); font-weight: 500; }
.chip.blk .ic { width: 14px; height: 14px; }
.lim { display: block; height: 4px; border-radius: 2px; background: var(--track); margin-top: 6px; overflow: hidden; }
.lim i { display: block; height: 100%; border-radius: 2px; background: var(--blue); }
.lim.big { height: 8px; border-radius: 4px; margin: 12px 0 10px; }
.st-card { padding: 16px; }
.st-top { display: flex; justify-content: space-between; align-items: flex-end; }
.st-top small { font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.st-top b { font: 700 calc(28px * var(--fs)) 'Google Sans'; }
.st-lim { text-align: right; cursor: pointer; }
.st-lim span { display: inline-flex; align-items: center; gap: 4px; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--blue); }
.st-lim .ic { width: 16px; height: 16px; }
.stbar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
.stbar i { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.pause-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--red-deep); color: var(--red); margin-bottom: 12px; }
.pause-banner .grow { flex: 1; }
.pause-banner b { font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--ink); display: block; }
.pause-banner small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.pause-banner button { height: 36px; padding: 0 14px; border-radius: 12px; background: var(--red); color: #fff; font: 500 calc(14px * var(--fs)) 'Google Sans'; }
.app-hd { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; padding-right: 44px; }
.lock-b { position: absolute; left: calc(50% + 18px); top: calc(50% + 14px); width: 30px; height: 30px; border-radius: 10px; background: var(--red); color: #fff; display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 3px var(--bg); }
.lock-b .ic { width: 18px; height: 18px; }
.actions .act small { white-space: nowrap; }

/* ------------------------------------------------------------ iPhone: lighter compositing and taps */
.page, .drop, .sheet { contain: layout paint; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
button, .member, .circle-item, .opt-row, .app-row, .place-row, .notif, .member-row, .act, .fcard, .live-card, .article, .plan-row { touch-action: manipulation; }
.drop-list { max-height: calc(var(--H) - var(--st) - 260px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.drop-list::-webkit-scrollbar { display: none; }
/* app icons */
.atile.img { overflow: hidden; display: block; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.atile.img svg { width: 100%; height: 100%; display: block; }
/* tab pages */
.tabpage { position: absolute; left: 0; right: 0; top: 0; bottom: calc(66px + var(--sbb)); background: var(--bg); z-index: 11; display: none; }
.tabpage.on { display: block; }
.tp-scroll { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--st) + 14px) 16px 24px; scrollbar-width: none; overscroll-behavior: contain; }
.tp-scroll::-webkit-scrollbar { display: none; }
.tp-h { font: 700 calc(30px * var(--fs)) 'Google Sans'; margin: 4px 0 14px; }
.hero-card { position: relative; border-radius: 24px; overflow: hidden; background: #071a3a; }
.hero-card img { width: 100%; display: block; aspect-ratio: 600 / 660; object-fit: cover; object-position: center 30%; }
.hero-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px; background: linear-gradient(transparent, #061430 55%); color: #fff; }
.hero-t b { display: block; font: 700 calc(22px * var(--fs))/calc(26px * var(--fs)) 'Google Sans'; margin: 6px 0 12px; }
.excl { font: 500 calc(12px * var(--fs)) 'Google Sans'; color: #70baff; text-transform: uppercase; letter-spacing: .6px; }
.chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
.chips.scroll-x button { flex: none; padding: 0 14px; }
.article { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border-radius: 18px; margin-bottom: 8px; cursor: pointer; transition: opacity .15s; }
.article:active { opacity: .6; }
.article .grow { flex: 1; }
.article b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; }
.article small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.article > .ic { color: var(--mute); width: 20px; height: 20px; }
.a-thumb { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.a-thumb .ic { width: 26px; height: 26px; }
.plan-hd { text-align: center; padding: 18px 0 20px; }
.plan-hd b { font: 700 calc(40px * var(--fs)) 'Google Sans'; display: block; }
.plan-hd small { font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); }
.plan-c { padding: 4px 14px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--track); }
.plan-row:last-child { border-bottom: 0; }
.plan-row.h2 { justify-content: space-between; font: 500 calc(16px * var(--fs)) 'Google Sans'; border: 0; padding-bottom: 6px; }
.plan-row .grow { flex: 1; }
.plan-row b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.plan-row small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.plan-row > .ic { color: var(--mute); width: 20px; height: 20px; }
.pic.plus { background: var(--orange-deep); color: var(--orange); }
.adults { display: flex; gap: 10px; padding: 4px 0 12px; }
.adults .slot { width: 64px; height: 64px; border-radius: 21px; border: 2px dashed var(--track-2); display: grid; place-items: center; color: var(--mute); }
.plans { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.plan { border: 2px solid var(--track); border-radius: 18px; padding: 14px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.plan b { font: 700 calc(18px * var(--fs)) 'Google Sans'; }
.plan .pr { font: 700 calc(18px * var(--fs)) 'Google Sans'; text-align: right; }
.plan .pr small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.plan > small { grid-column: 1 / -1; font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); }
.plan.on { border-color: var(--blue); background: var(--blue-deep); }
/* walks */
.live-b { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-weight: 500; margin-right: 6px; }
.live-b .ic { width: 13px; height: 13px; }
.live-card { background: var(--surface); border-radius: 20px; padding: 14px; margin-bottom: 8px; cursor: pointer; }
.live-card + .live-card { margin-top: 0; }
.lc-top { display: flex; gap: 12px; align-items: center; }
.lc-top .avatar { width: 44px; height: 44px; border-radius: 15px; font-size: calc(22px * var(--fs)); }
.lc-top .grow { flex: 1; min-width: 0; }
.lc-top b { font: 700 calc(16px * var(--fs)) 'Google Sans'; display: block; }
.lc-top small { font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); }
.live-dot { font: 700 calc(11px * var(--fs)) 'Google Sans'; letter-spacing: .6px; color: #fff; background: var(--red); padding: 4px 7px; border-radius: 8px; animation: blink 1.6s infinite; }
.live-card.done .live-dot { background: var(--green); animation: none; }
.lc-bar { position: relative; height: 8px; border-radius: 4px; background: var(--track); margin: 16px 4px 8px; }
.lc-bar i { position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: 4px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.live-card.done .lc-bar i { background: var(--green); }
.lc-w { position: absolute; top: -10px; left: -14px; will-change: transform; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.live-card.done .lc-w { background: var(--green); }
.lc-w .ic { width: 17px; height: 17px; }
.lc-ends { display: flex; justify-content: space-between; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 6px; }
.lc-ends span { display: flex; align-items: center; gap: 4px; }
.lc-ends .ic { width: 14px; height: 14px; }
.lc-ctl { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.lc-ctl .dim { font: 500 calc(12px * var(--fs)) 'Google Sans'; text-transform: uppercase; letter-spacing: .5px; }
.seg.sm { flex: 1; padding: 3px; }
.seg.sm button { height: 30px; font-size: calc(12.5px * var(--fs)); }
.school-pin { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; border-radius: 10px; background: var(--btn); box-shadow: var(--shadow); font: 500 calc(13px * var(--fs)) 'Google Sans'; color: var(--ink); white-space: nowrap; }
.school-pin .ic { width: 20px; height: 20px; color: var(--green); }
/* Dynamic Island push */
/* Dynamic Island push (iOS reference video, frame by frame): one continuous morph from the hardware island to the card
   (slightly underdamped spring, ~0.4 s, motion-blurred at the start, text fades in at the end) and back (critically damped,
   0.3 s: the text fades first, the shape shrinks into the island under a motion blur that is gone on landing — see close()
   in 05-walks.js).
   The card sits under the status bar. */
#island { position: absolute; left: 50%; top: var(--di-top, 11px); width: 126px; height: 37px; margin-left: -63px; border-radius: 19px;
  background: #000; z-index: 95; opacity: 0; pointer-events: none; overflow: hidden; color: #fff; transform: translateY(0); filter: blur(0); will-change: width, height, transform; }
#island.show { opacity: 1; }
#island.open { width: calc(100% - 22px); margin-left: calc(-50% + 11px); height: 84px; border-radius: 36px; transform: translateY(var(--di-drop, calc(var(--st) - var(--di-top, 11px) - 2px)));
  pointer-events: auto; cursor: pointer; filter: blur(0);
  transition: width 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), height 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), margin-left 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), border-radius 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), transform 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), filter .26s ease-out; }
#island.show:not(.open) { transition: width 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), height 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), margin-left 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), border-radius 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), transform 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), filter .2s ease-in, opacity .12s ease .3s; }
#island.blur { filter: blur(6px); }
#island.open.closing .isl-in { opacity: 0; transition: opacity .1s; }
.isl-in { opacity: 0; transition: opacity .12s; }
.isl-in { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 18px 0 16px; opacity: 0; transition: opacity .2s; width: 100%; min-width: 320px; }
#island.open .isl-in { opacity: 1; transition: opacity .2s ease .2s; }
.isl-av { width: 48px !important; height: 48px !important; border-radius: 50% !important; font-size: calc(22px * var(--fs)) !important; flex: none; }
.isl-t { flex: 1; min-width: 0; }
.isl-t b { display: block; font: 600 calc(15.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-t small { display: block; font: 400 calc(13px * var(--fs)) 'Google Sans'; color: #a9a9ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0a84ff; color: #fff; flex: none; }
.isl-ic.green { background: #30d158; }
.isl-ic .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------ SOS countdown (device screenshot): red circle 100 dp centred
   at 329 dp, title at 442 dp, slider 290 x 72 dp at the button's place, knob 64 dp */
.sosmain.counting > .orb, .sosmain.counting > h3, .sosmain.counting > p, .sosmain.counting > .sosbig { visibility: hidden; }
.sos-cd { position: absolute; inset: 0; text-align: center; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.cd-orb { position: absolute; left: 50%; top: 190px; width: 100px; height: 100px; margin-left: -50px; border-radius: 50%; background: var(--red); display: grid; place-items: center;
  box-shadow: 0 0 50px 18px rgba(242, 63, 84, .28); }
.cd-orb span { font: 700 calc(40px * var(--fs)) 'Google Sans'; color: #fff; font-variant-numeric: tabular-nums; }
.cd-orb.beat { animation: beat .5s cubic-bezier(.2, 0, 0, 1); }
@keyframes beat { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sos-cd h3 { position: absolute; left: 0; right: 0; top: 338px; margin: 0; font: 700 calc(22px * var(--fs))/calc(27px * var(--fs)) 'Google Sans'; }
.sos-cd p { position: absolute; left: 0; right: 0; top: 371px; margin: 0; font: 400 calc(15.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.slide { position: absolute; left: 47px; right: 47px; bottom: 151px; height: 72px; border-radius: 36px; background: #fff; display: flex; align-items: center; }
:root[data-theme="light"] .slide { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-t { flex: 1; padding-right: 68px; font: 700 calc(16px * var(--fs)) 'Google Sans'; color: #000; transition: opacity .2s; }
.sl-k { position: absolute; right: 4px; top: 4px; width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #000; display: grid; place-items: center; touch-action: none;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1); cursor: grab; }
.sl-k.drag { transition: none; }
.sl-k .ic { width: 26px; height: 26px; }
/* active SOS (Figma "SOS signal active state") */
#stage .sos-live { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 63, 84, .97) 0, rgba(242, 63, 84, .62) 17%, rgba(242, 63, 84, 0) 33%, rgba(242, 63, 84, 0) 64%, rgba(242, 63, 84, .65) 82%, rgba(242, 63, 84, .97) 100%);
  animation: fadein .35s; }
.sl-top { padding: calc(var(--st) + 14px) 20px 0; text-align: center; color: #fff; }
.sl-top b { display: block; font: 700 calc(20px * var(--fs)) 'Google Sans'; }
.sl-top small { display: block; font: 400 calc(13.5px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; opacity: .9; margin-top: 3px; }
.sl-time { display: inline-block; margin-top: 8px; font: 500 calc(13px * var(--fs)) 'Google Sans'; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .18); padding: 3px 9px; border-radius: 9px; }
.sl-bot { padding: 0 16px calc(22px + var(--sbb)); }
.sl-bot .who { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; color: #fff; font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.sl-bot .who .avatar { width: 28px; height: 28px; border-radius: 10px; font-size: calc(14px * var(--fs)); box-shadow: 0 0 0 2px #fff; }
.sl-bot .who span { margin-left: 4px; }
#sl-safe { height: 52px; border-radius: 18px; }
#stage.sos-on .mapbtns { opacity: 0; pointer-events: none; }
.pin.sos .label { background: var(--red); color: #fff; font-weight: 500; }
.pin.sos .label .ic { color: #fff; }
.pin.sos .body { background: var(--red); }
.sos-off { position: absolute; left: 12px; right: 12px; bottom: calc(78px + var(--sbb)); z-index: 45; background: var(--bg); border-radius: 22px; padding: 16px 44px; text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18); animation: pop .3s cubic-bezier(.2, 0, 0, 1); transition: opacity .35s, transform .35s; }
.sos-off.out { opacity: 0; transform: translateY(12px); }
.sos-off b { display: block; font: 700 calc(18px * var(--fs)) 'Google Sans'; }
.sos-off small { font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.sos-off .x { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.sos-off .x .ic { width: 14px; height: 14px; }

/* Android heads-up notification (Material 3) */
#headsup { position: absolute; left: 8px; right: 8px; top: calc(var(--st) + 6px); z-index: 95; border-radius: 26px; padding: 12px 16px 14px;
  background: #fff; color: #1b1b1f; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(-130%); pointer-events: none;
  transition: transform .42s cubic-bezier(.2, 0, 0, 1), opacity .25s; touch-action: none; }
:root:not([data-theme="light"]) #headsup { background: #2b2c30; color: #e4e2e6; }
#headsup.show { opacity: 1; }
#headsup.open { transform: none; pointer-events: auto; cursor: pointer; }
#headsup.drag { transition: none; }
.hu-hd { display: flex; align-items: center; gap: 6px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.hu-hd img { width: 18px; height: 18px; border-radius: 50%; }
.hu-hd span:first-of-type { color: var(--blue); font-weight: 500; }
.hu-hd .ic { width: 16px; height: 16px; margin-left: 2px; }
.hu-body { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hu-t { flex: 1; min-width: 0; }
.hu-t b { display: block; font: 500 calc(15.5px * var(--fs))/calc(20px * var(--fs)) 'Google Sans'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-t small { display: block; font: 400 calc(14px * var(--fs))/calc(18px * var(--fs)) 'Google Sans'; color: inherit; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-av { width: 42px !important; height: 42px !important; border-radius: 50% !important; font-size: calc(19px * var(--fs)) !important; flex: none; }

/* ------------------------------------------------------------ person screens over the main map */
.page.over-map { background: transparent; pointer-events: none; transform: none; opacity: 0; transition: opacity .25s; }
.page.over-map.on { opacity: 1; }
.page.over-map.under { transform: none; opacity: 0; }
.page.over-map > * { pointer-events: auto; }
.page.over-map > .kid-top { pointer-events: none; }
.page.over-map .content { pointer-events: none; }
.page.over-map .content > .list-pad { pointer-events: auto; background: var(--bg); min-height: calc(var(--H) - var(--st) - 287px); border-radius: 26px 26px 0 0; }
.page.over-map .mini-map { background: transparent; }
.page.over-map .sheet { animation: sheetIn .4s cubic-bezier(.2, 0, 0, 1); }
@keyframes sheetIn { from { transform: translateY(var(--H)); } }
#stage .mapbtns, #stage #sheet, #stage .navbar { transition: opacity .25s, transform .38s cubic-bezier(.2, 0, 0, 1); }
#stage.focus .mapbtns, #stage.focus #sheet, #stage.focus .navbar { opacity: 0; pointer-events: none; }
#stage #sheet.drag { transition: opacity .25s; }
.maplibregl-marker { transition: opacity .25s; }
.maplibregl-marker.faded { opacity: 0 !important; pointer-events: none; }
/* My profile rows (they live in a card, not in a settings list) */
.card.list .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; font: 400 calc(16px * var(--fs)) 'Google Sans';
  border-bottom: 1px solid var(--track); cursor: pointer; }
.card.list .opt-row:last-child { border-bottom: 0; }
/* ------------------------------------------------------------ active SOS (device screenshot) */
#stage .sos-live { position: absolute; inset: 0; z-index: 29; pointer-events: none; display: block; padding: 0; background: none;
  box-shadow: inset 0 0 46px 10px rgba(242, 63, 84, .5); animation: sosGlow 1.6s ease-in-out infinite alternate; }
@keyframes sosGlow { from { box-shadow: inset 0 0 38px 6px rgba(242, 63, 84, .42); } to { box-shadow: inset 0 0 56px 14px rgba(242, 63, 84, .58); } }
:root[data-theme="light"] #stage .sos-live { animation-name: sosGlowL; }
@keyframes sosGlowL { from { box-shadow: inset 0 0 30px 4px rgba(242, 63, 84, .38); } to { box-shadow: inset 0 0 44px 9px rgba(242, 63, 84, .5); } }
#b-sos.active { background: #3a0710; color: #ff8593; box-shadow: 0 0 0 2px var(--red); }
:root[data-theme="light"] #b-sos.active { background: #ffe0e4; color: var(--red); }
#b-sos.active .sq { background: transparent; }
#stage.sos-on .mapbtns { opacity: 1; pointer-events: auto; }
.pin.sos .body { box-shadow: 0 0 0 3px var(--red); }
.pin.sos .dot { box-shadow: 0 0 0 16px rgba(242, 63, 84, .35); animation: sosDot 1.6s infinite; }
@keyframes sosDot { 50% { box-shadow: 0 0 0 22px rgba(242, 63, 84, .18); } }
.pin.sos .label .ic { color: var(--red); }
.pin.sos .label { background: var(--btn); color: var(--ink); }
.sos-act-hd { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.sos-act-hd .sq { width: 44px; height: 44px; border-radius: 14px; background: var(--red-deep); color: var(--red); display: grid; place-items: center; }
.sos-act-hd b { display: block; font: 700 calc(20px * var(--fs)) 'Google Sans'; }
.sos-act-hd small { font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--red); font-variant-numeric: tabular-nums; }
.who-row { display: flex; gap: 8px; margin: 0 0 18px; }
.who-row .avatar { width: 40px; height: 40px; border-radius: 13px; font-size: calc(18px * var(--fs)); }
.ttoast { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 8px); z-index: 96; height: 50px; border-radius: 25px; background: #3b3c40; color: #fff;
  box-shadow: inset 0 0 0 1.5px #6b6c72, 0 6px 20px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 12px; padding: 0 16px; font: 400 calc(16px * var(--fs)) 'Google Sans';
  transform: translateY(-140%); transition: transform .4s cubic-bezier(.2, 0, 0, 1); }
.ttoast.on { transform: none; }
.ttoast .ck { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #3b3c40; display: grid; place-items: center; flex: none; }
.ttoast .ck .ic { width: 14px; height: 14px; }

/* ------------------------------------------------------------ family member editor */
.pe-top { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.pe-av { width: 84px !important; height: 84px !important; border-radius: 28px !important; font-size: calc(40px * var(--fs)) !important; }
.pe-btns { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.pe-pick { height: 42px; width: auto; padding: 0 16px; font-size: calc(15px * var(--fs)); cursor: pointer; }
.pe-pick .ic { width: 20px; height: 20px; }
#pe-rm { width: auto; padding: 10px 2px 0; color: var(--red); font-size: calc(14px * var(--fs)); }
.pe-row { display: flex; gap: 10px; }
.pe-ph, .pe-c { width: 52px; height: 52px; border-radius: 17px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, scale .15s;
  color: #fff; font: 700 calc(24px * var(--fs)) 'Google Sans'; display: grid; place-items: center; }
.pe-ph.on, .pe-c.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--blue); }
.pe-ph:active, .pe-c:active { scale: .93; }
#m-list .fam > span:last-child { display: flex; flex-direction: column; }
.themes .fam .role { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
#m-list .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(17px * var(--fs)); margin-left: 0; box-shadow: none; }
#m-list .opt-row > .ic { width: 20px; height: 20px; color: var(--mute); }
/* letter avatars keep their colour on map pins */
.pin .body .face.c-pink { background: #c858da; }
.pin .body .face.c-green { background: #06a747; }
.pin .body .face.c-orange { background: #fa7500; }

/* ------------------------------------------------------------ parental control (Figma "In app") */
.pc-seg { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); padding: 8px 16px 10px; background: var(--surface); z-index: 2; }
.pw-page .pc-seg { display: none; }
.page[data-tab="block"] .pc-seg { display: none; }
.pc-content { top: calc(var(--st) + 113px) !important; background: var(--surface); }
.page[data-tab="block"] .pc-content { top: calc(var(--st) + 57px) !important; background: var(--bg); }
.page[data-tab="stats"] #ap-body, .page[data-tab="block"] #pc-stats { display: none; }
.pc-pad { padding-bottom: calc(96px + var(--sbb)); }
.pc-tabs { position: absolute; left: 50%; bottom: calc(14px + var(--sbb)); transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--surface-2); box-shadow: var(--shadow); z-index: 5; }
.pc-tabs button { height: 40px; padding: 0 18px; border-radius: 18px; display: flex; align-items: center; gap: 8px; font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.pc-tabs button .ic { width: 18px; height: 18px; }
.pc-tabs button.on { background: var(--btn); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pc-card { background: var(--bg); border-radius: 22px; padding: 16px 14px 14px; margin-bottom: 12px; }
.pc-h { display: flex; align-items: flex-start; justify-content: space-between; }
.pc-h.center > div { flex: 1; text-align: center; padding-left: 24px; }
.pc-h b { font: 500 calc(18px * var(--fs)) 'Google Sans'; display: block; }
.pc-h small { font: 400 calc(13.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.pc-h > .ic { width: 22px; height: 22px; }
.ring { position: relative; width: 318px; height: 232px; margin: 4px auto 6px; }
.ring svg { position: absolute; left: 0; top: 0; }
.ring-c { position: absolute; left: 0; right: 0; text-align: center; }
.ring-c b { font: 700 calc(22px * var(--fs)) 'Google Sans'; display: block; }
.ring-c small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.bub-v { position: absolute; width: 108px; padding: 7px 8px; border-radius: 16px; background: var(--btn); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); text-align: center; }
.bub-v b { display: block; font: 700 calc(14px * var(--fs)) 'Google Sans'; }
.bub-v small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pc-note { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #eaf8ef; color: #1b1b1f; font: 400 calc(13.5px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; cursor: pointer; }
:root:not([data-theme="light"]) .pc-note { background: #0f2a1a; color: #e4e2e6; }
.pc-note .ok { width: 32px; height: 32px; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; font: 700 calc(16px * var(--fs)) 'Google Sans'; }
.pc-note .ok .ic { width: 18px; height: 18px; }
.pc-note > .ic { width: 18px; height: 18px; color: var(--mute); flex: none; }
.pc-note.info { background: var(--surface); }
.wa-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border-radius: 22px; margin-bottom: 12px; cursor: pointer; }
.wa-card .grow, .top-row .grow, .new-row .grow { flex: 1; min-width: 0; }
.wa-card b, .new-row b { font: 500 calc(16px * var(--fs)) 'Google Sans'; display: block; }
.tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tag-c { font: 500 calc(11.5px * var(--fs)) 'Google Sans'; padding: 3px 7px; border-radius: 7px; background: var(--surface); color: var(--ink-2); }
.tag-c.on { background: var(--blue); color: #fff; }
.tag-c.g { background: var(--blue-deep); color: var(--blue); }
.tag-c.s { background: var(--orange-deep); color: #b35300; }
:root:not([data-theme="light"]) .tag-c.s { color: var(--orange); }
.tag-c.r { background: var(--red-deep); color: var(--red); }
.go { width: 40px; height: 40px; border-radius: 14px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; flex: none; }
.go .ic { width: 20px; height: 20px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.sec-h b { font: 700 calc(19px * var(--fs)) 'Google Sans'; }
.sec-h b span { font-weight: 500; }
.sec-h button { display: flex; align-items: center; gap: 2px; color: var(--mute); font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.sec-h button .ic { width: 18px; height: 18px; }
.pc-list > div { background: var(--bg); border-radius: 20px; margin-bottom: 8px; }
.top-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; overflow: hidden; cursor: pointer; }
.top-row .rank { position: absolute; left: 0; top: 0; width: 34px; height: 34px; background: linear-gradient(135deg, var(--track) 50%, transparent 50%); font: 500 calc(9px * var(--fs)) 'Google Sans'; color: var(--mute); padding: 3px 0 0 4px; }
.top-row b { font: 500 calc(16px * var(--fs)) 'Google Sans'; display: flex; align-items: center; gap: 6px; }
.top-row .cat { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.top-row .cat i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.tbar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tbar span { flex: 1; max-width: 140px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.tbar span i { display: block; height: 100%; border-radius: 2px; }
.tbar small { font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.lockb { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; flex: none; color: var(--ink); }
.lockb.on { background: var(--red-deep); color: var(--red); }
.new-row { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; }
.new-row .nt { position: relative; flex: none; }
.new-row .nt i { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg); }
.night { display: flex; justify-content: space-between; align-items: flex-end; height: 200px; padding: 10px 6px 0; margin-bottom: 12px; }
.nb { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; }
.nb small { font: 700 calc(12.5px * var(--fs)) 'Google Sans'; }
.nb span { height: 120px; width: 10px; display: flex; align-items: flex-end; justify-content: center; }
.nb span i { width: 10px; border-radius: 5px; background: #f97384; display: block; box-shadow: inset 0 3px 0 0 #fff; }
.nb span em { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: block; }
.nb time { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.avg-box { background: var(--surface); border-radius: 16px; padding: 12px 14px; margin: 12px 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.avg-box small { width: 100%; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.avg-box b { font: 700 calc(24px * var(--fs)) 'Google Sans'; }
.avg-box .up { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--orange); }
.wk { display: flex; gap: 8px; height: 170px; margin-bottom: 12px; }
.wk-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.wk-bar small { font: 400 calc(10.5px * var(--fs)) 'Google Sans'; color: var(--mute); white-space: nowrap; }
.wk-bar span { flex: 1; width: 28px; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--track) 4px 6px); display: flex; align-items: flex-end; overflow: hidden; }
.wk-bar span i { width: 100%; background: #ff9a3c; border-radius: 10px; display: block; }
.wk-bar.on span i { background: var(--orange); }
.wk-bar.on small { color: var(--ink); font-weight: 700; }
.wk-bar em { font: 400 calc(11px * var(--fs)) 'Google Sans'; color: var(--mute); font-style: normal; }
.opt-row b.ok { color: var(--green); } .opt-row b.warn { color: var(--orange); }
/* screen time card in the feed */
.st-feed { margin-top: 8px; cursor: pointer; }
.sf-top { display: flex; align-items: baseline; gap: 6px; }
.sf-top b { font: 700 calc(22px * var(--fs)) 'Google Sans'; }
.sf-top b small { font: 500 calc(14px * var(--fs)) 'Google Sans'; margin: 0 2px; }
.sf-top .sf-l { font: 500 calc(14px * var(--fs)) 'Google Sans'; }
.sf-ic { align-self: center; }
.sf-ic .ic { width: 26px; height: 26px; }
.sf-top .round { align-self: center; }
.sf-apps { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.sf-apps span { margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* block chip over the kid's map */
.block-chip { position: absolute; left: 16px; top: calc(var(--H) - 399px - 52px); z-index: 7; height: 40px; padding: 0 14px 0 10px; border-radius: 14px; background: var(--btn); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.block-chip .ic { width: 22px; height: 22px; color: #fff; background: var(--red); border-radius: 7px; padding: 3px; }
/* pause wheel (Figma blocking) */
.wheels { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; height: 190px; background: var(--surface); border-radius: 20px; margin-top: 8px; }
.wsel { position: absolute; left: 12px; right: 12px; top: 76px; height: 38px; border-radius: 10px; background: var(--blue-deep); }
.wheel { position: relative; height: 190px; width: 64px; overflow-y: scroll; scroll-snap-type: y mandatory; padding: 76px 0; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); touch-action: pan-y; }
.wheel::-webkit-scrollbar { display: none; }
.wi { height: 38px; line-height: 38px; text-align: center; scroll-snap-align: start; font: 500 calc(20px * var(--fs)) 'Google Sans'; font-variant-numeric: tabular-nums; }
.wu { position: relative; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); width: 30px; }
/* SOS widget pictures (from the app) */
.widget-card { background: var(--surface-2); border-radius: 20px; padding: 14px 10px 10px; cursor: pointer; }
.widget-card .share-row { background: var(--surface); margin-top: -26px; position: relative; }
.wphone { width: 112px; height: 104px; margin: 0 auto; border-radius: 16px 16px 0 0; background: #5f7bb0; border: 4px solid #2c3550; border-bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px; overflow: hidden; }
.wphone b { background: rgba(255, 255, 255, .28); border-radius: 6px; height: 22px; }
.wsos { grid-column: span 2; grid-row: span 2; background: #fff; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; justify-content: space-between; }
.wsos span { color: var(--red); } .wsos span .ic { width: 14px; height: 14px; }
.wsos i { background: var(--red); color: #fff; border-radius: 5px; font: 700 calc(8px * var(--fs))/calc(14px * var(--fs)) 'Google Sans'; text-align: center; font-style: normal; }
.wstep { background: var(--surface-2); border-radius: 20px; padding: 12px 10px 10px; margin-bottom: 10px; }
.wphone.small { position: relative; }
.wphone.small em { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .35); left: 40px; top: 36px; }
.wphone.widgets .wsos, .wphone.find .wsos, .wphone.hold .wsos { visibility: hidden; }
.wphone.widgets em { top: 70px; border-radius: 12px; width: 40px; height: 26px; }
.wphone.find em { left: 66px; top: 40px; width: 18px; height: 18px; background: var(--blue); }
.wphone.ready em { display: none; }
.wcap { display: flex; align-items: center; gap: 10px; background: var(--btn); border-radius: 14px; padding: 10px 12px; margin-top: -14px; position: relative; font: 400 calc(14px * var(--fs)) 'Google Sans'; }
.wcap span { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 500 calc(13px * var(--fs)) 'Google Sans'; flex: none; }
#pc-plus .fam { display: flex; align-items: center; gap: 10px; }
#pc-plus .pic { width: 30px; height: 30px; border-radius: 9px; }
#pc-plus .pic .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------ walk demo settings */
.walk-set { background: var(--surface); border-radius: 18px; padding: 12px; margin-top: 6px; }
.wd-row { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.wd-row b { font: 700 calc(18px * var(--fs)) 'Google Sans'; color: var(--blue); font-variant-numeric: tabular-nums; }
.wd-row.off { opacity: .4; }
#wd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; touch-action: pan-x; }
#wd-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-mid)); }
#wd-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--blue); }
#wd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#wd-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#wd-range:disabled { opacity: .35; }
.wd-ticks { display: flex; justify-content: space-between; font: 400 calc(11px * var(--fs)) 'Google Sans'; color: var(--mute); margin: 2px 4px 12px; }
#wd-re { height: 42px; font-size: calc(14.5px * var(--fs)); }
#wd-re .ic { width: 20px; height: 20px; }
#ct-list .role, #m-list .role { display: block; }
#ct-list .opt-row > span { display: flex; flex-direction: column; }
.opt-row.add { color: var(--blue); }
.addav { background: var(--blue-deep) !important; color: var(--blue); }
.addav .ic { width: 20px; height: 20px; }
/* route history */
.mini-map.tall { height: 300px; }
.hist-sum { display: flex; justify-content: space-around; padding: 14px 8px; text-align: center; margin-top: -34px; position: relative; z-index: 2; box-shadow: var(--shadow); }
.hist-sum b { display: block; font: 700 calc(20px * var(--fs)) 'Google Sans'; }
.hist-sum small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.trip { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); cursor: pointer; transition: background .15s; }
.trip:last-child { border-bottom: 0; }
.trip .grow { flex: 1; min-width: 0; }
.trip b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.trip small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.trip.on b { color: var(--blue); }
.trip .play { color: var(--blue); background: var(--blue-deep); }
.trip .play .ic { width: 18px; height: 18px; }
.hist-end { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 5px; border-radius: 10px; background: var(--blue); color: #fff; font: 500 calc(12.5px * var(--fs)) 'Google Sans'; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.hist-end.fin { background: var(--green); }
.hist-end .ic { width: 18px; height: 18px; }
.hist-dot .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: calc(15px * var(--fs)); box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, .3); }
.hist-card { display: flex; align-items: center; gap: 12px; margin-top: 8px; cursor: pointer; }
.hist-card .grow { flex: 1; } .hist-card b { font: 700 calc(16px * var(--fs)) 'Google Sans'; display: block; } .hist-card small { color: var(--mute); font-size: calc(13px * var(--fs)); }
.hist-card .tag { width: 38px; height: 38px; border-radius: 12px; }
.hist-card > .ic { width: 20px; height: 20px; color: var(--mute); }

.school-pin.hi .ic { color: #8b5cf6; }
#wd-loop button { display: flex; align-items: center; justify-content: center; gap: 6px; }
#wd-loop .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------ app menu (bottom sheet, as on the phone) */
.m-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(100deg, #0a74ff, #36a3ff); color: #fff; cursor: pointer; margin-top: 6px; }
.m-banner.plus { background: linear-gradient(100deg, #f5a300, #ffcc33); color: #2b1b00; }
.m-banner .grow { flex: 1; } .m-banner b { display: block; font: 500 calc(16px * var(--fs))/calc(20px * var(--fs)) 'Google Sans'; } .m-banner small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; opacity: .85; }
.mb-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; } .mb-ic .ic { width: 28px; height: 28px; }
.m-banner > .ic { width: 20px; height: 20px; }
.m-h { text-align: center; font: 500 calc(16px * var(--fs)) 'Google Sans'; margin: 18px 0 6px; }
.mrow { display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px; cursor: pointer; transition: opacity .15s; }
.mrow:active { opacity: .6; }
.mrow .mi { width: 26px; height: 26px; color: var(--ink-2); position: relative; flex: none; } .mrow .mi .ic { width: 26px; height: 26px; }
.mrow.blue .mi { color: var(--blue); } .mrow.red, .mrow.red .mi { color: var(--red); }
.mrow.dot .mi::after { content: ''; position: absolute; right: -2px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.mrow .grow { flex: 1; } .mrow b { font: 400 calc(16px * var(--fs))/calc(22px * var(--fs)) 'Google Sans'; display: block; } .mrow small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--mute); }
.ic.excl { border: 2px solid currentColor; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font: 700 calc(13px * var(--fs)) 'Google Sans'; margin: 2px; }
/* menu pages */
.srow, .trow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.srow:last-child, .trow:last-child { border-bottom: 0; }
.srow .grow, .trow .grow { flex: 1; min-width: 0; }
.srow b, .trow b { font: 500 calc(15.5px * var(--fs)) 'Google Sans'; display: flex; align-items: center; gap: 6px; } .srow small, .trow small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.srow > .ic { width: 20px; height: 20px; color: var(--mute); flex: none; }
.srow.add b { color: var(--blue); } .srow.red b, .srow.red .pic { color: var(--red); }
.srow .dim { font: 400 calc(14px * var(--fs)) 'Google Sans'; }
.card.list.verify { background: #fff4c2; } :root:not([data-theme="light"]) .card.list.verify { background: #6b5a06; }
.lockp { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--blue); color: #fff; } .lockp .ic { width: 12px; height: 12px; }
.setup { height: 30px; padding: 0 12px; border-radius: 9px; background: var(--blue-deep); color: var(--blue); font: 500 calc(13px * var(--fs)) 'Google Sans'; flex: none; }
.np-ic { width: 64px; height: 64px; margin: 10px auto 4px; border-radius: 20px; background: #fff1c2; color: #e6a100; display: grid; place-items: center; } .np-ic .ic { width: 34px; height: 34px; }
.empty-big { text-align: center; padding: 140px 16px 0; } .empty-big h3 { font: 700 calc(22px * var(--fs)) 'Google Sans'; margin: 0 0 8px; } .empty-big p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: var(--ink-2); margin: 0; }
.art-img { display: block; width: 100%; border-radius: 22px; } .art-img.wide { border-radius: 0; }
.art-h { font: 700 calc(22px * var(--fs))/calc(27px * var(--fs)) 'Google Sans'; text-align: center; margin: 18px 0 8px; } .art-p { font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: var(--ink-2); text-align: center; margin: 0 0 12px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--track-2); } .dots i.on { background: var(--ink); }
.acc-i { background: var(--surface); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }
.acc-h { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; } .acc-h b { flex: 1; font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.acc-h .num { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 500 calc(13px * var(--fs)) 'Google Sans'; flex: none; }
.acc-h .ic { width: 20px; height: 20px; color: var(--mute); transition: transform .2s; } .acc-i.open .acc-h .ic { transform: rotate(180deg); }
.acc-b { display: none; padding: 0 14px 14px 50px; font: 400 calc(14px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: var(--ink-2); } .acc-i.open .acc-b { display: block; }
.rb { padding: 4px 14px; margin-top: 10px; } .rb-i { display: flex; gap: 12px; padding: 10px 0; font: 400 calc(14.5px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; border-bottom: 1px solid var(--track); } .rb-i:last-child { border-bottom: 0; }
.rb-i span { width: 22px; flex: none; font: 700 calc(16px * var(--fs)) 'Google Sans'; text-align: center; } .rb-i .o { color: var(--orange); } .rb-i .b { color: var(--blue); } .rb-i .g { color: var(--green); }
.arr-art { height: 230px; border-radius: 22px; background: linear-gradient(#2d3b55, #1a2233); position: relative; overflow: hidden; margin-bottom: 14px; }
.arr-phone { position: absolute; left: 50%; top: 18px; width: 210px; height: 260px; margin-left: -105px; border-radius: 30px; border: 6px solid #3c4659; background: repeating-linear-gradient(35deg, #263247 0 22px, #2c3a52 22px 24px); }
.arr-n { position: absolute; left: -46px; right: -46px; top: 40px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: #1f2023; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.arr-n img { width: 34px; height: 34px; border-radius: 9px; } .arr-n small { font: 400 calc(11px * var(--fs)) 'Google Sans'; color: #aaa; display: block; } .arr-n b { font: 500 calc(14px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; }
.arr-n .avatar { width: 42px; height: 42px; border-radius: 13px; } .arr-n .grow { flex: 1; }
.arr-home { position: absolute; left: 90px; top: 150px; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; } .arr-home .ic { width: 18px; height: 18px; }
.howh { font: 700 calc(17px * var(--fs)) 'Google Sans'; margin: 18px 4px 6px; } .howp { font: 400 calc(14px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; color: var(--ink-2); margin: 0 4px; }
.about-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 18px; } .about-hd img { width: 84px; height: 84px; border-radius: 22px; } .about-hd b { font: 700 calc(22px * var(--fs)) 'Google Sans'; }
.stars { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .stars button { color: var(--track-2); } .stars button.on { color: #ffb400; } .stars .ic { width: 40px; height: 40px; }
.ta { width: 100%; height: 120px; border-radius: 16px; border: 0; background: var(--surface); color: var(--ink); padding: 12px; font: 400 calc(15px * var(--fs)) 'Google Sans'; resize: none; outline: none; }
/* plan */
.plan-hd.is-plus b { background: linear-gradient(90deg, #f5a300, #ff7a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: #fff1c2; color: #b07a00; font: 500 calc(13px * var(--fs)) 'Google Sans'; margin-bottom: 6px; }
.pl-badge .ic { width: 16px; height: 16px; }
.plus-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: #e6a100 !important; } .plus-note .ic { width: 18px; height: 18px; }

/* app icon picker */
.ico-row { display: flex; gap: 12px; margin: 10px 0 12px; }
.ico-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--surface); border: 2px solid transparent; cursor: pointer; }
.ico-opt.on { border-color: var(--blue); background: var(--blue-deep); }
.ico-opt img { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); margin-bottom: 6px; }
.ico-opt b { font: 500 calc(15px * var(--fs)) 'Google Sans'; } .ico-opt small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.ico-mini { width: 30px; height: 30px; border-radius: 8px; }

/* iPhone notification banner (iOS style: frosted card under the status bar, icon, title, "now", text) */
#iosban { position: absolute; left: 8px; right: 8px; top: max(8px, calc(var(--st) - 4px)); z-index: 95; display: flex; gap: 10px; align-items: center; padding: 12px 14px;
  border-radius: 24px; background: rgba(246, 246, 246, .86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .16); color: #000; opacity: 0; transform: translateY(-140%); pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1.2, .36, 1), opacity .25s; touch-action: none; }
:root:not([data-theme="light"]) #iosban { background: rgba(44, 44, 46, .86); color: #fff; }
#iosban.show { opacity: 1; }
#iosban.open { transform: none; pointer-events: auto; cursor: pointer; }
#iosban.drag { transition: none; }
.ib-ic { position: relative; width: 40px; height: 40px; flex: none; }
.ib-av { width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: calc(18px * var(--fs)) !important; }
.ib-app { width: 40px; height: 40px; border-radius: 10px; }
.ib-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(246, 246, 246, .9); }
.ib-t { flex: 1; min-width: 0; }
.ib-r { display: flex; align-items: baseline; gap: 8px; }
.ib-r b { flex: 1; font: 600 calc(15px * var(--fs))/calc(19px * var(--fs)) -apple-system, 'SF Pro Text', 'Google Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-r time { font: 400 calc(13px * var(--fs)) -apple-system, 'Google Sans', sans-serif; opacity: .5; flex: none; }
.ib-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 calc(15px * var(--fs))/calc(19px * var(--fs)) -apple-system, 'SF Pro Text', 'Google Sans', sans-serif; opacity: .92; }

/* iOS Home Screen fit modes (see fit() in app.js) */
@media (max-width: 760px) {
  html[data-fit="doc"], html[data-fit="doc"] body { position: relative; inset: auto; height: var(--fullh); overflow: hidden; }
  html[data-fit="doc"] .layout { position: absolute; left: 0; top: 0; width: 100%; height: var(--fullh); min-height: 0; }
  html[data-fit="doc"] .phone { position: absolute; left: 0; top: 0; right: 0; bottom: auto; height: var(--fullh); }
  html[data-fit="vh"] .phone { position: fixed; left: 0; top: 0; right: 0; bottom: auto; height: 100vh; }
  html[data-fit="lvh"] .phone { position: fixed; left: 0; top: 0; right: 0; bottom: auto; height: 100vh; height: 100lvh; }
}
#diag { position: fixed; left: 10px; right: 10px; top: 35%; z-index: 999; background: rgba(0, 0, 0, .86); color: #fff; border-radius: 16px; padding: 12px 14px; font: 400 calc(13px * var(--fs))/calc(18px * var(--fs)) -apple-system, 'Google Sans', sans-serif; }
#diag b { font-size: calc(15px * var(--fs)); display: block; margin-bottom: 6px; }
#diag div { display: flex; justify-content: space-between; gap: 10px; } #diag span { opacity: .7; } #diag i { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
#diag .dg-b { gap: 6px; margin-top: 10px; } #diag .dg-b button { flex: 1; height: 34px; border-radius: 10px; background: #333; color: #fff; font: 500 calc(14px * var(--fs)) sans-serif; } #diag .dg-b button.on { background: #0a84ff; }
#diag-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ff2d55; z-index: 998; pointer-events: none; }

/* launch screen (as the app shows it: icon and the Findmykids wordmark on a plain background) */
#splash { position: fixed; inset: 0; z-index: 1000; background: #f6f6f6; display: flex; flex-direction: column; align-items: center; transition: opacity .35s ease, visibility .35s; }
:root:not([data-theme="light"]) #splash { background: #000; }
#splash .sp-ic { width: 110px; height: 110px; border-radius: 26px; margin-top: calc(40.6vh - 55px); margin-top: calc(40.6dvh - 55px); overflow: hidden; transition: transform .35s cubic-bezier(.3, 0, .2, 1); }
#splash .sp-ic img { width: 100%; height: 100%; display: block; }
#splash .sp-wm { width: 183px; margin-top: 17px; transition: transform .35s cubic-bezier(.3, 0, .2, 1); }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-ic, #splash.out .sp-wm { transform: scale(1.06); }

#splash .sp-lot { position: absolute; left: calc(50% - 138.7px); top: calc(40.6vh - 103.3px); top: calc(40.6dvh - 103.3px); width: 278.7px; height: 159.3px; pointer-events: none; }
#splash .sp-lot svg { display: block; }
#splash.playing .sp-ic { visibility: hidden; }
.phone.reveal { z-index: 1001; position: relative; }

/* app icons from the App Store */
img.atile.img { display: block; object-fit: cover; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); background: #fff; }
/* time wheels: their own scroll area, framed, never drag the sheet */
.wheels { box-shadow: inset 0 0 0 1px var(--track); touch-action: none; }
.wheel { touch-action: pan-y; }
#pf-list .opt-row > span, #pl-list .opt-row > span { display: flex; flex-direction: column; }
#pf-list .role, #pl-list .role { display: block; }

/* ------------------------------------------------------------ pause */
#stage.paused *, #stage.paused *::before, #stage.paused *::after { animation-play-state: paused !important; }
#pause-zone { position: absolute; left: 0; right: 0; top: 0; height: max(24px, var(--st)); z-index: 90; -webkit-touch-callout: none; touch-action: none; }
#pause-badge { position: absolute; left: 50%; top: calc(var(--st) + 54px); transform: translateX(-50%) scale(.8); width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55);
  color: #fff; display: grid; place-items: center; z-index: 91; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#pause-badge.on { opacity: 1; transform: translateX(-50%); }
#pause-badge .ic { width: 16px; height: 16px; }
/* ------------------------------------------------------------ map editor */
#stage.editing #sheet, #stage.editing .navbar, #stage.editing .mapbtns, #stage.editing .tabpage { display: none !important; }
#edit-ui { display: none; }
#stage.editing #edit-ui { display: block; }
.ed-top { position: absolute; left: 12px; right: 12px; top: calc(var(--st) + 8px); z-index: 20; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px;
  border-radius: 16px; background: var(--btn); box-shadow: var(--shadow); font: 500 calc(16px * var(--fs)) 'Google Sans'; }
.ed-top > span { flex: 1; display: flex; align-items: center; gap: 8px; } .ed-top .ic { width: 20px; height: 20px; }
.ed-top button { height: 34px; padding: 0 10px; border-radius: 11px; display: grid; place-items: center; }
.ed-top .done { background: var(--blue); color: #fff; font: 500 calc(14.5px * var(--fs)) 'Google Sans'; padding: 0 16px; }
.ed-hint { position: absolute; left: 50%; bottom: calc(96px + var(--sbb)); transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .72); color: #fff; font: 400 calc(13.5px * var(--fs)) 'Google Sans'; text-align: center; pointer-events: none; }
.ed-tools { position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--sbb)); z-index: 20; display: flex; gap: 4px; padding: 4px; border-radius: 20px; background: var(--btn); box-shadow: var(--shadow); }
.ed-tools button { flex: 1; height: 58px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 500 calc(12px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.ed-tools button .ic { width: 22px; height: 22px; }
.ed-tools button.on { background: var(--blue-deep); color: var(--blue); }
.ed-route { display: none; position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--sbb)); z-index: 21; padding: 12px; border-radius: 20px; background: var(--btn); box-shadow: var(--shadow); }
#stage.routing .ed-route { display: block; } #stage.routing .ed-tools, #stage.routing .ed-hint { display: none; }
.er-info { display: flex; align-items: center; gap: 10px; font: 400 calc(14px * var(--fs)) 'Google Sans'; margin-bottom: 10px; }
.er-info .avatar { width: 32px; height: 32px; border-radius: 11px; font-size: calc(15px * var(--fs)); flex: none; }
.er-b { display: flex; gap: 6px; } .er-b button { flex: 1; height: 42px; border-radius: 13px; background: var(--surface); font: 500 calc(14px * var(--fs)) 'Google Sans'; display: flex; align-items: center; justify-content: center; gap: 4px; }
.er-b button .ic { width: 18px; height: 18px; } .er-b .save { background: var(--blue); color: #fff; flex: 1.4; }
.wp { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.wp.start { border-color: var(--green); }
.zone-h { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); border: 2.5px solid #fff; color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
.zone-h .ic { width: 18px; height: 18px; }
#stage.editing .maplibregl-marker .pin { cursor: grab; }
.ps-hd { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; padding-right: 44px; }
.opt-row.red, .opt-row.red .ic { color: var(--red); }
.themes .opt-row .fam .ic { width: 22px; height: 22px; color: var(--blue); }
.school-pin.dest .ic { color: var(--blue); }
/* record a take */
#rec-cd { position: absolute; inset: 0; z-index: 200; background: rgba(0, 0, 0, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 10px; }
#rec-cd b { font: 700 calc(120px * var(--fs)) 'Google Sans'; line-height: 1; }
#rec-cd small { font: 400 calc(15px * var(--fs)) 'Google Sans'; opacity: .85; }
.themes .opt-row > span:not(.fam):not(.ic) { display: flex; flex-direction: column; }
.themes .opt-row > span:not(.fam) > .role { display: block; }

/* places: badge on the zone edge, icon grid, your own icons, colours */
.place-pin { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #fff, 0 1px 5px rgba(0, 0, 0, .22); }
.place-pin .ic { width: 17px; height: 17px; }
:root[data-theme="dark"] .place-pin { box-shadow: 0 0 0 1.5px #000, 0 1px 5px rgba(0, 0, 0, .4); }
.place-mk { cursor: pointer; z-index: 0; }
.pimg { display: block; overflow: hidden; }
.pimg img { width: 100%; height: 100%; object-fit: cover; border-radius: 28%; display: block; }
.pimg.mask { background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.lk-head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.lk-head .h { margin: 0; }
#lk-prev .place-pin { width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); }
#lk-prev .place-pin .ic { width: 20px; height: 20px; }
.pl-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.pl-icons button { aspect-ratio: 1; border-radius: 12px; background: var(--surface); color: var(--ink); display: grid; place-items: center; border: 1.5px solid transparent; }
.pl-icons button .ic { width: 22px; height: 22px; }
.pl-icons button.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.pl-icons button.up { border: 1.5px dashed var(--mute); color: var(--mute); background: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .35); flex: none; position: relative; cursor: pointer; }
.swatch.on { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.swatch.custom { background: conic-gradient(#ff3b30, #ffcc00, #34c759, #00b8a9, #0085ff, #7b61ff, #ff4fa3, #ff3b30); overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

/* weekly achievements */
.wr-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.wr-card img { width: 44px; height: 57px; flex: none; }
.wr-card small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.wr-card b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; margin: 2px 0 3px; }
.wr-card span { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--blue); }
.wr-card > .ic { color: var(--mute); }
.wr-hero { background: linear-gradient(135deg, #0085ff, #7b61ff); color: #fff; border-radius: 22px; padding: 18px 18px 20px; }
.wr-hero small { font: 400 calc(13px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; opacity: .9; display: block; }
.wr-hero b { font: 700 calc(40px * var(--fs))/calc(46px * var(--fs)) 'Google Sans'; display: block; margin: 8px 0 4px; }
.wr-hero span { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; }
.wr-chart { padding: 16px 14px 14px; }
.wr-bars { display: flex; gap: 8px; height: 130px; align-items: stretch; }
.wr-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wr-col small { font: 400 calc(11.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.wr-bar { flex: 1; width: 100%; max-width: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.wr-bar i { display: block; border-radius: 6px; min-height: 0; }
.wr-bar i.foot, .wr-legend i.foot { background: var(--blue); }
.wr-bar i.car, .wr-legend i.car { background: #c858da; }
.wr-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.wr-legend span { display: flex; align-items: center; gap: 8px; }
.wr-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.pic.fvp { background: #f6e4f9; color: #c858da; }
:root[data-theme="dark"] .pic.fvp { background: #3a1f3f; }

/* frequently visited place and meeting point pins (the app's predicted-place pin: rounded square, tail, dot) */
.fvp-pin, .meet-pin { position: relative; width: 40px; height: 40px; border-radius: 15px; background: #c858da; color: #fff; display: grid; place-items: center; margin-bottom: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.meet-pin { background: #fa7500; }
.fvp-pin .ic, .meet-pin .ic { width: 22px; height: 22px; position: relative; z-index: 1; }
.fvp-pin::after, .meet-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; background: inherit; border-radius: 0 0 4px 0; transform: translateX(-50%) rotate(45deg); }
.fvp-pin::before, .meet-pin::before { content: ''; position: absolute; left: 50%; bottom: -21px; width: 7px; height: 7px; margin-left: -5px; border-radius: 50%; background: #fff; border: 2.5px solid #c858da; }
.meet-pin::before { border-color: #fa7500; }
.fvp-pin.sm { width: 34px; height: 34px; border-radius: 12px; margin: 0; flex: none; box-shadow: none; }
.fvp-pin.sm::before, .fvp-pin.sm::after { display: none; }
.fvp-pin.big, .meet-pin.big { width: 64px; height: 64px; border-radius: 22px; margin: 4px auto 30px; }
.fvp-pin.big .ic, .meet-pin.big .ic { width: 32px; height: 32px; }
.fvp-top { display: flex; justify-content: center; margin-top: 10px; }
.fvp-card { display: flex; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.fvp-card b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; }
.fvp-card small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; margin: 3px 0 10px; }
.btn.sm { height: 36px; border-radius: 12px; font-size: calc(14px * var(--fs)); padding: 0 14px; width: auto; display: inline-flex; }
.fvp-who { padding: 14px; margin-bottom: 12px; }
.fvp-who > small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; margin-bottom: 10px; }
.fvp-who .fam { display: flex; align-items: center; gap: 12px; }
.fvp-who b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.fvp-who .fam small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.fvp-addr { display: flex; align-items: center; gap: 8px; font: 500 calc(15px * var(--fs)) 'Google Sans'; margin: 4px 0 16px; }
.fvp-addr .ic { color: var(--blue); width: 20px; height: 20px; }

/* warnings about a kid */
.warn-ill { display: block; width: 100%; max-width: 300px; height: auto; margin: 6px auto 4px; }
.chip.warn { background: #fde4e7; color: var(--ink); }
.chip.warn .ic { color: var(--red); width: 16px; height: 16px; }
:root[data-theme="dark"] .chip.warn { background: #3d1a1f; }
.pin.warn .body .face { filter: grayscale(1); opacity: .65; }
.pin.warn .dot { background: var(--mute) !important; }
.pin.warn .label .ic { color: var(--red); }
.pin .badge.wb { color: var(--red); }
.warn-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fde4e7; margin-bottom: 12px; cursor: pointer; }
:root[data-theme="dark"] .warn-card { background: #3d1a1f; }
.warn-card .wi { width: 38px; height: 38px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.warn-card .wi .ic { width: 22px; height: 22px; }
.warn-card b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.warn-card small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.isl-ic.red { background: #ff453a; }

/* meeting point: picking on the map */
#stage.meet-picking #sheet, #stage.meet-picking #mapbtns, #stage.meet-picking #navbar { opacity: 0; pointer-events: none; transition: opacity .2s; }
#meet-ui { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#meet-ui > * { pointer-events: auto; }
.mt-top { position: absolute; top: calc(var(--st) + 8px); left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; font: 700 calc(19px * var(--fs)) 'Google Sans'; }
.mt-top b { background: var(--btn); padding: 8px 14px; border-radius: 14px; box-shadow: var(--shadow); }
.mt-center { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); pointer-events: none !important; transition: transform .2s; }
#meet-ui.lift .mt-center { transform: translate(-50%, calc(-100% - 10px)); }
.mt-center .meet-pin { margin-bottom: 0; }
.mt-center .meet-pin::before { bottom: -21px; }
.mt-center::after { content: ''; display: block; height: 22px; }
.mt-card { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0; padding: 18px 16px calc(18px + var(--sbb, 0px)); box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); }
.mt-card small { font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); }
.mt-addr { display: flex; align-items: center; gap: 8px; font: 500 calc(17px * var(--fs))/calc(22px * var(--fs)) 'Google Sans'; margin: 8px 0 16px; min-height: 22px; }
.mt-addr .ic { color: #fa7500; width: 22px; height: 22px; flex: none; }
.mt-time { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--surface); font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.mt-plus { height: 34px; padding: 0 14px; border-radius: 11px; background: #ffe9d6; color: #fa7500; font: 500 calc(14px * var(--fs)) 'Google Sans'; }
:root[data-theme="dark"] .mt-plus { background: #3d2510; }
.mt-conf { position: absolute; left: 0; right: 0; top: 0; height: 300px; pointer-events: none; z-index: 3; }

/* SOS from a kid */
.sos-card { background: #fde4e7; border-radius: 20px; padding: 14px; margin-bottom: 12px; cursor: pointer; animation: sosCardPulse 1.6s ease-in-out infinite; }
:root[data-theme="dark"] .sos-card { background: #3d1a1f; }
@keyframes sosCardPulse { 50% { box-shadow: 0 0 0 4px rgba(242, 63, 84, .25); } }
.sc-hd { display: flex; align-items: center; gap: 12px; }
.sc-av .avatar { box-shadow: 0 0 0 3px var(--red); }
.sc-hd b { font: 700 calc(16px * var(--fs)) 'Google Sans'; color: var(--red); display: block; }
.sc-hd small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.sc-btns { display: flex; gap: 8px; margin-top: 12px; }
.sc-btns button { flex: 1; height: 40px; border-radius: 12px; background: var(--bg); color: var(--ink); font: 500 calc(14px * var(--fs)) 'Google Sans'; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sc-btns button .ic { width: 18px; height: 18px; color: var(--red); }
.sc-btns button:last-child { background: var(--red); color: #fff; }
.ksos-top { display: flex; justify-content: center; margin: 14px 0 14px; }
.ksos-ring { border-radius: 50%; box-shadow: 0 0 0 4px var(--red); animation: ksosRing 1.2s ease-out infinite; }
.ksos-ring.off { box-shadow: 0 0 0 4px var(--green, #06a747); animation: none; }
@keyframes ksosRing { 0% { box-shadow: 0 0 0 4px var(--red), 0 0 0 4px rgba(242, 63, 84, .5); } 100% { box-shadow: 0 0 0 4px var(--red), 0 0 0 26px rgba(242, 63, 84, 0); } }
.ksos-addr { justify-content: center; }
.ksos-acts .act { background: #fde4e7; }
:root[data-theme="dark"] .ksos-acts .act { background: #3d1a1f; }
.ksos-acts .act .ic { color: var(--red); }
.chip.sos { background: var(--red); color: #fff; }
.chip.sos .ic { color: #fff; width: 16px; height: 16px; }
.pin.sos .body { background: var(--red); animation: pinSos 1.1s ease-out infinite; }
.pin.sos .label { background: var(--red); color: #fff; }
.pin.sos .label .ic { color: #fff; }
.pin.sos .dot { background: var(--red) !important; }
@keyframes pinSos { 0% { box-shadow: 0 0 0 0 rgba(242, 63, 84, .6); } 100% { box-shadow: 0 0 0 18px rgba(242, 63, 84, 0); } }

/* tasks and rewards */
.tk-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; }
.tk-card small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.tk-card b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; margin: 2px 0; }
.tk-card .grow > span { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: #e8a400; }
.tk-card > .ic { color: var(--mute); }
.tk-ge { width: 44px; height: 44px; border-radius: 14px; background: #fff4d6; display: grid; place-items: center; font-size: calc(24px * var(--fs)); flex: none; }
:root[data-theme="dark"] .tk-ge { background: #3a2f12; }
.tk-ge.big { width: 56px; height: 56px; border-radius: 18px; font-size: calc(30px * var(--fs)); }
.tk-goal { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--surface); }
.tk-goal small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.tk-goal b { font: 700 calc(17px * var(--fs)) 'Google Sans'; display: block; margin: 2px 0 8px; }
.tk-goal.empty b { margin-bottom: 2px; }
.tk-bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin-bottom: 6px; }
.tk-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffc400, #ff9500); }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.tk-row:last-child { border-bottom: 0; }
.tk-row b { font: 500 calc(15px * var(--fs))/calc(19px * var(--fs)) 'Google Sans'; display: block; }
.tk-row small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.tk-row.done b { color: var(--mute); text-decoration: line-through; }
.tk-e { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2, var(--track)); display: grid; place-items: center; font-size: calc(20px * var(--fs)); flex: none; }
.tk-star { font: 500 calc(13px * var(--fs)) 'Google Sans'; color: #e8a400; white-space: nowrap; }
.tk-ok { color: var(--green-ink, #06a747); display: grid; }
.tk-ok .ic { width: 22px; height: 22px; }
.tk-empty { padding: 14px 0; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); }
.tk-big { font-size: calc(64px * var(--fs)); text-align: center; margin: 18px 0 6px; line-height: 1; }
.tk-plus { text-align: center; font: 700 calc(28px * var(--fs)) 'Google Sans'; color: #e8a400; margin: -6px 0 16px; }
#tk-rec button { white-space: nowrap; }

/* circle activity */
.act-card { cursor: pointer; }
.act-card .ac-ic { color: var(--ink); display: flex; margin-bottom: 4px; }
.act-card small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.act-card b { font: 500 calc(14px * var(--fs))/calc(18px * var(--fs)) 'Google Sans'; display: block; margin-top: 2px; }
.act-card span { font: 400 calc(12px * var(--fs)) 'Google Sans'; }
.up { color: var(--green-ink, #06a747); }
.dn { color: var(--red); }
.ac-period { font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); margin: 2px 2px 10px; }
.ac-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.ac-row:last-child { border-bottom: 0; }
.ac-row.on b { color: var(--blue); }
.ac-n { width: 18px; font: 700 calc(15px * var(--fs)) 'Google Sans'; color: var(--mute); text-align: center; }
.ac-row .grow { flex: 1; min-width: 0; }
.ac-row b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; margin-bottom: 6px; }
.ac-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.ac-v { font: 500 calc(14px * var(--fs)) 'Google Sans'; min-width: 56px; text-align: right; }
.ac-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ac-head small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); display: block; }
.ac-head b { font: 700 calc(24px * var(--fs)) 'Google Sans'; }
.ac-diff { font: 500 calc(12.5px * var(--fs)) 'Google Sans'; text-align: right; max-width: 90px; }

/* arrival prediction */
.pred-pin { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 4px; border-radius: 12px; background: var(--c); color: #fff; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; white-space: nowrap; position: relative; margin-top: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.pred-pin::after { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: var(--c); transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0; }
.pp-ic { width: 26px; height: 26px; border-radius: 9px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.pp-ic .ic { width: 18px; height: 18px; }
.magic-anim { width: 200px; height: 300px; margin: 6px auto 0; }

/* light theme as on the phone: a grey sheet with white cards and a white tab bar */
:root[data-theme="light"] .sheet { background: var(--surface); }
:root[data-theme="light"] .sheet .card, :root[data-theme="light"] .sheet .fcard, :root[data-theme="light"] .sheet .route-card { background: #fff; }
:root[data-theme="light"] .navbar { background: #fff; }

/* route stops: the stop rides above the finger, a bubble marks the finger */
#wp-ov { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#wp-ov > * { position: absolute; left: 0; top: 0; }
.wp-bub { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(0, 133, 255, .18); border: 2px solid rgba(0, 133, 255, .55); }
.wp-stem { width: 2px; margin-left: -1px; border-left: 2px dashed rgba(0, 133, 255, .7); margin-top: 8px; }
.wp-ghost { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-width: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.wp[data-i] { width: 18px; height: 18px; cursor: grab; }
/* live card: the progress bar is a playhead */
.lc-bar[data-scrub] { cursor: ew-resize; touch-action: none; }
.lc-bar[data-scrub]::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.lc-bar.scrub .lc-w { transform-origin: center; scale: 1.15; }
:root[data-theme="light"] .sheet .live-card { background: #fff; }
:root[data-theme="light"] .sheet .lc-w { box-shadow: 0 0 0 3px #fff; }

/* kid screen as on the phone with a kid: Updating info…, Parental controls, Plus plan features, protection level, quick-action chips */
.statuspill.upd { gap: 8px; font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.statuspill.upd .spinner { width: 14px; height: 14px; border-width: 2px; border-color: var(--track); border-top-color: var(--ink); }
.pc-btn { width: 100%; height: 56px; border-radius: 18px; background: var(--blue-deep); border: 1.5px solid #9fcfff; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 calc(16px * var(--fs)) 'Google Sans'; color: var(--ink); margin: 4px 0 18px; position: relative; }
:root[data-theme="dark"] .pc-btn { border-color: #1e4a7a; }
.pc-btn .pc-ic { width: 32px; height: 32px; display: grid; }
.pc-btn small { position: absolute; right: 14px; font: 400 calc(11.5px * var(--fs)) 'Google Sans'; color: var(--blue); }
.pc-btn small:empty { display: none; }
.pf-h { font: 700 calc(18px * var(--fs)) 'Google Sans'; margin: 0 0 10px; }
.kd-h { font: 700 calc(18px * var(--fs)) 'Google Sans'; margin: 22px 0 12px; }
.pf-card { padding: 0 16px; margin-bottom: 16px; }
.pf-row { display: flex; align-items: center; gap: 14px; height: 58px; font: 400 calc(16px * var(--fs)) 'Google Sans'; }
.pf-row .grow { flex: 1; min-width: 0; }
.pf-row + .pf-row { border-top: 1px solid var(--track); }
.pf-ic { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.pf-ic .ic, .pf-ic img { width: 26px; height: 26px; }
.prot-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; cursor: pointer; }
.prot-card b { font: 500 calc(16px * var(--fs)) 'Google Sans'; display: block; }
.prot-card small { font: 400 calc(13.5px * var(--fs))/calc(17px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.prot-card > .ic { color: var(--ink-2); }
.prot-card.min, .prot-hero.min { background: #fde4e7; --pc: var(--red); }
.prot-card.mid, .prot-hero.mid { background: #fff1dd; --pc: #fa7500; }
.prot-card.high, .prot-hero.high { background: #e1f6e8; --pc: #06a747; }
.prot-card.max, .prot-hero.max { background: #e1f6e8; --pc: #06a747; }
:root[data-theme="dark"] .prot-card.min, :root[data-theme="dark"] .prot-hero.min { background: #3d1a1f; }
:root[data-theme="dark"] .prot-card.mid, :root[data-theme="dark"] .prot-hero.mid { background: #3d2a10; }
:root[data-theme="dark"] .prot-card:is(.high, .max), :root[data-theme="dark"] .prot-hero:is(.high, .max) { background: #12311f; }
.prot-card b { color: var(--pc); }
.prot-ring { width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.prot-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--pc) calc(var(--p) * 1%), rgba(127, 127, 127, .2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.prot-ring b { position: relative; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--pc); }
.prot-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; }
.prot-hero b { font: 700 calc(20px * var(--fs)) 'Google Sans'; color: var(--pc); display: block; }
.prot-hero small { font: 400 calc(13.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.prot-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--track); }
.prot-row:last-child { border-bottom: 0; }
.prot-row .grow { flex: 1; min-width: 0; }
.prot-row .btn.sm { white-space: nowrap; flex: none; }
.prot-row b { font: 500 calc(15px * var(--fs)) 'Google Sans'; display: block; }
.prot-row small { font: 400 calc(12.5px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--mute); }
.prot-row.done small { color: var(--green-ink, #06a747); }
.qa-bar { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--sbb, 0px)); display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; z-index: 9; }
.qa-bar::-webkit-scrollbar { display: none; }
.qa-bar button { flex: none; height: 48px; border-radius: 16px; background: var(--btn); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); display: flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; font: 500 calc(16px * var(--fs)) 'Google Sans'; color: var(--ink); white-space: nowrap; }
.qa-bar button .ic { width: 24px; height: 24px; }

/* feed: a member with a warning (grey avatar, red status, Learn more), Circle activity card, steps chart (as on the phone) */
.member.warnrow { background: linear-gradient(90deg, transparent 40%, rgba(242, 63, 84, .16)); }
.avatar.off { background-color: var(--surface-2, #ececec) !important; color: var(--mute) !important; filter: grayscale(1); opacity: .75; }
.member .avatar.off { box-shadow: 0 0 0 3px var(--line); }
.member .wtxt { font: 400 calc(15px * var(--fs)) 'Google Sans'; color: var(--red); margin-top: 3px; }
.lm-btn { flex: none; height: 38px; border-radius: 12px; background: var(--btn); color: var(--red); font: 500 calc(15px * var(--fs)) 'Google Sans'; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 14px; }
.lm-btn .ic { width: 18px; height: 18px; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 12px 0 14px; cursor: pointer; }
.act-row b { font: 500 calc(16px * var(--fs)) 'Google Sans'; display: block; }
.act-row small { font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.act-row > .ic { color: var(--mute); }
.ar-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; flex: none; }
.ar-ic .ic { width: 26px; height: 26px; }
.ar-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; flex: none; }
.ar-bars i { width: 4px; border-radius: 2px; background: var(--track); display: block; }
.steps-ch { display: flex; gap: 12px; padding: 16px; margin-top: 10px; cursor: pointer; }
.sc-l { width: 104px; flex: none; display: flex; flex-direction: column; }
.sc-l b { font: 400 calc(30px * var(--fs)) 'Google Sans'; }
.sc-l small { font: 400 calc(13px * var(--fs))/calc(16px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.sc-l span { margin-top: auto; font: 400 calc(11px * var(--fs)) 'Google Sans'; color: var(--mute); }
.sc-r { flex: 1; position: relative; height: 120px; }
.sc-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 18px; }
.sc-grid em { position: absolute; left: 0; right: 0; border-top: 1px solid var(--track); }
.sc-grid em span { position: absolute; right: 0; top: -14px; font: normal 400 calc(9.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.sc-bars { position: absolute; inset: 0 30px 0 0; display: flex; gap: 6px; }
.sc-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sc-bars i { width: 100%; max-width: 22px; border-radius: 6px 6px 2px 2px; background: #a9d6ff; display: block; }
.sc-bars small { height: 18px; line-height: 18px; font: 400 calc(10.5px * var(--fs)) 'Google Sans'; color: var(--mute); }

/* kid screen: warning pill, title bar when the sheet is open, quick reactions above the sheet */
.statuspill.wpill { cursor: pointer; font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.statuspill.wpill .ic { color: var(--red); }
.kid-title { display: none; }
.page.kfull .kid-top { background: var(--bg); top: 0; padding-top: calc(var(--st) + 8px); padding-bottom: 10px; }
.page.kfull .kid-top .statuspill, .page.kfull #k-layers { display: none !important; }
.page.kfull .kid-title { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kid-title > span:first-child { display: none; }
.kid-title b { font: 700 calc(16px * var(--fs)) 'Google Sans'; display: flex; align-items: center; gap: 6px; }
.kid-title small { font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.kid-title small .ic { width: 14px; height: 14px; color: var(--red); }
.fr-bar { position: absolute; left: 0; right: 0; display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; z-index: 7; transition: opacity .2s; }
.fr-bar::-webkit-scrollbar { display: none; }
.page.kfull .fr-bar { opacity: 0; pointer-events: none; }
.fr-bar button { flex: none; height: 44px; border-radius: 22px; background: var(--btn); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); display: flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--ink); white-space: nowrap; }
.fr-bar button span { font-size: 20px; line-height: 1; }
#fr-anim { position: absolute; left: 50%; top: 50%; width: 300px; height: 477px; transform: translate(-50%, -55%); z-index: 60; pointer-events: none; }

/* Prototype settings: three tabs (Scene, Events, Look), each fits one screen */
.st-sheet h2 { margin-bottom: 12px !important; }
.st-tabs { margin-bottom: 4px; flex: none; background: var(--track); }
.st-pane { display: none; }
.st-pane.on { display: block; }
.st-pane[data-pane="events"].on { display: flex; flex-direction: column; flex: 1; }
.st-sheet .set-h { margin: 16px 4px 8px; }
.st-card { background: var(--bg); border-radius: 16px; padding: 10px 12px; }
.st-row { display: flex; gap: 8px; }
.st-row > * { flex: 1; min-width: 0; }
.st-presets { margin-top: 12px; }
.st-pre, .st-city, .st-ico, .st-tile { background: var(--bg); border-radius: 16px; border: 2px solid transparent; text-align: left; }
.st-pre { padding: 10px 11px; }
.st-pre b, .st-city b, .st-ico b, .st-tile b { display: block; font: 500 calc(14.5px * var(--fs)) 'Google Sans'; color: var(--ink); }
.st-pre small, .st-city small, .st-ico small, .st-tile small { display: block; font: 400 calc(12px * var(--fs))/1.25 'Google Sans'; color: var(--mute); margin-top: 2px; }
.st-pre.on, .st-city.on, .st-ico.on { border-color: var(--blue); }
.st-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; touch-action: pan-x; }
.st-chip { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 19px; background: var(--bg); border: 1.5px solid transparent; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; white-space: nowrap; }
.st-chip.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.st-chip .avs { display: flex; }
.st-chip .avatar { width: 26px; height: 26px; border-radius: 13px; font-size: calc(12px * var(--fs)); margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.st-chip .avatar:first-child { margin-left: 0; }
.st-mems { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 12px 6px 10px; touch-action: pan-x; }
.st-mem { flex: 1 0 60px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.st-mem b { font: 500 calc(13px * var(--fs)) 'Google Sans'; margin-top: 5px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-mem small { font: 400 calc(11.5px * var(--fs)) 'Google Sans'; color: var(--mute); }
.st-av { position: relative; display: block; }
.st-av .avatar { width: 50px; height: 50px; border-radius: 25px; font-size: calc(20px * var(--fs)); }
.st-av .addav { background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; }
.st-av .addav .ic { width: 26px; height: 26px; }
.st-av i { position: absolute; right: -4px; bottom: -3px; width: 22px; height: 22px; border-radius: 11px; background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); display: grid; place-items: center; color: var(--ink-2); }
.st-av i .ic { width: 14px; height: 14px; }
.st-city { overflow: hidden; padding: 0 0 9px; }
.st-city b, .st-city small { padding: 0 11px; }
.st-city .tn { display: block; height: 52px; margin-bottom: 7px; position: relative; background: linear-gradient(135deg, #e7ece5 0 40%, #cfe3c8 40% 55%, #e7ece5 55%); }
.st-city .tn-brasilia { background: linear-gradient(60deg, #ece8de 0 45%, #d3e5f1 45% 60%, #ece8de 60%); }
.st-city .tn i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 8px; background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.st-sheet .walk-set { margin-top: 0; padding: 10px 12px 12px; }
.st-walkf { display: flex; align-items: center; gap: 10px; }
.st-loop { display: flex; align-items: center; gap: 8px; flex: 1; font: 400 calc(15px * var(--fs)) 'Google Sans'; cursor: pointer; }
.st-loop > .ic { color: var(--blue); width: 22px; height: 22px; }
.st-loop .sw { margin-left: auto; }
.st-re { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--blue-deep); color: var(--blue); font: 500 calc(14px * var(--fs)) 'Google Sans'; }
.st-re .ic { width: 18px; height: 18px; }
.st-kid { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 calc(14.5px * var(--fs)) 'Google Sans'; }
.st-kid > .avatar { width: 32px; height: 32px; border-radius: 16px; font-size: calc(14px * var(--fs)); }
.st-kids { margin-left: auto; display: flex; gap: 6px; }
.st-kids button { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--surface); color: var(--ink-2); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.st-kids button.on { background: var(--blue-deep); color: var(--blue); }
.st-stat { display: flex; flex-wrap: wrap; gap: 6px; }
.st-stat button { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px 0 8px; border-radius: 17px; background: var(--bg); border: 1.5px solid transparent; font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.st-stat button .ic { width: 17px; height: 17px; color: #f0303c; }
.st-stat button.on { border-color: #f0303c; background: rgba(240, 48, 60, .1); }
.st-stat button.ok.on { border-color: #06a747; background: rgba(6, 167, 71, .1); color: #06a747; }
.st-stat .okc { width: 17px; text-align: center; font-weight: 700; color: #06a747; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-tile { padding: 10px 9px; min-height: 88px; }
.st-tile .ti { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px; }
.st-tile .ti .ic { width: 20px; height: 20px; }
.st-tile .ti.red { background: rgba(240, 48, 60, .12); color: #f0303c; }
.st-tile .ti.green { background: rgba(6, 167, 71, .12); color: #06a747; }
.st-tile .ti.blue { background: var(--blue-deep); color: var(--blue); }
.st-tile .ti.violet { background: rgba(155, 79, 193, .14); color: #9b4fc1; }
.st-tile .ti.orange { background: rgba(250, 117, 0, .13); color: #fa7500; }
.st-tile b { font-size: calc(13.5px * var(--fs)); }
.st-rec { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; position: sticky; bottom: 0; }
.st-rec button { flex: 1; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg); font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.st-rec button .ic { width: 20px; height: 20px; }
.st-rec .rec { background: #f0303c; color: #fff; }
.st-rec .rec i { width: 11px; height: 11px; border-radius: 6px; background: #fff; }
.st-themes { margin-top: 14px; }
.st-th { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.st-th .pv { width: 100%; height: 76px; border-radius: 14px; border: 2px solid var(--track); position: relative; overflow: hidden; background: #fff; }
.st-th.on .pv { border-color: var(--blue); }
.st-th .pv::before, .st-th .pv::after { content: ''; position: absolute; left: 10px; height: 8px; border-radius: 4px; background: #e4e7ec; }
.st-th .pv::before { right: 10px; top: 12px; }
.st-th .pv::after { right: 30px; top: 28px; }
.st-th.dark .pv { background: #1b1d22; }
.st-th.dark .pv::before, .st-th.dark .pv::after { background: #3a3e46; }
.st-th.system .pv { background: linear-gradient(90deg, #fff 50%, #1b1d22 50%); }
.st-kv { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 6px 6px 12px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.st-kv > span { width: 54px; flex: none; }
.st-kv .seg { flex: 1; }
.st-fs button { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.st-fs em { font-style: normal; font-weight: 700; }
.st-ico { display: flex; align-items: center; gap: 10px; padding: 8px; }
.st-ico img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.st-adv { display: flex; align-items: center; justify-content: space-between; padding: 12px; cursor: pointer; }
.st-adv b { display: block; font: 500 calc(14.5px * var(--fs)) 'Google Sans'; }
.st-adv small { display: block; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 2px; }
.st-adv .ic { color: var(--mute); }
.st-circ { padding: 0; overflow: hidden; }
.st-dd, .st-ddl button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: 500 calc(14.5px * var(--fs)) 'Google Sans'; text-align: left; }
.st-dd > .ic { color: var(--mute); transition: transform .2s; }
.st-circ.open .st-dd > .ic { transform: rotate(180deg); }
.st-ddl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.3, .7, .3, 1); }
.st-ddl > div { overflow: hidden; min-height: 0; }
.st-circ.open .st-ddl { grid-template-rows: 1fr; }
.st-circ.open .st-ddl > div { border-top: 1px solid var(--track); }
.st-dd .grow, .st-ddl .grow { min-width: 0; }
.st-dd .grow b, .st-ddl .grow b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dd .grow small, .st-ddl .grow small { display: block; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 1px; }
.st-ddl button.on .grow small { color: var(--blue); opacity: .75; }
.st-cities .tn { flex: none; width: 34px; height: 34px; border-radius: 10px; position: relative; overflow: hidden; background: linear-gradient(135deg, #e7ece5 0 40%, #cfe3c8 40% 55%, #e7ece5 55%); }
.st-cities .tn i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 6px; background: var(--blue); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.st-cities .tn-brasilia { background: linear-gradient(60deg, #ece8de 0 45%, #d3e5f1 45% 60%, #ece8de 60%); }
.st-cities .tn-barcelona { background: repeating-linear-gradient(45deg, #efe9df 0 7px, #e2dacb 7px 9px), #efe9df; }
.st-cities .tn-rome { background: radial-gradient(circle at 30% 70%, #d9e6c9 0 30%, transparent 31%), linear-gradient(100deg, #efe8dc 0 55%, #c9dcea 55% 66%, #efe8dc 66%); }
.st-cities .tn-buenosaires { background: linear-gradient(90deg, transparent 0 46%, #e0d8c8 46% 54%, transparent 54%), linear-gradient(0deg, #ece6da 0 46%, #e0d8c8 46% 54%, #ece6da 54%); }
.st-cities .tn-bogota { background: linear-gradient(150deg, #cfe3c8 0 30%, #ebe6dc 30% 70%, #d6e6cf 70%); }
.st-ddl button.on { color: var(--blue); }
.st-ddl .ic { color: var(--blue); width: 22px; height: 22px; }
.st-circ .avs { display: flex; flex: none; }
.st-circ .avatar { width: 28px; height: 28px; border-radius: 14px; font-size: calc(13px * var(--fs)); margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.st-circ .avatar:first-child { margin-left: 0; }
.st-walkon { margin-top: 8px; padding: 12px; }
.st-loop span small { display: block; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 1px; }
.st-fs button { display: flex; align-items: center; justify-content: center; }
.st-fs .fsl { display: inline-flex; align-items: baseline; gap: 4px; }
/* route points with a place: a label above the point; stops on the live card's bar */
.wp.tag { border-color: var(--orange, #fa7500); position: relative; }
.wp.start.tag { border-color: var(--green); }
.wp-tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 5px; border-radius: 9px; background: var(--btn); box-shadow: var(--shadow); font: 500 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--ink); white-space: nowrap; pointer-events: none; }
.wp-tag .ic { width: 18px; height: 18px; color: var(--blue); }
.lc-stop { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); z-index: 1; }
.stop-ch button .ic { color: var(--blue); }
.stop-ch button.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
/* kid feed as in the app: walks with a map picture, places between them, days */
.kfeed { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.hcard { background: var(--surface); border-radius: 18px; overflow: hidden; }
.hplace { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hcard b { display: block; font: 700 calc(16px * var(--fs))/1.25 'Google Sans'; }
.hcard small { display: block; font: 400 calc(13.5px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 2px; }
.hc-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--chip); display: grid; place-items: center; flex: none; color: var(--mute); }
.hplace .hc-ic { background: #8e9196; color: #fff; }
.hc-ic .ic { width: 22px; height: 22px; }
.hc-ic.walk { color: var(--blue); }
.hc-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; }
.hc-chev { width: 30px; height: 30px; border-radius: 10px; background: var(--chip); display: grid; place-items: center; }
.hc-chev .ic { width: 18px; height: 18px; }
.htrip { cursor: pointer; }
.hc-map { position: relative; margin: 0 4px; height: 172px; border-radius: 14px; overflow: hidden; background: var(--chip); }
.hc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-pin { position: absolute; transform: translate(-50%, calc(-100% + 4px)); display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.hc-pin b { font: 700 calc(11px * var(--fs)) 'Google Sans'; color: #1c1c1e; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; letter-spacing: .3px; }
.hc-pin .ic { width: 24px; height: 24px; padding: 3px; border-radius: 8px; background: #8e9196; color: #fff; box-shadow: 0 0 0 2px #fff; }
.hc-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center; color: #fff; z-index: 1; }
.hc-play .ic, .hc-play svg { width: 20px; height: 20px; }
.hc-stats { display: flex; padding: 10px 0 12px; }
.hc-stats > div { flex: 1; text-align: center; border-left: 1px solid var(--track); }
.hc-stats > div:first-child { border-left: 0; }
.hc-stats b { font-size: calc(17px * var(--fs)); }
.h.hday { margin: 14px 2px 2px; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--ink); text-transform: none; letter-spacing: 0; }
.kfeed .endfeed { margin-top: 10px; }
.hcard .grow { flex: 1; min-width: 0; }
.st-dd:focus, .st-ddl button:focus { outline: none; }
.st-circ .avs { width: 96px; }
.st-langs { padding: 0; overflow: hidden; }
.st-langs button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px; font: 400 calc(15px * var(--fs)) 'Google Sans'; border-top: 1px solid var(--track); }
.st-langs button:first-child { border-top: 0; }
.st-langs button.on { color: var(--blue); font-weight: 500; }
.st-langs .ic { width: 22px; height: 22px; color: var(--blue); }
/* your own pushes */
.st-push { padding: 0; overflow: hidden; }
.st-prow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--track); }
.st-prow .grow { flex: 1; min-width: 0; cursor: pointer; }
.st-prow b { display: block; font: 500 calc(14px * var(--fs)) 'Google Sans'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prow small { display: block; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.st-prow .pi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--blue-deep); color: var(--blue); }
.st-prow .pi.green { background: rgba(6, 167, 71, .12); color: #06a747; }
.st-prow .pi.red { background: rgba(240, 48, 60, .12); color: #f0303c; }
.st-prow .pi .ic { width: 18px; height: 18px; }
.st-padd { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; color: var(--blue); font: 500 calc(14.5px * var(--fs)) 'Google Sans'; }
.st-padd .ic { width: 20px; height: 20px; }
#ps-who .avatar { width: 24px; height: 24px; border-radius: 12px; font-size: calc(11px * var(--fs)); }
.ps-b { display: flex; gap: 8px; margin-top: 4px; }
.ps-b .btn { flex: 1; }
#ps-sec { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; touch-action: pan-x; }
#ps-sec::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-mid)); }
#ps-sec::-moz-range-track { height: 6px; border-radius: 3px; background: var(--blue); }
#ps-sec::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#ps-sec::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#ps-sec:disabled { opacity: .35; }
/* route details (route_details_*): Start / Finish flags, stops and max speed on the map, the trip's timeline */
.hc-ic.ride { color: var(--orange, #fa7500); }
.rd-bad { color: var(--red); font-weight: 500; }
.rd-drive { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(6, 167, 71, .12); color: var(--green); text-align: left; }
.rd-drive.bad { background: rgba(255, 59, 48, .12); color: var(--red); }
.rd-drive b { font: 500 calc(15px * var(--fs)) 'Google Sans'; flex: 1; }
.rd-drive .ic { width: 22px; height: 22px; }
.rd-speed { height: 24px; padding: 0 8px; border-radius: 12px; background: var(--blue); color: #fff; font: 700 calc(12px * var(--fs)) 'Google Sans'; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .2); }
.rd-speed.bad { background: var(--red); }
/* route details (2.13.8): the map with a player over it, the sheet under it */
.page.over-map .content.rd-c { top: 0; }
.rd-gap { position: relative; height: calc(var(--H) - 372px); pointer-events: none; }
.rd-player { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 52px; padding: 0 18px 0 8px; display: flex; align-items: center; gap: 14px; border-radius: 26px; background: var(--btn); box-shadow: var(--shadow); pointer-events: auto; }
.rd-player button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.rd-player button .ic { width: 22px; height: 22px; }
.rd-track { --u: 0; position: relative; flex: 1; height: 36px; touch-action: none; cursor: pointer; }
.rd-track i { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) calc(var(--u) * 100%), var(--track) 0); }
.rd-track b { position: absolute; top: 50%; left: calc(var(--u) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background-color: var(--btn); box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  background-image: linear-gradient(90deg, transparent 10.5px, var(--track) 10.5px 12px, transparent 12px 14.25px, var(--track) 14.25px 15.75px, transparent 15.75px 18px, var(--track) 18px 19.5px, transparent 19.5px); background-size: 100% 12px; background-position: center; background-repeat: no-repeat; }
.rd-weak { position: absolute; left: 16px; right: 16px; bottom: 14px; padding: 13px 16px; border-radius: 22px; background: var(--btn); box-shadow: var(--shadow); text-align: center; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink); pointer-events: auto; }
.page.over-map .content > .list-pad.rd-sh { position: relative; padding-top: 22px; background: var(--surface); }
.rd-grip { position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--track); }
.rd-hd { display: flex; align-items: flex-start; gap: 12px; }
.rd-hd > .grow { flex: 1; min-width: 0; }
.rd-hd h2 { margin: 0; font: 700 calc(24px * var(--fs)) 'Google Sans'; }
.rd-hd small { display: block; margin-top: 6px; font: 400 calc(15px * var(--fs)) 'Google Sans'; color: var(--mute); }
.rd-sep { margin: 0 .32em; color: var(--mute); font-weight: 400; }
.rd-hd .round { flex: none; width: 46px; height: 46px; border-radius: 16px; box-shadow: none; background: var(--bg); }
.rd-vmax { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; min-width: 184px; padding: 10px 18px 10px 14px; border-radius: 14px; border: 1.5px solid rgba(6, 167, 71, .3);
  background: linear-gradient(100deg, rgba(6, 167, 71, .16), rgba(6, 167, 71, 0) 70%), var(--bg); }
.rd-vmax b { display: flex; flex-direction: column; align-items: center; font: 700 calc(21px * var(--fs)) 'Google Sans'; line-height: 1; color: var(--green); }
.rd-vmax b small { margin-top: 3px; font: 500 calc(9px * var(--fs)) 'Google Sans'; letter-spacing: .3px; color: var(--ink); text-transform: uppercase; }
.rd-vmax > span { font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.rd-vmax.bad { border-color: rgba(255, 59, 48, .3); background: linear-gradient(100deg, rgba(255, 59, 48, .14), rgba(255, 59, 48, 0) 70%), var(--bg); }
.rd-vmax.bad b { color: var(--red); }
.rd-tl { margin-top: 18px; }
.rd-p { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.rd-p b { flex: 1; font: 700 calc(17px * var(--fs)) 'Google Sans'; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-p time { font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); white-space: nowrap; }
.rd-pi { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #8e9196; color: #fff; }
.rd-pi .ic { width: 17px; height: 17px; }
.rd-mv { position: relative; display: flex; align-items: center; gap: 16px; min-height: 92px; }
.rd-ar { position: absolute; left: 12px; top: 2px; bottom: 6px; width: 2px; background: var(--blue); }
.rd-ar::after { content: ''; position: absolute; left: -3.5px; bottom: -1px; width: 7px; height: 7px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rd-mi { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--bg); }
.rd-mi .ic { width: 17px; height: 17px; }
.rd-mv b { display: block; font: 400 calc(16px * var(--fs)) 'Google Sans'; }
.rd-mv small { display: block; margin-top: 4px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); }
.rd-mv.ride .rd-ar, .rd-mv.ride .rd-mi { background: var(--orange); }
.rd-mv.ride .rd-ar::after { border-color: var(--orange); }
.rd-wk { height: 22px; width: 26px; display: grid; place-items: center; color: var(--mute); }
.rd-wk .ic { width: 16px; height: 16px; }
.rd-rate { margin-top: 22px; padding: 20px 16px 22px; border-radius: 20px; background: var(--bg); text-align: center; }
.rd-rate p { margin: 0 0 14px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); }
.rd-stars { display: flex; justify-content: center; gap: 12px; }
.rd-stars button { width: 44px; height: 44px; display: grid; place-items: center; color: #c9d0dc; transition: transform .15s, color .15s; }
.rd-stars button .ic { width: 40px; height: 40px; }
.rd-stars button.on { color: #ffb800; }
.rd-stars button:active { transform: scale(.88); }
/* on the map: the kid with "Walk • 14:57" over it, places with "address • 15:02" */
.rd-av { position: relative; }
.rd-lb { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 3px 7px; border-radius: 7px; background: #fff; color: #1c1c1e; font: 400 calc(11.5px * var(--fs)) 'Google Sans'; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); pointer-events: none; }
.rd-lb .rd-sep { color: #8e9196; }
.rd-mpin { position: relative; display: grid; place-items: center; }
.rd-mpin .rd-pi { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .25); }
/* the kid feed: a Route card has a note instead of the numbers */
.hc-ic.route { color: var(--mute); }
.hc-weak { padding: 12px 14px 14px; font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); }
/* Share the route (2.13.8): a square card with the logo and the title over a white fade, a row of apps under it */
.sr-h { margin: 6px 0 0; text-align: center; font: 500 calc(16px * var(--fs)) 'Google Sans'; }
.sr-card { position: relative; width: 82%; margin: 0 auto; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--chip); box-shadow: var(--shadow); }
.sr-pic { position: absolute; inset: 0; display: grid; place-items: center; }
.sr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-pic.gen img, .sr-pic.gen .hc-pin { filter: grayscale(1) brightness(1.08); opacity: .55; }
.sr-pic.gen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -100% 0 / 200% 100%; animation: srGen 1.2s linear infinite; }
@keyframes srGen { to { background-position: 100% 0; } }
.sr-pic .hc-pin { transform: translate(-50%, -50%); }
.sr-av { position: absolute; transform: translate(-50%, -50%); }
.sr-av .hist-dot .avatar { width: 30px; height: 30px; }
.sr-logo { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 2px #fff; }
.sr-logo .ic { width: 18px; height: 18px; }
.sr-ft { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(255, 255, 255, .92) 45%); color: #1c1c1e; }
.sr-ft b { display: block; font: 700 calc(21px * var(--fs)) 'Google Sans'; }
.sr-ft b .rd-sep { color: #8e9196; }
.sr-ft small { display: block; margin-top: 4px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: #6b6f76; }
.sr-to { display: flex; gap: 6px; margin: 22px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.sr-to button { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--ink); }
.sr-to button span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.sr-to button svg { width: 26px; height: 26px; }
/* kid feed: the day sticks at the top of the full sheet, a button scrolls back up */
.kday { position: sticky; top: 0; height: 0; z-index: 3; }
.kday > div { position: absolute; left: 0; right: 0; top: 4px; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 4px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.kday.on > div { opacity: 1; transform: none; pointer-events: auto; }
.kday b { font: 500 calc(15px * var(--fs)) 'Google Sans'; padding: 6px 18px; border-radius: 10px; background: var(--blue-deep); color: var(--blue); }
.kday button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); }
.kday button:disabled { opacity: .3; }
.kday .ic { width: 20px; height: 20px; }
.k-up { position: absolute; right: 16px; bottom: calc(76px + var(--sbb, 0px)); z-index: 9; width: 48px; height: 48px; border-radius: 16px; background: rgba(120, 124, 130, .75); color: #fff; display: grid; place-items: center;
  opacity: 0; scale: .8; pointer-events: none; transition: opacity .2s, scale .2s; }
.k-up.on { opacity: 1; scale: 1; pointer-events: auto; }
.k-up .ic { width: 24px; height: 24px; }
/* a call the kid doesn't answer, Ask to call back */
.call-hd { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 18px; }
.call-hd .avatar.big { width: 84px; height: 84px; border-radius: 28px; font-size: calc(38px * var(--fs)); animation: ring 1.2s ease-in-out infinite; }
.bs.missed .call-hd .avatar.big { animation: none; }
.call-hd h2 { margin: 10px 0 0; }
.call-hd p { margin: 0; color: var(--mute); }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 167, 71, .35); } 50% { box-shadow: 0 0 0 14px rgba(6, 167, 71, 0); } }
/* a place: visits notifications and the visit history by day */
.ph-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ph-hd .grow b { display: block; font: 700 calc(16px * var(--fs)) 'Google Sans'; }
.ph-hd .grow small, .ph-ntf small, .pv-row small { display: block; font: 400 calc(13px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 2px; }
.ph-ntf { padding: 12px 14px; gap: 12px; }
.ph-ntf b { font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.ph-days { display: flex; gap: 6px; margin-top: 8px; }
.ph-days button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--surface); font: 500 calc(11px * var(--fs)) 'Google Sans'; color: var(--mute); border: 1.5px solid transparent; }
.ph-days button b { font: 700 calc(16px * var(--fs)) 'Google Sans'; color: var(--ink); }
.ph-days button.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.ph-days button.on b { color: var(--blue); }
.ph-days button:disabled { opacity: .35; }
.pv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--track); }
.pv-row:last-child { border-bottom: 0; }
.pv-row .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(16px * var(--fs)); }
.pv-row b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.pv-row .grow { flex: 1; min-width: 0; }
.pv-row .dim { font-size: calc(13px * var(--fs)); }
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--mute); text-align: center; font: 400 calc(14px * var(--fs)) 'Google Sans'; background: var(--surface); border-radius: 18px; }
.pv-empty .ic { width: 28px; height: 28px; }
/* app policy: always available / always blocked */
.as-pol { margin-top: 10px; padding: 2px 14px; }
.as-pol .opt-row { padding: 10px 0; gap: 12px; border-bottom: 1px solid var(--track); }
.as-pol .opt-row:last-child { border-bottom: 0; }
.as-pol b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.as-pol small { display: block; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); margin-top: 2px; }
.pol-note { margin: 10px 2px 0; }
#ap-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
#ap-filter button { flex: none; padding: 0 12px; }
/* Sound Around minutes */
.l-min { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font: 400 calc(14px * var(--fs)) 'Google Sans'; color: var(--mute); }
.l-min b { color: var(--ink); font-weight: 700; }
.l-min .ic { width: 18px; height: 18px; color: var(--orange); }
.l-min .link { width: auto; padding: 0; margin: 0; }
.mins { margin-top: 12px; }
.mins .chip.best { background: var(--orange); color: #fff; padding: 3px 8px; border-radius: 8px; font: 700 calc(11px * var(--fs)) 'Google Sans'; }
/* location sharing that is on */
.share-on { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--blue-deep); color: var(--blue); }
.share-on .ic { width: 22px; height: 22px; flex: none; }
.share-on b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: var(--ink); }
.share-on small { display: block; font: 400 calc(12.5px * var(--fs)) 'Google Sans'; color: var(--mute); }

/* phones in a room: the card in Prototype settings, the QR sheet, the role list and a kid's phone until its screen is made */
.st-room .avs { display: flex; margin-left: auto; }
.st-room .avs .avatar { width: 24px; height: 24px; font-size: 11px; margin-left: -6px; border: 2px solid var(--bg); }
.st-room .st-loop > .ic:last-child { color: var(--mute); width: 18px; height: 18px; }
.rm-sub { color: var(--mute); font: 400 calc(14px * var(--fs)) 'Google Sans'; margin: 4px 0 14px; }
.rm-roles { margin-bottom: 14px; }
.rm-qr { width: 216px; height: 216px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 8px; display: grid; place-items: center; color: #555; font-size: 13px; text-align: center; }
.rm-qr svg { width: 100%; height: 100%; display: block; }
.rm-link { display: flex; align-items: center; gap: 8px; margin: 12px auto 4px; max-width: 300px; background: var(--surface); border-radius: 12px; padding: 6px 6px 6px 12px; }
.rm-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.rm-link button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); }
.rm-peer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; text-align: left; }
.rm-peer + .rm-peer { border-top: 1px solid var(--track); }
.rm-peer b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.rm-peer small { display: block; color: var(--mute); font: 400 calc(12.5px * var(--fs)) 'Google Sans'; margin-top: 1px; }
.rm-peer > .ic { color: var(--mute); }
.rm-leave { display: block; width: 100%; height: 48px; margin: 14px 0 6px; border-radius: 14px; color: var(--red); font: 500 calc(15px * var(--fs)) 'Google Sans'; background: var(--surface); }
.kid-band { position: absolute; left: 12px; right: 70px; top: calc(var(--st, 32px) + 64px); z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .14); }
.kid-band .avatar { width: 34px; height: 34px; font-size: 15px; }
.kid-band b { display: block; font: 500 calc(14px * var(--fs)) 'Google Sans'; color: var(--ink); }
.kid-band small { display: block; font: 400 calc(12px * var(--fs)) 'Google Sans'; color: var(--mute); }
.kid-band button { height: 32px; padding: 0 12px; border-radius: 10px; background: var(--surface); color: var(--blue); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.rm-scan { border-top: 1px solid var(--track); padding-top: 10px; margin-top: 10px; }
.rm-cam { position: relative; width: 100%; aspect-ratio: 1; max-width: 300px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #000; }
.rm-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-cam i { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.rm-cam span { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; color: #fff; font: 500 calc(13px * var(--fs)) 'Google Sans'; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.rm-code { display: flex; gap: 8px; }
.rm-code input { flex: 1; min-width: 0; height: 48px; border-radius: 14px; background: var(--surface); color: var(--ink); padding: 0 14px; border: 0; font: 500 calc(17px * var(--fs)) 'Google Sans'; letter-spacing: .12em; text-transform: uppercase; }
.rm-code button { height: 48px; padding: 0 20px; border-radius: 14px; background: var(--blue); color: #fff; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.st-room { display: block; }
.st-room .st-loop { width: 100%; }

/* the kid's phone: a home screen as on an iPhone (iOS 26) or a Galaxy (One UI 7), a running app (a recording), the lock screen from the parents */
.kid-home { position: absolute; inset: 0; z-index: 55; overflow: hidden; color: #fff; transition: opacity .25s; --kt: var(--st, 32px); --kb: var(--sbb, 0px); font-family: 'Google Sans', Roboto, sans-serif; }
.kid-home.iphone { font-family: -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; }
.kid-home.bars { --kt: max(var(--st, 32px), 28px); --kb: 46px; }
.kid-home.away { opacity: 0; pointer-events: none; }
/* Prototype settings → Phone home screen */
.st-home { margin: 6px 0 14px; }
.st-home .st-loop > .ic:last-child { margin-left: auto; color: var(--mute); width: 18px; height: 18px; }
/* wallpapers in the spirit of iOS 26 and One UI 7 */
.kh-wall { position: absolute; inset: 0; overflow: hidden; }
.iphone .kh-wall { background: radial-gradient(55% 32% at 10% 30%, rgba(214, 250, 246, .95), transparent 70%), radial-gradient(70% 45% at -5% 62%, rgba(98, 226, 208, .95), transparent 72%),
  radial-gradient(60% 40% at 55% 8%, rgba(120, 200, 255, .55), transparent 70%), radial-gradient(90% 60% at 95% 55%, rgba(18, 54, 200, .95), transparent 70%),
  linear-gradient(170deg, #5fb6f0 0%, #2a64e0 38%, #0c2fa8 70%, #081f78 100%); }
.iphone .kh-wall::before { content: ''; position: absolute; left: -78%; top: 20%; width: 150%; height: 64%; border-radius: 50%; border: 64px solid rgba(140, 236, 222, .62); filter: blur(16px); transform: rotate(-26deg); }
.android .kh-wall { background: radial-gradient(70% 40% at 80% 12%, rgba(255, 255, 255, .28), transparent 70%), radial-gradient(80% 50% at 10% 85%, rgba(60, 190, 190, .55), transparent 70%),
  linear-gradient(180deg, #b7b3ec 0%, #a2a6e6 26%, #86ade0 52%, #5fb0c6 78%, #3e93a6 100%); }
.kh-page { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.iphone .kh-page { padding: calc(var(--kt) + 14px) 28px calc(var(--kb) * .4 + 10px); }
.android .kh-page { padding: calc(var(--kt) + 22px) 24px calc(var(--kb) + 14px); }
.kh-clk { display: none; }
.android .kh-clk { display: block; padding: 0 4px; }
.kh-clk b { display: block; font: 400 60px/1 'Google Sans'; letter-spacing: -1.5px; }
.kh-clk small { display: block; margin-top: 6px; font: 400 15px 'Google Sans'; }
/* the icons: as many rows as fit (kidDraw counts them), the kid's apps first */
.kh-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(4, var(--s)); justify-content: space-between; align-content: start; }
.iphone .kh-grid { --s: 62px; grid-auto-rows: 82px; row-gap: 18px; }
.android .kh-grid { --s: 58px; grid-auto-rows: 79px; row-gap: 22px; margin-top: 30px; }
.kh-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; }
.kh-ib { position: relative; display: block; width: var(--s); height: var(--s); }
.kh-app .atile { display: grid; place-items: center; overflow: hidden; transition: transform .15s, opacity .2s, filter .2s; }
.kh-app .atile.sys svg { display: block; }
.kh-app:active .atile { transform: scale(.9); }
.iphone .kh-app .atile { border-radius: 23.5% !important; }
.android .kh-app .atile { border-radius: 32% !important; }
.kh-lb { display: block; width: 84px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iphone .kh-lb { font: 500 12px/15px -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; text-shadow: 0 1px 3px rgba(0, 20, 80, .35); }
.android .kh-lb { font: 400 12.5px/16px 'Google Sans'; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.kh-lb svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }
/* the parents' rules: Screen Time on an iPhone (a faded icon, an hourglass before the name), Digital Wellbeing on Android (grey, a timer badge) */
.iphone .kh-app.lk .atile { opacity: .42; }
.android .kh-app.lk .atile { filter: grayscale(1) brightness(.92); opacity: .78; }
.kh-bdg { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #2b2d33; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.kh-bdg svg { width: 12px; height: 12px; }
.kh-n { position: absolute; top: -6px; right: -6px; z-index: 1; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font: normal 600 13px/22px 'Google Sans'; text-align: center; }
.kh-srch { display: none; }
.iphone .kh-srch { display: flex; align-self: center; align-items: center; gap: 5px; height: 32px; margin: 8px 0 12px; padding: 0 14px; border-radius: 16px; font-size: 13.5px; font-weight: 600;
  background: rgba(255, 255, 255, .2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.kh-srch svg { width: 13px; height: 13px; }
.kh-dots { display: none; }
.android .kh-dots { display: flex; justify-content: center; gap: 8px; margin: 8px 0 22px; }
.kh-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.kh-dots i:first-child { background: #fff; }
.kh-dock { display: flex; justify-content: space-between; align-items: center; flex: none; }
.iphone .kh-dock { --s: 62px; height: 94px; margin: 0 -16px; padding: 0 16px; border-radius: 40px; background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .4); }
.android .kh-dock { --s: 58px; }
/* Android in full screen: its status bar and three buttons, drawn; over Findmykids, the store and the chat they turn dark */
.kh-sb, .kh-nav, .kh-edbar, .kh-edtools { display: none; }
.bars .kh-sb { position: absolute; left: 0; right: 0; top: 0; height: var(--kt); z-index: 9; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 26px; font: 500 14px 'Google Sans'; pointer-events: none; }
.kh-sb > span { display: flex; align-items: center; gap: 7px; }
.kh-sb .ic { width: 15px; height: 15px; }
.kh-bat { min-width: 26px; height: 15px; padding: 0 4px; border-radius: 5px; border: 1.4px solid currentColor; font: normal 600 10px/12px 'Google Sans'; text-align: center; }
.bars .kh-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 9; display: flex; justify-content: space-around; align-items: center; padding: 0 40px; }
.kh-nav button { width: 64px; height: 40px; display: grid; place-items: center; color: inherit; }
.kh-nav svg { width: 22px; height: 22px; }
.kh-fa.on ~ .kh-sb, .kh-over.on.store ~ .kh-sb, .kh-over.on.chat ~ .kh-sb { color: var(--ink); }
.kh-fa.on ~ .kh-nav, .kh-over.on.store ~ .kh-nav, .kh-over.on.chat ~ .kh-nav { color: var(--ink); background: var(--bg); }
.kh-run.on ~ .kh-sb, .kh-run.on ~ .kh-nav { display: none; }
.bars .kh-fa, .bars .kh-over.on:not(.sos) { bottom: 46px; }
.kid-home .ks-hd, .kid-home .kc-hd { height: calc(var(--kt) + 57px); padding-top: var(--kt); }
/* the edit mode (a long press on the wallpaper): on an iPhone the icons wiggle with a minus, Reset, Change and Done on top;
   on Android the page shrinks, as in One UI, with Reset and Change role under it */
.iphone.edit .kh-edbar { position: absolute; left: 14px; right: 14px; top: calc(var(--kt) + 4px); z-index: 9; display: flex; align-items: center; gap: 6px; }
.kh-edbar .pill { height: 34px; padding: 0 13px; border-radius: 17px; display: flex; align-items: center; gap: 7px; color: #fff; font: 600 13.5px -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; white-space: nowrap;
  background: rgba(255, 255, 255, .22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.kh-edbar .avatar { width: 24px; height: 24px; margin-left: -8px; font-size: 11px; }
.kh-edbar .grow { flex: 1; }
.kh-edbar .done { background: #fff; color: #1856e8; }
.iphone.edit .kh-page { padding-top: calc(var(--kt) + 58px); }
.iphone.edit .kh-srch { display: none; }
.iphone.edit .kh-app .atile { animation: khJig .26s ease-in-out infinite alternate; }
.iphone.edit .kh-app:nth-child(2n) .atile { animation-delay: -.13s; }
@keyframes khJig { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.kh-minus { position: absolute; left: -7px; top: -7px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(110, 120, 140, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kh-minus::before { content: ''; width: 11px; height: 2.5px; border-radius: 2px; background: #fff; }
.android.edit .kh-page { transform: scale(.8); transform-origin: 50% 30%; border-radius: 34px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.android.edit .kh-edtools { position: absolute; left: 0; right: 0; bottom: calc(var(--kb) + 10px); z-index: 9; display: flex; justify-content: space-around; padding: 0 10px; }
.kh-edtools > * { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; color: #fff; font: 400 12px/1.2 'Google Sans'; text-align: center; }
.kh-edtools .ic, .kh-edtools .avatar { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.kh-edtools .avatar { padding: 0; font-size: 18px; }
/* the menu of an icon */
.kh-menu { position: absolute; z-index: 10; min-width: 230px; padding: 6px; }
.kh-menu.ios { border-radius: 22px; background: rgba(245, 245, 250, .84); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.kh-menu.and { border-radius: 24px; background: rgba(252, 252, 255, .98); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.kh-menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; color: #111; font: 500 16px -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; white-space: nowrap; }
.kh-menu.ios button { justify-content: space-between; }
.kh-menu.ios button + button { border-top: 1px solid rgba(0, 0, 0, .08); border-radius: 0; }
.kh-menu .red { color: #ff3b30; }
.kh-menu .ic { width: 20px; height: 20px; }
/* Findmykids on the kid's phone: SOS, Going home, Chat, Call Mom, the day's limits */
.kh-fa { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; background: var(--bg); color: var(--ink); font-family: 'Google Sans', sans-serif; }
.kh-fa.on { display: flex; }
.fa-body { flex: 1; overflow: auto; padding: 14px 16px calc(var(--sbb, 0px) + 20px); display: flex; flex-direction: column; scrollbar-width: none; }
.fa-st { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.fa-st > .ic { width: 24px; height: 24px; color: var(--blue); }
.fa-st b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.fa-st small { display: block; color: var(--mute); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.fa-sos { align-self: center; width: 150px; height: 150px; flex: none; border-radius: 50%; margin: 34px 0 6px; background: #f23f54; color: #fff; box-shadow: 0 0 0 14px rgba(242, 63, 84, .16), 0 0 0 30px rgba(242, 63, 84, .07); }
.fa-sos b { font: 700 calc(42px * var(--fs)) 'Google Sans'; letter-spacing: 1px; }
.fa-sos:active { transform: scale(.96); }
.fa-note { text-align: center; color: var(--mute); font: 400 calc(14px * var(--fs)) 'Google Sans'; margin: 30px 24px 18px; }
.fa-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fa-acts button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 18px; background: var(--surface); color: var(--ink); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.fa-acts .ic { width: 26px; height: 26px; color: var(--blue); }
.fa-acts .kh-n { top: 8px; right: 14px; }
.fa-h { margin: 24px 4px 8px; font: 600 calc(17px * var(--fs)) 'Google Sans'; }
.fa-lims { border-radius: 18px; background: var(--surface); padding: 2px 14px; }
.fa-lim { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.fa-lim + .fa-lim { border-top: 1px solid var(--line); }
.fa-lim .atile { flex: none; }
.fa-lim b { display: block; font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.fa-lim small { display: block; color: var(--mute); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.fa-lim button { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--blue); color: #fff; font: 500 calc(13px * var(--fs)) 'Google Sans'; flex: none; }
.fa-lim button:disabled { background: var(--surface-2); color: var(--mute); }
.fa-none { color: var(--mute); padding: 14px 0; font: 400 calc(14px * var(--fs)) 'Google Sans'; }
.fa-map { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; margin-top: 14px; height: 48px; border-radius: 14px; background: var(--surface); color: var(--blue); font: 500 calc(15px * var(--fs)) 'Google Sans'; }
.fa-map .ic { width: 20px; height: 20px; }
.kh-run { position: absolute; inset: 0; z-index: 5; background: #000; overflow: hidden; opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.kh-run.on { opacity: 1; transform: none; pointer-events: auto; }
.kh-run video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kh-run.land video { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.kh-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.kh-splash b { font: 500 calc(20px * var(--fs)) 'Google Sans'; }
.kh-splash small { opacity: .6; font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.kh-homebar { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: grid; place-items: center; z-index: 3; }
.kh-homebar i { width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.kh-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center;
  background: rgba(12, 16, 32, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; opacity: 0; pointer-events: none; transition: opacity .45s; }
.kh-lock.on { opacity: 1; pointer-events: auto; }
.kh-lock h3 { margin: 10px 0 0; font: 500 calc(22px * var(--fs)) 'Google Sans'; }
.kh-lock p { margin: 0 0 18px; opacity: .75; font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.kh-lock .kl-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.kh-lock .kl-ic .ic { width: 38px; height: 38px; }
.kh-lock button { width: 100%; max-width: 280px; height: 48px; border-radius: 14px; font: 500 calc(15px * var(--fs)) 'Google Sans'; color: #fff; }
.kh-lock .kl-ask { background: var(--blue); }
.kh-lock .kl-ask:disabled { background: rgba(255, 255, 255, .16); }
.kh-lock .kl-home { background: transparent; }
.ask-opts { display: grid; gap: 8px; }
.ask-opts .btn.ghost { background: var(--surface); color: var(--ink); }
/* the kid's phone, more: the pause or a schedule in a banner, the Findmykids widget, locked icons, the store, SOS and the chat */
.awake { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kh-lock .kl-call { background: #34c759; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kh-lock .kl-call .ic { width: 20px; height: 20px; }
.kh-over { position: absolute; inset: 0; z-index: 7; display: none; }
.kh-over.on { display: flex; flex-direction: column; }
.kh-over.on.chat { display: block; }
.kh-over.sos { align-items: center; justify-content: center; background: rgba(110, 8, 24, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; text-align: center; }
.ko-sos { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px; width: 100%; }
.ko-ring { width: 132px; height: 132px; border-radius: 50%; background: #f23f54; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(242, 63, 84, .3), 0 0 0 30px rgba(242, 63, 84, .15); }
.ko-ring b { font: 700 calc(44px * var(--fs)) 'Google Sans'; }
.ko-ring.on { animation: koPulse 1.4s ease-out infinite; }
.ko-ring.on b { font-size: calc(32px * var(--fs)); }
@keyframes koPulse { 0% { box-shadow: 0 0 0 0 rgba(242, 63, 84, .7), 0 0 0 0 rgba(242, 63, 84, .35); } 100% { box-shadow: 0 0 0 26px rgba(242, 63, 84, 0), 0 0 0 52px rgba(242, 63, 84, 0); } }
.ko-sos h3 { margin: 26px 0 0; font: 600 calc(26px * var(--fs)) 'Google Sans'; }
.ko-sos p { margin: 0 0 18px; opacity: .85; font: 400 calc(15px * var(--fs)) 'Google Sans'; }
.ko-sos button { width: 100%; max-width: 290px; height: 50px; border-radius: 15px; font: 500 calc(16px * var(--fs)) 'Google Sans'; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ko-sos button .ic { width: 20px; height: 20px; }
.ko-sos .ko-call { background: #34c759; }
.ko-sos .ko-x { background: rgba(255, 255, 255, .18); }
.ko-sos .ko-min { background: none; opacity: .8; }
.kh-over.store, .kh-over.chat { background: var(--bg); color: var(--ink); }
.ks-hd, .kc-hd { display: flex; align-items: center; gap: 10px; height: calc(var(--st, 32px) + 57px); padding: var(--st, 32px) 14px 0; border-bottom: 1px solid var(--line); }
.ks-hd b, .kc-hd b { font: 600 calc(19px * var(--fs)) 'Google Sans'; }
.ks-back { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: var(--surface-2); flex: none; }
.ks-list { flex: 1; overflow: auto; padding: 6px 16px; }
.ks-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ks-row b { display: block; font: 500 calc(16px * var(--fs)) 'Google Sans'; }
.ks-row small { display: block; color: var(--mute); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.ks-row button { min-width: 72px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); color: var(--blue); font: 600 calc(14px * var(--fs)) 'Google Sans'; display: grid; place-items: center; }
.kh-over.android .ks-row button { background: #0b57d0; color: #fff; }
.ks-ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: ksSpin .8s linear infinite; }
@keyframes ksSpin { to { transform: rotate(360deg); } }
.ks-none { color: var(--mute); text-align: center; padding: 40px 0; }
.kc-hd .avs { display: flex; }
.kc-hd .avs .avatar { width: 30px; height: 30px; font-size: 13px; margin-right: -8px; border: 2px solid var(--bg); }
.kc-hd .avs + b { margin-left: 10px; }
.kh-over.chat .composer .quick button { flex: none; }
.bub em { display: block; font: normal 500 calc(12px * var(--fs)) 'Google Sans'; color: var(--blue); margin-bottom: 2px; }
/* calls between the phones of a room */
.xcall { position: absolute; inset: 0; z-index: 94; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(var(--st, 32px) + 70px) 24px calc(var(--sbb, 0px) + 70px);
  background: linear-gradient(180deg, #2c3e50, #0f1620); color: #fff; opacity: 0; transition: opacity .3s; }
.xcall.on { opacity: 1; }
.xc-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.xc-top .avatar.big { width: 112px; height: 112px; font-size: 44px; border-radius: 50%; }
.xc-top b { font: 500 calc(30px * var(--fs)) 'Google Sans'; margin-top: 8px; }
.xc-top small { opacity: .75; font: 400 calc(16px * var(--fs)) 'Google Sans'; }
.xc-btns { display: flex; gap: 90px; }
.xc-btns button { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.xc-btns button:disabled { opacity: .5; }
.xc-btns .ic { width: 32px; height: 32px; }
.xc-yes { background: #34c759; animation: xcBob 1.2s ease-in-out infinite; }
.xc-no, .xc-end { background: #ff3b30; }
.xc-no .ic, .xc-end .ic { transform: rotate(135deg); }
@keyframes xcBob { 50% { transform: translateY(-6px); } }
/* parental control: what the kid's phone is doing now; a schedule in force; roles taken in a room */
.pc-nowbox:empty { display: none; }
.pc-nowbox { padding: 10px 16px 0; }
.pc-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pc-now small { display: block; color: var(--mute); font: 400 calc(12.5px * var(--fs)) 'Google Sans'; }
.pc-now b { display: block; font: 500 calc(16px * var(--fs)) 'Google Sans'; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #34c759; flex: none; animation: liveDot 1.6s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .6); } 100% { box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); } }
.place-row small b.now { color: #06a747; font-weight: 600; }
.rm-roles button.taken::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #34c759; vertical-align: middle; }
.rm-note { margin: -4px 0 12px; color: var(--mute); font: 400 calc(12.5px * var(--fs)) 'Google Sans'; text-align: center; }
.rm-note:empty { display: none; }
.rm-peer.taken small { color: #06a747; }

/* the kid's block screens as in the app: white, Pingo with a lock, buttons at the bottom; the pause is a card with a countdown */
.kh-lock.full { justify-content: space-between; padding: 0; gap: 0; background: #fff; color: #1c1c1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kh-lock.full .kl-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px 0; }
.kh-lock .kl-pingo { width: 150px; height: 207px; object-fit: contain; }
.kh-lock.full h3 { margin: 22px 0 0; font: 700 calc(22px * var(--fs))/1.25 'Google Sans'; color: #1c1c1e; }
.kh-lock.full p { margin: 10px 0 0; opacity: 1; font: 400 calc(15px * var(--fs))/1.35 'Google Sans'; color: #6b6f76; }
.kh-lock.full .kl-btns { width: 100%; display: grid; gap: 8px; padding: 0 20px 46px; justify-items: center; }
.kh-lock.full button { max-width: none; height: 52px; border-radius: 16px; }
.kh-lock.full .kl-ask, .kh-lock.full .kl-chat { background: var(--blue); color: #fff; }
.kh-lock.full .kl-ask:disabled { background: #eef0f3; color: #8e9196; }
.kh-lock.full .kl-home { background: #f2f3f5; color: #1c1c1e; }
.kh-lock.pause { justify-content: flex-end; padding: 0 10px 40px; background: rgba(12, 16, 32, .55); }
.kh-lock .kl-card { position: relative; width: 100%; padding: 24px 0 24px; border-radius: 28px; background: #fff; color: #1c1c1e; text-align: left; overflow: hidden; }
.kh-lock .kl-cd { padding: 0 140px 0 20px; min-height: 120px; }
.kh-lock.pause h3 { margin: 0; font: 500 calc(17px * var(--fs))/1.3 'Google Sans'; color: #1c1c1e; }
.kh-lock .kl-timer { display: block; margin-top: 10px; font: 700 calc(34px * var(--fs)) 'Google Sans'; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.kh-lock.pause .kl-pingo { position: absolute; right: 4px; top: 6px; width: 123px; height: 170px; transform: scale(1.1); transform-origin: 50% 20%; }
.kh-lock.pause .kl-ask { display: block; width: calc(100% - 40px); max-width: none; margin: 12px 20px 0; height: 52px; border-radius: 16px; position: relative; }
.kh-lock.pause .kl-ask:disabled { background: #eef0f3; color: #8e9196; }
.kh-run:has(.kh-lock.full.on) .kh-homebar i { background: rgba(0, 0, 0, .3); }
/* iPhone: Apple's Screen Time shield, dressed by the app (ShieldConfiguration): a light blurred material over the app,
   the app's icon, the title and subtitle in the middle, a filled button and a plain one at the bottom */
.kh-lock.shield { justify-content: space-between; padding: 0; gap: 0; background: rgba(242, 242, 247, .78); backdrop-filter: blur(34px) saturate(1.6); -webkit-backdrop-filter: blur(34px) saturate(1.6); color: #000; }
.kh-lock.shield .ks-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 34px 0; }
.kh-lock.shield .ks-ic { width: 64px; height: 64px; border-radius: 15px; }
.kh-lock.shield h3 { margin: 20px 0 0; font: 600 calc(22px * var(--fs))/1.25 -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; color: #000; }
.kh-lock.shield p { margin: 8px 0 0; opacity: 1; font: 400 calc(16px * var(--fs))/1.35 -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; color: rgba(60, 60, 67, .6); }
.kh-lock.shield .ks-btns { width: 100%; display: grid; gap: 4px; padding: 0 24px 46px; justify-items: center; }
.kh-lock.shield button { max-width: none; height: 50px; border-radius: 14px; font: 600 calc(17px * var(--fs)) -apple-system, BlinkMacSystemFont, 'Google Sans', sans-serif; }
.kh-lock.shield .kl-ask, .kh-lock.shield .kl-chat { background: #007aff; color: #fff; }
.kh-lock.shield .kl-ask:disabled { background: rgba(120, 120, 128, .16); color: rgba(60, 60, 67, .6); }
.kh-lock.shield .kl-home { background: transparent; color: #007aff; font-weight: 400; }
.kh-run:has(.kh-lock.shield.on) .kh-homebar i { background: rgba(0, 0, 0, .3); }


/* ------------------------------------------------------------------ Guard (gardy copy only: js/src/10b-guard.js) */
#b-guard { left: 16px; height: 56px; padding: 0 22px 0 16px; border-radius: 20px; background: linear-gradient(135deg, #1a8fff, #0066e0); color: #fff; display: flex; align-items: center; gap: 9px;
  font: 700 calc(18px * var(--fs)) 'Google Sans'; box-shadow: 0 6px 18px rgba(0, 102, 224, .38); transition: opacity .2s; }
#b-guard .ic { width: 26px; height: 26px; }
#b-guard.live { background: linear-gradient(135deg, #1f2d42, #0f1826); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#b-guard.live::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2ee07a; animation: gPulse 1.4s ease-out infinite; }
#b-guard:active, #b-crews:active { transform: scale(.96); }
#b-crews { height: 40px; padding: 0 13px 0 11px; border-radius: 14px; background: var(--btn); color: #06a747; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 700 calc(13.6px * var(--fs)) 'Google Sans'; box-shadow: var(--shadow); transition: opacity .2s; }
.g-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #06c755; flex: none; animation: gPulse 1.6s ease-out infinite; }
@keyframes gPulse { 0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, .55); } 100% { box-shadow: 0 0 0 9px rgba(6, 199, 85, 0); } }
#stage.guard-on #sheet, #stage.guard-on #mapbtns { opacity: 0; pointer-events: none; }
#stage.guard-on #mapbtns * { pointer-events: none !important; }
.g-art { display: block; width: 100%; height: 100%; }
.g-page { padding: 8px 16px 30px; }
.g-hello { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.g-hello b { display: block; font: 700 calc(20px * var(--fs))/1.2 'Google Sans'; }
.g-hello small { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: #06a747; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.g-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 6px; scrollbar-width: none; }
.g-cards::-webkit-scrollbar { display: none; }
.g-kind { flex: 0 0 calc(100% - 44px); scroll-snap-align: center; background: var(--surface); border-radius: 24px; padding: 12px 12px 14px; display: flex; flex-direction: column; }
.g-kart { position: relative; height: 150px; border-radius: 18px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); display: grid; place-items: center; margin-bottom: 12px; }
.g-kart svg { width: 88%; height: 88%; }
.g-eta { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 10px; background: var(--c); color: #fff; font: 700 calc(13px * var(--fs)) 'Google Sans'; }
.g-kind h3 { display: flex; align-items: center; gap: 9px; margin: 2px 4px 10px; font: 700 calc(20px * var(--fs)) 'Google Sans'; }
.g-kic { width: 32px; height: 32px; border-radius: 11px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.g-kic .ic { width: 20px; height: 20px; }
.g-fact { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; font: 400 calc(14.5px * var(--fs)) 'Google Sans'; color: var(--ink-2); }
.g-fact .ic { width: 20px; height: 20px; color: var(--c); flex: none; }
.g-kind .btn { margin-top: auto; background: var(--c); }
.g-kind .g-fact:last-of-type { margin-bottom: 16px; }
.g-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 16px; }
.g-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--grip); transition: width .2s, background .2s; }
.g-dots i.on { width: 20px; background: var(--blue); }
.g-fine { text-align: center; color: var(--mute); font: 400 calc(12.5px * var(--fs))/1.35 'Google Sans'; margin: 14px 20px 0; }
.g-sub { margin: 4px 2px 12px; color: var(--ink-2); font: 500 calc(14.5px * var(--fs)) 'Google Sans'; }
.g-guard { padding: 14px; margin-bottom: 12px; }
.g-top { display: flex; gap: 14px; align-items: center; }
.g-ph { position: relative; width: 92px; height: 92px; border-radius: 24px; overflow: hidden; flex: none; padding: 0; }
.g-zoom { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 9px; background: rgba(15, 24, 38, .78); color: #fff; display: grid; place-items: center; }
.g-zoom .ic { width: 16px; height: 16px; }
.g-nm { display: block; font: 700 calc(16.5px * var(--fs))/1.25 'Google Sans'; }
.g-rate { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 500 calc(14px * var(--fs)) 'Google Sans'; }
.g-rate .ic { width: 18px; height: 18px; color: #ffb800; }
.g-rate span { color: var(--mute); margin-left: 4px; }
.g-dist { margin-top: 4px; color: #06a747; font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.g-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.g-badge { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 7px; border-radius: 10px; background: var(--blue-deep); color: var(--blue); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.g-badge .ic { width: 16px; height: 16px; }
.g-eq svg { width: 100%; height: 100%; }
.g-gear { padding: 26px 16px 18px; }
.g-gph { width: 150px; height: 175px; border-radius: 28px; overflow: hidden; margin: 0 auto 12px; }
.g-gear h2 { text-align: center; }
.g-eqs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.g-eqi { background: var(--surface); border-radius: 18px; padding: 12px; }
.g-eqi .ic { width: 34px; height: 34px; padding: 6px; border-radius: 11px; background: var(--blue-deep); color: var(--blue); display: block; margin-bottom: 8px; box-sizing: border-box; }
.g-eqi b { display: block; font: 700 calc(14.5px * var(--fs)) 'Google Sans'; }
.g-eqi small { display: block; margin-top: 3px; color: var(--ink-2); font: 400 calc(12.5px * var(--fs))/1.3 'Google Sans'; }
.g-kid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 18px; }
.g-kid .avatar.big { width: 92px; height: 92px; border-radius: 30px; font-size: calc(42px * var(--fs)); }
.g-kid b { font: 700 calc(22px * var(--fs)) 'Google Sans'; margin-top: 6px; }
.g-kid small { color: var(--mute); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.g-outfit { display: flex; gap: 14px; padding: 12px; margin-bottom: 10px; align-items: center; }
.g-jk { width: 104px; height: 122px; border-radius: 16px; overflow: hidden; flex: none; }
.g-outfit b { display: block; font: 700 calc(16px * var(--fs)) 'Google Sans'; }
.g-outfit small { display: block; color: var(--mute); margin: 3px 0 12px; font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.g-snap { height: 40px; border-radius: 13px; font-size: calc(14px * var(--fs)); }
.g-snap .ic { width: 20px; height: 20px; }
.g-kidp .card.list { margin-bottom: 18px; }
.g-word { padding: 14px 16px 6px; margin-bottom: 14px; }
.g-wv { display: flex; align-items: center; justify-content: space-between; }
.g-wv b { font: 700 calc(26px * var(--fs)) 'Google Sans'; letter-spacing: .5px; transition: filter .2s; }
.g-wv b.hid { filter: blur(9px); }
.g-eye { width: 40px; height: 40px; border-radius: 13px; background: var(--surface-2); display: grid; place-items: center; }
.g-word small { display: block; margin-top: 6px; color: var(--ink-2); font: 400 calc(13.5px * var(--fs))/1.35 'Google Sans'; }
.g-word .link { padding: 12px 0 8px; text-align: left; }
.g-sel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1.5px dashed var(--line); }
.g-sel svg { width: 48px; height: 48px; border-radius: 15px; flex: none; }
.g-sel b { display: block; font: 700 calc(15px * var(--fs)) 'Google Sans'; }
.g-sel small { color: var(--mute); font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.g-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(var(--sbb, 0px) + 16px); background: linear-gradient(transparent, var(--bg) 30%); }
/* 12. live: the crew drives to the kid */
.g-live { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; transition: opacity .3s; }
.g-live.on { opacity: 1; }
.g-live.on > * { pointer-events: auto; }
.g-ltop { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 8px); display: flex; align-items: center; gap: 10px; }
.g-lst { height: 40px; padding: 0 16px; border-radius: 14px; background: var(--btn); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; font: 700 calc(15px * var(--fs)) 'Google Sans'; }
.g-lp { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0; padding: 18px 16px calc(var(--sbb, 0px) + 10px); box-shadow: 0 -6px 24px rgba(0, 0, 0, .14); }
.g-lrow { display: flex; justify-content: space-between; align-items: flex-end; }
.g-lrow small { display: block; color: var(--mute); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.g-lrow b { display: block; font: 700 calc(38px * var(--fs))/1.05 'Google Sans'; font-variant-numeric: tabular-nums; }
.g-live.done .g-lrow b { color: #06a747; }
.g-lto { display: flex; align-items: center; gap: 8px; max-width: 55%; color: var(--ink-2); font: 500 calc(13px * var(--fs)) 'Google Sans'; }
.g-lto .avatar { width: 34px; height: 34px; border-radius: 12px; font-size: calc(17px * var(--fs)); }
.g-lto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 12px 0 14px; overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0085ff, #06c755); border-radius: 3px; }
.g-lg { position: relative; display: flex; align-items: center; gap: 12px; }
.g-lg > svg { width: 58px; height: 58px; border-radius: 19px; flex: none; }
.g-lg2 { position: absolute; left: 38px; top: 32px; width: 32px; height: 32px; border-radius: 11px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--bg); }
.g-lg .grow { padding-left: 10px; }
.g-lg b { display: block; font: 700 calc(17px * var(--fs)) 'Google Sans'; }
.g-lg small { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font: 400 calc(13px * var(--fs)) 'Google Sans'; margin-top: 3px; }
.g-lg small .ic { width: 15px; height: 15px; color: #ffb800; }
.g-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.g-acts button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 18px; background: var(--surface); font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }
.g-ab { width: 42px; height: 42px; border-radius: 14px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; }
.g-acts .fmk { background: linear-gradient(160deg, color-mix(in srgb, #8b5cf6 18%, var(--surface)), var(--surface)); }
.g-acts .fmk .g-ab { background: #8b5cf6; color: #fff; }
.g-acts .fmk i { position: absolute; top: -8px; right: 6px; padding: 2px 7px; border-radius: 8px; background: #8b5cf6; color: #fff; font: 700 calc(10px * var(--fs)) 'Google Sans'; font-style: normal; }
.g-cancel { padding: 12px 0 2px; color: var(--mute); }
.g-car { width: 22px; height: 38px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.g-car svg { width: 100%; height: 100%; display: block; }
.g-cph { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; }
.g-chat { padding: 20px 16px 16px; }
.g-chd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.g-chd svg { width: 44px; height: 44px; border-radius: 15px; }
.g-chd b { display: block; font: 700 calc(16px * var(--fs)) 'Google Sans'; }
.g-chd small { color: #06a747; font: 400 calc(13px * var(--fs)) 'Google Sans'; }
.g-msgs { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.g-msg { align-self: flex-start; max-width: 80%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface); font: 400 calc(14.5px * var(--fs))/1.35 'Google Sans'; }
.g-msg.me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--blue); color: #fff; }
.g-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.g-quick button { padding: 9px 13px; border-radius: 14px; background: var(--blue-deep); color: var(--blue); font: 500 calc(13.5px * var(--fs)) 'Google Sans'; }