/* =====================================================================
   Community — joining and the guidelines (static/community/cm-join.css)

   Slice D. Loaded by templates/community/join.html and guidelines.html in
   {% block cm_head %} with ?v={{ cm_v }}, after community.css.

   Same rules as community.css: tokens from ctg-ui.css only, logical
   properties, every selector under `.cm` and every class `cm-join-`.
   Primitives (panels, notices, form errors, counters) come from
   community.css; this file only adds what these two pages need:

     Join       .cm-join-form > .cm-join-summary, .cm-join-step (a .cm-panel
                per fieldset), .cm-join-error, .cm-join-optional,
                .cm-join-note (shown when the practice switch is on),
                .cm-join-privacy, .cm-join-accept, .cm-join-submit ;
                .cm-join-card (the one-panel states: anonymous, minor, member)
     Guidelines .cm-join-doc > .cm-join-docmeta, .cm-join-short, .cm-join-toc,
                article.cm-join-prose > section.cm-join-sec (h2 + .cm-join-num
                + .cm-join-anchor), dl.cm-join-rules, ol.cm-join-steps,
                .cm-join-callout, footer.cm-join-docfoot
   ===================================================================== */

/* ---------- 1. Join form ------------------------------------------------ */
.cm .cm-join-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cm .cm-join-step { padding: 20px 22px 18px; }
.cm .cm-join-step .field:last-child { margin-block-end: 0; }
/* The two selects share a row on wide screens; stacked on a phone, the row's
   own gap spaces them, so the fields inside drop their bottom margin. */
.cm .cm-join-step .fieldrow { margin-block-end: 18px; }
.cm .cm-join-step .fieldrow > .field { margin-block-end: 0; }
.cm .cm-join-step .form-control,
.cm .cm-join-step .form-select { width: 100%; }
.cm .cm-join-date { max-width: 240px; }
.cm .cm-join-optional {
  margin-inline-start: 4px; font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: lowercase;
}
.cm .cm-join-hello { margin-block-start: 0; }

.cm .cm-join-summary { margin: 0; }
.cm .cm-join-summary:focus { outline: none; }
.cm .cm-join-summary p { margin: 0; }
.cm .cm-join-summary p + p { margin-block-start: 4px; font-weight: 500; }
.cm .cm-join-summary__title { font-weight: 750; }

.cm .cm-join-error {
  display: flex; align-items: baseline; gap: 6px;
  margin: 6px 0 0; font-size: 13px; font-weight: 650; line-height: 1.45; color: var(--rose);
}
.cm .cm-join-error::before {
  content: "\f06a"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
  font-size: 12px;
}
.cm .cm-join-error--soft { color: var(--amber); }
.cm .cm-join-error--soft::before { content: "\f0c6"; }
.cm .cm-join-form [aria-invalid="true"] {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 14%, transparent);
}

/* Practice partner: the note belongs to the switch. Browsers that can say
   "the switch is on" hide the note until it is; the rest show it always,
   which is the safe side (a note sent with the switch off is simply kept). */
