/* posts.css — the Social Layer's PUBLISHING surfaces (the publishing run): the posting page
   (.pn — Stage Door → "Post your doll") and the post view (.ps — /en/post/{sid}), both on the locked
   --bb-* candy system. Matches the reskinned doll pages' language: candy field body, mint VT323
   eyebrow + warm-white Zilla title + gold lead, the builder's HARD 2px box-shadow bevel stage under
   the doll, a flat mulberry panel with a hard border + HARD offset shadow (zero blur — anti-clunk),
   and the shared .bb-btn system (gold primary / berry secondary — never redefined here). NO blur
   anywhere in this file. */

/* Candy-pink pages (set via ViewData["BodyClass"] — the page-builder mechanism). */
.page-post-new,
.page-post-show { background: var(--bb-field); }

/* ═══ The posting page (.pn) ═══════════════════════════════════════════════ */

.pn { padding-block: var(--space-xl) var(--space-3xl); }

.pn__head { text-align: center; margin-block-end: var(--space-lg); }
.pn__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mint-dark);
  margin: 0;
}
.pn__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl));
  color: var(--bb-warmwhite);
  line-height: 1.05;
  margin: 0;
}
.pn__subtitle { color: var(--bb-gold); font-size: var(--fs-lg); margin-block: var(--space-sm) 0; }

.pn__layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  justify-content: center;
  max-inline-size: 900px;
  margin-inline: auto;
}

/* The doll on the builder's stage — a HARD 2px box-shadow bevel (not a border, so the content box
   stays exact), pixel-crisp art on the --bb-canvas fill. */
.pn__stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.pn__frame {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-canvas);
  border-radius: var(--bb-radius);
  box-shadow: -2px -2px 0 0 var(--bb-warmwhite), 2px 2px 0 0 var(--bb-frame);
}
.pn__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pn__doll-none {
  color: var(--bb-frame);
  opacity: 0.55;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pn__doll-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bb-warmwhite);
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

/* The mulberry backstage-card panel (the Finish page's language). */
.pn__panel {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* hard offset shadow — --bb-black's literal channels (rgba() can't consume a custom property) */
  box-shadow: 5px 5px 0 0 rgba(14, 10, 12, 0.45);
}

/* The gate's friendly block (and any publish error) — flat strip, hard state border, no glass. */
.pn__status {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-danger);
  border-radius: var(--bb-radius);
  background: var(--bb-berry-dark);
  color: var(--bb-warmwhite);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
}

.pn__field { display: flex; flex-direction: column; gap: var(--space-xs); }
.pn__label {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--bb-gold);
}
.pn__caption {
  inline-size: 100%;
  min-block-size: 84px;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  background: var(--bb-warmwhite);
  color: var(--bb-frame);
  font-family: var(--font-body);
  font-size: var(--fs-md);
}
.pn__caption::placeholder { color: var(--bb-panel); opacity: 0.75; }
.pn__caption:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.pn__counter {
  margin: 0;
  align-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-dimpink);
}
.pn__field-error { color: var(--bb-gold); font-size: var(--fs-sm); }

/* Tag chips — the ADMIN-CURATED set as tickable pills (hidden checkbox; :checked = gold). */
.pn__tags { display: flex; flex-direction: column; gap: var(--space-sm); }
.pn__tags-none { color: var(--bb-dimpink); font-size: var(--fs-md); margin: 0; }
.pn__tag-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pn__tag { display: inline-flex; }
.pn__tag-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pn__tag-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;                 /* WCAG 2.5.5 touch target */
  padding: var(--space-xs) var(--space-md);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  background: var(--bb-berry);
  color: var(--bb-warmwhite);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-sm);
  cursor: pointer;
  /* the site's hard raised bevel (0 blur) */
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.28), inset -2px -2px 0 0 rgba(14, 10, 12, 0.55);
  transition: filter var(--transition-fast);
}
.pn__tag-chip:hover { filter: brightness(1.12); }   /* the button hover law */
.pn__tag-input:checked + .pn__tag-chip {
  background: var(--bb-gold);
  color: var(--bb-frame);
  /* pressed-in reversed bevel — "gold = selected", the category-tab language */
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.32), inset -2px -2px 0 0 rgba(255, 255, 255, 0.5);
}
.pn__tag-input:focus-visible + .pn__tag-chip { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

.pn__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xs); }

/* ═══ The post view (.ps) ══════════════════════════════════════════════════ */

.ps { padding-block: var(--space-xl) var(--space-3xl); }

/* The just-posted celebration — flat mulberry strip, hard mint border (the auth alerts' language). */
.ps__welcome {
  max-inline-size: 900px;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--bb-mint);
  border-radius: var(--bb-radius);
  background: var(--bb-frame);
  color: var(--bb-warmwhite);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
}
.ps__welcome-star { color: var(--bb-gold); padding-inline-end: var(--space-xs); }

.ps__layout {
  display: grid;
  grid-template-columns: minmax(260px, 512px) minmax(240px, 1fr);
  gap: var(--space-xl);
  align-items: start;
  justify-content: center;
  max-inline-size: 900px;
  margin-inline: auto;
}

.ps__frame {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-canvas);
  border-radius: var(--bb-radius);
  box-shadow: -2px -2px 0 0 var(--bb-warmwhite), 2px 2px 0 0 var(--bb-frame);
}
.ps__doll {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.ps__panel {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* hard offset shadow — --bb-black's literal channels (rgba() can't consume a custom property) */
  box-shadow: 5px 5px 0 0 rgba(14, 10, 12, 0.45);
}

