/* Components — coa-* design-system classes. */

.coa-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}

.coa-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--coa-blue);
  display: inline-block;
}

.coa-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  white-space: nowrap;
}

.coa-eyebrow--ruled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--coa-gray);
}

.coa-bg-wash { background: var(--gradient-page); }

.coa-bg-navy { background: var(--surface-dark); color: var(--text-on-dark); }

.coa-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.coa-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  text-decoration: none;
}

.coa-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.coa-btn:disabled, .coa-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.coa-btn--sm { padding: 8px 16px; font-size: var(--fs-sm); }

.coa-btn--lg { padding: 16px 30px; font-size: var(--fs-body-lg); }

.coa-btn--primary { background: var(--coa-blue); color: #fff; }

.coa-btn--primary:hover { background: var(--coa-blue-700); }

.coa-btn--primary:active { background: #163FAE; }

.coa-btn--secondary { background: #fff; color: var(--coa-navy); border-color: var(--border-strong); }

.coa-btn--secondary:hover { border-color: var(--coa-blue); color: var(--coa-blue); background: var(--coa-blue-050); }

.coa-btn--ghost { background: transparent; color: var(--coa-blue); }

.coa-btn--ghost:hover { background: var(--coa-blue-050); }

.coa-btn--dark { background: #fff; color: var(--coa-navy); }

.coa-btn--dark:hover { background: var(--coa-gray-light); }

.coa-btn--on-dark { background: transparent; color: #fff; border-color: var(--border-on-dark); }

.coa-btn--on-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.coa-btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; }

.coa-btn__icon svg { width: 100%; height: 100%; }

.coa-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: #fff; color: var(--coa-navy);
  cursor: pointer; transition: all var(--dur-base) var(--ease-standard);
}

.coa-iconbtn:hover { border-color: var(--coa-blue); color: var(--coa-blue); background: var(--coa-blue-050); }

.coa-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.coa-iconbtn--pill { border-radius: var(--radius-pill); }

.coa-iconbtn svg { width: 20px; height: 20px; }

.coa-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.coa-card--flat { box-shadow: none; }

.coa-card--feature { box-shadow: var(--shadow-md); }

.coa-card--interactive { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }

.coa-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.coa-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); letter-spacing: -0.01em; }

.coa-card__body { color: var(--text-body); font-size: var(--fs-body); margin-top: var(--space-2); }

.coa-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-caption); line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill);
}

.coa-badge--blue   { background: var(--coa-blue-100); color: var(--coa-blue-700); }

.coa-badge--navy   { background: var(--coa-navy); color: #fff; }

.coa-badge--success{ background: #DCFCE4; color: #0A8F33; }

.coa-badge--warning{ background: #FFF1D6; color: #9A6500; }

.coa-badge--danger { background: #FFE3D8; color: #C53310; }

.coa-badge--neutral{ background: var(--coa-gray-light); color: var(--coa-navy); }

.coa-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.coa-badge--new { background: var(--coa-blue); color: #fff; }

.coa-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: #fff; color: var(--coa-navy); border: 1px solid var(--border-strong);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-standard);
}

.coa-tag:hover { border-color: var(--coa-blue); color: var(--coa-blue); }

.coa-tag[aria-pressed="true"], .coa-tag--active { background: var(--coa-blue); color: #fff; border-color: var(--coa-blue); }

.coa-tag__x { display: inline-flex; opacity: .6; }

.coa-tag__x:hover { opacity: 1; }

.coa-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }

.coa-field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--coa-navy); }

.coa-field__hint { font-size: var(--fs-caption); color: var(--text-muted); }

.coa-field__hint--error { color: var(--color-danger); }

.coa-input {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-body);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 11px 14px; width: 100%; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.coa-input::placeholder { color: var(--coa-gray-dark); }

.coa-input:hover { border-color: var(--coa-gray-dark); }

.coa-input:focus { outline: none; border-color: var(--coa-blue); box-shadow: var(--shadow-focus); }

.coa-input--error { border-color: var(--color-danger); }

.coa-input--error:focus { box-shadow: 0 0 0 3px rgba(255,83,28,.25); }

.coa-input:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }

.coa-input__wrap { position: relative; display: flex; align-items: center; }

.coa-input__wrap .coa-input { padding-left: 40px; }

.coa-input__icon { position: absolute; left: 13px; display: inline-flex; color: var(--coa-gray-dark); pointer-events: none; }

.coa-input__icon svg { width: 18px; height: 18px; }

.coa-select { position: relative; display: inline-flex; width: 100%; }

.coa-select select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-body);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 11px 40px 11px 14px; width: 100%; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.coa-select select:focus { outline: none; border-color: var(--coa-blue); box-shadow: var(--shadow-focus); }

.coa-select__chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--coa-gray-dark); display: inline-flex; }

.coa-check { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-body); cursor: pointer; }

