@charset "UTF-8";
/* CMS Builder — block-editor output styles (second entry point → css/blocks.css)
 *
 * Loaded only by the views that render page/post/form blocks (PublicContent,
 * PublicForm, Groups/Report, Preview). Tokens come from shared.css, which is
 * always loaded first. */
/* ── Content container ──────────────────────────────────────────────────── */
.cms-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--cms-space-lg) var(--cms-space-md);
  /* Long words and URLs break instead of widening the page (S09a); code keeps its own scroller. */
  overflow-wrap: anywhere;
}

/* ── Shared block baseline ──────────────────────────────────────────────── */
.cms-block {
  /* Intentionally minimal — just vertical rhythm for all blocks */
}

/* ── Heading ────────────────────────────────────────────────────────────── */
/* Rhythm (S03a): a heading opens a section, so it carries the large space
   above and a small one below; the first block of a column never does. */
.cms-block--heading {
  margin: var(--cms-space-lg) 0 var(--cms-space-sm);
}

.cms-block--heading:first-child {
  margin-top: 0;
}

.cms-block--heading h1,
.cms-block--heading h2,
.cms-block--heading h3,
.cms-block--heading h4,
.cms-block--heading h5,
.cms-block--heading h6 {
  margin: 0;
  line-height: var(--cms-line-height-tight);
}

/* ── Text ───────────────────────────────────────────────────────────────── */
.cms-block--text p {
  margin: 0 0 var(--cms-space-sm);
}

.cms-block--text p:last-child {
  margin-bottom: 0;
}

.cms-block--text + .cms-block--text {
  margin-top: var(--cms-space-sm);
}

/* ── Row / columns ──────────────────────────────────────────────────────── */
.cms-block--row {
  display: flex;
  gap: var(--cms-space-md);
  margin: var(--cms-space-md) 0;
}

.cms-block--row .cms-block__column {
  min-width: 0;
}

@media (max-width: 600px) {
  .cms-block--row {
    flex-direction: column;
  }
  .cms-block--row .cms-block__column {
    flex: none !important;
    width: 100%;
  }
}
/* ── Callout ────────────────────────────────────────────────────────────── */
.cms-block--callout {
  display: flex;
  align-items: flex-start;
  gap: var(--cms-space-sm);
  padding: var(--cms-space-md);
  border-radius: var(--cms-radius-lg);
  margin: var(--cms-space-sm) 0;
}

.cms-block--callout p {
  margin: 0;
}

.cms-block--callout.cms-block--callout-info {
  background: var(--cms-color-primary-bg-subtle);
  border-left: 4px solid var(--cms-color-primary);
}

.cms-block--callout.cms-block--callout-success {
  background: var(--cms-color-success-bg-subtle);
  border-left: 4px solid var(--cms-color-success);
}

.cms-block--callout.cms-block--callout-warning {
  background: var(--cms-color-warning-bg-subtle);
  border-left: 4px solid var(--cms-color-warning);
}

.cms-block--callout.cms-block--callout-error {
  background: var(--cms-color-danger-bg-subtle);
  border-left: 4px solid var(--cms-color-danger);
}

.cms-block--callout .cms-block__callout-body {
  min-width: 0;
  flex: 1;
}

.cms-block--callout .cms-block__callout-body p + p {
  margin-top: var(--cms-space-xs);
}

.cms-block--callout.cms-block--align-center {
  text-align: center;
}

.cms-block--callout.cms-block--align-right {
  text-align: right;
}

.cms-block--callout .cms-block__callout-icon {
  font-size: 1.25rem;
  line-height: 1.5;
}

.cms-block--callout.cms-block--callout-info .cms-block__callout-icon {
  color: var(--cms-color-primary);
}

.cms-block--callout.cms-block--callout-success .cms-block__callout-icon {
  color: var(--cms-color-success);
}

.cms-block--callout.cms-block--callout-warning .cms-block__callout-icon {
  color: var(--cms-color-warning);
}

.cms-block--callout.cms-block--callout-error .cms-block__callout-icon {
  color: var(--cms-color-danger);
}

