/*
 * Floating writeup viewer on the challenge-solving page.
 *
 * Colour comes only from theme tokens so light / dark / light-new / dark-new all
 * work without per-theme overrides. The one derived value (the shadow) uses
 * color-mix rather than a literal rgba so dark mode follows automatically.
 */

.df-wpv-open {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.df-wpv-open:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.df-wpv-open[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.comp-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.comp-hero-head .comp-hero-title {
    margin-bottom: 0;
}

.df-wpv {
    position: fixed;
    z-index: var(--df-wpv-z, 135);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 30%, transparent);
}

.df-wpv[hidden] {
    display: none;
}

.df-wpv-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    cursor: move;
    /* Without this, dragging the titlebar selects the hero text behind it. */
    user-select: none;
    touch-action: none;
}

.df-wpv-grip {
    width: 14px;
    height: 10px;
    flex: 0 0 auto;
    background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
    background-size: 5px 5px;
}

.df-wpv-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--ink);
}

.df-wpv-status {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.df-wpv-status[data-tone="danger"] {
    color: var(--negative);
}

.df-wpv-actions {
    display: flex;
    gap: var(--sp-1);
    flex: 0 0 auto;
}

.df-wpv-actions button {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-3);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.df-wpv-actions button:hover {
    border-color: var(--border);
    background: var(--surface);
    color: var(--ink);
}

.df-wpv-toolbar {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.df-wpv-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--text-sm);
}

.df-wpv-url-group {
    display: flex;
    gap: var(--sp-1);
    flex: 1 1 auto;
    min-width: 0;
}

.df-wpv-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--text-sm);
}

.df-wpv-load {
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-size: var(--text-sm);
    cursor: pointer;
}

.df-wpv-body {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--surface);
}

.df-wpv-content {
    padding: var(--sp-5);
    color: var(--ink-2);
}

.df-wpv-empty,
.df-wpv-fallback {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.df-wpv-fallback[hidden],
.df-wpv-empty[hidden] {
    display: none;
}

.df-wpv-linkcard {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.df-wpv-linkcard-host {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink);
}

.df-wpv-linkcard-url {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    word-break: break-all;
}

.df-wpv-linkcard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.df-wpv-notice {
    margin: var(--sp-3) var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    background: var(--warning-soft);
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.df-wpv-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    background: var(--surface);
}

/* Minimized: keep the geometry, collapse the chrome. */
.df-wpv[data-minimized="true"] .df-wpv-toolbar,
.df-wpv[data-minimized="true"] .df-wpv-body {
    display: none;
}

.df-wpv[data-minimized="true"] {
    height: auto !important;
}

.df-wpv[data-minimized="true"] .df-wpv-bar {
    border-bottom: 0;
}

/* Resize handles */
.df-wpv-rz {
    position: absolute;
    z-index: 2;
    user-select: none;
    touch-action: none;
}

.df-wpv-rz[data-wpv-resize="n"],
.df-wpv-rz[data-wpv-resize="s"] {
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
}

.df-wpv-rz[data-wpv-resize="n"] { top: -3px; }
.df-wpv-rz[data-wpv-resize="s"] { bottom: -3px; }

.df-wpv-rz[data-wpv-resize="e"],
.df-wpv-rz[data-wpv-resize="w"] {
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
}

.df-wpv-rz[data-wpv-resize="e"] { right: -3px; }
.df-wpv-rz[data-wpv-resize="w"] { left: -3px; }

.df-wpv-rz[data-wpv-resize="ne"],
.df-wpv-rz[data-wpv-resize="nw"],
.df-wpv-rz[data-wpv-resize="se"],
.df-wpv-rz[data-wpv-resize="sw"] {
    width: 12px;
    height: 12px;
}

.df-wpv-rz[data-wpv-resize="ne"] { top: -3px; right: -3px; cursor: nesw-resize; }
.df-wpv-rz[data-wpv-resize="nw"] { top: -3px; left: -3px; cursor: nwse-resize; }
.df-wpv-rz[data-wpv-resize="se"] { bottom: -3px; right: -3px; cursor: nwse-resize; }
.df-wpv-rz[data-wpv-resize="sw"] { bottom: -3px; left: -3px; cursor: nesw-resize; }

.df-wpv[data-minimized="true"] .df-wpv-rz {
    display: none;
}

@media (max-width: 720px) {
    .df-wpv {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
        border: 0;
    }

    .df-wpv-rz {
        display: none;
    }

    .df-wpv-bar {
        cursor: default;
        touch-action: auto;
    }

    .df-wpv-toolbar {
        flex-wrap: wrap;
    }
}