/* legacy_app v2 — base and component styles. Load after tokens.css.
   Plain CSS classes for Django templates and htmx; no JavaScript required. Prefix: lg-. */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.lg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lg-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lg-icon--sm { width: 20px; height: 20px; }
.lg-demo { padding: var(--space-6); }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lg-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.lg-muted { color: var(--ink-muted); }
.lg-living { color: var(--ink-muted); }
.lg-linkbtn { all: unset; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; border-radius: 4px; }
.lg-linkbtn:hover { text-decoration-thickness: 2px; }
.lg-linkbtn:focus-visible { box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Card, section head, tag ---------- */
.lg-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); }
.lg-card--flush { padding: 0; overflow: hidden; }
.lg-card--soft { background: var(--surface-2); box-shadow: none; }
.lg-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); }
.lg-section-head__title { margin: 0; font-size: 21px; line-height: 28px; font-weight: 650; letter-spacing: -0.005em; }
.lg-label-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-label-tag .lg-icon { width: 16px; height: 16px; }
.lg-new { display: inline-flex; align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary-text); font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Button ---------- */
.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .1s ease-out;
}
.lg-btn:hover { text-decoration: none; }
.lg-btn:active { transform: translateY(1px); }
.lg-btn--primary { background: var(--primary); color: var(--on-primary); }
.lg-btn--primary:hover { background: var(--primary-strong); color: var(--on-primary); }
.lg-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.lg-btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
.lg-btn--quiet { background: transparent; color: var(--link); padding: 0 var(--space-3); }
.lg-btn--quiet:hover { background: var(--link-soft); color: var(--link); }
.lg-btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.lg-btn--sm { min-height: var(--tap-min); padding: 0 var(--space-4); font-size: 15px; }
.lg-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 17px; }
.lg-btn--block { display: flex; width: 100%; }
.lg-btn[disabled], .lg-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; transform: none; }
.lg-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); cursor: pointer; }
.lg-iconbtn:hover { background: var(--surface-2); }

/* ---------- Field ---------- */
.lg-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 40rem; }
.lg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-label { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.lg-label__opt { font-weight: 400; color: var(--ink-muted); }
.lg-input, .lg-select, .lg-textarea {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: 17px; line-height: 26px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.lg-textarea { padding: var(--space-3) var(--space-4); min-height: 140px; resize: vertical; }
.lg-input::placeholder, .lg-textarea::placeholder { color: var(--ink-muted); }
.lg-input:focus-visible, .lg-select:focus-visible, .lg-textarea:focus-visible { border-color: var(--link); }
.lg-select-wrap { position: relative; }
.lg-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-12); cursor: pointer; }
.lg-select-wrap .lg-icon { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.lg-pass { position: relative; }
.lg-pass .lg-input { padding-right: 132px; }
.lg-pass__toggle { position: absolute; top: 2px; right: 2px; bottom: 2px; display: inline-flex; align-items: center; gap: 6px; min-width: var(--tap-min); padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--link); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; }
.lg-pass__toggle:hover { background: var(--link-soft); }
.lg-pass__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-pass__toggle .lg-icon { width: 20px; height: 20px; }
.lg-hint { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-error { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--danger); }
.lg-error .lg-icon { width: 20px; height: 20px; margin-top: 1px; }
.lg-field--error .lg-input, .lg-field--error .lg-select, .lg-field--error .lg-textarea { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.lg-check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) 0; cursor: pointer; }
.lg-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primary); flex: none; cursor: pointer; }
.lg-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.lg-fieldset legend { padding: 0; margin-bottom: var(--space-2); font-size: 16px; line-height: 24px; font-weight: 600; }

