/* ============================================================
   sg-website layout compat
   layouts/website.php loads the Tailwind CDN, whose preflight sheet is
   injected AFTER every stylesheet and re-bases headings, buttons and form
   fields; the body also carries text-gray-900. The find
   page was built against plain UA defaults + site.css, so restore those
   inside the page's own regions (filter rail, dropdown layer, results +
   map, filter drawer, selection bar, pin card, the shared dialog).
   `html :where(region) type` is (0,0,2): it beats preflight's (0,0,1)
   rules but still loses to every class rule, so nothing styled on purpose
   changes — and the shared header / footer / mobile bar keep their
   sg-website look because :where() scopes without adding specificity. */
:where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card){color:var(--ink);}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) :is(h1,h2,h3,h4){font-weight:600;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) button{font-size:13.3333px;font-weight:400;line-height:normal;letter-spacing:normal;color:buttontext;padding:1px 6px;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) :is(input,select,textarea){font-size:13.3333px;font-weight:400;line-height:normal;letter-spacing:normal;color:fieldtext;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) input{padding:1px 2px;}
html body :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) :where(input[type=range]){padding:0;margin:2px;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) select{padding:0;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) textarea{padding:2px;resize:both;}
html :where(.fs-bar,#ddLayer,.fs-main,.fdrawer,.selbar,.pin-card,#sgModal) :is(input,textarea)::placeholder{color:darkgray;}
/* the list-school popup (inline in the footer) redefines .form-fine globally
   with a 14px top margin; the apply / enquiry forms here use site.css's 12px */
#sgModal .form-fine{margin-top:12px;}
/* the toast (components/toast) rises above whatever this page parks at the
   bottom edge: the selection bar, and nothing once the mobile bar slid away */
body.nav-hidden{--toast-lift:0px;}
body.has-sel{--toast-lift:96px;}
@media(max-width:900px){ body.has-sel,body.nav-hidden.has-sel{--toast-lift:128px;} }

/* ============================================================
   Find a School — page shell
   Desktop: results flow, map pinned right (hidden · docked · wide).
   Mobile:  map fills the canvas, results ride on a draggable sheet.
============================================================ */
/* full-bleed, because the right padding is a vw fraction that has to line
   up with a viewport-fixed map pane */
.fs-main{max-width:none;margin:0;padding:18px 24px 60px;transition:padding .3s var(--ease);}
@media(min-width:1101px){
  /* the map starts at 63vw, so the list stops 24px short of it */
  .fs-main{padding-right:calc(37vw + 24px);}
  /* Expanding keeps the same gutters so nothing reflows mid-animation, and
     the list clears out BEFORE the map arrives — seeing the pane slide over
     live cards read as an overlap rather than a transition. Shrinking waits
     for the map to be most of the way back before fading them in. */
  .fs-main.map-wide{padding-left:24px;padding-right:calc(37vw + 24px);}
  .fs-results{transition:opacity .3s var(--ease) .18s,transform .3s var(--ease) .18s;}
  .fs-main.map-wide .fs-results{display:block;opacity:0;pointer-events:none;
    transform:translateX(-18px);transition:opacity .14s var(--ease),transform .3s var(--ease);}
  /* with no map to line up against, cap the measure so cards stay readable */
  .fs-main.map-off{max-width:1760px;margin:0 auto;padding-left:28px;padding-right:28px;}
}

/* ---------- filter bar ----------
   The site header, the chip rail and the results header stack directly on
   top of each other. Three full-strength rules read as a ladder, so only
   the bottom of the stack carries a visible edge and it is a whisper. */
.fs-bar{transition:top .28s var(--ease);border-bottom:1px solid rgba(20,20,20,.07);}
.fs-bar-in{max-width:none;padding:11px 24px;}
.fs-scroll{scroll-behavior:smooth;scroll-padding-inline:8px;}
.fs-pill{height:38px;padding:0 15px;}
.fs-toggle{height:38px;padding:0 14px;}
.fs-pill.loc{padding-right:13px;}
/* selected filters bubble to the front of the rail, place always first */
.fs-scroll>*{order:2;}
.fs-scroll>.on,.fs-scroll>.is-on{order:1;}
.fs-scroll>.fs-pill.loc{order:0;}
/* only the collapsed mobile header borrows the chip to carry the count */
.fs-pill.loc .cnt{display:none;}
.fs-filter-btn .badge-n{margin-left:1px;}

/* ---------- results header ---------- */
.fs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.fs-head h1{font-size:22px;letter-spacing:-.6px;}
.fs-head .sub{font-size:12.5px;color:var(--g500);font-weight:600;margin-top:3px;}
.fs-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fs-tools .t-sep{width:1px;height:20px;background:var(--g200);flex:0 0 auto;margin:0 2px;}
.fs-head .hd-l{min-width:0;}

/* ---------- result cards ---------- */
.fs-grid{gap:24px 20px;}
@media(min-width:1400px){.fs-main:not(.map-off) .fs-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1850px){.fs-main:not(.map-off) .fs-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1700px){.fs-main.map-off .fs-grid{grid-template-columns:repeat(5,1fr);}}
.sch{transition:transform .24s var(--ease);}
.sch .imgwrap{border-radius:14px;touch-action:pan-y;}
/* arrows are a pointer affordance; touch gets the swipe and the dots */
@media(hover:none){
  .sch .arrow{display:none;}
  .sch .dots i{width:7px;height:7px;}
}
.sch:hover .slide.on img{transform:scale(1.045);}
.sch .slide img{transition:transform .55s var(--ease);}
.sch h3{font-size:14.5px;margin:12px 0 2px;gap:5px;}
.sch h3 .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.sch h3 .rt{margin-left:auto;padding-left:6px;}
.sch .loc{gap:8px;}
.sch .loc .lc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sch .dist{display:inline-flex;align-items:center;gap:4px;background:var(--g100);border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;color:var(--ink-2);flex:0 0 auto;}
.sch .dist i{font-size:8.5px;color:var(--red);}
.sch .fee{font-size:13px;margin-top:5px;}
.sch .seatchip{position:absolute;left:11px;bottom:11px;background:rgba(255,255,255,.97);border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:800;color:var(--ink);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.14);}
.sch .seatchip.low{background:var(--red);color:#fff;}
.sch.hot{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-md);}
.sch .acts{margin-top:11px;}

/* select mode is a class flip, never a re-render: the checkbox is
   always in the DOM and CSS decides whether it exists on screen */
.sch .sel-box{display:none;}
body.smart-on .sch .sel-box{display:flex;}
body.smart-on .sch .imgwrap{cursor:pointer;}
.sch.sel{outline:2px solid var(--red);outline-offset:4px;}

/* ---------- loading skeletons ---------- */
.sk{border-radius:var(--r-md);}
.sk .im{width:100%;aspect-ratio:4/3;border-radius:14px;background:var(--g100);}
.sk .l{height:11px;border-radius:99px;background:var(--g100);margin-top:11px;}
.sk .l.w1{width:72%;} .sk .l.w2{width:46%;} .sk .l.w3{width:58%;}
.sk .im,.sk .l{position:relative;overflow:hidden;}
.sk .im::after,.sk .l::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:shimmer 1.35s infinite;}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}

/* ---------- map pane ----------
   Docked, it runs flush to the top, right and bottom of the viewport with
   one gutter on the left, so the canvas reads as two panes rather than a
   floating card. Sized with left+right (never width), so expanding animates
   the edge travelling left instead of jumping.  */
/* `bottom` is deliberately NOT transitioned: it tracks the footer on every
   scroll frame, and easing it made the pane lag behind and float over the
   footer instead of closing against it. */
.fs-map{top:calc(var(--headH) + var(--barH,60px));right:0;bottom:0;left:63vw;width:auto;
  border-radius:0;border:none;border-left:1px solid var(--line);box-shadow:none;
  transition:left .46s var(--ease),right .46s var(--ease),top .46s var(--ease);}
@media(min-width:1101px){
  .fs-main.map-wide .fs-map{left:0;right:0;width:auto;border-left-color:transparent;}
}
/* Leaflet's own panes run to z-index 800, so our chrome has to clear them.
   Zoom sits above the floating quick-actions button, which owns the very
   bottom-right corner. */
.map-tools{top:14px;right:14px;gap:6px;z-index:900;}
.map-tools.zoomer{top:auto;bottom:96px;right:14px;}
@media(max-width:1100px){
  /* the sheet owns the bottom of a phone screen, and pinch already zooms,
     so only re-centre survives — parked under the pane controls */
  .map-tools.zoomer{top:96px;bottom:auto;right:12px;}
  .map-tools.zoomer button:not(:last-child){display:none;}
}

/* ---------- locality rail ----------
   One hairline and one very soft lift: a heavier shadow made the chips
   look like they were floating a centimetre off the map. */
.map-areas{position:absolute;left:14px;top:14px;z-index:900;display:flex;align-items:center;gap:6px;
  max-width:calc(100% - 76px);overflow-x:auto;scrollbar-width:none;padding:3px;}
.map-areas::-webkit-scrollbar{display:none;}
.map-areas[hidden]{display:none;}
.map-areas .ma-lbl{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:800;color:var(--g600);letter-spacing:.2px;padding:0 4px 0 2px;white-space:nowrap;
  text-shadow:0 1px 3px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.8);}
.map-areas .ma-lbl i{color:var(--red);font-size:10px;}
.ma-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(20,20,20,.09);background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:7px 13px;
  font-family:inherit;font-weight:700;font-size:12px;color:var(--ink);white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,20,20,.06);transition:background .16s ease,border-color .16s ease,color .16s ease;}
