/* LiNK site chrome + gate pages, "Comet" system, phase C1.
   Colours come only from --lk-* tokens (tests/test_chrome_css.py rejects raw colours and
   any other var()). public_base and me_base follow the OS theme
   (data-theme only when the account forces one). */

/* ---- one focus ring everywhere (the one ring for every page) ---- */
:is(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lk-focus);
  outline-offset: 2px;
}
.skip-link {
  background: var(--lk-surface);
  color: var(--lk-ink);
  border: 2px solid var(--lk-focus);
  border-radius: var(--lk-radius);
}
.lk-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline: 4px;
  color: var(--lk-link); text-decoration: underline; text-underline-offset: 0.2em;
}

/* ---- header ---- */
.lk-head {
  background: var(--lk-surface);
  color: var(--lk-ink);
  border-bottom: 1px solid var(--lk-line);
  backdrop-filter: none;
}
.lk-head .wordmark, .lk-foot .wordmark {
  font-family: var(--lk-font-head); font-weight: 600; letter-spacing: normal; color: var(--lk-ink);
}
.lk-head .wordmark b, .lk-foot .wordmark b { color: var(--lk-link); }
.lk-head .site-menu { display: flex; align-items: center; order: 2; margin-left: auto; }
.lk-head__tools { display: flex; align-items: center; gap: 8px; order: 3; margin-left: 8px; }
/* search icon (links to /browse#q): in the bar from 900 px, where the store nav sits inline; the
   folded menu has "Browse" instead, so the phone bar keeps its room */
.lk-head .lk-head__search { display: none; align-items: center; justify-content: center; order: 3; margin-left: 8px; }
@media (min-width: 900px) {
  .lk-head .lk-head__search { display: inline-flex; }
}
/* the search link looks like a short search box: icon + the label in a bordered field */
@media (min-width: 900px) {
  .lk-head .lk-head__search {
    justify-content: flex-start; gap: 8px; min-width: 150px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--lk-input-line); border-radius: var(--lk-radius); background: var(--lk-bg); color: var(--lk-muted);
  }
  .lk-head .lk-head__search:hover { background: var(--lk-tint); color: var(--lk-ink); }
}
@media (min-width: 1200px) {
  .lk-head .lk-head__search { min-width: 220px; }
}
.lk-head__searchtext { white-space: nowrap; }
.lk-head .site-nav { gap: 4px 12px; font-size: 1rem; }
.lk-head .lk-nav-link {
  min-height: 44px; min-width: 44px; padding-inline: 10px;
  color: var(--lk-ink); text-decoration: none; border-radius: var(--lk-radius);
  transition: none;
}
.lk-head .site-nav .lk-nav-link { min-height: 44px; min-width: 44px; }
.lk-head .lk-nav-link:hover { background: var(--lk-tint); }
.lk-head .lk-nav-link[aria-current="page"] {
  font-weight: 700; box-shadow: inset 0 -3px 0 var(--lk-link); background: var(--lk-tint);
}
.lk-head .lang-switch a {
  color: var(--lk-muted); border-radius: var(--lk-radius); transition: none;
}
.lk-head .lang-switch a.on { color: var(--lk-ink); background: var(--lk-tint); font-weight: 700; }
.lk-head .site-nav .cta-sm {
  min-height: 44px; padding-inline: 16px;
  background: var(--lk-btn-fill); color: var(--lk-btn-ink);
  border: 1px solid transparent; border-radius: var(--lk-radius); font-weight: 600; transition: none;
}
/* signed out: outline login (inside the menu) next to the filled sign-up (in the bar) */
.lk-head .site-nav .cta-sm--outline {
  background: transparent; color: var(--lk-ink); border-color: var(--lk-input-line);
}
.lk-head .site-nav .cta-sm--outline:hover { background: var(--lk-tint); }
.lk-head .lk-head__tools--signup .cta-sm {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px;
  background: var(--lk-btn-fill); color: var(--lk-btn-ink); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--lk-radius); font-weight: 600; transition: none;
}
.lk-head .nav-logout-btn {
  min-height: 44px; min-width: 44px; padding-inline: 14px;
  color: var(--lk-ink); background: transparent;
  border: 1px solid var(--lk-input-line); border-radius: var(--lk-radius); transition: none;
}
.lk-head .nav-logout-btn:hover { background: var(--lk-tint); }

