/* ============================================================================
   UI kit (from the berrones.co blog) — form + layout components.
   Church site: light only, colors from shadcn preset b2FsTE3Dhw (base-vega). Dark-mode blocks removed.
   Structure and sizing follow shadcn/ui (preset base-nova · neutral · yellow ·
   Inter · radius 0.625rem), rewritten as plain CSS so posts and templates can
   use them with no build step. Edit tokens here; components inherit them.
   Usage: class names `ui-*`. Shortcodes in layouts/shortcodes/ui/ emit them.
   Lives in assets/ (not static/) so Hugo fingerprints it; see baseof.html.
   ========================================================================== */

/* ---- Tokens (light) ----------------------------------------------------- */
:root {
  --ui-background: var(--paper, #faf9f5);
  --ui-foreground: var(--ink, #0a0a0a);
  --ui-card: #ffffff;
  --ui-card-foreground: var(--ui-foreground);
  --ui-primary: #2e6b33;              /* logo-hue green, 6.4:1 with white */
  --ui-primary-hover: #255629;        /* a step darker on hover */
  --ui-primary-foreground: #ffffff;
  --ui-secondary: #f4f4f5;
  --ui-secondary-hover: #e8e8ea;      /* color-mix(secondary, foreground 5%) */
  --ui-secondary-foreground: #18181b;
  --ui-muted: #f5f5f5;
  --ui-muted-foreground: #737373;
  --ui-accent: #f5f5f5;
  --ui-accent-foreground: #171717;
  --ui-destructive: #e7000b;
  --ui-destructive-soft: rgb(231 0 11 / 0.10);
  --ui-destructive-soft-hover: rgb(231 0 11 / 0.20);
  --ui-border: #e5e5e5;
  --ui-input: #e5e5e5;
  --ui-input-fill: transparent;
  --ui-ring: #a1a1a1;
  --ui-ring-soft: rgb(161 161 161 / 0.50);
  --ui-shadow-ring: rgb(39 39 42 / 0.10);  /* ring-1 ring-foreground/10 */

  --ui-radius: 0.625rem;                           /* radius */
  --ui-radius-md: calc(var(--ui-radius) - 2px);
  --ui-radius-lg: var(--ui-radius);
  --ui-radius-xl: calc(var(--ui-radius) + 4px);

  --ui-font: var(--font-sans, "Inter", system-ui, sans-serif);
  --ui-font-heading: var(--font-display, var(--ui-font));

  /* Control heights: shadcn ships 28/32/36. Scaled one step for a 16px reading site. */
  --ui-h-sm: 2rem;      /* 32px */
  --ui-h: 2.25rem;      /* 36px */
  --ui-h-lg: 2.75rem;   /* 44px — full-width CTAs */
}


/* ---- Box model ----------------------------------------------------------- */
/* Every kit element sizes to its border box, so width:100% + padding never spills past the column. */
[class^="ui-"], [class*=" ui-"], [class^="ui-"]::before, [class^="ui-"]::after { box-sizing: border-box; }

/* ---- Shared focus / invalid states -------------------------------------- */
.ui-input, .ui-textarea, .ui-select, .ui-btn, .ui-checkbox, .ui-radio, .ui-switch {
  font-family: var(--ui-font);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.ui-input:focus-visible, .ui-textarea:focus-visible, .ui-select:focus-visible, .ui-btn:focus-visible,
.ui-checkbox:focus-visible, .ui-radio:focus-visible, .ui-switch:focus-visible {
  border-color: var(--ui-ring);
  box-shadow: 0 0 0 3px var(--ui-ring-soft);
}
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .ui-select[aria-invalid="true"],
.ui-field[data-invalid="true"] .ui-input, .ui-field[data-invalid="true"] .ui-textarea, .ui-field[data-invalid="true"] .ui-select {
  border-color: var(--ui-destructive);
  box-shadow: 0 0 0 3px rgb(231 0 11 / 0.20);
}

/* ---- Button -------------------------------------------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  flex-shrink: 0; height: var(--ui-h); padding: 0 .75rem;
  border: 1px solid transparent; border-radius: var(--ui-radius-lg);
  background-clip: padding-box;
  font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  background-color: var(--ui-primary); color: var(--ui-primary-foreground);   /* variant: default */
}
.ui-btn:hover { background-color: var(--ui-primary-hover); color: var(--ui-primary-foreground); }
.ui-btn:active:not([aria-haspopup]) { transform: translateY(1px); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.ui-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }

.ui-btn-secondary { background-color: var(--ui-secondary); color: var(--ui-secondary-foreground); }
.ui-btn-secondary:hover { background-color: var(--ui-secondary-hover); color: var(--ui-secondary-foreground); }

.ui-btn-outline { background-color: var(--ui-background); color: var(--ui-foreground); border-color: var(--ui-border); }
.ui-btn-outline:hover { background-color: var(--ui-muted); color: var(--ui-foreground); }

.ui-btn-ghost { background-color: transparent; color: var(--ui-foreground); }
.ui-btn-ghost:hover { background-color: var(--ui-muted); color: var(--ui-foreground); }

.ui-btn-destructive { background-color: var(--ui-destructive-soft); color: var(--ui-destructive); }
.ui-btn-destructive:hover { background-color: var(--ui-destructive-soft-hover); color: var(--ui-destructive); }
.ui-btn-destructive:focus-visible { border-color: rgb(231 0 11 / 0.40); box-shadow: 0 0 0 3px rgb(231 0 11 / 0.20); }

.ui-btn-link { background-color: transparent; color: var(--link, var(--ui-primary-foreground)); height: auto; padding: 0; text-underline-offset: 4px; }
.ui-btn-link:hover { background-color: transparent; text-decoration: underline; }

.ui-btn-sm { height: var(--ui-h-sm); padding: 0 .625rem; font-size: .8rem; border-radius: min(var(--ui-radius-md), 12px); gap: .25rem; }
.ui-btn-sm svg { width: .875rem; height: .875rem; }
.ui-btn-lg { height: var(--ui-h-lg); padding: 0 1.125rem; font-size: 1rem; }
.ui-btn-icon { width: var(--ui-h); padding: 0; }
.ui-btn-block { display: flex; width: 100%; }

/* ---- Label / Field ------------------------------------------------------- */
.ui-label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ui-font); font-size: .875rem; font-weight: 500; line-height: 1; user-select: none;
}
.ui-field { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.ui-field > * { width: 100%; }
.ui-field-horizontal { flex-direction: row; align-items: center; }
.ui-field-horizontal > * { width: auto; }
.ui-field-horizontal > .ui-label { flex: 1 1 auto; }
.ui-field[data-disabled="true"] { opacity: .5; pointer-events: none; }
.ui-field[data-invalid="true"] .ui-label { color: var(--ui-destructive); }

.ui-field-description {
  margin: 0; font-family: var(--ui-font); font-size: .875rem; line-height: 1.5; font-weight: 400;
  color: var(--ui-muted-foreground); text-align: left;
}
.ui-field-description a { text-decoration: underline; text-underline-offset: 4px; }
.ui-field-error { margin: 0; font-family: var(--ui-font); font-size: .875rem; color: var(--ui-destructive); }
.ui-field-error:empty { display: none; }

.ui-field-group { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.ui-fieldset { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-legend { margin: 0 0 .375rem; padding: 0; font-family: var(--ui-font); font-size: 1rem; font-weight: 500; }
.ui-legend-label { font-size: .875rem; }

/* Label row for a check / radio / switch: the whole row is clickable */
.ui-choice {
  display: flex; align-items: flex-start; gap: .5rem; width: fit-content;
  font-family: var(--ui-font); font-size: .875rem; font-weight: 500; line-height: 1.375; cursor: pointer; user-select: none;
}
.ui-choice .ui-field-description { font-weight: 400; margin-top: .125rem; }
.ui-choice-body { display: flex; flex-direction: column; gap: .125rem; }
/* Boxed variant: `has-[>field]` border card in shadcn */
.ui-choice-boxed {
  width: 100%; padding: .625rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}
.ui-choice-boxed:hover { background-color: color-mix(in srgb, var(--ui-muted) 50%, transparent); }
.ui-choice-boxed:has(:checked) { border-color: rgb(253 199 0 / 0.30); background-color: rgb(253 199 0 / 0.05); }
.ui-choice-boxed:has(:focus-visible) { border-color: var(--ui-ring); box-shadow: 0 0 0 3px var(--ui-ring-soft); }

/* ---- Input / Textarea ---------------------------------------------------- */
.ui-input, .ui-textarea, .ui-select {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--ui-input); border-radius: var(--ui-radius-lg);
  background-color: var(--ui-input-fill); color: var(--ui-foreground);
  font-size: 1rem; line-height: 1.4;          /* 16px on phones avoids iOS zoom */
}
@media (min-width: 768px) { .ui-input, .ui-textarea, .ui-select { font-size: .875rem; } }
.ui-input { height: var(--ui-h); padding: .25rem .75rem; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-muted-foreground); }
.ui-input:disabled, .ui-textarea:disabled, .ui-select:disabled {
  cursor: not-allowed; opacity: .5; background-color: color-mix(in srgb, var(--ui-input) 50%, transparent);
}
.ui-input[type="number"] { font-variant-numeric: tabular-nums; }
.ui-input::file-selector-button {
  display: inline-flex; height: 1.5rem; border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 500; color: var(--ui-foreground);
}
.ui-input-sm { height: var(--ui-h-sm); font-size: .85rem; }
.ui-input-lg { height: var(--ui-h-lg); }

.ui-textarea { min-height: 4rem; padding: .5rem .75rem; resize: vertical; field-sizing: content; }

/* Input with a leading / trailing unit, e.g. "$" or "%" */
.ui-input-group { display: flex; align-items: center; width: 100%; }
.ui-input-group .ui-input { flex: 1 1 auto; }
.ui-input-group .ui-input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.ui-input-group .ui-input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-input-addon {
  display: inline-flex; align-items: center; height: var(--ui-h); padding: 0 .75rem;
  border: 1px solid var(--ui-input); background-color: var(--ui-muted); color: var(--ui-muted-foreground);
  font-family: var(--ui-font); font-size: .875rem; white-space: nowrap;
}
.ui-input-addon:first-child { border-radius: var(--ui-radius-lg) 0 0 var(--ui-radius-lg); border-right-width: 0; }
.ui-input-addon:last-child { border-radius: 0 var(--ui-radius-lg) var(--ui-radius-lg) 0; border-left-width: 0; }

/* ---- Select (native, styled like the shadcn trigger) --------------------- */
.ui-select {
  height: var(--ui-h); padding: .25rem 2rem .25rem .75rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4'/><path d='M16 15l-4 4-4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .5rem center; background-size: 1rem;
}
.ui-select:hover { background-color: color-mix(in srgb, var(--ui-input) 30%, transparent); }
.ui-select option { color: var(--ui-foreground); background-color: var(--ui-card); }
.ui-select-sm { height: var(--ui-h-sm); font-size: .85rem; border-radius: min(var(--ui-radius-md), 10px); }

/* ---- Slider (native range, styled) --------------------------------------- */
.ui-slider {
  --ui-slider-pct: 50%;                 /* set by ui.js so the filled part is primary */
  display: block; width: 100%; height: 1.5rem; margin: 0; padding: 0;
  background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: none;
}
.ui-slider:disabled { opacity: .5; cursor: not-allowed; }
.ui-slider:focus { outline: none; }
/* track */
.ui-slider::-webkit-slider-runnable-track {
  height: .25rem; border-radius: 9999px;
  background: linear-gradient(to right, var(--ui-primary) 0 var(--ui-slider-pct), var(--ui-muted) var(--ui-slider-pct) 100%);
}
.ui-slider::-moz-range-track { height: .25rem; border-radius: 9999px; background: var(--ui-muted); }
.ui-slider::-moz-range-progress { height: .25rem; border-radius: 9999px; background: var(--ui-primary); }
/* thumb: size-3, white, 1px ring border; 3px soft ring on hover/active/focus */
.ui-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: .75rem; height: .75rem; margin-top: -.25rem;
  border-radius: 9999px; border: 1px solid var(--ui-ring); background: #ffffff;
  box-shadow: 0 0 0 0 var(--ui-ring-soft); transition: box-shadow .15s ease;
}
.ui-slider::-moz-range-thumb {
  width: .75rem; height: .75rem; border-radius: 9999px; border: 1px solid var(--ui-ring); background: #ffffff;
  box-shadow: 0 0 0 0 var(--ui-ring-soft); transition: box-shadow .15s ease;
}
.ui-slider:hover::-webkit-slider-thumb, .ui-slider:active::-webkit-slider-thumb, .ui-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ui-ring-soft); }
.ui-slider:hover::-moz-range-thumb, .ui-slider:active::-moz-range-thumb, .ui-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ui-ring-soft); }

