/* The Social Media section's post page (docs/SOCIAL_MEDIA_SECTION.md §3).
 * The history wall itself is the Tournaments page's (tournaments.css). */

.sm-block { margin-top: var(--space-4); }
.sm-block__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 var(--space-2); }
.sm-sub { font-size: .95rem; font-weight: 700; margin: var(--space-3) 0 var(--space-2); }
.sm-hint { color: var(--text-secondary); font-size: .85rem; margin: 0 0 var(--space-2); }

/* Every card, in order: an Instagram card is 4:5 (1080 × 1350). */
.sm-cards {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 900px) { .sm-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.sm-card { margin: 0; }
.sm-card__open {
    display: block; width: 100%; padding: 0; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); cursor: zoom-in;
    aspect-ratio: 4 / 5;
}
.sm-card__open:hover, .sm-card__open:focus-visible { border-color: var(--accent-gold); }
.sm-card__open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-card figcaption {
    display: flex; justify-content: space-between; align-items: center;
    padding: .3rem .1rem; font-size: .85rem; color: var(--text-secondary);
}
.sm-card__save { font-weight: 600; }

/* The words exactly as they were written: lines and emoji kept. */
.sm-text {
    white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: var(--space-3); font-size: .9rem; line-height: 1.5;
}
.sm-tags { display: flex; gap: var(--space-3); padding: .35rem 0; border-bottom: 1px solid var(--border-subtle); }
.sm-tags__where { min-width: 5.5rem; font-weight: 700; color: var(--text-secondary); }
.sm-tags ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }

.sm-proof { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); display: grid; gap: .4rem; }
.sm-proof__claim { font-weight: 700; }
.sm-proof__value { color: var(--accent-gold); font-weight: 600; }

.sm-about { display: grid; grid-template-columns: max-content 1fr; gap: .35rem var(--space-3); margin: 0; }
.sm-about dt { font-weight: 700; color: var(--text-secondary); }
.sm-about dd { margin: 0; }

