/* v876 - ADMIN phones/tablets: the search-bar drop-arrow tray rebuilt as a proper tool panel (js/309 builds the tray, js/414 labels + places the items).
   BEFORE: a pill of mixed-size buttons (css/399 forced 26px height on every button, so sizes/shapes differed) that ran off the left edge.
   NOW: a card anchored under the arrow, uniform 48px tiles in a 4-column grid, a caption under each tile, sand = active filter, data panels open as a bottom sheet.
   Brand tokens only (css/399 / css/415). Remove this link to go back to v875. */
@media(max-width:900px){
  /* panel */
  html body .avl-kw.avl-kw--admin .avl-tools .avl-tray{
    display:grid;grid-template-columns:repeat(4,72px);grid-auto-rows:70px;align-items:start;justify-items:center;gap:6px 4px;
    width:max-content;max-width:calc(100vw - 16px);padding:16px 12px 12px;border-radius:20px;right:0;top:calc(100% + 14px);
    background:var(--c-white);border:1px solid rgba(var(--c-starlight-rgb),.14);
    box-shadow:0 22px 44px -16px rgba(var(--c-starlight-dark-rgb),.5),0 2px 8px rgba(var(--c-starlight-rgb),.08);
    transform-origin:calc(100% - 17px) -10px;z-index:140}
  html body .avl-kw.avl-kw--admin .avl-tools .avl-tray::before{top:-7px;right:11px;width:13px;height:13px;background:var(--c-white);border-left:1px solid rgba(var(--c-starlight-rgb),.14);border-top:1px solid rgba(var(--c-starlight-rgb),.14);border-radius:3px 0 0 0}
  [data-theme="dark"] html body .avl-kw.avl-kw--admin .avl-tools .avl-tray,[data-theme="dark"] .avl-kw.avl-kw--admin .avl-tools .avl-tray{background:var(--c-starlight-dark);border-color:rgba(var(--c-white-rgb),.16)}
  [data-theme="dark"] .avl-kw.avl-kw--admin .avl-tools .avl-tray::before{background:var(--c-starlight-dark);border-color:rgba(var(--c-white-rgb),.16)}
  /* flatten the Data bar so its 3 icons become ordinary tiles */
  html body .avl-kw.avl-kw--admin .avl-tray #avdBar,html body .avl-kw.avl-kw--admin .avl-tray #avdCards{display:contents!important}
  .avl-kw.avl-kw--admin .avl-tray .avd-tag,.avl-kw.avl-kw--admin .avl-tray .avd-toggle{display:none!important}
  /* order */
  html body .avl-kw.avl-kw--admin .avl-tray>#avlFeaturedBtn{order:1}
  html body .avl-kw.avl-kw--admin .avl-tray>#avlFeatStyleBtn{order:2}
  html body .avl-kw.avl-kw--admin .avl-tray>#avlShareLinkBtn{order:3}
  html body .avl-kw.avl-kw--admin .avl-tray>#avlVdBtn{order:4}
  html body .avl-kw.avl-kw--admin .avl-tray #avdRawCard{order:5}
  html body .avl-kw.avl-kw--admin .avl-tray #avdXlCard{order:6}
  html body .avl-kw.avl-kw--admin .avl-tray #avdTwCard{order:7}
  /* stagger */
  .avl-kw.avl-kw--admin .avl-tools.is-tray-open .avl-tray>*{transition-delay:calc(var(--i,0)*45ms + 60ms)}
  .avl-kw.avl-kw--admin .avl-tray>#avlFeaturedBtn{--i:0}.avl-kw.avl-kw--admin .avl-tray>#avlFeatStyleBtn{--i:1}.avl-kw.avl-kw--admin .avl-tray>#avlShareLinkBtn{--i:2}.avl-kw.avl-kw--admin .avl-tray>#avlVdBtn{--i:3}
  /* tiles: every button + data icon = same 48px rounded square */
  html body .avl-kw.avl-kw--admin .avl-tools .avl-tray>button,html body .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp>.avd-ico{
    position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px!important;height:48px!important;min-height:0!important;min-width:0!important;margin:0!important;padding:0!important;
    border-radius:14px!important;background:var(--c-white)!important;border:1px solid var(--c-metallic)!important;color:var(--c-starlight)!important;box-shadow:none!important;
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
  [data-theme="dark"] .avl-kw.avl-kw--admin .avl-tray>button,[data-theme="dark"] .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp>.avd-ico{background:rgba(var(--c-white-rgb),.08)!important;border-color:rgba(var(--c-white-rgb),.22)!important;color:var(--c-white)!important}
  html body .avl-kw.avl-kw--admin .avl-tray>button i,html body .avl-kw.avl-kw--admin .avl-tray>button svg,html body .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp>.avd-ico i:not(.avdp-dot){
    font-size:18px!important;width:18px!important;height:18px!important;max-height:none!important;display:inline-flex!important;align-items:center;justify-content:center;color:inherit!important;stroke:currentColor}
  html body .avl-kw.avl-kw--admin .avl-tray>button:active,html body .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp>.avd-ico:active{transform:scale(.92)}
  html body .avl-kw.avl-kw--admin .avl-tray>button:hover,html body .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp>.avd-ico:hover,html body .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp.avdp-open>.avd-ico{background:var(--c-starlight)!important;border-color:var(--c-starlight)!important;color:var(--c-white)!important}
  /* active (filter on) = sand */
  html body .avl-kw.avl-kw--admin .avl-tray>button.active,html body .avl-kw.avl-kw--admin .avl-tray>button.is-on{background:linear-gradient(135deg,var(--c-sand-light),var(--c-sand))!important;border-color:var(--c-sand-dark)!important;color:var(--c-starlight)!important}
  /* captions under each tile */
  html body .avl-kw.avl-kw--admin .avl-tray [data-lbl]::after{content:attr(data-lbl);position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:72px;text-align:center;
    font:600 12px/1.15 var(--font-body,system-ui,sans-serif);letter-spacing:.1px;color:var(--c-grey-700);white-space:nowrap;pointer-events:none}
  [data-theme="dark"] .avl-kw.avl-kw--admin .avl-tray [data-lbl]::after{color:var(--c-white)}
  .avl-kw.avl-kw--admin .avl-tray .avd-card.avdp{position:relative;display:block;width:48px;height:48px;margin:0;padding:0;border:0;background:none;box-shadow:none;order:inherit}
  /* "Vacant since": own mask icon (no font/svg dependency - the old one rendered empty) */
  html body .avl-kw.avl-kw--admin .avl-tray>#avlVdBtn>*{display:none!important}
  html body .avl-kw.avl-kw--admin .avl-tray>#avlVdBtn::before{content:"";display:block;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2v4.5a5 5 0 0 0 2 4L12 12l-3 1.5a5 5 0 0 0-2 4V22M17 2v4.5a5 5 0 0 1-2 4L12 12l3 1.5a5 5 0 0 1 2 4V22'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2v4.5a5 5 0 0 0 2 4L12 12l-3 1.5a5 5 0 0 0-2 4V22M17 2v4.5a5 5 0 0 1-2 4L12 12l3 1.5a5 5 0 0 1 2 4V22'/%3E%3C/svg%3E") center/contain no-repeat}
  html body .avl-kw.avl-kw--admin .avl-tray>#avlVdBtn.is-new::after{content:"";position:absolute;top:-3px;right:-3px;left:auto;width:10px;height:10px;transform:none;border-radius:50%;background:var(--c-danger);border:2px solid var(--c-white)}
  /* status dot of the sync tile */
  .avl-kw.avl-kw--admin .avl-tray .avdp-dot{top:-3px;right:-3px;width:11px;height:11px;border:2px solid var(--c-white)}
  /* data panels (sheet link / Excel / sync) open as a bottom sheet - never off-screen */
  html body .avl-kw.avl-kw--admin .avl-tray .avdp-panel{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:520px;margin:0 auto;z-index:1400;padding:16px;border-radius:18px;
    background:var(--c-white);border:1px solid rgba(var(--c-starlight-rgb),.14);border-top:3px solid var(--c-sand);box-shadow:0 -10px 40px -12px rgba(var(--c-starlight-dark-rgb),.55);color:var(--c-starlight)}
  [data-theme="dark"] .avl-kw.avl-kw--admin .avl-tray .avdp-panel{background:var(--c-starlight-dark);border-color:rgba(var(--c-white-rgb),.16);border-top-color:var(--c-sand)}
  .avl-kw.avl-kw--admin .avl-tray .avdp-panel input[type=url],.avl-kw.avl-kw--admin .avl-tray .avdp-panel input[type=text]{height:44px;font-size:16px;border-radius:12px}
  .avl-kw.avl-kw--admin .avl-tray .avdp-panel .avd-go{height:44px;padding:0 16px;font-size:14px;border-radius:12px;background:var(--c-starlight);color:var(--c-white)}
}
@media(max-width:360px){html body .avl-kw.avl-kw--admin .avl-tools .avl-tray{grid-template-columns:repeat(4,66px)}html body .avl-kw.avl-kw--admin .avl-tray [data-lbl]::after{width:66px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.avl-kw.avl-kw--admin .avl-tray>button,.avl-kw.avl-kw--admin .avl-tray .avd-ico{transition:none!important}}