/* ---------- Navigation ---------- */
.lg-topbar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--nav-h); padding: 0 var(--space-8); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.lg-topbar__brand { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; padding: var(--space-1) 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-sans); }
.lg-topbar__product { font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.lg-topbar__space { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.lg-topbar__nav { display: flex; gap: var(--space-1); margin: 0 auto 0 var(--space-6); }
.lg-topbar__end { display: flex; align-items: center; gap: var(--space-2); }
.lg-navlink { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-full); border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lg-navlink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-navlink { position: relative; }
.lg-navlink[aria-current="page"] { background: var(--surface-2); }
.lg-navlink[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 3px; height: 3px; border-radius: 2px; background: var(--primary); }
.lg-me { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-3) 0 6px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; text-decoration: none; }
.lg-me:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 76px; padding: 0 var(--space-2) var(--space-2); background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.lg-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: transparent; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.lg-tab:hover { color: var(--ink); text-decoration: none; }
.lg-tab[aria-current="page"] { color: var(--ink); }
.lg-tab[aria-current="page"] .lg-icon { width: 56px; height: 30px; padding: 3px 16px; border-radius: var(--radius-full); background: var(--surface-2); stroke-width: 2.2; }
.lg-tab--tell { color: var(--primary-text); }
.lg-tab--tell:hover { color: var(--primary-text); }
.lg-tab__bubble { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -22px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px var(--surface), var(--shadow-float); }
.lg-tab__bubble .lg-icon { width: 28px; height: 28px; stroke-width: 2.1; }
.lg-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-crumbs li + li::before { content: "›"; margin-right: var(--space-2); }

/* ---------- Avatar ---------- */
.lg-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full); object-fit: cover; object-position: 50% 30%; background: var(--surface-2); color: var(--ink); font-family: var(--font-sans); font-size: 21px; font-weight: 650; letter-spacing: 0.01em; overflow: hidden; }
.lg-avatar--xs { width: var(--avatar-xs); height: var(--avatar-xs); font-size: 12px; }
.lg-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 15px; }
.lg-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 30px; }
.lg-avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: 48px; }
.lg-avatar--peach { background: var(--peach); } .lg-avatar--sage { background: var(--sage); } .lg-avatar--sky { background: var(--sky); } .lg-avatar--lilac { background: var(--lilac); } .lg-avatar--butter { background: var(--butter); }
.lg-avatar--living { background: transparent; border: 2px dashed var(--line-strong); }
.lg-avatar--ring { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.lg-avatar-stack { display: inline-flex; }
.lg-avatar-stack > * { box-shadow: 0 0 0 2px var(--surface); }
.lg-avatar-stack > * + * { margin-left: -10px; }

/* ---------- Kinship chip, role ---------- */
.lg-kin { display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; min-height: 26px; padding: 3px 10px; border-radius: 13px; background: var(--sky); color: var(--ink); font: 500 14px/20px var(--font-sans); white-space: normal; text-wrap: balance; }
.lg-kin--you { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.lg-kin--unknown { background: var(--surface-2); color: var(--ink-muted); }
.lg-role { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font: 500 14px/20px var(--font-sans); white-space: nowrap; }

/* ---------- Person ---------- */
.lg-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out, box-shadow .15s ease-out; }
a.lg-person:hover, button.lg-person:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-person__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-person__name { font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-person__maiden { font-weight: 400; color: var(--ink-muted); }
.lg-person__years { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-person__body .lg-kin { margin-top: var(--space-1); }
.lg-person--card { background: var(--surface); box-shadow: var(--shadow-card); padding: var(--space-4); }
a.lg-person--card:hover, button.lg-person--card:hover { background: var(--surface); box-shadow: var(--shadow-float); }
.lg-person--stack { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.lg-person--stack .lg-person__body { align-items: center; }
.lg-person--stack .lg-person__body .lg-kin { align-self: center; }
.lg-person--row { padding: var(--space-2); gap: var(--space-3); }
.lg-person--row .lg-person__name { font-size: 16px; line-height: 22px; }
.lg-person--living .lg-person__name { color: var(--ink-muted); font-weight: 500; }

/* ---------- Your line ---------- */
.lg-yourline { padding: var(--space-6) var(--space-6) var(--space-4); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-yourline__list { display: flex; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.lg-yourline__item { position: relative; flex: 1 0 150px; display: flex; justify-content: center; scroll-snap-align: start; }
.lg-yourline__item:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--space-3) + var(--avatar-lg) / 2); left: calc(50% + var(--avatar-lg) / 2 + 8px); width: calc(100% + var(--space-2) - var(--avatar-lg) - 16px); border-top: 2px dashed var(--line-strong); }
.lg-yourline .lg-person--stack { width: 100%; }
.lg-yourline--compact .lg-yourline__item { flex-basis: 112px; }
.lg-yourline--compact .lg-avatar { width: var(--avatar-md); height: var(--avatar-md); font-size: 21px; }
.lg-yourline--compact .lg-yourline__item:not(:last-child)::after { top: calc(var(--space-3) + var(--avatar-md) / 2); left: calc(50% + var(--avatar-md) / 2 + 6px); width: calc(100% + var(--space-2) - var(--avatar-md) - 12px); }
.lg-yourline--compact .lg-person__name { font-size: 15px; line-height: 20px; }
.lg-yourline--compact { padding: var(--space-5) var(--space-4) var(--space-3); }

/* ---------- Name preview ---------- */
.lg-preview { display: flex; gap: var(--space-4); width: 380px; max-width: calc(100vw - 32px); padding: var(--space-5); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.lg-preview__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-preview__name { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.lg-preview__years { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-preview__note { margin: var(--space-2) 0 0; font-size: 15px; line-height: 22px; }
.lg-preview__body .lg-kin { margin-top: var(--space-1); }
.lg-preview__body .lg-btn { align-self: flex-start; margin: var(--space-2) 0 0 calc(-1 * var(--space-3)); }
.lg-preview__place { display: flex; align-items: center; justify-content: center; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-lg); background: var(--sky); flex: none; }
.lg-sheet { width: 100%; padding: var(--space-3) var(--space-5) var(--space-6); background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-float); }
.lg-sheet__grip { width: 40px; height: 4px; margin: 0 auto var(--space-2); border-radius: 2px; background: var(--line-strong); }
.lg-sheet__head { display: flex; justify-content: flex-end; }
.lg-sheet .lg-preview { width: auto; max-width: none; padding: 0; box-shadow: none; background: transparent; }

/* ---------- Story prompt (invitation to tell) ---------- */
.lg-ask { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-xl); background: var(--peach); color: var(--ink); overflow: hidden; }
.lg-ask--media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; }
.lg-ask--sage { background: var(--sage); } .lg-ask--sky { background: var(--sky); } .lg-ask--lilac { background: var(--lilac); } .lg-ask--butter { background: var(--butter); }
.lg-ask__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lg-ask__who { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.lg-ask__title { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.lg-ask__text { margin: 0; font-size: 17px; line-height: 26px; max-width: 34em; }
.lg-ask__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); border: 1px solid var(--line); font: 500 15px/22px var(--font-sans); cursor: pointer; text-decoration: none; transition: box-shadow .15s ease-out, background-color .15s ease-out; }
.lg-chip:hover { box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); }
.lg-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lg-ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.lg-ask__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-ask__note .lg-icon { width: 16px; height: 16px; }
.lg-ask__media { position: relative; align-self: stretch; min-height: 260px; }
.lg-ask__media img { position: absolute; display: block; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.lg-ask__media img:first-child { inset: 0 18% 14% 0; width: 82%; height: 86%; transform: rotate(-3deg); }
.lg-ask__media img:nth-child(2) { inset: 30% 0 0 34%; width: 66%; height: 70%; transform: rotate(4deg); }
@media (max-width: 720px) {
  .lg-ask, .lg-ask--media { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .lg-ask__title { font-size: 26px; line-height: 32px; }
  .lg-ask__actions .lg-btn--primary { flex: 1 1 100%; }
  .lg-ask__media { order: -1; min-height: 180px; }
}

/* ---------- Story card (a relative's memory) ---------- */
.lg-story { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-story__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-story__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lg-story__author { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-story__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-story__q { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }
.lg-story__text { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 30px; }
.lg-story__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.lg-story__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 0 calc(-1 * var(--space-3)); }
.lg-story--peach { background: var(--peach); box-shadow: none; } .lg-story--lilac { background: var(--lilac); box-shadow: none; }
.lg-voice { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4) 6px 6px; border-radius: var(--radius-full); background: var(--surface-2); }
.lg-voice__play { display: flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-full); border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; flex: none; }
.lg-voice__play .lg-icon { width: 20px; height: 20px; fill: currentColor; }
.lg-voice__wave { display: flex; align-items: center; gap: 3px; flex: 1; height: 28px; min-width: 0; overflow: hidden; }
.lg-voice__wave i { display: block; flex: none; width: 3px; border-radius: 2px; background: var(--line-strong); }
.lg-voice__wave i.is-played { background: var(--primary); }
.lg-voice__time { font: 600 14px/20px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Feed card (new in the family) ---------- */
.lg-feed { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.lg-feed__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.lg-feed__who { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; }
.lg-feed__who strong { font-weight: 600; }
.lg-feed__when { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-feed__media { position: relative; display: grid; gap: 3px; background: var(--surface); }
.lg-feed__media--2 { grid-template-columns: 1fr 1fr; }
.lg-feed__media--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lg-feed__media--3 > :first-child { grid-row: span 2; }
.lg-feed__photo { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); dynamic-range-limit: constrained; }
.lg-feed__media--2 .lg-feed__photo { aspect-ratio: 1; }
.lg-feed__media--3 .lg-feed__photo { aspect-ratio: auto; }
.lg-feed__more { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 4px 12px; border-radius: var(--radius-full); background: var(--viewer-bg); color: var(--viewer-ink); font: 600 14px/20px var(--font-sans); }
.lg-feed__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.lg-feed__title { margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.lg-feed__text { margin: 0; font-size: 16px; line-height: 24px; }
.lg-feed__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); margin-top: calc(-1 * var(--space-2)); }
.lg-whotag { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-4) 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--viewer-bg); color: var(--viewer-ink); font: 600 15px/22px var(--font-sans); cursor: pointer; text-decoration: none; }
.lg-whotag:hover { color: var(--viewer-ink); text-decoration: none; background: var(--viewer-raised); }
.lg-whotag .lg-icon { width: 20px; height: 20px; }
.lg-react { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; text-decoration: none; }
.lg-react:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-react[aria-pressed="true"] { color: var(--primary-text); }
.lg-react[aria-pressed="true"] .lg-icon { fill: currentColor; }

/* ---------- Person header ---------- */
.lg-phead { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; padding: var(--space-8); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-phead__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.lg-phead__name { margin: 0; font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lg-phead__aka { margin: 0; font-size: 17px; line-height: 24px; color: var(--ink-muted); }
.lg-phead__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.lg-phead__facts li { display: inline-flex; align-items: center; gap: 6px; }
.lg-phead__facts .lg-icon { width: 18px; height: 18px; color: var(--ink-muted); }
.lg-phead__line { margin: var(--space-2) 0 0; max-width: 36em; font-size: 18px; line-height: 27px; }
.lg-phead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.lg-phead--compact { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
.lg-phead--compact .lg-avatar--xl { width: 112px; height: 112px; font-size: 36px; }
.lg-phead--compact .lg-phead__name { font-size: 28px; line-height: 34px; }
.lg-phead--compact .lg-phead__actions .lg-btn { flex: 1 1 100%; }
@media (max-width: 600px) {
  .lg-phead { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
  .lg-phead .lg-avatar--xl { width: 112px; height: 112px; font-size: 36px; }
  .lg-phead__name { font-size: 28px; line-height: 34px; }
  .lg-phead__actions .lg-btn { flex: 1 1 100%; }
}

/* ---------- Reading bar ---------- */
.lg-readbar { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: var(--nav-h); padding: 0 var(--space-4); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.lg-readbar__where { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lg-readbar__part { font-size: 16px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lg-readbar__book { display: none; font-weight: 500; color: var(--ink-muted); }
@media (min-width: 900px) { .lg-readbar__book { display: inline; } }
.lg-readbar__page { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-toolbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 600 12px/16px var(--font-sans); cursor: pointer; text-decoration: none; }
.lg-toolbtn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-toolbtn[aria-expanded="true"] { background: var(--link-soft); color: var(--link); }
.lg-progress { height: 6px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; }
.lg-progress > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.lg-readbar .lg-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0; background: transparent; }
.lg-panel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.lg-panel__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.lg-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-full); }
.lg-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; }
.lg-segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-card); }
.lg-resume { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; }
.lg-resume:hover { box-shadow: var(--shadow-float); color: var(--ink); text-decoration: none; }
.lg-resume__cover { display: flex; align-items: center; justify-content: center; width: 64px; height: 84px; flex: none; border-radius: var(--radius-sm); background: var(--sky); overflow: hidden; }
.lg-resume__cover img { width: 100%; height: 100%; object-fit: cover; }
.lg-resume__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-resume__title { font-size: 17px; line-height: 24px; font-weight: 650; }
.lg-resume__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Prose (book text) ---------- */
.lg-prose { --read-size: 20px; position: relative; max-width: var(--measure-read); font-family: var(--font-serif); font-size: calc(var(--read-size) * var(--read-scale, 1)); line-height: 1.6; color: var(--ink); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 600px) { .lg-prose { --read-size: 18px; } }
.lg-prose p { margin: 0 0 0.8em; }
.lg-prose h2, .lg-prose h3 { margin: 2em 0 0.6em; font-family: var(--font-sans); font-size: 1.1em; line-height: 1.35; font-weight: 700; }
.lg-prose a.lg-ref, .lg-ref { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.lg-ednote { color: var(--ink-muted); font-size: 0.85em; }
.lg-prose mark, .lg-mark { background: var(--butter); color: var(--ink); border-radius: 3px; padding: 0 0.12em; }
.lg-page { display: inline-block; margin: 0 0.4em 0 0; padding: 0 0.6em; vertical-align: 0.12em; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); font: 600 13px/22px var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; hyphens: manual; }
.lg-page:hover { color: var(--link); text-decoration: none; }
@media (min-width: 900px) { .lg-prose--margins .lg-page { position: absolute; left: -96px; width: 72px; margin: 0; text-align: center; vertical-align: baseline; } }

/* ---------- Callout ---------- */
.lg-epigraph { margin: 0 0 var(--space-8) auto; max-width: 26em; }
.lg-epigraph__text { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 32px; font-style: italic; white-space: pre-line; }
.lg-epigraph__src { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-quote { margin: 0; padding: var(--space-5) var(--space-6); background: var(--surface-2); border-radius: var(--radius-lg); }
.lg-quote__text { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 30px; }
.lg-quote__src { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; }
.lg-comment { margin: 1.6em 0; padding: var(--space-5) var(--space-6); background: var(--sky); border-radius: var(--radius-lg); font-family: var(--font-sans); font-size: 17px; line-height: 26px; hyphens: manual; }
.lg-comment p { margin: 0; }
.lg-overline { display: block; margin: 0 0 var(--space-2); font: 600 13px/18px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Photo figure ---------- */
.lg-figure { margin: var(--space-8) 0; }
.lg-figure__img { display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); line-height: 0; }
.lg-figure__img img { display: block; width: 100%; height: auto; dynamic-range-limit: constrained; }
.lg-figure__cap { margin-top: var(--space-3); max-width: 36em; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink); }
.lg-figure__meta { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-figure__veil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-6); text-align: center; background: var(--surface-2); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.lg-figure__veil strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.lg-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lg-photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
@media (max-width: 600px) { .lg-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Photo viewer ---------- */
.lg-viewer { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; background: var(--viewer-bg); color: var(--viewer-ink); }
.lg-viewer a { color: var(--viewer-ink); }
.lg-viewer__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.lg-viewer__count { flex: 1; font-size: 15px; line-height: 22px; color: var(--viewer-muted); font-variant-numeric: tabular-nums; }
.lg-viewer__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); }
.lg-viewer__stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--radius-sm); dynamic-range-limit: no-limit; }
.lg-viewer__info { max-width: 760px; width: 100%; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.lg-viewer__cap { margin: 0; font-size: 17px; line-height: 26px; }
.lg-viewer__meta { margin: 0; font-size: 15px; line-height: 22px; color: var(--viewer-muted); }
.lg-vbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--viewer-raised); color: var(--viewer-ink); font: 600 15px/22px var(--font-sans); cursor: pointer; text-decoration: none; }
.lg-vbtn:hover { background: color-mix(in srgb, var(--viewer-raised) 80%, var(--viewer-ink)); color: var(--viewer-ink); text-decoration: none; }
.lg-vbtn--accent { background: var(--primary); color: var(--on-primary); }
.lg-vbtn--accent:hover { background: var(--primary-strong); color: var(--on-primary); }
.lg-viewer a.lg-vbtn--accent, .lg-viewer a.lg-vbtn--accent:hover { color: var(--on-primary); }
.lg-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lg-tag { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4) 0 6px; border-radius: var(--radius-full); background: var(--viewer-raised); color: var(--viewer-ink); font-size: 15px; line-height: 22px; text-decoration: none; }
.lg-viewer .lg-tag { color: var(--viewer-ink); text-decoration: none; }
.lg-tag .lg-avatar { width: 32px; height: 32px; font-size: 12px; }

