/*
 * Flobega Academy — Components
 * Initial kit (Week 1). Expanded as we build: course-card, chapter-row, player UI,
 * quiz-card, certificate are added as their pages are built.
 */

/* ── Button ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--hit);
  min-width: 96px;
  padding: 0 var(--s-6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  background: var(--brand-700);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { background: var(--brand-800); }
.btn:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--brand-700);
}
.btn-secondary:hover { background: var(--brand-100); color: var(--brand-800); border-color: var(--brand-800); }

.btn-ghost {
  background: transparent;
  color: var(--brand-700);
  min-width: auto;
  padding: 0 var(--s-3);
}
.btn-ghost:hover { background: var(--brand-100); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #A33D2C; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--ink-100);
  color: var(--ink-300);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sticky bottom action bar (phone) ── critical flows */
.actionbar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-elevated);
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
}
.actionbar .btn { width: 100%; }
@media (min-width: 641px) {
  .actionbar { position: static; background: transparent; border-top: none; padding: 0; }
  .actionbar .btn { width: auto; }
}

/* ── Input ───────────────────────────────────────────────────────── */
.field { display: block; }
.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
}
.field-help { margin-top: var(--s-2); font-size: var(--fs-body-sm); color: var(--ink-500); }
.field-error { margin-top: var(--s-2); font-size: var(--fs-body-sm); color: var(--danger); display: flex; align-items: center; gap: var(--s-2); }

.input {
  width: 100%;
  height: var(--hit);
  padding: 0 var(--s-3);
  font-size: var(--fs-body);
  color: var(--ink-900);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-300); }
.input:focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(31, 139, 142, 0.18);
}
.input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(194, 74, 54, 0.15);
}

textarea.input { height: auto; min-height: calc(var(--hit) * 2); padding: var(--s-3); line-height: var(--lh-body); resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--s-8); }

/* ── Card ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-elevated);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--sh-md);
  border: 1px solid var(--line);
}
@media (min-width: 641px) {
  .card { padding: var(--s-6); }
}
.card-flat { box-shadow: none; }
.card-tinted { background: var(--surface-tint); }

/* ── Chip / Badge ────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
  background: var(--surface-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chip:hover { background: var(--brand-100); }
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--brand-100);
  color: var(--brand-800);
  border-color: var(--brand-600);
}
.chip[disabled] { color: var(--ink-300); cursor: not-allowed; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
  background: var(--brand-100);
  color: var(--brand-800);
}
.badge-warn    { background: #FBEFD7; color: #8A5A1E; }
.badge-danger  { background: #F8DAD2; color: #8E331F; }
.badge-success { background: #D6F1E5; color: #0E5C4A; }
.badge-muted   { background: var(--ink-100); color: var(--ink-500); }

/* ── Progress bar (course-level) ─────────────────────────────────── */
.progress {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--brand-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-600));
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}

/* ── Top app bar ─────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--s-4);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--line);
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 1.125rem;
  color: var(--ink-900);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.topbar-brand .mark { width: 28px; height: 28px; color: var(--brand-700); }

/* ── Wordmark + mark ─────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.wordmark .academy { color: var(--brand-700); font-weight: var(--fw-bold); }

/* ── Alert / Toast (basic) ───────────────────────────────────────── */
.alert {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-elevated);
}
.alert-success { background: var(--accent-coral-100); border-color: #F1B89F; }
.alert-warn    { background: #FBEFD7; border-color: #E8C57A; }
.alert-danger  { background: #F8DAD2; border-color: #E5A595; color: var(--ink-900); }