/* CMA components. Source: literature-page/mockup/bundle.css (2026-11-07), copied unchanged.
   Replaces CMA-003 to CMA-008 in Additional CSS. Loaded after tokens.css by CMA-022. */
/* CMA components. Colors come only from role tokens (--cma-surface-*, --cma-text-*, --cma-line-*, --cma-action*, --cma-tile-*, --cma-celebrate*, --cma-danger*); palette families are never used directly here.
   */
/* CMA components: the rules of crystalmeth.org Additional CSS CMA-003 to CMA-008, plus the Form rules
   (CMA-008 extension and CMA-009, on TEST 2026-11-06). Values come from tokens.css; site-only selectors (category archive, footer, Quform) are left out. */

/* CMA-003 Card */
.is-style-cma-card {
  background: var(--cma-surface-card);
  border: 1px solid var(--cma-line-card);
  border-radius: var(--cma-radius);
  padding: var(--cma-card-pad);
}

/* CMA-004 Accent card */
.is-style-cma-card-accent { --cma-accent: var(--cma-edge-beacon); border-top: var(--cma-accent-edge) solid var(--cma-accent); }
.cma-accent-blue { --cma-accent: var(--cma-edge-beacon); }
.cma-accent-sky  { --cma-accent: var(--cma-edge-daybreak); }
.cma-accent-ink  { --cma-accent: var(--cma-edge-deep); }

/* CMA-005 Tile */
.is-style-cma-tile {
  background: var(--cma-surface-inset);
  border-radius: var(--cma-radius);
  padding: var(--cma-tile-pad-y) var(--cma-card-pad);
}

/* CMA-006 Eyebrow */
.is-style-cma-eyebrow,
.is-style-cma-eyebrow a {
  color: var(--cma-text-link);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* WordPress core button base (core/button: 4px radius in the theme's theme.json) */
.wp-block-button__link {
  display: inline-block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  border-radius: var(--cma-radius);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.is-style-outline .wp-block-button__link {
  border: 1px solid currentColor;
  background: transparent;
  color: var(--cma-text-heading);
  padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
}

/* CMA-007 Buttons */
.is-style-cma-primary .wp-block-button__link,
form.cma-search button[type="submit"] {
  background: var(--cma-action);
  color: var(--cma-text-on-action);
  font-weight: 600;
}
.is-style-cma-secondary .wp-block-button__link {
  background: var(--cma-action-secondary);
  color: var(--cma-text-on-light);
  font-weight: 600;
}

/* CMA-008 Meeting search form */
.cma-search { display: flex; flex-wrap: wrap; gap: var(--spacing-10); margin: 0 0 20px; }
.cma-search label { flex-basis: 100%; font-weight: 600; font-size: 15px; }
.cma-search input[type="search"] {
  flex: 1 1 180px;
  min-height: var(--cma-field-height);
  padding: 0 14px;
  border: 1px solid var(--cma-line-field);
  border-radius: var(--cma-radius);
  font: inherit;
  color: var(--cma-text-field);
  background: var(--cma-surface-field);
}
form.cma-search button[type="submit"] {
  min-height: var(--cma-field-height);
  padding: 0 22px;
  border: 0;
  border-radius: var(--cma-radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* CMA-007 Button states (added 2026-11-06): hover darkens, focus shows a ring */
.is-style-cma-primary .wp-block-button__link:hover,
form.cma-search button[type="submit"]:hover,
form.cma-form button[type="submit"]:hover { background: var(--cma-action-hover); }
.is-style-cma-primary .wp-block-button__link:active,
form.cma-search button[type="submit"]:active,
form.cma-form button[type="submit"]:active { background: var(--cma-action-pressed); }
.wp-block-button__link:focus-visible,
form.cma-search button:focus-visible,
form.cma-form button:focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }

/* Form (CMA-008 extension + CMA-009 on TEST): one field per line under a stacked label.
   Usage: <form class="cma-search cma-form">. Quform forms get the same look from CMA-009. */
form.cma-form { flex-direction: column; flex-wrap: nowrap; gap: var(--spacing-30); max-width: var(--content-width); color: var(--cma-text-body); }
.cma-form label,
.cma-form legend { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--cma-text-field); }
.cma-form .cma-required { color: var(--cma-required); }
.cma-form .cma-help { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--cma-text-meta); }
.cma-form input[type="text"],
.cma-form input[type="email"],
.cma-form input[type="tel"],
.cma-form input[type="number"],
.cma-form input[type="date"],
.cma-form select,
.cma-form textarea {
  display: block;
  width: 100%;
  min-height: var(--cma-field-height);
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid var(--cma-line-field);
  border-radius: var(--cma-radius);
  font: inherit;
  font-size: 16px;
  color: var(--cma-text-field);
  background: var(--cma-surface-field);
  box-sizing: border-box;
}
.cma-form textarea { min-height: 96px; }
.cma-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 1px; border-color: var(--cma-line-focus); }
.cma-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cma-form legend { padding: 0; margin-bottom: 6px; }
.cma-form fieldset label,
.cma-form label.cma-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 16px; margin: 4px 0; }
.cma-form fieldset label input,
.cma-form label.cma-check input { margin-top: 5px; accent-color: var(--cma-action); }

