/*
 * The owner's "Which videos raise your score" view (js/owner_videos.js) and the
 * "Sign in with heart.id" card in the owner panel. Loaded only while HKI_SIGNIN
 * is on (lib/signin/owner_assets), so nothing here reaches the free page.
 *
 * Built from the site's tokens (tokens.css), so both themes follow. The cards
 * sit under the checklist in the score column (self_check.css keeps that
 * column's order); the folds sit inside the signal rows; the notes sit under
 * the list's panel, never inside it.
 */

/* the cards under the checklist: sign in, or connect the channel */

.owner-videos-card {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: .875rem var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.owner-videos-card-title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.owner-videos-card-text,
.owner-videos-card-note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

.owner-videos-card-note {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.owner-videos-card .btn {
    width: 100%;
    min-height: 2.75rem;
}

/* "Sign in with heart.id": heart.id's pill, 44px tall (WCAG 2.5.8) */
.owner-videos-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--heartid-text);
    text-decoration: none;
    background: var(--heartid-bg);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
}

.owner-videos-signin::before {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background:
        linear-gradient(var(--heartid-text), var(--heartid-text)) center / .4rem .4rem no-repeat,
        var(--heartid-mark);
    clip-path: circle(50%);
}

.owner-videos-signin:hover {
    color: var(--heartid-text);
    background: var(--heartid-bg-hover);
}

.owner-videos-signin:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* one-line notes in the owner panel: opened from heart.id, manage alerts, heart.id unreachable */
.owner-videos-line,
.owner-videos-opened {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
    text-align: center;
}

.owner-videos-opened {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.owner-videos-line a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}


/* the "Which videos" fold inside a signal row; spans the row's grid like the fix line */

.owner-videos-fold {
    grid-column: 1 / -1;
    min-width: 0;
}

.owner-videos-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
}

.owner-videos-toggle::after {
    content: "";
    width: .45rem;
    height: .45rem;
    margin-left: var(--space-1);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--speed) ease;
}

.owner-videos-toggle[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.owner-videos-toggle:hover {
    background: var(--surface-hover);
}

.owner-videos-toggle:focus-visible,
.owner-videos-more:focus-visible,
.owner-videos-retry:focus-visible,
.owner-video-edit:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.owner-videos-count {
    font-weight: 400;
    color: var(--text-muted);
}

.owner-videos-list {
    margin-top: var(--space-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.owner-videos-list[hidden] {
    display: none;
}

.owner-videos-summary {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.owner-videos-pill {
    display: inline-block;
    padding: .05rem .5rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
}

.owner-videos-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.owner-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.owner-video:last-child {
    border-bottom: 0;
}

.owner-video-title {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.owner-video-title mark {
    padding: 0 .1em;
    color: inherit;
    background: var(--mark-bg);
    border-radius: 2px;
}

.owner-video-meta {
    grid-column: 1;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    overflow-wrap: anywhere;
}

.owner-video-edit {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--brand);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.owner-videos-more,
.owner-videos-retry {
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--brand);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    cursor: pointer;
}

.owner-videos-more {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface-2);
}

.owner-videos-retry {
    min-height: 0;
    padding: 0;
}

.owner-videos-cap {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

/* On a phone, Edit in Studio goes under the title, with the date. */
@media (max-width: 30rem) {
    .owner-video {
        grid-template-columns: minmax(0, 1fr);
    }

    .owner-video-edit {
        grid-column: 1;
        grid-row: auto;
        min-height: 2.75rem;
    }
}


/* under the list's panel: whose eyes it is for, the label, and the one upgrade line */

.owner-videos-notes {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.owner-videos-notes.hide {
    display: none;
}

.owner-videos-notes p {
    margin: 0;
}

.owner-videos-private {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.owner-videos-source {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.owner-videos-upgrade {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.owner-videos-upgrade a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}