.kp-media-row {
    --kp-media-row-preview-size: 48px;
    display: grid;
    grid-template-columns: var(--kp-media-row-preview-width, var(--kp-media-row-preview-size)) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kp-space-2);
    min-inline-size: 0;
    padding: var(--kp-space-1) var(--kp-space-2);
    border-radius: var(--kp-radius-md);
}

.kp-media-row.is-current {
    background: color-mix(in srgb, var(--kp-accent) 9%, var(--kp-color-surface));
}

.kp-media-row--video {
    --kp-media-row-preview-size: 54px;
    --kp-media-row-preview-width: 96px;
}

.kp-media-row__preview {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--kp-media-row-preview-width, var(--kp-media-row-preview-size));
    block-size: var(--kp-media-row-preview-size);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-md);
    background: var(--n-accent-soft, var(--kp-color-surface-muted));
    color: var(--n-accent-ink, var(--kp-accent));
}

button.kp-media-row__preview { cursor: pointer; }
.kp-media-row__preview img, .kp-media-row__glyph {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
}

.kp-media-row__preview img { object-fit: cover; }
.kp-media-row__glyph, .kp-media-row__glyph > span { display: grid; place-items: center; }
.kp-media-row__glyph { position: relative; }
.kp-audio-track .kp-media-row__preview img + .kp-media-row__glyph { background: #0007; color: #fff; }
.kp-media-row--video .kp-media-row__glyph > span {
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: #0009;
    color: #fff;
}
.kp-media-row__preview:not([aria-pressed="true"]) .kp-media-row__pause,
.kp-media-row__preview[aria-pressed="true"] .kp-media-row__play { display: none; }
.kp-media-row :is(a, button).kp-media-row__preview:hover,
.kp-media-row.is-current .kp-media-row__preview { border-color: var(--kp-accent); }
.kp-media-row :is(a, button, summary):focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }

.kp-media-row__meta { min-inline-size: 0; }
.kp-media-row__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--kp-color-text);
    font-size: var(--kp-text-md);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.kp-media-row__byline {
    display: flex;
    align-items: baseline;
    gap: var(--kp-space-2);
    margin-block-start: 2px;
    color: var(--kp-color-text-muted);
    font-size: var(--kp-text-sm);
}

.kp-media-row__byline a {
    min-inline-size: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-media-row__meta a:hover { text-decoration: underline; }
.kp-media-row__byline time { flex: none; font-variant-numeric: tabular-nums; }
.kp-media-row__byline--badges { flex-wrap: wrap; row-gap: 2px; }
.kp-media-row__badge { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.kp-media-row__badge svg { flex: none; }
.kp-media-row__badge--warning { color: var(--kp-color-warning); }
.kp-media-row noscript { grid-column: 1 / -1; }
.kp-media-row noscript:not(:has(audio)) { display: none; }
.kp-media-row noscript audio { inline-size: 100%; }

@media (max-width: 480px) {
    .kp-media-row { --kp-media-row-preview-size: 44px; }
    .kp-media-row--video { --kp-media-row-preview-size: 45px; --kp-media-row-preview-width: 80px; }
}