/* The Shipping Dept's close-ups (src/ui/closeups/orders.js, bag.js, pack.js,
   ship.js): the laptop's orders and inbox, the bag list and the rack, the
   bench, the shipping scale and the outgoing shelf. They open full screen on
   a phone and in the side column from a tablet up (teashop.css .closeup), so
   every part is laid out for a column 320 to 440 wide; the outgoing shelf is
   a small card over the room on a phone. Colours are the page's tokens,
   light and dark; a tea's family colour always comes with its icon, and every
   state (late, fragile, a weigh) has an icon and words as well as a tone. */

.so { min-height: 100%; display: flex; flex-direction: column; color: var(--text); font-size: var(--ts-font); background: var(--surface); }
.so .btn { white-space: normal; text-align: center; line-height: 1.1; padding-top: 6px; padding-bottom: 6px; font-size: calc(17px * var(--ts-scale)); }
.so .btn.small { font-size: calc(15px * var(--ts-scale)); }
.so-later { opacity: 0.55; }
.so small { font-size: max(11px, 0.86em); }
.so-muted { margin: 0; color: var(--muted); font-weight: 700; line-height: 1.3; }

/* ---------- the header: the stations and the round X ---------- */
.so-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: stretch; gap: 8px;
  padding: 8px calc(var(--sar) + 10px) 8px 10px; background: var(--surface); border-bottom: 2px solid var(--line);
}
.so-stations { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.so-station {
  min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; touch-action: manipulation;
  font: 800 max(11px, min(var(--ts-small), 12px))/1.05 var(--font); text-align: center;
}
.so-station span { max-width: 100%; }
.so-station-icon { width: 20px; height: 20px; flex: none; color: var(--accent); }
.so-station[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
.so button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.so-body { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding: 10px calc(var(--sar) + 12px) 20px 12px; }
.so-section { display: flex; flex-direction: column; gap: 8px; }
.so-h { margin: 2px 0 0; font-size: var(--ts-small); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.so-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.so-actions .btn { flex: 1 1 auto; }

/* ---------- cards: an order, an email ---------- */
.so-cards { display: flex; flex-direction: column; gap: 10px; }
.so-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--bg); color: var(--text);
  border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line);
}
.so-card.mine { border-color: var(--accent); }
.so-card h3 { margin: 0; font-size: 1.05em; font-weight: 900; line-height: 1.2; }
.so-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.so-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.so-quote { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; line-height: 1.35; font-style: italic; }
.so-quote-icon { width: 20px; height: 20px; flex: none; color: var(--muted); margin-top: 1px; }

/* ---------- tags: an icon and words, each state in its own tone ---------- */
.so-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.so-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--surface); font-size: var(--ts-small); font-weight: 800; line-height: 1.2; max-width: 100%;
}
.so-tag-icon { width: 16px; height: 16px; flex: none; }
.so-tag.express { background: var(--sunset); border-color: var(--sunset); color: var(--ts-ink); }
.so-tag.today { border-color: var(--accent); color: var(--text); }
.so-tag.today .so-tag-icon { color: var(--accent); }
.so-tag.late { border-color: var(--warn); color: var(--warn); }
.so-tag.done { border-color: var(--accent); background: var(--accent-soft); }
.so-tag.done .so-tag-icon { color: var(--accent); }
.so-tag.note { background: var(--surface-2); }
.so-tag.ground .so-tag-icon, .so-tag.priority .so-tag-icon { color: var(--accent); }

/* ---------- a tea: its family's colour with its icon, and its name ---------- */
.so-tea { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.so-fam { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fam, var(--adobe)); color: #FFFBF4; border: 1px solid rgba(46, 42, 38, 0.25); }
.so-fam[data-family="white"], .so-fam[data-family="oolong"], .so-fam[data-family="herbal"], .so-fam[data-family="green"] { color: var(--ts-ink); }
.so-fam.ware { background: var(--surface-2); color: var(--text); }
.so-fam-icon { width: 20px; height: 20px; }
.so-tea-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.so-tea-name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; }
.so-tea-text small { color: var(--muted); font-weight: 800; }

