/* ============================================================
   Gather Juice Co — Training Hub shared styles
   Built on the Gather Juice Design System tokens.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  min-height: 100vh;
  /* soft warm wash — the brand never sits on flat cream */
  background-image:
    radial-gradient(80% 60% at 0% 0%, rgba(186, 207, 192, .45), transparent 55%),
    radial-gradient(70% 55% at 100% 100%, rgba(242, 185, 172, .28), transparent 55%);
  background-attachment: fixed;
}

/* ── Header ─────────────────────────────────────────────── */
.gj-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.gj-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--charcoal);
}
.gj-brand img { width: 36px; height: 36px; display: block; }
.gj-brand .wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: var(--tracking-tight); color: var(--charcoal);
  line-height: 1;
}
.gj-brand .wordmark .sep { color: var(--sage-600); margin: 0 6px; font-weight: 400; }
.gj-brand .wordmark .sub  { color: var(--sage-600); font-weight: 500; }

.gj-header-right {
  display: flex; align-items: center; gap: 16px;
}
.gj-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: .04em;
  color: var(--sage-800); text-decoration: none;
  padding: 6px 0;
}
.gj-back:hover { color: var(--rose); }
.gj-user {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-muted);
}
.role-badge {
  font-family: var(--font-body); font-weight: 700;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--radius-pill);
}
.role-badge.trainer  { background: var(--sage-100); color: var(--sage-800); }
.role-badge.learner  { background: var(--peach);    color: #5a2a25; }
.role-badge.admin    { background: var(--rose);     color: var(--white); }

/* ── Page wrap & eyebrows ──────────────────────────────── */
.gj-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.gj-page.wide { max-width: 1180px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-12); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--sage-600);
  display: block;
}

.script-accent {
  font-family: var(--font-script); font-weight: 400;
  color: var(--rose); display: inline-block;
  transform: rotate(-3deg); margin: 0 .1em;
  font-size: 1.08em; line-height: 1;
}

/* ── Display headings (page-level) ─────────────────────── */
.page-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--sage-800);
  margin: 6px 0 14px;
}
.page-lead {
  font-family: var(--font-body); font-size: var(--fs-18);
  line-height: var(--lh-cozy); color: var(--charcoal);
  max-width: 60ch;
}
.page-lead.muted { color: var(--fg-muted); }

/* ── Cards ─────────────────────────────────────────────── */
.gj-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.gj-card-pad   { padding: 24px 28px; }
.gj-card-pad-sm { padding: 18px 22px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-13); letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--sage-800); color: var(--cream); }
.btn-primary:hover:not(:disabled) { background: #235024; }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--sage-800);
  border: 1.5px solid var(--sage-800); padding: 10.5px 20.5px;
}
.btn-ghost:hover { background: var(--sage-800); color: var(--cream); }
.btn-warm { background: var(--rose); color: var(--white); }
.btn-warm:hover:not(:disabled) { background: #c95863; }

.btn-sm {
  font-size: 11px; padding: 8px 16px; letter-spacing: .1em;
}

/* ── Status pills ─────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }

.pill.on-track  { background: var(--sage-100); color: var(--sage-800); }
.pill.on-track  .dot { background: var(--sage-800); }
.pill.at-risk   { background: var(--peach); color: #5a2a25; }
.pill.at-risk   .dot { background: #b14a3a; }
.pill.behind    { background: var(--rose); color: var(--white); }
.pill.behind    .dot { background: var(--white); }
.pill.complete  { background: var(--sage-800); color: var(--cream); }
.pill.complete  .dot { background: var(--cream); }
.pill.neutral   { background: var(--cream-2); color: var(--sage-600); }
.pill.neutral   .dot { background: var(--sage-600); }

/* ── Hairline divider ─────────────────────────────────── */
.hairline { height: 1px; background: var(--border); border: 0; }

/* ── Lucide icon defaults ─────────────────────────────── */
.lucide {
  width: 20px; height: 20px;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  fill: none; stroke: currentColor;
  flex-shrink: 0;
}
.lucide.lg { width: 24px; height: 24px; }
.lucide.sm { width: 16px; height: 16px; }

/* ── Stamp (rotated circular badge — signature element) ── */
.stamp {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--rose); color: var(--cream);
  display: grid; place-items: center;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 8px 16px -4px rgba(70, 70, 70, .2);
  padding: 10px;
}
.stamp .scr {
  font-family: var(--font-script); font-size: 28px;
  line-height: 1; color: var(--cream);
}
.stamp .sub {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
}

/* ── Utility ──────────────────────────────────────────── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

/* ── Page greeting (personalized header) ─────────────── */
.gj-greeting {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: var(--tracking-tight);
  color: var(--sage-800); margin-bottom: 4px;
}
.gj-greeting .script-accent { font-size: 1.35em; }
.gj-greeting-sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-600); margin-bottom: 28px;
}

/* ── Stat tiles (metric grid) ────────────────────────── */
.gj-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gj-stat-card { padding: 18px 14px; text-align: center; }
.gj-stat-value {
  font-family: var(--font-body); font-weight: 700;
  font-size: 26px; color: var(--sage-800);
  line-height: 1.1; margin-bottom: 4px;
}
.gj-stat-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sage-600);
}