:root{--ink:#17202a;--muted:#667085;--paper:#f7f5ef;--panel:#fff;--line:#dfddd6;--accent:#613dc1;--accent2:#e8e1ff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;background:#fff;border-bottom:1px solid var(--line)}header a{text-decoration:none;color:var(--ink);margin-left:18px}.brand{font-weight:900;font-size:24px;color:var(--accent)!important;margin-left:0}main{max-width:1100px;margin:0 auto;padding:42px 24px 80px}.hero{padding:54px;border:1px solid var(--line);background:#fff;border-radius:24px}.hero h1{font-size:clamp(38px,6vw,68px);line-height:.98;max-width:850px;margin:8px 0 22px}.hero p{font-size:19px;max-width:700px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px!important;font-weight:bold;color:var(--accent)}.button,button{display:inline-block;border:0;border-radius:10px;background:var(--accent);color:#fff;padding:12px 16px;font-weight:bold;text-decoration:none;cursor:pointer}.secondary{background:var(--accent2);color:var(--accent);margin-left:8px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 40px}.stats div{background:#fff;border:1px solid var(--line);padding:22px;border-radius:16px}.stats strong{display:block;font-size:30px}.stats span{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.card{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;color:inherit;text-decoration:none}.avatar,.big-avatar{display:grid;place-items:center;border-radius:50%;background:var(--accent2);color:var(--accent);font-weight:900}.avatar{width:46px;height:46px}.big-avatar{width:150px;height:150px;font-size:64px;margin:auto}.muted{color:var(--muted)}.small{font-size:12px}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.page-head h1{font-size:44px;margin:0}.search{display:flex;gap:8px}.search input{min-width:250px}.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:24px}.profile-card,.panel,.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.profile-card{text-align:center;align-self:start}.profile-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}.badge{display:inline-block;background:var(--accent2);color:var(--accent);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:bold}.subtle{background:#f0f0f0;color:#555;margin-right:8px}.panel{margin-bottom:16px}.row{padding:8px 0;border-bottom:1px solid #eee}.row:last-child{border-bottom:0}.pill{display:inline-block;margin:4px 4px 4px 0;padding:8px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:inherit}.post{border-top:1px solid #eee;padding:14px 0}.form-card{max-width:560px;margin:auto}.form-card.wide{max-width:720px}form{display:grid;gap:14px}label{display:grid;gap:6px;font-weight:bold}input,textarea,select{width:100%;padding:12px;border:1px solid #c9c7c0;border-radius:9px;font:inherit;background:#fff}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flash{background:#fff6cc;border:1px solid #ead26d;border-radius:10px;padding:12px;margin-bottom:20px}@media(max-width:760px){header{align-items:flex-start;gap:12px}nav{display:flex;flex-wrap:wrap;justify-content:flex-end}header a{margin-left:10px}.hero{padding:28px}.stats{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}.page-head{display:block}.search{margin-top:14px}.search input{min-width:0}.two{grid-template-columns:1fr}}
/* ------------------------------
   PROFILE PAGE LAYOUT
------------------------------ */

.profile-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  width: 100%;
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 24px;
}

.profile-card {
  width: 100%;
  box-sizing: border-box;
}

.profile-wall {
  width: 100%;
  min-width: 0;
}

.profile-wall .panel {
  width: 100%;
  box-sizing: border-box;
  min-height: 500px;
}

.profile-wall textarea {
  width: 100%;
  box-sizing: border-box;
}

.profile-section {
  text-align: left;
}

.profile-section h2 {
  margin-bottom: 12px;
}

@media (max-width: 800px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   FAMILY TREE
------------------------------ */

.family-page {
  max-width: 1500px;
  margin: 36px auto;
  padding: 0 24px 60px;
}

.family-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}

.family-heading h1 {
  margin: 4px 0;
}

.family-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.family-controls {
  background: white;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.family-depth-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.family-depth-form select {
  width: auto;
  min-width: 80px;
}


/* TREE CANVAS */

.family-tree-shell {
  background: #f7f7f8;
  border: 1px solid #ddd;
  border-radius: 18px;
  margin-bottom: 24px;
  overflow: hidden;
}

.family-tree-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.family-tree-canvas {
  min-width: max-content;
  padding: 32px 50px 42px;
  text-align: center;
}

.family-tree-section-label {
  display: inline-block;
  margin: 8px auto 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ececec;
  color: #666;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* PERSON CARDS */

.family-person-card {
  width: 170px;
  flex: 0 0 170px;
  background: white;
  border: 1px solid #d7d7d7;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.05);
}

.family-person-card.is-selected {
  border: 2px solid #6a3fd1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.family-person-card.is-historical {
  background: #fbfaf7;
}

.family-person-main {
  display: block;
  color: inherit;
  text-decoration: none;
}

.family-person-photo,
.family-person-avatar {
  width: 100%;
  height: 120px;
}

.family-person-photo {
  display: block;
  object-fit: cover;
}

.family-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 42px;
  font-weight: 700;
}

.family-person-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.family-person-details strong {
  line-height: 1.2;
}

.family-life {
  color: #666;
  font-size: 0.82rem;
}

.family-person-type {
  color: #888;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.family-profile-link {
  display: block;
  padding: 7px 12px;
  border-top: 1px solid #eee;
  font-size: 0.78rem;
  text-decoration: none;
}

.family-person-card:hover {
  border-color: #6a3fd1;
}


/* BRANCHES */

.family-ancestor-branch,
.family-descendant-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.family-parent-row,
.family-child-row,
.family-top-parent-row,
.family-root-child-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
}

.family-child-row,
.family-root-child-row {
  align-items: flex-start;
}

.family-parent-slot,
.family-child-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.family-branch-stem {
  width: 0;
  height: 24px;
  border-left: 2px solid #bbb;
}

.family-branch-bar {
  width: calc(100% - 170px);
  min-width: 80px;
  height: 0;
  border-top: 2px solid #bbb;
}

.family-root-bar {
  max-width: calc(100% - 170px);
  margin: 0 auto;
}

.family-center-stem {
  margin: 0 auto;
}


/* CENTER GENERATION */

.family-center-generation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  margin: 8px auto 20px;
}

.family-sibling-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.family-relative-row {
  display: flex;
  gap: 12px;
}

.family-center-household {
  display: flex;
  align-items: center;
  justify-content: center;
}

.family-center-selected,
.family-spouse-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.family-selected-label,
.family-group-label {
  font-size: 0.76rem;
  color: #777;
}

.family-spouse-line {
  width: 38px;
  height: 0;
  border-top: 2px solid #999;
  margin: 0 4px;
}

.family-spouse-wrap + .family-spouse-line {
  margin-left: 10px;
}


/* EXTENDED FAMILY */

.extended-family {
  margin-bottom: 24px;
}

.extended-family summary {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}

.extended-family-grid {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.extended-relative {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* DIRECTORY */

.family-directory-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.family-search {
  display: flex;
  gap: 10px;
  max-width: 620px;
  margin: 20px 0;
}

.family-search input {
  flex: 1;
}

.family-directory-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.directory-person {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.directory-person-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.directory-person-photo,
.directory-person-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 46px;
}

.directory-person-photo {
  object-fit: cover;
}

.directory-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-weight: 700;
}

.directory-person-actions {
  display: flex;
  gap: 12px;
  font-size: 0.82rem;
}


@media (max-width: 800px) {

  .family-page {
    padding: 0 12px 40px;
  }

  .family-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .family-center-generation {
    justify-content: flex-start;
  }

  .family-tree-canvas {
    padding-left: 30px;
    padding-right: 30px;
  }

  .family-search {
    flex-direction: column;
  }

}


/* =========================================================
   SOCIALART MEMBER PROFILE
   ========================================================= */

.member-profile {
  max-width: 1100px;
  margin: 0 auto;
}

.member-profile-header {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
}

.member-cover {
  height: 250px;
  position: relative;
}

.member-cover-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      135deg,
      #eee 0%,
      #ddd 55%,
      #eee 100%
    );
}

.member-identity-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 0 28px 18px 28px;
}

.member-profile-photo-wrap {
  margin-top: -72px;
  position: relative;
  flex: 0 0 auto;
}

.member-profile-photo,
.member-profile-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid white;
}

.member-profile-photo {
  object-fit: cover;
}

.member-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 58px;
  font-weight: 700;
}

.member-identity {
  flex: 1;
  min-width: 0;
}

.member-identity h1 {
  margin-bottom: 4px;
}

.member-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.member-profile-actions form {
  margin: 0;
}

.member-profile-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 24px;
  border-top: 1px solid #eee;
}

.member-profile-nav a,
.profile-nav-disabled {
  padding: 10px 13px;
  text-decoration: none;
  border-radius: 8px;
}

.member-profile-nav a:hover {
  background: #f2f2f2;
}

.profile-nav-disabled {
  color: #999;
}

.member-profile-body {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.member-profile-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.member-profile-main {
  min-width: 0;
}

.profile-summary-card,
.profile-feed-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 18px;
}

.profile-summary-card h2,
.profile-feed-card h2 {
  margin-top: 0;
}

.profile-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.connection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.connection-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.connection-photo,
.connection-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

.connection-photo {
  object-fit: cover;
}

.connection-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 28px;
  font-weight: 700;
}

.connection-tile strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.connection-tile span {
  color: #666;
  font-size: 0.78rem;
  line-height: 1.2;
}

.profile-management-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-post-form {
  margin-bottom: 18px;
}

.profile-post-form textarea {
  width: 100%;
}

.profile-feed-post {
  border-top: 1px solid #eee;
  padding: 18px 0;
}

.post-author-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}


@media (max-width: 760px) {

  .member-cover {
    height: 180px;
  }

  .member-identity-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .member-profile-photo-wrap {
    margin-top: -65px;
  }

  .member-profile-actions {
    justify-content: flex-start;
  }

  .member-profile-body {
    grid-template-columns: 1fr;
  }

  .connection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

.member-profile-body {
  grid-template-columns: 360px minmax(0, 1fr);
  width: 100%;
}

.member-profile-main {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.profile-feed-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.member-profile-left {
  width: 100%;
}

.connection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .member-profile-body {
    grid-template-columns: 1fr;
  }

  .connection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.member-cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   PROFILE PHOTO / VIDEO PREVIEW GRIDS
   ========================================================= */

.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.profile-media-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #e8e8e8;
}

.profile-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: #e5e5e5;
}

.video-play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 15px;
  padding-left: 2px;
}

/* =========================================================
   FULL PROFILE MEDIA GALLERIES
   ========================================================= */

.media-gallery-page {
  max-width: 1100px;
  margin: 30px auto;
}

.media-gallery-header {
  margin-bottom: 20px;
}

.media-gallery-header h1 {
  margin-top: 8px;
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.media-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #e8e8e8;
}

.media-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 9px;
  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.72)
  );
  color: white;
  font-size: 13px;
}

.video-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

@media (max-width: 760px) {
  .media-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.profile-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-card-actions a {
  white-space: nowrap;
  font-size: 14px;
}

.media-gallery-card {
  min-width: 0;
}

.media-delete-form {
  margin-top: 6px;
  text-align: center;
}

.media-delete-button {
  border: 0;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
}

.media-delete-button:hover {
  text-decoration: underline;
}

.media-gallery-card {
  position: relative;
}

.media-options {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.media-options summary {
  list-style: none;
}

.media-options summary::-webkit-details-marker {
  display: none;
}

.media-options-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.media-options-menu {
  position: absolute;
  right: 0;
  top: 38px;
  min-width: 110px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.media-options-delete {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
}

.media-options-delete:hover {
  background: #f2f2f2;
}

.media-options-delete {
  color: #222 !important;
}

.media-options-delete:hover {
  color: #222 !important;
}
.profile-post-photo {
  width: 100%;
  max-height: 650px;
  object-fit: contain;
  display: block;
  margin-top: 12px;
  border-radius: 10px;
}

.profile-post-video {
  display: block;
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 10px;
}

.profile-post-video img {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: contain;
}

.profile-post-video-placeholder {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  font-size: 24px;
}

.post-media-controls {
  margin-top: 10px;
  margin-bottom: 10px;
}

.post-media-controls select,
.post-media-controls input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

/* =========================================================
   UPLOAD / SAVE PROGRESS
   ========================================================= */

.upload-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

.upload-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  animation: socialart-upload-spin 0.7s linear infinite;
}

.is-submitting {
  cursor: wait;
}

.is-submitting button[type="submit"] {
  cursor: wait;
}

@keyframes socialart-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   POST OPTIONS MENU
   ========================================================= */

.profile-feed-post {
  position: relative;
}

.post-options {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.post-options summary {
  list-style: none;
}

.post-options summary::-webkit-details-marker {
  display: none;
}

.post-options-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}

.post-options-button:hover {
  background: #eeeeee;
}

.post-options-menu {
  position: absolute;
  right: 0;
  top: 34px;
  min-width: 130px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.post-options-delete {
  width: 100%;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-align: left;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
}

.post-options-delete:hover {
  color: #222 !important;
  background: #f2f2f2;
}

/* =========================================================
   CONNECT
   ========================================================= */

.connect-page {
  max-width: 720px;
  margin: 30px auto;
}

.connect-heading {
  margin-bottom: 18px;
}

.connect-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.connect-post {
  background: white;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 18px;
  overflow: hidden;
}

.connect-author {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.connect-author-photo,
.connect-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.connect-author-photo {
  object-fit: cover;
}

.connect-author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e5e5;
  font-weight: bold;
}

.connect-post-body {
  margin-top: 14px;
  white-space: pre-wrap;
}

.connect-post-photo {
  display: block;
  width: 100%;
  max-height: 700px;
  object-fit: contain;
  margin-top: 14px;
  border-radius: 10px;
}

.connect-post-video {
  display: block;
  margin-top: 14px;
}

.connect-post-video img {
  display: block;
  width: 100%;
  max-height: 700px;
  object-fit: contain;
  border-radius: 10px;
}

/* =========================================================
   CONNECT STREAM CONTROLS
   ========================================================= */

.connect-stream-nav {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.connect-stream-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: white;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

.connect-stream-link:hover {
  background: #f3f3f3;
}

.connect-stream-link.active {
  background: #222;
  color: white;
  border-color: #222;
}

.connect-coming-soon {
  background: white;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}

.connect-coming-soon h2 {
  margin-top: 0;
}

/* =========================================================
   CONNECT UNIVERSAL COMPOSER
   ========================================================= */

.connect-composer {
  background: white;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.connect-post-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  margin-top: 12px;
}

.connect-composer-destination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connect-composer-destination select {
  min-width: 190px;
}

.connect-composer-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.connect-composer-media input[type="url"],
.connect-composer-media input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   CONNECT COMPACT COMPOSER
   ========================================================= */

.connect-compose-launcher {
  background: white;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 18px;
}

.connect-compose-prompt {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #f3f3f3;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
}

.connect-compose-prompt:hover {
  background: #ebebeb;
}

.connect-compose-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 30;
}

.connect-compose-modal[hidden] {
  display: none;
}

.connect-compose-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.connect-compose-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.connect-compose-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  border-radius: 18px;
  padding: 20px;
  z-index: 1;
}

.connect-compose-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.connect-compose-dialog-header h2 {
  margin: 0;
}

.connect-compose-close {
  border: 0;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
}

.connect-post-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.connect-post-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.connect-post-mode span {
  display: inline-flex;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 999px;
  cursor: pointer;
}

.connect-post-mode input:checked + span {
  background: #222;
  color: white;
  border-color: #222;
}

.connect-modal-post-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  resize: vertical;
}

.connect-compose-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.connect-compose-attachments input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.connect-compose-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.compose-modal-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .connect-compose-modal {
    align-items: flex-end;
    padding: 0;
  }

  .connect-compose-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }

  .connect-compose-fab {
    right: 18px;
    bottom: 18px;
  }
}

/* Fix Connect composer text contrast */

.connect-compose-prompt {
  color: #222 !important;
}

.connect-compose-prompt:hover {
  color: #222 !important;
}

.connect-post-mode span {
  color: #222;
}

.connect-post-mode input:checked + span {
  color: #fff;
}

.connect-compose-close {
  color: #222 !important;
}

.connect-compose-error {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #b42318;
  border-radius: 10px;
  background: #fff1f0;
  color: #8a1c13;
  font-weight: 600;
}

.connect-compose-error[hidden] {
  display: none;
}

/* Connect composer selected-media preview */

.connect-media-preview {
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;
}

.connect-media-preview[hidden] {
  display: none;
}

.connect-media-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #eee;
}

.connect-media-preview-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #222;
}

#connect-media-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-media-preview-remove {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #222 !important;
  text-decoration: underline;
  cursor: pointer;
}

.connect-media-preview video {
  display: block;
  width: 100%;
  max-height: 320px;
  background: #111;
}

.connect-media-preview video[hidden],
.connect-media-preview img[hidden] {
  display: none;
}

/* Embedded video inside Connect posts */

video.connect-post-video {
  display: block;
  width: 100%;
  max-height: 520px;
  margin-top: 10px;
  border-radius: 10px;
  background: #111;
  object-fit: contain;
}

/* =========================================================
   PROFILE PRIVACY SETTINGS
   ========================================================= */

.profile-privacy-settings {
  margin: 30px 0 26px;
  padding-top: 22px;
  border-top: 1px solid #ddd;
}

.profile-privacy-settings h2 {
  margin-bottom: 6px;
}

.profile-privacy-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.profile-privacy-row select {
  width: 100%;
}

@media (max-width: 600px) {
  .profile-privacy-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* FIX EDIT PROFILE IMAGE SIZES */

.edit-profile-photo-preview {
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  margin: 10px 0 15px !important;
}

.edit-profile-photo-preview img {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
  display: block !important;
}

.edit-cover-photo-preview {
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  margin: 10px 0 15px !important;
}

.edit-cover-photo-preview img {
  width: 100% !important;
  height: 220px !important;
  max-width: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}


.profile-privacy-subheading {
  margin: 22px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ddd;
}


.post-controls-heading {
  margin-top: 40px !important;
}


.privacy-group-break {
  margin-top: 40px !important;
}


/* =========================================================
   PROFILE RELATIONSHIP
   ========================================================= */

.profile-relationship-line {
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
}

.relationship-confidence {
  font-size: 0.82rem;
  font-weight: 400;
  color: #888;
}

/* =========================================================
   FAMILY TREE - INCOMPLETE ANCESTOR PATHS
   ========================================================= */

.family-gap-ancestor-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.family-gap-generation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.family-gap-generation-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #666;
}

.family-gap-people {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.family-gap-note {
  font-size: 0.72rem;
  color: #888;
  font-style: italic;
}

.family-gap-connector {
  width: 0;
  height: 30px;
  margin: 2px auto;
  border-left: 2px dashed #aaa;
}

.family-gap-to-known-tree {
  height: 38px;
}

/* =========================================================
   FAMILY TREE - GENERATION ROWS
   ========================================================= */

.family-tree-canvas {
  position: relative;
}

.family-tree-lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.family-tree-connection {
  fill: none;
  stroke: #aaa;
  stroke-width: 2;
}

.family-tree-connection.is-incomplete {
  stroke-dasharray: 6 6;
  stroke: #999;
}

.family-generation-stack {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  margin-bottom: 38px;
}

.family-generation-row {
  position: relative;
  z-index: 1;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.family-generation-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #666;
}

.family-generation-people {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}

.family-tree-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.family-incomplete-label {
  margin-top: 5px;
  font-size: 0.7rem;
  font-style: italic;
  color: #888;
}

.family-tree-node.has-incomplete-path
  .family-person-card {
  border-style: dashed;
}

/* =========================================================
   FAMILY MAP IDENTITY HEADER
   ========================================================= */

.family-map-header {
  background: white;
  border: 1px solid #ddd;
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 18px;
}

.family-map-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.family-map-title-row h1 {
  margin: 2px 0 0;
}

.family-map-identity {
  display: flex;
  align-items: center;
  gap: 20px;
}

.family-map-identity-photo-wrap {
  flex: 0 0 auto;
  text-decoration: none;
}

.family-map-identity-photo,
.family-map-identity-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.family-map-identity-photo {
  display: block;
  object-fit: cover;
}

.family-map-identity-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 40px;
  font-weight: 700;
}

.family-map-identity-info {
  min-width: 0;
}

.family-map-identity-info h2 {
  margin: 0 0 4px;
  font-size: 1.65rem;
}

.family-map-relationship {
  margin-bottom: 7px;
  color: #555;
  font-weight: 600;
}

.family-map-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  color: #666;
  font-size: 0.92rem;
}

.family-map-meta span + span::before {
  content: "·";
  margin: 0 9px;
  color: #aaa;
}

.family-map-orientation {
  margin: 9px 0 0;
  font-size: 0.86rem;
}


/* =========================================================
   FAMILY MAP CENTER PERSON
   ========================================================= */

.family-person-card.is-selected {
  width: 215px;
  flex: 0 0 215px;
  border: 4px solid #6a3fd1;
  border-radius: 17px;
  box-shadow:
    0 7px 22px rgba(0, 0, 0, 0.17);
  transform: translateY(-4px);
}

.family-person-card.is-selected
.family-person-photo,
.family-person-card.is-selected
.family-person-avatar {
  height: 155px;
}

.family-person-card.is-selected
.family-person-details {
  padding: 13px 14px;
}

.family-person-card.is-selected
.family-person-details strong {
  font-size: 1.08rem;
}

.family-person-card.is-selected
.family-profile-link {
  padding: 9px 14px;
}


/* The centered person's generation stays visually balanced. */

.family-center-selected {
  min-width: 215px;
}


@media (max-width: 800px) {

  .family-map-title-row {
    flex-direction: column;
  }

  .family-map-identity {
    align-items: flex-start;
  }

  .family-map-identity-photo,
  .family-map-identity-avatar {
    width: 82px;
    height: 82px;
  }

}

/* =========================================================
   FAMILY MAP HEADER - REFINED
   ========================================================= */

.family-map-main-title {
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.family-map-main-title h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
}

.family-map-person-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.family-map-summary-info {
  flex: 1;
  min-width: 0;
}

.family-map-summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* CENTER PERSON - GOLD EMPHASIS */

.family-person-card.is-selected {
  width: 215px;
  flex: 0 0 215px;

  border: 4px solid #c99a2e;

  box-shadow:
    0 0 0 2px rgba(201, 154, 46, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.18);

  transform: translateY(-4px);
}

.family-person-card.is-selected:hover {
  border-color: #b78921;
}


@media (max-width: 800px) {

  .family-map-person-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .family-map-summary-actions {
    width: 100%;
    justify-content: flex-start;
  }

}

/* =========================================================
   FAMILY MAP HEADER - CLEAN STACKED LAYOUT
   ========================================================= */

.family-map-main-title {
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid #eee;
}

.family-map-main-title h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
}

.family-map-person-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.family-map-summary-info {
  min-width: 0;
}

.family-map-relationship {
  margin: 0 0 5px;
  font-size: 1rem;
  font-weight: 650;
}

.family-map-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.95rem;
  color: #666;
}

.family-map-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}


/* GENERATION CONTROL BAR */

.family-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.family-depth-form {
  margin: 0;
  flex: 0 0 auto;
}

.family-map-selector-help {
  margin-left: auto;
  color: #666;
  font-size: 0.88rem;
  text-align: right;
}


/* CENTER CARD GOLD */

.family-person-card.is-selected {
  border-color: #c99a2e;
}

.family-person-card.is-selected:hover {
  border-color: #b78921;
}


@media (max-width: 800px) {

  .family-map-person-summary {
    grid-template-columns: auto 1fr;
  }

  .family-map-summary-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .family-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .family-map-selector-help {
    margin-left: 0;
    text-align: left;
  }

}

/* =========================================================
   FAMILY MAP HEADER - FINAL ALIGNMENT
   Title on its own row.
   Photo left, information middle, actions right.
   ========================================================= */

.family-map-header {
  display: block !important;
}

.family-map-main-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 0 15px !important;
  border-bottom: 1px solid #eee;
}

.family-map-main-title h1 {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}


/* SECOND ROW */

.family-map-person-summary {
  display: grid !important;
  grid-template-columns:
    104px minmax(240px, 1fr) auto !important;
  width: 100% !important;
  align-items: center !important;
  column-gap: 20px !important;
}


/* PHOTO - LEFT */

.family-map-identity-photo-wrap {
  grid-column: 1;
  justify-self: start;
}

.family-map-identity-photo,
.family-map-identity-avatar {
  width: 92px !important;
  height: 92px !important;
}


/* INFORMATION - MIDDLE */

.family-map-summary-info {
  grid-column: 2;
  min-width: 0;
  justify-self: stretch;
  text-align: left;
}

.family-map-relationship {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 650;
}

.family-map-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.95rem;
  color: #666;
}

.family-map-meta span {
  white-space: nowrap;
}

.family-map-meta span + span::before {
  content: "·";
  margin: 0 9px;
  color: #aaa;
}


/* BUTTONS - RIGHT */

.family-map-summary-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}


/* MOBILE */

@media (max-width: 700px) {

  .family-map-person-summary {
    grid-template-columns:
      82px minmax(0, 1fr) !important;
    row-gap: 14px;
  }

  .family-map-identity-photo,
  .family-map-identity-avatar {
    width: 76px !important;
    height: 76px !important;
  }

  .family-map-summary-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }

}

/* =========================================================
   MY SOCIALART BUTTONS
   ========================================================= */

.profile-management-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-management-buttons .button {
  margin: 0;
}

.has-pending-requests {
  font-weight: 700;
}

.request-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;

  margin-left: 5px;
  padding: 0 5px;

  border-radius: 999px;

  background: #6a3fd1;
  color: white;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   FAMILY MAP MANAGEMENT
   ========================================================= */

.family-map-management {
  margin-bottom: 18px;
}

.family-map-management details {
  background: white;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 12px 16px;
}

.family-map-management summary {
  cursor: pointer;
  font-weight: 700;
  color: #555;
}

.family-map-management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

/* =========================================================
   ANCESTOR PROFILE MANAGEMENT
   ========================================================= */

.ancestor-primary-management {
  margin: 16px 0 10px;
}

.ancestor-secondary-management {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #777;
}

.ancestor-secondary-management summary {
  display: inline-block;
  cursor: pointer;
  color: #777;
}

.ancestor-secondary-management summary:hover {
  color: #555;
}

.ancestor-secondary-management-body {
  margin-top: 8px;
}

.ancestor-secondary-management-body form {
  margin: 0;
}

.ancestor-deactivate-button {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.8rem;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
}

.ancestor-deactivate-button:hover {
  background: transparent;
  color: #555;
}

/* =========================================================
   EDIT PROFILE - DEACTIVATION
   ========================================================= */

.edit-profile-danger-zone {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.edit-profile-danger-heading {
  margin-bottom: 6px;
  font-weight: 700;
  color: #666;
}

.edit-profile-deactivate {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
}

.edit-profile-deactivate:hover {
  background: transparent;
  color: #444;
}

/* Ancestor media controls */

.ancestor-media-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.media-gallery-attribution {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 0.78rem;
  color: #777;
}

.media-gallery-attribution a {
  color: inherit;
}

/* =========================================================
   ANCESTOR PROFILE SECTIONS
   ========================================================= */

.ancestor-summary-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
}

.ancestor-summary-section h2 {
  margin: 0;
}

.ancestor-connection-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.ancestor-summary-section .profile-media-grid {
  margin-top: 12px;
}

.request-person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.request-person-photo-slot {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
}

.request-person-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.request-person-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.request-person-line a {
  font-size: 0.85rem;
}

.family-union-status,
.family-union-years {
  font-size: 0.72rem;
  color: #777;
  line-height: 1.2;
}

.family-union-status {
  font-style: italic;
}

.family-generation-family {
  display: flex;
  align-items: center;
}

.family-generation-union-line {
  width: 38px;
  flex: 0 0 38px;
  border-top: 2px solid #999;
}

.family-descendant-household {
  display: flex;
  align-items: center;
  justify-content: center;
}

.family-empty-parent-card {
  width: 170px;
  height: 206px;
  flex: 0 0 170px;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  background: #fafafa;
}

.family-center-generation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
}

.family-sibling-group {
  grid-column: 1;
  justify-self: end;
  margin-right: 38px;
}

.family-center-household {
  grid-column: 2;
  justify-self: center;
}

.family-tree-shell {
  position: relative;
}

