/* LiNK storefront shell, "Comet" system, phase C2. public_base.html loads it after chrome.css and
   is the page frame for public pages and /me (public.css is gone).
   Colours: --lk-* tokens only; a game's --t-* colours only inside .lk-theme-island rules.
   Guarded by tests/test_store_css.py through tests/_css_guards.py. */

*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; }
img { display: block; }

/* ---- page frame: header, main, footer; the footer sits at the bottom of short pages ----
   A flex column, not a grid: .site-head is position: sticky, and a sticky box inside an `auto`
   grid row has no scroll room (its area is exactly its own height), so it would never stick.
   Here main grows (flex: 1 0 auto) and the header scrolls against the whole body. A platform
   banner is simply one more child, so no :has() rule is needed. */
body.lk-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.lk-page > main { flex: 1 0 auto; min-width: 0; }

/* ---- skip link: off-screen until focused (its colours are in chrome.css) ---- */
.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 1000;
  min-height: 44px; padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---- header frame: layout only; colours and 44px targets live in chrome.css ---- */
.site-head { position: sticky; top: 0; z-index: 20; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav a, .lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; text-decoration: none;
}
.lang-switch { display: inline-flex; gap: 2px; }
.nav-logout-form { display: inline-flex; margin: 0; }
.nav-logout-btn { min-height: 44px; font: inherit; cursor: pointer; }

/* ---- platform banner (ADR-0028): the staff-written text says what it is ---- */
.platform-banner {
  padding: 10px 16px; text-align: center; font-weight: 600;
  background: var(--lk-tint); color: var(--lk-ink);
  border-bottom: 1px solid var(--lk-line);
}
.platform-banner.lvl-warn { border-bottom: 3px solid var(--lk-warn); }
.platform-banner.lvl-maintenance { border-bottom: 3px solid var(--lk-danger); }

/* ---- sections and breadcrumb ---- */
.lk-container--narrow { max-width: 760px; }
.lk-section { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--lk-line); }
.lk-section__title { margin: 0 0 24px; font-size: clamp(1.5rem, 3vw, 2rem); text-wrap: balance; }
.lk-crumbs { background: var(--lk-surface); border-bottom: 1px solid var(--lk-line); }
.lk-crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  margin-block: 0; padding-block: 0; list-style: none;
  color: var(--lk-muted); font-size: 0.9375rem;
}
.lk-crumbs__list li + li::before { content: "/" / ""; margin-inline-end: 8px; }
.lk-crumbs__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  color: var(--lk-link); text-decoration: underline; text-underline-offset: 0.2em;
}
.lk-crumbs__list [aria-current="page"] { color: var(--lk-ink); font-weight: 600; }

/* ---- prose: rendered markdown from the CMS (.prose is the old name, kept one release) ---- */
.lk-prose, .prose { max-width: 68ch; }
.lk-prose > :first-child, .prose > :first-child { margin-top: 0; }
.lk-prose > :last-child, .prose > :last-child { margin-bottom: 0; }
.lk-prose :is(h1, h2, h3), .prose :is(h1, h2, h3) { margin: 1.4em 0 0.5em; line-height: 1.35; }
.lk-prose :is(p, ul, ol), .prose :is(p, ul, ol) { margin: 0 0 1em; }
.lk-prose a, .prose a { color: var(--lk-link); text-decoration: underline; text-underline-offset: 0.2em; }
.lk-prose img, .prose img {
  margin: 1.2em 0; border: 1px solid var(--lk-line); border-radius: var(--lk-radius);
}
.lk-prose code, .prose code {
  padding: 0 4px; font-family: var(--lk-font-mono); font-size: 0.9em;
  background: var(--lk-tint); color: var(--lk-ink); border-radius: var(--lk-radius);
}
.lk-prose blockquote, .prose blockquote {
  margin: 1em 0; padding-inline-start: 1em;
  border-inline-start: 3px solid var(--lk-line); color: var(--lk-muted);
}

