/* cdob-forms.css v0.3.0 | 2026-07-08 | Generated by Claude, session CDOB-M5
   (v0.2.0 2026-07-05 CDOB-M4: login/reset panel; v0.1.0 2026-07-05 CDOB-M3: registration/account rules)
   Front-end account forms for blog 4 (Cascadia Movement hub), membership Units 3-5.
   v0.3.0 (Unit 5, CDOB-M5): profile-editor rules (.cdob-pe-*) appended at the foot
   of this file; they reuse the Unit-3/4 form primitives (.cdob-form / .cdob-field /
   .cdob-input / .cdob-label / .cdob-hint / .cdob-form-notice(+-ok)) and add only the
   editor's unique surfaces (avatar row, section headers, interest checkbox grid,
   textarea/select variants). The dashboard, member-profile, and directory display
   surfaces live in the sibling css/cdob-dashboard.css.
   v0.2.0 (Unit 4, CDOB-M4): login + password-reset panel rules appended at the
   foot of this file; they reuse the Unit-3 rules below and add only the two-panel
   login/reset surface's unique rules (see the section header there).
   Enqueued from the cdob-starter PLUGIN loader (NOT the theme), versioned by
   CDOB_STARTER_PLUGIN_VERSION so its cache-bust is decoupled from the theme
   $css_ver (plan section 7). All tokens resolve from the theme :root layer
   (cdob-core.css): --cdob-* colors, --cdob-ff-*, the --fs-* scale, --cdob-tap-min.

   Contrast (sRGB-linearized per RC_A11Y_TOKEN_HYGIENE.md; adjacent surface is
   paper #ffffff unless noted):
     fir on paper 9.76  (eyebrow)          navy on paper 10.40 (title, links)
     on-light-meta on paper 7.46 (subtitle/hint/placeholder)
     ink on paper 16.48 (labels, field messages, notice text)
     flame on paper 3.51 (notice accent border, error field border, req asterisk) -> UI 3:1 PASS
     input border rgba(ink,0.5)=#8f8f8f 3.23:1 on paper -> UI 3:1 PASS
   The theme's --cdob-ui-border (0.18 alpha, 1.44:1) is DECORATIVE-ONLY and must
   never carry the field boundary; the resting input border is composed from the
   ink RGB companion at 0.5 alpha so it clears the 3:1 non-text floor.
   Error STATE is conveyed by the flame field border + the visible message (whose
   text is ink 16.48, not flame), never by color alone (WCAG 1.4.3 + 1.4.1).
   The flame '*' required marker is aria-hidden decoration; the real required
   signal is the input `required` attribute and the label text.
   Primary buttons reuse the theme .cdob-btn (flame bg + INK text 4.69; never
   white on flame) and inherit the 44px tap floor; this file only widths them.
   Keyboard focus uses the theme global :focus-visible (navy 3px). */

.cdob-form-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 0 72px;
}

/* Header */
.cdob-form-header {
  text-align: center;
  margin-bottom: 32px;
}
.cdob-form-eyebrow {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdob-fir); /* 9.76:1 on paper */
  margin: 0 0 10px;
}
.cdob-form-title {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-800);
  line-height: 1.15;
  color: var(--cdob-navy); /* 10.40:1 on paper */
  margin: 0 0 10px;
}
.cdob-form-subtitle {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--cdob-on-light-meta); /* 7.46:1 on paper */
  max-width: 44ch;
  margin: 0 auto;
}

/* Generic error banner (never carries field values or account-existence facts) */
.cdob-form-notice {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--cdob-ink); /* 16.48:1 - the text carries the message */
  background: rgba(var(--cdob-flame-rgb), 0.10);
  border-left: 4px solid var(--cdob-flame); /* 3.51:1 accent (UI 3:1) */
  padding: 14px 18px;
  margin-bottom: 24px;
}

