/* ============================================================
   Atomify · v2 · components
   ------------------------------------------------------------
   Reusable design-system primitives. Pure tokens-in, classes-out.
   No layout, no page-specific markup, no chrome.
   ============================================================ */

/* ─── 1 · Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 120ms var(--ease-soft),
    box-shadow 180ms ease;
  user-select: none;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
[data-theme="dark"] .btn-primary,
body.dark-mode .btn-primary {
  background: var(--green);
  color: #0B1220;
  border-color: var(--green);
}
[data-theme="dark"] .btn-primary:hover,
body.dark-mode .btn-primary:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--paper-tint);
  border-color: var(--ink-3);
}

.btn-cta {
  background: var(--green-deep);
  color: #FFFFFF;
  border-color: var(--green-deep);
  font-weight: 600;
  padding: 0 2rem;
  letter-spacing: 0;
  min-height: 56px;
}
.btn-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .btn-cta,
body.dark-mode .btn-cta {
  background: var(--green);
  border-color: var(--green);
  color: #0B1220;
}
[data-theme="dark"] .btn-cta:hover,
body.dark-mode .btn-cta:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

.btn-link {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-2);
  transition: color 150ms, background-color 150ms;
}
.btn-link:hover { color: var(--ink); background: var(--paper-tint); }
.btn-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-link svg { width: 14px; height: 14px; opacity: 0.7; }
.btn-link:hover svg { opacity: 1; }

.btn-icon {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.btn-icon:hover {
  background: var(--paper-tint);
  color: var(--ink);
  border-color: var(--line);
}
.btn-icon svg { width: 16px; height: 16px; }

/* ─── 2 · Form fields ───────────────────────────────── */
.field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
  min-height: 56px;
}
.field:focus-within {
  border-color: var(--green-deep);
  box-shadow: var(--focus-ring);
  background: var(--paper);
}
[data-theme="dark"] .field:focus-within,
body.dark-mode .field:focus-within { border-color: var(--green); }

.field-input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 1rem 1.4rem;
  padding-right: 3rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
  min-width: 0;
  width: 100%;
}
.field-input::placeholder {
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 400;
}

.field-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms, background-color 150ms, color 150ms;
}
.field[data-has-value="true"] .field-clear {
  opacity: 1;
  pointer-events: auto;
}
.field-clear:hover { background: var(--paper-tint); color: var(--ink); }
.field-clear svg { width: 14px; height: 14px; }

/* Compact field variant — body-sized text instead of display */
.field--compact .field-input {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  font-variation-settings: normal;
  padding: 0.7rem 1rem;
  padding-right: 2.6rem;
}
.field--compact { min-height: 44px; }

/* ─── 3 · Tables ─────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.data-table thead th.right { text-align: right; }
.data-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: 0.94rem;
  color: var(--ink);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color 150ms; }
.data-table tbody tr:hover { background: var(--paper); }
.data-table .right { text-align: right; }
.table-wrap { overflow-x: auto; }

/* ─── 4 · Panels (cards / regions) ──────────────────── */
.panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.panel-body { padding: 1.5rem; }

/* ─── 5 · Status bands (loading / error / success) ──── */
.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.4rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--paper-2);
}
.status--error {
  color: var(--amber);
  border-color: var(--amber-tint);
  border-left: 3px solid var(--amber);
  background: var(--amber-tint);
}
.status--success {
  color: var(--green-deep);
  border-color: var(--green-tint);
  border-left: 3px solid var(--green-deep);
  background: var(--green-tint);
}
[data-theme="dark"] .status--success,
body.dark-mode .status--success {
  color: var(--green);
  border-left-color: var(--green);
}
.status--loading { color: var(--ink-muted); }
.status--loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--green-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── 6 · Pills (small inline tags) ─────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill--green  { background: var(--green-tint);  color: var(--green-deep);  border-color: transparent; }
.pill--amber  { background: var(--amber-tint);  color: var(--amber);       border-color: transparent; }
.pill--cobalt { background: var(--cobalt-tint); color: var(--cobalt);      border-color: transparent; }
.pill--gold   { background: var(--gold-tint);   color: var(--gold);        border-color: transparent; }
[data-theme="dark"] .pill--green,
body.dark-mode .pill--green { color: var(--green); }

/* ─── 7 · Periodic-table cell — chemistry-specific atom badge ── */
.pt-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  position: relative;
  text-align: center;
  flex-shrink: 0;
}
.pt-cell-symbol {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.pt-cell-num {
  position: absolute;
  top: 4px;
  left: 5px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--ink-muted);
  font-feature-settings: "tnum";
}
.pt-cell--sm { width: 36px; height: 36px; }
.pt-cell--sm .pt-cell-symbol { font-size: 0.85rem; }
.pt-cell--sm .pt-cell-num { font-size: 0.5rem; top: 3px; left: 4px; }

/* ─── 8 · Progress bars ─────────────────────────────── */
.progress-bar {
  height: 4px;
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  border-radius: 2px;
  transition: width 600ms var(--ease-out);
}
[data-theme="dark"] .progress-bar::after,
body.dark-mode .progress-bar::after {
  background: linear-gradient(90deg, var(--green), var(--green-bright));
}