/* ═══════════════════════════════════════════════════════════════════════════
   community.css — the parent community, the public FAQ, and the admin FAQ.
   Session 8 · Phase 3 · Agent P7

   TWO NAMESPACES, BOTH NEW AND BOTH CHECKED BEFORE USE:
     cm-     the /community surfaces (feed, thread, composer, notifications)
     kfaq-   the question/answer blocks on /faq and /admin/faq

   `grep -rn "\.cm-\|\.kfaq-" static/*.css templates/*.html` returned nothing
   before this file existed. That check is the point of the prefix note at the
   top of landing.css — `lp-` was taken and cost a silent layout regression, so
   the rule now is: grep, then name.

   WHAT THIS FILE DOES NOT DO
     * It declares no :root block and re-points no shared token. Every colour is
       read from theme.css / app.css / type.css through var(). Nothing here can
       leak into a practice page or a marketing page.
     * It contains no element selector — every rule is a class in one of the two
       prefixes. base.html links this through {% block head_extra %}, which is
       BEFORE app.css, polish.css and desktop.css; an element rule here would be
       silently beaten by the accessibility layer, and a class rule cannot be
       because none of those three sheets knows these names.
     * It adds no radius, no shadow and no font size of its own. Geometry is
       Agent P3's two radii (10px small chrome / 12px cards) and three depths;
       type is Agent P2's --font-* scale at weights 400 and 600 ONLY. A third
       weight synthesises in the browser and stops matching Geist.

   SPACING is the 24 / 32 / 48 macro rhythm, with 8 / 12 / 16 inside a component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ SHARED PAGE FURNITURE (community) ═══════════════════════════════════ */

.cm-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  font-family: var(--font-geist);
  color: var(--k-ink, #1A1128);
}
.cm-page *, .cm-page *::before, .cm-page *::after { box-sizing: border-box; min-width: 0; }

.cm-head { margin-bottom: 24px; }
.cm-eyebrow {
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-blue-text, #2f5fa8);
  display: flex;
  align-items: center;
  gap: 7px;
}
.cm-h1 {
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 10px 0 0;
  color: var(--k-ink, #1A1128);
}
.cm-lede {
  font-size: var(--font-sm);
  line-height: var(--lh-body);
  color: var(--k-muted, #6B6580);
  margin: 8px 0 0;
  max-width: 62ch;
}

.cm-card {
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 12px;
  box-shadow: var(--shadow-d1);
  padding: 24px;
}
.cm-card + .cm-card { margin-top: 16px; }

/* ══ NOTIFICATIONS — in-app, and only ever in-app ════════════════════════ */

.cm-notes {
  background: var(--ka-blue-50, #EEF4FD);
  border: 1px solid var(--ka-blue-100, #D9E7FB);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.cm-notes__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--k-blue-deep, #1e4478);
  margin: 0 0 10px;
}
.cm-notes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-notes__item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--k-blue-text, #2f5fa8);
  text-decoration: none;
  font-weight: 600;
}
.cm-notes__item a:hover { text-decoration: underline; }
.cm-notes__kind {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--k-muted, #6B6580);
}

/* ══ THE FEED ════════════════════════════════════════════════════════════ */

.cm-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.cm-thread {
  display: block;
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 12px;
  box-shadow: var(--shadow-d1);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cm-thread:hover, .cm-thread:focus-visible {
  border-color: var(--k-blue, #4f91ee);
  box-shadow: var(--shadow-d2);
}
.cm-thread--pinned { border-color: var(--ka-blue-100, #D9E7FB); background: var(--k-tint, #F8F7FC); }

.cm-thread__title {
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: var(--k-ink, #1A1128);
  /* Titles are user text and can be one 140-character word. */
  overflow-wrap: anywhere;
}
.cm-thread__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: var(--font-xs);
  color: var(--k-muted, #6B6580);
}
.cm-thread__who { font-weight: 600; color: var(--k-ink, #1A1128); }

/* ══ TAGS ════════════════════════════════════════════════════════════════ */

.cm-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-xs);
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 10px;
  background: var(--k-tint, #F8F7FC);
  color: var(--k-muted, #6B6580);
}
/* All three fills carry text, so all three are the measured text weights:
   #2f5fa8 6.32:1, #1e6b3a 6.52:1, #8a6100 5.54:1 on their tints. */
.cm-tag--pinned   { background: var(--ka-blue-100, #D9E7FB);  color: var(--k-blue-deep, #1e4478); }
.cm-tag--answered { background: var(--ka-green-50, #E6F6EC);  color: var(--ka-green, #1e6b3a); }
/* Q4: the staff badge was the only purple left on this surface and it was
   hardcoded, so the token demotion could not reach it. teal-700 is 11.03:1 on
   white and 9.89:1 on teal-50, the tint it actually sits on. */
.cm-tag--staff    { background: var(--ka-purple-50, #EBF4F8); color: var(--teal-700, #00415A); }
.cm-tag--removed  { background: var(--ka-amber-50, #FFF5E8);  color: var(--ka-amber, #8a6100); }

/* ══ THREAD DETAIL ═══════════════════════════════════════════════════════ */

.cm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--k-blue-text, #2f5fa8);
  text-decoration: none;
  margin-bottom: 16px;
}
.cm-back:hover { text-decoration: underline; }

.cm-post__title {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

/* ⚑ THIS RULE IS PART OF THE XSS STORY, not just typography.
   Posted text keeps its line breaks because the BOX preserves whitespace, not
   because anything converted "\n" into a <br>. There is no nl2br filter and no
   |safe in the templates, so the body reaches the page as escaped text and
   stays escaped. If a later change replaces pre-wrap with a markup-producing
   filter, it must not use |safe to do it. */
.cm-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--font-body);
  line-height: var(--lh-body);
  color: var(--k-ink, #1A1128);
  margin: 0;
}
.cm-body--sm { font-size: var(--font-sm); }

.cm-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: var(--font-xs);
  color: var(--k-muted, #6B6580);
  margin-bottom: 12px;
}
.cm-byline__who { font-weight: 600; color: var(--k-ink, #1A1128); }

.cm-replies { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.cm-replies--nested {
  margin: 12px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--ka-line, #E6E2EF);
  gap: 12px;
}
.cm-reply {
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 12px;
  box-shadow: var(--shadow-d1);
  padding: 18px 20px;
}
.cm-reply--staff {
  border-color: var(--ka-purple-100, #E4D6FC);
  background: var(--ka-purple-50, #F3ECFE);
}
.cm-reply__foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ══ FORMS ═══════════════════════════════════════════════════════════════ */

.cm-form { display: grid; gap: 12px; }
.cm-label {
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-muted, #6B6580);
  display: block;
  margin-bottom: 6px;
}
.cm-input, .cm-textarea, .cm-select {
  width: 100%;
  font-family: var(--font-geist);
  font-size: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--k-ink, #1A1128);
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 10px;
  padding: 11px 13px;
}
.cm-textarea { min-height: 132px; resize: vertical; }
.cm-input:focus, .cm-textarea:focus, .cm-select:focus {
  outline: 2px solid var(--k-blue-text, #2f5fa8);
  outline-offset: 1px;
  border-color: var(--k-blue-text, #2f5fa8);
}

/* The identity notice. It sits INSIDE the composer, above the fields, because
   "you are about to be seen as X" is information you need while typing — not on
   a policy page you read once at signup. */
.cm-identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ka-amber-50, #FFF5E8);
  border: 1px solid #F0DFC2;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--font-sm);
  line-height: var(--lh-body);
  color: #6b4a00;
}
.cm-identity strong { font-weight: 600; }
.cm-identity__ico { color: var(--ka-amber, #8a6100); flex: 0 0 auto; margin-top: 2px; }

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-geist);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
/* #2f5fa8 under white is 6.32:1. #4f91ee is 3.17 and must never be a fill under
   a label — see the note at the top of theme.css. */
.cm-btn--primary { background: var(--k-blue-text, #2f5fa8); color: #fff; }
.cm-btn--primary:hover { background: var(--k-blue-deep, #1e4478); }
.cm-btn--quiet {
  background: var(--k-card, #fff);
  border-color: var(--ka-line, #E6E2EF);
  color: var(--k-ink, #1A1128);
}
.cm-btn--quiet:hover { border-color: var(--k-blue, #4f91ee); }
.cm-btn--sm { font-size: var(--font-xs); padding: 7px 12px; }
/* "Publish to /faq" carries `disabled` while the answer is blank and looked
   fully live without this — a primary-blue button that silently does nothing.
   The server refuses the publish either way; this is the affordance catching up
   with the rule. */
.cm-btn:disabled, .cm-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cm-btn:disabled:hover, .cm-btn[disabled]:hover { background: var(--k-blue-text, #2f5fa8); }
.cm-btn--danger { background: var(--k-card, #fff); border-color: #E9C4C8; color: var(--ka-coral-ink, #a02630); }
.cm-btn--danger:hover { background: var(--ka-coral-50, #FDEAEC); }

.cm-alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--font-sm);
  line-height: var(--lh-body);
  margin-bottom: 16px;
}
.cm-alert--bad  { background: var(--ka-coral-50, #FDEAEC); color: var(--ka-coral-ink, #a02630); }
.cm-alert--good { background: var(--ka-green-50, #E6F6EC); color: var(--ka-green, #1e6b3a); }

.cm-empty {
  background: var(--k-card, #fff);
  border: 1px dashed var(--ka-line, #E6E2EF);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  color: var(--k-muted, #6B6580);
  font-size: var(--font-sm);
  line-height: var(--lh-body);
}

.cm-modtools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ka-line, #E6E2EF);
}
.cm-modtools__label {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--k-muted, #6B6580);
  margin-right: 4px;
}
.cm-inline { display: inline; margin: 0; }

/* The child-session refusal page. */
.cm-locked { max-width: 560px; margin: 48px auto; padding: 0 20px; text-align: center; font-family: var(--font-geist); }
.cm-locked__ico { color: var(--k-blue-text, #2f5fa8); margin-bottom: 16px; }

/* ══ FAQ — public and admin share these Q/A blocks ═══════════════════════ */

.kfaq-groups { display: grid; gap: 48px; }
.kfaq-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.kfaq-group__ico { color: var(--k-cerulean, #005F82); flex: 0 0 auto; }
.kfaq-group__name {
  font-family: var(--font-geist);
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
  color: var(--k-ink, #1A1128);
}
.kfaq-list { display: grid; gap: 12px; }

.kfaq-item {
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 12px;
  box-shadow: var(--shadow-d1);
  padding: 20px 24px;
}
.kfaq-q {
  font-family: var(--font-geist);
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: var(--k-ink, #1A1128);
}
.kfaq-a {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-geist);
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--k-muted, #6B6580);
  margin: 12px 0 0;
}

/* ══ ADMIN FAQ ═══════════════════════════════════════════════════════════ */

.kfaq-adm { display: grid; gap: 10px; }
.kfaq-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  background: var(--k-card, #fff);
  border: 1px solid var(--ka-line, #E6E2EF);
  border-radius: 12px;
  box-shadow: var(--shadow-d1);
  padding: 16px 18px;
}
/* An unanswered entry is drawn as unfinished work, not as a neutral row. It is
   the only state on this screen the operator has to act on. */
.kfaq-row--empty { border-style: dashed; background: var(--ka-amber-50, #FFF5E8); }
.kfaq-row__q {
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}
.kfaq-row__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: var(--font-xs);
  color: var(--k-muted, #6B6580);
}
.kfaq-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.kfaq-stat__n {
  display: block;
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--k-ink, #1A1128);
}
.kfaq-stat__l {
  display: block;
  margin-top: 6px;
  font-size: var(--font-xs);
  color: var(--k-muted, #6B6580);
}

@media (max-width: 640px) {
  .cm-page { padding: 24px 16px 48px; }
  .cm-card { padding: 20px 16px; }
  .cm-thread, .cm-reply { padding: 16px; }
  .kfaq-row { grid-template-columns: minmax(0, 1fr); }
  .kfaq-item { padding: 16px; }
  .cm-replies--nested { padding-left: 12px; }
}