.ma-chip b{font-weight:800;font-size:10.5px;color:var(--g500);}
.ma-chip:hover{border-color:rgba(20,20,20,.35);background:#fff;}
.ma-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.ma-chip.on b{color:rgba(255,255,255,.65);}
.ma-chip.more{color:var(--red);font-weight:800;}
.ma-chip.clear{color:var(--g600);}

/* ---------- search this area ---------- */
.map-redo{position:absolute;left:50%;translate:-50% 0;top:14px;z-index:901;
  display:inline-flex;align-items:center;gap:8px;border:none;background:var(--ink);color:#fff;
  border-radius:999px;padding:11px 20px;font-family:inherit;font-weight:800;font-size:12.5px;
  cursor:pointer;box-shadow:0 6px 18px -4px rgba(20,20,20,.4);animation:ddIn .2s ease;white-space:nowrap;}
.map-redo[hidden]{display:none;}
.map-redo:hover{background:#000;}
.map-redo i{font-size:11px;}
.map-redo.clear{background:#fff;color:var(--ink);border:1px solid rgba(20,20,20,.12);
  box-shadow:0 2px 8px rgba(20,20,20,.14);}
.map-redo.clear:hover{background:var(--g100);}
/* the rail owns the top-left, so the redo pill shifts down under it */
.map-areas:not([hidden]) ~ .map-redo{top:58px;}
@media(max-width:1100px){
  /* on a phone the rail lives at the bottom, just above the results sheet,
     and the redo pill sits directly above the rail rather than at the top
     where it fights the filter bar */
  .map-areas{left:10px;right:10px;top:auto;max-width:none;
    bottom:calc(100dvh - var(--sheet-top,48vh) + 12px);transition:bottom .34s var(--ease);}
  body.sheet-dragging .map-areas{transition:none;}
  body.pin-open .map-areas,body.snap-full .map-areas{display:none;}
  .map-redo,.map-areas:not([hidden]) ~ .map-redo{
    top:auto;bottom:calc(100dvh - var(--sheet-top,48vh) + 12px);
    padding:10px 16px;font-size:12px;box-shadow:0 4px 14px -2px rgba(20,20,20,.45);
    transition:bottom .34s var(--ease);}
  .map-areas:not([hidden]) ~ .map-redo{bottom:calc(100dvh - var(--sheet-top,48vh) + 58px);}
  body.sheet-dragging .map-redo{transition:none;}
  body.pin-open .map-redo{display:none;}
}
.map-tools button{width:36px;height:36px;border-radius:11px;border:1px solid var(--g200);background:rgba(255,255,255,.98);backdrop-filter:blur(6px);}
.map-tools button:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
/* map controls sit at the very top of the pane, so their tooltip has to
   open to the LEFT or it renders under the sticky filter bar */
@media(hover:hover){
  .map-tools [data-tip]::after{bottom:auto;top:50%;left:auto;right:calc(100% + 9px);transform:translateY(-50%) translateX(4px);z-index:400;}
  .map-tools [data-tip]:hover::after{transform:translateY(-50%) translateX(0);}
}

/* Legend: a segmented pill that explains the anatomy of a pin. Listing
   each board was pure repetition — the badge on the pin already says
   "CBSE" — so it explains the parts instead. */
.map-legend{position:absolute;left:14px;right:auto;bottom:32px;top:auto;z-index:900;
  background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--g200);border-radius:12px;padding:0;overflow:hidden;
  box-shadow:0 6px 24px rgba(20,20,20,.15);
  display:flex;align-items:stretch;max-width:calc(100% - 88px);}
.map-legend .lg-row{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap;letter-spacing:-.1px;}
.map-legend .lg-row+.lg-row{box-shadow:inset 1px 0 0 var(--g200);}
.map-legend .lg-bd{font-style:normal;background:var(--ink);color:#fff;border-radius:5px;
  padding:3px 6px;font-size:8.5px;font-weight:800;letter-spacing:.4px;line-height:1;}
.map-legend .lg-cur{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1;}
.map-legend .dotv{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(14,138,79,.16);}
@media(max-width:1500px){.map-legend .lg-row{padding:8px 10px;font-size:10.5px;gap:6px;}}
@media(max-width:1100px){.map-legend{display:none;}}

/* ---------- Leaflet canvas ---------- */
#mapCanvas{position:absolute;inset:0;background:#EAE6DF;}
.leaflet-container{font-family:inherit;background:#EAE6DF;}
.leaflet-container a{color:var(--ink-2);}
.leaflet-control-attribution{font-size:9.5px;font-family:inherit;background:rgba(255,255,255,.82);
  padding:2px 7px;border-radius:8px 0 0 0;color:var(--g500);}
.leaflet-control-attribution a{color:var(--g600);}
.leaflet-bar{border:none!important;box-shadow:0 2px 10px rgba(20,20,20,.18)!important;border-radius:12px!important;overflow:hidden;}
.leaflet-bar a{width:34px!important;height:34px!important;line-height:34px!important;color:var(--ink)!important;
  border-bottom:1px solid var(--g200)!important;font-size:17px;font-weight:600;}
.leaflet-bar a:last-child{border-bottom:none!important;}
.leaflet-bar a:hover{background:var(--g100)!important;}
.leaflet-control-zoom{margin:0 14px 26px 0!important;}
/* the marker element is the anchor point; the pill centres itself on it */
.leaflet-marker-icon.sg-pin,.leaflet-marker-icon.sg-you{background:none;border:none;width:auto!important;height:auto!important;}
.sg-pin .map-pin{position:relative;left:0;top:0;}
.sg-you .map-you{position:relative;left:0;top:0;}
/* ---------- collapsed form: an avatar pin ----------
   Where a price pill will not fit, the school shows its face instead. The
   ring is brand red for verified schools and graphite for the rest, so the
   map itself advertises what verification buys. */
.sg-pin.av .map-pin{width:36px;height:36px;min-width:0;padding:0;gap:0;border-radius:50%;
  background:#fff;border:2.5px solid var(--pin-ring,#3A3A3A);overflow:visible;
  transform:translate(-50%,calc(-100% - 7px));transform-origin:bottom center;
  box-shadow:0 2px 5px rgba(20,20,20,.22),0 6px 16px -4px rgba(20,20,20,.3);}
.sg-pin.av .map-pin::after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--pin-ring,#3A3A3A);border-bottom:0;}
.sg-pin.av .map-pin>*{display:none;}
.sg-pin.av .map-pin .sg-logo{display:block;width:100%!important;height:100%!important;
  border-radius:50%;box-shadow:none;}
.sg-pin.av .map-pin .adm{display:block;position:absolute;top:-3px;right:-3px;width:11px;height:11px;
  border:2px solid #fff;box-shadow:none;}
.sg-pin.av .map-pin:hover,.sg-pin.av .map-pin.hot{background:#fff;border-color:var(--ink);
  transform:translate(-50%,calc(-100% - 7px)) scale(1.14);}
.sg-pin.av .map-pin:hover::after,.sg-pin.av .map-pin.hot::after{border-top-color:var(--ink);}
.sg-pin.av .map-pin.sel{border-color:var(--red);}
.sg-pin.av .map-pin.sel::after{border-top-color:var(--red);}
.sg-pin.av .map-pin.mine{box-shadow:0 0 0 2px var(--ok),0 4px 12px -2px rgba(20,20,20,.28);}

/* select mode turns every marker into a picker */
.map-pin .mp-tick{display:none;}
body.smart-on .map-pin .mp-tick{display:flex;align-items:center;justify-content:center;
  position:absolute;top:-7px;left:-7px;width:19px;height:19px;border-radius:50%;
  background:#fff;border:1.5px solid var(--g400);color:transparent;font-size:8px;z-index:2;
  box-shadow:0 1px 3px rgba(20,20,20,.25);}
body.smart-on .map-pin.sel .mp-tick{background:var(--red);border-color:var(--red);color:#fff;}
body.smart-on .sg-pin:not(.av) .map-pin{padding-left:10px;}

/* pins: fixed height so every pill sits on the same optical line, one soft
   shadow rather than the doubled one, and a spring on hover */
.map-pin{height:32px;padding:0 12px 0 4px;gap:7px;border:1px solid var(--pin-col,rgba(20,20,20,.08));
  font-size:12.5px;font-weight:800;letter-spacing:-.1px;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(20,20,20,.10),0 4px 12px -2px rgba(20,20,20,.18);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),background .18s ease,color .18s ease,box-shadow .2s ease;}
.map-pin .bd{height:20px;padding:0 7px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.45px;line-height:1;}
.map-pin .adm{width:7px;height:7px;border-radius:50%;background:var(--g300);flex:0 0 auto;}
.map-pin.open .adm{background:var(--ok);box-shadow:0 0 0 3px rgba(14,138,79,.18);}
.map-pin.sel{background:var(--red);color:#fff;border-color:var(--red);}
.map-pin.sel .vrf,.map-pin.sel .sg-check{filter:brightness(0) invert(1);}
.map-pin:hover,.map-pin.hot{background:var(--ink);color:#fff;border-color:var(--ink);
  transform:translate(-50%,-50%) scale(1.09);z-index:7;
  box-shadow:0 2px 6px rgba(20,20,20,.2),0 10px 26px -4px rgba(20,20,20,.34);}
.map-pin:hover .bd,.map-pin.hot .bd{background:rgba(255,255,255,.22)!important;}
.map-pin.mine{border-color:var(--ok);}
.map-you{position:absolute;transform:translate(-50%,-50%);z-index:6;pointer-events:none;}
.map-you i{display:block;width:16px;height:16px;border-radius:50%;background:#1A73E8;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);}
.map-you::after{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(26,115,232,.13);}

/* ---------- pin detail card ---------- */
/* fixed on <body>: it has to clear Leaflet's panes (up to 800), the map
   pane itself and, on a phone, the results sheet stacked over both */
.pin-card{position:fixed;width:328px;border-radius:20px;
  box-shadow:0 24px 60px -12px rgba(20,20,20,.34),0 4px 14px rgba(20,20,20,.12);
  animation:pcIn .24s var(--ease);overflow:hidden;z-index:125;}
@keyframes pcIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.pin-card .pc-im{height:172px;}
.pin-card .pc-x{width:30px;height:30px;top:10px;right:10px;font-size:12px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(4px);transition:all .16s ease;}
.pin-card .pc-x:hover{background:var(--ink);color:#fff;}
.pin-card .pc-b{padding:14px 16px 16px;}
.pin-card h4{font-size:15.5px;gap:7px;margin-bottom:4px;}
.pin-card h4 .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pin-card .pc-sub{font-size:12px;margin-top:2px;}
.pin-card .pc-fee{font-size:13.5px;margin-top:8px;}
.pin-card .pc-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;
  font-size:10.5px;font-weight:800;margin-top:9px;}
.pin-card .pc-tag.applied{background:var(--ok-soft);color:var(--ok);}
.pin-card .pc-tag.enquired{background:var(--g100);color:var(--ink-2);}
.pin-card .pc-act{display:flex;gap:8px;margin-top:13px;}
.pin-card .pc-act .btn{flex:1;padding:11px 0;font-size:13px;}

/* ---------- selection bar ----------
   The shared `ddIn` keyframes animate `transform`, which wiped out the
   translateX(-50%) that centres the bar: it snapped sideways every time
   the count changed. Centre with the standalone `translate` property so
   the entrance animation composes with it instead of replacing it. */
.selbar{transform:none;translate:-50% 0;animation:selIn .24s var(--ease);}
@keyframes selIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.selbar .sb-avs .sg-logo{width:30px;height:30px;}
.selbar .sb-primary,.selbar .sb-second,.selbar .sb-ghost{transition:background .18s ease,border-color .18s ease;}

/* ---------- location picker ---------- */
.loc-modal{margin-top:-2px;}
.loc-search{display:flex;align-items:center;gap:10px;border:1px solid var(--field-line);border-radius:12px;padding:13px 16px;margin-bottom:16px;}
.loc-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.loc-search i{color:var(--g500);font-size:13px;}
.loc-search input{flex:1;border:none;outline:none;font-family:inherit;font-size:15px;font-weight:500;min-width:0;background:none;}
.loc-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--g600);margin-bottom:10px;}
.loc-crumb button{border:none;background:none;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);text-decoration:underline;cursor:pointer;padding:0;}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
@media(max-width:640px){.loc-grid{grid-template-columns:1fr;}}
.loc-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:none;background:none;font-family:inherit;text-align:left;padding:12px 10px;margin:0 -10px;border-radius:12px;cursor:pointer;border-bottom:1px solid var(--g100);transition:background .15s ease;}
.loc-item:hover{background:var(--g100);}
.loc-item strong{display:block;font-size:13.5px;font-weight:600;}
.loc-item em{font-style:normal;display:block;font-size:11.5px;color:var(--g500);font-weight:600;margin-top:1px;}
.loc-item i{color:var(--g400);font-size:11px;flex:0 0 auto;}
.loc-item.on{background:var(--g100);}
.loc-all{display:flex;align-items:center;gap:13px;width:100%;border:1px solid var(--field-line);border-radius:14px;padding:14px 16px;background:#fff;font-family:inherit;text-align:left;cursor:pointer;margin-bottom:12px;transition:all .18s var(--ease);}
.loc-all:hover{border-color:var(--ink);}
.loc-all .ic{width:40px;height:40px;border-radius:12px;background:var(--g100);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;}
.loc-all strong{display:block;font-size:14px;}
.loc-all em{font-style:normal;display:block;font-size:11.5px;color:var(--g500);font-weight:600;margin-top:2px;}
.loc-all .go{margin-left:auto;color:var(--g400);font-size:12px;}
/* near me */
.loc-all.near{border-color:var(--pink-2);background:linear-gradient(135deg,#FFF6F8,#fff);}
.loc-all.near .ic{background:var(--red);color:#fff;}
.loc-all.near:hover{border-color:var(--red);}
.loc-all.near.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.near-panel{border:1px solid var(--g200);border-radius:14px;padding:14px 16px;margin-bottom:18px;background:#FCFCFC;}
.near-panel .np-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin-bottom:4px;}
.near-panel .np-h i{color:var(--ok);flex:0 0 auto;}
.near-panel .np-h span{flex:1;min-width:0;}
.near-panel .np-s{font-size:11.5px;color:var(--g500);font-weight:600;margin-bottom:12px;line-height:1.5;}
.near-panel .np-off{border:none;background:none;font-family:inherit;font-weight:800;font-size:11.5px;color:var(--g500);text-decoration:underline;cursor:pointer;padding:0;flex:0 0 auto;white-space:nowrap;}
.rad-row{display:flex;flex-wrap:wrap;gap:7px;}
.rad-row .chip{min-width:58px;justify-content:center;text-align:center;}
.np-count{font-size:11.5px;font-weight:700;color:var(--g600);margin-top:10px;display:flex;align-items:center;gap:7px;}
.np-count i{color:var(--ink);font-size:11px;}
.loc-locating{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--g600);padding:14px 2px;}
.loc-locating .sp{width:15px;height:15px;border-radius:50%;border:2px solid var(--g300);border-top-color:var(--ink);animation:spin .7s linear infinite;flex:0 0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- apply flow ---------- */
.ap-step{font-size:13px;font-weight:700;margin:18px 0 10px;}
.ap-classes{display:flex;flex-wrap:wrap;gap:7px;}
.ap-list{border:1px solid var(--g300);border-radius:14px;overflow:hidden;}
.ap-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--g100);}
.ap-item:last-child{border-bottom:none;}
.ap-item img{width:52px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--g100);}
.ap-item .b{flex:1;min-width:0;}
.ap-item strong{display:block;font-size:13.5px;font-weight:600;}
.ap-item .sub{font-size:11.5px;color:var(--g500);font-weight:600;margin-top:1px;}
.ap-item .right{text-align:right;flex:0 0 auto;}
.ap-item .fee{font-size:13px;font-weight:800;}
.seat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;border-radius:999px;padding:4px 9px;margin-top:4px;}
.seat.ok{background:var(--ok-soft);color:var(--ok);}
.seat.low{background:var(--red-soft);color:var(--red-dark);}
.seat.none{background:var(--g100);color:var(--g500);}
.ap-item.blocked{background:#FCFCFC;}
.ap-item.blocked strong,.ap-item.blocked .fee{color:var(--g500);}
.ap-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--ink);margin-top:16px;padding-top:14px;font-weight:800;font-size:15px;}
.ap-note{font-size:12.5px;color:var(--g600);font-weight:600;background:var(--g100);border-radius:12px;padding:12px 14px;margin-top:12px;line-height:1.6;}
.ap-note i{margin-right:6px;}

