/* components — buttons, chips, inputs, cards, dialog */

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 13px/1 var(--font-ui);
  letter-spacing: 0.01em;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--paper-3); }
.btn:active { transform: translateY(1px); }

.btn--ink     { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-2); }

.btn--coral   { background: var(--coral); color: var(--paper); border-color: var(--coral); }
.btn--coral:hover { background: var(--coral-2); }

.btn--lemon   { background: var(--lemon); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-pop); }
.btn--lemon:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn--lemon:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.btn--violet  { background: var(--violet); color: var(--paper); border-color: var(--violet); }
.btn--violet:hover { background: var(--violet-2); }

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

.btn--xs { height: 24px; padding: 0 9px; font-size: 11px; }
.btn--sm { height: 28px; padding: 0 11px; font-size: 12px; }
.btn--icon { width: 34px; padding: 0; justify-content: center; }
.btn--icon.btn--xs { width: 24px; }
.btn--icon.btn--sm { width: 28px; }

/* ============== Inputs ============== */
.input {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-2);
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  font: 14px var(--font-ui);
  width: 100%;
}
.input:focus { border-color: var(--ink); background: var(--paper-2); }
.input::placeholder { color: var(--whisper-soft); }

textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }

/* ============== Chips / tags ============== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.chip--topic {
  font-family: var(--font-mono); text-transform: lowercase; font-weight: 500;
  background: color-mix(in srgb, var(--accent, var(--coral)) 8%, var(--paper-2));
  border-color: color-mix(in srgb, var(--accent, var(--coral)) 22%, var(--hairline));
  color: var(--ink);
}
.chip--topic:hover { background: color-mix(in srgb, var(--accent, var(--coral)) 16%, var(--paper-2)); }
.chip--topic::before {
  content: '#';
  font-weight: 700;
  color: var(--accent, var(--coral));
  font-size: 13px;
  margin-right: 2px;
}

/* hand-drawn underline for topics on hover */
.chip--topic { position: relative; }
.chip--topic:hover::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: -3px; height: 3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M0 4 Q 25 1 50 3 T 100 2' stroke='%23FF5E5B' stroke-width='1.6' fill='none'/></svg>") center/100% 100% no-repeat;
}

/* ============== Card ============== */
.card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-asym);
  padding: 18px;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.15s var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-soft); }

/* ============== Toast ============== */
.toast-host {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 100; pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px;
  border-radius: var(--radius-asym);
  font: 500 13px/1.4 var(--font-ui);
  box-shadow: var(--shadow-3);
  max-width: 360px;
  animation: toast-in 0.25s var(--ease);
}
.toast--ok   { background: var(--mint); color: var(--ink); }
.toast--bad  { background: var(--coral); color: var(--paper); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============== Dialog (modal) ============== */
.dialog-veil {
  position: fixed; inset: 0;
  background: rgba(21, 21, 30, 0.4);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  animation: fade-in 0.18s var(--ease);
}
.dialog {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-asym);
  width: min(520px, calc(100vw - 32px));
  padding: 24px;
  box-shadow: var(--shadow-3);
  animation: dialog-in 0.22s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes dialog-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } }

/* ============== Health pip ============== */
.health-pip {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ok);
}
.health-pip[data-h="warn"] { background: var(--warn); }
.health-pip[data-h="bad"]  { background: var(--bad); }