/* public/css/apps/fmt.css -- Family Tree app (saas/familytree), css prefix fmt (2026-11-02). Phone first; light and dark. No frameworks. */
:root { --fmt-bg: #f4f1ea; --fmt-card: #ffffff; --fmt-ink: #232a26; --fmt-mute: #6b756f; --fmt-line: #d9d4c7; --fmt-brand: #1f5e46; --fmt-brand-2: #2f8a66; --fmt-male: #3a78c2; --fmt-female: #c2527e; --fmt-unk: #7b8a82; --fmt-danger: #b42318; --fmt-focus: #e0a526; }
@media (prefers-color-scheme: dark) { :root { --fmt-bg: #15201b; --fmt-card: #1d2b25; --fmt-ink: #e8efe9; --fmt-mute: #9db0a5; --fmt-line: #33463d; --fmt-brand: #4fb68c; --fmt-brand-2: #6fd0a6; --fmt-male: #6aa6ec; --fmt-female: #e581a6; --fmt-unk: #8fa399; --fmt-focus: #f0c04e; } }
.fmt-app *, .fmt-app *::before, .fmt-app *::after { box-sizing: border-box; }
html:has(body.fmt-app), body.fmt-app { margin: 0; height: 100%; }
body.fmt-app { font-family: Agdasima, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; background: var(--fmt-bg); color: var(--fmt-ink); display: flex; flex-direction: column; overflow: hidden; }
.fmt-app button, .fmt-app input, .fmt-app select, .fmt-app textarea { font: inherit; color: inherit; }
.fmt-app input, .fmt-app select, .fmt-app textarea { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; }
.fmt-app [hidden] { display: none !important; }

.fmt-top { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top)); background: var(--fmt-brand); color: #fff; }
.fmt-logo { display: flex; align-items: center; flex: none; }
.fmt-title { flex: 1; min-width: 0; line-height: 1.05; display: flex; flex-direction: column; }
.fmt-title strong { letter-spacing: .08em; font-size: 1.05rem; }
.fmt-title small { opacity: .8; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmt-top-actions { display: flex; align-items: center; gap: .4rem; }
.fmt-select { max-width: 150px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: .35rem .5rem; }
.fmt-select option { color: #000; }
.fmt-iconbtn { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fmt-line); border-radius: 12px; background: var(--fmt-card); color: var(--fmt-ink); cursor: pointer; text-decoration: none; }
.fmt-top .fmt-iconbtn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.fmt-iconbtn:hover { border-color: var(--fmt-brand); }
.fmt-iconbtn.fmt-on { background: var(--fmt-brand); color: #fff; border-color: var(--fmt-brand); }

.fmt-tabs { display: flex; background: var(--fmt-card); border-bottom: 1px solid var(--fmt-line); }
.fmt-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; border: 0; background: none; color: var(--fmt-mute); cursor: pointer; border-bottom: 3px solid transparent; font-size: .95rem; }
.fmt-tab.fmt-on { color: var(--fmt-brand); border-bottom-color: var(--fmt-brand); font-weight: 700; }
.fmt-tab i { font-size: 1.15rem; }
@media (max-width: 640px) { .fmt-tabs { order: 3; border-bottom: 0; border-top: 1px solid var(--fmt-line); padding-bottom: env(safe-area-inset-bottom); } .fmt-main { order: 2; } }

.fmt-main { flex: 1; min-height: 0; position: relative; }
.fmt-pane { display: none; position: absolute; inset: 0; overflow: auto; padding: .8rem; }
.fmt-pane.fmt-on { display: block; }
#pane-tree { padding: 0; display: none; flex-direction: column; overflow: hidden; }
#pane-tree.fmt-on { display: flex; }

.fmt-toolbar { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; background: var(--fmt-card); border-bottom: 1px solid var(--fmt-line); flex-wrap: wrap; }
.fmt-depth { display: inline-flex; align-items: center; gap: .25rem; color: var(--fmt-mute); }
.fmt-depth select { border: 1px solid var(--fmt-line); border-radius: 10px; background: var(--fmt-card); padding: .3rem .3rem; }
.fmt-hint { margin-left: auto; color: var(--fmt-mute); font-size: .85rem; }
.fmt-canvas { position: relative; flex: 1; min-height: 0; background: radial-gradient(circle at 1px 1px, var(--fmt-line) 1px, transparent 0) 0 0 / 22px 22px; touch-action: none; }
#ftSvg { width: 100%; height: 100%; display: block; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
#ftSvg.fmt-panning { cursor: grabbing; }
.fmt-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1.5rem; color: var(--fmt-mute); }
.fmt-empty i { font-size: 3rem; color: var(--fmt-brand); }

/* SVG parts */
.fmt-edge { stroke: var(--fmt-mute); stroke-width: 2; fill: none; }
.fmt-edge-alt { stroke-dasharray: 6 5; }
.fmt-marriage { stroke: var(--fmt-focus); stroke-width: 3; fill: none; }
.fmt-node { cursor: pointer; }
.fmt-node rect.fmt-box { fill: var(--fmt-card); stroke: var(--fmt-line); stroke-width: 1.5; }
.fmt-node:hover rect.fmt-box { stroke: var(--fmt-brand); }
.fmt-node.fmt-focus rect.fmt-box { stroke: var(--fmt-focus); stroke-width: 3; }
.fmt-node.fmt-sel rect.fmt-box { stroke: var(--fmt-brand); stroke-width: 3; }
.fmt-node .fmt-stripe-M { fill: var(--fmt-male); } .fmt-node .fmt-stripe-F { fill: var(--fmt-female); } .fmt-node .fmt-stripe-U { fill: var(--fmt-unk); }
.fmt-node .fmt-ini { fill: #fff; font-weight: 700; font-size: 17px; }
.fmt-node .fmt-name { fill: var(--fmt-ink); font-size: 15px; font-weight: 700; }
.fmt-node .fmt-dates { fill: var(--fmt-mute); font-size: 13px; }
.fmt-node .fmt-plus circle { fill: var(--fmt-brand); } .fmt-node .fmt-plus text { fill: #fff; font-size: 17px; font-weight: 700; }
.fmt-node .fmt-plus { opacity: .0; } .fmt-node:hover .fmt-plus, .fmt-node.fmt-sel .fmt-plus, .fmt-touch .fmt-node .fmt-plus { opacity: 1; }
.fmt-node.fmt-dead .fmt-name { font-weight: 600; }

/* Forms and lists */
.fmt-btn { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 12px; background: var(--fmt-brand); color: #fff; padding: .55rem .9rem; cursor: pointer; font-weight: 700; text-decoration: none; }
.fmt-btn-ghost { background: transparent; color: var(--fmt-brand); border: 1px solid var(--fmt-brand); }
.fmt-btn-danger { background: var(--fmt-danger); }
.fmt-bar { display: flex; gap: .5rem; margin-bottom: .6rem; align-items: center; }
.fmt-bar input[type=search] { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--fmt-line); border-radius: 12px; background: var(--fmt-card); }
.fmt-count, .fmt-muted { color: var(--fmt-mute); font-size: .92rem; margin: .2rem 0 .6rem; }
.fmt-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fmt-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; background: var(--fmt-card); border: 1px solid var(--fmt-line); border-radius: 14px; cursor: pointer; text-align: left; width: 100%; }
.fmt-row:hover { border-color: var(--fmt-brand); }
.fmt-row b { display: block; } .fmt-row small { color: var(--fmt-mute); }
.fmt-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--fmt-unk); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
.fmt-av.fmt-g-M { background: var(--fmt-male); } .fmt-av.fmt-g-F { background: var(--fmt-female); }
.fmt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmt-card-box { background: var(--fmt-card); border: 1px solid var(--fmt-line); border-radius: 16px; padding: .9rem 1rem; margin-bottom: .8rem; max-width: 760px; }
.fmt-card-box h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.fmt-app label { display: block; margin: .5rem 0; color: var(--fmt-mute); font-size: .92rem; }
.fmt-app label input, .fmt-app label select, .fmt-app label textarea { display: block; width: 100%; margin-top: .2rem; padding: .5rem .6rem; border: 1px solid var(--fmt-line); border-radius: 10px; background: var(--fmt-bg); color: var(--fmt-ink); }
.fmt-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fmt-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.fmt-inline { display: flex; gap: .5rem; } .fmt-inline input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--fmt-line); border-radius: 10px; background: var(--fmt-bg); }
.fmt-trees { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; }
.fmt-trees li { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--fmt-line); border-radius: 12px; }
.fmt-trees li span { flex: 1; min-width: 0; } .fmt-trees li.fmt-on { border-color: var(--fmt-brand); }
.fmt-seg { display: inline-flex; border: 1px solid var(--fmt-line); border-radius: 12px; overflow: hidden; }
.fmt-seg button { border: 0; background: var(--fmt-card); padding: .5rem .8rem; cursor: pointer; } .fmt-seg .fmt-on { background: var(--fmt-brand); color: #fff; }
.fmt-gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fmt-gitem { position: relative; background: var(--fmt-card); border: 1px solid var(--fmt-line); border-radius: 14px; overflow: hidden; }
.fmt-gitem a.fmt-thumb { display: flex; align-items: center; justify-content: center; height: 130px; background: var(--fmt-bg); color: var(--fmt-brand); font-size: 2.4rem; text-decoration: none; }
.fmt-gitem a.fmt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmt-gitem div { padding: .4rem .55rem; font-size: .9rem; } .fmt-gitem small { color: var(--fmt-mute); display: block; }
.fmt-gitem button { position: absolute; top: 6px; right: 6px; }

/* Drawer and modal */
.fmt-drawer { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(0,0,0,.35); }
.fmt-drawer-card { width: min(420px, 100%); height: 100%; overflow: auto; background: var(--fmt-card); padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); box-shadow: -6px 0 24px rgba(0,0,0,.25); }
.fmt-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.fmt-head .fmt-av { width: 72px; height: 72px; font-size: 1.6rem; }
.fmt-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.1; } .fmt-head small { color: var(--fmt-mute); }
.fmt-sec { margin: .9rem 0 .3rem; font-size: .8rem; letter-spacing: .08em; color: var(--fmt-mute); text-transform: uppercase; }
.fmt-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--fmt-line); border-radius: 999px; padding: .2rem .65rem .2rem .25rem; margin: 0 .3rem .3rem 0; background: var(--fmt-bg); cursor: pointer; }
.fmt-chip .fmt-av { width: 26px; height: 26px; font-size: .7rem; }
.fmt-bio { white-space: pre-wrap; }
.fmt-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: .8rem; background: rgba(0,0,0,.45); }
.fmt-modal-card { width: min(520px, 100%); max-height: 100%; overflow: auto; background: var(--fmt-card); border-radius: 18px; padding: 1rem 1.1rem; }
.fmt-modal-card h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.fmt-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .6rem 0; }
.fmt-kinds button { border: 1px solid var(--fmt-line); background: var(--fmt-bg); border-radius: 12px; padding: .7rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.fmt-kinds button.fmt-on { border-color: var(--fmt-brand); background: var(--fmt-card); box-shadow: 0 0 0 2px var(--fmt-brand) inset; }
.fmt-err { color: var(--fmt-danger); margin: .4rem 0 0; }
.fmt-menu { position: fixed; z-index: 50; background: var(--fmt-card); border: 1px solid var(--fmt-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); padding: .3rem; min-width: 190px; }
.fmt-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: none; padding: .55rem .6rem; border-radius: 8px; cursor: pointer; text-align: left; }
.fmt-menu button:hover { background: var(--fmt-bg); }
.fmt-toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60; background: #222; color: #fff; padding: .55rem 1rem; border-radius: 999px; max-width: 90%; }

