/*
  getbiteboss.com — the stylesheet, shared by every page here.

  It used to be a <style> block inside index.html, because index.html was the
  whole site. It is a file now that there is a second page: two copies of a
  palette are two palettes, and the one that is not being looked at is the one
  that goes stale.

  No build step and no hash in the name, so nginx serves it no-store alongside
  the pages (deploy/nginx/getbiteboss.com.conf) — a cached stylesheet against a
  new page is a broken page, and there is nothing here to make them one URL.

  The colours, the type and the radii are the app's, transcribed rather than
  imported: the SPA's own styles.css is built and hashed and belongs to a
  bundle. DESIGN.md is where these values are decided.
*/

:root {
  --bg: #f5f3ed;
  --surface: #fffefa;
  --stroke: #e6e1d5;
  --ink: #23211a;
  --muted: #8a8577;
  --accent: #e0523a;
  --radius: 20px;
  --font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --display: "Unbounded", var(--font);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* One language visible at a time, on the pages that carry both (/support,
   /sources). `[data-lang]` is set in <head>; the front page and /ru/ are one
   language each, set no data-lang, and so are untouched by this. */
[data-lang="en"] :is([lang="ru"]) { display: none; }
[data-lang="ru"] :is([lang="en"]) { display: none; }

.wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

header { padding: 28px 0 0; }

/* The front page's header: wordmark left, the other language right. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lang {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
}
.lang:hover { color: var(--accent); }
.lang:focus-visible { outline: 3px solid rgba(224, 82, 58, 0.35); outline-offset: 4px; border-radius: 6px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 9px; }
/* The two-tone wordmark, same split as the app's <Brand>: accent, then ink. */
.brand .rx { color: var(--accent); }

/* On any page that is not the front one the wordmark is the way back to it, so
   it is an <a> there — undecorated, because it still has to read as the logo. */
a.brand { color: inherit; text-decoration: none; }
a.brand:focus-visible { outline: 3px solid rgba(224, 82, 58, 0.35); outline-offset: 4px; border-radius: 6px; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 32px;
  text-align: center;
}

.hero-mascot {
  width: min(48vw, 190px);
  height: auto;
  margin: 0 auto 28px;
  display: block;
}

h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.sub {
  font-size: clamp(17px, 2.6vw, 19px);
  color: var(--muted);
  margin: 0 auto 32px;
  max-width: 30em;
  text-wrap: pretty;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(60, 52, 30, 0.06);
  transition: transform 120ms ease-out, filter 120ms ease-out;
}
.cta:hover { filter: brightness(1.05); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 3px solid rgba(224, 82, 58, 0.35); outline-offset: 3px; }
.cta svg { width: 18px; height: 18px; }

/* The address is the button's own label on the support page, and an address is
   longer than "Get Started" — it must wrap rather than push the pill off a
   360px screen. */
.cta--mail { padding: 14px 28px; font-size: clamp(16px, 4.4vw, 18px); max-width: 100%; }
.cta--mail span { overflow-wrap: anywhere; }

.cta-note { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.cta-note a { color: var(--ink); }

/* The two store badges, side by side and the same height. Both are the
   stores' own artwork (see /store/): the App Store one is an SVG whose
   viewBox is 119.66×40, the Play one a PNG cropped to its visible bounds, so
   one `height` makes them match. Google asks for clear space around its badge
   of a quarter of the badge height; the gap and the margins are that. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.stores a { display: inline-flex; border-radius: 8px; }
.stores a:focus-visible { outline: 3px solid rgba(224, 82, 58, 0.35); outline-offset: 4px; }
.stores img { display: block; height: 54px; width: auto; }
.stores a:hover img { filter: brightness(1.15); }
/* At 54px the pair is 356px wide and wraps into a stack on a 360px phone;
   46px keeps them side by side there, and both stores allow down to 40. */
@media (max-width: 419px) {
  .stores { gap: 12px; }
  .stores img { height: 46px; }
}

.points {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  text-align: left;
}
/* Decoration, so it is a pseudo-element rather than an empty <span> a screen
   reader would have to walk past. */
.points li {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.points li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
}
.points b {
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.points p { margin: 0; color: var(--muted); font-size: 15px; }
.points a { color: var(--accent); }

/* "What is BiteBoss?": prose for a person who scrolled, and for the search
   engine that has to learn what the two names mean. Left-aligned like the
   cards, narrower than the page, and the h2 is the display face at a size
   between the cards' bold and the h1. */
.about {
  margin: 56px auto 0;
  max-width: 34em;
  text-align: left;
}
.about h2, .get h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 5vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.about p { margin: 0 0 14px; text-wrap: pretty; }
.about p:last-child { margin-bottom: 0; }

/* The closing call: badges again, then the browser as a button, for the
   reader who arrived at the bottom rather than the top. */
.get {
  margin: 52px 0 0;
  padding: 28px 20px 26px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}
.get h2 { margin-bottom: 20px; }
.get .stores { margin-bottom: 18px; }
.get .cta-note { margin-top: 16px; }

/* A row of secondary links under the cards — the pages somebody who came here
   for one thing turns out to have wanted instead. */
.also {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.also a { color: inherit; }

footer {
  padding: 28px 0 34px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
footer a { color: inherit; }

@media (min-width: 560px) {
  .points { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* ---------------------------------------------------------------------------
   Document pages: /sources. A page you READ rather than a page you leave, so
   it is left-aligned and starts at the top instead of centring in the
   viewport. The palette, the type and the radii are the ones above; only the
   layout changes.
   --------------------------------------------------------------------------- */
main.doc {
  justify-content: flex-start;
  text-align: left;
  padding-top: 28px;
}
.doc .wrap { max-width: 680px; }
.doc .hero-mascot { width: 88px; margin: 0 0 18px; }
.doc h1 { font-size: clamp(28px, 6vw, 38px); margin-bottom: 14px; }
.doc .sub { margin-left: 0; margin-bottom: 22px; max-width: 38em; }

/* The four sections, as pills. A citations page is long, and the person App
   Review sent here wants one of them. */
.src-nav {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.src-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.src-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* One section per thing the app computes. Separated by a rule and air, not by
   a box each: the boxes are reserved for the two callouts inside. */
.src { padding: 30px 0 10px; border-top: 1px solid var(--stroke); scroll-margin-top: 16px; }
.src h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 4.4vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.src-why { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; max-width: 40em; }

/* "What the app does": the rule itself, in plain words, before the sources
   for it. This is the paragraph that makes a citation a citation rather than a
   reading list, and the one to change when src/lib/nutrition.ts does. */
.src-rule, .src-note {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
}
.src-rule { margin: 0 0 22px; }
.src-rule b, .src-note b { display: block; font-weight: 600; margin-bottom: 4px; }
.src-rule p, .src-note p { margin: 0; color: var(--ink); }

.src-sub { font-size: 15px; font-weight: 700; margin: 24px 0 10px; }

/* Full citations: title as the link, the rest under it in muted. No hairline
   per row; the gap is the separator. */
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.src-t {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
  text-wrap: pretty;
}
.src-t:hover { color: var(--accent); }
.src-m { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 2px; }
.src-m a { color: inherit; }

/* Guidance pages: shorter rows, the page name as the link and its publisher
   after it on the same line. */
.src-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.src-links li { font-size: 15px; line-height: 1.45; }
.src-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.src-links a:hover { color: var(--accent); }
.src-links .src-m { display: inline; margin: 0; }
.src-links .src-m::before { content: " · "; }

.src-note { margin: 34px 0 0; }
.src-updated { margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.doc .also { margin-top: 18px; }
