/* Shared site chrome: the sticky bar at the top of every page and the footer
   at the bottom of it.

   The MARKUP that uses this lives in scripts/build_chrome.py, which stamps it
   between the CHROME markers in each page. Editing the header or footer here
   is only half the job; the other half is in that script.

   Every selector is class-based and `lm-` prefixed, and this file is linked
   AFTER each page's own <style> block. Both matter: the legal pages style
   `header` and `footer` by element, so `.lm-appbar` (0,1,0) has to beat
   `header` (0,0,1), and where specificity ties, load order decides. A page
   whose own stylesheet came last would quietly reclaim its footer.

   Fonts are the pages' own. index.html loads Nunito and the others load Nunito
   plus Nunito Sans, so the chrome asks for Nunito by name and inherits nothing
   it cannot count on. */

/* ── The bar ──────────────────────────────────────────────────────────── */

/* `sticky`, not `fixed`: it takes flow space as the first thing in the body,
   so nothing sits underneath it and no page needs compensating padding. */
.lm-appbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #8B5ED2;
  box-shadow: 0 2px 14px rgba(45, 10, 78, 0.35);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand tag links";
  align-items: center;
  gap: 12px;
  /* Vertical padding only needs to clear Apple's own minimum around their
     badge — 1/4 badge height normally, but their guidelines explicitly allow
     1/10 in a constrained layout like a sticky nav bar, i.e. 4px for the 40px
     App Store badge. 6px sits just above that floor. */
  padding: 6px 20px;
  overflow: visible;
  text-align: left;
  font-family: 'Nunito', sans-serif;
}

/* The legal pages give `header` a radial-gradient overlay through
   `header::before`, and there are now two <header> elements on those pages:
   this bar and the page's own title banner. Absolutely positioned with no
   z-index, that overlay paints ON TOP of the bar's logo and buttons, because
   they are unpositioned children. Cancelled rather than restyled: the banner
   below still wants it. */
.lm-appbar::before { content: none; }

.lm-brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}

/* A file rather than a data URI. It used to be ~92KB of base64 inlined in
   index.html, which was affordable while one page carried it and is not once
   six do. As a file it is fetched once and cached for the whole site.
   The 22% radius is the mark's own squircle, so it stays the brand's shape
   rather than becoming a circle. */
.lm-logo {
  width: 32px;
  height: 32px;
  border-radius: 22%;
  display: block;
  flex-shrink: 0;
}

/* The centre. On index.html this is the h1; everywhere else it is a link
   home, so that each page keeps its own h1 for its own subject. Both get this
   class, which is why the link has to be told not to underline. */
.lm-tag {
  grid-area: tag;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2.1vw, 20px);
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin: 0;
}

a.lm-tag:hover { color: #F3E8FF; }

.lm-nav {
  grid-area: links;
  justify-self: end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
  gap: 10px;
}

/* ── Anchor targets ───────────────────────────────────────────────────── */

/* The bar is sticky, so it occupies the top of the viewport permanently. An
   anchor jump puts its target's top edge at the top of the viewport, which is
   underneath the bar: you land on a section with its heading hidden and the
   second paragraph at the top of the screen.

   `[id]` rather than a list of classes, because it is the BAR that causes
   this, and the bar is on every page. Anything that can be jumped to needs
   the offset, and enumerating them per page is how one gets missed. */
[id] { scroll-margin-top: 76px; }

/* The bar is two rows here, so it reaches further down. */
@media (max-width: 780px) {
  [id] { scroll-margin-top: 110px; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

/* Used by the bar on every page and by index.html's closing purple band, so
   the top and bottom calls to action are literally the same control rather
   than two that drift apart.

   Pills rather than soft rectangles, matching the app's own buttons on
   mobile/app/(auth)/welcome.tsx: somebody arriving here and then opening the
   app should not meet two different button languages. */
.lm-btn,
.lm-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}

.lm-btn {
  background: #fff;
  color: #6B3FAF;
  gap: 9px;
}

.lm-btn:hover { background: #F3E8FF; }

/* Secondary: the browser route matters, but most visitors should install the
   app, so it reads as the alternative rather than the equal. */
.lm-btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.lm-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.lm-btn:active,
.lm-btn-ghost:active { transform: scale(0.97); }

/* Full size, for a band rather than a strip. */
.lm-btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}

/* Official store badges (see build_chrome.py) — each is a complete button
   already, background and label included, so it is not wrapped in .lm-btn.
   Only height is set; width follows each badge's own aspect ratio.

   The two files are not cropped the same way, so the same CSS height does
   NOT read as the same size: Apple's SVG is trimmed tight to the badge edge,
   but Google's PNG bakes in its own clear-space padding — only ~67% of its
   canvas is the visible mark (confirmed by pixel bounding box). Matching
   declared height therefore made Apple's badge look larger. badge-google-play
   is sized up by 1/0.672 so the visible marks come out level; badge-app-store
   stays at 40px, Apple's own stated onscreen minimum. */
.lm-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lm-badge img {
  display: block;
  width: auto;
}

.lm-badge-apple img { height: 40px; }
.lm-badge-gplay img { height: 60px; }

.lm-badge:hover { opacity: 0.85; }

.lm-badge-lg.lm-badge-apple img { height: 54px; }
.lm-badge-lg.lm-badge-gplay img { height: 80px; }

/* ── The footer ───────────────────────────────────────────────────────── */

.lm-footer {
  background: #3A0A52;
  padding: 30px 32px;
  text-align: center;
  border-top: 0;
  font-family: 'Nunito', sans-serif;
}

.lm-footer p {
  font-size: 13px;
  color: #9B6CB8;
  line-height: 1.7;
  margin: 0 0 6px;
  max-width: none;
}

.lm-footer p:last-child { margin-bottom: 0; }

.lm-footer-links {
  margin-bottom: 14px !important;
}

/* Generous tap targets: on a phone these three sit on one line and are the
   only links in the footer. */
.lm-footer-links a {
  display: inline-block;
  padding: 4px 2px;
  color: #D9A8F0;
  font-weight: 700;
  text-decoration: none;
}

.lm-footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* font-size is stated because the legal pages set `footer span { 16px }` and
   this is the only span in here. */
.lm-footer-sep {
  color: #6B3FAF;
  font-size: 13px;
  padding: 0 8px;
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

/* The headline cannot share a row with the logo and two buttons much below a
   laptop, so it drops to its own row and spans the full width. Two rows in a
   sticky bar is the cost of keeping the headline permanently on screen, which
   is the point of it being there. */
@media (max-width: 780px) {
  .lm-appbar {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand links"
      "tag   tag";
    row-gap: 9px;
  }
}

/* The bar has to survive a 360px screen. The wordmark goes and the logo stays:
   the mark identifies the site in a fraction of the width, and the word is the
   redundant half once both are present.

   The two store badges alone fit this width on one line; a third item does
   not, and letting it wrap just grows the bar instead of fixing that — so
   "Open web app" drops out of the bar specifically (nav only: the download
   band further down keeps its own full-size "Use it in your browser"). */
@media (max-width: 480px) {
  .lm-appbar {
    padding: 6px 12px;
    gap: 8px;
  }
  .lm-name { display: none; }
  .lm-nav .lm-btn-ghost { display: none; }
  .lm-btn,
  .lm-btn-ghost { padding: 8px 15px; font-size: 13px; }
  .lm-btn-lg { padding: 14px 30px; font-size: 16px; }
  .lm-footer-sep { padding: 0 4px; }
}