.family-tree-canvas {
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.family-generation-people {
  width: max-content;
  min-width: 100%;
}

.family-tree-scroll-control {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 42px;
  height: 52px;
  border-radius: 12px;
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.family-tree-scroll-control.is-left {
  left: 12px;
}

.family-tree-scroll-control.is-right {
  right: 12px;
}

.family-tree-scroll-control[hidden] {
  display: none;
}

/* FAMILY MAP MODE SWITCH */

.family-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.family-map-mode-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: #ececf1;
  border: 1px solid #d9d9df;
  border-radius: 999px;
  flex: 0 0 auto;
}

.family-map-mode-option {
  min-width: 118px;
  padding: 8px 16px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: #555;
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.family-map-mode-option:hover {
  color: #222;
  transform: translateY(-1px);
}

.family-map-mode-option.is-active {
  background: white;
  color: #111;
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.12);
}

@media (max-width: 700px) {
  .family-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .family-map-mode-switch {
    align-self: center;
  }
}

/* =========================================================
   FAMILY MAP - FULL TREE WORKSPACE
   ========================================================= */

.family-tree-shell.is-full-tree {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

.family-tree-shell.is-full-tree
  .family-tree-viewport {
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 620px;
  overflow-x: auto;
  overflow-y: auto;
}

.family-tree-shell.is-full-tree
  .family-tree-canvas {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 80px;
}

/* Empty parent occupies exactly the real-card height */
.family-generation-family {
  align-items: stretch;
}

.family-generation-union-line {
  align-self: center;
}

.family-empty-parent-card {
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

/* Relationship-routing corridors between ancestor generations */

.family-tree-shell.is-full-tree
  .family-generation-row {
  padding-bottom: 54px;
}

.family-tree-shell.is-full-tree
  .family-generation-row:last-child {
  padding-bottom: 34px;
}

.family-person-photo.is-portrait {
  object-fit: contain;
  object-position: top center;
  padding: 0 2.5%;
  box-sizing: border-box;
  background: #f5f5f5;
}

.family-person-photo.is-portrait {
  object-fit: cover;
  object-position: top center;
  padding: 0;
  transform: scale(0.85);
  transform-origin: top center;
}

.family-person-photo.is-portrait {
  object-position: center 33%;
  transform: scale(0.85);
  transform-origin: center 33%;
}

.family-generation-people.is-branch-layout {
  justify-content: flex-start;
  gap: 0;
}

.family-generation-union-line.is-coparent {
  border-top-style: dashed;
  border-top-color: #aaa;
}

.family-map-control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family-map-zoom {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 3px;
  border: 1px solid #d9d9df;
  border-radius: 999px;
  background: #ececf1;
}

.family-map-zoom-button,
.family-map-zoom-value {
  height: 28px;
  border: 0;
  background: transparent;
  color: #444;
  font-weight: 600;
  cursor: pointer;
}

.family-map-zoom-button {
  width: 30px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
}

.family-map-zoom-value {
  min-width: 48px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.family-map-zoom-button:hover,
.family-map-zoom-value:hover {
  background: white;
}

.family-map-zoom-button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* =========================================================
   COMPACT FAMILY MAP HEADER
   ========================================================= */

.family-map-header.family-map-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 16px;
  margin-bottom: 10px;
  min-height: 0;
}

.family-map-compact-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.family-map-compact-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 32px;
  white-space: nowrap;
}

.family-map-compact-photo-wrap,
.family-map-compact-photo,
.family-map-compact-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
}

.family-map-compact-photo {
  display: block;
  object-fit: cover;
  object-position: center 33%;
}

.family-map-compact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 0.85rem;
  font-weight: 700;
}

.family-map-compact-name {
  white-space: nowrap;
}

.family-map-compact-meta {
  color: #777;
  font-size: 0.88rem;
  white-space: nowrap;
}

.family-map-compact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.family-map-header-compact
  .family-map-compact-actions
  .button {
  padding: 7px 12px;
}

@media (max-width: 700px) {

  .family-map-header.family-map-header-compact {
    flex-wrap: wrap;
  }

  .family-map-compact-left {
    flex-wrap: wrap;
  }
}

/* =========================================================
   FAMILY MAP TOOLBAR
   ========================================================= */

.family-map-header.family-map-toolbar {
  padding: 8px 14px;
  margin-bottom: 8px;
  min-height: 0;
}

.family-map-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
}

.family-map-toolbar-title {
  margin: 0 6px 0 0;
  font-size: 1.3rem;
  line-height: 30px;
  white-space: nowrap;
}

.family-map-toolbar-photo-link,
.family-map-toolbar-photo,
.family-map-toolbar-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
}

.family-map-toolbar-photo {
  display: block;
  object-fit: cover;
  object-position: center 33%;
}

.family-map-toolbar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 0.75rem;
  font-weight: 700;
}

.family-map-toolbar-name {
  white-space: nowrap;
  font-size: 0.9rem;
}

.family-map-toolbar-years {
  color: #777;
  white-space: nowrap;
  font-size: 0.8rem;
}

.family-map-toolbar-button {
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 0.78rem;
}

.family-map-toolbar-switch {
  margin-left: auto;
  flex: 0 0 auto;
}

.family-map-toolbar .family-map-mode-option {
  padding-left: 13px;
  padding-right: 13px;
}

.family-tree-shell.is-hidden,
.family-directory.is-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .family-map-toolbar-inner {
    flex-wrap: wrap;
  }

  .family-map-toolbar-switch {
    margin-left: 0;
  }
}

/* =========================================================
   FAMILY MAP — SINGLE ROW TOOLBAR
   ========================================================= */

.family-map-header.family-map-toolbar {
  padding: 7px 12px;
  margin-bottom: 8px;
  min-height: 0;
}

.family-map-toolbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.family-map-toolbar-title {
  margin: 0 6px 0 0;
  font-size: 1.25rem;
  line-height: 28px;
  white-space: nowrap;
}

.family-map-toolbar-photo-link,
.family-map-toolbar-photo,
.family-map-toolbar-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
}

.family-map-toolbar-photo {
  display: block;
  object-fit: cover;
  object-position: center 33%;
}

.family-map-toolbar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-size: 0.75rem;
  font-weight: 700;
}

.family-map-toolbar-name {
  white-space: nowrap;
  font-size: 0.88rem;
}

.family-map-toolbar-years {
  color: #777;
  white-space: nowrap;
  font-size: 0.78rem;
}

.family-map-toolbar-button {
  padding: 5px 9px !important;
  font-size: 0.76rem;
  white-space: nowrap;
}

.family-map-toolbar-switch {
  margin-left: auto;
  flex: 0 0 auto;
}

.family-map-toolbar .family-map-mode-option {
  padding: 6px 11px;
}

.family-tree-shell.is-hidden,
.family-directory.is-hidden {
  display: none !important;
}

/* =========================================================
   FULL TREE — FIXED WORKSPACE
   ========================================================= */

html.family-full-tree-mode,
body.family-full-tree-mode {
  height: 100%;
  overflow: hidden !important;
}

body.family-full-tree-mode footer {
  display: none !important;
}

body.family-full-tree-mode main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.family-full-tree-mode .family-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.family-full-tree-mode
.family-map-header.family-map-toolbar {
  width: min(1000px, calc(100% - 24px));
  box-sizing: border-box;
  margin: 8px auto;
}

body.family-full-tree-mode
.family-tree-shell.is-full-tree {
  position: fixed;
  top: var(--family-full-tree-top, 110px);
  right: 0;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: auto;

  margin: 0;
  border-radius: 0;

  overflow: hidden;
}

body.family-full-tree-mode
.family-tree-shell.is-full-tree
.family-tree-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;

  overflow-x: auto;
  overflow-y: auto;
}

body.family-full-tree-mode
.family-tree-shell.is-full-tree
.family-tree-canvas {
  margin: 0;
}

/* =========================================================
   FAMILY DIRECTORY
   ========================================================= */

.family-directory-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 40px;
}

.family-directory-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.family-directory-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 360px;
}

.family-directory-search input[type="search"] {
  width: 100%;
  min-width: 180px;
}

.family-directory-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.family-directory-filter-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid #d8d8df;
  border-radius: 999px;
  background: #ececf1;
}

.family-directory-filter-switch a {
  padding: 6px 12px;
  border-radius: 999px;
  color: #555;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.family-directory-filter-switch a.is-active {
  background: #fff;
  color: #222;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.family-directory-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}

.family-directory-sort label {
  color: #777;
  font-size: 0.8rem;
}

.family-directory-sort select {
  min-width: 130px;
}

.family-directory-section {
  margin-top: 22px;
}

.family-directory-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.family-directory-section-heading h2 {
  margin: 0 0 3px;
}

.family-directory-section-heading p {
  margin: 0;
}

.family-directory-count {
  color: #777;
  font-size: 0.82rem;
  white-space: nowrap;
}

.family-directory-card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(245px, 1fr));
  gap: 12px;
}

.family-directory-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 10px;

  padding: 12px;
  border: 1px solid #dedee5;
  border-radius: 12px;
  background: #fff;
}

.family-directory-card.is-selected {
  border-width: 2px;
}

.family-directory-card-photo-link {
  grid-row: 1 / span 2;
  align-self: start;
}

.family-directory-card-photo,
.family-directory-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.family-directory-card-photo {
  display: block;
  object-fit: cover;
  object-position: center 33%;
}

.family-directory-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece7ff;
  font-weight: 700;
}

.family-directory-card-body {
  min-width: 0;
}

.family-directory-card-name {
  display: block;
  overflow: hidden;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-directory-card-name:hover {
  text-decoration: underline;
}

.family-directory-card-relationship {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
}

.family-directory-card-life {
  margin-top: 2px;
  color: #777;
  font-size: 0.78rem;
}

.family-directory-profile-button {
  justify-self: start;
  padding: 5px 9px !important;
  font-size: 0.75rem;
}

.family-directory-empty {
  padding: 28px;
  border: 1px dashed #d3d3da;
  border-radius: 12px;
  color: #777;
  text-align: center;
}

@media (max-width: 800px) {

  .family-directory-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .family-directory-filter-row {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

/* Ancestor Wall post options */

.profile-wall .post {
  position: relative;
}

.profile-wall .post-options {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
}

.profile-wall .post-options .media-options-button {
  opacity: 0.45;
}

.profile-wall .post-options .media-options-button:hover {
  opacity: 1;
}

.profile-wall .post-options .media-options-menu {
  right: 0;
  left: auto;
}

/* Relationship conflict review */

.relationship-review-card {
  border-left: 4px solid currentColor;
}

.relationship-review-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}



/* ==========================================================
   ANCESTOR PROFILE REBUILD
   Checkpoint 1A
   ========================================================== */

.ancestor-page-shell {
  --ancestor-navy: #0d2f5f;
  --ancestor-blue: #174f91;
  --ancestor-soft-blue: #edf3fa;
  --ancestor-ink: #14233a;
  --ancestor-muted: #647083;
  --ancestor-line: #dce2e9;
  --ancestor-card: #ffffff;
  --ancestor-page: #f6f8fa;

  width: min(1540px, calc(100vw - 32px));
  margin-left: 50%;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;

  color: var(--ancestor-ink);
  font-family: Arial, Helvetica, sans-serif;
}


.ancestor-page-shell a {
  color: var(--ancestor-navy);
}


.ancestor-page-nav {
  align-self: start;
  position: sticky;
  top: 92px;

  padding: 16px 14px;
  border-right: 1px solid var(--ancestor-line);
}


.ancestor-page-nav nav {
  display: grid;
  gap: 3px;
}


.ancestor-page-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;

  text-decoration: none;
  font-size: 0.92rem;
}


.ancestor-page-nav a:hover,
.ancestor-page-nav a.is-current {
  background: #e5eef8;
  color: var(--ancestor-navy);
}


.ancestor-page-nav a.is-current {
  font-weight: 700;
}


.ancestor-page-nav-divider {
  height: 1px;
  background: var(--ancestor-line);
  margin: 16px 0;
}


.ancestor-page-nav-label {
  margin: 0 12px 7px;

  color: var(--ancestor-muted);
  font-size: 0.76rem;
  font-weight: 700;
}


.ancestor-page-nav-secondary a {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.86rem;
}


.ancestor-page-content {
  min-width: 0;
}


/* HERO */

.ancestor-hero {
  position: relative;
  min-height: 250px;
  margin-bottom: 14px;

  overflow: hidden;
  border-radius: 10px;

  background:
    linear-gradient(
      115deg,
      #33455b,
      #536779 55%,
      #24384e
    );
}


.ancestor-hero-cover {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ancestor-hero-cover-placeholder {
  background:
    linear-gradient(
      135deg,
      #51677d 0%,
      #8091a1 48%,
      #344a60 100%
    );
}


.ancestor-hero-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(6, 19, 38, 0.82) 0%,
      rgba(6, 19, 38, 0.52) 42%,
      rgba(6, 19, 38, 0.18) 72%,
      rgba(6, 19, 38, 0.30) 100%
    );
}


.ancestor-hero-content {
  position: relative;
  z-index: 1;

  min-height: 250px;

  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;

  padding: 34px 34px 20px;
}


.ancestor-hero-photo-wrap {
  align-self: end;
}


.ancestor-hero-photo,
.ancestor-hero-avatar {
  width: 190px;
  height: 190px;

  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.24);
}


.ancestor-hero-photo {
  display: block;
  object-fit: cover;
}


.ancestor-hero-avatar {
  display: grid;
  place-items: center;

  background: #e7ebef;
  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  font-weight: 700;
}


.ancestor-hero-identity {
  color: white;
  padding-bottom: 4px;
}


.ancestor-hero-identity h1 {
  margin: 0 0 3px;

  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1;
}


.ancestor-lifespan {
  margin-bottom: 5px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}


.ancestor-viewer-relationship {
  margin-bottom: 10px;
  font-size: 0.98rem;
}


.ancestor-type-badge {
  display: inline-block;

  padding: 5px 10px;
  border-radius: 999px;

  background: rgba(93, 64, 139, 0.88);
  color: white;

  font-size: 0.76rem;
}


.ancestor-hero-actions {
  align-self: start;
}


.ancestor-manage-button {
  display: inline-block;

  padding: 10px 16px;
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.94);
  color: var(--ancestor-navy) !important;

  text-decoration: none;
  font-weight: 700;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}


/* MAIN THREE-COLUMN LAYOUT */

.ancestor-life-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 260px)
    minmax(420px, 1fr)
    minmax(230px, 280px);

  gap: 14px;
  align-items: start;
}


.ancestor-life-left,
.ancestor-life-main,
.ancestor-life-right {
  display: grid;
  gap: 14px;
  min-width: 0;
}


.ancestor-card {
  min-width: 0;

  padding: 16px;

  background: var(--ancestor-card);
  border: 1px solid var(--ancestor-line);
  border-radius: 9px;

  box-shadow: 0 1px 3px rgba(13, 47, 95, 0.04);
}


.ancestor-card h2 {
  margin: 0;

  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  line-height: 1.2;
}


.ancestor-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;

  margin-bottom: 12px;
}


.ancestor-card-heading > a {
  flex: 0 0 auto;

  font-size: 0.76rem;
  font-weight: 600;
}


.ancestor-empty {
  margin: 8px 0 0;
  color: var(--ancestor-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}


/* FAMILY */

.ancestor-family-list {
  display: grid;
  gap: 9px;
}


.ancestor-family-person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;

  color: inherit !important;
  text-decoration: none;
}


.ancestor-family-person img,
.ancestor-family-avatar {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}


.ancestor-family-person img {
  object-fit: cover;
}


.ancestor-family-avatar {
  display: grid;
  place-items: center;

  background: var(--ancestor-soft-blue);
  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}


.ancestor-family-person-text {
  min-width: 0;

  display: grid;
  gap: 2px;
}


.ancestor-family-person-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
}


.ancestor-family-person-text span {
  color: var(--ancestor-muted);
  font-size: 0.77rem;
}


/* GENERATIONS */

.ancestor-generation-summary {
  display: grid;
  gap: 4px;

  padding: 4px 8px 2px;
}


.ancestor-generation-summary strong {
  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-generation-summary span {
  color: var(--ancestor-muted);
  font-size: 0.83rem;
}


/* PHOTO / VIDEO PREVIEWS */

.ancestor-photo-preview,
.ancestor-video-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}


.ancestor-photo-preview a,
.ancestor-video-preview a {
  min-width: 0;
  aspect-ratio: 1 / 0.78;

  overflow: hidden;
  border-radius: 6px;

  background: #edf0f3;
}


.ancestor-photo-preview img,
.ancestor-video-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ancestor-video-placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: var(--ancestor-navy);
  font-size: 1.5rem;
}


/* LIFE STORY */

.ancestor-life-story {
  min-height: 160px;
}


.ancestor-story-text {
  color: #344357;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.62;

  white-space: pre-line;
}


/* TIMELINE */

.ancestor-timeline {
  display: grid;
}


.ancestor-timeline-row {
  display: grid;
  grid-template-columns: 72px 24px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;

  min-height: 90px;
}


.ancestor-timeline-year {
  padding-top: 13px;

  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  font-weight: 700;
  text-align: right;
}


.ancestor-timeline-track {
  position: relative;
}


.ancestor-timeline-track::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;
  background: #ccd7e4;
}


.ancestor-timeline-track span {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 50%;

  width: 10px;
  height: 10px;

  transform: translateX(-50%);

  border: 2px solid white;
  border-radius: 50%;

  background: var(--ancestor-navy);
  box-shadow: 0 0 0 1px var(--ancestor-navy);
}


.ancestor-timeline-event {
  align-self: start;

  margin: 5px 0 12px;
  padding: 12px 14px;

  border: 1px solid var(--ancestor-line);
  border-radius: 7px;

  background: #fff;
}


.ancestor-timeline-event strong {
  display: block;

  margin-bottom: 3px;

  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.96rem;
}


.ancestor-timeline-event p {
  margin: 0;

  color: var(--ancestor-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}


/* PLACES */

.ancestor-places-empty {
  min-height: 170px;

  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr);
  gap: 14px;
  align-items: center;
}


.ancestor-place-map-placeholder {
  min-height: 150px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    radial-gradient(
      circle at 22% 35%,
      #b9d1be 0 9%,
      transparent 10%
    ),
    radial-gradient(
      circle at 74% 48%,
      #b9d1be 0 13%,
      transparent 14%
    ),
    linear-gradient(
      160deg,
      #c9e2ef,
      #e5efe4
    );

  color: rgba(13, 47, 95, 0.58);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
}


