/* Related Problems — the topic page's card, drawn the way the homepage
   draws it.

   The homepage's bento cards are the design the site is launching with, so
   this panel now borrows their language rather than the flat header-bar
   card it used before: a soft top-lit surface, the heading in sentence case
   with a bare teal icon instead of a chip, and the list sunk into a darker
   inset panel whose rows are separate rounded pills rather than hairline-
   ruled table rows.

   The sizes are not the homepage's. That card holds a scaled-down mock of
   this panel, about 60% of life size; copying its type sizes here would
   give a real student 10px rows. The proportions are matched, the type is
   set to read.
*/

.ace-rl-card {
  /* The teal the homepage uses for text and icons on a dark surface: the
     palette's primary lifted towards white until it clears 4.5:1 there.
     Precomputed first for browsers without color-mix (iOS 15 and older). */
  --ace-rl-teal: #61b6b1;
  --ace-rl-line: rgba(255, 255, 255, .08);
  --ace-rl-line2: rgba(255, 255, 255, .14);

  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  margin: 26px 0 0;
  border: 1px solid var(--ace-rl-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .012));
  transition: border-color .2s ease;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
  .ace-rl-card { --ace-rl-teal: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff); }
}

.ace-rl-card:hover { border-color: var(--ace-rl-line2); }

/* Once the script has moved it into the right-hand column it sits under
   the download cards, which bring their own spacing. */
.ace-rl-card.is-aside { margin: 16px 0 0; }

/* ---- heading ---- */

.ace-rl-head {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading, #f5f4ef) !important;
}
.ace-rl-head svg {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--ace-rl-teal);
}

/* ---- the list, sunk into the card ---- */

.ace-rl-panel {
  padding: 12px 12px 10px;
  border: 1px solid var(--ace-rl-line2);
  border-radius: 12px;
  background: #1f1f1d;
}

.ace-rl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: var(--color-heading, #f5f4ef) !important;
  text-decoration: none !important;
  transition: background .16s ease;
}
.ace-rl-item + .ace-rl-item { margin-top: 5px; }
.ace-rl-item:hover,
.ace-rl-item:focus-visible { background: rgba(var(--ace-primary-rgb, 0, 138, 129), .18); }

.ace-rl-item-icon { flex-shrink: 0; display: flex; color: var(--ace-rl-teal); }
.ace-rl-item-icon svg { width: 13px; height: 13px; }

.ace-rl-item-title {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  line-height: 1.4;
  word-break: break-word;
}

.ace-rl-item-arrow {
  flex-shrink: 0;
  display: flex;
  margin-left: auto;
  color: var(--color-text-muted, #a39e93);
}
.ace-rl-item-arrow svg { width: 13px; height: 13px; }
.ace-rl-item:hover .ace-rl-item-arrow { color: var(--ace-rl-teal); }

.ace-rl-foot {
  margin: 9px 0 0 !important;
  padding: 0 2px 0 0 !important;
  font-size: .66rem !important;
  line-height: 1.3 !important;
  text-align: right;
  color: var(--color-text-muted, #a39e93) !important;
}

/* In the full-width content column the card can afford a little more. */
@media (min-width: 720px) {
  .ace-rl-card:not(.is-aside) .ace-rl-item-title { font-size: .86rem; }
}