/* Easy Tracking Games — site styles.

   Three colours, taken from the app's mark: sumi ink, shu red and paper.
   The icon is a brush-drawn ensō with a controller inside it, so the site is
   ink on paper by day and paper on ink by night, with the red used sparingly
   — it is the one thing in the mark that is not black, and it stops being an
   accent if it is everywhere.

   The red is not one value. An accent has two jobs that pull in opposite
   directions: white text sits on it (which wants a darker red) and it sits as
   text on the page (which wants a lighter one). Each theme therefore carries
   the red that clears 4.5:1 both ways against its own ground — #DA2126 on
   paper, #E52D31 on ink — rather than one nominal brand value that fails
   somewhere. */

:root {
  color-scheme: dark;

  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;

  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;

  --accent: #e52d31;
  --accent-ink: #ffffff;
  --accent-wash: rgba(229, 45, 49, 0.16);
  --good: #5fc793;

  /* The hero band is ink in either theme, so it carries its own text
     tokens: the mark is drawn on paper and reads best against its
     opposite. */
  --hero-bg: #141416;
  --hero-bg-2: #050506;
  --hero-ink: #f5f2ec;
  --hero-ink-soft: #ada79f;
  --hero-rim: rgba(245, 242, 236, 0.16);

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
  --radius: 14px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #faf8f5;
    --surface: #ffffff;
    --surface-2: #f0ede7;
    --rim: #dfd9cf;
    --ink: #14120f;
    --ink-soft: #55504a;
    --ink-faint: #7a746c;
    --accent: #da2126;
    --accent-ink: #ffffff;
    --accent-wash: rgba(218, 33, 38, 0.1);
    --good: #1c7a51;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f0ede7;
  --rim: #dfd9cf;
  --ink: #14120f;
  --ink-soft: #55504a;
  --ink-faint: #7a746c;
  --accent: #da2126;
  --accent-ink: #ffffff;
  --accent-wash: rgba(218, 33, 38, 0.1);
  --good: #1c7a51;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0b0c;
  --surface: #141416;
  --surface-2: #1e1e21;
  --rim: #2e2e33;
  --ink: #f5f2ec;
  --ink-soft: #afaaa2;
  --ink-faint: #837d75;
  --accent: #e52d31;
  --accent-ink: #ffffff;
  --accent-wash: rgba(229, 45, 49, 0.16);
  --good: #5fc793;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.12rem; line-height: 1.3; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rim);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 34px; height: 34px; }

.site-nav {
  display: flex;
  gap: 18px;
  font-size: 0.94rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(229, 45, 49, 0.20), transparent 58%),
    linear-gradient(168deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
  color: var(--hero-ink);
  border-bottom: 1px solid var(--rim);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 40px;
  align-items: center;
  padding-block: clamp(44px, 8vw, 80px);
}

.hero .eyebrow { color: var(--hero-ink-soft); }
.hero h1 { color: var(--hero-ink); margin-top: 14px; }

.hero-lede {
  color: var(--hero-ink-soft);
  font-size: 1.14rem;
  max-width: 54ch;
  margin-top: 18px;
}

.hero-art {
  justify-self: center;
  width: min(260px, 70vw);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--hero-rim);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--hero-ink-soft);
  background: rgba(0, 0, 0, 0.18);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- number strip ---------- */

.strip {
  border-bottom: 1px solid var(--rim);
  background: var(--surface);
}

.strip .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 28px;
  padding-block: 26px;
}

