/* Card-specific styles for the "images" harbor course (class prefix .hb-images-).
 * Layers are planks in a cargo crate; the registry is the supply dock every ship pulls from. */

/* Build layers with their cache status. */
.hb-images-stack { display:flex; flex-direction:column; gap:4px; padding:7px; border:3px solid #b59c61; border-radius:13px; background:linear-gradient(#fff7d8,#f2dfac); box-shadow:inset 0 2px 0 #fffbe9,0 5px 0 #ab905b; }
.hb-images-layer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; padding:3px 6px 3px 9px; border:1.5px solid #c8b583; border-left:7px solid #b3bfbb; border-radius:6px; background:#fffdf4; min-width:0; }
.hb-images-layer code { min-width:0; font:700 11.5px var(--mono); color:#3f4a38; overflow-wrap:anywhere; }
.hb-images-layer .hb-chip { flex-shrink:0; }
.hb-images-layer.cached { border-left-color:#6fb88d; background:#eef8e8; }
.hb-images-layer.run { border-left-color:#efaa42; background:#fff1c9; }
.hb-images-layer.error { border-left-color:#c76750; background:#fbe6dc; }
.hb-images-layer.skipped { opacity:.5; }
.hb-images-layer.fresh { animation:hb-images-rebuild .55s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i) * .08s); }
.hb-images-stack.small { padding:5px; border-width:2px; border-radius:10px; box-shadow:0 3px 0 #ab905b; gap:3px; }
.hb-images-stack.small .hb-images-layer { flex-wrap:wrap; gap:1px 6px; min-height:20px; padding:1px 4px 1px 6px; border-left-width:5px; }
/* In the narrow demo window a status chip drops under its line instead of splitting words. */
.hb-images-stack.small .hb-images-layer code { font-size:9.5px; overflow-wrap:normal; word-break:keep-all; }
.hb-images-stack.small .hb-chip { font-size:8.5px; padding:0 4px; margin-left:auto; }

/* Dockerfile lines that cannot move, and the movable ones. */
.hb-images-fixed { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 7px; padding:6px 10px; border:2px dashed #c8bd99; border-radius:12px; background:#fffcf0; }
.hb-images-fixed:last-child { margin:7px 0 0; }
.hb-images-fixed code { font:700 12px var(--mono); color:#4b5338; overflow-wrap:anywhere; min-width:0; }
.hb-images-fixed small { flex-shrink:0; font-size:10px; color:#7a7d65; }
.hb-images-step { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; }
.hb-images-step code { font:700 12px var(--mono); overflow-wrap:anywhere; min-width:0; }
.hb-images-step small { font:600 10.5px var(--sans); color:#7a5a20; }
.hb-images-edit { display:flex; justify-content:flex-end; margin:-2px 0 8px; }

/* Crates: the build stage and the final image. */
.hb-images-crate { padding:7px 8px 8px; border:3px solid #b59c61; border-radius:13px; background:linear-gradient(#fff7d8,#f2dfac); box-shadow:inset 0 2px 0 #fffbe9,0 5px 0 #ab905b; color:#4b553d; min-width:0; transition:opacity .3s,filter .3s; }
.hb-images-crate.dim { opacity:.55; filter:grayscale(.5); }
.hb-images-crate-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 2px 6px; font:800 12px var(--mono); color:#5b4a26; }
.hb-images-crate-top span { font-weight:700; color:#7a6331; }
.hb-images-planks { display:flex; flex-direction:column; gap:3px; }
.hb-images-plank { --c:#97a5a1; --bg:#eef1ef; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 8px; min-height:26px; padding:3px 9px; border:1.5px solid #c8b583; border-left:7px solid var(--c); border-radius:6px; background:var(--bg); font:700 11.5px var(--mono); color:#3f4a38; }
/* A long name wraps and pushes its size to the next line rather than being cut. */
.hb-images-plank b { min-width:0; overflow-wrap:anywhere; }
.hb-images-plank small { flex-shrink:0; margin-left:auto; font:700 10.5px var(--mono); color:#6b7159; }
.hb-images-plank.c-gold { --c:#efaa42; --bg:#fff1c9; }
.hb-images-plank.c-sky { --c:#7cc0dc; --bg:#e3f3f9; }
.hb-images-plank.c-violet { --c:#b49ad8; --bg:#efe8f8; }
.hb-images-plank.c-mint { --c:#8fcfa8; --bg:#e4f5ea; }
.hb-images-plank.c-coral { --c:#ec9a76; --bg:#fbe6dc; }
.hb-images-plank.fresh { animation:hb-images-rebuild .55s cubic-bezier(.2,.8,.3,1) both; }
.hb-images-crate.small { padding:5px 6px 6px; border-width:2px; border-radius:10px; box-shadow:0 3px 0 #ab905b; max-width:180px; width:100%; margin:0 auto; }
.hb-images-crate.small .hb-images-crate-top { font-size:10px; margin-bottom:4px; }
.hb-images-crate.small .hb-images-plank { min-height:18px; padding:1px 6px; border-left-width:5px; font-size:9.5px; }
.hb-images-crate.small .hb-images-plank small { font-size:9px; }
.hb-mini-scene .hb-images-plank { gap:0 6px; }

.hb-images-row { display:grid; grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr) auto minmax(0,1fr); gap:10px; align-items:center; }
.hb-images-col { min-width:0; }
.hb-images-arrow { display:flex; flex-direction:column; align-items:center; font:800 24px var(--mono); color:#4f7f86; }
.hb-images-arrow small { font:700 9.5px var(--mono); color:#355e65; white-space:nowrap; }
.hb-images-arrow i { display:inline-block; font-style:normal; }
.hb-images-solo { grid-template-columns:minmax(0,1fr); padding-bottom:16px; }

/* Code previews: one block per line with a hanging indent, so a wrapped line never reads as a new instruction. */
.hb-images-code span { display:block; min-height:1.6em; padding-left:2ch; text-indent:-2ch; }

/* Logs here hold kubelet events for several nodes: give them a little more room. */
.hb-images .hb-log { max-height:300px; }

/* Registry dock. */
.hb-images-reg { margin:6px 0 4px; padding:8px 12px 10px; border:2px solid #5a8fae; border-radius:14px 14px 6px 6px; background:repeating-linear-gradient(90deg,#e6f3f9 0 18px,#dcedf5 18px 36px); box-shadow:0 4px 0 #4f7f96; }
.hb-images-reg-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:7px; font-size:11px; color:#245470; }
.hb-images-reg-top b { font:800 12px var(--mono); margin-right:auto; }
.hb-images-reg-down { font-weight:800; color:#9c3d2d; }
.hb-images-reg-body { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.hb-images-reg-body .hb-chip { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.hb-images-reg.down { border-color:#c38a7c; background:repeating-linear-gradient(135deg,#f6e7df 0 10px,#efdcd2 10px 20px); box-shadow:0 4px 0 #b76a55; }
.hb-images-reg.down .hb-images-reg-body { opacity:.55; }
.hb-images-ptr { display:inline-flex; align-items:center; gap:3px; }
.hb-images-ptr i { font-style:normal; font:800 12px var(--mono); color:#245470; }
.hb-images-was { display:inline-flex; opacity:.4; filter:grayscale(1); }

/* Mini demo bits. */
.hb-mini-scene .hb-images-reg { margin:0; padding:5px 7px 6px; border-radius:10px 10px 5px 5px; box-shadow:0 3px 0 #4f7f96; }
.hb-mini-scene .hb-images-reg-top { margin-bottom:4px; font-size:9px; }
.hb-mini-scene .hb-images-reg-top b { font-size:9.5px; }
.hb-mini-scene .hb-images-reg-body { gap:3px; }
.hb-mini-scene .hb-images-reg .hb-chip,.hb-images-pipe .hb-chip,.hb-mini-scene>.hb-chip { font-size:9px; padding:1px 5px; }
.hb-mini-scene>.hb-chip { align-self:center; }
.hb-images-pipe { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; }
.hb-images-pipe i { flex-basis:100%; text-align:center; font:800 16px var(--mono); color:#537e76; font-style:normal; line-height:1; }
.hb-images-pipe .hb-chip { animation:hb-images-travel 1.4s ease-in-out infinite alternate; }
.hb-images-mini-label { display:block; font:700 9px var(--mono); color:#355e65; }

@keyframes hb-images-rebuild { from { opacity:0; transform:translateX(-14px); } 70% { opacity:1; transform:translateX(2px); } to { transform:none; } }
@keyframes hb-images-travel { from { transform:translateY(-3px); } to { transform:translateY(3px); } }

@media(max-width:900px) {
  .hb-images-row { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .hb-images-row>.to-node,.hb-images-row>.hb-images-solo { grid-column:1/-1; }
  .hb-images-row>.to-node i { transform:rotate(90deg); }
}
@media(max-width:560px) {
  .hb-images-row { grid-template-columns:minmax(0,1fr); }
  .hb-images-row>.hb-images-arrow i { transform:rotate(90deg); }
}