/* apolar miniapps — the same store in apolar's identity: lime, ink, orange and sage color fields,
   Space Grotesk with tight tracking, the lowercase wordmark and the diagonal arrow. Flat like
   apolar.co: no gradients, no glass, no resting shadows, square color fields, round pills.
   Every rule is scoped to <html data-brand="apolar"> (js/brand.js) and only overrides styles.css. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/store/space-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root[data-brand="apolar"] {
  --paper: #f8faf8;
  --ink: #101510;
  --lime: #e2ff54;
  --orange: #ff713e;
  --sage: #dce8d8;
  --muted: #525b4f;
  --ink-soft: #34402d;
  --focus: #397711;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E");

  --bg: var(--paper);
  --bg-grouped: var(--sage);
  --card: var(--sage);
  --label: var(--ink);
  --label-2: var(--muted);
  --label-3: rgba(16, 21, 16, 0.4);
  --separator: rgba(16, 21, 16, 0.16);
  --fill: rgba(16, 21, 16, 0.07);
  --fill-strong: rgba(16, 21, 16, 0.13);
  --tint: var(--ink);
  --tint-fill: var(--ink);
  --on-tint: var(--paper);
  --chrome: var(--paper);
  --chrome-border: rgba(16, 21, 16, 0.12);
  --shadow-card: none;
  --shadow-shot: none;
  --icon-stroke: rgba(16, 21, 16, 0.1);

  --hero: var(--lime);
  --on-hero: var(--ink);
  --on-hero-2: rgba(16, 21, 16, 0.72);
  --hero-title: var(--ink);
  --footer-bg: var(--ink);
  --pill: var(--sage);
  --pill-hover: #c8d8c3;
  --on-pill: var(--ink);
  --cta: var(--ink);
  --cta-hover: var(--ink-soft);
  --on-cta: var(--paper);

  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font);
  --radius-card: 0px;
  --radius-shot: 0px;
}

/* apolar.co has no dark mode; this one keeps apolar's ink sections: ink ground, lime accents */
@media (prefers-color-scheme: dark) {
  :root[data-brand="apolar"] {
    --bg: var(--ink);
    --bg-grouped: #1b231b;
    --card: #1b231b;
    --label: var(--paper);
    --label-2: rgba(248, 250, 248, 0.68);
    --label-3: rgba(248, 250, 248, 0.38);
    --separator: rgba(248, 250, 248, 0.16);
    --fill: rgba(248, 250, 248, 0.09);
    --fill-strong: rgba(248, 250, 248, 0.16);
    --tint: var(--lime);
    --tint-fill: var(--lime);
    --on-tint: var(--ink);
    --chrome: var(--ink);
    --chrome-border: rgba(248, 250, 248, 0.14);
    --icon-stroke: rgba(248, 250, 248, 0.14);
    --focus: var(--lime);

    --hero: #1b231b;
    --on-hero: var(--paper);
    --on-hero-2: rgba(248, 250, 248, 0.7);
    --hero-title: var(--lime);
    --footer-bg: #1b231b;
    --pill: rgba(248, 250, 248, 0.12);
    --pill-hover: rgba(248, 250, 248, 0.2);
    --on-pill: var(--paper);
    --cta: var(--lime);
    --cta-hover: var(--paper);
    --on-cta: var(--ink);
  }
}

[data-brand="apolar"] body { letter-spacing: -0.02em; }
[data-brand="apolar"] ::selection { background: var(--ink); color: var(--lime); }
[data-brand="apolar"] :focus-visible,
[data-brand="apolar"] .stretched:focus-visible::after,
[data-brand="apolar"] .story:has(.stretched:focus-visible) { outline-color: var(--focus); }
[data-brand="apolar"] .skip-link { border-radius: 999px; background: var(--ink); color: var(--lime); }

/* The wordmark, as on apolar.co: bold, very tight, with a smaller full stop */
[data-brand="apolar"] .wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: 1;
}
[data-brand="apolar"] .wordmark__stop { font-size: 0.74em; }

/* ---------- Navigation: an ink capsule on phones, an ink sidebar on desktop ---------- */

