/* Working labels sewn to the cloth, and a loose packing tag beside the satchel. */
.packing-groups{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:15px;align-items:stretch;margin:0 0 30px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.packing-groups>button{--label-tilt:-1.3deg;position:relative;isolation:isolate;display:grid;grid-template-columns:27px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:start;column-gap:10px;row-gap:3px;min-width:0;min-height:72px;padding:14px 17px;border:1px solid #7c633f;border-radius:5px 3px 6px 3px;background:url('assets/packing/linen-grain-v55.svg'),linear-gradient(135deg,#54442e,#352c21);color:#f1dfba;box-shadow:1px 4px 5px #0007,inset 0 1px #d7b87340,inset 0 -2px #17130d66;text-align:left;white-space:normal;transform:rotate(var(--label-tilt));transition:transform .2s,box-shadow .2s,background-color .2s}
.packing-groups>button:nth-child(2){--label-tilt:.8deg}
.packing-groups>button:nth-child(3){--label-tilt:-.7deg}
.packing-groups>button::before{content:'';position:absolute;inset:5px;border:1px dashed #ba9b636b;border-radius:3px;pointer-events:none}
.packing-groups>button>svg{grid-column:1;grid-row:1/3;width:26px;height:26px;align-self:center;stroke-width:1.4;color:#d9bb80;filter:drop-shadow(0 1px #0007);pointer-events:none}
.packing-groups>button>.packing-group-name{grid-column:2;grid-row:1;color:inherit;font:600 19px/1.06 var(--serif);opacity:1;text-wrap:balance;text-shadow:0 1px 1px #0009}
.packing-groups>button>[data-pack-count]{grid-column:2;grid-row:2;display:block;color:#d4bd92;font:500 10px/1.3 var(--sans);letter-spacing:.04em;opacity:1;font-variant-numeric:lining-nums tabular-nums}
.packing-groups>button[aria-pressed=true]{background:url('assets/packing/linen-grain-v55.svg'),linear-gradient(135deg,#ead7a2,#c8ad70);color:#362a17;border-color:#e1c78c;box-shadow:1px 4px 5px #0005,inset 0 1px #fff2ca,inset 0 -2px #7b633544}
.packing-groups>button[aria-pressed=true]::before{border-color:#70552d8c}
.packing-groups>button[aria-pressed=true]>svg{color:#6c532b;filter:drop-shadow(0 1px #fce5ae)}
.packing-groups>button[aria-pressed=true]>.packing-group-name{text-shadow:0 1px #f8e8be}
.packing-groups>button[aria-pressed=true]>[data-pack-count]{color:#69512a}
.packing-groups>button:hover{transform:rotate(0) translateY(-2px);box-shadow:1px 6px 9px #0007,inset 0 1px #d7b87355}
.packing-groups>button:focus-visible{outline:2px solid #fff0b7;outline-offset:4px;transform:rotate(0)}
.packing-bag-status{z-index:1;right:6.5%;width:clamp(140px,18%,190px);height:auto;aspect-ratio:22/17;padding:0;border:0;border-radius:0;background:url('assets/packing/satchel-tag-v55.svg') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(2px 5px 4px #0007);color:#3d2f1a;transform:rotate(7deg);display:flex;flex-direction:column;justify-content:center;padding-top:26px;pointer-events:none}
.packing-bag-status .packing-bag-caption{font:600 9px/1.5 var(--sans);letter-spacing:.14em;color:#755a30;margin:0 12px 5px}
.packing-bag-status strong{display:block;margin:0 12px;color:#3e2e16;font:600 15px/1.4 var(--sans);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px #f4dfaa}
.packing-bag-status .packing-progress-track{flex:none;align-self:center;width:60%;height:3px;margin:10px 0 0;border-radius:1px;background:#7b613748;box-shadow:0 1px #f8e4b3}
.packing-bag-status .packing-progress-track>span{background:#4e603a}
.all-packed .packing-bag-status{filter:drop-shadow(2px 5px 4px #0007) drop-shadow(0 0 4px #c5d69b33)}
@media screen and (min-width:561px){.packing-bag-status{top:46cqw}}
@media(max-width:1100px){
  .packing-groups{gap:10px}
  .packing-groups>button{column-gap:6px;grid-template-columns:22px minmax(0,1fr);padding:13px 12px;min-height:77px}
  .packing-groups>button>svg{width:21px;height:21px}
  .packing-groups>button>.packing-group-name{font-size:17px}
  .packing-bag-status{right:4%;width:clamp(130px,19%,170px)}
  .packing-bag-status strong{font-size:13px}
}
@media(max-width:800px) and (min-width:561px){
  .packing-groups>button{grid-template-columns:minmax(0,1fr);grid-template-rows:22px auto auto;justify-items:center;text-align:center;min-height:98px;padding:11px 8px;row-gap:5px}
  .packing-groups>button>svg{grid-column:1;grid-row:1}
  .packing-groups>button>.packing-group-name{grid-column:1;grid-row:2;font-size:16px}
  .packing-groups>button>[data-pack-count]{grid-column:1;grid-row:3}
}
@media(max-width:560px){
  .packing-workspace{padding-top:232px;padding-inline:10px}
  .packing-groups{gap:9px;margin-bottom:28px}
  .packing-groups>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:100px;padding:10px 7px;text-align:center}
  .packing-groups>button>svg{width:22px;height:22px;flex:none}
  .packing-groups>button>.packing-group-name{font-size:17px;line-height:1.05}
  .packing-groups>button>[data-pack-count]{font-size:9px}
  .packing-bag-status{left:auto;right:4%;top:111px;width:130px;height:auto;aspect-ratio:22/17;padding-top:21px;transform:rotate(8deg)}
  .packing-bag-status .packing-bag-caption{font-size:7px;letter-spacing:.1em;margin-bottom:3px}
  .packing-bag-status strong{font-size:11px;margin-inline:9px}
  .packing-bag-status .packing-progress-track{margin-top:6px;height:2px}
}
@media(prefers-reduced-motion:reduce){.packing-groups>button{transition:none}.packing-groups>button:hover{transform:rotate(var(--label-tilt))}}
@media(forced-colors:active){
  .packing-groups>button,.packing-groups>button[aria-pressed=true]{background:Canvas;border:1px solid ButtonText;box-shadow:none;transform:none;color:ButtonText}
  .packing-groups>button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:1px}
  .packing-groups>button::before{display:none}
  .packing-groups>button>svg,.packing-groups>button>.packing-group-name,.packing-groups>button>[data-pack-count]{color:ButtonText;filter:none;text-shadow:none}
  .packing-bag-status{background:Canvas;border:1px solid CanvasText;filter:none;transform:none}
  .packing-bag-status .packing-bag-caption,.packing-bag-status strong{color:CanvasText;text-shadow:none}
}
@media print{.packing-groups,.packing-bag-status{display:none}}