/* ===========================================================================
   Everest components, ported from the design system's React components.
   CSS copied verbatim; class names (ev-*) unchanged.
   =========================================================================== */

/* ---- Button (components/buttons/Button.jsx) ----
   Markup: <a|button class="ev-btn ev-btn--lg ev-btn--primary [ev-btn--outline] [ev-btn--block]">
             <iconify-icon icon="mdi:..."></iconify-icon><span>Label</span></a|button> */
.ev-btn{
  --_bg: var(--green-600); --_bgh: var(--green-700); --_fg:#fff; --_bd: transparent;
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border-radius: var(--radius-pill); border:1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  cursor:pointer; white-space:nowrap; text-decoration:none; line-height:1;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform .08s ease, box-shadow var(--dur-fast) var(--ease-standard);
}
.ev-btn:hover{ background: var(--_bgh); }
.ev-btn:active{ transform: scale(.97); }
.ev-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--_bg) 40%, transparent); }
.ev-btn--block{ width:100%; }
.ev-btn[disabled], .ev-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* sizes */
.ev-btn--sm{ font-size:13px; padding:7px 16px; }
.ev-btn--md{ font-size:15px; padding:9px 20px; }
.ev-btn--lg{ font-size:16px; padding:13px 28px; }

/* color · variant=solid (default) */
.ev-btn--primary{ --_bg:var(--green-600); --_bgh:var(--green-700); --_fg:#fff; }
.ev-btn--yellow{ --_bg:var(--yellow-500); --_bgh:var(--yellow-600); --_fg:var(--ink-900); }
.ev-btn--ink{ --_bg:var(--ink-900); --_bgh:var(--ink-800); --_fg:#fff; }
.ev-btn--white{ --_bg:#fff; --_bgh:var(--gray-100); --_fg:var(--ink-900); --_bd:var(--gray-200); }

/* variant=soft */
.ev-btn--soft.ev-btn--primary{ --_bg:var(--green-50); --_bgh:var(--green-100); --_fg:var(--green-700); }
.ev-btn--soft.ev-btn--yellow{ --_bg:var(--warning-bg); --_bgh:#fdf0c0; --_fg:var(--yellow-700); }
.ev-btn--soft.ev-btn--ink{ --_bg:var(--gray-100); --_bgh:var(--gray-200); --_fg:var(--ink-900); }

/* variant=outline */
.ev-btn--outline{ --_bg:transparent; }
.ev-btn--outline.ev-btn--primary{ --_fg:var(--green-700); --_bd:var(--green-600); --_bgh:var(--green-50); }
.ev-btn--outline.ev-btn--ink{ --_fg:var(--ink-900); --_bd:var(--gray-300); --_bgh:var(--gray-100); }
.ev-btn--outline.ev-btn--yellow{ --_fg:var(--yellow-700); --_bd:var(--yellow-500); --_bgh:var(--warning-bg); }

/* variant=ghost */
.ev-btn--ghost{ --_bg:transparent; --_bd:transparent; }
.ev-btn--ghost.ev-btn--primary{ --_fg:var(--green-700); --_bgh:var(--green-50); }
.ev-btn--ghost.ev-btn--ink{ --_fg:var(--ink-900); --_bgh:var(--gray-100); }

.ev-btn iconify-icon{ font-size:1.25em; }

/* ---- Card (components/display/Card.jsx) ----
   Markup: <div class="ev-card [is-dark] [is-flat]"><div class="ev-card__header">…</div>
             <div class="ev-card__body [pad-sm|pad-lg]">…</div><div class="ev-card__footer">…</div></div> */
.ev-card{ background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); overflow:hidden; }
.ev-card.is-flat{ box-shadow:none; }
.ev-card.is-dark{ background:var(--surface-dark); border-color:transparent; color:var(--text-on-dark); }
.ev-card__header{ padding:18px 20px; border-bottom:1px solid var(--border-default); font-weight:var(--fw-bold); color:var(--text-strong); }
.ev-card__body{ padding:20px; }
.ev-card__body.pad-sm{ padding:14px; }
.ev-card__body.pad-lg{ padding:28px; }
.ev-card__footer{ padding:16px 20px; border-top:1px solid var(--border-default); }
.ev-card.is-dark .ev-card__header, .ev-card.is-dark .ev-card__footer{ border-color:rgba(255,255,255,.12); color:#fff; }

/* ---- Badge (components/display/Badge.jsx) ----
   Markup: <span class="ev-badge ev-badge--yellow [ev-badge--solid] [ev-badge--sm]">…</span> */
.ev-badge{ display:inline-flex; align-items:center; gap:.35em; font-family:var(--font-sans);
  font-weight:var(--fw-bold); font-size:13px; line-height:1; padding:5px 12px; border-radius:var(--radius-pill);
  --_bg:var(--green-50); --_fg:var(--green-700); background:var(--_bg); color:var(--_fg); white-space:nowrap; }
.ev-badge--solid{ --_bg:var(--green-600); --_fg:#fff; }
.ev-badge--primary{ --_bg:var(--green-50); --_fg:var(--green-700); }
.ev-badge--yellow{ --_bg:var(--warning-bg); --_fg:var(--yellow-700); }
.ev-badge--ink{ --_bg:var(--gray-100); --_fg:var(--ink-900); }
.ev-badge--solid.ev-badge--yellow{ --_bg:var(--yellow-500); --_fg:var(--ink-900); }
.ev-badge--solid.ev-badge--ink{ --_bg:var(--ink-900); --_fg:#fff; }
.ev-badge--sm{ font-size:11px; padding:3px 9px; }
.ev-badge iconify-icon{ font-size:1.05em; }

/* ---- SectionTitle (components/display/SectionTitle.jsx) ----
   Markup: <div class="ev-section-title [is-start] [on-dark]"><h2>…</h2><span class="bar"></span><p class="sub">…</p></div> */
.ev-section-title{ text-align:center; margin-bottom:28px; }
.ev-section-title.is-start{ text-align:start; }
.ev-section-title h2{ margin:0; font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-section); color:var(--text-strong); line-height:var(--leading-tight); }
.ev-section-title.on-dark h2{ color:var(--text-on-dark); }
.ev-section-title .bar{ display:inline-block; width:80px; height:4px; margin-top:12px;
  background:var(--brand-primary); border-radius:var(--radius-pill); }
.ev-section-title.is-start .bar{ display:block; }
.ev-section-title .sub{ margin:10px auto 0; max-width:54ch; font-size:16px; color:var(--text-muted); }
.ev-section-title.on-dark .sub{ color:var(--text-on-dark-muted); }

/* ---- FormField + Input (components/forms/FormField.jsx, Input.jsx) ----
   Markup: <div class="ev-field"><label class="ev-field__label" for="x">…<span class="req">*</span></label>
             <div class="ev-input-wrap"><iconify-icon icon="mdi:…"></iconify-icon>
             <input class="ev-input ev-size-lg has-icon [ev--invalid]"></div>
             <div class="ev-field__error">…</div></div> */
.ev-field{ display:block; }
.ev-field__label{ display:block; font-family:var(--font-sans); font-weight:var(--fw-medium);
  font-size:14px; color:var(--text-strong); margin-bottom:6px; }
.ev-field__label .req{ color:var(--error); margin-inline-start:2px; }
.ev-field__hint{ font-size:12px; color:var(--text-muted); margin-top:6px; }
.ev-field__error{ font-size:12px; color:var(--error); margin-top:6px; font-weight:var(--fw-medium); }

.ev-input, .ev-textarea, .ev-select{
  width:100%; box-sizing:border-box; font-family:var(--font-sans);
  background:var(--white); color:var(--text-strong);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  outline:none;
}
.ev-input::placeholder, .ev-textarea::placeholder{ color:var(--gray-400); }
.ev-input:focus, .ev-textarea:focus, .ev-select:focus{
  border-color:var(--green-500); box-shadow:0 0 0 3px color-mix(in srgb, var(--green-500) 22%, transparent);
}
.ev-input:disabled, .ev-textarea:disabled, .ev-select:disabled{ background:var(--gray-100); color:var(--gray-400); cursor:not-allowed; }
.ev--invalid{ border-color:var(--error) !important; }
.ev--invalid:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent) !important; }

/* sizes */
.ev-size-sm{ font-size:13px; padding:7px 12px; }
.ev-size-md{ font-size:15px; padding:9px 14px; }
.ev-size-lg{ font-size:16px; padding:12px 16px; }

.ev-input-wrap{ position:relative; display:flex; align-items:center; }
.ev-input-wrap iconify-icon{ position:absolute; inset-inline-start:14px; color:var(--gray-400); font-size:20px; pointer-events:none; }
.ev-input-wrap .ev-input.has-icon{ padding-inline-start:42px; }

.ev-select-wrap{ position:relative; }
.ev-select{ appearance:none; -webkit-appearance:none; padding-inline-end:38px; cursor:pointer; }
.ev-select-wrap iconify-icon{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:22px; pointer-events:none; }
.ev-textarea{ resize:vertical; min-height:96px; line-height:1.6; }