/* devlog/static/css/devlog.css */

/* The before image is clipped to the divider; `--pos` is set on the frame by devlog.js. */
.devlog-compare-frame { touch-action: pan-y; cursor: ew-resize; }
.devlog-compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.devlog-compare-divider {
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: rgb(var(--primary));
    outline: none;
}
.devlog-compare-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--primary));
    color: rgb(var(--on-primary, 255 255 255));
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
.devlog-compare-divider:focus-visible .devlog-compare-knob {
    box-shadow: 0 0 0 3px rgb(var(--bg-card)), 0 0 0 5px rgb(var(--primary));
}

.devlog-version-badge { color: rgb(var(--primary)); background: rgb(var(--primary) / 0.1); }

/* Feature headings inside an entry: an accent rule on the left, tight display type. */
.devlog-body h2.devlog-heading, .devlog-body h3.devlog-heading {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-left: 0.875rem;
    border-left: 4px solid rgb(var(--primary));
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: rgb(var(--text-body));
}
.devlog-body h2.devlog-heading { font-size: 1.25rem; }
.devlog-body h3.devlog-heading { font-size: 1.0625rem; border-left-width: 3px; }
.devlog-body > :first-child { margin-top: 0; }
.devlog-body p { line-height: 1.75; }
@media (min-width: 640px) {
    .devlog-body h2.devlog-heading { font-size: 1.5rem; }
    .devlog-body h3.devlog-heading { font-size: 1.1875rem; }
}

/* Copy link: the link glyph pops into a check and "Copied" fades in beside it. */
.devlog-copy { position: relative; margin-left: 0.375rem; vertical-align: middle; opacity: 0.55; transition: opacity 150ms; }
.devlog-heading:hover .devlog-copy, .devlog-copy:focus-visible, .devlog-copy.is-copied,
[data-devlog-entry] > header:hover .devlog-copy { opacity: 1; }
.devlog-copy.is-copied [data-devlog-copy-icon] { color: rgb(var(--status-green, 22 163 74)); animation: devlog-pop 320ms cubic-bezier(.34, 1.56, .64, 1); }
.devlog-copied {
    position: absolute;
    left: calc(100% + 0.25rem);
    top: 50%;
    transform: translate(-0.25rem, -50%);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgb(var(--text-subtle));
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms, transform 200ms;
}
.devlog-copy.is-copied .devlog-copied { opacity: 1; transform: translate(0, -50%); }
@keyframes devlog-pop {
    0% { transform: scale(0.4) rotate(-20deg); }
    100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .devlog-copy.is-copied [data-devlog-copy-icon] { animation: none; }
    .devlog-copied { transition: none; }
}