/* ============================================================
   CIRKLED IN — STUDENT WELCOME GUIDE  (drop-in styles)
   ------------------------------------------------------------
   Layered on top of Bootstrap 4.5 (loaded in the HTML) — Bootstrap
   provides the responsive reboot/grid; these rules carry the brand.
   COLLISION SAFETY (for the main repo):
     - Every custom class      is prefixed  wg-
     - Every custom CSS var     is prefixed  --wg-
     - Every @keyframes name    is prefixed  wg-
     - Every DOM id             is prefixed  wg-   (see markup / JS)
   Assets are referenced by file path — NO base64 image encoding.
   Mobile-first friendly: the phone layout is handled in the
   @media block at the bottom (rail on top, single column, 16px
   inputs so iOS doesn't zoom, footer buttons stack).
   ============================================================ */

:root{
  --wg-font-display:'Sora',sans-serif; --wg-font-body:'DM Sans',sans-serif;
  --wg-blue:#185FA5; --wg-blue-700:#124d87; --wg-navy:#0A1628; --wg-navy-3:#1B3A6B;
  --wg-sky:#0094DE; --wg-gold:#F5A623; --wg-gold-dark:#d98e10;
  --wg-fg-1:#0F172A; --wg-fg-2:#334155; --wg-fg-3:#64748B; --wg-fg-muted:#3c3f43;
  --wg-bg-2:#F8FAFC; --wg-bg-3:#F1F5F9; --wg-tint-blue:#E8F3FF; --wg-tint-blue-2:#F2F8FE; --wg-tint-yellow:#FFF6E0;
  --wg-border:#E2E8F0; --wg-border-strong:#CBD5E1; --wg-border-blue:#B6D8F5; --wg-danger:#DC2626;
  --wg-r-sm:8px; --wg-r-md:12px; --wg-r-lg:20px; --wg-r-xl:28px; --wg-r-pill:10px;
  --wg-sh-xs:0 1px 2px rgba(15,23,42,.06); --wg-sh-gold:0 6px 18px rgba(245,166,35,.35); --wg-sh-lg:0 18px 44px rgba(4,31,96,.22);
  --wg-gradient:linear-gradient(90deg,#0094DE,#185FA5);
  --wg-gradient-deep:linear-gradient(150deg,#0A1628,#124d87 55%,#185FA5);
  --wg-cat-academics:#185FA5; --wg-cat-leadership:#8f6fe0; --wg-cat-projects:#2bb24c; --wg-cat-sports:#12a594;
  --wg-gradient-hero: linear-gradient(135deg, #0094DE, #185FA5 45%, #0A1628);
}

/* base — scoped so Bootstrap's reboot doesn't fight the design */
body{font-family:var(--wg-font-body);background:var(--wg-bg-2);color:var(--wg-fg-1);-webkit-font-smoothing:antialiased}
.wg-page a{color:var(--wg-blue);text-decoration:none;font-weight:600}
.wg-page a:hover{color:var(--wg-blue-700);text-decoration:underline}
img{max-width:100%;height:auto}
/* ---- placeholder chrome (delete when dropping into your app) ---- */
.wg-ph{border:2px dashed var(--wg-border-strong);background:repeating-linear-gradient(-45deg,#fff,#fff 12px,#f6f8fb 12px,#f6f8fb 24px);color:var(--wg-fg-3);font-family:var(--wg-font-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;display:flex;align-items:center;justify-content:center}
.wg-ph-header{height:68px}
.wg-ph-footer{height:120px}

.wg-page{
  min-height:calc(100vh - 68px - 120px);
  padding:22px 20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(24,95,165,.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(245,166,35,.12), transparent 30%),
    linear-gradient(180deg,#f7fbff 0%,#eef4fb 100%);
}
.wg-guide-modal{
  padding:22px 20px;
}
.wg-guide-modal .modal-dialog{
  width:min(1120px,100%);
  max-width:none;
  margin:0 auto;
}
.wg-guide-modal .modal-content{
  border:none;
  background:transparent;
  box-shadow:none;
  position:relative;
  overflow:visible;
}
.wg-card{
  width:100%;
  height:min(90vh,760px);
  background:#fff;
  border-radius:var(--wg-r-lg);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(4,31,96,.24);
  display:flex;
  position:relative;
  z-index:1;
}

/* rail */
.wg-rail{width:300px;flex:none;background:var(--wg-gradient-deep);color:#fff;padding:28px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.wg-rail-bg{position:absolute;inset:0;background:url('https://d2zogq81rfgh3u.cloudfront.net/cirkledin/landing-page/ci_brand_bg-large.png') center/cover;opacity:.14}
.wg-rail-in{position:relative;display:flex;flex-direction:column;height:100%}
.wg-rail .wg-logo-img{height:auto;width:auto;display:block;margin-bottom:14px}
.wg-rail .wg-kick{font-size:13px;opacity:.82;display:flex;align-items:center;gap:6px;margin-bottom:22px}
.wg-steplist{flex:1}
.wg-rstep{display:flex;gap:13px}
.wg-rstep .wg-col{display:flex;flex-direction:column;align-items:center}
.wg-rstep .wg-dot{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--wg-font-display);font-weight:800;font-size:13px;border:2px solid rgba(255,255,255,.32);color:rgba(255,255,255,.65)}
.wg-rstep .wg-line{width:2px;flex:1;min-height:14px;background:rgba(255,255,255,.18);margin:3px 0}
.wg-rstep .wg-nm{padding:5px 0 12px;font-family:var(--wg-font-display);font-weight:600;font-size:14px;color:rgba(255,255,255,.6)}
.wg-rstep.wg-cur .wg-dot{border-color:#fff;background:#fff;color:var(--wg-blue-700)}
.wg-rstep.wg-cur .wg-nm{font-weight:800;color:#fff}
.wg-rstep.wg-done .wg-dot{border-color:var(--wg-gold);background:var(--wg-gold);color:var(--wg-navy)}
.wg-rstep.wg-done .wg-line{background:var(--wg-gold)}
.wg-rstep.wg-done .wg-nm{color:#fff;cursor:pointer}
.wg-prog{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--wg-r-lg);padding:16px;margin-top:14px}
.wg-prog .wg-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.wg-prog .wg-lb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.wg-prog .wg-pct{font-family:var(--wg-font-display);font-size:18px;color:var(--wg-gold)}
.wg-prog .wg-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.wg-prog .wg-fill{height:100%;background:linear-gradient(90deg,#F5A623,#FAD02C);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.wg-prog .wg-mot{font-size:12.5px;margin-top:9px;opacity:.9;font-weight:600}

/* panel */
.wg-panel{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.wg-phead{padding:clamp(14px,2.4vw,18px) clamp(20px,3.4vw,34px) 12px;flex:none}
.wg-eyebrow{font-size:11.5px;font-family:var(--wg-font-display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wg-sky);margin-bottom:8px}
.wg-phead h2{font-family:var(--wg-font-display);font-weight:800;font-size:clamp(20px,2.6vw,23px);color:var(--wg-navy-3);letter-spacing:-.02em;margin:0 0 6px}
.wg-phead p{margin:0;color:var(--wg-fg-2);font-size:14px;line-height:1.45;max-width:580px}
.wg-scroll{flex:1;overflow-y:auto;padding:4px clamp(20px,3.4vw,34px) 16px}
.wg-scroll::-webkit-scrollbar{width:9px}
.wg-scroll::-webkit-scrollbar-thumb{background:var(--wg-border-strong);border-radius:99px;border:2px solid #fff}
.wg-foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(20px,3.4vw,34px);border-top:1px solid var(--wg-border)}

.wg-fadein{animation:wg-rise .34s ease both}

/* form controls */
.wg-field{margin-bottom:12px}
.wg-check-line{margin:-2px 0 12px}
.wg-check-line .wg-cb{font-size:13px;color:var(--wg-fg-2)}
label.wg-lb{display:block;font-family:var(--wg-font-display);font-size:13px;font-weight:700;color:var(--wg-navy-3);letter-spacing:-.01em;margin-bottom:4px}
.wg-req{color:var(--wg-danger)}
/* height (not min-height): a fixed box so every plain input/native-select lines
   up exactly with select2's own fixed-height single/multi selection boxes below
   — a min-height let font-metric rounding drift a px or two off select2's 42px,
   which is what made the phone-number input and the country-code select2
   dropdown not quite match. */
.wg-in{width:100%;padding:10px 13px;border:1px solid var(--wg-border);border-radius:var(--wg-r-sm);font-family:var(--wg-font-body);font-size:14px;height:42px;color:var(--wg-fg-1);background:#fff;outline:none;transition:border-color .16s,box-shadow .16s}
.wg-in:focus{border-color:var(--wg-blue);box-shadow:0 0 0 3px rgba(24,95,165,.15)}
select.wg-in:invalid,select.wg-in.wg-ph{color:var(--wg-fg-muted)}
.wg-in.wg-bad{border-color:var(--wg-danger)}
/* Month + Year pair shown where <input type="month"> has no native picker
   (Safari, Firefox) — see monthSelectField in new-welcome-wizard.js. The
   month name is the wider of the two, so it gets the larger share. */
.wg-mrow{display:flex;gap:8px}
.wg-mrow>select.wg-in{flex:1 1 0;min-width:0}
.wg-mrow>select.wg-in:first-child{flex:1.4 1 0}
.wg-in:disabled{background:var(--wg-bg-3);color:var(--wg-fg-muted);cursor:not-allowed;border-color:var(--wg-border)}
.wg-in,.wg-in option{text-transform:none}
.wg-hint{font-size:11.5px;color:var(--wg-fg-3);margin-top:5px}
/* phone country code — fixed width so the row does not reflow when select2 loads */
.wg-phone-cc{flex:none;width:118px}
.wg-phone-cc .select2-container{width:100%!important}
.wg-phone-cc>select.wg-in{width:100%;padding-right:6px} /* native fallback: no select2 */
/* address autocomplete — wraps the input only, so the list opens directly under it */
.wg-ac{position:relative}
.wg-ac-list{position:absolute;top:calc(100% + 4px);left:0;width:100%;z-index:1200;background:#fff;border:1px solid var(--wg-border);border-radius:var(--wg-r-sm);box-shadow:var(--wg-sh-lg);max-height:232px;overflow-y:auto;padding:4px}
.wg-ac-item{padding:8px 10px;border-radius:6px;font-size:13.5px;line-height:1.35;color:var(--wg-fg-2);cursor:pointer}
.wg-ac-item:hover,.wg-ac-item.wg-on{background:var(--wg-tint-blue);color:var(--wg-blue-700);font-weight:600}
.wg-ac-note{padding:8px 10px;font-size:12.5px;color:var(--wg-fg-3)}
.wg-err{margin-top:5px;font-size:12px;color:var(--wg-danger);font-weight:600}
.wg-cb{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--wg-fg-2);font-weight:500;margin:2px 0}
.wg-cb input{width:17px;height:17px;accent-color:var(--wg-blue)}
.wg-radio{display:flex;gap:20px;flex-wrap:wrap;margin-top:2px}
.wg-radio label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px;color:var(--wg-fg-2);font-weight:600}
.wg-radio input{width:16px;height:16px;accent-color:var(--wg-blue)}
.wg-softbox{background:var(--wg-bg-2);border-radius:var(--wg-r-md);padding:14px 16px}
.wg-schoolbar{display:flex;align-items:center;gap:11px;background:var(--wg-tint-blue-2);border:1px solid var(--wg-border-blue);border-radius:var(--wg-r-md);padding:11px 15px;font-size:13.5px;color:var(--wg-fg-2);margin-bottom:16px}
.wg-linkbtn{background:none;border:none;padding:0;font-family:var(--wg-font-body);font-weight:700;font-size:13px;color:var(--wg-blue);cursor:pointer}
.wg-linkbtn:hover{color:var(--wg-blue-700);text-decoration:underline}
.wg-editbox{background:var(--wg-tint-blue-2);border:1px solid var(--wg-border-blue);border-radius:var(--wg-r-md);padding:16px 16px 14px;margin-bottom:16px}
.wg-editbox-h{font-family:var(--wg-font-display);font-weight:800;font-size:14px;color:var(--wg-blue-700);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.wg-divlabel{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.wg-divlabel span{font-family:var(--wg-font-display);font-weight:800;font-size:12.5px;color:var(--wg-fg-3);letter-spacing:.04em;text-transform:uppercase}
.wg-divlabel i{flex:1;height:1px;background:var(--wg-border)}

/* adder card */
.wg-adder{background:var(--wg-tint-blue-2);border:1px solid var(--wg-border-blue);border-radius:var(--wg-r-lg);padding:18px;margin-top:4px;position:relative}
.wg-adder h4{font-family:var(--wg-font-display);font-weight:800;font-size:14px;color:var(--wg-blue-700);margin:0 0 12px}
.wg-addrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.wg-addrow .wg-field{flex:1 1 180px;margin-bottom:0;max-width:50%}
.wg-addrow .wg-field.wg-sm{flex:0 1 110px}
.wg-addbtn{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--wg-gold);color:var(--wg-navy);font-family:var(--wg-font-display);font-weight:800;font-size:14px;border:none;border-radius:var(--wg-r-sm);padding:12px 20px;cursor:pointer;box-shadow:var(--wg-sh-gold);animation:wg-addNudge 3.2s ease-in-out infinite}

.wg-tabs2{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.wg-tab2{padding:9px 18px;border-radius:var(--wg-r-sm);border:1.5px solid var(--wg-border-strong);cursor:pointer;font-family:var(--wg-font-display);font-weight:800;font-size:13.5px;background:#fff;color:var(--wg-fg-3);transition:.15s}
.wg-tab2:hover{border-color:var(--wg-border-blue);color:var(--wg-blue)}
.wg-tab2.wg-on{background:var(--wg-blue);color:#fff;border-color:var(--wg-blue);box-shadow:0 2px 6px rgba(24,95,165,.3)}
.wg-seg{display:flex;gap:5px;background:#fff;border:1.5px solid var(--wg-border-strong);border-radius:10px;padding:4px;margin-bottom:14px;max-width:280px}
.wg-seg button{flex:1;padding:9px 14px;border-radius:7px;border:none;cursor:pointer;font-family:var(--wg-font-display);font-weight:800;font-size:13.5px;background:transparent;color:var(--wg-fg-3);transition:.15s}
.wg-seg button.wg-on{background:var(--wg-blue);color:#fff;box-shadow:0 2px 6px rgba(24,95,165,.3)}
.wg-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.wg-chip{display:inline-flex;align-items:center;gap:8px;color:#fff;border-radius:var(--wg-r-pill);padding:7px 8px 7px 14px;font-size:13px;font-weight:700}
.wg-chip button{border:none;background:rgba(255,255,255,.28);color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;font-size:12px;line-height:1}
/* program + majors chip: two stacked lines instead of one run-on "Program · a, b, c" */
.wg-chip-major{align-items:flex-start;border-radius:var(--wg-r-md);padding:10px 10px 10px 14px;max-width:100%;min-width:0}
.wg-chip-major button{flex:none;margin-top:2px}
.wg-chip-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.wg-chip-program{font-weight:800}
.wg-chip-majors{font-weight:600;font-size:12px;color:rgba(255,255,255,.85)}

/* colleges */
.wg-colsec{margin-bottom:22px}
.wg-colsec .wg-h{font-family:var(--wg-font-display);font-weight:800;font-size:14px;color:var(--wg-navy-3);border-bottom:2px solid var(--wg-gold);display:inline-block;padding-bottom:4px;margin-bottom:14px}
.wg-colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.wg-colitem{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--wg-r-md);cursor:pointer;border:1.5px solid var(--wg-border);background:#fff;transition:.15s}
.wg-colitem .wg-box{width:20px;height:20px;border-radius:5px;flex:none;border:2px solid var(--wg-border-strong);background:#fff;display:grid;place-items:center;color:#fff;font-size:12px}
.wg-colitem .wg-nm{font-size:13.5px;font-weight:500;color:var(--wg-fg-1);text-decoration:none}
.wg-colitem .wg-nm:hover{text-decoration:underline}
.wg-colitem.wg-on{border-color:var(--wg-border-blue);background:var(--wg-tint-blue)}
.wg-colitem.wg-on .wg-box{border-color:var(--wg-blue);background:var(--wg-blue)}
.wg-colitem.wg-on .wg-nm{font-weight:700;color:var(--wg-blue-700)}
.wg-pgrid{display:grid; grid-template-columns: repeat(2, 1fr);gap:12px}
.wg-pcard{border:1px solid var(--wg-border);border-radius:var(--wg-r-lg);padding:16px;box-shadow:var(--wg-sh-xs); display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wg-pcard b{font-family:var(--wg-font-display);color:var(--wg-blue-700)}
.wg-pcard p{font-size:12.5px;color:var(--wg-fg-3);margin:4px 0 12px }
.wg-pcard button{background:var(--wg-navy-3);color:#fff;border:none;border-radius:var(--wg-r-sm);padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer; margin-top:auto;}

/* select2 */
.wg-guide-modal .select2-container{width:100%!important}
.wg-guide-modal .select2-container--default .select2-selection--single{
  height:42px;
  border:1px solid var(--wg-border);
  border-radius:var(--wg-r-sm);
  display:flex;
  align-items:center;
  padding:0 13px;
  outline:none;
}
.wg-guide-modal .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--wg-fg-1);
  line-height:40px;
  padding-left:0;
  padding-right:22px;
  font-family:var(--wg-font-body);
  font-size:14px;
  font-weight: 600;
}
/* top:50%/translateY centers the caret regardless of the box's actual height,
   instead of the select2 vendor default's fixed top offset (tuned for its own
   28px default), which drifted off-center once we set our own 42px/46px
   heights above. */
.wg-guide-modal .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:20px;
  top:50%;
  right:7px;
  transform:translateY(-50%);
}
.wg-guide-modal .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--wg-blue);
  box-shadow:0 0 0 3px rgba(24,95,165,.15);
}
.wg-guide-modal .select2-dropdown{
  border-color:var(--wg-border-strong);
  box-shadow:0 18px 44px rgba(4,31,96,.18);
}
.wg-guide-modal .select2-results__option{
  font-size:14px;
}
.wg-guide-modal .select2-results__option--highlighted[aria-selected]{
  background:var(--wg-blue);
}

/* phone country-code dropdown — dropdownAutoWidth (see initSelect2Widgets)
   sizes it to the longest country name, which can overflow past the modal's
   edge or off-screen on narrow viewports; cap the width and clip the text
   instead so it always stays inside the wizard. */
.wg-guide-modal .wg-s2-country-dd{
  width:280px!important;
  max-width:calc(100vw - 32px)!important;
}
.wg-guide-modal .wg-s2-country-dd .select2-results__option{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Multi-select appearance: match single-select inputs and hide chips. Height
   was 48px here vs the single-selection's 42px above — the mismatch behind
   "Program" (single) sitting shorter than "Major" (multi) in the same row. */
.wg-guide-modal .select2-container--default .select2-selection--multiple{
  position:relative;
  height:42px;
  border:1px solid var(--wg-border);
  border-radius:var(--wg-r-sm);
  display:flex;
  align-items:center;
  padding:0 13px; /* match single-select */
  background:#fff;
}
.wg-guide-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  line-height:40px;
  color:var(--wg-fg-muted);
  font-family:var(--wg-font-body);
  font-size:14px;
  padding-left:0;
  padding-right:16px; /* room for the caret so long text doesn't run under it */
  margin-bottom:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
/* hide the default choice chips so our "N selected" summary is the only visible text */
.wg-guide-modal .select2-container--default .select2-selection--multiple .select2-selection__choice{
  display:none !important;
}
/* placeholder styling when no values selected (use s2-specific class to avoid wg-ph uppercase) */
.wg-guide-modal .select2-selection__rendered.wg-s2-ph{ color:var(--wg-fg-muted); text-transform:none; font-weight:600; }

/* disabled select (multi: "Intended major" before a program is picked; single:
   "Position" before a sport is picked) */
.wg-guide-modal .select2-container--disabled .select2-selection--multiple,
.wg-guide-modal .select2-container--disabled .select2-selection--single{
  background:var(--wg-bg-3);
  cursor:not-allowed;
}

/* caret for multi-select to match single-select's dropdown arrow — same
   border-width/border-color numbers as select2's own vendor arrow
   (.select2-selection--single .select2-selection__arrow b in select2.min.css),
   since the single-select doesn't override that shape/color, only its position. */
.wg-guide-modal .select2-container--default .select2-selection--multiple::after{
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #888 transparent transparent transparent;
  pointer-events: none;
}

/* done */
.wg-doneview{flex:1;position:relative;background:var(--wg-gradient-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;text-align:center;overflow:hidden}
.wg-doneview .wg-badge{width:92px;height:92px;border-radius:50%;background:var(--wg-gold);display:grid;place-items:center;margin:0 auto 22px;box-shadow:var(--wg-sh-gold);animation:wg-pop .4s cubic-bezier(.2,.8,.2,1)}
.wg-doneview h2{font-family:var(--wg-font-display);font-weight:800;font-size:32px;letter-spacing:-.02em;margin:0 0 10px;color: #fff;}
.wg-doneview p{font-size:16px;line-height:1.6;opacity:.92;margin:0 0 10px}
.wg-doneview .wg-gold{color:var(--wg-gold)}

/* buttons */
.wg-btn{font-family:var(--wg-font-display);font-weight:800;border:none;cursor:pointer;border-radius:var(--wg-r-sm);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-size:14px;letter-spacing:-.01em;transition:transform .12s,filter .16s}
.wg-btn.wg-lg{padding:14px 26px;font-size:15.5px}
.wg-btn-gold{background:var(--wg-gold);color:var(--wg-navy);box-shadow:var(--wg-sh-gold)}
.wg-btn-blue{background:var(--wg-blue);color:#fff;box-shadow:0 4px 14px rgba(24,95,165,.22)}
.wg-btn-ghost{background:#fff;color:var(--wg-blue);border:1.5px solid var(--wg-border-blue)}
.wg-btn:hover{filter:brightness(.96)} .wg-btn:active{transform:scale(.98)}
.wg-btn:disabled{cursor:default;filter:none}
/* moving-dots "still working" cue next to "Saving" on the next/finish button */
.wg-dots{display:inline-flex;gap:3px}
.wg-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;animation:wg-dotPulse 1.1s infinite ease-in-out}
.wg-dots span:nth-child(2){animation-delay:.15s}
.wg-dots span:nth-child(3){animation-delay:.3s}
@keyframes wg-dotPulse{0%,80%,100%{opacity:.35;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.wg-iconbtn{position:absolute;top:16px;right:16px;z-index:5;width:34px;height:34px;border-radius:50%;border:none;background:var(--wg-bg-3);cursor:pointer;display:grid;place-items:center}

.wg-hidden{display:none!important}

/* ---- state-mismatch popup ---- */
.wg-mm{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,22,40,.55);backdrop-filter:blur(3px);animation:wg-mmfade .2s ease both}
.wg-mm-card{position:relative;width:min(460px,100%);max-height:94%;overflow-y:auto;background:#fff;border-radius:var(--wg-r-lg);box-shadow:0 24px 70px rgba(10,22,40,.4);animation:wg-pop .28s cubic-bezier(.2,.8,.2,1) both}
.wg-mm-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;background:var(--wg-bg-2);color:var(--wg-fg-3);cursor:pointer;font-size:13px;z-index:2}
.wg-mm-x:hover{background:#eef2f7;color:var(--wg-fg-1)}
.wg-mm-top{position:relative;padding:22px 26px 14px;text-align:center;background:linear-gradient(180deg,#FFFBF2,#fff)}
.wg-mm-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-size:22px}
.wg-mm-icon.wg-warn{background:#FEF3C7;border:1px solid #FCD34D;color:#B45309}
.wg-mm-icon.wg-warn svg{width:24px;height:24px}
.wg-mm-editing .wg-mm-icon{width:44px;height:44px;font-size:19px;margin-bottom:8px}
.wg-mm-eb{font-family:var(--wg-font-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wg-gold-dark);margin-bottom:7px}
.wg-mm-top h3{font-family:var(--wg-font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--wg-navy-3);margin:0 0 6px}
.wg-mm-top p{font-size:13px;line-height:1.5;color:var(--wg-fg-2);margin:0 auto;max-width:340px}
.wg-mm-top b{color:var(--wg-fg-1)}
.wg-mm-compare{display:flex;align-items:stretch;padding:0 26px 4px}
.wg-cmp{flex:1;border:1px solid var(--wg-border);border-radius:var(--wg-r-md);padding:11px 12px;text-align:left}
.wg-cmp .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wg-fg-3);margin-bottom:6px}
.wg-cmp .v{font-family:var(--wg-font-display);font-weight:800;font-size:16px;color:var(--wg-navy-3)}
.wg-cmp .sub{font-size:11.5px;color:var(--wg-fg-3);margin-top:2px}
.wg-cmp-home{border-color:var(--wg-border-blue);background:var(--wg-tint-blue-2)}
.wg-cmp-home .v{color:var(--wg-blue-700)}
.wg-cmp-school{border-color:#FCD34D;background:#FFFBF2}
.wg-cmp-school .v{color:#B45309}
.wg-cmp-vs{flex:none;width:34px;display:flex;align-items:center;justify-content:center}
.wg-cmp-vs span{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--wg-border);display:grid;place-items:center;font-family:var(--wg-font-display);font-weight:800;font-size:10px;color:var(--wg-fg-muted)}
.wg-mm-acts{padding:16px 26px 22px;display:flex;flex-direction:column;gap:9px}
.wg-mm-acts .wg-btn{width:100%}
.wg-mm-text{background:none;border:none;color:var(--wg-fg-3);font-family:var(--wg-font-body);font-weight:600;font-size:13px;cursor:pointer;padding:4px;margin-top:1px}
.wg-mm-text:hover{color:var(--wg-fg-1);text-decoration:underline}
.wg-mm-body{padding:2px 26px 22px}
.wg-mm-note{display:flex;gap:8px;background:var(--wg-tint-blue-2);border:1px solid var(--wg-border-blue);border-radius:var(--wg-r-md);padding:10px 12px;font-size:12px;color:var(--wg-fg-2);line-height:1.45;margin-bottom:14px}
.wg-mm-note b{color:var(--wg-blue-700)}
.wg-mm-foot{display:flex;gap:10px;margin-top:2px}
@keyframes wg-mmfade{from{opacity:0}to{opacity:1}}

/* celebration layers (pure CSS/SVG — no image assets) */
#wg-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.wg-arrowhint{position:absolute;right:8px;top:-4px;width:150px;height:104px;overflow:visible;pointer-events:none}

@keyframes wg-bubble{0%{transform:translateY(0) scale(.5);opacity:0}12%{opacity:.9}80%{opacity:.85}100%{transform:translateY(-116vh) scale(1);opacity:0}}
@keyframes wg-confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(112vh) rotate(720deg);opacity:.92}}
@keyframes wg-pop{0%{transform:scale(.94) translateY(14px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes wg-rise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes wg-drawLoop{0%{stroke-dashoffset:560}22%{stroke-dashoffset:0}86%{stroke-dashoffset:0}97%{stroke-dashoffset:560}100%{stroke-dashoffset:560}}
@keyframes wg-headLoop{0%,14%{opacity:0}26%,86%{opacity:1}97%,100%{opacity:0}}
@keyframes wg-labelLoop{0%,18%{opacity:0}30%,86%{opacity:1}97%,100%{opacity:0}}
@keyframes wg-addNudge{0%,55%,100%{transform:translateY(0)}65%{transform:translateY(-4px)}75%{transform:translateY(0)}85%{transform:translateY(-2px)}}

/* ---- tablet (landscape / small laptop): keep card side-by-side, ease the rail ---- */
@media(min-width:821px) and (max-width:1024px){
  .wg-guide-modal .modal-dialog{width:min(980px,100%)}
  .wg-card{width:min(960px,100%);height:min(92vh,720px)}
  .wg-rail{width:264px;padding:24px 22px}
}

/* ---- responsive (mobile-first collapse) ---- */
@media(max-width:820px){
  .wg-page{padding:14px 12px}
  /* Reclaim the side gutters. 66px of a 390px screen — and 59px of a 320px one
     — was going to modal padding, which is what squeezed the fields until the
     phone number's placeholder clipped mid-digit. */
  .wg-guide-modal{padding:8px!important}
  /* max-width is what actually held the card to 331px of a 390px screen; the
     padding was never the main cost. !important because new-slider.min.css
     sets `.modal-dialog{max-width:90%!important}` under 690px and nothing
     weaker can outrank it. Scoped to this modal, so other modals keep theirs. */
  .wg-guide-modal .modal-dialog{width:100%;margin:0;max-width:none!important}
  /* overflow:hidden here rounds the card's corners, but it also makes this the
     containing block for position:sticky, which left the footer stranded at the
     end of a long panel. Let the card overflow and round the two children that
     actually touch its corners instead. */
  .wg-card{flex-direction:column;height:auto;min-height:auto;border-radius:var(--wg-r-lg);overflow:visible}

  /* THE RAIL IS A SIDEBAR ON DESKTOP AND A BANNER HERE.
     Beside the panel its height costs nothing; stacked on top it was spending
     266-279px on a logo, a tagline and a boxed progress card before the panel
     even started — so 82% of an iPhone SE screen was used up before the first
     question. Collapse it to one slim strip (small logo, bar, percentage) and
     drop the parts that only decorate. The desktop sidebar keeps all of it. */
  .wg-rail{width:auto;padding:10px 14px;border-radius:var(--wg-r-lg) var(--wg-r-lg) 0 0}
  .wg-rail-in{flex-direction:row;align-items:center;gap:12px}
  .wg-rail .wg-logo-img{height:20px;margin-bottom:0}
  .wg-rail .wg-kick{display:none}        /* "You're in! Let's finish strong" */
  .wg-steplist{display:none}
  .wg-prog{flex:1;min-width:0;margin-top:0;padding:0;background:none;border:0}
  .wg-prog .wg-row{margin-bottom:5px}
  .wg-prog .wg-lb{display:none}          /* the bar beside it already says this */
  .wg-prog .wg-pct{font-size:13px}
  .wg-prog .wg-bar{height:6px}
  .wg-prog .wg-mot{display:none}         /* "Nice - you've got this" */

  /* Bottom padding is a safety margin, not decoration: .wg-foot below is
     position:sticky, so it settles in front of whatever content is still
     scrolled underneath it once its natural (in-flow) position reaches the
     viewport's bottom edge. Content only clears it once scrolling has moved
     BEYOND that overlap — a small 18px cushion left the last field or two
     (e.g. Intended program/major on the Beyond High School screen) with only
     a few px of clearance from the footer, so real option text/real fonts
     (vs. whatever was on hand while eyeballing this) could fully erase that
     margin: the browser then reports max scroll reached while the sticky
     footer is still covering those fields, with no way to scroll further to
     clear it. .wg-foot's own height is not a fixed number — flex-wrap:wrap
     lets its two buttons drop to a second row on a narrow phone or with a
     longer label ("Save my picks →" etc.), measured at ~150px wrapped vs
     ~72px on one line — so this pads for the wrapped case, not just the
     common one. */
  .wg-scroll{overflow-y:visible;padding:6px 14px 170px}
  .wg-phead{padding:12px 14px 8px}
  .wg-eyebrow{font-size:10.5px;margin-bottom:4px}
  .wg-phead h2{font-size:19px;margin:0 0 4px}
  .wg-phead p{font-size:13px;line-height:1.4}
  .wg-in,.wg-in:focus{font-size:16px;height:46px}          /* 16px = no iOS zoom */
  /* select2's own boxes don't inherit .wg-in's height bump above, so without
     this they'd stay 42px next to a 46px plain input/select on mobile. */
  .wg-guide-modal .select2-container--default .select2-selection--single,
  .wg-guide-modal .select2-container--default .select2-selection--multiple{height:46px}
  .wg-guide-modal .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px}
  /* No arrow height override needed here — top:50%/translateY above already
     keeps it centered at any container height. */
  /* Continue sat ~500px below the fold on every step. Pinning the footer to the
     bottom of the viewport keeps it reachable without scrolling the panel
     first; .wg-panel does not clip, so the modal is the scroll container. */
  .wg-foot{padding:12px 14px;flex-wrap:wrap;position:sticky;bottom:0;background:#fff;z-index:3;
    border-radius:0 0 var(--wg-r-lg) var(--wg-r-lg)}
  .wg-foot .wg-btn{flex:1 1 auto}
  .wg-addrow{flex-direction:column;align-items:stretch}
  .wg-addrow .wg-field,.wg-addrow .wg-field.wg-sm{flex:1 1 auto;max-width:100%}
  .wg-addbtn{width:100%;justify-content:center}
  .wg-radio{gap:14px}
  .wg-doneview{padding:34px 22px}
  .wg-doneview h2{font-size:26px}
}

.modal-open .modal.wg-guide-modal, .modal.wg-guide-modal {
    background: var(--wg-gradient-hero);
}
/* Scoped to --open only, so the collapsed "N selected" summary (.wg-s2-summary)
   still shows normally when the dropdown is closed. width:100% !important
   overrides select2's own inline style, which sizes this textarea to fit
   only the typed text — without the override, a short word like "asi"
   leaves most of the row uncovered, exposing the summary text underneath. */
.wg-guide-modal .select2-container--open .select2-selection--multiple textarea.select2-search__field{
    position: absolute;
    left: 0;
    top: 6px;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0 13px;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: none;
    background: #fff;
    font-family: var(--wg-font-body);
    font-size: 14px;
    color: var(--wg-fg-1);
    z-index: 2;
}
/* ============================================================
   PARENT FLOW — screen 0 (family setup)
   Net-new rules only; everything else reuses the shared tokens above.

   Four rules from the standalone prototype are deliberately NOT here,
   because this sheet is shared with every student screen:
     .wg-card{height:min(86vh,660px)}  would shrink the card on ALL screens
                                       (line 395 already sets 92vh/720px)
     *{box-sizing:border-box}          the prototype needed it because it loads
                                       grid-only Bootstrap; the app has Reboot
     .wg-scroll{overflow-x:hidden}     global override of an existing rule
     .wg-count / .wg-stepper           dead — the shipped screen uses
                                       "+ Add another student", not a stepper
   ============================================================ */
.wg-fineprint{display:grid;grid-template-columns:14px 1fr;gap:7px;align-items:start;font-size:11.5px;line-height:1.45;color:var(--wg-fg-3);margin:-4px 0 14px}
.wg-fineprint svg{width:12px;height:12px;margin-top:2px;color:var(--wg-fg-muted)}
.wg-srm{width:24px;height:24px;margin-top:8px;border:none;background:none;color:var(--wg-fg-muted);font-size:15px;line-height:1;cursor:pointer;border-radius:6px;transition:.15s}
.wg-srm:hover{background:#fff;color:var(--wg-danger)}
.wg-addmore{display:inline-flex;align-items:center;gap:8px;margin:10px 0 15px;padding:8px 14px;background:#fff;border:1.5px dashed var(--wg-border-strong);border-radius:var(--wg-r-sm);font-family:var(--wg-font-display);font-weight:800;font-size:13.5px;color:var(--wg-blue);cursor:pointer;transition:.15s}
.wg-addmore:hover{border-color:var(--wg-blue);background:var(--wg-tint-blue)}
.wg-addmore span{font-size:17px;line-height:1}
/* all students share ONE box; each is a compact row */
.wg-students{background:var(--wg-tint-blue-2);border:1px solid var(--wg-border-blue);border-radius:var(--wg-r-lg);padding:6px 18px 10px;margin-bottom:0px;box-shadow:var(--wg-sh-xs)}
.wg-shead{display:grid;grid-template-columns:34px 1fr 26px;gap:12px;padding:12px 0 8px}
.wg-shead .wg-scols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.35fr);gap:12px;min-width:0}
.wg-shead .wg-scols > *{min-width:0}
.wg-shead .wg-scols span{font-family:var(--wg-font-display);font-weight:700;font-size:12px;color:var(--wg-fg-3);letter-spacing:.02em}
.wg-shead .wg-scols .wg-req{color:var(--wg-danger)}
.wg-srow{display:grid;grid-template-columns:34px 1fr 26px;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--wg-border-blue);animation:wg-rise .28s ease both}
.wg-srow .wg-scols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.35fr);gap:12px;min-width:0}
.wg-srow .wg-scols > *{min-width:0}
.wg-srow .wg-in{max-width:100%}
.wg-srow .wg-field{margin-bottom:0}
.wg-sbadge{width:30px;height:30px;flex:none;border-radius:50%;background:var(--wg-gradient);color:#fff;display:grid;place-items:center;font-family:var(--wg-font-display);font-weight:800;font-size:14px;margin-top:5px}
/* reassurance notes under the students box */
.wg-notes{display:flex;flex-direction:column;gap:8px;margin:-8px 0 18px}
.wg-note{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:12.8px;line-height:1.5;color:var(--wg-fg-2);background:var(--wg-bg-2);border:1px solid var(--wg-border);border-radius:var(--wg-r-md);padding:10px 13px}
.wg-note svg{width:16px;height:16px;margin-top:1px;color:var(--wg-blue)}
.wg-note b{font-family:var(--wg-font-display);font-weight:800;color:var(--wg-navy-3)}
.wg-note-gold{background:#FFF8E8;border-color:#F3DCA4;margin-top:15px}
.wg-note-gold svg{color:#B77900}
.wg-blocktitle{font-family:var(--wg-font-display);font-weight:800;font-size:12.5px;color:var(--wg-fg-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
/* the labels live once in the box header on desktop, so the per-row ones hide */
@media(min-width:821px){.wg-srow .wg-field label.wg-lb{display:none}}
@media(max-width:820px){
  .wg-shead{display:none}
  .wg-srow{grid-template-columns:1fr auto;gap:4px;padding:14px 0}
  .wg-srow .wg-scols{grid-column:1/-1}
  .wg-srow .wg-scols{grid-template-columns:1fr;gap:10px}
  .wg-sbadge{margin-top:0}
  svg.wg-guide {display: none}
}
/* keyboard focus — scoped to the new controls so existing screens are untouched */
.wg-addmore:focus-visible,.wg-srm:focus-visible{outline:3px solid var(--wg-sky);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .wg-srow,.wg-addmore,.wg-srm{animation:none!important;transition:none!important}
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgb(31, 135, 188);
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}