.ancestor-places-empty strong {
  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-places-empty p {
  margin-bottom: 0;

  color: var(--ancestor-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}


/* QUICK FACTS */

.ancestor-quick-facts {
  display: grid;
  gap: 12px;
}


.ancestor-quick-facts .ancestor-card-heading {
  margin-bottom: 2px;
}


.ancestor-fact {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}


.ancestor-fact-marker {
  width: 24px;
  height: 24px;

  border-radius: 50%;
  background: var(--ancestor-soft-blue);

  position: relative;
}


.ancestor-fact-marker::after {
  content: "";

  position: absolute;
  inset: 8px;

  border-radius: 50%;
  background: var(--ancestor-navy);
}


.ancestor-fact > div:last-child {
  display: grid;
  gap: 1px;
}


.ancestor-fact strong {
  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
}


.ancestor-fact span {
  color: var(--ancestor-muted);
  font-size: 0.75rem;
}


.ancestor-management-copy {
  margin: 0 0 10px;

  color: var(--ancestor-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}


.ancestor-text-link {
  font-size: 0.8rem;
  font-weight: 600;
}


.ancestor-connect-card p {
  color: var(--ancestor-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}


.ancestor-connect-card .button {
  margin-top: 3px;
}


/* POSTS */

.ancestor-post-form {
  margin-bottom: 18px;
}


.ancestor-post-list {
  display: grid;
  gap: 0;
}


.ancestor-post {
  position: relative;

  padding: 15px 0;
  border-top: 1px solid var(--ancestor-line);
}


.ancestor-post:first-child {
  border-top: 0;
}


.ancestor-post-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}


.ancestor-post-heading > div:first-child {
  display: flex;
  gap: 8px;
  align-items: baseline;
}


.ancestor-post-heading strong {
  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
}


/* RESPONSIVE */

@media (max-width: 1220px) {

  .ancestor-page-shell {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .ancestor-life-grid {
    grid-template-columns:
      minmax(210px, 250px)
      minmax(380px, 1fr);
  }

  .ancestor-life-right {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 900px) {

  .ancestor-page-shell {
    display: block;
  }

  .ancestor-page-nav {
    position: static;

    margin-bottom: 12px;
    padding: 8px 0 12px;

    border-right: 0;
    border-bottom: 1px solid var(--ancestor-line);
  }

  .ancestor-page-nav-primary,
  .ancestor-page-nav-secondary {
    display: flex !important;
    flex-wrap: wrap;
  }

  .ancestor-page-nav-divider,
  .ancestor-page-nav-label {
    display: none;
  }

  .ancestor-hero-content {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .ancestor-hero-photo,
  .ancestor-hero-avatar {
    width: 130px;
    height: 130px;
  }

  .ancestor-hero-actions {
    grid-column: 2;
    justify-self: start;
  }

  .ancestor-life-grid {
    grid-template-columns: 1fr;
  }

  .ancestor-life-right {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

}


@media (max-width: 620px) {

  .ancestor-page-shell {
    width: calc(100vw - 20px);
  }

  .ancestor-hero {
    min-height: 330px;
  }

  .ancestor-hero-content {
    min-height: 330px;

    grid-template-columns: 1fr;
    align-content: end;
    gap: 10px;

    padding: 20px;
  }

  .ancestor-hero-photo,
  .ancestor-hero-avatar {
    width: 112px;
    height: 112px;
  }

  .ancestor-hero-identity h1 {
    font-size: 2rem;
  }

  .ancestor-hero-actions {
    grid-column: auto;
  }

  .ancestor-places-empty {
    grid-template-columns: 1fr;
  }

  .ancestor-timeline-row {
    grid-template-columns: 58px 20px minmax(0, 1fr);
  }

}


/* ==========================================================
   ANCESTOR PROFILE REBUILD
   Checkpoint 2A — structured life events and places
   ========================================================== */

.ancestor-timeline-date-detail {
  margin-top: 3px;

  color: #59677a;
  font-size: 0.79rem;
  font-weight: 600;
}


.ancestor-timeline-place {
  margin-top: 5px;

  color: var(--ancestor-navy);
  font-size: 0.82rem;
  font-weight: 600;
}


.ancestor-timeline-event p {
  margin-top: 7px;
}


/* REAL PLACE DATA */

.ancestor-places-list {
  display: grid;
  gap: 10px;
}


.ancestor-place-item {
  padding: 13px 14px;

  border: 1px solid var(--ancestor-line);
  border-radius: 7px;

  background: #fbfcfd;
}


.ancestor-place-heading {
  display: grid;
  gap: 2px;
}


.ancestor-place-heading strong {
  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}


.ancestor-place-heading > span {
  color: var(--ancestor-muted);
  font-size: 0.78rem;
}


.ancestor-place-events {
  display: grid;
  gap: 5px;

  margin-top: 9px;
  padding-top: 9px;

  border-top: 1px solid #e5e9ee;
}


.ancestor-place-event {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: baseline;

  color: #48566a;
  font-size: 0.8rem;
}


.ancestor-place-event-date {
  color: var(--ancestor-navy);
  font-weight: 700;
}


.ancestor-place-event-role {
  padding: 2px 6px;

  border-radius: 999px;

  background: var(--ancestor-soft-blue);
  color: var(--ancestor-navy);

  font-size: 0.68rem;
  font-weight: 700;
}


.ancestor-places-empty-state {
  min-height: 115px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  padding: 18px;

  border: 1px dashed #ccd6e2;
  border-radius: 7px;

  background: #fafbfd;
}


.ancestor-places-empty-state strong {
  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-places-empty-state p {
  margin: 6px 0 0;

  color: var(--ancestor-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}


.ancestor-places-map-note {
  margin: 10px 2px 0;

  color: var(--ancestor-muted);
  font-size: 0.74rem;
}



/* ==========================================================
   ANCESTOR PROFILE REBUILD
   Checkpoint 2B1 — Life Events management
   ========================================================== */

.ancestor-editor-page {
  max-width: 1250px;
  margin: 0 auto;
}

.ancestor-editor-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}

.ancestor-editor-heading h1 {
  margin: 3px 0 7px;
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
}

.ancestor-editor-heading p {
  margin: 0;
  color: #647083;
}

.ancestor-editor-layout {
  display: grid;
  grid-template-columns:
    minmax(320px, 0.75fr)
    minmax(480px, 1.25fr);
  gap: 18px;
  align-items: start;
}

.ancestor-event-form-card h2,
.ancestor-event-list-card h2 {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}

.ancestor-editor-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ancestor-event-manager-list {
  display: grid;
}

.ancestor-event-manager-item {
  display: grid;
  grid-template-columns:
    72px
    minmax(0, 1fr)
    auto;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid #e0e4e9;
}

.ancestor-event-manager-item:first-child {
  border-top: 0;
}

.ancestor-event-manager-year {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}

.ancestor-event-manager-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ancestor-event-manager-content > strong {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}

.ancestor-event-manager-content p {
  margin: 5px 0 0;
  color: #48566a;
  line-height: 1.45;
}

.ancestor-event-manager-actions {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
}

.ancestor-event-manager-actions form {
  display: block;
}

.ancestor-event-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9e3434;
  font: inherit;
  font-weight: 600;
}

.ancestor-life-edit-notice {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #dce2e9;
  border-radius: 9px;
  background: #f7f9fb;
}

.ancestor-life-edit-notice > strong {
  color: #0d2f5f;
}

.ancestor-life-edit-notice .secondary {
  margin-left: 0;
}

@media (max-width: 850px) {

  .ancestor-editor-heading {
    display: block;
  }

  .ancestor-editor-heading > a {
    margin-top: 12px;
  }

  .ancestor-editor-layout {
    grid-template-columns: 1fr;
  }

  .ancestor-event-manager-item {
    grid-template-columns:
      56px
      minmax(0, 1fr);
  }

  .ancestor-event-manager-actions {
    grid-column: 2;
  }

}


/* ==========================================================
   ANCESTOR PROFILE REBUILD
   Checkpoint 2B2A — Places management
   ========================================================== */

.ancestor-place-editor-card h2,
.ancestor-place-event-card h2 {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-place-advanced {
  padding: 12px 0;
}


.ancestor-place-advanced summary {
  cursor: pointer;
  color: #0d2f5f;
  font-weight: 700;
}


.ancestor-place-advanced[open] summary {
  margin-bottom: 14px;
}


.ancestor-place-connect-form {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e4e9;
}


.ancestor-place-linked-events {
  display: grid;
}


.ancestor-place-linked-event {
  padding: 14px 0;
  border-top: 1px solid #e0e4e9;
}


.ancestor-place-linked-event:first-child {
  border-top: 0;
}


.ancestor-place-linked-heading {
  margin-bottom: 7px;

  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-place-link-list {
  display: grid;
  gap: 5px;
}


.ancestor-place-link-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;

  padding: 7px 9px;

  border-radius: 6px;
  background: #f7f9fb;

  font-size: 0.83rem;
}


.ancestor-place-link-row form {
  display: block;
}



/* ==========================================================
   ANCESTOR PROFILE REBUILD
   Checkpoint 2B2B — Interactive life map
   ========================================================== */

.ancestor-map-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(190px, 0.75fr);
  gap: 14px;
  align-items: stretch;
}


.ancestor-map-column {
  position: relative;
  min-width: 0;
}


.ancestor-life-map {
  width: 100%;
  min-height: 320px;

  overflow: hidden;

  border: 1px solid #d5dde6;
  border-radius: 8px;

  background: #dce8ed;
}


.ancestor-map-empty {
  min-height: 250px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 24px;

  border: 1px dashed #c8d2de;
  border-radius: 8px;

  background: #f8fafc;

  text-align: center;
}


.ancestor-map-empty p {
  max-width: 320px;
  margin: 6px 0 0;

  color: var(--ancestor-muted);
  font-size: 0.84rem;
}


.ancestor-key-places {
  max-height: 320px;
  overflow-y: auto;

  padding-left: 2px;
}


.ancestor-key-places-heading {
  margin-bottom: 9px;

  color: var(--ancestor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 700;
}


.ancestor-key-place {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 8px;

  padding: 9px 0;

  border-top: 1px solid #e3e7ec;
}


.ancestor-key-place:first-of-type {
  border-top: 0;
}


.ancestor-key-place-marker {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--ancestor-navy);
  color: white;

  font-size: 0.69rem;
  font-weight: 700;
}


.ancestor-key-place-content {
  min-width: 0;
  display: grid;
  gap: 2px;
}


.ancestor-key-place-content > strong {
  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
}


.ancestor-key-place-location {
  color: var(--ancestor-muted);
  font-size: 0.7rem;
}


.ancestor-key-place-events {
  display: grid;
  gap: 2px;

  margin-top: 4px;

  color: #4d5b6d;
  font-size: 0.71rem;
  line-height: 1.3;
}


.ancestor-key-place-events span {
  color: var(--ancestor-navy);
  font-weight: 700;
}


.ancestor-key-place-events small {
  color: var(--ancestor-muted);
}


.ancestor-unmapped-place {
  display: inline-block;

  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;

  border-radius: 999px;

  background: #f0f2f4;
  color: #7a8491;

  font-size: 0.64rem;
  font-weight: 700;
}


.ancestor-map-popup {
  min-width: 150px;
}


.ancestor-map-popup strong {
  display: block;

  margin-bottom: 4px;

  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-map-popup-event {
  margin-top: 3px;
  font-size: 0.76rem;
}


.ancestor-map-popup-event span {
  font-weight: 700;
}


@media (max-width: 760px) {

  .ancestor-map-layout {
    grid-template-columns: 1fr;
  }

  .ancestor-key-places {
    max-height: none;
  }

  .ancestor-life-map {
    min-height: 285px;
  }

}


/* ==========================================================
   Checkpoint 2B2B map repair
   OpenFreeMap + MapLibre
   ========================================================== */

/* Author CSS can override the HTML hidden attribute.
   Make the intended hidden state explicit. */

.ancestor-map-empty[hidden],
.ancestor-life-map[hidden] {
  display: none !important;
}


.ancestor-life-map {
  width: 100%;
  height: 320px;
  min-height: 320px;

  border: 1px solid #d5dde6;
  border-radius: 8px;

  overflow: hidden;
  background: #e9eef1;
}


.ancestor-life-map .maplibregl-canvas {
  border-radius: 8px;
}


.ancestor-life-map
.maplibregl-popup-content {
  border-radius: 7px;
  padding: 10px 12px;

  box-shadow:
    0 3px 12px
    rgba(20, 38, 60, 0.18);
}


.ancestor-life-map
.maplibregl-ctrl-attrib {
  font-size: 9px;
}



/* Map runtime diagnostic */

.ancestor-map-runtime-error {
  height: 100%;
  min-height: 320px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 5px;
  padding: 24px;

  text-align: center;

  color: #667386;
  background: #f7f9fb;
}


.ancestor-map-runtime-error strong {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}


.ancestor-map-runtime-error span {
  max-width: 360px;
  font-size: 0.78rem;
}



/* ==========================================================
   ANCESTOR PLACES
   Search, edit, directional coordinates, deletion
   ========================================================== */

.ancestor-place-search-form {
  margin-bottom: 6px;
}


.ancestor-place-search-results {
  margin-top: 20px;
}


.ancestor-place-search-results h3,
.ancestor-place-editor-card h3 {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-place-search-result {
  margin-bottom: 12px;
  padding: 12px;

  border: 1px solid #dce2e9;
  border-radius: 8px;

  background: #f8fafc;
}


.ancestor-place-search-result > strong {
  display: block;

  margin-bottom: 3px;

  color: #0d2f5f;
  line-height: 1.35;
}


.ancestor-place-search-result > span {
  display: block;
  margin-bottom: 10px;
}


.ancestor-place-search-result form {
  margin-top: 8px;
}


.ancestor-place-attribution {
  margin-top: 8px;
}


.ancestor-place-divider {
  margin: 24px 0;

  border: 0;
  border-top: 1px solid #dce2e9;
}


.ancestor-place-library-card {
  max-width: 1250px;
  margin-top: 18px;
}


.ancestor-place-library {
  display: grid;
}


.ancestor-place-library-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  padding: 14px 0;

  border-top: 1px solid #e0e4e9;
}


.ancestor-place-library-item:first-child {
  border-top: 0;
}


.ancestor-place-library-info {
  display: grid;
  gap: 3px;

  min-width: 0;
}


.ancestor-place-library-info > strong {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-place-library-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;

  font-size: 0.8rem;
}


.ancestor-place-library-actions form {
  display: block;
  margin: 0;
}


.ancestor-place-text-button,
.ancestor-place-delete-button {
  padding: 0;

  border: 0;
  background: transparent;

  font: inherit;
  font-weight: 600;

  cursor: pointer;
}


.ancestor-place-text-button {
  color: #315d8a;
}


.ancestor-place-delete-button {
  color: #9e3434;
}


@media (max-width: 700px) {

  .ancestor-place-library-item {
    display: block;
  }

  .ancestor-place-library-actions {
    justify-content: flex-start;

    margin-top: 10px;
  }

}


/* ==========================================================
   ANCESTOR PROFILE CLEANUP
   Family Map / Life Story alignment
   ========================================================== */

/*
   ancestor-life-main is a <main> element. Reset generic site
   main styling so the center column starts on the same line
   as the left and right ancestor columns.
*/

main.ancestor-life-main {
  width: auto;
  max-width: none;

  margin: 0;
  padding: 0;

  align-self: start;
}


/*
   Life Story should size naturally to its content rather
   than being forced into a special minimum-height box.
*/

.ancestor-life-story {
  min-height: 0;
}



/* ==========================================================
   ANCESTOR LIFE EVENTS
   Structured historical dates
   ========================================================== */

.ancestor-event-date-section {
  margin: 18px 0 22px;
  padding: 14px;

  border: 1px solid #dce2e9;
  border-radius: 8px;

  background: #f8fafc;
}


.ancestor-event-date-section h3 {
  margin: 0 0 4px;

  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-event-date-fields {
  display: grid;
  grid-template-columns:
    1fr
    1.2fr
    0.8fr;

  gap: 10px;

  margin-top: 12px;
}


.ancestor-event-end-date {
  margin-top: 12px;
}


.ancestor-event-end-date summary {
  cursor: pointer;

  color: #315d8a;
  font-size: 0.82rem;
  font-weight: 700;
}


.ancestor-date-format-example {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  align-items: center;

  margin-top: 13px;

  font-size: 0.72rem;
}


.ancestor-date-format-example span {
  margin-right: 2px;
  color: #778395;
}


.ancestor-date-format-example strong {
  padding: 3px 7px;

  border-radius: 999px;

  background: #e9eef4;
  color: #344b67;

  font-size: 0.7rem;
}


.ancestor-event-manager-year {
  min-width: 95px;
  width: auto;
}


@media (max-width: 620px) {

  .ancestor-event-date-fields {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================
   LIFE EVENT DATE LAYOUT FIX
   Structured dates need more room than year-only dates.
   ========================================================== */

.ancestor-event-manager-item {
  grid-template-columns:
    125px
    minmax(0, 1fr)
    auto;

  gap: 14px;
}


.ancestor-event-manager-year {
  width: auto;
  min-width: 0;

  white-space: nowrap;

  text-align: right;

  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;

  line-height: 1.3;
}


.ancestor-event-manager-content {
  min-width: 0;
}


.ancestor-event-manager-content > strong {
  display: block;
  line-height: 1.3;
}


@media (max-width: 700px) {

  .ancestor-event-manager-item {
    grid-template-columns:
      1fr
      auto;

    gap: 5px 12px;
  }


  .ancestor-event-manager-year {
    grid-column: 1;

    text-align: left;
  }


  .ancestor-event-manager-content {
    grid-column: 1 / -1;
  }


  .ancestor-event-manager-actions {
    grid-column: 2;
    grid-row: 1;

    justify-self: end;
  }

}



/* ==========================================================
   ANCESTOR LINKED PROFILES
   ========================================================== */

.ancestor-linked-public-list {
  display: grid;
  gap: 7px;
}


.ancestor-linked-public-item {
  display: grid;
  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;

  gap: 9px;
  align-items: center;

  padding: 8px;

  border: 1px solid #e0e5eb;
  border-radius: 7px;

  background: #f8fafc;

  color: inherit;
  text-decoration: none;
}


.ancestor-linked-public-item:hover {
  border-color: #b9c8d9;
  background: #f2f6fa;
}


.ancestor-linked-service-mark {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 7px;

  background: #e6edf5;
  color: #0d2f5f;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
}


.ancestor-linked-public-copy {
  min-width: 0;

  display: grid;
  gap: 1px;
}


.ancestor-linked-public-copy strong {
  color: #0d2f5f;
  font-size: 0.8rem;
}


.ancestor-linked-public-copy small {
  overflow: hidden;

  color: #657286;
  font-size: 0.68rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.ancestor-linked-external-arrow {
  color: #66788d;
  font-size: 0.85rem;
}


.ancestor-linked-advanced {
  margin: 12px 0;
}


.ancestor-linked-advanced summary {
  cursor: pointer;

  color: #315d8a;
  font-size: 0.82rem;
  font-weight: 700;
}


.ancestor-linked-primary-check {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  align-items: center;

  margin: 14px 0;
}


.ancestor-linked-primary-check input {
  width: auto !important;
  margin: 0;
}


.ancestor-linked-manager-list {
  display: grid;
}


.ancestor-linked-manager-item {
  display: grid;
  grid-template-columns:
    32px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  padding: 13px 0;

  border-top: 1px solid #e0e4e9;
}


.ancestor-linked-manager-item:first-child {
  border-top: 0;
}


.ancestor-linked-manager-info {
  min-width: 0;

  display: grid;
  gap: 3px;
}


.ancestor-linked-manager-info strong {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-linked-manager-info > span {
  color: #667386;
  font-size: 0.78rem;
}


.ancestor-linked-manager-info > a {
  width: fit-content;
  font-size: 0.76rem;
}


.ancestor-linked-manager-actions {
  display: flex;
  gap: 9px;
  align-items: start;

  font-size: 0.78rem;
}


.ancestor-linked-manager-actions form {
  display: block;
  margin: 0;
}


.ancestor-linked-primary {
  display: inline-block;

  margin-left: 5px;
  padding: 2px 5px;

  border-radius: 999px;

  background: #e8eef6;
  color: #315d8a;

  font-family: sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}


@media (max-width: 620px) {

  .ancestor-linked-manager-item {
    grid-template-columns:
      32px
      minmax(0, 1fr);
  }


  .ancestor-linked-manager-actions {
    grid-column: 2;
  }

}



/* ==========================================================
   EXTERNAL PROFILE REVIEW
   Wikipedia checkpoint 3B1
   ========================================================== */

.ancestor-linked-review-link {
  font-weight: 700;
}


.ancestor-external-review-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

  gap: 18px;
  align-items: start;
}


.ancestor-external-source-heading {
  display: flex;
  gap: 10px;
  align-items: center;

  margin-bottom: 14px;
}


.ancestor-external-source-heading h2 {
  margin: 1px 0 0;

  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-wikipedia-mark {
  width: 38px;
  height: 38px;

  font-size: 1rem;
}


.ancestor-external-thumbnail {
  display: block;

  max-width: 220px;
  max-height: 250px;

  margin: 0 0 15px;

  border: 1px solid #dce2e9;
  border-radius: 7px;

  object-fit: cover;
}


.ancestor-external-description {
  margin: 0 0 12px;

  color: #667386;

  font-size: 0.86rem;
  font-style: italic;
}


.ancestor-external-summary {
  margin-bottom: 18px;

  color: #344357;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.96rem;
  line-height: 1.58;
}


.ancestor-external-metadata {
  display: grid;
  gap: 6px;

  margin: 15px 0;
  padding: 12px;

  border-radius: 7px;

  background: #f7f9fb;
}


.ancestor-external-metadata > div {
  display: flex;
  justify-content: space-between;

  gap: 12px;

  font-size: 0.76rem;
}


.ancestor-external-metadata span {
  color: #6b788a;
}


.ancestor-external-metadata strong {
  color: #0d2f5f;
}


.ancestor-review-safety-note,
.ancestor-review-warning {
  display: grid;
  gap: 4px;

  margin: 16px 0;
  padding: 13px;

  border-radius: 7px;
}


.ancestor-review-safety-note {
  border: 1px solid #cddce9;
  background: #f2f7fb;
}


.ancestor-review-warning {
  border: 1px solid #e3d49e;
  background: #fff9e8;
}


.ancestor-review-safety-note strong,
.ancestor-review-warning strong {
  color: #0d2f5f;
}


.ancestor-review-safety-note span,
.ancestor-review-warning span {
  color: #58687b;
  font-size: 0.8rem;
  line-height: 1.4;
}


.ancestor-review-next {
  margin-top: 20px;
}


.ancestor-review-next h3 {
  color: #0d2f5f;
  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-external-review-error {
  max-width: 700px;
}


@media (max-width: 850px) {

  .ancestor-external-review-layout {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================
   WIKIDATA STRUCTURED CANDIDATE FACTS
   Checkpoint 3B2
   ========================================================== */

.ancestor-wikidata-candidates {
  margin-top: 18px;
}


.ancestor-wikidata-intro {
  max-width: 760px;

  margin: 0 0 16px;

  color: #5d6b7e;
  font-size: 0.84rem;
  line-height: 1.45;
}


.ancestor-candidate-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.ancestor-candidate-fact {
  min-width: 0;

  padding: 12px;

  border: 1px solid #dfe5eb;
  border-radius: 8px;

  background: #fafbfd;
}


.ancestor-candidate-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;

  gap: 8px;

  margin-bottom: 8px;
}


.ancestor-candidate-property {
  color: #5d6b7e;

  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}


.ancestor-candidate-value {
  color: #0d2f5f;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}


.ancestor-candidate-value a {
  color: inherit;
}


.ancestor-candidate-source {
  margin-top: 8px;

  color: #8995a4;

  font-size: 0.62rem;
}


.ancestor-candidate-status {
  flex: 0 0 auto;

  padding: 3px 6px;

  border-radius: 999px;

  font-family: sans-serif;
  font-size: 0.58rem;
  font-weight: 700;

  white-space: nowrap;
}


.ancestor-candidate-status-match {
  background: #e8f3ec;
  color: #28623c;
}


.ancestor-candidate-status-detail {
  background: #eaf1fb;
  color: #315f92;
}


.ancestor-candidate-status-new {
  background: #f0ebfb;
  color: #6446a2;
}


.ancestor-candidate-status-different {
  background: #fbeaea;
  color: #9a3838;
}


.ancestor-candidate-status-review {
  background: #f2f3f5;
  color: #657080;
}


@media (max-width: 1050px) {

  .ancestor-candidate-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 650px) {

  .ancestor-candidate-grid {
    grid-template-columns: 1fr;
  }


  .ancestor-candidate-heading {
    flex-direction: column;
  }

}



/* ==========================================================
   WIKIDATA CANDIDATE ACTIONS
   Checkpoint 3B3A
   ========================================================== */

.ancestor-candidate-action {
  margin: 12px 0 0;
}


.ancestor-candidate-accept {
  width: auto;

  padding: 7px 10px;

  border: 1px solid #6b55d9;
  border-radius: 7px;

  background: #f0ebff;
  color: #5638c7;

  font-size: 0.72rem;
  font-weight: 700;

  cursor: pointer;
}


.ancestor-candidate-accept:hover {
  background: #e7dfff;
}


.ancestor-candidate-linked {
  margin-top: 12px;

  color: #28623c;

  font-size: 0.7rem;
  font-weight: 700;
}


.ancestor-candidate-future,
.ancestor-candidate-permission {
  margin-top: 12px;

  color: #788493;

  font-size: 0.68rem;
}


.ancestor-candidate-permission {
  font-style: italic;
}



/* ==========================================================
   ANCESTOR QUICK FACTS
   Structured person_attributes display
   ========================================================== */

.ancestor-quick-fact-list {
  display: grid;
}


.ancestor-quick-fact-row {
  padding: 10px 0;

  border-top: 1px solid #e2e6eb;
}


.ancestor-quick-fact-row:first-child {
  padding-top: 2px;
  border-top: 0;
}


.ancestor-quick-fact-label {
  margin-bottom: 4px;

  color: #6b7888;

  font-size: 0.66rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.035em;
}


.ancestor-quick-fact-values {
  display: flex;
  flex-wrap: wrap;

  gap: 4px 7px;
}


.ancestor-quick-fact-value {
  color: #183a62;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}


.ancestor-quick-fact-value:not(:last-child)::after {
  content: "·";

  margin-left: 7px;

  color: #9aa4b0;
  font-family: sans-serif;
}


.ancestor-quick-fact-value small {
  display: block;

  color: #748193;
  font-family: sans-serif;
  font-size: 0.64rem;
  font-weight: 400;
}



/* ==========================================================
   DIRECT ANCESTOR PLACE CONNECTIONS
   ========================================================== */

.ancestor-place-person-card {
  align-self: start;
}


.ancestor-place-direct-list {
  display: grid;

  margin-top: 18px;

  border-top: 1px solid #e0e5eb;
}


.ancestor-place-direct-row {
  display: flex;
  justify-content: space-between;
  align-items: start;

  gap: 14px;

  padding: 12px 0;

  border-bottom: 1px solid #e0e5eb;
}


.ancestor-place-direct-row > div {
  min-width: 0;

  display: grid;
  gap: 2px;
}


.ancestor-place-direct-row strong {
  color: #0d2f5f;

  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-place-direct-row span {
  color: #425a74;

  font-size: 0.8rem;
  font-weight: 700;
}


.ancestor-place-direct-row small {
  display: block;

  font-size: 0.72rem;
}


.ancestor-place-direct-row form {
  flex: 0 0 auto;

  margin: 0;
}


.ancestor-place-direct-note {
  display: grid;
  gap: 3px;

  margin-top: 16px;
  padding: 11px 12px;

  border: 1px solid #d9e2eb;
  border-radius: 7px;

  background: #f6f9fb;
}


.ancestor-place-direct-note strong {
  color: #315d8a;

  font-size: 0.76rem;
}


.ancestor-place-direct-note span {
  color: #667386;

  font-size: 0.72rem;
  line-height: 1.4;
}


@media (max-width: 650px) {

  .ancestor-place-direct-row {
    display: grid;
  }


  .ancestor-place-direct-row form {
    justify-self: start;
  }

}



/* ==========================================================
   ANCESTOR CONTENT EDITORS
   ========================================================== */

.ancestor-life-story-editor textarea {
  width: 100%;
  min-height: 360px;

  resize: vertical;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.6;
}


.ancestor-story-text {
  white-space: pre-line;
}


.ancestor-profile-image-editor-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 18px;
  align-items: start;
}


.ancestor-profile-image-preview {
  display: block;

  margin: 12px 0 18px;

  border: 1px solid #dce2e8;
  border-radius: 8px;

  object-fit: cover;
}


.ancestor-profile-image-preview-portrait {
  width: 180px;
  height: 180px;

  border-radius: 50%;
}


.ancestor-profile-image-preview-cover {
  width: 100%;
  max-height: 260px;

  aspect-ratio: 16 / 6;
}


.ancestor-profile-image-empty {
  display: grid;
  place-items: center;

  margin: 12px 0 18px;

  background: #edf1f5;
  color: #718095;
}


.ancestor-profile-image-empty-portrait {
  width: 180px;
  height: 180px;

  border-radius: 50%;

  color: #315d8a;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 700;
}


.ancestor-profile-image-empty-cover {
  width: 100%;

  aspect-ratio: 16 / 6;

  border-radius: 8px;
}


.ancestor-image-remove-option {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  align-items: center;

  margin-top: 14px;
}


.ancestor-image-remove-option input {
  width: auto !important;
  margin: 0;
}


.ancestor-profile-image-note {
  margin: 14px 0;
}


.ancestor-management-edit-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 16px;
}


.ancestor-management-edit-item {
  display: grid;
  gap: 3px;

  padding: 13px 14px;

  border: 1px solid #dce3ea;
  border-radius: 8px;

  background: #f8fafc;

  text-decoration: none;
}


.ancestor-management-edit-item:hover {
  border-color: #b9c9d9;
  background: #f2f6fa;
}


.ancestor-management-edit-item strong {
  color: #0d2f5f;
}


.ancestor-management-edit-item span {
  color: #697789;

  font-size: 0.76rem;
}


.ancestor-hero-actions {
  gap: 7px;
}


.ancestor-edit-images-button {
  opacity: 0.92;
}


@media (max-width: 720px) {

  .ancestor-profile-image-editor-grid,
  .ancestor-management-edit-grid {
    grid-template-columns: 1fr;
  }

}



/* ==========================================================
   ANCESTOR TIMELINE PREVIEW / FULL TIMELINE
   ========================================================== */

.ancestor-timeline-more {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 5px;
  padding-top: 13px;

  border-top: 1px solid var(--ancestor-line);
}


.ancestor-timeline-more a {
  color: var(--ancestor-navy);

  font-size: 0.82rem;
  font-weight: 700;

  text-decoration: none;
}


.ancestor-timeline-more span {
  color: var(--ancestor-muted);

  font-size: 0.74rem;
}


.ancestor-full-timeline-page {
  width: min(900px, calc(100% - 32px));

  margin: 30px auto 60px;
}


.ancestor-full-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;

  margin-bottom: 22px;
}


.ancestor-full-timeline-header h1 {
  margin: 3px 0 3px;

  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-full-timeline-header p {
  margin: 8px 0 0;

  color: var(--ancestor-muted);
}


.ancestor-full-timeline-lifespan {
  color: var(--ancestor-muted);

  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-full-timeline-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.ancestor-full-timeline-nav {
  position: sticky;
  z-index: 5;
  top: 8px;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 24px;
  padding: 9px;

  border: 1px solid var(--ancestor-line);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 4px 14px rgba(20, 42, 68, 0.06);
}


.ancestor-full-timeline-nav a {
  padding: 5px 9px;

  border-radius: 999px;

  color: var(--ancestor-navy);
  background: var(--ancestor-soft-blue);

  font-size: 0.76rem;
  font-weight: 700;

  text-decoration: none;
}


.ancestor-full-timeline-nav a:hover {
  text-decoration: underline;
}


.ancestor-full-timeline-body {
  display: grid;

  gap: 30px;
}


.ancestor-timeline-period {
  scroll-margin-top: 90px;
}


.ancestor-timeline-period-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
  padding-bottom: 7px;

  border-bottom: 1px solid var(--ancestor-line);
}


.ancestor-timeline-period-heading h2 {
  margin: 0;

  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
}


.ancestor-timeline-period-heading span {
  color: var(--ancestor-muted);

  font-size: 0.73rem;
}


@media (max-width: 700px) {

  .ancestor-full-timeline-header {
    display: grid;
  }


  .ancestor-full-timeline-actions {
    justify-content: start;
  }


  .ancestor-full-timeline-nav {
    position: static;
  }

}



/* ==========================================================
   IMPORTED WIKIPEDIA PROFILE CONTENT
   ========================================================== */

.ancestor-wikipedia-card {
  scroll-margin-top: 80px;
}


.ancestor-wikipedia-description {
  margin-bottom: 9px;

  color: var(--ancestor-muted);

  font-size: 0.82rem;
  font-style: italic;
}


.ancestor-wikipedia-summary {
  color: #344357;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.94rem;
  line-height: 1.62;

  white-space: pre-line;
}


.ancestor-wikipedia-attribution {
  display: grid;
  gap: 2px;

  margin-top: 15px;
  padding-top: 10px;

  border-top: 1px solid var(--ancestor-line);

  color: var(--ancestor-muted);

  font-size: 0.68rem;
  line-height: 1.4;
}


.ancestor-wikipedia-attribution a {
  color: var(--ancestor-navy);
}


.ancestor-linked-refresh-form {
  display: inline;
  margin: 0;
}


.ancestor-linked-refresh-button {
  padding: 0;

  border: 0;

  background: transparent;

  color: var(--ancestor-navy);

  font: inherit;
  font-size: inherit;
  text-decoration: underline;

  cursor: pointer;
}



/* ==========================================================
   FAMILYSEARCH CONNECTION
   ========================================================== */

.ancestor-familysearch-connection {
  margin-bottom: 18px;
}


.ancestor-familysearch-connection p {
  margin: 5px 0 0;
}


.ancestor-familysearch-status {
  display: grid;
  gap: 3px;

  margin: 10px 0 14px;
  padding: 11px 13px;

  border: 1px solid var(--ancestor-line);
  border-radius: 7px;

  background: #f7f9fb;
}


.ancestor-familysearch-status.is-connected {
  background: #f4f8f4;
}


.ancestor-familysearch-status strong {
  color: var(--ancestor-navy);
}


.ancestor-familysearch-status span {
  color: var(--ancestor-muted);

  font-size: 0.8rem;
  line-height: 1.45;
}



/* ==========================================================
   FAMILY RELATIONSHIP MANAGEMENT
   ========================================================== */

.ancestor-card-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


.ancestor-relationship-management-list {
  display: grid;
}


.ancestor-relationship-management-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px 0;

  border-bottom: 1px solid var(--ancestor-line);
}


.ancestor-relationship-management-row:last-child {
  border-bottom: 0;
}


.ancestor-relationship-management-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 6px 10px;
}


.ancestor-relationship-management-main > a {
  color: var(--ancestor-navy);
}


.ancestor-relationship-management-label {
  color: var(--ancestor-muted);

  font-size: 0.82rem;
}


.ancestor-relationship-status {
  padding: 3px 7px;

  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 700;
}


.ancestor-relationship-status.entered {
  background: var(--ancestor-soft-blue);

  color: var(--ancestor-navy);
}


.ancestor-relationship-status.calculated {
  background: #f0f2f4;

  color: var(--ancestor-muted);
}


.ancestor-relationship-management-actions {
  flex: 0 0 auto;

  font-size: 0.8rem;
}


.ancestor-relationship-correction form {
  display: grid;
  gap: 16px;

  max-width: 650px;
}


.ancestor-relationship-correction label {
  display: grid;
  gap: 6px;

  color: var(--ancestor-navy);

  font-weight: 700;
}


.ancestor-relationship-correction select,
.ancestor-relationship-correction input {
  width: 100%;
  box-sizing: border-box;

  padding: 9px 10px;
}


.ancestor-correction-current {
  display: grid;
  gap: 4px;

  margin-bottom: 20px;
  padding: 12px 14px;

  border: 1px solid var(--ancestor-line);
  border-radius: 7px;

  background: #f7f9fb;
}


.ancestor-correction-current span {
  color: var(--ancestor-muted);

  font-size: 0.74rem;
}


.ancestor-correction-current strong {
  color: var(--ancestor-navy);

  font-family: Georgia, "Times New Roman", serif;
}


.ancestor-relationship-detail-field {
  display: grid;
  gap: 7px;

  padding: 12px;

  border: 1px solid var(--ancestor-line);
  border-radius: 7px;

  background: #fafbfc;
}


.ancestor-relationship-detail-field[hidden] {
  display: none;
}


.ancestor-correction-warning {
  padding: 12px 14px;

  border-left: 3px solid var(--ancestor-navy);

  background: #f7f9fb;
}


.ancestor-correction-warning p {
  margin: 4px 0 0;

  color: var(--ancestor-muted);

  font-size: 0.82rem;
  line-height: 1.45;
}


@media (max-width: 700px) {

  .ancestor-relationship-management-row {
    display: grid;
  }

}



.ancestor-impact-confirmation {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 9px;

  margin-top: 12px;

  font-weight: 600 !important;
}


.ancestor-impact-confirmation input {
  width: auto !important;
  margin-top: 3px;
}


.ancestor-correction-history-note {
  color: var(--ancestor-muted);

  font-size: 0.8rem;
  line-height: 1.45;
}



.ancestor-family-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* =========================================================
   FAMILY GEOGRAPHY MAP SHELL
   ========================================================= */

.family-geography-page {
  max-width: 1500px;
}

.family-geography-header {
  display: grid;
  grid-template-columns:
    minmax(150px, auto)
    minmax(260px, 1fr)
    minmax(500px, 520px);
  align-items: center;
  gap: 24px;

  background: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;

  padding: 10px 16px;
  margin-bottom: 12px;
}

.family-geography-title h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.family-geography-person {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;
}

.family-geography-person-photo,
.family-geography-person-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border-radius: 50%;
}

.family-geography-person-photo {
  display: block;
  object-fit: cover;
}

.family-geography-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ece7ff;
  font-weight: 800;
}

.family-geography-person strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-geography-profile-link {
  flex: 0 0 auto;

  padding: 7px 11px;

  background: #ece5ff;
  color: #613dc1;

  border-radius: 999px;

  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.family-geography-mode-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;

  padding: 4px;

  background: #ededf2;
  border: 1px solid #d8d8df;
  border-radius: 999px;
}

.family-geography-mode-switch a {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 36px;
  padding: 7px 13px;

  border-radius: 999px;

  color: #555;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;

  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.family-geography-mode-switch a:hover {
  color: #222;
}

.family-geography-mode-switch a.is-active {
  background: #fff;
  color: #171717;

  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.10);
}


/* ---------------------------------------------------------
   MAIN MAP LAYOUT
   --------------------------------------------------------- */

.family-geography-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(310px, 1fr);

  gap: 14px;

  align-items: stretch;
}

.family-geography-map-card,
.family-geography-panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
}

.family-geography-map-card {
  min-width: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.family-geography-map-tools {
  min-height: 58px;

  padding: 11px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-bottom: 1px solid #e6e6e8;
}

.family-geography-map-tools > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.family-geography-status {
  padding: 4px 8px;

  background: #eee9ff;
  color: #613dc1;

  border-radius: 999px;

  font-size: 0.73rem;
  font-weight: 700;
}

.family-geography-utility-buttons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.family-geography-utility-buttons button {
  width: auto;
  margin: 0;
  padding: 7px 10px;

  border: 1px solid #ddd;
  border-radius: 9px;

  background: #fff;
  color: #555;

  font-size: 0.78rem;
  font-weight: 700;
}

.family-geography-utility-buttons button:disabled {
  opacity: 0.62;
}


/* ---------------------------------------------------------
   MAP PLACEHOLDER

   No actual map library or data is loaded yet.
   --------------------------------------------------------- */

.family-geography-map-placeholder {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 28% 30%,
      rgba(97, 61, 193, 0.08),
      transparent 24%
    ),
    radial-gradient(
      circle at 73% 66%,
      rgba(70, 115, 95, 0.08),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #f1f3f2,
      #e9eceb
    );
}

.family-geography-map-placeholder::before,
.family-geography-map-placeholder::after {
  content: "";

  position: absolute;
  inset: -20%;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.42) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  transform: rotate(-8deg);
}

.family-geography-map-placeholder::after {
  background-size: 145px 145px;
  opacity: 0.6;
}

.family-geography-empty {
  position: relative;
  z-index: 1;

  width: min(390px, calc(100% - 40px));

  padding: 28px;

  background: rgba(255, 255, 255, 0.93);

  border: 1px solid rgba(210, 210, 214, 0.9);
  border-radius: 18px;

  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.08);

  text-align: center;
}

.family-geography-empty-icon {
  width: 48px;
  height: 48px;

  margin: 0 auto 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ece7ff;
  color: #613dc1;

  border-radius: 50%;

  font-size: 1.7rem;
}

.family-geography-empty h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.family-geography-empty p {
  margin: 0;

  color: #686868;

  font-size: 0.9rem;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   RIGHT PANEL
   --------------------------------------------------------- */

.family-geography-panel {
  padding: 18px;

  display: flex;
  flex-direction: column;
  gap: 0;
}

.family-geography-panel-heading {
  padding: 2px 2px 16px;
}

.family-geography-panel-heading h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.family-geography-eyebrow {
  display: block;

  color: #777;

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.family-geography-control-group {
  padding: 17px 2px;

  border-top: 1px solid #ececef;
}

.family-geography-control-heading {
  margin-bottom: 11px;

  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.family-geography-control-heading strong {
  font-size: 0.9rem;
}

.family-geography-control-heading span {
  color: #888;
  font-size: 0.72rem;
}

.family-geography-search-shell {
  min-height: 40px;

  margin-bottom: 10px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 8px;

  color: #999;
  background: #f7f7f8;

  border: 1px solid #ddd;
  border-radius: 11px;

  font-size: 0.85rem;
}

.family-geography-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.family-geography-chip {
  width: auto;

  margin: 0;
  padding: 7px 10px;

  border: 1px solid #ddd;
  border-radius: 999px;

  background: #fff;
  color: #555;

  font-size: 0.76rem;
  font-weight: 700;
}

.family-geography-chip.is-selected {
  border-color: #d8ccff;
  background: #eee8ff;
  color: #5936b4;
}

.family-geography-chip:disabled {
  opacity: 1;
}

.family-geography-date-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: end;
  gap: 8px;
}

.family-geography-date-row label span {
  display: block;

  margin-bottom: 5px;

  color: #777;
  font-size: 0.72rem;
}

.family-geography-date-row input {
  width: 100%;
  margin: 0;
}

.family-geography-date-separator {
  padding-bottom: 11px;
  color: #aaa;
}

.family-geography-toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #555;
  font-size: 0.84rem;
}

.family-geography-toggle-row input {
  width: auto;
  margin: 0;
}

.family-geography-highlight {
  margin-top: auto;
}

.family-geography-highlight-empty {
  margin-top: 10px;
  padding: 14px;

  background: #f8f8f9;

  border: 1px solid #e6e6e8;
  border-radius: 12px;
}

.family-geography-highlight-empty strong {
  font-size: 0.85rem;
}

.family-geography-highlight-empty p {
  margin: 5px 0 0;

  color: #777;

  font-size: 0.78rem;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   RESPONSIVE SHELL

   The interactive bottom-sheet behavior will be wired with
   the map controls. Until then the panel moves below the map
   rather than squeezing it.
   --------------------------------------------------------- */

@media (max-width: 1000px) {

  .family-geography-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .family-geography-person {
    order: 2;
  }

  .family-geography-mode-switch {
    order: 3;
    width: 100%;
  }

  .family-geography-layout {
    grid-template-columns: 1fr;
  }

  .family-geography-map-placeholder {
    min-height: 520px;
  }

}


@media (max-width: 620px) {

  .family-geography-page {
    padding-left: 10px;
    padding-right: 10px;
  }

  .family-geography-mode-switch {
    border-radius: 14px;
  }

  .family-geography-mode-switch a {
    min-height: 42px;
    padding: 7px 5px;

    font-size: 0.76rem;
  }

  .family-geography-map-tools {
    align-items: flex-start;
  }

  .family-geography-utility-buttons {
    display: none;
  }

  .family-geography-map-placeholder {
    min-height: 430px;
  }

  .family-geography-panel {
    border-radius: 18px;
  }

}



/* =========================================================
   FAMILY GEOGRAPHY MAP — LIVE MAP LAYER
   ========================================================= */

.family-geography-map-placeholder.is-live {
  display: block;
  background: #e9eceb;
}

.family-geography-map-placeholder.is-live::before,
.family-geography-map-placeholder.is-live::after {
  display: none;
}

.family-geography-map-placeholder.is-live
  .maplibregl-map {
  position: absolute;
  inset: 0;
}

.family-geography-map-placeholder.is-live
  .family-geography-empty {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(
    -50%,
    -50%
  );

  z-index: 5;
}


/* ---------------------------------------------------------
   FAMILY MAP MARKERS
   --------------------------------------------------------- */

.family-map-marker {
  width: 22px;
  height: 22px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 3px solid #fff;
  border-radius: 50%;

  background: #6841ce;

  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.28);

  cursor: pointer;

  transition:
    width 0.14s ease,
    height 0.14s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.family-map-marker:hover {
  transform: scale(1.12);
}

.family-map-marker.has-multiple {
  width: 32px;
  height: 32px;

  background: #5935bc;
  color: #fff;

  font-size: 0.72rem;
  font-weight: 800;
}

.family-map-marker.is-selected {
  transform: scale(1.18);

  box-shadow:
    0 0 0 4px rgba(104, 65, 206, 0.22),
    0 3px 10px rgba(0, 0, 0, 0.30);
}


/* ---------------------------------------------------------
   SELECTED LOCATION DETAILS
   --------------------------------------------------------- */

.family-map-detail-place {
  display: block;

  margin-bottom: 3px;

  font-size: 0.95rem;
}

.family-map-detail-count {
  margin-bottom: 12px;

  color: #777;

  font-size: 0.72rem;
}

.family-map-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.family-map-detail-card {
  padding: 11px;

  background: #fff;

  border: 1px solid #e1e1e5;
  border-radius: 11px;
}

.family-map-detail-person {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 9px;
}

.family-map-detail-person img,
.family-map-detail-avatar {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 50%;
}

.family-map-detail-person img {
  object-fit: cover;
}

.family-map-detail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ece7ff;
  color: #5935bc;

  font-weight: 800;
}

.family-map-detail-identity {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.family-map-detail-identity strong {
  overflow: hidden;

  font-size: 0.82rem;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.family-map-detail-identity span {
  color: #777;
  font-size: 0.7rem;
}

.family-map-detail-event {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;

  margin-bottom: 7px;
}

.family-map-detail-event strong {
  width: 100%;

  font-size: 0.8rem;
}

.family-map-detail-event span {
  color: #666;
  font-size: 0.7rem;
}

.family-map-detail-card p {
  margin: 7px 0;

  color: #666;

  font-size: 0.75rem;
  line-height: 1.4;
}

.family-map-detail-profile-link {
  display: inline-flex;

  margin-top: 3px;

  color: #613dc1;

  text-decoration: none;

  font-size: 0.73rem;
  font-weight: 700;
}

.family-map-detail-profile-link:hover {
  text-decoration: underline;
}



/* =========================================================
   FAMILY MAP — DEDICATED MAPLIBRE CANVAS
   ========================================================= */

.family-geography-map-canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;
}

.family-geography-map-placeholder
  .family-geography-empty {
  z-index: 5;
}

.family-geography-map-placeholder.is-live
  .family-geography-map-canvas {
  display: block;
}

/*
MapLibre applies .maplibregl-map to the canvas container
itself. Give that dedicated element explicit dimensions.
*/

.family-geography-map-canvas.maplibregl-map {
  width: 100%;
  height: 100%;
}


/*
Once the map has successfully loaded, the surrounding area
must not retain any of the decorative placeholder treatment.
*/

.family-geography-map-placeholder.map-is-ready {
  background: #e7eaeb;
}



/* =========================================================
   FAMILY MAP — INTERACTIVE FILTER CHIPS
   ========================================================= */

.family-geography-chip:not(:disabled) {
  cursor: pointer;

  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.family-geography-chip:not(:disabled):hover {
  border-color: #cfc3f5;
  background: #f7f4ff;
  color: #5936b4;
}

.family-geography-chip:not(:disabled):active {
  transform: translateY(1px);
}



/* =========================================================
   FAMILY MAP — NATIVE MAPLIBRE MARKERS
   ========================================================= */

.family-map-native-marker {
  cursor: pointer;

  z-index: 4;
}

.family-map-native-marker svg {
  width: 34px;
  height: 44px;

  filter:
    drop-shadow(
      0 2px 3px rgba(0, 0, 0, 0.30)
    );

  transform-origin: center bottom;

  transition:
    transform 0.14s ease,
    filter 0.14s ease;
}

.family-map-native-marker:hover svg {
  transform: scale(1.08);
}

.family-map-native-marker.is-selected svg {
  transform: scale(1.18);

  filter:
    drop-shadow(
      0 3px 5px rgba(0, 0, 0, 0.38)
    );
}

.family-map-marker-count {
  position: absolute;

  top: -5px;
  right: -8px;

  min-width: 20px;
  height: 20px;

  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #5935bc;

  border: 2px solid #5935bc;
  border-radius: 999px;

  box-sizing: border-box;

  font-size: 0.66rem;
  font-weight: 800;

  line-height: 1;
}



/* =========================================================
   FAMILY MAP — PERSON SEARCH
   ========================================================= */

.family-geography-search-wrap {
  position: relative;
}

.family-geography-search-shell {
  cursor: text;
}

.family-geography-search-shell input {
  width: 100%;
  min-width: 0;

  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: inherit;

  font: inherit;
}

.family-geography-search-shell input::placeholder {
  color: #888;
}

.family-geography-search-icon {
  flex: 0 0 auto;

  color: #777;
}

.family-map-person-results {
  position: absolute;

  top: calc(100% + 6px);
  left: 0;
  right: 0;

  z-index: 30;

  max-height: 310px;
  overflow-y: auto;

  padding: 5px;

  background: #fff;

  border: 1px solid #dedee5;
  border-radius: 12px;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.14);
}

.family-map-person-result {
  width: 100%;

  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  gap: 9px;
  align-items: center;

  padding: 8px;

  border: 0;
  border-radius: 9px;

  background: transparent;

  text-align: left;

  cursor: pointer;
}

.family-map-person-result:not(:disabled):hover {
  background: #f6f3ff;
}

.family-map-person-result:disabled {
  cursor: default;
  opacity: 0.68;
}

.family-map-person-result img,
.family-map-person-result-avatar {
  width: 38px;
  height: 38px;

  border-radius: 50%;
}

.family-map-person-result img {
  object-fit: cover;
}

.family-map-person-result-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ece7ff;
  color: #5935bc;

  font-weight: 800;
}

.family-map-person-result-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.family-map-person-result-copy strong {
  overflow: hidden;

  font-size: 0.8rem;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.family-map-person-result-copy small {
  color: #777;

  font-size: 0.69rem;
}

.family-map-person-result-action {
  color: #6542c6;

  font-size: 0.69rem;
  font-weight: 700;
}

.family-map-person-result-empty {
  padding: 13px 10px;

  color: #777;

  font-size: 0.76rem;
  text-align: center;
}


/* SELECTED INDIVIDUAL PEOPLE */

.family-map-selected-people {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 9px;
  margin-bottom: 2px;
}

.family-map-selected-person {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  max-width: 100%;

  padding: 6px 9px;

  background: #eee8ff;
  color: #5935bc;

  border: 1px solid #d4c6ff;
  border-radius: 999px;

  cursor: pointer;

  font-size: 0.72rem;
  font-weight: 700;
}

.family-map-selected-person > span:first-child {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.family-map-selected-person:hover {
  background: #e7deff;
}

.family-map-selected-person-remove {
  flex: 0 0 auto;

  font-size: 0.9rem;
  line-height: 1;
}



/* =========================================================
   FAMILY MAP — SEARCH VISIBILITY FIX
   ========================================================= */

/* Make typed text and the insertion cursor clearly visible. */

.family-geography-search-shell input {
  color: #2f3035;
  caret-color: #5935bc;
}

.family-geography-search-shell input::placeholder {
  color: #777a82;
  opacity: 1;
}


/*
Search results are buttons, so broader site button styles can
otherwise cause their text to inherit white.
*/

.family-map-person-result {
  color: #2f3035;
}

.family-map-person-result-copy {
  color: #2f3035;
}

.family-map-person-result-copy strong {
  color: #2f3035;
}

.family-map-person-result-copy small {
  color: #72757d;
}

.family-map-person-result-action {
  color: #5935bc;
}


/* Keep the keyboard/focus state visible too. */

.family-geography-search-shell:focus-within {
  border-color: #8c73d9;

  box-shadow:
    0 0 0 3px rgba(104, 65, 206, 0.10);
}



/* ==========================================================
   SITEWIDE LEFT NAVIGATION
   Global site layout
   ========================================================== */

.site-sidebar {
  position: sticky;
  top: 88px;

  align-self: start;

  min-width: 0;

  padding: 8px 10px 18px 0;
}


.site-sidebar-nav {
  display: grid;
  gap: 8px;
}


.site-sidebar-group {
  display: grid;
  gap: 3px;

  padding: 4px 0 10px;
}


.site-sidebar-group
  + .site-sidebar-group {

  border-top: 1px solid #e2e6eb;

  padding-top: 14px;
}


.site-sidebar-label {
  padding: 0 12px 6px;

  color: #7a8492;

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.site-sidebar-link {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;

  min-height: 42px;

  padding: 8px 11px;

  border-radius: 9px;

  color: #26384e !important;

  text-decoration: none;

  font-size: 0.94rem;
  font-weight: 600;

  transition:
    background-color 120ms ease,
    color 120ms ease;
}


a.site-sidebar-link:hover {
  background: #e9eff6;

  color: #0d2f5f !important;
}


.site-sidebar-icon {
  display: grid;
  place-items: center;

  width: 26px;
  min-width: 26px;
  height: 26px;

  color: #49627f;

  font-size: 1rem;
  font-weight: 700;

  line-height: 1;
}


.site-sidebar-link-primary {
  color: #0d2f5f !important;
}


.site-sidebar-link-primary
  .site-sidebar-icon {

  color: #0d2f5f;
}


.site-sidebar-link.is-disabled {
  color: #8b929b !important;

  cursor: default;
}


.site-sidebar-link.is-disabled
  .site-sidebar-icon {

  color: #9aa1aa;
}


@media (
  max-width: 980px
) {

  .ancestor-page-shell {
    grid-template-columns:
      minmax(165px, 190px)
      minmax(0, 1fr);
  }

}


@media (
  max-width: 760px
) {

  .ancestor-page-shell {
    display: block;
  }


  .site-sidebar {
    position: static;

    margin-bottom: 14px;
    padding: 0;
  }


  .site-sidebar-nav {
    display: flex;
    gap: 6px;

    overflow-x: auto;

    padding-bottom: 5px;
  }


  .site-sidebar-group {
    display: flex;
    gap: 4px;

    flex: 0 0 auto;

    padding: 0;
  }


  .site-sidebar-group
    + .site-sidebar-group {

    border-top: 0;
    border-left: 1px solid #e2e6eb;

    padding-top: 0;
    padding-left: 6px;
  }


  .site-sidebar-label {
    display: none;
  }


  .site-sidebar-link {
    grid-template-columns: auto;

    min-height: 38px;

    padding: 8px 11px;

    white-space: nowrap;
  }


  .site-sidebar-icon {
    display: none;
  }

}




/* ==========================================================
   GLOBAL SITE PAGE SHELL
   ========================================================== */

main.site-main {
  max-width: none;
  margin: 0;
  padding: 42px 0 80px;
}


.site-page-shell {
  width: min(
    1540px,
    calc(100vw - 32px)
  );

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    220px
    minmax(0, 1fr);

  gap: 18px;

  align-items: start;
}


.site-page-content {
  min-width: 0;
}


/*
 * Ancestor profiles previously owned the site sidebar
 * grid themselves. The global site shell now owns that
 * column. Keep the ancestor class for its colors,
 * typography, and profile-specific styling, but remove
 * its old outer-grid behavior.
 */

.site-page-content
  .ancestor-page-shell {

  width: 100%;

  margin: 0;

  transform: none;

  display: block;
}


@media (
  max-width: 1220px
) {

  .site-page-shell {
    grid-template-columns:
      180px
      minmax(0, 1fr);
  }

}


@media (
  max-width: 980px
) {

  .site-page-shell {
    grid-template-columns:
      minmax(165px, 190px)
      minmax(0, 1fr);
  }

}


@media (
  max-width: 760px
) {

  main.site-main {
    padding:
      24px
      16px
      60px;
  }


  .site-page-shell {
    width: 100%;
    display: block;
  }

}


/* ==========================================================
   SITEWIDE TOP HEADER
   ========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 70px;

  padding:
    10px
    max(5vw, 30px);

  background: #ffffff;
  border-bottom: 1px solid #dedede;
}


.site-header a {
  margin-left: 0;
}


.site-header-brand {
  flex: 0 0 auto;
}


.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;
}


.site-header-action {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-height: 42px;

  padding: 7px 10px;

  border-radius: 9px;

  color: #17202a !important;
  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 600;
}


.site-header-action:hover {
  background: #f1f2f4;
}


.site-header-action-icon {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.site-header-count {
  display: inline-grid;
  place-items: center;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  border-radius: 999px;

  background: var(--accent);
  color: #ffffff;

  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}


.site-account-area {
  display: flex;
  align-items: center;
  gap: 2px;

  margin-left: 5px;
}


.site-profile-link {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 2px solid transparent;
  border-radius: 50%;

  text-decoration: none;
}


.site-profile-link:hover {
  border-color: #dedfe4;
}


.site-account-menu {
  position: relative;

  margin-left: 0;
}


.site-account-trigger {
  display: grid;
  place-items: center;

  width: 24px;
  height: 42px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  color: #5f6874;

  cursor: pointer;

  list-style: none;
}


.site-account-trigger:hover {
  background: #f1f2f4;
  color: #17202a;
}


.site-account-chevron {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.site-account-trigger::-webkit-details-marker {
  display: none;
}


.site-account-trigger::marker {
  display: none;
  content: "";
}


.site-account-photo,
.site-account-avatar {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;
}


.site-account-photo {
  object-fit: cover;
}


.site-account-avatar {
  background: #e8e1ff;
  color: var(--accent);

  font-size: 1rem;
  font-weight: 800;
}


.site-account-dropdown {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;

  width: 230px;

  padding: 8px;

  background: #ffffff;
  border: 1px solid #dedfe4;
  border-radius: 12px;

  box-shadow:
    0 12px 35px
    rgba(23, 32, 42, 0.15);
}


.site-account-identity {
  display: grid;
  gap: 2px;

  padding: 8px 10px 10px;
}


.site-account-identity strong {
  overflow: hidden;

  color: #17202a;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.site-account-identity span {
  color: #7a8492;

  font-size: 0.77rem;
}


.site-account-divider {
  height: 1px;

  margin: 5px 4px;

  background: #e5e6e9;
}


.site-account-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100%;

  padding: 10px;

  border-radius: 8px;

  color: #17202a !important;

  text-decoration: none;

  font-size: 0.88rem;
}


a.site-account-menu-item:hover {
  background: #f1f2f4;
}


.site-account-menu-item.is-disabled {
  color: #8c9299 !important;

  cursor: default;
}


.site-account-menu-item small {
  color: #a1a6ac;

  font-size: 0.67rem;
}


.site-header-text-link {
  padding: 8px 9px;

  color: #17202a !important;

  text-decoration: none;
}


@media (
  max-width: 640px
) {

  .site-header {
    min-height: 62px;

    padding:
      8px
      15px;
  }


  .site-header-action {
    padding:
      7px
      8px;
  }


  .site-header-action > span:not(
    .site-header-count
  ) {
    display: none;
  }


  .site-account-menu {
    margin-left: 0;
  }

}


/* ==========================================================
   ANCESTOR PUBLIC PROFILE CLEANUP
   ========================================================== */

.ancestor-manager-list {
  display: grid;
  gap: 6px;

  margin-top: 4px;
}


.ancestor-manager-link {
  display: block;

  color: var(--ancestor-navy) !important;

  font-size: 0.9rem;
  font-weight: 700;

  text-decoration: none;
}


.ancestor-manager-link:hover {
  text-decoration: underline;
}


.ancestor-message-managers {
  display: inline-block;

  margin-top: 13px;

  font-size: 0.82rem;
  font-weight: 700;
}


.ancestor-message-managers.is-disabled {
  color: #9198a1;

  cursor: default;
}


/* ==========================================================
   CENTRAL ANCESTOR EDIT WORKSPACE
   ========================================================== */

.ancestor-edit-workspace {
  width: min(
    1050px,
    calc(100vw - 40px)
  );

  margin: 20px auto 60px;
}


.ancestor-edit-workspace-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 22px;
}


.ancestor-edit-workspace-heading h1 {
  margin:
    5px
    0
    6px;
}


.ancestor-edit-workspace-heading p {
  margin: 0;

  color: var(--muted);
}


.ancestor-edit-section-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.ancestor-edit-section-card {
  display: grid;
  gap: 6px;

  min-height: 105px;

  padding: 18px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;

  color: var(--ink) !important;

  text-decoration: none;
}


a.ancestor-edit-section-card:hover {
  border-color: #b8b0d7;

  box-shadow:
    0 4px 16px
    rgba(23, 32, 42, 0.06);
}


.ancestor-edit-section-card strong {
  font-size: 1rem;
}


.ancestor-edit-section-card span {
  color: var(--muted);

  font-size: 0.86rem;
  line-height: 1.4;
}


.ancestor-edit-section-card.is-pending {
  background: #f7f7f7;
}


@media (
  max-width: 700px
) {

  .ancestor-edit-workspace-heading {
    display: grid;
  }


  .ancestor-edit-section-grid {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   UNIFIED ANCESTOR EDIT PROFILE — INLINE SECTIONS
   ========================================================== */

.ancestor-edit-inline-section {
  min-width: 0;

  padding: 22px;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 13px;
}


.ancestor-edit-inline-section-wide {
  grid-column: 1 / -1;
}


.ancestor-edit-inline-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;

  margin-bottom: 18px;
}


.ancestor-edit-inline-heading h2 {
  margin: 0 0 5px;

  font-size: 1.25rem;
}


.ancestor-edit-inline-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 0.9rem;
  line-height: 1.45;
}


.ancestor-edit-image-panel {
  min-width: 0;

  padding: 16px;

  background: #f9fafb;
  border: 1px solid #e4e5e8;
  border-radius: 10px;
}


.ancestor-edit-image-panel h3 {
  margin:
    0
    0
    14px;
}


.ancestor-edit-inline-section textarea {
  resize: vertical;

  min-height: 220px;

  line-height: 1.55;
}


.ancestor-edit-inline-section
  .ancestor-editor-form-actions {

  margin-top: 14px;
}


@media (
  max-width: 700px
) {

  .ancestor-edit-inline-section {
    padding: 16px;
  }

}


/* ==========================================================
   UNIFIED ANCESTOR EDIT — IDENTITY & NAMES
   ========================================================== */

.ancestor-inline-check {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 10px;

  font-weight: 600;
}


.ancestor-inline-check input {
  flex: 0 0 auto;

  width: auto;

  margin: 0;
}


.ancestor-edit-subsection {
  margin-top: 28px;
  padding-top: 24px;

  border-top: 1px solid var(--line);
}


.ancestor-edit-subsection h3 {
  margin: 0 0 5px;

  font-size: 1.05rem;
}


.ancestor-name-title-list {
  display: grid;
  gap: 9px;

  margin-top: 16px;
}


.ancestor-name-title-editor,
.ancestor-add-title-editor {
  background: #f9fafb;
  border: 1px solid #e2e4e7;
  border-radius: 10px;
}


.ancestor-name-title-editor > summary,
.ancestor-add-title-editor > summary {
  cursor: pointer;

  padding: 13px 15px;

  font-weight: 700;

  list-style-position: inside;
}


.ancestor-name-title-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.ancestor-name-title-editor-body,
.ancestor-add-title-editor form {
  padding:
    4px
    15px
    16px;
}


.ancestor-title-display-badge {
  flex: 0 0 auto;

  padding: 4px 7px;

  border-radius: 999px;

  background: var(--accent2);
  color: var(--accent);

  font-size: 0.68rem;
  font-weight: 700;
}


.ancestor-title-remove-form {
  margin-top: 8px;
}


.ancestor-add-title-editor {
  margin-top: 14px;
}


@media (
  max-width: 700px
) {

  .ancestor-name-title-editor > summary {
    align-items: flex-start;
    flex-direction: column;
  }

}



/* ==========================================================
   ANCESTOR QUICK FACTS
   ========================================================== */

.ancestor-quick-facts {
  display: block;
}


.ancestor-fact {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  padding: 8px 0;

  border-bottom: 1px solid #ececef;
}


.ancestor-fact:last-of-type {
  border-bottom: 0;
}


.ancestor-fact-marker {
  flex: 0 0 auto;

  width: 6px;
  height: 6px;

  margin-top: 7px;

  border-radius: 50%;

  background: var(--accent);
}


.ancestor-fact-copy {
  min-width: 0;
}


.ancestor-fact-copy strong,
.ancestor-fact-copy span {
  display: block;
}


.ancestor-fact-copy strong {
  margin-bottom: 2px;

  font-size: 0.76rem;
}


.ancestor-fact-copy span {
  color: var(--muted);

  font-size: 0.84rem;
  line-height: 1.35;
}


/* ==========================================================
   UNIFIED ANCESTOR EDIT — FAMILY
   ========================================================== */

.ancestor-edit-workspace
  .ancestor-family-add-actions {

  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 6px;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-list {

  display: grid;
  gap: 8px;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-row {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 12px 14px;

  background: #f9fafb;
  border: 1px solid #e2e4e7;
  border-radius: 9px;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-main {

  display: grid;
  gap: 2px;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-main a {

  color: var(--ink);

  text-decoration: none;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-main a:hover {

  text-decoration: underline;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-label {

  color: var(--muted);

  font-size: 0.8rem;
}


.ancestor-edit-workspace
  .ancestor-relationship-management-actions {

  flex: 0 0 auto;

  font-size: 0.82rem;
}


.ancestor-family-management-note {
  margin-top: 15px;
}


@media (
  max-width: 650px
) {

  .ancestor-edit-workspace
    .ancestor-relationship-management-row {

    align-items: flex-start;
    flex-direction: column;
  }

}


/* ==========================================================
   CANONICAL PLACES
   ========================================================== */

.canonical-place-page,
.canonical-place-edit {
  width: min(
    1050px,
    calc(100vw - 40px)
  );

  margin: 24px auto 60px;
}


.canonical-place-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 16px;
}


.canonical-place-hero h1 {
  margin: 4px 0;
}


.canonical-place-location {
  margin: 0;

  color: var(--muted);
}


.canonical-place-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    260px;

  gap: 14px;
}


.canonical-place-grid main,
.canonical-place-grid aside {
  display: grid;
  align-content: start;
  gap: 14px;
}


.canonical-place-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}


.canonical-place-stats div {
  display: grid;
  gap: 2px;
}


.canonical-place-stats strong {
  font-size: 1.3rem;
}


.canonical-place-stats span {
  color: var(--muted);

  font-size: 0.82rem;
}


.canonical-place-manager-list {
  display: grid;
  gap: 7px;
}


.canonical-place-manager-edit-list {
  display: grid;
  gap: 8px;

  margin: 14px 0;
}


.canonical-place-manager-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 10px 12px;

  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
}


.canonical-place-manager-edit-row form {
  margin: 0;
}


.canonical-place-add-manager {
  display: flex;
  align-items: end;
  gap: 10px;

  margin-top: 16px;
}


.canonical-place-add-manager label {
  flex: 1;
}


@media (
  max-width: 760px
) {

  .canonical-place-grid {
    grid-template-columns: 1fr;
  }


  .canonical-place-hero {
    align-items: flex-start;
    flex-direction: column;
  }


  .canonical-place-add-manager {
    align-items: stretch;
    flex-direction: column;
  }

}


/* ==========================================================
   UNIFIED ANCESTOR LIFE EVENTS + PLACES
   ========================================================== */

.unified-life-event-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(320px, 0.95fr);

  gap: 22px;
}


.unified-life-event-form-wrap,
.unified-life-event-list-wrap {
  min-width: 0;
}


.unified-life-event-form-wrap h3,
.unified-life-event-list-wrap h3 {
  margin-top: 0;
}


.unified-event-fieldset {
  margin: 18px 0;
  padding: 16px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: #fafafa;
}


.unified-event-fieldset legend {
  padding: 0 6px;

  font-weight: 800;
}


.unified-event-date-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin: 14px 0;
}


.place-search-control {
  position: relative;
}


.place-search-results {
  position: absolute;
  z-index: 20;

  top: calc(100% - 2px);
  left: 0;
  right: 0;

  max-height: 280px;
  overflow-y: auto;

  padding: 5px;

  background: #ffffff;
  border: 1px solid #d8dce2;
  border-radius: 9px;

  box-shadow:
    0 10px 24px
    rgba(23, 32, 42, 0.12);
}


.place-search-result {
  display: grid;
  gap: 2px;

  width: 100%;

  padding: 9px 10px;

  background: transparent;
  border: 0;
  border-radius: 7px;

  color: var(--ink);
  text-align: left;

  cursor: pointer;
}


.place-search-result:hover {
  background: #f1f2f4;
}


.place-search-result strong {
  font-size: 0.88rem;
}


.place-search-result span {
  color: var(--muted);

  font-size: 0.76rem;
}


.place-search-empty {
  padding: 10px;

  color: var(--muted);

  font-size: 0.82rem;
}


.place-search-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 8px;
  padding: 9px 11px;

  background: #f4f7fa;
  border-radius: 8px;

  font-size: 0.82rem;
}


.unified-new-place {
  margin-top: 12px;

  border-top: 1px solid var(--line);

  padding-top: 11px;
}


.unified-new-place > summary {
  cursor: pointer;

  font-size: 0.84rem;
  font-weight: 700;
}


.unified-new-place-fields {
  display: grid;
  gap: 10px;

  margin-top: 13px;
}


.new-place-management-choice {
  display: grid;
  gap: 8px;

  padding: 12px;

  border: 1px solid var(--line);
  border-radius: 8px;
}


.new-place-management-choice label {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  margin: 0;
}


.new-place-management-choice input {
  width: auto;

  margin-top: 2px;
}


.unified-life-event-list {
  display: grid;
  gap: 8px;
}


.unified-life-event-row {
  display: grid;
  grid-template-columns:
    105px
    minmax(0, 1fr)
    auto;

  gap: 12px;
  align-items: start;

  padding: 12px;

  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 9px;
}


.unified-life-event-date {
  color: var(--ancestor-navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.83rem;
  font-weight: 700;
}


.unified-life-event-main {
  display: grid;
  gap: 3px;
}


.unified-life-event-main strong {
  color: var(--ancestor-navy);
}


.unified-life-event-main p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 0.8rem;
  line-height: 1.4;
}


.unified-life-event-place {
  font-size: 0.78rem;
}


.unified-life-event-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 0.78rem;
}


.unified-life-event-actions form {
  margin: 0;
}


@media (
  max-width: 900px
) {

  .unified-life-event-layout {
    grid-template-columns: 1fr;
  }

}


@media (
  max-width: 650px
) {

  .unified-event-date-grid {
    grid-template-columns: 1fr;
  }


  .unified-life-event-row {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   UNIFIED ANCESTOR LINKED PROFILES
   ========================================================== */

.unified-linked-profile-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(340px, 1.1fr);

  gap: 22px;
}


.unified-linked-profile-editor,
.unified-linked-profile-list-wrap {
  min-width: 0;
}


.unified-linked-profile-editor h3,
.unified-linked-profile-list-wrap h3 {
  margin-top: 0;
}


.linked-profile-detection {
  margin:
    -4px
    0
    14px;

  padding: 9px 11px;

  background: #f5f7f9;
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  font-size: 0.8rem;
}


.unified-linked-profile-primary {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  margin-top: 12px;
}


.unified-linked-profile-primary input {
  width: auto;

  margin-top: 2px;
}


.unified-linked-profile-list {
  display: grid;
  gap: 8px;
}


.unified-linked-profile-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 14px;
  align-items: start;

  padding: 12px;

  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 9px;
}


.unified-linked-profile-main {
  display: grid;
  gap: 4px;

  min-width: 0;
}


.unified-linked-profile-service {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}


.unified-linked-profile-primary-badge {
  padding: 2px 7px;

  background: #eef2f6;
  border-radius: 999px;

  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 700;
}


.unified-linked-profile-url {
  overflow-wrap: anywhere;

  font-size: 0.78rem;
}


.unified-linked-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 0.78rem;
}


.unified-linked-profile-actions form,
.unified-linked-profile-special-actions form {
  margin: 0;
}


.unified-linked-profile-special-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 5px;

  font-size: 0.76rem;
}


.unified-linked-profile-special-actions
.link-button {
  margin: 0;
  padding: 0;

  background: none;
  border: 0;

  color: inherit;
  font: inherit;
  text-decoration: underline;

  cursor: pointer;
}


.unified-linked-profile-advanced {
  margin-top: 13px;
  padding-top: 11px;

  border-top: 1px solid var(--line);

  font-size: 0.78rem;
}


@media (
  max-width: 900px
) {

  .unified-linked-profile-layout {
    grid-template-columns: 1fr;
  }

}


@media (
  max-width: 650px
) {

  .unified-linked-profile-row {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   COMPACT ANCESTOR MEDIA MANAGEMENT
   ========================================================== */

.compact-media-editor {
  overflow: hidden;
}


.compact-media-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 14px;
}


.compact-media-heading h2 {
  margin-bottom: 4px;
}


.compact-media-heading p {
  margin: 0;

  color: var(--muted);
}


.compact-photo-preview {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.compact-photo-preview a {
  display: block;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #eef0f2;
  border-radius: 8px;
}


.compact-photo-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.compact-video-preview {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 9px;
}


.compact-video-preview-item {
  position: relative;

  display: block;

  min-width: 0;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #20242a;
  border-radius: 8px;

  color: white;
}


.compact-video-preview-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.compact-video-placeholder {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  font-size: 1.5rem;
}


.compact-video-play {
  position: absolute;
  inset:
    50%
    auto
    auto
    50%;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  background:
    rgba(0, 0, 0, 0.62);

  border-radius: 50%;

  font-size: 0.9rem;
}


.compact-video-caption {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;

  overflow: hidden;

  color: white;

  font-size: 0.7rem;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;

  text-shadow:
    0 1px 3px
    rgba(0, 0, 0, 0.75);
}


.compact-media-more {
  margin:
    7px
    0
    0;
}


.compact-media-add {
  margin-top: 13px;

  padding-top: 11px;

  border-top: 1px solid var(--line);
}


.compact-media-add > summary {
  cursor: pointer;

  font-size: 0.84rem;
  font-weight: 700;
}


.compact-media-add > form {
  display: grid;
  gap: 10px;

  margin-top: 12px;
}


.compact-video-add-options {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.compact-media-advanced {
  font-size: 0.8rem;
}


.compact-media-advanced > summary {
  cursor: pointer;
}


.compact-media-advanced label {
  margin-top: 10px;
}


@media (
  max-width: 900px
) {

  .compact-photo-preview {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .compact-video-preview {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width: 650px
) {

  .compact-media-heading {
    flex-direction: column;
  }


  .compact-photo-preview {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .compact-video-add-options {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   CANONICAL SOURCE MANAGEMENT
   ========================================================== */

.source-editor-count {
  margin:
    0
    0
    14px;

  font-size: 0.88rem;
}


.source-attached-list {
  display: grid;
  gap: 9px;

  margin-bottom: 16px;
}


.source-attached-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 12px 14px;

  border: 1px solid var(--line);
  border-radius: 9px;
}


.source-attached-main {
  min-width: 0;
}


.source-attached-main h3 {
  margin:
    2px
    0
    4px;

  font-size: 0.95rem;
}


.source-attached-main p {
  margin:
    4px
    0;
}


.source-type-label {
  color: var(--muted);

  font-size: 0.7rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.source-attached-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 7px;

  flex-shrink: 0;

  font-size: 0.78rem;
}


.source-attached-actions form {
  margin: 0;
}


.button-link-danger {
  appearance: none;

  padding: 0;

  background: transparent;
  border: 0;

  color: #8a3030;

  cursor: pointer;

  font: inherit;
}


.source-find-existing {
  margin-top: 18px;

  padding:
    16px;

  background:
    rgba(0, 0, 0, 0.025);

  border: 1px solid var(--line);
  border-radius: 10px;
}


.source-find-existing h3 {
  margin-top: 0;
}


.source-search-results {
  display: grid;
  gap: 7px;

  margin-top: 10px;
}


.source-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 10px 12px;

  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}


.source-search-result-body {
  min-width: 0;
}


.source-search-result-body strong {
  display: block;
}


.source-result-location {
  overflow: hidden;

  max-width: 620px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.source-existing-attach-form {
  margin-top: 10px;
}


.source-association-fields {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.source-new-options {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: 14px;
}


.source-add-panel {
  padding: 12px 14px;

  border: 1px solid var(--line);
  border-radius: 9px;
}


.source-add-panel > summary {
  cursor: pointer;

  font-weight: 700;
}


.source-add-panel > form {
  display: grid;
  gap: 10px;

  margin-top: 13px;
}


.source-extra-details {
  margin-top: 4px;
}


.source-extra-details > summary {
  cursor: pointer;

  font-size: 0.8rem;
  font-weight: 700;
}


.source-extra-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 11px;
}


@media (
  max-width: 800px
) {

  .source-new-options,
  .source-association-fields,
  .source-extra-grid {
    grid-template-columns: 1fr;
  }


  .source-attached-card,
  .source-search-result {
    flex-direction: column;
    align-items: stretch;
  }


  .source-attached-actions {
    align-items: flex-start;
  }

}


/* ==========================================================
   SOURCE RESULT FEEDBACK
   ========================================================== */

.source-local-notice {
  margin:
    0
    0
    14px;

  padding:
    11px
    13px;

  border: 1px solid var(--line);
  border-radius: 8px;

  font-size: 0.84rem;
  line-height: 1.4;
}


.source-local-notice-success {
  background:
    rgba(40, 120, 70, 0.08);
}


.source-local-notice-info {
  background:
    rgba(60, 90, 140, 0.08);
}


/* ==========================================================
   PUBLIC ANCESTOR SOURCES
   ========================================================== */

.ancestor-public-source-list {
  display: grid;
  gap: 10px;
}


.ancestor-public-source-item {
  padding-bottom: 10px;

  border-bottom:
    1px solid
    var(--line);
}


.ancestor-public-source-item:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.ancestor-public-source-type {
  margin-bottom: 2px;

  color: var(--muted);

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.ancestor-public-source-title {
  display: block;

  line-height: 1.3;
}


.ancestor-public-source-meta,
.ancestor-public-source-locator {
  margin-top: 4px;
}


.ancestor-public-source-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 6px;

  font-size: 0.75rem;
}



/* PLACE GEOGRAPHY REPAIR 2026-09-19 */

.place-geocode-picker {
  margin: 12px 0;
  padding: 13px;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: #f7f9fb;
}


.place-geocode-picker h3 {
  margin-top: 0;
}


.place-geocode-search-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 10px;
  align-items: end;
}


.place-geocode-search-row label {
  margin: 0;
}


.place-geocode-results {
  display: grid;
  gap: 6px;

  max-height: 310px;
  overflow-y: auto;

  margin-top: 10px;
}


.place-geocode-result {
  display: grid;
  gap: 3px;

  width: 100%;

  padding: 9px 10px;

  border: 1px solid #d9dfe6;
  border-radius: 7px;

  background: white;
  color: var(--ink);

  text-align: left;
  cursor: pointer;
}


.place-geocode-result:hover {
  background: #f1f4f7;
}


.place-geocode-result strong {
  font-size: 0.86rem;
}


.place-geocode-result span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}


.place-geocode-empty {
  padding: 10px;

  color: var(--muted);
  font-size: 0.8rem;
}


.place-geocode-selection {
  margin-top: 10px;
  padding: 9px 11px;

  border-radius: 7px;

  background:
    rgba(40, 120, 70, 0.08);

  font-size: 0.79rem;
  line-height: 1.4;
}


.canonical-place-map-panel {
  margin-bottom: 14px;
}


.canonical-place-map {
  width: 100%;
  height: 360px;

  overflow: hidden;

  border-radius: 9px;

  background: #e8edf1;
}


.canonical-place-map-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  margin-top: 8px;

  color: var(--muted);
  font-size: 0.74rem;
}


.canonical-place-unmapped {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;
  padding: 28px;

  border: 1px dashed #c9d2dc;
  border-radius: 9px;

  background: #f7f9fb;

  text-align: center;
}


.canonical-place-unmapped strong {
  color: #0d2f5f;
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.05rem;
}


.canonical-place-unmapped p {
  max-width: 460px;

  margin: 0 0 5px;

  color: var(--muted);
}


.canonical-place-map-error {
  height: 100%;

  display: grid;
  place-items: center;

  color: var(--muted);
}


.canonical-place-people {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.canonical-place-person {
  display: flex;
  align-items: center;

  gap: 9px;
  padding: 8px;

  border: 1px solid var(--line);
  border-radius: 8px;

  color: inherit;
  text-decoration: none;
}


.canonical-place-person:hover {
  background: #f7f9fb;
}


.canonical-place-person img,
.canonical-place-person-placeholder {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 50%;
}


.canonical-place-person img {
  object-fit: cover;
}


.canonical-place-person-placeholder {
  display: grid;
  place-items: center;

  background: #e4e9ef;
  color: #0d2f5f;

  font-weight: 800;
}


.canonical-place-person-copy {
  min-width: 0;

  display: grid;
  gap: 2px;
}


.canonical-place-person-copy strong {
  color: #0d2f5f;
}


.canonical-place-person-copy small {
  color: var(--muted);
}


.canonical-place-event-list {
  display: grid;
}


.canonical-place-event {
  display: grid;
  grid-template-columns:
    115px
    minmax(0, 1fr);

  gap: 14px;

  padding: 11px 0;

  border-top: 1px solid var(--line);
}


.canonical-place-event:first-child {
  border-top: 0;
}


.canonical-place-event-date {
  color: #0d2f5f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.8rem;
}


.canonical-place-event-main {
  display: grid;
  gap: 2px;
}


.canonical-place-event-main p {
  margin: 5px 0 0;
}


.ancestor-key-place-link {
  color: inherit;
  text-decoration: none;
}


.ancestor-key-place-link:hover {
  text-decoration: underline;
}


@media (
  max-width: 760px
) {

  .place-geocode-search-row {
    grid-template-columns: 1fr;
  }


  .canonical-place-map {
    height: 300px;
  }


  .canonical-place-people {
    grid-template-columns: 1fr;
  }


  .canonical-place-event {
    grid-template-columns: 1fr;
    gap: 3px;
  }


  .canonical-place-map-caption {
    flex-direction: column;
    gap: 4px;
  }

}



/* ==========================================================
   PLACE PROFILE LAYOUT REPAIR
   Nested <main> must not inherit the global page <main> shell.
   ========================================================== */

.canonical-place-grid > main {
  max-width: none;
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


.canonical-place-grid > aside {
  min-width: 0;
}


.canonical-place-grid > main > .panel,
.canonical-place-grid > aside > .panel {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


.canonical-place-map-panel {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


@media (min-width: 761px) {

  .canonical-place-grid {
    grid-template-columns:
      minmax(0, 1fr)
      260px;

    align-items: start;
  }

}


/* ==========================================================
   VISUAL PLACE PROFILE
   Approved image-forward Place profile direction
   ========================================================== */

.place-profile-shell {
  width:
    min(
      1180px,
      calc(100vw - 36px)
    );

  margin:
    18px
    auto
    70px;
}


/* HERO */

.place-profile-hero {
  position: relative;

  min-height: 315px;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  padding:
    34px
    36px;

  border-radius:
    15px;

  background-color:
    #18334f;

  background-position:
    center;

  background-size:
    cover;

  box-shadow:
    0 8px 28px
    rgba(
      20,
      32,
      48,
      0.14
    );
}


.place-profile-hero-empty {
  background:
    radial-gradient(
      circle
      at
      78%
      20%,
      rgba(
        130,
        102,
        228,
        0.42
      ),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #102d4c,
      #315d78
    );
}


.place-profile-hero-copy {
  position: relative;
  z-index: 2;

  max-width: 780px;

  color: white;
}


.place-profile-kicker {
  width: fit-content;

  margin-bottom: 8px;
  padding: 4px 7px;

  border-radius: 4px;

  background:
    rgba(
      73,
      48,
      168,
      0.82
    );

  color: white;

  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.place-profile-hero h1 {
  margin:
    0
    0
    10px;

  color: white;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.2rem,
      4.2vw,
      4.1rem
    );

  font-weight: 500;
  line-height: 1.02;

  text-shadow:
    0 2px 14px
    rgba(
      0,
      0,
      0,
      0.32
    );
}


.place-profile-hero-location {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;

  font-size: 1rem;
}


.place-profile-hero-location span {
  display: flex;
  align-items: center;
}


.place-profile-hero-location
span:not(:last-child)::after {
  content: "·";

  margin-left: 8px;

  opacity: 0.7;
}


.place-profile-edit-button {
  display: inline-flex;

  margin-top: 3px;
}


.place-profile-cover-caption {
  position: absolute;

  right: 18px;
  bottom: 18px;

  z-index: 2;

  max-width: 300px;

  padding:
    7px
    10px;

  border-radius: 7px;

  background:
    rgba(
      0,
      0,
      0,
      0.58
    );

  color: white;

  font-size: 0.7rem;
}


.place-profile-add-cover {
  position: absolute;

  right: 18px;
  bottom: 18px;

  color: white;

  font-size: 0.8rem;
  font-weight: 700;
}


/* MAIN GRID */

.place-profile-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    310px;

  gap: 18px;

  align-items: start;
}


.place-profile-main {
  width: 100%;
  max-width: none;

  display: grid;
  gap: 16px;

  margin: 0;
  padding: 0;
}


.place-profile-sidebar {
  display: grid;
  gap: 16px;
}


.place-showcase-card {
  min-width: 0;

  padding: 19px;

  border:
    1px
    solid
    #dddfe4;

  border-radius: 13px;

  background: white;

  box-shadow:
    0 2px 8px
    rgba(
      31,
      42,
      55,
      0.035
    );
}


.place-section-heading {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 16px;

  margin-bottom: 13px;
}


.place-section-title {
  display: flex;
  align-items: center;

  gap: 10px;
}


.place-section-title h2 {
  margin: 0;

  color: #13283e;

  font-size: 1.08rem;
}


.place-section-icon {
  min-width: 19px;

  color: #6336dc;

  font-size: 0.83rem;

  text-align: center;
}


.place-section-action {
  flex: 0 0 auto;

  color: #6232d5;

  font-size: 0.75rem;
  font-weight: 700;

  text-decoration: none;
}


/* MAP */

.place-profile-map {
  height: 355px;

  border-radius: 9px;
}


/* PHOTO STRIP */

.place-profile-photo-strip {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.place-profile-photo-tile {
  position: relative;

  min-height: 145px;

  overflow: hidden;

  border-radius: 9px;

  background: #e9edf0;
}


.place-profile-photo-tile img {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;

  transition:
    transform
    180ms ease;
}


.place-profile-photo-tile:hover img {
  transform: scale(1.025);
}


.place-profile-photo-tile span {
  position: absolute;

  left: 7px;
  right: 7px;
  bottom: 7px;

  padding: 5px 7px;

  border-radius: 5px;

  background:
    rgba(
      0,
      0,
      0,
      0.62
    );

  color: white;

  font-size: 0.65rem;
}


.place-photo-empty {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 24px;

  min-height: 120px;

  padding:
    16px
    17px;

  border:
    1px dashed
    #d5d5de;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #fbfafc,
      #f4f1fb
    );
}


.place-photo-empty strong {
  color: #263b51;
}


.place-photo-empty p {
  max-width: 620px;

  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 0.8rem;
  line-height: 1.45;
}


/* HISTORY */

.place-history-text {
  white-space: pre-line;

  color: #405267;

  font-size: 0.92rem;
  line-height: 1.65;
}


.place-history-empty {
  color: #405267;
}


.place-history-empty p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  line-height: 1.5;
}


/* PEOPLE + EVENTS */

.place-profile-dual-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;
}


.place-profile-people-list,
.place-profile-event-list {
  display: grid;

  gap: 8px;
}


.place-profile-person-row {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding:
    8px
    9px;

  border:
    1px
    solid
    #e0e2e7;

  border-radius: 8px;

  color: inherit;
  text-decoration: none;
}


.place-profile-person-row:hover,
.place-nearby-row:hover {
  background:
    #faf9fd;
}


.place-profile-person-row img,
.place-profile-person-placeholder {
  width: 42px;
  height: 42px;

  border-radius: 50%;
}


.place-profile-person-row img {
  object-fit: cover;
}


.place-profile-person-placeholder {
  display: grid;
  place-items: center;

  background: #e9edf3;
  color: #263b57;

  font-weight: 800;
}


.place-profile-person-copy {
  min-width: 0;

  display: grid;

  gap: 1px;
}


.place-profile-person-copy strong {
  color: #16395f;

  font-size: 0.82rem;
}


.place-profile-person-copy small {
  color: var(--muted);

  font-size: 0.68rem;
}


.place-profile-row-arrow {
  color: #6d7a89;

  font-size: 1.3rem;
}


.place-profile-event-row {
  display: grid;

  grid-template-columns:
    64px
    minmax(0, 1fr);

  gap: 10px;

  padding:
    9px
    0;

  border-top:
    1px
    solid
    #eceef1;
}


.place-profile-event-row:first-child {
  padding-top: 0;

  border-top: 0;
}


.place-profile-event-date {
  color: #213b59;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.78rem;
  font-weight: 700;
}


.place-profile-event-copy {
  display: grid;

  gap: 1px;
}


.place-profile-event-copy strong {
  color: #172d45;

  font-size: 0.8rem;
}


.place-profile-event-copy a {
  color: #5730ba;

  font-size: 0.75rem;
}


.place-profile-event-copy small {
  color: var(--muted);

  font-size: 0.66rem;
}


/* SIDEBAR */

.place-profile-facts {
  display: grid;

  gap: 9px;

  margin:
    17px
    0
    0;
}


.place-profile-facts div {
  display: grid;

  grid-template-columns:
    94px
    minmax(0, 1fr);

  gap: 8px;
}


.place-profile-facts dt {
  color: #637083;

  font-size: 0.75rem;
}


.place-profile-facts dd {
  margin: 0;

  color: #283b50;

  font-size: 0.77rem;
  font-weight: 700;
}


.place-profile-side-divider {
  height: 1px;

  margin:
    18px
    0;

  background: #e5e6e9;
}


.place-profile-managed-copy {
  margin:
    10px
    0
    0;

  color: #30455b;

  font-size: 0.78rem;
}


.place-nearby-list {
  display: grid;

  margin-top: 13px;
}


.place-nearby-row {
  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding:
    9px
    0;

  border-top:
    1px
    solid
    #eceef1;

  color: inherit;
  text-decoration: none;
}


.place-nearby-row:first-child {
  border-top: 0;
}


.place-nearby-row img,
.place-nearby-placeholder {
  width: 46px;
  height: 46px;

  border-radius: 7px;
}


.place-nearby-row img {
  object-fit: cover;
}


.place-nearby-placeholder {
  display: grid;
  place-items: center;

  background:
    linear-gradient(
      145deg,
      #dee8ee,
      #b9ccd7
    );

  color: #335873;
}


.place-nearby-row > span:nth-child(2) {
  min-width: 0;

  display: grid;
  gap: 2px;
}


.place-nearby-row strong {
  color: #24394f;

  font-size: 0.76rem;
}


.place-nearby-row small {
  color: var(--muted);

  font-size: 0.65rem;
}


.place-profile-connection-summary {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    5px
    10px;

  background:
    linear-gradient(
      145deg,
      #faf8ff,
      #f1edff
    );
}


.place-profile-connection-summary strong {
  color: #5a31c7;

  font-size: 1.2rem;
}


.place-profile-connection-summary span {
  align-self: center;

  color: #516074;

  font-size: 0.75rem;
}


/* EDIT PLACE PHOTOS */

.place-photo-upload-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    auto;

  gap: 12px;

  align-items: end;
}


.place-photo-manager-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-top: 18px;
}


.place-photo-manager-item {
  overflow: hidden;

  border:
    1px
    solid
    var(--line);

  border-radius: 9px;

  background: #fafafa;
}


.place-photo-manager-item > img {
  width: 100%;
  height: 150px;

  display: block;

  object-fit: cover;
}


.place-photo-manager-copy {
  min-height: 56px;

  display: grid;
  gap: 3px;

  padding: 9px;
}


.place-photo-manager-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  padding:
    0
    9px
    9px;
}


.place-photo-manager-actions form {
  margin: 0;
}


/* RESPONSIVE */

@media (
  max-width: 900px
) {

  .place-profile-layout {
    grid-template-columns: 1fr;
  }


  .place-profile-sidebar {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .place-photo-manager-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width: 680px
) {

  .place-profile-shell {
    width:
      min(
        100%,
        calc(
          100vw
          - 20px
        )
      );

    margin-top: 10px;
  }


  .place-profile-hero {
    min-height: 280px;

    padding:
      25px
      21px;
  }


  .place-profile-hero h1 {
    font-size: 2.15rem;
  }


  .place-profile-photo-strip,
  .place-profile-dual-grid,
  .place-profile-sidebar,
  .place-photo-manager-grid {
    grid-template-columns: 1fr;
  }


  .place-profile-photo-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .place-profile-photo-tile {
    min-height: 125px;
  }


  .place-profile-map {
    height: 285px;
  }


  .place-photo-upload-form {
    grid-template-columns: 1fr;
  }


  .place-profile-cover-caption {
    display: none;
  }

}


/* ==========================================================
   CURATED PLACE TIMELINE
   ========================================================== */

.place-timeline-list {
  position: relative;

  display: grid;

  gap: 0;
}


.place-timeline-item {
  position: relative;

  display: grid;

  grid-template-columns:
    14px
    72px
    minmax(0, 1fr);

  gap: 9px;

  padding:
    0
    0
    18px;
}


.place-timeline-item:last-child {
  padding-bottom: 0;
}


.place-timeline-item:not(:last-child)::before {
  content: "";

  position: absolute;

  left: 5px;
  top: 12px;
  bottom: 0;

  width: 2px;

  background:
    #ded7f5;
}


.place-timeline-marker {
  position: relative;
  z-index: 1;

  width: 12px;
  height: 12px;

  margin-top: 3px;

  border:
    3px
    solid
    #ece7fb;

  border-radius: 50%;

  background:
    #6336dc;
}


.place-timeline-date {
  padding-top: 1px;

  color: #253b57;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.77rem;
  font-weight: 700;
}


.place-timeline-copy {
  display: grid;

  gap: 3px;
}


.place-timeline-copy > strong {
  color: #172e48;

  font-size: 0.82rem;
}


.place-timeline-copy p {
  margin: 0;

  color: #526275;

  font-size: 0.75rem;
  line-height: 1.42;
}


.place-timeline-copy small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.65rem;
}


.place-timeline-empty {
  color: #405267;
}


.place-timeline-empty p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 0.78rem;
  line-height: 1.45;
}


/* Connected people counts */

.place-profile-connection-summary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  background:
    linear-gradient(
      145deg,
      #faf8ff,
      #f0ebff
    );
}


.place-profile-connection-summary > div {
  display: grid;

  gap: 1px;

  padding: 4px;
}


.place-profile-connection-summary > div + div {
  border-left:
    1px
    solid
    #ddd4f5;

  padding-left: 12px;
}


.place-profile-connection-summary strong {
  color: #5b30cb;

  font-size: 1.35rem;
  line-height: 1;
}


.place-profile-connection-summary span {
  color: #526075;

  font-size: 0.68rem;
}


/* Place Timeline editor */

.place-timeline-editor {
  margin-bottom: 20px;
}


.place-timeline-editor-list {
  display: grid;

  border-top:
    1px
    solid
    var(--line);
}


.place-timeline-editor-row {
  display: grid;

  grid-template-columns:
    100px
    minmax(0, 1fr)
    auto;

  gap: 14px;

  align-items: start;

  padding:
    13px
    0;

  border-bottom:
    1px
    solid
    var(--line);
}


.place-timeline-editor-date {
  color: #263d58;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.8rem;
  font-weight: 700;
}


.place-timeline-editor-copy {
  display: grid;

  gap: 3px;
}


.place-timeline-editor-copy p {
  margin: 0;

  color: var(--muted);

  font-size: 0.78rem;
}


.place-timeline-editor-actions {
  display: flex;

  gap: 8px;

  align-items: center;
}


.place-timeline-editor-actions form {
  margin: 0;
}


@media (
  max-width: 680px
) {

  .place-timeline-item {
    grid-template-columns:
      14px
      minmax(0, 1fr);
  }


  .place-timeline-date {
    grid-column: 2;
  }


  .place-timeline-copy {
    grid-column: 2;
  }


  .place-timeline-editor-row {
    grid-template-columns: 1fr;

    gap: 5px;
  }

}


/* ==========================================================
   PLACE TIMELINE INLINE EDITING
   ========================================================== */

.place-timeline-add-panel {
  margin-bottom: 22px;
  padding: 14px;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: #fafafa;
}


.place-timeline-add-panel h3 {
  margin:
    0
    0
    12px;
}


.place-timeline-inline-edit {
  margin-top: 9px;
}


.place-timeline-inline-edit > summary {
  width: fit-content;

  color: #6134cc;

  font-size: 0.76rem;
  font-weight: 700;

  cursor: pointer;
}


.place-timeline-inline-edit[open] {
  margin-top: 12px;
  padding: 12px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: #f8f7fb;
}


.place-timeline-inline-edit[open] > summary {
  margin-bottom: 12px;
}


.place-timeline-inline-edit form {
  margin: 0;
}


.place-timeline-inline-edit textarea {
  resize: vertical;
}


/* ==========================================================
   PLACE SOURCES
   ========================================================== */

.place-source-search-widget {
  margin-bottom: 14px;
}


.place-source-search-results {
  display: grid;

  gap: 6px;

  margin-top: 7px;
}


.place-source-search-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 12px;

  align-items: center;

  padding:
    9px
    10px;

  border:
    1px solid
    var(--line);

  border-radius: 8px;

  background: #fafafa;
}


.place-source-search-row form {
  margin: 0;
}


.place-source-search-copy {
  min-width: 0;

  display: grid;

  gap: 2px;
}


.place-source-search-copy strong {
  color: #243a52;

  font-size: 0.8rem;
}


.place-source-search-copy small {
  color: var(--muted);

  font-size: 0.68rem;
}


.place-source-search-empty {
  padding: 9px 10px;

  color: var(--muted);

  font-size: 0.75rem;
}


.place-new-source-details {
  margin:
    13px
    0
    19px;

  padding: 11px 12px;

  border:
    1px solid
    var(--line);

  border-radius: 8px;

  background: #faf9fc;
}


.place-new-source-details > summary {
  color: #6033c9;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
}


.place-new-source-details[open]
> summary {
  margin-bottom: 13px;
}


.place-new-source-form {
  margin: 0;
}


.place-source-editor-list {
  display: grid;

  border-top:
    1px solid
    var(--line);
}


.place-source-editor-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 14px;

  align-items: center;

  padding:
    11px
    0;

  border-bottom:
    1px solid
    var(--line);
}


.place-source-editor-row form {
  margin: 0;
}


.place-source-editor-copy {
  min-width: 0;

  display: grid;

  gap: 3px;
}


.place-source-editor-copy strong {
  color: #263c54;

  font-size: 0.8rem;
}


.place-source-editor-copy small {
  color: var(--muted);

  font-size: 0.68rem;
}


.place-source-editor-copy a {
  width: fit-content;

  color: #6033c9;

  font-size: 0.7rem;
}


/* Timeline source management */

.place-timeline-source-manager {
  display: grid;

  gap: 7px;

  margin-top: 9px;
}


.place-timeline-source-list {
  display: grid;

  gap: 5px;
}


.place-timeline-source-chip {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 10px;

  padding:
    6px
    8px;

  border-radius: 6px;

  background: #f2eefc;

  color: #47566a;

  font-size: 0.68rem;
}


.place-timeline-source-chip form {
  margin: 0;
}


.place-source-remove-link {
  padding: 0;

  border: 0;

  background: transparent;

  color: #6843bd;

  font-size: 0.66rem;
  font-weight: 700;

  cursor: pointer;
}


.place-timeline-add-source {
  width: fit-content;
}


.place-timeline-add-source > summary {
  color: #6033c9;

  font-size: 0.7rem;
  font-weight: 700;

  cursor: pointer;
}


.place-timeline-add-source[open] {
  width: 100%;

  padding:
    9px
    10px;

  border:
    1px solid
    var(--line);

  border-radius: 7px;

  background: #faf9fc;
}


.place-timeline-add-source[open]
> summary {
  margin-bottom: 8px;
}


.place-timeline-add-source form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(130px, 0.65fr)
    auto;

  gap: 8px;

  align-items: end;

  margin: 0;
}


/* Public Timeline citations */

.place-timeline-public-sources {
  display: grid;

  gap: 3px;

  margin-top: 5px;
}


.place-timeline-public-sources > div {
  color: #6b7280;

  font-size: 0.65rem;
}


.place-timeline-public-sources a {
  color: #6033c9;
}


.place-timeline-public-sources small {
  margin-left: 4px;

  color: var(--muted);
}


/* Public Sources sidebar */

.place-profile-source-list {
  display: grid;

  margin-top: 13px;
}


.place-profile-source-row {
  display: grid;

  gap: 2px;

  padding:
    9px
    0;

  border-top:
    1px solid
    #eceef1;
}


.place-profile-source-row:first-child {
  padding-top: 2px;

  border-top: 0;
}


.place-profile-source-row a,
.place-profile-source-row strong {
  color: #263b52;

  font-size: 0.74rem;
  font-weight: 700;
}


.place-profile-source-row a {
  text-decoration: none;
}


.place-profile-source-row a:hover {
  color: #6033c9;
}


.place-profile-source-row small {
  color: var(--muted);

  font-size: 0.64rem;
}


.place-profile-source-more {
  margin-top: 8px;

  color: #6b7280;

  font-size: 0.67rem;
}


@media (
  max-width: 680px
) {

  .place-timeline-add-source form {
    grid-template-columns: 1fr;
  }


  .place-source-editor-row {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   PLACE SOURCE UX CORRECTION
   ========================================================== */

.place-timeline-source-search-widget {
  margin-top: 9px;
}


.place-timeline-source-search-results {
  display: grid;

  gap: 6px;

  margin-top: 7px;
}


.place-source-result-form {
  display: flex;

  gap: 7px;

  align-items: center;

  margin: 0;
}


.place-source-locator-input {
  width: 110px;

  min-width: 90px;
}


@media (
  max-width: 680px
) {

  .place-source-result-form {
    align-items: stretch;

    flex-direction: column;
  }


  .place-source-locator-input {
    width: 100%;
  }

}


/* ==========================================================
   PLACE SOURCE LOCAL FEEDBACK
   ========================================================== */

.place-source-local-notice {
  margin:
    0
    0
    14px;

  padding:
    11px
    13px;

  border-radius: 8px;

  font-size: 0.76rem;
  line-height: 1.45;
}


.place-source-local-notice strong {
  display: block;

  margin-bottom: 2px;
}


.place-source-local-notice-success {
  border:
    1px solid
    #cbded0;

  background:
    #f2f8f3;

  color:
    #31553a;
}


.place-source-local-notice-info {
  border:
    1px solid
    #d8cff1;

  background:
    #f6f2ff;

  color:
    #493b72;
}


/* ==========================================================
   PLACE PHOTO DISPLAY — LARGE 3-COLUMN GRID
   ========================================================== */

.place-profile-photo-strip {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}


.place-profile-photo-tile {
  min-height: 0;
  aspect-ratio: 4 / 3;
}


.place-profile-photo-more {
  display: flex;

  justify-content: flex-end;

  margin-top: 13px;
}


.place-profile-photo-more a {
  color: #6033c9;

  font-size: 0.78rem;
  font-weight: 700;

  text-decoration: none;
}


.place-profile-photo-more a:hover {
  text-decoration: underline;
}


/* ==========================================================
   FULL PLACE PHOTO GALLERY
   ========================================================== */

.place-gallery-shell {
  width:
    min(
      1180px,
      calc(100vw - 36px)
    );

  margin:
    24px
    auto
    70px;
}


.place-gallery-header {
  display: flex;

  justify-content:
    space-between;

  align-items: flex-end;

  gap: 24px;

  margin-bottom: 22px;
}


.place-gallery-header h1 {
  margin:
    5px
    0
    4px;

  color: #172e48;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2rem,
      4vw,
      3.4rem
    );

  font-weight: 500;
}


.place-gallery-header p {
  margin: 0;

  color: var(--muted);
}


.place-gallery-back {
  display: inline-block;

  margin-bottom: 14px;

  color: #6033c9;

  font-size: 0.78rem;
  font-weight: 700;

  text-decoration: none;
}


.place-full-photo-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.place-full-photo-card {
  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  border-radius: 11px;

  background: #e9edf0;

  color: inherit;

  text-decoration: none;

  box-shadow:
    0 2px 9px
    rgba(
      31,
      42,
      55,
      0.08
    );
}


.place-full-photo-card img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform
    180ms ease;
}


.place-full-photo-card:hover img {
  transform: scale(1.025);
}


.place-full-photo-caption {
  position: absolute;

  left: 8px;
  right: 8px;
  bottom: 8px;

  padding:
    7px
    9px;

  border-radius: 6px;

  background:
    rgba(
      0,
      0,
      0,
      0.64
    );

  color: white;

  font-size: 0.7rem;
  line-height: 1.35;
}


.place-full-photo-cover-label {
  position: absolute;

  top: 8px;
  left: 8px;

  padding:
    5px
    7px;

  border-radius: 5px;

  background:
    rgba(
      94,
      50,
      199,
      0.9
    );

  color: white;

  font-size: 0.62rem;
  font-weight: 800;

  text-transform: uppercase;
}


@media (
  max-width: 800px
) {

  .place-profile-photo-strip,
  .place-full-photo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width: 520px
) {

  .place-profile-photo-strip,
  .place-full-photo-grid {
    grid-template-columns: 1fr;
  }


  .place-gallery-header {
    align-items: flex-start;

    flex-direction: column;
  }

}


/* ==========================================================
   ANCESTOR -> PLACE TIMELINE SUGGESTION
   ========================================================== */

.ancestor-timeline-suggestion {
  display: block;

  width: 100%;

  margin-top: 10px;
}


.ancestor-timeline-suggestion > summary {
  display: inline-flex;

  align-items: center;

  min-height: 28px;

  padding: 5px 9px;

  border:
    1px solid
    #d9d2ea;

  border-radius: 6px;

  background: #f6f3fc;

  color: #6033c9;

  font-size: 0.7rem;
  font-weight: 700;

  cursor: pointer;

  list-style-position: inside;
}


.ancestor-timeline-suggestion > summary:hover {
  background: #eee8fb;
}


.ancestor-timeline-suggestion[open] {
  margin-top: 12px;

  padding: 12px;

  border:
    1px solid
    #ddd6eb;

  border-radius: 9px;

  background: #fbfaff;
}


.ancestor-timeline-suggestion[open]
> summary {
  margin-bottom: 12px;
}


.ancestor-timeline-suggestion-form {
  display: grid;

  gap: 10px;

  width: 100%;

  margin: 0;
}


.ancestor-timeline-suggestion-form label {
  display: grid;

  gap: 4px;

  margin: 0;

  font-size: 0.72rem;
  font-weight: 700;
}


.ancestor-timeline-suggestion-form input,
.ancestor-timeline-suggestion-form select,
.ancestor-timeline-suggestion-form textarea {
  box-sizing: border-box;

  width: 100%;

  max-width: 100%;
}


.ancestor-timeline-suggestion-form textarea {
  min-height: 72px;

  resize: vertical;
}


.ancestor-timeline-suggestion-form
textarea[name="significance_reason"] {
  min-height: 90px;
}


.ancestor-timeline-suggestion-form p {
  margin:
    0
    0
    2px;
}


.ancestor-timeline-suggestion-form button {
  width: auto;

  justify-self: start;

  padding:
    7px
    12px;
}


.unified-life-event-main {
  min-width: 0;
}


.unified-life-event-main
.ancestor-timeline-suggestion {
  clear: both;
}


/*
When the suggestion editor is open, give the
Recorded Life Events side more breathing room.
Modern Codespaces/Chrome supports :has().
*/

.unified-life-event-layout:
has(.ancestor-timeline-suggestion[open]) {
  grid-template-columns:
    minmax(300px, 0.85fr)
    minmax(420px, 1.15fr);
}


@media (max-width: 900px) {

  .unified-life-event-layout:
  has(.ancestor-timeline-suggestion[open]) {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   EXPANDED ANCESTOR -> PLACE TIMELINE SUGGESTION
   ========================================================== */

/*
The normal Life Event row is intentionally compact.
When its Place Timeline suggestion is opened, give that
single event the full width of the Recorded Life Events
column instead of squeezing the editor into the center.
*/

.unified-life-event-row:
has(.ancestor-timeline-suggestion[open]) {
  grid-template-columns: 1fr;
  gap: 8px;
}


.unified-life-event-row:
has(.ancestor-timeline-suggestion[open])
.unified-life-event-date {
  width: auto;

  padding-bottom: 4px;

  border-bottom:
    1px solid
    var(--line);
}


.unified-life-event-row:
has(.ancestor-timeline-suggestion[open])
.unified-life-event-main {
  width: 100%;
}


.unified-life-event-row:
has(.ancestor-timeline-suggestion[open])
.ancestor-timeline-suggestion {
  width: 100%;
}


.unified-life-event-row:
has(.ancestor-timeline-suggestion[open])
.ancestor-timeline-suggestion[open] {
  box-sizing: border-box;

  width: 100%;
}


.unified-life-event-row:
has(.ancestor-timeline-suggestion[open])
.unified-life-event-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  width: 100%;
}


/*
Keep the overall Edit Life Event / Recorded Life Events
two-column screen stable. Only the individual event expands.
*/

.unified-life-event-layout:
has(.ancestor-timeline-suggestion[open]) {
  grid-template-columns:
    minmax(360px, 1fr)
    minmax(360px, 1fr);
}


@media (max-width: 900px) {

  .unified-life-event-layout:
  has(.ancestor-timeline-suggestion[open]) {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   CORRECTED OPEN PLACE TIMELINE SUGGESTION LAYOUT
   ========================================================== */

/*
Important: :has() must remain one continuous selector.
These rules supersede the malformed versions above.
*/

.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
) {
  grid-template-columns: 1fr;
  gap: 8px;
}


.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
)
.unified-life-event-date {
  width: 100%;
  box-sizing: border-box;

  padding-bottom: 6px;

  border-bottom:
    1px solid
    var(--line);
}


.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
)
.unified-life-event-main {
  width: 100%;
  min-width: 0;
}


.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
)
.ancestor-timeline-suggestion {
  box-sizing: border-box;

  width: 100%;
}


.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
)
.ancestor-timeline-suggestion[open] {
  box-sizing: border-box;

  width: 100%;
  max-width: none;
}


.unified-life-event-row:has(
  .ancestor-timeline-suggestion[open]
)
.unified-life-event-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  width: 100%;
}


/*
Give the Recorded Life Events column enough room while an
editor is open, without changing the normal closed state.
*/

.unified-life-event-layout:has(
  .ancestor-timeline-suggestion[open]
) {
  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(430px, 1.1fr);
}


@media (max-width: 900px) {

  .unified-life-event-layout:has(
    .ancestor-timeline-suggestion[open]
  ) {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   PLACE TIMELINE SUGGESTION REVIEW QUEUE
   ========================================================== */

.place-timeline-suggestion-queue {
  display: grid;

  gap: 14px;

  margin:
    14px
    0
    24px;

  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--line);
}


.place-timeline-suggestion-queue
.ancestor-card-heading {
  align-items: flex-start;
}


.place-timeline-suggestion-card {
  display: grid;

  gap: 14px;

  padding: 14px;

  border:
    1px solid
    #ddd6eb;

  border-radius: 10px;

  background: #fbfaff;
}


/* Person / originating Life Event */

.place-timeline-suggestion-origin {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}


.place-timeline-suggestion-origin img {
  flex:
    0
    0
    46px;

  width: 46px;
  height: 46px;

  max-width: 46px;

  border-radius: 50%;

  object-fit: cover;

  object-position: center;
}


.place-timeline-suggestion-origin > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}


.place-timeline-suggestion-origin a {
  color: #243a52;

  text-decoration: none;
}


.place-timeline-suggestion-origin a:hover {
  text-decoration: underline;
}


/* Why the ancestor manager thinks this belongs here */

.place-timeline-suggestion-significance {
  padding:
    10px
    12px;

  border-left:
    3px solid
    #6b3ed6;

  border-radius:
    0
    6px
    6px
    0;

  background: #f4f0fc;
}


.place-timeline-suggestion-significance strong {
  display: block;

  margin-bottom: 4px;

  color: #4d3488;

  font-size: 0.72rem;
}


.place-timeline-suggestion-significance p {
  margin: 0;

  color: #4d5a6c;

  font-size: 0.75rem;
  line-height: 1.45;
}


/* Manager's editable version */

.place-timeline-suggestion-review-form {
  display: grid;

  gap: 10px;

  margin: 0;
}


.place-timeline-suggestion-review-form
.two {
  display: grid;

  grid-template-columns:
    minmax(110px, 0.32fr)
    minmax(220px, 0.68fr);

  gap: 10px;
}


.place-timeline-suggestion-review-form label {
  display: grid;

  gap: 4px;

  margin: 0;

  font-size: 0.72rem;
  font-weight: 700;
}


.place-timeline-suggestion-review-form input,
.place-timeline-suggestion-review-form textarea {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
}


.place-timeline-suggestion-review-form textarea {
  resize: vertical;
}


/*
Keep the review actions compact. Accept is the primary
action; Reject remains visually secondary.
*/

.place-timeline-suggestion-review-form
.ancestor-editor-form-actions {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 2px;
}


.place-timeline-suggestion-review-form
.ancestor-editor-form-actions button {
  width: auto;

  min-width: 0;
}


/*
Separate manager-reviewed suggestions from the ordinary
manual Add Timeline Entry form beneath them.
*/

.place-timeline-suggestion-queue
+ .place-timeline-add-panel {
  margin-top: 4px;
}


@media (max-width: 700px) {

  .place-timeline-suggestion-review-form
  .two {
    grid-template-columns: 1fr;
  }


  .place-timeline-suggestion-review-form
  .ancestor-editor-form-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .place-timeline-suggestion-review-form
  .ancestor-editor-form-actions button {
    width: 100%;
  }

}


/* HUMAN PLACE TIMELINE ENTRIES */

.place-timeline-person-event {
  display: flex;

  align-items: flex-start;

  gap: 10px;
}


.place-timeline-person-photo-link {
  flex:
    0
    0
    42px;

  display: block;
}


.place-timeline-person-photo {
  display: block;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  object-fit: cover;
  object-position: center;
}


.place-timeline-person-event-copy {
  min-width: 0;

  flex: 1;
}


.place-timeline-event-title {
  display: block;

  margin-bottom: 4px;

  font-size: 0.82rem;
  line-height: 1.35;
}


.place-timeline-event-title a {
  color: inherit;

  text-decoration: none;
}


.place-timeline-event-title a:hover {
  text-decoration: underline;
}


.place-timeline-event-story {
  margin:
    0
    0
    6px;

  font-size: 0.73rem;
  line-height: 1.45;
}


.place-timeline-person-profile-link {
  display: inline-block;

  font-size: 0.68rem;
  font-weight: 700;

  text-decoration: none;
}


.place-timeline-person-profile-link:hover {
  text-decoration: underline;
}



/* =========================================================
   LINEAGE IMPACT REVIEW
   ========================================================= */

.lineage-review-page {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 64px;
}


.lineage-review-heading {
  margin-bottom: 28px;
  align-items: flex-start;
}


.lineage-review-heading h1 {
  margin: 5px 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}


.lineage-review-intro {
  max-width: 660px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-text, #5d6270);
}


.lineage-review-card {
  padding: 28px;
  border-radius: 18px;
}


.lineage-proposed-change {
  margin-bottom: 34px;
  padding: 20px 22px;
  border-radius: 12px;
  background: #f5f6f9;
}


.lineage-proposed-change strong {
  display: block;
  margin-top: 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  line-height: 1.35;
}


.lineage-section-label {
  display: block;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6650c8;
}


.lineage-review-section {
  margin-top: 4px;
}


.lineage-review-section-heading {
  margin-bottom: 18px;
}


.lineage-review-section-heading h2,
.lineage-confirm-heading h2 {
  margin: 5px 0 0;
  font-size: 1.45rem;
  line-height: 1.25;
}


.lineage-effect-summary {
  margin-bottom: 24px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid #e4e5eb;
  background: #fafafd;
}


.lineage-effect-summary strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
  line-height: 1.4;
}


