/* ╔══════════════════════════════════════════════════════════════╗
   ║  TRANSCRIPT AUDIT — Component Styles                        ║
   ║  Used only on /transcript/ (loaded via extra_css)            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── PRIVACY BANNER ─────────────────────────────────────────── */
.privacy-banner {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(0,99,84,.25); border: 1px solid var(--teal);
  border-radius: 6px; padding: .6rem 1rem; margin: 1rem 1.5rem 0;
  font-size: .8rem; color: var(--light-blue);
}
.privacy-icon { font-size: 1.1rem; }
.privacy-dismiss {
  margin-left: auto; background: none; border: none;
  color: var(--light-gray); font-size: 1.2rem; padding: 0 .25rem;
  opacity: .6; transition: opacity .15s;
}
.privacy-dismiss:hover { opacity: 1; }


/* ── PROGRAM CONTROLS BAR (always visible) ─────────────────── */
.program-controls-bar {
  display: flex; justify-content: center;
  padding: .75rem 1.5rem 0;
}
.catalog-year-bar { padding-top: .25rem; }
.catalog-year-select {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
  color: #eee; font-size: .75rem; padding: .25rem .5rem; border-radius: 6px;
  cursor: pointer; margin-left: .25rem;
}
.catalog-year-select:focus { outline: none; border-color: var(--gold); }
.catalog-year-auto {
  font-size: .65rem; color: var(--gold); margin-left: .4rem; font-style: italic;
}

/* ── UPLOAD SECTION ─────────────────────────────────────────── */
.upload-section {
  max-width: 640px; margin: 2rem auto; padding: 0 1.5rem;
  text-align: center;
}
.upload-title {
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--gold); margin-bottom: .3rem;
}
.upload-subtitle {
  font-size: .9rem; color: var(--light-gray); margin-bottom: 1.5rem;
}

/* Program controls — reuse degree-map patterns */
.upload-section .program-controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 1.5rem;
}
.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); }


/* ── DROP ZONE ──────────────────────────────────────────────── */
.drop-zone {
  border: 2.5px dashed rgba(245,184,10,.4);
  border-radius: 12px; padding: 3rem 2rem;
  transition: all .2s; cursor: pointer;
  background: rgba(245,184,10,.03);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--gold);
  background: rgba(245,184,10,.08);
}
.drop-zone-content { pointer-events: none; }
.drop-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.drop-text { font-size: 1rem; color: var(--white); margin: 0; }
.drop-or { font-size: .75rem; color: var(--light-gray); margin: .5rem 0; }

.file-btn {
  display: inline-block;
  background: var(--gold); color: var(--dark-brown);
  padding: .5rem 1.2rem; border-radius: 6px;
  font-size: .85rem; font-weight: 600;
  cursor: pointer; pointer-events: auto;
  transition: background .15s;
}
.file-btn:hover { background: var(--yellow); }


/* ── FILE INFO ──────────────────────────────────────────────── */
.file-info {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .75rem; margin-top: 1rem;
  background: rgba(255,255,255,.06); border-radius: 6px;
}
.file-name {
  font-family: var(--font-mono); font-size: .85rem; color: var(--gold);
}
.file-clear {
  background: none; border: none; color: var(--light-gray);
  font-size: 1.2rem; opacity: .6; transition: opacity .15s;
}
.file-clear:hover { opacity: 1; color: var(--magenta); }


/* ── PARSE BUTTON ───────────────────────────────────────────── */
.parse-btn {
  display: block; width: 100%; margin-top: 1.25rem;
  background: var(--teal); color: var(--white);
  border: none; padding: .75rem; border-radius: 6px;
  font-size: 1rem; font-weight: 600; letter-spacing: .04em;
  transition: all .18s;
}
.parse-btn:hover:not(:disabled) { background: #007d68; }
.parse-btn:disabled { opacity: .4; cursor: not-allowed; }

.example-btn {
  display: block; width: 100%; margin-top: .5rem;
  background: transparent; color: var(--light-gray);
  border: 1px solid var(--light-gray); padding: .5rem;
  border-radius: 6px; font-size: .82rem; letter-spacing: .03em;
  opacity: .6; transition: all .18s; cursor: pointer;
}
.example-btn:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }


/* ── ERROR ──────────────────────────────────────────────────── */
.parse-error {
  margin-top: 1rem; padding: .6rem .8rem;
  background: rgba(168,0,135,.15); border: 1px solid var(--magenta);
  border-radius: 6px; font-size: .82rem; color: #ff6ed2;
}