/* ---------- compare ---------- */
.cmp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.cmp-bar .lbl{font-size:12.5px;font-weight:700;color:var(--g600);margin-right:auto;}
.cmp-pick{border:1px solid var(--field-line);background:#fff;border-radius:999px;padding:8px 15px;font-family:inherit;font-weight:800;font-size:12.5px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .16s ease;}
.cmp-pick:hover{border-color:var(--ink);}
.cmp-pick i{font-size:10px;transition:transform .2s ease;}
.cmp-pick.open i{transform:rotate(180deg);}
.cmp-picker{border:1px solid var(--g200);border-radius:14px;padding:4px 14px 14px;margin-bottom:14px;background:#FCFCFC;max-height:270px;overflow-y:auto;}
.cmp-picker h5{font-size:11px;font-weight:800;color:var(--g500);letter-spacing:.3px;text-transform:uppercase;margin:14px 0 8px;}
.cmp-picker .chiprow{gap:6px;}
.cmp-picker .chip{font-size:11.5px;padding:7px 12px;}
.cmp2-scroll{overflow-x:auto;border:1px solid var(--g200);border-radius:14px;-webkit-overflow-scrolling:touch;}
table.cmp2{border-collapse:separate;border-spacing:0;min-width:100%;width:100%;background:#fff;}
table.cmp2 th,table.cmp2 td{padding:11px 13px;font-size:12px;border-bottom:1px solid var(--g100);text-align:left;font-weight:600;vertical-align:middle;}
table.cmp2 thead th{background:#FAFAFA;font-weight:800;font-size:11.5px;position:sticky;top:0;z-index:3;border-bottom:1px solid var(--g200);}
table.cmp2 td:first-child,table.cmp2 th:first-child{position:sticky;left:0;z-index:2;background:#FAFAFA;font-weight:800;min-width:132px;box-shadow:6px 0 8px -8px rgba(20,20,20,.25);}
table.cmp2 thead th:first-child{z-index:4;}
table.cmp2 tr:last-child td{border-bottom:none;}
table.cmp2 .cm-sch{display:flex;align-items:center;gap:9px;min-width:150px;}
table.cmp2 .cm-sch strong{font-size:12.5px;font-weight:700;display:block;line-height:1.3;}
table.cmp2 .cm-sch span{font-size:10.5px;color:var(--g500);font-weight:600;}
.cm-mut{color:var(--g500);font-weight:600;}
.cm-ok{color:var(--ok);font-weight:800;}
.cm-win{background:var(--ok-soft);}
.cm-win b,.cm-win{color:var(--ok);}
.cm-tags{display:flex;flex-wrap:wrap;gap:4px;}
.cm-tags span{background:var(--g100);border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;color:var(--ink-2);}
.cmp-legend{font-size:11px;color:var(--g500);font-weight:600;margin-top:10px;display:flex;align-items:center;gap:7px;}
.cmp-legend em{font-style:normal;background:var(--ok-soft);color:var(--ok);border-radius:5px;padding:2px 7px;font-weight:800;}

.fs-empty-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}

/* ============================================================
   Mobile: immersive chrome, sheet map, bottom-sheet dropdowns
============================================================ */
.sheet-grab{display:none;}

@media(max-width:1100px){
  /* The primary header slides away on scroll down, so the filter rail
     becomes the top chrome and the results get the whole screen.
     Only .site-head may be transformed — #site-header also wraps the
     fixed bottom bar and menu drawer, and a transformed ancestor would
     turn it into their containing block. */
  .site-head{transition:transform .3s var(--ease);}
  body.nav-hidden .site-head{transform:translateY(-100%);}
  .fs-bar{z-index:118;top:var(--headH);}
  body.nav-hidden .fs-bar{top:0;}
  .mbar{transition:transform .3s var(--ease);}
  body.nav-hidden .mbar{transform:translateY(120%);}

  .fs-main,.fs-main.map-wide,.fs-main.map-off{padding:14px 16px 40px;}
  .fs-bar-in{padding:9px 0 9px 12px;gap:0;}
  .fs-scroll{gap:7px;padding:2px 8px 2px 0;}
  .fs-fixed{padding-left:8px;padding-right:12px;margin-left:0;background:#fff;border-left:1px solid var(--g200);}
  .fs-fixed .fs-toggle{display:none;}
  /* icon-only Filters button buys back ~58px of rail */
  .fs-filter-btn{width:38px;padding:0;justify-content:center;position:relative;}
  .fs-filter-btn .lbl{display:none;}
  .fs-filter-btn .badge-n{position:absolute;top:-4px;right:-4px;box-shadow:0 0 0 2px #fff;}

  .fs-head h1{font-size:19px;}
  /* stack rather than wrap: a wrapped flex line was centring the title */
  .fs-head{display:block;}
  .fs-head .hd-l{margin-bottom:10px;}
  .fs-tools{width:100%;gap:8px;}
}

/* ---------- the map sheet ---------- */
@media(max-width:1100px){
  .fs-map{display:none;position:fixed;left:0;right:0;top:calc(var(--headH) + 58px);bottom:0;width:auto;height:auto;
    border-radius:0;border:none;box-shadow:none;z-index:80;transition:top .28s var(--ease);}
  body.nav-hidden .fs-map{top:58px;}
  .fs-map.show{display:block;}
  .map-tools{top:12px;right:12px;}
  /* compact pins: a 390px pane cannot carry the desktop pill, and 140px
     pins simply pile up against the edges */
  .map-pin{height:29px;padding:0 11px 0 5px;gap:6px;font-size:12px;border-width:1.5px;}
  .map-pin .sg-logo,.map-pin .sg-check{display:none;}
  .map-pin .bd{height:18px;padding:0 6px;border-radius:5px;font-size:8.5px;letter-spacing:.35px;}
  .map-pin .adm{width:7px;height:7px;}
  .map-pin.hot,.map-pin.sel{transform:translate(-50%,-50%) scale(1.06);}

  /* the card floats above the sheet instead of hiding behind it */
  body.map-on .pin-card{position:fixed;left:12px;right:12px;width:auto;top:auto !important;
    bottom:calc(100dvh - var(--sheet-top,48vh) + 12px);
    display:flex;align-items:stretch;border-radius:18px;overflow:hidden;
    box-shadow:0 18px 44px rgba(20,20,20,.32);z-index:125;
    transition:bottom .34s var(--ease);}
  body.map-on.sheet-dragging .pin-card{transition:none;}
  /* at 80% there is no map band left to sit above, so it overlays the
     bottom of the sheet instead of disappearing */
  body.map-on.snap-full .pin-card{bottom:calc(16px + env(safe-area-inset-bottom));}
  body.map-on .pin-card::after{display:none;}
  body.map-on .pin-card .pc-im{width:118px;height:auto;flex:0 0 auto;}
  body.map-on .pin-card .pc-im img{height:100%;}
  body.map-on .pin-card .pc-x{width:26px;height:26px;top:6px;right:6px;font-size:11px;}
  body.map-on .pin-card .pc-b{flex:1;min-width:0;padding:11px 13px 12px;}
  body.map-on .pin-card h4{font-size:14px;}
  body.map-on .pin-card .pc-act{margin-top:10px;gap:7px;}
  body.map-on .pin-card .pc-act .btn{padding:9px 0;font-size:12.5px;}

  body.map-on{overflow:hidden;height:100dvh;padding-bottom:0;}
  body.map-on .site-foot{display:none !important;}
  body.map-on .fs-main{padding:0;margin:0;max-width:none;}
  /* Nothing scrolls the document in map mode, so a sticky bar never engages
     and the hidden header left a white band above the chips. Pin it. */
  body.map-on .fs-bar{position:fixed;left:0;right:0;top:var(--headH);}
  body.map-on.nav-hidden .fs-bar{top:0;}

  body.map-on .fs-results{
    position:fixed;left:0;right:0;bottom:0;top:var(--sheet-top,48vh);
    background:#fff;border-radius:20px 20px 0 0;z-index:95;
    border-top:1px solid var(--g200);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;
    padding:0 16px calc(84px + env(safe-area-inset-bottom));
    transition:top .34s var(--ease),padding-bottom .3s var(--ease);
  }
  /* the quick-action bar rides with the header, so the sheet reclaims its
     space the moment it slides away */
  body.map-on.nav-hidden .fs-results{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
  body.map-on.sheet-dragging .fs-results{transition:none;}
  /* both sticky bars have to sit above .sch-tools (z-index 3), or the
     hearts and checkboxes of the cards scroll straight through them */
  /* fixed height, and the header sticks 1px under it, so the two sticky
     bars overlap instead of leaving a seam for card text to show through */
  body.map-on .sheet-grab{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:6;
    width:calc(100% + 32px);height:22px;margin:0 -16px;padding:0;border:none;background:#fff;cursor:grab;touch-action:none;
    border-radius:20px 20px 0 0;}
  body.map-on .sheet-grab span{width:40px;height:5px;border-radius:99px;background:var(--g300);transition:background .2s ease;}
  body.map-on .sheet-grab:active span{background:var(--g500);}
  body.map-on .fs-head{position:sticky;top:21px;z-index:5;background:#fff;margin:0 -16px 12px;padding:6px 16px 10px;touch-action:none;
    transition:padding .2s var(--ease);}
  body.map-on.snap-peek .fs-head{padding-bottom:6px;}
  body.map-on.snap-peek .fs-results{overflow:hidden;}
  body.map-on.snap-peek .fs-tools,body.map-on.snap-peek .sub{display:none;}
  body.map-on .fs-grid{padding-bottom:8px;}
  body.map-on .fs-map{z-index:80;}
  /* the results sheet owns the bottom of the screen, so the selection
     bar and toasts have to ride above it */
  body.map-on .selbar{z-index:130;}
}

/* ---------- the secondary header collapses as the list scrolls ----------
   Pinned at full size it ate 180px of a phone screen. Once you start
   scrolling it shrinks to a one-line bar with a scrollable tool rail —
   the same behaviour in the sheet and in the plain list. */
@media(max-width:1100px){
  /* `:not(.map-on)` matters — inside the sheet the header sticks to the
     sheet's own grab bar, not to the filter rail */
  body:not(.map-on) .fs-head{position:sticky;top:calc(var(--headH) + var(--barH,58px));z-index:20;background:#fff;
    margin:0 -16px 14px;padding:2px 16px 10px;transition:padding .2s var(--ease),box-shadow .2s ease;}
  body.nav-hidden:not(.map-on) .fs-head{top:var(--barH,58px);}
  .fs-head h1{transition:font-size .2s var(--ease);}
  .fs-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scroll-padding-inline:16px;}
  .fs-tools::-webkit-scrollbar{display:none;}
  .fs-tools>*{flex:0 0 auto;}
  .fs-tools .t-sep{display:none;}

  /* Once you are into the list the count moves to the location chip, so the
     sticky bar is a single row of controls instead of three stacked lines. */
  body.head-collapsed .fs-head{padding-bottom:8px;border-bottom:1px solid rgba(20,20,20,.06);}
  body.head-collapsed .fs-head .hd-l{display:none;}
  body.head-collapsed .fs-pill.loc .cnt{display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.28);border-radius:999px;min-width:19px;height:19px;padding:0 5px;
    font-size:10.5px;font-weight:800;margin-left:1px;}
  body.head-collapsed .fs-pill.loc:not(.on) .cnt{background:var(--g200);color:var(--ink);}
  body.head-collapsed .fs-tools .fs-pill,
  body.head-collapsed .fs-tools .fs-toggle{height:32px;padding:0 12px;font-size:12px;}
  body.head-collapsed .fs-tools{gap:6px;}
  body.head-collapsed .fs-head .hd-l{margin-bottom:8px;}
}

/* ---------- dropdowns become bottom sheets on a phone ---------- */
@media(max-width:744px){
  #ddLayer.show .dd-scrim{background:rgba(15,15,15,.42);backdrop-filter:blur(2px);}
  .dd-pop.sheet{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    max-width:none;max-height:min(78dvh,620px);border-radius:22px 22px 0 0;
    padding:0;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 -14px 44px rgba(0,0,0,.26);animation:sheetUp .28s var(--ease);
  }
  .dd-pop.sheet .dd-sheet-h{display:flex;align-items:center;gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--g100);flex:0 0 auto;position:relative;}
  .dd-pop.sheet .dd-sheet-h::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:99px;background:var(--g300);}
  .dd-pop.sheet .dd-sheet-h h4{font-size:15.5px;letter-spacing:-.2px;margin-top:4px;}
  .dd-pop.sheet .dd-sheet-h .x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:none;background:var(--g100);color:var(--ink);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:4px;}
  .dd-pop.sheet .dd-sheet-b{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 6px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .dd-pop.sheet .ttl{font-size:12.5px;}
  /* the sheet already carries the heading; only "More" needs its sub-labels */
  .dd-pop.sheet:not([data-kind="more"]) .dd-sheet-b>.ttl:first-child{display:none;}
  .dd-pop.sheet .chiprow{gap:8px;}
  .dd-pop.sheet .chip{padding:11px 16px;font-size:13px;}
  .dd-pop.sheet .dd-radio button{padding:13px 11px;font-size:14px;}
  .dd-pop.sheet .dd-foot{margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--g100);flex:0 0 auto;background:#fff;}
  .dd-pop.sheet .dd-foot .app{padding:13px 22px;font-size:13px;}
  .dd-pop.sheet .fee-range{padding-bottom:6px;}
}

/* ---------- compact selection bar on a phone ---------- */
@media(max-width:900px){
  .selbar{left:10px;right:10px;transform:none;translate:none;max-width:none;flex-direction:column;align-items:stretch;gap:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));padding:11px 12px;border-radius:18px;}
  .sb-who{gap:9px;}
  .sb-avs .sg-logo{width:26px;height:26px;}
  .sb-more{width:26px;height:26px;font-size:10px;}
  .sb-txt b{font-size:13px;}
  .sb-txt span{font-size:10.5px;}
  .sb-clear{margin-left:auto;width:26px;height:26px;}
  /* one row of four: two icon buttons, one ghost, one primary that grows */
  .sb-acts{display:flex;gap:7px;}
  .sb-ghost{background:rgba(255,255,255,.12);padding:0;width:40px;height:40px;border-radius:12px;flex:0 0 auto;font-size:14px;}
  .sb-ghost .t{display:none;}
  .sb-second{padding:0 14px;height:40px;border-radius:12px;font-size:12.5px;flex:0 0 auto;}
  .sb-primary{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:12px;font-size:13px;}
  body.has-sel .mbar{display:none;}
  body.has-sel{padding-bottom:132px;}
}
@media(max-width:380px){
  .sb-second .t{display:none;}
  .sb-second{width:40px;padding:0;}
}

/* ============================================================
   "You already contacted this school" markers
============================================================ */
.you-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;
  font-size:10.5px;font-weight:800;letter-spacing:-.1px;white-space:nowrap;}