/* Choice chips: a short yes/no or open/closed answer as buttons */
.cma-form .cma-choices { display: flex; flex-wrap: wrap; gap: var(--spacing-10); }
.cma-form .cma-choices label { display: block; flex-basis: auto; margin: 0; }  /* undo the meeting search label's 100% basis */
.cma-form .cma-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cma-form .cma-choices span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cma-field-height); min-width: 88px; padding: 0 18px;
  border: 1px solid var(--cma-line-field); border-radius: var(--cma-radius);
  background: var(--cma-surface-field); color: var(--cma-text-field); font-weight: 600; font-size: 15px; cursor: pointer;
}
.cma-form .cma-choices input:checked + span { background: var(--cma-action); border-color: var(--cma-action); color: var(--cma-text-on-action); }
.cma-form .cma-choices input:focus-visible + span { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }

/* Optional group: indented under a 3px cma-border rule */
.cma-form .cma-optional { border-left: 3px solid var(--cma-line-card); padding-left: 12px; }

/* Info note inside a form: the Tile look */
.cma-form .cma-note { background: var(--cma-surface-inset); border-radius: var(--cma-radius); padding: var(--cma-tile-pad-y) var(--cma-card-pad); margin: 0; }

/* Step actions: Back (outline) then Next/Send (primary) */
.cma-form .cma-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-10); }
.cma-form .cma-actions button {
  min-height: var(--cma-field-height); padding: 0 26px;
  border: 1px solid var(--cma-action); border-radius: var(--cma-radius);
  background: var(--cma-action); color: var(--cma-text-on-action); font: inherit; font-weight: 600; cursor: pointer;
}
.cma-form .cma-actions button.cma-back { background: transparent; border-color: currentColor; color: var(--cma-text-heading); }
.cma-form .cma-actions button.cma-back:hover { background: var(--cma-surface-inset); }
form.cma-form button[type="submit"] { align-self: flex-start; }

/* Icon cards and quick actions (CMA App patterns, added 2026-11-07): tinted icon tiles in three brand tints.
   Icons are inline SVG or Font Awesome at 24px and take currentColor. */
.cma-icon-tile {
  width: 48px; height: 48px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--cma-radius);
  background: var(--cma-tile-beacon); color: var(--cma-tile-beacon-icon);
}
.cma-icon-tile svg, .cma-icon-tile i { width: 24px; height: 24px; font-size: 24px; }
.cma-icon-tile.cma-tile-daybreak { background: var(--cma-tile-daybreak); color: var(--cma-tile-daybreak-icon); }
.cma-icon-tile.cma-tile-harbor { background: var(--cma-tile-harbor); color: var(--cma-tile-harbor-icon); }

.cma-icon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-20); }
.cma-icon-card {
  display: grid; gap: var(--spacing-20); align-content: start;
  background: var(--cma-surface-card); border: 1px solid var(--cma-line-card); border-radius: var(--cma-radius);
  padding: var(--spacing-30); color: var(--cma-text-body); text-decoration: none; min-width: 0;
}
.cma-icon-card h3 { margin: 0; font-family: var(--font-heading); font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--cma-text-heading); }
.cma-icon-card .cma-stat { font-family: var(--font-heading); font-size: 26px; line-height: 1; font-weight: 700; color: var(--cma-text-heading); font-variant-numeric: tabular-nums; }
.cma-icon-card .cma-stat small { margin-left: 4px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--cma-text-body); }
a.cma-icon-card:hover { border-color: var(--cma-line-field); }
a.cma-icon-card:focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }

.cma-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-10); }
.cma-quick {
  display: grid; gap: 6px; align-content: start;
  padding: var(--spacing-30); border-radius: var(--cma-radius);
  background: var(--cma-tile-beacon); color: var(--cma-tile-beacon-icon); text-decoration: none; min-width: 0;
}
.cma-quick svg, .cma-quick i { width: 26px; height: 26px; font-size: 26px; }
.cma-quick span { font-size: 13px; line-height: 1.35; color: var(--cma-text-body); }
.cma-quick strong { font-family: var(--font-heading); font-size: 15px; line-height: 1.25; font-weight: 700; color: var(--cma-text-heading); }
.cma-quick.cma-tile-daybreak { background: var(--cma-tile-daybreak); color: var(--cma-tile-daybreak-icon); }
.cma-quick.cma-tile-harbor { background: var(--cma-tile-harbor); color: var(--cma-tile-harbor-icon); }
a.cma-quick:focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }

/* Signal colors (added 2026-11-07): champagne for celebration, crimson for danger.
   One signal per view; champagne always has a ring; crimson is never a fill. */

/* Destructive button: 2px crimson outline with a word. Usage: Button block class is-style-cma-danger */
.is-style-cma-danger .wp-block-button__link,
button.cma-danger {
  background: transparent; color: var(--cma-danger);
  border: 2px solid var(--cma-danger);
  padding: calc(0.667em) calc(1.333em); font-weight: 600;
}
.is-style-cma-danger .wp-block-button__link:hover,
button.cma-danger:hover { background: var(--cma-danger-soft); }
button.cma-danger { min-height: var(--cma-field-height); border-radius: var(--cma-radius); font: inherit; font-weight: 600; cursor: pointer; }
button.cma-danger:focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }

/* Form error state. Usage: add cma-error to the field's wrapper, and a p.cma-error-msg under the field */
.cma-form .cma-error :is(input, select, textarea) { border: 2px solid var(--cma-danger); padding: 9px 13px; }
.cma-form .cma-error-msg { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cma-danger); }
.cma-form .cma-error-msg::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--cma-danger); color: var(--cma-surface-card); font-size: 11px; font-weight: 700; line-height: 1; }

/* Alert: soft crimson box with an edge. Usage: <div class="cma-alert" role="alert"><strong>…</strong><p>…</p></div> */
.cma-alert { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--cma-danger); border-radius: var(--cma-radius); background: var(--cma-danger-soft); color: var(--cma-text-body); }
.cma-alert strong { color: var(--cma-danger); font-weight: 700; }
.cma-alert p { margin: 0; }

/* Milestone badge, chip and banner */
.cma-milestone {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  display: inline-grid; place-content: center; text-align: center;
  background: var(--cma-celebrate); color: var(--cma-celebrate-on);
  box-shadow: inset 0 0 0 2px var(--cma-celebrate-line);
  font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1;
}
.cma-milestone small { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cma-celebrate-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--cma-celebrate); color: var(--cma-celebrate-on); box-shadow: inset 0 0 0 1px var(--cma-celebrate-line);
  font-size: 13px; font-weight: 600;
}
.cma-milestone-banner { display: flex; gap: var(--spacing-30); align-items: center; padding: 14px 16px; border: 1px solid var(--cma-celebrate-line); border-radius: var(--cma-radius); background: var(--cma-celebrate-soft); color: var(--cma-text-body); }
.cma-milestone-banner strong { display: block; font-family: var(--font-heading); color: var(--cma-text-heading); }
.cma-celebrate-text { color: var(--cma-celebrate-line); font-weight: 600; }
.cma-icon-tile.cma-tile-celebrate { background: var(--cma-celebrate); color: var(--cma-celebrate-on); box-shadow: inset 0 0 0 1px var(--cma-celebrate-line); }

/* Overview stats and icon list (CMA App patterns, added 2026-11-07) */
.cma-overview {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--cma-surface-card); border: 1px solid var(--cma-line-card); border-radius: var(--cma-radius);
  padding: var(--spacing-30);
}
.cma-overview-item { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 0 var(--spacing-30); }
.cma-overview-item:first-child { padding-left: 0; }
.cma-overview-item:last-child { padding-right: 0; }
.cma-overview-item + .cma-overview-item { border-left: 1px solid var(--cma-line-card); }
.cma-overview-item .cma-label { display: block; font-size: 14px; line-height: 1.35; color: var(--cma-text-meta); }
.cma-overview-item .cma-value { display: block; font-family: var(--font-heading); font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--cma-text-heading); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .cma-overview { grid-auto-flow: row; gap: var(--spacing-30); }
  .cma-overview-item { padding: 0; }
  .cma-overview-item + .cma-overview-item { border-left: 0; border-top: 1px solid var(--cma-line-card); padding-top: var(--spacing-30); }
}

.cma-icon-list { display: grid; gap: var(--spacing-10); margin: 0; padding: 0; list-style: none; }
.cma-icon-row {
  display: flex; gap: 14px; align-items: center;
  background: var(--cma-surface-card); border: 1px solid var(--cma-line-card); border-radius: var(--cma-radius);
  padding: 12px var(--spacing-30); color: var(--cma-text-body); text-decoration: none; min-width: 0;
}
.cma-icon-row .cma-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cma-icon-row h3 { margin: 0; font-family: var(--font-heading); font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--cma-text-heading); }
.cma-icon-row .cma-row-meta { font-size: 14px; line-height: 1.4; color: var(--cma-text-meta); }
.cma-icon-row .cma-chevron { flex: none; width: 20px; height: 20px; color: var(--cma-text-meta); }
a.cma-icon-row:hover { border-color: var(--cma-line-field); }
a.cma-icon-row:hover .cma-chevron { color: var(--cma-text-link); }
a.cma-icon-row:focus-visible { outline: 2px solid var(--cma-line-focus); outline-offset: 2px; }