/* ==========================================================================
   VoiceNX mockup — components (pure CSS, no JS)
   buttons · icon buttons · cards · chips · badges · inputs · toggle ·
   segmented control · progress bar · progress ring · avatar · list rows ·
   empty state · callout
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; stroke: currentColor; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px -6px rgba(13, 111, 102, .6);
}
.btn--primary:hover { background: var(--teal-deep); }

.btn--secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--paper-2); border-color: var(--ink-4); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: rgba(17, 25, 54, .05); color: var(--ink); }

.btn--plum { background: var(--plum); color: #fff; }
.btn--plum:hover { background: #351363; }

.btn--danger { background: var(--rose-soft); color: var(--rose); }
.btn--danger:hover { background: #f5d3da; }

.btn--sm { height: 38px; padding: 0 var(--s-4); font-size: var(--fs-sm); border-radius: 10px; }
.btn--lg { height: 56px; padding: 0 var(--s-8); font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn--pill { border-radius: var(--r-pill); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; }
.icon-btn:hover { background: rgba(17, 25, 54, .06); color: var(--ink); }
.icon-btn--outline { background: var(--white); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }
.card--soft { background: var(--paper-2); }
.card--teal { background: var(--teal-soft); border-color: transparent; }
.card--plum { background: var(--plum-soft); border-color: transparent; }
.card--ink { background: var(--ink); color: #fff; border-color: transparent; }
.card--ink .t-small, .card--ink .t-caption { color: rgba(255, 255, 255, .65); }
.card--tap { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.card--tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }

/* ---- Chips & badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip svg { width: 14px; height: 14px; stroke: currentColor; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--teal  { background: var(--teal-soft);  color: var(--teal-ink); }
.badge--plum  { background: var(--plum-soft);  color: var(--plum); }
.badge--moss  { background: var(--moss-soft);  color: #2c6b41; }
.badge--amber { background: var(--amber-soft); color: #8a5a0c; }
.badge--rose  { background: var(--rose-soft);  color: #9b2a3f; }
.badge--neutral { background: rgba(17, 25, 54, .07); color: var(--ink-2); }

/* ---- Inputs ---- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.field__hint  { font-size: var(--fs-xs); color: var(--ink-3); }

.input {
  height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-base);
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 150, 138, .18); }
textarea.input { height: auto; min-height: 112px; padding: var(--s-3) var(--s-4); resize: vertical; }

.input-wrap { position: relative; }
.input-wrap > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--ink-3); pointer-events: none;
}
.input-wrap > .input { padding-left: 42px; }

/* Toggle (checkbox-based, CSS only) */
.toggle { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  width: 50px; height: 30px; border-radius: var(--r-pill);
  background: var(--ink-4); position: relative;
  transition: background var(--t-base) var(--ease);
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  transition: transform var(--t-base) var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--teal); }
.toggle input:checked + .toggle__track::after { transform: translateX(20px); }

/* Segmented control (radio-based, CSS only) */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  border-radius: var(--r-md);
  background: rgba(17, 25, 54, .07);
}
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 0; height: 0; }
.segmented span {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--s-4);
  border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.segmented input:checked + span { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- Progress ---- */
.progress {
  height: 8px; border-radius: var(--r-pill);
  background: rgba(17, 25, 54, .08); overflow: hidden;
}
.progress__bar {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  width: var(--value, 0%);
}
.progress--plum .progress__bar { background: linear-gradient(90deg, #351363, var(--plum)); }
.progress--thick { height: 12px; }

/* Ring: set --value (0–100) and optional --ring-color */
.ring {
  --size: 88px; --thick: 9px; --ring-color: var(--teal);
  width: var(--size); height: var(--size); border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--white) calc(100% - var(--thick)), transparent calc(100% - var(--thick) + 1px)),
    conic-gradient(var(--ring-color) calc(var(--value, 0) * 1%), rgba(17, 25, 54, .08) 0);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
}
.ring--sm { --size: 56px; --thick: 6px; font-size: 14px; font-family: var(--font-body); font-weight: 700; }
.ring--lg { --size: 128px; --thick: 12px; font-size: 32px; }

/* ---- Avatar ---- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plum-soft); color: var(--plum);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  overflow: hidden;
}
.avatar--sm { width: 32px; height: 32px; font-size: 11px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-md); }
.avatar--teal { background: var(--teal-soft); color: var(--teal-ink); }
.avatar--ink  { background: var(--ink); color: #fff; }

/* ---- List rows ---- */
.list { display: flex; flex-direction: column; }
.list__row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.list__row:last-child { border-bottom: 0; }
.list__row--tap { margin: 0 calc(var(--s-3) * -1); padding-inline: var(--s-3); border-radius: var(--r-md); }
.list__row--tap:hover { background: rgba(17, 25, 54, .035); }
.list__lead { flex: none; }
.list__body { flex: 1 1 auto; min-width: 0; }
.list__title { font-weight: 600; font-size: var(--fs-base); }
.list__meta  { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.list__trail { flex: none; display: flex; align-items: center; gap: var(--s-3); color: var(--ink-4); }
.list__trail svg { width: 18px; height: 18px; stroke: currentColor; }

/* ---- Icon tile (for list leads / feature cards) ---- */
.tile {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-ink);
}
.tile svg { width: 22px; height: 22px; stroke: currentColor; }
.tile--plum  { background: var(--plum-soft);  color: var(--plum); }
.tile--amber { background: var(--amber-soft); color: #8a5a0c; }
.tile--ink   { background: var(--ink); color: #fff; }

/* ---- Callout & empty state ---- */
.callout {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--plum-soft); color: var(--plum);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.callout svg { width: 18px; height: 18px; stroke: currentColor; flex: none; margin-top: 1px; }
.callout--teal { background: var(--teal-soft); color: var(--teal-ink); }
.callout--amber { background: var(--amber-soft); color: #8a5a0c; }

.empty {
  text-align: center; padding: var(--s-12) var(--s-6);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  color: var(--ink-3);
}

/* ---- Hairline divider ---- */
.divider { height: 1px; background: var(--line); margin: var(--s-6) 0; }

/* ---- Entrance motion (opt-in: add .reveal to children of a container) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .5s var(--ease) both; }
.reveal:nth-child(2) { animation-delay: 60ms; }
.reveal:nth-child(3) { animation-delay: 120ms; }
.reveal:nth-child(4) { animation-delay: 180ms; }
.reveal:nth-child(5) { animation-delay: 240ms; }
.reveal:nth-child(6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* ---- Status pill (dot + label) ---- */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill);
  background: var(--moss-soft); color: #2c6b41;
  font-size: var(--fs-sm); font-weight: 700;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }