/* LiNK skin "nova", named "depth" until 2026-10-18 (owner decision 2026-10-12). Loaded only when the site skin is "nova"
   (app/skin.py); the default "comet" look never reads this file.
   - Depth comes from layered shadows and an inner top rim light, no new colours: every colour is a
     --lk-* token mixed with transparent or black, so light, dark and data-theme all follow tokens.css.
   - Shadows are dark and the rim is light in BOTH themes. The shade colour is not --lk-ink (that is
     near white in dark, which turned every shadow into a pale halo): it is declared per theme below,
     in the same places tokens.css uses, so the forced-dark islands get it too.
   - Everything public is centred and symmetric (gate art, footer). The panel gets shadows only.
   - The un-animated state is the finished state. The one entrance (gate art) is in motion.css,
     moves only transform and opacity and runs once (web-motion rules).
   - No hover motion, no loops. Forms, money and danger pages: shadows only. */

:root, :root[data-theme="light"] {
  --lk-shade: var(--lk-ink);
  --lk-sh-ink: color-mix(in srgb, var(--lk-shade) 14%, transparent);
  --lk-sh-ink-soft: color-mix(in srgb, var(--lk-shade) 8%, transparent);
  --lk-sh-edge: color-mix(in srgb, var(--lk-shade) 28%, transparent);
  --lk-rim: inset 0 1px 0 color-mix(in srgb, var(--lk-surface) 70%, transparent);
  --lk-sh-glow: color-mix(in srgb, var(--lk-orchid) 22%, transparent);
}

/* dark: a near-black shade, stronger alphas (a shadow on a dark ground needs more), and a rim made
   of ink so the top edge of a card is a thin light line */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lk-shade: color-mix(in srgb, var(--lk-bg) 25%, black);
    --lk-sh-ink: color-mix(in srgb, var(--lk-shade) 85%, transparent);
    --lk-sh-ink-soft: color-mix(in srgb, var(--lk-shade) 55%, transparent);
    --lk-sh-edge: color-mix(in srgb, var(--lk-shade) 90%, transparent);
    --lk-rim: inset 0 1px 0 color-mix(in srgb, var(--lk-ink) 9%, transparent);
    --lk-sh-glow: color-mix(in srgb, var(--lk-lavender) 14%, transparent);
  }
}
.lk-comet,
.lk-theme-island,
:root[data-theme="dark"] {
  --lk-shade: color-mix(in srgb, var(--lk-bg) 25%, black);
  --lk-sh-ink: color-mix(in srgb, var(--lk-shade) 85%, transparent);
  --lk-sh-ink-soft: color-mix(in srgb, var(--lk-shade) 55%, transparent);
  --lk-sh-edge: color-mix(in srgb, var(--lk-shade) 90%, transparent);
  --lk-rim: inset 0 1px 0 color-mix(in srgb, var(--lk-ink) 9%, transparent);
  --lk-sh-glow: color-mix(in srgb, var(--lk-lavender) 14%, transparent);
}

:root {
  --lk-depth-1: 0 1px 2px var(--lk-sh-ink-soft), 0 2px 6px var(--lk-sh-ink-soft);
  --lk-depth-2: 0 2px 4px var(--lk-sh-ink-soft), 0 8px 18px var(--lk-sh-ink), 0 18px 40px var(--lk-sh-ink-soft);
  --lk-depth-3: 0 4px 8px var(--lk-sh-ink-soft), 0 14px 28px var(--lk-sh-ink), 0 32px 64px var(--lk-sh-ink-soft);
  --lk-hairline: linear-gradient(90deg, var(--lk-peach), var(--lk-orchid), var(--lk-cyan));
}

/* page ground: a soft wash at the top so surfaces read as lifted off something */
html[data-skin="nova"] body.lk-root {
  background-image: radial-gradient(120% 60% at 50% 0%, var(--lk-sh-glow), transparent 70%);
  background-repeat: no-repeat;
}

/* cards and panel sheets: contact + ambient shadow and a top rim light */
html[data-skin="nova"] .lk-card,
html[data-skin="nova"] .lk-sheet {
  border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), var(--lk-depth-2);
}
html[data-skin="nova"] .lk-gate .lk-card { box-shadow: var(--lk-rim), var(--lk-depth-3); }

/* buttons: a pressed-edge shadow gives them thickness; the fill colours are unchanged */
html[data-skin="nova"] .lk-btn--primary {
  box-shadow: inset 0 -2px 0 var(--lk-sh-edge), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-btn--secondary { box-shadow: var(--lk-depth-1); }
html[data-skin="nova"] .lk-btn:active { box-shadow: inset 0 2px 0 var(--lk-sh-edge); }

/* header: a comet-coloured hairline on top, lifted off the page, the current item pressed in */
html[data-skin="nova"] .lk-head { position: relative; box-shadow: 0 1px 0 var(--lk-line), 0 6px 18px var(--lk-sh-ink-soft); }
html[data-skin="nova"] .lk-head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--lk-hairline); pointer-events: none;
}
html[data-skin="nova"] .lk-head .lk-nav-link[aria-current="page"] {
  background: var(--lk-tint); box-shadow: inset 0 1px 2px var(--lk-sh-ink);
}

