/* Card-specific styles for the "volumes" harbor course (class prefix .hb-volumes-).
 * Storage as cargo holds: the writable layer is a tray inside each container, emptyDir is a wooden crate in the
 * Pod's hold, a PVC is a violet locker on the wooden pier, and a PV is a disk drum. Files are paper luggage tags. */
.hb-volumes .hb-panels { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.hb-volumes-board { margin-bottom:4px; }

/* Paper tags: a punched hole on the left; dashed = planned, green = stored, red = refused, struck = lost. */
.hb-volumes-file { position:relative; display:inline-flex; align-items:baseline; gap:5px; max-width:100%; min-width:0; padding:3px 8px 3px 16px; border:1.5px solid #c8b583; border-radius:4px 9px 9px 4px; background:#fffdf4; box-shadow:0 2px 0 #d8c99c; font:700 11px var(--mono); color:#3f4a38; box-sizing:border-box; }
.hb-volumes-file::before { content:''; position:absolute; left:5px; top:calc(50% - 4px); width:5px; height:5px; border-radius:50%; border:1.5px solid #b59c61; background:#fff; }
.hb-volumes-file b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.hb-volumes-file small { flex-shrink:0; font:600 10px var(--mono); color:#7a6f4f; }
.hb-volumes-file.plan { border-style:dashed; background:#fffdf4b0; box-shadow:none; }
.hb-volumes-file.ok { border-color:#6aa274; background:#eef8e8; box-shadow:0 2px 0 #9cc9a3; color:#2d5a40; }
.hb-volumes-file.bad { border-color:#c38a7c; background:#f8e1da; box-shadow:0 2px 0 #d9a99c; color:#9c3d2d; }
.hb-volumes-file.bad::after,.hb-volumes-file.gone::after { content:'✗'; margin-left:2px; font-weight:800; color:#9c3d2d; }
.hb-volumes-file.gone { border-style:dashed; background:#f1ece0; box-shadow:none; color:#8a7f66; }
.hb-volumes-file.gone b { text-decoration:line-through; }

/* Storage boxes: capacity bar, then the tags stored inside. */
.hb-volumes-box { min-width:0; padding:6px 8px 7px; border:2px solid #9fb4a6; border-radius:10px; background:#f3f8ef; }
.hb-volumes-box-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 6px; font:800 11px var(--mono); color:#2f4f4c; }
.hb-volumes-box-head small { font:600 10px var(--mono); color:#5d6e6a; }
.hb-volumes-bar { height:6px; margin:5px 0 6px; border-radius:4px; background:#dfe5d8; border:1px solid #b9c4b4; overflow:hidden; }
.hb-volumes-bar i { display:block; height:100%; background:#6fb88d; transition:width .3s; }
.hb-volumes-files { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:24px; min-width:0; }
.hb-volumes-empty { font:italic 600 10px var(--mono); color:#98a39a; }
.hb-volumes-box.writable { border-color:#8cb7c9; background:#eaf5f9; }
.hb-volumes-box.writable .hb-volumes-bar i { background:#5aa6c6; }
.hb-volumes-box.emptydir { border:2.5px solid #b59c61; background:repeating-linear-gradient(90deg,#fbefc9 0 26px,#f3dfa8 26px 28px); box-shadow:inset 0 2px 0 #fffbe9,0 3px 0 #ab905b; }
.hb-volumes-box.emptydir .hb-volumes-box-head { color:#5b4a26; }
.hb-volumes-box.emptydir .hb-volumes-bar i { background:#dc9034; }
.hb-volumes-box.pvc { border:2.5px solid #64508a; background:linear-gradient(#f6f1fc,#e7dcf5); box-shadow:inset 0 2px 0 #fff,0 3px 0 #64508a; }
.hb-volumes-box.pvc .hb-volumes-box-head { color:#3c2c5c; }
.hb-volumes-box.pvc .hb-volumes-bar i { background:#9a7cc6; }
.hb-volumes-box.over { border-color:#c76750; }
.hb-volumes-box.over .hb-volumes-bar i { background:#c76750; }

/* File choice rows in the manifest panel. */
.hb-volumes-pick { display:grid; gap:7px; padding-bottom:10px; border-bottom:1.5px dashed #ddd2b0; }
.hb-volumes-pick:last-child { padding-bottom:0; border-bottom:0; }
.hb-volumes-pick-head { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.hb-volumes-pick .hb-choice-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* A Pod is a dashed cabin on its ship: containers side by side, the emptyDir crate below them. */
.hb-volumes-pod { position:relative; min-width:0; margin-top:10px; padding:8px; display:grid; gap:8px; border:2px dashed #6f9ea0; border-radius:12px; background:#f2faf1; }
.hb-volumes-pod.gone { opacity:.6; border-color:#c38a7c; background:#fbefe9; }
/* The Pod just replaced: a faded slip with the files that went with it. */
.hb-volumes-pod.ghost { gap:5px; padding:6px 8px; }
.hb-volumes-pod-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px; font:800 12px var(--mono); color:#2b5a66; }
.hb-volumes-pod-head .hb-chip { font-size:10px; padding:1px 5px; }
.hb-volumes-ctrs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:8px; }
.hb-volumes-ctr { min-width:0; display:grid; gap:5px; padding:6px; border:1.5px solid #b8c6b3; border-radius:10px; background:#fffdf4; }
.hb-volumes-ctr-head { display:flex; align-items:center; gap:5px; min-width:0; font:800 11px var(--mono); color:#2f4f4c; }
.hb-volumes-ctr-head svg { width:22px; height:25px; flex-shrink:0; }
.hb-volumes-ctr-head .hb-chip { margin-left:auto; font-size:9.5px; padding:0 5px; }

/* Ships on the left, the wooden pier with the PVC locker on the right. */
.hb-volumes-harbor { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,230px); gap:18px; align-items:start; }
.hb-volumes-harbor.solo { grid-template-columns:minmax(0,1fr); max-width:600px; margin:0 auto; }
.hb-volumes-ships { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; align-items:start; padding-bottom:20px; }
.hb-volumes-noship { margin-top:10px; padding:22px 6px; text-align:center; border:2px dashed #cfd6c8; border-radius:12px; font:600 11px var(--mono); color:#8a958c; }
.hb-volumes-dock { position:relative; display:grid; gap:8px; padding:10px; border:3px solid #a9895a; border-radius:14px; background:repeating-linear-gradient(0deg,#ead8ad 0 14px,#dcc592 14px 16px); box-shadow:inset 0 2px 0 #f7ecd0,0 5px 0 #8a6f48; }
.hb-volumes-dock::after { content:''; position:absolute; left:18%; right:18%; bottom:-14px; height:9px; background:repeating-linear-gradient(90deg,#8a6f48 0 8px,transparent 8px 30px); }
.hb-volumes-dock-head { text-align:center; font:800 11px var(--mono); letter-spacing:.5px; color:#5b4a26; }
.hb-volumes-rope { padding:4px 6px; border:1.5px dashed #a98048; border-radius:8px; background:#fff6dcd9; text-align:center; font:700 10px/1.5 var(--mono); color:#5d4720; overflow-wrap:anywhere; }

/* Pods that cannot start on their ship. */
.hb-volumes-stuck { border-color:#c76750!important; background:#fbe6dc!important; }
.hb-volumes-stuck small { color:#9c3d2d; }

/* Disks (PVs): a drum with its claim, chips and the node it is attached to. */
.hb-volumes-disks { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; padding-bottom:8px; }
.hb-volumes-disk { position:relative; display:flex; align-items:flex-start; gap:9px; min-width:0; padding:9px 10px; border:2.5px solid #4f6f86; border-radius:14px; background:linear-gradient(110deg,#f7fbfd,#e3eef4); box-shadow:inset 0 2px 0 #fff,0 4px 0 #4f6f86; color:var(--hb-ink); transition:opacity .3s,filter .3s; }
.hb-volumes-disk-icon { width:34px; height:38px; flex-shrink:0; }
.hb-volumes-disk-body { min-width:0; display:grid; gap:4px; }
.hb-volumes-disk-body>b { font:800 13px var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-volumes-disk-body>small { font:600 10px var(--mono); color:#5d6e6a; }
.hb-volumes-chips { display:flex; flex-wrap:wrap; gap:3px; }
.hb-volumes-chips .hb-chip { font-size:10px; padding:1px 5px; }
.hb-volumes-attach { font:800 11px var(--mono); color:#245470; }
.hb-volumes-data .hb-volumes-file { font-size:10px; }
.hb-volumes-disk.nfs { border-color:#3f7656; background:linear-gradient(110deg,#f4fbf6,#dcf3e3); box-shadow:inset 0 2px 0 #fff,0 4px 0 #3f7656; }
.hb-volumes-disk.regional { border-color:#64508a; background:linear-gradient(110deg,#faf7fd,#e7dcf5); box-shadow:inset 0 2px 0 #fff,0 4px 0 #64508a; }
.hb-volumes-disk.fresh { animation:hb-drop .65s cubic-bezier(.2,.8,.3,1) both; box-shadow:inset 0 2px 0 #fff,0 4px 0 #4f6f86,0 0 0 5px #ffe4a0aa; }
.hb-volumes-disk.released { border-color:#a98048; background:linear-gradient(110deg,#fffbea,#fff1c9); box-shadow:inset 0 2px 0 #fff,0 4px 0 #a98048; }
.hb-volumes-disk.idle,.hb-volumes-disk.pending { border-style:dashed; box-shadow:none; background:#f7f9f4; }
.hb-volumes-disk.deleted { opacity:.5; filter:grayscale(.8); border-style:dashed; box-shadow:none; }
.hb-volumes-disk.deleted .hb-volumes-disk-body>b { text-decoration:line-through; }

/* Namespace fence with its claims (reclaim stage). */
.hb-volumes-ns { margin:4px 0 14px; padding:10px 12px; border:2px dashed #6f9ea0; border-radius:16px; background:#e4f6f02e; transition:border-color .3s,background .3s; }
.hb-volumes-ns.gone { border-color:#c76750; background:#c7675014; }
.hb-volumes-ns-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font:800 12px var(--mono); color:#2b5a66; }
.hb-volumes-claims { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:8px; }
.hb-volumes-claim-row { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 10px 6px 6px; border:2px solid #b59c61; border-radius:12px; background:linear-gradient(#fff7d8,#f5e5b6); box-shadow:0 3px 0 #ab905b; font:700 12px var(--mono); color:#4b553d; }
.hb-volumes-claim-row small { margin-left:auto; font:600 10px var(--mono); color:#6b7159; white-space:nowrap; }
.hb-volumes-claim-row.gone { opacity:.5; border-style:dashed; box-shadow:none; }
.hb-volumes-claim-row.gone b { text-decoration:line-through; }
.hb-volumes-locker { flex-shrink:0; display:grid; place-items:center; width:34px; height:30px; border:2px solid #64508a; border-radius:6px; background:linear-gradient(#e7dcf5,#cdbbe8); box-shadow:inset 0 0 0 2px #f6f1fc,0 2px 0 #64508a; font:800 9px var(--mono); letter-spacing:.5px; color:#3c2c5c; }

/* Binding: claim tickets are buttons; PV drums light up when they fit the selected claim. */
button.hb-volumes-claim { min-height:44px; cursor:pointer; font:inherit; text-align:left; color:#4b553d; transition:transform .2s,box-shadow .2s; }
.hb-volumes-claim>div { min-width:0; display:grid; gap:3px; }
.hb-volumes-claim b { font:800 13px var(--mono); }
.hb-volumes-claim small { font:700 10px var(--mono); color:#7a5a20; }
.hb-volumes-claim.bound { border-color:#6aa274; background:linear-gradient(#eef8e8,#d7efcc); box-shadow:0 4px 0 #699763; }
.hb-volumes-claim.bound small { color:#2d694b; }
.hb-volumes-claim.on { border-color:#a98048; background:linear-gradient(#ffeec3,#ffd98a); box-shadow:0 4px 0 #9a7848,0 0 0 4px #fff8; transform:translateY(-3px) rotate(-1.5deg); }
.hb-volumes-pvs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:14px; padding-bottom:12px; }
.hb-volumes-pv { display:flex; align-items:flex-start; gap:9px; min-width:0; min-height:44px; padding:10px; border:2.5px solid #4f6f86; border-radius:14px; background:linear-gradient(110deg,#f7fbfd,#e3eef4); box-shadow:inset 0 2px 0 #fff,0 5px 0 #4f6f86; color:var(--hb-ink); font:inherit; text-align:left; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.hb-volumes-pv:hover { transform:translateY(-3px); }
.hb-volumes-pv>div { min-width:0; display:grid; gap:4px; }
.hb-volumes-pv b { font:800 14px var(--mono); color:#2f4f4c; }
.hb-volumes-pv small { font:700 10.5px var(--mono); color:#5d6e6a; }
.hb-volumes-pv.fits { border-color:#4f8a5b; box-shadow:inset 0 2px 0 #fff,0 5px 0 #4f8a5b,0 0 0 4px #c5e9b4bb; }
.hb-volumes-pv.bound { border-color:#699763; background:linear-gradient(110deg,#f2fbec,#d7efcc); box-shadow:inset 0 2px 0 #fff,0 5px 0 #699763; }
.hb-volumes-pv.bound small { color:#2d694b; }
.hb-volumes-pv.reject { animation:st-shake .4s; border-color:#bd604c; }

/* The same pieces, shrunk for the demo porthole. */
.hb-volumes-mini { gap:8px; }
.hb-volumes-mini-row { display:grid; grid-template-columns:minmax(0,1fr); gap:0; justify-items:center; }
.hb-volumes-mini-row>* { width:100%; box-sizing:border-box; }
.hb-volumes-mini-row>.hb-volumes-box.pvc { width:78%; }
.hb-volumes-pod.mini { margin:0; padding:6px; gap:5px; border-width:1.5px; border-radius:10px; }
.hb-volumes-mini-row>.hb-volumes-pod.mini { margin-bottom:17px; }
.hb-volumes-mini-row>.hb-volumes-pod.mini::after { content:'⇅'; position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); font:800 14px/17px var(--mono); color:#64508a; }
.hb-volumes-pod.mini .hb-volumes-pod-head { font-size:10px; }
.hb-volumes-pod.mini .hb-volumes-pod-head .hb-chip { font-size:8.5px; padding:0 4px; }
.hb-volumes-pod.mini .hb-volumes-ctrs { grid-template-columns:minmax(0,1fr); }
.hb-volumes-pod.mini .hb-volumes-ctr { padding:4px; gap:3px; border-radius:8px; }
.hb-volumes-pod.mini .hb-volumes-ctr-head { gap:4px; font-size:10px; }
.hb-volumes-pod.mini .hb-volumes-ctr-head svg { width:16px; height:18px; }
.hb-volumes-mini .hb-volumes-box { padding:4px 6px 5px; border-width:1.5px; border-radius:8px; box-shadow:none; }
.hb-volumes-mini .hb-volumes-box-head { font-size:9.5px; }
.hb-volumes-mini .hb-volumes-box-head small { font-size:8.5px; }
.hb-volumes-mini .hb-volumes-files { min-height:18px; gap:4px; margin-top:3px; }
.hb-volumes-mini .hb-volumes-file { padding:1px 5px 1px 12px; border-width:1px; box-shadow:none; font-size:10px; }
.hb-volumes-mini .hb-volumes-file::before { left:4px; top:calc(50% - 2px); width:3px; height:3px; border-width:1px; }
.hb-volumes-mini .hb-volumes-empty { font-size:9px; }
.hb-volumes-mini .hb-ticket { margin:0 auto; }
.hb-volumes-mini .hb-ticket .hb-chip { font-size:9px; padding:0 4px; }
.hb-volumes-disk.mini { align-self:center; margin:0 auto; padding:5px 7px; gap:6px; border-width:1.5px; border-radius:9px; box-shadow:inset 0 1px 0 #fff,0 2px 0 #4f6f86; }
.hb-volumes-disk.mini .hb-volumes-disk-icon { width:20px; height:22px; }
.hb-volumes-disk.mini .hb-volumes-disk-body { gap:2px; }
.hb-volumes-disk.mini .hb-volumes-disk-body>b { font-size:9.5px; }
.hb-volumes-disk.mini .hb-chip { font-size:9px; padding:0 3px; }
.hb-volumes-disk.mini .hb-volumes-attach { font-size:8.5px; }
.hb-volumes-mini-sts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; align-items:start; }
.hb-volumes-mini-rep { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.hb-volumes-mini-berth { width:38px; height:40px; display:grid; place-items:center; border:1.5px dashed transparent; border-radius:9px; }
.hb-volumes-mini-berth svg { width:34px; height:38px; }
.hb-volumes-mini-rep.off .hb-volumes-mini-berth { border-color:#8fa99b; background:#e4f6f04d; }
.hb-volumes-mini-rep.fresh .hb-volumes-mini-berth svg { animation:hb-drop .7s cubic-bezier(.2,.8,.3,1) both; }
.hb-volumes-mini-rep>b { font:800 9.5px var(--mono); color:#2e5359; }
.hb-volumes-mini-rep.off>b { opacity:.55; text-decoration:line-through; }
.hb-volumes-mini-link { font:800 12px/1 var(--mono); color:#537e76; }
.hb-volumes-mini-sts .hb-volumes-disk.mini { width:100%; box-sizing:border-box; flex-direction:column; align-items:center; padding:4px 3px; text-align:center; }
.hb-volumes-mini-sts .hb-volumes-disk-body { justify-items:center; }
.hb-volumes-mini-sts .hb-volumes-disk-body>b { font-size:9px; }
/* A row of disk drums (claims demo). */
.hb-volumes-mini-pvs { display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); gap:6px; align-items:start; }
.hb-volumes-mini-pvs .hb-chip { max-width:100%; white-space:normal; text-align:center; }
.hb-volumes-mini-pvs .hb-volumes-disk.mini { width:100%; box-sizing:border-box; flex-direction:column; align-items:center; padding:5px 4px; text-align:center; }
.hb-volumes-mini-pvs .hb-volumes-disk-body { justify-items:center; }
.hb-volumes-mini-pvs .hb-volumes-chips { justify-content:center; }

/* Run log: what an event lost and kept, on the same line. */
.hb-log li .hb-volumes-log-bad { color:#9c3d2d; }
.hb-log li .hb-volumes-log-ok { color:#2d694b; }

@media(max-width:760px) {
  .hb-volumes-harbor { grid-template-columns:minmax(0,1fr); }
  .hb-volumes-dock { max-width:360px; width:100%; margin:0 auto 12px; box-sizing:border-box; }
}
@media(max-width:440px) {
  .hb-volumes-pod { padding:6px; }
  .hb-volumes-ctrs { grid-template-columns:minmax(0,1fr); }
  .hb-volumes-pvs,.hb-volumes-disks { grid-template-columns:minmax(0,1fr); }
}