/* Wide, top-to-bottom tree and a people list that opens from the header. */
.app-shell{display:block}
.main-area{width:100%;min-height:100vh}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:18px;height:58px;padding:0 20px}
.top-brand{border:0;background:transparent;text-align:left;padding:0;justify-self:start;gap:10px;color:var(--ink)}
.top-brand .brand-mark{width:35px;height:35px}
.header-navigation{display:flex;align-items:center;justify-self:center;gap:4px;min-width:0}
.header-stats{display:flex;align-items:center;gap:12px;margin-left:11px;padding-left:14px;border-left:1px solid var(--line);white-space:nowrap;color:#7d8b7d;font-size:10px}
.header-stats strong{color:var(--ink);font-size:14px;margin-right:2px}
.people-toggle{display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--green);font-weight:700;font-size:12px}
.people-toggle:hover,.people-toggle[aria-expanded="true"]{background:#e8eee8;border-color:#d9e5d7}
.people-toggle .count{margin:0}
.toggle-chevron{font-size:18px;line-height:1;margin-left:3px;transition:transform .2s}
.people-toggle[aria-expanded="true"] .toggle-chevron{transform:rotate(180deg)}
.top-actions{justify-self:end}
.people-panel{background:#fffdf8;border-bottom:1px solid var(--line);box-shadow:0 12px 25px rgba(34,61,41,.07);padding:28px 40px 24px}
.people-panel-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:16px}
.people-panel-head h2{font-family:'Playfair Display',serif;font-size:27px;font-weight:500;margin:0}
.people-panel-actions{display:flex;align-items:center;gap:12px}
.people-panel-actions .search{width:240px}
.people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px;max-height:280px;overflow:auto;margin:0;padding:2px}
.person-list-item{min-height:49px}
.person-list-item strong{max-width:190px}
.people-panel-note{font-size:11px;color:#a2aa9e;margin:15px 2px 0}
.page-content{max-width:none;margin:0;padding:12px 20px 35px}
.tree-toolbar{justify-content:flex-end;margin-bottom:8px;min-height:34px}
.tree-viewport{width:100%;height:calc(100vh - 112px);min-height:590px}
.tree-inner{min-width:0;width:100%;transform-origin:0 0}
.tree-grid{width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:76px;padding:44px 50px 70px}
.generation{width:100%;height:155px;min-width:0;position:relative}
.generation-label{position:absolute;top:0;left:0;width:100%;text-align:center;margin:0}
.generation .person-card{position:absolute;top:31px;width:190px;min-height:124px}
.tree-lines path{stroke-linecap:round;stroke-linejoin:round}
.person-card{cursor:grab;touch-action:pan-y}
.person-card.is-dragging{cursor:grabbing;z-index:3;opacity:.92;box-shadow:0 16px 35px rgba(25,54,34,.2)}
.tree-legend{justify-content:center}
.generation-warning{border:1px solid #e2c9ad;background:#fff5e8;color:#855b39;border-radius:9px;padding:11px 14px;margin-bottom:12px;font-size:12px;line-height:1.5}
.generation-warning button{border:0;background:#e8d0b5;color:#68472b;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;margin-left:6px}
.relation-card .reverse-relation{margin-left:auto;color:var(--green);font-size:10px;font-weight:700;white-space:nowrap;padding:5px 2px}
.relation-card .remove-relation{margin-left:2px}
.relation-hint{font-size:11px!important;line-height:1.5!important;color:#879588!important;margin:0 0 13px!important}
.photo-actions{flex-wrap:wrap;align-items:center}
.photo-actions [data-action="edit-photo"]{flex:0 0 100%;text-align:left;font-size:11px;padding:5px 0 3px}
.photo-actions [data-action="edit-shared"]{flex:0 0 100%;text-align:left;font-size:11px;padding:5px 0 3px}
.shared-drawer-title{padding:5px 0 22px}.shared-drawer-title h2{font-family:'Playfair Display',serif;font-weight:500;font-size:29px;margin:0 0 8px}.shared-drawer-title p{font-size:12px;line-height:1.5;color:#7b8d7f;margin:0}.shared-photo-label{display:inline-block;margin:-2px 0 10px;padding:4px 7px;border-radius:5px;background:#e9efe8;color:#42684a;font-size:10px;font-weight:700}.shared-photo-people{font-size:11px;color:#607664;line-height:1.5;margin:10px 0 0}.shared-gallery-shortcut{width:100%;margin-top:4px}
#modal:has(#sharedTagForm){width:min(650px,100%)}.tag-preview{position:relative;width:100%;margin-top:12px;border-radius:8px;overflow:hidden;background:#eff0e9;cursor:crosshair}.tag-preview img{display:block;width:100%;height:auto}.tag-markers{position:absolute;inset:0;pointer-events:none}.tag-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:29px;height:29px;border:2px solid white;border-radius:50%;background:#2f6347;color:white;font-size:12px;font-weight:700;box-shadow:0 2px 8px #253b2f88}.tag-list{margin-top:10px}.tag-person-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0;color:#405945;font-size:12px}.tag-person-row b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;background:#e4ece3}.tag-person-row button{border:0;background:transparent;color:#a65d55;font-size:19px;cursor:pointer}
@media(max-width:980px){.topbar{grid-template-columns:auto 1fr auto;padding:0 22px}.header-navigation{justify-self:start}.top-brand{padding:0}.top-brand .brand-mark{width:32px;height:32px}.top-brand strong{font-size:17px}.top-brand span{display:none}.people-panel{padding:24px 22px}.page-content{padding:31px 22px 50px}.tree-grid{padding:40px 26px 65px;gap:75px}}
@media(max-width:680px){.topbar{display:flex;justify-content:space-between;gap:5px;padding:0 12px}.top-brand strong{display:none}.top-brand .brand-mark{width:31px;height:31px}.people-toggle{padding:7px 8px;gap:5px}.people-toggle .count{display:none}.people-toggle .toggle-chevron{display:none}.top-actions{display:flex;gap:0;min-width:0}.top-actions .primary-button{font-size:0;padding:9px 10px}.top-actions .primary-button::before{content:'▤';font-size:16px}.people-panel{padding:20px 15px}.people-panel-head{display:block}.people-panel-head h2{font-size:24px}.people-panel-actions{margin-top:15px}.people-panel-actions .search{flex:1;min-width:0;width:auto}.people-panel-actions .primary-button{font-size:0;min-width:38px;height:38px;padding:0}.people-panel-actions .primary-button::before{content:'＋';font-size:19px}.people-list{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}.page-content{padding:24px 15px}.tree-viewport{height:calc(100vh - 300px);min-height:550px}.tree-grid{padding:35px 12px 60px;gap:67px}.generation{gap:8px}.generation-label{font-size:9px}.person-card{width:148px;flex-basis:148px;min-height:82px;padding:10px 7px}.person-card .avatar{width:39px;height:39px;font-size:14px}.person-card strong{font-size:11px}.person-card small{font-size:9px}.tree-controls{flex-wrap:wrap;justify-content:flex-start}.tree-controls label{width:100%;margin-right:0}.tree-legend{flex-wrap:wrap;gap:8px 13px}}
@media(max-width:980px){.top-actions #addPersonTop::before{content:'＋';font-size:18px}.page-content{padding:11px 16px 30px}.tree-viewport{height:calc(100vh - 115px)}}
@media(max-width:680px){.generation{height:145px}.generation .person-card{width:148px;min-height:120px;top:25px}}
@media(max-width:820px){.topbar{display:grid;grid-template-columns:auto 1fr;grid-template-rows:38px 30px;height:72px;gap:0 8px;padding:2px 12px}.top-brand{grid-column:1;grid-row:1}.top-actions{grid-column:2;grid-row:1;justify-self:end}.header-navigation{grid-column:1/-1;grid-row:2;justify-self:center}.header-stats{gap:8px;margin-left:5px;padding-left:8px}.header-stats strong{font-size:12px}.tree-viewport{height:calc(100vh - 128px)}}
@media(max-width:680px){.topbar{display:grid;justify-content:initial;gap:0 8px;padding:2px 10px}.header-navigation{gap:0}.header-stats{font-size:9px;gap:6px}.header-stats strong{font-size:11px}.people-toggle{padding:4px 5px}.top-actions #addPersonTop{display:inline-block;font-size:0}.page-content{padding:9px 10px 25px}.tree-toolbar{flex-direction:row;justify-content:flex-end;align-items:center;min-height:36px}.tree-controls{width:auto;justify-content:flex-end}.tree-controls label{width:auto}.tree-viewport{height:calc(100vh - 129px);min-height:490px}}

/* The photo is the main action on a tree card; the text opens the profile. */
.generation{height:252px}
.generation .person-card{height:221px;min-height:0;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;cursor:default}
.person-card .tree-photo-trigger{position:relative;width:100%;height:151px;flex:0 0 151px;display:block;border:0;border-radius:0;padding:0;background:#e4e9e1;color:var(--green);cursor:zoom-in}
.person-card .tree-photo-trigger .avatar{width:100%;height:100%;border-radius:0;font-size:36px}
.person-card .tree-photo-trigger img{object-fit:cover}
.person-card .tree-photo-trigger:hover img{filter:brightness(.94)}
.tree-photo-count{position:absolute;right:8px;bottom:8px;border-radius:20px;padding:4px 8px;background:rgba(31,55,40,.8);color:white;font-size:10px;font-weight:700;line-height:1}
.person-card .tree-card-summary{width:100%;min-height:0;flex:1;border:0;background:#fffefb;padding:8px 11px;text-align:left;color:var(--ink);cursor:grab}
.person-card .tree-card-summary strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:12px;line-height:1.16}
.person-card .tree-card-summary small{margin-top:4px;font-size:10px}
.person-card .tree-photo-trigger:focus-visible,.person-card .tree-card-summary:focus-visible{outline:3px solid #649475;outline-offset:-3px}
.person-card.selected:before{z-index:2}

#modalWrap:has(#treeGallery){padding:12px}
#modal:has(#treeGallery){width:min(1100px,100%);height:min(900px,calc(100vh - 24px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:hidden}
.tree-gallery{color:var(--ink);height:100%;min-height:0;display:flex;flex-direction:column}
.gallery-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 22px 10px}
.gallery-header>div{min-width:0}
.gallery-header small{display:block;color:#849485;font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:4px}
.gallery-header h2{font-family:'Playfair Display',serif;font-size:25px;font-weight:500;margin:0}
.gallery-photo-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:7px;overflow-wrap:anywhere}
.gallery-photo-title strong{font-family:'Playfair Display',serif;font-size:17px;font-weight:600}
.gallery-photo-title span{font-size:12px;color:#7d8d7e}
.gallery-close{border:0;background:transparent;color:#697e6c;font-size:29px;line-height:1;width:36px;height:36px}
.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px 10px;color:#7d8c7f;font-size:12px}
.gallery-toolbar label{display:flex;align-items:center;gap:8px;min-width:0}
.gallery-toolbar select{max-width:min(520px,65vw);min-width:0;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);padding:7px;font-size:12px}
.gallery-variants{display:flex;gap:7px;padding:0 22px 12px}
.gallery-variants button{border:1px solid #d8e2d8;border-radius:20px;background:white;color:#547159;padding:7px 12px;font-size:11px;font-weight:700}
.gallery-variants button.active{background:var(--green);border-color:var(--green);color:white}
.gallery-stage{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px;padding:12px 20px;background:#eeeee8;overflow:hidden}
.gallery-stage.compare{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-image{position:relative;width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden}
.gallery-image img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.gallery-image figcaption{position:absolute;top:8px;left:8px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.88);font-size:11px;color:#526b56}
.gallery-empty{flex:1 1 0;min-height:0;display:grid;place-items:center;padding:35px;text-align:center;background:#f2f3ed;color:#869387;font-size:14px}
.gallery-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 22px}
.gallery-footer button{border:1px solid #d4e1d4;border-radius:7px;background:white;color:var(--green);padding:9px 10px;font-size:11px;font-weight:700}
.gallery-profile{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding:11px 22px 16px}
.gallery-profile button{border:0;background:transparent;color:var(--green);font-size:12px;font-weight:700}
@media(max-width:680px){.generation{height:224px}.generation .person-card{height:199px;top:25px}.person-card .tree-photo-trigger{height:130px;flex-basis:130px}.person-card .tree-card-summary{padding:7px 9px}.person-card .tree-card-summary strong{font-size:11px}.gallery-header{padding:13px 14px 10px}.gallery-header h2{font-size:20px}.gallery-toolbar{padding:0 14px 9px}.gallery-toolbar select{max-width:60vw}.gallery-variants{padding:0 14px 10px}.gallery-stage{height:54vh;min-height:250px;padding:7px}.gallery-stage.compare{height:auto;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(220px,36vh));gap:8px}.gallery-footer{grid-template-columns:70px minmax(0,1fr) 70px;gap:5px;padding:10px}.gallery-footer button{padding:8px 3px;font-size:10px}.gallery-footer strong{font-size:13px}.gallery-profile{padding:9px 14px 13px}}

.profile-photo-trigger{border:0;background:transparent;padding:0;flex-shrink:0;cursor:zoom-in;border-radius:50%}
.profile-photo-trigger:hover img{filter:brightness(.92)}
.profile-photo-trigger:focus-visible,.photo-slot-open:focus-visible{outline:3px solid #649475;outline-offset:3px}
.photo-slot-open{border:0;padding:0;width:100%;cursor:zoom-in;text-align:left}
.photo-slot-open:hover img{filter:brightness(.92)}

/* Larger type on the tree and its main controls. */
.generation{height:272px}
.generation-label{font-size:13px;letter-spacing:.08em}
.generation .person-card{height:242px}
.person-card .tree-photo-trigger{height:150px;flex-basis:150px}
.tree-photo-count{font-size:12px;padding:6px 10px}
.person-card .tree-card-summary{padding:8px 12px}
.person-card .tree-card-summary strong{font-size:15.5px;line-height:1.14;-webkit-line-clamp:3;line-clamp:3;overflow-wrap:anywhere}
.person-card .tree-card-summary small{font-size:12.5px;line-height:1.25;margin-top:3px}
.tree-controls,.tree-controls select{font-size:13px}
.tree-controls .icon-button{width:34px;height:34px;font-size:18px}
.tree-legend{font-size:12px}
.header-stats{font-size:12px}
.header-stats strong{font-size:16px}
.people-toggle{font-size:13px}
.top-actions .text-button,.top-actions .primary-button{font-size:12px}
.person-list-item strong{font-size:14px;max-width:none;white-space:normal}
.person-list-item small{font-size:11px}
.tip-card strong{font-size:17px}
.tip-card p,.tip-card button{font-size:12px}
@media(max-width:820px){.header-stats{font-size:11px}.header-stats strong{font-size:14px}}
@media(max-width:680px){
  .generation{height:248px}
  .generation-label{font-size:12px}
  .generation .person-card{height:218px}
  .person-card .tree-photo-trigger{height:128px;flex-basis:128px}
  .person-card .tree-card-summary{padding:8px 9px}
  .person-card .tree-card-summary strong{font-size:14px;line-height:1.14}
  .person-card .tree-card-summary small{font-size:11.5px}
  .header-stats{font-size:10.5px}
  .header-stats strong{font-size:12px}
  .people-toggle{font-size:12px}
}

@media(max-width:680px){
  #modalWrap:has(#treeGallery){padding:6px}
  #modal:has(#treeGallery){height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
  .gallery-header h2{line-height:1.12}
  .gallery-photo-title{margin-top:5px}
  .gallery-photo-title strong{font-size:15px}
  .gallery-stage,.gallery-stage.compare{height:auto;min-height:0;padding:7px}
  .gallery-stage.compare{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
  .gallery-footer{padding:8px 12px}
}