/* =====================================================================
   Android layer (Material 3). Loaded after app.css and applied when
   <html data-os="android">. Lato stays the typeface on both platforms.
   ===================================================================== */
html[data-os="android"] {
  --m-surface: #F8F9FC;
  --m-container: #EEF0F5;
  --m-container-hi: #E6E8EF;
  --m-outline: #74777F;
  --m-outline-soft: #C4C6D0;
  --m-secondary: #DCE2F2;
  --m-on-secondary: #16253F;
  --sys-bg: var(--m-surface);
}

/* side panel switch (both apps) */
.platform { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--fill); padding: 4px; border-radius: 16px; }
.platform button { border-radius: 12px; padding: 9px 6px; font-weight: 700; font-size: 15px; color: var(--label); }
.platform button span { display: block; font-size: 12px; font-weight: 400; color: var(--label-2); }
.platform button.on { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); color: var(--tint); }

/* device: punch-hole camera, softer corners, gesture bar */
html[data-os="android"] .device { border-radius: 44px; }
html[data-os="android"] .app { border-radius: 34px; background: var(--m-surface); }
html[data-os="android"] .island { width: 14px; height: 14px; border-radius: 50%; margin-left: -7px; top: 24px; }
html[data-os="android"] .app::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: rgba(0,0,0,.55); z-index: 70; pointer-events: none; }
html[data-os="android"] .app.photo-top:not(.scrolled) .statusbar, html[data-os="android"] .app.dark-app .statusbar { color: #fff; }

/* status bar: time left, icons right, no blur */
html[data-os="android"] .statusbar { height: 44px; padding: 10px 24px 0; font-size: 14px; background: var(--m-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-os="android"] .app.photo-top .statusbar { background: transparent; }
html[data-os="android"] .app.photo-top.scrolled .statusbar { background: var(--m-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-os="android"] .view { padding-top: 44px; }
html[data-os="android"] .app.photo-top .view { padding-top: 0; }
html[data-os="android"] .sb-icons i:last-child { width: 12px; height: 17px; border-radius: 2px; }

/* navigation bar: full width, active indicator pill */
html[data-os="android"] .tabbar { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 10px 4px 26px; background: var(--m-container); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-top: 0; }
html[data-os="android"] .tab, html[data-os="android"] .tab.on { background: none; border-radius: 0; min-height: 60px; gap: 4px; padding: 0; font-size: 12px; color: #44474F; }
html[data-os="android"] .tab svg { width: 64px; height: 32px; padding: 4px 20px; border-radius: 16px; box-sizing: border-box; }
html[data-os="android"] .tab.on svg { background: var(--m-secondary); color: var(--m-on-secondary); stroke-width: 2.2; }
html[data-os="android"] .tab.on { color: #1A1C20; font-weight: 700; }
html[data-os="android"] .tab-badge { top: -4px; margin-left: 8px; }
html[data-os="android"] .screen { padding-bottom: 112px; }

/* top app bar: plain arrow, title next to it */
html[data-os="android"] .nav { justify-content: flex-start; gap: 4px; padding: 4px 4px; min-height: 56px; }
html[data-os="android"] .nav > span:last-child[style] { display: none; }
html[data-os="android"] .nav .nav-action, html[data-os="android"] .nav > .nav-btn:last-child:not(:first-child) { margin-left: auto; }
html[data-os="android"] .nav-btn { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; width: 48px; height: 48px; color: #1A1C20; }
html[data-os="android"] .nav-title { font-size: 20px; font-weight: 400; color: #1A1C20; margin-left: 4px; }
html[data-os="android"] .photo-nav .nav-btn { background: rgba(255,255,255,.92); color: #1A1C20; width: 44px; height: 44px; margin: 0 4px; }
html[data-os="android"] .scanner .nav-btn { background: rgba(255,255,255,.18); color: #fff; }
html[data-os="android"] .big-title { font-size: 32px; }
html[data-os="android"] .title-row { padding: 12px 16px 14px; }

/* primary add action becomes a FAB */
html[data-os="android"] .title-row .sq-btn { position: fixed; right: 16px; bottom: 104px; width: 56px; height: 56px; border-radius: 16px; background: var(--m-secondary); color: var(--m-on-secondary); z-index: 26; box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12); }
html[data-os="android"] .sq-btn svg { width: 24px; height: 24px; }
html[data-os="android"] .send-row .sq-btn { position: static; border-radius: 50%; width: 48px; height: 48px; background: var(--tint); color: #fff; box-shadow: none; }

/* cards and lists: Material shape scale */
html[data-os="android"] .group, html[data-os="android"] .lines, html[data-os="android"] .steps, html[data-os="android"] .notice, html[data-os="android"] .tech,
html[data-os="android"] .note-card, html[data-os="android"] .bars, html[data-os="android"] .stat, html[data-os="android"] .tl, html[data-os="android"] .event,
html[data-os="android"] .faq, html[data-os="android"] .wifi, html[data-os="android"] .due, html[data-os="android"] .tile, html[data-os="android"] .act,
html[data-os="android"] .space-card, html[data-os="android"] .job-hero, html[data-os="android"] .progress-card, html[data-os="android"] .mfa-card, html[data-os="android"] .plan-card { border-radius: 16px; }
html[data-os="android"] .group, html[data-os="android"] .lines, html[data-os="android"] .steps, html[data-os="android"] .tile:not(.t-navy):not(.t-photo), html[data-os="android"] .act,
html[data-os="android"] .note-card, html[data-os="android"] .stat, html[data-os="android"] .notice, html[data-os="android"] .tech, html[data-os="android"] .faq, html[data-os="android"] .wifi,
html[data-os="android"] .space-card, html[data-os="android"] .progress-card, html[data-os="android"] .plan-card, html[data-os="android"] .tl, html[data-os="android"] .event, html[data-os="android"] .bars { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03); }
html[data-os="android"] .row .ico { border-radius: 50%; background: var(--m-secondary); color: var(--m-on-secondary); width: 40px; height: 40px; }
html[data-os="android"] .row .ico svg { width: 20px; height: 20px; }
html[data-os="android"] .row .ico.red { background: #FFDAD6; color: #93000A; }
html[data-os="android"] .row + .row::before, html[data-os="android"] .row + label.row::before { left: 16px; background: var(--m-outline-soft); }
html[data-os="android"] .row .chev { display: none; }
html[data-os="android"] .act svg { border-radius: 50%; background: var(--m-secondary); color: var(--m-on-secondary); }
html[data-os="android"] .room-card, html[data-os="android"] .t-photo, html[data-os="android"] .t-navy, html[data-os="android"] .day { border-radius: 16px; }
html[data-os="android"] .section-h h2 { font-size: 18px; }

/* buttons: Material filled, tonal, text */
html[data-os="android"] .btn { min-height: 48px; font-size: 15px; letter-spacing: .01em; }
html[data-os="android"] .btn.secondary { background: var(--m-secondary); color: var(--m-on-secondary); }
html[data-os="android"] .btn.quiet { min-height: 40px; }
html[data-os="android"] .hb-btn, html[data-os="android"] .pill { background: rgba(255,255,255,.92); color: #1A1C20; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html[data-os="android"] .sso-btn { box-shadow: inset 0 0 0 1px var(--m-outline); background: #fff; }
html[data-os="android"] .sso.on-photo .sso-btn { box-shadow: none; }

/* segmented buttons: outlined, check on the selected one */
html[data-os="android"] .seg { background: none; border: 1px solid var(--m-outline); border-radius: 20px; padding: 0; overflow: hidden; }
html[data-os="android"] .seg button { border-radius: 0; padding: 9px 0; font-size: 14px; color: #1A1C20; }
html[data-os="android"] .seg button + button { border-left: 1px solid var(--m-outline); }
html[data-os="android"] .seg button.on { background: var(--m-secondary); color: var(--m-on-secondary); box-shadow: none; }
html[data-os="android"] .seg button.on::before { content: "✓ "; }

/* chips: outlined, filled with a check when selected */
html[data-os="android"] .pick-chip, html[data-os="android"] .person, html[data-os="android"] .cat, html[data-os="android"] .qr-row button { border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--m-outline-soft); }
html[data-os="android"] .pick-chip.on, html[data-os="android"] .person.on, html[data-os="android"] .chips .person.on { background: var(--m-secondary); color: var(--m-on-secondary); box-shadow: none; }
html[data-os="android"] .pick-chip.on::before { content: "✓ "; }
html[data-os="android"] .cat.on { background: var(--m-secondary); color: var(--m-on-secondary); box-shadow: none; }
html[data-os="android"] .cat.on svg { color: var(--m-on-secondary); }
html[data-os="android"] .chip { border-radius: 8px; }
html[data-os="android"] .pm { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--m-outline-soft); }
html[data-os="android"] .pm.on { box-shadow: inset 0 0 0 2px var(--tint); }

/* text fields: filled with an underline indicator */
html[data-os="android"] .field { border-radius: 4px 4px 0 0; background: var(--m-container-hi) !important; box-shadow: inset 0 -1px 0 var(--m-outline); }
html[data-os="android"] .field:focus { box-shadow: inset 0 -2px 0 var(--tint); }
html[data-os="android"] .phone-field, html[data-os="android"] .phone-field.small { border-radius: 4px 4px 0 0; background: var(--m-container-hi); box-shadow: inset 0 -1px 0 var(--m-outline); }
html[data-os="android"] .label { margin-left: 2px; color: #44474F; }

/* switches: Material 3 */
html[data-os="android"] input.switch { width: 52px; height: 32px; background: var(--m-container-hi); box-shadow: inset 0 0 0 2px var(--m-outline); }
html[data-os="android"] input.switch::after { width: 16px; height: 16px; top: 8px; left: 8px; background: var(--m-outline); box-shadow: none; }
html[data-os="android"] input.switch:checked { background: var(--tint); box-shadow: none; }
html[data-os="android"] input.switch:checked::after { width: 24px; height: 24px; top: 4px; left: 4px; transform: translateX(20px); background: #fff; }

/* bottom sheets: attached to the edge */
html[data-os="android"] .sheet { left: 0; right: 0; bottom: 0; border-radius: 28px 28px 0 0; background: #F7F8FB; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -2px 12px rgba(0,0,0,.12); }
html[data-os="android"] .grab { width: 32px; height: 4px; background: var(--m-outline); margin-top: 14px; }
html[data-os="android"] .sheet-head { justify-content: flex-start; padding: 14px 64px 8px 24px; }
html[data-os="android"] .sheet-head h3 { font-size: 22px; font-weight: 400; text-align: left; }
html[data-os="android"] .sheet-head .nav-btn { background: none; }
html[data-os="android"] .sheet-photo { border-radius: 20px; margin: 14px 12px 0; }
html[data-os="android"] .sheet-foot { padding-bottom: 30px; }

/* snackbar instead of a top banner */
html[data-os="android"] .toast { top: auto; bottom: 100px; left: 12px; right: 12px; border-radius: 8px; background: #2F3036; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 16px; transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; z-index: 65; }
html[data-os="android"] .toast.on { transform: none; opacity: 1; }
html[data-os="android"] .toast .ti { display: none; }
html[data-os="android"] .toast small { color: rgba(255,255,255,.75); }

/* misc */
html[data-os="android"] .keypad button { border-radius: 8px; box-shadow: none; background: #fff; }
html[data-os="android"] .otp span { border-radius: 8px; }
html[data-os="android"] .composer { bottom: 98px; }
html[data-os="android"] .msg p { border-radius: 18px; }
html[data-os="android"] .msg.me p { border-bottom-right-radius: 4px; }
html[data-os="android"] .msg:not(.me) p { border-bottom-left-radius: 4px; }

/* Android status bar icons */
html[data-os="android"] .sb-ios { display: none; }
html[data-os="android"] .sb-android { display: flex; gap: 5px; align-items: center; }
html[data-os="android"] .sb-android svg:nth-child(1) { width: 15px; height: 12px; }
html[data-os="android"] .sb-android svg:nth-child(2) { width: 12px; height: 12px; }
html[data-os="android"] .sb-android svg:nth-child(3) { width: 7px; height: 13px; }
html[data-os="android"] .statusbar { padding: 6px 26px 0 28px; }
html[data-os="android"] .statusbar .sb-time { font-family: Lato, system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0; }
html[data-os="android"] .island::after { display: none; }