/* Landing mock (index.php) */
.fmt-iconbtn.fmt-small { width: 30px; height: 30px; border-radius: 9px; font-size: .8rem; }
.fmt-iconbtn.fmt-danger:hover { border-color: var(--fmt-danger); color: var(--fmt-danger); }
@media (max-width: 640px) {
  .fmt-title small, .fmt-hint { display: none; }
  .fmt-title strong { white-space: nowrap; }
  .fmt-select { max-width: 52vw; }
  .fmt-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .fmt-toolbar > * { flex: none; }
}

/* Date control + the two surnames (2026-11-02) */
.fmt-lbl { display: block; margin: .5rem 0; color: var(--fmt-mute); font-size: .92rem; }
.fmt-datewrap { display: flex; gap: .4rem; align-items: center; margin-top: .2rem; }
.fmt-datewrap input { flex: 1; min-width: 0; margin: 0; padding: .5rem .6rem; border: 1px solid var(--fmt-line); border-radius: 10px; background: var(--fmt-bg); color: var(--fmt-ink); }
.fmt-datewrap .fmt-iconbtn { flex: none; }
.fmt-logo img { display: block; border-radius: 10px; }
@media (max-width: 480px) { .fmt-two { grid-template-columns: 1fr; } .fmt-two .fmt-two { grid-template-columns: 1fr 1fr; } }