.lineage-effect-summary p {
  margin: 5px 0 0;
  max-width: 720px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4e5360;
}


.lineage-effect-major {
  border-color: #e3c66c;
  background: #fff9e8;
}


.lineage-impact-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 34px;
}


.lineage-impact-stat {
  min-height: 108px;
  padding: 18px;
  border: 1px solid #e3e4ea;
  border-radius: 12px;
  background: #fff;
}


.lineage-impact-stat span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 700;
  color: #6c7180;
}


.lineage-impact-stat strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.35;
  color: #171923;
}


.lineage-confirm-form {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid #e5e5ea;
}


.lineage-confirm-heading {
  margin-bottom: 16px;
}


.lineage-confirm-heading p {
  max-width: 650px;
  margin: 8px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #646978;
}


.lineage-confirm-form textarea {
  display: block;
  width: 100%;
  min-height: 118px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #cfd1d8;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  background: #fff;
}


.lineage-confirm-form textarea:focus {
  outline: 3px solid rgba(101, 66, 202, 0.14);
  border-color: #6542ca;
}


.lineage-history-note {
  margin: 13px 0 20px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #6c7180;
}


.lineage-confirm-button {
  min-width: 220px;
  padding: 13px 22px;
  font-size: 0.95rem;
  font-weight: 750;
}


.lineage-review-alert {
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid #dfc66d;
  border-radius: 12px;
  background: #fff8df;
}


.lineage-review-alert strong {
  display: block;
  margin-top: 5px;
  font-size: 1.02rem;
  line-height: 1.45;
}


.lineage-review-alert p {
  margin: 8px 0 0;
  line-height: 1.55;
}


.lineage-review-alert-major {
  margin: 28px 0;
}


@media (max-width: 760px) {

  .lineage-review-card {
    padding: 20px;
  }


  .lineage-impact-grid {
    grid-template-columns: 1fr;
  }


  .lineage-impact-stat {
    min-height: auto;
  }


  .lineage-confirm-button {
    width: 100%;
  }

}



/* ==========================================================
   PEOPLE SEARCH
   ========================================================== */

.people-search-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}


.people-search-heading {
  margin-bottom: 18px;
}


.people-search-heading h1 {
  margin:
    4px
    0
    6px;
}





/* ==========================================================
   PLACES MAP FOUNDATION — PHASE 2A
   ========================================================== */

.places-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin: 0 0 12px;
}


.places-page-heading h1 {
  margin: 0;

  color: #14233a;

  font-size: 2rem;
  line-height: 1.15;
}


.places-view-switch {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  padding: 3px;

  background: #eef1f5;

  border: 1px solid #dce2e9;
  border-radius: 999px;
}