/* ---- new / unread marker: sparkle + word + count, never colour alone ---- */
.noti-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.noti-badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px;
  background: var(--lk-btn-fill); color: var(--lk-btn-ink);
  border-radius: var(--lk-radius); font-size: 0.875rem; font-weight: 700; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.noti-badge[hidden] { display: none; }
.noti-badge .lk-icon { width: 0.9em; height: 0.9em; }
/* QA r2 M-002: the word + sparkle + count pill (67 px) pushed the Menu button past the right edge
   of a 375 px phone. On phones it becomes a small count chip on the bell's corner and takes no
   width; the word and sparkle stay for screen readers and the link keeps its "new" aria-label. */
@media (max-width: 599px) {
  .lk-head .noti-link { position: relative; }
  .lk-head .noti-badge {
    position: absolute; top: 4px; inset-inline-end: 2px; min-height: 18px; min-width: 18px;
    padding: 0 4px; justify-content: center; font-size: 0.75rem; line-height: 18px;
  }
  .lk-head .noti-badge .lk-icon,
  .lk-head .noti-badge .lk-badge__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---- mobile menu: a real button, only when nav.js has run (no JS = the nav simply wraps) ---- */
.lk-menu-btn { display: none; }
/* the site menu folds below 900 px: the store nav (Store, Browse, Wishlist, Library) does not fit
   one row beside the tools any earlier. Same width the panel's side nav already folds at. */
@media (max-width: 899px) {
  .lk-js .lk-menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    background: transparent; color: var(--lk-ink);
    border: 1px solid var(--lk-input-line); border-radius: var(--lk-radius);
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .lk-js .lk-menu-btn[aria-expanded="true"] { background: var(--lk-tint); }
  .lk-js .lk-head .site-menu { display: none; width: 100%; }
  .lk-js .lk-head .site-menu[data-open="true"] {
    display: block; position: absolute; top: 100%; inset-inline: 0; z-index: 30;
    padding: 8px 16px 16px; background: var(--lk-surface); border-bottom: 1px solid var(--lk-line);
  }
  .lk-js .lk-head .site-nav { flex-direction: column; align-items: stretch; width: 100%; }
  .lk-js .lk-head .lk-nav-link { justify-content: flex-start; }
  /* DOM: wordmark, Menu button, #site-menu, tools. The phone draws wordmark, tools, Menu button
     (last) on one row; the open menu floats under that row. */
  .lk-head__tools { order: 1; margin-left: auto; }
  .lk-js .lk-menu-btn { order: 2; margin-left: 0; }
  .lk-head .site-menu { order: 3; margin-left: 0; }
}
/* narrow phones: the avatar loses its chevron (375 budget), then the wordmark shrinks and the Menu
   button keeps only its icon (its label stays for screen readers) */
@media (max-width: 379px) {
  .lk-profile__btn .lk-icon { display: none; }
  /* signed in at 360: wordmark + tools + Menu overran the viewport by 2px, so the bar's gap tightens */
  .lk-head .lk-head__bar { column-gap: 6px; }
  /* signed out at 360: wordmark + Sign up + theme + "Menu" overran by 6px, so Menu keeps its icon */
  .lk-js .lk-head__bar:has(.lk-head__tools--signup) .lk-menu-btn { padding: 0; min-width: 44px; justify-content: center; }
  .lk-head__bar:has(.lk-head__tools--signup) .lk-menu-btn__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .lk-wordmark .lk-wordmark__img { height: 24px; }
  .lk-js .lk-menu-btn { padding: 0; min-width: 44px; justify-content: center; }
  .lk-menu-btn__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* signed in on a public page the tools also hold the theme switch: wordmark + theme + settings +
   bell + avatar + "Menu" came to 402 px and the page scrolled sideways at 375. Below 420 px that bar
   keeps only the Menu icon (the label stays for screen readers) and the avatar drops its chevron
   (78 -> 50 px): at 390 the row was 383 px in a 358 px box (page 399 wide), now 355 px. */
@media (max-width: 419px) {
  .lk-head__bar:has(.lk-head__tools > .lk-theme-btn):has(.lk-profile) .lk-profile__btn .lk-icon { display: none; }
  .lk-js .lk-head__bar:has(.lk-head__tools > .lk-theme-btn):has(.lk-profile) .lk-menu-btn { padding: 0; min-width: 44px; justify-content: center; }
  .lk-head__bar:has(.lk-head__tools > .lk-theme-btn):has(.lk-profile) .lk-menu-btn__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* from 360 px the Menu label is back beside the icon */
@media (min-width: 360px) {
  .lk-menu-btn { gap: 8px; }
}

/* 900-1099 px signed out: the inline store nav (4 links, language, Sign in) beside search, Sign up
   and the theme switch needed ~70 px more than the bar had, so the nav wrapped to two rows (108 px,
   QA 2026-10-12 F-048). The gaps and link padding tighten until 1100 px, where it fits as before. */
@media (min-width: 900px) and (max-width: 1099px) {
  .lk-head .site-nav { column-gap: 4px; }
  .lk-head .site-nav .lk-nav-link { padding-inline: 6px; }
  .lk-head .site-nav .cta-sm { padding-inline: 10px; }
}
/* ---- footer ---- */
.lk-foot { position: relative; background: var(--lk-surface); color: var(--lk-muted); border-top: 1px solid var(--lk-line); }
.lk-foot__links { margin: 0; padding: 0; list-style: none; }

/* ---- C2: one container for header and footer, the wordmark per theme, footer columns ---- */
.lk-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 721px) {
  .lk-container { padding-inline: 24px; }
}
.lk-head { padding: 0; }
/* one row at every width (320 to 1920); the phone drawer floats under the bar instead of wrapping */
.lk-head__bar {
  position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 12px;
  min-height: 64px; padding-block: 8px;
}
.lk-head__bar > * { flex-shrink: 0; }
.lk-head__bar > .site-menu { flex-shrink: 1; min-width: 0; } /* no JS: the nav wraps inside it */
.lk-wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.lk-wordmark .lk-wordmark__img { display: block; width: auto; height: 28px; }
.lk-foot .lk-wordmark .lk-wordmark__img { height: 40px; }
.lk-wordmark .lk-wordmark__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lk-wordmark .lk-wordmark__img--dark { display: block; }
  :root:not([data-theme="light"]) .lk-wordmark .lk-wordmark__img--light { display: none; }
}
:root[data-theme="dark"] .lk-wordmark .lk-wordmark__img--dark { display: block; }
:root[data-theme="dark"] .lk-wordmark .lk-wordmark__img--light { display: none; }
/* The footer band (owner-approved depth design, 2026-10-12; in every skin since 2026-10-17, before
   that it lived in skin-nova.css only, so the default "comet" site still showed the old three
   columns). Row 1: brand | links | language switch and the 18+ note; row 2: the legal line. Under
   1100 px everything is one centred column. The same brand hairline as the depth header sits on top.
   skin-nova.css adds only shadows and rounder corners. */
.lk-foot { padding-block: 32px 0; font-size: 0.9375rem; }
.lk-foot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none;
  background: linear-gradient(to right, var(--lk-peach), var(--lk-orchid), var(--lk-cyan));
}
.lk-foot__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px;
}
.lk-foot__brand { display: grid; justify-items: center; }
.lk-foot__tagline { margin: 8px 0 0; color: var(--lk-muted); text-wrap: balance; line-height: 1.6; }
/* follow links: a wrapped row of plain text links under the tagline, 44px touch targets */
.lk-foot__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: 4px 0 0; padding: 0; list-style: none; }
.lk-foot__social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--lk-ink); border-bottom: 2px solid transparent; }
.lk-foot__social a:hover { border-bottom-color: var(--lk-orchid); }
/* links: plain text links in a row, an underline on hover, never chips */
.lk-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.lk-foot__links a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--lk-ink);
  border-bottom: 2px solid transparent;
}
.lk-foot__links a { white-space: nowrap; }
.lk-foot__links a:hover { border-bottom-color: var(--lk-orchid); }
/* meta: the language switch (a segmented control) and the 18+ note side by side */
.lk-foot__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.lk-foot__note {
  display: inline-block; padding: 8px 14px; margin: 0; background: var(--lk-tint); color: var(--lk-ink);
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius); line-height: 1.5;
}
@media (min-width: 1100px) {
  .lk-foot__grid {
    grid-template-columns: auto auto minmax(0, 1fr); align-items: center; justify-items: stretch;
    gap: 24px 40px; text-align: start;
  }
  .lk-foot__brand { justify-items: start; }
  .lk-foot__meta { justify-content: flex-end; }
}
/* legal line: one centred row, small and muted */
.lk-foot__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 24px; text-align: center;
  margin-top: 24px; padding-block: 8px; border-top: 1px solid var(--lk-line);
}
.lk-foot__legal p { margin: 0; color: var(--lk-muted); }
.lk-foot__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.lk-foot__legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.lk-foot__legal .lk-foot__ver { font-size: 0.8125rem; }
.lk-foot__ver code { font-family: ui-monospace, monospace; user-select: all; }

