/*
 * Ripple — the share that moves nothing — and the composer its button opens.
 *
 * Three blocks, in the order a viewer meets them:
 *
 *   * the ripple control, the reaction control's twin: the same metrics, the same two shapes, so
 *     a card's footer reads as one row of quiet acts whichever of them this viewer may press;
 *
 *   * the ripple composer — the modal the unrippled button opens, the same bottom-line
 *     experience as the post composer: the rippled original previewed quietly, a field for the
 *     sharer's optional words about the ripple, and the Ripple control that places the pointer;
 *
 *   * the share-card, a ripple on a timeline: the original content sits beneath a quiet header
 *     naming who rippled it — and, when the sharer wrote words, the words stand between the
 *     header and the original, because they are the sharer's, not the original's.
 */

/* ---- The ripple control ------------------------------------------------------------------------ */

.ripple,
.ripple--static {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background-color: transparent;
    color: var(--colour-ink-quiet);
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}

.ripple-form {
    margin: 0;
}

button.ripple {
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--easing),
        border-color var(--duration-fast) var(--easing),
        color var(--duration-fast) var(--easing);
}

button.ripple:hover {
    background-color: var(--colour-surface-sunken);
    border-color: var(--colour-border);
    color: var(--colour-ink);
}

/* Pressed state: colour alone, never a change of size — the control is pressed twice in a row all
   the time, and a growing button would move everything after it on the row. */
.ripple--active {
    color: var(--colour-primary);
}

.ripple__icon {
    flex: none;
}

.ripple__count {
    font-variant-numeric: tabular-nums;
}

/* The static form is text, so it should not look like a target at all. */
.ripple--static {
    padding-inline: 0;
}

/* ---- The ripple composer ------------------------------------------------------------------------ */

/*
 * The modal the unrippled ripple button opens. The frame is the house modal (`.modal`,
 * `.modal__panel`); these rules style what stands inside it.
 */

/* The rippled original, previewed quietly: a sunken box with the author's name above a short
   excerpt. The preview is a reminder of what is being shared, never a second card — no media,
   no actions, nothing that could be mistaken for the thing itself. */
.ripple-composer__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    background-color: var(--colour-surface-sunken);
}

.ripple-composer__preview-author {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-ink);
}

.ripple-composer__preview-excerpt {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--colour-ink-quiet);

    /* Two lines are enough to recognise the original; the full thing stays where it is. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The sharer's words. The field is optional — an empty composer places the pointer without any —
   so the affordance is a calm textarea with room for a thought, not a post's body. */
.ripple-composer__note {
    margin-top: var(--space-3);
    width: 100%;
    min-height: 5rem;
    resize: vertical;
}

/* The counter beneath the field reads the same as the post composer's: quiet digits, and loud
   only when the ceiling is reached. */
.ripple-composer__counter {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ripple-composer__counter--over {
    color: var(--colour-danger);
    font-weight: var(--weight-medium);
}

/* ---- The share-card ------------------------------------------------------------------------------ */

/*
 * The share-card: a ripple on a timeline. The original content sits beneath a quiet header naming
 * who rippled it — the card wears somebody else's content unchanged, because nothing moved.
 */
.relay-card {
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-lg);
    background-color: var(--colour-surface);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relay-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
}

.relay-card__icon {
    flex: none;
    color: var(--colour-primary);
}

.relay-card__by {
    font-weight: var(--weight-medium);
}

.relay-card__remove {
    margin: 0 0 0 auto;
}

.relay-card__remove-button {
    font-size: var(--text-sm);
}

/* The sharer's optional words about the ripple: the timeline's ink at the body's measure, standing
   between the header and the quoted original — unmistakably the sharer's voice, not the
   original's. */
.relay-card__note {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--colour-ink);
    overflow-wrap: anywhere;
}

/* A rippled wisp: the quote, then the author, drawn the way the viewer's modal draws them. */
.relay-card__wisp {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relay-card__wisp-body {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-body);
}

.relay-card__wisp-author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.relay-card__wisp-name {
    font-weight: var(--weight-medium);
    color: var(--colour-ink);
}

.relay-card__wisp-handle {
    color: var(--colour-ink-quiet);
}

.relay-card__wisp-mark {
    margin-inline-start: auto;
    color: var(--colour-ink-quiet);
}

/* A rippled Blink: the author's identity above, the video beneath — controls only, never autoplay. */
.relay-card__blink {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relay-card__blink-author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.relay-card__blink-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
    color: var(--colour-ink);
}

.relay-card__blink-handle {
    color: var(--colour-ink-quiet);
}

.relay-card__blink-video {
    width: 100%;
    max-height: 24rem;
    border-radius: var(--radius-md);
    background-color: var(--colour-surface-sunken);
}

.relay-card__blink-meta {
    margin: 0;
}