/* Card Wallet v1.2.1 — forced theme overrides.
 *
 * The bundled web app themes itself from the `prefers-color-scheme` media
 * query (light/dark :root tokens in the bundle CSS). The native shell used
 * to be light-only, so the app always rendered light. theme.js sets
 * `data-cw-theme` on <html> from the persisted choice (localStorage
 * "cw_theme"), and these rules — copied VERBATIM from the bundle's own
 * light/dark :root token blocks, only re-scoped — make the chosen theme win
 * over the system media query: `html[data-cw-theme=...]` (0,1,1) beats the
 * bundle's `:root` (0,1,0) inside its media query. Pastel category palette
 * and layout are unchanged.
 */
html[data-cw-theme="light"]{--twsa-safe-area-inset-top:env(safe-area-inset-top);--twsa-safe-area-inset-right:env(safe-area-inset-right);--twsa-safe-area-inset-bottom:env(safe-area-inset-bottom);--twsa-safe-area-inset-left:env(safe-area-inset-left);--buncss-light:initial;--buncss-dark: ;--buncss-light:initial;--buncss-dark: ;color-scheme:light dark;--radius:20px;--accent:#0d9488;--refresh-hz:60;--bg:#e9eef6;--text:#131722;--dim:#5b6474;--glass:#ffffff78;--glass-strong:#ffffffb3;--tab-glass:#ffffff85;--glass-border:#ffffffb8;--glass-shadow:0 18px 42px #1f2d5029,0 2px 8px #1f2d5012;--sheen-top:#ffffffbf;--sheen-mid:#ffffff38;--sheen-pool:#ffffff61;--field-bg:#ffffff73;--wash:#ffffff1f;--blob-1:#2dd4bf8c;--blob-2:#fb71856b;--blob-3:#38bdf87a;--blob-4:#f59e0b5c;--surface:var(--glass);--border:var(--glass-border);--space-surface:var(--glass);--space-surface-alt:var(--glass-strong);--space-muted:var(--dim);--space-border:var(--glass-border);--space-accent:var(--accent);color-scheme:light}
html[data-cw-theme="dark"]{--buncss-light: ;--buncss-dark:initial;--buncss-light: ;--buncss-dark:initial;--accent:#2dd4bf;--bg:#0b0f16;--text:#eef2f7;--dim:#98a2b3;--glass:#161c2a7a;--glass-strong:#1a2132b8;--tab-glass:#ffffff1a;--glass-border:#ffffff29;--glass-shadow:0 18px 44px #00000080,0 2px 10px #00000059;--sheen-top:#ffffff47;--sheen-mid:#ffffff14;--sheen-pool:#ffffff1f;--field-bg:#ffffff0d;--wash:#ffffff0d;--blob-1:#14b8a661;--blob-2:#e11d484d;--blob-3:#0284c757;--blob-4:#d9770642;color-scheme:dark}

/* Dark theme — darker smoked frosted glass for the category cards.
 * (Light keeps the milkier white frost from pastel.css.) The pastel tints
 * themselves are unchanged; a dark veil + dimmer sheen smoke them. */
html[data-cw-theme="dark"] .glass-tint{
  background:
    linear-gradient(135deg, rgba(8, 11, 18, 0.30), rgba(8, 11, 18, 0.30)),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 38%),
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, var(--tint-a), var(--tint-b));
  -webkit-backdrop-filter: blur(16px) saturate(1.3) brightness(0.94);
  backdrop-filter: blur(16px) saturate(1.3) brightness(0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    var(--glass-shadow),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.12),
    inset 0 -22px 36px -24px rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* v1.2.2 — shield removed from the header (user request). The header keeps
 * only the theme toggle (native overlay) and the profile "P" button. The
 * "Backup and restore" button was the shield's only job, so hiding it also
 * makes its Backup & Restore sheet unreachable from the header. (Drive
 * auto-backup/restore still runs in the background via the native bridge.)
 * CORRECTION (v1.2.3): the shield was NOT the sheet's only entry point —
 * the Account sheet opened from the profile "P" avatar already contains
 * the same entry ("Open backup and restore"). Manual Export/Import was
 * reachable via the profile all along; v1.2.3 just makes it explicit. */
button[aria-label="Backup and restore"]{display:none!important}

/* v1.2.3 — Backup & Restore lives under the profile section (user request).
 * Tapping the profile "P" avatar opens the bundle's Account sheet, which
 * already contains the entry ("Open backup and restore" button — a
 * different aria-label from the hidden header shield, so this rule keeps
 * it visible). theme.js relabels it "Backup & Restore" and fills the
 * sheet with the real signed-in email + Drive backup status. Long email
 * addresses may wrap in the Account sheet heading. */
button[aria-label="Open backup and restore"]{display:flex!important}
[role="dialog"][aria-label="Account"] .font-display{overflow-wrap:anywhere}

/* v1.2.2 — swipe to change category, OPPO ColorOS 17 style. Springy /
 * elastic easing, transform/opacity ONLY on the compositor (no layout
 * properties animated). The selected pill's fill is an inline gradient
 * owned by the bundle, so it changes with a soft shadow/color transition
 * while the tab strip glides the newly selected pill into view
 * (scrollIntoView smooth, theme.js) and the card list slides+fades in
 * the swipe direction. Tapping a tab is unchanged. */
#home-tabs .tab-pill{transition:box-shadow .35s cubic-bezier(.22,1.4,.36,1),color .3s ease,transform .3s cubic-bezier(.22,1.4,.36,1)}
@keyframes cw-slide-in-left{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes cw-slide-in-right{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
.cw-swipe-left{animation:cw-slide-in-left .38s cubic-bezier(.22,1.35,.36,1) both}
.cw-swipe-right{animation:cw-slide-in-right .38s cubic-bezier(.22,1.35,.36,1) both}
@media (prefers-reduced-motion: reduce){.cw-swipe-left,.cw-swipe-right{animation:none}}

/* v1.2.5 — card photos auto-fit their real aspect ratio (user request).
 * The bundle renders every card face in a fixed 1.586:1 frame with
 * object-fit:cover, which crops portrait photos (e.g. a voter ID) top
 * and bottom. theme.js now sizes each frame from its photo's natural
 * dimensions; these rules make sure the photo itself is never cropped or
 * stretched inside the frame: object-fit:contain shows the whole photo,
 * and the flip faces get a frosted background behind the letterbox bars
 * of the wider face. A frame with no photo keeps the bundle's drawn
 * placeholder at 1.586:1. Works in light and dark themes (the face
 * background uses the theme's --field-bg token). */
#home-card-list .liquid-frame > img,
.liquid-frame.pressable > img,
.flip-face img{object-fit:contain!important}
.flip-face{background:var(--field-bg)}