/* ===== PHYSL 210 — soft pastel study dashboard ===== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

:root {
  /* warm neutrals */
  --bg:        oklch(0.986 0.008 72);
  --surface:   oklch(0.998 0.004 80);
  --ink:       oklch(0.34 0.028 48);
  --ink-soft:  oklch(0.50 0.022 48);
  --muted:     oklch(0.64 0.018 52);
  --line:      oklch(0.92 0.012 64);
  --line-soft: oklch(0.95 0.010 66);

  /* primary peach / coral */
  --coral:        oklch(0.72 0.124 36);
  --coral-deep:   oklch(0.60 0.130 34);
  --coral-tint:   oklch(0.94 0.040 44);
  --coral-tint-2: oklch(0.90 0.058 42);

  /* pastel section palette (same L/C, varied hue) */
  --p-peach:   oklch(0.915 0.052 46);
  --p-peach-i: oklch(0.58 0.110 40);
  --p-butter:  oklch(0.925 0.050 92);
  --p-butter-i:oklch(0.58 0.095 82);
  --p-mint:    oklch(0.920 0.046 165);
  --p-mint-i:  oklch(0.56 0.085 168);
  --p-sky:     oklch(0.918 0.046 232);
  --p-sky-i:   oklch(0.57 0.090 244);
  --p-lilac:   oklch(0.918 0.050 305);
  --p-lilac-i: oklch(0.57 0.095 305);

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --shadow-sm: 0 2px 8px oklch(0.55 0.05 50 / 0.06);
  --shadow-md: 0 10px 30px oklch(0.55 0.06 45 / 0.10);
  --shadow-lift: 0 18px 44px oklch(0.55 0.08 42 / 0.16);
}

.phys-root, .phys-root * { box-sizing: border-box; }
.phys-root {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  height: 100%;
}
.disp { font-family: 'Quicksand', sans-serif; }

/* ---------- shared bits ---------- */
.heart-mark { display: block; flex: none; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Quicksand'; font-weight: 700; font-size: 16px;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1.5px solid oklch(0.86 0.05 42);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.icon-badge {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; flex: none;
}
.sec-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}
.sec-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: oklch(0.86 0.05 42);
}
.pill-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--coral); color: white;
  font-family: 'Quicksand'; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer;
  box-shadow: 0 8px 20px oklch(0.72 0.124 36 / 0.30);
  transition: transform .15s ease;
}
.pill-btn:hover { transform: translateY(-2px); }