/* ── RESULTS SECTION ────────────────────────────────────────── */
.results-section { padding: 0 1.5rem 3rem; }


/* ── SUMMARY BAR ────────────────────────────────────────────── */
.summary-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  background: rgba(0,0,0,.35); border-radius: 8px;
  border: 1px solid rgba(245,184,10,.2);
}
.summary-stat { text-align: center; }
.stat-value {
  display: block; font-family: var(--font-mono);
  font-size: 1.5rem; font-weight: 700; color: var(--gold);
}
.stat-label {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--light-gray);
}
.stat-progress .stat-value { color: var(--light-blue); }

.progress-bar-wrap {
  flex: 1; min-width: 120px; height: 8px;
  background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden;
}
.progress-bar {
  height: 100%; background: var(--teal);
  border-radius: 4px; transition: width .5s ease;
}


/* ── AUDIT GRID (semester columns) ──────────────────────────── */
.audit-area { overflow-x: auto; padding-bottom: 1rem; position: relative; }
.audit-grid { display: flex; gap: 0; position: relative; z-index: 1; }

/* ── ARROW SVG ─────────────────────────────────────────────── */
#audit-arrow-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  overflow: visible;
}
#audit-arrow-svg path { pointer-events: stroke; }
.arrow-prereq { fill: none; stroke: rgba(92,48,0,.65); stroke-width: 2; }
.arrow-coreq  { fill: none; stroke: rgba(199,105,23,.65); stroke-width: 2; 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; stroke-dasharray: 5,3; }
.arrow-prereq.fade, .arrow-coreq.fade { display: none; }

.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-cards  { display: flex; flex-direction: column; gap: .45rem; flex: 1; }


/* ── AUDIT CARDS ────────────────────────────────────────────── */
.audit-card {
  position: relative;
  background: var(--parchment);
  border: 1.5px solid var(--parchment-d);
  border-radius: 6px;
  padding: .5rem .55rem .4rem;
  transition: all .18s;
}