/* ---- gate pages (login, register, reset, activate, age gate, errors) ---- */
.lk-gate { display: block; padding: clamp(24px, 6vw, 64px) 0; min-height: 60vh; }
.lk-gate__inner { display: grid; gap: 16px; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 16px; }
.lk-card {
  background: var(--lk-surface); border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius); padding: 28px 24px;
}
.lk-card--center { text-align: center; }
.lk-gate__code { margin: 0 0 0.25rem; font-family: var(--lk-font-mono); color: var(--lk-muted); font-variant-numeric: tabular-nums; }
.lk-gate__title { margin: 0 0 0.5rem; font-size: 1.625rem; line-height: 1.25; letter-spacing: normal; }
.lk-gate__lead { margin: 0 0 1.25rem; color: var(--lk-muted); }
.lk-gate__status { margin: 0 0 1rem; }
.lk-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.25rem; }
.lk-card--center .lk-gate__actions { justify-content: center; }
.lk-gate form { margin: 0; }
/* R3 Pb: split gate. DOM: cards, then the comet art, so phones show the form first and the still
   below it (256 px); from 900 px the art sits beside the cards at inline-end. Used by every gate
   page (login, register, forgot, reset, 2FA, verify, age gate, activate, error). */
.lk-gate__cards { display: grid; gap: 16px; min-width: 0; }
.lk-gate__art { width: 100%; max-width: 256px; justify-self: center; }
@media (min-width: 900px) {
  .lk-gate__inner--split {
    max-width: 920px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: center;
  }
  .lk-gate__art { max-width: 420px; justify-self: stretch; }
}
/* login page: one centred card (wordmark, heading, form, then the other ways in) and, under it,
   a quiet line for people without an account. Same .lk-card as the register page. */
