/* ============================================================
   ECRoadmap — Final Design Pass
   Direction: Modern university engineering planner.
   Cyan/steel primary, charcoal text, clean white backgrounds.
   Dependency arrows, dual-view roadmap, highlight chains,
   on-track indicator, GPA dashboard, help panel, print map.
   ============================================================ */
:root{
  /* ---- Cyan / Gray color system ---- */
  --cyan: #0097A7;
  --cyan-bright: #00BCD4;
  --cyan-soft: #E0F7FA;
  --cyan-muted: #4DD0E1;
  --cyan-dark: #006064;

  --paper: #F4F6F9;
  --paper-raised: #FFFFFF;
  --paper-card: #FFFFFF;

  --ink: #1B2A3D;
  --ink-soft: #5A6B7D;
  --ink-faint: #8D9DAD;

  --line: #D5DCE4;
  --line-strong: #B0BEC5;

  --accent: #0097A7;
  --accent-soft: #E0F7FA;
  --accent-bright: #26C6DA;

  --done: #2E7D6F;
  --done-soft: #E8F5E9;
  --done-bright: #4CAF50;

  --trace: #FF8F00;
  --trace-soft: #FFF8E1;

  --locked: #B0BEC5;
  --locked-soft: #F5F5F5;

  --danger: #C62828;
  --danger-soft: #FFEBEE;

  --warning: #F57F17;
  --warning-soft: #FFF8E1;

  /* Semantic aliases */
  --blueprint: var(--cyan);
  --blueprint-soft: var(--cyan-soft);

  /* Fonts */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Shape */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(27,42,61,0.08);
  --shadow-md: 0 4px 12px rgba(27,42,61,0.10);
  --shadow-lg: 0 8px 24px rgba(27,42,61,0.12);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ height: 100%; scroll-behavior: smooth; }
body{
  margin:0; min-height:100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Subtle grid backdrop ---- */
.board-bg{
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.22;
}

a{ color: var(--cyan); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ============ HEADER ============ */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 32px;
  height: 64px;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 100;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  text-decoration: none;
  color: var(--ink);
}
.brand:hover{ text-decoration:none; }
.brand-logo{ width:36px; height:36px; flex-shrink:0; }
.brand-text{ font-weight:700; font-size:18px; letter-spacing:-0.02em; }
.brand-text span{ color: var(--cyan); }
.brand-sub{
  font-family: var(--font-mono); font-weight:400; font-size:11px;
  color: var(--ink-soft); margin-left:4px;
}

.site-nav{ display:flex; align-items:center; gap: 6px; font-size: 13px; font-weight:500;}
.site-nav a{
  color: var(--ink-soft); padding: 8px 12px; border-radius: var(--radius);
  transition: background .15s var(--ease), color .15s var(--ease);
  text-decoration:none; white-space:nowrap;
}
.site-nav a:hover{ background:var(--cyan-soft); color:var(--ink); text-decoration:none; }
.site-nav a.active{ background:var(--cyan-soft); color:var(--cyan-dark); font-weight:600; }
.nav-divider{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.nav-user{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); padding:8px 4px; }
.nav-logout{ font-family:var(--font-mono); font-size:12px; color:var(--danger); padding:8px 10px; border-radius:var(--radius); }
.nav-logout:hover{ background:var(--danger-soft); text-decoration:none; }

/* ============ LAYOUT ============ */
.site-main{ max-width: 1120px; margin: 0 auto; padding: 36px 32px 80px; }
.site-footer{
  text-align:center; padding: 24px 32px; font-size:11px;
  color: var(--ink-faint); font-family: var(--font-mono);
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
}

/* ============ FLASH MESSAGES ============ */
.flash-stack{ margin-bottom: 24px; display:flex; flex-direction:column; gap:8px; }
.flash{ padding: 12px 16px; border-radius: var(--radius); font-size: 14px; border-left: 4px solid; }
.flash-error{ background:var(--danger-soft); border-left-color:var(--danger); color:var(--danger); }
.flash-success{ background:var(--done-soft); border-left-color:var(--done); color:var(--done); }

/* ============ BUTTONS / FORMS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 20px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 13px; font-weight:500;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper-raised);
  cursor:pointer; transition: all .15s var(--ease);
  text-decoration:none;
}
.btn:hover{ background:#2a3e54; text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-soft); text-decoration:none; }
.btn-accent{ background:var(--cyan); border-color:var(--cyan); color:#fff; }
.btn-accent:hover{ background:var(--cyan-dark); border-color:var(--cyan-dark); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover{ background:#9b1b1b; }
.btn-sm{ padding:6px 12px; font-size:12px; }

.form-card{
  max-width: 440px; margin: 40px auto; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px;
  box-shadow: var(--shadow-md);
}
.form-card h1{ font-family: var(--font-display); font-size: 24px; margin: 0 0 6px; }
.form-card p.lede{ color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size: 12px; font-weight:600; margin-bottom: 6px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.field input{
  width:100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; background: var(--paper-raised);
  transition: border-color .15s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); }
.form-foot{ margin-top: 20px; font-size: 13px; color: var(--ink-soft); }

/* ============ LANDING PAGE ============ */
.hero{ padding: 56px 0 40px; }
.hero-eyebrow{
  font-family: var(--font-mono); font-size: 12px; color: var(--cyan);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px;
  display:flex; align-items:center; gap:8px;
}
.hero-eyebrow::before{\ content:''; width:24px; height:2px; background:var(--cyan); }
.hero h1{
  font-family: var(--font-display); font-size: 44px; line-height:1.12;
  max-width: 660px; margin: 0 0 12px; font-weight:700;
  color: var(--ink);
}
.hero h1 .highlight{ color: var(--cyan); }
.hero .tagline{
  font-family: var(--font-display); font-size: 20px; font-weight:500;
  color: var(--ink-soft); margin: 0 0 20px; letter-spacing:0.02em;
}
.hero p{ font-size: 16px; color: var(--ink-soft); max-width: 540px; margin: 0 0 28px; }
.hero-actions{ display:flex; gap: 12px; }
.hero-diagram{ margin-top: 48px; border-top: 1px dashed var(--line); padding-top: 28px; }
.hero-diagram-label{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:14px; }

/* ============ COURSE NODE (shared) ============ */
.course-node{
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; position: relative;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.course-node:hover{ border-color:var(--cyan-muted); box-shadow:var(--shadow-sm); }
.course-node.status-done{ border-color: var(--done); background: var(--done-soft); }
.course-node.status-done:hover{ border-color:var(--done); }
.course-node.status-unlocked{ border-color: var(--cyan); }
.course-node.status-unlocked:hover{ box-shadow:0 0 0 2px var(--cyan-soft); }
.course-node.status-locked{ opacity:0.6; }
.course-node.status-locked:hover{ opacity:0.75; }
.course-node.status-in-progress{ border-style: dashed; border-color:var(--trace); }
.course-node.status-placeholder{ opacity:0.65; border-style:dashed; }
.course-node.highlight-chain{
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px var(--cyan-soft), var(--shadow-md);
  z-index: 2;
}
.course-node.highlight-unlocked{
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(38,198,218,0.2);
  background: var(--cyan-soft);
}
.course-code{ font-family:var(--font-mono); font-size:12px; color:var(--cyan-dark); font-weight:600; }
.course-name{ font-family:var(--font-body); font-size:14px; font-weight:600; margin-top:2px; }
.course-meta{ font-size:12px; color:var(--ink-soft); margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-family:var(--font-mono); font-size:11px; padding:2px 7px; border-radius:3px; background:var(--paper); border:1px solid var(--line); display:inline-block; }
.tag-elective{ color:var(--trace); border-color:var(--trace-soft); background:#fff8ec; }
.tag-cyan{ color:var(--cyan-dark); border-color:var(--cyan-soft); background:var(--cyan-soft); }

/* ============ DASHBOARD ============ */
.page-head{ margin-bottom: 28px; }
.page-head h1{ font-family:var(--font-display); font-size:28px; margin:0 0 4px; }
.page-head p{ color:var(--ink-soft); margin:0; font-size:14px; }

/* On-track indicator */
.on-track-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:20px; font-family:var(--font-mono);
  font-size:13px; font-weight:600;
}
.on-track-badge.on-track{ background:var(--done-soft); color:var(--done); border:1px solid var(--done); }
.on-track-badge.at-risk{ background:var(--warning-soft); color:var(--warning); border:1px solid var(--warning); }
.on-track-badge.behind{ background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); }
.on-track-badge .dot{ width:8px; height:8px; border-radius:50%; }
.on-track-badge.on-track .dot{ background:var(--done); }
.on-track-badge.at-risk .dot{ background:var(--warning); }
.on-track-badge.behind .dot{ background:var(--danger); }

/* Stats strip */
.progress-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px;
}
.stat-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.stat-card .stat-label{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint);
}
.stat-card .stat-value{ font-family:var(--font-display); font-size:28px; margin-top:6px; font-weight:700; color:var(--ink); }
.stat-card .stat-value .unit{ font-size:14px; color:var(--ink-soft); font-weight:400; }
.stat-bar{ height:6px; background:var(--paper); border-radius:3px; margin-top:10px; overflow:hidden; }
.stat-bar-fill{ height:100%; background:var(--cyan); border-radius:3px; transition:width .6s var(--ease); }

/* Circular progress */
.progress-ring-container{ display:flex; justify-content:center; margin:8px 0; }
.progress-ring{ position:relative; width:80px; height:80px; }
.progress-ring svg{ transform:rotate(-90deg); width:80px; height:80px; }
.progress-ring .ring-bg{ fill:none; stroke:var(--line); stroke-width:6; }
.progress-ring .ring-fill{ fill:none; stroke:var(--cyan); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease); }
.progress-ring .ring-text{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; font-weight:700;
}

/* Alerts/notifications */
.alerts-section{ margin-bottom:32px; }
.alert-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--radius); margin-bottom:8px;
  border-left:4px solid; font-size:13px;
}
.alert-card.alert-warning{ background:var(--warning-soft); border-left-color:var(--warning); color:var(--warning); }
.alert-card.alert-danger{ background:var(--danger-soft); border-left-color:var(--danger); color:var(--danger); }
.alert-card.alert-info{ background:var(--cyan-soft); border-left-color:var(--cyan); color:var(--cyan-dark); }
.alert-card .alert-icon{ font-size:16px; flex-shrink:0; margin-top:1px; }
.alert-card .alert-text{ flex:1; }
.alert-card .alert-text strong{ display:block; margin-bottom:2px; }

.section-title{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.section-title::after{ content:''; flex:1; height:1px; background:var(--line); }

.node-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:32px; }