/* footer: the band layout is in chrome.css for every skin (since 2026-10-17). Depth adds the lift:
   a tint wash into the surface, a soft upward shadow, rounder corners and a pressed language switch. */
html[data-skin="nova"] .lk-foot {
  background: linear-gradient(to bottom, var(--lk-tint), var(--lk-surface) 60%);
  box-shadow: 0 -1px 0 var(--lk-line), 0 -12px 32px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-foot__note { border-radius: calc(var(--lk-radius) * 2); }

/* gate art: the isometric figure sits centred above the card (login, register, 2FA). The picture is
   an inline <svg><use> of img/skin/art.svg (see the gate macro): its fills are var(--lk-*) tokens
   that the <use> inherits from this page, so there is one file for every theme and no per-theme rule. */
html[data-skin="nova"] .lk-skin-art {
  width: min(100%, 130px);
  aspect-ratio: 640 / 420;
  margin: 0 auto 4px;
  pointer-events: none;
}
html[data-skin="nova"] .lk-skin-art__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Split gate (owner decision 2026-10-12): the form on the left half, the figure on the right half.
   The gate stays full width (so its ground matches the page); the columns are inset with padding.
   The figure sits beside the card and stays in view while a tall form scrolls. Under 900 px (phones,
   small tablets) there is no figure at all: the form is the page. */
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 48px;
    padding-top: 20px; padding-inline: max(24px, calc((100% - 1240px) / 2));
  }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__inner { grid-column: 1; grid-row: 1; margin: 0 auto; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-skin-art {
    grid-column: 2; grid-row: 1; width: min(100%, 560px); margin: 0 auto;
  }
  /* the whole form has to fit one screen without scrolling: the header already carries the wordmark,
     so the card drops its own, and spacing inside the card is tightened */
  /* the gate is exactly one screen tall (the header is 65 px), so the footer waits below the fold and
     a short form sits in the middle; a tall one scrolls only as far as it must */
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) {
    padding-block: 8px 8px; min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); align-content: center;
  }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__inner,
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-skin-art { align-self: center; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__inner { gap: 10px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login__brand { display: none; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-fold { margin-top: 0; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-card,
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login { padding: 16px 24px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__title { margin-bottom: 4px; font-size: 1.5rem; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__lead,
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login .lk-gate__lead { margin-bottom: 12px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-field { margin-bottom: 6px; gap: 4px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-form__actions { margin-top: 8px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-hint { margin-top: 6px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login__forgot { margin-top: 0; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login .lk-divider { margin: 0 0 8px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-login__new { padding-block: 0; }

  /* the pair hugs the middle of the screen: form and figure sit close, with no wide empty gutter */
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) {
    grid-template-columns: minmax(0, 600px) minmax(0, 600px); justify-content: center; column-gap: 32px;
  }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-gate__inner { margin: 0 0 0 auto; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art) .lk-skin-art { margin: 0 auto 0 0; width: min(100%, 600px); }
}
/* login and 2FA have room to spare on one screen, so their card is roomier than register's */
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-gate__inner { max-width: 500px; width: 100%; gap: 14px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-card,
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-login { padding: 28px 36px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-gate__title { font-size: 1.75rem; margin-bottom: 6px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-gate__lead { margin-bottom: 20px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-field { margin-bottom: 14px; gap: 6px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-form__actions { margin-top: 14px; }
  html[data-skin="nova"] .lk-gate:has(.lk-skin-art):not(:has(form[action="/auth/password/register"])) .lk-login .lk-divider { margin: 4px 0 14px; }
}
/* register, redesigned for one screen: the resend-confirmation form is a popover over the card instead
   of growing it, and from 1100 px username and email share a row (the card is wider) */
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-fold { position: relative; }
  html[data-skin="nova"] .lk-fold[open] > form {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 3; padding: 16px;
    background: var(--lk-surface); border: 1px solid var(--lk-line);
    border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-3);
  }
  html[data-skin="nova"] .lk-fold[open] > form .lk-field { margin-bottom: 8px; }
}
@media (min-width: 1100px) {
  html[data-skin="nova"] .lk-gate__inner:has(form[action="/auth/password/register"]) { max-width: 580px; }
  html[data-skin="nova"] form[action="/auth/password/register"] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start;
  }
  html[data-skin="nova"] form[action="/auth/password/register"] > * { grid-column: 1 / -1; }
  html[data-skin="nova"] form[action="/auth/password/register"] > .lk-field:nth-of-type(-n+2) { grid-column: auto; }
}
@media (max-width: 899px) {
  html[data-skin="nova"] .lk-skin-art { display: none; }
}

/* titles and lead lines: balanced lines, so a Thai word is not left alone on the last line */
html[data-skin="nova"] .lk-gate__title,
html[data-skin="nova"] .lk-gate__lead { text-wrap: balance; }

/* ---- home (redesign 2026-10-12) ----
   The first screen is the studio's: headline, one lead and two buttons on the left, the library figure
   (img/skin/art.svg#home) on the right, the same pair as the gate pages. The first shelf peeks in at the
   bottom of the screen. Below it everything is left-aligned on the container's edge (the first draft
   centred every block and read as squeezed). Depth is spent by importance: the figure, then the game
   capsules (raised off a shelf ledge), then the one sign-up panel; shelf heads and news are flat type. */
html[data-skin="nova"] .lk-sthero { padding-block: clamp(32px, 5vw, 48px) clamp(8px, 2vw, 16px); }
html[data-skin="nova"] .lk-sthero__grid { display: grid; gap: 24px; align-items: center; }
html[data-skin="nova"] .lk-sthero__copy { display: grid; gap: 20px; justify-items: start; max-width: 34rem; }
html[data-skin="nova"] .lk-sthero__copy > * { margin: 0; }
html[data-skin="nova"] .lk-sthero__title {
  font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); line-height: 1.3; text-wrap: balance;
}
html[data-skin="nova"] .lk-sthero__lead {
  max-width: 32rem; font-size: 1.125rem; line-height: 1.8; color: var(--lk-muted); text-wrap: pretty;
}
html[data-skin="nova"] .lk-phrase { display: inline-block; }
html[data-skin="nova"] .lk-sthero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
html[data-skin="nova"] .lk-sthero__actions .lk-btn { min-height: 48px; padding-inline: 24px; }
/* the figure stands on a soft pool of light, so it reads as an object in the page and not a picture */
html[data-skin="nova"] .lk-sthero__grid .lk-skin-art {
  display: block; width: min(100%, 600px); margin: 0 auto;
  background: radial-gradient(closest-side at 50% 62%, var(--lk-sh-glow), transparent);
}
@media (max-width: 899px) {
  html[data-skin="nova"] .lk-sthero__grid .lk-skin-art { width: min(88%, 420px); }
}
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-sthero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  html[data-skin="nova"] .lk-sthero__grid .lk-skin-art { margin: 0 0 0 auto; }
}

/* shelves: a flat head (title left, "see all" at the far edge on the same baseline), then the 2x2 grid of
   landscape capsules, each lifted by a soft shadow (the old ledge was sized for a 2:3 poster) */
html[data-skin="nova"] .lk-shelves { padding-block: 8px 16px; }
html[data-skin="nova"] .lk-shelf { padding-block: 24px 16px; }
html[data-skin="nova"] .lk-shelf__head { align-items: baseline; gap: 16px; margin-bottom: 12px; }
html[data-skin="nova"] .lk-shelf__title { font-size: 1.5rem; }
html[data-skin="nova"] .lk-shelf__all { margin-inline-start: auto; }
html[data-skin="nova"] .lk-shelf__track { gap: 24px 16px; padding: 4px 0 16px; }
html[data-skin="nova"] .lk-scard { gap: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
html[data-skin="nova"] .lk-scard__link { gap: 0; }
html[data-skin="nova"] .lk-scard__art {
  border-radius: calc(var(--lk-radius) * 1.5);
  box-shadow: var(--lk-rim), 0 2px 4px var(--lk-sh-ink-soft), 0 10px 20px var(--lk-sh-ink);
}
html[data-skin="nova"] .lk-scard__art--text {
  background: linear-gradient(165deg, color-mix(in srgb, var(--lk-lavender) 28%, var(--lk-tint)), var(--lk-surface) 85%);
}
html[data-skin="nova"] .lk-scard__title { margin-top: 12px; padding-inline: 2px; font-weight: 600; line-height: 1.45; }
html[data-skin="nova"] .lk-scard__meta { margin-top: 4px; padding-inline: 2px; }
html[data-skin="nova"] .lk-scard__tags { padding: 4px 2px 0; }

/* the sign-up panel: the one raised block below the fold, copy on the left and the buttons on the right */
html[data-skin="nova"] .lk-join { border-top: 0; padding-block: 32px 56px; }
html[data-skin="nova"] .lk-join__box {
  width: calc(100% - 32px); max-width: 1152px; padding: 24px; gap: 8px;
  background: linear-gradient(120deg, var(--lk-tint), var(--lk-surface) 65%);
  border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2.5);
  box-shadow: var(--lk-rim), var(--lk-depth-2);
}
html[data-skin="nova"] .lk-join__title { font-size: 1.375rem; }
html[data-skin="nova"] .lk-join__lead { color: var(--lk-muted); text-wrap: pretty; }
html[data-skin="nova"] .lk-join .lk-hero__actions { margin-top: 8px; }
@media (min-width: 721px) {
  html[data-skin="nova"] .lk-join__box { width: calc(100% - 48px); padding: 32px 40px; }
}
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-join__box { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
  html[data-skin="nova"] .lk-join__box > * { grid-column: 1; }
  html[data-skin="nova"] .lk-join .lk-hero__actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* news: a ruled list, the title on the left and the date on the right of the same row */
html[data-skin="nova"] .lk-section:has(> .lk-news) { border-top: 0; padding-block: 16px 64px; }
html[data-skin="nova"] .lk-news > .lk-section__title { font-size: 1.5rem; margin-bottom: 12px; }
html[data-skin="nova"] .lk-news > :not(.lk-section__title) { max-width: none; }
html[data-skin="nova"] .lk-newslist { gap: 0; border-top: 1px solid var(--lk-line); }
html[data-skin="nova"] .lk-newslist .lk-post {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px;
  margin: 0; padding-block: 8px; border-bottom: 1px solid var(--lk-line);
}
html[data-skin="nova"] .lk-newslist .lk-post__title { font-size: 1.0625rem; }

/* ---- browse (redesign 2026-10-12): a catalogue. The search bar is one calm panel; the results are
   roomy rows (a wide capsule, the title in ink, the status and tags under it, the price at the far
   edge). From 1100 px the filters leave the disclosure and become a column on the right, always open
   (where ::details-content is supported; elsewhere the disclosure simply stays). Left-aligned: a
   catalogue is read down its left edge. */
html[data-skin="nova"] .lk-browse { padding-block: 32px 64px; }
html[data-skin="nova"] .lk-browse__h1 { margin-bottom: 20px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); }
html[data-skin="nova"] .lk-browse__bar {
  padding: 16px 20px 20px; border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--lk-tint) 45%, var(--lk-surface)), var(--lk-surface));
  box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-browse__filters > summary { padding-inline: 4px; }
html[data-skin="nova"] .lk-browse__panel {
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1); padding: 20px;
}
html[data-skin="nova"] .lk-browse__count { margin: 24px 0 12px; }
/* radios and checkboxes take the brand fill, not the browser's default blue (QA 2026-10-12 F-055) */
html[data-skin="nova"] .lk-check input { accent-color: var(--lk-btn-fill); }
html[data-skin="nova"] .lk-rows { gap: 12px; }
html[data-skin="nova"] .lk-row {
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-row:hover { border-color: var(--lk-input-line); }
html[data-skin="nova"] .lk-row__link {
  grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 8px 24px; min-height: 96px; padding: 10px 24px 10px 10px;
}
html[data-skin="nova"] .lk-row__art { border-radius: calc(var(--lk-radius) * 1.5); box-shadow: var(--lk-depth-1); }
html[data-skin="nova"] .lk-row__art:not(:has(img)) {
  background: url("img/star.svg") center / 24px no-repeat,
    linear-gradient(150deg, color-mix(in srgb, var(--lk-lavender) 26%, var(--lk-tint)), var(--lk-surface) 90%);
}
html[data-skin="nova"] .lk-row .lk-row__title { align-self: end; font-size: 1.125rem; font-weight: 600; color: var(--lk-ink); }
html[data-skin="nova"] .lk-row__sub { align-self: start; }
html[data-skin="nova"] .lk-row__price .lk-buy__price { font-size: 1.25rem; }
html[data-skin="nova"] .lk-row__price { align-self: center; grid-row: 1 / span 2; }
@media (max-width: 599px) {
  html[data-skin="nova"] .lk-row__link { grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 4px 12px; min-height: 72px; padding: 8px 12px 8px 8px; }
  html[data-skin="nova"] .lk-row .lk-row__title { font-size: 1rem; }
  html[data-skin="nova"] .lk-browse__bar { padding: 12px 16px 16px; }
}
@media (min-width: 1100px) {
  html[data-skin="nova"] .lk-browse {
    display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 32px; align-items: start;
    grid-template-areas: "h1 h1" "bar side" "results side";
  }
  html[data-skin="nova"] .lk-browse__h1 { grid-area: h1; }
  html[data-skin="nova"] .lk-browse__form { display: contents; }
  html[data-skin="nova"] .lk-browse__bar { grid-area: bar; }
  html[data-skin="nova"] .lk-browse > section { grid-area: results; min-width: 0; }
  html[data-skin="nova"] .lk-browse__filters { grid-area: side; grid-row: 2 / span 2; margin: 0; position: sticky; top: 16px; }
  html[data-skin="nova"] .lk-browse__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; }
  html[data-skin="nova"] .lk-browse__tags { gap: 0 12px; }
  html[data-skin="nova"] .lk-browse__group:not(.lk-browse__tags) { display: grid; gap: 0; }
  html[data-skin="nova"] .lk-browse__lang { max-width: none; }
  @supports selector(::details-content) {
    html[data-skin="nova"] .lk-browse__filters::details-content { content-visibility: visible; display: block; }
    html[data-skin="nova"] .lk-browse__filters > summary { display: none; }
  }
}

/* ---- /about (redesign 2026-10-12): the same pair as the home hero, with the studio desk figure
   (art.svg#about); the studio name sits over the headline as a plain muted line. The About text below
   is one reading column with its heading on the same left edge. ---- */
html[data-skin="nova"] .lk-abhero { padding-block: clamp(32px, 5vw, 56px); }
/* a page that is only the hero fills one screen, like the gate pages: the footer waits below the fold */
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-abhero { display: grid; align-content: center; min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); }
  html[data-skin="nova"] .lk-abhero:not(:last-child) { min-height: 0; }
}
html[data-skin="nova"] .lk-abhero .lk-hero__kicker { margin-bottom: -8px; font-size: 1.0625rem; }
html[data-skin="nova"] .lk-abhero .lk-sthero__lead > * { margin: 0; }
html[data-skin="nova"] .pg-about + .lk-section { border-top: 0; padding-block: 16px 72px; }
html[data-skin="nova"] .pg-about + .lk-section .lk-container--narrow {
  max-width: 1200px; display: grid; gap: 16px;
}
html[data-skin="nova"] .pg-about + .lk-section .lk-prose {
  max-width: 64ch; padding: 24px 28px; line-height: 1.8;
  background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .pg-about + .lk-section .lk-section__title { margin: 0; font-size: 1.5rem; }

/* ---- game page, depth extras (Steam layout; the grid is shared with comet in storepage.css). No game
   colour and no wash at the top (owner 2026-10-17: the accent wash read as a red glow): depth only
   lifts the cards. The purchase box is the strongest shadow on the page, the glance card one step
   lower, the buy rows lower still. No motion here. ---- */
html[data-skin="nova"] .lk-store__price,
html[data-skin="nova"] .lk-store__glance { border-radius: calc(var(--lk-radius) * 2); }
html[data-skin="nova"] .lk-store__price {
  gap: 16px; padding: 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--lk-tint) 55%, var(--lk-surface)), var(--lk-surface));
  box-shadow: var(--lk-rim), var(--lk-depth-3);
}
html[data-skin="nova"] .lk-store__glance { padding: 20px 24px 24px; box-shadow: var(--lk-rim), var(--lk-depth-2); }
html[data-skin="nova"] .lk-pricerow__text { font-size: 1.25rem; }
html[data-skin="nova"] .lk-buy__row { border-radius: calc(var(--lk-radius) * 1.5); box-shadow: var(--lk-rim), var(--lk-depth-1); }
html[data-skin="nova"] .lk-signin { border-radius: calc(var(--lk-radius) * 1.5); box-shadow: var(--lk-rim); }
html[data-skin="nova"] .lk-store__h2 { font-size: 1.5rem; }
html[data-skin="nova"] .lk-mv__stage { border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-depth-2); }
/* the facts sit at the top of the glance card when there is no header art */
html[data-skin="nova"] .lk-store__glance > .lk-facts:first-of-type { margin-block-start: 0; }
/* language table: column names in the smaller size */
html[data-skin="nova"] .lk-store__langs .lk-langs thead th { font-size: 0.8125rem; line-height: 1.4; }
/* requirements: the platform switch reads as a heading row, not a stray link */
html[data-skin="nova"] .lk-sysreq > summary { font-weight: 600; color: var(--lk-ink); text-decoration: none; padding-inline-start: 0; }
html[data-skin="nova"] .lk-sysreq > summary:hover { text-decoration: underline; }

/* empty states: the card is raised, so the empty well is pressed into it (an inner shadow instead of
   the dashed line); the drawing from img/empty/lk-empty.svg stays as it is */
html[data-skin="nova"] .lk-state:not(.lk-state--error) {
  border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2);
  background: color-mix(in srgb, var(--lk-tint) 50%, var(--lk-surface)); box-shadow: inset 0 2px 8px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-state--error { border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-depth-1); }