/* ---- posts (home news, game news) and the single post page ---- */
.lk-post { margin-block-end: 24px; padding-block-end: 24px; border-bottom: 1px solid var(--lk-line); }
.lk-post:last-child { margin-block-end: 0; border-bottom: 0; }
.lk-post__date { margin: 0; color: var(--lk-muted); font-size: 0.9375rem; }
.lk-post__title { margin: 4px 0 8px; font-size: 1.25rem; }
/* a news card: title, date and a ~200 character excerpt (B8). The whole card is the hit area through
   the title link's ::after, so a long post cannot stretch the page and the target is far over 44 px */
.lk-post--card { position: relative; }
.lk-post--card .lk-post__title a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--lk-ink);
  text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere;
}
.lk-post--card .lk-post__title a::after { content: ""; position: absolute; inset: 0; }
.lk-post--card:hover .lk-post__title a { color: var(--lk-link); }
.lk-post__excerpt {
  margin: 0; color: var(--lk-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
@media (max-width: 639px) { .lk-post__excerpt { -webkit-line-clamp: 2; } }
.lk-article__kicker { margin: 0 0 8px; color: var(--lk-muted); font-weight: 600; }
.lk-article__title { margin: 0 0 8px; font-size: clamp(1.75rem, 4vw, 2.5rem); text-wrap: balance; }
.lk-article__date { margin: 0 0 24px; color: var(--lk-muted); }

/* ---- theme island: the ONLY element that may wear a game's colours ----
   A template sets --t-bg / --t-surface / --t-ink / --t-accent inline on this element
   (pages.theme_style). tokens.css also gives it the dark --lk-* set. 1px edge, token radius,
   nothing (glow, shadow, image) escapes the box. */
.lk-theme-island {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--t-bg, var(--lk-bg)); color: var(--t-ink, var(--lk-ink));
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius);
}
.lk-theme-island--bleed { border-inline: 0; border-radius: 0; }
.lk-theme-island .lk-theme-island__panel {
  background: var(--t-surface, var(--lk-surface)); color: var(--t-ink, var(--lk-ink));
}

/* ---- R3 Pb: the hero comet slot. The still drawing (an SVG symbol coloured by the dark token set
   tokens.css gives .lk-comet) is the picture; js/hero-comet.js may paint over it on wide screens.
   A fixed 16:10 box, so nothing shifts when the canvas arrives or leaves. ---- */
.lk-comet {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 10;
  background: var(--lk-bg); border: 1px solid var(--lk-line); border-radius: var(--lk-radius);
}
.lk-comet__still, .lk-comet__canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
}
/* the third point colour follows the game accent only on a slot that carries data-accent (the script does the same) */
.lk-theme-island .lk-comet[data-accent] { --lk-comet-accent: var(--t-accent, var(--lk-cyan)); }
.lk-comet__canvas { pointer-events: none; }
.lk-comet--live .lk-comet__still { opacity: 0; }
.lk-comet__replay { position: absolute; right: 8px; bottom: 8px; background: var(--lk-surface); color: var(--lk-ink); }
.lk-comet__replay[hidden] { display: none; }

/* R3 Pb: page art under content pages (legal, news, buy, checkout). Below everything else, so a form
   or a table is never covered; 420 px at most, centred; the still alone under 900 px (the script
   starts the canvas from 900 px only). */
.lk-page-art { width: min(100% - 32px, 420px); margin: 32px auto 0; }

/* wishlist toggle (ADR-0045): a lk-btn, so the 44px target comes from .lk-btn */
.lk-wish-form, .lk-claim-form { margin: 0; display: inline-flex; }
.lk-wish { gap: 0.4rem; }
.lk-wish--on { border-color: var(--lk-link); color: var(--lk-link); }
.lk-wish__heart { font-size: 1.1em; }
.lk-game-card__wish { padding: 0 16px 16px; }