/* ---------- Timeline ---------- */
.lg-timeline { list-style: none; margin: 0; padding: 0; }
.lg-timeline__item { display: grid; grid-template-columns: 104px 1fr; column-gap: var(--space-4); position: relative; padding-bottom: var(--space-5); }
.lg-timeline__item::before { content: ""; position: absolute; left: 51px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line); }
.lg-timeline__item:last-child::before { display: none; }
.lg-timeline__year { display: inline-flex; align-items: center; justify-content: center; justify-self: stretch; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-2); font: 700 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-timeline__item--key .lg-timeline__year { background: var(--ink); color: var(--surface); }
.lg-timeline__dot { display: none; }
.lg-timeline__body { padding-top: 4px; }
.lg-timeline__event { margin: 0; font-size: 17px; line-height: 25px; font-weight: 500; }
.lg-timeline__place { display: flex; align-items: center; gap: var(--space-1); margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-timeline__place .lg-icon { width: 16px; height: 16px; }

/* ---------- Tree node ---------- */
.lg-tnode { position: relative; display: flex; align-items: center; gap: var(--space-3); width: var(--tnode-w, 280px); min-height: 76px; padding: var(--space-3); background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s ease-out; }
a.lg-tnode:hover, button.lg-tnode:hover { box-shadow: var(--shadow-float); color: var(--ink); text-decoration: none; }
.lg-tnode__text { display: flex; flex-direction: column; min-width: 0; }
.lg-tnode__name { font-size: 15px; line-height: 20px; font-weight: 650; }
.lg-tnode__sur { font-size: 14px; line-height: 20px; }
.lg-tnode__years { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-tnode__you { align-self: flex-start; margin-bottom: 2px; padding: 0 8px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: 700 12px/18px var(--font-sans); }
.lg-tnode--focus { background: var(--link-soft); box-shadow: 0 0 0 3px var(--link), var(--shadow-card); }
.lg-tnode--living { background: var(--surface-2); box-shadow: none; border: 2px dashed var(--line-strong); }
.lg-tnode--living .lg-tnode__name { color: var(--ink-muted); font-weight: 500; }
.lg-tmore { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-full); border: 0; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; }
.lg-tree-line { stroke: var(--line-strong); stroke-width: 2; fill: none; }

/* ---------- Archive note ---------- */
.lg-archive { padding: var(--space-6); background: var(--surface-2); border-radius: var(--radius-lg); }
.lg-archive__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--ink-muted); }
.lg-archive__head .lg-overline { margin: 0; }
.lg-archive__facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lg-archive__fact { display: grid; grid-template-columns: 7em 1fr; column-gap: var(--space-4); }
.lg-archive__fact dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-archive__fact dd { margin: 0; }
.lg-archive__case { margin: var(--space-4) 0 0; font-size: 15px; line-height: 22px; }
.lg-archive__src { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 480px) { .lg-archive__fact { grid-template-columns: 1fr; } }

/* ---------- TOC entry ---------- */
.lg-tocgroup { margin: 0 0 var(--space-3); font-size: 21px; line-height: 28px; font-weight: 650; }
.lg-toclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lg-toc { display: grid; grid-template-columns: 56px 1fr auto; column-gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease-out; }
a.lg-toc:hover { box-shadow: var(--shadow-float); color: var(--ink); text-decoration: none; }
.lg-toc__num { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--sky); font: 700 18px/24px var(--font-sans); overflow: hidden; }
.lg-toc__num img { width: 100%; height: 100%; object-fit: cover; }
.lg-toc__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-toc__title { font-size: 17px; line-height: 24px; font-weight: 650; }
.lg-toc__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-toc__progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-toc__progress .lg-progress { width: 140px; }
.lg-toc__state { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.lg-toc--current .lg-toc__state { color: var(--primary-text); }
.lg-toc__go { display: inline-flex; color: var(--ink-muted); }
a.lg-toc:hover .lg-toc__go { color: var(--link); }
.lg-toc--locked .lg-toc__num { background: var(--surface-2); color: var(--ink-muted); }

/* ---------- Notice and empty state ---------- */
.lg-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink); }
.lg-notice > .lg-icon { margin-top: 1px; color: var(--ink-muted); }
.lg-notice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-notice__title { margin: 0; font-size: 17px; line-height: 25px; font-weight: 650; }
.lg-notice__text { margin: 0; font-size: 16px; line-height: 24px; }
.lg-notice__body .lg-btn { align-self: flex-start; margin-top: var(--space-2); }
.lg-notice--pending { background: var(--caution-soft); } .lg-notice--pending > .lg-icon { color: var(--caution); }
.lg-notice--success { background: var(--positive-soft); } .lg-notice--success > .lg-icon { color: var(--positive); }
.lg-notice--error { background: var(--danger-soft); } .lg-notice--error > .lg-icon { color: var(--danger); }
.lg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius-lg); }
.lg-empty__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 650; }
.lg-empty__text { margin: 0; color: var(--ink-muted); }
.lg-empty .lg-btn { margin-top: var(--space-2); }

/* ---------- Status badge ---------- */
.lg-status { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; padding: 2px 10px 2px 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); font: 600 14px/20px var(--font-sans); white-space: nowrap; }
.lg-status .lg-icon { width: 16px; height: 16px; }
.lg-status--pending { background: var(--caution-soft); color: var(--caution); }
.lg-status--approved { background: var(--positive-soft); color: var(--positive); }
.lg-status--rejected { background: var(--danger-soft); color: var(--danger); }
.lg-status--public { background: var(--link-soft); color: var(--link); }

/* ---------- Replies: feelings, memories in reply, reply box, nudge ---------- */
.lg-replies { display: flex; flex-direction: column; gap: var(--space-4); }
.lg-replies__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.lg-replies__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; }
.lg-replies__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.lg-feel { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-feel__btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.lg-feel__btn .lg-icon { width: 20px; height: 20px; }
.lg-feel__btn:hover { background: var(--surface-2); }
.lg-feel__btn[aria-pressed="true"] { background: var(--primary-soft); border-color: transparent; color: var(--primary-text); }
.lg-feel__btn--warm[aria-pressed="true"] .lg-icon { fill: currentColor; }
.lg-feel__count { font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-feel__btn[aria-pressed="true"] .lg-feel__count { color: var(--primary-text); }
.lg-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
.lg-replies__list > li + li .lg-reply, .lg-reply + .lg-reply { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.lg-reply__body { min-width: 0; }
.lg-reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lg-reply__name { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-reply__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-reply__q { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.lg-reply__text { margin: 6px 0 0; font-family: var(--font-serif); font-size: 18px; line-height: 28px; }
.lg-reply .lg-voice { margin-top: var(--space-2); }
.lg-reply__foot { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 0 calc(-1 * var(--space-3)); }
.lg-replybox { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-lg); }
.lg-replybox__label { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.lg-replybox__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lg-replybox .lg-textarea { min-height: 96px; font-family: var(--font-serif); font-size: 18px; line-height: 28px; }
.lg-replybox__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lg-replybox__hint { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-nudge { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--butter); border-radius: var(--radius-lg); color: var(--ink); }
.lg-nudge__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 650; }
.lg-nudge__text { margin: 0; font-size: 16px; line-height: 24px; }
.lg-nudge__said { font-family: var(--font-serif); font-style: italic; }
.lg-nudge__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Collection: memory cover, shelf, end of the weekly issue ---------- */
.lg-collection { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--viewer-bg); color: var(--viewer-ink); box-shadow: var(--shadow-card); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.lg-collection:hover { color: var(--viewer-ink); text-decoration: none; box-shadow: var(--shadow-float); }
.lg-collection__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; dynamic-range-limit: constrained; transition: transform .4s ease-out; }
.lg-collection:hover .lg-collection__img { transform: scale(1.03); }
.lg-collection::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--viewer-bg) 90%, transparent) 0%, color-mix(in srgb, var(--viewer-bg) 45%, transparent) 42%, transparent 68%); }
.lg-collection__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-5); }
.lg-collection__kicker { font: 600 13px/18px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--viewer-ink); }
.lg-collection__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--viewer-ink); text-wrap: balance; }
.lg-collection__meta { font-size: 14px; line-height: 20px; color: var(--viewer-muted); }
.lg-collection__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.lg-collection .lg-avatar-stack > * { box-shadow: 0 0 0 2px var(--viewer-bg); }
.lg-collection__cta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-5); border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: 600 16px/24px var(--font-sans); }
.lg-collection--hero { aspect-ratio: 16 / 8; border-radius: var(--radius-xl); }
.lg-collection--hero .lg-collection__body { gap: var(--space-2); padding: var(--space-8); }
.lg-collection--hero .lg-collection__title { font-size: 52px; line-height: 56px; letter-spacing: -0.03em; }
.lg-collection--hero .lg-collection__meta { font-size: 16px; line-height: 24px; }
.lg-collection--tall { aspect-ratio: 4 / 5; }
.lg-collection--plain { background: var(--lilac); color: var(--ink); }
.lg-collection--plain::after { display: none; }
.lg-collection--plain:hover { color: var(--ink); }
.lg-collection--plain .lg-collection__title, .lg-collection--plain .lg-collection__kicker { color: var(--ink); }
.lg-collection--plain .lg-collection__meta { color: var(--ink-muted); }
.lg-collection__icon { position: absolute; top: var(--space-5); left: var(--space-5); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); }
.lg-collection--plain { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); overflow: visible; }
.lg-collection--plain .lg-collection__icon { position: static; flex: none; }
.lg-collection--plain .lg-collection__body { position: static; padding: 0; }
@media (max-width: 600px) {
  .lg-collection--hero { aspect-ratio: 4 / 5; }
  .lg-collection--hero .lg-collection__body { padding: var(--space-5); }
  .lg-collection--hero .lg-collection__title { font-size: 34px; line-height: 40px; }
}
.lg-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--space-4); margin: 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.lg-shelf > * { scroll-snap-align: start; }
@media (max-width: 600px) { .lg-shelf { grid-auto-columns: 72%; } }
.lg-issue-end { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-issue-end__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--sage); color: var(--ink); }
.lg-issue-end__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.lg-issue-end__text { margin: 0; max-width: 32em; color: var(--ink-muted); }
.lg-issue-end__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Share sheet ---------- */
.lg-share { display: flex; flex-direction: column; gap: var(--space-5); width: min(480px, 100%); padding: var(--space-6); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); color: var(--ink); }
.lg-share__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.lg-share__title { flex: 1; margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.lg-share__preview { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lg-share__thumb { width: 72px; height: 72px; flex: none; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-2); }
.lg-share__pbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-share__ptitle { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-share__pmeta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-share__who { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.lg-share__who legend { padding: 0; margin-bottom: var(--space-2); font-size: 16px; line-height: 24px; font-weight: 600; }
.lg-share__opt { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; }
.lg-share__opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--link); cursor: pointer; }
.lg-share__opt:has(input:checked) { border-color: var(--link); background: var(--link-soft); }
.lg-share__opt--off { background: var(--surface-2); border-color: transparent; cursor: not-allowed; }
.lg-share__opt--off input { cursor: not-allowed; }
.lg-share__optbody { display: flex; flex-direction: column; gap: 2px; }
.lg-share__optt { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-share__opts { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-share__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lg-share__app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink); font: 600 14px/20px var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; }
.lg-share__app:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.lg-share__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 600px) { .lg-share { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-5) var(--space-5) var(--space-6); } }

