:root {
  --bg: #f6f3ec;
  --panel: #fffdf8;
  --card: #ffffff;
  --fg: #2a2a26;
  --muted: #77736a;
  --line: #e6e0d3;
  --accent: #3f6b3a;
  --accent-fg: #ffffff;
  --accent-soft: #e5eedd;
  --danger: #c0392b;
  --branch: #8b6b4c;
  --sky: #f3f1ea;
  --earth: #e4d6bf;
  --leaf-online: #5ea83a;
  --leaf-offline: #e8a23a;
  --leaf-invited: #d9534f;
  --leaf-deceased: #a9a59c;
  --heart: #e0524c;
  --shadow: 0 2px 10px rgba(60, 50, 30, 0.10);
  --radius: 14px;
  --ts: 1; /* text scale, FR-001 */
  color-scheme: light;
}
:root[data-text="large"] { --ts: 1.2; }
:root[data-text="xlarge"] { --ts: 1.4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151813; --panel: #1c201a; --card: #23281f; --fg: #ecebe4; --muted: #a4a197; --line: #343a2f;
    --accent: #8cc178; --accent-fg: #142010; --accent-soft: #2b3a24; --branch: #a88a69;
    --sky: #171b15; --earth: #2a2619; --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151813; --panel: #1c201a; --card: #23281f; --fg: #ecebe4; --muted: #a4a197; --line: #343a2f;
  --accent: #8cc178; --accent-fg: #142010; --accent-soft: #2b3a24; --branch: #a88a69;
  --sky: #171b15; --earth: #2a2619; --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: calc(15px * var(--ts))/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: calc(13px * var(--ts)); color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); min-width: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 14px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.error { color: var(--danger); font-size: calc(14px * var(--ts)); min-height: 20px; margin: 4px 0 8px; }
.conflict-list { margin: 6px 0; padding-left: 18px; color: var(--fg); }
.muted { color: var(--muted); }

/* Welcome screens (setup, login, invitation) */
.welcome { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(ellipse at 50% 120%, var(--earth), transparent 60%), var(--bg); }
.welcome-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 24px; box-shadow: var(--shadow); }
.welcome-card h1 { margin: 10px 0 4px; font-size: calc(24px * var(--ts)); }
.welcome-card p.lead { margin: 0 0 20px; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 44px; height: 44px; }
.brand-name { font-size: calc(22px * var(--ts)); font-weight: 700; }
.brand-sub { font-size: calc(12px * var(--ts)); color: var(--muted); }

