/* Keep the collection scannable; expand a specialty for the server-backed detail. */
.my-specialties { margin-top: 16px; padding-top: 16px; }
.my-specialties-head { margin-bottom: 8px; }
.my-specialties-head h3 { font-size: 23px; }
.my-specialties-guide {
  overflow: visible;
  margin: 0 0 10px;
  padding: 0;
  border-radius: 10px;
  background: #111521;
}
.my-specialties-guide-summary {
  padding: 10px 12px;
  color: #c7d4e6;
  font: 700 11px/1.3 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.my-specialties-guide-summary:focus-visible,
.my-specialty-summary:focus-visible { outline: 2px solid #d5beff; outline-offset: 2px; }
.my-specialties-guide[open] { padding-bottom: 12px; }
.my-specialties-guide > :not(summary) { margin-left: 12px; margin-right: 12px; }
.my-specialties-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.my-specialties-grid { gap: 7px; }
.my-specialty-card { padding: 0; border-radius: 11px; box-shadow: none; }
.my-specialty-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}
.my-specialty-summary::-webkit-details-marker { display: none; }
.my-specialty-summary::after {
  content: '⌄';
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #8998ad;
  font-size: 15px;
}
.my-specialty-card[open] .my-specialty-summary::after { transform: rotate(180deg); }
.my-specialty-summary .my-specialty-top { grid-column: 1; gap: 8px; }
.my-specialty-title,
.my-specialty-title.with-art { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; }
.my-specialty-icon,
.my-specialty-title.with-art .my-specialty-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 15px;
}
.my-specialty-top strong { font-size: 16px; }
.my-specialty-rank { padding: 4px 6px; font-size: 7px; }
.my-specialty-overview {
  grid-column: 1;
  display: block;
  margin: 3px 0 0 34px;
  color: #9cabc0;
  font: 500 10px/1.4 Inter, system-ui, sans-serif;
}
.my-specialty-card[open] { padding-bottom: 10px; }
.my-specialty-card > :not(summary) { margin-left: 11px; margin-right: 11px; }
.my-specialty-description { min-height: 0; margin-top: 2px; margin-bottom: 8px; }
.my-specialty-progress { margin-bottom: 8px; }
.my-specialty-metrics > div { padding: 7px; }
.my-specialty-next { margin-top: 8px; padding-top: 8px; }
@media (max-width: 760px) {
  .my-specialties-guide-grid { grid-template-columns: 1fr; }
  .my-specialty-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}