/* pages/community/zones.css — the three interactive zones: the question of
   the day, the ladder, the milestone feed (decision 0024; frames C1–C3).
   Layout and state only; surfaces are kit primitives and colours are tokens
   (decision 0008). Rows share one grammar (.cm-row) so a line, a seat and a
   milestone read as the same kind of thing. */

/* ---- rows ---- */
.cm-list{padding:0;overflow:hidden}
.cm-row{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--play-track);font-family:var(--play-display);
}
.cm-row:last-child{border-bottom:0}
.cm-row.is-mine{background:var(--play-paper)}
.cm-row.is-me{background:var(--play-accent);color:var(--play-accent-ink)}
.cm-row.is-me .cm-name{font-weight:700}
.cm-row.is-ghost{opacity:.75}
.cm-sk{height:12px;border-radius:999px;background:var(--play-track)}
.cm-rank{width:22px;flex:none;text-align:right}
.cm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-grow{flex:1}
.cm-xp{white-space:nowrap;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.cm-days-col{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.cm-when{color:var(--play-mute);font-size:13px;white-space:nowrap}
.cm-tag-you{font-size:12px;padding:0 8px;margin-left:6px}

/* An icon-only or icon-and-count control: the kit's pill, pressable. */
.cm-cheer{
  display:inline-flex;align-items:center;gap:5px;padding:1px 10px;font:inherit;font-size:14px;
  border:2px solid var(--play-soft);border-radius:999px;background:var(--play-card);color:var(--play-ink);
  cursor:pointer;line-height:1.4;min-height:26px;
}
.cm-cheer svg{width:16px;height:16px;flex:none}
.cm-cheer[aria-pressed="true"]{border-color:var(--play-ink);background:var(--play-accent-soft)}
.cm-cheer[aria-pressed="true"] svg{fill:currentColor}
.cm-cheer:hover{border-color:var(--play-ink)}
.cm-cheer:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cm-cheer[disabled]{cursor:default;opacity:.7}
.cm-row.is-me .cm-cheer{color:var(--play-accent-ink);border-color:var(--play-accent-ink);background:transparent}
.cm-ico{
  background:none;border:0;padding:6px;margin:-6px 0;font:inherit;color:var(--play-mute);cursor:pointer;
  display:inline-flex;align-items:center;border-radius:6px;
}
.cm-ico svg{width:14px;height:14px}
.cm-ico:hover{color:var(--play-ink)}
.cm-ico:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* ---- Z4 · the question of the day ---- */
.cm-qcard{gap:12px;padding:16px}
.cm-item{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cm-item>div{display:flex;flex-direction:column;gap:2px}
.cm-item .p-says{margin-left:auto}
.cm-item .p-bub{font-size:15px;max-width:260px;margin:0}
.cm-word{font-family:var(--jp);font-size:44px;line-height:1;font-weight:600}
.cm-reading{font-family:var(--jp);font-size:18px;color:var(--play-mute)}
.cm-meaning{font-size:20px}
.cm-compose{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-input{
  flex:1;min-width:200px;border:2px solid var(--play-ink);border-radius:999px;padding:7px 14px;
  background:var(--play-card);color:var(--play-ink);font:inherit;font-size:16px;box-sizing:border-box;
  font-family:var(--play-display-jp);
}
.cm-input:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cm-input[disabled]{border-style:dashed;border-color:var(--play-soft);background:var(--play-lock);color:var(--play-mute)}
.cm-count{min-width:52px;text-align:right}
.cm-count.is-over{color:var(--play-link)}
.cm-compose .p-btn,.cm-compose .p-gbtn{padding:5px 18px}
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cm-ans-row{align-items:flex-start;gap:12px}
.cm-ans-row .p-av{margin-top:3px}
.cm-ans-row>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}
.cm-ans-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cm-ans-who{font-size:15px;font-weight:700}
/* Inline SVG has no intrinsic size; every glyph names its box. */
.cm-caret,.cm-lock .p-ic svg{width:14px;height:14px}
/* The line itself, in the author's script: the display face for Latin, then
   the Japanese and Devanagari stacks underneath (#224's token). */
.cm-ans{font-family:var(--play-display-jp);font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.cm-ans[lang="hi"]{font-family:var(--devanagari);line-height:1.55}
.cm-ans-acts{display:flex;align-items:center;gap:10px;flex:none}
.cm-lock{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-lock .p-ic{border-style:dashed;border-color:var(--play-soft);color:var(--play-mute)}
.cm-lock>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.cm-lock b{color:var(--play-ink)}
.cm-report{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 14px 10px 50px;
  border-bottom:1px solid var(--play-track);background:var(--play-paper);font-size:14px;
}
.cm-report .p-gbtn{padding:2px 12px;font-size:14px;box-shadow:0 3px 0 var(--play-edge)}
.cm-report .p-gbtn:hover{box-shadow:0 2px 0 var(--play-edge)}
.cm-report .p-gbtn:active{box-shadow:none}
.cm-yday>summary{
  cursor:pointer;color:var(--play-mute);font-size:15px;list-style:none;
  display:flex;align-items:flex-start;gap:8px;padding:4px 0;
}
/* One inline run after the caret, so the sentence wraps as a sentence and
   the Japanese word never stands in a one-character column (seen at 320). */
.cm-yday-text{flex:1;min-width:0}
.cm-yday>summary .cm-caret{flex:none;margin-top:4px}
.cm-yday>summary::-webkit-details-marker{display:none}
.cm-yday>summary:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:6px}
.cm-yday>summary .cm-jp{color:var(--play-ink)}
.cm-yday[open]>summary .cm-caret{transform:rotate(180deg)}
.cm-caret{display:inline-block;transition:transform .15s ease}
.cm-jp{font-family:var(--jp)}
.cm-yday .cm-list{margin-top:8px}

/* ---- Z5 · the ladder ---- */
.cm-tabs{display:flex;gap:6px}
/* A kit pill is ~22px tall at this size; a control needs the 24px floor
   (#138), so the tabs take a minimum height and centre their label. */
.cm-tabs .p-pill{cursor:pointer;font:inherit;font-size:14px;min-height:26px;display:inline-flex;align-items:center;box-sizing:border-box}
.cm-tabs .p-pill:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cm-tiers{display:flex;align-items:center;justify-content:center;gap:0}
.cm-tierlabel{text-align:center}
.cm-fold{
  display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;box-sizing:border-box;
  border:2px dashed var(--play-soft);border-radius:12px;background:var(--play-paper);
  color:var(--play-ink);font:inherit;cursor:pointer;text-align:left;
}
.cm-fold:hover{border-style:solid}
.cm-fold[aria-expanded="true"]{border-style:solid;border-color:var(--play-ink);border-radius:12px 12px 0 0;border-bottom:0}
.cm-fold:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cm-fold .p-tag{flex:1}
.cm-fold .p-node{width:30px;height:30px;font-size:15px;border-width:2px}
.cm-ladder{border-radius:0 0 12px 12px}
.cm-ladder[hidden]{display:none}
.cm-line{display:flex;align-items:center;gap:8px;padding:4px 14px;border-top:1px solid var(--play-track)}
.cm-line::after{content:"";flex:1;border-top:2px dashed var(--play-accent)}
.cm-row.is-dropping{border-left:3px dashed var(--play-soft)}
.cm-drops{color:var(--play-mute)}
/* The reader's own dropping seat sits on the accent: mute ink there
   measured 1.05:1 dark / 1.90:1 light — invisible to the one learner the
   word is for (regression review). Same override the cheer already has. */
.cm-row.is-me .cm-drops{color:var(--play-accent-ink)}
.cm-gap{justify-content:center;letter-spacing:.3em;color:var(--play-mute)}
.cm-empty{padding:12px 14px;color:var(--play-mute);font-size:15px}
@media (max-width:479px){
  .cm-row .cm-days-col,.cm-row .cm-drops{display:none}
  /* A line's controls drop under it, so the text keeps the row's width. */
  .cm-ans-row{flex-wrap:wrap}
  .cm-ans-row>div{flex-basis:calc(100% - 38px)}
  .cm-ans-acts{width:100%;justify-content:flex-end}
}

/* ---- Z6 · milestones ---- */
.cm-kind{width:10px;height:10px;border-radius:99px;flex:none}
.cm-kind.is-streak{background:var(--play-accent)}
.cm-kind.is-reviews{background:var(--play-ink)}
.cm-kind.is-started{background:var(--play-link)}
.cm-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.cm-cheers{font-size:14px;display:inline-flex;align-items:center;gap:5px;padding:1px 10px}
.cm-cheers svg{width:16px;height:16px;fill:currentColor}