.cm .cm-join-switch { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0 0 4px; }
.cm .cm-join-switch .form-check-label { font-size: 14.5px; font-weight: 700; color: var(--text); }
.cm .cm-join-note { margin-block-start: 14px; }
@supports selector(:has(*)) {
  .cm .cm-join-practice:not(:has(#cm-join-practice:checked)) .cm-join-note { display: none; }
}

/* The consent block: the one place on the form that is not optional. */
.cm .cm-join-privacy {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.cm .cm-join-privacy li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}
.cm .cm-join-privacy li > i {
  flex: none; width: 26px; height: 26px; margin-block-start: -2px; border-radius: 8px;
  display: grid; place-items: center; font-size: 11.5px;
  background: var(--surface-2); color: var(--text-3);
}
.cm .cm-join-more { margin: 12px 0 0; font-size: 13.5px; }
.cm .cm-join-more a, .cm .cm-join-accept a, .cm .cm-join-card a:not(.btn) {
  color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.cm .cm-join-more a:hover, .cm .cm-join-accept a:hover, .cm .cm-join-card a:not(.btn):hover { color: var(--primary-700); }
.cm .cm-join-accept {
  margin: 16px 0 0; padding: 14px 16px; padding-inline-start: 44px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface-2);
}
.cm .cm-join-accept .form-check-input { margin-inline-start: -28px; margin-block-start: 3px; width: 18px; height: 18px; }
.cm .cm-join-accept .form-check-label { font-size: 14px; line-height: 1.55; color: var(--text); }
.cm .cm-join-accept:has(.form-check-input:checked) { border-color: var(--primary); background: var(--primary-50); }
.cm .cm-join-accept.is-invalid { border-color: var(--rose); background: var(--rose-bg); }

.cm .cm-join-submit {
  display: flex; justify-content: flex-end;
  padding-block-end: env(safe-area-inset-bottom);
}
.cm .cm-join-submit .btn { min-width: 220px; }

/* "What's new" keeps its line; the date drops under it when both don't fit. */
.cm .cm-join-changes .cm-panel__head { flex-wrap: wrap; row-gap: 4px; }
.cm .cm-join-changes .cm-panel__title { flex: none; }
.cm .cm-join-changes__list { margin: 0 0 14px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--text); }
.cm .cm-join-version { font-size: 12.5px; font-weight: 650; color: var(--text-3); white-space: nowrap; }

/* ---------- 2. One-panel states (anonymous, minor, member) --------------- */
.cm .cm-join-card { padding: 26px 24px; }
.cm .cm-join-card__icon {
  width: 46px; height: 46px; margin-block-end: 14px; border-radius: 14px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--primary-50); color: var(--primary);
}
.cm .cm-join-card__icon--calm { background: var(--sky-bg); color: var(--sky); }
.cm .cm-join-card__icon--ok { background: var(--green-bg); color: var(--green); }
.cm .cm-join-card__title { font-size: 17px; margin-block-end: 6px; }
.cm .cm-join-card__lead { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--text); }
.cm .cm-join-card__actions { margin-block-start: 18px; }
.cm .cm-join-card__links, .cm .cm-join-card__small { margin: 16px 0 0; font-size: 13.5px; color: var(--text-3); }

@media (max-width: 560px) {
  .cm .cm-join-step { padding: 16px; }
  .cm .cm-join-date { max-width: none; }
  .cm .cm-join-submit .btn, .cm .cm-join-card__actions .btn { width: 100%; justify-content: center; }
  .cm .cm-join-card { padding: 20px 16px; }
}

/* ---------- 3. Guidelines: the document ---------------------------------- */
.cm .cm-join-doc { display: flex; flex-direction: column; gap: 18px; }
.cm .cm-join-docmeta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -6px 0 0;
  font-size: 13px; font-weight: 600; color: var(--text-3);
}
.cm .cm-join-docmeta span { display: inline-flex; align-items: center; gap: 6px; }
.cm .cm-join-docmeta i { font-size: 12px; }
.cm .cm-join-docmeta a { color: var(--primary); }
.cm .cm-join-docmeta a:hover { color: var(--primary-700); text-decoration: underline; }

.cm .cm-join-short { padding: 20px 22px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.cm .cm-join-short__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cm .cm-join-short__list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 650; line-height: 1.45; color: var(--text); }
.cm .cm-join-short__icon { flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; }