/* Form + fields */
.cdob-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cdob-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cdob-field-row {
  display: grid;
  gap: 18px;
}
.cdob-cols-2 {
  grid-template-columns: 1fr 1fr;
}
.cdob-label {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--cdob-ink); /* 16.48:1 */
}
.cdob-req {
  color: var(--cdob-flame); /* decorative required marker; aria-hidden */
}
.cdob-hint {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-300);
  color: var(--cdob-on-light-meta); /* 7.46:1 */
  line-height: 1.5;
}
.cdob-input {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-500); /* 17px: >=16px avoids iOS focus zoom */
  color: var(--cdob-ink);
  background: var(--cdob-paper);
  border: 1px solid rgba(var(--cdob-ink-rgb), 0.5); /* #8f8f8f, 3.23:1 (UI 3:1) */
  padding: 12px 14px;
  width: 100%;
  min-height: var(--cdob-tap-min); /* 44px tap floor */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}
.cdob-input::placeholder {
  color: var(--cdob-on-light-meta); /* 7.46:1 */
}
.cdob-input:focus {
  border-color: var(--cdob-navy); /* keyboard focus also draws the theme :focus-visible navy ring */
}
.cdob-input-error {
  border-color: var(--cdob-flame); /* 3.51:1 error boundary (UI 3:1) */
}
.cdob-field-msg {
  display: none; /* toggled via .is-visible by the form's client-side validation */
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--cdob-ink); /* 16.48:1 - text, not color, is the signal */
}
.cdob-field-msg.is-visible {
  display: block;
}

/* Honeypot: off-screen, never shown to humans */
.cdob-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Actions: reuse the theme .cdob-btn (flame bg + ink text + 44px floor) */
.cdob-form-actions {
  margin: 8px 0 0;
}
.cdob-form-submit {
  width: 100%;
}

/* Alternate action / already-have-an-account row */
.cdob-form-alt {
  text-align: center;
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--cdob-ui-border); /* decorative divider only */
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  color: var(--cdob-on-light-meta); /* 7.46:1 */
}
.cdob-form-alt-link {
  color: var(--cdob-navy); /* 10.40:1 */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cdob-form-alt-link:hover {
  color: var(--cdob-flame);
}

@media (max-width: 560px) {
  .cdob-form-wrap {
    padding: 32px 0 56px;
  }
  .cdob-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Login + password-reset panels (membership Unit 4, CDOB-M4)
   Appended to the Unit-3 rules above; reuses .cdob-form-wrap /
   -header / -eyebrow / -title / -subtitle / .cdob-form / .cdob-field /
   .cdob-label / .cdob-input / .cdob-hp / .cdob-form-actions /
   .cdob-form-submit / .cdob-form-alt(+-link) / .cdob-form-notice
   verbatim. The primary submit reuses the theme .cdob-btn (flame +
   ink 4.69); the SSO button reuses the theme .cdob-btn--ghost-dk
   (navy border + navy text on paper, 10.40, incl. its hover). Only the
   rules unique to the two-panel login/reset surface live below.

   Contrast (sRGB-linearized; adjacent surface is paper #ffffff):
     ink on paper 16.48 (remember-me text)
     navy on paper 10.40 (.cdob-linkbtn forgot/back link-buttons)
     on-light-meta on paper 7.46 (the "or" divider text, .cdob-sso-hint)
     fir on paper 9.76 -> reset-success notice 4px accent border (UI 3:1)
   The success notice tint rgba(fir,0.10) is a wash on paper; its message
   is ink 16.48 text and an icon-free string carries the meaning (never
   color alone; WCAG 1.4.1). The .cdob-linkbtn keeps navy on hover (drops
   only the underline) so it never takes a text state below 4.5 (flame on
   paper is 3.51, UI-only). ==================================== */

/* Panel show/hide (client-side toggle; PRG sets the initial state server-side) */
.cdob-panel-hidden { display: none; }

/* Remember-me + forgot-password row */
.cdob-login-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cdob-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cdob-tap-min); /* 44px tap floor for the control row */
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  color: var(--cdob-ink); /* 16.48:1 */
  cursor: pointer;
}
.cdob-remember input {
  width: 18px;
  height: 18px;
}

/* Text button styled as an inline link (forgot / back). A real <button> for
   semantics + keyboard; navy 10.40 at rest AND on hover (no sub-4.5 flame). */
.cdob-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: var(--cdob-tap-min); /* 44px tap floor */
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--cdob-navy); /* 10.40:1 */
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cdob-linkbtn:hover { text-decoration: none; }