/* ── Quote ──────────────────────────────────────────────────────────────── */
.cms-block--quote {
  border-left: 4px solid var(--cms-color-border);
  padding: var(--cms-space-sm) var(--cms-space-md);
  margin: var(--cms-space-md) 0;
  font-style: italic;
}

.cms-block--quote cite {
  display: block;
  font-style: normal;
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
  margin-top: var(--cms-space-xs);
}

.cms-block--quote cite::before {
  content: "— ";
}

.cms-block--quote.cms-block--align-center {
  text-align: center;
}

.cms-block--quote.cms-block--align-right {
  text-align: right;
}

/* ── Button ─────────────────────────────────────────────────────────────── */
.cms-block--button {
  margin: var(--cms-space-md) 0;
}

.cms-block--button .cms-block__button-link {
  display: inline-block;
  padding: var(--cms-space-sm) var(--cms-space-lg);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  border-radius: var(--cms-radius-md);
  text-decoration: none;
  font-weight: var(--cms-font-weight-medium);
  transition: background-color 0.2s ease;
}

.cms-block--button .cms-block__button-link:hover {
  background-color: var(--cms-color-primary-emphasis);
}

.cms-block--button .cms-block__button-link {
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.cms-block--button.cms-block--align-center {
  text-align: center;
}

.cms-block--button.cms-block--align-right {
  text-align: right;
}

.cms-block--button .cms-block__button-link--success {
  background: var(--cms-color-success);
  color: var(--cms-color-on-success);
}

.cms-block--button .cms-block__button-link--success:hover {
  background: var(--cms-color-success-emphasis);
}

.cms-block--button .cms-block__button-link--warning {
  background: var(--cms-color-warning);
  color: var(--cms-color-on-warning);
}

.cms-block--button .cms-block__button-link--warning:hover {
  background: var(--cms-color-warning-emphasis);
}

.cms-block--button .cms-block__button-link--danger {
  background: var(--cms-color-danger);
  color: var(--cms-color-on-danger);
}

.cms-block--button .cms-block__button-link--danger:hover {
  background: var(--cms-color-danger-emphasis);
}

.cms-block--heading.cms-block--align-center {
  text-align: center;
}

.cms-block--heading.cms-block--align-right {
  text-align: right;
}

/* ── Image ──────────────────────────────────────────────────────────────── */
.cms-block--image {
  margin: var(--cms-space-md) 0;
}

.cms-block--image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cms-block--image.cms-block--align-center {
  text-align: center;
}

.cms-block--image.cms-block--align-center img {
  margin: 0 auto;
}

.cms-block--image.cms-block--align-left {
  text-align: left;
}

.cms-block--image.cms-block--align-left img {
  margin: 0 auto 0 0;
}

.cms-block--image.cms-block--align-right {
  text-align: right;
}

.cms-block--image.cms-block--align-right img,
.cms-block--image.cms-block--align-right .cms-block__members-only {
  margin: 0 0 0 auto;
}

.cms-block--image figcaption {
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
  margin-top: var(--cms-space-xs);
}

.cms-block__members-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cms-space-xs);
  padding: var(--cms-space-lg);
  min-height: 180px;
  max-width: 100%;
  background: var(--cms-color-surface-alt);
  border: 1px dashed var(--cms-color-border-subtle);
  border-radius: var(--cms-radius-md);
  color: var(--cms-color-text-secondary);
}

.cms-block__members-only .material-icons {
  font-size: 32px;
}

.cms-block__members-only-text {
  font-size: var(--cms-font-size-base);
  font-weight: 500;
}

.cms-block--image.cms-block--align-center .cms-block__members-only {
  margin: 0 auto;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.cms-block--table {
  margin: var(--cms-space-md) 0;
  overflow-x: auto;
}

.cms-block--table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--cms-space-xs);
}

.cms-block--table th,
.cms-block--table td {
  padding: var(--cms-space-xs) var(--cms-space-sm);
  border: 1px solid var(--cms-color-border);
}

.cms-block--table th {
  background: var(--cms-color-surface-alt);
  font-weight: 500;
  text-align: left;
}

.cms-block--table caption {
  caption-side: top;
  text-align: left;
  font-weight: var(--cms-font-weight-bold);
  padding-bottom: var(--cms-space-xs);
}

