/* Page layout on top of the design system (tokens.css + bundle.css).
   Carried over from prototype/proto.css screen by screen; values only through tokens. */

/* ---------- shell ---------- */
.top-wrap { position: sticky; top: 0; z-index: 30; }
/* the open family switcher is a sheet from below on a phone: above the bottom tab bar (Spaces README) */
.top-wrap:has(.lg-spaces__btn[aria-expanded="true"]) { z-index: 90; }
.top-nav-wide, .top-tell, .top-me-name { display: none; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 20px 16px 120px; }
.tabbar-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
@media (min-width: 900px) {
  .top-nav-wide, .top-tell, .top-me-name { display: flex; }
  .top-me-name { display: inline; }
  .tabbar-fixed { display: none; }
  .wrap { padding: 40px 32px 96px; }
}
@media (max-width: 899px) { .top-wrap .lg-topbar { padding: 0 8px 0 16px; } .lg-topbar__brand { margin-right: auto; } }

.mark-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font: 500 16px/24px var(--font-sans); box-shadow: var(--shadow-float); }

/* ---------- book: contents ---------- */
.book-page { display: flex; flex-direction: column; gap: 32px; }
.book-page h1 { margin: 0; }

/* ---------- book: chapter ---------- */
.app-readbar { position: sticky; top: 0; z-index: 30; }
.panel-wrap { position: sticky; top: 64px; z-index: 29; height: 0; }
.panel-pos { position: absolute; right: 16px; top: 8px; width: min(360px, calc(100vw - 32px)); }
.panel-pos .lg-panel { max-height: calc(100vh - 96px); overflow-y: auto; }
.page-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.page-grid a { display: flex; align-items: center; justify-content: center; min-height: var(--tap-min); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; }
.page-grid a[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chapter-layout { max-width: var(--page-max); margin: 0 auto; padding: 0 0 96px; display: flex; flex-direction: column; gap: 24px; }
.chapter-sheet { background: var(--surface); padding: 28px 20px 40px; }
.chapter-head { margin: 0 0 32px; max-width: 34em; display: flex; flex-direction: column; gap: 8px; }
.chapter-head h1 { margin: 0; }
.chapter-sub { margin: 0; font-size: 19px; line-height: 27px; color: var(--ink-muted); }
.chapter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.chapter-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.lg-prose .lg-page { scroll-margin-top: 96px; }
.lg-prose p { scroll-margin-top: 120px; }
.lg-prose .lg-figure { margin: 36px 0; }
.chapter-end { display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
.chapter-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* «Кто в этой главе» (Chapter board): beside the text on a wide screen, after it on a narrow one */
.chapter-aside { display: none; }
.who-card { display: flex; flex-direction: column; gap: 4px; }
.who-title { margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 650; }
.who-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.who-places .lg-chip { min-height: 40px; }
.who-inline { margin: 0 16px; }
@media (min-width: 720px) {
  .chapter-layout { padding: 32px 24px 96px; }
  .chapter-sheet { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 48px 48px 56px; }
  .chapter-end { padding: 0; }
  .who-inline { margin: 0; }
}
@media (min-width: 900px) { .chapter-sheet { padding: 56px 56px 64px 136px; } }
@media (min-width: 1180px) {
  .chapter-layout--single { max-width: calc(880px + 48px); }
  .chapter-layout:not(.chapter-layout--single) { display: grid; grid-template-columns: minmax(0, 880px) 280px; column-gap: 32px; justify-content: center; align-items: start; }
  .chapter-aside { display: block; position: sticky; top: 88px; }
  .who-inline { display: none; }
}

/* ---------- book: a long story (LongStory board, ls-*) ---------- */
.ls-layout { max-width: 1320px; margin: 0 auto; padding: 0 0 112px; }
.ls-nav { display: none; }
.ls-layout--toc .ls-nav { display: block; padding: 20px 16px; background: var(--surface); }
.ls-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ls-sheet { padding-bottom: 48px; }
.ls-end { display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
.ls-sub { margin: var(--space-4) 0 0; font: 600 17px/24px var(--font-sans); color: var(--ink); }
.ls-more { margin: 32px 0 0; }
.ls-section + .ls-section, .ls-section + .ls-more + .ls-section { margin-top: 48px; }
.ls-scrim { position: fixed; inset: 0; z-index: 40; border: 0; padding: 0; background: var(--scrim); cursor: pointer; }
.ls-navsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 82vh; overflow-y: auto; }
.ls-mark { position: relative; }
.ls-mark .lg-bookmark { padding-right: 52px; }
.ls-mark__del { position: absolute; top: 4px; right: 4px; }
.ls-note { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.ls-note .lg-input { flex: 1; min-width: 0; }
.readbar-wide { display: none; }
.app-readbar .lg-readbar__page { white-space: nowrap; }
/* A phone has no room for five labels and «Раздел 1 · стр. 344 из 636»: the buttons keep their names for screen
   readers and their 44 px, as the StoryEdit bar does under 700 px (prototype/proto.css, .se-bar). */
@media (max-width: 429px) {
  .app-readbar[data-long] .lg-toolbtn > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.readbar-mark-on { display: none; }
[aria-pressed="true"] > .readbar-mark-on { display: inline-flex; }
[aria-pressed="true"] > .readbar-mark-off { display: none; }
@media (min-width: 700px) {
  .readbar-wide { display: inline-flex; }
  .ls-end { padding: 0; }
  .ls-layout { padding: 24px 24px 112px; }
  .ls-layout--toc .ls-nav { margin-bottom: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
}
@media (min-width: 1100px) {
  .ls-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .ls-nav, .ls-layout--toc .ls-nav { display: block; position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; margin: 0; padding: 20px 16px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .readbar-toc { display: none; }
}

/* ---------- a long story: editing in place (StoryEdit board, se-*) ---------- */
.se-bar { position: sticky; top: 0; z-index: 30; }
.se-bar .lg-editbar { flex-wrap: wrap; }
.se-bar__end { display: flex; gap: 8px; align-items: center; }
.se-layout { max-width: 1320px; margin: 0 auto; padding: 16px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.se-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.se-main > .lg-notice { margin: 0 16px; }
.se-sheet { padding-top: 28px; }
.se-prose { max-width: 36em; }
.se-prose .lg-editable { white-space: pre-wrap; }
.se-prose [hidden] { display: none; }
.se-prose .lg-keephead, #new-head { scroll-margin-top: 120px; } /* below the sticky edit bar */
.se-block { margin: 0 0 1em; }
.se-block--head .lg-editable, .se-block--head .lg-textarea { font-weight: 700; }
.se-block__note { margin: 0 0 4px; }
.se-plain { width: 100%; font: inherit; }
.se-fig { margin: 24px 0 28px; max-width: 520px; }
.se-nav { padding: 0 16px; }
.se-panel { padding: 20px 16px; background: var(--surface); }
.se-pan { display: flex; flex-direction: column; gap: 20px; }
.se-mpick, .se-mpick-wrap .lg-mpick { width: auto; padding: 16px; box-shadow: none; border: 1px solid var(--line); }
.se-mpick-wrap { display: flex; flex-direction: column; gap: 12px; }
.se-group { display: flex; flex-direction: column; gap: 6px; }
.se-group__h { margin: 0; font: 700 13px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.se-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.se-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; width: 100%; min-height: var(--tap-min); padding: 6px 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.se-row__t { font-size: 15px; line-height: 21px; font-weight: 600; }
.se-row__s { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.se-row .lg-icon { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-muted); }
.se-row--pend { background: var(--caution-soft); }
.se-row--pend .se-row__t { text-decoration: underline dashed var(--caution); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.se-row--pend:hover { box-shadow: inset 0 0 0 1px var(--caution); }
.se-row--done:hover { background: var(--link-soft); }
.se-heading { padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .se-layout { padding: 24px 24px 96px; } .se-main > .lg-notice, .se-nav { margin: 0; padding: 0; } .se-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } }
@media (max-width: 699px) { .se-bar .lg-toolbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .se-bar .lg-editbar__t { white-space: normal; } }
@media (min-width: 1100px) {
  .se-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; align-items: start; }
  .se-panel { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; padding: 20px; }
}

/* ---------- people ---------- */
.fam-near { margin-top: 20px; }
.hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 0 0 24px; }
.hello h1 { margin: 0; font-size: 30px; line-height: 36px; }
.hello p { margin: 4px 0 0; color: var(--ink-muted); }
@media (min-width: 900px) { .hello h1 { font-size: 40px; line-height: 46px; } }
.sec { padding: 24px 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sec-title { margin: 0 0 16px; font-size: 21px; line-height: 28px; font-weight: 650; }
.tree-search { position: relative; width: 300px; max-width: 100%; }
.tree-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ink-muted); pointer-events: none; }
.tree-search .lg-input { width: 100%; padding-left: 46px; }
.people { display: flex; flex-direction: column; gap: 24px; }
.people-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.people-main, .people-side, .people-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1000px) { .people-cols { grid-template-columns: minmax(0, 1fr) 320px; } .people-side { position: sticky; top: 96px; } }
.people-tools { display: flex; flex-direction: column; gap: 12px; }
.people-search { width: 100%; max-width: 480px; }
.people-filters { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.people-filters .lg-chip { flex: none; text-decoration: none; }
/* Filters are links (each its own address): the chosen one is aria-current, drawn as Chip's pressed state. */
.lg-chip[aria-current="true"], .lg-chip[aria-current="true"]:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.people-filter__n { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.people-gen .sec-title { display: flex; align-items: baseline; gap: 10px; }
.people-gen__n { font-size: 16px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.people-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.people-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.people-card__tags .lg-kin { margin: 0; }
.people-tip { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }

/* ---------- «Истории» and a story (Stories board) ---------- */
.stories { display: flex; flex-direction: column; gap: 24px; }
.stories-shelf { grid-auto-columns: minmax(232px, 280px); }
.stories-shelf .lg-collection--tall { aspect-ratio: 1; }
.stories-shelf .lg-collection__title { font-size: 19px; line-height: 25px; }
.stories-shelf .lg-collection__meta { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.stories-shelf .lg-collection--plain .lg-collection__icon { width: 48px; height: 48px; }
.stories-newbook { background: var(--butter); }
.stories-heritage { background: var(--peach); }
.stories-dates { background: var(--sage); }
.stories-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.stories-views { width: 520px; max-width: 100%; }
.stories-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stories-more { background: var(--surface-2); font-size: 11px; }
.stories-time { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.stories-rail { display: none; }
@media (min-width: 1000px) {
  .stories-time { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .stories-rail { display: block; position: sticky; top: 96px; padding: 8px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
}
.stories-groups { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.stories-group { display: flex; flex-direction: column; gap: 12px; }
.stories-also { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.stories-colhead { display: flex; flex-direction: column; gap: 8px; }
.stories-colhead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.stories-facet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.stories-facets { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.stories-facet__btn { display: flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 6px 14px 6px 8px; 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; }
.stories-facet__btn:hover { box-shadow: var(--shadow-card); }
.stories-facet__btn[aria-current="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--link-soft); }
.stories-facet__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.stories-facet__t { font-size: 16px; line-height: 22px; font-weight: 600; }
.stories-facet__s { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.stories-facet__n { margin-left: auto; padding-left: 8px; font-size: 14px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.stories-results { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1000px) {
  .stories-facet { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .stories-facets { flex-direction: column; overflow: visible; margin: 0; padding: 8px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
  .stories-facet__btn { width: 100%; border-color: transparent; }
}
.story-page { display: flex; flex-direction: column; gap: 24px; max-width: 1080px; }
.story-page__head { display: flex; flex-direction: column; gap: 10px; }
.story-page__title { margin: 0; text-wrap: balance; }
.story-page__by { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.story-page__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1000px) { .story-page__cols { grid-template-columns: minmax(0, 1fr) 320px; } }
.story-page__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.story-page__photo { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); }
.story-page__quote { margin: 0; padding: 24px 28px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.story-page__quote p { margin: 0; font-family: var(--font-serif); font-size: 21px; line-height: 32px; }
.story-page__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.story-page__side { display: flex; flex-direction: column; gap: 20px; padding: 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.story-page__side section { display: flex; flex-direction: column; gap: 8px; }
.story-themes { margin-top: var(--space-2); }
.story-themes > summary { list-style: none; width: fit-content; }
.story-themes > summary::-webkit-details-marker { display: none; }
.story-themes__form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.story-page__h { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.story-page__people { display: flex; flex-direction: column; margin: 0 -8px; padding: 0; list-style: none; }
.stories-facet__btn:hover { color: var(--ink); text-decoration: none; }
.story-page__text { margin: 0; }
/* StoryList renders its own <ol>: the list style of «Истории» (stories-list on the board) */
.stories-list-era ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.story-page__transcript { display: flex; flex-direction: column; gap: 8px; }
.story-page .lg-figure { margin: 0; }

/* ---------- a photo whole (PhotoViewer) and «Где это фото» (PhotoOrigin board) ---------- */
.viewer-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--viewer-bg); }
.viewer-page .lg-viewer { flex: 1; }
.viewer-page__origin { margin: 0; padding: 0 16px 20px; background: var(--viewer-bg); }
.cl-head { display: flex; flex-direction: column; gap: 8px; max-width: 46em; }
.cl-head h1, .cl-head p { margin: 0; }
.origin-page { display: flex; flex-direction: column; gap: 24px; }
.origin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .origin-cols { grid-template-columns: minmax(0, 1fr) 360px; } .origin-side { position: sticky; top: 96px; } }
.origin-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.origin-figure { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); line-height: 0; }
.origin-figure img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.origin-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.origin-pubs { display: flex; flex-direction: column; gap: 16px; }
.origin-share__form { display: flex; flex-direction: column; gap: 12px; }
.origin-share__targets { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---------- «Рассказать» (Main board, the compose window) ---------- */
.cmp-page { display: flex; justify-content: center; }
.cmp-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.cmp-dialog::backdrop { background: var(--scrim); }
.cmp { position: relative; width: min(600px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--surface); border-radius: var(--radius-xl); }
.cmp-page .cmp { box-shadow: var(--shadow-card); }
.cmp-form { display: flex; flex-direction: column; gap: 20px; }
.cmp-head { display: flex; align-items: flex-start; gap: 12px; }
.cmp-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.cmp-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cmp-way { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; }
.cmp-way:hover { box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; }
.cmp-way__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius-full); background: var(--surface-2); }
.cmp-way--main { background: var(--primary-soft); border-color: transparent; }
.cmp-way--main .cmp-way__icon { background: var(--primary); color: var(--on-primary); }
.cmp-way__text { display: flex; flex-direction: column; gap: 2px; }
.cmp-way__title { font-size: 18px; line-height: 24px; font-weight: 650; }
.cmp-way__sub { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cmp .lg-audience, .cmp-note { padding: 0; border: 0; }
.cmp-back { align-self: flex-start; }
.cmp-choice:has(input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cmp-choice:has(input:focus-visible), .lg-target:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.lg-target:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--link-soft); }
.lg-target:has(input:checked) .lg-target__check { border-color: var(--link); background: var(--link); color: var(--surface); }
.rec { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0 8px; text-align: center; }
.rec [hidden] { display: none; }
.rec-btn { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border: 0; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); cursor: pointer; box-shadow: 0 0 0 10px var(--primary-soft); }
.rec-btn .lg-icon { width: 44px; height: 44px; }
.rec-btn.is-on { animation: recpulse 1.6s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 10px var(--primary-soft); } 50% { box-shadow: 0 0 0 22px var(--primary-soft); } }
@media (prefers-reduced-motion: reduce) { .rec-btn.is-on { animation: none; } }
.rec-time { margin: 0; font-size: 40px; line-height: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-hint { margin: 0; color: var(--ink-muted); max-width: 26em; }
.rec .lg-field { width: 100%; text-align: left; }
.cmp textarea { min-height: 180px; font-family: var(--font-serif); font-size: 19px; line-height: 29px; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cmp-actions [hidden] { display: none; }
@media (max-width: 600px) {
  .cmp-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .cmp { padding: 24px 20px 28px; }
  .cmp-actions .lg-btn--primary { flex: 1 1 100%; }
}

/* ---------- «Собрать книгу» ---------- */
.bb { display: flex; flex-direction: column; gap: 20px; }
.bb-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .bb-cols { grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; } .bb-preview { position: sticky; top: 96px; } }
.bb-steps { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bb-step { display: flex; flex-direction: column; gap: 14px; }
.bb-step__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 21px; line-height: 28px; font-weight: 650; }
.bb-step__n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: 16px; font-weight: 700; }
.add-set { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.add-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-items { display: flex; flex-direction: column; gap: 2px; max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bb-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 6px; border-radius: var(--radius-md); color: var(--ink); cursor: pointer; }
.bb-item:hover { background: var(--surface-2); }
.bb-item .lg-target__check { border-color: var(--line-strong); background: transparent; color: transparent; }
.bb-item:has(input:checked) .lg-target__check { border-color: var(--link); background: var(--link); color: var(--surface); }
.bb-item:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.bb-item__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bb-item__t { font-size: 16px; line-height: 22px; font-weight: 600; }
.bb-item__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bb-item__p { flex: none; font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bb-order, .bb-format { width: 100%; max-width: 560px; }
.bb-ordered { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bb-ordered__row { display: flex; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--line); }
.bb-ordered__n { width: 28px; flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bb-ordered__t { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; }
.keeper-rule { display: flex; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; }
.keeper-rule__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.keeper-rule__title { font-size: 17px; line-height: 24px; font-weight: 600; }
.keeper-rule__sub { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* The board's switch (keeper-switch) drawn on a real checkbox. */
.bb-switch { appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 6px 0; border-radius: var(--radius-full); background: var(--line-strong); cursor: pointer; transition: background-color .15s ease-out; }
.bb-switch::after { content: ""; 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; }
.bb-switch:checked { background: var(--primary); }
.bb-switch:checked::after { transform: translateX(20px); }
.bb-switch:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.story-page__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-step .lg-audience { padding: 0; border: 0; }
.bb-preview { display: flex; flex-direction: column; gap: 16px; }
/* «Собранные книги» */
.built-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.built { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.built__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.built__t { margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.built__t a { color: var(--ink); }
.built__s { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.built__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* BookPage (lg-bookcover, lg-bookspread): bundle.css has no font sizes for the contents and the page yet
   (docs/ds-templates.md) — the preview's own; «Крупный шрифт» makes them larger */
.bb-preview .lg-booktoc { font-size: 12px; line-height: 1.35; }
.bb-preview .lg-bookpage__title { font-size: 17px; line-height: 22px; }
.bb-preview .lg-bookpage__text { font-size: 12px; line-height: 19px; }
.bb-preview--large .lg-booktoc { font-size: 16px; }
.bb-preview--large .lg-bookpage__title { font-size: 23px; line-height: 30px; }
.bb-preview--large .lg-bookpage__text { font-size: 16px; line-height: 26px; }
.bb-preview__label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- the tree ---------- */
.tree-page { display: flex; flex-direction: column; gap: 16px; }
.tree-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.tree-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tree-hits { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; right: 0; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.tree-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.tree-hit:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.tree-hit__name { font-size: 16px; line-height: 22px; font-weight: 600; }
.tree-hit__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tree-hit__none { margin: 0; padding: 10px 12px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.tree-mode { width: 260px; }
.tree-roots { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.tree-root { flex: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 56px; padding: 6px 18px; border-radius: var(--radius-lg); line-height: 20px; text-align: left; }
.tree-root strong { font-size: 16px; }
.tree-root__sub { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.tree-root[aria-pressed="true"] .tree-root__sub { color: inherit; opacity: .85; }
.tree-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.tree-bar .lg-segmented { flex: none; width: 320px; max-width: 100%; }
.tree-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.tree-main { position: relative; min-width: 0; }
.tree-viewport { height: 660px; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-xl); background-color: var(--surface-2); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; }
.tree-canvas { position: relative; }
.tree-scale { transform-origin: 0 0; }
.tree-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px 8px 4px 4px; background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow-float); }
.tree-zoom[hidden] { display: none; }
.tree-zoom__val { min-width: 44px; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.tree-listcard { padding: 4px 8px; }
.lg-treelist__row.is-sel { background: var(--link-soft); }
.tree-listcard .lg-tnode, .lg-tree .lg-tnode { scroll-margin: 120px; }
.tree-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.tree-panel__empty { display: flex; flex-direction: column; gap: 10px; }
.tree-panel__emptyicon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--link-soft); color: var(--link); }
.tree-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tree-legend span { display: flex; align-items: center; gap: 10px; }
.tree-legend__line { display: inline-block; width: 28px; height: 2px; border-radius: 1px; background: var(--line-strong); }
.tree-legend__line--you { height: 3px; background: var(--primary); }
.tree-legend__line--close { height: 0; background: transparent; border-top: 2px dashed var(--line-strong); }
.tree-panel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tree-panel__who { display: flex; flex-direction: column; gap: 4px; }
.tree-panel__name { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; text-wrap: balance; }
.tree-panel__years { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.tree-panel__occ { margin: 0; font-size: 16px; line-height: 24px; }
.tree-panel__note { margin: 0; padding-left: 12px; border-left: 3px solid var(--line); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.tree-panel__actions { display: flex; flex-direction: column; gap: 8px; }
.tree-panel__more { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px -8px 0; }
@media (min-width: 1000px) { .tree-grid { grid-template-columns: minmax(0, 1fr) 320px; } .tree-panel { position: sticky; top: 96px; } }
@media (max-width: 999px) {
  .tree-panel { display: none; }
  .tree-panel.is-open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 80vh; overflow-y: auto; padding: 16px 16px 24px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-float); }
}
@media (max-width: 719px) {
  .tree-tools, .tree-search, .tree-mode { width: 100%; }
  .tree-viewport { height: 520px; border-radius: var(--radius-lg); }
}

/* ---------- a person ---------- */
.person { max-width: 880px; margin: 0 auto; padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 20px; }
.back-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fam-group + .fam-group { margin-top: 16px; }
.fam-label { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.fam-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.sources { margin: 0; padding-left: 20px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.person .lg-archive { padding: 0; background: transparent; }
@media (min-width: 700px) {
  .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person { padding: 32px 32px 96px; gap: 24px; }
  .sec { padding: 28px 32px; border-radius: var(--radius-xl); }
}

/* ---------- public pages ---------- */
.guest-form { display: flex; justify-content: center; }
.pub-search-sm { display: inline-flex; }
@media (min-width: 900px) { .pub-search-sm { display: none; } }
.pub-lang { display: none; }
@media (min-width: 600px) { .pub-lang { display: block; } }

/* ---------- sign-in and sign-up ---------- */
.su-tabs .lg-tabs__tab { flex: 1 1 0; justify-content: center; }

/* ---------- service pages ---------- */
.lg-errpage__label { flex-basis: 100%; }

/* ---------- /ds/ showcase (staff only) ---------- */
.ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.ds-stage { margin: 0 auto; }
.ds-index { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

/* ---------- gaps the design system leaves to the page ---------- */
/* NamePreview: the full-width «Открыть страницу» under the phone sheet (inline in its preview). */
.lg-sheet > .lg-btn--block { margin-top: var(--space-4); }

/* ---- «Главная» (Main board «Лента», Home2 «Выпуск недели»; layout from prototype/proto.css) ---- */
.home-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.hello h1 { margin: 0; font-size: 30px; line-height: 36px; }
.hello p { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.home-switch { flex: none; width: 360px; max-width: 100%; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.feed { display: flex; flex-direction: column; gap: var(--space-5); }
.feed > .lg-section-head__title { margin: 0; }
.feed-more { margin: 0; }
.side { display: flex; flex-direction: column; gap: var(--space-5); }
.side .lg-ask { padding: var(--space-6); gap: var(--space-4); }
.side .lg-ask__title { font-size: 22px; line-height: 28px; }
.side .lg-ask__actions .lg-btn { flex: 1 1 auto; }
.invite-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.invite-card > .lg-section-head__title { margin: 0; }
.invite-card > .lg-btn { align-self: flex-start; }
.lg-feed__link, .lg-story__link { display: block; min-width: 0; min-height: 0; border-radius: inherit; }
.lg-feed__link:focus-visible, .lg-story__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-feed__title a { color: inherit; text-decoration: none; }
.lg-feed__title a:hover { text-decoration: underline; }
.lg-story > .lg-status { align-self: flex-start; }
.issue { display: flex; flex-direction: column; gap: var(--space-6); }
.issue > .lg-label-tag { align-self: flex-start; }
.issue-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.issue-pair .lg-collection--tall { height: 100%; min-height: 420px; aspect-ratio: auto; }
.issue-pair .lg-collection__img { object-position: 50% 20%; }
.shelf-sec .lg-section-head { margin-bottom: var(--space-3); }
.issue-shelf { grid-auto-columns: minmax(232px, 280px); }
@media (min-width: 900px) {
  .hello h1 { font-size: 40px; line-height: 46px; }
  .issue { gap: var(--space-8); }
  .issue-pair { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .home-cols { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); gap: var(--space-8); }
  .side { position: sticky; top: 96px; }
}
@media (max-width: 720px) { .home-stack { gap: var(--space-5); } }

/* ---- Replies (Thread board): on the story page, and the first memories under a feed card ---- */
.story-page__replies { padding: var(--space-6); }
.lg-react-form { display: contents; }
.lg-feed > .lg-card-thread { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--line); }
.lg-story > .lg-card-thread { padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .story-page__replies { padding: var(--space-5) var(--space-4); } }

/* ---- an event (Event board; layout from prototype/proto.css) ---- */
.event-page { display: flex; flex-direction: column; gap: var(--space-6); }
.event-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.event-main, .event-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.event-sec { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
.event-sec > .lg-section-head__title { margin: 0; }
.event-sec .lg-figure { margin: 0; }
.event-sec > .lg-btn { align-self: flex-start; }
.event-who { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.event-near { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* EventHeader: a heavy event (arrest, death) — a quiet date tile; the bundle has no class for it yet */
.lg-ehead--heavy .lg-ehead__date { background: var(--surface-2); }
@media (min-width: 1000px) { .event-cols { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ---- letters to the future (Letter board; layout from prototype/proto.css) ---- */
.letters-page { display: flex; flex-direction: column; gap: var(--space-6); }
.letters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.letter-form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.letter-step { gap: var(--space-3); }
.letter-whens { display: grid; gap: var(--space-2); }
.letter-date { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }

/* ---- «Позовите первых родных» (Signup board, step 4; layout from prototype/proto.css) ---- */
.su-invite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 600px) { .su-invite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- «Кто в семье» (Family board; layout from prototype/proto.css) ---- */
.members-page { display: flex; flex-direction: column; gap: var(--space-6); }
.family-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.family-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); }
.family-stat__n { font-size: 32px; line-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.family-stat__t { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.family-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.family-main, .family-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.family-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.family-sec > .lg-section-head__title { margin: 0; }
.family-side .lg-ask { padding: var(--space-6); gap: var(--space-4); }
@media (min-width: 1000px) { .family-cols { grid-template-columns: minmax(0, 1fr) 340px; } .family-side { position: sticky; top: 96px; } }

/* ---- the first visit by an invitation (Join board; layout from prototype/proto.css) ---- */
/* «Что важно знать» at the end of a teenager's first sign-in (JoinTeen): the rules on a grey panel */
/* and «Что будет у Тимофея» on the parent's page (TeenConsent) — as in proto.css */
.join-teen, .tc-rules { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.join-teen__h, .tc-rules__h { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.join-teen .lg-rules__icon, .tc-rules .lg-rules__icon { background: var(--surface); }
.join-inside { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.join-inside li { display: flex; align-items: center; gap: var(--space-3); }
.join-inside .lg-icon { color: var(--ink-muted); }
.lg-onboard .lg-yourline { padding: 0; box-shadow: none; background: transparent; }

/* ---- «Кабинет хранителя» (Keeper board; layout from prototype/proto.css) ---- */
.keeper-page { display: flex; flex-direction: column; gap: var(--space-6); }
.keeper-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.keeper-main, .keeper-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.keeper-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.keeper-sec > .lg-section-head__title { margin: 0; }
.keeper-rod { display: flex; flex-direction: column; gap: var(--space-3); }
.keeper-rod > .lg-section-head__title { margin: 0; }
.keeper-tag { display: inline-flex; align-items: center; min-height: 24px; 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); }
.keeper-voice { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 260px; min-width: 0; }
.keeper-rules { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.keeper-rule { display: flex; align-items: center; gap: var(--space-4); padding: 14px 0; }
.keeper-rule + .keeper-rule { border-top: 1px solid var(--line); }
.keeper-rule__text { flex: 1; min-width: 0; }
.keeper-rule__text .lg-section-head__title { margin: 0 0 var(--space-1); }
.keeper-rule__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.keeper-rule__sub { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.keeper-checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; font-size: 16px; line-height: 24px; }
.people-tip { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.lg-review--done { margin: 0; padding: var(--space-4) var(--space-5); color: var(--ink-muted); }
@media (min-width: 1000px) { .keeper-cols { grid-template-columns: minmax(0, 1fr) 320px; } .keeper-side { position: sticky; top: 96px; } }

/* ---- «Настройки» (Settings board; layout from prototype/proto.css; rows and sub-forms are the DS's) ---- */
.settings-page { display: flex; flex-direction: column; gap: var(--space-6); }
.set-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.set-sec { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
.set-sec > .lg-section-head__title { margin: 0; }
.set-sec > .lg-section-head__title + .lg-setrow { border-top: 0; padding-top: 0; }
/* «Выйти» at the very bottom (Settings board): under it the name and the email */
.set-logout { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-6); }
.set-logout form { display: flex; justify-content: center; width: 100%; }
.set-logout .lg-btn { max-width: 360px; }
.set-form { display: flex; flex-direction: column; gap: var(--space-4); }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.set-me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.set-me__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.set-me__t { font-size: 17px; line-height: 24px; font-weight: 600; }
.set-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.set-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.set-block--first { padding-top: 0; border-top: 0; }
.set-danger { display: flex; flex-direction: column; gap: var(--space-4); }
/* «Крупный текст» (Settings): the bundle's sizes are in px, so the page is zoomed (as on the board) */
html[data-text="large"] main { zoom: 1.125; }
@media (min-width: 900px) {
  .set-cols { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); }
  .lg-setnav { position: sticky; top: 96px; }
  .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- «Спросить» and «Вопросы» (Ask, AskAnswer, Questions boards; prototype/proto.css .ask-*) ---------- */
.ask-page, .questions-page { display: flex; flex-direction: column; gap: var(--space-6); }
.ask-cols { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1000px) { .ask-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.ask-form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ask-form--one { max-width: 720px; }
.ask-step { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-5); border: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
/* a legend sits on the fieldset's border unless it floats: here it is the step's heading inside the card */
.ask-step > .ask-step__h { float: left; width: 100%; }
.ask-step > .ask-step__h + * { clear: both; }
.ask-more { display: flex; flex-direction: column; gap: 6px; }
.ask-more > summary { min-height: var(--tap-min); display: inline-flex; align-items: center; cursor: pointer; }
.ask-step__h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 19px; line-height: 26px; font-weight: 700; }
.ask-step__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface-2); font: 700 14px/1 var(--font-sans); }
/* NamePreview over a name in the text (static/js/preview.js) */
.name-pop { position: absolute; z-index: 60; max-width: min(360px, calc(100vw - 32px)); }
/* «Новый разбор» (TogetherNew board; proto.css .tn) */
.tn { display: flex; flex-direction: column; gap: var(--space-4); }
.tn-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-2); }
@media (min-width: 1000px) { .tn-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .tn-photo { position: sticky; top: 88px; } }
.tn-photo { display: flex; flex-direction: column; gap: var(--space-3); }
.tn-pinwrap { position: relative; }
.tn-photo .lg-pins .lg-pin { z-index: 2; pointer-events: none; }
.tn-catch { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: crosshair; }
.tn-catch[hidden] { display: none; }
.tn-catch:focus-visible { box-shadow: inset 0 0 0 3px var(--link); }
.tn-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.tn-src { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 15px; line-height: 22px; }
.tn-src span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
/* «Поздравления» (Greetings board; proto.css .gr) */
.gr { display: flex; flex-direction: column; gap: var(--space-5); }
.gr-guestbar { padding: 0 var(--space-6); }
.gr-foot { margin: 0; max-width: 760px; }
/* «Ваш вопрос на неделю» (WeekMine, WeekMineKeeper boards; proto.css .wm) */
.wm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .wm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wm-grid .lg-ask { padding: var(--space-6); }
.wm-foot { margin: 0; max-width: 720px; }
.wm-keeper { display: flex; flex-direction: column; gap: var(--space-4); }
.wm-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-2); }
@media (min-width: 960px) { .wm-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.wm-form { display: flex; flex-direction: column; gap: var(--space-6); }
.wm-form .ask-step { display: flex; flex-direction: column; gap: var(--space-3); }
.wm-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wm-person { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.wm-person[aria-pressed="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--link-soft); }
.wm-person > .lg-icon:last-child { margin-left: auto; color: var(--link); }
.wm-side { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 960px) { .wm-side { position: sticky; top: 96px; } }
.wm-preview { padding: var(--space-5); }
.ask-sub { margin: var(--space-2) 0 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.ask-people, .ask-chips, .ask-rules { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
.ask-people { flex-direction: column; gap: 6px; }
.ask-chips { flex-wrap: wrap; }
.ask-rules { flex-direction: column; }
.ask-rules li { padding-left: var(--space-5); position: relative; font-size: 16px; line-height: 24px; }
.ask-rules li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--positive); }
.ask-person { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; }
.ask-person:hover { border-color: var(--line-strong); }
.ask-person:has(input:checked), .ask-aud:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--link-soft); }
.ask-person:has(input:focus-visible), .ask-aud:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
.ask-person__b { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ask-person__n { font-size: 16px; line-height: 22px; font-weight: 650; }
.ask-person__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ask-person__st { flex: none; padding: 0 10px; border-radius: var(--radius-full); background: var(--positive-soft); color: var(--positive); font: 600 13px/24px var(--font-sans); }
.ask-person__st--off { background: var(--surface-2); color: var(--ink-muted); }
.ask-aud .lg-choice__icon { background: var(--lilac); color: var(--ink); }
.ask-text { min-height: 88px; font-family: var(--font-serif); font-size: 20px; line-height: 30px; }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ask-tyvy { min-width: 220px; }
.ask-send { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ask-preview { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 1000px) { .ask-preview { position: sticky; top: 96px; } }
.ask-preview__label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.ask-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 720px; padding: var(--space-6); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.ask-invite { max-width: 720px; margin: 0 auto; padding: var(--space-6) 0; }
/* a segmented choice inside a form: radio labels look like the bundle's buttons */
.lg-segmented label { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-full); color: var(--ink); font: 600 15px/22px var(--font-sans); cursor: pointer; }
.lg-segmented label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow-card); }
.lg-segmented label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.questions-lead { max-width: 40em; margin: 0; color: var(--ink-muted); }
.questions-cols { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1000px) { .questions-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.questions-main, .questions-side, .questions-lib, .questions-box { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.questions-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.questions-n { color: var(--ink-muted); font-weight: 500; }
.lg-chip[aria-current] .questions-n { color: inherit; }
.questions-q { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.questions-q__title { margin: 0; font-family: var(--font-serif); font-weight: 600; }
/* a theme chip that is a link (the filter works without JavaScript): the current one as a pressed chip */
a.lg-chip[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- Public pages: «/», «О проекте», «Контакты», «Поиск» (Welcome, About, Contacts, Search; proto.css .pub-*) ---------- */
.pub { display: flex; flex-direction: column; gap: 40px; }
.pub--narrow { max-width: 920px; }
.pub-photo { position: relative; margin: 0; }
.pub-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.pub-photo figcaption { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pub-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .pub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pub-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pub-cards > li { display: flex; flex-direction: column; gap: var(--space-2); }
.pub-cards__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.pub-cards__t { margin: var(--space-1) 0 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.pub-cards__s { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.pub-showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: 0; overflow: hidden; color: var(--ink); text-decoration: none; }
.pub-showcase:hover { box-shadow: var(--shadow-float); color: var(--ink); text-decoration: none; }
.pub-showcase img { display: block; width: 100%; height: 220px; object-fit: cover; }
.pub-showcase__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.pub-showcase__t { font-size: 22px; line-height: 28px; font-weight: 700; }
.pub-showcase__s { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.pub-showcase__go { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; color: var(--link); }
@media (min-width: 800px) { .pub-showcase { grid-template-columns: 320px minmax(0, 1fr); align-items: center; } .pub-showcase img { height: 100%; min-height: 220px; } .pub-showcase__body { padding: var(--space-6) var(--space-6) var(--space-6) 0; } }
.pub-origin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 760px) { .pub-origin { grid-template-columns: 200px minmax(0, 1fr); } }
.pub-origin__img { display: block; width: 100%; max-width: 200px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); }
.pub-origin__body { display: flex; flex-direction: column; gap: 14px; }
.pub-origin__text { margin: 0; }
.pub-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.pub-stats strong { color: var(--ink); font-size: 18px; }
.pub-who { display: flex; flex-direction: column; gap: var(--space-3); }
.pub-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .pub-cols { grid-template-columns: minmax(0, 1fr) 360px; } }
.pub-side { display: flex; flex-direction: column; gap: var(--space-4); }
.pub-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.pub-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.search-form { display: flex; gap: var(--space-2); max-width: 720px; }
.search-form .lg-input { flex: 1; }
.search-tries { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.search-groups { display: flex; flex-direction: column; gap: var(--space-8); }
.search-group { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-segmented a.search-filter { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-full); color: var(--ink); font: 600 15px/22px var(--font-sans); text-decoration: none; }
.lg-segmented a.search-filter[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-card); }

/* ---------- The showcase for guests (Guest, PublicStory, PublicPerson boards; proto.css .guest-*) ---------- */
.guest { display: flex; flex-direction: column; gap: var(--space-8); }
.guest-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); }
.guest-hero__text { display: flex; flex-direction: column; gap: var(--space-4); }
.guest-title { margin: 0; font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 900px) { .guest-hero { padding: var(--space-12); } .guest-title { font-size: 64px; line-height: 66px; } }
.guest-lead { margin: 0; font-size: 19px; line-height: 29px; max-width: 32em; }
.guest-people { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.guest-people__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guest-people__list .lg-person { color: var(--ink); text-decoration: none; min-height: var(--tap-min); }
.guest-person { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); }
.guest-write { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.guest-comments { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.guest-comments li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.keeper-showcase-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); }
.keeper-showcase-text .lg-field { width: 100%; }
.guest-person { flex-wrap: wrap; }
.guest-person__body { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
/* PublicPage: a long German word («Familiengeschichten») is wider than a phone at the hero's size — it hyphenates
   (gap in the design system, docs/ds-templates.md) */
.lg-hero__title { hyphens: auto; overflow-wrap: anywhere; }
/* a long chapter title on the «previous / next» buttons wraps instead of widening the phone's page */
.chapter-nav { min-width: 0; }
.chapter-nav .lg-btn { white-space: normal; max-width: 100%; height: auto; min-height: var(--tap-min); text-align: left; }
/* «Поделиться» as a page (Share board): the sheet in the middle */
.share-page { display: flex; justify-content: center; }
.share-form { width: min(100%, 460px); }
.chapter-share { margin: var(--space-4) 0 0; }
/* the book's inscriptions on a photo or a map, under it (docs/import.md, asides «label») */
.figure-labels { margin: calc(-1 * var(--space-4)) 0 var(--space-6); font-size: 15px; line-height: 22px; color: var(--ink-muted); white-space: pre-line; }

/* «Заменить вопрос недели» (the keeper) */
.questions-swap { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; }
.questions-swap .lg-field { align-self: stretch; }

/* «Отметить, кто на фото» */
.tag-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.tag-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tag-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag-add { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cl-rules.tag-aud-rules { margin: 12px 0; color: var(--ink-muted); }
.tag-add .lg-field { align-self: stretch; }
@media (min-width: 1000px) { .tag-cols { grid-template-columns: minmax(0, 1fr) 380px; } }

/* «Разбор вместе» (Together board, together-*) */
.together { display: flex; flex-direction: column; gap: 20px; }
.together-how { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.together-how li { display: flex; align-items: center; gap: 10px; }
.together-how__n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-weight: 700; font-size: 15px; }
.together-ex { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.together-ex .lg-icon { flex: none; margin-top: 2px; }
.together-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.together-photo, .together-panel, .together-rest, .together-side { min-width: 0; }
.together-rest, .together-side { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1000px) {
  .together-cols { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "photo panel" "rest side"; }
  .together-cols--fact { grid-template-areas: "rest side"; }
  .together-photo { grid-area: photo; } .together-panel { grid-area: panel; } .together-rest { grid-area: rest; } .together-side { grid-area: side; }
}
.together-photo { display: flex; flex-direction: column; gap: 12px; }
.together-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.together-panel { display: flex; flex-direction: column; gap: 16px; }
.together-sel { display: flex; align-items: center; gap: 16px; }
.together-sel__status { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.together-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.together-dot.is-single { background: var(--link); } .together-dot.is-disputed { background: var(--caution); } .together-dot.is-agreed { background: var(--positive); }
.together-nav { display: flex; justify-content: space-between; gap: 8px; margin: -8px -12px 0; }
.together-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.together-versions { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.together-ask { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.together-ask__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 650; }
.together-ask__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.together-ask__body { flex: 1 1 160px; min-width: 0; }
.together-ask__name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.together-ask__why { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.together-facts { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.together-facts li { display: flex; align-items: flex-start; gap: 12px; }
.together-facts .keeper-tag { flex: none; }
.together-air { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.together-air > img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.together-air__faces { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 21px; }
.together-air__faces li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 700px) { .together-air { grid-template-columns: minmax(0, 1fr) 210px; } .together-air__faces { flex-direction: column; } }
.together-draft__text { margin: 0 0 6px; font-family: var(--font-serif); font-size: 17px; line-height: 26px; }
.together-open { display: flex; flex-direction: column; gap: 4px; margin: 0 -12px; padding: 0; list-style: none; }
.together-open__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: var(--tap-min); padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.together-open__item:hover { background: var(--surface-2); }
.together-open__item[aria-current="page"] { background: var(--primary-soft); }
.together-open__t { font-size: 16px; line-height: 22px; font-weight: 600; }
.together-open__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.together .lg-btn[aria-disabled="true"] { opacity: .55; }
.together-open__item { text-decoration: none; }
.together-add { display: flex; flex-direction: column; gap: 12px; }
.together-add .lg-field { align-self: stretch; }
.lg-pins a.lg-pin { text-decoration: none; }
.together-date { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px; gap: 8px; }
.together-fact-photo { display: block; width: 100%; max-width: 520px; height: auto; border-radius: var(--radius-md); }
.event-help { margin-top: 16px; }

/* «Даты семьи» (Calendar board, cal-*) */
.cal { display: flex; flex-direction: column; gap: 20px; }
.cal-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .cal-cols { grid-template-columns: minmax(0, 1fr) 340px; } .cal-side { position: sticky; top: 96px; } }
.cal-main, .cal-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cal-hero { background: var(--peach); }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.cal-bar .people-filters { flex: 1 1 420px; min-width: 0; }
.cal-toggle { flex: none; gap: 12px; padding: 0; }
.cal-months { display: flex; flex-direction: column; gap: 20px; }
.cal-month { display: flex; flex-direction: column; }
.cal-month + .cal-month { padding-top: 12px; border-top: 1px solid var(--line); }
.cal-month__t { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 18px; line-height: 24px; font-weight: 650; }
.cal-jubilees { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.cal-jubilees li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.cal-jubilees__n { font-size: 26px; line-height: 30px; font-weight: 700; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.cal-jubilees__t { font-size: 15px; line-height: 22px; }
.cal-ical { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cal-ical__url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.cal-ical__how { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 15px; line-height: 22px; }
.cal-remind { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.cal-remind .keeper-rule__text { display: flex; flex-direction: column; }

/* ---------- «Семейное» (Heritage board) ---------- */
.heritage { display: flex; flex-direction: column; gap: 24px; }
.heritage-sec { display: flex; flex-direction: column; gap: 14px; }
.heritage-sec__head { display: flex; flex-direction: column; gap: 4px; max-width: 72ch; }
.heritage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.heritage-grid > li { display: flex; }
.heritage-grid > li > .lg-keep { flex: 1; }
@media (min-width: 760px) { .heritage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .heritage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.recipe-q { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); font-style: italic; }
.heritage-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }

/* ---------- the keeper edits a person or a place (people/edit_views.py) ---------- */
.person-edit { max-width: 880px; }
.person-edit__sec { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.person-edit__sec .sec-title { margin: 0; }
.person-edit__names { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .person-edit__names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person-edit__now { display: flex; align-items: center; gap: 16px; }
.person-edit__places { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.person-edit__places li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.person-edit__history { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.person-edit__history ul { margin: 4px 0 0; padding-left: 20px; }
.person-edit__field { font-weight: 600; }
.person-edit__history del { color: var(--ink-muted); }
.person-edit__history ins { text-decoration: none; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--surface-2); aspect-ratio: 4 / 3; }
.pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick__none { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; text-align: center; font-weight: 600; }
.pick__mark { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--viewer-bg); color: var(--viewer-ink); box-shadow: 0 0 0 2px var(--viewer-ink); }
.pick:has(input:checked) { box-shadow: 0 0 0 4px var(--primary); }
.pick:has(input:checked) .pick__mark { background: var(--primary); color: var(--on-primary); }
.pick:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }

/* ---------- «Порядок в древе» (TreeTools board) ---------- */
.tools { display: flex; flex-direction: column; gap: 20px; }
.tools-pairhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
/* MergeCompare inside a form: the value is a label with a native radio */
.lg-merge__val:has(input:checked) { background: var(--positive-soft); box-shadow: inset 3px 0 0 var(--positive); font-weight: 600; }
.lg-merge__val:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
.tools-merged { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* ---------- several families (Spaces board) ---------- */
.spaces-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.spaces-filters { margin-bottom: 16px; }
.lg-story__head:has(.spaces-tags) { flex-wrap: wrap; }
@media (max-width: 600px) { .spaces-tags { flex-basis: 100%; justify-content: flex-start; margin-left: 40px; } .lg-feed__head { flex-wrap: wrap; } }
.tools-share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .tools-share { grid-template-columns: 1fr 1fr; } }
.tools-share__col { padding: 16px; border-radius: var(--radius-md); background: var(--surface-2); }
.tools-share__t { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 700; }

/* «Импорт и выгрузка» (TreeTools board, GEDCOM) */
.keeper-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.keeper-photo { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.keeper-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.keeper-photo .lg-status { align-self: flex-start; }
.keeper-ph-group { margin: 16px 0 8px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-muted); }
.keeper-ph { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.keeper-ph__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.keeper-ph__text { flex: 1 1 220px; min-width: 0; }
.keeper-ph__t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.keeper-ph__s { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tools-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .tools-cols { grid-template-columns: minmax(0, 1fr) 340px; } }
.tools-drop { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 140px; padding: 24px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tools-drop:hover { border-color: var(--link); }
.tools-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
@media (min-width: 700px) { .tools-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tools-stats li { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tools-stats strong { font-size: 24px; line-height: 30px; color: var(--ink); }
.tools-conf { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tools-conf__item { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tools-conf__t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.tools-conf__s { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.tools-drop input[type="file"] { max-width: 100%; }
.tools-drop:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* «Похожие лица» (Together board) */
.together-hints { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-2); }
.together-hints__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.together-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.together-hint__body { flex: 1 1 140px; min-width: 0; }
.together-hint__name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.together-hint__meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.su-consent { padding: 16px; border-radius: var(--radius-md); background: var(--surface-2); gap: 6px; }

/* ---------- «Класс и курс» (ClassHome, ClassLines, ClassPhoto, Teacher, ClassPath boards) ---------- */
.cl .cl-head { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.cl .cl-head h1 { margin: 0; }
.cl .cl-head p { margin: 0; max-width: 760px; color: var(--ink-muted); }
.cl .lg-crumbs { margin-bottom: 12px; }
.cl .lg-classyears { margin: 0 0 24px; }
.cl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.cl-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1000px) {
  .cl-cols { grid-template-columns: minmax(0, 1fr) 360px; }
  .cl-cols--teach { grid-template-columns: 260px minmax(0, 1fr) 320px; }
  .cl-cols--photo { grid-template-columns: minmax(0, 1fr) 380px; }
  .cl-cols--origin { grid-template-columns: minmax(0, 1fr) 400px; }
  .cl-cols > .side { position: sticky; top: 96px; }
}
.cl-side { display: flex; flex-direction: column; gap: 12px; }
.cl-side__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-big { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cl-big__n { font-size: 40px; line-height: 44px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-rules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.cl-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cl-progress__bar { position: relative; display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cl-progress__bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--link); }
.cl-teachlist { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cl-teachlist__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cl-teachlist__item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.cl-teachlist__item[aria-current="page"] { background: var(--link-soft); }
.cl-teachlist__body { display: flex; flex-direction: column; min-width: 0; }
.cl-teachlist__n { font-size: 16px; line-height: 22px; font-weight: 600; }
.cl-teachlist__s { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 16px; }
.cl-filters { margin: 0; }
.cl-person__head { display: flex; align-items: center; gap: 12px; }
.cl-person__with { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.cl-srcs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-srcs__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; }
.cl-srcs__img { width: 56px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.cl-srcs__img--text { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.cl-srcs__p { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-rings-sec { padding-bottom: 28px; }
.cl-figure { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cl-figure__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.cl-figure__cap { display: flex; flex-direction: column; gap: 6px; }
.cl-figure__text { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 27px; }
.cl-photo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cl-tagged { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-tagged__item { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 4px 14px 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.cl-tagged__item .lg-hint { font-weight: 400; }
.cl-tagged__n { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--link); color: var(--surface); font-size: 13px; font-weight: 700; }
.cl-tagged__n.is-ok { background: var(--positive); }
.cl-pick { display: flex; flex-direction: column; gap: 12px; }
.cl-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.cl-rows li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.cl-rows__t { color: var(--ink-muted); }
.cl-cands { display: flex; flex-direction: column; gap: 6px; }
.cl-cands__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.cl-aud { display: flex; flex-direction: column; gap: 8px; }
.cl-where { display: flex; flex-direction: column; gap: 10px; }
.cl-where h2 { display: flex; align-items: center; gap: 8px; }
.cl-teachnav { display: flex; flex-direction: column; gap: 8px; }
.cl-teachnav__h { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.cl-teacher { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.cl-teacher__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.cl-teacher__name { margin: 0; }
.cl-teacher__span { margin: 0; color: var(--ink-muted); }
.cl-inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cl-inline-form .lg-input { flex: 1 1 200px; }
.cl-thanks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.cl-thanks-btn { width: 100%; justify-content: center; }
.cl-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.cl-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.cl-stat__n { font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-stat__t { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cl-addyear { align-self: flex-start; }
.cl-find { display: flex; flex-direction: column; gap: 12px; }
.cl-find .lg-choice__item { min-height: 64px; padding: 12px; }
.cl-find .lg-choice__item[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cl-find .lg-choice__icon { font: 700 15px/1 var(--font-sans); }
.cl-midyear { align-self: flex-start; }
.cl-cross { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.cl-cross li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cl-evidence { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; padding-left: 18px; font-size: 15px; line-height: 22px; }
.cl-part { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.spaces-matrix td.is-part { color: var(--ink-muted); }
.cl-replies { margin-top: 4px; }
.cl-pubs { display: flex; flex-direction: column; gap: 12px; }
.cl-docview { justify-content: center; align-items: center; padding: 24px; }
.cl-docview__fig { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: min(900px, 100%); max-height: 100%; margin: 0; padding: 12px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); }
.cl-docview__fig img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); }
.cl-docview__fig figcaption { font-size: 15px; line-height: 22px; color: var(--ink-muted); padding-right: 52px; }
.cl-docview__x { position: absolute; right: 8px; bottom: 8px; }
@media (max-width: 999px) {
  .cl-cols--teach .cl-teachnav .cl-teachlist { flex-direction: row; overflow-x: auto; gap: 8px; }
  .cl-cols--teach .cl-teachnav .cl-teachlist__item { min-width: 220px; border: 1px solid var(--line); }
}
@media (max-width: 699px) {
  .cl-find { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh; overflow-y: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 0 0 100vmax var(--scrim), 0 -8px 32px rgba(0,0,0,.25); padding-bottom: 32px; }
  .cl-stats { gap: 8px; }
  .cl-stat { min-width: 0; flex: 1 1 140px; padding: 10px 12px; }
  .cl-rows li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.cl-teacher__name { font-size: 34px; line-height: 40px; }
@media (max-width: 600px) { .cl-teacher__name { font-size: 28px; line-height: 34px; } }
.cl-matrix-wrap { overflow-x: auto; }
@media (max-width: 600px) { .cl-matrix-wrap .spaces-matrix { font-size: 13px; } .cl-matrix-wrap .spaces-matrix th, .cl-matrix-wrap .spaces-matrix td { padding: 6px 4px; } }

/* ClassLines with links (classes/lines.py): the open card's name, as the pressed button */
.lg-lines__name[aria-current="true"] { box-shadow: inset 3px 0 0 var(--primary); background: var(--surface-2); }
.cl-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .cl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .cl-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cl-photos__item { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.cl-photos__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }

/* «Сказать спасибо Марте Андреевне» on a phone: the long name wraps, the button stays inside the page */
#thanks > .lg-btn--lg { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.lg-classpath__docicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); }

/* «Добавить в древо» (TreeAdd board; proto.css): the fields two in a row from 560 px, the people found */
.tree-addgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .tree-addgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tree-addgrid .lg-field { margin: 0; }
.tree-addhits { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tree-addhits .lg-person { width: 100%; }
.lg-relpick .add-chips { width: 100%; }
.tree-add { flex: none; }
.tree-panel__check { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }

/* «Кто видит эту историю» (StoryGuests board; proto.css) */
.sg-who { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-who__t { margin: 0 0 4px; font-size: 19px; line-height: 26px; font-weight: 700; }
.sg-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sg-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sg-who .lg-notice .lg-btn { max-width: 100%; white-space: normal; height: auto; min-height: var(--tap-min); text-align: left; }
.sg-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.sg-row__t { display: flex; flex-direction: column; min-width: 0; min-height: var(--tap-min); justify-content: center; color: inherit; text-decoration: none; }
.sg-row__name { font-weight: 600; font-size: 16px; line-height: 22px; }
.sg-row__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.keeper-rule__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }

/* «Хранители» of a class (ClassTeenKeeper): the form and the keepers' card */
.ck-call, .ck-side { display: flex; flex-direction: column; gap: var(--space-4); }

/* «Это вы?» — the two records of one person (decision 40) */
.link-rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* a shared record's versions under the person's header (decision 40; Rod, lg-versions) */
.person-versions { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }

/* «Добавить питомца» (PetAdd; proto.css .pet-two): the year and «Жив?» side by side, one above the other on a phone */
.pet-two { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; }
@media (max-width: 600px) { .pet-two { grid-template-columns: 1fr; } }
.people-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* a pet's page for a guest (Pet board; proto.css .pet-guest) */
.pet-guest { max-width: 560px; margin: var(--space-12) auto; align-items: center; text-align: center; }
/* «Питомцы» in the tree panel (TreePets; proto.css .tree-panel__pets) */
.tree-panel__pets { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.tree-panel__pets-t { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
/* the keeper's «Что видят гости без входа» on a phone: the text keeps at least 14em; a status or a button that does not
   fit beside it goes under it, aligned left (before, «"Истории" 1–6» shrank to a word per line) */
@media (max-width: 600px) {
  .keeper-rule { flex-wrap: wrap; }
  .keeper-rule__text { flex: 1 1 14em; }
  .keeper-rule__end { justify-content: flex-start; }
}

/* «Рядом в жизни» on a person's page (decision 50; Raised board, proto.css .near): the people on the left, the chosen
   one on the right — places, photos, stories; one column on a phone */
.near-life__cols { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.near-life__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.near-life__list .lg-person { min-height: var(--tap-min); border: 1px solid var(--line); border-radius: var(--radius-md); }
.near-life__list .lg-person[aria-current="true"] { border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
.near-life__detail { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); min-width: 0; }
.near-life__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.near-life__detail .lg-placechip { align-self: flex-start; }
.near-life__detail .lg-placephotos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.near-life__story { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; min-height: var(--tap-min); color: var(--link); text-decoration: none; font-size: 15px; line-height: 22px; }
.near-life__story:hover { text-decoration: underline; }
@media (max-width: 720px) { .near-life__cols { grid-template-columns: 1fr; } }

/* «Чья это собака на фото …?» (decision 47; People, proto.css .people-pet) and its answers on the photo */
.people-pet { background: var(--butter); }
@media (min-width: 900px) { .people-pet { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; } }
.tag-ask { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--butter); }
.tag-ask__t { margin: 0; font-weight: 700; }
.tag-ask .add-chips form { display: contents; }
.tag-list--pets li { flex-direction: column; align-items: stretch; }
.tag-pet-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tag-ask .add-chips { min-width: 0; }

/* a family place's page (Place, PlacePhone, PlaceKerbi boards; decision 48; proto.css .place) */
.place { display: flex; flex-direction: column; gap: var(--space-6); }
.place .sec { display: flex; flex-direction: column; gap: var(--space-3); }
.place .sec > .sec-title { margin: 0; }
/* «Где это снято» on «Кто на фото» (PhotoPlace board; decision 48) */
.tag-where { display: flex; flex-direction: column; gap: var(--space-3); }
.tag-where .add-chips form { display: contents; }
.tag-where .sec-title { margin: 0; }
.tag-side > .lg-segmented { align-self: flex-start; }
/* «По местам» (StoriesPlaces board; proto.css): the family places first, the chosen one's card */
.stories-facet__btn--family .stories-facet__s { color: var(--ink); }
.stories-placeadd { display: flex; }
.stories-placecard { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.stories-placecard img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.stories-placecard__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; align-items: flex-start; }
@media (max-width: 600px) { .stories-placecard { flex-direction: column; align-items: stretch; } .stories-placecard img { width: 100%; } }
.kj-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.kj-people .lg-person--row { cursor: default; }

/* the Rod's page (Rod, RodGrigory, RodPhone boards; decisions 40, 49, 52; proto.css .rod) */
.rod { display: flex; flex-direction: column; gap: var(--space-6); }
.rod-treesec { display: flex; flex-direction: column; gap: var(--space-4); padding-left: var(--space-6); padding-right: var(--space-6); }
.rod-treesec .tools-pairhead { margin: 0; }
.rod-tree-wide { overflow-x: auto; }
.rod-tree-wide .lg-tree { margin: 0 auto; }
.rod-tree-list { display: none; }
@media (max-width: 1179px) { .rod-tree-wide { display: none; } .rod-tree-list { display: block; } }
.rod-pick { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-2); }
.rod-pick__head { display: flex; align-items: center; gap: var(--space-4); }
.rod-pick__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.rod-pick__name { margin: 0; font-size: 19px; line-height: 26px; font-weight: 650; }
.rod-pick__years { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.rod-pick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rod-pick .lg-shared { align-self: center; background: var(--surface); }
.rod-cols { margin: 0; }
.rod-fams { display: flex; flex-direction: column; gap: var(--space-4); }
.rod-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rod-added { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rod-added .lg-hint .lg-icon { vertical-align: -2px; }
@media (max-width: 600px) { .rod-pick { padding: var(--space-4); } .rod-pick__head { align-items: flex-start; } .rod-treesec { padding: var(--space-5) var(--space-3); } .rod-treesec > .tools-pairhead, .rod-pick { margin: 0 var(--space-1); } }
/* «Позвать в Род» (RodInvite; proto.css .kf-preview) and the links to the lineage */
.kf-preview { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.kf-preview__t { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.rod-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.rod-link form { display: contents; }
/* KinJoin, KinJoinPhone, KinJoinDone (decision 49; proto.css .kj, .join-line) */
.kj { display: flex; flex-direction: column; gap: var(--space-5); }
.kj-fig { margin: 0; }
.kj-fig .lg-figure__img img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.kj-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.kj-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.kj-line__row { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.kj-line__row + .kj-line__row::before { content: ""; position: absolute; left: 37px; top: -13px; width: 2px; height: 12px; background: var(--line-strong); }
.kj-line__row--fixed { flex-direction: row; align-items: center; gap: var(--space-3); background: var(--surface-2); border-color: transparent; }
.kj-line__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; align-items: flex-start; }
.kj-line__name { font-weight: 650; font-size: 17px; line-height: 24px; }
.kj-line__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.kj-alive { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kj-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 600px) { .kj-two { grid-template-columns: 1fr; } }
.join-line { padding: 0; box-shadow: none; background: transparent; }
.join-line .lg-yourline__list { overflow: visible; }
.join-line .lg-yourline__item { flex: 1 1 0; min-width: 0; }
.join-line .lg-person__name { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 480px) { .join-line .lg-yourline__list { gap: var(--space-1); } .join-line .lg-person__name { font-size: 13px; line-height: 17px; } .join-line .lg-person__years { font-size: 12px; } }