/* Slider row: label on the left, live value on the right */
.ui-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ui-slider-value {
  font-family: var(--ui-font); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ui-foreground);
}
.ui-slider-scale { display: flex; justify-content: space-between; font-family: var(--ui-font); font-size: .75rem; color: var(--ui-muted-foreground); }

/* ---- Checkbox / Radio / Switch (native inputs, custom paint) ------------- */
.ui-checkbox, .ui-radio, .ui-switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; position: relative;
  border: 1px solid var(--ui-input); background-color: var(--ui-input-fill);
}
.ui-checkbox:disabled, .ui-radio:disabled, .ui-switch:disabled { cursor: not-allowed; opacity: .5; }
/* enlarge the hit area without changing the visual (after:-inset) */
.ui-checkbox::after, .ui-radio::after, .ui-switch::after { content: ""; position: absolute; inset: -.5rem -.75rem; }

.ui-checkbox { width: 1rem; height: 1rem; border-radius: 4px; display: inline-grid; place-content: center; }
.ui-checkbox:checked { border-color: var(--ui-primary); background-color: var(--ui-primary); }
.ui-checkbox:checked::before {
  content: ""; width: .875rem; height: .875rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23733e0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat;
}

.ui-radio { width: 1rem; height: 1rem; border-radius: 9999px; display: inline-grid; place-content: center; }
.ui-radio:checked { border-color: var(--ui-primary); background-color: var(--ui-primary); }
.ui-radio:checked::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--ui-primary-foreground); }
.ui-radio-group { display: grid; gap: .5rem; width: 100%; }

