/* MundaApp — the feed tells you who is talking.
 *
 * A marketplace and a community share one page, so the page has to say which
 * is which before a word is read: a coloured role badge on the author, a
 * category strip that separates official notice from dealer stock from
 * farmer experience, and one line under each post that states what the words
 * are. Advice stays with the desks that carry it; a price list never reads
 * like a guideline.
 */

/* ------------------------------------------------------------------ badges */
.fi-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px;
  border-radius: 999px;
  font-size: 9px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: 1px;
  margin-left: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fi-badge svg { width: 9px; height: 9px; }

.fi-badge--official { background: #EEF2F8; color: #1F3A5F; border-color: #D3DEEC; }
.fi-badge--dealer   { background: #FBF1DA; color: #7E5510; border-color: #EBD6A6; }
.fi-badge--expert   { background: #E9F4EC; color: #0B5C39; border-color: #CFE6D6; }
.fi-badge--farmer   { background: #F7F1E6; color: #6B4A2A; border-color: #E9DCC6; }

/* a hairline in the badge colour along the top of the card, so the column can
   be scanned without reading a single name */
.post[data-fi-role="official"] { box-shadow: inset 0 3px 0 -1px #1F3A5F; }
.post[data-fi-role="dealer"]   { box-shadow: inset 0 3px 0 -1px #C99B2E; }
.post[data-fi-role="expert"]   { box-shadow: inset 0 3px 0 -1px #12915A; }
.post[data-fi-role="farmer"]   { box-shadow: inset 0 3px 0 -1px #B98A4E; }

/* ------------------------------------------------------------------- follow */
.fi-follow {
  margin-left: auto;
  flex: none;
  height: 26px; padding: 0 11px;
  border-radius: 999px;
  border: 1px solid #D6E4D8;
  background: #FFFDF8;
  color: #0B5C39;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
}
.fi-follow.on { background: #0B5C39; border-color: #08472C; color: #FFFDF6; }
.fi-follow:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- the note */
.fi-note {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 0; padding: 8px 12px;
  border-radius: 10px;
  font-size: 10.5px; line-height: 1.45;
  background: #FAF7EE; border: 1px solid #EDE4D0;
  color: #5E6B62;
}
.fi-note b { font-weight: 750; }
.fi-note--dealer   { background: #FDF7E8; border-color: #EFE0BC; color: #6E5518; }
.fi-note--official { background: #F2F5FA; border-color: #DCE5F0; color: #2B4A6D; }
.fi-note--expert   { background: #F1F8F3; border-color: #D8E9DD; color: #2A6046; }
.fi-note .fi-report {
  margin-left: auto;
  border: 0; background: none; padding: 0;
  font-size: 10px; font-weight: 650;
  color: #7B877E; text-decoration: underline;
  text-underline-offset: 2px;
}
.fi-note .fi-report:active { color: #8A3B26; }

/* ------------------------------------------------------------------- tabs */
.feed-tabs.fi-tabs {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.feed-tabs.fi-tabs::-webkit-scrollbar { display: none; }
.fi-tab {
  flex: 0 0 auto;
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #E4DAC2;
  background: #FFFDF8;
  color: #4F5F55;
  font-size: 11.5px; font-weight: 650; letter-spacing: .005em;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.fi-tab svg { width: 13px; height: 13px; opacity: .8; }
.fi-tab.on {
  background: linear-gradient(180deg, #12915A, #0A5334);
  border-color: #08472C;
  color: #FFFDF6;
  box-shadow: 0 8px 14px -14px rgba(8, 44, 27, .95);
}
.fi-tab.on svg { opacity: 1; }
.fi-tab .fi-n {
  font-size: 9.5px; font-weight: 700;
  opacity: .7; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- empty state */
.fi-empty {
  margin: 10px 0 4px; padding: 18px 16px;
  border-radius: 16px;
  border: 1px dashed #DCD2BA;
  background: #FFFDF8;
  text-align: center;
}
.fi-empty b {
  display: block; font-family: var(--display, Georgia, serif);
  font-size: 14.5px; color: #24382C; margin-bottom: 3px;
}
.fi-empty span { font-size: 11.5px; line-height: 1.5; color: #75816F; }

/* ---------------------------------------------------- layout, made rigid ---
   Three faults came from the card header being a flex row with more children
   than it could hold: the name collapsed to one letter per line, the chips
   stacked into a column, and the last card slid under the bottom bar. These
   rules make the header wrap instead of squeeze, keep a chip inside its card,
   and give the feed enough room at the foot. */

.post-head .who { min-width: 0; flex: 1 1 auto; }
.post-head .nm { flex-wrap: wrap; row-gap: 3px; min-width: 0; }
.post-head .nm a {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
.post-head .nm > * { flex: 0 0 auto; }
.post-head .nm a { flex: 0 1 auto; }

/* the badge now sits under the name, never inside it */
.fi-badge { margin-left: 0; margin-top: 2px; align-self: flex-start; }

/* a context chip never leaves its card, never stretches */
.why-chip { max-width: 100%; align-self: flex-start; }

/* the category strip must never let a price card print through it */
.feed-tabs.fi-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper, #F6F3EC);
  padding-top: 4px;
  padding-bottom: 7px;
}

/* the last card clears the bottom bar */
#view:has(article.post) { padding-bottom: calc(var(--tabbar-h, 62px) + 40px); }

/* nothing may bleed out of a card, ever */
#view article.post { overflow: hidden; }
.post-head { row-gap: 2px; }

/* the guard needs a visible failure state, not a silent one: if a badge or note
   is ever cloned by another layer, the duplicate hides itself until repaired */
.fi-badge[data-fi-extra], .fi-note[data-fi-extra] { display: none !important; }