[data-brand="apolar"] .tabs {
  border: 0;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(248, 250, 248, 0.14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-brand="apolar"] .tabs__item {
  color: rgba(248, 250, 248, 0.74);
  font-weight: 500;
  letter-spacing: -0.01em;
}
[data-brand="apolar"] .tabs__item[aria-current="page"] { color: var(--ink); background: var(--lime); }

@media (min-width: 1024px) {
  [data-brand="apolar"] .tabs {
    padding: 28px 16px 22px;
    border-right: 0;
    box-shadow: none;
  }
  [data-brand="apolar"] .tabs__brand {
    align-items: baseline;
    gap: 8px;
    padding: 0 12px 36px;
    color: var(--paper);
    font-weight: 400;
  }
  [data-brand="apolar"] .tabs__brand .wordmark { font-size: 36px; }
  [data-brand="apolar"] .tabs__brand .wordmark__stop { color: var(--lime); }
  [data-brand="apolar"] .tabs__brand-label { color: var(--lime); font-size: 18px; font-weight: 500; letter-spacing: -0.04em; }
  [data-brand="apolar"] .tabs__item {
    padding: 11px 14px;
    border-radius: 999px;
    color: var(--paper);
    font-size: 16px;
    letter-spacing: -0.02em;
  }
  [data-brand="apolar"] .tabs__item svg { color: var(--lime); }
  [data-brand="apolar"] .tabs__item:hover { background: rgba(248, 250, 248, 0.08); }
  [data-brand="apolar"] .tabs__item[aria-current="page"] { background: var(--lime); color: var(--ink); }
  [data-brand="apolar"] .tabs__item[aria-current="page"] svg { color: var(--ink); }
  [data-brand="apolar"] .tabs__dev { color: rgba(248, 250, 248, 0.7); font-size: 14px; }
  [data-brand="apolar"] .tabs__dev:hover { color: var(--lime); }
}
@media (prefers-color-scheme: dark) and (min-width: 1024px) {
  [data-brand="apolar"] .tabs { border-right: 1px solid var(--separator); }
}

/* ---------- Tab pages open on a lime field, like the top of apolar.co ---------- */

[data-brand="apolar"] .large-title {
  align-items: flex-end;
  margin-bottom: 24px;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: 30px;
  background: var(--hero);
  color: var(--on-hero);
  box-shadow: 0 0 0 100vmax var(--hero);
  clip-path: inset(0 -100vmax);
}
[data-brand="apolar"] .large-title > div { flex: 1; min-width: 0; }
[data-brand="apolar"] .large-title h1 {
  margin-top: 4px;
  color: var(--hero-title);
  font-size: 56px;
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.07em;
}
@media (min-width: 1024px) {
  [data-brand="apolar"] .large-title { padding-top: 64px; padding-bottom: 48px; margin-bottom: 32px; }
  [data-brand="apolar"] .large-title h1 { font-size: 76px; letter-spacing: -0.075em; }
}

/* The intro of Juegos and Apps sits on the same field */
[data-brand="apolar"] .large-title:has(+ .section__sub) { margin-bottom: 0; padding-bottom: 14px; }
[data-brand="apolar"] .large-title + .section__sub {
  max-width: 34ch;
  margin: 0 0 24px;
  padding: 0 0 32px;
  background: var(--hero);
  color: var(--on-hero);
  box-shadow: 0 0 0 100vmax var(--hero);
  clip-path: inset(-1px -100vmax 0); /* overlaps the title's field by 1px so no seam shows */
  font-size: 19px;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  [data-brand="apolar"] .large-title + .section__sub { margin-bottom: 32px; padding-bottom: 48px; font-size: 20px; }
}

/* Phones have no sidebar, so the field starts with the wordmark, like apolar.co's header */
[data-brand="apolar"] .masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top)) 0 40px;
  background: var(--hero);
  color: var(--on-hero);
  box-shadow: 0 0 0 100vmax var(--hero);
  clip-path: inset(0 -100vmax -1px); /* overlaps the title's field by 1px so no seam shows */
}
[data-brand="apolar"] .masthead__brand { display: flex; align-items: baseline; gap: 8px; }
[data-brand="apolar"] .masthead .wordmark { font-size: 34px; }
[data-brand="apolar"] .masthead__label { font-size: 18px; font-weight: 500; letter-spacing: -0.04em; }
[data-brand="apolar"] .masthead__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
}
[data-brand="apolar"] .masthead__link::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) { [data-brand="apolar"] .masthead .wordmark__stop { color: var(--lime); } }
@media (max-width: 1023px) { [data-brand="apolar"] .masthead + .large-title { padding-top: 0; } }
@media (min-width: 1024px) { [data-brand="apolar"] .masthead { display: none; } }
/* The wordmark already names the store, so the developer avatar and any name above the title step aside */
[data-brand="apolar"] .avatar,
[data-brand="apolar"] .large-title__eyebrow { display: none; }

/* ---------- Install card: a sage field ---------- */

[data-brand="apolar"] .install-card__icon { background: var(--ink); color: var(--lime); }
[data-brand="apolar"] .install-card h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.04em; }
[data-brand="apolar"] .install-card__head p { font-size: 15px; }
[data-brand="apolar"] .install-card__steps li { padding-left: 32px; }
[data-brand="apolar"] .install-card__steps li::before {
  width: 22px;
  height: 22px;
  background: var(--ink);
  color: var(--lime);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  [data-brand="apolar"] .install-card__icon,
  [data-brand="apolar"] .install-card__steps li::before { background: var(--lime); color: var(--ink); }
}

/* ---------- Story cards: flat color fields, a collage of shots and an ink band ---------- */

[data-brand="apolar"] .story {
  --band: var(--ink);
  --on-band: var(--paper);
  --on-band-2: rgba(248, 250, 248, 0.7);
  --band-pill: var(--lime);
  --on-band-pill: var(--ink);
  border-radius: 0;
  /* The last 4px are under the band. In the band's color, the field can't peek out below it while
     the card lifts on hover (the edge falls between pixels and the band can miss the last row). */
  background: linear-gradient(var(--theme) calc(100% - 4px), var(--band) 0);
  box-shadow: none;
}
[data-brand="apolar"] .story[data-tone="dark"] {
  --on-theme: var(--ink);
  --on-theme-2: rgba(16, 21, 16, 0.74);
}
[data-brand="apolar"] .story[data-tone="light"] {
  --on-theme: var(--paper);
  --on-theme-2: rgba(248, 250, 248, 0.76);
  --band: var(--lime);
  --on-band: var(--ink);
  --on-band-2: rgba(16, 21, 16, 0.7);
  --band-pill: var(--ink);
  --on-band-pill: var(--lime);
}
@media (hover: hover) {
  [data-brand="apolar"] .story:hover { transform: translateY(-4px); box-shadow: none; }
}
@media (prefers-color-scheme: dark) {
  [data-brand="apolar"] .story[data-tone="light"] { box-shadow: inset 0 0 0 1px var(--separator); }
}
/* apolar's arrow in the corner of every field */
[data-brand="apolar"] .story::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: var(--on-theme);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  pointer-events: none;
}
[data-brand="apolar"] .story__text { padding: 24px 24px 0; }
[data-brand="apolar"] .story__eyebrow {
  padding-right: 56px;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
}
[data-brand="apolar"] .story__title {
  margin-top: 12px;
  padding-right: 24px;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.065em;
}
[data-brand="apolar"] .story__blurb { margin-top: 14px; font-size: 16px; line-height: 1.4; }
[data-brand="apolar"] .story__shot { border: 0; border-radius: 0; box-shadow: none; }
/* Same for the shots: they end 4px above the card's bottom edge, under the band */
[data-brand="apolar"] .story__art { clip-path: inset(-100vmax -100vmax 4px); }
[data-brand="apolar"] .story__lockup {
  padding: 14px 16px;
  background: var(--band);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-brand="apolar"] .story__lockup .lockup__name { color: var(--on-band); }
[data-brand="apolar"] .story__lockup .lockup__sub { color: var(--on-band-2); }
[data-brand="apolar"] .story[data-tone] .pill--on-media { background: var(--band-pill); color: var(--on-band-pill); }
[data-brand="apolar"] .story[data-tone] .pill--on-media:hover { background: var(--paper); color: var(--ink); }

/* ---------- Buttons ---------- */

[data-brand="apolar"] .pill {
  height: 32px;
  background: var(--pill);
  color: var(--on-pill);
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-brand="apolar"] .pill:hover { background: var(--pill-hover); }
[data-brand="apolar"] .pill--filled { background: var(--cta); color: var(--on-cta); }
[data-brand="apolar"] .pill--filled:hover { background: var(--cta-hover); }
[data-brand="apolar"] .pill--large {
  gap: 18px;
  height: 50px;
  padding: 0 18px 0 24px;
  font-size: 16px;
  font-weight: 500;
}
[data-brand="apolar"] .pill--large::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}
[data-brand="apolar"] .icon-btn { background: var(--pill); color: var(--on-pill); }
[data-brand="apolar"] .icon-btn:hover { background: var(--pill-hover); }

/* ---------- Lists, sections and category pages ---------- */

[data-brand="apolar"] .lockup__name { font-weight: 500; letter-spacing: -0.03em; }
[data-brand="apolar"] .app-list li { border-radius: 0; }
[data-brand="apolar"] .section__head h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.055em; }
@media (min-width: 1024px) { [data-brand="apolar"] .section__head h2 { font-size: 30px; } }
/* Result cards are sage, so their pills turn paper */
[data-brand="apolar"] .result { --pill: var(--paper); --pill-hover: #ffffff; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  [data-brand="apolar"] .result { --pill: rgba(248, 250, 248, 0.12); --pill-hover: rgba(248, 250, 248, 0.2); }
}
[data-brand="apolar"] .result__shots img { border-radius: 0; box-shadow: none; }