.ui-switch {
  width: 2rem; height: 1.15rem; border-radius: 9999px; border-color: transparent;
  background-color: var(--ui-input); display: inline-block; vertical-align: middle;
}
.ui-switch::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 9999px;
  background-color: var(--ui-background); transition: transform .15s ease, background-color .15s ease;
}
.ui-switch:checked { background-color: var(--ui-primary); }
.ui-switch:checked::before { transform: translateX(calc(100% - 2px)); background-color: var(--ui-background); }
.ui-switch-sm { width: 1.5rem; height: .875rem; }
.ui-switch-sm::before { width: .75rem; height: .75rem; }

/* ---- Card ---------------------------------------------------------------- */
.ui-card {
  --ui-card-spacing: 1rem;
  display: flex; flex-direction: column; gap: var(--ui-card-spacing); overflow: hidden;
  padding: var(--ui-card-spacing) 0; border-radius: var(--ui-radius-xl);
  background-color: var(--ui-card); color: var(--ui-card-foreground);
  box-shadow: 0 0 0 1px var(--ui-shadow-ring);
  font-family: var(--ui-font); font-size: .875rem; line-height: 1.5;
}
.ui-card-sm { --ui-card-spacing: .75rem; }
.ui-card:has(> .ui-card-footer) { padding-bottom: 0; }
.ui-card-header { display: grid; gap: .25rem; padding: 0 var(--ui-card-spacing); }
/* Doubled selectors beat the post-content heading/paragraph rules (.post-content h3, p:not(:first-child)) */
.ui-card .ui-card-title, .post-content .ui-card .ui-card-title {
  font-family: var(--ui-font-heading); font-size: 1rem; font-weight: 600; line-height: 1.375; letter-spacing: 0; margin: 0;
}
.ui-card-sm .ui-card-title, .post-content .ui-card-sm .ui-card-title { font-size: .875rem; }
.ui-card .ui-card-description, .post-content .ui-card .ui-card-description { margin: 0; font-size: .875rem; line-height: 1.25rem; color: var(--ui-muted-foreground); }
.ui-card-content { padding: 0 var(--ui-card-spacing); }
.ui-card-content > :first-child { margin-top: 0; }
.ui-card-content > :last-child { margin-bottom: 0; }
.ui-card-footer {
  display: flex; align-items: center; gap: .5rem; padding: var(--ui-card-spacing);
  border-top: 1px solid var(--ui-border); background-color: color-mix(in srgb, var(--ui-muted) 50%, transparent);
}

