/* ===== Find-a-Course live search ===== */
/* the reveal animation leaves a persistent stacking context (will-change) on
   .stream-head and .stream-cols; raise the head so its search dropdown paints
   above the school grid that follows it in the DOM */
.stream-head{ position:relative; z-index:200; }
.course-search{ position:relative; z-index:200; }
.cs-suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 26px 54px -24px rgba(13,34,69,.45);
  max-height:380px; overflow-y:auto; z-index:500; padding:6px; display:none;
}
.cs-suggest.show{ display:block; }
.cs-item{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:11px; cursor:pointer; }
.cs-item:hover, .cs-item.active{ background:var(--pale-green); }
.cs-item .cs-name{ font-weight:600; color:var(--navy); font-size:15px; }
.cs-item .cs-school{ color:var(--muted); font-size:12px; }
.cs-item .cs-pills{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; max-width:55%; }
.cs-empty{ padding:16px; color:var(--muted); font-size:14px; }

/* result popup (inside the modal) */
.sw-result-school{ color:var(--green-dark); font-weight:700; font-size:14px; margin-top:26px; }
.sw-result-spec{ font-family:'aesthet-nova','Fraunces',serif; font-size:32px; color:var(--navy); margin-top:4px; }
.sw-rhead, .sw-rrow{ display:grid; grid-template-columns:220px 1fr 1fr auto; gap:16px; align-items:center; }
.sw-rhead{ margin-top:24px; padding:10px 4px; border-bottom:1px solid var(--line); }
.sw-rhead span{ font-size:13px; color:var(--muted); }
.sw-rrow{ padding:16px 4px; border-bottom:1px solid var(--line); }

/* ===== Pick-your-Stream modal widget ===== */
.sw-modal{
  position:fixed; inset:0; z-index:1200; display:none;
  align-items:flex-start; justify-content:center;
  padding:32px 20px; overflow-y:auto;
  background:rgba(13,34,69,.45); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .25s ease;
}
.sw-modal.is-open{ display:flex; opacity:1; }
.sw-panel{
  position:relative; width:100%; max-width:1240px;
  background:#fff; border-radius:26px;
  box-shadow:0 50px 120px -40px rgba(13,34,69,.6);
  padding:34px 40px 44px; min-height:60vh;
  transform:translateY(18px); transition:transform .3s cubic-bezier(.16,.84,.44,1);
}
.sw-modal.is-open .sw-panel{ transform:none; }
.sw-close{
  position:absolute; top:24px; right:28px;
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  font-weight:700; letter-spacing:.06em; font-size:13px; color:var(--navy);
}
.sw-close svg{ width:18px; height:18px; }

/* ---- header / toggle ---- */
.sw-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:26px; padding-right:90px; }
.sw-title{ font-family:'aesthet-nova','Fraunces',serif; font-weight:700; font-size:30px; color:var(--navy); }
/* apply view title isn't inside .sw-head, so give it its own clearance from the close button */
.sw-apply-title{ margin-top:26px; padding-right:90px; }
.sw-toggle-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.sw-toggle-lbl{ font-size:15px; color:var(--navy); }
.sw-toggle{ display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; background:#eef1f6; padding:9px 18px; border-radius:999px; }
.sw-switch{ width:52px; height:26px; border-radius:999px; background:#d7dde8; position:relative; transition:background .2s ease; flex:none; }
.sw-switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--green); transition:transform .25s ease; }
.sw-toggle.is-courses .sw-switch::after{ transform:translateX(26px); }

/* ---- program legend (grouped pills) ---- */
.sw-legend{ display:flex; gap:30px; flex-wrap:wrap; margin:6px 0 4px; }
.sw-legend-grp .lbl{ font-size:14px; color:var(--navy); margin-bottom:8px; }
.sw-legend-grp .pills{ display:flex; gap:10px; }

