:root {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#26232b;
  background:#f5f1eb;
  --purple:#5d4a78;
  --purple-soft:#f1ebf8;
  --border:#ddd6df;
  --portrait-bg:#eeeeee;
  --pink:#e6a8b7;
  --blue:#9db8df;
  --green:#47765b
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

.app {
  width:min(1180px,calc(100% - 32px));
  margin:34px auto 72px
}

.site-header {
  max-width:850px
}

.title-row {
  display:flex;
  align-items:center;
  gap:18px
}

.compare-mark {
  font-size:clamp(2rem,7vw,4.6rem);
  line-height:1;
  filter:grayscale(.15)
}

.eyebrow {
  margin:0 0 6px;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.55
}

h1 {
  margin:0;
  font-size:clamp(2rem,5vw,3.45rem);
  line-height:1
}

h2,h3 {
  margin-top:0
}

.intro {
  font-size:1.02rem;
  line-height:1.6
}

.updates {
  border: 1px solid #000000;
  background-color: #FEFEFE;
  padding: 10px;
  font-size: .8rem;
}

.privacy-banner {
  display:flex;
  gap:11px;
  align-items:center;
  margin:24px 0;
  padding:13px 15px;
  border:1px solid #cdbde0;
  border-radius:13px;
  background:var(--purple-soft);
  color:#49385f;
  font-size:.9rem;
  line-height:1.45
}

.privacy-icon {
  font-size:1.15rem
}

.pet-load-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:12px
}

.pet-panel {
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.55)
}

.panel-heading {
  display:flex;
  align-items:center;
  gap:9px
}

.panel-heading h2 {
  margin:0;
  font-size:1.15rem
}

.pet-letter {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--purple);
  color:white;
  font-weight:800;
  font-size:.78rem
}

.compare-divider {
  display:grid;
  place-items:center;
  font-size:1.8rem;
  color:var(--purple);
  opacity:.55
}

.dropzone {
  display:grid;
  place-items:center;
  gap:4px;
  min-height:118px;
  margin:15px 0 10px;
  border:2px dashed #aaa1ad;
  border-radius:15px;
  background:rgba(255,255,255,.7);
  cursor:pointer;
  transition:.15s ease
}

.dropzone:hover,.dropzone.dragging {
  transform:translateY(-1px);
  background:#fff;
  border-color:var(--purple)
}

.dropzone input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}

.dropzone span {
  font-size:.85rem;
  opacity:.6
}

.pet-summary {
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  align-items:center;
  margin-top:10px
}

.portrait-frame {
  display:grid;
  place-items:center;
  height:82px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--portrait-bg)
}

.portrait-frame img {
  width:78px;
  max-height:72px;
  object-fit:contain;
  image-rendering:pixelated
}

.portrait-missing {
  font-size:.68rem;
  opacity:.48
}

.pet-details {
  display:grid;
  gap:3px;
  min-width:0
}

.pet-details strong {
  font-size:1.08rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.pet-details span {
  font-size:.8rem;
  opacity:.65
}

.file-status {
  min-height:1.2em;
  margin:10px 2px 0;
  font-size:.76rem;
  opacity:.58
}

.compare-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:18px 0 26px
}

.depth-control {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:white;
  font-size:.84rem
}

.depth-control select {
  border:0;
  border-bottom:1px solid #aaa1ad;
  background:transparent;
  font-weight:700
}

.primary-button,.secondary-button {
  border-radius:11px;
  cursor:pointer;
  font:inherit;
  font-weight:700
}

.primary-button {
  padding:10px 17px;
  border:1px solid var(--purple);
  background:var(--purple);
  color:white
}

.primary-button:hover {
  filter:brightness(1.05)
}

.secondary-button {
  padding:9px 12px;
  border:1px solid var(--border);
  background:white;
  color:inherit
}

.secondary-button:hover {
  border-color:#b9acbf;
  background:#fcfbfd
}

.primary-button:disabled,.secondary-button:disabled {
  opacity:.42;
  cursor:default
}

.results {
  margin-top:10px
}

.results-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border)
}

.results-heading h2 {
  margin:0;
  font-size:1.65rem
}

.result-summary {
  margin:6px 0 0;
  max-width:760px;
  font-size:.9rem;
  line-height:1.45;
  opacity:.68
}

.match-count {
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:white;
  border:1px solid var(--border);
  font-size:.8rem;
  font-weight:800
}

.trim-warning {
  margin:14px 0;
  padding:12px 14px;
  border:1px solid #cdbde0;
  border-radius:11px;
  background:var(--purple-soft);
  color:#49385f;
  font-size:.84rem;
  line-height:1.45
}

.closest-card {
  margin:17px 0;
  padding:18px;
  border:1px solid #cdbde0;
  border-radius:16px;
  background:linear-gradient(135deg,#fff,#f6f0fb)
}

.closest-main {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:15px
}

.closest-main h3 {
  margin:0 0 3px;
  font-size:1.45rem
}

.closest-main p {
  margin:0;
  font-size:.84rem;
  opacity:.65
}

.confidence-badge {
  padding:6px 9px;
  border-radius:999px;
  background:#e9f4ed;
  color:#356347;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap
}

.distance-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px
}

.distance-grid>div {
  display:grid;
  gap:2px;
  padding:11px 12px;
  border:1px solid #e6dfea;
  border-radius:11px;
  background:rgba(255,255,255,.8)
}

.distance-grid span {
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.52
}

.distance-grid strong {
  font-size:1rem
}

.distance-grid small {
  opacity:.58
}