/* ---- Result (calculator output) ------------------------------------------ */
.ui-result { display: flex; flex-direction: column; gap: .25rem; }
.ui-result-label { font-family: var(--ui-font); font-size: .875rem; color: var(--ui-muted-foreground); }
.ui-result-value {
  font-family: var(--ui-font-heading); font-size: 2rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ui-foreground);
}
.ui-result-note { font-family: var(--ui-font); font-size: .8rem; color: var(--ui-muted-foreground); }
.ui-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.ui-result-grid .ui-result-value { font-size: 1.5rem; }

/* ---- Layout helpers ------------------------------------------------------ */
.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
.ui-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ui-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .ui-grid-2 { grid-template-columns: 1fr 1fr; } }
.ui-separator { border: 0; height: 1px; margin: .25rem 0; background-color: var(--ui-border); }

/* Kit blocks dropped straight into a post get the same rhythm as paragraphs */
.post-content > .ui-card, .post-content > .ui-stack, .post-content > .ui-row,
.post-content > .ui-fieldset, .post-content > .ui-field, .post-content > .ui-form,
.post-content > .ui-choice, .post-content > .ui-result, .post-content > .ui-result-grid,
.post-content > .ui-acc { margin: 1.25em 0; }

/* Posts set `em` to muted; keep component text in the component's own color */
.ui-card em, .ui-field em { color: inherit; }
/* Paragraph rhythm inside the kit: the site's p:not(:first-child) gap does not apply here.
   Prose paragraphs inside a card get 8px; field descriptions/errors sit tight under controls. */
