/* Sandboxed Runtimes, built on the Runtime Stack's stylesheet: the same
   bands, rails, events and flying messages, with the bands under the node's
   split into three lanes, one per runtime. Opened full screen or in an
   iframe, which cannot see the site's own light/dim switch, so it follows
   the reader's system preference, as the other viewers do. */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --border: #dfe3e8;
  --text: #22272e;
  --dim: #5f6b78;
  --accent: #326ce5;
  --btn: #f4f5f7;
  --raw: #f7f8fa;
  --flash: rgba(255, 196, 0, 0.3);
  --code-bg: #f6f8fa;
  --kern: #eef1f6;
  --warn: #b3261e;
  /* one colour per lane, and per pod: runc, gVisor, Kata; the Agent
     Sandbox's pods; the host's own objects are grey */
  --c-a: #326ce5;
  --c-b: #0f8a6a;
  --c-c: #c96a12;
  --c-d: #8e44ad;
  --c-w: #5d8f7f;
  --c-host: #8a96a3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1d2b;
    --card: #112b40;
    --border: #234862;
    --text: #eaf1f6;
    --dim: #9fb2c2;
    --accent: #6f9bff;
    --btn: #16374f;
    --raw: #0d2233;
    --flash: rgba(255, 196, 0, 0.18);
    --code-bg: #0d2233;
    --kern: #081b29;
    --warn: #ff8a80;
    --c-a: #7ea6ff;
    --c-b: #4fd1a8;
    --c-c: #f0a050;
    --c-d: #c58ae0;
    --c-w: #8fc4b2;
    --c-host: #6f8293;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dim { color: var(--dim); font-weight: 400; }
.kv-app { padding: 0.5rem 16px 1rem; max-width: 1800px; margin: 0 auto; }
.kv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; margin: 0 0 0.45rem; }
.kv-head h1 { font-size: 1.3rem; margin: 0; letter-spacing: -0.01em; }
.kv-head p { margin: 0; color: var(--dim); font-size: 0.92rem; }
.in-viewer .kv-head { display: none; }

/* --- controls */
.kv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.kv-bar .count { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: var(--dim); }
.kv-btn { background: var(--btn); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.35rem 0.9rem; font-size: 0.88rem; cursor: pointer; font-family: inherit; }
.kv-btn:hover:not(:disabled) { border-color: var(--accent); }
.kv-btn:disabled { opacity: 0.45; cursor: default; }
.kv-btn.play { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; min-width: 6rem; }
.kv-btn.go { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.kv-btn.tiny { padding: 0.05rem 0.45rem; font-size: 0.74rem; border-radius: 5px; }
.kv-app select { background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.3rem 0.4rem; font-size: 0.86rem; font-family: inherit; min-width: 0; max-width: 100%; }

/* --- the events */
.log { list-style: none; margin: 0; padding: 0; }
.log-intro { font-size: 1em; line-height: 1.45; }
.log-intro p { margin: 0 0 0.4rem; }
.log-intro .main { font-weight: 600; }
.log li { border-bottom: 1px dashed var(--border); }
.log-head { all: unset; font-size: 1em; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; gap: 0.4rem; align-items: baseline; padding: 0.15rem 0.3rem; cursor: pointer; }
.log-head::after { content: '▸'; color: var(--dim); font-size: 0.7rem; }
.log li.open .log-head::after { content: '▾'; }
.log-head:focus-visible { outline: 2px solid var(--accent); }
.log li:hover .log-head { background: color-mix(in srgb, var(--flash) 40%, transparent); }
.log li.now .log-head { background: color-mix(in srgb, var(--flash) 75%, transparent); }
.log li.now.open .log-body { background: color-mix(in srgb, var(--flash) 30%, transparent); }
.log-body { padding: 0.2rem 0.5rem 0.5rem 2.4em; font-size: 0.95em; line-height: 1.42; }
.log-body p { margin: 0 0 0.3rem; }
.log-body .main { font-weight: 600; font-size: 1.12em; }
.log-body .main b { color: var(--accent); font-weight: 800; }
.log .n { color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 0.86em; }
.log .scene { font-size: 0.79em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); padding: 0.5rem 0.3rem 0.15rem; border-bottom: none; }
.log-body ul.steps, .log-intro ul.steps { margin: 0 0 0.35rem; padding-left: 1.05rem; list-style: disc; }
.log-body ul.steps li, .log-intro ul.steps li { border: 0; margin: 0 0 0.15rem; }
.log-body ul.steps ul.steps, .log-intro ul.steps ul.steps { margin: 0.1rem 0; list-style: circle; }
.log code, .log-intro code { font-size: 0.92em; background: var(--code-bg); padding: 0 0.2em; border-radius: 3px; }
.log a, .log-intro a { color: var(--accent); font-weight: 600; }
.sx-log .kv-body { font-size: calc(0.84rem * var(--lz, 1.15)); }
.zoom { display: flex; gap: 0.2rem; }
.zoom .kv-btn { padding: 0.05rem 0.45rem; font-size: 0.78rem; font-weight: 700; }

