/* Mobile adapter: preserve the existing consent and QR state machines. */
:root {
  --bg-app:var(--hp-color-canvas); --bg-card:var(--hp-color-surface);
  --text-main:var(--hp-color-text); --text-muted:var(--hp-color-text-muted);
  --primary:var(--hp-color-primary); --primary-hover:var(--hp-color-primary-hover); --primary-light:var(--hp-color-selected);
  --accent:var(--hp-color-primary); --border:var(--hp-color-border-subtle);
  --radius-card:var(--hp-radius-card); --radius-btn:var(--hp-radius-control);
  --success:var(--hp-color-success); --success-bg:var(--hp-color-success-bg);
  --warning:var(--hp-color-warning); --warning-bg:var(--hp-color-warning-bg);
  --danger:var(--hp-color-danger); --danger-bg:var(--hp-color-danger-bg);
}
body { font-family:var(--hp-font); background:var(--hp-color-selected); display:block; }
.mobile-shell { min-height:100dvh; border:0; border-radius:0; box-shadow:var(--hp-shadow-card); overflow:clip; }
.mobile-header { padding:16px; box-shadow:none; }
.header-top { flex-wrap:wrap; gap:12px; }
.header-top > div:last-child { flex-wrap:wrap; }
.brand span:first-child { color:var(--hp-color-primary-active); }
.patient-info { font-size:12px; line-height:1.7; }
.mobile-content { overflow:visible; padding:20px 16px calc(96px + env(safe-area-inset-bottom)); }
.card { border-radius:var(--hp-radius-card); box-shadow:var(--hp-shadow-card); }
.mediq-hero-card { background:var(--hp-color-selected); border:1px solid var(--hp-color-border-subtle); padding:24px 20px; box-shadow:none; }
.mediq-hero-card::after { display:none; }
.mediq-hero-tag { color:var(--hp-color-primary-active); background:none; padding:0; letter-spacing:0; }
.mediq-hero-title { color:var(--hp-color-text); font-size:26px; line-height:1.4; letter-spacing:-.04em; }
.mediq-hero-desc { color:var(--hp-color-text-muted); font-size:14px; line-height:1.7; }
.mediq-hero-btn { width:100%; margin-top:20px; }
.mobile-shell :is(button,.saas-switch-btn), .auth-card button { min-height:44px; }
.btn, .btn-sm { font:600 14px var(--hp-font); border-radius:var(--hp-radius-control); }
.btn-primary, .auth-btn-primary { background:var(--hp-color-primary); color:var(--hp-white); }
.btn-primary:hover, .auth-btn-primary:hover { background:var(--hp-color-primary-hover); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
:is(button,a,input,select):focus-visible { outline:3px solid var(--hp-color-focus); outline-offset:3px; }
input, select, textarea { font-size:16px; }
.section-title { font-size:18px; }
.section-sub { font-size:13px; line-height:1.7; }
.kind-chip, .filter-pill { min-height:44px; }
.kind-chip.active, .filter-pill.active { background:var(--hp-color-selected); color:var(--hp-color-primary-active); border-color:var(--hp-color-primary); }
.mobile-nav { border-top:1px solid var(--hp-color-border-subtle); box-shadow:none; background:var(--hp-color-surface); }
.nav-item { min-height:60px; font-size:11px; }
.nav-item.active { color:var(--hp-color-primary-active); background:var(--hp-color-selected); border-radius:8px; }
.nav-item .icon { font-size:20px; }
.auth-overlay { background:var(--hp-color-canvas); overflow:auto; }
.auth-overlay.unlocked { display:none; }
.auth-card { border-radius:var(--hp-radius-dialog); box-shadow:var(--hp-shadow-card); }
.auth-title { color:var(--hp-color-primary-active); }
.auth-desc { line-height:1.7; }
.auth-shield-ring, .auth-icon-wrap::before { animation:none; }
.auth-grid-options { gap:8px; }
.auth-opt-btn { font-size:11px; }
.qr-box-wrap { background:#fff; max-width:100%; }
.qr-box-wrap canvas, .qr-box-wrap img { max-width:100%; height:auto; }
.cine-modal-content { max-height:calc(100dvh - 28px); overflow:auto; }
.mobile-confirm-dialog { max-width:calc(100vw - 32px); }
@media(min-width:480px) { .mobile-shell { height:auto; min-height:100dvh; margin:0 auto; } }
@media(max-width:360px) {
  .mobile-content { padding-left:12px; padding-right:12px; }
  .mediq-hero-title { font-size:23px; }
  .auth-card { padding:20px 16px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Patient wallet: mockup-led hierarchy; server state remains authoritative. */
:root {
  --primary:#3566b8; --primary-hover:#2a5499;
  --hp-color-primary:#3566b8; --hp-color-primary-hover:#2a5499;
}
body { background:#edf0f4; color:#192638; }
.mobile-shell { max-width:480px; background:#fafbfd; }
.mobile-header { padding:16px 24px 8px; background:#fafbfd; border:0; }
.mobile-header .header-top { flex-wrap:nowrap; gap:8px; }
.mobile-header .mediq-logo { transform:scale(.8); transform-origin:left center; margin-right:-28px; }
.wallet-profile-link { border:0; background:none; color:#192638; font:inherit; font-size:13px; min-height:48px; padding:8px; }
.mobile-content { padding:20px 24px 100px; }
.wallet-greeting { font-size:29px; line-height:1.35; letter-spacing:-1.1px; font-weight:700; margin:0 0 24px; }
.mediq-hero-card { position:relative; padding:22px 20px 20px; background:#fff; border:1px solid #91afe0; border-radius:18px; box-shadow:0 10px 28px #3566b808; margin-bottom:28px; overflow:hidden; }
.mediq-hero-tag { position:relative; font-size:13px; color:#596779; }
.mediq-hero-title { position:relative; max-width:75%; font-size:29px; line-height:1.25; letter-spacing:-.8px; margin:20px 0 8px; overflow-wrap:anywhere; }
.mediq-hero-desc { position:relative; max-width:75%; font-size:13px; line-height:1.6; color:#667386; }
.wallet-status { position:relative; display:inline-block; background:#f0f5fc; border-radius:10px; color:#3566b8; padding:12px; font-size:14px; font-weight:600; margin:20px 0 14px; }
.mobile-shell .btn { min-height:48px; border-radius:12px; font-size:15px; box-shadow:none; }
.mediq-hero-btn { position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; min-height:52px; padding:0 18px; margin-top:0; }
.wallet-scan-stack { position:absolute; right:20px; top:66px; width:64px; height:80px; pointer-events:none; }
.wallet-scan-stack i { position:absolute; width:58px; height:44px; border-radius:9px; background:#adc2ee; border:1px solid #fff; transform:rotate(-30deg) skewX(22deg); top:30px; }
.wallet-scan-stack i:nth-child(2) { top:16px; background:#bed0f4; }
.wallet-scan-stack i:nth-child(3) { top:2px; background:#d2def8; color:#3566b8; display:grid; place-items:center; font-size:14px; font-weight:700; }
.section-title { font-size:19px; letter-spacing:-.5px; }
.wallet-record { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid #e5eaf0; }
.wallet-record-icon { flex:0 0 52px; height:60px; display:grid; place-items:center; border-radius:12px; background:#eaf0f8; color:#536783; font-size:16px; font-weight:650; }
.wallet-record-copy { flex:1; min-width:0; }
.wallet-record-copy strong { display:block; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.wallet-record-copy span { display:block; color:#758193; font-size:12px; line-height:1.7; }
.wallet-record-open { flex:0 0 48px; height:48px; border:0; background:none; color:#64748b; font-size:30px; cursor:pointer; }
.wallet-help { width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 0; border:0; background:none; font:inherit; font-size:15px; color:#526277; text-align:left; }
.wallet-extra,.wallet-disclosure { font-size:12px; color:#788495; }
.wallet-extra summary,.wallet-disclosure summary { padding:12px 0; cursor:pointer; min-height:44px; }
.kind-chips-bar { flex-wrap:wrap; }
.mobile-nav { max-width:480px; padding:8px 10px max(8px,env(safe-area-inset-bottom)); background:#fff; }
.mobile-nav .nav-item { flex:1; min-width:0; }
.mobile-nav .icon { height:24px; }
.nav-item.active { background:none; color:#3566b8; }
.wallet-profile { padding:28px 24px 120px; }
.wallet-profile h2 { font-size:28px; }
.wallet-profile>p { margin:18px 0; color:#667386; }
.wallet-profile .btn { width:100%; margin-top:12px; }
.home-share-widget { margin-top:24px; background:#f5f7fa; box-shadow:none; }
.wizard-box-title { font-size:28px; line-height:1.3; letter-spacing:-.8px; margin:24px 0 12px; }
.wizard-box-desc { font-size:15px; line-height:1.6; }
.summary-card { background:transparent; border:0; border-radius:0; padding:0; margin:24px 0; }
.summary-row { padding:17px 0; border-bottom:1px solid #e2e7ee; gap:16px; align-items:flex-start; }
.summary-row>span { color:#667386; flex:0 0 85px; }
.summary-row strong { text-align:right; overflow-wrap:anywhere; font-size:15px; font-weight:550; }
.wallet-consent-note { margin:24px 0; font-size:15px; line-height:1.6; }
.wallet-consent-note small { color:#667386; font-size:12px; }
.qr-container { background:transparent; border:0; box-shadow:none; padding:12px 0; }
.qr-container h2 { font-size:28px; line-height:1.3; letter-spacing:-.8px; margin:12px 0 24px; text-align:left; }
.qr-box-wrap { width:min(270px,100%); padding:24px; border:1px solid #d4dce7; border-radius:18px; margin:28px auto; box-shadow:none; }
.qr-countdown { font-size:23px; font-variant-numeric:tabular-nums; color:#3566b8; }
.wallet-qr-expiry { font-size:13px; color:#667386; line-height:1.6; text-align:center; }
.qr-spec-row { font-size:14px; padding:12px 0; gap:12px; }
.qr-spec-row strong { overflow-wrap:anywhere; }
#btn-revoke-qr { background:white; color:#b83d47; border:1px solid #e6cdd2; }
.wallet-record-open:focus-visible,.wallet-profile-link:focus-visible,summary:focus-visible { outline:3px solid #3566b8; outline-offset:3px; }
@media(max-width:360px) {
 .mobile-content { padding:20px 18px 100px; }
 .mobile-header { padding:12px 18px 8px; }
 .wallet-greeting { font-size:26px; }
 .mediq-hero-card { padding:20px 16px; }
 .wallet-scan-stack { opacity:.5; right:14px; }
}

/* Preserve readable content above gesture bars and inside landscape cutouts. */
.mobile-header {
 padding-top:calc(16px + env(safe-area-inset-top,0px));
 padding-left:max(18px,env(safe-area-inset-left,0px));
 padding-right:max(18px,env(safe-area-inset-right,0px));
}
.mobile-content {
 min-width:0;
 padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));
 padding-left:max(24px,env(safe-area-inset-left,0px));
 padding-right:max(24px,env(safe-area-inset-right,0px));
 scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));
}
.mobile-nav {
 padding-left:max(10px,env(safe-area-inset-left,0px));
 padding-right:max(10px,env(safe-area-inset-right,0px));
}
.wallet-profile {padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));}
.mobile-shell :is(input,select,textarea) {max-width:100%;min-width:0;}
@media(max-width:360px) {
 .mobile-content {padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));}
}