/* ==========================================================================
   Student Assignments Showcase — "Ledger" design system
   Design concept: a student record book / catalog. Cards read like index
   cards from a ledger; task numbers are real sequence data (task1, task2…)
   so they're allowed to be shown as numbered tabs.

   Built on top of Bootstrap 5.3 (loaded via CDN in the HTML). This file
   only contains: (1) design tokens, (2) Bootstrap variable overrides so
   Bootstrap's own components pick up the ledger palette/type/radius, and
   (3) the small set of custom rules Bootstrap has no utility for (aspect
   ratio photo frames, the ledger tab badge, hover lift, tech pills, the
   checkerboard preview fallback). Spacing, grid, buttons, forms and cards
   otherwise come straight from Bootstrap.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Ledger design tokens ---- */
  --paper: #f3f4f0;
  --paper-raised: #fbfbf9;
  --ink: #12181a;
  --ink-soft: #4a534f;
  --line: #d8dcd3;
  --accent: #2f8f6b;      /* emerald — primary action / "completed" feel */
  --accent-deep: #21694e;
  --accent-gold: #c9a15a; /* used sparingly: badges, counts */
  --danger: #b3462c;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 8px;
  --shadow-card: 0 1px 2px rgba(18, 24, 26, 0.06), 0 4px 14px rgba(18, 24, 26, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(18, 24, 26, 0.08), 0 14px 28px rgba(18, 24, 26, 0.10);

  /* ---- Bootstrap variable overrides — re-theme Bootstrap itself ---- */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-secondary-color: var(--ink-soft);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: 10px;
  --bs-border-radius-sm: 5px;
  --bs-link-color: var(--accent-deep);
  --bs-link-color-rgb: 33, 105, 78;
  --bs-link-hover-color: var(--accent);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 47, 143, 107;
  --bs-emphasis-color: var(--ink);
}

body {
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Site header ---------- */

.site-header {
  background: var(--paper-raised);
}

.brand__mark {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-deep);
  background: rgba(47, 143, 107, 0.12);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.back-link {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.back-link:hover {
  color: var(--accent-deep);
  transform: translateX(-2px);
}

/* ---------- Hero ---------- */

.hero__eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}

.hero__title {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero__subtitle {
  max-width: 46ch;
  color: var(--ink-soft) !important;
}

.hero__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}

.hero__meta strong {
  color: var(--ink);
  font-weight: 600;
}

.search-bar {
  max-width: 420px;
}

.search-bar .input-group-text {
  background: var(--paper-raised);
  color: var(--ink-soft);
}

.search-bar .form-control:focus,
.search-bar .form-control:focus ~ .input-group-text,
.search-bar .input-group:focus-within .input-group-text {
  border-color: var(--accent);
}

.search-bar .form-control:focus {
  box-shadow: 0 0 0 3px rgba(47, 143, 107, 0.14);
}

/* ---------- Buttons (ledger-themed, layered on Bootstrap's .btn base) ---------- */

.btn-ledger-primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper-raised);
  font-weight: 600;
}

.btn-ledger-primary:hover,
.btn-ledger-primary:focus {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.btn-ledger-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

.btn-ledger-ghost:hover,
.btn-ledger-ghost:focus {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

/* ---------- Cards (shared hover lift for student + task cards) ---------- */

.student-card,
.task-card {
  background: var(--paper-raised);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.student-card:hover,
.student-card:focus-within,
.task-card:hover,
.task-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(47, 143, 107, 0.35) !important;
}

.student-card__photo-wrap {
  aspect-ratio: 4 / 3;
  background: var(--line);
  overflow: hidden;
}

.student-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.student-card:hover .student-card__photo { transform: scale(1.045); }

.student-card__photo-fallback,
.profile-header__photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-deep);
  background: linear-gradient(135deg, #e4ece7, #d6e3da);
}

.student-card__photo-fallback { font-size: 40px; }

.student-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.student-card__count,
.profile-header__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.student-card__count strong,
.profile-header__count strong {
  color: var(--accent-deep);
}

/* ---------- Empty / not-found states ---------- */

.empty-state {
  background: var(--paper-raised);
  border-style: dashed !important;
}

.empty-state__glyph {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-deep);
  letter-spacing: 0.08em;
}

.empty-state__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.empty-state__text {
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ---------- Student profile header (student.html) ---------- */

.profile-header__photo-wrap {
  width: 108px;
  height: 108px;
  border: 3px solid var(--paper-raised);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--line);
  flex-shrink: 0;
}

.profile-header__photo {
  object-fit: cover;
}

.profile-header__photo-fallback { font-size: 34px; }

.profile-header__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- Task card (ledger tab motif) ---------- */

.task-card__tab {
  position: absolute;
  top: 0;
  left: 20px;
  background: var(--ink);
  color: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px 6px;
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

.task-card__preview-wrap {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(
    135deg, #e9ebe5, #e9ebe5 10px, #e2e5dd 10px, #e2e5dd 20px
  );
  overflow: hidden;
}

.task-card__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-card__preview-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

.task-card__preview-fallback svg { width: 26px; height: 26px; opacity: 0.6; }

.task-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.task-card__desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.tech-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201, 161, 90, 0.16);
  color: #8a6a2e;
  border: 1px solid rgba(201, 161, 90, 0.3);
}

/* ---------- Footer ---------- */

.site-footer {
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-mono);
}