/* --- the stage: the stack of bands, and the events beside it */
.sx-stage { position: relative; display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) 12px var(--log-w, 400px);
  height: max(720px, calc(100vh - 6.2rem)); }
@media (min-width: 1101px) { .in-viewer .sx-stage { height: max(720px, calc(100vh - 4.1rem)); } }
.sx-stack { position: relative; display: grid; gap: 6px; min-height: 0; min-width: 0;
  grid-template-rows: max-content max-content 100px 60px 92px minmax(170px, 0.9fr) minmax(280px, 1.3fr); }
.sx-split { cursor: col-resize; touch-action: none; position: relative; }
.sx-split::after { content: ''; position: absolute; top: 50%; left: 4px; height: 44px; width: 4px; margin-top: -22px;
  border-radius: 2px; background: var(--border); }
.sx-split:hover::after, .sx-split:focus-visible::after, .sx-split.drag::after { background: var(--accent); }
.sx-split:focus-visible { outline: none; }

.kv-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 0.84rem; }
.kv-card > header { flex: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 0.7rem 0.4rem; border-bottom: 1px solid var(--border); }
.kv-card > header h2 { font-size: 0.92rem; margin: 0; flex: 1 1 10rem; min-width: 0; }
.kv-card > header h2 code { font-size: 0.72rem; color: var(--dim); font-weight: 400; margin-left: 0.3rem; }
.kv-body { flex: 1; min-height: 0; overflow: auto; padding: 0.5rem 0.7rem; }
h3 { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin: 0 0 0.25rem; font-weight: 700; }
h3 code { text-transform: none; letter-spacing: 0; font-weight: 400; }
h4 { font-size: 0.72rem; margin: 0 0 0.15rem; }
.free { color: var(--dim); font-style: italic; font-size: 0.72rem; margin: 0; }

/* A band: the layer's name on a rail at its left, what runs in it to the right */
.band { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); min-height: 0; min-width: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 0.78rem; overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.4s; }

.rail { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.3rem 0.4rem;
  border-right: 1px solid var(--border); background: var(--raw); min-height: 0; }
.rail b { font-size: 0.74rem; line-height: 1.15; text-align: center; }
.rail .turn { margin-top: auto; align-self: stretch; font-size: 0.7rem; padding: 0.15rem 0.4rem; white-space: normal; text-align: left; animation: sx-due 1.4s ease-in-out infinite; }
@keyframes sx-due { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); } }
.bb { display: flex; gap: 0.5rem; padding: 0.35rem 0.45rem; min-width: 0; min-height: 0; overflow: auto; align-items: stretch; }
.b-kern { background: var(--kern); }
.b-kern .rail { background: color-mix(in srgb, var(--text) 8%, var(--kern)); }

/* --- the lanes: three columns, one per runtime, aligned through the bands */
.lanes { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; min-height: 0; }
.lane { --lc: var(--c-host); position: relative; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; min-height: 0; overflow: auto;
  border-radius: 7px; padding: 0.25rem 0.35rem; background: color-mix(in srgb, var(--lc) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--lc) 25%, var(--border)); }
.lane.l-a { --lc: var(--c-a); } .lane.l-b { --lc: var(--c-b); } .lane.l-c { --lc: var(--c-c); }
.lane.empty { justify-content: center; border-style: dashed; }
.lane-row { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: stretch; min-width: 0; }

/* The lane heads: each runtime's name and its place on the isolation
   spectrum, an arrow under the three running on to the full VM */