.ui-card p, .ui-form p, .ui-field p, .ui-choice p, .ui-fieldset p { margin: 0; }
.ui-card p + p, .ui-form p + p { margin-top: .5rem; }
.ui-field .ui-field-description, .ui-field .ui-field-error { margin-top: 0; }
.ui-card .ui-card-content > p + p { margin-top: .5rem; }

/* ---- Modal (native <dialog>) ---------------------------------------------- */
dialog.ui-modal {
  width: min(28rem, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 0;
  border: 0; border-radius: var(--ui-radius-xl); background: transparent; color: var(--ui-foreground);
  overflow: visible;
}
dialog.ui-modal::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(2px); }
html.ui-modal-open { overflow: hidden; }
html.ui-modal-open body { overscroll-behavior: none; }
.ui-modal-panel {
  position: relative; padding: 1.5rem; border-radius: var(--ui-radius-xl);
  background-color: var(--ui-card); color: var(--ui-card-foreground);
  box-shadow: 0 0 0 1px var(--ui-shadow-ring), 0 20px 50px -12px rgb(0 0 0 / 0.35);
  font-family: var(--ui-font); font-size: .875rem; line-height: 1.5;
}
.ui-modal-close {
  position: absolute; top: .75rem; right: .75rem; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--ui-radius-md);
  background: transparent; color: var(--ui-muted-foreground); cursor: pointer;
}
.ui-modal-close:hover { background-color: var(--ui-muted); color: var(--ui-foreground); }
.ui-modal-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring-soft); }
.ui-modal-header { display: grid; gap: .25rem; padding-right: 1.75rem; }
.ui-modal .ui-modal-title, .post-content .ui-modal .ui-modal-title {
  margin: 0; font-family: var(--ui-font-heading); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: 0;
}
.ui-modal .ui-modal-blurb, .post-content .ui-modal .ui-modal-blurb { margin: 0; color: var(--ui-muted-foreground); }
.ui-label-hint { font-weight: 400; color: var(--ui-muted-foreground); }
/* Phones: anchor the modal near the top so the keyboard never covers the fields; the panel scrolls if taller than the screen. */
@media (max-width: 640px) {
  dialog.ui-modal { margin: max(0.75rem, env(safe-area-inset-top)) auto auto; width: calc(100vw - 1.5rem); }
  .ui-modal-panel { max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: 1.25rem; }
}
/* Open animation runs once; focusing a field must not re-trigger it */
@media (prefers-reduced-motion: no-preference) {
  dialog.ui-modal[open] { animation: ui-modal-in .15s ease-out; animation-fill-mode: both; }
  @keyframes ui-modal-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* ---- Ajax form states (ui.js) --------------------------------------------- */
.ui-form-error[hidden], .ui-form-success[hidden], .ui-form-fields[hidden] { display: none; }
.ui-form-error { margin: 0; font-size: .875rem; color: var(--ui-destructive); }
.ui-form-success { display: flex; flex-direction: column; gap: 1rem; }
.ui-form[data-ui-busy] .ui-btn[type="submit"] { pointer-events: none; opacity: .7; }

/* ---- Accordion (native <details>, shadcn base-nova look) ------------------ */
.ui-acc { display: flex; flex-direction: column; width: 100%; }
.ui-acc-item { border-bottom: 1px solid var(--ui-border); }
.ui-acc-item:last-child { border-bottom: 0; }
.ui-acc-item > summary {
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .75rem 0; border: 1px solid transparent; border-radius: var(--ui-radius-lg);
  font-family: var(--ui-font); font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left;
  color: var(--ui-foreground); cursor: pointer; outline: none; user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-acc-item > summary::-webkit-details-marker, .ui-acc-item > summary::marker { display: none; content: ""; }
.ui-acc-item > summary:hover .ui-acc-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ui-acc-item > summary:focus-visible { border-color: var(--ui-ring); box-shadow: 0 0 0 3px var(--ui-ring-soft); }
/* Doubled selectors beat the post heading rules */
.ui-acc .ui-acc-title, .post-content .ui-acc .ui-acc-title {
  margin: 0; font: inherit; letter-spacing: 0; color: inherit; scroll-margin-top: 5rem;
}
.ui-acc-subtitle { display: block; margin-top: .125rem; font-size: .875rem; font-weight: 400; line-height: 1.25rem; color: var(--ui-muted-foreground); }
.ui-acc-chevron { flex-shrink: 0; width: 1rem; height: 1rem; margin-left: auto; margin-top: .25rem; color: var(--ui-muted-foreground); pointer-events: none; transition: transform .2s ease; }
.ui-acc-item[open] > summary .ui-acc-chevron { transform: rotate(180deg); }
.ui-acc-content { overflow: hidden; }
.ui-acc-body { padding: 0 0 1rem; font-family: var(--font-sans); }
.ui-acc-body > * { margin-top: 0; margin-bottom: 0; }
.ui-acc-body > * + * { margin-top: 1rem; }
.ui-acc-body a:not(.ui-btn) { text-decoration: underline; text-underline-offset: 3px; }
/* Compact: true shadcn sizes (14px) */
.ui-acc-sm > .ui-acc-item > summary { font-size: .875rem; padding: .625rem 0; }
.ui-acc-sm .ui-acc-body { font-size: .875rem; padding-bottom: .625rem; }
@media (prefers-reduced-motion: reduce) { .ui-acc-chevron { transition: none; } }

/* ---- Honeypot (lead forms) ----------------------------------------------- */
.ui-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }