* { box-sizing: border-box; }
html { font-size: 22px; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #fffdf7; color: #111; line-height: 1.5; }
h1 { font-size: 2.2rem; margin: .4em 0; }
h2 { font-size: 1.7rem; margin: .8em 0 .4em; }
h3 { font-size: 1.3rem; margin: .6em 0 .3em; }
p { margin: .4em 0 .8em; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 24px 120px; outline: none; }
[hidden] { display: none !important; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: #0b4f6c; color: #fff; }
.who { flex: 1; font-size: 1.2rem; font-weight: 600; text-align: center; }
.home-btn, .logout-btn { font: inherit; font-size: 1.3rem; font-weight: 700; border-radius: 14px; padding: 14px 26px; cursor: pointer; border: 3px solid #fff; }
.home-btn { background: #ffd23f; color: #111; border-color: #ffd23f; }
.logout-btn { background: transparent; color: #fff; font-size: 1.1rem; }
button, .btn { font: inherit; font-size: 1.15rem; font-weight: 700; min-height: 64px; padding: 12px 26px; border-radius: 14px; border: 3px solid #0b4f6c; background: #0b4f6c; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; margin: 6px 8px 6px 0; }
button.secondary, .btn.secondary { background: #fff; color: #0b4f6c; }
button.green { background: #1b7f3b; border-color: #1b7f3b; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 5px solid #ff8c00; outline-offset: 3px; }
button:hover, .btn:hover { filter: brightness(1.12); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 20px; }
.tile { min-height: 160px; flex-direction: column; font-size: 1.5rem; border-radius: 22px; margin: 0; padding: 20px; text-align: center; }
.tile .icon { font-size: 3.2rem; line-height: 1; }
.tile small { display: block; font-size: 1rem; font-weight: 500; opacity: .95; }
.t1 { background: #0b4f6c; border-color: #0b4f6c; } .t2 { background: #1b7f3b; border-color: #1b7f3b; }
.t3 { background: #8a3ffc; border-color: #8a3ffc; } .t4 { background: #b5470b; border-color: #b5470b; }
.t5 { background: #a1124f; border-color: #a1124f; } .t6 { background: #005a9c; border-color: #005a9c; }
.t7 { background: #4b5320; border-color: #4b5320; } .t8 { background: #333; border-color: #333; }
label { display: block; font-weight: 700; font-size: 1.15rem; margin: 18px 0 6px; }
.hint { font-size: 1rem; color: #333; font-weight: 400; }
input, select, textarea { font: inherit; font-size: 1.2rem; width: 100%; max-width: 640px; padding: 14px 16px; border: 3px solid #555; border-radius: 12px; background: #fff; color: #111; }
input[type=file] { padding: 18px; border-style: dashed; }
.check { display: flex; align-items: center; gap: 14px; font-weight: 600; margin: 8px 0; cursor: pointer; padding: 10px 14px; border: 3px solid #ccc; border-radius: 12px; max-width: 640px; }
.check input { width: 34px; height: 34px; }
.card { background: #fff; border: 3px solid #ddd; border-radius: 18px; padding: 18px 22px; margin: 16px 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.photo { background: #fff; border: 3px solid #ddd; border-radius: 18px; overflow: hidden; }
.photo img { width: 100%; height: 280px; object-fit: cover; display: block; background: #eee; cursor: zoom-in; }
.photo .info { padding: 12px 16px; }
.photo .date { font-weight: 700; font-size: 1.15rem; }
.tag { display: inline-block; background: #e6f2f7; border: 2px solid #0b4f6c; border-radius: 30px; padding: 2px 14px; margin: 4px 6px 0 0; font-size: 1rem; font-weight: 600; }
.age { display: inline-block; background: #ffd23f; border-radius: 10px; padding: 4px 14px; font-weight: 800; font-size: 1.3rem; margin-bottom: 6px; }
.year-head { background: #0b4f6c; color: #fff; border-radius: 14px; padding: 8px 20px; margin-top: 32px; }
.month-head { border-bottom: 3px solid #0b4f6c; padding-bottom: 4px; }
.grow-line { border-left: 8px solid #ffd23f; padding-left: 24px; }
.grow-item { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin: 24px 0; }
.grow-item img { width: 340px; max-width: 100%; border-radius: 16px; border: 3px solid #ddd; cursor: zoom-in; }
.links { display: flex; flex-wrap: wrap; }
.links .btn { background: #fff; color: #0b4f6c; font-size: 1.05rem; min-height: 56px; }
.links .btn.gentle { color: #555; border-color: #888; }
.reason { font-size: 1.15rem; margin: 4px 0; }
.code { font-size: 2.4rem; font-weight: 800; letter-spacing: .3em; background: #ffd23f; padding: 8px 22px; border-radius: 14px; display: inline-block; }
#message { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: 90vw; z-index: 30; }
#message .msg { padding: 20px 30px; border-radius: 16px; font-size: 1.25rem; font-weight: 700; color: #fff; background: #1b7f3b; box-shadow: 0 6px 24px rgba(0,0,0,.35); margin-top: 10px; }
#message .msg.bad { background: #b00020; }
.big-view { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #fff; }
.big-view img { max-width: 95vw; max-height: 78vh; border-radius: 10px; }
.empty { font-size: 1.3rem; padding: 30px; background: #f3f3f3; border-radius: 18px; text-align: center; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 180px; }

.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border: 3px solid #fff; box-shadow: 0 0 0 2px #0b4f6c; background: #e6f2f7; }
.avatar.initials { background: #0b4f6c; color: #fff; font-weight: 800; }
.person { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.person > div { flex: 1; min-width: 240px; }
.who { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tag .avatar { box-shadow: none; border-width: 1px; }

/* ---- accessibility bar ---- */
#a11yBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 10px; background: #102a43; border-top: 4px solid #ffd23f; }
#a11yBar button { margin: 0; min-height: 56px; font-size: 1rem; background: #fff; color: #102a43; border-color: #fff; }
#a11yBar button[aria-pressed=true] { background: #ffd23f; border-color: #ffd23f; }
main { padding-bottom: 190px; }
#message { bottom: 110px; }
html:has(body.text-large) { font-size: 26px; }
html:has(body.text-xlarge) { font-size: 31px; }
body.contrast { background: #000; color: #fff; }
body.contrast .card, body.contrast .photo, body.contrast .empty, body.contrast input, body.contrast textarea, body.contrast select { background: #000; color: #fff; border-color: #fff; }
body.contrast .hint, body.contrast .tag { color: #fff; background: #000; }
body.contrast button, body.contrast .btn { background: #ffd23f !important; color: #000 !important; border-color: #fff !important; }
body.contrast .topbar { background: #000; border-bottom: 3px solid #fff; }
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.mic-btn { min-height: 52px; font-size: 1rem; margin-top: 6px; }
/* ---- helper banner ---- */
#helperBanner { background: #ffd23f; color: #111; padding: 12px 24px; font-size: 1.1rem; text-align: center; position: sticky; top: 88px; z-index: 9; }
#helperBanner button { min-height: 48px; font-size: 1rem; }
/* ---- messages ---- */
.badge { background: #e00; color: #fff; border-radius: 30px; padding: 2px 14px; font-size: 1rem; font-weight: 800; margin-left: 10px; }
.thread { width: 100%; justify-content: flex-start; background: #fff; color: #111; border-color: #ccc; font-size: 1.3rem; padding: 14px 18px; }
.thread .tname { flex: 1; text-align: left; }
.chat-log { max-height: 50vh; overflow-y: auto; border: 3px solid #ddd; border-radius: 18px; padding: 14px; background: #f7f7f7; }
.bubble { background: #fff; border: 2px solid #ccc; border-radius: 18px; padding: 12px 16px; margin: 10px 0; max-width: 85%; font-size: 1.2rem; }
.bubble.mine { margin-left: auto; background: #e3f6e8; border-color: #1b7f3b; }
.who-line { font-size: .9rem; font-weight: 700; color: #444; }
.hello-card { font-size: 1.5rem; font-weight: 800; text-align: center; padding: 18px; background: #fff7d6; border-radius: 14px; }
.hello-card span { display: block; font-size: 3.2rem; }
.link-btn { background: none !important; color: #444 !important; border: none; min-height: 40px; font-size: .9rem; text-decoration: underline; padding: 4px; }
.card-btn { font-size: 1.05rem; }
/* ---- calls ---- */
.call-view { position: fixed; inset: 0; z-index: 50; background: #0b2534; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.call-view h2 { font-size: 2rem; }
.videos { position: relative; width: min(960px, 95vw); }
#remoteV { width: 100%; max-height: 62vh; background: #000; border-radius: 16px; }
#localV { position: absolute; right: 12px; bottom: 12px; width: 28%; border: 3px solid #fff; border-radius: 12px; background: #333; }
.call-btns button { font-size: 1.4rem; min-height: 80px; min-width: 190px; }
.call-btns .hang { background: #c62828; border-color: #c62828; }
/* ---- stories, old photos ---- */
.tiles.small .tile { min-height: 110px; font-size: 1.15rem; }
.memory { border-left: 10px solid #b5470b; }
.old-canvas { max-width: 100%; max-height: 420px; border: 3px solid #ccc; border-radius: 12px; margin-top: 10px; }
.member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; width: 100%; }
/* ---- phones and tablets ---- */
@media (max-width: 700px) {
  html { font-size: 20px; }
  main { padding: 14px 12px 230px; }
  .topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .who { order: 3; width: 100%; font-size: 1rem; }
  .home-btn, .logout-btn { padding: 10px 14px; font-size: 1.1rem; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { min-height: 130px; font-size: 1.1rem; padding: 12px; }
  .tile .icon { font-size: 2.4rem; } .tile small { display: none; }
  button, .btn { width: 100%; margin: 6px 0; }
  .tile, #a11yBar button, .link-btn, .member-row button, .home-btn, .logout-btn { width: auto; margin: 0; }
  #a11yBar { gap: 4px; padding: 6px; } #a11yBar button { flex: 1 1 30%; font-size: .85rem; min-height: 50px; padding: 6px; }
  .photo-grid { grid-template-columns: 1fr; }
  .person { flex-direction: column; align-items: center; text-align: center; }
  .call-btns button { min-width: 0; width: 100%; }
  #helperBanner { top: 0; position: static; }
  input, select, textarea { font-size: 1.1rem; }
}
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr; } }

/* collapsible easy-reading bar */
#a11yBar { flex-direction: column; align-items: center; }
#a11yTools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#a11yTools[hidden] { display: none !important; }
#a11yBar .bar-switch { font-size: 1.15rem; min-height: 60px; padding: 8px 28px; background: #ffd23f; border-color: #ffd23f; color: #111; }
#a11yBar .bar-switch[aria-pressed=false] { background: #fff; border-color: #fff; }
main { padding-bottom: 120px; } body.bar-open main { padding-bottom: 260px; }
#message { bottom: 96px; } body.bar-open #message { bottom: 200px; }
.reading { outline: 5px solid #ff8c00 !important; outline-offset: 3px; background-color: rgba(255, 210, 63, .35) !important; }
@media (max-width: 700px) { #a11yTools button { flex: 1 1 30%; } #a11yBar .bar-switch { width: 100%; } main { padding-bottom: 110px; } body.bar-open main { padding-bottom: 290px; } }

/* family tree */
.big-action { font-size: 1.4rem; min-height: 80px; padding: 14px 34px; }
.tree-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tree-wrap { overflow: auto; border: 3px solid #ccc; border-radius: 18px; background: #f6f9fb; height: 62vh; cursor: grab; touch-action: pan-x pan-y; position: relative; }
.tree-wrap.dragging { cursor: grabbing; user-select: none; }
#treeInner { position: relative; }
.tree-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.ln { stroke: #0b4f6c; stroke-width: 4; fill: none; }
.ln.spouse { stroke: #a1124f; stroke-width: 5; } .ln.former, .ln.dashed { stroke-dasharray: 10 8; }
.lnlabel { font-size: 16px; fill: #444; font-weight: 700; }
.tcard { position: absolute; margin: 0; flex-direction: column; gap: 4px; background: #fff; color: #111; border: 3px solid #0b4f6c; border-radius: 18px; padding: 10px 6px; font-size: 1rem; overflow: hidden; justify-content: flex-start; }
.tcard.me { border-color: #ffb000; box-shadow: 0 0 0 5px #ffd23f; }
.tcard.gone { background: #f1eef6; border-color: #6b5b95; }
.tname { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.tsmall { font-size: .85rem; font-weight: 500; }
.trel { font-size: .9rem; color: #1b7f3b; font-weight: 800; }
.tmem { font-size: .85rem; color: #6b5b95; font-weight: 700; }
.tree-sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; width: min(760px, 96vw); max-height: 75vh; overflow: auto; z-index: 35; background: #fff; border: 4px solid #0b4f6c; border-radius: 22px; padding: 18px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.sheet-btns { display: flex; flex-wrap: wrap; }
body.contrast .tcard, body.contrast .tree-sheet, body.contrast .tree-wrap { background: #000; color: #fff; border-color: #fff; }
body.contrast .ln { stroke: #fff; } body.contrast .trel { color: #ffd23f; }
@media (max-width: 700px) { .tree-wrap { height: 55vh; } .tree-sheet { bottom: 70px; } .sheet-btns button { width: 100%; } }

/* enhance with AI */
.ai-btn { font-size: 1.15rem; min-height: 72px; }
.ai-status { font-size: 1.3rem; font-weight: 700; margin: 10px 0; }
.compare { position: relative; display: inline-block; max-width: 100%; border: 3px solid #ccc; border-radius: 14px; overflow: hidden; line-height: 0; }
.compare > img { max-width: 100%; max-height: 520px; display: block; }
.cmp-before { position: absolute; inset: 0; overflow: hidden; }
.cmp-before img { height: 100%; max-width: none; display: block; }
.cmp-line { position: absolute; top: 0; bottom: 0; width: 4px; background: #ffd23f; transform: translateX(-2px); }
.cmp-tag { position: absolute; top: 8px; background: rgba(0,0,0,.7); color: #fff; padding: 4px 12px; border-radius: 8px; font-size: 1rem; line-height: 1.4; }
.cmp-tag.left { left: 8px; } .cmp-tag.right { right: 8px; }