/* MOORSACHI · Study Circles (circles.js). House tokens only (--moor-*), the
   same VELVET-Nocturne vocabulary as onboard.css. Gold stays a hairline. */
.cx { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.cx-eyebrow { margin: 0 0 .6rem; font: 500 .68rem/1.4 var(--font-utility, "Barlow Condensed", sans-serif); letter-spacing: .28em; text-transform: uppercase; color: var(--moor-purple-bright, #B591E0); }
.cx-title { margin: 0 0 .75rem; font: 400 clamp(2rem, 6vw, 2.8rem)/1.05 var(--font-display, "Newsreader", Georgia, serif); color: var(--moor-ink-primary, #F0ECF5); }
.cx-h3 { margin: 1.25rem 0 .75rem; font: 400 1.35rem/1.25 var(--font-display, "Newsreader", Georgia, serif); color: var(--moor-ink-primary, #F0ECF5); }
.cx-small { margin: 0; font: 400 .9rem/1.5 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-soft, #8A82A0); }
.cx-small a, .cx-key a, .cx-post a { color: var(--moor-purple-bright, #B591E0); }
.cx-note { margin: 1rem 0; font: italic 400 1.05rem/1.5 var(--font-display, "Newsreader", Georgia, serif); color: var(--moor-ink-secondary, rgba(240,236,245,.85)); }
.cx-note:empty { display: none; }
.cx-note--warn { color: #E7B3B3; }
.cx-head { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--moor-gold-hairline, rgba(200,175,120,.4)); }
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.cx-row--end { justify-content: flex-end; margin: 0 0 1.5rem; }
.cx-row .cx-note { margin: 0; }

.cx-form { display: grid; gap: 1rem; }
.cx-field { display: grid; gap: .4rem; }
.cx-field span { font: 500 .66rem/1 var(--font-utility, "Barlow Condensed", sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--moor-ink-soft, #8A82A0); }
.cx-field small { font: 400 .82rem/1.4 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-soft, #8A82A0); }
.cx-field input, .cx-field textarea, .cx-select {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: .8rem .9rem; border-radius: 0;
  background: var(--moor-surface-card, #1a1525); color: var(--moor-ink-primary, #F0ECF5);
  border: 1px solid var(--moor-hairline, rgba(155,111,212,.18)); font: 400 1rem/1.4 var(--font-body, "Barlow", sans-serif); }
.cx-field textarea { resize: vertical; min-height: 9rem; }
.cx-select { width: auto; max-width: 100%; }
.cx-field input:focus-visible, .cx-field textarea:focus-visible, .cx-select:focus-visible, .cx-btn:focus-visible { outline: 2px solid var(--moor-purple-bright, #B591E0); outline-offset: 2px; }
.cx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cx-btn { justify-self: start; min-height: 48px; padding: 0 1.5rem; border: 0; cursor: pointer; background: var(--moor-purple, #9B6FD4); color: #09080E; font: 600 .78rem/1 var(--font-utility, "Barlow Condensed", sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.cx-btn:hover { background: var(--moor-purple-bright, #B591E0); }
.cx-btn:disabled { opacity: .6; cursor: progress; }
.cx-btn--ghost { background: none; color: var(--moor-purple-bright, #B591E0); border: 1px solid var(--moor-hairline, rgba(155,111,212,.4)); }
.cx-btn--ghost:hover { background: rgba(155,111,212,.12); }

.cx-card { margin: 0 0 2rem; padding: 1.75rem; background: var(--moor-surface-elevated, #100F18); border: 1px solid var(--moor-hairline, rgba(155,111,212,.18)); }
.cx-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .75rem; font: 400 1rem/1.55 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-secondary, rgba(240,236,245,.85)); }
.cx-steps strong { color: var(--moor-ink-primary, #F0ECF5); font-weight: 600; }
.cx-q { margin: .5rem 0 0; padding-left: 1.1rem; font-family: var(--font-display, "Newsreader", Georgia, serif); font-style: italic; }
.cx-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font: 400 .92rem/1.4 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-soft, #8A82A0); }
.cx-mine strong { color: var(--moor-ink-secondary, rgba(240,236,245,.85)); font-weight: 500; }

.cx-list { display: grid; gap: 0; }
.cx-post { padding: 2rem 0; border-top: 1px solid var(--moor-gold-hairline, rgba(200,175,120,.4)); }
.cx-post:first-child { border-top: 0; padding-top: 0; }
.cx-post__title { margin: 0 0 .5rem; font: 400 1.6rem/1.2 var(--font-display, "Newsreader", Georgia, serif); color: var(--moor-ink-primary, #F0ECF5); }
.cx-post__p { margin: .9rem 0 0; font: 400 1.05rem/1.65 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-secondary, rgba(240,236,245,.85)); white-space: pre-line; }

.cx-done__title { margin: 0 0 .75rem; font: 400 2.4rem/1 var(--font-display, "Newsreader", Georgia, serif); color: var(--moor-ink-primary, #F0ECF5); }
.cx-done p { font: 400 1.05rem/1.6 var(--font-body, "Barlow", sans-serif); color: var(--moor-ink-secondary, rgba(240,236,245,.85)); }
.cx-key { padding: 1rem; background: var(--moor-surface-card, #1a1525); border: 1px solid var(--moor-gold-hairline, rgba(200,175,120,.4)); word-break: break-all; }