/* ============================================================
   Notes Index pages — component styles
   Loaded after site.css. Reuses design tokens; keeps the
   existing class names (.top-bar, .subject-card, .chapter-card,
   .year-btn, .sem-btn, etc.) so page markup is unchanged.
   ============================================================ */

body{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--sp-4) var(--sp-4) var(--sp-6);
  position:relative;
  z-index:1;
}

/* ---------- Top bar (sticky glass) ---------- */
.top-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.top-bar h1{font-size:var(--fs-lg);color:var(--primary);font-weight:800;letter-spacing:-.3px}
.home-link{
  font-size:var(--fs-sm);font-weight:600;color:var(--primary);
  text-decoration:none;padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--primary);border-radius:var(--r-pill);
  transition:var(--transition);
}
.home-link:hover{background:var(--primary);color:#fff}
.subtitle{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-4)}

/* ---------- Year / semester selectors ---------- */
.year-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.year-btn{
  padding:var(--sp-2) var(--sp-5);border:2px solid var(--border);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;background:var(--card);color:var(--text-muted);
  transition:var(--transition);box-shadow:var(--sh-sm);
}
.year-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.year-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--sh-primary)}
.sem-row{display:none;gap:var(--sp-2);margin-bottom:var(--sp-5);flex-wrap:wrap}
.sem-row.active{display:flex}
.sem-btn{
  padding:var(--sp-2) var(--sp-5);border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;background:var(--card);color:var(--text-muted);
  transition:var(--transition);
}
.sem-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.sem-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- Subject cards ---------- */
.subjects-view{margin-top:var(--sp-2)}
.subject-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-3);
  box-shadow:var(--sh-sm);transition:var(--transition);
}
.subject-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--primary-light)}
.subj-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.subj-icon{
  width:40px;height:40px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.subj-name{font-size:var(--fs-md);font-weight:700;color:var(--text)}
.subj-count{
  font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);margin-left:auto;
  background:var(--surface-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
}

/* ---------- Chapter grid ---------- */
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.chapter-card{
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);
  text-decoration:none;color:var(--text);font-size:var(--fs-sm);font-weight:500;
  background:var(--card);transition:var(--transition);display:block;line-height:var(--lh-snug);
}
.chapter-card:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.chapter-count{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-3);text-align:center}
.empty-msg{text-align:center;padding:var(--sp-6);color:var(--text-muted);font-size:var(--fs-base)}
.loading{text-align:center;padding:var(--sp-6);color:var(--text-muted);font-size:var(--fs-base)}

/* ---------- Footer (if page has one) ---------- */
.site-footer{
  text-align:center;margin-top:var(--sp-6);padding:var(--sp-4) 0;
  border-top:1px solid var(--border);
}
.site-footer p{font-size:var(--fs-xs);color:var(--text-muted);line-height:var(--lh-snug);max-width:440px;margin:0 auto}