/* ---------- Onboarding: steps and card ---------- */
.lg-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-steps__item { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--surface-2); }
.lg-steps__item--done, .lg-steps__item[aria-current="step"] { background: var(--primary); }
.lg-onboard { display: flex; flex-direction: column; gap: var(--space-5); width: min(520px, 100%); margin: 0 auto; padding: var(--space-8) var(--space-8) var(--space-8); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-onboard__top { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-onboard__step { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-onboard__title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.lg-onboard__text { margin: 0; font-size: 17px; line-height: 26px; }
.lg-onboard__letter { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--peach); border-radius: var(--radius-lg); }
.lg-onboard__letter p { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 29px; }
.lg-onboard__from { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.lg-onboard__from .lg-avatar { background: var(--surface); }
.lg-onboard__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-onboard__actions .lg-btn { width: 100%; }
.lg-onboard__fine { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
@media (max-width: 600px) { .lg-onboard { padding: var(--space-6) var(--space-5); border-radius: 0; box-shadow: none; } .lg-onboard__title { font-size: 26px; line-height: 32px; } }

/* ---------- Member (who is in the family) ---------- */
.lg-members { margin: 0; padding: 0; list-style: none; }
.lg-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; }
.lg-members > li + li .lg-member { border-top: 1px solid var(--line); }
.lg-member__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-member__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-member__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-member__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 600px) { .lg-member { grid-template-columns: auto minmax(0, 1fr); } .lg-member__actions { grid-column: 2; justify-content: flex-start; } }

/* ---------- Event header ---------- */
.lg-ehead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-6); padding: var(--space-8); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-ehead__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; padding: var(--space-4) var(--space-2); border-radius: var(--radius-lg); background: var(--butter); text-align: center; }
.lg-ehead__day { font-size: 40px; line-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-ehead__month { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-ehead__year { font-size: 15px; line-height: 22px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-ehead__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.lg-ehead__title { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lg-ehead__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.lg-ehead__facts li { display: inline-flex; align-items: center; gap: 6px; }
.lg-ehead__facts .lg-icon { width: 18px; height: 18px; color: var(--ink-muted); }
.lg-ehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 600px) {
  .lg-ehead { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) var(--space-5); }
  .lg-ehead__date { flex-direction: row; gap: 8px; width: auto; align-self: flex-start; padding: 6px 14px; }
  .lg-ehead__day, .lg-ehead__month, .lg-ehead__year { font-size: 17px; line-height: 24px; }
  .lg-ehead__title { font-size: 28px; line-height: 34px; }
}

/* ---------- Tree canvas: connectors, collapsed branches, list mode ---------- */
.lg-tree { position: relative; }
.lg-tree__link { position: absolute; background: var(--line-strong); border-radius: 1px; pointer-events: none; }
.lg-tree__link--line { background: var(--primary); z-index: 1; }
.lg-tree .lg-tnode { position: absolute; z-index: 2; height: 88px; min-height: 0; }
.lg-tree .lg-tnode__you { position: absolute; top: -10px; left: var(--space-3); margin: 0; }
.lg-tree .lg-tmore { position: absolute; z-index: 2; padding: 0 var(--space-3); font-size: 14px; }
.lg-treelist { margin: 0; padding: 0; list-style: none; }
.lg-treelist__row { display: flex; align-items: center; gap: var(--space-1); min-height: 56px; border-bottom: 1px solid var(--line); }
.lg-treelist__toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); cursor: pointer; }
.lg-treelist__toggle:hover { background: var(--surface-2); }
.lg-treelist__toggle[aria-expanded="true"] .lg-icon { transform: rotate(90deg); }
.lg-treelist__toggle .lg-icon { transition: transform .15s ease-out; }
.lg-treelist__spacer { flex: none; width: var(--tap-min); }
.lg-treelist__spouse { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Review item (keeper queue) ---------- */
.lg-review { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lg-review__when { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-review__who { display: flex; align-items: center; gap: var(--space-3); }
.lg-review__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 650; }
.lg-review__meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-review__body { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-review__quote { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-2); border-radius: var(--radius-md); font-family: var(--font-serif); font-size: 18px; line-height: 28px; }
.lg-review__hint { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); background: var(--link-soft); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.lg-review__hint .lg-icon { flex: none; color: var(--link); }
.lg-review__media { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.lg-review__thumb { width: 160px; height: 120px; flex: none; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-2); }
.lg-review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Tabs (sections with counts) ---------- */
.lg-tabs { display: flex; gap: var(--space-1); margin: 0; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.lg-tabs::-webkit-scrollbar { display: none; }
.lg-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: 52px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink-muted); font: 600 16px/22px var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.lg-tabs__tab:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.lg-tabs__tab[aria-selected="true"] { color: var(--ink); }
.lg-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.lg-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); font: 600 13px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.lg-tabs__tab[aria-selected="true"] .lg-tabs__count { background: var(--primary-soft); color: var(--primary-text); }

/* ---------- Icon button with a counter (keeper inbox) ---------- */
.lg-iconbtn { position: relative; text-decoration: none; }
.lg-iconbtn__count { position: absolute; top: 4px; right: 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--surface); font: 700 12px/20px var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- Spaces: family switcher, space tag, audience line, publish target ---------- */
.lg-spaces { position: relative; }
.lg-spaces__btn { display: flex; flex-direction: column; align-items: flex-start; min-height: var(--tap-min); margin-left: calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font-family: var(--font-sans); text-align: left; cursor: pointer; }
.lg-spaces__btn:hover { background: var(--surface-2); }
.lg-spaces__name { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.lg-spaces__name .lg-icon { transition: transform .15s ease-out; }
.lg-spaces__btn[aria-expanded="true"] .lg-spaces__name .lg-icon { transform: rotate(180deg); }
.lg-spaces__menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: calc(-1 * var(--space-2)); display: flex; flex-direction: column; width: 340px; max-width: calc(100vw - 24px); padding: 6px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.lg-spaces__item { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.lg-spaces__item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-spaces__item[aria-current="true"] { background: var(--link-soft); }
.lg-spaces__item > .lg-icon:last-child { margin-left: auto; color: var(--link); }
.lg-spaces__mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); font: 700 15px/1 var(--font-sans); }
.lg-spaces__text { display: flex; flex-direction: column; min-width: 0; }
.lg-spaces__t { font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-spaces__role { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-spaces__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.lg-spacetag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font: 600 13px/20px var(--font-sans); white-space: nowrap; }
.lg-tone--peach { background: var(--peach); } .lg-tone--sage { background: var(--sage); } .lg-tone--sky { background: var(--sky); } .lg-tone--lilac { background: var(--lilac); } .lg-tone--butter { background: var(--butter); }
.lg-audience { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-audience .lg-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.lg-feed > .lg-audience { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--line); }
.lg-target { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lg-target:hover { box-shadow: var(--shadow-card); }
.lg-target[aria-checked="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--link-soft); }
.lg-target__check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--line-strong); border-radius: 6px; color: transparent; }
.lg-target[aria-checked="true"] .lg-target__check { border-color: var(--link); background: var(--link); color: var(--surface); }
.lg-target__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lg-target__t { font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-target__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Story list: decades rail, era header, story row, gap, two times ---------- */
.lg-decades { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lg-decades__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink); font: 600 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; }
.lg-decades__link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-decades__n { min-width: 24px; text-align: right; font-weight: 500; color: var(--ink-muted); }
.lg-decades__link--empty { color: var(--ink-muted); font-weight: 500; }
.lg-era { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; scroll-margin-top: 96px; }
.lg-era__n { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.lg-storyrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease-out; }
.lg-storyrow:hover { box-shadow: var(--shadow-float); color: var(--ink); text-decoration: none; }
.lg-storyrow__thumb { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-md); color: var(--ink); }
.lg-storyrow__thumb:not([class*="lg-tone--"]) { background: var(--surface-2); }
.lg-storyrow__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-storyrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-storyrow__kicker { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); }
.lg-storyrow__title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; line-height: 24px; font-weight: 650; }
.lg-storyrow__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-gap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border: 2px dashed var(--line); border-radius: var(--radius-lg); }
.lg-gap__text { flex: 1 1 240px; margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.lg-gap__text strong { color: var(--ink); }
.lg-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.lg-when__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-when dt { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-when dd { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
@media (max-width: 600px) {
  .lg-storyrow { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); }
  .lg-storyrow__thumb { width: 56px; height: 56px; }
  .lg-storyrow > .lg-avatar-stack { display: none; }
  .lg-when { grid-template-columns: minmax(0, 1fr); }
  .lg-era { font-size: 24px; line-height: 30px; }
}

/* ---------- Heritage: recipe, tradition, family word ---------- */
.lg-keep { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-keep__kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-keep__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 650; text-wrap: balance; }
.lg-keep__who { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.lg-keep__who-meta { color: var(--ink-muted); }
.lg-keep__quote { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font-family: var(--font-serif); font-size: 17px; line-height: 27px; }
.lg-keep__src { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-keep__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: auto; padding-top: var(--space-1); }
.lg-keep--word .lg-keep__title { font-family: var(--font-serif); font-size: 26px; line-height: 34px; font-weight: 500; }
.lg-keep__steps { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: 24px; font-family: var(--font-serif); font-size: 18px; line-height: 28px; }
.lg-keep__steps li::marker { color: var(--primary-text); font-family: var(--font-sans); font-weight: 700; }
.lg-keep__ingredients { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lg-keep__ingredients li { padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-2); font-size: 15px; line-height: 22px; }

/* ---------- Family dates ---------- */
.lg-date { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; color: var(--ink); text-decoration: none; }
.lg-date + .lg-date { border-top: 1px solid var(--line); }
a.lg-date:hover { color: var(--ink); text-decoration: none; }
a.lg-date:hover .lg-date__t { text-decoration: underline; text-underline-offset: 0.2em; }
.lg-date__day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.lg-date__d { font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-date__m { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.lg-date__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-date__t { font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-date__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-date__years { justify-self: end; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-2); font: 600 14px/20px var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-date__years--round { background: var(--primary-soft); color: var(--primary-text); }
.lg-date--birth .lg-date__day { background: var(--peach); }
.lg-date--wedding .lg-date__day { background: var(--butter); }
.lg-date--memory .lg-date__day { background: var(--lilac); }
.lg-date--event .lg-date__day { background: var(--sky); }
.lg-date--holiday .lg-date__day { background: var(--sage); }
@media (max-width: 600px) { .lg-date { grid-template-columns: 56px minmax(0, 1fr); } .lg-date__day { width: 56px; height: 56px; } .lg-date__years { grid-column: 2; justify-self: start; } }

/* ---------- Reconcile: numbered pins on a photo, versions with agreement ---------- */
.lg-pins { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--viewer-bg); }
.lg-pins > img { display: block; width: 100%; height: auto; }
.lg-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); height: var(--tap-min); padding: 0 8px; border: 2px solid var(--surface); border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font: 700 15px/1 var(--font-sans); box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.lg-pin--agreed { background: var(--positive); color: var(--surface); }
.lg-pin--disputed { background: var(--caution); color: var(--surface); }
.lg-pin--single { background: var(--link); color: var(--surface); }
.lg-pin:focus-visible { box-shadow: var(--focus-ring); }
.lg-pin[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--primary); }
.lg-pins--hidden .lg-pin { opacity: 0; pointer-events: none; }
.lg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.lg-legend .is-agreed { background: var(--positive); } .lg-legend .is-disputed { background: var(--caution); } .lg-legend .is-single { background: var(--link); }
.lg-version { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.lg-version--lead { border-color: var(--positive); box-shadow: inset 0 0 0 1px var(--positive); }
.lg-version__name { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; }
.lg-version__by { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-version__why { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 26px; }
.lg-version__votes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lg-tally { display: flex; height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); }
.lg-tally > span { display: block; height: 100%; }
.lg-tally .is-agreed { background: var(--positive); } .lg-tally .is-disputed { background: var(--caution); } .lg-tally .is-single { background: var(--link); }
.lg-face { flex: none; width: 72px; height: 72px; border-radius: var(--radius-md); background-color: var(--surface-2); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.lg-face--sm { width: 56px; height: 56px; }
.lg-version__faces { display: flex; align-items: center; gap: var(--space-2); }
.lg-version__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-version__kin { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-version__count { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-version__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-version__actions .lg-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lg-pin::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
@media (max-width: 600px) { .lg-pin { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; } }
.lg-pins--dense .lg-pin { min-width: 30px; height: 30px; padding: 0 6px; font-size: 13px; }
.lg-pins--dense .lg-pin::after { inset: -7px; }

/* ---------- PublicPage: hero, how it works, site footer ---------- */
.lg-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-6); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .lg-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--space-12); } }
.lg-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.lg-hero__title { margin: 0; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 900px) { .lg-hero__title { font-size: 56px; line-height: 60px; } }
.lg-hero__lead { margin: 0; max-width: 34em; font-size: 19px; line-height: 29px; color: var(--ink); }
.lg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lg-hero__fine { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-hero__media { position: relative; min-width: 0; }
.lg-howto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 700px) { .lg-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lg-howto__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-howto__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); }
.lg-howto__n { position: absolute; top: var(--space-6); right: var(--space-6); font-size: 28px; line-height: 32px; font-weight: 700; color: var(--line-strong); }
.lg-howto__title { margin: var(--space-2) 0 0; font-size: 21px; line-height: 28px; font-weight: 650; }
.lg-howto__text { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.lg-sitefoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-8); padding: var(--space-6) 0 0; border-top: 1px solid var(--line); }
.lg-sitefoot__brand { display: flex; flex-direction: column; gap: 2px; max-width: 28em; }
.lg-sitefoot__name { font-size: 17px; line-height: 24px; font-weight: 700; }
.lg-sitefoot__text { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-sitefoot__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.lg-sitefoot__nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-sitefoot__nav a:hover { color: var(--ink); }

/* ---------- Choice: big choice cards (what next) ---------- */
.lg-choice { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lg-choice__item { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 72px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease-out, border-color .15s ease-out; }
.lg-choice__item:hover { box-shadow: var(--shadow-float); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.lg-choice__item > .lg-icon:last-child { flex: none; color: var(--ink-muted); }
.lg-choice__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); }
.lg-choice__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.lg-choice__t { font-size: 18px; line-height: 24px; font-weight: 650; }
.lg-choice__s { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---------- FAQ: native details ---------- */
.lg-faq { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-faq__item + .lg-faq__item { border-top: 1px solid var(--line); }
.lg-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-6); font-size: 18px; line-height: 26px; font-weight: 600; cursor: pointer; list-style: none; }
.lg-faq__q::-webkit-details-marker { display: none; }
.lg-faq__q .lg-icon { flex: none; color: var(--ink-muted); transition: transform .15s ease-out; }
.lg-faq__item[open] .lg-faq__q .lg-icon { transform: rotate(180deg); }
.lg-faq__a { margin: 0; padding: 0 var(--space-6) var(--space-5); max-width: 40em; font-size: 17px; line-height: 26px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lg-faq__q .lg-icon { transition: none; } }

/* ---------- SearchResult ---------- */
.lg-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-results > li + li { border-top: 1px solid var(--line); }
.lg-result { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: var(--space-4) var(--space-6); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.lg-result:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-results > li:first-child .lg-result { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.lg-results > li:last-child .lg-result { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.lg-results > li:only-child .lg-result { border-radius: var(--radius-lg); }
.lg-result__kind { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); }
.lg-result__title { font-size: 18px; line-height: 24px; font-weight: 650; color: var(--link); }
.lg-result__snip { font-family: var(--font-serif); font-size: 17px; line-height: 26px; }
.lg-result__snip mark { padding: 0 2px; border-radius: 3px; background: var(--butter); color: var(--ink); }
.lg-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-result__lock { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* ---------- Replies: guest label ---------- */
.lg-reply__guest { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }

/* ---------- Letter: letters to the future ---------- */
.lg-letter { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6); padding-top: calc(var(--space-6) + 4px); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lg-letter--sealed, .lg-letter--waiting { background: repeating-linear-gradient(135deg, var(--surface) 0 18px, var(--surface-2) 18px 19px); border: 1px dashed var(--line-strong); box-shadow: none; }
.lg-letter__seal { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); box-shadow: 0 0 0 4px var(--surface); }
.lg-letter--open .lg-letter__seal { background: var(--positive-soft); color: var(--positive); }
.lg-letter__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--space-2) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-letter__to { margin: 0; font-size: 21px; line-height: 28px; font-weight: 650; }
.lg-letter__when { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.lg-letter__meta { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-letter__text { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure-read); font-family: var(--font-serif); font-size: 19px; line-height: 30px; }
.lg-letter__text p { margin: 0; }
.lg-letter__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.lg-letter--read { max-width: 760px; gap: var(--space-4); padding: var(--space-8); }

/* ---------- MergeCompare: two records side by side ---------- */
.lg-merge { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.lg-merge__row { display: grid; grid-template-columns: minmax(96px, 0.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.lg-merge__row + .lg-merge__row { border-top: 1px solid var(--line); }
.lg-merge__row--head { background: var(--surface-2); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.lg-merge__row--head > span { padding: var(--space-2) var(--space-4); }
.lg-merge__field { display: flex; align-items: center; padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }
.lg-merge__val { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--tap-min); padding: var(--space-3) var(--space-4); border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; }
.lg-merge__val:hover { background: var(--surface-2); }
.lg-merge__val[aria-checked="true"], .lg-merge__val[aria-pressed="true"] { background: var(--positive-soft); box-shadow: inset 3px 0 0 var(--positive); font-weight: 600; }
.lg-merge__src { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
@media (max-width: 600px) { .lg-merge__row { grid-template-columns: 1fr 1fr; } .lg-merge__field { grid-column: 1 / -1; padding-bottom: 0; } .lg-merge__row--head > span:first-child { display: none; } .lg-merge__val:first-of-type { border-left: 0; } }

/* ---------- Consent: biometric and other explicit consent ---------- */
.lg-consent { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--line); }
.lg-consent__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.lg-consent__text { margin: 0; font-size: 16px; line-height: 24px; }
.lg-consent__facts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }


/* ---------- Email: письма на почту (превью; в рассылке стили инлайнятся) ---------- */
.lg-email { padding: var(--space-6) var(--space-3); background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
.lg-email__pre { display: none; }
.lg-email__card { max-width: 600px; margin: 0 auto; border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.lg-email__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 18px 32px; border-bottom: 1px solid var(--line); }
.lg-email__brand { font-size: 17px; line-height: 24px; font-weight: 700; }
.lg-email__space { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-email__body { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 32px; font-size: 17px; line-height: 27px; }
.lg-email__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; }
.lg-email__p { margin: 0; }
.lg-email__note { margin: 0; padding: 16px 20px; border-radius: var(--radius-md); background: var(--surface-2); }
.lg-email__note p { margin: 0 0 8px; font-family: var(--font-serif); font-size: 18px; line-height: 29px; }
.lg-email__from { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-email__btn { display: block; padding: 14px 24px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: 18px; line-height: 24px; font-weight: 700; text-align: center; text-decoration: none; }
.lg-email__btn:hover { background: var(--primary-strong); color: var(--on-primary); text-decoration: none; }
.lg-email__btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.lg-email__btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
.lg-email__fine { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-email__link { word-break: break-all; }
.lg-email__section { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.lg-email__h2 { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.lg-email__item { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); text-decoration: none; }
.lg-email__item img { flex: none; width: 88px; height: 66px; border-radius: var(--radius-sm); object-fit: cover; }
.lg-email__item-t { display: block; font-weight: 600; }
.lg-email__item-s { display: block; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-email__date { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 88px; height: 66px; border-radius: var(--radius-sm); background: var(--peach); color: var(--ink); font-size: 14px; line-height: 18px; }
.lg-email__date b { font-size: 24px; line-height: 28px; }
.lg-email__foot { padding: 20px 32px 28px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.lg-email__foot p { margin: 0 0 8px; }
.lg-email__foot a { color: var(--ink-muted); }
@media (max-width: 480px) { .lg-email { padding: 0; } .lg-email__card { border-radius: 0; } .lg-email__head, .lg-email__body, .lg-email__foot { padding-left: 20px; padding-right: 20px; } }

/* ---------- ErrorPage: служебные страницы ---------- */
.lg-errpage { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 600px; margin: 0 auto; padding: var(--space-12) var(--space-4); text-align: center; }
.lg-errpage__mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--sky); color: var(--ink); }
.lg-errpage__mark .lg-icon { width: 32px; height: 32px; }
.lg-errpage--noaccess .lg-errpage__mark { background: var(--lilac); }
.lg-errpage--expired .lg-errpage__mark { background: var(--butter); }
.lg-errpage--broken .lg-errpage__mark { background: var(--peach); }
.lg-errpage__code { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-errpage__title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.lg-errpage__text { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.lg-errpage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.lg-errpage__form { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: 460px; margin-top: var(--space-2); text-align: left; }
.lg-errpage__form .lg-input { flex: 1 1 220px; }
.lg-errpage__fine { margin: var(--space-2) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Settings: строки настроек, подформы, устройства, меню разделов ---------- */
.lg-setnav { display: none; }
.lg-setnav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lg-setnav a { display: flex; align-items: center; gap: 10px; min-height: var(--tap-min); padding: 0 12px; border-radius: var(--radius-md); color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; }
.lg-setnav a:hover, .lg-setnav a[aria-current="true"] { background: var(--surface-2); }
.lg-setnav .lg-icon { color: var(--ink-muted); }
@media (min-width: 900px) { .lg-setnav { display: block; } }
.lg-setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lg-setrow__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.lg-setrow__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-setrow__s { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-setrow__s .lg-status { margin-right: 6px; vertical-align: 1px; }
.lg-setrow__note { font-weight: 400; color: var(--ink-muted); }
.lg-setrow__danger { color: var(--danger); }
.lg-setsub { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-2); }
.lg-devices { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.lg-device { display: flex; align-items: center; gap: 12px; }
.lg-device__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); }

/* ---------- LangSwitch: выбор языка интерфейса ---------- */
.lg-lang { position: relative; }
.lg-lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 12px; border-radius: var(--radius-full); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.lg-lang__btn::-webkit-details-marker { display: none; }
.lg-lang__btn::marker { content: ""; }
.lg-lang__btn:hover, .lg-lang[open] > .lg-lang__btn { background: var(--surface-2); }
.lg-lang__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-lang__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.lg-lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap-min); padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); font-size: 16px; line-height: 22px; text-decoration: none; }
.lg-lang__menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-lang__menu a[aria-current="true"] { font-weight: 700; }
.lg-lang__note { margin-top: 4px; padding: 8px 12px 6px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-sitefoot__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; flex-basis: 100%; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-sitefoot__langs a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--ink-muted); }
.lg-sitefoot__langs a[aria-current="true"] { color: var(--ink); font-weight: 700; text-decoration: none; }

/* ---------- ClassYears: учебные годы класса или группы, путь по классам ---------- */
.lg-classyears { display: flex; gap: var(--space-2); margin: 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.lg-classyears > li { flex: 0 0 auto; }
.lg-classyears__item { display: flex; flex-direction: column; gap: 2px; min-width: 132px; min-height: var(--tap-min); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; }
.lg-classyears__item:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.lg-classyears__item[aria-current="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.lg-classyears__code { font-size: 18px; line-height: 24px; font-weight: 700; }
.lg-classyears__k { font-size: 14px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-classyears__src { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-classyears__item--guess { border-style: dashed; }
.lg-classyears__item--guess .lg-classyears__code { color: var(--ink-muted); }

.lg-classpath { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lg-classpath__item--place { padding-top: var(--space-6); }
.lg-classpath__item--place:first-child { padding-top: 0; }
.lg-classpath__place { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-classpath__year { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding: 14px 12px; border-radius: var(--radius-md); box-shadow: inset 0 1px 0 var(--line); }
.lg-classpath__item.is-on .lg-classpath__year { background: var(--link-soft); box-shadow: none; }
.lg-classpath__item.is-on + .lg-classpath__item .lg-classpath__year { box-shadow: none; }
.lg-classpath__item.is-new .lg-classpath__year { background: var(--positive-soft); }
.lg-classpath__when { padding-top: 4px; font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.lg-classpath__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-classpath__class { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.lg-classpath__unknown { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-full); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); vertical-align: middle; }
.lg-classpath__school { margin: 0; font-size: 17px; line-height: 24px; }
.lg-classpath__note { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-classpath__docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.lg-classpath__doc { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); max-width: 320px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: zoom-in; }
.lg-classpath__doc img { flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.lg-classpath__doc > span { display: flex; flex-direction: column; min-width: 0; }
.lg-classpath__doct { font-size: 14px; line-height: 19px; }
.lg-classpath__docp { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-classpath__flag { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--caution-soft); color: var(--ink); font-size: 15px; line-height: 22px; text-decoration: none; }
.lg-classpath__flag .lg-icon { flex: none; margin-top: 3px; color: var(--caution); }
.lg-classpath__space { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.lg-classpath__spacetag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: var(--radius-full); background: var(--sky); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.lg-classpath__spacetag.is-pending { background: var(--surface-2); border: 1px dashed var(--line-strong); }
.lg-classpath__move { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px 10px 92px; font-size: 15px; line-height: 22px; color: var(--ink-muted); font-style: italic; }
.lg-classpath__move .lg-icon { flex: none; margin-top: 3px; }
.lg-classpath__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--space-4) 0 0; padding: 14px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font-size: 16px; line-height: 22px; }
@media (max-width: 600px) {
  .lg-classpath__year { grid-template-columns: minmax(0, 1fr); padding: 14px 4px; }
  .lg-classpath__space { grid-column: 1; }
  .lg-classpath__move { padding-left: 4px; }
}

/* ---------- ClassLines: кто с кем учился — линии по годам и «вокруг меня» ---------- */
.lg-lines-wrap { overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lg-lines-wrap:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-lines { --lines-tpl: minmax(200px, 260px) repeat(5, minmax(64px, 1fr)) 76px; min-width: 640px; padding: 8px 0; }
.lg-lines__row { display: grid; grid-template-columns: var(--lines-tpl); align-items: center; min-height: 48px; }
.lg-lines__row--head { align-items: end; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lg-lines__row--me { background: var(--link-soft); }
.lg-lines__corner { padding: 0 16px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.lg-lines__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lg-lines__code { font-size: 15px; line-height: 20px; font-weight: 700; }
.lg-lines__k, .lg-lines__y { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-lines__col--guess .lg-lines__code { color: var(--ink-muted); font-weight: 600; }
.lg-lines__band { padding: 14px 16px 4px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-lines__who { position: sticky; left: 0; z-index: 1; min-width: 0; background: inherit; }
.lg-lines__row:not(.lg-lines__row--me) .lg-lines__who { background: var(--surface); }
.lg-lines__name { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-min); padding: 2px 12px 2px 16px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.lg-lines__name:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-lines__name[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--primary); background: var(--surface-2); }
.lg-lines__nm { display: flex; flex-direction: column; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.lg-lines__sub { font-size: 13px; line-height: 17px; font-weight: 400; color: var(--ink-muted); }
.lg-lines__cell { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; }
.lg-lines__cell.is-span::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; background: color-mix(in srgb, var(--link) 34%, var(--surface)); }
.lg-lines__cell.is-start::before { left: 50%; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.lg-lines__cell.is-end::before { right: 50%; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.lg-lines__cell.is-start.is-end::before { left: calc(50% - 14px); right: calc(50% - 14px); }
.lg-lines__cell--teach.is-span::before { background: color-mix(in srgb, var(--positive) 40%, var(--surface)); }
.lg-lines__cell.is-approx::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--positive) 40%, var(--surface)) 0 8px, transparent 8px 12px); }
.lg-lines__cell.is-guess { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-2) 6px 8px); }
.lg-lines__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font-size: 12px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-lines__dot .lg-icon { width: 14px; height: 14px; }
.lg-lines__dot--cam { background: var(--primary); color: var(--on-primary); }
.lg-lines__dot--out { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.lg-lines__dot--weak { background: var(--surface); color: var(--ink-muted); box-shadow: inset 0 0 0 2px var(--line-strong); }
.lg-lines__gone { position: relative; z-index: 1; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.lg-lines__meet { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--butter); color: var(--ink); font-size: 12px; font-weight: 700; }
@media (max-width: 600px) { .lg-lines { --lines-tpl: 148px repeat(5, 56px) 64px; min-width: 0; } .lg-lines__name { gap: 8px; padding-left: 12px; } .lg-lines__name .lg-avatar { display: none; } .lg-lines__nm { font-size: 14px; line-height: 18px; } .lg-lines__code { font-size: 13px; } .lg-lines__k, .lg-lines__y { font-size: 11px; } }
.lg-lines__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-lines__legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg-lines__swatch { display: inline-block; width: 28px; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--link) 34%, var(--surface)); }
.lg-lines__swatch--approx { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--positive) 40%, var(--surface)) 0 8px, transparent 8px 12px); }

.lg-rings { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin: 0 auto; }
.lg-rings__ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px dashed var(--line-strong); border-radius: 50%; transform: translate(-50%, -50%); }
.lg-rings__me { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); font-size: 13px; font-weight: 700; }
.lg-rings__node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 26px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 12px/16px var(--font-sans); white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-card); }
.lg-rings__node--r1 { background: var(--sky); border-color: transparent; font-size: 14px; line-height: 18px; padding: 4px 12px; }
.lg-rings__node--r2 { background: var(--link-soft); border-color: transparent; }
.lg-rings__node.is-on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.lg-rings__list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.lg-rings__gt { margin: 0 0 6px; font-size: 15px; line-height: 20px; font-weight: 700; }
.lg-rings__names { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (max-width: 600px) { .lg-rings { display: none; } .lg-rings__list { margin-top: 0; } }

/* ---------- Thanks: спасибо учителю или однокурснику ---------- */
.lg-thanks { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.lg-thanks__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-2); }
.lg-thanks__item--book { background: var(--positive-soft); }
.lg-thanks__item--new { box-shadow: inset 0 0 0 2px var(--positive); }
.lg-thanks__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-thanks__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 16px; line-height: 22px; }
.lg-thanks__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-thanks__text { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 28px; }
.lg-thanks__count { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: var(--radius-full); background: var(--positive-soft); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-thanks-form { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-2); }

/* ---------- MediaOrigin: один оригинал — несколько публикаций ---------- */
.lg-origin { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lg-origin__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.lg-origin__facts { display: flex; flex-direction: column; margin: 0; }
.lg-origin__fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.lg-origin__fact dt { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.lg-origin__fact dd { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 16px; line-height: 22px; }
.lg-origin__fact.is-conflict dd { font-weight: 650; }
.lg-origin__fact.is-conflict dd::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 4px; border-radius: 2px; background: var(--caution); }
.lg-origin__note { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
@media (max-width: 600px) { .lg-origin__fact { grid-template-columns: minmax(0, 1fr); } }

.lg-pubs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lg-pubs__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.lg-pubs__item:first-child { border-top: 0; }
.lg-pubs__item--here .lg-pubs__t::after { content: " — здесь"; font-weight: 400; color: var(--ink-muted); }
.lg-pubs__item--closed { opacity: .92; }
.lg-pubs__item--closed .lg-pubs__body { padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.lg-pubs__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-pubs__t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 650; }
.lg-pubs__s { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-pubs__cap { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 24px; }
.lg-pubs__note { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--caution-soft); font-size: 14px; line-height: 20px; }
.lg-pubs--compact .lg-pubs__item { padding: 8px 0; align-items: center; }
.lg-pubs--compact .lg-pubs__body { gap: 0; }

.lg-dupe { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.lg-dupe__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.lg-dupe__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-dupe__item { margin: 0; }
.lg-dupe__item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-2); }
.lg-dupe__item figcaption { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-dupe__score { margin: 0; font-size: 16px; line-height: 24px; }

/* ---------- Confirm: спросить перед тем, как убрать, и дать вернуть ---------- */
.lg-confirm { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 16px; border: 2px solid var(--danger); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); }
.lg-confirm__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 650; }
.lg-confirm__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.lg-confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lg-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.lg-removed__body { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; min-width: 0; }
.lg-removed__t { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; }
.lg-removed__s { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-toast { display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 20px; border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font: 500 16px/24px var(--font-sans); box-shadow: var(--shadow-float); }
.lg-toast__action { position: relative; flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; }
.lg-toast__action::after { content: ""; position: absolute; inset: -4px; }
.lg-toast__action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- BookPage: обложка и страницы собранной книги на «бумаге» ---------- */
.lg-bookcover { position: relative; display: flex; flex-direction: column; width: 260px; max-width: 100%; aspect-ratio: 148 / 210; overflow: hidden; align-self: center; border-radius: 4px 10px 10px 4px; background: var(--paper-cover); color: var(--paper-ink); box-shadow: var(--shadow-float), inset 6px 0 0 rgba(0, 0, 0, .08); }
.lg-bookcover__img { display: block; width: 100%; height: 52%; object-fit: cover; filter: sepia(.15); }
.lg-bookcover__text { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px; }
.lg-bookcover__title { margin: 0; font-family: var(--font-serif); font-size: 20px; line-height: 24px; font-weight: 600; text-wrap: balance; }
.lg-bookcover__sub { margin: 0; font-family: var(--font-serif); font-size: 13px; line-height: 18px; font-style: italic; }
.lg-bookcover__fam { margin: auto 0 0; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.lg-bookcover-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lg-bookcover-opt { width: 76px; height: 100px; padding: 0; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-muted); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.lg-bookcover-opt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-bookcover-opt[aria-pressed="true"] { border-color: var(--link); box-shadow: 0 0 0 2px var(--link); }
.lg-bookcover-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-bookspread { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: var(--paper-line); border-radius: 6px; box-shadow: var(--shadow-card); }
.lg-bookpage { position: relative; display: flex; flex-direction: column; gap: 8px; aspect-ratio: 148 / 210; padding: 18px 16px 26px; overflow: hidden; background: var(--paper); color: var(--paper-ink); }
.lg-bookpage__h { margin: 0 0 4px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; }
.lg-bookpage__kicker { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.lg-bookpage__title { margin: 0; font-family: var(--font-serif); font-weight: 600; text-wrap: balance; }
.lg-bookpage__text { margin: 0; font-family: var(--font-serif); }
.lg-bookpage__more { margin: 0; font-family: var(--font-serif); font-size: 11px; font-style: italic; color: var(--paper-muted); }
.lg-bookpage__num { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-serif); font-size: 10px; color: var(--paper-muted); }
.lg-booktoc { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-family: var(--font-serif); line-height: 1.35; }
.lg-booktoc li { display: flex; align-items: baseline; gap: 4px; }
.lg-booktoc__t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lg-booktoc__dots { flex: 1; min-width: 8px; border-bottom: 1px dotted var(--paper-muted); transform: translateY(-3px); }
.lg-booktoc__p { font-variant-numeric: tabular-nums; }
@media print { .lg-bookpage, .lg-bookcover { box-shadow: none; } }

/* ---------- StoryNav: длинная история — разделы, вопросы, прогресс, закладки ---------- */
.lg-snav { display: flex; flex-direction: column; gap: var(--space-4); }
.lg-snav__head { display: flex; flex-direction: column; gap: var(--space-2); }
.lg-snav__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.lg-snav__meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-snav__list, .lg-snav__sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lg-snav__list { gap: 2px; }
.lg-snav__part { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-2); width: 100%; min-height: var(--tap-min); padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.lg-snav__part:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lg-snav__part:focus-visible, .lg-snav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-snav__n { font: 700 14px/22px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lg-snav__t { font-size: 16px; line-height: 22px; font-weight: 650; }
.lg-snav__s { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.lg-snav__pg { font-size: 13px; line-height: 22px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-snav__part .lg-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-muted); transition: transform .15s ease-out; }
.lg-snav__part[aria-expanded="true"] .lg-snav__chev { transform: rotate(90deg); }
.lg-snav__part--cur .lg-snav__n { color: var(--primary-text); }
.lg-snav__sub { margin: 2px 0 var(--space-2) 32px; padding-left: var(--space-2); border-left: 2px solid var(--line); }
.lg-snav__sub .lg-snav__sub { margin: 0 0 var(--space-1) var(--space-3); border-left-style: dashed; }
.lg-snav__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-2); min-height: 40px; padding: 8px var(--space-2); border-radius: var(--radius-sm); color: var(--ink); font-size: 15px; line-height: 21px; text-decoration: none; }
.lg-snav__item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
button.lg-snav__item { width: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lg-snav__item[aria-current="location"] { background: var(--link-soft); box-shadow: inset 3px 0 0 var(--link); font-weight: 600; }
.lg-snav__item--read .lg-snav__q { color: var(--ink-muted); }
.lg-snav__item--read .lg-snav__q::before { content: "✓ "; color: var(--positive); font-weight: 700; }
.lg-snav__flag { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-text); }
.lg-snav__flag .lg-icon { width: 14px; height: 14px; }
.lg-snav__note { display: block; margin: 2px 0 0; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-bookmarks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lg-bookmark { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; }
a.lg-bookmark:hover, button.lg-bookmark:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
button.lg-bookmark { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.lg-bookmark:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-bookmark__where { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.lg-bookmark__where .lg-icon { width: 14px; height: 14px; color: var(--primary-text); }
.lg-bookmark__t { font-family: var(--font-serif); font-size: 16px; line-height: 24px; }
.lg-bookmark__note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-qhead { margin: 2.2em 0 1em; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--lilac); color: var(--ink); font-family: var(--font-sans); scroll-margin-top: 96px; hyphens: manual; }
.lg-qhead__who { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 13px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-qhead__who .lg-icon { width: 16px; height: 16px; }
.lg-prose .lg-qhead__q, .lg-qhead__q { margin: 0; font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.lg-qhead__orig { margin: 4px 0 0; font-size: 14px; line-height: 20px; font-style: italic; color: var(--ink-muted); }
.lg-qhead__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: 15px; line-height: 22px; }
.lg-parthead { margin: 0 0 var(--space-6); scroll-margin-top: 96px; }
.lg-parthead__k { margin: 0 0 var(--space-2); font: 600 13px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-prose .lg-parthead__t, .lg-parthead__t { margin: 0; font-family: var(--font-serif); font-size: 32px; line-height: 40px; font-weight: 600; text-wrap: balance; }
.lg-parthead__orig { margin: var(--space-2) 0 0; font-size: 15px; line-height: 22px; font-style: italic; color: var(--ink-muted); }

/* ---------- StoryEdit: правка истории, связи с людьми и местами, версии ---------- */
.lg-editbar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--nav-h); padding: var(--space-1) var(--space-4); background: var(--surface); box-shadow: 0 1px 0 var(--line), var(--shadow-card); }
.lg-editbar__what { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.lg-editbar__mode { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 0 8px; border-radius: var(--radius-full); background: var(--butter); font: 700 12px/20px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.lg-editbar__t { font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-editbar__tools { display: flex; flex-wrap: wrap; gap: 2px; }
.lg-editbar__sep { width: 1px; align-self: stretch; margin: var(--space-2) var(--space-1); background: var(--line); }
.lg-editable { position: relative; margin: 0 -14px 0.8em; padding: 6px 14px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); outline: none; }
.lg-editable:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lg-editable:focus, .lg-editable--on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--link); }
.lg-mention { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
button.lg-mention { padding: 0; border: 0; background: none; font: inherit; text-align: inherit; }
.lg-editable .lg-mention { border-radius: 4px; background: var(--link-soft); text-decoration: none; box-shadow: 0 0 0 2px var(--link-soft); }
.lg-mention--guess, .lg-editable .lg-mention--guess { color: inherit; background: none; box-shadow: none; text-decoration: underline dashed var(--caution); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.lg-mention--on, .lg-editable .lg-mention--on { box-shadow: 0 0 0 2px var(--link); }
.lg-mention:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-mpick { display: flex; flex-direction: column; gap: var(--space-3); width: 360px; max-width: calc(100vw - 32px); padding: var(--space-5); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); font-family: var(--font-sans); }
.lg-mpick__found { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-mpick__found b { color: var(--ink); font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.lg-mpick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-mpick__list .lg-person { width: 100%; border-radius: var(--radius-md); }
.lg-mpick__list .lg-person[aria-pressed="true"] { background: var(--link-soft); box-shadow: inset 3px 0 0 var(--link); }
.lg-mpick__why { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-mpick__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.lg-capedit { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font-family: var(--font-sans); }
.lg-capedit .lg-textarea { min-height: 72px; font-size: 16px; line-height: 24px; }
.lg-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-4); margin: 0; font-size: 15px; line-height: 22px; }
.lg-facts dt { color: var(--ink-muted); }
.lg-facts dd { margin: 0; }
.lg-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lg-hist__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.lg-hist__item:last-child { border-bottom: 0; }
.lg-hist__when { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.lg-hist__what { margin: 2px 0 0; font-size: 15px; line-height: 22px; }
.lg-hist__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.lg-hist__item--pending { background: var(--caution-soft); margin: 0 calc(-1 * var(--space-3)); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-md); border-bottom: 0; }
.lg-diff { font-family: var(--font-serif); font-size: 17px; line-height: 27px; }
.lg-diff ins { padding: 0 2px; border-radius: 3px; background: var(--positive-soft); color: var(--ink); text-decoration: underline; text-decoration-color: var(--positive); }
.lg-diff del { padding: 0 2px; border-radius: 3px; background: var(--danger-soft); color: var(--ink-muted); text-decoration: line-through; }

/* ---------- Question: вопрос человеку, библиотека вопросов, ответы ---------- */
.lg-qcard { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--lilac); color: var(--ink); }
.lg-qcard__who { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: 15px; line-height: 22px; }
.lg-qcard__q { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.lg-qcard__hint { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.lg-qcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lg-qcard--sm { gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); }
.lg-qcard--sm .lg-qcard__q { font-size: 21px; line-height: 28px; }
.lg-qcard--week { background: var(--peach); }
.lg-qcard--mine { background: var(--surface); box-shadow: inset 0 0 0 2px var(--lilac), var(--shadow-card); }
.lg-qrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lg-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.lg-qrow:hover, button.lg-qrow:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
button.lg-qrow { width: 100%; border-width: 0 0 1px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.lg-qrow__q { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.lg-qrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-qrow__meta .lg-icon { width: 14px; height: 14px; }
.lg-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.lg-answer { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lg-answer__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-answer__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.lg-answer__name { font-size: 16px; line-height: 22px; font-weight: 650; }
.lg-answer__src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-answer__src .lg-icon { width: 14px; height: 14px; }
.lg-answer__text { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 30px; }
.lg-answer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 15px; line-height: 22px; }
.lg-answer--book { box-shadow: inset 4px 0 0 var(--link), var(--shadow-card); }
.lg-answer--mine { box-shadow: inset 4px 0 0 var(--primary), var(--shadow-card); }
.lg-answer--private { background: var(--surface-2); box-shadow: none; }
@media (max-width: 600px) { .lg-qcard { padding: var(--space-5); border-radius: var(--radius-lg); } .lg-qcard__q { font-size: 23px; line-height: 30px; } .lg-answer { padding: var(--space-4); } .lg-answer__text { font-size: 18px; line-height: 28px; } }

/* ===== 2026-10-11: Switch ===== */
.lg-switch { position: relative; flex: none; width: 52px; height: 32px; margin: 6px 0; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--line-strong); cursor: pointer; transition: background-color .15s ease-out; }
.lg-switch::before { content: ""; position: absolute; inset: -6px -4px; }
.lg-switch__knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); transition: transform .15s ease-out; }
.lg-switch[aria-checked="true"] { background: var(--primary); }
.lg-switch[aria-checked="true"] .lg-switch__knob { transform: translateX(20px); }
.lg-switch:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.lg-switch:disabled { opacity: .45; cursor: not-allowed; }
.lg-switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.lg-switchrow + .lg-switchrow { border-top: 1px solid var(--line); }
.lg-switchrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-switchrow__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-switchrow__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-switchrow__state { font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .lg-switch, .lg-switch__knob { transition: none; } }

/* ===== 2026-10-11: StoryNav — заметка к закладке ===== */
.lg-bookmark-item { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lg-bookmark-item > .lg-bookmark { border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; padding-bottom: var(--space-2); }
.lg-bookmark-item:hover { border-color: var(--line-strong); }
.lg-bookmark__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); padding: 0 var(--space-2) var(--space-2) var(--space-4); }
.lg-bookmark__foot .lg-bookmark__note { flex: 1 1 100%; margin: 0 0 2px; color: var(--ink); }
.lg-bookmark__foot .lg-bookmark__note::before { content: ""; display: inline-block; width: 3px; height: 14px; margin-right: 8px; border-radius: 2px; background: var(--line-strong); vertical-align: -2px; }
.lg-bookmark__foot .lg-iconbtn { margin-left: auto; }
.lg-bookmark__edit { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.lg-bookmark__edit .lg-textarea { min-height: 72px; }
.lg-bookmark__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== 2026-10-11: StoryEdit — свой заголовок хранителя ===== */
.lg-keephead { font-family: var(--font-sans); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-6) 0 var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--link); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--link-soft); }
.lg-keephead__input { flex: 1 1 240px; min-width: 0; min-height: var(--tap-min); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 700 20px/28px var(--font-sans); }
.lg-keephead__input:focus-visible { border-color: var(--link); }
.lg-keephead__tag { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.lg-keephead__where { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-editable--caret { box-shadow: inset 3px 0 0 var(--link); }

/* ===== 2026-10-11: Spaces — скрытое меню, узкая шапка, лист на телефоне ===== */
.lg-spaces__menu[hidden] { display: none; }
/* 2026-10-14: [hidden] сильнее display: block из медиазапроса ниже — закрытое затемнение не перехватывает нажатия */
.lg-spaces__backdrop[hidden] { display: none; }
.lg-spaces__name { flex-wrap: nowrap; }
.lg-spaces__label { white-space: normal; }
.lg-spaces__short { display: none; }
.lg-spaces__backdrop { display: none; }
@media (max-width: 400px) {
  .lg-spaces__name { font-size: 16px; line-height: 22px; }
  .lg-spaces__full { display: none; }
  .lg-spaces__short { display: inline; }
}
@media (max-width: 600px) {
  .lg-spaces__backdrop { display: block; position: fixed; inset: 0; z-index: 80; border: 0; background: var(--scrim); }
  .lg-spaces__menu { position: fixed; z-index: 81; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 80vh; overflow-y: auto; padding: var(--space-3) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .lg-spaces__menu::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--space-3); border-radius: 2px; background: var(--line-strong); }
  .lg-spaces__menu .lg-spaces__head { display: block; }
}
.lg-spaces__head { display: none; margin: 0 var(--space-3) var(--space-2); font: 700 18px/26px var(--font-sans); color: var(--ink); }

/* ===== 2026-10-11: StoryPrompt — «Ваш вопрос на неделю» ===== */
.lg-ask--mine { background: var(--sky); }
.lg-ask__from { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-ask__from .lg-icon { flex: none; width: 16px; height: 16px; }
.lg-ask__alt { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== 2026-10-11: TreeNode — добавлен родным, ждёт проверки ===== */
.lg-tnode__pending { position: absolute; top: -10px; right: var(--space-3); padding: 0 8px; border-radius: var(--radius-full); background: var(--butter); color: var(--ink); font: 700 12px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--surface); }
.lg-person__pending { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--radius-full); background: var(--butter); color: var(--ink); font: 700 12px/18px var(--font-sans); vertical-align: 1px; }
.lg-relpick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.lg-relpick legend { margin-bottom: var(--space-2); font: 600 15px/20px var(--font-sans); color: var(--ink); }

/* ===== 2026-10-11: Reconcile — номера на снимке при новом разборе ===== */
.lg-pinset { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: crosshair; }
.lg-pinset img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.lg-pinset .lg-pin { pointer-events: none; }
.lg-pinlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lg-pinlist__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); }
.lg-pinlist__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 14px/1 var(--font-sans); }
.lg-pinlist__item .lg-input { flex: 1 1 auto; min-width: 0; }

/* ===== 2026-10-11: Поздравления ===== */
.lg-greet { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--peach); }
.lg-greet__kicker { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface); font: 700 13px/18px var(--font-sans); color: var(--ink); }
.lg-greet__title { margin: 0; font: 700 32px/40px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.lg-greet__lead { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink); }
.lg-greet__who { display: flex; align-items: center; gap: var(--space-3); }
.lg-greet__faces { display: flex; }
.lg-greet__faces > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }
.lg-greet__faces > *:first-child { margin-left: 0; }
.lg-greet__note { display: flex; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.lg-greet__note .lg-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.lg-greetlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.lg-greetcard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lg-greetcard__head { display: flex; align-items: center; gap: var(--space-3); }
.lg-greetcard__name { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-greetcard__kin { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-greetcard__text { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 28px; color: var(--ink); }
.lg-greetcard img { width: 100%; height: auto; border-radius: var(--radius-md); }
@media (max-width: 600px) { .lg-greet { padding: var(--space-5); } .lg-greet__title { font-size: 26px; line-height: 32px; } .lg-greetlist { grid-template-columns: minmax(0, 1fr); } }

/* ===== 2026-10-14: Teen — аккаунт подростка, возраст, второй хранитель ===== */
.lg-ageband { display: inline-flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--butter); color: var(--ink); font-size: 15px; line-height: 22px; }
.lg-ageband .lg-icon { flex: none; margin-top: 3px; }
.lg-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lg-rules__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 15px; line-height: 22px; color: var(--ink); }
.lg-rules__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); }
.lg-check--strong { padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.lg-check--strong:has(input:checked) { border-color: var(--positive); background: var(--positive-soft); }
.lg-keepers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lg-keepers__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lg-keepers__item--empty { border: 2px dashed var(--line-strong); background: transparent; }
.lg-keepers__slot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-full); border: 2px dashed var(--line-strong); color: var(--ink-muted); }
.lg-keepers__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-keepers__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-keepers__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 600px) { .lg-keepers__item { flex-wrap: wrap; } .lg-keepers__item > .lg-btn { margin-left: calc(var(--avatar-sm) + var(--space-3)); } }