.ps__author { margin: 0; color: var(--bb-warmwhite); font-size: var(--fs-lg); }
.ps__author-label { color: var(--bb-dimpink); font-size: var(--fs-md); padding-inline-end: var(--space-xs); }
.ps__author-link {
  color: var(--bb-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps__author-link:hover { filter: brightness(1.12); color: var(--bb-gold); }
.ps__author-name { font-family: var(--font-heading); font-weight: 700; }
.ps__date { color: var(--bb-dimpink); font-family: var(--font-mono); font-size: var(--fs-md); padding-inline-start: var(--space-xs); }

.ps__caption { margin: 0; color: var(--bb-warmwhite); font-size: var(--fs-lg); overflow-wrap: anywhere; }

.ps__tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.ps__tag {
  padding: var(--space-xs) var(--space-sm);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  background: var(--bb-berry);
  color: var(--bb-warmwhite);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-sm);
}

.ps__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xs); }
.ps__actions form { margin: 0; }

/* Not found — friendly on the candy field, no box (the empty-state language). */
.ps__notfound {
  text-align: center;
  padding-block: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.ps__notfound-star {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: 0.3em;
  color: var(--bb-gold);
  margin: 0;
}
.ps__notfound-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-2xl));
  color: var(--bb-warmwhite);
  margin: 0;
}
.ps__notfound-lead { color: var(--bb-gold); font-size: var(--fs-lg); margin: 0; }

/* ═══ Responsive ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .pn__layout,
  .ps__layout { grid-template-columns: 1fr; }
  .pn__stage { max-inline-size: 280px; margin-inline: auto; }
}
@media (max-width: 576px) {
  .pn,
  .ps { padding-block: var(--space-lg) var(--space-2xl); }
  .pn__actions .bb-btn,
  .ps__actions .bb-btn { flex: 1 1 auto; }
}

/* ══ IMPRESSIONS on the post view (Impressions run): the reaction slot + the CHATTER thread ═══════
   The reaction bar itself lives in social.css (.rxbar — shared with the feed cards); posts.css owns
   only where it sits on this page + the flat comment thread. Everything follows the locked candy
   language: warm-white rows on hard 2px borders, hard offset shadows (ZERO blur — anti-clunk),
   VT323 accents, the shared .bb-btn system, 44px targets. */
.ps__reactions {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 2px solid rgba(255, 244, 238, 0.25); /* a quiet rule on the mulberry panel */
}

.psc {
  max-inline-size: 640px;
  margin-inline: auto;
  margin-block-start: var(--space-2xl);
}
.psc__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--bb-warmwhite);
  margin-block-end: var(--space-md);
}
.psc__count { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--bb-gold); }

.psc__error {
  background: var(--bb-frame);
  color: var(--bb-warmwhite);
  border: 2px solid var(--color-danger);
  border-radius: var(--bb-radius);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-md);
}

.psc__empty {
  color: var(--bb-warmwhite);
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  box-shadow: 4px 4px 0 0 rgba(14, 10, 12, 0.45); /* hard offset, zero blur */
  padding: var(--space-md);
  text-align: center;
}
.psc__empty span { color: var(--bb-gold); margin-inline-end: var(--space-xs); }

.psc__list { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-end: var(--space-md); }
.psc-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  box-shadow: 3px 3px 0 0 rgba(14, 10, 12, 0.45); /* hard offset, zero blur */
  padding: var(--space-sm) var(--space-md);
}
.psc-row__avatar {
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bb-frame);
  background: var(--bb-dimpink);
}
.psc-row__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; image-rendering: pixelated; }
.psc-row__main { flex: 1 1 auto; min-inline-size: 0; }
.psc-row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); margin: 0 0 2px; }
.psc-row__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-berry);
  text-decoration: none;
}
a.psc-row__handle:hover { filter: brightness(1.12); color: var(--bb-berry); }
.psc-row__date { font-size: var(--fs-xs); color: var(--bb-berry); opacity: 0.75; }
.psc-row__body { margin: 0; color: var(--bb-frame); overflow-wrap: anywhere; }

.psc-row__delete { flex: 0 0 auto; }
.psc-row__delete-btn {
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-warmwhite);
  color: var(--bb-berry);
  border: 2px solid var(--bb-berry);
  border-radius: var(--bb-radius);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
}
.psc-row__delete-btn:hover { filter: brightness(1.12); }
.psc-row__delete-btn:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

.psc__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}
.psc__pager-status { font-family: var(--font-mono); color: var(--bb-warmwhite); }

.psc__form { display: flex; flex-direction: column; gap: var(--space-sm); }
.psc__input {
  inline-size: 100%;
  background: var(--bb-warmwhite);
  color: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  resize: vertical;
  min-block-size: 64px;
}
.psc__input:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.psc__form .bb-btn { align-self: flex-end; }

.psc__signin { color: var(--bb-warmwhite); text-align: center; }
.psc__signin a { color: var(--bb-gold); text-decoration: underline; }
.psc__signin a:hover { filter: brightness(1.12); color: var(--bb-gold); }

@media (max-width: 576px) {
  .psc__form .bb-btn { align-self: stretch; }
}