/* /me: the account cards keep the card depth, except on phones where me.css flattens them into one
   ruled list (the card rule above would put a shadow back on each row) */
@media (max-width: 899px) {
  html[data-skin="nova"] .lk-me__side > .lk-me__card { border-radius: 0; box-shadow: none; }
}

/* library: the 2:3 capsules and the wishlist art sit just above the page, the owned-game banner is
   the page's top layer (the play bar under it is a plain card) */
html[data-skin="nova"] .lk-libcard__art,
html[data-skin="nova"] .lk-wrow__art { border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1); }
html[data-skin="nova"] .lk-libhero { border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-3); }

/* creator panel: shadows only, and quieter than the store (a work tool, dense pages). Blocks on a
   dashboard are one step up, a sheet (the surface being edited) two. From 900 px the nav column is
   painted by the shell gradient (panel.css; the nav itself is sticky and only as tall as its links),
   so its shadow on the work area is one more stop in that gradient */
html[data-skin="nova"] .lk-block { border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1); }
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-panel__shell {
    background-image: linear-gradient(to right, var(--lk-surface) 232px, var(--lk-line) 232px 233px, var(--lk-sh-ink-soft) 233px, transparent 257px);
  }
}

/* ---- /me (redesign 2026-10-12, restrained): left-aligned, because these pages are forms and lists
   that are scanned down one edge, with the settings contents in a column beside them. The page head
   gets more room and a reading measure; the settings contents become a quiet list whose current
   item is a pressed-in tab instead of a thicker underline. ---- */