/* an order's lines */
.so-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.so-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.so-line > .so-tea { flex: 1 1 auto; }
.so-line.so-quote { flex-wrap: nowrap; align-items: flex-start; }
.so-line.so-quote > span { flex: 1 1 auto; min-width: 0; }
.so-lineout { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.so-lineout .btn { flex: 1 1 auto; }

/* ---------- a bag: a pouch as tall as its size, in its tea's colour ---------- */
.so-pouch {
  flex: none; display: grid; place-items: center; width: 24px; height: 26px; border-radius: 4px 4px 9px 9px;
  background: var(--fam, var(--adobe)); color: #FFFBF4; border: 1px solid rgba(46, 42, 38, 0.3);
  box-shadow: inset 0 5px 0 rgba(255, 251, 244, 0.45);
}
.so-pouch[data-family="white"], .so-pouch[data-family="oolong"], .so-pouch[data-family="herbal"], .so-pouch[data-family="green"] { color: var(--ts-ink); }
.so-pouch[data-size="4"] { height: 42px; }
.so-pouch[data-size="16"] { width: 44px; height: 56px; }
.so-pouch-icon { width: 16px; height: 16px; }
.so-pouch[data-size="16"] .so-pouch-icon { width: 26px; height: 26px; }
.so-bagface { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; width: 100%; }
.so-bagname { max-width: 100%; font-size: 12px; font-weight: 900; line-height: 1.1; text-align: center; }
.so-bagsize { color: var(--muted); font-size: max(11px, min(var(--ts-small), 12px)); font-weight: 800; }

/* ---------- the bag list ---------- */
.so-bagrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.so-bagrow {
  width: 100%; min-height: 54px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; text-align: left;
}
button.so-bagrow { cursor: pointer; touch-action: manipulation; }
.so-bagrow > .so-tea { flex: 1 1 auto; }
.so-bagrow.now { border-color: var(--accent); background: var(--accent-soft); }
.so-bagrow.out .so-actions { flex: 1 1 100%; }
.so-count { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 900; font-size: var(--ts-small); }
.so-bagging { padding: 10px; border: 2px solid var(--accent); border-radius: 16px; background: var(--bg); }

/* ---------- the rack ---------- */
.so-rack { display: flex; flex-wrap: wrap; gap: 6px; }
.so-rackwrap.strip .so-h { display: none; }
/* on the bench every bag shows: the tiles share the row, and wrap onto
   another where they do not fit in one */
.so-rackwrap.strip .so-rack { padding: 2px 2px 6px; }
.so-rackwrap.strip .so-rackbag { flex: 1 1 82px; width: auto; max-width: 92px; }
.so-rackbag {
  flex: none; width: 92px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 6px 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
  font: 800 max(11px, min(var(--ts-small), 13px))/1.1 var(--font); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  /* (as wide as its name's longest word, so no word of a tea's name breaks) */
  min-width: min-content;
}
button.so-rackbag { cursor: grab; touch-action: pan-x; }
.so-rackbag.fresh { border-color: var(--accent); animation: so-pop 0.45s ease-out; }
.so-rackbag.fragile { border-color: var(--chile); }
.so-rackbag.mine { border-color: var(--accent); background: var(--accent-soft); }
.so-rackmine { font-size: 11px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.so-rackbag.dragging { opacity: 0.4; }
.so .weigh-word { display: inline-flex; align-items: center; gap: 3px; font-weight: 900; font-size: max(11px, var(--ts-small)); }
.so-rackbag .weigh-word { gap: 1px; font-size: 11px; white-space: nowrap; }
.so-rackbag .weigh-word .cue-icon { width: 12px; height: 12px; }
.so .weigh-word[data-weigh="perfect"] { color: var(--accent-text); }
.so .cue-icon { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
@keyframes so-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ---------- the orders to pack, and the boxes to label ---------- */
.so-orderrows { display: flex; flex-direction: column; gap: 6px; }
.so-orderrow {
  width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.so-orderrow.ready { border-color: var(--accent); }
.so-orderrow-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-orderrow small { color: var(--muted); font-weight: 700; line-height: 1.3; }
.so-orderrow.so-labelrow { flex-direction: row; align-items: center; flex-wrap: wrap; }
.so-labelrow .so-parcel { width: 44px; height: 33px; }

/* ---------- the bench: the order, the box, the boxes and paper, the rack ---------- */
.so-bench { display: flex; flex-direction: column; gap: 10px; }
.so-pinned { gap: 6px; padding: 8px 12px; box-shadow: none; }
.so-pinned .so-lines { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.so-pinned .so-line > .so-tea { flex: 0 1 auto; }
.so-pinned .so-quote { flex-basis: 100%; }
.so-pinned .so-fam { width: 26px; height: 26px; }
.so-pinned .so-fam-icon { width: 18px; height: 18px; }

.so-needbags { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.so-benchtop { display: grid; place-items: center; border-radius: 16px; }
.so-benchtop.bare { min-height: 120px; border: 2px dashed var(--line); background: var(--bg); }
.so-benchtop.drop-over { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.so-benchspot-icon { width: 56px; height: 56px; color: var(--line); }

.so-box {
  position: relative; width: max-content; max-width: 100%; padding: 0 8px 8px; border-radius: 12px; background: var(--adobe);
  border: 3px solid #B8915F; box-shadow: 0 4px 0 #B8915F; touch-action: none; -webkit-user-select: none; user-select: none;
}
/* the lip: the box's open flap, where the tape runs with a swipe */
.so-lip { position: relative; height: 34px; margin: 0 -8px 6px; border-radius: 9px 9px 0 0; background: rgba(46, 42, 38, 0.12); overflow: hidden; cursor: ew-resize; }
.so-lip.ready { background: rgba(255, 251, 244, 0.6); }
.so-tape-strip {
  position: absolute; left: 0; top: 50%; height: 20px; width: calc(var(--run, 0) * 100%); transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #C9A77A 0 10px, #BF9C6C 10px 12px); border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(46, 42, 38, 0.2);
}
.so-tape-hint { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: max(11px, var(--ts-small)); color: var(--ts-ink); pointer-events: none; }
.so-grid {
  --cell: clamp(44px, calc((100cqw - 40px - (var(--w) - 1) * 3px) / var(--w)), 64px);
  display: grid; grid-template-columns: repeat(var(--w), var(--cell)); grid-template-rows: repeat(var(--h), var(--cell)); gap: 3px;
  border-radius: 6px;
}
.so-grid.drop-over { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.so-grid.nofit { outline: 3px solid var(--chile); outline-offset: 3px; animation: so-shake 0.3s ease-in-out 2; }
@keyframes so-shake { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.so-cell {
  min-width: 0; min-height: 0; padding: 0; border-radius: 6px; border: 2px dashed rgba(46, 42, 38, 0.3); background: #F3E3C8; color: var(--ts-ink);
  display: grid; place-items: center; cursor: pointer; touch-action: none;
}
.so-cell.paper { border-style: solid; border-color: rgba(46, 42, 38, 0.18); background: #FFFBF4; color: #B8A48A; }
.so-cell.risk { border-style: solid; border-color: var(--chile); background: #FBE3DC; color: var(--chile); }
.so-cell.laying { border-style: solid; border-color: var(--turquoise); background: #FFFBF4; }
.so-cell.lifting { opacity: 0.45; }
.so-cell-icon { width: 60%; height: 60%; }
.so-block {
  z-index: 1; min-width: 0; min-height: 0; margin: 0; padding: 3px; overflow: hidden; border-radius: 8px; border: 2px solid rgba(46, 42, 38, 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ts-ink);
  font: 800 11px/1.1 var(--font); text-align: center; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.so-block.bag { background: #E9D3AE; }
.so-block.ware { background: #F6EFE4; }
.so-block.fragile { border: 3px solid var(--chile); }
.so-block .so-fam { width: 22px; height: 22px; border-radius: 6px; }
.so-block .so-fam-icon { width: 16px; height: 16px; }
/* a name breaks only between its words; pack.js drops one that still does not fit (.unnamed) */
.so-block-name { min-width: 0; min-height: 0; max-width: 100%; overflow: hidden; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.so-block small { font-size: 11px; color: rgba(46, 42, 38, 0.75); }
/* one space deep or wide, the shape says the size: the name takes the room */
.so-block.h1 .so-fam, .so-block.w1 .so-fam { width: 18px; height: 18px; flex: none; }
.so-block.h1 .so-fam-icon, .so-block.w1 .so-fam-icon { width: 13px; height: 13px; }
.so-block.h1:not(.w1) { flex-direction: row; gap: 3px; }
.so-block.h1 small, .so-block.w1 small { display: none; }
/* one space wide and tall: the name runs along the bag, beside its icon */
.so-block.w1:not(.h1) { flex-direction: row; align-items: center; gap: 2px; }
.so-block.w1:not(.h1) .so-block-name { display: block; max-width: none; max-height: 100%; white-space: nowrap; writing-mode: vertical-rl; }
.so-block.unnamed { flex-direction: column; }
.so-block.unnamed .so-block-name { display: none; }
.so-block.unnamed small { display: block; }
.so-block.dragging { opacity: 0.35; }
.so-notein {
  position: absolute; top: 40px; right: -6px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #B8915F; background: #FFFBF4; color: var(--ts-ink); cursor: grab; touch-action: none; transform: rotate(-8deg);
}
.so-notein svg { width: 22px; height: 22px; }

.so-boxes { display: flex; gap: 6px; }
.so-rackrow { display: flex; align-items: flex-start; gap: 6px; }
.so-rackrow > .so-rackwrap { flex: 1 1 auto; min-width: 0; }
.so-boxtile, .so-paper {
  min-width: 0; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 4px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: 800 max(11px, var(--ts-small))/1.1 var(--font);
  text-align: center; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.so-boxtile { flex: 1 1 0; }
.so-boxtile small, .so-paper small { color: var(--muted); font-weight: 700; }
.so-boxtile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.so-paper { flex: none; width: 72px; min-height: 92px; border-style: dashed; }
.so-paper-icon { width: 26px; height: 26px; color: #B8A48A; }
.so-mini { display: inline-grid; flex: none; grid-template-columns: repeat(var(--w), 6px); grid-auto-rows: 6px; gap: 1px; padding: 2px; border-radius: 3px; background: #B8915F; }
.so-mini i { display: block; background: #F3E3C8; border-radius: 1px; }

/* what follows a finger in a drag: above the side column and the room */
.so-ghost, .so-block.so-ghost { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0.92; box-shadow: 0 8px 20px rgba(46, 42, 38, 0.3); }
.so-sheet { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #FFFBF4; color: #B8A48A; border: 1px solid rgba(46, 42, 38, 0.2); }
.so-sheet-icon { width: 28px; height: 28px; }
.so-notecard, .so-boxghost { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #FFFBF4; color: var(--ts-ink); font: 800 12px/1 var(--font); }

/* ---------- the shipping scale ---------- */
.so-weigh { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; }
.so-scalepic { width: 180px; height: 68px; }
.so-scalepic .plat { fill: #C9C2B8; stroke: #8E8578; stroke-width: 2; }
.so-scalepic .base { fill: #A89F92; stroke: #8E8578; stroke-width: 2; stroke-linejoin: round; }
.so-scalepic .screen { fill: #2E2A26; }
.so-parcel { width: 96px; height: 72px; flex: none; }
.so-parcel.on-scale { width: 118px; height: 88px; margin-bottom: -14px; position: relative; z-index: 1; }
.so-parcel .side { fill: #C99D6A; stroke: #8E6A43; stroke-width: 2; stroke-linejoin: round; }
.so-parcel .top { fill: var(--adobe); stroke: #8E6A43; stroke-width: 2; stroke-linejoin: round; }
.so-parcel .tape { fill: #E9D3AE; }
.so-parcel .label { display: none; }
.so-parcel .label path { fill: #FFFBF4; stroke: #8E6A43; stroke-width: 1; }
.so-parcel .label .lines { fill: var(--ts-ink); stroke: none; }
.so-parcel.labelled .label { display: inline; }
.so-readout { padding: 4px 14px; border-radius: 8px; background: #2E2A26; color: #BDF0D6; font: 900 1.15em/1.1 var(--font); letter-spacing: 0.04em; }
.so-services { display: flex; flex-direction: column; gap: 10px; }
.so-service {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 16px;
  background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; box-shadow: 0 3px 0 var(--line);
}
.so-service.priority { border-color: var(--accent); }
.so-service-icon { width: 30px; height: 30px; flex: none; color: var(--accent); }
.so-service-text { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.so-service-text b { font-size: 1.1em; font-weight: 900; }

/* ---------- the outgoing shelf: a small card over the room ---------- */
.so.so-small { min-height: 0; }
.so-small .so-head { align-items: center; }
.so-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 var(--ts-big)/1.1 "Lilita One", var(--font); color: var(--text); }
.so-truckline { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.so-truckline p { margin: 0; font-weight: 900; }
.so-truck { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--text); }
.so-truck-icon { width: 28px; height: 28px; }
.so-truckline.driving .so-truck { animation: so-drive 3s ease-in forwards; }
@keyframes so-drive { 0%, 30% { transform: none; } 100% { transform: translateX(420px); } }
.so-outboxes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.so-outbox { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); }
.so-outbox .so-parcel { width: 48px; height: 36px; }
.so-outbox-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
@media (max-width: 599.98px) {
  .closeup-open .side:has(#closeup[data-closeup="outgoing"]) { top: auto; max-height: 60%; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(46, 42, 38, 0.2); }
}

/* a short phone: the bench's pieces a little smaller, so it all shows */
@media (max-height: 720px) {
  .so-rackbag { min-height: 78px; }
  .so-pouch[data-size="16"] { width: 36px; height: 44px; }
  .so-pouch[data-size="4"] { height: 34px; }
  .so-benchtop.bare { min-height: 84px; }
  .so-boxtile { min-height: 56px; }
  .so-paper { min-height: 78px; }
  .so-lip { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .so-rackbag.fresh, .so-grid.nofit, .so-truckline.driving .so-truck { animation: none; }
}