/* Card-specific styles for the "lifecycle" harbor course (class prefix .hb-lifecycle-).
 * A timeline on a paper chart: lanes (containers, probes, traffic) on the left, seconds running to the right. */
.hb-lifecycle .hb-panels { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.hb-lifecycle .hb-option { text-align:left; }
.hb-lifecycle-spec .hb-yaml { margin-top:0; }

.hb-lifecycle-tl { display:grid; grid-template-columns:136px minmax(0,1fr); gap:0 10px; padding:20px 16px 8px; border:2px solid #748f83; border-radius:14px; background:linear-gradient(#fffaea,#fff4d6); box-shadow:0 4px 0 #98a589; color:var(--hb-ink); }
.hb-lifecycle-who,.hb-lifecycle-tracks { display:flex; flex-direction:column; min-width:0; }
.hb-lifecycle-tracks { position:relative; }
.hb-lifecycle-name { height:40px; display:flex; align-items:center; gap:6px; min-width:0; }
.hb-lifecycle-name>svg { width:22px; height:25px; flex-shrink:0; }
.hb-lifecycle-name>div { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.hb-lifecycle-name b { display:block; max-width:100%; font:800 11px var(--mono); color:#2f4f4c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-lifecycle-name .hb-chip { font-size:9px; padding:0 5px; line-height:1.45; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hb-lifecycle-name .hb-chip.label::before { display:none; }
.hb-lifecycle-name.axis { height:22px; }
/* A Pod header (one cube per Pod) and its containers or processes, hung off it like a tree. */
.hb-lifecycle-name.in { margin-left:10px; padding-left:8px; border-left:2px solid #c3b68c; }
.hb-lifecycle-tag,.hb-lifecycle-rs { display:inline-block; margin-left:5px; padding:0 4px; border-radius:4px; font:700 8.5px/1.45 var(--mono); vertical-align:1px; }
.hb-lifecycle-tag { border:1px solid #b9ad86; background:#fff3cf; color:#6b5a2e; }
.hb-lifecycle-rs { border:1px solid #c38a7c; background:#f8e1da; color:#9c3d2d; }
.hb-lifecycle-track { position:relative; height:40px; border-bottom:1px dashed #ddd2b0; }
.hb-lifecycle-track::before { content:''; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:#ebe2c6; }
.hb-lifecycle-track.env { background:#f3ecd52e; }
.hb-lifecycle-track.pod::before { display:none; }

/* Segments: what a container (or the world) is doing during an interval. */
.hb-lifecycle-seg { position:absolute; top:9px; height:22px; box-sizing:border-box; display:flex; align-items:center; padding:0 5px; overflow:hidden; border:1.5px solid #3f7656; border-radius:6px; font:700 10px/1 var(--mono); white-space:nowrap; color:#1f4a33; background:#8fcfa8; }
.hb-lifecycle-seg span { overflow:hidden; }
/* Most segments start at a mark (crash, exit, signal): keep their label clear of it. */
.hb-lifecycle-tl:not(.mini) .hb-lifecycle-seg { padding-left:11px; }
.hb-lifecycle-tl:not(.mini) .hb-lifecycle-seg.grace { padding-left:38px; }
.hb-lifecycle-seg.boot { background:repeating-linear-gradient(135deg,#ffe8a1 0 5px,#f5d683 5px 10px); border-color:#a78646; color:#5a4419; }
.hb-lifecycle-seg.init { background:#d7c6ef; border-color:#64508a; color:#3c2c5c; }
.hb-lifecycle-seg.migrate { background:repeating-linear-gradient(135deg,#e7dcf5 0 5px,#d2bfee 5px 10px); border-color:#64508a; color:#3c2c5c; }
.hb-lifecycle-seg.wait { background:#fffdf4; border:1.5px dashed #97a5a1; color:#5d6e6a; }
.hb-lifecycle-seg.down { background:#f8e1da; border-color:#c38a7c; color:#9c3d2d; }
.hb-lifecycle-seg.up { background:#e3f3dc; border-color:#9cc9a3; color:#2d694b; }
.hb-lifecycle-seg.part { background:#ffeec3; border-color:#c9a35a; color:#6b4f1d; }
.hb-lifecycle-seg.hang { background:repeating-linear-gradient(135deg,#f9dacf 0 5px,#f0bba8 5px 10px); border-color:#b76a55; color:#8f3a28; }
.hb-lifecycle-seg.job { background:#ffd98a; border-color:#b8964f; color:#5d4720; box-shadow:inset -3px 0 0 #fff4d6; }
.hb-lifecycle-seg.prestop { background:#c8e7f3; border-color:#3d6f86; color:#24546a; }
.hb-lifecycle-seg.flush { background:repeating-linear-gradient(135deg,#fff1c9 0 5px,#ffe2a0 5px 10px); border-color:#b8964f; color:#5d4720; }
.hb-lifecycle-seg.grace { top:5px; height:30px; background:#ffefc466; border:1.5px dashed #b8964f; color:#7a5a20; align-items:flex-start; padding-top:3px; }
.hb-lifecycle-seg.off { background:none; border:1.5px dashed #d6ccad; color:#8a958c; font-style:italic; }
.hb-lifecycle-seg.more { border-right-width:0; border-radius:6px 0 0 6px; padding-right:16px; }
.hb-lifecycle-seg.more::after { content:'→'; position:absolute; right:3px; font-weight:800; }

/* Marks: probe results, requests, exits and signals at one instant. Three rows: the top edge of the bar (probes,
 * requests, TERM), its middle (crash, exit) and its bottom edge (KILL). */
.hb-lifecycle-mark { position:absolute; top:50%; z-index:2; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; display:grid; place-items:center; font:800 8px/1 var(--sans); color:#fff; background:#5c9a68; box-shadow:0 1px 0 #3f7656; }
.hb-lifecycle-mark.top { top:9px; }
.hb-lifecycle-mark.bottom { top:31px; }
.hb-lifecycle-mark.bad { background:#c76750; box-shadow:0 1px 0 #8f4f36; }
.hb-lifecycle-mark.crash { width:19px; height:19px; font-size:10px; background:#c76750; border:2px solid #fff8e5; box-shadow:0 2px 0 #8f4f36; }
.hb-lifecycle-mark.done { width:19px; height:19px; font-size:10px; background:#2d694b; border:2px solid #fff8e5; box-shadow:0 2px 0 #1f4a33; }
.hb-lifecycle-mark.term,.hb-lifecycle-mark.kill,.hb-lifecycle-mark.cluster { width:auto; height:auto; padding:2px 4px; border-radius:4px; font:800 8.5px/1 var(--mono); letter-spacing:.3px; white-space:nowrap; }
.hb-lifecycle-mark.term { transform:translate(-2px,-50%); background:#f3c965; color:#5a4419; border:1.5px solid #a78646; box-shadow:0 2px 0 #9b804a; }
.hb-lifecycle-mark.kill { transform:translate(-100%,-50%); background:#9c3d2d; color:#fff; border:1.5px solid #6e2a1f; box-shadow:0 2px 0 #6e2a1f; }
.hb-lifecycle-mark.term.flip { transform:translate(calc(2px - 100%),-50%); }
.hb-lifecycle-mark.kill.flip { transform:translate(-2px,-50%); }
/* A summary badge for a packed run of marks; it only replaces them on a phone. */
.hb-lifecycle-mark.cluster { display:none; transform:translate(-6px,-50%); }

/* Axis, goal line and the play cursor. */
.hb-lifecycle-axis { position:relative; height:22px; }
.hb-lifecycle-axis span { position:absolute; top:5px; transform:translateX(-50%); font:700 9.5px var(--mono); color:#6b7a6e; }
.hb-lifecycle-axis span:first-child { transform:none; }
.hb-lifecycle-axis span:last-child { transform:translateX(-100%); }
.hb-lifecycle-goal { position:absolute; top:-14px; bottom:18px; z-index:1; border-left:2px dashed #a98048; }
.hb-lifecycle-goal span { position:absolute; top:-4px; left:3px; padding:0 3px; border-radius:3px; background:#fff3cf; font:800 9px var(--mono); color:#7a5a20; white-space:nowrap; }
.hb-lifecycle-now { position:absolute; top:-6px; bottom:20px; z-index:3; width:2px; margin-left:-1px; background:#235f99; box-shadow:0 0 0 2px #ffffffaa; }
.hb-lifecycle-now::before { content:''; position:absolute; top:-6px; left:-4px; border:5px solid transparent; border-top-color:#235f99; }

/* The same chart for the demo porthole: each lane's name sits above its track, so the full width is time. */
.hb-lifecycle-tl.mini { display:block; padding:8px 10px 2px; border-width:1.5px; border-radius:10px; box-shadow:0 3px 0 #98a589; }
.hb-lifecycle-tl.mini .hb-lifecycle-row+.hb-lifecycle-row { margin-top:3px; }
.hb-lifecycle-tl.mini .hb-lifecycle-name { position:relative; z-index:4; height:auto; width:max-content; max-width:100%; padding-right:4px; border-radius:3px; background:#fff8e4; }
.hb-lifecycle-tl.mini .hb-lifecycle-name b { font-size:10px; line-height:1.3; }
.hb-lifecycle-tl.mini .hb-lifecycle-tag { font-size:10px; padding:0 3px; }
.hb-lifecycle-tl.mini .hb-lifecycle-track { height:24px; margin-top:5px; }
.hb-lifecycle-tl.mini .hb-lifecycle-seg { top:4px; height:16px; padding:0 3px; border-radius:4px; border-width:1px; font-size:10px; }
.hb-lifecycle-tl.mini .hb-lifecycle-seg.grace { top:2px; height:20px; align-items:center; padding-top:0; }
.hb-lifecycle-tl.mini .hb-lifecycle-seg.more::after { display:none; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark { width:10px; height:10px; font-size:7px; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark.top { top:4px; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark.bottom { top:20px; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark.crash,.hb-lifecycle-tl.mini .hb-lifecycle-mark.done { width:13px; height:13px; border-width:1.5px; font-size:7.5px; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark.term,.hb-lifecycle-tl.mini .hb-lifecycle-mark.kill { width:auto; height:auto; padding:1px 3px; font-size:10px; letter-spacing:0; }
.hb-lifecycle-tl.mini .hb-lifecycle-mark.term { top:0; z-index:5; }
.hb-lifecycle-tl.mini .hb-lifecycle-axis { height:16px; }
.hb-lifecycle-tl.mini .hb-lifecycle-axis span { top:2px; font-size:10px; }
.hb-lifecycle-tl.mini .hb-lifecycle-now { top:-4px; bottom:15px; }
.hb-demo .hb-mini-scene .hb-lifecycle-tl,.hb-demo .hb-mini-scene .hb-lifecycle-ladder { width:100%; box-sizing:border-box; }

/* The back-off ladder: one row per exit; the dashed bar is the wait before the next start. */
.hb-lifecycle-ladder { display:grid; gap:6px; padding:9px 10px; border:1.5px solid #748f83; border-radius:10px; background:linear-gradient(#fffaea,#fff4d6); box-shadow:0 3px 0 #98a589; }
.hb-lifecycle-ladder>div { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; }
.hb-lifecycle-ladder>div>span { min-width:3.4em; font:700 10px var(--mono); color:#2f4f4c; white-space:nowrap; }
.hb-lifecycle-ladder>div>div { display:flex; align-items:center; gap:4px; height:18px; min-width:0; }
.hb-lifecycle-ladder .hb-lifecycle-mark { position:static; flex-shrink:0; transform:none; width:14px; height:14px; border-width:1.5px; font-size:8px; }
.hb-lifecycle-ladder .hb-lifecycle-seg { position:static; flex-shrink:0; height:16px; padding:0 4px; border-radius:4px; border-width:1px; font-size:10px; }
.hb-lifecycle-ladder em { font:700 10px var(--mono); color:#5d6e6a; white-space:nowrap; }

@media(max-width:560px) {
  .hb-lifecycle-ladder>div { grid-template-columns:minmax(0,1fr); }
  .hb-lifecycle-ladder>div>span { display:none; }
  .hb-lifecycle-scene .hb-mini-pod>svg { width:22px; height:25px; }
  .hb-lifecycle-scene .hb-mini-pod .hb-chip { font-size:8px; padding:1px 4px; }
  .hb-lifecycle-tl.mini .hb-lifecycle-mark:is(.ok,.bad) { width:8px; height:8px; font-size:6px; }
  .hb-lifecycle-tl:not(.mini) { grid-template-columns:84px minmax(0,1fr); gap:0 6px; padding:18px 8px 6px; }
  .hb-lifecycle-name>svg { display:none; }
  .hb-lifecycle-name b { font-size:9.5px; }
  .hb-lifecycle-name.in { margin-left:2px; padding-left:5px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-name.in b { display:flex; flex-wrap:wrap; align-items:center; gap:1px 4px; white-space:normal; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-tag { margin-left:0; font-size:8px; }
  .hb-lifecycle-rs { display:none; }
  .hb-lifecycle-name .hb-chip { font-size:8.5px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-seg { font-size:8.5px; padding:0 3px 0 8px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark { width:11px; height:11px; font-size:7px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark.crash,.hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark.done { width:15px; height:15px; font-size:8px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark.term,.hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark.kill,.hb-lifecycle-tl:not(.mini) .hb-lifecycle-mark.cluster { width:auto; height:auto; font-size:8px; padding:1px 3px; }
  .hb-lifecycle-tl .hb-lifecycle-mark.packed { display:none; }
  .hb-lifecycle-tl .hb-lifecycle-mark.cluster { display:grid; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-axis span { font-size:8px; }
  .hb-lifecycle-tl:not(.mini) .hb-lifecycle-axis span:nth-child(even):not(:last-child) { visibility:hidden; }
}