/* community.css — M5's SHARED tester-community styles: the /leaving interstitial
   (LVI), the Composer (CPS), tombstones (FRM-R12), official/handle rendering
   (FRM-R15), and the attachment strip/picker (ATT). Surface-specific styles live
   in feedback.css (/feedback*), forum.css (/community*), and admin-feedback.css
   (/admin/feedback) — shared primitives live HERE so the surfaces can't drift.
   Token-bound only (F-R01). */

/* ============================================================================
   Leaving interstitial (LVI-R02/R03) — one decision, nothing competing
   ========================================================================== */

.lvi {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-page);
}

.lvi__main {
    flex: 1;
    width: min(38rem, 100% - 2 * var(--container-pad));
    margin-inline: auto;
    padding-block: var(--space-2xl);
}

/* The full destination, wrapped so "in full" and no-horizontal-scroll hold
   together (F-R15/PF-R03): break-anywhere, scheme+host emphasized. */
.lvi__url {
    overflow-wrap: anywhere;
    word-break: break-all;
    color: var(--text-secondary);
    background-color: var(--surface-raised);
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 3px solid var(--accent);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size--1);
}

.lvi__url strong {
    color: var(--text-primary);
}

/* ============================================================================
   Tombstones (FRM-R12, round 6) — muted text on surface-page with the divider
   treatment; themes express the role, never a hard-coded dashed border
   ========================================================================== */

.tomb {
    color: var(--text-secondary);
    background-color: var(--surface-page);
    border-block: 1px solid var(--border-hairline);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size--1);
}

/* ============================================================================
   Official rendering (FRM-R15, round 6) — ONE mechanism: the accent-tinted
   raised fill on the cell; never border-plus-fill
   ========================================================================== */

.official {
    background-color: color-mix(in oklab, var(--accent) 8%, var(--surface-raised));
}

.official__name {
    color: var(--accent);
    font-weight: 600;
}

.handle {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================================
   Composer (CPS §4.4b) — the one editor; states replace it, never disable it
   ========================================================================== */

.cps__body {
    resize: vertical;
    min-height: 10rem;
}

.cps__preview {
    background-color: var(--surface-raised);
    border-inline-start: 3px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
    margin-block-end: var(--space-md);
}

.cps__preview-label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    margin-block-end: var(--space-xs);
}

.cps__count,
.cps__quota,
.cps__refile {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.cps__rate {
    color: var(--text-primary);
    background-color: var(--surface-raised);
    border-inline-start: 3px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
}

.cps__replaced {
    color: var(--text-secondary);
    background-color: var(--surface-raised);
    padding: var(--space-sm) var(--space-md);
}

.cps__cancel {
    color: var(--text-secondary);
    align-self: center;
}

/* ============================================================================
   Attachment strip (ATT-R05/R09) — fixed tiles, expand-in-place, honest states
   ========================================================================== */

.att {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.att__item {
    display: flex;
    gap: var(--space-xs);
    align-items: baseline;
    min-width: 0;
}

/* Open tiles take the full row so the expanded image has the measure. */
.att__item--tile:has(details[open]) {
    flex-basis: 100%;
}

.att__thumb-wrap {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    line-height: 0;
}

.att__thumb-wrap::-webkit-details-marker {
    display: none;
}

/* Fixed 120px tiles — nothing reflows on load (F-R22's principle). */
.att__thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--border-hairline);
    border-radius: 2px;
    background-color: var(--surface-raised);
}

.att__full {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block-start: var(--space-xs);
    border: 1px solid var(--border-hairline);
}

.att__name {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.att__meta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.att__action {
    font-size: var(--font-size--1);
}

.att__chip {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    background-color: var(--surface-raised);
    padding: var(--space-2xs, 0.25rem) var(--space-sm);
    border-radius: 999px;
}

/* Staged-upload chips (the ATT-R08 enhanced picker, injected by site.js). */
.att--staged {
    margin-block-start: var(--space-xs);
}

.att__remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}