/* Status variants */
.audit-card.status-completed {
  border-color: var(--teal);
  background: linear-gradient(135deg, #e8f5f0 0%, var(--parchment) 100%);
}
.audit-card.status-transfer {
  border-color: var(--light-blue);
  background: linear-gradient(135deg, #e0f4f4 0%, var(--parchment) 100%);
}
.audit-card.status-failed {
  border-color: var(--magenta);
  background: linear-gradient(135deg, #f5e0ef 0%, var(--parchment) 100%);
}
.audit-card.status-no-grade {
  border-color: var(--yellow);
  background: linear-gradient(135deg, #fef9e7 0%, var(--parchment) 100%);
}
.audit-card.status-remaining {
  opacity: .5;
  border-style: dashed;
}

/* ── CARD SELECTION STATES ─────────────────────────────────── */
.audit-card.state-selected  { border-color: var(--yellow); box-shadow: 0 0 8px rgba(255,227,0,.5); opacity: 1; z-index: 5; cursor: pointer; }
.audit-card.state-prereq    { border-color: var(--teal); box-shadow: 0 0 6px rgba(0,99,84,.4); opacity: 1; }
.audit-card.state-coreq     { border-color: var(--orange); box-shadow: 0 0 6px rgba(199,105,23,.4); opacity: 1; }
.audit-card.state-unlocked  { border-color: var(--light-blue); box-shadow: 0 0 6px rgba(107,201,201,.4); opacity: 1; }
.audit-card.state-dimmed    { opacity: .08; pointer-events: none; }

.audit-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .2rem;
}
.audit-code {
  font-family: var(--font-mono); font-size: .7rem;
  font-weight: 700; color: var(--brown); letter-spacing: .03em;
}
.audit-title {
  font-size: .68rem; color: var(--dark-brown);
  line-height: 1.25; margin-bottom: .3rem;
}
.audit-card-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.audit-credits {
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--brown); opacity: .7;
}
.audit-status-icon { font-size: .75rem; }
.status-completed .audit-status-icon { color: var(--teal); }
.status-failed    .audit-status-icon { color: var(--magenta); }
.status-transfer  .audit-status-icon { color: var(--light-blue); }


.audit-tags {
  display: flex; gap: .2rem; flex-wrap: wrap; margin-top: .25rem;
}
.audit-tag {
  font-size: .5rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .1rem .35rem;
  border-radius: 100px; white-space: nowrap;
}


/* ── GRADE BADGE ────────────────────────────────────────────── */
.grade-badge {
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 4px;
  letter-spacing: .03em;
}
.grade-a  { background: #006354; color: #fff; }
.grade-b  { background: #2a7d6e; color: #fff; }
.grade-c  { background: #b08700; color: #fff; }
.grade-d  { background: #c76917; color: #fff; }
.grade-f  { background: #a80087; color: #fff; }
.grade-tr { background: var(--light-blue); color: var(--dark-brown); }
.grade-w  { background: var(--orange); color: #fff; }
.grade-ip { background: var(--yellow); color: var(--dark-brown); font-style: italic; }
.grade-s  { background: var(--teal); color: #fff; }


/* ── UNMATCHED SECTION ──────────────────────────────────────── */
.unmatched-section {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.unmatched-title {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--gold); margin-bottom: .75rem;
}
.unmatched-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .5rem;
}
.unmatched-item {
  display: flex; flex-direction: column; gap: .3rem;
  background: rgba(255,255,255,.05); border-radius: 6px;
  padding: .5rem .75rem; font-size: .8rem;
}
.unmatched-top {
  display: flex; align-items: center; gap: .5rem;
}
.unmatched-code {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--gold); white-space: nowrap;
}
.unmatched-title { color: var(--light-gray); flex: 1; font-size: .75rem; }
.unmatched-meta {
  display: flex; align-items: center; gap: .4rem;
}
.unmatched-credits {
  font-family: var(--font-mono); font-size: .65rem;
  color: var(--light-gray); opacity: .6; white-space: nowrap;
}
.unmatched-sem-tag {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--light-gray); opacity: .55;
  background: rgba(255,255,255,.06); border-radius: 3px;
  padding: .1rem .4rem; white-space: nowrap;
}


/* ── RESET BUTTON ───────────────────────────────────────────── */
.reset-btn {
  display: block; margin: 2rem auto 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
  color: var(--light-gray); padding: .6rem 1.5rem; border-radius: 6px;
  font-size: .85rem; font-weight: 600; transition: all .18s;
}
.reset-btn:hover { border-color: var(--gold); color: var(--gold); }


/* ── ZOOM CONTROLS ─────────────────────────────────────────── */
.zoom-controls {
  display: flex; align-items: center; gap: .3rem;
  justify-content: flex-end; margin-bottom: .75rem;
}
.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;
}


/* ── GROUPED ELECTIVE CARDS ────────────────────────────────── */
.elective-group-card {
  position: relative;
  background: var(--parchment);
  border: 1.5px solid var(--parchment-d);
  border-radius: 6px;
  padding: .55rem .6rem .45rem;
}
.elective-group-card.group-filled {
  border-color: var(--teal);
  background: linear-gradient(135deg, #e8f5f0 0%, var(--parchment) 100%);
}
.elective-group-card.group-partial {
  border-color: var(--orange);
  background: linear-gradient(135deg, #fef3e0 0%, var(--parchment) 100%);
}
.elective-group-card.group-ip {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fdf8e8 0%, var(--parchment) 100%);
}
.elective-group-card.group-empty {
  opacity: .5; border-style: dashed;
}
.group-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .3rem;
}
.group-name {
  font-family: var(--font-mono); font-size: .7rem;
  font-weight: 700; color: var(--brown); letter-spacing: .03em;
}
.group-subtitle {
  font-size: .6rem; color: var(--brown); opacity: .7;
  margin-top: -.1rem; margin-bottom: .15rem;
}
.group-tally {
  font-family: var(--font-mono); font-size: .65rem;
  font-weight: 700; color: var(--brown);
}
.group-progress-wrap {
  height: 5px; background: rgba(0,0,0,.1);
  border-radius: 3px; overflow: hidden; margin-bottom: .35rem;
}
.group-progress-bar {
  height: 100%; border-radius: 3px;
  transition: width .4s ease;
}
.group-filled  .group-progress-bar { background: var(--teal); }
.group-partial .group-progress-bar { background: var(--orange); }
.group-ip      .group-progress-bar { background: var(--gold); }
.group-empty   .group-progress-bar { background: transparent; }
.group-courses {
  display: flex; flex-direction: column; gap: .2rem;
}
.group-course-item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .62rem; color: var(--dark-brown);
}
.group-course-code {
  font-family: var(--font-mono); font-weight: 600;
}


/* ── DETAIL PANEL (bottom popup) ────────────────────────────── */
#audit-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);
}
#audit-detail-panel.open { bottom: 0; }
#audit-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;
}
#audit-panel-close:hover { background: var(--gold); color: var(--dark-brown); }
#audit-panel-code    { font-family: var(--font-mono); font-size: .75rem; color: var(--brown); font-weight: 500; }
#audit-panel-title   { font-family: var(--font-display); font-size: 1.15rem; color: var(--dark-brown); margin: .1rem 0 .5rem; }
#audit-panel-meta    { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; align-items: center; }
.audit-panel-credits { font-family: var(--font-mono); font-size: .72rem; background: var(--parchment-d); border-radius: 4px; padding: .15rem .5rem; color: var(--brown); }
#audit-panel-desc    { font-size: .78rem; color: #4a3000; line-height: 1.55; margin-bottom: .65rem; }
.audit-panel-relations { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.audit-rel-group h5  { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; font-weight: 700; }
.audit-rel-group.prereqs  h5 { color: var(--teal); }
.audit-rel-group.coreqs   h5 { color: var(--orange); }
.audit-rel-group.unlocked h5 { color: #1a7fa0; }
.audit-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; }
.audit-rel-pill:hover { text-decoration: underline; }
.audit-prereq-pill   { background: rgba(0,99,84,.12);     color: var(--teal); }
.audit-coreq-pill    { background: rgba(199,105,23,.12);   color: var(--orange); }
.audit-unlock-pill   { background: rgba(107,201,201,.15);  color: #1a7fa0; }
.audit-none-label    { font-size: .65rem; color: var(--light-gray); font-style: italic; }
#audit-panel-eligible { margin-top: .65rem; }
#audit-panel-eligible h5 { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: .3rem; font-weight: 700; }
.audit-eligible-list { display: flex; flex-direction: column; gap: .2rem; }
.audit-eligible-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; }


/* ── OPTIONAL SELECTORS (Double Major / Minors / CC) ──────── */
.optional-selector {
  text-align: center;
  padding: .25rem 1.5rem 0;
}
.optional-selector-header {
  display: inline-flex; align-items: center; gap: .5rem;
  justify-content: center;
}
.optional-selector-toggle {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.15);
  color: var(--light-gray); padding: .3rem .75rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; transition: all .18s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.optional-selector-toggle:hover { border-color: var(--gold); color: var(--gold); }
.optional-selector-toggle .prog-label { margin: 0; }
.optional-toggle-arrow { font-size: .6rem; opacity: .7; }
.selected-tags {
  display: inline-flex; flex-wrap: wrap; gap: .35rem;
}
.selected-tag {
  display: inline-flex; align-items: center;
  background: rgba(0,99,84,.3); border: 1px solid var(--teal);
  color: var(--light-blue); padding: .15rem .5rem; border-radius: 3px;
  font-size: .7rem; font-weight: 600;
}
.optional-picker {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem; padding: .5rem 0 0;
}
.optional-picker .prog-btn {
  font-size: .75rem;
}

/* ── MINOR RESULTS SECTION ─────────────────────────────────── */
.minor-results-section {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.minor-results-title {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--gold); margin-bottom: .75rem;
}
.minor-audit-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: .85rem 1rem; margin-bottom: .75rem;
  transition: border-color .2s;
}
.minor-audit-card.minor-met { border-color: var(--teal); }
.minor-card-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem;
}
.minor-status-icon {
  font-size: .9rem; font-weight: 700; width: 1.2rem; text-align: center;
}
.minor-status-icon.met  { color: var(--teal); }
.minor-status-icon.unmet { color: var(--light-gray); }
.minor-card-title {
  font-family: var(--font-display); font-size: .95rem;
  color: #fff; font-weight: 600; flex: 1;
}
.minor-card-tally {
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--gold); white-space: nowrap;
}