/* Shell */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100%; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px; gap: 6px; min-height: 0; }
.sidebar .brand { padding: 4px 8px 16px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; text-align: left; width: 100%; }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { background: var(--accent-soft); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .badge { margin-left: auto; }
.badge { background: var(--accent); color: var(--accent-fg); border-radius: 999px; font-size: calc(12px * var(--ts)); min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.sidebar-spacer { flex: 1; }
.legend { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: calc(13px * var(--ts)); }
.legend h4 { margin: 0 0 8px; font-size: calc(13px * var(--ts)); }
.legend div { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--muted); }
.legend svg { width: 16px; height: 16px; }
.profile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--card); text-align: left; width: 100%; }
.profile .avatar { width: 36px; height: 36px; font-size: calc(14px * var(--ts)); }
.profile small { display: block; color: var(--muted); }
.menu { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 50; min-width: 200px; }
.menu button { display: flex; width: 100%; gap: 10px; align-items: center; border: 0; background: none; padding: 9px 10px; border-radius: 8px; text-align: left; }
.menu button:hover { background: var(--accent-soft); }
/* FR-030: the branch of an in-law. */
.branch-title { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.branch-back { padding: 5px 12px; font-size: calc(13px * var(--ts)); }
.btn.branch-locked { opacity: .6; cursor: not-allowed; }
.btn.branch-ask svg { color: var(--accent); }
.branch-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: calc(14px * var(--ts)); }
.branch-banner[hidden] { display: none; }
.branch-req { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.branch-req svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.branch-req span { flex: 1; min-width: 180px; }
.branch-req .btn { padding: 6px 12px; }
.branch-access { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: var(--card); }
.branch-access h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.branch-access h4 svg { width: 16px; height: 16px; color: var(--accent); }
.branch-access p { margin: 0; font-size: calc(13px * var(--ts)); }
.branch-viewer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.branch-viewer .btn { padding: 5px 10px; }
/* FR-035: dates that do not match. */
.date-issues { border: 1px solid #e8c36a; background: #fff6dc; color: #6b4e00; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: calc(13px * var(--ts)); display: flex; flex-direction: column; gap: 4px; }
.date-issues b { display: flex; align-items: center; gap: 6px; }
.date-issues svg { width: 16px; height: 16px; }
.date-issue { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; border-bottom: 1px dashed var(--line); background: none; color: inherit; font: inherit; padding: 8px 2px; cursor: pointer; }
.date-issue svg { width: 16px; height: 16px; color: #b8860b; flex: none; margin-top: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .date-issues { background: #3a2f12; color: #f3dc9b; border-color: #6b5520; } }
:root[data-theme="dark"] .date-issues { background: #3a2f12; color: #f3dc9b; border-color: #6b5520; }
/* FR-036: the trash. */
.trash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.trash-item b { display: block; }
.trash-item .btn { flex: none; }
/* FR-038: how two people are related. */
.relation-box { display: flex; flex-direction: column; gap: 10px; }
.relation-box .rel-search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); font: inherit; }
.rel-results { display: flex; flex-direction: column; gap: 2px; }
.rel-answer:empty { display: none; }
.rel-answer { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.rel-pair { color: var(--muted); font-size: calc(13px * var(--ts)); }
.rel-term { font-size: calc(20px * var(--ts)); font-weight: 600; color: var(--accent); margin: 4px 0 8px; }
.rel-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rel-chain li { display: flex; flex-direction: column; }
.rel-chain small { padding-left: 46px; }
.conv-memorial { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.conv-memorial svg { width: 18px; height: 18px; }
/* FR-029: the language panel. */
.lang-panel { position: fixed; z-index: 60; width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; }
.lang-panel-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-weight: 600; }
.lang-panel-head svg { width: 18px; height: 18px; color: var(--accent); }
.lang-list { display: flex; flex-direction: column; gap: 2px; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: none; color: inherit; font: inherit; padding: 9px 10px; border-radius: 10px; text-align: left; cursor: pointer; }
.lang-opt:hover, .lang-opt:focus-visible { background: var(--accent-soft); }
.lang-opt.on { font-weight: 600; color: var(--accent); }
.lang-opt svg { width: 18px; height: 18px; }
.lang-draft { font-size: calc(12.5px * var(--ts)); margin: 8px 8px 2px; }
.settings .lang-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.settings .lang-opt { border: 1px solid var(--line); background: var(--card); }
.settings .lang-opt.on { border-color: var(--accent); background: var(--accent-soft); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.topbar h2 { margin: 0; font-size: calc(18px * var(--ts)); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { flex: 1; position: relative; min-height: 0; display: flex; }

/* Avatars and leaves */
.avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: calc(24px * var(--ts)); flex: none; overflow: hidden; background-size: cover; background-position: center; }
.leaf { width: 22px; height: 22px; }
.leaf path { stroke: rgba(0,0,0,.15); stroke-width: .6; }
.leaf.online path:first-child { fill: var(--leaf-online); }
.leaf.offline path:first-child { fill: var(--leaf-offline); }
.leaf.invited path:first-child { fill: var(--leaf-invited); }
.leaf.deceased path:first-child { fill: var(--leaf-deceased); }
.leaf .vein { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1; }

/* Tree */
.tree-viewport { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab;
  background: linear-gradient(to bottom, var(--sky) 0%, var(--sky) 55%, var(--earth) 100%); }
.tree-viewport.dragging { cursor: grabbing; }
.tree-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tree-canvas svg.links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.branch { fill: none; stroke: var(--branch); stroke-linecap: round; opacity: .85; }
.couple-line { stroke: var(--branch); stroke-width: 2; stroke-dasharray: 4 4; opacity: .7; }
.heart { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--heart); pointer-events: none; }
.gen-pill { position: absolute; transform: translate(-50%, -50%) rotate(-90deg); background: var(--accent); color: var(--accent-fg); font-size: calc(12px * var(--ts)); padding: 3px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: .9; }
.pcard { position: absolute; width: 128px; height: 150px; margin: -75px 0 0 -64px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; padding: 12px 8px 8px; gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60, 50, 30, .18); }
.pcard.me { border: 2px solid var(--accent); }
.pcard.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.pcard.deceased .avatar { filter: grayscale(1); }
.pcard .leaf { position: absolute; top: 6px; right: 10px; }
.pcard .name { font-weight: 600; font-size: 14px; text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .years { font-size: 12px; color: var(--muted); }
.tree-controls { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.tree-controls .btn { width: 40px; height: 40px; padding: 0; background: var(--panel); }
.tree-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; box-shadow: var(--shadow); font-size: calc(14px * var(--ts)); z-index: 4; max-width: calc(100% - 32px); }

/* Side panel */
.side { width: 360px; flex: none; border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 20px; position: relative; }
.side .close { position: absolute; right: 12px; top: 12px; border: 0; background: none; padding: 6px; }
.side .close svg { width: 20px; height: 20px; }
.side-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.side-head h3 { margin: 0; font-size: calc(18px * var(--ts)); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--ts)); color: var(--muted); }
.status .leaf { width: 16px; height: 16px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: calc(14px * var(--ts)); margin: 0 0 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.memorial { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); font-size: calc(14px * var(--ts)); margin-bottom: 16px; }
.memorial h4 { margin: 0 0 6px; font-size: calc(14px * var(--ts)); display: flex; gap: 6px; align-items: center; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.section-title { font-size: calc(13px * var(--ts)); color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; }

/* Narrow screens */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .sidebar { order: 2; flex-direction: row; padding: 6px; border-right: 0; border-top: 1px solid var(--line); justify-content: space-around; }
  .sidebar .brand, .sidebar .legend, .sidebar-spacer { display: none; }
  .nav-item { flex-direction: column; gap: 2px; font-size: calc(11px * var(--ts)); padding: 6px; width: auto; }
  .nav-item .badge { position: absolute; margin: -4px 0 0 18px; }
  .profile { width: auto; border: 0; padding: 6px; background: none; }
  .profile > div:not(.avatar) { display: none; }
  .side { position: absolute; inset: 0; width: auto; z-index: 20; border-left: 0; }
  .topbar { padding: 12px 16px; }
}
.memorial svg { width: 16px; height: 16px; vertical-align: -3px; }
#app { height: 100%; }
.field input, .field select, .field textarea { width: 100%; }
.row2 > * { min-width: 0; }
.avatar.sm { width: 32px; height: 32px; font-size: calc(12px * var(--ts)); }
.rel-row { display: flex; align-items: center; gap: 6px; }
.rel-person { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px; border-radius: 10px; text-align: left; min-width: 0; }
.rel-person:hover { background: var(--accent-soft); }
.rel-person span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { border: 0; background: none; padding: 6px; border-radius: 8px; color: var(--muted); display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--accent-soft); color: var(--fg); }
.icon-btn svg { width: 16px; height: 16px; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
details.more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
details.more summary { cursor: pointer; color: var(--muted); font-size: calc(14px * var(--ts)); padding: 6px 0; }
.link-form .section-title { display: none; }
.actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.invite-box { border: 1px dashed var(--leaf-invited); border-radius: 12px; padding: 12px; margin-bottom: 16px; background: var(--card); }
.invite-box h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--ts)); }
.invite-box h4 svg { width: 16px; height: 16px; }
.invite-box p { font-size: calc(13px * var(--ts)); margin: 0 0 10px; }
.invite-box .actions { margin: 10px 0 0; }
.invite-url { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); font-size: calc(13px * var(--ts)); }
.copied { font-size: calc(13px * var(--ts)); }
.invite-person { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 16px; font-size: calc(13px * var(--ts)); color: var(--muted); }
.invite-person b { font-size: calc(17px * var(--ts)); color: var(--fg); }
.offline-banner { background: var(--leaf-offline); color: #2a1d05; text-align: center; font-size: calc(13px * var(--ts)); padding: 6px 12px; }

/* Messages */
.chats { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-width: 0; min-height: 0; }
.chat-list { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 8px; }
.chat-list-title { font-size: calc(12px * var(--ts)); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 6px; }
.chat-item { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 10px; border-radius: 12px; text-align: left; }
.chat-item:hover { background: var(--accent-soft); }
.chat-item.active { background: var(--accent-soft); }
.chat-item .avatar { width: 44px; height: 44px; font-size: calc(15px * var(--ts)); }
.chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-top, .chat-item-bottom { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chat-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview { font-size: calc(13px * var(--ts)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.typing { color: var(--accent); font-style: italic; }
.family-avatar { background: var(--accent) !important; color: var(--accent-fg); }
.family-avatar svg { width: 24px; height: 24px; }
.conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.conv-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.conv-empty svg { width: 48px; height: 48px; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.conv-head .avatar { width: 40px; height: 40px; font-size: calc(14px * var(--ts)); }
.conv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-title .status .leaf { width: 14px; height: 14px; }
.conv-actions { display: flex; gap: 4px; }
.conv-actions .icon-btn svg { width: 20px; height: 20px; }
.conv-back { display: none; }
.messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.conv-start { text-align: center; font-size: calc(12px * var(--ts)); margin: 8px 0; }
.day-sep { text-align: center; margin: 12px 0 6px; }
.day-sep span { background: var(--accent-soft); color: var(--muted); font-size: calc(12px * var(--ts)); padding: 3px 10px; border-radius: 999px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 75%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.avatar.xs { width: 28px; height: 28px; font-size: calc(11px * var(--ts)); }
.avatar-gap { width: 28px; flex: none; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 7px 12px 5px; box-shadow: var(--shadow); min-width: 64px; }
.msg.mine .bubble { background: var(--accent-soft); border-color: transparent; border-radius: 16px 16px 4px 16px; }
.msg-sender { font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--accent); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-photo { display: block; max-width: 280px; max-height: 320px; border-radius: 10px; margin: 2px 0 4px; }
.msg-meta { font-size: calc(11px * var(--ts)); color: var(--muted); text-align: right; display: flex; gap: 4px; justify-content: flex-end; }
.ticks { letter-spacing: -3px; }
.ticks.read { color: var(--accent); }
.typing-line { min-height: 20px; padding: 0 20px; font-size: calc(12px * var(--ts)); color: var(--accent); font-style: italic; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 14px; background: var(--panel); border-top: 1px solid var(--line); }
.composer-input { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 20px; padding: 10px 14px; background: var(--card); max-height: 160px; }
.composer-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.composer .send { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.composer-error { padding: 0 20px; margin: 0; min-height: 0; }
@media (max-width: 760px) {
  .chats { grid-template-columns: 1fr; }
  .chats.has-open .chat-list { display: none; }
  .chats:not(.has-open) .conv { display: none; }
  .conv-back { display: inline-grid; }
  .msg { max-width: 88%; }
}

/* Calls */
.avatar.xl { width: 128px; height: 128px; font-size: calc(44px * var(--ts)); }
.call-overlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 30%, #2c3a28, #0f130e 70%); color: #fff; display: flex; flex-direction: column; }
.call-stage { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
/* The other participants: one tile fills the stage; several share it (FR-022). */
.call-grid { position: absolute; inset: 0; display: grid; grid-template: 1fr / 1fr; }
.call-tile { position: relative; overflow: hidden; min-height: 0; min-width: 0; display: grid; place-items: center; }
.call-tile .tile-avatar, .call-tile .tile-name, .call-tile .tile-status { display: none; }
.call-overlay.multi .call-grid { inset: 60px 16px 16px; gap: 10px; grid-template: none / 1fr 1fr; grid-auto-rows: 1fr; }
.call-overlay.multi .call-grid[data-n="5"], .call-overlay.multi .call-grid[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-aspect-ratio: 1/1) {
  .call-overlay.multi .call-grid[data-n="2"], .call-overlay.multi .call-grid[data-n="3"] { grid-template-columns: 1fr; }
  .call-overlay.multi .call-grid[data-n="5"], .call-overlay.multi .call-grid[data-n="6"] { grid-template-columns: 1fr 1fr; }
}
.call-overlay.multi .call-tile { background: #1d241b; border-radius: 16px; }
.call-overlay.multi .call-peer { display: none; }
/* FR-025: no blurred copy on tiles: blurring several videos is too heavy for a phone. */
.call-overlay.multi .call-remote { display: block; }
.call-overlay.multi .call-backdrop { display: none !important; }
.call-tile.novideo .call-remote, .call-tile.novideo .call-backdrop { display: block; position: absolute; width: 1px; height: 1px; inset: auto; opacity: 0; }
.call-overlay.multi .call-tile.novideo .tile-avatar, .call-overlay.multi .call-tile.ringing .tile-avatar { display: block; }
.call-overlay.multi .tile-name { display: block; position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 999px; font-size: calc(13px * var(--ts)); z-index: 1; }
.call-tile.ringing .tile-status { display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: calc(13px * var(--ts)); opacity: .85; }
/* Tiles are smaller than the whole screen. */
.call-overlay.multi .call-tile .avatar.xl { width: 96px; height: 96px; font-size: calc(32px * var(--ts)); }
.call-tile.ringing .avatar { animation: pulse 1.6s ease-in-out infinite; }
.call-tile.reconnecting { opacity: .55; }
.call-note { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.7); padding: 8px 16px; border-radius: 999px; font-size: calc(14px * var(--ts)); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.call-picker { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 32px)); max-height: calc(100% - 32px); display: flex; flex-direction: column; background: var(--card); color: var(--fg); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden; }
.call-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 18px; }
.call-picker-list { overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; }
.call-picker > p { padding: 0 18px 16px; margin: 0; }
.call-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; font: inherit; }
.call-pick:hover, .call-pick:focus-visible { background: var(--accent-soft); }
.call-pick span { flex: 1; }
.call-pick small { color: var(--muted); }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; display: none; }
/* FR-020: the whole picture over a blurred copy of it; "fill" crops it to the screen. */
.call-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(.55); display: none; }
.call-overlay.video.active .call-remote, .call-overlay.video.connecting .call-remote,
.call-overlay.video.active .call-backdrop, .call-overlay.video.connecting .call-backdrop { display: block; }
.call-overlay.fill .call-remote { object-fit: cover; }
.call-overlay.fill .call-backdrop { display: none !important; }
.call-overlay.fill .call-btn.fit { background: #fff; color: #222; }
.call-overlay.video.active .call-peer { display: none; }
.call-local { position: absolute; right: 20px; bottom: 20px; width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.6); background: #222; box-shadow: 0 6px 24px rgba(0,0,0,.4); transform: scaleX(-1); z-index: 1; touch-action: none; cursor: grab; }
/* FR-021: the own picture is dragged to any corner. */
.call-local[data-corner="tl"] { top: 20px; left: 20px; right: auto; bottom: auto; }
.call-local[data-corner="tr"] { top: 20px; right: 20px; bottom: auto; }
.call-local[data-corner="bl"] { left: 20px; right: auto; }
.call-local.dragging { right: auto; bottom: auto; cursor: grabbing; opacity: .9; box-shadow: 0 10px 32px rgba(0,0,0,.55); }
.call-overlay.incoming .call-local { display: none; }
.call-peer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.call-overlay.incoming .call-peer .avatar { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(140, 193, 120, .6); } 50% { box-shadow: 0 0 0 22px rgba(140, 193, 120, 0); } }
.call-name { font-size: calc(26px * var(--ts)); font-weight: 600; }
.call-status { font-size: calc(15px * var(--ts)); opacity: .8; min-height: 22px; }
/* The timer with the connection quality; a click opens the numbers (FR-024). */
.call-info { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; border: 0; color: #fff; font: inherit; background: rgba(0,0,0,.45); padding: 4px 14px; border-radius: 999px; font-variant-numeric: tabular-nums; cursor: pointer; }
.call-overlay:not(.active) .call-info { display: none; }
.q-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.q-bars i { width: 3px; border-radius: 1px; background: rgba(255,255,255,.35); }
.q-bars i:nth-child(1) { height: 5px; } .q-bars i:nth-child(2) { height: 8px; } .q-bars i:nth-child(3) { height: 12px; }
.q-bars.q-good i { background: #6fd36f; }
.q-bars.q-fair i:nth-child(-n+2) { background: #f2c14e; }
.q-bars.q-poor i:nth-child(1) { background: #ff6b5e; }
.call-tile .tile-name .q-bars { margin-right: 6px; vertical-align: -1px; }
.call-stats { position: absolute; z-index: 3; top: 56px; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); max-height: calc(100% - 72px); overflow-y: auto; background: rgba(16,20,15,.88); border-radius: 16px; padding: 12px 16px; font-size: calc(13px * var(--ts)); display: flex; flex-direction: column; gap: 10px; }
.qs-title { font-weight: 600; }
.qs-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.qs-head small { margin-left: auto; font-weight: 400; opacity: .75; }
.qs-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.qs-row span { opacity: .7; }
.qs-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.qs-note { opacity: .7; }
.qs-hint { background: rgba(242,193,78,.18); color: #ffe3a3; border-radius: 10px; padding: 8px 10px; }
.call-controls { display: flex; justify-content: center; gap: 18px; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); }
.call-btn { width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; }
.call-btn:hover { background: rgba(255,255,255,.26); }
.call-btn svg { width: 28px; height: 28px; }
.call-btn.red { background: #e04b43; }
.call-btn.green { background: #3fa34d; }
.call-btn.off { background: #fff; color: #222; }
.call-overlay.ended .call-controls { display: none; }
.call-record { align-self: center; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: calc(13px * var(--ts)); margin: 6px 0; }
.call-record svg { width: 16px; height: 16px; color: var(--accent); }
.call-record.missed svg, .call-record.missed span { color: var(--danger); }
.conv-actions .icon-btn { color: var(--accent); }
@media (max-width: 760px) {
  .call-local { width: 110px; right: 12px; bottom: 12px; }
  .call-local[data-corner="tl"] { top: 12px; left: 12px; }
  .call-local[data-corner="tr"] { top: 12px; right: 12px; }
  .call-local[data-corner="bl"] { left: 12px; }
  .call-controls { gap: 12px; }
  .call-btn { width: 56px; height: 56px; }
}
.call-unmute { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 10px 18px; background: #fff; color: #222; display: flex; gap: 8px; align-items: center; font-weight: 600; z-index: 2; }
.call-unmute svg { width: 18px; height: 18px; }

/* Photos */
.portrait { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.portrait-btn { position: relative; border: 0; background: none; padding: 0; border-radius: 50%; }
.portrait-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 2px solid var(--panel); }
.portrait-cam svg { width: 15px; height: 15px; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: calc(12px * var(--ts)); text-decoration: underline; padding: 0; }
.attach { align-self: center; }
.attach svg { width: 22px; height: 22px; }
.msg-photo { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.88); display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 8px; }
.lightbox-close { position: absolute; top: 14px; right: 14px; color: #fff; }
.lightbox-close svg { width: 26px; height: 26px; }

/* Events */
.events { flex: 1; overflow-y: auto; padding: 8px 24px 32px; max-width: 760px; }
.events-month { font-size: calc(13px * var(--ts)); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 8px; font-weight: 600; }
.event { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.event.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.event-date { width: 48px; text-align: center; display: flex; flex-direction: column; line-height: 1.1; }
.event-date b { font-size: calc(22px * var(--ts)); }
.event-date small { color: var(--muted); font-size: calc(12px * var(--ts)); }
.event-who { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 0; min-width: 0; }
.event-who .avatar { width: 40px; height: 40px; }
.event-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.event-title svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.event.memorial .event-title svg, .event.born .event-title svg { color: var(--leaf-deceased); }
.events-empty { margin: 48px auto; text-align: center; max-width: 420px; }
.events-empty svg { width: 48px; height: 48px; }
.badge.today { background: var(--heart); }
@media (max-width: 760px) { .events { padding: 8px 12px 24px; } .event { flex-wrap: wrap; } }

/* Family call */
.room-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: calc(14px * var(--ts)); }
.room-banner svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.room-banner span { flex: 1; }
.room-banner .btn { padding: 6px 12px; }
/* FR-028: the offer to turn notifications on. */
.push-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); font-size: calc(14px * var(--ts)); }
.push-banner[hidden] { display: none; }
.push-banner svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.push-banner span { flex: 1; min-width: 0; }
.push-banner .btn { padding: 6px 12px; flex: none; }
@media (max-width: 760px) { .push-banner { flex-wrap: wrap; } .push-banner span { flex-basis: calc(100% - 30px); } }
.check-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.call-overlay.group { padding-top: 8px; }
.group-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-weight: 600; }
.group-head svg { width: 20px; height: 20px; }
.group-grid { flex: 1; display: grid; gap: 10px; padding: 10px 16px; min-height: 0; grid-template-columns: 1fr; }
.group-grid.n2 { grid-template-columns: 1fr 1fr; }
.group-grid.n3, .group-grid.n4 { grid-template-columns: 1fr 1fr; }
.group-grid.n5, .group-grid.n6 { grid-template-columns: 1fr 1fr 1fr; }
.tile { position: relative; background: #1d241b; border-radius: 16px; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile video.mirror { transform: scaleX(-1); }
.tile.audio video { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tile-name { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 999px; font-size: calc(13px * var(--ts)); }
@media (max-width: 760px) { .group-grid.n3, .group-grid.n4, .group-grid.n5, .group-grid.n6 { grid-template-columns: 1fr 1fr; } .room-banner { flex-wrap: wrap; } }

/* Settings */
.settings { flex: 1; overflow-y: auto; padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.settings-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.settings-card h3 { margin: 0 0 12px; font-size: calc(16px * var(--ts)); }
.settings-card form { max-width: 360px; }
.settings-card .actions { grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); align-items: center; }
.ok-text { color: var(--accent); font-size: calc(14px * var(--ts)); min-height: 20px; margin: 4px 0 8px; }
.member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member.blocked { opacity: .6; }
.member-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.member-actions .btn { padding: 6px 10px; font-size: calc(13px * var(--ts)); }
table.audit { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--ts)); }
table.audit td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.audit td:first-child { white-space: nowrap; }
@media (max-width: 760px) { .settings { padding: 12px; } .member { flex-wrap: wrap; } table.audit td:last-child { display: none; } }

/* Accessibility and phones */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pcard:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  .sidebar { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .event-who { min-width: 200px; }
  .event > .btn { flex-basis: 100%; justify-content: center; }
  .side { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.couple-line.divorced { stroke: var(--muted); stroke-dasharray: 2 6; opacity: .6; }
.marriage-form { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }
.kinship { font-size: calc(13px * var(--ts)); color: var(--muted); margin: 2px 0; }
.kinship b { color: var(--accent); font-weight: 600; }

/* Search */
.search { position: relative; display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; width: 280px; }
.search > svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.search-input { border: 0; background: none; padding: 8px 0; flex: 1; min-width: 0; outline: none; }
.search:focus-within { border-color: var(--accent); }
.search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 30; }
.search-item { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 8px; border-radius: 10px; text-align: left; }
.search-item.active, .search-item:hover { background: var(--accent-soft); }
.search-item div { display: flex; flex-direction: column; min-width: 0; }
.search-empty { padding: 10px; font-size: calc(14px * var(--ts)); }
.pcard.dim { opacity: .25; }
@media (max-width: 760px) { .search { width: 44px; padding: 0 12px; } .search:focus-within { position: absolute; left: 12px; right: 12px; width: auto; z-index: 31; } }
.hint { font-size: calc(13px * var(--ts)); margin: 14px 0 0; }
.reset-box { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; display: grid; gap: 8px; }
.reset-box p { margin: 0; font-size: calc(13px * var(--ts)); }
.reset-box .btn { justify-self: start; }

/* Message actions */
.bubble-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.msg.mine .bubble-wrap { align-items: flex-end; }
.msg-menu-btn { position: absolute; top: 4px; right: -30px; border: 0; background: var(--card); border-radius: 50%; width: 26px; height: 26px; color: var(--muted); opacity: 0; box-shadow: var(--shadow); line-height: 1; }
.msg.mine .msg-menu-btn { right: auto; left: -30px; }
.msg:hover .msg-menu-btn, .msg-menu-btn:focus-visible { opacity: 1; }
@media (hover: none) { .msg-menu-btn { opacity: .7; } }
.msg-quote { display: flex; flex-direction: column; text-align: left; border: 0; border-left: 3px solid var(--accent); background: rgba(0,0,0,.04); border-radius: 6px; padding: 4px 8px; margin: 2px 0 4px; max-width: 100%; font-size: calc(13px * var(--ts)); }
.msg-quote b { color: var(--accent); font-size: calc(12px * var(--ts)); }
.msg-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.msg.deleted .bubble { opacity: .7; font-style: italic; }
.msg.flash .bubble { outline: 3px solid var(--accent); }
.reactions { display: flex; gap: 4px; margin-top: -6px; padding: 0 8px; flex-wrap: wrap; }
.reaction { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 1px 7px; font-size: calc(13px * var(--ts)); display: inline-flex; gap: 3px; align-items: center; }
.reaction.mine { border-color: var(--accent); background: var(--accent-soft); }
.reaction span { font-size: calc(11px * var(--ts)); color: var(--muted); }
.msg-menu { position: fixed; min-width: 220px; }
.reaction-pick { display: flex; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.reaction-pick button { border: 0; background: none; font-size: calc(22px * var(--ts)); padding: 4px; border-radius: 8px; width: auto; }
.reaction-pick button:hover { background: var(--accent-soft); transform: scale(1.15); }
.msg-menu .danger { color: var(--danger); }
.mode-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.mode-bar > svg { width: 18px; height: 18px; color: var(--accent); }
.mode-bar div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mode-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.voice audio { height: 36px; max-width: 260px; }
.mic { align-self: center; }
.mic svg { width: 22px; height: 22px; }
.rec-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; background: var(--panel); border-top: 1px solid var(--line); }
.rec-bar .muted { flex: 1; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Gatherings */
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meetings { display: grid; gap: 10px; margin-bottom: 8px; }
.gathering { background: var(--card); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; max-width: 520px; }
.gathering.cancelled, .gathering.past { border-color: var(--line); opacity: .7; }
.gathering.cancelled b { text-decoration: line-through; }
.gathering-head { display: flex; gap: 10px; align-items: flex-start; }
.gathering-head > svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.gathering-head div { flex: 1; display: flex; flex-direction: column; }
.gathering-head small { color: var(--muted); }
.gathering .tag { font-size: calc(12px * var(--ts)); background: var(--line); border-radius: 999px; padding: 2px 8px; }
.gathering-note { margin: 0; font-size: calc(14px * var(--ts)); white-space: pre-wrap; }
.gathering-going { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gathering-answers { display: flex; gap: 6px; flex-wrap: wrap; }
.gathering-answers .btn { padding: 6px 12px; font-size: calc(14px * var(--ts)); }
.gathering-admin { display: flex; gap: 14px; }
.gathering-form { background: var(--card); border: 1px solid var(--accent); border-radius: 14px; padding: 14px; max-width: 520px; }
.msg-gathering { align-self: center; display: grid; gap: 4px; justify-items: center; margin: 8px 0; width: min(520px, 100%); }
.msg-gathering .gathering { width: 100%; }

/* Photo albums */
.photos { flex: 1; overflow-y: auto; padding: 16px 24px 32px; }
.album-create { display: flex; gap: 8px; max-width: 520px; margin-bottom: 16px; }
.album-create input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--card); min-width: 0; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.album-tile { border: 1px solid var(--line); background: var(--card); border-radius: 14px; overflow: hidden; padding: 0 0 10px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.album-tile img, .album-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--accent-soft); display: grid; place-items: center; }
.album-empty svg { width: 40px; height: 40px; color: var(--muted); }
.album-tile b, .album-tile small { padding: 0 12px; }
.album-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.album-head h3 { flex: 1; margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.photo-tile { position: relative; border: 0; padding: 0; background: var(--accent-soft); border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-people-count { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; font-size: calc(12px * var(--ts)); padding: 2px 8px; display: flex; gap: 4px; align-items: center; }
.photo-people-count svg { width: 14px; height: 14px; }
.empty-note { max-width: 520px; }
.photo-strip .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.viewer { position: fixed; inset: 0; z-index: 110; background: #0e100d; display: grid; grid-template-columns: 1fr 340px; color: #fff; }
.viewer-img { grid-row: 1; grid-column: 1; max-width: 100%; max-height: 100vh; margin: auto; object-fit: contain; }
.viewer-info { grid-column: 2; background: var(--panel); color: var(--fg); padding: 56px 18px 18px; overflow-y: auto; }
.viewer-caption { margin: 0 0 6px; white-space: pre-wrap; }
.viewer-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: calc(13px * var(--ts)); }
.viewer-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0; background: rgba(255,255,255,.22); color: #fff; font-size: calc(34px * var(--ts)); width: 48px; height: 64px; border-radius: 12px; }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 352px; }
.people-pick { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; margin-top: 6px; }
.people-pick .check { margin: 2px 0; }
@media (max-width: 760px) {
  .photos { padding: 12px; }
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .viewer-info { grid-column: 1; grid-row: 2; max-height: 45vh; padding-top: 14px; }
  .viewer-nav.next { right: 12px; }
}
@media (max-width: 760px) {
  /* The bottom bar keeps its size with large text: five labels must fit 360 px. */
  .nav-item { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 10px; }
  .nav-item span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar { gap: 2px; }
  .profile { flex: none; }
}

/* Memories */
.stories { margin-top: 16px; }
.story { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.story-head { display: flex; align-items: center; gap: 6px; }
.story-head b { font-size: calc(13px * var(--ts)); }
.story-head small { flex: 1; }
.story p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14px * var(--ts)); }
.stories form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); margin-bottom: 6px; }
.small { font-size: calc(13px * var(--ts)); }
.remember-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.remember svg { width: 18px; height: 18px; color: var(--accent); }
.memorial-actions { display: grid; gap: 8px; margin-bottom: 16px; }
.memorial-page { position: fixed; inset: 0; z-index: 105; background: rgba(20, 22, 18, .55); display: grid; place-items: center; padding: 16px; }
.memorial-sheet { position: relative; background: var(--panel); border-radius: 20px; max-width: 640px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.memorial-sheet .avatar { filter: grayscale(1); }
.memorial-sheet h2 { margin: 6px 0 0; }
.memorial-years { font-size: calc(18px * var(--ts)); color: var(--muted); }
.memorial-note { white-space: pre-wrap; max-width: 520px; }
.memorial-sheet .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; width: 100%; }
.memorial-sheet .strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.memorial-sheet .stories { width: 100%; text-align: left; }
.memorial-close { position: absolute; top: 12px; right: 12px; }
.memorial-sheet > .muted svg { width: 16px; height: 16px; vertical-align: -3px; }

/* Feed */
.home { flex: 1; overflow-y: auto; padding: 16px 24px 32px; max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.hello { margin: 4px 0; font-size: calc(24px * var(--ts)); }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--ts)), 1fr)); gap: 10px; }
.quick { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; text-align: left; }
.quick:hover { border-color: var(--accent); }
.quick svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.home-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.home-card h3 { margin: 0 0 4px; font-size: calc(15px * var(--ts)); display: flex; gap: 8px; align-items: center; }
.home-card h3 svg { width: 18px; height: 18px; color: var(--accent); }
.home-line { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; text-align: left; }
.home-line span { flex: 1; }
.feed { display: grid; gap: 2px; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; border: 0; background: none; text-align: left; padding: 8px 6px; border-radius: 10px; }
.feed-item:hover { background: var(--accent-soft); }
.feed-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.feed-photos { display: flex; gap: 4px; }
.feed-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.feed-quote { margin: 0; font-size: calc(14px * var(--ts)); color: var(--muted); border-left: 3px solid var(--accent); padding-left: 8px; white-space: pre-wrap; }
@media (max-width: 760px) { .home { padding: 12px; } .nav-item[data-screen="settings"] { display: none; } }

/* Шежере on paper */
.shezhere-page { position: fixed; inset: 0; z-index: 106; background: var(--bg); overflow-y: auto; }
.shezhere-bar { position: sticky; top: 0; display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.shezhere-bar .spacer { flex: 1; }
.shezhere-sheet { max-width: 620px; margin: 24px auto 48px; padding: 32px 28px; background: #fffdf6; color: #2a2a26; border: 1px solid #e3d9c2; border-radius: 6px; box-shadow: var(--shadow); font-family: Georgia, "Times New Roman", serif; }
.shezhere-sheet h1 { text-align: center; font-size: calc(28px * var(--ts)); margin: 0 0 4px; }
.shezhere-sub { text-align: center; color: #77736a; margin: 0 0 24px; }
.shezhere-chain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.shezhere-chain li { position: relative; text-align: center; padding: 14px 0 22px; }
.shezhere-chain li:not(:last-child)::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 3px; height: 22px; background: #8b6b4c; transform: translateX(-50%); }
.shezhere-gen { display: inline-block; font-size: calc(12px * var(--ts)); letter-spacing: .08em; color: #3f6b3a; border: 1px solid #3f6b3a; border-radius: 999px; padding: 1px 10px; text-transform: uppercase; }
.shezhere-name { font-size: calc(22px * var(--ts)); font-weight: 700; margin-top: 6px; }
.shezhere-years { color: #77736a; }
.shezhere-spouse { font-size: calc(14px * var(--ts)); color: #5a564e; margin-top: 2px; }
.shezhere-note { text-align: center; color: #77736a; font-size: calc(13px * var(--ts)); margin-top: 16px; }
@media print {
  body.print-shezhere > *:not(.shezhere-page) { display: none !important; }
  body.print-shezhere .shezhere-page { position: static; overflow: visible; background: #fff; }
  body.print-shezhere .shezhere-bar { display: none; }
  body.print-shezhere .shezhere-sheet { box-shadow: none; border: 0; margin: 0 auto; }
}
.branch.adoptive, .branch.foster { stroke-dasharray: 10 8; }
.rel-row select.ptype { border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: calc(12px * var(--ts)); padding: 2px 4px; max-width: 96px; }
.backups { display: grid; gap: 6px; margin-top: 12px; }
.backup-row { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--ts)); }
.backup-row svg { width: 16px; height: 16px; color: var(--muted); }
.backups .btn { justify-self: start; }

/* Tree themes */
.tree-viewport[data-tree-theme="steppe"] { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22220%22%20viewBox%3D%220%200%201200%20220%22%3E%3Cpath%20d%3D%22M0%20160%20C150%2090%20260%20120%20380%20140%20S600%2060%20760%20110%201000%20150%201200%2090%20V220%20H0Z%22%20fill%3D%22%23c9b68f%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M0%20190%20C200%20150%20340%20170%20520%20185%20S860%20140%201200%20170%20V220%20H0Z%22%20fill%3D%22%23b39b6e%22%20opacity%3D%22.6%22/%3E%3C/svg%3E") bottom center / 100% auto no-repeat, linear-gradient(to bottom, var(--sky) 0%, var(--sky) 55%, var(--earth) 100%); }
.tree-viewport[data-tree-theme="sakura"] { --branch: #9a6b7a; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22%23f4a6bd%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2240%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2830%2030%2040%29%22/%3E%3Cellipse%20cx%3D%22150%22%20cy%3D%2220%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%28-20%20150%2020%29%22/%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22130%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2860%20200%20130%29%22/%3E%3Cellipse%20cx%3D%2280%22%20cy%3D%22180%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%2810%2080%20180%29%22/%3E%3Cellipse%20cx%3D%22110%22%20cy%3D%22100%22%20rx%3D%224%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-50%20110%20100%29%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22260%22%20viewBox%3D%220%200%201200%20260%22%3E%3Cpath%20d%3D%22M380%20260%20L600%2040%20L820%20260Z%22%20fill%3D%22%23c9cde0%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M552%2088%20L600%2040%20L648%2088%20L628%2080%20L612%2092%20L596%2078%20L578%2092Z%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M0%20230%20C300%20200%20500%20240%20800%20215%20S1100%20220%201200%20205%20V260%20H0Z%22%20fill%3D%22%23e7b9c8%22%20opacity%3D%22.55%22/%3E%3C/svg%3E") bottom center / 100% auto no-repeat, linear-gradient(to bottom, #fbeef2 0%, #f6f0f5 60%, #f0d9e2 100%); }
.tree-viewport[data-tree-theme="winter"] { --branch: #6f7f91; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2215%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2260%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22110%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22140%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22170%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22180%22%20r%3D%221.7%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 200px 200px, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22200%22%20viewBox%3D%220%200%201200%20200%22%3E%3Cpath%20d%3D%22M0%20140%20C200%20100%20400%20150%20600%20120%20S1000%2090%201200%20130%20V200%20H0Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M0%20170%20C300%20150%20600%20185%20900%20160%20S1100%20165%201200%20160%20V200%20H0Z%22%20fill%3D%22%23e8f0f8%22/%3E%3C/svg%3E") bottom center / 100% auto no-repeat, linear-gradient(to bottom, #e9f1f8 0%, #f4f8fb 60%, #dfe9f2 100%); }
:root[data-theme="dark"] .tree-viewport[data-tree-theme="sakura"] { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22%23f4a6bd%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2240%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2830%2030%2040%29%22/%3E%3Cellipse%20cx%3D%22150%22%20cy%3D%2220%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%28-20%20150%2020%29%22/%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22130%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2860%20200%20130%29%22/%3E%3Cellipse%20cx%3D%2280%22%20cy%3D%22180%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%2810%2080%20180%29%22/%3E%3Cellipse%20cx%3D%22110%22%20cy%3D%22100%22%20rx%3D%224%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-50%20110%20100%29%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px, linear-gradient(to bottom, #241a1f, #1b1418); }
:root[data-theme="dark"] .tree-viewport[data-tree-theme="winter"] { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2215%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2260%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22110%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22140%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22170%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22180%22%20r%3D%221.7%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 200px 200px, linear-gradient(to bottom, #141b22, #1b242d); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tree-viewport[data-tree-theme="sakura"] { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22%23f4a6bd%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2240%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2830%2030%2040%29%22/%3E%3Cellipse%20cx%3D%22150%22%20cy%3D%2220%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%28-20%20150%2020%29%22/%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22130%22%20rx%3D%226%22%20ry%3D%223.5%22%20transform%3D%22rotate%2860%20200%20130%29%22/%3E%3Cellipse%20cx%3D%2280%22%20cy%3D%22180%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%2810%2080%20180%29%22/%3E%3Cellipse%20cx%3D%22110%22%20cy%3D%22100%22%20rx%3D%224%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-50%20110%20100%29%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px, linear-gradient(to bottom, #241a1f, #1b1418); }
  :root:not([data-theme="light"]) .tree-viewport[data-tree-theme="winter"] { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2215%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2260%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22110%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22140%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22170%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22180%22%20r%3D%221.7%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 200px 200px, linear-gradient(to bottom, #141b22, #1b242d); }
}
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-tile { border: 2px solid var(--line); border-radius: 14px; padding: 0 0 8px; background: var(--card); display: grid; gap: 6px; overflow: hidden; }
.theme-tile.active { border-color: var(--accent); }
.theme-preview { height: 80px; flex: none; cursor: inherit; }
.chat-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; margin: 4px 4px 8px; background: var(--card); }
.chat-search:focus-within { border-color: var(--accent); }
.chat-search svg { width: 16px; height: 16px; color: var(--muted); }
.chat-search-input { border: 0; background: none; padding: 8px 0; flex: 1; min-width: 0; outline: none; }
.search-hit .chat-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
mark { background: #f6e3a1; color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 0 10px; }

/* Text size (FR-001) */
.text-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.text-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.text-tile b { line-height: 1; }
.text-tile.active { border-color: var(--accent); background: var(--accent-soft); }

/* Invitation QR code (FR-002): always dark on white, whatever the theme, so cameras read it. */
.invite-qr-box { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.invite-qr { flex: none; width: 148px; height: 148px; background: #fff; border-radius: 8px; padding: 0; }
.invite-qr svg { width: 100%; height: 100%; display: block; }
.invite-qr-box figcaption { font-size: calc(13px * var(--ts)); }
@media (max-width: 420px) { .invite-qr-box { flex-direction: column; align-items: flex-start; } .invite-qr { width: 200px; height: 200px; } }

/* Contacts (FR-003) */
fieldset.contacts { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 2px; margin: 0 0 12px; min-width: 0; }
fieldset.contacts legend { padding: 0 6px; font-size: calc(13px * var(--ts)); color: var(--muted); }
fieldset.contacts .small { font-size: calc(12px * var(--ts)); margin: -4px 0 10px; }
.contact-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; word-break: break-all; }
.contact-link svg { width: 16px; height: 16px; flex: none; }

/* Group chats (FR-004) */
.chat-list-title.with-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.new-group { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.new-group svg { width: 14px; height: 14px; }
.group-avatar { display: grid; place-items: center; background: var(--branch); color: #fff; font-weight: 700; }
.conv-body-pad { padding: 16px; overflow-y: auto; }
.group-form { max-width: 520px; }
.pick-people { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--card); }
.pick-person { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pick-person:hover { background: var(--accent-soft); }
.group-panel { border-bottom: 1px solid var(--line); background: var(--panel); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 55%; overflow-y: auto; }
.group-panel h4 { margin: 6px 0 0; font-size: calc(12px * var(--ts)); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.group-member { display: flex; align-items: center; gap: 8px; }
.group-member span { flex: 1; min-width: 0; }
.row-form { display: flex; gap: 8px; }
.row-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.leave-group { align-self: flex-start; margin-top: 6px; }

/* Muted chats (FR-005) */
.muted-ic { width: 14px; height: 14px; color: var(--muted); flex: none; margin-right: auto; }
.badge.quiet { background: var(--muted); }
.mute-btn.on { color: var(--muted); }

/* Files in chats (FR-006) */
.msg-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 2px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); text-decoration: none; max-width: 320px; }
.msg-file:hover { border-color: var(--accent); }
.msg-file-ext { flex: none; display: grid; place-items: center; width: 40px; height: 46px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font-size: calc(11px * var(--ts)); font-weight: 700; }
.msg-file-name { display: flex; flex-direction: column; min-width: 0; }
.msg-file-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* The family archive (FR-007) */
.documents { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.document { display: flex; align-items: center; gap: 10px; }
.document-thumb { flex: none; width: 44px; height: 56px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--branch); color: #fff; font-size: calc(11px * var(--ts)); font-weight: 700; text-decoration: none; border: 1px solid var(--line); }
.document-thumb img { width: 100%; height: 100%; object-fit: cover; }
.document-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.document-body a { color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-body a:hover b { color: var(--accent); }
.document-form { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.add-document { align-self: flex-start; }

/* Call log (FR-008) */
.chat-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.chat-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 10px; }
.chat-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.call-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.call-item .chat-item-body { flex: 1; min-width: 0; }
.call-item.missed .chat-preview, .call-item.missed b { color: var(--danger); }
.call-kind { width: 14px; height: 14px; vertical-align: -2px; }
.call-again { display: flex; gap: 2px; flex: none; }

/* A call recovering after a change of network (FR-009): the status shows over the video. */
.call-overlay.video.active.reconnecting .call-peer { display: flex; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(0, 0, 0, .55); border-radius: 14px; padding: 10px 18px; }
.call-overlay.video.active.reconnecting .call-peer .avatar, .call-overlay.video.active.reconnecting .call-name { display: none; }
.call-overlay.reconnecting .call-status { color: #ffd27a; opacity: 1; }

/* Links that look like buttons ("Subscribe", "Download GEDCOM") are not underlined. */
a.btn { text-decoration: none; color: inherit; }
a.btn.primary { color: var(--accent-fg); }

/* Duplicates (FR-012) */
.duplicates { display: flex; flex-direction: column; gap: 12px; }
.dup-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.dup-card { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
.dup-card > div { display: flex; flex-direction: column; min-width: 0; }
.dup-label { color: var(--accent); font-weight: 600; }
.dup-arrow { color: var(--muted); font-size: calc(18px * var(--ts)); }
.dup-pair .actions { flex-basis: 100%; }
.dup-pair .error:empty { display: none; }

/* History of a card (FR-013) */
details.history { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
details.history summary { cursor: pointer; color: var(--muted); font-size: calc(13px * var(--ts)); }
.history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.history-item { border-left: 3px solid var(--line); padding-left: 10px; overflow-wrap: anywhere; }
.history-item .error:empty { display: none; }

/* Devices and sessions (FR-014) */
.sessions { display: flex; flex-direction: column; gap: 8px; }
.session { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.session > svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.session.current { border-color: var(--accent); }
.session-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.session-here { margin-left: 8px; font-size: calc(11px * var(--ts)); color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sessions-end-others { align-self: flex-start; }

/* The family in numbers (FR-015) */
.stats-page { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; }
.stats-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.stats-bar h2 { margin: 0; font-size: calc(20px * var(--ts)); }
.stats-body { overflow-y: auto; padding: 20px; max-width: 1100px; width: 100%; margin: 0 auto; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; }
.stat-tile b { font-size: calc(28px * var(--ts)); color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-tile span { color: var(--muted); font-size: calc(13px * var(--ts)); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.stat-card h3 { margin: 0 0 10px; font-size: calc(15px * var(--ts)); }
.stat-person { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 0; border-bottom: 1px dashed var(--line); text-align: left; }
.stat-person:last-child { border-bottom: 0; }
.stat-list { margin: 0; padding: 0; list-style: none; }
.stat-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.stat-list li:last-child { border-bottom: 0; }
.stat-list b { font-variant-numeric: tabular-nums; }
/* One series, one hue (the accent); thin bars with rounded tops on a recessive baseline. */
.month-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 160px; align-items: end; border-bottom: 1px solid var(--line); padding-top: 6px; }
.month-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.month-bar { width: 60%; max-width: 18px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; }
.month-value { font-size: calc(11px * var(--ts)); color: var(--fg); font-variant-numeric: tabular-nums; min-height: 14px; }
.month-label { font-size: calc(10px * var(--ts)); color: var(--muted); margin-top: 4px; transform: translateY(18px); height: 0; }
.month-chart + * { margin-top: 22px; }
.stat-card:has(.month-chart) { padding-bottom: 30px; }

/* The family book (FR-016): on screen a sheet, on paper the sheet alone, chapters on new pages. */
.book-page { position: fixed; inset: 0; z-index: 106; background: var(--bg); overflow-y: auto; }
.book-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 1; }
.book-sheet { max-width: 820px; margin: 24px auto; background: #fff; color: #2a2a26; border: 1px solid var(--line); border-radius: 8px; padding: 48px 56px; font-family: Georgia, "Times New Roman", serif; }
.book-cover { text-align: center; padding: 80px 0 60px; border-bottom: 2px solid #e6e0d3; margin-bottom: 32px; }
.book-cover h1 { font-size: 34px; margin: 0 0 16px; }
.book-cover .muted { color: #77736a; }
.book-chapter h2 { font-size: 22px; color: #3f6b3a; border-bottom: 1px solid #e6e0d3; padding-bottom: 6px; margin: 32px 0 16px; }
.book-person { display: flex; gap: 18px; margin-bottom: 22px; break-inside: avoid; }
.book-portrait { flex: none; width: 84px; height: 104px; object-fit: cover; border-radius: 6px; background: #e4d6bf; }
.book-initials { display: grid; place-items: center; font-size: 28px; color: #fff; background: #8b6b4c; }
.book-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; }
.book-text h3 { margin: 0 0 2px; font-size: 18px; }
.book-life { color: #77736a; margin-bottom: 4px; }
.book-note { margin: 6px 0; font-style: italic; white-space: pre-line; }
.book-story { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid #e5eedd; white-space: pre-line; }
.book-story cite { display: block; color: #77736a; font-size: 13px; }
@media (max-width: 600px) { .book-sheet { padding: 24px 18px; margin: 0; border-radius: 0; } .book-cover { padding: 40px 0 30px; } }
@media print {
  body.print-book > *:not(.book-page) { display: none !important; }
  body.print-book .book-page { position: static; overflow: visible; background: #fff; }
  body.print-book .book-bar { display: none; }
  body.print-book .book-sheet { border: 0; margin: 0; padding: 0; max-width: none; }
  body.print-book .book-cover { break-after: page; padding-top: 30vh; border: 0; }
  body.print-book .book-chapter { break-before: page; }
}

/* Forwarded and pinned messages (FR-018) */
.msg-forwarded { font-size: calc(12px * var(--ts)); color: var(--muted); font-style: italic; margin-bottom: 2px; }
.pin-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pin-bar > svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.pin-text { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13px * var(--ts)); }
.pin-text b { color: var(--accent); }
.forward-dialog { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 16px; }
.forward-box { background: var(--panel); border-radius: 16px; width: min(420px, 100%); max-height: 80vh; overflow-y: auto; padding: 12px; box-shadow: var(--shadow); }
.forward-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }