/* ============================================================
   Campus picker — the apex /listings/ page.

   Scoped to .cp so it cannot leak into the shell. Palette is the
   live design system (app_redesign.css): cream surfaces, olive
   borders, forest ink. The one deliberate departure is --lime-pop,
   the vivid #b5e02f from Brand_Guideline.md, used ONLY for the
   interactive moments — hover glow, focus ring, the arrow chip and
   the chosen card's check. It is a signal colour here, not a
   surface colour, which is why the cards themselves stay calm.

   The "bubble" feel is three things working together: a soft
   dual shadow that reads as raised, a springy cubic-bezier lift on
   hover, and a press that sinks the card back down. All of it is
   transform/shadow only, so nothing triggers layout on hover.
   ============================================================ */
.cp{
  --lime-pop:#b5e02f;
  --lime-pop-deep:#9ac41f;
  max-width:1080px;
}

/* --- head ------------------------------------------------- */
.cp-head{margin-bottom:30px}
.cp-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--pill);
  background:rgba(181,224,47,.16);
  border:1px solid rgba(181,224,47,.42);
  color:var(--forest);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;
}
.cp-pill svg{width:14px;height:14px}
.cp-title{
  font-family:var(--fd);font-weight:500;
  font-size:clamp(28px,4vw,42px);line-height:1.1;
  margin:16px 0 10px;color:var(--forest);
}
.cp-lede{
  margin:0;max-width:60ch;
  font-size:15.5px;line-height:1.6;color:var(--text-2);
}

/* --- grid: 4 / 2 / 1 ------------------------------------- */
.cp-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1000px){.cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cp-grid{grid-template-columns:minmax(0,1fr);gap:14px}}

/* --- the card -------------------------------------------- */
.cp-card{
  position:relative;display:flex;flex-direction:column;
  height:100%;min-height:168px;
  padding:20px 18px 18px;
  border-radius:var(--r-lg);
  text-decoration:none;color:inherit;
  background:linear-gradient(168deg,#fbfaf6 0%,var(--surface) 62%,var(--surface-alt) 100%);
  border:1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 24px -12px rgba(23,21,18,.18),
    0 2px 6px -2px rgba(23,21,18,.07);
  transition:
    transform .34s cubic-bezier(.22,1.2,.36,1),
    box-shadow .34s cubic-bezier(.22,1.2,.36,1),
    border-color .24s ease;
  /* every card arrives a beat after the one before it */
  animation:cp-in .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 55ms);
}

@keyframes cp-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* hover: lift, and let the vivid lime onto the border */
.cp-card:hover,
.cp-card:focus-visible{
  transform:translateY(-6px) scale(1.022);
  border-color:rgba(181,224,47,.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 26px 46px -18px rgba(28,32,22,.30),
    0 8px 18px -8px rgba(181,224,47,.42);
}
.cp-card:focus-visible{
  outline:3px solid var(--lime-pop);
  outline-offset:3px;
}

/* press: the card sinks back into the page */
.cp-card:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 10px -6px rgba(23,21,18,.22);
  transition-duration:.08s;
}

/* --- badge ----------------------------------------------- */
.cp-badge{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  border-radius:14px;
  font-family:var(--fb);font-weight:700;font-size:14px;letter-spacing:.04em;
  color:var(--on-dark);
  background:linear-gradient(150deg,var(--forest-600),var(--forest-800));
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 6px 14px -8px rgba(23,21,18,.5);
  transition:transform .34s cubic-bezier(.22,1.2,.36,1);
}
.cp-card:hover .cp-badge{transform:rotate(-5deg) scale(1.06)}

/* --- text ------------------------------------------------ */
.cp-body{display:block;margin-top:auto;padding-top:20px}
.cp-name{
  display:block;
  font-family:var(--fd);font-size:17px;font-weight:600;line-height:1.25;
  color:var(--forest);
}
.cp-host{
  display:block;margin-top:5px;
  font-size:12px;letter-spacing:.01em;color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* --- arrow chip ------------------------------------------ */
.cp-go{
  position:absolute;top:18px;right:16px;
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;
  color:var(--text-3);
  background:rgba(23,21,18,.05);
  transition:
    background .3s ease, color .3s ease,
    transform .34s cubic-bezier(.22,1.2,.36,1);
}
.cp-go svg{width:15px;height:15px}
.cp-card:hover .cp-go,
.cp-card:focus-visible .cp-go{
  background:var(--lime-pop);
  color:var(--on-lime);
  transform:translateX(3px);
}

/* --- chosen state ---------------------------------------- */
.cp-card.is-chosen{
  border-color:rgba(181,224,47,.75);
  background:linear-gradient(168deg,#fcfff2 0%,#f4fce2 70%,#eaf7d0 100%);
}
.cp-check{
  position:absolute;top:-9px;left:-9px;
  width:26px;height:26px;display:none;place-items:center;
  border-radius:50%;
  background:var(--lime-pop);color:var(--on-lime);
  box-shadow:0 4px 12px -4px rgba(28,32,22,.45);
}
.cp-check svg{width:14px;height:14px;stroke-width:3}
.cp-card.is-chosen .cp-check{display:grid}
.cp-chosen-label{
  display:block;margin-top:12px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime-dark);
}

/* --- empty + notes --------------------------------------- */
.cp-empty{grid-column:1/-1;padding:28px;text-align:center}
.cp-resume{
  margin-top:22px;padding:14px 18px;
  border-radius:var(--r-md);
  background:rgba(181,224,47,.10);
  border:1px solid rgba(181,224,47,.32);
}
.cp-resume p{margin:0;font-size:14px;color:var(--text-2)}
.cp-note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:28px;padding:16px 18px;
  border-radius:var(--r-md);
  background:var(--surface-alt);
  border:1px solid var(--border);
}
.cp-note-icon{color:var(--lime-dark);flex:0 0 auto;margin-top:1px}
.cp-note-icon svg{width:17px;height:17px}
.cp-note p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2)}
.cp-note strong{color:var(--forest)}
.cp-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;padding:2px 6px;border-radius:6px;
  background:rgba(23,21,18,.06);color:var(--forest);
  white-space:nowrap;
}