.direct-relationship {
  margin:14px 0;
  padding:12px 14px;
  border-left:4px solid var(--purple);
  border-radius:5px 11px 11px 5px;
  background:#fff;
  font-size:.88rem;
  line-height:1.45
}

.table-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin:25px 0 8px
}

.table-heading h3 {
  margin:0
}

.table-heading p {
  margin:4px 0 0;
  font-size:.8rem;
  opacity:.58
}

.filter-control {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  font-weight:700
}

.filter-control input {
  width:190px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:white;
  font:inherit
}

.table-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  background:white
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:.83rem
}

th,td {
  padding:11px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid #eee9ef
}

th {
  position:sticky;
  top:0;
  background:#faf8fb;
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#655c69
}

tbody tr:last-child td {
  border-bottom:0
}

.ancestor-name {
  display:block;
  font-weight:800
}

.ancestor-meta {
  display:block;
  margin-top:2px;
  font-size:.72rem;
  opacity:.58
}

.distance-cell strong {
  display:block
}

.distance-cell span {
  display:block;
  margin-top:2px;
  font-size:.72rem;
  opacity:.6
}

.match-basis {
  display:inline-block;
  padding:4px 7px;
  border-radius:999px;
  background:#eef5f0;
  color:#3f684e;
  font-size:.66rem;
  font-weight:800
}

.empty-matches {
  padding:28px;
  text-align:center;
  line-height:1.55;
  opacity:.65
}

.method-note {
  margin-top:14px;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:rgba(255,255,255,.55);
  font-size:.8rem;
  line-height:1.5
}

.method-note summary {
  cursor:pointer;
  font-weight:800
}

.method-note p {
  margin:9px 0 0
}

.site-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:35px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:.76rem;
  opacity:.58
}

.site-footer span {
  text-align:right
}

[hidden] {
  display:none!important
}

@media(max-width:760px) {
  .app {
  width:min(100% - 20px,1180px);
  margin-top:22px
}

.pet-load-grid {
  grid-template-columns:1fr
}

.compare-divider {
  height:28px;
  transform:rotate(90deg)
}

.results-heading,.table-heading {
  align-items:start;
  flex-direction:column
}

.filter-control {
  width:100%
}

.filter-control input {
  flex:1;
  width:auto
}

.distance-grid {
  grid-template-columns:1fr
}

.site-footer {
  flex-direction:column
}

.site-footer span {
  text-align:left
}


}

@media(max-width:470px) {
  .title-row {
  align-items:start
}

.compare-mark {
  font-size:2.3rem
}

.pet-summary {
  grid-template-columns:76px 1fr
}

.portrait-frame {
  height:70px
}

.compare-controls>* {
  flex:1 1 auto
}

.depth-control {
  flex:1 1 100%
}


}

@media print {
  body {
  background:white
}

.app {
  width:100%;
  margin:0
}

.privacy-banner,.pet-load-grid,.compare-controls,.filter-control,.method-note,.site-footer {
  display:none!important
}

.results {
  display:block!important
}

.results-heading {
  margin-top:0
}

.table-wrap {
  overflow:visible;
  border-color:#bbb
}

th {
  position:static
}

.closest-card {
  break-inside:avoid
}

tr {
  break-inside:avoid
}


}

.pet-breeder {
  font-weight:650;
  color:#5d4a78;
  opacity:.82!important
}

.plain-relationship {
  margin:17px 0;
  padding:15px 17px;
  border:1px solid #cdbde0;
  border-radius:14px;
  background:#fff;
  font-size:.95rem;
  line-height:1.55
}

.shared-details {
  margin-top:22px
}

.shared-details>summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:white;
  cursor:pointer;
  font-weight:800;
  list-style:none
}

.shared-details>summary::-webkit-details-marker {
  display:none
}

.shared-details>summary:after {
  content:'Show details ▾';
  font-size:.75rem;
  color:var(--purple)
}

.shared-details[open]>summary:after {
  content:'Hide details ▴'
}

.shared-details>summary small {
  margin-left:auto;
  font-size:.74rem;
  opacity:.55
}

.shared-details[open]>summary {
  border-radius:12px 12px 0 0
}

.shared-details .table-heading {
  margin-top:18px
}

@media print {
  .shared-details {
  display:block!important
}

.shared-details>summary {
  display:none
}

.plain-relationship {
  break-inside:avoid
}


}



.echo-callout {
  text-align: center;
  background: var(--purple-soft);
  border-color: #cdbde0 !important;
}

.echo-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}



/* Small project credit inside About this comparison */
.echo-callout {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line, #cdbde0);
  border-radius: 12px;
  text-align: center;
  background: var(--purple-soft);
  border-color: #cdbde0 !important;
}

.echo-callout h3 {
  margin: .25rem 0 0;
  font-size: 1rem;
}

.echo-badge {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* PPV companion header + footer */
.proper-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}

.brand-block {
  max-width: 820px;
}

.site-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(120,108,124,.22);
  color: #655e68;
  font-size: .74rem;
  opacity: 1;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer span {
  margin-top: 3px;
  opacity: .7;
}

.site-footer p {
  margin: 0;
  opacity: .7;
}

.site-footer a {
  color: inherit;
}

.discord-contact {
  white-space: nowrap;
  color: #c0392b;
  font-weight: 700;
}

@media (max-width: 760px) {
  .proper-header {
  flex-direction: column;
}

.title-row {
  align-items: flex-start;
}

.site-footer {
  align-items: flex-start;
  flex-direction: column;
}


}