.app-nav{display:flex;gap:7px;align-items:center}.app-nav a{padding:9px 12px;border-radius:6px;text-decoration:none;color:#716678;font:600 13px 'DM Sans',sans-serif}.app-nav a.active,.app-nav a:hover{background:var(--plum);color:white}.app-nav b{font-size:9px;background:var(--coral);color:white;border-radius:9px;padding:2px 5px}.social{width:100%;max-width:var(--page);margin:0 auto;padding:52px max(20px,3vw) 90px}.social h1{font:600 45px/.98 'Fraunces',serif;margin:0}.social h1 em{color:var(--coral)}.sub{color:#756a7d;font-size:14px}.match-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;margin-top:34px;align-items:start}.match-tile{background:white;border:1px solid #e8e1ea;border-radius:10px;overflow:hidden}.match-tile img.mt-photo{width:84px;height:84px;object-fit:cover}.match-tile h2{font:600 21px 'Fraunces',serif;margin:0}.match-tile p{font-size:12px;color:#756a7c}.match-tile a{display:block;text-decoration:none;text-align:center}.messages{max-width:var(--page);margin:40px auto;min-height:560px;border:1px solid #e8e1ea;border-radius:11px;background:white;display:grid;grid-template-columns:280px 1fr;overflow:hidden}.conversations{background:#fbf8fc;padding:24px 15px}.conversation{display:flex;width:100%;gap:10px;padding:12px;border:0;background:transparent;text-align:left;border-radius:7px}.conversation:hover,.conversation.active{background:#eee7f7}.initial{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#d9c7ef;color:var(--plum);font-weight:700}.conversation div{display:grid;gap:3px}.conversation strong{font-size:13px}.conversation small{color:#7e7384;font-size:11px}.thread{display:grid;grid-template-rows:auto 1fr auto}.thread-head{display:flex;justify-content:space-between;padding:19px;border-bottom:1px solid #eee8ef}.thread-head div{display:grid;gap:3px}.thread-head span{font-size:11px;color:#807589}.thread-head button{border:0;background:none;color:#8b5360;font-size:11px}.message-area{padding:22px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:70%;padding:10px 13px;border-radius:12px;background:#eee7f7;font-size:13px}.bubble.mine{align-self:flex-end;background:var(--plum);color:white}.thread form{display:flex;gap:9px;padding:15px;border-top:1px solid #eee8ef}.thread input{margin:0}.thread form button{white-space:nowrap}.dialog-actions{display:grid;gap:9px;margin-top:20px}.danger-button{padding:11px;border:1px solid #bc6060;background:white;color:#a13e3e;border-radius:6px;font-weight:700}select{width:100%;padding:11px;border:1px solid var(--line);border-radius:5px;background:white;margin-top:10px}@media(max-width:650px){.messages{margin:20px 15px;grid-template-columns:1fr}.conversations{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:14px 12px}.conversations::-webkit-scrollbar{display:none}.conversations .eyebrow{display:none}.conversation{width:auto;flex:0 0 auto}.conversation small{display:none}.match-list{grid-template-columns:1fr}.app-nav{gap:1px}.app-nav a{font-size:11px;padding:8px}.social{padding-top:40px}}

/* --- match tiles with reasoning --- */
.match-tile{display:flex;flex-direction:column;gap:16px;padding:20px;background:#fff;
  border:1px solid #ece4f2;border-radius:14px;box-shadow:0 8px 24px rgba(57,35,77,.06)}
.mt-top{display:flex;gap:15px;align-items:center}
.mt-photo{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:none}
.mt-photo.hidden{display:grid;place-items:center;background:#e9dff5}
.mt-id h2{margin:0;font:600 21px 'Fraunces',serif;color:#39234d}
.mt-meta{margin:2px 0 7px;font-size:12px;color:#8a7b95;font-weight:600}
.mt-live{color:#2f7d4f}
.mt-score{display:flex;align-items:baseline;gap:6px}
.mt-score strong{font:700 25px 'DM Sans',sans-serif;color:#402c68;font-variant-numeric:tabular-nums}
.mt-score span{font-size:11px;font-weight:700;color:#9a8ea4;text-transform:uppercase;letter-spacing:.07em}
.mt-why{padding:16px;background:#faf7fc;border-radius:11px}
.mt-why h3{margin:0 0 10px;font:600 15px 'Fraunces',serif;color:#39234d}
.mt-shared{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid #ece4f2}
.mt-shared-label{font:700 10px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9a8ea4}
.mt-shared-label.none{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}
.mt-shared b{background:color-mix(in srgb,var(--mc) 14%,#fff);color:var(--mc);
  border:1px solid color-mix(in srgb,var(--mc) 32%,#fff);border-radius:14px;padding:4px 9px;
  font:700 10.5px 'DM Sans',sans-serif}
.mt-locked{font-style:normal;font-size:10.5px;font-weight:600;color:#a99cba}
.mt-reasons{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mt-reasons li{font-size:13px;line-height:1.45;color:#544a5e}
.mt-reasons li b{color:#39234d}
.mt-reasons li em{font-style:normal;color:#8a7b95;font-variant-numeric:tabular-nums}
.mt-reasons li span{display:inline-block;margin-left:5px;font-size:9.5px;font-weight:700;
  color:#a99cba;text-transform:uppercase;letter-spacing:.06em}
.mt-reasons li.mt-thin{color:#9a8ea4;font-style:italic}
.mt-gap{margin-top:12px;padding:11px 13px;background:#fff5f2;border:1px solid #f6cfc4;
  border-radius:9px;font-size:12.5px;line-height:1.5;color:#8a4636}
.mt-gap b{color:#7d2a21}
.mt-bars{margin-top:14px;display:grid;gap:6px}
.mt-bar{display:grid;grid-template-columns:118px 1fr 28px;align-items:center;gap:10px;font-size:11.5px;color:#6b5f76}
.mt-bar i{display:block;height:7px;border-radius:4px;background:#ece4f2;overflow:hidden}
.mt-bar i b{display:block;height:100%;border-radius:4px}
.mt-bar strong{text-align:right;font-size:11.5px;color:#39234d;font-variant-numeric:tabular-nums}
.no-fp{padding:34px;background:#fff;border:1px dashed #d7c7ed;border-radius:14px;text-align:center}
.no-fp h2{margin:0 0 8px;font:600 24px 'Fraunces',serif;color:#39234d}
.no-fp p{margin:0 auto 18px;max-width:52ch;font-size:14px;line-height:1.6;color:#756a7c}
@media(max-width:600px){
  .mt-bar{grid-template-columns:96px 1fr 26px;gap:8px}
  .mt-photo{width:66px;height:66px}
}
/* Text must be allowed to shrink inside a flex row or it collapses behind the photo. */
.mt-top{min-width:0}
.mt-id{min-width:0;flex:1}
.mt-id h2{overflow-wrap:anywhere}

/* --- uniform tiles + the detail toggle -------------------------------------
   grid-auto-rows:1fr with stretched items makes every tile the same size as
   the tallest one, so the grid tiles cleanly instead of stair-stepping. The
   reasoning block takes the slack (flex:1) rather than leaving a gap above the
   button. Compact mode is the same markup with the reasoning hidden and the
   photo promoted to the full width of the card. */
.match-list{grid-auto-rows:1fr;align-items:stretch}
.match-tile{height:100%}
.mt-why{flex:1}
.match-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:26px;padding:13px 16px;background:#fff;border:1px solid #ece4f2;
  border-radius:12px;box-shadow:0 6px 18px rgba(57,35,77,.05)}
.mc-count{margin:0;font:700 11px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:#9a8ea4}
.mc-count b{color:#402c68}
.mc-toggle{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;
  font:700 12.5px 'DM Sans',sans-serif;color:#6b5f76}
.mc-toggle i{position:relative;width:40px;height:22px;border-radius:11px;background:#ddd4e4;flex:none;
  transition:background .18s}
.mc-toggle i:after{content:'';position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(57,35,77,.3);transition:transform .18s}
.mc-toggle[aria-checked="true"]{color:#402c68}
.mc-toggle[aria-checked="true"] i{background:#402c68}
.mc-toggle[aria-checked="true"] i:after{transform:translateX(18px)}
.match-list.compact{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.match-list.compact .match-tile{padding:0;gap:0;overflow:hidden}
.match-list.compact .mt-top{flex-direction:column;align-items:stretch;gap:0}
.match-list.compact .mt-photo{width:100%;height:auto;aspect-ratio:1/1;border-radius:0}
.match-list.compact .mt-photo.hidden{aspect-ratio:1/1;height:auto}
.match-list.compact .mt-id{padding:13px 15px 0}
.match-list.compact .mt-why{display:none}
.match-list.compact .match-tile>a{margin:13px 15px 15px}
@media(max-width:560px){.match-list.compact{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}}