/**
 * 21C Systems — shared UI primitives.
 * Visual defaults live here; CSS Styler overrides win with !important.
 * Identifying classes (c21-auth-*, etc.) intentionally have no rules.
 */

/* -------------------------------------------------------------------------
 * Surface — boxes / panels / cards / shells
 * Visual chrome lives on role modifiers (--page/--shell/--form/--section/--card).
 * Bare .c21-surface is only the shared box-sizing hook.
 * ---------------------------------------------------------------------- */

.c21-surface {
  box-sizing: border-box;
}

.c21-surface--page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 2.75rem 2rem;
  border-style: solid;
  border-width: 0;
  border-color: transparent;
  border-radius: 0;
  background: none;
  text-align: left;
}

.c21-surface--shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  border-radius: 1rem;
  background: #faf9fd;
  text-align: left;
}

.c21-surface--form {
  display: grid;
  gap: 1.15rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  border-radius: 1rem;
  background: #faf9fd;
  text-align: left;
}

.c21-surface--section {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.85rem;
  padding: 2rem;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  border-radius: 1rem;
  background: #faf9fd;
  text-align: left;
}

.c21-surface--card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2rem;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  border-radius: 1rem;
  background: #ffffff;
  text-align: left;
}

/* Inner media-preview frame (nested inside capture / grid cards). */
.c21-surface--media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1.875rem;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  border-radius: 1.875rem;
  background: #f8f9fb;
  text-align: left;
}

/* -------------------------------------------------------------------------
 * Stack / Cluster — spacing hosts
 * ---------------------------------------------------------------------- */

.c21-stack {
  display: grid;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
}

.c21-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
}

.c21-cluster--center {
  justify-content: center;
}

/* Independent Styler-adjustable gaps (share flex/wrap from .c21-cluster). */
.c21-cluster--buttons {
  gap: 1.15rem;
}

.c21-cluster--checkboxes {
  gap: 1.15rem;
}

.c21-cluster--radio {
  gap: 1.15rem;
}

/* -------------------------------------------------------------------------
 * Type scale
 * ---------------------------------------------------------------------- */

.c21-heading {
  color: #1c1830;
  font-weight: 600;
  margin: 0 0 0.85rem;
  padding: 0.15rem 0;
}

.c21-heading--1 {
  font-size: 1.75rem;
}

.c21-heading--2 {
  font-size: 1.4rem;
}

.c21-heading--3 {
  font-size: 1.15rem;
}

.c21-body {
  color: #1c1830;
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0;
}

.c21-label {
  display: block;
  color: #1c1830;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.85rem;
}

/* Option labels (checkbox / radio choices) share Label type-scale colour/weight/size.
 * Margin/display stay option-friendly even when Label Styler sets block margins. */
.c21-label.auth-form__checkbox-label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
  margin: 0 !important;
  cursor: pointer;
}

.c21-help {
  color: #3d3758;
  font-size: 1.25rem;
  margin: 0 0 0.85rem;
}

.c21-meta {
  color: #3d3758;
  font-size: 1.25rem;
  margin: 0;
}

/* Description-required prompt on media capture cards (Type scale — independent of .c21-meta). */
.c21-meta--needed {
  display: block;
  color: #b91c1c;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Alert
 * ---------------------------------------------------------------------- */

.c21-alert {
  box-sizing: border-box;
  margin: 0 0 1rem;
  padding: 0.85rem 1.15rem;
  border-radius: 0.75rem;
  border-style: solid;
  border-width: 2px;
  font-size: 1.25rem;
  line-height: 1.4;
}

.c21-alert--success {
  color: #166534;
  background: color-mix(in srgb, #16a34a 12%, #ffffff);
  border-color: #16a34a;
}

.c21-alert--error {
  color: #e11d48;
  background: color-mix(in srgb, #e11d48 12%, #ffffff);
  border-color: #e11d48;
}

.c21-alert--warning {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 12%, #ffffff);
  border-color: #f59e0b;
}

.c21-alert--info {
  color: #1d4ed8;
  background: color-mix(in srgb, #3b82f6 12%, #ffffff);
  border-color: #3b82f6;
}

.c21-alert--inline {
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #e11d48;
  font-size: 1.25rem;
}

.c21-alert--meter {
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 1rem;
  color: #3d3758;
}

/* Prefer compound selector so base .c21-alert border/padding cannot reappear. */
.c21-alert.c21-alert--meter {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.c21-alert--meter-weak {
  color: #e11d48;
}

.c21-alert--meter-good {
  color: #b45309;
}

.c21-alert--meter-strong {
  color: #166534;
}

/* -------------------------------------------------------------------------
 * Button — primary and secondary are fully independent
 * ---------------------------------------------------------------------- */

.c21-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border-style: solid;
  border-width: 2px;
  border-radius: 0.75rem;
  padding: 1rem 1.75rem;
  margin: 0;
  line-height: 1.2;
}

.c21-btn--primary {
  background: #7b66ff;
  color: #ffffff;
  border-color: #7b66ff;
}

.c21-btn--primary:hover,
.c21-btn--primary:focus {
  background: #5a48d4;
  color: #ffffff;
  border-color: #5a48d4;
}

.c21-btn--secondary {
  background: #f3f0ff;
  color: #1c1830;
  border-color: #000;
}

.c21-btn--secondary:hover,
.c21-btn--secondary:focus {
  background: #e8e2ff;
  color: #1c1830;
  border-color: #000;
}

.c21-btn--feature {
  background: #7b66ff;
  color: #ffffff;
  border-color: #7b66ff;
  padding: 0.65rem 1rem;
  font-size: 1rem;
}

.c21-btn--feature:hover,
.c21-btn--feature:focus {
  background: #5a48d4;
  color: #ffffff;
  border-color: #5a48d4;
}

.c21-btn--icon {
  padding: 0.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

/* -------------------------------------------------------------------------
 * Link
 * Base .c21-link / .c21-link-list remain as a non-Styler fallback for any
 * future link not yet assigned to a location Link Set (Styler: Link Set 1–3).
 * ---------------------------------------------------------------------- */

.c21-link {
  color: #7b66ff;
  font-size: 1.5rem;
  text-decoration: underline;
}

.c21-link:hover,
.c21-link:focus {
  color: #ff6b2c;
  text-decoration: underline;
}

.c21-link-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.c21-link-list ul,
.c21-link-list--items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c21-link-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.15rem;
}

/* -------------------------------------------------------------------------
 * Field — inputs / checks / radios
 * ---------------------------------------------------------------------- */

.c21-field {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 14rem;
  font: inherit;
  font-size: 1.5rem;
  color: #1c1830;
  background: #ffffff;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  border-radius: 0.75rem;
  padding: 0.9rem 1.15rem;
  margin: 0;
  box-shadow: 0 0 0 2px #000;
}

.c21-check,
.c21-radio {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  background-color: #ffffff;
  vertical-align: middle;
}

.c21-check {
  border-radius: 0.25rem;
}

.c21-radio {
  border-radius: 50%;
}

/*
 * Checked indicators replace the native mark removed by appearance:none.
 * !important so Styler base `background` / theme box-shadow resets cannot hide them.
 * Indicator colour is Styler-editable via .c21-check:checked / .c21-radio:checked backgroundColor.
 */
.c21-check:checked {
  background-color: #8b7cc8 !important;
  border-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.2 11.6 2.8 8.2l1.4-1.4 2 2 5.2-5.2 1.4 1.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 0.85em 0.85em !important;
  box-shadow: none !important;
}

.c21-radio:checked {
  /* Inner dot via content-box + padding ring; colour is the indicator. */
  background-color: #8b7cc8 !important;
  border-color: #000 !important;
  background-image: none !important;
  background-clip: content-box !important;
  padding: 0.22rem !important;
  box-shadow: none !important;
}

.c21-field-required {
  color: #e11d48;
  margin-left: 0.15rem;
}