.coa-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.coa-check__box {
  width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: all var(--dur-fast) var(--ease-standard); color: #fff;
}

.coa-check__box--radio { border-radius: 50%; }

.coa-check input:checked + .coa-check__box { background: var(--coa-blue); border-color: var(--coa-blue); }

.coa-check input:focus-visible + .coa-check__box { box-shadow: var(--shadow-focus); }

.coa-check__box svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-fast); }

.coa-check input:checked + .coa-check__box svg { opacity: 1; }

.coa-check__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity var(--dur-fast); }

.coa-check input:checked + .coa-check__box--radio .coa-check__dot { opacity: 1; }

.coa-switch { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-body); cursor: pointer; }

.coa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.coa-switch__track {
  width: 42px; height: 24px; border-radius: var(--radius-pill); background: var(--coa-gray);
  position: relative; transition: background var(--dur-base) var(--ease-standard); flex: none;
}

.coa-switch__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out); }

.coa-switch input:checked + .coa-switch__track { background: var(--coa-blue); }

.coa-switch input:checked + .coa-switch__track .coa-switch__thumb { transform: translateX(18px); }

.coa-switch input:focus-visible + .coa-switch__track { box-shadow: var(--shadow-focus); }

.coa-tabs { display: inline-flex; gap: 4px; background: var(--surface-sunken); padding: 4px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); }

.coa-tab {
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm);
  padding: 8px 18px; border-radius: var(--radius-pill); border: none; background: transparent;
  color: var(--coa-gray-dark); cursor: pointer; transition: all var(--dur-base) var(--ease-standard); white-space: nowrap;
}

.coa-tab:hover { color: var(--coa-navy); }

.coa-tab--active { background: #fff; color: var(--coa-blue); box-shadow: var(--shadow-xs); }

.coa-tabs--underline { background: transparent; border: none; border-bottom: 1px solid var(--border-default); padding: 0; border-radius: 0; gap: 24px; }

.coa-tabs--underline .coa-tab { border-radius: 0; padding: 12px 2px; background: transparent; box-shadow: none; border-bottom: 2px solid transparent; }

.coa-tabs--underline .coa-tab--active { color: var(--coa-blue); border-bottom-color: var(--coa-blue); }

.coa-callout {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5;
  border: 1px solid transparent;
}

.coa-callout__icon { flex: none; display: inline-flex; margin-top: 1px; }

.coa-callout__icon svg { width: 18px; height: 18px; }

.coa-callout__title { font-weight: var(--fw-semibold); margin-bottom: 2px; }

.coa-callout--info    { background: var(--coa-blue-050); border-color: var(--coa-blue-100); color: var(--coa-navy); }

.coa-callout--info    .coa-callout__icon { color: var(--coa-blue); }

.coa-callout--success { background: #ECFDF1; border-color: #BBF0CC; color: #0A5C26; }

.coa-callout--success .coa-callout__icon { color: var(--color-success); }

.coa-callout--warning { background: #FFF8EC; border-color: #FFE3AE; color: #7A4F00; }

.coa-callout--warning .coa-callout__icon { color: var(--color-warning); }

.coa-callout--danger  { background: #FFF1EC; border-color: #FFD1C2; color: #8A2A0E; }

.coa-callout--danger  .coa-callout__icon { color: var(--color-danger); }

.coa-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; font-family: var(--font-body); font-weight: var(--fw-semibold); color: #fff; background: var(--coa-blue); flex: none; }

.coa-avatar img { width: 100%; height: 100%; object-fit: cover; }

.coa-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

.coa-avatar--md { width: 40px; height: 40px; font-size: 15px; }

.coa-avatar--lg { width: 56px; height: 56px; font-size: 20px; }

.coa-avatar-group { display: inline-flex; }

.coa-avatar-group .coa-avatar { border: 2px solid #fff; margin-left: -8px; }

.coa-avatar-group .coa-avatar:first-child { margin-left: 0; }

.coa-stat { font-family: var(--font-display); }

.coa-stat__value { font-weight: var(--fw-bold); font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--coa-blue); }

.coa-stat__label { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }

.coa-stat--navy .coa-stat__value { color: var(--coa-navy); }

.coa-feature-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); width: 64px; height: 64px; }

.coa-feature-icon svg { width: 30px; height: 30px; }

.coa-feature-icon--blue { background: var(--coa-blue); color: #fff; box-shadow: var(--shadow-icon); }

.coa-feature-icon--navy { background: var(--coa-navy); color: var(--coa-blue); }

.coa-feature-icon--white { background: #fff; color: var(--coa-blue); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }

.coa-feature-icon--soft { background: var(--coa-blue-050); color: var(--coa-blue); }

.coa-logo { display: inline-flex; align-items: center; gap: 0.32em; line-height: 1; }

.coa-logo__mark { display: block; }

.coa-logo__word { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }