/* Self-contained surfaces: popovers must remain readable over every card tint. */
.tr-card-score { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; align-self: start; }
.tr-ui :is(.tr-card--campaign,.tr-card--welcome) .tr-card__header:has(.tr-card-score) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; }
@media (min-width: 901px) { .tr-ui .registry-list .tr-card--row > .tr-card__header:has(.tr-card-score) { display: flex; flex-direction: column; } }
.tr-score-details { --score-panel-bg: #101e2c; --score-panel-text: #f1f5fa; --score-panel-muted: #b6c5d5; --score-panel-line: #405164; --score-panel-link: #55e8c4; margin: 0; max-width: 100%; color: #bdd0e3; }
html[data-taring-theme="light"] .tr-score-details { --score-panel-bg: #ffffff; --score-panel-text: #152638; --score-panel-muted: #536274; --score-panel-line: #d3dde7; --score-panel-link: #006e54; color: #435a70; }
.tr-score-details > .tr-score-details__trigger { display: flex; min-height: 24px; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.25; text-transform: none; letter-spacing: normal; list-style: none; cursor: pointer; }
.tr-score-details__trigger::-webkit-details-marker { display: none; }
.tr-score-details__trigger::marker { content: ''; }
.tr-score-details > .tr-score-details__trigger::before, .tr-score-details > .tr-score-details__trigger::after { display: none; }
.tr-score-details__trigger span { max-width: 10em; }
.tr-score-details__trigger svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tr-score-details__trigger .tr-score-details__chevron { width: 11px; height: 11px; transition: transform .12s ease; }
.tr-score-details:not(.is-enhanced)[open] .tr-score-details__chevron, .tr-score-details__trigger[aria-expanded="true"] .tr-score-details__chevron { transform: rotate(180deg); }
.tr-score-details__trigger:hover { text-decoration: underline; text-underline-offset: 3px; }
.tr-score-details__trigger:focus-visible, .tr-score-details__panel :is(a,button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tr-score-details .tr-score-details__panel { box-sizing: border-box; width: 320px; max-width: 100%; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--score-panel-line); border-radius: 10px; background: var(--score-panel-bg); background-image: none; color: var(--score-panel-text); box-shadow: 0 12px 32px #0004; font-family: var(--taring-font-body, system-ui, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-align: left; text-transform: none; overflow: auto; overscroll-behavior: contain; }
.tr-score-details.is-enhanced > .tr-score-details__panel { position: fixed; inset: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
.tr-score-details__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tr-score-details__heading > strong { font-size: 13px; color: var(--score-panel-text); }
.tr-score-details .tr-score-details__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; min-width: 28px; min-height: 28px; margin: -3px -5px 0 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--score-panel-muted); font: 22px/1 system-ui, sans-serif; box-shadow: none; cursor: pointer; }
.tr-score-details .tr-score-details__close[hidden] { display: none; }
.tr-score-details__close:hover { background: var(--score-panel-line); color: var(--score-panel-text); }
.tr-score-details .tr-score-details__list { display: block; margin: 0; padding: 0; }
.tr-score-details .tr-score-details__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--score-panel-line); }
.tr-score-details__row:last-child { border-bottom: 0; }
.tr-score-details .tr-score-details__row dt { color: var(--score-panel-text); font-size: 13px; font-weight: 400; line-height: 1.3; }
.tr-score-details .tr-score-details__row dd { margin: 0; color: var(--score-panel-text); font-size: 14px; white-space: nowrap; }
.tr-score-details__row dd span { margin-left: 2px; color: var(--score-panel-muted); font-size: 10px; }
.tr-score-details .tr-score-details__footer { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 5px; padding-top: 9px; border-top: 1px solid var(--score-panel-line); color: var(--score-panel-muted); font-size: 11px; }
.tr-score-details .tr-score-details__panel a { color: var(--score-panel-link); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.tr-score-details .tr-score-details__message { margin: 8px 0; color: var(--score-panel-text); font-size: 13px; }
/* A no-JS disclosure uses the card width instead of squeezing into the score rail. */
.tr-card__header:has(.tr-score-details:not(.is-enhanced)[open]), .en-card__top:has(.tr-score-details:not(.is-enhanced)[open]) { grid-template-columns: minmax(0,1fr) !important; }
.tr-card-score:has(.tr-score-details:not(.is-enhanced)[open]) { width: 100%; }
.tr-score-details:not(.is-enhanced)[open] { width: 100%; }
@media (max-width: 480px) { .tr-score-details > .tr-score-details__trigger { font-size: 12px; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .tr-score-details__trigger .tr-score-details__chevron { transition: none; } }