.you-tag i{font-size:9.5px;}
.you-tag.applied{background:var(--ok-soft);color:var(--ok);}
.you-tag.enquired{background:var(--g100);color:var(--ink-2);}
.sch .you-row{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.sch .you-row .stage{font-size:10.5px;font-weight:700;color:var(--g500);}
.map-pin.mine{box-shadow:0 0 0 2px var(--ok),0 4px 12px -2px rgba(20,20,20,.2);}

/* ============================================================
   My applications: tabs, per-school timeline
============================================================ */
.mya-tabs{display:flex;gap:6px;background:var(--g100);border-radius:999px;padding:5px;margin-bottom:18px;}
.mya-tabs button{flex:1;border:none;background:none;border-radius:999px;padding:11px 8px;font-family:inherit;
  font-weight:800;font-size:12.5px;color:var(--g600);cursor:pointer;transition:all .2s var(--ease);
  display:flex;align-items:center;justify-content:center;gap:7px;}
.mya-tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow);}
.mya-tabs .n{background:var(--g200);color:var(--ink-2);border-radius:999px;min-width:19px;padding:0 5px;
  font-size:10.5px;font-weight:800;line-height:19px;}
.mya-tabs button.on .n{background:var(--ink);color:#fff;}

.ap-group-h .prog{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--g600);}
.ap-sch{border-bottom:1px solid var(--g100);}
.ap-sch:last-child{border-bottom:none;}
.ap-sch-h{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;border:none;background:none;
  font-family:inherit;text-align:left;cursor:pointer;transition:background .15s ease;}
