/* Card-specific styles for the "service" harbor course (class prefix .hb-service-).
 * Pods are small cargo cards on the ships with their label tags; a Service is a lighthouse that lights the Pods it
 * selects; a request is a dot running along a lane from the client, through the address, to the Pod that answers. */
.hb-service-lighthouse { width:26px; height:32px; flex-shrink:0; }
.hb-panel-head>b svg.hb-service-lighthouse { width:24px; height:30px; }
.hb-service-icon { width:22px; height:22px; flex-shrink:0; }

/* Pod cards on a ship deck. */
.hb-service-fleet { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); padding-bottom:18px; }
.hb-service-deck { display:grid; gap:8px; margin-top:10px; padding-top:10px; border-top:2px dashed #b9c1ab; }
.hb-service-empty { display:block; padding:12px 0; text-align:center; font:600 11px var(--mono); color:#7b8f8a; }
.hb-service-pod { position:relative; display:flex; align-items:center; gap:7px; min-width:0; padding:6px 8px 6px 4px; border:2px solid #c8bd99; border-radius:11px; background:#fffdf4; box-shadow:0 2px 0 #d7c9a0; transition:opacity .3s,filter .3s,border-color .3s,box-shadow .3s; }
.hb-service-pod>svg { width:30px; height:34px; flex-shrink:0; }
.hb-service-pod-body { min-width:0; flex:1; }
.hb-service-pod-body>b { display:block; font:800 11.5px var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-service-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.hb-service-tags .hb-chip { font-size:10px; padding:1px 5px; }
.hb-service-pod.lit { border-color:#d9a73d; background:#fff3c6; box-shadow:0 2px 0 #c49a45,0 0 0 3px #ffe08a99,0 0 14px #ffd76a77; }
.hb-service-pod.dim { opacity:.5; filter:grayscale(.6); }
.hb-service-pod.hit.ok { border-color:#5c9a68; box-shadow:0 2px 0 #4f8a5b,0 0 0 4px #c5e9b4; animation:hb-service-bump .45s ease-out; }
.hb-service-pod.hit.bad { border-color:#c76750; background:#fbe6dc; box-shadow:0 2px 0 #b76a55,0 0 0 4px #f8e1da; animation:st-shake .45s; }
.hb-service-count { position:absolute; top:-9px; right:-6px; padding:0 6px; border-radius:9px; font:800 10px/18px var(--mono); color:#fff; background:#5c9a68; box-shadow:0 2px 0 #3f7656; }
.hb-service-count.bad { background:#c76750; box-shadow:0 2px 0 #8f4f36; }

/* The request lane above the board. */
.hb-service-lane { display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; min-width:0; padding:9px 12px; border:2px solid #7ea3a1; border-radius:15px; background:linear-gradient(100deg,#fffbea,#eef6ec); box-shadow:0 4px 0 #8aa9a2; }
.hb-service-stop { display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; padding:3px 9px 3px 4px; border:2px solid #9fb4a6; border-radius:11px; background:#fffdf4; box-shadow:0 2px 0 #9fb4a6; color:#2f4f4c; }
.hb-service-stop>svg.hb-cube { width:24px; height:27px; flex-shrink:0; }
.hb-service-stop>svg.hb-service-lighthouse { width:20px; height:26px; }
.hb-service-stop-text { display:grid; min-width:0; line-height:1.25; }
.hb-service-stop-text b { font:800 11.5px var(--mono); overflow-wrap:anywhere; }
.hb-service-stop-text small { font:600 10px var(--mono); color:#5d6a64; overflow-wrap:anywhere; }
.hb-service-stop.svc { border-color:#9a7cc6; box-shadow:0 2px 0 #9a7cc6; }
.hb-service-stop.policy,.hb-service-stop.addr { border-color:#b59c61; box-shadow:0 2px 0 #ab905b; background:#fff7d8; }
.hb-service-stop.miss { border-style:dashed; box-shadow:none; background:#f6f3e8; color:#7b8f8a; }
.hb-service-q { width:22px; height:24px; display:grid; place-items:center; border:2px dashed #a9b8a4; border-radius:6px; font:800 13px var(--mono); color:#7b8f8a; }
.hb-service-track { position:relative; flex:1 1 18px; min-width:14px; max-width:80px; height:4px; margin:0 4px; border-radius:2px; background:repeating-linear-gradient(90deg,#8eaaa4 0 5px,transparent 5px 9px); }
.hb-service-track b { position:absolute; top:-4px; left:0; width:12px; height:12px; border-radius:50%; background:#efaa42; border:2px solid #7a5a2f; opacity:0; }
.hb-service-lane.go .hb-service-track b { animation:hb-service-run .38s calc(var(--i) * .38s) linear both; }
.hb-service-lane.go .hb-service-track.fail b { animation:hb-service-fail .6s calc(var(--i) * .38s) ease-out both; background:#d0573c; border-color:#8f4f36; }
.hb-service-result { margin-left:auto; padding:3px 9px; border-radius:8px; font:800 11px var(--mono); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hb-service-result.ok { border:1.5px solid #6aa274; background:#dff2d6; color:#2d694b; }
.hb-service-result.bad { border:1.5px solid #c38a7c; background:#f8e1da; color:#9c3d2d; }
.hb-service-result.idle { border:1.5px dashed #b4c2b0; color:#6a7a74; font-weight:600; }
.hb-service-lane.go .hb-service-result { animation:hb-frame-in .3s .7s ease-out both; }

/* What each Service (or the policy) selected: a fixed block above the run log, so it never scrolls out of view. */
.hb-service-slices { list-style:none; display:grid; gap:4px; margin:12px 0 0; padding:8px 12px; border:2px dashed #7ea3a1; border-radius:12px; background:#fffdf4cc; font:600 12px/1.6 var(--mono); color:#7a5a20; }
.hb-service-slices li { overflow-wrap:anywhere; animation:hb-frame-in .3s ease-out both; }
.hb-service-slices li.bad { color:#9c3d2d; }
.hb-service-slices .hb-chip { font-size:10.5px; padding:0 6px; }
.hb-service-slices+.hb-log { margin-top:8px; }
.hb-service .hb-log li { overflow-wrap:anywhere; }
.hb-chip.hb-service-violet { border-color:#9a7cc6; background:#efe6fa; color:#4f3d73; }

/* Namespaces: one dashed harbour each, with its Service db. */
.hb-service-ns .hb-service-deck { border-top:0; margin-top:6px; padding-top:0; padding-bottom:12px; }
.hb-service-ns.picked { border-color:#5c9a68; background:#c5e9b422; }
.hb-service-ns.picked.bad { border-color:#c76750; background:#c7675014; }
.hb-service-svcrow { display:flex; align-items:center; gap:8px; margin:0 4px 4px; }
.hb-service-svcrow b { display:block; font:800 12px var(--mono); color:#2f4f4c; }
.hb-service-svcrow small { font:600 10.5px var(--mono); color:#5d6a64; }

/* Demo board. */
.hb-service-scene { align-items:stretch; }
.hb-service-scene>.hb-service-mtile { align-self:center; }
.hb-service-scene .hb-mini-note { overflow-wrap:anywhere; }
.hb-service-mgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:6px; }
.hb-service-mtile { position:relative; display:flex; align-items:center; gap:5px; min-width:0; padding:4px 6px 4px 3px; border:2px solid #b4c2b0; border-radius:9px; background:#fff9e5; box-shadow:0 2px 0 #b4c2b0; transition:opacity .3s; }
.hb-service-mtile>svg { width:22px; height:25px; flex-shrink:0; }
.hb-service-mtile>div { min-width:0; }
.hb-service-mtile b { display:block; font:800 10px var(--mono); color:#2e5359; }
.hb-service-mtile .hb-chip { font-size:8.5px; padding:0 4px; margin:1px 2px 0 0; white-space:normal; overflow-wrap:anywhere; }
.hb-service-mtile.lit { border-color:#d9a73d; background:#fff1c2; box-shadow:0 2px 0 #c49a45,0 0 0 3px #ffe08a88; }
.hb-service-mtile.warn { border-color:#c76750; }
.hb-service-mtile.warn::after { content:'⚠'; position:absolute; top:-9px; right:-5px; color:#9c3d2d; font-size:13px; }
.hb-service-mgrid .hb-service-mtile:not(.lit) { opacity:.75; }
.hb-service-mlight { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; }
.hb-service-mlight svg { width:28px; height:35px; }
.hb-service-mlight svg.hb-service-icon { width:26px; height:26px; }
.hb-service-mtile.ghost { border-style:dashed; background:#f6f3e8; box-shadow:none; }
.hb-service-mtile.ghost .hb-service-q { width:20px; height:22px; flex-shrink:0; font-size:11px; color:#9c3d2d; border-color:#c38a7c; }
.hb-service-mtile.unready { border-style:dashed; background:#f3f1e8; box-shadow:none; }
.hb-service-mzone { display:grid; gap:6px; padding:6px 8px 8px; border:2px dashed #6f9ea0; border-radius:12px; background:#e4f6f02e; }
.hb-service-mzone>header { font:800 9.5px var(--mono); color:#2b5a66; letter-spacing:.3px; }
.hb-service-mzone>.hb-service-mtile { justify-self:center; }
.hb-service-mzone.lit { border-color:#d9a73d; background:#fff3c655; }
.hb-service-mlight b { font:800 11px var(--mono); color:#2e5359; }
.hb-service-mlight .hb-chip { font-size:9px; padding:1px 5px; }

@keyframes hb-service-run { 0% { opacity:1; left:0; } 90% { opacity:1; } 100% { opacity:0; left:calc(100% - 12px); } }
@keyframes hb-service-fail { 0% { opacity:1; left:0; } 60% { opacity:1; left:calc(100% - 12px); } 80% { left:calc(100% - 22px); } 100% { opacity:0; left:calc(100% - 22px); } }
@keyframes hb-service-bump { 50% { transform:translateY(-3px); } }
@media(max-width:440px) {
  .hb-service-lane { padding:8px; }
  .hb-service-track { max-width:40px; }
  .hb-service-result { margin-left:0; white-space:normal; }
  .hb-service-pod>svg { width:24px; height:28px; }
}
@media(prefers-reduced-motion:reduce) { .hb-service-lane.go .hb-service-track b { animation:none; } }