:root{--red:#8b1e1e;--line:#c8c8c8;--text:#444;--muted:#777;--bg:#fff;--light-red:#fff4f4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif}
.topbar{background:#fff;border-bottom:1px solid #ddd;padding:14px 18px;display:flex;align-items:center;position:sticky;top:0;z-index:20}.brand{font-size:20px;font-weight:700;color:var(--red)}.btn-view{margin-left:auto;background:#6b4bb6;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-save{background:#168a4a;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-add{background:#b12b2b;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-save:hover,.btn-add:hover,.btn-view:hover{filter:brightness(.94)}
.page{width:90vw;max-width:1450px;margin:0 auto;padding:18px 10px 50px}.intro h2{font-size:21px;margin:0 0 8px}.intro p{line-height:1.6;text-align:justify}.notice{text-align:center;color:#b12b2b;font-size:12px}.howto{background:#fff8f8;border:1px solid #efcaca;border-left:4px solid var(--red);padding:10px 12px;margin:12px 0 14px;line-height:1.6;font-size:14px}
.search-area{background:#fff4f4;border:2px solid var(--red);border-radius:8px;padding:10px 12px;margin:0 0 12px;position:sticky;top:59px;z-index:15;box-shadow:0 2px 8px rgba(0,0,0,.08)}.search-area label{display:block;font-size:13px;font-weight:700;color:var(--red);margin-bottom:5px}.search-area input{display:block;width:100%;padding:11px 13px;border:1px solid #c99999;border-radius:6px;background:#fff;font-size:14px;outline:none}.search-area input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(139,30,30,.12)}
#tree{list-style:none;margin:0;padding:10px 8px 35px;text-align:left;overflow-x:auto}.family{list-style:none;position:relative;margin:0;padding:0 0 0 34px}.family.root{padding-left:0}.children{position:relative;margin:0;padding:8px 0 4px 28px;list-style:none}.children:before{content:"";position:absolute;left:0;top:0;bottom:22px;width:1px;background:var(--line)}.child-family:before{content:"";position:absolute;left:0;top:25px;width:28px;height:1px;background:var(--line)}.child-family:only-child:before{width:18px}
.card{position:relative;z-index:2;display:inline-block;width:560px;min-width:560px;max-width:560px;box-sizing:border-box;margin:5px 0;padding:9px 12px;border:1px solid #ddd;border-radius:7px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.06);cursor:pointer;transition:.15s}.card:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(0,0,0,.11)}.card.root-card{min-width:560px;max-width:560px;border:2px solid var(--red);box-shadow:0 3px 12px rgba(0,0,0,.1)}.card.selected{border-color:var(--red);background:#fff8f8}.couple{display:flex;align-items:stretch;justify-content:center}.person{flex:1;padding:0 14px;text-align:left}.person+.person{border-left:1px solid #ddd}.single{text-align:left}.name{font-weight:700;font-size:14px;line-height:1.35;margin-bottom:6px;cursor:pointer}.detail{font-size:11px;line-height:1.45;color:#555}.detail b{font-weight:700;color:#333}.dod{color:#7a2f8f;font-weight:700}.parents{margin-top:7px;padding-top:6px;border-top:1px solid #eee;font-size:10.5px;line-height:1.45;color:#2f6f8f;overflow-wrap:anywhere}.marriage{margin-top:7px;padding:6px 8px;text-align:center;font-size:12px;color:var(--red);background:#fff3f3;border:1px solid #f1d4d4;border-radius:5px}.toggle{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:17px;line-height:24px;text-align:center;z-index:4}.has-toggle{padding-left:46px}
.search-results{padding:15px}.result{display:block;padding:11px 13px;border-bottom:1px solid #eee;cursor:pointer}.result:hover{background:#faf3f3}.result:hover{background:#faf3f3}
.panel{background:#fff;border:1px solid #ddd;border-radius:7px;padding:18px;margin-bottom:18px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.field input,.field select{width:100%;padding:9px;border:1px solid #ccc;border-radius:5px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.searchable{position:relative}.options{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #ccc;max-height:180px;overflow:auto;z-index:30}.options div{padding:8px;font-size:13px;cursor:pointer}.options div:hover{background:#f5eaea}
.table-search{background:#fff4f4;border:2px solid var(--red);border-radius:8px;padding:10px 12px;margin:0 0 12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.table-search label{display:block;font-size:13px;font-weight:700;color:var(--red);margin-bottom:5px}.table-search input{width:100%;padding:11px 13px;border:1px solid #c99999;border-radius:6px;font-size:14px;outline:none}.table-search input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(139,30,30,.12)}.table-wrap{overflow:auto;max-height:65vh;border:1px solid #ddd}.people-table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}.people-table th,.people-table td{padding:9px 8px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}.people-table th{background:#f5f5f5;position:sticky;top:0;z-index:3;box-shadow:0 1px 0 #ddd}.people-table td:nth-child(1){font-weight:700}.people-table .btn-edit{background:#5b4bb7;color:#fff;border:0;border-radius:5px;padding:7px 10px;font-weight:700}.people-table .btn-delete{background:#c43d3d;color:#fff;border:0;border-radius:5px;padding:7px 10px;margin-left:5px;font-weight:700}
.modal{display:none;position:fixed;inset:0;background:#0008;z-index:50;align-items:center;justify-content:center;padding:15px}.modal.show{display:flex}.modal-box{background:#fff;width:min(480px,96vw);border-radius:8px;padding:20px;position:relative}.close{position:absolute;right:12px;top:7px;font-size:24px;cursor:pointer}.modal h2{margin:0 0 12px;color:var(--red)}.row{padding:7px 0;border-bottom:1px solid #eee;font-size:13px}.row b{display:inline-block;width:140px}.modal .marriage{margin-top:0}
@media(max-width:767px){.page{width:100%;padding-left:8px;padding-right:8px}.topbar{padding:12px}.form-grid{grid-template-columns:1fr 1fr}.couple{flex-direction:column}.person+.person{border-left:0;border-top:1px solid #eee;margin-top:8px;padding-top:8px}.card{width:auto;min-width:185px;max-width:340px}.root-card{width:auto;min-width:220px;max-width:340px}.person{padding:0 8px}.search-area{top:57px}.table-wrap{max-height:none}}@media(max-width:500px){.form-grid{grid-template-columns:1fr}}

.howto strong:last-of-type{display:block;text-align:center;margin-top:4px}
.search-results .result b{display:block;color:var(--red);font-size:15px}
.search-results .result{cursor:pointer}

.contact-note{text-align:center;font-weight:700;margin-top:4px;color:#444}.result b{color:var(--red);font-size:15px}.result{border:1px solid #eee;border-radius:6px;margin:5px 0;background:#fff}.result:hover{background:#fff8f8}.parents b{color:#2f6f8f}.dod b{color:#8b1e1e}.marriage{background:#fff8e8;color:#8b1e1e}

/* Final source-data update presentation */
.intro h2{text-align:center}
.howto{text-align:center}
.contact-note{color:#8b1e1e !important;font-weight:700;text-align:center;margin-top:4px}

.login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:99999}.login-overlay.show{display:flex}.login-box{width:min(420px,92vw);background:#fff;border-radius:12px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.login-box h2{margin-top:0}.login-box input{width:100%;box-sizing:border-box;padding:11px;margin:10px 0 14px;border:1px solid #ccc;border-radius:7px}.login-box .btn-save{width:100%}.login-message{color:#b42318;min-height:20px;margin-top:10px}.save-status{text-align:center;min-height:26px;margin:8px 0;font-weight:600}.save-status.ok{color:#16794b}.save-status.error{color:#b42318}


.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.password-modal{position:relative;width:min(460px,100%);background:#fff;border-radius:12px;padding:26px;box-shadow:0 18px 60px rgba(0,0,0,.25)}.password-modal h2{margin:0 0 8px}.password-modal p{margin:0 0 18px;color:#666}.password-modal label{display:block;margin:12px 0 6px;font-weight:600}.password-modal input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ccc;border-radius:7px}.modal-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;cursor:pointer;color:#666}.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}

/* Admin responsive layout */
.admin-page .topbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 18px}
.admin-page .brand{flex:1 1 220px;min-width:0}
.admin-page .top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:wrap}
.admin-page .top-actions a{display:inline-flex;text-decoration:none;align-items:center;justify-content:center}
.admin-page .top-actions button,.admin-page .top-actions a{font:inherit}
.admin-page .btn-logout{background:#444;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}
.admin-page .btn-logout:hover{filter:brightness(.92)}
.admin-page .btn-logout:disabled,.admin-page .btn-save:disabled{opacity:.6;cursor:wait}
.admin-page .page{width:min(94vw,1450px);padding-top:20px}
.admin-page .panel{overflow:visible}
.admin-page .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.admin-page .section-heading h3{margin:0}
.admin-page .record-count{font-size:12px;color:#777;white-space:nowrap}
.admin-page .date-help{background:#fff8e8;border:1px solid #eed6a0;border-radius:6px;padding:9px 11px;margin:0 0 15px;font-size:13px;line-height:1.5;color:#59491f}
.admin-page code{background:#fff;padding:2px 5px;border:1px solid #e7dfc9;border-radius:4px}
.admin-page .full-btn{width:100%}
.admin-page .actions-cell{white-space:normal!important;min-width:135px}
.admin-page .btn-row-delete{background:#c43d3d;color:#fff;border:0;border-radius:5px;padding:7px 10px;font-weight:700;margin-left:5px;cursor:pointer}
.admin-page .empty-row{text-align:center!important;color:#777;padding:24px!important}
@media(max-width:900px){
 .admin-page .form-grid{grid-template-columns:1fr 1fr}
 .admin-page .people-table{min-width:1050px}
}
@media(max-width:700px){
 .admin-page .topbar{position:sticky;top:0;padding:10px 12px;align-items:stretch}
 .admin-page .brand{flex:1 0 100%;font-size:18px;text-align:center}
 .admin-page .top-actions{flex:1 0 100%;justify-content:center}
 .admin-page .top-actions a,.admin-page .top-actions button{flex:1 1 30%;min-width:0;padding:9px 8px;font-size:12px}
 .admin-page .page{width:100%;padding:12px 8px 35px}
 .admin-page .panel{padding:12px;margin-bottom:12px}
 .admin-page .form-grid{grid-template-columns:1fr}
 .admin-page .date-help{font-size:12px}
 .admin-page .section-heading{align-items:flex-start}
 .admin-page .table-wrap{max-height:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .admin-page .people-table th,.admin-page .people-table td{padding:8px 7px;font-size:12px}
 .admin-page .modal-actions{flex-direction:column-reverse}
 .admin-page .modal-actions button{width:100%}
}
@media(max-width:420px){
 .admin-page .top-actions a,.admin-page .top-actions button{font-size:11px;padding:8px 5px}
 .admin-page .brand{font-size:17px}
 .admin-page .panel h2{font-size:19px}
}

.person-head{display:flex;gap:12px;align-items:flex-start}.person-photo{width:110px;height:110px;min-width:110px;border-radius:10px;object-fit:contain;border:1px solid #ddd;background:#fafafa}.person-info{flex:1;min-width:0}.meta-line{font-size:11px;line-height:1.5;color:#555;margin-top:3px}.classification{font-weight:400;color:inherit}.mobile-link{color:#2f6f8f;text-decoration:none}.modal-photo{width:220px;height:180px;border-radius:10px;object-fit:contain;display:block;margin:0 auto 12px;border:1px solid #ddd}.photo-preview{width:180px;height:140px;border-radius:10px;object-fit:contain;border:1px solid #ccc;background:#fafafa;display:block;margin-top:7px}.photo-help{font-size:11px;color:#777;margin-top:5px}
@media(max-width:767px){.card{width:auto;min-width:240px;max-width:420px}.root-card{width:auto;min-width:260px;max-width:420px}}

@media(max-width:767px){.person-photo{width:92px;height:92px;min-width:92px}.modal-photo{width:200px;height:160px}}
.result-profession{font-weight:600;color:#666;font-size:13px}

/* Requested genealogy frontend refinements */
.topbar{position:relative;justify-content:center}
.topbar .brand{margin:0;text-align:center;font-size:26px;line-height:1.25}
.search-area{position:relative;top:auto}
.search-area label{font-size:15px}
.search-area input{padding:14px 16px;font-size:16px;min-height:48px;box-sizing:border-box}
.card{width:680px;min-width:680px;max-width:680px}
.card.pink-highlight{background:#fff8f8}
@media(max-width:767px){
 .card{width:auto;min-width:240px;max-width:420px}
 .root-card{width:auto;min-width:260px;max-width:420px}
 .topbar .brand{font-size:21px}
}


/* Revision 2: navigation, photo popup, sharing and footer */
.page-nav-buttons{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:18px auto 10px}
.page-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 25px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px;border:1px solid #d6b36a;background:linear-gradient(135deg,#fff7dc,#f2d58d);color:#5b3a00;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease}
.page-nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.person-photo{cursor:pointer}
.photo-popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72)}
#photo-popup-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:20px}
#photo-popup-modal.open{display:flex}
.photo-popup-box{position:relative;z-index:2;max-width:min(92vw,900px);max-height:90vh;padding:10px;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.4)}
#photo-popup-image{display:block;max-width:88vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px}
.photo-popup-close{position:absolute;right:-12px;top:-12px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#222;font-size:28px;line-height:32px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.3);z-index:3}
.share-buttons{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:28px auto 12px;padding:0 12px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.facebook-share{background:#1877f2;color:#fff}
.whatsapp-share{background:#25d366;color:#fff}
.site-footer{text-align:center;padding:18px 12px;margin-top:0;background:#f7f7f7;border-top:1px solid #ddd;color:#444;font-size:14px;line-height:1.7}
.site-footer a{font-weight:700;text-decoration:none}
@media(max-width:767px){
 .page-nav-btn{padding:10px 20px;font-size:15px}
 .share-btn{width:calc(100% - 24px);max-width:330px}
 .site-footer{font-size:13px}
}

/* Final header refinement */
.topbar.genealogy-header{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  width:100%;
  box-sizing:border-box;
  padding:12px 22px;
}
.genealogy-header .brand{
  grid-column:2;
  grid-row:1;
  margin:0;
  text-align:center;
  white-space:nowrap;
}
.genealogy-header .header-home{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:0;
}
.genealogy-header .header-contact{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  margin:0;
}
@media(max-width:767px){
  .topbar.genealogy-header{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px 12px;
  }
  .genealogy-header .brand{
    grid-column:1 / -1;
    grid-row:1;
    white-space:normal;
    font-size:21px;
    order:0;
  }
  .genealogy-header .header-home{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    order:1;
  }
  .genealogy-header .header-contact{
    grid-column:2;
    grid-row:2;
    justify-self:end;
    order:2;
  }
}

/* Revision 3: requested exact green-highlight cards */
.card{background:#fff}
.card.selected{background:#fff}
.card.green-highlight{background:#fff8d9}
.card.pink-highlight{background:#fff}
.howto .contact-note{display:inline;margin-left:12px;white-space:nowrap}
@media(max-width:767px){
  .howto .contact-note{white-space:normal;margin-left:8px}
}

/* Final revision: two-line instructions */
.howto .howto-line{display:block;line-height:1.65;margin:2px 0}
.howto .contact-note{display:block}

/* Backend/admin refinements: photo preview + table thumbnail */
#photoPreview{
  display:block;
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #d7d7d7;
  background:#f7f7f7;
}
#photoPreview.has-photo{object-fit:cover}
.table-photo-thumb{
  display:block;
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:5px;
  border:1px solid #d7d7d7;
  background:#fff;
  cursor:pointer;
}
.photo-thumb-cell{
  width:54px;
  text-align:center;
  vertical-align:middle;
}

/* Final: requested light-yellow highlighted cards and white photo thumbnails */
.card.green-highlight{background:#fff8d9}
.table-photo-thumb{background:#fff}
.person-id-cell{font-weight:700;white-space:nowrap}

.public-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.public-status.is-public{background:#e7f6ea;color:#216b2b}.public-status.is-unpublic{background:#f2f2f2;color:#666}.btn-public-toggle{border:0;border-radius:5px;padding:7px 9px;font-weight:700;cursor:pointer;margin-right:5px}.btn-public-toggle.make-unpublic{background:#e6a23c;color:#fff}.btn-public-toggle.make-public{background:#2e8b57;color:#fff}.status-cell{white-space:nowrap}

/* Default photo utility - kept outside the member Add/Edit form */
.default-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}
.default-photo-card{display:flex;align-items:center;gap:14px;border:1px solid #d9dee5;border-radius:10px;padding:12px;background:#fff}
.default-photo-image{width:72px;height:72px;object-fit:contain;border:1px solid #e2e6eb;border-radius:8px;background:#fff;flex:0 0 72px}
.default-photo-info{min-width:0;flex:1}
.default-photo-info strong{display:block;margin-bottom:7px;color:#1f2937}
.default-photo-link{display:block;width:100%;box-sizing:border-box;padding:8px 9px;border:1px solid #d7dce2;border-radius:6px;background:#f7f8fa;color:#4b5563;font-size:12px;margin-bottom:8px}
.default-photo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.default-photo-actions .btn-view,.btn-copy-link{font-size:13px;padding:6px 10px;border-radius:5px}
.btn-copy-link{border:1px solid #c9ced6;background:#fff;cursor:pointer}
.btn-copy-link:hover{background:#f3f4f6}
@media (max-width:760px){.default-photo-grid{grid-template-columns:1fr}.default-photo-card{align-items:flex-start}.default-photo-link{font-size:11px}}

/* Multi-spouse selector and sortable backend table */
.spouse-search{position:relative}
.relation-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.relation-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#eef5ff;border:1px solid #c9d9ef;font-size:13px}
.relation-chip button{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.people-table thead th[onclick]{cursor:pointer;user-select:none}
.people-table thead th[onclick]:hover{filter:brightness(.95)}
.public-status-select{min-width:105px;padding:6px 8px;border-radius:6px;border:1px solid #cfd5dd;background:#fff;font-weight:600}
.public-status-select.is-public{border-color:#8cc99b}
.public-status-select.is-unpublic{border-color:#e2a1a1}
.table-photo-thumb{display:block;width:48px;height:48px;object-fit:cover;border-radius:6px}


/* Search results: photo-first family profile cards */
.search-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;padding:14px 4px 28px;align-items:stretch}
.person-result-card{display:flex;align-items:stretch;gap:15px;min-width:0;margin:0;padding:14px;border:1px solid #eadada;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#fffafa 100%);box-shadow:0 4px 14px rgba(83,25,25,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:default;overflow:hidden}
.person-result-card:hover{background:#fff;border-color:#c98b8b;box-shadow:0 9px 24px rgba(83,25,25,.13);transform:translateY(-2px)}
.result-photo{display:block;flex:0 0 104px;width:104px;height:124px;object-fit:cover;object-position:center;border-radius:10px;border:1px solid #eadada;background:#f7eeee;color:#7b4141}
.result-card-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;gap:5px}
.result-id{font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:.07em;color:#927070;font-weight:700}
.search-results .person-result-card b{display:block;font-size:17px;line-height:1.3;color:#8b1e1e;overflow-wrap:anywhere}
.person-result-card .result-profession{font-size:12px;color:#5d6875;line-height:1.4;font-weight:600}
.result-detail{font-size:12px;color:#555;line-height:1.45;overflow-wrap:anywhere}
.result-detail span{font-weight:700;color:#7e3636}
.result-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.result-card-actions .seo-person-link{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:7px;background:#8b1e1e;color:#fff;text-decoration:none;font-size:12px;font-weight:700;box-shadow:0 2px 5px rgba(139,30,30,.18)}
.result-card-actions .seo-person-link:hover{background:#6f1515}
.result-tree-btn{border:1px solid #e3c5c5;border-radius:7px;padding:7px 10px;background:#fff;color:#7f2626;font-size:12px;font-weight:700;cursor:pointer}
.result-tree-btn:hover{background:#fff0f0}
.no-results{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;color:#666;text-align:center}
.no-results-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff0f0;color:#8b1e1e;font-size:28px}
.no-results b{color:#8b1e1e;font-size:17px}
@media(max-width:520px){.search-card-grid{grid-template-columns:1fr;padding:10px 0 24px;gap:10px}.person-result-card{gap:12px;padding:11px}.result-photo{flex-basis:86px;width:86px;height:104px}.search-results .person-result-card b{font-size:15px}.result-card-actions{gap:6px}.result-card-actions .seo-person-link,.result-tree-btn{font-size:11px;padding:7px 9px}}

/* Search card date row: keep Born, Marriage and Died inline at Parents text size */
.person-result-card .result-detail.result-dates {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.45;
  color: #555;
  white-space: normal;
  overflow-wrap: normal;
}
.person-result-card .result-detail.result-dates b,
.search-results .person-result-card .result-detail.result-dates b {
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #7e3636;
  font-weight: 700;
}
@media (min-width: 521px) {
  .person-result-card .result-detail.result-dates { white-space: nowrap; }
}

/* Responsive family-tree layout patch (Oct 2026)
   Desktop rules above are intentionally preserved. */
@media (min-width: 768px) and (max-width: 1024px) {
  #tree { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card, .card.root-card { width: min(100%, 520px); min-width: 0; max-width: 520px; }
  .family { padding-left: 22px; }
  .children { padding-left: 20px; }
  .child-family:before { width: 20px; }
  .person-photo { max-width: 100%; }
}
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .page { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
  #tree { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .family { padding-left: 12px; min-width: 0; }
  .family.root { padding-left: 0; }
  .children { padding: 7px 0 4px 12px; min-width: 0; }
  .children:before { left: 0; }
  .child-family:before { width: 12px; }
  .card, .card.root-card {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 5px 0;
    padding: 9px 10px;
  }
  .has-toggle { padding-left: 32px; }
  .toggle { left: 4px; width: 22px; height: 22px; font-size: 16px; line-height: 22px; }
  .couple { flex-direction: column; min-width: 0; }
  .person { min-width: 0; padding: 0 4px; }
  .person + .person { border-left: 0; border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px; }
  .person-head { gap: 9px; }
  .person-photo { width: 76px; height: 76px; min-width: 76px; object-fit: contain; }
  .name { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  .detail { font-size: 12px; overflow-wrap: anywhere; }
  .parents { font-size: 11px; overflow-wrap: anywhere; }
  .search-area { max-width: 100%; box-sizing: border-box; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 380px) {
  .family { padding-left: 8px; }
  .children { padding-left: 8px; }
  .child-family:before { width: 8px; }
  .card, .card.root-card { padding: 8px; }
  .has-toggle { padding-left: 28px; }
  .person-photo { width: 64px; height: 64px; min-width: 64px; }
  .name { font-size: 13px; }
}