/* ============================================================
   Mysterious Matters — postcard.css

   A refinement pass on the post card, not a restructure — same
   markup (.userbox > avatar, h3, role, trust, userstats), styled to
   feel considered rather than merely functional. The stat grid
   deliberately mirrors the admin dashboard's .dash-figures language
   (mono numbers, dim uppercase labels) so the same visual vocabulary
   shows up for members reading a thread as it does for you running
   the board — one design system, not two.

   Load after app.css.
   ============================================================ */

.post {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}

/* ---- The author column ---- */
.userbox {
  position: relative;
  padding: 26px 20px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 40%);
}

.userbox .avatar {
  width: 76px;
  height: 76px;
  border-width: 1.5px;
  box-shadow: 0 0 0 5px rgba(9, 12, 21, .5), 0 10px 26px rgba(0, 0, 0, .3);
}
/* Staff get a warmer ring, echoing the same amber/teal language as
   their role badge and the header avatar — recognisable at a glance,
   not a separate decoration invented just for this spot. */
.userbox:has(.role-admin) .avatar {
  border-color: rgba(232, 180, 90, .6);
  box-shadow: 0 0 0 5px rgba(9, 12, 21, .5), 0 0 26px rgba(232, 180, 90, .16);
}
.userbox:has(.role-moderator) .avatar {
  border-color: rgba(95, 208, 207, .6);
}

.userbox h3 {
  margin: 14px 0 5px;
  font-size: 18px;
  letter-spacing: -.01em;
}

.role {
  justify-content: center;
  min-height: 15px;
  color: var(--dim);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.trust {
  margin: 13px 0 15px;
  gap: 4px;
}
.trust i {
  width: 6px;
  height: 6px;
  transition: background .2s;
}
.trust i.on {
  box-shadow: 0 0 10px rgba(95, 208, 207, .55);
}

/* Stat grid: replaces the plain stacked <dl> with the same
   figure-and-label pairing already used on the admin dashboard. */
.userstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.userstats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
}
.userstats dt {
  order: 2;
  color: var(--dim);
  font: 700 7px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.userstats dd {
  order: 1;
  margin: 0;
  color: var(--amber2);
  font: 600 15px var(--serif);
}

/* ---- Post body rhythm ---- */
.postmeta { font-size: 10px; }
.prose { font-size: 16.5px; line-height: 1.75; }
.prose p + p { margin-top: 1.1em; }

/* A quiet accent marking the opening post distinct from the replies
   beneath it — a single hairline, not a banner. */
.post:first-of-type {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2), inset 0 2px 0 rgba(232, 180, 90, .3);
}

/* ============================================================
   Reactions on the post itself
   ============================================================ */
.postfoot {
  align-items: center;
  min-height: 46px;
  gap: 4px;
}

/* Give the row real presence even before anyone's reacted — visible
   at rest, not just on hover, so a fresh post doesn't read as an
   empty strip of nothing. */
.reactions {
  padding: 4px 2px;
}
.reaction {
  border: 1px solid var(--line);
}
.reaction:hover {
  transform: translateY(-1px);
}
.reaction.on {
  box-shadow: 0 0 0 1px rgba(95, 208, 207, .18);
}

@media (max-width: 780px) {
  .userbox { padding: 18px 16px; }
  .userbox .avatar { width: 60px; height: 60px; }
  .userstats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    border-top: 0;
    padding-top: 8px;
  }
  .userstats div { flex-direction: row; gap: 5px; padding: 0; }
  .userstats dt::after { content: ':'; }
}

/* ---- Share button toast ---- */
.share-toast {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(95, 208, 207, .14);
  color: var(--teal2);
  font: 700 10px var(--mono);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.share-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Reaction row placeholder ----
   Reserves the same visual weight as a real reaction chip, so an
   author looking at their own post sees a deliberate, quiet note
   rather than a blank strip that reads as broken. */
.reaction-empty {
  padding: 5px 10px;
  color: var(--dim);
  font: 400 12px var(--body);
  font-style: italic;
}

/* ============================================================
   Board index polish
   ============================================================ */

/* A category with an odd number of forums left one card alone in its
   row with an empty gap beside it (visible whenever a category has
   1, 3, 5… boards). Let that last odd card take the full row instead
   of sitting next to dead space. */
.glass-forum-card-grid > .glass-forum-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* The repeated "No discussions yet. Be the first." reads flat when it
   shows up four times on one screen. A real link turns a dead-end
   line into an actual invitation to post. */
.empty-latest {
  color: var(--dim);
  font-style: italic;
}
.empty-latest a {
  font-style: normal;
  color: var(--teal2);
  font-weight: 600;
}
.empty-latest a:hover { text-decoration: underline; }

/* Tighten the utility rail's module spacing slightly — three modules
   stacked with full padding each read a touch loose next to the denser
   forum cards beside them. */
.glass-utility-rail { gap: 12px; }
.glass-module .module-head { padding: 11px 14px; }
.online-members, .latest-post-stack { padding: 4px 10px; }
.rail-stats { padding: 4px 12px; }