/* The dialog stays inside the plugin root and inherits its theme, including in the top layer. */
:is(#sustt-root, .sustt-root) dialog.sustt-match-details {
    box-sizing: border-box; width: min(760px, calc(100% - 32px)); max-width: 100%;
    max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto;
    border: 1px solid var(--sustt-border-main, #c7ccd1); border-radius: 8px;
    background: var(--sustt-bg-soft, #fff); color: var(--sustt-text-main, #20252a);
    box-shadow: 0 16px 64px #0006; font: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0;
}
.sustt-match-details::backdrop { background: #0009; }
.sustt-match-details.is-fallback { position: fixed; inset: 16px; z-index: 100000; box-shadow: 0 0 0 100vmax #0009; }
.sustt-match-details *, .sustt-match-details *::before, .sustt-match-details *::after { box-sizing: border-box; letter-spacing: 0; }
.sustt-match-details .md-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--sustt-border-main); background: var(--sustt-bg-soft); }
:is(#sustt-root, .sustt-root) .sustt-match-details h2 { flex: 1; margin: 0; color: inherit; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.sustt-match-details h3 { margin: 0 0 10px; color: inherit; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
:is(#sustt-root, .sustt-root) .sustt-match-details button { display: inline-grid; place-items: center; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--sustt-border-main); border-radius: 6px; background: var(--sustt-bg-input, #f4f5f6); color: var(--sustt-text-main); font: inherit; cursor: pointer; }
:is(#sustt-root, .sustt-root) .sustt-match-details .md-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.sustt-match-details .md-close .dashicons { width: 24px; height: 24px; font-size: 24px; line-height: 1; }
.sustt-match-details :is(a, button):focus-visible { outline: 2px solid var(--sustt-focus, #007c78); outline-offset: 3px; }
.sustt-match-details .md-status { margin: 0; padding: 12px 20px 0; color: var(--sustt-text-soft, #58616b); }
.sustt-match-details .md-content { padding: 16px 20px 24px; min-height: 100px; }
.sustt-match-details .md-summary { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--sustt-border-main); }
.sustt-match-details .md-team { font-weight: 700; overflow-wrap: anywhere; }
.sustt-match-details .md-team:first-child { text-align: right; }
.sustt-match-details .md-total { text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.sustt-match-details .md-lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--sustt-border-main); }
.sustt-match-details .md-lineups ul { list-style: none; margin: 0; padding: 0; }
.sustt-match-details .md-lineups li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 4px 0; }
.sustt-match-details .md-ranking { font-size: 12px; color: var(--sustt-text-soft); }
:is(#sustt-root, .sustt-root) .sustt-match-details a.md-player { color: var(--sustt-text-main); text-decoration: underline; text-underline-offset: 3px; }
.sustt-match-details .md-player { overflow-wrap: anywhere; }
.sustt-match-details .md-games-heading { padding-top: 20px; }
.sustt-match-details .md-games { list-style: none; margin: 0; padding: 0; counter-reset: md-game; }
.sustt-match-details .md-game { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--sustt-border-main); counter-increment: md-game; }
.sustt-match-details .md-game::before { content: counter(md-game); float: left; width: 22px; color: var(--sustt-text-soft); font-size: 12px; }
.sustt-match-details .md-game-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 12px; align-items: center; margin-left: 26px; }
.sustt-match-details .md-home { text-align: right; }
.sustt-match-details .is-winner { font-weight: 700; }
:is(#sustt-root, .sustt-root) .sustt-match-details .is-winner .md-player { color: var(--sustt-sport-positive, #10528f); }
:is(#sustt-root, .sustt-root) .sustt-match-details .is-loser .md-player { color: var(--sustt-sport-negative, #8c3809); }
.sustt-match-details .md-game-score { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sustt-match-details .md-set-detail { margin: 8px 0 0 26px; font-size: 12px; color: var(--sustt-text-soft); overflow-wrap: anywhere; }
.sustt-match-details .md-set-detail:focus-visible { outline: 2px solid var(--sustt-focus, #007c78); outline-offset: 3px; }
.sustt-match-details div.md-set-detail { overflow-x: auto; }
:is(#sustt-root, .sustt-root) .sustt-match-details .md-sets { width: auto; max-width: 100%; margin: 0; border-collapse: collapse; border: 0; background: transparent; color: var(--sustt-text-main); font-size: 13px; line-height: 1.5; }
.sustt-match-details .md-sets caption { caption-side: top; padding: 0 0 4px; text-align: left; color: var(--sustt-text-soft); font-size: 12px; }
:is(#sustt-root, .sustt-root) .sustt-match-details .md-sets :is(tbody, tr) { background: transparent; color: inherit; }
:is(#sustt-root, .sustt-root) .sustt-match-details .md-sets td { min-width: 48px; padding: 5px 7px; border: 1px solid var(--sustt-border-main); background: var(--sustt-bg-input); color: inherit; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sustt-match-details .md-set-number { display: block; font-size: 10px; color: var(--sustt-text-soft); }
.sustt-match-details .md-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sustt-match-details .md-notice, .sustt-match-details .md-empty { margin: 16px 0 0; color: var(--sustt-text-soft); }
@media (max-width: 500px) {
    :is(#sustt-root, .sustt-root) dialog.sustt-match-details { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
    .sustt-match-details .md-header { padding: 10px 12px; }
    .sustt-match-details .md-status { padding: 12px 12px 0; }
    .sustt-match-details .md-content { padding: 16px 12px; }
    .sustt-match-details .md-summary { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 8px; }
    .sustt-match-details .md-lineups { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .sustt-match-details .md-game-row { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr); gap: 8px; }
}