.card-root {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    background: rgba(40, 30, 20, 0.55);
    backdrop-filter: blur(2px);
    padding: 2rem 1rem;
    overflow-y: auto;
}
.card-root[aria-hidden="false"] { display: block; }

.card-wrap {
    max-width: 42rem;
    margin: 0 auto;
    position: relative;
    animation: cardRise .32s cubic-bezier(.2, .7, .2, 1);
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(30px) rotate(-1deg); }
    to   { opacity: 1; transform: translateY(0)   rotate(0); }
}

.card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.25rem 2rem;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-serif);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.65;
}
.card .salutation {
    font-style: italic;
    font-size: 1.55rem;
    margin: 0 0 1rem;
}
.card .body {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0 0 1.5rem;
}
.card .signoff {
    font-style: italic;
    font-size: 1.35rem;
    text-align: right;
    margin: 0;
}
.card .meta {
    margin: 1.25rem 0 0;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
    font-size: .72rem;
    color: var(--ink-soft);
    text-align: right;
}

.card-attachments {
    margin-top: 1.25rem;
    display: grid;
    gap: .5rem;
    /* Auto-fit so a single item fills the row; minmax floor keeps grids
       from packing tiny thumbnails. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
}
/* If the group skews portrait, prefer narrower columns so the grid doesn't
   explode vertically. */
.card-attachments.tall {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Single-item mode: center the one cell and let it grow to its natural
   aspect, capped so a tall portrait doesn't dominate the card. */
.card-attachments.single {
    display: flex;
    justify-content: center;
}
.card-attachments.single .att {
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 70vh;
}
.card-attachments .att {
    position: relative;
    aspect-ratio: 4 / 3; /* JS overrides via style.aspectRatio when known */
    background: var(--envelope);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    min-width: 0;
}
.card-attachments .att.portrait {
    /* Cap the height of portrait items in the grid to keep rows balanced. */
    max-height: 60vh;
}
.card-attachments .att img,
.card-attachments .att video {
    width: 100%; height: 100%;
    /* `contain` so vertical-form media is never center-cropped when the
       cell aspect doesn't match perfectly (e.g., fallback 4:3 when width
       or height wasn't recorded). The envelope color shows as a gentle
       letterbox in that case. */
    object-fit: contain;
    display: block;
}
.card-attachments .att-muted-hint {
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    background: rgba(30, 22, 14, .55);
    color: white;
    font-size: .85rem;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 999px;
    pointer-events: none;
    user-select: none;
}
.card-attachments .att.pdf {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--ink);
    text-align: center;
    padding: .75rem;
}
.card-attachments .att.pdf a { text-decoration: none; }

.card-controls {
    position: sticky;
    top: .5rem;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: .5rem;
    z-index: 1;
}
.card-controls .btn {
    background: var(--paper);
    border-color: rgba(107, 81, 55, 0.3);
    box-shadow: var(--shadow-sm);
}
.card-controls .btn:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 520px) {
    .card { font-size: 1.15rem; padding: 1.5rem; }
    .card .salutation { font-size: 1.3rem; }
    .card .signoff    { font-size: 1.15rem; }
    .card-root { padding: .5rem; }
}