/* ======================================================================== *
 * majors-widget.css — styling for the interactive "Popularity vs. Pay"
 * scatter on the Top-100-Majors blog post.
 *
 * Design intent: feel NATIVE to the RezScore blog (base_blog.html). The post's
 * other charts are PNGs that sit in a rounded white card and BREAK OUT of the
 * 720px (.rz-narrow) text column to min(100vw - 48px, 1032px). This widget is
 * the hero, so it does the same: same card frame, same soft shadow, same break
 * out so it reads as the dominant asset on the page.
 *
 * The brand palette below is defined as custom properties on the widget root
 * so the JS-drawn canvas and the HTML overlay (popup, tentpole labels) share
 * one source of truth. These are the exact values specified for this widget.
 * Everything is scoped under `.majors-widget` so it can never touch site chrome.
 * ======================================================================== */

.majors-widget {
  /* ---- Brand palette (exact spec values) ---- */
  --mw-ink:        #1a1a2e;   /* darkest text / axis lines              */
  --mw-slate:      #3F547F;   /* brand navy — title, labels, popup name */
  --mw-orange:     #F58735;   /* brand orange — accents                 */
  --mw-coral:      #e94f64;   /* the dots                               */
  --mw-teal:       #16a3b8;   /* secondary accent                       */
  --mw-grid:       #e7e7ef;   /* gridlines                              */
  --mw-faint:      #8a8fa3;   /* faint text (ticks, credit, subtitle)   */
  --mw-card:       #ffffff;   /* card surface                           */

  /* ---- Trend colors ---- */
  --mw-up:    #1a8f4c;        /* green ▲ */
  --mw-down:  #d33a3a;        /* red ▼   */
  --mw-flat:  #8a8fa3;        /* grey –  */

  /* The widget is the page hero: break out of the 720px narrow column to the
   * same width the blog's data-viz images use (viewport minus the wrap's two
   * 24px gutters, capped to the 1032px wrap content width). Centered on the
   * column with translateX; never wider than the viewport, so no page scroll. */
  width: min(100vw - 48px, 1032px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 2.4rem auto 1.2rem;

  /* Card treatment matched to the blog's framed charts (.rz-body img). */
  background: var(--mw-card);
  border: 1px solid var(--mw-grid);
  border-radius: 12px;
  box-shadow: 0 22px 50px -34px rgba(63, 84, 127, .70),
              0 2px 6px -3px rgba(63, 84, 127, .22);
  padding: 26px 26px 18px;
  box-sizing: border-box;

  /* Inherit the page font (Open Sans / system). Do NOT import a font. */
  font-family: inherit;
  color: var(--mw-ink);
  -webkit-font-smoothing: antialiased;
  /* Killing text selection on the chrome avoids ugly highlight drags while
   * panning/tapping; the popup itself re-enables selection for its values. */
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 760px) {
  /* On mobile the breakout collapses to the column width — no horizontal
   * scroll, smaller padding. */
  .majors-widget {
    width: 100%;
    left: auto;
    transform: none;
    padding: 18px 14px 12px;
  }
}

/* ---- Header: title + subtitle + source credit ------------------------- */
.majors-widget .mw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.majors-widget .mw-titles { min-width: 0; }
.majors-widget .mw-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--mw-ink);
  margin: 0;
}
.majors-widget .mw-subtitle {
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mw-faint);
  margin: 4px 0 0;
}
.majors-widget .mw-credit {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--mw-faint);
  text-align: right;
  white-space: nowrap;
  padding-top: 3px;
}
@media (max-width: 560px) {
  .majors-widget .mw-head { flex-direction: column; gap: 4px; }
  .majors-widget .mw-credit { text-align: left; white-space: normal; }
}

/* ---- Plot area: canvas + absolutely-positioned HTML overlay ----------- *
 * The stage is position:relative so the overlay (popup + tentpole labels)
 * can be absolutely positioned in CSS pixels over the canvas. The canvas is
 * sized in CSS px via width/height:100%/auto-from-JS; JS sets the backing
 * store to cssWidth * devicePixelRatio for retina sharpness. */
.majors-widget .mw-stage {
  position: relative;
  width: 100%;
}
.majors-widget canvas.mw-canvas {
  display: block;
  width: 100%;
  height: auto;          /* JS sets explicit CSS height; this is a fallback */
  cursor: default;
  touch-action: pan-y;   /* let the page scroll vertically through the chart */
}

/* ---- Overlay layer (does NOT capture pointer events so the canvas below
 * receives hover/click; individual children re-enable as needed) -------- */
.majors-widget .mw-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;       /* clip any label that strays past the stage */
}

/* ---- Tentpole labels: permanent text next to ~6-8 notable dots -------- */
.majors-widget .mw-label {
  position: absolute;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mw-slate);
  white-space: nowrap;
  pointer-events: none;       /* never block dot hit-testing */
  /* A faint white halo so labels stay legible over gridlines/dots without a
   * heavy box. Multiple shadows = a cheap text outline. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(255,255,255,.9);
  transform: translateY(-50%);   /* vertically center on the dot row     */
}
.majors-widget .mw-label.mw-label--cs {
  color: var(--mw-coral);        /* the standout (Computer Science)       */
}

/* ---- Popup / tooltip --------------------------------------------------- */
.majors-widget .mw-popup {
  position: absolute;
  z-index: 5;
  min-width: 168px;
  max-width: 248px;
  background: var(--mw-card);
  border: 1px solid var(--mw-grid);
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(26, 26, 46, .28),
              0 2px 8px -3px rgba(26, 26, 46, .18);
  padding: 11px 13px 12px;
  pointer-events: none;       /* tooltip should never eat the next hover   */
  /* Fade-in: start hidden + slightly lifted, animate to visible. The .is-on
   * class is toggled by JS; opacity/transform transition gives the smooth,
   * non-janky feel. visibility avoids the popup capturing layout when off. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  box-sizing: border-box;
}
.majors-widget .mw-popup.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

.majors-widget .mw-popup .mw-pp-name {
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--mw-slate);
  margin: 0 0 7px;
  -webkit-user-select: text;
  user-select: text;
}

/* tidy two-column mini-layout: label on the left, value right */
.majors-widget .mw-popup .mw-pp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .82rem;
  line-height: 1.35;
  margin-top: 3px;
}
.majors-widget .mw-popup .mw-pp-label {
  color: var(--mw-faint);
  font-weight: 600;
  letter-spacing: .01em;
  flex: 0 0 auto;
}
.majors-widget .mw-popup .mw-pp-val {
  color: var(--mw-ink);
  font-weight: 700;
  text-align: right;
  -webkit-user-select: text;
  user-select: text;
}
.majors-widget .mw-popup .mw-pp-occ {
  display: block;
  font-weight: 600;
  color: var(--mw-faint);
  font-size: .76rem;
  margin-top: 1px;
}

/* trend arrow colors */
.majors-widget .mw-popup .mw-tr-up   { color: var(--mw-up); }
.majors-widget .mw-popup .mw-tr-down { color: var(--mw-down); }
.majors-widget .mw-popup .mw-tr-flat { color: var(--mw-flat); }

/* ---- Footer hint ------------------------------------------------------- */
.majors-widget .mw-foot {
  margin: 10px 2px 0;
  font-size: .76rem;
  color: var(--mw-faint);
  line-height: 1.4;
}
.majors-widget .mw-foot .mw-dot-key {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mw-coral);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--mw-grid);
  vertical-align: middle;
  margin: 0 5px 1px 0;
}