/*
 * simio.to — coming-soon page.
 * Shared by index.html (ka, default) and en.html.
 */

:root {
  /* Brand orange, from the app icon gradient (SimioAppIcon.icon → display-p3
     stops converted to sRGB). Matches admin/public/simio-logo.svg. */
  --brand:      #FF5F2F;
  --brand-soft: #FF9473;

  --bg:    #FFFFFF;
  --fg:    #14100E;
  --muted: #6B615C;
  --line:  #E7E2DF;

  /* Same stack as admin/src/styles/tokens.css. TBC X is the Figma-specified
     face but is licensed with no web distribution, so off a Simio machine it
     never resolves and Noto Sans Georgian renders — Latin and Georgian both. */
  --font-sans: "TBC X", "Noto Sans Georgian", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  padding: 4.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Language switch ────────────────────────────────────────────────────── */

.lang {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.lang a {
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.lang a:hover { color: var(--fg); }

.lang a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The current language is rendered as <span aria-current="page">, not <a> —
   there is nowhere to navigate to. */
.lang [aria-current] {
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  line-height: 1.2;
}

/* ── Content ────────────────────────────────────────────────────────────── */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 32rem;
}

.mark { width: 6rem; height: 6rem; display: block; }

.wordmark {
  margin: 1.5rem 0 0;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.status {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Mkhedruli is unicase, so uppercasing is a no-op — but tracking a Latin label
   out to 0.16em renders "მალე" as four drifting letters. Georgian gets normal
   spacing and a size bump to hold the same weight on the page. */
:lang(ka) .status {
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.tagline {
  margin: 1rem 0 0;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

/* ── Store badges ───────────────────────────────────────────────────────────
   Apple and Google both require their own artwork, unaltered and unrecoloured.
   Those files ship as-is in this directory; only the box around them is ours.

   The two assets are cut differently. Apple's SVG is trimmed to the button edge
   (119.66x40). Google's PNG bakes 41px of transparent clear space into a 646x250
   canvas, so its button is only 564x168 — identical in the en and ka badges.
   Sizing both to the same CSS height would render Google's button a third
   smaller. Instead Google is scaled by 250/168 so the *buttons* match at
   --badge-h, and Apple gets the equivalent clear space as padding so the two
   boxes align. Both files stay unmodified and Google's clear space is kept. */

.stores {
  --badge-h: 3rem;
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.store { display: inline-flex; }

.store img { display: block; }

.store--apple  { padding: calc(var(--badge-h) * 41 / 168); }
.store--apple  img { height: var(--badge-h); width: auto; }
.store--google img { height: calc(var(--badge-h) * 250 / 168); width: auto; }

/* Unreleased: the badges show but nothing is clickable yet. Dimmed with opacity
   only — a grayscale filter would strip the colour out of Google's play
   triangle, and neither store permits recolouring their badge. */
.store.is-pending { opacity: 0.55; cursor: default; }

a.store { transition: opacity 0.18s ease; border-radius: 0.5rem; }
a.store:hover { opacity: 0.75; }
a.store:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

footer { font-size: 0.8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  a.store, .lang a { transition: none; }
}

@media (max-width: 26rem) {
  body { gap: 2.25rem; padding: 4rem 1.25rem 2rem; }
  .mark { width: 5rem; height: 5rem; }
  .stores { --badge-h: 2.75rem; gap: 0.25rem; }
}