/* Research roundup posts (templates/blog/research_roundup.html,
   core/research_roundup.py). Loaded on blog post pages. Hand-written like
   resources.css, with rr- class names, so it needs no Tailwind build. Colours
   come from the theme variables, so dark mode follows html[data-theme="dark"]. */

/* Each paper's title links to the paper. */
.rr-title {
    color: inherit;
    text-decoration: none;
}

.rr-title:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* The summary sentence runs on into "Expand this abstract" and "Read the
   paper". The <details> is inline so its toggle sits in the line of text; an
   opened abstract is a block, so it drops below the line. Browsers that keep
   <details> a block put the toggle on its own line instead, which still works.
   .rr-toggle is the label in the first roundups (August 2026), which put the
   whole sentence inside <summary> with the label after it. */
.rr-line .rr-abstract,
.rr-line .rr-abstract > summary {
    display: inline;
}

/* A closed <details> still has an empty block for its content, which would
   break the line. Kept as its own rule: a browser that does not know
   ::details-content drops only this rule. */
.rr-line .rr-abstract:not([open])::details-content {
    display: none;
}

/* The gap before "Read the paper" hangs off the end of the toggle, so neither
   starts indented when the line wraps before it. */
.rr-line .rr-abstract > summary svg {
    margin-inline-end: 0.5rem;
}

.rr-line .rr-abstract > summary,
.rr-read,
.rr-toggle {
    color: var(--teal);
    font-weight: 500;
    white-space: nowrap;
}

.rr-line .rr-abstract > summary:hover,
.rr-read:hover,
.rr-abstract > summary:hover .rr-toggle {
    text-decoration: underline;
}

.rr-abstract > summary {
    cursor: pointer;
    list-style: none;
}

.rr-abstract > summary::-webkit-details-marker {
    display: none;
}

.rr-abstract > summary svg {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    transition: transform 0.2s;
}

.rr-abstract[open] > summary svg {
    transform: rotate(180deg);
}

/* The label says what a click will do. */
.rr-abstract .rr-hide,
.rr-abstract[open] .rr-expand {
    display: none;
}

.rr-abstract[open] .rr-hide {
    display: inline;
}

.rr-abstract > p {
    margin-block: 0.75rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--line);
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .rr-abstract > summary svg {
        transition: none;
    }
}