/* ══════════════════════════════════════════════════════════════════
   SafePhone — a practice smartphone in HTML/CSS.
   Colors: Material 3 style variables set on #screen by theme.js.
   ══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, #2a3140 0%, var(--page-bg, #15181d) 70%);
  font-family: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;
  overflow: hidden; color: #e8eaed;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Keyboard focus (WCAG 2.4.7, 1.4.11): a white inner ring + a dark blue outer ring, visible on
   light and dark screens alike. Mouse and touch clicks don't show it (:focus-visible). */
:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 8px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #0b3d91; outline-offset: 1px; }
/* Containers and headings that only receive focus by script (dialogs, app windows,
   a new page title): no ring around a whole region. */
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
input, textarea, select { font: inherit; color: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }
[hidden] { display: none !important; }

.ms { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  overflow: hidden; width: 1em; flex: 0 0 auto; }
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Stage and phone frame ───────────────────────────────────────── */
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; }
/* Zoomed browser (see layout() in main.js): full-size phone, the page scrolls. */
body.zoomed { overflow-y: auto; height: auto; }
body.zoomed #stage { position: relative; inset: auto; min-height: 100vh; align-items: flex-start; padding: 16px 0; box-sizing: border-box; }
body.zoomed #side-help { max-height: none; }
#device {
  position: relative; width: 440px; height: 920px; flex: 0 0 auto;
  margin: calc((var(--device-h, 920px) - 920px) / 2) calc((var(--device-w, 440px) - 440px) / 2);
  border-radius: 58px; padding: 14px;
  background: linear-gradient(145deg, #3b3f46, #121418 60%, #25282d);
  box-shadow: 0 0 0 2px #50555e, 0 0 0 3px #111, 0 40px 90px rgba(0,0,0,.55), inset 0 0 6px rgba(255,255,255,.15);
  transform-origin: center center;
}
#device.flash-on::after { content: ''; position: absolute; top: -40px; left: 50%; width: 360px; height: 120px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,250,220,.55), transparent 70%); pointer-events: none; }
.hw-btn { position: absolute; right: -5px; width: 6px; padding: 0; border: 0; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #2b2e33, #5a5f68); cursor: pointer; }
/* The visible button is a thin edge; the clickable area reaches 24px outward (WCAG 2.5.8). */
.hw-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 24px; }
.hw-btn:hover { background: linear-gradient(90deg, #3a3e45, #8a909a); }
.hw-btn:active { right: -3px; }
.hw-power { top: 190px; height: 70px; }
.hw-vol-up { top: 290px; height: 56px; }
.hw-vol-down { top: 350px; height: 56px; }
#screen {
  position: relative; width: 412px; height: 892px; overflow: hidden; border-radius: 44px; background: #000;
  color: var(--onSurface); font-size: calc(16px * var(--font-scale, 1));
  container-type: size;
}
.punch-hole { position: absolute; top: 11px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #050608; box-shadow: inset 0 0 2px #333; z-index: 100; pointer-events: none; }

body.fullscreen #stage { display: block; }
/* On a real phone the practice phone stays inside the safe area: the real phone's own gestures (Home from the
   bottom edge, the notch, rounded corners) never sit on the practice phone's bar. Touch screens keep a small
   extra guard at the bottom for browsers that draw to the edge without reporting an inset. */
body.fullscreen { --touch-guard: 0px; }
@media (pointer: coarse) { body.fullscreen { --touch-guard: 14px; } }
body.fullscreen #device { box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; background: #000; transform: none !important;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) max(env(safe-area-inset-bottom, 0px), var(--touch-guard)) env(safe-area-inset-left, 0px); }
body.fullscreen #screen { width: 100%; height: 100%; border-radius: 0; }
/* No browser pull-to-refresh or overscroll bounce: pulling down the practice notifications must stay in the page. */
html:has(body.fullscreen), body.fullscreen { overscroll-behavior: none; }
body.fullscreen .hw-btn, body.fullscreen .punch-hole, body.fullscreen #side-help { display: none; }

#side-help { display: none; width: 320px; max-height: 88vh; overflow: auto; color: #dfe3ea; font-size: 14px; line-height: 1.5; }
body.with-side #side-help { display: block; }
.side-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px 20px; }
.side-card h2 { font-size: 16px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; color: #fff; }
.side-card ul { padding-left: 18px; margin: 0; }
.side-card li { margin: 6px 0; }
.side-card kbd { background: #2e3440; border: 1px solid #4c566a; border-radius: 4px; padding: 0 5px; font-size: 12px; }
.side-sub { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 15px; font-weight: 600; color: #fff; }
.side-keys { padding-left: 18px; margin: 0; }
.side-keys li { margin: 4px 0; }
.side-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(138,180,248,.12); color: #c6dafc; }
.side-ex { margin-bottom: 16px; }

/* ── Screen layers ───────────────────────────────────────────────── */
#wall, #launcher, #appstack, #recents, #lock, #boot, #screen-off, #layer-dialog, #shade { position: absolute; inset: 0; }
#wall { background: var(--wallpaper); z-index: 0; transition: filter .3s; }
#launcher { z-index: 1; }
#appstack { z-index: 2; pointer-events: none; }
#recents { z-index: 6; }
#navbar { z-index: 22; }
.edge { position: absolute; top: 60px; bottom: 60px; width: 16px; z-index: 23; touch-action: none; }
#edge-left { left: 0; } #edge-right { right: 0; }
#screen[data-nav="buttons"] .edge { display: none; }
#headsup { z-index: 26; }
#lock { z-index: 30; }
#statusbar { z-index: 35; }
#shade { z-index: 40; pointer-events: none; }
#volpanel { z-index: 45; }
/* Emergency screen and SOS countdown (sos.js): above the lock screen, under the status bar and dialogs */
.sos-layer { position: absolute; inset: 0; z-index: 34; background: #1c1b1f; color: #fff; display: flex; flex-direction: column; gap: 14px; padding: 48px 18px 28px; overflow: auto; }
#screen.sos-open #statusbar { color: #fff !important; }
.sos-top { display: flex; align-items: center; gap: 8px; }
.sos-top h1 { margin: 0; font-size: calc(22px * var(--font-scale, 1)); font-weight: 500; }
.sos-layer .icon-btn { color: #fff; }
.sos-call, .sos-info-btn, .sos-cancel { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 72px; border-radius: 36px; font-size: calc(20px * var(--font-scale, 1)); font-weight: 600; }
.sos-call { background: #d93025; color: #fff; margin-top: 30px; }
.sos-info-btn { background: #3c4043; color: #fff; }
.sos-call .ms, .sos-info-btn .ms, .sos-cancel .ms { font-size: 32px; }
.sos-note { text-align: center; color: #bdc1c6; margin: 0; }
.sos-card { background: #2d2c31; border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.sos-card h2 { margin: 0; font-size: calc(17px * var(--font-scale, 1)); display: flex; align-items: center; gap: 8px; color: #f28b82; }
.sos-card p { margin: 0; }
.sos-card small { display: block; color: #bdc1c6; }
.sos-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sos-count { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sos-count h1 { margin: 0; color: #f28b82; }
.sos-count p { margin: 0; }
.sos-n { font-size: 96px; line-height: 1; }
.sos-cancel { background: #fff; color: #1c1b1f; width: 100%; margin-top: 18px; }
#layer-dialog { z-index: 50; pointer-events: none; }
#layer-dialog > * { pointer-events: auto; }
#toasts { position: absolute; left: 0; right: 0; bottom: 90px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#back-arrow { z-index: 56; }
#nightlight-layer { position: absolute; inset: 0; z-index: 90; pointer-events: none; background: rgba(255,140,30,.18); mix-blend-mode: multiply; opacity: 0; transition: opacity .6s; }
#screen.night-light #nightlight-layer { opacity: 1; }
#dim-layer { position: absolute; inset: 0; z-index: 91; pointer-events: none; background: #000; opacity: var(--dim, 0); transition: opacity .15s; }
#screen.dozing #dim-layer { opacity: .55; transition: opacity 1.2s; }
#screen-off { z-index: 95; background: #000; }
#screen-off.powered-off { display: flex; align-items: flex-end; justify-content: center; }
.off-hint { color: #5f6368; font-size: calc(13px * var(--font-scale, 1)); text-align: center; margin-bottom: 120px; }
#boot { z-index: 96; }
.fatal { position: absolute; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #111; color: #fff; text-align: center; }

/* ── Status bar ──────────────────────────────────────────────────── */
#statusbar { position: absolute; top: 0; left: 0; right: 0; height: 36px; padding: 8px 22px 0 26px; display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 500; color: #1f1f1f; pointer-events: auto; touch-action: none; }
#statusbar.light-icons { color: #fff; }
#screen.recents-mode #statusbar { color: #fff; }
.sb-left, .sb-right { display: flex; align-items: center; gap: 5px; }
.sb-left { gap: 8px; }
.sb-notifs { display: flex; gap: 4px; align-items: center; }
.sb-ic { font-size: 17px; }
.sb-ic.batt { transform: rotate(90deg); font-size: 18px; }
.sb-cell { display: inline-flex; align-items: flex-end; }
.sb-cell small { font-size: 9px; font-weight: 700; margin-left: -2px; }
.sb-batt { display: inline-flex; align-items: center; gap: 1px; }
.sb-batt small { font-size: 12px; }
.sb-batt.low { color: #d93025; }
.sb-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.sb-time { font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* ── Navigation ──────────────────────────────────────────────────── */
#navbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: #1f1f1f; touch-action: none; }
#navbar.gestures { height: 26px; cursor: grab; }
#navbar.gestures:active { cursor: grabbing; }
#navbar.light-icons { color: #fff; }
#screen.is-locked #navbar { visibility: hidden; }
.nav-pill { width: 108px; height: 5px; border-radius: 3px; background: currentColor; opacity: .82; transition: transform .2s; }
#navbar.active .nav-pill { transition: none; }
#navbar.buttons { height: 48px; gap: 0; justify-content: space-evenly; padding: 0 44px; background: var(--navbg, transparent); }
#navbar.buttons button { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; }
#navbar.buttons button:active { background: rgba(128,128,128,.25); }
#navbar.over-app.buttons { background: var(--surface); }
#navbar.over-app.buttons.light-icons { background: #000; }
#screen[data-theme="dark"] #navbar.over-app.buttons { background: var(--surface); }
#back-arrow { position: absolute; left: 0; width: 36px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 0 28px 28px 0; background: rgba(32,33,36,.82); color: #fff; opacity: 0; transform: translateX(calc(-36px + var(--d, 0px) * .5)); pointer-events: none; transition: opacity .12s; }
#back-arrow.right { left: auto; right: 0; border-radius: 28px 0 0 28px; transform: translateX(calc(36px - var(--d, 0px) * .5)) scaleX(-1); }
#back-arrow.show { opacity: .75; }
#back-arrow.ready { opacity: 1; background: var(--primary); color: var(--onPrimary); }

/* ── App windows ─────────────────────────────────────────────────── */
.appwin { position: absolute; inset: 0; background: var(--surface); color: var(--onSurface); display: none; pointer-events: auto;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s, border-radius .28s; overflow: hidden; will-change: transform; }
.appwin.front, .appwin.leaving { display: block; }
.appwin.dark-app { background: #000; color: #fff; }
.appwin > .app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 36px; padding-bottom: 26px; }
#screen[data-nav="buttons"] .appwin > .app { padding-bottom: 48px; }
.splash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.app-crash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; }
.app-crash .ms { font-size: 48px; color: #d93025; }
#launcher.behind { visibility: hidden; transition: visibility 0s .28s; }
#launcher.behind + #appstack { }

/* ── App icons ───────────────────────────────────────────────────── */
.app-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.app-ic.svg { background: #fff; }
.app-ic.svg svg { width: 100%; height: 100%; }
.app-ic.cal { background: #fff; color: #1a73e8; border: 0; }
.app-ic.cal b { font-weight: 500; }
.app-ic .ms { width: auto; }

/* ── Home screen ─────────────────────────────────────────────────── */
.home { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 44px 0 30px; transition: opacity .2s, transform .25s; }
#screen[data-nav="buttons"] .home { padding-bottom: 52px; }
#launcher.drawer-open .home { opacity: 0; transform: scale(.94); pointer-events: none; }
.home-pages { flex: 1; overflow: hidden; position: relative; touch-action: none; }
.home-track { display: flex; height: 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.home-page { flex: 0 0 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); padding: 6px 12px; position: relative; }
.hcell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.hcell.widget { padding: 4px; }
.hicon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 4px 0; border-radius: 16px; touch-action: none; }
.hicon:active .app-ic { transform: scale(.92); }
.app-ic { transition: transform .12s; }
.hlabel { font-size: calc(12.5px * var(--font-scale, 1)); line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); max-width: 84px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-dots { height: 14px; display: flex; justify-content: center; gap: 6px; align-items: center; }
.home-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.home-dots i.on { background: #fff; width: 7px; height: 7px; }
.home-search { margin: 8px 20px 10px; height: 52px; border-radius: 26px; background: var(--surfaceC2); color: var(--onSurfaceVar);
  display: flex; align-items: center; padding: 0 16px; gap: 12px; cursor: text; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.hs-txt { flex: 1; font-size: calc(16px * var(--font-scale, 1)); }
.hs-g { color: var(--primary); display: flex; }
.hs-ic { color: var(--onSurfaceVar); }
.home-dock { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px; height: 76px; }
.dock-cell .hicon { gap: 0; }
.drop-bar { position: absolute; top: 36px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; padding: 8px; z-index: 10; }
.drop-zone { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 22px; color: #fff; background: rgba(0,0,0,.35); font-size: calc(14px * var(--font-scale, 1)); }
.drop-zone.hot { background: #d93025; transform: scale(1.06); }
.drop-zone[data-drop="info"].hot { background: var(--primary); }
.drop-zone .ms { font-size: 20px; }
#launcher.dragging .home-page { background: rgba(255,255,255,.06); outline: 1px dashed rgba(255,255,255,.35); outline-offset: -6px; border-radius: 24px; }
.drop-hint { border-radius: 18px; background: rgba(255,255,255,.22); pointer-events: none; }
.drag-ghost { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.drag-widget { display: block; width: 120px; height: 70px; border-radius: 20px; background: rgba(255,255,255,.7); }
.folder-ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 7px; place-items: center; }
#screen[data-theme="dark"] .folder-ic { background: rgba(60,60,64,.9); }
.folder-sheet { padding-bottom: 30px; }
.folder-name { width: 100%; border: 0; background: var(--surfaceC3); border-radius: 14px; padding: 12px 14px; font-size: calc(18px * var(--font-scale, 1)); text-align: center; margin-bottom: 14px; outline: none; }
.folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.folder-grid .hlabel { color: var(--onSurface); text-shadow: none; }

/* Widgets */
.w-glance { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4px 18px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); gap: 4px; }
.wg-date { font-size: calc(26px * var(--font-scale, 1)); font-weight: 400; }
.wg-weather, .wg-alarm, .wg-event { font-size: calc(16px * var(--font-scale, 1)); display: flex; align-items: center; gap: 6px; }
.wg-weather .ms, .wg-alarm .ms, .wg-event .ms { font-size: 20px; }
.w-bigclock { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.w-bigclock b { font-size: 52px; font-weight: 300; line-height: 1; }
.w-weather, .w-notes { width: 100%; height: 100%; border-radius: 26px; background: var(--primaryContainer); color: var(--onPrimaryContainer); padding: 14px; display: grid; text-align: left; align-content: space-between; }
.ww-city { font-size: calc(14px * var(--font-scale, 1)); } .ww-temp { font-size: 42px; font-weight: 400; } .ww-ic { font-size: 34px; justify-self: end; margin-top: -60px; color: #f9ab00; } .ww-desc { font-size: calc(12px * var(--font-scale, 1)); }
.w-notes { background: #fff8d6; color: #3c3000; align-content: start; gap: 6px; }
.w-notes b { display: flex; gap: 6px; align-items: center; font-weight: 500; } .w-notes b .ms { color: #fbbc04; font-size: 20px; }
.w-notes span { font-size: calc(14px * var(--font-scale, 1)); overflow: hidden; }

/* Tiroir d'applications */
.drawer { position: absolute; inset: 0; background: var(--surfaceC1); padding: 44px 8px 30px; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 5; border-radius: 28px 28px 0 0; touch-action: pan-y; }
.drawer.dragging { transition: none; }
.drawer.open { transform: translateY(0); border-radius: 0; }
.drawer-search { margin: 6px 12px 12px; height: 52px; border-radius: 26px; background: var(--surfaceC3); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; color: var(--onSurfaceVar); }
.drawer-search input { flex: 1; border: 0; background: none; outline: none; font-size: calc(16px * var(--font-scale, 1)); color: var(--onSurface); }
.ds-more { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.drawer-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 104px; align-content: start; padding: 4px 4px 20px; scrollbar-width: none; }
.drawer-grid .hlabel { color: var(--onSurface); text-shadow: none; }
.drawer-empty { grid-column: 1 / -1; text-align: center; color: var(--onSurfaceVar); padding: 30px; line-height: 1.8; }

/* ── Notification shade ──────────────────────────────────────────── */
.shade-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.shade-panel { position: absolute; left: 0; right: 0; top: 0; max-height: 100%; overflow-y: auto; padding: 14px 12px 20px; background: var(--surfaceC1);
  border-radius: 0 0 30px 30px; transform: translateY(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); scrollbar-width: none; touch-action: none; }
#shade:not(.closed) { pointer-events: auto; }
#shade:not(.closed) .shade-scrim { opacity: 1; }
#shade:not(.closed) .shade-panel { transform: translateY(0); }
#shade.full .shade-panel { bottom: 0; border-radius: 0; }
.qs { background: var(--surfaceC3); border-radius: 26px; padding: 14px 12px 6px; position: relative; }
.qs-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 8px 12px; }
.qs-clock b { font-size: calc(30px * var(--font-scale, 1)); font-weight: 400; display: block; line-height: 1.1; }
.qs-clock span { font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.qs-carrier { font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.qs-bright-row { display: flex; align-items: center; gap: 0; margin: 0 4px 12px; position: relative; color: var(--onPrimary); }
.qs-bright-row .ms { position: absolute; left: 16px; z-index: 2; pointer-events: none; font-size: 22px; }
.qs-bright { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; border-radius: 24px; background: var(--secondaryContainer); overflow: hidden; margin: 0; cursor: pointer; }
.qs-bright::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; border-radius: 24px; background: var(--primary); box-shadow: -400px 0 0 376px var(--primary); }
.qs-bright::-moz-range-thumb { width: 48px; height: 48px; border: 0; border-radius: 24px; background: var(--primary); }
.qs-bright::-moz-range-progress { height: 48px; background: var(--primary); border-radius: 24px; }
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qs-tile { height: 68px; border-radius: 22px; background: var(--surfaceC4); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; text-align: left; min-width: 0; transition: background .2s, border-radius .2s; }
.qs-tile.on { background: var(--primary); color: var(--onPrimary); border-radius: 22px; }
.qs-ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qs-tile.on .qs-ic { background: rgba(255,255,255,.18); }
.qs-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qs-txt b { font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-txt small { font-size: calc(12px * var(--font-scale, 1)); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-chev { font-size: calc(20px * var(--font-scale, 1)); opacity: .8; }
.qs-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 4px; }
.qs-round { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surfaceC4); }
.qs-round:last-child { background: var(--surfaceC4); }
.qs-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.qs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--outlineVar); } .qs-dots i.on { background: var(--primary); }
.qs-handle { display: flex; justify-content: center; width: 100%; padding: 10px 0 4px; }
.qs-handle i { width: 32px; height: 4px; border-radius: 2px; background: var(--onSurfaceVar); opacity: .5; }
.notif-list { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; border-radius: 24px; overflow: hidden; }
.notif { display: flex; gap: 12px; padding: 14px 16px; background: var(--surfaceC3); align-items: flex-start; cursor: pointer; transition: transform .2s, opacity .2s; touch-action: pan-y; }
.notif-list .notif:first-child { border-radius: 24px 24px 6px 6px; }
.notif-list .notif:last-child { border-radius: 6px 6px 24px 24px; }
.notif-list .notif:only-child { border-radius: 24px; }
.notif-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.notif-ic .ms { font-size: 18px; }
.notif-body { flex: 1; min-width: 0; }
.notif-meta { font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.notif-title { font-size: calc(15px * var(--font-scale, 1)); font-weight: 500; margin-top: 2px; }
.notif-text { font-size: calc(14px * var(--font-scale, 1)); color: var(--onSurfaceVar); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; flex: 0 0 auto; }
.notif-progress { height: 4px; border-radius: 2px; background: var(--secondaryContainer); margin-top: 8px; overflow: hidden; }
.notif-progress i { display: block; height: 100%; background: var(--primary); transition: width .15s; }
.notif-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 4px 0; }
.notif-empty { text-align: center; color: #fff; opacity: .85; padding: 28px 0 10px; font-size: calc(14px * var(--font-scale, 1)); }
.notif-locked { text-align: center; color: #fff; opacity: .8; font-size: calc(13px * var(--font-scale, 1)); padding: 10px; }
#headsup { position: absolute; top: 40px; left: 10px; right: 10px; transform: translateY(-140%); transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
#headsup.show { transform: translateY(0); pointer-events: auto; }
.notif.heads { border-radius: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.25); background: var(--surfaceC2); touch-action: none; }

/* ── Recent apps ─────────────────────────────────────────────────── */
#recents { opacity: 0; transition: opacity .2s; }
#recents.show { opacity: 1; }
.recents-bg { position: absolute; inset: 0; background: rgba(20,20,22,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.rec-scroll { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; overflow-x: auto; padding: 0 70px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rec-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; scroll-snap-align: center; }
.rec-head { width: 36px; height: 36px; border-radius: 50%; }
.rec-card { width: 256px; height: 554px; border-radius: 26px; overflow: hidden; position: relative; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s, opacity .2s; cursor: pointer; touch-action: none; }
.rec-snap { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(.6214); pointer-events: none; }
.rec-snap > .appwin { position: relative; display: block !important; }
.rec-name { color: #fff; font-size: calc(13px * var(--font-scale, 1)); }
.rec-clear { flex: 0 0 auto; align-self: center; scroll-snap-align: center; white-space: nowrap; }
.rec-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(16px * var(--font-scale, 1)); }
#screen.recents-mode #launcher { filter: blur(3px); }
#screen.recents-mode #appstack { visibility: hidden; }

/* ── Dialogs, sheets, menus ──────────────────────────────────────── */
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .18s; }
.scrim.show { opacity: 1; }
.scrim.clear { background: transparent; }
.dialog { position: absolute; left: 50%; top: 50%; width: min(340px, calc(100% - 48px)); max-height: 80%; overflow: auto; transform: translate(-50%, -46%) scale(.96); opacity: 0;
  transition: transform .18s, opacity .18s; background: var(--surfaceC3); color: var(--onSurface); border-radius: 28px; padding: 24px; }
.dialog.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
/* "Try one lesson" card (F6): bigger than a normal dialog, one obvious button */
.dialog:has(.trial-card) { width: min(380px, calc(100% - 28px)); }
.dialog:has(.trial-card) .dlg-title { font-size: calc(26px * var(--font-scale, 1)); }
.trial-card { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.trial-lead { font-size: calc(18px * var(--font-scale, 1)); line-height: 1.4; margin: 0; }
.trial-small { font-size: calc(14px * var(--font-scale, 1)); color: var(--onSurfaceVar); margin: 0; }
.trial-cta { width: 100%; text-decoration: none; margin-top: 4px; }
.trial-link { color: var(--primary); font-weight: 600; text-decoration: underline; font-size: inherit; padding: 6px 2px; min-height: 24px; }
/* End card (fix 4): "Keep looking around" is a quiet link under the main button, still an easy 44 px to tap. */
.trial-later .trial-link { color: var(--onSurfaceVar); font-weight: 500; min-height: 44px; padding: 10px 12px; }
/* Trial: what this is (lesson card, first step) and the link to try it later with the parent (card and end card). */
.trial-intro { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 6px; padding: 8px 10px; border-radius: 12px; background: #e8f0fe; color: #0b3d91; font-size: calc(14px * var(--font-scale, 1)); line-height: 1.4; }
.trial-intro .ms { font-size: 20px; }
.trial-sendlink { margin: 6px 0 0; font-size: calc(13px * var(--font-scale, 1)); text-align: center; }
.trial-sendlink a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: #0b57d0; font-weight: 600; text-decoration: underline; }
.trial-sendlink .ms { font-size: 18px; text-decoration: none; }
/* Trial: the first-time hint on the ringing call (trial.js coach()). Never takes a tap; under the lesson card. */
.trial-coach-ring { position: absolute; z-index: 56; border-radius: 50%; pointer-events: none; border: 4px solid #fff;
  box-shadow: 0 0 0 5px #1e8e3e, 0 0 28px 10px rgba(30, 142, 62, .65); animation: trial-coach 1.1s ease-in-out infinite; }
.trial-coach-label { position: absolute; z-index: 56; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  background: #1e8e3e; color: #fff; font-weight: 700; font-size: calc(19px * var(--font-scale, 1)); padding: 10px 18px; border-radius: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: trial-coach-bob 1.1s ease-in-out infinite; }
@keyframes trial-coach { 50% { transform: scale(1.08); } }
@keyframes trial-coach-bob { 50% { transform: translate(-50%, calc(-100% - 6px)); } }
/* Trial: "Tap here to start your free lesson" on the Lessons app (trial.js startHomePointer), over the home screen. */
.trial-coach-ring.trial-home-point, .trial-coach-label.trial-home-point { z-index: 30; }
/* On the button's or icon's own edge, glowing in and out, with no growing ring: the name under it stays readable. */
.trial-coach-ring.trial-hug { border-color: #fff; box-shadow: 0 0 0 2px #1e8e3e; animation: trial-hug 1.1s ease-in-out infinite; }
.trial-coach-ring.trial-home-point { border-color: #1e8e3e; box-shadow: 0 0 0 2px #fff; }
@keyframes trial-hug { 50% { box-shadow: 0 0 0 2px #1e8e3e, 0 -6px 14px 2px rgba(30, 142, 62, .8); } }
/* Trial: the start card (trial.js startCard, HOI_TRIAL_START_CARD=1), over the whole phone screen, one big button. */
.trial-start { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(16, 20, 24, .72); }
.trial-start-box { width: 100%; max-width: 340px; padding: 28px 22px 24px; border-radius: 28px; background: #fffbf5; color: #1f1b16;
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
.trial-start-box > .ms { font-size: 48px; color: #1e8e3e; }
.trial-start-box h2 { margin: 8px 0 10px; font-size: calc(24px * var(--font-scale, 1)); line-height: 1.25; font-weight: 700; }
.trial-start-box p { margin: 0 0 22px; font-size: calc(17px * var(--font-scale, 1)); line-height: 1.45; }
.trial-start-box .btn-filled.big { width: 100%; min-height: 60px; justify-content: center; gap: 8px; font-size: calc(20px * var(--font-scale, 1));
  background: #1e8e3e; color: #fff; }
/* Trial: nothing touched for 10 s on a step: the lesson card pulses gently. */
.ex-card.ex-nudge { animation: ex-nudge 1.6s ease-in-out infinite; }
@keyframes ex-nudge { 50% { box-shadow: 0 0 0 7px rgba(255, 193, 7, .65), 0 8px 24px rgba(0, 0, 0, .3); } }
@media (prefers-reduced-motion: reduce) {
  .trial-coach-ring, .trial-coach-label, .ex-card.ex-nudge, .trial-coach-ring.trial-hug { animation: none; }
  .ex-card.ex-nudge { box-shadow: 0 0 0 6px rgba(255, 193, 7, .8); }
}
.dlg-icon { display: flex; justify-content: center; color: var(--secondary); margin-bottom: 14px; }
.dlg-title { font-size: calc(22px * var(--font-scale, 1)); font-weight: 400; margin: 0 0 14px; line-height: 1.3; }
.dlg-title.center { text-align: center; }
.dlg-text { font-size: calc(14px * var(--font-scale, 1)); color: var(--onSurfaceVar); margin: 0 0 16px; line-height: 1.5; white-space: pre-line; }
.dlg-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.perm-dialog .dlg-title { font-size: calc(19px * var(--font-scale, 1)); }
.perm-buttons { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.perm-btn { padding: 14px; border-radius: 20px; background: var(--surfaceC1); color: var(--primary); font-weight: 500; font-size: calc(15px * var(--font-scale, 1)); }
.perm-btn:first-child { border-radius: 20px 20px 4px 4px; }
.perm-btn:last-child { border-radius: 4px 4px 20px 20px; }
.perm-btn:only-child { border-radius: 20px; }
.perm-buttons .perm-btn:nth-child(2):not(:last-child) { border-radius: 4px; }
.uninstall-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: calc(18px * var(--font-scale, 1)); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; background: var(--surfaceC1); color: var(--onSurface); border-radius: 28px 28px 0 0;
  padding: 8px 20px 34px; transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sheet.show { transform: translateY(0); }
.sheet-grip { width: 32px; height: 4px; border-radius: 2px; background: var(--onSurfaceVar); opacity: .4; margin: 6px auto 14px; cursor: grab; padding: 8px 40px; background-clip: content-box; box-sizing: content-box; }
.sheet-title { font-size: calc(22px * var(--font-scale, 1)); font-weight: 400; margin: 0 0 4px; text-align: center; }
.sheet-text { margin: 4px 8px 14px; color: var(--onSurfaceVar); font-size: .9em; line-height: 1.45; text-align: center; }
.sheet-sub { text-align: center; color: var(--onSurfaceVar); font-size: calc(14px * var(--font-scale, 1)); margin: 0 0 16px; }
.sheet-buttons { display: flex; justify-content: space-between; margin-top: 18px; }
.popmenu { position: absolute; min-width: 200px; max-width: 290px; background: var(--surfaceC2); color: var(--onSurface); border-radius: 16px; padding: 8px 0; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0; transform: scale(.95); transform-origin: top left; transition: opacity .12s, transform .12s; }
.popmenu.show { opacity: 1; transform: scale(1); }
.popmenu hr { border: 0; border-top: 1px solid var(--outlineVar); margin: 6px 0; }
.pm-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; text-align: left; font-size: calc(15px * var(--font-scale, 1)); }
.pm-item:hover, .pm-item:focus-visible { background: rgba(128,128,128,.12); }
.pm-item:focus-visible { outline: 3px solid #0b3d91; outline-offset: -3px; box-shadow: none; }
.pm-item .ms { font-size: 20px; color: var(--onSurfaceVar); }
.pm-item.danger, .pm-item.danger .ms { color: #d93025; }
.pm-item:disabled { opacity: .4; }
.toast { display: flex; align-items: center; gap: 8px; max-width: 320px; padding: 10px 16px 10px 10px; border-radius: 22px; background: #2d2f31; color: #eee; font-size: calc(14px * var(--font-scale, 1));
  box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }
.snackbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 24px); padding: 6px 8px 6px 16px; min-height: 48px; border-radius: 6px;
  background: var(--inverse); color: var(--onInverse); font-size: calc(14px * var(--font-scale, 1)); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: auto; }
.snackbar.show { opacity: 1; transform: none; }
.snackbar .btn-text { color: var(--primaryContainer); }

/* Power menu */
.power-menu { position: absolute; right: 14px; top: 50%; transform: translate(20px, -50%); opacity: 0; transition: .2s; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.power-menu.show { opacity: 1; transform: translate(0, -50%); }
.pw-btn { width: 118px; height: 118px; border-radius: 28px; background: var(--surfaceC3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: calc(14px * var(--font-scale, 1)); }
.pw-btn .ms { font-size: 28px; }
.pw-btn.emergency { background: #f9dedc; color: #8c1d18; }

/* Volume */
#volpanel { position: absolute; right: 10px; top: 150px; width: 64px; padding: 10px 0; border-radius: 32px; background: var(--surfaceC2); box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
#volpanel.expanded { width: auto; }
.vol-ring { width: 44px; height: 44px; border-radius: 50%; background: var(--primaryContainer); color: var(--onPrimaryContainer); display: flex; align-items: center; justify-content: center; }
.vol-cols { display: flex; gap: 4px; padding: 0 10px; }
.vol-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vol-col small { font-size: 10px; color: var(--onSurfaceVar); display: none; }
#volpanel.expanded .vol-col small { display: block; }
.vol-slider { width: 44px; height: 180px; position: relative; }
.vol-slider input { position: absolute; width: 180px; height: 44px; left: -68px; top: 68px; transform: rotate(-90deg); -webkit-appearance: none; appearance: none; background: var(--secondaryContainer); border-radius: 22px; overflow: hidden; margin: 0; cursor: pointer; }
.vol-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 22px; background: var(--primary); box-shadow: -400px 0 0 378px var(--primary); }
.vol-slider input::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--primary); }
.vol-slider input::-moz-range-progress { height: 44px; background: var(--primary); }
.vol-col > .ms { font-size: 18px; color: var(--onSurfaceVar); }
.vol-more { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }

/* ── Lock screen ─────────────────────────────────────────────────── */
#lock { color: #fff; overflow: hidden; touch-action: none; transition: opacity .28s, transform .28s; }
#lock.leaving { opacity: 0; transform: translateY(-40px); }
.lk-wall { position: absolute; inset: 0; background: var(--wallpaper); filter: brightness(.72); }
#lock.bouncing .lk-wall { filter: brightness(.4) blur(10px); }
.lk-top { position: absolute; top: 10px; left: 26px; line-height: 20px; font-size: calc(13px * var(--font-scale, 1)); opacity: .9; }
.lk-clock { position: absolute; top: 120px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; line-height: .86; transition: transform .2s; }
.lk-clock b { font-size: 132px; font-weight: 300; letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--primaryContainer); }
.lk-clock b + b { color: #fff; }
.lk-date { position: absolute; top: 380px; left: 0; right: 0; text-align: center; font-size: calc(17px * var(--font-scale, 1)); display: flex; justify-content: center; align-items: center; gap: 10px; }
.lk-weather { display: inline-flex; align-items: center; gap: 4px; }
.lk-weather .ms { font-size: 20px; }
.lk-notifs { position: absolute; top: 430px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; }
.lk-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); cursor: pointer; }
.lk-notif b { display: block; font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); }
.lk-notif small { display: block; font-size: calc(13px * var(--font-scale, 1)); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.lk-more { text-align: center; font-size: 13px; opacity: .8; }
.lk-bottom { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 32px; }
.lk-short { width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; }
.lk-short.pressing { transform: scale(1.25); background: rgba(255,255,255,.25); transition: transform .55s, background .55s; }
.lk-short.on { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.lk-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; text-align: center; max-width: 200px; padding-bottom: 6px; }
.lk-fp { font-size: 40px; opacity: .85; }
.lk-hint-txt.flash { color: var(--primaryContainer); }
#lock.bump .lk-clock, #lock.bump .lk-date { animation: bump .45s; }
@keyframes bump { 30% { transform: translateY(-26px); } }
.lk-bouncer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 60px; gap: 20px; z-index: 3; }
.lk-bouncer.shake .pin-dots { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
#lock.bouncing .lk-clock, #lock.bouncing .lk-date, #lock.bouncing .lk-notifs, #lock.bouncing .lk-bottom { opacity: 0; pointer-events: none; }
.pin-title { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: calc(16px * var(--font-scale, 1)); text-align: center; max-width: 300px; }
.pin-dots { height: 30px; display: flex; gap: 14px; align-items: center; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 28px; }
.pin-pad button { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: calc(30px * var(--font-scale, 1)); display: flex; align-items: center; justify-content: center; }
.pin-pad button:active { background: rgba(255,255,255,.3); }
.pin-pad .pin-ok { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.pin-foot { display: flex; gap: 60px; }
.pin-foot .btn-text { color: #fff; }

/* ── Boot / setup ────────────────────────────────────────────────── */
#boot { background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#boot.booting, #boot.shutting { gap: 14px; }
#boot.done { opacity: 0; transition: opacity .4s; }
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boot-logo b { font-size: calc(28px * var(--font-scale, 1)); font-weight: 400; letter-spacing: .5px; }
#boot > small { position: absolute; bottom: 60px; color: #9aa0a6; letter-spacing: 2px; text-transform: uppercase; font-size: calc(12px * var(--font-scale, 1)); }
/* TryTechSafe logo (white T + green S badge), the same file as the website's. */
.hoi-logo { width: 84px; height: 84px; display: block; background: url(/brand/logo.svg) center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(12, 36, 64, .25)); }
.hoi-logo i { display: none; }
#boot .boot-logo .hoi-logo { animation: hoi-pulse 1.6s infinite ease-in-out; }
@keyframes hoi-pulse { 50% { transform: scale(.92); opacity: .85; } }
.boot-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #333; border-top-color: #8ab4f8; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#boot.setup { background: var(--surface); color: var(--onSurface); justify-content: stretch; align-items: stretch; }
.setup-page { flex: 1; display: flex; flex-direction: column; padding: 90px 28px 40px; overflow-y: auto; }
.setup-page h1 { font-size: 34px; font-weight: 400; margin: 18px 0 14px; }
.setup-page.welcome h1 { font-size: 42px; text-align: center; margin-top: 40px; }
.setup-page.welcome p { text-align: center; }
.setup-page p { font-size: calc(15px * var(--font-scale, 1)); line-height: 1.55; color: var(--onSurfaceVar); margin: 0 0 18px; }
.setup-page .muted { font-size: calc(13px * var(--font-scale, 1)); }
.setup-logo { display: flex; justify-content: center; margin-top: 30px; }
.setup-logo.small { justify-content: flex-start; margin: 0; color: var(--primary); }
.setup-logo.small .ms { font-size: 40px; }
/* No internet at start-up (main.js offlineScreen). */
.setup-page.offline .setup-logo .ms { font-size: 72px; color: var(--primary); }
.setup-lang { align-self: center; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 20px; background: var(--surfaceC2); margin-top: 20px; font-size: calc(14px * var(--font-scale, 1)); }
.setup-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 24px; }
.setup-error { color: #d93025 !important; min-height: 20px; font-size: calc(14px * var(--font-scale, 1)) !important; }
.setup-link { color: var(--primary); font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); text-decoration: none; }
/* Account sign-in, sized for seniors: big targets (48px+), 17px text, links that look like links. */
.setup-logo.small .hoi-logo { width: 56px; height: 56px; }
.setup-free { font-weight: 500; color: var(--onSurface) !important; }
.setup-actions.stacked { flex-direction: column; align-items: stretch; gap: 12px; }
.btn-filled.big { min-height: 52px; font-size: calc(17px * var(--font-scale, 1)); padding: 0 28px; }
.setup-link.big { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 26px; border: 1px solid var(--outline, #79747e); font-size: calc(17px * var(--font-scale, 1)); }
.setup-by { margin: 18px 0 0 !important; font-size: calc(13px * var(--font-scale, 1)) !important; text-align: center; }
.field.big input { font-size: calc(18px * var(--font-scale, 1)); min-height: 56px; }
.field.big > span { font-size: calc(14px * var(--font-scale, 1)); }
.field.big .field-eye { width: 48px; height: 48px; }
.field.big .field-eye .ms { font-size: 26px; }
.setup-notice, .setup-help { display: flex; gap: 10px; align-items: flex-start; font-size: calc(15px * var(--font-scale, 1)) !important; line-height: 1.45; }
.setup-notice { padding: 12px 14px; border-radius: 16px; background: var(--secondaryContainer, #e8f1ff); color: var(--onSecondaryContainer, #0c2440) !important; }
.setup-notice .ms, .setup-help .ms { flex: none; font-size: 22px; margin-top: 1px; color: var(--primary); }
.setup-help { margin: 14px 0 0 !important; }
.setup-help.small { font-size: calc(14px * var(--font-scale, 1)) !important; margin-top: 8px !important; }
.setup-help a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.setup-page.signin .setup-error { font-size: calc(15px * var(--font-scale, 1)) !important; line-height: 1.45; }
.nav-choice { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px; border-radius: 20px; border: 2px solid var(--outlineVar); margin-bottom: 12px; }
.nav-choice.on { border-color: var(--primary); background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.nav-choice b { display: block; font-weight: 500; font-size: calc(16px * var(--font-scale, 1)); margin-bottom: 4px; }
.nav-choice small { font-size: calc(13px * var(--font-scale, 1)); opacity: .8; line-height: 1.4; display: block; }
.nav-demo { flex: 0 0 64px; height: 110px; border-radius: 12px; border: 2px solid currentColor; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; gap: 6px; opacity: .8; }
.nav-demo.gestures i { width: 28px; height: 4px; border-radius: 2px; background: currentColor; }
.nav-demo.buttons i { font-style: normal; font-size: calc(12px * var(--font-scale, 1)); }

/* ── Composants Material 3 ───────────────────────────────────────── */
.btn-filled, .btn-tonal, .btn-outline, .btn-text { height: 40px; padding: 0 22px; border-radius: 20px; font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); letter-spacing: .1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-filled { background: var(--primary); color: var(--onPrimary); }
.btn-filled:disabled { opacity: .45; }
.btn-tonal { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.btn-outline { border: 1px solid var(--outline); color: var(--primary); }
.btn-text { color: var(--primary); padding: 0 12px; }
.btn-text.danger { color: #d93025; }
.btn-tonal.sm, .btn-filled.sm { height: 34px; padding: 0 14px; font-size: calc(13px * var(--font-scale, 1)); }
.btn-filled .ms, .btn-tonal .ms, .btn-outline .ms { font-size: 18px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-btn:active, .icon-btn:hover { background: rgba(128,128,128,.14); }
.fab { position: absolute; right: 16px; bottom: calc(40px + var(--navh, 0px)); height: 56px; min-width: 56px; padding: 0 16px; border-radius: 16px; background: var(--primaryContainer); color: var(--onPrimaryContainer);
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.2); font-weight: 500; z-index: 4; }
#screen[data-nav="buttons"] { --navh: 22px; }
.fab.large { height: 96px; width: 96px; border-radius: 28px; }
.fab .ms { font-size: 24px; }
.appbar { display: flex; align-items: center; gap: 4px; height: 64px; padding: 0 4px 0 4px; flex: 0 0 auto; }
.appbar h1 { flex: 1; font-size: calc(22px * var(--font-scale, 1)); font-weight: 400; margin: 0 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar.large { height: auto; flex-direction: column; align-items: stretch; padding: 4px 4px 0; }
.appbar-row { display: flex; align-items: center; justify-content: space-between; }
.appbar.large h1 { font-size: 32px; margin: 26px 16px 18px; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.list-card { background: var(--surfaceC1); border-radius: 24px; overflow: hidden; margin: 0 16px 12px; }
.li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; width: 100%; text-align: left; }
.li-row { position: relative; }
.li-row > .li { padding-right: 72px; }
.li-row > .li-side { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
button.li:hover { background: rgba(128,128,128,.07); }
button.li:active { background: rgba(128,128,128,.14); }
.li-ic { color: var(--onSurfaceVar); display: flex; }
.li-ic.round { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-t b { font-weight: 400; font-size: calc(17px * var(--font-scale, 1)); }
.li-t small { font-size: calc(14px * var(--font-scale, 1)); color: var(--onSurfaceVar); line-height: 1.35; }
.li-end { color: var(--onSurfaceVar); font-size: calc(20px * var(--font-scale, 1)); }
.li-switch .switch { margin-left: auto; }
.li.connected .li-t small { color: var(--primary); }
.section-title { font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; color: var(--primary); margin: 18px 20px 6px; }
.divider { height: 1px; background: var(--outlineVar); margin: 4px 20px; }
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: 0 0 auto; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--surfaceC4); border: 2px solid var(--outline); transition: .2s; }
.switch i::after { content: ''; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: .2s; }
.switch input:checked + i { background: var(--primary); border-color: var(--primary); }
.switch input:checked + i::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--onPrimary); }
.switch input:disabled + i { opacity: .4; }
.field { display: flex; flex-direction: column; gap: 4px; position: relative; margin: 10px 0; }
.field span { font-size: calc(12px * var(--font-scale, 1)); color: var(--primary); font-weight: 500; padding-left: 4px; }
.field input, .field textarea, .field select { border: 0; border-bottom: 2px solid var(--primary); background: var(--surfaceC4); border-radius: 6px 6px 0 0; padding: 12px 14px; font-size: calc(16px * var(--font-scale, 1)); outline: none; width: 100%; color: var(--onSurface); }
.field.outlined input { border: 1px solid var(--outline); border-radius: 6px; background: transparent; padding: 16px 14px; }
.field.outlined input:focus { border: 2px solid var(--primary); padding: 15px 13px; }
.field-eye { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--outline); font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; white-space: nowrap; }
.chip.on { background: var(--secondaryContainer); border-color: transparent; color: var(--onSecondaryContainer); }
.chip .ms { font-size: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; flex: 0 0 auto; }
.tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--outlineVar); }
.tab { flex: 1; height: 48px; font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); color: var(--onSurfaceVar); position: relative; }
.tab.on { color: var(--primary); }
.tab.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.bottom-nav { display: flex; flex: 0 0 auto; height: 80px; background: var(--surfaceC2); padding-top: 12px; }
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; color: var(--onSurfaceVar); }
.bn-item .bn-ic { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.bn-item.on { color: var(--onSurface); }
.bn-item.on .bn-ic { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.bn-item.on .ms { font-variation-settings: 'FILL' 1; }
.search-bar { display: flex; align-items: center; gap: 12px; height: 56px; margin: 8px 16px; padding: 0 8px 0 16px; border-radius: 28px; background: var(--surfaceC3); color: var(--onSurfaceVar); flex: 0 0 auto; }
.search-bar input { flex: 1; border: 0; background: none; outline: none; font-size: calc(16px * var(--font-scale, 1)); color: var(--onSurface); min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 17px; flex: 0 0 auto; }
.avatar.lg { width: 96px; height: 96px; font-size: 40px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 30px; color: var(--onSurfaceVar); text-align: center; }
.empty-state .ms { font-size: 56px; opacity: .6; }
.progress-linear { height: 4px; border-radius: 2px; background: var(--secondaryContainer); overflow: hidden; }
.progress-linear i { display: block; height: 100%; background: var(--primary); transition: width .15s; }
.muted { color: var(--onSurfaceVar); }
.pad { padding: 0 20px; }
kbd { font-family: inherit; }
#screen.is-locked .sb-left { visibility: hidden; }

/* Screen reader practice (reader.js): the green box around the item being read, and a
   written copy of what it says. Neither takes touches. */
#reader-box { position: absolute; left: 0; top: 0; z-index: 95; pointer-events: none; border: 4px solid #1fa84f;
  border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 14px rgba(31,168,79,.6); }
#reader-caption { position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 96; pointer-events: none;
  background: rgba(10,14,20,.88); color: #fff; font-size: 15px; line-height: 1.35; padding: 10px 14px;
  border-radius: 14px; max-height: 30%; overflow: hidden; }
#reader-caption::before { content: 'Screen reader: '; color: #8ce0a8; font-weight: 600; }

/* Live captions (captions.js): sounds, vibrations and voices written out. */
#sound-caption { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 96; pointer-events: none;
  max-width: calc(100% - 32px); display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px; border-radius: 18px;
  background: rgba(10,14,20,.9); color: #fff; font-size: 15px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
#sound-caption .ms { font-size: 20px; color: #ffd66b; flex: 0 0 auto; }
#sound-caption b { color: #ffd66b; font-weight: 600; }
/* Flash notifications: one soft flash of the whole screen. */
.flash-notif { position: absolute; inset: 0; z-index: 99; pointer-events: none; background: #fff; animation: flash-notif .45s ease-out forwards; }
@keyframes flash-notif { from { opacity: .85; } to { opacity: 0; } }

/* Magnification (magnify.js): every layer of the screen is zoomed around the same point;
   the lesson ring, the screen reader box and the captions stay at normal size on top. */
#screen.magnified > :not(#ex-layer):not(#reader-box):not(#reader-caption):not(#sound-caption):not(#mag-frame):not(.punch-hole) {
  transform-origin: var(--mag-x) var(--mag-y); scale: var(--mag-z);
}
#mag-frame { position: absolute; inset: 0; z-index: 98; pointer-events: none; border: 5px solid #ff8f00; border-radius: inherit; }

/* High contrast theme (Settings › Accessibility): black, white and yellow, with outlines. */
#screen.fx-hc { --wallpaper: #000 !important; }
#screen.fx-hc .list-card, #screen.fx-hc .dialog, #screen.fx-hc .sheet, #screen.fx-hc .popmenu { border: 2px solid #fff; }
#screen.fx-hc .btn-filled, #screen.fx-hc .btn-tonal, #screen.fx-hc .btn-outline { border: 2px solid #ffd400; }
#screen.fx-hc .hlabel, #screen.fx-hc .muted, #screen.fx-hc small { color: #fff !important; }
#screen.fx-hc a { text-decoration: underline; }

/* Simple mode (A6): every button and list row at least 56 px, a little more space. */
#screen.fx-simple button:not(.hw-btn), #screen.fx-simple [role="button"]:not(.nav-pill):not(#statusbar), #screen.fx-simple .li { min-height: 56px; }
#screen.fx-simple .icon-btn, #screen.fx-simple .qs-round { width: 56px; height: 56px; min-width: 56px; }
#screen.fx-simple .btn-text, #screen.fx-simple .btn-tonal, #screen.fx-simple .btn-filled, #screen.fx-simple .btn-outline { min-height: 56px; padding-left: 20px; padding-right: 20px; }
#screen.fx-simple .li { padding-top: 14px; padding-bottom: 14px; }
body.simple-mode .ex-card .ex-actions button { min-height: 56px; font-size: 16px; }
body.simple-mode .ex-card .ex-text { font-size: 19px; line-height: 1.45; }
body.simple-mode .ex-card .ex-steps { display: none; }
.ex-card .ex-actions .btn-text[data-ex="show"] { background: #0b57d0; color: #fff; border-radius: 28px; padding: 0 18px; font-weight: 600; }
.ex-ring.pulse { animation: ex-pulse 0.8s ease-in-out 4; }
@keyframes ex-pulse { 50% { box-shadow: 0 0 0 12px rgba(255,193,7,.55); } }
#screen.fx-simple .al-days { flex-wrap: wrap; row-gap: 8px; }
#screen.fx-simple .al-day { min-width: 56px; width: 56px; height: 56px; }
/* A notification banner is showing at the top: the caption goes under it. */
#headsup.show ~ #sound-caption { top: 150px; }