/* ╔══════════════════════════════════════════════════════════════╗
   ║  DEGREE MAP — Component Styles                               ║
   ║  Used only on /curriculum/ (loaded via extra_css)             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── PROGRAM / TRACK CONTROLS ──────────────────────────────────── */
.program-controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 0; padding-left: .75rem;
}
.prog-label {
  font-size: .7rem; color: var(--light-gray);
  text-transform: uppercase; letter-spacing: .1em; margin-right: .25rem;
}
.prog-btn {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
  color: var(--light-gray); padding: .35rem .9rem; border-radius: 4px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; transition: all .18s;
}
.prog-btn:hover  { border-color: var(--gold); color: var(--gold); }
.prog-btn.active { background: var(--gold); border-color: var(--gold); color: var(--dark-brown); }

#track-selector {
  display: none; align-items: center; gap: .4rem;
  border-left: 1px solid rgba(255,255,255,.2); padding-left: .75rem; margin-left: .25rem;
}
#track-selector.visible { display: flex; }

.track-btn {
  background: transparent; border: 1.5px solid rgba(107,201,201,.4);
  color: var(--light-blue); padding: .3rem .7rem; border-radius: 4px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; transition: all .18s;
}
.track-btn:hover  { border-color: var(--light-blue); background: rgba(107,201,201,.1); }
.track-btn.active { background: var(--light-blue); border-color: var(--light-blue); color: var(--dark-brown); }


/* ── TAG FILTER BAR ─────────────────────────────────────────── */
#tag-bar {
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(245,184,10,.2);
  padding: .5rem 1.5rem;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  position: sticky; top: 57px; z-index: 99;
}
.tag-bar-label {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--light-gray); margin-right: .3rem; white-space: nowrap;
}
.tag-filter-btn {
  border: none; padding: .22rem .65rem; border-radius: 100px;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: all .15s; opacity: .6; white-space: nowrap;
}
.tag-filter-btn:hover  { opacity: 1; transform: translateY(-1px); }
.tag-filter-btn.active { opacity: 1; box-shadow: 0 0 0 2px white, 0 0 10px rgba(255,255,255,.3); }


/* ── MAIN FLOWCHART AREA ─────────────────────────────────────── */
#main-area { position: relative; padding: 1.25rem 1.5rem 240px; overflow-x: auto; overflow-y: auto; }
#flowchart-wrapper { display: inline-block; }
#flowchart  { display: flex; gap: 0; position: relative; }
#arrow-svg  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }


/* ── SEMESTER COLUMNS ────────────────────────────────────────── */
.sem-col    { width: 176px; flex-shrink: 0; display: flex; flex-direction: column; padding: 0 6px; }
.sem-header { text-align: center; margin-bottom: .6rem; padding: .4rem .3rem; border-bottom: 2px solid var(--gold); }
.sem-year   { font-size: .58rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); opacity: .7; }
.sem-name   { font-family: var(--font-display); font-size: .85rem; color: var(--white); margin: .05rem 0; }
.sem-total  { font-family: var(--font-mono); font-size: .6rem; color: var(--light-gray); opacity: .6; }
.sem-cards  { display: flex; flex-direction: column; gap: .45rem; flex: 1; }


/* ── COURSE CARDS ────────────────────────────────────────────── */
.course-card {
  position: relative;
  background: var(--parchment);
  border: 1.5px solid var(--parchment-d);
  border-radius: 6px;
  padding: .5rem .55rem .4rem;
  cursor: pointer;
  transition: opacity .2s, border-color .2s, box-shadow .2s, transform .15s;
  will-change: opacity, border-color;
  min-height: 58px;
}
.course-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.35); border-color: var(--gold); z-index: 2; }
.course-card.is-placeholder { background: transparent; border: 1.5px dashed rgba(245,184,10,.35); }
.course-card.is-placeholder .card-code  { color: var(--gold); opacity: .7; }
.course-card.is-placeholder .card-title { color: rgba(255,255,255,.5); font-style: italic; }

