/* flow_app.css (4.495.0) - the Portal look for pages inside the Flow apps.
   Every rule hangs off html.flow-app (set by flow_app_bridge.js only when
   window.flowNative.version >= 2), so Safari and the desktop are untouched.
   Tokens mirror mobile/ios/Portal/Assets.xcassets; flow_app_tokens_test.js pins them.
   No hover rules here: page rules wrap any hover in @media (hover: hover). */
@font-face { font-family: "Flow App Inter"; font-style: normal; font-weight: 450 700; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

html.flow-app[data-app-theme="light"] {
  color-scheme: light;
  --fa-bg: #f5f8fc;
  --fa-card: #ffffff;
  --fa-ink: #0f1e34;
  --fa-ink2: #3a4a63;
  --fa-ink3: #6b7c94;
  --fa-ink4: #8fa0b6;
  --fa-line: #e7edf5;
  --fa-line2: #eef3f9;
  --fa-blue: #2563eb;
  --fa-blueD: #1b4fd1;
  --fa-blueL: #eaf1fe;
  --fa-blueL2: #f2f7ff;
  --fa-ok: #12a35a;
  --fa-okBg: #e6f6ee;
  --fa-warn: #c67f16;
  --fa-warnBg: #fcf3e0;
  --fa-due: #d64545;
  --fa-dueBg: #fdeeee;
}

html.flow-app[data-app-theme="dark"] {
  color-scheme: dark;
  --fa-bg: #0b1626;
  --fa-card: #13233a;
  --fa-ink: #e8eef7;
  --fa-ink2: #b7c4d6;
  --fa-ink3: #8a9bb3;
  --fa-ink4: #6b7c94;
  --fa-line: #22344d;
  --fa-line2: #1a2b42;
  --fa-blue: #4d8bff;
  --fa-blueD: #3b7bff;
  --fa-blueL: #16305a;
  --fa-blueL2: #12264a;
  --fa-ok: #34c27a;
  --fa-okBg: #0f3324;
  --fa-warn: #e0a03a;
  --fa-warnBg: #3a2a0c;
  --fa-due: #f06a6a;
  --fa-dueBg: #3d1717;
}

/* Base */
html.flow-app { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html.flow-app, html.flow-app body { overscroll-behavior-x: none; }   /* x only: a vertical 'none' stops the WKWebView bounce, so pull-to-refresh never fires */
html.flow-app { background: var(--fa-bg); min-height: 100%; }
html.flow-app body { background: var(--fa-bg); color: var(--fa-ink); min-height: 100vh; font-family: "Flow App Inter", Inter, -apple-system, system-ui, sans-serif; font-weight: 450; }

/* Feel fixes: no callouts or selection on controls; text stays selectable */
html.flow-app a, html.flow-app button, html.flow-app [role=button], html.flow-app .fa-row, html.flow-app nav, html.flow-app header { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.flow-app .fa-selectable, html.flow-app input, html.flow-app textarea, html.flow-app [contenteditable] { -webkit-user-select: text; user-select: text; }
html.flow-app input, html.flow-app textarea, html.flow-app select { font-size: max(16px, 1em); }

/* Card */
html.flow-app .fa-card { background: var(--fa-card); border: 1px solid var(--fa-line); border-radius: 16px; }

/* Pill */
html.flow-app .fa-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; background: var(--fa-blueL); color: var(--fa-blue); }
html.flow-app .fa-pill-ok { background: var(--fa-okBg); color: var(--fa-ok); }
html.flow-app .fa-pill-warn { background: var(--fa-warnBg); color: var(--fa-warn); }
html.flow-app .fa-pill-due { background: var(--fa-dueBg); color: var(--fa-due); }
html.flow-app .fa-pill-blue { background: var(--fa-blueL); color: var(--fa-blue); }

/* List row */
html.flow-app .fa-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; box-sizing: border-box; border-bottom: 1px solid var(--fa-line2); color: var(--fa-ink); }
html.flow-app .fa-row:last-child { border-bottom: 0; }

/* Section header */
html.flow-app .fa-section { margin: 24px 16px 8px; font-size: 13px; font-weight: 600; color: var(--fa-ink3); }

/* Empty state */
html.flow-app .fa-empty { padding: 48px 24px; text-align: center; font-size: 15px; color: var(--fa-ink3); }

/* Skeleton */
html.flow-app .fa-skel { border-radius: 8px; min-height: 14px; background: linear-gradient(90deg, var(--fa-line2) 0%, var(--fa-line) 50%, var(--fa-line2) 100%); background-size: 200% 100%; animation: fa-shimmer 1.4s ease-in-out infinite; }
@keyframes fa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { html.flow-app .fa-skel { animation: none; } }