.strip dt {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.strip dd {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- sections ---------- */

section.band { padding-block: clamp(46px, 7vw, 76px); }
section.band + section.band { border-top: 1px solid var(--rim); }

.section-head { max-width: var(--measure); }
.section-head h2 { margin-top: 10px; }
.section-head p { margin-top: 14px; color: var(--ink-soft); }

/* ---------- feature list ---------- */

.features {
  list-style: none;
  padding: 0;
  margin: 38px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  background: var(--rim);
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  overflow: hidden;
}

.features li {
  background: var(--surface);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.features h3 { color: var(--ink); }
.features p { color: var(--ink-soft); font-size: 0.97rem; }

.features .tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- app fragments (real UI copy, not screenshots) ---------- */

.fragment {
  margin-top: 34px;
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  display: grid;
  gap: 14px;
}

.fragment .caption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.price-row .title { font-family: var(--body); font-weight: 600; font-size: 1.02rem; }
.price-row .now { color: var(--ink); }
.price-row .low { color: var(--good); }
.price-row .seen { color: var(--ink-faint); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  font-size: 0.85rem;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  color: var(--ink-soft);
  background: var(--surface-2);
  white-space: nowrap;
}

.chip.on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ---------- table ---------- */

.table-scroll {
  overflow-x: auto;
  margin-top: 34px;
  border: 1px solid var(--rim);
  border-radius: var(--radius);
}

table {
  width: 100%;
  /* Narrow screens scroll the table sideways in .table-scroll rather than
     crushing three columns into one word each. */
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface);
}

th, td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rim);
  vertical-align: top;
}

thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
td.store { font-weight: 600; white-space: nowrap; }
td .verified { color: var(--good); }
td .self { color: var(--ink-soft); }

/* ---------- prose (privacy, support) ---------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 42px; }
.prose h3 { margin-top: 30px; }
.prose ul { padding-left: 20px; margin-top: 12px; }
.prose li + li { margin-top: 8px; }
.prose li { color: var(--ink-soft); }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }

.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
}

.note p { color: var(--ink); }

.updated {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.qa { margin-top: 34px; display: grid; gap: 1px; background: var(--rim); border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.qa > div { background: var(--surface); padding: 22px; }
.qa h3 { margin-bottom: 8px; }
.qa p { color: var(--ink-soft); font-size: 0.97rem; }
.qa p + p { margin-top: 10px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rim);
  background: var(--surface);
  padding-block: 34px 44px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.site-footer .wrap { display: grid; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.footer-top a { color: var(--ink-soft); text-decoration: none; }
.footer-top a:hover { color: var(--accent); }
.credits { color: var(--ink-faint); font-size: 0.85rem; max-width: 70ch; }
.credits a { color: var(--ink-soft); }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-art { order: -1; width: min(180px, 48vw); justify-self: start; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- small utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Marks copy that must be replaced before the site goes public. */
.placeholder {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
}

.prose h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-top: 10px; }
.prose .updated { margin-top: 10px; }
.prose .note { margin-top: 26px; }

/* ---------- call to action, and the web-version section ---------- */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 28px;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  white-space: nowrap;
}

.cta:hover { filter: brightness(1.08); text-decoration: none; }
.section-head .cta { margin-top: 6px; }

.hero .hero-actions .hero-status { margin-top: 0; }

.split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.split-list li {
  color: var(--ink-soft);
  font-size: 0.97rem;
  padding-left: 16px;
  border-left: 2px solid var(--rim);
}

.split-list strong { color: var(--ink); }
.footer-top .app-link { color: var(--accent); }

/* Language switch (i18n.js adds it to the nav / app bar): round flags. */
.lang-switch { display: inline-flex; gap: 8px; align-items: center; margin-left: 1rem; }
.lang-switch a { display: inline-flex; line-height: 0; padding: 0; }
.lang-switch svg { width: 22px; height: 22px; border-radius: 50%; opacity: 0.5; transition: opacity .15s, box-shadow .15s; }
.lang-switch a:hover svg { opacity: 0.85; }
.lang-switch a[aria-current] svg { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }

/* Buy Me a Coffee pill, after the flags. Label hides on narrow screens. */
.coffee { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 10px; border: 1px solid var(--rim); border-radius: 999px; font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.coffee:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .coffee-label { display: none; } .coffee { padding: 4px 8px; margin-left: 8px; } }