/* The landing page (0.2.28): the stylesheet of the apex, which the server draws for everyone who is not a Yeetline app.
 *
 * A page of its own and not style.css's 362 KB: first paint needs the HTML, this file and web/suite.css (the one cluster at the
 * top right, the same classes as every app's). No script, no cookie, no font, no image. The page cannot read a stored theme and
 * the apex origin stores none, so the colors follow prefers-color-scheme alone, and the two blocks below are the app's own
 * palettes written out: tests/test_landing_css.mjs holds every value equal to style.css's and web/themes.js's.
 *
 * The markup is pages.landing_page's (Yeetline-Server, server/pages.py), written against these classes, BEM, no style attribute:
 *
 *   body.landing > header.landing__bar: a.landing__brand (span.landing__mark "Y" and the name), nav.landing__nav (a.landing__link),
 *     div.suite-cluster (a <details class="suite-slot suite-slot--apps"> with the apps grid, and a.suite-signin)
 *   main.landing__main: h1.landing__title (the slogan), p.landing__sub (the subhead), section.landing-card with --search (form.landing-search:
 *     svg.landing-search__icon, label.landing__sr, input.landing-search__input, button.landing-search__button), --staff or --soon
 *     (p.landing-card__text, a.landing-card__more), p.landing__cta (a.landing-btn.landing-btn--primary|ghost), ul.landing-tiles > li >
 *     a.landing-tile.landing-tile--chat|mail|search|docs|status|pricing (span.landing-tile__glyph with an inline svg, __name, __text,
 *     __badge: text, never a color alone), section.landing-sees (h2.landing-sees__title, ul.landing-sees__list > li.landing-sees__item
 *     with b.landing-sees__app)
 *   footer.landing__foot: p.landing__line (the footer line), nav.landing__legal (a.landing__link)
 *
 * The glyph hues are suite.css's tokens; the light set is repeated here because this page has no data-scheme for suite.css's to key on. */

/* ── the tokens: the app's dark default, then its light theme under the system's own choice ── */
:root {
  --void: #0b0e14;
  --slab: #12161f;
  --slab-2: #171c27;
  --line: #232a38;
  --text: #e2e7f0;
  --muted: #8994a8;
  --amber: #f2b544;
  --mint: #56d3a6;
  --alarm: #ff6b6b;
  --own: #1b2740;
  --amber-text: #f2b544;
  --mint-text: #56d3a6;
  --alarm-text: #fd7576;
  --muted-text: #909bae;
  --radius: 12px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --surface-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --surface-active: color-mix(in srgb, var(--text) 11%, transparent);
  --line-strong: color-mix(in srgb, var(--line) 70%, var(--text));
  --accent-soft: color-mix(in srgb, var(--amber) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--amber) 42%, transparent);
  --ink: #17130a;
  --ink-alarm: #1e0808;
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.3);
  --suite-bar-h: 64px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    --void: #f4f6fa;
    --slab: #ffffff;
    --slab-2: #eef1f7;
    --line: #dde3ed;
    --text: #141922;
    --muted: #5d6a80;
    --amber: #b97a06;
    --mint: #17795a;
    --alarm: #c0322b;
    --own: #e2ecff;
    --amber-text: #815910;
    --mint-text: #176a51;
    --alarm-text: #a62e2a;
    --muted-text: #566378;
    --ink-alarm: #ffffff;
    --shadow-3: 0 18px 44px rgba(18, 26, 40, 0.16), 0 2px 8px rgba(18, 26, 40, 0.08);
    --suite-chat: #1d5fb0;
    --suite-mail: #6b3fc4;
    --suite-search: #0c6e52;
    --suite-docs: #8a5a00;
    --suite-status: #b02a45;
    --suite-admin: #3d4d73;
  }
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.45;
}
a { color: inherit; }
.landing :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.landing__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── the bar ── */
.landing__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
}
.landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 1.27rem;
  font-weight: 700;
  text-decoration: none;
}
.landing__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--amber);
  color: var(--ink);
  font-size: 1.07rem;
  font-weight: 800;
}
.landing__nav { display: flex; gap: 4px; }
.landing__link {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted-text);
  font-size: 0.93rem;
  text-decoration: none;
}
.landing__link:hover { background: var(--surface-hover); color: var(--text); }

