/* ==========================================================================
   Utsho — concept-bank.css
   Page-scoped styles for pages/concept-bank.html only.

   Full redesign (Sep 2026): moved off the old flat "tag + bookmark +
   ref line" card into the same vivid, icon-chip-and-top-border system
   used on the Dashboard and Competition Directory. Subject icons here
   are the exact same paths already used for these subjects elsewhere
   on the site (the Notes hub's subject cards) — same subject, same
   icon, everywhere, rather than a new one invented just for this page.
   ========================================================================== */

:root {
  --vivid-green: #16A34A;
  --vivid-green-light: #22C55E;
  --vivid-green-tint: #DCFCE7;
}

/* ==========================================================================
   Hero — same blob-wash background as the Dashboard and Competition
   Directory, with a Concept-Bank-specific illustration as the hero
   visual, for one consistent pattern across every major page.
   ========================================================================== */
.page-header--cbank {
  position: relative;
  overflow: hidden;
  background-color: var(--card);
  background-image: url('../assets/dashboard-hero-blobs.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8) !important;
  min-height: 280px;
}
.cbank-hero-content { max-width: 46ch; flex: 1 1 380px; }
.cbank-hero-visual { flex: 0 0 auto; width: clamp(180px, 24vw, 280px); display: flex; justify-content: center; }
.cbank-hero-visual img { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(30, 22, 15, 0.16)); }
@media (max-width: 720px) {
  .page-header--cbank { flex-direction: column; text-align: center; min-height: 0; }
  .cbank-hero-content { max-width: none; }
  .cbank-hero-visual { width: 160px; }
}

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--space-2);
}
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.55; flex-shrink: 0; }
@media (max-width: 720px) { .section-eyebrow { justify-content: center; } }
.cbank-hero-content h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.cbank-hero-content .lede { margin-top: var(--space-3); }

/* ==========================================================================
   Filter bar
   ========================================================================== */
.cb-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0;
}
.cb-filterbar__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-pill {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: 0.85rem;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cb-pill:hover { transform: translateY(-1px); }
.cb-pill--active { color: #FFFFFF; border-color: transparent; }
.cb-pill--all.cb-pill--active       { background: var(--text); }
.cb-pill--9702.cb-pill--active      { background: var(--primary); box-shadow: 0 8px 18px rgba(168, 69, 29, 0.28); }
.cb-pill--9701.cb-pill--active      { background: var(--accent); box-shadow: 0 8px 18px rgba(47, 107, 90, 0.28); }
.cb-pill--9700.cb-pill--active      { background: var(--vivid-green-light); box-shadow: 0 8px 18px rgba(34, 197, 94, 0.28); }
.cb-pill--9709.cb-pill--active      { background: var(--signal-violet); box-shadow: 0 8px 18px rgba(122, 53, 255, 0.28); }
.cb-filterbar__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

#cb-open-submit {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--signal-violet) 0%, var(--violet-deep) 100%);
  box-shadow: 0 10px 24px rgba(122, 53, 255, 0.32);
}
#cb-open-submit:hover { box-shadow: 0 14px 30px rgba(122, 53, 255, 0.42); }
#cb-open-submit svg { width: 15px; height: 15px; }

.cb-signed-out-notice { text-align: center; color: var(--muted); font-size: 0.9rem; margin-left: auto; }

/* ==========================================================================
   Board
   ========================================================================== */
.cb-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}
#cb-loading, #cb-empty { text-align: center; color: var(--muted); padding: var(--space-12) 0; grid-column: 1 / -1; }

.cb-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--cb-accent, var(--primary));
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 2px rgba(30, 22, 15, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30, 22, 15, 0.1); }

.cb-card__head { display: flex; align-items: center; gap: var(--space-3); }
.cb-card__icon {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--cb-accent, var(--primary)); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cb-card__icon svg { width: 18px; height: 18px; }
.cb-card__subject { font-weight: 700; font-size: 0.85rem; color: var(--cb-accent, var(--primary)); flex: 1; min-width: 0; }

.cb-bookmark-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-deep); border: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cb-bookmark-btn:hover { transform: scale(1.08); }
.cb-bookmark-btn svg { width: 15px; height: 15px; }
.cb-bookmark-btn--active { background: var(--gold-tint); color: var(--gold); }

.cb-card__ref { font-family: var(--font-display); font-size: 1.12rem; color: var(--text); margin: 0; line-height: 1.35; }
.cb-card__comment { color: var(--muted); font-style: italic; font-size: 0.9rem; margin: 0; }

.cb-card__footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-vote-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: var(--space-2) var(--space-4);
  cursor: pointer; font-weight: 700; font-size: 0.88rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cb-vote-btn:hover:not(:disabled) { transform: translateY(-1px); }
.cb-vote-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cb-vote-btn--active { background: var(--vivid-green-light); color: #FFFFFF; border-color: transparent; box-shadow: 0 8px 18px rgba(34, 197, 94, 0.28); }
.cb-vote-btn svg { width: 15px; height: 15px; }

/* ==========================================================================
   Submit modal
   ========================================================================== */
.cb-modal-overlay {
  position: fixed; inset: 0; background: rgba(30, 22, 15, 0.45);
  align-items: center; justify-content: center; padding: var(--space-4);
  z-index: 200;
}
.cb-modal-overlay:not([hidden]) { display: flex; }
.cb-modal {
  background: var(--card); border-radius: var(--radius-xl); max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: var(--space-6);
  box-shadow: 0 28px 56px rgba(30, 22, 15, 0.28);
}
.cb-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cb-modal__header h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.cb-modal__header-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--signal-violet); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cb-modal__header-icon svg { width: 16px; height: 16px; }
.cb-modal__close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); line-height: 1; }
.cb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.cb-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.cb-form-field label { font-size: 0.82rem; color: var(--muted); }
#cb-form-error {
  color: var(--primary); font-size: 0.88rem; margin-bottom: var(--space-3);
  background: rgba(168, 69, 29, 0.08); border: 1px solid rgba(168, 69, 29, 0.25);
  border-radius: 8px; padding: var(--space-2) var(--space-3);
}
.field-error { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(168, 69, 29, 0.12); }

@media (max-width: 640px) {
  .cb-filterbar { flex-direction: column; align-items: stretch; }
  .cb-filterbar__right { margin-left: 0; justify-content: space-between; }
  .cb-form-row { grid-template-columns: 1fr; }
}