/* Supple components — plain CSS classes, prefixed sp-. Values come from tokens.css. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap");

/* ---------- Button ---------- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-btn:disabled, .sp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.sp-btn--primary { background: var(--primary); color: var(--on-primary); }
.sp-btn--primary:hover:not(:disabled) { background: var(--ink); }
.sp-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sp-btn--secondary:hover:not(:disabled) { background: var(--primary-soft); }
.sp-btn--quiet { background: transparent; color: var(--primary); padding: 0 var(--space-3); }
.sp-btn--quiet:hover:not(:disabled) { background: var(--primary-soft); }
.sp-btn--danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.sp-btn--danger:hover:not(:disabled) { background: var(--danger-soft); }
.sp-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: 14px; }

/* ---------- Status chip ---------- */
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.sp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sp-chip--info { background: var(--info-soft); color: var(--info); }
.sp-chip--success { background: var(--success-soft); color: var(--success); }
.sp-chip--warning { background: var(--warning-soft); color: var(--warning); }
.sp-chip--danger { background: var(--danger-soft); color: var(--danger); }
.sp-chip--neutral { background: var(--neutral-soft); color: var(--neutral); }

/* ---------- Text field ---------- */
.sp-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); min-width: 0; }
.sp-field__label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); }
.sp-field__hint { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.sp-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
}
.sp-input::placeholder { color: var(--ink-muted); }
.sp-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }
.sp-field--error .sp-input { border-color: var(--danger); }
.sp-field--error .sp-field__hint { color: var(--danger); }

/* ---------- Appointment card ---------- */
.sp-appt {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  color: var(--ink);
}
.sp-appt__time { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.sp-appt__start { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 800; }
.sp-appt__length { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.sp-appt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-appt__patient { font-size: 15px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-appt__meta { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.sp-appt--now { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-card); }
@media (max-width: 480px) {
  .sp-appt { grid-template-columns: 64px minmax(0, 1fr); }
  .sp-appt > .sp-chip { grid-column: 2; justify-self: start; }
}