/* ── the hero ── */
.landing__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 24px 48px;
}
.landing__title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.landing__sub { margin: 0; color: var(--muted-text); font-size: 1.4rem; text-align: center; }

/* ── the search card: the live box, the staff card or the sentence that it is being set up ── */
.landing-card {
  width: 100%;
  max-width: 660px;
  margin-top: 14px;
  text-align: center;
}
.landing-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 8px 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 29px;
  background: var(--slab);
}
.landing-search:focus-within { border-color: var(--amber); }
.landing-search__icon { flex: none; color: var(--muted-text); }
.landing-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.13rem;
}
.landing-search__input::placeholder { color: var(--muted-text); opacity: 1; }
.landing-search__button {
  flex: none;
  height: 42px;
  padding: 0 24px;
  border: 0;
  border-radius: 21px;
  background: var(--surface-active);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.landing-search__button:hover { background: var(--accent-soft); }
.landing-card__text { margin: 12px 0 0; color: var(--muted-text); font-size: 0.93rem; }
.landing-card__more { color: var(--amber-text); white-space: nowrap; }
.landing-card--staff, .landing-card--soon {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--slab);
}
.landing-card--staff .landing-card__text, .landing-card--soon .landing-card__text { margin: 0 0 12px; color: var(--text); }
.landing-card--soon .landing-card__text { margin: 0; }

/* ── the buttons ── */
.landing__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 22px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
}
.landing-btn--primary { background: var(--amber); color: var(--ink); }
.landing-btn--primary:hover { filter: brightness(1.06); }
.landing-btn--ghost { border-color: var(--line-strong); color: var(--text); }
.landing-btn--ghost:hover { background: var(--surface-hover); }

/* ── the tiles ── */
.landing-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.landing-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--slab);
  color: var(--text);
  text-decoration: none;
}
.landing-tile:hover { border-color: var(--line-strong); background: var(--slab-2); }
.landing-tile__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--suite-glyph, var(--text)) 16%, var(--slab));
  color: var(--suite-glyph, var(--text));
}
.landing-tile--chat { --suite-glyph: var(--suite-chat); }
.landing-tile--mail { --suite-glyph: var(--suite-mail); }
.landing-tile--search { --suite-glyph: var(--suite-search); }
.landing-tile--docs { --suite-glyph: var(--suite-docs); }
.landing-tile--status { --suite-glyph: var(--suite-status); }
.landing-tile--pricing { --suite-glyph: var(--suite-admin); }
.landing-tile__name { font-size: 1.07rem; font-weight: 650; }
.landing-tile__text { color: var(--muted-text); font-size: 0.87rem; line-height: 1.35; }
.landing-tile__badge {
  align-self: flex-start;
  margin-top: auto;
  padding: 2px 8px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  color: var(--amber-text);
  font-size: 0.73rem;
}

/* ── what each one sees ── */
.landing-sees { width: 100%; margin-top: 22px; }
.landing-sees__title { margin: 0 0 10px; color: var(--muted-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.landing-sees__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.landing-sees__item { color: var(--muted-text); font-size: 0.93rem; }
.landing-sees__app { color: var(--text); font-weight: 650; }

/* ── the foot ── */
.landing__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  color: var(--muted-text);
  font-size: 0.93rem;
  text-align: center;
}
.landing__line { margin: 0; }
.landing__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.landing__foot .landing__link { padding: 4px 6px; font-size: 0.87rem; }

/* ── a phone ── */
@media (max-width: 600px) {
  :root { --suite-bar-h: 56px; }
  .landing__bar { min-height: 56px; padding: 0 12px 0 16px; gap: 8px; }
  .landing__nav { display: none; }
  .landing__main { gap: 16px; padding: 40px 18px 32px; }
  .landing__sub { font-size: 1.07rem; }
  .landing-search { min-height: 50px; padding-left: 16px; }
  .landing-search__button { padding: 0 16px; }
  .landing-tiles { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}