/* The Run views (S5, RID867), in the Cockpit's look (MERLIN v3 client/src/cockpit.css,
   RID596: the Merlin Liquidity navy, blue and violet; neon green for what is live,
   orange for work sent back, red for what blocked). The tokens are copied, not
   imported: the Bridge serves its own page and reaches nothing of MERLIN's. */
.ck {
  --ck-bg: #0b1020; --ck-bg-2: #111833; --ck-panel: #131b36; --ck-card: rgba(255, 255, 255, 0.045);
  --ck-line: rgba(255, 255, 255, 0.16); --ck-line-strong: rgba(255, 255, 255, 0.28); --ck-edge: rgba(122, 167, 255, 0.42);
  --ck-title: #dbe4ff; --ck-ink: #eef1fb; --ck-muted: #a7b0cc;
  --ck-blue: #7aa7ff; --ck-violet: #9b7bff; --ck-live: #39ff88; --ck-done: #3ccf91; --ck-warn: #ff9f43; --ck-bad: #ff6b6b; --ck-cyan: #4dd9ff; --ck-idle: #5c6788;
  color: var(--ck-ink); color-scheme: dark;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%;
  background: radial-gradient(60vmax 40vmax at 15% 0%, rgba(122, 167, 255, 0.12), transparent 70%), radial-gradient(50vmax 40vmax at 90% 10%, rgba(155, 123, 255, 0.10), transparent 70%), linear-gradient(180deg, var(--ck-bg) 0%, var(--ck-bg-2) 100%); }
header { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--ck-line); background: rgba(11, 16, 32, 0.6); backdrop-filter: blur(6px); }
.brand { font-weight: 600; white-space: nowrap; color: var(--ck-title); letter-spacing: .01em; } .brand span { color: var(--ck-blue); } .brand em { font-style: normal; color: var(--ck-muted); font-weight: 400; margin-left: 6px; }
.about { font-size: 12.5px; color: var(--ck-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.spacer { flex: 1; }
.keybar { display: flex; align-items: center; gap: 6px; }
.keybar input { width: 290px; }
.state { font-size: 12.5px; color: var(--ck-muted); } .state.ok { color: var(--ck-done); } .state.bad { color: var(--ck-bad); }
button { font: inherit; padding: 5px 11px; border: 1px solid var(--ck-line-strong); background: rgba(255,255,255,0.06); color: var(--ck-ink); border-radius: 7px; cursor: pointer; }
button:hover { border-color: var(--ck-blue); } button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(180deg, #3b6fd6, #2c58b3); border-color: transparent; color: #fff; }
button.ghost { background: transparent; }
button.danger { border-color: var(--ck-warn); color: var(--ck-warn); }
input, select, textarea { font: inherit; padding: 5px 7px; border: 1px solid var(--ck-line-strong); border-radius: 6px; background: rgba(0,0,0,0.25); color: var(--ck-ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ck-blue); box-shadow: 0 0 0 2px rgba(122,167,255,0.25); }
main { display: grid; grid-template-columns: 250px 1fr; min-height: 0; position: relative; }
main.with-detail { grid-template-columns: 250px 1fr 400px; }
#side { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-right: 1px solid var(--ck-line); overflow: auto; }
.card { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: 10px; padding: 10px 12px; }
.card.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ck-muted); font-weight: 600; }
.card form label { display: block; font-size: 12.5px; color: var(--ck-muted); margin: 6px 0; }
.card form label input:not([type=checkbox]), .card form label select { display: block; width: 100%; margin-top: 3px; }
.card form label small { display: block; font-size: 11px; opacity: .8; }
.card form label.row { display: flex; align-items: center; gap: 8px; }
.card form button { margin-top: 8px; }
.muted { color: var(--ck-muted); }
.runs { list-style: none; margin: 0; padding: 0; overflow: auto; }
.runs li { padding: 7px 8px; border-radius: 8px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border: 1px solid transparent; }
.runs li:hover { background: rgba(255,255,255,0.05); } .runs li.on { border-color: var(--ck-edge); background: rgba(122,167,255,0.10); }
.runs li .id { font-weight: 600; color: var(--ck-title); font-size: 13px; } .runs li .sub { grid-column: 1 / -1; font-size: 11.5px; color: var(--ck-muted); }
#run { padding: 12px 16px; overflow: auto; min-width: 0; }
.empty { color: var(--ck-muted); padding: 30px 10px; text-align: center; }
.runhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.runhead h2 { margin: 0; font-size: 20px; color: var(--ck-title); font-weight: 600; }
.runstate { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--ck-line-strong); color: var(--ck-ink); background: rgba(255,255,255,0.06); }
.chip.running { color: var(--ck-live); border-color: var(--ck-live); box-shadow: 0 0 10px rgba(57,255,136,0.35); animation: pulse 1.6s ease-in-out infinite; }
.chip.waiting { color: var(--ck-warn); border-color: var(--ck-warn); }
.chip.completed, .chip.done { color: var(--ck-done); border-color: var(--ck-done); }
.chip.returned { color: var(--ck-warn); border-color: var(--ck-warn); }
.chip.stopped, .chip.failed, .chip.block { color: var(--ck-bad); border-color: var(--ck-bad); }
.chip.pending { color: var(--ck-idle); border-color: var(--ck-idle); }
.chip.warn { color: var(--ck-warn); border-color: var(--ck-warn); } .chip.pass { color: var(--ck-done); border-color: var(--ck-done); } .chip.flag { color: var(--ck-cyan); border-color: var(--ck-cyan); }
.chip.shadow { color: var(--ck-violet); border-color: var(--ck-violet); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.lanes { margin: 14px 0 10px; border: 1px solid var(--ck-line); border-radius: 10px; overflow: hidden; }
.lane { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
.lane.agent { background: rgba(155,123,255,0.10); border-bottom: 1px dashed var(--ck-line-strong); } .lane.enterprise { background: rgba(122,167,255,0.07); }
.lane .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ck-muted); width: 90px; }
.stepchip { padding: 3px 8px; border-radius: 7px; font-size: 12px; border: 1px solid var(--ck-line-strong); cursor: pointer; background: rgba(0,0,0,0.2); }
.stepchip b { font-weight: 600; } .stepchip small { color: var(--ck-muted); margin-left: 4px; }
.stepchip.done { border-color: var(--ck-done); } .stepchip.returned { border-color: var(--ck-warn); color: var(--ck-warn); }
.stepchip.waiting { border-color: var(--ck-warn); box-shadow: 0 0 8px rgba(255,159,67,0.4); } .stepchip.running { border-color: var(--ck-live); box-shadow: 0 0 8px rgba(57,255,136,0.4); }
.stepchip.failed, .stepchip.blocked { border-color: var(--ck-bad); color: var(--ck-bad); } .stepchip.on { outline: 2px solid var(--ck-blue); }
.bridge { text-align: center; font-size: 11px; color: var(--ck-muted); letter-spacing: .08em; text-transform: uppercase; padding: 2px; background: rgba(0,0,0,0.25); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ck-line-strong); margin-top: 8px; padding: 0 4px; }
.tabs button { border: 1px solid var(--ck-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: rgba(255,255,255,0.03); color: var(--ck-muted); padding: 7px 12px; margin-bottom: -1px; }
.tabs button.on { color: var(--ck-title); font-weight: 600; background: var(--ck-panel); border-color: var(--ck-line-strong); border-bottom: 1px solid var(--ck-panel); box-shadow: inset 0 2px 0 var(--ck-blue); }
.tab { display: none; padding: 10px 0; } .tab.on { display: block; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-weight: 600; color: var(--ck-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--ck-line-strong); }
td { padding: 6px 8px; border-bottom: 1px solid var(--ck-line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover td { background: rgba(255,255,255,0.04); } tr.on td { background: rgba(122,167,255,0.12); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.small { font-size: 12px; } .note { color: var(--ck-muted); font-size: 12.5px; }
#detail { border-left: 1px solid var(--ck-line); padding: 12px; overflow: auto; display: none; position: relative; }
main.with-detail #detail { display: block; }
#detail .close { position: absolute; top: 8px; right: 10px; }
#detail h3 { margin: 0 0 4px; font-size: 15px; color: var(--ck-title); } #detail h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ck-muted); }
.finding { padding: 6px 8px; border-left: 3px solid var(--ck-idle); margin: 4px 0; background: rgba(0,0,0,0.2); border-radius: 0 6px 6px 0; font-size: 13px; }
.finding.block { border-left-color: var(--ck-bad); } .finding.warn { border-left-color: var(--ck-warn); } .finding.pass { border-left-color: var(--ck-done); opacity: .85; } .finding.flag { border-left-color: var(--ck-cyan); }
.finding .id { font-weight: 600; margin-right: 6px; } .finding .src { color: var(--ck-muted); font-size: 11.5px; margin-left: 6px; }
.approve-form { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 8px; align-items: end; margin: 10px 0; }
.approve-form label { font-size: 12px; color: var(--ck-muted); } .approve-form label input, .approve-form label select { display: block; margin-top: 3px; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.verdict { padding: 8px 10px; border: 1px solid var(--ck-line); border-radius: 8px; margin-bottom: 8px; background: rgba(0,0,0,0.18); font-size: 13px; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); opacity: 0; transition: .2s; background: #1b2550; color: var(--ck-ink); border: 1px solid var(--ck-edge); padding: 8px 14px; border-radius: 8px; max-width: 70vw; font-size: 13px; pointer-events: none; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* S5b (RID890): the Policy page */
.pages { display: flex; gap: 0; margin-left: 14px; border: 1px solid var(--ck-line-strong); border-radius: 8px; overflow: hidden; }
.pages button, .pages a { border-radius: 0; padding: 5px 13px; background: transparent; border: 0; border-right: 1px solid var(--ck-line); color: var(--ck-muted); text-decoration: none; font: inherit; font-weight: 500; cursor: pointer; }
.pages > :last-child { border-right: 0; }
.pages button.on, .pages a.on { color: #fff; background: linear-gradient(180deg, #3b6fd6, #2c58b3); }
.pages a:hover:not(.on), .pages button:hover:not(.on) { background: rgba(122,167,255,0.12); color: var(--ck-title); }
#main-policy { padding: 12px 16px; overflow: auto; min-height: 0; }
.policy-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: start; }
.policy-grid .card { margin-bottom: 12px; }
.filebtn { display: inline-block; font: inherit; padding: 5px 11px; border: 1px solid var(--ck-line-strong); background: rgba(255,255,255,0.06); color: var(--ck-ink); border-radius: 7px; cursor: pointer; }
.filebtn:hover { border-color: var(--ck-blue); }
.rule-when { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--ck-cyan); }
.diff-add { color: var(--ck-done); } .diff-rem { color: var(--ck-bad); } .diff-chg { color: var(--ck-warn); }
@media (max-width: 1000px) { .policy-grid { grid-template-columns: 1fr; } }

/* The Studio home (S7, RID907): the three planes, the systems, the cards. */
#main-home { display: block; overflow: auto; padding: 16px 18px; min-height: 0; }
.home .planes { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 14px; align-items: stretch; }
.home .plane { border: 1px solid var(--ck-line); border-radius: 12px; padding: 12px 14px; background: var(--ck-card); }
.home .plane.agent { border-color: rgba(155,123,255,0.55); background: linear-gradient(180deg, rgba(155,123,255,0.10), rgba(255,255,255,0.03)); }
.home .plane.ent { border-color: rgba(122,167,255,0.55); background: linear-gradient(180deg, rgba(122,167,255,0.10), rgba(255,255,255,0.03)); }
.home .plane.door { text-align: center; border-style: dashed; display: flex; flex-direction: column; justify-content: center; }
.home .plane.door .arrow { font-size: 30px; color: var(--ck-cyan); line-height: 1; margin-bottom: 4px; }
.home .plane h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ck-muted); }
.home .plane .box { border: 1px solid var(--ck-line); border-radius: 9px; padding: 8px 10px; background: rgba(0,0,0,0.18); min-height: 64px; }
.home .line { margin: 2px 0; } .home .small { font-size: 12.5px; } .home .big { font-size: 22px; }
.home .note { font-size: 12px; color: var(--ck-muted); margin: 8px 0 0; }
.home .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; background: var(--ck-idle); }
.home .dot.up { background: var(--ck-live); box-shadow: 0 0 8px rgba(57,255,136,0.6); } .home .dot.down { background: var(--ck-bad); box-shadow: 0 0 8px rgba(255,107,107,0.6); }
.home .systems { margin-top: 14px; border: 1px solid var(--ck-line); border-radius: 12px; padding: 10px 14px; background: var(--ck-card); }
.home .systems h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ck-muted); }
.home .systems .row { display: flex; gap: 12px; flex-wrap: wrap; }
.home .sys { flex: 1 1 240px; border: 1px solid var(--ck-line); border-radius: 9px; padding: 8px 10px; background: rgba(0,0,0,0.18); }
.home .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.home ul.plain { list-style: none; margin: 0; padding: 0; } .home ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--ck-line); font-size: 13px; } .home ul.plain li:last-child { border-bottom: 0; }
.home .actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.home .btn { display: inline-block; padding: 5px 11px; border: 1px solid var(--ck-line-strong); border-radius: 7px; color: var(--ck-ink); text-decoration: none; background: rgba(255,255,255,0.06); }
.home .btn:hover { border-color: var(--ck-blue); } .home .btn.primary { background: linear-gradient(180deg, #3b6fd6, #2c58b3); border-color: transparent; color: #fff; }
.home a { color: var(--ck-blue); }
@media (max-width: 820px) { .home .planes { grid-template-columns: 1fr; } .home .plane.door { order: 2; } }
/* collapsible sections on the home (RID908) */
.home details { border: 1px solid var(--ck-line); border-radius: 12px; background: var(--ck-card); margin-top: 14px; }
.home details > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ck-muted); display: flex; align-items: center; gap: 8px; }
.home details > summary::before { content: '▸'; color: var(--ck-blue); transition: transform .15s; } .home details[open] > summary::before { transform: rotate(90deg); }
.home details > .body { padding: 0 14px 14px; }
.home .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.home .step { border: 1px solid var(--ck-line); border-radius: 10px; padding: 10px 12px; background: rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 6px; }
.home .step .n { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #3b6fd6, #2c58b3); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.home .step b { color: var(--ck-title); } .home .step .small { color: var(--ck-muted); flex: 1; }
.home .planes { margin-top: 0; } .home .systems { margin-top: 0; border: 0; padding: 0; background: transparent; } .home .cards { margin-top: 0; }

/* RID909: the sign-in card, the map on the Run views (the canvas's drawing, MapDraw), the states */
body.locked main, body.locked #main-policy, body.locked #main-home { display: none !important; }
.signin { display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.signin .card { width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.signin h3 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ck-title); margin: 0; }
.signin input { width: 100%; } .signin .note { font-size: 12.5px; color: var(--ck-muted); margin: 0; }
.who { font-size: 12.5px; color: var(--ck-muted); } button.small { padding: 3px 9px; font-size: 12px; }
.ck { --k-trigger: #8a94a6; --k-source: #7aa7ff; --k-prep: #7aa7ff; --k-baseline: #a7b0cc; --k-agent: #9b7bff; --k-supervisor: #9b7bff;
  --k-check: #3ccf91; --k-check-ai: #4dd9ff; --k-router: #8a94a6; --k-people: #ff9f43; --k-act: #ff6b6b; --k-wait: #8a94a6; --k-reconcile: #7aa7ff; --k-stop: #8a94a6; }
.mapwrap { margin: 12px 0 4px; border: 1px solid var(--ck-line); border-radius: 10px; background: rgba(0,0,0,0.18); overflow: auto; display: flex; justify-content: center; padding: 6px; }
#map { display: block; user-select: none; }
#map .lane-agent { fill: rgba(155,123,255,0.09); stroke: rgba(155,123,255,0.5); } #map .lane-ent { fill: rgba(122,167,255,0.08); stroke: rgba(122,167,255,0.5); }
#map .lane-title { font-size: 12px; font-weight: 600; fill: var(--ck-muted); letter-spacing: .04em; }
#map .bridge { stroke: var(--ck-cyan); stroke-dasharray: 6 4; opacity: .7; }
#map .node .body { fill: #1a2242; stroke: var(--kc); stroke-width: 2; } #map .node .bar { fill: var(--kc); stroke: none; }
#map .node text { font-size: 12px; fill: var(--ck-ink); pointer-events: none; } #map .node .sub { fill: var(--ck-muted); font-size: 11px; }
#map .node .kicon { color: var(--kc); opacity: .9; pointer-events: none; }
#map .node { cursor: pointer; } #map .node.sel .body { stroke: var(--ck-blue); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(122,167,255,.8)); }
#map .node.st-pending .body { opacity: .55; } #map .node.st-pending text { opacity: .6; }
#map .node.st-done .body { stroke: var(--ck-done); }
#map .node.st-running .body { stroke: var(--ck-live); filter: drop-shadow(0 0 8px rgba(57,255,136,.6)); animation: pulse 1.6s ease-in-out infinite; }
#map .node.st-waiting .body { stroke: var(--ck-warn); filter: drop-shadow(0 0 8px rgba(255,159,67,.55)); }
#map .node.st-returned .body { stroke: var(--ck-warn); } #map .node.st-failed .body, #map .node.st-stopped .body, #map .node.st-blocked .body { stroke: var(--ck-bad); }
#map .stdot, .legend .stdot { stroke: #0b1020; stroke-width: 1.5; }
.legend .stdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; }
.stdot.done { fill: var(--ck-done); background: var(--ck-done); } .stdot.running { fill: var(--ck-live); background: var(--ck-live); } .stdot.waiting { fill: var(--ck-warn); background: var(--ck-warn); }
.stdot.returned { fill: #ffb86b; background: #ffb86b; } .stdot.failed, .stdot.stopped, .stdot.blocked { fill: var(--ck-bad); background: var(--ck-bad); } .stdot.pending { fill: var(--ck-idle); background: var(--ck-idle); }
#map .attempts { font-size: 10px; fill: var(--ck-warn); }
#map .link { fill: none; stroke-width: 1.6; opacity: .45; } #map .link.data { stroke: #93a0b8; } #map .link.event { stroke: var(--ck-done); } #map .link.approval { stroke: var(--ck-warn); stroke-width: 2.2; } #map .link.return { stroke: var(--ck-bad); stroke-dasharray: 6 4; }
#map .link.lit { opacity: 1; stroke: var(--ck-live); stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(57,255,136,.6)); }
#map .hit { fill: none; stroke: transparent; stroke-width: 10; }
#map .ltext { font-size: 11px; fill: #c9d2ea; } #map .lpill { fill: #0f162e; stroke: var(--ck-line); opacity: .92; }
#map .linkg:not(.lit) .ltext, #map .linkg:not(.lit) .lpill { opacity: .55; }
.legend { font-size: 12px; margin: 4px 0 8px; }
/* the home as a desk (RID909) */
.home .attn { margin-bottom: 14px; }
.home .attn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ck-line); background: var(--ck-card); }
.home .attn-row.need { border-color: var(--ck-warn); background: rgba(255,159,67,0.08); } .home .attn-row.calm { border-color: rgba(60,207,145,0.45); }
.home .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.home .tile { border: 1px solid var(--ck-line); border-radius: 12px; padding: 12px 14px; background: var(--ck-card); min-height: 150px; }
.home .th { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.home .th h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ck-muted); }
.home .btn.small { padding: 3px 9px; font-size: 12px; }
.home .maprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home .counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.home .count { border: 1px solid var(--ck-line); border-radius: 8px; padding: 6px 8px; text-align: center; background: rgba(0,0,0,0.18); }
.home .count b { display: block; font-size: 20px; color: var(--ck-title); } .home .count span { font-size: 11px; color: var(--ck-muted); }
.home .count.waiting b { color: var(--ck-warn); } .home .count.completed b { color: var(--ck-done); } .home .count.stopped b { color: var(--ck-bad); }
.home .sys-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; }
.home .chip.small { font-size: 11px; padding: 1px 7px; margin-left: 6px; }
/* the Bridge as a thin layer (RID911) */
#map .bridge { fill: rgba(77,217,255,0.07); stroke: rgba(77,217,255,0.45); stroke-dasharray: none; opacity: 1; }
#map .bridge-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; fill: var(--ck-cyan); }
#map .bridge-block rect { fill: rgba(77,217,255,0.12); stroke: rgba(77,217,255,0.55); }
#map .bridge-block text { font-size: 11px; fill: #bfefff; pointer-events: none; }
#map .bridge-note { font-size: 10px; fill: var(--ck-muted); }
/* RID913: the node's name, the bindings of the selected node */
#map .node .name { font-size: 12px; fill: #e6ebff; font-weight: 500; }
#map .binding path { fill: none; stroke: var(--ck-cyan); stroke-width: 1.6; stroke-dasharray: 2 4; opacity: .9; }
#map .binding.out path { stroke: #c4b5ff; }
#map .binding rect { fill: #0f2230; stroke: rgba(77,217,255,0.6); } #map .binding.out rect { fill: #1d1838; stroke: rgba(196,181,255,0.6); }
#map .binding text { font-size: 10.5px; fill: #bfefff; } #map .binding.out text { fill: #ded6ff; }
#map .bridge-block text { font-size: 10.5px; }
/* RID917: folded details under the map; folding cards on the left */
.tabs { align-items: flex-end; } .tabs-toggle { margin-left: auto; border: 0; background: transparent; color: var(--ck-blue); padding: 6px 8px; font-size: 12.5px; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▸'; color: var(--ck-blue); font-size: 11px; transition: transform .15s; } details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h3 { margin: 0; } #start-card[open] > summary { margin-bottom: 6px; }
details.past { margin-top: 8px; border-top: 1px solid var(--ck-line); padding-top: 6px; } details.past > summary { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ck-muted); }
#run-status.clickable { cursor: pointer; } #run-status.clickable:hover { box-shadow: 0 0 0 2px rgba(255,159,67,0.35); }
/* RID918: the run fills the screen; the map takes what the details do not */
#run { display: flex; flex-direction: column; overflow: hidden; height: 100%; min-height: 0; }
#run-body:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#run-body .mapwrap { flex: 1; min-height: 160px; align-items: center; margin-bottom: 2px; }
#run-body .legend { flex: none; margin: 2px 0 4px; }
#run-body .tabs { flex: none; margin-top: 2px; }
#run-body #tab-panels { flex: 0 0 46%; overflow: auto; min-height: 0; border: 1px solid var(--ck-line); border-top: 0; border-radius: 0 0 10px 10px; padding: 0 12px; background: rgba(0,0,0,0.12); }
#run-body:not(.open) .tabs { border-bottom: 1px solid var(--ck-line-strong); padding-bottom: 0; }
main { height: 100%; } #main-runs { min-height: 0; }
#main-runs.no-side { grid-template-columns: 0 1fr; } #main-runs.no-side.with-detail { grid-template-columns: 0 1fr 400px; } #main-runs.no-side #side { display: none; }

/* RID929: the brand is the way home; a deep-dive link under the runs list; a banner for a failure that is not a refused key */
a.brand { text-decoration: none; } a.brand:hover span { text-decoration: underline; }
.deep { display: block; margin: 10px 4px 2px; font-size: 12.5px; color: var(--ck-muted); text-decoration: none; } .deep:hover { color: var(--ck-blue); }
.pol-back { margin: 0 0 10px; color: var(--ck-muted); font-size: 13px; } .pol-back a { color: var(--ck-blue); text-decoration: none; }
.failbar { margin: 10px 16px; padding: 10px 14px; border: 1px solid var(--ck-bad); border-radius: 8px; color: var(--ck-title); background: rgba(255,90,90,0.08); font-size: 13px; }