/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

/**
 * Basic styling
 */
body {
  font: 300 16px/1.5 "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111;
  background-color: #fdfdfd;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  padding-top: 20px;
}

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
  border-top: 1px solid #8c8b8b;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
.highlight {
  margin-bottom: 15px; }

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle; }

/**
 * Figures
 */
figure > img {
  display: block; }

figcaption {
  font-size: 14px; }

/**
 * Lists
 */
ul, ol {
  margin-left: 30px; }

li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Headings
 */
h5, h6 {
  font-weight: 300; }

h1, h2, h3, h4 {
  font-weight: 600; }

/**
 * Links
 */
/* a {
  color: #2a7ae2;
  text-decoration: none; }
a:visited {
  color: #1756a9; }
a:hover {
  color: #111;
  text-decoration: underline; } */

/**
 * Blockquotes
 */
blockquote {
  color: #4a4a4a;
  border-left: 4px solid #e8e8e8;
  padding-left: 15px;
  font-size: 18px;
  letter-spacing: -1px;
  font-style: italic; }
blockquote > :last-child {
  margin-bottom: 0; }

/**
 * Code formatting
 */
pre, code {
  font-family: "Inconsolata", monospace;
  font-size: 100%;
  background-color: #f7f7f9;
}

code {
  padding: 1px 5px; }

pre {
  padding: 8px 12px;
  overflow-x: auto; }

/* When a <pre> follows text inside a list item, give it a line of breathing
   room so the code block doesn't crowd the sentence above it. */
li > pre,
li > p + pre {
  margin-top: 1em; }

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0; }


/**
 * Site header
 */
.site-header {
  border-top: 5px solid #424242;
  /* border-bottom: 1px solid #e8e8e8; */
  min-height: 56px;
  position: relative; }

/**
 * Shifting scrolling to section to account for header
 */
section {
  scroll-margin-top: 60px; }

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid #e8e8e8;
  margin: 20px 20px 50px 20px;
  padding: 30px 0; }

.cse-wordmark {
    width:260px;
    float:left;
}

.site-footer-right{
    float:right;
}

.site-header {
  border-bottom-style: none; }

.site-footer {
  padding: 10px 0;
}

/* Top Navigation Bar */

.navbar-inverse .navbar-brand {
  background-color: #0072b2;
  color: white;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #ffffff;
  background-color: #072136;
}

.navbar-inverse .navbar-nav > li > a {
  color: white; }

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #9599ac;
}

.navbar-right {
  background-color: #0072b2; }

.navbar-inverse .navbar-right > li > a:hover,
.navbar-inverse .navbar-right > li > a:focus {
  color: white; }

/* added to change dropdown menu hover background color */
.dropdown-menu > li > a:hover {
  background-image: none;
  background-color: #d7e5f0;
}

/* added to change dropdown menu active background color */
.dropdown-menu > .active > a {
  background-color: #485a69;
}

/* added to remove underlined links from navbar */
.navbar-header>a, .nav-item>a, .dropdown>a, .dropdown-menu>li>a, .navbar-nav>li>a {
  text-decoration: none;
}

/* Optional icon next to a navbar label (top-level or dropdown item).
   Sized relative to the surrounding text so the navbar height doesn't
   shift when icons are present. */
.navbar-icon {
  height: 1.1em;
  width: auto;
  vertical-align: -0.15em;
  margin-right: 6px;
}

#pagenav {
  background-color: #0072b2;
}

.indent::before {
  content: "\00a0\00a0\00a0\21A6\00a0";
}

.afterh {
    margin-top: 10px;
}

.aftersec {
    margin-top: 20px;
}

.stress {
  color: #7b0a00;
  font-weight: bold;
}

a, a.list-group-item {
  /*color: #0c71e0;*/
  color: #3344DD;
  text-decoration: underline dotted;
}

a:focus, a:active, a:hover, a.list-group-item:hover {
  color: #b81c00;
  text-decoration: underline;
}

.btn-default:hover {
  color: #b81c00;
  background-color: #d7e5f0;
}

.navbar-brand {
  /* font-family: 'Montserrat', sans-serif; */
  font-size: 1.3em;
}

h2 {
  margin-top: 20px;
}

