/* Card-specific styles for the "rollout" harbor course (class prefix .hb-rollout-).
 * Pods are cubes in ship holds; the Service is a lighthouse that lights Ready Pods; HPA runs get a demand chart. */

/* Pods in a hold: dashed = starting, coral = crashing, faded = just deleted, lamp = Ready (gets traffic). */
.hb-rollout-pod { position:relative; }
.hb-rollout-pod.starting { border-style:dashed; border-color:#b8964f; background:#fff6dc; }
.hb-rollout-pod.starting svg { opacity:.45; filter:saturate(.6); }
.hb-rollout-pod.starting small::after { content:' …'; }
.hb-rollout-pod.crash { border-color:#c38a7c; background:#f8e1da; animation:st-shake .5s; }
.hb-rollout-pod.crash small { color:#9c3d2d; }
.hb-rollout-pod.gone { opacity:.38; border-style:dashed; }
.hb-rollout-pod.gone small { text-decoration:line-through; }
.hb-rollout-pod.fresh svg { animation:hb-drop .65s cubic-bezier(.2,.8,.3,1) both; }
.hb-rollout-pod.hot { border-color:#c38a7c; background:#fbe6dc; }
.hb-rollout-lamp { position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:#f2c14e; box-shadow:0 0 0 2px #fff3c4,0 0 8px 2px #ffd76a; animation:hb-rollout-glow 1.6s ease-in-out infinite; }
.hb-rollout-pod.cold .hb-rollout-lamp { background:#d0573c; box-shadow:0 0 0 2px #f8d6cb,0 0 8px 2px #e27b62; }
.hb-rollout-fleet { padding-bottom:16px; }
.hb-rollout-fleet .hb-hold { grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); }

/* The Service lighthouse with one traffic dot per endpoint. */
.hb-rollout-svc { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 14px 8px 8px; border:2px solid #7ea3a1; border-radius:16px; background:linear-gradient(100deg,#fffbea,#eef6ec); box-shadow:0 4px 0 #8aa9a2; }
.hb-rollout-lighthouse { width:42px; height:52px; flex-shrink:0; }
.hb-rollout-svc-name { display:grid; gap:1px; min-width:0; }
.hb-rollout-svc-name b { font:800 13px var(--mono); color:#2f4f4c; }
.hb-rollout-svc-name small { font-size:11px; color:#4a675e; }
.hb-rollout-dots { flex:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; min-width:120px; }
.hb-rollout-dot { width:12px; height:12px; border-radius:50%; border:2px solid #3d6f86; background:#7cc0dc; animation:hb-rollout-ping 1.4s ease-in-out infinite; }
.hb-rollout-dot.gold { border-color:#93622f; background:#efaa42; }
.hb-rollout-dot.bad { border-color:#8f4f36; background:#d0573c; }
.hb-rollout-dot:nth-child(3n+2) { animation-delay:.3s; }.hb-rollout-dot:nth-child(3n) { animation-delay:.6s; }
.hb-rollout-none { font:700 11px var(--mono); color:#9c3d2d; }
.hb-rollout-gauges { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:4px 18px; margin:12px 2px 0; }
.hb-rollout-gauges .hb-meter { margin:4px 0; }
/* Long field names (behavior.scaleDown.…) and kubectl output wrap instead of running past the panel. */
.hb-rollout .hb-choice-label { overflow-wrap:anywhere; }
.hb-yaml.hb-rollout-out { white-space:pre-wrap; }

/* HPA: Pods with a CPU bar (full = 1 core) and the demand chart. */
.hb-rollout-dock { grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); margin:0 0 4px; padding:10px; border:2px dashed #8fb4ae; border-radius:14px; background:#f3f9ef99; }
.hb-rollout-dock .hb-slot { min-height:62px; padding-bottom:4px; }
.hb-rollout-cpu { display:block; width:80%; height:5px; margin-top:2px; border-radius:3px; background:#d4dccf; overflow:hidden; }
.hb-rollout-cpu b { display:block; height:100%; background:#3e99be; transition:width .3s; }
.hb-rollout-pod.hot .hb-rollout-cpu b { background:#c76750; }
.hb-rollout-chart { margin:0; padding:10px 12px 8px; border:2px solid #7ea3a1; border-radius:16px; background:#fffcf0; box-shadow:0 4px 0 #8aa9a2; }
.hb-rollout-chart svg { display:block; width:100%; height:auto; }
.hb-rollout-chart text { font:600 10px var(--mono); fill:#5d6a64; }
.hb-rollout-chart .grid { stroke:#e3dcc4; stroke-width:1; }
.hb-rollout-chart .demand { fill:#7cc0dc88; stroke:#3e99be; stroke-width:2; stroke-linejoin:round; }
.hb-rollout-chart .demand.plan { fill:#7cc0dc2e; stroke:#3e99be80; stroke-width:1.5; stroke-dasharray:4 3; }
.hb-rollout-chart .ready { fill:none; stroke:#3f8a5b; stroke-width:3; stroke-linejoin:round; }
.hb-rollout-chart .total { fill:none; stroke:#7b8f8a; stroke-width:2; stroke-dasharray:5 4; }
.hb-rollout-chart .over { fill:#d0573c33; }
.hb-rollout-chart .cursor { stroke:#7a5a20; stroke-width:2; stroke-dasharray:3 3; }
.hb-rollout-chart figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:4px; font-size:11px; color:#4a675e; }
.hb-rollout-chart .k::before { content:''; display:inline-block; width:14px; height:8px; margin-right:5px; border-radius:2px; vertical-align:middle; }
.hb-rollout-chart .k.demand::before { background:#7cc0dc; border:1.5px solid #3e99be; }
.hb-rollout-chart .k.ready::before { height:0; border-top:3px solid #3f8a5b; }
.hb-rollout-chart .k.total::before { height:0; border-top:2px dashed #7b8f8a; }
.hb-rollout-chart .k.over::before { background:#d0573c44; }

/* Demo board. */
.hb-rollout-scene { align-items:stretch; gap:12px; }
.hb-rollout-scene .hb-mini-note { font-size:11px; }
.hb-rollout-mdock { padding:9px 8px 8px; }
.hb-rollout-mdock>b { font-size:11px; }
.hb-rollout-mdock .hb-mini-hold { gap:5px; margin-top:7px; }
.hb-rollout-mdock .hb-mini-slot { position:relative; width:31px; height:34px; border-radius:6px; }
.hb-rollout-mdock .hb-mini-slot svg { width:27px; height:30px; }
.hb-mini-slot.starting { border-color:#b8964f; background:#fff4d6; }
.hb-mini-slot.starting svg { opacity:.4; }
.hb-mini-slot.crash { border-style:solid; border-color:#c38a7c; background:#f8e1da; animation:st-shake .5s .2s; }
.hb-mini-slot.gone svg { opacity:.3; }
.hb-mini-slot.lit::after { content:''; position:absolute; top:-4px; right:-3px; width:8px; height:8px; border-radius:50%; background:#f2c14e; box-shadow:0 0 6px 2px #ffd76a; }
.hb-rollout-msvc { display:flex; align-items:center; justify-content:center; gap:6px; }
.hb-rollout-msvc svg { width:34px; height:42px; }
.hb-rollout-msvc b { font:800 11px var(--mono); color:#2e5359; }
.hb-rollout-msvc span { display:flex; gap:4px; }
.hb-rollout-msvc span i { width:9px; height:9px; border-radius:50%; background:#efaa42; border:1.5px solid #93622f; animation:hb-rollout-ping 1.4s ease-in-out infinite; }
.hb-rollout-msvc span i.sky { background:#7cc0dc; border-color:#3d6f86; }
.hb-rollout-mrow { display:flex; justify-content:center; gap:8px; }
.hb-rollout-mcpu { display:grid; justify-items:center; gap:4px; width:62px; padding:5px 4px; border:2px solid #68928c; border-radius:9px; background:#fff9e5; box-shadow:0 3px 0 #668b82; }
.hb-rollout-mcpu svg { width:30px; height:34px; }
.hb-rollout-mcpu.starting { border-style:dashed; border-color:#b8964f; }
.hb-rollout-mcpu.starting svg { opacity:.4; }
.hb-rollout-mcpu>i { position:relative; width:100%; height:6px; border-radius:3px; background:#d4dccf; }
.hb-rollout-mcpu>i b { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#3e99be; }
.hb-rollout-mcpu>i u { position:absolute; top:-3px; width:2px; height:12px; background:#7a5a20; }
.hb-rollout-mcpu small { font:800 10px var(--mono); color:#2e5359; }

@keyframes hb-rollout-glow { 50% { box-shadow:0 0 0 2px #fff3c4,0 0 3px 1px #ffd76a; } }
@keyframes hb-rollout-ping { 50% { transform:translateY(-3px); } }
@media(max-width:440px) {
  .hb-rollout-svc { padding:8px; gap:8px; }
  .hb-rollout-dots { flex:1 1 100%; justify-content:flex-start; min-width:0; }
  .hb-rollout-mdock .hb-mini-hold { gap:3px; }
  .hb-rollout-mdock .hb-mini-slot { width:22px; height:25px; }
  .hb-rollout-mdock .hb-mini-slot svg { width:19px; height:21px; }
  .hb-rollout-scene .hb-mini-note { overflow-wrap:anywhere; }
  .hb-rollout-dock { grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); padding:6px; }
  .hb-rollout-chart { padding:8px 6px 6px; }
  .hb-rollout-chart text { font-size:19px; }
  .hb-rollout-chart .ready { stroke-width:4; }
  .hb-rollout-chart .demand,.hb-rollout-chart .total,.hb-rollout-chart .cursor { stroke-width:3; }
}
@media(prefers-reduced-motion:reduce) { .hb-rollout-lamp,.hb-rollout-dot,.hb-rollout-msvc span i { animation:none; } }