.empty-note{
  border:1px dashed var(--line); border-radius:var(--radius); padding:24px;
  color:var(--ink-soft); font-size:14px; text-align:center;
}
.empty-state{
  text-align:center; padding:48px 24px;
  color:var(--ink-soft);
}
.empty-state .empty-icon{ font-size:40px; margin-bottom:12px; opacity:0.4; }
.empty-state h3{ font-family:var(--font-display); font-size:18px; margin:0 0 8px; color:var(--ink-soft); }
.empty-state p{ font-size:14px; max-width:360px; margin:0 auto; }

/* ============ ROADMAP ============ */
.roadmap-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; }
.track-filter{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.track-filter a,
.track-filter button{
  font-family:var(--font-mono); font-size:12px; padding:7px 14px; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--ink-soft); background:var(--paper-raised);
  cursor:pointer; transition:all .15s var(--ease); text-decoration:none;
}
.track-filter a:hover,
.track-filter button:hover{ border-color:var(--cyan); color:var(--cyan); }
.track-filter a.active,
.track-filter button.active{
  border-color:var(--cyan); color:var(--cyan-dark); background:var(--cyan-soft); font-weight:600;
}

/* View toggle */
.view-toggle{
  display:flex; background:var(--paper); border-radius:var(--radius);
  border:1px solid var(--line); overflow:hidden;
}
.view-toggle button{
  font-family:var(--font-mono); font-size:12px; padding:7px 16px;
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:all .15s var(--ease);
}
.view-toggle button.active{ background:var(--cyan); color:#fff; }
.view-toggle button:hover:not(.active){ background:var(--cyan-soft); color:var(--cyan-dark); }

/* Roadmap rail (semester list view) */
.roadmap-rail{ position:relative; padding-left:28px; }
.roadmap-rail::before{
  content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--cyan-muted) 0 6px, transparent 6px 12px);
}
.semester-block{ position:relative; margin-bottom:28px; }
.semester-block::before{
  content:''; position:absolute; left:-28px; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--paper-raised); border:2px solid var(--cyan);
}
.semester-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.semester-head h2{ font-family:var(--font-display); font-size:18px; margin:0; }
.semester-head .semester-credits{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.semester-courses{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.semester-meta{ margin:4px 0 8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* Current semester badge + past/future semester weighting */
.current-semester-badge{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em;
  color:#fff; background:var(--cyan); border-radius:4px; padding:2px 7px; vertical-align:middle;
}
.semester-block[data-semester] .semester-head h2{ scroll-margin-top:64px; }
.semester-block{ scroll-margin-top:64px; }

/* Sticky semester navigation (Roadmap) */
.sem-nav-sticky{
  position:sticky; top:0; z-index:20; display:flex; gap:4px; flex-wrap:wrap;
  background:var(--paper, #fff); padding:8px 0; margin-bottom:14px; border-bottom:1px solid var(--line, #e5e5e5);
}
.sem-nav-link{
  font-family:var(--font-mono); font-size:12px; padding:5px 10px; border-radius:6px;
  border:1px solid var(--line, #e5e5e5); color:var(--ink-soft); background:transparent;
}
.sem-nav-link:hover{ border-color:var(--cyan); color:var(--cyan-dark); text-decoration:none; }
.sem-nav-link.current{ border-color:var(--cyan); background:var(--cyan-soft); color:var(--cyan-dark); font-weight:600; }

/* Planning Options: advanced controls tucked away so roadmap stays primary */
.planning-options{ margin-bottom:20px; }
.planning-options summary{ cursor:pointer; list-style:none; display:inline-flex; }
.planning-options summary::-webkit-details-marker{ display:none; }
.planning-options[open] summary{ margin-bottom:14px; }
.planning-options-panel{
  border:1px solid var(--line, #e5e5e5); border-radius:var(--radius-lg, 10px); padding:16px;
  background:var(--paper-raised, #fafafa);
}

/* Consistent course status pill system (Available/Locked/Completed/Currently Taking) */
.status-pill{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px;
  font-weight:600; letter-spacing:.02em; padding:2px 7px; border-radius:20px; border:1px solid transparent;
}
.status-pill-available{ color:var(--done); background:var(--done-soft); border-color:var(--done); }
.status-pill-locked{ color:var(--danger,#b42318); background:var(--danger-soft,#fdecea); border-color:#e3b6aa; }
.status-pill-taking{ color:var(--trace); background:var(--trace-soft); border-color:var(--trace); }
.status-pill-done{ color:var(--ink-soft); background:var(--locked-soft); border-color:var(--locked); }

/* Dependency arrows (map view) */
.roadmap-map{
  position:relative; overflow-x:auto; padding:20px 0;
}
.map-semester-col{
  display:flex; flex-direction:column; gap:10px;
  min-width:200px; flex:1;
}
.roadmap-map-grid{
  display:flex; gap:16px; position:relative;
}
.dep-arrows-svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.dep-arrow{
  stroke:var(--cyan-muted); stroke-width:1.5; fill:none;
  marker-end:url(#arrowhead);
}
.dep-arrow.dep-done{ stroke:var(--done); stroke-dasharray:4 3; }
.dep-arrow.dep-active{ stroke:var(--cyan); stroke-width:2; }
.dep-arrow.dep-locked{ stroke:var(--locked); stroke-dasharray:3 4; opacity:0.5; }
.dep-arrow.dep-highlight{ stroke:var(--cyan-bright); stroke-width:2.5; filter:drop-shadow(0 0 4px var(--cyan-soft)); }

/* Confirmation dialog */
.modal-overlay{
  position:fixed; inset:0; background:rgba(27,42,61,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease);
}
.modal-overlay.visible{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--paper-raised); border-radius:var(--radius-lg); padding:28px;
  max-width:480px; width:90%; box-shadow:var(--shadow-lg);
}
.modal-card h3{ font-family:var(--font-display); font-size:20px; margin:0 0 12px; }
.modal-card p{ color:var(--ink-soft); font-size:14px; margin:0 0 12px; }
.modal-card .affected-list{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; margin:12px 0; font-size:13px;
}
.modal-card .affected-list .aff-item{ padding:4px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; }
.modal-card .affected-list .aff-item:last-child{ border-bottom:none; }
.modal-card .graduation-impact{
  background:var(--danger-soft); border:1px solid var(--danger); border-radius:var(--radius);
  padding:10px 14px; margin:12px 0; font-size:13px; color:var(--danger); font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.modal-card .modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* Help panel */
.help-panel{
  position:fixed; top:64px; right:0; bottom:0; width:340px;
  background:var(--paper-raised); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg); z-index:150;
  transform:translateX(100%); transition:transform .25s var(--ease);
  overflow-y:auto; padding:28px 24px;
}
.help-panel.open{ transform:translateX(0); }
.help-panel h2{ font-family:var(--font-display); font-size:18px; margin:0 0 16px; }
.help-panel h3{ font-family:var(--font-display); font-size:14px; margin:18px 0 8px; color:var(--cyan-dark); }
.help-panel p{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.6; }
.help-panel .legend-item{ display:flex; align-items:center; gap:10px; margin:6px 0; font-size:13px; }
.help-panel .legend-swatch{ width:20px; height:14px; border-radius:3px; border:1px solid var(--line); flex-shrink:0; }
.help-btn{
  position:fixed; bottom:24px; right:24px; width:44px; height:44px;
  border-radius:50%; background:var(--cyan); color:#fff;
  border:none; cursor:pointer; box-shadow:var(--shadow-md);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  z-index:149; transition:transform .15s var(--ease);
}
.help-btn:hover{ transform:scale(1.08); }

/* Highlight chain tooltip */
.chain-tooltip{
  position:absolute; background:var(--paper-raised); border:1px solid var(--cyan);
  border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-md);
  z-index:50; font-size:13px; max-width:260px;
  pointer-events:none; opacity:0; transition:opacity .15s var(--ease);
}
.chain-tooltip.visible{ opacity:1; pointer-events:auto; }
.chain-tooltip .chain-title{ font-family:var(--font-display); font-size:14px; font-weight:600; margin-bottom:6px; color:var(--cyan-dark); }
.chain-tooltip .chain-item{ padding:2px 0; color:var(--ink-soft); }
.chain-tooltip .chain-item::before{ content:'→ '; color:var(--cyan); }

/* ============ GPA / PROGRESS SECTION ============ */
.gpa-section{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; margin-bottom:28px; box-shadow:var(--shadow-sm);
}
.gpa-section h2{ font-family:var(--font-display); font-size:20px; margin:0 0 16px; }
.gpa-main-value{
  display:flex; align-items:baseline; gap:12px; margin-bottom:16px;
}
.gpa-main-value .gpa-number{
  font-family:var(--font-display); font-size:48px; font-weight:700; color:var(--ink);
}
.gpa-main-value .gpa-out-of{ font-size:18px; color:var(--ink-soft); }
.gpa-flexibility{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:16px; font-family:var(--font-mono); font-size:12px;
}
.gpa-flexibility.flex-ok{ background:var(--done-soft); color:var(--done); border:1px solid var(--done); }
.gpa-flexibility.flex-limited{ background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); }
.gpa-breakdown{
  display:flex; flex-direction:column; gap:12px; margin-top:16px;
}
.gpa-semester-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line); font-size:13px;
}
.gpa-semester-row:last-child{ border-bottom:none; }
.gpa-semester-row .sem-label{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.gpa-semester-row .sem-gpa{ font-family:var(--font-display); font-weight:600; }
.gpa-semester-row .sem-credits{ font-size:11px; color:var(--ink-faint); }

.band-legend{
  display:flex; flex-wrap:wrap; gap:14px; margin:0 0 18px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.band-legend-item{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft);
  font-family:var(--font-mono);
}
.band-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.band-dot.band-excellent,.grade-badge.band-excellent{ background:var(--done-soft); color:var(--done); }
.band-dot.band-excellent{ background:var(--done); }
.band-dot.band-very_good{ background:var(--cyan); }
.band-dot.band-good{ background:var(--accent-bright); }
.band-dot.band-pass{ background:var(--warning); }
.band-dot.band-fail{ background:var(--danger); }

.gpa-semester-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px 12px;
  background:var(--paper);
}
.gpa-semester-card .gpa-semester-row{ border-bottom:none; padding:0 0 8px; }
.sem-course-grades{ display:flex; flex-wrap:wrap; gap:6px; }
.grade-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  padding:3px 7px; border-radius:4px; border:1px solid transparent; cursor:default;
}
.grade-badge-score{ font-weight:700; }
.grade-badge.band-excellent{ background:var(--done-soft); color:var(--done); border-color:var(--done); }
.grade-badge.band-very_good{ background:var(--cyan-soft); color:var(--cyan-dark); border-color:var(--cyan); }
.grade-badge.band-good{ background:#EAF6FF; color:#0D6EFD; border-color:#8FC3FF; }
.grade-badge.band-pass{ background:var(--warning-soft); color:#8A5A00; border-color:var(--warning); }
.grade-badge.band-fail{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }

/* ============ ONBOARDING / COURSE LIST ============ */
.onboarding-form{ display:flex; flex-direction:column; gap:28px; }
.year-group h2{ font-family:var(--font-display); font-size:18px; margin:0 0 12px; }
.checkbox-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.checkbox-card{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised);
  cursor:pointer; font-size:13px; transition:border-color .15s var(--ease);
}
.checkbox-card:hover{ border-color:var(--cyan-muted); }
.checkbox-card input{ margin-top:3px; accent-color:var(--cyan); }
.checkbox-card .cc-code{ font-family:var(--font-mono); font-size:11px; color:var(--cyan-dark); }
.checkbox-card .cc-name{ font-weight:600; }
.sticky-submit{
  position:sticky; bottom:20px; display:flex; justify-content:flex-end;
  background:linear-gradient(to top, var(--paper) 60%, transparent); padding-top:20px;
}

/* Catalog */
.catalog-controls{ display:grid; grid-template-columns:minmax(280px,2fr) repeat(3,minmax(180px,1fr)); gap:10px; margin-bottom:18px; }
.catalog-controls input,
.catalog-controls select{
  width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-raised); font:13px var(--font-body); color:var(--ink);
  transition:border-color .15s var(--ease);
}
.catalog-controls input:focus,
.catalog-controls select:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); outline:none; }
.course-table-wrap{ overflow-x:auto; }
.course-mobile-list{ display:none; }
.course-mobile-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:10px;
}
.course-mobile-card .course-link{ display:block; margin-top:2px; }
.course-mobile-line{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
.course-link{ font-weight:600; border-bottom:1px dashed var(--line); }
.course-link:hover{ border-bottom-color:var(--cyan); text-decoration:none; }
.course-ar{ color:var(--ink-soft); font-size:12px; margin-top:3px; }
.prereq-cell{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }

/* Status tags */
.status-tag{ display:inline-block; font:11px var(--font-mono); padding:3px 7px; border:1px solid var(--line); border-radius:3px; }
.status-passed{ color:var(--done); border-color:var(--done); background:var(--done-soft); }
.status-in_progress{ color:#8b6900; border-color:#d6b35a; background:#fff8df; }
.status-available{ color:var(--cyan-dark); border-color:var(--cyan-muted); background:var(--cyan-soft); }
.status-locked{ color:var(--danger); border-color:#e3b6aa; background:var(--danger-soft); }
.status-elective{ color:var(--trace); border-color:var(--trace-soft); background:#fff8ec; }
.status-critical{ color:#7c2e1f; border-color:#d88973; background:#fbe9e4; }
.lock-details{ margin-top:6px; font-size:11px; color:var(--ink-soft); }
.back-link{ font:12px var(--font-mono); color:var(--ink-soft); }

/* Course detail */
.course-detail-head{ display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-top:18px; }
.detail-code{ font-size:14px; }
.course-detail-head h1{ font-family:var(--font-display); font-size:28px; margin:3px 0; }
.course-detail-head p{ margin:0; color:var(--ink-soft); }
.detail-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.detail-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); }
.detail-card h2{ font-family:var(--font-display); font-size:17px; margin:0 0 12px; }
.detail-card p{ margin:0 0 10px; color:var(--ink-soft); }
.detail-card ul{ margin:0; padding-left:20px; }
.detail-card li{ margin:5px 0; font-family:var(--font-mono); font-size:12px; }
.detail-card a{ color:var(--cyan); border-bottom:1px dashed var(--line); }
.detail-card a:hover{ border-bottom-color:var(--cyan); text-decoration:none; }
.detail-warning{ margin-top:14px; padding:10px; border:1px solid #e3b6aa; background:#fff2ee; color:var(--danger); font-size:12px; }
.detail-stat{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.detail-stat:last-child{ border-bottom:0; }

/* Unlocks chain in detail */
.unlock-chain{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.unlock-chain .chain-node{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:var(--radius); font-size:13px;
  border:1px solid var(--line); background:var(--paper-raised);
}
.unlock-chain .chain-node .chain-arrow{ color:var(--cyan); font-family:var(--font-mono); font-size:14px; }
.unlock-chain .chain-node .chain-code{ font-family:var(--font-mono); font-size:12px; color:var(--cyan-dark); font-weight:600; }
.unlock-chain .chain-node .chain-name{ font-size:12px; color:var(--ink-soft); }

/* Course table */
.course-table th{
  text-align:left; font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-faint); padding:10px; border-bottom:2px solid var(--line);
}
.course-table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.course-table tr.row-done{ background:var(--done-soft); }
.course-table tr.row-locked{ opacity:0.6; }
.course-table tr:hover{ background:var(--cyan-soft); }
.course-table tr.row-done:hover{ background:var(--done-soft); }
.toggle-btn{
  font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--paper-raised); cursor:pointer;
  transition:all .15s var(--ease);
}
.toggle-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.course-table tr.row-done .toggle-btn{ border-color:var(--done); color:var(--done); }

/* ============ PRINT MAP ============ */
.print-actions{ margin:16px 0; display:flex; gap:10px; }
.print-actions button{
  font-family:inherit; font-size:13px; padding:8px 16px;
  border:1px solid var(--ink); background:var(--paper-raised); cursor:pointer;
  border-radius:var(--radius);
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .progress-strip{ grid-template-columns:repeat(2,1fr); }
  .roadmap-map-grid{ flex-direction:column; }
  .gpa-breakdown{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .catalog-controls{ grid-template-columns:1fr; }
  .course-table-wrap{ display:none; }
  .course-mobile-list{ display:block; }
  .course-detail-head{ flex-direction:column; align-items:flex-start; }
  .detail-grid{ grid-template-columns:1fr; }
  .site-header{ padding:0 16px; height:auto; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 16px; position:relative; }
  .site-nav{ flex-wrap:wrap; gap:4px; }
  .site-nav a{ padding:6px 8px; font-size:12px; }
  .progress-strip{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:30px; }
  .hero .tagline{ font-size:16px; }
  .site-main{ padding:24px 16px 60px; }
  .help-panel{ width:100%; }
  .roadmap-rail{ padding-left:20px; }
  .semester-courses{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .progress-strip{ grid-template-columns:1fr; }
  .hero h1{ font-size:26px; }
  .hero-actions{ flex-direction:column; }
  .brand-sub{ display:none; }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ============ PRINT STYLES ============ */
@media print{
  .site-header, .site-footer, .help-btn, .help-panel,
  .print-actions, .modal-overlay, .board-bg{ display:none!important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .site-main{ max-width:100%; padding:0; }
  .course-node{ break-inside:avoid; border:1px solid #999; }
  .stat-card{ break-inside:avoid; }
  a{ color:#000; text-decoration:none; }
  .on-track-badge{ border:1px solid #999; }
}

/* ============ Department branding / final UX refinements ============ */
.brand-department-logo{
  width:42px; height:42px; object-fit:contain; border-radius:4px; background:#fff;
}
.hero-brand{display:flex; align-items:center; gap:18px; margin-bottom:22px;}
.hero-brand > img{width:92px; height:92px; object-fit:contain; border-radius:8px; background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.hero-department-note{font-size:13px; color:var(--ink-soft); margin-top:-10px;}
.hero-tip{margin-top:16px; padding:12px 14px; border-left:3px solid var(--cyan); background:var(--cyan-soft); color:var(--cyan-dark); border-radius:0 var(--radius) var(--radius) 0; font-size:13px;}
.hero-credit{margin-top:34px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}

/* Dependency map — explicit styles matching roadmap.html classes */
.map-tip{
  position:relative; z-index:5; margin:0 0 14px; padding:10px 14px;
  background:var(--cyan-soft); border:1px solid #b2ebf2; border-radius:var(--radius);
  color:var(--cyan-dark); font-size:13px;
}
.map-tip strong{font-family:var(--font-display); margin-right:5px;}
.map-canvas{position:relative; min-width:max(100%, calc(var(--map-columns) * 230px)); padding:4px 0 24px;}
.map-grid{
  display:grid; grid-template-columns:repeat(var(--map-columns), minmax(210px, 1fr));
  gap:18px; position:relative; z-index:2; min-width:calc(var(--map-columns) * 210px);
}
.map-column{display:flex; flex-direction:column; gap:10px; min-width:210px;}
.map-column-head{
  position:relative; z-index:4; padding:8px 10px; text-align:center;
  background:var(--ink); color:#fff; border-radius:var(--radius); font-family:var(--font-display);
  font-size:13px; font-weight:600; box-shadow:var(--shadow-sm);
}
.map-node{
  position:relative; z-index:3; background:var(--paper-raised); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:11px 10px; min-height:68px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.map-node:hover{transform:translateY(-1px); border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan-soft);}
.map-node.status-unlocked{border-color:var(--cyan); background:#fbfeff;}
.map-node.status-done{border-color:var(--done); background:var(--done-soft);}
.map-node.status-in-progress{border-style:dashed; border-color:var(--trace);}
.map-node.status-locked{border-color:var(--locked); background:var(--locked-soft); opacity:.72;}
.map-node.status-placeholder{border-style:dashed; opacity:.72;}
.map-node-code{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--cyan-dark);}
.map-node-name{font-family:var(--font-display); font-size:13px; font-weight:600; line-height:1.25; margin-top:4px; color:var(--ink);}
.map-node-meta{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); margin-top:6px;}
.dep-svg{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible;}
.map-node.chain-source{border-color:var(--cyan-bright); box-shadow:0 0 0 3px var(--cyan-soft), 0 4px 12px rgba(0,151,167,.18);}
.map-node.chain-downstream{border-color:var(--cyan-bright); background:var(--cyan-soft); box-shadow:0 0 0 2px rgba(0,188,212,.18);}
.map-node.chain-upstream{border-color:var(--done); background:var(--done-soft);}

.chain-tooltip.visible{opacity:1;}
.chain-tooltip{max-width:320px; line-height:1.5;}

/* Small section icons */
.section-icon{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:24px; height:24px; border-radius:6px; margin-right:8px;
  background:var(--cyan-soft); color:var(--cyan-dark); border:1px solid #b2ebf2;
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0;
}
.stat-card .stat-label{display:flex; align-items:center; gap:1px;}
.section-heading{display:flex; align-items:center; margin:0 0 12px; font-family:var(--font-display); font-size:20px;}
.section-heading .section-icon{width:28px;height:28px;}
.section-title .section-icon{width:22px;height:22px;margin-right:0;font-size:10px;}
.icon-alert{background:var(--warning-soft); color:var(--warning); border-color:#ffe0a3;}
.icon-grad{background:var(--done-soft); color:var(--done); border-color:#b7dfc8;}
.icon-next{background:var(--cyan-soft); color:var(--cyan-dark);}
.icon-remaining{background:#eef2f6; color:var(--ink-soft); border-color:var(--line);}
.icon-profile{background:var(--cyan-soft); color:var(--cyan-dark);}
.year-group h2{display:flex; align-items:center; gap:8px;}
.year-group h2 .section-icon{width:24px;height:24px;font-size:12px;flex-shrink:0;}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--cyan-soft); color:var(--cyan-dark);
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  margin-right:8px;
}
.planner-steps .sem-nav-link{ display:inline-flex; align-items:center; }
.step-num-heading{ width:24px; height:24px; font-size:12px; }

.plan-mode-picker{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.plan-mode-btn{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper-raised); color:var(--ink); text-decoration:none;
}
.plan-mode-btn:hover{ border-color:var(--cyan); text-decoration:none; }
.plan-mode-btn strong{ font-family:var(--font-display); font-size:14px; }
.plan-mode-btn small{ color:var(--ink-soft); font-size:12px; font-weight:400; }
.plan-mode-btn.active{ border-color:var(--cyan); background:var(--cyan-soft); box-shadow:var(--shadow-sm); }
.plan-mode-icon{
  width:34px; height:34px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:var(--cyan-soft); color:var(--cyan-dark);
}
.plan-mode-btn.active .plan-mode-icon{ background:var(--cyan); color:#fff; }
@media (max-width:640px){ .plan-mode-picker{ grid-template-columns:1fr; } }

.dash-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.dash-card .section-title{ margin-top:0; }
.dash-card .node-grid{ margin-bottom:0; }
.dash-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.dash-grid-2 .dash-card{ margin-bottom:0; }
@media (max-width:800px){ .dash-grid-2{ grid-template-columns:1fr; } }

.whatif-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); margin-bottom:0;
}
.whatif-card select, .whatif-card input{
  border:1px solid var(--line-strong,#d8e0e6); border-radius:8px; padding:7px 9px;
  background:var(--paper); color:var(--ink); font-size:13px;
}
.whatif-card label{ font-size:12px; color:var(--ink-soft); font-weight:600; }

.profile-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.profile-head-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--cyan-soft); color:var(--cyan-dark); font-size:16px;
}
.profile-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.profile-card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; background:var(--paper);
}
.profile-card label{ font-weight:600; font-size:13px; }
.profile-card-icon{
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:var(--cyan-soft); color:var(--cyan-dark);
}
@media (max-width:640px){ .profile-card-grid{ grid-template-columns:1fr; } }
.icon-plan{background:var(--cyan-soft); color:var(--cyan-dark);}

@media (max-width:700px){
  .hero-brand{align-items:flex-start;}
  .hero-brand > img{width:72px;height:72px;}
  .map-grid{grid-template-columns:repeat(var(--map-columns), minmax(185px,1fr)); min-width:calc(var(--map-columns) * 185px);}
  .map-column{min-width:185px;}
}

/* Quick semester outcome controls */
.semester-outcome-hint{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.finish-gpa-field{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);}
.finish-gpa-field label{font-weight:700;}
.finish-gpa-field input{width:78px;padding:7px 8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);}
.finish-gpa-field input:focus{outline:2px solid var(--cyan-soft);border-color:var(--cyan);}

.course-outcome{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px solid var(--line-soft,#e6ebef);}
.outcome-label{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px;}
.outcome-btn{border:1px solid var(--line,#d8e0e6);background:#fff;color:var(--ink);border-radius:7px;padding:4px 8px;font-size:10px;font-weight:600;cursor:pointer;transition:.15s ease;}
.outcome-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.outcome-btn:disabled{opacity:.55;cursor:wait;transform:none;}
.outcome-passed:hover,.outcome-passed:focus-visible{border-color:var(--done);background:var(--done-soft);color:var(--done);}
.outcome-not-passed.selected{background:var(--surface-2,#f3f6f8);border-color:var(--ink-soft);}
.outcome-not-passed:hover,.outcome-not-passed:focus-visible{border-color:var(--locked);background:var(--locked-soft);}
@media (max-width:600px){.semester-outcome-hint{max-width:240px}.course-outcome{gap:5px}.outcome-btn{padding:5px 7px}}

/* Semester completion workflow */
.semester-finish-bar{
  margin-top:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; background:var(--cyan-soft); border:1px solid #b2ebf2; border-radius:var(--radius);
}
.semester-finish-bar strong{font-family:var(--font-display); color:var(--cyan-dark);}
.semester-finish-note{display:block; margin-top:3px; font-size:11px; color:var(--ink-soft);}
.outcome-btn.selected{font-weight:700; box-shadow:0 0 0 2px var(--cyan-soft);}
.grade-input{width:64px;padding:5px 7px;border:1px solid var(--line-strong,#d8e0e6);border-radius:7px;background:#fff;color:var(--ink);font-size:12px;}
.grade-input:focus{outline:2px solid var(--cyan-soft);border-color:var(--cyan);}
.grade-outcome-pill{font-size:10px;font-weight:700;padding:4px 8px;border-radius:7px;background:var(--paper);color:var(--ink-soft);border:1px solid var(--line,#d8e0e6);}
.grade-outcome-pill.grade-pass{background:var(--done-soft);color:var(--done);border-color:#b7dfc8;}
.grade-outcome-pill.grade-fail{background:var(--danger-soft);color:var(--danger);border-color:#e3b6aa;}
.computed-gpa-value{font-family:var(--font-mono);font-weight:700;color:var(--ink);}
.outcome-passed.selected{background:var(--done-soft); border-color:var(--done); color:var(--done);}
.outcome-not-passed.selected{background:var(--locked-soft); border-color:var(--locked); color:var(--ink);}
.finish-summary{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px;
  font-size:13px; line-height:1.7; margin:12px 0;
}
.finish-warning{background:var(--cyan-soft); border-left:3px solid var(--cyan); padding:10px 12px; border-radius:0 var(--radius) var(--radius) 0;}
.map-column-head{position:relative !important; top:auto !important;}
@media (max-width:600px){
  .semester-finish-bar{align-items:stretch;}
  .semester-finish-bar .btn{width:100%;}
}

/* Semester GPA gate: Passed stays locked until GPA is entered. */
.outcome-btn:disabled,
.outcome-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:grayscale(.2);}
.outcome-btn:disabled:hover{border-color:var(--line-strong);background:#f7f8fa;color:var(--ink-soft);}
.gpa-reminder{display:block;font-size:10px;color:var(--ink-soft);line-height:1.3;margin-top:2px;}


/* ============================================================
   ECRoadmap — Aura Gradient / Abyssal Floor UI refresh
   Visual system inspired by the supplied Figma Make redesign.
   Existing Flask routes, forms and roadmap logic remain unchanged.
   ============================================================ */
:root{
  --background:#100e0b;
  --surface:rgba(28,25,21,.88);
  --surface-elevated:#252119;
  --surface-hover:#2e2a22;
  --text-primary:#ede8df;
  --text-secondary:#a89e8e;
  --text-muted:#6b6258;
  --border:rgba(255,255,255,.08);
  --border-solid:#2e2a22;
  --accent:#00c4d8;
  --accent-hover:#00d8ef;
  --accent-dim:rgba(0,196,216,.12);
  --accent-text:#100e0b;
  --success:#34d399;
  --success-dim:rgba(52,211,153,.10);
  --warning:#fbbf24;
  --warning-dim:rgba(251,191,36,.10);
  --error:#f87171;
  --error-dim:rgba(248,113,113,.10);
  --info:#60a5fa;
  --info-dim:rgba(96,165,250,.10);
  --aura-blend:screen;
  --aura-opacity-1:1;
  --aura-opacity-2:1;
  --grain-opacity:.85;
  --paper:var(--background);
  --paper-raised:var(--surface-elevated);
  --paper-card:var(--surface);
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --ink-faint:var(--text-muted);
  --line:var(--border);
  --line-strong:var(--border-solid);
  --cyan:var(--accent);
  --cyan-bright:var(--accent-hover);
  --cyan-soft:var(--accent-dim);
  --cyan-muted:#3a9ba8;
  --cyan-dark:var(--accent);
  --done:var(--success);
  --done-soft:var(--success-dim);
  --done-bright:var(--success);
  --trace:var(--warning);
  --trace-soft:var(--warning-dim);
  --locked:#7d756b;
  --locked-soft:rgba(255,255,255,.035);
  --danger:var(--error);
  --danger-soft:var(--error-dim);
  --warning-soft:var(--warning-dim);
  --font-display:'Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',monospace;
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 2px 12px rgba(0,0,0,.18);
  --shadow-md:0 12px 32px rgba(0,0,0,.24);
  --shadow-lg:0 24px 64px rgba(0,0,0,.42);
  --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="light"]{
  --background:#f6f7f8;
  --surface:rgba(255,255,255,.90);
  --surface-elevated:#fff;
  --surface-hover:#f0f3f4;
  --text-primary:#172024;
  --text-secondary:#59666b;
  --text-muted:#8a9a9f;
  --border:#d9e1e3;
  --border-solid:#d0dadd;
  --accent:#00afc2;
  --accent-hover:#008fa3;
  --accent-dim:rgba(0,175,194,.08);
  --accent-text:#fff;
  --success:#16a34a;
  --success-dim:rgba(22,163,74,.07);
  --warning:#d97706;
  --warning-dim:rgba(217,119,6,.07);
  --error:#dc2626;
  --error-dim:rgba(220,38,38,.07);
  --info:#2563eb;
  --info-dim:rgba(37,99,235,.07);
  --aura-blend:multiply;
  --aura-opacity-1:.25;
  --aura-opacity-2:.15;
  --grain-opacity:.30;
  --paper:var(--background);
  --paper-raised:var(--surface-elevated);
  --paper-card:var(--surface);
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --ink-faint:var(--text-muted);
  --line:var(--border);
  --line-strong:var(--border-solid);
  --cyan:var(--accent);
  --cyan-bright:var(--accent-hover);
  --cyan-soft:var(--accent-dim);
  --cyan-muted:#55aeb8;
  --cyan-dark:var(--accent-hover);
  --done:var(--success);
  --done-soft:var(--success-dim);
  --done-bright:var(--success);
  --trace:var(--warning);
  --trace-soft:var(--warning-dim);
  --locked:#9aa8ad;
  --locked-soft:#f0f3f4;
  --danger:var(--error);
  --danger-soft:var(--error-dim);
  --warning-soft:var(--warning-dim);
}

html{background:var(--background);}
body{margin:0;background:var(--background);color:var(--text-primary);font-family:var(--font-body);transition:background-color .2s ease,color .2s ease;}
body, .site-header, .site-footer, .course-node, .stat-card, .form-card, .modal-card, .empty-note, .track-filter a, .track-filter button, input, select, textarea, .year-group, .checkbox-card{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}

/* Aura background — transparent parent; body owns the base color. */
.aura-bg{position:fixed;inset:0;overflow:hidden;min-height:100vh;z-index:-1;pointer-events:none;background:transparent;}
.aura-layer-1,.aura-layer-2,.aura-grain{position:absolute;inset:0;pointer-events:none;}
.aura-layer-1{background:radial-gradient(ellipse 120% 70% at 50% 110%,rgba(0,90,110,.8) 0%,rgba(0,45,60,.5) 40%,rgba(0,0,0,0) 75%);mix-blend-mode:var(--aura-blend);filter:blur(180px);opacity:var(--aura-opacity-1);transform:translateZ(0);will-change:transform;}
.aura-layer-2{background:linear-gradient(to top,rgba(0,130,150,.25) 0%,rgba(0,0,0,0) 35%);mix-blend-mode:var(--aura-blend);filter:blur(72px);opacity:var(--aura-opacity-2);transform:translateZ(0);will-change:transform;}
.aura-grain{mix-blend-mode:overlay;opacity:var(--grain-opacity);}
.aura-grain svg{width:100%;height:100%;display:block;}
.board-bg{display:none;}

/* Header */
.site-header{height:64px;padding:0 28px;background:color-mix(in srgb,var(--background) 76%,transparent);border-bottom:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.brand{gap:10px;color:var(--text-primary);}
.brand-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,196,216,.18);flex:0 0 auto;}
.brand-text{font-size:16px;font-weight:650;letter-spacing:-.02em;}
.brand-text span{color:var(--accent);}
.brand-sub{font-family:var(--font-body);font-size:11px;color:var(--text-muted);margin-left:2px;}
.site-nav{gap:4px;font-size:12px;overflow-x:auto;scrollbar-width:none;}
.site-nav::-webkit-scrollbar{display:none;}
.site-nav a{color:var(--text-secondary);padding:8px 10px;border-radius:9px;}
.site-nav a:hover{background:var(--surface-hover);color:var(--text-primary);}
.site-nav a.active{background:var(--accent-dim);color:var(--accent);}
.nav-divider{background:var(--border);}
.nav-user{font-family:var(--font-body);color:var(--text-secondary);font-size:12px;}
.nav-logout{color:var(--error)!important;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--surface-hover);color:var(--text-secondary);border-radius:10px;padding:7px 9px;font:500 11px var(--font-body);cursor:pointer;transition:.18s ease;}
.theme-toggle:hover{color:var(--text-primary);border-color:rgba(0,196,216,.3);background:var(--accent-dim);}
.theme-icon-light{display:none;}
[data-theme="light"] .theme-icon-dark{display:none;}
[data-theme="light"] .theme-icon-light{display:inline;}
.guest-theme-toggle{margin-left:auto;}

/* Layout */
.site-main{max-width:1200px;padding:44px 28px 84px;}
.site-footer{background:transparent;border-top:1px solid var(--border);color:var(--text-muted);}
.page-head{margin-bottom:26px;}
.page-head h1{font-size:30px;line-height:1.15;letter-spacing:-.035em;color:var(--text-primary);}
.page-head p{color:var(--text-secondary);font-size:14px;max-width:760px;}

/* Buttons */
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-elevated);color:var(--text-primary);font:600 12px var(--font-body);box-shadow:none;}
.btn:hover{background:var(--surface-hover);color:var(--text-primary);border-color:rgba(0,196,216,.3);}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-text);}
.btn-outline{background:transparent;color:var(--text-secondary);border-color:var(--border-solid);}
.btn-outline:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(0,196,216,.35);}
.btn-danger{background:var(--error);border-color:var(--error);color:#fff;}

/* Forms / onboarding cards */
.form-card{max-width:460px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--shadow-md);backdrop-filter:blur(12px);}
.form-card h1{font-size:25px;letter-spacing:-.03em;color:var(--text-primary);}
.form-card p.lede{color:var(--text-secondary);}
.field label{font-family:var(--font-body);font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-primary);font-weight:600;}
.field input,.field select,.field textarea,input[type=number],input[type=text],input[type=password],select,textarea{background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-solid);border-radius:11px;}
.field input::placeholder,input::placeholder,textarea::placeholder{color:var(--text-muted);}
.field input:focus,.field select:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}

/* Landing */
.hero{padding:56px 0 40px;max-width:900px;margin:auto;}
.hero-brand > img{width:56px;height:56px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hero-eyebrow{color:var(--accent);font-family:var(--font-mono);}
.hero h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.055em;color:var(--text-primary);}
.hero h1 .highlight{color:var(--accent);}
.hero .tagline{color:var(--text-secondary);}
.hero p{color:var(--text-secondary);}
.hero-diagram{border-top:1px solid var(--border);}
.hero-tip{background:var(--accent-dim);border-left-color:var(--accent);color:var(--text-secondary);}

/* Shared course surfaces */
.course-node{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 16px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.course-node:hover{border-color:rgba(0,196,216,.35);box-shadow:0 0 0 2px var(--accent-dim),0 8px 20px rgba(0,0,0,.10);}
.course-node.status-unlocked{border-color:rgba(0,196,216,.35);}
.course-node.status-done{background:var(--done-soft);border-color:rgba(52,211,153,.4);}
.course-node.status-locked{background:var(--locked-soft);}
.course-code{color:var(--accent);font-size:11px;letter-spacing:.02em;}
.course-name{color:var(--text-primary);font-size:14px;line-height:1.35;}
.course-meta{color:var(--text-secondary);}
.tag{background:var(--surface-hover);border-color:var(--border);color:var(--text-secondary);border-radius:999px;font-size:10px;padding:3px 8px;}
.tag-elective{background:var(--warning-dim);border-color:rgba(251,191,36,.25);color:var(--warning);}

/* Dashboard */
.progress-strip{gap:12px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm);}
.stat-card .stat-label{font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:11px;}
.stat-card .stat-value{color:var(--text-primary);font-size:28px;}
.stat-card .stat-value .unit{color:var(--text-secondary);}
.stat-bar{background:var(--surface-hover);}
.stat-bar-fill{background:var(--accent);}
.section-title{color:var(--text-muted);font-family:var(--font-body);font-size:11px;}
.section-title::after{background:var(--border);}
.section-icon{background:var(--accent-dim);color:var(--accent);border-color:rgba(0,196,216,.18);}
.empty-note{background:var(--surface);border:1px dashed var(--border-solid);color:var(--text-secondary);border-radius:12px;}
.empty-state{color:var(--text-secondary);}
.empty-state h3{color:var(--text-primary);}

/* Roadmap controls */
.track-filter{gap:7px;}
.track-filter a,.track-filter button{background:var(--surface);border-color:var(--border);color:var(--text-secondary);border-radius:10px;}
.track-filter a:hover,.track-filter button:hover{background:var(--surface-hover);border-color:rgba(0,196,216,.35);color:var(--accent);}
.track-filter a.active,.track-filter button.active{background:var(--accent-dim);border-color:rgba(0,196,216,.35);color:var(--accent);}
.view-toggle{background:var(--surface-hover);border-color:var(--border);border-radius:11px;}
.view-toggle button{font-family:var(--font-body);border-radius:9px;color:var(--text-secondary);}
.view-toggle button.active{background:var(--surface-elevated);color:var(--text-primary);box-shadow:0 1px 5px rgba(0,0,0,.18);}

/* Roadmap timeline */
.roadmap-rail{padding-left:34px;}
.roadmap-rail::before{left:10px;width:1px;background:var(--border-solid);}
.semester-block{margin-bottom:34px;}
.semester-block::before{left:-30px;top:6px;width:12px;height:12px;background:var(--background);border:3px solid var(--accent);box-shadow:0 0 0 4px var(--accent-dim);}
.semester-head{align-items:center;margin-bottom:12px;}
.semester-head h2{font-size:18px;color:var(--text-primary);letter-spacing:-.02em;}
.semester-head .semester-credits{color:var(--text-secondary);}
.semester-courses{gap:12px;}
.semester-meta{gap:6px;}
.semester-outcome-hint{color:var(--text-muted)!important;}

/* Modals */
.modal-overlay{background:rgba(4,6,7,.72);backdrop-filter:blur(7px);}
.modal-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);color:var(--text-primary);}
.modal-card h3{color:var(--text-primary);}
.modal-card p{color:var(--text-secondary);}
.modal-card .affected-list{background:var(--surface-hover);border-color:var(--border);}

/* Onboarding / checklist */
.onboarding-form{max-width:1000px;margin:0 auto;}
.year-group{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.year-group h2{font-size:18px;letter-spacing:-.02em;color:var(--text-primary);}
.checkbox-grid{gap:10px;}
.checkbox-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:12px;padding:13px;color:var(--text-primary);}
.checkbox-card:hover{border-color:rgba(0,196,216,.35);background:var(--surface-hover);}
.checkbox-card:has(input:checked){border-color:rgba(0,196,216,.45);background:var(--accent-dim);}
.cc-code{font-family:var(--font-mono);color:var(--accent);font-size:11px;}
.cc-name{color:var(--text-primary);}
.state-radios{color:var(--text-secondary);}
.sticky-submit{background:color-mix(in srgb,var(--background) 82%,transparent);border:1px solid var(--border);backdrop-filter:blur(14px);}

/* Tables / course catalog */
.course-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:auto;box-shadow:var(--shadow-sm);}
.course-table{background:transparent;color:var(--text-primary); width:100%; min-width:760px;}
.course-table th{background:var(--surface-hover);color:var(--text-muted);border-color:var(--border);}
.course-table td{border-color:var(--border);}
.course-table tr:hover td{background:var(--accent-dim);}
.course-mobile-card{background:var(--surface);border-color:var(--border);}
.catalog-controls{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;}

/* Help */
.help-btn{background:var(--surface-elevated)!important;border:1px solid var(--border)!important;color:var(--accent)!important;box-shadow:var(--shadow-sm)!important;}
.help-panel{background:var(--surface-elevated)!important;border-color:var(--border)!important;color:var(--text-secondary)!important;box-shadow:var(--shadow-lg)!important;}
.help-panel h2,.help-panel h3{color:var(--text-primary)!important;}

/* Flash messages and global notices */
.flash{border-radius:12px;backdrop-filter:blur(10px);}
.flash-error{background:var(--error-dim);border-left-color:var(--error);color:var(--error);}
.flash-success{background:var(--success-dim);border-left-color:var(--success);color:var(--success);}

/* Keep important inline light-theme remnants readable */
[style*="background:#fff"],[style*="background: #fff"],[style*="background:#ffffff"],[style*="background: #ffffff"]{background:var(--surface)!important;color:var(--text-primary)!important;}
[style*="color:#1"],[style*="color: #1"]{color:var(--text-primary)!important;}

/* Mobile */
@media (max-width:900px){
  .site-header{padding:0 16px;gap:12px;}
  .brand-sub{display:none;}
  .site-nav{max-width:62vw;}
  .site-main{padding:34px 18px 70px;}
  .progress-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:650px){
  .site-header{height:auto;min-height:62px;flex-wrap:wrap;padding:10px 14px;}
  .site-nav{order:3;width:100%;max-width:none;padding-bottom:2px;}
  .site-nav a{padding:7px 9px;font-size:11px;}
  .theme-label{display:none;}
  .site-main{padding:28px 14px 60px;}
  .page-head h1{font-size:25px;}
  .hero{padding:34px 0 24px;}
  .hero h1{font-size:38px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{justify-content:center;}
  .progress-strip{grid-template-columns:1fr;}
  .semester-courses{grid-template-columns:1fr;}
  .roadmap-rail{padding-left:25px;}
  .roadmap-rail::before{left:7px;}
  .semester-block::before{left:-24px;}
  .form-card{padding:24px 18px;margin:24px auto;}
  .year-group{padding:18px;}
  .checkbox-grid{grid-template-columns:1fr!important;}
  .track-filter{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;}
  .track-filter a,.track-filter button{white-space:nowrap;}
}

@media (max-width:650px){
  .aura-layer-1{filter:blur(125px);}
  .aura-layer-2{filter:blur(50px);}
}

@media print{
  .aura-bg,.theme-toggle,.site-nav,.site-header{display:none!important;}
  body{background:#fff!important;color:#111!important;}
}


/* ============================================================
   ECRoadmap — Abyssal Dark UI polish
   Final visual corrections for the dark theme.
   Keeps the existing Flask/roadmap behavior unchanged.
   ============================================================ */

/* The supplied grain is intentionally subtle in the actual UI.
   A full-strength noise layer makes the page look like static. */
[data-theme="dark"]{
  --background:#100e0b;
  --surface:rgba(25,23,20,.94);
  --surface-elevated:#1c1a17;
  --surface-hover:#25221d;
  --surface-soft:#171613;

  --text-primary:#f2efe8;
  --text-secondary:#b9b2a7;
  --text-muted:#81796e;

  --border:rgba(255,255,255,.095);
  --border-solid:#37332c;

  --accent:#12c7d9;
  --accent-hover:#35dceb;
  --accent-dim:rgba(18,199,217,.11);
  --accent-text:#071113;

  --success:#4ade80;
  --success-dim:rgba(74,222,128,.10);
  --warning:#f6c453;
  --warning-dim:rgba(246,196,83,.10);
  --error:#fb7185;
  --error-dim:rgba(251,113,133,.10);

  --paper:var(--background);
  --paper-raised:var(--surface-elevated);
  --paper-card:var(--surface);
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --ink-faint:var(--text-muted);
  --line:var(--border);
  --line-strong:var(--border-solid);
  --cyan:var(--accent);
  --cyan-bright:var(--accent-hover);
  --cyan-soft:var(--accent-dim);
  --cyan-muted:#347f87;
  --cyan-dark:var(--accent);
  --done:var(--success);
  --done-soft:var(--success-dim);
  --done-bright:var(--success);
  --trace:var(--warning);
  --trace-soft:var(--warning-dim);
  --locked:#81796e;
  --locked-soft:rgba(255,255,255,.035);
  --danger:var(--error);
  --danger-soft:var(--error-dim);
  --warning-soft:var(--warning-dim);

  --aura-opacity-1:.82;
  --aura-opacity-2:.65;
  --grain-opacity:.12;
}

/* Base / atmosphere */
[data-theme="dark"] body{
  background:var(--background);
  color:var(--text-primary);
}
[data-theme="dark"] .aura-layer-1{opacity:var(--aura-opacity-1);}
[data-theme="dark"] .aura-layer-2{opacity:var(--aura-opacity-2);}
[data-theme="dark"] .aura-grain{opacity:var(--grain-opacity);}

/* Header: translucent, not beige */
[data-theme="dark"] .site-header{
  background:rgba(16,14,11,.76);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}

/* Main roadmap surfaces */
[data-theme="dark"] .map-tip{
  background:rgba(18,199,217,.075);
  border:1px solid rgba(18,199,217,.42);
  color:#c9f7fb;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,.14);
}
[data-theme="dark"] .map-tip strong{color:var(--accent);}

[data-theme="dark"] .map-column-head{
  background:linear-gradient(180deg,#211f1b,#191815);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  letter-spacing:.01em;
}

[data-theme="dark"] .map-node{
  background:rgba(28,26,23,.96);
  border:1px solid #34312b;
  color:var(--text-primary);
  border-radius:12px;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
}
[data-theme="dark"] .map-node:hover{
  background:#211f1b;
  border-color:rgba(18,199,217,.58);
  box-shadow:0 0 0 2px rgba(18,199,217,.10),0 10px 25px rgba(0,0,0,.28);
}
[data-theme="dark"] .map-node.status-unlocked{
  background:rgba(28,26,23,.96);
  border-color:rgba(18,199,217,.38);
}
[data-theme="dark"] .map-node.status-done{
  background:rgba(74,222,128,.075);
  border-color:rgba(74,222,128,.42);
}
[data-theme="dark"] .map-node.status-locked{
  background:rgba(255,255,255,.025);
  border-color:#39352e;
  opacity:.62;
}
[data-theme="dark"] .map-node.status-in-progress{
  background:rgba(246,196,83,.055);
  border-color:rgba(246,196,83,.55);
}
[data-theme="dark"] .map-node-code{color:var(--accent);}
[data-theme="dark"] .map-node-name{color:var(--text-primary);}
[data-theme="dark"] .map-node-meta{color:var(--text-muted);}

/* Dependency lines should support the cards, not dominate them. */
[data-theme="dark"] .dep-svg{opacity:.48;}
[data-theme="dark"] .dep-arrow{
  stroke:rgba(18,199,217,.72);
  stroke-width:1.25;
}
[data-theme="dark"] .dep-arrow.dep-done{
  stroke:rgba(74,222,128,.55);
}
[data-theme="dark"] .dep-arrow.dep-active{
  stroke:rgba(18,199,217,.82);
  stroke-width:1.7;
}
[data-theme="dark"] .dep-arrow.dep-locked{
  stroke:rgba(129,121,110,.55);
  opacity:.55;
}
[data-theme="dark"] .dep-arrow.dep-highlight{
  stroke:var(--accent-hover);
  stroke-width:2;
  filter:drop-shadow(0 0 3px rgba(18,199,217,.38));
}

/* Map chain states */
[data-theme="dark"] .map-node.chain-source{
  border-color:var(--accent-hover);
  box-shadow:0 0 0 2px rgba(18,199,217,.16),0 10px 26px rgba(0,0,0,.28);
}
[data-theme="dark"] .map-node.chain-downstream{
  background:rgba(18,199,217,.10);
  border-color:rgba(53,220,235,.68);
}
[data-theme="dark"] .map-node.chain-upstream{
  background:rgba(74,222,128,.075);
  border-color:rgba(74,222,128,.52);
}

/* Semester-list course cards */
[data-theme="dark"] .semester-block{
  margin-bottom:38px;
}
[data-theme="dark"] .semester-head h2{
  color:var(--text-primary);
}
[data-theme="dark"] .semester-head .semester-credits{
  color:var(--text-secondary);
}
[data-theme="dark"] .semester-block::before{
  background:#14120f;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(18,199,217,.09),0 0 15px rgba(18,199,217,.16);
}
[data-theme="dark"] .roadmap-rail::before{
  background:linear-gradient(to bottom,rgba(18,199,217,.28),rgba(255,255,255,.07));
}

[data-theme="dark"] .course-node{
  background:rgba(28,26,23,.96);
  border-color:#36322c;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
[data-theme="dark"] .course-node:hover{
  background:#211f1b;
  border-color:rgba(18,199,217,.48);
  box-shadow:0 0 0 2px rgba(18,199,217,.08),0 12px 28px rgba(0,0,0,.27);
}
[data-theme="dark"] .course-node.status-unlocked{
  border-color:rgba(18,199,217,.34);
}
[data-theme="dark"] .course-node.status-done{
  background:rgba(74,222,128,.075);
  border-color:rgba(74,222,128,.42);
}
[data-theme="dark"] .course-node.status-locked{
  background:rgba(255,255,255,.025);
}
[data-theme="dark"] .course-node.status-in-progress{
  background:rgba(246,196,83,.055);
}
[data-theme="dark"] .course-code{color:var(--accent);}
[data-theme="dark"] .course-name{color:var(--text-primary);}
[data-theme="dark"] .course-meta{color:var(--text-secondary);}
[data-theme="dark"] .tag{
  background:#24211c;
  border-color:#3b372f;
  color:#aaa298;
}
[data-theme="dark"] .tag-cyan{
  background:rgba(18,199,217,.09);
  border-color:rgba(18,199,217,.24);
  color:#7de5ee;
}
[data-theme="dark"] .tag-elective{
  background:rgba(246,196,83,.08);
  border-color:rgba(246,196,83,.25);
  color:#f5ce70;
}

/* Outcome controls: remove the accidental white pills/buttons */
[data-theme="dark"] .course-outcome{
  border-top-color:rgba(255,255,255,.09);
}
[data-theme="dark"] .outcome-label{
  color:var(--text-muted);
}
[data-theme="dark"] .outcome-btn{
  background:#24211c;
  border-color:#3a362f;
  color:var(--text-secondary);
}
[data-theme="dark"] .outcome-btn:hover,
[data-theme="dark"] .outcome-btn:focus-visible{
  background:#2b2822;
  color:var(--text-primary);
}
[data-theme="dark"] .outcome-passed:hover,
[data-theme="dark"] .outcome-passed:focus-visible,
[data-theme="dark"] .outcome-passed.selected{
  background:rgba(74,222,128,.11);
  border-color:rgba(74,222,128,.55);
  color:#73e6a0;
}
[data-theme="dark"] .outcome-not-passed:hover,
[data-theme="dark"] .outcome-not-passed:focus-visible,
[data-theme="dark"] .outcome-not-passed.selected{
  background:rgba(255,255,255,.055);
  border-color:#555046;
  color:#d0c9bf;
}
[data-theme="dark"] .outcome-btn:disabled,
[data-theme="dark"] .outcome-btn[aria-disabled="true"]{
  background:#201e1a;
  border-color:#302d27;
  color:#6f685f;
  opacity:.55;
}
[data-theme="dark"] .gpa-reminder{
  color:var(--text-muted);
}
[data-theme="dark"] .semester-finish-bar{
  background:rgba(18,199,217,.065);
  border-color:rgba(18,199,217,.24);
}
[data-theme="dark"] .semester-finish-bar strong{
  color:#8cecf3;
}
[data-theme="dark"] .semester-finish-note{
  color:var(--text-secondary);
}

/* Buttons */
[data-theme="dark"] .btn{
  background:#24211c;
  border-color:#3c382f;
  color:var(--text-primary);
}
[data-theme="dark"] .btn:hover{
  background:#2c2923;
  border-color:rgba(18,199,217,.38);
}
[data-theme="dark"] .btn-accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#071113;
}
[data-theme="dark"] .btn-accent:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
[data-theme="dark"] .btn-outline{
  background:transparent;
  color:var(--text-secondary);
  border-color:#3d3931;
}

/* View/filter controls */
[data-theme="dark"] .track-filter a,
[data-theme="dark"] .track-filter button{
  background:#1c1a17;
  border-color:#353129;
  color:var(--text-secondary);
}
[data-theme="dark"] .track-filter a:hover,
[data-theme="dark"] .track-filter button:hover{
  background:#26231e;
  color:var(--text-primary);
}
[data-theme="dark"] .track-filter a.active,
[data-theme="dark"] .track-filter button.active{
  background:rgba(18,199,217,.11);
  border-color:rgba(18,199,217,.38);
  color:#76e5ed;
}
[data-theme="dark"] .view-toggle{
  background:#191714;
  border-color:#343129;
}
[data-theme="dark"] .view-toggle button.active{
  background:#29261f;
  color:var(--text-primary);
}

/* Forms, stats and modals */
[data-theme="dark"] .form-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .year-group,
[data-theme="dark"] .checkbox-card,
[data-theme="dark"] .course-mobile-card,
[data-theme="dark"] .catalog-controls,
[data-theme="dark"] .course-table-wrap{
  background:rgba(25,23,20,.94);
  border-color:#353129;
}
[data-theme="dark"] .modal-card{
  background:#1c1a17;
  border-color:#3b372f;
}
[data-theme="dark"] .finish-summary{
  background:#191714;
  border-color:#353129;
}
[data-theme="dark"] .finish-warning{
  background:rgba(18,199,217,.065);
  border-left-color:var(--accent);
}

/* Ensure dark-theme inline white outcome styles cannot leak through */
[data-theme="dark"] .finish-gpa-field input,
[data-theme="dark"] .grade-input,
[data-theme="dark"] .outcome-btn{
  background:#24211c !important;
  color:var(--text-primary) !important;
  border-color:#3a362f !important;
}
[data-theme="dark"] .grade-outcome-pill{
  background:#24211c !important;
  color:var(--text-secondary,#b7b2a8) !important;
  border-color:#3a362f !important;
}
[data-theme="dark"] .grade-outcome-pill.grade-pass{
  background:rgba(74,222,128,.11) !important;
  color:#73e6a0 !important;
  border-color:rgba(74,222,128,.35) !important;
}
[data-theme="dark"] .grade-outcome-pill.grade-fail{
  background:rgba(239,83,80,.12) !important;
  color:#f19a97 !important;
  border-color:rgba(239,83,80,.35) !important;
}
[data-theme="dark"] .outcome-passed.selected{
  background:rgba(74,222,128,.11) !important;
  color:#73e6a0 !important;
}
[data-theme="dark"] .outcome-not-passed.selected{
  background:rgba(255,255,255,.055) !important;
  color:#d0c9bf !important;
}

/* Flash/help panels */
[data-theme="dark"] .flash-error{
  background:rgba(251,113,133,.09);
  color:#ff9aaa;
}
[data-theme="dark"] .flash-success{
  background:rgba(74,222,128,.09);
  color:#7ee8a3;
}
[data-theme="dark"] .help-btn{
  background:#1c1a17 !important;
  border-color:#39352e !important;
}
[data-theme="dark"] .help-panel{
  background:#1c1a17 !important;
  border-color:#3a362f !important;
}

/* Better dark-mode footer */
[data-theme="dark"] .site-footer{
  color:#6f685f;
  border-top-color:rgba(255,255,255,.06);
}

/* ============ Landing course chain ============ */
.course-chain{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.course-chain-node{
  display:block;
  color:inherit;
  text-decoration:none;
  min-height:118px;
}
.course-chain-node:hover,
.course-chain-node:focus-visible{
  color:inherit;
  text-decoration:none;
}
.course-chain-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:600;
}
.course-chain-arrow span{
  transition:transform .15s var(--ease);
}
.course-chain:hover .course-chain-arrow span{
  transform:translateX(2px);
}

@media (max-width:720px){
  .course-chain{
    grid-template-columns:1fr;
    gap:8px;
  }
  .course-chain-arrow{
    min-height:20px;
    font-size:20px;
  }
  .course-chain-arrow span{ transform:rotate(90deg); }
  .course-chain:hover .course-chain-arrow span{ transform:rotate(90deg) translateX(2px); }
  .course-chain-node{ min-height:0; }
}

/* ============ Graduation endpoint card (Roadmap Timeline) ============ */
.graduation-endpoint{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin:8px 0 32px; padding-left:28px;
}
.grad-endpoint-arrow{ font-family:var(--font-mono); color:var(--ink-faint, var(--ink-soft)); font-size:14px; }
.grad-endpoint-card{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px solid var(--done); border-radius:var(--radius-lg,10px);
  background:var(--done-soft); padding:16px 28px; text-align:center;
}
.grad-endpoint-sem{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.04em; }
.grad-endpoint-label{ font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--done); letter-spacing:.03em; }
.grad-endpoint-final{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--done); }

/* ============ Mobile Roadmap: vertical collapsible semester cards ============ */
@media (max-width:640px){
  .roadmap-rail{ padding-left:0; }
  .roadmap-rail::before{ display:none; }
  .semester-block{ margin-bottom:14px; border:1px solid var(--line, #e5e5e5); border-radius:var(--radius-lg,10px); overflow:hidden; }
  .semester-block::before{ display:none; }
  .semester-block .semester-head{
    margin:0; padding:12px 14px; cursor:pointer; background:var(--paper-raised, #fafafa);
    justify-content:space-between;
  }
  .semester-block .semester-head::after{
    content:'Expand'; margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--cyan);
    border:1px solid var(--cyan); border-radius:6px; padding:3px 8px;
  }
  .semester-block.expanded .semester-head::after{ content:'Collapse'; }
  .semester-block .semester-body{ display:none; padding:0 14px 14px; }
  .semester-block.expanded .semester-body{ display:block; }
  .semester-block[data-semester].current-mobile .semester-head{ background:var(--cyan-soft); }
  .sem-nav-sticky{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .graduation-endpoint{ padding-left:0; }
}

/* ============ GPA HISTORY / PROGRESS REDESIGN ============ */
.gpa-history-section{
  margin-top:44px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.gpa-section-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:18px;}
.section-kicker{
  margin-bottom:5px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan);
}
.gpa-history-section .section-heading{margin:0 0 7px;}
.gpa-history-intro{
  margin:0;
  max-width:720px;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
}
.gpa-semester-nav{
  position:sticky;
  top:8px;
  z-index:10;
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:7px;
  margin:0 0 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--paper-raised) 92%,transparent);
  backdrop-filter:blur(10px);
  scrollbar-width:thin;
}
.gpa-semester-nav-link{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-raised);
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:11px;
  text-decoration:none;
  transition:all .15s var(--ease);
}
.gpa-semester-nav-link:hover{border-color:var(--cyan);color:var(--cyan-dark);text-decoration:none;}
.gpa-semester-nav-link strong{color:var(--ink);font-size:11px;}
.gpa-semester-nav-link.latest{border-color:var(--cyan);background:var(--cyan-soft);color:var(--cyan-dark);}
.gpa-semester-nav-link.latest strong{color:var(--cyan-dark);}
.gpa-history-section .band-legend{
  margin-bottom:18px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.gpa-breakdown{gap:14px;margin-top:0;}
.gpa-semester-card{
  padding:0;
  overflow:hidden;
  scroll-margin-top:92px;
  background:var(--paper-raised);
}
.gpa-semester-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 17px 13px;
  border-bottom:1px solid var(--line);
}
.gpa-semester-card .sem-label{
  display:block;
  margin:0;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.sem-course-count{
  margin-top:3px;
  font-size:11px;
  color:var(--ink-faint);
  font-family:var(--font-mono);
}
.gpa-semester-summary{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex:0 0 auto;
}
.gpa-semester-summary .sem-gpa{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  color:var(--ink);
}
.gpa-semester-summary .sem-credits{
  font-size:11px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
}
.gpa-semester-card .sem-course-grades{padding:13px 17px 16px;}
.gpa-semester-card .grade-badge{padding:5px 8px;border-radius:6px;}
.gpa-semester-card .grade-badge-score{font-weight:800;}

/* Consistent grade scale. Internal class names stay stable for backend compatibility. */
.grade-badge.band-excellent{background:var(--done-soft);color:var(--done);border-color:var(--done);}
.grade-badge.band-very_good{background:var(--cyan-soft);color:var(--cyan-dark);border-color:var(--cyan);}
.grade-badge.band-good{background:rgba(74,144,226,.10);color:#2874b8;border-color:#78add7;}
.grade-badge.band-pass{background:var(--warning-soft);color:#8a6500;border-color:var(--warning);}
.grade-badge.band-fail{background:var(--danger-soft);color:var(--danger);border-color:var(--danger);}

[data-theme="dark"] .gpa-history-section{border-top-color:var(--border);}
[data-theme="dark"] .gpa-semester-nav{background:rgba(20,18,15,.92);border-color:var(--border);}
[data-theme="dark"] .gpa-semester-nav-link{background:var(--surface-elevated);border-color:var(--border);color:var(--text-secondary);}
[data-theme="dark"] .gpa-semester-nav-link strong{color:var(--text-primary);}
[data-theme="dark"] .gpa-semester-nav-link.latest{background:rgba(18,199,217,.10);border-color:rgba(18,199,217,.55);color:#7de5ee;}
[data-theme="dark"] .gpa-semester-nav-link.latest strong{color:#8cecf3;}
[data-theme="dark"] .gpa-history-section .band-legend{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .gpa-semester-card{background:var(--surface-elevated);border-color:var(--border);}
[data-theme="dark"] .gpa-semester-header{border-color:var(--border);}
[data-theme="dark"] .gpa-semester-card .sem-label{color:var(--text-primary);}
[data-theme="dark"] .sem-course-count{color:var(--text-muted);}
[data-theme="dark"] .gpa-semester-summary .sem-gpa{color:var(--text-primary);}
[data-theme="dark"] .gpa-semester-summary .sem-credits{color:var(--text-secondary);}
[data-theme="dark"] .grade-badge.band-good{background:rgba(66,153,225,.12);color:#79b8e8;border-color:#4b82aa;}

@media (max-width:720px){
  .gpa-history-section{margin-top:34px;padding-top:24px;}
  .gpa-semester-nav{top:4px;}
  .gpa-semester-header{align-items:flex-start;padding:14px;}
  .gpa-semester-summary{flex-direction:column;align-items:flex-end;gap:2px;}
  .gpa-semester-summary .sem-gpa{font-size:21px;}
  .gpa-semester-card .sem-course-grades{padding:12px 14px 14px;}
}

.plan-sync-badge{
  display:inline-flex;
  align-items:center;
  margin-left:7px;
  padding:3px 7px;
  border:1px solid var(--done);
  border-radius:999px;
  background:var(--done-soft);
  color:var(--done);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  vertical-align:middle;
}
[data-theme="dark"] .plan-sync-badge{
  background:rgba(74,222,128,.08);
  border-color:rgba(74,222,128,.42);
  color:#73e6a0;
}
@media (max-width:600px){
  .plan-sync-badge{display:block;width:max-content;margin:5px 0 0;}
}

/* Course progress controls */
.currently-taking-panel{margin-bottom:20px;}
.currently-taking-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px;}
.currently-taking-head h2{margin:0 0 4px;}
.currently-taking-head p{margin:0;color:var(--text-secondary);font-size:13px;}
.currently-taking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.currently-taking-card{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-hover);}
.currently-taking-card .course-link{display:block;margin:3px 0;}
.course-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.currently-taking-card .course-actions{margin-top:12px;}
.btn-small{font-size:11px!important;padding:6px 9px!important;}
.course-action-disabled{font-size:11px;color:var(--text-muted);}
.mobile-course-actions{margin-top:10px;}
.empty-currently-taking{padding-bottom:14px;}

[data-theme="light"] .currently-taking-card{background:#fff;}


/* ============================================================
   ECRoadmap — Mobile / responsive UX pass
   UI-only overrides. No Flask, template, planner, roadmap,
   GPA, course, authentication, or database behavior changes.
   ============================================================ */

/* Prevent accidental page-wide horizontal scrolling while still
   allowing intentionally wide content (maps/tables) to scroll
   inside its own container. */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video { max-width:100%; }
button, input, select, textarea { max-width:100%; }

/* Phones: keep the header useful without squeezing every nav item
   into one line. The nav remains horizontally scrollable. */
@media (max-width:650px){
  .site-header{
    padding:10px 12px;
    gap:8px;
    align-items:center;
  }
  .brand{
    min-width:0;
    flex:1 1 auto;
    gap:8px;
  }
  .brand-text{ font-size:17px; }
  .brand-mark{ width:30px; height:30px; }
  .site-nav{
    order:3;
    width:calc(100% + 2px);
    max-width:none;
    min-width:0;
    padding:2px 0 3px;
    gap:3px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    white-space:nowrap;
  }
  .site-nav::-webkit-scrollbar{ display:none; }
  .site-nav a,
  .theme-toggle{
    flex:0 0 auto;
    min-height:40px;
  }
  .site-nav a{ padding:9px 10px; font-size:11px; }
  .nav-user{ flex:0 0 auto; padding:9px 4px; }
  .nav-divider{ flex:0 0 auto; }
  .guest-theme-toggle{ margin-left:auto; }

  .site-main{
    width:100%;
    max-width:100%;
    padding:24px 12px 56px;
  }
  .site-footer{
    padding:20px 14px;
    font-size:10px;
    line-height:1.6;
  }

  .page-head{ margin-bottom:22px; }
  .page-head h1{
    font-size:24px;
    line-height:1.18;
    overflow-wrap:anywhere;
  }
  .page-head p{
    font-size:13px;
    line-height:1.55;
  }

  .hero{ padding:30px 0 22px; }
  .hero h1{
    font-size:34px;
    line-height:1.08;
  }
  .hero .tagline{ font-size:17px; }
  .hero p{ font-size:14px; }
  .hero-actions{ gap:9px; }
  .hero-actions .btn{ width:100%; }

  .form-card{
    width:100%;
    max-width:460px;
    margin:18px auto;
    padding:24px 18px;
  }
  .form-card h1{ font-size:23px; }
  .field input,
  .catalog-controls input,
  .catalog-controls select,
  .whatif-card input,
  .whatif-card select{
    min-height:44px;
    font-size:16px; /* avoids iOS input zoom */
  }
  .btn{
    min-height:44px;
    padding:10px 14px;
  }

  /* Dashboard */
  .progress-strip{ grid-template-columns:1fr; gap:10px; }
  .stat-card{ padding:15px; }
  .stat-card .stat-value{ font-size:25px; }
  .dash-card,
  .whatif-card{ padding:17px; }
  .dash-grid-2{ grid-template-columns:1fr; gap:12px; }
  .node-grid{ grid-template-columns:1fr; gap:10px; }
  .currently-taking-grid{ grid-template-columns:1fr; }
  .currently-taking-head{
    flex-direction:column;
    gap:8px;
  }
  .gpa-section-head{
    flex-direction:column;
    gap:10px;
  }
  .gpa-semester-nav{
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gpa-semester-nav::-webkit-scrollbar{ display:none; }
  .gpa-semester-nav-link{ flex:0 0 auto; }

  /* Roadmap controls */
  .roadmap-controls{
    align-items:stretch;
    gap:8px;
  }
  .roadmap-controls > *{ max-width:100%; }
  .view-toggle{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .view-toggle button{ min-height:42px; }
  .planning-options summary{
    width:100%;
    justify-content:center;
  }
  .planning-options-panel{ padding:12px; }
  .plan-mode-picker{ grid-template-columns:1fr; gap:9px; }
  .plan-mode-btn{ min-height:58px; }
  .sem-nav-sticky{
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:7px 0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sem-nav-sticky::-webkit-scrollbar{ display:none; }
  .sem-nav-link{ flex:0 0 auto; }

  /* Mobile semester cards */
  .semester-block .semester-head{
    min-height:54px;
    gap:8px;
  }
  .semester-head h2{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .semester-head .semester-credits{
    white-space:nowrap;
  }
  .semester-block .semester-head::after{
    flex:0 0 auto;
  }
  .semester-block .semester-body{ padding:0 12px 12px; }
  .semester-courses{ grid-template-columns:1fr; }
  .course-node{ padding:13px; }
  .course-name{ line-height:1.35; }
  .course-meta{ gap:5px; }
  .semester-finish-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .semester-finish-bar .btn{ width:100%; }
  .finish-gpa-field{
    flex-wrap:wrap;
  }

  /* Course catalog: use the purpose-built mobile cards when
     present; otherwise keep the table safely horizontally scrollable. */
  .catalog-controls{ grid-template-columns:1fr; gap:8px; }
  .course-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .course-table{ min-width:760px; }
  .course-mobile-list{ display:block; }
  .course-mobile-card{ padding:13px; }
  .course-table-wrap:has(+ .course-mobile-list) .course-table{
    min-width:0;
  }

  /* Course detail */
  .course-detail-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .course-detail-head h1{
    font-size:24px;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  .detail-grid{ grid-template-columns:1fr; gap:10px; }
  .detail-card{ padding:16px; }
  .unlock-chain .chain-node{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  /* Onboarding / planner */
  .onboarding-form{ width:100%; }
  .year-group{ padding:16px; }
  .profile-head{
    gap:9px;
  }
  .profile-head > div{ min-width:0; }
  .profile-card-grid{ grid-template-columns:1fr; gap:10px; }
  .profile-card{ padding:16px; }
  .checkbox-grid{ grid-template-columns:1fr !important; }
  .checkbox-card{ min-height:48px; }
  .sticky-submit{
    position:sticky;
    bottom:8px;
    z-index:30;
    margin-left:-4px;
    margin-right:-4px;
  }

  /* Modals / side panels */
  .modal-card{
    width:calc(100% - 24px);
    max-width:none;
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    padding:20px 17px;
  }
  .modal-card .modal-actions{
    flex-direction:column-reverse;
  }
  .modal-card .modal-actions .btn{ width:100%; justify-content:center; }
  .help-panel{
    top:0;
    width:100%;
    padding:72px 18px 28px;
  }
  .help-btn{
    width:48px;
    height:48px;
    right:14px;
    bottom:14px;
  }

  /* GPA history */
  .gpa-semester-header{
    gap:10px;
  }
  .gpa-semester-summary{
    min-width:0;
  }

  /* Graduation endpoint */
  .grad-endpoint-card{
    width:100%;
    padding:14px 16px;
  }
}

@media (max-width:400px){
  .site-main{ padding-left:10px; padding-right:10px; }
  .site-header{ padding-left:10px; padding-right:10px; }
  .brand-text{ font-size:16px; }
  .page-head h1{ font-size:22px; }
  .hero h1{ font-size:31px; }
  .form-card{ padding:20px 15px; }
  .stat-card,
  .dash-card,
  .whatif-card{ padding:14px; }
  .semester-block .semester-head{ padding:11px 12px; }
  .semester-block .semester-head::after{ padding:3px 6px; font-size:10px; }
  .semester-block .semester-body{ padding-left:10px; padding-right:10px; }
  .course-node{ padding:12px; }
}

/* Touch devices don't need hover-only motion and accidental hover
   expansion should never interfere with tapping. */
@media (hover:none) and (pointer:coarse){
  .course-node:hover,
  .outcome-btn:hover,
  .help-btn:hover{ transform:none; }
  .course-node:hover{ box-shadow:none; }
}