/* ============================================================
   docs.css — Quantum Club Docs page styles
   Symbiosis Quantum Club · SIT Pune · 2026
   ============================================================ */

:root {
  --surface:    #ffffff;
  --surface2:   #f9f9f9;
  --accent:     #0a0a0a;
  --accent2:    #0a0a0a;
  --accent3:    #0a0a0a;
  --gold:       #0a0a0a;
  --green:      #0a0a0a;
  --text:       #0a0a0a;
  --muted:      #555555;
  --sidebar-w:  300px;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--accent3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 20px 16px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--accent3);
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar-header h1 { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; }
.sidebar-header p  { font-size: 11px; color: var(--muted); margin-top: 2px; }

.pbar-wrap  { margin-top: 10px; background: #e0e0e0; border-radius: 20px; height: 6px; overflow: hidden; }
.pbar-fill  { height: 100%; background: var(--accent); border-radius: 20px; transition: width .5s; }
.pbar-label { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: right; }

#search-input {
  width: calc(100% - 24px);
  margin: 10px 12px 0;
  background: var(--surface2);
  border: 1px solid var(--accent3);
  padding: 8px 12px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  flex-shrink: 0;
  font-family: var(--sans);
}

#search-input::placeholder { color: var(--muted); }
#search-input:focus { border-color: var(--accent); }

#nav-tree { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
#nav-tree::-webkit-scrollbar { width: 4px; }
#nav-tree::-webkit-scrollbar-thumb { background: #ccc; }

.phase-group { margin: 4px 0; }