.cse333-navbar {
  border-width: 0;

  padding-bottom: 5px;
  background: rgb(217,56,0);
  /* background: linear-gradient(90deg, rgba(217,56,0,1) 0%, rgba(254,131,0,1) 100%); */
  background: linear-gradient(90deg, #f16704 0%, #f3ce39 100%);
}

table.table>tbody>tr>td {
  vertical-align: middle;
}

.cse333-navbar-content {
  background: #424242;
}

.label-date {
  margin-right: 10px;
}

.announcement > .label-date {
  font-size: 0.9em;
}

.label-lec {
  background: #003366;
}

.label-sec {
  background-color: #006d77;
  color: #ffffff;
}

.label-exam {
  background: #5c2702;
}

.label-holiday {
  background-color: #053f27;
  color: #ffffff;
}

/* Badge colors for the assignment list page. Mirror the colored borders on
 * `.sched-assignment-link.{ex,hw}` so the badge in the date column and the
 * "Due" button in the topic column read as the same family. */
.label-ex {
  background-color: #6b6200;
  color: #ffffff;
}

.label-hw {
  background-color: #0072b2;
  color: #ffffff;
}

/* "Recommended" tag on the Environment Setup page. Sized like the schedule
 * date badges and given a muted (not bright) green, with a little space to
 * the left so it sits comfortably after the heading text. */
.label-recommended {
  margin-left: 8px;
  font-size: 65%;
  vertical-align: middle;
  background-color: #4a7c59;
  color: #ffffff;
}

/* Debug-preview gating (dev only). Content that would be filtered out of a
 * production build is rendered but tagged `.debug-only`; it stays hidden
 * until the floating debug toggle adds `debug-on` to <html>. In production
 * no `.debug-only` nodes exist, so this rule is inert. */
html:not(.debug-on) .debug-only {
  display: none !important;
}

/* Inverse of `.debug-only`: content that should only be visible in the
 * production-equivalent (toggle-off) view. When the dev debug toggle is on
 * we are previewing unreleased content, so these helper notes (e.g. the
 * "no assignments released yet" placeholder) get out of the way. In
 * production `debug-on` is never set, so these elements always show. */
html.debug-on .debug-hidden {
  display: none !important;
}

div.button-bar h4 {
  display: inline-block;
  margin-top: 0px;
  float: none;
  width: 50px;
  text-align: left;
}

/**
 * Styling for Course Staff
 */

.staff-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.staff-profile.panel {
  margin: 2px;
  width: 180px;
  height: 200px;
  text-align: center;
}

.staff-profile.panel h4 {
  font-size: 1.1em;
  margin-top: 5px;
  margin-bottom: 2px;
}

.staff-profile.panel h5 {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 2px;
}

.staff-profile.panel h5.staff-profile-extra {
  margin-top: 10px;
}

.staff-image {
  width: 80px;
  height: 80px;
}

.link-button {
  font-size: 1.0em;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: #0c71e0;
}

.link-icon {
  transform: scale(0.8) translateX(-5px);
  -webkit-transform: scale(0.8) translateX(-5px)
}

/**
 * Styling for Course Schedule
 */

.sched-header {
  font-weight: bold;
  padding: 5px;
  display: none;
}

@media (min-width: 768px) {
  .sched-header {
    display: block;
  }
}

/* "Jump to today" sits just under the schedule header row, right-aligned.
 * Styled as a quiet pill to match the slide/material links (transparent fill,
 * subtle border + tint on hover) rather than a heavy Bootstrap button. */
.sched-jump-today-bar {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0;
}

.sched-jump-today {
  background-color: transparent;
  color: #1f3fb8;
  border: 1px solid #c7d2dd;
  border-radius: 4px;
  padding: 3px 12px;
  font-size: 13px;
  cursor: pointer;
}

.sched-jump-today:hover,
.sched-jump-today:focus {
  background-color: #d7e5f0;
  color: #072136;
  border-color: #072136;
}

/* Brief highlight pulse on the row the "Jump to today" button lands on, so
 * it's obvious where the page scrolled to. */
.sched-day-today-flash {
  animation: schedTodayFlash 1.6s ease-out forwards;
}
@keyframes schedTodayFlash {
  0%   { box-shadow: 0 0 0 3px #ffd24d inset; }
  100% { box-shadow: 0 0 0 3px transparent inset; }
}

.sched-header > div {
  border-bottom: 2px solid #aaa;
  font-size: 18px;
}

.sched-day {
  margin-bottom: 3px;
  padding: 10px;
  /*
   * Reserve a 4px left stripe whose color is set per row-type below. This
   * (instead of swapping the whole row background) is what separates lec
   * vs sec vs exam vs holiday at a glance, while keeping the page calm.
   */
  border-left: 4px solid transparent;
  /* Offset scroll-into-view targets so they don't hide under the fixed
   * Bootstrap navbar (51px tall) when reached via "#lectures-06" links. */
  scroll-margin-top: 60px;
}

/* Soft yellow highlight when this row is the URL fragment target : gives
 * users arriving from a back-to-schedule link a visual anchor. */
.sched-day:target {
  outline: 1px solid #ffd24d;
  outline-offset: -2px;
  animation: schedRowTargetFade 1s ease-out 0.25s forwards;
}
@keyframes schedRowTargetFade {
  to { outline-color: transparent; }
}

.sched-day a {
  color: #1f3fb8;
  text-decoration: none;
}

.sched-day a:hover,
.sched-day a:focus {
  color: #8b0000;
  text-decoration: underline;
}

.sched-day.lec {
  background-color: #eef1f4;
  border-left-color: #003366;
}

.sched-day.sec {
  background-color: #eef3f3;
  border-left-color: #006d77;
}

.sched-day.exam,
.sched-day.holiday {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.sched-day.exam {
  background-color: #f3eeea;
  border-left-color: #5c2702;
}

.sched-day.holiday {
  background-color: #eef3ef;
  border-left-color: #053f27;
}

/* Row tints for the /assignments page. Same pale-tint-over-stripe pattern
 * as `.sched-day.lec` etc., picking the assignment-button accent colors so
 * the row, the badge, and the "Due" button visually match. */
.sched-day.ex {
  background-color: #fcfae8;
  border-left-color: #b3a400;
}

.sched-day.hw {
  background-color: #eaf3f9;
  border-left-color: #0072b2;
}

.sched-week {
  margin-bottom: 20px;
}

/*
 * "Week N" used to be a bold 18px line that competed with lecture titles.
 * Now it's a quieter uppercase tracker that reads as a section divider.
 */
.sched-week-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 18px 0 6px;
}

/* The first week's title follows the "Jump to today" bar, so drop its large
 * top margin to avoid a big gap between the button and the first week's row. */
.sched-jump-today-bar + section .sched-week-title {
  margin-top: 0;
}

.sched-topic-title {
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.1em;
}

.sched-topic-no-content {
  margin-top: 4px;
  font-size: 0.85em;
  color: #3f4244;
  font-style: italic;
}

.sched-topic-title-holiday {
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.1em;
  color: #053f27;
}

.sched-topic-materials {
  margin-top: 10px;
  margin-left: 25px;
}

/*
 * Code: list sits below the Slides line within the same materials block.
 * Give it the same 10px vertical rhythm the separate Materials block has,
 * so the gap after "Slides:" is consistent whether the next group is Code
 * (lectures) or Materials (sections). `:not(:first-child)` keeps a
 * code-only block (no preceding Slides) flush with the container top.
 */
.sched-topic-code:not(:first-child) {
  margin-top: 10px;
}

/*
 * Learning-objective bullet list rendered under the assignment title on
 * /assignments. Kept compact (smaller font, tighter line-height, muted
 * color) so it reads as a secondary annotation rather than competing with
 * the row title.
 */
.sched-objectives {
  margin: 4px 0 0 22px;
  padding-left: 0;
  font-size: 0.9em;
  line-height: 1.45;
  color: #495057;
}
.sched-objectives li {
  margin-bottom: 2px;
}

/*
 * The LEC / SEC / EXAM / HDAY badge sits above the formatted date in the
 * date column so the row's type registers first ("this is a lecture"),
 * then the date, then the topic title. Small bottom margin separates the
 * badge from the date line below it.
 */
.sched-date-badge {
  margin-bottom: 4px;
}

/*
 * Right-align the exercise / homework columns so chips line up vertically
 * across weeks. The columns are narrow (2-of-12) and most rows are empty,
 * so left-aligned chips floated against an ocean of whitespace; right-
 * aligning anchors them to the column edge and creates a vertical rail
 * for scanning.
 */
.sched-day .sched-assignment {
  text-align: right;
}

/*
 * The schedule page now uses a single merged "Assignment" column (exercises
 * + homeworks together). Left-align its chips so they sit next to the topic
 * instead of floating against the far-right edge of the wider column.
 */
.sched-day .sched-assign-merged {
  text-align: left;
}

/*
 * On /assignments the Solution column is the row's only chip column, so
 * we center its contents under the "SOLUTION" header instead of pinning
 * them to the right edge (which made the button float far from its
 * header label). The same class on the header h4 keeps the label and
 * the button vertically aligned.
 */
.sched-day .assignments-soln-col,
.sched-header .assignments-soln-col {
  text-align: center;
}

/*
 * Center the EXERCISES column under its header instead of right-aligning
 * (the default in `.sched-day .sched-assignment`). Listed after that
 * rule so equal-specificity selectors win on cascade order.
 */
.sched-day .sched-ex-col,
.sched-header .sched-ex-col {
  text-align: center;
}

.sched-material-link img {
  height: 13px;
  width: auto;
  margin-right: 4px;
  vertical-align: -2px;
}

/*
 * Inline group labels ("Slides:", "Code:", "Materials:") read as gray rather
 * than full black so the topic title leads and the links/chips stand out :
 * keeps the row calm without dropping the bold weight that groups them.
 */
.sched-topic-materials b,
.sched-topic-code b {
  color: #393b3e;
  font-size: 0.9em;
}

/* The Code: chips have a visible box (unlike the transparent slide/material
 * buttons), so the same 3px text gap reads as cramped against the label.
 * A little right-margin gives "Code:" the same breathing room. */
.sched-topic-code b {
  margin-right: 6px;
}

/*
 * Quieter "pill" style for slide / material links. The full Bootstrap
 * `.btn` chrome (border + heavy background + padding) overwhelmed the
 * surrounding text when several files were listed in a row. We keep
 * just enough affordance (light fill + subtle border on hover) to read
 * as clickable without competing with the row content.
 */
.sched-material-link.btn {
  background-color: transparent;
  color: #1f3fb8;
  border-color: transparent;
  padding: 2px 8px;
  font-weight: normal;
}

.sched-material-link.btn:hover,
.sched-material-link.btn:focus {
  background-color: #d7e5f0;
  color: #072136;
  border-color: #072136;
  text-decoration: none;
}

/*
 * Inline chips for the Code: list. The old rendering : comma-separated
 * underlined blue links : turned long lecture code lists (e.g. Lec 02 has
 * 11 entries) into a wall of blue text. Chips give each file a visible
 * boundary and de-emphasize the link styling, so the list reads as a set
 * of tappable badges rather than running prose. Folders (manifest entries
 * ending in `/`) get a warmer tint to distinguish from files without an
 * inline emoji.
 */
.sched-topic-code .sched-code-chip {
  display: inline-block;
  margin: 2px 3px 2px 0;
  padding: 0 6px;
  font-family: Inconsolata, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  background-color: #f4f6f8;
  color: #1f3fb8;
  border: 1px solid #cfd6da;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.6;
}

.sched-topic-code .sched-code-chip:hover,
.sched-topic-code .sched-code-chip:focus {
  background-color: #d7e5f0;
  border-color: #072136;
  color: #072136;
  text-decoration: none;
}

.sched-topic-code .sched-code-chip-dir {
  background-color: #fff7d6;
  border-color: #d9c97a;
  font-weight: 600;
}

.sched-topic-code .sched-code-chip-dir:hover,
.sched-topic-code .sched-code-chip-dir:focus {
  background-color: #f6e9a5;
  border-color: #856404;
}

/* Disabled assignment links - include attribute selector and override Bootstrap opacity */
.sched-assignment-link.disabled,
.sched-assignment-link[disabled] {
  background-color: #e0e0e0;
  color: #4a4a4a;
  border-color: #9e9e9e;
  pointer-events: none;
  text-decoration: none;
  /* Override Bootstrap opacity to preserve contrast */
  opacity: 1;
  filter: none;
}

.sched-assignment-link.hw {
  background-color: #d7e5f0;
  color: #072136;
  border-color: #072136;
}

/* Homework variant when disabled */
.sched-assignment-link.hw.disabled,
.sched-assignment-link.hw[disabled] {
  background-color: #bcd4e6;
  color: #072136;
  opacity: 1;
  filter: none;
  pointer-events: none;
  text-decoration: none;
}

/* Exercise-link variant. Mirrors `.hw` so /assignments and /schedule can
 * drive button color via a class instead of an inline `style` attribute. */
.sched-assignment-link.ex {
  background-color: #ffff99;
  color: #4a3a00;
  border-color: #b3a400;
}
.sched-assignment-link.ex.disabled,
.sched-assignment-link.ex[disabled] {
  background-color: #fff5b3;
  color: #4a3a00;
  opacity: 1;
  filter: none;
  pointer-events: none;
  text-decoration: none;
}

.event-list-empty {
  text-align: center;
  margin: 3em 0;
  color: #6c757d;
  font-size: 1.05em;
}


/**
 * Styling for Weekly Calendar
 */

.fc-event-container {
  overflow: wrap;
}

.fc-content {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.fc-exercise-unused {
  color: transparent;
}

.fc-title {
  font-weight: bold;
  font-size: 1em;
  height: 1.2em;
}

.fc-description {
  font-size: 0.8em;
  line-height: 0.8em;
  height: 1em;
}

.fc-location {
  margin-top: auto;
  font-size: 0.8em;
  line-height: 0.8em;
  height: 1em;
  text-align: right;
}

.fc-content-agenda-week {
  height: 100%;
}

.fc-content-agenda-week .fc-location {
  font-size: 0.7em;
}

.fc-content-agenda-week .fc-time {
  font-size: 0.8em;
}

.fc-content-agenda-week .fc-title {
  font-size: 0.8em;
}

.fc-content-exercise {
  height: 12px;
}

/* for link color contrast in calendar events */
.fc-description>a, .fc-location>a {
  color: #FDFDF2;
}

.red-text {
  color: #B30000;
}

.panel-heading h3 {
  margin: 0;
}

.announcement-list-group {
  margin-left: 0;
}

.practice-exam {
  display: inline-block;
  font-weight: bold;
  min-width: 120px;
}

.practice-exam::after {
  content: ":"
}

.announcement-collapse-toggle .show-text {
  display: none;
}

.announcement-collapse-toggle .hide-text {
  display: inline;
}

.announcement-collapse-toggle.collapsed .show-text {
  display: inline;
}

.announcement-collapse-toggle.collapsed .hide-text {
  display: none;
}

/*
 * Use this as needed to adjust the spacing between the menu items across the top.
 * To avoid wrapping, the menus and course title should fit within 768 pixels.
 */
.nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
}

/*
 * Used to hide the staff bios when we include them
 */
.staff-blurb-title, .staff-blurb-content {
    display: none;
}

/*
 * If the course title is long, uncomment and adjust the max-width to make it behave on a very narrow
 * display (such as a phone display) without wrapping.
 */
/*@media screen and (max-width: 400px) {
  .navbar-brand {
      width: calc(100% - 70px);
      overflow:hidden;
      white-space: nowrap;
  }
}*/

/* The following are used on certain pages for row headers */
.rowhead {
    font-weight: bold;
    display: inline-block;
	min-width: 100px;
}

.rowhead:after {
    display: inline-block;
    content: ":"
}

/* ===========================================================================
 * Section panel refresh
 * ---------------------------------------------------------------------------
 * Long content pages (exercise specs, homework specs, gitlab/debug/vim
 * guides) structure each section as
 *
 *   <section id="...">
 *     <div class="panel panel-default">
 *       <div class="panel-heading"><h2>Title</h2></div>
 *       <div class="panel-body"> ... body ... </div>
 *     </div>
 *   </section>
 *
 * Bootstrap 3's default ".panel-default" chrome : white card on white page,
 * 4px corners, drop shadow, gray title bar : reads as a circa-2014 admin
 * dashboard. The rules below keep the markup untouched but reframe each
 * section as quiet typography: a large dark heading sitting above a
 * full-width hairline border, with generous breathing room above each
 * section.
 *
 * Targets ".panel.panel-default" specifically so other ".panel" uses on the
 * site (.staff-profile.panel in the staff strip, plus any future plain
 * .panel) keep their Bootstrap defaults.
 *
 * Internal <hr> elements inside a panel-body are also softened : the
 * page-level gradient <hr> (defined far above) is too loud for sub-section
 * separators that already have an h3 below them; here they become a quiet
 * hairline.
 * =========================================================================== */
.panel.panel-default {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 40px 0 0 0;
}

/* Avoid stacking a 40px gap above the very first section on a page :
 * its breathing room from the <h1> page heading is already enough. */
.container > section:first-of-type > .panel.panel-default,
.container > .panel.panel-default:first-of-type {
  margin-top: 24px;
}

.panel.panel-default > .panel-heading {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 8px 0;
  margin: 0 0 18px 0;
  border-bottom: 1px solid #e2e2e2;
}

.panel.panel-default > .panel-heading > h2 {
  margin: 0;
  padding: 0;
  font-size: 1.6em;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.panel.panel-default > .panel-body {
  padding: 0;
}

/* Quiet internal <hr> : overrides the page-level gradient rule for
 * separators that live inside a section body. */
.panel.panel-default > .panel-body > hr,
.panel.panel-default > .panel-body section > hr {
  background: none;
  background-image: none;
  border: 0;
  border-top: 1px solid #ececec;
  height: 0;
  margin: 24px 0 18px 0;
}

/* h3 subsection headings inside a panel body. The legacy ".aftersec"
 * class adds 20px of top margin; that worked when an <hr> + gradient bar
 * sat above it, but the new quiet hairline already provides separation,
 * so collapse the extra space when the h3 directly follows an <hr>. */
.panel.panel-default > .panel-body hr + h3.aftersec,
.panel.panel-default > .panel-body section > hr + h3.aftersec {
  margin-top: 0;
}

/* Promote panel-body h3 typography so the hierarchy reads h2 (panel
 * heading) -> h3 (sub-section) -> h4 (sub-sub) without sub-sections
 * collapsing into the body text. */
.panel.panel-default > .panel-body h3,
.panel.panel-default > .panel-body section h3 {
  font-size: 1.3em;
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 12px;
}

/* h4 sub-sub-section headings inside a panel body. Bootstrap's default
 * 10px top margin makes consecutive h4 sub-points feel cramped against
 * the preceding paragraph or list. Give them generous breathing room so
 * they read as distinct sub-headers (matching the rhythm of the
 * resources/gitlab guide). */
.panel.panel-default > .panel-body h4,
.panel.panel-default > .panel-body section h4 {
  margin-top: 26px;
  margin-bottom: 10px;
  font-size: 1.1em;
  font-weight: 600;
  color: #2a2a2a;
}

/* Suppress the top margin on the FIRST h4 in a panel-body or
 * sub-section -- the surrounding heading/hr already provides
 * separation. */
.panel.panel-default > .panel-body > h4:first-child,
.panel.panel-default > .panel-body > section > h4:first-child,
.panel.panel-default > .panel-body h3 + h4,
.panel.panel-default > .panel-body section > h3 + h4 {
  margin-top: 12px;
}

/* ===========================================================================
 * Exercise / Homework overview block
 * ---------------------------------------------------------------------------
 * Compact "Goals" overview that sits directly under the staff-profile (Due
 * + Difficulty Rating) block at the top of each spec page. Replaces the
 * heavier ".panel.panel-default > h2 Goals" treatment so that the eye
 * lands on the first major section heading (Background or Problem
 * Description) without first wading through a chrome-heavy intro card.
 *
 * Renders as: a small inline "Goals:" label followed by a quiet bullet
 * list, slightly smaller and lighter than body text so it reads as a
 * scannable summary rather than a section in its own right.
 * =========================================================================== */
.ex-overview {
  margin: 20px 0 0 0;
  padding: 14px 18px 14px 18px;
  background: #fafafa;
  border-left: 3px solid #0072b2;
  border-radius: 2px;
}

.ex-overview-label {
  display: block;
  font-weight: 600;
  color: #333;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ex-overview ul {
  margin: 0;
  padding-left: 20px;
  color: #444;
  font-size: 0.95em;
  line-height: 1.55;
}

.ex-overview ul > li {
  margin-bottom: 2px;
}

.ex-overview ul > li:last-child {
  margin-bottom: 0;
}