html[data-skin="nova"] .lk-me .lk-page-header { margin-bottom: 28px; }
html[data-skin="nova"] .lk-me .lk-page-header h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.3; }
html[data-skin="nova"] .lk-me .lk-page-header p { max-width: 64ch; margin-top: 8px; line-height: 1.7; text-wrap: pretty; }
html[data-skin="nova"] .lk-set__toc-link {
  color: var(--lk-ink); text-decoration: none; border-radius: var(--lk-radius);
}
html[data-skin="nova"] .lk-set__toc-link:hover { text-decoration: underline; }
html[data-skin="nova"] .lk-set__toc-link[aria-current="page"] {
  background: var(--lk-tint); box-shadow: inset 3px 0 0 var(--lk-link), inset 0 1px 2px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-me__card { border-radius: calc(var(--lk-radius) * 2); }

/* ---- /me profile (2026-10-12): the account home reads as the player's profile. One raised plate
   holds who you are (avatar, name, handle, member since) and the way to change it; under the name,
   three counts are pressed into the plate as wells (they are links, so they are not raised buttons).
   The cards below keep the calm card depth; security sits right under the name card because it is
   the one card that may ask the player to act. ---- */
html[data-skin="nova"] .lk-prof {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center;
  margin: 0 0 20px; padding: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--lk-tint) 70%, var(--lk-surface)), var(--lk-surface) 70%);
  border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2.5);
  box-shadow: var(--lk-rim), var(--lk-depth-2);
}
html[data-skin="nova"] .lk-prof > .lk-avatar { box-shadow: var(--lk-rim), var(--lk-depth-1); border-radius: calc(var(--lk-radius) * 2); }
html[data-skin="nova"] .lk-prof__who { display: grid; gap: 6px; min-width: 0; }
html[data-skin="nova"] .lk-prof__name {
  margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance;
}
html[data-skin="nova"] .lk-prof__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; color: var(--lk-muted);
}
html[data-skin="nova"] .lk-prof__edit { grid-column: 1 / -1; }
html[data-skin="nova"] .lk-prof__edit .lk-btn { width: 100%; }
html[data-skin="nova"] .lk-prof__stats {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
html[data-skin="nova"] .lk-prof__stats a {
  display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 8px 12px;
  color: var(--lk-ink); text-decoration: none;
  background: color-mix(in srgb, var(--lk-bg) 55%, var(--lk-surface)); border: 1px solid var(--lk-line);
  border-radius: calc(var(--lk-radius) * 1.5); box-shadow: inset 0 2px 6px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-prof__stats a:hover { border-color: var(--lk-input-line); }
html[data-skin="nova"] .lk-prof__stats a:hover span { text-decoration: underline; }
html[data-skin="nova"] .lk-prof__stats strong { justify-self: start; font-size: 1.5rem; line-height: 1.2; text-align: start; }
html[data-skin="nova"] .lk-prof__stats span { color: var(--lk-muted); font-size: 0.875rem; line-height: 1.4; }
@media (min-width: 720px) {
  html[data-skin="nova"] .lk-prof {
    grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px 28px; column-gap: 24px;
  }
  html[data-skin="nova"] .lk-prof__edit { grid-column: 3; grid-row: 1; align-self: start; }
  html[data-skin="nova"] .lk-prof__edit .lk-btn { width: auto; }
  html[data-skin="nova"] .lk-prof__stats { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 11rem)); }
  html[data-skin="nova"] .lk-prof__stats a { padding-inline: 16px; }
}
html[data-skin="nova"] .lk-prof__state { margin: 0 0 8px; }
html[data-skin="nova"] .lk-prof__uid { overflow-wrap: anywhere; }
/* from 900 px the library runs the full width and the account cards sit under it in two columns, so a
   short library no longer leaves a tall empty column beside five stacked cards */