.ap-sch-h:hover{background:#FCFCFC;}
.ap-sch-h .b{flex:1;min-width:0;}
.ap-sch-h strong{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-sch-h .b span{font-size:11.5px;color:var(--g500);font-weight:600;}
.ap-sch-h .chev{color:var(--g400);font-size:11px;flex:0 0 auto;transition:transform .22s var(--ease);}
.ap-sch.open .ap-sch-h .chev{transform:rotate(180deg);}
.st-pill{flex:0 0 auto;border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:800;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;}
.st-pill.wait{background:var(--g100);color:var(--g600);}
.st-pill.live{background:var(--red-soft);color:var(--red-dark);}
.st-pill.good{background:var(--ok-soft);color:var(--ok);}
.st-pill.gone{background:var(--g100);color:var(--g500);}
.st-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.st-pill.live .dot{animation:pulseDot 1.6s infinite;}

.tl{display:none;padding:2px 14px 16px 14px;}
.ap-sch.open .tl{display:block;animation:ddIn .2s ease;}
.tl-step{display:flex;gap:12px;position:relative;padding-bottom:14px;}
.tl-step:last-child{padding-bottom:0;}
.tl-step .ic{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;background:var(--g100);color:var(--g400);border:1.5px solid var(--g200);z-index:1;}
.tl-step::before{content:'';position:absolute;left:11.5px;top:24px;bottom:0;width:1.5px;background:var(--g200);}
.tl-step:last-child::before{display:none;}
.tl-step.done .ic{background:var(--ok);border-color:var(--ok);color:#fff;}
.tl-step.done::before{background:var(--ok);}
.tl-step.now .ic{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(227,28,95,.14);}
.tl-step.bad .ic{background:var(--g500);border-color:var(--g500);color:#fff;}
.tl-step .tx{flex:1;min-width:0;padding-top:2px;}
.tl-step .tx b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);}
.tl-step.todo .tx b{color:var(--g500);font-weight:600;}
.tl-step .tx span{display:block;font-size:11.5px;color:var(--g500);font-weight:600;margin-top:2px;line-height:1.5;}
.tl-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.tl-acts .btn{padding:9px 15px;font-size:12px;}
.mya-empty-tab{text-align:center;padding:26px 10px;}
.mya-empty-tab .ic{width:56px;height:56px;border-radius:50%;background:var(--g100);color:var(--g500);
  display:inline-flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:12px;}
.mya-empty-tab h3{font-size:16.5px;margin-bottom:6px;}
.mya-empty-tab p{font-size:13px;color:var(--g600);font-weight:500;margin-bottom:16px;}
@media(max-width:560px){
  /* A long status pill beside a long school name leaves neither any room
     on a phone: the name was wrapping two words to a line. Stack instead:
     logo | name + meta | chevron on the first row, the pill on its own
     row under the name, logo and chevron spanning both rows. */
  .ap-sch-h{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-areas:"logo b chev" "logo pill chev";
    align-items:center;column-gap:10px;row-gap:7px;padding:12px;}
  .ap-sch-h .sg-logo{grid-area:logo;align-self:start;margin-top:2px;}
  .ap-sch-h .b{grid-area:b;}
  .ap-sch-h strong{white-space:normal;line-height:1.3;}
  .ap-sch-h .st-pill{grid-area:pill;justify-self:start;margin:0;font-size:10px;padding:5px 9px;}
  .ap-sch-h .chev{grid-area:chev;}
  .ap-group-h .prog{flex:0 0 auto;white-space:nowrap;}
  .mya-tabs button{font-size:12px;padding:11px 6px;gap:6px;}
  .tl{padding:2px 12px 14px;}
  .tl-acts .btn{padding:9px 13px;font-size:11.5px;}
}

/* ============================================================
   Radius: quick chips plus a free slider
============================================================ */
.rad-slider{margin-top:14px;}
.rad-slider .rs-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
.rad-slider .rs-top b{font-size:15px;font-weight:800;letter-spacing:-.3px;}
.rad-slider .rs-top span{font-size:11.5px;color:var(--g500);font-weight:700;}
.rad-slider input[type=range]{width:100%;display:block;}
.rad-slider .rs-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--g500);font-weight:700;margin-top:7px;}

