/* community.css: spoiler safe comments, chapter rooms, the weekly club banner and chapter bubbles */

/* chapter row holds the chapter button and its discussion bubble */
.chapter_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }

/* discussion bubble next to each chapter */
.chapter_talk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 56px; padding: 0 12px; background: var(--panel_raised); color: var(--muted); border: 1px solid transparent; border-radius: var(--radius_small); font: inherit; font-size: 13px; cursor: pointer; }

/* bubble hover outline */
.chapter_talk:hover { border-color: var(--seal); color: var(--paper); }

/* keyboard focus ring for the bubble */
.chapter_talk:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* bubble for chapters that already have talk */
.chapter_talk.has_talk { color: var(--paper); background: var(--tint_lavender); }

/* the number inside the bubble */
.chapter_talk_count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* weekly club banner at the top of the Comments tab */
.club_banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius_small); background: linear-gradient(100deg, var(--tint_rose_strong), var(--tint_rose) 70%); border: 0; }

/* banner text */
.club_banner p { margin: 0; font-size: 14px; line-height: 1.5; }

/* red pill that says "This week's club" */
.club_badge { justify-self: start; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--seal); color: var(--color_on_accent); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* header shown inside a chapter room */
.club_room_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius_small); background: var(--panel_raised); border-left: 3px solid var(--seal); }

/* room title */
.club_room_head h3 { margin: 2px 0 0; font-family: var(--font_display); font-size: 20px; font-weight: 400; }

/* small label above the room title */
.club_kicker { margin: 0; color: var(--seal); font-size: 13px; font-weight: 700; }

/* comment count under the room title */
.club_sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* note that comments from later chapters are hidden */
.spoiler_note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius_small); background: var(--tint_honey); border: 1px dashed transparent; color: var(--muted); font-size: 14px; }

/* note text takes the free space */
.spoiler_note p { margin: 0; flex: 1; }

/* revealed state looks warmer as a reminder */
.spoiler_note.is_revealed { border-style: solid; border-color: var(--color_honey); }

/* shield symbol */
.spoiler_icon { font-size: 18px; line-height: 1; }

/* gate shown before entering a room past your progress */
.spoiler_gate { display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; border-radius: var(--radius_large); background: var(--panel_raised); border: 0; }

/* gate heading */
.spoiler_gate h4 { margin: 4px 0 0; font-size: 18px; }

/* gate explanation */
.spoiler_gate p { margin: 0; max-width: 46ch; color: var(--muted); }

/* gate buttons */
.spoiler_gate_row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* bigger shield on the gate */
.spoiler_gate .spoiler_icon { font-size: 30px; }

/* chapter chip on each comment, opens that chapter's room */
.cmt_chapter_chip { padding: 1px 8px; border-radius: 999px; border: 0; background: var(--tint_periwinkle); color: var(--color_periwinkle); font: inherit; font-size: 12px; cursor: pointer; }

/* chip hover */
.cmt_chapter_chip:hover { border-color: var(--seal); color: var(--paper); }

/* a spoiler shown after "Show anyway" gets a warning edge */
.cmt_item.is_spoiler { box-shadow: inset 3px 0 0 var(--color_honey); }

/* chapter picker in the composer */
.cmt_chapter_pick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }

/* the dropdown itself */
.cmt_chapter_pick select { background: var(--panel_high); color: var(--paper); border: 1px solid transparent; border-radius: var(--radius_small); padding: 4px 8px; font: inherit; font-size: 13px; max-width: 220px; }

/* fixed chapter label inside rooms */
.cmt_room_tag { color: var(--muted); font-size: 12px; }

/* composer row wraps on narrow screens */
.cmt_composer_row { flex-wrap: wrap; }

/* discuss button area in paged reading modes */
.reader_discuss_slot { display: flex; justify-content: center; padding: 8px 0 0; }

/* the discuss button itself */
.reader_discuss_btn { white-space: nowrap; }

/* phone layout tweaks */
@media (max-width: 600px) {
  /* banner stacks */
  .club_banner { grid-template-columns: 1fr; }
  /* room header stacks */
  .club_room_head { flex-direction: column; align-items: flex-start; }
  /* spoiler note stacks */
  .spoiler_note { flex-wrap: wrap; }
  /* the hint wastes space on phones */
  .cmt_hint { display: none; }
  /* picker fills the row */
  .cmt_chapter_pick { flex: 1 1 100%; }
  /* dropdown can use the width */
  .cmt_chapter_pick select { max-width: none; flex: 1; }
  /* bubble narrower */
  .chapter_talk { min-width: 46px; padding: 0 8px; }
/* end of phone tweaks */
}