.places-view-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 82px;

  padding: 8px 16px;

  border-radius: 999px;

  color: #647083;

  font-size: 0.86rem;
  font-weight: 700;
}


.places-view-option.is-active {
  background: #fff;
  color: #0d2f5f;

  box-shadow:
    0 1px 4px rgba(18, 35, 58, 0.10);
}


.places-view-option.is-disabled {
  opacity: 0.62;
}


/*
 * The map now owns the width.
 * Filters overlay it rather than permanently consuming
 * a second column.
 */

.family-geography-layout {
  position: relative;

  display: block !important;

  width: 100%;
  min-width: 0;
}


.family-geography-map-card {
  width: 100% !important;
  min-width: 0;
}


.places-map-tools {
  min-height: 46px;

  padding-left: 14px;
  padding-right: 12px;
}


.places-map-label {
  color: #26384e;

  font-size: 0.9rem;
}


.family-geography-map-placeholder {
  min-height: 620px;

  height:
    clamp(
      620px,
      72vh,
      900px
    );
}


.family-geography-map-canvas {
  width: 100%;
  height: 100%;
}


/*
 * Filter drawer
 */

.places-filter-panel {
  position: absolute;

  z-index: 40;

  top: 58px;
  right: 14px;

  width:
    min(
      370px,
      calc(100% - 28px)
    );

  max-height:
    calc(100% - 74px);

  overflow-y: auto;

  background: #fff;

  border: 1px solid #dce2e9;
  border-radius: 14px;

  box-shadow:
    0 14px 38px
    rgba(18, 35, 58, 0.18);
}


.places-filter-panel[hidden] {
  display: none !important;
}


.family-geography-panel-heading {
  position: relative;
}


.places-filter-close {
  position: absolute;

  top: -2px;
  right: 0;

  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 50%;

  color: #647083;

  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}


.places-filter-close:hover {
  background: #eef3f8;
  color: #0d2f5f;
}


/*
 * A blank map is the normal starting state.
 * The empty-state overlay is reserved for actual map errors.
 */

.family-geography-empty[hidden] {
  display: none !important;
}


@media (max-width: 760px) {

  .places-page-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }


  .family-geography-map-placeholder {
    min-height: 520px;
    height: 68vh;
  }


  .places-filter-panel {
    top: 58px;
    left: 10px;
    right: 10px;

    width: auto;

    max-height:
      calc(100% - 70px);
  }

}





/* ==========================================================
   PLACES MAP INTERACTION CLEANUP — PHASE 2B
   ========================================================== */

/*
 * The map itself is the page surface.
 * There is no permanent toolbar above it.
 */

.family-geography-map-card {
  overflow: hidden;

  border-radius: 16px;
}


.family-geography-map-placeholder {
  position: relative;

  border-radius: 16px;
}


/* ----------------------------------------------------------
   FLOATING MAP CONTROLS
   ---------------------------------------------------------- */

.places-map-actions {
  position: absolute;

  z-index: 35;

  top: 14px;
  right: 14px;

  display: flex;
  align-items: center;

  gap: 8px;
}


.places-map-filter-button,
.places-map-fit-button {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.95
    );

  color: #26384e;

  border: 1px solid #d7dee7;
  border-radius: 999px;

  box-shadow:
    0 3px 14px
    rgba(18, 35, 58, 0.14);

  backdrop-filter: blur(8px);

  font-size: 0.84rem;
  font-weight: 700;
}


.places-map-filter-button:hover,
.places-map-fit-button:hover {
  background: #fff;
  color: #0d2f5f;
}


.places-map-filter-button.is-active {
  background: #0d2f5f;
  color: #fff;

  border-color: #0d2f5f;
}


.places-map-filter-icon {
  font-size: 0.9rem;
  line-height: 1;
}


/*
 * Fit places should not occupy space when there is
 * nothing meaningful to fit.
 */

.places-map-fit-button:disabled {
  display: none;
}


/* ----------------------------------------------------------
   SELECTED PLACE PREVIEW
   ---------------------------------------------------------- */

.places-selected-location {
  position: absolute;

  z-index: 34;

  left: 16px;
  bottom: 16px;

  width:
    min(
      380px,
      calc(100% - 32px)
    );

  max-height:
    min(
      430px,
      calc(100% - 100px)
    );

  overflow-y: auto;

  padding: 16px;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border: 1px solid #d7dee7;
  border-radius: 16px;

  box-shadow:
    0 14px 36px
    rgba(18, 35, 58, 0.20);

  backdrop-filter: blur(10px);
}


.places-selected-location[hidden] {
  display: none !important;
}