[data-brand="apolar"] .more-btn,
[data-brand="apolar"] .history-link,
[data-brand="apolar"] .info dd a,
[data-brand="apolar"] .empty a {
  color: var(--label);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
[data-brand="apolar"] .dev-link { color: var(--label); }
[data-brand="apolar"] .dev-link svg { color: var(--label-2); }

/* ---------- Product page: the app's color field runs under the navigation bar ---------- */

[data-brand="apolar"] .product {
  --on-theme: var(--ink);
  --on-theme-2: rgba(16, 21, 16, 0.72);
  margin-top: calc(-52px - env(safe-area-inset-top));
}
[data-brand="apolar"] .product[data-tone="light"] {
  --on-theme: var(--paper);
  --on-theme-2: rgba(248, 250, 248, 0.76);
}
[data-brand="apolar"] .product__header {
  padding-top: calc(64px + env(safe-area-inset-top));
  padding-bottom: 28px;
  background: var(--theme);
  color: var(--on-theme);
  box-shadow: 0 0 0 100vmax var(--theme);
  clip-path: inset(0 -100vmax);
}
[data-brand="apolar"] .product__titles h1 { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -0.065em; }
[data-brand="apolar"] .product__titles .subtitle { margin-top: 8px; color: var(--on-theme-2); font-size: 16px; }
[data-brand="apolar"] .product__header .pill--filled { background: var(--ink); color: var(--paper); }
[data-brand="apolar"] .product__header .pill--filled:hover { background: var(--ink-soft); }
[data-brand="apolar"] .product[data-tone="light"] .product__header .pill--filled { background: var(--lime); color: var(--ink); }
[data-brand="apolar"] .product[data-tone="light"] .product__header .pill--filled:hover { background: var(--paper); }
@media (min-width: 720px) {
  [data-brand="apolar"] .product__header { padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: 40px; }
  [data-brand="apolar"] .product__titles h1 { font-size: 52px; }
  [data-brand="apolar"] .product__titles .subtitle { font-size: 20px; }
}

[data-brand="apolar"] .navbar.is-scrolled { background: var(--theme); border-bottom-color: transparent; }
[data-brand="apolar"] .navbar.is-scrolled,
[data-brand="apolar"] .navbar.is-condensed { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-brand="apolar"] .navbar__back { font-weight: 500; }
[data-brand="apolar"] .navbar[data-tone="dark"] .navbar__back { color: var(--ink); }
[data-brand="apolar"] .navbar[data-tone="light"] .navbar__back { color: var(--paper); }
[data-brand="apolar"] .navbar[data-tone="dark"] .icon-btn { background: rgba(16, 21, 16, 0.08); color: var(--ink); }
[data-brand="apolar"] .navbar[data-tone="light"] .icon-btn { background: rgba(248, 250, 248, 0.14); color: var(--paper); }
[data-brand="apolar"] .navbar.is-condensed { background: var(--bg); border-bottom-color: var(--separator); }
[data-brand="apolar"] .navbar.is-condensed .navbar__back { color: var(--label); }
[data-brand="apolar"] .navbar.is-condensed .icon-btn { background: var(--pill); color: var(--on-pill); }

[data-brand="apolar"] .facts { border-top: 0; }
[data-brand="apolar"] .facts__k { text-transform: none; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }
[data-brand="apolar"] .facts__v { color: var(--label); font-weight: 500; letter-spacing: -0.04em; }
[data-brand="apolar"] .shot-btn img { border-radius: 0; }
[data-brand="apolar"] .shots figcaption { font-size: 14px; }
[data-brand="apolar"] .bullets li::before { background: var(--label); }
[data-brand="apolar"] .features li { border-radius: 0; }
[data-brand="apolar"] .features svg { color: var(--label); }
[data-brand="apolar"] .install li { border-radius: 0; border: 1px solid var(--separator); }
[data-brand="apolar"] .install h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; }

/* ---------- Footer: an ink band with the wordmark, like apolar.co's ---------- */

[data-brand="apolar"] .footer {
  margin-top: 64px;
  padding: 40px 0 8px;
  border-top: 0;
  background: var(--footer-bg);
  color: rgba(248, 250, 248, 0.74);
  box-shadow: 0 0 0 100vmax var(--footer-bg);
  clip-path: inset(0 -100vmax -100vmax);
  font-size: 15px;
}
[data-brand="apolar"] .footer a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
[data-brand="apolar"] .footer__mark { margin-bottom: 20px; color: var(--paper); font-size: 76px; }
[data-brand="apolar"] .footer__mark .wordmark__stop { color: var(--lime); font-size: 0.7em; }
@media (min-width: 1024px) { [data-brand="apolar"] .footer__mark { font-size: 104px; } }

/* ---------- Overlays ---------- */

[data-brand="apolar"] .lightbox { background: rgba(16, 21, 16, 0.95); }
[data-brand="apolar"] .lightbox__slide img { border-radius: 0; }
[data-brand="apolar"] .toast { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) { [data-brand="apolar"] .toast { background: var(--lime); color: var(--ink); } }