.credit-badge {
  position: absolute; top: .3rem; right: .35rem;
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--brown); background: rgba(92,48,0,.12);
  border-radius: 3px; padding: .05rem .28rem; font-weight: 500;
}
.is-placeholder .credit-badge { color: var(--gold); background: rgba(245,184,10,.12); }
.card-code  { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; color: var(--brown); line-height: 1; padding-right: 1.8rem; }
.card-title { font-size: .72rem; font-weight: 600; color: var(--dark-brown); line-height: 1.25; margin-top: .18rem; padding-right: 1rem; }
.card-tags  { display: flex; flex-wrap: wrap; gap: .22rem; margin-top: .3rem; }
.card-tag   { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .35rem; border-radius: 100px; color: white; line-height: 1.4; }


/* ── CARD STATES ─────────────────────────────────────────────── */
.course-card.state-dimmed   { opacity: .08; pointer-events: none; }
.course-card.state-selected { border-color: var(--yellow)     !important; box-shadow: 0 0 0 2px var(--yellow),     0 4px 20px rgba(255,227,0,.3)   !important; opacity: 1 !important; z-index: 5; }
.course-card.state-prereq   { border-color: var(--teal)       !important; box-shadow: 0 0 0 1.5px var(--teal),     0 2px 12px rgba(0,99,84,.25)   !important; opacity: 1 !important; }
.course-card.state-coreq    { border-color: var(--orange)     !important; box-shadow: 0 0 0 1.5px var(--orange),   0 2px 12px rgba(199,105,23,.25)!important; opacity: 1 !important; }
.course-card.state-unlocked { border-color: var(--light-blue) !important; box-shadow: 0 0 0 1.5px var(--light-blue),0 2px 12px rgba(107,201,201,.2)!important; opacity: 1 !important; }
.course-card.state-tag-match { opacity: 1 !important; box-shadow: 0 2px 12px rgba(0,0,0,.2); }


/* ── ELECTIVE DROPDOWN ───────────────────────────────────────── */
.expand-btn {
  width: 100%; background: transparent; border: none;
  border-top: 1px solid rgba(245,184,10,.2);
  color: var(--gold); font-size: .6rem; padding: .25rem 0; margin-top: .3rem;
  text-align: center; letter-spacing: .06em; opacity: .65; transition: opacity .15s;
  cursor: pointer;
}
.expand-btn:hover { opacity: 1; }
.eligible-list { display: none; flex-direction: column; gap: .15rem; margin-top: .25rem; border-top: 1px solid rgba(245,184,10,.15); padding-top: .25rem; }
.eligible-list.open { display: flex; }
.eligible-item { font-size: .59rem; color: rgba(255,255,255,.55); font-style: italic; line-height: 1.35; padding-left: .3rem; border-left: 1.5px solid rgba(245,184,10,.3); }


/* ── ARROWS ──────────────────────────────────────────────────── */
.arrow-prereq { stroke: rgba(92,48,0,.55); stroke-width: 2;   fill: none; }
.arrow-coreq  { stroke: rgba(199,105,23,.5); stroke-width: 2; fill: none; stroke-dasharray: 5,3; }
.arrow-prereq.hi-prereq  { stroke: var(--teal);       stroke-width: 3; opacity: 1; }
.arrow-prereq.hi-unlocked{ stroke: var(--light-blue); stroke-width: 3; opacity: 1; }
.arrow-coreq.hi-coreq    { stroke: var(--orange);     stroke-width: 3; opacity: 1; stroke-dasharray: 5,3; }
.arrow-prereq.fade, .arrow-coreq.fade { display: none; }


/* ── LEGEND ──────────────────────────────────────────────────── */
#legend {
  position: fixed; bottom: 1rem; right: 1rem;
  background: rgba(51,26,0,.93); border: 1px solid rgba(245,184,10,.3);
  border-radius: 8px; padding: .65rem .85rem;
  font-size: .62rem; z-index: 90; backdrop-filter: blur(4px); max-width: 185px;
}
#legend h4 { font-family: var(--font-display); font-size: .72rem; color: var(--gold); margin-bottom: .45rem; letter-spacing: .04em; }
.legend-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .28rem; color: var(--light-gray); }
.legend-box { width: 14px; height: 10px; border-radius: 2px; border-width: 2px; border-style: solid; flex-shrink: 0; }