@media (min-width: 900px) {
  html[data-skin="nova"] .lk-me__home:has(> .lk-me__main) { grid-template-columns: minmax(0, 1fr); }
  html[data-skin="nova"] .lk-me__home > .lk-me__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* PU-B work queue in depth: one depth-1 block like .lk-block, the badge gets the rim */
html[data-skin="nova"] .lk-panel .lk-todo {
  padding: 12px 16px; background: var(--lk-surface); border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-side__count { box-shadow: var(--lk-rim); }

/* ---- panel in 2.5D (owner request 2026-10-18, docs/log/2026-10-18-panel-ux-polish.md) ----
   The home page's vocabulary carried into /panel: raised things (buttons, cards, tiles) get the top
   rim light, a bottom lip and the contact + ambient shadow; things you type into or that mark "you
   are here" (fields, the current tab, the current nav item) are pressed in. Same shade tokens as above,
   so light and dark follow tokens.css. Nothing moves on its own: a press is a 1px step on :active with
   no transition. Focus rings are untouched (components.css outline). */

/* buttons: primary and solid danger keep their fill and gain thickness; secondary and the outline
   danger link stand on the surface instead of the page so the lip reads */
html[data-skin="nova"] .lk-panel .lk-btn--primary,
html[data-skin="nova"] .lk-panel .lk-btn--danger {
  box-shadow: var(--lk-rim), inset 0 -2px 0 var(--lk-sh-edge), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-btn--secondary,
html[data-skin="nova"] .lk-panel .lk-btn--danger-quiet {
  background: var(--lk-surface);
  box-shadow: var(--lk-rim), inset 0 -1px 0 var(--lk-sh-edge), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-btn:active {
  transform: translateY(1px); box-shadow: inset 0 2px 0 var(--lk-sh-edge);
}
html[data-skin="nova"] .lk-panel .lk-btn:disabled,
html[data-skin="nova"] .lk-panel .lk-btn[aria-disabled="true"] { box-shadow: none; transform: none; }

/* fields: a shallow well, a shade darker than the card they sit on */
html[data-skin="nova"] .lk-panel :is(.lk-field input, .lk-field select, .lk-field textarea) {
  background: color-mix(in srgb, var(--lk-bg) 55%, var(--lk-surface));
  box-shadow: inset 0 2px 4px var(--lk-sh-ink-soft);
}

/* surfaces: every top-level card of the panel is one step up, rounder like the home page cards */
html[data-skin="nova"] .lk-panel :is(.lk-filter, .lk-readout__list, .lk-hub__list, .lk-retired, .lk-chart, .lk-table-wrap) {
  border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-sheet { box-shadow: var(--lk-rim), var(--lk-depth-1); }
/* a table or chart inside a card is part of that card: no second lift */
html[data-skin="nova"] .lk-panel :is(.lk-block, .lk-sheet, .lk-retired, .lk-row-action__body, .lk-settings__body) .lk-table-wrap,
html[data-skin="nova"] .lk-panel .lk-trendstrip .lk-chart { box-shadow: none; border-radius: var(--lk-radius); }
html[data-skin="nova"] .lk-panel .lk-confirm {
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-2);
}

/* work queue: the tiles are the raised things (the PU-B box around them is dropped); a tile with
   work is one step higher than an empty one, and presses in on :active like a button */
html[data-skin="nova"] .lk-panel .lk-todo { padding: 0; background: none; border-radius: 0; box-shadow: none; }
html[data-skin="nova"] .lk-panel .lk-todo__list .lk-todo__link {
  border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), inset 0 -2px 0 var(--lk-sh-ink-soft), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-todo__zero .lk-todo__link { box-shadow: var(--lk-rim); }
html[data-skin="nova"] .lk-panel .lk-todo__list .lk-todo__link:active {
  transform: translateY(1px); box-shadow: inset 0 2px 4px var(--lk-sh-ink-soft);
}

/* per-game tab row: a raised rail, the current tab pressed into it (the header nav's language) */
html[data-skin="nova"] .lk-panel .lk-gtabs {
  padding: 4px; background: var(--lk-surface); border: 1px solid var(--lk-line);
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-gtabs__link,
html[data-skin="nova"] .lk-panel .lk-gtabs__summary { border-radius: var(--lk-radius); }
html[data-skin="nova"] .lk-panel .lk-gtabs__link[aria-current="page"] {
  background: var(--lk-tint); box-shadow: inset 0 1px 3px var(--lk-sh-ink);
}
html[data-skin="nova"] .lk-panel .lk-gtabs__menu {
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-3);
}

/* side nav: the current page is pressed in, with its accent rule kept on the left */
html[data-skin="nova"] .lk-panel .lk-side__link[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--lk-link), inset 0 1px 3px var(--lk-sh-ink);
}

/* status chips: a thin rim and a hairline shadow, so they sit on the row like small tags */
html[data-skin="nova"] .lk-panel .lk-chip { box-shadow: var(--lk-rim), 0 1px 2px var(--lk-sh-ink-soft); }

/* ---- panel round 3 (owner 2026-10-18: "more beautiful", depth skin only) ----
   One light source, three heights: the page (flat), cards (one step, a faint tint sheen at the top
   fading into the surface) and the things you act on (tiles and buttons, the lip). Every colour is
   a token or a token mixed with another token or transparent; text stays on surface/bg/tint mixes
   that keep AA (muted on a tint-surface mix measures over 6:1 in both themes). Nothing moves. */
:root {
  --lk-plot: color-mix(in srgb, var(--lk-bg) 60%, var(--lk-surface));
  --lk-sheen: linear-gradient(180deg, color-mix(in srgb, var(--lk-tint) 45%, var(--lk-surface)), var(--lk-surface) 72%); }

/* page header: the comet hairline under the title, short, so the page has one signature mark */
html[data-skin="nova"] .lk-panel .lk-page-header { position: relative; padding-bottom: 18px; }
html[data-skin="nova"] .lk-panel .lk-page-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px;
  border-radius: var(--lk-radius); background: var(--lk-hairline);
}

/* blocks: raised like the other cards, the head on the sheen, the title led by a short accent bar */
html[data-skin="nova"] .lk-panel .lk-block {
  border-radius: calc(var(--lk-radius) * 2); box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-block__head {
  background: var(--lk-sheen); border-radius: calc(var(--lk-radius) * 2) calc(var(--lk-radius) * 2) 0 0;
}
html[data-skin="nova"] .lk-panel .lk-block__title { display: inline-flex; align-items: center; gap: 10px; }
html[data-skin="nova"] .lk-panel .lk-block__title::before {
  content: ""; flex: none; width: 4px; height: 1.1em; border-radius: var(--lk-radius); background: var(--lk-link);
}
html[data-skin="nova"] .lk-panel .lk-block .lk-chart { box-shadow: none; }

/* readout strips become a row of figure tiles: big number, label under it, each on the sheen */
html[data-skin="nova"] .lk-panel .lk-readout__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px;
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-skin="nova"] .lk-panel .lk-readout__fig,
html[data-skin="nova"] .lk-panel .lk-readout__fig:first-child,
html[data-skin="nova"] .lk-panel .lk-readout__fig:last-child {
  min-width: 0; padding: 14px 18px; background: var(--lk-sheen);
  border: 1px solid var(--lk-line); border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), inset 0 -2px 0 var(--lk-sh-ink-soft), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-readout__value { font-weight: 600; letter-spacing: 0; }
@media (min-width: 720px) {
  html[data-skin="nova"] .lk-panel .lk-readout__value { font-size: clamp(1.5rem, 2.2vw, 2rem); }
}

/* tables: a tinted header row, quiet zebra rows, and on hover an accent rule at the row's start
   (the hover background stays the page tone, which keeps every chip at AA) */
html[data-skin="nova"] .lk-panel .lk-table th { background: color-mix(in srgb, var(--lk-tint) 40%, var(--lk-surface)); }
html[data-skin="nova"] .lk-panel .lk-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--lk-bg) 55%, var(--lk-surface)); }
@media (hover: hover) {
  html[data-skin="nova"] .lk-panel .lk-table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--lk-link); }
}