.phase-label {
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.phase-label:hover { color: var(--text); }
.phase-chevron { font-size: 8px; transition: transform .2s; }
.phase-group.collapsed .phase-chevron { transform: rotate(-90deg); }
.phase-group.collapsed .phase-items { display: none; }
.phase-badge { margin-left: auto; font-size: 9px; padding: 1px 6px; background: #e0e0e0; color: var(--muted); font-weight: 600; }

.nav-item {
  padding: 7px 16px 7px 28px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: all .15s;
  border-left: 2px solid transparent;
}

.nav-item:hover { color: var(--text); background: var(--surface2); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: #f5f5f5; }
.nav-item.done .nav-dot { background: var(--green); }
.nav-item .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #e0e0e0; flex-shrink: 0; transition: background .2s; }
.nav-item.active .nav-dot { background: var(--accent); }

/* ── Main Panel ── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

#topbar {
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--accent3);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#topbar-title { font-size: 14px; font-weight: 600; flex: 1; }
#topbar-phase-tag { font-size: 11px; color: var(--muted); }

.status-btn { padding: 5px 14px; border: none; cursor: pointer; font-size: 11px; font-weight: 600; transition: all .2s; }
.status-btn.not-started { background: #e0e0e0; color: var(--muted); }
.status-btn.in-progress { background: rgba(10,10,10,.15); color: var(--gold); border: 1px solid var(--gold); }
.status-btn.done { background: rgba(10,10,10,.15); color: var(--green); border: 1px solid var(--green); }

#content-area { flex: 1; overflow-y: auto; padding: 28px 32px 40px; }
#content-area::-webkit-scrollbar { width: 6px; }
#content-area::-webkit-scrollbar-thumb { background: #ddd; }

/* ── Topic Card ── */
.topic-card { animation: fadeUp .3s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.topic-hero {
  background: #ffffff;
  border: 1px solid var(--accent3);
  padding: 28px 32px;
  margin-bottom: 24px;
}

.phase-badge-hero {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(10,10,10,.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
  border: 1px solid rgba(10,10,10,.25);
}

.topic-hero h2 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.topic-hero .subtitle { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ── Content Blocks ── */
.section-block { margin-bottom: 24px; }

.section-block h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent3);
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-block p,
.section-block li { font-size: 13.5px; line-height: 1.8; color: #333; }
.section-block ul,
.section-block ol { padding-left: 20px; }
.section-block li { margin-bottom: 6px; }
.section-block strong { color: var(--text); }
.section-block em { color: var(--gold); font-style: normal; font-weight: 500; }

.analogy-box {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-left: 3px solid var(--accent3);
  padding: 16px 20px;
  margin: 16px 0;
}

.analogy-box .alabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--accent3); margin-bottom: 6px; }
.analogy-box p { font-size: 13px; color: #333; line-height: 1.7; }

.formula-box {
  background: var(--surface2);
  border: 1px solid var(--accent3);
  padding: 14px 20px;
  margin: 14px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #0a0a0a;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.key-points { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; margin: 14px 0; }

.key-point {
  background: var(--surface2);
  border: 1px solid #e0e0e0;
  padding: 14px;
  font-size: 12.5px;
}

.key-point .kp-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; letter-spacing: .5px; }
.key-point p { color: #333; line-height: 1.6; }

.yt-card {
  background: rgba(10,10,10,.05);
  border: 1px solid rgba(10,10,10,.2);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all .2s;
  margin: 8px 0;
}

.yt-card:hover { background: rgba(10,10,10,.1); border-color: rgba(10,10,10,.4); }
.yt-icon { font-size: 20px; flex-shrink: 0; }
.yt-title { font-size: 13px; font-weight: 600; }
.yt-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Notes ── */
.notes-section { margin-top: 20px; }
.notes-section h3 { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 10px; }

.notes-ta {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--accent3);
  padding: 14px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--sans);
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color .2s;
  line-height: 1.6;
}

.notes-ta:focus { border-color: var(--accent); }

.notes-actions { display: flex; gap: 8px; margin-top: 8px; }

.btn-save  { padding: 6px 16px; background: var(--accent3); color: #fff; border: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-clear { padding: 6px 16px; background: #e0e0e0; color: var(--muted); border: none; font-size: 12px; font-weight: 600; cursor: pointer; }

/* ── Home Screen (inside docs) ── */
.home-hero {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px solid var(--accent3);
  margin-bottom: 28px;
}

.home-hero .atom { font-size: 56px; margin-bottom: 16px; }
.home-hero h1 { font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.home-hero p { color: var(--muted); font-size: 14px; max-width: 540px; margin: 0 auto 20px; line-height: 1.7; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; margin-bottom: 24px; }

.stat-card { background: var(--surface2); border: 1px solid var(--accent3); padding: 18px; text-align: center; }
.stat-num  { font-size: 28px; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; }

.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 14px; }

.phase-card {
  background: var(--surface2);
  border: 1px solid var(--accent3);
  padding: 18px;
  cursor: pointer;
  transition: all .2s;
}

.phase-card:hover { border-color: var(--accent); }

.pc-num   { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: .5px; }
.pc-title { font-size: 15px; font-weight: 700; margin: 6px 0; }
.pc-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.pc-prog  { background: #e0e0e0; height: 4px; margin-top: 10px; overflow: hidden; }
.pc-prog-fill { height: 100%; }
.pc-count { font-size: 11px; color: var(--accent); margin-top: 6px; font-weight: 600; }

.tag { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 600; margin: 2px; }
.tb  { background: rgba(10,10,10,.15);  color: var(--accent); }
.tp  { background: rgba(10,10,10,.15);  color: var(--accent); }
.tc  { background: rgba(10,10,10,.15);   color: var(--accent3); }
.tg  { background: rgba(10,10,10,.15);  color: var(--gold); }
.tn  { background: rgba(10,10,10,.15);  color: var(--green); }

/* ── Tab System ── */
.view-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--accent3); background: var(--surface); flex-shrink: 0; }

.view-tab {
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: all .2s;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.view-panel { display: none; flex: 1; overflow: hidden; }
.view-panel.active { display: flex; flex-direction: column; }

  /* ===== TRACKER TAB SYSTEM ===== */
  .view-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
  .view-tab{padding:12px 24px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .2s;user-select:none;display:flex;align-items:center;gap:8px}
  .view-tab:hover{color:var(--text)}
  .view-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
  .view-panel{display:none;flex:1;overflow:hidden}
  .view-panel.active{display:flex;flex-direction:column}
  #tracker-panel{overflow-y:auto;background:var(--bg)}

  /* ===== TRACKER SPECIFIC STYLES ===== */
  .tk-header{padding:20px 28px;background:#ffffff;border-bottom:1px solid rgba(10,10,10,.12);flex-shrink:0}
  .tk-header h2{font-size:16px;font-weight:700;color:#0a0a0a;margin-bottom:2px}
  .tk-header p{font-size:12px;color:#555555}
  .tk-overall{display:flex;align-items:center;gap:12px;margin-top:12px}
  .tk-bar-wrap{flex:1;background:rgba(10,10,10,.05);border-radius:100px;height:8px;overflow:hidden}
  .tk-bar-fill{height:100%;border-radius:100px;background:var(--accent);transition:width .5s;box-shadow:0 0 10px rgba(10,10,10,.4)}
  .tk-pct{font-size:14px;font-weight:700;color:#0a0a0a;font-family:'JetBrains Mono',monospace;min-width:44px;text-align:right}
  .tk-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 28px;flex-shrink:0;border-bottom:1px solid rgba(10,10,10,.12)}
  .tk-stat{background:#ffffff;border:1px solid #0a0a0a;border-radius:12px;padding:14px;text-align:center}
  .tk-stat-val{font-size:24px;font-weight:800;color:#0a0a0a;font-family:'JetBrains Mono',monospace;line-height:1}
  .tk-stat-label{font-size:10px;color:#555555;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
  .tk-phase-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;padding:16px 28px;flex-shrink:0;border-bottom:1px solid rgba(10,10,10,.12)}
  .tk-pbar-item{background:#ffffff;border:1px solid #0a0a0a;border-radius:10px;padding:12px;cursor:pointer;transition:all .2s}
  .tk-pbar-item:hover{border-color:rgba(10,10,10,.35);transform:translateY(-1px)}
  .tk-pbar-name{font-size:12px;font-weight:600;color:#0a0a0a;margin-bottom:6px;display:flex;align-items:center;gap:6px}
  .tk-pbar-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .tk-pbar-track{background:rgba(10,10,10,.05);border-radius:100px;height:5px;overflow:hidden}
  .tk-pbar-fill{height:100%;border-radius:100px;transition:width .5s}
  .tk-pbar-pct{font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-top:4px;text-align:right}

  /* Phase accordion cards in tracker */
  .tk-phases{padding:16px 28px 32px;display:flex;flex-direction:column;gap:16px}
  .tk-phase-card{background:#ffffff;border:1px solid #0a0a0a;border-radius:14px;overflow:hidden;box-shadow:none;transition:border-color .3s}
  .tk-phase-card:hover{border-color:rgba(10,10,10,.3)}
  .tk-phase-hdr{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;user-select:none}
  .tk-phase-num{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;font-family:'JetBrains Mono',monospace;flex-shrink:0}
  .tk-phase-title-grp{flex:1;min-width:0}
  .tk-phase-title-grp h3{font-size:15px;font-weight:700;color:#0a0a0a;margin-bottom:2px}
  .tk-phase-meta{font-size:11px;color:#555555;display:flex;align-items:center;gap:8px}
  .tk-tag{background:rgba(10,10,10,.05);border:1px solid #0a0a0a;border-radius:100px;padding:2px 8px;font-size:10px;font-weight:600}
  .tk-ring{position:relative;width:48px;height:48px;flex-shrink:0}
  .tk-ring svg{transform:rotate(-90deg);width:48px;height:48px}
  .tk-ring-bg{fill:none;stroke:rgba(10,10,10,.06);stroke-width:4}
  .tk-ring-fill{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .6s}
  .tk-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace}
  .tk-chevron{color:#555555;transition:transform .3s;flex-shrink:0;font-size:16px}
  .tk-phase-card.tk-open .tk-chevron{transform:rotate(180deg)}
  .tk-phase-body{display:none;padding:0 22px 22px}
  .tk-phase-card.tk-open .tk-phase-body{display:block}
  .tk-phase-desc{font-size:13px;color:#555555;line-height:1.7;padding:12px 0;border-bottom:1px solid rgba(10,10,10,.12);margin-bottom:16px}
  .tk-section-title{font-size:11px;font-weight:700;color:#555555;text-transform:uppercase;letter-spacing:.1em;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
  .tk-section-title::after{content:'';flex:1;height:1px;background:rgba(10,10,10,.12)}
  .tk-topic-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;transition:background .2s;border:1px solid transparent}
  .tk-topic-item:hover{background:rgba(10,10,10,.03);border-color:rgba(10,10,10,.12)}
  .tk-topic-item.tk-checked{background:rgba(10,10,10,.04);border-color:rgba(10,10,10,.15)}
  .tk-checkbox{width:20px;height:20px;border-radius:5px;border:2px solid rgba(10,10,10,.35);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:1px;background:transparent}
  .tk-topic-item.tk-checked .tk-checkbox{background:#0a0a0a;border-color:#0a0a0a}
  .tk-check-icon{opacity:0;transition:opacity .2s;color:#000;font-size:11px;font-weight:800}
  .tk-topic-item.tk-checked .tk-check-icon{opacity:1}
  .tk-topic-text{font-size:13px;color:#555555;line-height:1.5;flex:1;transition:color .2s}
  .tk-topic-item.tk-checked .tk-topic-text{color:#555555;text-decoration:line-through;text-decoration-color:rgba(10,10,10,.4)}
  .tk-study-link{font-size:10px;font-weight:600;color:var(--accent);background:rgba(10,10,10,.12);border:1px solid rgba(10,10,10,.25);border-radius:4px;padding:2px 7px;text-decoration:none;margin-left:auto;flex-shrink:0;transition:all .2s;white-space:nowrap}
  .tk-study-link:hover{background:rgba(10,10,10,.25)}
  .tk-note{font-size:12px;border-radius:6px;padding:8px 12px;margin:8px 0 4px;line-height:1.5}
  .tk-note.warn{color:#fbbf24;background:rgba(10,10,10,.08);border:1px solid rgba(10,10,10,.2)}
  .tk-note.info{color:#0a0a0a;background:rgba(10,10,10,.06);border:1px solid rgba(10,10,10,.2)}
  .tk-note.success{color:#0a0a0a;background:rgba(10,10,10,.06);border:1px solid rgba(10,10,10,.2)}
  .tk-milestone{margin-top:16px;background:rgba(10,10,10,.05);border:1px solid rgba(10,10,10,.2);border-radius:10px;padding:14px 18px}
  .tk-milestone h4{font-size:12px;font-weight:700;color:#0a0a0a;margin-bottom:6px}
  .tk-milestone p{font-size:13px;color:#555555;line-height:1.6;font-style:italic}
  .tk-actions{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(10,10,10,.12);flex-wrap:wrap}
  .tk-btn-green{padding:7px 14px;background:rgba(10,10,10,.15);border:1px solid rgba(10,10,10,.3);color:#0a0a0a;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
  .tk-btn-green:hover{background:rgba(10,10,10,.25)}
  .tk-btn-out{padding:7px 14px;background:transparent;border:1px solid rgba(10,10,10,.2);color:#555555;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
  .tk-btn-out:hover{border-color:rgba(10,10,10,.4);color:#0a0a0a}
  .tk-badge-done{display:none;align-items:center;gap:4px;background:rgba(10,10,10,.15);border:1px solid rgba(10,10,10,.35);color:#0a0a0a;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
  /* Floating particles */
  .tk-particles{display:none;position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
  .tk-particle{position:absolute;border-radius:50%;animation:tk-float linear infinite}
  @keyframes tk-float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}
  /* Reset modal */
  .tk-modal{display:none;position:fixed;inset:0;background:rgba(10,10,10,.7);backdrop-filter:blur(6px);z-index:2000;align-items:center;justify-content:center}
  .tk-modal.show{display:flex}
  .tk-modal-inner{background:#ffffff;border:1px solid rgba(10,10,10,.35);border-radius:16px;padding:32px;max-width:380px;width:90%;box-shadow:none;}
  .tk-modal-inner h3{font-size:16px;font-weight:700;margin-bottom:10px}
  .tk-modal-inner p{font-size:13px;color:#555555;line-height:1.6;margin-bottom:20px}
  .tk-modal-acts{display:flex;gap:8px;justify-content:flex-end}
  .tk-btn-red{padding:7px 14px;background:rgba(10,10,10,.1);border:1px solid rgba(10,10,10,.25);color:#0a0a0a;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}