/* ---- pills ---- */
.sw-pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; border-radius:999px;
  padding:7px 16px; border:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:box-shadow .15s ease, transform .1s ease;
}
.sw-pill.is-selected{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.sw-pill:active{ transform:scale(.97); }
.sw-pill.static{ cursor:default; }

/* ---- specialization table (view 1) ---- */
.sw-table{ margin-top:18px; }
.sw-thead, .sw-row{
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 116px 96px 92px;
  align-items:center; gap:14px;
}
.sw-thead{ padding:10px 4px; border-bottom:1px solid var(--line); }
.sw-thead span{ font-size:13px; color:var(--muted); }
.sw-row{ padding:14px 4px; border-bottom:1px solid var(--line); min-height:60px; }
.sw-row .spec-name{ font-family:'aesthet-nova','Fraunces',serif; font-size:19px; color:var(--navy); }
.sw-row .pillset{ display:flex; gap:10px; flex-wrap:nowrap; }
.sw-cell{ font-size:14px; color:var(--navy); }
.sw-cell.muted{ color:var(--muted); }
.sw-apply{
  background:var(--navy); color:var(--green); border:none; border-radius:8px;
  font-weight:700; font-size:15px; padding:9px 22px; cursor:pointer; text-decoration:none;
  display:inline-block; transition:filter .2s ease;
}
.sw-apply:hover{ filter:brightness(1.18); }
.sw-detail-empty{ visibility:hidden; }

/* ---- courses view (view 2) ---- */
.sw-courses-top{ display:flex; gap:30px; flex-wrap:wrap; margin:18px 0 8px; }
.sw-tab.is-active{ outline:2px solid var(--navy); outline-offset:1px; }
.sw-courses-body{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-top:18px; }
.sw-speclist{ background:#f6f7fa; border-radius:16px; overflow:hidden; }
.sw-speclist .hd{ font-size:13px; color:var(--muted); padding:16px 24px 6px; }
.sw-specrow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--line);
  font-family:'aesthet-nova','Fraunces',serif; font-size:19px; color:var(--navy);
  cursor:pointer; transition:background .15s ease;
}
.sw-specrow:last-child{ border-bottom:none; }
.sw-specrow:hover{ background:#eef1f6; }
.sw-specrow .sw-apply{ opacity:0; pointer-events:none; transition:opacity .15s ease; padding:7px 18px; font-size:14px; }
.sw-specrow:hover .sw-apply{ opacity:1; pointer-events:auto; }
.sw-infocard{ background:#f1f3f7; border-radius:16px; padding:30px 32px; align-self:start; }
.sw-infocard h4{ color:var(--green); font-size:20px; font-weight:700; line-height:1.25; }
.sw-infocard .bar{ height:8px; background:var(--navy); border-radius:6px; margin:14px 0 24px; }
.sw-info-line{ display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; }
.sw-info-line .k{ color:var(--navy); font-size:15px; }
.sw-info-line .v{ color:var(--navy); font-weight:700; font-size:15px; text-align:right; }

/* ---- apply / interest form (view 3) ---- */
.sw-apply-grid{ display:grid; grid-template-columns:.85fr 1.15fr 1fr; gap:32px; margin-top:26px; align-items:start; }
.sw-col-lbl{ font-size:14px; color:var(--muted); margin-bottom:10px; }
.sw-coursecard{ background:#f1f3f7; border-radius:16px; padding:26px 28px; }
.sw-coursecard h3{ color:var(--green); font-family:'aesthet-nova','Fraunces',serif; font-size:24px; line-height:1.2; }
.sw-coursecard .bar{ height:2px; background:var(--line); margin:16px 0 22px; }
.sw-coursecard .row{ display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sw-coursecard .k{ color:var(--navy); font-size:14px; }
.sw-coursecard .v{ color:var(--navy); font-weight:700; font-size:15px; }
.sw-note{ color:#2e9c43; font-size:12px; line-height:1.45; margin-top:16px; }
.sw-form{ background:#f6f7fa; border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px; }
.sw-form input, .sw-form select{
  width:100%; border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:14px 16px; font-size:14px; color:var(--ink); font-family:inherit; outline:none;
}
.sw-form input:focus, .sw-form select:focus{ border-color:var(--green); }
.sw-form .pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sw-consent{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between; margin-top:6px; gap:18px; }
.sw-consent label{ font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }
.sw-send{ background:var(--green); color:var(--navy); border:none; border-radius:12px; font-weight:700; font-size:18px; padding:14px 34px; cursor:pointer; flex:none; transition:filter .2s ease; }
.sw-send:hover{ filter:brightness(.96); }
.sw-send:disabled{ opacity:.6; cursor:default; }
.sw-success{ text-align:center; padding:30px 10px; }
.sw-success img{ height:46px; margin:0 auto 28px; }
.sw-success h3{ font-family:'aesthet-nova','Fraunces',serif; font-size:30px; color:var(--navy); }
.sw-success p{ color:var(--navy); font-size:18px; margin-top:10px; }
.sw-empty-state{ color:var(--muted); padding:40px 0; font-size:16px; }

@media (max-width:1000px){
  .sw-panel{ padding:26px 22px 34px; }
  .sw-thead{ display:none; }
  .sw-row{ grid-template-columns:1fr; gap:8px; min-height:0; padding:16px 4px; }
  .sw-courses-body{ grid-template-columns:1fr; }
  .sw-apply-grid{ grid-template-columns:1fr; }
  .sw-legend{ gap:18px; }
}

/* ---- mobile: stop pills from forcing horizontal scroll ---- */
@media (max-width:760px){
  .sw-modal{ padding:16px 10px; }
  .sw-panel{ padding:22px 16px 30px; border-radius:18px; overflow-x:hidden; }
  /* clear the CLOSE button: title starts well below it, full width */
  .sw-head{ padding-right:0; margin-top:54px; gap:14px; }
  .sw-title{ font-size:23px; }
  /* toggle: prominent grey pill, comfortable margin, left-aligned */
  .sw-toggle-wrap{ align-items:flex-start; width:100%; margin-top:4px; }
  .sw-toggle{ padding:11px 20px; font-size:15px; }
  /* hide the course-level legend/index on mobile (redundant with the pills in each row) */
  .sw-legend{ display:none; }
  .sw-table{ margin-top:6px; }

  /* pills wrap instead of overflowing the row */
  .sw-row .pillset{ flex-wrap:wrap; }
  .sw-legend{ gap:14px; }
  .sw-legend-grp .pills{ flex-wrap:wrap; gap:8px; }
  .sw-courses-top{ gap:16px; }

  /* search result popup: stack each course as a card, no fixed columns */
  .sw-rhead{ display:none; }
  .sw-rrow{
    grid-template-columns:1fr auto; gap:6px 12px;
    align-items:center; padding:14px 2px;
  }
  .sw-rrow > div:nth-child(1){ grid-column:1; grid-row:1; }       /* pill */
  .sw-rrow > div:nth-child(4){ grid-column:2; grid-row:1; }       /* apply */
  .sw-rrow > div:nth-child(2),
  .sw-rrow > div:nth-child(3){ grid-column:1 / -1; font-size:13px; }
  .sw-result-spec{ font-size:26px; }

  /* autocomplete pills already wrap; keep them tidy */
  .cs-item .cs-pills{ max-width:48%; }
  .cs-item{ gap:10px; padding:10px; }

  /* apply form: stack the consent checkbox and Send button vertically */
  .sw-consent{ flex-direction:column; align-items:stretch; gap:16px; }
  .sw-send{ width:100%; }
  /* apply title: clear the CLOSE button like the other views */
  .sw-apply-title{ margin-top:54px; padding-right:0; font-size:22px; }
}