/* empty states: a soft well with the art, so "nothing yet" looks intended, not broken */
html[data-skin="nova"] .lk-panel .lk-state {
  border-radius: calc(var(--lk-radius) * 2);
  background: radial-gradient(80% 70% at 50% 0%, var(--lk-sh-glow), transparent 70%), var(--lk-surface);
  box-shadow: inset 0 2px 6px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-panel .lk-block > .lk-state { box-shadow: none; }

/* attention strip: the tiles carry their state as a wash under the words (the words still say it) */
html[data-skin="nova"] .lk-panel .lk-todo__title { font-size: 1.25rem; }
html[data-skin="nova"] .lk-panel .lk-todo__item--warn .lk-todo__link { background: var(--lk-sheen); }
html[data-skin="nova"] .lk-panel .lk-todo__item--danger .lk-todo__link {
  min-height: 72px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lk-danger) 10%, var(--lk-surface)), var(--lk-surface) 75%);
}
html[data-skin="nova"] .lk-panel .lk-todo__zero .lk-todo__link { background: var(--lk-bg); }
html[data-skin="nova"] .lk-panel .lk-todo__n { font-size: 2rem; }

/* health tiles: small raised readings, the status rule on top, the word in its chip */
html[data-skin="nova"] .lk-panel .lk-vitals__tile {
  background: var(--lk-sheen); border-radius: calc(var(--lk-radius) * 2);
  box-shadow: var(--lk-rim), var(--lk-depth-1);
}
html[data-skin="nova"] .lk-panel .lk-vitals__value { font-size: 1.25rem; }

