@layer components {
/* psw-sneak-peek — truncated body text with a "Show more" toggle.

   Truncation is performed in JS (psw-sneak-peek.js): the wrapper's
   text is replaced with "<truncated>…<button>" so the toggle sits
   inline at the end of the last visible line. When expanded with
   collapsible=true, a "Show less" button is appended below the full
   text. Toggle visuals come from .psw-btn--tertiary-link in psw-btn.css. */

.psw-sneak-peek {
    display: block;
    width: 100%;
    color: var(--color-content-medium);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-sm--line-height);
    letter-spacing: 0;
    word-break: break-word;
}

/* Render the toggle as true inline text so it shares the line-box with
   the surrounding body copy. .psw-btn defaults to inline-flex + Label/Medium
   (16/20 bold) — both would make the toggle taller than a pure-text line and
   visually larger than Paragraph/Small (14/20 regular). */
.psw-sneak-peek__toggle {
    display: inline;
    border: 0;
    font-size: var(--text-paragraph-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-sm--line-height);
    vertical-align: baseline;
    white-space: nowrap;
}

.psw-sneak-peek__toggle--more {
    padding-left: var(--space-1);   /* 4px gap between trailing ellipsis and button */
}

.psw-sneak-peek__toggle--less {
    display: block;
}
}