/* ============================================================
 * Satya v26 — Circles view sheet (circles/index, my, show)
 * ============================================================
 * Linked (guarded) from the top of each v26 circles view. base.css +
 * button.css are already loaded by the chrome; this file adds ONLY the
 * few primitives base.css genuinely lacks for these three pages. Color
 * comes exclusively from theme tokens — no raw hex/rgb in any rule.
 *
 * Justification, class by class:
 *  .c-cover / .c-cover--hero / .c-cover__ph
 *      Cover-image media geometry (fixed ratio, object-fit, radius,
 *      centered placeholder icon). base.css has no media/thumbnail
 *      primitive — the same justified exception dashboard.css makes for
 *      product thumbnails. Reused by the index + my grids (--card height)
 *      and the show-page hero (--hero height).
 *  .c-hero-bar
 *      The circle identity bar that overlaps the bottom of the cover on
 *      the show page (avatar + name + meta + join/menu actions). A calm,
 *      in-flow overlap (negative margin) — genuinely show-specific
 *      composition with no base equivalent.
 *  .c-members / .c-member
 *      The compact 4-up member avatar grid inside the sidebar accordion.
 *  .c-acc__btn
 *      Full-width disclosure header for the Alpine sidebar accordion —
 *      base.css ships no accordion primitive; this adds the hover affordance.
 *  .c-ptype
 *      Post-type radio pill in the composer with a checked-state highlight
 *      (replaces the legacy Tailwind has-[:checked] utility). base.css has
 *      no segmented radio-pill.
 * ============================================================ */

/* ── Cover media ───────────────────────────────────────────── */
.c-cover {
  display: block;
  width: 100%;
  height: 8.5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
}
.c-cover--hero {
  height: 13rem;
  border-radius: var(--radius-lg);
}
.c-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--s-transition);
}
a.c-cover:hover img { transform: scale(1.03); }
.c-cover__ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  font-size: 3rem;
  opacity: 0.4;
}

@media (max-width: 640px) {
  .c-cover--hero { height: 10rem; }
}

/* ── Show-page identity bar (overlaps cover bottom) ─────────── */
.c-hero-bar {
  position: relative;
  z-index: 1;
  margin: calc(-1 * var(--s-space-6)) var(--s-space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--s-space-4);
  flex-wrap: wrap;
  padding: var(--s-space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.c-hero-bar__id { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .c-hero-bar { margin-inline: 0; }
}

/* ── Member avatar grid (sidebar accordion) ────────────────── */
.c-members {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-space-3);
}
.c-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-1);
  text-align: center;
  text-decoration: none;
  color: var(--text-tertiary);
  font-size: var(--s-text-xs);
}
.c-member:hover { color: var(--brand-primary); }

/* ── Accordion disclosure header ───────────────────────────── */
.c-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-3);
  padding: var(--s-space-3) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--s-text-sm);
  font-weight: 500;
  text-align: left;
  transition: color var(--s-transition);
}
.c-acc__btn:hover { color: var(--brand-primary); }

/* ── Composer post-type radio pill ─────────────────────────── */
.c-ptype {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: var(--s-text-sm);
  cursor: pointer;
  transition: background var(--s-transition), color var(--s-transition),
              border-color var(--s-transition);
}
.c-ptype:hover { background: var(--bg-secondary); }
.c-ptype:has(:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.c-ptype:focus-within {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ── Reused journey/plugin panels (show sidebar) ───────────────
 * The legacy journey-panel / journey-editor / plugin panels are included
 * verbatim inside .circle-accordion-panel; neutralize their nested legacy
 * hp2-card shell so they sit flat in the v26 accordion, and hide any panel
 * that buffered out empty. */
.circle-accordion-panel > .hp2-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}
.circle-accordion-panel:empty,
.circle-accordion-panel:not(:has(> *)) { display: none; }