.b-head { background: transparent; border: 0; overflow: visible; }
.b-head .rail { background: transparent; border: 0; justify-content: flex-end; }
.b-head .rail b { color: var(--dim); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; }
.b-head .bb { padding: 0 0.45rem; overflow: visible; }
.lhead { --lc: var(--c-host); display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; border-top: 4px solid var(--lc); border-radius: 6px;
  padding: 0.25rem 0.4rem 0.3rem; background: var(--card); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; }
.lhead.l-a { --lc: var(--c-a); } .lhead.l-b { --lc: var(--c-b); } .lhead.l-c { --lc: var(--c-c); }
.lhead .lt { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.lhead .lt b { font-size: 0.92rem; color: var(--lc); }
.lhead .lt span { font-size: 0.72rem; color: var(--dim); }
.lhead .lt em { margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--dim); }
.spec-arrow { grid-column: 1 / -1; position: relative; height: 16px; margin: 0.15rem 0 0; }
.spec-arrow::before { content: ''; position: absolute; left: 0; right: 14px; top: 7px; height: 2px;
  background: linear-gradient(90deg, var(--c-a), var(--c-b), var(--c-c), var(--dim)); }
.spec-arrow::after { content: ''; position: absolute; right: 4px; top: 2px; border: 6px solid transparent; border-left: 10px solid var(--dim); }
.spec-arrow span { position: absolute; right: 26px; top: -3px; font-size: 0.64rem; font-weight: 700; color: var(--dim); background: var(--bg); padding: 0 0.3rem; }
.spec-arrow i { position: absolute; left: 0; top: -3px; font-size: 0.64rem; font-style: normal; color: var(--dim); background: var(--bg); padding-right: 0.3rem; }
.meters { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.05rem 0.4rem; margin-top: 0.15rem; font-size: 0.64rem; align-items: center; }
.meters dt { color: var(--dim); white-space: nowrap; }
.meters dd { margin: 0; display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.meters dd i { flex: none; display: inline-flex; gap: 2px; }
.meters dd i s { width: 9px; height: 7px; border-radius: 2px; background: var(--border); text-decoration: none; }
.meters dd i s.on { background: var(--lc); }
.meters dd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- boxes, files, terminals */
.box { display: flex; flex-direction: column; gap: 0.08rem; border: 1px solid var(--border); border-left: 4px solid var(--tc, var(--c-host));
  border-radius: 7px; padding: 0.2rem 0.4rem; background: var(--raw); min-width: 0; }
.box > span { font-size: 0.68rem; }
.box code { font-size: 0.66rem; }
.box.transient { border-style: dashed; border-left-style: solid; }
.box .args { font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.kbar { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.kbar b { font: 700 0.76rem ui-monospace, Menlo, monospace; }
.kbar i { margin-left: auto; color: var(--dim); font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem; white-space: nowrap; }
.link { all: unset; cursor: pointer; color: var(--accent); font: 600 0.68rem ui-monospace, Menlo, monospace; text-decoration: underline dotted; }
.link:hover { text-decoration: underline; }
.o-host { --tc: var(--c-host); } .o-a { --tc: var(--c-a); } .o-b { --tc: var(--c-b); } .o-c { --tc: var(--c-c); }
.o-d { --tc: var(--c-d); } .o-w1, .o-w2, .o-w3 { --tc: var(--c-w); }

.term { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 7px; background: #0d1117; color: #d6deeb; overflow: hidden; }
.term .tbar { flex: none; display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.7rem; color: #c9d4df; padding: 0.15rem 0.5rem; background: #161b22; }
.term .tbar b { font: 700 0.76rem ui-monospace, Menlo, monospace; color: #fff; }
.term .tbar i { margin-left: auto; color: #8b98a5; font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem; }
.tscroll { flex: 1; min-height: 0; overflow: auto; padding: 0.2rem 0.5rem; font: 0.66rem/1.35 ui-monospace, Menlo, monospace; }
.tl, .out { white-space: pre; }
.tl .ps { color: #7ee787; }
.tl.now { background: rgba(255, 196, 0, 0.18); }
.out { color: #a9b4c0; }
.out.hit { color: #ffd479; }

/* --- the cluster's API: kubectl, and the objects it holds */
.b-api .term { flex: 0 1 25%; min-width: 210px; contain: size; min-height: 100px; }
.objs { flex: 1 1 0; display: flex; gap: 0.4rem; min-width: 0; }
.ocol { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 0; overflow: auto; }
.ocol.narrow { flex: 0.8 1 0; }
.kobj { display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; border: 1px solid var(--border); border-left: 4px solid var(--tc, var(--c-host));
  border-radius: 6px; padding: 0.05rem 0.35rem; background: var(--raw); font-size: 0.68rem; }
.kobj .kind { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }
.kobj b { font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; }
.kobj span { color: var(--dim); font-size: 0.64rem; }
.kobj code { font-size: 0.62rem; }
.kobj.ghost { border-style: dashed; opacity: 0.75; background: transparent; }
.kobj.gone { text-decoration: line-through; opacity: 0.5; }
button.kobj { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; border: 1px solid var(--border); border-left: 4px solid var(--tc);
  border-radius: 6px; padding: 0.05rem 0.35rem; background: var(--raw); font-size: 0.68rem; }
button.kobj:hover, button.kobj.sel { box-shadow: 0 0 0 2px var(--tc); }
.ctl { border-style: solid; border-color: var(--c-d); border-left-width: 4px; }

/* --- the node: kubelet, containerd and its runtime handlers, a shell */
.handlers { border-collapse: collapse; font-size: 0.64rem; margin-top: 0.1rem; }
.handlers td { padding: 0 0.4rem 0 0; white-space: nowrap; }
.handlers td:first-child { font-weight: 700; }
.handlers tr.h-a td:first-child { color: var(--c-a); } .handlers tr.h-b td:first-child { color: var(--c-b); } .handlers tr.h-c td:first-child { color: var(--c-c); }
.handlers code { font-size: 0.62rem; }

/* --- inside the containers: what a process in each sees */
.pod { display: flex; flex-direction: column; gap: 0.15rem; border: 1.5px dashed var(--tc); border-radius: 8px; padding: 0.15rem 0.3rem; min-width: 0; flex: 1 1 0; }
.pod > header { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.7rem; }
.pod > header b { color: var(--tc); font-family: ui-monospace, Menlo, monospace; }
.pod > header span { color: var(--dim); font-size: 0.62rem; }
.ctrs { display: flex; gap: 0.25rem; min-width: 0; flex-wrap: wrap; }
.ctr { flex: 1 1 0; min-width: 7.5rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.05rem 0.3rem; background: var(--card); }
.ctr h4 { font-size: 0.64rem; color: var(--dim); margin: 0; }
.ctr h4 b { color: var(--text); }
.task { display: flex; gap: 0.3rem; align-items: baseline; font: 0.64rem ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; }
.task b { min-width: 1.6rem; color: var(--tc); }
.task.mal span { color: var(--warn); font-weight: 700; }

/* --- the shims */
.shimrow { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.shimrow .box { flex: 1 1 9rem; }

/* --- the sandbox band: what serves the workload's syscalls in each lane */
.nosbx { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 0; font-size: 0.72rem; color: var(--dim); }
.nosbx p { margin: 0; }
.nosbx b { color: var(--c-a); }
.nosbx .guard { justify-content: center; }
.nosbx .down { flex: 1; min-height: 1.2rem; max-height: 3rem; position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.nosbx .down::before { content: ''; position: absolute; top: 0; bottom: 8px; left: 50%; border-left: 2px dashed var(--c-a); }
.nosbx .down::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 6px); border: 6px solid transparent; border-top: 9px solid var(--c-a); border-bottom: 0; }
.nosbx .down span { position: relative; background: color-mix(in srgb, var(--c-a) 5%, var(--card)); padding: 0.1rem 0.4rem; font-size: 0.66rem; }
.sentry { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.2rem; border: 1.5px solid var(--tc); border-radius: 8px; padding: 0.2rem 0.35rem; background: var(--card); }
.sentry > .kbar b { color: var(--tc); }
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.2rem 0.3rem; min-height: 0; }
.sobj { border: 1px solid var(--border); border-left: 3px solid var(--tc); border-radius: 5px; padding: 0.05rem 0.3rem; font-size: 0.64rem; line-height: 1.3; min-width: 0; }
.sobj h4 { font-size: 0.62rem; margin: 0; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.sobj code { font-size: 0.6rem; }
.sobj p { margin: 0; }
.sobj.soft { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tc) 7%, var(--card)) 0 5px, var(--card) 5px 10px); }
.gofers { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.gofer { flex: 1 1 8rem; border: 1px solid var(--tc); border-radius: 6px; padding: 0.05rem 0.3rem; font-size: 0.64rem; background: var(--raw); }
.gofer b { font-family: ui-monospace, Menlo, monospace; }
.vm { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.2rem; border: 2px solid var(--tc); border-radius: 10px; padding: 0.2rem 0.35rem;
  background: color-mix(in srgb, var(--tc) 5%, var(--card)); }
.vm > .kbar b { color: var(--tc); }
.gkern { border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.3rem; background: var(--kern); font-size: 0.64rem; }
.gkern h4 { margin: 0 0 0.05rem; font-size: 0.66rem; }
.vdev { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.vdev span { border: 1px solid var(--tc); border-radius: 4px; padding: 0 0.25rem; font: 0.6rem ui-monospace, Menlo, monospace; background: var(--card); }
.minis { display: flex; gap: 0.25rem; flex-wrap: wrap; align-content: flex-start; }
.mini { flex: 1 1 8.5rem; border: 1.5px solid var(--tc); border-radius: 7px; padding: 0.1rem 0.3rem; background: var(--card); font-size: 0.64rem; }
.mini b { font-family: ui-monospace, Menlo, monospace; color: var(--tc); }
.mini em { font-style: normal; font-weight: 700; font-size: 0.6rem; color: var(--dim); }
.mini.susp { border-style: dashed; opacity: 0.7; }

/* --- the host kernel: what it holds for each lane, over the one kernel */
.kbox { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; min-height: 0; }
.kbox .lanes { flex: 1; }
.hp { display: flex; flex-direction: column; gap: 0.08rem; }
.pill { display: flex; gap: 0.35rem; align-items: baseline; border-left: 4px solid var(--tc); padding: 0.01rem 0.35rem; border-radius: 4px;
  background: color-mix(in srgb, var(--tc) 10%, var(--card)); font-size: 0.66rem; white-space: nowrap; min-width: 0; }
.pill b { font: 700 0.64rem ui-monospace, Menlo, monospace; min-width: 2.6rem; }
.pill span { overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace; font-size: 0.64rem; }
.pill em { font-style: normal; font-size: 0.58rem; color: var(--dim); margin-left: auto; }
.pill.d1 { margin-left: 0.6rem; } .pill.d2 { margin-left: 1.2rem; }
.pill.o-host { background: var(--raw); }
.nsl { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.nsc { font: 0.6rem ui-monospace, Menlo, monospace; padding: 0 0.25rem; border-radius: 4px; border-left: 3px solid var(--tc);
  background: color-mix(in srgb, var(--tc) 12%, var(--card)); white-space: nowrap; }
.guard { display: flex; flex-wrap: wrap; gap: 0.15rem 0.3rem; font-size: 0.62rem; }
.guard span { border: 1px solid var(--border); border-radius: 4px; padding: 0 0.25rem; background: var(--card); }
.guard span.weak { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.guard span.ok { border-color: var(--tc); }
.kbase { flex: none; border: 1px solid color-mix(in srgb, var(--text) 25%, var(--border)); border-radius: 8px; background: var(--card); padding: 0.15rem 0.3rem; }
.kbase > .kbar b { font-size: 0.74rem; }
.gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 0.15rem; }
.gate { --lc: var(--c-host); border: 1px solid color-mix(in srgb, var(--lc) 50%, var(--border)); border-top: 3px solid var(--lc); border-radius: 5px; padding: 0.05rem 0.3rem; font-size: 0.62rem; min-width: 0; }
.gate.l-a { --lc: var(--c-a); } .gate.l-b { --lc: var(--c-b); } .gate.l-c { --lc: var(--c-c); }
.gate b { font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem; }
.gate span { color: var(--dim); }
.kshared { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.15rem; font-size: 0.62rem; }
.kshared span { border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; background: var(--raw); font-family: ui-monospace, Menlo, monospace; }
.kshared span.bad { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.warn { color: var(--warn); font-weight: 700; }

/* --- a step's spotlight: the bands it names stay, the rest dims */
.sx-stage.spotlight .band:not(.here):not(.b-head) { opacity: 0.35; }
/* What a step is about: filled in its pod's colour (else the scene's
   runtime's), dark for this step, light for the scene's earlier steps */
.sx-stage { --flow: var(--accent); }
.sx-stage[data-flow="a"] { --flow: var(--c-a); } .sx-stage[data-flow="b"] { --flow: var(--c-b); }
.sx-stage[data-flow="c"] { --flow: var(--c-c); } .sx-stage[data-flow="d"] { --flow: var(--c-d); }
.act { background: color-mix(in srgb, var(--tc, var(--flow)) 38%, var(--card)) !important; border-radius: 6px; }
.passed { background: color-mix(in srgb, var(--tc, var(--flow)) 13%, var(--card)) !important; border-radius: 6px; }
.term .act { background: color-mix(in srgb, var(--flow) 45%, transparent) !important; }
.term .passed { background: color-mix(in srgb, var(--flow) 18%, transparent) !important; }
.lhead.act { background: color-mix(in srgb, var(--lc) 30%, var(--card)) !important; }
.lhead.passed { background: color-mix(in srgb, var(--lc) 10%, var(--card)) !important; }
.gate.act, .lane.act { background: color-mix(in srgb, var(--lc, var(--flow)) 30%, var(--card)) !important; }
.gate.passed, .lane.passed { background: color-mix(in srgb, var(--lc, var(--flow)) 10%, var(--card)) !important; }
.o-host.act, .o-host.passed { --tc: var(--flow); }

/* --- a pod selected: what it is made of lights, the rest dims */
.sx-stage:not([data-picked=""]) .sx-stack .band:not(.b-head) [data-own]:not(.mine) { opacity: 0.28; }
.sx-stage:not([data-picked=""]) .sx-stack [data-own].mine { outline: 2px solid var(--tc, var(--accent)); outline-offset: 1px; }
.sx-stage:not([data-picked=""]) .sx-stack .mine [data-own].mine { outline: none; }

/* --- what is in the air: a message flying along its arrow, in its owner's colour */
#sx-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 50; }
#sx-fly .trail { position: absolute; left: 0; top: 0; overflow: visible; }
#sx-fly .trail polyline { fill: none; stroke: var(--tc, var(--accent)); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 7; }
#sx-fly .trail path { fill: var(--tc, var(--accent)); }
#sx-fly .msg { position: absolute; transform: translate(-50%, -50%); background: var(--tc, #0d2436); color: #fff;
  border-radius: 6px; padding: 0.12rem 0.5rem; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
#sx-fly .msg.bad { background: var(--warn); }

/* --- a file opened */
.sx-file { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; padding: 16px; }
.sx-file[hidden] { display: none; }
.fwin { width: min(760px, 100%); max-height: 85vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); overflow: hidden; }
.fwin header { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.fwin header code { flex: 1; font-size: 0.72rem; overflow-wrap: anywhere; }
.fwin p { margin: 0.3rem 0.6rem 0; font-size: 0.74rem; }
.fwin pre { margin: 0; padding: 0.5rem 0.7rem; overflow: auto; font: 0.7rem/1.4 ui-monospace, Menlo, monospace; background: var(--code-bg); flex: 1; }

/* --- a layer's doc: the book on each rail opens it in a box floating over
   the stack; any click closes it */
.book { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 50px; height: 40px; border-radius: 7px; color: var(--accent); }
.book:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.book:focus-visible { outline: 2px solid var(--accent); }
.book.on { background: var(--accent); color: #fff; }
.sx-doc { position: absolute; z-index: 30; left: 130px; top: 0; bottom: 0; width: min(52%, 700px); display: flex; flex-direction: column;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--card); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); cursor: default; }
.sx-doc[hidden] { display: none; }
.dbody { flex: 1; min-height: 0; overflow: auto; padding: 0.7rem 1rem 1rem; font-size: calc(0.84rem * var(--lz, 1.15)); line-height: 1.5; }
.dbody p { margin: 0 0 0.6em; }
.dbody h4 { font-size: 1em; margin: 1.1em 0 0.4em; padding-top: 0.6em; border-top: 1px solid var(--border); }
.dbody ul.steps, .dbody ol { margin: 0 0 0.7em; padding-left: 1.3em; }
.dbody ul.steps ul.steps { margin: 0.15em 0; list-style: circle; }
.dbody li { margin-bottom: 0.2em; }
.dbody code { font-size: 0.9em; background: var(--code-bg); padding: 0 0.2em; border-radius: 3px; overflow-wrap: anywhere; }
.dbody a { color: var(--accent); font-weight: 600; }
.dtable { overflow-x: auto; margin: 0 0 0.8em; }
.dbody table { border-collapse: collapse; font-size: 0.92em; }
.dbody th, .dbody td { border: 1px solid var(--border); padding: 0.25em 0.5em; text-align: left; vertical-align: top; }
.dbody th { background: var(--raw); }
.dbody td code { overflow-wrap: normal; white-space: nowrap; }
.dtitle { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.5em; font-size: 1.35em; }
.dtitle svg { width: 1.3em; height: 1.3em; color: var(--accent); flex: none; }
.dbody .dsum { margin: 1.2em 0 0; padding: 0.6em 0.8em; border-left: 4px solid var(--accent); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card)); font-weight: 600; }

/* --- narrower screens: the bands stack at their own height, the events under them */
@media (max-width: 1100px) {
  .sx-stage { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sx-split { display: none; }
  .sx-stack { grid-template-rows: none; }
  .band { min-height: 64px; }
  .bb { flex-wrap: wrap; }
  .b-api .term { flex-basis: 100%; height: 150px; }
  .lane { max-height: 320px; }
  .sx-log { height: 440px; margin-top: 8px; }
  .sx-doc { position: fixed; left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; z-index: 90; }
  .kv-bar { position: sticky; top: 0; z-index: 40; background: var(--bg); margin: 0 -16px 0.6rem; padding: 0.4rem 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
}
@media (max-width: 760px) {
  .kv-bar { gap: 0.35rem 0.5rem; }
  .kv-bar .kv-btn { padding: 0.3rem 0.7rem; }
  .kv-bar select { flex: 1 1 10rem; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .rail .turn { margin: 0 0 0 auto; }
  .b-head .rail { display: none; }
  .lanes, .gates { grid-template-columns: minmax(0, 1fr); }
  .objs { flex-wrap: wrap; }
  .ocol, .ocol.narrow, .ocol.wide { flex: 1 1 100%; }
}
.dbody pre { margin: 0 0 0.8em; padding: 0.5em 0.7em; background: var(--code-bg); border-radius: 6px; overflow-x: auto; font: 0.86em/1.45 ui-monospace, Menlo, monospace; }
.kcols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.4rem; min-height: 0; }
.kcols > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gate:empty { border-style: dashed; border-top-width: 1px; opacity: 0.5; }
@media (max-width: 760px) { .kcols { grid-template-columns: minmax(0, 1fr); } }
/* The API's objects: one line each, two columns when a list grows */
.kobj, button.kobj { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; }
.kobj span { overflow: hidden; text-overflow: ellipsis; }
.ocol.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 0.2rem; }
.ocol.two > h3 { grid-column: 1 / -1; margin: 0; }
.minishims { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.2rem; }
.minishims .box { padding: 0.05rem 0.3rem; }
.minishims code { font-size: 0.6rem; } .minishims span { font-size: 0.6rem; }
.nsc { white-space: normal; }
.pill b { min-width: 2.2rem; }
.b-api .bb { overflow: visible; }
.b-api .ocol { overflow: visible; }
.lane-row .pod { min-width: 0; }
.lane-row .pod > header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocol.wide { flex: 1.35 1 0; }
.ocol.narrow { flex: 0.75 1 0; }
/* The runc-only scenes: runc's lane lit, its head drawn large, the other two dimmed */
.sx-stage[data-focus="a"] .lhead:not(.l-a), .sx-stage[data-focus="a"] .lane:not(.l-a), .sx-stage[data-focus="a"] .gate:not(.l-a) { opacity: 0.3; }
.sx-stage[data-focus="a"] .lhead.l-a { border-top-width: 6px; box-shadow: 0 0 0 2px var(--c-a), 0 6px 18px color-mix(in srgb, var(--c-a) 30%, transparent); }
.sx-stage[data-focus="a"] .lhead.l-a .lt b { font-size: 1.15rem; }
.sx-stage[data-focus="a"] .lhead.l-a .lt span { font-size: 0.82rem; color: var(--text); font-weight: 600; }
/* A CVE step: runc's filters, its lane of the host kernel and the kernel code the bug is in turn red */
.sx-stage:not([data-hit=""]) .b-sbx .lane.l-a, .sx-stage:not([data-hit=""]) .b-kern .lane.l-a, .sx-stage:not([data-hit=""]) .gate.l-a {
  --lc: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent); }
.sx-stage:not([data-hit=""]) .nosbx b, .sx-stage:not([data-hit=""]) .nosbx p { color: var(--warn); }
.sx-stage:not([data-hit=""]) .nosbx .down::before { border-left-color: var(--warn); }
.sx-stage:not([data-hit=""]) .nosbx .down::after { border-top-color: var(--warn); }
.sx-stage:not([data-hit=""]) .nosbx .guard span { border-color: var(--warn); color: var(--warn); }
.sx-stage:not([data-hit=""]) .b-kern .lane.l-a .pill { --tc: var(--warn); }
.kshared span.bad { background: color-mix(in srgb, var(--warn) 15%, var(--card)); }
.nodestack { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.nodestack .box { flex: none; }
.nodestack .kubelet { padding: 0.05rem 0.4rem; }
.nodestack .kubelet .kbar span { font-size: 0.66rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The API band in lanes: each runtime's RuntimeClass and pods over its lane */
.b-api .lane { gap: 0.15rem; }
.apisplit { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.3rem; }
.apisplit > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* kubectl, a window floating over the lane heads while a step types in it */
.kpop { position: absolute; z-index: 26; top: 0; right: 0; width: min(520px, 60%); max-height: 150px; display: flex;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); border-radius: 8px; }
.kpop[hidden] { display: none; }
.kpop .term { flex: 1; }
.kpop .tl { white-space: pre-wrap; }
.kpop .out { white-space: pre-wrap; }
.b-api .lane .kobj, .b-api .lane button.kobj { flex-wrap: wrap; white-space: normal; }
.b-api .lane { overflow: visible; }
.apibox { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.asbrow { display: flex; flex-wrap: wrap; gap: 0.2rem 0.3rem; align-items: center; border: 1px solid color-mix(in srgb, var(--c-d) 35%, var(--border)); border-radius: 7px; padding: 0.2rem 0.35rem; }
.asbrow h3 { margin: 0 0.3rem 0 0; flex-basis: 100%; }
.asbrow .kobj { flex: 0 1 auto; max-width: 32%; }
.kobj .kind { flex: none; overflow: visible; }
.kobj b { flex: none; }
/* The two bottom bands, where the runtimes differ most, in larger type:
   their lanes scroll for it */
.b-sbx .lanes, .b-kern .kbox { zoom: 1.2; }
/* "No sandbox": the point of runc's lane, as a label */
.nosbx p { font-size: 0.74rem; }
.nosbx p b { display: inline-block; background: var(--c-a); color: #fff; font-size: 0.95rem; padding: 0.05rem 0.5rem; border-radius: 5px; margin-right: 0.25rem; }
.sx-stage:not([data-hit=""]) .nosbx p b { background: var(--warn); color: #fff; }
/* The border between two layers, dragged to share the height between them */
.hsplit { position: absolute; left: 0; right: 0; top: 0; height: 7px; cursor: row-resize; touch-action: none; z-index: 5; }
.hsplit::after { content: ''; position: absolute; left: 50%; top: 1px; width: 48px; height: 4px; margin-left: -24px; border-radius: 2px; background: var(--border); }
.hsplit:hover::after, .hsplit.drag::after { background: var(--accent); }
.b-sbx .lane, .b-kern .lane, .b-work .lane, .b-shim .lane { overflow: auto; }
@media (max-width: 1100px) { .hsplit { display: none; } }
/* A pod's containers side by side in one row, however many: pause narrow */
.ctrs { flex-wrap: nowrap; }
.ctr { min-width: 0; }
.ctr:first-child:not(:only-child) { flex: 0.7 1 0; }
.task span { overflow: hidden; text-overflow: ellipsis; }