/* static/css/person.css */
/* Person page styles (scoped) */

/* Local tokens for this page */
.person-page{
  --max: var(--wrap);
  --card-max: 780px;
  /* link color knobs */
  --when-link: color-mix(in srgb, var(--career-color, #465E6B) 85%, black);
  --when-link-hover: var(--career-color, #465E6B);
  --src-link-color: #2a2f36;          /* elegant dark ink */
  --src-link-hover: #111;             /* deeper on hover */
}

/* Base bits that were inline before (no global font-family here) */
.person-page *{ box-sizing: border-box; }
.person-page a{ color:#0b57d0; text-decoration:none; }
.person-page a:hover{ text-decoration:underline; }
.person-page .muted{ color: var(--muted); }

.person-page .wrap{ max-width: var(--max); margin: 0 auto; padding: 16px; }

/* Profile card */
.person-page .profile{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  width:100%; max-width:var(--card-max);
  border:1px solid var(--line); border-radius:14px;
  background:#fff; padding:16px; margin:6px 0 16px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.person-page .avatar-wrap{ width:96px; height:96px; border-radius:14px; overflow:hidden; border:1px solid var(--office-color, var(--line)); background:#f6f7f9; }
.person-page .avatar{ width:100%; height:100%; object-fit:cover; display:block; }

.person-page .id{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.person-page .name{ font-weight:800; margin:0; line-height:1.2; display:flex; align-items:center; gap:6px; }
.person-page .bio{ margin:0; color:#374151; }

/* Compare layout: 2–3 columns */
.compare-page .compare-grid{
  display:grid;
  row-gap:10px;
  column-gap:12px; /* match career row column gap */
}
.compare-page .compare-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.compare-page .term-card--placeholder{
  opacity:0;
  min-height:48px;
  pointer-events:none;
}

/* Sticky profile row on compare page */
.compare-page .compare-grid--profile{
  position: sticky;
  top: var(--topbar-offset, 64px);
  z-index: 20;
  background: var(--bg);
  padding: 0;
}

/* Let profile outer section act as a block; use inner grid for columns */
.compare-page .compare-grid--profile{
  display:block;
}
/* Subtle old-paper background behind each profile column */
.compare-page .compare-grid--profile .compare-col{
  background: #fff;
  border-radius: 12px;
  padding: 2px 8px 4px;
  border: 1px solid var(--line);
  transition: transform .06s, box-shadow .12s, border-color .12s;
}
.compare-page .compare-grid--profile .compare-col:first-child{
  margin-top:0; /* avoid extra top spacing on first column */
}
.compare-page .compare-grid--profile .psection{
  margin:0;
}
.compare-page .compare-grid--profile .compare-col:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color: #cbd5e1;
}
.compare-page .profile-card.profile-header .avatar-figure{
  margin:0; /* eliminate extra whitespace above avatar */
}

/* Compare: shrink avatar a bit */
.compare-page .avatar-figure .avatar-wrap{
  width:18px;  /* ~30% of original 60px compare size */
  /* keep ratio from base rules */
}

/* Bench positioning (usable across pages) */
.year-bench,
.person-page .year-bench,
.compare-page .year-bench{
  position: fixed;
  top: calc(var(--topbar-offset, 64px) + 16px);
  left: calc(50% + (min(1200px, 100vw) / 2) + 16px);
  width: min(260px, calc((100vw - min(1200px, 100vw)) / 2 - 24px));
  max-width: 260px;
  z-index: 40;
}
.year-bench[hidden],
.person-page .year-bench[hidden],
.compare-page .year-bench[hidden]{ display:none; }
@media (max-width:900px){
  .year-bench,
  .person-page .year-bench,
  .compare-page .year-bench{
    display:none !important;
  }
}

/* Bench internals (match years page) */
.year-bench__box,
.person-page .year-bench__box,
.compare-page .year-bench__box{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  padding:10px 12px;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  row-gap:6px;
  column-gap:8px;
  font-size: var(--fs-small);
}

.year-bench__heading,
.person-page .year-bench__heading,
.compare-page .year-bench__heading{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:2px;
}
.year-bench__title,
.person-page .year-bench__title,
.compare-page .year-bench__title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.year-bench__heading-actions,
.person-page .year-bench__heading-actions,
.compare-page .year-bench__heading-actions{
  display:flex;
  align-items:center;
}
.year-bench__hide,
.person-page .year-bench__hide,
.compare-page .year-bench__hide{
  border:0;
  background:transparent;
  padding:2px 6px;
  margin:0;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  border-radius:999px;
  cursor:pointer;
  transition: color .15s ease, background-color .15s ease;
}
.year-bench__hide:hover,
.year-bench__hide:focus-visible,
.person-page .year-bench__hide:hover,
.person-page .year-bench__hide:focus-visible,
.compare-page .year-bench__hide:hover,
.compare-page .year-bench__hide:focus-visible{
  outline:none;
  color:var(--ink);
  background:color-mix(in srgb, var(--color, #9ca3af) 8%, #f3f4f6);
}

.year-bench__name,
.person-page .year-bench__name,
.compare-page .year-bench__name{
  min-width:0;
  font-size:13px;
  line-height:1.3;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:center;
}
.year-bench__name--empty,
.person-page .year-bench__name--empty,
.compare-page .year-bench__name--empty{
  color:var(--muted);
  font-style:italic;
}

.year-bench__label,
.person-page .year-bench__label,
.compare-page .year-bench__label{
  display:inline;
}

.year-bench__inspect,
.year-bench__remove,
.person-page .year-bench__inspect,
.person-page .year-bench__remove,
.compare-page .year-bench__inspect,
.compare-page .year-bench__remove{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.year-bench__inspect svg,
.compare-page .year-bench__inspect svg{
  width:16px;
  height:16px;
}
.year-bench__inspect:hover,
.year-bench__inspect:focus-visible,
.compare-page .year-bench__inspect:hover,
.compare-page .year-bench__inspect:focus-visible{
  outline:none;
  color:var(--ink);
  background:color-mix(in srgb, var(--color, #9ca3af) 10%, #f3f4f6);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color, #9ca3af) 35%, var(--line));
  transform: translateY(-0.5px);
}
.year-bench__remove span,
.person-page .year-bench__remove span,
.compare-page .year-bench__remove span{
  font-size:16px;
  line-height:1;
}
.year-bench__remove:hover:not(:disabled),
.year-bench__remove:focus-visible:not(:disabled),
.person-page .year-bench__remove:hover:not(:disabled),
.person-page .year-bench__remove:focus-visible:not(:disabled),
.compare-page .year-bench__remove:hover:not(:disabled),
.compare-page .year-bench__remove:focus-visible:not(:disabled){
  outline:none;
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 5%, #fef2f2);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent);
  transform: translateY(-0.5px);
}
.year-bench__remove:disabled,
.person-page .year-bench__remove:disabled,
.compare-page .year-bench__remove:disabled{
  opacity:.3;
  cursor:default;
}

.year-bench.year-bench--highlight .year-bench__box,
.person-page .year-bench.year-bench--highlight .year-bench__box,
.compare-page .year-bench.year-bench--highlight .year-bench__box{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent), 0 16px 40px rgba(0,0,0,.18);
}

.year-bench__compare,
.person-page .year-bench__compare,
.compare-page .year-bench__compare{
  grid-column: 1 / -1;
  margin-top:4px;
  display:flex;
  justify-content:flex-end;
}
.year-bench__compare-btn,
.person-page .year-bench__compare-btn,
.compare-page .year-bench__compare-btn{
  width:100%;
}

.year-bench__message,
.person-page .year-bench__message,
.compare-page .year-bench__message{
  margin-top:6px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.3;
  color:#92400e;
  background:#fffbeb;
  border-radius:10px;
  border:1px solid color-mix(in srgb,#fbbf24 45%, white);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  opacity:0;
  transform:translateY(2px);
  transition:opacity .25s ease, transform .25s ease;
}
.year-bench__message.is-visible,
.person-page .year-bench__message.is-visible,
.compare-page .year-bench__message.is-visible{
  opacity:1;
  transform:translateY(0);
}

.year-bench__search-input,
.compare-page .year-bench__search-input{
  width:100%;
}

.year-bench__suggest,
.person-page .year-bench__suggest,
.compare-page .year-bench__suggest{
  grid-column: 1 / -1;
  margin-top:6px;
}
.year-bench__suggest-panel,
.person-page .year-bench__suggest-panel,
.compare-page .year-bench__suggest-panel{
  border-radius:10px;
  overflow:hidden;
}
.year-bench__suggest-panel .year-bench__suggest-item,
.person-page .year-bench__suggest-panel .year-bench__suggest-item,
.compare-page .year-bench__suggest-panel .year-bench__suggest-item{
  border:0;
  background:transparent;
  width:100%;
  text-align:left;
  padding:6px 8px; /* compact */
  font-size: var(--fs-small);
}
.year-bench__suggest-panel .year-bench__suggest-item span,
.person-page .year-bench__suggest-panel .year-bench__suggest-item span,
.compare-page .year-bench__suggest-panel .year-bench__suggest-item span{
  pointer-events:none;
}
.year-bench__suggest-panel .year-bench__suggest-item:hover,
.year-bench__suggest-panel .year-bench__suggest-item:focus-visible,
.person-page .year-bench__suggest-panel .year-bench__suggest-item:hover,
.person-page .year-bench__suggest-panel .year-bench__suggest-item:focus-visible,
.compare-page .year-bench__suggest-panel .year-bench__suggest-item:hover,
.compare-page .year-bench__suggest-panel .year-bench__suggest-item:focus-visible{
  background:#f3f4f6;
}

/* chips (metadata) */
.person-page .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.person-page .chip{ display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; color:#374151; background:var(--chip); }

/* Headings */
.person-page h2{ margin:18px 0 8px; }

/* Card rows shared look (Family + Career) */
.person-page ol.career{ list-style:none; padding:0; margin:0; max-width:var(--card-max); }
.person-page .row{
  display:flex; gap:12px; align-items:flex-start;   /* top-align columns */
  padding:10px 12px;
  border-radius:10px; margin:12px 0;
}
/* keep page-specific hover border color, use global for transform/shadow */
.person-page .row:hover{ border-color:#d7dbe3; }
/* slightly tighter gap between when/what in career rows */
.person-page .career .row{
  gap:0px;
}

.person-page .when{ width:94px; flex:none; color:#555; font-weight:600; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
.person-page .what{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; }

/* Elegant year links inside the when column */
.person-page .when a{
  color: var(--when-link);
  text-decoration: none;
}
.person-page .when a:hover{
  color: var(--when-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Top-line alignment fix (make first line boxes identical) */
.person-page .career .when a,
.person-page .career .term-head{
  display:block;     /* same line box type */
  line-height:1.2;   /* same leading */
  margin-top:0;
  padding-top:0;
}

/* keep age note tucked under the year */
.person-page .when .age-note{ color: var(--muted); margin-top: 0.1em; }

/* certainty badges */
.person-page .badge{ margin-left:8px; }

/* reviewed tick */
/* uses global .reviewed and .reviewed-icon sizes; keep page spacing tweaks below */

/* Family */
.person-page .family{ max-width:var(--card-max); margin:10px 0 24px; }
.person-page .fam-inline{ display:flex; flex-wrap:wrap; gap:8px; }
/* family links now use global .chip */
.person-page .family .pcard__bench-add{
  border:0;
  background:transparent;
  padding:0;
  margin-left:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.person-page .family .pcard__bench-add span[aria-hidden="true"]{
  font-size:14px;
  line-height:1;
}
.person-page .family .pcard__bench-add:hover,
.person-page .family .pcard__bench-add:focus-visible,
.person-page .family .pcard__bench-add.is-active{
  outline:none;
  color:var(--ink);
  background:color-mix(in srgb, var(--family-color, #9ca3af) 10%, #f3f4f6);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--family-color, #9ca3af) 35%, var(--line));
  transform:translateY(-0.5px);
}

/* Compare page: tighter family block spacing, rely on .row margins */
.compare-page .compare-family{
  margin:12px 0;
}
.compare-page .family{
  margin:0;
}
/* Compare page: ensure family when/what columns align like career rows */
.compare-page .compare-family .row{
  display:flex;
  align-items:flex-start;
  gap:0;
}
.compare-page .compare-family .row .when{
  width:94px;
  flex:none;
}
.compare-page .compare-family .row .what{
  flex:1;
}

/* Career text sizes */
.person-page .career .term-head{ font-weight:600; margin-bottom:.25rem; }
.person-page .career .term-head .sep{ margin:0 .35rem; color:#aaa; }
.person-page .career .term-head .term-role,
.person-page .career .term-head .term-co-consuls{
  font-weight: inherit;
  font-size: inherit;
}
.person-page .career .term-head .term-co-consuls a{
  font-family: inherit;
  font-size: inherit;
  color: var(--when-link);
  text-decoration: none;
}
.person-page .career .term-head .term-co-consuls a:hover{
  color: var(--when-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.person-page .career .term-summary{ margin:.25rem 0 .35rem; color:#333; line-height:1.45; }
.person-page .term-sources summary{ cursor:pointer; font-weight:600; color:#444; }
.person-page .term-sources[open] summary{ margin-bottom:.25rem; }
.person-page .term-sources .sources-list{ margin:.25rem 0 0 1rem; color:#555; line-height:1.4; }
/* Office-overlap details (person page): indent like sources */
.person-page .term-overlap .term-summary{
  margin-left: 1rem;
}

.person-page .term-overlap__name--related{
  color: #b91c1c; /* blood red for related overlaps */
}

/* Unified link styling inside term-sources (sources + overlap) on person page */
.person-page .term-sources a{
  font-family: "EB Garamond", serif;
  font-weight: 600;
  letter-spacing: .01em;
  color: #2a2f36;
  text-decoration: none;
}
.person-page .term-sources a:hover{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.person-page .term-overlap a{
  font-size: 0.9em;
}
/* Office-overlap helper text (person page) */
.person-page .term-overlap__hint{
  font-size: 0.8em;
  font-weight: 400;
  color: #6b7280;
  margin-left: 6px;
}


/* --- Career section container: match Family/Guestbook width & spacing --- */
.person-page #career{
  max-width: var(--card-max);
  margin: 10px auto 24px; /* same rhythm as .family */
}

/* Make the career list track always fill the container width */
.person-page ol.career{
  width: 100%;
  margin: 0; padding: 0; list-style: none;
}

/* Rows stretch to the track and don’t overflow on long content */
.person-page .row{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Empty state card (when there are no career records) */
.person-page #career .notes{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
}

/* Compare page main two-column layout: gutter | content */
.compare-page .compare-page-layout{
  /* No-op wrapper now; keep for structure */
}

/* Compare career grid: rows by year, columns per person */
.compare-page .compare-career-grid{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.compare-page .compare-career-row{
  display:grid;
  grid-template-columns: 60px repeat(3, minmax(0, 1fr)); /* timeline | up to 3 term-card columns */
  gap:12px;
}
.compare-page .compare-career-row .term-card.term-card--compare{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.compare-page .compare-career-row .term-card.term-card--compare .term-row--head{
  display:flex;
  gap:8px;
}
.compare-page .compare-career-row .term-card.term-card--compare .term-row--body{
  margin-top:2px;
}

/* Timeline column inside each career row */
.compare-page .compare-career-timeline{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 0 0; /* top padding only */
  width:60px; /* match dedicated timeline column */
}
.compare-page .compare-career-timeline::before{
  content:none; /* vertical timeline line disabled for now */
}
.compare-page .compare-career-grid .compare-career-timeline-top,
.compare-page .compare-career-grid .compare-career-timeline-bottom{
  width:100%;
}
.compare-page .compare-career-grid .compare-career-timeline-top{
  display:flex;           /* two columns: year + circle */
  align-items:stretch;    /* make children equal height */
  flex:0 0 auto;
  min-height:1.2em; /* enough to hold a line of text */
  /* Match padding rhythm of .person-page .row (term-card); margin handled by row layout */
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}
.compare-page .compare-career-grid .compare-career-timeline-bottom{
  flex:1 1 auto; /* occupy remaining height of the timeline cell */
  display:flex;           /* mirror top: two columns */
  align-items:stretch;
}
/* Inside timeline-top: year + circle at 80:20 ratio */
.compare-page .compare-career-grid .compare-career-timeline-year{
  flex:4 1 80%;
  display:flex;
  align-items:center;   /* vertically center year label */
  height:100%;
}
.compare-page .compare-career-grid .compare-career-timeline-bottom .compare-career-timeline-year{
  justify-content:center; /* center gap label horizontally in bottom row */
}
.compare-page .compare-career-grid .compare-career-timeline-bottom .compare-career-timeline-year .timeline-gap{
  font-size: var(--fs-small);
  color:#6b7280; /* gray-500 */
  font-style:italic;
}
.compare-page .compare-career-grid .compare-career-timeline-circle{
  flex:1 1 20%;
  display:flex;
  justify-content:center;  /* center dot horizontally */
  align-items:center;      /* and vertically */
  height:100%;
}
/* Top row: inner marble-grey circle inside the circle wrapper */
.compare-page .compare-career-grid .compare-career-timeline-top .compare-career-timeline-circle::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#9ca3af; /* subtle marble grey */
  display:block;
}
/* Bottom row: vertical line running full height, centered in the circle cell */
.compare-page .compare-career-grid .compare-career-timeline-bottom .compare-career-timeline-circle::before{
  content:"";
  width:1px;
  height:100%;
  border-radius:0;
  background: color-mix(in srgb, var(--line) 70%, #9ca3af 30%); /* thinner, more subtle grey */
  display:block;
}
.compare-page .compare-career-timeline-year{
  font-size:14px;
  margin-bottom:0;
  color:#374151;
}
.compare-page .compare-career-timeline-circle{
  position: relative; /* wrapper for inner marble-grey dot */
  z-index:1;
}

/* Placeholder timelines for profile/family rows: keep width, hide inner visuals only */
.compare-page .compare-career-timeline--placeholder::before,
.compare-page .compare-career-timeline--placeholder .compare-career-timeline-year,
.compare-page .compare-career-timeline--placeholder .compare-career-timeline-circle{
  opacity:0;
}

/* Profile toggle (sits in the placeholder timeline column) */
.compare-page .compare-profile-grid .compare-career-timeline--placeholder{
  display:flex;
  align-items:flex-start;
  padding:4px 4px 0;
}
.compare-page .compare-profile-toggle{
  width:100%;
  font-size:12px;
  line-height:1.3;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background: color-mix(in srgb, #fafaf7 90%, var(--line) 10%);
  color:#374151;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.compare-page .compare-profile-toggle:hover,
.compare-page .compare-profile-toggle:focus-visible{
  background: color-mix(in srgb, #f3f4f6 70%, #fff 30%);
  border-color: color-mix(in srgb, var(--line) 60%, #94a3b8 40%);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.compare-page .compare-profile-toggle:focus-visible{
  outline:2px solid var(--career-color, #64748b);
  outline-offset:1px;
}

/* Compact mode: strip profile card to essentials */
.compare-page .compare-grid--profile.is-compact .profile-card .ph-c3{
  display:none;
}
.compare-page .compare-grid--profile.is-compact .profile-card.profile-header{
  padding-bottom:6px;
  row-gap:4px;
}

@media (min-width: 900px){
  /* Desktop: 4-column layout: 40px timeline + up to 3 people */
  .compare-page .compare-grid--profile,
  .compare-page .compare-grid--family{
    grid-template-columns: 60px repeat(3, minmax(0, 1fr));
    align-items:stretch;
  }
}

.compare-page .compare-profile-grid{
  display:grid;
  row-gap:16px;
  column-gap:12px;
}
@media (min-width: 900px){
  .compare-page .compare-profile-grid{
    grid-template-columns: 60px repeat(3, minmax(0, 1fr));
  }
}

/* Compare: year/age formatting inside term-head (match person page when) */
.compare-page .term-head .term-when a{
  color: var(--when-link);
  text-decoration: none;
}
.compare-page .term-head .term-when a:hover{
  color: var(--when-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-page .term-head .term-when .age-note{
  color: var(--muted);
  margin-left: 4px;
}

/* === Guestbook / Wall (person page only) === */
/* Container + spacing */
.person-page .guestbook{ max-width:var(--card-max); margin:24px 0; }
.person-page .section-sep{ border:0; border-top:1px solid var(--line); margin:24px 0; }

/* Inline login */
.person-page .guestbook-login{ max-width:var(--card-max); }
.person-page .inline-login-panel{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:10px 12px; margin:8px 0; box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.person-page .inline-login-panel .tb-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px; }
.person-page .inline-login-panel input{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit;
}

/* Compose + counters */
.person-page .guestbook textarea{ resize:none; }
.person-page .char-counter{
  display:flex; justify-content:flex-start;
  font-size:12px; color:var(--muted); margin:0 0 4px; padding-left:8px;
}
.person-page .char-counter.is-max{ color:var(--danger); }
.person-page .wall-new textarea,
.person-page .reply-form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:10px; font:inherit; font-size:14px; box-sizing:border-box;
}
.person-page .wall-actions{ margin-top:8px; }

/* Lists → single column tracks that stretch children (width fix) */
.person-page .wall-list,
.person-page .comment-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:12px;
}

/* Each post + its comments wrap together and align to the right edge */
.person-page .thread{
  width:100%;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}

/* Split the area under a post into a rail (20%) and the comments thread (80%) */
.person-page .thread .thread-split{
  width: 100%;
  max-width: var(--card-max);
  margin-left: auto; /* align left edge with post-card left edge */
  display: flex; align-items: stretch; justify-content: flex-end; gap: 8px;
}
.person-page .thread .thread-rail{
  flex: 0 0 8px;  /* thinner rail */
  background: color-mix(in srgb, var(--line) 45%, white);
  border-radius: 6px;
  margin-right: 5px;
}
.person-page .thread .comment-thread{
  flex: 1 1 0;
  width: auto; margin-left: 0;
}

/* Ensure the post aligns to the right within a thread (not centered) */
.person-page .thread > .post-card{
  margin-left: auto; margin-right: 0;
}

/* Cards: always full width; prevent shrink from long words */
.person-page .post-card,
.person-page .comment{
  display:block; width:100%; min-width:0; box-sizing:border-box;
  border-radius:16px;
  padding:12px; margin:0; /* gap is handled by the grid */
}
/* match local hover border color; shared transform/shadow come from site.css */
.person-page .post-card:hover,
.person-page .comment:hover{ border-color:#d7dbe3; }

/* Head/meta/body */
.person-page .post-head,
.person-page .comment-head{
  display:flex; gap:10px; align-items:center; margin-bottom:6px; min-width:0;
}
.person-page .post-meta .pname,
.person-page .comment-meta .pname{ font-weight:600; }
.person-page .post-meta,
.person-page .comment-meta,
.person-page .pmeta.muted{ font-size:12px; color:var(--muted); }
.person-page .post-body,
.person-page .comment-body{
  font-size:14px; line-height:1.45; margin:8px 0 6px;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

/* Actions */
.person-page .post-actions,
.person-page .comment-actions{
  display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; margin-top:8px; min-height:30px;
}
/* Ensure embedded forms don’t shift vertical alignment */
.person-page .post-actions form,
.person-page .comment-actions form{ margin:0; }

/* Replies */
.person-page .reply-panel{ margin-top:8px; }
.person-page .reply-panel .reply-form{ margin-top:0; }
/* New comment thread layout: separate cards aligned to the right of the post */
.person-page .comment-thread{ list-style:none; padding:0; margin:6px 0 10px; position:relative; width:auto; margin-left:0; }
/* Remove connectors for simplified layout */
.person-page .comment-thread::before{ content:none; }
.person-page .comment-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:8px; }
/* Comment cards fill the comment-thread width, with a sensible max */
.person-page .comment-list .comment{ position:relative; width:100%; max-width:var(--card-max); margin-left:auto; }
.person-page .comment-list .comment::before{ content:none; }

/* Darker chip when comments are expanded */
.person-page [data-comment-toggle].chip[aria-expanded="true"]{
  background:#e5e7eb;
  border-color:#cbd5e1;
}

@media (max-width:700px){
  /* Slightly reduce indent on small screens while keeping connectors visible */
  .person-page .comment-thread{ width:95%; }
  .person-page .comment-list .comment{ width:100%; }
}

/* Comments container & toggles */
.person-page .comments-wrap{ margin-top:6px; width:100%; min-width:0; }
.person-page .comments-wrap[hidden]{ display:none !important; }

/* Normalize summary chip marker (if used) */
/* summary chip marker normalized globally in site.css */


/* Avatar re-use */
.person-page .post-head .avatar-wrap,
.person-page .comment-head .avatar-wrap{
  flex:0 0 44px; width:44px; height:44px;
  border:1px solid var(--line); background:var(--chip); display:grid; place-items:center; font-weight:700;
}
.person-page .post-head .avatar,
.person-page .comment-head .avatar{ display:none; } /* initials for posts/comments */

/* Mobile tweaks */
@media (max-width:640px){
  .person-page .profile{ grid-template-columns:auto 1fr; gap:12px; align-items:start; }
  .person-page .avatar-wrap{ width:96px; height:96px; align-self:center; justify-self:start; }
  .person-page .name{ gap:6px; }
  .person-page .reviewed{ width:14px; height:14px; }
  .person-page .reviewed-icon{ width:14px; height:14px; }
  .person-page .chips{ margin-top:6px; }
  .person-page .when{ width:80px; }
}

/* Center the profile card */
.person-page .profile{
  /* existing styles... */
  margin: 6px auto 16px;       /* was: 6px 0 16px */
}

/* Center the career list container */
.person-page ol.career{
  /* existing styles... */
  margin: 0 auto;              /* was: 0 */
}

/* Center the family and guestbook sections */
.person-page .family{
  /* existing styles... */
  margin: 10px auto 24px;      /* was: 10px 0 24px */
}

.person-page .guestbook{
  /* existing styles... */
  margin: 24px auto;           /* was: 24px 0 */
}

/* If you want the sources/details lists to align to the same column width as cards: */
.person-page .section-sep,
.person-page .wall-list,
.person-page .post-card {
  max-width: var(--card-max);
  margin-left: auto;
  margin-right: auto;
}

/* === Person page section headers (match years headers) === */

/* Theme colors for each section (tweak to taste) */
.person-page {
  --career-color: #465E6B;    /* blue-ish */
  --family-color: #465E6B;    /* teal/green */
  --guestbook-color: #465E6B; /* purple */
}

/* Block wrapper: optional hook if you need spacing per section */
.person-page .psection {
  margin: 16px 0 10px;
  padding: 0;
}

/* Header constrained to card width and centered */
.person-page .section-header{
  position: relative;
  display: flex; align-items: center; gap: 8px;
  max-width: var(--card-max);
  margin-left: auto; margin-right: auto;
  padding-bottom: 4px;     /* tighter space above rule */
  margin-bottom: 8px;      /* tighter than default */
}

/* Compare page: let section headers span the wider compare canvas */
.compare-page .section-header{
  max-width: 100%;
}

/* Underline spans exactly the header width */
.person-page .section-header::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; border-radius: 1px;
  background: color-mix(in srgb, var(--color) 28%, transparent);
}

/* Heavier underline when jumping to the anchor */
.person-page .psection:target .section-header::after{
  height: 3px; background: var(--color);
}

/* Dot + title + copylink */
.person-page .section-header .stripe{
  width: 10px; height: 10px; border-radius: 999px; flex: none;
  background: var(--color);
}
.person-page .section-header .title{
  margin: 0;
  font-weight: 700;            /* uses your heading font (Inter) */
  display: inline-flex; gap: 8px; align-items: center;
}
.person-page .section-header .title .icon{
  font-size: 0.95em;           /* visually balanced with text */
  line-height: 1;
}

/* Ensure the main content blocks under each header share the same width/center */
.person-page .profile,
.person-page ol.career,
.person-page .family,
.person-page .guestbook,
.person-page .section-sep,
.person-page .wall-list,
.person-page .post-card {
  max-width: var(--card-max);
  margin-left: auto; margin-right: auto;
}

.person-page #wall-login { max-width: var(--card-max); margin: 0 auto; }


/* ====== SPQR Profile Header (mobile-first) ====== */
/* ===== Avatar (two borders, bullet-proof portrait ratio) ===== */
.avatar-figure { grid-area: avatar; margin: 0; align-self: start; }

.avatar-figure .avatar-wrap{
  position: relative;
  display: block;
  width: 90px;                     /* mobile width */
  /* Ratio via padding box; desktop overwrites this var below */
  --avatar-ratio: 110%;             /* height = width * 1.10 */

  /* Borders */
  /* Borders (white inner + office-colour outer) */
  border: none;  /* we’ll draw white border via inset shadow instead */
  box-shadow:
    0 0 0 2px #fff inset,                   /* inner white line */
    0 0 0 4px var(--office-color, var(--line)); /* outer magistrate ring */
  
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--office-color, var(--line)); /* outer ring */

  overflow: hidden;
  background: #f8f8f8;
  border-radius: 14px;

  /* Defensive overrides against old rules that might flatten the box */
  height: auto !important;
  min-height: 0 !important;
  /* Kill any accidental aspect-ratio that might be reapplied elsewhere */
  aspect-ratio: auto !important;
}

.avatar-figure .avatar-wrap::before{
  content: "";
  display: block;
  padding-bottom: var(--avatar-ratio); /* this sets the height from width */
}

/* Absolutely fill the box with the image */
.avatar-figure img.avatar{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  /* Neutralise legacy image styles */
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Fallback initial */
.avatar-figure .avatar-fallback{
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  font:700 26px/1 Inter, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#b91c1c;
}

/* ========== Typography via your vars ========== */

.ph-name{
  font-size:var(--fs-h2);
  line-height:1.2;
  margin:2px 0 0 0;
  display:flex; align-items:center; gap:8px;
  word-break:break-word;
}
.ph-name__check{
  font-size:.95em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15em; height:1.15em; border:1px solid var(--line); border-radius:999px;
}

.ph-chips .ph-chips__wrap{ display:flex; flex-wrap:wrap; gap:6px; }
.ph-chips .chip{ font-size:var(--fs-small); line-height:1.2; white-space:nowrap; }
/* Keep chips smaller + lighter so they don’t upstage body text */
.ph-chips .chip{
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 500;        /* down from 600 if you had it */
  letter-spacing: 0;       /* avoid “spread” that makes them look bigger */
  white-space: nowrap;
  padding: 2px 8px;        /* slightly tighter so the badge feels smaller */
}


.profile-header .ph-c3{
  font-family:"EB Garamond", Garamond, "Times New Roman", Times, serif;
  font-size:var(--fs-bio);
  line-height:var(--lh-bio);
  color:var(--ink);
}
.ph-bio--empty{ color:var(--muted); }

/* toggle credit */
/* Credit: fade label out, fade full text in (no layout shift) */
/* === Photo credit: max-content inline-grid swap (no clipping, no shift) === */
.ph-credit{
  /* Left align regardless of parent headers */
  text-align: left;

  /* Inline grid lets both layers occupy the same slot, and the container
     sizes to the wider/taller of the two so nothing is clipped. */
  display: inline-grid;
  grid-template-areas: "stack";
  justify-items: start;   /* LEFT align content inside the grid cell */
  align-items: start;

  position: relative;
  font-size: var(--fs-small);   /* same size for both */
  line-height: 1.2;
  color: var(--muted);
  margin-bottom: 6px;

  /* Allow wrapping so long credits show fully; no fixed height. */
  white-space: normal;
}

/* Both layers sit in the same “stack” cell and inherit identical styling */
.ph-credit__button,
.ph-credit__full{
  grid-area: stack;
  font: inherit;
  color: inherit;
  text-decoration: none;
  justify-self: start;   /* belt-and-braces left align */
  align-self: start;
}

/* Button looks like plain text (no underline), stays in normal flow */
.ph-credit__button{
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Revealed credit initially hidden but still participates in layout sizing */
.ph-credit__full{
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.ph-credit__full a{
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.ph-credit__full a:hover{ text-decoration: underline; } /* optional */

/* Expanded state: fade texts, no movement, no reflow */
.ph-credit[data-expanded="true"] .ph-credit__button{
  opacity: 0;
  visibility: hidden;    /* keeps layout sizing stable */
  pointer-events: none;
}
.ph-credit[data-expanded="true"] .ph-credit__full{
  opacity: 1;
  pointer-events: auto;
}


/* fix pixel jump */
/* ——— Anti-nudge patch for photo credit swap ——— */

/* ---------- Desktop anti-nudge stays (stable text swap width) ---------- */
@media (max-width: 879.98px){
  .ph-credit{
    display: inline-grid;
    grid-template-areas: "stack";
    justify-items: start;
    align-items: start;
    text-align: left;
    width: auto !important;
    max-width: 100%;
    margin-bottom: 6px;        /* normal small gap below */
    white-space: normal;
    overflow: hidden;          /* contain transitions */
  }

  .ph-credit__button,
  .ph-credit__full{
    grid-area: stack;
    font: inherit;
    color: inherit;
    text-decoration: none;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: inherit;
  }

  /* Default (collapsed) state */
  .ph-credit__full{
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 0;               /* ← key: collapse to 0 lines */
  }

  /* Expanded: fades in and expands height naturally */
  .ph-credit[data-expanded="true"] .ph-credit__button{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .ph-credit[data-expanded="true"] .ph-credit__full{
    opacity: 1;
    pointer-events: auto;
    max-height: none;            /* ← allow full expansion */
    transition: opacity 600ms ease;
  }

  .ph-credit__full a{
    color: inherit;
    font: inherit;
    text-decoration: none;
  }
  .ph-credit__full a:hover{
    text-decoration: underline;
  }
}


/* Hide the name only on mobile when we intentionally suppress it during credit reveal */
@media (max-width: 879.98px){
  .ph-name.is-temporarily-hidden{
    display: none !important;
  }
}




/* ========== Desktop: portrait avatar + column swap ========== */
@media (min-width:880px){
  .profile-header{
    grid-template-columns:160px minmax(0,1fr); /* narrower column */
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "avatar b1"
      "avatar b2"
      "avatar b3";
    gap:16px 24px;
    padding:20px 0 24px;
  }
  .avatar-figure .avatar-wrap{
    width:160px;
    aspect-ratio:3 / 4;                 /* clearly taller than wide */
    border-radius:16px;
  }
  /* Desktop: bio in b2, chips in b3 */
  .profile-header .ph-c3{ grid-area:b2; }
  .profile-header .ph-b3{ grid-area:b3; }
}


/* profile header into grid */
/* ===== PROFILE HEADER LAYOUT (mobile-first; aligns with other .psection blocks) ===== */
.profile-header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "avatar b1"
    "avatar b2"
    "c3     c3";
  gap: 12px 16px;
  align-items: start;
}

/* Map elements to the grid areas */
.profile-header .avatar-figure{ grid-area: avatar; margin: 0; }
.profile-header .ph-b1        { grid-area: b1; }
.profile-header .ph-b3        { grid-area: b2; } /* chips on mobile in middle row */
.profile-header .ph-c3        { grid-area: c3; } /* bio spans full width on mobile */

/* ===== DESKTOP: keep avatar 160px wide, portrait 3:4; swap rows (bio middle, chips bottom) ===== */
@media (min-width: 880px){
  .profile-header{
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-areas:
      "avatar b1"
      "avatar b2"
      "avatar b3";
    gap: 16px 24px;
  }

  /* Your avatar size is already good; keep ratio via padding-box (no aspect-ratio) */
  .avatar-figure .avatar-wrap{
    width: 160px;
    --avatar-ratio: 133.333%;   /* 3:4 */
    border-radius: 16px;
  }

  /* place bio in the middle row, chips in the bottom row */
  .profile-header .ph-c3{ grid-area: b2; }
  .profile-header .ph-b3{ grid-area: b3; }
}

/* ===== AVATAR ratio lock (keep your existing rules; just ensure no aspect-ratio on desktop) ===== */
/* remove/override any aspect-ratio that might still be set somewhere */
@media (min-width: 880px){
  .avatar-figure .avatar-wrap{ aspect-ratio: auto !important; }
}


/* ===== Profile card container (align + match term card look) ===== */
/* Make the profile card share the same column as Career/Family */
#profile.psection .profile-card{
  max-width: var(--card-max);
  margin: 6px auto 16px;             /* centered like your other cards */
  background: #fff;
  border: none;
  padding: 12px;                      /* inner padding like .row (10–12px) */
}

/* Keep the grid you already have on .profile-header */
.profile-card.profile-header{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "avatar b1"
    "avatar b2"
    "c3     c3";
  gap: 12px 16px;
  align-items: start;
}

/* Map areas (unchanged) */
.profile-card .avatar-figure{ grid-area: avatar; margin: 0; }
.profile-card .ph-b1        { grid-area: b1; }
.profile-card .ph-b3        { grid-area: b2; }
.profile-card .ph-c3        { grid-area: c3; }

/* Desktop swap + spacing stays consistent */
@media (min-width: 880px){
  .profile-card.profile-header{
    grid-template-columns: 160px minmax(0,1fr);  /* avatar column at 160px */
    grid-template-areas:
      "avatar b1"
      "avatar b2"
      "avatar b3";
    gap: 16px 24px;
    padding: 16px;                                /* slight more air on desktop */
  }
  .profile-card .ph-c3{ grid-area: b2; }
  .profile-card .ph-b3{ grid-area: b3; }
}

/* ===== Avatar ratio + two borders (keep your working rules) ===== */
.profile-card .avatar-figure .avatar-wrap{
  position: relative; display: block;
  width: 90px; --avatar-ratio: 110%;
  border: none;
  overflow: hidden; background: #f8f8f8;
}
.profile-card .avatar-figure .avatar-wrap::before{
  content:""; display:block; padding-bottom: var(--avatar-ratio);
}
.profile-card .avatar-figure img.avatar{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  border-radius:0 !important; max-width:none !important; max-height:none !important;
}
.profile-card .avatar-figure .avatar-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:700 26px/1 Inter, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; color:#b91c1c;
}
@media (min-width:880px){
  .profile-card .avatar-figure .avatar-wrap{
    width:160px; --avatar-ratio:133.333%; border-radius:16px; /* 3:4 portrait */
  }
}

/* === Compare page avatar tweaks (smaller, tighter) === */
.compare-page .profile-card.profile-header{
  grid-template-columns: auto minmax(0,1fr);
  gap: 6px 8px;
  padding: 6px 8px 4px;     /* tighter padding for compare header */
}
.compare-page .profile-card .avatar-figure .avatar-wrap{
  width:72px;              /* compact avatar on compare */
  --avatar-ratio:110%;     /* keep same proportion as mobile portrait */
  border-radius:14px;
  background: color-mix(in srgb, var(--office-color, var(--line)) 10%, #f9fafb);
  box-shadow: 0 0 0 3px var(--office-color, var(--line)); /* ensure office ring is visible */
}
@media (min-width:880px){
  .compare-page .profile-card.profile-header{
    grid-template-columns: 84px minmax(0,1fr);  /* narrow avatar column */
    gap: 6px 10px;
  }
  .compare-page .profile-card .avatar-figure .avatar-wrap{
    width:72px;
    --avatar-ratio:110%;
  }
}
.compare-page .profile-card.profile-header .ph-b1{
  margin-top:0;             /* remove extra white space above name */
}
.compare-page .profile-card.profile-header .ph-name{
  margin:0;                 /* override global h1 margin */
}


/* Source abbreviation links (e.g., "Cic. Att.") in person page lists */
.person-page .sources-list a.src-abbr,
.person-page .subsources a.src-abbr {
  font-family: "EB Garamond", serif; /* keep font-family */
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--src-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.person-page .sources-list a.src-abbr:hover,
.person-page .subsources a.src-abbr:hover{
  color: var(--src-link-hover);
}

/* In the sources table as well (if you ever render them there) */
.sources-table a.src-abbr {
  font-family: "EB Garamond", serif;
  font-weight: 600;
}

/* Flash highlight for new posts/comments; uses --office-color defined on page */
.person-page .flash-highlight{
  outline:3px solid color-mix(in srgb, var(--office-color, #3b82f6) 70%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--office-color, #3b82f6) 25%, transparent);
  animation:flashCard 1.2s ease-out 1;
}
@keyframes flashCard{
  0%{ outline-color: color-mix(in srgb, var(--office-color, #3b82f6) 80%, transparent); box-shadow:0 0 0 8px color-mix(in srgb, var(--office-color, #3b82f6) 35%, transparent); }
  70%{ outline-color: color-mix(in srgb, var(--office-color, #3b82f6) 35%, transparent); box-shadow:0 0 0 4px color-mix(in srgb, var(--office-color, #3b82f6) 15%, transparent); }
  100%{ outline-color: transparent; box-shadow:none; }
}

/* Compare page: wider canvas + slightly wider columns */
.compare-page{
  max-width: 1200px;
  margin: 0 auto;
}
/* Fine-tune main wrapper width: <main class="wrap person-page compare-page"> */
.wrap.person-page.compare-page{
  max-width: 1202px;
}
@media (min-width: 900px){
  .compare-page .compare-grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
.compare-page .compare-family-grid{
  display:grid;
  row-gap:16px;
  column-gap:12px;
}
@media (min-width: 900px){
  .compare-page .compare-family-grid{
    grid-template-columns: 60px repeat(3, minmax(0, 1fr));
  }
}

/* Compare family column card */
.compare-page .compare-family-col .compare-family-card{
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.compare-page .compare-family-empty{
  padding:8px 10px;
  border-radius:8px;
  border:1px dashed var(--line);
  background:#f9fafb;
}
.compare-page .compare-family-group{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.compare-page .compare-family-label{
  min-width:90px;
  flex:none;
  font-size:13px;
  font-weight:600;
  color:#4b5563;
}
.compare-page .compare-family-list{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Bench add button on compare page (family chips, etc.) */
.compare-page .pcard__bench-add{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.compare-page .pcard__bench-add span[aria-hidden="true"]{
  font-size:14px;
  line-height:1;
}
.compare-page .pcard__bench-add:hover,
.compare-page .pcard__bench-add:focus-visible{
  outline:none;
  color:var(--ink);
  background:color-mix(in srgb, var(--color, #9ca3af) 10%, #f3f4f6);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color, #9ca3af) 35%, var(--line));
  transform:translateY(-0.5px);
}

/* Match vertical spacing of family cards to term-card--compare rows */
.compare-page .compare-family-section{
  margin:12px 0;
}