/* Card-specific styles for the "controllers" harbor course (class prefix .hb-controllers-).
 * The ReplicaSet is a paper tally (desired vs current), Pods wait on the dock as cargo tickets,
 * workloads ride the ships, and CronJob runs / Job attempts are bars on a chart. */
.hb-controllers .hb-panels { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.hb-controllers .hb-panel>.hb-controllers-rs,.hb-controllers .hb-panel>.hb-controllers-pods,.hb-controllers .hb-panel>.hb-stepper,
.hb-controllers .hb-panel>.hb-controls,.hb-controllers .hb-panel>.hb-choice,.hb-controllers .hb-panel>.hb-controllers-endpoints { margin-top:10px; }
.hb-controllers .hb-panel>.hb-panel-head+* { margin-top:0; }
.hb-controllers .hb-option { text-align:left; }
.hb-controllers .hb-log { max-height:420px; }

/* The ReplicaSet's two numbers. */
.hb-controllers-rs { padding:9px 11px 8px; border:2px solid #c9a35a; border-radius:12px; background:#fff1c9; box-shadow:inset 0 2px 0 #fff9,0 3px 0 #c7b07a; color:var(--hb-ink); transition:background .3s,border-color .3s; }
.hb-controllers-rs.ok { border-color:#6aa274; background:#dff2d6; box-shadow:inset 0 2px 0 #fff9,0 3px 0 #82a696; }
.hb-controllers-rs-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.hb-controllers-rs-head b { font:800 13px var(--mono); color:#2f4f4c; }
.hb-controllers-count { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:6px; }
.hb-controllers-count span { display:grid; justify-items:center; min-width:64px; }
.hb-controllers-count small { font-size:11px; font-weight:700; color:#4a675e; }
.hb-controllers-count b { font:800 26px/1.15 var(--mono); color:#2b4d4f; }
.hb-controllers-count i { font:800 22px var(--mono); font-style:normal; color:#9a7848; }
.hb-controllers-rs.ok .hb-controllers-count i { color:#2d694b; }
.hb-controllers>.hb-controllers-rs { max-width:380px; margin:0 auto 12px; }

/* Pods on the dock. */
.hb-controllers-pods { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr)); gap:8px; }
.hb-controllers>.hb-controllers-pods { margin-bottom:6px; }
.hb-controllers-pod { position:relative; display:flex; align-items:center; gap:7px; min-width:0; padding:6px 9px 6px 5px; border:2px solid #b59c61; border-radius:12px; background:linear-gradient(#fff7d8,#f5e5b6); box-shadow:0 3px 0 #ab905b; transition:opacity .35s,transform .35s,filter .35s; }
.hb-controllers-pod>svg { width:30px; height:34px; flex-shrink:0; }
.hb-controllers-pod>div { min-width:0; }
.hb-controllers-pod b { display:block; font:800 12px var(--mono); color:#4b553d; }
.hb-controllers-pod small { display:block; font:600 10.5px/1.4 var(--sans); color:#6b7159; }
.hb-controllers-pod.notready { border-color:#c38a7c; background:#fbe6dc; box-shadow:0 3px 0 #b76a55; }
.hb-controllers-pod.notready small { color:#9c3d2d; }
.hb-controllers-pod.terminating { border-style:dashed; background:#eef0ea; box-shadow:0 3px 0 #b4bdb5; }
.hb-controllers-pod.terminating>svg { opacity:.45; }
.hb-controllers-pod.terminating small { color:#7a5a20; }
.hb-controllers-pod.fresh { border-color:#a98048; background:#fff1c9; }
.hb-controllers-pod.fresh>svg { animation:hb-drop .65s cubic-bezier(.2,.8,.3,1) both; }
.hb-controllers-pod.picked { outline:3px dashed #c76750; outline-offset:2px; }
/* Counted while the controller lists and compares: green, never the red "to delete" outline. */
.hb-controllers-pod.counted { outline:3px solid #6aa274; outline-offset:2px; }
.hb-controllers-pod.counted::after { content:'✓'; position:absolute; top:-8px; right:-7px; width:18px; height:18px; border-radius:50%; background:#4f9161; color:#fff; font:800 11px/18px var(--sans); text-align:center; }
.hb-controllers-pod.gone { opacity:.38; filter:grayscale(.85); transform:translateY(4px); box-shadow:none; }
.hb-controllers-pod.gone b { text-decoration:line-through; }
.hb-controllers-labels { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.hb-controllers-labels .hb-chip { font-size:10px; padding:0 5px; }

/* Events that piled up since the last sync. */
.hb-controllers-burst { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.hb-controllers-burst li { display:flex; align-items:center; gap:8px; padding:6px 9px; border:1.5px dashed #c8bd99; border-radius:9px; background:#fffcf0; font:600 11.5px/1.45 var(--mono); color:#4b5338; overflow-wrap:anywhere; }
.hb-controllers-burst li span { flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#ffe9b0; border:1.5px solid #b8964f; font:800 10px var(--mono); color:#5d4720; }

/* Pods the ReplicaSet let go of. */
.hb-controllers-orphans { margin:4px 0 8px; padding:8px 9px 9px; border:2px dashed #a98048; border-radius:12px; background:#fff8e3aa; }
.hb-controllers-orphans>small { display:block; margin-bottom:6px; font:800 11px var(--mono); color:#7a5a20; }

/* Service endpoints. */
.hb-controllers-endpoints { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:30px; }
.hb-controllers-endpoints small { font:800 11px var(--mono); color:#526859; margin-right:4px; }
/* kubectl get endpoints: wrap only at the zero-width spaces after commas, so every address stays whole and visible. */
.hb-controllers .hb-yaml.hb-controllers-ep { white-space:pre-wrap; overflow-wrap:normal; word-break:normal; }

/* Workloads riding the ships. */
.hb-controllers-fleet { grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr)); }
.hb-controllers-cargo { list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:2px dashed #b9c1ab; display:grid; gap:6px; min-height:42px; }
.hb-controllers-cargo li { display:flex; align-items:center; gap:6px; min-width:0; padding:4px 6px; border:1.5px solid #a9b8a4; border-radius:9px; background:#eef3e2; animation:hb-frame-in .3s ease-out both; }
.hb-controllers-cargo li>svg { width:22px; height:25px; flex-shrink:0; }
.hb-controllers-cargo li>div { min-width:0; }
.hb-controllers-cargo b { display:block; font:800 10.5px var(--mono); color:#2f4f4c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-controllers-cargo small { display:block; font:700 9.5px var(--mono); color:#2d694b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-controllers-cargo .hb-chip { margin-top:2px; font-size:9px; padding:0 4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hb-controllers-cargo li.fresh { border-color:#a98048; background:#fff1c9; }
.hb-controllers-cargo li.fresh>svg { animation:hb-drop .65s cubic-bezier(.2,.8,.3,1) both; }
.hb-controllers-cargo li.done { border-color:#6aa274; background:#dff2d6; }
.hb-controllers-cargo li.crash { border-color:#c38a7c; background:#f8e1da; animation:st-shake .45s; }
.hb-controllers-cargo li.crash small { color:#9c3d2d; }
.hb-controllers-cargo li.empty { justify-content:center; min-height:32px; border-style:dashed; background:none; color:#7a8a80; font:600 11px var(--mono); animation:none; }
.hb-controllers-fixed { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:4px 0 10px; font-size:12px; font-weight:700; color:#355e65; }

/* A single ship standing for the cluster's free slots. */
.hb-controllers-solo { max-width:340px; margin:0 auto 24px; }
.hb-controllers-solo .hb-hold { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Timeline chart: CronJob runs and Job attempts. */
.hb-controllers-tl { display:grid; gap:6px; margin:6px 0 4px; padding:14px 14px 12px; border:2px solid #748f83; border-radius:14px; background:linear-gradient(#fffaea,#fff4d6); box-shadow:0 4px 0 #98a589; color:var(--hb-ink); }
.hb-controllers-tl-row { display:grid; grid-template-columns:104px minmax(0,1fr) 112px; align-items:center; gap:10px; }
.hb-controllers-tl-row.axis { height:16px; }
.hb-controllers-tl-axis { position:relative; height:16px; }
.hb-controllers-tl-axis i { position:absolute; top:0; transform:translateX(-50%); font:700 10px var(--mono); font-style:normal; color:#6b7a6e; white-space:nowrap; }
.hb-controllers-tl-axis i:first-child { transform:none; }
.hb-controllers-tl-axis i:last-child { transform:translateX(-100%); }
.hb-controllers-tl-name { min-width:0; font:800 11px var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-controllers-tl-track { position:relative; height:30px; border:1.5px solid #ddd2b0; border-radius:8px; background:#f6efd8; transition:background .3s; }
.hb-controllers-tl-track.ok { background:#e6f4de; border-color:#b6d6b0; }
.hb-controllers-tl-track.bad { background:#f9e6df; border-color:#e0b5a8; }
.hb-controllers-tl-track i { position:absolute; }
.hb-controllers-tl-track i.grid { top:0; bottom:0; width:1px; background:#ddd2b0; }
.hb-controllers-tl-track i.mark { top:-6px; bottom:-6px; z-index:2; width:2px; margin-left:-1px; background:#235f99; box-shadow:0 0 0 2px #ffffffaa; transition:left .35s; }
.hb-controllers-tl-track i.mark.deadline { width:0; margin-left:0; background:none; box-shadow:none; border-left:2px dashed #a98048; }
.hb-controllers-tl-bar { position:absolute; top:5px; height:18px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1.5px solid #3f7656; border-radius:5px; background:#8fcfa8; font:800 9.5px/1 var(--mono); color:#1f4a33; white-space:nowrap; transition:width .35s; }
.hb-controllers-tl-bar.run { background:repeating-linear-gradient(135deg,#ffe8a1 0 5px,#f5d683 5px 10px); border-color:#a78646; color:#5a4419; }
.hb-controllers-tl-bar.bad { background:#ec9a76; border-color:#8f4f36; color:#fff; }
.hb-controllers-tl-bar.killed { background:repeating-linear-gradient(135deg,#f9dacf 0 5px,#f0bba8 5px 10px); border-color:#b76a55; color:#8f3a28; }
.hb-controllers-tl-bar.skip { background:none; border:1.5px dashed #97a5a1; }
.hb-controllers-tl-band { position:absolute; top:1px; bottom:1px; z-index:1; pointer-events:none; border-left:1.5px solid #8f4f36; border-right:1.5px solid #8f4f36; background:repeating-linear-gradient(45deg,#8f4f3666 0 3px,transparent 3px 7px); }
.hb-controllers-tl-tail { min-width:0; font:700 10.5px/1.35 var(--mono); font-style:normal; color:#5d6e6a; }
.hb-controllers-tl-tail.ok { color:#2d694b; }
.hb-controllers-tl-tail.bad { color:#9c3d2d; }

/* Demo board. */
.hb-controllers-mpods { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.hb-controllers-mpod { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:42px; padding:4px 4px 3px; border:1.5px solid #b59c61; border-radius:9px; background:#fff7d8; box-shadow:0 2px 0 #ab905b; transition:opacity .3s; }
.hb-controllers-mpod svg { width:22px; height:25px; }
.hb-controllers-mpod small { font:700 8.5px var(--mono); color:#4b553d; white-space:nowrap; }
.hb-controllers-mpod.gone { opacity:.35; border-style:dashed; box-shadow:none; }
.hb-controllers-mpod.gone small { text-decoration:line-through; }
.hb-controllers-mpod.fresh { border-color:#a98048; background:#fff1c9; }
.hb-controllers-mpod.fresh svg { animation:hb-drop .7s cubic-bezier(.2,.8,.3,1) both; }
.hb-controllers-mpod.muted { opacity:.6; border-color:#c4cbc0; background:#eef0ea; box-shadow:none; }
.hb-controllers-mpod.done { border-color:#6aa274; background:#dff2d6; box-shadow:0 2px 0 #82a696; }
.hb-controllers-mpod.done small { color:#2d694b; }
.hb-controllers-mpod.bad { border-color:#c38a7c; background:#f8e1da; box-shadow:0 2px 0 #b76a55; }
.hb-controllers-mpod.bad small { color:#9c3d2d; }
.hb-controllers-mpod .hb-chip { font-size:8px; padding:0 4px; }
/* Before → after inside one frame: "vanish" fades out first, "late" drops in after it. The end state is the
 * resting style, so reduced motion (animations off) still shows the result. */
.hb-controllers-mpod.vanish { opacity:.35; border-style:dashed; box-shadow:none; animation:hbc-vanish .5s .55s both; }
.hb-controllers-mpod.vanish small { text-decoration:line-through; animation:hbc-strike .01s .9s both; }
.hb-controllers-mpod.late,.hb-controllers-mlate { animation:hbc-appear .45s 1.15s both; }
.hb-controllers-mpod.fresh.late svg { animation-delay:1.15s; }
.hb-mini-node.yes.hb-controllers-mcube .hb-mini-slot svg:last-child,.hb-mini-node.yes.hb-controllers-mjoin .hb-mini-slot svg:last-child { animation:hb-drop .7s 1.15s cubic-bezier(.2,.8,.3,1) both; }
.hb-controllers-mjoin { animation:hbc-join .55s .35s both; }
.hb-mini-note b.hb-controllers-mlate { display:inline-block; }
/* One tally turning into the next in place: "want 5 · have 3" fades out once the new Pods land. */
.hb-controllers-mswap { display:grid; }
.hb-controllers-mswap>* { grid-area:1/1; }
.hb-controllers-mout { opacity:0; visibility:hidden; animation:hbc-out .35s 1.75s both; }
.hb-controllers-min { animation:hbc-appear .4s 1.85s both; }
.hb-controllers-m4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hb-controllers-mflows { display:grid; gap:5px; width:max-content; max-width:100%; margin:0 auto; }
.hb-controllers-mflow { display:grid; justify-items:start; gap:2px; }
.hb-controllers-mflow>.hb-chip { font-size:9px; padding:0 4px; }
.hb-controllers-mflow>div { display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
.hb-controllers-mflow span,.hb-controllers-mflow i { animation:hbc-appear .35s both; }
.hb-controllers-mflow span { padding:2px 4px; border-radius:6px; border:1.5px solid #c8bd99; background:#fff9e8; font:800 9px var(--mono); color:#5b5236; white-space:nowrap; }
.hb-controllers-mflow span.ok { border-color:#6aa274; background:#dff2d6; color:#2d694b; }
.hb-controllers-mflow span.bad { border-color:#c38a7c; background:#f8e1da; color:#9c3d2d; }
.hb-controllers-mflow span.fresh { border-color:#a98048; background:#fff1c9; color:#5d4720; }
.hb-controllers-mflow i { font:800 11px var(--mono); font-style:normal; color:#537e76; }
@keyframes hbc-vanish { from { opacity:1; border-style:solid; } to { opacity:.35; } }
@keyframes hbc-strike { from { text-decoration-color:transparent; } to { text-decoration-color:currentColor; } }
@keyframes hbc-appear { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes hbc-out { from { opacity:1; visibility:visible; } to { opacity:0; visibility:hidden; } }
@keyframes hbc-join { from { opacity:.15; transform:translateX(16px); } to { opacity:1; transform:none; } }
.hb-controllers-mrs { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; padding:6px 8px; border:2px solid #c9a35a; border-radius:10px; background:#fff1c9; }
.hb-controllers-mrs.ok { border-color:#6aa274; background:#dff2d6; }
.hb-controllers-mrs b { font:800 10.5px var(--mono); color:#2f4f4c; }
.hb-controllers-mrs span { font:800 11px var(--mono); color:#7a5a20; }
.hb-controllers-mrs.ok span { color:#2d694b; }
.hb-controllers-mretry { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; }
.hb-controllers-mretry span { padding:2px 6px; border-radius:6px; border:1.5px solid #c8bd99; background:#fff9e8; font:800 10px var(--mono); color:#5b5236; }
.hb-controllers-mretry span.bad { border-color:#c38a7c; background:#f8e1da; color:#9c3d2d; }

@media(max-width:560px) {
  .hb-controllers-tl { padding:12px 8px 10px; }
  .hb-controllers-tl-row { grid-template-columns:62px minmax(0,1fr); gap:6px; }
  .hb-controllers-tl-tail { grid-column:2; margin-top:-3px; }
  .hb-controllers-tl-tail:empty { display:none; }
  .hb-controllers-tl-name { font-size:10px; }
  .hb-controllers-tl-axis i { font-size:9px; }
  .hb-controllers-count b { font-size:22px; }
}
@media(max-width:440px) {
  .hb-controllers-cargo li { gap:4px; padding:4px 5px; }
  .hb-controllers-cargo li>svg { width:16px; height:18px; }
  .hb-controllers-cargo small { font-size:8px; }
}