/* Shared touch ergonomics; native-only changes are scoped to .native-app. */
:root {
  --app-safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --app-safe-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  --app-safe-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
}
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; }
  .icon-button { min-width:44px;min-height:44px; }
  .mobile-nav { padding-bottom:var(--app-safe-bottom);height:calc(66px + var(--app-safe-bottom)); }
  .main { padding-bottom:calc(100px + var(--app-safe-bottom)); }
  .toast { bottom:calc(84px + var(--app-safe-bottom)); }
}
.native-app body { padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left);overscroll-behavior-y:none; }
/* The app draws edge to edge: scrolled content passes under a strip of the page
   colour, never under the clock and battery icons. Dialogs (top layer) cover it. */
.native-app body::before { content:'';position:fixed;z-index:9000;inset:0 0 auto;height:var(--app-safe-top);background:var(--paper);pointer-events:none; }
/* A display cutout on the side (tablets in landscape) keeps the menu clear of it. */
.native-app .sidebar { left:var(--app-safe-left); }
/* A long press on a control does not start a text selection, as in native apps.
   Text outside controls (card amounts, notes) and every input stay selectable. */
.native-app :is(button,summary,[role=button],[role=tab],.mobile-nav) { -webkit-user-select:none;user-select:none; }
.native-app .auth-preview,.native-app .auth-footer { display:none; }
.native-app .auth-header { padding-top:20px; }
.native-app .auth-intro { display:none; }
.native-app .auth-frame { display:block;max-width:520px;margin:0 auto; }
.native-app .auth-card { box-shadow:none; }
.native-app .prototype-bar { position:relative; }
/* Connection notices use the app's warning surface, like unsaved-change prompts. */
.native-app #native-notice { position:fixed;z-index:10000;top:calc(var(--app-safe-top) + 8px);left:12px;right:12px;margin:0;padding:12px 16px;border-radius:14px;box-shadow:0 6px 20px #191f281f;background:var(--soft-orange,#fff4e7);color:var(--ink);font-size:14px;line-height:1.5;pointer-events:none; }
.native-app dialog #native-notice { position:absolute;top:2px;left:8px;right:8px; }
.native-app dialog:has(#native-notice:not([hidden])) .sheet-handle { visibility:hidden; }
.native-app dialog .dialog-header .icon-button { min-width:48px;min-height:48px; }
/* App-only prompts sit on the page like the other white cards. */
.native-app :is(.native-draft-recovery,.reminder-offer) { display:flex;flex-wrap:wrap;gap:8px;padding:20px;margin-bottom:16px;border:0;border-radius:var(--radius,24px);background:var(--surface,#fff); }
.native-app :is(.native-draft-recovery,.reminder-offer)>:is(h2,p) { flex-basis:100%;word-break:keep-all; }
.native-app .native-draft-recovery p { margin:0 0 8px;font-size:15px;line-height:1.6; }
.native-app .reminder-offer h2 { font-size:17px;margin:0; }
.native-app .reminder-offer p { margin:0 0 8px;color:var(--muted);font-size:14px;line-height:1.6; }
.native-app :is(.native-draft-recovery,.reminder-offer) button { flex:1 1 auto;min-height:48px;margin:0; }
/* Always-visible setting notes; not repeated in the review's note list. */
.native-app .reminder-note { margin:0;color:var(--muted);font-size:13px;line-height:1.6; }
.native-app .reminder-blocked { color:var(--ink);font-weight:600; }
.native-app.keyboard-open .mobile-nav { display:none; }
.native-app.keyboard-open .toast { bottom:16px; }
@media (max-width:760px) {
  .native-app dialog[open]:not(#import-dialog) {
    position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;
    max-height:calc(100dvh - var(--app-safe-top) - 16px);
    border-radius:24px 24px 0 0;border-bottom:0;
    padding:22px 20px calc(20px + var(--app-safe-bottom));
    overflow-y:auto;scroll-padding-bottom:24px;
  }
  .native-app dialog[open]:not(#import-dialog)::before {
    content:'';display:block;width:36px;height:4px;border-radius:4px;background:#d1d1c6;margin:-10px auto 18px;
  }
  .native-app dialog .dialog-header { position:sticky;top:-22px;background:white;z-index:3;padding-top:10px;padding-bottom:10px; }
  .native-app dialog .dialog-actions .button { min-height:48px; }
}
@media (prefers-reduced-motion:no-preference) {
  .native-app dialog[open] { animation:app-sheet-in 160ms ease-out; }
  @keyframes app-sheet-in { from { transform:translateY(18px);opacity:.4; } to { transform:translateY(0);opacity:1; } }
}

.native-app #steps-overlay { top:var(--app-safe-top);bottom:var(--app-safe-bottom); }
.native-app .steps-footer { padding-bottom:calc(16px + var(--app-safe-bottom)); }
/* The app shell, month toolbar and bottom menu share the web layout (clarity.css);
   only safe areas, sheets and device prompts differ here. */

/* A real, accessible handle replaces the decorative drag affordance. */
.sheet-handle,.sheet-submit-dock { display:none; }
@media (max-width:760px) {
  .native-app dialog[open]:not(#import-dialog) { display:flex;flex-direction:column;overflow:hidden;padding-top:0; }
  .native-app dialog[open]:not(#import-dialog)::before { display:none; }
  /* The handle is a close button too, so it keeps a full 44px row; the title below
     gives back most of that height. */
  .native-app .sheet-handle { display:flex;flex-shrink:0;align-items:center;justify-content:center;min-height:44px;width:100%;border:0;background:transparent;touch-action:none;cursor:grab; }
  .native-app dialog .sheet-handle+.dialog-header { padding-top:4px; }
  .native-app .sheet-handle span { width:36px;height:4px;border-radius:4px;background:#8e9087; }
  .native-app dialog .dialog-header { position:relative;top:auto;flex-shrink:0;touch-action:none; }
  /* The scroller clips overflow; inline padding keeps the 3px+3px focus ring
     visible while the negative margin keeps the content where it was. */
  .native-app dialog > [id$="-content"] { overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:4px 8px 16px;margin-inline:-6px; }
  .native-app dialog .sheet-submit-dock:not([hidden]) { display:block;flex-shrink:0;padding:12px 0 0;background:white; }
  .native-app dialog.native-sheet form button[type=submit] { display:none; }
  .native-app dialog.sheet-dragging { animation:none;transition:none;user-select:none; }
  /* The web medal dialog pulls its sticky header over the top padding; in a sheet
     the content scrolls below the header, so that offset would cover the handle. */
  .native-app #info-dialog:has(.achievements-detail,.achievement-spotlight)>.dialog-header { position:relative;top:auto;margin-top:0;padding-top:4px; }
  /* The desktop policy width is !important; a sheet still spans the screen. */
  .native-app dialog.policy-dialog[open] { width:100% !important; }
}

.native-app .sheet-discard:not([hidden]) { flex-shrink:0;padding:12px;background:#fff5d9;border-radius:12px;margin-bottom:8px; }
.native-app .sheet-discard p { margin:0 0 8px; }
.native-app .sheet-discard button { min-height:44px;margin-right:8px; }

/* Android onboarding is one app surface, with account actions within thumb reach. */
.native-app.auth-active,.native-app body.auth-active { background:var(--paper); }
.native-app .auth-header { padding:22px 24px 8px; }
.native-app .auth-header .brand { font-size:25px; }
.native-app .auth-frame { max-width:520px;min-height:calc(100dvh - var(--app-safe-top) - 90px);padding:26px 24px calc(24px + var(--app-safe-bottom)); }
.native-app .auth-card { border:0;background:transparent;padding:0;border-radius:0; }
.native-app .auth-card:has(#auth-welcome:not([hidden])) .auth-step-row { display:none; }
.native-app #auth-welcome { display:flex;flex-direction:column; }
.native-app #auth-welcome::before { content:'';width:76px;height:76px;background:url('/brand/icon-512.png') center/contain no-repeat;margin:8px 0 28px; }
.native-app .auth-card :is(h1,h2) { font-size:32px;line-height:1.3;letter-spacing:-1.2px; }
.native-app .auth-card-copy { font-size:15px;line-height:1.7;margin:18px 0 32px; }
.native-app #google-signin { min-height:56px;border-radius:16px;font-size:16px;order:2; }
.native-app #apple-signin { margin-top:12px;order:3;min-height:56px;font-size:16px;border-radius:16px; }
.native-app .auth-google-note { order:4;font-size:13px;line-height:1.6;margin:14px 0 28px; }
.native-app #auth-welcome [data-auth=guest] { order:5;border:0;background:transparent;color:var(--ink);font-size:15px;min-height:48px; }
.native-app #auth-error { order:1; }

.native-app dialog#native-age-dialog[open] {
  inset:var(--app-safe-top) 0 0;margin:0;max-width:none;width:100%;
  height:calc(100dvh - var(--app-safe-top));max-height:none;border:0;border-radius:0;
  background:var(--paper);padding:0;display:flex;flex-direction:column;
  animation:none;overflow:hidden;
}
.native-app dialog#native-age-dialog[open]::before { display:none; }
.age-app-bar { display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:64px;flex-shrink:0;font-size:15px;font-weight:600; }
.age-back { display:grid;place-items:center;min-width:48px;min-height:48px;border-radius:50%; }
.age-content { flex:1;min-height:0;overflow-y:auto;padding:20px 24px 24px; }
.age-brand-icon { border-radius:20px;margin-bottom:24px; }
.age-eyebrow { color:var(--muted);font-size:13px;margin-bottom:12px; }
.age-content h1 { font-size:30px;line-height:1.35;letter-spacing:-1px;outline:none; }
.age-copy { font-size:15px;color:var(--muted);line-height:1.7;margin-top:18px; }
.age-choice { display:flex;align-items:center;gap:14px;min-height:84px;margin:28px 0 16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:white;font-size:16px;font-weight:600;cursor:pointer; }
.age-choice:has(input:checked) { border-color:var(--action);background:var(--accent-soft); }
.age-choice input { width:24px;height:24px;flex-shrink:0;accent-color:var(--action); }
.age-choice small { display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:6px; }
.age-detail { font-size:13px;line-height:1.7;color:var(--muted); }
.age-links { display:flex;gap:16px;flex-wrap:wrap;margin-top:12px; }
.age-links button { min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:4px; }
#native-age-error { color:#ad4234;font-size:14px;line-height:1.6;margin-top:12px; }
#native-age-document { margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:white; }
#native-age-document h2 { font-size:16px;margin:16px 0 8px; }
#native-age-document p { font-size:13px;line-height:1.7; }
.age-footer { flex-shrink:0;padding:16px 24px calc(20px + var(--app-safe-bottom));background:var(--paper);border-top:1px solid var(--line); }
.age-footer .button { min-height:56px;font-size:16px;border-radius:16px; }
.age-footer p { text-align:center;color:var(--muted);font-size:12px;margin-top:12px; }
@media (prefers-reduced-motion:no-preference) {
  .native-app #native-age-dialog[open] { animation:app-age-in 180ms ease-out; }
  @keyframes app-age-in { from { transform:translateX(24px);opacity:.6; } to { transform:translateX(0);opacity:1; } }
}