/* OtherAI component classes — consumed by the React primitives. */

/* ---------- Buttons ---------- */
.oa-btn {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.oa-btn:active { transform: translateY(0.5px); }
.oa-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.oa-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.oa-btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }
.oa-btn--full { width: 100%; }

.oa-btn--primary { background: var(--ink); color: var(--paper); }
.oa-btn--primary:hover:not(:disabled) { background: var(--gray-800); }

.oa-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.oa-btn--secondary:hover:not(:disabled) { background: var(--gray-050); }

.oa-btn--ghost { background: transparent; color: var(--ink); }
.oa-btn--ghost:hover:not(:disabled) { background: var(--gray-100); }

.oa-btn--primary[data-pillar="blue"] { background: var(--blue); }
.oa-btn--primary[data-pillar="blue"]:hover:not(:disabled) { background: var(--blue-deep); }
.oa-btn--primary[data-pillar="magenta"] { background: var(--magenta); }
.oa-btn--primary[data-pillar="magenta"]:hover:not(:disabled) { background: var(--magenta-deep); }
.oa-btn--primary[data-pillar="gold"] { background: var(--gold); color: var(--ink); }
.oa-btn--primary[data-pillar="gold"]:hover:not(:disabled) { background: #EBA200; }
.oa-btn--primary[data-pillar="green"] { background: var(--green); }
.oa-btn--primary[data-pillar="green"]:hover:not(:disabled) { background: var(--green-deep); }
.oa-btn--primary[data-pillar="coral"] { background: var(--coral); }
.oa-btn--primary[data-pillar="coral"]:hover:not(:disabled) { background: var(--coral-deep); }

.oa-iconbtn {
  width: 44px; height: 44px; padding: 0;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.oa-iconbtn:hover:not(:disabled) { background: var(--gray-100); }
.oa-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.oa-iconbtn--sm { width: 36px; height: 36px; }
.oa-iconbtn--outline { border-color: var(--ink); background: var(--paper); }
.oa-iconbtn--outline:hover:not(:disabled) { background: var(--gray-050); }
.oa-iconbtn--filled { background: var(--ink); color: var(--paper); }
.oa-iconbtn--filled:hover:not(:disabled) { background: var(--gray-800); }

/* ---------- Forms ---------- */
.oa-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.oa-field__label { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-body); }
.oa-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.oa-field__hint--error { color: var(--status-danger); }

.oa-input, .oa-select {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--text-body);
  background: var(--paper);
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
  width: 100%;
}
.oa-input::placeholder { color: var(--text-faint); }
.oa-input:hover:not(:disabled), .oa-select:hover:not(:disabled) { border-color: var(--gray-500); }
.oa-input:focus-visible, .oa-select:focus-visible { outline: var(--focus-outline); outline-offset: 1px; border-color: var(--focus-ring); }
.oa-input:disabled, .oa-select:disabled { background: var(--gray-100); cursor: not-allowed; }
.oa-input--error { border-color: var(--status-danger); }

.oa-select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.oa-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-body-md); }
.oa-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.oa-check__box {
  width: 22px; height: 22px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--gray-500); border-radius: var(--radius-sm);
  background: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  position: relative;
}
.oa-check input:checked + .oa-check__box { background: var(--ink); border-color: var(--ink); }
.oa-check input:focus-visible + .oa-check__box { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.oa-check__box svg { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.oa-check input:checked + .oa-check__box svg { opacity: 1; }

.oa-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-body-md); }
.oa-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.oa-switch__track {
  width: 44px; height: 26px; flex: none; border-radius: var(--radius-pill);
  background: var(--gray-300); position: relative;
  transition: background var(--duration-base) var(--ease-out);
}
.oa-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 3px rgba(11,11,12,0.25);
  transition: transform var(--duration-base) var(--ease-out);
}
.oa-switch input:checked + .oa-switch__track { background: var(--ink); }
.oa-switch input:checked + .oa-switch__track::after { transform: translateX(18px); }
.oa-switch input:focus-visible + .oa-switch__track { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* ---------- Display ---------- */
.oa-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  box-sizing: border-box;
}
.oa-card--feature { border: 1.5px solid var(--ink); box-shadow: none; }
.oa-card--inverse { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.oa-card--flat { box-shadow: none; }

.oa-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
}
.oa-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.oa-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-semibold);
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--paper); color: var(--text-body);
  cursor: default;
}
.oa-tag--selected { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.oa-tag button { all: unset; cursor: pointer; line-height: 0; display: inline-flex; }

.oa-avatar {
  border-radius: 50%; background: var(--gray-200); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  overflow: hidden; flex: none; box-sizing: border-box;
}
.oa-avatar img { width: 100%; height: 100%; object-fit: cover; }

.oa-stripe { display: flex; height: 5px; border-radius: 3px; overflow: hidden; }
.oa-stripe i { flex: 1; }

/* ---------- Navigation ---------- */
.oa-navbar {
  background: var(--paper);
  border-bottom: 1px solid var(--border-subtle);
  height: 68px;
  display: flex; align-items: center;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
  font-family: var(--font-body);
}
.oa-navbar__inner { max-width: var(--container-max); margin: 0 auto; width: 100%; display: flex; align-items: center; gap: var(--space-6); }
.oa-navbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; letter-spacing: var(--tracking-display); color: var(--ink); text-decoration: none; }
.oa-navbar__brand img { width: 32px; height: 32px; }
.oa-navbar__links { display: flex; gap: var(--space-5); margin-left: auto; align-items: center; }
.oa-navbar__link { font-size: 15px; font-weight: var(--weight-semibold); color: var(--gray-700); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.oa-navbar__link:hover { color: var(--ink); }
.oa-navbar__link--active { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--blue); }

.oa-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-body); }
.oa-tab {
  all: unset; cursor: pointer;
  font-size: 15px; font-weight: var(--weight-semibold); color: var(--gray-600);
  padding: 10px 2px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.oa-tab:hover { color: var(--ink); }
.oa-tab:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: 2px; }
.oa-tab--active { color: var(--ink); border-bottom-color: var(--ink); }