/* "or" divider between the local login and the SSO button */
.cdob-login-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--cdob-on-light-meta); /* 7.46:1 */
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cdob-login-or::before,
.cdob-login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cdob-ui-border); /* decorative divider only */
}

/* SSO helper line under the Regenerate Cascadia button */
.cdob-sso-hint {
  text-align: center;
  margin: 12px 0 0;
}

/* Password-reset success variant of .cdob-form-notice (fir accent, not flame).
   Applied as an ADDITIONAL class after .cdob-form-notice, so it overrides only
   the accent color + the wash; width/style/text are inherited from the base. */
.cdob-form-notice-ok {
  background: rgba(var(--cdob-fir-rgb), 0.10);
  border-left-color: var(--cdob-fir); /* 9.76:1 accent (UI 3:1) */
}

/* ============================================================
   Profile editor (membership Unit 5, CDOB-M5). [cdob_profile_editor]
   on /your-profile/. Reuses .cdob-form / .cdob-field / .cdob-field-row /
   .cdob-cols-2 / .cdob-input / .cdob-label / .cdob-hint / .cdob-req /
   .cdob-field-msg / .cdob-form-actions / .cdob-form-submit / .cdob-form-notice
   (+ -ok) verbatim; the primary submit is the theme .cdob-btn (flame + ink
   4.69); the upload control + cancel reuse the theme .cdob-btn--ghost-dk (navy
   10.40) and .cdob-linkbtn (navy 10.40). Only the editor's unique surfaces
   are below.

   Contrast (sRGB-linearized; adjacent surface is paper #ffffff):
     navy on paper 10.40 (section titles)
     ink on paper 16.48 (checkbox text)
     on-light-meta on paper 7.46 (slug base hint, avatar empty glyph)
   Section dividers + the avatar tint are decorative (no text sits on the tint).
   The interest checkboxes convey state via the native control (not color). ==== */

.cdob-pe-wrap {
  max-width: 680px; /* wider than the 520px auth forms: the editor is denser */
}

.cdob-pe-section {
  padding: 28px 0 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--cdob-ui-border); /* decorative section divider */
}
.cdob-pe-form > .cdob-pe-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.cdob-pe-section-title {
  font-family: var(--cdob-ff-serif);
  font-size: var(--fs-700);
  line-height: 1.2;
  color: var(--cdob-navy); /* 10.40:1 on paper */
  margin: 0 0 18px;
}

/* Avatar row */
.cdob-pe-avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cdob-pe-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(var(--cdob-navy-rgb), 0.06); /* decorative tint under the empty glyph */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdob-pe-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cdob-pe-avatar-empty svg {
  width: 44px;
  height: 44px;
  fill: var(--cdob-on-light-meta); /* 7.46:1 decorative glyph */
}
.cdob-pe-avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cdob-pe-upload-btn {
  cursor: pointer;
  align-self: flex-start;
}
/* Native file input is replaced by the styled label button above. */
.cdob-pe-file {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Profile-link (slug) composed field */
.cdob-pe-slug-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cdob-pe-slug-base {
  margin: 0;
  white-space: nowrap;
}
.cdob-pe-slug-input {
  flex: 1;
  min-width: 180px;
}

/* Textarea + select share the .cdob-input box; only shape differs */
.cdob-pe-textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}
.cdob-pe-select {
  cursor: pointer;
  /* Decorative chevron (the native arrow is suppressed by .cdob-input's
     appearance:none). %232c3c77 = --cdob-navy exactly (10.40:1 on the white
     control); a data URI cannot reference var(), so this hex is intentional and
     must be updated by hand if the navy token is ever retuned. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232c3c77'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

/* Interest checkbox grid */
.cdob-pe-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 18px;
  margin-top: 8px;
}
.cdob-pe-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cdob-tap-min); /* 44px tap floor */
  cursor: pointer;
}
.cdob-pe-check input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.cdob-pe-check-text {
  font-family: var(--cdob-ff-sans);
  font-size: var(--fs-400);
  color: var(--cdob-ink); /* 16.48:1 */
  line-height: 1.4;
}
.cdob-pe-check-wide {
  max-width: 520px;
}

.cdob-pe-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cdob-pe-checkgrid {
    grid-template-columns: 1fr;
  }
}