/* ============================================================
   In-dialog confirm (duplicate application warning)
============================================================ */
.sg-confirm{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(3px);animation:fadeIn .16s ease;}
.sg-confirm .cf-box{background:#fff;border:1px solid var(--g200);border-radius:18px;padding:22px;
  box-shadow:0 24px 60px rgba(20,20,20,.24);max-width:400px;width:100%;animation:popUp .22s var(--ease);}
.sg-confirm .cf-ic{width:48px;height:48px;border-radius:50%;background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px;}
.sg-confirm h4{font-size:17px;margin-bottom:8px;letter-spacing:-.3px;}
.sg-confirm p{font-size:13px;color:var(--g600);font-weight:500;line-height:1.6;}
.sg-confirm ul{list-style:none;margin:12px 0 0;padding:0;}
.sg-confirm li{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  background:var(--g100);border-radius:10px;padding:9px 12px;margin-bottom:7px;}
.sg-confirm li span{font-weight:600;color:var(--g500);font-size:11.5px;margin-left:auto;white-space:nowrap;}
.sg-confirm .cf-acts{display:flex;gap:9px;margin-top:18px;}
.sg-confirm .cf-acts .btn{flex:1;}
.modal-box{position:relative;}

/* ============================================================
   Range sliders — same anatomy as the profile editor's .pe-slider
   (assets/website/pages/profile/css/profile-editor-fields.css): 5px track,
   red fill up to the thumb, 22px ink thumb with a white ring. The fill is
   painted by feeFill()/radFill() as an inline gradient.
============================================================ */
.fee-range{gap:16px;}
.fee-range .val{font-size:13px;}
.fee-range input[type=range],.rad-slider input[type=range]{
  -webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--red) 0 var(--fill,0%),var(--g200) var(--fill,0%));outline:none;cursor:pointer;}
.fee-range input[type=range]::-moz-range-track,.rad-slider input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--g200);}
.fee-range input[type=range]::-moz-range-progress,.rad-slider input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--red);}
.fee-range input[type=range]::-webkit-slider-thumb,.rad-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);
  cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);transition:none;}
.fee-range input[type=range]::-webkit-slider-thumb:hover,.fee-range input[type=range]::-webkit-slider-thumb:active,
.rad-slider input[type=range]::-webkit-slider-thumb:hover,.rad-slider input[type=range]::-webkit-slider-thumb:active{transform:none;cursor:pointer;}
.fee-range input[type=range]::-moz-range-thumb,.rad-slider input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid #fff;box-shadow:none;}