/* Card-specific styles for the "priority" harbor course (class prefix .hb-priority-). */

/* Manifests keep their own height; the run log shows every line (runs are short). */
.hb-priority .hb-panels { align-items:start; }
.hb-priority .hb-panel { min-width:0; }
.hb-priority .hb-log { max-height:none; }
/* YAML: one block per line; a long line wraps at spaces and continues with a hanging indent (see yaml() in the card). */
.hb-priority-yaml { white-space:normal; }
.hb-priority-yaml>span { display:block; white-space:pre-wrap; padding-left:calc(var(--indent,0ch) + 2ch); text-indent:calc(-2ch - var(--indent,0ch)); }
.hb-priority-yaml>span>span { display:inline-block; max-width:100%; text-indent:0; overflow-wrap:anywhere; vertical-align:top; }

/* Slots carry a priority tag (top right) and the Pod's uptime (bottom); wide enough for names like payment-1. */
.hb-priority .hb-hold { grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); }
.hb-priority .hb-slot small { font-size:8.5px; padding:0 1px; white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.15; }
.hb-priority .hb-slot { position:relative; min-height:58px; padding-bottom:2px; }
.hb-priority-prio { position:absolute; top:-8px; right:-5px; padding:0 4px; border-radius:6px; border:1.5px solid #9fb4a6; background:#eef6ea; color:#33584f; font:800 10px/15px var(--mono); font-style:normal; box-shadow:0 1px 0 #0001; }
.hb-priority-prio.low { border-color:#a8b2ad; background:#eef0ea; color:#5d6e6a; }
.hb-priority-prio.zero { border-color:#7fb0c4; background:#e0f1f7; color:#2d5f74; }
.hb-priority-prio.high { border-color:#b8964f; background:#ffe9b0; color:#5d4720; }
.hb-priority-prio.crit { border-color:#c38a7c; background:#fbe2d6; color:#8f4f36; }
.hb-priority-prio.inline { position:static; align-self:flex-start; margin-left:2px; }
.hb-priority-age { font:600 9.5px var(--mono); font-style:normal; color:#56685f; line-height:1.2; }
.hb-slot.hb-priority-victim { border:2px solid #c76750; background:#f8e1da; animation:st-shake .45s; }
.hb-slot.hb-priority-victim svg { opacity:.55; transform:translateY(-4px); }
.hb-slot.hb-priority-victim small { color:#9c3d2d; text-decoration:line-through; }
.hb-slot.hb-priority-balloon { border-style:dashed; background:#f4f5ef; }
.hb-slot.hb-priority-balloon svg { opacity:.5; }
.hb-priority .hb-ship .hb-meter { margin:8px 0 2px; }
.hb-priority .hb-ship .st-resource-label { font-size:10px; margin-bottom:4px; }
.hb-priority .hb-ship .st-resource-label span { font-size:10px; }

/* Requests stage: one slot per allocatable CPU. cpu: 2 reserves both slots; workers beyond the node's CPU spill over in red. */
.hb-slot.hb-priority-wide { grid-column:span 2; }
.hb-slot.hb-priority-over { border:2px solid #c76750; background:#f8e1da; }
.hb-slot.hb-priority-over .hb-priority-age { color:#9c3d2d; }

/* Cluster DNS gauge for the coredns stage. */
.hb-priority-dns { margin:14px 2px 0; padding:8px 12px 4px; border:2px solid #7ea3a1; border-radius:12px; background:#eef6eccc; }
.hb-priority-dns.down { border-color:#c38a7c; background:#f8e1dacc; }
.hb-priority-dns .hb-meter { margin:2px 0 6px; }

/* Demo board marks. */
.hb-mini-slot.hb-priority-m-out { border:1.5px solid #c76750; background:#f8e1da; }
.hb-mini-slot.hb-priority-m-out svg { opacity:.45; transform:translateY(-5px); transition:transform .3s; }
.hb-mini-slot.hb-priority-m-in svg { animation:hb-drop .7s cubic-bezier(.2,.8,.3,1) both; }
.hb-mini-slot.hb-priority-m-balloon { border-style:dashed; }
.hb-mini-slot.hb-priority-m-balloon svg { opacity:.5; }
.hb-mini-node.hb-priority-boot { border-style:dashed; opacity:.7; box-shadow:0 4px 0 #a7b9b2; }
.hb-priority-mqueue { display:flex; flex-direction:column; gap:6px; align-items:center; }
.hb-priority-mqueue .hb-mini-pod { margin:0; }
/* Preemption in one slot: the victim lifts away, then the preemptor drops into the same place. */
.hb-mini-slot.hb-priority-m-swap>svg { grid-area:1/1; }
.hb-mini-node .hb-mini-slot.hb-priority-m-swap>svg:first-child { animation:hb-priority-lift .6s .4s ease-in both; }
.hb-mini-node .hb-mini-slot.hb-priority-m-swap>svg:last-child { animation:hb-drop .7s 1.1s cubic-bezier(.2,.8,.3,1) both; }
/* A new ship boots (dashed), turns Ready, then the waiting Pods land; things marked "later" appear after that. */
.hb-mini-node.hb-priority-booting { animation:hb-priority-boot 1.6s both; }
.hb-mini-slot.hb-priority-m-late svg { animation:hb-drop .7s 1.6s cubic-bezier(.2,.8,.3,1) both; }
.hb-priority-m-later { animation:hb-priority-fade .4s 1.7s both; }
.hb-priority-m-leave { animation:hb-priority-dim .4s 1.6s both; }
.hb-priority-mchips { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.hb-priority-mchips .hb-chip { font-size:9px; padding:1px 5px; }
@keyframes hb-priority-lift { to { opacity:0; transform:translateY(-14px); } }
@keyframes hb-priority-boot { 0%,70% { border-style:dashed; opacity:.7; box-shadow:0 4px 0 #a7b9b2; } 100% { border-style:solid; opacity:1; } }
@keyframes hb-priority-fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes hb-priority-dim { to { opacity:.3; } }
/* Reduced motion (the shell stops all animations): show the end state. */
@media(prefers-reduced-motion:reduce) {
  .hb-mini-node .hb-mini-slot.hb-priority-m-swap>svg:first-child { display:none; }
  .hb-priority-m-leave { opacity:.3; }
}

@media(max-width:440px) {
  .hb-priority .hb-slot { min-height:54px; }
  .hb-priority-prio { right:-3px; }
}