/* The Caltech orange, written down once. Named for what it IS to this product,
   not for what it looks like: "orange" would leave the next shade with nowhere
   to live. Every rule added from here on reaches it through var(); the literals
   already below are a legacy set that agents/check_color_literals.mjs records
   and only lets shrink. */
:root {
  --caltech-orange: #CC5409;
  /* The red a requirement warning is written in (.req-warnings text). The
     phone summary bar's warning count reuses it so the two read as one. */
  --warning-red: #b91c1c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: #f5f6f8;
  color: #1f2933;
  font-size: 14px;
}

header {
  background: #CC5409;
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.header-left h1 { margin: 0; font-size: 18px; font-weight: 600; }
.subtitle { font-size: 12px; opacity: 0.85; }
.header-controls { display: flex; gap: 14px; align-items: center; }
.header-controls label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.header-controls input { width: 64px; padding: 4px 6px; border-radius: 4px; border: 1px solid #94a3b8; background: #fff; color: #111; }
.units-display { background: rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 16px; font-weight: 600; }
.units-rule { font-size: 13px; display: flex; align-items: center; gap: 6px; opacity: 0.9; }
.units-rule b { color: #fff; }

/* Modern segmented row for matriculation / catalog year in the Major modal. */
.year-segmented-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.year-segmented-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  min-width: 140px;
}
.year-segmented {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.year-segmented-btn {
  border: none;
  background: transparent;
  color: #475569;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.year-segmented-btn:hover:not(.disabled):not(.active) { background: #e2e8f0; color: #0f172a; }
.year-segmented-btn.active {
  background: #CC5409;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.year-segmented-btn.disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  text-decoration: line-through;
}
.year-segmented-note {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.units-rule .dean-toggle { display: inline-flex; align-items: center; gap: 0; font-size: 12px; cursor: pointer; }
.units-rule .dean-toggle input { accent-color: #fff; margin: 0; }
.status-pill { margin-left: 8px; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.status-pill.under { background: #fef08a; color: #713f12; }
.status-pill.ok    { background: #86efac; color: #14532d; }
.status-pill.over  { background: #fca5a5; color: #7f1d1d; }

.header-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.header-actions select, .header-actions button {
  background: #fff;
  color: #CC5409;
  border: 1px solid #94a3b8;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.header-actions button:hover { background: #e2e8f0; }
.header-actions button.warn { background: #fecaca; color: #7f1d1d; border-color: #fca5a5; }
/* Browser-style schedule tabs (below header) */
.schedule-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: #f5f6f8;
  padding: 6px 12px 0;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}
.schedule-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 7px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 12.5px;
  color: #475569;
  max-width: 220px;
  flex-shrink: 0;
}
.schedule-tab:hover { background: #cbd5e1; color: #1f2933; }
.schedule-tab.active {
  background: #fff;
  border-color: #CC5409 #CC5409 #fff;
  color: #1f2933;
  font-weight: 600;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.schedule-tab .tab-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
  outline: none;
}
.schedule-tab.active .tab-name[contenteditable="true"] {
  background: #fef3c7;
  padding: 0 4px;
  border-radius: 3px;
}
.schedule-tab .tab-close {
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  opacity: 0.6;
}
.schedule-tab .tab-close:hover { background: rgba(220,38,38,0.85); color: #fff; opacity: 1; }
.schedule-tab .tab-rename {
  width: 18px;
  height: 18px;
  line-height: 14px;
  text-align: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  opacity: 0.55;
  margin-right: 2px;
  /* Mirror ✎ (LOWER RIGHT PENCIL): eraser goes to top-right, tip to bottom-left. */
  display: inline-block;
  transform: scaleX(-1);
}
.schedule-tab .tab-rename:hover { background: rgba(204,84,9,0.18); color: #CC5409; opacity: 1; }
.schedule-tab-add {
  background: transparent;
  border: 1px dashed #CC5409;
  color: #CC5409;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1px;
}
.schedule-tab-add:hover { background: #FFE4D1; }

.schedule-title {
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  min-width: 140px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  border: 1px dashed transparent;
}
.schedule-title:hover { border-color: rgba(255,255,255,0.5); }
.schedule-title[contenteditable="true"] {
  background: #fff;
  color: #1f2933;
  border-color: #CC5409;
  outline: none;
  white-space: normal;
  overflow: visible;
}

main {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  gap: 12px;
  padding: 12px;
  align-items: start;
}

aside.sidebar, section.schedule-area, section.courses-area {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
h2 { margin: 0 0 12px; font-size: 16px; }
h3 { margin: 0 0 8px; font-size: 14px; }

/* Requirements list */
.req-item {
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.req-item:hover { background: #f1f5f9; }
.req-item.active { background: #FFE4D1; border-color: #FF6C0C; }
.req-item .label { font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.req-item .progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin: 6px 0 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
}
/* Four segments along the bar:
   - seg-completed-safe     solid green   = credited from the transcript, no catalog conflict
   - seg-completed-conflict striped green = credited from transcript but the catalog says these
                                            units shouldn't double-count where they're double-counted now
   - seg-planned-safe       solid orange  = credited from your plan, no conflict
   - seg-planned-conflict   striped orange = credited from your plan, double-counted in a way catalog forbids
   Cumulative width clamped at 100% by the renderer. */
.req-item .progress > div { height: 100%; }
.req-item .progress > .seg-completed-safe     { background: #4ade80; }
.req-item .progress > .seg-completed-conflict {
  background: repeating-linear-gradient(45deg, #4ade80 0 4px, #16a34a 4px 8px);
}
.req-item .progress > .seg-planned-safe       { background: #FF6C0C; }
.req-item .progress > .seg-planned-conflict {
  background: repeating-linear-gradient(45deg, #FF6C0C 0 4px, #b45309 4px 8px);
}
.breakdown-toggle {
  color: #64748b;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.breakdown-toggle:hover { color: #FF6C0C; }
.breakdown {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
}
.breakdown .bd-section { margin-bottom: 8px; }
.breakdown .bd-section:last-child { margin-bottom: 0; }
.breakdown .bd-heading { font-weight: 600; color: #334155; margin-bottom: 4px; }
.breakdown .bd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.breakdown .bd-code { font-family: ui-monospace, Menlo, monospace; color: #0f172a; }
.breakdown .bd-units { color: #64748b; font-size: 11px; }
.breakdown .bd-term { color: #94a3b8; font-size: 11px; }
.breakdown .bd-detail { color: #64748b; font-style: italic; }
.breakdown .bd-action { margin-left: auto; }
.breakdown .bd-remove,
.breakdown .bd-restore {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  cursor: pointer;
}
.breakdown .bd-remove:hover { border-color: #ef4444; color: #b91c1c; background: #fef2f2; }
.breakdown .bd-restore:hover { border-color: #4ade80; color: #166534; background: #f0fdf4; }
.breakdown .bd-row-excluded .bd-code { color: #94a3b8; text-decoration: line-through; }
.breakdown .bd-row-spilled .bd-code { color: #94a3b8; text-decoration: line-through; }
.breakdown .bd-row-placement .bd-code { color: #15803d; }
.breakdown .bd-placement-note { flex-basis: 100%; font-size: 11px; color: #64748b; font-style: italic; padding-left: 4px; }
.breakdown .bd-conflict {
  flex-basis: 100%;
  font-size: 11px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 3px 6px;
  margin: 2px 0 0 0;
}
.breakdown .bd-empty { color: #64748b; font-style: italic; }
.req-item .meta { font-size: 11px; color: #64748b; }
.req-item .notes { font-size: 11px; color: #64748b; margin-top: 4px; font-style: italic; }
.req-item .manual-toggle { margin-top: 6px; }
.req-item .manual-toggle-btn { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; }
.req-item .manual-toggle-btn:hover { background: #f1f5f9; }
.req-item.done .manual-toggle-btn { border-color: #86efac; background: #f0fdf4; }
.req-item .track-placeholder-hint { font-size: 12px; padding: 6px 8px; margin-top: 6px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; color: #78350f; cursor: pointer; }
.req-item .track-placeholder-hint:hover { background: #fde68a; }
select.flash { animation: flash-bg 1s ease-out 2; }
@keyframes flash-bg { 0%, 100% { background: #fff; } 50% { background: #fde68a; } }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot.done { background: #4ade80; }
.dot.partial { background: #fbbf24; }
.dot.todo { background: #cbd5e1; }
.legend { display: flex; gap: 10px; font-size: 11px; color: #64748b; margin-top: 8px; }

.misc-section { margin-top: 12px; font-size: 12px; padding: 8px; border-radius: 6px; }
.misc-section.has-slot { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.misc-section.no-slot  { background: #f1f5f9; color: #475569; }

/* Schedule grid */
#scheduleGrid {
  display: grid;
  grid-template-columns: 50px repeat(5, 1fr);
  grid-auto-rows: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.grid-header {
  background: #f8fafc;
  font-weight: 600;
  text-align: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #e2e8f0;
  grid-row: span 2;
}
.grid-time {
  font-size: 10px;
  color: #64748b;
  text-align: right;
  padding-right: 4px;
  border-top: 1px dashed #e2e8f0;
  grid-row: span 4;
}
.grid-cell {
  border-left: 1px solid #f1f5f9;
  border-top: 1px dotted #f1f5f9;
}
.grid-cell.hour { border-top: 1px solid #e2e8f0; }
.course-block {
  background: #FF6C0C;
  color: #fff;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  margin: 1px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.course-block:hover { filter: brightness(1.1); }
.course-block .cb-code { font-weight: 700; }
.course-block .cb-title { font-size: 10px; opacity: 0.95; line-height: 1.15; }
.course-block .cb-room { font-size: 10px; opacity: 0.85; }
/* 16 maximally-distinct course-block colors. Hues spread evenly across
   the wheel + variation in lightness/saturation so no two are mistaken
   for each other. Pale variants get dark text for contrast. */
.course-block.color-0  { background: #FF6C0C; }                 /* Caltech orange */
.course-block.color-1  { background: #3cb44b; }                 /* green */
.course-block.color-2  { background: #ffe119; color: #422006; } /* yellow */
.course-block.color-3  { background: #4363d8; }                 /* blue */
.course-block.color-4  { background: #e6194B; }                 /* red */
.course-block.color-5  { background: #911eb4; }                 /* purple */
.course-block.color-6  { background: #42d4f4; color: #083344; } /* cyan */
.course-block.color-7  { background: #f032e6; }                 /* magenta */
.course-block.color-8  { background: #bfef45; color: #1a2e05; } /* lime */
.course-block.color-9  { background: #fabed4; color: #500724; } /* pink */
.course-block.color-10 { background: #469990; }                 /* teal */
.course-block.color-11 { background: #dcbeff; color: #2e1065; } /* lavender */
.course-block.color-12 { background: #9A6324; }                 /* brown */
.course-block.color-13 { background: #800000; }                 /* maroon */
.course-block.color-14 { background: #aaffc3; color: #064e3b; } /* mint */
.course-block.color-15 { background: #000075; }                 /* navy */
.course-block.conflict { outline: 2px solid #ef4444; }
.course-block.tentative-block {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 0,
    rgba(255,255,255,0.15) 4px,
    transparent 4px,
    transparent 8px
  );
}
.course-block .cb-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background: #fff;
  color: #b91c1c;
  border: 1.5px solid #b91c1c;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  z-index: 2;
}
.course-block .cb-close:hover {
  background: #b91c1c;
  color: #fff;
}
.course-block .cb-tentative {
  font-size: 9px;
  font-style: italic;
  font-weight: 600;
  background: rgba(0,0,0,0.18);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
}

/* Warning banner */
.warning-banner {
  background: #fef2f2;
  color: #7f1d1d;
  border-bottom: 2px solid #f87171;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
}
.warning-banner.hidden { display: none; }

/* Verify-programs banner (shown inside the programs modal after a PDF upload) */
.verify-banner {
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fdba74;
  border-left: 4px solid #CC5409;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.verify-banner.hidden { display: none; }

/* Badges */
.badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 600;
}
.badge.tentative { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge.conflict-badge { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Course list buttons */
.ci-buttons { display: flex; flex-direction: column; gap: 4px; }
.course-item button.info {
  background: #e2e8f0; color: #CC5409; font-size: 11px; padding: 4px 8px;
}
.course-item button.info:hover { background: #cbd5e1; }

/* Selected item info button */
.selected-item button.info {
  background: #cbd5e1; color: #CC5409; margin-right: 4px;
}
/* Selected item settings (⚙) button — issue #49 customize affordance. Same
   neutral chip styling as info, with a right margin so it doesn't crowd the
   ✕ delete button. */
.selected-item button.edit {
  background: #cbd5e1; color: #1e293b; margin-right: 4px;
}
.selected-item button.edit:hover { background: #94a3b8; color: #fff; }
.selected-item.conflict { background: #fef2f2; border-left: 3px solid #ef4444; padding-left: 7px; }

/* Misc section "over" state */
.misc-section.over {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}

/* Description modal */
.modal-content.modal-wide { max-width: 720px; }
#descModalBody { font-size: 13px; }
#descModalBody .tentative-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12px;
}
#descModalBody .desc-meta {
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#descModalBody .desc-text {
  line-height: 1.5;
  margin: 12px 0;
}
#descModalBody h4 { margin: 14px 0 6px; font-size: 13px; }
#descModalBody ul { margin: 4px 0; padding-left: 20px; }
#descModalBody li { margin: 2px 0; font-size: 12px; }
#descModalBody .desc-sections li { font-family: -apple-system, Helvetica, sans-serif; }

#selectedList { margin-top: 14px; }
#selectedListItems { display: flex; flex-direction: column; gap: 4px; }
.selected-item {
  display: flex; justify-content: space-between; align-items: center;
  background: #f1f5f9; padding: 6px 10px; border-radius: 6px;
  font-size: 12px;
}
.selected-item .si-info { flex: 1; }
.selected-item .si-code { font-weight: 700; }
.selected-item button {
  background: #fecaca; border: none; color: #7f1d1d;
  padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.selected-item button:hover { background: #f87171; color: #fff; }

/* Course list */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.filters input[type=text] {
  flex: 1; min-width: 100px; padding: 6px 10px;
  border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px;
}
.filters label { font-size: 12px; display: flex; gap: 4px; align-items: center; }
.filter-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 2px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}
.filter-group-label {
  font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.5px;
}
.filter-scope { font-weight: 600; color: #334155; }
#courseList { max-height: 70vh; overflow-y: auto; }
/* "Courses on file" — what the transcript parser actually read, by term. */
/* Capped so a 12-term transcript doesn't push the modal's buttons off screen. */
.courses-on-file { margin: 4px 0 12px; max-height: 40vh; overflow-y: auto; }
.courses-on-file h4 { margin: 0 0 8px; font-size: 14px; }
.courses-on-file .cof-count { font-weight: 400; color: #64748b; font-size: 12px; }
.cof-term {
  border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 6px 10px; margin-bottom: 6px; background: #f8fafc;
}
.cof-term.in-progress { border-color: #fdba74; background: #fff7ed; }
.cof-term-head { font-size: 12px; font-weight: 600; color: #334155; }
.cof-badge {
  font-weight: 500; color: #9a3412; background: #ffedd5;
  border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
/* CSS columns rather than a grid: column flow is top-to-bottom, so the
   alphabetical order reads down one column and then the next. */
.cof-list {
  margin: 4px 0 0; padding: 0; list-style: none;
  columns: 230px; column-gap: 16px;
}
.cof-list li { font-size: 12px; color: #475569; break-inside: avoid; margin-bottom: 2px; }
.cof-title { color: #64748b; }
.cof-foot { font-size: 12px; color: #475569; margin: 8px 0 0; }
/* Shown when the term on screen is already over, so the Add buttons refuse. */
.search-other-terms-note {
  margin: 0 0 8px; padding: 6px 8px;
  border: 1px solid #fde68a; border-radius: 6px;
  background: #fffbeb; color: #92400e; font-size: 12px;
}
/* Search results split into "courses in this department" and "courses that
   merely mention it". The second group starts collapsed. */
.search-group { margin-bottom: 6px; }
.search-group-head {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin: 0 0 6px; padding: 4px 6px;
  border: none; border-radius: 6px;
  background: #f1f5f9; color: #334155;
  font: inherit; font-size: 12px; font-weight: 600; text-align: left;
  cursor: pointer;
}
.search-group-head:hover { background: #e2e8f0; }
.search-group-caret { color: #64748b; }
.filter-count { color: #64748b; }

.course-item {
  border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 8px; margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
}
.course-item.selected { background: #FFE4D1; border-color: #FF6C0C; }
.course-item.conflict { background: #fef2f2; border-color: #fecaca; opacity: 0.7; }
.course-item .ci-main { flex: 1; }
.course-item .ci-code { font-weight: 700; font-size: 13px; }
.course-item .ci-title { font-size: 12px; color: #475569; }
.course-item .ci-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.course-item .ci-fulfills { font-size: 10px; color: #9C3F00; margin-top: 2px; }
.course-item button {
  background: #FF6C0C; color: white; border: none;
  padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.course-item button.remove { background: #fca5a5; color: #7f1d1d; }
.course-item button:hover { filter: brightness(0.95); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-content {
  background: white; border-radius: 8px; padding: 20px; max-width: 480px; width: 90%;
  max-height: 80vh; overflow-y: auto;
}
.modal-content h3 { margin-top: 0; }
.modal-content #modalSections {
  display: flex; flex-direction: column; gap: 6px; margin: 12px 0;
}
.section-option {
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.section-option:hover { background: #f1f5f9; }
.section-option.conflict { background: #fef2f2; }
.section-option.conflict-note { font-size: 11px; color: #b91c1c; }
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.modal-buttons button {
  background: #e2e8f0; border: none; padding: 6px 14px;
  border-radius: 4px; cursor: pointer;
}

@media (max-width: 1200px) {
  main { grid-template-columns: 1fr; }
}

/* Term selector bar */
.term-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.term-selector { display: flex; gap: 6px; }
.term-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f2933;
}
.term-btn:hover { background: #e2e8f0; }
.term-btn.active {
  background: #CC5409;
  color: #fff;
  border-color: #CC5409;
}
.term-btn .term-year { white-space: nowrap; }
.term-btn .term-units {
  font-size: 11px;
  background: rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 8px;
}
.term-btn:not(.active) .term-units {
  background: #cbd5e1;
  color: #CC5409;
}
.term-note {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
}
.badge.offered-badge {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #7dd3fc;
}
.course-item button:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

/* Requirement separator (Complete divider) */
.req-separator {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-top: 1px dashed #cbd5e1;
  padding: 8px 0 4px;
  margin-top: 6px;
  text-align: center;
}
.req-item.done {
  opacity: 0.65;
  background: #f8fafc;
}
.req-item.done:hover { opacity: 1; }

/* Upload modal */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0;
}
.upload-card {
  border: 2px dashed #cbd5e1;
  border-radius: 6px;
  padding: 14px;
}
.upload-card h4 { margin: 0 0 4px; font-size: 14px; }
.upload-card .upload-hint { font-size: 11px; color: #64748b; margin: 0 0 8px; }
.upload-card input[type=file] { width: 100%; font-size: 12px; }
.upload-status { font-size: 12px; margin-top: 6px; color: #475569; min-height: 16px; }
.upload-status.ok { color: #166534; }
.upload-status.err { color: #b91c1c; }
.upload-log {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  background: #f8fafc;
  border-radius: 4px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
  white-space: pre-wrap;
  display: none;
}
.upload-log.visible { display: block; }
@media (max-width: 700px) {
  .upload-grid { grid-template-columns: 1fr; }
  /* Header: stack the controls so unit inputs don't blow up */
  header { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .header-controls { flex-wrap: wrap; gap: 6px; }
  .header-controls input[type=number] { width: 60px; }
  .header-actions { align-self: flex-end; }
  /* Upload prompt: stack vertically */
  .upload-prompt { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .upload-prompt-btn { width: 100%; }
  /* Schedule tab bar: allow horizontal scrolling */
  .schedule-tab-bar { overflow-x: auto; flex-wrap: nowrap; }
  .schedule-tab { flex: 0 0 auto; max-width: 60vw; }
  /* Schedule grid: horizontal scroll so 5 days stay readable */
  #scheduleGrid { overflow-x: auto; min-width: 0; }
  /* Bug button stays small and out of the way */
  .bug-btn { min-width: 44px; height: 44px; right: 10px; bottom: 10px; padding: 0 10px; font-size: 20px; }
}

/* Year bar (above term bar) */
.year-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.year-label { font-size: 12px; color: #64748b; font-weight: 600; }
.year-selector { display: flex; gap: 4px; }
.year-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
  color: #1f2933;
}
.year-btn:hover { background: #e2e8f0; }
.year-btn.active { background: #CC5409; color: #fff; border-color: #CC5409; }
.year-btn.current-school-year {
  font-size: 12px;
  padding: 4px 8px;
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}
.year-btn.current-school-year:hover { background: #fef08a; }
.year-btn.current-school-year.active { background: #ca8a04; color: #fff; border-color: #ca8a04; }
.add-year-btn {
  background: #fff;
  color: #CC5409;
  border: 1px dashed #CC5409;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
}
.add-year-btn:hover { background: #FFE4D1; }

/* Programs (major/minor) picker modal */
.programs-picker { display: flex; flex-direction: column; gap: 8px; }
.programs-picker .prog-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border: 1px solid #e2e8f0; padding: 8px; border-radius: 6px;
}
.programs-picker .prog-row label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.programs-picker select { font: inherit; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; }
.programs-picker .prog-remove {
  background: #fee2e2; color: #7f1d1d; border: none; padding: 2px 8px;
  border-radius: 4px; cursor: pointer; font-size: 11px;
}
.programs-picker .prog-add {
  background: #FFE4D1; color: #CC5409; border: 1px dashed #CC5409;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
  align-self: flex-start;
}

/* Upload prompt banner (under header) */
.upload-prompt {
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  flex-wrap: wrap;
}
.upload-prompt-textcol {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-prompt-text {
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
}
.upload-prompt-privacy {
  font-size: 14px;
  color: #78350f;
  font-weight: 600;
}
.upload-prompt-privacy a { color: #78350f; text-decoration: underline; font-weight: 600; }
.upload-prompt-privacy a:hover { color: #451a03; }
.upload-prompt.uploaded .upload-prompt-privacy { color: #047857; }
.upload-prompt.uploaded .upload-prompt-privacy a { color: #065f46; }
.upload-prompt.first-run .upload-prompt-privacy { font-size: 15px; }
.upload-prompt-alt {
  display: none;
  font-size: 13px;
  color: #92400e;
  font-weight: 400;
}
.upload-prompt.first-run .upload-prompt-alt { display: block; }
.upload-prompt-btn {
  background: #CC5409;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.upload-prompt-btn:hover { background: #A0420A; }
.upload-prompt.uploaded {
  background: #ecfdf5;
  border-bottom: 1px solid #6ee7b7;
}
.upload-prompt.uploaded .upload-prompt-text { color: #065f46; }
.upload-prompt-status { font-size: 12px; color: #065f46; }
/* First-run welcome state — make the strip taller and more inviting */
.upload-prompt.first-run {
  background: #fffbeb;
  border-bottom: 2px solid #f59e0b;
  padding: 14px 20px;
}
.upload-prompt.first-run .upload-prompt-text {
  font-size: 15px;
  line-height: 1.5;
  color: #78350f;
  max-width: 720px;
}

/* Empty-state hint for the requirements sidebar (no transcript, no selections) */
/* Transcript term picker (after upload) */
.term-picker {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.term-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.term-picker-actions { display: flex; gap: 4px; }
.term-picker-actions button {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.term-picker-actions button:hover { background: #e2e8f0; }
.term-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 10px;
}
.term-pick {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
}
.term-pick em { color: #64748b; font-style: normal; font-size: 11px; }

/* In-progress term editor — slim gray panel; previously yellow but the
   user found that too prominent. */
.current-term-editor {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 10px;
  margin: 4px 14px;
  font-size: 12px;
}
.current-term-editor.hidden { display: none; }
.current-term-editor .ct-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.current-term-editor .ct-title-h { font-weight: 600; color: #334155; }
.current-term-editor .ct-hint { color: #475569; font-size: 12px; }
.current-term-editor .ct-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.current-term-editor .ct-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  padding: 3px 6px;
}
.current-term-editor .ct-row.dropped { background: #f1f5f9; border-color: #cbd5e1; opacity: 0.75; }
.current-term-editor .ct-row.dropped .ct-code { text-decoration: line-through; }
.current-term-editor .ct-code { font-weight: 600; font-family: ui-monospace, monospace; }
.current-term-editor .ct-title { color: #475569; font-size: 12px; }
.current-term-editor .ct-toggle {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
.current-term-editor .ct-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Feedback / chat button — orange-on-white pill so the speech-bubble glyph
   doesn't disappear against the page background. */
.bug-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  background: #CC5409;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 24px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  opacity: 1;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bug-btn:hover { background: #a64207; box-shadow: 0 6px 16px rgba(0,0,0,0.30); }
.bug-btn-label { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; }
@media (max-width: 600px) {
  .bug-btn-label { display: none; }
}

.bug-thread {
  background: #f8fafc;
  border-radius: 6px;
  padding: 10px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  min-height: 60px;
  margin-bottom: 10px;
}
.bug-msg {
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 90%;
  line-height: 1.45;
}
.bug-msg.user {
  background: #FFE4D1;
  align-self: flex-end;
  text-align: left;
}
.bug-msg.bot {
  background: #fff;
  border: 1px solid #e2e8f0;
  align-self: flex-start;
  font-size: 12px;
}
.bug-msg .bug-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bug-msg .bug-actions button {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.bug-msg .bug-actions button:hover { background: #e2e8f0; }
.bug-msg pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 8px;
  border-radius: 4px;
  font-size: 11px;
  max-height: 200px;
  overflow: auto;
  margin: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.bug-msg .ts { font-size: 10px; color: #64748b; margin-bottom: 2px; }

.bug-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.bug-input-row textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.bug-input-row button {
  background: #CC5409;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.bug-input-row button:hover { background: #A0420A; }

/* Override badge shown inline on a req-item label — click to edit */
.waived-badge {
  display: inline-block;
  margin-left: 6px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 500;
  cursor: pointer;
}
.waived-badge:hover { background: #fde68a; }

/* Catalog-rule double-counting warning. Stronger amber than the waived-badge
   so the student notices the row even when the bar itself is fully green. */
.conflict-badge {
  display: inline-block;
  margin-left: 6px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 600;
  cursor: pointer;
}
.conflict-badge:hover { background: #fde68a; }

/* Inline "+ exception" link on a req-item row */
.exception-link {
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  margin-left: 6px;
}
.exception-link:hover { color: #475569; }

/* Cohort picker mirrors prog-row layout */
.cohort-picker { margin: 0 0 10px; }

/* Catalog-rule warnings on a req-item (e.g. menu class scheduled too late,
   first-year humanities in same discipline). Distinct from .notes (which are
   informational) — these are surfaced when the student's plan/transcript
   appears to violate a catalog rule. */
.req-warnings {
  color: var(--warning-red);
  background: #fef2f2;
  border-left: 2px solid #fca5a5;
  padding: 4px 8px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  border-radius: 2px;
}

.site-footer {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  padding: 16px 12px 24px;
  border-top: 1px solid #e2e8f0;
  margin-top: 24px;
  background: #f8fafc;
}
.site-footer a { color: #475569; text-decoration: underline; }
.site-footer a:hover { color: #1f2933; }


/* ---- Past terms (read-only history from the transcript) ----
   These views are records, not plans, so they read as muted and dashed:
   dashed = "you can't edit this", the same cue on the tabs and the blocks. */
.year-btn.past, .term-btn.past {
  background: #f8fafc;
  color: #64748b;
  border-style: dashed;
  border-color: #cbd5e1;
}
.year-btn.past:hover, .term-btn.past:hover { background: #eef2f7; }
.year-btn.past.active, .term-btn.past.active {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
}
.term-btn.past.active .term-units { color: #fff; }
/* Course colors stay (they're how you recognize a course at a glance), but the
   block is toned down and dashed so a past week never looks like a live plan. */
.course-block.history-block {
  opacity: 0.85;
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, 0.8);
}
.history-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #64748b;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}
.history-note b { color: #334155; }
.history-untimed { margin-top: 6px; color: #92400e; }
/* On a past term the pill already reads "45u taken"; the live "45 selected"
   counter next to it would say the same thing in planning language. */
.units-display.history #currentUnitsLabel,
.units-display.history .units-word { display: none; }


/* Calendar export (docs/spec-calendar.md §7) */

/* The heading row: heading, export button, registrar links. It WRAPS rather
   than scrolling, because on a phone the links must stack under the heading
   instead of disappearing off the right edge. Every item clears the 44px tap
   target the rest of the planner uses. */
.schedule-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; margin: 0 0 12px;
}
.schedule-head h2 { margin: 0; margin-right: 4px; }
.cal-row-btn, .cal-row-link {
  /* A flex container strips the leading and trailing white space of its items,
     so the " · not posted yet" note lost the space in front of its separator and
     the link read "Winter final exams· not posted yet". The gap puts it back
     where the markup cannot. */
  display: inline-flex; align-items: center; gap: 0.25em; min-height: 44px;
  padding: 6px 14px; border-radius: 4px;
  font-size: 12px; line-height: 1.3; cursor: pointer;
}
/* A class rule setting `display` outranks the browser's own `[hidden]` rule,
   so without this the button and links stay PAINTED after the code hides them.
   Every rule above that sets `display` on a row item needs this line beside it. */
.cal-row-btn[hidden], .cal-row-link[hidden] { display: none; }
/* The one filled control on the row: this is the action, the links are
   references. */
.cal-row-btn {
  background: var(--caltech-orange); color: #fff; border: none;
  font-family: inherit;
}
.cal-row-btn:hover { filter: brightness(0.92); }
/* Outlined, so they read as secondary beside the filled button without
   needing a second colour. */
.cal-row-link {
  background: #fff; color: var(--caltech-orange);
  border: 1px solid var(--caltech-orange);
  text-decoration: none;
}
.cal-row-link:hover { background: #FFF3EA; }
@media (max-width: 600px) {
  /* The heading owns its own line so the controls wrap as a group under it
     rather than one orphan link trailing the title. */
  .schedule-head h2 { flex: 1 0 100%; margin-right: 0; }
}
.calendar-panel { font-size: 13px; }
.calendar-panel p { margin: 6px 0; line-height: 1.45; }
.cal-muted { color: #64748b; font-size: 12px; }
.cal-note { color: #334155; }
.cal-error { color: #b91c1c; }
.cal-families { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.cal-family {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px;
}
.cal-family label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cal-count { color: #64748b; }
.cal-family select { font-size: 12px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; }
.cal-report { background: #f8fafc; border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.cal-list-title { margin-bottom: 2px; }
.cal-list { margin: 2px 0 8px; padding-left: 20px; }
.cal-list li { margin: 2px 0; font-size: 12px; }
.cal-summary { font-weight: 600; }
.cal-actions { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
/* Each row: the control, then its note filling the rest of the line, so a
   long note wraps within its own column instead of under the button. */
.cal-actions > div { display: flex; align-items: center; gap: 10px; }
.cal-actions > div > span { flex: 1 1 0; min-width: 0; }
/* Sync is the primary action and carries the accent; Download .ics is the
   secondary one, outlined in the same colour so the pair reads as one family
   with one of them louder — the same filled/outlined split the heading row
   uses. A second hue would say they are different kinds of thing. */
.cal-actions button {
  flex: none; background: var(--caltech-orange); color: #fff;
  border: 1px solid var(--caltech-orange); padding: 6px 14px;
  border-radius: 4px; cursor: pointer;
}
.cal-actions button.cal-secondary { background: #fff; color: var(--caltech-orange); }
.cal-actions button:disabled { background: #94a3b8; border-color: #94a3b8; color: #fff; cursor: default; }
.cal-actions a { color: var(--caltech-orange); }
.cal-result:empty { display: none; }
@media (max-width: 600px) {
  .cal-family { flex-direction: column; align-items: flex-start; }
  .cal-actions > div { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- Requirements on a phone ----
   Up to 700px the Requirements list starts hidden behind one summary bar
   (#reqSummary) and opens only when tapped; .req-open on the sidebar is that
   state. The bar, the Hide button, the clear-filter button and the phone copy
   of the term-load note exist only inside this width. app.js decides "is this
   a phone?" by asking whether the bar is displayed, so 700px is written only
   here. */
.req-summary, .req-hide, .req-filter-clear, .misc-section.misc-phone { display: none; }
.courses-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.courses-head h2 { margin: 0; }
@media (max-width: 700px) {
  aside.sidebar { padding: 0; }
  .req-heading, #miscSection { display: none; }
  .req-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
    width: 100%; min-height: 44px; padding: 10px 16px;
    background: none; border: none; border-radius: 8px;
    font: inherit; font-size: 14px; color: inherit; text-align: left; cursor: pointer;
  }
  .req-summary-title { font-weight: 600; }
  .req-summary-counts { color: #475569; }
  .req-summary-warn { color: var(--warning-red); font-weight: 600; }
  /* A drawn chevron: the ▸ glyph renders at a few pixels in the system font. */
  .req-summary-caret {
    margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 2px solid #64748b; border-bottom: 2px solid #64748b;
    transform: rotate(-45deg); transition: transform 0.15s;
  }
  aside.sidebar.req-open .req-summary-caret { transform: rotate(45deg); }
  .req-panel { display: none; padding: 0 16px 16px; }
  aside.sidebar.req-open .req-panel { display: block; }
  .req-hide {
    display: block; width: 100%; min-height: 44px; margin-top: 10px;
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px;
    font: inherit; font-size: 13px; color: #1f2933; cursor: pointer;
  }
  .misc-section.misc-phone { display: block; margin: 0 0 12px; }
  .req-filter-clear:not([hidden]) {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; flex: none;
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 22px;
    font-size: 16px; color: #1f2933; cursor: pointer;
  }
  .courses-head { align-items: center; }
  /* The term note ("FA2026-27 (official)") wraps onto its own line under the
     term buttons (which take the whole row, below) instead of being squeezed
     into a sliver beside them that ran 8px past the edge. */
  .term-bar { flex-wrap: wrap; row-gap: 4px; }
  /* "Range: 36–48u  adviser approval  dean approval" is one row that cannot
     wrap, and at 360px it ran 3px past the edge. */
  .units-rule { flex-wrap: wrap; row-gap: 4px; }
  /* The three term buttons share one row in equal thirds, each label free to
     break between season and year; left to size themselves they ran 1px past
     the edge at 320px. */
  .term-selector { flex: 1 1 100%; min-width: 0; }
  .term-btn {
    flex: 1 1 0; min-width: 0; justify-content: center; flex-wrap: wrap;
    padding: 6px 8px; border-radius: 14px; text-align: center; row-gap: 2px;
  }
}