/* Progress bar */
.minor-progress-wrap {
  height: 5px; background: rgba(0,0,0,.15);
  border-radius: 3px; overflow: hidden; margin-bottom: .6rem;
}
.minor-progress-bar {
  height: 100%; border-radius: 3px; transition: width .4s ease;
}
.minor-progress-bar.full    { background: var(--teal); }
.minor-progress-bar.partial { background: var(--orange); }
.minor-progress-bar.empty   { background: transparent; }

/* Requirement rows */
.minor-req-list {
  display: flex; flex-direction: column; gap: .3rem;
  margin-bottom: .5rem;
}
.minor-req-row {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: .78rem; padding: .2rem 0;
}
.minor-req-icon {
  font-size: .75rem; width: 1rem; text-align: center; flex-shrink: 0;
  margin-top: .1rem;
}
.minor-req-icon.met  { color: var(--teal); }
.minor-req-icon.unmet { color: var(--light-gray); }
.minor-req-label {
  color: var(--light-gray); min-width: 140px; flex-shrink: 0;
}
.minor-req-detail {
  display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
}
.minor-course-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  background: rgba(255,255,255,.06); border-radius: 3px;
  padding: .1rem .35rem; font-size: .72rem; color: var(--light-blue);
}
.minor-grade {
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  padding: .05rem .2rem; border-radius: 2px;
}
.minor-grade.grade-a  { color: #4ade80; }
.minor-grade.grade-b  { color: #60a5fa; }
.minor-grade.grade-c  { color: var(--gold); }
.minor-grade.grade-d  { color: var(--orange); }
.minor-grade.grade-f  { color: #f87171; }
.minor-grade.grade-tr { color: #a78bfa; }
.minor-grade.grade-ip { background: var(--yellow); color: var(--dark-brown); font-style: italic; }
.minor-grade.grade-s  { color: #4ade80; }
.minor-need {
  font-size: .72rem; color: var(--orange); font-style: italic;
}

/* Above & Beyond row */
.minor-aab-row {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; padding: .35rem .5rem;
  border-radius: 4px; margin-top: .3rem;
}
.minor-aab-row.met {
  background: rgba(0,99,84,.15); border: 1px solid rgba(0,99,84,.3);
}
.minor-aab-row.unmet {
  background: rgba(199,105,23,.1); border: 1px solid rgba(199,105,23,.3);
}
.minor-aab-text { color: var(--light-gray); }

/* ── AUDIT BUTTON ROW ──────────────────────────────────────── */
.audit-btn-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem; margin-top: .8rem;
}
.audit-btn-row .reset-btn,
.audit-btn-row .plan-btn { display: inline-block; margin: 0; }

/* ── SECONDARY MAJOR (DOUBLE MAJOR) ────────────────────────── */
.secondary-major-section {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 2px solid var(--gold);
}
.secondary-major-header {
  text-align: center; margin-bottom: 1rem;
}
.secondary-major-title {
  color: var(--gold); font-size: 1.3rem; margin: 0 0 .5rem;
}
.secondary-aab {
  display: inline-block; padding: .3rem .8rem; border-radius: 4px;
  font-size: .8rem; font-weight: 600;
}
.aab-met { background: rgba(74,222,128,.15); color: #4ade80; }
.aab-not-met { background: rgba(248,113,113,.15); color: #f87171; }

/* Secondary major view toggle */
.secondary-view-toggle {
  display: flex; justify-content: center; gap: .35rem;
  margin: .75rem 0;
}
.view-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.25);
  color: var(--light-gray); padding: .3rem .8rem; border-radius: 4px;
  font-size: .75rem; cursor: pointer; transition: all .15s;
}
.view-btn:hover { border-color: var(--gold); color: var(--gold); }
.view-btn.active {
  background: var(--gold); color: var(--brown); border-color: var(--gold);
  font-weight: 600;
}

/* Secondary major requirements view */
.secondary-reqs-container {
  max-width: 800px; margin: 0 auto; padding: .5rem 0;
}

/* Christ College toggle */
.cc-active {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
#cc-toggle-indicator {
  font-size: .7rem; color: var(--gold);
}
#cc-toggle-indicator:not(:empty) {
  margin-left: .5rem;
}

/* Double major picker — uses .optional-picker now */

/* ── PLAN BUTTON ───────────────────────────────────────────── */
.plan-btn {
  display: block; margin: 2rem auto 0;
  background: var(--teal); border: 1.5px solid var(--teal);
  color: #fff; padding: .7rem 2rem; border-radius: 6px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: all .18s;
}
.plan-btn:hover { background: #007a66; border-color: #007a66; }

/* ── SEMESTER PLANNER ──────────────────────────────────────── */
.planner-section {
  padding: 1rem 1.5rem 2rem;
}
.planner-header {
  text-align: center; margin-bottom: 1.5rem;
}
.planner-title {
  color: var(--gold); font-size: 1.5rem; margin: 0 0 .25rem;
}
.planner-subtitle {
  color: var(--light-gray); font-size: .85rem; margin: 0; opacity: .7;
}
.planner-section .audit-card.status-remaining {
  opacity: 1;
}
/* Overflow */
.planner-overflow {
  margin-top: 2rem; padding: 1rem;
  background: rgba(0,0,0,.15); border-radius: 8px;
}
.planner-overflow-title {
  color: var(--gold); font-size: 1rem; margin: 0 0 .25rem;
}
.planner-overflow-desc {
  color: var(--parchment); font-size: .8rem; margin: 0 0 1rem;
}
.planner-overflow-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
}

/* ── TRANSCRIPT PLANNER — REARRANGE & TOOLBAR ────────────── */

.tp-toolbar {
  display: flex; gap: .5rem; justify-content: center;
  padding: 0 1.5rem .75rem; flex-wrap: wrap;
}

.tp-extras {
  display: flex; gap: .5rem; align-items: center;
  justify-content: center; padding: 0 1.5rem .5rem; flex-wrap: wrap;
}

/* Validation legend */
.tp-validation-legend {
  display: flex; gap: 1rem; justify-content: center;
  padding: .3rem 1.5rem .5rem; flex-wrap: wrap;
}
.tp-validation-legend .legend-item {
  display: flex; align-items: center; gap: .3rem;
  color: var(--light-gray); font-size: .7rem;
}
.tp-validation-legend .legend-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}

/* Rearrange mode card styles (shared classes from rearrange-engine) */
.planner-section .rearrange-mode .planner-card {
  border-left-color: transparent !important;
  cursor: grab; position: relative;
}
.planner-section .planner-card {
  background: var(--card-bg, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.06);
  border-left: 4px solid transparent;
  border-radius: 6px; padding: .5rem .55rem .4rem;
  transition: box-shadow .15s, border-color .15s, background .15s;
  cursor: pointer;
}
.planner-section .planner-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.planner-section .planner-card-top {
  display: flex; justify-content: space-between; align-items: center;
}
.planner-section .planner-code {
  font-weight: 700; font-size: .72rem; color: var(--gold);
  letter-spacing: .02em;
}
.planner-section .planner-title {
  font-size: .62rem; color: var(--parchment); margin-top: .15rem;
  line-height: 1.25; opacity: .85;
}
.planner-section .planner-card-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .2rem;
}
.planner-section .planner-credits {
  font-size: .6rem; color: var(--light-gray); opacity: .6;
}

/* Validation card states */
.planner-section .planner-card.validation-valid {
  background: rgba(46, 204, 113, .1);
  border-left: 4px solid #2ecc71 !important;
}
.planner-section .planner-card.validation-warning {
  background: rgba(241, 196, 15, .15);
  border-left: 4px solid #f1c40f !important;
}
.planner-section .planner-card.validation-error {
  background: rgba(231, 76, 60, .18);
  border-left: 4px solid #e74c3c !important;
}

/* Status icon */
.planner-section .validation-icon {
  font-size: .7rem; font-weight: 700; line-height: 1;
  width: 16px; height: 16px; display: flex;
  align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.planner-section .validation-icon-valid   { color: #2ecc71; background: rgba(46,204,113,.15); }
.planner-section .validation-icon-warning { color: #f1c40f; background: rgba(241,196,15,.15); }
.planner-section .validation-icon-error   { color: #e74c3c; background: rgba(231,76,60,.15); }

/* Drag and drop */
.planner-section .planner-card.dragging { opacity: .3; }
.planner-section .sem-cards.drop-zone-active {
  min-height: 60px;
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 6px;
  transition: border-color .15s, background .15s;
}
.planner-section .sem-cards.drop-target {
  border-color: var(--teal) !important;
  background: rgba(0,99,84,.1);
}

/* Add/remove semester */
.planner-section .add-semester-col {
  display: flex; align-items: stretch; justify-content: center;
  min-height: 200px;
}
.planner-section .add-semester-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem .5rem;
  border: 2px dashed rgba(255,255,255,.1);
  border-radius: 8px; width: 100%; cursor: pointer;
  transition: border-color .15s;
}
.planner-section .add-semester-inner:hover { border-color: rgba(255,255,255,.25); }
.planner-section .add-semester-icon {
  font-size: 1.5rem; color: rgba(255,255,255,.3);
  font-weight: 300; line-height: 1;
}
.planner-section .add-semester-options {
  display: flex; flex-direction: column; gap: .3rem;
}
.planner-section .add-semester-options button {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #bbb; font-size: .68rem; padding: .25rem .5rem;
  border-radius: 3px; cursor: pointer; transition: background .15s;
}
.planner-section .add-semester-options button:hover {
  background: rgba(255,255,255,.12); color: #fff;
}
.planner-section .add-summer-btn {
  appearance: none; -webkit-appearance: none;
  display: block; margin: .3rem auto 0; padding: .15rem .4rem;
  background: transparent; border: 1px dashed rgba(255,255,255,.15);
  color: #999; font-size: .6rem; border-radius: 3px;
  cursor: pointer; transition: all .15s;
}
.planner-section .add-summer-btn:hover {
  border-color: var(--teal); color: var(--teal);
}
.planner-section .remove-semester-btn {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: .2rem; right: .2rem;
  background: none; border: none; color: rgba(255,255,255,.3);
  font-size: .8rem; cursor: pointer; line-height: 1; padding: 0 .2rem;
}
.planner-section .remove-semester-btn:hover { color: #e74c3c; }

/* Rearrange toggle/save/cancel buttons reuse .rearrange-toggle-btn etc from planner */
.planner-section .rearrange-toggle-btn {
  appearance: none; -webkit-appearance: none;
  background-color: transparent; border: 1px solid rgba(255,255,255,.25);
  color: #ccc; font-size: .75rem; padding: .4rem .8rem;
  border-radius: 4px; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.planner-section .rearrange-toggle-btn:hover { border-color: var(--teal); color: var(--teal); }
.planner-section .rearrange-toggle-btn.active {
  background-color: var(--teal); border-color: var(--teal); color: #fff;
}
.planner-section .rearrange-controls {
  display: flex; justify-content: center; gap: .6rem; padding: .4rem 1.5rem;
}
.planner-section .rearrange-save-btn, .planner-section .rearrange-cancel-btn {
  appearance: none; -webkit-appearance: none;
  font-size: .75rem; padding: .35rem .8rem;
  border-radius: 4px; cursor: pointer; border: 1px solid;
  transition: background-color .15s;
}
.planner-section .rearrange-save-btn {
  background-color: var(--teal); border-color: var(--teal); color: #fff;
}
.planner-section .rearrange-save-btn:hover { background-color: #007a66; }
.planner-section .rearrange-cancel-btn {
  background-color: transparent; border-color: rgba(255,255,255,.2); color: #ccc;
}
.planner-section .rearrange-cancel-btn:hover { background-color: rgba(255,255,255,.08); }

/* Overloaded credits */
.planner-section .credits-overloaded { color: #e74c3c; font-weight: 700; }

/* Legend swatches */
.swatch-valid   { background: #2ecc71; }
.swatch-warning { background: #f1c40f; }
.swatch-error   { background: #e74c3c; }

/* ── Add Course Modal ─────────────────────────────────────── */

.tp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.tp-modal {
  background: var(--brown, #3a2a1a); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; width: 90%; max-width: 500px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tp-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.tp-modal-header h3 {
  color: var(--gold); font-size: 1rem; margin: 0;
}
.tp-modal-close {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.tp-modal-close:hover { color: #fff; }
.tp-search-input {
  margin: .75rem 1rem .5rem; padding: .5rem .6rem;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; color: var(--parchment); font-size: .8rem;
  outline: none;
}
.tp-search-input:focus { border-color: var(--teal); }
.tp-course-results {
  overflow-y: auto; flex: 1; padding: 0 1rem .75rem;
  max-height: 50vh;
}
.tp-course-result {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .5rem; border-radius: 4px; cursor: pointer;
  transition: background .12s;
}
.tp-course-result:hover { background: rgba(255,255,255,.06); }
.tp-course-result-info {
  display: flex; flex-direction: column; gap: .1rem;
}
.tp-course-result-code {
  font-weight: 700; font-size: .72rem; color: var(--gold);
}
.tp-course-result-title {
  font-size: .62rem; color: var(--parchment); opacity: .7;
}
.tp-course-result-credits {
  font-size: .6rem; color: var(--light-gray); opacity: .5; white-space: nowrap;
}
.tp-result-tag {
  font-size: .55rem; font-weight: 400; color: var(--teal); opacity: .7;
  margin-left: .3rem;
}

/* Custom course entry */
.tp-custom-course {
  padding: .5rem 1rem .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: .25rem;
}
.tp-custom-label {
  font-size: .7rem; color: var(--light-gray); opacity: .6; margin-bottom: .4rem;
}
.tp-custom-fields {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}
.tp-custom-input {
  padding: .35rem .5rem; background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  color: var(--parchment); font-size: .72rem; outline: none;
  width: 100px;
}
.tp-custom-input:focus { border-color: var(--teal); }
.tp-custom-title-input { flex: 1; min-width: 140px; }
.tp-custom-credits-input { width: 45px; text-align: center; }
.tp-custom-add-btn { padding: .35rem .6rem !important; font-size: .7rem !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .upload-section { padding: 0 1rem; }
  .summary-bar { gap: .75rem; padding: 1rem; }
  .stat-value { font-size: 1.2rem; }
  .audit-grid { gap: 0; }
  .sem-col { width: 150px; }
  .audit-panel-relations { grid-template-columns: 1fr; }
  .minor-picker { gap: .25rem; }
  .minor-req-row { flex-direction: column; }
  .minor-req-label { min-width: unset; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  AUDIT TOOLBAR                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

.audit-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem 1.5rem 0;
}
.audit-toolbar-left { display: flex; align-items: center; gap: .5rem; }
.audit-toolbar-right { display: flex; align-items: center; }
.audit-toolbar .zoom-controls { position: static; margin-bottom: 0; }

.cp-toggle-btn {
  background: rgba(0,99,84,.25); border: 1.5px solid var(--teal);
  color: var(--light-blue); font-size: .75rem; padding: .3rem .7rem;
  border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
  font-weight: 600;
}
.cp-toggle-btn:hover {
  background: rgba(0,99,84,.45); color: #fff;
}
.cp-toggle-btn.active {
  background: var(--teal); color: #fff;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CRITICAL PATH                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

.critical-path-info {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(0,99,84,.3); border: 1px solid var(--teal);
  border-radius: 6px; padding: .6rem 1rem; margin: .5rem 1.5rem 0;
  font-size: .82rem; color: var(--light-blue);
}
.critical-path-info strong { color: #fff; }
.critical-path-close {
  margin-left: auto; background: none; border: none;
  color: var(--light-gray); font-size: 1.2rem; padding: 0 .25rem;
  opacity: .6; transition: opacity .15s; cursor: pointer;
}
.critical-path-close:hover { opacity: 1; }

.audit-card.on-critical-path {
  border: 2.5px solid var(--teal) !important;
  box-shadow: 0 0 10px rgba(0,99,84,.6), inset 0 0 0 1px rgba(0,99,84,.3);
  background: rgba(0,99,84,.15) !important;
  position: relative;
}
.audit-card.on-critical-path .audit-code {
  color: var(--light-blue);
}
.audit-card.critical-path-dimmed {
  opacity: .3;
}
.critical-path-badge {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  WHAT-IF PROGRAM SWITCHER                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.what-if-picker {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .5rem 0;
}
.what-if-prog-btn {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  color: #eee; font-size: .75rem; padding: .35rem .7rem;
  border-radius: 6px; cursor: pointer; transition: background .15s, border-color .15s;
}
.what-if-prog-btn:hover {
  background: rgba(0,99,84,.35); border-color: var(--teal);
}

.what-if-section {
  background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; margin: 1rem 1.5rem; padding: 1rem 1.2rem;
}
.what-if-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.what-if-header h3 {
  margin: 0; font-size: 1rem; color: var(--gold);
}
.what-if-close {
  background: none; border: none; color: var(--light-gray);
  font-size: 1.3rem; cursor: pointer; opacity: .6; transition: opacity .15s;
}
.what-if-close:hover { opacity: 1; }

.what-if-stat-row {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.what-if-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.05); border-radius: 6px;
  padding: .5rem .8rem; min-width: 100px;
}
.what-if-stat-label {
  font-size: .65rem; color: var(--light-gray); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: .2rem;
}
.what-if-stat-value {
  font-size: 1.2rem; font-weight: 700; color: #fff;
}
.what-if-stat-arrow {
  font-size: 1.2rem; color: var(--light-gray);
}

.what-if-details {
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.what-if-group {
  flex: 1 1 220px; min-width: 200px;
}
.what-if-group h4 {
  margin: 0 0 .5rem; font-size: .8rem; color: var(--light-blue);
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .3rem;
}
.what-if-course-list {
  display: flex; flex-direction: column; gap: .25rem;
}
.what-if-course-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: #ddd; padding: .2rem .4rem;
  border-radius: 4px; background: rgba(255,255,255,.03);
}
.what-if-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-transfer { background: #4caf50; }
.dot-new { background: var(--gold); }
.dot-dropped { background: #888; }
.what-if-code { font-weight: 600; min-width: 75px; }
.what-if-title-text { flex: 1; color: #aaa; }
.what-if-credits { color: #999; font-size: .7rem; margin-left: auto; white-space: nowrap; }

/* Elective group sub-items */
.what-if-elective-group-item { margin-bottom: .4rem; }
.what-if-elective-header { font-weight: 600; }
.what-if-elective-sublist {
  margin-left: 1.2rem; padding-left: .5rem;
  border-left: 2px solid rgba(255,255,255,.08);
}
.what-if-elective-sub-item {
  font-size: .7rem; color: #aaa; padding: .1rem 0;
}