/* SoC details: reveal existing DB fields without widening/changing the ranking table. */
.soc-detail-open{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  width:100%;
  padding:1px 0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.soc-detail-open strong{min-width:0;overflow-wrap:anywhere;}
.soc-detail-cue{
  flex:0 0 auto;
  color:#b45171;
  font-size:13px;
  line-height:1;
  font-weight:800;
}
.soc-detail-open:hover strong{text-decoration:underline;text-decoration-color:#e69ab1;text-underline-offset:2px;}
.soc-detail-open:focus-visible{outline:2px solid #c7577a;outline-offset:2px;}
.soc-detail-hint{
  margin:6px 2px 9px;
  font-size:11px;
  line-height:1.5;
  font-weight:750;
  color:#8c4a61;
}
.soc-detail-dialog{
  box-sizing:border-box;
  width:min(540px,calc(100vw - 28px));
  max-width:100%;
  max-height:min(85vh,760px);
  margin:auto;
  padding:22px 18px 17px;
  border:2px solid #e8c6d2;
  border-radius:20px;
  background:#fffafc;
  color:#453840;
  box-shadow:0 20px 75px rgba(45,25,35,.24);
  overflow:auto;
  overscroll-behavior:contain;
}
.soc-detail-dialog::backdrop{background:rgba(35,24,30,.57);}
.soc-detail-top{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid #efd9e2;
}
.soc-detail-top h2{
  margin:0;
  border:0;
  background:none;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
  color:#693b50;
  overflow-wrap:anywhere;
}
.soc-detail-top .soc-detail-close{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-width:38px;
  min-height:38px;
  margin:0;
  border:1px solid #e7ccd6;
  border-radius:11px;
  background:#fff;
  color:#7d475d;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.soc-detail-mode{margin:13px 0 10px;color:#a24f6b;font-size:12px;font-weight:900;}
.soc-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0;
}
.soc-detail-field{
  box-sizing:border-box;
  min-width:0;
  min-height:68px;
  padding:10px 11px;
  border:1px solid #efdae2;
  border-radius:12px;
  background:#fff;
}
.soc-detail-field dt{font-size:11px;line-height:1.35;color:#9c5370;font-weight:850;}
.soc-detail-field dd{
  margin:6px 0 0;
  color:#3f3539;
  font-size:13px;
  line-height:1.5;
  font-weight:800;
  overflow-wrap:anywhere;
}
.soc-detail-field dd .soc-detail-missing{color:#94888c;font-weight:500;}
.soc-detail-foot{
  margin:13px 2px 0;
  font-size:11px;
  line-height:1.75;
  color:#756870;
}
@media(max-width:600px){
  .soc-detail-dialog{padding:18px 13px 15px;border-radius:17px;max-height:87vh;}
  .soc-detail-top h2{font-size:16px;}
  .soc-detail-grid{gap:7px;}
  .soc-detail-field{padding:9px 8px;min-height:62px;}
  .soc-detail-field dd{font-size:12px;}
  .soc-detail-cue{font-size:11px;}
  .soc-detail-hint{font-size:10.5px;}
}