.places-selected-location
  .family-map-detail-place {

  display: block;

  margin-bottom: 3px;

  color: #14233a;

  font-size: 1.08rem;
  line-height: 1.25;
}


.places-selected-location
  .family-map-detail-count {

  margin-bottom: 12px;

  color: #647083;

  font-size: 0.78rem;
}


/* ----------------------------------------------------------
   FILTER TRAY
   ---------------------------------------------------------- */

.places-filter-panel {
  position: absolute;

  z-index: 45;

  top: 14px;
  right: 14px;
  bottom: 14px;

  width:
    min(
      370px,
      calc(100% - 28px)
    );

  max-height: none;

  overflow-y: auto;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(
      calc(100% + 34px)
    );

  transition:
    transform 190ms ease,
    opacity 150ms ease,
    visibility 0s linear 190ms;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  border: 1px solid #d7dee7;
  border-radius: 18px;

  box-shadow:
    0 18px 44px
    rgba(18, 35, 58, 0.22);

  backdrop-filter: blur(12px);
}


.places-filter-panel.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform: translateX(0);

  transition:
    transform 190ms ease,
    opacity 150ms ease;
}


/*
 * Phase 2A used the hidden attribute.
 * Phase 2B intentionally keeps the tray mounted so it can
 * animate smoothly.
 */

.places-filter-panel[hidden] {
  display: block !important;
}


.family-geography-panel-heading {
  position: sticky;

  z-index: 2;

  top: 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  padding-bottom: 13px;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );
}


.places-filter-clear {
  flex: 0 0 auto;

  padding: 5px 2px;

  background: transparent;

  border: 0;

  color: #647083;

  font-size: 0.77rem;
  font-weight: 700;
}


.places-filter-clear:hover {
  background: transparent;
  color: #0d2f5f;

  text-decoration: underline;
}


/*
 * Phase 2B no longer uses a close-X.
 */

.places-filter-close {
  display: none !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  .places-map-actions {
    top: 10px;
    right: 10px;
  }


  .places-map-filter-button,
  .places-map-fit-button {
    min-height: 38px;

    padding:
      7px
      12px;
  }


  .places-selected-location {
    left: 10px;
    right: 10px;
    bottom: 10px;

    width: auto;

    max-height: 42%;
  }


  .places-filter-panel {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;

    width: auto;
  }

}





/* ==========================================================
   PLACES PREVIEW + FILTER DONE — PHASE 2B REPAIR
   ========================================================== */


/* ----------------------------------------------------------
   SELECTED PLACE PREVIEW
   ---------------------------------------------------------- */

/*
 * Explicit visible state avoids depending solely on the
 * generic hidden attribute and guarantees the preview sits
 * above the MapLibre surface.
 */

.places-selected-location {
  z-index: 90 !important;

  display: none;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  transform: translateY(8px);

  transition:
    opacity 140ms ease,
    transform 160ms ease;
}


.places-selected-location.is-visible {
  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto;

  transform: translateY(0);
}


.places-selected-location[hidden] {
  display: none !important;
}


/*
 * Keep the map canvas below SocialArt's map overlays.
 */

.family-geography-map-canvas {
  position: relative;

  z-index: 1;
}


.places-map-actions {
  z-index: 80;
}


.places-filter-panel {
  z-index: 100;
}


/* ----------------------------------------------------------
   FILTER HEADER ACTIONS
   ---------------------------------------------------------- */

.places-filter-heading-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 10px;
}


.places-filter-done {
  min-height: 34px;

  padding:
    7px
    14px;

  background: #0d2f5f;
  color: #fff;

  border: 1px solid #0d2f5f;
  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
}


.places-filter-done:hover {
  background: #174f91;
  color: #fff;

  border-color: #174f91;
}


.places-filter-clear {
  white-space: nowrap;
}


@media (max-width: 760px) {

  .places-filter-heading-actions {
    gap: 7px;
  }


  .places-filter-done {
    padding:
      7px
      12px;
  }

}




/* ==========================================================
   PLACE PROFILE — VIEWER-RELATIVE FAMILY CONTEXT
   ========================================================== */

.place-profile-family-context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
    margin-top: 0.35rem;
    max-width: 60rem;
    font-style: italic;
}

.place-profile-family-context-item {
    display: inline;
}

.place-profile-family-context-item:not(:last-child)::after {
    content: " ·";
    margin-left: 0.45rem;
}

.place-profile-family-context-more {
    display: inline;
}

.place-profile-family-context-more summary {
    display: inline;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-style: normal;
}

.place-profile-family-context-more summary::marker {
    content: "";
}

.place-profile-family-context-more-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-left: 0.75rem;
}


/* ==========================================================
   PLACE PROFILE — FAMILY CONTEXT SPACING REFINEMENT
   ========================================================== */

.place-profile-hero-location
+ .place-profile-family-context {
    margin-top: 0.18rem;
}

.place-profile-family-context {
    margin-bottom: 0.9rem;
}

.place-profile-family-context
+ .place-profile-edit-button {
    margin-top: 0;
}


/* ==========================================================
   PLACE MEDIA VIEWER
   ========================================================== */

body.media-viewer-open {
  overflow: hidden;
}


.media-viewer[hidden] {
  display: none;
}


.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 24px;
}


.media-viewer-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(10, 12, 16, 0.88);
}


.media-viewer-dialog {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    52px
    minmax(0, 1fr)
    52px;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  width: min(
    1180px,
    calc(100vw - 48px)
  );

  height: min(
    860px,
    calc(100vh - 48px)
  );

  overflow: hidden;

  background: #11151a;
  border-radius: 14px;

  box-shadow:
    0 20px 70px
    rgba(0, 0, 0, 0.45);
}


.media-viewer-stage {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;
  min-height: 0;

  display: grid;
  place-items: center;

  padding: 28px 12px 14px;
}


.media-viewer-image,
.media-viewer-video {
  display: block;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


.media-viewer-frame {
  display: block;

  width: min(
    100%,
    1000px
  );

  aspect-ratio: 16 / 9;

  border: 0;
  background: black;
}


.media-viewer-external {
  display: grid;
  place-items: center;
  gap: 16px;

  width: 100%;
  height: 100%;
}


.media-viewer-external
.media-viewer-image {
  max-height:
    calc(100% - 70px);
}


.media-viewer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;

  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.5);

  color: white;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}


.media-viewer-nav {
  align-self: center;
  z-index: 3;

  width: 44px;
  height: 60px;

  border: 0;

  background: transparent;
  color: white;

  font-size: 48px;
  line-height: 1;

  cursor: pointer;
}


.media-viewer-prev {
  grid-column: 1;
  grid-row: 1;
}


.media-viewer-next {
  grid-column: 3;
  grid-row: 1;
}


.media-viewer-footer {
  grid-column: 1 / 4;
  grid-row: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-height: 56px;

  padding: 12px 18px;

  color: white;

  border-top:
    1px solid rgba(255, 255, 255, 0.12);
}


.media-viewer-caption {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.media-viewer-count {
  flex: 0 0 auto;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.88rem;
}


@media (max-width: 700px) {

  .media-viewer {
    padding: 0;
  }


  .media-viewer-dialog {
    width: 100vw;
    height: 100vh;

    border-radius: 0;

    grid-template-columns:
      44px
      minmax(0, 1fr)
      44px;
  }


  .media-viewer-stage {
    padding:
      58px
      4px
      10px;
  }


  .media-viewer-nav {
    width: 40px;

    font-size: 40px;
  }


  .media-viewer-footer {
    padding:
      10px
      14px;
  }

}


/* ==========================================================
   SITEWIDE TOP NAV SHELL — 2026-09-22
   ========================================================== */

.site-header {
  display: grid;
  grid-template-columns:
    auto
    auto
    minmax(240px, 1fr)
    auto;

  align-items: center;

  column-gap: 28px;
  row-gap: 8px;

  min-height: 66px;

  padding:
    9px
    max(3vw, 24px);
}


.site-header-brand {
  white-space: nowrap;
}


.site-primary-nav {
  display: flex;
  align-items: center;

  gap: 4px;

  min-width: 0;
}


.site-primary-nav a {
  display: inline-flex;
  align-items: center;

  min-height: 40px;

  padding:
    8px
    12px;

  border-radius: 9px;

  color: #294463;

  font-size: 0.94rem;
  font-weight: 650;

  text-decoration: none;
}


.site-primary-nav a:hover {
  background: #f2f5f9;
  color: #0f315a;
}


.site-global-search {
  position: relative;

  justify-self: end;

  width: min(
    390px,
    100%
  );

  margin: 0;
}


.site-global-search svg {
  position: absolute;

  left: 14px;
  top: 50%;

  width: 17px;
  height: 17px;

  transform:
    translateY(-50%);

  fill: none;

  stroke: #78879a;
  stroke-width: 1.8;
  stroke-linecap: round;
}


.site-global-search input {
  display: block;

  width: 100%;
  min-height: 40px;

  margin: 0;

  padding:
    8px
    16px
    8px
    41px;

  border:
    1px
    solid
    #dbe2ea;

  border-radius: 999px;

  background: #f5f7fa;

  color: #172d49;

  font-size: 0.92rem;
}


.site-global-search input:focus {
  outline:
    2px
    solid
    rgba(
      34,
      103,
      190,
      0.2
    );

  border-color: #8eb1db;
  background: #ffffff;
}


.site-page-shell {
  display: block;

  width:
    min(
      1480px,
      calc(100% - 48px)
    );

  max-width: 1480px;

  margin:
    0
    auto;

  padding-left: 0;
  padding-right: 0;
}


.site-page-content {
  width: 100%;
  max-width: none;
  min-width: 0;
}


/*
  Keep the old sidebar file intact for safe rollback.
  The new global shell no longer renders it.
*/

.site-sidebar {
  display: none;
}


/* ==========================================================
   GLOBAL SEARCH RESULTS
   ========================================================== */

.site-search-page {
  width:
    min(
      1100px,
      100%
    );

  margin:
    0
    auto
    48px;
}


.site-search-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 18px;
}


.site-search-heading h1 {
  margin:
    2px
    0
    0;
}


.site-search-page-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 10px;

  margin-bottom: 22px;
}


.site-search-page-form input {
  min-height: 46px;

  margin: 0;

  border-radius: 12px;
}


.site-search-page-form button {
  min-width: 100px;

  margin: 0;
}


.site-search-sections {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 20px;

  align-items: start;
}


.site-search-section-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;
}


.site-search-section-heading h2 {
  margin: 0;
}


.site-search-result-list {
  display: grid;

  gap: 4px;
}


.site-search-result {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  padding:
    10px
    8px;

  border-radius: 10px;

  color: inherit;
  text-decoration: none;
}


.site-search-result:hover {
  background: #f5f7fa;
}


.site-search-avatar {
  display: block;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  object-fit: cover;

  background: #e7edf4;
}


.site-search-avatar-fallback {
  display: grid;

  place-items: center;

  font-weight: 750;

  color: #355779;
}


.site-search-place-icon {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 12px;

  background: #edf4fb;

  color: #2d6fb7;

  font-size: 0.8rem;
}


.site-search-result-copy {
  display: grid;

  min-width: 0;

  gap: 2px;
}


.site-search-result-copy strong,
.site-search-result-copy small {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.site-search-result-copy small {
  color: #738094;
}


.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ==========================================================
   RESPONSIVE SITE SHELL
   ========================================================== */

@media (
  max-width: 1050px
) {

  .site-header {
    grid-template-columns:
      auto
      minmax(180px, 1fr)
      auto;

    column-gap: 18px;
  }


  .site-primary-nav {
    grid-column:
      1
      /
      -1;

    grid-row: 2;

    overflow-x: auto;

    padding-top: 2px;
  }


  .site-global-search {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
  }


  .site-header-actions {
    grid-column: 3;
    grid-row: 1;
  }

}


@media (
  max-width: 720px
) {

  .site-header {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding:
      8px
      14px;
  }


  .site-header-brand {
    grid-column: 1;
    grid-row: 1;
  }


  .site-header-actions {
    grid-column: 2;
    grid-row: 1;
  }


  .site-primary-nav {
    grid-column:
      1
      /
      -1;

    grid-row: 2;
  }


  .site-primary-nav a {
    padding:
      7px
      10px;

    font-size: 0.9rem;
  }


  .site-global-search {
    grid-column:
      1
      /
      -1;

    grid-row: 3;

    width: 100%;
  }


  .site-page-shell {
    width:
      calc(
        100%
        - 24px
      );
  }


  .site-search-sections {
    grid-template-columns:
      1fr;
  }

}
/* ==========================================================
   PRIMARY NAV ICON REFINEMENT — 2026-09-22
   ========================================================== */

.site-primary-nav {
  align-self: stretch;
}


.site-primary-nav-action {
  display: flex !important;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  min-width: 66px;
  min-height: 54px;

  padding:
    5px
    9px !important;

  border-radius: 10px;

  line-height: 1;

  text-align: center;
}


.site-primary-nav-icon {
  display: block;

  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.site-primary-nav-action span {
  font-size: 0.76rem;
  font-weight: 650;

  line-height: 1.1;

  white-space: nowrap;
}


.site-primary-nav-action:hover {
  background: #f2f5f9;
}


@media (
  max-width: 720px
) {

  .site-primary-nav-action {
    min-width: 60px;

    padding:
      5px
      7px !important;
  }


  .site-primary-nav-icon {
    width: 20px;
    height: 20px;
  }


  .site-primary-nav-action span {
    font-size: 0.72rem;
  }

}
/* ==========================================================
   PRIMARY NAV ICON-ONLY REFINEMENT
   ========================================================== */

.site-primary-nav-action {
  min-width: 44px;
  min-height: 44px;

  padding:
    7px !important;
}


.site-primary-nav-icon {
  width: 24px;
  height: 24px;
}


@media (
  max-width: 720px
) {

  .site-primary-nav-action {
    min-width: 42px;
  }


  .site-primary-nav-icon {
    width: 23px;
    height: 23px;
  }

}
/* ==========================================================
   FUTURE PRIMARY NAV ITEMS
   ========================================================== */

.site-primary-nav-action-disabled {
  cursor: default;

  color: #a5afbc !important;

  opacity: 0.72;

  pointer-events: none;
}


.site-primary-nav-action-disabled:hover {
  background: transparent !important;
}

/* =========================================================
   LIVING PROFILE REBUILD — 2026-09-22
   ========================================================= */

.member-profile {
  max-width: 1320px;
  margin: 0 auto;
}

.member-profile-header {
  border-color: #e2e4e8;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(20, 28, 40, 0.045);
  margin-bottom: 18px;
}

.member-cover {
  height: 270px;
  background: #e7e9ee;
}

.member-cover-placeholder {
  background:
    linear-gradient(
      135deg,
      #e9ebef 0%,
      #dfe3e8 48%,
      #eceef1 100%
    );
}

.member-identity-row {
  align-items: center;
  padding: 0 30px 20px;
  min-height: 98px;
}

.member-profile-photo-wrap {
  margin-top: -74px;
}

.member-profile-photo,
.member-profile-avatar {
  width: 156px;
  height: 156px;
  border-width: 5px;
  box-shadow: 0 2px 9px rgba(20, 28, 40, 0.11);
}

.member-identity h1 {
  margin: 2px 0 4px;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
}

.member-identity-meta {
  color: #606975;
  font-size: 0.96rem;
  margin-top: 5px;
}

.profile-relationship-line {
  margin-top: 7px;
  color: #606975;
}

.member-profile-actions {
  align-items: center;
}

.member-profile-nav {
  gap: 3px;
  padding: 8px 28px 10px;
  border-top: 1px solid #eceef1;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.member-profile-nav a,
.member-profile-nav .profile-nav-disabled {
  flex: 0 0 auto;
  padding: 9px 11px;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
}

.member-profile-nav a {
  color: #434b56;
}

.member-profile-nav a:hover {
  background: #f1f2f5;
}

.member-profile-nav .profile-nav-disabled {
  color: #a0a6ae;
  cursor: default;
}


/* Main feed first; information rail second. */

.member-profile-body {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 360px);
  gap: 22px;
  width: 100%;
  align-items: start;
}

.member-profile-main {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
}

.member-profile-left {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Feed */

.profile-feed-card {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-feed-card > h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.profile-post-form {
  background: #fff;
  border: 1px solid #e1e3e7;
  border-radius: 17px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, 0.035);
}

.profile-post-form textarea {
  min-height: 86px;
  border-color: #e0e3e7;
  border-radius: 13px;
  background: #fafbfc;
  resize: vertical;
  font-size: 1rem;
}

.profile-post-form button[type="submit"] {
  justify-self: start;
}

.profile-feed-post {
  position: relative;
  background: #fff;
  border: 1px solid #e1e3e7;
  border-radius: 17px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, 0.035);
}

.profile-feed-post:first-of-type {
  border-top: 1px solid #e1e3e7;
}

.post-author-line {
  align-items: baseline;
}

.profile-feed-post > p {
  line-height: 1.55;
}


/* Right rail */

.profile-summary-card {
  border-color: #e2e4e8;
  border-radius: 16px;
  padding: 17px;
  box-shadow: 0 1px 6px rgba(20, 28, 40, 0.025);
}

.profile-summary-card h2 {
  font-size: 1.06rem;
  margin-bottom: 11px;
}

.profile-about-details p {
  margin: 8px 0;
  line-height: 1.35;
}

.member-sidebar-group-heading {
  padding: 4px 4px 0;
  color: #58616d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-profile-left #friends,
.member-profile-left #family,
.member-profile-left #generations {
  padding-top: 15px;
  padding-bottom: 15px;
}

.member-profile-left #friends h2,
.member-profile-left #family h2,
.member-profile-left #generations h2 {
  margin-bottom: 8px;
}


/* Places preview — visual shell only.
   Canonical living Person ↔ Place wiring comes later. */

.member-mini-map-placeholder {
  position: relative;
  height: 118px;
  overflow: hidden;
  border: 1px solid #e0e4e8;
  border-radius: 12px;
  background:
    linear-gradient(
      35deg,
      transparent 43%,
      rgba(145, 153, 165, 0.13) 44%,
      rgba(145, 153, 165, 0.13) 46%,
      transparent 47%
    ),
    linear-gradient(
      -28deg,
      transparent 50%,
      rgba(145, 153, 165, 0.12) 51%,
      rgba(145, 153, 165, 0.12) 53%,
      transparent 54%
    ),
    #f4f6f7;
}

.member-mini-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: 6px solid rgba(97, 61, 193, 0.14);
  border-radius: 50%;
  color: #613dc1;
  font-size: 11px;
}

.member-place-line {
  margin: 10px 0 0;
  font-size: 0.92rem;
  font-weight: 650;
}


/* Reserved future modules */

.member-future-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.member-future-card {
  min-width: 0;
  padding: 14px;
  border: 1px dashed #d6d9de;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.member-future-card-title {
  margin-bottom: 4px;
  font-size: 0.94rem;
  font-weight: 750;
}


/* Media stays useful without dominating the rail. */

.profile-media-grid {
  gap: 5px;
}

.profile-media-tile {
  border-radius: 9px;
}


/* Responsive */

@media (max-width: 980px) {

  .member-profile-body {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(270px, 320px);
  }

  .member-identity-row {
    padding-left: 22px;
    padding-right: 22px;
  }

  .member-profile-nav {
    padding-left: 20px;
    padding-right: 20px;
  }

}

@media (max-width: 760px) {

  .member-profile {
    max-width: 100%;
  }

  .member-cover {
    height: 190px;
  }

  .member-identity-row {
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 16px;
  }

  .member-profile-photo,
  .member-profile-avatar {
    width: 128px;
    height: 128px;
  }

  .member-profile-photo-wrap {
    margin-top: -62px;
  }

  .member-identity h1 {
    font-size: 2rem;
  }

  .member-profile-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .member-profile-main {
    order: 1;
  }

  .member-profile-left {
    order: 2;
  }

  .member-profile-nav {
    padding-left: 14px;
    padding-right: 14px;
  }

}

@media (max-width: 480px) {

  .member-future-grid {
    grid-template-columns: 1fr;
  }

  .member-profile-actions {
    width: 100%;
  }

}

/* =========================================================
   LIVING PROFILE MOCKUP IMPLEMENTATION — 2026-09-22
   ========================================================= */

.living-profile {
  max-width: 1320px;
  margin: 0 auto;
  color: #18253a;
}


/* ---------------------------------------------------------
   COVER + IDENTITY
   --------------------------------------------------------- */

.living-profile-hero {
  margin-bottom: 18px;
}

.living-cover {
  position: relative;
  height: 285px;
  overflow: hidden;
  border-radius: 18px;
  background: #dfe4e9;
  box-shadow: 0 2px 10px rgba(20, 33, 50, 0.05);
}

.living-cover-image,
.living-cover-placeholder {
  width: 100%;
  height: 100%;
}

.living-cover-image {
  display: block;
  object-fit: cover;
}

.living-cover-placeholder {
  background:
    linear-gradient(
      135deg,
      #dce3e8 0%,
      #edf0f2 45%,
      #d9e0e5 100%
    );
}

.living-cover-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  color: #244c84;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 2px 10px rgba(20, 33, 50, 0.12);
}

.living-identity-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  margin-top: -1px;
  padding: 16px 24px 18px 220px;
  border: 1px solid #e1e5e9;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #fff;
}

.living-profile-photo-wrap {
  position: absolute;
  left: 30px;
  top: -82px;
}

.living-profile-photo,
.living-profile-avatar {
  width: 164px;
  height: 164px;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 13px rgba(20, 33, 50, 0.14);
}

.living-profile-photo {
  display: block;
  object-fit: cover;
}

.living-profile-avatar {
  display: grid;
  place-items: center;
  background: #ebe6ff;
  color: #613dc1;
  font-size: 3.7rem;
  font-weight: 800;
}

.living-identity-copy {
  flex: 1;
  min-width: 0;
}

.living-identity-copy h1 {
  margin: 0;
  color: #17253b;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.living-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #5e6876;
  font-size: 0.96rem;
}

.living-relationship {
  margin-top: 7px;
  color: #66717d;
  font-size: 0.9rem;
}

.living-relationship span {
  color: #8a93a0;
}

.living-identity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.living-identity-actions form {
  margin: 0;
}

.living-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #515b68;
  font-size: 0.85rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   MAIN TWO-COLUMN LAYOUT
   --------------------------------------------------------- */

.living-profile-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(300px, 0.82fr);
  gap: 18px;
  align-items: start;
}

.living-feed {
  min-width: 0;
}

.living-profile-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}


/* ---------------------------------------------------------
   COMPOSER
   --------------------------------------------------------- */

.living-composer {
  margin-bottom: 16px;
  padding: 16px 18px 13px;
  border: 1px solid #e1e5e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 38, 55, 0.035);
}

.living-composer-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.living-composer-avatar,
.living-post-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #ebe6ff;
  color: #613dc1;
  font-weight: 800;
}

.living-composer-avatar {
  width: 46px;
  height: 46px;
}

.living-composer-avatar img,
.living-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.living-composer textarea {
  min-height: 58px;
  padding: 15px 16px;
  border: 1px solid #dfe4e9;
  border-radius: 12px;
  background: #fafbfc;
  font-size: 1rem;
  resize: vertical;
}

.living-composer textarea:focus {
  outline: 2px solid rgba(97, 61, 193, 0.14);
  border-color: #9a82dc;
}

.living-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-left: 58px;
}

.living-media-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #4e5968;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.living-media-button:hover {
  background: #f2f4f6;
}

.living-media-button input {
  display: none;
}

.living-composer-more {
  position: relative;
}

.living-composer-more summary {
  padding: 8px 10px;
  border-radius: 8px;
  color: #626d79;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.living-composer-more summary::-webkit-details-marker {
  display: none;
}

.living-composer-more summary:hover {
  background: #f2f4f6;
}

.living-composer-more-fields {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 40px;
  width: min(380px, 70vw);
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(25, 38, 55, 0.14);
}

.living-composer-more-fields input {
  margin: 0;
}

.living-post-button {
  margin-left: auto;
  min-width: 92px;
}


/* ---------------------------------------------------------
   POSTS
   --------------------------------------------------------- */

.living-post-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.living-post {
  position: relative;
  padding: 17px 18px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 38, 55, 0.035);
}

.living-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 42px;
}

.living-post-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.living-post-header strong {
  display: block;
  color: #1e2a3d;
  font-size: 0.94rem;
}

.living-post-meta {
  margin-top: 2px;
  color: #7a8491;
  font-size: 0.78rem;
}

.living-post-body {
  margin-top: 14px;
  color: #253143;
  font-size: 0.98rem;
  line-height: 1.52;
  white-space: pre-line;
}

.living-post-photo,
.living-post-video img {
  width: 100%;
  max-height: 680px;
  object-fit: contain;
  display: block;
  margin-top: 14px;
  border-radius: 11px;
  background: #f4f5f6;
}

.living-post-video {
  display: block;
  text-decoration: none;
}

.living-video-placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-top: 14px;
  border-radius: 11px;
  background: #edf0f2;
  color: #4f5966;
  font-size: 1.1rem;
  font-weight: 700;
}

.living-media-caption {
  margin-top: 8px;
  color: #636e7b;
  font-size: 0.84rem;
}

.living-post-options {
  position: absolute;
  top: 12px;
  right: 12px;
}

.living-post-options > summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 8px;
  color: #6a7481;
  cursor: pointer;
  list-style: none;
}

.living-post-options > summary::-webkit-details-marker {
  display: none;
}

.living-post-options > summary:hover {
  background: #f1f3f5;
}

.living-post-options-menu {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 8;
  width: 140px;
  padding: 6px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(25, 38, 55, 0.13);
}

.living-post-options-menu form {
  margin: 0;
}

.living-post-options-menu button {
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  background: transparent;
  color: #303b49;
  text-align: left;
  font-size: 0.84rem;
}

.living-post-options-menu button:hover {
  background: #f2f3f5;
}

.living-empty-posts {
  display: grid;
  gap: 5px;
  padding: 28px;
  border: 1px solid #e2e5e9;
  border-radius: 15px;
  background: #fff;
  color: #687380;
  text-align: center;
}

.living-empty-posts strong {
  color: #273345;
}


/* ---------------------------------------------------------
   RIGHT RAIL CARDS
   --------------------------------------------------------- */

.living-rail-card {
  padding: 17px;
  border: 1px solid #e1e5e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 38, 55, 0.03);
}

.living-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.living-card-heading h2 {
  margin: 0;
  color: #19263b;
  font-size: 1.02rem;
}

.living-card-heading a {
  color: #3469b4;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 650;
}

.living-card-heading a:hover {
  text-decoration: underline;
}

.living-bio {
  margin: 0 0 13px;
  color: #4d5866;
  font-size: 0.9rem;
  line-height: 1.45;
}

.living-facts {
  display: grid;
  gap: 9px;
}

.living-fact {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #4f5a68;
  font-size: 0.84rem;
  line-height: 1.35;
}

.living-fact strong {
  color: #263245;
  font-weight: 650;
}

.living-fact-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #687587;
  font-size: 0.9rem;
  font-weight: 800;
}

.living-card-empty {
  margin: 5px 0 0;
  color: #8a929d;
  font-size: 0.82rem;
}


/* ---------------------------------------------------------
   PLACES
   --------------------------------------------------------- */

.living-place-preview {
  display: grid;
  gap: 7px;
}

.living-place-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f6f8fa;
}

.living-place-pin {
  color: #3f75c6;
  font-size: 0.8rem;
}

.living-place-row strong {
  display: block;
  color: #253246;
  font-size: 0.85rem;
}

.living-place-row div span {
  display: block;
  margin-top: 2px;
  color: #818a96;
  font-size: 0.73rem;
}


/* ---------------------------------------------------------
   TIMELINE
   --------------------------------------------------------- */

.living-timeline {
  display: grid;
  gap: 0;
}

.living-timeline-row {
  display: grid;
  grid-template-columns: 50px 12px minmax(0, 1fr);
  gap: 7px;
  min-height: 34px;
  align-items: start;
}

.living-timeline-date {
  padding-top: 1px;
  color: #7a8491;
  font-size: 0.74rem;
}

.living-timeline-dot {
  position: relative;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #4e82d0;
}

.living-timeline-dot::after {
  position: absolute;
  content: "";
  top: 8px;
  left: 3px;
  width: 2px;
  height: 27px;
  background: #d9e2ef;
}

.living-timeline-row:last-child
.living-timeline-dot::after {
  display: none;
}

.living-timeline-text {
  color: #344053;
  font-size: 0.8rem;
  line-height: 1.35;
}

.living-timeline-text span {
  display: block;
  margin-top: 2px;
  color: #858d98;
  font-size: 0.72rem;
}


/* ---------------------------------------------------------
   CONNECTIONS
   --------------------------------------------------------- */

.living-connections {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #edf0f2;
  border-radius: 11px;
}

