/*
 * Styles for the web app shell: the react-native-web reset, the desktop
 * phone frame, and the Add to Home Screen sheet.
 *
 * EXTERNAL, NOT INLINE, ON PURPOSE. These used to be <style> blocks in
 * index.html, which would have forced style-src 'unsafe-inline' in the CSP —
 * and an unsafe-inline style policy hands back a good part of what the CSP
 * was added to prevent. As a file it is covered by style-src 'self'.
 *
 * Linked from <head>, so it is render-blocking and there is no flash of
 * unstyled app before the frame applies.
 */

/* ---- expo-reset ---- */
/* These styles make the body full-height */
html,
body {
  height: 100%;
}
/* These styles disable body scrolling if you are using <ScrollView> */
body {
  overflow: hidden;
}
/* These styles make the root element full-height */
#root {
  display: flex;
  height: 100%;
  flex: 1;
}

/* ---- handitask-frame ---- */
html,
body {
  margin: 0;
  background-color: #fbf7f0;
  /* Stops iOS Safari bouncing the page behind the app frame. */
  overscroll-behavior: none;
}

#root {
  flex-direction: column;
  background-color: #fbf7f0;
}

/*
  Desktop and tablet only. `height: 100vh` rather than `height: 100%` is
  load-bearing: react-native-web maps RN's `flex: 1` screens onto a root
  that must resolve to a real height, and an auto-height root collapses
  every full-screen layout in the app.

  Note this is a DESKTOP AFFORDANCE. An iPhone is below the breakpoint, so
  the frame never engages there — in Safari or installed to the Home
  Screen.
*/
@media (min-width: 480px) {
  body {
    background-color: #0f2419;
  }

  #root {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(15, 36, 25, 0.9),
      0 18px 50px rgba(0, 0, 0, 0.35);
  }

  /*
    react-native-web renders <Modal> into its own div appended to <body>,
    NOT inside #root, so the frame above does not contain it — the payment
    sheet spilled the full width of the monitor while the app behind it
    stayed 480px.

    Those portals contain `position: fixed` children, which normally
    resolve against the viewport and so ignore any width set on an
    ancestor. `transform: translateZ(0)` is the fix: a transformed element
    becomes the containing block for fixed-position descendants, so the
    modal resolves against this column instead.

    Sized and placed to match #root exactly. These wrappers are 0-height
    when no modal is open, so this is inert the rest of the time.

    #ht-install is excluded: it is our own sheet, not an RN portal, and it
    positions itself.
  */
  body > div:not(#root):not(#ht-install) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 480px;
    margin-left: -240px;
    transform: translateZ(0);
  }
}

/* ---- handitask-install ---- */
/*
  The Add to Home Screen sheet. Plain DOM rather than a React component so
  it needs no shared file, cannot reach the native bundle, and can show
  before the app bundle has finished booting.

  Brand fonts first with a system fallback: the app registers Fraunces and
  Plus Jakarta at runtime, and this sheet may paint before that lands.
*/
#ht-install {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: none;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  font-family: 'PlusJakartaSans_400Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#ht-install[data-visible='true'] {
  display: block;
}
#ht-install .ht-card {
  max-width: 456px;
  margin: 0 auto;
  background: #fbf7f0;
  border: 1px solid rgba(15, 36, 25, 0.12);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15, 36, 25, 0.28);
  padding: 20px 20px 16px;
  animation: ht-rise 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ht-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#ht-install .ht-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#ht-install .ht-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  background: #e9a23b;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ht-install .ht-title {
  font-family: 'Fraunces_600SemiBold', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.25;
  color: #1a3a2e;
  margin: 2px 0 0;
}
#ht-install .ht-sub {
  font-size: 13px;
  line-height: 1.45;
  color: #5a4a3a;
  margin: 6px 0 0;
}
#ht-install .ht-close {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8b6f47;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
#ht-install ol {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
#ht-install li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #1a3a2e;
}
#ht-install li span.n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(233, 162, 59, 0.22);
  color: #1a3a2e;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ht-install .ht-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(233, 162, 59, 0.14);
  border: 1px solid rgba(233, 162, 59, 0.3);
  font-size: 12.5px;
  line-height: 1.45;
  color: #5a4a3a;
  display: none;
}
#ht-install[data-browser='other'] .ht-note {
  display: block;
}
#ht-install .ht-dismiss {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1a3a2e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
