/* Linux Containers: the Runtime Stack, built on the AI and Kubernetes
   viewers' stylesheet. 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 container; the host's own objects are grey */
  --c-web: #326ce5;
  --c-pause: #0f8a6a;
  --c-redis: #c96a12;
  --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-web: #7ea6ff;
    --c-pause: #4fd1a8;
    --c-redis: #f0a050;
    --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.1rem; 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; }

/* --- the stage: the stack of bands, and the events beside it */
.rs-stage { position: relative; display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) 12px var(--log-w, 400px);
  height: max(880px, calc(100vh - 6.2rem)); }
@media (min-width: 1101px) { .in-viewer .rs-stage { height: max(880px, calc(100vh - 4.1rem)); } }
.rs-stack { display: grid; gap: 6px; min-height: 0; min-width: 0;
  grid-template-rows: 134px 58px 112px 66px 118px minmax(300px, 1fr); }
.rs-split { cursor: col-resize; touch-action: none; position: relative; }
.rs-split::after { content: ''; position: absolute; top: 50%; left: 4px; height: 44px; width: 4px; margin-top: -22px;
  border-radius: 2px; background: var(--border); }
.rs-split:hover::after, .rs-split:focus-visible::after, .rs-split.drag::after { background: var(--accent); }
.rs-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.74rem; 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; }
.band.here { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.rail { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0.5rem; border-right: 1px solid var(--border); background: var(--raw); min-height: 0; }
.rail b { font-size: 0.8rem; line-height: 1.15; }
.rail span { font-size: 0.66rem; color: var(--dim); line-height: 1.2; }
.rail .turn { margin-top: auto; align-self: stretch; font-size: 0.7rem; padding: 0.15rem 0.4rem; white-space: normal; text-align: left; animation: rs-due 1.4s ease-in-out infinite; }
@keyframes rs-due { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); } }
.bb { display: flex; gap: 0.5rem; padding: 0.4rem 0.5rem; 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)); }

.box { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--border); border-left: 4px solid var(--tc, var(--c-host));
  border-radius: 7px; padding: 0.25rem 0.45rem; background: var(--raw); min-width: 0; }
.box > span { font-size: 0.7rem; }
.box code { font-size: 0.68rem; }
.file { border: 1px dashed var(--tc); border-radius: 6px; padding: 0.15rem 0.4rem; font-size: 0.7rem; background: var(--card); }
.link { all: unset; cursor: pointer; color: var(--accent); font: 600 0.7rem ui-monospace, Menlo, monospace; text-decoration: underline dotted; }
.link:hover { text-decoration: underline; }

/* Owners: each object takes its container's colour */
.o-host { --tc: var(--c-host); } .o-web { --tc: var(--c-web); } .o-pause { --tc: var(--c-pause); } .o-redis { --tc: var(--c-redis); }
.o-pause.o-redis.shared { --tc: var(--c-pause); }