.cm .cm-join-toc {
  padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.cm .cm-join-toc__title {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.cm .cm-join-toc ol {
  margin: 0; padding-inline-start: 22px; columns: 2; column-gap: 32px;
  font-size: 14px; line-height: 1.5; color: var(--text-3);
}
.cm .cm-join-toc li { break-inside: avoid; padding-block: 3px; }
.cm .cm-join-toc a { color: var(--text); font-weight: 650; }
.cm .cm-join-toc a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 620px) { .cm .cm-join-toc ol { columns: 1; } }

/* The reading column: long-form text at a comfortable measure. */
.cm .cm-join-prose {
  padding: 8px 30px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  font-size: 16px; line-height: 1.7; color: var(--text);
}
.cm .cm-join-prose > * { max-width: 68ch; }
.cm .cm-join-sec { padding-block: 22px 8px; scroll-margin-block-start: 84px; }
.cm .cm-join-sec + .cm-join-sec { border-block-start: 1px solid var(--surface-3); }
.cm .cm-join-sec h2 {
  position: relative; display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3;
}
.cm .cm-join-num {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary-700);
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cm .cm-join-anchor {
  margin-inline-start: 2px; color: var(--text-3); font-weight: 700; opacity: 0;
  transition: opacity .15s var(--ease);
}
.cm .cm-join-sec h2:hover .cm-join-anchor { opacity: 1; }
.cm .cm-join-anchor:hover { color: var(--primary); }
.cm .cm-join-sec h3 {
  margin: 22px 0 8px; font-size: 16px; font-weight: 800; letter-spacing: -.005em; color: var(--text);
  scroll-margin-block-start: 84px;
}
.cm .cm-join-sec p { margin: 0 0 12px; }
.cm .cm-join-sec ul, .cm .cm-join-sec ol { margin: 0 0 14px; padding-inline-start: 22px; }
.cm .cm-join-sec li { margin-block-end: 6px; }
.cm .cm-join-sec li::marker { color: var(--text-3); }
.cm .cm-join-sec strong { font-weight: 750; }
.cm .cm-join-prose a:not(.cm-join-anchor) {
  color: var(--primary); font-weight: 650; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cm .cm-join-prose a:not(.cm-join-anchor):hover { color: var(--primary-700); }
.cm .cm-join-lead { font-size: 16.5px; color: var(--text-2); }

.cm .cm-join-rules { display: grid; gap: 10px; margin: 0 0 14px; }
.cm .cm-join-rule {
  padding: 12px 14px; border-radius: var(--r); background: var(--surface-2);
  border: 1px solid var(--border);
}
.cm .cm-join-rule dt {
  display: flex; align-items: center; gap: 9px; margin: 0 0 3px;
  font-size: 15px; font-weight: 780; color: var(--text);
}
.cm .cm-join-rule dt i { width: 16px; text-align: center; font-size: 13px; color: var(--rose); }
.cm .cm-join-rule dd { margin: 0; padding-inline-start: 25px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

.cm .cm-join-callout {
  padding: 12px 16px; border-radius: var(--r); background: var(--green-bg);
  border-inline-start: 3px solid var(--green); font-weight: 650; color: var(--text);
}

.cm .cm-join-sec ol.cm-join-steps { list-style: none; padding-inline-start: 0; counter-reset: cm-join-step; }
.cm .cm-join-steps li {
  position: relative; padding-inline-start: 38px; margin-block-end: 12px; counter-increment: cm-join-step;
}
.cm .cm-join-steps li::before {
  content: counter(cm-join-step); position: absolute; inset-inline-start: 0; inset-block-start: 2px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); font-size: 12.5px; font-weight: 800;
}

.cm .cm-join-docfoot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
  padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed var(--border-2);
}
.cm .cm-join-docfoot p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.cm .cm-join-docfoot p a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .cm .cm-join-prose { padding: 4px 16px 8px; font-size: 15.5px; }
  .cm .cm-join-sec h2 { font-size: 19px; gap: 10px; }
  .cm .cm-join-num { width: 26px; height: 26px; font-size: 12.5px; }
  .cm .cm-join-short, .cm .cm-join-toc { padding: 16px; }
  .cm .cm-join-rule dd { padding-inline-start: 0; }
  .cm .cm-join-docfoot { padding: 16px; }
  .cm .cm-join-docfoot .btnrow, .cm .cm-join-docfoot .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cm .cm-join-anchor { transition: none; }
}

@media print {
  .cm .cm-subnav, .cm .cm-join-toc, .cm .cm-join-docfoot .btnrow, .cm .cm-join-anchor { display: none; }
  .cm .cm-join-prose { border: 0; box-shadow: none; padding: 0; }
}