/*
 * Clamp + "Show more". Long text (tracebacks, notes, prompts) is never
 * a 40-line table cell: clamp to 3 lines, and put the full text in a
 * <details> the reader can open.
 *
 *   <p class="clamp">…long text…</p>
 *
 *   <details class="more">
 *     <summary class="more__summary">Show more</summary>
 *     <pre class="more__body">…full text…</pre>
 *   </details>
 *
 * `.clamp--2` / `.clamp--5` change the line count.
 */
.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.clamp--1 { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
.clamp--2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp--5 { -webkit-line-clamp: 5; line-clamp: 5; }

.more { min-width: 0; }
.more__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    cursor: pointer;
    color: var(--color-primary-hi);
    font-size: var(--fs-xs);
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.more__summary::-webkit-details-marker { display: none; }
.more__summary::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--t-fast);
    margin-right: var(--sp-half);
}
.more[open] > .more__summary::before { transform: rotate(45deg); }
.more__body {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow: auto;
}
/* When the summary sits under a clamped preview, hide the preview once open. */
.more[open] ~ .clamp, .more[open] > .clamp { display: none; }