/* --- clients */
.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.72rem; color: #c9d4df; padding: 0.2rem 0.5rem; background: #161b22; }
.term .tbar b { font: 700 0.8rem ui-monospace, Menlo, monospace; color: #fff; }
.term .tbar i, .kbar i { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; }
.term .tbar i { margin-left: auto; color: #8b98a5; }
.client { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--c-host);
  border-radius: 4px; padding: 0 0.3rem; align-self: flex-start; }
.kbar b { font: 700 0.8rem ui-monospace, Menlo, monospace; }
.tscroll { flex: 1; min-height: 0; overflow: auto; padding: 0.25rem 0.5rem; font: 0.68rem/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; }
.daemon.client-box { flex: 1 1 0; max-width: 620px; }
.client-box > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbar { display: flex; align-items: baseline; gap: 0.4rem; }
.kbar i { margin-left: auto; color: var(--dim); }
.ctrs { flex: 1 1 0; min-width: 210px; display: flex; flex-direction: column; min-height: 0; }
.ctrs-head { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.25rem; }
.ctrs-head h3 { margin: 0 auto 0 0; }
.ctr-list { display: flex; flex-wrap: wrap; gap: 0.3rem; align-content: flex-start; overflow: auto; min-height: 0; }
.ctr { all: unset; cursor: pointer; display: grid; grid-template-columns: auto auto auto; gap: 0 0.35rem; align-items: baseline;
  border: 1px solid var(--border); border-left: 5px solid var(--tc); border-radius: 7px; padding: 0.15rem 0.45rem; background: var(--card); font-size: 0.74rem; }
.ctr .dot { display: none; }
.ctr b { color: var(--tc); }
.ctr span { color: var(--dim); font-size: 0.68rem; }
.ctr em { grid-column: 1 / -1; font-style: normal; font-size: 0.64rem; font-weight: 700; color: var(--dim); }
.ctr:hover, .ctr.sel { box-shadow: 0 0 0 2px var(--tc); }
.podchip { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; border: 1.5px dashed var(--c-pause); border-radius: 9px; padding: 0.2rem 0.3rem; }
.podname { all: unset; cursor: pointer; font-size: 0.72rem; padding: 0 0.2rem; }
.podname em { font-style: normal; color: var(--dim); font-size: 0.64rem; }
.podchip.sel { box-shadow: 0 0 0 2px var(--c-pause); }

/* --- the high-level runtime */
.daemon { flex: 0 0 150px; }
.daemon.down { opacity: 0.45; border-style: dashed; }
.snaps { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.snaps h3 code { font-size: 0.6rem; }
.snap-row { display: flex; flex-wrap: wrap; gap: 0.2rem; overflow: auto; min-height: 0; align-content: flex-start; }
.snap { display: flex; flex-direction: column; min-width: 2.6rem; padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--raw);
  border: 1px solid var(--border); border-bottom: 3px solid var(--tc); font-size: 0.64rem; line-height: 1.2; }
.snap b { font: 700 0.68rem ui-monospace, Menlo, monospace; }
.snap span { color: var(--dim); }
.snap.rw { border-style: solid; border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--card)); }
.snap ul { margin: 0.1rem 0 0; padding: 0; list-style: none; max-width: 22rem; }
.snap li { font-size: 0.62rem; }
.snap li i { color: var(--dim); }
.bundles { flex: 0 1 250px; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; overflow: auto; }

/* --- the shims */
.shims { display: flex; gap: 0.5rem; align-items: stretch; min-width: 0; }
.shimbox { flex: 0 1 430px; }
.shimbox > span { font-size: 0.66rem; }
.shimbox .exit { color: var(--tc); }