.cms-block--table.cms-block--align-center caption {
  text-align: center;
}

.cms-block--table.cms-block--align-right caption {
  text-align: right;
}

.cms-block--table .cms-table--zebra tbody tr:nth-child(even) {
  background: var(--cms-color-surface-alt);
}

/* ── Code ───────────────────────────────────────────────────────────────── */
.cms-block--code {
  margin: var(--cms-space-md) 0;
}

.cms-block--code .cms-block__code-header {
  background: var(--cms-color-surface-alt);
  padding: var(--cms-space-xs) var(--cms-space-sm);
  font-size: 0.8rem;
  border-radius: var(--cms-radius-lg) var(--cms-radius-lg) 0 0;
  border: 1px solid var(--cms-color-border);
  border-bottom: 0;
}

.cms-block--code pre {
  background: var(--cms-color-surface-alt);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  padding: var(--cms-space-md);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cms-block--code .cms-block__code-header + pre {
  border-radius: 0 0 var(--cms-radius-lg) var(--cms-radius-lg);
}

.cms-block--code .cms-block__code-header {
  display: flex;
  justify-content: space-between;
  gap: var(--cms-space-sm);
}

.cms-block--code .cms-block__code-filename {
  overflow-wrap: anywhere;
}

.cms-block--code .cms-block__code-language {
  color: var(--cms-color-text-secondary);
  text-transform: lowercase;
}

/* "Wrap long lines" (S09a: the editor's checkbox had no effect) */
.cms-block--code.cms-block--code-wrap pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* "Line numbers": one counter per line span, gutter drawn in the margin of the line */
.cms-block--code.cms-block--code-numbered code {
  counter-reset: cms-code-line;
}

.cms-block--code.cms-block--code-numbered .cms-block__code-line {
  counter-increment: cms-code-line;
}

.cms-block--code.cms-block--code-numbered .cms-block__code-line::before {
  content: counter(cms-code-line);
  display: inline-block;
  width: 3ch;
  margin-right: 1.5ch;
  text-align: right;
  color: var(--cms-color-text-secondary);
  user-select: none;
}

/* ── List ───────────────────────────────────────────────────────────────── */
.cms-block--list {
  margin: var(--cms-space-sm) 0;
}

.cms-block--list .cms-block__list-title {
  display: block;
}

.cms-block--list.cms-block--align-center {
  text-align: center;
}

.cms-block--list.cms-block--align-center ul,
.cms-block--list.cms-block--align-center ol,
.cms-block--list.cms-block--align-right ul,
.cms-block--list.cms-block--align-right ol {
  list-style-position: inside;
  padding-left: 0;
}

.cms-block--list.cms-block--align-right {
  text-align: right;
}

/* "Items per column": the renderer sets --cms-list-columns; phones keep one column */
.cms-block--list.cms-block--list-columns ul,
.cms-block--list.cms-block--list-columns ol {
  columns: var(--cms-list-columns, 1);
  column-gap: var(--cms-space-lg);
}

.cms-block--list.cms-block--list-columns li {
  break-inside: avoid;
}

@media (max-width: 600px) {
  .cms-block--list.cms-block--list-columns ul,
  .cms-block--list.cms-block--list-columns ol {
    columns: 1;
  }
}
/* ── Embed ──────────────────────────────────────────────────────────────── */
.cms-block--embed {
  margin: var(--cms-space-md) 0;
}

.cms-block--embed.cms-block--align-center {
  margin-inline: auto;
}

.cms-block--embed.cms-block--align-right {
  margin-inline: auto 0;
}

.cms-block--embed .cms-block__embed-title {
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-xs);
}

.cms-block--embed .cms-block__embed-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.cms-block--embed .cms-block__embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── TOC ────────────────────────────────────────────────────────────────── */
.cms-block--toc {
  background: var(--cms-color-surface-alt);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  padding: var(--cms-space-md);
  margin: var(--cms-space-md) 0;
}

.cms-block--toc ul,
.cms-block--toc ol {
  padding-left: var(--cms-space-lg);
  margin: var(--cms-space-xs) 0 0;
}

.cms-block--toc ul {
  list-style: none;
}