/* Ended union (dashed grey marriage line) and the duplicate suggestions (2026-11-02) */
.fmt-marriage-end { stroke: var(--fmt-mute); stroke-dasharray: 5 4; }
.fmt-dup { border: 1px solid var(--fmt-focus); background: rgba(224, 165, 38, .1); border-radius: 12px; padding: .5rem .7rem; margin: .6rem 0; }
.fmt-dup-title { font-weight: 700; margin-bottom: .3rem; }
.fmt-dup-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--fmt-line); }
.fmt-dup-row small { display: block; color: var(--fmt-mute); }
.fmt-small-btn { padding: .3rem .6rem; font-size: .85rem; flex: none; }

/* Landing mock = inline svg of a mini tree (fixed light colours) */
.fmt-minitree { width: 100%; max-width: 520px; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(31, 94, 70, .25)); }


/* Invitation page + sharing (2026-11-02) */
.fmt-join { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: auto; }
.fmt-join .fmt-card-box { max-width: 460px; margin: 0; text-align: center; }
.fmt-join h1 { font-size: 1.4rem; margin: .4rem 0; }
.fmt-join-logo { border-radius: 16px; }
.fmt-join-list { list-style: none; padding: 0; margin: .8rem 0; text-align: left; display: grid; gap: .5rem; }
.fmt-join-list i { color: var(--fmt-brand); width: 1.4em; }
.fmt-join .fmt-actions { justify-content: center; }
.fmt-trees li small { font-size: .8rem; }
.fmt-chzr { display: inline-flex; flex: none; color: #fff; text-decoration: none; }
/* Family lines: one colour per family (--fam set on the group), thicker for the selected person's families, faded for the rest */
.fmt-fam { transition: opacity .15s; }
.fmt-fam .fmt-edge, .fmt-fam .fmt-marriage { stroke: var(--fam, var(--fmt-mute)); stroke-width: 2.5; stroke-linejoin: round; }
.fmt-fam .fmt-marriage-end { stroke: var(--fmt-mute); stroke-dasharray: 5 4; }
.fmt-fam.fmt-hl .fmt-edge, .fmt-fam.fmt-hl .fmt-marriage { stroke-width: 4.5; }
.fmt-fam.fmt-dim { opacity: .2; }
/* Fold button under a card */
.fmt-node .fmt-tog { cursor: pointer; opacity: 0; }
.fmt-node:hover .fmt-tog, .fmt-node.fmt-sel .fmt-tog, .fmt-touch .fmt-node .fmt-tog, .fmt-node .fmt-tog.fmt-folded { opacity: 1; }
.fmt-node .fmt-tog rect { fill: var(--fmt-card); stroke: var(--fmt-brand); stroke-width: 2; }
.fmt-node .fmt-tog text { fill: var(--fmt-brand); font-size: 14px; font-weight: 700; pointer-events: none; }
.fmt-node .fmt-tog.fmt-folded rect { fill: var(--fmt-brand); }
.fmt-node .fmt-tog.fmt-folded text { fill: #fff; }

/* Search box over the tree (2026-11-03): its results float over the canvas. */
.fmt-tsearch { position: relative; display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; background: var(--fmt-card); border-bottom: 1px solid var(--fmt-line); z-index: 6; }
.fmt-tsearch > i { color: var(--fmt-mute); }
.fmt-tsearch input[type=search] { flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--fmt-line); border-radius: 12px; background: var(--fmt-bg, #fff); font-family: inherit; }
.fmt-tres { position: absolute; left: .6rem; right: .6rem; top: calc(100% - 2px); max-height: 50vh; overflow-y: auto; background: var(--fmt-card); border: 1px solid var(--fmt-line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: .25rem; }
.fmt-tres .fmt-row { width: 100%; }

/* Deceased marker (2026-11-03): a small cross badge in the corner of the card. */
.fmt-node .fmt-dagger circle { fill: var(--fmt-mute); opacity: .85; }
.fmt-node .fmt-dagger text { fill: #fff; font-size: 13px; font-weight: 700; }

/* Contact block of the person form (2026-11-03). */
.fmt-contact { display: grid; gap: .4rem; margin: .4rem 0; padding: .6rem .7rem; border: 1px dashed var(--fmt-line); border-radius: 12px; }
.fmt-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.fmt-check input { width: auto; }