/* --- the OCI runtime */
.specs { flex: 0 0 340px; font-size: 0.66rem; line-height: 1.3; overflow: auto; }
.specs p { margin: 0; }
.specs ul { margin: 0.05rem 0; padding-left: 1rem; }
.specs ul ul { padding-left: 0.9rem; list-style: circle; }
.specs code { font-size: 0.62rem; }
.runs { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.runcbox .args { font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.runcbox { border-style: dashed; border-left-style: solid; }
.lives { flex: 1.3 1 0; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; overflow: auto; }
.life { display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; align-items: center; }
.states { display: flex; gap: 0.2rem; align-items: center; font-size: 0.66rem; }
.states b { color: var(--tc); min-width: 2.6rem; }
.states span { color: var(--dim); padding: 0 0.2rem; border-radius: 4px; }
.states span.on { background: var(--tc); color: #fff; font-weight: 700; }
.states i { color: var(--dim); font-style: normal; font-size: 0.6rem; }
.statedir code { font-size: 0.6rem; color: var(--dim); }
.fifo { color: var(--tc); }
.alts { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.altc { border: 1px solid var(--border); border-radius: 5px; padding: 0 0.35rem; font-weight: 700; font-size: 0.72rem; }
.altc i { font-weight: 400; color: var(--dim); font-style: normal; }
.altc.on { border-color: var(--accent); }

/* --- the processes */
.pcols { display: flex; gap: 0.8rem; min-width: 0; }
.pcol { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 0 1 290px; }
.pill { display: flex; gap: 0.35rem; align-items: baseline; border-left: 4px solid var(--tc); padding: 0.02rem 0.35rem; border-radius: 4px;
  background: color-mix(in srgb, var(--tc) 10%, var(--card)); font-size: 0.7rem; white-space: nowrap; }
.pill b { font: 700 0.68rem ui-monospace, Menlo, monospace; min-width: 2.2rem; }
.pill span { overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; }
.pill em { font-style: normal; font-size: 0.6rem; color: var(--dim); margin-left: auto; }
.pill em.w { color: var(--tc); font-weight: 700; }
.pill.child { margin-left: 1.1rem; }
.pill.transient { border-left-style: dashed; background: transparent; outline: 1px dashed color-mix(in srgb, var(--tc) 50%, transparent); }
.pill.waiting { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tc) 14%, var(--card)) 0 6px, var(--card) 6px 12px); }

/* --- the kernel */
.kgrid { display: grid; gap: 0; width: 100%; min-height: 0; }
.kp { min-height: 0; min-width: 0; overflow: auto; border: 1px solid var(--border); border-radius: 7px; padding: 0.3rem 0.4rem; background: var(--card); }
.nsrow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: start; margin-bottom: 0.2rem; }
.nsl { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.nst { padding-top: 0.05rem; font: 700 0.66rem ui-monospace, Menlo, monospace; color: var(--dim); }
.nsc { font: 0.62rem ui-monospace, Menlo, monospace; padding: 0.02rem 0.3rem; border-radius: 4px; border-left: 4px solid var(--tc);
  background: color-mix(in srgb, var(--tc) 12%, var(--card)); white-space: nowrap; }
.nsc.o-host { background: var(--raw); color: var(--dim); }
.nsc.o-pause.o-redis { border-right: 4px solid var(--c-redis); }
.cgn { font-size: 0.66rem; line-height: 1.3; padding: 0.05rem 0.25rem; border-left: 3px solid var(--tc); margin-bottom: 0.1rem; }
.cgn.o-host { border-left-color: transparent; }
.cgn code { font-size: 0.64rem; }
.cgn.d1 { margin-left: 0.6rem; } .cgn.d2 { margin-left: 1.2rem; } .cgn.d3 { margin-left: 1.8rem; } .cgn.d4 { margin-left: 2.4rem; }
.cgf { display: block; font: 0.6rem ui-monospace, Menlo, monospace; color: var(--text); }
.cgf i { font-style: normal; color: var(--dim); }
.cgn .dim { font-size: 0.6rem; }
.mns { border-left: 3px solid var(--tc, var(--c-host)); padding: 0.1rem 0.3rem; margin-bottom: 0.25rem; }
.mns p { margin: 0.05rem 0; font-size: 0.64rem; line-height: 1.3; }
.mns code { font-size: 0.62rem; }
.mns h4 { color: var(--tc, var(--dim)); }
.ovl { border-left: 3px solid var(--tc); padding-left: 0.25rem; }
.ovl code { overflow-wrap: anywhere; }
.secbox { border-left: 3px solid var(--tc); padding: 0.1rem 0.3rem; margin-bottom: 0.3rem; }
.secbox h4 { color: var(--tc); }
.secbox dl { margin: 0; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 0.3rem; font-size: 0.64rem; }
.secbox dt { color: var(--dim); }
.secbox dd { margin: 0; }
.secbox code { font-size: 0.6rem; }
.warn { color: var(--warn); font-weight: 700; }
.kgrid.one { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 8px; }

/* --- a tour step's spotlight: the bands it names stay, the rest dims */
.rs-stage.spotlight .band:not(.here) { opacity: 0.35; }
.rs-stage.spotlight .act { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-radius: 6px; }
.act.box, .act.snap, .act.file, .act.pill, .act.nsc, .act.cgn, .act.states, .act.secbox, .act.mns, .act.ovl, .act.ctr, .act.podchip {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }

/* --- a container selected: what it is made of lights, the rest dims */
.rs-stage[data-picked="web"] { --sel: var(--c-web); }
.rs-stage[data-picked="pause"], .rs-stage[data-picked="pod"] { --sel: var(--c-pause); }
.rs-stage[data-picked="redis"] { --sel: var(--c-redis); }
.rs-stage:not([data-picked=""]) .rs-stack [data-own]:not(.mine) { opacity: 0.28; }
.rs-stage:not([data-picked=""]) .rs-stack [data-own].mine { outline: 2px solid var(--sel); outline-offset: 1px; }
.rs-stage:not([data-picked=""]) .rs-stack .mine [data-own].mine { outline: none; }

/* --- what is in the air: a message flying along its arrow, in its owner's colour */
#rs-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 50; }
#rs-fly .trail { position: absolute; left: 0; top: 0; overflow: visible; }
#rs-fly .trail polyline { fill: none; stroke: var(--tc, var(--accent)); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 7; }
#rs-fly .trail path { fill: var(--tc, var(--accent)); }
#rs-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); }

/* --- a file opened */
.rs-file { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; padding: 16px; }
.rs-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; }