.cms-block--toc ol {
  list-style: decimal;
}

.cms-block--toc li {
  margin: var(--cms-space-xs) 0;
}

.cms-block--toc a {
  color: var(--cms-color-link);
  text-decoration: none;
}

.cms-block--toc.cms-block--toc-sticky {
  position: sticky;
  top: var(--cms-space-md);
  z-index: 1;
}

.cms-toc-anchor {
  display: block;
  height: 0;
}

.cms-toc-anchor, .cms-block--heading [id] {
  scroll-margin-top: var(--cms-space-lg);
}

.cms-block--toc a:hover {
  text-decoration: underline;
}

.cms-block--toc .cms-block--toc-indent-1 {
  padding-left: 1.5em;
}

.cms-block--toc .cms-block--toc-indent-2 {
  padding-left: 3em;
}

.cms-block--toc .cms-block--toc-indent-3 {
  padding-left: 4.5em;
}

/* ── HTML block notice (authors only, S09a D4) ─────────────────────────── */
.cms-block--html-notice {
  margin: var(--cms-space-xs) 0 var(--cms-space-md);
  padding: var(--cms-space-sm) var(--cms-space-md);
  border-left: 4px solid var(--cms-color-warning-border);
  background: var(--cms-color-warning-bg);
  color: var(--cms-color-warning-text);
  border-radius: var(--cms-radius-md);
  font-size: var(--cms-font-size-base);
}

/* ── Dynamic blocks (S09b: posts / events / discussions / groups / join) ───── */
/* Each renders its own heading, so a block with nothing to show leaves nothing behind. */
.cms-block--dynamic {
  margin: var(--cms-space-lg) 0;
}

.cms-block__dynamic-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cms-space-xs) var(--cms-space-md);
  margin-bottom: var(--cms-space-sm);
}

.cms-block__dynamic-title {
  margin: 0;
}

.cms-block__dynamic-more {
  white-space: nowrap;
}

.cms-block__dynamic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-block__posts-grid,
.cms-block__groups-grid {
  --min: 240px;
}

.cms-block__post-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cms-block__post-image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.cms-block__post-row {
  display: flex;
  gap: var(--cms-space-md);
  align-items: flex-start;
  min-width: 0;
}
.cms-block__post-row > div {
  min-width: 0;
}

.cms-block__post-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--cms-radius-md);
}

.cms-block__post-title,
.cms-block__group-name {
  margin: 0 0 var(--cms-space-xs);
  font-size: var(--cms-font-size-lg);
  overflow-wrap: anywhere;
}

a.cms-block__post-title,
.cms-block__discussion-title {
  display: block;
  font-weight: var(--cms-font-weight-medium);
  overflow-wrap: anywhere;
}

.cms-block__post-date,
.cms-block__discussion-meta {
  display: block;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

.cms-block__post-summary,
.cms-block__group-summary {
  margin: var(--cms-space-xs) 0 0;
  color: var(--cms-color-text-secondary);
}

.cms-block__group-card .cms-badge {
  margin-bottom: var(--cms-space-xs);
}

.cms-block--join .cms-card__body > :last-child {
  margin-bottom: 0;
}

.cms-block__join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-sm);
  margin-top: var(--cms-space-md);
}

.cms-block__join-note {
  margin: var(--cms-space-sm) 0 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

/* Preview page only: whose view a dynamic block shows, and why one shows nothing. */
.cms-block__preview-label {
  display: flex;
  align-items: center;
  gap: var(--cms-space-xs);
  margin: 0 0 var(--cms-space-xs);
  color: var(--cms-color-info-text);
  font-size: var(--cms-font-size-sm);
}
.cms-block__preview-label .material-icons {
  font-size: 1.1em;
}

.cms-block--dynamic-notice {
  display: flex;
  gap: var(--cms-space-sm);
  align-items: flex-start;
  margin: var(--cms-space-md) 0;
  padding: var(--cms-space-sm) var(--cms-space-md);
  border-left: 4px solid var(--cms-color-info-border-subtle);
  background: var(--cms-color-info-bg);
  color: var(--cms-color-info-text);
  border-radius: var(--cms-radius-md);
}
.cms-block--dynamic-notice p {
  margin: 0;
}

.cms-block--dynamic-notice-failed {
  border-left-color: var(--cms-color-danger-border-subtle);
  background: var(--cms-color-danger-bg);
  color: var(--cms-color-danger-text);
}

/* ── Divider ────────────────────────────────────────────────────────────── */
.cms-block--divider {
  border: none;
  border-top: 1px solid var(--cms-color-border);
  margin: var(--cms-space-lg) 0;
}

/* ── Markdown ───────────────────────────────────────────────────────────── */
/* Markdown blocks produce standard HTML tags via Markdig.                   */
/* All selectors are scoped under .cms-block--markdown to avoid leaking      */
/* into other block types.                                                   */
.cms-block--markdown h1,
.cms-block--markdown h2,
.cms-block--markdown h3,
.cms-block--markdown h4,
.cms-block--markdown h5,
.cms-block--markdown h6 {
  margin: var(--cms-space-md) 0 var(--cms-space-xs);
}

.cms-block--markdown h1:first-child,
.cms-block--markdown h2:first-child,
.cms-block--markdown h3:first-child {
  margin-top: 0;
}

.cms-block--markdown p {
  margin: 0 0 var(--cms-space-md);
  line-height: 1.6;
}

.cms-block--markdown a {
  color: var(--cms-color-primary);
  text-decoration: underline;
}

.cms-block--markdown strong {
  font-weight: 600;
}

.cms-block--markdown blockquote {
  border-left: 4px solid var(--cms-color-border);
  padding: var(--cms-space-xs) var(--cms-space-md);
  margin: 0 0 var(--cms-space-md);
  color: var(--cms-color-text-secondary);
}

.cms-block--markdown ul,
.cms-block--markdown ol {
  padding-left: var(--cms-space-lg);
  margin: 0 0 var(--cms-space-md);
}

.cms-block--markdown li {
  margin: var(--cms-space-xs) 0;
}

.cms-block--markdown pre {
  background: var(--cms-color-surface-alt);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  padding: var(--cms-space-md);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cms-block--markdown code {
  font-size: 0.9em;
  background: var(--cms-color-surface-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--cms-radius-sm);
}

.cms-block--markdown pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.cms-block--markdown hr {
  border: none;
  border-top: 1px solid var(--cms-color-border);
  margin: var(--cms-space-md) 0;
}

.cms-block--markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--cms-space-md);
  /* A wide GFM table scrolls inside itself instead of widening the page (S09a). */
  display: block;
  overflow-x: auto;
}

.cms-block--markdown th,
.cms-block--markdown td {
  padding: var(--cms-space-xs) var(--cms-space-sm);
  border: 1px solid var(--cms-color-border);
}

.cms-block--markdown th {
  background: var(--cms-color-surface-alt);
  font-weight: 500;
}

.cms-block--markdown img {
  max-width: 100%;
  height: auto;
}

.cms-block--markdown > :last-child {
  margin-bottom: 0;
}

/* ── HTML (raw) ─────────────────────────────────────────────────────────── */
.cms-block--html {
  margin: var(--cms-space-sm) 0;
}

/* ── Unknown block ──────────────────────────────────────────────────────── */
.cms-block--unknown {
  background: var(--cms-color-warning-bg-subtle);
  border: 1px dashed var(--cms-color-warning);
  border-radius: var(--cms-radius-lg);
  padding: var(--cms-space-md);
  margin: var(--cms-space-md) 0;
}

.cms-block--unknown pre {
  font-size: 0.8rem;
  white-space: pre-wrap;
  margin-top: var(--cms-space-xs);
}

/* ── Taxonomy ───────────────────────────────────────────────────────────── */
.cms-block--taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
  margin: var(--cms-space-sm) 0;
}

.cms-block--taxonomy .cms-block--taxonomy__label {
  font-weight: var(--cms-font-weight-medium);
}

/* ── Post footer meta ───────────────────────────────────────────────────── */
.cms-content__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-sm);
  padding-top: var(--cms-space-md);
  margin-top: var(--cms-space-lg);
  border-top: 1px solid var(--cms-color-border-subtle);
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
}