/* trend cells and the weekly candles: inset plots, like the readings of an instrument */
html[data-skin="nova"] .lk-panel .lk-trendstrip .lk-chart__plot,
html[data-skin="nova"] .lk-panel .lk-weeks .lk-chart__plot {
  padding: 8px; background: var(--lk-plot);
  border-radius: var(--lk-radius); box-shadow: inset 0 1px 3px var(--lk-sh-ink-soft);
}
/* bars are outlined in the ground colour (panel.css) so neighbours never touch: the ground is now the
   well, so the outline follows it, and a hollow candle is filled with it */
html[data-skin="nova"] .lk-panel :is(.lk-trendstrip, .lk-weeks) .lk-chart__bar { stroke: var(--lk-plot); stroke-width: 1.5px; }
html[data-skin="nova"] .lk-panel .lk-chart__candle--down .lk-chart__body { fill: var(--lk-plot); }
html[data-skin="nova"] .lk-panel .lk-delta {
  align-self: flex-start; padding: 2px 10px; background: var(--lk-bg); border-radius: calc(var(--lk-radius) * 3);
  box-shadow: var(--lk-rim), 0 1px 2px var(--lk-sh-ink-soft);
}
html[data-skin="nova"] .lk-panel .lk-share__fill { fill: var(--lk-link); }

/* phones: the queue tiles stack, so they get denser (still 44px+ targets) */
@media (max-width: 720px) {
  html[data-skin="nova"] .lk-panel .lk-todo__list .lk-todo__link,
  html[data-skin="nova"] .lk-panel .lk-todo__item--danger .lk-todo__link { min-height: 56px; padding: 10px 14px; row-gap: 2px; }
  html[data-skin="nova"] .lk-panel .lk-todo__n { font-size: 1.5rem; }
  html[data-skin="nova"] .lk-panel .lk-todo__zero .lk-todo__link { min-height: 48px; }
}