/* ===== 2026-10-15: Rod — общие предки нескольких семей ===== */
.lg-shared { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; min-height: 28px; padding: 3px 12px 3px 10px; border-radius: var(--radius-full); background: var(--link-soft); color: var(--ink); font: 600 14px/20px var(--font-sans); white-space: normal; }
.lg-shared .lg-icon { flex: none; width: 16px; height: 16px; color: var(--link); }
.lg-versions { display: grid; gap: var(--space-2); }
.lg-versions + .lg-versions { margin-top: var(--space-4); }
.lg-versions__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; }
.lg-versions__field { min-width: 120px; font: 600 15px/22px var(--font-sans); color: var(--ink-muted); }
.lg-versions__sum { font: 650 18px/24px var(--font-sans); color: var(--ink); }
.lg-versions__note { flex-basis: 100%; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-versions__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lg-versions__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.lg-versions__item--main { border-left-color: var(--positive); }
.lg-versions__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-versions__val { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-versions__src { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-match { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.lg-match__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lg-match__side { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.lg-match__label { font: 600 13px/18px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.lg-match__name { font: 650 16px/22px var(--font-sans); color: var(--ink); }
.lg-match__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-match__fam { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.lg-match__fam .lg-icon { flex: none; margin-top: 3px; color: var(--ink-muted); }
.lg-match__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lg-rodfams { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lg-rodfams__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); }
.lg-rodfams__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-rodfams__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-rodfams__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 600px) { .lg-match__pair { grid-template-columns: 1fr; } .lg-versions__field { min-width: 0; } }
.lg-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lg-branch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
.lg-branch__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-muted); }
.lg-branch__body { flex: 1 1 calc(100% - var(--avatar-sm) - var(--space-3)); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-branch__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-branch__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-branch--empty { border: 2px dashed var(--line-strong); background: transparent; }
.lg-branch--empty > .lg-btn { margin-left: calc(var(--avatar-sm) + var(--space-3)); }
.lg-branch--slot { position: absolute; z-index: 2; width: var(--tnode-w, 280px); height: 88px; border: 2px dashed var(--line-strong); background: transparent; cursor: pointer; flex-wrap: nowrap; }
.lg-branch--slot:hover { background: var(--surface); }
.lg-branch--slot .lg-branch__body { flex: 1 1 auto; }
.lg-tree__link--invite { background: none; border-radius: 0; border-left: 2px dashed var(--line-strong); }

/* ===== 2026-10-15: крёстные и близкие (решение 42) ===== */
.lg-kin--close { background: var(--lilac); color: var(--ink); }
.lg-tree__link--god { background: none; border-radius: 0; border-top: 2px dashed var(--line-strong); }
.lg-tnode__role { align-self: flex-start; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font: 700 12px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--surface); }
.lg-tree .lg-tnode__role { position: absolute; top: -10px; left: var(--space-3); }

/* ===== 2026-10-16: Pet — питомцы и хозяева по времени (решение 45) ===== */
.lg-avatar--pet { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.lg-avatar--pet .lg-icon { width: 40%; height: 40%; }
.lg-owners { list-style: none; margin: 0; padding: 0; display: grid; }
.lg-owners__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.lg-owners__item:first-child { border-top: 0; padding-top: 0; }
.lg-owners__period { font: 650 16px/24px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-owners__people { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.lg-owners__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lg-owners__name { flex: 1 1 160px; min-width: 0; font: 600 16px/22px var(--font-sans); color: var(--ink); }
.lg-owners__kin { font-weight: 400; color: var(--ink-muted); }
.lg-owners__role { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font: 600 13px/20px var(--font-sans); }
.lg-owners__role--main { background: var(--primary-soft); color: var(--primary-text); }
.lg-owners__src { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lg-tnode__pets { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; border-radius: var(--radius-full); background: var(--butter); color: var(--ink); font: 700 12px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--surface); }
.lg-tnode__pets .lg-icon { width: 14px; height: 14px; }
.lg-tree .lg-tnode__pets { position: absolute; bottom: -10px; right: var(--space-3); }
@media (max-width: 600px) { .lg-owners__item { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ===== 2026-10-17: питомцы на фото (решение 47) и места семьи (решение 48) ===== */
.lg-pin .lg-icon { width: 18px; height: 18px; }
.lg-pin--animal { gap: 2px; background: var(--butter); color: var(--ink); }
.lg-pin--place { background: var(--link); color: var(--surface); }
.lg-pin--static { min-width: 32px; height: 32px; padding: 0 6px; pointer-events: none; cursor: default; }
.lg-pin--static .lg-icon { width: 16px; height: 16px; }
.lg-pin__label { position: absolute; transform: translate(14px, -50%); padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 14px/20px var(--font-sans); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap; }
.lg-avatar--pet.lg-avatar--sm .lg-icon { width: 55%; height: 55%; }

.lg-placechip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 6px var(--space-4) 6px var(--space-3); border-radius: var(--radius-full); background: var(--link-soft); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 20px; max-width: 100%; }
.lg-placechip .lg-icon { flex: none; width: 18px; height: 18px; color: var(--link); }
.lg-placechip__t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-placechip__s { color: var(--ink-muted); white-space: nowrap; }
.lg-placechip--family { background: var(--butter); }
.lg-placechip--family .lg-icon { color: var(--ink); }
a.lg-placechip:hover { text-decoration: none; box-shadow: inset 0 0 0 2px var(--line-strong); }

.lg-placehead { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-6); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.lg-placehead__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.lg-placehead__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.lg-placehead__kind { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--butter); font: 700 13px/20px var(--font-sans); letter-spacing: .02em; text-transform: uppercase; }
.lg-placehead__kind .lg-icon { width: 16px; height: 16px; }
.lg-placehead__name { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lg-placehead__addr { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lg-placehead__addr .lg-icon { width: 16px; height: 16px; flex: none; }

.lg-placephotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.lg-placephoto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-placephoto__img { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); }
.lg-placephoto__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lg-placephoto__cap { margin: 0; font-size: 15px; line-height: 22px; }
.lg-placephoto__meta { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

@media (max-width: 600px) {
  .lg-placehead { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .lg-placehead__name { font-size: 28px; line-height: 34px; }
  .lg-placephotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* ===== 2026-10-18: кто растил (решение 50) ===== */
.lg-tree__link--raised { background: none; border-radius: 0; border-top: 2px dashed var(--line-strong); }
.lg-tree__link--raised-v { background: none; border-radius: 0; border-left: 2px dashed var(--line-strong); }