/* Quantity controls live beside the packing action, never inside its label. */
.packing-budget{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 18px;margin:-7px 0 19px;color:#aeb6a4;font:400 11px/1.5 var(--sans)}
.packing-budget>button{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;max-width:100%;min-height:34px;padding:5px 0;background:transparent;color:#dfc58c;font:500 11px/1.5 var(--sans);text-align:left;cursor:pointer}
.packing-budget>button svg{width:13px;height:13px;flex-shrink:0}
.packing-budget>button:hover{color:#fff0be}
.packing-budget>button:focus-visible{outline:2px solid #efd496;outline-offset:4px;border-radius:2px}

.packing-inventory{gap:23px 12px}
.packing-object{gap:6px;min-width:0;min-height:0;cursor:default}
.packing-toggle{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.packing-toggle>input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;clip-path:inset(50%);pointer-events:none}
.packing-object-name{min-width:0;padding:5px 7px;overflow-wrap:anywhere;font-size:10.5px;line-height:1.4}
.packing-object-state{font-size:8px;padding:3px 5px}
.packing-object:hover .packing-object-art{transform:rotate(var(--item-tilt,0deg));box-shadow:3px 8px 12px #17181180,inset 0 1px #ffdf9b70}
.packing-toggle:hover .packing-object-art{transform:rotate(0) translateY(-4px);box-shadow:3px 12px 18px #17181190,0 0 0 1px #efd693}
.packing-toggle>input:focus-visible+.packing-object-art{outline:3px solid #fff4bf;outline-offset:5px;transform:rotate(0) translateY(-3px)}
.packing-amount{display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;min-height:32px;padding:6px 8px;border:1px solid #c3a46c70;border-radius:5px;background:#182219e8;color:#f3dca9;box-shadow:0 2px 5px #0003;font:500 10px/1.25 var(--sans);font-variant-numeric:lining-nums tabular-nums;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.packing-amount>span{min-width:0;overflow-wrap:anywhere}
.packing-amount>svg{width:11px;height:11px;flex-shrink:0;color:#c3b18a}
.packing-amount:hover{background:#293424;border-color:#e3c68b;color:#fff3cd}
.packing-amount:focus-visible{outline:2px solid #fff0b6;outline-offset:3px}
.packing-object.is-packed .packing-amount{border-color:#aaa97570;background:#213427ed}

.packing-optional{margin-top:24px;border:1px solid #c4a66b55;border-radius:6px;background:#20271cdd;box-shadow:0 3px 10px #0002;overflow:hidden;text-align:left}
.packing-optional>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 14px;list-style:none;color:#decca3;font:500 11px/1.5 var(--sans);cursor:pointer}
.packing-optional>summary::-webkit-details-marker{display:none}
.packing-optional>summary::after{content:'';display:block;width:6px;height:6px;margin-right:3px;border:solid #d1b77d;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);flex-shrink:0;transition:transform .18s}
.packing-optional[open]>summary{border-bottom:1px solid #c4a66b30}
.packing-optional[open]>summary::after{transform:rotate(225deg)}
.packing-optional>summary:focus-visible{outline:2px solid #f0d59a;outline-offset:-4px;border-radius:5px}
.packing-optional-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:7px}
.packing-optional-item{display:flex;align-items:center;gap:9px;min-width:0;min-height:55px;padding:8px;border:1px solid transparent;border-radius:4px;background:transparent;text-align:left;color:#e1dbc4;font:500 10px/1.4 var(--sans);cursor:pointer;transition:background .18s,border-color .18s}
.packing-optional-item>img{display:block;width:34px;height:34px;border:1px solid #cbb17b65;border-radius:4px;object-fit:cover;flex-shrink:0}
.packing-optional-item>span{flex:1;min-width:0;overflow-wrap:anywhere}
.packing-optional-item small{display:block;margin-top:3px;color:#aeb69b;font:400 9px/1.45 var(--sans);font-variant-numeric:tabular-nums}
.packing-optional-item>svg{width:12px;height:12px;flex-shrink:0;color:#c9b883}
.packing-optional-item:hover{background:#d5bf7820;border-color:#d5bf7835}
.packing-optional-item:focus-visible{outline:2px solid #f0d59a;outline-offset:-2px}

.packing-item-dialog{min-width:0;text-align:left}
.packing-item-intro{display:flex;align-items:center;gap:18px;min-width:0;padding-right:22px}
.packing-item-intro>img{display:block;width:64px;height:64px;flex-shrink:0;border:1px solid #bca26f90;border-radius:8px;object-fit:cover;box-shadow:0 5px 15px #0004}
.packing-item-intro>div{min-width:0}
.packing-item-dialog .packing-item-intro h2{margin:0;color:#efe3c8;font:500 clamp(26px,3vw,35px)/1.12 var(--serif);overflow-wrap:anywhere}
.packing-item-intro p,.packing-item-intro small{display:block;margin:6px 0 0;color:#a8b19c;font:400 11px/1.5 var(--sans)}
.packing-amount-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:25px 0 16px;padding:19px 0;border-top:1px solid #aa925347;border-bottom:1px solid #aa925347;color:#e4cf9b}
.packing-amount-summary>strong,.packing-amount-summary>b{font:500 clamp(35px,5vw,48px)/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.035em;color:#f1db9f;overflow-wrap:anywhere;max-width:100%}
.packing-amount-summary>span,.packing-amount-summary>small{font:400 12px/1.5 var(--sans);color:#bfc6b2}
.packing-item-dialog p.note{margin:0 0 20px;color:#c6ceba;font:400 12px/1.8 var(--sans);overflow-wrap:anywhere;white-space:pre-line}
.packing-quantity-form{display:grid;gap:12px;margin-top:23px;padding-top:18px;border-top:1px solid #aa92532d}
.packing-quantity-form>label{display:flex;align-items:flex-start;flex-direction:column;gap:9px;color:#dfd5b8;font:500 12px/1.5 var(--sans)}
.packing-quantity-form input[type=number]{display:block;width:160px;max-width:100%;min-height:46px;padding:9px 12px;border:1px solid #aa9565;border-radius:5px;background:#111b16;color:#f1e5c9;font:500 20px/1.2 var(--sans);font-variant-numeric:lining-nums tabular-nums;accent-color:#d4b675}
.packing-quantity-form input[type=number]:focus-visible{outline:2px solid #e0c48b;outline-offset:3px}
.packing-quantity-form>small,.packing-quantity-form>p{margin:0;color:#a8b29c;font:400 11px/1.6 var(--sans)}
.packing-quantity-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.packing-quantity-actions>button{min-height:42px;max-width:100%;margin:0;padding:11px 16px;font:500 11px/1.4 var(--sans);white-space:normal}
.packing-quantity-actions>.primary-button{margin:0}
.packing-quantity-actions>button:focus-visible{outline:2px solid #efd394;outline-offset:3px}

@media(min-width:561px){.packing-workspace{width:70%}}
@media(min-width:1250px){.packing-inventory{gap:25px 12px}}
@media(max-width:800px){
  .packing-inventory{gap:21px 9px}
  .packing-amount{padding:6px;gap:4px;font-size:9.5px}
  .packing-optional-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .packing-budget{align-items:flex-start;flex-direction:column;gap:1px;margin:-5px 0 17px;font-size:10px}
  .packing-budget>button{min-height:36px;font-size:11px;padding:5px 0}
  .packing-workspace{width:100%}
  .packing-inventory{gap:23px 8px}
  .packing-toggle{gap:6px}
  .packing-object-name{font-size:10px;padding:5px 6px}
  .packing-amount{min-height:36px;font-size:10px;padding:6px}
  .packing-optional{margin-top:21px}
  .packing-optional>summary{font-size:10.5px;padding:11px 12px}
  .packing-optional-item{min-height:57px;font-size:11px}
  .packing-optional-item small{font-size:10px}
  .packing-item-intro{gap:12px;padding-right:16px;align-items:flex-start}
  .packing-item-intro>img{width:54px;height:54px;border-radius:6px}
  .packing-item-dialog .packing-item-intro h2{font-size:27px}
  .packing-amount-summary{margin:22px 0 15px;padding:17px 0}
  .packing-amount-summary>strong,.packing-amount-summary>b{font-size:39px}
  .packing-amount-summary>span,.packing-amount-summary>small{font-size:11px}
  .packing-item-dialog p.note{font-size:12px;line-height:1.75}
  .packing-quantity-form{margin-top:20px}
}
@media(max-width:390px){
  .packing-amount{font-size:9.5px;gap:4px}
  .packing-amount>svg{width:10px;height:10px}
  .packing-quantity-actions>button{flex:1 1 120px;padding-inline:11px}
  .packing-item-dialog .packing-item-intro h2{font-size:25px}
}
/* The artwork is a minimum canvas, not a limit on the inventory's height. */
@media screen and (min-width:561px){
  .packing-scene{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto;container-type:inline-size}
  .packing-scene::before{content:'';grid-area:1/1;align-self:start;width:100%;aspect-ratio:3/2;pointer-events:none}
  .packing-workspace{grid-area:1/1;align-self:start}
  .packing-backdrop{inset:0 0 auto;height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center top;mask-image:none}
  /* These positions use the artwork's width-driven height, even on a long list. */
  .packing-bag-target{top:26cqw;height:9.333333cqw}
  .packing-bag-status{top:51.333333cqw}
}
@media(prefers-reduced-motion:reduce){
  .packing-amount,.packing-optional-item,.packing-optional>summary::after,.packing-object-art{transition:none}
  .packing-toggle:hover .packing-object-art,.packing-toggle>input:focus-visible+.packing-object-art{transform:rotate(0)}
}
@media(forced-colors:active){
  .packing-amount,.packing-optional,.packing-optional-item,.packing-quantity-form input[type=number]{border-color:ButtonText}
  .packing-toggle>input:focus-visible+.packing-object-art{outline-color:Highlight}
}
@media print{
  .packing-budget,.packing-quantity-actions{display:none}
  .packing-amount{display:inline-flex!important;min-height:0;padding:3px;border:0;background:none;box-shadow:none;color:#222;font-size:10px}
  .packing-amount>svg{display:none}
  .packing-optional{background:none;border-color:#aaa;box-shadow:none;break-inside:avoid}
  .packing-optional-list{display:grid!important}
  .packing-optional-item{display:flex!important;color:#222}
  .packing-optional>summary,.packing-optional-item small{color:#333}
}