/* The surrounding layer is transparent to tray input; only the hand catches it. */
.tray-card-hand { position:absolute; z-index:7; left:12px; right:12px; bottom:58px; display:flex; justify-content:center; pointer-events:none; }
.tray-card-hand[hidden] { display:none; }
.tray-hand-panel { width:min(740px,100%); min-width:0; padding:8px 12px; border:1px solid #d3decb; border-radius:18px; background:#f7f5e8f2; box-shadow:0 10px 30px #193e3529; pointer-events:auto; }
.tray-hand-heading,.tray-hand-filters,.tray-hand-footer { display:flex; align-items:center; gap:8px; }
.tray-hand-heading h2 { flex:1; margin:0; font-size:14px; }
.tray-hand-panel button,.tray-hand-panel select,.tray-hand-panel input { min-height:36px; min-width:0; border:1px solid #ced8c8; border-radius:8px; padding:5px 9px; background:#fffdf5; color:#315143; font:inherit; font-size:12px; }
.tray-hand-panel button { cursor:pointer; }
.tray-hand-heading [data-close] { width:36px; font-size:22px; padding:0; }
.tray-hand-filters { margin-top:5px; }
.tray-hand-filters select { flex:1.2; width:0; }
.tray-hand-filters input { flex:1; width:0; }
.tray-hand-filters nav { display:flex; gap:5px; align-items:center; }
.tray-hand-filters nav button { width:36px; font-size:19px; padding:0; }
.tray-hand-filters output { white-space:nowrap; font-size:10px; min-width:38px; text-align:center; }
.tray-hand-scroll { overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; }
.tray-hand-cards { display:flex; width:max-content; min-width:100%; justify-content:center; padding:14px 8px 7px; gap:0; }
.tray-hand-panel .tray-hand-card,.tray-hand-card.tray-card-ghost { position:relative; display:flex; flex-direction:column; flex:0 0 92px; width:92px; height:118px; min-height:0; margin-left:-5px; padding:5px; border:2px solid #d4d5bb; border-radius:8px; background:#f6f3df; color:#314b3c; box-shadow:2px 4px 6px #213c3326; transform:rotate(var(--card-angle,0deg)); transform-origin:50% 100%; transition:transform .14s,border-color .14s; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.tray-hand-card:first-child { margin-left:0; }
.tray-hand-card::before { content:''; position:absolute; inset:3px; border:1px solid #cbd0b6; border-radius:4px; pointer-events:none; }
.tray-hand-visual { display:block; position:relative; flex:1; min-height:0; }
.tray-hand-visual .catalog-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.tray-hand-visual img { width:92%; height:92%; object-fit:contain; }
.tray-hand-visual canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tray-hand-visual.preview-ready .catalog-fallback { visibility:hidden; }
.tray-hand-name { font-size:9px; line-height:1.2; min-height:23px; padding:3px 3px 1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; }
.tray-hand-panel .tray-hand-card.is-selected { transform:translateY(-7px); border-color:#699a78; background:#fff9d9; z-index:2; }
.tray-hand-card[aria-disabled=true] { cursor:default; opacity:.65; }
.tray-hand-footer { margin-top:3px; min-height:24px; }
.tray-hand-footer p { flex:1; margin:0; font-size:10px; line-height:1.4; color:#466555; }
.tray-hand-footer button { flex:0 0 auto; font-size:10px; min-height:32px; }
.tray-card-ghost { position:fixed!important; left:0; top:0; z-index:100; pointer-events:none; opacity:.9; transition:none!important; margin:0!important; }
.tray-card-ghost.is-valid { border-color:#4b8b63; }
.tray-card-target { position:fixed; left:0; top:0; z-index:99; pointer-events:none; }
.tray-card-target::after { content:''; position:absolute; left:-12px; top:-12px; width:24px; height:24px; border:2px solid #fff8d6; outline:2px solid #3c7757; border-radius:50%; background:#62997555; }
.has-card-hand > .canvas-help { display:none; }
.has-card-hand > .tool-wheel { visibility:hidden; }
.tray-hand-panel :focus-visible { outline:3px solid #548c71; outline-offset:2px; }
.tray-hand-panel button:disabled { opacity:.4; cursor:default; }
@media(hover:hover) and (pointer:fine) { .tray-hand-panel .tray-hand-card:hover { transform:translateY(-7px); z-index:3; border-color:#96a680; } }
@media(max-width:900px) {
  .tray-card-hand { left:6px; right:6px; bottom:calc(var(--mobile-dock-height,70px) + 6px); }
  .tray-hand-panel { padding:6px 8px; }
  .tray-hand-panel button,.tray-hand-panel select,.tray-hand-panel input { min-height:44px; }
  .tray-hand-heading [data-close],.tray-hand-filters nav button { width:44px; }
  .tray-hand-cards { justify-content:flex-start; }
}
@media(max-width:520px) {
  .tray-hand-heading h2 { font-size:12px; }
  .tray-hand-heading [data-full] { font-size:10px; }
  .tray-hand-filters { flex-wrap:wrap; gap:4px; }
  .tray-hand-filters select { flex:1 1 50%; width:0; }
  .tray-hand-filters input { flex:1 1 100%; width:100%; order:1; }
  .tray-hand-panel .tray-hand-card { flex-basis:82px; width:82px; height:102px; transform:none; }
  .tray-hand-cards { padding-top:10px; }
  .tray-hand-footer { flex-wrap:wrap; gap:4px; }
  .tray-hand-footer p { flex-basis:100%; }
  .tray-hand-footer button { flex:1; }
}
@media(max-height:550px) {
  .tray-hand-panel .tray-hand-card { height:86px; flex-basis:74px; width:74px; }
  .tray-hand-heading h2 { font-size:11px; }
  .tray-hand-filters input { display:none; }
  .tray-hand-footer p { font-size:9px; }
}
/* A bottom sheet would cover nearly all the sand on a landscape phone. */
@media(max-height:550px) and (min-width:521px) {
  .tray-card-hand { left:auto; width:min(360px,44%); }
  .tray-hand-panel { max-height:calc(var(--visible-height,100dvh) - var(--mobile-dock-height,0px) - 76px); overflow-y:auto; }
  .tray-hand-heading [data-full] { font-size:10px; }
  .tray-hand-cards { justify-content:flex-start; }
  .tray-hand-footer { flex-wrap:wrap; gap:4px; }
  .tray-hand-footer p { flex-basis:100%; }
  .tray-hand-footer button { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .tray-hand-card { transition:none!important; } }