/* Save buttons, the create-account prompt, and header account state.
 * Shared by match.html, the server-rendered college pages, and /my-colleges,
 * so the control looks and behaves the same wherever it appears.
 *
 * Every page that loads this already defines the brand tokens (--navy, --teal,
 * --line …); the fallbacks below only matter if one ever doesn't. */

.p4c-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------ save button - */
/* Fixed size in both states: the label swaps between two words of the same
   weight and the heart only changes fill, so hydrating the real saved state
   after load never shifts the layout. */
.p4c-save{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:8px 14px;
  border:1.5px solid var(--line,#dfe7f0);border-radius:999px;background:#fff;
  color:var(--slate,#516079);font:inherit;font-size:.88rem;font-weight:700;
  cursor:pointer;line-height:1;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.p4c-save:hover{border-color:var(--teal-2,#16b8a6);color:var(--navy,#0f2a4a)}
.p4c-save:disabled{opacity:.6;cursor:progress}
.p4c-save .p4c-heart{display:inline-flex}
.p4c-save .p4c-heart svg{fill:none;stroke:currentColor;stroke-width:1.8}
/* aria-pressed carries the state for assistive tech; this is its visual twin. */
.p4c-save.is-saved{
  border-color:var(--teal-ink,#177a6e);
  color:var(--teal-ink,#177a6e);
  background:rgba(31,158,143,.08);
}
.p4c-save.is-saved .p4c-heart svg{fill:currentColor;stroke:currentColor}
.p4c-save .p4c-save-label{min-width:3.4em;text-align:left}

/* ------------------------------------------------------ header account nav */
#accountNav{display:inline-flex;align-items:center;gap:18px}
#accountNav a,.p4c-linkbtn{
  color:#cfe0f2;font-size:.95rem;font-weight:500;text-decoration:none;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
}
#accountNav a:hover,.p4c-linkbtn:hover{color:#fff;text-decoration:underline}
@media(max-width:760px){
  #accountNav{gap:12px}
  #accountNav a,.p4c-linkbtn{font-size:.88rem}
  /* Each page hides its other nav links on a phone with a rule like
     `.nav-links a:not(.nav-cta)`. #accountNav is a <span>, so it slips past
     that and — once signed in, when it holds "My colleges" and "Sign out" —
     pushes the bar off a 390px screen. Rather than hiding it (which would
     strand sign-out on mobile) let the bar wrap onto a second line. */
  header nav{flex-wrap:wrap;height:auto;min-height:68px;padding:8px 0;row-gap:6px}
}

/* ------------------------------------------------- create-account prompt -- */
/* A bar, not a modal. Nothing is trapped and nothing is blocked — the save
   already happened, and this is only an offer. */
.p4c-prompt{
  position:fixed;left:12px;right:12px;z-index:120;
  bottom:calc(12px + var(--p4c-tray-h,0px));
  max-width:520px;margin:0 auto;
  background:#fff;border:1px solid var(--line,#dfe7f0);border-radius:16px;
  box-shadow:0 14px 40px rgba(15,42,74,.22);padding:18px 20px;
}
@media(min-width:640px){.p4c-prompt{left:auto;right:24px;margin:0;bottom:calc(24px + var(--p4c-tray-h,0px))}}
.p4c-prompt-x{
  position:absolute;top:8px;right:10px;background:none;border:0;
  font-size:1.5rem;line-height:1;color:var(--slate,#516079);cursor:pointer;
  width:34px;height:34px;border-radius:50%;
}
.p4c-prompt-x:hover{background:var(--mist,#eef3f8);color:var(--navy,#0f2a4a)}
.p4c-prompt-title{font-weight:800;color:var(--navy,#0f2a4a);font-size:1.02rem;padding-right:30px}
.p4c-prompt-sub{color:var(--slate,#516079);font-size:.9rem;margin-top:4px;line-height:1.5}
.p4c-prompt-form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.p4c-prompt-form input{
  flex:1;min-width:180px;font:inherit;font-size:1rem;padding:11px 13px;
  border:1.5px solid var(--line,#dfe7f0);border-radius:10px;color:var(--ink,#122031);background:#fff;
}
.p4c-prompt-form input:focus-visible{border-color:var(--teal-2,#16b8a6);outline-offset:1px}
.p4c-prompt-go{
  background:var(--gold,#f2b134);color:#3a2a00;font:inherit;font-weight:700;
  border:0;border-radius:10px;padding:11px 18px;cursor:pointer;white-space:nowrap;
}
.p4c-prompt-go:hover{filter:brightness(1.04)}
.p4c-prompt-msg{font-size:.86rem;color:var(--teal-ink,#177a6e);font-weight:600;margin-top:8px;min-height:1.2em}

/* Respect a reduced-motion preference: this has no animation to begin with,
   but the shadow is heavy enough to warrant a calmer variant on small screens
   where it sits over content. */
@media(prefers-reduced-transparency:reduce){.p4c-prompt{box-shadow:0 4px 14px rgba(15,42,74,.3)}}

/* --- compare tray --------------------------------------------------------
   The shopping-cart "Compare (N)" pattern: fixed to the bottom, present on
   every page that can save, gone below two colleges.

   It never covers the end of the page — the script pads the body by exactly
   the tray's height and publishes that height as --p4c-tray-h, so a page with
   its own bottom dock can sit above it rather than under it. */
.p4c-tray{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(15,42,74,.14),rgba(15,42,74,0));
  pointer-events:none;
}
.p4c-tray-go{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--teal,#1f9e8f);color:#fff;text-decoration:none;
  font:inherit;font-weight:800;font-size:1rem;line-height:1.2;
  border-radius:999px;padding:14px 22px;min-height:48px;
  box-shadow:0 10px 26px rgba(31,158,143,.42);
  max-width:100%;
}
.p4c-tray-go:hover{background:var(--teal-2,#16b8a6)}
.p4c-tray-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.p4c-tray-count{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  border-radius:999px;background:rgba(255,255,255,.22);font-size:.85rem;font-weight:800;
}
.p4c-tray-arrow{font-weight:700}
@media(max-width:520px){
  .p4c-tray-go{width:100%;justify-content:center}
}

/* --- "added to compare" --------------------------------------------------
   A word that the save did something, for the moment before the tray can say
   it. Fixed, so it cannot reflow the card it appears beside. */
.p4c-added{
  position:fixed;left:50%;z-index:59;transform:translate(-50%,8px);
  bottom:calc(24px + var(--p4c-tray-h,0px));
  background:var(--navy,#0f2a4a);color:#fff;font-size:.88rem;font-weight:700;
  border-radius:999px;padding:9px 16px;box-shadow:0 8px 22px rgba(15,42,74,.32);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;max-width:calc(100vw - 32px);text-align:center;
}
.p4c-added.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.p4c-added{transition:none}}

/* --- the prompt's two offers, kept apart --------------------------------- */
.p4c-prompt-compare{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  background:var(--teal,#1f9e8f);color:#fff;text-decoration:none;
  font-weight:800;font-size:.95rem;border-radius:999px;padding:11px 18px;min-height:44px;
}
.p4c-prompt-compare:hover{background:var(--teal-2,#16b8a6)}
.p4c-prompt-keep{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#dfe7f0);
  font-weight:800;color:var(--navy,#0f2a4a);font-size:.92rem;
}

/* --- add a college you're considering -------------------------------------
   A real ARIA combobox. The list is absolutely positioned so opening it never
   pushes the page around — no layout shift on a control people type into. */
.p4c-find-label{display:block;font-size:.88rem;font-weight:700;color:var(--slate,#516079);margin-bottom:6px}
.p4c-find-box{position:relative}
.p4c-find-input{
  width:100%;font:inherit;font-size:1rem;min-height:48px;
  color:var(--ink,#122031);background:#fff;
  border:1.5px solid var(--line,#dfe7f0);border-radius:12px;padding:12px 14px;
}
.p4c-find-input:focus-visible{border-color:var(--teal-2,#16b8a6);outline-offset:1px}
.p4c-find-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  margin:0;padding:6px;list-style:none;max-height:min(58vh,340px);overflow-y:auto;
  background:#fff;border:1px solid var(--line,#dfe7f0);border-radius:12px;
  box-shadow:0 14px 34px rgba(15,42,74,.18);
}
.p4c-find-option{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:9px;cursor:pointer;min-height:48px;justify-content:center;
}
.p4c-find-option.is-active,.p4c-find-option:hover{background:var(--mist,#eef3f8)}
/* Not colour alone: the active row also gains a rule down its leading edge. */
.p4c-find-option.is-active{box-shadow:inset 3px 0 0 var(--teal,#1f9e8f)}
.p4c-find-name{font-weight:700;color:var(--navy,#0f2a4a);font-size:.95rem;line-height:1.3}
.p4c-find-where{color:var(--slate,#516079);font-size:.84rem}
.p4c-find-status{font-size:.86rem;color:var(--slate,#516079);margin-top:8px;min-height:1.2em}
.p4c-find-status.is-error{color:#a3392c;font-weight:600}
.p4c-find-status.is-ok{color:var(--teal-ink,#177a6e);font-weight:600}

/* "Added by you" — a personal pick, never dressed up as a recommendation. */
.p4c-added-by-you{
  display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 9px;border-radius:999px;margin-left:8px;vertical-align:2px;
  color:#4a3a6b;background:rgba(74,58,107,.12);
}