/* ──────────────────────────────────────────────────────────
   Components — editorial / Stripe / Linear style.
   Hairline borders · solid fills · monotone icons · tabular numbers.
   ────────────────────────────────────────────────────────── */

/* ─── Typography helpers ─── */
.ui-tiny {
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.ui-eyebrow {
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.ui-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── Surface — flat card primitives ─── */
.surface {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-lg);
}
.surface--soft { background: var(--soft-fill); }
.surface--accent { background: var(--accent-soft); border-color: rgba(0,113,227,0.18); }
.surface--inverted { background: var(--ink); color: #fff; border-color: transparent; }
.surface--shadow { box-shadow: var(--shadow-2); }

/* Legacy sketch class kept for back-compat — same as .surface now */
.sketch { background: var(--screen); border: 1px solid var(--ink-5); border-radius: var(--radius-lg); position: relative; }
.sketch.r-sm { border-radius: var(--radius-sm); }
.sketch.r-lg { border-radius: var(--radius-lg); }
.sketch.r-xl { border-radius: var(--radius-xl); }
.sketch.r-pill { border-radius: var(--radius-pill); }
.sketch.dashed { border-style: dashed; border-color: var(--ink-4); }
.sketch.faint { border-color: var(--ink-5); }
.sketch.fill-soft { background: var(--soft-fill); }
.sketch.fill-accent { background: var(--accent-soft); border-color: rgba(0,113,227,0.18); }
.sketch.fill-ink { background: var(--ink); color: #fff; border-color: transparent; }
.sketch.shadow { box-shadow: var(--shadow-1); }
.sketch.shadow-2 { box-shadow: var(--shadow-2); }

/* Hatch pattern for image placeholders */
.hatch {
  background-image:
    repeating-linear-gradient(135deg, var(--ink-4) 0 1px, transparent 1px 9px);
}

/* Squiggle: kept for backwards-compat but rendered as a simple bottom border
   instead of the previous SVG wave, which felt too playful. */
.squiggle {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--accent);
  background: none;
}
.hand, .handwrite, .display { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.02em; }

/* ─── Buttons ─── */
.btn, .wbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
  line-height: 1.2;
}
.btn:hover, .wbtn:hover { background: var(--ink-6); }
.btn:active, .wbtn:active { transform: scale(0.99); }
.btn:disabled, .wbtn:disabled, .btn[disabled], .wbtn[disabled] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

.btn--accent, .wbtn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn--accent:hover, .wbtn.accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--ghost, .wbtn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn--ghost:hover, .wbtn.ghost:hover { background: var(--ink-6); color: var(--ink); }

.wbtn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.wbtn.primary:hover { background: #000; border-color: #000; }

.btn--sm, .wbtn.sm { padding: 6px 12px; font-size: var(--fs-caption); }
.btn--block, .wbtn.full { width: 100%; }

/* ─── Inputs ─── */
.input, .textarea, select.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-5);
  border-radius: var(--radius);
  background: var(--screen);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: var(--lh-body);
}
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.textarea { resize: vertical; min-height: 80px; }
.label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}

/* ─── Pills / badges ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--soft-fill);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: 500;
  color: var(--ink-2);
}
.pill--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.status-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.status-passed { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.status-borderline { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.status-failed { background: var(--err-soft); color: var(--err); border-color: transparent; }
.status-awaiting-review,
.status-submitted { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* ─── Day cells ─── */
.day-cell {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--screen);
}
.day-cell.done { background: var(--ink); color: #fff; border-color: var(--ink); }
.day-cell.today { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.day-cell.locked { color: var(--ink-4); }
.day-cell.quiz { border-style: dashed; }
.day-cell.exam { border-style: dashed; border-color: var(--accent); color: var(--accent); }

/* ─── Card (legacy alias) ─── */
.card {
  background: var(--screen);
  border: 1px solid var(--ink-5);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--soft { background: var(--soft-fill); }

/* ─── Bottom tabbar — minimal ─── */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: var(--phone-max);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--ink-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 8px);
  z-index: 50;
}
:root[data-theme="dark"] .tabbar { background: rgba(15, 15, 17, 0.92); }
.tabbar__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  font-size: var(--fs-tiny);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}
.tabbar__item:hover { color: var(--ink-2); text-decoration: none; }
.tabbar__item.is-active { color: var(--ink); font-weight: 600; }
.tabbar__icon { position: relative; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.tabbar__icon svg { width: 22px; height: 22px; }
.tabbar__label { font-size: var(--fs-tiny); }
.tabbar__badge {
  position: absolute;
  top: -3px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--paper);
}

/* ─── Image placeholder slot ─── */
.img-slot {
  border: 1px dashed var(--ink-4);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  background: var(--soft-fill);
  margin: 12px 0;
}
.img-slot--inline { display: inline; padding: 1px 6px; font-size: 11px; }

/* ─── Skeleton loaders ─── */
.skeleton {
  background: linear-gradient(90deg, var(--ink-5) 0%, var(--ink-6) 50%, var(--ink-5) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton--eyebrow { height: 12px; width: 80px; margin: 16px 0 8px; }
.skeleton--hero { height: 36px; width: 70%; margin-bottom: 8px; }
.skeleton--blurb { height: 14px; width: 90%; margin-bottom: 16px; }
.skeleton--snake { height: 120px; margin-bottom: 12px; border-radius: var(--radius-lg); }
.skeleton--card { height: 100px; border-radius: var(--radius-lg); }
@keyframes skeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Spinner ─── */
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--ink-5);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Empty state ─── */
.empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-body);
}