/* v635 - LIST: Area dropdown redesigned (pairs with js/307-area-navigator.js). Same dropdown, corporate look + guide animation.
   Remove the css link + script tag to roll back to the previous dropdown. Animations use transform/opacity only. */

/* one-time "start here" tip on the Area pill (ends for good after the first open) */
.avl-kw .filter-toggle-btn.avl-area-btn:not(.hint-seen):not(.has-area)::after{
  content:'Start here \00B7  pick an area';position:absolute;top:calc(100% + 11px);right:0;z-index:40;white-space:nowrap;pointer-events:none;
  padding:8px 12px;border-radius:10px;background:#0f1f35;color:#fff;font:700 11px/1 var(--font-sans,inherit);letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(15,31,53,.3);opacity:0;animation:anvTip 7s ease 1.2s 1 both;}
.avl-kw .filter-toggle-btn.avl-area-btn:not(.hint-seen):not(.has-area)::before{
  content:'';position:absolute;top:calc(100% + 6px);right:22px;z-index:41;width:10px;height:10px;background:#0f1f35;transform:rotate(45deg);pointer-events:none;opacity:0;animation:anvTipArrow 7s ease 1.2s 1 both;}
@keyframes anvTip{0%{opacity:0;transform:translateY(-5px)}8%{opacity:1;transform:none}14%{transform:translateY(-2px)}20%{transform:none}88%{opacity:1}100%{opacity:0}}
@keyframes anvTipArrow{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}

/* ---- animated Area icon (map + pin) ---- */
.avl-area-btn .avl-area-pin,.avl-area-btn .avl-area-dot,.avl-area-btn .avl-area-map{transform-box:fill-box;transform-origin:50% 100%;}
.avl-area-btn .avl-area-dot{transform-origin:center;}
/* before the first use: the pin hops and a ripple spreads from its foot, so the pill reads as "tap me" */
.avl-area-btn:not(.hint-seen):not(.has-area) .avl-area-pin{animation:anvPinHop 1.9s cubic-bezier(.3,.7,.4,1) 1s 4;}
.avl-area-btn:not(.hint-seen):not(.has-area) .avl-area-dot{animation:anvDotPing 1.9s ease-out 1s 4;}
@keyframes anvPinHop{0%,55%,100%{transform:translateY(0)}18%{transform:translateY(-3.2px) scale(1.06)}34%{transform:translateY(0)}44%{transform:translateY(-1.2px)}}
@keyframes anvDotPing{0%,30%{transform:scale(1);opacity:1}60%{transform:scale(1.9);opacity:.35}100%{transform:scale(1);opacity:1}}
/* hover / open: the pin lifts and the map unfolds a little */
.avl-area-btn:hover .avl-area-pin,.avl-area-btn[aria-expanded="true"] .avl-area-pin{animation:anvPinLift .5s cubic-bezier(.34,1.56,.64,1) both;}
.avl-area-btn[aria-expanded="true"] .avl-area-map{animation:anvMapTilt .45s ease both;}
@keyframes anvPinLift{from{transform:translateY(0)}to{transform:translateY(-2px) scale(1.1)}}
@keyframes anvMapTilt{from{transform:none}to{transform:scale(1.07)}}
/* choosing an area: the pin drops in with a little bounce */
.avl-area-btn.anv-drop .avl-area-pin{animation:anvPinDrop .75s cubic-bezier(.3,1.5,.5,1) both;}
.avl-area-btn.anv-drop .avl-area-dot{animation:anvDotPing .75s ease-out both;}
@keyframes anvPinDrop{0%{transform:translateY(-9px);opacity:0}45%{transform:translateY(0);opacity:1}62%{transform:translateY(-2.5px)}80%{transform:translateY(0)}100%{transform:none}}

/* card */
.avl-kw .avl-tools .avl-area-picker-menu.anv-menu{
  width:min(320px,calc(100vw - 24px));padding:0;gap:0;border-radius:18px;border:1px solid rgba(22,45,76,.14);overflow-x:hidden;overflow-y:auto;
  background:var(--surface,#fff);box-shadow:0 24px 56px rgba(15,31,53,.28),0 2px 6px rgba(15,31,53,.08);
  max-height:min(78vh,calc(100dvh - 150px));transform-origin:calc(100% - 36px) 0;}
.avl-kw .avl-tools .avl-area-picker-menu.anv-menu.is-open{display:block;animation:anvPop .24s cubic-bezier(.2,.9,.3,1.08);}
@keyframes anvPop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.anv{color:var(--ink,#162d4c);}

/* header strip */
.anv-head{position:relative;display:flex;align-items:center;gap:9px;padding:11px 14px 12px;background:linear-gradient(150deg,#0f1f35,#1b3558);color:#fff;}
.anv-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-500,#cea577),transparent);}
.anv-ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(206,165,119,.18);color:var(--gold-400,#e0bd94);font-size:12px;}
.anv-title{font:800 11.5px/1 var(--font-sans,inherit);letter-spacing:.14em;text-transform:uppercase;}
.anv-legend{margin-left:auto;font:700 9.5px/1 var(--font-sans,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400,#e0bd94);}

/* rows */
.anv-list{display:grid;gap:2px;padding:7px;}
.anv-group{display:grid;}
.anv-row{position:relative;width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto 18px;align-items:center;gap:11px;padding:11px 10px 11px 9px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;font-family:var(--font-sans,inherit);cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .2s ease,border-color .2s ease,transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;}
.anv-row::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--gold-500,#cea577);transform:scaleY(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.anv-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy-800,#1f3a5f);color:#fff;font:800 11.5px/1 var(--font-sans,inherit);box-shadow:0 2px 5px rgba(22,45,76,.22);transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);}
.anv-all .anv-n{background:rgba(22,45,76,.08);color:var(--navy-800,#1f3a5f);box-shadow:none;font-size:12px;}
.anv-name{display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:7px;font:700 14px/1.2 var(--font-sans,inherit);color:var(--ink,#162d4c);}
.anv-cnt{min-width:30px;padding:4px 8px;border-radius:999px;text-align:center;background:rgba(206,165,119,.16);color:var(--gold-600,#b8874f);font:800 12px/1 var(--font-sans,inherit);}
.anv-end{display:grid;place-items:center;font-size:11px;color:var(--muted,#7c8aa0);}
.anv-chev{transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .2s ease;}
.anv-group.is-open .anv-chev{transform:rotate(180deg);color:var(--gold-600,#b8874f);}
.anv-chk{color:var(--gold-600,#b8874f);font-size:12px;}

.anv-row:hover,.anv-row:focus-visible{background:rgba(206,165,119,.14);border-color:rgba(206,165,119,.5);outline:none;}
.anv-row:hover::before,.anv-row:focus-visible::before{transform:scaleY(1);}
.anv-row:hover .anv-n,.anv-row:focus-visible .anv-n{background:var(--gold-600,#b8874f);color:#fff;transform:scale(1.1);}
.anv-group.is-open>.anv-row{background:rgba(206,165,119,.12);}
.anv-row.is-selected{background:rgba(22,45,76,.06);border-color:rgba(22,45,76,.18);}
.anv-row.is-selected::before{transform:scaleY(1);background:var(--navy-800,#1f3a5f);}
.anv-row.is-selected .anv-n{background:var(--gold-500,#cea577);color:#0f1f35;}
.anv-row.is-selected .anv-name{font-weight:800;}
.anv-row.is-picked,.anv-srow.is-picked{background:var(--navy-800,#1f3a5f)!important;border-color:var(--navy-800,#1f3a5f)!important;transform:scale(.985);}
.anv-row.is-picked .anv-name,.anv-row.is-picked .anv-chk,.anv-srow.is-picked,.anv-srow.is-picked span{color:#fff!important;}

/* in-place expansion (smooth height via grid rows) */
.anv-sub{display:grid;grid-template-rows:1fr;margin:2px 0 4px 22px;padding-left:12px;border-left:2px solid rgba(206,165,119,.4);}
.anv-sub-in{display:grid;gap:2px;overflow:hidden;min-height:0;}
.anv-group.is-just .anv-sub{animation:anvOpen .34s cubic-bezier(.2,.8,.2,1);}
.anv-group.is-just .anv-srow{animation:anvSlide .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j,0) * 45ms + 60ms);}
@keyframes anvOpen{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
@keyframes anvSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.anv-srow{position:relative;width:100%;display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:10px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink,#162d4c);font:600 13px/1.2 var(--font-sans,inherit);text-align:left;cursor:pointer;transition:background .2s ease,transform .22s cubic-bezier(.34,1.56,.64,1);}
.anv-srow i{text-align:center;font-size:11px;color:var(--gold-500,#cea577);}
.anv-srow em{font-style:normal;font-weight:800;font-size:11.5px;color:var(--gold-600,#b8874f);}
.anv-srow:hover,.anv-srow:focus-visible{background:rgba(206,165,119,.14);outline:none;transform:translateX(3px);}
.anv-srow.is-selected{background:rgba(22,45,76,.07);font-weight:800;}
.anv-srow.is-selected i{color:var(--navy-800,#1f3a5f);}

/* entrance */
.anv-fresh .anv-row{animation:anvRowIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms + 80ms);}
@keyframes anvRowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* GUIDE: a gold highlight walks the rows, ends on the most-vacant community */
.anv-row.is-guided{background:rgba(206,165,119,.2);border-color:var(--gold-500,#cea577);transform:translateX(5px);box-shadow:0 5px 16px rgba(184,135,79,.25);}
.anv-row.is-guided::before{transform:scaleY(1);}
.anv-row.is-guided .anv-n{background:var(--gold-600,#b8874f);transform:scale(1.12);}
.anv-row.is-guided .anv-n{animation:anvRing .8s ease-out infinite;}
@keyframes anvRing{0%{box-shadow:0 0 0 0 rgba(206,165,119,.65)}100%{box-shadow:0 0 0 9px rgba(206,165,119,0)}}
.anv-row.is-final{animation:anvFinal 1.1s ease-in-out 2;}
@keyframes anvFinal{0%,100%{box-shadow:0 5px 16px rgba(184,135,79,.25)}50%{box-shadow:0 0 0 5px rgba(206,165,119,.35),0 5px 16px rgba(184,135,79,.3)}}
.anv.is-guiding .anv-group:not(.is-open) .anv-chev{animation:anvNudge 1.1s ease-in-out infinite;}
@keyframes anvNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.anv-hint{display:flex;align-items:center;gap:8px;margin:0 7px;padding:0 10px;max-height:0;overflow:hidden;opacity:0;border-radius:10px;background:#0f1f35;color:#fff;font:600 11.5px/1.25 var(--font-sans,inherit);transition:max-height .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease;}
.anv-hint.is-on{max-height:56px;opacity:1;margin:2px 7px 9px;padding:9px 11px;}
.anv-hint i{color:var(--gold-400,#e0bd94);font-size:12px;animation:anvNudge 1.1s ease-in-out infinite;}

/* dark */
[data-theme="dark"] .avl-kw .avl-tools .avl-area-picker-menu.anv-menu{background:#1c2430;border-color:rgba(206,165,119,.35);}
[data-theme="dark"] .anv,[data-theme="dark"] .anv-name,[data-theme="dark"] .anv-srow{color:#eef2f7;}
[data-theme="dark"] .anv-all .anv-n{background:rgba(255,255,255,.1);color:#eef2f7;}
[data-theme="dark"] .anv-row.is-selected{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}
[data-theme="dark"] .anv-hint{background:#0f1f35;}

/* responsive: phones keep the card inside the screen; tablets / desktop get a roomier card; short landscape screens tighten the rows */
@media(min-width:700px){.avl-kw .avl-tools .avl-area-picker-menu.anv-menu{width:344px;}.anv-row{padding:12px 12px 12px 10px;}.anv-name{font-size:14.5px;}}
@media(max-width:359px){.avl-kw .avl-tools .avl-area-picker-menu.anv-menu{width:calc(100vw - 28px);}.anv-row{gap:9px;padding:10px 8px;}.anv-name{font-size:13.5px;}.anv-title{letter-spacing:.1em;}}
@media(max-height:560px){.avl-kw .avl-tools .avl-area-picker-menu.anv-menu{max-height:calc(100dvh - 96px);}.anv-row{padding:8px 9px;}.anv-head{padding:8px 12px 9px;}.anv-srow{padding:8px 10px;}}
@media(hover:none){.anv-row:hover,.anv-srow:hover{transform:none;}}
@media(prefers-reduced-motion:reduce){.anv *,.anv-menu,.avl-area-btn::before,.avl-area-btn::after,.avl-area-btn .avl-area-pin,.avl-area-btn .avl-area-dot,.avl-area-btn .avl-area-map{animation:none!important;transition:none!important;}}

/* ---- ADMIN TOOLBAR (<= 900px): two-row pill so the search field keeps its room ---- */
@media(max-width:900px){
  .avl-kw.avl-kw--admin{display:block;}
  .avl-kw.avl-kw--admin .docket-kw-input-wrap{flex-wrap:wrap;row-gap:0;border-radius:22px;padding:4px 8px 7px 5px;max-width:100%!important;width:100%;box-sizing:border-box;}
  .avl-kw.avl-kw--admin .avl-sf{flex:1 1 100%;order:1;height:36px;}
  .avl-kw.avl-kw--admin .avl-sf input{font-size:14px;}
  .avl-kw.avl-kw--admin .avl-tools{order:2;flex:1 1 100%;width:100%;box-sizing:border-box;border-left:0;border-top:1.5px solid rgba(22,45,76,.1);padding:7px 0 0 3px;gap:7px;justify-content:flex-start;}
  [data-theme="dark"] .avl-kw.avl-kw--admin .avl-tools{border-top-color:rgba(255,255,255,.14);}
  .avl-kw.avl-kw--admin .avl-tools .filter-toggle-btn.avl-area-btn,.avl-kw.avl-kw--admin .avl-tools .filter-toggle-btn.avl-area-btn.has-area{max-width:150px;}
  /* the Data button lives in row 2, pushed to the right, compact like its neighbours */
  .avl-kw.avl-kw--admin .avl-tools .avd{margin-left:auto;flex:none;}
  .avl-kw.avl-kw--admin .avl-tools .avd-toggle{height:30px;padding:0 11px;font-size:12px;gap:6px;border-width:1.5px;}
  .avl-kw.avl-kw--admin .avl-tools .avd-cards{right:-4px;top:calc(100% + 12px);width:min(340px,calc(100vw - 28px));}
  .avl-kw.avl-kw--admin #avlUnderstood{margin-top:6px;}
}
@media(max-width:360px){
  .avl-kw.avl-kw--admin .avl-tools{gap:5px;}
  .avl-kw.avl-kw--admin .avl-tools .avd-toggle{padding:0 9px;}
  .avl-kw.avl-kw--admin .avl-tools .avd-toggle .avd-caret{display:none;}
}

/* v636: slimmer area card on phones */
@media(max-width:640px){
  .avl-kw .avl-tools .avl-area-picker-menu.anv-menu{width:min(258px,calc(100vw - 56px));border-radius:16px;}
  .anv-head{padding:10px 12px 11px;gap:8px;}.anv-title{font-size:10.5px;letter-spacing:.1em;}.anv-legend{font-size:9px;letter-spacing:.08em;}
  .anv-list{padding:6px;}.anv-row{grid-template-columns:26px minmax(0,1fr) auto 16px;gap:9px;padding:10px 8px 10px 7px;}
  .anv-n{width:24px;height:24px;font-size:11px;}.anv-name{font-size:13.5px;}.anv-cnt{min-width:28px;padding:4px 7px;font-size:11.5px;}
  .anv-sub{margin-left:16px;padding-left:9px;}.anv-srow{padding:9px 8px;font-size:12.5px;}
  .anv-hint{font-size:11px;}
}
@media(max-width:359px){.avl-kw .avl-tools .avl-area-picker-menu.anv-menu{width:calc(100vw - 64px);}}