.lk-login { padding: 32px 28px; }
.lk-login__brand { margin: 0 0 12px; }
.lk-card--center .lk-login__brand { justify-content: center; }
.lk-login .lk-gate__lead { margin-bottom: 1.5rem; }
.lk-login .lk-field input { min-height: 44px; }
.lk-login__forgot { margin: 1rem 0 0; text-align: center; }
.lk-login__forgot .lk-link, .lk-login__new .lk-link { display: inline-block; padding-block: 12px; }
.lk-login .lk-divider { margin: 0.5rem 0 1rem; }
.lk-login__sso { margin-top: 0; }
.lk-login .lk-login__sso .lk-btn { width: 100%; }
.lk-login__new {
  margin: 0; padding: 4px 16px; text-align: center; color: var(--lk-muted);
  border: 1px dashed var(--lk-line); border-radius: var(--lk-radius);
}
/* register page: a rule line stays under every field (also while its error shows), the 18+ and terms
   tick is a bordered row so it reads in dark mode too, and one quiet line says what happens next */
.lk-reg .lk-field { margin-bottom: 12px; }
.lk-reg .lk-field__help, .lk-reg .lk-field__error { overflow-wrap: anywhere; }
/* Thai has no spaces, so a long line breaks mid-phrase and leaves a one-word last line:
   balance the lines of every message on this form */
.lk-reg .lk-field__help, .lk-reg .lk-field__error, .lk-reg__next span,
.lk-gate .lk-alert__body, .lk-gate .lk-gate__lead { text-wrap: balance; }
.lk-reg .lk-check-wrap { margin-bottom: 12px; }
.lk-reg .lk-check {
  align-items: center; min-height: 0; margin: 0; padding: 12px; gap: 12px;
  background: var(--lk-bg); border: 1px solid var(--lk-input-line); border-radius: var(--lk-radius);
}
/* own box, not the browser's: its unticked border is too faint on the dark surface (QA found the
   18+ tick hard to see). The border is --lk-input-line (3:1 on both surfaces), the tick is --lk-btn-ink. */
.lk-reg .lk-check input {
  appearance: none; display: grid; place-content: center; flex: none; margin: 0;
  width: 1.5rem; height: 1.5rem; background: var(--lk-surface);
  border: 2px solid var(--lk-input-line); border-radius: var(--lk-radius);
}
.lk-reg .lk-check input::before {
  content: ""; width: 0.75rem; height: 0.75rem; transform: scale(0); background: var(--lk-btn-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.lk-reg .lk-check input:checked { background: var(--lk-btn-fill); border-color: var(--lk-btn-fill); }
.lk-reg .lk-check input:checked::before { transform: scale(1); }
.lk-reg .lk-check input:focus-visible { outline: 2px solid var(--lk-focus); outline-offset: 2px; }
.lk-reg .lk-check:has(input[aria-invalid="true"]) { border-color: var(--lk-danger); border-width: 2px; padding: 11px; }
@media (forced-colors: active) {
  .lk-reg .lk-check input:checked::before { background: currentColor; }
}
.lk-reg .lk-check-wrap .lk-field__error { margin-top: 8px; }
.lk-reg__next { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; color: var(--lk-muted); font-size: 0.9375rem; }
.lk-reg__next .lk-icon { flex: none; margin-top: 0.25em; }
/* gate labels: full size, sentence case, ink (Thai tone marks need the room) */
.lk-gate .lk-field label { display: block; margin: 0; font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--lk-ink); }
.lk-field--mono input { font-family: var(--lk-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.lk-form__actions { display: grid; gap: 10px; margin-top: 1rem; }
@media (max-width: 720px) {
  .lk-form__actions .lk-btn { width: 100%; }
}
.lk-hint { margin: 1rem 0 0; color: var(--lk-muted); font-size: 0.9375rem; }
.lk-divider { display: flex; align-items: center; gap: 12px; margin: 1rem 0; color: var(--lk-muted); }
.lk-divider::before, .lk-divider::after { content: ""; flex: 1; height: 1px; background: var(--lk-line); }
.lk-notice {
  max-width: none; margin: 0 0 1rem; padding: 0.7rem 0.9rem; font-size: 1rem;
  background: var(--lk-bg); color: var(--lk-ink);
  border: 1px solid var(--lk-input-line); border-left-width: 4px; border-radius: var(--lk-radius);
}
.lk-notice--ok { border-left-color: var(--lk-ok); }
.lk-notice--error { border-left-color: var(--lk-danger); }
.lk-notice__label { display: block; }

/* ---- U2: tools row (gear, bell, tag) and the profile menu ---- */
.lk-head .lk-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; }
.lk-tool__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (min-width: 721px) {
  /* no icon-only gear on a wide header: its name is drawn beside the glyph */
  .lk-tool__text {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  }
}
.lk-staff { display: inline-flex; align-items: center; }
/* the staff link lives in the profile menu below 1100 px; the header carries it from 1100 px */
.lk-head__tools .lk-staff { display: none; }
@media (min-width: 1100px) {
  .lk-head__tools .lk-staff { display: inline-flex; }
}
@media (max-width: 1099px) {
  .lk-profile__name { display: none; }
}
.lk-profile { position: relative; }
.lk-profile__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 4px 8px;
  background: transparent; color: var(--lk-ink); border: 1px solid var(--lk-input-line);
  border-radius: var(--lk-radius); font: inherit; font-weight: 600; cursor: pointer; list-style: none;
}
.lk-profile__btn::-webkit-details-marker { display: none; }
.lk-profile__btn:hover, .lk-profile[open] > .lk-profile__btn { background: var(--lk-tint); }
.lk-profile__name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the menu floats under its <details>; a closed <details> hides it natively, with or without JS */
.lk-profile__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 240px; max-width: calc(100vw - 32px); padding: 8px;
  background: var(--lk-surface); color: var(--lk-ink);
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius);
}
.lk-profile__who { display: grid; gap: 2px; padding: 8px 12px 12px; border-bottom: 1px solid var(--lk-line); }
.lk-profile__label { font-weight: 700; overflow-wrap: anywhere; }
.lk-profile__list { margin: 8px 0; padding: 0; list-style: none; }
.lk-profile__item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px;
  background: transparent; color: var(--lk-ink); border: 0; border-radius: var(--lk-radius);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.lk-profile__item:hover { background: var(--lk-tint); }
