/*
  editorial-folder.css
  Loaded AFTER styles.css. Overrides folder/category view visuals to match
  the sv-home editorial aesthetic (warm paper, Space Grotesk titles, teal accent).
  Targets: .folder-banner, .folder-banner-emoji, .folder-banner-info,
           .file-list, .file-row, .file-row-num, .file-row-title, .file-row-arrow,
           .tier-badge (all variants), .lock-icon, .file-progress-pip
  Does NOT touch .sv-root or any home-page class.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ── Folder view body background when not on home ── */
body[data-sv-view="folder"],
body[data-sv-view="file"] {
  background: var(--paper, #faf7f0);
}

/* ─────────────────────────────────────────────────────
   FOLDER HERO / BANNER
   .folder-banner  →  editorial header block
───────────────────────────────────────────────────── */
.folder-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding: 28px 32px;
  border-radius: var(--r, 14px);
  border: 1px solid var(--line, #e7e0d2);
  background: var(--card, #fffefb);
  box-shadow: var(--shadow, 0 1px 2px rgba(40,34,20,.04), 0 8px 24px -12px rgba(40,34,20,.14));
  /* strip old rounded-xl */
  border-radius: 16px;
}

/* Emoji icon container */
.folder-banner-emoji {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  /* color is set inline via bg — keep but soften */
  box-shadow: 0 0 0 1px rgba(40,34,20,.06);
  font-size: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

/* Title */
.folder-banner-info h2 {
  font-family: var(--font-d, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: -0.03em;
  color: var(--ink, #181612);
  margin: 0;
  line-height: 1.1;
}

/* Subtitle "N study guides" */
.folder-banner-info span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-b, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3, #9a9384);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────
   FILE LIST WRAPPER
───────────────────────────────────────────────────── */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 56px;
}

/* ─────────────────────────────────────────────────────
   FILE ROW  →  editorial card row (mirrors .dsheet-folder)
───────────────────────────────────────────────────── */
.file-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r, 14px);
  background: var(--card, #fffefb);
  border: 1px solid var(--line, #e7e0d2);
  box-shadow: var(--shadow, 0 1px 2px rgba(40,34,20,.04), 0 8px 24px -12px rgba(40,34,20,.14));
  cursor: pointer;
  transition: transform 0.13s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  position: relative;
}

.file-row:hover {
  border-color: var(--line-2, #d9d1bf);
  transform: translateX(3px);
  box-shadow: var(--shadow-lg, 0 2px 6px rgba(40,34,20,.05), 0 24px 60px -20px rgba(40,34,20,.28));
}

/* Lesson number badge */
.file-row-num {
  font-family: var(--font-d, 'Space Grotesk', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3, #9a9384);
  background: var(--paper-2, #f3eee3);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line, #e7e0d2);
}

/* dark theme: keep contrast */
[data-theme="dark"] .file-row-num {
  background: var(--accent, oklch(0.52 0.072 172));
  color: #fff;
  border-color: transparent;
}

/* Title */
.file-row-title {
  font-family: var(--font-b, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #181612);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Arrow chevron */
.file-row-arrow {
  color: var(--ink-3, #9a9384);
  transition: color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}

.file-row:hover .file-row-arrow {
  color: var(--accent, oklch(0.52 0.072 172));
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────
   TIER / ACCESS BADGES  →  editorial pill chips
   Overrides .tier-badge and all colour variants
───────────────────────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-b, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 0; /* reset the 3px top margin from styles.css */
}

/* Free badge — warm paper chip */
.tier-badge.tier-free {
  background: var(--paper-2, #f3eee3);
  color: var(--ink-2, #6c6557);
  border: 1px solid var(--line-2, #d9d1bf);
}

/* Pro badge — teal accent soft */
.tier-badge.tier-pro {
  background: var(--accent-soft, oklch(0.95 0.03 172));
  color: var(--accent-ink, oklch(0.45 0.08 172));
  border: 1px solid oklch(0.85 0.04 172);
}

/* Premium / Max badge — ink dark */
.tier-badge.tier-premium {
  background: var(--ink, #181612);
  color: var(--paper, #faf7f0);
  border: 1px solid var(--ink, #181612);
}

/* Owned pack badge — teal filled */
.tier-badge.tier-owned {
  background: var(--accent, oklch(0.52 0.072 172));
  color: #fff;
  border: 1px solid var(--accent, oklch(0.52 0.072 172));
}

/* Trial access badge */
.tier-badge.tier-trial-access {
  background: oklch(0.94 0.04 172);
  color: var(--accent-ink, oklch(0.45 0.08 172));
  border: 1px solid oklch(0.82 0.06 172);
}

/* ─────────────────────────────────────────────────────
   LOCK ICON  →  softer editorial treatment
───────────────────────────────────────────────────── */
.lock-icon {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   PROGRESS / NOTES PIPS  →  editorial pill
───────────────────────────────────────────────────── */
.file-progress-pip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-b, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft, oklch(0.95 0.03 172));
  color: var(--accent-ink, oklch(0.45 0.08 172));
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .folder-banner {
    padding: 20px;
    gap: 14px;
    border-radius: 14px;
  }

  .folder-banner-emoji {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 13px;
  }

  .folder-banner-info h2 {
    font-size: 20px;
  }

  .file-row {
    padding: 13px 15px;
    gap: 12px;
  }

  .file-row-num {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-radius: 7px;
  }

  .file-row-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .folder-banner {
    padding: 16px;
    gap: 12px;
  }

  .folder-banner-emoji {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .folder-banner-info h2 {
    font-size: 18px;
  }

  .file-row {
    padding: 12px 13px;
  }

  /* on very small screens skip the transform to avoid scroll jank */
  .file-row:hover {
    transform: none;
  }
}