/* ============================================================
   Lectio v3 — Shared Component Styles
   Depends on tokens.css for all CSS custom properties.
   ============================================================ */

/* ----------------------------------------------------------
   AppBar
   ---------------------------------------------------------- */

.appbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: 13px;
  position: relative;
  z-index: 10;
}

.appbar > .brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.appbar-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--ink);
}

/* ----------------------------------------------------------
   Nav tabs
   ---------------------------------------------------------- */

.appbar-tabs {
  display: flex;
  gap: 2px;
  margin-left: 28px;
}

.appbar-tabs a {
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}

.appbar-tabs a.active {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 500;
}

/* ----------------------------------------------------------
   Date chip
   ---------------------------------------------------------- */

.date-chip {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

/* ----------------------------------------------------------
   AppBar right block
   ---------------------------------------------------------- */

.appbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px; /* match all other pills/chips (was --radius → looked square) */
  font-size: 12px;
  color: var(--ink);
}

.credits-pill .amount {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
}

.credits-pill .amount strong {
  color: var(--accent);
  font-weight: 700;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--font-ui);
}

.user-chip .avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.btn.size-md {
  padding: 9px 16px;
  font-size: 13px;
}

.btn.size-lg {
  padding: 14px 22px;
  font-size: 15px;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  background: var(--surface-alt);
}