/* ── DETAIL PANEL ────────────────────────────────────────────── */
#detail-panel {
  position: fixed; bottom: -320px; left: 0; right: 0;
  background: var(--white); border-top: 3px solid var(--gold);
  padding: 1rem 1.5rem 1.25rem; z-index: 200;
  transition: bottom .28s cubic-bezier(.4,0,.2,1);
  max-height: 300px; overflow-y: auto; color: var(--dark-brown);
}
#detail-panel.open { bottom: 0; }
#panel-close {
  position: absolute; top: .75rem; right: 1rem;
  background: var(--parchment-d); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 1rem; color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#panel-close:hover { background: var(--gold); color: var(--dark-brown); }
#panel-code    { font-family: var(--font-mono); font-size: .75rem; color: var(--brown); font-weight: 500; }
#panel-title   { font-family: var(--font-display); font-size: 1.15rem; color: var(--dark-brown); margin: .1rem 0 .5rem; }
#panel-meta    { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; align-items: center; }
.panel-credits { font-family: var(--font-mono); font-size: .72rem; background: var(--parchment-d); border-radius: 4px; padding: .15rem .5rem; color: var(--brown); }
#panel-tags    { display: flex; gap: .3rem; flex-wrap: wrap; }
#panel-desc    { font-size: .78rem; color: #4a3000; line-height: 1.55; margin-bottom: .65rem; }
.panel-relations { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.rel-group h5  { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; font-weight: 700; }
.rel-group.prereqs  h5 { color: var(--teal); }
.rel-group.coreqs   h5 { color: var(--orange); }
.rel-group.unlocked h5 { color: #1a7fa0; }
.rel-pill      { display: inline-block; font-family: var(--font-mono); font-size: .6rem; padding: .12rem .4rem; border-radius: 3px; margin: .1rem .1rem 0 0; cursor: pointer; font-weight: 500; }
.rel-pill:hover { text-decoration: underline; }
.prereq-pill   { background: rgba(0,99,84,.12);     color: var(--teal); }
.coreq-pill    { background: rgba(199,105,23,.12);   color: var(--orange); }
.unlock-pill   { background: rgba(107,201,201,.15);  color: #1a7fa0; }
.none-label    { font-size: .65rem; color: var(--light-gray); font-style: italic; }
#panel-eligible { margin-top: .65rem; }
#panel-eligible h5 { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: .3rem; font-weight: 700; }
.eligible-panel-list { display: flex; flex-direction: column; gap: .2rem; }
.eligible-panel-item { font-size: .7rem; color: #4a3000; padding: .18rem .5rem; border-left: 2px solid var(--gold); background: rgba(245,184,10,.06); border-radius: 0 3px 3px 0; }


/* ── TOOLTIP ─────────────────────────────────────────────────── */
#tooltip {
  position: fixed; background: rgba(51,26,0,.95); border: 1px solid var(--gold);
  color: var(--white); font-size: .65rem; padding: .3rem .6rem;
  border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .12s;
  z-index: 300; max-width: 220px; line-height: 1.4;
}
#tooltip.vis { opacity: 1; }


/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .panel-relations { grid-template-columns: 1fr; }
}


/* ── ZOOM CONTROLS ──────────────────────────────────────────── */
.zoom-controls {
  display: flex; align-items: center; gap: .3rem;
  margin-left: auto;
}
.zoom-btn {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
  color: var(--light-gray); width: 28px; height: 28px;
  border-radius: 4px; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.zoom-btn:hover { border-color: var(--gold); color: var(--gold); }
.zoom-level {
  font-family: var(--font-mono); font-size: .7rem; color: var(--light-gray);
  min-width: 3rem; text-align: center;
}