/* A card seen large. */
.sm-large {
    border: 0; padding: var(--space-2); background: rgb(14, 18, 28); border-radius: var(--radius-md);
    max-width: min(96vw, 900px); max-height: 96vh;
}
.sm-large::backdrop { background: rgba(0, 0, 0, .8); }
.sm-large img { display: block; max-width: 100%; max-height: calc(96vh - 4.5rem); margin: 0 auto; }
.sm-large__actions { display: flex; justify-content: center; gap: var(--space-2); padding-top: var(--space-2); }
.sm-large .btn--ghost { color: #f4f4f5; border-color: rgba(255, 255, 255, .45); }
/* Back on the first card and Next on the last are hidden (Tony, 2026-11-08): the button style must not show them again. */
.sm-large__actions [hidden] { display: none; }
.sm-large__actions { flex-wrap: wrap; align-items: center; }
.sm-large [data-social-large-where] { color: #f4f4f5; min-width: 3.5rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   The workshop and the Publish panel, made to look finished (Tony,
   2026-11-08: "make it look PROFESSIONAL"). Built on the site's own
   parts: .chip, .form-input, .btn — no look-alikes.
   ═══════════════════════════════════════════════════════════════ */

.sm-form { margin-top: var(--space-3); }
.sm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.sm-textarea { min-height: 0; resize: vertical; line-height: 1.45; }

/* Under each card: the accounts tagged on it, then one field to add more. */
.sm-card__tags { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.sm-card__change { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.sm-card__change-button { justify-self: start; }

.sm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-chip { gap: .25rem; padding: .25rem .3rem .25rem .7rem; font-size: .82rem; max-width: 100%; }
.sm-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-chip__form { display: contents; }
.sm-chip__remove {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.sm-chip__remove:hover, .sm-chip__remove:focus-visible {
    background: var(--accent-danger, #e5484d); color: #fff; outline: none;
}
.sm-chip__remove svg { width: .85rem; height: .85rem; }
/* The publish panel's list only shows: no cross, even padding. */
.sm-tag-list .sm-chip { padding: .25rem .7rem; }

/* One field and its button, joined, the same height. */
.sm-tag-add { display: flex; align-items: stretch; }
.sm-tag-add .form-input {
    flex: 1; min-width: 0; min-height: 2.5rem; padding: .5rem .8rem; font-size: .85rem;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.sm-tag-add__button {
    flex: none; width: 2.5rem; min-height: 2.5rem; padding: 0; box-shadow: none;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.sm-tag-add__button:hover { transform: none; box-shadow: none; }
.sm-tag-add__button svg { width: 1.1rem; height: 1.1rem; }

/* The Publish panel: four numbered steps, then the button with room above it. */
.sm-publish { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.sm-step {
    display: grid; gap: var(--space-2); padding: var(--space-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated);
}
.sm-step__title {
    display: flex; align-items: center; gap: .6rem; margin: 0;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.sm-step__number {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    border-radius: 999px; background: var(--accent-gold); color: #06080C; font-size: .75rem; letter-spacing: 0;
}
.sm-choices { display: grid; gap: .5rem; }
.sm-choice { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; cursor: pointer; line-height: 1.4; }
.sm-choice input[type="checkbox"], .sm-choice input[type="radio"] {
    width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--accent-gold);
}
.sm-choice__text { flex: 1 1 12rem; }
.sm-choice__text strong { margin-right: .35rem; }
.sm-choice--with-field .sm-choice__text { flex: 0 0 auto; }
.sm-date { width: auto; min-height: 2.5rem; padding: .45rem .7rem; }
.sm-word { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sm-word__label { font-weight: 600; }
.sm-word__input { width: 14rem; max-width: 100%; min-height: 2.5rem; padding: .45rem .8rem; text-transform: uppercase; letter-spacing: .08em; }
.sm-tag-list { display: grid; grid-template-columns: max-content 1fr; gap: .5rem var(--space-3); margin: 0; align-items: center; }
.sm-tag-list dt { font-weight: 600; color: var(--text-secondary); font-size: .85rem; }
.sm-tag-list dd { margin: 0; }
.sm-publish__actions { display: flex; justify-content: flex-end; padding-top: var(--space-1); }
.sm-publish__actions .btn svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
    .sm-tag-list { grid-template-columns: 1fr; }
    .sm-publish__actions .btn { width: 100%; }
}

/* ─── Comments (docs/SOCIAL_MEDIA_SECTION.md §7) ─────────────────────────── */
.sm-comments-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sm-comments-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sm-comments-filter .chip { text-decoration: none; color: var(--text-primary); }
.sm-comments-filter .chip--active { border-color: var(--accent-gold); box-shadow: inset 0 0 0 1px var(--accent-gold); font-weight: 700; }
.sm-comments-filter__post { font-size: .85rem; color: var(--text-secondary); }
.sm-comments-read { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sm-comments-read .sm-hint { margin: 0; }
.sm-comments-read form { margin: 0; }
.sm-thread__post { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--space-3); }
.sm-thread__post > a:first-child { font-weight: 700; }
.sm-thread__post .sm-hint { margin: 0; }
.sm-message { padding: .65rem .85rem; border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px); background: var(--bg-elevated); }
.sm-message + .sm-message { margin-top: .5rem; }
.sm-message--reply { margin-left: var(--space-4); }
.sm-message--ours { border-left: 3px solid var(--accent-gold); }
.sm-message__who { margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.sm-message__who .sm-hint { margin: 0; }
.sm-message__text { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.sm-reply { margin-top: var(--space-3); }
.sm-thread .dc-alert { margin-top: var(--space-3); }
@media (max-width: 640px) {
    .sm-message--reply { margin-left: var(--space-2); }
    .sm-comments-bar { align-items: stretch; }
    .sm-reply .sm-actions .btn { width: 100%; justify-content: center; }
}

/* ─── Videos, Stories and Reels (docs/SOCIAL_MEDIA_SECTION.md §5, part 6) ── */
.sm-card--video { max-width: 360px; }
.sm-video { display: block; width: 100%; max-height: 640px; aspect-ratio: 9 / 16; object-fit: contain;
    background: #06080C; border-radius: var(--radius-md, 10px); }
.sm-video--gone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    padding: var(--space-4); text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-default);
    background: var(--bg-elevated); }
.sm-video--gone p { margin: 0; font-size: .85rem; }
.sm-card__story { display: inline; margin: 0; }
.sm-linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent-gold); }
.sm-form .form-input { width: 100%; }
.sm-file { display: block; width: 100%; padding: .55rem .65rem; border: 1px dashed var(--border-default);
    border-radius: var(--radius-md, 10px); background: var(--bg-elevated); color: var(--text-secondary); font-size: .9rem; }
.sm-file::file-selector-button { margin-right: .75rem; padding: .45rem .9rem; border: 1px solid var(--border-default);
    border-radius: 999px; background: var(--bg-base, transparent); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; }
.sm-file::file-selector-button:hover { border-color: var(--accent-gold); }