/* pages/community/community.css — the page's layout: the zone stack, the
   cohort header, the seat card, the week bar and the closing note (decision
   0024; frames C1–C3 of the community canvas). Every surface is a kit
   primitive (.p-bx .p-soft .p-pill .p-tag .p-bar .p-btn .p-av .p-tanu) and
   every colour a --play-* token (decision 0008). The document shell
   (.introbody, .ihead, .iwrap) comes from pages/guide/base.css and its
   playful remap from pages/guide/skin-playful.css, both loaded on purpose —
   one set of rules for the public-page shell, no copies. The interactive
   zones (question, ladder, feed) are in zones.css. */

/* The display voice and the shell's token remap come from
   pages/guide/skin-playful.css, loaded before this sheet — nothing to
   restate here. */

/* ---- the zone stack ---- */
.cm{display:flex;flex-direction:column;gap:22px;padding-top:18px;color:var(--play-ink)}
.cm-zone{display:flex;flex-direction:column;gap:12px}
.cm-zone[hidden]{display:none}
.cm h1,.cm h2{margin:0;letter-spacing:0;line-height:1.1;font-weight:700}
.cm h1{font-size:30px;line-height:1.05}
.cm h2{font-size:26px}
.cm-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:600 19px/1 var(--play-script);color:var(--play-ink);
}
.cm-eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--play-ink)}
.cm-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.cm-head>div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.cm-lead{margin:4px 0 0;color:var(--play-mute);font-size:16px;line-height:1.45;max-width:62ch}
.cm-note{font-size:14px;color:var(--play-mute)}
.cm-note[hidden]{display:none}
/* Status lines: what a write did, in the tanuki's voice. A failure is the
   same ink, weighted — the link token is 4.43:1 on the light card and the
   sentence ("Oof, one more time!") already carries the state. */
.cm-status{font-size:15px;color:var(--play-ink);min-height:1.2em}
.cm-status:empty{display:none}
.cm-status.is-bad{font-weight:700}

/* ---- Z1 · the cohort header ---- */
.cm-hero{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cm-hero>div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.cm-days{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 22px;min-width:150px;text-align:center;
}
.cm-days b{font-size:44px;line-height:1}
.cm-days .p-pill{font-size:13px;margin-top:6px}
.cm-pulse{display:flex;gap:10px;flex-wrap:wrap}
.cm-stat{flex:1 1 150px;display:flex;flex-direction:column;gap:2px;padding:10px 14px}
.cm-stat b{font-size:26px;line-height:1.1}
.cm-stat .p-tag{white-space:normal}

/* ---- Z2 · the seat / the claim ---- */
.cm-seat{gap:12px;padding:16px}
.cm-seat-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cm-seat-row>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:180px}
.cm-seat-row .p-btn,.cm-seat-row .p-gbtn{flex:none}
.cm-seat-name{font-size:24px;line-height:1.1;overflow-wrap:anywhere}
.cm-seat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.cm-seat-pills .p-pill{font-size:14px;display:inline-flex;align-items:center;gap:4px}
.cm-face{width:52px;height:52px;box-shadow:0 4px 0 var(--play-edge)}
.cm-face.is-empty{border-style:dashed;border-color:var(--play-soft);background:var(--play-lock)}
.cm-seat-cta{display:flex;flex-direction:column;gap:8px}
.cm-seat .p-says{margin-top:2px}
.cm-seat .p-bub{font-size:16px;margin:0}
.cm-seat-body{margin:0;color:var(--play-mute);font-size:15px;max-width:52ch}

/* ---- Z3 · this week, together ---- */
.cm-week{gap:10px;padding:16px}
.cm-week-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cm-week-top .cm-note{margin-left:auto}
.cm-week-title{font-size:22px;line-height:1.15}
.cm-week-bar{position:relative}
.cm-week-bar.has-you{padding-top:18px}
/* display:block — the kit's bar is a <span>, and an inline box ignores its
   height; the trainer only ever used it as a flex item. */
.cm-week-bar .p-bar{display:block;height:18px}
.cm-you{
  position:absolute;top:-2px;transform:translateX(-50%);
  font-size:13px;white-space:nowrap;
}
.cm-week-foot{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Z7 · how this page works ---- */
.cm-how{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:16px}
.cm-how>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;font-size:15px}
.cm-how b{color:var(--play-ink)}
.cm-link{
  background:none;border:0;padding:6px 0;margin:-6px 0;font:inherit;cursor:pointer;
  color:var(--play-ink);text-decoration:underline;text-underline-offset:3px;
}
.cm-link:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:4px}

/* The kit's own rule keeps .p-tag off uppercase in Hindi (#60); nothing to
   repeat here. */

/* ---- widths ---- */
@media (min-width:600px){
  .cm{gap:30px;padding-top:30px}
  .cm h1{font-size:40px}
  .cm h2{font-size:30px}
}
@media (max-width:599px){
  /* The countdown card drops under the title rather than squeezing it into
     a five-line column beside a tall empty card (measured at 320). The
     section heads do the same: a title beside its tabs was one word a line. */
  .cm-hero{flex-direction:column;align-items:stretch}
  .cm-days{align-self:stretch}
  .cm-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:479px){
  .cm-seat-row .p-btn,.cm-seat-cta{align-self:stretch;width:100%}
  .cm-seat-cta .p-btn,.cm-seat-cta .p-gbtn{width:100%;box-sizing:border-box}
}