/* Respect a stated preference for less motion — the cards simply
   appear, and hover stops moving them. */
@media (prefers-reduced-motion:reduce){
  .cp-card{animation:none;transition:border-color .2s ease, box-shadow .2s ease}
  .cp-card:hover,.cp-card:focus-visible,.cp-card:active{transform:none}
  .cp-card:hover .cp-badge{transform:none}
  .cp-card:hover .cp-go{transform:none}
}

/* ============================================================
   Campus chip — which portal am I in, and how do I leave it.

   Lives in the topbar of every browsing page. Deliberately a small
   pill rather than a nav item: it is context, not a destination, and
   the one thing it must never be is invisible. The swap icon is the
   affordance that says "this is changeable" without a second line of
   text.
   ============================================================ */
.campus-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 11px 6px 9px;
  border-radius:var(--pill);
  text-decoration:none;color:inherit;
  background:var(--surface-alt);
  border:1px solid var(--border);
  transition:border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.22,1.2,.36,1);
}
.campus-chip:hover,.campus-chip:focus-visible{
  border-color:rgba(181,224,47,.6);
  background:#f6fbe8;
  transform:translateY(-1px);
}
.campus-chip:focus-visible{outline:2px solid #b5e02f;outline-offset:2px}
.campus-chip .cc-pin{display:inline-flex;color:var(--lime-dark,#7c8a64)}
.campus-chip .cc-pin .ic{width:15px;height:15px}
.cc-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cc-label{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);
}
.cc-value{
  font-size:13px;font-weight:600;color:var(--forest);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}
.cc-swap{
  display:inline-flex;color:var(--text-3);margin-left:2px;
  transition:color .22s ease, transform .3s cubic-bezier(.22,1.2,.36,1);
}
.cc-swap .ic{width:14px;height:14px}
.campus-chip:hover .cc-swap{color:var(--forest);transform:rotate(180deg)}

/* On a narrow phone the full campus name crowds the topbar, so show
   the shorter form and keep the control rather than dropping it. */
@media(max-width:520px){
  .cc-value{max-width:120px}
}

@media(prefers-reduced-motion:reduce){
  .campus-chip,.campus-chip:hover,.campus-chip:hover .cc-swap{transform:none;transition:none}
}

/* ---------- "Listing at" on the agent's own pages ----------
   The same question as the chip above, answered differently: which of MY
   campuses am I looking at. It is a filter, not a door, so it is drawn as one
   — a small labelled select that sits under the page's own heading rather
   than a topbar control that looks like it changes the site. */
.lister-campus{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:6px 12px 6px 11px;
  background:var(--white,#f8f6ef);
  border:1px solid var(--border,rgba(23,21,18,.08));
  border-radius:999px;
  font-size:12.5px;color:var(--text-2);
}
.lister-campus label,
.lister-campus.is-static{
  display:inline-flex;align-items:center;gap:6px;margin:0;
}
.lister-campus .ic{width:14px;height:14px;color:var(--lime-dark,#7c8a64)}
/* The select keeps its own styling from styles.css; only the size is pulled
   in here so the pill does not become a banner. */
.lister-campus select{
  border:0;background:transparent;padding:2px 4px;margin:0;
  font-size:12.5px;font-weight:600;color:var(--forest);
  max-width:220px;
}
.lister-campus select:focus-visible{outline:2px solid var(--lime-dark,#7c8a64);outline-offset:2px}
.lister-campus.is-static strong{color:var(--forest)}
.lister-campus.is-empty{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:7px 13px;border-radius:999px;font-size:12.5px;
  background:#f6efe2;color:#8a6420;
}
.lister-campus.is-empty a{color:inherit;font-weight:600;text-decoration:underline}