.living-connection-group {
  min-width: 0;
  padding: 11px 9px;
  border-right: 1px solid #edf0f2;
}

.living-connection-group:last-child {
  border-right: 0;
}

.living-connection-label {
  margin-bottom: 8px;
  color: #313d50;
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

.living-connection-label span {
  color: #8b94a0;
  font-weight: 600;
}

.living-avatar-stack {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.living-avatar-stack a {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -7px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ece8fb;
  color: #5c45a5;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 800;
}

.living-avatar-stack a:first-child {
  margin-left: 0;
}

.living-avatar-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
   MEDIA
   --------------------------------------------------------- */

.living-media-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.living-media-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #eef0f2;
}

.living-media-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
   DATES / GROUPS FUTURE SPACE
   --------------------------------------------------------- */

.living-future-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.living-future-card {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px dashed #d8dde2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
}

.living-future-card strong {
  color: #4f5a68;
  font-size: 0.82rem;
}

.living-future-card span {
  color: #969da6;
  font-size: 0.72rem;
}


/* ---------------------------------------------------------
   OWNER MANAGEMENT
   --------------------------------------------------------- */

.living-manage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.living-manage-links a {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f3f1fb;
  color: #5a429c;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 700;
}

.living-manage-links a:hover {
  background: #eae5fa;
}

.living-manage-links strong {
  margin-left: 3px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {

  .living-cover {
    height: 245px;
  }

  .living-profile-layout {
    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(280px, 0.85fr);
  }

  .living-identity-panel {
    padding-left: 190px;
  }

  .living-profile-photo-wrap {
    left: 24px;
  }

  .living-profile-photo,
  .living-profile-avatar {
    width: 142px;
    height: 142px;
  }

}


@media (max-width: 760px) {

  .living-cover {
    height: 190px;
    border-radius: 14px;
  }

  .living-cover-edit {
    top: 10px;
    right: 10px;
  }

  .living-identity-panel {
    display: block;
    min-height: 0;
    padding:
      76px
      17px
      17px;
  }

  .living-profile-photo-wrap {
    left: 17px;
    top: -64px;
  }

  .living-profile-photo,
  .living-profile-avatar {
    width: 124px;
    height: 124px;
  }

  .living-identity-copy h1 {
    font-size: 2rem;
  }

  .living-identity-actions {
    justify-content: flex-start;
    margin-top: 13px;
  }

  .living-profile-layout {
    display: flex;
    flex-direction: column;
  }

  .living-feed,
  .living-profile-rail {
    width: 100%;
  }

  .living-feed {
    order: 1;
  }

  .living-profile-rail {
    order: 2;
  }

  .living-composer-actions {
    padding-left: 0;
  }

}


@media (max-width: 480px) {

  .living-composer {
    padding: 13px;
  }

  .living-composer-main {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
  }

  .living-composer-avatar {
    width: 38px;
    height: 38px;
  }

  .living-composer-actions {
    flex-wrap: wrap;
  }

  .living-post-button {
    margin-left: 0;
  }

  .living-connections {
    grid-template-columns: 1fr;
  }

  .living-connection-group {
    border-right: 0;
    border-bottom: 1px solid #edf0f2;
  }

  .living-connection-group:last-child {
    border-bottom: 0;
  }

}

/* =========================================================
   LIVING PROFILE MOCKUP ALIGNMENT FIX — 2026-09-22
   ========================================================= */

/*
   Use the full width supplied by the site shell.
   Do not impose a second, narrower living-profile cap.
*/

.living-profile {
  width: 100%;
  max-width: none;
}


/*
   The cover is full width.
   The two-column layout begins immediately beneath it.
*/

.living-profile-hero {
  margin-bottom: 0;
}

.living-profile-layout {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(340px, 0.95fr);

  gap: 18px;
}


/*
   IMPORTANT:
   living-feed is a <main>, so reset the old global
   main element styling here.
*/

main.living-feed {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}


/*
   Identity now belongs to the left column, matching
   the approved mockup.
*/

.living-identity-panel {
  position: relative;

  min-height: 116px;

  margin: 0 0 16px;

  padding:
    18px
    20px
    18px
    214px;

  border:
    1px solid
    #e1e5e9;

  border-top: 0;

  border-radius:
    0 0 14px 14px;

  background: #fff;
}

.living-profile-photo-wrap {
  z-index: 3;

  left: 28px;
  top: -78px;
}


/*
   Tighten composer to the proportions in the mockup.
*/

.living-composer {
  margin-bottom: 14px;

  padding:
    12px
    14px
    10px;

  border-radius: 13px;
}

.living-composer-main {
  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 10px;
}

.living-composer-avatar {
  width: 42px;
  height: 42px;
}

.living-composer textarea {
  min-height: 50px;

  padding:
    12px
    14px;
}

.living-composer-actions {
  margin-top: 8px;
  padding-left: 52px;
}

.living-media-button,
.living-composer-more summary {
  padding:
    6px
    9px;
}


/*
   IMPORTANT:
   living-post-header is a <header>, so reset the
   old sitewide header element styling.
*/

header.living-post-header {
  position: static;
  top: auto;
  z-index: auto;

  display: flex;

  justify-content: flex-start;
  align-items: center;

  gap: 10px;

  margin: 0;
  padding: 0;

  background: transparent;

  border: 0;
  border-bottom: 0;
}


/*
   Lighter, tighter post cards.
*/

.living-post {
  padding:
    14px
    16px;

  border-radius: 13px;
}

.living-post-avatar {
  width: 38px;
  height: 38px;
}

.living-post-body {
  margin-top: 11px;

  line-height: 1.45;
}

.living-post-photo,
.living-post-video img {
  margin-top: 11px;
}


/*
   Right rail starts flush with the left identity panel.
*/

.living-profile-rail {
  margin: 0;
  padding: 0;
}


/*
   Slightly lighter cards, closer to the mockup.
*/

.living-rail-card {
  padding: 15px 16px;

  border-radius: 13px;
}

.living-card-heading {
  margin-bottom: 10px;
}


/* Responsive */

@media (max-width: 980px) {

  .living-profile-layout {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(280px, 0.9fr);
  }

}


@media (max-width: 760px) {

  .living-profile-layout {
    display: flex;
    flex-direction: column;
  }

  .living-identity-panel {
    min-height: 0;

    padding:
      76px
      17px
      17px;

    border-top:
      1px solid
      #e1e5e9;

    border-radius: 14px;
  }

  .living-composer-actions {
    padding-left: 0;
  }

}

/* =========================================================
   LIVING PROFILE — MAP / FACTS / CONNECTION REFINEMENT
   ========================================================= */

.living-fact {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 31px;
  font-size: 0.87rem;
}

svg.living-fact-icon {
  width: 24px;
  height: 24px;
  padding: 2px;
  overflow: visible;
  fill: none;
  stroke: #486a95;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.living-profile-map {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  background: #edf1f4;
}

.living-profile-map
.maplibregl-canvas {
  cursor: default;
}

.living-profile-map-marker {
  width: 18px;
  height: 18px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: #3573c9;
  box-shadow:
    0 1px 5px
    rgba(20, 40, 70, 0.35);
  cursor: pointer;
}

.living-profile-map-popup {
  display: grid;
  gap: 3px;
  min-width: 110px;
}

.living-profile-map-popup strong {
  color: #1d2b40;
  font-size: 0.82rem;
}

.living-profile-map-popup span {
  color: #718092;
  font-size: 0.72rem;
  text-transform: capitalize;
}

a.living-connection-link {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #304056;
  text-decoration: none;
}

a.living-connection-link:hover {
  color: #2f66ad;
  text-decoration: underline;
}

.living-connection-label {
  min-height: 20px;
}

/* =========================================================
   LIVING PROFILE HEADER + FACTS REFINEMENT — 2026-09-22
   ========================================================= */

/*
   Header is one continuous full-width identity area.
   The two-column content begins below it.
*/

.living-profile-hero {
  margin-bottom: 16px;
}

.living-identity-panel {
  width: 100%;

  margin: 0;

  padding:
    18px
    22px
    18px
    214px;

  border:
    1px solid
    #e1e5e9;

  border-top: 0;

  border-radius:
    0 0 14px 14px;

  background: #fff;
}


/*
   Composer and right rail now begin at the same level
   beneath the completed full-width header.
*/

.living-profile-layout {
  align-items: start;
}

main.living-feed,
.living-profile-rail {
  margin-top: 0;
}


/*
   Quick Facts should be compact.
   Keep the stronger icons, reduce dead vertical space.
*/

.living-facts {
  gap: 3px;
}

.living-fact {
  min-height: 27px;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  gap: 8px;

  line-height: 1.2;
}

svg.living-fact-icon {
  width: 23px;
  height: 23px;
}


/*
   About Me is narrative content, not a Quick Fact.
*/

.living-about-card .living-bio {
  margin: 0;

  color: #4d5866;

  font-size: 0.9rem;
  line-height: 1.45;
}


@media (max-width: 760px) {

  .living-identity-panel {
    padding:
      76px
      17px
      17px;

    border-top:
      1px solid
      #e1e5e9;

    border-radius: 14px;
  }

}

/* =========================================================
   LIVING PROFILE EDITOR
   Uses the established ancestor editing workspace language
   without changing ancestor-specific components.
   ========================================================= */

.living-edit-workspace {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.living-profile-edit-form {
  margin: 0;
}

.living-edit-field-note {
  margin-top: -8px;
}

.living-edit-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.living-edit-management-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid #e2e4e8;
  border-radius: 14px;
  background: #fff;
}

.living-edit-management-card h3 {
  margin: 0 0 7px;
}

.living-edit-management-card p {
  margin: 0;
  color: #68717c;
  line-height: 1.5;
}

.living-edit-management-card a {
  align-self: flex-start;
  font-weight: 700;
}

.living-edit-save-section {
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (max-width: 760px) {
  .living-edit-management-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MODERN LIVING PROFILE EDITOR
   ========================================================= */

.living-editor {
  max-width: 1420px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.living-editor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.living-editor-heading h1 {
  margin: 3px 0 5px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.living-editor-heading > div > p:last-child {
  margin: 0;
  color: #68717c;
  font-size: 16px;
}

.living-editor-eyebrow {
  margin: 0;
  color: #60738d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.living-editor-layout {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 255px;
  gap: 22px;
  align-items: start;
}

.living-editor-sidebar {
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #182a42 0%,
      #132238 100%
    );
  box-shadow:
    0 16px 36px rgba(20, 34, 55, .14);
  color: #fff;
}

.living-editor-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 18px;
  border-bottom:
    1px solid rgba(255, 255, 255, .1);
}

.living-editor-person img,
.living-editor-person-placeholder {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
}

.living-editor-person img {
  object-fit: cover;
}

.living-editor-person-placeholder {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  font-size: 20px;
  font-weight: 800;
}

.living-editor-person strong,
.living-editor-person span {
  display: block;
}

.living-editor-person strong {
  font-size: 14px;
}

.living-editor-person span {
  margin-top: 2px;
  color: rgba(255, 255, 255, .63);
  font-size: 12px;
}

.living-editor-nav {
  padding: 10px 8px 14px;
}

.living-editor-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.living-editor-nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.living-editor-nav-item.is-active {
  background: #2775d8;
  color: #fff;
  box-shadow:
    0 6px 16px rgba(15, 87, 180, .25);
}

.living-editor-nav-icon {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  opacity: .92;
}

.living-editor-nav-divider {
  height: 1px;
  margin: 10px 8px;
  background: rgba(255, 255, 255, .1);
}

.living-editor-main {
  min-width: 0;
}

.living-editor-panel {
  min-width: 0;
}

.living-editor-panel[hidden] {
  display: none !important;
}

.living-editor-panel-heading {
  margin-bottom: 17px;
}

.living-editor-panel-heading h2 {
  margin: 4px 0 5px;
  color: #17253a;
  font-size: 27px;
  line-height: 1.15;
}

.living-editor-panel-heading > p:last-child {
  max-width: 650px;
  margin: 0;
  color: #6d7785;
  line-height: 1.55;
}

.living-editor-main
.ancestor-edit-inline-section {
  margin: 0 0 16px;
  padding: 22px;
  border: 1px solid #e4e8ee;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 5px 18px rgba(28, 45, 70, .045);
}

.living-editor-main
.ancestor-edit-inline-heading {
  margin-bottom: 18px;
}

.living-editor-main
.ancestor-edit-inline-heading h2 {
  font-size: 18px;
}

.living-editor-coming-soon {
  padding: 28px;
  border: 1px solid #e4e8ee;
  border-radius: 16px;
  background: #fff;
  color: #5e6977;
}

.living-editor-coming-soon strong {
  display: block;
  margin-bottom: 6px;
  color: #24354c;
}

.living-editor-coming-soon p {
  margin: 0;
  line-height: 1.55;
}

.living-editor-rail {
  display: grid;
  gap: 14px;
}

.living-editor-rail-card {
  display: flex;
  gap: 13px;
  padding: 18px;
  border: 1px solid #e3e8ef;
  border-radius: 15px;
  background: #fff;
  box-shadow:
    0 5px 18px rgba(28, 45, 70, .04);
}

.living-editor-rail-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf3ff;
  color: #226ac3;
  font-weight: 900;
}

.living-editor-rail-card h3 {
  margin: 1px 0 5px;
  color: #26374d;
  font-size: 14px;
}

.living-editor-rail-card p {
  margin: 0;
  color: #687584;
  font-size: 12px;
  line-height: 1.5;
}

.living-editor-rail-note {
  display: block;
  margin-top: 9px;
  color: #3475c4;
  font-size: 12px;
  font-weight: 700;
}

.living-editor-profile-form-host {
  margin: 0;
}

.living-editor-profile-form-host >
.ancestor-edit-section-grid {
  display: none;
}

.living-editor-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding: 16px 0 0;
  border-top: 1px solid #e6e9ee;
}

.living-editor-source {
  display: none !important;
}

@media (max-width: 1180px) {
  .living-editor-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .living-editor-rail {
    grid-column: 2;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .living-editor {
    padding: 18px 14px 44px;
  }

  .living-editor-heading {
    align-items: flex-start;
  }

  .living-editor-layout {
    grid-template-columns: 1fr;
  }

  .living-editor-sidebar {
    border-radius: 14px;
  }

  .living-editor-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 9px;
  }

  .living-editor-nav-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .living-editor-nav-divider {
    width: 1px;
    height: auto;
    margin: 4px;
  }

  .living-editor-rail {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LIVING EDITOR — APPROVED MOCKUP DESIGN PASS
   Existing SocialArt sitewide header remains untouched.
   ========================================================= */

body:has(.living-editor) {
  background: #f4f7fb;
}

.living-edit-workspace {
  max-width: none;
  margin: 0;
  padding: 0;
}

.living-editor {
  width: 100%;
  max-width: none;
  margin: 0;
}

.living-editor-heading {
  margin: 0 0 0 260px;
  padding: 26px 34px 8px;
  background: #f4f7fb;
}

.living-editor-heading h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2vw, 2.15rem);
  line-height: 1.15;
  color: #17243b;
}

.living-editor-heading p {
  max-width: 720px;
  margin: 8px 0 0;
  color: #66748a;
}

.living-editor-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  align-items: start;
  gap: 30px;
  width: 100%;
  min-height: calc(100vh - 72px);
}

.living-editor-sidebar {
  align-self: stretch;
  min-height: calc(100vh - 72px);
  margin: 0;
  padding: 30px 18px 40px;
  border: 0;
  border-radius: 0;
  background: #142b4f;
  box-shadow: none;
  color: #fff;
}

.living-editor-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px 26px;
  text-align: center;
}

.living-editor-person img,
.living-editor-person-photo {
  width: 84px;
  height: 84px;
  margin-bottom: 12px;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.14);
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

.living-editor-person strong {
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.25;
}

.living-editor-person span {
  margin-top: 4px;
  color: #aebed6;
  font-size: .82rem;
}

.living-editor-nav {
  display: grid;
  gap: 6px;
}

.living-editor-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 9px;
  color: #d9e4f3;
  font-size: .91rem;
  font-weight: 650;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.living-editor-nav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.living-editor-nav a.is-active,
.living-editor-nav a[aria-current="page"] {
  background: #2879df;
  color: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.16);
}

.living-editor-main,
.living-profile-edit-form {
  min-width: 0;
}

.living-profile-edit-form {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.living-editor-main {
  padding: 0 0 42px;
}

.living-editor-panel {
  min-width: 0;
}

.living-editor-panel > h2,
.living-editor-standalone-panel > h2 {
  margin: 0 0 18px;
  color: #17243b;
  font-size: 1.45rem;
  line-height: 1.2;
}

.living-editor-panel > p,
.living-editor-standalone-panel > p {
  color: #6c788a;
}

.living-editor-main section,
.living-editor-standalone-panel {
  margin: 0 0 18px;
  padding: 24px 26px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(28, 45, 72, .055);
}

.living-editor-main section h2,
.living-editor-main section h3,
.living-editor-standalone-panel h2,
.living-editor-standalone-panel h3 {
  color: #1a2a43;
}

.living-editor-main label,
.living-editor-standalone-panel label {
  color: #35445a;
  font-weight: 650;
}

.living-editor-main input[type="text"],
.living-editor-main input[type="date"],
.living-editor-main input[type="url"],
.living-editor-main input[type="email"],
.living-editor-main select,
.living-editor-main textarea,
.living-editor-standalone-panel input[type="text"],
.living-editor-standalone-panel input[type="date"],
.living-editor-standalone-panel input[type="url"],
.living-editor-standalone-panel select,
.living-editor-standalone-panel textarea {
  border: 1px solid #ccd6e3;
  border-radius: 9px;
  background: #fff;
}

.living-editor-main input:focus,
.living-editor-main select:focus,
.living-editor-main textarea:focus,
.living-editor-standalone-panel input:focus,
.living-editor-standalone-panel select:focus,
.living-editor-standalone-panel textarea:focus {
  border-color: #4b8ee8;
  outline: 3px solid rgba(75,142,232,.12);
}

.living-editor-action-bar {
  position: sticky;
  bottom: 16px;
  z-index: 12;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 26px rgba(28,45,72,.11);
  backdrop-filter: blur(8px);
}

.living-editor-rail {
  display: grid;
  gap: 18px;
  padding: 0 28px 40px 0;
}

.living-editor-rail-card {
  padding: 21px 20px;
  border: 1px solid #e7dfce;
  border-radius: 14px;
  background: #fffaf0;
  box-shadow: 0 5px 16px rgba(43,55,75,.045);
}

.living-editor-rail-card h3 {
  margin: 0 0 9px;
  color: #26364d;
  font-size: 1rem;
}

.living-editor-rail-card p {
  margin: 0;
  color: #667185;
  font-size: .89rem;
  line-height: 1.55;
}

.living-editor-standalone-panel {
  grid-column: 2;
  min-width: 0;
  margin: 0 0 42px;
}

.living-editor-legacy-hidden,
[data-living-editor-obsolete] {
  display: none !important;
}

@media (max-width: 1120px) {
  .living-editor-layout {
    grid-template-columns: 225px minmax(0, 1fr);
    gap: 22px;
  }

  .living-editor-heading {
    margin-left: 225px;
  }

  .living-editor-rail {
    grid-column: 2;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 22px 32px 0;
  }

  .living-editor-standalone-panel {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .living-editor-heading {
    margin-left: 0;
    padding: 20px 18px 10px;
  }

  .living-editor-layout {
    display: block;
    min-height: 0;
  }

  .living-editor-sidebar {
    min-height: 0;
    padding: 18px;
  }

  .living-editor-person {
    padding-bottom: 16px;
  }

  .living-editor-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .living-editor-nav a {
    min-height: 40px;
  }

  .living-profile-edit-form,
  .living-editor-standalone-panel {
    margin: 20px 16px;
  }

  .living-editor-main section,
  .living-editor-standalone-panel {
    padding: 20px 18px;
  }

  .living-editor-rail {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 16px 28px;
  }
}


/* =========================================================
   LIVING EDITOR — FULL WIDTH WORKSPACE PASS
   Right rail removed; editing workspace gets the width.
   ========================================================= */

body:has(.living-editor) .living-editor-heading {
  display: none !important;
}

body:has(.living-editor) .living-editor-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
}

body:has(.living-editor) .living-editor-rail {
  display: none !important;
}

body:has(.living-editor) .living-profile-edit-form,
body:has(.living-editor) .living-editor-standalone-panel {
  grid-column: 2;
  width: auto;
  min-width: 0;
  margin-right: 34px;
}

body:has(.living-editor) .living-editor-main {
  width: 100%;
  max-width: none;
}

/* Never sacrifice the legibility of partial dates to fit one row. */
body:has(.living-editor) .partial-date-row,
body:has(.living-editor) .life-event-date-row,
body:has(.living-editor) .unified-date-row,
body:has(.living-editor) .date-parts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

body:has(.living-editor) input[name$="_year"],
body:has(.living-editor) input[name*="_year"] {
  box-sizing: border-box;
  width: 92px !important;
  min-width: 92px !important;
}

body:has(.living-editor) select[name$="_month"],
body:has(.living-editor) select[name*="_month"] {
  box-sizing: border-box;
  width: 122px !important;
  min-width: 122px !important;
}

body:has(.living-editor) input[name$="_day"],
body:has(.living-editor) input[name*="_day"] {
  box-sizing: border-box;
  width: 72px !important;
  min-width: 72px !important;
}

@media (max-width: 760px) {
  body:has(.living-editor) .living-editor-layout {
    display: block;
  }

  body:has(.living-editor) .living-profile-edit-form,
  body:has(.living-editor) .living-editor-standalone-panel {
    margin: 20px 16px;
  }
}

/* =========================================================
   LIVING LIFE EVENTS — STACK START AND END DATES
   ========================================================= */

body:has(.living-editor) .unified-event-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

body:has(.living-editor) .unified-event-date-grid > div {
  min-width: 0;
}

body:has(.living-editor) .unified-event-date-grid > div > strong {
  display: block;
  margin-bottom: 7px;
}

body:has(.living-editor) .unified-event-date-grid > div:first-child > strong::after {
  content: " date";
}

body:has(.living-editor) .unified-event-date-grid > div:nth-child(2) > strong::after {
  content: " date (optional)";
}

body:has(.living-editor) .ancestor-event-date-fields {
  display: grid;
  grid-template-columns: 110px 160px 90px;
  gap: 12px;
  align-items: end;
  justify-content: start;
}

body:has(.living-editor) .ancestor-event-date-fields label {
  min-width: 0;
}

body:has(.living-editor) .ancestor-event-date-fields input,
body:has(.living-editor) .ancestor-event-date-fields select {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 620px) {
  body:has(.living-editor) .ancestor-event-date-fields {
    grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.35fr) minmax(70px, .8fr);
  }
}

/* =========================================================
   LIVING LIFE EVENTS — RESPONSIVE COLUMN STACKING
   Keep the editor usable before date controls become cramped.
   ========================================================= */

@media (max-width: 1180px) {
  body:has(.living-editor) .unified-life-event-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px;
  }

  body:has(.living-editor) .unified-life-event-form-wrap,
  body:has(.living-editor) .unified-life-event-list-wrap {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  body:has(.living-editor) .ancestor-event-date-fields {
    grid-template-columns: minmax(85px, 1fr) minmax(120px, 1.4fr);
  }

  body:has(.living-editor) .ancestor-event-date-fields label:last-child {
    grid-column: 1;
  }
}


/* Living editor Place map preview */
body:has(.living-editor) .place-geocode-map {
  width: 100%;
  height: 300px;
  margin-top: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #eef2f6;
}

body:has(.living-editor) .place-geocode-map:empty::before {
  content: "Choose a map search result to preview the Place.";
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  color: #64748b;
  font-size: 0.92rem;
}

body:has(.living-editor) .place-geocode-map .maplibregl-canvas {
  outline: none;
}


/* Living editor: feature and coming-soon panels */
.living-editor-shell .living-editor-feature-panel {
  width: 100%;
}

.living-editor-shell .living-editor-coming-soon {
  min-height: 360px;
  padding: 64px 40px;
  border: 1px solid rgba(21, 52, 87, 0.12);
  border-radius: 18px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.living-editor-shell .living-editor-coming-soon-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(25, 82, 132, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
}

.living-editor-shell .living-editor-coming-soon h2 {
  margin: 3px 0 10px;
}

.living-editor-shell .living-editor-coming-soon p:last-child {
  max-width: 520px;
  margin: 0;
}

.living-editor-shell .living-editor-section-header {
  margin-bottom: 22px;
}

.living-editor-shell .living-editor-section-header h2 {
  margin: 3px 0 8px;
}

.living-editor-shell .living-editor-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.living-editor-shell .living-editor-photo-note {
  padding: 20px 22px;
  border: 1px solid rgba(21, 52, 87, 0.12);
  border-radius: 14px;
  background: rgba(25, 82, 132, 0.04);
}

.living-editor-shell .living-editor-photo-note p {
  margin: 6px 0 0;
}

@media (max-width: 680px) {
  .living-editor-shell .living-editor-coming-soon {
    min-height: 280px;
    padding: 42px 22px;
  }

  .living-editor-shell .living-editor-photo-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* Living editor: inline Photos management */

.living-editor-photo-manager {
  display: grid;
  gap: 26px;
}

.living-editor-photo-upload {
  padding: 22px;
  border: 1px solid rgba(21, 52, 87, 0.12);
  border-radius: 16px;
  background: rgba(25, 82, 132, 0.035);
}

.living-editor-photo-upload-copy h3,
.living-editor-photo-library-heading h3 {
  margin: 0 0 5px;
}

.living-editor-photo-upload-copy p,
.living-editor-photo-library-heading p {
  margin: 0;
}

.living-editor-photo-upload-fields {
  display: grid;
  grid-template-columns:
    minmax(210px, 1fr)
    minmax(250px, 1.3fr)
    auto;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.living-editor-photo-upload-fields label {
  display: grid;
  gap: 7px;
}

.living-editor-photo-upload-fields label > span {
  font-weight: 700;
}

.living-editor-photo-library {
  display: grid;
  gap: 15px;
}

.living-editor-photo-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.living-editor-photo-card {
  overflow: hidden;
  border: 1px solid rgba(21, 52, 87, 0.12);
  border-radius: 14px;
  background: #fff;
}

.living-editor-photo-image-wrap {
  aspect-ratio: 1 / 1;
  background: rgba(21, 52, 87, 0.05);
}

.living-editor-photo-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.living-editor-photo-card-body {
  padding: 11px 13px 13px;
}

.living-editor-photo-card-body p {
  margin: 0 0 9px;
}

.living-editor-photo-remove {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #a32626;
  font-weight: 700;
}

.living-editor-photo-remove:hover {
  background: transparent;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .living-editor-photo-upload-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .living-editor-photo-upload-fields {
    grid-template-columns: 1fr;
  }

  .living-editor-photo-upload-fields button {
    width: 100%;
  }
}


/* Living editor: photo preview and actions */

.living-editor-photo-preview {
  margin-top: 18px;
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid rgba(21, 52, 87, 0.12);
  border-radius: 14px;
  background: rgba(21, 52, 87, 0.04);
}

.living-editor-photo-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.living-editor-photo-card-body {
  position: relative;
}

.living-editor-photo-menu {
  position: absolute;
  right: 9px;
  bottom: 8px;
}

.living-editor-photo-menu-trigger {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 20px;
  box-shadow: none;
}

.living-editor-photo-menu-trigger:hover {
  background: rgba(21, 52, 87, 0.07);
}

.living-editor-photo-menu-popover {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 32px;
  width: 145px;
  padding: 6px;
  border: 1px solid rgba(21, 52, 87, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 52, 87, 0.16);
}

.living-editor-photo-menu-popover button {
  display: block;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.living-editor-photo-menu-popover button:hover {
  background: rgba(21, 52, 87, 0.06);
}

.living-editor-photo-menu-popover button.is-danger {
  color: #a32626;
}

.living-editor-photo-card-body p {
  padding-right: 36px;
}


/* Living editor: View Profile link */

.living-editor-person-copy {
  display: grid;
}

.living-editor-view-profile {
  width: max-content;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.living-editor-view-profile:hover {
  color: #fff;
  text-decoration: underline;
}

/* =========================================================
   INLINE PROFILE VIDEO PLAYBACK
   ========================================================= */

.living-post-video {
  width: 100%;
  max-height: 680px;
  object-fit: contain;
  display: block;
  margin-top: 11px;
  border-radius: 11px;
  background: #f4f5f6;
}

.video-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* Rootd.Life site wordmark */
.site-header-brand {
  display: flex;
  align-items: center;
}

.site-header-logo {
  display: block;
  width: auto;
  height: 68px;
  max-width: 260px;
  object-fit: contain;
}