/* --- narrower screens: the bands stack at their own height, the events under them */
@media (max-width: 1100px) {
  .rs-stage { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rs-split { display: none; }
  .rs-stack { grid-template-rows: none; }
  .band { min-height: 64px; }
  .bb { flex-wrap: wrap; }
  .b-cli .bb { height: 260px; }
  .kgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kp { max-height: 260px; }
  .rs-log { height: 440px; margin-top: 8px; }
  .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: 640px) {
  .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: baseline; gap: 0.2rem 0.5rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .rail .turn { margin: 0 0 0 auto; }
  .b-cli .bb { height: auto; }
  .term { flex-basis: 100%; height: 200px; }
  .kgrid { grid-template-columns: minmax(0, 1fr); }
  .daemon, .bundles, .specs { flex-basis: 100%; }
}

/* The events are the main read: their size is the reader's, set with A− / A+
   in the card's header and kept per browser */
.rs-log .kv-body { font-size: calc(0.84rem * var(--lz, 1.15)); }
.rs-log .log-body { padding-left: 2.4em; }
.zoom { display: flex; gap: 0.2rem; }
.zoom .kv-btn { padding: 0.05rem 0.45rem; font-size: 0.78rem; font-weight: 700; }

/* Each client's own containers, at the foot of its box */
.mine-row { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: auto; padding-top: 0.25rem; }
.term .mine-row { padding: 0.25rem 0.5rem; background: #161b22; color: #c9d4df; }
.mine-row .lbl { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.mine-row .none { font-size: 0.7rem; font-style: italic; opacity: 0.7; }
.mine-row .kv-btn { margin-left: auto; }
.term .mine-row .kv-btn { background: #21262d; color: #e6edf3; border-color: #30363d; }
.ctr { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.1rem 0.4rem; }
.ctr em { font-size: 0.64rem; }
.podchip { gap: 0.2rem; }

/* --- a layer's doc: the book on each rail opens it in a box floating over
   the left of the stack; any click closes it */
.rail { align-items: center; }
.book { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 56px; height: 50px;
  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; }
.rs-stack { position: relative; }
.rs-doc { position: absolute; z-index: 30; left: 130px; top: 0; bottom: 0; width: min(46%, 660px); 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; }
.rs-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 > p:first-child { font-weight: 600; font-size: 1.08em; }
.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; }
@media (max-width: 1100px) {
  .rs-doc { position: fixed; left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; z-index: 90; }
}
.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 > .dtitle + p { font-weight: 600; font-size: 1.08em; }
/* A doc's closing summary, set off from its last section */
.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; }

/* --- the kernel's processes panel, and the bars between the panels */
.kp .pill { margin-bottom: 0.12rem; }
.pill.d1 { margin-left: 0.7rem; } .pill.d2 { margin-left: 1.4rem; } .pill.d3 { margin-left: 2.1rem; }
.ksplit { cursor: col-resize; touch-action: none; position: relative; }
.ksplit::after { content: ''; position: absolute; top: 50%; left: 2px; width: 4px; height: 40px; margin-top: -20px; border-radius: 2px; background: var(--border); }
.ksplit:hover::after, .ksplit.drag::after { background: var(--accent); }
@media (max-width: 1100px) {
  .kgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0.5rem; }
  .ksplit { display: none; }
}
@media (max-width: 640px) {
  .kgrid { grid-template-columns: minmax(0, 1fr) !important; }
}