/* pc-category-cards.css: feed post cards show their category as a tinted top band with a chip (STAGING-ADAPTER CAT-CARDS;
 * Waqas 2026-10-31, Product Owner, picked Direction A of the category-card mockups).
 *
 * Five categories, one colour each: Intro (brand blue), Win (green), Question (violet), Showcase (magenta),
 * Ask for help (teal). No orange / amber here: the new-member welcome card (pc-welcome-card.js) stays the only warm,
 * festive card. Any other post type (tutorial, discussion, show_tell, welcome...) gets no band and keeps today's look.
 *
 * Markup (pc-ahsen-wire.js cardHtml, CAT-CARDS W1-W3): the card gets `pc-cat pc-cat-<key>` and, as its FIRST child,
 *   <div class="pc-cat-band"><span class="pc-cat-chip"><svg aria-hidden>…</svg>Label</span>
 *     <span class="pc-cat-motif" aria-hidden="true"><svg>…</svg></span></div>
 * The band bleeds to the card's edges (the card keeps its 20px padding, so the post text is unchanged). The card is NOT
 * overflow:hidden (comment-thread menus must never be clipped): the band clips its own motif and rounds its own top
 * corners to fit inside the 1px border.
 *
 * Pinned cards (.pc-pinned) are the slim announcement banner and keep exactly that look: no band. A pin / unpin only
 * toggles the class in place, so the band is always rendered and simply hidden while pinned.
 *
 * Theme: dark is the default (the site's :root), [data-theme="light"] overrides. Chip text is >= 4.5:1 against the chip
 * in both themes (pinned by the test suite). Nothing here animates, so reduced motion needs no special case.
 * Every rule is under `html:root .post-card.pc-cat`, so it wins over feed.html's `.post-card` and pc.css's `!important`
 * padding whatever order the stylesheets load in. */

/* ── Category tokens (dark default) ── */
html:root .post-card.pc-cat-intro    { --pc-cat-t: #9fd6f0; --pc-cat-b1: rgba(42,147,193,.30); --pc-cat-b2: rgba(42,147,193,.08); --pc-cat-chip: rgba(42,147,193,.24); }
html:root .post-card.pc-cat-win      { --pc-cat-t: #8fe3b6; --pc-cat-b1: rgba(34,160,98,.30);  --pc-cat-b2: rgba(34,160,98,.08);  --pc-cat-chip: rgba(34,160,98,.24); }
html:root .post-card.pc-cat-question { --pc-cat-t: #cdbdf8; --pc-cat-b1: rgba(124,92,214,.30); --pc-cat-b2: rgba(124,92,214,.08); --pc-cat-chip: rgba(124,92,214,.24); }
html:root .post-card.pc-cat-showcase { --pc-cat-t: #f5aad2; --pc-cat-b1: rgba(200,64,140,.30); --pc-cat-b2: rgba(200,64,140,.08); --pc-cat-chip: rgba(200,64,140,.24); }
html:root .post-card.pc-cat-help     { --pc-cat-t: #8fe0e6; --pc-cat-b1: rgba(15,150,160,.30); --pc-cat-b2: rgba(15,150,160,.08); --pc-cat-chip: rgba(15,150,160,.24); }

/* ── Light theme ── */
html:root[data-theme="light"] .post-card.pc-cat-intro    { --pc-cat-t: #1a6a94; --pc-cat-b1: rgba(42,147,193,.24); --pc-cat-b2: rgba(42,147,193,.07); --pc-cat-chip: rgba(255,255,255,.86); }
html:root[data-theme="light"] .post-card.pc-cat-win      { --pc-cat-t: #166534; --pc-cat-b1: rgba(34,160,98,.24);  --pc-cat-b2: rgba(34,160,98,.07);  --pc-cat-chip: rgba(255,255,255,.86); }
html:root[data-theme="light"] .post-card.pc-cat-question { --pc-cat-t: #5b21b6; --pc-cat-b1: rgba(124,92,214,.24); --pc-cat-b2: rgba(124,92,214,.07); --pc-cat-chip: rgba(255,255,255,.86); }
html:root[data-theme="light"] .post-card.pc-cat-showcase { --pc-cat-t: #9d1f68; --pc-cat-b1: rgba(200,64,140,.24); --pc-cat-b2: rgba(200,64,140,.07); --pc-cat-chip: rgba(255,255,255,.86); }
html:root[data-theme="light"] .post-card.pc-cat-help     { --pc-cat-t: #0b6a73; --pc-cat-b1: rgba(15,150,160,.24); --pc-cat-b2: rgba(15,150,160,.07); --pc-cat-chip: rgba(255,255,255,.86); }

/* ── The card: the band takes the top padding ── */
html:root .post-card.pc-cat:not(.pc-pinned) { padding-top: 0 !important; }
html:root .post-card.pc-cat.pc-pinned .pc-cat-band { display: none; }

/* ── The band ── */
html:root .post-card.pc-cat .pc-cat-band {
  position: relative; display: flex; align-items: center; height: 36px; padding: 0 14px;
  margin: 0 -20px 16px;
  background: linear-gradient(100deg, var(--pc-cat-b1) 0%, var(--pc-cat-b2) 100%);
  border-bottom: 1px solid var(--pc-cat-b1);
  border-radius: calc(var(--radius-lg, 16px) - 1px) calc(var(--radius-lg, 16px) - 1px) 0 0;
  overflow: hidden;
}
html:root .post-card.pc-cat .pc-cat-chip {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px 4px 9px; border-radius: 99px;
  background: var(--pc-cat-chip); color: var(--pc-cat-t);
  font: 600 12.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: normal; text-transform: none;
  white-space: nowrap;
}
html:root .post-card.pc-cat .pc-cat-chip svg { flex: none; display: block; width: 14px; height: 14px; }
html:root .post-card.pc-cat .pc-cat-motif {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none;
  color: var(--pc-cat-t); opacity: .38;
}
html:root[data-theme="light"] .post-card.pc-cat .pc-cat-motif { opacity: .5; }
html:root .post-card.pc-cat .pc-cat-motif svg { display: block; width: 100%; height: 100%; }

/* ── Phone: a slimmer band, the chip a touch smaller ── */
@media (max-width: 480px) {
  html:root .post-card.pc-cat .pc-cat-band { height: 32px; padding: 0 12px; margin-bottom: 14px; }
  html:root .post-card.pc-cat .pc-cat-chip { font-size: 12px; padding: 3px 10px 3px 8px; }
  html:root .post-card.pc-cat .pc-cat-motif { width: 40%; }
}