.lk-profile__item[aria-current="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--lk-link); }
.lk-profile__lang, .lk-profile__logout { margin: 0; padding-top: 8px; border-top: 1px solid var(--lk-line); }
.lk-profile__lang-label { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--lk-muted); }
/* language: one select-like box; opened, a short scrolling list under it (no JS, each option submits the form) */
.lk-profile__lang { padding: 8px 8px 4px; }
.lk-profile__langbtn { list-style: none; border: 1px solid var(--lk-line); background: var(--lk-bg); }
.lk-profile__langbtn::-webkit-details-marker { display: none; }
.lk-profile__langlabel { display: none; }
.lk-profile__langcur { flex: 1; color: var(--lk-ink); font-weight: 700; }
.lk-profile__lang[open] .lk-profile__langbtn svg:last-child { transform: rotate(180deg); }
.lk-profile__lang-btns { display: grid; gap: 2px; margin-top: 4px; padding: 4px; max-height: 180px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius); background: var(--lk-bg); }
.lk-profile__lang-btns .lk-profile__item { min-height: 40px; padding: 0 12px; line-height: 1.2; white-space: nowrap; }
.lk-profile__lang-btns .lk-profile__item[aria-current="true"] { background: var(--lk-tint); color: var(--lk-link); font-weight: 700; box-shadow: none; }

/* ---- demo helper for /dev/ui: show the sticky header and tall gate inline ---- */
.lk-demo .lk-head { position: static; }
.lk-demo .lk-gate { min-height: 0; }

/* ---- theme switch (public header): one icon button, the icon shows the state, no motion ---- */
.lk-theme-btn {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  background: transparent; color: var(--lk-ink);
  border: 1px solid var(--lk-input-line); border-radius: var(--lk-radius);
  cursor: pointer;
}
.lk-js .lk-theme-btn { display: inline-flex; }
.lk-theme-btn:hover { background: var(--lk-tint); }
.lk-theme-btn__icon { width: 20px; height: 20px; display: none; }
/* the same switch as a row in the account menu */
.lk-profile__theme.lk-theme-btn { display: none; width: 100%; justify-content: flex-start; gap: 8px; padding: 0 12px; border: 0; font: inherit; }
.lk-js .lk-profile__theme.lk-theme-btn { display: flex; }
.lk-profile__theme .lk-theme-btn__icon { width: 18px; height: 18px; }
.lk-profile__item .badge, .lk-profile__item [data-badge] { margin-inline-start: auto; }
.lk-theme-btn[data-state="auto"] .lk-theme-btn__icon[data-for="auto"],
.lk-theme-btn[data-state="light"] .lk-theme-btn__icon[data-for="light"],
.lk-theme-btn[data-state="dark"] .lk-theme-btn__icon[data-for="dark"] { display: block; }

/* a folded secondary form inside a gate card (register: resend the confirmation email) */
.lk-fold { margin-top: 12px; }
.lk-fold > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.lk-fold[open] > summary { margin-bottom: 8px; }

/* ---- language menu (header, anonymous visitors): one button, a list of the seven languages ---- */
.lk-head .lang-switch { position: relative; display: inline-flex; }
.lk-head .lang-menu { position: relative; }
.lk-head .lang-menu__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding-inline: 10px;
  list-style: none; cursor: pointer; color: var(--lk-ink); border-radius: var(--lk-radius); font-weight: 600;
}
.lk-head .lang-menu__btn::-webkit-details-marker { display: none; }
.lk-head .lang-menu__btn:hover, .lk-head .lang-menu[open] > .lang-menu__btn { background: var(--lk-tint); }
.lk-head .lang-menu__list {
  list-style: none; margin: 4px 0 0; padding: 6px; position: absolute; inset-inline-end: 0; top: 100%; z-index: 30;
  min-width: 12rem; background: var(--lk-bg); color: var(--lk-ink);
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius); box-shadow: 0 8px 24px var(--lk-line);
}
.lk-head .lang-menu__list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; justify-content: flex-start;
  color: var(--lk-ink); border-radius: var(--lk-radius); text-decoration: none; white-space: nowrap;
}
.lk-head .lang-menu__list a:hover { background: var(--lk-tint); }
.lk-head .lang-menu__list a[aria-current="true"] { background: var(--lk-tint); font-weight: 700; }
/* inside the collapsed mobile menu the list opens in the flow instead of floating */
@media (max-width: 720px) {
  .lk-head .lang-menu__list { position: static; box-shadow: none; margin-top: 2px; min-width: 0; }
}